diff --git a/spring-boot-admin-server-ui/src/main/frontend/components/sba-icon-button.vue b/spring-boot-admin-server-ui/src/main/frontend/components/sba-icon-button.vue
index c18f7917b2b..2c76685730f 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/components/sba-icon-button.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/components/sba-icon-button.vue
@@ -26,10 +26,13 @@
   </sba-button>
 </template>
 
-<script>
+<script lang="ts">
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { PropType, defineComponent } from 'vue';
+
 import SbaButton from '@/components/sba-button';
 
-export default {
+export default defineComponent({
   components: { SbaButton },
   props: {
     title: {
@@ -38,7 +41,9 @@ export default {
       default: null,
     },
     icon: {
-      type: [String, Array],
+      type: [Object, Array, String] as PropType<
+        Array<string> | string | IconDefinition
+      >,
       required: true,
     },
     size: {
@@ -51,7 +56,7 @@ export default {
     },
   },
   emits: ['click'],
-};
+});
 </script>
 
 <style></style>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/test-utils.ts b/spring-boot-admin-server-ui/src/main/frontend/test-utils.ts
index dfa598da467..ffcf1d48a89 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/test-utils.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/test-utils.ts
@@ -18,7 +18,8 @@ const modules: Record<string, any> = import.meta.glob('@/**/i18n.en.json', {
   eager: true,
 });
 for (const modulesKey in modules) {
-  terms = { ...terms, ...modules[modulesKey] };
+  const moduleContent = modules[modulesKey].default || modules[modulesKey];
+  terms = { ...terms, ...moduleContent };
 }
 export let router;
 createViewRegistry();
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 0ad277d1391..673cf2a8713 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
@@ -2,8 +2,11 @@
 
 exports[`HealthDetails > Health .details > should format object details correctly 1`] = `
 <dd
+  aria-label="validChains"
   aria-labelledby="health-detail-v-7__validChains"
+  class="col-span-4"
   data-v-4727d85f=""
+  role="definition"
 >
   <pre
     class="formatted overflow-auto whitespace-pre!"
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 e5527a4ce70..676dec33073 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
@@ -48,9 +48,14 @@
         :title="$t('term.fetch_failed')"
       />
       <div class="-mx-4 -my-3">
-        <health-details :health="health" name="Instance" />
+        <health-details
+          :instance="instance"
+          :health="health"
+          :index="0"
+          name="Instance"
+        />
 
-        <template v-for="group in healthGroups" :key="group.name">
+        <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) }"
@@ -71,9 +76,15 @@
                     'rotate-90': isHealthGroupOpen(group.name),
                   }"
                 />
-                <span v-text="$t('instances.details.health_group.title')"></span
-                >:&nbsp;
-                <span v-text="group.name"></span>
+                <span
+                  v-text="$t('instances.details.health_group.title')"
+                />:&nbsp; <span v-text="group.name"></span>
+                <sba-status-badge
+                  v-if="group.data?.status"
+                  class="ml-2 fade"
+                  :status="group.data?.status"
+                />
+
                 <font-awesome-icon
                   v-if="healthGroupLoadingMap[group.name]"
                   icon="sync-alt"
@@ -84,7 +95,12 @@
             </h4>
           </div>
           <div v-if="isHealthGroupOpen(group.name) && group.data">
-            <health-details :health="group.data" :name="group.name" />
+            <health-details
+              :instance="instance"
+              :health="group.data"
+              :name="group.name"
+              :index="groupIdx + 1"
+            />
           </div>
         </template>
       </div>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.spec.ts b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.spec.ts
index 9b37ddd4b61..9cbeb2d279d 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.spec.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.spec.ts
@@ -1,12 +1,38 @@
+import userEvent from '@testing-library/user-event';
 import { screen, within } from '@testing-library/vue';
 import { beforeEach, describe, expect, it } from 'vitest';
 
+import Instance from '@/services/instance';
 import { render } from '@/test-utils';
 import HealthDetails from '@/views/instances/details/health-details.vue';
 
 describe('HealthDetails', () => {
+  const mockInstance = {
+    id: 'test-instance-123',
+  } as Instance;
+
   describe('Health .details', () => {
     beforeEach(() => {
+      // Clear localStorage and set all details to expanded for these tests
+      localStorage.clear();
+      // These tests expect details to be visible by default
+      // We need to set localStorage for all health components that will be rendered
+      const componentsToExpand = [
+        'clientConfigServer',
+        'db',
+        'discoveryComposite',
+        'discoveryClient',
+        'diskSpace',
+        'diskSpace2',
+        'ssl',
+      ];
+      componentsToExpand.forEach((name) => {
+        localStorage.setItem(
+          `de.codecentric.spring-boot-admin.health-details.${name}.test-instance-123.collapsed`,
+          'false',
+        );
+      });
+
       const healthMock = {
         status: 'UP',
         details: {
@@ -64,6 +90,7 @@ describe('HealthDetails', () => {
         props: {
           name: 'Name',
           health: healthMock,
+          instance: mockInstance,
         },
       });
     });
@@ -77,7 +104,7 @@ describe('HealthDetails', () => {
     `(
       'should display health components status',
       async ({ componentId, status }) => {
-        const clientConfigServer = await screen.findByRole('definition', {
+        const clientConfigServer = await screen.findByRole('group', {
           name: componentId,
         });
         expect(
@@ -87,7 +114,7 @@ describe('HealthDetails', () => {
     );
 
     it('should format diskSpace details correctly', async () => {
-      const diskSpaceInfo = await screen.findByRole('definition', {
+      const diskSpaceInfo = await screen.findByRole('group', {
         name: 'diskSpace2',
       });
 
@@ -116,7 +143,7 @@ describe('HealthDetails', () => {
 
     it('should format object details correctly', async () => {
       const sslInfo = await screen.findByRole('definition', {
-        name: 'validChains',
+        name: 'validChains', // inner <dd role="definition"> within ssl group
       });
       expect(sslInfo).toMatchSnapshot();
     });
@@ -124,6 +151,22 @@ describe('HealthDetails', () => {
 
   describe('Health .components', () => {
     beforeEach(() => {
+      // Clear localStorage and set all components to expanded for these tests
+      localStorage.clear();
+      // These tests expect components to be visible by default
+      const componentsToExpand = [
+        'clientConfigServer',
+        'discoveryComposite',
+        'discoveryClient',
+        'diskSpace',
+      ];
+      componentsToExpand.forEach((name) => {
+        localStorage.setItem(
+          `de.codecentric.spring-boot-admin.health-details.${name}.test-instance-123.collapsed`,
+          'false',
+        );
+      });
+
       const healthMock = {
         status: 'UP',
         components: {
@@ -156,13 +199,15 @@ describe('HealthDetails', () => {
       render(HealthDetails, {
         props: {
           health: healthMock,
+          name: 'root',
+          instance: mockInstance,
         },
       });
     });
 
     it('should display health status', async () => {
       expect(
-        screen.getByRole('definition', { name: 'clientConfigServer' }),
+        screen.getByRole('group', { name: 'clientConfigServer' }),
       ).toBeInTheDocument();
     });
 
@@ -175,7 +220,7 @@ describe('HealthDetails', () => {
     `(
       'should display health components status',
       async ({ componentId, status }) => {
-        const clientConfigServer = await screen.findByRole('definition', {
+        const clientConfigServer = await screen.findByRole('group', {
           name: componentId,
         });
         expect(
@@ -184,4 +229,299 @@ describe('HealthDetails', () => {
       },
     );
   });
+
+  describe('Collapsible details functionality', () => {
+    beforeEach(() => {
+      // Clear localStorage before each test
+      localStorage.clear();
+    });
+
+    it('should show toggle button when details exist', async () => {
+      const healthMock = {
+        status: 'UP',
+        details: {
+          database: 'HSQL Database Engine',
+          validationQuery: 'isValid()',
+        },
+      };
+
+      render(HealthDetails, {
+        props: {
+          name: 'db',
+          health: healthMock,
+          instance: mockInstance,
+        },
+      });
+
+      const toggleButton = await screen.findByRole('button');
+      expect(toggleButton).toBeInTheDocument();
+      expect(toggleButton).toHaveAttribute('title');
+      // Title should be the i18n key for toggle_details
+      const title = toggleButton.getAttribute('title');
+      expect(title).toContain('toggle_details');
+    });
+
+    it('should have proper ARIA attributes on toggle button', async () => {
+      const healthMock = {
+        status: 'UP',
+        details: {
+          database: 'HSQL Database Engine',
+        },
+      };
+
+      render(HealthDetails, {
+        props: {
+          name: 'db',
+          health: healthMock,
+          instance: mockInstance,
+        },
+      });
+
+      const toggleButton = await screen.findByRole('button');
+
+      // Should have title with toggle_details i18n key
+      expect(toggleButton).toHaveAttribute('title');
+      const title = toggleButton.getAttribute('title');
+      expect(title).toContain('toggle_details');
+
+      // Should have aria-expanded set to false initially (collapsed)
+      expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+
+      // Should have aria-controls pointing to the details element
+      expect(toggleButton).toHaveAttribute('aria-controls');
+      const controlsId = toggleButton.getAttribute('aria-controls');
+      expect(controlsId).toContain('health-details');
+      expect(controlsId).toContain('db');
+    });
+
+    it('should update aria-expanded when toggled', async () => {
+      const user = userEvent.setup();
+      const healthMock = {
+        status: 'UP',
+        details: {
+          database: 'HSQL Database Engine',
+        },
+      };
+
+      render(HealthDetails, {
+        props: {
+          name: 'db',
+          health: healthMock,
+          instance: mockInstance,
+        },
+      });
+
+      const toggleButton = await screen.findByRole('button');
+
+      // Initially collapsed
+      expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+
+      // After clicking - expanded
+      await user.click(toggleButton);
+      expect(toggleButton).toHaveAttribute('aria-expanded', 'true');
+
+      // After clicking again - collapsed
+      await user.click(toggleButton);
+      expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('should not show toggle button when no details exist', async () => {
+      const healthMock = {
+        status: 'UP',
+      };
+
+      render(HealthDetails, {
+        props: {
+          name: 'simple',
+          health: healthMock,
+          instance: mockInstance,
+        },
+      });
+
+      const toggleButton = screen.queryByRole('button');
+      expect(toggleButton).not.toBeInTheDocument();
+    });
+
+    it('should start collapsed by default', async () => {
+      const healthMock = {
+        status: 'UP',
+        details: {
+          database: 'HSQL Database Engine',
+          validationQuery: 'isValid()',
+        },
+      };
+
+      render(HealthDetails, {
+        props: {
+          name: 'db',
+          health: healthMock,
+          instance: mockInstance,
+        },
+      });
+
+      // Details should not be visible initially
+      expect(
+        screen.queryByText('HSQL Database Engine'),
+      ).not.toBeInTheDocument();
+    });
+
+    it('should expand details when toggle button is clicked', async () => {
+      const user = userEvent.setup();
+      const healthMock = {
+        status: 'UP',
+        details: {
+          database: 'HSQL Database Engine',
+          validationQuery: 'isValid()',
+        },
+      };
+
+      render(HealthDetails, {
+        props: {
+          name: 'db',
+          health: healthMock,
+          instance: mockInstance,
+        },
+      });
+
+      const toggleButton = await screen.findByRole('button');
+      await user.click(toggleButton);
+
+      // Details should now be visible
+      expect(
+        await screen.findByText('HSQL Database Engine'),
+      ).toBeInTheDocument();
+      expect(screen.getByText('isValid()')).toBeInTheDocument();
+    });
+
+    it('should collapse details when toggle button is clicked twice', async () => {
+      const user = userEvent.setup();
+      const healthMock = {
+        status: 'UP',
+        details: {
+          database: 'HSQL Database Engine',
+        },
+      };
+
+      render(HealthDetails, {
+        props: {
+          name: 'db',
+          health: healthMock,
+          instance: mockInstance,
+        },
+      });
+
+      const toggleButton = await screen.findByRole('button');
+
+      // First click - expand
+      await user.click(toggleButton);
+      expect(
+        await screen.findByText('HSQL Database Engine'),
+      ).toBeInTheDocument();
+
+      // Second click - collapse
+      await user.click(toggleButton);
+      expect(
+        screen.queryByText('HSQL Database Engine'),
+      ).not.toBeInTheDocument();
+    });
+
+    it('should persist collapsed state in localStorage', async () => {
+      const user = userEvent.setup();
+      const healthMock = {
+        status: 'UP',
+        details: {
+          database: 'HSQL Database Engine',
+        },
+      };
+
+      render(HealthDetails, {
+        props: {
+          name: 'db',
+          health: healthMock,
+          instance: mockInstance,
+        },
+      });
+
+      const toggleButton = await screen.findByRole('button');
+      await user.click(toggleButton);
+
+      const storageKey = `de.codecentric.spring-boot-admin.health-details.db.${mockInstance.id}.collapsed`;
+      expect(localStorage.getItem(storageKey)).toBe('false');
+    });
+
+    it('should restore collapsed state from localStorage', async () => {
+      const healthMock = {
+        status: 'UP',
+        details: {
+          database: 'HSQL Database Engine',
+        },
+      };
+
+      const storageKey = `de.codecentric.spring-boot-admin.health-details.db.${mockInstance.id}.collapsed`;
+      localStorage.setItem(storageKey, 'false');
+
+      render(HealthDetails, {
+        props: {
+          name: 'db',
+          health: healthMock,
+          instance: mockInstance,
+        },
+      });
+
+      // Details should be visible because we set collapsed to false in localStorage
+      expect(
+        await screen.findByText('HSQL Database Engine'),
+      ).toBeInTheDocument();
+    });
+
+    it('should handle child health components correctly', async () => {
+      const healthMock = {
+        status: 'UP',
+        components: {
+          db: {
+            status: 'UP',
+            details: {
+              database: 'HSQL Database Engine',
+            },
+          },
+        },
+      };
+
+      render(HealthDetails, {
+        props: {
+          name: 'parent',
+          health: healthMock,
+          instance: mockInstance,
+        },
+      });
+
+      // Child component should be rendered
+      const dbComponent = await screen.findByRole('group', { name: 'db' });
+      expect(dbComponent).toBeInTheDocument();
+    });
+
+    it('should not show toggle button when details only contain child health components', async () => {
+      const healthMock = {
+        status: 'UP',
+        details: {
+          childComponent: {
+            status: 'UP',
+            details: {},
+          },
+        },
+      };
+
+      render(HealthDetails, {
+        props: {
+          name: 'parent',
+          health: healthMock,
+          instance: mockInstance,
+        },
+      });
+
+      // No toggle button because all details are child health components
+      const toggleButton = screen.queryByRole('button');
+      expect(toggleButton).not.toBeInTheDocument();
+    });
+  });
 });
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 d60486b2114..b6ba00b2e97 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
@@ -16,23 +16,57 @@
 
 <template>
   <dl
-    class="px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
-    :class="{ 'bg-white': index % 2 === 0, 'bg-gray-50': index % 2 !== 0 }"
+    class="px-4 py-3 even:bg-white odd:bg-gray-50"
+    role="group"
+    :aria-label="name"
   >
-    <dt :id="`health-${id}__${name}`" class="text-sm font-medium text-gray-500">
-      {{ name }}
+    <dt
+      :id="`health-${id}__${safeNameId}`"
+      class="flex text-sm font-medium text-gray-500 items-center"
+    >
+      <div class="w-48">
+        {{ name }}
+      </div>
+      <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"
+          :class="
+            classNames({
+              'text-sba-600!': !isCollapsed,
+              'text-black': isCollapsed,
+            })
+          "
+          :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 }"
+          />
+          <font-awesome-icon :icon="faCircleInfo" />
+        </sba-button>
+      </div>
     </dt>
     <dd
-      class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"
-      :aria-labelledby="`health-${id}__` + name"
+      :id="`health-details-${id}__${safeNameId}`"
+      class="mt-1 text-sm text-gray-900 sm:mt-0"
+      :aria-labelledby="`health-${id}__${safeNameId}`"
     >
-      <sba-status-badge v-if="health.status" :status="health.status" />
-
-      <dl v-if="details && details.length > 0" class="grid grid-cols-2 mt-2">
-        <template v-for="detail in details" :key="detail.name">
+      <dl v-if="!isCollapsed" class="grid grid-cols-6 mt-2">
+        <template
+          v-for="(detail, idx) in details"
+          :key="`${detail.name}_${idx}`"
+        >
           <dt
-            :id="`health-detail-${id}__${detail.name}`"
-            class="font-medium"
+            :id="`health-detail-${id}__${safeDetailId(detail.name, idx)}`"
+            class="font-medium col-span-2"
             v-text="detail.name"
           />
           <dd
@@ -40,12 +74,20 @@
               name.toLowerCase().startsWith('diskspace') &&
               typeof detail.value === 'number'
             "
-            :aria-labelledby="`health-detail-${id}__${detail.name}`"
-            v-text="prettyBytes(detail.value)"
+            class="col-span-4"
+            role="definition"
+            :aria-label="detail.name"
+            :aria-labelledby="`health-detail-${id}__${safeDetailId(detail.name, idx)}`"
+            v-text="prettyBytes(detail.value as number)"
           />
           <dd
-            v-else-if="typeof detail.value === 'object'"
-            :aria-labelledby="`health-detail-${id}__${detail.name}`"
+            v-else-if="
+              detail.value !== null && typeof detail.value === 'object'
+            "
+            class="col-span-4"
+            role="definition"
+            :aria-label="detail.name"
+            :aria-labelledby="`health-detail-${id}__${safeDetailId(detail.name, idx)}`"
           >
             <sba-formatted-obj
               class="overflow-auto whitespace-pre!"
@@ -54,65 +96,129 @@
           </dd>
           <dd
             v-else
-            :aria-labelledby="`health-detail-${id}__${detail.name}`"
-            class="wrap-break-word whitespace-pre-wrap"
-            v-html="autolink(detail.value)"
+            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"
+            v-html="autolink(String(detail.value ?? ''))"
           />
         </template>
       </dl>
     </dd>
   </dl>
-
-  <health-details
-    v-for="(child, idx) in childHealth"
-    :key="child.name"
-    :index="idx + 1"
-    :name="child.name"
-    :health="child.value"
-  />
+  <template v-if="depth < 10">
+    <health-details
+      v-for="(child, idx) in childHealth"
+      :key="`${child.name}_${idx}`"
+      :instance="instance"
+      :depth="depth + 1"
+      :name="child.name"
+      :health="child.value"
+    />
+  </template>
 </template>
 
 <script lang="ts" setup>
+import {
+  faChevronRight,
+  faCircleInfo,
+} from '@fortawesome/free-solid-svg-icons';
+import classNames from 'classnames';
 import prettyBytes from 'pretty-bytes';
-import { computed, useId } from 'vue';
+import { computed, ref, useId, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import SbaFormattedObj from '@/components/sba-formatted-obj.vue';
 
+import Instance from '@/services/instance';
 import autolink from '@/utils/autolink';
 
+const { t } = useI18n();
 const id = useId();
 
-const isChildHealth = (value) => {
-  return value !== null && typeof value === 'object' && 'status' in value;
-};
-
 const {
   health,
   name,
-  index = 0,
+  instance,
+  depth = 0,
 } = defineProps<{
+  instance: Instance;
   name: string;
   health: Record<string, any>;
-  index?: number;
+  depth?: number;
 }>();
 
-const details = computed(() => {
-  if (health.details || health.components) {
-    return Object.entries(health.details || health.components)
-      .filter(([, value]) => !isChildHealth(value))
-      .map(([name, value]) => ({ name, value }));
+// 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 COLLAPSED_KEY = computed(
+  () =>
+    `de.codecentric.spring-boot-admin.health-details.${encodeURIComponent(name ?? '')}.${encodeURIComponent(instance?.id ?? '')}.collapsed`,
+);
+
+function readCollapsedFromStorage(): boolean {
+  if (!instance?.id) return true;
+  try {
+    const stored = localStorage.getItem(COLLAPSED_KEY.value);
+    if (stored !== null) return stored === 'true';
+  } catch {
+    // storage unavailable — fall back to default
   }
-  return [];
-});
+  return true;
+}
 
-const childHealth = computed(() => {
-  if (health.details || health.components) {
-    return Object.entries(health.details || health.components)
-      .filter(([, value]) => isChildHealth(value))
-      .map(([name, value]) => ({ name, value }));
+const isCollapsed = ref(readCollapsedFromStorage());
+
+type Details = {
+  name: string;
+  value: unknown;
+};
+
+const isChildHealth = (value: any) => {
+  return value !== null && typeof value === 'object' && 'status' in value;
+};
+
+const healthEntries = computed(() => {
+  const source = health.details ?? health.components;
+  if (source && typeof source === 'object' && !Array.isArray(source)) {
+    return Object.entries(source);
   }
   return [];
 });
+
+const details = computed(() =>
+  healthEntries.value
+    .filter(([, value]) => !isChildHealth(value))
+    .map(([name, value]) => ({ name, value }) as Details),
+);
+
+const childHealth = computed(() =>
+  healthEntries.value
+    .filter(([, value]) => isChildHealth(value))
+    .map(([name, value]) => ({ name, value })),
+);
+
+watch(COLLAPSED_KEY, () => {
+  isCollapsed.value = readCollapsedFromStorage();
+});
+
+const toggleCollapsed = () => {
+  const next = !isCollapsed.value;
+  if (instance?.id) {
+    try {
+      localStorage.setItem(COLLAPSED_KEY.value, JSON.stringify(next));
+    } catch {
+      // storage unavailable — in-memory state still updated
+    }
+  }
+  isCollapsed.value = next;
+};
 </script>
 
 <style scoped>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.de.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.de.json
index c2d128b492f..96121d48a80 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.de.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.de.json
@@ -22,7 +22,8 @@
         "title": "GC Pausen"
       },
       "health": {
-        "title": "Zustand"
+        "title": "Zustand",
+        "toggle_details": "{name} Zustandsdetails umschalten"
       },
       "health_group": {
         "title": "Zustandsgruppe"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.en.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.en.json
index 93e2a60be5c..845222e85fe 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.en.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.en.json
@@ -25,7 +25,8 @@
         "title": "Garbage Collection Pauses"
       },
       "health": {
-        "title": "Health"
+        "title": "Health",
+        "toggle_details": "Toggle {name} health details"
       },
       "health_group": {
         "title": "Health Group"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.es.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.es.json
index b304981e3d3..ae5f7105fd0 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.es.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.es.json
@@ -23,7 +23,8 @@
         "title": "Pausas en la recolección de basura"
       },
       "health": {
-        "title": "Salud"
+        "title": "Salud",
+        "toggle_details": "Alternar detalles de salud de {name}"
       },
       "health_group": {
         "title": "Grupo de Salud"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.fr.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.fr.json
index e290b3dc3ca..bfd7d6c9cc5 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.fr.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.fr.json
@@ -22,7 +22,8 @@
         "title": "Pauses du Garbage Collector"
       },
       "health": {
-        "title": "État"
+        "title": "État",
+        "toggle_details": "Basculer les détails de santé de {name}"
       },
       "health_group": {
         "title": "Groupe d'État"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.is.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.is.json
index 0bb4caf4001..cb01bdbe759 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.is.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.is.json
@@ -22,7 +22,8 @@
         "title": "GC hlé"
       },
       "health": {
-        "title": "Staða"
+        "title": "Staða",
+        "toggle_details": "Skipta um {name} heilsuupplýsingar"
       },
       "health_group": {
         "title": "Stöðuhópur"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.ko.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.ko.json
index 0c82a6d2a4e..9cc63eb1ae5 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.ko.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.ko.json
@@ -22,7 +22,8 @@
         "title": "가비지 컬렉션"
       },
       "health": {
-        "title": "상태"
+        "title": "상태",
+        "toggle_details": "{name} 상태 세부정보 토글"
       },
       "health_group": {
         "title": "상태 그룹"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.pt-BR.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.pt-BR.json
index 0af76433684..addd8050262 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.pt-BR.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.pt-BR.json
@@ -22,7 +22,8 @@
         "title": "Pausas do Garbage Collection"
       },
       "health": {
-        "title": "Integridade"
+        "title": "Integridade",
+        "toggle_details": "Alternar detalhes de integridade de {name}"
       },
       "health_group": {
         "title": "Grupo de Integridade"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.ru.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.ru.json
index 5e07ec89b70..9a2f59761ff 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.ru.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.ru.json
@@ -22,7 +22,8 @@
         "title": "Паузы сборщика мусора"
       },
       "health": {
-        "title": "Здоровье"
+        "title": "Здоровье",
+        "toggle_details": "Переключить детали состояния {name}"
       },
       "health_group": {
         "title": "Группа здоровья"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.zh-CN.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.zh-CN.json
index 2c780d48a53..d2209566a65 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.zh-CN.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.zh-CN.json
@@ -22,7 +22,8 @@
         "title": "垃圾回收"
       },
       "health": {
-        "title": "健康"
+        "title": "健康",
+        "toggle_details": "切换{name}健康详情"
       },
       "health_group": {
         "title": "健康组"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.zh-TW.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.zh-TW.json
index 34ed744c58d..2cf535d30c7 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.zh-TW.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.zh-TW.json
@@ -25,7 +25,8 @@
         "title": "垃圾回收暫停"
       },
       "health": {
-        "title": "健康狀態"
+        "title": "健康狀態",
+        "toggle_details": "切換{name}健康詳情"
       },
       "health_group": {
         "title": "健康群組"