diff --git a/ui/lib/kmip/addon/components/header-credentials.hbs b/ui/lib/kmip/addon/components/header-credentials.hbs
index 0bbf43d606..e8762624cf 100644
--- a/ui/lib/kmip/addon/components/header-credentials.hbs
+++ b/ui/lib/kmip/addon/components/header-credentials.hbs
@@ -3,16 +3,12 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.top>
+<Page::Header @title={{@role}}>
+  <:breadcrumbs>
     <KmipBreadcrumb @scope={{@scope}} @currentRoute={{@role}} />
-  </p.top>
-  <p.levelLeft>
-    <h1 class="title is-3">
-      {{@role}}
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+  </:breadcrumbs>
+</Page::Header>
+
 <div class="tabs-container box is-sideless is-fullwidth is-paddingless is-marginless">
   <nav class="tabs">
     <ul>
diff --git a/ui/lib/kmip/addon/components/header-scope.hbs b/ui/lib/kmip/addon/components/header-scope.hbs
index 2e7a6a4f56..b0551afb21 100644
--- a/ui/lib/kmip/addon/components/header-scope.hbs
+++ b/ui/lib/kmip/addon/components/header-scope.hbs
@@ -3,17 +3,12 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.top>
+<Page::Header @title={{this.secretMountPath.currentPath}} @icon="lock">
+  <:breadcrumbs>
     <KmipBreadcrumb @currentRoute={{this.secretMountPath.currentPath}} />
-  </p.top>
-  <p.levelLeft>
-    <h1 class="title is-3">
-      <Icon @name="lock" @size="24" class="has-text-grey-light" />
-      {{this.secretMountPath.currentPath}}
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+  </:breadcrumbs>
+</Page::Header>
+
 <div class="tabs-container box is-sideless is-fullwidth is-paddingless is-marginless">
   <nav class="tabs">
     <ul>
diff --git a/ui/lib/kmip/addon/templates/configure.hbs b/ui/lib/kmip/addon/templates/configure.hbs
index 99a257a281..2173adaa71 100644
--- a/ui/lib/kmip/addon/templates/configure.hbs
+++ b/ui/lib/kmip/addon/templates/configure.hbs
@@ -3,17 +3,12 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.top>
+<Page::Header @title="Configure KMIP Secrets Engine" @icon="lock">
+  <:breadcrumbs>
     <KmipBreadcrumb @showPath={{true}} @currentRoute="Configure" />
-  </p.top>
-  <p.levelLeft>
-    <h1 class="title is-3">
-      <Icon @name="lock" @size="24" class="has-text-grey-light" />
-      Configure KMIP Secrets Engine
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+  </:breadcrumbs>
+</Page::Header>
+
 <EditForm
   @model={{this.model}}
   @onSave={{transition-to "vault.cluster.secrets.backend.kmip.configuration"}}
diff --git a/ui/lib/kmip/addon/templates/credentials/generate.hbs b/ui/lib/kmip/addon/templates/credentials/generate.hbs
index f5c917d191..0e20aa8f2c 100644
--- a/ui/lib/kmip/addon/templates/credentials/generate.hbs
+++ b/ui/lib/kmip/addon/templates/credentials/generate.hbs
@@ -3,16 +3,11 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.top>
+<Page::Header @title="Generate Credentials">
+  <:breadcrumbs>
     <KmipBreadcrumb @scope={{this.scope}} @role={{this.role}} @currentRoute="Generate Credentials" />
-  </p.top>
-  <p.levelLeft>
-    <h1 class="title is-3">
-      Generate Credentials
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+  </:breadcrumbs>
+</Page::Header>
 
 {{! this.model is the ember data model kmip/credential }}
 <Page::CredentialsGenerate @credentials={{this.model}} />
