diff --git a/ui/app/components/list-item.js b/ui/app/components/list-item.js
index e4f1f0c0fa4e..c0a4396d1110 100644
--- a/ui/app/components/list-item.js
+++ b/ui/app/components/list-item.js
@@ -7,7 +7,7 @@ export default Component.extend({
   tagName: '',
   linkParams: null,
   componentName: null,
-  hasMenu: false,
+  hasMenu: true,
 
   callMethod: task(function*(method, model, successMessage, failureMessage, successCallback = () => {}) {
     let flash = this.get('flashMessages');
diff --git a/ui/app/components/list-item/popup-menu.js b/ui/app/components/list-item/popup-menu.js
index 4798652642ba..b1f4a59f1d96 100644
--- a/ui/app/components/list-item/popup-menu.js
+++ b/ui/app/components/list-item/popup-menu.js
@@ -2,4 +2,6 @@ import Component from '@ember/component';
 
 export default Component.extend({
   tagName: '',
+  item: null,
+  hasMenu: null,
 });
diff --git a/ui/app/components/secret-edit.js b/ui/app/components/secret-edit.js
index b83d451ee622..4b0e684778a3 100644
--- a/ui/app/components/secret-edit.js
+++ b/ui/app/components/secret-edit.js
@@ -1,9 +1,8 @@
-import { or } from '@ember/object/computed';
 import { isBlank, isNone } from '@ember/utils';
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
 import { computed, set } from '@ember/object';
-import { alias } from '@ember/object/computed';
+import { alias, or } from '@ember/object/computed';
 import { task, waitForEvent } from 'ember-concurrency';
 import FocusOnInsertMixin from 'vault/mixins/focus-on-insert';
 import keys from 'vault/lib/keycodes';
@@ -127,49 +126,6 @@ export default Component.extend(FocusOnInsertMixin, {
   ),
   canEditV2Secret: alias('v2UpdatePath.canUpdate'),
 
-  deleteVersionPath: maybeQueryRecord(
-    'capabilities',
-    context => {
-      let backend = context.get('model.engine.id');
-      let id = context.model.id;
-      return {
-        id: `${backend}/delete/${id}`,
-      };
-    },
-    'model.id'
-  ),
-  canDeleteVersion: alias('deleteVersionPath.canUpdate'),
-  destroyVersionPath: maybeQueryRecord(
-    'capabilities',
-    context => {
-      let backend = context.get('model.engine.id');
-      let id = context.model.id;
-      return {
-        id: `${backend}/destroy/${id}`,
-      };
-    },
-    'model.id'
-  ),
-  canDestroyVersion: alias('destroyVersionPath.canUpdate'),
-  undeleteVersionPath: maybeQueryRecord(
-    'capabilities',
-    context => {
-      let backend = context.get('model.engine.id');
-      let id = context.model.id;
-      return {
-        id: `${backend}/undelete/${id}`,
-      };
-    },
-    'model.id'
-  ),
-  canUndeleteVersion: alias('undeleteVersionPath.canUpdate'),
-
-  isFetchingVersionCapabilities: or(
-    'deleteVersionPath.isPending',
-    'destroyVersionPath.isPending',
-    'undeleteVersionPath.isPending'
-  ),
-
   requestInFlight: or('model.isLoading', 'model.isReloading', 'model.isSaving'),
 
   buttonDisabled: or(
@@ -299,11 +255,6 @@ export default Component.extend(FocusOnInsertMixin, {
       });
     },
 
-    deleteVersion(deleteType = 'destroy') {
-      let id = this.modelForData.id;
-      return this.store.adapterFor('secret-v2-version').v2DeleteOperation(this.store, id, deleteType);
-    },
-
     refresh() {
       this.onRefresh();
     },
diff --git a/ui/app/components/secret-version-menu.js b/ui/app/components/secret-version-menu.js
new file mode 100644
index 000000000000..5b13c6cd214b
--- /dev/null
+++ b/ui/app/components/secret-version-menu.js
@@ -0,0 +1,58 @@
+import { maybeQueryRecord } from 'vault/macros/maybe-query-record';
+import Component from '@ember/component';
+import { inject as service } from '@ember/service';
+import { alias, or } from '@ember/object/computed';
+
+export default Component.extend({
+  tagName: '',
+  store: service(),
+  version: null,
+  useDefaultTrigger: false,
+
+  deleteVersionPath: maybeQueryRecord(
+    'capabilities',
+    context => {
+      let [backend, id] = JSON.parse(context.version.id);
+      return {
+        id: `${backend}/delete/${id}`,
+      };
+    },
+    'version.id'
+  ),
+  canDeleteVersion: alias('deleteVersionPath.canUpdate'),
+  destroyVersionPath: maybeQueryRecord(
+    'capabilities',
+    context => {
+      let [backend, id] = JSON.parse(context.version.id);
+      return {
+        id: `${backend}/destroy/${id}`,
+      };
+    },
+    'version.id'
+  ),
+  canDestroyVersion: alias('destroyVersionPath.canUpdate'),
+  undeleteVersionPath: maybeQueryRecord(
+    'capabilities',
+    context => {
+      let [backend, id] = JSON.parse(context.version.id);
+      return {
+        id: `${backend}/undelete/${id}`,
+      };
+    },
+    'version.id'
+  ),
+  canUndeleteVersion: alias('undeleteVersionPath.canUpdate'),
+
+  isFetchingVersionCapabilities: or(
+    'deleteVersionPath.isPending',
+    'destroyVersionPath.isPending',
+    'undeleteVersionPath.isPending'
+  ),
+  actions: {
+    deleteVersion(deleteType = 'destroy') {
+      return this.store
+        .adapterFor('secret-v2-version')
+        .v2DeleteOperation(this.store, this.version.id, deleteType);
+    },
+  },
+});
diff --git a/ui/app/router.js b/ui/app/router.js
index 5660a3e2c228..1301330180d4 100644
--- a/ui/app/router.js
+++ b/ui/app/router.js
@@ -92,6 +92,10 @@ Router.map(function() {
           this.route('credentials-root', { path: '/credentials/' });
           this.route('credentials', { path: '/credentials/*secret' });
 
+          // kv v2 versions
+          this.route('versions-root', { path: '/versions/' });
+          this.route('versions', { path: '/versions/*secret' });
+
           // ssh sign
           this.route('sign-root', { path: '/sign/' });
           this.route('sign', { path: '/sign/*secret' });
diff --git a/ui/app/routes/vault/cluster/secrets/backend/secret-edit.js b/ui/app/routes/vault/cluster/secrets/backend/secret-edit.js
index 42da97bf16c3..873fc305f6bb 100644
--- a/ui/app/routes/vault/cluster/secrets/backend/secret-edit.js
+++ b/ui/app/routes/vault/cluster/secrets/backend/secret-edit.js
@@ -140,7 +140,7 @@ export default Route.extend(UnloadModelRoute, {
     },
 
     willTransition(transition) {
-      let model = this.controller.model;
+      let { mode, model } = this.controller;
       let version = model.get('selectedVersion');
       let changed = model.changedAttributes();
       let changedKeys = Object.keys(changed);
@@ -148,8 +148,8 @@ export default Route.extend(UnloadModelRoute, {
       // it's going to dirty the model state, so we need to look for it
       // and explicity ignore it here
       if (
-        (changedKeys.length && changedKeys[0] !== 'backend') ||
-        (version && Object.keys(version.changedAttributes()).length)
+        (mode !== 'show' && (changedKeys.length && changedKeys[0] !== 'backend')) ||
+        (mode !== 'show' && version && Object.keys(version.changedAttributes()).length)
       ) {
         if (
           window.confirm(
diff --git a/ui/app/routes/vault/cluster/secrets/backend/versions-root.js b/ui/app/routes/vault/cluster/secrets/backend/versions-root.js
new file mode 100644
index 000000000000..69de93ac8a8a
--- /dev/null
+++ b/ui/app/routes/vault/cluster/secrets/backend/versions-root.js
@@ -0,0 +1 @@
+export { default } from './version';
diff --git a/ui/app/routes/vault/cluster/secrets/backend/versions.js b/ui/app/routes/vault/cluster/secrets/backend/versions.js
new file mode 100644
index 000000000000..da1d44097e81
--- /dev/null
+++ b/ui/app/routes/vault/cluster/secrets/backend/versions.js
@@ -0,0 +1,27 @@
+import Route from '@ember/routing/route';
+import utils from 'vault/lib/key-utils';
+import UnloadModelRoute from 'vault/mixins/unload-model-route';
+
+export default Route.extend(UnloadModelRoute, {
+  templateName: 'vault/cluster/secrets/backend/versions',
+
+  beforeModel() {
+    let backendModel = this.modelFor('vault.cluster.secrets.backend');
+    const { secret } = this.paramsFor(this.routeName);
+    const parentKey = utils.parentKeyForKey(secret);
+    if (backendModel.get('isV2KV')) {
+      return;
+    }
+    if (parentKey) {
+      return this.transitionTo('vault.cluster.secrets.backend.list', parentKey);
+    } else {
+      return this.transitionTo('vault.cluster.secrets.backend.list-root');
+    }
+  },
+
+  model(params) {
+    let { secret } = params;
+    const { backend } = this.paramsFor('vault.cluster.secrets.backend');
+    return this.store.queryRecord('secret-v2', { id: secret, backend });
+  },
+});
diff --git a/ui/app/serializers/secret-v2.js b/ui/app/serializers/secret-v2.js
index e1d7fc7f6cec..0be535c778a5 100644
--- a/ui/app/serializers/secret-v2.js
+++ b/ui/app/serializers/secret-v2.js
@@ -38,6 +38,7 @@ export default ApplicationSerializer.extend(DS.EmbeddedRecordsMixin, {
         return body;
       });
     }
+    payload.data.engine_id = payload.backend;
     payload.data.id = payload.id;
     return requestType === 'queryRecord' ? payload.data : [payload.data];
   },
diff --git a/ui/app/styles/core/helpers.scss b/ui/app/styles/core/helpers.scss
index b45b46732d80..3f94d9115af2 100644
--- a/ui/app/styles/core/helpers.scss
+++ b/ui/app/styles/core/helpers.scss
@@ -4,12 +4,18 @@
 .is-underline {
   text-decoration: underline;
 }
+.is-no-underline {
+  text-decoration: none;
+}
 .is-sideless {
   box-shadow: 0 2px 0 -1px $grey-light, 0 -2px 0 -1px $grey-light;
 }
 .is-bottomless {
   box-shadow: 0 -1px 0 0 $grey-light;
 }
+.has-bottom-shadow {
+  box-shadow: $box-shadow !important;
+}
 .is-borderless {
   border: none !important;
 }
diff --git a/ui/app/templates/components/list-item.hbs b/ui/app/templates/components/list-item.hbs
index dbb4e13072b8..fa760d3c567c 100644
--- a/ui/app/templates/components/list-item.hbs
+++ b/ui/app/templates/components/list-item.hbs
@@ -3,18 +3,14 @@
 {{else if linkParams}}
   <LinkedBlock @params={{linkParams}} @class="list-item-row">
     <div class="level is-mobile">
-      <div class="level-left">
-        <div>
-          {{#link-to params=linkParams class="has-text-weight-semibold"}}
-            {{yield (hash content=(component "list-item/content"))}}
-          {{/link-to}}
-        </div>
-      </div>
+      <div class="level-left is-flex-1">
+        {{#link-to params=linkParams class="has-text-weight-semibold has-text-black is-display-flex is-flex-1 is-no-underline"}}
+          {{yield (hash content=(component "list-item/content"))}}
+        {{/link-to}}
+    </div>
       <div class="level-right">
         <div class="level-item">
-          {{#if hasBlock}}
-            {{yield (hash callMethod=callMethod menu=(component "list-item/popup-menu"))}}
-          {{/if}}
+          {{yield (hash callMethod=callMethod menu=(component "list-item/popup-menu" item=item hasMenu=hasMenu))}}
         </div>
       </div>
     </div>
@@ -22,14 +18,12 @@
 {{else}}
   <div class="list-item-row">
     <div class="level is-mobile">
-      <div class="level-left">
-        <div class="has-text-grey has-text-weight-semibold">
-          {{yield (hash content=(component "list-item/content"))}}
-        </div>
+      <div class="level-left is-flex-1 has-text-weight-semibold">
+        {{yield (hash content=(component "list-item/content"))}}
       </div>
       <div class="level-right">
         <div class="level-item">
-            {{yield (hash callMethod=callMethod menu=(component "list-item/popup-menu"))}}
+            {{yield (hash callMethod=callMethod menu=(component "list-item/popup-menu" item=item hasMenu=hasMenu))}}
         </div>
       </div>
     </div>
diff --git a/ui/app/templates/components/list-item/popup-menu.hbs b/ui/app/templates/components/list-item/popup-menu.hbs
index c45c50ca9640..9823c5e91c61 100644
--- a/ui/app/templates/components/list-item/popup-menu.hbs
+++ b/ui/app/templates/components/list-item/popup-menu.hbs
@@ -1,7 +1,11 @@
-<PopupMenu>
-  <nav class="menu">
-    <ul class="menu-list">
-      {{yield item}}
-    </ul>
-  </nav>
-</PopupMenu>
+{{#if hasMenu}}
+  <PopupMenu>
+    <nav class="menu">
+      <ul class="menu-list">
+        {{yield item}}
+      </ul>
+    </nav>
+  </PopupMenu>
+{{else}}
+  {{yield item}}
+{{/if}}
diff --git a/ui/app/templates/components/secret-edit.hbs b/ui/app/templates/components/secret-edit.hbs
index 582a6fc9fcb1..d814e73c2218 100644
--- a/ui/app/templates/components/secret-edit.hbs
+++ b/ui/app/templates/components/secret-edit.hbs
@@ -77,130 +77,53 @@
   {{/if}}
   {{#if (and (eq @mode "show") this.isV2)}}
     <div class="control">
-    <BasicDropdown 
-      @class="popup-menu" 
-      @horizontalPosition="auto-right" 
-      @verticalPosition="below" 
-      as |D|
-    >
-      <D.trigger 
-        data-test-popup-menu-trigger="true"
-        @class={{concat "popup-menu-trigger button is-ghost has-text-grey" (if D.isOpen " is-active")}} 
-        @tagName="button" 
-      >
-      Version {{this.modelForData.version}} 
-      <ICon @glyph="chevron-right" @size="11" />
-      </D.trigger>
-      <D.content @class="popup-menu-content ">
-        <nav class="box menu">
-          <ul class="menu-list">
-            {{#if this.modelForData.destroyed}}
-              <li class="action has-text-grey">
-                <button type="button" class="link" disabled >
-                  The data for {{this.model.id}} version {{this.modelForData.version}} has been destroyed.
-                </button>
-              </li>
-            {{else}}
-              {{#if isFetchingVersionCapabilities}}
-                <li class="action">
-                  <button disabled=true type="button" class="link button is-loading is-transparent">
-                    loading
-                  </button>
-                </li>
-              {{else}}
-                <li class="action">
-                  {{#if this.modelForData.deleted}}
-                    {{#if canUndeleteVersion}}
-                      <button type="button" class="link" {{action "deleteVersion" "undelete"}}>
-                        Undelete version
-                      </button>
-                    {{else}}
-                      <button type="button" class="link" disabled >
-                        The data for {{this.model.id}} version {{this.modelForData.version}} has been deleted. You do not have the permisssion to undelete it.
-                      </button>
-                    {{/if}}
-                  {{else if canDeleteVersion}}
-                    <ConfirmAction
-                      @buttonClasses="link has-text-danger"
-                      @containerClasses="message-body is-block"
-                      @messageClasses="is-block"
-                      @onConfirmAction={{action "deleteVersion" "delete"}}
-                      @confirmMessage={{
-                        concat "Are you sure you want to delete " model.id " version " this.modelForData.version "?"
-                      }}
-                      @cancelButtonText="Cancel"
-                      data-test-secret-v2-delete="true"
-                      >
-                        Delete version
-                    </ConfirmAction>
-                  {{else}}
-                    <button type="button" class="link" disabled >
-                      You do not have the permissions to delete the data for this secret.
-                    </button>
-                  {{/if}}
-                </li>
-                {{#if canDestroyVersion}}
-                  <li class="action">
-                    <ConfirmAction
-                      @buttonClasses="link has-text-danger"
-                      @containerClasses="message-body is-block"
-                      @messageClasses="is-block"
-                      @onConfirmAction={{action "deleteVersion" "destroy"}}
-                      @confirmMessage={{
-                        concat "This will permanently destroy " model.id " version " this.modelForData.version ". Are you sure you want to do this?"
-                      }}
-                      @cancelButtonText="Cancel"
-                      data-test-secret-v2-destroy="true"
-                      >
-                        Permanently destroy version
-                    </ConfirmAction>
-                  </li>
-                {{else}}
-                  <button type="button" class="link" disabled >
-                    You do not have the permissions to destroy the data for this secret.
-                  </button>
-                {{/if}}
-              {{/if}}
-            {{/if}}
-          </ul>
-        </nav>
-      </D.content>
-    </BasicDropdown>
+      <SecretVersionMenu @version={{this.modelForData}} />
     </div>
     <div class="control">
-    <BasicDropdown 
-      @class="popup-menu" 
-      @horizontalPosition="auto-right" 
-      @verticalPosition="below" 
-      as |D|
-    >
-      <D.trigger 
-        data-test-popup-menu-trigger="true"
-        @class={{concat "popup-menu-trigger button is-ghost has-text-grey" (if D.isOpen " is-active")}} 
-        @tagName="button" 
+      <BasicDropdown 
+        @class="popup-menu" 
+        @horizontalPosition="auto-right" 
+        @verticalPosition="below" 
+        as |D|
       >
-        History <ICon @glyph="chevron-right" @size="11" />
-      </D.trigger>
-      <D.content @class="popup-menu-content ">
-        <nav class="box menu">
-          <h5 class="list-header">Versions</h5>
-          <ul class="menu-list">
-            {{#each (reverse this.model.versions) as |secretVersion|}}
-            <li class="action">
-              <LinkTo class="link" @params={{array (query-params version=secretVersion.version)}}>
-                Version {{secretVersion.version}}
-                {{#if (eq secretVersion.version this.model.currentVersion)}}
-                <ICon @glyph="checkmark-circled-outline" @excludeIconClass={{true}} @size="13" @class="has-text-success is-pulled-right" />
-                {{else if secretVersion.deleted}}
-                <ICon @glyph="cancel-square-outline" @size="13" @excludeIconClass={{true}} @class="has-text-grey is-pulled-right" />
-                {{/if}}
-              </LinkTo>
-            </li>
-            {{/each}}
-          </ul>
-        </nav>
-      </D.content>
-    </BasicDropdown>
+        <D.trigger 
+          data-test-popup-menu-trigger="true"
+          @class={{concat "popup-menu-trigger button is-ghost has-text-grey" (if D.isOpen " is-active")}} 
+          @tagName="button" 
+        >
+          History <ICon @glyph="chevron-right" @size="11" />
+        </D.trigger>
+        <D.content @class="popup-menu-content ">
+          <nav class="box menu">
+            <ul class="menu-list">
+              <li class="action">
+                <SecretLink
+                  @mode="versions"
+                  @secret={{this.model.id}}
+                  @class="has-text-black has-text-weight-semibold has-bottom-shadow"
+                > 
+                 View version history 
+                </SecretLink>
+              </li>
+            </ul>
+            <h5 class="list-header">Versions</h5>
+            <ul class="menu-list">
+              {{#each (reverse this.model.versions) as |secretVersion|}}
+              <li class="action">
+                <LinkTo class="link" @params={{array (query-params version=secretVersion.version)}}>
+                  Version {{secretVersion.version}}
+                  {{#if (eq secretVersion.version this.model.currentVersion)}}
+                  <ICon @glyph="checkmark-circled-outline" @excludeIconClass={{true}} @size="13" @class="has-text-success is-pulled-right" />
+                  {{else if secretVersion.deleted}}
+                  <ICon @glyph="cancel-square-outline" @size="13" @excludeIconClass={{true}} @class="has-text-grey is-pulled-right" />
+                  {{/if}}
+                </LinkTo>
+              </li>
+              {{/each}}
+            </ul>
+          </nav>
+        </D.content>
+      </BasicDropdown>
     </div>
   {{/if}}
 </div>
diff --git a/ui/app/templates/components/secret-version-menu.hbs b/ui/app/templates/components/secret-version-menu.hbs
new file mode 100644
index 000000000000..60e94794bf4d
--- /dev/null
+++ b/ui/app/templates/components/secret-version-menu.hbs
@@ -0,0 +1,96 @@
+    <BasicDropdown 
+      @class="popup-menu" 
+      @horizontalPosition="auto-right" 
+      @verticalPosition="below" 
+      as |D|
+    >
+      <D.trigger 
+        data-test-popup-menu-trigger="true"
+        @class={{concat "popup-menu-trigger button is-ghost has-text-grey" (if D.isOpen " is-active")}} 
+        @tagName="button" 
+      >
+        {{#if useDefaultTrigger}}
+          <ICon aria-label="More options" @glyph="more" @size="16" @class="has-text-black auto-width" />
+        {{else}}
+          Version {{this.version.version}} 
+          <ICon @glyph="chevron-right" @size="11" />
+        {{/if}}
+      </D.trigger>
+      <D.content @class="popup-menu-content ">
+        <nav class="box menu">
+          <ul class="menu-list">
+            {{#if hasBlock}}
+              {{yield}}
+            {{/if}}
+            {{#if this.version.destroyed}}
+              <li class="action has-text-grey">
+                <button type="button" class="link" disabled >
+                  The data for {{this.version.path}} version {{this.version.version}} has been destroyed.
+                </button>
+              </li>
+            {{else}}
+              {{#if isFetchingVersionCapabilities}}
+                <li class="action">
+                  <button disabled=true type="button" class="link button is-loading is-transparent">
+                    loading
+                  </button>
+                </li>
+              {{else}}
+                <li class="action">
+                  {{#if this.version.deleted}}
+                    {{#if canUndeleteVersion}}
+                      <button type="button" class="link" {{action "deleteVersion" "undelete"}}>
+                        Undelete version
+                      </button>
+                    {{else}}
+                      <button type="button" class="link" disabled >
+                        The data for {{this.version.path}} version {{this.version.version}} has been deleted. You do not have the permisssion to undelete it.
+                      </button>
+                    {{/if}}
+                  {{else if canDeleteVersion}}
+                    <ConfirmAction
+                      @buttonClasses="link has-text-danger"
+                      @containerClasses="message-body is-block"
+                      @messageClasses="is-block"
+                      @onConfirmAction={{action "deleteVersion" "delete"}}
+                      @confirmMessage={{
+                        concat "Are you sure you want to delete " this.version.path " version " this.version.version "?"
+                      }}
+                      @cancelButtonText="Cancel"
+                      data-test-secret-v2-delete="true"
+                      >
+                        Delete version
+                    </ConfirmAction>
+                  {{else}}
+                    <button type="button" class="link" disabled >
+                      You do not have the permissions to delete the data for this secret.
+                    </button>
+                  {{/if}}
+                </li>
+                {{#if canDestroyVersion}}
+                  <li class="action">
+                    <ConfirmAction
+                      @buttonClasses="link has-text-danger"
+                      @containerClasses="message-body is-block"
+                      @messageClasses="is-block"
+                      @onConfirmAction={{action "deleteVersion" "destroy"}}
+                      @confirmMessage={{
+                        concat "This will permanently destroy " this.version.path " version " this.version.version ". Are you sure you want to do this?"
+                      }}
+                      @cancelButtonText="Cancel"
+                      data-test-secret-v2-destroy="true"
+                      >
+                        Permanently destroy version
+                    </ConfirmAction>
+                  </li>
+                {{else}}
+                  <button type="button" class="link" disabled >
+                    You do not have the permissions to destroy the data for this secret.
+                  </button>
+                {{/if}}
+              {{/if}}
+            {{/if}}
+          </ul>
+        </nav>
+      </D.content>
+    </BasicDropdown>
\ No newline at end of file
diff --git a/ui/app/templates/partials/secret-list/item.hbs b/ui/app/templates/partials/secret-list/item.hbs
index 8c60ef3844f0..0363fe2b52a8 100644
--- a/ui/app/templates/partials/secret-list/item.hbs
+++ b/ui/app/templates/partials/secret-list/item.hbs
@@ -23,7 +23,7 @@
       </SecretLink>
     </div>
     <div class="column has-text-right">
-      <PopupMenu name="secret-menu" @contentClass="is-wide">
+      <PopupMenu name="secret-menu">
         <nav class="menu">
           <ul class="menu-list">
             {{#if item.isFolder}}
@@ -52,13 +52,17 @@
                       Details
                     </SecretLink>
                   </li>
-                  {{!--  // will add a link to the history view once it exists
                   {{#if backendModel.isV2KV}}
                     <li class="action">
-                      Verion History
+                      <SecretLink
+                        @mode="versions"
+                        @secret={{item.id}}
+                        @class="has-text-black has-text-weight-semibold"
+                      > 
+                        View version history
+                      </SecretLink>
                     </li>
                   {{/if}}
-                  --}}
                 {{/if}}
                 {{#if item.canEdit}}
                   <li class="action">
diff --git a/ui/app/templates/vault/cluster/secrets/backend/versions.hbs b/ui/app/templates/vault/cluster/secrets/backend/versions.hbs
new file mode 100644
index 000000000000..2645bd5255c9
--- /dev/null
+++ b/ui/app/templates/vault/cluster/secrets/backend/versions.hbs
@@ -0,0 +1,73 @@
+<PageHeader as |p|>
+  <p.top>
+    {{key-value-header
+      baseKey=(hash id=model.id)
+      path="vault.cluster.secrets.backend.list"
+      mode="show"
+      root=(hash
+        label=model.engineId
+        text=model.engineId
+        path="vault.cluster.secrets.backend.list-root"
+        model=model.engineId
+      )
+      showCurrent=true
+    }}
+  </p.top>
+  <p.levelLeft>
+    <h1 class="title is-3">
+      Version History
+    </h1>
+  </p.levelLeft>
+</PageHeader>
+<ListView @items={{reverse model.versions}} @itemNoun="version" as |list|>
+  <ListItem @hasMenu={{false}} @linkParams={{array 'vault.cluster.secrets.backend.show' model.id (query-params version=list.item.version) }} as |Item|>
+    <Item.content>
+      <div class="columns is-flex-1">
+        <div class="column is-one-third">
+          <ICon @glyph="document" @size="18" @class="has-text-grey" />Version {{list.item.version}}
+          {{#if (eq list.item.version model.currentVersion)}}
+            <span class="has-text-success is-size-9">
+              <ICon @glyph="checkmark-circled-outline" @size="13" />Current
+            </span>
+          {{/if}}
+        </div>
+        <div class="column">
+          {{#if list.item.deleted}}
+            <span class="has-text-grey is-size-8">
+              <ICon @glyph="false" @size="16" />Deleted
+            </span>
+          {{/if}}
+          {{#if list.item.destroyed}}
+            <span class="has-text-danger is-size-8">
+              <ICon @glyph="cancel-square-outline" @size="16" />Destroyed
+            </span>
+          {{/if}}
+        </div>
+      </div>
+    </Item.content>
+    <Item.menu>
+      <SecretVersionMenu @version={{list.item}} @useDefaultTrigger={{true}}>
+        <li class="action">
+          <SecretLink
+            @mode="show"
+            @secret={{model.id}}
+            @class="has-text-black has-text-weight-semibold"
+            @queryParams={{query-params version=list.item.version}}
+          > 
+            View version {{list.item.version}}
+          </SecretLink>
+        </li>
+        <li class="action">
+          <SecretLink
+            @mode="edit"
+            @secret={{model.id}}
+            @class="has-text-black has-text-weight-semibold"
+            @queryParams={{query-params version=list.item.version}}
+          > 
+            Create new version from {{list.item.version}}
+          </SecretLink>
+        </li>
+      </SecretVersionMenu>
+    </Item.menu>
+  </ListItem>
+</ListView>
\ No newline at end of file