diff --git a/ui/app/helpers/decode-uri.js b/ui/app/helpers/decode-uri.js
new file mode 100644
index 000000000000..be4f471770ab
--- /dev/null
+++ b/ui/app/helpers/decode-uri.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { helper as buildHelper } from '@ember/component/helper';
+
+export function decodeUri(string) {
+  return decodeURI(string);
+}
+
+export default buildHelper(decodeUri);
diff --git a/ui/app/templates/components/database-connection.hbs b/ui/app/templates/components/database-connection.hbs
index dae1eb023a5c..d2f26bd79aa7 100644
--- a/ui/app/templates/components/database-connection.hbs
+++ b/ui/app/templates/components/database-connection.hbs
@@ -345,7 +345,7 @@
           @alwaysRender={{not (is-empty-value (get @model attr.name) hasDefault=defaultDisplay)}}
           @defaultShown={{defaultDisplay}}
           @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
-          @value={{get @model attr.name}}
+          @value={{if (eq attr.name "connection_url") (decode-uri (get @model attr.name)) (get @model attr.name)}}
         />
       {{/if}}
     {{/let}}
diff --git a/ui/tests/acceptance/secrets/backend/database/secret-test.js b/ui/tests/acceptance/secrets/backend/database/secret-test.js
index 57994b1af841..b128aa377ab9 100644
--- a/ui/tests/acceptance/secrets/backend/database/secret-test.js
+++ b/ui/tests/acceptance/secrets/backend/database/secret-test.js
@@ -19,12 +19,16 @@ import { deleteEngineCmd, mountEngineCmd, runCmd, tokenWithPolicyCmd } from 'vau
 
 const searchSelectComponent = create(searchSelect);
 
-const newConnection = async (backend, plugin = 'mongodb-database-plugin') => {
+const newConnection = async (
+  backend,
+  plugin = 'mongodb-database-plugin',
+  connectionUrl = `mongodb://127.0.0.1:4321/${name}`
+) => {
   const name = `connection-${Date.now()}`;
   await connectionPage.visitCreate({ backend });
   await connectionPage.dbPlugin(plugin);
   await connectionPage.name(name);
-  await connectionPage.connectionUrl(`mongodb://127.0.0.1:4321/${name}`);
+  await connectionPage.connectionUrl(connectionUrl);
   await connectionPage.toggleVerify();
   await connectionPage.save();
   await connectionPage.enable();
@@ -480,6 +484,19 @@ module('Acceptance | secrets/database/*', function (hooks) {
     assert.dom('[data-test-get-credentials]').isEnabled();
   });
 
+  test('connection_url must be decoded', async function (assert) {
+    const backend = this.backend;
+    const connection = await newConnection(
+      backend,
+      'mongodb-database-plugin',
+      '{{username}}/{{password}}@oracle-xe:1521/XEPDB1'
+    );
+    await navToConnection(backend, connection);
+    assert
+      .dom('[data-test-row-value="Connection URL"]')
+      .hasText('{{username}}/{{password}}@oracle-xe:1521/XEPDB1');
+  });
+
   test('Role create form', async function (assert) {
     const backend = this.backend;
     // Connection needed for role fields