\ No newline at end of file
diff --git a/ui/lib/kmip/addon/templates/credentials/show.hbs b/ui/lib/kmip/addon/templates/credentials/show.hbs
index d0bf6390f9..928b5f13eb 100644
--- a/ui/lib/kmip/addon/templates/credentials/show.hbs
+++ b/ui/lib/kmip/addon/templates/credentials/show.hbs
@@ -3,15 +3,10 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.top>
+<Page::Header @title="Credentials">
+  <:breadcrumbs>
     <KmipBreadcrumb @scope={{this.scope}} @role={{this.role}} @currentRoute="Credentials" />
-  </p.top>
-  <p.levelLeft>
-    <h1 class="title is-3">
-      Credentials
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+  </:breadcrumbs>
+</Page::Header>
 
 <DetailsCredentials @credentials={{this.model}} @onRevokeCredentials={{this.revokeCredentials}} />
\ No newline at end of file
diff --git a/ui/lib/kmip/addon/templates/role/edit.hbs b/ui/lib/kmip/addon/templates/role/edit.hbs
index 695d34b669..25c0f50c72 100644
--- a/ui/lib/kmip/addon/templates/role/edit.hbs
+++ b/ui/lib/kmip/addon/templates/role/edit.hbs
@@ -3,16 +3,11 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.top>
+<Page::Header @title="Edit Role">
+  <:breadcrumbs>
     <KmipBreadcrumb @scope={{this.scope}} @role={{this.role}} @currentRoute="Edit Role" />
-  </p.top>
-  <p.levelLeft>
-    <h1 class="title is-3">
-      Edit Role
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+  </:breadcrumbs>
+</Page::Header>
 
 <Kmip::RoleForm
   @model={{this.model}}
diff --git a/ui/lib/kmip/addon/templates/scope/roles.hbs b/ui/lib/kmip/addon/templates/scope/roles.hbs
index ca7960c59f..cf862d4b08 100644
--- a/ui/lib/kmip/addon/templates/scope/roles.hbs
+++ b/ui/lib/kmip/addon/templates/scope/roles.hbs
@@ -3,16 +3,12 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.top>
+<Page::Header @title={{this.scope}}>
+  <:breadcrumbs>
     <KmipBreadcrumb @showPath={{true}} @currentRoute={{this.scope}} />
-  </p.top>
-  <p.levelLeft>
-    <h1 class="title is-3">
-      {{this.scope}}
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+  </:breadcrumbs>
+</Page::Header>
+
 <Toolbar>
   {{#if this.model.meta.total}}
     <ToolbarFilters>
diff --git a/ui/lib/kmip/addon/templates/scope/roles/create.hbs b/ui/lib/kmip/addon/templates/scope/roles/create.hbs
index 6b74d067d3..fb03a9abf6 100644
--- a/ui/lib/kmip/addon/templates/scope/roles/create.hbs
+++ b/ui/lib/kmip/addon/templates/scope/roles/create.hbs
@@ -3,16 +3,11 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.top>
+<Page::Header @title="Create a Role">
+  <:breadcrumbs>
     <KmipBreadcrumb @scope={{this.scope}} @currentRoute="Create Role" />
-  </p.top>
-  <p.levelLeft>
-    <h1 class="title is-3">
-      Create a Role
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+  </:breadcrumbs>
+</Page::Header>
 
 <Kmip::RoleForm
   @model={{this.model}}
diff --git a/ui/lib/kmip/addon/templates/scopes/create.hbs b/ui/lib/kmip/addon/templates/scopes/create.hbs
index 0d50a66694..adc2c2069a 100644
--- a/ui/lib/kmip/addon/templates/scopes/create.hbs
+++ b/ui/lib/kmip/addon/templates/scopes/create.hbs
@@ -3,16 +3,12 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.top>
+<Page::Header @title="Create a Scope">
+  <:breadcrumbs>
     <KmipBreadcrumb @showPath={{true}} @currentRoute="Create Scope" />
-  </p.top>
-  <p.levelLeft>
-    <h1 class="title is-3">
-      Create a Scope
-    </h1>
-  </p.levelLeft>
-</PageHeader>
+  </:breadcrumbs>
+</Page::Header>
+
 <EditForm
   @model={{this.model}}
   @onSave={{transition-to "vault.cluster.secrets.backend.kmip.scopes.index"}}