diff --git a/package.json b/package.json
index fff545633..ccb63380a 100755
--- a/package.json
+++ b/package.json
@@ -84,7 +84,8 @@
     "ansi-regex": "^5.0.1",
     "ember-cli-babel": "^7.26.8",
     "jsonpointer": "5.0.0",
-    "json-schema": "^0.4.0"
+    "json-schema": "^0.4.0",
+    "follow-redirects": "^1.14.7"
   },
   "config": {
     "commitizen": {
diff --git a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/-actions.hbs b/ui/admin/app/components/credential-stores/credential-store/actions/index.hbs
similarity index 100%
rename from ui/admin/app/templates/scopes/scope/credential-stores/credential-store/-actions.hbs
rename to ui/admin/app/components/credential-stores/credential-store/actions/index.hbs
diff --git a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/-header.hbs b/ui/admin/app/components/credential-stores/credential-store/header/index.hbs
similarity index 100%
rename from ui/admin/app/templates/scopes/scope/credential-stores/credential-store/-header.hbs
rename to ui/admin/app/components/credential-stores/credential-store/header/index.hbs
diff --git a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/-navigation.hbs b/ui/admin/app/components/credential-stores/credential-store/nav/index.hbs
similarity index 100%
rename from ui/admin/app/templates/scopes/scope/credential-stores/credential-store/-navigation.hbs
rename to ui/admin/app/components/credential-stores/credential-store/nav/index.hbs
diff --git a/ui/admin/app/templates/scopes/scope/groups/group/-actions.hbs b/ui/admin/app/components/groups/group/actions/index.hbs
similarity index 100%
rename from ui/admin/app/templates/scopes/scope/groups/group/-actions.hbs
rename to ui/admin/app/components/groups/group/actions/index.hbs
diff --git a/ui/admin/app/templates/scopes/scope/groups/group/-header.hbs b/ui/admin/app/components/groups/group/header/index.hbs
similarity index 100%
rename from ui/admin/app/templates/scopes/scope/groups/group/-header.hbs
rename to ui/admin/app/components/groups/group/header/index.hbs
diff --git a/ui/admin/app/templates/scopes/scope/groups/group/-navigation.hbs b/ui/admin/app/components/groups/group/nav/index.hbs
similarity index 100%
rename from ui/admin/app/templates/scopes/scope/groups/group/-navigation.hbs
rename to ui/admin/app/components/groups/group/nav/index.hbs
diff --git a/ui/admin/app/templates/scopes/scope/roles/role/-actions.hbs b/ui/admin/app/components/roles/role/actions/index.hbs
similarity index 100%
rename from ui/admin/app/templates/scopes/scope/roles/role/-actions.hbs
rename to ui/admin/app/components/roles/role/actions/index.hbs
diff --git a/ui/admin/app/templates/scopes/scope/roles/role/-header.hbs b/ui/admin/app/components/roles/role/header/index.hbs
similarity index 100%
rename from ui/admin/app/templates/scopes/scope/roles/role/-header.hbs
rename to ui/admin/app/components/roles/role/header/index.hbs
diff --git a/ui/admin/app/templates/scopes/scope/roles/role/-navigation.hbs b/ui/admin/app/components/roles/role/nav/index.hbs
similarity index 100%
rename from ui/admin/app/templates/scopes/scope/roles/role/-navigation.hbs
rename to ui/admin/app/components/roles/role/nav/index.hbs
diff --git a/ui/admin/app/controllers/scopes/scope/credential-stores/credential-store/credential-libraries/credential-library.js b/ui/admin/app/controllers/scopes/scope/credential-stores/credential-store/credential-libraries/credential-library.js
new file mode 100644
index 000000000..ec222f462
--- /dev/null
+++ b/ui/admin/app/controllers/scopes/scope/credential-stores/credential-store/credential-libraries/credential-library.js
@@ -0,0 +1,13 @@
+import Controller from '@ember/controller';
+
+export default class ScopesScopeCredentialStoresCredentialStoreCredentialLibrariesCredentialLibraryController extends Controller {
+  // =attributes
+
+  /**
+   * A model breadcrumb
+   * @type {string}
+   */
+  get breadCrumb() {
+    return this.model.displayName;
+  }
+}
diff --git a/ui/admin/app/controllers/scopes/scope/credential-stores/new.js b/ui/admin/app/controllers/scopes/scope/credential-stores/new.js
new file mode 100644
index 000000000..3f50abb13
--- /dev/null
+++ b/ui/admin/app/controllers/scopes/scope/credential-stores/new.js
@@ -0,0 +1,18 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class ScopesScopeCredentialStoresNewController extends Controller {
+  // =services
+
+  @service intl;
+
+  // =attributes
+
+  /**
+   * Breadcrumb for new route
+   * @type {string}
+   */
+  get breadCrumb() {
+    return this.intl.t('titles.new');
+  }
+}
diff --git a/ui/admin/app/routes/scopes/scope/credential-stores/credential-store.js b/ui/admin/app/routes/scopes/scope/credential-stores/credential-store.js
index 046b8a01c..e995f11b0 100644
--- a/ui/admin/app/routes/scopes/scope/credential-stores/credential-store.js
+++ b/ui/admin/app/routes/scopes/scope/credential-stores/credential-store.js
@@ -8,27 +8,4 @@ export default class ScopesScopeCredentialStoresCredentialStoreRoute extends Rou
   async model({ credential_store_id }) {
     return this.store.findRecord('credential-store', credential_store_id);
   }
-
-  /**
-   * Render credential store header, navigation and actions page sections.
-   * @override
-   */
-  renderTemplate() {
-    super.renderTemplate(...arguments);
-
-    this.render('scopes/scope/credential-stores/credential-store/-header', {
-      into: 'scopes/scope/credential-stores/credential-store',
-      outlet: 'header',
-    });
-
-    this.render('scopes/scope/credential-stores/credential-store/-navigation', {
-      into: 'scopes/scope/credential-stores/credential-store',
-      outlet: 'navigation',
-    });
-
-    this.render('scopes/scope/credential-stores/credential-store/-actions', {
-      into: 'scopes/scope/credential-stores/credential-store',
-      outlet: 'actions',
-    });
-  }
 }
diff --git a/ui/admin/app/routes/scopes/scope/credential-stores/credential-store/credential-libraries.js b/ui/admin/app/routes/scopes/scope/credential-stores/credential-store/credential-libraries.js
index a8f8db78a..09eec86c6 100644
--- a/ui/admin/app/routes/scopes/scope/credential-stores/credential-store/credential-libraries.js
+++ b/ui/admin/app/routes/scopes/scope/credential-stores/credential-store/credential-libraries.js
@@ -81,7 +81,7 @@ export default class ScopesScopeCredentialStoresCredentialStoreCredentialLibrari
   @confirm('questions.delete-confirm')
   @notifyError(({ message }) => message, { catch: true })
   @notifySuccess('notifications.delete-success')
-  async delete(credentialLibrary) {
+  async deleteCredentialLibrary(credentialLibrary) {
     await credentialLibrary.destroyRecord();
     await this.router.replaceWith(
       'scopes.scope.credential-stores.credential-store.credential-libraries'
diff --git a/ui/admin/app/routes/scopes/scope/credential-stores/credential-store/credential-libraries/credential-library.js b/ui/admin/app/routes/scopes/scope/credential-stores/credential-store/credential-libraries/credential-library.js
index 45f5953fb..00b935f23 100644
--- a/ui/admin/app/routes/scopes/scope/credential-stores/credential-store/credential-libraries/credential-library.js
+++ b/ui/admin/app/routes/scopes/scope/credential-stores/credential-store/credential-libraries/credential-library.js
@@ -14,36 +14,4 @@ export default class ScopesScopeCredentialStoresCredentialStoreCredentialLibrari
       reload: true,
     });
   }
-
-  /**
-   * Renders the credential library specific templates for header, navigation, and action page sections.
-   * @override
-   */
-  renderTemplate() {
-    super.renderTemplate(...arguments);
-
-    this.render(
-      'scopes/scope/credential-stores/credential-store/credential-libraries/credential-library/-header',
-      {
-        into: 'scopes/scope/credential-stores/credential-store',
-        outlet: 'header',
-      }
-    );
-
-    this.render(
-      'scopes/scope/credential-stores/credential-store/credential-libraries/credential-library/-navigation',
-      {
-        into: 'scopes/scope/credential-stores/credential-store',
-        outlet: 'navigation',
-      }
-    );
-
-    this.render(
-      'scopes/scope/credential-stores/credential-store/credential-libraries/credential-library/-actions',
-      {
-        into: 'scopes/scope/credential-stores/credential-store',
-        outlet: 'actions',
-      }
-    );
-  }
 }
