diff --git a/ui/admin/app/components/form/credential/index.hbs b/ui/admin/app/components/form/credential/index.hbs
index 6600f7ac2..f501d63b2 100644
--- a/ui/admin/app/components/form/credential/index.hbs
+++ b/ui/admin/app/components/form/credential/index.hbs
@@ -51,6 +51,7 @@
       <form.radioGroup
         @name='types'
         @selectedValue='username_password'
+        @changed={{@changeType}}
         as |radioGroup|
       >
         <radioGroup.card
diff --git a/ui/admin/app/controllers/scopes/scope/credential-stores/credential-store/credentials/new.js b/ui/admin/app/controllers/scopes/scope/credential-stores/credential-store/credentials/new.js
index 630034ec3..7de5ad96f 100644
--- a/ui/admin/app/controllers/scopes/scope/credential-stores/credential-store/credentials/new.js
+++ b/ui/admin/app/controllers/scopes/scope/credential-stores/credential-store/credentials/new.js
@@ -8,6 +8,8 @@ export default class ScopesScopeCredentialStoresCredentialStoreCredentialsNewCon
 
   // =attributes
 
+  queryParams = ['type'];
+
   /**
    * Translated new credentials breadcrumb
    * @type {string}
diff --git a/ui/admin/app/routes/scopes/scope/credential-stores/credential-store/credentials/new.js b/ui/admin/app/routes/scopes/scope/credential-stores/credential-store/credentials/new.js
index 0541aebe4..1331d410d 100644
--- a/ui/admin/app/routes/scopes/scope/credential-stores/credential-store/credentials/new.js
+++ b/ui/admin/app/routes/scopes/scope/credential-stores/credential-store/credentials/new.js
@@ -1,14 +1,28 @@
 import Route from '@ember/routing/route';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 
 export default class ScopesScopeCredentialStoresCredentialStoreCredentialsNewRoute extends Route {
+  // =services
+
+  @service router;
+
+  // =attributes
+
+  queryParams = {
+    type: {
+      refreshModel: true,
+    },
+  };
+
   // =methods
 
   /**
    * Creates a new unsaved credential in current credential store.
    * @return {CredentialModel}
    */
-  model() {
-    const { id: credential_store_id, type } = this.modelFor(
+  model({ type = 'username_password' }) {
+    const { id: credential_store_id } = this.modelFor(
       'scopes.scope.credential-stores.credential-store'
     );
     return this.store.createRecord('credential', {
@@ -16,4 +30,12 @@ export default class ScopesScopeCredentialStoresCredentialStoreCredentialsNewRou
       credential_store_id,
     });
   }
+  /**
+   * Update type of credential
+   * @param {string} type
+   */
+  @action
+  changeType(type) {
+    this.router.replaceWith({ queryParams: { type } });
+  }
 }
diff --git a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credentials/new.hbs b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credentials/new.hbs
index be604b1df..41124f711 100644
--- a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credentials/new.hbs
+++ b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credentials/new.hbs
@@ -18,6 +18,7 @@
       @model={{@model}}
       @submit={{route-action 'save' @model}}
       @cancel={{route-action 'cancel' @model}}
+      @changeType={{route-action 'changeType'}}
     />
   </page.body>
 </Rose::Layout::Page>
\ No newline at end of file