diff --git a/changelog/10596.txt b/changelog/10596.txt
new file mode 100644
index 000000000..492f972bb
--- /dev/null
+++ b/changelog/10596.txt
@@ -0,0 +1,4 @@
+```release-note:bug
+ui: Fix bug that double encodes secret route when there are spaces in the path and makes you unable to view the version history.
+```
+
diff --git a/ui/app/routes/vault/cluster/secrets/backend/versions.js b/ui/app/routes/vault/cluster/secrets/backend/versions.js
index da1d44097..7604ea952 100644
--- a/ui/app/routes/vault/cluster/secrets/backend/versions.js
+++ b/ui/app/routes/vault/cluster/secrets/backend/versions.js
@@ -1,6 +1,7 @@
 import Route from '@ember/routing/route';
 import utils from 'vault/lib/key-utils';
 import UnloadModelRoute from 'vault/mixins/unload-model-route';
+import { normalizePath } from 'vault/utils/path-encoding-helpers';
 
 export default Route.extend(UnloadModelRoute, {
   templateName: 'vault/cluster/secrets/backend/versions',
@@ -22,6 +23,7 @@ export default Route.extend(UnloadModelRoute, {
   model(params) {
     let { secret } = params;
     const { backend } = this.paramsFor('vault.cluster.secrets.backend');
-    return this.store.queryRecord('secret-v2', { id: secret, backend });
+    let id = normalizePath(secret);
+    return this.store.queryRecord('secret-v2', { id, backend });
   },
 });
diff --git a/ui/app/templates/components/secret-edit.hbs b/ui/app/templates/components/secret-edit.hbs
index 9de3ec4d8..cefe55f43 100644
--- a/ui/app/templates/components/secret-edit.hbs
+++ b/ui/app/templates/components/secret-edit.hbs
@@ -45,7 +45,7 @@
         as |D|
       >
         <D.trigger
-          data-test-popup-menu-trigger="true"
+          data-test-popup-menu-trigger="history"
           @class={{concat "popup-menu-trigger toolbar-link" (if D.isOpen " is-active")}}
           @tagName="button"
         >
@@ -56,6 +56,7 @@
             <ul class="menu-list">
               <li class="action">
                 <SecretLink
+                  @data-test-version-history
                   @mode="versions"
                   @secret={{this.model.id}}
                   @class="has-text-black has-text-weight-semibold has-bottom-shadow"
diff --git a/ui/app/templates/components/secret-link.hbs b/ui/app/templates/components/secret-link.hbs
index 7b5ab4bab..de4276fd3 100644
--- a/ui/app/templates/components/secret-link.hbs
+++ b/ui/app/templates/components/secret-link.hbs
@@ -8,6 +8,8 @@
   data-test-transit-link=data-test-transit-link
   data-test-transit-key-actions-link=data-test-transit-key-actions-link
   data-test-transit-action-link=data-test-transit-action-link
+  data-test-version-history=data-test-version-history
+  data-test-version=data-test-version
   invokeAction=(action onLinkClick)
 }}
   {{yield}}
diff --git a/ui/app/templates/vault/cluster/secrets/backend/versions.hbs b/ui/app/templates/vault/cluster/secrets/backend/versions.hbs
index 330c2b411..e245844a0 100644
--- a/ui/app/templates/vault/cluster/secrets/backend/versions.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/versions.hbs
@@ -43,6 +43,7 @@
       <SecretVersionMenu @version={{list.item}} @useDefaultTrigger={{true}}>
         <li class="action">
           <SecretLink
+            @data-test-version
             @mode="show"
             @secret={{model.id}}
             @class="has-text-black has-text-weight-semibold"
diff --git a/ui/tests/acceptance/secrets/backend/kv/secret-test.js b/ui/tests/acceptance/secrets/backend/kv/secret-test.js
index b456c3138..413aeb1a8 100644
--- a/ui/tests/acceptance/secrets/backend/kv/secret-test.js
+++ b/ui/tests/acceptance/secrets/backend/kv/secret-test.js
@@ -1,4 +1,4 @@
-import { visit, settled, currentURL, currentRouteName } from '@ember/test-helpers';
+import { click, visit, settled, currentURL, currentRouteName } from '@ember/test-helpers';
 import { create } from 'ember-cli-page-object';
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
@@ -20,7 +20,7 @@ let writeSecret = async function(backend, path, key, val) {
   return editPage.createSecret(path, key, val);
 };
 
-module('Acceptance | secrets/secret/create meep', function(hooks) {
+module('Acceptance | secrets/secret/create', function(hooks) {
   setupApplicationTest(hooks);
 
   hooks.beforeEach(async function() {
@@ -288,6 +288,34 @@ module('Acceptance | secrets/secret/create meep', function(hooks) {
     }
   });
 
+  test('create secret with space shows version data', async function(assert) {
+    let enginePath = `kv-${new Date().getTime()}`;
+    let secretPath = 'space space';
+    // mount version 2
+    await mountSecrets.visit();
+    await mountSecrets.selectType('kv');
+    await mountSecrets
+      .next()
+      .path(enginePath)
+      .submit();
+    await settled();
+    await listPage.create();
+    await editPage.createSecret(secretPath, 'foo', 'bar');
+    await settled();
+    await click('[data-test-popup-menu-trigger="history"]');
+    await settled();
+    await click('[data-test-version-history]');
+    await settled();
+    assert.dom('[data-test-list-item-content]').exists('renders the version and not an error state');
+    // click on version
+    await click('[data-test-popup-menu-trigger="true"]');
+    await click('[data-test-version]');
+    await settled();
+    // perform encode function that should be done by the encodePath
+    let encodedSecretPath = secretPath.replace(/ /g, '%20');
+    assert.equal(currentURL(), `/vault/secrets/${enginePath}/show/${encodedSecretPath}?version=1`);
+  });
+
   // the web cli does not handle a quote as part of a path, so we test it here via the UI
   test('creating a secret with a single or double quote works properly', async function(assert) {
     await consoleComponent.runCommands('write sys/mounts/kv type=kv');