diff --git a/web/components/agent-inbox.js b/web/components/agent-inbox.js
index 996a952..04f560a 100644
--- a/web/components/agent-inbox.js
+++ b/web/components/agent-inbox.js
@@ -63,14 +63,18 @@ export class AgentInboxPage extends I18nMixin(InboxMixin(LightElement)) {
 
     return html`
       <div class="page-panel">
-        <div class="page-panel-header">
-          <h5 class="mb-0">
-            ${t('nav.inbox')}
-            ${total > 0 ? html`<span class="badge bg-danger ms-2">${total}</span>` : nothing}
-          </h5>
-          <button class="inbox-refresh-btn" title="Refresh" @click=${() => this._loadInbox()}>
-            <i class="bi bi-arrow-clockwise"></i>
-          </button>
+        <div class="page-header">
+          <div class="page-header-left">
+            <h2 class="page-header-title">
+              ${t('nav.inbox')}
+              ${total > 0 ? html`<span class="badge bg-danger ms-2">${total}</span>` : nothing}
+            </h2>
+          </div>
+          <div class="page-header-actions">
+            <button class="inbox-refresh-btn" title="Refresh" @click=${() => this._loadInbox()}>
+              <i class="bi bi-arrow-clockwise"></i>
+            </button>
+          </div>
         </div>
         ${this._renderInboxSection()}
       </div>
diff --git a/web/components/agents.js b/web/components/agents.js
index d729795..a646958 100644
--- a/web/components/agents.js
+++ b/web/components/agents.js
@@ -285,19 +285,23 @@ export class AgentsPage extends LightElement {
         ${this._detail
           ? this._renderDetail()
           : html`
-            <div class="agents-page-header">
-              <h2 class="llm-page-title">${t('agents.title')}</h2>
-            </div>
-
-            <div class="agent-info-banner">
-              <div class="agent-info-banner-icon"><i class="bi bi-info-circle-fill"></i></div>
-              <div class="agent-info-banner-body">
-                <p class="mb-1">${unsafeHTML(t('agents.banner.title'))}</p>
-                <p class="mb-0">${unsafeHTML(t('agents.banner.text'))}</p>
+            <div class="page-header">
+              <div class="page-header-left">
+                <h2 class="page-header-title">${t('agents.title')}</h2>
               </div>
             </div>
 
-            ${this._renderList()}
+            <div class="agents-body">
+              <div class="agent-info-banner">
+                <div class="agent-info-banner-icon"><i class="bi bi-info-circle-fill"></i></div>
+                <div class="agent-info-banner-body">
+                  <p class="mb-1">${unsafeHTML(t('agents.banner.title'))}</p>
+                  <p class="mb-0">${unsafeHTML(t('agents.banner.text'))}</p>
+                </div>
+              </div>
+
+              ${this._renderList()}
+            </div>
           `
         }
       </div>
diff --git a/web/components/approval-groups.js b/web/components/approval-groups.js
index 6439105..ef04e27 100644
--- a/web/components/approval-groups.js
+++ b/web/components/approval-groups.js
@@ -356,12 +356,14 @@ export class ApprovalGroupsPage extends LightElement {
   render() {
     return html`
       <div class="apr-page">
-        <div class="apr-header">
-          <h2 class="apr-title">
-            <i class="bi bi-shield-check me-2"></i>${t('security.title')}
-          </h2>
-          <div class="apr-header-right">
-            <span class="apr-header-count">${this._groups.length === 1 ? t('security.group_count', { n: this._groups.length }) : t('security.group_count_plural', { n: this._groups.length })}</span>
+        <div class="page-header">
+          <div class="page-header-left">
+            <h2 class="page-header-title">
+              <i class="bi bi-shield-check me-2"></i>${t('security.title')}
+            </h2>
+          </div>
+          <div class="page-header-actions">
+            <span class="page-header-count">${this._groups.length === 1 ? t('security.group_count', { n: this._groups.length }) : t('security.group_count_plural', { n: this._groups.length })}</span>
             <button class="btn btn-sm btn-primary" @click=${() => this._startNewGroup()}>
               <i class="bi bi-plus-lg me-1"></i>${t('security.new_group')}
             </button>
diff --git a/web/components/approval-rules.js b/web/components/approval-rules.js
index 1f2e1cc..c0776e2 100644
--- a/web/components/approval-rules.js
+++ b/web/components/approval-rules.js
@@ -1042,20 +1042,21 @@ export class ApprovalRulesPage extends LightElement {
 
     return html`
       <div class="apr-page">
-        <div class="apr-header">
-          <button
-            class="btn btn-sm btn-outline-secondary"
-            style="flex-shrink:0"
-            @click=${() => this._goBack()}
-          >
-            <i class="bi bi-arrow-left"></i>
-          </button>
-          <h2 class="apr-title">
-            ${isDefault ? html`<span class="apr-group-default-badge" style="vertical-align:middle">${t('approval.header.default_badge')}</span>` : nothing}
-            ${group.name}
-          </h2>
-          <div class="apr-header-right">
-            <span class="apr-header-count">${totalRules === 1 ? t('approval.header.rule_count', { n: totalRules }) : t('approval.header.rule_count_plural', { n: totalRules })}</span>
+        <div class="page-header">
+          <div class="page-header-left">
+            <button
+              class="btn btn-sm btn-outline-secondary page-header-back"
+              @click=${() => this._goBack()}
+            >
+              <i class="bi bi-arrow-left"></i>
+            </button>
+            <h2 class="page-header-title">
+              ${isDefault ? html`<span class="apr-group-default-badge" style="vertical-align:middle">${t('approval.header.default_badge')}</span>` : nothing}
+              ${group.name}
+            </h2>
+          </div>
+          <div class="page-header-actions">
+            <span class="page-header-count">${totalRules === 1 ? t('approval.header.rule_count', { n: totalRules }) : t('approval.header.rule_count_plural', { n: totalRules })}</span>
           </div>
         </div>
 
diff --git a/web/components/config-page.js b/web/components/config-page.js
index c18805b..d894363 100644
--- a/web/components/config-page.js
+++ b/web/components/config-page.js
@@ -116,10 +116,13 @@ export class ConfigPage extends LightElement {
   render() {
     return html`
       <div class="config-page">
-        <div class="config-page-header">
-          <h2 class="llm-page-title">${t('config.title')}</h2>
+        <div class="page-header">
+          <div class="page-header-left">
+            <h2 class="page-header-title">${t('config.title')}</h2>
+          </div>
         </div>
 
+        <div class="config-body">
         ${this._error ? html`
           <div class="alert alert-danger">${this._error}</div>` : nothing}
 
@@ -156,6 +159,7 @@ export class ConfigPage extends LightElement {
             </div>
           </div>
         </div>
+        </div>
       </div>`;
   }
 }
diff --git a/web/components/connector-detail.js b/web/components/connector-detail.js
index 62a8e07..f741e67 100644
--- a/web/components/connector-detail.js
+++ b/web/components/connector-detail.js
@@ -399,12 +399,12 @@ export class ConnectorDetailPage extends LightElement {
   _renderHeader() {
     const title = this._entry?.friendly_name || this._glob?.friendly_name || this._name || 'Connector';
     return html`
-      <div class="um-header">
-        <div class="d-flex align-items-center gap-2" style="min-width:0">
-          <button class="btn btn-sm btn-outline-secondary" title=${t('connectors.detail.back')} @click=${() => this._back()}>
+      <div class="page-header">
+        <div class="page-header-left">
+          <button class="btn btn-sm btn-outline-secondary page-header-back" title=${t('connectors.detail.back')} @click=${() => this._back()}>
             <i class="bi bi-arrow-left"></i>
           </button>
-          <h2 class="um-title" style="min-width:0;overflow:hidden;text-overflow:ellipsis">${title}</h2>
+          <h2 class="page-header-title" style="min-width:0;overflow:hidden;text-overflow:ellipsis">${title}</h2>
         </div>
       </div>`;
   }
diff --git a/web/components/connectors.js b/web/components/connectors.js
index 6769451..6894d3f 100644
--- a/web/components/connectors.js
+++ b/web/components/connectors.js
@@ -344,9 +344,11 @@ export class ConnectorsPage extends LightElement {
 
     return html`
       <div class="um-page">
-        <div class="um-header">
-          <h2 class="um-title"><i class="bi bi-plug me-2"></i>${t('connectors.title')}</h2>
-          <div class="um-header-right">
+        <div class="page-header">
+          <div class="page-header-left">
+            <h2 class="page-header-title"><i class="bi bi-plug me-2"></i>${t('connectors.title')}</h2>
+          </div>
+          <div class="page-header-actions">
             ${this._isAdmin ? html`
               <button class="btn btn-sm btn-outline-secondary" @click=${() => this._openProviders()}>
                 <i class="bi bi-key me-1"></i>${t('connectors.btn.signin_providers')}
@@ -498,12 +500,12 @@ export class ConnectorsPage extends LightElement {
     const isScript = f.source === 'local_script';
     return html`
       <div class="um-page">
-        <div class="um-header">
-          <div class="d-flex align-items-center gap-2" style="min-width:0">
-            <button class="btn btn-sm btn-outline-secondary" title=${t('connectors.new.back')} @click=${() => this._closeNew()}>
+        <div class="page-header">
+          <div class="page-header-left">
+            <button class="btn btn-sm btn-outline-secondary page-header-back" title=${t('connectors.new.back')} @click=${() => this._closeNew()}>
               <i class="bi bi-arrow-left"></i>
             </button>
-            <h2 class="um-title" style="min-width:0;overflow:hidden;text-overflow:ellipsis">
+            <h2 class="page-header-title" style="min-width:0;overflow:hidden;text-overflow:ellipsis">
               <i class="bi bi-pencil me-2"></i>${t('connectors.new.title')}</h2>
           </div>
         </div>
diff --git a/web/components/file-viewer-page.js b/web/components/file-viewer-page.js
index e13cce3..31e8f84 100644
--- a/web/components/file-viewer-page.js
+++ b/web/components/file-viewer-page.js
@@ -57,12 +57,12 @@ export class FileViewerPage extends FileViewerBase {
     if (!this._open) return nothing;
     return html`
       <div class="llm-page fv-page">
-        <div class="llm-page-header">
-          <div class="llm-header-left">
-            <button class="btn btn-sm btn-outline-secondary back-btn" title=${t('fv.back')} @click=${() => this._back()}>
+        <div class="page-header">
+          <div class="page-header-left">
+            <button class="btn btn-sm btn-outline-secondary page-header-back" title=${t('fv.back')} @click=${() => this._back()}>
               <i class="bi bi-arrow-left"></i>
             </button>
-            <h2 class="llm-page-title fv-title" title=${this._path ?? ''}><bdi>${this._path ?? ''}</bdi></h2>
+            <h2 class="page-header-title fv-title" title=${this._path ?? ''}><bdi>${this._path ?? ''}</bdi></h2>
           </div>
           <div class="fv-header-actions">
             ${this._renderModeToggle('btn btn-sm btn-outline-secondary fv-download-btn')}
diff --git a/web/components/llm-providers.js b/web/components/llm-providers.js
index 4fc7a85..efe9905 100644
--- a/web/components/llm-providers.js
+++ b/web/components/llm-providers.js
@@ -307,14 +307,17 @@ export class LlmProvidersPage extends LightElement {
   render() {
     return html`
       <div class="pv-page">
-        <div class="pv-header">
-          <h2 class="pv-title">
-            <i class="bi bi-plug me-2"></i>${t('providers.title')}
-          </h2>
-          <div class="pv-header-right">
-            <span class="pv-header-count">${t('providers.count', { n: this._providers.length })}</span>
+        <div class="page-header">
+          <div class="page-header-left">
+            <h2 class="page-header-title">
+              <i class="bi bi-plug me-2"></i>${t('providers.title')}
+            </h2>
+          </div>
+          <div class="page-header-actions">
+            <span class="page-header-count">${t('providers.count', { n: this._providers.length })}</span>
             <button class="btn btn-sm btn-primary" @click=${() => this._openAdd()}>
               <i class="bi bi-plus-lg me-1"></i>${t('providers.add')}
+            </button>
           </div>
         </div>
 
diff --git a/web/components/llm-request-detail.js b/web/components/llm-request-detail.js
index 8b90b80..9383406 100644
--- a/web/components/llm-request-detail.js
+++ b/web/components/llm-request-detail.js
@@ -540,10 +540,12 @@ export class LlmRequestDetail extends LightElement {
   render() {
     if (this._loading) return html`
       <div class="llmr-page">
-        <div class="llmr-detail-back">
-          <button class="btn btn-sm btn-outline-secondary" @click=${() => this._back()}>
-            <i class="bi bi-arrow-left"></i> ${t('llmr.detail.back')}
-          </button>
+        <div class="page-header">
+          <div class="page-header-left">
+            <button class="btn btn-sm btn-outline-secondary page-header-back" title=${t('llmr.detail.back')} @click=${() => this._back()}>
+              <i class="bi bi-arrow-left"></i>
+            </button>
+          </div>
         </div>
         <div class="llmr-state">
           <div class="spinner-border spinner-border-sm text-secondary" role="status"></div>
@@ -554,10 +556,12 @@ export class LlmRequestDetail extends LightElement {
 
     if (this._error) return html`
       <div class="llmr-page">
-        <div class="llmr-detail-back">
-          <button class="btn btn-sm btn-outline-secondary" @click=${() => this._back()}>
-            <i class="bi bi-arrow-left"></i> ${t('llmr.detail.back')}
-          </button>
+        <div class="page-header">
+          <div class="page-header-left">
+            <button class="btn btn-sm btn-outline-secondary page-header-back" title=${t('llmr.detail.back')} @click=${() => this._back()}>
+              <i class="bi bi-arrow-left"></i>
+            </button>
+          </div>
         </div>
         <div class="llmr-state llmr-state--error">
           <i class="bi bi-exclamation-circle"></i>
@@ -586,15 +590,16 @@ export class LlmRequestDetail extends LightElement {
 
     return html`
       <div class="llmr-page">
-        <div class="llmr-detail-back">
-          <button class="btn btn-sm btn-outline-secondary" @click=${() => this._back()}>
-            <i class="bi bi-arrow-left"></i> ${t('llmr.detail.back')}
-          </button>
-          <span class="llmr-detail-title">
-            <i class="bi bi-journal-code"></i> ${t('llmr.detail.request')} <span class="llmr-detail-id">#${d.id}</span>
-          </span>
+        <div class="page-header">
+          <div class="page-header-left">
+            <button class="btn btn-sm btn-outline-secondary page-header-back" title=${t('llmr.detail.back')} @click=${() => this._back()}>
+              <i class="bi bi-arrow-left"></i>
+            </button>
+            <h2 class="page-header-title"><i class="bi bi-journal-code"></i> ${t('llmr.detail.request')} <span class="llmr-detail-id">#${d.id}</span></h2>
+          </div>
         </div>
 
+        <div class="llmr-body">
         ${this._renderStatBar(d)}
 
         ${payloadMissing ? html`
@@ -643,6 +648,7 @@ export class LlmRequestDetail extends LightElement {
               </div>
             `
           ) : nothing}
+        </div>
       </div>
     `;
   }
diff --git a/web/components/llm-requests.js b/web/components/llm-requests.js
index 5029163..fc3d776 100644
--- a/web/components/llm-requests.js
+++ b/web/components/llm-requests.js
@@ -283,13 +283,19 @@ export class LlmRequestsPage extends LightElement {
 
     return html`
       <div class="llmr-page">
-        <div class="llmr-header">
-          <h2 class="llmr-title"><i class="bi bi-journal-code"></i> ${t('llmr.title')}</h2>
-          <span class="llmr-total-badge">${t('llmr.total', { n: this._total })}</span>
+        <div class="page-header">
+          <div class="page-header-left">
+            <h2 class="page-header-title"><i class="bi bi-journal-code"></i> ${t('llmr.title')}</h2>
+          </div>
+          <div class="page-header-actions">
+            <span class="page-header-count">${t('llmr.total', { n: this._total })}</span>
+          </div>
+        </div>
+        <div class="llmr-body">
+          ${this._renderFilters()}
+          ${this._renderTable()}
+          ${this._renderPagination()}
         </div>
-        ${this._renderFilters()}
-        ${this._renderTable()}
-        ${this._renderPagination()}
       </div>
     `;
   }
diff --git a/web/components/marketplace.js b/web/components/marketplace.js
index 3dcf914..a074d52 100644
--- a/web/components/marketplace.js
+++ b/web/components/marketplace.js
@@ -145,9 +145,11 @@ export class MarketplacePage extends LightElement {
 
     return html`
       <div class="um-page">
-        <div class="um-header">
-          <h2 class="um-title"><i class="bi bi-shop me-2"></i>${t('marketplace.title')}</h2>
-          <div class="um-header-right">
+        <div class="page-header">
+          <div class="page-header-left">
+            <h2 class="page-header-title"><i class="bi bi-shop me-2"></i>${t('marketplace.title')}</h2>
+          </div>
+          <div class="page-header-actions">
             <button class="btn btn-sm btn-outline-primary" @click=${() => this._goConnectors()}>
               <i class="bi bi-arrow-left me-1"></i>${t('marketplace.btn.connectors')}
             </button>
diff --git a/web/components/models-hub.js b/web/components/models-hub.js
index e6e2ae9..59d8a70 100644
--- a/web/components/models-hub.js
+++ b/web/components/models-hub.js
@@ -126,23 +126,29 @@ export class ModelsHubPage extends LightElement {
 
     return html`
       <div class="models-hub">
-        <h2 class="llm-page-title">${t('models.hub.title')}</h2>
-        <p class="text-muted" style="font-size:0.88rem;margin-top:0.25rem">
-          ${t('models.hub.subtitle')}
-        </p>
-        <div class="models-hub-grid">
-          ${CARDS.map(card => html`
-            <button class="models-type-card" @click=${() => this._openSection(card.id)}>
-              <div class="models-type-card-icon">
-                <i class="bi ${card.icon}"></i>
-              </div>
-              <div class="models-type-card-title">${t(card.titleKey)}</div>
-              <div class="models-type-card-desc">${t(card.descKey)}</div>
-              <div class="models-type-card-count ${this._counts[card.id] > 0 ? 'has-models' : ''}">
-                ${this._loading ? '…' : this._countLabel(card.id)}
-              </div>
-            </button>
-          `)}
+        <div class="page-header">
+          <div class="page-header-left">
+            <h2 class="page-header-title">${t('models.hub.title')}</h2>
+          </div>
+        </div>
+        <div class="models-hub-body">
+          <p class="text-muted" style="font-size:0.88rem;margin-top:0.25rem">
+            ${t('models.hub.subtitle')}
+          </p>
+          <div class="models-hub-grid">
+            ${CARDS.map(card => html`
+              <button class="models-type-card" @click=${() => this._openSection(card.id)}>
+                <div class="models-type-card-icon">
+                  <i class="bi ${card.icon}"></i>
+                </div>
+                <div class="models-type-card-title">${t(card.titleKey)}</div>
+                <div class="models-type-card-desc">${t(card.descKey)}</div>
+                <div class="models-type-card-count ${this._counts[card.id] > 0 ? 'has-models' : ''}">
+                  ${this._loading ? '…' : this._countLabel(card.id)}
+                </div>
+              </button>
+            `)}
+          </div>
         </div>
       </div>
     `;
diff --git a/web/components/models-image.js b/web/components/models-image.js
index 06b5b3b..545b08a 100644
--- a/web/components/models-image.js
+++ b/web/components/models-image.js
@@ -298,21 +298,23 @@ export class ModelsImageSection extends LightElement {
 
     return html`
       <div class="llm-page">
-        <div class="llm-page-header">
-          <div class="llm-header-left">
+        <div class="page-header">
+          <div class="page-header-left">
             ${this.onback ? html`
-              <button class="btn btn-sm btn-outline-secondary back-btn" title=${t('models.back')} @click=${this.onback}>
+              <button class="btn btn-sm btn-outline-secondary page-header-back" title=${t('models.back')} @click=${this.onback}>
                 <i class="bi bi-arrow-left"></i>
               </button>
             ` : ''}
             <div>
-              <h2 class="llm-page-title">${t('models.image.title')}</h2>
-              <span class="llm-page-count">${t('models.hub.count.many', { n: this._models.length })}</span>
+              <h2 class="page-header-title">${t('models.image.title')}</h2>
+              <span class="page-header-count">${t('models.hub.count.many', { n: this._models.length })}</span>
             </div>
           </div>
-          <button class="btn btn-sm btn-primary" @click=${() => this._openAdd()} ?disabled=${!canAdd}>
-            <i class="bi bi-plus-lg me-1"></i>${t('models.add')}
-          </button>
+          <div class="page-header-actions">
+            <button class="btn btn-sm btn-primary" @click=${() => this._openAdd()} ?disabled=${!canAdd}>
+              <i class="bi bi-plus-lg me-1"></i>${t('models.add')}
+            </button>
+          </div>
         </div>
 
         ${!canAdd ? html`
diff --git a/web/components/models-llm.js b/web/components/models-llm.js
index 5bdd975..51ba3a7 100644
--- a/web/components/models-llm.js
+++ b/web/components/models-llm.js
@@ -762,22 +762,24 @@ export class ModelsLlmSection extends LightElement {
   render() {
     return html`
       <div class="llm-page">
-        <div class="llm-page-header">
-          <div class="llm-header-left">
+        <div class="page-header">
+          <div class="page-header-left">
             ${this.onback ? html`
-              <button class="btn btn-sm btn-outline-secondary back-btn" title=${t('models.back')} @click=${this.onback}>
+              <button class="btn btn-sm btn-outline-secondary page-header-back" title=${t('models.back')} @click=${this.onback}>
                 <i class="bi bi-arrow-left"></i>
               </button>
             ` : ''}
             <div>
-              <h2 class="llm-page-title">${t('models.llm.title')}</h2>
-              <span class="llm-page-count">${t('models.hub.count.many', { n: this._models.length })}</span>
+              <h2 class="page-header-title">${t('models.llm.title')}</h2>
+              <span class="page-header-count">${t('models.hub.count.many', { n: this._models.length })}</span>
             </div>
           </div>
-          <button class="btn btn-sm btn-primary" @click=${() => this._openAdd()}
-            ?disabled=${this._providers.length === 0}>
-            <i class="bi bi-plus-lg me-1"></i>${t('models.add')}
-          </button>
+          <div class="page-header-actions">
+            <button class="btn btn-sm btn-primary" @click=${() => this._openAdd()}
+              ?disabled=${this._providers.length === 0}>
+              <i class="bi bi-plus-lg me-1"></i>${t('models.add')}
+            </button>
+          </div>
         </div>
 
         ${this._providers.length === 0 ? html`
diff --git a/web/components/models-transcribe.js b/web/components/models-transcribe.js
index 46d7d86..fb24713 100644
--- a/web/components/models-transcribe.js
+++ b/web/components/models-transcribe.js
@@ -361,18 +361,20 @@ export class ModelsTranscribeSection extends LightElement {
 
     return html`
       <div class="llm-page">
-        <div class="llm-page-header">
-          <div class="llm-header-left">
+        <div class="page-header">
+          <div class="page-header-left">
             ${this.onback ? html`
-              <button class="btn btn-sm btn-outline-secondary back-btn" title=${t('models.back')} @click=${this.onback}>
+              <button class="btn btn-sm btn-outline-secondary page-header-back" title=${t('models.back')} @click=${this.onback}>
                 <i class="bi bi-arrow-left"></i>
               </button>
             ` : ''}
-            <h2 class="llm-page-title">${t('models.transcribe.title')}</h2>
+            <h2 class="page-header-title">${t('models.transcribe.title')}</h2>
+          </div>
+          <div class="page-header-actions">
+            <button class="btn btn-sm btn-primary" @click=${() => this._openAdd()} ?disabled=${!canAdd}>
+              <i class="bi bi-plus-lg me-1"></i>${t('models.add')}
+            </button>
           </div>
-          <button class="btn btn-sm btn-primary" @click=${() => this._openAdd()} ?disabled=${!canAdd}>
-            <i class="bi bi-plus-lg me-1"></i>${t('models.add')}
-          </button>
         </div>
 
         ${!canAdd ? html`
diff --git a/web/components/models-tts.js b/web/components/models-tts.js
index 95a48f2..8205969 100644
--- a/web/components/models-tts.js
+++ b/web/components/models-tts.js
@@ -424,21 +424,23 @@ export class ModelsTtsSection extends LightElement {
 
     return html`
       <div class="llm-page">
-        <div class="llm-page-header">
-          <div class="llm-header-left">
+        <div class="page-header">
+          <div class="page-header-left">
             ${this.onback ? html`
-              <button class="btn btn-sm btn-outline-secondary back-btn" title=${t('models.back')} @click=${this.onback}>
+              <button class="btn btn-sm btn-outline-secondary page-header-back" title=${t('models.back')} @click=${this.onback}>
                 <i class="bi bi-arrow-left"></i>
               </button>
             ` : ''}
             <div>
-              <h2 class="llm-page-title">${t('models.tts.title')}</h2>
-              <span class="llm-page-count">${t('models.hub.count.many', { n: this._models.length })}</span>
+              <h2 class="page-header-title">${t('models.tts.title')}</h2>
+              <span class="page-header-count">${t('models.hub.count.many', { n: this._models.length })}</span>
             </div>
           </div>
-          <button class="btn btn-sm btn-primary" @click=${() => this._openAdd()} ?disabled=${!canAdd}>
-            <i class="bi bi-plus-lg me-1"></i>${t('models.add')}
-          </button>
+          <div class="page-header-actions">
+            <button class="btn btn-sm btn-primary" @click=${() => this._openAdd()} ?disabled=${!canAdd}>
+              <i class="bi bi-plus-lg me-1"></i>${t('models.add')}
+            </button>
+          </div>
         </div>
 
         ${!canAdd ? html`
diff --git a/web/components/plugin-catalog.js b/web/components/plugin-catalog.js
index ea2c2fc..5f00b7d 100644
--- a/web/components/plugin-catalog.js
+++ b/web/components/plugin-catalog.js
@@ -95,8 +95,10 @@ export class PluginCatalogPage extends LightElement {
 
     return html`
       <div class="um-page">
-        <div class="um-header">
-          <h2 class="um-title"><i class="bi bi-puzzle-fill me-2"></i>${t('nav.plugins')}</h2>
+        <div class="page-header">
+          <div class="page-header-left">
+            <h2 class="page-header-title"><i class="bi bi-puzzle-fill me-2"></i>${t('nav.plugins')}</h2>
+          </div>
         </div>
 
         ${this._error ? html`
diff --git a/web/components/plugin-detail.js b/web/components/plugin-detail.js
index f4aa6c9..d30df4e 100644
--- a/web/components/plugin-detail.js
+++ b/web/components/plugin-detail.js
@@ -198,12 +198,12 @@ export class PluginDetailPage extends LightElement {
 
   _renderHeader() {
     return html`
-      <div class="um-header">
-        <div class="d-flex align-items-center gap-2" style="min-width:0">
-          <button class="btn btn-sm btn-outline-secondary" title=${t('plugins.detail.back')} @click=${() => this._back()}>
+      <div class="page-header">
+        <div class="page-header-left">
+          <button class="btn btn-sm btn-outline-secondary page-header-back" title=${t('plugins.detail.back')} @click=${() => this._back()}>
             <i class="bi bi-arrow-left"></i>
           </button>
-          <h2 class="um-title" style="min-width:0;overflow:hidden;text-overflow:ellipsis">
+          <h2 class="page-header-title" style="min-width:0;overflow:hidden;text-overflow:ellipsis">
             ${this._plugin?.name || this._id || 'Plugin'}
           </h2>
         </div>
diff --git a/web/components/profile-page.js b/web/components/profile-page.js
index f166256..6aa0275 100644
--- a/web/components/profile-page.js
+++ b/web/components/profile-page.js
@@ -136,8 +136,10 @@ export class ProfilePage extends I18nMixin(LightElement) {
 
     return html`
       <div class="um-page" style="display:flex">
-        <div class="um-header">
-          <h2 class="um-title"><i class="bi bi-person-circle me-2"></i>${t('profile.title')}</h2>
+        <div class="page-header">
+          <div class="page-header-left">
+            <h2 class="page-header-title"><i class="bi bi-person-circle me-2"></i>${t('profile.title')}</h2>
+          </div>
         </div>
         <div style="padding:0 24px 48px;max-width:480px">
 
diff --git a/web/components/projects/project-board.js b/web/components/projects/project-board.js
index 8aded50..7f2a589 100644
--- a/web/components/projects/project-board.js
+++ b/web/components/projects/project-board.js
@@ -246,19 +246,19 @@ export class ProjectBoardSection extends LightElement {
 
     return html`
       <div class="project-page">
-        <div class="project-page-header">
-          <div style="display:flex;align-items:center;gap:12px">
-            <button class="btn btn-sm btn-outline-secondary" @click=${() => this._back()}>
-              <i class="bi bi-arrow-left me-1"></i>${t('project_board.back')}
+        <div class="page-header">
+          <div class="page-header-left">
+            <button class="btn btn-sm btn-outline-secondary page-header-back" title=${t('project_board.back')} @click=${() => this._back()}>
+              <i class="bi bi-arrow-left"></i>
             </button>
-            <h2 class="project-page-title">
+            <h2 class="page-header-title">
               <i class="bi bi-folder2"></i>${this._project.name}
             </h2>
             ${this._project.is_owner
               ? html`<span class="badge text-bg-light"><i class="bi bi-person me-1"></i>${t('projects.badge.owned')}</span>`
               : html`<span class="badge text-bg-light"><i class="bi bi-people me-1"></i>${t('projects.badge.shared_by', { name: this._project.owner_name })}</span>`}
           </div>
-          <div style="display:flex;gap:0.5rem">
+          <div class="page-header-actions">
             <button class="btn btn-sm btn-outline-primary" @click=${() => this._openChat()}>
               <i class="bi bi-chat-dots me-1"></i>${t('project_board.open_chat')}
             </button>
diff --git a/web/components/projects/project-list.js b/web/components/projects/project-list.js
index f900935..75435ad 100644
--- a/web/components/projects/project-list.js
+++ b/web/components/projects/project-list.js
@@ -194,11 +194,15 @@ export class ProjectListSection extends LightElement {
   render() {
     return html`
       <div class="project-page">
-        <div class="project-page-header">
-          <h2 class="project-page-title"><i class="bi bi-kanban"></i> ${t('projects.title')}</h2>
-          <button class="btn btn-sm btn-primary" @click=${() => this._openAdd()}>
-            <i class="bi bi-plus-lg me-1"></i>${t('projects.btn.new')}
-          </button>
+        <div class="page-header">
+          <div class="page-header-left">
+            <h2 class="page-header-title"><i class="bi bi-kanban"></i> ${t('projects.title')}</h2>
+          </div>
+          <div class="page-header-actions">
+            <button class="btn btn-sm btn-primary" @click=${() => this._openAdd()}>
+              <i class="bi bi-plus-lg me-1"></i>${t('projects.btn.new')}
+            </button>
+          </div>
         </div>
 
         ${this._error ? html`
diff --git a/web/components/roles-page.js b/web/components/roles-page.js
index d87ae3c..748c5f9 100644
--- a/web/components/roles-page.js
+++ b/web/components/roles-page.js
@@ -282,10 +282,12 @@ export class RolesPage extends LightElement {
 
     return html`
       <div class="um-page">
-        <div class="um-header">
-          <h2 class="um-title"><i class="bi bi-tags me-2"></i>${t('roles.title')}</h2>
-          <div class="um-header-right">
-            <span class="um-header-count">${roles.length === 1 ? t('roles.count', { n: roles.length }) : t('roles.count_plural', { n: roles.length })}</span>
+        <div class="page-header">
+          <div class="page-header-left">
+            <h2 class="page-header-title"><i class="bi bi-tags me-2"></i>${t('roles.title')}</h2>
+          </div>
+          <div class="page-header-actions">
+            <span class="page-header-count">${roles.length === 1 ? t('roles.count', { n: roles.length }) : t('roles.count_plural', { n: roles.length })}</span>
             <button class="btn btn-sm btn-primary" @click=${() => this._openCreate()}>
               <i class="bi bi-plus-lg me-1"></i>${t('roles.new_role')}
             </button>
diff --git a/web/components/shared-folders.js b/web/components/shared-folders.js
index a35faa3..58a0bc4 100644
--- a/web/components/shared-folders.js
+++ b/web/components/shared-folders.js
@@ -185,10 +185,12 @@ export class SharedFoldersPage extends LightElement {
 
     return html`
       <div class="um-page">
-        <div class="um-header">
-          <h2 class="um-title"><i class="bi bi-folder-symlink me-2"></i>${t('sf.title')}</h2>
-          <div class="um-header-right">
-            <span class="um-header-count">
+        <div class="page-header">
+          <div class="page-header-left">
+            <h2 class="page-header-title"><i class="bi bi-folder-symlink me-2"></i>${t('sf.title')}</h2>
+          </div>
+          <div class="page-header-actions">
+            <span class="page-header-count">
               ${folders.length === 1 ? t('sf.count', { n: folders.length }) : t('sf.count_plural', { n: folders.length })}
             </span>
             <button class="btn btn-sm btn-primary" @click=${() => this._openCreate()}>
diff --git a/web/components/system-agents.js b/web/components/system-agents.js
index d234ac7..6efa02a 100644
--- a/web/components/system-agents.js
+++ b/web/components/system-agents.js
@@ -294,20 +294,26 @@ export class SystemAgentsPage extends LightElement {
   render() {
     return html`
       <div class="sa-page">
-        <div class="sa-header">
-          <h2 class="sa-title"><i class="bi bi-robot"></i> ${t('system_agents.title')}</h2>
-          <span class="sa-total-badge">${t('system_agents.total', { n: this._total })}</span>
-          <button class="btn btn-sm btn-outline-secondary sa-refresh-btn"
-                  ?disabled=${this._loading}
-                  @click=${() => this._loadAll()}>
-            <i class="bi bi-arrow-clockwise"></i> ${t('system_agents.refresh')}
-          </button>
+        <div class="page-header">
+          <div class="page-header-left">
+            <h2 class="page-header-title"><i class="bi bi-robot"></i> ${t('system_agents.title')}</h2>
+          </div>
+          <div class="page-header-actions">
+            <span class="page-header-count">${t('system_agents.total', { n: this._total })}</span>
+            <button class="btn btn-sm btn-outline-secondary"
+                    ?disabled=${this._loading}
+                    @click=${() => this._loadAll()}>
+              <i class="bi bi-arrow-clockwise"></i> ${t('system_agents.refresh')}
+            </button>
+          </div>
+        </div>
+        <div class="sa-body">
+          <p class="sa-subtitle">${t('system_agents.subtitle')}</p>
+          ${this._renderTabs()}
+          ${this._renderAgentPanel()}
+          ${this._renderTable()}
+          ${this._renderPagination()}
         </div>
-        <p class="sa-subtitle">${t('system_agents.subtitle')}</p>
-        ${this._renderTabs()}
-        ${this._renderAgentPanel()}
-        ${this._renderTable()}
-        ${this._renderPagination()}
       </div>
     `;
   }
diff --git a/web/components/tasks/cron.js b/web/components/tasks/cron.js
index 13a2c17..51293d3 100644
--- a/web/components/tasks/cron.js
+++ b/web/components/tasks/cron.js
@@ -122,10 +122,12 @@ export class CronJobsSection extends LightElement {
   render() {
     return html`
       <div class="task-page">
-        <div class="task-page-header">
-          <h2 class="task-page-title"><i class="bi bi-repeat"></i> ${t('cron.title')}</h2>
-          <div style="font-size:0.82rem;color:var(--bs-secondary-color)">
-            ${t(this._jobs.length === 1 ? 'cron.count_one' : 'cron.count_other', { n: this._jobs.length })}
+        <div class="page-header">
+          <div class="page-header-left">
+            <h2 class="page-header-title"><i class="bi bi-repeat"></i> ${t('cron.title')}</h2>
+          </div>
+          <div class="page-header-actions">
+            <span class="page-header-count">${t(this._jobs.length === 1 ? 'cron.count_one' : 'cron.count_other', { n: this._jobs.length })}</span>
           </div>
         </div>
 
diff --git a/web/components/tasks/history.js b/web/components/tasks/history.js
index 0fa916c..ddf4555 100644
--- a/web/components/tasks/history.js
+++ b/web/components/tasks/history.js
@@ -83,10 +83,12 @@ export class TaskHistorySection extends LightElement {
   render() {
     return html`
       <div class="task-page">
-        <div class="task-page-header">
-          <h2 class="task-page-title"><i class="bi bi-journal-text"></i> History</h2>
-          <div style="font-size:0.82rem;color:var(--bs-secondary-color)">
-            ${this._runs.length} run${this._runs.length !== 1 ? 's' : ''}
+        <div class="page-header">
+          <div class="page-header-left">
+            <h2 class="page-header-title"><i class="bi bi-journal-text"></i> History</h2>
+          </div>
+          <div class="page-header-actions">
+            <span class="page-header-count">${this._runs.length} run${this._runs.length !== 1 ? 's' : ''}</span>
           </div>
         </div>
 
diff --git a/web/components/tasks/running.js b/web/components/tasks/running.js
index eb28207..01f859a 100644
--- a/web/components/tasks/running.js
+++ b/web/components/tasks/running.js
@@ -124,10 +124,12 @@ export class RunningTasksSection extends LightElement {
     void this._tick; // drives re-render every second for live elapsed time
     return html`
       <div class="task-page">
-        <div class="task-page-header">
-          <h2 class="task-page-title"><i class="bi bi-activity"></i> Running Tasks</h2>
-          <div style="font-size:0.82rem;color:var(--bs-secondary-color)">
-            ${this._jobs.length} running
+        <div class="page-header">
+          <div class="page-header-left">
+            <h2 class="page-header-title"><i class="bi bi-activity"></i> Running Tasks</h2>
+          </div>
+          <div class="page-header-actions">
+            <span class="page-header-count">${this._jobs.length} running</span>
           </div>
         </div>
 
diff --git a/web/components/tasks/scheduled.js b/web/components/tasks/scheduled.js
index 9bc8abb..6a9550a 100644
--- a/web/components/tasks/scheduled.js
+++ b/web/components/tasks/scheduled.js
@@ -99,10 +99,12 @@ export class ScheduledTasksSection extends LightElement {
   render() {
     return html`
       <div class="task-page">
-        <div class="task-page-header">
-          <h2 class="task-page-title"><i class="bi bi-clock"></i> Scheduled Tasks</h2>
-          <div style="font-size:0.82rem;color:var(--bs-secondary-color)">
-            ${this._jobs.length} task${this._jobs.length !== 1 ? 's' : ''}
+        <div class="page-header">
+          <div class="page-header-left">
+            <h2 class="page-header-title"><i class="bi bi-clock"></i> Scheduled Tasks</h2>
+          </div>
+          <div class="page-header-actions">
+            <span class="page-header-count">${this._jobs.length} task${this._jobs.length !== 1 ? 's' : ''}</span>
           </div>
         </div>
 
diff --git a/web/components/tool-detail-page.js b/web/components/tool-detail-page.js
index dd21534..501c87c 100644
--- a/web/components/tool-detail-page.js
+++ b/web/components/tool-detail-page.js
@@ -74,12 +74,12 @@ export class ToolDetailPage extends LightElement {
     const si = tl ? (STATUS_ICON[tl.status] || STATUS_ICON.done) : null;
     return html`
       <div class="llm-page tool-detail-page">
-        <div class="llm-page-header">
-          <div class="llm-header-left">
-            <button class="btn btn-sm btn-outline-secondary back-btn" title=${t('fv.back')} @click=${() => this._back()}>
+        <div class="page-header">
+          <div class="page-header-left">
+            <button class="btn btn-sm btn-outline-secondary page-header-back" title=${t('fv.back')} @click=${() => this._back()}>
               <i class="bi bi-arrow-left"></i>
             </button>
-            <h2 class="llm-page-title">
+            <h2 class="page-header-title">
               ${tl ? html`
                 ${si ? html`<i class="bi ${si.glyph} ${si.cls} me-2"></i>` : nothing}
                 ${tl.display_name || tl.name}
diff --git a/web/components/users-page.js b/web/components/users-page.js
index 383ded6..c06a6e2 100644
--- a/web/components/users-page.js
+++ b/web/components/users-page.js
@@ -342,10 +342,12 @@ export class UsersPage extends LightElement {
 
     return html`
       <div class="um-page">
-        <div class="um-header">
-          <h2 class="um-title"><i class="bi bi-people-fill me-2"></i>${t('users.title')}</h2>
-          <div class="um-header-right">
-            <span class="um-header-count">${t(users.length === 1 ? 'users.count_one' : 'users.count_other', { n: users.length })}</span>
+        <div class="page-header">
+          <div class="page-header-left">
+            <h2 class="page-header-title"><i class="bi bi-people-fill me-2"></i>${t('users.title')}</h2>
+          </div>
+          <div class="page-header-actions">
+            <span class="page-header-count">${t(users.length === 1 ? 'users.count_one' : 'users.count_other', { n: users.length })}</span>
             <button class="btn btn-sm btn-primary" @click=${() => this._openCreate()}>
               <i class="bi bi-plus-lg me-1"></i>${t('users.btn.new')}
             </button>
@@ -433,9 +435,9 @@ export class UsersPage extends LightElement {
 
   _renderDetailHeader(u) {
     return html`
-      <div class="um-header">
-        <div class="d-flex align-items-center gap-2" style="min-width:0">
-          <button class="btn btn-sm btn-outline-secondary" title=${t('users.detail.back')} @click=${() => this._back()}>
+      <div class="page-header">
+        <div class="page-header-left">
+          <button class="btn btn-sm btn-outline-secondary page-header-back" title=${t('users.detail.back')} @click=${() => this._back()}>
             <i class="bi bi-arrow-left"></i>
           </button>
           ${u ? html`
@@ -443,7 +445,7 @@ export class UsersPage extends LightElement {
               ${(u.display_name || u.username).charAt(0).toUpperCase()}
             </span>
             <div style="min-width:0">
-              <h2 class="um-title" style="min-width:0;overflow:hidden;text-overflow:ellipsis">
+              <h2 class="page-header-title" style="min-width:0;overflow:hidden;text-overflow:ellipsis">
                 ${u.display_name || u.username}</h2>
               <div class="d-flex align-items-center gap-2" style="font-size:.72rem">
                 <code class="text-muted">${u.username}</code>
@@ -452,7 +454,7 @@ export class UsersPage extends LightElement {
                 ${u.active ? nothing : html`<span class="um-badge um-badge-inactive">${t('users.badge.inactive')}</span>`}
               </div>
             </div>`
-          : html`<h2 class="um-title">${t('users.title')}</h2>`}
+          : html`<h2 class="page-header-title">${t('users.title')}</h2>`}
         </div>
       </div>`;
   }
diff --git a/web/css/agent-inbox.css b/web/css/agent-inbox.css
index 66d5454..aea0e17 100644
--- a/web/css/agent-inbox.css
+++ b/web/css/agent-inbox.css
@@ -16,26 +16,6 @@ agent-inbox-page {
   width: 100%;
 }
 
-.page-panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 20px;
-  min-height: 54px;
-  border-bottom: 1px solid var(--bs-border-color);
-  background: var(--bs-tertiary-bg);
-  flex-shrink: 0;
-}
-
-.page-panel-header h5 {
-  margin: 0;
-  font-weight: 700;
-  font-size: 1.05rem;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
 /* ── Refresh button ── */
 
 .inbox-refresh-btn {
@@ -118,11 +98,6 @@ agent-inbox-page {
 /* ── Mobile tweaks ── */
 
 @media (max-width: 600px) {
-  .page-panel-header {
-    padding: 12px 14px;
-    min-height: 50px;
-  }
-
   .inbox-grid {
     grid-template-columns: 1fr;
     padding: 12px;
diff --git a/web/css/agents.css b/web/css/agents.css
index 6cd33f1..e6616db 100644
--- a/web/css/agents.css
+++ b/web/css/agents.css
@@ -5,7 +5,6 @@ agents-page {
   flex-direction: column;
   flex: 1;
   overflow-y: auto;
-  padding: 1.5rem 2rem;
   background: var(--bs-body-bg);
 }
 
@@ -15,11 +14,8 @@ agents-page {
   width: 100%;
 }
 
-.agents-page-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 0.75rem;
+.agents-body {
+  padding: 1.5rem 2rem;
 }
 
 /* ── Info banner ─────────────────────────────────────────────────────────── */
diff --git a/web/css/approval-groups.css b/web/css/approval-groups.css
index 6a9cb84..d3ed6a6 100644
--- a/web/css/approval-groups.css
+++ b/web/css/approval-groups.css
@@ -35,39 +35,6 @@ approval-groups-page {
   max-width: 100%;
 }
 
-.apr-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 20px;
-  min-height: 54px;
-  border-bottom: 1px solid var(--bs-border-color);
-  background: var(--bs-tertiary-bg);
-  flex-shrink: 0;
-  gap: 12px;
-}
-
-.apr-title {
-  margin: 0;
-  font-weight: 700;
-  font-size: 1.05rem;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.apr-header-right {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.apr-header-count {
-  font-size: 0.76rem;
-  font-weight: 500;
-  color: var(--bs-secondary-color);
-}
-
 /* ── Card list ── */
 
 .apr-card-list {
@@ -417,11 +384,6 @@ approval-groups-page {
 /* ── Mobile ── */
 
 @media (max-width: 600px) {
-  .apr-header {
-    padding: 10px 14px;
-    min-height: 50px;
-  }
-
   .apr-card-list {
     padding: 10px 12px;
     gap: 8px;
diff --git a/web/css/config.css b/web/css/config.css
index 6b713c8..2827d7d 100644
--- a/web/css/config.css
+++ b/web/css/config.css
@@ -3,7 +3,6 @@ config-page {
   flex-direction: column;
   flex: 1;
   overflow-y: auto;
-  padding: 1.5rem 2rem;
   background: var(--bs-body-bg);
 }
 
@@ -13,11 +12,11 @@ config-page {
   width: 100%;
 }
 
-.config-page-header {
+.config-body {
+  padding: 1.5rem 2rem;
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 0.75rem;
+  flex-direction: column;
+  gap: 0.75rem;
 }
 
 .config-sets {
diff --git a/web/css/llm-providers.css b/web/css/llm-providers.css
index 351c5d2..dfdf343 100644
--- a/web/css/llm-providers.css
+++ b/web/css/llm-providers.css
@@ -8,39 +8,6 @@
   max-width: 100%;
 }
 
-.pv-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 20px;
-  min-height: 54px;
-  border-bottom: 1px solid var(--bs-border-color);
-  background: var(--bs-tertiary-bg);
-  flex-shrink: 0;
-  gap: 12px;
-}
-
-.pv-title {
-  margin: 0;
-  font-weight: 700;
-  font-size: 1.05rem;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.pv-header-right {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.pv-header-count {
-  font-size: 0.76rem;
-  font-weight: 500;
-  color: var(--bs-secondary-color);
-}
-
 /* ── Card list ── */
 
 .pv-card-list {
@@ -297,11 +264,6 @@
 /* ── Mobile ── */
 
 @media (max-width: 600px) {
-  .pv-header {
-    padding: 10px 14px;
-    min-height: 50px;
-  }
-
   .pv-card-list {
     padding: 10px 12px;
     gap: 8px;
diff --git a/web/css/llm-requests.css b/web/css/llm-requests.css
index a0b5355..649a694 100644
--- a/web/css/llm-requests.css
+++ b/web/css/llm-requests.css
@@ -10,44 +10,19 @@ llm-requests-page {
 }
 
 .llmr-page {
-  padding: 1.5rem 2rem;
   width: 100%;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
+}
+
+.llmr-body {
+  padding: 1.5rem 2rem;
+  display: flex;
+  flex-direction: column;
   gap: 1.25rem;
 }
 
-/* ── Header ─────────────────────────────────────────────────────────────────── */
-
-.llmr-header {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  border-bottom: 1px solid var(--bs-border-color);
-  padding-bottom: 1rem;
-}
-
-.llmr-title {
-  font-size: 1.25rem;
-  font-weight: 600;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.llmr-title i { color: var(--bs-secondary-color); }
-
-.llmr-total-badge {
-  margin-left: auto;
-  font-size: 0.78rem;
-  color: var(--bs-secondary-color);
-  background: var(--bs-tertiary-bg);
-  padding: 2px 10px;
-  border-radius: 20px;
-}
-
 /* ── Filters ─────────────────────────────────────────────────────────────────── */
 
 .llmr-filters {
@@ -197,24 +172,7 @@ llm-requests-page {
 .llmr-row--clickable { cursor: pointer; }
 .llmr-row--clickable:hover td { background: var(--bs-tertiary-bg); }
 
-/* ── Detail — back bar ───────────────────────────────────────────────────────── */
-
-.llmr-detail-back {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid var(--bs-border-color);
-}
-
-.llmr-detail-title {
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--bs-body-color);
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-}
+/* ── Detail ─────────────────────────────────────────────────────────────────── */
 
 .llmr-detail-id {
   font-family: var(--bs-font-monospace);
diff --git a/web/css/models-hub.css b/web/css/models-hub.css
index 38b191f..94960bc 100644
--- a/web/css/models-hub.css
+++ b/web/css/models-hub.css
@@ -1,10 +1,13 @@
 /* ── Models hub landing page ────────────────────────────────────────────────── */
 
 .models-hub {
-  padding: 2rem 2.5rem;
   width: 100%;
 }
 
+.models-hub-body {
+  padding: 2rem 2.5rem;
+}
+
 .models-hub-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
diff --git a/web/css/models-llm.css b/web/css/models-llm.css
index 3a0965f..ae48094 100644
--- a/web/css/models-llm.css
+++ b/web/css/models-llm.css
@@ -10,56 +10,6 @@
   height: 100%;
 }
 
-.llm-page-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 20px;
-  min-height: 54px;
-  border-bottom: 1px solid var(--bs-border-color);
-  background: var(--bs-tertiary-bg);
-  flex-shrink: 0;
-  gap: 12px;
-}
-
-.llm-header-left {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
-}
-
-.back-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 0 !important;
-  border-radius: 6px !important;
-  flex-shrink: 0;
-}
-
-.back-btn i {
-  font-size: 1rem;
-  line-height: 1;
-}
-
-.llm-page-title {
-  font-size: 1.05rem;
-  font-weight: 700;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.llm-page-count {
-  font-size: 0.76rem;
-  color: var(--bs-secondary-color);
-  font-weight: 500;
-}
-
 /* ── Card list ── */
 
 .llm-card-list {
@@ -291,11 +241,6 @@
 /* ── Mobile tweaks ── */
 
 @media (max-width: 600px) {
-  .llm-page-header {
-    padding: 10px 14px;
-    min-height: 50px;
-  }
-
   .llm-card-list {
     padding: 10px 12px;
     gap: 8px;
diff --git a/web/css/page-header.css b/web/css/page-header.css
new file mode 100644
index 0000000..ac7c5b2
--- /dev/null
+++ b/web/css/page-header.css
@@ -0,0 +1,90 @@
+/* ── Shared page header bar ─────────────────────────────────────────────────
+   The one canonical header for every full-page view: optional back button,
+   title, right-side actions. Replaces the former per-page duplicates
+   (.page-panel-header, .project-page-header, .task-page-header,
+   .llm-page-header, .um-header top bars, .apr-header, .llmr-header,
+   .pv-header, .sa-header, .config-page-header, .agents-page-header).
+
+   Markup contract:
+
+     <div class="page-header">
+       <div class="page-header-left">
+         [<button class="btn btn-sm btn-outline-secondary page-header-back">…</button>]
+         <h2 class="page-header-title">…</h2>
+       </div>
+       <div class="page-header-actions">
+         [<span class="page-header-count">…</span>] [buttons…]
+       </div>
+     </div>
+
+   Sticky so it stays pinned on pages whose container scrolls. */
+
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 20px;
+  min-height: 54px;
+  border-bottom: 1px solid var(--bs-border-color);
+  background: var(--bs-tertiary-bg);
+  flex-shrink: 0;
+  position: sticky;
+  top: 0;
+  z-index: 20;
+}
+
+.page-header-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.page-header-back {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0 !important;
+  border-radius: 6px !important;
+  flex-shrink: 0;
+}
+
+.page-header-back i {
+  font-size: 1rem;
+  line-height: 1;
+}
+
+.page-header-title {
+  margin: 0;
+  font-weight: 700;
+  font-size: 1.05rem;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.page-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.page-header-count {
+  font-size: 0.82rem;
+  color: var(--bs-secondary-color);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+@media (max-width: 600px) {
+  .page-header {
+    padding: 10px 14px;
+    min-height: 50px;
+  }
+}
diff --git a/web/css/projects/base.css b/web/css/projects/base.css
index cf2ba29..5608e60 100644
--- a/web/css/projects/base.css
+++ b/web/css/projects/base.css
@@ -8,26 +8,6 @@
   width: 100%;
 }
 
-.project-page-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 20px;
-  min-height: 54px;
-  border-bottom: 1px solid var(--bs-border-color);
-  background: var(--bs-tertiary-bg);
-  flex-shrink: 0;
-}
-
-.project-page-title {
-  margin: 0;
-  font-weight: 700;
-  font-size: 1.05rem;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
 /* ── Grid ── */
 
 .project-grid {
diff --git a/web/css/system-agents.css b/web/css/system-agents.css
index 274f2b8..4cfe7ef 100644
--- a/web/css/system-agents.css
+++ b/web/css/system-agents.css
@@ -9,29 +9,11 @@
   flex: 1;
   min-height: 0;
   width: 100%;
-  padding: 1.5rem;
   overflow-y: auto;
 }
-.sa-header {
-  display: flex;
-  align-items: baseline;
-  gap: 0.75rem;
-  margin-bottom: 0.35rem;
+.sa-body {
+  padding: 1.5rem;
 }
-.sa-title {
-  font-size: 1.2rem;
-  font-weight: 600;
-  margin: 0;
-}
-.sa-total-badge {
-  font-size: 0.75rem;
-  color: var(--bs-secondary-color);
-  background: var(--bs-tertiary-bg);
-  border: 1px solid var(--bs-border-color);
-  border-radius: 1rem;
-  padding: 0.1rem 0.6rem;
-}
-.sa-refresh-btn { margin-left: auto; }
 .sa-subtitle {
   font-size: 0.85rem;
   color: var(--bs-secondary-color);
diff --git a/web/css/tasks/base.css b/web/css/tasks/base.css
index a7b2a72..aa58152 100644
--- a/web/css/tasks/base.css
+++ b/web/css/tasks/base.css
@@ -8,26 +8,6 @@
   width: 100%;
 }
 
-.task-page-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 20px;
-  min-height: 54px;
-  border-bottom: 1px solid var(--bs-border-color);
-  background: var(--bs-tertiary-bg);
-  flex-shrink: 0;
-}
-
-.task-page-title {
-  margin: 0;
-  font-weight: 700;
-  font-size: 1.05rem;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
 /* ── Empty state ── */
 
 .task-empty {
diff --git a/web/css/users-roles.css b/web/css/users-roles.css
index 0d4cdc5..a3e86e6 100644
--- a/web/css/users-roles.css
+++ b/web/css/users-roles.css
@@ -21,18 +21,6 @@
   margin: 0;
 }
 
-.um-header-right {
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  gap: 14px;
-}
-
-.um-header-count {
-  font-size: .82rem;
-  color: var(--placeholder-color);
-}
-
 .um-table-wrap {
   padding: 0 24px 24px;
 }
diff --git a/web/index.html b/web/index.html
index 2956340..4676fe8 100644
--- a/web/index.html
+++ b/web/index.html
@@ -47,6 +47,7 @@
   <link rel="stylesheet" href="css/copilot-input.css" />
   <link rel="stylesheet" href="css/dialogs.css" />
   <link rel="stylesheet" href="css/page-shell.css" />
+  <link rel="stylesheet" href="css/page-header.css" />
   <link rel="stylesheet" href="css/connectors.css" />
   <link rel="stylesheet" href="css/models-hub.css" />
   <link rel="stylesheet" href="css/tasks/base.css" />