diff --git a/packages/app/cypress/component/chart-buttons.cy.tsx b/packages/app/cypress/component/chart-buttons.cy.tsx
new file mode 100644
index 0000000..579f157
--- /dev/null
+++ b/packages/app/cypress/component/chart-buttons.cy.tsx
@@ -0,0 +1,64 @@
+import { ChartButtons } from '@/components/ui/chart-buttons';
+
+describe('ChartButtons', () => {
+  describe('without CSV export', () => {
+    beforeEach(() => {
+      cy.mount(
+        <div style={{ position: 'relative', width: 400, height: 200 }}>
+          <div id="test-chart">Chart content</div>
+          <ChartButtons chartId="test-chart" analyticsPrefix="test" />
+        </div>,
+      );
+    });
+
+    it('zoom reset dispatches custom event', () => {
+      cy.window().then((win) => {
+        const handler = cy.stub().as('zoomReset');
+        win.addEventListener('test_zoom_reset_test-chart', handler);
+      });
+      cy.get('[data-testid="zoom-reset-button"]').click();
+      cy.get('@zoomReset').should('have.been.calledOnce');
+    });
+  });
+
+  describe('with CSV export', () => {
+    it('shows dropdown with PNG and CSV options', () => {
+      const onExportCsv = cy.stub().as('csvExport');
+      cy.mount(
+        <div style={{ position: 'relative', width: 400, height: 200 }}>
+          <div id="test-chart">Chart content</div>
+          <ChartButtons chartId="test-chart" analyticsPrefix="test" onExportCsv={onExportCsv} />
+        </div>,
+      );
+      cy.get('[data-testid="export-button"]').click();
+      cy.get('[data-testid="export-png-button"]').should('be.visible');
+      cy.get('[data-testid="export-csv-button"]').should('be.visible');
+    });
+
+    it('clicking CSV calls onExportCsv', () => {
+      const onExportCsv = cy.stub().as('csvExport');
+      cy.mount(
+        <div style={{ position: 'relative', width: 400, height: 200 }}>
+          <div id="test-chart">Chart content</div>
+          <ChartButtons chartId="test-chart" analyticsPrefix="test" onExportCsv={onExportCsv} />
+        </div>,
+      );
+      cy.get('[data-testid="export-button"]').click();
+      cy.get('[data-testid="export-csv-button"]').click();
+      cy.get('@csvExport').should('have.been.calledOnce');
+    });
+  });
+
+  describe('hideZoomReset', () => {
+    it('hides zoom reset button when hideZoomReset is true', () => {
+      cy.mount(
+        <div style={{ position: 'relative', width: 400, height: 200 }}>
+          <div id="test-chart">Chart content</div>
+          <ChartButtons chartId="test-chart" analyticsPrefix="test" hideZoomReset />
+        </div>,
+      );
+      cy.get('[data-testid="zoom-reset-button"]').should('not.exist');
+      cy.get('[data-testid="export-button"]').should('be.visible');
+    });
+  });
+});
diff --git a/packages/app/cypress/component/chart-selectors.cy.tsx b/packages/app/cypress/component/chart-selectors.cy.tsx
new file mode 100644
index 0000000..767416e
--- /dev/null
+++ b/packages/app/cypress/component/chart-selectors.cy.tsx
@@ -0,0 +1,96 @@
+import { useState } from 'react';
+
+import {
+  ModelSelector,
+  SequenceSelector,
+  PrecisionSelector,
+} from '@/components/ui/chart-selectors';
+import { TooltipProvider } from '@/components/ui/tooltip';
+
+function ModelSelectorHarness() {
+  const [value, setValue] = useState('DeepSeek-R1-0528');
+  return (
+    <TooltipProvider>
+      <ModelSelector
+        value={value}
+        onChange={setValue}
+        availableModels={['DeepSeek-R1-0528', 'Llama-4-Maverick', 'Qwen3-235B']}
+        data-testid="model-selector"
+      />
+    </TooltipProvider>
+  );
+}
+
+function SequenceSelectorHarness() {
+  const [value, setValue] = useState('1024_128');
+  return (
+    <TooltipProvider>
+      <SequenceSelector
+        value={value}
+        onChange={setValue}
+        availableSequences={['1024_128', '1024_8192', '8192_1024']}
+        data-testid="sequence-selector"
+      />
+    </TooltipProvider>
+  );
+}
+
+function PrecisionSelectorHarness() {
+  const [value, setValue] = useState(['FP8']);
+  return (
+    <TooltipProvider>
+      <PrecisionSelector
+        value={value}
+        onChange={setValue}
+        availablePrecisions={['FP8', 'FP4', 'BF16']}
+        data-testid="precision-multiselect"
+      />
+    </TooltipProvider>
+  );
+}
+
+describe('Chart Selectors', () => {
+  describe('ModelSelector', () => {
+    beforeEach(() => {
+      cy.mount(<ModelSelectorHarness />);
+    });
+
+    it('shows options when clicked', () => {
+      cy.get('[data-testid="model-selector"]').click();
+      cy.get('[role="option"]').should('have.length.greaterThan', 0);
+    });
+
+    it('selecting an option updates the displayed value', () => {
+      cy.get('[data-testid="model-selector"]').click();
+      cy.get('[role="option"]').contains('Qwen3-235B').click();
+      cy.get('[data-testid="model-selector"]').should('contain', 'Qwen3-235B');
+    });
+  });
+
+  describe('SequenceSelector', () => {
+    beforeEach(() => {
+      cy.mount(<SequenceSelectorHarness />);
+    });
+
+    it('shows options when clicked', () => {
+      cy.get('[data-testid="sequence-selector"]').click();
+      cy.get('[role="option"]').should('have.length', 3);
+    });
+
+    it('selecting an option updates the displayed value', () => {
+      cy.get('[data-testid="sequence-selector"]').click();
+      cy.get('[role="option"]').last().click();
+      cy.get('[data-testid="sequence-selector"]').should('not.contain', '1K / 128');
+    });
+  });
+
+  describe('PrecisionSelector', () => {
+    beforeEach(() => {
+      cy.mount(<PrecisionSelectorHarness />);
+    });
+
+    it('shows current selection', () => {
+      cy.get('[data-testid="precision-multiselect"]').should('contain', 'FP8');
+    });
+  });
+});
diff --git a/packages/app/cypress/component/date-range-picker.cy.tsx b/packages/app/cypress/component/date-range-picker.cy.tsx
new file mode 100644
index 0000000..d845eb6
--- /dev/null
+++ b/packages/app/cypress/component/date-range-picker.cy.tsx
@@ -0,0 +1,81 @@
+import { useState } from 'react';
+
+import { DateRangePicker, DateRange } from '@/components/ui/date-range-picker';
+
+function DateRangePickerHarness({
+  initialRange = { startDate: '', endDate: '' },
+  availableDates,
+}: {
+  initialRange?: DateRange;
+  availableDates?: string[];
+}) {
+  const [range, setRange] = useState<DateRange>(initialRange);
+  return (
+    <div data-testid="date-range-wrapper">
+      <DateRangePicker
+        dateRange={range}
+        onChange={setRange}
+        availableDates={availableDates}
+        placeholder="Select date range"
+      />
+      <div data-testid="date-range-output">
+        {range.startDate && range.endDate ? `${range.startDate} to ${range.endDate}` : 'no range'}
+      </div>
+    </div>
+  );
+}
+
+describe('DateRangePicker', () => {
+  it('renders with placeholder text', () => {
+    cy.mount(<DateRangePickerHarness />);
+    cy.get('[data-testid="date-range-wrapper"]').should('contain', 'Select date range');
+  });
+
+  it('opens dialog when clicked', () => {
+    cy.mount(<DateRangePickerHarness />);
+    cy.contains('Select date range').click();
+    cy.get('[role="dialog"]').should('be.visible');
+    cy.contains('Select Date Range').should('be.visible');
+  });
+
+  it('apply is disabled when no dates selected', () => {
+    cy.mount(<DateRangePickerHarness />);
+    cy.contains('Select date range').click();
+    cy.contains('button', 'Apply').should('be.disabled');
+  });
+
+  it('cancel closes the dialog', () => {
+    cy.mount(<DateRangePickerHarness />);
+    cy.contains('Select date range').click();
+    cy.get('[role="dialog"]').should('be.visible');
+    cy.contains('button', 'Cancel').click();
+    cy.get('[role="dialog"]').should('not.exist');
+  });
+
+  it('displays formatted range when dates are provided', () => {
+    cy.mount(
+      <DateRangePickerHarness initialRange={{ startDate: '2026-01-15', endDate: '2026-02-20' }} />,
+    );
+    cy.get('[data-testid="date-range-wrapper"]').should('contain', 'Jan 15, 2026');
+    cy.get('[data-testid="date-range-wrapper"]').should('contain', 'Feb 20, 2026');
+  });
+
+  it('shows quick select buttons when availableDates provided', () => {
+    const dates = ['2025-12-01', '2025-12-15', '2026-01-01', '2026-02-01', '2026-03-01'];
+    cy.mount(<DateRangePickerHarness availableDates={dates} />);
+    cy.contains('Select date range').click();
+    cy.contains('button', 'Max Range').should('be.visible');
+  });
+
+  it('shows overlay when no available dates', () => {
+    cy.mount(<DateRangePickerHarness availableDates={[]} />);
+    cy.contains('Select date range').click();
+    cy.contains('No available dates').should('be.visible');
+  });
+
+  it('shows overlay when only 1 available date', () => {
+    cy.mount(<DateRangePickerHarness availableDates={['2026-01-01']} />);
+    cy.contains('Select date range').click();
+    cy.contains('Only 1 date available').should('be.visible');
+  });
+});
diff --git a/packages/app/cypress/component/footer.cy.tsx b/packages/app/cypress/component/footer.cy.tsx
index 5c1dcb3..23e5eed 100644
--- a/packages/app/cypress/component/footer.cy.tsx
+++ b/packages/app/cypress/component/footer.cy.tsx
@@ -15,10 +15,6 @@ describe('Footer', () => {
     );
   });
 
