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 dcd450a8b..eb45384c6 100644
--- a/addons/rose/addon/components/rose/form/radio/radio/index.hbs
+++ b/addons/rose/addon/components/rose/form/radio/radio/index.hbs
@@ -22,7 +22,7 @@
     {{/if}}
 
     {{@label}}
-    
+
   </label>
 
   {{yield}}
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_item.scss b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
index 8b3059188..8994f0e37 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_item.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
@@ -1,21 +1,17 @@
 @use '../../variables/sizing';
 @use '../../utilities/type';
 
+$checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563ff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'></path></svg>");
+
 .rose-dropdown-item {
   @include type.type(s);
-  display: block;
-  box-sizing: border-box;
-  width: 100%;
-  min-width: (sizing.rems(m)) * 20;
-  border: 0;
-  padding: 0 sizing.rems(s);
-  text-decoration: none;
-  text-align: left;
+  min-width: (sizing.rems(m)) * 16;
   $line-height: 36 / 14;
   line-height: $line-height;
 
-  --background-color: transparent;
   --color: var(--stark);
+  --background-color: transparent;
+
   color: var(--color);
   background-color: var(--background-color);
 
@@ -31,12 +27,33 @@
       display: block;
       padding-top: sizing.rems(xs) + sizing.rems(xxxxs);
       padding-bottom: sizing.rems(xs) + sizing.rems(xxxxs);
+      padding-left: sizing.rems(s);
+      padding-right: sizing.rems(xl);
       font-weight: normal;
 
-      // Now that the target height is 36, the radio image needs to be
-      // repositioned
+      &::before,
       &::after {
-        top: calc(50% - #{sizing.rems(s)});
+        display: none;
+      }
+    }
+
+    .rose-form-radio-field {
+      &:checked {
+        ~ .rose-form-radio-label {
+          color: var(--action);
+          background-color: var(--action-subtler-1h);
+
+          background-image: #{$checkmark};
+          background-repeat: no-repeat;
+          background-position: right sizing.rems(m) center;
+          background-size: sizing.rems(m);
+        }
+      }
+
+      &:disabled {
+        ~ .rose-form-radio-label {
+          opacity: 0.5;
+        }
       }
     }
   }
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 75c304532..a3e605a30 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -36,7 +36,7 @@
   <dropdown.button>Button menu item</dropdown.button>
   <dropdown.button @style="danger">Button - danger</dropdown.button>
   <dropdown.separator />
-  
+
   <dropdown.section @title="Dropdown Section Title">
     <dropdown.link @route="index">Menu item</dropdown.link>
   </dropdown.section>
@@ -48,26 +48,34 @@
 </Rose::Dropdown>
 
 <Rose::Form as |form|>
-  <form.radioGroup @name="color" @selectedValue="red" as |radioGroup|>
+  <form.radioGroup tagName="ul" @name="color" @selectedValue="red" as |radioGroup|>
     <Rose::Dropdown @text="Color" as |dropdown|>
-      <dropdown.item>
-        <radioGroup.radio
-          @label="Red"
-          @value="red"
-        />
-      </dropdown.item>
-      <dropdown.item>
-        <radioGroup.radio
-          @label="Green"
-          @value="green"
-        />
-      </dropdown.item>
-      <dropdown.item>
-        <radioGroup.radio
-          @label="Blue"
-          @value="blue"
-        />
-      </dropdown.item>
+      <ul>
+        <li>
+          <dropdown.item>
+            <radioGroup.radio
+              @label="Red"
+              @value="red"
+              @icon="user-organization" />
+          </dropdown.item>
+        </li>
+        <li>
+          <dropdown.item>
+            <radioGroup.radio
+              @label="Green"
+              @value="green"
+            />
+          </dropdown.item>
+        </li>
+        <li>
+          <dropdown.item>
+            <radioGroup.radio
+              @label="Blue"
+              @value="blue"
+            />
+          </dropdown.item>
+        </li>
+      </ul>
     </Rose::Dropdown>
   </form.radioGroup>
 </Rose::Form>
diff --git a/ui/core/app/components/form/role/index.hbs b/ui/core/app/components/form/role/index.hbs
index eaf8bdce2..1019cef12 100644
--- a/ui/core/app/components/form/role/index.hbs
+++ b/ui/core/app/components/form/role/index.hbs
@@ -57,32 +57,44 @@
         @text={{this.selectedGrantScope.displayName}}
         @icon={{if this.selectedGrantScope.isProject "app-icons/project" "app-icons/org"}}
       as |dropdown|>
-        {{#each @grantScopes as |grantScope|}}
-          <dropdown.item>
-            <radioGroup.radio
-              @label={{grantScope.model.displayName}}
-              @value={{grantScope.model.id}}
-              @icon={{unless grantScope.model.isProject "app-icons/org"}}
-            />
-          </dropdown.item>
-          {{#each grantScope.subScopes as |subScope|}}
-            <dropdown.item class="indent-1">
-              <radioGroup.radio
-                @label={{subScope.model.displayName}}
-                @value={{subScope.model.id}}
-                @icon={{unless subScope.model.isProject "app-icons/org"}}
-              />
-            </dropdown.item>
-            {{#each subScope.subScopes as |subSubScope|}}
-              <dropdown.item class="indent-2">
+        <ul>
+          {{#each @grantScopes as |grantScope|}}
+            <li>
+              <dropdown.item>
                 <radioGroup.radio
-                  @label={{subSubScope.displayName}}
-                  @value={{subSubScope.id}}
+                  @label={{grantScope.model.displayName}}
+                  @value={{grantScope.model.id}}
+                  @icon={{unless grantScope.model.isProject "app-icons/org"}}
                 />
               </dropdown.item>
-            {{/each}}
+              <ul class="indent-label-1">
+                {{#each grantScope.subScopes as |subScope|}}
+                  <li>
+                    <dropdown.item>
+                      <radioGroup.radio
+                        @label={{subScope.model.displayName}}
+                        @value={{subScope.model.id}}
+                        @icon={{unless subScope.model.isProject "app-icons/org"}}
+                      />
+                    </dropdown.item>
+                    <ul class="indent-label-2">
+                      {{#each subScope.subScopes as |subSubScope|}}
+                        <li>
+                          <dropdown.item>
+                            <radioGroup.radio
+                              @label={{subSubScope.displayName}}
+                              @value={{subSubScope.id}}
+                            />
+                          </dropdown.item>
+                        </li>
+                      {{/each}}
+                    </ul>
+                  </li>
+                {{/each}}
+              </ul>
+            </li>
           {{/each}}
-        {{/each}}
+        </ul>
       </Rose::Dropdown>
     </form.radioGroup>
   </fieldset>
diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index ec5800859..7f85fddc0 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -44,13 +44,15 @@
   }
 
   .rose-dropdown {
-    .rose-dropdown-item {
-      &.indent-1 {
-        padding-left: sizing.rems(s) * 2;
+    .indent-label-1 {
+      .rose-form-radio-label {
+        padding-left: sizing.rems(l) * 1.5;
       }
+    }
 
-      &.indent-2 {
-        padding-left: sizing.rems(l) + sizing.rems(m);
+    .indent-label-2 {
+      .rose-form-radio-label {
+        padding-left: sizing.rems(l) * 3;
       }
     }
   }