diff --git a/addons/rose/app/styles/rose/components/toolbar/_toolbar.scss b/addons/rose/app/styles/rose/components/toolbar/_toolbar.scss
index f2b445f59..64a59ec78 100644
--- a/addons/rose/app/styles/rose/components/toolbar/_toolbar.scss
+++ b/addons/rose/app/styles/rose/components/toolbar/_toolbar.scss
@@ -31,16 +31,4 @@ $xxxxs: sizing.rems(xxxxs); // 1
     display: flex;
     width: auto;
   }
-
-  .rose-button-inline-link-action {
-    @include type.type(button, semibold);
-
-    color: var(--stark);
-    display: inline-block;
-    vertical-align: middle;
-
-    $y-padding: sizing.rems(xxs) + sizing.rems(xxxs);
-
-    padding: $y-padding sizing.rems(m);
-  }
 }
diff --git a/ui/admin/app/components/form/field/json-secret/index.hbs b/ui/admin/app/components/form/field/json-secret/index.hbs
index caaa26fa6..dc194d1ae 100644
--- a/ui/admin/app/components/form/field/json-secret/index.hbs
+++ b/ui/admin/app/components/form/field/json-secret/index.hbs
@@ -11,13 +11,13 @@
     </Form::Field::JsonSecret::Skeleton>
   {{else if this.isActionable}}
     <Form::Field::JsonSecret::Skeleton>
-      <Rose::Button
-        @iconLeft='flight-icons/svg/pencil-tool-16'
-        @style='secret-editor-skeleton-button'
+      <Hds::Button
+        class='secret-editor-skeleton-button'
+        @icon='pencil-tool'
+        @color='secondary'
+        @text={{t 'form.secret-editor.edit'}}
         {{on 'click' this.enableEditing}}
-      >
-        {{t 'form.secret-editor.edit'}}
-      </Rose::Button>
+      />
     </Form::Field::JsonSecret::Skeleton>
   {{else}}
     <Rose::CodeEditor as |c|>
diff --git a/ui/admin/app/components/form/role/grants/index.hbs b/ui/admin/app/components/form/role/grants/index.hbs
index 02ae90e66..370ce7f5f 100644
--- a/ui/admin/app/components/form/role/grants/index.hbs
+++ b/ui/admin/app/components/form/role/grants/index.hbs
@@ -29,14 +29,12 @@
             <input.field title={{t 'form.grant.help'}} />
           </item.cell>
           <item.cell>
-            <Rose::Button
-              @onSubmit={{true}}
-              @disabled={{this.cannotSave}}
-              @style='secondary'
-              title={{t 'actions.add'}}
-            >
-              {{t 'actions.add'}}
-            </Rose::Button>
+            <Hds::Button
+              type='submit'
+              disabled={{this.cannotSave}}
+              @color='secondary'
+              @text={{t 'actions.add'}}
+            />
           </item.cell>
         </form.input>
       </list.item>
@@ -82,14 +80,14 @@
         </form.input>
         <item.cell>
           {{#if (can 'setGrants role' @model)}}
-            <Rose::Button
-              @style='secondary'
-              @iconOnly='flight-icons/svg/trash-16'
-              title={{t 'actions.remove'}}
+            <Hds::Button
+              @color='secondary'
+              @icon='trash'
+              @isIconOnly={{true}}
+              @text={{t 'actions.remove'}}
+              type='button'
               {{on 'click' (fn @removeGrant grant.value)}}
-            >
-              {{t 'actions.remove'}}
-            </Rose::Button>
+            />
           {{/if}}
         </item.cell>
       </list.item>
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index 3ffe9dc07..4f23c64cb 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -430,19 +430,21 @@
     z-index: 1;
   }
 
-  .rose-button-secret-editor-skeleton-button {
-    background: var(--secret-editor-body);
-    border: sizing.rems(xxxxs) solid var(--ui-gray);
-    border-radius: sizing.rems(xxxs);
-    box-shadow: 0 sizing.rems(xxs) sizing.rems(xxs) var(--button-shadow);
-
-    // using ui-gray directly so it does not change when
-    // user is in dark mode since the secret editor
-    // does not change theme colors between light and dark
-    color: #{color(ui-gray, 050)};
-    font-size: sizing.rems(s) + sizing.rems(xxxs); // 14
-    height: sizing.rems(xl);
-    padding: 0 sizing.rems(l);
+  .secret-editor-skeleton-button {
+    
+    @media (prefers-color-scheme: light) {
+      .ember-application:not(.rose-theme-dark) & {
+        background: var(--token-color-palette-neutral-600);
+        color: var(--token-color-palette-neutral-50);
+        border-color: var(--token-color-palette-neutral-50);
+      }
+    }
+    
+    .ember-application.rose-theme-light & {
+      background: var(--token-color-palette-neutral-600);
+      color: var(--token-color-palette-neutral-50);
+      border-color: var(--token-color-palette-neutral-50);
+    }
   }
 }
 
@@ -1095,4 +1097,4 @@
   li.indentation {
     margin-left: 1.5rem;
   }
-}
+}
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/groups/group/add-members.hbs b/ui/admin/app/templates/scopes/scope/groups/group/add-members.hbs
index 0a144cb8c..a2e01c441 100644
--- a/ui/admin/app/templates/scopes/scope/groups/group/add-members.hbs
+++ b/ui/admin/app/templates/scopes/scope/groups/group/add-members.hbs
@@ -74,12 +74,12 @@
                 'scopes.scope.groups.group.add-members' 'scope'
               )
             }}