-  it('renders the footer element', () => {
-    cy.get('[data-testid="footer"]').should('exist');
-  });
-
   it('displays copyright notice with semianalysis.com and current year', () => {
     const year = new Date().getFullYear().toString();
     cy.get('[data-testid="footer-copyright"]').should('contain', 'semianalysis.com');
@@ -58,10 +54,6 @@ describe('Footer', () => {
       .and('include', 'github.com/SemiAnalysisAI/InferenceX-app');
   });
 
-  it('shows the SemiAnalysis logo', () => {
-    cy.get('[data-testid="footer-brand"]').find('img[alt="SemiAnalysis logo"]').should('exist');
-  });
-
   it('all external links open in a new tab', () => {
     cy.get('[data-testid="footer-links"]')
       .find('a[target="_blank"]')
diff --git a/packages/app/cypress/component/header.cy.tsx b/packages/app/cypress/component/header.cy.tsx
index e020b32..18df15a 100644
--- a/packages/app/cypress/component/header.cy.tsx
+++ b/packages/app/cypress/component/header.cy.tsx
@@ -18,10 +18,6 @@ describe('Header', () => {
     );
   });
 
-  it('renders the header element', () => {
-    cy.get('[data-testid="header"]').should('be.visible');
-  });
-
   it('displays the InferenceX title', () => {
     cy.get('[data-testid="header"]').contains('InferenceX').should('be.visible');
   });
@@ -52,10 +48,6 @@ describe('Header', () => {
       .and('include', 'github.com/SemiAnalysisAI/InferenceX');
   });
 
-  it('GitHub stars button has glow animation class', () => {
-    cy.get('[data-testid="header-star-button"]').should('have.class', 'star-button-glow');
-  });
-
   it('shows the theme toggle button', () => {
     cy.get('[data-testid="theme-toggle"]').should('be.visible');
   });
diff --git a/packages/app/cypress/component/mode-toggle.cy.tsx b/packages/app/cypress/component/mode-toggle.cy.tsx
index a41e6eb..ec3d631 100644
--- a/packages/app/cypress/component/mode-toggle.cy.tsx
+++ b/packages/app/cypress/component/mode-toggle.cy.tsx
@@ -10,14 +10,6 @@ describe('ModeToggle', () => {
     );
   });
 
-  it('renders the theme toggle button', () => {
-    cy.get('[data-testid="theme-toggle"]').should('be.visible');
-  });
-
-  it('has accessible aria-label', () => {
-    cy.get('[data-testid="theme-toggle"]').should('have.attr', 'aria-label');
-  });
-
   it('clicking toggle switches to dark mode', () => {
     cy.get('html').should('not.have.class', 'dark');
     cy.get('[data-testid="theme-toggle"]').click();
diff --git a/packages/app/cypress/component/social-share.cy.tsx b/packages/app/cypress/component/social-share.cy.tsx
deleted file mode 100644
index 4102410..0000000
--- a/packages/app/cypress/component/social-share.cy.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { ShareTwitterButton, ShareLinkedInButton } from '@/components/share-buttons';
-
-describe('Share Buttons', () => {
-  it('Twitter share button renders and is a button element', () => {
-    cy.mount(<ShareTwitterButton />);
-    cy.get('[data-testid="share-twitter"]').should('exist');
-    cy.get('[data-testid="share-twitter"]').should('have.prop', 'tagName', 'BUTTON');
-  });
-
-  it('Twitter share button has a descriptive title referencing Twitter or X', () => {
-    cy.mount(<ShareTwitterButton />);
-    cy.get('[data-testid="share-twitter"]')
-      .should('have.attr', 'title')
-      .and('match', /Twitter|X/i);
-  });
-
-  it('LinkedIn share button renders and is a button element', () => {
-    cy.mount(<ShareLinkedInButton />);
-    cy.get('[data-testid="share-linkedin"]').should('exist');
-    cy.get('[data-testid="share-linkedin"]').should('have.prop', 'tagName', 'BUTTON');
-  });
-
-  it('LinkedIn share button has a descriptive title referencing LinkedIn', () => {
-    cy.mount(<ShareLinkedInButton />);
-    cy.get('[data-testid="share-linkedin"]')
-      .should('have.attr', 'title')
-      .and('include', 'LinkedIn');
-  });
-});
diff --git a/packages/app/cypress/e2e/chart-export.cy.ts b/packages/app/cypress/e2e/chart-export.cy.ts
deleted file mode 100644
index e816217..0000000
--- a/packages/app/cypress/e2e/chart-export.cy.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-describe('Chart Export and Share', () => {
-  before(() => {
-    cy.window().then((win) => {
-      win.localStorage.setItem('inferencex-star-modal-dismissed', String(Date.now()));
-    });
-    cy.visit('/');
-    cy.get('[data-testid="chart-figure"]').should('exist');
-  });
-
-  it('shows export button on inference chart', () => {
-    cy.get('[data-testid="export-button"]').first().should('exist');
-  });
-
-  it('shows zoom reset button on inference chart', () => {
-    cy.get('[data-testid="zoom-reset-button"]').first().should('exist');
-  });
-
-  it('shows share button in inference chart controls', () => {
-    cy.get('[data-testid="share-button"]').first().should('be.visible');
-  });
-
-  it('clicking share button copies a URL', () => {
-    cy.window().then((win) => {
-      cy.stub(win.navigator.clipboard, 'writeText').resolves();
-    });
-    cy.get('[data-testid="share-button"]').first().click();
-    // After clicking, button should briefly show "Copied" state
-    cy.get('[data-testid="share-button"]').first().should('contain', 'Copied');
-  });
-
-  it('share button reverts to Share after copy', () => {
-    // Previous test already clicked share; just wait for revert
-    cy.get('[data-testid="share-button"]').first().should('contain', 'Share');
-  });
-
-  it('shows share button on reliability tab', () => {
-    cy.visit('/reliability');
-    cy.get('[data-testid="share-button"]').should('be.visible');
-  });
-
-  it('shows share button on evaluation tab', () => {
-    cy.visit('/evaluation');
-    cy.get('[data-testid="share-button"]').should('be.visible');
-  });
-});
diff --git a/packages/app/cypress/e2e/inference-controls.cy.ts b/packages/app/cypress/e2e/inference-controls.cy.ts
deleted file mode 100644
index fbc24ec..0000000
--- a/packages/app/cypress/e2e/inference-controls.cy.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-describe('Inference Chart Controls', () => {
-  before(() => {
-    cy.window().then((win) => {
-      win.localStorage.setItem('inferencex-star-modal-dismissed', String(Date.now()));
-    });
-    cy.visit('/');
-    cy.get('[data-testid="model-selector"]').should('be.visible');
-  });
-
-  it('model selector has selectable options', () => {
-    cy.get('[data-testid="model-selector"]').click();
-    cy.get('[role="option"]').should('have.length.greaterThan', 0);
-    cy.get('body').type('{esc}');
-  });
-
-  it('sequence selector is visible', () => {
-    cy.get('[data-testid="sequence-selector"]').should('be.visible');
-  });
-
-  it('sequence selector has options', () => {
-    cy.get('[data-testid="sequence-selector"]').click();
-    cy.get('[role="option"]').should('have.length.greaterThan', 0);
-    cy.get('body').type('{esc}');
-  });
-
-  it('Y-axis metric selector is visible', () => {
-    cy.get('[data-testid="yaxis-metric-selector"]').should('be.visible');
-  });
-
-  it('Y-axis metric selector has grouped options', () => {
-    cy.get('[data-testid="yaxis-metric-selector"]').click();
-    cy.get('[role="option"]').should('have.length.greaterThan', 1);
-    cy.get('body').type('{esc}');
-  });
-
-  it('precision multi-select is visible', () => {
-    cy.get('[data-testid="precision-multiselect"]').should('be.visible');
-  });
-
-  it('GPU comparison multi-select is visible', () => {
-    cy.get('[data-testid="gpu-multiselect"]').should('be.visible');
-  });
-
-  // These tests mutate state — they change selector values.
-  // Order matters: run them last.
-
-  it('changing model selector updates the displayed value', () => {
-    cy.get('[data-testid="model-selector"]')
-      .invoke('text')
-      .then((initialText) => {
-        cy.get('[data-testid="model-selector"]').click();
-        // Pick the last option to ensure it differs from the default (first)
-        cy.get('[role="option"]').last().click();
-        cy.get('[data-testid="model-selector"]')
-          .invoke('text')
-          .should('not.eq', initialText.trim());
-      });
-  });
-
-  it('selecting a different Y-axis metric updates the displayed value', () => {
-    cy.get('[data-testid="yaxis-metric-selector"]').click();
-    cy.get('[role="option"]')
-      .eq(2)
-      .then(($option) => {
-        const optionText = $option.text().trim();
-        cy.wrap($option).click();
-        cy.get('[data-testid="yaxis-metric-selector"]')
-          .invoke('text')
-          .should('include', optionText);
-      });
-  });
-});
diff --git a/packages/app/cypress/e2e/intro-section.cy.ts b/packages/app/cypress/e2e/intro-section.cy.ts
deleted file mode 100644
index 741fc12..0000000
--- a/packages/app/cypress/e2e/intro-section.cy.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-describe('Intro Section', () => {
-  before(() => {
-    cy.window().then((win) => {
-      win.localStorage.setItem('inferencex-star-modal-dismissed', String(Date.now()));
-    });
-    cy.visit('/');
-  });
-
-  it('renders the intro section card', () => {
-    cy.get('[data-testid="intro-section"]').should('be.visible');
-  });
-
-  it('mentions InferenceX in the intro text', () => {
-    cy.get('[data-testid="intro-section"]').should('contain', 'InferenceX');
-  });
-
-  it('describes LLM inference performance', () => {
-    cy.get('[data-testid="intro-section"]').should('contain', 'inference performance');
-  });
-
-  it('mentions InferenceMAX (formerly name)', () => {
-    cy.get('[data-testid="intro-section"]').should('contain', 'InferenceMAX');
-  });
-
-  it('contains links to v1 and v2 articles', () => {
-    cy.get('[data-testid="intro-section"]')
-      .contains('v1')
-      .should('have.attr', 'href')
-      .and('include', 'semianalysis.com');
-    cy.get('[data-testid="intro-section"]')
-      .contains('v2')
-      .should('have.attr', 'href')
-      .and('include', 'semianalysis.com');
-  });
-
-  it('article links open in a new tab', () => {
-    cy.get('[data-testid="intro-section"]')
-      .find('a[target="_blank"]')
-      .should('have.length.at.least', 2);
-  });
-
-  it('appears above the chart section', () => {
-    cy.get('[data-testid="intro-section"]').then(($intro) => {
-      cy.get('[data-testid="chart-section-tabs"]').then(($tabs) => {
-        const introTop = $intro[0].getBoundingClientRect().top;
-        const tabsTop = $tabs[0].getBoundingClientRect().top;
-        expect(introTop).to.be.lessThan(tabsTop);
-      });
-    });
-  });
-});
diff --git a/packages/app/cypress/e2e/sidebar-legend.cy.ts b/packages/app/cypress/e2e/sidebar-legend.cy.ts
deleted file mode 100644
index 67b588e..0000000
--- a/packages/app/cypress/e2e/sidebar-legend.cy.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-// Core legend behavior (search, clear, expand/collapse, item toggle, reset) is covered by
-// cypress/component/chart-legend.cy.tsx. These e2e tests verify integration with real data
-// and page-level concerns only.
-describe('Sidebar Legend (integration)', () => {
-  before(() => {
-    cy.visit('/', {
-      onBeforeLoad(win) {
-        win.localStorage.setItem('inferencex-star-modal-dismissed', String(Date.now()));
-      },
-    });
-    cy.get('.sidebar-legend').first().should('be.visible');
-  });
-
-  it('legend populates with real GPU data from the API', () => {
-    cy.get('.sidebar-legend')
-      .first()
-      .within(() => {
-        cy.get('label').should('have.length.greaterThan', 0);
-        cy.get('input[type="checkbox"]').first().should('exist');
-      });
-  });
-
-  it('legend defaults to expanded state', () => {
-    cy.get('.sidebar-legend').first().should('have.class', 'bg-accent');
-  });
-
-  it('label hover area does not extend beyond text width', () => {
-    cy.get('.sidebar-legend')
-      .first()
-      .within(() => {
-        cy.get('label')
-          .first()
-          .then(($label) => {
-            const labelWidth = $label[0].getBoundingClientRect().width;
-            const parentWidth = $label[0].closest('li')!.getBoundingClientRect().width;
-            expect(labelWidth).to.be.lessThan(parentWidth);
-          });
-      });
-  });
-
-  it('active items are sorted before inactive in sidebar', () => {
-    cy.get('.sidebar-legend')
-      .first()
-      .within(() => {
-        cy.get('label').should('have.length.greaterThan', 1);
-        cy.get('label').first().click();
-
-        cy.get('label').first().should('be.visible');
-        cy.get('label').first().find('span').eq(1).invoke('text').should('be.a', 'string');
-      });
-  });
-
-  it('legend respects URL param for collapsed state', () => {
-    // Must re-visit with param — this changes the URL
-    cy.visit('/?i_legend=0', {
-      onBeforeLoad(win) {
-        win.localStorage.setItem('inferencex-star-modal-dismissed', String(Date.now()));
-      },
-    });
-    cy.get('.sidebar-legend').first().should('be.visible');
-    cy.get('.sidebar-legend').first().should('not.have.class', 'bg-accent');
-  });
-});
diff --git a/packages/app/cypress/e2e/tabs.cy.ts b/packages/app/cypress/e2e/tabs.cy.ts
index 5590222..723f6e6 100644
--- a/packages/app/cypress/e2e/tabs.cy.ts
+++ b/packages/app/cypress/e2e/tabs.cy.ts
@@ -1,4 +1,4 @@
-describe('Chart Section Tabs', () => {
+describe('Chart Section Tabs — E2E', () => {
   before(() => {
     cy.window().then((win) => {
       win.localStorage.setItem('inferencex-star-modal-dismissed', String(Date.now()));
@@ -6,63 +6,22 @@ describe('Chart Section Tabs', () => {
     cy.visit('/');
   });
 
-  it('shows the tabs list on desktop', () => {
-    cy.get('[data-testid="chart-section-tabs"]').should('be.visible');
-  });
-
-  it('has three tab triggers: Inference, Evaluation, Reliability', () => {
-    cy.get('[data-testid="tab-trigger-inference"]').should('be.visible');
-    cy.get('[data-testid="tab-trigger-evaluation"]').should('be.visible');
-    cy.get('[data-testid="tab-trigger-reliability"]').should('be.visible');
-  });
-
-  it('Inference Performance tab is active by default', () => {
-    cy.get('[data-testid="tab-trigger-inference"]').should('have.attr', 'data-state', 'active');
-  });
-
-  it('Evaluation and Reliability tabs are inactive by default', () => {
-    cy.get('[data-testid="tab-trigger-evaluation"]').should('have.attr', 'data-state', 'inactive');
-    cy.get('[data-testid="tab-trigger-reliability"]').should('have.attr', 'data-state', 'inactive');
-  });
-
-  it('clicking Evaluation tab makes it active', () => {
-    cy.get('[data-testid="tab-trigger-evaluation"]').click();
-    cy.get('[data-testid="tab-trigger-evaluation"]').should('have.attr', 'data-state', 'active');
-    cy.get('[data-testid="tab-trigger-inference"]').should('have.attr', 'data-state', 'inactive');
-  });
-
-  it('switching to Evaluation shows Accuracy Evals content', () => {
-    // Already on evaluation from previous test
-    cy.get('[data-testid="evaluation-chart-display"]').should('exist');
-  });
-
-  it('clicking Reliability tab makes it active', () => {
-    cy.get('[data-testid="tab-trigger-reliability"]').click();
-    cy.get('[data-testid="tab-trigger-reliability"]').should('have.attr', 'data-state', 'active');
-  });
-
-  it('switching to Reliability shows GPU Reliability content', () => {
-    // Already on reliability from previous test
-    cy.get('[data-testid="reliability-chart-display"]').should('exist');
-  });
-
-  it('clicking back to Inference tab works', () => {
-    cy.get('[data-testid="tab-trigger-inference"]').click();
-    cy.get('[data-testid="tab-trigger-inference"]').should('have.attr', 'data-state', 'active');
-  });
-
-  it('switching to Inference shows Inference Performance content', () => {
-    // Already on inference from previous test
-    cy.get('[data-testid="inference-chart-display"]').should('exist');
-  });
-
   it('updates the URL path when switching tabs', () => {
     cy.get('[data-testid="tab-trigger-evaluation"]').click();
     cy.url().should('include', '/evaluation');
 
+    cy.get('[data-testid="tab-trigger-historical"]').click();
+    cy.url().should('include', '/historical');
+
+    cy.get('[data-testid="tab-trigger-calculator"]').click();
+    cy.url().should('include', '/calculator');
+
     cy.get('[data-testid="tab-trigger-reliability"]').click();
     cy.url().should('include', '/reliability');
 
+    cy.get('[data-testid="tab-trigger-gpu-specs"]').click();
+    cy.url().should('include', '/gpu-specs');
+
     cy.get('[data-testid="tab-trigger-inference"]').click();
     cy.url().should('include', '/inference');
   });
diff --git a/packages/app/src/app/[[...tab]]/page.tsx b/packages/app/src/app/[[...tab]]/page.tsx
index 2dba061..acd78bf 100644
--- a/packages/app/src/app/[[...tab]]/page.tsx
+++ b/packages/app/src/app/[[...tab]]/page.tsx
@@ -5,7 +5,7 @@ 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 = false;
+export const dynamicParams = true;
 
 export function generateStaticParams() {
   return [{ tab: [] }, ...VALID_TABS.map((t) => ({ tab: [t] }))];
diff --git a/packages/app/src/components/calculator/ThroughputCalculatorDisplay.tsx b/packages/app/src/components/calculator/ThroughputCalculatorDisplay.tsx
index 8aafe0a..dcde7d9 100644
--- a/packages/app/src/components/calculator/ThroughputCalculatorDisplay.tsx
+++ b/packages/app/src/components/calculator/ThroughputCalculatorDisplay.tsx
@@ -513,18 +513,21 @@ export default function ThroughputCalculatorDisplay() {
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4">
                 <ModelSelector
                   id="calc-model"
+                  data-testid="calc-model-selector"
                   value={selectedModel}
                   onChange={handleModelChange}
                   availableModels={availableModels}
                 />
                 <SequenceSelector
                   id="calc-sequence"
+                  data-testid="calc-sequence-selector"
                   value={selectedSequence}
                   onChange={handleSequenceChange}
                   availableSequences={availableSequences}
                 />
                 <PrecisionSelector
                   id="calc-precision"
+                  data-testid="calc-precision-selector"
                   value={selectedPrecisions}
                   onChange={handlePrecisionChange}
                   availablePrecisions={availablePrecisions}
@@ -537,7 +540,11 @@ export default function ThroughputCalculatorDisplay() {
                     tooltip="The pricing tier used to calculate cost per million tokens. Hyperscaler (e.g. AWS/GCP), Neocloud (e.g. CoreWeave), or 3-year rental."
                   />
                   <Select value={costProvider} onValueChange={handleCostProviderChange}>
-                    <SelectTrigger id="calc-cost" className="w-full">
+                    <SelectTrigger
+                      id="calc-cost"
+                      data-testid="calc-cost-selector"
+                      className="w-full"
+                    >
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
@@ -557,7 +564,11 @@ export default function ThroughputCalculatorDisplay() {
                     tooltip="Whether to show costs for total tokens, input tokens only, or output tokens only."
                   />
                   <Select value={costType} onValueChange={handleCostTypeChange}>
-                    <SelectTrigger id="calc-cost-type" className="w-full">
+                    <SelectTrigger
+                      id="calc-cost-type"
+                      data-testid="calc-cost-type-selector"
+                      className="w-full"
+                    >
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
diff --git a/packages/app/src/components/chart-tabs.tsx b/packages/app/src/components/chart-tabs.tsx
new file mode 100644
index 0000000..5785f51
--- /dev/null
+++ b/packages/app/src/components/chart-tabs.tsx
@@ -0,0 +1,239 @@
+'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/intro-section.tsx b/packages/app/src/components/intro-section.tsx
new file mode 100644
index 0000000..6e0333c
--- /dev/null
+++ b/packages/app/src/components/intro-section.tsx
@@ -0,0 +1,82 @@
+import { Card } from '@/components/ui/card';
+import { QuoteCarousel } from '@/components/quote-carousel';
+import { QUOTES } from '@/components/quotes/quotes-data';
+
+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">
+          <QuoteCarousel
+            quotes={QUOTES.filter((q) =>
+              [
+                'OpenAI',
+                'Microsoft',
+                'Together AI',
+                'vLLM',
+                'GPU Mode',
+                'PyTorch Foundation',
+                'Oracle',
+                'CoreWeave',
+                'Nebius',
+                'Crusoe',
+                'TensorWave',
+                'SGLang',
+                'WEKA',
+              ].includes(q.org),
+            )}
+            overrides={{
+              order: ['OpenAI'],
+              labels: {
+                'Together AI': 'Tri Dao',
+                'PyTorch Foundation': 'PyTorch',
+              },
+            }}
+            moreHref="/quotes"
+          />
+        </div>
+      </Card>
+    </section>
+  );
+}
diff --git a/packages/app/src/components/page-content.tsx b/packages/app/src/components/page-content.tsx
index d1499fb..a11992a 100644
--- a/packages/app/src/components/page-content.tsx
+++ b/packages/app/src/components/page-content.tsx
@@ -1,248 +1,11 @@
 '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 { 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 { StarNudge } from '@/components/star-nudge';
-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 { QuoteCarousel } from '@/components/quote-carousel';
-import { QUOTES } from '@/components/quotes/quotes-data';
 import { UnofficialRunProvider } from '@/components/unofficial-run-provider';
-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;
-}
-
-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>
-  );
-}
 
 export function PageContent({ initialTab = 'inference' }: { initialTab?: string }) {
   return (
@@ -253,79 +16,7 @@ export function PageContent({ initialTab = 'inference' }: { initialTab?: string
       <UnofficialRunProvider>
         <main className="relative">
           <div className="container mx-auto px-4 lg:px-8 flex flex-col gap-6 lg:gap-4">
-            <section>
-              <Card data-testid="intro-section">
-                <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:{' '}
-                  <a
-                    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
-                    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">
-                  <QuoteCarousel
-                    quotes={QUOTES.filter((q) =>
-                      [
-                        'OpenAI',
-                        'Microsoft',
-                        'Together AI',
-                        'vLLM',
-                        'GPU Mode',
-                        'PyTorch Foundation',
-                        'Oracle',
-                        'CoreWeave',
-                        'Nebius',
-                        'Crusoe',
-                        'TensorWave',
-                        'SGLang',
-                        'WEKA',
-                      ].includes(q.org),
-                    )}
-                    overrides={{
-                      order: ['OpenAI'],
-                      labels: {
-                        'Together AI': 'Tri Dao',
-                        'PyTorch Foundation': 'PyTorch',
-                      },
-                    }}
-                    moreHref="/quotes"
-                  />
-                </div>
-              </Card>
-            </section>
+            <IntroSection />
             <ChartTabs initialTab={initialTab} />
           </div>
         </main>
diff --git a/packages/app/src/components/ui/chart-legend.tsx b/packages/app/src/components/ui/chart-legend.tsx
index c259ac5..0b40ec2 100644
--- a/packages/app/src/components/ui/chart-legend.tsx
+++ b/packages/app/src/components/ui/chart-legend.tsx
@@ -234,7 +234,12 @@ export default function ChartLegend({
       >
         {switches.map((sw) => (
           <div key={sw.id} className="mt-2 flex items-center gap-2">
-            <Switch id={sw.id} checked={sw.checked} onCheckedChange={sw.onCheckedChange} />
+            <Switch
+              id={sw.id}
+              data-testid={sw.id}
+              checked={sw.checked}
+              onCheckedChange={sw.onCheckedChange}
+            />
             <Label
               htmlFor={sw.id}
               className="text-xs text-muted-foreground hover:text-foreground cursor-pointer"
@@ -461,7 +466,7 @@ export default function ChartLegend({
 
   const content = (
     <div className={isSidebar ? 'h-full' : 'relative'}>
-      <div className={outerClasses} style={outerStyle}>
+      <div data-testid="chart-legend" className={outerClasses} style={outerStyle}>
         {searchInput}
         {scrollContent}
         {bottomControls}