diff --git a/ui/admin/app/routes/scopes/scope/credential-stores/credential-store/credential-libraries/new.js b/ui/admin/app/routes/scopes/scope/credential-stores/credential-store/credential-libraries/new.js
index c9ccc770c..d6c3db15b 100644
--- a/ui/admin/app/routes/scopes/scope/credential-stores/credential-store/credential-libraries/new.js
+++ b/ui/admin/app/routes/scopes/scope/credential-stores/credential-store/credential-libraries/new.js
@@ -16,31 +16,4 @@ export default class ScopesScopeCredentialStoresCredentialStoreCredentialLibrari
       credential_store_id,
     });
   }
-
-  /**
-   * Renders new credential library specific templates for header, navigation,
-   * and action page sections.
-   * @override
-   */
-  renderTemplate() {
-    super.renderTemplate(...arguments);
-
-    this.render(
-      'scopes/scope/credential-stores/credential-store/credential-libraries/new/-header',
-      {
-        into: 'scopes/scope/credential-stores/credential-store',
-        outlet: 'header',
-      }
-    );
-
-    this.render('_empty', {
-      into: 'scopes/scope/credential-stores/credential-store',
-      outlet: 'navigation',
-    });
-
-    this.render('_empty', {
-      into: 'scopes/scope/credential-stores/credential-store',
-      outlet: 'actions',
-    });
-  }
 }
diff --git a/ui/admin/app/routes/scopes/scope/groups/group.js b/ui/admin/app/routes/scopes/scope/groups/group.js
index 0d9ad56bf..75a1c70d2 100644
--- a/ui/admin/app/routes/scopes/scope/groups/group.js
+++ b/ui/admin/app/routes/scopes/scope/groups/group.js
@@ -12,27 +12,4 @@ export default class ScopesScopeGroupsGroupRoute extends Route {
   model({ group_id }) {
     return this.store.findRecord('group', group_id, { reload: true });
   }
-
-  /**
-   * Renders the route-set specific page sections
-   * @override
-   */
-  renderTemplate() {
-    super.renderTemplate(...arguments);
-
-    this.render('scopes/scope/groups/group/-header', {
-      into: 'scopes/scope/groups/group',
-      outlet: 'header',
-    });
-
-    this.render('scopes/scope/groups/group/-actions', {
-      into: 'scopes/scope/groups/group',
-      outlet: 'actions',
-    });
-
-    this.render('scopes/scope/groups/group/-navigation', {
-      into: 'scopes/scope/groups/group',
-      outlet: 'navigation',
-    });
-  }
 }
diff --git a/ui/admin/app/routes/scopes/scope/groups/group/add-members.js b/ui/admin/app/routes/scopes/scope/groups/group/add-members.js
index fda2aaaed..7629c17d9 100644
--- a/ui/admin/app/routes/scopes/scope/groups/group/add-members.js
+++ b/ui/admin/app/routes/scopes/scope/groups/group/add-members.js
@@ -34,29 +34,6 @@ export default class ScopesScopeGroupsGroupAddMembersRoute extends Route {
     });
   }
 
-  /**
-   * Renders the route-set specific page sections
-   * @override
-   */
-  renderTemplate() {
-    super.renderTemplate(...arguments);
-
-    this.render('scopes/scope/groups/group/add-members/-header', {
-      into: 'scopes/scope/groups/group',
-      outlet: 'header',
-    });
-
-    this.render('-empty', {
-      into: 'scopes/scope/groups/group',
-      outlet: 'actions',
-    });
-
-    this.render('-empty', {
-      into: 'scopes/scope/groups/group',
-      outlet: 'navigation',
-    });
-  }
-
   // =actions
 
   /**
diff --git a/ui/admin/app/routes/scopes/scope/roles/role.js b/ui/admin/app/routes/scopes/scope/roles/role.js
index 23ff8220c..54c98ec4c 100644
--- a/ui/admin/app/routes/scopes/scope/roles/role.js
+++ b/ui/admin/app/routes/scopes/scope/roles/role.js
@@ -16,28 +16,4 @@ export default class ScopesScopeRolesRoleRoute extends Route {
       adapterOptions: { scopeID },
     });
   }
-
-  /**
-   * Renders the role specific templates for header, navigation,
-   * and actions page sections.
-   * @override
-   */
-  renderTemplate() {
-    super.renderTemplate(...arguments);
-
-    this.render('scopes/scope/roles/role/-header', {
-      into: 'scopes/scope/roles/role',
-      outlet: 'header',
-    });
-
-    this.render('scopes/scope/roles/role/-navigation', {
-      into: 'scopes/scope/roles/role',
-      outlet: 'navigation',
-    });
-
-    this.render('scopes/scope/roles/role/-actions', {
-      into: 'scopes/scope/roles/role',
-      outlet: 'actions',
-    });
-  }
 }
