diff --git a/ui/app/components/alphabet-edit.hbs b/ui/app/components/alphabet-edit.hbs
index 1f91fd4951..4bab79d111 100644
--- a/ui/app/components/alphabet-edit.hbs
+++ b/ui/app/components/alphabet-edit.hbs
@@ -2,24 +2,11 @@
   Copyright IBM Corp. 2016, 2025
   SPDX-License-Identifier: BUSL-1.1
 }}
-
-<PageHeader as |p|>
-  <p.top>
+<Page::Header @title={{this.title}}>
+  <:breadcrumbs>
     <Page::Breadcrumbs @breadcrumbs={{this.breadcrumbs}} />
-  </p.top>
-  <p.levelLeft>
-    <h1 class="title is-3" data-test-secret-header="true">
-      {{#if (eq @mode "create")}}
-        Create Alphabet
-      {{else if (eq @mode "edit")}}
-        Edit Alphabet
-      {{else}}
-        Alphabet
-        <code>{{@model.id}}</code>
-      {{/if}}
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+  </:breadcrumbs>
+</Page::Header>
 
 {{#if (eq @mode "show")}}
   <Toolbar>
diff --git a/ui/app/components/alphabet-edit.js b/ui/app/components/alphabet-edit.js
index 64fea376f8..3f8e9db83f 100644
--- a/ui/app/components/alphabet-edit.js
+++ b/ui/app/components/alphabet-edit.js
@@ -41,6 +41,16 @@ export default class AlphabetEditComponent extends Component {
     ];
   }
 
+  get title() {
+    if (this.args?.mode === 'create') {
+      return 'Create Alphabet';
+    } else if (this.args?.mode === 'edit') {
+      return 'Edit Alphabet';
+    } else {
+      return this.args?.model?.id;
+    }
+  }
+
   transition(route = 'show') {
     this.errorMessage = '';
     const { backend, id } = this.args.model;
diff --git a/ui/app/components/dashboard/vault-version-title.hbs b/ui/app/components/dashboard/vault-version-title.hbs
index af6b1dc23c..fe32f375af 100644
--- a/ui/app/components/dashboard/vault-version-title.hbs
+++ b/ui/app/components/dashboard/vault-version-title.hbs
@@ -3,15 +3,12 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.levelLeft>
-    <h1 class="title is-3" data-test-dashboard-card-header="Vault version">
-      Vault
-      {{@version.versionDisplay}}
-      {{#if @version.isEnterprise}}
-        <Hds::Badge @text={{this.namespace.currentNamespace}} @icon="org" data-test-badge-namespace />
-      {{/if}}
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+<Page::Header @title="Vault {{@version.versionDisplay}}">
+  <:badges>
+    {{#if @version.isEnterprise}}
+      <Hds::Badge @text={{this.namespace.currentNamespace}} @icon="org" data-test-badge-namespace />
+    {{/if}}
+  </:badges>
+</Page::Header>
+
 <hr class="has-top-margin-xxs has-bottom-margin-l has-background-gray-200" />
\ No newline at end of file
diff --git a/ui/app/components/database-connection.hbs b/ui/app/components/database-connection.hbs
index 9ba8a6ae88..3554a1a00e 100644
--- a/ui/app/components/database-connection.hbs
+++ b/ui/app/components/database-connection.hbs
@@ -3,22 +3,11 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.top>
+<Page::Header @title={{this.title}}>
+  <:breadcrumbs>
     <KeyValueHeader @path="vault.cluster.secrets.backend.show" @mode={{this.mode}} @root={{@root}} @showCurrent={{true}} />
-  </p.top>
-  <p.levelLeft>
-    <h1 class="title is-3" data-test-secret-header="true">
-      {{#if (eq @mode "create")}}
-        Create Connection
-      {{else if (eq @mode "edit")}}
-        Edit Connection
-      {{else}}
-        {{@model.id}}
-      {{/if}}
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+  </:breadcrumbs>
+</Page::Header>
 
 {{#if @model.isAvailablePlugin}}
   {{#if (eq @mode "show")}}
diff --git a/ui/app/components/database-connection.js b/ui/app/components/database-connection.js
index b75a88d29d..173892cbbe 100644
--- a/ui/app/components/database-connection.js
+++ b/ui/app/components/database-connection.js
@@ -33,6 +33,16 @@ export default class DatabaseConnectionEdit extends Component {
   @tracked
   showSaveModal = false; // used for create mode
 
+  get title() {
+    if (this.args?.mode === 'create') {
+      return 'Create Connection';
+    } else if (this.args?.mode === 'edit') {
+      return 'Edit Connection';
+    } else {
+      return this.args?.model?.id;
+    }
+  }
+
   rotateCredentials(backend, name) {
     const adapter = this.store.adapterFor('database/connection');
     return adapter.rotateRootCredentials(backend, name);
diff --git a/ui/app/components/database-role-edit.hbs b/ui/app/components/database-role-edit.hbs
index 79368ff6b9..17cf745a7a 100644
--- a/ui/app/components/database-role-edit.hbs
+++ b/ui/app/components/database-role-edit.hbs
@@ -2,22 +2,13 @@
   Copyright IBM Corp. 2016, 2025
   SPDX-License-Identifier: BUSL-1.1
 }}
-<PageHeader as |p|>
-  <p.top>
+
+<Page::Header @title={{this.title}}>
+  <:breadcrumbs>
     <KeyValueHeader @path="vault.cluster.secrets.backend.show" @mode={{@mode}} @root={{@root}} @showCurrent={{true}} />
-  </p.top>
-  <p.levelLeft>
-    <h1 class="title is-3" data-test-secret-header="true">
-      {{#if (eq @mode "create")}}
-        Create Role
-      {{else if (eq @mode "edit")}}
-        Edit Role
-      {{else}}
-        {{@model.id}}
-      {{/if}}
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+  </:breadcrumbs>
+</Page::Header>
+
 {{#if (eq @mode "show")}}
   <Toolbar>
     <ToolbarActions>
diff --git a/ui/app/components/database-role-edit.js b/ui/app/components/database-role-edit.js
index c87fa4a8cb..9d015b867b 100644
--- a/ui/app/components/database-role-edit.js
+++ b/ui/app/components/database-role-edit.js
@@ -57,6 +57,16 @@ export default class DatabaseRoleEdit extends Component {
     this.modelValidations = null;
   }
 
+  get title() {
+    if (this.args?.mode === 'create') {
+      return 'Create Role';
+    } else if (this.args?.mode === 'edit') {
+      return 'Edit Role';
+    } else {
+      return this.args?.model?.id;
+    }
+  }
+
   get warningMessages() {
     const warnings = {};
     const { canCreateDynamic, canCreateStatic, type } = this.args.model;
diff --git a/ui/app/components/generate-credentials-database.hbs b/ui/app/components/generate-credentials-database.hbs
index dbd941909a..14bb19abe8 100644
--- a/ui/app/components/generate-credentials-database.hbs
+++ b/ui/app/components/generate-credentials-database.hbs
@@ -3,23 +3,11 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.top>
-    <Hds::Breadcrumb>
-      <Hds::Breadcrumb::Item
-        @text={{@backendPath}}
-        @route="vault.cluster.secrets.backend.overview"
-        @model={{@backendPath}}
-      />
-      <Hds::Breadcrumb::Item @text={{@roleName}} @current={{true}} />
-    </Hds::Breadcrumb>
-  </p.top>
-  <p.levelLeft>
-    <h1 data-test-title class="title is-3">
-      {{@roleName}}
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+<Page::Header @title={{@roleName}}>
+  <:breadcrumbs>
+    <Page::Breadcrumbs @breadcrumbs={{this.breadcrumbs}} />
+  </:breadcrumbs>
+</Page::Header>
 
 <div class={{if @roleType "box is-fullwidth is-sideless is-marginless"}}>
   {{! If no role type, that means both static and dynamic requests returned an error }}
diff --git a/ui/app/components/generate-credentials-database.js b/ui/app/components/generate-credentials-database.js
index 420253d6a5..c30a105a36 100644
--- a/ui/app/components/generate-credentials-database.js
+++ b/ui/app/components/generate-credentials-database.js
@@ -22,6 +22,16 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 
 export default class GenerateCredentialsDatabase extends Component {
+  get breadcrumbs() {
+    return [
+      {
+        label: this.args.backendPath,
+        route: 'vault.cluster.secrets.backend.overview',
+        model: this.args.backendPath,
+      },
+      { label: this.args.roleName },
+    ];
+  }
   get errorTitle() {
     return this.args.model.errorTitle || 'Something went wrong';
   }
diff --git a/ui/app/components/generate-credentials-totp.hbs b/ui/app/components/generate-credentials-totp.hbs
index 7853338bc1..0442436dd7 100644
--- a/ui/app/components/generate-credentials-totp.hbs
+++ b/ui/app/components/generate-credentials-totp.hbs
@@ -3,25 +3,11 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.top>
-    <Hds::Breadcrumb>
-      <Hds::Breadcrumb::Item
-        @text={{@backendPath}}
-        @route="vault.cluster.secrets.backend"
-        @model={{@backendPath}}
-        data-test-link="role-list"
-      />
-      <Hds::Breadcrumb::Item @text={{@keyName}} @route="vault.cluster.secrets.backend.show" @model={{@keyName}} />
-      <Hds::Breadcrumb::Item @text={{this.title}} @current={{true}} />
-    </Hds::Breadcrumb>
-  </p.top>
-  <p.levelLeft>
-    <h1 data-test-title class="title is-3">
-      {{this.title}}
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+<Page::Header @title={{this.title}}>
+  <:breadcrumbs>
+    <Page::Breadcrumbs @breadcrumbs={{this.breadcrumbs}} />
+  </:breadcrumbs>
+</Page::Header>
 
 <div class="box is-fullwidth is-sideless is-paddingless is-marginless">
   <InfoTableRow @label="Code">
diff --git a/ui/app/components/generate-credentials-totp.js b/ui/app/components/generate-credentials-totp.js
index 137408a3e3..f8b22220fd 100644
--- a/ui/app/components/generate-credentials-totp.js
+++ b/ui/app/components/generate-credentials-totp.js
@@ -24,6 +24,18 @@ export default class GenerateCredentialsTotp extends Component {
     this.startTimer.perform();
   }
 
+  get breadcrumbs() {
+    return [
+      {
+        label: this.args.backendPath,
+        route: 'vault.cluster.secrets.backend',
+        model: this.args.backendPath,
+      },
+      { label: this.args.keyName, route: 'vault.cluster.secrets.backend.show', model: this.args.keyName },
+      { label: this.title },
+    ];
+  }
+
   get remainingTime() {
     const { totpCodePeriod } = this.args;
 
diff --git a/ui/app/components/generate-credentials.hbs b/ui/app/components/generate-credentials.hbs
index 5ca853534a..37ce0bf7ac 100644
--- a/ui/app/components/generate-credentials.hbs
+++ b/ui/app/components/generate-credentials.hbs
@@ -3,26 +3,11 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.top>
-    <Hds::Breadcrumb>
-      <Hds::Breadcrumb::Item
-        @text={{@backendPath}}
-        @route="vault.cluster.secrets.backend"
-        @model={{@backendPath}}
-        data-test-link="role-list"
-      />
-      <Hds::Breadcrumb::Item @text="Credentials" @route="vault.cluster.secrets.backend" @model={{@backendPath}} />
-      <Hds::Breadcrumb::Item @text={{@roleName}} @route="vault.cluster.secrets.backend.show" @model={{@roleName}} />
-      <Hds::Breadcrumb::Item @text={{this.options.title}} @current={{true}} />
-    </Hds::Breadcrumb>
-  </p.top>
-  <p.levelLeft>
-    <h1 data-test-title class="title is-3">
-      {{this.options.title}}
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+<Page::Header @title={{this.options.title}}>
+  <:breadcrumbs>
+    <Page::Breadcrumbs @breadcrumbs={{this.breadcrumbs}} />
+  </:breadcrumbs>
+</Page::Header>
 
 {{#if this.hasGenerated}}
   <div class="box is-fullwidth is-sideless is-paddingless is-marginless">
diff --git a/ui/app/components/generate-credentials.ts b/ui/app/components/generate-credentials.ts
index 481ba84ec0..93930ef03b 100644
--- a/ui/app/components/generate-credentials.ts
+++ b/ui/app/components/generate-credentials.ts
@@ -89,6 +89,19 @@ export default class GenerateCredentials extends Component<Args> {
     return undefined;
   }
 
+  get breadcrumbs() {
+    return [
+      {
+        label: this.args.backendPath,
+        route: 'vault.cluster.secrets.backend',
+        model: this.args.backendPath,
+      },
+      { label: 'Credentials', route: 'vault.cluster.secrets.backend', model: this.args.backendPath },
+      { label: this.args.roleName, route: 'vault.cluster.secrets.backend.show', model: this.args.roleName },
+      { label: this.options.title },
+    ];
+  }
+
   get helpText(): string {
     let message = '';
     if (this.cannotReadAwsRole) {
diff --git a/ui/app/components/generated-item-list.hbs b/ui/app/components/generated-item-list.hbs
index 0ae73d9ba5..0ec1ed8b89 100644
--- a/ui/app/components/generated-item-list.hbs
+++ b/ui/app/components/generated-item-list.hbs
@@ -3,19 +3,12 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.top>
-    <Hds::Breadcrumb>
-      <Hds::Breadcrumb::Item @text="Auth Methods" @route="vault.cluster.access.methods" data-test-access-methods />
-      <Hds::Breadcrumb::Item @text={{@methodModel.id}} @current={{true}} />
-    </Hds::Breadcrumb>
-  </p.top>
-  <p.levelLeft>
-    <h1 class="title is-3">
-      {{@methodModel.id}}
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+<Page::Header @title={{@methodModel.id}}>
+  <:breadcrumbs>
+    <Page::Breadcrumbs @breadcrumbs={{this.breadcrumbs}} />
+  </:breadcrumbs>
+</Page::Header>
+
 {{#let (tabs-for-auth-section @methodModel "authConfig" @paths) as |tabs|}}
   {{#if tabs.length}}
     <div class="tabs-container box is-sideless is-fullwidth is-paddingless is-marginless">
diff --git a/ui/app/components/generated-item-list.js b/ui/app/components/generated-item-list.js
index c638ca6300..4b31e5a275 100644
--- a/ui/app/components/generated-item-list.js
+++ b/ui/app/components/generated-item-list.js
@@ -29,6 +29,16 @@ export default class GeneratedItemList extends Component {
   @service pagination;
   @tracked itemToDelete = null;
 
+  get breadcrumbs() {
+    return [
+      {
+        label: 'Auth Methods',
+        route: 'vault.cluster.access.methods',
+      },
+      { label: this.args.methodModel.id },
+    ];
+  }
+
   @action
   refreshItemList() {
     const route = getOwner(this).lookup(`route:${this.router.currentRouteName}`);
diff --git a/ui/app/components/generated-item.hbs b/ui/app/components/generated-item.hbs
index 4b260006f1..14052097de 100644
--- a/ui/app/components/generated-item.hbs
+++ b/ui/app/components/generated-item.hbs
@@ -3,33 +3,21 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.top>
-    <Hds::Breadcrumb>
-      <Hds::Breadcrumb::Item
-        @text={{pluralize this.itemType}}
-        @route="vault.cluster.access.method.item.list"
-        @models={{array this.mountPath this.itemType}}
-      />
-      <Hds::Breadcrumb::Item @text={{if (eq this.mode "show") this.model.id (capitalize this.mode)}} @current={{true}} />
-    </Hds::Breadcrumb>
-  </p.top>
-  <p.levelLeft>
-    {{#if (eq this.mode "show")}}
-      <h1 class="title is-3">
-        {{this.model.id}}
-      </h1>
-    {{else}}
-      <h1 class="title is-3">
-        {{capitalize this.mode}}
-        {{singularize this.itemType}}
-        {{#if (eq this.mode "edit")}}
-          {{this.model.id}}
-        {{/if}}
-      </h1>
-    {{/if}}
-  </p.levelLeft>
-</PageHeader>
+<Page::Header @title={{this.title}}>
+  <:breadcrumbs>
+    <Page::Breadcrumbs
+      @breadcrumbs={{array
+        (hash
+          label=(pluralize this.itemType)
+          route="vault.cluster.access.method.item.list"
+          models=(array this.mountPath this.itemType)
+        )
+        (hash label=(if (eq this.mode "show") this.model.id (capitalize this.mode)))
+      }}
+    />
+  </:breadcrumbs>
+</Page::Header>
+
 {{#if (eq this.mode "show")}}
   <Toolbar>
     <ToolbarActions>
diff --git a/ui/app/components/generated-item.js b/ui/app/components/generated-item.js
index 4f11df0ea4..348a77655e 100644
--- a/ui/app/components/generated-item.js
+++ b/ui/app/components/generated-item.js
@@ -9,6 +9,8 @@ import Component from '@ember/component';
 import { computed } from '@ember/object';
 import { task } from 'ember-concurrency';
 import { waitFor } from '@ember/test-waiters';
+import { capitalize } from '@ember/string';
+import { singularize } from 'ember-inflector';
 
 /**
  * @module GeneratedItem
@@ -35,6 +37,18 @@ export default Component.extend({
   props: computed('model', function () {
     return this.model.serialize();
   }),
+
+  get title() {
+    const title = `${capitalize(this.mode)} ${singularize(this.itemType)}`;
+    if (this.mode === 'show') {
+      return this.model.id;
+    } else if (this.mode === 'edit') {
+      return `${title} ${this.model.id}`;
+    }
+
+    return `${capitalize(this.mode)} ${singularize(this.itemType)}`;
+  },
+
   validateForm() {
     // Only validate on new models because blank passwords will not be updated
     // in practice this only happens for userpass users
diff --git a/ui/app/components/identity/entity-nav.hbs b/ui/app/components/identity/entity-nav.hbs
index ed17d823ed..d6ce787145 100644
--- a/ui/app/components/identity/entity-nav.hbs
+++ b/ui/app/components/identity/entity-nav.hbs
@@ -3,29 +3,23 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.levelLeft>
-    <h1 class="title is-3">
-      {{titleize (pluralize this.identityType)}}
-    </h1>
-  </p.levelLeft>
-</PageHeader>
-<div class="tabs-container box is-sideless is-fullwidth is-paddingless is-marginless">
-  <nav class="tabs" aria-label="navigation for entities">
-    <ul>
-      <li>
-        <LinkTo @route="vault.cluster.access.identity.index" @model={{pluralize this.identityType}}>
-          {{capitalize (pluralize this.identityType)}}
-        </LinkTo>
-      </li>
-      <li>
-        <LinkTo @route="vault.cluster.access.identity.aliases.index" @model={{pluralize this.identityType}}>
-          Aliases
-        </LinkTo>
-      </li>
-    </ul>
-  </nav>
-</div>
+<Page::Header @title={{titleize (pluralize this.identityType)}} />
+
+<nav class="tabs" aria-label="navigation for entities">
+  <ul>
+    <li>
+      <LinkTo @route="vault.cluster.access.identity.index" @model={{pluralize this.identityType}}>
+        {{capitalize (pluralize this.identityType)}}
+      </LinkTo>
+    </li>
+    <li>
+      <LinkTo @route="vault.cluster.access.identity.aliases.index" @model={{pluralize this.identityType}}>
+        Aliases
+      </LinkTo>
+    </li>
+  </ul>
+</nav>
+
 <Toolbar>
   {{#if this.model.meta.total}}
     <ToolbarFilters>
diff --git a/ui/app/components/keymgmt/key-edit.hbs b/ui/app/components/keymgmt/key-edit.hbs
index 94749fc796..c98a4d253c 100644
--- a/ui/app/components/keymgmt/key-edit.hbs
+++ b/ui/app/components/keymgmt/key-edit.hbs
@@ -3,24 +3,11 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.top>
+<Page::Header @title={{this.title}}>
+  <:breadcrumbs>
     <KeyValueHeader @path="vault.cluster.secrets.backend.show" @mode={{this.mode}} @root={{@root}} @showCurrent={{true}} />
-  </p.top>
-  <p.levelLeft>
-    <h1 class="title is-3" data-test-secret-header="true">
-      {{#if this.isDistributing}}
-        Distribute Key
-      {{else if (eq @mode "create")}}
-        Create Key
-      {{else if (eq @mode "edit")}}
-        Edit Key
-      {{else}}
-        {{@model.id}}
-      {{/if}}
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+  </:breadcrumbs>
+</Page::Header>
 
 {{#if this.isDistributing}}
   <Keymgmt::Distribute @backend={{@model.backend}} @key={{@model.id}} @onClose={{fn (mut this.isDistributing) false}} />
diff --git a/ui/app/components/keymgmt/key-edit.js b/ui/app/components/keymgmt/key-edit.js
index 27dbfde1a3..383e9096ca 100644
--- a/ui/app/components/keymgmt/key-edit.js
+++ b/ui/app/components/keymgmt/key-edit.js
@@ -31,6 +31,17 @@ export default class KeymgmtKeyEdit extends Component {
   @service flashMessages;
   @tracked isDeleteModalOpen = false;
 
+  get title() {
+    if (this.isDistributing) {
+      return 'Distribute Key';
+    } else if (this.args.mode === 'create') {
+      return 'Create Key';
+    } else if (this.args.mode === 'edit') {
+      return 'Edit Key';
+    }
+    return this.args.model.id;
+  }
+
   get mode() {
     return this.args.mode || 'show';
   }
diff --git a/ui/app/components/keymgmt/provider-edit.hbs b/ui/app/components/keymgmt/provider-edit.hbs
index 3e9dd6c1ce..8ba9b1b3bd 100644
--- a/ui/app/components/keymgmt/provider-edit.hbs
+++ b/ui/app/components/keymgmt/provider-edit.hbs
@@ -3,23 +3,11 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.top>
+<Page::Header @title={{this.title}} @subtitle={{this.subtitle}}>
+  <:breadcrumbs>
     <KeyValueHeader @path="vault.cluster.secrets.backend.show" @mode={{@mode}} @root={{@root}} @showCurrent={{true}} />
-  </p.top>
-  <p.levelLeft>
-    <h1 class="title is-3" data-test-kms-provider-header>
-      {{#if this.isDistributing}}
-        Distribute Key to Provider
-      {{else if this.isShowing}}
-        Provider
-        <span class="has-font-weight-normal">{{@model.id}}</span>
-      {{else}}
-        {{if this.isCreating "Create Provider" "Update Credentials"}}
-      {{/if}}
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+  </:breadcrumbs>
+</Page::Header>
 
 {{#if this.isDistributing}}
   <Keymgmt::Distribute @backend={{@model.backend}} @provider={{@model.id}} @onClose={{fn (mut this.isDistributing) false}} />
diff --git a/ui/app/components/keymgmt/provider-edit.js b/ui/app/components/keymgmt/provider-edit.js
index bb046f8cce..cf53eed6af 100644
--- a/ui/app/components/keymgmt/provider-edit.js
+++ b/ui/app/components/keymgmt/provider-edit.js
@@ -38,6 +38,22 @@ export default class KeymgmtProviderEdit extends Component {
 
   @tracked modelValidations;
 
+  get title() {
+    if (this.isDistributing) {
+      return 'Distribute Key to Provider';
+    } else if (this.isShowing) {
+      return 'Provider';
+    } else if (this.isCreating) {
+      return 'Create Provider';
+    }
+
+    return 'Update Credentials';
+  }
+
+  get subtitle() {
+    return this.isShowing ? this.args.model.id : '';
+  }
+
   get isShowing() {
     return this.args.mode === 'show';
   }
diff --git a/ui/app/components/license-info.hbs b/ui/app/components/license-info.hbs
index 9a59e97a5b..7799eccb3e 100644
--- a/ui/app/components/license-info.hbs
+++ b/ui/app/components/license-info.hbs
@@ -3,11 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.levelLeft>
-    <h1 class="title is-3">License</h1>
-  </p.levelLeft>
-</PageHeader>
+<Page::Header @title="License" />
 
 <section class="box is-sideless is-marginless is-shadowless is-fullwidth">
   <span class="title is-5">Details</span>
diff --git a/ui/app/components/mfa/mfa-login-enforcement-header.hbs b/ui/app/components/mfa/mfa-login-enforcement-header.hbs
index 420960fafb..2d45899244 100644
--- a/ui/app/components/mfa/mfa-login-enforcement-header.hbs
+++ b/ui/app/components/mfa/mfa-login-enforcement-header.hbs
@@ -3,26 +3,11 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-{{#if @isInline}}
-  <h3 class="title is-5" data-test-mleh-title>Enforcement</h3>
-{{else}}
-  <PageHeader as |p|>
-    <p.top>
-      <Hds::Breadcrumb>
-        <Hds::Breadcrumb::Item @text="Enforcements" @route="vault.cluster.access.mfa.enforcements.index" />
-        <Hds::Breadcrumb::Item @text={{@heading}} @current={{true}} />
-      </Hds::Breadcrumb>
-    </p.top>
-    <p.levelLeft>
-      <h1 class="title is-3" data-test-mleh-title>
-        <Icon @name="lock" @size="24" />
-        {{@heading}}
-      </h1>
-    </p.levelLeft>
-  </PageHeader>
-{{/if}}
-<div class="has-border-top-light">
-  <p class="has-top-margin-m" data-test-mleh-description>
+<Page::Header @title={{if @isInline "Enforcement" @heading}} @icon={{unless @isInline "lock"}}>
+  <:breadcrumbs>
+    <Page::Breadcrumbs @breadcrumbs={{this.breadcrumbs}} />
+  </:breadcrumbs>
+  <:description>
     {{#if @isInline}}
       An enforcement includes the authentication types, authentication methods, groups, and entities that will require this
       MFA method. This is optional and can be added later.
@@ -32,7 +17,10 @@
       all entities and groups which make use of that authentication method will be subject to an MFA request.
       <DocLink @path="/vault/docs/auth/login-mfa">Learn more here.</DocLink>
     {{/if}}
-  </p>
+  </:description>
+</Page::Header>
+
+<div class="has-border-top-light has-top-bottom-margin">
   {{#if @isInline}}
     <div class="is-flex-row">
       <RadioCard
diff --git a/ui/app/components/mfa/mfa-login-enforcement-header.js b/ui/app/components/mfa/mfa-login-enforcement-header.js
index dcae0f350c..50f42adfdb 100644
--- a/ui/app/components/mfa/mfa-login-enforcement-header.js
+++ b/ui/app/components/mfa/mfa-login-enforcement-header.js
@@ -38,6 +38,18 @@ export default class MfaLoginEnforcementHeaderComponent extends Component {
 
   @tracked enforcements = [];
 
+  get breadcrumbs() {
+    return [
+      {
+        label: 'Enforcements',
+        route: 'vault.cluster.access.mfa.enforcements.index',
+      },
+      {
+        label: this.args.heading,
+      },
+    ];
+  }
+
   async fetchEnforcements() {
     try {
       // cache initial values for lookup in select handler
diff --git a/ui/app/components/mount-backend-form.hbs b/ui/app/components/mount-backend-form.hbs
index 98c422adb3..2db2ec3557 100644
--- a/ui/app/components/mount-backend-form.hbs
+++ b/ui/app/components/mount-backend-form.hbs
@@ -3,28 +3,9 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.levelLeft>
-    <h1 class="title is-3 title-with-icon" data-test-page-title>
-      {{#if this.showEnable}}
-        {{#let (find-by "type" this.mountForm.type @mountTypes) as |typeInfo|}}
-          {{#if typeInfo.glyph}}
-            <Icon @name={{typeInfo.glyph}} @size="24" class="has-text-grey-light" />
-          {{/if}}
-          {{#if (eq @mountCategory "secret")}}
-            {{concat "Enable " (or typeInfo.displayName this.mountForm.type) " Secrets Engine"}}
-          {{else}}
-            {{concat "Enable " (or typeInfo.displayName this.mountForm.type) " Authentication Method"}}
-          {{/if}}
-        {{/let}}
-      {{else if (eq @mountCategory "secret")}}
-        Enable a Secrets Engine
-      {{else}}
-        Enable an Authentication Method
-      {{/if}}
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+{{#let (find-by "type" this.mountForm.type @mountTypes) as |typeInfo|}}
+  <Page::Header @icon={{typeInfo.glyph}} @title={{this.title}} />
+{{/let}}
 
 <div class="box is-sideless is-bottomless is-fullwidth is-marginless">
   <NamespaceReminder @mode="enable" @noun={{if (eq @mountCategory "secret") "Secret Engine" "Auth Method"}} />
diff --git a/ui/app/components/mount-backend-form.ts b/ui/app/components/mount-backend-form.ts
index cba81cc9b6..c75e918baf 100644
--- a/ui/app/components/mount-backend-form.ts
+++ b/ui/app/components/mount-backend-form.ts
@@ -32,8 +32,14 @@ import type { ValidationMap } from 'vault/vault/app-types';
  *
  */
 
+interface TypeInfo {
+  type: string;
+  displayName: string;
+  glyph: string;
+}
 interface Args {
   mountModel: AuthMethodForm;
+  mountTypes: TypeInfo[] | undefined;
   onMountSuccess: (type: string, path: string, useEngineRoute: boolean) => void;
 }
 
@@ -59,6 +65,16 @@ export default class MountBackendForm extends Component<Args> {
     return !!this.mountForm.type;
   }
 
+  get title(): string {
+    const typeInfo = (this.args?.mountTypes || []).find(
+      (mountType: TypeInfo) => this.mountForm.type === mountType.type
+    );
+    if (this.showEnable) {
+      return `Enable ${typeInfo?.displayName || this.mountForm.type} Authentication Method`;
+    }
+    return 'Enable an Authentication Method';
+  }
+
   constructor(owner: unknown, args: Args) {
     super(owner, args);
   }
diff --git a/ui/app/components/mount/secrets-engine-form.hbs b/ui/app/components/mount/secrets-engine-form.hbs
index 1c3bb0c18a..8ac9c632e3 100644
--- a/ui/app/components/mount/secrets-engine-form.hbs
+++ b/ui/app/components/mount/secrets-engine-form.hbs
@@ -4,16 +4,11 @@
 }}
 
 <div class="box is-sideless is-fullwidth is-marginless is-bottomless">
-
-  <Hds::PageHeader class="page-header" as |PH|>
-    <PH.Breadcrumb>
-      <Hds::Breadcrumb data-test-breadcrumbs>
-        <Hds::Breadcrumb::Item @text="Secrets engines" @route="vault.cluster.secrets.backends" />
-        <Hds::Breadcrumb::Item @text="Enable secrets engine" @route="vault.cluster.secrets.enable" />
-        <Hds::Breadcrumb::Item @text={{capitalize @model.type}} @current={{true}} />
-      </Hds::Breadcrumb>
-    </PH.Breadcrumb>
-  </Hds::PageHeader>
+  <Page::Header>
+    <:breadcrumbs>
+      <Page::Breadcrumbs @breadcrumbs={{this.breadcrumbs}} />
+    </:breadcrumbs>
+  </Page::Header>
 
   <MessageError @errorMessage={{this.errorMessage}} />
 
diff --git a/ui/app/components/mount/secrets-engine-form.ts b/ui/app/components/mount/secrets-engine-form.ts
index 06d592b3b4..8dd87066ab 100644
--- a/ui/app/components/mount/secrets-engine-form.ts
+++ b/ui/app/components/mount/secrets-engine-form.ts
@@ -9,6 +9,8 @@ import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { task } from 'ember-concurrency';
 import { set } from '@ember/object';
+import { capitalize } from '@ember/string';
+
 import type FlashMessagesService from 'ember-cli-flash/services/flash-messages';
 import type ApiService from 'vault/services/api';
 import type CapabilitiesService from 'vault/services/capabilities';
@@ -41,6 +43,19 @@ export default class MountSecretsEngineFormComponent extends Component<Args> {
   @tracked invalidFormAlert: string | null = null;
   @tracked errorMessage: string | string[] = '';
 
+  get breadcrumbs() {
+    const breadcrumbs: { label: string; route?: string }[] = [
+      { label: 'Secrets engines', route: 'vault.cluster.secrets.backends' },
+      { label: 'Enable secrets engine', route: 'vault.cluster.secrets.enable' },
+    ];
+
+    if (this.args?.model.type) {
+      breadcrumbs.push({ label: capitalize(this.args?.model?.type) });
+    }
+
+    return breadcrumbs;
+  }
+
   get mountForm(): SecretsEngineForm {
     return this.args.model;
   }
diff --git a/ui/app/components/not-found.hbs b/ui/app/components/not-found.hbs
index c24a50a733..ba6a411b2b 100644
--- a/ui/app/components/not-found.hbs
+++ b/ui/app/components/not-found.hbs
@@ -4,13 +4,8 @@
 }}
 
 <div class="box is-shadowless" data-test-not-found>
-  <PageHeader as |p|>
-    <p.levelLeft>
-      <h1 class="title is-3 has-text-grey">
-        404 Not Found
-      </h1>
-    </p.levelLeft>
-  </PageHeader>
+  <Page::Header @title="404 Not Found" />
+
   <div class="box is-sideless has-background-white-bis has-text-grey has-text-centered">
     <p>Sorry, we were unable to find any content at <code>{{or @model.path this.path}}</code>.</p>
     <p>
diff --git a/ui/app/components/oidc/client-form.hbs b/ui/app/components/oidc/client-form.hbs
index 73480db2f3..25db12ed84 100644
--- a/ui/app/components/oidc/client-form.hbs
+++ b/ui/app/components/oidc/client-form.hbs
@@ -3,28 +3,12 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.top>
-    <Hds::Breadcrumb>
-      {{#if @model.isNew}}
-        <Hds::Breadcrumb::Item @text="Applications" @route="vault.cluster.access.oidc.clients" />
-      {{else}}
-        <Hds::Breadcrumb::Item
-          @text="Details"
-          @route="vault.cluster.access.oidc.clients.client.details"
-          @model={{@model.name}}
-        />
-      {{/if}}
-      <Hds::Breadcrumb::Item @text="{{if @model.isNew 'Create' 'Edit'}} Application" @current={{true}} />
-    </Hds::Breadcrumb>
-  </p.top>
-  <p.levelLeft>
-    <h1 class="title is-3" data-test-oidc-client-title>
-      {{if @model.isNew "Create" "Edit"}}
-      Application
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+<Page::Header @title="{{if @model.isNew 'Create' 'Edit'}} Application">
+  <:breadcrumbs>
+    <Page::Breadcrumbs @breadcrumbs={{this.breadcrumbs}} />
+  </:breadcrumbs>
+</Page::Header>
+
 <form {{on "submit" (perform this.save)}}>
   <div class="box is-sideless is-fullwidth is-bottomless">
     <MessageError @errorMessage={{this.errorBanner}} />
diff --git a/ui/app/components/oidc/client-form.js b/ui/app/components/oidc/client-form.js
index 4622c4bbe0..2dc6848a98 100644
--- a/ui/app/components/oidc/client-form.js
+++ b/ui/app/components/oidc/client-form.js
@@ -32,6 +32,17 @@ export default class OidcClientForm extends Component {
       ? 'allow_all'
       : 'limited';
 
+  get breadcrumbs() {
+    const firstBreadcrumb = this.args.model.isNew
+      ? { label: 'Applications', route: 'vault.cluster.access.oidc.clients' }
+      : {
+          label: 'Details',
+          route: 'vault.cluster.access.oidc.clients.client.details',
+          model: this.args.model.name,
+        };
+    return [firstBreadcrumb, { label: this.args.model.isNew ? 'Create Application' : 'Edit Application' }];
+  }
+
   get modelAssignments() {
     const { assignments } = this.args.model;
     if (assignments.includes('allow_all') && assignments.length === 1) {
diff --git a/ui/app/components/oidc/provider-form.hbs b/ui/app/components/oidc/provider-form.hbs
index 4c1c5cdf5f..7e39b8263b 100644
--- a/ui/app/components/oidc/provider-form.hbs
+++ b/ui/app/components/oidc/provider-form.hbs
@@ -3,28 +3,11 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.top>
-    <Hds::Breadcrumb>
-      {{#if @model.isNew}}
-        <Hds::Breadcrumb::Item @text="Providers" @route="vault.cluster.access.oidc.providers" />
-      {{else}}
-        <Hds::Breadcrumb::Item
-          @text="Details"
-          @route="vault.cluster.access.oidc.providers.provider.details"
-          @model={{@model.name}}
-        />
-      {{/if}}
-      <Hds::Breadcrumb::Item @text="{{if @model.isNew 'Create' 'Edit'}} Provider" @current={{true}} />
-    </Hds::Breadcrumb>
-  </p.top>
-  <p.levelLeft>
-    <h1 class="title is-3" data-test-oidc-provider-title>
-      {{if @model.isNew "Create" "Edit"}}
-      Provider
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+<Page::Header @title="{{if @model.isNew 'Create' 'Edit'}} Provider">
+  <:breadcrumbs>
+    <Page::Breadcrumbs @breadcrumbs={{this.breadcrumbs}} />
+  </:breadcrumbs>
+</Page::Header>
 
 <form {{on "submit" (perform this.save)}} {{did-insert this.setIssuer @model}}>
   <div class="box is-sideless is-fullwidth is-bottomless">
diff --git a/ui/app/components/oidc/provider-form.js b/ui/app/components/oidc/provider-form.js
index 29e6d3a27e..90964c7800 100644
--- a/ui/app/components/oidc/provider-form.js
+++ b/ui/app/components/oidc/provider-form.js
@@ -36,6 +36,17 @@ export default class OidcProviderForm extends Component {
       ? 'allow_all'
       : 'limited';
 
+  get breadcrumbs() {
+    const firstBreadcrumb = this.args.model.isNew
+      ? { label: 'Providers', route: 'vault.cluster.access.oidc.providers' }
+      : {
+          label: 'Details',
+          route: 'vault.cluster.access.oidc.providers.provider.details',
+          model: this.args.model.name,
+        };
+    return [firstBreadcrumb, { label: this.args.model.isNew ? 'Create Provider' : 'Edit Provider' }];
+  }
+
   // function passed to search select
   renderTooltip(selection, dropdownOptions) {
     // if a client has been deleted it will not exist in dropdownOptions (response from search select's query)
diff --git a/ui/app/components/oidc/scope-form.hbs b/ui/app/components/oidc/scope-form.hbs
index 7be4c22990..5c57a2c9ef 100644
--- a/ui/app/components/oidc/scope-form.hbs
+++ b/ui/app/components/oidc/scope-form.hbs
@@ -3,28 +3,11 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.top>
-    <Hds::Breadcrumb>
-      {{#if @model.isNew}}
-        <Hds::Breadcrumb::Item @text="Scopes" @route="vault.cluster.access.oidc.scopes" />
-      {{else}}
-        <Hds::Breadcrumb::Item
-          @text="Details"
-          @route="vault.cluster.access.oidc.scopes.scope.details"
-          @model={{@model.name}}
-        />
-      {{/if}}
-      <Hds::Breadcrumb::Item @text="{{if @model.isNew 'Create' 'Edit'}} Scope" @current={{true}} />
-    </Hds::Breadcrumb>
-  </p.top>
-  <p.levelLeft>
-    <h1 class="title is-3" data-test-oidc-scope-title>
-      {{if @model.isNew "Create" "Edit"}}
-      Scope
-    </h1>
-  </p.levelLeft>
-  <p.levelRight>
+<Page::Header @title="{{if @model.isNew 'Create' 'Edit'}} Scope">
+  <:breadcrumbs>
+    <Page::Breadcrumbs @breadcrumbs={{this.breadcrumbs}} />
+  </:breadcrumbs>
+  <:actions>
     <Hds::Button
       @text="How to write JSON template for scopes"
       @icon="bulb"
@@ -32,8 +15,8 @@
       {{on "click" (fn (mut this.showTemplateModal))}}
       data-test-oidc-scope-example
     />
-  </p.levelRight>
-</PageHeader>
+  </:actions>
+</Page::Header>
 
 <form {{on "submit" (perform this.save)}}>
   <div class="box is-sideless is-fullwidth is-marginless">
diff --git a/ui/app/components/oidc/scope-form.js b/ui/app/components/oidc/scope-form.js
index 6f472e7f31..2a97c50f98 100644
--- a/ui/app/components/oidc/scope-form.js
+++ b/ui/app/components/oidc/scope-form.js
@@ -39,6 +39,17 @@ export default class OidcScopeFormComponent extends Component {
   "groups": {{identity.entity.groups.names}}
 }`;
 
+  get breadcrumbs() {
+    const firstBreadcrumb = this.args.model.isNew
+      ? { label: 'Scopes', route: 'vault.cluster.access.oidc.scopes' }
+      : {
+          label: 'Details',
+          route: 'vault.cluster.access.oidc.scopes.scope.details',
+          model: this.args.model.name,
+        };
+    return [firstBreadcrumb, { label: this.args.model.isNew ? 'Create Scope' : 'Edit Scope' }];
+  }
+
   @task
   *save(event) {
     event.preventDefault();
diff --git a/ui/app/components/page/userpass-reset-password.hbs b/ui/app/components/page/userpass-reset-password.hbs
index 72d7ebfd1a..5825519bff 100644
--- a/ui/app/components/page/userpass-reset-password.hbs
+++ b/ui/app/components/page/userpass-reset-password.hbs
@@ -3,13 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.levelLeft>
-    <h1 data-test-title class="title is-3">
-      Reset password
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+<Page::Header @title="Reset password" />
 
 <form {{on "submit" (perform this.updatePassword) on="submit"}}>
   <div class="box is-sideless is-fullwidth is-marginless">
diff --git a/ui/app/components/raft-storage-restore.hbs b/ui/app/components/raft-storage-restore.hbs
index a1343ebdf1..45fbd6e51e 100644
--- a/ui/app/components/raft-storage-restore.hbs
+++ b/ui/app/components/raft-storage-restore.hbs
@@ -3,19 +3,13 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.top>
-    <Hds::Breadcrumb>
-      <Hds::Breadcrumb::Item @text="Raft Storage" @route="vault.cluster.storage" />
-      <Hds::Breadcrumb::Item @text="Restore Snapshot" @current={{true}} />
-    </Hds::Breadcrumb>
-  </p.top>
-  <p.levelLeft>
-    <h1 class="title is-3">
-      Restore Snapshot
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+<Page::Header @title="Restore Snapshot">
+  <:breadcrumbs>
+    <Page::Breadcrumbs
+      @breadcrumbs={{array (hash label="Raft Storage" route="vault.cluster.storage") (hash label="Restore Snapshot")}}
+    />
+  </:breadcrumbs>
+</Page::Header>
 
 <form {{action (perform this.restore this.file) on="submit"}}>
   <MessageError @errors={{this.errors}} />
diff --git a/ui/app/components/role-aws-edit.hbs b/ui/app/components/role-aws-edit.hbs
index 4b5302c9b7..d7adce185b 100644
--- a/ui/app/components/role-aws-edit.hbs
+++ b/ui/app/components/role-aws-edit.hbs
@@ -3,8 +3,8 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.top>
+<Page::Header @title={{this.title}} @subtitle={{this.subtitle}}>
+  <:breadcrumbs>
     <KeyValueHeader
       @baseKey={{this.model}}
       @path="vault.cluster.secrets.backend.list"
@@ -12,21 +12,8 @@
       @root={{this.root}}
       @showCurrent={{true}}
     />
-  </p.top>
-  <p.levelLeft>
-    <h1 class="title is-3" data-test-secret-header="true">
-      {{#if (eq this.mode "create")}}
-        Create an AWS Role
-      {{else if (eq this.mode "edit")}}
-        Edit AWS Role
-        <code>{{this.model.id}}</code>
-      {{else}}
-        AWS Role
-        <code>{{this.model.id}}</code>
-      {{/if}}
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+  </:breadcrumbs>
+</Page::Header>
 
 {{#if (eq this.mode "show")}}
   <Toolbar>
diff --git a/ui/app/components/role-aws-edit.js b/ui/app/components/role-aws-edit.js
index eab1bf040f..f7bb51db2c 100644
--- a/ui/app/components/role-aws-edit.js
+++ b/ui/app/components/role-aws-edit.js
@@ -6,9 +6,26 @@
 import { isBlank } from '@ember/utils';
 import { set } from '@ember/object';
 import RoleEdit from './role-edit';
+import { computed } from '@ember/object';
 const SHOW_ROUTE = 'vault.cluster.secrets.backend.show';
 
 export default RoleEdit.extend({
+  title: computed('mode', function () {
+    if (this.mode === 'create') {
+      return 'Create an AWS Role';
+    } else if (this.mode === 'edit') {
+      return 'Edit AWS Role';
+    } else {
+      return 'AWS Role';
+    }
+  }),
+
+  subtitle: computed('mode', 'model.id', function () {
+    if (this.mode === 'create') return;
+
+    return this.model.id;
+  }),
+
   actions: {
     createOrUpdate(type, event) {
       event.preventDefault();
diff --git a/ui/app/components/role-ssh-edit.hbs b/ui/app/components/role-ssh-edit.hbs
index 17f87b270c..4aea89fb62 100644
--- a/ui/app/components/role-ssh-edit.hbs
+++ b/ui/app/components/role-ssh-edit.hbs
@@ -3,8 +3,8 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.top>
+<Page::Header @title={{this.title}} @subtitle={{this.subtitle}}>
+  <:breadcrumbs>
     <KeyValueHeader
       @baseKey={{this.model}}
       @path="vault.cluster.secrets.backend.list"
@@ -12,20 +12,8 @@
       @root={{this.root}}
       @showCurrent={{true}}
     />
-  </p.top>
-  <p.levelLeft>
-    <h1 class="title is-3" data-test-secret-header="true">
-      {{#if (eq this.mode "create")}}
-        Create an SSH Role
-      {{else if (eq this.mode "edit")}}
-        Edit SSH Role
-      {{else}}
-        SSH Role
-        <code>{{this.model.id}}</code>
-      {{/if}}
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+  </:breadcrumbs>
+</Page::Header>
 
 {{#if (eq this.mode "show")}}
   <Toolbar>
diff --git a/ui/app/components/role-ssh-edit.js b/ui/app/components/role-ssh-edit.js
index 233019213e..091141cfd9 100644
--- a/ui/app/components/role-ssh-edit.js
+++ b/ui/app/components/role-ssh-edit.js
@@ -4,6 +4,7 @@
  */
 
 import RoleEdit from './role-edit';
+import { computed } from '@ember/object';
 
 export default RoleEdit.extend({
   init() {
@@ -11,6 +12,22 @@ export default RoleEdit.extend({
     this.set('backendType', 'ssh');
   },
 
+  title: computed('mode', function () {
+    if (this.mode === 'create') {
+      return 'Create SSH Role';
+    } else if (this.mode === 'edit') {
+      return 'Edit SSH Role';
+    } else {
+      return 'SSH Role';
+    }
+  }),
+
+  subtitle: computed('mode', 'model.id', function () {
+    if (this.mode === 'create' || this.mode === 'edit') return;
+
+    return this.model.id;
+  }),
+
   actions: {
     updateTtl(path, val) {
       const model = this.model;
diff --git a/ui/app/components/secret-engine/page/general-settings.hbs b/ui/app/components/secret-engine/page/general-settings.hbs
index e6516460f2..4f572f9abc 100644
--- a/ui/app/components/secret-engine/page/general-settings.hbs
+++ b/ui/app/components/secret-engine/page/general-settings.hbs
@@ -11,16 +11,6 @@
     <:breadcrumbs>
       <Page::Breadcrumbs @breadcrumbs={{@breadcrumbs}} />
     </:breadcrumbs>
-    <:tabs>
-      <Mount::ConfigureTabs
-        @configRoute={{if
-          engineDisplayData.isConfigurable
-          (or engineDisplayData.configRoute "configuration.plugin-settings")
-        }}
-        @displayName={{engineDisplayData.displayName}}
-        @path={{@model.secretsEngine.id}}
-      />
-    </:tabs>
     <:actions>
       <Hds::Button
         @color="secondary"
@@ -34,8 +24,12 @@
       />
     </:actions>
   </Page::Header>
+  <Mount::ConfigureTabs
+    @configRoute={{if engineDisplayData.isConfigurable (or engineDisplayData.configRoute "configuration.plugin-settings")}}
+    @displayName={{engineDisplayData.displayName}}
+    @path={{@model.secretsEngine.id}}
+  />
 {{/let}}
-
 {{#if this.saveGeneralSettings.isRunning}}
   {{! TODO: Fix loading state styles }}
   <Hds::Layout::Flex @gap="24" @direction="column" @justify="center" @align="center">
diff --git a/ui/app/components/secret-engine/page/plugin-settings.hbs b/ui/app/components/secret-engine/page/plugin-settings.hbs
index dc92c7dace..8a18b34586 100644
--- a/ui/app/components/secret-engine/page/plugin-settings.hbs
+++ b/ui/app/components/secret-engine/page/plugin-settings.hbs
@@ -12,13 +12,6 @@
     <:breadcrumbs>
       <Page::Breadcrumbs @breadcrumbs={{@breadcrumbs}} />
     </:breadcrumbs>
-    <:tabs>
-      <Mount::ConfigureTabs
-        @configRoute={{or engineDisplayData.configRoute "configuration.plugin-settings"}}
-        @displayName={{engineDisplayData.displayName}}
-        @path={{@model.secretsEngine.id}}
-      />
-    </:tabs>
     <:actions>
       <Hds::Button
         @color="secondary"
@@ -32,6 +25,11 @@
       />
     </:actions>
   </Page::Header>
+  <Mount::ConfigureTabs
+    @configRoute={{or engineDisplayData.configRoute "configuration.plugin-settings"}}
+    @displayName={{engineDisplayData.displayName}}
+    @path={{@model.secretsEngine.id}}
+  />
 
   {{#if @model.config}}
     <Toolbar>
diff --git a/ui/app/components/tools/hash.hbs b/ui/app/components/tools/hash.hbs
index 47007389b9..f55706de20 100644
--- a/ui/app/components/tools/hash.hbs
+++ b/ui/app/components/tools/hash.hbs
@@ -3,13 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.levelLeft>
-    <h1 class="title is-3">
-      Hash Data
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+<Page::Header @title="Hash Data" />
 
 {{#if this.sum}}
   <div class="box is-sideless is-fullwidth is-marginless">
diff --git a/ui/app/components/tools/lookup.hbs b/ui/app/components/tools/lookup.hbs
index 98e229d9de..e22af36856 100644
--- a/ui/app/components/tools/lookup.hbs
+++ b/ui/app/components/tools/lookup.hbs
@@ -3,13 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.levelLeft>
-    <h1 class="title is-3">
-      Lookup Token
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+<Page::Header @title="Lookup Token" />
 
 {{#if this.lookupData}}
   <div class="box is-fullwidth is-sideless is-paddingless is-marginless">
diff --git a/ui/app/components/tools/random.hbs b/ui/app/components/tools/random.hbs
index df24057c46..7374ac382f 100644
--- a/ui/app/components/tools/random.hbs
+++ b/ui/app/components/tools/random.hbs
@@ -3,13 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.levelLeft>
-    <h1 class="title is-3">
-      Random Bytes
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+<Page::Header @title="Random Bytes" />
 
 {{#if this.randomBytes}}
   <div class="box is-sideless is-fullwidth is-marginless">
diff --git a/ui/app/components/tools/rewrap.hbs b/ui/app/components/tools/rewrap.hbs
index ab28289a26..d3b6837920 100644
--- a/ui/app/components/tools/rewrap.hbs
+++ b/ui/app/components/tools/rewrap.hbs
@@ -3,13 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.levelLeft>
-    <h1 class="title is-3">
-      Rewrap Token
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+<Page::Header @title="Rewrap Token" />
 
 {{#if this.rewrappedToken}}
   <div class="box is-sideless is-fullwidth is-marginless">
diff --git a/ui/app/components/tools/unwrap.hbs b/ui/app/components/tools/unwrap.hbs
index d99433e69c..3c8282d71c 100644
--- a/ui/app/components/tools/unwrap.hbs
+++ b/ui/app/components/tools/unwrap.hbs
@@ -3,13 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.levelLeft>
-    <h1 class="title is-3">
-      Unwrap Data
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+<Page::Header @title="Unwrap Data" />
 
 {{#if this.unwrapData}}
   <Hds::Tabs as |T|>
diff --git a/ui/app/components/tools/wrap.hbs b/ui/app/components/tools/wrap.hbs
index f215c8cb9a..660c8ae663 100644
--- a/ui/app/components/tools/wrap.hbs
+++ b/ui/app/components/tools/wrap.hbs
@@ -3,13 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.levelLeft>
-    <h1 class="title is-3">
-      Wrap Data
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+<Page::Header @title="Wrap Data" />
 
 {{#if this.token}}
   <div class="box is-sideless is-fullwidth is-marginless">
diff --git a/ui/app/components/totp-edit.hbs b/ui/app/components/totp-edit.hbs
index 3dd1288c09..066cca5166 100644
--- a/ui/app/components/totp-edit.hbs
+++ b/ui/app/components/totp-edit.hbs
@@ -3,8 +3,8 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.top>
+<Page::Header @title={{this.title}} @subtitle={{this.subtitle}}>
+  <:breadcrumbs>
     <KeyValueHeader
       @baseKey={{@model}}
       @path="vault.cluster.secrets.backend.list"
@@ -12,18 +12,8 @@
       @root={{@root}}
       @showCurrent={{true}}
     />
-  </p.top>
-  <p.levelLeft>
-    <h1 class="title is-3" data-test-secret-header>
-      {{#if (eq @mode "create")}}
-        Create a TOTP key
-      {{else}}
-        TOTP key
-        <code>{{@model.id}}</code>
-      {{/if}}
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+  </:breadcrumbs>
+</Page::Header>
 
 {{#if (eq @mode "show")}}
   <Totp::KeyDetails @model={{@model}} @onDelete={{this.deleteKey}} />
diff --git a/ui/app/components/totp-edit.js b/ui/app/components/totp-edit.js
index bd0621cb21..e72b8df9cd 100644
--- a/ui/app/components/totp-edit.js
+++ b/ui/app/components/totp-edit.js
@@ -34,6 +34,19 @@ export default class TotpEdit extends Component {
 
   successCallback;
 
+  get title() {
+    if (this.args.mode === 'create') {
+      return 'Create a TOTP key';
+    }
+    return 'TOTP key';
+  }
+
+  get subtitle() {
+    if (this.args.mode === 'create') return '';
+
+    return this.args.model.id;
+  }
+
   get defaultKeyFormFields() {
     const shared = ['name', 'generate', 'issuer', 'accountName'];
     const generated = [...shared, 'exported'];
diff --git a/ui/app/components/transform-role-edit.hbs b/ui/app/components/transform-role-edit.hbs
index ea7c6bfe87..5011674cad 100644
--- a/ui/app/components/transform-role-edit.hbs
+++ b/ui/app/components/transform-role-edit.hbs
@@ -3,8 +3,8 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.top>
+<Page::Header @title={{this.title}} @subtitle={{this.subtitle}}>
+  <:breadcrumbs>
     <KeyValueHeader
       @baseKey={{hash display=this.model.id id=this.model.idForNav}}
       @path="vault.cluster.secrets.backend.list"
@@ -12,20 +12,8 @@
       @root={{this.root}}
       @showCurrent={{true}}
     />
-  </p.top>
-  <p.levelLeft>
-    <h1 class="title is-3" data-test-secret-header="true">
-      {{#if (eq this.mode "create")}}
-        Create Role
-      {{else if (eq this.mode "edit")}}
-        Edit Role
-      {{else}}
-        Role
-        <code>{{this.model.id}}</code>
-      {{/if}}
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+  </:breadcrumbs>
+</Page::Header>
 
 {{#if (eq this.mode "show")}}
   <Toolbar>
diff --git a/ui/app/components/transform-role-edit.js b/ui/app/components/transform-role-edit.js
index e839619d3e..e48633ab96 100644
--- a/ui/app/components/transform-role-edit.js
+++ b/ui/app/components/transform-role-edit.js
@@ -5,6 +5,7 @@
 
 import TransformBase, { addToList, removeFromList } from './transform-edit-base';
 import { service } from '@ember/service';
+import { computed } from '@ember/object';
 
 export default TransformBase.extend({
   flashMessages: service(),
@@ -16,6 +17,22 @@ export default TransformBase.extend({
     this.set('initialTransformations', this.model.transformations);
   },
 
+  title: computed('mode', function () {
+    if (this.mode === 'create') {
+      return 'Create Role';
+    } else if (this.mode === 'edit') {
+      return 'Edit Role';
+    } else {
+      return 'Role';
+    }
+  }),
+
+  subtitle: computed('mode', 'model.id', function () {
+    if (this.mode === 'create' || this.mode === 'edit') return;
+
+    return this.model.id;
+  }),
+
   handleUpdateTransformations(updateTransformations, roleId, type = 'update') {
     if (!updateTransformations) return;
     const backend = this.model.backend;
diff --git a/ui/app/components/transform-template-edit.hbs b/ui/app/components/transform-template-edit.hbs
index 7b6cae1517..0d7914e964 100644
--- a/ui/app/components/transform-template-edit.hbs
+++ b/ui/app/components/transform-template-edit.hbs
@@ -3,23 +3,11 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.top>
+<Page::Header @title={{this.title}} @subtitle={{this.subtitle}}>
+  <:breadcrumbs>
     <Page::Breadcrumbs @breadcrumbs={{this.breadcrumbs}} />
-  </p.top>
-  <p.levelLeft>
-    <h1 class="title is-3" data-test-secret-header="true">
-      {{#if (eq @mode "create")}}
-        Create Template
-      {{else if (eq @mode "edit")}}
-        Edit Template
-      {{else}}
-        Template
-        <code>{{@model.id}}</code>
-      {{/if}}
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+  </:breadcrumbs>
+</Page::Header>
 
 {{#if (eq @mode "show")}}
   <Toolbar>
diff --git a/ui/app/components/transform-template-edit.js b/ui/app/components/transform-template-edit.js
index 0ab9c85acb..041450650e 100644
--- a/ui/app/components/transform-template-edit.js
+++ b/ui/app/components/transform-template-edit.js
@@ -41,6 +41,22 @@ export default class TransformTemplateEditComponent extends Component {
     ];
   }
 
+  get title() {
+    if (this.args.mode === 'create') {
+      return 'Create Template';
+    } else if (this.args.mode === 'edit') {
+      return 'Edit Template';
+    } else {
+      return 'Template';
+    }
+  }
+
+  get subtitle() {
+    if (this.args.mode === 'create' || this.args.mode === 'edit') return '';
+
+    return this.args?.model?.id;
+  }
+
   transition(route = 'show') {
     this.errorMessage = '';
     const { backend, id } = this.args.model;
diff --git a/ui/app/components/transformation-edit.hbs b/ui/app/components/transformation-edit.hbs
index 7951437d2c..a0ddefd6c5 100644
--- a/ui/app/components/transformation-edit.hbs
+++ b/ui/app/components/transformation-edit.hbs
@@ -3,8 +3,8 @@ Copyright IBM Corp. 2016, 2025
 SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.top>
+<Page::Header @title={{this.title}} @subtitle={{this.subtitle}}>
+  <:breadcrumbs>
     <KeyValueHeader
       @baseKey={{this.model}}
       @path="vault.cluster.secrets.backend.list"
@@ -12,20 +12,8 @@ SPDX-License-Identifier: BUSL-1.1
       @root={{this.root}}
       @showCurrent={{true}}
     />
-  </p.top>
-  <p.levelLeft>
-    <h1 class="title is-3" data-test-secret-header="true">
-      {{#if (eq this.mode "create")}}
-        Create Transformation
-      {{else if (eq this.mode "edit")}}
-        Edit Transformation
-      {{else}}
-        Transformation
-        <code>{{this.model.id}}</code>
-      {{/if}}
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+  </:breadcrumbs>
+</Page::Header>
 
 {{#if (eq this.mode "show")}}
   <Toolbar>
diff --git a/ui/app/components/transformation-edit.js b/ui/app/components/transformation-edit.js
index 0ca9598045..1b792574ad 100644
--- a/ui/app/components/transformation-edit.js
+++ b/ui/app/components/transformation-edit.js
@@ -5,6 +5,7 @@
 
 import TransformBase, { addToList, removeFromList } from './transform-edit-base';
 import { service } from '@ember/service';
+import { computed } from '@ember/object';
 
 export default TransformBase.extend({
   flashMessages: service(),
@@ -17,6 +18,22 @@ export default TransformBase.extend({
     this.set('initialRoles', this.model.allowed_roles);
   },
 
+  title: computed('mode', function () {
+    if (this.mode === 'create') {
+      return 'Create Transformation';
+    } else if (this.mode === 'edit') {
+      return 'Edit Transformation';
+    } else {
+      return 'Transformation';
+    }
+  }),
+
+  subtitle: computed('mode', 'model.id', function () {
+    if (this.mode === 'create' || this.mode === 'edit') return;
+
+    return this.model.id;
+  }),
+
   async updateOrCreateRole(role, transformationId, backend) {
     const roleRecord = await this.store
       .queryRecord('transform/role', {
diff --git a/ui/app/components/transit-edit.hbs b/ui/app/components/transit-edit.hbs
index b2895282e8..0aa4491f57 100644
--- a/ui/app/components/transit-edit.hbs
+++ b/ui/app/components/transit-edit.hbs
@@ -3,23 +3,12 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.top>
+<Page::Header @title={{this.title}} @subtitle={{this.subtitle}}>
+  <:breadcrumbs>
     <Page::Breadcrumbs @breadcrumbs={{this.breadcrumbs}} />
-  </p.top>
-  <p.levelLeft>
-    <h1 class="title is-3">
-      {{#if (eq this.mode "create")}}
-        Create Key
-      {{else if (eq this.mode "edit")}}
-        Edit Key
-      {{else}}
-        Key
-        <code>{{this.key.id}}</code>
-      {{/if}}
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+  </:breadcrumbs>
+</Page::Header>
+
 {{#if (eq this.mode "create")}}
   <TransitFormCreate
     @createOrUpdateKey={{action "createOrUpdateKey" this.mode}}
diff --git a/ui/app/components/transit-edit.js b/ui/app/components/transit-edit.js
index 2c8183ae63..89549f9fb6 100644
--- a/ui/app/components/transit-edit.js
+++ b/ui/app/components/transit-edit.js
@@ -69,6 +69,22 @@ export default Component.extend(FocusOnInsertMixin, {
     return baseCrumbs;
   },
 
+  get title() {
+    if (this.mode === 'create') {
+      return 'Create Key';
+    } else if (this.mode === 'edit') {
+      return 'Edit Key';
+    } else {
+      return 'Key';
+    }
+  },
+
+  get subtitle() {
+    if (this.mode === 'create' || this.mode === 'edit') return '';
+
+    return this.key?.id;
+  },
+
   waitForKeyUp: task(function* () {
     while (true) {
       const event = yield waitForEvent(document.body, 'keyup');
diff --git a/ui/app/templates/vault/cluster/secrets/backend/configuration/edit.hbs b/ui/app/templates/vault/cluster/secrets/backend/configuration/edit.hbs
index 1c4f0d1508..aa8e30668d 100644
--- a/ui/app/templates/vault/cluster/secrets/backend/configuration/edit.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/configuration/edit.hbs
@@ -24,14 +24,12 @@
         data-test-button="Exit configuration"
       />
     </:actions>
-    <:tabs>
-      <Mount::ConfigureTabs
-        @configRoute="configuration.edit"
-        @displayName={{engineDisplayData.displayName}}
-        @path={{this.model.secretsEngine.id}}
-      />
-    </:tabs>
   </Page::Header>
+  <Mount::ConfigureTabs
+    @configRoute="configuration.edit"
+    @displayName={{engineDisplayData.displayName}}
+    @path={{this.model.secretsEngine.id}}
+  />
 {{/let}}
 
 <Toolbar>
diff --git a/ui/lib/core/addon/components/page/header.hbs b/ui/lib/core/addon/components/page/header.hbs
index 777c014490..163e0bc7be 100644
--- a/ui/lib/core/addon/components/page/header.hbs
+++ b/ui/lib/core/addon/components/page/header.hbs
@@ -21,16 +21,12 @@
   {{#if @subtitle}}
     <PH.Subtitle>{{@subtitle}}</PH.Subtitle>
   {{/if}}
-  {{#if @description}}
+  {{#if (has-block "description")}}
+    <PH.Description>{{yield to="description"}}</PH.Description>
+  {{else if @description}}
     <PH.Description>{{@description}}</PH.Description>
   {{/if}}
   {{#if (has-block "actions")}}
     <PH.Actions>{{yield to="actions"}}</PH.Actions>
   {{/if}}
-</Hds::PageHeader>
-
-{{#if (has-block "tabs")}}
-  <div class="has-top-margin-l">
-    {{yield to="tabs"}}
-  </div>
-{{/if}}
\ No newline at end of file
+</Hds::PageHeader>
\ No newline at end of file
diff --git a/ui/lib/ldap/addon/components/ldap-header.hbs b/ui/lib/ldap/addon/components/ldap-header.hbs
index ce23be56aa..422c21b0ba 100644
--- a/ui/lib/ldap/addon/components/ldap-header.hbs
+++ b/ui/lib/ldap/addon/components/ldap-header.hbs
@@ -32,26 +32,25 @@
       </Hds::Dropdown>
     {{/if}}
   </:actions>
-  <:tabs>
-    {{#if @configRoute}}
-      <Mount::ConfigureTabs
-        @configRoute={{@configRoute}}
-        @displayName="LDAP"
-        @path={{@model.id}}
-        @externalRoute="secretsGeneralSettingsConfiguration"
-      />
-    {{else}}
-      <nav class="tabs" aria-label="ldap tabs">
-        <ul>
-          <li><LinkTo @route="overview" data-test-tab="overview">Overview</LinkTo></li>
-          <li><LinkTo @route="roles" data-test-tab="roles">Roles</LinkTo></li>
-          <li><LinkTo @route="libraries" data-test-tab="libraries">Libraries</LinkTo></li>
-        </ul>
-      </nav>
-    {{/if}}
-  </:tabs>
 </Page::Header>
 
+{{#if @configRoute}}
+  <Mount::ConfigureTabs
+    @configRoute={{@configRoute}}
+    @displayName="LDAP"
+    @path={{@model.id}}
+    @externalRoute="secretsGeneralSettingsConfiguration"
+  />
+{{else}}
+  <nav class="tabs" aria-label="ldap tabs">
+    <ul>
+      <li><LinkTo @route="overview" data-test-tab="overview">Overview</LinkTo></li>
+      <li><LinkTo @route="roles" data-test-tab="roles">Roles</LinkTo></li>
+      <li><LinkTo @route="libraries" data-test-tab="libraries">Libraries</LinkTo></li>
+    </ul>
+  </nav>
+{{/if}}
+
 {{#if this.engineToDisable}}
   <ConfirmModal
     @color="critical"
diff --git a/ui/lib/ldap/addon/components/page/library/details.hbs b/ui/lib/ldap/addon/components/page/library/details.hbs
index fa63998f41..f561b930f9 100644
--- a/ui/lib/ldap/addon/components/page/library/details.hbs
+++ b/ui/lib/ldap/addon/components/page/library/details.hbs
@@ -38,16 +38,15 @@
       {{/if}}
     </Hds::Dropdown>
   </:actions>
-  <:tabs>
-    <nav class="tabs" aria-label="ldap tabs">
-      <ul>
-        <li><LinkTo @route="libraries.library.details.accounts" data-test-tab="accounts">Accounts</LinkTo></li>
-        <li><LinkTo @route="libraries.library.details.configuration" data-test-tab="config">Configuration</LinkTo></li>
-      </ul>
-    </nav>
-  </:tabs>
 </Page::Header>
 
+<nav class="tabs" aria-label="ldap tabs">
+  <ul>
+    <li><LinkTo @route="libraries.library.details.accounts" data-test-tab="accounts">Accounts</LinkTo></li>
+    <li><LinkTo @route="libraries.library.details.configuration" data-test-tab="config">Configuration</LinkTo></li>
+  </ul>
+</nav>
+
 {{#if this.showConfirmModal}}
   <ConfirmModal
     @color="critical"
diff --git a/ui/lib/pki/addon/components/pki-page-header.hbs b/ui/lib/pki/addon/components/pki-page-header.hbs
index 890c7f5968..bdbd1da845 100644
--- a/ui/lib/pki/addon/components/pki-page-header.hbs
+++ b/ui/lib/pki/addon/components/pki-page-header.hbs
@@ -7,25 +7,24 @@
   <:breadcrumbs>
     <Page::Breadcrumbs @breadcrumbs={{this.breadcrumbs}} />
   </:breadcrumbs>
-  <:tabs>
-    <nav class="tabs" aria-label="pki tabs">
-      <ul>
-        <li><LinkTo @route="overview" @model={{@backend.id}} data-test-secret-list-tab="Overview">Overview</LinkTo></li>
-        <li><LinkTo @route="roles" @model={{@backend.id}} data-test-secret-list-tab="Roles">Roles</LinkTo></li>
-        <li><LinkTo @route="issuers" @model={{@backend.id}} data-test-secret-list-tab="Issuers">Issuers</LinkTo></li>
-        <li><LinkTo @route="keys" @model={{@backend.id}} data-test-secret-list-tab="Keys">Keys</LinkTo></li>
-        <li><LinkTo
-            @route="certificates"
-            @model={{@backend.id}}
-            data-test-secret-list-tab="Certificates"
-          >Certificates</LinkTo></li>
-        <li><LinkTo @route="tidy" @model={{@backend.id}} data-test-secret-list-tab="Tidy">Tidy</LinkTo></li>
-        <li><LinkTo
-            @route="configuration"
-            @model={{@backend.id}}
-            data-test-secret-list-tab="Configuration"
-          >Configuration</LinkTo></li>
-      </ul>
-    </nav>
-  </:tabs>
-</Page::Header>
\ No newline at end of file
+</Page::Header>
+
+<nav class="tabs" aria-label="pki tabs">
+  <ul>
+    <li><LinkTo @route="overview" @model={{@backend.id}} data-test-secret-list-tab="Overview">Overview</LinkTo></li>
+    <li><LinkTo @route="roles" @model={{@backend.id}} data-test-secret-list-tab="Roles">Roles</LinkTo></li>
+    <li><LinkTo @route="issuers" @model={{@backend.id}} data-test-secret-list-tab="Issuers">Issuers</LinkTo></li>
+    <li><LinkTo @route="keys" @model={{@backend.id}} data-test-secret-list-tab="Keys">Keys</LinkTo></li>
+    <li><LinkTo
+        @route="certificates"
+        @model={{@backend.id}}
+        data-test-secret-list-tab="Certificates"
+      >Certificates</LinkTo></li>
+    <li><LinkTo @route="tidy" @model={{@backend.id}} data-test-secret-list-tab="Tidy">Tidy</LinkTo></li>
+    <li><LinkTo
+        @route="configuration"
+        @model={{@backend.id}}
+        data-test-secret-list-tab="Configuration"
+      >Configuration</LinkTo></li>
+  </ul>
+</nav>
\ No newline at end of file
diff --git a/ui/lib/pki/addon/templates/error.hbs b/ui/lib/pki/addon/templates/error.hbs
index 27e81c8771..41107bdba7 100644
--- a/ui/lib/pki/addon/templates/error.hbs
+++ b/ui/lib/pki/addon/templates/error.hbs
@@ -7,17 +7,16 @@
   <:breadcrumbs>
     <Page::Breadcrumbs @breadcrumbs={{this.breadcrumbs}} />
   </:breadcrumbs>
-  <:tabs>
-    <nav class="tabs" aria-label="secret tabs">
-      <ul>
-        {{#each this.tabs as |oTab|}}
-          <LinkTo @route={{oTab.route}} data-test-tab={{oTab.route}}>
-            {{oTab.label}}
-          </LinkTo>
-        {{/each}}
-      </ul>
-    </nav>
-  </:tabs>
 </Page::Header>
 
+<nav class="tabs" aria-label="secret tabs">
+  <ul>
+    {{#each this.tabs as |oTab|}}
+      <LinkTo @route={{oTab.route}} data-test-tab={{oTab.route}}>
+        {{oTab.label}}
+      </LinkTo>
+    {{/each}}
+  </ul>
+</nav>
+
 <Page::Error @error={{this.model}} />
\ No newline at end of file
diff --git a/ui/tests/acceptance/auth/auth-list-test.js b/ui/tests/acceptance/auth/auth-list-test.js
index 4bebbe016f..5ea6fd0bfd 100644
--- a/ui/tests/acceptance/auth/auth-list-test.js
+++ b/ui/tests/acceptance/auth/auth-list-test.js
@@ -49,7 +49,7 @@ module('Acceptance | auth backend list', function (hooks) {
     await createUser(this.path1, this.user1);
 
     // navigate back to the methods list
-    await click(SELECTORS.methods);
+    await click(GENERAL.breadcrumbAtIdx(0));
     assert.strictEqual(currentURL(), '/vault/access');
 
     // enable a second user in the second userpass backend
@@ -59,7 +59,7 @@ module('Acceptance | auth backend list', function (hooks) {
     assert.dom(SELECTORS.listItem).hasText(this.user2, 'user2 exists in the list');
 
     // check that switching back to the first auth method shows the first user
-    await click(SELECTORS.methods);
+    await click(GENERAL.breadcrumbAtIdx(0));
     await click(GENERAL.linkedBlock(this.path1));
     assert.dom(SELECTORS.listItem).hasText(this.user1, 'user1 exists in the list');
 
@@ -98,6 +98,7 @@ module('Acceptance | auth backend list', function (hooks) {
           const itemSelector = `${GENERAL.linkedBlock(path)} .hds-dropdown-list-item`;
 
           await click(triggerSelector);
+
           assert
             .dom(itemSelector)
             .exists({ count: itemCount }, `shows ${itemCount} dropdown items for ${type}`);
diff --git a/ui/tests/acceptance/dashboard-test.js b/ui/tests/acceptance/dashboard-test.js
index dc50cc39b5..77afdc6c16 100644
--- a/ui/tests/acceptance/dashboard-test.js
+++ b/ui/tests/acceptance/dashboard-test.js
@@ -8,6 +8,7 @@ import { visit, currentURL } from '@ember/test-helpers';
 import { setupApplicationTest } from 'vault/tests/helpers';
 import { login } from 'vault/tests/helpers/auth/auth-helpers';
 import { DASHBOARD } from 'vault/tests/helpers/components/dashboard/dashboard-selectors';
+import { GENERAL } from 'vault/tests/helpers/general-selectors';
 import Sinon from 'sinon';
 
 module('Acceptance | landing page dashboard', function (hooks) {
@@ -25,12 +26,12 @@ module('Acceptance | landing page dashboard', function (hooks) {
 
   test('display the version number for the title', async function (assert) {
     await login();
-    // Since we're using mirage, version is mocked static value
-    const versionText = this.version.isEnterprise
-      ? `Vault ${this.version.versionDisplay} root`
-      : `Vault ${this.version.versionDisplay}`;
+    assert.dom(GENERAL.hdsPageHeaderTitle).hasText(`Vault ${this.version.versionDisplay}`);
+  });
 
-    assert.dom(DASHBOARD.cardHeader('Vault version')).hasText(versionText);
+  test('display the namespace badge for enterprise', async function (assert) {
+    await login();
+    assert.dom('.hds-badge').hasText('root', 'shows root namespace for enterprise');
   });
 
   test('hides the configuration details card on a non-root namespace enterprise version', async function (assert) {
diff --git a/ui/tests/acceptance/mfa-login-enforcement-test.js b/ui/tests/acceptance/mfa-login-enforcement-test.js
index 9966837f25..eb0904c9b4 100644
--- a/ui/tests/acceptance/mfa-login-enforcement-test.js
+++ b/ui/tests/acceptance/mfa-login-enforcement-test.js
@@ -52,7 +52,7 @@ module('Acceptance | mfa-login-enforcement', function (hooks) {
     await click(GENERAL.tab('enforcements'));
     await click('[data-test-enforcement-create]');
 
-    assert.dom('[data-test-mleh-title]').hasText('New enforcement', 'Title renders');
+    assert.dom(GENERAL.hdsPageHeaderTitle).hasText('New enforcement', 'Title renders');
     await click('[data-test-mlef-save]');
     assert
       .dom('[data-test-inline-error-message]')
diff --git a/ui/tests/acceptance/oidc-auth-method-test.js b/ui/tests/acceptance/oidc-auth-method-test.js
index ed2fa0f718..7c719c06a2 100644
--- a/ui/tests/acceptance/oidc-auth-method-test.js
+++ b/ui/tests/acceptance/oidc-auth-method-test.js
@@ -52,10 +52,8 @@ module('Acceptance | oidc auth method', function (hooks) {
     triggerMessageEvent('oidc');
 
     await click(GENERAL.submitButton);
-    await waitFor('[data-test-dashboard-card-header="Vault version"]');
-    assert
-      .dom('[data-test-dashboard-card-header="Vault version"]')
-      .exists('Render the dashboard landing page.');
+    await waitFor(GENERAL.hdsPageHeaderTitle);
+    assert.dom(GENERAL.hdsPageHeaderTitle).exists('Render the dashboard landing page.');
 
     await logout();
     assert.dom(AUTH_FORM.selectMethod).hasValue('oidc', 'Previous auth method selected on logout');
diff --git a/ui/tests/acceptance/reduced-disclosure-test.js b/ui/tests/acceptance/reduced-disclosure-test.js
index 8188286ba9..c8b6f59f19 100644
--- a/ui/tests/acceptance/reduced-disclosure-test.js
+++ b/ui/tests/acceptance/reduced-disclosure-test.js
@@ -18,7 +18,6 @@ import { GENERAL } from 'vault/tests/helpers/general-selectors';
 const { unsealKeys } = VAULT_KEYS;
 const SELECTORS = {
   footerVersion: `[data-test-footer-version]`,
-  dashboardTitle: `[data-test-dashboard-card-header="Vault version"]`,
 };
 
 module('Acceptance | reduced disclosure test', function (hooks) {
@@ -39,7 +38,7 @@ module('Acceptance | reduced disclosure test', function (hooks) {
     assert.strictEqual(currentURL(), '/vault/dashboard');
 
     // Ensure it shows version on dashboard
-    assert.dom(SELECTORS.dashboardTitle).includesText(`Vault v1.`);
+    assert.dom(GENERAL.hdsPageHeaderTitle).includesText(`Vault v1.`);
     assert
       .dom(SELECTORS.footerVersion)
       .hasText(`Vault ${this.versionSvc.version}`, 'shows Vault version after login');
@@ -160,7 +159,7 @@ module('Acceptance | reduced disclosure test', function (hooks) {
           `Vault ${this.versionSvc.version}`,
           'shows Vault version for default policy in child namespace'
         );
-      assert.dom(SELECTORS.dashboardTitle).includesText('Vault v1.');
+      assert.dom(GENERAL.hdsPageHeaderTitle).includesText('Vault v1.');
 
       // log in to "root" before deleting
       await login();
@@ -174,7 +173,7 @@ module('Acceptance | reduced disclosure test', function (hooks) {
       assert.strictEqual(currentURL(), '/vault/dashboard');
 
       // Ensure it shows version on dashboard
-      assert.dom(SELECTORS.dashboardTitle).includesText(`Vault v1.`);
+      assert.dom(GENERAL.hdsPageHeaderTitle).includesText(`Vault v1.`);
       assert
         .dom(SELECTORS.footerVersion)
         .hasText(`Vault ${this.versionSvc.version}`, 'shows Vault version after login');
diff --git a/ui/tests/acceptance/reset-password-test.js b/ui/tests/acceptance/reset-password-test.js
index 1c744b177d..998d73ae0f 100644
--- a/ui/tests/acceptance/reset-password-test.js
+++ b/ui/tests/acceptance/reset-password-test.js
@@ -63,7 +63,7 @@ module('Acceptance | reset password', function (hooks) {
         'shows correct banner text'
       );
 
-    assert.dom('[data-test-title]').hasText('Reset password', 'page title');
+    assert.dom(GENERAL.hdsPageHeaderTitle).hasText('Reset password', 'page title');
     await fillIn('[data-test-input="reset-password"]', 'newpassword');
     await click(GENERAL.submitButton);
     await waitFor('[data-test-flash-message]');
diff --git a/ui/tests/acceptance/secrets/backend/aws/aws-test.js b/ui/tests/acceptance/secrets/backend/aws/aws-test.js
index 776856d81e..4a205c1761 100644
--- a/ui/tests/acceptance/secrets/backend/aws/aws-test.js
+++ b/ui/tests/acceptance/secrets/backend/aws/aws-test.js
@@ -82,7 +82,7 @@ module('Acceptance | aws secret backend', function (hooks) {
     );
 
     await click(SES.createSecretLink);
-    assert.dom(SES.secretHeader).hasText('Create an AWS Role', 'It renders the create role page');
+    assert.dom(GENERAL.hdsPageHeaderTitle).hasText('Create an AWS Role', 'It renders the create role page');
 
     await fillIn(GENERAL.inputByAttr('name'), roleName);
     await click(GENERAL.submitButton);
diff --git a/ui/tests/acceptance/secrets/backend/ssh/roles-test.js b/ui/tests/acceptance/secrets/backend/ssh/roles-test.js
index d0e3b47b4c..2de39cf5b6 100644
--- a/ui/tests/acceptance/secrets/backend/ssh/roles-test.js
+++ b/ui/tests/acceptance/secrets/backend/ssh/roles-test.js
@@ -121,7 +121,9 @@ module('Acceptance | ssh | roles', function (hooks) {
     for (const role of ROLES) {
       // create a role
       await click(SES.createSecretLink);
-      assert.dom(SES.secretHeader).includesText('SSH Role', `${role.type}: renders the create page`);
+      assert
+        .dom(GENERAL.hdsPageHeaderTitle)
+        .includesText('SSH Role', `${role.type}: renders the create page`);
 
       await fillIn(GENERAL.inputByAttr('name'), role.name);
       await fillIn(GENERAL.inputByAttr('keyType'), role.type);
diff --git a/ui/tests/acceptance/secrets/backend/totp/key-test.js b/ui/tests/acceptance/secrets/backend/totp/key-test.js
index ede917e9ad..a2b4e8e82a 100644
--- a/ui/tests/acceptance/secrets/backend/totp/key-test.js
+++ b/ui/tests/acceptance/secrets/backend/totp/key-test.js
@@ -74,7 +74,8 @@ module('Acceptance | totp key backend', function (hooks) {
     await click(GENERAL.menuTrigger);
     await click(`${GENERAL.menuItem('details')}`);
 
-    assert.dom('.title').hasText(`TOTP key ${this.keyName}`);
+    assert.dom(GENERAL.hdsPageHeaderTitle).hasText('TOTP key');
+    assert.dom(GENERAL.hdsPageHeaderSubtitle).hasText(this.keyName);
     assert.dom('[data-test-totp-key-details]').exists();
 
     assert.strictEqual(
@@ -101,7 +102,7 @@ module('Acceptance | totp key backend', function (hooks) {
 
   test('it creates a key with Vault as the provider', async function (assert) {
     await click(SES.createSecretLink);
-    assert.dom(SES.secretHeader).hasText('Create a TOTP key', 'It renders the create key page');
+    assert.dom(GENERAL.hdsPageHeaderTitle).hasText('Create a TOTP key', 'It renders the create key page');
 
     await createVaultKey(this.keyName, this.issuer, this.accountName);
     assert.dom('[data-test-qrcode]').exists('QR code exists');
@@ -121,7 +122,7 @@ module('Acceptance | totp key backend', function (hooks) {
 
   test('it creates a key with another service as the provider with URL', async function (assert) {
     await click(SES.createSecretLink);
-    assert.dom(SES.secretHeader).hasText('Create a TOTP key', 'It renders the create key page');
+    assert.dom(GENERAL.hdsPageHeaderTitle).hasText('Create a TOTP key', 'It renders the create key page');
     await createNonVaultKey(this.keyName, this.issuer, this.accountName, this.url);
     await waitUntil(() => currentURL() === `/vault/secrets-engines/${this.path}/show/${this.keyName}`);
     assert.strictEqual(
@@ -136,7 +137,7 @@ module('Acceptance | totp key backend', function (hooks) {
 
   test('it creates a key with another service as the provider with key', async function (assert) {
     await click(SES.createSecretLink);
-    assert.dom(SES.secretHeader).hasText('Create a TOTP key', 'It renders the create key page');
+    assert.dom(GENERAL.hdsPageHeaderTitle).hasText('Create a TOTP key', 'It renders the create key page');
     await createNonVaultKey(this.keyName, this.issuer, this.accountName, undefined, this.key);
     await waitUntil(() => currentURL() === `/vault/secrets-engines/${this.path}/show/${this.keyName}`);
     assert.strictEqual(
diff --git a/ui/tests/integration/components/dashboard/overview-test.js b/ui/tests/integration/components/dashboard/overview-test.js
index 94ce005fa1..bb36d52cb0 100644
--- a/ui/tests/integration/components/dashboard/overview-test.js
+++ b/ui/tests/integration/components/dashboard/overview-test.js
@@ -10,6 +10,7 @@ import { hbs } from 'ember-cli-htmlbars';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import { DASHBOARD } from 'vault/tests/helpers/components/dashboard/dashboard-selectors';
 import { SECRET_ENGINE_SELECTORS as SES } from 'vault/tests/helpers/secret-engine/secret-engine-selectors';
+import { GENERAL } from 'vault/tests/helpers/general-selectors';
 
 module('Integration | Component | dashboard/overview', function (hooks) {
   setupRenderingTest(hooks);
@@ -81,7 +82,7 @@ module('Integration | Component | dashboard/overview', function (hooks) {
     this.replication = null;
     this.vaultConfiguration = null;
     await this.renderComponent();
-    assert.dom(DASHBOARD.cardHeader('Vault version')).exists();
+    assert.dom(GENERAL.hdsPageHeaderTitle).exists();
     assert.dom(DASHBOARD.cardName('secrets-engines')).exists();
     assert.dom(DASHBOARD.emptyState('secrets-engines')).exists();
     assert.dom(DASHBOARD.cardName('learn-more')).exists();
@@ -115,7 +116,7 @@ module('Integration | Component | dashboard/overview', function (hooks) {
       );
       await this.renderComponent();
 
-      assert.dom(DASHBOARD.cardHeader('Vault version')).exists();
+      assert.dom(GENERAL.hdsPageHeaderTitle).exists();
       assert.dom(DASHBOARD.cardName('secrets-engines')).exists();
       assert.dom(DASHBOARD.cardName('learn-more')).exists();
       assert.dom(DASHBOARD.cardName('quick-actions')).exists();
@@ -149,7 +150,7 @@ module('Integration | Component | dashboard/overview', function (hooks) {
         },
       };
       await this.renderComponent();
-      assert.dom(DASHBOARD.cardHeader('Vault version')).exists();
+      assert.dom(GENERAL.hdsPageHeaderTitle).exists();
       assert.dom(DASHBOARD.cardName('secrets-engines')).exists();
       assert.dom(DASHBOARD.cardName('learn-more')).exists();
       assert.dom(DASHBOARD.cardName('quick-actions')).exists();
diff --git a/ui/tests/integration/components/keymgmt/key-edit-test.js b/ui/tests/integration/components/keymgmt/key-edit-test.js
index 1caefb0575..7bc8b5364d 100644
--- a/ui/tests/integration/components/keymgmt/key-edit-test.js
+++ b/ui/tests/integration/components/keymgmt/key-edit-test.js
@@ -9,6 +9,7 @@ import EmberObject from '@ember/object';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
+import { GENERAL } from 'vault/tests/helpers/general-selectors';
 import timestamp from 'core/utils/timestamp';
 
 module('Integration | Component | keymgmt/key-edit', function (hooks) {
@@ -43,7 +44,7 @@ module('Integration | Component | keymgmt/key-edit', function (hooks) {
   test('it renders show view as default', async function (assert) {
     assert.expect(8);
     await render(hbs`<Keymgmt::KeyEdit @model={{this.model}} @tab={{this.tab}} />`);
-    assert.dom('[data-test-secret-header]').hasText('Unicorns', 'Shows key name');
+    assert.dom(GENERAL.hdsPageHeaderTitle).hasText('Unicorns', 'Shows key name');
     assert.dom('[data-test-keymgmt-key-toolbar]').exists('Subnav toolbar exists');
     assert.dom('[data-test-tab="Details"]').exists('Details tab exists');
     assert.dom('[data-test-tab="Versions"]').exists('Versions tab exists');
@@ -67,7 +68,7 @@ module('Integration | Component | keymgmt/key-edit', function (hooks) {
     this.set('model', model);
 
     await render(hbs`<Keymgmt::KeyEdit @model={{this.model}} @mode={{this.mode}} />`);
-    assert.dom('[data-test-secret-header]').hasText('Edit Key', 'Shows edit header');
+    assert.dom(GENERAL.hdsPageHeaderTitle).hasText('Edit Key', 'Shows edit header');
     assert.dom('[data-test-keymgmt-key-toolbar]').doesNotExist('Subnav toolbar does not exist');
     assert.dom('[data-test-tab="Details"]').doesNotExist('Details tab does not exist');
     assert.dom('[data-test-tab="Versions"]').doesNotExist('Versions tab does not exist');
@@ -80,7 +81,7 @@ module('Integration | Component | keymgmt/key-edit', function (hooks) {
     this.set('model', model);
 
     await render(hbs`<Keymgmt::KeyEdit @model={{this.model}} @mode={{this.mode}} />`);
-    assert.dom('[data-test-secret-header]').hasText('Create Key', 'Shows edit header');
+    assert.dom(GENERAL.hdsPageHeaderTitle).hasText('Create Key', 'Shows edit header');
     assert.dom('[data-test-keymgmt-key-toolbar]').doesNotExist('Subnav toolbar does not exist');
     assert.dom('[data-test-tab="Details"]').doesNotExist('Details tab does not exist');
     assert.dom('[data-test-tab="Versions"]').doesNotExist('Versions tab does not exist');
diff --git a/ui/tests/integration/components/keymgmt/provider-edit-test.js b/ui/tests/integration/components/keymgmt/provider-edit-test.js
index 7d07618a28..9eceaf1676 100644
--- a/ui/tests/integration/components/keymgmt/provider-edit-test.js
+++ b/ui/tests/integration/components/keymgmt/provider-edit-test.js
@@ -58,7 +58,7 @@ module('Integration | Component | keymgmt/provider-edit', function (hooks) {
   });
 
   test('it should render show view', async function (assert) {
-    assert.expect(10);
+    assert.expect(11);
 
     // override capability getters
     Object.defineProperties(this.model, {
@@ -88,7 +88,8 @@ module('Integration | Component | keymgmt/provider-edit', function (hooks) {
         @tab={{this.tab}}
       />`);
 
-    assert.dom(`[${ts}-header]`).hasText('Provider foo-bar', 'Page header renders');
+    assert.dom(GENERAL.hdsPageHeaderTitle).hasText('Provider', 'Page header renders');
+    assert.dom(GENERAL.hdsPageHeaderSubtitle).hasText(' foo-bar', 'Page header renders subtitle');
     assert.dom(`[${ts}-tab="details"]`).hasClass('active', 'Details tab is active');
 
     const infoRows = this.element.querySelectorAll('[data-test-component="info-table-row"]');
@@ -194,7 +195,7 @@ module('Integration | Component | keymgmt/provider-edit', function (hooks) {
         @mode="create"
       />`);
 
-    assert.dom(`[${ts}-header]`).hasText('Create Provider', 'Page header renders');
+    assert.dom(GENERAL.hdsPageHeaderTitle).hasText('Create Provider', 'Page header renders');
     assert.dom(`[${ts}-config-title]`).exists('Config header shown in create mode');
     assert.dom(`[${ts}-creds-title]`).doesNotExist('New credentials header hidden in create mode');
 
@@ -256,7 +257,7 @@ module('Integration | Component | keymgmt/provider-edit', function (hooks) {
         @mode="edit"
       />`);
 
-    assert.dom(`[${ts}-header]`).hasText('Update Credentials', 'Page header renders');
+    assert.dom(GENERAL.hdsPageHeaderTitle).hasText('Update Credentials', 'Page header renders');
     assert.dom(`[${ts}-config-title]`).doesNotExist('Config header hidden in edit mode');
     assert.dom(`[${ts}-creds-title]`).exists('New credentials header shown in edit mode');
 
diff --git a/ui/tests/integration/components/mfa-login-enforcement-header-test.js b/ui/tests/integration/components/mfa-login-enforcement-header-test.js
index ffceab90ae..a289c36e2a 100644
--- a/ui/tests/integration/components/mfa-login-enforcement-header-test.js
+++ b/ui/tests/integration/components/mfa-login-enforcement-header-test.js
@@ -10,6 +10,7 @@ import { hbs } from 'ember-cli-htmlbars';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import { clickTrigger } from 'ember-power-select/test-support/helpers';
 import { setRunOptions } from 'ember-a11y-testing/test-support';
+import { GENERAL } from 'vault/tests/helpers/general-selectors';
 
 module('Integration | Component | mfa-login-enforcement-header', function (hooks) {
   setupRenderingTest(hooks);
@@ -31,10 +32,10 @@ module('Integration | Component | mfa-login-enforcement-header', function (hooks
   test('it renders heading', async function (assert) {
     await render(hbs`<Mfa::MfaLoginEnforcementHeader @heading="New enforcement" />`);
 
-    assert.dom('[data-test-mleh-title]').includesText('New enforcement');
-    assert.dom('[data-test-mleh-title] svg').hasClass('hds-icon-lock', 'Lock icon renders');
+    assert.dom(GENERAL.hdsPageHeaderTitle).includesText('New enforcement');
+    assert.dom(GENERAL.icon('lock')).hasClass('hds-icon-lock', 'Lock icon renders');
     assert
-      .dom('[data-test-mleh-description]')
+      .dom(GENERAL.hdsPageHeaderDescription)
       .includesText('An enforcement will define which auth types', 'Description renders');
     assert.dom('[data-test-mleh-radio]').doesNotExist('Radio cards are hidden when not inline display mode');
     assert
@@ -66,9 +67,9 @@ module('Integration | Component | mfa-login-enforcement-header', function (hooks
       />
     `);
 
-    assert.dom('[data-test-mleh-title]').includesText('Enforcement');
+    assert.dom(GENERAL.hdsPageHeaderTitle).includesText('Enforcement');
     assert
-      .dom('[data-test-mleh-description]')
+      .dom(GENERAL.hdsPageHeaderDescription)
       .includesText('An enforcement includes the authentication types', 'Description renders');
     for (const option of ['new', 'existing', 'skip']) {
       await click(`[data-test-mleh-radio="${option}"] input`);
diff --git a/ui/tests/integration/components/mount-backend-form-test.js b/ui/tests/integration/components/mount-backend-form-test.js
index 6bc07a0d63..8c7b25abf9 100644
--- a/ui/tests/integration/components/mount-backend-form-test.js
+++ b/ui/tests/integration/components/mount-backend-form-test.js
@@ -44,7 +44,7 @@ module('Integration | Component | mount backend form', function (hooks) {
         hbs`<MountBackendForm @mountModel={{this.model}} @onMountSuccess={{this.onMountSuccess}} />`
       );
       assert
-        .dom(GENERAL.title)
+        .dom(GENERAL.hdsPageHeaderTitle)
         .hasText('Enable an Authentication Method', 'renders auth header in default state');
 
       for (const method of filterEnginesByMountCategory({
diff --git a/ui/tests/integration/components/oidc/client-form-test.js b/ui/tests/integration/components/oidc/client-form-test.js
index b689f242a5..ee7fe62c26 100644
--- a/ui/tests/integration/components/oidc/client-form-test.js
+++ b/ui/tests/integration/components/oidc/client-form-test.js
@@ -83,9 +83,7 @@ module('Integration | Component | oidc/client-form', function (hooks) {
       />
     `);
     await click(GENERAL.button('More options'));
-    assert
-      .dom('[data-test-oidc-client-title]')
-      .hasText('Create Application', 'Form title renders correct text');
+    assert.dom(GENERAL.hdsPageHeaderTitle).hasText('Create Application', 'Form title renders correct text');
     assert.dom(SELECTORS.clientSaveButton).hasText('Create', 'Save button has correct text');
     assert.strictEqual(findAll('[data-test-field]').length, 6, 'renders all attribute fields');
     assert
@@ -150,7 +148,7 @@ module('Integration | Component | oidc/client-form', function (hooks) {
       />
     `);
     await click(GENERAL.button('More options'));
-    assert.dom('[data-test-oidc-client-title]').hasText('Edit Application', 'Title renders correct text');
+    assert.dom(GENERAL.hdsPageHeaderTitle).hasText('Edit Application', 'Title renders correct text');
     assert.dom(SELECTORS.clientSaveButton).hasText('Update', 'Save button has correct text');
     assert.dom('[data-test-input="name"]').isDisabled('Name input is disabled when editing');
     assert.dom('[data-test-input="name"]').hasValue('test-app', 'Name input is populated with model value');
diff --git a/ui/tests/integration/components/oidc/provider-form-test.js b/ui/tests/integration/components/oidc/provider-form-test.js
index 14b4f55e77..61b1bbe88d 100644
--- a/ui/tests/integration/components/oidc/provider-form-test.js
+++ b/ui/tests/integration/components/oidc/provider-form-test.js
@@ -67,9 +67,7 @@ module('Integration | Component | oidc/provider-form', function (hooks) {
     />
     `);
 
-    assert
-      .dom('[data-test-oidc-provider-title]')
-      .hasText('Create Provider', 'Form title renders correct text');
+    assert.dom(GENERAL.hdsPageHeaderTitle).hasText('Create Provider', 'Form title renders correct text');
     assert.dom(SELECTORS.providerSaveButton).hasText('Create', 'Save button has correct text');
     assert
       .dom('[data-test-input="issuer"]')
@@ -133,7 +131,7 @@ module('Integration | Component | oidc/provider-form', function (hooks) {
       />
     `);
 
-    assert.dom('[data-test-oidc-provider-title]').hasText('Edit Provider', 'Title renders correct text');
+    assert.dom(GENERAL.hdsPageHeaderTitle).hasText('Edit Provider', 'Title renders correct text');
     assert.dom(SELECTORS.providerSaveButton).hasText('Update', 'Save button has correct text');
     assert.dom('[data-test-input="name"]').isDisabled('Name input is disabled when editing');
     assert
diff --git a/ui/tests/integration/components/oidc/scope-form-test.js b/ui/tests/integration/components/oidc/scope-form-test.js
index 0569b061aa..5e984df0ec 100644
--- a/ui/tests/integration/components/oidc/scope-form-test.js
+++ b/ui/tests/integration/components/oidc/scope-form-test.js
@@ -39,7 +39,7 @@ module('Integration | Component | oidc/scope-form', function (hooks) {
       />
     `);
 
-    assert.dom('[data-test-oidc-scope-title]').hasText('Create Scope', 'Form title renders');
+    assert.dom(GENERAL.hdsPageHeaderTitle).hasText('Create Scope', 'Form title renders');
     assert.dom(SELECTORS.scopeSaveButton).hasText('Create', 'Save button has correct label');
     await click(SELECTORS.scopeSaveButton);
 
@@ -88,7 +88,7 @@ module('Integration | Component | oidc/scope-form', function (hooks) {
       />
     `);
 
-    assert.dom('[data-test-oidc-scope-title]').hasText('Edit Scope', 'Form title renders');
+    assert.dom(GENERAL.hdsPageHeaderTitle).hasText('Edit Scope', 'Form title renders');
     assert.dom(SELECTORS.scopeSaveButton).hasText('Update', 'Save button has correct label');
     assert.dom(GENERAL.inputByAttr('name')).isDisabled('Name input is disabled when editing');
     assert.dom(GENERAL.inputByAttr('name')).hasValue('test', 'Name input is populated with model value');
diff --git a/ui/tests/integration/components/totp/key-form-test.js b/ui/tests/integration/components/totp/key-form-test.js
index 3a4af7d910..0ac788caf5 100644
--- a/ui/tests/integration/components/totp/key-form-test.js
+++ b/ui/tests/integration/components/totp/key-form-test.js
@@ -52,7 +52,7 @@ module('Integration | Component | totp/key-form', function (hooks) {
     />
     `);
 
-    assert.dom('[data-test-secret-header]').hasText('Create a TOTP key', 'Form title renders');
+    assert.dom(GENERAL.hdsPageHeaderTitle).hasText('Create a TOTP key', 'Form title renders');
 
     // check validation errors
     await click(GENERAL.submitButton);
@@ -110,7 +110,7 @@ module('Integration | Component | totp/key-form', function (hooks) {
     />
     `);
 
-    assert.dom('[data-test-secret-header]').hasText('Create a TOTP key', 'Form title renders');
+    assert.dom(GENERAL.hdsPageHeaderTitle).hasText('Create a TOTP key', 'Form title renders');
 
     // switch to non-generated form fields
     await click(GENERAL.radioByAttr('Other service'));