From bbbd1df9eaf42e8a8867108758e7e88ab5161bc7 Mon Sep 17 00:00:00 2001
From: Rishabh Gupta <rishabh.gupta@hashicorp.com>
Date: Tue, 26 May 2026 07:27:46 +0000
Subject: [PATCH] backport of commit 10a8dcbcb34d1e033e429c50b184f4a294690d2c

---
 ui/packages/consul-ui/.gitignore              |  6 +++
 .../consul/acl/ruleset-badge/index.hbs        | 23 ++++++++++
 .../consul/acl/ruleset-badge/index.js         | 46 +++++++++++++++++++
 .../consul/acl/ruleset-badge/index.scss       | 15 ++++++
 .../components/consul/auth-method/index.scss  |  5 ++
 .../consul/auth-method/type/index.hbs         |  9 +++-
 .../consul/discovery-chain/layout.scss        |  2 +
 .../discovery-chain/route-card/index.hbs      | 11 ++++-
 .../consul/discovery-chain/skin.scss          |  4 +-
 .../consul/external-source/index.hbs          | 24 ++++++----
 .../consul/external-source/index.scss         | 10 ++++
 .../consul/health-check/list/index.hbs        | 12 ++++-
 .../consul/health-check/list/skin.scss        |  7 +--
 .../consul/intention/action/index.hbs         | 14 ++++++
 .../consul/intention/action/index.js          | 38 +++++++++++++++
 .../consul/intention/list/components.scss     | 13 +-----
 .../consul/intention/list/table/index.hbs     |  2 +-
 .../intention/permission/list/index.hbs       |  2 +-
 .../intention/permission/list/index.scss      | 10 +---
 .../intention/permission/list/layout.scss     |  2 +-
 .../app/components/consul/kind/index.hbs      | 18 ++++++--
 .../app/components/consul/kind/index.scss     |  8 ++++
 .../app/components/consul/node/list/index.hbs | 10 +++-
 .../components/consul/node/list/index.scss    | 13 ++++++
 .../components/consul/role/list/pageobject.js |  8 +++-
 .../app/components/consul/source/index.hbs    |  9 +++-
 .../app/components/consul/source/index.scss   |  4 +-
 .../consul/token/list/pageobject.js           | 12 +++--
 .../consul/token/ruleset/list/index.hbs       | 18 ++++++--
 .../consul/token/ruleset/list/index.scss      | 10 ++++
 .../consul/transparent-proxy/index.hbs        |  9 ++--
 .../app/components/peerings/badge/index.js    |  2 +-
 .../consul-ui/app/components/pill/index.scss  | 13 ------
 .../consul-ui/app/styles/components.scss      |  3 ++
 .../routes/dc/overview/serverstatus.scss      | 17 ++++---
 .../app/templates/dc/show/serverstatus.hbs    | 28 +++++------
 36 files changed, 338 insertions(+), 99 deletions(-)
 create mode 100644 ui/packages/consul-ui/app/components/consul/acl/ruleset-badge/index.hbs
 create mode 100644 ui/packages/consul-ui/app/components/consul/acl/ruleset-badge/index.js
 create mode 100644 ui/packages/consul-ui/app/components/consul/acl/ruleset-badge/index.scss
 create mode 100644 ui/packages/consul-ui/app/components/consul/intention/action/index.hbs
 create mode 100644 ui/packages/consul-ui/app/components/consul/intention/action/index.js
 create mode 100644 ui/packages/consul-ui/app/components/consul/node/list/index.scss
 create mode 100644 ui/packages/consul-ui/app/components/consul/token/ruleset/list/index.scss

diff --git a/ui/packages/consul-ui/.gitignore b/ui/packages/consul-ui/.gitignore
index 88fc1de75df..f76b370e770 100644
--- a/ui/packages/consul-ui/.gitignore
+++ b/ui/packages/consul-ui/.gitignore
@@ -25,3 +25,9 @@
 /.node_modules.ember-try/
 /bower.json.ember-try
 /package.json.ember-try
