diff --git a/ui/core/app/routes/scopes/scope/roles/role/principals.js b/ui/core/app/routes/scopes/scope/roles/role/principals.js
index db40834d2..9e20116b8 100644
--- a/ui/core/app/routes/scopes/scope/roles/role/principals.js
+++ b/ui/core/app/routes/scopes/scope/roles/role/principals.js
@@ -1,8 +1,15 @@
 import Route from '@ember/routing/route';
 import { all } from 'rsvp';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 
 export default class ScopesScopeRolesRolePrincipalsRoute extends Route {
 
+  // =services
+  @service intl;
+  @service notify;
+
+
   // =methods
 
   /**
@@ -34,4 +41,23 @@ export default class ScopesScopeRolesRolePrincipalsRoute extends Route {
     return all(users.concat(groups));
   }
 
+  // =actions
+
+  /**
+   * Remove a principal from the current role and redirect to principals index.
+   * @param {UserModel, GroupModel} principal
+   */
+  @action
+  async removePrincipal(principal) {
+    try {
+      const role = this.modelFor('scopes.scope.roles.role');
+      await role.removePrincipal(principal.id);
+      this.refresh();
+      this.notify.success(this.intl.t('notify.delete-success'));
+      this.transitionTo('scopes.scope.roles.role.principals');
+    } catch (error) {
+      // TODO: replace with translated strings
+      this.notify.error(error.message, { closeAfter: null });
+    }
+  }
 }
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/target/host-sets.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/target/host-sets.hbs
index 9e993038e..00a5058d5 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/targets/target/host-sets.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/target/host-sets.hbs
@@ -25,8 +25,14 @@
             <code>{{hostSet.model.id}}</code>
           </row.cell>
           <row.cell>
-            <Rose::Dropdown @icon="more-horizontal" @iconOnly={{true}} @dropdownRight={{true}} @text="{{t "actions.manage"}}" as |dropdown|>
+            <Rose::Dropdown
+              @icon="more-horizontal"
+              @iconOnly={{true}}
+              @dropdownRight={{true}}
+              @text="{{t "actions.manage"}}" as |dropdown|
+            >
               <dropdown.button
+                name="{{t "actions.remove"}}"
                 @style="danger"
                 {{on "click" (route-action "removeHostSet" @model hostSet.model)}}
               >
diff --git a/ui/core/app/templates/scopes/scope/roles/role/principals.hbs b/ui/core/app/templates/scopes/scope/roles/role/principals.hbs
index 356b8dfb4..b55c636c6 100644
--- a/ui/core/app/templates/scopes/scope/roles/role/principals.hbs
+++ b/ui/core/app/templates/scopes/scope/roles/role/principals.hbs
@@ -1,26 +1,57 @@
 {{title (t 'titles.principals')}}
 
-<Rose::Table as |table|>
-  <table.header as |header|>
-    <header.row as |row|>
-      <row.headerCell>{{t 'form.label.name'}}</row.headerCell>
-      <row.headerCell>{{t 'form.label.type'}}</row.headerCell>
-      <row.headerCell>{{t 'form.label.id'}}</row.headerCell>
-    </header.row>
-  </table.header>
-  <table.body as |body|>
-    {{#each @model as |principal|}}
-      <body.row as |row|>
-        <row.headerCell>
-          {{principal.model.displayName}}
-        </row.headerCell>
-        <row.cell>
-          {{t (concat 'resources.' principal.type)}}
-        </row.cell>
-        <row.cell>
-          <code>{{principal.model.id}}</code>
-        </row.cell>
-      </body.row>
-    {{/each}}
-  </table.body>
-</Rose::Table>
+{{#if @model}}
+
+  <Rose::Table as |table|>
+    <table.header as |header|>
+      <header.row as |row|>
+        <row.headerCell>{{t 'form.label.name'}}</row.headerCell>
+        <row.headerCell>{{t 'form.label.type'}}</row.headerCell>
+        <row.headerCell>{{t 'form.label.id'}}</row.headerCell>
+        <row.headerCell>{{t "form.label.actions"}}</row.headerCell>
+      </header.row>
+    </table.header>
+    <table.body as |body|>
+      {{#each @model as |principal|}}
+        <body.row as |row|>
+          <row.headerCell>
+            {{principal.model.displayName}}
+          </row.headerCell>
+          <row.cell>
+            {{t (concat 'resources.' principal.type)}}
+          </row.cell>
+          <row.cell>
+            <code>{{principal.model.id}}</code>
+          </row.cell>
+            <row.cell>
+            <Rose::Dropdown
+              @icon="more-horizontal"
+              @iconOnly={{true}}
+              @dropdownRight={{true}}
+              @text="{{t "actions.manage"}}" as |dropdown|
+            >
+              <dropdown.button
+                name="{{t "actions.remove"}}"
+                @style="danger"
+                {{on "click" (route-action "removePrincipal" principal.model)}}
+              >
+                {{t "actions.remove"}}
+              </dropdown.button>
+            </Rose::Dropdown>
+          </row.cell>
+        </body.row>
+      {{/each}}
+    </table.body>
+  </Rose::Table>
+
+{{else}}
+
+  <Rose::Layout::Centered>
+    <Rose::Message @title={{t "titles.role-principals-welcome"}} as |message|>
+      <message.description>
+        {{t "descriptions.role-principals-welcome"}}
+      </message.description>
+    </Rose::Message>
+  </Rose::Layout::Centered>
+
+{{/if}}
\ No newline at end of file
diff --git a/ui/core/tests/acceptance/roles-test.js b/ui/core/tests/acceptance/roles-test.js
index 14bd45a24..5fc89b42e 100644
--- a/ui/core/tests/acceptance/roles-test.js
+++ b/ui/core/tests/acceptance/roles-test.js
@@ -222,6 +222,10 @@ module('Acceptance | roles', function (hooks) {
     assert.expect(0);
   });
 
+  test('principal can be removed from a role', async function(assert) {
+    assert.expect(0);
+  });
+
   test('grants can be updated and saved or canceled', async function (assert) {
     assert.expect(0);
   });
diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml
index f60803a09..655821ec8 100644
--- a/ui/core/translations/en-us.yaml
+++ b/ui/core/translations/en-us.yaml
@@ -92,6 +92,7 @@ titles:
   global: Global
   no-host-set-hosts: No Hosts Available
   no-host-sets-for-target: No Host Sets Available
+  role-principals-welcome: No Principals Associated
 descriptions:
   host-catalogs: Overview of collections of hosts and host sets.
   empty-set: There are no items to display yet.  You may be able to add items or try back later.
@@ -107,6 +108,7 @@ descriptions:
   target-host-sets-welcome: Add Host Sets to this target to provide access.
   no-host-set-hosts: Before associating hosts with this host set, create hosts within the host catalog.
   no-host-sets-for-target: No host sets are available to add to this target.
+  role-principals-welcome: No principals are available in this role.
 states:
   info: Info
   success: Success