From 2edd6257151bdc364a66001d8871d23d4ed82c78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20Ko=CC=88ninger?=
 <stephan.koeninger@codecentric.de>
Date: Fri, 17 Jul 2026 10:20:47 +0200
Subject: [PATCH 1/5] feat(sample-servlet): add CompositeHealthContributor
 example

Demonstrates ExternalApiHealthIndicator, MessageBrokerHealthIndicator,
and ExternalServicesHealthContributor (CompositeHealthContributor)
wired via HealthContributorConfig.

Uses the Spring Boot 4.x health API
(org.springframework.boot.health.contributor).
---
 .../health/ExternalApiHealthIndicator.java    | 34 ++++++++++
 .../ExternalServicesHealthContributor.java    | 65 +++++++++++++++++++
 .../health/HealthContributorConfig.java       | 52 +++++++++++++++
 .../health/MessageBrokerHealthIndicator.java  | 34 ++++++++++
 4 files changed, 185 insertions(+)
 create mode 100644 spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/java/de/codecentric/boot/admin/sample/health/ExternalApiHealthIndicator.java
 create mode 100644 spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/java/de/codecentric/boot/admin/sample/health/ExternalServicesHealthContributor.java
 create mode 100644 spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/java/de/codecentric/boot/admin/sample/health/HealthContributorConfig.java
 create mode 100644 spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/java/de/codecentric/boot/admin/sample/health/MessageBrokerHealthIndicator.java

diff --git a/spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/java/de/codecentric/boot/admin/sample/health/ExternalApiHealthIndicator.java b/spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/java/de/codecentric/boot/admin/sample/health/ExternalApiHealthIndicator.java
new file mode 100644
index 00000000000..ca37cfc1f6e
--- /dev/null
+++ b/spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/java/de/codecentric/boot/admin/sample/health/ExternalApiHealthIndicator.java
@@ -0,0 +1,34 @@
+/*
+ * Copyright 2014-2023 the original author or authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package de.codecentric.boot.admin.sample.health;
+
+import org.springframework.boot.health.contributor.Health;
+import org.springframework.boot.health.contributor.HealthIndicator;
+
+/**
+ * A sample {@link HealthIndicator} that simulates checking connectivity to an external
+ * API. In a real application this would perform an actual HTTP call or similar check.
+ */
+public class ExternalApiHealthIndicator implements HealthIndicator {
+
+	@Override
+	public Health health() {
+		// Simulate a reachable external API
+		return Health.up().withDetail("url", "https://api.example.com").withDetail("responseTime", "42ms").build();
+	}
+
+}
diff --git a/spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/java/de/codecentric/boot/admin/sample/health/ExternalServicesHealthContributor.java b/spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/java/de/codecentric/boot/admin/sample/health/ExternalServicesHealthContributor.java
new file mode 100644
index 00000000000..83c36266508
--- /dev/null
+++ b/spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/java/de/codecentric/boot/admin/sample/health/ExternalServicesHealthContributor.java
@@ -0,0 +1,65 @@
+/*
+ * Copyright 2014-2023 the original author or authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package de.codecentric.boot.admin.sample.health;
+
+import java.util.LinkedHashMap;
+import java.util.Map;
+import java.util.stream.Stream;
+
+import org.springframework.boot.health.contributor.CompositeHealthContributor;
+import org.springframework.boot.health.contributor.HealthContributor;
+import org.springframework.boot.health.contributor.HealthContributors;
+
+/**
+ * A {@link CompositeHealthContributor} that groups related external-dependency health
+ * checks under a single {@code /actuator/health/externalServices} entry.
+ *
+ * <p>
+ * Spring Boot aggregates the individual {@link HealthContributor}s and rolls up the worst
+ * status to the composite level, so a single degraded dependency is immediately visible
+ * both in the top-level health summary and in the drill-down view.
+ *
+ * <p>
+ * The composite is registered as a bean named {@code externalServices} in
+ * {@link HealthContributorConfig}, which causes Spring Boot Actuator to expose it at
+ * {@code /actuator/health/externalServices}.
+ */
+// tag::composite-health-contributor[]
+public class ExternalServicesHealthContributor implements CompositeHealthContributor {
+
+	private final Map<String, HealthContributor> contributors = new LinkedHashMap<>();
+
+	public ExternalServicesHealthContributor(ExternalApiHealthIndicator externalApi,
+			MessageBrokerHealthIndicator messageBroker) {
+		contributors.put("externalApi", externalApi);
+		contributors.put("messageBroker", messageBroker);
+	}
+
+	@Override
+	public HealthContributor getContributor(String name) {
+		return contributors.get(name);
+	}
+
+	@Override
+	public Stream<HealthContributors.Entry> stream() {
+		return contributors.entrySet()
+			.stream()
+			.map((entry) -> new HealthContributors.Entry(entry.getKey(), entry.getValue()));
+	}
+
+}
+// end::composite-health-contributor[]
diff --git a/spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/java/de/codecentric/boot/admin/sample/health/HealthContributorConfig.java b/spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/java/de/codecentric/boot/admin/sample/health/HealthContributorConfig.java
new file mode 100644
index 00000000000..3fc112efa6d
--- /dev/null
+++ b/spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/java/de/codecentric/boot/admin/sample/health/HealthContributorConfig.java
@@ -0,0 +1,52 @@
+/*
+ * Copyright 2014-2023 the original author or authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package de.codecentric.boot.admin.sample.health;
+
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+
+/**
+ * Registers the individual health indicators and the composite contributor as Spring
+ * beans.
+ *
+ * <p>
+ * The bean name {@code externalServices} is used by Spring Boot Actuator as the path
+ * segment, so the composite becomes available at
+ * {@code /actuator/health/externalServices}.
+ */
+@Configuration(proxyBeanMethods = false)
+public class HealthContributorConfig {
+
+	@Bean
+	public ExternalApiHealthIndicator externalApiHealthIndicator() {
+		return new ExternalApiHealthIndicator();
+	}
+
+	@Bean
+	public MessageBrokerHealthIndicator messageBrokerHealthIndicator() {
+		return new MessageBrokerHealthIndicator();
+	}
+
+	// tag::composite-health-contributor-bean[]
+	@Bean
+	public ExternalServicesHealthContributor externalServices(ExternalApiHealthIndicator externalApi,
+			MessageBrokerHealthIndicator messageBroker) {
+		return new ExternalServicesHealthContributor(externalApi, messageBroker);
+	}
+	// end::composite-health-contributor-bean[]
+
+}
diff --git a/spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/java/de/codecentric/boot/admin/sample/health/MessageBrokerHealthIndicator.java b/spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/java/de/codecentric/boot/admin/sample/health/MessageBrokerHealthIndicator.java
new file mode 100644
index 00000000000..777228898af
--- /dev/null
+++ b/spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/java/de/codecentric/boot/admin/sample/health/MessageBrokerHealthIndicator.java
@@ -0,0 +1,34 @@
+/*
+ * Copyright 2014-2023 the original author or authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package de.codecentric.boot.admin.sample.health;
+
+import org.springframework.boot.health.contributor.Health;
+import org.springframework.boot.health.contributor.HealthIndicator;
+
+/**
+ * A sample {@link HealthIndicator} that simulates checking an internal message broker. In
+ * a real application this would verify queue depth, connection status, etc.
+ */
+public class MessageBrokerHealthIndicator implements HealthIndicator {
+
+	@Override
+	public Health health() {
+		// Simulate a healthy message broker
+		return Health.up().withDetail("broker", "in-memory-stub").withDetail("queueDepth", 0).build();
+	}
+
+}

