diff --git a/ui/lib/core/addon/components/search-select-placeholder.hbs b/ui/lib/core/addon/components/search-select-placeholder.hbs
index 1c1cfa995..60ed981b7 100644
--- a/ui/lib/core/addon/components/search-select-placeholder.hbs
+++ b/ui/lib/core/addon/components/search-select-placeholder.hbs
@@ -1,6 +1,8 @@
-<div class="field">
-  <p class="control has-icons-left has-icons-right">
-    <span class="input has-text-grey-light">{{or @placeholder "Search"}}</span>
-    <Icon @name="search" class="search-icon has-text-grey-light" />
-  </p>
+<div>
+  <div class="field">
+    <p class="control has-icons-left has-icons-right">
+      <span class="input has-text-grey-light">{{or @placeholder "Search"}}</span>
+      <Icon @name="search" class="search-icon has-text-grey-light" />
+    </p>
+  </div>
 </div>
\ No newline at end of file
diff --git a/ui/lib/pki/addon/components/pki-role-form.hbs b/ui/lib/pki/addon/components/pki-role-form.hbs
index 47ed59083..a412d0450 100644
--- a/ui/lib/pki/addon/components/pki-role-form.hbs
+++ b/ui/lib/pki/addon/components/pki-role-form.hbs
@@ -2,35 +2,70 @@
   <div class="box is-sideless is-fullwidth is-marginless">
     <MessageError @errorMessage={{this.errorBanner}} class="has-top-margin-s" />
     {{! ARG TODO write a test for namespace reminder }}