+
+# Ignore e2e test reports
+e2e-tests/reports/
+
+# Ignore e2e test state files
+e2e-tests/auth-state.json
diff --git a/ui/packages/consul-ui/app/components/consul/acl/ruleset-badge/index.hbs b/ui/packages/consul-ui/app/components/consul/acl/ruleset-badge/index.hbs
new file mode 100644
index 00000000000..4f5f2fef94b
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/consul/acl/ruleset-badge/index.hbs
@@ -0,0 +1,23 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+}}
+
+<span class="consul-acl-ruleset-badge" data-type={{this.type}} aria-label={{this.ariaLabel}} ...attributes>
+  {{#if this.hasIcon}}
+    <Hds::Badge
+      @text={{this.label}}
+      @icon={{this.icon}}
+      @color="neutral"
+      @type="filled"
+      @size="small"
+    />
+  {{else}}
+    <Hds::Badge
+      @text={{this.label}}
+      @color="neutral"
+      @type="filled"
+      @size="small"
+    />
+  {{/if}}
+</span>
diff --git a/ui/packages/consul-ui/app/components/consul/acl/ruleset-badge/index.js b/ui/packages/consul-ui/app/components/consul/acl/ruleset-badge/index.js
new file mode 100644
index 00000000000..be6aded8876
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/consul/acl/ruleset-badge/index.js
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+
+export default class ConsulAclRulesetBadgeComponent extends Component {
+  get type() {
+    return this.args.type || '';
+  }
+
+  get label() {
+    return this.args.item?.Name || '';
+  }
+
+  get ariaLabel() {
+    switch (this.type) {
+      case 'policy-service-identity':
+        return `Service Identity: ${this.label}`;
+      case 'policy-node-identity':
+        return `Node Identity: ${this.label}`;
+      default:
+        return this.label;
+    }
+  }
+
+  get icon() {
+    switch (this.type) {
+      case 'policy-management':
+        return 'star-fill';
+      case 'read-only':
+        return 'lock';
+      case 'policy':
+        return 'file-text';
+      case 'role':
+        return 'user';
+      default:
+        return null;
+    }
+  }
+
+  get hasIcon() {
+    return Boolean(this.icon);
+  }
+}
diff --git a/ui/packages/consul-ui/app/components/consul/acl/ruleset-badge/index.scss b/ui/packages/consul-ui/app/components/consul/acl/ruleset-badge/index.scss
new file mode 100644
index 00000000000..ba1f48d278f
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/consul/acl/ruleset-badge/index.scss
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+.consul-acl-ruleset-badge {
+  // Override icon color for management policy to use Consul brand color
+  &[data-type="policy-management"] {
+    .hds-badge__icon {
+      color: var(--token-color-consul-brand) !important;
+    }
+  }
+}
+
+// Made with Bob
diff --git a/ui/packages/consul-ui/app/components/consul/auth-method/index.scss b/ui/packages/consul-ui/app/components/consul/auth-method/index.scss
index 499d10a85dd..a12620cad88 100644
--- a/ui/packages/consul-ui/app/components/consul/auth-method/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/auth-method/index.scss
@@ -11,6 +11,11 @@
   }
 }
 