From 49fb3b9821f3b44c062b5f62e9995af2ceeb9526 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20Ko=CC=88ninger?=
 <stephan.koeninger@codecentric.de>
Date: Fri, 17 Jul 2026 10:20:52 +0200
Subject: [PATCH 2/5] feat(health-ui): redesign health details panel

Replace the flat dl/dd grid with status-colour-coded rows.
Composite contributors render as collapsible section headers;
children are indented below. All badges align to a shared
left column (w-52). Label top-aligns with the badge on tall rows.
---
 .../__snapshots__/health-details.spec.ts.snap |   2 +-
 .../instances/details/details-health.vue      | 209 +++++++++++-----
 .../instances/details/health-details.vue      | 226 ++++++++++++++----
 3 files changed, 329 insertions(+), 108 deletions(-)

diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/__snapshots__/health-details.spec.ts.snap b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/__snapshots__/health-details.spec.ts.snap
index 673cf2a8713..716da368beb 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/__snapshots__/health-details.spec.ts.snap
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/__snapshots__/health-details.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`HealthDetails > Health .details > should format object details correctl
 <dd
   aria-label="validChains"
   aria-labelledby="health-detail-v-7__validChains"
-  class="col-span-4"
+  class="health-row__detail-value"
   data-v-4727d85f=""
   role="definition"
 >
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.vue
index 8bad6f5d79c..288c3f0193e 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.vue
@@ -25,7 +25,6 @@
         v-if="health.status"
         :status="health.status"
         class="ml-2 transition-opacity"
-        :class="{ 'opacity-0': panelOpen }"
       />
     </template>
 
@@ -47,60 +46,62 @@
         class="border-l-4"
         :title="$t('term.fetch_failed')"
       />
-      <div class="-mx-4 -my-3">
-        <health-details
-          :instance="instance"
-          :health="health"
-          :index="0"
-          name="Instance"
-        />
-
-        <template v-for="(group, groupIdx) in healthGroups" :key="group.name">
-          <div
-            class="px-4 py-2 border-t border-gray-200 sm:px-6"
-            :class="{ 'border-b': isHealthGroupOpen(group.name) }"
-          >
-            <h4 class="leading-6 font-medium text-gray-900">
-              <button
-                class="flex items-center"
-                :aria-label="
-                  $t('instances.details.health_group.title') + ': ' + group.name
-                "
-                @click="toggleHealthGroup(group.name)"
-              >
-                <font-awesome-icon
-                  v-if="isHealthGroupCollapsible(group.name)"
-                  :icon="faChevronRight()"
-                  class="transition-transform mr-2 h-4"
-                  :class="{
-                    'rotate-90': isHealthGroupOpen(group.name),
-                  }"
-                />
-                <span
-                  v-text="$t('instances.details.health_group.title')"
-                />:&nbsp; <span v-text="group.name"></span>
+
+      <div class="health-panel">
+        <!-- ── Component list ─────────────────────────────────────────── -->
+        <div v-if="hasComponents" class="health-section">
+          <div class="health-section__body">
+            <health-details
+              v-for="([compName, compData], idx) in componentEntries"
+              :key="`${compName}_${idx}`"
+              :instance="instance"
+              :name="compName"
+              :health="compData"
+            />
+          </div>
+        </div>
+
+        <!-- ── Health groups ──────────────────────────────────────────── -->
+        <template v-for="group in healthGroups" :key="group.name">
+          <div class="health-group">
+            <button
+              class="health-group__header"
+              :aria-label="
+                $t('instances.details.health_group.title') + ': ' + group.name
+              "
+              @click="toggleHealthGroup(group.name)"
+            >
+              <span class="health-group__name">{{ group.name }}</span>
+              <div class="health-group__body-col">
                 <sba-status-badge
                   v-if="group.data?.status"
-                  class="ml-2 fade"
-                  :status="group.data?.status"
+                  :status="group.data.status"
                 />
-
                 <font-awesome-icon
                   v-if="healthGroupLoadingMap[group.name]"
                   icon="sync-alt"
                   spin
-                  class="ml-2 h-3"
+                  class="h-3 text-gray-400"
                 />
-              </button>
-            </h4>
-          </div>
-          <div v-if="isHealthGroupOpen(group.name) && group.data">
-            <health-details
-              :instance="instance"
-              :health="group.data"
-              :name="group.name"
-              :index="groupIdx + 1"
-            />
+              </div>
+              <font-awesome-icon
+                v-if="isHealthGroupCollapsible(group.name)"
+                :icon="faChevronRight()"
+                class="health-group__chevron transition-transform"
+                :class="{ 'rotate-90': isHealthGroupOpen(group.name) }"
+              />
+            </button>
+
+            <div
+              v-if="isHealthGroupOpen(group.name) && group.data"
+              class="health-group__body"
+            >
+              <health-details
+                :instance="instance"
+                :health="group.data"
+                :name="group.name"
+              />
+            </div>
           </div>
         </template>
       </div>
@@ -144,6 +145,26 @@ export default defineComponent({
     health() {
       return this.instance.statusInfo;
     },
+    overallStatusClass(): string {
+      return (this.health?.status ?? 'unknown')
+        .toLowerCase()
+        .replace(/_/g, '-');
+    },
+    hasComponents(): boolean {
+      const source = this.health?.details ?? this.health?.components;
+      return (
+        source != null &&
+        typeof source === 'object' &&
+        Object.keys(source).length > 0
+      );
+    },
+    componentEntries(): [string, any][] {
+      const source = this.health?.details ?? this.health?.components;
+      if (source && typeof source === 'object') {
+        return Object.entries(source);
+      }
+      return [];
+    },
     hasHealthUrl() {
       if (this.instance.endpoints) {
         return (
@@ -155,7 +176,6 @@ export default defineComponent({
       return false;
     },
     healthGroupsKey() {
-      // Only re-fetch on meaningful status changes; deliberately excludes
       return `${this.instance.id}:${this.instance.statusInfo?.status ?? ''}:${this.instance.statusTimestamp ?? ''}`;
     },
   },
@@ -180,7 +200,6 @@ export default defineComponent({
         this.healthGroupLoadingMap = {};
         this.healthGroupsError = null;
       }
-      // Re-fetch the (server-cached) group list on every instance change
       this.fetchHealthGroups();
     },
     isHealthGroupOpen(groupName: string) {
@@ -191,13 +210,9 @@ export default defineComponent({
     },
     toggleHealthGroup(groupName: string) {
       const group = this.healthGroups.find((g) => g.name === groupName);
-
-      if (group == undefined) {
-        return;
-      }
+      if (group == undefined) return;
 
       if (group.data === null) {
-        // First click — fetch group details
         this.fetchGroupDetails(groupName);
       } else if (this.isHealthGroupCollapsible(groupName)) {
         this.healthGroupOpenStatus[groupName].isOpen =
@@ -205,9 +220,7 @@ export default defineComponent({
       }
     },
     async fetchHealthGroups() {
-      if (!this.hasHealthUrl) {
-        return;
-      }
+      if (!this.hasHealthUrl) return;
 
       this.healthGroupsError = null;
 
@@ -221,11 +234,7 @@ export default defineComponent({
             currentNames.length === incomingNames.length &&
             currentNames.every((name, idx) => name === incomingNames[idx]);
 
-          // Skip reassignment when the group list is unchanged to preserve
-          // the accordion open/loading state and avoid needless re-renders.
-          if (unchanged) {
-            return;
-          }
+          if (unchanged) return;
 
           this.healthGroups = incomingNames.map((name: string) => ({
             name,
@@ -264,3 +273,79 @@ export default defineComponent({
   },
 });
 </script>
+
+<style scoped>
+@reference "../../../index.css";
+
+/* ── Status colour tokens ──────────────────────────────────────────────── */
+.status--up {
+  --status-color: theme('colors.green.500');
+}
+.status--down,
+.status--offline,
+.status--out-of-service {
+  --status-color: theme('colors.red.500');
+}
+.status--restricted {
+  --status-color: theme('colors.yellow.500');
+}
+.status--unknown {
+  --status-color: theme('colors.gray.400');
+}
+
+/* ── Outer panel wrapper ───────────────────────────────────────────────── */
+.health-panel {
+  @apply -mx-4 -my-3 divide-y divide-gray-100;
+}
+
+/* ── Overview row (overall status) ────────────────────────────────────── */
+.health-overview {
+  @apply flex items-stretch bg-gray-50;
+}
+
+.health-overview__bar {
+  @apply w-1 shrink-0;
+  background-color: var(--status-color, theme('colors.gray.400'));
+}
+
+.health-overview__label {
+  @apply w-52 shrink-0 px-4 py-3 text-sm font-semibold text-gray-700 self-center;
+}
+
+.health-overview__body {
+  @apply flex-1 py-3 min-w-0 self-center;
+}
+
+/* ── Component section ─────────────────────────────────────────────────── */
+.health-section__body {
+  @apply divide-y divide-gray-100;
+}
+
+/* ── Health group ──────────────────────────────────────────────────────── */
+.health-group {
+  @apply bg-white border-b border-gray-100;
+}
+
+.health-group__header {
+  @apply w-full flex items-center text-left
+         hover:bg-gray-50 transition-colors cursor-pointer
+         border-none bg-transparent p-0;
+}
+
+.health-group__name {
+  @apply w-52 shrink-0 px-4 py-3 text-xs font-semibold text-gray-500
+         tracking-wide break-all self-center;
+}
+
+.health-group__body-col {
+  @apply flex-1 py-3 min-w-0 flex items-center gap-2;
+}
+
+.health-group__chevron {
+  @apply text-gray-400 text-xs shrink-0 px-4 self-center;
+}
+
+.health-group__body {
+  @apply border-t border-gray-100;
+}
+</style>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue
index 5b704f15267..4756dabd65f 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue
@@ -15,49 +15,91 @@
   -->
 
 <template>
-  <dl
-    class="px-4 py-3 even:bg-white odd:bg-gray-50 grid grid-cols-3"
+  <!-- Composite contributor: a section header row + collapsible indented children -->
+  <div
+    v-if="isComposite"
+    class="health-section-header"
     role="group"
     :aria-label="name"
   >
-    <dt
-      :id="`health-${id}__${safeNameId}`"
-      class="w-48 text-sm font-medium text-gray-500 items-center"
+    <div
+      class="health-section-header__row"
+      :aria-expanded="String(!isCollapsed)"
+      @click="toggleCollapsed"
     >
-      <div class="break-all">
-        {{ name }}
+      <span
+        class="health-section-header__indicator"
+        :class="`status--${statusClass}`"
+      />
+      <span class="health-section-header__name">{{ name }}</span>
+      <div class="health-section-header__body">
+        <sba-status-badge v-if="health.status" :status="health.status" />
       </div>
+      <font-awesome-icon
+        :icon="faChevronRight"
+        class="health-section-header__chevron transition-transform px-4"
+        :class="{ 'rotate-90': !isCollapsed }"
+      />
+    </div>
+  </div>
+
+  <!-- Children of composite: indented, rendered as DOM siblings (outside role="group") -->
+  <template v-if="isComposite && !isCollapsed">
+    <div class="health-section-children">
+      <health-details
+        v-for="(child, idx) in childHealth"
+        :key="`${child.name}_${idx}`"
+        :instance="instance"
+        :name="child.name"
+        :health="child.value"
+      />
+    </div>
+  </template>
+
+  <!-- Leaf contributor: a single row with expandable detail grid -->
+  <dl
+    v-else-if="!isComposite"
+    class="health-row"
+    role="group"
+    :aria-label="name"
+  >
+    <div class="health-row__indicator" :class="`status--${statusClass}`" />
+
+    <dt :id="`health-${id}__${safeNameId}`" class="health-row__name">
+      {{ name }}
     </dt>
+
     <dd
       :id="`health-details-${id}__${safeNameId}`"
-      class="mt-1 text-sm text-gray-900 sm:mt-0 col-span-2"
+      class="health-row__body"
       :aria-labelledby="`health-${id}__${safeNameId}`"
     >
-      <div class="flex gap-1 items-center">
-        <div class="flex-1">
-          <sba-status-badge v-if="health.status" :status="health.status" />
-        </div>
-        <div v-if="details && details.length > 0" class="w-12 text-right">
-          <sba-button
-            class="p-0! border-none"
-            :title="t('instances.details.health.toggle_details', { name })"
-            :aria-label="t('instances.details.health.toggle_details', { name })"
-            :aria-expanded="String(!isCollapsed)"
-            :aria-controls="`health-details-${id}__${safeNameId}`"
-            @click="() => toggleCollapsed()"
-          >
-            <font-awesome-icon
-              :icon="faChevronRight"
-              class="transition-transform"
-              :class="{ 'rotate-90': !isCollapsed }"
-            />
-          </sba-button>
-        </div>
+      <div class="health-row__summary">
+        <sba-status-badge v-if="health.status" :status="health.status" />
+        <span v-if="health.description" class="health-row__description">
+          {{ health.description }}
+        </span>
+        <button
+          v-if="details && details.length > 0"
+          class="health-row__toggle"
+          :title="t('instances.details.health.toggle_details', { name })"
+          :aria-label="t('instances.details.health.toggle_details', { name })"
+          :aria-expanded="String(!isCollapsed)"
+          :aria-controls="`health-details-${id}__${safeNameId}`"
+          @click="toggleCollapsed"
+        >
+          <font-awesome-icon
+            :icon="faChevronRight"
+            class="transition-transform"
+            :class="{ 'rotate-90': !isCollapsed }"
+          />
+        </button>
       </div>
+
       <dl
         v-if="details && details.length > 0"
         v-show="!isCollapsed"
-        class="grid grid-cols-6 mt-2"
+        class="health-row__details"
       >
         <template
           v-for="(detail, idx) in details"
@@ -65,7 +107,7 @@
         >
           <dt
             :id="`health-detail-${id}__${safeDetailId(detail.name, idx)}`"
-            class="font-medium col-span-2"
+            class="health-row__detail-key"
             v-text="detail.name"
           />
           <dd
@@ -73,7 +115,7 @@
               name.toLowerCase().startsWith('diskspace') &&
               typeof detail.value === 'number'
             "
-            class="col-span-4"
+            class="health-row__detail-value"
             role="definition"
             :aria-label="detail.name"
             :aria-labelledby="`health-detail-${id}__${safeDetailId(detail.name, idx)}`"
@@ -83,7 +125,7 @@
             v-else-if="
               detail.value !== null && typeof detail.value === 'object'
             "
-            class="col-span-4"
+            class="health-row__detail-value"
             role="definition"
             :aria-label="detail.name"
             :aria-labelledby="`health-detail-${id}__${safeDetailId(detail.name, idx)}`"
@@ -98,20 +140,13 @@
             role="definition"
             :aria-label="detail.name"
             :aria-labelledby="`health-detail-${id}__${safeDetailId(detail.name, idx)}`"
-            class="wrap-break-word whitespace-pre-wrap col-span-4"
+            class="health-row__detail-value wrap-break-word whitespace-pre-wrap"
             v-html="autolink(String(detail.value ?? ''))"
           />
         </template>
       </dl>
     </dd>
   </dl>
-  <health-details
-    v-for="(child, idx) in childHealth"
-    :key="`${child.name}_${idx}`"
-    :instance="instance"
-    :name="child.name"
-    :health="child.value"
-  />
 </template>
 
 <script lang="ts" setup>
@@ -134,15 +169,17 @@ const { health, name, instance } = defineProps<{
   health: Record<string, any>;
 }>();
 
-// Sanitised name safe for use in HTML id attributes
 const safeNameId = computed(() => (name ?? '').replace(/[^a-zA-Z0-9_-]/g, '_'));
 
-// Sanitise a detail key for use in HTML ids; fall back to its index when result would be empty
 function safeDetailId(detailName: string, idx: number): string {
   const safe = detailName.replace(/[^a-zA-Z0-9_-]/g, '_');
   return safe.length > 0 ? safe : `detail_${idx}`;
 }
 
+const statusClass = computed(() =>
+  (health?.status ?? 'unknown').toLowerCase().replace(/_/g, '-'),
+);
+
 const COLLAPSED_KEY = computed(
   () =>
     `de.codecentric.spring-boot-admin.health-details.${encodeURIComponent(name ?? '')}.${encodeURIComponent(instance?.id ?? '')}.collapsed`,
@@ -166,9 +203,8 @@ type Details = {
   value: unknown;
 };
 
-const isChildHealth = (value: any) => {
-  return value !== null && typeof value === 'object' && 'status' in value;
-};
+const isChildHealth = (value: any) =>
+  value !== null && typeof value === 'object' && 'status' in value;
 
 const healthEntries = computed(() => {
   const source = health.details ?? health.components;
@@ -190,6 +226,10 @@ const childHealth = computed(() =>
     .map(([name, value]) => ({ name, value })),
 );
 
+const isComposite = computed(
+  () => childHealth.value.length > 0 && details.value.length === 0,
+);
+
 watch(COLLAPSED_KEY, () => {
   isCollapsed.value = readCollapsedFromStorage();
 });
@@ -209,6 +249,102 @@ const toggleCollapsed = () => {
 
 <style scoped>
 @reference "../../../index.css";
+
+/* ── Status colour tokens ──────────────────────────────────────────────── */
+.status--up {
+  --status-color: theme('colors.green.500');
+}
+.status--down,
+.status--offline,
+.status--out-of-service {
+  --status-color: theme('colors.red.500');
+}
+.status--restricted {
+  --status-color: theme('colors.yellow.500');
+}
+.status--unknown {
+  --status-color: theme('colors.gray.400');
+}
+
+/* ── Composite section header (flat, no card chrome) ───────────────────── */
+.health-section-header {
+  @apply border-b border-gray-100 bg-gray-50 last:border-b-0;
+}
+
+.health-section-header__row {
+  @apply w-full flex items-stretch text-left cursor-pointer select-none
+         hover:bg-gray-100 transition-colors;
+}
+
+.health-section-header__indicator {
+  @apply w-1 shrink-0;
+  background-color: var(--status-color, theme('colors.gray.400'));
+}
+
+.health-section-header__name {
+  @apply w-52 shrink-0 px-4 py-2.5 text-xs font-semibold text-gray-500
+         tracking-wide break-all self-center;
+}
+
+.health-section-header__body {
+  @apply flex-1 py-2.5 min-w-0 self-center;
+}
+
+.health-section-header__chevron {
+  @apply text-gray-400 self-center;
+}
+
+/* ── Children of composite: indented below the section header ──────────── */
+.health-section-children {
+  @apply border-b border-gray-100 pl-3 divide-y divide-gray-100;
+}
+
+/* ── Leaf row ──────────────────────────────────────────────────────────── */
+.health-row {
+  @apply flex items-stretch border-b border-gray-100 last:border-b-0
+         even:bg-white odd:bg-gray-50;
+}
+
+.health-row__indicator {
+  @apply w-1 self-stretch shrink-0;
+  background-color: var(--status-color, theme('colors.gray.400'));
+}
+
+.health-row__name {
+  @apply w-52 shrink-0 px-4 pt-[calc(theme(spacing.3)+theme(spacing.1))] pb-3
+         text-sm font-medium text-gray-600 break-all self-start;
+}
+
+.health-row__body {
+  @apply flex-1 pr-4 py-3 min-w-0 self-start;
+}
+
+.health-row__summary {
+  @apply flex items-center gap-2 flex-wrap;
+}
+
+.health-row__description {
+  @apply text-xs text-gray-500 italic;
+}
+
+.health-row__toggle {
+  @apply ml-auto text-gray-400 hover:text-gray-600 transition-colors
+         border-none bg-transparent cursor-pointer rounded;
+}
+
+/* ── Detail grid inside a leaf row ────────────────────────────────────── */
+.health-row__details {
+  @apply mt-2 grid grid-cols-6 gap-x-2 gap-y-1 text-sm;
+}
+
+.health-row__detail-key {
+  @apply col-span-2 font-medium text-gray-500 break-all;
+}
+
+.health-row__detail-value {
+  @apply col-span-4 text-gray-800 break-all;
+}
+
 :deep(a[href]) {
   @apply underline;
 }

From 2f9afff09075e8a722ab0abbd2d81868cfd45556 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20Ko=CC=88ninger?=
 <stephan.koeninger@codecentric.de>
Date: Sat, 18 Jul 2026 10:11:39 +0200
Subject: [PATCH 3/5] feat(health-indicators): update health status for
 external API and message broker

---
 .../boot/admin/sample/health/ExternalApiHealthIndicator.java    | 2 +-
 .../boot/admin/sample/health/MessageBrokerHealthIndicator.java  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/java/de/codecentric/boot/admin/sample/health/ExternalApiHealthIndicator.java b/spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/java/de/codecentric/boot/admin/sample/health/ExternalApiHealthIndicator.java
index ca37cfc1f6e..4ec487f30e3 100644
--- a/spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/java/de/codecentric/boot/admin/sample/health/ExternalApiHealthIndicator.java
+++ b/spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/java/de/codecentric/boot/admin/sample/health/ExternalApiHealthIndicator.java
@@ -28,7 +28,7 @@ public class ExternalApiHealthIndicator implements HealthIndicator {
 	@Override
 	public Health health() {
 		// Simulate a reachable external API
-		return Health.up().withDetail("url", "https://api.example.com").withDetail("responseTime", "42ms").build();
+		return Health.down().withDetail("url", "https://api.example.com").withDetail("responseTime", "42ms").build();
 	}
 
 }
diff --git a/spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/java/de/codecentric/boot/admin/sample/health/MessageBrokerHealthIndicator.java b/spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/java/de/codecentric/boot/admin/sample/health/MessageBrokerHealthIndicator.java
index 777228898af..62c882555de 100644
--- a/spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/java/de/codecentric/boot/admin/sample/health/MessageBrokerHealthIndicator.java
+++ b/spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/java/de/codecentric/boot/admin/sample/health/MessageBrokerHealthIndicator.java
@@ -28,7 +28,7 @@ public class MessageBrokerHealthIndicator implements HealthIndicator {
 	@Override
 	public Health health() {
 		// Simulate a healthy message broker
-		return Health.up().withDetail("broker", "in-memory-stub").withDetail("queueDepth", 0).build();
+		return Health.unknown().withDetail("broker", "in-memory-stub").withDetail("queueDepth", 0).build();
 	}
 
 }

From fe4a5b69795ac5238dffbeb5b0003f03eed63099 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20Ko=CC=88ninger?=
 <stephan.koeninger@codecentric.de>
Date: Sat, 18 Jul 2026 10:11:54 +0200
Subject: [PATCH 4/5] feat(status-colors): unify status color tokens across
 components

---
 .../frontend/components/sba-status-badge.vue  |   6 +-
 .../main/frontend/components/sba-status.vue   |   8 +-
 .../src/main/frontend/theme.css               |  21 ++++
 .../instances/details/details-health.vue      | 118 +++++++++---------
 .../instances/details/health-details.vue      |  23 ++--
 .../main/frontend/views/wallboard/index.vue   |  16 +--
 6 files changed, 110 insertions(+), 82 deletions(-)

diff --git a/spring-boot-admin-server-ui/src/main/frontend/components/sba-status-badge.vue b/spring-boot-admin-server-ui/src/main/frontend/components/sba-status-badge.vue
index 86d124ace03..ac94bd6f158 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/components/sba-status-badge.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/components/sba-status-badge.vue
@@ -36,13 +36,13 @@ export default {
   @apply bg-gray-200 text-black text-xs inline-flex items-center uppercase  rounded overflow-hidden px-3 py-1;
 }
 .up {
-  @apply bg-green-200 text-green-700;
+  @apply bg-status-up-bg text-status-up-text;
 }
 .down,
 .out_of_service {
-  @apply bg-red-200 text-red-700;
+  @apply bg-status-down-bg text-status-down-text;
 }
 .restricted {
-  @apply bg-yellow-200 text-yellow-700;
+  @apply bg-status-restricted-bg text-status-restricted-text;
 }
 </style>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/components/sba-status.vue b/spring-boot-admin-server-ui/src/main/frontend/components/sba-status.vue
index 4b48bd272e0..133dc1bd7df 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/components/sba-status.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/components/sba-status.vue
@@ -71,17 +71,17 @@ export default {
   @apply text-gray-500 mx-auto;
 }
 .application-status__icon--UP {
-  color: #48c78e;
+  color: var(--color-status-up);
 }
 .application-status__icon--RESTRICTED {
-  color: #ffe08a;
+  color: var(--color-status-restricted);
 }
 .application-status__icon--OUT_OF_SERVICE,
 .application-status__icon--DOWN {
-  color: #f14668;
+  color: var(--color-status-down);
 }
 .application-status__icon--UNKNOWN,
 .application-status__icon--OFFLINE {
-  color: #7a7a7a;
+  color: var(--color-status-unknown);
 }
 </style>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/theme.css b/spring-boot-admin-server-ui/src/main/frontend/theme.css
index 23f6e454003..4aeb0e7e24a 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/theme.css
+++ b/spring-boot-admin-server-ui/src/main/frontend/theme.css
@@ -30,4 +30,25 @@
   --color-sba-700: var(--main-700);
   --color-sba-800: var(--main-800);
   --color-sba-900: var(--main-900);
+
+  /* ── Status colour tokens ─────────────────────────────────────────────
+   * Tailwind utilities: text-status-up, bg-status-up-bg, etc.
+   * Single source of truth for UP/DOWN/RESTRICTED/UNKNOWN across all
+   * components (sba-status-badge, sba-status, wallboard, health panel).
+   */
+  --color-status-up:               var(--color-green-400);
+  --color-status-up-bg:            var(--color-green-200);
+  --color-status-up-text:          var(--color-green-700);
+
+  --color-status-down:             var(--color-red-400);
+  --color-status-down-bg:          var(--color-red-200);
+  --color-status-down-text:        var(--color-red-700);
+
+  --color-status-restricted:       var(--color-yellow-500);
+  --color-status-restricted-bg:    var(--color-yellow-200);
+  --color-status-restricted-text:  var(--color-yellow-700);
+
+  --color-status-unknown:          var(--color-gray-400);
+  --color-status-unknown-bg:       var(--color-gray-200);
+  --color-status-unknown-text:     var(--color-gray-700);
 }
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.vue
index 288c3f0193e..437a19ab346 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.vue
@@ -47,64 +47,66 @@
         :title="$t('term.fetch_failed')"
       />
 
-      <div class="health-panel">
-        <!-- ── Component list ─────────────────────────────────────────── -->
-        <div v-if="hasComponents" class="health-section">
-          <div class="health-section__body">
-            <health-details
-              v-for="([compName, compData], idx) in componentEntries"
-              :key="`${compName}_${idx}`"
-              :instance="instance"
-              :name="compName"
-              :health="compData"
-            />
+      <template v-if="!healthGroupsError">
+        <div class="health-panel">
+          <!-- ── Component list ─────────────────────────────────────────── -->
+          <div v-if="hasComponents" class="health-section">
+            <div class="health-section__body">
+              <health-details
+                v-for="([compName, compData], idx) in componentEntries"
+                :key="`${compName}_${idx}`"
+                :instance="instance"
+                :name="compName"
+                :health="compData"
+              />
+            </div>
           </div>
-        </div>
 
-        <!-- ── Health groups ──────────────────────────────────────────── -->
-        <template v-for="group in healthGroups" :key="group.name">
-          <div class="health-group">
-            <button
-              class="health-group__header"
-              :aria-label="
-                $t('instances.details.health_group.title') + ': ' + group.name
-              "
-              @click="toggleHealthGroup(group.name)"
-            >
-              <span class="health-group__name">{{ group.name }}</span>
-              <div class="health-group__body-col">
-                <sba-status-badge
-                  v-if="group.data?.status"
-                  :status="group.data.status"
-                />
+          <!-- ── Health groups ──────────────────────────────────────────── -->
+          <template v-for="group in healthGroups" :key="group.name">
+            <div class="health-group">
+              <button
+                class="health-group__header"
+                :aria-label="
+                  $t('instances.details.health_group.title') + ': ' + group.name
+                "
+                @click="toggleHealthGroup(group.name)"
+              >
+                <span class="health-group__name">{{ group.name }}</span>
+                <div class="health-group__body-col">
+                  <sba-status-badge
+                    v-if="group.data?.status"
+                    :status="group.data.status"
+                  />
+                  <font-awesome-icon
+                    v-if="healthGroupLoadingMap[group.name]"
+                    icon="sync-alt"
+                    spin
+                    class="h-3 text-gray-400"
+                  />
+                </div>
                 <font-awesome-icon
-                  v-if="healthGroupLoadingMap[group.name]"
-                  icon="sync-alt"
-                  spin
-                  class="h-3 text-gray-400"
+                  v-if="isHealthGroupCollapsible(group.name)"
+                  :icon="faChevronRight()"
+                  class="health-group__chevron transition-transform"
+                  :class="{ 'rotate-90': isHealthGroupOpen(group.name) }"
+                />
+              </button>
+
+              <div
+                v-if="isHealthGroupOpen(group.name) && group.data"
+                class="health-group__body"
+              >
+                <health-details
+                  :instance="instance"
+                  :health="group.data"
+                  :name="group.name"
                 />
               </div>
-              <font-awesome-icon
-                v-if="isHealthGroupCollapsible(group.name)"
-                :icon="faChevronRight()"
-                class="health-group__chevron transition-transform"
-                :class="{ 'rotate-90': isHealthGroupOpen(group.name) }"
-              />
-            </button>
-
-            <div
-              v-if="isHealthGroupOpen(group.name) && group.data"
-              class="health-group__body"
-            >
-              <health-details
-                :instance="instance"
-                :health="group.data"
-                :name="group.name"
-              />
             </div>
-          </div>
-        </template>
-      </div>
+          </template>
+        </div>
+      </template>
     </template>
   </sba-accordion>
 </template>
@@ -277,20 +279,20 @@ export default defineComponent({
 <style scoped>
 @reference "../../../index.css";
 
-/* ── Status colour tokens ──────────────────────────────────────────────── */
+/* ── Status colour tokens — sourced from theme.css @theme ──────────────── */
 .status--up {
-  --status-color: theme('colors.green.500');
+  --status-color: var(--color-status-up);
 }
 .status--down,
 .status--offline,
 .status--out-of-service {
-  --status-color: theme('colors.red.500');
+  --status-color: var(--color-status-down);
 }
 .status--restricted {
-  --status-color: theme('colors.yellow.500');
+  --status-color: var(--color-status-restricted);
 }
 .status--unknown {
-  --status-color: theme('colors.gray.400');
+  --status-color: var(--color-status-unknown);
 }
 
 /* ── Outer panel wrapper ───────────────────────────────────────────────── */
@@ -305,7 +307,7 @@ export default defineComponent({
 
 .health-overview__bar {
   @apply w-1 shrink-0;
-  background-color: var(--status-color, theme('colors.gray.400'));
+  background-color: var(--status-color, var(--color-status-unknown));
 }
 
 .health-overview__label {
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue
index 4756dabd65f..50bf72e9294 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue
@@ -250,20 +250,20 @@ const toggleCollapsed = () => {
 <style scoped>
 @reference "../../../index.css";
 
-/* ── Status colour tokens ──────────────────────────────────────────────── */
+/* ── Status colour tokens — sourced from theme.css @theme ──────────────── */
 .status--up {
-  --status-color: theme('colors.green.500');
+  --status-color: var(--color-status-up);
 }
 .status--down,
 .status--offline,
 .status--out-of-service {
-  --status-color: theme('colors.red.500');
+  --status-color: var(--color-status-down);
 }
 .status--restricted {
-  --status-color: theme('colors.yellow.500');
+  --status-color: var(--color-status-restricted);
 }
 .status--unknown {
-  --status-color: theme('colors.gray.400');
+  --status-color: var(--color-status-unknown);
 }
 
 /* ── Composite section header (flat, no card chrome) ───────────────────── */
@@ -278,7 +278,7 @@ const toggleCollapsed = () => {
 
 .health-section-header__indicator {
   @apply w-1 shrink-0;
-  background-color: var(--status-color, theme('colors.gray.400'));
+  background-color: var(--status-color, var(--color-status-unknown));
 }
 
 .health-section-header__name {
@@ -294,9 +294,14 @@ const toggleCollapsed = () => {
   @apply text-gray-400 self-center;
 }
 
-/* ── Children of composite: indented below the section header ──────────── */
+/* ── Children of composite: indented text, flush indicator bar ─────────── */
 .health-section-children {
-  @apply border-b border-gray-100 pl-3 divide-y divide-gray-100;
+  @apply border-b border-gray-100 divide-y divide-gray-100;
+}
+
+.health-section-children :deep(.health-row__name),
+.health-section-children :deep(.health-section-header__name) {
+  @apply pl-8;
 }
 
 /* ── Leaf row ──────────────────────────────────────────────────────────── */
@@ -307,7 +312,7 @@ const toggleCollapsed = () => {
 
 .health-row__indicator {
   @apply w-1 self-stretch shrink-0;
-  background-color: var(--status-color, theme('colors.gray.400'));
+  background-color: var(--status-color, var(--color-status-unknown));
 }
 
 .health-row__name {
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/wallboard/index.vue b/spring-boot-admin-server-ui/src/main/frontend/views/wallboard/index.vue
index 75211f799e2..cbb06dfc67e 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/wallboard/index.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/wallboard/index.vue
@@ -279,14 +279,14 @@ export default {
 }
 
 .up > path {
-  stroke: var(--color-green-400);
-  fill: var(--color-green-400);
+  stroke: var(--color-status-up);
+  fill: var(--color-status-up);
 }
 
 .down > path,
 .offline > path {
-  stroke: var(--color-red-400);
-  fill: var(--color-red-400);
+  stroke: var(--color-status-down);
+  fill: var(--color-status-down);
   stroke-width: 2;
 }
 
@@ -313,16 +313,16 @@ export default {
 
 .hex.down .hex__body::after {
   content: '!';
-  color: var(--color-red-500);
+  color: var(--color-status-down);
 }
 
 .hex.unknown .hex__body::after {
   content: '?';
-  color: var(--color-gray-500);
+  color: var(--color-status-unknown);
 }
 
 .restricted > path {
-  stroke: var(--color-yellow-500);
-  fill: var(--color-yellow-500);
+  stroke: var(--color-status-restricted);
+  fill: var(--color-status-restricted);
 }
 </style>

From a2bd68c88953dc0a03d6b63ff3c8c8f5fd3440ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20Ko=CC=88ninger?=
 <stephan.koeninger@codecentric.de>
Date: Sat, 18 Jul 2026 10:27:09 +0200
Subject: [PATCH 5/5] feat(health-ui): update status color tokens for
 consistency across components

---
 .../src/main/frontend/theme.css               | 33 ++++++++++---------
 .../instances/details/health-details.vue      |  2 +-
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/spring-boot-admin-server-ui/src/main/frontend/theme.css b/spring-boot-admin-server-ui/src/main/frontend/theme.css
index 4aeb0e7e24a..52c8e25ade0 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/theme.css
+++ b/spring-boot-admin-server-ui/src/main/frontend/theme.css
@@ -15,6 +15,7 @@
  */
 
 @import 'tailwindcss';
+
 @custom-variant dark (&:where(.dark, .dark *));
 @plugin "@tailwindcss/forms";
 @plugin "@tailwindcss/typography";
@@ -32,23 +33,23 @@
   --color-sba-900: var(--main-900);
 
   /* ── Status colour tokens ─────────────────────────────────────────────
-   * Tailwind utilities: text-status-up, bg-status-up-bg, etc.
-   * Single source of truth for UP/DOWN/RESTRICTED/UNKNOWN across all
-   * components (sba-status-badge, sba-status, wallboard, health panel).
-   */
-  --color-status-up:               var(--color-green-400);
-  --color-status-up-bg:            var(--color-green-200);
-  --color-status-up-text:          var(--color-green-700);
+     * Tailwind utilities: text-status-up, bg-status-up-bg, etc.
+     * Single source of truth for UP/DOWN/RESTRICTED/UNKNOWN across all
+     * components (sba-status-badge, sba-status, wallboard, health panel).
+     */
+  --color-status-up: var(--color-green-400);
+  --color-status-up-bg: var(--color-green-200);
+  --color-status-up-text: var(--color-green-700);
 
-  --color-status-down:             var(--color-red-400);
-  --color-status-down-bg:          var(--color-red-200);
-  --color-status-down-text:        var(--color-red-700);
+  --color-status-down: var(--color-red-400);
+  --color-status-down-bg: var(--color-red-200);
+  --color-status-down-text: var(--color-red-700);
 
-  --color-status-restricted:       var(--color-yellow-500);
-  --color-status-restricted-bg:    var(--color-yellow-200);
-  --color-status-restricted-text:  var(--color-yellow-700);
+  --color-status-restricted: var(--color-yellow-500);
+  --color-status-restricted-bg: var(--color-yellow-200);
+  --color-status-restricted-text: var(--color-yellow-700);
 
-  --color-status-unknown:          var(--color-gray-400);
-  --color-status-unknown-bg:       var(--color-gray-200);
-  --color-status-unknown-text:     var(--color-gray-700);
+  --color-status-unknown: var(--color-gray-400);
+  --color-status-unknown-bg: var(--color-gray-200);
+  --color-status-unknown-text: var(--color-gray-700);
 }
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue
index 50bf72e9294..1bd5f1f28bf 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue
@@ -255,13 +255,13 @@ const toggleCollapsed = () => {
   --status-color: var(--color-status-up);
 }
 .status--down,
-.status--offline,
 .status--out-of-service {
   --status-color: var(--color-status-down);
 }
 .status--restricted {
   --status-color: var(--color-status-restricted);
 }
+.status--offline,
 .status--unknown {
   --status-color: var(--color-status-unknown);
 }