diff --git a/addons/api/mirage/config.js b/addons/api/mirage/config.js
index 6e598b47d..4564352a6 100644
--- a/addons/api/mirage/config.js
+++ b/addons/api/mirage/config.js
@@ -464,6 +464,9 @@ export default function () {
       credentialStores.where({ scopeId })
   );
 
+  this.get('/credential-stores/:id');
+  this.patch('/credential-stores/:id');
+
   // credential-libraries
 
   this.get(
diff --git a/ui/admin/app/components/form/credential-store/index.hbs b/ui/admin/app/components/form/credential-store/index.hbs
new file mode 100644
index 000000000..312dce672
--- /dev/null
+++ b/ui/admin/app/components/form/credential-store/index.hbs
@@ -0,0 +1,37 @@
+<Rose::Form
+  @onSubmit={{@submit}}
+  @disabled={{@model.isSaving}}
+  @showEditToggle={{if @model.isNew false true}}
+  as |form|
+>
+  <form.input
+    @value={{@model.type}}
+    @label={{t 'form.type.label'}}
+    readonly={{true}}
+    @disabled={{true}}
+  />
+
+  <form.input
+    @name='name'
+    @type='name'
+    @value={{@model.name}}
+    @label={{t 'form.name.label'}}
+    @helperText={{t 'form.name.help'}}
+    readonly={{false}}
+  />
+
+  <form.textarea
+    @name='description'
+    @type='description'
+    @value={{@model.description}}
+    @label={{t 'form.description.label'}}
+    @helperText={{t 'form.description.help'}}
+  />
+
+  <form.actions
+    @disabled={{if @model.cannotSave @model.cannotSave}}
+    @enableEditText={{t 'actions.edit-form'}}
+    @submitText={{t 'actions.save'}}
+    @cancelText={{t 'actions.cancel'}}
+  />
+</Rose::Form>
\ No newline at end of file
diff --git a/ui/admin/app/router.js b/ui/admin/app/router.js
index 4d723cab8..21a7859c7 100644
--- a/ui/admin/app/router.js
+++ b/ui/admin/app/router.js
@@ -87,7 +87,11 @@ Router.map(function () {
         });
       });
       this.route('credential-stores', function () {
-        this.route('credential-store', { path: ':credential_store_id' });
+        this.route(
+          'credential-store',
+          { path: ':credential_store_id' },
+          function () {}
+        );
       });
     });
   });
diff --git a/ui/admin/app/routes/scopes/scope/credential-stores.js b/ui/admin/app/routes/scopes/scope/credential-stores.js
index 7f75dd4fa..d08a6402a 100644
--- a/ui/admin/app/routes/scopes/scope/credential-stores.js
+++ b/ui/admin/app/routes/scopes/scope/credential-stores.js
@@ -1,4 +1,7 @@
 import Route from '@ember/routing/route';
+import { action } from '@ember/object';
+import loading from 'ember-loading/decorator';
+import { notifySuccess, notifyError } from 'core/decorators/notify';
 
 export default class ScopesScopeCredentialStoresRoute extends Route {
   /**
@@ -9,4 +12,17 @@ export default class ScopesScopeCredentialStoresRoute extends Route {
     const { id: scope_id } = this.modelFor('scopes.scope');
     return this.store.query('credential-store', { scope_id });
   }
+
+  @action
+  @loading
+  @notifyError(({ message }) => message)
+  @notifySuccess('notifications.save-success')
+  async save(credentialStore) {
+    await credentialStore.save();
+    await this.transitionTo(
+      'scopes.scope.credential-stores.credential-store',
+      credentialStore
+    );
+    this.refresh();
+  }
 }
diff --git a/ui/admin/app/routes/scopes/scope/credential-stores/credential-store.js b/ui/admin/app/routes/scopes/scope/credential-stores/credential-store.js
index 82fa9d62c..307c11079 100644
--- a/ui/admin/app/routes/scopes/scope/credential-stores/credential-store.js
+++ b/ui/admin/app/routes/scopes/scope/credential-stores/credential-store.js
@@ -6,6 +6,24 @@ export default class ScopesScopeCredentialStoresCredentialStoreRoute extends Rou
    * @return {Promise[CredentialStoreModel]}
    */
   async model({ credential_store_id }) {
-    return this.route.findRecord('credential-store', credential_store_id);
+    return this.store.findRecord('credential-store', credential_store_id);
+  }
+
+  /**
+   * Render credential store header and navigation page sections.
+   * @override
+   */
+  renderTemplate() {
+    super.renderTemplate(...arguments);
+
+    this.render('scopes/scope/credential-stores/credential-store/-header', {
+      into: 'scopes/scope/credential-stores/credential-store',
+      outlet: 'header',
+    });
+
+    this.render('scopes/scope/credential-stores/credential-store/-navigation', {
+      into: 'scopes/scope/credential-stores/credential-store',
+      outlet: 'navigation',
+    });
   }
 }
diff --git a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store.hbs b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store.hbs
index 637b45528..a6ecd7f81 100644
--- a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store.hbs
+++ b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store.hbs
@@ -1,2 +1,24 @@
-{{page-title 'CredentialStore'}}
-{{outlet}}
\ No newline at end of file
+{{page-title @model.displayName}}
+
+<Rose::Layout::Page as |page|>
+
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    {{outlet 'header'}}
+  </page.header>
+
+  <page.navigation>
+    {{outlet 'navigation'}}
+  </page.navigation>
+
+  <page.actions>
+    {{!-- {{outlet 'actions'}} --}}
+  </page.actions>
+
+  <page.body>
+    {{outlet}}
+  </page.body>
+</Rose::Layout::Page>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/-header.hbs b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/-header.hbs
new file mode 100644
index 000000000..d9df667e2
--- /dev/null
+++ b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/-header.hbs
@@ -0,0 +1,3 @@
+<h2>{{@model.displayName}}</h2>
+<p>{{@model.description}}</p>
+{{@model.id}}
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/-navigation.hbs b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/-navigation.hbs
new file mode 100644
index 000000000..86b9cf585
--- /dev/null
+++ b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/-navigation.hbs
@@ -0,0 +1,5 @@
+<Rose::Nav::Tabs as |nav|>
+  <nav.link @route='scopes.scope.credential-stores.credential-store.index'>
+    {{t 'titles.details'}}
+  </nav.link>
+</Rose::Nav::Tabs>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/index.hbs b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/index.hbs
new file mode 100644
index 000000000..860476547
--- /dev/null
+++ b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/index.hbs
@@ -0,0 +1,4 @@
+<Form::CredentialStore
+  @model={{@model}}
+  @submit={{route-action 'save' @model}}
+/>
\ No newline at end of file