diff --git a/src/pages/AgentsPage.tsx b/src/pages/AgentsPage.tsx
index 503d2e6..95e1a58 100644
--- a/src/pages/AgentsPage.tsx
+++ b/src/pages/AgentsPage.tsx
@@ -2026,11 +2026,7 @@ export function AgentsPage({ embedded = false, onConfigurationApplied }: AgentsP
               <h1>{t('agents.embedded.title')}</h1>
               <p>{t('agents.embedded.subtitle')}</p>
             </>
-          ) : (
-            <>
-              <h1>{t('agents.title')}</h1>
-            </>
-          )}
+          ) : null}
         </div>
         <div className="agent-header-actions">
           {detectionError ? (
diff --git a/src/pages/ApiAccessPage.tsx b/src/pages/ApiAccessPage.tsx
index 55cb6c1..c65bdaf 100644
--- a/src/pages/ApiAccessPage.tsx
+++ b/src/pages/ApiAccessPage.tsx
@@ -1402,8 +1402,6 @@ export function ApiAccessPage() {
     void reorderProviders(source, target);
   };
 
-  const totalCount = Object.values(records).reduce((sum, items) => sum + items.length, 0);
-
   const countForDefinition = (definition: ProviderDefinition) =>
     records[definition.section].filter((record) =>
       providerCategoryMatchesRecord(definition.id, record, definition.section)
@@ -1412,23 +1410,6 @@ export function ApiAccessPage() {
   return (
     <section className="page management-page api-access-page">
       {confirmationDialog}
-      <header className="management-header">
-        <div>
-          <h1>{t('apiAccess.title')}</h1>
-        </div>
-        <div className="management-heading-actions">
-          <span className="muted-summary">{t('apiAccess.count', { count: totalCount })}</span>
-          <button type="button" className="secondary-button compact-button" onClick={() => void loadProviders()} disabled={loading || busy}>
-            <RefreshCw size={16} aria-hidden="true" />
-            {t('common.refresh')}
-          </button>
-          <button type="button" className="primary-button compact-button" onClick={openCreate} disabled={loading || busy}>
-            <Plus size={16} aria-hidden="true" />
-            {t('apiAccess.add')}
-          </button>
-        </div>
-      </header>
-
       {error ? <MessageNotice message={error} onDismiss={() => setError('')} /> : null}
       <div className="provider-workbench real-provider-workbench">
         <aside className="panel provider-category-panel">
@@ -1456,9 +1437,19 @@ export function ApiAccessPage() {
               <h2 title={t(activeDefinition.labelKey)}>{t(activeDefinition.labelKey)}</h2>
               <span>{t('apiAccess.matches', { count: rows.length })}</span>
             </div>
-            <div className="management-toolbar compact-toolbar">
-              <Search size={16} aria-hidden="true" />
-              <input value={filter} onChange={(event) => setFilter(event.currentTarget.value)} placeholder={t('apiAccess.search')} />
+            <div className="api-access-heading-tools">
+              <button type="button" className="secondary-button compact-button" onClick={() => void loadProviders()} disabled={loading || busy}>
+                <RefreshCw size={16} aria-hidden="true" />
+                {t('common.refresh')}
+              </button>
+              <button type="button" className="primary-button compact-button" onClick={openCreate} disabled={loading || busy}>
+                <Plus size={16} aria-hidden="true" />
+                {t('apiAccess.add')}
+              </button>
+              <div className="management-toolbar compact-toolbar">
+                <Search size={16} aria-hidden="true" />
+                <input value={filter} onChange={(event) => setFilter(event.currentTarget.value)} placeholder={t('apiAccess.search')} />
+              </div>
             </div>
           </div>
 
diff --git a/src/pages/AuthFileManagementPage.tsx b/src/pages/AuthFileManagementPage.tsx
index 50c4d08..3fc9caf 100644
--- a/src/pages/AuthFileManagementPage.tsx
+++ b/src/pages/AuthFileManagementPage.tsx
@@ -374,9 +374,6 @@ export function AuthFileManagementPage() {
     <section className="page management-page auth-files-page">
       {confirmationDialog}
       <header className="management-header">
-        <div>
-          <h1>{t('authFiles.title')}</h1>
-        </div>
         <div className="management-heading-actions">
           <span className="muted-summary">{t('authFiles.summary', { files: files.length, disabled: disabledCount })}</span>
           <button type="button" className="secondary-button compact-button" onClick={() => {
diff --git a/src/pages/ConfigPanel.tsx b/src/pages/ConfigPanel.tsx
index 059882e..9f9b433 100644
--- a/src/pages/ConfigPanel.tsx
+++ b/src/pages/ConfigPanel.tsx
@@ -984,9 +984,6 @@ export function ConfigPanelPage() {
 
   return (
     <section className="page config-page">
-      <header className="management-header config-page-header">
-        <div><h1>{t('app.nav.config')}</h1></div>
-      </header>
       <div className="agent-subpage-tabs config-subpage-tabs" role="tablist" aria-label={t('config.tabs.label')}>
         <button
           type="button"
diff --git a/src/pages/Kernel.tsx b/src/pages/Kernel.tsx
index f3d71d9..4ca4ff2 100644
--- a/src/pages/Kernel.tsx
+++ b/src/pages/Kernel.tsx
@@ -219,9 +219,6 @@ export function KernelPage({ view = 'home' }: { view?: KernelView }) {
 
   return (
     <section className="page kernel-page home-page">
-      <header className="management-header home-page-header">
-        <div><h1>{t('app.nav.home')}</h1></div>
-      </header>
       <div className="kernel-layout home-layout">
         <div className="panel control-panel">
           <div className="panel-heading">
diff --git a/src/pages/ManagementPages.tsx b/src/pages/ManagementPages.tsx
index fefaefb..7e714a8 100644
--- a/src/pages/ManagementPages.tsx
+++ b/src/pages/ManagementPages.tsx
@@ -501,7 +501,6 @@ export function OAuthLoginPage() {
   return (
     <section className="page management-page">
       <header className="management-header">
-        <div><h1>{t('oauth.title')}</h1></div>
         <label className="oauth-browser-picker">
           <span>{t('oauth.browser.label')}</span>
           <select
diff --git a/src/pages/QuotaPage.tsx b/src/pages/QuotaPage.tsx
index 861e343..3346bbc 100644
--- a/src/pages/QuotaPage.tsx
+++ b/src/pages/QuotaPage.tsx
@@ -144,7 +144,6 @@ export function QuotaPage() {
     <section className="page management-page quota-page">
       {confirmationDialog}
       <header className="management-header">
-        <div><h1>{t('quota.title')}</h1></div>
         <div className="management-heading-actions">
           <span className="muted-summary">{t(files.length === 1 ? 'quota.queryableCredentials.one' : 'quota.queryableCredentials.other', { count: files.length })}</span>
           <button type="button" className="secondary-button compact-button" onClick={() => void loadFiles()} disabled={loading || refreshing || querying}>
diff --git a/src/pages/ThinkingAliasesPage.tsx b/src/pages/ThinkingAliasesPage.tsx
index c74b644..694d213 100644
--- a/src/pages/ThinkingAliasesPage.tsx
+++ b/src/pages/ThinkingAliasesPage.tsx
@@ -558,11 +558,6 @@ export function ThinkingAliasesPage({ embedded = false }: { embedded?: boolean }
       <MessageNotice tone="success" message={!error ? notice : null} onDismiss={() => setNotice('')} />
 
       <header className="management-header">
-        <div>
-          {embedded
-            ? <h2>{t('app.nav.thinkingAliases')}</h2>
-            : <h1>{t('app.nav.thinkingAliases')}</h1>}
-        </div>
         <div className="management-heading-actions">
           <span className="muted-summary">{entries.length}</span>
           <button
diff --git a/src/pages/UsageRecordsPage.tsx b/src/pages/UsageRecordsPage.tsx
index 7f46897..67979fd 100644
--- a/src/pages/UsageRecordsPage.tsx
+++ b/src/pages/UsageRecordsPage.tsx
@@ -3,15 +3,11 @@ import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, typ
 import { invoke } from '@tauri-apps/api/core';
 import { listen } from '@tauri-apps/api/event';
 import {
-  Activity,
-  BarChart3,
   ChevronLeft,
   ChevronRight,
-  CircleDollarSign,
   Columns3Cog,
   Database,
   FilterX,
-  List,
   Pencil,
   RefreshCw,
   RotateCcw,
@@ -560,7 +556,7 @@ export function UsageRecordsPage() {
 
       <div className="usage-topbar">
         <div className="usage-page-navigation">
-          <h1>{t('usage.title')}</h1>
+          <h1 className="sr-only">{t('usage.title')}</h1>
           <div className="usage-tabs" role="tablist" aria-label={t('usage.pageLabel')}>
           <button
             type="button"
@@ -573,7 +569,6 @@ export function UsageRecordsPage() {
             onClick={() => setActiveTab('overview')}
             onKeyDown={(event) => handleTabKeyDown(event, 'overview')}
           >
-            <BarChart3 size={15} />
             <span>{t('usage.tab.overview')}</span>
           </button>
           <button
@@ -587,7 +582,6 @@ export function UsageRecordsPage() {
             onClick={() => setActiveTab('analysis')}
             onKeyDown={(event) => handleTabKeyDown(event, 'analysis')}
           >
-            <Activity size={15} />
             <span>{t('usage.tab.analysis')}</span>
           </button>
           <button
@@ -601,7 +595,6 @@ export function UsageRecordsPage() {
             onClick={() => setActiveTab('events')}
             onKeyDown={(event) => handleTabKeyDown(event, 'events')}
           >
-            <List size={15} />
             <span>{t('usage.tab.events')}</span>
           </button>
           <button
@@ -615,7 +608,6 @@ export function UsageRecordsPage() {
             onClick={() => setActiveTab('pricing')}
             onKeyDown={(event) => handleTabKeyDown(event, 'pricing')}
           >
-            <CircleDollarSign size={15} />
             <span>{t('usage.tab.pricing')}</span>
           </button>
           <button
@@ -629,7 +621,6 @@ export function UsageRecordsPage() {
             onClick={() => setActiveTab('data-management')}
             onKeyDown={(event) => handleTabKeyDown(event, 'data-management')}
           >
-            <Wrench size={15} />
             <span>{t('usage.tab.dataManagement')}</span>
           </button>
           </div>
diff --git a/src/pages/VersionManagementPage.tsx b/src/pages/VersionManagementPage.tsx
index c58b112..f931897 100644
--- a/src/pages/VersionManagementPage.tsx
+++ b/src/pages/VersionManagementPage.tsx
@@ -509,9 +509,6 @@ export function VersionManagementPage() {
 
   return (
     <section className="page management-page version-management-page">
-      <header className="management-header version-page-header">
-        <div><h1>{t('app.nav.versions')}</h1></div>
-      </header>
       <MessageNotice message={versionSourceError} onDismiss={() => setVersionSourceError('')} />
       <section className="panel version-list">
         <div className="version-source-row" aria-label={t('kernel.versions.downloadSource')}>
diff --git a/src/styles.css b/src/styles.css
index d22fcd2..d61319d 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1940,7 +1940,8 @@ textarea:focus-visible {
 @container workspace (min-width: 840px) {
   .home-page {
     grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.15fr);
-    grid-auto-rows: 1fr;
+    grid-template-rows: auto auto;
+    grid-auto-rows: unset;
     align-items: stretch;
   }
 
diff --git a/src/styles/ui-refinements.css b/src/styles/ui-refinements.css
index d6896f8..8eca37d 100644
--- a/src/styles/ui-refinements.css
+++ b/src/styles/ui-refinements.css
@@ -149,18 +149,13 @@ body, html, #root {
 }
 
 @container workspace (min-width: 840px) {
-  .home-page {
-    grid-template-rows: auto auto auto;
-    grid-auto-rows: unset;
-  }
-
   .home-page > .home-layout,
   .home-page > .client-api-panel {
-    grid-row: 2;
+    grid-row: 1;
   }
 
   .home-page > .home-quick-actions {
-    grid-row: 3;
+    grid-row: 2;
     grid-column: 1 / -1;
   }
 }
@@ -358,6 +353,40 @@ body, html, #root {
   font-weight: 600;
 }
 
+/* API access toolbar */
+.api-access-page .management-panel-heading {
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.api-access-heading-tools {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 420px;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.api-access-heading-tools .compact-toolbar {
+  width: min(280px, 100%);
+  flex: 1 1 180px;
+}
+
+
+@container workspace (max-width: 760px) {
+  .api-access-heading-tools {
+    width: 100%;
+    flex-basis: 100%;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
+
+  .api-access-heading-tools .compact-toolbar {
+    flex-basis: 100%;
+  }
+}
+
 /* 7. OAuth Management Page Polish */
 .oauth-management-page .management-header h1 {
   display: none;
@@ -444,62 +473,150 @@ body, html, #root {
   outline-offset: -2px;
 }
 
-.usage-stat-card {
-  --usage-tone: var(--ui-accent);
-  position: relative;
-  gap: 7px;
+/* Usage records follow the same shell surface as the home page. */
+.usage-records-page {
+  gap: 16px;
+  color: #1d1d1f;
+}
+
+.usage-records-page .usage-topbar {
+  align-items: center;
+}
+
+.usage-records-page .usage-collector-state,
+.usage-records-page .usage-refresh-btn {
+  height: 34px;
+  border: 0;
+  border-radius: 999px;
+  background: rgba(118, 118, 128, 0.12);
+  box-shadow: none;
+  color: #1d1d1f;
+}
+
+.usage-records-page .usage-collector-state strong {
+  color: #1d1d1f;
+  font-weight: 600;
+}
+
+.usage-records-page .usage-collector-state span,
+.usage-records-page .usage-filter-label,
+.usage-records-page .usage-section-heading span {
+  color: #6e6e73;
+}
+
+.usage-records-page .usage-trend-panel,
+.usage-records-page .usage-health-panel,
+.usage-records-page .usage-category-panel,
+.usage-records-page .usage-events-panel {
+  border: 0;
+  border-radius: 18px;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 28px rgba(0, 0, 0, 0.045);
+}
+
+.usage-records-page .panel.usage-filter-panel {
+  display: grid;
+  gap: 8px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.usage-records-page .usage-filter-item {
+  min-width: 0;
+}
+
+.usage-records-page .usage-filter-label {
+  padding-left: 12px;
+}
+
+.usage-records-page .usage-filter-item select,
+.usage-records-page .usage-filter-item input {
+  height: 34px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+}
+
+.usage-records-page .usage-filter-item select:hover,
+.usage-records-page .usage-filter-item input:hover {
+  border-color: var(--border-hover);
+}
+
+.usage-records-page .usage-filter-item select:focus,
+.usage-records-page .usage-filter-item input:focus {
+  border-color: var(--ui-accent);
+  box-shadow: 0 0 0 3px var(--ui-focus-ring);
+}
+
+.usage-records-page .usage-section-heading strong {
+  color: #1d1d1f;
+  font-weight: 650;
+  letter-spacing: -0.02em;
+}
+
+.usage-records-page .usage-stat-grid {
+  gap: 1px;
   overflow: hidden;
-  padding: 13px 14px 12px 16px;
-  border-color: color-mix(in srgb, var(--usage-tone) 24%, var(--border-color));
-  border-radius: 12px;
-  background:
-    linear-gradient(180deg, color-mix(in srgb, var(--usage-tone) 13%, #fff) 0%, #fff 68%);
-  box-shadow: var(--ui-panel-shadow);
+  padding: 0;
+  border-radius: 18px;
+  background: #d8d8de;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 28px rgba(0, 0, 0, 0.045);
+}
+
+.usage-stat-card {
+  --usage-tone: #1d1d1f;
+  position: relative;
+  gap: 8px;
+  overflow: hidden;
+  padding: 16px 16px 14px;
+  border: 0;
+  border-radius: 0;
+  background: #fff;
+  box-shadow: none;
 }
 
 .usage-stat-card::before {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 4px;
-  background: var(--usage-tone);
-  content: "";
+  content: none;
 }
 
-.usage-stat-card.tone-requests { --usage-tone: #0f766e; }
-.usage-stat-card.tone-speed { --usage-tone: #2563eb; }
-.usage-stat-card.tone-tokens { --usage-tone: #7c3aed; }
-.usage-stat-card.tone-success { --usage-tone: #059669; }
-.usage-stat-card.tone-cache { --usage-tone: #d97706; }
-.usage-stat-card.tone-cost { --usage-tone: #0f766e; }
+.usage-stat-card.tone-requests { --usage-tone: #1d1d1f; }
+.usage-stat-card.tone-speed { --usage-tone: #007aff; }
+.usage-stat-card.tone-tokens { --usage-tone: #5856d6; }
+.usage-stat-card.tone-success { --usage-tone: #34c759; }
+.usage-stat-card.tone-cache { --usage-tone: #ff9500; }
+.usage-stat-card.tone-cost { --usage-tone: #007aff; }
 
 .usage-stat-card:hover {
-  border-color: color-mix(in srgb, var(--usage-tone) 48%, var(--border-color));
-  box-shadow: var(--ui-card-hover-shadow);
+  border-color: transparent;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 14px 32px rgba(0, 0, 0, 0.06);
+  transform: none;
 }
 
 .usage-stat-card-label {
-  color: var(--usage-tone);
+  color: #6e6e73;
   font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.01em;
+  font-weight: 590;
+  letter-spacing: -0.01em;
 }
 
 .usage-stat-card-value {
-  color: var(--text-primary);
-  font-size: 28px;
-  font-weight: 750;
-  letter-spacing: -0.035em;
-  line-height: 1.05;
+  color: var(--usage-tone);
+  font-size: 30px;
+  font-weight: 650;
+  letter-spacing: -0.045em;
+  line-height: 1.02;
 }
 
 .usage-stat-meter {
   display: block;
-  height: 6px;
+  height: 5px;
   overflow: hidden;
   border-radius: 999px;
-  background: color-mix(in srgb, var(--usage-tone) 16%, #e2e8f0);
+  background: #e5e5ea;
 }
 
 .usage-stat-meter > span {
@@ -513,9 +630,9 @@ body, html, #root {
   display: flex;
   min-height: 0;
   flex-wrap: wrap;
-  gap: 4px;
+  gap: 5px;
   overflow: visible;
-  color: var(--text-secondary);
+  color: #6e6e73;
   white-space: normal;
   -webkit-line-clamp: unset;
   -webkit-box-orient: unset;
@@ -525,28 +642,28 @@ body, html, #root {
   display: inline-flex;
   max-width: 100%;
   align-items: center;
-  padding: 2px 7px;
+  padding: 2px 8px;
   border-radius: 999px;
-  background: #f1f5f9;
-  color: var(--text-secondary);
+  background: #f2f2f7;
+  color: #3a3a3c;
   font-size: 11px;
-  font-weight: 700;
-  line-height: 1.4;
+  font-weight: 590;
+  line-height: 1.45;
 }
 
 .usage-stat-chip.tone-ok {
-  background: #ecfdf5;
-  color: #047857;
+  background: rgba(52, 199, 89, 0.14);
+  color: #248a3d;
 }
 
 .usage-stat-chip.tone-bad {
-  background: #fef2f2;
-  color: #b91c1c;
+  background: rgba(255, 59, 48, 0.12);
+  color: #d70015;
 }
 
 .usage-stat-chip.tone-warn {
-  background: #fffbeb;
-  color: #b45309;
+  background: rgba(255, 149, 0, 0.16);
+  color: #c93400;
 }
 
 .usage-stat-chip.tone-note {
@@ -554,63 +671,8 @@ body, html, #root {
   padding: 0;
   border-radius: 0;
   background: transparent;
-  color: var(--text-tertiary);
-  font-weight: 600;
-}
-
-.usage-filter-panel,
-.usage-trend-panel,
-.usage-health-panel,
-.usage-category-panel,
-.usage-events-panel,
-.usage-collector-state,
-.usage-refresh-btn {
-  border-color: var(--border-color);
-  background: var(--bg-card);
-  box-shadow: var(--ui-panel-shadow);
-}
-
-.usage-filter-panel {
-  padding: 12px 14px;
-}
-
-.usage-filter-label {
-  color: var(--text-tertiary);
-}
-
-.usage-filter-item select,
-.usage-filter-item input {
-  border-color: var(--border-primary);
-  border-radius: 8px;
-  background: var(--bg-card);
-  color: var(--text-primary);
-}
-
-.usage-filter-item select:focus,
-.usage-filter-item input:focus {
-  border-color: var(--ui-accent);
-  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
-}
-
-.usage-section-heading strong {
-  color: var(--text-primary);
-}
-
-.usage-section-heading span,
-.usage-token-count,
-.usage-token-pct,
-.usage-trend-legend-item {
-  color: var(--text-tertiary);
-}
-
-.usage-token-name,
-.usage-collector-state strong {
-  color: var(--text-primary);
-}
-
-.usage-token-bar-track {
-  height: 7px;
-  background: var(--bg-hover);
+  color: #6e6e73;
+  font-weight: 500;
 }
 
 .usage-metrics-grid .metric-card {
@@ -852,10 +914,53 @@ body, html, #root {
 }
 
 /* Dark Theme Adjustments for Refined Components */
+:root[data-theme='dark'] .usage-records-page,
+:root[data-theme='dark'] .usage-records-page .usage-section-heading strong,
+:root[data-theme='dark'] .usage-records-page .usage-collector-state,
+:root[data-theme='dark'] .usage-records-page .usage-collector-state strong {
+  color: #f5f5f7;
+}
+
+:root[data-theme='dark'] .usage-records-page .panel.usage-filter-panel {
+  background: transparent;
+  box-shadow: none;
+}
+
+:root[data-theme='dark'] .usage-records-page .usage-collector-state,
+:root[data-theme='dark'] .usage-records-page .usage-refresh-btn {
+  background: #2c2c2e;
+  color: #f5f5f7;
+}
+
+:root[data-theme='dark'] .usage-records-page .usage-filter-item select,
+:root[data-theme='dark'] .usage-records-page .usage-filter-item input {
+  background: var(--bg-primary);
+  border-color: var(--border-color);
+  color: var(--text-primary);
+}
+
+:root[data-theme='dark'] .usage-records-page .usage-trend-panel,
+:root[data-theme='dark'] .usage-records-page .usage-health-panel,
+:root[data-theme='dark'] .usage-records-page .usage-category-panel,
+:root[data-theme='dark'] .usage-records-page .usage-events-panel,
 :root[data-theme='dark'] .usage-stat-card {
-  background:
-    linear-gradient(180deg, color-mix(in srgb, var(--usage-tone) 24%, var(--bg-card)) 0%, var(--bg-card) 72%);
-  border-color: color-mix(in srgb, var(--usage-tone) 42%, var(--border-color));
+  background: #1c1c1e;
+  border-color: transparent;
+  box-shadow: none;
+}
+
+:root[data-theme='dark'] .usage-records-page .usage-stat-grid {
+  background: #3a3a3c;
+  box-shadow: none;
+}
+
+:root[data-theme='dark'] .usage-stat-card.tone-requests {
+  --usage-tone: #f5f5f7;
+}
+
+:root[data-theme='dark'] .usage-stat-card-label,
+:root[data-theme='dark'] .usage-stat-chip.tone-note {
+  color: #98989d;
 }
 
 :root[data-theme='dark'] .usage-stat-chip {