+.consul-auth-method-type--hds {
+  display: inline-flex;
+  align-items: center;
+}
+
 // View
 .consul-auth-method-view {
   margin-bottom: 32px;
diff --git a/ui/packages/consul-ui/app/components/consul/auth-method/type/index.hbs b/ui/packages/consul-ui/app/components/consul/auth-method/type/index.hbs
index 20b518e974b..f407fa02ecb 100644
--- a/ui/packages/consul-ui/app/components/consul/auth-method/type/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/auth-method/type/index.hbs
@@ -4,10 +4,15 @@
 }}
 
 {{#let (icon-mapping @item.Type) as |flightIcon|}}
-  <span class="consul-auth-method-type {{unless flightIcon @item.Type}}" data-test-type={{@item.Type}}>
+  <span class="consul-auth-method-type--hds" data-test-type={{@item.Type}}>
     {{#if flightIcon}}
       <Hds::Icon @name={{flightIcon}} class="mr-1.5 w-4 h-4" />
     {{/if}}
-    {{t (concat "common.brand." @item.Type)}}
+    <Hds::Badge
+      @text={{t (concat "common.brand." @item.Type)}}
+      @color="neutral"
+      @type="filled"
+      @size="small"
+    />
   </span>
 {{/let}}
diff --git a/ui/packages/consul-ui/app/components/consul/discovery-chain/layout.scss b/ui/packages/consul-ui/app/components/consul/discovery-chain/layout.scss
index a60e1bd69e6..a52eb08abce 100644
--- a/ui/packages/consul-ui/app/components/consul/discovery-chain/layout.scss
+++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/layout.scss
@@ -89,6 +89,8 @@
 %route-card > header ul {
   float: right;
   margin-top: -2px;
+  display: flex;
+  flex-wrap: wrap;
 }
 %route-card > header ul li {
   margin-left: 5px;
diff --git a/ui/packages/consul-ui/app/components/consul/discovery-chain/route-card/index.hbs b/ui/packages/consul-ui/app/components/consul/discovery-chain/route-card/index.hbs
index 3f5ec60ce58..e1257186429 100644
--- a/ui/packages/consul-ui/app/components/consul/discovery-chain/route-card/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/route-card/index.hbs
@@ -13,7 +13,16 @@
 {{#if (gt @item.Definition.Match.HTTP.Methods.length 0) }}
     <ul class="match-methods">
       {{#each @item.Definition.Match.HTTP.Methods as |item|}}
-        <li>{{item}}</li>
+        <li>
+          <span class="route-card__method-badge">
+            <Hds::Badge
+              @text={{item}}
+              @color="neutral"
+              @type="filled"
+              @size="small"
+            />
+          </span>
+        </li>
       {{/each}}
     </ul>
 {{/if}}
diff --git a/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss b/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss
index dd85ba56ec7..3d9059040d3 100644
--- a/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss
+++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss
@@ -8,8 +8,8 @@
 /* the styling there almost 100% uses our CSS vars */
 /* defined in our CSS files, but be sure to */
 /* take a look in the discovery-chain.hbs */
-%route-card > header ul li {
-  @extend %pill-500, %frame-gray-900;
+%route-card > header ul li .route-card__method-badge {
+  display: inline-flex;
 }
 %discovery-chain-tween {
   transition-duration: 0.1s;
diff --git a/ui/packages/consul-ui/app/components/consul/external-source/index.hbs b/ui/packages/consul-ui/app/components/consul/external-source/index.hbs
index 434664a695d..98f0d8d75f6 100644
--- a/ui/packages/consul-ui/app/components/consul/external-source/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/external-source/index.hbs
@@ -10,11 +10,15 @@
           <dt>
             <span
               data-test-external-source={{externalSource}}
-              class="consul-external-source"
+              class="consul-external-source consul-external-source--hds"
               ...attributes
             >
-              <Hds::Icon @name={{icon-mapping externalSource}} class="mr-1.5 w-4 h-4"  />
-              Registered via {{t (concat "common.brand." externalSource)}}
+              <Hds::Badge
+                @text={{if @label @label (concat "Registered via " (t (concat "common.brand." externalSource)))}}
+                @icon={{icon-mapping externalSource}}
+                @color="neutral"
+                @size="small"
+              />
             </span>
           </dt>
           <dd>
@@ -38,15 +42,15 @@
   {{else if externalSource}}
     <span
       data-test-external-source={{externalSource}}
-      class="consul-external-source"
+      class="consul-external-source consul-external-source--hds"
       ...attributes
     >
-      <Hds::Icon @name={{icon-mapping externalSource}} @color="var(--token-color-hashicorp-brand)" class="mr-1.5 h-4 w-4" />
-      {{#if @label}}
-        {{@label}}
-      {{else}}
-        Registered via {{t (concat "common.brand." externalSource)}}
-      {{/if}}
+      <Hds::Badge
+        @text={{if @label @label (concat "Registered via " (t (concat "common.brand." externalSource)))}}
+        @icon={{icon-mapping externalSource}}
+        @color="neutral"
+        @size="small"
+      />
     </span>
   {{/if}}
   {{/let}}
diff --git a/ui/packages/consul-ui/app/components/consul/external-source/index.scss b/ui/packages/consul-ui/app/components/consul/external-source/index.scss
index 00255154b9a..5096027cbd1 100644
--- a/ui/packages/consul-ui/app/components/consul/external-source/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/external-source/index.scss
@@ -7,10 +7,20 @@
   @extend %pill-200, %frame-gray-600, %body-200-regular;
 }
 
+.consul-external-source--hds {
+  all: unset;
+  display: inline-flex;
+  border: none !important;
+}
+
 .consul-external-source::before {
   --icon-size: icon-300;
 }
 
+.consul-external-source--hds::before {
+  content: none;
+}
+
 .consul-external-source.jwt::before {
   @extend %with-logo-jwt-color-icon, %as-pseudo;
 }
diff --git a/ui/packages/consul-ui/app/components/consul/health-check/list/index.hbs b/ui/packages/consul-ui/app/components/consul/health-check/list/index.hbs
index a3fa6ee1698..68ed1e557f5 100644
--- a/ui/packages/consul-ui/app/components/consul/health-check/list/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/health-check/list/index.hbs
@@ -32,10 +32,18 @@
           <dd data-health-check-type>
             {{item.Type}}
   {{#if item.Exposed}}
-            <em
+            <span
+              class="consul-health-check-list__exposed-badge"
               data-test-exposed="true"
               {{hds-tooltip "Expose.checks is set to true, so all registered HTTP and gRPC check paths are exposed through Envoy for the Consul agent." options=(detached-tooltip-options)}}
-            >Exposed</em>
+            >
+              <Hds::Badge
+                @text="Exposed"
+                @color="neutral"
+                @type="filled"
+                @size="small"
+              />
+            </span>
   {{/if}}
           </dd>
         </dl>
diff --git a/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss b/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss
index 265a11f1627..a86da87d400 100644
--- a/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss
+++ b/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss
@@ -22,12 +22,9 @@
 %healthcheck-output header > * {
   @extend %display-300-semibold;
 }
-%healthcheck-output dd em {
-  @extend %pill;
-  background-color: var(--token-color-surface-strong);
-  /*TODO: Should this be merged into %pill? */
+%healthcheck-output .consul-health-check-list__exposed-badge {
+  display: inline-flex;
   cursor: default;
-  font-style: normal;
   margin-top: -2px;
   margin-left: 0.5em;
 }
diff --git a/ui/packages/consul-ui/app/components/consul/intention/action/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/action/index.hbs
new file mode 100644
index 00000000000..e9f9621267c
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/consul/intention/action/index.hbs
@@ -0,0 +1,14 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+}}
+
+<span class="consul-intention-action-badge" ...attributes>
+  <Hds::Badge
+    @text={{this.text}}
+    @icon={{this.icon}}
+    @color={{this.color}}
+    @type="filled"
+    @size="small"
+  />
+</span>
diff --git a/ui/packages/consul-ui/app/components/consul/intention/action/index.js b/ui/packages/consul-ui/app/components/consul/intention/action/index.js
new file mode 100644
index 00000000000..9c1a78e09cb
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/consul/intention/action/index.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+
+export default class ConsulIntentionActionComponent extends Component {
+  get normalizedAction() {
+    return (this.args.action || '').toLowerCase();
+  }
+
+  get text() {
+    return this.args.label || 'App aware';
+  }
+
+  get color() {
+    switch (this.normalizedAction) {
+      case 'allow':
+        return 'success';
+      case 'deny':
+        return 'critical';
+      default:
+        return 'neutral';
+    }
+  }
+
+  get icon() {
+    switch (this.normalizedAction) {
+      case 'allow':
+        return 'check';
+      case 'deny':
+        return 'x';
+      default:
+        return 'info';
+    }
+  }
+}
diff --git a/ui/packages/consul-ui/app/components/consul/intention/list/components.scss b/ui/packages/consul-ui/app/components/consul/intention/list/components.scss
index b7b5d76f2fc..8eeef9f1781 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/list/components.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/list/components.scss
@@ -8,17 +8,8 @@
   td.destination {
     @extend %tbody-th;
   }
-  td strong {
-    @extend %pill-700;
-  }
-  td.intent-allow strong {
-    @extend %pill-allow;
-  }
-  td.intent-deny strong {
-    @extend %pill-deny;
-  }
-  td.intent- strong {
-    @extend %pill-l7;
+  td .consul-intention-action-badge {
+    display: inline-flex;
   }
   td.permissions {
     @extend %body-100-regular;
diff --git a/ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs
index 537e02a0cc6..1c95386d027 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs
@@ -46,7 +46,7 @@
       </a>
     </td>
     <td class='intent intent-{{slugify item.Action}}' data-test-intention-action={{item.Action}}>
-      <strong>{{capitalize (or item.Action 'App aware')}}</strong>
+      <Consul::Intention::Action @action={{item.Action}} @label={{capitalize (or item.Action 'App aware')}} />
     </td>
     <td class='destination' data-test-intention-destination={{item.DestinationName}}>
       <span>
diff --git a/ui/packages/consul-ui/app/components/consul/intention/permission/list/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/permission/list/index.hbs
index 155577407be..f05af03c5a2 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/permission/list/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/intention/permission/list/index.hbs
@@ -12,7 +12,7 @@
 as |item|>
   <BlockSlot @name="details">
     <div onclick={{action (optional @onclick) item}}>
-      <strong class={{concat 'intent-' item.Action}}>{{capitalize item.Action}}</strong>
+      <Consul::Intention::Action @action={{item.Action}} @label={{capitalize (or item.Action 'App aware')}} />
 {{#if (gt item.HTTP.Methods.length 0)}}
         <dl class="permission-methods">
           <dt {{hds-tooltip "Methods" options=(detached-tooltip-options)}}>
diff --git a/ui/packages/consul-ui/app/components/consul/intention/permission/list/index.scss b/ui/packages/consul-ui/app/components/consul/intention/permission/list/index.scss
index 1416b7e8d94..4dd4e1e0aba 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/permission/list/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/permission/list/index.scss
@@ -11,12 +11,6 @@
 .consul-intention-permission-list:not(.readonly) > ul > li {
   @extend %with-composite-row-intent;
 }
-.consul-intention-permission-list strong {
-  @extend %pill-500;
-}
-.consul-intention-permission-list .intent-allow {
-  @extend %pill-allow;
-}
-.consul-intention-permission-list .intent-deny {
-  @extend %pill-deny;
+.consul-intention-permission-list .consul-intention-action-badge {
+  display: inline-flex;
 }
diff --git a/ui/packages/consul-ui/app/components/consul/intention/permission/list/layout.scss b/ui/packages/consul-ui/app/components/consul/intention/permission/list/layout.scss
index b2695db30ab..ad450d4b0a7 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/permission/list/layout.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/permission/list/layout.scss
@@ -8,7 +8,7 @@
     display: flex;
     width: 100%;
   }
-  strong {
+  .consul-intention-action-badge {
     margin-right: 8px;
   }
 }
diff --git a/ui/packages/consul-ui/app/components/consul/kind/index.hbs b/ui/packages/consul-ui/app/components/consul/kind/index.hbs
index 6610fbd2072..0c6e17309a3 100644
--- a/ui/packages/consul-ui/app/components/consul/kind/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/kind/index.hbs
@@ -7,8 +7,13 @@
   {{#if @withInfo}}
     <dl class="tooltip-panel">
       <dt>
-        <span data-test-kind={{@item.Kind}} class="consul-kind">
-          {{this.Name}}
+        <span data-test-kind={{@item.Kind}} class="consul-kind consul-kind--hds">
+          <Hds::Badge
+            @text={{this.Name}}
+            @icon="gateway"
+            @color="neutral"
+            @size="small"
+          />
         </span>
       </dt>
       <dd>
@@ -97,8 +102,13 @@
       </dd>
     </dl>
   {{else}}
-    <span data-test-kind={{@item.Kind}} class="consul-kind">
-      {{this.Name}}
+    <span data-test-kind={{@item.Kind}} class="consul-kind consul-kind--hds">
+      <Hds::Badge
+        @text={{this.Name}}
+        @icon="gateway"
+        @color="neutral"
+        @size="small"
+      />
     </span>
   {{/if}}
 {{/if}}
diff --git a/ui/packages/consul-ui/app/components/consul/kind/index.scss b/ui/packages/consul-ui/app/components/consul/kind/index.scss
index 782cf36d118..fdf98709f0f 100644
--- a/ui/packages/consul-ui/app/components/consul/kind/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/kind/index.scss
@@ -6,7 +6,15 @@
 .consul-kind {
   @extend %pill-200, %frame-gray-600, %body-200-regular;
 }
+.consul-kind--hds {
+  all: unset;
+  display: inline-flex;
+  border: none !important;
+}
 .consul-kind::before {
   @extend %with-gateway-mask, %as-pseudo;
   --icon-size: icon-300;
 }
+.consul-kind--hds::before {
+  content: none;
+}
diff --git a/ui/packages/consul-ui/app/components/consul/node/list/index.hbs b/ui/packages/consul-ui/app/components/consul/node/list/index.hbs
index 6af66e86449..46469b8ae7c 100644
--- a/ui/packages/consul-ui/app/components/consul/node/list/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/node/list/index.hbs
@@ -37,7 +37,15 @@ as |item index|>
   <BlockSlot @name="details">
     <Consul::Node::PeerInfo @item={{item}} />
     {{#if (eq item.Address @leader.Address)}}
-      <span class="leader" data-test-leader={{@leader.Address}}>Leader</span>
+      <span class="consul-node-list__leader-badge" data-test-leader={{@leader.Address}}>
+        <Hds::Badge
+          @text="Leader"
+          @icon="star-fill"
+          @color="neutral"
+          @type="filled"
+          @size="small"
+        />
+      </span>
     {{/if}}
     <span>
       {{format-number item.MeshServiceInstances.length}} {{pluralize item.MeshServiceInstances.length 'Service' without-count=true}}
diff --git a/ui/packages/consul-ui/app/components/consul/node/list/index.scss b/ui/packages/consul-ui/app/components/consul/node/list/index.scss
new file mode 100644
index 00000000000..ea3e5353c0e
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/consul/node/list/index.scss
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+.consul-node-list__leader-badge {
+  // Apply Consul brand color to the leader star icon
+  .hds-badge__icon {
+    color: var(--token-color-consul-brand) !important;
+  }
+}
+
+// Made with Bob
diff --git a/ui/packages/consul-ui/app/components/consul/role/list/pageobject.js b/ui/packages/consul-ui/app/components/consul/role/list/pageobject.js
index 3c2b3159f64..2fdf863f3a6 100644
--- a/ui/packages/consul-ui/app/components/consul/role/list/pageobject.js
+++ b/ui/packages/consul-ui/app/components/consul/role/list/pageobject.js
@@ -8,8 +8,12 @@ export default (collection, clickable, attribute, text, actions) => () => {
     role: clickable('a', { at: 0 }),
     name: attribute('data-test-role', '[data-test-role]'),
     description: text('[data-test-description]'),
-    policy: text('[data-test-policy].policy', { multiple: true }),
-    serviceIdentity: text('[data-test-policy].policy-service-identity', { multiple: true }),
+    policy: text('[data-test-policy][data-type="policy"]', {
+      multiple: true,
+    }),
+    serviceIdentity: text('[data-test-policy][data-type="policy-service-identity"]', {
+      multiple: true,
+    }),
     ...actions(['edit', 'delete']),
   });
 };
diff --git a/ui/packages/consul-ui/app/components/consul/source/index.hbs b/ui/packages/consul-ui/app/components/consul/source/index.hbs
index 64598149dbd..43cf2265713 100644
--- a/ui/packages/consul-ui/app/components/consul/source/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/source/index.hbs
@@ -5,8 +5,13 @@
 
 <dl class="tooltip-panel">
   <dt>
-    <span data-test-consul-source class="consul-source">
-      {{@source}}
+    <span data-test-consul-source class="consul-source--hds">
+      <Hds::Badge
+        @text={{@source}}
+        @color="neutral"
+        @type="filled"
+        @size="small"
+      />
     </span>
   </dt>
   <dd>
diff --git a/ui/packages/consul-ui/app/components/consul/source/index.scss b/ui/packages/consul-ui/app/components/consul/source/index.scss
index e489149a3f4..cccc5dc428b 100644
--- a/ui/packages/consul-ui/app/components/consul/source/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/source/index.scss
@@ -3,6 +3,6 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-.consul-source {
-  @extend %pill-200, %frame-gray-600, %body-200-regular;
+.consul-source--hds {
+  display: inline-flex;
 }
diff --git a/ui/packages/consul-ui/app/components/consul/token/list/pageobject.js b/ui/packages/consul-ui/app/components/consul/token/list/pageobject.js
index 09747a026d7..75d86abbb65 100644
--- a/ui/packages/consul-ui/app/components/consul/token/list/pageobject.js
+++ b/ui/packages/consul-ui/app/components/consul/token/list/pageobject.js
@@ -8,9 +8,15 @@ export default (collection, clickable, attribute, text, actions) => () => {
     id: attribute('data-test-token', '[data-test-token]'),
     name: text('[data-test-name]'),
     description: text('[data-test-description]'),
-    policy: text('[data-test-policy].policy', { multiple: true }),
-    role: text('[data-test-policy].role', { multiple: true }),
-    serviceIdentity: text('[data-test-policy].policy-service-identity', { multiple: true }),
+    policy: text('[data-test-policy][data-type="policy"]', {
+      multiple: true,
+    }),
+    role: text('[data-test-policy][data-type="role"]', {
+      multiple: true,
+    }),
+    serviceIdentity: text('[data-test-policy][data-type="policy-service-identity"]', {
+      multiple: true,
+    }),
     token: clickable('a', { at: 0 }),
     ...actions(['edit', 'delete', 'use', 'logout', 'clone']),
   });
diff --git a/ui/packages/consul-ui/app/components/consul/token/ruleset/list/index.hbs b/ui/packages/consul-ui/app/components/consul/token/ruleset/list/index.hbs
index ccd89e7bbba..0b1f9c11c6e 100644
--- a/ui/packages/consul-ui/app/components/consul/token/ruleset/list/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/token/ruleset/list/index.hbs
@@ -12,7 +12,11 @@
           </dt>
           <dd>
               {{#each (get policies 'management') as |item|}}
-                <span data-test-policy class={{policy/typeof item}}>{{item.Name}}</span>
+                <Consul::Acl::RulesetBadge
+                  @item={{item}}
+                  @type={{policy/typeof item}}
+                  data-test-policy
+                />
               {{/each}}
           </dd>
         </dl>
@@ -24,7 +28,11 @@
           <dt>Identities</dt>
           <dd>
               {{#each identities as |item|}}
-                <span data-test-policy class={{policy/typeof item}}>{{item.Name}}</span>
+                <Consul::Acl::RulesetBadge
+                  @item={{item}}
+                  @type={{policy/typeof item}}
+                  data-test-policy
+                />
               {{/each}}
           </dd>
         </dl>
@@ -44,7 +52,11 @@
           <dt>Rules</dt>
           <dd>
             {{#each policies as |item|}}
-              <span data-test-policy class={{policy/typeof item}}>{{item.Name}}</span>
+              <Consul::Acl::RulesetBadge
+                @item={{item}}
+                @type={{policy/typeof item}}
+                data-test-policy
+              />
             {{/each}}
           </dd>
         </dl>
diff --git a/ui/packages/consul-ui/app/components/consul/token/ruleset/list/index.scss b/ui/packages/consul-ui/app/components/consul/token/ruleset/list/index.scss
new file mode 100644
index 00000000000..c31a8e1d10a
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/consul/token/ruleset/list/index.scss
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+.consul-acl-ruleset-badge {
+  display: inline-flex;
+  margin-right: 6px;
+  margin-bottom: 6px;
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/components/consul/transparent-proxy/index.hbs b/ui/packages/consul-ui/app/components/consul/transparent-proxy/index.hbs
index 0f92bfe4943..708bc339c99 100644
--- a/ui/packages/consul-ui/app/components/consul/transparent-proxy/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/transparent-proxy/index.hbs
@@ -3,6 +3,9 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<span class="consul-transparent-proxy">
-  {{t "components.consul.transparent-proxy"}}
-</span>
\ No newline at end of file
+<Hds::Badge
+  @text={{t "components.consul.transparent-proxy"}}
+  @color="neutral"
+  @type="filled"
+  @size="small"
+/>
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/components/peerings/badge/index.js b/ui/packages/consul-ui/app/components/peerings/badge/index.js
index 72a33f8ba2f..dd28dbf4762 100644
--- a/ui/packages/consul-ui/app/components/peerings/badge/index.js
+++ b/ui/packages/consul-ui/app/components/peerings/badge/index.js
@@ -26,7 +26,7 @@ const BADGE_LOOKUP = {
     tooltip: 'Someone in the other peer may have deleted this peering connection.',
   },
   UNDEFINED: {
-    tooltip: '',
+    tooltip: 'The state of this peering connection is undefined.',
   },
 };
 export default class PeeringsBadge extends Component {
diff --git a/ui/packages/consul-ui/app/components/pill/index.scss b/ui/packages/consul-ui/app/components/pill/index.scss
index 43d260715e3..5a044caabc8 100644
--- a/ui/packages/consul-ui/app/components/pill/index.scss
+++ b/ui/packages/consul-ui/app/components/pill/index.scss
@@ -5,24 +5,11 @@
 
 @import './skin';
 @import './layout';
-span.policy-service-identity,
-span.policy-node-identity,
 .leader,
-.consul-auth-method-type,
 .topology-metrics-source-type,
 .consul-transparent-proxy {
   @extend %pill-200, %frame-gray-600;
 }
-span.policy-service-identity::before,
-span.policy-node-identity::before {
-  vertical-align: unset;
-}
-span.policy-node-identity::before {
-  content: 'Node Identity: ';
-}
-span.policy-service-identity::before {
-  content: 'Service Identity: ';
-}
 %pill::before {
   --icon-size: icon-300;
 }
diff --git a/ui/packages/consul-ui/app/styles/components.scss b/ui/packages/consul-ui/app/styles/components.scss
index c6f2d7537ae..f29f04099a7 100644
--- a/ui/packages/consul-ui/app/styles/components.scss
+++ b/ui/packages/consul-ui/app/styles/components.scss
@@ -89,9 +89,12 @@
 @import 'consul-ui/components/consul/lock-session/list';
 @import 'consul-ui/components/consul/lock-session/form';
 @import 'consul-ui/components/consul/kv/form';
+@import 'consul-ui/components/consul/node/list';
 @import 'consul-ui/components/consul/server/list';
 @import 'consul-ui/components/consul/server/card';
 @import 'consul-ui/components/consul/auth-method';
+@import 'consul-ui/components/consul/token/ruleset/list';
+@import 'consul-ui/components/consul/acl/ruleset-badge';
 
 @import 'consul-ui/components/role-selector';
 @import 'consul-ui/components/topology-metrics';
diff --git a/ui/packages/consul-ui/app/styles/routes/dc/overview/serverstatus.scss b/ui/packages/consul-ui/app/styles/routes/dc/overview/serverstatus.scss
index 5298f4cef65..585e2012888 100644
--- a/ui/packages/consul-ui/app/styles/routes/dc/overview/serverstatus.scss
+++ b/ui/packages/consul-ui/app/styles/routes/dc/overview/serverstatus.scss
@@ -67,13 +67,6 @@ section[data-route='dc.show.serverstatus'] {
   display: flex;
   align-items: center;
 }
-%server-failure-tolerance dl.warning dd::before {
-  --icon-name: icon-alert-circle;
-  --icon-size: icon-800;
-  --icon-color: var(--token-color-foreground-warning);
-  content: '';
-  margin-right: 0.5rem; /* 8px */
-}
 %server-failure-tolerance section:first-of-type dl {
   padding-right: 1.5rem; /* 24px */
 }
@@ -93,6 +86,16 @@ section[data-route='dc.show.serverstatus'] {
   content: '';
 }
 
+%server-failure-tolerance .server-failure-tolerance__badge-count,
+%server-failure-tolerance .server-failure-tolerance__status-badge {
+  display: inline-flex;
+}
+
+%server-failure-tolerance .optimistic-tolerance p {
+  @extend %body-100-regular;
+  color: var(--token-color-foreground-faint);
+}
+
 %serverstatus-route section:not([class*='-tolerance']) h2 {
   margin-top: 1.5rem; /* 24px */
   margin-bottom: 1.5rem; /* 24px */
diff --git a/ui/packages/consul-ui/app/templates/dc/show/serverstatus.hbs b/ui/packages/consul-ui/app/templates/dc/show/serverstatus.hbs
index 16308b66270..5509aa008c7 100644
--- a/ui/packages/consul-ui/app/templates/dc/show/serverstatus.hbs
+++ b/ui/packages/consul-ui/app/templates/dc/show/serverstatus.hbs
@@ -89,8 +89,8 @@ as |item|}}
                 {{compute (fn route.t 'tolerance.immediate.body')}}
               </p>
               <div class="server-failure-tolerance__value" aria-live="polite">
-                <span class="hds-typography-display-300 hds-font-weight-semibold">
-                  {{item.FailureTolerance}}
+                <span class="server-failure-tolerance__badge-count">
+                  <Hds::BadgeCount @text={{item.FailureTolerance}} @size="large" @type="filled" @color="neutral" />
                 </span>
               </div>
             </section>
@@ -110,18 +110,18 @@ as |item|}}
                   </span>
                 </h3>
               </header>
-              <dl
-                class={{class-map
-                  (array 'warning' (eq item.OptimisticFailureTolerance 0))
-                }}
-              >
-                <dt>
-                  {{compute (fn route.t 'tolerance.optimistic.body')}}
-                </dt>
-                <dd>
-                  {{item.OptimisticFailureTolerance}}
-                </dd>
-              </dl>
+              <p>
+                {{compute (fn route.t 'tolerance.optimistic.body')}}
+              </p>
+              <div class="server-failure-tolerance__status-badge">
+                <Hds::Badge
+                  @text={{item.OptimisticFailureTolerance}}
+                  @icon={{if (eq item.OptimisticFailureTolerance 0) "alert-circle" "check"}}
+                  @color={{if (eq item.OptimisticFailureTolerance 0) "warning" "success"}}
+                  @type="filled"
+                  @size="small"
+                />
+              </div>
 
             </section>
               {{/if}}