diff --git a/.gitignore b/.gitignore
index 80cb94003..95852e8ad 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,6 +22,7 @@ testem.log
 yarn-error.log
 storybook-static
 **/.storybook/*.html
+.watchman-cookie*
 
 # ember-try
 .node_modules.ember-try
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..f972854c1
--- /dev/null
+++ b/ui/admin/app/components/form/credential-store/index.hbs
@@ -0,0 +1,38 @@
+<Rose::Form
+  @onSubmit={{@submit}}
+  @cancel={{@cancel}}
+  @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/controllers/scopes/scope/credential-stores/credential-store.js b/ui/admin/app/controllers/scopes/scope/credential-stores/credential-store.js
new file mode 100644
index 000000000..67b0b2c33
--- /dev/null
+++ b/ui/admin/app/controllers/scopes/scope/credential-stores/credential-store.js
@@ -0,0 +1,13 @@
+import Controller from '@ember/controller';
+
+export default class ScopesScopeCredentialStoresCredentialStoreController extends Controller {
+  // =attributes
+
+  /**
+   * A credential store breadcrumb
+   * @type {string}
+   */
+  get breadCrumb() {
+    return this.model.displayName;
+  }
+}
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..4bac020b1 100644
--- a/ui/admin/app/routes/scopes/scope/credential-stores.js
+++ b/ui/admin/app/routes/scopes/scope/credential-stores.js
@@ -1,6 +1,11 @@
 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 {
+  // =methods
+
   /**
    * Load all credential stores under current scope
    * @returns {Promise[CredentialStoreModel]}
@@ -9,4 +14,34 @@ export default class ScopesScopeCredentialStoresRoute extends Route {
     const { id: scope_id } = this.modelFor('scopes.scope');
     return this.store.query('credential-store', { scope_id });
   }
+
+  // =actions
+
+  /**
+   * Handle save
+   * @param {CredentialStoreModel} credentialStore
+   */
+  @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();
+  }
+
+  /**
+   * Rollback changes on credential stores.
+   * @param {CredentialStoreModel} credentialStore
+   */
+  @action
+  cancel(credentialStore) {
+    const { isNew } = credentialStore;
+    credentialStore.rollbackAttributes();
+    if (isNew) this.transitionTo('scopes.scope.credential-stores');
+  }
 }
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/routes/scopes/scope/credential-stores/credential-store/index.js b/ui/admin/app/routes/scopes/scope/credential-stores/credential-store/index.js
new file mode 100644
index 000000000..7e61beb34
--- /dev/null
+++ b/ui/admin/app/routes/scopes/scope/credential-stores/credential-store/index.js
@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeCredentialStoresCredentialStoreIndexRoute extends Route {}
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..0ff5c81bc
--- /dev/null
+++ b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/-header.hbs
@@ -0,0 +1,9 @@
+<h2>{{t 'resources.credential-store.title'}}</h2>
+<p>{{t 'resources.credential-store.description'}}</p>
+<Copyable
+  @text={{@model.id}}
+  @buttonText={{t 'actions.copy-to-clipboard'}}
+  @acknowledgeText={{t 'states.copied'}}
+>
+  <code>{{@model.id}}</code>
+</Copyable>
\ 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..aaa14a18c
--- /dev/null
+++ b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/index.hbs
@@ -0,0 +1,5 @@
+<Form::CredentialStore
+  @model={{@model}}
+  @submit={{route-action 'save' @model}}
+  @cancel={{route-action 'cancel' @model}}
+/>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/credential-stores/index.hbs b/ui/admin/app/templates/scopes/scope/credential-stores/index.hbs
index 585e076c2..0e2177ff1 100644
--- a/ui/admin/app/templates/scopes/scope/credential-stores/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/credential-stores/index.hbs
@@ -6,8 +6,9 @@
   <page.header>
     <h2>
       {{t 'resources.credential-store.title_plural'}}
+      <DocLink @doc='credential-stores' @iconSize='large' />
     </h2>
-    {{t 'resources.credential-store.description'}}
+    <p>{{t 'resources.credential-store.description'}}</p>
   </page.header>
 
   {{!-- <page.actions>
diff --git a/ui/admin/config/environment.js b/ui/admin/config/environment.js
index 7464ea022..fca0dab92 100644
--- a/ui/admin/config/environment.js
+++ b/ui/admin/config/environment.js
@@ -55,6 +55,7 @@ module.exports = function (environment) {
         'host-set': '/host-sets',
         'host-set.new': '/host-sets/new',
         'host-set.add-hosts': '/host-sets/add-hosts',
+        'credential-stores': '/credential-stores',
         host: '/hosts',
         'host.new': '/hosts/new',
         role: '/roles',
diff --git a/ui/admin/tests/unit/controllers/scopes/scope/credential-stores/credential-store-test.js b/ui/admin/tests/unit/controllers/scopes/scope/credential-stores/credential-store-test.js
new file mode 100644
index 000000000..5736858ff
--- /dev/null
+++ b/ui/admin/tests/unit/controllers/scopes/scope/credential-stores/credential-store-test.js
@@ -0,0 +1,17 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module(
+  'Unit | Controller | scopes/scope/credential-stores/credential-store',
+  function (hooks) {
+    setupTest(hooks);
+
+    // TODO: Replace this with your real tests.
+    test('it exists', function (assert) {
+      let controller = this.owner.lookup(
+        'controller:scopes/scope/credential-stores/credential-store'
+      );
+      assert.ok(controller);
+    });
+  }
+);
diff --git a/ui/admin/tests/unit/routes/scopes/scope/credential-stores/credential-store/index-test.js b/ui/admin/tests/unit/routes/scopes/scope/credential-stores/credential-store/index-test.js
new file mode 100644
index 000000000..a08a9fff6
--- /dev/null
+++ b/ui/admin/tests/unit/routes/scopes/scope/credential-stores/credential-store/index-test.js
@@ -0,0 +1,16 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module(
+  'Unit | Route | scopes/scope/credential-stores/credential-store/index',
+  function (hooks) {
+    setupTest(hooks);
+
+    test('it exists', function (assert) {
+      let route = this.owner.lookup(
+        'route:scopes/scope/credential-stores/credential-store/index'
+      );
+      assert.ok(route);
+    });
+  }
+);