diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.spec.ts b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.spec.ts
index fbdf71e32f8..1bd3faa6ee7 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.spec.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.spec.ts
@@ -1,74 +1,40 @@
 import userEvent from '@testing-library/user-event';
 import { screen, waitFor } from '@testing-library/vue';
-import { HttpResponse, http } from 'msw';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { AxiosResponse } from 'axios';
+import { describe, expect, it, vi } from 'vitest';
 
 import { applications } from '@/mocks/applications/data';
-import { server } from '@/mocks/server';
 import Application from '@/services/application';
 import { render } from '@/test-utils';
 import DetailsHealth from '@/views/instances/details/details-health.vue';
 
-function deferred<T>() {
-  let resolve!: (value: T) => void;
-  let reject!: (reason?: any) => void;
-  const promise = new Promise<T>((res, rej) => {
-    resolve = res;
-    reject = rej;
-  });
-  return { promise, resolve, reject };
-}
-
 describe('DetailsHealth', () => {
-  const healthHandlerSpy = vi.fn();
-
-  beforeEach(() => {
-    healthHandlerSpy.mockReset();
-    server.use(
-      http.get('/instances/:instanceId/actuator/health', () => {
-        healthHandlerSpy();
-        return HttpResponse.json({
-          instance: 'UP',
-          groups: ['liveness'],
-        });
-      }),
-      http.get('/instances/:instanceId/actuator/health/liveness', () => {
-        return HttpResponse.json({
-          status: 'UP',
-          details: {
-            disk: { status: 'UNKNOWN' },
-            database: { status: 'UNKNOWN' },
-          },
-        });
-      }),
-    );
-  });
-
-  it('should display groups as part of health section', async () => {
+  it('should display health status from instance.statusInfo', async () => {
     const application = new Application(applications[0]);
     const instance = application.instances[0];
 
+    // Mock fetchHealth for groups (will be called once on mount)
+    instance.fetchHealth = vi
+      .fn()
+      .mockResolvedValue({ data: { status: 'UP', groups: ['liveness'] } });
+
     render(DetailsHealth, {
       props: {
         instance,
       },
     });
 
-    await waitFor(() =>
-      expect(screen.queryByRole('status')).not.toBeInTheDocument(),
-    );
-
-    expect(
-      await screen.findByRole('button', {
-        name: /instances.details.health_group.title: liveness/,
-      }),
-    ).toBeVisible();
+    const statusBadges = await screen.findAllByRole('status');
+    expect(statusBadges[0]).toHaveTextContent('UP');
   });
 
-  it('health groups are toggleable, when details are available', async () => {
+  it('should display health details from instance.statusInfo', async () => {
     const application = new Application(applications[0]);
     const instance = application.instances[0];
-    instance.statusInfo = { status: 'UP', details: {} };
+
+    instance.fetchHealth = vi
+      .fn()
+      .mockResolvedValue({ data: { status: 'UP', groups: ['liveness'] } });
 
     render(DetailsHealth, {
       props: {
@@ -76,59 +42,17 @@ describe('DetailsHealth', () => {
       },
     });
 
-    await waitFor(() =>
-      expect(screen.queryByRole('status')).not.toBeInTheDocument(),
-    );
-
-    const button = screen.queryByRole('button', {
-      name: /instances.details.health_group.title: liveness/,
-    });
-    expect(button).toBeVisible();
-
-    expect(screen.queryByLabelText('disk')).toBeNull();
-    expect(screen.queryByLabelText('database')).toBeNull();
-
-    await userEvent.click(button);
-
-    expect(screen.queryByLabelText('disk')).toBeDefined();
-    expect(screen.queryByLabelText('database')).toBeDefined();
+    expect(await screen.findByLabelText('db')).toBeInTheDocument();
+    expect(await screen.findByLabelText('diskSpace')).toBeInTheDocument();
+    expect(await screen.findByLabelText('ping')).toBeInTheDocument();
   });
 
-  it('should update health details when instance prop changes (watch)', async () => {
-    const application = new Application(applications[0]);
-    const instance1 = application.instances[0];
-    const instance2 = {
-      ...instance1,
-      id: 'other-id',
-      statusInfo: { status: 'DOWN', details: {} },
-    };
-
-    const { rerender } = render(DetailsHealth, {
-      props: {
-        instance: instance1,
-      },
-    });
-
-    await waitFor(() =>
-      expect(screen.queryByRole('status')).not.toBeInTheDocument(),
-    );
-
-    // Simulate prop change
-    await rerender({ instance: instance2 });
-
-    // Wait for the component to react to the prop change
-    await waitFor(() =>
-      expect(
-        screen.queryByRole('button', {
-          name: /instances.details.health_group.title: liveness/,
-        }),
-      ).toBeVisible(),
-    );
-  });
-
-  it('should refetch health when instance version changes (SSE update)', async () => {
+  it('should update when instance prop changes', async () => {
     const application = new Application(applications[0]);
     const instance1 = application.instances[0];
+    instance1.fetchHealth = vi
+      .fn()
+      .mockResolvedValue({ data: { status: 'UP', groups: ['liveness'] } });
 
     const { rerender } = render(DetailsHealth, {
       props: {
@@ -136,133 +60,290 @@ describe('DetailsHealth', () => {
       },
     });
 
-    await waitFor(() => {
-      expect(healthHandlerSpy).toHaveBeenCalledTimes(1);
-    });
+    let statusBadges = await screen.findAllByRole('status');
+    expect(statusBadges[0]).toHaveTextContent('UP');
 
     const instance2 = new Application({
-      ...application,
+      ...applications[0],
       instances: [
         {
-          ...instance1,
-          id: instance1.id,
-          version: (instance1.version ?? 0) + 1,
+          ...applications[0].instances[0],
+          statusInfo: { status: 'DOWN', details: {} },
         },
       ],
     }).instances[0];
+    instance2.fetchHealth = vi
+      .fn()
+      .mockResolvedValue({ data: { status: 'DOWN', groups: [] } });
 
     await rerender({ instance: instance2 });
 
-    await waitFor(() => {
-      expect(healthHandlerSpy).toHaveBeenCalledTimes(2);
-    });
+    statusBadges = await screen.findAllByRole('status');
+    expect(statusBadges[0]).toHaveTextContent('DOWN');
   });
 
-  it('should ignore stale health response when instance updates quickly', async () => {
+  it('should handle empty/missing details gracefully', async () => {
     const application = new Application(applications[0]);
-    const instance1 = application.instances[0];
-
-    const p1 = deferred<{ data: any }>();
-    const p2 = deferred<{ data: any }>();
-    const fetchHealthSpy = vi
+    const instance = application.instances[0];
+    instance.statusInfo = { status: 'UP', details: {} };
+    instance.fetchHealth = vi
       .fn()
-      .mockReturnValueOnce(p1.promise)
-      .mockReturnValueOnce(p2.promise);
-    instance1.fetchHealth = fetchHealthSpy;
-    instance1.fetchHealthGroup = vi.fn().mockResolvedValue({ data: {} });
+      .mockResolvedValue({ data: { status: 'UP', groups: ['liveness'] } });
 
-    const { rerender } = render(DetailsHealth, {
+    render(DetailsHealth, {
       props: {
-        instance: instance1,
+        instance,
       },
     });
 
-    await waitFor(() => {
-      expect(fetchHealthSpy).toHaveBeenCalledTimes(1);
-    });
+    const statusBadges = await screen.findAllByRole('status');
+    expect(statusBadges[0]).toHaveTextContent('UP');
+  });
 
-    const instance2 = new Application({
-      ...application,
-      instances: [
-        {
-          ...instance1,
-          id: instance1.id,
-          version: (instance1.version ?? 0) + 1,
-        },
-      ],
-    }).instances[0];
-    instance2.fetchHealth = fetchHealthSpy;
-    instance2.fetchHealthGroup = instance1.fetchHealthGroup;
+  describe('SSE reactive updates', () => {
+    it('should call fetchHealth once on mount, not on SSE version changes', async () => {
+      const baseApp = applications[0];
+      const instance1 = new Application(baseApp).instances[0];
+      const fetchHealthSpy1 = vi.spyOn(instance1, 'fetchHealth');
+      fetchHealthSpy1.mockResolvedValue({
+        data: { status: 'UP', groups: ['liveness'] },
+      } as AxiosResponse);
+
+      const { rerender } = render(DetailsHealth, {
+        props: { instance: instance1 },
+      });
+
+      await screen.findAllByRole('status');
+      expect(fetchHealthSpy1).toHaveBeenCalledTimes(1);
+
+      // Same instance, different version (SSE update) — should NOT call fetchHealth again
+      const instance2 = new Application({
+        ...baseApp,
+        instances: [
+          {
+            ...baseApp.instances[0],
+            version: (baseApp.instances[0].version || 1) + 1,
+            statusInfo: { status: 'DOWN', details: {} },
+          },
+        ],
+      }).instances[0];
+      const fetchHealthSpy2 = vi.spyOn(instance2, 'fetchHealth');
+      fetchHealthSpy2.mockResolvedValue({
+        data: { status: 'DOWN', groups: [] },
+      } as AxiosResponse);
 
-    await rerender({ instance: instance2 });
+      await rerender({ instance: instance2 });
 
-    await waitFor(() => {
-      expect(fetchHealthSpy).toHaveBeenCalledTimes(2);
+      // Original instance's spy should still be 1 (no additional calls)
+      expect(fetchHealthSpy1).toHaveBeenCalledTimes(1);
     });
 
-    // Resolve second (newer) response first.
-    p2.resolve({ data: { status: 'UP', groups: [] } });
-    await waitFor(() => {
-      expect(screen.getByText('UP')).toBeInTheDocument();
-    });
+    it('should reactively update through multiple SSE status changes without extra HTTP calls', async () => {
+      const baseApp = applications[0];
+
+      const instance1 = new Application(baseApp).instances[0];
+      instance1.fetchHealth = vi
+        .fn()
+        .mockResolvedValue({ data: { status: 'UP', groups: ['liveness'] } });
+
+      const { rerender } = render(DetailsHealth, {
+        props: { instance: instance1 },
+      });
+
+      let statusBadges = await screen.findAllByRole('status');
+      expect(statusBadges[0]).toHaveTextContent('UP');
+
+      // SSE update: same id, different version
+      const instance2 = new Application({
+        ...baseApp,
+        instances: [
+          {
+            ...baseApp.instances[0],
+            version: 4,
+            statusInfo: {
+              status: 'DOWN',
+              details: {
+                db: {
+                  status: 'DOWN',
+                  details: { error: 'Connection refused' },
+                },
+              },
+            },
+          },
+        ],
+      }).instances[0];
+      instance2.fetchHealth = vi
+        .fn()
+        .mockResolvedValue({ data: { status: 'DOWN', groups: [] } });
+
+      await rerender({ instance: instance2 });
 
-    // Resolve first (older) response afterwards; UI must not regress.
-    p1.resolve({ data: { status: 'DOWN', groups: [] } });
-    await waitFor(() => {
-      expect(screen.queryByText('DOWN')).not.toBeInTheDocument();
+      statusBadges = await screen.findAllByRole('status');
+      expect(statusBadges[0]).toHaveTextContent('DOWN');
+      expect(await screen.findByLabelText('db')).toBeInTheDocument();
     });
-    expect(screen.getByText('UP')).toBeInTheDocument();
   });
 
-  it('should not display health group button if no groups are present', async () => {
-    server.use(
-      http.get('/instances/:instanceId/actuator/health', () => {
-        return HttpResponse.json({
-          instance: 'UP',
-          groups: [],
-        });
-      }),
-    );
-    const application = new Application(applications[0]);
-    const instance = application.instances[0];
+  describe('lazy health groups', () => {
+    it('should display health group buttons after mount', async () => {
+      const application = new Application(applications[0]);
+      const instance = application.instances[0];
+      instance.fetchHealth = vi.fn().mockResolvedValue({
+        data: { status: 'UP', groups: ['liveness', 'readiness'] },
+      });
+      const fetchGroupSpy = vi.spyOn(instance, 'fetchHealthGroup');
 
-    render(DetailsHealth, {
-      props: {
-        instance,
-      },
+      render(DetailsHealth, {
+        props: { instance },
+      });
+
+      await screen.findAllByRole('status');
+
+      expect(
+        await screen.findByRole('button', { name: /liveness/ }),
+      ).toBeInTheDocument();
+      expect(
+        await screen.findByRole('button', { name: /readiness/ }),
+      ).toBeInTheDocument();
+      expect(fetchGroupSpy).not.toHaveBeenCalled();
     });
 
-    await waitFor(() =>
-      expect(screen.queryByRole('status')).not.toBeInTheDocument(),
-    );
+    it('should fetch group details on first click', async () => {
+      const application = new Application(applications[0]);
+      const instance = application.instances[0];
+      instance.fetchHealth = vi.fn().mockResolvedValue({
+        data: { status: 'UP', groups: ['custom-group'] },
+      });
+      const fetchGroupSpy = vi.spyOn(instance, 'fetchHealthGroup');
+      fetchGroupSpy.mockResolvedValue({
+        data: {
+          status: 'UP',
+          details: {
+            customDetails: {
+              status: 'UP',
+              details: { error: 'no property sources located' },
+            },
+            evenMoreDiskSpace: {
+              status: 'UP',
+              details: {
+                total: 994662584320,
+                free: 300063879168,
+                threshold: 10485760,
+                exists: true,
+              },
+            },
+          },
+        },
+      } as AxiosResponse);
+
+      render(DetailsHealth, {
+        props: { instance },
+      });
 
-    expect(
-      screen.queryByRole('button', {
-        name: /instances.details.health_group.title: liveness/,
-      }),
-    ).toBeNull();
-  });
+      const button = await screen.findByRole('button', {
+        name: /custom-group/,
+      });
+      await userEvent.click(button);
 
-  it('should fetch health details only once on startup', async () => {
-    const application = new Application(applications[0]);
-    const instance = application.instances[0];
+      await waitFor(() => {
+        expect(fetchGroupSpy).toHaveBeenCalledWith('custom-group');
+      });
 
-    render(DetailsHealth, {
-      props: {
-        instance,
-      },
+      // custom-group has service component
+      expect(await screen.findByLabelText('customDetails')).toBeInTheDocument();
+      expect(
+        await screen.findByLabelText('evenMoreDiskSpace'),
+      ).toBeInTheDocument();
     });
 
-    await waitFor(() => {
-      expect(healthHandlerSpy).toHaveBeenCalledTimes(1);
+    it('should toggle group visibility after data is loaded', async () => {
+      const application = new Application(applications[0]);
+      const instance = application.instances[0];
+      instance.fetchHealth = vi.fn().mockResolvedValue({
+        data: { status: 'UP', groups: ['custom-group'] },
+      });
+      const fetchGroupSpy = vi.spyOn(instance, 'fetchHealthGroup');
+      fetchGroupSpy.mockResolvedValue({
+        data: { status: 'UP', details: { service: { status: 'UP' } } },
+      } as AxiosResponse);
+
+      render(DetailsHealth, {
+        props: { instance },
+      });
+
+      const button = await screen.findByRole('button', {
+        name: /custom-group/,
+      });
+
+      // First click — fetch & show
+      await userEvent.click(button);
+      await screen.findByLabelText('service');
+
+      // Second click — hide
+      await userEvent.click(button);
+      expect(screen.queryByLabelText('service')).not.toBeInTheDocument();
+
+      // Third click — show again
+      await userEvent.click(button);
+      expect(await screen.findByLabelText('service')).toBeInTheDocument();
+
+      // fetchHealthGroup should only be called once (first click)
+      expect(fetchGroupSpy).toHaveBeenCalledTimes(1);
     });
 
-    // Verify that the handler is not called again after the initial fetch
-    await waitFor(
-      () => {
-        expect(healthHandlerSpy).toHaveBeenCalledTimes(1);
-      },
-      { timeout: 1000 },
-    );
+    it('should not show groups when none exist', async () => {
+      const application = new Application(applications[0]);
+      const instance = application.instances[0];
+      instance.fetchHealth = vi.fn().mockResolvedValue({
+        data: { status: 'UP', groups: [] },
+      });
+
+      render(DetailsHealth, {
+        props: { instance },
+      });
+
+      await screen.findAllByRole('status');
+
+      expect(
+        screen.queryByRole('button', { name: /Health Group/ }),
+      ).not.toBeInTheDocument();
+    });
+
+    it('should re-fetch groups when instance id changes', async () => {
+      const app1 = new Application(applications[0]).instances[0];
+      app1.fetchHealth = vi
+        .fn()
+        .mockResolvedValue({ data: { status: 'UP', groups: ['liveness'] } });
+
+      const { rerender } = render(DetailsHealth, {
+        props: { instance: app1 },
+      });
+
+      await waitFor(() => {
+        expect(app1.fetchHealth).toHaveBeenCalledTimes(1);
+      });
+
+      const app2 = new Application({
+        ...applications[0],
+        instances: [
+          {
+            ...applications[0].instances[0],
+            id: 'different-id',
+          },
+        ],
+      }).instances[0];
+      app2.fetchHealth = vi
+        .fn()
+        .mockResolvedValue({ data: { status: 'UP', groups: ['readiness'] } });
+
+      await rerender({ instance: app2 });
+
+      await waitFor(() => {
+        expect(app2.fetchHealth).toHaveBeenCalledTimes(1);
+      });
+
+      // Original instance should still have only 1 call
+      expect(app1.fetchHealth).toHaveBeenCalledTimes(1);
+    });
   });
 });
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 e5b03911c85..4b219a03c6f 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
@@ -19,7 +19,6 @@
     :id="`health-details-panel__${instance.id}`"
     v-model="panelOpen"
     :title="$t('instances.details.health.title')"
-    :loading="loading"
   >
     <template #title>
       <sba-status-badge
@@ -32,6 +31,7 @@
 
     <template #actions>
       <router-link
+        v-if="hasHealthUrl"
         :to="{ name: 'journal', query: { instanceId: instance.id } }"
         class="text-sm inline-flex items-center leading-sm border border-gray-400 bg-white text-gray-700 rounded overflow-hidden px-3 py-1 hover:bg-gray-200 ml-1"
       >
@@ -41,47 +41,46 @@
 
     <template #default>
       <sba-alert
-        :error="error"
+        v-if="healthGroupsError"
+        :error="healthGroupsError"
         class="border-l-4"
         :title="$t('term.fetch_failed')"
       />
       <div class="-mx-4 -my-3">
         <health-details :health="health" name="Instance" />
 
-        <template v-for="healthGroup in healthGroups" :key="healthGroup.name">
+        <template v-for="group in healthGroups" :key="group.name">
           <div
             class="px-4 py-2 border-t border-gray-200 sm:px-6"
-            :class="{ 'border-b': isHealthGroupOpen(healthGroup.name) }"
+            :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') +
-                  ': ' +
-                  healthGroup.name
+                  $t('instances.details.health_group.title') + ': ' + group.name
                 "
-                @click="toggleHealthGroup(healthGroup.name)"
+                @click="toggleHealthGroup(group.name)"
               >
                 <font-awesome-icon
-                  v-if="isHealthGroupCollapsible(healthGroup.name)"
                   icon="chevron-down"
                   class="transition-[transform] mr-2 h-4"
-                  :class="{
-                    '-rotate-90': !isHealthGroupOpen(healthGroup.name),
-                  }"
+                  :class="{ '-rotate-90': !isHealthGroupOpen(group.name) }"
                 />
                 <span v-text="$t('instances.details.health_group.title')"></span
                 >:&nbsp;
-                <span v-text="healthGroup.name"></span>
+                <span v-text="group.name"></span>
+                <font-awesome-icon
+                  v-if="healthGroupLoadingMap[group.name]"
+                  icon="sync-alt"
+                  spin
+                  class="ml-2 h-3"
+                />
               </button>
             </h4>
           </div>
-          <div v-if="isHealthGroupOpen(healthGroup.name)">
-            <health-details
-              :health="healthGroup.data"
-              :name="healthGroup.name"
-            />
+          <div v-if="isHealthGroupOpen(group.name) && group.data">
+            <health-details :health="group.data" :name="group.name" />
           </div>
         </template>
       </div>
@@ -95,10 +94,10 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import SbaAccordion from '@/components/sba-accordion.vue';
 
 import Instance from '@/services/instance';
-import healthDetails from '@/views/instances/details/health-details';
+import HealthDetails from '@/views/instances/details/health-details.vue';
 
 export default {
-  components: { SbaAccordion, FontAwesomeIcon, healthDetails },
+  components: { SbaAccordion, FontAwesomeIcon, HealthDetails },
   props: {
     instance: {
       type: Instance,
@@ -106,142 +105,122 @@ export default {
     },
   },
   data: () => ({
-    error: null,
-    loading: false,
-    liveHealth: null,
-    healthGroups: [],
     panelOpen: true,
-    healthGroupOpenStatus: {} as {
-      isOpen: boolean;
-      collapsible: boolean;
-    },
-    currentInstanceId: null,
-    currentInstanceUpdateKey: null,
-    fetchToken: 0,
+    healthGroups: [] as Array<{
+      name: string;
+      data: Record<string, any> | null;
+    }>,
+    healthGroupsError: null as Error | null,
+    healthGroupOpenStatus: {} as Record<
+      string,
+      { isOpen: boolean; collapsible: boolean }
+    >,
+    healthGroupLoadingMap: {} as Record<string, boolean>,
+    currentInstanceId: null as string | null,
   }),
   computed: {
     health() {
-      return this.liveHealth || this.instance.statusInfo;
+      return this.instance.statusInfo;
+    },
+    hasHealthUrl() {
+      if (this.instance.endpoints) {
+        return (
+          this.instance.endpoints.findIndex(
+            (endpoint: { id: string }) => endpoint.id === 'health',
+          ) >= 0
+        );
+      }
+      return false;
     },
   },
   watch: {
     instance: {
-      handler: 'fetchHealth',
+      handler: 'onInstanceChanged',
       immediate: true,
     },
   },
   methods: {
-    reloadHealth() {
-      const updateKey =
-        this.instance.version ??
-        this.instance.statusTimestamp ??
-        this.instance.id;
-      if (
-        this.instance.id !== this.currentInstanceId ||
-        updateKey !== this.currentInstanceUpdateKey
-      ) {
-        this.fetchHealth();
+    onInstanceChanged() {
+      if (this.instance.id !== this.currentInstanceId) {
+        this.currentInstanceId = this.instance.id;
+        this.healthGroups = [];
+        this.healthGroupOpenStatus = {};
+        this.healthGroupLoadingMap = {};
+        this.healthGroupsError = null;
+        this.fetchHealthGroups();
+      } else {
+        // Same instance, SSE update (e.g. status change) — collapse groups and clear stale data
+        for (const group of this.healthGroups) {
+          group.data = null;
+        }
+        this.healthGroupOpenStatus = {};
+        this.healthGroupLoadingMap = {};
       }
     },
     isHealthGroupOpen(groupName: string) {
-      return this.healthGroupOpenStatus[groupName].isOpen === true;
+      return this.healthGroupOpenStatus[groupName]?.isOpen ?? false;
     },
     isHealthGroupCollapsible(groupName: string) {
-      return this.healthGroupOpenStatus[groupName].collapsible;
+      return this.healthGroupOpenStatus[groupName]?.collapsible ?? true;
     },
     toggleHealthGroup(groupName: string) {
-      if (this.isHealthGroupCollapsible(groupName)) {
+      const group = this.healthGroups.find((g) => g.name === groupName);
+
+      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 =
           !this.healthGroupOpenStatus[groupName].isOpen;
       }
     },
-    async fetchHealth() {
-      const token = ++this.fetchToken;
-      this.error = null;
-      this.loading = true;
+    async fetchHealthGroups() {
+      if (!this.hasHealthUrl) {
+        return;
+      }
+
+      this.healthGroupsError = null;
 
       try {
         const res = await this.instance.fetchHealth();
-        // Stale response - another fetch was initiated
-        if (token !== this.fetchToken) {
-          return;
-        }
-
-        this.currentInstanceId = this.instance.id;
-        this.currentInstanceUpdateKey =
-          this.instance.version ??
-          this.instance.statusTimestamp ??
-          this.instance.id;
-        this.liveHealth = res.data;
 
         if (Array.isArray(res.data.groups)) {
-          // Capture token for group fetches to detect staleness
-          const groupToken = token;
-          const groupPromises = res.data.groups.map(async (group: string) => {
-            // Check if stale before starting fetch
-            if (groupToken !== this.fetchToken) {
-              throw new Error('Stale request');
-            }
-
-            try {
-              return {
-                name: group,
-                data: (await this.instance.fetchHealthGroup(group)).data,
-              };
-            } catch (e) {
-              // Only suppress error if this request became stale
-              if (groupToken !== this.fetchToken) {
-                throw e;
-              }
-              return null;
-            }
-          });
-
-          const groupResults = await Promise.allSettled(groupPromises);
-
-          // Final staleness check after all promises settle
-          if (groupToken !== this.fetchToken) {
-            return;
-          }
-
-          this.healthGroups = groupResults
-            .map((result) => {
-              // Verify still not stale after settlement
-              if (groupToken !== this.fetchToken) {
-                return null;
-              }
-              return result.status === 'fulfilled' ? result.value : null;
-            })
-            .filter((g) => g !== null);
-
-          this.healthGroupOpenStatus = this.healthGroups
-            .map(
-              (group: {
-                name: string;
-                data: { details: string } | undefined;
-              }) => {
-                return {
-                  [group.name]: {
-                    isOpen: group.data?.details === undefined,
-                    collapsible: group.data?.details !== undefined,
-                  },
-                };
-              },
-            )
-            .reduce((acc, curr) => ({ ...acc, ...curr }), {});
+          this.healthGroups = res.data.groups.map((name: string) => ({
+            name,
+            data: null,
+          }));
+          this.healthGroupOpenStatus = {};
+          this.healthGroupLoadingMap = {};
+        } else {
+          this.healthGroups = [];
         }
       } catch (error) {
-        // Stale error - ignore
-        if (token !== this.fetchToken) {
-          return;
+        console.warn('Fetching health groups failed:', error);
+        this.healthGroupsError = error as Error;
+      }
+    },
+    async fetchGroupDetails(groupName: string) {
+      this.healthGroupLoadingMap[groupName] = true;
+
+      try {
+        const res = await this.instance.fetchHealthGroup(groupName);
+        const group = this.healthGroups.find((g) => g.name === groupName);
+
+        if (group) {
+          group.data = res.data;
+          this.healthGroupOpenStatus[groupName] = {
+            isOpen: true,
+            collapsible: res.data !== undefined,
+          };
         }
-        console.warn('Fetching live health failed:', error);
-        this.error = error;
+      } catch (error) {
+        console.warn(`Fetching health group '${groupName}' failed:`, error);
       } finally {
-        if (token !== this.fetchToken) {
-          return;
-        }
-        this.loading = false;
+        this.healthGroupLoadingMap[groupName] = false;
       }
     },
   },
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-info.spec.ts b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-info.spec.ts
index 10c132f8a80..263da2857c5 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-info.spec.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-info.spec.ts
@@ -1,241 +1,164 @@
-import { screen, waitFor } from '@testing-library/vue';
-import { AxiosHeaders } from 'axios';
-import { HttpResponse, http } from 'msw';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { screen } from '@testing-library/vue';
+import { describe, expect, it, vi } from 'vitest';
 
 import DetailsInfo from './details-info.vue';
 
 import { applications } from '@/mocks/applications/data';
-import { server } from '@/mocks/server';
 import Application from '@/services/application';
 import { render } from '@/test-utils';
 
-function deferred<T>() {
-  let resolve!: (value: T) => void;
-  let reject!: (reason?: any) => void;
-  const promise = new Promise<T>((res, rej) => {
-    resolve = res;
-    reject = rej;
-  });
-  return { promise, resolve, reject };
-}
-
 describe('DetailsInfo', () => {
-  beforeEach(() => {
-    server.use(
-      http.get('/instances/:instanceId/actuator/info', () => {
-        return HttpResponse.json({
-          app: { version: '1.0.0', name: 'TestApp' },
-          java: { version: '17' },
-        });
-      }),
-    );
-  });
-
-  it('should render info table with keys and values', async () => {
+  it('should render info from instance.info', async () => {
     const application = new Application(applications[0]);
     const instance = application.instances[0];
-    instance.hasEndpoint = () => true;
-
-    instance.fetchInfo = async () => ({
-      data: {
-        app: { version: '1.0.0', name: 'TestApp' },
-        java: { version: '17' },
-      },
-      status: 200,
-      statusText: 'OK',
-      headers: new AxiosHeaders(),
-      config: { headers: new AxiosHeaders() },
-    });
 
     render(DetailsInfo, {
       props: { instance },
     });
 
-    await waitFor(() => {
-      expect(screen.queryByRole('status')).not.toBeInTheDocument();
-    });
-
-    expect(await screen.findByText('app')).toBeVisible();
-    expect(await screen.findByText('java')).toBeVisible();
-    // YAML-formatted output is rendered in a <pre> block, so match the full string
-    expect(
-      await screen.findByText(/version: 1.0.0[\s\S]*name: TestApp/),
-    ).toBeVisible();
-    expect(await screen.findByText(/version: '17'/)).toBeVisible();
+    // The mock instance has info with 'tags', 'scm-url', 'build-url', 'build' keys
+    expect(await screen.findByText('tags')).toBeVisible();
+    expect(await screen.findByText('build')).toBeVisible();
   });
 
-  it('should show no info message if info is empty', async () => {
-    const application = new Application(applications[0]);
-    const instance = application.instances[0];
-    instance.hasEndpoint = () => true;
-    instance.fetchInfo = async () => ({
-      data: {},
-      status: 200,
-      statusText: 'OK',
-      headers: new AxiosHeaders(),
-      config: { headers: new AxiosHeaders() },
+  it('should show empty message when info is empty', async () => {
+    const application = new Application({
+      ...applications[0],
+      instances: [
+        {
+          ...applications[0].instances[0],
+          info: {},
+        },
+      ],
     });
+    const instance = application.instances[0];
 
     render(DetailsInfo, {
       props: { instance },
     });
 
-    await waitFor(() => {
-      expect(screen.queryByRole('status')).not.toBeInTheDocument();
-    });
-
     expect(
       await screen.findByText('instances.details.info.no_info_provided'),
     ).toBeVisible();
   });
 
-  it('should show error alert if fetch fails', async () => {
-    const application = new Application(applications[0]);
-    const instance = application.instances[0];
-    instance.hasEndpoint = () => true;
-    instance.fetchInfo = async () => {
-      throw new Error('fail');
-    };
-
-    render(DetailsInfo, {
-      props: { instance },
-    });
-
-    await waitFor(() => {
-      expect(screen.getByRole('alert')).toBeVisible();
-    });
-    expect(screen.getByRole('alert')).toHaveTextContent(
-      'Fetching of data failed.',
-    );
-  });
-
-  it('should call fetchInfo when instance changes (watcher)', async () => {
-    const application = new Application(applications[0]);
-    const instance1 = application.instances[0];
-    const instance2 = new Application({
-      ...application,
-      instances: [
-        {
-          ...instance1,
-          id: 'other-id',
-        },
-      ],
-    }).instances[0];
-    instance2.hasEndpoint = () => true;
-    instance2.fetchInfo = async () => ({ data: { foo: 'bar' } });
-    instance1.hasEndpoint = () => true;
-    const fetchInfoSpy = vi
-      .fn()
-      .mockResolvedValue({ data: { app: { version: '1.0.0' } } });
-    instance1.fetchInfo = fetchInfoSpy;
-
-    const { rerender } = render(DetailsInfo, {
-      props: { instance: instance1 },
-    });
-
-    await waitFor(() => {
-      expect(fetchInfoSpy).toHaveBeenCalled();
-    });
-
-    // Now rerender with a new instance (different id)
-    await rerender({ instance: instance2 });
-
-    // Should show the new info from instance2
-    expect(await screen.findByText('foo')).toBeVisible();
-    expect(await screen.findByText('bar')).toBeVisible();
-  });
-
-  it('should call fetchInfo when instance version changes (SSE update)', async () => {
+  it('should update when instance prop changes', async () => {
     const application = new Application(applications[0]);
     const instance1 = application.instances[0];
-    instance1.hasEndpoint = () => true;
-
-    const fetchInfoSpy = vi
-      .fn()
-      .mockResolvedValueOnce({ data: { app: { version: '1.0.0' } } })
-      .mockResolvedValueOnce({ data: { app: { version: '2.0.0' } } });
-    instance1.fetchInfo = fetchInfoSpy;
 
     const { rerender } = render(DetailsInfo, {
       props: { instance: instance1 },
     });
 
-    await waitFor(() => {
-      expect(fetchInfoSpy).toHaveBeenCalledTimes(1);
-    });
+    // Initial render shows info from mock data
+    expect(await screen.findByText('tags')).toBeVisible();
 
+    // Create new instance with different info
     const instance2 = new Application({
-      ...application,
+      ...applications[0],
       instances: [
         {
-          ...instance1,
-          id: instance1.id,
-          version: (instance1.version ?? 0) + 1,
+          ...applications[0].instances[0],
+          info: { foo: 'bar' },
         },
       ],
     }).instances[0];
-    instance2.hasEndpoint = () => true;
-    instance2.fetchInfo = fetchInfoSpy;
 
     await rerender({ instance: instance2 });
 
-    await waitFor(() => {
-      expect(fetchInfoSpy).toHaveBeenCalledTimes(2);
-    });
-
-    expect(await screen.findByText(/version: 2.0.0/)).toBeVisible();
+    expect(await screen.findByText('foo')).toBeVisible();
+    expect(await screen.findByText('bar')).toBeVisible();
   });
 
-  it('should ignore stale info response when instance updates quickly', async () => {
+  it('should show count of info entries', async () => {
     const application = new Application(applications[0]);
-    const instance1 = application.instances[0];
-    instance1.hasEndpoint = () => true;
-
-    const p1 = deferred<{ data: any }>();
-    const p2 = deferred<{ data: any }>();
-    const fetchInfoSpy = vi
-      .fn()
-      .mockReturnValueOnce(p1.promise)
-      .mockReturnValueOnce(p2.promise);
-    instance1.fetchInfo = fetchInfoSpy;
-
-    const { rerender } = render(DetailsInfo, {
-      props: { instance: instance1 },
-    });
-
-    await waitFor(() => {
-      expect(fetchInfoSpy).toHaveBeenCalledTimes(1);
-    });
-
-    const instance2 = new Application({
-      ...application,
-      instances: [
-        {
-          ...instance1,
-          id: instance1.id,
-          version: (instance1.version ?? 0) + 1,
-        },
-      ],
-    }).instances[0];
-    instance2.hasEndpoint = () => true;
-    instance2.fetchInfo = fetchInfoSpy;
-
-    await rerender({ instance: instance2 });
+    const instance = application.instances[0];
 
-    await waitFor(() => {
-      expect(fetchInfoSpy).toHaveBeenCalledTimes(2);
+    render(DetailsInfo, {
+      props: { instance },
     });
 
-    // Resolve second (newer) response first.
-    p2.resolve({ data: { app: { version: '2.0.0' } } });
-    expect(await screen.findByText(/version: 2.0.0/)).toBeVisible();
+    // The mock has 4 info keys: tags, scm-url, build-url, build
+    // The count appears in the accordion title slot
+    expect(await screen.findByText('(4)')).toBeVisible();
+  });
 
-    // Resolve first (older) response afterwards; UI must not regress.
-    p1.resolve({ data: { app: { version: '1.0.0' } } });
-    await waitFor(() => {
-      expect(screen.queryByText(/version: 1.0.0/)).not.toBeInTheDocument();
+  describe('SSE reactive updates', () => {
+    it('should never call instance.fetchInfo (no direct actuator calls)', async () => {
+      const application = new Application(applications[0]);
+      const instance = application.instances[0];
+
+      // Spy on fetchInfo to prove it's never called
+      const fetchInfoSpy = vi.spyOn(instance, 'fetchInfo');
+
+      render(DetailsInfo, {
+        props: { instance },
+      });
+
+      // Wait for component to fully render
+      await screen.findByText('tags');
+
+      // Assert fetchInfo was NEVER called - this proves the bug fix
+      expect(fetchInfoSpy).not.toHaveBeenCalled();
+    });
+
+    it('should reactively update through multiple SSE info changes without HTTP calls', async () => {
+      const baseApp = applications[0];
+
+      // 1. Initial SSE event with full info
+      const instance1 = new Application(baseApp).instances[0];
+      const fetchInfoSpy1 = vi.spyOn(instance1, 'fetchInfo');
+
+      const { rerender } = render(DetailsInfo, {
+        props: { instance: instance1 },
+      });
+
+      expect(await screen.findByText('tags')).toBeVisible();
+      expect(await screen.findByText('build')).toBeVisible();
+      expect(fetchInfoSpy1).not.toHaveBeenCalled();
+
+      // 2. SSE event: info changes (simulates INFO_CHANGED event)
+      const instance2 = new Application({
+        ...baseApp,
+        instances: [
+          {
+            ...baseApp.instances[0],
+            version: 4,
+            info: {
+              app: { name: 'my-service', version: '2.0.0' },
+              'git.branch': 'main',
+            },
+          },
+        ],
+      }).instances[0];
+      const fetchInfoSpy2 = vi.spyOn(instance2, 'fetchInfo');
+
+      await rerender({ instance: instance2 });
+
+      expect(await screen.findByText('app')).toBeVisible();
+      expect(await screen.findByText('git.branch')).toBeVisible();
+      expect(screen.queryByText('tags')).not.toBeInTheDocument();
+      expect(fetchInfoSpy2).not.toHaveBeenCalled();
+
+      // 3. SSE event: info becomes empty
+      const instance3 = new Application({
+        ...baseApp,
+        instances: [
+          {
+            ...baseApp.instances[0],
+            version: 5,
+            info: {},
+          },
+        ],
+      }).instances[0];
+      const fetchInfoSpy3 = vi.spyOn(instance3, 'fetchInfo');
+
+      await rerender({ instance: instance3 });
+
+      expect(
+        await screen.findByText('instances.details.info.no_info_provided'),
+      ).toBeVisible();
+      expect(fetchInfoSpy3).not.toHaveBeenCalled();
     });
-    expect(await screen.findByText(/version: 2.0.0/)).toBeVisible();
   });
 });
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-info.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-info.vue
index 4d0aa31d344..b0f58cf9e63 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-info.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-info.vue
@@ -19,7 +19,6 @@
     :id="`info-details-panel__${instance.id}`"
     v-model="panelOpen"
     :title="$t('instances.details.info.title')"
-    :loading="loading"
   >
     <template #title>
       <div class="ml-2 transition-opacity" :class="{ 'opacity-0': panelOpen }">
@@ -27,13 +26,6 @@
       </div>
     </template>
 
-    <sba-alert
-      v-if="error"
-      :error="error"
-      class="border-l-4"
-      :title="$t('term.fetch_failed')"
-    />
-
     <div class="content info -mx-4 -my-3">
       <sba-key-value-table v-if="!isEmptyInfo" :map="info" />
       <p
@@ -46,7 +38,7 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue';
+import { computed, ref } from 'vue';
 
 import SbaAccordion from '@/components/sba-accordion.vue';
 import SbaKeyValueTable from '@/components/sba-key-value-table.vue';
@@ -62,58 +54,10 @@ const props = defineProps({
 });
 
 const panelOpen = ref(true);
-const error = ref(null);
-const loading = ref(false);
-const liveInfo = ref(null);
-const currentInstanceId = ref(null);
-const currentInstanceUpdateKey = ref(null);
-const requestGen = ref(0);
 
-const info = computed(() => formatInfo(liveInfo.value || props.instance.info));
+const info = computed(() => formatInfo(props.instance.info));
 const isEmptyInfo = computed(() => Object.keys(info.value).length <= 0);
 
-async function fetchInfo() {
-  if (props.instance.hasEndpoint('info')) {
-    const gen = ++requestGen.value;
-
-    currentInstanceId.value = props.instance.id;
-    currentInstanceUpdateKey.value =
-      props.instance.version ??
-      props.instance.statusTimestamp ??
-      props.instance.id;
-    loading.value = true;
-    error.value = null;
-
-    try {
-      const res = await props.instance.fetchInfo();
-      // Verify this is still the latest request generation
-      if (gen !== requestGen.value) {
-        return;
-      }
-      liveInfo.value = res.data;
-    } catch (err) {
-      // Stale error - ignore if a newer request was initiated
-      if (gen !== requestGen.value) {
-        return;
-      }
-      error.value = err;
-      console.warn('Fetching info failed:', err);
-    } finally {
-      // Don't clear loading state if new request started
-      if (gen !== requestGen.value) {
-        return;
-      }
-      loading.value = false;
-    }
-  }
-}
-
-function reloadInfo() {
-  // Increment generation to invalidate any in-flight requests
-  requestGen.value++;
-  fetchInfo();
-}
-
 function formatInfo(info) {
   return formatWithDataTypes(info, {
     'build.time': 'date',
@@ -127,15 +71,6 @@ function formatInfo(info) {
     'process.memory.nonHeap.used': 'bytes',
   });
 }
-
-watch(
-  () => [
-    props.instance.id,
-    props.instance.version ?? props.instance.statusTimestamp,
-  ],
-  () => reloadInfo(),
-  { immediate: true },
-);
 </script>
 
 <style lang="css">