diff --git a/addons/api/addon/models/role.js b/addons/api/addon/models/role.js
index 226c27b2f..d93a3c5f1 100644
--- a/addons/api/addon/models/role.js
+++ b/addons/api/addon/models/role.js
@@ -155,7 +155,6 @@ export default class RoleModel extends GeneratedRoleModel {
     // return a promise resolving to an empty array
     return resolve([]);
   }
-
   // =methods
 
   /**
diff --git a/ui/admin/app/components/link-to-principal/index.hbs b/ui/admin/app/components/link-to-principal/index.hbs
new file mode 100644
index 000000000..b7ae90c75
--- /dev/null
+++ b/ui/admin/app/components/link-to-principal/index.hbs
@@ -0,0 +1,12 @@
+{{#if this.isManagedGroup}}
+  <LinkTo
+    @route={{this.link}}
+    @models={{array @model.auth_method_id @model.id}}
+  >
+    {{@model.displayName}}
+  </LinkTo>
+{{else}}
+  <LinkTo @route={{this.link}} @model={{@model.id}}>
+    {{@model.displayName}}
+  </LinkTo>
+{{/if}}
\ No newline at end of file
diff --git a/ui/admin/app/components/link-to-principal/index.js b/ui/admin/app/components/link-to-principal/index.js
new file mode 100644
index 000000000..a2adfb65e
--- /dev/null
+++ b/ui/admin/app/components/link-to-principal/index.js
@@ -0,0 +1,26 @@
+import Component from '@glimmer/component';
+
+const principalTypeRoutes = {
+  user: 'scopes.scope.users.user',
+  group: 'scopes.scope.groups.group',
+  'managed-group':
+    'scopes.scope.auth-methods.auth-method.managed-groups.managed-group',
+};
+
+export default class LinkToPrincipalComponent extends Component {
+  /**
+   * return true if its a managed group model
+   * @type {boolean}
+   */
+  get isManagedGroup() {
+    return this.args.model.constructor.modelName === 'managed-group';
+  }
+
+ /**
+   * return route based on principal type
+   * @type {string}
+   */
+  get link() {
+    return principalTypeRoutes[this.args.model.constructor.modelName];
+  }
+}
diff --git a/ui/admin/app/components/principal-type-badge/index.hbs b/ui/admin/app/components/principal-type-badge/index.hbs
new file mode 100644
index 000000000..7c648d8a1
--- /dev/null
+++ b/ui/admin/app/components/principal-type-badge/index.hbs
@@ -0,0 +1,6 @@
+<Hds::Badge
+  @icon={{this.icon}}
+  @text={{t
+    (concat 'resources.role.principal.types.' @model.constructor.modelName)
+  }}
+/>
\ No newline at end of file
diff --git a/ui/admin/app/components/principal-type-badge/index.js b/ui/admin/app/components/principal-type-badge/index.js
new file mode 100644
index 000000000..657638be9
--- /dev/null
+++ b/ui/admin/app/components/principal-type-badge/index.js
@@ -0,0 +1,17 @@
+import Component from '@glimmer/component';
+
+const principalTypes = {
+  user: 'user',
+  group: 'folder-users',
+  'managed-group': 'cloud-lock',
+};
+export default class PrincipalTypeBadgeComponent extends Component {
+  /**
+   * Display icons based on the pricipal type
+   * @type {string}
+   */
+
+  get icon() {
+    return principalTypes[this.args.model.constructor.modelName];
+  }
+}
diff --git a/ui/admin/app/templates/scopes/scope/roles/role/principals.hbs b/ui/admin/app/templates/scopes/scope/roles/role/principals.hbs
index 27c75899b..fa94d5964 100644
--- a/ui/admin/app/templates/scopes/scope/roles/role/principals.hbs
+++ b/ui/admin/app/templates/scopes/scope/roles/role/principals.hbs
@@ -46,7 +46,11 @@
           {{#each @model.principals as |principal|}}
             <body.row as |row|>
               <row.headerCell>
-                {{principal.displayName}}
+                {{#if (can 'readPrincipal role' principal)}}
+                  <LinkToPrincipal @model={{principal}} />
+                {{else}}
+                  {{principal.displayName}}
+                {{/if}}
                 {{#if principal.accountName}}
                   <br /><Hds::Badge @text={{principal.accountName}} />
                 {{/if}}
@@ -61,19 +65,7 @@
                 </Copyable>
               </row.cell>
               <row.cell>
-                <Hds::Badge
-                  @icon={{if
-                    (eq principal.constructor.modelName 'group')
-                    'folder-users'
-                    'user'
-                  }}
-                  @text={{t
-                    (concat
-                      'resources.role.principal.types.'
-                      principal.constructor.modelName
-                    )
-                  }}
-                />
+                <PrincipalTypeBadge @model={{principal}} />
               </row.cell>
               <row.cell>
                 <ScopeBadge @scope={{principal.scopeModel}} />