From 9e09be0e5f41ea2d9eb57d783a7be10d401a5591 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Fri, 7 Jan 2022 15:34:06 -0800
Subject: [PATCH 01/11] radio-helper text init

---
 .../rose/form/radio/radio/index.hbs           |  6 ++++-
 .../rose/form/radio/radio/index.stories.mdx   |  2 ++
 yarn.lock                                     | 27 ++++---------------
 3 files changed, 12 insertions(+), 23 deletions(-)

diff --git a/addons/rose/addon/components/rose/form/radio/radio/index.hbs b/addons/rose/addon/components/rose/form/radio/radio/index.hbs
index d38bc3680..ce2dc5d9a 100644
--- a/addons/rose/addon/components/rose/form/radio/radio/index.hbs
+++ b/addons/rose/addon/components/rose/form/radio/radio/index.hbs
@@ -13,7 +13,11 @@
     @changed={{@changed}} />
 
   <label class="rose-form-radio-label" for={{this.id}}>
-
+     {{#if @helperText}}
+      <Rose::Form::HelperText @id="helper-text-{{this.id}}" @error={{@error}} @link={{@link}} @linkText={{@linkText}}>
+        {{@helperText}}
+      </Rose::Form::HelperText>
+    {{/if}}
     {{#if @icon}}
       <Rose::Icon
         @name={{@icon}}
diff --git a/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx
index 63e873862..01941dd68 100644
--- a/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx
@@ -29,12 +29,14 @@ Renders a form radiofield.
         @selectedValue={{selectedValue}}
         @disabled={{disabled}}
         @icon={{icon}}
+        @helperText={{helperText}}
         />
     `,
     context: {
       label: text('text', 'Radiofield'),
       error: boolean('error', false),
       value: text('value', 'value and selectedValue must match to select radiofield'),
+      helperText: text('helperText', 'Helper text'),
       selectedValue: text(
         'selectedValue',
         'value and selectedValue must match to select radiofield'
diff --git a/yarn.lock b/yarn.lock
index fe3290e7e..6df2d8cc5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9375,7 +9375,7 @@ debug@^3.0.0, debug@^3.0.1, debug@^3.1.0, debug@^3.1.1, debug@^3.2.6:
   dependencies:
     ms "^2.1.1"
 
-debuglog@*, debuglog@^1.0.1:
+debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
   integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=
@@ -14266,7 +14266,7 @@ import-lazy@^4.0.0:
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-4.0.0.tgz#e8eb627483a0a43da3c03f3e35548be5cb0cc153"
   integrity sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==
 
-imurmurhash@*, imurmurhash@^0.1.4:
+imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
@@ -16080,11 +16080,6 @@ lodash._baseflatten@^3.0.0:
     lodash.isarguments "^3.0.0"
     lodash.isarray "^3.0.0"
 
-lodash._baseindexof@*:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c"
-  integrity sha1-/lK1OhxnYeQmGNZU5KJXie1hgiw=
-
 lodash._baseuniq@~4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8"
@@ -16093,16 +16088,11 @@ lodash._baseuniq@~4.6.0:
     lodash._createset "~4.0.0"
     lodash._root "~3.0.0"
 
-lodash._bindcallback@*, lodash._bindcallback@^3.0.0:
+lodash._bindcallback@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
   integrity sha1-5THCdkTPi1epnhftlbNcdIeJOS4=
 
-lodash._cacheindexof@*:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92"
-  integrity sha1-PcaayCSY0u5ePOVgkbr9Ktx73pI=
-
 lodash._createassigner@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/lodash._createassigner/-/lodash._createassigner-3.1.1.tgz#838a5bae2fdaca63ac22dee8e19fa4e6d6970b11"
@@ -16112,19 +16102,12 @@ lodash._createassigner@^3.0.0:
     lodash._isiterateecall "^3.0.0"
     lodash.restparam "^3.0.0"
 
-lodash._createcache@*:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093"
-  integrity sha1-VtagZAF2JeeevKa4AY4XRAvc8JM=
-  dependencies:
-    lodash._getnative "^3.0.0"
-
 lodash._createset@~4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26"
   integrity sha1-D0ZZ+7CddRlPqeK4imZE02PJ/iY=
 
-lodash._getnative@*, lodash._getnative@^3.0.0:
+lodash._getnative@^3.0.0:
   version "3.9.1"
   resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
   integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=
@@ -16342,7 +16325,7 @@ lodash.pick@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"
   integrity sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM=
 
-lodash.restparam@*, lodash.restparam@^3.0.0:
+lodash.restparam@^3.0.0:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
   integrity sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU=

From 95c2f4a74d6678b2be55a50cf90594481efabe9b Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Tue, 11 Jan 2022 14:24:22 -0800
Subject: [PATCH 02/11] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20support=20fo?=
 =?UTF-8?q?r=20helper=20text=20to=20radio=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/rose/form/radio/radio/index.hbs     | 14 +++++++-------
 .../rose/form/radio/radio/index.stories.mdx        |  5 +++++
 .../addon/styles/rose/components/form/_radio.scss  | 11 +++++++++--
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/addons/rose/addon/components/rose/form/radio/radio/index.hbs b/addons/rose/addon/components/rose/form/radio/radio/index.hbs
index ce2dc5d9a..e60c9ea0d 100644
--- a/addons/rose/addon/components/rose/form/radio/radio/index.hbs
+++ b/addons/rose/addon/components/rose/form/radio/radio/index.hbs
@@ -12,12 +12,8 @@
     @disabled={{@disabled}}
     @changed={{@changed}} />
 
-  <label class="rose-form-radio-label" for={{this.id}}>
-     {{#if @helperText}}
-      <Rose::Form::HelperText @id="helper-text-{{this.id}}" @error={{@error}} @link={{@link}} @linkText={{@linkText}}>
-        {{@helperText}}
-      </Rose::Form::HelperText>
-    {{/if}}
+  <label class="rose-form-radio-label{{if @helperText " helperText"}}" for={{this.id}}>
+
     {{#if @icon}}
       <Rose::Icon
         @name={{@icon}}
@@ -26,7 +22,11 @@
     {{/if}}
 
     {{@label}}
-
+     {{#if @helperText}}
+      <Rose::Form::HelperText @id="helper-text-{{this.id}}" @error={{@error}} @link={{@link}} @linkText={{@linkText}}>
+        {{@helperText}}
+      </Rose::Form::HelperText>
+    {{/if}}
   </label>
 
   {{yield}}
diff --git a/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx
index 01941dd68..613952aff 100644
--- a/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx
@@ -65,6 +65,7 @@ Renders a form radiofield.
   @disabled={{false}}
   @changed={{fn}}
   @inline={{true}}
+  @helperText={{helperText}}
   />
 ```
 
@@ -79,6 +80,7 @@ Renders a form radiofield.
         @disabled={{disabled}}
         @icon={{icon}}
         @inline={{inline}}
+        @helperText={{helperText}}
         />
       <Rose::Form::Radio::Radio
         @label='Radiofield2'
@@ -88,6 +90,7 @@ Renders a form radiofield.
         @disabled={{disabled}}
         @icon={{icon}}
         @inline={{inline}}
+        @helperText={{helperText}}
         />
       <Rose::Form::Radio::Radio
         @label='Radiofield3'
@@ -97,6 +100,7 @@ Renders a form radiofield.
         @disabled={{disabled}}
         @icon={{icon}}
         @inline={{inline}}
+        @helperText={{helperText}}
         />
     `,
     context: {
@@ -106,6 +110,7 @@ Renders a form radiofield.
         'selectedValue',
         'value and selectedValue must match to select radiofield'
       ),
+      helperText: text('helperText', 'Helper text'),
       disabled: boolean('disabled', false),
       icon: select(
         'icon',
diff --git a/addons/rose/addon/styles/rose/components/form/_radio.scss b/addons/rose/addon/styles/rose/components/form/_radio.scss
index 3c94ac816..f29cc27e8 100644
--- a/addons/rose/addon/styles/rose/components/form/_radio.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radio.scss
@@ -1,6 +1,6 @@
 @use '../../variables/sizing';
 @use '../../utilities/type';
-
+@use 'sass:math';
 $radio-svg: (
   'default':
     "<svg viewBox='0 0 24 24' fill='%23aaaaaa' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
@@ -32,7 +32,14 @@ $data-svg-prefix: 'data:image/svg+xml;utf-8,';
   position: relative;
   margin-bottom: sizing.rems(xs);
   color: var(--ui-gray);
-
+  .rose-form-radio-label.helperText {
+    display: flex;
+    .rose-form-helper-text {
+      margin-left: sizing.rems(xxs);
+      $lineHeight: math.div(20, 14);
+      line-height: $lineHeight;
+    }
+  }
   .rose-form-radio-label {
     @include type.type(s, semibold);
     color: currentColor;

From 95bad02ce675fe5736c6f96524661e5fa6846336 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Wed, 12 Jan 2022 14:31:45 -0800
Subject: [PATCH 03/11] =?UTF-8?q?fix:=20=F0=9F=90=9B=20class=20name?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/rose/addon/components/rose/form/radio/radio/index.hbs | 2 +-
 addons/rose/addon/styles/rose/components/form/_radio.scss    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/addons/rose/addon/components/rose/form/radio/radio/index.hbs b/addons/rose/addon/components/rose/form/radio/radio/index.hbs
index e60c9ea0d..bfeb74d62 100644
--- a/addons/rose/addon/components/rose/form/radio/radio/index.hbs
+++ b/addons/rose/addon/components/rose/form/radio/radio/index.hbs
@@ -12,7 +12,7 @@
     @disabled={{@disabled}}
     @changed={{@changed}} />
 
-  <label class="rose-form-radio-label{{if @helperText " helperText"}}" for={{this.id}}>
+  <label class="rose-form-radio-label{{if @helperText " helper-text"}}" for={{this.id}}>
 
     {{#if @icon}}
       <Rose::Icon
diff --git a/addons/rose/addon/styles/rose/components/form/_radio.scss b/addons/rose/addon/styles/rose/components/form/_radio.scss
index f29cc27e8..7ef3ddcea 100644
--- a/addons/rose/addon/styles/rose/components/form/_radio.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radio.scss
@@ -32,7 +32,7 @@ $data-svg-prefix: 'data:image/svg+xml;utf-8,';
   position: relative;
   margin-bottom: sizing.rems(xs);
   color: var(--ui-gray);
-  .rose-form-radio-label.helperText {
+  .rose-form-radio-label.helper-text {
     display: flex;
     .rose-form-helper-text {
       margin-left: sizing.rems(xxs);

From 6d83163951fc87e041aeba4c109720955e33be5c Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Thu, 13 Jan 2022 10:53:56 -0800
Subject: [PATCH 04/11] =?UTF-8?q?fix:=20=F0=9F=90=9B=20clean=20up=20specif?=
 =?UTF-8?q?icity,=20lineheight?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../styles/rose/components/form/_radio.scss     |  8 ++++----
 .../styles/rose/components/form/_radioCard.scss | 17 +++++++++++++++++
 2 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 addons/rose/addon/styles/rose/components/form/_radioCard.scss

diff --git a/addons/rose/addon/styles/rose/components/form/_radio.scss b/addons/rose/addon/styles/rose/components/form/_radio.scss
index 7ef3ddcea..353912dfe 100644
--- a/addons/rose/addon/styles/rose/components/form/_radio.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radio.scss
@@ -1,6 +1,7 @@
 @use '../../variables/sizing';
 @use '../../utilities/type';
-@use 'sass:math';
+@use '../../variables/typography';
+
 $radio-svg: (
   'default':
     "<svg viewBox='0 0 24 24' fill='%23aaaaaa' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
@@ -32,12 +33,11 @@ $data-svg-prefix: 'data:image/svg+xml;utf-8,';
   position: relative;
   margin-bottom: sizing.rems(xs);
   color: var(--ui-gray);
-  .rose-form-radio-label.helper-text {
+  .helper-text {
     display: flex;
     .rose-form-helper-text {
       margin-left: sizing.rems(xxs);
-      $lineHeight: math.div(20, 14);
-      line-height: $lineHeight;
+      line-height: typography.line-height(m);
     }
   }
   .rose-form-radio-label {
diff --git a/addons/rose/addon/styles/rose/components/form/_radioCard.scss b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
new file mode 100644
index 000000000..f24a15dae
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
@@ -0,0 +1,17 @@
+.rose-form-radio-card {
+    position: relative;
+    width: 370px;
+    height: 115px;    
+    background: #FFFFFF;
+    border: 1px solid #BAC1CC;    
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 2px;
+  .rose-form-radio-field {
+    top: 89px;
+    right: 176px;
+    position: absolute;
+  }
+  .rose-form-radio-label {
+      color: #000;
+  }
+}
\ No newline at end of file

From 9821f1ffc743bf7b2d82cc455cdb4c5cd54cb98e Mon Sep 17 00:00:00 2001
From: Dharini Jeeva <dharini@hashicorp.com>
Date: Thu, 13 Jan 2022 12:01:17 -0800
Subject: [PATCH 05/11] Delete _radioCard.scss

---
 .../styles/rose/components/form/_radioCard.scss | 17 -----------------
 1 file changed, 17 deletions(-)
 delete mode 100644 addons/rose/addon/styles/rose/components/form/_radioCard.scss

diff --git a/addons/rose/addon/styles/rose/components/form/_radioCard.scss b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
deleted file mode 100644
index f24a15dae..000000000
--- a/addons/rose/addon/styles/rose/components/form/_radioCard.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.rose-form-radio-card {
-    position: relative;
-    width: 370px;
-    height: 115px;    
-    background: #FFFFFF;
-    border: 1px solid #BAC1CC;    
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-    border-radius: 2px;
-  .rose-form-radio-field {
-    top: 89px;
-    right: 176px;
-    position: absolute;
-  }
-  .rose-form-radio-label {
-      color: #000;
-  }
-}
\ No newline at end of file

From 403880107d34d347a399b07fed08aef54b24fa81 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Thu, 13 Jan 2022 13:43:24 -0800
Subject: [PATCH 06/11] =?UTF-8?q?style:=20=F0=9F=92=84=20updates=20to=20he?=
 =?UTF-8?q?lper=20text?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/rose/addon/styles/rose/components/form/_radio.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/addons/rose/addon/styles/rose/components/form/_radio.scss b/addons/rose/addon/styles/rose/components/form/_radio.scss
index 353912dfe..50f8b2974 100644
--- a/addons/rose/addon/styles/rose/components/form/_radio.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radio.scss
@@ -33,11 +33,16 @@ $data-svg-prefix: 'data:image/svg+xml;utf-8,';
   position: relative;
   margin-bottom: sizing.rems(xs);
   color: var(--ui-gray);
+
   .helper-text {
     display: flex;
+    align-items: center;
+
     .rose-form-helper-text {
+      font-weight: normal;
       margin-left: sizing.rems(xxs);
-      line-height: typography.line-height(m);
+      line-height: typography.line-height(xl);
+      margin-bottom: 0;
     }
   }
   .rose-form-radio-label {

From 0d1dfb23b28c5f4e49a8db472d4448f108b73aae Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Fri, 14 Jan 2022 15:09:15 -0500
Subject: [PATCH 07/11] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20replace=20rend?=
 =?UTF-8?q?erTemplate=20with=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../users/user/actions/index.hbs}             |   0
 .../users/user/header/index.hbs}              |   0
 .../users/user/nav/index.hbs}                 |   0
 .../app/routes/scopes/scope/users/user.js     |  23 ---
 .../scopes/scope/users/user/add-accounts.js   |  23 ---
 .../app/templates/scopes/scope/users/user.hbs |  24 +--
 .../scopes/scope/users/user/accounts.hbs      | 166 ++++++++++--------
 .../scopes/scope/users/user/add-accounts.hbs  |  65 ++++---
 .../scope/users/user/add-accounts/-header.hbs |   2 -
 .../scopes/scope/users/user/index.hbs         |  32 +++-
 10 files changed, 162 insertions(+), 173 deletions(-)
 rename ui/admin/app/{templates/scopes/scope/users/user/-actions.hbs => components/users/user/actions/index.hbs} (100%)
 rename ui/admin/app/{templates/scopes/scope/users/user/-header.hbs => components/users/user/header/index.hbs} (100%)
 rename ui/admin/app/{templates/scopes/scope/users/user/-navigation.hbs => components/users/user/nav/index.hbs} (100%)
 delete mode 100644 ui/admin/app/templates/scopes/scope/users/user/add-accounts/-header.hbs

diff --git a/ui/admin/app/templates/scopes/scope/users/user/-actions.hbs b/ui/admin/app/components/users/user/actions/index.hbs
similarity index 100%
rename from ui/admin/app/templates/scopes/scope/users/user/-actions.hbs
rename to ui/admin/app/components/users/user/actions/index.hbs
diff --git a/ui/admin/app/templates/scopes/scope/users/user/-header.hbs b/ui/admin/app/components/users/user/header/index.hbs
similarity index 100%
rename from ui/admin/app/templates/scopes/scope/users/user/-header.hbs
rename to ui/admin/app/components/users/user/header/index.hbs
diff --git a/ui/admin/app/templates/scopes/scope/users/user/-navigation.hbs b/ui/admin/app/components/users/user/nav/index.hbs
similarity index 100%
rename from ui/admin/app/templates/scopes/scope/users/user/-navigation.hbs
rename to ui/admin/app/components/users/user/nav/index.hbs
diff --git a/ui/admin/app/routes/scopes/scope/users/user.js b/ui/admin/app/routes/scopes/scope/users/user.js
index 2d7ed072e..d26912707 100644
--- a/ui/admin/app/routes/scopes/scope/users/user.js
+++ b/ui/admin/app/routes/scopes/scope/users/user.js
@@ -12,27 +12,4 @@ export default class ScopesScopeUsersUserRoute extends Route {
   async model({ user_id }) {
     return this.store.findRecord('user', user_id);
   }
-
-  /**
-   * Renders the route-set specific page sections
-   * @override
-   */
-  renderTemplate() {
-    super.renderTemplate(...arguments);
-
-    this.render('scopes/scope/users/user/-header', {
-      into: 'scopes/scope/users/user',
-      outlet: 'header',
-    });
-
-    this.render('scopes/scope/users/user/-actions', {
-      into: 'scopes/scope/users/user',
-      outlet: 'actions',
-    });
-
-    this.render('scopes/scope/users/user/-navigation', {
-      into: 'scopes/scope/users/user',
-      outlet: 'navigation',
-    });
-  }
 }
diff --git a/ui/admin/app/routes/scopes/scope/users/user/add-accounts.js b/ui/admin/app/routes/scopes/scope/users/user/add-accounts.js
index ab62093a4..992f90a0e 100644
--- a/ui/admin/app/routes/scopes/scope/users/user/add-accounts.js
+++ b/ui/admin/app/routes/scopes/scope/users/user/add-accounts.js
@@ -38,29 +38,6 @@ export default class ScopesScopeUsersUserAddAccountsRoute extends Route {
     return { user, authMethods, accounts };
   }
 
-  /**
-   * Renders the route-set specific page sections
-   * @override
-   */
-  renderTemplate() {
-    super.renderTemplate(...arguments);
-
-    this.render('scopes/scope/users/user/add-accounts/-header', {
-      into: 'scopes/scope/users/user',
-      outlet: 'header',
-    });
-
-    this.render('-empty', {
-      into: 'scopes/scope/users/user',
-      outlet: 'actions',
-    });
-
-    this.render('-empty', {
-      into: 'scopes/scope/users/user',
-      outlet: 'navigation',
-    });
-  }
-
   // =actions
 
   /**
diff --git a/ui/admin/app/templates/scopes/scope/users/user.hbs b/ui/admin/app/templates/scopes/scope/users/user.hbs
index 837d1f984..7d32ecb0d 100644
--- a/ui/admin/app/templates/scopes/scope/users/user.hbs
+++ b/ui/admin/app/templates/scopes/scope/users/user.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/users/user/accounts.hbs b/ui/admin/app/templates/scopes/scope/users/user/accounts.hbs
index a61d813a0..e7373ac9e 100644
--- a/ui/admin/app/templates/scopes/scope/users/user/accounts.hbs
+++ b/ui/admin/app/templates/scopes/scope/users/user/accounts.hbs
@@ -1,79 +1,101 @@
 {{page-title (t 'resources.user.messages.accounts.title')}}
 
-{{#if @model.accounts}}
+<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.accounts as |account|}}
-        <body.row as |row|>
-          <row.headerCell>
-            {{account.accountName}}
-            <p>{{account.description}}</p>
-          </row.headerCell>
-          <row.cell>
-            <Rose::Badge>
-              {{t (concat 'resources.auth-method.types.' account.type)}}
-            </Rose::Badge>
-          </row.cell>
-          <row.cell>
-            <Copyable
-              @text={{account.id}}
-              @buttonText={{t 'actions.copy-to-clipboard'}}
-              @acknowledgeText={{t 'states.copied'}}
-            >
-              <code>{{account.id}}</code>
-            </Copyable>
-          </row.cell>
-          <row.cell>
-            {{#if (can 'removeAccounts user' @model.user)}}
-              <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 'removeAccount' @model.user account)
-                  }}
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <Users::User::Header @model={{@model.user}} />
+  </page.header>
+
+  <page.navigation>
+    <Users::User::Nav @model={{@model.user}} />
+  </page.navigation>
+
+  <page.actions>
+    <Users::User::Actions @model={{@model.user}} />
+  </page.actions>
+
+  <page.body>
+    {{#if @model.accounts}}
+
+      <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.accounts as |account|}}
+            <body.row as |row|>
+              <row.headerCell>
+                {{account.accountName}}
+                <p>{{account.description}}</p>
+              </row.headerCell>
+              <row.cell>
+                <Rose::Badge>
+                  {{t (concat 'resources.auth-method.types.' account.type)}}
+                </Rose::Badge>
+              </row.cell>
+              <row.cell>
+                <Copyable
+                  @text={{account.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>{{account.id}}</code>
+                </Copyable>
+              </row.cell>
+              <row.cell>
+                {{#if (can 'removeAccounts user' @model.user)}}
+                  <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 'removeAccount' @model.user account)
+                      }}
+                    >
+                      {{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.user.messages.accounts.title'}}
-      as |message|
-    >
-      <message.description>
-        {{t 'resources.user.messages.accounts.description'}}
-      </message.description>
-      <message.link @route='scopes.scope.users.user.add-accounts'>
-        <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
-        {{t 'resources.user.actions.add-accounts'}}
-      </message.link>
-    </Rose::Message>
-  </Rose::Layout::Centered>
+      <Rose::Layout::Centered>
+        <Rose::Message
+          @title={{t 'resources.user.messages.accounts.title'}}
+          as |message|
+        >
+          <message.description>
+            {{t 'resources.user.messages.accounts.description'}}
+          </message.description>
+          <message.link @route='scopes.scope.users.user.add-accounts'>
+            <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
+            {{t 'resources.user.actions.add-accounts'}}
+          </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/users/user/add-accounts.hbs b/ui/admin/app/templates/scopes/scope/users/user/add-accounts.hbs
index 4f514a506..df557eb09 100644
--- a/ui/admin/app/templates/scopes/scope/users/user/add-accounts.hbs
+++ b/ui/admin/app/templates/scopes/scope/users/user/add-accounts.hbs
@@ -1,28 +1,43 @@
 {{page-title (t 'resources.user.actions.add-accounts')}}
 
-{{#if @model.accounts}}
-  <Form::User::AddAccounts
-    @model={{@model.user}}
-    @authMethods={{@model.authMethods}}
-    @accounts={{@model.accounts}}
-    @submit={{route-action 'addAccounts' @model.user}}
-    @cancel={{route-action 'cancel'}}
-  />
-{{/if}}
+<Rose::Layout::Page as |page|>
 
-{{#unless @model.accounts}}
-  <Rose::Layout::Centered>
-    <Rose::Message
-      @title={{t 'resources.user.messages.no-accounts.title'}}
-      as |message|
-    >
-      <message.description>
-        {{t 'resources.user.messages.no-accounts.description'}}
-      </message.description>
-      <message.link @route='scopes.scope.users.user.accounts'>
-        <Rose::Icon @name='flight-icons/svg/chevron-left-16' />
-        {{t 'actions.back'}}
-      </message.link>
-    </Rose::Message>
-  </Rose::Layout::Centered>
-{{/unless}}
\ No newline at end of file
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <h2>{{t 'resources.user.messages.add-accounts.title'}}</h2>
+    <p>{{t 'resources.user.messages.add-accounts.description'}}</p>
+  </page.header>
+
+  <page.body>
+    {{#if @model.accounts}}
+      <Form::User::AddAccounts
+        @model={{@model.user}}
+        @authMethods={{@model.authMethods}}
+        @accounts={{@model.accounts}}
+        @submit={{route-action 'addAccounts' @model.user}}
+        @cancel={{route-action 'cancel'}}
+      />
+    {{/if}}
+
+    {{#unless @model.accounts}}
+      <Rose::Layout::Centered>
+        <Rose::Message
+          @title={{t 'resources.user.messages.no-accounts.title'}}
+          as |message|
+        >
+          <message.description>
+            {{t 'resources.user.messages.no-accounts.description'}}
+          </message.description>
+          <message.link @route='scopes.scope.users.user.accounts'>
+            <Rose::Icon @name='flight-icons/svg/chevron-left-16' />
+            {{t 'actions.back'}}
+          </message.link>
+        </Rose::Message>
+      </Rose::Layout::Centered>
+    {{/unless}}
+  </page.body>
+
+</Rose::Layout::Page>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/users/user/add-accounts/-header.hbs b/ui/admin/app/templates/scopes/scope/users/user/add-accounts/-header.hbs
deleted file mode 100644
index 91acf84fd..000000000
--- a/ui/admin/app/templates/scopes/scope/users/user/add-accounts/-header.hbs
+++ /dev/null
@@ -1,2 +0,0 @@
-<h2>{{t 'resources.user.messages.add-accounts.title'}}</h2>
-<p>{{t 'resources.user.messages.add-accounts.description'}}</p>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/users/user/index.hbs b/ui/admin/app/templates/scopes/scope/users/user/index.hbs
index e90a1ff9a..c5530509a 100644
--- a/ui/admin/app/templates/scopes/scope/users/user/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/users/user/index.hbs
@@ -1,5 +1,27 @@
-<Form::User
-  @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>
+    <Users::User::Header @model={{@model}} />
+  </page.header>
+
+  <page.navigation>
+    <Users::User::Nav @model={{@model}} />
+  </page.navigation>
+
+  <page.actions>
+    <Users::User::Actions @model={{@model}} />
+  </page.actions>
+
+  <page.body>
+    <Form::User
+      @model={{@model}}
+      @submit={{route-action 'save' @model}}
+      @cancel={{route-action 'cancel' @model}}
+    />
+  </page.body>
+
+</Rose::Layout::Page>
\ No newline at end of file

From cd30e05e2e3e0b8b83b6a919f5217202f4c1ed0a Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Fri, 14 Jan 2022 16:56:59 -0500
Subject: [PATCH 08/11] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20replace=20rend?=
 =?UTF-8?q?erTemplate=20with=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/api/addon/models/auth-method.js        |   2 +
 addons/api/mirage/config.js                   |   5 +-
 .../accounts/account/actions/index.hbs}       |   0
 .../accounts/account/header/index.hbs}        |   0
 .../accounts/account/nav/index.hbs}           |   0
 .../auth-method/actions/index.hbs}            |   2 +-
 .../auth-method/header/index.hbs}             |   0
 .../managed-group/actions/index.hbs}          |   2 +-
 .../managed-group/header/index.hbs}           |   0
 .../managed-group/nav/index.hbs}              |   0
 .../auth-methods/auth-method/nav/index.hbs}   |   0
 .../scopes/scope/auth-methods/auth-method.js  |   9 -
 .../scopes/scope/auth-methods/auth-method.js  |  24 --
 .../auth-methods/auth-method/accounts.js      |  11 +-
 .../auth-method/accounts/account.js           |  32 --
 .../auth-method/accounts/account/index.js     |  10 +-
 .../accounts/account/set-password.js          |  17 -
 .../auth-methods/auth-method/accounts/new.js  |  23 --
 .../auth-method/managed-groups.js             |  14 +-
 .../managed-groups/managed-group.js           |  32 --
 .../managed-groups/managed-group/members.js   |  18 +-
 .../auth-method/managed-groups/new.js         |  22 --
 .../scopes/scope/auth-methods/auth-method.hbs |  24 +-
 .../auth-method/accounts/account/index.hbs    |  33 +-
 .../accounts/account/set-password.hbs         |  40 ++-
 .../accounts/account/set-password/-header.hbs |   9 -
 .../auth-method/accounts/index.hbs            | 310 ++++++++++--------
 .../auth-methods/auth-method/accounts/new.hbs |  28 +-
 .../auth-method/accounts/new/-header.hbs      |   4 -
 .../scope/auth-methods/auth-method/index.hbs  |  38 ++-
 .../auth-method/managed-groups/index.hbs      | 190 ++++++-----
 .../managed-groups/managed-group/index.hbs    |  38 ++-
 .../managed-groups/managed-group/members.hbs  | 148 +++++----
 .../auth-method/managed-groups/new.hbs        |  28 +-
 .../managed-groups/new/-header.hbs            |   5 -
 35 files changed, 576 insertions(+), 542 deletions(-)
 rename ui/admin/app/{templates/scopes/scope/auth-methods/auth-method/accounts/account/-actions.hbs => components/auth-methods/auth-method/accounts/account/actions/index.hbs} (100%)
 rename ui/admin/app/{templates/scopes/scope/auth-methods/auth-method/accounts/account/-header.hbs => components/auth-methods/auth-method/accounts/account/header/index.hbs} (100%)
 rename ui/admin/app/{templates/scopes/scope/auth-methods/auth-method/accounts/account/-navigation.hbs => components/auth-methods/auth-method/accounts/account/nav/index.hbs} (100%)
 rename ui/admin/app/{templates/scopes/scope/auth-methods/auth-method/-actions.hbs => components/auth-methods/auth-method/actions/index.hbs} (97%)
 rename ui/admin/app/{templates/scopes/scope/auth-methods/auth-method/-header.hbs => components/auth-methods/auth-method/header/index.hbs} (100%)
 rename ui/admin/app/{templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/-actions.hbs => components/auth-methods/auth-method/managed-groups/managed-group/actions/index.hbs} (83%)
 rename ui/admin/app/{templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/-header.hbs => components/auth-methods/auth-method/managed-groups/managed-group/header/index.hbs} (100%)
 rename ui/admin/app/{templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/-navigation.hbs => components/auth-methods/auth-method/managed-groups/managed-group/nav/index.hbs} (100%)
 rename ui/admin/app/{templates/scopes/scope/auth-methods/auth-method/-navigation.hbs => components/auth-methods/auth-method/nav/index.hbs} (100%)
 delete mode 100644 ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/set-password/-header.hbs
 delete mode 100644 ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/new/-header.hbs
 delete mode 100644 ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/new/-header.hbs

diff --git a/addons/api/addon/models/auth-method.js b/addons/api/addon/models/auth-method.js
index 8e6c4f198..f0832cc91 100644
--- a/addons/api/addon/models/auth-method.js
+++ b/addons/api/addon/models/auth-method.js
@@ -61,6 +61,8 @@ export default class AuthMethodModel extends GeneratedAuthMethodModel {
    */
   @equal('is_primary', true) isPrimary;
 
+  options = options;
+
   /**
    * @type {boolean}
    */
diff --git a/addons/api/mirage/config.js b/addons/api/mirage/config.js
index b866dcae2..759eb63c3 100644
--- a/addons/api/mirage/config.js
+++ b/addons/api/mirage/config.js
@@ -536,9 +536,10 @@ export default function () {
       return managedGroups.where({ authMethodId });
     }
   );
-  this.get('/managed-groups/:id');
-  this.del('/managed-groups/:id');
   this.post('/managed-groups');
+  this.get('/managed-groups/:id');
+  this.patch('/managed-groups/:id');
+  this.del('/managed-groups/:id');
 
   /* Uncomment the following line and the Response import above
    * Then change the response code to simulate error responses.
diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/-actions.hbs b/ui/admin/app/components/auth-methods/auth-method/accounts/account/actions/index.hbs
similarity index 100%
rename from ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/-actions.hbs
rename to ui/admin/app/components/auth-methods/auth-method/accounts/account/actions/index.hbs
diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/-header.hbs b/ui/admin/app/components/auth-methods/auth-method/accounts/account/header/index.hbs
similarity index 100%
rename from ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/-header.hbs
rename to ui/admin/app/components/auth-methods/auth-method/accounts/account/header/index.hbs
diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/-navigation.hbs b/ui/admin/app/components/auth-methods/auth-method/accounts/account/nav/index.hbs
similarity index 100%
rename from ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/-navigation.hbs
rename to ui/admin/app/components/auth-methods/auth-method/accounts/account/nav/index.hbs
diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/-actions.hbs b/ui/admin/app/components/auth-methods/auth-method/actions/index.hbs
similarity index 97%
rename from ui/admin/app/templates/scopes/scope/auth-methods/auth-method/-actions.hbs
rename to ui/admin/app/components/auth-methods/auth-method/actions/index.hbs
index 5626026a6..39c4a1d96 100644
--- a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/-actions.hbs
+++ b/ui/admin/app/components/auth-methods/auth-method/actions/index.hbs
@@ -21,7 +21,7 @@
           @changed={{route-action 'changeState'}}
           as |radioGroup|
         >
-          {{#each this.oidcStates as |state|}}
+          {{#each @model.options.oidc.state as |state|}}
             <dropdown.item>
               <radioGroup.radio
                 @label={{t (concat 'states.' state)}}
diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/-header.hbs b/ui/admin/app/components/auth-methods/auth-method/header/index.hbs
similarity index 100%
rename from ui/admin/app/templates/scopes/scope/auth-methods/auth-method/-header.hbs
rename to ui/admin/app/components/auth-methods/auth-method/header/index.hbs
diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/-actions.hbs b/ui/admin/app/components/auth-methods/auth-method/managed-groups/managed-group/actions/index.hbs
similarity index 83%
rename from ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/-actions.hbs
rename to ui/admin/app/components/auth-methods/auth-method/managed-groups/managed-group/actions/index.hbs
index 3340d97f2..98a51d476 100644
--- a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/-actions.hbs
+++ b/ui/admin/app/components/auth-methods/auth-method/managed-groups/managed-group/actions/index.hbs
@@ -7,7 +7,7 @@
     <dropdown.button
       @style='danger'
       @disabled={{@model.canSave}}
-      {{on 'click' (route-action 'delete' @model)}}
+      {{on 'click' (route-action 'deleteManagedGroup' @model)}}
     >
       {{t 'resources.managed-group.actions.delete'}}
     </dropdown.button>
diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/-header.hbs b/ui/admin/app/components/auth-methods/auth-method/managed-groups/managed-group/header/index.hbs
similarity index 100%
rename from ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/-header.hbs
rename to ui/admin/app/components/auth-methods/auth-method/managed-groups/managed-group/header/index.hbs
diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/-navigation.hbs b/ui/admin/app/components/auth-methods/auth-method/managed-groups/managed-group/nav/index.hbs
similarity index 100%
rename from ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/-navigation.hbs
rename to ui/admin/app/components/auth-methods/auth-method/managed-groups/managed-group/nav/index.hbs
diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/-navigation.hbs b/ui/admin/app/components/auth-methods/auth-method/nav/index.hbs
similarity index 100%
rename from ui/admin/app/templates/scopes/scope/auth-methods/auth-method/-navigation.hbs
rename to ui/admin/app/components/auth-methods/auth-method/nav/index.hbs
diff --git a/ui/admin/app/controllers/scopes/scope/auth-methods/auth-method.js b/ui/admin/app/controllers/scopes/scope/auth-methods/auth-method.js
index 1aa269744..1005f0216 100644
--- a/ui/admin/app/controllers/scopes/scope/auth-methods/auth-method.js
+++ b/ui/admin/app/controllers/scopes/scope/auth-methods/auth-method.js
@@ -1,5 +1,4 @@
 import Controller from '@ember/controller';
-import { options } from 'api/models/auth-method';
 
 export default class ScopesScopeAuthMethodsAuthMethodController extends Controller {
   // =attributes
@@ -11,12 +10,4 @@ export default class ScopesScopeAuthMethodsAuthMethodController extends Controll
   get breadCrumb() {
     return this.model.displayName;
   }
-
-  /**
-   * OIDC auth-method states
-   * @type {[string]}
-   */
-  get oidcStates() {
-    return options.oidc.state;
-  }
 }
diff --git a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method.js b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method.js
index c0678ed0a..bd2f8457e 100644
--- a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method.js
+++ b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method.js
@@ -15,30 +15,6 @@ export default class ScopesScopeAuthMethodsAuthMethodRoute extends Route {
     return this.store.findRecord('auth-method', auth_method_id);
   }
 
-  /**
-   * Renders the auth-method specific templates for header, navigation,
-   * and actions page sections.
-   * @override
-   */
-  renderTemplate() {
-    super.renderTemplate(...arguments);
-
-    this.render('scopes/scope/auth-methods/auth-method/-header', {
-      into: 'scopes/scope/auth-methods/auth-method',
-      outlet: 'header',
-    });
-
-    this.render('scopes/scope/auth-methods/auth-method/-navigation', {
-      into: 'scopes/scope/auth-methods/auth-method',
-      outlet: 'navigation',
-    });
-
-    this.render('scopes/scope/auth-methods/auth-method/-actions', {
-      into: 'scopes/scope/auth-methods/auth-method',
-      outlet: 'actions',
-    });
-  }
-
   // =actions
 
   /**
diff --git a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts.js b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts.js
index 9fcb9b990..5072d99b7 100644
--- a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts.js
+++ b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts.js
@@ -19,16 +19,23 @@ export default class ScopesScopeAuthMethodsAuthMethodAccountsRoute extends Route
    * Returns accounts for the current auth method.
    * @return {Promise{[AccountModel]}}
    */
-  model() {
+  async model() {
     const authMethod = this.modelFor('scopes.scope.auth-methods.auth-method');
     const { id: auth_method_id } = authMethod;
+    let accounts;
+
     if (
       this.can.can('list collection', authMethod, {
         collection: 'accounts',
       })
     ) {
-      return this.store.query('account', { auth_method_id });
+      accounts = await this.store.query('account', { auth_method_id });
     }
+
+    return {
+      authMethod,
+      accounts,
+    };
   }
 
   // =actions
diff --git a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts/account.js b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts/account.js
index 8f90f239e..6ee0f3426 100644
--- a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts/account.js
+++ b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts/account.js
@@ -12,36 +12,4 @@ export default class ScopesScopeAuthMethodsAuthMethodAccountsAccountRoute extend
   model({ account_id }) {
     return this.store.findRecord('account', account_id, { reload: true });
   }
-
-  /**
-   * Renders the route-set specific page sections
-   * @override
-   */
-  renderTemplate() {
-    super.renderTemplate(...arguments);
-
-    this.render(
-      'scopes/scope/auth-methods/auth-method/accounts/account/-header',
-      {
-        into: 'scopes/scope/auth-methods/auth-method',
-        outlet: 'header',
-      }
-    );
-
-    this.render(
-      'scopes/scope/auth-methods/auth-method/accounts/account/-actions',
-      {
-        into: 'scopes/scope/auth-methods/auth-method',
-        outlet: 'actions',
-      }
-    );
-
-    this.render(
-      'scopes/scope/auth-methods/auth-method/accounts/account/-navigation',
-      {
-        into: 'scopes/scope/auth-methods/auth-method',
-        outlet: 'navigation',
-      }
-    );
-  }
 }
diff --git a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts/account/index.js b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts/account/index.js
index 20a6940d7..44cc36e3c 100644
--- a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts/account/index.js
+++ b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts/account/index.js
@@ -1,10 +1,2 @@
 import Route from '@ember/routing/route';
-export default class ScopesScopeAuthMethodsAuthMethodAccountsAccountIndexRoute extends Route {
-  // setupController(controller) {
-  //   const authMethod = this.modelFor(
-  //     'scopes.scope.auth-methods.auth-method'
-  //   );
-  //   super.setupController(...arguments);
-  //   controller.setProperties({ authMethod });
-  // }
-}
+export default class ScopesScopeAuthMethodsAuthMethodAccountsAccountIndexRoute extends Route {}
diff --git a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts/account/set-password.js b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts/account/set-password.js
index 019933eaf..c1a1ba32f 100644
--- a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts/account/set-password.js
+++ b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts/account/set-password.js
@@ -11,23 +11,6 @@ export default class ScopesScopeAuthMethodsAuthMethodAccountsAccountSettingsRout
   @service notify;
   @service router;
 
-  // =methods
-
-  /**
-   * Renders the route-set specific page sections
-   * @override
-   */
-  renderTemplate() {
-    super.renderTemplate(...arguments);
-    this.render(
-      'scopes/scope/auth-methods/auth-method/accounts/account/set-password/-header',
-      {
-        into: 'scopes/scope/auth-methods/auth-method',
-        outlet: 'header',
-      }
-    );
-  }
-
   // =actions
 
   /**
diff --git a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts/new.js b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts/new.js
index 2d31bd683..4f5d11f57 100644
--- a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts/new.js
+++ b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts/new.js
@@ -16,27 +16,4 @@ export default class ScopesScopeAuthMethodsAuthMethodAccountsNewRoute extends Ro
       auth_method_id,
     });
   }
-
-  /**
-   * Renders new account templates for header, navigation, and action page sections.
-   * @override
-   */
-  renderTemplate() {
-    super.renderTemplate(...arguments);
-
-    this.render('scopes/scope/auth-methods/auth-method/accounts/new/-header', {
-      into: 'scopes/scope/auth-methods/auth-method',
-      outlet: 'header',
-    });
-
-    this.render('_empty', {
-      into: 'scopes/scope/auth-methods/auth-method',
-      outlet: 'actions',
-    });
-
-    this.render('_empty', {
-      into: 'scopes/scope/auth-methods/auth-method',
-      outlet: 'navigation',
-    });
-  }
 }
diff --git a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups.js b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups.js
index 51b55adb9..6a558f0ad 100644
--- a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups.js
+++ b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups.js
@@ -19,16 +19,24 @@ export default class ScopesScopeAuthMethodsAuthMethodManagedGroupsRoute extends
    *
    * @returns {Promise{[ManagedGroupsModel]}}
    */
-  model() {
+  async model() {
     const authMethod = this.modelFor('scopes.scope.auth-methods.auth-method');
     const { id: auth_method_id } = authMethod;
     const canListManagedGroups = this.can.can('list collection', authMethod, {
       collection: 'managed-groups',
     });
+    let managedGroups;
 
     if (canListManagedGroups) {
-      return this.store.query('managed-group', { auth_method_id });
+      managedGroups = await this.store.query('managed-group', {
+        auth_method_id,
+      });
     }
+
+    return {
+      authMethod,
+      managedGroups,
+    };
   }
 
   // =actions
@@ -81,7 +89,7 @@ export default class ScopesScopeAuthMethodsAuthMethodManagedGroupsRoute extends
   @confirm('questions.delete-confirm')
   @notifyError(({ message }) => message, { catch: true })
   @notifySuccess('notifications.delete-success')
-  async delete(managedGroup) {
+  async deleteManagedGroup(managedGroup) {
     await managedGroup.destroyRecord();
     await this.router.replaceWith(
       'scopes.scope.auth-methods.auth-method.managed-groups'
diff --git a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups/managed-group.js b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups/managed-group.js
index 816b537da..414bfd6b8 100644
--- a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups/managed-group.js
+++ b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups/managed-group.js
@@ -14,36 +14,4 @@ export default class ScopesScopeAuthMethodsAuthMethodManagedGroupsManagedGroupRo
       reload: true,
     });
   }
-
-  /**
-   * Render the route-set specific page sections
-   * @override
-   */
-  renderTemplate() {
-    super.renderTemplate(...arguments);
-
-    this.render(
-      'scopes/scope/auth-methods/auth-method/managed-groups/managed-group/-header',
-      {
-        into: 'scopes/scope/auth-methods/auth-method',
-        outlet: 'header',
-      }
-    );
-
-    this.render(
-      'scopes/scope/auth-methods/auth-method/managed-groups/managed-group/-actions',
-      {
-        into: 'scopes/scope/auth-methods/auth-method',
-        outlet: 'actions',
-      }
-    );
-
-    this.render(
-      'scopes/scope/auth-methods/auth-method/managed-groups/managed-group/-navigation',
-      {
-        into: 'scopes/scope/auth-methods/auth-method',
-        outlet: 'navigation',
-      }
-    );
-  }
 }
diff --git a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/members.js b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/members.js
index 1c3dd319c..30e1a98e8 100644
--- a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/members.js
+++ b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/members.js
@@ -12,15 +12,19 @@ export default class ScopesScopeAuthMethodsAuthMethodManagedGroupsManagedGroupMe
    * Returns the previously loaded managed group instances memebrs.
    * @return {Promise{[AccountModel]}}
    */
-  model() {
-    const { auth_method_id, member_ids } = this.modelFor(
+  async model() {
+    const managedGroup = this.modelFor(
       'scopes.scope.auth-methods.auth-method.managed-groups.managed-group'
     );
+    const { auth_method_id, member_ids } = managedGroup;
 
-    return this.resourceFilterStore.queryBy(
-      'account',
-      { id: member_ids },
-      { auth_method_id }
-    );
+    return {
+      managedGroup,
+      members: await this.resourceFilterStore.queryBy(
+        'account',
+        { id: member_ids },
+        { auth_method_id }
+      ),
+    };
   }
 }
diff --git a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups/new.js b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups/new.js
index ca2b1473c..702d4bb6e 100644
--- a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups/new.js
+++ b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups/new.js
@@ -11,26 +11,4 @@ export default class ScopesScopeAuthMethodsAuthMethodManagedGroupsNewRoute exten
       auth_method_id,
     });
   }
-
-  renderTemplate() {
-    super.renderTemplate(...arguments);
-
-    this.render(
-      'scopes/scope/auth-methods/auth-method/managed-groups/new/-header',
-      {
-        into: 'scopes/scope/auth-methods/auth-method',
-        outlet: 'header',
-      }
-    );
-
-    this.render('_empty', {
-      into: 'scopes/scope/auth-methods/auth-method',
-      outlet: 'actions',
-    });
-
-    this.render('_empty', {
-      into: 'scopes/scope/auth-methods/auth-method',
-      outlet: 'navigation',
-    });
-  }
 }
diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method.hbs
index 837d1f984..7d32ecb0d 100644
--- a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method.hbs
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method.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/auth-methods/auth-method/accounts/account/index.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/index.hbs
index e20c46a14..128f07833 100644
--- a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/index.hbs
@@ -1,5 +1,28 @@
-<Form::Account
-  @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>
+    <AuthMethods::AuthMethod::Accounts::Account::Header @model={{@model}} />
+  </page.header>
+
+  <page.navigation>
+    <AuthMethods::AuthMethod::Accounts::Account::Nav @model={{@model}} />
+  </page.navigation>
+
+  <page.actions>
+    <AuthMethods::AuthMethod::Accounts::Account::Actions @model={{@model}} />
+  </page.actions>
+
+  <page.body>
+    <Form::Account
+      @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/auth-methods/auth-method/accounts/account/set-password.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/set-password.hbs
index 58be5da25..07eacdb14 100644
--- a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/set-password.hbs
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/set-password.hbs
@@ -1,7 +1,37 @@
 {{page-title (t 'actions.set-password')}}
 
-<Form::Account::Password::SetPassword
-  @model={{@model}}
-  @submit={{route-action 'setPassword' @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.account.title'}}</h2>
+    <p>{{t 'resources.account.messages.set-password.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>
+    <AuthMethods::AuthMethod::Accounts::Account::Nav @model={{@model}} />
+  </page.navigation>
+
+  <page.actions>
+    <AuthMethods::AuthMethod::Accounts::Account::Actions @model={{@model}} />
+  </page.actions>
+
+  <page.body>
+    <Form::Account::Password::SetPassword
+      @model={{@model}}
+      @submit={{route-action 'setPassword' @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/auth-methods/auth-method/accounts/account/set-password/-header.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/set-password/-header.hbs
deleted file mode 100644
index da4406391..000000000
--- a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/set-password/-header.hbs
+++ /dev/null
@@ -1,9 +0,0 @@
-<h2>{{t 'resources.account.title'}}</h2>
-<p>{{t 'resources.account.messages.set-password.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/auth-methods/auth-method/accounts/index.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/index.hbs
index 67ba884ae..23568129e 100644
--- a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/index.hbs
@@ -1,149 +1,175 @@
-{{#if @model}}
-  {{! OIDC accounts display more fields }}
-  {{#if @model.firstObject.isOIDC}}
-    <Rose::Table as |table|>
-      <table.header as |header|>
-        <header.row as |row|>
-          <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
-          <row.headerCell>{{t 'form.issuer.label'}}</row.headerCell>
-          <row.headerCell>{{t 'form.subject.label'}}</row.headerCell>
-          <row.headerCell>{{t 'form.email.label'}}</row.headerCell>
-          <row.headerCell>{{t 'form.full_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 |account|}}
-          <body.row as |row|>
-            <row.headerCell scope='row'>
-              {{#if (can 'read model' account)}}
-                <LinkTo
-                  @route='scopes.scope.auth-methods.auth-method.accounts.account'
-                  @model={{account.id}}
-                >
-                  {{account.accountName}}
-                </LinkTo>
-              {{else}}
-                {{account.accountName}}
-              {{/if}}
-              <p>{{account.description}}</p>
-            </row.headerCell>
-            <row.cell>
-              <code>{{account.attributes.issuer}}</code>
-            </row.cell>
-            <row.cell>
-              <code>{{account.attributes.subject}}</code>
-            </row.cell>
-            <row.cell>
-              <code>{{account.attributes.email}}</code>
-            </row.cell>
-            <row.cell>
-              {{account.attributes.full_name}}
-            </row.cell>
-            <row.cell>
-              <Rose::Badge>{{account.type}}</Rose::Badge>
-            </row.cell>
-            <row.cell>
-              <Copyable
-                @text={{account.id}}
-                @buttonText={{t 'actions.copy-to-clipboard'}}
-                @acknowledgeText={{t 'states.copied'}}
-              >
-                <code>{{account.id}}</code>
-              </Copyable>
-            </row.cell>
-          </body.row>
-        {{/each}}
-      </table.body>
-    </Rose::Table>
-  {{else}}
-    <Rose::Table as |table|>
-      <table.header as |header|>
-        <header.row as |row|>
-          <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
-          <row.headerCell>{{t 'form.login_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 |account|}}
-          <body.row as |row|>
-            <row.headerCell>
-              {{#if (can 'read model' account)}}
-                <LinkTo
-                  @route='scopes.scope.auth-methods.auth-method.accounts.account'
-                  @model={{account.id}}
-                >
-                  {{account.accountName}}
-                </LinkTo>
-              {{else}}
-                {{account.accountName}}
-              {{/if}}
-              <p>{{account.description}}</p>
-            </row.headerCell>
-            <row.cell>
-              {{account.attributes.login_name}}
-            </row.cell>
-            <row.cell>
-              <Rose::Badge>{{account.type}}</Rose::Badge>
-            </row.cell>
-            <row.cell>
-              <Copyable
-                @text={{account.id}}
-                @buttonText={{t 'actions.copy-to-clipboard'}}
-                @acknowledgeText={{t 'states.copied'}}
-              >
-                <code>{{account.id}}</code>
-              </Copyable>
-            </row.cell>
-          </body.row>
-        {{/each}}
-      </table.body>
-    </Rose::Table>
-  {{/if}}
-{{else}}
+<Rose::Layout::Page as |page|>
 
-  <Rose::Layout::Centered>
-    <Rose::Message
-      @title={{t 'resources.account.messages.welcome.title'}}
-      as |message|
-    >
-      <message.description>
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
 
-        {{#if (can 'list collection' this.authMethod collection='accounts')}}
-          {{! can list (at least):  show default welcome message}}
-          {{t 'resources.account.description'}}
+  <page.header>
+    <AuthMethods::AuthMethod::Header @model={{@model.authMethod}} />
+  </page.header>
 
-        {{else if (can
-          'create collection' this.authMethod collection='accounts'
-        )}}
-          {{! can create (only):  show create-but-not-list welcome message}}
-          {{t
-            'descriptions.create-but-not-list'
-            resource=(t 'resources.account.title_plural')
-          }}
-        {{else}}
-          {{! can neither list nor create }}
-          {{t
-            'descriptions.neither-list-nor-create'
-            resource=(t 'resources.account.title_plural')
-          }}
-        {{/if}}
+  <page.navigation>
+    <AuthMethods::AuthMethod::Nav @model={{@model.authMethod}} />
+  </page.navigation>
 
-      </message.description>
+  <page.actions>
+    <AuthMethods::AuthMethod::Actions @model={{@model.authMethod}} />
+  </page.actions>
 
-      {{#if (can 'create collection' this.authMethod collection='accounts')}}
-
-        <message.link
-          @route='scopes.scope.auth-methods.auth-method.accounts.new'
-        >
-          <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
-          {{t 'resources.account.actions.create'}}
-        </message.link>
+  <page.body>
+    {{#if @model.accounts}}
+      {{! OIDC accounts display more fields }}
+      {{#if @model.accounts.firstObject.isOIDC}}
+        <Rose::Table as |table|>
+          <table.header as |header|>
+            <header.row as |row|>
+              <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
+              <row.headerCell>{{t 'form.issuer.label'}}</row.headerCell>
+              <row.headerCell>{{t 'form.subject.label'}}</row.headerCell>
+              <row.headerCell>{{t 'form.email.label'}}</row.headerCell>
+              <row.headerCell>{{t 'form.full_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.accounts as |account|}}
+              <body.row as |row|>
+                <row.headerCell scope='row'>
+                  {{#if (can 'read model' account)}}
+                    <LinkTo
+                      @route='scopes.scope.auth-methods.auth-method.accounts.account'
+                      @model={{account.id}}
+                    >
+                      {{account.accountName}}
+                    </LinkTo>
+                  {{else}}
+                    {{account.accountName}}
+                  {{/if}}
+                  <p>{{account.description}}</p>
+                </row.headerCell>
+                <row.cell>
+                  <code>{{account.attributes.issuer}}</code>
+                </row.cell>
+                <row.cell>
+                  <code>{{account.attributes.subject}}</code>
+                </row.cell>
+                <row.cell>
+                  <code>{{account.attributes.email}}</code>
+                </row.cell>
+                <row.cell>
+                  {{account.attributes.full_name}}
+                </row.cell>
+                <row.cell>
+                  <Rose::Badge>{{account.type}}</Rose::Badge>
+                </row.cell>
+                <row.cell>
+                  <Copyable
+                    @text={{account.id}}
+                    @buttonText={{t 'actions.copy-to-clipboard'}}
+                    @acknowledgeText={{t 'states.copied'}}
+                  >
+                    <code>{{account.id}}</code>
+                  </Copyable>
+                </row.cell>
+              </body.row>
+            {{/each}}
+          </table.body>
+        </Rose::Table>
+      {{else}}
+        <Rose::Table as |table|>
+          <table.header as |header|>
+            <header.row as |row|>
+              <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
+              <row.headerCell>{{t 'form.login_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.accounts as |account|}}
+              <body.row as |row|>
+                <row.headerCell>
+                  {{#if (can 'read model' account)}}
+                    <LinkTo
+                      @route='scopes.scope.auth-methods.auth-method.accounts.account'
+                      @model={{account.id}}
+                    >
+                      {{account.accountName}}
+                    </LinkTo>
+                  {{else}}
+                    {{account.accountName}}
+                  {{/if}}
+                  <p>{{account.description}}</p>
+                </row.headerCell>
+                <row.cell>
+                  {{account.attributes.login_name}}
+                </row.cell>
+                <row.cell>
+                  <Rose::Badge>{{account.type}}</Rose::Badge>
+                </row.cell>
+                <row.cell>
+                  <Copyable
+                    @text={{account.id}}
+                    @buttonText={{t 'actions.copy-to-clipboard'}}
+                    @acknowledgeText={{t 'states.copied'}}
+                  >
+                    <code>{{account.id}}</code>
+                  </Copyable>
+                </row.cell>
+              </body.row>
+            {{/each}}
+          </table.body>
+        </Rose::Table>
       {{/if}}
-    </Rose::Message>
-  </Rose::Layout::Centered>
+    {{else}}
 
-{{/if}}
\ No newline at end of file
+      <Rose::Layout::Centered>
+        <Rose::Message
+          @title={{t 'resources.account.messages.welcome.title'}}
+          as |message|
+        >
+          <message.description>
+
+            {{#if
+              (can 'list collection' this.authMethod collection='accounts')
+            }}
+              {{! can list (at least):  show default welcome message}}
+              {{t 'resources.account.description'}}
+
+            {{else if (can
+              'create collection' this.authMethod collection='accounts'
+            )}}
+              {{! can create (only):  show create-but-not-list welcome message}}
+              {{t
+                'descriptions.create-but-not-list'
+                resource=(t 'resources.account.title_plural')
+              }}
+            {{else}}
+              {{! can neither list nor create }}
+              {{t
+                'descriptions.neither-list-nor-create'
+                resource=(t 'resources.account.title_plural')
+              }}
+            {{/if}}
+
+          </message.description>
+
+          {{#if
+            (can 'create collection' this.authMethod collection='accounts')
+          }}
+
+            <message.link
+              @route='scopes.scope.auth-methods.auth-method.accounts.new'
+            >
+              <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
+              {{t 'resources.account.actions.create'}}
+            </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/auth-methods/auth-method/accounts/new.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/new.hbs
index e20c46a14..fac7d93fb 100644
--- a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/new.hbs
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/new.hbs
@@ -1,5 +1,23 @@
-<Form::Account
-  @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'}}
+      <DocLink @doc='account.new' @iconSize='large' />
+    </h2>
+  </page.header>
+
+  <page.body>
+    <Form::Account
+      @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/auth-methods/auth-method/accounts/new/-header.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/new/-header.hbs
deleted file mode 100644
index 0144711e6..000000000
--- a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/new/-header.hbs
+++ /dev/null
@@ -1,4 +0,0 @@
-<h2>
-  {{t 'titles.new'}}
-  <DocLink @doc='account.new' @iconSize='large' />
-</h2>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/index.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/index.hbs
index e3302df0b..2360f98a6 100644
--- a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/index.hbs
@@ -1,8 +1,30 @@
-<Form::AuthMethod
-  @model={{@model}}
-  @submit={{route-action 'save' @model}}
-  @cancel={{route-action 'cancel' @model}}
-  @removeItemByIndex={{route-action 'removeItemByIndex' @model}}
-  @addStringItem={{route-action 'addStringItem' @model}}
-  @addAccountClaimMapItem={{route-action 'addAccountClaimMapItem' @model}}
-/>
\ No newline at end of file
+<Rose::Layout::Page as |page|>
+
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <AuthMethods::AuthMethod::Header @model={{@model}} />
+  </page.header>
+
+  <page.navigation>
+    <AuthMethods::AuthMethod::Nav @model={{@model}} />
+  </page.navigation>
+
+  <page.actions>
+    <AuthMethods::AuthMethod::Actions @model={{@model}} />
+  </page.actions>
+
+  <page.body>
+    <Form::AuthMethod
+      @model={{@model}}
+      @submit={{route-action 'save' @model}}
+      @cancel={{route-action 'cancel' @model}}
+      @removeItemByIndex={{route-action 'removeItemByIndex' @model}}
+      @addStringItem={{route-action 'addStringItem' @model}}
+      @addAccountClaimMapItem={{route-action 'addAccountClaimMapItem' @model}}
+    />
+  </page.body>
+
+</Rose::Layout::Page>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/index.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/index.hbs
index c482fd414..cce1b218b 100644
--- a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/index.hbs
@@ -1,86 +1,112 @@
-{{#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.description.label'}}</row.headerCell>
-        <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
-        <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
-      </header.row>
-    </table.header>
+<Rose::Layout::Page as |page|>
 
-    <table.body as |body|>
-      {{#each @model as |managed-group|}}
-        <body.row as |row|>
-          <row.headerCell>
-            {{#if (can 'read model' managed-group)}}
-              <LinkTo
-                @route='scopes.scope.auth-methods.auth-method.managed-groups.managed-group'
-                @model={{managed-group.id}}
-              >
-                {{managed-group.displayName}}
-              </LinkTo>
-            {{else}}
-              {{managed-group.displayName}}
-            {{/if}}
-          </row.headerCell>
-          <row.cell>{{managed-group.description}}</row.cell>
-          <row.cell>
-            <Rose::Badge>{{managed-group.type}}</Rose::Badge>
-          </row.cell>
-          <row.cell>
-            <Copyable
-              @text={{managed-group.id}}
-              @buttonText={{t 'actions.copy-to-clipboard'}}
-              @acknowledgeText={{t 'states.copied'}}
-            >
-              <code>{{managed-group.id}}</code>
-            </Copyable>
-          </row.cell>
-        </body.row>
-      {{/each}}
-    </table.body>
-  </Rose::Table>
-{{else}}
-  <Rose::Layout::Centered>
-    <Rose::Message
-      @title={{t 'resources.managed-group.messages.welcome.title'}}
-      as |message|
-    >
-      <message.description>
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
 
-        {{#if
-          (can 'list collection' this.authMethod collection='managed-groups')
-        }}
-          {{! Can list (at least): show default welcome message }}
-          {{t 'resources.managed-group.description'}}
-        {{else if (can
-          'create collection' this.authMethod collection='managed-groups'
-        )}}
-          {{! Can create only: show create but not list welcome message }}
-          {{t
-            'descriptions.create-but-not-list'
-            resource=(t 'resources.managed-group.title_plural')
-          }}
-        {{else}}
-          {{! Can neither list nor create }}
-          {{t
-            'descriptions.neither-list-nor-create'
-            resource=(t 'resources.managed-group.title_plural')
-          }}
-        {{/if}}
-      </message.description>
+  <page.header>
+    <AuthMethods::AuthMethod::Header @model={{@model.authMethod}} />
+  </page.header>
 
-      {{#if
-        (can 'create collection' this.authMethod collection='managed-groups')
-      }}
-        <message.link
-          @route='scopes.scope.auth-methods.auth-method.managed-groups.new'
+  <page.navigation>
+    <AuthMethods::AuthMethod::Nav @model={{@model.authMethod}} />
+  </page.navigation>
+
+  <page.actions>
+    <AuthMethods::AuthMethod::Actions @model={{@model.authMethod}} />
+  </page.actions>
+
+  <page.body>
+    {{#if @model.managedGroups}}
+      <Rose::Table as |table|>
+        <table.header as |header|>
+          <header.row as |row|>
+            <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
+            <row.headerCell>{{t 'form.description.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.managedGroups as |managed-group|}}
+            <body.row as |row|>
+              <row.headerCell>
+                {{#if (can 'read model' managed-group)}}
+                  <LinkTo
+                    @route='scopes.scope.auth-methods.auth-method.managed-groups.managed-group'
+                    @model={{managed-group.id}}
+                  >
+                    {{managed-group.displayName}}
+                  </LinkTo>
+                {{else}}
+                  {{managed-group.displayName}}
+                {{/if}}
+              </row.headerCell>
+              <row.cell>{{managed-group.description}}</row.cell>
+              <row.cell>
+                <Rose::Badge>{{managed-group.type}}</Rose::Badge>
+              </row.cell>
+              <row.cell>
+                <Copyable
+                  @text={{managed-group.id}}
+                  @buttonText={{t 'actions.copy-to-clipboard'}}
+                  @acknowledgeText={{t 'states.copied'}}
+                >
+                  <code>{{managed-group.id}}</code>
+                </Copyable>
+              </row.cell>
+            </body.row>
+          {{/each}}
+        </table.body>
+      </Rose::Table>
+    {{else}}
+      <Rose::Layout::Centered>
+        <Rose::Message
+          @title={{t 'resources.managed-group.messages.welcome.title'}}
+          as |message|
         >
-          <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
-          {{t 'resources.managed-group.actions.create'}}
-        </message.link>
-      {{/if}}
-    </Rose::Message>
-  </Rose::Layout::Centered>
-{{/if}}
\ No newline at end of file
+          <message.description>
+
+            {{#if
+              (can
+                'list collection' this.authMethod collection='managed-groups'
+              )
+            }}
+              {{! Can list (at least): show default welcome message }}
+              {{t 'resources.managed-group.description'}}
+            {{else if (can
+              'create collection' this.authMethod collection='managed-groups'
+            )}}
+              {{! Can create only: show create but not list welcome message }}
+              {{t
+                'descriptions.create-but-not-list'
+                resource=(t 'resources.managed-group.title_plural')
+              }}
+            {{else}}
+              {{! Can neither list nor create }}
+              {{t
+                'descriptions.neither-list-nor-create'
+                resource=(t 'resources.managed-group.title_plural')
+              }}
+            {{/if}}
+          </message.description>
+
+          {{#if
+            (can
+              'create collection' this.authMethod collection='managed-groups'
+            )
+          }}
+            <message.link
+              @route='scopes.scope.auth-methods.auth-method.managed-groups.new'
+            >
+              <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
+              {{t 'resources.managed-group.actions.create'}}
+            </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/auth-methods/auth-method/managed-groups/managed-group/index.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/index.hbs
index bcaa893ac..8abc571c3 100644
--- a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/index.hbs
@@ -1,5 +1,33 @@
-<Form::ManagedGroup
-  @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>
+    <AuthMethods::AuthMethod::ManagedGroups::ManagedGroup::Header
+      @model={{@model}}
+    />
+  </page.header>
+
+  <page.navigation>
+    <AuthMethods::AuthMethod::ManagedGroups::ManagedGroup::Nav
+      @model={{@model}}
+    />
+  </page.navigation>
+
+  <page.actions>
+    <AuthMethods::AuthMethod::ManagedGroups::ManagedGroup::Actions
+      @model={{@model}}
+    />
+  </page.actions>
+
+  <page.body>
+    <Form::ManagedGroup
+      @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/auth-methods/auth-method/managed-groups/managed-group/members.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/members.hbs
index 8f942d312..5111f1838 100644
--- a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/members.hbs
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/members.hbs
@@ -1,62 +1,90 @@
 {{page-title (t 'resources.managed-group.member.title_plural')}}
 
-{{#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.issuer.label'}}</row.headerCell>
-        <row.headerCell>{{t 'form.subject.label'}}</row.headerCell>
-        <row.headerCell>{{t 'form.email.label'}}</row.headerCell>
-        <row.headerCell>{{t 'form.full_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 |member|}}
-        <body.row as |row|>
-          <row.headerCell scope='row'>
-            {{member.accountName}}
-            <p>{{member.description}}</p>
-          </row.headerCell>
-          <row.cell>
-            <code>{{member.attributes.issuer}}</code>
-          </row.cell>
-          <row.cell>
-            <code>{{member.attributes.subject}}</code>
-          </row.cell>
-          <row.cell>
-            <code>{{member.attributes.email}}</code>
-          </row.cell>
-          <row.cell>
-            {{member.attributes.full_name}}
-          </row.cell>
-          <row.cell>
-            <Rose::Badge>{{member.type}}</Rose::Badge>
-          </row.cell>
-          <row.cell>
-            <Copyable
-              @text={{member.id}}
-              @buttonText={{t 'actions.copy-to-clipboard'}}
-              @acknowledgeText={{t 'states.copied'}}
-            >
-              <code>{{member.id}}</code>
-            </Copyable>
-          </row.cell>
-        </body.row>
-      {{/each}}
-    </table.body>
-  </Rose::Table>
-{{else}}
-  <Rose::Layout::Centered>
-    <Rose::Message
-      @title={{t 'resources.managed-group.member.messages.title'}}
-      as |message|
-    >
-      <message.description>
-        {{t 'resources.managed-group.member.messages.description'}}
-      </message.description>
-    </Rose::Message>
-  </Rose::Layout::Centered>
-{{/if}}
\ No newline at end of file
+<Rose::Layout::Page as |page|>
+
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <AuthMethods::AuthMethod::ManagedGroups::ManagedGroup::Header
+      @model={{@model.managedGroup}}
+    />
+  </page.header>
+
+  <page.navigation>
+    <AuthMethods::AuthMethod::ManagedGroups::ManagedGroup::Nav
+      @model={{@model.managedGroup}}
+    />
+  </page.navigation>
+
+  <page.actions>
+    <AuthMethods::AuthMethod::ManagedGroups::ManagedGroup::Actions
+      @model={{@model.managedGroup}}
+    />
+  </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.issuer.label'}}</row.headerCell>
+            <row.headerCell>{{t 'form.subject.label'}}</row.headerCell>
+            <row.headerCell>{{t 'form.email.label'}}</row.headerCell>
+            <row.headerCell>{{t 'form.full_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.members as |member|}}
+            <body.row as |row|>
+              <row.headerCell scope='row'>
+                {{member.accountName}}
+                <p>{{member.description}}</p>
+              </row.headerCell>
+              <row.cell>
+                <code>{{member.attributes.issuer}}</code>
+              </row.cell>
+              <row.cell>
+                <code>{{member.attributes.subject}}</code>
+              </row.cell>
+              <row.cell>
+                <code>{{member.attributes.email}}</code>
+              </row.cell>
+              <row.cell>
+                {{member.attributes.full_name}}
+              </row.cell>
+              <row.cell>
+                <Rose::Badge>{{member.type}}</Rose::Badge>
+              </row.cell>
+              <row.cell>
+                <Copyable
+                  @text={{member.id}}
+                  @buttonText={{t 'actions.copy-to-clipboard'}}
+                  @acknowledgeText={{t 'states.copied'}}
+                >
+                  <code>{{member.id}}</code>
+                </Copyable>
+              </row.cell>
+            </body.row>
+          {{/each}}
+        </table.body>
+      </Rose::Table>
+    {{else}}
+      <Rose::Layout::Centered>
+        <Rose::Message
+          @title={{t 'resources.managed-group.member.messages.title'}}
+          as |message|
+        >
+          <message.description>
+            {{t 'resources.managed-group.member.messages.description'}}
+          </message.description>
+        </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/auth-methods/auth-method/managed-groups/new.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/new.hbs
index bcaa893ac..24a69bfbb 100644
--- a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/new.hbs
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/new.hbs
@@ -1,5 +1,23 @@
-<Form::ManagedGroup
-  @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'}}
+      {{! TODO: change the icon link }}
+      <DocLink @doc='account.new' @iconSize='large' />
+    </h2>
+  </page.header>
+
+  <page.body>
+    <Form::ManagedGroup
+      @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/auth-methods/auth-method/managed-groups/new/-header.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/new/-header.hbs
deleted file mode 100644
index b6e89205e..000000000
--- a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/new/-header.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-<h2>
-  {{t 'titles.new'}}
-  {{! TODO: change the icon link }}
-  <DocLink @doc='account.new' @iconSize='large' />
-</h2>
\ No newline at end of file

From c571dc23e001f1ff468c4c48db44ba54279b6f68 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Sun, 16 Jan 2022 18:06:43 -0800
Subject: [PATCH 09/11] =?UTF-8?q?fix:=20=F0=9F=90=9B=20remove=20classname?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/rose/addon/components/rose/form/radio/radio/index.hbs | 2 +-
 addons/rose/addon/styles/rose/components/form/_radio.scss    | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/addons/rose/addon/components/rose/form/radio/radio/index.hbs b/addons/rose/addon/components/rose/form/radio/radio/index.hbs
index bfeb74d62..64eef193c 100644
--- a/addons/rose/addon/components/rose/form/radio/radio/index.hbs
+++ b/addons/rose/addon/components/rose/form/radio/radio/index.hbs
@@ -12,7 +12,7 @@
     @disabled={{@disabled}}
     @changed={{@changed}} />
 
-  <label class="rose-form-radio-label{{if @helperText " helper-text"}}" for={{this.id}}>
+  <label class="rose-form-radio-label" for={{this.id}}>
 
     {{#if @icon}}
       <Rose::Icon
diff --git a/addons/rose/addon/styles/rose/components/form/_radio.scss b/addons/rose/addon/styles/rose/components/form/_radio.scss
index 50f8b2974..ff280f842 100644
--- a/addons/rose/addon/styles/rose/components/form/_radio.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radio.scss
@@ -34,7 +34,7 @@ $data-svg-prefix: 'data:image/svg+xml;utf-8,';
   margin-bottom: sizing.rems(xs);
   color: var(--ui-gray);
 
-  .helper-text {
+  .rose-form-radio-label {
     display: flex;
     align-items: center;
 
@@ -44,8 +44,7 @@ $data-svg-prefix: 'data:image/svg+xml;utf-8,';
       line-height: typography.line-height(xl);
       margin-bottom: 0;
     }
-  }
-  .rose-form-radio-label {
+
     @include type.type(s, semibold);
     color: currentColor;
     padding-left: sizing.rems(l);

From a3fd2ff03cd13f1d7c30f3200947250d5a27c389 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Sun, 16 Jan 2022 18:50:43 -0800
Subject: [PATCH 10/11] =?UTF-8?q?fix:=20=F0=9F=90=9B=20use=20button=20line?=
 =?UTF-8?q?height?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/rose/addon/styles/rose/components/form/_radio.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/rose/addon/styles/rose/components/form/_radio.scss b/addons/rose/addon/styles/rose/components/form/_radio.scss
index ff280f842..dae1671d2 100644
--- a/addons/rose/addon/styles/rose/components/form/_radio.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radio.scss
@@ -41,7 +41,7 @@ $data-svg-prefix: 'data:image/svg+xml;utf-8,';
     .rose-form-helper-text {
       font-weight: normal;
       margin-left: sizing.rems(xxs);
-      line-height: typography.line-height(xl);
+      line-height: typography.line-height(button);
       margin-bottom: 0;
     }
 

From 537d8f107f9e748e1d90bcc1312631b244732dc8 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Wed, 19 Jan 2022 11:08:50 -0800
Subject: [PATCH 11/11] =?UTF-8?q?fix:=20=F0=9F=90=9B=20vertical=20layout?=
 =?UTF-8?q?=20shift?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/rose/addon/styles/rose/components/form/_radio.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/form/_radio.scss b/addons/rose/addon/styles/rose/components/form/_radio.scss
index dae1671d2..32be9a8c5 100644
--- a/addons/rose/addon/styles/rose/components/form/_radio.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radio.scss
@@ -37,17 +37,16 @@ $data-svg-prefix: 'data:image/svg+xml;utf-8,';
   .rose-form-radio-label {
     display: flex;
     align-items: center;
-
     .rose-form-helper-text {
       font-weight: normal;
       margin-left: sizing.rems(xxs);
-      line-height: typography.line-height(button);
       margin-bottom: 0;
     }
 
     @include type.type(s, semibold);
     color: currentColor;
     padding-left: sizing.rems(l);
+    padding-top: sizing.rems(xxxs);
 
     .rose-icon {
       margin-right: sizing.rems(xxs);