diff --git a/ui/core/app/controllers/scopes/scope/roles/role/add-principals.js b/ui/core/app/controllers/scopes/scope/roles/role/add-principals.js
new file mode 100644
index 000000000..36c232398
--- /dev/null
+++ b/ui/core/app/controllers/scopes/scope/roles/role/add-principals.js
@@ -0,0 +1,20 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class ScopesScopeRolesRoleAddPrincipalsController extends Controller {
+
+  // =services
+
+  @service intl;
+
+  // =attributes
+
+  /**
+   * Translated roles breadcrumb
+   * @type {string}
+   */
+  get breadCrumb() {
+    return this.intl.t('actions.add-principals');
+  }
+
+}
diff --git a/ui/core/app/router.js b/ui/core/app/router.js
index effcb4523..6df274629 100644
--- a/ui/core/app/router.js
+++ b/ui/core/app/router.js
@@ -62,6 +62,7 @@ Router.map(function () {
         this.route('role', { path: ':role_id' }, function () {
           this.route('grants');
           this.route('principals');
+          this.route('add-principals');
         });
         this.route('new');
       });
diff --git a/ui/core/app/routes/scopes/scope/roles/role/add-principals.js b/ui/core/app/routes/scopes/scope/roles/role/add-principals.js
new file mode 100644
index 000000000..1c4d8bbb8
--- /dev/null
+++ b/ui/core/app/routes/scopes/scope/roles/role/add-principals.js
@@ -0,0 +1,29 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeRolesRoleAddPrincipalsRoute extends Route {
+
+  // =methods
+
+  /**
+   * Empties the actions and navigation outlets and renders a custom header.
+   * @override
+   */
+  renderTemplate() {
+    super.renderTemplate(...arguments);
+
+    this.render('scopes/scope/roles/role/add-principals/-header', {
+      into: 'scopes/scope/roles/role',
+      outlet: 'header'
+    });
+
+    this.render('-empty', {
+      into: 'scopes/scope/roles/role',
+      outlet: 'actions'
+    });
+
+    this.render('-empty', {
+      into: 'scopes/scope/roles/role',
+      outlet: 'navigation'
+    });
+  }
+}
diff --git a/ui/core/app/templates/scopes/scope/roles/role/-actions.hbs b/ui/core/app/templates/scopes/scope/roles/role/-actions.hbs
index 6cdf1f9e9..576a6a8fb 100644
--- a/ui/core/app/templates/scopes/scope/roles/role/-actions.hbs
+++ b/ui/core/app/templates/scopes/scope/roles/role/-actions.hbs
@@ -1,4 +1,7 @@
 <Rose::Dropdown @text="{{t 'actions.manage'}}" @dropdownRight={{true}} as |dropdown|>
+  <dropdown.link @route="scopes.scope.roles.role.add-principals">
+    {{t 'actions.add-principals'}}
+  </dropdown.link>
   <dropdown.button
     @style="danger"
     @disabled={{@model.canSave}}
diff --git a/ui/core/app/templates/scopes/scope/roles/role/add-principals.hbs b/ui/core/app/templates/scopes/scope/roles/role/add-principals.hbs
new file mode 100644
index 000000000..cf8fdc119
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/roles/role/add-principals.hbs
@@ -0,0 +1,3 @@
+{{title (t "actions.add-principals")}}
+
+{{outlet}}
diff --git a/ui/core/app/templates/scopes/scope/roles/role/add-principals/-header.hbs b/ui/core/app/templates/scopes/scope/roles/role/add-principals/-header.hbs
new file mode 100644
index 000000000..8696fed6d
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/roles/role/add-principals/-header.hbs
@@ -0,0 +1 @@
+<h2>{{t "actions.add-principals"}}</h2>
diff --git a/ui/core/tests/unit/controllers/scopes/scope/roles/role/add-principals-test.js b/ui/core/tests/unit/controllers/scopes/scope/roles/role/add-principals-test.js
new file mode 100644
index 000000000..a214f448a
--- /dev/null
+++ b/ui/core/tests/unit/controllers/scopes/scope/roles/role/add-principals-test.js
@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Controller | scopes/scope/roles/role/add-principals', function(hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function(assert) {
+    let controller = this.owner.lookup('controller:scopes/scope/roles/role/add-principals');
+    assert.ok(controller);
+  });
+});
diff --git a/ui/core/tests/unit/routes/scopes/scope/roles/role/add-principals-test.js b/ui/core/tests/unit/routes/scopes/scope/roles/role/add-principals-test.js
new file mode 100644
index 000000000..3d4a91c31
--- /dev/null
+++ b/ui/core/tests/unit/routes/scopes/scope/roles/role/add-principals-test.js
@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | scopes/scope/roles/role/add-principals', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/roles/role/add-principals');
+    assert.ok(route);
+  });
+});
diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml
index 655821ec8..427c1b956 100644
--- a/ui/core/translations/en-us.yaml
+++ b/ui/core/translations/en-us.yaml
@@ -23,6 +23,7 @@ actions:
   add-host-set: Create Host Set
   add-host: Create Host
   add-host-sets: Add Host Sets
+  add-principals: Add Principals
 auth:
   titles:
     no-scopes: No Scopes Available