diff --git a/ui/app/components/secret-engine/configurable-secret-engine-details.hbs b/ui/app/components/secret-engine/configurable-secret-engine-details.hbs
new file mode 100644
index 000000000000..ececc24c2d42
--- /dev/null
+++ b/ui/app/components/secret-engine/configurable-secret-engine-details.hbs
@@ -0,0 +1,40 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+~}}
+
+{{#if this.configError}}
+  <EmptyState data-test-config-error={{@model.id}} @title="Something went wrong" @message={{this.configError}} />
+{{else if this.configModel}}
+  {{#each this.configModel.attrs as |attr|}}
+    {{#if attr.options.sensitive}}
+      <InfoTableRow
+        alwaysRender={{(not (is-empty-value (get @model attr.name)))}}
+        @label={{or attr.options.label (to-label attr.name)}}
+        @value={{get this.configModel (or attr.options.fieldValue attr.name)}}
+      >
+        <MaskedInput @value={{get @model attr.name}} @name={{attr.name}} @displayOnly={{true}} @allowCopy={{true}} />
+      </InfoTableRow>
+    {{else}}
+      <InfoTableRow
+        @alwaysRender={{(not (is-empty-value (get @model attr.name)))}}
+        @label={{or attr.options.label (to-label attr.name)}}
+        @value={{get this.configModel (or attr.options.fieldValue attr.name)}}
+      />
+    {{/if}}
+  {{/each}}
+{{else}}
+  <EmptyState
+    data-test-config-cta
+    @title="{{this.typeDisplay}} not configured"
+    @message="Get started by setting up the connection with your existing {{this.typeDisplay}} account."
+  >
+    <Hds::Link::Standalone
+      @icon="chevron-right"
+      @iconPosition="trailing"
+      @text="Configure {{this.typeDisplay}}"
+      @route="vault.cluster.settings.configure-secret-backend"
+      @model={{@model.id}}
+    />
+  </EmptyState>
+{{/if}}
\ No newline at end of file
diff --git a/ui/app/components/secret-engine/configurable-secret-engine-details.js b/ui/app/components/secret-engine/configurable-secret-engine-details.js
new file mode 100644
index 000000000000..81b7bf2ed43b
--- /dev/null
+++ b/ui/app/components/secret-engine/configurable-secret-engine-details.js
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import errorMessage from 'vault/utils/error-message';
+import { tracked } from '@glimmer/tracking';
+// ARG TODO add documentation
+export default class ConfigurableSecretEngineDetails extends Component {
+  @service store;
+  @tracked configModel = null;
+  @tracked configError = null;
+
+  constructor() {
+    super(...arguments);
+    const { model } = this.args;
+    // Currently two secret engines that return configuration data and that can be configured by the user on the ui: aws, and ssh.
+    if (model.type === 'aws') {
+      this.fetchAwsRootConfig(model.id);
+    }
+    if (model.type === 'ssh') {
+      this.fetchSshCaConfig(model.id);
+    }
+  }
+
+  async fetchAwsRootConfig(backend) {
+    try {
+      this.configModel = await this.store.queryRecord('aws/root-config', { backend });
+    } catch (e) {
+      this.configError = errorMessage(e);
+    }
+  }
+
+  async fetchSshCaConfig(backend) {
+    try {
+      this.configModel = await this.store.queryRecord('ssh/ca-config', { backend });
+    } catch (e) {
+      this.configError = errorMessage(e);
+    }
+  }
+
+  get typeDisplay() {
+    // TODO will eventually handle GCP and Azure.
+    // Did not use capitalize helper because some are all caps and some only title case.
+    const { type } = this.args.model;
+    switch (type) {
+      case 'aws':
+        return 'AWS';
+      case 'ssh':
+        return 'SSH';
+      default:
+        return type;
+    }
+  }
+}
diff --git a/ui/app/routes/vault/cluster/secrets/backend/configuration.js b/ui/app/routes/vault/cluster/secrets/backend/configuration.js
index c58bfa763c5a..a6476091e1b2 100644
--- a/ui/app/routes/vault/cluster/secrets/backend/configuration.js
+++ b/ui/app/routes/vault/cluster/secrets/backend/configuration.js
@@ -5,39 +5,12 @@
 
 import { service } from '@ember/service';
 import Route from '@ember/routing/route';
-import errorMessage from 'vault/utils/error-message';
 
 export default class SecretsBackendConfigurationRoute extends Route {
   @service store;
-  @service secretMountPath;
-
-  async fetchAwsRootConfig(backend) {
-    return await this.store.queryRecord('aws/root-config', { backend });
-  }
-
-  async fetchSshCaConfig(backend) {
-    return await this.store.queryRecord('ssh/ca-config', { backend });
-  }
 
   async model() {
     const backend = this.modelFor('vault.cluster.secrets.backend');
-    backend.configModel = null; // reset the config model
-    backend.configError = null; // reset the config error
-    // Currently two secret engines that return configuration data and that can be configured by the user on the ui: aws, and ssh.
-    if (backend.type === 'aws') {
-      try {
-        backend.configModel = await this.fetchAwsRootConfig(backend.id);
-      } catch (e) {
-        backend.configError = errorMessage(e);
-      }
-    }
-    if (backend.type === 'ssh') {
-      try {
-        backend.configModel = await this.fetchSshCaConfig(backend.id);
-      } catch (e) {
-        backend.configError = backend.configError = errorMessage(e);
-      }
-    }
     if (backend.isV2KV) {
       const canRead = this.store.findRecord('capabilities', `${backend.id}/config`).canRead;
       // only set these config params if they can read the config endpoint.
diff --git a/ui/app/templates/vault/cluster/secrets/backend/configuration.hbs b/ui/app/templates/vault/cluster/secrets/backend/configuration.hbs
index b0efdb65daa4..33bf815f3284 100644
--- a/ui/app/templates/vault/cluster/secrets/backend/configuration.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/configuration.hbs
@@ -28,43 +28,7 @@
     </ToolbarActions>
   </Toolbar>
 
-  {{! ARG TODO when in component handle the return of the title display }}
-  {{#if this.model.configError}}
-    <EmptyState data-test-config-error @title="Something went wrong" @message={{this.model.configError}} />
-  {{else if this.model.configModel}}
-    {{! display configured fields }}
-    {{#each this.model.configModel.attrs as |attr|}}
-      {{#if attr.options.sensitive}}
-        <InfoTableRow
-          alwaysRender={{(not (is-empty-value (get this.model attr.name)))}}
-          @label={{or attr.options.label (to-label attr.name)}}
-          @value={{get this.model.configModel (or attr.options.fieldValue attr.name)}}
-        >
-          <MaskedInput @value={{get this.model attr.name}} @name={{attr.name}} @displayOnly={{true}} @allowCopy={{true}} />
-        </InfoTableRow>
-      {{else}}
-        <InfoTableRow
-          @alwaysRender={{(not (is-empty-value (get this.model attr.name)))}}
-          @label={{or attr.options.label (to-label attr.name)}}
-          @value={{get this.model.configModel (or attr.options.fieldValue attr.name)}}
-        />
-      {{/if}}
-    {{/each}}
-  {{else}}
-    <EmptyState
-      data-test-config-cta
-      @title="{{this.model.type}} not configured"
-      @message="Get started by setting up the connection with your existing {{this.model.type}} account."
-    >
-      <Hds::Link::Standalone
-        @icon="chevron-right"
-        @iconPosition="trailing"
-        @text="Configure {{this.model.type}}"
-        @route="vault.cluster.settings.configure-secret-backend"
-        @model={{this.model.id}}
-      />
-    </EmptyState>
-  {{/if}}
+  <SecretEngine::ConfigurableSecretEngineDetails @model={{this.model}} @isConfigurable={{this.isConfigurable}} />
 
   <SecretsEngineMountConfig @model={{this.model}} class="has-top-margin-xl has-bottom-margin-xl" data-test-mount-config />