-              <Rose::Button
-                @style='inline-link-action'
-                @iconLeft='flight-icons/svg/x-16'
+              <Hds::Button
+                @size='small'
+                @icon='x'
+                @text={{t 'actions.clear-all-filters'}}
                 {{on 'click' this.callClearAllFilters}}
-              >{{t 'actions.clear-all-filters'}}
-              </Rose::Button>
+              />
             {{/if}}
           </Rose::Form>
         </toolbar.primary>
diff --git a/ui/admin/app/templates/scopes/scope/roles/role/add-principals.hbs b/ui/admin/app/templates/scopes/scope/roles/role/add-principals.hbs
index 79d92cf59..35035421d 100644
--- a/ui/admin/app/templates/scopes/scope/roles/role/add-principals.hbs
+++ b/ui/admin/app/templates/scopes/scope/roles/role/add-principals.hbs
@@ -74,12 +74,12 @@
                 'scopes.scope.roles.role.add-principals' 'scope'
               )
             }}
-              <Rose::Button
-                @style='inline-link-action'
-                @iconLeft='flight-icons/svg/x-16'
+              <Hds::Button
+                @size='small'
+                @icon='x'
+                @text={{t 'actions.clear-all-filters'}}
                 {{on 'click' this.callClearAllFilters}}
-              >{{t 'actions.clear-all-filters'}}
-              </Rose::Button>
+              />
             {{/if}}
           </Rose::Form>
         </toolbar.primary>
diff --git a/ui/admin/app/templates/scopes/scope/workers/index.hbs b/ui/admin/app/templates/scopes/scope/workers/index.hbs
index 6df489758..54d93db97 100644
--- a/ui/admin/app/templates/scopes/scope/workers/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/workers/index.hbs
@@ -80,12 +80,12 @@
                 'scopes.scope.workers.index' 'tags'
               )
             }}
-              <Rose::Button
-                @style='inline-link-action'
-                @iconLeft='flight-icons/svg/x-16'
+              <Hds::Button
+                @size='small'
+                @icon='x'
+                @text={{t 'actions.clear-all-filters'}}
                 {{on 'click' this.callClearAllFilters}}
-              >{{t 'actions.clear-all-filters'}}
-              </Rose::Button>
+              />
             {{/if}}
           </Rose::Form>
         </toolbar.primary>
diff --git a/ui/admin/tests/acceptance/roles/selectors.js b/ui/admin/tests/acceptance/roles/selectors.js
index 769a8aba7..428b12e44 100644
--- a/ui/admin/tests/acceptance/roles/selectors.js
+++ b/ui/admin/tests/acceptance/roles/selectors.js
@@ -50,7 +50,7 @@ export const FIELD_NEW_GRANT_ADD_BTN = 'form:nth-child(1) [type="submit"]';
 export const FIELD_GRANT = 'form:nth-child(2) [name="grant"]';
 export const FIELD_GRANT_VALUE = 'ids=123,action=delete';
 export const FIELD_GRANT_REMOVE_BTN =
-  'form:nth-child(2) button[title="Remove"]';
+  'form:nth-child(2) button[type="button"]';
 export const GRANTS_FORM = 'form:nth-child(2)';
 // We need to use a different selector for the grants form because the
 // grants form has multiple submit buttons
diff --git a/ui/admin/tests/integration/components/form/field/json-secret-skeleton-test.js b/ui/admin/tests/integration/components/form/field/json-secret-skeleton-test.js
index 3cf8412c8..a7a42a15f 100644
--- a/ui/admin/tests/integration/components/form/field/json-secret-skeleton-test.js
+++ b/ui/admin/tests/integration/components/form/field/json-secret-skeleton-test.js
@@ -21,7 +21,6 @@ module(
         {{this.value}}
       </Form::Field::JsonSecret::Skeleton>
     `);
-
       assert.dom('.secret-editor-skeleton-wrapper').isVisible();
       assert.dom('.secret-editor-skeleton-message').hasText('Skeleton Message');
     });
diff --git a/ui/desktop/app/templates/error.hbs b/ui/desktop/app/templates/error.hbs
index d3bbc7c8d..d5f5393b6 100644
--- a/ui/desktop/app/templates/error.hbs
+++ b/ui/desktop/app/templates/error.hbs
@@ -12,9 +12,11 @@
   </Rose::Layout::Centered>
 
   <Rose::Layout::Centered>
-    <Rose::Button @style='primary' {{on 'click' this.appUtilities.disconnect}}>
-      {{t 'actions.disconnect'}}
-    </Rose::Button>
+    <Hds::Button
+      @color='primary'
+      @text={{t 'actions.disconnect'}}
+      {{on 'click' this.appUtilities.disconnect}}
+    />
   </Rose::Layout::Centered>
 
 </main>
\ No newline at end of file
diff --git a/ui/desktop/app/templates/scopes/scope/projects/error.hbs b/ui/desktop/app/templates/scopes/scope/projects/error.hbs
index 623b4f201..ef88fb1c0 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/error.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/error.hbs
@@ -24,8 +24,10 @@
   </Rose::Layout::Centered>
 
   <Rose::Layout::Centered>
-    <Rose::Button @style='primary' {{on 'click' this.appUtilities.disconnect}}>
-      {{t 'actions.disconnect'}}
-    </Rose::Button>
+    <Hds::Button
+      @color='primary'
+      @text={{t 'actions.disconnect'}}
+      {{on 'click' this.appUtilities.disconnect}}
+    />
   </Rose::Layout::Centered>
 {{/unless}}
\ No newline at end of file