diff --git a/ui/app/models/pki/pki-role-engine.js b/ui/app/models/pki/pki-role-engine.js
index 1b9d8eaf50..8460ca5e75 100644
--- a/ui/app/models/pki/pki-role-engine.js
+++ b/ui/app/models/pki/pki-role-engine.js
@@ -1,6 +1,5 @@
 import Model, { attr } from '@ember-data/model';
 import lazyCapabilities, { apiPath } from 'vault/macros/lazy-capabilities';
-import { expandAttributeMeta } from 'vault/utils/field-to-attrs';
 import { withModelValidations } from 'vault/decorators/model-validations';
 
 import fieldToAttrs from 'vault/utils/field-to-attrs';
@@ -105,21 +104,9 @@ export default class PkiRoleEngineModel extends Model {
 
   @attr('string', {
     label: 'Key bits',
+    defaultValue: 2048,
   })
-  keyBits;
-
-  // "possibleValues" for the field "keyBits" depends on the value of the selected "keyType"
-  get keyBitsConditional() {
-    const keyBitOptions = {
-      rsa: [2048, 3072, 4096],
-      ec: [256, 224, 384, 521],
-      ed25519: [0],
-      any: [0],
-    };
-    const attrs = expandAttributeMeta(this, ['keyBits']);
-    attrs[0].options['possibleValues'] = keyBitOptions[this.keyType];
-    return attrs[0];
-  }
+  keyBits; // keyBits is a conditional value based on keyType. The model param is handled in the pkiKeyParameters component.
 
   @attr('number', {
     label: 'Signature bits',
@@ -286,11 +273,6 @@ export default class PkiRoleEngineModel extends Model {
           docLink: '/api-docs/secret/pki#allowed_domains',
         },
       },
-      'Key parameters': {
-        header: {
-          text: `These are the parameters for generating or validating the certificate's key material.`,
-        },
-      },
       'Subject Alternative Name (SAN) Options': {
         header: {
           text: `Subject Alternative Names (SANs) are identities (domains, IP addresses, and URIs) Vault attaches to the requested certificates.`,
diff --git a/ui/lib/pki/addon/components/pki-key-parameters.hbs b/ui/lib/pki/addon/components/pki-key-parameters.hbs
new file mode 100644
index 0000000000..2715338d00
--- /dev/null
+++ b/ui/lib/pki/addon/components/pki-key-parameters.hbs
@@ -0,0 +1,67 @@
+{{#let (camelize (concat "show" @group)) as |prop|}}
+  <ToggleButton
+    @isOpen={{get @model prop}}
+    @openLabel={{concat "Hide " @group}}
+    @closedLabel={{@group}}
+    @onClick={{fn (mut (get @model prop))}}
+    class="is-block"
+    data-test-toggle-group={{@group}}
+  />
+  {{#if (get @model prop)}}
+    <div class="box is-tall is-marginless">
+      <FormFieldLabel
+        for="keyParametersLabel"
+        @subText="These are the parameters for generating or validating the certificate's key material."
+      />
+      {{#each @model.fieldGroups as |fieldGroup|}}
+        {{#each-in fieldGroup as |group fields|}}
+          {{#if (eq group "Key parameters")}}
+            {{#each fields as |attr|}}
+              {{#if (eq attr.name "keyBits")}}
+                <div class="field">
+                  <FormFieldLabel for={{attr.name}} @label={{attr.options.label}} />
+                  <div class="control is-expanded">
+                    <div class="select is-fullwidth">
+                      <select
+                        name={{attr.name}}
+                        id={{attr.name}}
+                        onchange={{this.onKeyBitsChange}}
+                        data-test-input={{attr.name}}
+                      >
+                        {{#each this.keyBitOptions as |val|}}
+                          <option selected={{eq (get @model this.valuePath) (or val.value val)}} value={{val}}>
+                            {{val}}
+                          </option>
+                        {{/each}}
+                      </select>
+                    </div>
+                  </div>
+                </div>
+              {{else}}
+                <div class="field">
+                  <FormFieldLabel for={{attr.name}} @label={{attr.options.label}} />
+                  <div class="control is-expanded">
+                    <div class="select is-fullwidth">
+                      <select
+                        name={{attr.name}}
+                        id={{attr.name}}
+                        onchange={{fn this.onSignatureBitsOrKeyTypeChange attr.name}}
+                        data-test-input={{attr.name}}
+                      >
+                        {{#each (path-or-array attr.options.possibleValues @model) as |val|}}
+                          <option selected={{eq (get @model this.valuePath) (or val.value val)}} value={{or val.value val}}>
+                            {{or val.displayName val}}
+                          </option>
+                        {{/each}}
+                      </select>
+                    </div>
+                  </div>
+                </div>
+              {{/if}}
+            {{/each}}
+          {{/if}}
+        {{/each-in}}
+      {{/each}}
+    </div>
+  {{/if}}
+{{/let}}
\ No newline at end of file
diff --git a/ui/lib/pki/addon/components/pki-key-parameters.js b/ui/lib/pki/addon/components/pki-key-parameters.js
new file mode 100644
index 0000000000..ac6d692990
--- /dev/null
+++ b/ui/lib/pki/addon/components/pki-key-parameters.js
@@ -0,0 +1,45 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+/**
+ * @module PkiKeyParameters
+ * PkiKeyParameters components are used to set the default and update the key_bits pki role api param whenever the key_type changes.
+ * key_bits is conditional on key_type and should be set as a default value whenever key_type changes.
+ * @example
+ * ```js
+ * <PkiKeyParameters @model={@model} @group={group}/>
+ * ```
+ * @param {class} model - The pki/pki-role-engine model.
+ * @param {string} group - The name of the group created in the model. In this case, it's the "Key parameters" group.
+ */
+
+const KEY_BITS_OPTIONS = {
+  rsa: [2048, 3072, 4096],
+  ec: [256, 224, 384, 521],
+  ed25519: [0],
+  any: [0],
+};
+
+export default class PkiKeyParameters extends Component {
+  get keyBitOptions() {
+    return KEY_BITS_OPTIONS[this.args.model.keyType];
+  }
+
+  get keyBitsDefault() {
+    return Number(KEY_BITS_OPTIONS[this.args.model.keyType][0]);
+  }
+
+  @action onKeyBitsChange(selection) {
+    this.args.model.set('keyBits', Number(selection.target.value));
+  }
+
+  @action onSignatureBitsOrKeyTypeChange(name, selection) {
+    if (name === 'signatureBits') {
+      this.args.model.set(name, Number(selection.target.value));
+    }
+    if (name === 'keyType') {
+      this.args.model.set(name, selection.target.value);
+      this.args.model.set('keyBits', this.keyBitsDefault);
+    }
+  }
+}
diff --git a/ui/lib/pki/addon/components/pki-role-form.hbs b/ui/lib/pki/addon/components/pki-role-form.hbs
index 11cd877b51..3ec446c9b1 100644
--- a/ui/lib/pki/addon/components/pki-role-form.hbs
+++ b/ui/lib/pki/addon/components/pki-role-form.hbs
@@ -48,6 +48,8 @@
           {{/each}}
         {{else if (eq group "Key usage")}}
           <PkiKeyUsage @model={{@model}} @group={{group}} />
+        {{else if (eq group "Key parameters")}}
+          <PkiKeyParameters @model={{@model}} @group={{group}} />
         {{else}}
           {{! Groups hidden behind Toggles }}
           {{#let (camelize (concat "show" group)) as |prop|}}
@@ -77,7 +79,7 @@
                   {{#each fields as |attr|}}
                     <FormField
                       data-test-field={{true}}
-                      @attr={{if (eq attr.name "keyBits") @model.keyBitsConditional attr}}
+                      @attr={{attr}}
                       @model={{@model}}
                       @modelValidations={{@modelValidations}}
                       @showHelpText={{false}}
diff --git a/ui/lib/pki/addon/templates/configuration/index.hbs b/ui/lib/pki/addon/templates/configuration/index.hbs
index c6206b69f7..fa9d9905a3 100644
--- a/ui/lib/pki/addon/templates/configuration/index.hbs
+++ b/ui/lib/pki/addon/templates/configuration/index.hbs
@@ -10,10 +10,10 @@
 />
 <Toolbar>
   <ToolbarActions>
-    <ToolbarLink @params={{array "configuration.tidy"}}>
+    <ToolbarLink @route="configuration.tidy">
       Tidy
     </ToolbarLink>
-    <ToolbarLink @params={{array "configuration.edit"}}>
+    <ToolbarLink @route="configuration.edit">
       Edit configuration
     </ToolbarLink>
   </ToolbarActions>
diff --git a/ui/lib/pki/addon/templates/issuers/index.hbs b/ui/lib/pki/addon/templates/issuers/index.hbs
index ea56d846b1..34c685be58 100644
--- a/ui/lib/pki/addon/templates/issuers/index.hbs
+++ b/ui/lib/pki/addon/templates/issuers/index.hbs
@@ -10,7 +10,7 @@
 />
 <Toolbar>
   <ToolbarActions>
-    <ToolbarLink @params={{array "configuration.create.import-ca"}}>
+    <ToolbarLink @route="configuration.create.import-ca">
       Import
     </ToolbarLink>
     <BasicDropdown @class="popup-menu" @horizontalPosition="auto-right" @verticalPosition="below" as |D|>
diff --git a/ui/lib/pki/addon/templates/keys/index.hbs b/ui/lib/pki/addon/templates/keys/index.hbs
index 59dc3b9894..8cf40fbee3 100644
--- a/ui/lib/pki/addon/templates/keys/index.hbs
+++ b/ui/lib/pki/addon/templates/keys/index.hbs
@@ -10,10 +10,10 @@
 />
 <Toolbar>
   <ToolbarActions>
-    <ToolbarLink @params={{array "keys.import"}} @type="download">
+    <ToolbarLink @route="keys.import" @type="download">
       Import
     </ToolbarLink>
-    <ToolbarLink @params={{array "keys.generate"}} @type="add">
+    <ToolbarLink @route="keys.generate" @type="add">
       Generate
     </ToolbarLink>
   </ToolbarActions>
diff --git a/ui/lib/pki/addon/templates/overview.hbs b/ui/lib/pki/addon/templates/overview.hbs
index 7fa8c6e0d8..9f27316275 100644
--- a/ui/lib/pki/addon/templates/overview.hbs
+++ b/ui/lib/pki/addon/templates/overview.hbs
@@ -10,7 +10,7 @@
 />
 <Toolbar>
   <ToolbarActions>
-    <ToolbarLink @params={{array "configuration.create.index"}}>
+    <ToolbarLink @route="configuration.create.index">
       Configure PKI
     </ToolbarLink>
   </ToolbarActions>
diff --git a/ui/lib/pki/addon/templates/roles/index.hbs b/ui/lib/pki/addon/templates/roles/index.hbs
index 9fb96973e8..92fb8e34dc 100644
--- a/ui/lib/pki/addon/templates/roles/index.hbs
+++ b/ui/lib/pki/addon/templates/roles/index.hbs
@@ -10,7 +10,7 @@
 />
 <Toolbar>
   <ToolbarActions>
-    <ToolbarLink @type="add" @params={{array "roles.create"}}>
+    <ToolbarLink @type="add" @route="roles.create">
       Create role
     </ToolbarLink>
   </ToolbarActions>