-    <NamespaceReminder @mode={{if @model.isNew "create" "update"}} @noun="PKI role" />
-    {{#each @model.formFieldGroups as |fieldGroup|}}
+    <NamespaceReminder @mode={{if @role.isNew "create" "update"}} @noun="PKI role" />
+    {{#each @role.formFieldGroups as |fieldGroup|}}
       {{#each-in fieldGroup as |group fields|}}
         {{! DEFAULT VIEW }}
         {{#if (eq group "default")}}
           {{#each fields as |attr|}}
-            <FormField
-              data-test-field={{attr}}
-              @attr={{attr}}
-              @model={{@model}}
-              @modelValidations={{this.modelValidations}}
-              @showHelpText={{false}}
-            >
-              <PkiNotValidAfterForm @attr={{attr}} @model={{@model}} />
-            </FormField>
+            {{#if (eq attr.name "issuerRef")}}
+              <div class="has-top-margin-m {{unless this.showDefaultIssuer 'has-bottom-margin-xs' 'has-bottom-margin-m'}}">
+                <FormFieldLabel
+                  for={{attr.name}}
+                  @label="Issuer ref"
+                  @helpText={{(if this.showHelpText attr.options.helpText)}}
+                  @subText={{attr.options.subText}}
+                />
+                <Toggle
+                  @name={{concat attr.name "-toggle"}}
+                  @status="success"
+                  @size="small"
+                  @checked={{this.showDefaultIssuer}}
+                  @onChange={{this.toggleShowDefaultIssuer}}
+                >
+                  <span class="has-text-grey">Use default issuer</span>
+                </Toggle>
+              </div>
+              {{#unless this.showDefaultIssuer}}
+                <div class="has-top-margin-xs has-bottom-margin-l">
+                  <div class="select is-fullwidth">
+                    <Select
+                      @name={{attr.name}}
+                      @options={{this.issuers}}
+                      @valueAttribute={{"issuerDisplayName"}}
+                      @labelAttribute={{"issuerDisplayName"}}
+                      @isFullwidth={{true}}
+                      @selectedValue={{@role.issuerRef}}
+                      @onChange={{action (mut @role.issuerRef)}}
+                    />
+                  </div>
+                </div>
+              {{/unless}}
+            {{else}}
+              <FormField
+                data-test-field={{attr}}
+                @attr={{attr}}
+                @model={{@role}}
+                @modelValidations={{this.modelValidations}}
+                @showHelpText={{false}}
+              >
+                <PkiNotValidAfterForm @attr={{attr}} @model={{@role}} />
+              </FormField>
+            {{/if}}
           {{/each}}
         {{else}}
           {{#let (camelize (concat "show" group)) as |prop|}}
             <ToggleButton
-              @isOpen={{get @model prop}}
+              @isOpen={{get @role prop}}
               @openLabel={{concat "Hide " group}}
               @closedLabel={{group}}
-              @onClick={{fn (mut (get @model prop))}}
+              @onClick={{fn (mut (get @role prop))}}
               class="is-block"
               data-test-toggle-group={{group}}
             />
-            {{#if (get @model prop)}}
+            {{#if (get @role prop)}}
               <div class="box is-tall is-marginless" data-test-toggle-div={{group}}>
-                {{#let (get @model.fieldGroupsInfo group) as |toggleGroup|}}
+                {{#let (get @role.fieldGroupsInfo group) as |toggleGroup|}}
                   {{! HEADER }}
                   {{#if toggleGroup.header}}
                     <div class="has-bottom-margin-s">
@@ -44,16 +79,16 @@
                   {{/if}}
                   {{! FIELDS }}
                   {{#if (eq group "Key usage")}}
-                    <PkiKeyUsage @model={{@model}} />
+                    <PkiKeyUsage @model={{@role}} />
                   {{else if (eq group "Key parameters")}}
-                    <PkiKeyParameters @model={{@model}} @fields={{fields}} />
+                    <PkiKeyParameters @model={{@role}} @fields={{fields}} />
                   {{else}}
                     {{#each fields as |attr|}}
                       <FormField
                         data-test-field={{true}}
                         @attr={{attr}}
-                        @model={{@model}}
-                        @modelValidations={{@modelValidations}}
+                        @model={{@role}}
+                        @modelValidations={{@roleValidations}}
                         @showHelpText={{false}}
                       >
                         {{yield attr}}
@@ -87,7 +122,7 @@
       disabled={{this.save.isRunning}}
       data-test-pki-role-save
     >
-      {{if @model.isNew "Create" "Update"}}
+      {{if @role.isNew "Create" "Update"}}
     </button>
     <button
       type="button"
diff --git a/ui/lib/pki/addon/components/pki-role-form.js b/ui/lib/pki/addon/components/pki-role-form.js
index 365f9281b..7f0d329ad 100644
--- a/ui/lib/pki/addon/components/pki-role-form.js
+++ b/ui/lib/pki/addon/components/pki-role-form.js
@@ -7,6 +7,7 @@ import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
 import { task } from 'ember-concurrency';
 import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 
 /**
  * @module PkiRoleForm
@@ -18,7 +19,8 @@ import { tracked } from '@glimmer/tracking';
  * ```
  * @callback onCancel
  * @callback onSave
- * @param {Object} model - pki/role model.
+ * @param {Object} role - pki/role model.
+ * @param {Array} issuers - pki/issuer model.
  * @param {onCancel} onCancel - Callback triggered when cancel button is clicked.
  * @param {onSave} onSave - Callback triggered on save success.
  */
@@ -31,6 +33,19 @@ export default class PkiRoleForm extends Component {
   @tracked errorBanner;
   @tracked invalidFormAlert;
   @tracked modelValidations;
+  @tracked showDefaultIssuer = true;
+
+  constructor() {
+    super(...arguments);
+
+    this.showDefaultIssuer = this.args.role.issuerRef === 'default';
+  }
+
+  get issuers() {
+    return this.args.issuers?.map((issuer) => {
+      return { issuerDisplayName: issuer.issuerName || issuer.issuerId };
+    });
+  }
 
   get breadcrumbs() {
     const crumbs = [
@@ -38,8 +53,8 @@ export default class PkiRoleForm extends Component {
       { label: this.secretMountPath.currentPath, route: 'overview' },
       { label: 'roles', route: 'roles.index' },
     ];
-    if (!this.args.model.isNew) {
-      crumbs.push({ label: this.args.model.id, route: 'roles.role.details' }, { label: 'edit' });
+    if (!this.args.role.isNew) {
+      crumbs.push({ label: this.args.role.id, route: 'roles.role.details' }, { label: 'edit' });
     }
     return crumbs;
   }
@@ -48,12 +63,12 @@ export default class PkiRoleForm extends Component {
   *save(event) {
     event.preventDefault();
     try {
-      const { isValid, state, invalidFormMessage } = this.args.model.validate();
+      const { isValid, state, invalidFormMessage } = this.args.role.validate();
       this.modelValidations = isValid ? null : state;
       this.invalidFormAlert = invalidFormMessage;
       if (isValid) {
-        const { isNew, name } = this.args.model;
-        yield this.args.model.save();
+        const { isNew, name } = this.args.role;
+        yield this.args.role.save();
         this.flashMessages.success(`Successfully ${isNew ? 'created' : 'updated'} the role ${name}.`);
         this.args.onSave();
       }
@@ -63,4 +78,13 @@ export default class PkiRoleForm extends Component {
       this.invalidFormAlert = 'There was an error submitting this form.';
     }
   }
+
+  @action
+  toggleShowDefaultIssuer() {
+    this.showDefaultIssuer = !this.showDefaultIssuer;
+
+    if (this.showDefaultIssuer) {
+      this.args.role.issuerRef = 'default';
+    }
+  }
 }
diff --git a/ui/lib/pki/addon/routes/roles/create.js b/ui/lib/pki/addon/routes/roles/create.js
index 47838509d..ca9d09bd0 100644
--- a/ui/lib/pki/addon/routes/roles/create.js
+++ b/ui/lib/pki/addon/routes/roles/create.js
@@ -6,15 +6,18 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 import { withConfirmLeave } from 'core/decorators/confirm-leave';
+import { hash } from 'rsvp';
 
-@withConfirmLeave()
+@withConfirmLeave('model.role', ['model.issuers'])
 export default class PkiRolesCreateRoute extends Route {
   @service store;
   @service secretMountPath;
 
   model() {
-    return this.store.createRecord('pki/role', {
-      backend: this.secretMountPath.currentPath,
+    const backend = this.secretMountPath.currentPath;
+    return hash({
+      role: this.store.createRecord('pki/role', { backend }),
+      issuers: this.store.query('pki/issuer', { backend }),
     });
   }
 
diff --git a/ui/lib/pki/addon/routes/roles/role/edit.js b/ui/lib/pki/addon/routes/roles/role/edit.js
index ccb25db21..72f36a6f3 100644
--- a/ui/lib/pki/addon/routes/roles/role/edit.js
+++ b/ui/lib/pki/addon/routes/roles/role/edit.js
@@ -6,23 +6,31 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 import { withConfirmLeave } from 'core/decorators/confirm-leave';
+import { hash } from 'rsvp';
 
-@withConfirmLeave()
+@withConfirmLeave('model.role', ['model.issuers'])
 export default class PkiRoleEditRoute extends Route {
   @service store;
   @service secretMountPath;
 
   model() {
     const { role } = this.paramsFor('roles/role');
-    return this.store.queryRecord('pki/role', {
-      backend: this.secretMountPath.currentPath,
-      id: role,
+    const backend = this.secretMountPath.currentPath;
+
+    return hash({
+      role: this.store.queryRecord('pki/role', {
+        backend,
+        id: role,
+      }),
+      issuers: this.store.query('pki/issuer', { backend }),
     });
   }
 
   setupController(controller, resolvedModel) {
     super.setupController(controller, resolvedModel);
-    const { id } = resolvedModel;
+    const {
+      role: { id },
+    } = resolvedModel;
     controller.breadcrumbs = [
       { label: 'secrets', route: 'secrets', linkExternal: true },
       { label: this.secretMountPath.currentPath, route: 'overview' },
diff --git a/ui/lib/pki/addon/templates/roles/create.hbs b/ui/lib/pki/addon/templates/roles/create.hbs
index 437e6e739..17018893d 100644
--- a/ui/lib/pki/addon/templates/roles/create.hbs
+++ b/ui/lib/pki/addon/templates/roles/create.hbs
@@ -10,7 +10,9 @@
 </PageHeader>
 
 <PkiRoleForm
+  @role={{this.model.role}}
+  @issuers={{this.model.issuers}}
   @model={{this.model}}
   @onCancel={{transition-to "vault.cluster.secrets.backend.pki.roles.index"}}
-  @onSave={{transition-to "vault.cluster.secrets.backend.pki.roles.role.details" this.model.id}}
+  @onSave={{transition-to "vault.cluster.secrets.backend.pki.roles.role.details" this.model.role.id}}
 />
\ No newline at end of file
diff --git a/ui/lib/pki/addon/templates/roles/role/edit.hbs b/ui/lib/pki/addon/templates/roles/role/edit.hbs
index d67accb7d..5e86297e6 100644
--- a/ui/lib/pki/addon/templates/roles/role/edit.hbs
+++ b/ui/lib/pki/addon/templates/roles/role/edit.hbs
@@ -9,7 +9,8 @@
   </p.levelLeft>
 </PageHeader>
 <PkiRoleForm
-  @model={{this.model}}
-  @onCancel={{transition-to "vault.cluster.secrets.backend.pki.roles.role.details" this.model.id}}
-  @onSave={{transition-to "vault.cluster.secrets.backend.pki.roles.role.details" this.model.id}}
+  @role={{this.model.role}}
+  @issuers={{this.model.issuers}}
+  @onCancel={{transition-to "vault.cluster.secrets.backend.pki.roles.role.details" this.model.role.id}}
+  @onSave={{transition-to "vault.cluster.secrets.backend.pki.roles.role.details" this.model.role.id}}
 />
\ No newline at end of file
diff --git a/ui/tests/acceptance/pki/pki-engine-route-cleanup-test.js b/ui/tests/acceptance/pki/pki-engine-route-cleanup-test.js
index 1069b82ba..392505cf2 100644
--- a/ui/tests/acceptance/pki/pki-engine-route-cleanup-test.js
+++ b/ui/tests/acceptance/pki/pki-engine-route-cleanup-test.js
@@ -142,7 +142,8 @@ module('Acceptance | pki engine route cleanup test', function (hooks) {
 
       // Edit role
       await click(SELECTORS.editRoleLink);
-      await fillIn(SELECTORS.roleForm.issuerRef, 'foobar');
+      await click(SELECTORS.roleForm.issuerRefToggle);
+      await fillIn(SELECTORS.roleForm.issuerRefSelect, 'foobar');
       role = this.store.peekRecord('pki/role', roleId);
       assert.true(role.hasDirtyAttributes, 'Role has dirty attrs');
       // Exit page via cancel button
@@ -153,7 +154,8 @@ module('Acceptance | pki engine route cleanup test', function (hooks) {
 
       // Edit again
       await click(SELECTORS.editRoleLink);
-      await fillIn(SELECTORS.roleForm.issuerRef, 'foobar2');
+      await click(SELECTORS.roleForm.issuerRefToggle);
+      await fillIn(SELECTORS.roleForm.issuerRefSelect, 'foobar2');
       role = this.store.peekRecord('pki/role', roleId);
       assert.true(role.hasDirtyAttributes, 'Role has dirty attrs');
       // Exit page via breadcrumbs
diff --git a/ui/tests/helpers/pki/pki-role-form.js b/ui/tests/helpers/pki/pki-role-form.js
index 145f5f05b..605ee22d6 100644
--- a/ui/tests/helpers/pki/pki-role-form.js
+++ b/ui/tests/helpers/pki/pki-role-form.js
@@ -8,6 +8,8 @@ export const PKI_BASE_URL = `/vault/cluster/secrets/backend/pki/roles`;
 export const SELECTORS = {
   roleName: '[data-test-input="name"]',
   issuerRef: '[data-test-input="issuerRef"]',
+  issuerRefSelect: '[data-test-select="issuerRef"]',
+  issuerRefToggle: '[data-test-toggle-label="issuerRef-toggle"]',
   customTtl: '[data-test-field="customTtl"]',
   backdateValidity: '[data-test-ttl-value="Backdate validity"]',
   maxTtl: '[data-test-toggle-label="Max TTL"]',
diff --git a/ui/tests/integration/components/pki/pki-role-form-test.js b/ui/tests/integration/components/pki/pki-role-form-test.js
index bf4545114..99be4d585 100644
--- a/ui/tests/integration/components/pki/pki-role-form-test.js
+++ b/ui/tests/integration/components/pki/pki-role-form-test.js
@@ -19,8 +19,11 @@ module('Integration | Component | pki-role-form', function (hooks) {
 
   hooks.beforeEach(function () {
     this.store = this.owner.lookup('service:store');
-    this.model = this.store.createRecord('pki/role');
-    this.model.backend = 'pki';
+    this.role = this.store.createRecord('pki/role');
+    this.store.createRecord('pki/issuer', { issuerName: 'issuer-0', issuerId: 'abcd-efgh' });
+    this.store.createRecord('pki/issuer', { issuerName: 'issuer-1', issuerId: 'ijkl-mnop' });
+    this.issuers = this.store.peekAll('pki/issuer');
+    this.role.backend = 'pki';
     this.onCancel = sinon.spy();
   });
 
@@ -29,14 +32,15 @@ module('Integration | Component | pki-role-form', function (hooks) {
     await render(
       hbs`
       <PkiRoleForm
-         @model={{this.model}}
+         @role={{this.role}}
+         @issuers={{this.issuers}}
          @onCancel={{this.onCancel}}
          @onSave={{this.onSave}}
        />
   `,
       { owner: this.engine }
     );
-    assert.dom(SELECTORS.issuerRef).exists('shows form-field issuer ref');
+    assert.dom(SELECTORS.issuerRefToggle).exists('shows issuer ref toggle');
     assert.dom(SELECTORS.backdateValidity).exists('shows form-field backdate validity');
     assert.dom(SELECTORS.customTtl).exists('shows custom yielded form field');
     assert.dom(SELECTORS.maxTtl).exists('shows form-field max ttl');
@@ -54,7 +58,7 @@ module('Integration | Component | pki-role-form', function (hooks) {
   test('it should save a new pki role with various options selected', async function (assert) {
     // Key usage, Key params and Not valid after options are tested in their respective component tests
     assert.expect(9);
-    this.server.post(`/${this.model.backend}/roles/test-role`, (schema, req) => {
+    this.server.post(`/${this.role.backend}/roles/test-role`, (schema, req) => {
       assert.ok(true, 'Request made to save role');
       const request = JSON.parse(req.requestBody);
       const allowedDomainsTemplate = request.allowed_domains_template;
@@ -78,7 +82,8 @@ module('Integration | Component | pki-role-form', function (hooks) {
     await render(
       hbs`
       <PkiRoleForm
-         @model={{this.model}}
+         @role={{this.role}}
+         @issuers={{this.issuers}}
          @onCancel={{this.onCancel}}
          @onSave={{this.onSave}}
        />
@@ -87,6 +92,7 @@ module('Integration | Component | pki-role-form', function (hooks) {
     );
 
     await click(SELECTORS.roleCreateButton);
+
     assert
       .dom(SELECTORS.roleName)
       .hasClass('has-error-border', 'shows border error on role name field when no role name is submitted');
@@ -120,6 +126,7 @@ module('Integration | Component | pki-role-form', function (hooks) {
 
   test('it should update attributes on the model on update', async function (assert) {
     assert.expect(1);
+
     this.store.pushPayload('pki/role', {
       modelName: 'pki/role',
       name: 'test-role',
@@ -127,21 +134,22 @@ module('Integration | Component | pki-role-form', function (hooks) {
       id: 'role-id',
     });
 
-    this.model = this.store.peekRecord('pki/role', 'role-id');
+    this.role = this.store.peekRecord('pki/role', 'role-id');
 
     await render(
       hbs`
       <PkiRoleForm
-        @model={{this.model}}
+        @role={{this.role}}
+        @issuers={{this.issuers}}
         @onCancel={{this.onCancel}}
         @onSave={{this.onSave}}
       />
       `,
       { owner: this.engine }
     );
-
-    await fillIn(SELECTORS.issuerRef, 'not-default');
+    await click(SELECTORS.issuerRefToggle);
+    await fillIn(SELECTORS.issuerRefSelect, 'issuer-1');
     await click(SELECTORS.roleCreateButton);
-    assert.strictEqual(this.model.issuerRef, 'not-default', 'Issuer Ref correctly saved on create');
+    assert.strictEqual(this.role.issuerRef, 'issuer-1', 'Issuer Ref correctly saved on create');
   });
 });