diff --git a/ui/admin/app/routes/scopes/scope/roles/role/add-principals.js b/ui/admin/app/routes/scopes/scope/roles/role/add-principals.js
index c6dcf8b50..1d29243d7 100644
--- a/ui/admin/app/routes/scopes/scope/roles/role/add-principals.js
+++ b/ui/admin/app/routes/scopes/scope/roles/role/add-principals.js
@@ -28,30 +28,6 @@ export default class ScopesScopeRolesRoleAddPrincipalsRoute extends Route {
     });
   }
 
-  /**
-   * Renders the add-principals-specific header template.
-   * Empties the actions and navigation outlets and renders a custom empty 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: 'navigation',
-    });
-
-    this.render('-empty', {
-      into: 'scopes/scope/roles/role',
-      outlet: 'actions',
-    });
-  }
-
   // =actions
 
   /**
diff --git a/ui/admin/app/routes/scopes/scope/roles/role/grants.js b/ui/admin/app/routes/scopes/scope/roles/role/grants.js
index 11cfa1516..76d7c7ef3 100644
--- a/ui/admin/app/routes/scopes/scope/roles/role/grants.js
+++ b/ui/admin/app/routes/scopes/scope/roles/role/grants.js
@@ -10,22 +10,6 @@ export default class ScopesScopeRolesRoleGrantsRoute extends Route {
   @service intl;
   @service notify;
 
-  // =methods
-
-  /**
-   * Renders the grants-specific header template.
-   * Empties the actions and navigation outlets and renders a custom empty header.
-   * @override
-   */
-  renderTemplate() {
-    super.renderTemplate(...arguments);
-
-    this.render('scopes/scope/roles/role/grants/-header', {
-      into: 'scopes/scope/roles/role',
-      outlet: 'header',
-    });
-  }
-
   // =actions
 
   /**
diff --git a/ui/admin/app/routes/scopes/scope/roles/role/principals.js b/ui/admin/app/routes/scopes/scope/roles/role/principals.js
index 6c3b38925..17172e0f8 100644
--- a/ui/admin/app/routes/scopes/scope/roles/role/principals.js
+++ b/ui/admin/app/routes/scopes/scope/roles/role/principals.js
@@ -45,20 +45,6 @@ export default class ScopesScopeRolesRolePrincipalsRoute extends Route {
     });
   }
 
-  /**
-   * Renders the principals-specific header template.
-   * Empties the actions and navigation outlets and renders a custom empty header.
-   * @override
-   */
-  renderTemplate() {
-    super.renderTemplate(...arguments);
-
-    this.render('scopes/scope/roles/role/principals/-header', {
-      into: 'scopes/scope/roles/role',
-      outlet: 'header',
-    });
-  }
-
   // =actions
 
   /**
diff --git a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store.hbs b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store.hbs
index efc46641a..7d32ecb0d 100644
--- a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store.hbs
+++ b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store.hbs
@@ -1,24 +1,3 @@
 {{page-title @model.displayName}}
 
-<Rose::Layout::Page as |page|>
-
-  <page.breadcrumbs>
-    <BreadCrumbs />
-  </page.breadcrumbs>
-
-  <page.header>
-    {{outlet 'header'}}
-  </page.header>
-
-  <page.navigation>
-    {{outlet 'navigation'}}
-  </page.navigation>
-
-  <page.actions>
-    {{outlet 'actions'}}
-  </page.actions>
-
-  <page.body>
-    {{outlet}}
-  </page.body>
-</Rose::Layout::Page>
\ No newline at end of file
+{{outlet}}
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/credential-library/-actions.hbs b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/credential-library/-actions.hbs
deleted file mode 100644
index 4399f847b..000000000
--- a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/credential-library/-actions.hbs
+++ /dev/null
@@ -1,15 +0,0 @@
-{{#if (can 'delete model' @model)}}
-  <Rose::Dropdown
-    @text={{t 'actions.manage'}}
-    @dropdownRight={{true}}
-    as |dropdown|
-  >
-    <dropdown.button
-      @style='danger'
-      @disabled={{@model.canSave}}
-      {{on 'click' (route-action 'delete' @model)}}
-    >
-      {{t 'resources.credential-library.actions.delete'}}
-    </dropdown.button>
-  </Rose::Dropdown>
-{{/if}}
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/credential-library/-header.hbs b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/credential-library/-header.hbs
deleted file mode 100644
index 229448ada..000000000
--- a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/credential-library/-header.hbs
+++ /dev/null
@@ -1,12 +0,0 @@
-<h2>
-  {{t 'resources.credential-library.title'}}
-  <DocLink @doc='credential-library' @iconSize='large' />
-</h2>
-<p>{{t 'resources.credential-library.description'}}</p>
-<Copyable
-  @text={{@model.id}}
-  @buttonText={{t 'actions.copy-to-clipboard'}}
-  @acknowledgeText={{t 'states.copied'}}
->
-  <code>{{@model.id}}</code>
-</Copyable>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/credential-library/-navigation.hbs b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/credential-library/-navigation.hbs
deleted file mode 100644
index d5bb5cf63..000000000
--- a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/credential-library/-navigation.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-<Rose::Nav::Tabs as |nav|>
-  <nav.link
-    @route='scopes.scope.credential-stores.credential-store.credential-libraries.credential-library.index'
-  >
-    {{t 'titles.details'}}
-  </nav.link>
-</Rose::Nav::Tabs>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/credential-library/index.hbs b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/credential-library/index.hbs
index 648221a43..fe4f7069e 100644
--- a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/credential-library/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/credential-library/index.hbs
@@ -1,5 +1,57 @@
-<Form::CredentialLibrary
-  @model={{@model}}
-  @submit={{route-action 'save' @model}}
-  @cancel={{route-action 'cancel' @model}}
-/>
\ No newline at end of file
+<Rose::Layout::Page as |page|>
+
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <h2>
+      {{t 'resources.credential-library.title'}}
+      <DocLink @doc='credential-library' @iconSize='large' />
+    </h2>
+    <p>{{t 'resources.credential-library.description'}}</p>
+    <Copyable
+      @text={{@model.id}}
+      @buttonText={{t 'actions.copy-to-clipboard'}}
+      @acknowledgeText={{t 'states.copied'}}
+    >
+      <code>{{@model.id}}</code>
+    </Copyable>
+  </page.header>
+
+  <page.navigation>
+    <Rose::Nav::Tabs as |nav|>
+      <nav.link
+        @route='scopes.scope.credential-stores.credential-store.credential-libraries.credential-library.index'
+      >
+        {{t 'titles.details'}}
+      </nav.link>
+    </Rose::Nav::Tabs>
+  </page.navigation>
+
+  <page.actions>
+    {{#if (can 'delete model' @model)}}
+      <Rose::Dropdown
+        @text={{t 'actions.manage'}}
+        @dropdownRight={{true}}
+        as |dropdown|
+      >
+        <dropdown.button
+          @style='danger'
+          @disabled={{@model.canSave}}
+          {{on 'click' (route-action 'deleteCredentialLibrary' @model)}}
+        >
+          {{t 'resources.credential-library.actions.delete'}}
+        </dropdown.button>
+      </Rose::Dropdown>
+    {{/if}}
+  </page.actions>
+
+  <page.body>
+    <Form::CredentialLibrary
+      @model={{@model}}
+      @submit={{route-action 'save' @model}}
+      @cancel={{route-action 'cancel' @model}}
+    />
+  </page.body>
+</Rose::Layout::Page>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/index.hbs b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/index.hbs
index 8f1b0ba98..d231ca381 100644
--- a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/index.hbs
@@ -1,102 +1,128 @@
-{{#if @model}}
+<Rose::Layout::Page as |page|>
 
-  <Rose::Table as |table|>
-    <table.header as |header|>
-      <header.row as |row|>
-        <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
-        <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
-        <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
-      </header.row>
-    </table.header>
-    <table.body as |body|>
-      {{#each @model as |credentialLibrary|}}
-        <body.row as |row|>
-          <row.headerCell>
-            {{#if (can 'read model' credentialLibrary)}}
-              <LinkTo
-                @route='scopes.scope.credential-stores.credential-store.credential-libraries.credential-library'
-                @model={{credentialLibrary.id}}
-              >
-                {{credentialLibrary.displayName}}
-              </LinkTo>
-            {{else}}
-              {{credentialLibrary.displayName}}
-            {{/if}}
-            <p>{{credentialLibrary.description}}</p>
-          </row.headerCell>
-          <row.cell>
-            <Rose::Badge>{{t
-                (concat
-                  'resources.credential-library.types.' credentialLibrary.type
-                )
-              }}</Rose::Badge>
-          </row.cell>
-          <row.cell>
-            <Copyable
-              @text={{credentialLibrary.id}}
-              @buttonText={{t 'actions.copy-to-clipboard'}}
-              @acknowledgeText={{t 'states.copied'}}
-            >
-              <code>{{credentialLibrary.id}}</code>
-            </Copyable>
-          </row.cell>
-        </body.row>
-      {{/each}}
-    </table.body>
-  </Rose::Table>
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
 
-{{else}}
+  <page.header>
+    <CredentialStores::CredentialStore::Header
+      @model={{this.credentialStore}}
+    />
+  </page.header>
 
-  <Rose::Layout::Centered>
-    <Rose::Message
-      @title={{t 'resources.credential-library.messages.none.title'}}
-      as |message|
-    >
-      <message.description>
-        {{#if
-          (can
-            'list collection'
-            this.credentialStore
-            collection='credential-libraries'
-          )
-        }}
-          {{! can list (at least):  show default welcome message}}
-          {{t 'resources.credential-library.description'}}
+  <page.navigation>
+    <CredentialStores::CredentialStore::Nav @model={{this.credentialStore}} />
+  </page.navigation>
 
-        {{else if (can
-          'create collection'
-          this.credentialStore
-          collection='credential-libraries'
-        )}}
-          {{! can create (only):  show create-but-not-list welcome message}}
-          {{t
-            'descriptions.create-but-not-list'
-            resource=(t 'resources.credential-library.title_plural')
-          }}
-        {{else}}
-          {{! can neither list nor create }}
-          {{t
-            'descriptions.neither-list-nor-create'
-            resource=(t 'resources.credential-library.title_plural')
-          }}
-        {{/if}}
+  <page.actions>
+    <CredentialStores::CredentialStore::Actions
+      @model={{this.credentialStore}}
+    />
+  </page.actions>
 
-      </message.description>
-      {{#if
-        (can
-          'create collection'
-          this.credentialStore
-          collection='credential-libraries'
-        )
-      }}
-        <message.link
-          @route='scopes.scope.credential-stores.credential-store.credential-libraries.new'
+  <page.body>
+    {{#if @model}}
+
+      <Rose::Table as |table|>
+        <table.header as |header|>
+          <header.row as |row|>
+            <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
+            <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
+            <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
+          </header.row>
+        </table.header>
+        <table.body as |body|>
+          {{#each @model as |credentialLibrary|}}
+            <body.row as |row|>
+              <row.headerCell>
+                {{#if (can 'read model' credentialLibrary)}}
+                  <LinkTo
+                    @route='scopes.scope.credential-stores.credential-store.credential-libraries.credential-library'
+                    @model={{credentialLibrary.id}}
+                  >
+                    {{credentialLibrary.displayName}}
+                  </LinkTo>
+                {{else}}
+                  {{credentialLibrary.displayName}}
+                {{/if}}
+                <p>{{credentialLibrary.description}}</p>
+              </row.headerCell>
+              <row.cell>
+                <Rose::Badge>{{t
+                    (concat
+                      'resources.credential-library.types.'
+                      credentialLibrary.type
+                    )
+                  }}</Rose::Badge>
+              </row.cell>
+              <row.cell>
+                <Copyable
+                  @text={{credentialLibrary.id}}
+                  @buttonText={{t 'actions.copy-to-clipboard'}}
+                  @acknowledgeText={{t 'states.copied'}}
+                >
+                  <code>{{credentialLibrary.id}}</code>
+                </Copyable>
+              </row.cell>
+            </body.row>
+          {{/each}}
+        </table.body>
+      </Rose::Table>
+
+    {{else}}
+
+      <Rose::Layout::Centered>
+        <Rose::Message
+          @title={{t 'resources.credential-library.messages.none.title'}}
+          as |message|
         >
-          <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
-          {{t 'titles.new'}}
-        </message.link>
-      {{/if}}
-    </Rose::Message>
-  </Rose::Layout::Centered>
+          <message.description>
+            {{#if
+              (can
+                'list collection'
+                this.credentialStore
+                collection='credential-libraries'
+              )
+            }}
+              {{! can list (at least):  show default welcome message}}
+              {{t 'resources.credential-library.description'}}
 
-{{/if}}
\ No newline at end of file
+            {{else if (can
+              'create collection'
+              this.credentialStore
+              collection='credential-libraries'
+            )}}
+              {{! can create (only):  show create-but-not-list welcome message}}
+              {{t
+                'descriptions.create-but-not-list'
+                resource=(t 'resources.credential-library.title_plural')
+              }}
+            {{else}}
+              {{! can neither list nor create }}
+              {{t
+                'descriptions.neither-list-nor-create'
+                resource=(t 'resources.credential-library.title_plural')
+              }}
+            {{/if}}
+
+          </message.description>
+          {{#if
+            (can
+              'create collection'
+              this.credentialStore
+              collection='credential-libraries'
+            )
+          }}
+            <message.link
+              @route='scopes.scope.credential-stores.credential-store.credential-libraries.new'
+            >
+              <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
+              {{t 'titles.new'}}
+            </message.link>
+          {{/if}}
+        </Rose::Message>
+      </Rose::Layout::Centered>
+
+    {{/if}}
+  </page.body>
+</Rose::Layout::Page>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/new.hbs b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/new.hbs
index 5d03e5b9f..818471682 100644
--- a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/new.hbs
+++ b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/new.hbs
@@ -1,7 +1,22 @@
 {{page-title (t 'titles.new')}}
 
-<Form::CredentialLibrary
-  @model={{@model}}
-  @submit={{route-action 'save' @model}}
-  @cancel={{route-action 'cancel' @model}}
-/>
\ No newline at end of file
+<Rose::Layout::Page as |page|>
+
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <h2>
+      {{t 'titles.new'}}
+    </h2>
+  </page.header>
+
+  <page.body>
+    <Form::CredentialLibrary
+      @model={{@model}}
+      @submit={{route-action 'save' @model}}
+      @cancel={{route-action 'cancel' @model}}
+    />
+  </page.body>
+</Rose::Layout::Page>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/new/-header.hbs b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/new/-header.hbs
deleted file mode 100644
index 51755b136..000000000
--- a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/new/-header.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<h2>
-  {{t 'titles.new'}}
-</h2>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/index.hbs b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/index.hbs
index aaa14a18c..78a8548a2 100644
--- a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/index.hbs
@@ -1,5 +1,26 @@
-<Form::CredentialStore
-  @model={{@model}}
-  @submit={{route-action 'save' @model}}
-  @cancel={{route-action 'cancel' @model}}
-/>
\ No newline at end of file
+<Rose::Layout::Page as |page|>
+
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <CredentialStores::CredentialStore::Header @model={{@model}} />
+  </page.header>
+
+  <page.navigation>
+    <CredentialStores::CredentialStore::Nav @model={{@model}} />
+  </page.navigation>
+
+  <page.actions>
+    <CredentialStores::CredentialStore::Actions @model={{@model}} />
+  </page.actions>
+
+  <page.body>
+    <Form::CredentialStore
+      @model={{@model}}
+      @submit={{route-action 'save' @model}}
+      @cancel={{route-action 'cancel' @model}}
+    />
+  </page.body>
+</Rose::Layout::Page>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/groups/group.hbs b/ui/admin/app/templates/scopes/scope/groups/group.hbs
index 837d1f984..7d32ecb0d 100644
--- a/ui/admin/app/templates/scopes/scope/groups/group.hbs
+++ b/ui/admin/app/templates/scopes/scope/groups/group.hbs
@@ -1,25 +1,3 @@
 {{page-title @model.displayName}}
 
-<Rose::Layout::Page as |page|>
-
-  <page.breadcrumbs>
-    <BreadCrumbs />
-  </page.breadcrumbs>
-
-  <page.header>
-    {{outlet 'header'}}
-  </page.header>
-
-  <page.navigation>
-    {{outlet 'navigation'}}
-  </page.navigation>
-
-  <page.actions>
-    {{outlet 'actions'}}
-  </page.actions>
-
-  <page.body>
-    {{outlet}}
-  </page.body>
-
-</Rose::Layout::Page>
\ No newline at end of file
+{{outlet}}
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/groups/group/add-members.hbs b/ui/admin/app/templates/scopes/scope/groups/group/add-members.hbs
index a85c01185..3013ba2f7 100644
--- a/ui/admin/app/templates/scopes/scope/groups/group/add-members.hbs
+++ b/ui/admin/app/templates/scopes/scope/groups/group/add-members.hbs
@@ -1,8 +1,26 @@
 {{page-title (t 'resources.group.messages.add-members.title')}}
 
-<Form::Group::AddMembers
-  @model={{@model.group}}
-  @users={{@model.users}}
-  @submit={{route-action 'addMembers' @model.group}}
-  @cancel={{route-action 'cancel'}}
-/>
\ No newline at end of file
+<Rose::Layout::Page as |page|>
+
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <h2>
+      {{t 'resources.group.messages.add-members.title'}}
+      <DocLink @doc='group.add-members' @iconSize='large' />
+    </h2>
+    <p>{{t 'resources.group.messages.add-members.description'}}</p>
+  </page.header>
+
+  <page.body>
+    <Form::Group::AddMembers
+      @model={{@model.group}}
+      @users={{@model.users}}
+      @submit={{route-action 'addMembers' @model.group}}
+      @cancel={{route-action 'cancel'}}
+    />
+  </page.body>
+
+</Rose::Layout::Page>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/groups/group/add-members/-header.hbs b/ui/admin/app/templates/scopes/scope/groups/group/add-members/-header.hbs
deleted file mode 100644
index 71181a8df..000000000
--- a/ui/admin/app/templates/scopes/scope/groups/group/add-members/-header.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-<h2>
-  {{t 'resources.group.messages.add-members.title'}}
-  <DocLink @doc='group.add-members' @iconSize='large' />
-</h2>
-<p>{{t 'resources.group.messages.add-members.description'}}</p>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/groups/group/index.hbs b/ui/admin/app/templates/scopes/scope/groups/group/index.hbs
index 6a89a496d..d5da2abf3 100644
--- a/ui/admin/app/templates/scopes/scope/groups/group/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/groups/group/index.hbs
@@ -1,5 +1,27 @@
-<Form::Group
-  @model={{@model}}
-  @submit={{route-action 'save' @model}}
-  @cancel={{route-action 'cancel' @model}}
-/>
\ No newline at end of file
+<Rose::Layout::Page as |page|>
+
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <Groups::Group::Header @model={{@model}} />
+  </page.header>
+
+  <page.navigation>
+    <Groups::Group::Nav @model={{@model}} />
+  </page.navigation>
+
+  <page.actions>
+    <Groups::Group::Actions @model={{@model}} />
+  </page.actions>
+
+  <page.body>
+    <Form::Group
+      @model={{@model}}
+      @submit={{route-action 'save' @model}}
+      @cancel={{route-action 'cancel' @model}}
+    />
+  </page.body>
+
+</Rose::Layout::Page>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/groups/group/members.hbs b/ui/admin/app/templates/scopes/scope/groups/group/members.hbs
index 9df657c32..b4c479eda 100644
--- a/ui/admin/app/templates/scopes/scope/groups/group/members.hbs
+++ b/ui/admin/app/templates/scopes/scope/groups/group/members.hbs
@@ -1,75 +1,97 @@
 {{page-title (t 'resources.group.messages.members.title')}}
 
-{{#if @model.members}}
+<Rose::Layout::Page as |page|>
 
-  <Rose::Table as |table|>
-    <table.header as |header|>
-      <header.row as |row|>
-        <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
-        <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
-        <row.headerCell>{{t 'titles.actions'}}</row.headerCell>
-      </header.row>
-    </table.header>
-    <table.body as |body|>
-      {{#each @model.members as |member|}}
-        <body.row as |row|>
-          <row.headerCell>
-            {{member.displayName}}
-            {{#if member.accountName}}
-              <br /><Rose::Badge>{{member.accountName}}</Rose::Badge>
-            {{/if}}
-          </row.headerCell>
-          <row.cell>
-            <Copyable
-              @text={{member.id}}
-              @buttonText={{t 'actions.copy-to-clipboard'}}
-              @acknowledgeText={{t 'states.copied'}}
-            >
-              <code>{{member.id}}</code>
-            </Copyable>
-          </row.cell>
-          <row.cell>
-            {{#if (can 'removeMembers group' @model.group)}}
-              <Rose::Dropdown
-                @icon='flight-icons/svg/more-horizontal-16'
-                @iconOnly={{true}}
-                @showCaret={{false}}
-                @dropdownRight={{true}}
-                @text='{{t 'actions.manage'}}'
-                as |dropdown|
-              >
-                <dropdown.button
-                  @style='danger'
-                  {{on
-                    'click'
-                    (route-action 'removeMember' @model.group member)
-                  }}
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <Groups::Group::Header @model={{@model.group}} />
+  </page.header>
+
+  <page.navigation>
+    <Groups::Group::Nav @model={{@model.group}} />
+  </page.navigation>
+
+  <page.actions>
+    <Groups::Group::Actions @model={{@model.group}} />
+  </page.actions>
+
+  <page.body>
+    {{#if @model.members}}
+
+      <Rose::Table as |table|>
+        <table.header as |header|>
+          <header.row as |row|>
+            <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
+            <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
+            <row.headerCell>{{t 'titles.actions'}}</row.headerCell>
+          </header.row>
+        </table.header>
+        <table.body as |body|>
+          {{#each @model.members as |member|}}
+            <body.row as |row|>
+              <row.headerCell>
+                {{member.displayName}}
+                {{#if member.accountName}}
+                  <br /><Rose::Badge>{{member.accountName}}</Rose::Badge>
+                {{/if}}
+              </row.headerCell>
+              <row.cell>
+                <Copyable
+                  @text={{member.id}}
+                  @buttonText={{t 'actions.copy-to-clipboard'}}
+                  @acknowledgeText={{t 'states.copied'}}
                 >
-                  {{t 'actions.remove'}}
-                </dropdown.button>
-              </Rose::Dropdown>
-            {{/if}}
-          </row.cell>
-        </body.row>
-      {{/each}}
-    </table.body>
-  </Rose::Table>
+                  <code>{{member.id}}</code>
+                </Copyable>
+              </row.cell>
+              <row.cell>
+                {{#if (can 'removeMembers group' @model.group)}}
+                  <Rose::Dropdown
+                    @icon='flight-icons/svg/more-horizontal-16'
+                    @iconOnly={{true}}
+                    @showCaret={{false}}
+                    @dropdownRight={{true}}
+                    @text='{{t 'actions.manage'}}'
+                    as |dropdown|
+                  >
+                    <dropdown.button
+                      @style='danger'
+                      {{on
+                        'click'
+                        (route-action 'removeMember' @model.group member)
+                      }}
+                    >
+                      {{t 'actions.remove'}}
+                    </dropdown.button>
+                  </Rose::Dropdown>
+                {{/if}}
+              </row.cell>
+            </body.row>
+          {{/each}}
+        </table.body>
+      </Rose::Table>
 
-{{else}}
+    {{else}}
 
-  <Rose::Layout::Centered>
-    <Rose::Message
-      @title={{t 'resources.group.messages.members.title'}}
-      as |message|
-    >
-      <message.description>
-        {{t 'resources.group.messages.members.description'}}
-      </message.description>
-      <message.link @route='scopes.scope.groups.group.add-members'>
-        <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
-        {{t 'resources.group.actions.add-members'}}
-      </message.link>
-    </Rose::Message>
-  </Rose::Layout::Centered>
+      <Rose::Layout::Centered>
+        <Rose::Message
+          @title={{t 'resources.group.messages.members.title'}}
+          as |message|
+        >
+          <message.description>
+            {{t 'resources.group.messages.members.description'}}
+          </message.description>
+          <message.link @route='scopes.scope.groups.group.add-members'>
+            <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
+            {{t 'resources.group.actions.add-members'}}
+          </message.link>
+        </Rose::Message>
+      </Rose::Layout::Centered>
 
-{{/if}}
\ No newline at end of file
+    {{/if}}
+  </page.body>
+
+</Rose::Layout::Page>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/roles/role.hbs b/ui/admin/app/templates/scopes/scope/roles/role.hbs
index 33d5e4cdc..7d32ecb0d 100644
--- a/ui/admin/app/templates/scopes/scope/roles/role.hbs
+++ b/ui/admin/app/templates/scopes/scope/roles/role.hbs
@@ -1,25 +1,3 @@
 {{page-title @model.displayName}}
 
-<Rose::Layout::Page as |page|>
-
-  <page.breadcrumbs>
-    <BreadCrumbs />
-  </page.breadcrumbs>
-
-  <page.header>
-    {{outlet 'header'}}
-  </page.header>
-
-  <page.actions>
-    {{outlet 'actions'}}
-  </page.actions>
-
-  <page.navigation>
-    {{outlet 'navigation'}}
-  </page.navigation>
-
-  <page.body>
-    {{outlet}}
-  </page.body>
-
-</Rose::Layout::Page>
\ No newline at end of file
+{{outlet}}
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/roles/role/add-principals.hbs b/ui/admin/app/templates/scopes/scope/roles/role/add-principals.hbs
index 059142299..c454c543a 100644
--- a/ui/admin/app/templates/scopes/scope/roles/role/add-principals.hbs
+++ b/ui/admin/app/templates/scopes/scope/roles/role/add-principals.hbs
@@ -1,9 +1,27 @@
 {{page-title (t 'resources.role.principal.actions.add-principals')}}
 
-<Form::Role::AddPrincipals
-  @model={{@model.role}}
-  @users={{@model.users}}
-  @groups={{@model.groups}}
-  @submit={{route-action 'addPrincipals' @model.role}}
-  @cancel={{route-action 'cancel'}}
-/>
\ No newline at end of file
+<Rose::Layout::Page as |page|>
+
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <h2>
+      {{t 'resources.role.principal.messages.add-principals.title'}}
+      <DocLink @doc='role.add-principals' @iconSize='large' />
+    </h2>
+    <p>{{t 'resources.role.principal.messages.add-principals.description'}}</p>
+  </page.header>
+
+  <page.body>
+    <Form::Role::AddPrincipals
+      @model={{@model.role}}
+      @users={{@model.users}}
+      @groups={{@model.groups}}
+      @submit={{route-action 'addPrincipals' @model.role}}
+      @cancel={{route-action 'cancel'}}
+    />
+  </page.body>
+
+</Rose::Layout::Page>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/roles/role/add-principals/-header.hbs b/ui/admin/app/templates/scopes/scope/roles/role/add-principals/-header.hbs
deleted file mode 100644
index 8264b0ae5..000000000
--- a/ui/admin/app/templates/scopes/scope/roles/role/add-principals/-header.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-<h2>
-  {{t 'resources.role.principal.messages.add-principals.title'}}
-  <DocLink @doc='role.add-principals' @iconSize='large' />
-</h2>
-<p>{{t 'resources.role.principal.messages.add-principals.description'}}</p>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/roles/role/grants.hbs b/ui/admin/app/templates/scopes/scope/roles/role/grants.hbs
index 79ccf9ede..a93aaacf7 100644
--- a/ui/admin/app/templates/scopes/scope/roles/role/grants.hbs
+++ b/ui/admin/app/templates/scopes/scope/roles/role/grants.hbs
@@ -1,9 +1,42 @@
 {{page-title (t 'resources.role.grant.title_plural')}}
 
-<Form::Role::Grants
-  @model={{@model}}
-  @submit={{route-action 'save' @model}}
-  @cancel={{route-action 'cancel' @model}}
-  @addGrant={{route-action 'addGrant' @model}}
-  @removeGrant={{route-action 'removeGrant' @model}}
-/>
\ No newline at end of file
+<Rose::Layout::Page as |page|>
+
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <h2>
+      {{t 'resources.role.title'}}
+      <DocLink @doc='role' @iconSize='large' />
+    </h2>
+    <p>{{t 'resources.role.grant.description'}}</p>
+    <Copyable
+      @text={{@model.id}}
+      @buttonText={{t 'actions.copy-to-clipboard'}}
+      @acknowledgeText={{t 'states.copied'}}
+    >
+      <code>{{@model.id}}</code>
+    </Copyable>
+  </page.header>
+
+  <page.actions>
+    <Roles::Role::Actions @model={{@model}} />
+  </page.actions>
+
+  <page.navigation>
+    <Roles::Role::Nav @model={{@model}} />
+  </page.navigation>
+
+  <page.body>
+    <Form::Role::Grants
+      @model={{@model}}
+      @submit={{route-action 'save' @model}}
+      @cancel={{route-action 'cancel' @model}}
+      @addGrant={{route-action 'addGrant' @model}}
+      @removeGrant={{route-action 'removeGrant' @model}}
+    />
+  </page.body>
+
+</Rose::Layout::Page>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/roles/role/grants/-header.hbs b/ui/admin/app/templates/scopes/scope/roles/role/grants/-header.hbs
deleted file mode 100644
index 4097a2ecf..000000000
--- a/ui/admin/app/templates/scopes/scope/roles/role/grants/-header.hbs
+++ /dev/null
@@ -1,12 +0,0 @@
-<h2>
-  {{t 'resources.role.title'}}
-  <DocLink @doc='role' @iconSize='large' />
-</h2>
-<p>{{t 'resources.role.grant.description'}}</p>
-<Copyable
-  @text={{@model.id}}
-  @buttonText={{t 'actions.copy-to-clipboard'}}
-  @acknowledgeText={{t 'states.copied'}}
->
-  <code>{{@model.id}}</code>
-</Copyable>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/roles/role/index.hbs b/ui/admin/app/templates/scopes/scope/roles/role/index.hbs
index 99dc29cc6..8edae91b9 100644
--- a/ui/admin/app/templates/scopes/scope/roles/role/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/roles/role/index.hbs
@@ -1,6 +1,28 @@
-<Form::Role
-  @model={{@model}}
-  @grantScopes={{this.grantScopes}}
-  @submit={{route-action 'save' @model}}
-  @cancel={{route-action 'cancel' @model}}
-/>
\ No newline at end of file
+<Rose::Layout::Page as |page|>
+
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <Roles::Role::Header @model={{@model}} />
+  </page.header>
+
+  <page.actions>
+    <Roles::Role::Actions @model={{@model}} />
+  </page.actions>
+
+  <page.navigation>
+    <Roles::Role::Nav @model={{@model}} />
+  </page.navigation>
+
+  <page.body>
+    <Form::Role
+      @model={{@model}}
+      @grantScopes={{this.grantScopes}}
+      @submit={{route-action 'save' @model}}
+      @cancel={{route-action 'cancel' @model}}
+    />
+  </page.body>
+
+</Rose::Layout::Page>
\ No newline at end of file
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 567a95200..0dd8125f2 100644
--- a/ui/admin/app/templates/scopes/scope/roles/role/principals.hbs
+++ b/ui/admin/app/templates/scopes/scope/roles/role/principals.hbs
@@ -1,79 +1,113 @@
 {{page-title (t 'resources.role.principal.title_plural')}}
 
-{{#if @model.principals}}
+<Rose::Layout::Page as |page|>
 
-  <Rose::Table as |table|>
-    <table.header as |header|>
-      <header.row as |row|>
-        <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
-        <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
-        <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
-        <row.headerCell>{{t 'titles.actions'}}</row.headerCell>
-      </header.row>
-    </table.header>
-    <table.body as |body|>
-      {{#each @model.principals as |principal|}}
-        <body.row as |row|>
-          <row.headerCell>
-            {{principal.model.displayName}}
-            {{#if principal.model.accountName}}
-              <br /><Rose::Badge>{{principal.model.accountName}}</Rose::Badge>
-            {{/if}}
-          </row.headerCell>
-          <row.cell>
-            {{t (concat 'resources.role.principal.types.' principal.type)}}
-          </row.cell>
-          <row.cell>
-            <Copyable
-              @text={{principal.model.id}}
-              @buttonText={{t 'actions.copy-to-clipboard'}}
-              @acknowledgeText={{t 'states.copied'}}
-            >
-              <code>{{principal.model.id}}</code>
-            </Copyable>
-          </row.cell>
-          <row.cell>
-            {{#if (can 'removePrincipals role' @model.role)}}
-              <Rose::Dropdown
-                @icon='flight-icons/svg/more-horizontal-16'
-                @iconOnly={{true}}
-                @showCaret={{false}}
-                @dropdownRight={{true}}
-                @text='{{t 'actions.manage'}}'
-                as |dropdown|
-              >
-                <dropdown.button
-                  @style='danger'
-                  {{on
-                    'click'
-                    (route-action 'removePrincipal' principal.model)
-                  }}
-                >
-                  {{t 'actions.remove'}}
-                </dropdown.button>
-              </Rose::Dropdown>
-            {{/if}}
-          </row.cell>
-        </body.row>
-      {{/each}}
-    </table.body>
-  </Rose::Table>
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
 
-{{else}}
-
-  <Rose::Layout::Centered>
-    <Rose::Message
-      @title={{t 'resources.role.principal.messages.welcome.title'}}
-      as |message|
+  <page.header>
+    <h2>
+      {{t 'resources.role.title'}}
+      <DocLink @doc='role' @iconSize='large' />
+    </h2>
+    <p>{{t 'resources.role.principal.description'}}</p>
+    <Copyable
+      @text={{@model.role.id}}
+      @buttonText={{t 'actions.copy-to-clipboard'}}
+      @acknowledgeText={{t 'states.copied'}}
     >
-      <message.description>
-        {{t 'resources.role.principal.messages.welcome.description'}}
-      </message.description>
-      <message.link @route='scopes.scope.roles.role.add-principals'>
-        <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
-        {{t 'resources.role.principal.actions.add-principals'}}
-      </message.link>
-    </Rose::Message>
-  </Rose::Layout::Centered>
+      <code>{{@model.role.id}}</code>
+    </Copyable>
+  </page.header>
 
-{{/if}}
\ No newline at end of file
+  <page.actions>
+    <Roles::Role::Actions @model={{@model.role}} />
+  </page.actions>
+
+  <page.navigation>
+    <Roles::Role::Nav @model={{@model.role}} />
+  </page.navigation>
+
+  <page.body>
+    {{#if @model.principals}}
+
+      <Rose::Table as |table|>
+        <table.header as |header|>
+          <header.row as |row|>
+            <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
+            <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
+            <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
+            <row.headerCell>{{t 'titles.actions'}}</row.headerCell>
+          </header.row>
+        </table.header>
+        <table.body as |body|>
+          {{#each @model.principals as |principal|}}
+            <body.row as |row|>
+              <row.headerCell>
+                {{principal.model.displayName}}
+                {{#if principal.model.accountName}}
+                  <br /><Rose::Badge
+                  >{{principal.model.accountName}}</Rose::Badge>
+                {{/if}}
+              </row.headerCell>
+              <row.cell>
+                {{t (concat 'resources.role.principal.types.' principal.type)}}
+              </row.cell>
+              <row.cell>
+                <Copyable
+                  @text={{principal.model.id}}
+                  @buttonText={{t 'actions.copy-to-clipboard'}}
+                  @acknowledgeText={{t 'states.copied'}}
+                >
+                  <code>{{principal.model.id}}</code>
+                </Copyable>
+              </row.cell>
+              <row.cell>
+                {{#if (can 'removePrincipals role' @model.role)}}
+                  <Rose::Dropdown
+                    @icon='flight-icons/svg/more-horizontal-16'
+                    @iconOnly={{true}}
+                    @showCaret={{false}}
+                    @dropdownRight={{true}}
+                    @text='{{t 'actions.manage'}}'
+                    as |dropdown|
+                  >
+                    <dropdown.button
+                      @style='danger'
+                      {{on
+                        'click'
+                        (route-action 'removePrincipal' principal.model)
+                      }}
+                    >
+                      {{t 'actions.remove'}}
+                    </dropdown.button>
+                  </Rose::Dropdown>
+                {{/if}}
+              </row.cell>
+            </body.row>
+          {{/each}}
+        </table.body>
+      </Rose::Table>
+
+    {{else}}
+
+      <Rose::Layout::Centered>
+        <Rose::Message
+          @title={{t 'resources.role.principal.messages.welcome.title'}}
+          as |message|
+        >
+          <message.description>
+            {{t 'resources.role.principal.messages.welcome.description'}}
+          </message.description>
+          <message.link @route='scopes.scope.roles.role.add-principals'>
+            <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
+            {{t 'resources.role.principal.actions.add-principals'}}
+          </message.link>
+        </Rose::Message>
+      </Rose::Layout::Centered>
+
+    {{/if}}
+  </page.body>
+
+</Rose::Layout::Page>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/roles/role/principals/-header.hbs b/ui/admin/app/templates/scopes/scope/roles/role/principals/-header.hbs
deleted file mode 100644
index 3f483d4d2..000000000
--- a/ui/admin/app/templates/scopes/scope/roles/role/principals/-header.hbs
+++ /dev/null
@@ -1,12 +0,0 @@
-<h2>
-  {{t 'resources.role.title'}}
-  <DocLink @doc='role' @iconSize='large' />
-</h2>
-<p>{{t 'resources.role.principal.description'}}</p>
-<Copyable
-  @text={{@model.role.id}}
-  @buttonText={{t 'actions.copy-to-clipboard'}}
-  @acknowledgeText={{t 'states.copied'}}
->
-  <code>{{@model.role.id}}</code>
-</Copyable>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index b013ddba4..71c3884be 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13135,10 +13135,10 @@ focus-trap@^6.4.0:
   dependencies:
     tabbable "^5.2.1"
 
-follow-redirects@^1.0.0:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.1.tgz#d9114ded0a1cfdd334e164e6662ad02bfd91ff43"
-  integrity sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==
+follow-redirects@^1.0.0, follow-redirects@^1.14.7:
+  version "1.14.7"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.7.tgz#2004c02eb9436eee9a21446a6477debf17e81685"
+  integrity sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==
 
 for-in@^1.0.2:
   version "1.0.2"