diff --git a/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs b/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs
index b17232c46..cb4d10adb 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs
@@ -169,7 +169,7 @@
                 </time>
               </row.cell>
               <row.cell>
-                <Rose::Badge>{{model.status}}</Rose::Badge>
+                <SessionStatus @model={{model}} />
               </row.cell>
               <row.cell>
                 {{#if model.isCancelable}}
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs
index ec6f0b4a9..226f56998 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs
@@ -120,9 +120,11 @@
                   <p>{{model.target.description}}</p>
                 {{/if}}
                 {{#if model.target.isActive}}
-                  <Rose::Badge @style='success'>
-                    {{t 'states.active'}}
-                  </Rose::Badge>
+                  <Hds::Badge
+                    @text={{t 'states.active'}}
+                    @color='success'
+                    @icon='check'
+                  />
                 {{/if}}
               </row.headerCell>
               <row.cell>
@@ -136,9 +138,9 @@
               </row.cell>
               <row.cell>
                 {{#if model.type}}
-                  <Rose::Badge>
-                    {{t (concat 'resources.target.types.' model.type)}}
-                  </Rose::Badge>
+                  <Hds::Badge
+                    @text={{t (concat 'resources.target.types.' model.type)}}
+                  />
                 {{/if}}
               </row.cell>
               <row.cell>
@@ -151,9 +153,7 @@
                     <code>{{model.project.id}}</code>
                   </Copyable>
                 </div>
-                <Rose::Badge @style='informational'>
-                  {{model.project.name}}
-                </Rose::Badge>
+                <Hds::Badge @color='neutral' @text={{model.project.name}} />
               </row.cell>
               <row.cell>
                 {{#if (can 'connect target' model)}}
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets/target.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets/target.hbs
index a376afe0c..468d26ab7 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets/target.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets/target.hbs
@@ -7,9 +7,7 @@
       {{@model.displayName}}
       {{#if @model.isActive}}
         &nbsp;
-        <Rose::Badge @style='success'>
-          {{t 'states.active'}}
-        </Rose::Badge>
+        <Hds::Badge @color='success' @text={{t 'states.active'}} />
       {{/if}}
     </h2>
     <p>{{@model.description}}</p>
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets/target/-header.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets/target/-header.hbs
index a2a93c449..8563d9b75 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets/target/-header.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets/target/-header.hbs
@@ -2,9 +2,7 @@
   {{@model.displayName}}
   {{#if @model.isActive}}
     &nbsp;
-    <Rose::Badge @style='success'>
-      {{t 'states.active'}}
-    </Rose::Badge>
+    <Hds::Badge @color='success' @text={{t 'states.active'}} />
   {{/if}}
 </h2>
 <p>{{@model.description}}</p>
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets/target/hosts.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets/target/hosts.hbs
index 25a209b09..56ee4d216 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets/target/hosts.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets/target/hosts.hbs
@@ -30,9 +30,7 @@
             {{#if host.isStatic}}
               {{host.address}}
             {{else}}
-              <Rose::Badge>
-                {{t 'resources.host-catalog.types.dynamic'}}
-              </Rose::Badge>
+              <Hds::Badge @text={{t 'resources.host-catalog.types.dynamic'}} />
             {{/if}}
           </row.cell>
           <row.cell>
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs
index 7af008e16..1b1e44db7 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs
@@ -27,7 +27,7 @@
             >
               <code>{{session.id}}</code>
             </Copyable>
-            <Rose::Badge>{{session.status}}</Rose::Badge>
+            <SessionStatus @model={{session}} />
           </row.cell>
 
           <row.cell>
diff --git a/ui/desktop/tests/acceptance/projects/targets/sessions-test.js b/ui/desktop/tests/acceptance/projects/targets/sessions-test.js
index 6848419a7..8eb5d65a9 100644
--- a/ui/desktop/tests/acceptance/projects/targets/sessions-test.js
+++ b/ui/desktop/tests/acceptance/projects/targets/sessions-test.js
@@ -211,7 +211,7 @@ module('Acceptance | projects | targets | sessions', function (hooks) {
     assert.expect(1);
     later(async () => {
       run.cancelTimers();
-      assert.ok(find('.rose-layout-page-header .rose-badge-success'));
+      assert.ok(find('.rose-layout-page-header .hds-badge--color-success'));
     }, 750);
     await visit(urls.sessions);
   });
@@ -221,7 +221,7 @@ module('Acceptance | projects | targets | sessions', function (hooks) {
     instances.session.update({ status: 'pending' });
     later(async () => {
       run.cancelTimers();
-      assert.ok(find('.rose-layout-page-header .rose-badge-success'));
+      assert.ok(find('.rose-layout-page-header .hds-badge--color-success'));
     }, 750);
     await visit(urls.sessions);
   });
@@ -231,7 +231,7 @@ module('Acceptance | projects | targets | sessions', function (hooks) {
     instances.session.update({ status: 'terminated' });
     later(async () => {
       run.cancelTimers();
-      assert.notOk(find('.rose-layout-page-header .rose-badge-success'));
+      assert.notOk(find('.rose-layout-page-header .hds-badge--color-success'));
     }, 750);
     await visit(urls.sessions);
   });