diff --git a/changelog/23166.txt b/changelog/23166.txt
new file mode 100644
index 0000000000..c337767924
--- /dev/null
+++ b/changelog/23166.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Update pki mount configuration details to match the new mount configuration details pattern
+```
diff --git a/ui/lib/pki/addon/components/page/pki-configuration-details.hbs b/ui/lib/pki/addon/components/page/pki-configuration-details.hbs
index 2e30ebda31..60ea1118a6 100644
--- a/ui/lib/pki/addon/components/page/pki-configuration-details.hbs
+++ b/ui/lib/pki/addon/components/page/pki-configuration-details.hbs
@@ -105,31 +105,9 @@
       <InfoTableRow @label="Unified CRL on existing paths" @value={{@crl.unifiedCrlOnExistingPaths}} />
     {{/if}}
   {{/if}}
-{{else}}
-  <Toolbar>
-    <ToolbarActions>
-      <ToolbarLink @route="configuration.create" data-test-configure-pki-button>
-        Configure
-      </ToolbarLink>
-    </ToolbarActions>
-  </Toolbar>
 {{/if}}
 
-<h2
-  class="title is-4 has-bottom-margin-xs has-border-bottom-light has-bottom-padding-s
-    {{if (or @hasConfig (and (eq @crl 403) (eq @urls 403))) 'has-top-margin-xl' 'has-top-margin-m'}}"
->
-  Mount Configuration
-</h2>
-<InfoTableRow @label="Secret engine type" @value={{@mountConfig.engineType}} />
-<InfoTableRow @label="Path" @value={{@mountConfig.path}} />
-<InfoTableRow @label="Accessor" @value={{@mountConfig.accessor}} />
-<InfoTableRow @label="Local" @value={{@mountConfig.local}} />
-<InfoTableRow @label="Seal wrap" @value={{@mountConfig.sealWrap}} />
-<InfoTableRow @label="Default lease TTL" @value={{@mountConfig.config.defaultLeaseTtl}} />
-<InfoTableRow @label="Max lease TTL" @value={{@mountConfig.config.maxLeaseTtl}} />
-<InfoTableRow @label="Allowed managed keys" @value={{or @mountConfig.config.allowedManagedKeys "None"}} />
-<div class="has-top-margin-l"></div>
+<div class="has-top-margin-m"></div>
 
 {{#if this.showDeleteAllIssuers}}
   <ConfirmationModal
diff --git a/ui/lib/pki/addon/routes/configuration/index.js b/ui/lib/pki/addon/routes/configuration/index.js
index 93ec7db87b..2538d27781 100644
--- a/ui/lib/pki/addon/routes/configuration/index.js
+++ b/ui/lib/pki/addon/routes/configuration/index.js
@@ -7,6 +7,7 @@ import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 import { withConfig } from 'pki/decorators/check-issuers';
 import { hash } from 'rsvp';
+import { PKI_DEFAULT_EMPTY_STATE_MSG } from 'pki/routes/overview';
 
 @withConfig()
 export default class ConfigurationIndexRoute extends Route {
@@ -32,4 +33,10 @@ export default class ConfigurationIndexRoute extends Route {
       issuerModel: this.store.createRecord('pki/issuer'),
     });
   }
+
+  setupController(controller, resolvedModel) {
+    super.setupController(controller, resolvedModel);
+
+    controller.notConfiguredMessage = PKI_DEFAULT_EMPTY_STATE_MSG;
+  }
 }
diff --git a/ui/lib/pki/addon/templates/configuration/index.hbs b/ui/lib/pki/addon/templates/configuration/index.hbs
index 13a0da08e0..c2261e7a03 100644
--- a/ui/lib/pki/addon/templates/configuration/index.hbs
+++ b/ui/lib/pki/addon/templates/configuration/index.hbs
@@ -5,13 +5,33 @@
 
 <PkiPageHeader @backend={{this.model.engine}} />
 
-<Page::PkiConfigurationDetails
-  @acme={{this.model.acme}}
-  @cluster={{this.model.cluster}}
-  @urls={{this.model.urls}}
-  @crl={{this.model.crl}}
-  @mountConfig={{this.model.mountConfig}}
-  @backend={{this.model.engine.id}}
-  @canDeleteAllIssuers={{this.model.issuerModel.canDeleteAllIssuers}}
-  @hasConfig={{this.model.hasConfig}}
+{{#if this.model.hasConfig}}
+  <Page::PkiConfigurationDetails
+    @acme={{this.model.acme}}
+    @cluster={{this.model.cluster}}
+    @urls={{this.model.urls}}
+    @crl={{this.model.crl}}
+    @backend={{this.model.engine.id}}
+    @canDeleteAllIssuers={{this.model.issuerModel.canDeleteAllIssuers}}
+    @hasConfig={{this.model.hasConfig}}
+  />
+{{else}}
+  <Toolbar>
+    <ToolbarActions>
+      <ToolbarLink @route="configuration.create" data-test-configure-pki-button>
+        Configure
+      </ToolbarLink>
+    </ToolbarActions>
+  </Toolbar>
+  <EmptyState @title="PKI not configured" @message={{this.notConfiguredMessage}}>
+    <LinkTo @route="configuration.create">
+      Configure PKI
+    </LinkTo>
+  </EmptyState>
+{{/if}}
+
+<SecretsEngineMountConfig
+  @model={{this.model.mountConfig}}
+  class="has-top-margin-m has-bottom-margin-xl"
+  data-test-mount-config
 />
\ No newline at end of file
diff --git a/ui/tests/integration/components/pki/page/pki-configuration-details-test.js b/ui/tests/integration/components/pki/page/pki-configuration-details-test.js
index a1eb817594..3ee97db4c5 100644
--- a/ui/tests/integration/components/pki/page/pki-configuration-details-test.js
+++ b/ui/tests/integration/components/pki/page/pki-configuration-details-test.js
@@ -46,26 +46,12 @@ module('Integration | Component | Page::PkiConfigurationDetails', function (hook
       unifiedCrl: true,
       unifiedCrlOnExistingPaths: true,
     });
-    this.mountConfig = {
-      id: 'pki-test',
-      engineType: 'pki',
-      path: '/pki-test',
-      accessor: 'pki_33345b0d',
-      local: false,
-      sealWrap: true,
-      config: this.store.createRecord('mount-config', {
-        defaultLease: '12h',
-        maxLeaseTtl: '400h',
-        allowedManagedKeys: true,
-      }),
-    };
   });
 
   test('shows the correct information on cluster config', async function (assert) {
     await render(hbs`<Page::PkiConfigurationDetails @cluster={{this.cluster}} @hasConfig={{true}} />,`, {
       owner: this.engine,
     });
-
     assert
       .dom(SELECTORS.rowValue("Mount's API path"))
       .hasText('https://pr-a.vault.example.com/v1/ns1/pki-root', 'mount API path row renders');
@@ -74,7 +60,7 @@ module('Integration | Component | Page::PkiConfigurationDetails', function (hook
 
   test('shows the correct information on global urls section', async function (assert) {
     await render(
-      hbs`<Page::PkiConfigurationDetails @urls={{this.urls}} @crl={{this.crl}} @mountConfig={{this.mountConfig}} @hasConfig={{true}} />,`,
+      hbs`<Page::PkiConfigurationDetails @urls={{this.urls}} @crl={{this.crl}} @hasConfig={{true}} />,`,
       { owner: this.engine }
     );
 
@@ -86,7 +72,7 @@ module('Integration | Component | Page::PkiConfigurationDetails', function (hook
       .hasText('example.com', 'issuing certificate value renders');
     this.urls.issuingCertificates = null;
     await render(
-      hbs`<Page::PkiConfigurationDetails @urls={{this.urls}} @crl={{this.crl}} @mountConfig={{this.mountConfig}} @hasConfig={{true}} />,`,
+      hbs`<Page::PkiConfigurationDetails @urls={{this.urls}} @crl={{this.crl}} @hasConfig={{true}} />,`,
       { owner: this.engine }
     );
     assert
@@ -102,7 +88,7 @@ module('Integration | Component | Page::PkiConfigurationDetails', function (hook
 
   test('shows the correct information on crl section', async function (assert) {
     await render(
-      hbs`<Page::PkiConfigurationDetails @urls={{this.urls}} @crl={{this.crl}} @mountConfig={{this.mountConfig}} @hasConfig={{true}} />,`,
+      hbs`<Page::PkiConfigurationDetails @urls={{this.urls}} @crl={{this.crl}} @hasConfig={{true}} />,`,
       { owner: this.engine }
     );
 
@@ -128,7 +114,7 @@ module('Integration | Component | Page::PkiConfigurationDetails', function (hook
     this.crl.autoRebuild = false;
     this.crl.enableDelta = false;
     await render(
-      hbs`<Page::PkiConfigurationDetails @urls={{this.urls}} @crl={{this.crl}} @mountConfig={{this.mountConfig}} @hasConfig={{true}} />,`,
+      hbs`<Page::PkiConfigurationDetails @urls={{this.urls}} @crl={{this.crl}} @hasConfig={{true}} />,`,
       { owner: this.engine }
     );
     assert.dom(SELECTORS.rowValue('Auto-rebuild')).hasText('Off', 'it renders falsy auto build');
@@ -148,7 +134,7 @@ module('Integration | Component | Page::PkiConfigurationDetails', function (hook
     this.crl.disable = true;
     this.crl.ocspDisable = true;
     await render(
-      hbs`<Page::PkiConfigurationDetails @urls={{this.urls}} @crl={{this.crl}} @mountConfig={{this.mountConfig}} @hasConfig={{true}} />,`,
+      hbs`<Page::PkiConfigurationDetails @urls={{this.urls}} @crl={{this.crl}} @hasConfig={{true}} />,`,
       { owner: this.engine }
     );
     assert.dom(SELECTORS.rowValue('CRL building')).hasText('Disabled', 'disabled renders');
@@ -167,7 +153,7 @@ module('Integration | Component | Page::PkiConfigurationDetails', function (hook
     this.version = this.owner.lookup('service:version');
     this.version.version = '1.13.1+ent';
     await render(
-      hbs`<Page::PkiConfigurationDetails @urls={{this.urls}} @crl={{this.crl}} @mountConfig={{this.mountConfig}} @hasConfig={{true}} />,`,
+      hbs`<Page::PkiConfigurationDetails @urls={{this.urls}} @crl={{this.crl}} @hasConfig={{true}} />,`,
       { owner: this.engine }
     );
     assert.dom(SELECTORS.rowValue('Cross-cluster revocation')).hasText('Yes');
@@ -182,74 +168,11 @@ module('Integration | Component | Page::PkiConfigurationDetails', function (hook
     this.version = this.owner.lookup('service:version');
     this.version.version = '1.13.1';
     await render(
-      hbs`<Page::PkiConfigurationDetails @urls={{this.urls}} @crl={{this.crl}} @mountConfig={{this.mountConfig}} @hasConfig={{true}} />,`,
+      hbs`<Page::PkiConfigurationDetails @urls={{this.urls}} @crl={{this.crl}} @hasConfig={{true}} />,`,
       { owner: this.engine }
     );
     assert.dom(SELECTORS.rowValue('Cross-cluster revocation')).doesNotExist();
     assert.dom(SELECTORS.rowValue('Unified CRL')).doesNotExist();
     assert.dom(SELECTORS.rowValue('Unified CRL on existing paths')).doesNotExist();
   });
-
-  test('shows the correct information on mount configuration section', async function (assert) {
-    await render(
-      hbs`<Page::PkiConfigurationDetails @urls={{this.urls}} @crl={{this.crl}} @mountConfig={{this.mountConfig}} @hasConfig={{true}} />,`,
-      { owner: this.engine }
-    );
-
-    assert
-      .dom(SELECTORS.rowLabel('Secret engine type'))
-      .hasText('Secret engine type', 'engine type row label renders');
-    assert.dom(SELECTORS.rowValue('Secret engine type')).hasText('pki', 'engine type row value renders');
-    assert.dom(SELECTORS.rowLabel('Path')).hasText('Path', 'path row label renders');
-    assert.dom(SELECTORS.rowValue('Path')).hasText('/pki-test', 'path row value renders');
-    assert.dom(SELECTORS.rowLabel('Accessor')).hasText('Accessor', 'accessor row label renders');
-    assert.dom(SELECTORS.rowValue('Accessor')).hasText('pki_33345b0d', 'accessor row value renders');
-    assert.dom(SELECTORS.rowLabel('Local')).hasText('Local', 'local row label renders');
-    assert.dom(SELECTORS.rowValue('Local')).hasText('No', 'local row value renders');
-    assert.dom(SELECTORS.rowLabel('Seal wrap')).hasText('Seal wrap', 'seal wrap row label renders');
-    assert
-      .dom(SELECTORS.rowValue('Seal wrap'))
-      .hasText('Yes', 'seal wrap row value renders Yes if sealWrap is true');
-    assert.dom(SELECTORS.rowLabel('Max lease TTL')).hasText('Max lease TTL', 'max lease label renders');
-    assert.dom(SELECTORS.rowValue('Max lease TTL')).hasText('400h', 'max lease value renders');
-    assert
-      .dom(SELECTORS.rowLabel('Allowed managed keys'))
-      .hasText('Allowed managed keys', 'allowed managed keys label renders');
-    assert
-      .dom(SELECTORS.rowValue('Allowed managed keys'))
-      .hasText('Yes', 'allowed managed keys value renders');
-  });
-
-  test('shows mount configuration when hasConfig is false', async function (assert) {
-    this.urls = 403;
-    this.crl = 403;
-
-    await render(
-      hbs`<Page::PkiConfigurationDetails @mountConfig={{this.mountConfig}} @hasConfig={{false}} />,`,
-      { owner: this.engine }
-    );
-
-    assert
-      .dom(SELECTORS.rowLabel('Secret engine type'))
-      .hasText('Secret engine type', 'engine type row label renders');
-    assert.dom(SELECTORS.rowValue('Secret engine type')).hasText('pki', 'engine type row value renders');
-    assert.dom(SELECTORS.rowLabel('Path')).hasText('Path', 'path row label renders');
-    assert.dom(SELECTORS.rowValue('Path')).hasText('/pki-test', 'path row value renders');
-    assert.dom(SELECTORS.rowLabel('Accessor')).hasText('Accessor', 'accessor row label renders');
-    assert.dom(SELECTORS.rowValue('Accessor')).hasText('pki_33345b0d', 'accessor row value renders');
-    assert.dom(SELECTORS.rowLabel('Local')).hasText('Local', 'local row label renders');
-    assert.dom(SELECTORS.rowValue('Local')).hasText('No', 'local row value renders');
-    assert.dom(SELECTORS.rowLabel('Seal wrap')).hasText('Seal wrap', 'seal wrap row label renders');
-    assert
-      .dom(SELECTORS.rowValue('Seal wrap'))
-      .hasText('Yes', 'seal wrap row value renders Yes if sealWrap is true');
-    assert.dom(SELECTORS.rowLabel('Max lease TTL')).hasText('Max lease TTL', 'max lease label renders');
-    assert.dom(SELECTORS.rowValue('Max lease TTL')).hasText('400h', 'max lease value renders');
-    assert
-      .dom(SELECTORS.rowLabel('Allowed managed keys'))
-      .hasText('Allowed managed keys', 'allowed managed keys label renders');
-    assert
-      .dom(SELECTORS.rowValue('Allowed managed keys'))
-      .hasText('Yes', 'allowed managed keys value renders');
-  });
 });