diff --git a/.vscode/settings.json b/.vscode/settings.json
index b43223d..be9fa58 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -55,6 +55,7 @@
     "pageleave",
     "postbuild",
     "posthog",
+    "powerx",
     "protobufjs",
     "qwen",
     "renderable",
@@ -65,6 +66,7 @@
     "smallint",
     "smallserial",
     "timestamptz",
+    "togglable",
     "tput",
     "trtllm",
     "ttft",
diff --git a/README.md b/README.md
index 22facd5..2040572 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@ A [Next.js](https://nextjs.org) dashboard for visualizing ML inference benchmark
 
 ## Overview
 
-LLM inference performance is a major concern of providing AI services, but accurate performance analysis remains elusive. Fast cadence of software development and model releases makes comparing performance between setups difficult. Existing performance benchmarks quickly become obsolete due to being static, and participants game the benchmarks with unrealistic, highly specific configurations. InferenceX (formerly InferenceMAX) tackles these issues by benchmarking popular models on major hardware platforms nightly with the latest software. For each model and hardware combination, InferenceX sweeps through different tensor parallel sizes and max concurrent requests, showing the throughput vs. latency graph for the full picture. In terms of software configurations, we ensure they are generally applicable across different serving scenarios, and we open source the repo to welcome community contributions. We hope InferenceX informs the community up-to-date and realistic LLM inference performance.
+LLM inference performance is a major concern of providing AI services, but accurate performance analysis remains elusive. Fast cadence of software development and model releases makes comparing performance between setups difficult. Existing performance benchmarks quickly become obsolete due to being static, and participants game the benchmarks with unrealistic, highly specific configurations. InferenceX tackles these issues by benchmarking popular models on major hardware platforms nightly with the latest software. For each model and hardware combination, InferenceX sweeps through different tensor parallel sizes and max concurrent requests, showing the throughput vs. latency graph for the full picture. In terms of software configurations, we ensure they are generally applicable across different serving scenarios, and we open source the repo to welcome community contributions. We hope InferenceX informs the community up-to-date and realistic LLM inference performance.
 
 ## Architecture
 
diff --git a/packages/app/cypress/component/chart-legend.cy.tsx b/packages/app/cypress/component/chart-legend.cy.tsx
index d1310a9..4a362c2 100644
--- a/packages/app/cypress/component/chart-legend.cy.tsx
+++ b/packages/app/cypress/component/chart-legend.cy.tsx
@@ -58,9 +58,11 @@ function ChartLegendWrapper({ items = MOCK_ITEMS }: { items?: CommonLegendItemPr
       isLegendExpanded={expanded}
       onExpandedChange={setExpanded}
       variant="sidebar"
-      showResetFilter={itemsWithHandler.some((i) => !i.isActive)}
-      allSelected={itemsWithHandler.every((i) => i.isActive)}
-      onResetFilter={() => setLegendItems(items)}
+      actions={
+        itemsWithHandler.some((i) => !i.isActive)
+          ? [{ id: 'reset-filter', label: 'Reset filter', onClick: () => setLegendItems(items) }]
+          : []
+      }
     />
   );
 }
diff --git a/packages/app/cypress/component/favorite-presets.cy.tsx b/packages/app/cypress/component/favorite-presets.cy.tsx
deleted file mode 100644
index 4745a16..0000000
--- a/packages/app/cypress/component/favorite-presets.cy.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import FavoritePresetsDropdown from '@/components/favorites/FavoritePresetsDropdown';
-import { FAVORITE_PRESETS } from '@/components/favorites/favorite-presets';
-import { mountWithProviders } from '../support/test-utils';
-
-describe('FavoritePresetsDropdown', () => {
-  beforeEach(() => {
-    mountWithProviders(<FavoritePresetsDropdown />, { inference: {} });
-  });
-
-  it('renders the toggle button', () => {
-    cy.get('[data-testid="favorites-toggle"]').should('be.visible');
-    cy.get('[data-testid="favorites-toggle"]').should('contain.text', 'Favorites');
-  });
-
-  it('panel is hidden by default', () => {
-    cy.get('[data-testid="favorites-panel"]').should('not.exist');
-  });
-
-  it('clicking toggle opens the panel', () => {
-    cy.get('[data-testid="favorites-toggle"]').click();
-    cy.get('[data-testid="favorites-panel"]').should('be.visible');
-  });
-
-  it('clicking toggle again closes the panel', () => {
-    cy.get('[data-testid="favorites-toggle"]').click();
-    cy.get('[data-testid="favorites-panel"]').should('be.visible');
-    cy.get('[data-testid="favorites-toggle"]').click();
-    cy.get('[data-testid="favorites-panel"]').should('not.exist');
-  });
-
-  it('renders all preset cards with their titles', () => {
-    cy.get('[data-testid="favorites-toggle"]').click();
-
-    for (const preset of FAVORITE_PRESETS) {
-      cy.get(`[data-testid="favorite-preset-${preset.id}"]`)
-        .should('be.visible')
-        .and('contain.text', preset.title);
-    }
-  });
-
-  it('preset cards show descriptions and tags', () => {
-    cy.get('[data-testid="favorites-toggle"]').click();
-
-    const first = FAVORITE_PRESETS[0];
-    cy.get(`[data-testid="favorite-preset-${first.id}"]`).should(
-      'contain.text',
-      first.description.slice(0, 30),
-    );
-
-    for (const tag of first.tags) {
-      cy.get(`[data-testid="favorite-preset-${first.id}"]`).should('contain.text', tag);
-    }
-  });
-
-  it('clicking a preset calls context setters to apply it', () => {
-    cy.get('[data-testid="favorites-toggle"]').click();
-
-    const preset = FAVORITE_PRESETS[0]; // gb200-vs-b200
-    cy.get(`[data-testid="favorite-preset-${preset.id}"]`).click();
-
-    cy.get('@setSelectedModel').should('have.been.calledWith', preset.config.model);
-    cy.get('@setSelectedSequence').should('have.been.calledWith', preset.config.sequence);
-    cy.get('@setSelectedPrecisions').should('have.been.calledWith', preset.config.precisions);
-    cy.get('@setSelectedYAxisMetric').should('have.been.calledWith', preset.config.yAxisMetric);
-    cy.get('@setActivePresetId').should('have.been.calledWith', preset.id);
-  });
-
-  it('clicking an active preset clears it', () => {
-    // Mount with the first preset already active
-    mountWithProviders(<FavoritePresetsDropdown />, {
-      inference: { activePresetId: FAVORITE_PRESETS[0].id },
-    });
-
-    cy.get('[data-testid="favorites-toggle"]').click();
-    cy.get(`[data-testid="favorite-preset-${FAVORITE_PRESETS[0].id}"]`).click();
-
-    // Clearing sets activePresetId to null
-    cy.get('@setActivePresetId').should('have.been.calledWith', null);
-    cy.get('@selectAllHwTypes').should('have.been.called');
-  });
-
-  it('shows "Active" badge when a preset is active', () => {
-    mountWithProviders(<FavoritePresetsDropdown />, {
-      inference: { activePresetId: FAVORITE_PRESETS[0].id },
-    });
-
-    cy.get('[data-testid="favorites-toggle"]').should('contain.text', FAVORITE_PRESETS[0].title);
-    cy.get('[data-testid="favorites-toggle"]').should('contain.text', 'Active');
-  });
-});
diff --git a/packages/app/cypress/e2e/favorite-presets.cy.ts b/packages/app/cypress/e2e/favorite-presets.cy.ts
deleted file mode 100644
index 4c1bf44..0000000
--- a/packages/app/cypress/e2e/favorite-presets.cy.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-describe('Favorite Presets', () => {
-  before(() => {
-    cy.visit('/', {
-      onBeforeLoad(win) {
-        win.localStorage.setItem('inferencex-star-modal-dismissed', String(Date.now()));
-      },
-    });
-    cy.get('[data-testid="model-selector"]').should('be.visible');
-  });
-
-  it('renders the favorites dropdown toggle', () => {
-    cy.get('[data-testid="favorites-toggle"]').should('be.visible');
-    cy.get('[data-testid="favorites-toggle"]').should('contain.text', 'Favorites');
-  });
-
-  it('opens the preset panel on click', () => {
-    cy.get('[data-testid="favorites-toggle"]').click();
-    cy.get('[data-testid="favorites-panel"]').should('be.visible');
-  });
-
-  it('shows all 6 preset cards', () => {
-    cy.get('[data-testid^="favorite-preset-"]').should('have.length', 6);
-  });
-
-  it('each preset card has a title and description', () => {
-    cy.get('[data-testid^="favorite-preset-"]').each(($card) => {
-      cy.wrap($card).find('p').first().should('not.be.empty');
-      cy.wrap($card).find('p').eq(1).should('not.be.empty');
-    });
-  });
-
-  it('each preset card has at least one tag badge', () => {
-    cy.get('[data-testid^="favorite-preset-"]').each(($card) => {
-      cy.wrap($card).find('.flex-wrap').children().should('have.length.greaterThan', 0);
-    });
-  });
-
-  // Scatter preset: b200-vs-h200
-  it('activating b200-vs-h200 shows Active badge and renders data', () => {
-    cy.get('[data-testid="favorite-preset-b200-vs-h200"]').click();
-    cy.get('[data-testid="favorites-toggle"]').should('contain.text', 'B200 vs H200');
-    cy.get('[data-testid="favorites-toggle"]').should('contain.text', 'Active');
-
-    // Chart should render with data points (not empty)
-    cy.get('[data-testid="scatter-graph"]').first().find('svg .dot-group').should('exist');
-    cy.contains('No data available').should('not.exist');
-  });
-
-  // Deactivate preset
-  it('clicking the active preset again deactivates it', () => {
-    cy.get('[data-testid="favorite-preset-b200-vs-h200"]').click();
-    cy.get('[data-testid="favorites-toggle"]').should('contain.text', 'Favorites');
-    cy.get('[data-testid="favorites-toggle"]').should('not.contain.text', 'Active');
-
-    // Chart should still render (not empty)
-    cy.get('[data-testid="scatter-graph"]').first().find('svg').should('exist');
-  });
-
-  // Scatter preset: amd-generations
-  it('activating amd-generations shows AMD preset and renders data', () => {
-    cy.get('[data-testid="favorite-preset-amd-generations"]').click();
-    cy.get('[data-testid="favorites-toggle"]').should('contain.text', 'AMD');
-    cy.get('[data-testid="favorites-toggle"]').should('contain.text', 'Active');
-
-    cy.get('[data-testid="scatter-graph"]').first().find('svg .dot-group').should('exist');
-    cy.contains('No data available').should('not.exist');
-  });
-
-  // Switch directly to another preset
-  it('switching from one preset to another updates the active state', () => {
-    cy.get('[data-testid="favorite-preset-gb200-vs-b200"]').click();
-    cy.get('[data-testid="favorites-toggle"]').should('contain.text', 'GB200');
-    cy.get('[data-testid="favorites-toggle"]').should('contain.text', 'Active');
-  });
-
-  // Clean up: deactivate and close
-  it('deactivate and close the panel', () => {
-    cy.get('[data-testid="favorite-preset-gb200-vs-b200"]').click();
-    cy.get('[data-testid="favorites-toggle"]').should('not.contain.text', 'Active');
-    cy.get('[data-testid="favorites-toggle"]').click();
-    cy.get('[data-testid="favorites-panel"]').should('not.exist');
-  });
-});
diff --git a/packages/app/cypress/support/mock-data.ts b/packages/app/cypress/support/mock-data.ts
index eb0b251..e7a8c1d 100644
--- a/packages/app/cypress/support/mock-data.ts
+++ b/packages/app/cypress/support/mock-data.ts
@@ -34,42 +34,36 @@ export function createMockHardwareConfig(): HardwareConfig {
       label: 'H100',
       suffix: '',
       gpu: "NVIDIA 'Hopper' H100",
-      color: 'var(--h100)',
     },
     h200: {
       name: 'h200',
       label: 'H200',
       suffix: '',
       gpu: "NVIDIA 'Hopper' H200",
-      color: 'var(--h200)',
     },
     b200: {
       name: 'b200',
       label: 'B200',
       suffix: '',
       gpu: "NVIDIA 'Blackwell' B200",
-      color: 'var(--b200)',
     },
     b200_trt: {
       name: 'b200-trt',
       label: 'B200',
       suffix: '(TRT)',
       gpu: "NVIDIA 'Blackwell' B200 TRT",
-      color: 'var(--b200-trt)',
     },
     mi300x: {
       name: 'mi300x',
       label: 'MI300X',
       suffix: '',
       gpu: 'AMD Instinct MI300X',
-      color: 'var(--mi300x)',
     },
     h100_vllm: {
       name: 'h100-vllm',
       label: 'H100',
       suffix: '(vLLM)',
       gpu: "NVIDIA 'Hopper' H100 vLLM",
-      color: 'var(--h100-vllm)',
       framework: 'vllm',
     },
     b200_sglang: {
@@ -77,7 +71,6 @@ export function createMockHardwareConfig(): HardwareConfig {
       label: 'B200',
       suffix: '(SGLang)',
       gpu: "NVIDIA 'Blackwell' B200 SGLang",
-      color: 'var(--b200-sglang)',
       framework: 'sglang',
     },
   };
@@ -170,8 +163,10 @@ export function createMockInferenceContext(
     activeHwTypes: new Set(['h100', 'b200', 'b200_trt', 'mi300x', 'h200']),
     hwTypesWithData: new Set(['h100', 'b200', 'b200_trt', 'mi300x', 'h200']),
     toggleHwType: namedStub('toggleHwType'),
+    removeHwType: namedStub('removeHwType'),
     selectAllHwTypes: namedStub('selectAllHwTypes'),
     toggleActiveDate: namedStub('toggleActiveDate'),
+    removeActiveDate: namedStub('removeActiveDate'),
     selectAllActiveDates: namedStub('selectAllActiveDates'),
     activeDates: new Set(['2025-03-01']),
     hardwareConfig: hwConfig,
@@ -310,6 +305,7 @@ export function createMockEvaluationContext(
     unfilteredChartData: [createMockEvaluationChartData()],
     enabledHardware: new Set(['b200_trt', 'h100', 'mi300x']),
     toggleHardware: namedStub('toggleHardware'),
+    removeHardware: namedStub('removeHardware'),
     highContrast: false,
     setHighContrast: namedStub('setHighContrast_eval'),
     showLabels: true,
@@ -373,6 +369,7 @@ export function createMockReliabilityContext(
     setHighContrast: namedStub('setHighContrast_reliability'),
     enabledModels: new Set([Model.DeepSeek_R1]),
     toggleModel: namedStub('toggleModel'),
+    removeModel: namedStub('removeModel'),
     isLegendExpanded: true,
     setIsLegendExpanded: namedStub('setIsLegendExpanded_reliability'),
     modelsWithData: new Set([Model.DeepSeek_R1]),
diff --git a/packages/app/package.json b/packages/app/package.json
index cb46bcb..8769901 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -2,7 +2,7 @@
   "name": "@semianalysisai/inferencex-app",
   "version": "0.1.0",
   "private": true,
-  "description": "InferenceX (formerly InferenceMAX) - Inference performance benchmarking and visualization",
+  "description": "InferenceX - Inference performance benchmarking and visualization",
   "repository": {
     "type": "git",
     "url": "https://github.com/SemiAnalysisAI/inferencemax-app"
diff --git a/packages/app/src/app/(dashboard)/calculator/page.tsx b/packages/app/src/app/(dashboard)/calculator/page.tsx
new file mode 100644
index 0000000..0bd2ead
--- /dev/null
+++ b/packages/app/src/app/(dashboard)/calculator/page.tsx
@@ -0,0 +1,10 @@
+import type { Metadata } from 'next';
+
+import ThroughputCalculatorDisplay from '@/components/calculator/ThroughputCalculatorDisplay';
+import { tabMetadata } from '@/lib/tab-meta';
+
+export const metadata: Metadata = tabMetadata('calculator');
+
+export default function CalculatorPage() {
+  return <ThroughputCalculatorDisplay />;
+}
diff --git a/packages/app/src/app/(dashboard)/evaluation/page.tsx b/packages/app/src/app/(dashboard)/evaluation/page.tsx
new file mode 100644
index 0000000..f1be9b0
--- /dev/null
+++ b/packages/app/src/app/(dashboard)/evaluation/page.tsx
@@ -0,0 +1,15 @@
+import type { Metadata } from 'next';
+
+import { EvaluationProvider } from '@/components/evaluation/EvaluationContext';
+import EvaluationChartDisplay from '@/components/evaluation/ui/ChartDisplay';
+import { tabMetadata } from '@/lib/tab-meta';
+
+export const metadata: Metadata = tabMetadata('evaluation');
+
+export default function EvaluationPage() {
+  return (
+    <EvaluationProvider>
+      <EvaluationChartDisplay />
+    </EvaluationProvider>
+  );
+}
diff --git a/packages/app/src/app/(dashboard)/gpu-metrics/page.tsx b/packages/app/src/app/(dashboard)/gpu-metrics/page.tsx
new file mode 100644
index 0000000..8669582
--- /dev/null
+++ b/packages/app/src/app/(dashboard)/gpu-metrics/page.tsx
@@ -0,0 +1,10 @@
+import type { Metadata } from 'next';
+
+import GpuMetricsDisplay from '@/components/gpu-power/GpuPowerDisplay';
+import { tabMetadata } from '@/lib/tab-meta';
+
+export const metadata: Metadata = tabMetadata('gpu-metrics');
+
+export default function GpuMetricsPage() {
+  return <GpuMetricsDisplay />;
+}
diff --git a/packages/app/src/app/(dashboard)/gpu-specs/page.tsx b/packages/app/src/app/(dashboard)/gpu-specs/page.tsx
new file mode 100644
index 0000000..f93f719
--- /dev/null
+++ b/packages/app/src/app/(dashboard)/gpu-specs/page.tsx
@@ -0,0 +1,10 @@
+import type { Metadata } from 'next';
+
+import { GpuSpecsContent } from '@/components/gpu-specs/gpu-specs-content';
+import { tabMetadata } from '@/lib/tab-meta';
+
+export const metadata: Metadata = tabMetadata('gpu-specs');
+
+export default function GpuSpecsPage() {
+  return <GpuSpecsContent />;
+}
diff --git a/packages/app/src/app/(dashboard)/historical/page.tsx b/packages/app/src/app/(dashboard)/historical/page.tsx
new file mode 100644
index 0000000..e790a27
--- /dev/null
+++ b/packages/app/src/app/(dashboard)/historical/page.tsx
@@ -0,0 +1,15 @@
+import type { Metadata } from 'next';
+
+import { InferenceProvider } from '@/components/inference/InferenceContext';
+import HistoricalTrendsDisplay from '@/components/trends/HistoricalTrendsDisplay';
+import { tabMetadata } from '@/lib/tab-meta';
+
+export const metadata: Metadata = tabMetadata('historical');
+
+export default function HistoricalPage() {
+  return (
+    <InferenceProvider activeTab="historical">
+      <HistoricalTrendsDisplay />
+    </InferenceProvider>
+  );
+}
diff --git a/packages/app/src/app/(dashboard)/inference/page.tsx b/packages/app/src/app/(dashboard)/inference/page.tsx
new file mode 100644
index 0000000..894ac0d
--- /dev/null
+++ b/packages/app/src/app/(dashboard)/inference/page.tsx
@@ -0,0 +1,15 @@
+import type { Metadata } from 'next';
+
+import { InferenceProvider } from '@/components/inference/InferenceContext';
+import InferenceChartDisplay from '@/components/inference/ui/ChartDisplay';
+import { tabMetadata } from '@/lib/tab-meta';
+
+export const metadata: Metadata = tabMetadata('inference');
+
+export default function InferencePage() {
+  return (
+    <InferenceProvider activeTab="inference">
+      <InferenceChartDisplay />
+    </InferenceProvider>
+  );
+}
diff --git a/packages/app/src/app/(dashboard)/layout.tsx b/packages/app/src/app/(dashboard)/layout.tsx
new file mode 100644
index 0000000..4d38318
--- /dev/null
+++ b/packages/app/src/app/(dashboard)/layout.tsx
@@ -0,0 +1,5 @@
+import { DashboardShell } from '@/components/dashboard-shell';
+
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+  return <DashboardShell>{children}</DashboardShell>;
+}
diff --git a/packages/app/src/app/(dashboard)/reliability/page.tsx b/packages/app/src/app/(dashboard)/reliability/page.tsx
new file mode 100644
index 0000000..6c647d3
--- /dev/null
+++ b/packages/app/src/app/(dashboard)/reliability/page.tsx
@@ -0,0 +1,15 @@
+import type { Metadata } from 'next';
+
+import { ReliabilityProvider } from '@/components/reliability/ReliabilityContext';
+import ReliabilityChartDisplay from '@/components/reliability/ui/ChartDisplay';
+import { tabMetadata } from '@/lib/tab-meta';
+
+export const metadata: Metadata = tabMetadata('reliability');
+
+export default function ReliabilityPage() {
+  return (
+    <ReliabilityProvider>
+      <ReliabilityChartDisplay />
+    </ReliabilityProvider>
+  );
+}
diff --git a/packages/app/src/app/(landing)/page.tsx b/packages/app/src/app/(landing)/page.tsx
new file mode 100644
index 0000000..64097c9
--- /dev/null
+++ b/packages/app/src/app/(landing)/page.tsx
@@ -0,0 +1,24 @@
+import type { Metadata } from 'next';
+
+import { LandingPage } from '@/components/landing/landing-page';
+import { LANDING_META } from '@/lib/tab-meta';
+import { SITE_URL } from '@semianalysisai/inferencex-constants';
+
+export const metadata: Metadata = {
+  title: LANDING_META.title,
+  description: LANDING_META.description,
+  alternates: { canonical: SITE_URL },
+  openGraph: {
+    title: `${LANDING_META.title} | InferenceX`,
+    description: LANDING_META.description,
+    url: SITE_URL,
+  },
+  twitter: {
+    title: `${LANDING_META.title} | InferenceX`,
+    description: LANDING_META.description,
+  },
+};
+
+export default function HomePage() {
+  return <LandingPage />;
+}
diff --git a/packages/app/src/app/[[...tab]]/page.tsx b/packages/app/src/app/[[...tab]]/page.tsx
deleted file mode 100644
index acd78bf..0000000
--- a/packages/app/src/app/[[...tab]]/page.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import type { Metadata } from 'next';
-import { notFound } from 'next/navigation';
-
-import { PageContent } from '@/components/page-content';
-import { TAB_META, VALID_TABS } from '@/lib/tab-meta';
-import { SITE_URL } from '@semianalysisai/inferencex-constants';
-
-export const dynamicParams = true;
-
-export function generateStaticParams() {
-  return [{ tab: [] }, ...VALID_TABS.map((t) => ({ tab: [t] }))];
-}
-
-export async function generateMetadata({
-  params,
-}: {
-  params: Promise<{ tab?: string[] }>;
-}): Promise<Metadata> {
-  const { tab } = await params;
-  const activeTab = tab?.[0] ?? 'inference';
-  const meta = TAB_META[activeTab as keyof typeof TAB_META];
-  if (!meta) return {};
-
-  const url = activeTab === 'inference' ? SITE_URL : `${SITE_URL}/${activeTab}`;
-
-  return {
-    title: meta.title,
-    description: meta.description,
-    alternates: { canonical: url },
-    openGraph: {
-      title: `${meta.title} | InferenceX`,
-      description: meta.description,
-      url,
-    },
-    twitter: {
-      title: `${meta.title} | InferenceX`,
-      description: meta.description,
-    },
-  };
-}
-
-export default async function Page({ params }: { params: Promise<{ tab?: string[] }> }) {
-  const { tab } = await params;
-  const activeTab = tab?.[0] ?? 'inference';
-
-  if (!VALID_TABS.includes(activeTab as (typeof VALID_TABS)[number]) || (tab && tab.length > 1)) {
-    notFound();
-  }
-
-  return <PageContent initialTab={activeTab} />;
-}
diff --git a/packages/app/src/app/about/page.tsx b/packages/app/src/app/about/page.tsx
new file mode 100644
index 0000000..776e455
--- /dev/null
+++ b/packages/app/src/app/about/page.tsx
@@ -0,0 +1,126 @@
+import type { Metadata } from 'next';
+import Link from 'next/link';
+
+import { Card } from '@/components/ui/card';
+import { FAQ_ITEMS } from '@/components/about/faq-data';
+import { SITE_URL } from '@semianalysisai/inferencex-constants';
+
+const faqJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: FAQ_ITEMS.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: {
+      '@type': 'Answer',
+      text: [item.answer, item.link?.text, ...(item.list ?? [])].filter(Boolean).join(' '),
+    },
+  })),
+};
+
+export const metadata: Metadata = {
+  title: 'About',
+  description:
+    'InferenceX is an independent, vendor neutral, reproducible benchmark which continuously benchmarks inference software across a wide range of AI accelerators.',
+  alternates: { canonical: `${SITE_URL}/about` },
+  openGraph: {
+    title: 'About | InferenceX',
+    description:
+      'InferenceX is an independent, vendor neutral, reproducible benchmark which continuously benchmarks inference software across a wide range of AI accelerators.',
+    url: `${SITE_URL}/about`,
+  },
+  twitter: {
+    title: 'About | InferenceX',
+    description:
+      'InferenceX is an independent, vendor neutral, reproducible benchmark which continuously benchmarks inference software across a wide range of AI accelerators.',
+  },
+};
+
+export default function AboutPage() {
+  return (
+    <main className="relative">
+      <script type="application/ld+json">{JSON.stringify(faqJsonLd)}</script>
+      <div className="container mx-auto px-4 lg:px-8 flex flex-col gap-6 lg:gap-4 pb-8">
+        <section>
+          <Card>
+            <h2 className="text-lg font-semibold mb-2">
+              Open Source Continuous Inference Benchmark trusted by Operators of Trillion Dollar
+              GigaWatt Scale Token Factories
+            </h2>
+            <p className="text-muted-foreground mb-2">
+              As the world progresses exponentially towards AGI, software development and model
+              releases move at the speed of light. Existing benchmarks rapidly become obsolete due
+              to their static nature, and participants often submit software images purpose-built
+              for the benchmark itself which do not reflect real world performance.
+            </p>
+            <p className="text-muted-foreground mb-2">
+              <strong>InferenceX&trade;</strong> (formerly InferenceMAX) is our independent, vendor
+              neutral, reproducible benchmark which addresses these issues by continuously
+              benchmarking inference software across a wide range of AI accelerators that are
+              actually available to the ML community.
+            </p>
+            <p className="text-muted-foreground">
+              Our open data & insights are widely adopted by the ML community, capacity planning
+              strategy teams at trillion dollar token factories & AI Labs & at multiple billion
+              dollar NeoClouds. Learn more in our articles:{' '}
+              <Link
+                href="/blog/inferencemax-open-source-inference-benchmarking"
+                className="text-brand hover:underline font-medium"
+              >
+                InferenceX v1
+              </Link>
+              ,{' '}
+              <Link
+                href="/blog/inferencex-v2-nvidia-blackwell-vs-amd-vs-hopper"
+                className="text-brand hover:underline font-medium"
+              >
+                InferenceX v2
+              </Link>
+              .
+            </p>
+          </Card>
+        </section>
+
+        <section>
+          <Card>
+            <h2 className="text-lg font-semibold mb-4">Frequently Asked Questions</h2>
+            <dl className="divide-y divide-border">
+              {FAQ_ITEMS.map((item) => (
+                <div key={item.question} className="py-4 first:pt-0 last:pb-0">
+                  <dt className="font-medium mb-1">{item.question}</dt>
+                  <dd className="text-muted-foreground text-sm">
+                    {item.answer && (
+                      <p>
+                        {item.answer}
+                        {item.link && (
+                          <>
+                            {' '}
+                            <a
+                              href={item.link.href}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="text-brand hover:underline font-medium"
+                            >
+                              {item.link.text}
+                            </a>
+                          </>
+                        )}
+                      </p>
+                    )}
+                    {item.list && (
+                      <ul className="mt-1.5 ml-8 list-disc space-y-0.5">
+                        {item.list.map((li) => (
+                          <li key={li}>{li}</li>
+                        ))}
+                      </ul>
+                    )}
+                  </dd>
+                </div>
+              ))}
+            </dl>
+          </Card>
+        </section>
+      </div>
+    </main>
+  );
+}
diff --git a/packages/app/src/app/api/v1/github-stars/route.test.ts b/packages/app/src/app/api/v1/github-stars/route.test.ts
deleted file mode 100644
index 7abcfbf..0000000
--- a/packages/app/src/app/api/v1/github-stars/route.test.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest';
-
-vi.mock('@semianalysisai/inferencex-constants', () => ({
-  GITHUB_OWNER: 'TestOwner',
-  GITHUB_REPO: 'TestRepo',
-}));
-
-import { GET } from './route';
-
-const originalFetch = globalThis.fetch;
-let origToken: string | undefined;
-
-beforeEach(() => {
-  vi.clearAllMocks();
-  origToken = process.env.GITHUB_TOKEN;
-});
-
-afterEach(() => {
-  globalThis.fetch = originalFetch;
-  if (origToken === undefined) {
-    delete process.env.GITHUB_TOKEN;
-  } else {
-    process.env.GITHUB_TOKEN = origToken;
-  }
-});
-
-describe('GET /api/v1/github-stars', () => {
-  it('returns star count on success', async () => {
-    globalThis.fetch = vi.fn().mockResolvedValueOnce({
-      ok: true,
-      json: async () => ({ stargazers_count: 42000 }),
-    });
-
-    const res = await GET();
-    expect(res.status).toBe(200);
-    const body = await res.json();
-    expect(body).toEqual({
-      owner: 'TestOwner',
-      repo: 'TestRepo',
-      stars: 42000,
-    });
-    expect(globalThis.fetch).toHaveBeenCalledWith(
-      'https://api.github.com/repos/TestOwner/TestRepo',
-      expect.objectContaining({
-        headers: expect.objectContaining({
-          Accept: 'application/vnd.github.v3+json',
-        }),
-      }),
-    );
-  });
-
-  it('returns 502 when GitHub API errors', async () => {
-    globalThis.fetch = vi.fn().mockResolvedValueOnce({
-      ok: false,
-      status: 403,
-    });
-
-    const res = await GET();
-    expect(res.status).toBe(502);
-    const body = await res.json();
-    expect(body.error).toBe('GitHub API error: 403');
-  });
-
-  it('returns 500 when fetch throws', async () => {
-    globalThis.fetch = vi.fn().mockRejectedValueOnce(new Error('Network error'));
-
-    const res = await GET();
-    expect(res.status).toBe(500);
-    const body = await res.json();
-    expect(body.error).toBe('Internal server error');
-  });
-});
diff --git a/packages/app/src/app/api/v1/github-stars/route.ts b/packages/app/src/app/api/v1/github-stars/route.ts
deleted file mode 100644
index 3ca000c..0000000
--- a/packages/app/src/app/api/v1/github-stars/route.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { NextResponse } from 'next/server';
-
-import { GITHUB_OWNER, GITHUB_REPO } from '@semianalysisai/inferencex-constants';
-
-export async function GET() {
-  try {
-    const res = await fetch(`https://api.github.com/repos/${GITHUB_OWNER}/${GITHUB_REPO}`, {
-      headers: {
-        Accept: 'application/vnd.github.v3+json',
-        ...(process.env.GITHUB_TOKEN && { Authorization: `token ${process.env.GITHUB_TOKEN}` }),
-      },
-      next: { revalidate: 60 * 60 }, // 1 hour
-    });
-
-    if (!res.ok) {
-      return NextResponse.json({ error: `GitHub API error: ${res.status}` }, { status: 502 });
-    }
-
-    const data = await res.json();
-    return NextResponse.json(
-      { owner: GITHUB_OWNER, repo: GITHUB_REPO, stars: data.stargazers_count },
-      {
-        headers: {
-          'Cache-Control': 'public, max-age=0, s-maxage=3600, stale-while-revalidate=7200',
-        },
-      },
-    );
-  } catch (error) {
-    console.error('Error fetching GitHub stars:', error);
-    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
-  }
-}
diff --git a/packages/app/src/app/blog/[slug]/page.tsx b/packages/app/src/app/blog/[slug]/page.tsx
index 4de8d8d..5d24b61 100644
--- a/packages/app/src/app/blog/[slug]/page.tsx
+++ b/packages/app/src/app/blog/[slug]/page.tsx
@@ -138,8 +138,8 @@ export default async function BlogPostPage({ params }: Props) {
       <HashScroll />
       <ReadingProgressBar slug={slug} />
       <script type="application/ld+json">{JSON.stringify(jsonLd)}</script>
-      <div className="container mx-auto px-4 lg:px-8 flex flex-col gap-16 lg:gap-4">
-        <section data-blog-section="true">
+      <div className="container mx-auto px-4 lg:px-8 flex flex-col gap-4">
+        <section data-blog-section="true" className="flex flex-col gap-4">
           <Card>
             <BlogBackLink />
             <header>
@@ -174,19 +174,23 @@ export default async function BlogPostPage({ params }: Props) {
                 <ShareLinkedInButton />
               </div>
             </header>
-          </Card>
-          {headings.length > 0 && <BlogToc headings={headings} />}
-          <Card>
-            <article
-              data-blog-article
-              className="prose prose-neutral dark:prose-invert max-w-none mx-4 md:mx-8 blog-prose"
-            >
-              {content}
-              <p className="text-xs text-muted-foreground">
-                All articles and posts are &copy; SemiAnalysis. All rights reserved. The AGPL-3.0
-                license covering the application source code does not apply to article content.
-              </p>
-            </article>
+            {headings.length > 0 && (
+              <div className="mt-4">
+                <BlogToc headings={headings} />
+              </div>
+            )}
+            <div className="mt-6 pt-6 border-t border-border/40">
+              <article
+                data-blog-article
+                className="prose prose-neutral dark:prose-invert max-w-none blog-prose"
+              >
+                {content}
+                <p className="text-xs text-muted-foreground">
+                  All articles and posts are &copy; SemiAnalysis. All rights reserved. The AGPL-3.0
+                  license covering the application source code does not apply to article content.
+                </p>
+              </article>
+            </div>
           </Card>
           <BlogPostNav
             prev={adjacent.prev ? { slug: adjacent.prev.slug, title: adjacent.prev.title } : null}
diff --git a/packages/app/src/app/blog/page.tsx b/packages/app/src/app/blog/page.tsx
index bf8ecc7..f1cd6e1 100644
--- a/packages/app/src/app/blog/page.tsx
+++ b/packages/app/src/app/blog/page.tsx
@@ -42,8 +42,8 @@ export default async function BlogPage({
   return (
     <main className="relative">
       <script type="application/ld+json">{JSON.stringify(jsonLd)}</script>
-      <div className="container mx-auto px-4 lg:px-8 flex flex-col gap-16 lg:gap-4">
-        <section>
+      <div className="container mx-auto px-4 lg:px-8 flex flex-col gap-4">
+        <section className="flex flex-col gap-4">
           <Card>
             <h2 className="text-2xl lg:text-4xl font-bold tracking-tight">Articles</h2>
             <p className="mt-3 text-base lg:text-lg text-muted-foreground">
@@ -66,50 +66,50 @@ export default async function BlogPage({
                 ))}
               </div>
             )}
-          </Card>
-          <Card>
-            {filtered.length === 0 ? (
-              <p className="text-muted-foreground">
-                {activeTag ? `No articles tagged "${activeTag}".` : 'Coming soon.'}
-              </p>
-            ) : (
-              <div className="flex flex-col gap-8 mx-4 md:mx-8">
-                {filtered.map((post) => (
-                  <BlogPostCard key={post.slug} slug={post.slug} title={post.title}>
-                    <article className="min-w-0">
-                      <div className="flex items-center gap-3 text-sm text-muted-foreground mb-2">
-                        <time dateTime={post.date}>
-                          {new Date(post.date + 'T00:00:00Z').toLocaleDateString('en-US', {
-                            year: 'numeric',
-                            month: 'long',
-                            day: 'numeric',
-                            timeZone: 'UTC',
-                          })}
-                        </time>
-                        <span>&middot;</span>
-                        <span>{post.readingTime} min read</span>
-                      </div>
-                      <h2 className="text-2xl font-semibold mb-2 group-hover:underline group-hover:text-brand">
-                        {post.title}
-                      </h2>
-                      <p className="text-muted-foreground mb-3">{post.subtitle}</p>
-                      {post.tags && post.tags.length > 0 && (
-                        <div className="flex flex-wrap gap-2">
-                          {post.tags.map((tag) => (
-                            <span
-                              key={tag}
-                              className="rounded-full bg-muted px-3 py-0.5 text-xs text-muted-foreground"
-                            >
-                              {tag}
-                            </span>
-                          ))}
+            <div className="mt-6 pt-6 border-t border-border/40">
+              {filtered.length === 0 ? (
+                <p className="text-muted-foreground">
+                  {activeTag ? `No articles tagged "${activeTag}".` : 'Coming soon.'}
+                </p>
+              ) : (
+                <div className="flex flex-col gap-8">
+                  {filtered.map((post) => (
+                    <BlogPostCard key={post.slug} slug={post.slug} title={post.title}>
+                      <article className="min-w-0">
+                        <div className="flex items-center gap-3 text-sm text-muted-foreground mb-2">
+                          <time dateTime={post.date}>
+                            {new Date(post.date + 'T00:00:00Z').toLocaleDateString('en-US', {
+                              year: 'numeric',
+                              month: 'long',
+                              day: 'numeric',
+                              timeZone: 'UTC',
+                            })}
+                          </time>
+                          <span>&middot;</span>
+                          <span>{post.readingTime} min read</span>
                         </div>
-                      )}
-                    </article>
-                  </BlogPostCard>
-                ))}
-              </div>
-            )}
+                        <h2 className="text-2xl font-semibold mb-2 group-hover:underline group-hover:text-brand">
+                          {post.title}
+                        </h2>
+                        <p className="text-muted-foreground mb-3">{post.subtitle}</p>
+                        {post.tags && post.tags.length > 0 && (
+                          <div className="flex flex-wrap gap-2">
+                            {post.tags.map((tag) => (
+                              <span
+                                key={tag}
+                                className="rounded-full bg-muted px-3 py-0.5 text-xs text-muted-foreground"
+                              >
+                                {tag}
+                              </span>
+                            ))}
+                          </div>
+                        )}
+                      </article>
+                    </BlogPostCard>
+                  ))}
+                </div>
+              )}
+            </div>
           </Card>
         </section>
       </div>
diff --git a/packages/app/src/app/globals.css b/packages/app/src/app/globals.css
index 26fabd8..27c29fe 100644
--- a/packages/app/src/app/globals.css
+++ b/packages/app/src/app/globals.css
@@ -177,64 +177,6 @@
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.556 0 0);
-
-  /* GPU Colors - NVIDIA (light → dark within each group, fixed hue+chroma per group) */
-  --h100: oklch(82% 0.19 140);
-  --h100-dynamo-trt: oklch(78% 0.19 140);
-  --h100-dynamo-trt-mtp: oklch(74% 0.19 140);
-  --h100-dynamo-sglang-mtp: oklch(72% 0.19 140);
-  --h100-vllm: oklch(70% 0.19 140);
-  --h200: oklch(76% 0.18 142);
-  --h200-trt: oklch(73% 0.18 142);
-  --h200-trt-mtp: oklch(70% 0.18 142);
-  --h200-dynamo-trt: oklch(67% 0.18 142);
-  --h200-dynamo-trt-mtp: oklch(64% 0.18 142);
-  --h200-sglang: oklch(61% 0.18 142);
-  --h200-dynamo-sglang: oklch(58% 0.18 142);
-  --h200-dynamo-sglang-mtp: oklch(55% 0.18 142);
-  --h200-vllm: oklch(52% 0.18 142);
-  --b200: oklch(60% 0.15 155);
-  --b200-trt: oklch(57% 0.15 155);
-  --b200-trt-mtp: oklch(54% 0.15 155);
-  --b200-dynamo-trt: oklch(51% 0.15 155);
-  --b200-dynamo-trt-mtp: oklch(48% 0.15 155);
-  --b200-sglang: oklch(45% 0.15 155);
-  --b200-sglang-mtp: oklch(42% 0.15 155);
-  --b200-dynamo-sglang: oklch(39% 0.15 155);
-  --b200-dynamo-sglang-mtp: oklch(36% 0.15 155);
-  --b200-vllm: oklch(33% 0.15 155);
-  --b300: oklch(50% 0.14 150);
-  --b300-dynamo-trt: oklch(46% 0.14 150);
-  --b300-dynamo-trt-mtp: oklch(42% 0.14 150);
-  --gb200: oklch(65% 0.16 132);
-  --gb200-mtp: oklch(62% 0.16 132);
-  --gb200-dynamo-trt: oklch(59% 0.16 132);
-  --gb200-dynamo-trt-mtp: oklch(56% 0.16 132);
-  --gb200-dynamo-trtllm: oklch(53% 0.16 132);
-  --gb200-dynamo-trtllm-mtp: oklch(50% 0.16 132);
-  --gb200-dynamo-sglang: oklch(47% 0.16 132);
-  --gb300: oklch(43% 0.12 148);
-  --gb300-dynamo-trt: oklch(40% 0.12 148);
-  --gb300-dynamo-trt-mtp: oklch(37% 0.12 148);
-  --gb300-dynamo-trtllm: oklch(34% 0.12 148);
-  --gb300-dynamo-trtllm-mtp: oklch(31% 0.12 148);
-  --gb300-dynamo-sglang: oklch(28% 0.12 148);
-
-  /* GPU Colors - AMD (light → dark within each group, fixed hue+chroma per group) */
-  --mi300x: oklch(72% 0.23 25);
-  --mi300x-sglang: oklch(68% 0.23 25);
-  --mi300x-vllm: oklch(64% 0.23 25);
-  --mi325x: oklch(60% 0.21 32);
-  --mi325x-sglang: oklch(56% 0.21 32);
-  --mi325x-vllm: oklch(52% 0.21 32);
-  --mi355x: oklch(55% 0.17 35);
-  --mi355x-mori-sglang: oklch(51% 0.17 35);
-  --mi355x-mori-sglang-mtp: oklch(47% 0.17 35);
-  --mi355x-sglang: oklch(43% 0.17 35);
-  --mi355x-sglang-mtp: oklch(41% 0.17 35);
-  --mi355x-vllm: oklch(39% 0.17 35);
-  --mi355x-atom: oklch(35% 0.17 35);
-  --mi355x-atom-mtp: oklch(31% 0.17 35);
 }
 
 .dark {
diff --git a/packages/app/src/app/layout.tsx b/packages/app/src/app/layout.tsx
index 0d8023d..d7ae720 100644
--- a/packages/app/src/app/layout.tsx
+++ b/packages/app/src/app/layout.tsx
@@ -7,7 +7,7 @@ import { DM_Sans } from 'next/font/google';
 
 import { Footer } from '@/components/footer/footer';
 import { Header } from '@/components/header/header';
-import { cn } from '@/lib/utils';
+import { CircuitBackground } from '@/components/circuit-background';
 import { ThemeProvider } from '@/components/ui/theme-provider';
 import {
   AUTHOR_HANDLE,
@@ -19,6 +19,7 @@ import {
   SITE_TITLE,
   SITE_URL,
 } from '@semianalysisai/inferencex-constants';
+import { fetchStarCount } from '@/lib/github-stars.server';
 import { QueryProvider } from '@/providers/query-provider';
 import { PostHogProvider, PostHogPageView } from '@/providers/posthog-provider';
 
@@ -152,11 +153,12 @@ const jsonLd = {
   ],
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const starCount = await fetchStarCount();
   return (
     <html lang="en" suppressHydrationWarning>
       <head>
@@ -164,16 +166,7 @@ export default function RootLayout({
         <link rel="dns-prefetch" href="https://us-assets.i.posthog.com" />
       </head>
       <body className={`${dm_sans.variable} antialiased relative min-h-screen flex flex-col`}>
-        <div
-          aria-hidden
-          className={cn(
-            'pointer-events-none absolute top-0 left-0 -z-10 hidden lg:block',
-            'bg-muted/50 dark:bg-muted',
-            "mask-[url('/brand/left-pattern-full.svg')]",
-            'mask-no-repeat mask-position-[top_right] mask-size-[100%]',
-            'w-1/2 h-full',
-          )}
-        />
+        <CircuitBackground />
         <PostHogProvider>
           <script type="application/ld+json">{JSON.stringify(jsonLd)}</script>
           <QueryProvider>
@@ -184,13 +177,13 @@ export default function RootLayout({
               disableTransitionOnChange
             >
               <PostHogPageView />
-              <Header />
+              <Header starCount={starCount} />
               <div className="grow flex flex-col">{children}</div>
-              <Footer />
+              <Footer starCount={starCount} />
             </ThemeProvider>
           </QueryProvider>
-          <Analytics />
-          <SpeedInsights />
+          {process.env.VERCEL && <Analytics />}
+          {process.env.VERCEL && <SpeedInsights />}
         </PostHogProvider>
       </body>
     </html>
diff --git a/packages/app/src/app/media/page.tsx b/packages/app/src/app/media/page.tsx
index 246ec16..e53b33b 100644
--- a/packages/app/src/app/media/page.tsx
+++ b/packages/app/src/app/media/page.tsx
@@ -6,7 +6,7 @@ import { SITE_URL } from '@semianalysisai/inferencex-constants';
 export const metadata: Metadata = {
   title: 'In the Media',
   description:
-    "Media coverage of InferenceX (formerly InferenceMAX) by SemiAnalysis, featuring articles from NVIDIA, AMD, vLLM, Tom's Hardware, Barron's, LMSYS, and more.",
+    "Media coverage of InferenceX by SemiAnalysis, featuring articles from NVIDIA, AMD, vLLM, Tom's Hardware, Barron's, LMSYS, and more.",
   alternates: { canonical: `${SITE_URL}/media` },
   openGraph: {
     title: 'In the Media | InferenceX by SemiAnalysis',
diff --git a/packages/app/src/app/quotes/page.tsx b/packages/app/src/app/quotes/page.tsx
index f1c69fe..8f9bc25 100644
--- a/packages/app/src/app/quotes/page.tsx
+++ b/packages/app/src/app/quotes/page.tsx
@@ -6,7 +6,7 @@ import { SITE_URL } from '@semianalysisai/inferencex-constants';
 export const metadata: Metadata = {
   title: 'Supporters',
   description:
-    'InferenceX (formerly InferenceMAX) initiative is supported by major buyers of compute and prominent members of the ML community including those from OpenAI, Microsoft, PyTorch Foundation, and more.',
+    'InferenceX initiative is supported by major buyers of compute and prominent members of the ML community including those from OpenAI, Microsoft, PyTorch Foundation, and more.',
   alternates: { canonical: `${SITE_URL}/quotes` },
   openGraph: {
     title: 'Supporters | InferenceX by SemiAnalysis',
diff --git a/packages/app/src/components/about/faq-data.ts b/packages/app/src/components/about/faq-data.ts
new file mode 100644
index 0000000..97d22e2
--- /dev/null
+++ b/packages/app/src/components/about/faq-data.ts
@@ -0,0 +1,114 @@
+import {
+  GPU_KEYS,
+  GPU_VENDORS,
+  DB_MODEL_TO_DISPLAY,
+  PRECISION_KEYS,
+  GITHUB_OWNER,
+  GITHUB_REPO,
+} from '@semianalysisai/inferencex-constants';
+import { FRAMEWORK_LABELS } from '@/lib/constants';
+import { CAROUSEL_ORGS, CAROUSEL_LABELS } from '@/components/quotes/quotes-data';
+
+export interface FaqLink {
+  text: string;
+  href: string;
+}
+
+export interface FaqItem {
+  question: string;
+  /** Intro text shown before any list. */
+  answer: string;
+  /** Optional link rendered inline after the answer text. */
+  link?: FaqLink;
+  /** Optional bullet list rendered below the answer text. */
+  list?: string[];
+}
+
+/* ---------- Dynamic lists from constants ---------- */
+
+const gpusByVendor = [...GPU_KEYS].reduce<Record<string, string[]>>((acc, key) => {
+  const vendor = GPU_VENDORS[key] ?? 'Other';
+  (acc[vendor] ??= []).push(key.toUpperCase());
+  return acc;
+}, {});
+const modelNames = Object.values(DB_MODEL_TO_DISPLAY);
+
+const frameworkNames = [...new Set(Object.values(FRAMEWORK_LABELS))].map((n) =>
+  n.replace(/[¹²³⁴⁵⁶⁷⁸⁹⁰]+$/, ''),
+);
+
+const supporterOrgs = CAROUSEL_ORGS.map((org) => CAROUSEL_LABELS[org] ?? org);
+
+/* ---------- FAQ content ---------- */
+
+export const FAQ_ITEMS: FaqItem[] = [
+  {
+    question: 'What is InferenceX?',
+    answer:
+      'InferenceX (formerly InferenceMAX) is an open-source, vendor-neutral benchmark that continuously measures AI inference performance across GPUs and software stacks. Benchmarks re-run whenever a configuration changes, so results stay current as models and frameworks evolve.',
+  },
+  {
+    question: 'Who is behind InferenceX?',
+    answer: `InferenceX is built by SemiAnalysis, an independent semiconductor and AI research firm. It is supported and trusted by ${supporterOrgs.join(', ')}. The benchmark code, data, and dashboard are all open-source on GitHub.`,
+  },
+  {
+    question: 'Which GPUs does InferenceX benchmark?',
+    answer: 'New accelerators are added as they become available.',
+    list: Object.entries(gpusByVendor).map(([vendor, gpus]) => `${vendor}: ${gpus.join(', ')}`),
+  },
+  {
+    question: 'Which AI models are tested?',
+    answer:
+      'Each model is tested across multiple sequence length configurations (1k/1k, 1k/8k, 8k/1k tokens) and concurrency levels.',
+    list: modelNames,
+  },
+  {
+    question: 'Which inference frameworks and configurations are tested?',
+    answer: '',
+    list: [
+      `Frameworks: ${frameworkNames.join(', ')}`,
+      `Precisions: ${[...PRECISION_KEYS].map((p) => p.toUpperCase()).join(', ')}`,
+      'Runtimes: CUDA, ROCm',
+      'Disaggregated serving (separate prefill/decode GPU pools)',
+      'Multi-token prediction (MTP)',
+      'Wide expert parallelism for MoE models',
+    ],
+  },
+  {
+    question: 'What metrics does InferenceX measure?',
+    answer: '',
+    list: [
+      'Interactivity (tok/s/user)',
+      'Token throughput per GPU (tok/s/gpu)',
+      'Input and output throughput per GPU',
+      'Token throughput per MW (tok/s/MW)',
+      'P99 time to first token (TTFT)',
+      'Cost per million tokens (total, input, output) across hyperscaler, neocloud, and rental pricing',
+      'Joules per token (total, input, output)',
+      'Custom user-defined cost and power calculations',
+    ],
+  },
+  {
+    question: 'How often are benchmarks run?',
+    answer:
+      'Benchmarks originally ran on a nightly schedule, but the number of hardware/framework/model combinations grew too large for that to be practical. Now they re-run when a configuration changes, e.g. a new software release, driver update, or model addition. Historical data is available in the dashboard.',
+  },
+  {
+    question: 'Is InferenceX open source?',
+    answer: 'Yes. Code, data, and dashboard are all open-source.',
+    link: {
+      text: `${GITHUB_OWNER}/${GITHUB_REPO}`,
+      href: `https://github.com/${GITHUB_OWNER}/${GITHUB_REPO}`,
+    },
+  },
+  {
+    question: 'How is InferenceX different from other AI benchmarks?',
+    answer:
+      'Most AI benchmarks are static, point-in-time measurements where participants submit purpose-built images that do not reflect real-world serving performance. InferenceX runs continuously on real hardware with fully reproducible configurations. Every recipe is in the repo, benchmark logs are visible on GitHub Actions, and all results are auditable end-to-end.',
+  },
+  {
+    question: 'Can I use InferenceX data for my own analysis?',
+    answer:
+      'Yes. All data is freely available. The dashboard lets you filter by GPU, model, framework, and date range, and you can export raw CSV data directly from any chart.',
+  },
+];
diff --git a/packages/app/src/components/blog/blog-post-card.tsx b/packages/app/src/components/blog/blog-post-card.tsx
index 686d7bb..397eab9 100644
--- a/packages/app/src/components/blog/blog-post-card.tsx
+++ b/packages/app/src/components/blog/blog-post-card.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import Link from 'next/link';
+import { ArrowRight } from 'lucide-react';
 import type { ReactNode } from 'react';
 import { track } from '@/lib/analytics';
 
@@ -14,10 +15,14 @@ export function BlogPostCard({ slug, title, children }: BlogPostCardProps) {
   return (
     <Link
       href={`/blog/${slug}`}
-      className="group block rounded-lg border border-border p-6 transition-colors hover:bg-muted/50"
+      className="group relative block rounded-xl border border-border bg-background/20 backdrop-blur-[2px] p-4 md:p-8 transition-all duration-200 hover:border-brand/50 hover:shadow-lg hover:shadow-brand/5 hover:scale-[1.01]"
       onClick={() => track('blog_post_clicked', { slug, title })}
     >
-      {children}
+      <div className="absolute inset-y-3 left-0 w-0.5 rounded-full bg-brand/60 transition-all duration-200 group-hover:bg-brand group-hover:inset-y-2" />
+      <div className="flex items-start justify-between gap-4">
+        <div className="min-w-0">{children}</div>
+        <ArrowRight className="h-5 w-5 shrink-0 mt-1 text-muted-foreground transition-all duration-200 group-hover:translate-x-0.5 group-hover:text-brand" />
+      </div>
     </Link>
   );
 }
diff --git a/packages/app/src/components/blog/blog-post-nav.tsx b/packages/app/src/components/blog/blog-post-nav.tsx
index c006e49..14d53f0 100644
--- a/packages/app/src/components/blog/blog-post-nav.tsx
+++ b/packages/app/src/components/blog/blog-post-nav.tsx
@@ -22,7 +22,7 @@ export function BlogPostNav({ prev, next }: BlogPostNavProps) {
       {prev ? (
         <Link
           href={`/blog/${prev.slug}`}
-          className="group flex items-center gap-3 rounded-lg border border-border p-4 transition-colors hover:bg-muted/50 flex-1"
+          className="group relative flex items-center gap-3 rounded-xl border border-border bg-background/20 backdrop-blur-[2px] p-4 transition-all duration-200 hover:border-brand/50 hover:shadow-lg hover:shadow-brand/5 hover:scale-[1.01] flex-1"
           onClick={() => track('blog_nav_prev', { slug: prev.slug, title: prev.title })}
         >
           <ChevronLeft className="w-5 h-5 text-muted-foreground shrink-0" />
@@ -37,7 +37,7 @@ export function BlogPostNav({ prev, next }: BlogPostNavProps) {
       {next ? (
         <Link
           href={`/blog/${next.slug}`}
-          className="group flex items-center justify-end gap-3 rounded-lg border border-border p-4 transition-colors hover:bg-muted/50 flex-1 text-right"
+          className="group relative flex items-center justify-end gap-3 rounded-xl border border-border bg-background/20 backdrop-blur-[2px] p-4 transition-all duration-200 hover:border-brand/50 hover:shadow-lg hover:shadow-brand/5 hover:scale-[1.01] flex-1 text-right"
           onClick={() => track('blog_nav_next', { slug: next.slug, title: next.title })}
         >
           <div className="min-w-0">
diff --git a/packages/app/src/components/blog/blog-toc.tsx b/packages/app/src/components/blog/blog-toc.tsx
index 11a8534..a69c71f 100644
--- a/packages/app/src/components/blog/blog-toc.tsx
+++ b/packages/app/src/components/blog/blog-toc.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { track } from '@/lib/analytics';
-import { Card } from '@/components/ui/card';
 import type { TocHeading } from '@/lib/blog';
 
 interface BlogTocProps {
@@ -139,32 +139,33 @@ export function BlogToc({ headings }: BlogTocProps) {
     <>
       {/* Inline: when sidebar doesn't fit */}
       {!showSidebar && (
-        <Card>
-          <details aria-label="Table of contents">
-            <summary className="text-sm font-medium cursor-pointer">
-              On this page{' '}
-              <span className="text-muted-foreground font-normal">(click to expand)</span>
-            </summary>
-            <div className="mt-2">{list}</div>
-          </details>
-        </Card>
+        <details aria-label="Table of contents">
+          <summary className="text-sm font-medium cursor-pointer">
+            On this page{' '}
+            <span className="text-muted-foreground font-normal">(click to expand)</span>
+          </summary>
+          <div className="mt-2">{list}</div>
+        </details>
       )}
 
-      {/* Sidebar: aligned with title, follows scroll */}
-      {showSidebar && (
-        <nav
-          ref={sidebarRef}
-          className="fixed w-52 max-h-[calc(100vh-4rem)] overflow-y-auto"
-          style={{
-            left: sidebarLeftRef.current,
-            top: Math.max(32, sectionTopRef.current - window.scrollY),
-          }}
-          aria-label="Table of contents"
-        >
-          <p className="text-sm font-medium mb-2">On this page</p>
-          {list}
-        </nav>
-      )}
+      {/* Sidebar */}
+      {showSidebar &&
+        createPortal(
+          <nav
+            ref={sidebarRef}
+            className="fixed pt-12 max-w-100 max-h-[calc(100vh-6rem)] overflow-y-auto"
+            style={{
+              left: sidebarLeftRef.current,
+              top: Math.max(32, sectionTopRef.current - window.scrollY),
+              scrollbarWidth: 'none',
+            }}
+            aria-label="Table of contents"
+          >
+            <p className="text-sm font-medium mb-2">On this page</p>
+            {list}
+          </nav>,
+          document.body,
+        )}
     </>
   );
 }
diff --git a/packages/app/src/components/calculator/ThroughputBarChart.tsx b/packages/app/src/components/calculator/ThroughputBarChart.tsx
index 4c298b5..e6ba667 100644
--- a/packages/app/src/components/calculator/ThroughputBarChart.tsx
+++ b/packages/app/src/components/calculator/ThroughputBarChart.tsx
@@ -31,6 +31,8 @@ interface ThroughputBarChartProps {
   onBarSelect: (resultKey: string) => void;
   legendElement?: React.ReactNode;
   caption?: React.ReactNode;
+  /** Optional color resolver — when provided, overrides static HARDWARE_CONFIG colors. */
+  colorResolver?: (hwKey: string) => string;
 }
 
 /** Get the throughput value for the selected token type. */
@@ -265,9 +267,8 @@ function getLabel(d: InterpolatedResult, hardwareConfig: HardwareConfig): string
   return baseName;
 }
 
-function getColor(hwKey: string, hardwareConfig: HardwareConfig): string {
-  const config = hardwareConfig[hwKey] || HARDWARE_CONFIG[hwKey];
-  return config?.color || 'var(--foreground)';
+function getColor(): string {
+  return 'var(--foreground)';
 }
 
 /** Position value + overlay labels together, flipping both when the longer one doesn't fit. */
@@ -322,9 +323,13 @@ export default function ThroughputBarChart({
   onBarSelect,
   legendElement,
   caption,
+  colorResolver,
 }: ThroughputBarChartProps) {
   const chartRef = useRef<D3ChartHandle>(null);
 
+  // Color resolution: prefer dynamic colorResolver, fall back to static config
+  const resolveBarColor = (hwKey: string) => (colorResolver ? colorResolver(hwKey) : getColor());
+
   // Stable refs to avoid re-running the D3 effect
   const hoveredBarXRef = useRef(0);
   const selectedBarsRef = useRef(selectedBars);
@@ -381,7 +386,7 @@ export default function ThroughputBarChart({
       config: {
         getY: (d) => d.resultKey,
         getX: (d) => getMetricValue(d, barMetric, costType),
-        getColor: (d) => getColor(d.hwKey, hardwareConfig),
+        getColor: (d) => resolveBarColor(d.hwKey),
         rx: 4,
         opacity: 0.85,
         keyFn: (d) => d.resultKey,
@@ -433,12 +438,12 @@ export default function ThroughputBarChart({
           });
 
         // Position both labels together using the longer text width
-        const barColor = (d: InterpolatedResult) => getColor(d.hwKey, hardwareConfig);
+        const barColor = (d: InterpolatedResult) => resolveBarColor(d.hwKey);
         positionLabelPairs(zoomGroup, xScale, ctx.width, barMetric, costType, barColor);
       },
       onZoom: (zoomGroup, ctx) => {
         const newXScale = ctx.newXScale as d3.ScaleLinear<number, number>;
-        const barColor = (d: InterpolatedResult) => getColor(d.hwKey, hardwareConfig);
+        const barColor = (d: InterpolatedResult) => resolveBarColor(d.hwKey);
         positionLabelPairs(zoomGroup, newXScale, ctx.width, barMetric, costType, barColor);
       },
     };
diff --git a/packages/app/src/components/calculator/ThroughputCalculatorDisplay.tsx b/packages/app/src/components/calculator/ThroughputCalculatorDisplay.tsx
index f00bd59..7cf1476 100644
--- a/packages/app/src/components/calculator/ThroughputCalculatorDisplay.tsx
+++ b/packages/app/src/components/calculator/ThroughputCalculatorDisplay.tsx
@@ -38,6 +38,7 @@ import {
   Sequence,
 } from '@/lib/data-mappings';
 import { getModelSortIndex, GPU_SPECS, HARDWARE_CONFIG } from '@/lib/constants';
+import { useThemeColors } from '@/hooks/useThemeColors';
 
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { useChartExport } from '@/hooks/useChartExport';
@@ -77,14 +78,20 @@ function CalculatorChartButtons({
   chartId,
   onExportCsv,
   setIsLegendExpanded,
+  exportFileName,
 }: {
   viewMode: 'chart' | 'table';
   setViewMode: (v: 'chart' | 'table') => void;
   chartId: string;
   onExportCsv: () => void;
   setIsLegendExpanded?: (expanded: boolean) => void;
+  exportFileName?: string;
 }) {
-  const { isExporting, exportToImage } = useChartExport({ chartId, setIsLegendExpanded });
+  const { isExporting, exportToImage } = useChartExport({
+    chartId,
+    setIsLegendExpanded,
+    exportFileName,
+  });
   const [exportPopoverOpen, setExportPopoverOpen] = useState(false);
 
   const handleExportPng = () => {
@@ -222,6 +229,13 @@ export default function ThroughputCalculatorDisplay() {
   const { hardwareConfig, ranges, getResults, loading, error, hasData, availableHwKeys } =
     useThroughputData(selectedModel, selectedSequence, selectedPrecisions, selectedRunDate);
 
+  // Dynamic vendor-aware colors for visible GPUs
+  const visibleKeysArray = useMemo(() => [...visibleHwKeys], [visibleHwKeys]);
+  const { resolveColor } = useThemeColors({
+    highContrast: false,
+    activeKeys: visibleKeysArray,
+  });
+
   // Track previous available keys to detect when the GPU set changes
   const prevAvailableKeyRef = useRef<string>('');
 
@@ -352,17 +366,25 @@ export default function ThroughputCalculatorDisplay() {
     [availableHwKeys],
   );
 
+  const removeGpu = useCallback((hwKey: string) => {
+    setVisibleHwKeys((prev) => {
+      const next = new Set(prev);
+      next.delete(hwKey);
+      return next;
+    });
+  }, []);
+
   const handleExportCsv = useCallback(() => {
     const { headers, rows } = calculatorChartToCsv(results, targetValue, (hwKey) => {
       const config = hardwareConfig[hwKey] || HARDWARE_CONFIG[hwKey];
       return config ? getDisplayLabel(config) : hwKey;
     });
-    exportToCsv(`calculator-${Date.now()}`, headers, rows);
+    exportToCsv(`InferenceX_calculator_${selectedModel}`, headers, rows);
   }, [results, targetValue, hardwareConfig]);
 
   const handleResetGpus = useCallback(() => {
     setVisibleHwKeys(new Set(availableHwKeys));
-    track('calculator_gpu_reset');
+    track('calculator_gpu_reset', { gpuCount: availableHwKeys.length });
   }, [availableHwKeys]);
 
   // Derive runUrl from workflowInfo for the selected sequence
@@ -378,8 +400,10 @@ export default function ThroughputCalculatorDisplay() {
       const next = new Set(prev);
       if (next.has(resultKey)) {
         next.delete(resultKey);
+        track('calculator_bar_deselected', { resultKey });
       } else {
         next.add(resultKey);
+        track('calculator_bar_selected', { resultKey, totalSelected: next.size });
       }
       return next;
     });
@@ -460,13 +484,13 @@ export default function ThroughputCalculatorDisplay() {
       .map(([key, config]) => ({
         name: config.name,
         label: getDisplayLabel(config),
-        color: config?.color || 'var(--foreground)',
+        color: resolveColor(key),
         title: config.gpu,
         hw: key,
         isActive: visibleHwKeys.has(key),
         onClick: () => toggleGpuVisibility(key),
       }));
-  }, [availableHwKeys, hardwareConfig, visibleHwKeys, toggleGpuVisibility]);
+  }, [availableHwKeys, hardwareConfig, visibleHwKeys, toggleGpuVisibility, resolveColor]);
 
   const getBarMetricLabel = (metric: BarMetric) => {
     if (metric === 'throughput') return 'Throughput';
@@ -486,7 +510,7 @@ export default function ThroughputCalculatorDisplay() {
   }
 
   return (
-    <>
+    <div className="flex flex-col gap-4">
       <section data-testid="calculator-controls">
         <Card>
           <div className="flex flex-col gap-4">
@@ -677,6 +701,7 @@ export default function ThroughputCalculatorDisplay() {
             chartId="calculator-chart"
             onExportCsv={handleExportCsv}
             setIsLegendExpanded={setIsLegendExpanded}
+            exportFileName={`InferenceX_calculator_${selectedModel}`}
           />
           <Card>
             {loading ? (
@@ -847,19 +872,29 @@ export default function ThroughputCalculatorDisplay() {
                       runUrl={runUrl}
                       selectedBars={selectedBars}
                       onBarSelect={handleBarSelect}
+                      colorResolver={resolveColor}
                       legendElement={
                         availableHwKeys.length > 0 ? (
                           <ChartLegend
                             variant="sidebar"
                             legendItems={legendItems}
+                            onItemRemove={removeGpu}
                             isLegendExpanded={isLegendExpanded}
                             onExpandedChange={(expanded) => {
                               setIsLegendExpanded(expanded);
                               track('calculator_legend_expanded', { expanded });
                             }}
-                            showResetFilter={true}
-                            allSelected={visibleHwKeys.size === availableHwKeys.length}
-                            onResetFilter={handleResetGpus}
+                            actions={
+                              visibleHwKeys.size < availableHwKeys.length
+                                ? [
+                                    {
+                                      id: 'calc-reset-filter',
+                                      label: 'Reset filter',
+                                      onClick: handleResetGpus,
+                                    },
+                                  ]
+                                : []
+                            }
                             enableTooltips={true}
                           />
                         ) : undefined
@@ -996,8 +1031,8 @@ export default function ThroughputCalculatorDisplay() {
               <button
                 type="button"
                 onClick={() => {
+                  track('calculator_selection_cleared', { clearedCount: selectedBars.size });
                   setSelectedBars(new Set());
-                  track('calculator_selection_cleared');
                 }}
                 className="text-xs text-muted-foreground hover:text-foreground underline shrink-0"
               >
@@ -1007,6 +1042,6 @@ export default function ThroughputCalculatorDisplay() {
           </Card>
         </section>
       )}
-    </>
+    </div>
   );
 }
diff --git a/packages/app/src/components/chart-tabs.tsx b/packages/app/src/components/chart-tabs.tsx
deleted file mode 100644
index 5785f51..0000000
--- a/packages/app/src/components/chart-tabs.tsx
+++ /dev/null
@@ -1,239 +0,0 @@
-'use client';
-
-import { track } from '@/lib/analytics';
-import { useEffect, useRef, useState } from 'react';
-
-import { GlobalFilterProvider } from '@/components/GlobalFilterContext';
-import { EvaluationProvider } from '@/components/evaluation/EvaluationContext';
-import EvaluationChartDisplay from '@/components/evaluation/ui/ChartDisplay';
-import { GpuSpecsContent } from '@/components/gpu-specs/gpu-specs-content';
-import GpuMetricsDisplay from '@/components/gpu-power/GpuPowerDisplay';
-import HistoricalTrendsDisplay from '@/components/trends/HistoricalTrendsDisplay';
-import { InferenceProvider } from '@/components/inference/InferenceContext';
-import InferenceChartDisplay from '@/components/inference/ui/ChartDisplay';
-import { ReliabilityProvider } from '@/components/reliability/ReliabilityContext';
-import ReliabilityChartDisplay from '@/components/reliability/ui/ChartDisplay';
-import ThroughputCalculatorDisplay from '@/components/calculator/ThroughputCalculatorDisplay';
-import { Card } from '@/components/ui/card';
-import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { getTabTitle, isValidTab } from '@/lib/tab-meta';
-
-function getInitialTab(initialTab: string): string {
-  if (typeof window !== 'undefined') {
-    const hash = window.location.hash.slice(1);
-    if (hash && isValidTab(hash)) {
-      window.history.replaceState(null, '', `/${hash}`);
-      return hash;
-    }
-  }
-  return isValidTab(initialTab) ? initialTab : 'inference';
-}
-
-const POWERX_STORAGE_KEY = 'inferencex-powerx-unlocked';
-const UNLOCK_SEQUENCE = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown'];
-
-function usePowerXGate(): boolean {
-  const [unlocked, setUnlocked] = useState(false);
-  const sequenceRef = useRef<string[]>([]);
-
-  // Check localStorage on mount
-  useEffect(() => {
-    if (typeof window !== 'undefined' && localStorage.getItem(POWERX_STORAGE_KEY) === '1') {
-      setUnlocked(true);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (unlocked) return;
-    const handleKeyDown = (e: KeyboardEvent) => {
-      sequenceRef.current.push(e.key);
-      if (sequenceRef.current.length > UNLOCK_SEQUENCE.length) {
-        sequenceRef.current = sequenceRef.current.slice(-UNLOCK_SEQUENCE.length);
-      }
-      if (
-        sequenceRef.current.length === UNLOCK_SEQUENCE.length &&
-        sequenceRef.current.every((k, i) => k === UNLOCK_SEQUENCE[i])
-      ) {
-        localStorage.setItem(POWERX_STORAGE_KEY, '1');
-        setUnlocked(true);
-        track('powerx_unlocked');
-      }
-    };
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [unlocked]);
-
-  return unlocked;
-}
-
-export function ChartTabs({ initialTab }: { initialTab: string }) {
-  const [activeTab, setActiveTab] = useState(() => getInitialTab(initialTab));
-  const powerXUnlocked = usePowerXGate();
-
-  useEffect(() => {
-    document.title = getTabTitle(activeTab);
-  }, [activeTab]);
-
-  useEffect(() => {
-    const handlePopState = () => {
-      const pathTab = window.location.pathname.split('/').filter(Boolean)[0] || 'inference';
-      if (isValidTab(pathTab)) {
-        setActiveTab(pathTab);
-      }
-    };
-    window.addEventListener('popstate', handlePopState);
-    return () => window.removeEventListener('popstate', handlePopState);
-  }, []);
-
-  const handleTabChange = (value: string) => {
-    setActiveTab(value);
-    window.history.pushState(null, '', `/${value}`);
-    window.dispatchEvent(new CustomEvent('inferencex:tab-change'));
-    track('tab_changed', { tab: value });
-  };
-
-  return (
-    <Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
-      {/* Mobile: Dropdown */}
-      <div className="lg:hidden mb-4">
-        <div className="w-full border-t-2 border-brand pb-6" />
-        <Card>
-          <div className="space-y-2">
-            <Label htmlFor="chart-select">Select Chart</Label>
-            <Select value={activeTab} onValueChange={handleTabChange}>
-              <SelectTrigger id="chart-select" data-testid="mobile-chart-select" className="w-full">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="inference" data-ph-capture-attribute-tab="inference">
-                  Inference Performance
-                </SelectItem>
-                <SelectItem value="evaluation" data-ph-capture-attribute-tab="evaluation">
-                  Accuracy Evals
-                </SelectItem>
-                <SelectItem value="historical" data-ph-capture-attribute-tab="historical">
-                  Historical Trends
-                </SelectItem>
-                <SelectItem value="calculator" data-ph-capture-attribute-tab="calculator">
-                  TCO Calculator
-                </SelectItem>
-                <SelectItem value="reliability" data-ph-capture-attribute-tab="reliability">
-                  GPU Reliability
-                </SelectItem>
-                <SelectItem value="gpu-specs" data-ph-capture-attribute-tab="gpu-specs">
-                  GPU Specs
-                </SelectItem>
-                {powerXUnlocked && (
-                  <SelectItem value="gpu-metrics" data-ph-capture-attribute-tab="gpu-metrics">
-                    PowerX
-                  </SelectItem>
-                )}
-              </SelectContent>
-            </Select>
-          </div>
-        </Card>
-      </div>
-
-      {/* Desktop: Tabs */}
-      <TabsList data-testid="chart-section-tabs" className="hidden lg:flex mb-4">
-        <TabsTrigger
-          data-testid="tab-trigger-inference"
-          data-ph-capture-attribute-tab="inference"
-          value="inference"
-        >
-          Inference Performance
-        </TabsTrigger>
-        <TabsTrigger
-          data-testid="tab-trigger-evaluation"
-          data-ph-capture-attribute-tab="evaluation"
-          value="evaluation"
-        >
-          Accuracy Evals
-        </TabsTrigger>
-        <TabsTrigger
-          data-testid="tab-trigger-historical"
-          data-ph-capture-attribute-tab="historical"
-          value="historical"
-        >
-          Historical Trends
-        </TabsTrigger>
-        <TabsTrigger
-          data-testid="tab-trigger-calculator"
-          data-ph-capture-attribute-tab="calculator"
-          value="calculator"
-        >
-          TCO Calculator
-        </TabsTrigger>
-        <TabsTrigger
-          data-testid="tab-trigger-reliability"
-          data-ph-capture-attribute-tab="reliability"
-          value="reliability"
-        >
-          GPU Reliability
-        </TabsTrigger>
-        <TabsTrigger
-          data-testid="tab-trigger-gpu-specs"
-          data-ph-capture-attribute-tab="gpu-specs"
-          value="gpu-specs"
-        >
-          GPU Specs
-        </TabsTrigger>
-        {powerXUnlocked && (
-          <TabsTrigger
-            data-testid="tab-trigger-gpu-metrics"
-            data-ph-capture-attribute-tab="gpu-metrics"
-            value="gpu-metrics"
-          >
-            PowerX
-          </TabsTrigger>
-        )}
-      </TabsList>
-
-      <GlobalFilterProvider>
-        <InferenceProvider activeTab={activeTab}>
-          <TabsContent value="inference">
-            <InferenceChartDisplay />
-          </TabsContent>
-
-          <TabsContent value="historical">
-            <HistoricalTrendsDisplay />
-          </TabsContent>
-        </InferenceProvider>
-
-        <TabsContent value="evaluation">
-          <EvaluationProvider>
-            <EvaluationChartDisplay />
-          </EvaluationProvider>
-        </TabsContent>
-
-        <TabsContent value="calculator">
-          <ThroughputCalculatorDisplay />
-        </TabsContent>
-
-        <TabsContent value="reliability">
-          <ReliabilityProvider>
-            <ReliabilityChartDisplay />
-          </ReliabilityProvider>
-        </TabsContent>
-
-        <TabsContent value="gpu-specs">
-          <GpuSpecsContent />
-        </TabsContent>
-
-        {powerXUnlocked && (
-          <TabsContent value="gpu-metrics">
-            <GpuMetricsDisplay />
-          </TabsContent>
-        )}
-      </GlobalFilterProvider>
-    </Tabs>
-  );
-}
diff --git a/packages/app/src/components/circuit-background.tsx b/packages/app/src/components/circuit-background.tsx
new file mode 100644
index 0000000..43ccc24
--- /dev/null
+++ b/packages/app/src/components/circuit-background.tsx
@@ -0,0 +1,18 @@
+import { cn } from '@/lib/utils';
+
+const PATTERN_CLASSES = cn(
+  'pointer-events-none fixed -z-10 block',
+  'bg-muted/50 dark:bg-muted',
+  "mask-[url('/brand/left-pattern-full.svg')]",
+  'mask-no-repeat mask-position-[top_right] mask-size-[100%]',
+  'w-full sm:w-3/4 md:w-1/2 lg:w-1/3 h-screen',
+);
+
+export function CircuitBackground() {
+  return (
+    <>
+      <div aria-hidden className={cn(PATTERN_CLASSES, 'top-0 left-0')} />
+      <div aria-hidden className={cn(PATTERN_CLASSES, 'bottom-0 right-0 rotate-180')} />
+    </>
+  );
+}
diff --git a/packages/app/src/components/page-content.tsx b/packages/app/src/components/dashboard-shell.tsx
similarity index 54%
rename from packages/app/src/components/page-content.tsx
rename to packages/app/src/components/dashboard-shell.tsx
index a11992a..8dc063f 100644
--- a/packages/app/src/components/page-content.tsx
+++ b/packages/app/src/components/dashboard-shell.tsx
@@ -1,23 +1,21 @@
 'use client';
 
-import { ChartTabs } from '@/components/chart-tabs';
 import { ExportNudge } from '@/components/export-nudge';
-import { GitHubStarModal } from '@/components/github-star-modal';
-import { IntroSection } from '@/components/intro-section';
+import { GlobalFilterProvider } from '@/components/GlobalFilterContext';
 import { StarNudge } from '@/components/star-nudge';
+import { TabNav } from '@/components/tab-nav';
 import { UnofficialRunProvider } from '@/components/unofficial-run-provider';
 
-export function PageContent({ initialTab = 'inference' }: { initialTab?: string }) {
+export function DashboardShell({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <GitHubStarModal />
       <StarNudge />
       <ExportNudge />
       <UnofficialRunProvider>
         <main className="relative">
-          <div className="container mx-auto px-4 lg:px-8 flex flex-col gap-6 lg:gap-4">
-            <IntroSection />
-            <ChartTabs initialTab={initialTab} />
+          <div className="container mx-auto px-4 lg:px-8 flex flex-col gap-4">
+            <TabNav />
+            <GlobalFilterProvider>{children}</GlobalFilterProvider>
           </div>
         </main>
       </UnofficialRunProvider>
diff --git a/packages/app/src/components/evaluation/EvaluationContext.tsx b/packages/app/src/components/evaluation/EvaluationContext.tsx
index abd89a0..94f23d7 100644
--- a/packages/app/src/components/evaluation/EvaluationContext.tsx
+++ b/packages/app/src/components/evaluation/EvaluationContext.tsx
@@ -12,6 +12,7 @@ import {
 } from 'react';
 
 import { DISPLAY_MODEL_TO_DB } from '@semianalysisai/inferencex-constants';
+import { track } from '@/lib/analytics';
 
 import { useGlobalFilters } from '@/components/GlobalFilterContext';
 import {
@@ -78,6 +79,7 @@ export function EvaluationProvider({ children }: { children: ReactNode }) {
     setActiveSet: setEnabledHardware,
     toggle: toggleHwRaw,
     selectAll: selectAllHwRaw,
+    remove: removeHwRaw,
   } = useChartToggleSet();
 
   const availableBenchmarks = useMemo(() => {
@@ -108,24 +110,40 @@ export function EvaluationProvider({ children }: { children: ReactNode }) {
   }, [availableBenchmarks, availableModels, selectedBenchmark, setSelectedModel]);
 
   useEffect(() => {
-    if (availableDates.length > 0) {
-      const latestDate = availableDates[availableDates.length - 1];
-      const prevAvailableDates = prevAvailableDatesRef.current;
-      const wasOnLatest =
-        prevAvailableDates.length > 0 &&
-        selectedRunDate === prevAvailableDates[prevAvailableDates.length - 1];
-      if (!selectedRunDate || wasOnLatest) {
-        setSelectedRunDate(latestDate);
-      }
-      prevAvailableDatesRef.current = availableDates;
+    if (availableDates.length === 0) return;
+    const latestDate = availableDates[availableDates.length - 1];
+    const prevAvailableDates = prevAvailableDatesRef.current;
+    const wasOnLatest =
+      prevAvailableDates.length > 0 &&
+      selectedRunDate === prevAvailableDates[prevAvailableDates.length - 1];
+    if (!selectedRunDate || wasOnLatest || !availableDates.includes(selectedRunDate)) {
+      setSelectedRunDate(latestDate);
     }
+    prevAvailableDatesRef.current = availableDates;
   }, [availableDates, selectedRunDate, setSelectedRunDate]);
 
   useEffect(() => {
     if (!globalRunDate) return;
-    if (availableDates.length === 0 || availableDates.includes(globalRunDate)) {
+    if (availableDates.length === 0) {
+      setSelectedRunDate(globalRunDate);
+      return;
+    }
+    if (availableDates.includes(globalRunDate)) {
       setSelectedRunDate(globalRunDate);
+      return;
+    }
+    // Snap to the nearest valid date
+    const target = new Date(globalRunDate).getTime();
+    let closest = availableDates[0];
+    let minDiff = Math.abs(new Date(closest).getTime() - target);
+    for (const d of availableDates) {
+      const diff = Math.abs(new Date(d).getTime() - target);
+      if (diff < minDiff) {
+        minDiff = diff;
+        closest = d;
+      }
     }
+    setSelectedRunDate(closest);
   }, [globalRunDate, availableDates, selectedRunDateRev]);
 
   const availableHardware = useMemo(() => {
@@ -360,6 +378,7 @@ export function EvaluationProvider({ children }: { children: ReactNode }) {
     (hwKey: string) => toggleHwRaw(hwKey, hwTypesWithData),
     [toggleHwRaw, hwTypesWithData],
   );
+  const removeHardware = useCallback((hwKey: string) => removeHwRaw(hwKey), [removeHwRaw]);
 
   const handleSetSelectedModel = useCallback(
     (model: string | undefined) => {
@@ -368,6 +387,26 @@ export function EvaluationProvider({ children }: { children: ReactNode }) {
     [setSelectedModel],
   );
 
+  // ── Debounced hardware selection tracking ────────────────────────────────
+  const evalTrackMounted = useRef(false);
+  useEffect(() => {
+    if (!evalTrackMounted.current) {
+      evalTrackMounted.current = true;
+      return;
+    }
+    if (enabledHardware.size === 0) return;
+    const timer = setTimeout(() => {
+      const gpus = [...enabledHardware].sort();
+      track('evaluation_hw_selection_settled', {
+        gpus,
+        gpu_count: gpus.length,
+        model: selectedModel,
+        benchmark: selectedBenchmark,
+      });
+    }, 3000);
+    return () => clearTimeout(timer);
+  }, [enabledHardware]); // eslint-disable-line react-hooks/exhaustive-deps -- intentionally only re-fire on hw set changes
+
   useUrlStateSync(
     {
       e_rundate: selectedRunDate !== globalRunDate ? selectedRunDate : '',
@@ -396,6 +435,7 @@ export function EvaluationProvider({ children }: { children: ReactNode }) {
       unfilteredChartData,
       enabledHardware,
       toggleHardware,
+      removeHardware,
       highContrast,
       setHighContrast,
       showLabels,
@@ -423,6 +463,7 @@ export function EvaluationProvider({ children }: { children: ReactNode }) {
       unfilteredChartData,
       enabledHardware,
       toggleHardware,
+      removeHardware,
       highContrast,
       showLabels,
       isLegendExpanded,
diff --git a/packages/app/src/components/evaluation/types.ts b/packages/app/src/components/evaluation/types.ts
index 395fbf8..601490b 100644
--- a/packages/app/src/components/evaluation/types.ts
+++ b/packages/app/src/components/evaluation/types.ts
@@ -56,6 +56,7 @@ export interface EvaluationChartContextType {
   unfilteredChartData: EvaluationChartData[];
   enabledHardware: Set<string>;
   toggleHardware: (hwKey: string) => void;
+  removeHardware: (hwKey: string) => void;
   highContrast: boolean;
   setHighContrast: (value: boolean) => void;
   showLabels: boolean;
diff --git a/packages/app/src/components/evaluation/ui/BarChartD3.tsx b/packages/app/src/components/evaluation/ui/BarChartD3.tsx
index 7e1a50e..55ec7bf 100644
--- a/packages/app/src/components/evaluation/ui/BarChartD3.tsx
+++ b/packages/app/src/components/evaluation/ui/BarChartD3.tsx
@@ -75,6 +75,7 @@ export default function EvalBarChartD3({ caption }: { caption?: ReactNode }) {
     unfilteredChartData,
     enabledHardware,
     toggleHardware,
+    removeHardware,
     hwTypesWithData,
     selectAllHwTypes,
     highContrast,
@@ -111,9 +112,14 @@ export default function EvalBarChartD3({ caption }: { caption?: ReactNode }) {
     () => configurations.map((c) => c.configLabel),
     [configurations],
   );
+  const activeHwKeys = useMemo(
+    () => configurations.filter((c) => enabledHardware.has(c.hwKey)).map((c) => c.hwKey),
+    [configurations, enabledHardware],
+  );
   const { resolveColor, getCssColor } = useThemeColors({
     highContrast,
     identifiers: sortedConfigLabels,
+    activeKeys: activeHwKeys,
   });
 
   const legendItems = useMemo(
@@ -128,7 +134,7 @@ export default function EvalBarChartD3({ caption }: { caption?: ReactNode }) {
         isActive: enabledHardware.has(hwKey),
         onClick: () => {
           toggleHardware(hwKey);
-          track('eval_hw_toggled', { hw: hwKey });
+          track('evaluation_hw_toggled', { hw: hwKey });
         },
       })),
     [configurations, enabledHardware, highlightedConfigs, toggleHardware, resolveColor],
@@ -365,10 +371,11 @@ export default function EvalBarChartD3({ caption }: { caption?: ReactNode }) {
         <ChartLegend
           variant="sidebar"
           legendItems={legendItems}
+          onItemRemove={removeHardware}
           isLegendExpanded={isLegendExpanded}
           onExpandedChange={(expanded) => {
             setIsLegendExpanded(expanded);
-            track('eval_legend_expanded', { expanded });
+            track('evaluation_legend_expanded', { expanded });
           }}
           switches={[
             {
@@ -377,7 +384,7 @@ export default function EvalBarChartD3({ caption }: { caption?: ReactNode }) {
               checked: showLabels,
               onCheckedChange: (checked) => {
                 setShowLabels(checked);
-                track('eval_show_labels_toggled', { enabled: checked });
+                track('evaluation_show_labels_toggled', { enabled: checked });
               },
             },
             {
@@ -386,16 +393,24 @@ export default function EvalBarChartD3({ caption }: { caption?: ReactNode }) {
               checked: highContrast,
               onCheckedChange: (checked) => {
                 setHighContrast(checked);
-                track('eval_high_contrast_toggled', { enabled: checked });
+                track('evaluation_high_contrast_toggled', { enabled: checked });
               },
             },
           ]}
-          showResetFilter={true}
-          allSelected={enabledHardware.size === hwTypesWithData.size}
-          onResetFilter={() => {
-            selectAllHwTypes();
-            track('eval_filter_reset');
-          }}
+          actions={
+            enabledHardware.size < hwTypesWithData.size
+              ? [
+                  {
+                    id: 'eval-reset-filter',
+                    label: 'Reset filter',
+                    onClick: () => {
+                      selectAllHwTypes();
+                      track('evaluation_filter_reset');
+                    },
+                  },
+                ]
+              : []
+          }
           enableTooltips={true}
         />
       }
diff --git a/packages/app/src/components/evaluation/ui/ChartControls.tsx b/packages/app/src/components/evaluation/ui/ChartControls.tsx
index f2d3423..ab26610 100644
--- a/packages/app/src/components/evaluation/ui/ChartControls.tsx
+++ b/packages/app/src/components/evaluation/ui/ChartControls.tsx
@@ -40,7 +40,7 @@ export default function EvaluationChartControls() {
           value={selectedModel || ''}
           onChange={(value) => {
             setSelectedModel(value);
-            track('eval_model_selected', { model: value });
+            track('evaluation_model_selected', { model: value });
           }}
           availableModels={availableModels}
         />
@@ -56,7 +56,7 @@ export default function EvaluationChartControls() {
             value={selectedBenchmark || ''}
             onValueChange={(value) => {
               setSelectedBenchmark(value);
-              track('eval_benchmark_selected', { benchmark: value });
+              track('evaluation_benchmark_selected', { benchmark: value });
             }}
           >
             <SelectTrigger
@@ -86,7 +86,7 @@ export default function EvaluationChartControls() {
           date={selectedRunDate}
           onChange={(date) => {
             setSelectedRunDate(date);
-            track('eval_date_selected', { date });
+            track('evaluation_date_selected', { date });
           }}
           placeholder="Select run date"
           availableDates={availableDates}
diff --git a/packages/app/src/components/evaluation/ui/ChartDisplay.tsx b/packages/app/src/components/evaluation/ui/ChartDisplay.tsx
index 3ee0fc1..57ddd12 100644
--- a/packages/app/src/components/evaluation/ui/ChartDisplay.tsx
+++ b/packages/app/src/components/evaluation/ui/ChartDisplay.tsx
@@ -21,11 +21,11 @@ export default function EvaluationChartDisplay() {
 
   const handleExportCsv = useCallback(() => {
     const { headers, rows } = evaluationChartToCsv(chartData);
-    exportToCsv(`evaluation-${Date.now()}`, headers, rows);
+    exportToCsv(`InferenceX_evaluation_${selectedModel}_${selectedBenchmark}`, headers, rows);
   }, [chartData]);
 
   return (
-    <div data-testid="evaluation-chart-display">
+    <div data-testid="evaluation-chart-display" className="flex flex-col gap-4">
       <section>
         <Card>
           <div className="flex flex-col gap-4">
@@ -55,6 +55,7 @@ export default function EvaluationChartDisplay() {
         analyticsPrefix="evaluation"
         setIsLegendExpanded={setIsLegendExpanded}
         onExportCsv={handleExportCsv}
+        exportFileName={`InferenceX_evaluation_${selectedModel}_${selectedBenchmark}`}
       >
         <EvalBarChartD3
           caption={
diff --git a/packages/app/src/components/favorites/FavoritePresetsDropdown.tsx b/packages/app/src/components/favorites/FavoritePresetsDropdown.tsx
deleted file mode 100644
index 76ae15c..0000000
--- a/packages/app/src/components/favorites/FavoritePresetsDropdown.tsx
+++ /dev/null
@@ -1,225 +0,0 @@
-'use client';
-
-import { track } from '@/lib/analytics';
-import { ChevronDown, Star } from 'lucide-react';
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-import { useInference } from '@/components/inference/InferenceContext';
-import { Badge } from '@/components/ui/badge';
-
-import { FAVORITE_PRESETS, FavoritePreset } from './favorite-presets';
-
-export default function FavoritePresetsDropdown() {
-  const {
-    setSelectedModel,
-    setSelectedSequence,
-    setSelectedPrecisions,
-    setSelectedYAxisMetric,
-    setSelectedGPUs,
-    setSelectedDates,
-    setSelectedDateRange,
-    setHwFilter,
-    selectAllHwTypes,
-    dateRangeAvailableDates,
-    activePresetId,
-    setActivePresetId,
-    presetGuardRef,
-  } = useInference();
-
-  const [isOpen, setIsOpen] = useState(false);
-
-  // Version counter — increments on every preset apply/clear.
-  // Async effects capture the version at start and bail if it's stale.
-  const versionRef = useRef(0);
-
-  // Pending preset waiting for dateRangeAvailableDates to resolve
-  const [pendingTimelinePreset, setPendingTimelinePreset] = useState<
-    FavoritePreset['config'] | null
-  >(null);
-  const pendingVersionRef = useRef(0);
-
-  // Once dateRangeAvailableDates resolves for a timeline preset, set the full range.
-  useEffect(() => {
-    if (!pendingTimelinePreset || dateRangeAvailableDates.length === 0) return;
-    if (pendingVersionRef.current !== versionRef.current) {
-      setPendingTimelinePreset(null);
-      return;
-    }
-
-    const first = dateRangeAvailableDates[0];
-    const last = dateRangeAvailableDates[dateRangeAvailableDates.length - 1];
-
-    presetGuardRef.current = true;
-    setSelectedDateRange({ startDate: first, endDate: last });
-    setSelectedDates([]);
-    presetGuardRef.current = false;
-
-    setPendingTimelinePreset(null);
-  }, [
-    pendingTimelinePreset,
-    dateRangeAvailableDates,
-    setSelectedDateRange,
-    setSelectedDates,
-    presetGuardRef,
-  ]);
-
-  const applyPreset = useCallback(
-    (preset: FavoritePreset) => {
-      const version = ++versionRef.current;
-      const { config } = preset;
-
-      presetGuardRef.current = true;
-      setSelectedModel(config.model);
-      setSelectedSequence(config.sequence);
-      setSelectedPrecisions(config.precisions);
-      setSelectedYAxisMetric(config.yAxisMetric);
-      setHwFilter(config.hwFilter ?? null);
-      setActivePresetId(preset.id);
-
-      if (config.gpus && config.gpus.length > 0) {
-        setSelectedGPUs(config.gpus);
-
-        if (config.useDateRange) {
-          setSelectedDateRange({ startDate: '', endDate: '' });
-          setSelectedDates([]);
-          pendingVersionRef.current = version;
-          setPendingTimelinePreset(config);
-        } else {
-          setSelectedDateRange({ startDate: '', endDate: '' });
-          setSelectedDates([]);
-        }
-      } else {
-        setSelectedGPUs([]);
-        setSelectedDateRange({ startDate: '', endDate: '' });
-        setSelectedDates([]);
-      }
-      presetGuardRef.current = false;
-
-      track('favorite_preset_applied', {
-        preset_id: preset.id,
-        preset_title: preset.title,
-        category: preset.category,
-      });
-    },
-    [
-      setSelectedModel,
-      setSelectedSequence,
-      setSelectedPrecisions,
-      setSelectedYAxisMetric,
-      setSelectedGPUs,
-      setSelectedDates,
-      setSelectedDateRange,
-      setHwFilter,
-      setActivePresetId,
-      presetGuardRef,
-    ],
-  );
-
-  const clearPreset = useCallback(() => {
-    ++versionRef.current;
-    setActivePresetId(null);
-    setSelectedGPUs([]);
-    setSelectedDateRange({ startDate: '', endDate: '' });
-    setSelectedDates([]);
-    setHwFilter(null);
-    selectAllHwTypes();
-    setPendingTimelinePreset(null);
-
-    track('favorite_preset_cleared');
-  }, [
-    setActivePresetId,
-    setSelectedGPUs,
-    setSelectedDateRange,
-    setSelectedDates,
-    setHwFilter,
-    selectAllHwTypes,
-  ]);
-
-  const handlePresetClick = useCallback(
-    (preset: FavoritePreset) => {
-      if (activePresetId === preset.id) {
-        clearPreset();
-      } else {
-        applyPreset(preset);
-      }
-    },
-    [activePresetId, applyPreset, clearPreset],
-  );
-
-  const activePreset = activePresetId
-    ? FAVORITE_PRESETS.find((p) => p.id === activePresetId)
-    : null;
-
-  return (
-    <div className="w-full" data-testid="favorites-dropdown">
-      <button
-        type="button"
-        data-testid="favorites-toggle"
-        onClick={() => {
-          setIsOpen((prev) => !prev);
-          track('favorites_dropdown_toggled', { open: !isOpen });
-        }}
-        className="flex w-full items-center justify-between rounded-md border px-3 py-2 text-sm hover:bg-accent transition-colors"
-      >
-        <div className="flex items-center gap-2">
-          <Star
-            className={`h-4 w-4 ${activePreset ? 'fill-primary text-primary' : 'text-muted-foreground'}`}
-          />
-          <span className={activePreset ? 'font-medium' : 'text-muted-foreground'}>
-            {activePreset ? activePreset.title : 'Favorites'}
-          </span>
-          {activePreset && (
-            <Badge variant="secondary" className="text-[10px] px-1.5 py-0">
-              Active
-            </Badge>
-          )}
-        </div>
-        <ChevronDown
-          className={`h-4 w-4 text-muted-foreground transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
-        />
-      </button>
-      {isOpen && (
-        <div className="pt-2" data-testid="favorites-panel">
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
-            {FAVORITE_PRESETS.map((preset) => {
-              const isActive = activePresetId === preset.id;
-              const isGreyed = activePresetId !== null && !isActive;
-
-              return (
-                <button
-                  key={preset.id}
-                  type="button"
-                  data-testid={`favorite-preset-${preset.id}`}
-                  onClick={() => handlePresetClick(preset)}
-                  className={`text-left rounded-md border px-3 py-2.5 transition-all duration-200 ${
-                    isActive
-                      ? 'border-primary bg-primary/5 ring-2 ring-primary/30'
-                      : isGreyed
-                        ? 'border-border/50 opacity-50 hover:opacity-80 hover:bg-accent/50'
-                        : 'border-border hover:bg-accent hover:border-primary/30'
-                  }`}
-                >
-                  <p className="font-medium text-xs leading-tight mb-1">{preset.title}</p>
-                  <p className="text-[11px] text-muted-foreground leading-snug line-clamp-2">
-                    {preset.description}
-                  </p>
-                  <div className="flex flex-wrap gap-1 mt-1.5">
-                    {preset.tags.map((tag) => (
-                      <Badge
-                        key={tag}
-                        variant="outline"
-                        className="text-[9px] px-1 py-0 leading-tight"
-                      >
-                        {tag}
-                      </Badge>
-                    ))}
-                  </div>
-                </button>
-              );
-            })}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/packages/app/src/components/favorites/favorite-presets.test.ts b/packages/app/src/components/favorites/favorite-presets.test.ts
index 591a186..26833d0 100644
--- a/packages/app/src/components/favorites/favorite-presets.test.ts
+++ b/packages/app/src/components/favorites/favorite-presets.test.ts
@@ -163,13 +163,15 @@ describe('precision compatibility', () => {
 // ── Description/config alignment ─────────────────────────────────────
 
 describe('description/config alignment', () => {
-  it('hwFilter entries are mentioned in title, description, or tags', () => {
+  it('hwFilter GPU base names are mentioned in title, description, or tags', () => {
     for (const preset of FAVORITE_PRESETS) {
-      const hwPrefixes = preset.config.hwFilter ?? [];
+      const hwKeys = preset.config.hwFilter ?? [];
       const searchText =
         `${preset.title} ${preset.description} ${preset.tags.join(' ')}`.toLowerCase();
-      for (const hw of hwPrefixes) {
-        expect(searchText).toContain(hw.toLowerCase());
+      for (const hw of hwKeys) {
+        // Extract base GPU name (e.g. 'b200' from 'b200_dynamo-trt')
+        const base = hw.split('_')[0];
+        expect(searchText).toContain(base.toLowerCase());
       }
     }
   });
diff --git a/packages/app/src/components/favorites/favorite-presets.ts b/packages/app/src/components/favorites/favorite-presets.ts
index a0031c2..75c5d46 100644
--- a/packages/app/src/components/favorites/favorite-presets.ts
+++ b/packages/app/src/components/favorites/favorite-presets.ts
@@ -121,16 +121,15 @@ export const FAVORITE_PRESETS: FavoritePreset[] = [
   {
     id: 'gb200-vs-b200',
     title: 'GB200 NVL72 vs B200 — Multi vs Single Node',
-    description:
-      'GB200 NVL72 Dynamo prefill-decode disaggregation vs B200 single-node on DeepSeek R1 (1k/1k) at FP4.',
+    description: 'GB200 NVL72 Dynamo TRT vs B200 Dynamo TRT on DeepSeek R1 (8k/1k) at FP4.',
     tags: ['DeepSeek', 'GB200', 'B200', 'Dynamo', 'FP4', 'NVL72'],
     category: 'comparison',
     config: {
       model: Model.DeepSeek_R1,
-      sequence: Sequence.OneK_OneK,
+      sequence: Sequence.EightK_OneK,
       precisions: ['fp4'],
       yAxisMetric: 'y_tpPerGpu',
-      hwFilter: ['gb200', 'b200'],
+      hwFilter: ['gb200_dynamo-trt', 'b200_dynamo-trt'],
     },
   },
   // 2 — NVIDIA
@@ -138,15 +137,15 @@ export const FAVORITE_PRESETS: FavoritePreset[] = [
     id: 'b200-vs-h200',
     title: 'B200 vs H200 — Blackwell vs Hopper',
     description:
-      'Blackwell B200 vs Hopper H200 single-node throughput per GPU on DeepSeek R1 (1k/8k) at FP8.',
-    tags: ['DeepSeek', 'B200', 'H200', 'FP8'],
+      'Blackwell B200 vs Hopper H200 Dynamo TRT throughput per GPU on DeepSeek R1 (8k/1k) at FP8.',
+    tags: ['DeepSeek', 'B200', 'H200', 'Dynamo', 'FP8'],
     category: 'comparison',
     config: {
       model: Model.DeepSeek_R1,
-      sequence: Sequence.OneK_EightK,
+      sequence: Sequence.EightK_OneK,
       precisions: ['fp8'],
       yAxisMetric: 'y_tpPerGpu',
-      hwFilter: ['b200', 'h200'],
+      hwFilter: ['b200_dynamo-trt', 'h200_dynamo-trt'],
     },
   },
   // 3 — AMD
@@ -154,64 +153,62 @@ export const FAVORITE_PRESETS: FavoritePreset[] = [
     id: 'amd-generations',
     title: 'AMD MI300X → MI325X → MI355X',
     description:
-      'Three generations of AMD Instinct on SGLang at FP8. Generational throughput scaling on DeepSeek R1 (1k/8k).',
+      'Three generations of AMD Instinct on SGLang at FP8. Generational throughput scaling on DeepSeek R1 (8k/1k).',
     tags: ['DeepSeek', 'MI300X', 'MI325X', 'MI355X', 'SGLang', 'FP8'],
     category: 'comparison',
     config: {
       model: Model.DeepSeek_R1,
-      sequence: Sequence.OneK_EightK,
+      sequence: Sequence.EightK_OneK,
       precisions: ['fp8'],
       yAxisMetric: 'y_tpPerGpu',
-      hwFilter: ['mi300x', 'mi325x', 'mi355x'],
+      hwFilter: ['mi300x_sglang', 'mi325x_sglang', 'mi355x_sglang'],
     },
   },
-  // 4 — NVIDIA
+  // 4 — NVIDIA disagg generational
   {
-    id: 'b200-trt-timeline',
-    title: 'B200 TensorRT-LLM Over Time — DeepSeek (FP4)',
-    description:
-      'B200 TensorRT-LLM config expansion on DeepSeek R1 (1k/8k) FP4. All available config waves over time.',
-    tags: ['DeepSeek', 'B200', 'TensorRT-LLM', 'FP4', 'Timeline'],
-    category: 'improvements',
+    id: 'h100-vs-gb300-disagg',
+    title: 'H100 vs GB300 Disagg — DeepSeek',
+    description: 'H100 FP8 disagg vs GB300 FP8 disagg vs GB300 FP4 disagg on DeepSeek R1 (8k/1k).',
+    tags: ['DeepSeek', 'H100', 'GB300', 'Disagg', 'FP8', 'FP4'],
+    category: 'comparison',
     config: {
       model: Model.DeepSeek_R1,
-      sequence: Sequence.OneK_EightK,
-      precisions: ['fp4'],
+      sequence: Sequence.EightK_OneK,
+      precisions: ['fp4', 'fp8'],
       yAxisMetric: 'y_tpPerGpu',
-      gpus: ['b200_trt'],
-      useDateRange: true,
+      hwFilter: ['h100_dynamo-trt_mtp', 'gb300_dynamo-trt_mtp'],
     },
   },
-  // 5 — AMD
+  // 5 — Disagg cross-vendor
   {
-    id: 'mi355x-sglang-vs-atom',
-    title: 'MI355X — SGLang vs Atom Framework',
+    id: 'disagg-b200-vs-mi355x',
+    title: 'Disagg B200 SGLang vs MI355X vs B200 TRT',
     description:
-      'Compare SGLang and Atom runtimes on MI355X at FP8. Same hardware, different frameworks on DeepSeek R1 (1k/8k).',
-    tags: ['DeepSeek', 'MI355X', 'SGLang', 'Atom', 'FP8'],
+      'Disaggregated B200 Dynamo SGLang vs MI355X MoRI SGLang vs B200 Dynamo TRT on DeepSeek R1 (8k/1k) at FP8.',
+    tags: ['DeepSeek', 'B200', 'MI355X', 'Dynamo', 'MoRI', 'FP8', 'Disagg'],
     category: 'comparison',
     config: {
       model: Model.DeepSeek_R1,
-      sequence: Sequence.OneK_EightK,
+      sequence: Sequence.EightK_OneK,
       precisions: ['fp8'],
       yAxisMetric: 'y_tpPerGpu',
-      hwFilter: ['mi355x'],
+      hwFilter: ['b200_dynamo-sglang', 'mi355x_mori-sglang', 'b200_dynamo-trt'],
     },
   },
   // 6 — AMD
   {
-    id: 'mi355x-atom-timeline',
-    title: 'MI355X Atom Over Time — DeepSeek (FP4)',
+    id: 'mi355x-sglang-disagg-timeline',
+    title: 'MI355X SGLang Disagg Over Time — DeepSeek (FP8)',
     description:
-      'MI355X Atom config expansion on DeepSeek R1 (1k/8k) FP4. Tracks all available configs over time.',
-    tags: ['DeepSeek', 'MI355X', 'Atom', 'FP4', 'Timeline'],
+      'MI355X SGLang disaggregated inference on DeepSeek R1 (8k/1k) FP8. Tracks throughput improvements over time.',
+    tags: ['DeepSeek', 'MI355X', 'SGLang', 'FP8', 'Disagg', 'Timeline'],
     category: 'improvements',
     config: {
       model: Model.DeepSeek_R1,
-      sequence: Sequence.OneK_EightK,
-      precisions: ['fp4'],
+      sequence: Sequence.EightK_OneK,
+      precisions: ['fp8'],
       yAxisMetric: 'y_tpPerGpu',
-      gpus: ['mi355x_atom'],
+      gpus: ['mi355x_mori-sglang'],
       useDateRange: true,
     },
   },
diff --git a/packages/app/src/components/footer/footer-star-cta.tsx b/packages/app/src/components/footer/footer-star-cta.tsx
index 10e1eda..9d82468 100644
--- a/packages/app/src/components/footer/footer-star-cta.tsx
+++ b/packages/app/src/components/footer/footer-star-cta.tsx
@@ -7,13 +7,10 @@ import { STARRED_EVENT, STARRED_KEY, saveStarred } from '@/lib/star-storage';
 import { track } from '@/lib/analytics';
 import { Star } from 'lucide-react';
 
-import { useGitHubStars } from '@/hooks/api/use-github-stars';
-
 const GITHUB_REPO_URL = 'https://github.com/SemiAnalysisAI/InferenceX';
 
-export function StarButton() {
-  const { data } = useGitHubStars();
-  const stars = data?.stars ?? null;
+export function StarButton({ starCount }: { starCount?: number | null }) {
+  const stars = starCount ?? null;
   const [hasStarred, setHasStarred] = useState(false);
 
   useEffect(() => {
@@ -36,7 +33,7 @@ export function StarButton() {
       onClick={() => {
         saveStarred();
         setHasStarred(true);
-        track('footer_star_cta_clicked', { stars: stars ?? 0 });
+        track('footer_star_starred');
         window.open(GITHUB_REPO_URL, '_blank', 'noopener,noreferrer');
       }}
     >
diff --git a/packages/app/src/components/footer/footer.tsx b/packages/app/src/components/footer/footer.tsx
index 3783375..48babcc 100644
--- a/packages/app/src/components/footer/footer.tsx
+++ b/packages/app/src/components/footer/footer.tsx
@@ -1,35 +1,13 @@
 import Image from 'next/image';
 import Link from 'next/link';
 
-import { cn } from '@/lib/utils';
-
 import { ShareTwitterButton, ShareLinkedInButton } from '@/components/share-buttons';
 
 import { StarButton } from './footer-star-cta';
 
-export const Footer = () => {
+export const Footer = ({ starCount }: { starCount?: number | null }) => {
   return (
-    <footer
-      data-testid="footer"
-      className={cn(
-        'relative w-full overflow-visible mt-auto pt-32',
-        'before:absolute',
-        'before:bg-muted/50',
-        'dark:before:bg-muted',
-        'before:bottom-0',
-        'before:content-[""]',
-        'before:hidden lg:before:block',
-        'before:w-1/2',
-        'before:h-[200%]',
-        'before:right-0',
-        "before:mask-[url('/brand/left-pattern-full.svg')]",
-        'before:mask-no-repeat',
-        'before:mask-position-[top_right]',
-        'before:mask-size-[100%]',
-        'before:rotate-180',
-        'before:-z-10',
-      )}
-    >
+    <footer data-testid="footer" className="relative w-full overflow-visible mt-auto pt-32">
       <div className="container mx-auto px-4 lg:px-8 py-12">
         {/* Main grid */}
         <div className="flex flex-col md:flex-row md:justify-between gap-10 md:gap-8 mb-10">
@@ -44,7 +22,13 @@ export const Footer = () => {
               href="https://semianalysis.com/"
               className="inline-block w-35 h-14.5"
             >
-              <Image width={140} height={58} src="/brand/logo-color.png" alt="SemiAnalysis logo" />
+              <Image
+                width={140}
+                height={58}
+                src="/brand/logo-color.webp"
+                alt="SemiAnalysis logo"
+                className="h-auto"
+              />
             </Link>
             <p
               data-testid="footer-brand-description"
@@ -136,7 +120,7 @@ export const Footer = () => {
           <div data-testid="footer-cta" className="flex flex-col gap-4 items-center md:items-end">
             <div data-testid="footer-social-buttons" className="flex items-center gap-1.5">
               <div className="rounded-md bg-background/80 w-fit">
-                <StarButton />
+                <StarButton starCount={starCount} />
               </div>
               <div className="rounded-md bg-background/80 w-fit">
                 <ShareTwitterButton />
diff --git a/packages/app/src/components/github-star-modal.tsx b/packages/app/src/components/github-star-modal.tsx
index a2c41ab..bfd0520 100644
--- a/packages/app/src/components/github-star-modal.tsx
+++ b/packages/app/src/components/github-star-modal.tsx
@@ -48,7 +48,7 @@ export function GitHubStarModal() {
   useEffect(() => {
     if (shouldShowModal()) {
       setOpen(true);
-      track('github_star_modal_shown');
+      track('star_modal_shown');
     }
     setReady(true);
   }, []);
@@ -66,7 +66,7 @@ export function GitHubStarModal() {
     setOpen(false);
     sessionDismissed = true;
     saveDismissTimestamp();
-    track('github_star_modal_dismissed');
+    track('star_modal_dismissed');
   }, []);
 
   const handleStar = useCallback(() => {
@@ -74,7 +74,7 @@ export function GitHubStarModal() {
     setOpen(false);
     sessionDismissed = true;
     saveStarred();
-    track('github_star_modal_starred');
+    track('star_modal_starred');
   }, []);
 
   return (
diff --git a/packages/app/src/components/gpu-power/GpuPowerDisplay.tsx b/packages/app/src/components/gpu-power/GpuPowerDisplay.tsx
index 96698fc..5c5e90b 100644
--- a/packages/app/src/components/gpu-power/GpuPowerDisplay.tsx
+++ b/packages/app/src/components/gpu-power/GpuPowerDisplay.tsx
@@ -2,7 +2,8 @@
 
 import { track } from '@/lib/analytics';
 import * as d3 from 'd3';
-import { BarChart3, Check, Link as LinkIcon, Loader2, ScatterChart } from 'lucide-react';
+import { BarChart3, Check, Link as LinkIcon, Lock, Loader2, ScatterChart } from 'lucide-react';
+import { useRouter } from 'next/navigation';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { Button } from '@/components/ui/button';
@@ -30,8 +31,10 @@ import type {
 import { ALL_METRIC_OPTIONS, getAvailableMetrics } from './types';
 
 const GPU_COLORS = d3.schemeTableau10;
+const FEATURE_GATE_KEY = 'inferencex-feature-gate';
 
 export default function GpuMetricsDisplay() {
+  const router = useRouter();
   const [runIdInput, setRunIdInput] = useState('22806827144');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -152,6 +155,14 @@ export default function GpuMetricsDisplay() {
     });
   }, []);
 
+  const removeGpu = useCallback((hw: string) => {
+    setVisibleGpus((prev) => {
+      const next = new Set(prev);
+      next.delete(Number(hw));
+      return next;
+    });
+  }, []);
+
   const handleShare = useCallback(async () => {
     const params = new URLSearchParams();
     params.set('gm_runId', runIdInput.trim());
@@ -196,7 +207,24 @@ export default function GpuMetricsDisplay() {
     <section data-testid="gpu-metrics-display">
       <Card className="mb-4">
         <div className="space-y-3">
-          <h2 className="text-lg font-semibold">PowerX</h2>
+          <div className="flex items-center justify-between">
+            <h2 className="text-lg font-semibold">PowerX</h2>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 gap-1.5 text-xs text-muted-foreground"
+              onClick={() => {
+                localStorage.removeItem(FEATURE_GATE_KEY);
+                window.dispatchEvent(new Event('inferencex:powerx:locked'));
+                track('powerx_relocked');
+                router.push('/inference');
+              }}
+              title="Re-lock PowerX"
+            >
+              <Lock className="h-3 w-3" />
+              Lock
+            </Button>
+          </div>
           <p className="text-sm text-muted-foreground">
             Enter a GitHub Actions run ID to visualize GPU metrics over time from{' '}
             <code className="text-xs bg-muted px-1 py-0.5 rounded">gpu_metrics</code> artifacts.
@@ -242,14 +270,14 @@ export default function GpuMetricsDisplay() {
       {runInfo && artifacts.length > 0 && (
         <>
           <Card className="mb-4">
-            <div className="flex flex-wrap gap-x-6 gap-y-1 text-sm">
+            <div className="flex flex-wrap gap-x-6 gap-y-1 text-sm mb-4">
               <span>
                 <span className="text-muted-foreground">Run:</span>{' '}
                 <a
                   href={runInfo.url}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-primary hover:underline font-medium"
+                  className="text-brand hover:underline font-medium"
                 >
                   {runInfo.name} #{runInfo.id}
                 </a>
@@ -269,9 +297,7 @@ export default function GpuMetricsDisplay() {
                 {currentData.length.toLocaleString()}
               </span>
             </div>
-          </Card>
 
-          <Card className="mb-4">
             <div className="grid grid-cols-1 sm:grid-cols-[1fr_auto] items-end gap-3">
               {artifacts.length > 1 && (
                 <div className="space-y-1 min-w-0">
@@ -425,6 +451,7 @@ export default function GpuMetricsDisplay() {
                 legendElement={
                   <ChartLegend
                     variant="sidebar"
+                    onItemRemove={removeGpu}
                     legendItems={allGpuIndices.map((gpuIndex) => ({
                       name: `GPU ${gpuIndex}`,
                       hw: String(gpuIndex),
@@ -438,9 +465,17 @@ export default function GpuMetricsDisplay() {
                       setIsLegendExpanded(expanded);
                       track('gpu_metrics_legend_expanded', { expanded });
                     }}
-                    showResetFilter
-                    allSelected={allGpusSelected}
-                    onResetFilter={selectAllGpus}
+                    actions={
+                      !allGpusSelected
+                        ? [
+                            {
+                              id: 'gpu-metrics-reset-filter',
+                              label: 'Reset filter',
+                              onClick: selectAllGpus,
+                            },
+                          ]
+                        : []
+                    }
                     switches={[
                       {
                         id: 'gpu-metrics-downsample',
@@ -467,6 +502,7 @@ export default function GpuMetricsDisplay() {
                 legendElement={
                   <ChartLegend
                     variant="sidebar"
+                    onItemRemove={removeGpu}
                     legendItems={allGpuIndices.map((gpuIndex) => ({
                       name: `GPU ${gpuIndex}`,
                       hw: String(gpuIndex),
@@ -480,9 +516,17 @@ export default function GpuMetricsDisplay() {
                       setIsLegendExpanded(expanded);
                       track('gpu_metrics_legend_expanded', { expanded });
                     }}
-                    showResetFilter
-                    allSelected={allGpusSelected}
-                    onResetFilter={selectAllGpus}
+                    actions={
+                      !allGpusSelected
+                        ? [
+                            {
+                              id: 'gpu-metrics-reset-filter-2',
+                              label: 'Reset filter',
+                              onClick: selectAllGpus,
+                            },
+                          ]
+                        : []
+                    }
                     switches={[
                       {
                         id: 'gpu-metrics-downsample-corr',
diff --git a/packages/app/src/components/gpu-specs/gpu-specs-content.tsx b/packages/app/src/components/gpu-specs/gpu-specs-content.tsx
index a2cf2cc..1f85aab 100644
--- a/packages/app/src/components/gpu-specs/gpu-specs-content.tsx
+++ b/packages/app/src/components/gpu-specs/gpu-specs-content.tsx
@@ -280,7 +280,7 @@ export function GpuSpecsContent() {
   };
 
   return (
-    <div data-testid="gpu-specs-content">
+    <div data-testid="gpu-specs-content" className="flex flex-col gap-4">
       <section>
         <Card>
           <div className="flex items-start justify-between">
diff --git a/packages/app/src/components/gpu-specs/gpu-specs-radar-chart.tsx b/packages/app/src/components/gpu-specs/gpu-specs-radar-chart.tsx
index 4340253..692fb55 100644
--- a/packages/app/src/components/gpu-specs/gpu-specs-radar-chart.tsx
+++ b/packages/app/src/components/gpu-specs/gpu-specs-radar-chart.tsx
@@ -92,6 +92,14 @@ export function GpuSpecsRadarChart({ caption }: GpuSpecsRadarChartProps) {
     });
   }, []);
 
+  const removeGpu = useCallback((name: string) => {
+    setSelectedGpus((prev) => {
+      const next = new Set(prev);
+      next.delete(name);
+      return next;
+    });
+  }, []);
+
   const selectAll = useCallback(() => {
     setSelectedGpus(new Set(GPU_SPECS.map((s) => s.name)));
     track('gpu_specs_radar_select_all');
@@ -186,18 +194,27 @@ export function GpuSpecsRadarChart({ caption }: GpuSpecsRadarChartProps) {
           <ChartLegend
             variant="sidebar"
             legendItems={legendItems}
+            onItemRemove={removeGpu}
             isLegendExpanded={isLegendExpanded}
             onExpandedChange={(expanded) => {
               setIsLegendExpanded(expanded);
               track('gpu_specs_radar_legend_expanded', { expanded });
             }}
             grouped={false}
-            showResetFilter={true}
-            allSelected={selectedGpus.size === GPU_SPECS.length}
-            onResetFilter={() => {
-              selectAll();
-              track('gpu_specs_radar_reset_filter');
-            }}
+            actions={
+              selectedGpus.size < GPU_SPECS.length
+                ? [
+                    {
+                      id: 'radar-reset-filter',
+                      label: 'Reset filter',
+                      onClick: () => {
+                        selectAll();
+                        track('gpu_specs_radar_reset_filter');
+                      },
+                    },
+                  ]
+                : []
+            }
             disableActiveSort={true}
           />
         }
diff --git a/packages/app/src/components/header/GithubStars.tsx b/packages/app/src/components/header/GithubStars.tsx
index 2e70500..eb32039 100644
--- a/packages/app/src/components/header/GithubStars.tsx
+++ b/packages/app/src/components/header/GithubStars.tsx
@@ -4,16 +4,16 @@ import { useState, useEffect } from 'react';
 import Link from 'next/link';
 
 import { STARRED_EVENT, STARRED_KEY, saveStarred } from '@/lib/star-storage';
-import { useGitHubStars } from '@/hooks/api/use-github-stars';
+import { track } from '@/lib/analytics';
 
 interface GitHubStarsProps {
   owner: string;
   repo: string;
+  starCount?: number | null;
 }
 
-export function GitHubStars({ owner, repo }: GitHubStarsProps) {
-  const { data } = useGitHubStars();
-  const stars = data?.owner === owner && data?.repo === repo ? data.stars : null;
+export function GitHubStars({ owner, repo, starCount }: GitHubStarsProps) {
+  const stars = starCount ?? null;
   const [hasStarred, setHasStarred] = useState(false);
 
   useEffect(() => {
@@ -35,8 +35,9 @@ export function GitHubStars({ owner, repo }: GitHubStarsProps) {
       onClick={() => {
         saveStarred();
         setHasStarred(true);
+        track('header_star_starred');
       }}
-      className={`${hasStarred ? '' : 'star-button-glow '}flex items-center gap-1.5 px-3 py-1.5 rounded-md border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800 hover:border-primary/50 dark:hover:border-primary/50 transition-colors`}
+      className={`${hasStarred ? '' : 'star-button-glow hover:border-primary/50 dark:hover:border-primary/50 '}flex items-center gap-1.5 px-3 py-1.5 rounded-md border border-gray-400 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors`}
     >
       {/* Star Icon */}
       <svg
diff --git a/packages/app/src/components/header/header.tsx b/packages/app/src/components/header/header.tsx
index 66d095b..bb570e4 100644
--- a/packages/app/src/components/header/header.tsx
+++ b/packages/app/src/components/header/header.tsx
@@ -11,9 +11,21 @@ import { cn } from '@/lib/utils';
 
 import { GitHubStars } from './GithubStars';
 
+/** Dashboard tab paths that should highlight the "Dashboard" nav link. */
+const DASHBOARD_TABS = [
+  '/inference',
+  '/evaluation',
+  '/historical',
+  '/calculator',
+  '/reliability',
+  '/gpu-specs',
+  '/gpu-metrics',
+];
+
 const NAV_LINKS = [
+  { href: '/', label: 'Home', testId: 'nav-link-home', event: 'header_home_clicked' },
   {
-    href: '/',
+    href: '/inference',
     label: 'Dashboard',
     testId: 'nav-link-dashboard',
     event: 'header_dashboard_clicked',
@@ -26,20 +38,42 @@ const NAV_LINKS = [
     event: 'header_supporters_clicked',
   },
   { href: '/blog', label: 'Articles', testId: 'nav-link-blog', event: 'header_blog_clicked' },
+  { href: '/about', label: 'About', testId: 'nav-link-about', event: 'header_about_clicked' },
 ] as const;
 
 function isActive(pathname: string, href: string): boolean {
-  if (href === '/')
-    return (
-      pathname === '/' ||
-      (!pathname.startsWith('/media') &&
-        !pathname.startsWith('/quotes') &&
-        !pathname.startsWith('/blog'))
-    );
+  if (href === '/') return pathname === '/';
+  if (href === '/inference') return DASHBOARD_TABS.some((tab) => pathname.startsWith(tab));
   return pathname.startsWith(href);
 }
 
-export const Header = () => {
+/**
+ * Layout group for a path. Next.js soft navigation breaks when crossing
+ * layout boundaries, so we use plain <a> tags for those transitions.
+ */
+function layoutGroup(path: string): 'dashboard' | 'blog' | 'root' {
+  if (DASHBOARD_TABS.some((tab) => path.startsWith(tab))) return 'dashboard';
+  if (path.startsWith('/blog')) return 'blog';
+  return 'root';
+}
+
+/**
+ * Use Next.js Link for same-layout-group navigation (soft nav),
+ * plain <a> when crossing layout boundaries (full page nav)
+ * to work around Next.js soft navigation bugs between route groups.
+ */
+function NavLink({
+  href,
+  currentPath,
+  ...props
+}: React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string; currentPath: string }) {
+  if (layoutGroup(currentPath) === layoutGroup(href)) {
+    return <Link href={href} {...props} />;
+  }
+  return <a href={href} {...props} />;
+}
+
+export const Header = ({ starCount }: { starCount?: number | null }) => {
   const pathname = usePathname() ?? '/';
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -74,11 +108,14 @@ export const Header = () => {
   }, []);
 
   return (
-    <header data-testid="header" className="border-b border-border/40">
+    <header
+      data-testid="header"
+      className="sticky top-0 z-50 border-b border-border/40 mb-4 bg-background/60 backdrop-blur-[2px]"
+    >
       <div className="container mx-auto px-4 lg:px-8">
         <div className="flex h-14 items-center gap-6">
           {/* Brand */}
-          <Link href="/" className="flex items-center gap-2 shrink-0">
+          <a href="/" className="flex items-center gap-2 shrink-0">
             <span className="text-lg font-bold tracking-tight">InferenceX</span>
             <span className="hidden sm:flex items-center gap-1.5 text-xs text-muted-foreground">
               by
@@ -87,19 +124,20 @@ export const Header = () => {
                 alt="SemiAnalysis logo"
                 width={64}
                 height={27}
-                className="inline w-12"
+                className="inline h-auto lg:w-20"
                 priority
               />
             </span>
-          </Link>
+          </a>
 
           {/* Desktop nav */}
-          <nav className="hidden md:flex items-center gap-1">
+          <nav className="hidden lg:flex items-center gap-1">
             {NAV_LINKS.map(({ href, label, testId, event }) => (
-              <Link
+              <NavLink
                 key={href}
                 data-testid={testId}
                 href={href}
+                currentPath={pathname}
                 className={cn(
                   'px-3 py-1.5 rounded-md text-sm font-medium transition-colors',
                   isActive(pathname, href)
@@ -109,17 +147,17 @@ export const Header = () => {
                 onClick={() => track(event)}
               >
                 {label}
-              </Link>
+              </NavLink>
             ))}
           </nav>
 
           {/* Right side */}
           <div className="ml-auto flex items-center gap-2">
-            <GitHubStars owner="SemiAnalysisAI" repo="InferenceX" />
+            <GitHubStars owner="SemiAnalysisAI" repo="InferenceX" starCount={starCount} />
             <ModeToggle />
 
             {/* Mobile hamburger */}
-            <div ref={menuRef} className="relative md:hidden">
+            <div ref={menuRef} className="relative lg:hidden">
               <button
                 type="button"
                 data-testid="mobile-menu-toggle"
@@ -146,9 +184,10 @@ export const Header = () => {
               {mobileMenuOpen && (
                 <div className="absolute right-0 top-full mt-2 z-50 flex flex-col rounded-lg border border-border bg-background p-1.5 shadow-lg min-w-40">
                   {NAV_LINKS.map(({ href, label, event }) => (
-                    <Link
+                    <NavLink
                       key={href}
                       href={href}
+                      currentPath={pathname}
                       className={cn(
                         'px-3 py-2 rounded-md text-sm font-medium transition-colors',
                         isActive(pathname, href)
@@ -158,7 +197,7 @@ export const Header = () => {
                       onClick={() => track(event)}
                     >
                       {label}
-                    </Link>
+                    </NavLink>
                   ))}
                 </div>
               )}
diff --git a/packages/app/src/components/inference/InferenceContext.tsx b/packages/app/src/components/inference/InferenceContext.tsx
index d37b72e..9ee3c83 100644
--- a/packages/app/src/components/inference/InferenceContext.tsx
+++ b/packages/app/src/components/inference/InferenceContext.tsx
@@ -12,6 +12,8 @@ import {
 } from 'react';
 
 import { DISPLAY_MODEL_TO_DB, islOslToSequence } from '@semianalysisai/inferencex-constants';
+import { track } from '@/lib/analytics';
+import { FAVORITE_PRESETS, type FavoritePreset } from '@/components/favorites/favorite-presets';
 
 import { useGlobalFilters } from '@/components/GlobalFilterContext';
 import {
@@ -343,12 +345,14 @@ export function InferenceProvider({
     setActiveSet: setActiveHwTypes,
     toggle: toggleHwRaw,
     selectAll: selectAllHwRaw,
+    remove: removeHwRaw,
   } = useChartToggleSet();
   const {
     activeSet: activeDates,
     setActiveSet: setActiveDates,
     toggle: toggleDateRaw,
     selectAll: selectAllDatesRaw,
+    remove: removeDateRaw,
   } = useChartToggleSet();
 
   const hwFilteredPoints = useMemo(
@@ -381,11 +385,8 @@ export function InferenceProvider({
       // Preset filter is active: evaluate updater to get all available items, then filter.
       // Passing empty set makes useChartDataFilter's updater return itemsWithData (all items).
       const base: Set<string> = typeof update === 'function' ? update(new Set()) : update;
-      const filtered = new Set(
-        Array.from(base).filter((hwKey: string) =>
-          filter.some((prefix: string) => hwKey.startsWith(prefix)),
-        ),
-      );
+      const filterSet = new Set(filter);
+      const filtered = new Set(Array.from(base).filter((hwKey: string) => filterSet.has(hwKey)));
       if (filtered.size > 0) {
         setActiveHwTypes(filtered);
         setPendingHwFilter(null);
@@ -406,11 +407,8 @@ export function InferenceProvider({
   // but useChartDataFilter didn't fire (e.g. re-selecting the same preset).
   useEffect(() => {
     if (!pendingHwFilter || hwTypesWithData.size === 0) return;
-    const filtered = new Set(
-      Array.from(hwTypesWithData).filter((hwKey) =>
-        pendingHwFilter.some((prefix) => hwKey.startsWith(prefix)),
-      ),
-    );
+    const filterSet = new Set(pendingHwFilter);
+    const filtered = new Set(Array.from(hwTypesWithData).filter((hwKey) => filterSet.has(hwKey)));
     if (filtered.size > 0) {
       setActiveHwTypes(filtered);
       setPendingHwFilter(null);
@@ -425,6 +423,14 @@ export function InferenceProvider({
     [toggleHwRaw, hwTypesWithData],
   );
 
+  const removeHwType = useCallback(
+    (hw: string) => {
+      removeHwRaw(hw);
+      setActivePresetId(null);
+    },
+    [removeHwRaw],
+  );
+
   const allDateIds = useMemo(() => {
     const dates: string[] = [];
     if (selectedDateRange.startDate && selectedDateRange.endDate) {
@@ -442,6 +448,7 @@ export function InferenceProvider({
     (id: string) => toggleDateRaw(id, allDateIds),
     [toggleDateRaw, allDateIds],
   );
+  const removeActiveDate = useCallback((id: string) => removeDateRaw(id), [removeDateRaw]);
   const selectAllHwTypes = useCallback(
     () => selectAllHwRaw(hwTypesWithData),
     [selectAllHwRaw, hwTypesWithData],
@@ -507,6 +514,62 @@ export function InferenceProvider({
     [selectedModel],
   );
 
+  // ── Debounced GPU selection tracking ─────────────────────────────────────
+  // Fire after 3s of no changes so we capture the "settled" selection.
+  // Skip the first render (initial data load) to avoid noise.
+
+  // Scatter chart — tracks activeHwTypes
+  const scatterTrackMounted = useRef(false);
+  useEffect(() => {
+    if (!scatterTrackMounted.current) {
+      scatterTrackMounted.current = true;
+      return;
+    }
+    if (activeHwTypes.size === 0) return;
+    const timer = setTimeout(() => {
+      const gpus = [...activeHwTypes].sort();
+      track('inference_gpu_selection_settled', {
+        gpus,
+        gpu_count: gpus.length,
+        model: selectedModel,
+        sequence: effectiveSequence,
+        preset_id: activePresetId,
+        yAxisMetric: selectedYAxisMetric,
+      });
+    }, 3000);
+    return () => clearTimeout(timer);
+  }, [activeHwTypes]); // eslint-disable-line react-hooks/exhaustive-deps -- intentionally only re-fire on GPU set changes
+
+  // Interactivity / E2E chart — tracks activeDates (date+gpu pairs)
+  const e2eTrackMounted = useRef(false);
+  useEffect(() => {
+    if (!e2eTrackMounted.current) {
+      e2eTrackMounted.current = true;
+      return;
+    }
+    if (activeDates.size === 0) return;
+    const timer = setTimeout(() => {
+      const pairs = [...activeDates].sort();
+      track('interactivity_selection_settled', {
+        date_gpu_pairs: pairs,
+        pair_count: pairs.length,
+        gpus: [...new Set(pairs.map((p) => p.split('_').slice(1).join('_')))].sort(),
+        model: selectedModel,
+        sequence: effectiveSequence,
+        yAxisMetric: selectedYAxisMetric,
+      });
+    }, 3000);
+    return () => clearTimeout(timer);
+  }, [activeDates]); // eslint-disable-line react-hooks/exhaustive-deps -- intentionally only re-fire on date selection changes
+
+  // Fire once on mount to capture the initial y-axis metric (default or URL-restored)
+  useEffect(() => {
+    track('inference_chart_view', {
+      yAxisMetric: selectedYAxisMetric,
+      source: getUrlParam('i_metric') ? 'url' : 'default',
+    });
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps -- fire once on mount
+
   // ── URL sync ──────────────────────────────────────────────────────────────
 
   useUrlStateSync(
@@ -545,6 +608,100 @@ export function InferenceProvider({
     ],
   );
 
+  // ── URL preset loading ───────────────────────────────────────────────────
+  // Reads ?preset= from the URL on mount and applies it. This is the only
+  // place preset URL params are consumed — the landing page links here.
+
+  const urlPresetAppliedRef = useRef(false);
+  const presetVersionRef = useRef(0);
+  const [pendingTimelinePreset, setPendingTimelinePreset] = useState<
+    FavoritePreset['config'] | null
+  >(null);
+  const pendingPresetVersionRef = useRef(0);
+
+  // Once dateRangeAvailableDates resolves for a timeline preset, set the full range.
+  useEffect(() => {
+    if (!pendingTimelinePreset || dateRangeAvailableDates.length === 0) return;
+    if (pendingPresetVersionRef.current !== presetVersionRef.current) {
+      setPendingTimelinePreset(null);
+      return;
+    }
+    const first = dateRangeAvailableDates[0];
+    const last = dateRangeAvailableDates[dateRangeAvailableDates.length - 1];
+    presetGuardRef.current = true;
+    setSelectedDateRange({ startDate: first, endDate: last });
+    setSelectedDates([]);
+    presetGuardRef.current = false;
+    setPendingTimelinePreset(null);
+  }, [pendingTimelinePreset, dateRangeAvailableDates, setSelectedDateRange, setSelectedDates]);
+
+  const applyPreset = useCallback(
+    (preset: FavoritePreset) => {
+      const version = ++presetVersionRef.current;
+      const { config } = preset;
+      presetGuardRef.current = true;
+      setSelectedModel(config.model);
+      setSelectedSequence(config.sequence);
+      setSelectedPrecisions(config.precisions);
+      setSelectedYAxisMetric(config.yAxisMetric);
+      setPendingHwFilter(config.hwFilter ?? null);
+      setActivePresetId(preset.id);
+      setHighContrast(true);
+      if (config.gpus && config.gpus.length > 0) {
+        setSelectedGPUs(config.gpus);
+        if (config.useDateRange) {
+          setSelectedDateRange({ startDate: '', endDate: '' });
+          setSelectedDates([]);
+          pendingPresetVersionRef.current = version;
+          setPendingTimelinePreset(config);
+        } else {
+          setSelectedDateRange({ startDate: '', endDate: '' });
+          setSelectedDates([]);
+        }
+      } else {
+        setSelectedGPUs([]);
+        setSelectedDateRange({ startDate: '', endDate: '' });
+        setSelectedDates([]);
+      }
+      presetGuardRef.current = false;
+      track('favorite_preset_applied', {
+        preset_id: preset.id,
+        preset_title: preset.title,
+        category: preset.category,
+      });
+    },
+    [
+      setSelectedModel,
+      setSelectedSequence,
+      setSelectedPrecisions,
+      setSelectedYAxisMetric,
+      setSelectedGPUs,
+      setSelectedDates,
+      setSelectedDateRange,
+      setActivePresetId,
+      setHighContrast,
+    ],
+  );
+
+  useEffect(() => {
+    if (urlPresetAppliedRef.current) return;
+    if (typeof window === 'undefined') return;
+    const sp = new URLSearchParams(window.location.search);
+    const presetId = sp.get('preset');
+    if (!presetId) return;
+    const preset = FAVORITE_PRESETS.find((p) => p.id === presetId);
+    if (!preset) return;
+    urlPresetAppliedRef.current = true;
+    sp.delete('preset');
+    const search = sp.toString();
+    window.history.replaceState(
+      null,
+      '',
+      `${window.location.pathname}${search ? `?${search}` : ''}`,
+    );
+    applyPreset(preset);
+  }, [applyPreset]);
+
   // ── Filtered runs ─────────────────────────────────────────────────────────
 
   const filteredAvailableRuns = useMemo(
@@ -578,6 +735,7 @@ export function InferenceProvider({
       activeHwTypes,
       hwTypesWithData,
       toggleHwType,
+      removeHwType,
       selectAllHwTypes,
       hardwareConfig,
       graphs,
@@ -620,6 +778,7 @@ export function InferenceProvider({
       activeDates,
       setActiveDates,
       toggleActiveDate,
+      removeActiveDate,
       selectAllActiveDates,
       selectedRunDate,
       setSelectedRunDate,
@@ -653,6 +812,7 @@ export function InferenceProvider({
       activeHwTypes,
       hwTypesWithData,
       toggleHwType,
+      removeHwType,
       selectAllHwTypes,
       hardwareConfig,
       graphs,
@@ -671,6 +831,7 @@ export function InferenceProvider({
       selectedDateRange,
       activeDates,
       toggleActiveDate,
+      removeActiveDate,
       selectAllActiveDates,
       selectedRunDate,
       availableDates,
diff --git a/packages/app/src/components/inference/types.ts b/packages/app/src/components/inference/types.ts
index 81cb140..bbb24f8 100644
--- a/packages/app/src/components/inference/types.ts
+++ b/packages/app/src/components/inference/types.ts
@@ -449,10 +449,12 @@ export interface RunInfo {
 export interface InferenceChartContextType {
   activeHwTypes: Set<string>;
   toggleActiveDate: (date: string) => void;
+  removeActiveDate: (date: string) => void;
   selectAllActiveDates: () => void;
   activeDates: Set<string>;
   hwTypesWithData: Set<string>;
   toggleHwType: (hw: string) => void;
+  removeHwType: (hw: string) => void;
   selectAllHwTypes: () => void;
   hardwareConfig: HardwareConfig;
   graphs: RenderableGraph[];
@@ -544,7 +546,6 @@ export interface HardwareConfig {
     label: string;
     suffix: string;
     gpu: string;
-    color: string;
     framework?: string;
   };
 }
diff --git a/packages/app/src/components/inference/ui/ChartControls.tsx b/packages/app/src/components/inference/ui/ChartControls.tsx
index 6726020..d322202 100644
--- a/packages/app/src/components/inference/ui/ChartControls.tsx
+++ b/packages/app/src/components/inference/ui/ChartControls.tsx
@@ -2,7 +2,6 @@
 
 import { track } from '@/lib/analytics';
 
-import FavoritePresetsDropdown from '@/components/favorites/FavoritePresetsDropdown';
 import { useInference } from '@/components/inference/InferenceContext';
 import {
   ModelSelector,
@@ -50,22 +49,30 @@ const METRIC_GROUPS = [
   { label: 'Custom User Values', metrics: ['y_costUser', 'y_powerUser'] },
 ];
 
-const GROUPED_Y_AXIS_OPTIONS = (() => {
+/** Map from metric key → human-readable title (e.g. "Token Throughput per GPU") */
+const METRIC_TITLE_MAP = (() => {
   const chartDef = (chartDefinitions as ChartDefinition[])[0];
-  const metricMap = new Map<string, string>();
+  const map = new Map<string, string>();
   for (const key of Object.keys(chartDef)) {
     if (key.startsWith('y_') && key.endsWith('_title')) {
-      metricMap.set(key.replace('_title', ''), chartDef[key as keyof ChartDefinition] as string);
+      map.set(key.replace('_title', ''), chartDef[key as keyof ChartDefinition] as string);
     }
   }
-  return METRIC_GROUPS.map((group) => ({
-    groupLabel: group.label,
-    options: group.metrics
-      .filter((m) => metricMap.has(m))
-      .map((m) => ({ value: m, label: metricMap.get(m)! })),
-  })).filter((g) => g.options.length > 0);
+  return map;
 })();
 
+/** Map from metric key → group label (e.g. "Throughput", "Cost per Million Total Tokens") */
+const METRIC_GROUP_MAP = new Map<string, string>(
+  METRIC_GROUPS.flatMap((g) => g.metrics.map((m) => [m, g.label] as const)),
+);
+
+const GROUPED_Y_AXIS_OPTIONS = METRIC_GROUPS.map((group) => ({
+  groupLabel: group.label,
+  options: group.metrics
+    .filter((m) => METRIC_TITLE_MAP.has(m))
+    .map((m) => ({ value: m, label: METRIC_TITLE_MAP.get(m)! })),
+})).filter((g) => g.options.length > 0);
+
 interface ChartControlsProps {
   /** Hide GPU Config selector and related date pickers (used by Historical Trends tab) */
   hideGpuComparison?: boolean;
@@ -115,6 +122,8 @@ export default function ChartControls({
         sequence: selectedSequence,
         precision: selectedPrecisions.join(','),
         yAxisMetric: selectedYAxisMetric,
+        yAxisMetricLabel: METRIC_TITLE_MAP.get(selectedYAxisMetric) ?? selectedYAxisMetric,
+        yAxisMetricGroup: METRIC_GROUP_MAP.get(selectedYAxisMetric) ?? 'Unknown',
       });
     }
   };
@@ -148,6 +157,8 @@ export default function ChartControls({
     setSelectedYAxisMetric(value);
     track('inference_y_axis_metric_selected', {
       metric: value,
+      metric_label: METRIC_TITLE_MAP.get(value) ?? value,
+      metric_group: METRIC_GROUP_MAP.get(value) ?? 'Unknown',
     });
     setTimeout(trackCombinedFilters, 0);
   };
@@ -193,7 +204,6 @@ export default function ChartControls({
   return (
     <TooltipProvider delayDuration={0}>
       <div className="flex flex-col gap-4">
-        <FavoritePresetsDropdown />
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4">
           <ModelSelector
             value={selectedModel}
diff --git a/packages/app/src/components/inference/ui/ChartDisplay.tsx b/packages/app/src/components/inference/ui/ChartDisplay.tsx
index 7f1edc4..e799b2a 100644
--- a/packages/app/src/components/inference/ui/ChartDisplay.tsx
+++ b/packages/app/src/components/inference/ui/ChartDisplay.tsx
@@ -264,6 +264,7 @@ export default function ChartDisplay() {
                       : 'interactivity'
                 }
                 setIsLegendExpanded={setIsLegendExpanded}
+                exportFileName={`InferenceX_${selectedModel}_${graph.chartDefinition.chartType}`}
                 onExportCsv={() => {
                   const visibleData = graph.data.filter(
                     (d) =>
@@ -275,7 +276,11 @@ export default function ChartDisplay() {
                     graph.model,
                     graph.sequence,
                   );
-                  exportToCsv(`chart-${graphIndex}-${Date.now()}`, headers, rows);
+                  exportToCsv(
+                    `InferenceX_${selectedModel}_${graph.chartDefinition.chartType}`,
+                    headers,
+                    rows,
+                  );
                 }}
               />
               <Card>
@@ -652,8 +657,8 @@ export default function ChartDisplay() {
         ));
 
   return (
-    <div data-testid="inference-chart-display">
-      <section>
+    <div data-testid="inference-chart-display" className="flex flex-col gap-4">
+      <section className="relative z-10">
         <Card>
           <div className="flex flex-col gap-4">
             <div className="flex items-start justify-between">
@@ -698,7 +703,7 @@ export default function ChartDisplay() {
           <CustomPowers loading={loading} />
         </section>
       )}
-      <div className="flex flex-col gap-10">{displayGraphs}</div>
+      <div className="flex flex-col gap-4">{displayGraphs}</div>
 
       {/* Performance Over Time — Modal Drill-Down */}
       <Dialog
@@ -709,7 +714,11 @@ export default function ChartDisplay() {
         onOpenChange={(open) => {
           if (!open) {
             clearTrackedConfigs();
-            track('inference_trend_cleared');
+            track('inference_trend_cleared', {
+              configCount: trackedConfigs.length,
+              model: selectedModel,
+              metric: selectedYAxisMetric,
+            });
           }
         }}
       >
diff --git a/packages/app/src/components/inference/ui/CustomCosts.tsx b/packages/app/src/components/inference/ui/CustomCosts.tsx
index 73087cc..c95bbb1 100644
--- a/packages/app/src/components/inference/ui/CustomCosts.tsx
+++ b/packages/app/src/components/inference/ui/CustomCosts.tsx
@@ -162,7 +162,10 @@ const CustomCosts = memo(({ loading }: { loading: boolean }) => {
 
   // Handle reset button click
   const handleReset = useCallback(() => {
-    track('inference_custom_costs_reset');
+    track('inference_custom_costs_reset', {
+      metric: selectedYAxisMetric,
+      gpuCount: stableGpus.length,
+    });
     const defaultInputs: { [gpuKey: string]: number } = {};
 
     stableGpus.forEach((gpu) => {
@@ -183,7 +186,10 @@ const CustomCosts = memo(({ loading }: { loading: boolean }) => {
     if (hasErrors) {
       return;
     }
-    track('inference_custom_costs_calculated');
+    track('inference_custom_costs_calculated', {
+      metric: selectedYAxisMetric,
+      gpuCount: stableGpus.length,
+    });
 
     // Store the current values as the last calculated values before calculating
     const currentValues: { [gpuKey: string]: number } = {};
diff --git a/packages/app/src/components/inference/ui/CustomPowers.tsx b/packages/app/src/components/inference/ui/CustomPowers.tsx
index f87e89f..429900d 100644
--- a/packages/app/src/components/inference/ui/CustomPowers.tsx
+++ b/packages/app/src/components/inference/ui/CustomPowers.tsx
@@ -167,7 +167,10 @@ const CustomPowers = memo(({ loading }: { loading: boolean }) => {
 
   // Handle reset button click
   const handleReset = useCallback(() => {
-    track('inference_custom_powers_reset');
+    track('inference_custom_powers_reset', {
+      metric: selectedYAxisMetric,
+      gpuCount: stableGpus.length,
+    });
     const defaultInputs: { [gpuKey: string]: number } = {};
 
     stableGpus.forEach((gpu) => {
@@ -188,7 +191,10 @@ const CustomPowers = memo(({ loading }: { loading: boolean }) => {
     if (hasErrors) {
       return;
     }
-    track('inference_custom_powers_calculated');
+    track('inference_custom_powers_calculated', {
+      metric: selectedYAxisMetric,
+      gpuCount: stableGpus.length,
+    });
 
     // Store the current values as the last calculated values before calculating
     const currentValues: { [gpuKey: string]: number } = {};
diff --git a/packages/app/src/components/inference/ui/GPUGraph.tsx b/packages/app/src/components/inference/ui/GPUGraph.tsx
index 6c328a4..d172193 100644
--- a/packages/app/src/components/inference/ui/GPUGraph.tsx
+++ b/packages/app/src/components/inference/ui/GPUGraph.tsx
@@ -3,10 +3,12 @@
 import { track } from '@/lib/analytics';
 import * as d3 from 'd3';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useTheme } from 'next-themes';
 
 import { useInference } from '@/components/inference/InferenceContext';
 import ChartLegend from '@/components/ui/chart-legend';
-import { getColorFamily, getModelSortIndex, HARDWARE_CONFIG } from '@/lib/constants';
+import { getModelSortIndex, HARDWARE_CONFIG } from '@/lib/constants';
+import { generateGpuDateColors } from '@/lib/dynamic-colors';
 import { formatNumber, getDisplayLabel } from '@/lib/utils';
 import { useThemeColors } from '@/hooks/useThemeColors';
 import { D3Chart } from '@/lib/d3-chart/D3Chart';
@@ -31,11 +33,6 @@ import {
 
 const CHART_MARGIN = { top: 24, right: 10, bottom: 60, left: 60 };
 
-const getGPUColor = (hwKey: string, dateIndex: number): string => {
-  const colorFamily = getColorFamily(hwKey);
-  return colorFamily[dateIndex % colorFamily.length];
-};
-
 const GPUGraph = React.memo(
   ({ chartId, data, xLabel, yLabel, chartDefinition, caption }: ScatterGraphProps) => {
     const {
@@ -46,6 +43,7 @@ const GPUGraph = React.memo(
       selectedDateRange,
       selectedDates,
       toggleActiveDate,
+      removeActiveDate,
       activeDates,
       hideNonOptimal,
       setHideNonOptimal,
@@ -63,6 +61,7 @@ const GPUGraph = React.memo(
       shuffleColors,
       selectAllActiveDates,
     } = useInference();
+    const { resolvedTheme } = useTheme();
     const chartRef = useRef<D3ChartHandle>(null);
 
     // Shared date+GPU pairs
@@ -93,22 +92,33 @@ const GPUGraph = React.memo(
       colorShuffleSeed,
     });
 
+    // Dynamic GPU×date color map
+    const gpuDateColorMap = useMemo(() => {
+      const { dates, sortedGPUs } = gpuDatePairs;
+      if (sortedGPUs.length === 0 || dates.length === 0) return {};
+      const theme = resolvedTheme === 'dark' ? 'dark' : 'light';
+      return generateGpuDateColors(sortedGPUs, dates.length, theme);
+    }, [gpuDatePairs, resolvedTheme]);
+
     const allGraphs = useMemo(() => {
       const { dates, sortedGPUs } = gpuDatePairs;
       const result: { date: string; color: string; hwKey: string; id: string }[] = [];
       sortedGPUs.forEach((gpu) => {
         dates.forEach((date, dateIndex) => {
           const id = `${date}_${gpu}`;
+          const dynamicColor = gpuDateColorMap[`${dateIndex}_${gpu}`];
           result.push({
             date,
             hwKey: gpu,
             id,
-            color: highContrast ? getCssColor(resolveColor(id)) : getGPUColor(gpu, dateIndex),
+            color: highContrast
+              ? getCssColor(resolveColor(id))
+              : dynamicColor || 'var(--foreground)',
           });
         });
       });
       return result;
-    }, [gpuDatePairs, highContrast, resolveColor, getCssColor]);
+    }, [gpuDatePairs, gpuDateColorMap, highContrast, resolveColor, getCssColor]);
 
     const groupedData = useMemo(
       () =>
@@ -401,6 +411,7 @@ const GPUGraph = React.memo(
             disableActiveSort={true}
             onItemHover={handleLegendHover}
             onItemHoverEnd={handleLegendHoverEnd}
+            onItemRemove={removeActiveDate}
             legendItems={allGraphs
               .filter(({ id }) => idsWithData.has(id))
               .map(({ date, color, hwKey, id }) => ({
@@ -436,7 +447,7 @@ const GPUGraph = React.memo(
                 checked: highContrast,
                 onCheckedChange: (c) => {
                   setHighContrast(c);
-                  track('gpu_timeseries_high_contrast_toggled', { enabled: c });
+                  track('interactivity_high_contrast_toggled', { enabled: c });
                 },
               },
               {
@@ -467,26 +478,29 @@ const GPUGraph = React.memo(
                 },
               },
             ]}
-            actions={
-              highContrast
+            actions={[
+              ...(highContrast
                 ? [
                     {
                       id: 'gpu-shuffle-colors',
                       label: 'Shuffle Colors',
                       onClick: () => {
                         shuffleColors();
-                        track('gpu_timeseries_shuffle_colors');
+                        track('interactivity_shuffle_colors');
                       },
                     },
                   ]
-                : undefined
-            }
+                : []),
+              {
+                id: 'gpu-reset-filter',
+                label: 'Reset filter',
+                onClick: () => {
+                  selectAllActiveDates();
+                  track('gpu_timeseries_reset_filter');
+                },
+              },
+            ]}
             showFpShapeIndicators={selectedPrecisions.length > 1}
-            showResetFilter={true}
-            onResetFilter={() => {
-              selectAllActiveDates();
-              track('gpu_timeseries_reset_filter');
-            }}
           />
         }
       />
diff --git a/packages/app/src/components/inference/ui/ScatterGraph.tsx b/packages/app/src/components/inference/ui/ScatterGraph.tsx
index 59c05ff..05174cf 100644
--- a/packages/app/src/components/inference/ui/ScatterGraph.tsx
+++ b/packages/app/src/components/inference/ui/ScatterGraph.tsx
@@ -51,6 +51,7 @@ import {
   computeParetoPointLabels,
   computeGradientStops,
   PARETO_LABEL_COLORS,
+  buildGradientColorMap,
 } from '@/components/inference/utils/paretoLabels';
 
 // X-shape path for overlay (unofficial) data points
@@ -85,6 +86,7 @@ const ScatterGraph = React.memo(
       activeHwTypes,
       hardwareConfig: contextHardwareConfig,
       toggleHwType,
+      removeHwType,
       hwTypesWithData,
       selectedPrecisions,
       selectedYAxisMetric,
@@ -169,11 +171,20 @@ const ScatterGraph = React.memo(
 
     // --- Theme ---
     const hardwareConfig = hardwareConfigOverride || contextHardwareConfig;
-    const hwKeys = useMemo(() => Object.keys(hardwareConfig), [hardwareConfig]);
+    const activeHwKeys = useMemo(() => {
+      const keys = [...effectiveOfficialHwTypes];
+      activeOverlayHwTypes.forEach((k) => keys.push(`overlay:${k}`));
+      return keys;
+    }, [effectiveOfficialHwTypes, activeOverlayHwTypes]);
+    const activeOfficialKeys = useMemo(
+      () => [...effectiveOfficialHwTypes],
+      [effectiveOfficialHwTypes],
+    );
     const { resolveColor, getCssColor } = useThemeColors({
       highContrast,
-      identifiers: hwKeys,
+      identifiers: activeHwKeys,
       colorShuffleSeed,
+      activeKeys: activeOfficialKeys,
     });
 
     // --- Changelog ---
@@ -367,6 +378,12 @@ const ScatterGraph = React.memo(
       return result;
     }, [rooflines]);
 
+    // Point → gradient color lookup (for coloring points by parallelism strategy)
+    const gradientColorByPoint = useMemo(
+      () => buildGradientColorMap(allPointLabelsByKey),
+      [allPointLabelsByKey],
+    );
+
     // Ref for trackedConfigIds (needs to be current at event time inside D3 handlers)
     const trackedConfigIdsRef = useRef(trackedConfigIds);
     trackedConfigIdsRef.current = trackedConfigIds;
@@ -906,7 +923,9 @@ const ScatterGraph = React.memo(
         key: 'points',
         data: pointsData,
         config: {
-          getColor: (d) => getCssColor(resolveColor(d.hwKey as string)),
+          getColor: (d) =>
+            (showGradientLabels && gradientColorByPoint.get(d)) ||
+            getCssColor(resolveColor(d.hwKey as string)),
           getOpacity: (d) => (isPointVisible(d) ? 1 : 0),
           getPointerEvents: (d) => (isPointVisible(d) ? 'auto' : 'none'),
           hideLabels: hidePointLabels || showGradientLabels,
@@ -949,9 +968,7 @@ const ScatterGraph = React.memo(
                   ovEntries.push({
                     key,
                     points: pts,
-                    stroke: hardwareConfig[hw]
-                      ? getCssColor(resolveColor(hw))
-                      : getCssColor(hwCfg.color),
+                    stroke: getCssColor(resolveColor(hw)),
                   });
                 }
               });
@@ -998,12 +1015,9 @@ const ScatterGraph = React.memo(
                 });
 
               overlayPoints.attr('transform', (d) => `translate(${xScale(d.x)},${yScale(d.y)})`);
-              overlayPoints.select('.overlay-x').attr('stroke', (d) => {
-                const hwCfg = overlayData.hardwareConfig[d.hwKey as string];
-                return hardwareConfig[d.hwKey as string]
-                  ? getCssColor(resolveColor(d.hwKey as string))
-                  : getCssColor(hwCfg?.color ?? '#888');
-              });
+              overlayPoints
+                .select('.overlay-x')
+                .attr('stroke', (d) => getCssColor(resolveColor(d.hwKey as string)));
 
               // Labels
               const showLabels = !hidePointLabels && !showGradientLabels;
@@ -1134,6 +1148,7 @@ const ScatterGraph = React.memo(
       rooflines,
       allPointLabelsByKey,
       showGradientLabels,
+      gradientColorByPoint,
       chartId,
       effectiveActiveHwTypes,
       selectedPrecisions,
@@ -1171,7 +1186,7 @@ const ScatterGraph = React.memo(
             .attr('class', 'tracked-ring')
             .attr('r', POINT_SIZE + 5)
             .attr('fill', 'none')
-            .attr('stroke', hardwareConfig[d.hwKey]?.color || '#888')
+            .attr('stroke', getCssColor(resolveColor(d.hwKey)))
             .attr('stroke-width', 2)
             .attr('opacity', 0.7)
             .attr('pointer-events', 'none');
@@ -1197,7 +1212,7 @@ const ScatterGraph = React.memo(
               .attr('class', 'tracked-ring')
               .attr('r', POINT_SIZE + 5)
               .attr('fill', 'none')
-              .attr('stroke', hardwareConfig[d.hwKey]?.color || '#888')
+              .attr('stroke', getCssColor(resolveColor(d.hwKey)))
               .attr('stroke-width', 2)
               .attr('opacity', 0.7)
               .attr('pointer-events', 'none');
@@ -1328,6 +1343,7 @@ const ScatterGraph = React.memo(
             variant="sidebar"
             onItemHover={handleLegendHover}
             onItemHoverEnd={handleLegendHoverEnd}
+            onItemRemove={showAllHardwareTypes ? undefined : removeHwType}
             legendItems={[
               ...(overlayData
                 ? Object.entries(overlayData.hardwareConfig)
@@ -1341,7 +1357,7 @@ const ScatterGraph = React.memo(
                       return {
                         name: `✕ ${key}`,
                         label: `✕ ${parsed.label}`,
-                        color: hardwareConfig[key] ? resolveColor(key) : hwConfig.color,
+                        color: resolveColor(key),
                         title: `UNOFFICIAL: ${hwConfig.framework || parsed.label}`,
                         isHighlighted: true,
                         hw: `overlay-${key}`,
@@ -1459,8 +1475,8 @@ const ScatterGraph = React.memo(
                 },
               },
             ]}
-            actions={
-              highContrast
+            actions={[
+              ...(highContrast
                 ? [
                     {
                       id: 'scatter-shuffle-colors',
@@ -1471,20 +1487,24 @@ const ScatterGraph = React.memo(
                       },
                     },
                   ]
-                : undefined
-            }
+                : []),
+              ...(effectiveOfficialHwTypes.size < hwTypesWithData.size ||
+              activeOverlayHwTypes.size < allOverlayHwTypes.size
+                ? [
+                    {
+                      id: 'scatter-reset-filter',
+                      label: 'Reset filter',
+                      onClick: () => {
+                        selectAllHwTypes();
+                        setLocalOfficialOverride(null);
+                        resetOverlayHwTypes();
+                        track('latency_legend_filter_reset');
+                      },
+                    },
+                  ]
+                : []),
+            ]}
             showFpShapeIndicators={selectedPrecisions.length > 1}
-            showResetFilter={true}
-            allSelected={
-              effectiveOfficialHwTypes.size === hwTypesWithData.size &&
-              activeOverlayHwTypes.size === allOverlayHwTypes.size
-            }
-            onResetFilter={() => {
-              selectAllHwTypes();
-              setLocalOfficialOverride(null);
-              resetOverlayHwTypes();
-              track('latency_legend_filter_reset');
-            }}
             enableTooltips={true}
           />
         }
diff --git a/packages/app/src/components/inference/ui/WorkflowInfoDisplay.tsx b/packages/app/src/components/inference/ui/WorkflowInfoDisplay.tsx
index f48e6f5..f854d60 100644
--- a/packages/app/src/components/inference/ui/WorkflowInfoDisplay.tsx
+++ b/packages/app/src/components/inference/ui/WorkflowInfoDisplay.tsx
@@ -79,14 +79,17 @@ export default function WorkflowInfoDisplay({
 
   const handleGoPreviousRun = () => {
     if (canGoPreviousRun()) {
-      track('inference_run_previous');
+      track('inference_run_previous', {
+        toRun: runIds[currentRunIndex - 1],
+        totalRuns: runIds.length,
+      });
       setSelectedRunId(runIds[currentRunIndex - 1]);
     }
   };
 
   const handleGoNextRun = () => {
     if (canGoNextRun()) {
-      track('inference_run_next');
+      track('inference_run_next', { toRun: runIds[currentRunIndex + 1], totalRuns: runIds.length });
       setSelectedRunId(runIds[currentRunIndex + 1]);
     }
   };
@@ -121,7 +124,7 @@ export default function WorkflowInfoDisplay({
   })();
 
   return (
-    <div className="flex flex-col lg:flex-row gap-2 lg:gap-4 text-muted-foreground">
+    <div className="flex flex-wrap gap-2 lg:gap-4 text-muted-foreground">
       {/* <div className="flex items-center gap-2">
         <CalendarRange size={16} />
         <strong>Run Date:</strong> {workflowInfo[0].run_date} UTC
@@ -152,7 +155,7 @@ export default function WorkflowInfoDisplay({
           >
             <SelectTrigger
               id="run-select"
-              className="w-full border-0 shadow-none font-bold [&_[data-external-link]_svg]:pointer-events-auto"
+              className="w-full border-0 shadow-none font-bold px-4 hover:bg-accent hover:text-accent-foreground dark:bg-input/90 dark:hover:bg-input/50 rounded-md transition-colors [&_[data-external-link]_svg]:pointer-events-auto"
               onPointerDown={(e) => {
                 const target = e.target as HTMLElement;
                 if (target.closest('[data-external-link]')) {
@@ -209,53 +212,57 @@ export default function WorkflowInfoDisplay({
           </Button>
         </div>
       ) : null}
-      {changelog && (
-        <div>
-          <Popover>
-            <PopoverTrigger asChild>
-              <Button variant="ghost">
-                <strong>Changelog</strong>
-                <ChevronDownIcon />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-[400px]">
-              <div className="break-words">
-                {changelog.entries.length > 0 ? (
-                  <>
-                    {changelog.entries.map((entry, index) => (
-                      <div key={index}>
-                        {index > 0 && <hr className="my-3" />}
-                        <div className="flex flex-col gap-2 text-xs line-break-words">
-                          <div className="text-xs font-bold">Description</div>
-                          {formatChangelogDescription(entry.description)}
-                          <div className="text-xs font-bold">Updated Configs</div>
-                          <ul className="list-disc pl-4">
-                            {entry.config_keys.map((key: string) => (
-                              <li key={key}>{formatConfigKeys(key)}</li>
-                            ))}
-                          </ul>
-                        </div>
+      <div>
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="ghost" className="!px-4 dark:bg-input/90 dark:hover:bg-input/50">
+              <strong>Changelog</strong>
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-[400px]">
+            <div className="break-words">
+              {changelog && changelog.entries.length > 0 ? (
+                <>
+                  {changelog.entries.map((entry, index) => (
+                    <div key={index}>
+                      {index > 0 && <hr className="my-3" />}
+                      <div className="flex flex-col gap-2 text-xs line-break-words">
+                        <div className="text-xs font-bold">Description</div>
+                        {formatChangelogDescription(entry.description)}
+                        <div className="text-xs font-bold">Updated Configs</div>
+                        <ul className="list-disc pl-4">
+                          {entry.config_keys.map((key: string) => (
+                            <li key={key}>{formatConfigKeys(key)}</li>
+                          ))}
+                        </ul>
                       </div>
-                    ))}
-                    {changelog.entries[0]?.head_ref && (
-                      <a
-                        href={`https://github.com/SemiAnalysisAI/InferenceX/commit/${changelog.entries[0].head_ref}`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-xs hover:underline text-foreground underline"
-                      >
-                        Git Commit
-                      </a>
-                    )}
-                  </>
-                ) : (
-                  'No runs found'
-                )}
-              </div>
-            </PopoverContent>
-          </Popover>
-        </div>
-      )}
+                    </div>
+                  ))}
+                  {changelog.entries[0]?.head_ref && (
+                    <a
+                      href={`https://github.com/SemiAnalysisAI/InferenceX/commit/${changelog.entries[0].head_ref}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-xs hover:underline text-foreground underline"
+                    >
+                      Git Commit
+                    </a>
+                  )}
+                </>
+              ) : (
+                <div className="flex flex-col gap-2 text-xs">
+                  <div className="text-xs font-bold">Description</div>
+                  <span className="text-muted-foreground">No changelog data available.</span>
+                  <span className="text-muted-foreground">
+                    This date predates changelog tracking.
+                  </span>
+                </div>
+              )}
+            </div>
+          </PopoverContent>
+        </Popover>
+      </div>
     </div>
   );
 }
diff --git a/packages/app/src/components/inference/utils.test.ts b/packages/app/src/components/inference/utils.test.ts
index 52ed24d..e9d2b6d 100644
--- a/packages/app/src/components/inference/utils.test.ts
+++ b/packages/app/src/components/inference/utils.test.ts
@@ -1,11 +1,7 @@
 import { describe, it, expect } from 'vitest';
 
 import type { ChartDefinition, InferenceData } from '@/components/inference/types';
-import {
-  filterDataByCostLimit,
-  filterDataByLatencyLimit,
-  processOverlayChartData,
-} from '@/components/inference/utils';
+import { filterDataByCostLimit, processOverlayChartData } from '@/components/inference/utils';
 
 // ---------------------------------------------------------------------------
 // fixture factories
@@ -137,51 +133,6 @@ describe('filterDataByCostLimit', () => {
   });
 });
 
-// ===========================================================================
-// filterDataByLatencyLimit
-// ===========================================================================
-describe('filterDataByLatencyLimit', () => {
-  it('returns data unchanged when chartType is not "e2e"', () => {
-    const data = [pt({ x: 100 }), pt({ x: 200 })];
-    const def = chartDef({ chartType: 'interactivity', y_latency_limit: 50 });
-    expect(filterDataByLatencyLimit(data, def)).toHaveLength(2);
-  });
-
-  it('returns data unchanged when chartType is "e2e" but y_latency_limit is absent', () => {
-    const data = [pt({ x: 100 }), pt({ x: 200 })];
-    const def = chartDef({ chartType: 'e2e' }); // no y_latency_limit
-    expect(filterDataByLatencyLimit(data, def)).toHaveLength(2);
-  });
-
-  it('filters out points where x > y_latency_limit', () => {
-    const data = [pt({ x: 50 }), pt({ x: 150 }), pt({ x: 200 })];
-    const def = chartDef({ chartType: 'e2e', y_latency_limit: 100 });
-    const result = filterDataByLatencyLimit(data, def);
-    expect(result).toHaveLength(1);
-    expect(result[0].x).toBe(50);
-  });
-
-  it('includes points where x === y_latency_limit (boundary is inclusive)', () => {
-    const data = [pt({ x: 100 }), pt({ x: 101 })];
-    const def = chartDef({ chartType: 'e2e', y_latency_limit: 100 });
-    const result = filterDataByLatencyLimit(data, def);
-    expect(result).toHaveLength(1);
-    expect(result[0].x).toBe(100);
-  });
-
-  it('returns empty array when all points exceed the latency limit', () => {
-    const data = [pt({ x: 500 }), pt({ x: 1000 })];
-    const def = chartDef({ chartType: 'e2e', y_latency_limit: 100 });
-    expect(filterDataByLatencyLimit(data, def)).toHaveLength(0);
-  });
-
-  it('returns all points when all are within the latency limit', () => {
-    const data = [pt({ x: 10 }), pt({ x: 50 }), pt({ x: 99 })];
-    const def = chartDef({ chartType: 'e2e', y_latency_limit: 100 });
-    expect(filterDataByLatencyLimit(data, def)).toHaveLength(3);
-  });
-});
-
 // ===========================================================================
 // processOverlayChartData
 // ===========================================================================
diff --git a/packages/app/src/components/inference/utils.ts b/packages/app/src/components/inference/utils.ts
index 853703b..df87388 100644
--- a/packages/app/src/components/inference/utils.ts
+++ b/packages/app/src/components/inference/utils.ts
@@ -64,29 +64,6 @@ export const filterDataByCostLimit = (
   });
 };
 
-/**
- * Filters data points based on latency limits defined in the chart definition.
- * Only applies filtering for latency-related metrics.
- *
- * @param {InferenceData[]} data - The data points to filter
- * @param {ChartDefinition} chartDefinition - The chart definition containing latency limits
- * @param {string} selectedYAxisMetric - The currently selected Y-axis metric
- * @returns {InferenceData[]} The filtered data points
- */
-export const filterDataByLatencyLimit = (
-  data: InferenceData[],
-  chartDefinition: ChartDefinition,
-): InferenceData[] => {
-  // Only apply filtering for latency-related metrics
-  const isLatencyMetric = chartDefinition.chartType === 'e2e';
-
-  if (!isLatencyMetric || !chartDefinition.y_latency_limit) {
-    return data;
-  }
-
-  return data.filter((point) => point.x <= chartDefinition.y_latency_limit!);
-};
-
 /**
  * Process overlay (unofficial run) data to match the same pipeline as official data.
  *
diff --git a/packages/app/src/components/inference/utils/pareto-labels.test.ts b/packages/app/src/components/inference/utils/pareto-labels.test.ts
index ad465be..c2fa7c4 100644
--- a/packages/app/src/components/inference/utils/pareto-labels.test.ts
+++ b/packages/app/src/components/inference/utils/pareto-labels.test.ts
@@ -7,6 +7,7 @@ import {
   computeParetoPointLabels,
   computeGradientStops,
   PARETO_LABEL_COLORS,
+  buildGradientColorMap,
   type ParetoPointLabel,
 } from './paretoLabels';
 
@@ -301,3 +302,30 @@ describe('PARETO_LABEL_COLORS', () => {
     }
   });
 });
+
+// ===========================================================================
+// buildGradientColorMap
+// ===========================================================================
+describe('buildGradientColorMap', () => {
+  const ptA = { tp: 4 } as InferenceData;
+  const ptB = { tp: 8 } as InferenceData;
+  const ptC = { tp: 16 } as InferenceData;
+
+  it('maps each point reference to its gradient color', () => {
+    const labelsByKey: Record<string, ParetoPointLabel[]> = {
+      h200_trt_fp8: [
+        { point: ptA, label: 'TP4', color: '#aaa' },
+        { point: ptB, label: 'TP8', color: '#bbb' },
+      ],
+      b200_trt_fp8: [{ point: ptC, label: 'TP16', color: '#ccc' }],
+    };
+    const map = buildGradientColorMap(labelsByKey);
+    expect(map.get(ptA)).toBe('#aaa');
+    expect(map.get(ptB)).toBe('#bbb');
+    expect(map.get(ptC)).toBe('#ccc');
+  });
+
+  it('returns empty map for empty input', () => {
+    expect(buildGradientColorMap({}).size).toBe(0);
+  });
+});
diff --git a/packages/app/src/components/inference/utils/paretoLabels.ts b/packages/app/src/components/inference/utils/paretoLabels.ts
index eddf7ee..b48daaf 100644
--- a/packages/app/src/components/inference/utils/paretoLabels.ts
+++ b/packages/app/src/components/inference/utils/paretoLabels.ts
@@ -82,6 +82,22 @@ export const computeParetoPointLabels = (
   });
 };
 
+/**
+ * Builds a lookup from data point reference → gradient label color.
+ * Used to color scatter points by their parallelism strategy when gradient labels are enabled.
+ */
+export const buildGradientColorMap = (
+  labelsByKey: Record<string, ParetoPointLabel[]>,
+): Map<InferenceData, string> => {
+  const map = new Map<InferenceData, string>();
+  for (const labels of Object.values(labelsByKey)) {
+    for (const { point, color } of labels) {
+      map.set(point, color);
+    }
+  }
+  return map;
+};
+
 /**
  * Builds SVG gradient stops for a roofline path, coloring each segment
  * by its parallelism strategy. Uses the ±0.5-to-neighbor territory rule
diff --git a/packages/app/src/components/intro-section.tsx b/packages/app/src/components/intro-section.tsx
index eac5630..44ff028 100644
--- a/packages/app/src/components/intro-section.tsx
+++ b/packages/app/src/components/intro-section.tsx
@@ -1,84 +1,30 @@
+import { Quote } from 'lucide-react';
+
 import { Card } from '@/components/ui/card';
 import { QuoteCarousel } from '@/components/quote-carousel';
-import { QUOTES } from '@/components/quotes/quotes-data';
+import { QUOTES, CAROUSEL_ORGS, CAROUSEL_LABELS } from '@/components/quotes/quotes-data';
+
+const carouselQuotes = QUOTES.filter((q) => (CAROUSEL_ORGS as readonly string[]).includes(q.org));
+
+const CAROUSEL_OVERRIDES = {
+  order: ['OpenAI'] as string[],
+  labels: CAROUSEL_LABELS,
+};
 
 export function IntroSection() {
   return (
     <section>
       <Card data-testid="intro-section">
-        <h2 data-testid="intro-heading" className="text-lg font-semibold mb-2">
-          Open Source Continuous Inference Benchmark trusted by Operators of Trillion Dollar
-          GigaWatt Scale Token Factories
-        </h2>
-        <p className="text-muted-foreground mb-2">
-          As the world progresses exponentially towards AGI, software development and model releases
-          move at the speed of light. Existing benchmarks rapidly become obsolete due to their
-          static nature, and participants often submit software images purpose-built for the
-          benchmark itself which do not reflect real world performance.
-        </p>
-        <p className="text-muted-foreground mb-2">
-          <strong>InferenceX&trade;</strong> (formerly InferenceMAX) is our independent, vendor
-          neutral, reproducible benchmark which addresses these issues by continuously benchmarking
-          inference software across a wide range of AI accelerators that are actually available to
-          the ML community.
-        </p>
-        <p className="text-muted-foreground">
-          Our open data & insights are widely adopted by the ML community, capacity planning
-          strategy teams at trillion dollar token factories & AI Labs & at multiple billion dollar
-          NeoClouds. Learn more in our articles:{' '}
-          <a
-            data-testid="intro-link-v1"
-            href="https://newsletter.semianalysis.com/p/inferencemax-open-source-inference"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-brand hover:underline font-medium"
-          >
-            v1
-          </a>
-          ,{' '}
-          <a
-            data-testid="intro-link-v2"
-            href="https://newsletter.semianalysis.com/p/inferencex-v2-nvidia-blackwell-vs"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-brand hover:underline font-medium"
-          >
-            v2
-          </a>
-          .
-        </p>
-        <div className="mt-4 pt-4 border-t border-foreground">
+        <div className="flex items-center gap-2 mb-4">
+          <Quote className="h-5 w-5 text-brand" />
+          <h2 className="text-lg font-semibold">
+            Open Source Continuous Inference Benchmark Trusted by GigaWatt Token Factories
+          </h2>
+        </div>
+        <div>
           <QuoteCarousel
-            quotes={QUOTES.filter((q) =>
-              [
-                'OpenAI',
-                'Microsoft',
-                'Together AI',
-                'vLLM',
-                'GPU Mode',
-                'PyTorch Foundation',
-                'Oracle',
-                'CoreWeave',
-                'Nebius',
-                'Crusoe',
-                'TensorWave',
-                'SGLang',
-                'WEKA',
-                'Stanford',
-                'Core42',
-                'Meta Superintelligence Labs',
-                'Hugging Face',
-                'UC Berkeley',
-                'Lambda',
-              ].includes(q.org),
-            )}
-            overrides={{
-              order: ['OpenAI'],
-              labels: {
-                'Together AI': 'Tri Dao',
-                'PyTorch Foundation': 'PyTorch',
-              },
-            }}
+            quotes={carouselQuotes}
+            overrides={CAROUSEL_OVERRIDES}
             moreHref="/quotes"
           />
         </div>
diff --git a/packages/app/src/components/landing/curated-view-card.tsx b/packages/app/src/components/landing/curated-view-card.tsx
new file mode 100644
index 0000000..d8e0347
--- /dev/null
+++ b/packages/app/src/components/landing/curated-view-card.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import { ArrowRight } from 'lucide-react';
+
+import { Badge } from '@/components/ui/badge';
+import { track } from '@/lib/analytics';
+import type { FavoritePreset } from '@/components/favorites/favorite-presets';
+
+export function CuratedViewCard({ preset }: { preset: FavoritePreset }) {
+  return (
+    <a
+      href={`/inference?preset=${preset.id}`}
+      onClick={() =>
+        track('landing_curated_view_clicked', {
+          preset_id: preset.id,
+          preset_title: preset.title,
+        })
+      }
+      className="group relative flex flex-col rounded-xl border border-border bg-background/20 backdrop-blur-[2px] p-5 transition-all duration-200 hover:border-brand/50 hover:shadow-lg hover:shadow-brand/5 hover:scale-[1.01]"
+      data-testid={`curated-view-${preset.id}`}
+    >
+      <div className="absolute inset-y-3 left-0 w-0.5 rounded-full bg-brand/60 transition-all duration-200 group-hover:bg-brand group-hover:inset-y-2" />
+      <div className="flex items-start justify-between gap-2">
+        <h3 className="font-semibold text-sm leading-tight group-hover:text-brand transition-colors duration-200">
+          {preset.title}
+        </h3>
+        <ArrowRight className="h-4 w-4 shrink-0 text-muted-foreground transition-all duration-200 group-hover:translate-x-0.5 group-hover:text-brand" />
+      </div>
+      <p className="text-xs text-muted-foreground leading-relaxed mt-1.5 line-clamp-2">
+        {preset.description}
+      </p>
+      <div className="flex flex-wrap gap-1.5 mt-auto pt-3">
+        {preset.tags.map((tag) => (
+          <Badge
+            key={tag}
+            variant="outline"
+            className="text-[10px] px-2 py-0.5 leading-tight border-border/60 text-muted-foreground group-hover:border-brand/30 group-hover:text-foreground/80 transition-colors duration-200"
+          >
+            {tag}
+          </Badge>
+        ))}
+      </div>
+    </a>
+  );
+}
diff --git a/packages/app/src/components/landing/landing-page.tsx b/packages/app/src/components/landing/landing-page.tsx
new file mode 100644
index 0000000..8caa298
--- /dev/null
+++ b/packages/app/src/components/landing/landing-page.tsx
@@ -0,0 +1,72 @@
+'use client';
+
+import { ArrowRight, BarChart3, Sparkles } from 'lucide-react';
+import { useEffect } from 'react';
+
+import { Card } from '@/components/ui/card';
+import { GitHubStarModal } from '@/components/github-star-modal';
+import { IntroSection } from '@/components/intro-section';
+import { CuratedViewCard } from '@/components/landing/curated-view-card';
+import { FAVORITE_PRESETS } from '@/components/favorites/favorite-presets';
+import { track } from '@/lib/analytics';
+
+export function LandingPage() {
+  useEffect(() => {
+    track('landing_page_viewed');
+  }, []);
+
+  return (
+    <main className="relative">
+      <GitHubStarModal />
+      <div className="container mx-auto px-4 lg:px-8 flex flex-col gap-6 lg:gap-4">
+        <IntroSection />
+
+        {/* Split: Dashboard vs Presets */}
+        <section className="flex flex-col gap-4 pb-8">
+          {/* Left - Full Dashboard */}
+          <Card>
+            <div className="flex items-center gap-2 mb-3">
+              <BarChart3 className="h-5 w-5 text-brand" />
+              <h2 className="text-lg font-semibold">Full Dashboard</h2>
+            </div>
+            <p className="text-sm text-muted-foreground mb-2">
+              Every model, GPU, framework, and metric. Fully configurable inference benchmark charts
+              with date ranges, concurrency sweeps, and raw data export.
+            </p>
+            <p className="text-sm text-muted-foreground mb-6">
+              Compare NVIDIA GB200, B200, H200, AMD MI355X, MI325X, MI300X and more across DeepSeek,
+              Llama, Qwen, and other models.
+            </p>
+            <div className="mt-auto">
+              <a
+                href="/inference"
+                onClick={() => track('landing_full_dashboard_clicked')}
+                className="inline-flex items-center justify-center gap-2 rounded-md text-sm sm:text-base font-medium h-12 px-8 bg-brand text-primary-foreground hover:bg-brand/90 transition-colors"
+              >
+                Open Dashboard
+                <ArrowRight className="h-4 w-4" />
+              </a>
+            </div>
+          </Card>
+
+          {/* Right - Curated Presets */}
+          <Card>
+            <div className="flex items-center gap-2 mb-3">
+              <Sparkles className="h-5 w-5 text-brand" />
+              <h2 className="text-lg font-semibold">Quick Comparisons</h2>
+            </div>
+            <p className="text-sm text-muted-foreground mb-4">
+              Jump straight into the most popular GPU inference benchmark comparisons, curated and
+              ready to explore.
+            </p>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              {FAVORITE_PRESETS.map((preset) => (
+                <CuratedViewCard key={preset.id} preset={preset} />
+              ))}
+            </div>
+          </Card>
+        </section>
+      </div>
+    </main>
+  );
+}
diff --git a/packages/app/src/components/media/media-content.tsx b/packages/app/src/components/media/media-content.tsx
index c4080bc..c04c30b 100644
--- a/packages/app/src/components/media/media-content.tsx
+++ b/packages/app/src/components/media/media-content.tsx
@@ -15,71 +15,58 @@ function MediaCard({ title, organization, url, type, date }: MediaItem) {
   });
 
   return (
-    <Card className="p-3 sm:p-5 lg:p-6 transition-colors hover:bg-card">
-      <div className="space-y-1.5 sm:space-y-2">
-        {/* Desktop */}
-        <div className="hidden sm:flex items-center gap-2 text-sm text-muted-foreground">
-          <span>{formattedDate}</span>
-          <span>&middot;</span>
-          <span className="font-semibold text-foreground">{organization}</span>
-          <span>&middot;</span>
-          <span className="inline-flex items-center rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
-            {type.charAt(0).toUpperCase() + type.slice(1)}
-          </span>
-        </div>
-        {/* Mobile */}
-        <div className="sm:hidden text-sm text-muted-foreground">
-          <span>{formattedDate}</span>
-          <div className="flex items-center gap-2">
-            <span className="font-semibold text-foreground">{organization}</span>
-            <span className="inline-flex items-center rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
-              {type.charAt(0).toUpperCase() + type.slice(1)}
-            </span>
-          </div>
-        </div>
-        <a
-          href={url}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="group block"
-          onClick={() =>
-            track('media_link_clicked', {
-              organization,
-              type,
-            })
-          }
-        >
-          <h3 className="text-sm sm:text-base lg:text-lg font-medium leading-snug text-foreground group-hover:text-primary transition-colors italic group-hover:underline">
-            &ldquo;{title}&rdquo;
-            <ExternalLinkIcon />
-          </h3>
-        </a>
+    <article>
+      <div className="flex items-center gap-2 text-sm text-muted-foreground mb-2">
+        <time dateTime={date}>{formattedDate}</time>
+        <span>&middot;</span>
+        <span className="font-semibold text-foreground">{organization}</span>
+        <span>&middot;</span>
+        <span className="inline-flex items-center rounded-full bg-muted px-3 py-0.5 text-xs text-muted-foreground">
+          {type.charAt(0).toUpperCase() + type.slice(1)}
+        </span>
       </div>
-    </Card>
+      <a
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="group block"
+        onClick={() =>
+          track('media_link_clicked', {
+            organization,
+            type,
+          })
+        }
+      >
+        <h3 className="text-base lg:text-lg font-medium leading-snug text-foreground group-hover:text-brand group-hover:underline transition-colors">
+          &ldquo;{title}&rdquo;
+          <ExternalLinkIcon />
+        </h3>
+      </a>
+    </article>
   );
 }
 
 export function MediaContent() {
   return (
     <main className="relative">
-      <div className="container mx-auto px-4 lg:px-8 flex flex-col gap-16 lg:gap-4">
-        <section>
+      <div className="container mx-auto px-4 lg:px-8 flex flex-col gap-4">
+        <section className="flex flex-col gap-4">
           <Card>
             <h2 className="text-2xl lg:text-4xl font-bold tracking-tight">
               InferenceX&trade; In the Media
             </h2>
             <p className="mt-3 text-base lg:text-lg text-muted-foreground">
-              Coverage and mentions of InferenceX&trade; (formerly InferenceMAX) across industry
-              publications, blogs, and media outlets.
+              Coverage and mentions of InferenceX&trade; across industry publications, blogs, and
+              media outlets.
             </p>
-          </Card>
-          <Card>
-            <div className="flex flex-col gap-3 md:pl-6">
-              {[...MEDIA_ITEMS]
-                .sort((a, b) => b.date.localeCompare(a.date))
-                .map((item) => (
-                  <MediaCard key={item.url} {...item} />
-                ))}
+            <div className="mt-6 pt-6 border-t border-border/40">
+              <div className="flex flex-col gap-8">
+                {[...MEDIA_ITEMS]
+                  .sort((a, b) => b.date.localeCompare(a.date))
+                  .map((item) => (
+                    <MediaCard key={item.url} {...item} />
+                  ))}
+              </div>
             </div>
           </Card>
         </section>
diff --git a/packages/app/src/components/quote-carousel.tsx b/packages/app/src/components/quote-carousel.tsx
index 5f5e048..1d90568 100644
--- a/packages/app/src/components/quote-carousel.tsx
+++ b/packages/app/src/components/quote-carousel.tsx
@@ -107,6 +107,7 @@ export function QuoteCarousel({
   const [activeIndex, setActiveIndex] = useState(0);
   const [fading, setFading] = useState(false);
   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const hovering = useRef(false);
 
   // Build shuffled org order on mount (client only)
   useEffect(() => {
@@ -114,6 +115,7 @@ export function QuoteCarousel({
   }, [quotes, order]);
 
   const advance = useCallback(() => {
+    if (hovering.current) return;
     setFading(true);
     setTimeout(() => {
       setActiveIndex((prev) => (prev + 1) % (entries.length || 1));
@@ -139,7 +141,10 @@ export function QuoteCarousel({
         setFading(false);
       }, 300);
       timerRef.current = setInterval(advance, intervalMs);
-      track('quote_carousel_navigated');
+      track('quote_carousel_navigated', {
+        toOrg: entries[index]?.org,
+        fromOrg: entries[activeIndex]?.org,
+      });
     },
     [advance, intervalMs],
   );
@@ -147,7 +152,15 @@ export function QuoteCarousel({
   if (entries.length === 0) return null;
 
   return (
-    <div className="flex flex-col gap-4">
+    <div
+      className="flex flex-col gap-4"
+      onMouseEnter={() => {
+        hovering.current = true;
+      }}
+      onMouseLeave={() => {
+        hovering.current = false;
+      }}
+    >
       {/* Org name strip */}
       <div className="flex flex-wrap justify-center gap-x-6 md:gap-x-8 gap-y-2 mx-4">
         {entries.map((e, i) => (
@@ -155,10 +168,8 @@ export function QuoteCarousel({
             key={e.org}
             type="button"
             onClick={() => goTo(i)}
-            className={`text-xs font-semibold tracking-wide uppercase transition-opacity duration-200 ${
-              i === activeIndex
-                ? 'opacity-100 text-foreground'
-                : 'opacity-60 text-muted-foreground hover:opacity-80'
+            className={`text-xs font-semibold tracking-wide uppercase transition-colors duration-200 ${
+              i === activeIndex ? 'text-foreground' : 'text-[#808488] hover:text-muted-foreground'
             }`}
           >
             {labels[e.org] ?? e.org}
@@ -183,7 +194,11 @@ export function QuoteCarousel({
 
       {moreHref && (
         <div className="flex justify-end">
-          <a href={moreHref} className="text-xs font-bold text-brand hover:underline">
+          <a
+            href={moreHref}
+            className="text-xs font-bold text-brand hover:underline"
+            onClick={() => track('quote_carousel_see_more_clicked')}
+          >
             See more supporters &rarr;
           </a>
         </div>
diff --git a/packages/app/src/components/quotes/quotes-content.tsx b/packages/app/src/components/quotes/quotes-content.tsx
index ecad8e4..10bffb2 100644
--- a/packages/app/src/components/quotes/quotes-content.tsx
+++ b/packages/app/src/components/quotes/quotes-content.tsx
@@ -7,6 +7,16 @@ import { ExternalLinkIcon } from '@/components/ui/external-link-icon';
 import { CompanyLogo, highlightBrand } from './quote-utils';
 import { QUOTES } from './quotes-data';
 
+/** Deduplicated logos from all quote orgs. */
+const orgLogos: { org: string; logo: string }[] = [];
+const seenOrgs = new Set<string>();
+for (const q of QUOTES) {
+  if (q.logo && !seenOrgs.has(q.org)) {
+    seenOrgs.add(q.org);
+    orgLogos.push({ org: q.org, logo: q.logo });
+  }
+}
+
 function QuoteCard({
   text,
   name,
@@ -56,32 +66,45 @@ function QuoteCard({
 export function QuotesContent() {
   return (
     <main className="relative">
-      <div className="container mx-auto px-4 lg:px-8 flex flex-col gap-16 lg:gap-4">
-        <section>
+      <div className="container mx-auto px-4 lg:px-8 flex flex-col gap-4">
+        <section className="flex flex-col gap-4">
           <Card>
             <h2 className="text-2xl lg:text-4xl font-bold tracking-tight">
               InferenceX&trade; Initiative Supporters
             </h2>
             <p className="mt-3 text-base lg:text-lg text-muted-foreground">
-              InferenceX&trade; (formerly InferenceMAX) initiative is supported by many major buyers
-              of compute and prominent members of the ML community including those from OpenAI,
-              Microsoft, vLLM, PyTorch Foundation, Oracle and more.
+              InferenceX&trade; initiative is supported by many major buyers of compute and
+              prominent members of the ML community including those from OpenAI, Microsoft, vLLM,
+              PyTorch Foundation, Oracle and more.
             </p>
-          </Card>
-          <Card>
-            <div className="flex flex-col gap-10 md:gap-12 mx-4 md:mx-8">
-              {QUOTES.map((quote) => (
-                <QuoteCard
-                  key={quote.name}
-                  text={quote.text}
-                  name={quote.name}
-                  title={quote.title}
-                  org={quote.org}
-                  logo={quote.logo}
-                  link={quote.link}
-                />
+            <div className="mt-6 flex flex-wrap items-center justify-center gap-2">
+              {orgLogos.map(({ org, logo }) => (
+                <div key={org} className="flex items-center justify-center h-10 px-2" title={org}>
+                  <img
+                    src={`/logos/${logo}`}
+                    alt={org}
+                    width={80}
+                    height={40}
+                    className="h-8 max-w-20 object-contain grayscale opacity-70 dark:invert"
+                  />
+                </div>
               ))}
             </div>
+            <div className="mt-6 pt-6 border-t border-border/40">
+              <div className="flex flex-col gap-10 md:gap-12">
+                {QUOTES.map((quote) => (
+                  <QuoteCard
+                    key={quote.name}
+                    text={quote.text}
+                    name={quote.name}
+                    title={quote.title}
+                    org={quote.org}
+                    logo={quote.logo}
+                    link={quote.link}
+                  />
+                ))}
+              </div>
+            </div>
           </Card>
         </section>
       </div>
diff --git a/packages/app/src/components/quotes/quotes-data.ts b/packages/app/src/components/quotes/quotes-data.ts
index a8cb544..1cf3977 100644
--- a/packages/app/src/components/quotes/quotes-data.ts
+++ b/packages/app/src/components/quotes/quotes-data.ts
@@ -310,3 +310,32 @@ export const QUOTES: Quote[] = [
     link: 'https://www.linkedin.com/in/sbalaban/',
   },
 ];
+
+/** Orgs featured in the landing page carousel. */
+export const CAROUSEL_ORGS = [
+  'OpenAI',
+  'Microsoft',
+  'Together AI',
+  'vLLM',
+  'GPU Mode',
+  'PyTorch Foundation',
+  'Oracle',
+  'CoreWeave',
+  'Nebius',
+  'Crusoe',
+  'TensorWave',
+  'SGLang',
+  'WEKA',
+  'Stanford',
+  'Core42',
+  'Meta Superintelligence Labs',
+  'Hugging Face',
+  'UC Berkeley',
+  'Lambda',
+] as const;
+
+/** Display label overrides for carousel orgs. */
+export const CAROUSEL_LABELS: Record<string, string> = {
+  'Together AI': 'Tri Dao',
+  'PyTorch Foundation': 'PyTorch',
+};
diff --git a/packages/app/src/components/reliability/ReliabilityContext.tsx b/packages/app/src/components/reliability/ReliabilityContext.tsx
index 8274c98..dff8106 100644
--- a/packages/app/src/components/reliability/ReliabilityContext.tsx
+++ b/packages/app/src/components/reliability/ReliabilityContext.tsx
@@ -88,6 +88,7 @@ export function ReliabilityProvider({ children }: { children: ReactNode }) {
     setActiveSet: setEnabledModels,
     toggle: toggleModelRaw,
     selectAll: selectAllModelsRaw,
+    remove: removeModelRaw,
   } = useChartToggleSet();
 
   const dateRangeSuccessRateData = useMemo(
@@ -141,6 +142,7 @@ export function ReliabilityProvider({ children }: { children: ReactNode }) {
     (model: string) => toggleModelRaw(model, modelsWithData),
     [toggleModelRaw, modelsWithData],
   );
+  const removeModel = useCallback((model: string) => removeModelRaw(model), [removeModelRaw]);
 
   useEffect(() => {
     if (modelsWithData.size > 0) setEnabledModels(modelsWithData);
@@ -177,6 +179,7 @@ export function ReliabilityProvider({ children }: { children: ReactNode }) {
       setHighContrast,
       enabledModels,
       toggleModel,
+      removeModel,
       isLegendExpanded,
       setIsLegendExpanded,
       modelsWithData,
@@ -194,6 +197,7 @@ export function ReliabilityProvider({ children }: { children: ReactNode }) {
       highContrast,
       enabledModels,
       toggleModel,
+      removeModel,
       isLegendExpanded,
       modelsWithData,
       selectAllModels,
diff --git a/packages/app/src/components/reliability/types.ts b/packages/app/src/components/reliability/types.ts
index 22b70e4..3fb19c9 100644
--- a/packages/app/src/components/reliability/types.ts
+++ b/packages/app/src/components/reliability/types.ts
@@ -92,6 +92,7 @@ export interface ReliabilityChartContextType {
   setHighContrast: (value: boolean) => void;
   enabledModels: Set<string>;
   toggleModel: (model: string) => void;
+  removeModel: (model: string) => void;
   isLegendExpanded: boolean;
   setIsLegendExpanded: (value: boolean) => void;
   modelsWithData: Set<string>;
diff --git a/packages/app/src/components/reliability/ui/BarChartD3.tsx b/packages/app/src/components/reliability/ui/BarChartD3.tsx
index 37af32c..b82518f 100644
--- a/packages/app/src/components/reliability/ui/BarChartD3.tsx
+++ b/packages/app/src/components/reliability/ui/BarChartD3.tsx
@@ -79,6 +79,7 @@ export default function ReliabilityBarChartD3({ caption }: { caption?: ReactNode
     filteredReliabilityData,
     enabledModels,
     toggleModel,
+    removeModel,
     modelsWithData,
     selectAllModels,
     isLegendExpanded,
@@ -97,9 +98,14 @@ export default function ReliabilityBarChartD3({ caption }: { caption?: ReactNode
     [filteredReliabilityData],
   );
 
+  const activeModelKeys = useMemo(
+    () => sortedModels.filter((m) => enabledModels.has(m)),
+    [sortedModels, enabledModels],
+  );
   const { resolveColor, getCssColor } = useThemeColors({
     highContrast,
     identifiers: sortedModels,
+    activeKeys: activeModelKeys,
   });
 
   const legendItems = useMemo(
@@ -306,6 +312,7 @@ export default function ReliabilityBarChartD3({ caption }: { caption?: ReactNode
           <ChartLegend
             variant="sidebar"
             legendItems={legendItems}
+            onItemRemove={removeModel}
             isLegendExpanded={isLegendExpanded}
             onExpandedChange={(expanded) => {
               setIsLegendExpanded(expanded);
@@ -322,12 +329,20 @@ export default function ReliabilityBarChartD3({ caption }: { caption?: ReactNode
                 },
               },
             ]}
-            showResetFilter={true}
-            allSelected={enabledModels.size === modelsWithData.size}
-            onResetFilter={() => {
-              selectAllModels();
-              track('reliability_filter_reset');
-            }}
+            actions={
+              enabledModels.size < modelsWithData.size
+                ? [
+                    {
+                      id: 'reliability-reset-filter',
+                      label: 'Reset filter',
+                      onClick: () => {
+                        selectAllModels();
+                        track('reliability_filter_reset');
+                      },
+                    },
+                  ]
+                : []
+            }
             enableTooltips={true}
           />
         }
diff --git a/packages/app/src/components/reliability/ui/ChartDisplay.tsx b/packages/app/src/components/reliability/ui/ChartDisplay.tsx
index d734aeb..92af6c2 100644
--- a/packages/app/src/components/reliability/ui/ChartDisplay.tsx
+++ b/packages/app/src/components/reliability/ui/ChartDisplay.tsx
@@ -19,11 +19,11 @@ export default function ReliabilityChartDisplay() {
 
   const handleExportCsv = useCallback(() => {
     const { headers, rows } = reliabilityChartToCsv(chartData);
-    exportToCsv(`reliability-${Date.now()}`, headers, rows);
+    exportToCsv('InferenceX_reliability', headers, rows);
   }, [chartData]);
 
   return (
-    <div data-testid="reliability-chart-display">
+    <div data-testid="reliability-chart-display" className="flex flex-col gap-4">
       <section>
         <Card>
           <div className="flex flex-col gap-4">
@@ -54,6 +54,7 @@ export default function ReliabilityChartDisplay() {
         zoomResetEvent={`d3chart_zoom_reset_${CHART_ID}`}
         setIsLegendExpanded={setIsLegendExpanded}
         onExportCsv={handleExportCsv}
+        exportFileName="InferenceX_reliability"
       >
         <ReliabilityBarChartD3
           caption={
diff --git a/packages/app/src/components/star-nudge.test.ts b/packages/app/src/components/star-nudge.test.ts
index 71caf89..36e605d 100644
--- a/packages/app/src/components/star-nudge.test.ts
+++ b/packages/app/src/components/star-nudge.test.ts
@@ -9,14 +9,21 @@ describe('StarNudge constants', () => {
 });
 
 describe('shouldShowNudge', () => {
-  const mockStorage = new Map<string, string>();
+  const mockSession = new Map<string, string>();
+  const mockLocal = new Map<string, string>();
 
   beforeEach(() => {
-    mockStorage.clear();
+    mockSession.clear();
+    mockLocal.clear();
     vi.stubGlobal('sessionStorage', {
-      getItem: (key: string) => mockStorage.get(key) ?? null,
-      setItem: (key: string, value: string) => mockStorage.set(key, value),
-      removeItem: (key: string) => mockStorage.delete(key),
+      getItem: (key: string) => mockSession.get(key) ?? null,
+      setItem: (key: string, value: string) => mockSession.set(key, value),
+      removeItem: (key: string) => mockSession.delete(key),
+    });
+    vi.stubGlobal('localStorage', {
+      getItem: (key: string) => mockLocal.get(key) ?? null,
+      setItem: (key: string, value: string) => mockLocal.set(key, value),
+      removeItem: (key: string) => mockLocal.delete(key),
     });
   });
 
@@ -30,32 +37,41 @@ describe('shouldShowNudge', () => {
   });
 
   it('returns false when nudge was already shown this session', () => {
-    mockStorage.set(NUDGE_SESSION_KEY, '1');
+    mockSession.set(NUDGE_SESSION_KEY, '1');
     expect(shouldShowNudge()).toBe(false);
   });
 
-  it('returns false when sessionStorage throws', () => {
-    vi.stubGlobal('sessionStorage', {
+  it('returns false when user has already starred', () => {
+    mockLocal.set('inferencex-starred', '1');
+    expect(shouldShowNudge()).toBe(false);
+  });
+
+  it('returns false when storage throws', () => {
+    vi.stubGlobal('localStorage', {
       getItem: () => {
         throw new Error('SecurityError');
       },
-      setItem: () => {
-        throw new Error('SecurityError');
-      },
     });
     expect(shouldShowNudge()).toBe(false);
   });
 });
 
 describe('saveNudgeShown', () => {
-  const mockStorage = new Map<string, string>();
+  const mockSession = new Map<string, string>();
+  const mockLocal = new Map<string, string>();
 
   beforeEach(() => {
-    mockStorage.clear();
+    mockSession.clear();
+    mockLocal.clear();
     vi.stubGlobal('sessionStorage', {
-      getItem: (key: string) => mockStorage.get(key) ?? null,
-      setItem: (key: string, value: string) => mockStorage.set(key, value),
-      removeItem: (key: string) => mockStorage.delete(key),
+      getItem: (key: string) => mockSession.get(key) ?? null,
+      setItem: (key: string, value: string) => mockSession.set(key, value),
+      removeItem: (key: string) => mockSession.delete(key),
+    });
+    vi.stubGlobal('localStorage', {
+      getItem: (key: string) => mockLocal.get(key) ?? null,
+      setItem: (key: string, value: string) => mockLocal.set(key, value),
+      removeItem: (key: string) => mockLocal.delete(key),
     });
   });
 
@@ -66,7 +82,7 @@ describe('saveNudgeShown', () => {
 
   it('stores a value in sessionStorage', () => {
     saveNudgeShown();
-    const stored = mockStorage.get(NUDGE_SESSION_KEY);
+    const stored = mockSession.get(NUDGE_SESSION_KEY);
     expect(stored).toBe('1');
   });
 
diff --git a/packages/app/src/components/star-nudge.tsx b/packages/app/src/components/star-nudge.tsx
index 3a8a7e1..bbd58f6 100644
--- a/packages/app/src/components/star-nudge.tsx
+++ b/packages/app/src/components/star-nudge.tsx
@@ -5,7 +5,7 @@ import { Star } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { GITHUB_OWNER, GITHUB_REPO } from '@semianalysisai/inferencex-constants';
-import { STARRED_EVENT } from '@/lib/star-storage';
+import { STARRED_EVENT, STARRED_KEY } from '@/lib/star-storage';
 import { BottomToast } from '@/components/ui/bottom-toast';
 
 const GITHUB_REPO_URL = `https://github.com/${GITHUB_OWNER}/${GITHUB_REPO}`;
@@ -15,8 +15,8 @@ const TAB_CHANGE_THRESHOLD = 2;
 
 export function shouldShowNudge(): boolean {
   try {
-    const modalDismissed = sessionStorage.getItem(NUDGE_SESSION_KEY);
-    if (modalDismissed) return false;
+    if (localStorage.getItem(STARRED_KEY)) return false;
+    if (sessionStorage.getItem(NUDGE_SESSION_KEY)) return false;
     return true;
   } catch {
     return false;
diff --git a/packages/app/src/components/tab-nav.tsx b/packages/app/src/components/tab-nav.tsx
new file mode 100644
index 0000000..0aa22b2
--- /dev/null
+++ b/packages/app/src/components/tab-nav.tsx
@@ -0,0 +1,164 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+import { useEffect, useRef, useState } from 'react';
+
+import { track } from '@/lib/analytics';
+import { Card } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { cn } from '@/lib/utils';
+
+const FEATURE_GATE_KEY = 'inferencex-feature-gate';
+const UNLOCK_SEQUENCE = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown'];
+
+function useFeatureGate(): boolean {
+  const [unlocked, setUnlocked] = useState(false);
+  const sequenceRef = useRef<string[]>([]);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && localStorage.getItem(FEATURE_GATE_KEY) === '1') {
+      setUnlocked(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (unlocked) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      sequenceRef.current.push(e.key);
+      if (sequenceRef.current.length > UNLOCK_SEQUENCE.length) {
+        sequenceRef.current = sequenceRef.current.slice(-UNLOCK_SEQUENCE.length);
+      }
+      if (
+        sequenceRef.current.length === UNLOCK_SEQUENCE.length &&
+        sequenceRef.current.every((k, i) => k === UNLOCK_SEQUENCE[i])
+      ) {
+        localStorage.setItem(FEATURE_GATE_KEY, '1');
+        setUnlocked(true);
+        window.dispatchEvent(new Event('inferencex:powerx:unlocked'));
+        track('powerx_unlocked');
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [unlocked]);
+
+  useEffect(() => {
+    const handleLock = () => setUnlocked(false);
+    const handleUnlock = () => setUnlocked(true);
+    window.addEventListener('inferencex:powerx:locked', handleLock);
+    window.addEventListener('inferencex:powerx:unlocked', handleUnlock);
+    return () => {
+      window.removeEventListener('inferencex:powerx:locked', handleLock);
+      window.removeEventListener('inferencex:powerx:unlocked', handleUnlock);
+    };
+  }, []);
+
+  return unlocked;
+}
+
+const TAB_LINKS = [
+  { href: '/inference', label: 'Inference Performance', testId: 'tab-trigger-inference' },
+  { href: '/evaluation', label: 'Accuracy Evals', testId: 'tab-trigger-evaluation' },
+  { href: '/historical', label: 'Historical Trends', testId: 'tab-trigger-historical' },
+  { href: '/calculator', label: 'TCO Calculator', testId: 'tab-trigger-calculator' },
+  { href: '/reliability', label: 'GPU Reliability', testId: 'tab-trigger-reliability' },
+  { href: '/gpu-specs', label: 'GPU Specs', testId: 'tab-trigger-gpu-specs' },
+  { href: '/gpu-metrics', label: 'PowerX', testId: 'tab-trigger-gpu-metrics', gated: true },
+] as const;
+
+function activeTab(pathname: string): string {
+  const seg = pathname.split('/').filter(Boolean)[0] || 'inference';
+  return seg;
+}
+
+export function TabNav() {
+  const pathname = usePathname();
+  const router = useRouter();
+  const featureGateUnlocked = useFeatureGate();
+  const current = activeTab(pathname);
+
+  const handleMobileChange = (value: string) => {
+    window.dispatchEvent(new CustomEvent('inferencex:tab-change'));
+    track('tab_changed', { tab: value });
+    router.push(`/${value}`);
+  };
+
+  const handleDesktopClick = (tab: string) => {
+    window.dispatchEvent(new CustomEvent('inferencex:tab-change'));
+    track('tab_changed', { tab });
+  };
+
+  return (
+    <>
+      {/* Mobile: Dropdown */}
+      <div className="lg:hidden mb-4">
+        <div className="w-full pb-6" />
+        <Card>
+          <div className="space-y-2">
+            <Label htmlFor="chart-select">Select Chart</Label>
+            <Select value={current} onValueChange={handleMobileChange}>
+              <SelectTrigger id="chart-select" data-testid="mobile-chart-select" className="w-full">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {TAB_LINKS.map((tab) => {
+                  if ('gated' in tab && tab.gated && !featureGateUnlocked) return null;
+                  const value = tab.href.slice(1);
+                  return (
+                    <SelectItem key={value} value={value} data-ph-capture-attribute-tab={value}>
+                      {tab.label}
+                    </SelectItem>
+                  );
+                })}
+              </SelectContent>
+            </Select>
+          </div>
+        </Card>
+      </div>
+
+      {/* Desktop: Nav links */}
+      <div className="hidden lg:flex flex-col mb-4">
+        <Card className="overflow-x-auto py-6 md:py-6">
+          <nav
+            data-testid="chart-section-tabs"
+            className="relative flex items-center justify-evenly min-w-0"
+          >
+            {TAB_LINKS.map((tab) => {
+              if ('gated' in tab && tab.gated && !featureGateUnlocked) return null;
+              return (
+                <Link
+                  key={tab.href}
+                  href={tab.href}
+                  data-testid={tab.testId}
+                  data-ph-capture-attribute-tab={tab.href.slice(1)}
+                  onClick={() => handleDesktopClick(tab.href.slice(1))}
+                  className={cn(
+                    'relative inline-flex items-center justify-center',
+                    'text-base font-medium whitespace-nowrap',
+                    'text-muted-foreground',
+                    'border-b-2 border-transparent',
+                    'transition-colors duration-200',
+                    'focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring',
+                    current === tab.href.slice(1)
+                      ? 'border-secondary dark:border-primary text-secondary dark:text-primary'
+                      : 'hover:border-muted-foreground/30',
+                  )}
+                >
+                  {tab.label}
+                </Link>
+              );
+            })}
+          </nav>
+        </Card>
+      </div>
+    </>
+  );
+}
diff --git a/packages/app/src/components/trends/HistoricalTrendsDisplay.tsx b/packages/app/src/components/trends/HistoricalTrendsDisplay.tsx
index 4b47fc1..1002eb0 100644
--- a/packages/app/src/components/trends/HistoricalTrendsDisplay.tsx
+++ b/packages/app/src/components/trends/HistoricalTrendsDisplay.tsx
@@ -47,6 +47,7 @@ export default function HistoricalTrendsDisplay() {
     activeHwTypes,
     hwTypesWithData,
     toggleHwType,
+    removeHwType,
     selectAllHwTypes,
     availableDates,
     logScale,
@@ -127,11 +128,12 @@ export default function HistoricalTrendsDisplay() {
   });
 
   // High contrast color support
-  const hwKeys = useMemo(() => Object.keys(hardwareConfig), [hardwareConfig]);
+  const activeHwKeys = useMemo(() => [...activeHwTypes], [activeHwTypes]);
   const { resolveColor } = useThemeColors({
     highContrast,
-    identifiers: hwKeys,
+    identifiers: activeHwKeys,
     colorShuffleSeed,
+    activeKeys: activeHwKeys,
   });
 
   // Line configs for TrendChart — one per visible GPU+precision combo
@@ -189,7 +191,7 @@ export default function HistoricalTrendsDisplay() {
   }
 
   return (
-    <section data-testid="historical-trends-display">
+    <section data-testid="historical-trends-display" className="flex flex-col gap-4">
       {/* Controls card — same selectors as Inference Performance tab */}
       <Card>
         <div className="flex flex-col gap-4">
@@ -280,13 +282,14 @@ export default function HistoricalTrendsDisplay() {
           </p>
         </Card>
       ) : (
-        <section className="pt-4">
+        <section>
           <figure data-testid="historical-trend-figure" className="relative rounded-lg">
             <ChartButtons
               chartId="historical-trend"
               analyticsPrefix="historical"
               zoomResetEvent="d3chart_zoom_reset_historical-trend"
               setIsLegendExpanded={setIsLegendExpanded}
+              exportFileName={`InferenceX_historical_${selectedModel}`}
               onExportCsv={() => {
                 const { headers, rows } = historicalTrendToCsv(
                   trendLines,
@@ -294,7 +297,7 @@ export default function HistoricalTrendsDisplay() {
                   currentYLabel,
                   targetInteractivity,
                 );
-                exportToCsv(`historical-trend-${Date.now()}`, headers, rows);
+                exportToCsv(`InferenceX_historical_${selectedModel}`, headers, rows);
               }}
             />
             <Card>
@@ -529,6 +532,7 @@ export default function HistoricalTrendsDisplay() {
                 legendElement={
                   <ChartLegend
                     variant="sidebar"
+                    onItemRemove={removeHwType}
                     legendItems={Object.entries(hardwareConfig)
                       .filter(([key]) => hwTypesWithData.has(key))
                       .sort(
@@ -572,8 +576,8 @@ export default function HistoricalTrendsDisplay() {
                         },
                       },
                     ]}
-                    actions={
-                      highContrast
+                    actions={[
+                      ...(highContrast
                         ? [
                             {
                               id: 'historical-shuffle-colors',
@@ -584,14 +588,20 @@ export default function HistoricalTrendsDisplay() {
                               },
                             },
                           ]
-                        : undefined
-                    }
-                    showResetFilter={true}
-                    allSelected={activeHwTypes.size === hwTypesWithData.size}
-                    onResetFilter={() => {
-                      selectAllHwTypes();
-                      track('historical_legend_filter_reset');
-                    }}
+                        : []),
+                      ...(activeHwTypes.size < hwTypesWithData.size
+                        ? [
+                            {
+                              id: 'historical-reset-filter',
+                              label: 'Reset filter',
+                              onClick: () => {
+                                selectAllHwTypes();
+                                track('historical_legend_filter_reset');
+                              },
+                            },
+                          ]
+                        : []),
+                    ]}
                     enableTooltips={true}
                     showFpShapeIndicators={true}
                   />
diff --git a/packages/app/src/components/ui/bottom-toast.tsx b/packages/app/src/components/ui/bottom-toast.tsx
index 5cc13f6..efe86a1 100644
--- a/packages/app/src/components/ui/bottom-toast.tsx
+++ b/packages/app/src/components/ui/bottom-toast.tsx
@@ -3,6 +3,8 @@
 import { X } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
+import { track } from '@/lib/analytics';
+
 const DISMISS_EVENT = 'inferencex:dismiss-toast';
 
 interface BottomToastProps {
@@ -40,11 +42,12 @@ export function BottomToast({
 
   const dismiss = useCallback(() => {
     setAnimate(false);
+    track('toast_dismissed', { title });
     setTimeout(() => {
       setVisible(false);
       if (!actionClickedRef.current) onDismissRef.current?.();
     }, 300);
-  }, []);
+  }, [title]);
 
   // On mount: dismiss any existing toast, then animate in
   useEffect(() => {
@@ -58,9 +61,10 @@ export function BottomToast({
 
   const handleAction = useCallback(() => {
     actionClickedRef.current = true;
+    track('toast_action_clicked', { title, actionLabel: action?.label });
     action?.onClick();
     dismiss();
-  }, [action, dismiss]);
+  }, [action, dismiss, title]);
 
   if (!visible) return null;
 
diff --git a/packages/app/src/components/ui/card.tsx b/packages/app/src/components/ui/card.tsx
index 9da3074..411dc5b 100644
--- a/packages/app/src/components/ui/card.tsx
+++ b/packages/app/src/components/ui/card.tsx
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="card"
       className={cn(
-        'bg-card/90 text-card-foreground flex flex-col rounded-xl p-4 md:p-8',
+        'bg-background/20 backdrop-blur-[2px] text-card-foreground flex flex-col rounded-xl border border-border/40 p-4 md:p-8',
         className,
       )}
       {...props}
diff --git a/packages/app/src/components/ui/chart-buttons.tsx b/packages/app/src/components/ui/chart-buttons.tsx
index 36c8231..761eda5 100644
--- a/packages/app/src/components/ui/chart-buttons.tsx
+++ b/packages/app/src/components/ui/chart-buttons.tsx
@@ -21,6 +21,8 @@ interface ChartButtonsProps {
   hideZoomReset?: boolean;
   /** Optional callback to export chart data as CSV */
   onExportCsv?: () => void;
+  /** Human-readable base name for exported files (e.g. "DeepSeek-R1_throughput_interactivity"). Falls back to chartId. */
+  exportFileName?: string;
 }
 
 /**
@@ -38,8 +40,13 @@ export function ChartButtons({
   setIsLegendExpanded,
   hideZoomReset,
   onExportCsv,
+  exportFileName,
 }: ChartButtonsProps) {
-  const { isExporting, exportToImage } = useChartExport({ chartId, setIsLegendExpanded });
+  const { isExporting, exportToImage } = useChartExport({
+    chartId,
+    setIsLegendExpanded,
+    exportFileName,
+  });
   const [popoverOpen, setPopoverOpen] = useState(false);
   // always include chartId in event name for consistency
   const resetEventName = zoomResetEvent || `${analyticsPrefix}_zoom_reset_${chartId}`;
diff --git a/packages/app/src/components/ui/chart-legend-item.tsx b/packages/app/src/components/ui/chart-legend-item.tsx
index 8437eb5..c016328 100644
--- a/packages/app/src/components/ui/chart-legend-item.tsx
+++ b/packages/app/src/components/ui/chart-legend-item.tsx
@@ -1,3 +1,4 @@
+import { X } from 'lucide-react';
 import React from 'react';
 
 import { cn } from '@/lib/utils';
@@ -17,6 +18,7 @@ export interface CommonLegendItemProps {
   tooltip?: React.JSX.Element | null;
   isLegendExpanded?: boolean; // Whether the legend is expanded to show full text
   sidebarMode?: boolean; // Use sidebar-style visual feedback (line-through + faded dot)
+  onRemove?: (name: string) => void;
 }
 
 const ChartLegendItem: React.FC<CommonLegendItemProps> = ({
@@ -33,9 +35,11 @@ const ChartLegendItem: React.FC<CommonLegendItemProps> = ({
   asFragment = false,
   isLegendExpanded = true,
   sidebarMode = false,
+  onRemove,
 }) => {
   const id = `checkbox-${hw || name}`; // Unique ID for accessibility
   const isLongText = (label ?? '').length > 8;
+  const canRemove = isActive && !!onRemove;
 
   const content = (
     <>
@@ -49,17 +53,36 @@ const ChartLegendItem: React.FC<CommonLegendItemProps> = ({
       <label
         htmlFor={id}
         className={cn(
-          'flex items-center cursor-pointer hover:underline peer-focus-visible:ring-1 peer-focus-visible:ring-offset-1 peer-focus-visible:outline-none rounded-sm',
+          'group/item flex items-center cursor-pointer hover:underline peer-focus-visible:ring-1 peer-focus-visible:ring-offset-1 peer-focus-visible:outline-none rounded-sm',
           isLegendExpanded ? 'w-fit whitespace-nowrap' : '',
         )}
         title={!isLegendExpanded && isLongText ? label : title}
         onMouseEnter={onHover && isActive ? () => onHover(hw || name) : undefined}
         onMouseLeave={onHoverEnd && isActive ? onHoverEnd : undefined}
       >
-        <span
-          className="inline-block w-3 h-3 rounded-full mr-2 flex-shrink-0 transition-opacity"
-          style={{ backgroundColor: color, opacity: sidebarMode && !isActive ? 0.3 : 1 }}
-        ></span>
+        <span className="relative inline-flex items-center justify-center w-3 h-3 mr-2 flex-shrink-0">
+          <span
+            className={cn(
+              'w-3 h-3 rounded-full transition-opacity',
+              canRemove && 'group-hover/item:opacity-0!',
+            )}
+            style={{ backgroundColor: color, opacity: sidebarMode && !isActive ? 0.3 : 1 }}
+          />
+          {canRemove && (
+            <span
+              role="button"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onRemove!(hw || name);
+              }}
+              className="absolute inset-0 inline-flex items-center justify-center opacity-0 group-hover/item:opacity-100"
+              aria-label={`Hide ${label}`}
+            >
+              <X size={14} strokeWidth={4} className="text-foreground" />
+            </span>
+          )}
+        </span>
         <span
           className={cn(
             'pr-2',
@@ -80,7 +103,7 @@ const ChartLegendItem: React.FC<CommonLegendItemProps> = ({
   const wrapperClassName = cn(
     'transition-opacity duration-300',
     isActive ? 'opacity-100' : sidebarMode ? 'no-export' : 'opacity-50 no-export',
-    isHighlighted && 'text-red-900 font-bold',
+    isHighlighted && 'text-red-900 dark:text-red-400 font-bold',
   );
 
   if (asFragment) {
diff --git a/packages/app/src/components/ui/chart-legend.tsx b/packages/app/src/components/ui/chart-legend.tsx
index 0b40ec2..9d11d08 100644
--- a/packages/app/src/components/ui/chart-legend.tsx
+++ b/packages/app/src/components/ui/chart-legend.tsx
@@ -43,9 +43,6 @@ export interface ChartLegendProps {
   actions?: LegendActionConfig[];
   grouped?: boolean;
   showFpShapeIndicators?: boolean;
-  showResetFilter?: boolean;
-  allSelected?: boolean;
-  onResetFilter?: () => void;
   enableTooltips?: boolean;
   maxHeight?: number;
   /** Override styles on the outer legend container (e.g. maxHeight to constrain scrollable area) */
@@ -54,6 +51,7 @@ export interface ChartLegendProps {
   disableActiveSort?: boolean;
   onItemHover?: (id: string) => void;
   onItemHoverEnd?: () => void;
+  onItemRemove?: (name: string) => void;
 }
 
 export default function ChartLegend({
@@ -64,9 +62,6 @@ export default function ChartLegend({
   actions,
   grouped = false,
   showFpShapeIndicators = false,
-  showResetFilter = false,
-  allSelected = true,
-  onResetFilter,
   enableTooltips = false,
   maxHeight,
   containerStyle,
@@ -74,6 +69,7 @@ export default function ChartLegend({
   disableActiveSort = false,
   onItemHover,
   onItemHoverEnd,
+  onItemRemove,
 }: ChartLegendProps) {
   const isSidebar = variant === 'sidebar';
   const [hasLongText, setHasLongText] = useState(false);
@@ -82,6 +78,11 @@ export default function ChartLegend({
   const [searchQuery, setSearchQuery] = useState('');
 
   const effectiveExpanded = isLegendExpanded;
+  const activeCount = useMemo(
+    () => legendItems.filter((item) => item.isActive).length,
+    [legendItems],
+  );
+  const effectiveRemove = onItemRemove && activeCount > 1 ? onItemRemove : undefined;
 
   useLayoutEffect(() => {
     setHasLongText(legendItems.some((item) => item.label && item.label.length > 8));
@@ -179,8 +180,7 @@ export default function ChartLegend({
     (showFpShapeIndicators ||
       (switches && switches.length > 0) ||
       (actions && actions.length > 0) ||
-      hasLongText ||
-      (showResetFilter && !allSelected));
+      hasLongText);
   const scrollClasses = isSidebar
     ? cn(
         'overflow-y-auto flex-1 min-h-0 space-y-0.5',
@@ -253,7 +253,7 @@ export default function ChartLegend({
 
   const actionElements =
     actions && actions.length > 0 ? (
-      <div className="w-full no-export">
+      <div className="w-full no-export flex flex-wrap gap-x-3 gap-y-1">
         {actions.map((action) => (
           <button
             key={action.id}
@@ -306,19 +306,6 @@ export default function ChartLegend({
     </div>
   ) : null;
 
-  const resetFilter =
-    showResetFilter && !allSelected ? (
-      <div className="no-export mt-2">
-        <button
-          onClick={onResetFilter}
-          className="text-xs text-muted-foreground hover:text-foreground underline"
-          aria-label="Reset filter"
-        >
-          Reset filter
-        </button>
-      </div>
-    ) : null;
-
   // Compute li className for a legend item (shared by tooltip and non-tooltip paths)
   const itemClassName = (item: CommonLegendItemProps, isHidden: boolean) =>
     cn(
@@ -330,7 +317,6 @@ export default function ChartLegend({
         : item.isActive
           ? 'opacity-100'
           : 'opacity-50 no-export',
-      item.isHighlighted ? 'text-red-900 font-bold' : '',
       effectiveExpanded && 'md:w-full md:block',
       isHidden && 'h-0 m-0! p-0! overflow-hidden',
     );
@@ -349,6 +335,7 @@ export default function ChartLegend({
         onClick={item.onClick}
         onHover={onItemHover}
         onHoverEnd={onItemHoverEnd}
+        onRemove={effectiveRemove}
         asFragment
         isLegendExpanded={effectiveExpanded}
         sidebarMode={isSidebar}
@@ -375,19 +362,13 @@ export default function ChartLegend({
     );
   };
 
-  // Bottom controls (switches, FP indicators, expand button, reset filter)
+  // Bottom controls (switches, FP indicators, expand button, actions)
   const hasBottomControls =
-    resetFilter ||
-    switchElements ||
-    actionElements ||
-    fpIndicators ||
-    expandButton ||
-    hasAtomFootnote;
+    switchElements || actionElements || fpIndicators || expandButton || hasAtomFootnote;
   const bottomControls = hasBottomControls ? (
     <div className="shrink-0 grow-0">
-      {resetFilter}
-      {switchElements}
       {actionElements}
+      {switchElements}
       {fpIndicators}
       {expandButton}
       {hasAtomFootnote && (
@@ -405,7 +386,7 @@ export default function ChartLegend({
       <div
         ref={scrollRef}
         style={isSidebar || isOverflowing ? { scrollbarGutter: 'stable' } : undefined}
-        className={scrollClasses}
+        className={cn(scrollClasses, 'custom-scrollbar')}
       >
         {rows.map((row, i) => {
           const allHidden =
@@ -441,6 +422,7 @@ export default function ChartLegend({
                         onClick={item.onClick}
                         onHover={onItemHover}
                         onHoverEnd={onItemHoverEnd}
+                        onRemove={effectiveRemove}
                         sidebarMode={isSidebar}
                         asFragment
                       />
@@ -456,7 +438,7 @@ export default function ChartLegend({
       <ul
         ref={scrollRef as unknown as React.RefObject<HTMLUListElement>}
         style={isSidebar || isOverflowing ? { scrollbarGutter: 'stable' } : undefined}
-        className={scrollClasses}
+        className={cn(scrollClasses, 'custom-scrollbar')}
       >
         {(isSidebar ? sortedItems : legendItems).map((item) =>
           renderItem(item, isSidebar && hiddenNames.has(item.name)),
diff --git a/packages/app/src/components/ui/chart-section.tsx b/packages/app/src/components/ui/chart-section.tsx
index 1852b47..0f16742 100644
--- a/packages/app/src/components/ui/chart-section.tsx
+++ b/packages/app/src/components/ui/chart-section.tsx
@@ -20,6 +20,8 @@ interface ChartSectionProps {
   setIsLegendExpanded?: (expanded: boolean) => void;
   /** Optional callback to export chart data as CSV */
   onExportCsv?: () => void;
+  /** Human-readable base name for exported files. Falls back to chartId. */
+  exportFileName?: string;
 }
 
 /**
@@ -37,6 +39,7 @@ export function ChartSection({
   className = 'pt-8 md:pt-0',
   setIsLegendExpanded,
   onExportCsv,
+  exportFileName,
 }: ChartSectionProps) {
   return (
     <section className={className}>
@@ -48,6 +51,7 @@ export function ChartSection({
           zoomResetEvent={zoomResetEvent}
           setIsLegendExpanded={setIsLegendExpanded}
           onExportCsv={onExportCsv}
+          exportFileName={exportFileName}
         />
 
         <Card>{children}</Card>
diff --git a/packages/app/src/components/ui/date-picker.tsx b/packages/app/src/components/ui/date-picker.tsx
index e72211b..88761e5 100644
--- a/packages/app/src/components/ui/date-picker.tsx
+++ b/packages/app/src/components/ui/date-picker.tsx
@@ -235,7 +235,7 @@ export function DatePicker({
   const handleGoPrevious = () => {
     const index = getCurrentDateIndex();
     if (index > 0 && availableDates) {
-      track('date_picker_previous');
+      track('date_picker_previous', { date: availableDates[index - 1] });
       onChange(availableDates[index - 1]);
     }
   };
@@ -244,7 +244,7 @@ export function DatePicker({
   const handleGoNext = () => {
     const index = getCurrentDateIndex();
     if (availableDates && index >= 0 && index < availableDates.length - 1) {
-      track('date_picker_next');
+      track('date_picker_next', { date: availableDates[index + 1] });
       onChange(availableDates[index + 1]);
     }
   };
@@ -280,15 +280,21 @@ export function DatePicker({
           onClick={handleGoPrevious}
           disabled={!canGoPrevious() || !!isCheckingAvailableDates}
           className="h-8 w-8"
+          suppressHydrationWarning
         >
           <ChevronLeft className="h-4 w-4" />
         </Button>
         <Dialog open={open} onOpenChange={handleOpenChange}>
           <DialogTrigger asChild>
-            <Button variant="ghost">
+            <Button
+              variant="ghost"
+              className="!px-5 min-w-[200px] dark:bg-input/90 dark:hover:bg-input/50"
+            >
               <Calendar className="mr-0 h-4 w-4" />
               <strong>Run Date:</strong>
-              {getDisplayText()}
+              <span className="tabular-nums inline-block w-[6.5em] text-left">
+                {getDisplayText()}
+              </span>
             </Button>
           </DialogTrigger>
           <DialogContent className="sm:max-w-[600px]">
@@ -506,13 +512,25 @@ function CalendarGrid({
       currentMonth.getMonth() < latestMonth.getMonth());
 
   const goToPreviousMonth = () => {
-    if (canGoPrev)
-      setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1));
+    if (canGoPrev) {
+      const newMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1);
+      track('date_picker_month_navigated', {
+        direction: 'previous',
+        month: newMonth.toISOString().slice(0, 7),
+      });
+      setCurrentMonth(newMonth);
+    }
   };
 
   const goToNextMonth = () => {
-    if (canGoNext)
-      setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1));
+    if (canGoNext) {
+      const newMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1);
+      track('date_picker_month_navigated', {
+        direction: 'next',
+        month: newMonth.toISOString().slice(0, 7),
+      });
+      setCurrentMonth(newMonth);
+    }
   };
 
   return (
diff --git a/packages/app/src/components/ui/date-range-picker.tsx b/packages/app/src/components/ui/date-range-picker.tsx
index 8cfd27b..eef59b6 100644
--- a/packages/app/src/components/ui/date-range-picker.tsx
+++ b/packages/app/src/components/ui/date-range-picker.tsx
@@ -520,13 +520,25 @@ function CalendarGrid({
       secondMonth.getMonth() < latestMonth.getMonth());
 
   const goToPreviousMonth = () => {
-    if (canGoPrev)
-      setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1));
+    if (canGoPrev) {
+      const newMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1);
+      track('date_range_picker_month_navigated', {
+        direction: 'previous',
+        month: newMonth.toISOString().slice(0, 7),
+      });
+      setCurrentMonth(newMonth);
+    }
   };
 
   const goToNextMonth = () => {
-    if (canGoNext)
-      setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1));
+    if (canGoNext) {
+      const newMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1);
+      track('date_range_picker_month_navigated', {
+        direction: 'next',
+        month: newMonth.toISOString().slice(0, 7),
+      });
+      setCurrentMonth(newMonth);
+    }
   };
 
   const handleDateHover = (date: Date | null) => {
diff --git a/packages/app/src/components/ui/multi-date-picker.tsx b/packages/app/src/components/ui/multi-date-picker.tsx
index 2a43822..ee6137f 100644
--- a/packages/app/src/components/ui/multi-date-picker.tsx
+++ b/packages/app/src/components/ui/multi-date-picker.tsx
@@ -100,6 +100,7 @@ export function MultiDatePicker({
 
   // Remove a specific date from temp selection
   const handleRemoveTempDate = (dateStr: string) => {
+    track('multi_date_picker_date_removed', { date: dateStr });
     setTempDates(tempDates.filter((d) => d !== dateStr));
   };
 
@@ -176,7 +177,10 @@ export function MultiDatePicker({
                   <Button
                     variant="ghost"
                     size="sm"
-                    onClick={() => setTempDates([])}
+                    onClick={() => {
+                      track('multi_date_picker_cleared', { dateCount: tempDates.length });
+                      setTempDates([]);
+                    }}
                     className="h-6 px-2 text-xs"
                   >
                     Clear All
@@ -366,13 +370,25 @@ function CalendarGrid({
       currentMonth.getMonth() < latestMonth.getMonth());
 
   const goToPreviousMonth = () => {
-    if (canGoPrev)
-      setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1));
+    if (canGoPrev) {
+      const newMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1);
+      track('multi_date_picker_month_navigated', {
+        direction: 'previous',
+        month: newMonth.toISOString().slice(0, 7),
+      });
+      setCurrentMonth(newMonth);
+    }
   };
 
   const goToNextMonth = () => {
-    if (canGoNext)
-      setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1));
+    if (canGoNext) {
+      const newMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1);
+      track('multi_date_picker_month_navigated', {
+        direction: 'next',
+        month: newMonth.toISOString().slice(0, 7),
+      });
+      setCurrentMonth(newMonth);
+    }
   };
 
   return (
diff --git a/packages/app/src/components/ui/multi-select.tsx b/packages/app/src/components/ui/multi-select.tsx
index d0d1bab..81a1c14 100644
--- a/packages/app/src/components/ui/multi-select.tsx
+++ b/packages/app/src/components/ui/multi-select.tsx
@@ -56,6 +56,13 @@ function MultiSelect({
     if (isOpen) {
       document.addEventListener('mousedown', handleClickOutside);
       searchRef.current?.focus();
+    } else {
+      // Track search usage when dropdown closes
+      if (searchUsedRef.current) {
+        track('multi_select_searched', { query: search });
+        searchUsedRef.current = false;
+      }
+      setSearch('');
     }
 
     return () => {
@@ -112,6 +119,8 @@ function MultiSelect({
     onChange?.(newValue);
   };
 
+  const searchUsedRef = React.useRef(false);
+
   const handleClearAll = (e: React.SyntheticEvent) => {
     e.stopPropagation();
     if (disabled) {
@@ -149,7 +158,7 @@ function MultiSelect({
             selectedLabels.map((label, index) => (
               <span
                 key={value[index]}
-                className="bg-transparent text-foreground border border-border dark:bg-secondary dark:border-border inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium transition-colors shrink-0"
+                className="bg-transparent text-foreground border border-border dark:bg-[#0a6ca8] dark:border-border inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium transition-colors shrink-0"
               >
                 {label}
                 <span
@@ -222,7 +231,10 @@ function MultiSelect({
                   ref={searchRef}
                   type="text"
                   value={search}
-                  onChange={(e) => setSearch(e.target.value)}
+                  onChange={(e) => {
+                    setSearch(e.target.value);
+                    if (e.target.value) searchUsedRef.current = true;
+                  }}
                   placeholder="Search..."
                   className="w-full bg-transparent py-1.5 text-sm outline-none placeholder:text-muted-foreground"
                 />
diff --git a/packages/app/src/hooks/api/use-benchmarks.ts b/packages/app/src/hooks/api/use-benchmarks.ts
index c20eda8..ef1b730 100644
--- a/packages/app/src/hooks/api/use-benchmarks.ts
+++ b/packages/app/src/hooks/api/use-benchmarks.ts
@@ -1,4 +1,4 @@
-import { useQuery, keepPreviousData } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { fetchBenchmarks } from '@/lib/api';
 
@@ -17,8 +17,5 @@ export function benchmarkQueryOptions(
 }
 
 export function useBenchmarks(model: string, date?: string, enabled: boolean = true) {
-  return useQuery({
-    ...benchmarkQueryOptions(model, date ?? 'latest', enabled),
-    placeholderData: keepPreviousData,
-  });
+  return useQuery(benchmarkQueryOptions(model, date ?? 'latest', enabled));
 }
diff --git a/packages/app/src/hooks/api/use-github-stars.ts b/packages/app/src/hooks/api/use-github-stars.ts
deleted file mode 100644
index 7881b39..0000000
--- a/packages/app/src/hooks/api/use-github-stars.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-
-import { fetchGitHubStars } from '@/lib/api';
-
-export function useGitHubStars() {
-  return useQuery({
-    queryKey: ['github-stars'],
-    queryFn: fetchGitHubStars,
-  });
-}
diff --git a/packages/app/src/hooks/useChartContext.ts b/packages/app/src/hooks/useChartContext.ts
index 7fdb90c..cad020d 100644
--- a/packages/app/src/hooks/useChartContext.ts
+++ b/packages/app/src/hooks/useChartContext.ts
@@ -74,11 +74,17 @@ export function useChartUIState(config: UseChartStateConfig) {
 }
 
 /**
- * Manages toggleable set state (e.g., enabled models, enabled hardware)
+ * Manages togglable set state (e.g., enabled models, enabled hardware)
  * with automatic initialization and callbacks.
  */
 export function useChartToggleSet<T extends string = string>() {
-  const { activeSet, setActiveSet, toggle: toggleRaw, selectAll: selectAllRaw } = useTogglableSet();
+  const {
+    activeSet,
+    setActiveSet,
+    toggle: toggleRaw,
+    selectAll: selectAllRaw,
+    remove: removeRaw,
+  } = useTogglableSet();
 
   // memoize callbacks to prevent unnecessary re-renders
   const toggle = useCallback(
@@ -91,16 +97,19 @@ export function useChartToggleSet<T extends string = string>() {
     [selectAllRaw],
   );
 
+  const remove = useCallback((item: T) => removeRaw(item), [removeRaw]);
+
   return {
     activeSet: activeSet as Set<T>,
     setActiveSet: setActiveSet as (set: Set<T>) => void,
     toggle,
     selectAll,
+    remove,
   };
 }
 
 /**
- * Automatically initializes a toggleable set when available items change.
+ * Automatically initializes a togglable set when available items change.
  * Prevents unnecessary reinitialization when the set is already populated.
  */
 export function useAutoInitializeToggleSet<T>(
diff --git a/packages/app/src/hooks/useChartExport.ts b/packages/app/src/hooks/useChartExport.ts
index eeadd60..91ed2f9 100644
--- a/packages/app/src/hooks/useChartExport.ts
+++ b/packages/app/src/hooks/useChartExport.ts
@@ -3,6 +3,8 @@ import { useCallback, useState } from 'react';
 interface UseChartExportOptions {
   chartId: string;
   setIsLegendExpanded?: (expanded: boolean) => void;
+  /** Human-readable base name for exported files (e.g. "DeepSeek-R1_throughput_interactivity"). Falls back to chartId. */
+  exportFileName?: string;
 }
 
 /** Apply inline styles to an element */
@@ -161,7 +163,11 @@ async function addWatermark(dataUrl: string, bgColor: string): Promise<string> {
 /**
  * Custom hook for exporting charts as PNG images.
  */
-export function useChartExport({ chartId, setIsLegendExpanded }: UseChartExportOptions) {
+export function useChartExport({
+  chartId,
+  setIsLegendExpanded,
+  exportFileName,
+}: UseChartExportOptions) {
   const [isExporting, setIsExporting] = useState(false);
 
   const exportToImage = useCallback(async () => {
@@ -386,7 +392,7 @@ export function useChartExport({ chartId, setIsLegendExpanded }: UseChartExportO
       const dataUrl = await addWatermark(chartDataUrl, bgColor);
 
       const link = document.createElement('a');
-      link.download = `${chartId}-${Date.now()}.png`;
+      link.download = `${exportFileName || chartId}-${Date.now()}.png`;
       link.href = dataUrl;
       link.click();
 
diff --git a/packages/app/src/hooks/useThemeColors.ts b/packages/app/src/hooks/useThemeColors.ts
index ed7ee10..a2caaba 100644
--- a/packages/app/src/hooks/useThemeColors.ts
+++ b/packages/app/src/hooks/useThemeColors.ts
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTheme } from 'next-themes';
 import { generateHighContrastColors } from '@/lib/chart-utils';
 import { getChartThemeColors } from '@/lib/chart-rendering';
-import { HARDWARE_CONFIG } from '@/lib/constants';
+import { generateVendorColors } from '@/lib/dynamic-colors';
 
 export interface UseThemeColorsOptions {
   /**
@@ -21,6 +21,13 @@ export interface UseThemeColorsOptions {
    * 0 (default) means no shuffle; any other value produces a deterministic shuffle.
    */
   colorShuffleSeed?: number;
+
+  /**
+   * Hardware keys that are currently checked / active in the legend.
+   * When provided, dynamic vendor-aware colors are generated for these keys
+   * instead of falling back to static HARDWARE_CONFIG.color values.
+   */
+  activeKeys?: string[];
 }
 
 export interface ThemeColors {
@@ -38,11 +45,15 @@ export interface UseThemeColorsResult {
    */
   colorMap: Record<string, string> | null;
 
+  /**
+   * Dynamic vendor-aware color map (null if activeKeys not provided)
+   * Maps hwKey -> oklch color string
+   */
+  vendorColorMap: Record<string, string> | null;
+
   /**
    * Resolves color for a given identifier
-   * - If highContrast, uses colorMap
-   * - Otherwise, uses HARDWARE_CONFIG
-   * - Falls back to HARDWARE_CONFIG.unknown.color if not found
+   * Priority: highContrast colorMap → vendorColorMap → HARDWARE_CONFIG fallback
    * @param identifier - The identifier to resolve color for
    * @param hardwareKey - Optional hardware key for fallback lookup
    */
@@ -60,7 +71,7 @@ export interface UseThemeColorsResult {
  * Consolidates common theme color patterns across all D3 charts
  */
 export function useThemeColors(options: UseThemeColorsOptions): UseThemeColorsResult {
-  const { highContrast, identifiers = [], colorShuffleSeed = 0 } = options;
+  const { highContrast, identifiers = [], colorShuffleSeed = 0, activeKeys } = options;
   const { resolvedTheme } = useTheme();
 
   // get base theme colors
@@ -75,30 +86,49 @@ export function useThemeColors(options: UseThemeColorsOptions): UseThemeColorsRe
   }, [resolvedTheme]);
 
   // generate high contrast color map if enabled
+  // Use activeKeys when available so only visible items get hues — fewer items = more separation
   const colorMap = useMemo(() => {
-    if (!highContrast || identifiers.length === 0) {
-      return null;
-    }
-    return generateHighContrastColors(identifiers, resolvedTheme || 'light', colorShuffleSeed);
-  }, [highContrast, identifiers, resolvedTheme, colorShuffleSeed]);
+    if (!highContrast) return null;
+    const keysForHc = activeKeys && activeKeys.length > 0 ? activeKeys : identifiers;
+    if (keysForHc.length === 0) return null;
+    return generateHighContrastColors(keysForHc, resolvedTheme || 'light', colorShuffleSeed);
+  }, [highContrast, activeKeys, identifiers, resolvedTheme, colorShuffleSeed]);
+
+  // generate dynamic vendor-aware colors for active keys
+  const vendorColorMap = useMemo(() => {
+    if (!activeKeys || activeKeys.length === 0) return null;
+    const theme = resolvedTheme === 'dark' ? 'dark' : 'light';
+    return generateVendorColors(activeKeys, theme);
+  }, [activeKeys, resolvedTheme]);
 
   // color resolver function
   const resolveColor = useCallback(
     (identifier: string, hardwareKey?: string): string => {
+      // 1. High contrast takes priority
       if (colorMap && identifier in colorMap) {
         return colorMap[identifier];
       }
 
-      // fallback to hardware config
-      const key = (hardwareKey || identifier) as keyof typeof HARDWARE_CONFIG;
-      return HARDWARE_CONFIG[key]?.color || HARDWARE_CONFIG.unknown.color;
+      // 2. Dynamic vendor colors
+      const lookupKey = hardwareKey || identifier;
+      if (vendorColorMap && lookupKey in vendorColorMap) {
+        return vendorColorMap[lookupKey];
+      }
+
+      // 3. Fallback — muted when dynamic system is active (inactive items),
+      //    otherwise foreground
+      return vendorColorMap ? 'var(--muted-foreground)' : 'var(--foreground)';
     },
-    [colorMap],
+    [colorMap, vendorColorMap],
   );
 
   // css color value resolver
   const getCssColor = useCallback(
     (color: string): string => {
+      // oklch(...) strings are already resolved — pass through
+      if (color.startsWith('oklch(') || color.startsWith('hsl(') || color.startsWith('#')) {
+        return color;
+      }
       return themeColors.rootStyles.getPropertyValue(color).trim() || color;
     },
     [themeColors],
@@ -107,6 +137,7 @@ export function useThemeColors(options: UseThemeColorsOptions): UseThemeColorsRe
   return {
     themeColors,
     colorMap,
+    vendorColorMap,
     resolveColor,
     getCssColor,
   };
diff --git a/packages/app/src/hooks/useTogglableSet.ts b/packages/app/src/hooks/useTogglableSet.ts
index 93aae02..c2edefd 100644
--- a/packages/app/src/hooks/useTogglableSet.ts
+++ b/packages/app/src/hooks/useTogglableSet.ts
@@ -33,7 +33,7 @@ export function computeToggle(prev: Set<string>, item: string, allItems: Set<str
 }
 
 /**
- * Hook for managing a toggleable set with "click to solo, click again to restore all" behavior.
+ * Hook for managing a togglable set with "click to solo, click again to restore all" behavior.
  */
 export function useTogglableSet() {
   const [activeSet, setActiveSet] = useState<Set<string>>(new Set());
@@ -46,5 +46,13 @@ export function useTogglableSet() {
     setActiveSet(allItems);
   }, []);
 
-  return { activeSet, setActiveSet, toggle, selectAll };
+  const remove = useCallback((item: string) => {
+    setActiveSet((prev) => {
+      const next = new Set(prev);
+      next.delete(item);
+      return next;
+    });
+  }, []);
+
+  return { activeSet, setActiveSet, toggle, selectAll, remove };
 }
diff --git a/packages/app/src/lib/api-cache.ts b/packages/app/src/lib/api-cache.ts
index 631f3aa..45f869b 100644
--- a/packages/app/src/lib/api-cache.ts
+++ b/packages/app/src/lib/api-cache.ts
@@ -1,3 +1,5 @@
+import { gzipSync } from 'node:zlib';
+
 import { revalidateTag } from 'next/cache';
 import { unstable_cache } from 'next/cache';
 
@@ -47,19 +49,14 @@ const CDN_HEADERS = {
   'Vercel-Cache-Tag': 'db',
 };
 
-/** CDN-cached streamed JSON response — supports up to 20 MB on Vercel CDN. */
+/** CDN-cached gzip-compressed JSON response — supports up to 20 MB on Vercel CDN. */
 export function cachedJson<T>(data: T): Response {
-  const bytes = new TextEncoder().encode(JSON.stringify(data));
-  const CHUNK = 64 * 1024;
-  const stream = new ReadableStream({
-    start(controller) {
-      for (let i = 0; i < bytes.length; i += CHUNK) {
-        controller.enqueue(bytes.subarray(i, i + CHUNK));
-      }
-      controller.close();
+  const compressed = gzipSync(JSON.stringify(data));
+  return new Response(compressed, {
+    headers: {
+      'Content-Type': 'application/json',
+      'Content-Encoding': 'gzip',
+      ...CDN_HEADERS,
     },
   });
-  return new Response(stream, {
-    headers: { 'Content-Type': 'application/json', ...CDN_HEADERS },
-  });
 }
diff --git a/packages/app/src/lib/api.ts b/packages/app/src/lib/api.ts
index 0646bb7..94004de 100644
--- a/packages/app/src/lib/api.ts
+++ b/packages/app/src/lib/api.ts
@@ -135,13 +135,3 @@ export function fetchReliability() {
 export function fetchEvaluations() {
   return fetchJson<EvalRow[]>('/api/v1/evaluations');
 }
-
-export interface GitHubStarsResponse {
-  owner: string;
-  repo: string;
-  stars: number;
-}
-
-export function fetchGitHubStars() {
-  return fetchJson<GitHubStarsResponse>('/api/v1/github-stars');
-}
diff --git a/packages/app/src/lib/chart-utils.test.ts b/packages/app/src/lib/chart-utils.test.ts
index 7531dc8..5276a1c 100644
--- a/packages/app/src/lib/chart-utils.test.ts
+++ b/packages/app/src/lib/chart-utils.test.ts
@@ -271,23 +271,27 @@ describe('buildAvailabilityHwKey', () => {
 // generateHighContrastColors
 // ===========================================================================
 describe('generateHighContrastColors', () => {
+  /** Extract hue from an "hsl(H, S%, L%)" string */
+  function parseHue(hsl: string): number {
+    return parseFloat(hsl.match(/hsl\(([\d.]+)/)![1]);
+  }
+
+  /** Angular distance between two hues on the 360° wheel */
+  function hueDist(a: number, b: number): number {
+    const d = Math.abs(a - b) % 360;
+    return Math.min(d, 360 - d);
+  }
+
+  // ---------- Basics ----------
+
   it('returns an empty object for an empty keys array', () => {
     expect(generateHighContrastColors([], 'dark')).toEqual({});
   });
 
-  it('returns one color for a single key', () => {
+  it('returns one HSL color for a single key', () => {
     const result = generateHighContrastColors(['gpu-a'], 'dark');
     expect(Object.keys(result)).toHaveLength(1);
-    expect(result['gpu-a']).toBe('hsl(0, 70%, 65%)'); // hue=0/1*360=0, dark lightness=65
-  });
-
-  it('distributes hues evenly across the spectrum', () => {
-    const result = generateHighContrastColors(['a', 'b', 'c', 'd'], 'dark');
-    // 4 keys → hues at 0, 90, 180, 270
-    expect(result['a']).toBe('hsl(0, 70%, 65%)');
-    expect(result['b']).toBe('hsl(90, 70%, 65%)');
-    expect(result['c']).toBe('hsl(180, 70%, 65%)');
-    expect(result['d']).toBe('hsl(270, 70%, 65%)');
+    expect(result['gpu-a']).toMatch(/^hsl\(\d/);
   });
 
   it('uses lightness 65% for dark theme', () => {
@@ -305,42 +309,130 @@ describe('generateHighContrastColors', () => {
     expect(result['x']).toContain('35%');
   });
 
-  it('returns the same colors when shuffleSeed is 0 (default)', () => {
-    const keys = ['h100', 'h200', 'b200', 'mi300x'];
-    const result = generateHighContrastColors(keys, 'dark', 0);
-    // hue 0, 90, 180, 270 in order
-    expect(result['h100']).toBe('hsl(0, 70%, 65%)');
-    expect(result['h200']).toBe('hsl(90, 70%, 65%)');
-    expect(result['b200']).toBe('hsl(180, 70%, 65%)');
-    expect(result['mi300x']).toBe('hsl(270, 70%, 65%)');
+  it('evenly spaces items within a single vendor zone', () => {
+    // 3 unknown-vendor items in the unknown zone (195-300, 105° span)
+    const result = generateHighContrastColors(['a', 'b', 'c'], 'dark');
+    const hues = Object.values(result).map(parseHue);
+    for (let i = 0; i < hues.length - 1; i++) {
+      expect(hueDist(hues[i], hues[i + 1])).toBeCloseTo(35, 0);
+    }
   });
 
+  // ---------- Vendor zone constraints ----------
+
+  it('NVIDIA items stay in green zone (60-195)', () => {
+    const keys = [
+      'b200_dynamo-sglang',
+      'b200_dynamo-trt',
+      'gb200_dynamo-trt',
+      'h100_dynamo-trt',
+      'h200_dynamo-trt',
+    ];
+    const result = generateHighContrastColors(keys, 'dark');
+    for (const hsl of Object.values(result)) {
+      const hue = parseHue(hsl);
+      expect(hue).toBeGreaterThanOrEqual(60);
+      expect(hue).toBeLessThanOrEqual(195);
+    }
+  });
+
+  it('AMD items stay in red/orange zone (300-360 or 0-60)', () => {
+    const keys = ['mi300x_sglang', 'mi325x_sglang', 'mi355x_mori-sglang'];
+    const result = generateHighContrastColors(keys, 'dark');
+    for (const hsl of Object.values(result)) {
+      const hue = parseHue(hsl);
+      expect(hue >= 300 || hue <= 60).toBe(true);
+    }
+  });
+
+  it('NVIDIA never gets red hues and AMD never gets green hues', () => {
+    const combos = [
+      ['b200_dynamo-sglang', 'b200_dynamo-trt', 'mi355x_mori-sglang'],
+      ['gb200_dynamo-trt', 'h100_dynamo-trt', 'mi300x_sglang', 'mi355x_mori-sglang'],
+      [
+        'b200_dynamo-sglang',
+        'b200_dynamo-trt',
+        'gb200_dynamo-trt',
+        'mi300x_sglang',
+        'mi355x_mori-sglang',
+      ],
+    ];
+    for (const keys of combos) {
+      const result = generateHighContrastColors(keys, 'dark');
+      for (const key of keys) {
+        const vendor = key.startsWith('mi') ? 'amd' : 'nvidia';
+        const hue = parseHue(result[key]);
+        if (vendor === 'nvidia') {
+          expect(hue >= 60 && hue <= 195).toBe(true);
+        } else {
+          expect(hue >= 300 || hue <= 60).toBe(true);
+        }
+      }
+    }
+  });
+
+  // ---------- Cross-vendor visual distinction ----------
+
+  it('2 NVIDIA + 1 AMD: all pairs ≥60° apart', () => {
+    const result = generateHighContrastColors(
+      ['b200_dynamo-sglang', 'b200_dynamo-trt', 'mi355x_mori-sglang'],
+      'dark',
+    );
+    const hues = Object.values(result).map(parseHue);
+    for (let i = 0; i < hues.length; i++) {
+      for (let j = i + 1; j < hues.length; j++) {
+        expect(hueDist(hues[i], hues[j])).toBeGreaterThanOrEqual(60);
+      }
+    }
+  });
+
+  it('mixed vendors never produce near-identical hues (≥30° min)', () => {
+    const combos = [
+      ['h100_vllm', 'mi300x_sglang'],
+      ['b200_dynamo-trt', 'mi355x_mori-sglang'],
+      ['h200_dynamo-trt', 'b200_dynamo-sglang', 'mi325x_sglang'],
+      ['gb200_dynamo-trt', 'h100_dynamo-trt', 'mi300x_sglang', 'mi355x_mori-sglang'],
+    ];
+    for (const keys of combos) {
+      const result = generateHighContrastColors(keys, 'dark');
+      const hues = Object.values(result).map(parseHue);
+      for (let i = 0; i < hues.length; i++) {
+        for (let j = i + 1; j < hues.length; j++) {
+          expect(hueDist(hues[i], hues[j])).toBeGreaterThanOrEqual(30);
+        }
+      }
+    }
+  });
+
+  // ---------- Shuffle ----------
+
   it('shuffles hue assignments when shuffleSeed is non-zero', () => {
-    const keys = ['h100', 'h200', 'b200', 'mi300x'];
+    const keys = ['h100_vllm', 'h200_vllm', 'b200_vllm', 'mi300x_sglang'];
     const unshuffled = generateHighContrastColors(keys, 'dark', 0);
     const shuffled = generateHighContrastColors(keys, 'dark', 42);
-    // The shuffled result should have the same set of hue values but differently assigned
-    const unshuffledHues = Object.values(unshuffled).sort();
-    const shuffledHues = Object.values(shuffled).sort();
-    // Same set of colors overall (same hues, just reassigned)
-    expect(shuffledHues).toEqual(unshuffledHues);
-    // At least one key should get a different color
-    const sameCount = keys.filter((k) => unshuffled[k] === shuffled[k]).length;
-    expect(sameCount).toBeLessThan(keys.length);
+    const unshuffledNv = ['h100_vllm', 'h200_vllm', 'b200_vllm'].map((k) => unshuffled[k]).sort();
+    const shuffledNv = ['h100_vllm', 'h200_vllm', 'b200_vllm'].map((k) => shuffled[k]).sort();
+    expect(shuffledNv).toEqual(unshuffledNv);
+  });
+
+  it('returns stable colors when shuffleSeed is 0', () => {
+    const keys = ['h100_vllm', 'h200_vllm', 'b200_vllm', 'mi300x_sglang'];
+    const r1 = generateHighContrastColors(keys, 'dark', 0);
+    const r2 = generateHighContrastColors(keys, 'dark', 0);
+    expect(r1).toEqual(r2);
   });
 
   it('produces deterministic results for the same seed', () => {
-    const keys = ['h100', 'h200', 'b200', 'mi300x', 'mi325x'];
+    const keys = ['h100_vllm', 'h200_vllm', 'b200_vllm', 'mi300x_sglang', 'mi325x_sglang'];
     const result1 = generateHighContrastColors(keys, 'dark', 7);
     const result2 = generateHighContrastColors(keys, 'dark', 7);
     expect(result1).toEqual(result2);
   });
 
   it('produces different results for different seeds', () => {
-    const keys = ['h100', 'h200', 'b200', 'mi300x', 'mi325x'];
+    const keys = ['h100_vllm', 'h200_vllm', 'b200_vllm', 'mi300x_sglang', 'mi325x_sglang'];
     const result1 = generateHighContrastColors(keys, 'dark', 1);
     const result2 = generateHighContrastColors(keys, 'dark', 2);
-    // At least one key should differ
     const sameCount = keys.filter((k) => result1[k] === result2[k]).length;
     expect(sameCount).toBeLessThan(keys.length);
   });
diff --git a/packages/app/src/lib/chart-utils.ts b/packages/app/src/lib/chart-utils.ts
index 0b4b664..da1899c 100644
--- a/packages/app/src/lib/chart-utils.ts
+++ b/packages/app/src/lib/chart-utils.ts
@@ -4,10 +4,11 @@
  * They do NOT import Node.js-specific modules (fs, path) or build-time dependencies.
  */
 
-import { resolveFrameworkAlias } from '@semianalysisai/inferencex-constants';
+import { resolveFrameworkAlias, VENDOR_HSL_ZONES } from '@semianalysisai/inferencex-constants';
 
 import { AggDataEntry, ChartDefinition, InferenceData } from '@/components/inference/types';
 import { getGpuSpecs, HARDWARE_CONFIG } from '@/lib/constants';
+import { getVendor } from '@/lib/dynamic-colors';
 
 /**
  * Simple seeded pseudo-random number generator (mulberry32).
@@ -37,9 +38,14 @@ export function seededShuffle<T>(array: T[], seed: number): T[] {
   return result;
 }
 
+// ---------------------------------------------------------------------------
+// High-contrast color generation
+// ---------------------------------------------------------------------------
 /**
  * Generates high contrast colors for chart elements using HSL color space.
- * Colors are evenly distributed across the hue spectrum for maximum distinction.
+ * Each vendor's keys are distributed across allowed hue ranges (excluding
+ * other vendors' brand bands) for maximum distinction without confusing
+ * color associations. With 10+ keys per vendor, uses the full hue wheel.
  * @param keys - Array of keys (hardware types, models, etc.) to generate colors for
  * @param theme - Current theme ('dark' or 'light') to adjust lightness
  * @param shuffleSeed - Optional seed for shuffling hue assignments. 0 = no shuffle.
@@ -51,19 +57,48 @@ export const generateHighContrastColors = (
   shuffleSeed: number = 0,
 ): { [key: string]: string } => {
   const colors: { [key: string]: string } = {};
-  const numKeys = keys.length;
-  // adjust lightness based on theme for better contrast
   const lightness = theme === 'dark' ? 65 : 35;
 
-  // Generate evenly spaced hues
-  const hues = keys.map((_, index) => (index * 360) / numKeys);
+  // Group keys by vendor, sort within each group for stability
+  const groups = new Map<string, string[]>();
+  for (const key of keys) {
+    const vendor = getVendor(key);
+    let list = groups.get(vendor);
+    if (!list) {
+      list = [];
+      groups.set(vendor, list);
+    }
+    list.push(key);
+  }
 
-  // Shuffle hue assignments if seed is non-zero
-  const assignedHues = shuffleSeed !== 0 ? seededShuffle(hues, shuffleSeed) : hues;
+  for (const [vendor, vendorKeys] of groups) {
+    const ranges = VENDOR_HSL_ZONES[vendor] ?? [{ start: 0, span: 360 }];
+    const totalSpan = ranges.reduce((s, r) => s + r.span, 0);
+    const count = vendorKeys.length;
+
+    let hues: number[] = [];
+    for (let i = 0; i < count; i++) {
+      const pos = count <= 1 ? totalSpan / 2 : ((i + 0.5) / count) * totalSpan;
+      let remaining = pos;
+      let hue = 0;
+      for (const range of ranges) {
+        if (remaining <= range.span) {
+          hue = (range.start + remaining) % 360;
+          break;
+        }
+        remaining -= range.span;
+      }
+      hues.push(hue);
+    }
 
-  keys.forEach((key, index) => {
-    colors[key] = `hsl(${assignedHues[index]}, 70%, ${lightness}%)`;
-  });
+    if (shuffleSeed !== 0) {
+      hues = seededShuffle(hues, shuffleSeed);
+    }
+
+    vendorKeys.forEach((key, i) => {
+      colors[key] = `hsl(${hues[i].toFixed(1)}, 70%, ${lightness}%)`;
+    });
+  }
   return colors;
 };
 
diff --git a/packages/app/src/lib/constants.test.ts b/packages/app/src/lib/constants.test.ts
index 44af7c9..c4868e6 100644
--- a/packages/app/src/lib/constants.test.ts
+++ b/packages/app/src/lib/constants.test.ts
@@ -102,12 +102,11 @@ describe('getHardwareConfig', () => {
     expect(config).toBe(HARDWARE_CONFIG.unknown);
   });
 
-  it('always returns an object with required fields (name, label, color)', () => {
+  it('always returns an object with required fields (name, label)', () => {
     for (const hwKey of ['h100', 'h200', 'unknown', 'b200', 'gb200']) {
       const config = getHardwareConfig(hwKey);
       expect(typeof config.name).toBe('string');
       expect(typeof config.label).toBe('string');
-      expect(typeof config.color).toBe('string');
     }
   });
 
@@ -173,98 +172,6 @@ describe('getGpuSpecs', () => {
   });
 });
 
-// ===========================================================================
-// getColorFamily
-// each test uses vi.resetModules() + dynamic import to get a fresh module
-// instance, preventing vendor counter / cache state from leaking between tests.
-// ===========================================================================
-describe('getColorFamily', () => {
-  beforeEach(() => {
-    vi.resetModules();
-  });
-
-  // Helper to assert a palette is a non-empty array of CSS color strings
-  function isColorPalette(palette: unknown): void {
-    expect(Array.isArray(palette)).toBe(true);
-    expect((palette as string[]).length).toBeGreaterThan(0);
-    for (const color of palette as string[]) {
-      expect(typeof color).toBe('string');
-      expect(color.length).toBeGreaterThan(0);
-    }
-  }
-
-  it('returns a non-empty color array for h-prefixed (NVIDIA) GPUs', async () => {
-    const { getColorFamily } = await import('@/lib/constants');
-    isColorPalette(getColorFamily('h100'));
-  });
-
-  it('returns a non-empty color array for b-prefixed (NVIDIA) GPUs', async () => {
-    const { getColorFamily } = await import('@/lib/constants');
-    isColorPalette(getColorFamily('b200'));
-  });
-
-  it('returns a non-empty color array for gb-prefixed (NVIDIA) GPUs', async () => {
-    const { getColorFamily } = await import('@/lib/constants');
-    isColorPalette(getColorFamily('gb200'));
-  });
-
-  it('returns a non-empty color array for mi-prefixed (AMD) GPUs', async () => {
-    const { getColorFamily } = await import('@/lib/constants');
-    isColorPalette(getColorFamily('mi300x'));
-  });
-
-  it('returns a non-empty color array for unrecognized GPU vendor prefixes', async () => {
-    const { getColorFamily } = await import('@/lib/constants');
-    isColorPalette(getColorFamily('custom-gpu'));
-  });
-
-  it('AMD and NVIDIA palettes are distinct (vendor detection routes correctly)', async () => {
-    const { getColorFamily } = await import('@/lib/constants');
-    const nvidia = getColorFamily('h100');
-    const amd = getColorFamily('mi300x');
-    // palettes from different vendors must not be identical arrays
-    expect(nvidia).not.toEqual(amd);
-  });
-
-  it('NVIDIA and unknown palettes are distinct', async () => {
-    const { getColorFamily } = await import('@/lib/constants');
-    const nvidia = getColorFamily('h100');
-    const unknown = getColorFamily('custom-gpu');
-    expect(nvidia).not.toEqual(unknown);
-  });
-
-  it('returns the same array reference for the same GPU key (caching)', async () => {
-    const { getColorFamily } = await import('@/lib/constants');
-    const first = getColorFamily('h100');
-    const second = getColorFamily('h100');
-    expect(first).toBe(second); // strict reference equality
-  });
-
-  it('does not share cached assignment across different GPU keys', async () => {
-    const { getColorFamily } = await import('@/lib/constants');
-    const a = getColorFamily('h100');
-    const b = getColorFamily('h200');
-    expect(a).not.toBe(b);
-  });
-
-  it('rotates through palettes: two different NVIDIA GPUs get different arrays', async () => {
-    const { getColorFamily } = await import('@/lib/constants');
-    const first = getColorFamily('h100');
-    const second = getColorFamily('h200');
-    // rotation means the second assignment cycles to the next palette
-    expect(first).not.toBe(second);
-    expect(first).not.toEqual(second);
-  });
-
-  it('rotates through palettes: two different AMD GPUs get different arrays', async () => {
-    const { getColorFamily } = await import('@/lib/constants');
-    const first = getColorFamily('mi300x');
-    const second = getColorFamily('mi300a');
-    expect(first).not.toBe(second);
-    expect(first).not.toEqual(second);
-  });
-});
-
 // ===========================================================================
 // getModelSortIndex
 // ===========================================================================
diff --git a/packages/app/src/lib/constants.ts b/packages/app/src/lib/constants.ts
index c8d8f81..a8ee5bf 100644
--- a/packages/app/src/lib/constants.ts
+++ b/packages/app/src/lib/constants.ts
@@ -54,385 +54,330 @@ export const HARDWARE_CONFIG: HardwareConfig = {
     label: 'H100',
     suffix: '',
     gpu: "NVIDIA 'Hopper' H100",
-    color: 'var(--h100)',
   },
   'h100_dynamo-trt': {
     name: 'h100-dynamo-trt',
     label: 'H100',
     suffix: '(Dynamo TRT)',
     gpu: "NVIDIA 'Hopper' H100 Dynamo TRT",
-    color: 'var(--h100-dynamo-trt)',
   },
   'h100_dynamo-trt_mtp': {
     name: 'h100-dynamo-trt-mtp',
     label: 'H100',
     suffix: '(Dynamo TRT, MTP)',
     gpu: "NVIDIA 'Hopper' H100 Dynamo TRT MTP",
-    color: 'var(--h100-dynamo-trt-mtp)',
   },
   'h100_dynamo-sglang_mtp': {
     name: 'h100-dynamo-sglang-mtp',
     label: 'H100',
     suffix: '(Dynamo SGLang, MTP)',
     gpu: "NVIDIA 'Hopper' H100 Dynamo SGLang MTP",
-    color: 'var(--h100-dynamo-sglang-mtp)',
   },
   h100_vllm: {
     name: 'h100-vllm',
     label: 'H100',
     suffix: '(vLLM)',
     gpu: "NVIDIA 'Hopper' H100 vLLM",
-    color: 'var(--h100-vllm)',
   },
   h200: {
     name: 'h200',
     label: 'H200',
     suffix: '',
     gpu: "NVIDIA 'Hopper' H200",
-    color: 'var(--h200)',
   },
   h200_trt: {
     name: 'h200-trt',
     label: 'H200',
     suffix: '(TRT)',
     gpu: "NVIDIA 'Hopper' H200 TRT",
-    color: 'var(--h200-trt)',
   },
   h200_trt_mtp: {
     name: 'h200-trt-mtp',
     label: 'H200',
     suffix: '(TRT, MTP)',
     gpu: "NVIDIA 'Hopper' H200 TRT MTP",
-    color: 'var(--h200-trt-mtp)',
   },
   'h200_dynamo-trt': {
     name: 'h200-dynamo-trt',
     label: 'H200',
     suffix: '(Dynamo TRT)',
     gpu: "NVIDIA 'Hopper' H200 Dynamo TRT",
-    color: 'var(--h200-dynamo-trt)',
   },
   'h200_dynamo-trt_mtp': {
     name: 'h200-dynamo-trt-mtp',
     label: 'H200',
     suffix: '(Dynamo TRT, MTP)',
     gpu: "NVIDIA 'Hopper' H200 Dynamo TRT MTP",
-    color: 'var(--h200-dynamo-trt-mtp)',
   },
   h200_sglang: {
     name: 'h200-sglang',
     label: 'H200',
     suffix: '(SGLang)',
     gpu: "NVIDIA 'Hopper' H200 SGLang",
-    color: 'var(--h200-sglang)',
   },
   'h200_dynamo-sglang': {
     name: 'h200-dynamo-sglang',
     label: 'H200',
     suffix: '(Dynamo SGLang)',
     gpu: "NVIDIA 'Hopper' H200 Dynamo SGLang",
-    color: 'var(--h200-dynamo-sglang)',
   },
   'h200_dynamo-sglang_mtp': {
     name: 'h200-dynamo-sglang-mtp',
     label: 'H200',
     suffix: '(Dynamo SGLang, MTP)',
     gpu: "NVIDIA 'Hopper' H200 Dynamo SGLang MTP",
-    color: 'var(--h200-dynamo-sglang-mtp)',
   },
   h200_vllm: {
     name: 'h200-vllm',
     label: 'H200',
     suffix: '(vLLM)',
     gpu: "NVIDIA 'Hopper' H200 vLLM",
-    color: 'var(--h200-vllm)',
   },
   b200: {
     name: 'b200',
     label: 'B200',
     suffix: '',
     gpu: "NVIDIA 'Blackwell' B200",
-    color: 'var(--b200)',
   },
   b200_trt: {
     name: 'b200-trt',
     label: 'B200',
     suffix: '(TRT)',
     gpu: "NVIDIA 'Blackwell' B200 TRT",
-    color: 'var(--b200-trt)',
   },
   b200_trt_mtp: {
     name: 'b200-trt-mtp',
     label: 'B200',
     suffix: '(TRT, MTP)',
     gpu: "NVIDIA 'Blackwell' B200 TRT MTP",
-    color: 'var(--b200-trt-mtp)',
   },
   'b200_dynamo-trt': {
     name: 'b200-dynamo-trt',
     label: 'B200',
     suffix: '(Dynamo TRT)',
     gpu: "NVIDIA 'Blackwell' B200 Dynamo TRT",
-    color: 'var(--b200-dynamo-trt)',
   },
   'b200_dynamo-trt_mtp': {
     name: 'b200-dynamo-trt-mtp',
     label: 'B200',
     suffix: '(Dynamo TRT, MTP)',
     gpu: "NVIDIA 'Blackwell' B200 Dynamo TRT MTP",
-    color: 'var(--b200-dynamo-trt-mtp)',
   },
   b200_sglang: {
     name: 'b200-sglang',
     label: 'B200',
     suffix: '(SGLang)',
     gpu: "NVIDIA 'Blackwell' B200 SGLang",
-    color: 'var(--b200-sglang)',
   },
   b200_sglang_mtp: {
     name: 'b200-sglang-mtp',
     label: 'B200',
     suffix: '(SGLang, MTP)',
     gpu: "NVIDIA 'Blackwell' B200 SGLang MTP",
-    color: 'var(--b200-sglang-mtp)',
   },
   'b200_dynamo-sglang': {
     name: 'b200-dynamo-sglang',
     label: 'B200',
     suffix: '(Dynamo SGLang)',
     gpu: "NVIDIA 'Blackwell' B200 Dynamo SGLang",
-    color: 'var(--b200-dynamo-sglang)',
   },
   'b200_dynamo-sglang_mtp': {
     name: 'b200-dynamo-sglang-mtp',
     label: 'B200',
     suffix: '(Dynamo SGLang, MTP)',
     gpu: "NVIDIA 'Blackwell' B200 Dynamo SGLang MTP",
-    color: 'var(--b200-dynamo-sglang-mtp)',
   },
   b200_vllm: {
     name: 'b200-vllm',
     label: 'B200',
     suffix: '(vLLM)',
     gpu: "NVIDIA 'Blackwell' B200 vLLM",
-    color: 'var(--b200-vllm)',
   },
   b300: {
     name: 'b300',
     label: 'B300',
     suffix: '',
     gpu: "NVIDIA 'Blackwell' B300",
-    color: 'var(--b300)',
   },
   'b300_dynamo-trt': {
     name: 'b300-dynamo-trt',
     label: 'B300',
     suffix: '(Dynamo TRT)',
     gpu: "NVIDIA 'Blackwell' B300 Dynamo TRT",
-    color: 'var(--b300-dynamo-trt)',
   },
   'b300_dynamo-trt_mtp': {
     name: 'b300-dynamo-trt-mtp',
     label: 'B300',
     suffix: '(Dynamo TRT, MTP)',
     gpu: "NVIDIA 'Blackwell' B300 Dynamo TRT MTP",
-    color: 'var(--b300-dynamo-trt-mtp)',
   },
   gb200: {
     name: 'gb200',
     label: 'GB200 NVL72',
     suffix: '',
     gpu: "NVIDIA 'Blackwell' GB200",
-    color: 'var(--gb200)',
   },
   gb200_mtp: {
     name: 'gb200-mtp',
     label: 'GB200 NVL72',
     suffix: '(MTP)',
     gpu: "NVIDIA 'Blackwell' GB200 MTP",
-    color: 'var(--gb200-mtp)',
   },
   'gb200_dynamo-trt': {
     name: 'gb200-dynamo-trt',
     label: 'GB200 NVL72',
     suffix: '(Dynamo TRT)',
     gpu: "NVIDIA 'Blackwell' GB200 Dynamo TRT",
-    color: 'var(--gb200-dynamo-trt)',
   },
   'gb200_dynamo-trt_mtp': {
     name: 'gb200-dynamo-trt-mtp',
     label: 'GB200 NVL72',
     suffix: '(Dynamo TRT, MTP)',
     gpu: "NVIDIA 'Blackwell' GB200 Dynamo TRT MTP",
-    color: 'var(--gb200-dynamo-trt-mtp)',
   },
   'gb200_dynamo-trtllm': {
     name: 'gb200-dynamo-trtllm',
     label: 'GB200 NVL72',
     suffix: '(Dynamo TRT)',
     gpu: "NVIDIA 'Blackwell' GB200 Dynamo TRT",
-    color: 'var(--gb200-dynamo-trtllm)',
   },
   'gb200_dynamo-trtllm_mtp': {
     name: 'gb200-dynamo-trtllm-mtp',
     label: 'GB200 NVL72',
     suffix: '(Dynamo TRT, MTP)',
     gpu: "NVIDIA 'Blackwell' GB200 Dynamo TRT MTP",
-    color: 'var(--gb200-dynamo-trtllm-mtp)',
   },
   'gb200_dynamo-sglang': {
     name: 'gb200-dynamo-sglang',
     label: 'GB200 NVL72',
     suffix: '(Dynamo SGLang)',
     gpu: "NVIDIA 'Blackwell' GB200 Dynamo SGLang",
-    color: 'var(--gb200-dynamo-sglang)',
   },
   gb300: {
     name: 'gb300',
     label: 'GB300 NVL72',
     suffix: '',
     gpu: "NVIDIA 'Blackwell' GB300",
-    color: 'var(--gb300)',
   },
   'gb300_dynamo-trt': {
     name: 'gb300-dynamo-trt',
     label: 'GB300 NVL72',
     suffix: '(Dynamo TRT)',
     gpu: "NVIDIA 'Blackwell' GB300 Dynamo TRT",
-    color: 'var(--gb300-dynamo-trt)',
   },
   'gb300_dynamo-trt_mtp': {
     name: 'gb300-dynamo-trt-mtp',
     label: 'GB300 NVL72',
     suffix: '(Dynamo TRT, MTP)',
     gpu: "NVIDIA 'Blackwell' GB300 Dynamo TRT MTP",
-    color: 'var(--gb300-dynamo-trt-mtp)',
   },
   'gb300_dynamo-trtllm': {
     name: 'gb300-dynamo-trtllm',
     label: 'GB300 NVL72',
     suffix: '(Dynamo TRT)',
     gpu: "NVIDIA 'Blackwell' GB300 Dynamo TRT",
-    color: 'var(--gb300-dynamo-trtllm)',
   },
   'gb300_dynamo-trtllm_mtp': {
     name: 'gb300-dynamo-trtllm-mtp',
     label: 'GB300 NVL72',
     suffix: '(Dynamo TRT, MTP)',
     gpu: "NVIDIA 'Blackwell' GB300 Dynamo TRT MTP",
-    color: 'var(--gb300-dynamo-trtllm-mtp)',
   },
   'gb300_dynamo-sglang': {
     name: 'gb300-dynamo-sglang',
     label: 'GB300 NVL72',
     suffix: '(Dynamo SGLang)',
     gpu: "NVIDIA 'Blackwell' GB300 Dynamo SGLang",
-    color: 'var(--gb300-dynamo-sglang)',
   },
   mi300x: {
     name: 'mi300x',
     label: 'MI300X',
     suffix: '',
     gpu: 'AMD MI300X',
-    color: 'var(--mi300x)',
   },
   mi300x_sglang: {
     name: 'mi300x-sglang',
     label: 'MI300X',
     suffix: '(SGLang)',
     gpu: 'AMD MI300X SGLang',
-    color: 'var(--mi300x-sglang)',
   },
   mi300x_vllm: {
     name: 'mi300x-vllm',
     label: 'MI300X',
     suffix: '(vLLM)',
     gpu: 'AMD MI300X vLLM',
-    color: 'var(--mi300x-vllm)',
   },
   mi325x: {
     name: 'mi325x',
     label: 'MI325X',
     suffix: '',
     gpu: 'AMD MI325X',
-    color: 'var(--mi325x)',
   },
   mi325x_sglang: {
     name: 'mi325x-sglang',
     label: 'MI325X',
     suffix: '(SGLang)',
     gpu: 'AMD MI325X SGLang',
-    color: 'var(--mi325x-sglang)',
   },
   mi325x_vllm: {
     name: 'mi325x-vllm',
     label: 'MI325X',
     suffix: '(vLLM)',
     gpu: 'AMD MI325X vLLM',
-    color: 'var(--mi325x-vllm)',
   },
   mi355x: {
     name: 'mi355x',
     label: 'MI355X',
     suffix: '',
     gpu: 'AMD MI355X',
-    color: 'var(--mi355x)',
   },
   'mi355x_mori-sglang': {
     name: 'mi355x-mori-sglang',
     label: 'MI355X',
     suffix: '(MoRI SGLang)',
     gpu: 'AMD MI355X MoRI SGLang',
-    color: 'var(--mi355x-mori-sglang)',
   },
   'mi355x_mori-sglang_mtp': {
     name: 'mi355x-mori-sglang-mtp',
     label: 'MI355X',
     suffix: '(MoRI SGLang, MTP)',
     gpu: 'AMD MI355X MoRI SGLang MTP',
-    color: 'var(--mi355x-mori-sglang-mtp)',
   },
   mi355x_sglang: {
     name: 'mi355x-sglang',
     label: 'MI355X',
     suffix: '(SGLang)',
     gpu: 'AMD MI355X SGLang',
-    color: 'var(--mi355x-sglang)',
   },
   mi355x_sglang_mtp: {
     name: 'mi355x-sglang-mtp',
     label: 'MI355X',
     suffix: '(SGLang, MTP)',
     gpu: 'AMD MI355X SGLang MTP',
-    color: 'var(--mi355x-sglang-mtp)',
   },
   mi355x_vllm: {
     name: 'mi355x-vllm',
     label: 'MI355X',
     suffix: '(vLLM)',
     gpu: 'AMD MI355X vLLM',
-    color: 'var(--mi355x-vllm)',
   },
   mi355x_atom: {
     name: 'mi355x-atom',
     label: 'MI355X',
     suffix: '(ATOM¹)',
     gpu: 'AMD MI355X ATOM',
-    color: 'var(--mi355x-atom)',
   },
   mi355x_atom_mtp: {
     name: 'mi355x-atom-mtp',
     label: 'MI355X',
     suffix: '(ATOM¹, MTP)',
     gpu: 'AMD MI355X ATOM MTP',
-    color: 'var(--mi355x-atom-mtp)',
   },
   unknown: {
     name: 'unknown',
     gpu: 'Unknown Hardware',
     label: 'Unknown',
     suffix: '',
-    color: 'var(--foreground)',
   },
 };
 
@@ -533,63 +478,3 @@ export function getHardwareConfig(
 
   return config;
 }
-
-// cache to ensure each GPU gets a consistent, unique palette
-const assignedPalettes = new Map<string, string[]>();
-const vendorCounters = new Map<string, number>();
-
-/**
- * Color families for GPU comparison charts
- */
-const COLOR_FAMILIES = {
-  nvidia: [
-    ['#76b900', '#a3e635', '#4d7c00', '#caff66', '#2d5900', '#1a3d00'],
-    ['#00cc66', '#33ff99', '#008844', '#66ffaa', '#005522', '#003311'],
-  ],
-  amd: [
-    ['#e60000', '#ff4d4d', '#b30000', '#ff8080', '#800000', '#4d0000'],
-    ['#ff5500', '#ff8533', '#cc4400', '#ffaa66', '#993300', '#662200'],
-  ],
-  unknown: [
-    ['#3b82f6', '#60a5fa', '#1d4ed8', '#93c5fd', '#1e40af', '#0f2a5c'],
-    ['#8b5cf6', '#a78bfa', '#6d28d9', '#c4b5fd', '#5b21b6', '#3b1f6b'],
-  ],
-};
-
-/**
- * Get color family array for a specific GPU
- * Determines vendor from GPU key and returns appropriate color palette
- * Uses memory to avoid duplicate color assignments
- */
-export function getColorFamily(hwKey: string): string[] {
-  if (assignedPalettes.has(hwKey)) {
-    return assignedPalettes.get(hwKey)!;
-  }
-
-  const isAMD = hwKey.startsWith('mi');
-  const isNVIDIA = hwKey.startsWith('h') || hwKey.startsWith('b') || hwKey.startsWith('gb');
-
-  const vendor = isAMD ? 'amd' : isNVIDIA ? 'nvidia' : 'other';
-
-  let families: typeof COLOR_FAMILIES.nvidia;
-  switch (vendor) {
-    case 'amd':
-      families = COLOR_FAMILIES.amd;
-      break;
-    case 'nvidia':
-      families = COLOR_FAMILIES.nvidia;
-      break;
-    default:
-      families = COLOR_FAMILIES.unknown;
-  }
-
-  // assign next available palette for this vendor
-  const counter = vendorCounters.get(vendor) || 0;
-  const paletteIndex = counter % families.length;
-  vendorCounters.set(vendor, counter + 1);
-
-  const palette = families[paletteIndex];
-  assignedPalettes.set(hwKey, palette);
-
-  return palette;
-}
diff --git a/packages/app/src/lib/dynamic-colors.ts b/packages/app/src/lib/dynamic-colors.ts
new file mode 100644
index 0000000..e3af207
--- /dev/null
+++ b/packages/app/src/lib/dynamic-colors.ts
@@ -0,0 +1,165 @@
+/**
+ * Dynamic vendor-aware color assignment for charts.
+ *
+ * Instead of pre-assigning a fixed color to every hardware config,
+ * this module divides OKLch hue space into vendor zones and distributes
+ * hues evenly among only the *active* (checked) items. Fewer active items
+ * → more perceptual distance between colors → easier to distinguish.
+ */
+
+import { GPU_VENDORS, VENDOR_OKLCH_ZONES } from '@semianalysisai/inferencex-constants';
+import { getModelSortIndex } from '@/lib/constants';
+
+// ---------------------------------------------------------------------------
+// Vendor detection
+// ---------------------------------------------------------------------------
+
+export type Vendor = 'nvidia' | 'amd' | 'unknown';
+
+/** Determine vendor from a hardware key by looking up GPU_VENDORS. */
+export function getVendor(hwKey: string): Vendor {
+  // hwKey may have a framework suffix (e.g. "h100_vllm") — strip it to get the GPU base key
+  const base = hwKey.split('_')[0];
+  const vendor = GPU_VENDORS[base];
+  if (vendor === 'NVIDIA') return 'nvidia';
+  if (vendor === 'AMD') return 'amd';
+  return 'unknown';
+}
+
+// Vendor color zones are defined in @semianalysisai/inferencex-constants (gpu-keys.ts).
+// VENDOR_OKLCH_ZONES — OKLch hue zones for normal-mode vendor colors.
+// VENDOR_HSL_ZONES   — HSL hue zones for high-contrast mode.
+
+// ---------------------------------------------------------------------------
+// Lightness ranges
+// ---------------------------------------------------------------------------
+
+/** Lightness range for the standard (non-date-comparison) palette. */
+const LIGHTNESS = {
+  light: { min: 0.42, max: 0.68 },
+  dark: { min: 0.5, max: 0.78 },
+} as const;
+
+/** When there are many items we can use the full lightness range for extra separation. */
+function pickLightness(index: number, count: number, theme: 'light' | 'dark'): number {
+  const { min, max } = LIGHTNESS[theme];
+  if (count <= 1) return (min + max) / 2;
+  // Spread evenly — brightest first so the "top" legend entry pops.
+  return max - (index / (count - 1)) * (max - min);
+}
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+/**
+ * Generate an OKLch color for each active hardware key.
+ *
+ * Keys are grouped by vendor, sorted for stability, then each group's
+ * hues are evenly spaced across the vendor's zone.  When a single vendor
+ * has many items, lightness is also varied for extra differentiation.
+ *
+ * @param activeKeys - The hardware keys that are currently checked / visible.
+ * @param theme      - 'light' or 'dark'.
+ * @returns Map of hwKey → `oklch(L C H)` string.
+ */
+export function generateVendorColors(
+  activeKeys: string[],
+  theme: 'light' | 'dark',
+): Record<string, string> {
+  const result: Record<string, string> = {};
+
+  // Group by vendor
+  const groups = new Map<Vendor, string[]>();
+  for (const key of activeKeys) {
+    const vendor = getVendor(key);
+    let list = groups.get(vendor);
+    if (!list) {
+      list = [];
+      groups.set(vendor, list);
+    }
+    list.push(key);
+  }
+
+  // For each vendor, sort then distribute hues
+  for (const [vendor, keys] of groups) {
+    // Stable sort: model sort index first, then alphabetical
+    keys.sort((a, b) => getModelSortIndex(a) - getModelSortIndex(b) || a.localeCompare(b));
+
+    const zone = VENDOR_OKLCH_ZONES[vendor];
+    const chroma = zone.chroma[theme];
+    const count = keys.length;
+
+    for (let i = 0; i < count; i++) {
+      // Evenly space hues, with padding at the edges so the first and last
+      // don't land right on the boundary.
+      const hue =
+        count <= 1
+          ? (zone.start + zone.end) / 2
+          : zone.start + ((i + 0.5) / count) * (zone.end - zone.start);
+
+      const lightness = pickLightness(i, count, theme);
+      result[keys[i]] = `oklch(${lightness.toFixed(3)} ${chroma} ${hue.toFixed(1)})`;
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Generate colors for the GPU-date comparison graph.
+ *
+ * Each GPU gets a distinct hue (within its vendor zone). Each date for that
+ * GPU gets a different lightness — lighter = older, darker = newer.
+ *
+ * @param gpuKeys   - The GPU hardware keys being compared.
+ * @param dateCount - Number of dates being compared.
+ * @param theme     - 'light' or 'dark'.
+ * @returns Map of `${date-index}_${hwKey}` → color string.
+ */
+export function generateGpuDateColors(
+  gpuKeys: string[],
+  dateCount: number,
+  theme: 'light' | 'dark',
+): Record<string, string> {
+  const result: Record<string, string> = {};
+
+  // Group GPUs by vendor for hue assignment
+  const groups = new Map<Vendor, string[]>();
+  for (const key of gpuKeys) {
+    const vendor = getVendor(key);
+    let list = groups.get(vendor);
+    if (!list) {
+      list = [];
+      groups.set(vendor, list);
+    }
+    list.push(key);
+  }
+
+  const { min: lMin, max: lMax } = LIGHTNESS[theme];
+
+  for (const [vendor, keys] of groups) {
+    keys.sort((a, b) => getModelSortIndex(a) - getModelSortIndex(b) || a.localeCompare(b));
+
+    const zone = VENDOR_OKLCH_ZONES[vendor];
+    const chroma = zone.chroma[theme];
+    const gpuCount = keys.length;
+
+    for (let gi = 0; gi < gpuCount; gi++) {
+      const hue =
+        gpuCount <= 1
+          ? (zone.start + zone.end) / 2
+          : zone.start + ((gi + 0.5) / gpuCount) * (zone.end - zone.start);
+
+      for (let di = 0; di < dateCount; di++) {
+        // Oldest date = lightest, newest = darkest
+        const lightness =
+          dateCount <= 1 ? (lMin + lMax) / 2 : lMax - (di / (dateCount - 1)) * (lMax - lMin);
+        const compositeKey = `${di}_${keys[gi]}`;
+        result[compositeKey] = `oklch(${lightness.toFixed(3)} ${chroma} ${hue.toFixed(1)})`;
+      }
+    }
+  }
+
+  return result;
+}
diff --git a/packages/app/src/lib/github-stars.server.ts b/packages/app/src/lib/github-stars.server.ts
new file mode 100644
index 0000000..26413e5
--- /dev/null
+++ b/packages/app/src/lib/github-stars.server.ts
@@ -0,0 +1,22 @@
+import { GITHUB_OWNER, GITHUB_REPO } from '@semianalysisai/inferencex-constants';
+
+/**
+ * Fetch the GitHub star count directly from the GitHub API.
+ * Intended for server-side use (layouts, API routes).
+ */
+export async function fetchStarCount(): Promise<number | null> {
+  try {
+    const res = await fetch(`https://api.github.com/repos/${GITHUB_OWNER}/${GITHUB_REPO}`, {
+      headers: {
+        Accept: 'application/vnd.github.v3+json',
+        ...(process.env.GITHUB_TOKEN && { Authorization: `token ${process.env.GITHUB_TOKEN}` }),
+      },
+      next: { revalidate: 3600 },
+    });
+    if (!res.ok) return null;
+    const data = await res.json();
+    return data.stargazers_count ?? null;
+  } catch {
+    return null;
+  }
+}
diff --git a/packages/app/src/lib/tab-meta.ts b/packages/app/src/lib/tab-meta.ts
index 5120898..c3d8935 100644
--- a/packages/app/src/lib/tab-meta.ts
+++ b/packages/app/src/lib/tab-meta.ts
@@ -1,4 +1,12 @@
-import { AUTHOR_NAME, SITE_NAME } from '@semianalysisai/inferencex-constants';
+import type { Metadata } from 'next';
+
+import { AUTHOR_NAME, SITE_NAME, SITE_URL } from '@semianalysisai/inferencex-constants';
+
+export const LANDING_META = {
+  title: 'Open Source AI Inference Benchmark',
+  description:
+    'Compare AI inference performance across GPUs and frameworks. Real benchmarks on NVIDIA GB200, B200, AMD MI355X, and more. Free, open-source, continuously updated.',
+};
 
 export const VALID_TABS = [
   'inference',
@@ -60,3 +68,23 @@ export function getTabTitle(tab: string): string {
   const meta = TAB_META[tab as TabKey];
   return meta ? `${meta.title} | ${TITLE_SUFFIX}` : TITLE_SUFFIX;
 }
+
+/** Generate Next.js Metadata for a tab page. */
+export function tabMetadata(tab: TabKey): Metadata {
+  const meta = TAB_META[tab];
+  const url = tab === 'inference' ? SITE_URL : `${SITE_URL}/${tab}`;
+  return {
+    title: meta.title,
+    description: meta.description,
+    alternates: { canonical: url },
+    openGraph: {
+      title: `${meta.title} | InferenceX`,
+      description: meta.description,
+      url,
+    },
+    twitter: {
+      title: `${meta.title} | InferenceX`,
+      description: meta.description,
+    },
+  };
+}
diff --git a/packages/app/src/lib/utils.test.ts b/packages/app/src/lib/utils.test.ts
index 8f5e50e..10106a2 100644
--- a/packages/app/src/lib/utils.test.ts
+++ b/packages/app/src/lib/utils.test.ts
@@ -3,7 +3,6 @@ import { describe, it, expect, vi } from 'vitest';
 import type { AggDataEntry, InferenceData } from '@/components/inference/types';
 import {
   formatNumber,
-  parseRunDate,
   updateRepoUrl,
   calculateCostsForGpus,
   calculatePowerForGpus,
@@ -103,25 +102,6 @@ describe('formatNumber', () => {
   });
 });
 
-// ===========================================================================
-// parseRunDate
-// ===========================================================================
-describe('parseRunDate', () => {
-  it('rearranges M/D/YYYY into YYYY-M-D (no zero-padding added)', () => {
-    // the function does a direct string split/reassemble, no padding is applied
-    expect(parseRunDate('1/5/2024, 14:30:00')).toBe('2024-1-5');
-    expect(parseRunDate('12/31/2023, 00:00:00')).toBe('2023-12-31');
-  });
-
-  it('preserves zero-padded month and day from input', () => {
-    expect(parseRunDate('01/05/2024, 09:15:00')).toBe('2024-01-05');
-  });
-
-  it('ignores the time portion after the comma', () => {
-    expect(parseRunDate('6/15/2025, 23:59:59')).toBe('2025-6-15');
-  });
-});
-
 // ===========================================================================
 // updateRepoUrl
 // ===========================================================================
@@ -400,9 +380,11 @@ describe('filterRunsByModel', () => {
     expect(filterRunsByModel(runs, [])).toBe(runs);
   });
 
-  it('returns null when no model prefix matches', () => {
+  it('returns runs without changelogs when no model prefix matches', () => {
     const runs = { '123': makeRun([['dsr1-fp8-h200-trt']]) };
-    expect(filterRunsByModel(runs, ['gptoss'])).toBeNull();
+    const result = filterRunsByModel(runs, ['gptoss']);
+    expect(result).not.toBeNull();
+    expect(result!['123'].changelog).toBeUndefined();
   });
 
   it('keeps runs with matching model prefix', () => {
@@ -421,7 +403,7 @@ describe('filterRunsByModel', () => {
     expect(result!['123'].changelog!.entries[0].config_keys).toEqual(['gptoss-fp8-h200-trt']);
   });
 
-  it('returns null when no runs have changelog', () => {
+  it('returns runs without changelogs when no runs have changelog', () => {
     const runs = {
       '123': {
         runId: '123',
@@ -430,15 +412,21 @@ describe('filterRunsByModel', () => {
         conclusion: null as string | null,
       },
     };
-    expect(filterRunsByModel(runs, ['gptoss'])).toBeNull();
+    const result = filterRunsByModel(runs, ['gptoss']);
+    expect(result).not.toBeNull();
+    expect(result!['123'].changelog).toBeUndefined();
   });
 
-  it('returns null when no runs match model filter', () => {
+  it('returns runs without changelogs when no runs match model filter', () => {
     const runs = {
       '123': makeRun([['dsr1-fp8-h200-trt']]),
       '456': makeRun([['dsr1-fp8-b200-sglang']]),
     };
-    expect(filterRunsByModel(runs, ['gptoss'])).toBeNull();
+    const result = filterRunsByModel(runs, ['gptoss']);
+    expect(result).not.toBeNull();
+    expect(Object.keys(result!)).toHaveLength(2);
+    expect(result!['123'].changelog).toBeUndefined();
+    expect(result!['456'].changelog).toBeUndefined();
   });
 
   it('keeps multiple runs that all match', () => {
@@ -468,9 +456,11 @@ describe('filterRunsByModel', () => {
   });
 
   // Precision filtering
-  it('returns null when no entries match precision', () => {
+  it('returns runs without changelogs when no entries match precision', () => {
     const runs = { '123': makeRun([['gptoss-fp4-h200-trt']]) };
-    expect(filterRunsByModel(runs, ['gptoss'], ['fp8'])).toBeNull();
+    const result = filterRunsByModel(runs, ['gptoss'], ['fp8']);
+    expect(result).not.toBeNull();
+    expect(result!['123'].changelog).toBeUndefined();
   });
 
   it('keeps run when entry matches both model and selected precision', () => {
@@ -530,12 +520,13 @@ describe('filterRunsByModel', () => {
     ]);
   });
 
-  it('GPU filter: returns null when non-MTP entry excluded by MTP GPU', () => {
+  it('GPU filter: returns runs without changelogs when non-MTP entry excluded by MTP GPU', () => {
     const runs = {
       '123': makeRun([['dsr1-fp8-mi355x-mori-sglang']]),
     };
     const result = filterRunsByModel(runs, ['dsr1'], ['fp8'], ['mi355x_mori-sglang_mtp']);
-    expect(result).toBeNull();
+    expect(result).not.toBeNull();
+    expect(result!['123'].changelog).toBeUndefined();
   });
 
   it('GPU filter: falls back to no GPU filter when selectedGPUs is empty', () => {
diff --git a/packages/app/src/lib/utils.ts b/packages/app/src/lib/utils.ts
index b03dbfb..1d7e569 100644
--- a/packages/app/src/lib/utils.ts
+++ b/packages/app/src/lib/utils.ts
@@ -161,12 +161,6 @@ export function getDisplayLabel(config: { label: string; suffix?: string }): str
   return config.suffix ? `${config.label} ${config.suffix}` : config.label;
 }
 
-export const parseRunDate = (dateStr: string) => {
-  const [datePart] = dateStr.split(', ');
-  const [month, day, year] = datePart.split('/');
-  return `${year}-${month}-${day}`;
-};
-
 /**
  * Computes missing output cost fields (costhOutput, costnOutput, costrOutput) for data points.
  * This handles backwards compatibility with historical data that doesn't have these fields.
@@ -283,7 +277,15 @@ export function filterRunsByModel(
     }
   }
 
-  return Object.keys(filtered).length > 0 ? filtered : null;
+  if (Object.keys(filtered).length > 0) return filtered;
+
+  // No changelog matches — return all runs without changelogs so the run
+  // selector still renders (e.g. Llama has runs but no changelog entries).
+  const fallback: { [runId: string]: RunInfo } = {};
+  for (const [runId, runInfo] of Object.entries(availableRuns)) {
+    fallback[runId] = { ...runInfo, changelog: undefined };
+  }
+  return Object.keys(fallback).length > 0 ? fallback : null;
 }
 
 /**
diff --git a/packages/app/src/providers/posthog-provider.tsx b/packages/app/src/providers/posthog-provider.tsx
index d8957d9..4805113 100644
--- a/packages/app/src/providers/posthog-provider.tsx
+++ b/packages/app/src/providers/posthog-provider.tsx
@@ -13,7 +13,7 @@ export function PostHogProvider({ children }: { children: React.ReactNode }) {
   const [client, setClient] = useState<PostHog | null>(null);
 
   useEffect(() => {
-    if (!POSTHOG_KEY || window.location.hostname === 'localhost') return;
+    if (!POSTHOG_KEY || process.env.NODE_ENV !== 'production') return;
     import('posthog-js')
       .then(({ default: posthog }) => {
         posthog.init(POSTHOG_KEY, {
diff --git a/packages/constants/src/gpu-keys.ts b/packages/constants/src/gpu-keys.ts
index 87beff0..dd01d79 100644
--- a/packages/constants/src/gpu-keys.ts
+++ b/packages/constants/src/gpu-keys.ts
@@ -10,3 +10,68 @@ export const GPU_KEYS = new Set([
   'mi325x',
   'mi355x',
 ]);
+
+/** Maps each GPU key to its vendor for display grouping. */
+export const GPU_VENDORS: Record<string, string> = {
+  h100: 'NVIDIA',
+  h200: 'NVIDIA',
+  b200: 'NVIDIA',
+  b300: 'NVIDIA',
+  gb200: 'NVIDIA',
+  gb300: 'NVIDIA',
+  mi300x: 'AMD',
+  mi325x: 'AMD',
+  mi355x: 'AMD',
+};
+
+// ---------------------------------------------------------------------------
+// Vendor color zones
+//
+// To add a new vendor: add entries to GPU_VENDORS above, then add color
+// zones to both maps below (OKLch for normal mode, HSL for high-contrast).
+// ---------------------------------------------------------------------------
+
+/**
+ * OKLch hue zones for normal-mode vendor-aware colors.
+ * Narrow, precise bands for assigning brand-matching color shades.
+ *
+ * Layout (approximate):
+ *   0-12    (gap)
+ *   12-42   AMD reds/oranges
+ *   42-120  (gap)
+ *   120-170 NVIDIA greens
+ *   170-275 (gap)
+ *   275-330 unknown / fallback (purples)
+ *   330-360 (gap)
+ */
+export const VENDOR_OKLCH_ZONES: Record<
+  string,
+  { start: number; end: number; chroma: { light: number; dark: number } }
+> = {
+  amd: { start: 12, end: 42, chroma: { light: 0.18, dark: 0.22 } },
+  nvidia: { start: 120, end: 170, chroma: { light: 0.15, dark: 0.15 } },
+  unknown: { start: 275, end: 330, chroma: { light: 0.14, dark: 0.16 } },
+};
+
+/**
+ * Exclusive HSL hue zones for high-contrast mode.
+ * Each vendor gets a non-overlapping slice of the 360° hue wheel so items
+ * from different vendors are always visually distinct and vendor-appropriate
+ * (NVIDIA = greens, AMD = reds/oranges, unknown = blues/purples).
+ *
+ * Layout (360° wheel):
+ *   NVIDIA:  60–195  (135°) — greens through cyans
+ *   AMD:     300–360 + 0–60  (120°, wraps) — magentas through oranges
+ *   unknown: 195–300 (105°) — blues/purples
+ *
+ * Each entry is an array of linear {start, span} segments (wrapping bands
+ * are split into two segments).
+ */
+export const VENDOR_HSL_ZONES: Record<string, { start: number; span: number }[]> = {
+  nvidia: [{ start: 60, span: 135 }],
+  amd: [
+    { start: 300, span: 60 },
+    { start: 0, span: 60 },
+  ],
+  unknown: [{ start: 195, span: 105 }],
+};
diff --git a/packages/constants/src/seo.ts b/packages/constants/src/seo.ts
index 9802813..680b420 100644
--- a/packages/constants/src/seo.ts
+++ b/packages/constants/src/seo.ts
@@ -5,5 +5,5 @@ export const AUTHOR_URL = 'https://semianalysis.com';
 export const AUTHOR_HANDLE = '@SemiAnalysis_';
 export const SITE_TITLE = `${SITE_NAME} by ${AUTHOR_NAME} — AI Inference Benchmark`;
 export const DESCRIPTION =
-  'InferenceX (formerly InferenceMAX) is the open-source AI inference benchmark that matches the rapid pace of modern AI development. Powered by one of the largest open-source GPU CI/CD fleets with NVIDIA GB200, AMD MI355X & many more.';
+  'InferenceX is the open-source AI inference benchmark that matches the rapid pace of modern AI development. Powered by one of the largest open-source GPU CI/CD fleets with NVIDIA GB200, AMD MI355X & many more.';
 export const OG_IMAGE = `${SITE_URL}/og-image.png`;