diff --git a/spring-boot-admin-docs/src/site/asciidoc/_server-discovery.adoc b/spring-boot-admin-docs/src/site/asciidoc/_server-discovery.adoc
index 0487bf60bbc..4bffc4c5ba3 100644
--- a/spring-boot-admin-docs/src/site/asciidoc/_server-discovery.adoc
+++ b/spring-boot-admin-docs/src/site/asciidoc/_server-discovery.adoc
@@ -1,12 +1,15 @@
 [[spring-cloud-discovery-support]]
 == Spring Cloud Discovery ==
 
-The Spring Boot Admin Server can use Spring Clouds `DiscoveryClient` to discover applications. The advantage is that the clients don't have to include the `spring-boot-admin-starter-client`. You just have to add a `DiscoveryClient` implementation to your admin server - everything else is done by AutoConfiguration.
+The Spring Boot Admin Server can use Spring Clouds `DiscoveryClient` to discover applications.
+The advantage is that the clients don't have to include the `spring-boot-admin-starter-client`.
+You just have to add a `DiscoveryClient` implementation to your admin server - everything else is done by AutoConfiguration.
 
 [[spring-cloud-discovery-static-config]]
 === Static Configuration using SimpleDiscoveryClient ===
 
-Spring Cloud provides a `SimpleDiscoveryClient`. It allows you to specify client applications via static configuration:
+Spring Cloud provides a `SimpleDiscoveryClient`.
+It allows you to specify client applications via static configuration:
 
 [source,xml]
 .pom.xml
@@ -36,14 +39,20 @@ spring:
 ----
 
 === Other DiscoveryClients ===
-Spring Boot Admin supports all other implementations of Spring Cloud's `DiscoveryClient` (https://docs.spring.io/spring-cloud-netflix/docs/current/reference/html/#service-discovery-eureka-clients/[Eureka], https://docs.spring.io/spring-cloud-zookeeper/docs/current/reference/html/#spring-cloud-zookeeper-discovery[Zookeeper], https://docs.spring.io/spring-cloud-consul/docs/current/reference/html/#spring-cloud-consul-discovery[Consul], https://docs.spring.io/spring-cloud-kubernetes/docs/current/reference/html/#discoveryclient-for-kubernetes[Kubernetes], ...). You need to add it to the Spring Boot Admin Server and configure it properly.
+
+Spring Boot Admin supports all other implementations of Spring Cloud's `DiscoveryClient` (https://docs.spring.io/spring-cloud-netflix/docs/current/reference/html/#service-discovery-eureka-clients/[Eureka], https://docs.spring.io/spring-cloud-zookeeper/docs/current/reference/html/#spring-cloud-zookeeper-discovery[Zookeeper], https://docs.spring.io/spring-cloud-consul/docs/current/reference/html/#spring-cloud-consul-discovery[Consul], https://docs.spring.io/spring-cloud-kubernetes/docs/current/reference/html/#discoveryclient-for-kubernetes[Kubernetes], ...).
+You need to add it to the Spring Boot Admin Server and configure it properly.
 An <<getting-started#discover-clients-via-spring-cloud-discovery,example setup using Eureka>> is shown above.
 
 === Converting ServiceInstances ===
 
-The information from the service registry are converted by the `ServiceInstanceConverter`. Spring Boot Admin ships with a default and Eureka converter implementation. The correct one is selected by AutoConfiguration.
+The information from the service registry are converted by the `ServiceInstanceConverter`.
+Spring Boot Admin ships with a default and Eureka converter implementation.
+The correct one is selected by AutoConfiguration.
 
-TIP: You can modify how the information from the registry is used to register the application by using SBA Server configuration options and instance metadata. The values from the metadata takes precedence over the server config. If the plenty of options don't fit your needs you can provide your own `ServiceInstanceConverter`.
+TIP: You can modify how the information from the registry is used to register the application by using SBA Server configuration options and instance metadata.
+The values from the metadata takes precedence over the server config.
+If the plenty of options don't fit your needs you can provide your own `ServiceInstanceConverter`.
 
 NOTE: When using Eureka, the `healthCheckUrl` known to Eureka is used for health-checking, which can be set on your client using `eureka.instance.healthCheckUrl`.
 
@@ -75,6 +84,10 @@ user.password
 | health.path
 | The path is appended to the service URL and will be used for the health-checking. Ignored by the `EurekaServiceInstanceConverter`.
 | `${spring.boot.admin.discovery.converter.health-endpoint}`
+
+| group
+| The group is used to group services in the UI by the group name instead of application name.
+|
 |===
 
 .Discovery configuration options
@@ -111,6 +124,7 @@ user.password
 |===
 
 === CloudFoundry ===
+
 If you are deploying your applications to CloudFoundry then `vcap.application.application_id` and `vcap.application.instance_index` *_must_* be added to the metadata for proper registration of applications with Spring Boot Admin Server.
 Here is a sample configuration for Eureka:
 
diff --git a/spring-boot-admin-server-ui/package.json b/spring-boot-admin-server-ui/package.json
index b82ef21e526..40a111eb0f4 100644
--- a/spring-boot-admin-server-ui/package.json
+++ b/spring-boot-admin-server-ui/package.json
@@ -3,7 +3,7 @@
   "private": true,
   "description": "Spring Boot Admin UI",
   "scripts": {
-    "build": "vite build --emptyOutDir",
+    "build": "vite build --emptyOutDir --sourcemap",
     "build:dev": "NODE_ENV=development vite build --emptyOutDir --sourcemap --mode development",
     "build:watch": "NODE_ENV=development vite build --emptyOutDir --watch --mode development",
     "dev": "vite",
diff --git a/spring-boot-admin-server-ui/src/main/frontend/components/font-awesome-icon.ts b/spring-boot-admin-server-ui/src/main/frontend/components/font-awesome-icon.ts
index 590db17803e..09061925370 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/components/font-awesome-icon.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/components/font-awesome-icon.ts
@@ -21,8 +21,8 @@ import { faStopCircle as farStopCircle } from '@fortawesome/free-regular-svg-ico
 import { faTimesCircle as farTimesCircle } from '@fortawesome/free-regular-svg-icons/faTimesCircle';
 import {
   faAngleDoubleLeft,
-  faCogs,
-  faEye,
+  faCogs, faExpand,
+  faEye, faList,
   faPowerOff,
   faUndoAlt,
 } from '@fortawesome/free-solid-svg-icons';
@@ -91,6 +91,8 @@ library.add(
   faInfoCircle,
   faExclamationCircle,
   faHome,
+  faList,
+  faExpand,
   faMapMarkerAlt,
   faCheckCircle,
   faMinusCircle,
diff --git a/spring-boot-admin-server-ui/src/main/frontend/components/sba-nav/sba-nav-item.vue b/spring-boot-admin-server-ui/src/main/frontend/components/sba-nav/sba-nav-item.vue
index eb2231812c6..12e576c9047 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/components/sba-nav/sba-nav-item.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/components/sba-nav/sba-nav-item.vue
@@ -1,23 +1,26 @@
 <template>
   <a
-    v-if="href"
-    :href="href"
-    :target="target"
-    class="sba-nav-item"
-    rel="noopener noreferrer"
+      v-if="href"
+      :href="href"
+      :target="target"
+      class="sba-nav-item"
+      rel="noopener noreferrer"
   >
-    <slot />
+    <slot/>
   </a>
   <router-link v-else-if="to" :to="to" class="sba-nav-item">
-    <slot />
+    <slot/>
   </router-link>
 
   <div v-else class="sba-nav-item">
-    <slot />
+    <slot/>
   </div>
 </template>
 
 <script lang="ts" setup>
+import {RouteLocationRaw} from "vue-router";
+import {PropType} from "vue";
+
 defineProps({
   href: {
     type: String,
@@ -28,7 +31,7 @@ defineProps({
     default: '_blank',
   },
   to: {
-    type: String,
+    type: Object as PropType<RouteLocationRaw>,
     default: null,
   },
 });
diff --git a/spring-boot-admin-server-ui/src/main/frontend/components/sba-panel.vue b/spring-boot-admin-server-ui/src/main/frontend/components/sba-panel.vue
index bef620afb13..02998049c02 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/components/sba-panel.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/components/sba-panel.vue
@@ -23,9 +23,12 @@
       class="rounded-t flex justify-between px-4 pt-5 pb-5 border-b sm:px-6 items-center bg-white transition-all"
     >
       <h3 class="text-lg leading-6 font-medium text-gray-900">
-        <span v-text="title" />&nbsp;
-        <span v-if="subtitle" class="text-sm text-gray-500" v-text="subtitle" />
-        <slot v-if="'title' in $slots" name="title" />
+        <button @click="$emit('title-click')" class="flex items-center">
+          <slot v-if="'prefix' in $slots" name="prefix" />
+          <span v-text="title" />
+          <span v-if="subtitle" class="ml-2 text-sm text-gray-500 self-end" v-text="subtitle" />
+          <slot v-if="'title' in $slots" name="title" />
+        </button>
       </h3>
 
       <div>
@@ -95,7 +98,7 @@ export default {
       default: false,
     },
   },
-  emits: ['close'],
+  emits: ['close', 'title-click'],
   data() {
     return {
       headerTopValue: 0,
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 869eda9c1f6..cadbbaa1cc6 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
@@ -12,12 +12,6 @@ export default {
     status: {
       type: [HealthStatus, String, Number],
       required: true,
-      validator(value) {
-        return Object.prototype.hasOwnProperty.call(
-          HealthStatus,
-          value.toUpperCase()
-        );
-      },
     },
   },
   computed: {
diff --git a/spring-boot-admin-server-ui/src/main/frontend/composables/useApplicationStore.ts b/spring-boot-admin-server-ui/src/main/frontend/composables/useApplicationStore.ts
index 8a29be00e6d..d3043d3d0f9 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/composables/useApplicationStore.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/composables/useApplicationStore.ts
@@ -1,39 +1,47 @@
-import { ref } from 'vue';
+import {Ref, ref, UnwrapRef} from 'vue';
 
 import ApplicationStore from '../store.js';
+import Application from "@/services/application";
 
 let applicationStore: ApplicationStore | null = null;
-const applications = ref([]);
+const applications = ref([] as Application[]);
 const applicationsInitialized = ref(false);
 const error = ref(null);
 
 export function createApplicationStore() {
-  if (applicationStore) throw new Error('ApplicationStore already created!');
+    if (applicationStore) throw new Error('ApplicationStore already created!');
 
-  applicationStore = new ApplicationStore();
-  return applicationStore;
+    applicationStore = new ApplicationStore();
+    return applicationStore;
 }
 
-export function useApplicationStore() {
-  applicationStore.addEventListener('connected', () => {
-    applicationsInitialized.value = true;
-    error.value = null;
-  });
+type ApplicationStoreValue = {
+    applications: Ref<UnwrapRef<Application[]>>;
+    applicationsInitialized: Ref<boolean>;
+    error: Ref<any>;
+    applicationStore: ApplicationStore;
+}
+
+export function useApplicationStore(): ApplicationStoreValue {
+    applicationStore.addEventListener('connected', () => {
+        applicationsInitialized.value = true;
+        error.value = null;
+    });
 
-  applicationStore.addEventListener('changed', (newApplications) => {
-    applicationsInitialized.value = true;
-    applications.value = newApplications;
-    error.value = null;
-  });
+    applicationStore.addEventListener('changed', (newApplications) => {
+        applicationsInitialized.value = true;
+        applications.value = newApplications;
+        error.value = null;
+    });
 
-  applicationStore.addEventListener('error', (errorResponse) => {
-    applicationsInitialized.value = true;
-    error.value = errorResponse;
-  });
+    applicationStore.addEventListener('error', (errorResponse) => {
+        applicationsInitialized.value = true;
+        error.value = errorResponse;
+    });
 
-  applicationStore.addEventListener('removed', () => {
-    applicationsInitialized.value = false;
-  });
+    applicationStore.addEventListener('removed', () => {
+        applicationsInitialized.value = false;
+    });
 
-  return { applications, applicationsInitialized, error, applicationStore };
+    return {applications, applicationsInitialized, error, applicationStore};
 }
diff --git a/spring-boot-admin-server-ui/src/main/frontend/global.d.ts b/spring-boot-admin-server-ui/src/main/frontend/global.d.ts
index cd66e83d314..d2da6599195 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/global.d.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/global.d.ts
@@ -1,4 +1,4 @@
-import { Component, Raw, RenderFunction } from 'vue';
+import {Component, Raw, RenderFunction} from 'vue';
 
 import ViewRegistry from '@/viewRegistry';
 
@@ -8,6 +8,7 @@ declare global {
   type ApplicationStream = {
     data: any;
   } & MessageEvent;
+
   interface Window {
     SBA: SBASettings;
   }
diff --git a/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.de.json b/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.de.json
index cefad228b5c..403e8c06d1e 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.de.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.de.json
@@ -29,6 +29,7 @@
     "hours": "{count} Stunde | {count} Stunden",
     "instance": "Instanz",
     "instances": "Instanzen",
+    "instances_tc": "{count} Instanz | {count} Instanzen",
     "integer": "Integer",
     "menu": {
       "open": "Menü öffnen"
@@ -42,6 +43,7 @@
     "suppress": "Unterdrücken",
     "time": "Zeit",
     "unsuppress": "Reaktivieren",
+    "no_group": "Keine Gruppe",
     "username": "Username",
     "go_to_previous_page": "Gehe zur vorherigen Seite",
     "go_to_page_n": "Gehe zu Seite {page}",
diff --git a/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.en.json b/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.en.json
index 35ae938d3a1..3aa37595363 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.en.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.en.json
@@ -36,7 +36,7 @@
     "hours": "{count} hour | {count} hours",
     "instance": "Instance",
     "instances": "Instances",
-    "instances_tc": "{n} instance | {n} instances",
+    "instances_tc": "{count} instance | {count} instances",
     "integer": "Integer",
     "menu": {
       "open": "Open menu"
@@ -50,6 +50,7 @@
     "suppress": "Suppress",
     "time": "Time",
     "unsuppress": "Unsuppress",
+    "no_group": "No Group",
     "username": "Username",
     "go_to_previous_page": "Go to previous page",
     "go_to_page_n": "Go to page {page}",
diff --git a/spring-boot-admin-server-ui/src/main/frontend/services/application.ts b/spring-boot-admin-server-ui/src/main/frontend/services/application.ts
index 86c71dadd6c..4271e439ddd 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/services/application.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/services/application.ts
@@ -47,8 +47,11 @@ export const convertBody = (responses) =>
   });
 
 class Application {
-  readonly name: string;
-  readonly instances: Instance[];
+  public readonly name: string;
+  public readonly instances: Instance[];
+  public readonly buildVersion? = {} as {value: string};
+  public readonly status: string;
+  public readonly statusTimestamp: string;
 
   private readonly axios: AxiosInstance;
 
diff --git a/spring-boot-admin-server-ui/src/main/frontend/services/instance.ts b/spring-boot-admin-server-ui/src/main/frontend/services/instance.ts
index 4699768215f..434ffe03bd6 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/services/instance.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/services/instance.ts
@@ -13,411 +13,426 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AxiosInstance } from 'axios';
+import {AxiosInstance} from 'axios';
 import saveAs from 'file-saver';
-import { Observable, concat, from, ignoreElements } from 'rxjs';
+import {concat, from, ignoreElements, Observable} from 'rxjs';
 
-import axios, {
-  redirectOn401,
-  registerErrorToastInterceptor,
-} from '../utils/axios.js';
+import axios, {redirectOn401, registerErrorToastInterceptor,} from '../utils/axios.js';
 import waitForPolyfill from '../utils/eventsource-polyfill';
 import logtail from '../utils/logtail';
 import uri from '../utils/uri';
 
 const actuatorMimeTypes = [
-  'application/vnd.spring-boot.actuator.v2+json',
-  'application/vnd.spring-boot.actuator.v1+json',
-  'application/json',
+    'application/vnd.spring-boot.actuator.v2+json',
+    'application/vnd.spring-boot.actuator.v1+json',
+    'application/json',
 ].join(',');
 
 const isInstanceActuatorRequest = (url: string) =>
-  url.match(/^instances[/][^/]+[/]actuator([/].*)?$/);
+    url.match(/^instances[/][^/]+[/]actuator([/].*)?$/);
 
 class Instance {
-  private readonly id: string;
-  private readonly axios: AxiosInstance;
-  private registration: any;
-  private endpoints: any[];
-
-  constructor({ id, ...instance }) {
-    Object.assign(this, instance);
-    this.id = id;
-    this.axios = axios.create({
-      withCredentials: true,
-      baseURL: uri`instances/${this.id}`,
-      headers: { Accept: actuatorMimeTypes },
-    });
-    this.axios.interceptors.response.use(
-      (response) => response,
-      redirectOn401(
-        (error) =>
-          !isInstanceActuatorRequest(error.config.baseURL + error.config.url)
-      )
-    );
-    registerErrorToastInterceptor(this.axios);
-  }
-
-  get isUnregisterable() {
-    return this.registration.source === 'http-api';
-  }
-
-  static async fetchEvents() {
-    return axios.get(uri`instances/events`, {
-      headers: { Accept: 'application/json' },
-    });
-  }
-
-  static getEventStream() {
-    return concat(
-      from(waitForPolyfill()).pipe(ignoreElements()),
-      Observable.create((observer) => {
-        const eventSource = new EventSource('instances/events');
-        eventSource.onmessage = (message) =>
-          observer.next({
-            ...message,
-            data: JSON.parse(message.data),
-          });
-        eventSource.onerror = (err) => observer.error(err);
-        return () => {
-          eventSource.close();
-        };
-      })
-    );
-  }
-
-  static async get(id) {
-    return axios.get(uri`instances/${id}`, {
-      headers: { Accept: 'application/json' },
-      transformResponse(data) {
+    public readonly id: string;
+    public registration: Registration;
+    public endpoints: any[];
+    public tags: { [key: string]: string }[];
+    public statusTimestamp: string;
+    public buildVersion: string;
+    public statusInfo: StatusInfo;
+    private readonly axios: AxiosInstance;
+
+    constructor({id, ...instance}) {
+        Object.assign(this, instance);
+        this.id = id;
+        this.axios = axios.create({
+            withCredentials: true,
+            baseURL: uri`instances/${this.id}`,
+            headers: {Accept: actuatorMimeTypes},
+        });
+        this.axios.interceptors.response.use(
+            (response) => response,
+            redirectOn401(
+                (error) =>
+                    !isInstanceActuatorRequest(error.config.baseURL + error.config.url)
+            )
+        );
+        registerErrorToastInterceptor(this.axios);
+    }
+
+    get isUnregisterable() {
+        return this.registration.source === 'http-api';
+    }
+
+    static async fetchEvents() {
+        return axios.get(uri`instances/events`, {
+            headers: {Accept: 'application/json'},
+        });
+    }
+
+    static getEventStream() {
+        return concat(
+            from(waitForPolyfill()).pipe(ignoreElements()),
+            Observable.create((observer) => {
+                const eventSource = new EventSource('instances/events');
+                eventSource.onmessage = (message) =>
+                    observer.next({
+                        ...message,
+                        data: JSON.parse(message.data),
+                    });
+                eventSource.onerror = (err) => observer.error(err);
+                return () => {
+                    eventSource.close();
+                };
+            })
+        );
+    }
+
+    static async get(id) {
+        return axios.get(uri`instances/${id}`, {
+            headers: {Accept: 'application/json'},
+            transformResponse(data) {
+                if (!data) {
+                    return data;
+                }
+                const instance = JSON.parse(data);
+                return new Instance(instance);
+            },
+        });
+    }
+
+    static _toMBeans(data) {
         if (!data) {
-          return data;
+            return data;
+        }
+        const raw = JSON.parse(data);
+        return Object.entries(raw.value).map(([domain, mBeans]) => ({
+            domain,
+            mBeans: Object.entries(mBeans).map(([descriptor, mBean]) => ({
+                descriptor: descriptor,
+                ...mBean,
+            })),
+        }));
+    }
+
+    getId() {
+        return this.id;
+    }
+
+    hasEndpoint(endpointId) {
+        return this.endpoints.some((endpoint) => endpoint.id === endpointId);
+    }
+
+    async unregister() {
+        return this.axios.delete('', {
+            headers: {Accept: 'application/json'},
+        });
+    }
+
+    async fetchInfo() {
+        return this.axios.get(uri`actuator/info`);
+    }
+
+    async fetchMetrics() {
+        return this.axios.get(uri`actuator/metrics`);
+    }
+
+    async fetchMetric(metric, tags) {
+        const params = new URLSearchParams();
+        if (tags) {
+            let firstElementDuplicated = false;
+            Object.entries(tags)
+                .filter(([, value]) => typeof value !== 'undefined' && value !== null)
+                .forEach(([name, value]) => {
+                    params.append('tag', `${name}:${value}`);
+
+                    if (!firstElementDuplicated) {
+                        // workaround for tags that contains comma
+                        // take a look at https://github.com/spring-projects/spring-framework/issues/23820#issuecomment-543087878
+                        // If there is single tag specified and name or value contains comma then it will be incorrectly split into several parts
+                        // To bypass it we duplicate first tag.
+                        params.append('tag', `${name}:${value}`);
+                        firstElementDuplicated = true;
+                    }
+                });
+        }
+        return this.axios.get(uri`actuator/metrics/${metric}`, {
+            params,
+        });
+    }
+
+    async fetchHealth() {
+        return await this.axios.get(uri`actuator/health`, {validateStatus: null});
+    }
+
+    async fetchHealthGroup(groupName: string) {
+        return await this.axios.get(uri`actuator/health/${groupName}`, {validateStatus: null});
+    }
+
+    async fetchEnv(name) {
+        return this.axios.get(uri`actuator/env/${name || ''}`);
+    }
+
+    async fetchConfigprops() {
+        return this.axios.get(uri`actuator/configprops`);
+    }
+
+    async hasEnvManagerSupport() {
+        const response = await this.axios.options(uri`actuator/env`);
+        return (
+            response.headers['allow'] && response.headers['allow'].includes('POST')
+        );
+    }
+
+    async resetEnv() {
+        return this.axios.delete(uri`actuator/env`);
+    }
+
+    async setEnv(name, value) {
+        return this.axios.post(
+            uri`actuator/env`,
+            {name, value},
+            {
+                headers: {'Content-Type': 'application/json'},
+            }
+        );
+    }
+
+    async refreshContext() {
+        return this.axios.post(uri`actuator/refresh`);
+    }
+
+    async fetchLiquibase() {
+        return this.axios.get(uri`actuator/liquibase`);
+    }
+
+    async fetchScheduledTasks() {
+        return this.axios.get(uri`actuator/scheduledtasks`);
+    }
+
+    async fetchGatewayGlobalFilters() {
+        return this.axios.get(uri`actuator/gateway/globalfilters`);
+    }
+
+    async addGatewayRoute(route) {
+        return this.axios.post(uri`actuator/gateway/routes/${route.id}`, route, {
+            headers: {'Content-Type': 'application/json'},
+        });
+    }
+
+    async fetchGatewayRoutes() {
+        return this.axios.get(uri`actuator/gateway/routes`);
+    }
+
+    async deleteGatewayRoute(routeId) {
+        return this.axios.delete(uri`actuator/gateway/routes/${routeId}`);
+    }
+
+    async refreshGatewayRoutesCache() {
+        return this.axios.post(uri`actuator/gateway/refresh`);
+    }
+
+    async fetchCaches() {
+        return this.axios.get(uri`actuator/caches`);
+    }
+
+    async clearCaches() {
+        return this.axios.delete(uri`actuator/caches`);
+    }
+
+    async clearCache(name, cacheManager) {
+        return this.axios.delete(uri`actuator/caches/${name}`, {
+            params: {cacheManager: cacheManager},
+        });
+    }
+
+    async fetchFlyway() {
+        return this.axios.get(uri`actuator/flyway`);
+    }
+
+    async fetchLoggers() {
+        return this.axios.get(uri`actuator/loggers`);
+    }
+
+    async configureLogger(name, level) {
+        await this.axios.post(
+            uri`actuator/loggers/${name}`,
+            level === null ? {} : {configuredLevel: level},
+            {
+                headers: {'Content-Type': 'application/json'},
+            }
+        );
+    }
+
+    async fetchHttptrace() {
+        return this.axios.get(uri`actuator/httptrace`);
+    }
+
+    async fetchHttpExchanges() {
+        return this.axios.get(uri`actuator/httpexchanges`);
+    }
+
+    async fetchBeans() {
+        return this.axios.get(uri`actuator/beans`);
+    }
+
+    async fetchThreaddump() {
+        return this.axios.get(uri`actuator/threaddump`);
+    }
+
+    async downloadThreaddump() {
+        const res = await this.axios.get(uri`actuator/threaddump`, {
+            headers: {Accept: 'text/plain'},
+        });
+        const blob = new Blob([res.data], {type: 'text/plain;charset=utf-8'});
+        saveAs(blob, this.registration.name + '-threaddump.txt');
+    }
+
+    async fetchAuditevents({after, type, principal}) {
+        return this.axios.get(uri`actuator/auditevents`, {
+            params: {
+                after: after.toISOString(),
+                type: type || undefined,
+                principal: principal || undefined,
+            },
+        });
+    }
+
+    async fetchSessionsByUsername(username) {
+        return this.axios.get(uri`actuator/sessions`, {
+            params: {
+                username: username || undefined,
+            },
+        });
+    }
+
+    async fetchSession(sessionId) {
+        return this.axios.get(uri`actuator/sessions/${sessionId}`);
+    }
+
+    async deleteSession(sessionId) {
+        return this.axios.delete(uri`actuator/sessions/${sessionId}`);
+    }
+
+    async fetchStartup() {
+        const optionsResponse = await this.axios.options(uri`actuator/startup`);
+        if (
+            optionsResponse.headers.allow &&
+            optionsResponse.headers.allow.includes('GET')
+        ) {
+            return this.axios.get(uri`actuator/startup`);
         }
-        const instance = JSON.parse(data);
-        return new Instance(instance);
-      },
-    });
-  }
-
-  static _toMBeans(data) {
-    if (!data) {
-      return data;
-    }
-    const raw = JSON.parse(data);
-    return Object.entries(raw.value).map(([domain, mBeans]) => ({
-      domain,
-      mBeans: Object.entries(mBeans).map(([descriptor, mBean]) => ({
-        descriptor: descriptor,
-        ...mBean,
-      })),
-    }));
-  }
-
-  getId() {
-    return this.id;
-  }
-
-  hasEndpoint(endpointId) {
-    return this.endpoints.some((endpoint) => endpoint.id === endpointId);
-  }
-
-  async unregister() {
-    return this.axios.delete('', {
-      headers: { Accept: 'application/json' },
-    });
-  }
-
-  async fetchInfo() {
-    return this.axios.get(uri`actuator/info`);
-  }
-
-  async fetchMetrics() {
-    return this.axios.get(uri`actuator/metrics`);
-  }
-
-  async fetchMetric(metric, tags) {
-    const params = new URLSearchParams();
-    if (tags) {
-      let firstElementDuplicated = false;
-      Object.entries(tags)
-        .filter(([, value]) => typeof value !== 'undefined' && value !== null)
-        .forEach(([name, value]) => {
-          params.append('tag', `${name}:${value}`);
-
-          if (!firstElementDuplicated) {
-            // workaround for tags that contains comma
-            // take a look at https://github.com/spring-projects/spring-framework/issues/23820#issuecomment-543087878
-            // If there is single tag specified and name or value contains comma then it will be incorrectly split into several parts
-            // To bypass it we duplicate first tag.
-            params.append('tag', `${name}:${value}`);
-            firstElementDuplicated = true;
-          }
+
+        return this.axios.post(uri`actuator/startup`);
+    }
+
+    streamLogfile(interval) {
+        return logtail(
+            (opt) => this.axios.get(uri`actuator/logfile`, opt),
+            interval
+        );
+    }
+
+    async listMBeans() {
+        return this.axios.get(uri`actuator/jolokia/list`, {
+            headers: {Accept: 'application/json'},
+            params: {canonicalNaming: false},
+            transformResponse: Instance._toMBeans,
         });
     }
-    return this.axios.get(uri`actuator/metrics/${metric}`, {
-      params,
-    });
-  }
-
-  async fetchHealth() {
-    return await this.axios.get(uri`actuator/health`, { validateStatus: null });
-  }
-
-  async fetchHealthGroup(groupName: string) {
-    return await this.axios.get(uri`actuator/health/${groupName}`, { validateStatus: null });
-  }
-
-  async fetchEnv(name) {
-    return this.axios.get(uri`actuator/env/${name || ''}`);
-  }
-
-  async fetchConfigprops() {
-    return this.axios.get(uri`actuator/configprops`);
-  }
-
-  async hasEnvManagerSupport() {
-    const response = await this.axios.options(uri`actuator/env`);
-    return (
-      response.headers['allow'] && response.headers['allow'].includes('POST')
-    );
-  }
-
-  async resetEnv() {
-    return this.axios.delete(uri`actuator/env`);
-  }
-
-  async setEnv(name, value) {
-    return this.axios.post(
-      uri`actuator/env`,
-      { name, value },
-      {
-        headers: { 'Content-Type': 'application/json' },
-      }
-    );
-  }
-
-  async refreshContext() {
-    return this.axios.post(uri`actuator/refresh`);
-  }
-
-  async fetchLiquibase() {
-    return this.axios.get(uri`actuator/liquibase`);
-  }
-
-  async fetchScheduledTasks() {
-    return this.axios.get(uri`actuator/scheduledtasks`);
-  }
-
-  async fetchGatewayGlobalFilters() {
-    return this.axios.get(uri`actuator/gateway/globalfilters`);
-  }
-
-  async addGatewayRoute(route) {
-    return this.axios.post(uri`actuator/gateway/routes/${route.id}`, route, {
-      headers: { 'Content-Type': 'application/json' },
-    });
-  }
-
-  async fetchGatewayRoutes() {
-    return this.axios.get(uri`actuator/gateway/routes`);
-  }
-
-  async deleteGatewayRoute(routeId) {
-    return this.axios.delete(uri`actuator/gateway/routes/${routeId}`);
-  }
-
-  async refreshGatewayRoutesCache() {
-    return this.axios.post(uri`actuator/gateway/refresh`);
-  }
-
-  async fetchCaches() {
-    return this.axios.get(uri`actuator/caches`);
-  }
-
-  async clearCaches() {
-    return this.axios.delete(uri`actuator/caches`);
-  }
-
-  async clearCache(name, cacheManager) {
-    return this.axios.delete(uri`actuator/caches/${name}`, {
-      params: { cacheManager: cacheManager },
-    });
-  }
-
-  async fetchFlyway() {
-    return this.axios.get(uri`actuator/flyway`);
-  }
-
-  async fetchLoggers() {
-    return this.axios.get(uri`actuator/loggers`);
-  }
-
-  async configureLogger(name, level) {
-    await this.axios.post(
-      uri`actuator/loggers/${name}`,
-      level === null ? {} : { configuredLevel: level },
-      {
-        headers: { 'Content-Type': 'application/json' },
-      }
-    );
-  }
-
-  async fetchHttptrace() {
-    return this.axios.get(uri`actuator/httptrace`);
-  }
-
-  async fetchHttpExchanges() {
-    return this.axios.get(uri`actuator/httpexchanges`);
-  }
-
-  async fetchBeans() {
-    return this.axios.get(uri`actuator/beans`);
-  }
-
-  async fetchThreaddump() {
-    return this.axios.get(uri`actuator/threaddump`);
-  }
-
-  async downloadThreaddump() {
-    const res = await this.axios.get(uri`actuator/threaddump`, {
-      headers: { Accept: 'text/plain' },
-    });
-    const blob = new Blob([res.data], { type: 'text/plain;charset=utf-8' });
-    saveAs(blob, this.registration.name + '-threaddump.txt');
-  }
-
-  async fetchAuditevents({ after, type, principal }) {
-    return this.axios.get(uri`actuator/auditevents`, {
-      params: {
-        after: after.toISOString(),
-        type: type || undefined,
-        principal: principal || undefined,
-      },
-    });
-  }
-
-  async fetchSessionsByUsername(username) {
-    return this.axios.get(uri`actuator/sessions`, {
-      params: {
-        username: username || undefined,
-      },
-    });
-  }
-
-  async fetchSession(sessionId) {
-    return this.axios.get(uri`actuator/sessions/${sessionId}`);
-  }
-
-  async deleteSession(sessionId) {
-    return this.axios.delete(uri`actuator/sessions/${sessionId}`);
-  }
-
-  async fetchStartup() {
-    const optionsResponse = await this.axios.options(uri`actuator/startup`);
-    if (
-      optionsResponse.headers.allow &&
-      optionsResponse.headers.allow.includes('GET')
-    ) {
-      return this.axios.get(uri`actuator/startup`);
-    }
-
-    return this.axios.post(uri`actuator/startup`);
-  }
-
-  streamLogfile(interval) {
-    return logtail(
-      (opt) => this.axios.get(uri`actuator/logfile`, opt),
-      interval
-    );
-  }
-
-  async listMBeans() {
-    return this.axios.get(uri`actuator/jolokia/list`, {
-      headers: { Accept: 'application/json' },
-      params: { canonicalNaming: false },
-      transformResponse: Instance._toMBeans,
-    });
-  }
-
-  async readMBeanAttributes(domain, mBean) {
-    const body = {
-      type: 'read',
-      mbean: `${domain}:${mBean}`,
-      config: { ignoreErrors: true },
-    };
-    return this.axios.post(uri`actuator/jolokia`, body, {
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json',
-      },
-    });
-  }
-
-  async writeMBeanAttribute(domain, mBean, attribute, value) {
-    const body = {
-      type: 'write',
-      mbean: `${domain}:${mBean}`,
-      attribute,
-      value,
-    };
-    return this.axios.post(uri`actuator/jolokia`, body, {
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json',
-      },
-    });
-  }
-
-  async invokeMBeanOperation(domain, mBean, operation, args) {
-    const body = {
-      type: 'exec',
-      mbean: `${domain}:${mBean}`,
-      operation,
-      arguments: args,
-    };
-    return this.axios.post(uri`actuator/jolokia`, body, {
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json',
-      },
-    });
-  }
-
-  async fetchMappings() {
-    return this.axios.get(uri`actuator/mappings`);
-  }
-
-  async fetchQuartzJobs() {
-    return this.axios.get(uri`actuator/quartz/jobs`, {
-      headers: { Accept: 'application/json' },
-    });
-  }
-
-  async fetchQuartzJob(group, name) {
-    return this.axios.get(uri`actuator/quartz/jobs/${group}/${name}`, {
-      headers: { Accept: 'application/json' },
-    });
-  }
-
-  async fetchQuartzTriggers() {
-    return this.axios.get(uri`actuator/quartz/triggers`, {
-      headers: { Accept: 'application/json' },
-    });
-  }
-
-  async fetchQuartzTrigger(group, name) {
-    return this.axios.get(uri`actuator/quartz/triggers/${group}/${name}`, {
-      headers: { Accept: 'application/json' },
-    });
-  }
-
-  shutdown() {
-    return this.axios.post(uri`actuator/shutdown`);
-  }
-
-  restart() {
-    return this.axios.post(uri`actuator/restart`);
-  }
+
+    async readMBeanAttributes(domain, mBean) {
+        const body = {
+            type: 'read',
+            mbean: `${domain}:${mBean}`,
+            config: {ignoreErrors: true},
+        };
+        return this.axios.post(uri`actuator/jolokia`, body, {
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+        });
+    }
+
+    async writeMBeanAttribute(domain, mBean, attribute, value) {
+        const body = {
+            type: 'write',
+            mbean: `${domain}:${mBean}`,
+            attribute,
+            value,
+        };
+        return this.axios.post(uri`actuator/jolokia`, body, {
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+        });
+    }
+
+    async invokeMBeanOperation(domain, mBean, operation, args) {
+        const body = {
+            type: 'exec',
+            mbean: `${domain}:${mBean}`,
+            operation,
+            arguments: args,
+        };
+        return this.axios.post(uri`actuator/jolokia`, body, {
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+        });
+    }
+
+    async fetchMappings() {
+        return this.axios.get(uri`actuator/mappings`);
+    }
+
+    async fetchQuartzJobs() {
+        return this.axios.get(uri`actuator/quartz/jobs`, {
+            headers: {Accept: 'application/json'},
+        });
+    }
+
+    async fetchQuartzJob(group, name) {
+        return this.axios.get(uri`actuator/quartz/jobs/${group}/${name}`, {
+            headers: {Accept: 'application/json'},
+        });
+    }
+
+    async fetchQuartzTriggers() {
+        return this.axios.get(uri`actuator/quartz/triggers`, {
+            headers: {Accept: 'application/json'},
+        });
+    }
+
+    async fetchQuartzTrigger(group, name) {
+        return this.axios.get(uri`actuator/quartz/triggers/${group}/${name}`, {
+            headers: {Accept: 'application/json'},
+        });
+    }
+
+    shutdown() {
+        return this.axios.post(uri`actuator/shutdown`);
+    }
+
+    restart() {
+        return this.axios.post(uri`actuator/restart`);
+    }
 }
 
 export default Instance;
+
+type Registration = {
+    name: string
+    managementUrl?: string
+    healthUrl: string
+    serviceUrl?: string
+    source: string
+    metadata?: { [key: string]: string } []
+}
+
+type StatusInfo = {
+    status: string
+    details: { [key: string]: string }
+}
diff --git a/spring-boot-admin-server-ui/src/main/frontend/services/notification-filter.ts b/spring-boot-admin-server-ui/src/main/frontend/services/notification-filter.ts
index 225ef3e04df..16d4fe8f5fb 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/services/notification-filter.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/services/notification-filter.ts
@@ -20,6 +20,11 @@ import axios from '@/utils/axios';
 import uri from '@/utils/uri';
 
 class NotificationFilter {
+  private id: string;
+  private applicationName: string;
+  private instanceId: string;
+  private expiry: moment.Moment | null;
+
   constructor({ expiry, ...filter }) {
     Object.assign(this, filter);
     this.expiry = expiry ? moment(expiry) : null;
@@ -42,11 +47,11 @@ class NotificationFilter {
   }
 
   get isApplicationFilter() {
-    return 'applicationName' in this;
+    return this.applicationName != null;
   }
 
   get isInstanceFilter() {
-    return 'instanceId' in this;
+    return this.instanceId != null;
   }
 
   async delete() {
diff --git a/spring-boot-admin-server-ui/src/main/frontend/store.ts b/spring-boot-admin-server-ui/src/main/frontend/store.ts
index 133b0c528c8..6d0df303cd4 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/store.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/store.ts
@@ -143,4 +143,8 @@ export default class ApplicationStore {
       }
     }
   }
+
+  findApplicationByInstanceId(instanceId: string) {
+    return findApplicationForInstance(this.applications, instanceId);
+  }
 }
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/applications/ActionHandler.ts b/spring-boot-admin-server-ui/src/main/frontend/views/applications/ActionHandler.ts
new file mode 100644
index 00000000000..d9e868e6a64
--- /dev/null
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/applications/ActionHandler.ts
@@ -0,0 +1,164 @@
+import Application from "@/services/application";
+import Instance from "@/services/instance";
+
+export interface ActionHandler {
+    restart(item: any): Promise<void>
+
+    unregister(item: any): Promise<void>
+
+    shutdown(item: any): Promise<void>
+}
+
+export class InstanceActionHandler implements ActionHandler {
+    constructor(private $sbaModal: any, private t: any, private notificationCenter: any) {
+    }
+
+    async unregister(item: Instance) {
+        const isConfirmed = await this.$sbaModal.confirm(
+            this.t('applications.actions.unregister'),
+            this.t('instances.unregister', {name: item.id})
+        );
+        if (!isConfirmed) {
+            return;
+        }
+
+        try {
+            await item.unregister();
+            this.notificationCenter.success(
+                this.t('instances.unregister_successful', {name: item.id})
+            );
+        } catch (error) {
+            this.notificationCenter.error(
+                this.t('instances.unregister_failed', {
+                    name: item.id || item.name,
+                    error: error.response.status,
+                })
+            );
+        }
+    }
+
+    async shutdown(item: Instance) {
+        const isConfirmed = await this.$sbaModal.confirm(
+            this.t('applications.actions.shutdown'),
+            this.t('instances.shutdown', {name: item.id})
+        );
+        if(!isConfirmed) {
+            return;
+        }
+
+        try {
+            await item.shutdown();
+            this.notificationCenter.success(
+                this.t('instances.shutdown_successful', {name: item.id})
+            );
+        } catch (error) {
+            this.notificationCenter.error(
+                this.t('instances.shutdown_failed', {
+                    name: item.id || item.name,
+                    error: error.response.status,
+                })
+            );
+        }
+    }
+
+    async restart(item: Instance) {
+        const isConfirmed = await this.$sbaModal.confirm(
+            this.t('applications.actions.restart'),
+            this.t('instances.restart', {name: item.id})
+        );
+        if (!isConfirmed) {
+            return;
+        }
+
+        try {
+            await item.restart();
+            this.notificationCenter.success(
+                this.t('instances.restarted', {name: item.id})
+            );
+        } catch (error) {
+            this.notificationCenter.error(
+                this.t('instances.restart_failed', {
+                    name: item.id || item.name,
+                    error: error.response.status,
+                })
+            );
+        }
+    }
+}
+
+export class ApplicationActionHandler implements ActionHandler {
+    constructor(private $sbaModal: any, private t: any, private notificationCenter: any) {
+    }
+
+    async restart(application: Application) {
+        const isConfirmed = await this.$sbaModal.confirm(
+            this.t('applications.actions.restart'),
+            this.t('applications.restart', {name: application.name})
+        );
+        if (!isConfirmed) {
+            return;
+        }
+
+        try {
+            await application.restart();
+            this.notificationCenter.success(
+                this.t('applications.restarted', {name: application.name})
+            );
+        } catch (error) {
+            this.notificationCenter.error(
+                this.t('applications.restart_failed', {
+                    name: application.name,
+                    error: error.response.status,
+                })
+            );
+        }
+    }
+
+    async shutdown(application: Application) {
+        const isConfirmed = await this.$sbaModal.confirm(
+            this.t('applications.actions.shutdown'),
+            this.t('applications.shutdown', {name: application.name})
+        );
+        if (!isConfirmed) {
+            return;
+        }
+
+        try {
+            await application.shutdown();
+            this.notificationCenter.success(
+                this.t('applications.shutdown_successful', {name: application.name})
+            );
+        } catch (error) {
+            this.notificationCenter.error(
+                this.t('applications.shutdown_failed', {
+                    name: application.name,
+                    error: error.response.status,
+                })
+            );
+        }
+    }
+
+    async unregister(application: Application) {
+        const isConfirmed = await this.$sbaModal.confirm(
+            this.t('applications.actions.unregister'),
+            this.t('applications.unregister', {name: application.name})
+        );
+        if (!isConfirmed) {
+            return;
+        }
+
+        try {
+            await application.unregister();
+            this.notificationCenter.success(
+                this.t('applications.unregister_successful', {name: application.name})
+            );
+        } catch (error) {
+            this.notificationCenter.error(
+                this.t('applications.unregister_failed', {
+                    name: application.name,
+                    error: error.response.status,
+                })
+            );
+        }
+    }
+}
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/applications/ApplicationListItemAction.spec.ts b/spring-boot-admin-server-ui/src/main/frontend/views/applications/ApplicationListItemAction.spec.ts
new file mode 100644
index 00000000000..f530871ca16
--- /dev/null
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/applications/ApplicationListItemAction.spec.ts
@@ -0,0 +1,153 @@
+/*
+ * Copyright 2014-2021 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
+ *
+ *     http://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.
+ */
+import userEvent from '@testing-library/user-event';
+import {screen, waitFor} from '@testing-library/vue';
+import {cloneDeep} from 'lodash-es';
+import {beforeAll, beforeEach, describe, expect, it, vi} from 'vitest';
+
+import Application from '../../services/application';
+
+import {applications} from '@/mocks/applications/data';
+import {render} from '@/test-utils';
+import ApplicationsListItem from '@/views/applications/ApplicationListItemAction';
+import {server} from "@/mocks/server";
+import {rest} from "msw";
+import Instance from "@/services/instance";
+
+async function clickConfirmModal() {
+    await waitFor(() => {
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+    });
+
+    const buttonOK = screen.queryByRole('button', {name: 'term.ok'});
+    await userEvent.click(buttonOK);
+}
+
+describe('ApplicationListItemAction', () => {
+    let application: Application;
+    let instance: Instance;
+
+    beforeAll(() => {
+        server.use(
+            // Instances
+            rest.delete('/instances/:instanceId', (req, res, ctx) => {
+                return res(ctx.status(200), ctx.json({}));
+            }),
+            rest.post('/instances/:instanceId/actuator/restart', (req, res, ctx) => {
+                return res(ctx.status(200), ctx.json({}));
+            }),
+            rest.post('/instances/:instanceId/actuator/shutdown', (req, res, ctx) => {
+                return res(ctx.status(200), ctx.json({}));
+            }),
+            // Applications
+            rest.delete('/applications/:name', (req, res, ctx) => {
+                return res(ctx.status(200), ctx.json({}));
+            }),
+            rest.post('/applications/:name/actuator/restart', (req, res, ctx) => {
+                return res(ctx.status(200), ctx.json({}));
+            }),
+            rest.post('/applications/:name/actuator/shutdown', (req, res, ctx) => {
+                return res(ctx.status(200), ctx.json({}));
+            }),
+        )
+    })
+
+    beforeEach(() => {
+        application = new Application(cloneDeep(applications[0]));
+        instance = application.instances[0];
+    })
+
+    describe('unregister', () => {
+        it('on instance', async () => {
+            const spy = vi.spyOn(instance, 'unregister');
+
+            render(ApplicationsListItem, {
+                props: {item: instance},
+            });
+
+            await userEvent.click(screen.getByTitle('Unregister'));
+            await clickConfirmModal();
+
+            expect(spy).toHaveBeenCalledOnce();
+        });
+
+        it('on application', async () => {
+            const spy = vi.spyOn(application, 'unregister');
+
+            render(ApplicationsListItem, {
+                props: {item: application},
+            });
+
+            await userEvent.click(screen.getByTitle('Unregister'));
+            await clickConfirmModal();
+
+            expect(spy).toHaveBeenCalledOnce();
+        });
+    });
+
+    describe('restart', () => {
+        it('on instance', async () => {
+            const spy = vi.spyOn(instance, 'restart');
+
+            render(ApplicationsListItem, {
+                props: {item: instance},
+            });
+
+            await userEvent.click(screen.getByTitle('Restart'));
+            await clickConfirmModal();
+
+            expect(spy).toHaveBeenCalledOnce();
+        });
+
+        it('on application', async () => {
+            const spy = vi.spyOn(application, 'restart');
+            render(ApplicationsListItem, {
+                props: {item: application},
+            });
+
+            await userEvent.click(screen.getByTitle('Restart'));
+            await clickConfirmModal();
+
+            expect(spy).toHaveBeenCalledOnce();
+        });
+    });
+
+    describe('shutdown', () => {
+        it('on application', async () => {
+            const spy = vi.spyOn(application, 'shutdown');
+            render(ApplicationsListItem, {
+                props: {item: application},
+            });
+
+            await userEvent.click(screen.getByTitle('Shutdown'));
+            await clickConfirmModal();
+
+            expect(spy).toHaveBeenCalledOnce();
+        });
+
+        it('on instance', async () => {
+            const spy = vi.spyOn(instance, 'shutdown');
+            render(ApplicationsListItem, {
+                props: {item: instance},
+            });
+
+            await userEvent.click(await screen.getByTitle('Shutdown'));
+            await clickConfirmModal();
+
+            expect(spy).toHaveBeenCalledOnce();
+        });
+    });
+});
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/applications/ApplicationListItemAction.vue b/spring-boot-admin-server-ui/src/main/frontend/views/applications/ApplicationListItemAction.vue
new file mode 100644
index 00000000000..2049ddf34e0
--- /dev/null
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/applications/ApplicationListItemAction.vue
@@ -0,0 +1,98 @@
+<template>
+  <sba-button-group class="application-list-item__header__actions text-right">
+    <router-link v-slot="{ navigate }" :to="journalLink" custom>
+      <sba-button
+          :title="$t('applications.actions.journal')"
+          @click.stop="navigate"
+      >
+        <font-awesome-icon icon="history"/>
+      </sba-button>
+    </router-link>
+    <sba-button
+        v-if="hasNotificationFiltersSupport"
+        :id="`nf-settings-${item.name || item.id}`"
+        :title="$t('applications.actions.notification_filters')"
+        @click.stop="$emit('filter-settings', item)"
+    >
+      <font-awesome-icon
+          :icon="hasActiveNotificationFilter ? 'bell-slash' : 'bell'"
+      />
+    </sba-button>
+    <sba-button
+        v-if="item.isUnregisterable"
+        class="btn-unregister"
+        :title="$t('applications.actions.unregister')"
+        @click.stop="actionHandler.unregister(item)"
+    >
+      <font-awesome-icon :icon="'trash'"/>
+    </sba-button>
+    <sba-button
+        v-if="item.hasEndpoint('restart')"
+        :title="$t('applications.actions.restart')"
+        @click.stop="actionHandler.restart(item)"
+    >
+      <font-awesome-icon icon="undo-alt"/>
+    </sba-button>
+    <sba-button
+        v-if="item.hasEndpoint('shutdown')"
+        :title="$t('applications.actions.shutdown')"
+        class="is-danger btn-shutdown"
+        @click.stop="actionHandler.shutdown(item)"
+    >
+      <font-awesome-icon :icon="['fa', 'power-off']"/>
+    </sba-button>
+  </sba-button-group>
+</template>
+
+<script lang="ts" setup>
+import Application from "@/services/application";
+import Instance from "@/services/instance";
+import {RouteLocationNamedRaw} from "vue-router";
+import {ActionHandler, ApplicationActionHandler, InstanceActionHandler} from "@/views/applications/ActionHandler";
+import {useI18n} from "vue-i18n";
+import {useNotificationCenter} from "@stekoe/vue-toast-notificationcenter";
+import {inject} from "@vue/runtime-core";
+
+const $sbaModal = inject('$sbaModal');
+const {t} = useI18n();
+const notificationCenter = useNotificationCenter({});
+
+const props = defineProps({
+  item: {
+    type: [Application, Instance],
+    required: true,
+  },
+  hasActiveNotificationFilter: {
+    type: Boolean,
+    default: false,
+  },
+  hasNotificationFiltersSupport: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+let journalLink: RouteLocationNamedRaw;
+let actionHandler: ActionHandler;
+if (props.item instanceof Application) {
+  actionHandler = new ApplicationActionHandler($sbaModal, t, notificationCenter);
+  journalLink = {
+    name: 'journal',
+    query: {application: props.item.name},
+  };
+} else if(props.item instanceof Instance) {
+  actionHandler = new InstanceActionHandler($sbaModal, t, notificationCenter);
+  journalLink = {name: 'journal', query: {instanceId: props.item.id}};
+}
+</script>
+
+<style scoped>
+.application-list-item__header__actions {
+  @apply hidden lg:inline-flex p-1 bg-black/5 rounded-lg;
+}
+
+.btn-shutdown,
+.btn-unregister {
+  @apply ml-1 !important;
+}
+</style>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/applications/application-notification-center.vue b/spring-boot-admin-server-ui/src/main/frontend/views/applications/ApplicationNotificationCenter.vue
similarity index 99%
rename from spring-boot-admin-server-ui/src/main/frontend/views/applications/application-notification-center.vue
rename to spring-boot-admin-server-ui/src/main/frontend/views/applications/ApplicationNotificationCenter.vue
index d2af3f4aeec..3d1486e601d 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/applications/application-notification-center.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/applications/ApplicationNotificationCenter.vue
@@ -8,7 +8,7 @@
           ? t('applications.actions.notification_filters')
           : t('applications.notification_filter.none')
       "
-      class="mr-1"
+      class="mr-1 h-full"
     >
       <font-awesome-icon
         :icon="notificationFiltersLength > 0 ? 'bell-slash' : 'bell'"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/applications/application-stats.vue b/spring-boot-admin-server-ui/src/main/frontend/views/applications/ApplicationStats.vue
similarity index 100%
rename from spring-boot-admin-server-ui/src/main/frontend/views/applications/application-stats.vue
rename to spring-boot-admin-server-ui/src/main/frontend/views/applications/ApplicationStats.vue
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/applications/application-status-hero.vue b/spring-boot-admin-server-ui/src/main/frontend/views/applications/ApplicationStatusHero.vue
similarity index 98%
rename from spring-boot-admin-server-ui/src/main/frontend/views/applications/application-status-hero.vue
rename to spring-boot-admin-server-ui/src/main/frontend/views/applications/ApplicationStatusHero.vue
index 34cb5efd7dc..94610254266 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/applications/application-status-hero.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/applications/ApplicationStatusHero.vue
@@ -49,7 +49,6 @@ const options = {
 };
 
 export default {
-  name: 'ApplicationStatusHero',
   setup() {
     const { applications } = useApplicationStore();
     return { applications };
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/applications/InstancesList.vue b/spring-boot-admin-server-ui/src/main/frontend/views/applications/InstancesList.vue
new file mode 100644
index 00000000000..a954b818b23
--- /dev/null
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/applications/InstancesList.vue
@@ -0,0 +1,95 @@
+<!--
+  - Copyright 2014-2018 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
+  -
+  -     http://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.
+  -->
+
+<template>
+  <ul>
+    <li
+        v-for="instance in instances"
+        :key="instance.id"
+        :data-testid="instance.id"
+        class="flex items-center hover:bg-gray-100 p-2 pr-6"
+        @click.stop="showDetails(instance)"
+    >
+      <div class="pr-3 md:w-16 text-center">
+        <sba-status
+            :date="instance.statusTimestamp"
+            :status="instance.statusInfo.status"
+        />
+      </div>
+      <div class="flex-auto xl:flex-1 xl:w-1/4 truncate">
+        <a
+            :href="
+          instance.registration.serviceUrl || instance.registration.healthUrl
+        "
+            @click.stop
+            v-text="
+          instance.registration.serviceUrl || instance.registration.healthUrl
+        "
+        />
+        <sba-tag class="ml-2" v-if="instance.registration.metadata?.['group']"
+                 :value="instance.registration.metadata?.['group']" small/>
+        <br/>
+        <span class="text-sm italic" v-text="instance.id"/>
+      </div>
+      <div class="hidden xl:block w-1/4 overflow-x-scroll">
+        <sba-tags :small="true" :tags="instance.tags" :wrap="false"/>
+      </div>
+      <div
+          class="hidden xl:block w-2/12 text-center"
+          v-text="instance.buildVersion"
+      />
+      <div class="hidden md:block flex-1 text-right">
+        <slot :instance="instance" name="actions"/>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import Instance from "@/services/instance";
+import {useRouter} from "vue-router";
+import {PropType} from "vue";
+
+const router = useRouter();
+
+const props = defineProps({
+  instances: {
+    type: Object as PropType<Array<Instance>>,
+    default: () => [],
+  },
+  showNotificationSettings: {
+    type: Boolean,
+    default: false,
+  },
+  hasActiveNotificationFilter: {
+    type: Function,
+    default: () => false,
+  },
+})
+
+const showDetails = (instance: Instance) => {
+  router.push({
+    name: 'instances/details',
+    params: {instanceId: instance.id},
+  });
+}
+</script>
+
+<style lang="css">
+.instances-list td {
+  vertical-align: middle;
+}
+</style>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/applications/notification-filter-settings.vue b/spring-boot-admin-server-ui/src/main/frontend/views/applications/NotificationFilterSettings.vue
similarity index 99%
rename from spring-boot-admin-server-ui/src/main/frontend/views/applications/notification-filter-settings.vue
rename to spring-boot-admin-server-ui/src/main/frontend/views/applications/NotificationFilterSettings.vue
index 6e5ccafdd44..745599cd8a7 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/applications/notification-filter-settings.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/applications/NotificationFilterSettings.vue
@@ -15,7 +15,7 @@
   -->
 
 <template>
-  <sba-panel class="shadow-lg">
+  <sba-panel class="shadow-xl">
     <template v-if="!activeFilter">
       <div class="field">
         <p class="control has-inline-text">
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/applications/application-list-item-action.vue b/spring-boot-admin-server-ui/src/main/frontend/views/applications/application-list-item-action.vue
deleted file mode 100644
index e040b7d4855..00000000000
--- a/spring-boot-admin-server-ui/src/main/frontend/views/applications/application-list-item-action.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<template>
-  <sba-button-group class="application-list-item__header__actions text-right">
-    <router-link v-slot="{ navigate }" :to="journalLink" custom>
-      <sba-button
-        :title="$t('applications.actions.journal')"
-        @click.stop="navigate"
-      >
-        <font-awesome-icon icon="history" />
-      </sba-button>
-    </router-link>
-    <sba-button
-      v-if="hasNotificationFiltersSupport"
-      :id="`nf-settings-${item.name || item.id}`"
-      :title="$t('applications.actions.notification_filters')"
-      @click.stop="$emit('filter-settings', item)"
-    >
-      <font-awesome-icon
-        :icon="hasActiveNotificationFilter ? 'bell-slash' : 'bell'"
-      />
-    </sba-button>
-    <sba-button
-      v-if="item.isUnregisterable"
-      class="btn-unregister"
-      :title="$t('applications.actions.unregister')"
-      @click.stop="$emit('unregister', item)"
-    >
-      <font-awesome-icon :icon="'trash'" />
-    </sba-button>
-    <sba-button
-      v-if="item.hasEndpoint('restart')"
-      :title="$t('applications.actions.restart')"
-      @click.stop="$emit('restart', item)"
-    >
-      <font-awesome-icon icon="undo-alt" />
-    </sba-button>
-    <sba-button
-      v-if="item.hasEndpoint('shutdown')"
-      :title="$t('applications.actions.shutdown')"
-      class="is-danger btn-shutdown"
-      @click.stop="$emit('shutdown', item)"
-    >
-      <font-awesome-icon :icon="['fa', 'power-off']" />
-    </sba-button>
-  </sba-button-group>
-</template>
-<script>
-import Application from '@/services/application';
-import Instance from '@/services/instance';
-
-export default {
-  name: 'ApplicationListItemActions',
-  props: {
-    item: {
-      type: [Application, Instance],
-      required: true,
-    },
-    hasActiveNotificationFilter: {
-      type: Boolean,
-      default: false,
-    },
-    hasNotificationFiltersSupport: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['filter-settings', 'unregister', 'shutdown', 'restart'],
-  setup(props) {
-    let isApplication = props.item instanceof Application;
-
-    let journalLink;
-    if (isApplication) {
-      journalLink = {
-        name: 'journal',
-        query: { application: props.item.name },
-      };
-    } else {
-      journalLink = { name: 'journal', query: { instanceId: props.item.id } };
-    }
-
-    return {
-      journalLink,
-      isApplication,
-    };
-  },
-};
-</script>
-
-<style scoped>
-.application-list-item__header__actions {
-  @apply hidden lg:inline-flex p-1 bg-black/5 rounded-lg;
-}
-
-.btn-shutdown,
-.btn-unregister {
-  @apply ml-1 !important;
-}
-</style>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/applications/applications-list-item-summary.vue b/spring-boot-admin-server-ui/src/main/frontend/views/applications/applications-list-item-summary.vue
deleted file mode 100644
index 4b5981ff592..00000000000
--- a/spring-boot-admin-server-ui/src/main/frontend/views/applications/applications-list-item-summary.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<!--
-  - Copyright 2014-2018 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
-  -
-  -     http://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.
-  -->
-
-<template>
-  <div class="application-summary">
-    <div class="pr-3 text-center">
-      <sba-status :status="application.status" />
-    </div>
-    <div class="flex-1">
-      <div class="font-semibold" v-text="application.name" />
-      <small>
-        <a
-          v-if="application.instances.length === 1"
-          :href="healthUrl"
-          v-text="healthUrl"
-        />
-        <span v-else v-text="`${application.instances.length} instances`" />
-      </small>
-    </div>
-    <p class="hidden md:block w-1/4" v-text="application.buildVersion" />
-  </div>
-</template>
-
-<script>
-import Application from '@/services/application';
-
-export default {
-  name: 'ApplicationsListItemSummary',
-  props: {
-    application: {
-      type: Application,
-      required: true,
-    },
-  },
-  computed: {
-    healthUrl() {
-      if (this.application.instances.length === 1) {
-        return (
-          this.application.instances[0].registration.serviceUrl ||
-          this.application.instances[0].registration.healthUrl
-        );
-      } else {
-        return '';
-      }
-    },
-  },
-};
-</script>
-
-<style scoped>
-.application-summary {
-  display: contents;
-}
-</style>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/applications/applications-list-item.spec.ts b/spring-boot-admin-server-ui/src/main/frontend/views/applications/applications-list-item.spec.ts
deleted file mode 100644
index fd8c75740a9..00000000000
--- a/spring-boot-admin-server-ui/src/main/frontend/views/applications/applications-list-item.spec.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-/*
- * Copyright 2014-2021 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
- *
- *     http://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.
- */
-import userEvent from '@testing-library/user-event';
-import { screen, waitFor, within } from '@testing-library/vue';
-import { cloneDeep } from 'lodash-es';
-import { describe, expect, it } from 'vitest';
-
-import Application from '../../services/application';
-
-import { applications } from '@/mocks/applications/data';
-import { render } from '@/test-utils';
-import ApplicationsListItem from '@/views/applications/applications-list-item.vue';
-
-async function clickConfirmModal() {
-  await waitFor(() => {
-    expect(screen.getByRole('dialog')).toBeInTheDocument();
-  });
-
-  const buttonOK = screen.queryByRole('button', { name: 'term.ok' });
-  await userEvent.click(buttonOK);
-}
-
-describe('application-list-item.vue', () => {
-  describe('unregister', () => {
-    it('on instance', async () => {
-      const application = new Application(cloneDeep(applications[0]));
-      const { emitted } = render(ApplicationsListItem, {
-        props: { application, isExpanded: true },
-      });
-
-      const htmlElement = await screen.findByTestId(
-        application.instances[0].getId()
-      );
-      const element = within(htmlElement).getByTitle('Unregister');
-      await userEvent.click(element);
-
-      await clickConfirmModal();
-
-      await waitFor(() => expect(emitted('unregister')).toBeDefined());
-    });
-
-    it('on application', async () => {
-      const { emitted } = render(ApplicationsListItem, {
-        props: { application: new Application(cloneDeep(applications[0])) },
-      });
-
-      const element = screen.getByTitle('Unregister');
-      await userEvent.click(element);
-
-      await clickConfirmModal();
-
-      await waitFor(() => expect(emitted('unregister')).toBeDefined());
-    });
-  });
-
-  describe('restart', () => {
-    it('on instance', async () => {
-      const application = new Application(cloneDeep(applications[0]));
-      const { emitted } = render(ApplicationsListItem, {
-        props: { application, isExpanded: true },
-      });
-
-      const htmlElement = await screen.findByTestId(
-        application.instances[0].getId()
-      );
-      const element = within(htmlElement).getByTitle('Restart');
-      await userEvent.click(element);
-
-      await clickConfirmModal();
-
-      await waitFor(() => expect(emitted('restart')).toBeDefined());
-    });
-
-    it('on application', async () => {
-      const { emitted } = render(ApplicationsListItem, {
-        props: { application: new Application(cloneDeep(applications[0])) },
-      });
-
-      const element = screen.getByTitle('Restart');
-      await userEvent.click(element);
-
-      await clickConfirmModal();
-
-      await waitFor(() => expect(emitted('restart')).toBeDefined());
-    });
-  });
-
-  describe('shutdown', () => {
-    it('on application', async () => {
-      const { emitted } = render(ApplicationsListItem, {
-        props: { application: new Application(cloneDeep(applications[0])) },
-      });
-
-      const element = await screen.findByTitle('Shutdown');
-      await userEvent.click(element);
-
-      await clickConfirmModal();
-
-      expect(emitted('shutdown')).toBeDefined();
-    });
-
-    it('on instance', async () => {
-      const application = new Application(cloneDeep(applications[0]));
-      const { emitted } = render(ApplicationsListItem, {
-        props: { application, isExpanded: true },
-      });
-
-      const htmlElement = await screen.findByTestId(
-        application.instances[0].getId()
-      );
-
-      const element = await within(htmlElement).findByTitle('Shutdown');
-      await userEvent.click(element);
-
-      await clickConfirmModal();
-
-      expect(emitted('shutdown')).toBeDefined();
-    });
-  });
-});
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/applications/applications-list-item.vue b/spring-boot-admin-server-ui/src/main/frontend/views/applications/applications-list-item.vue
deleted file mode 100644
index 0de5c22c0f4..00000000000
--- a/spring-boot-admin-server-ui/src/main/frontend/views/applications/applications-list-item.vue
+++ /dev/null
@@ -1,233 +0,0 @@
-<!--
-  - Copyright 2014-2019 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
-  -
-  -     http://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.
-  -->
-
-<template>
-  <div
-    :id="application.name"
-    v-on-clickaway="(event) => $emit('deselect', event, application.name)"
-    :class="{ 'is-active': isExpanded }"
-    class="application-list-item"
-    @click="$emit('select', application.name)"
-  >
-    <header
-      :class="headerClass"
-      class="application-list-item__header"
-      v-on="$attrs"
-    >
-      <ApplicationsListItemSummary
-        v-if="!isExpanded"
-        :application="application"
-      />
-      <h2
-        v-if="isExpanded"
-        class="font-bold text-lg"
-        v-text="application.name"
-      />
-      <div>
-        <ApplicationListItemAction
-          :has-active-notification-filter="
-            hasActiveNotificationFilter(application)
-          "
-          :has-notification-filters-support="hasNotificationFiltersSupport"
-          :item="application"
-          @restart="confirmRestartApplication"
-          @shutdown="confirmShutdownApplication"
-          @unregister="confirmUnregisterApplication"
-          @filter-settings="toggleFilterSettings"
-        />
-      </div>
-    </header>
-
-    <ul v-if="isExpanded" class="pt-2">
-      <instances-list :instances="application.instances">
-        <template #actions="{ instance }">
-          <ApplicationListItemAction
-            :has-active-notification-filter="
-              hasActiveNotificationFilter(instance)
-            "
-            :has-notification-filters-support="hasNotificationFiltersSupport"
-            :item="instance"
-            class="hidden md:flex"
-            @restart="confirmRestartInstance"
-            @shutdown="confirmShutdownInstance"
-            @unregister="confirmUnregisterInstance"
-            @filter-settings="toggleFilterSettings"
-          />
-        </template>
-      </instances-list>
-    </ul>
-  </div>
-</template>
-
-<script>
-import { directive as onClickaway } from 'vue3-click-away';
-
-import Application from '@/services/application';
-import ApplicationListItemAction from '@/views/applications/application-list-item-action';
-import ApplicationsListItemSummary from '@/views/applications/applications-list-item-summary';
-import InstancesList from '@/views/applications/instances-list';
-
-export default {
-  components: {
-    ApplicationListItemAction,
-    ApplicationsListItemSummary,
-    InstancesList,
-  },
-  directives: { onClickaway },
-  props: {
-    application: {
-      type: Application,
-      required: true,
-    },
-    isExpanded: {
-      type: Boolean,
-      default: false,
-    },
-    notificationFilters: {
-      type: Array,
-      default: () => [],
-    },
-    hasNotificationFiltersSupport: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: [
-    'unregister',
-    'toggle-notification-filter-settings',
-    'shutdown',
-    'restart',
-    'deselected',
-    'deselect',
-    'select',
-  ],
-  computed: {
-    headerClass() {
-      if (!this.isExpanded) {
-        return 'is-selectable';
-      }
-      return '';
-    },
-  },
-  methods: {
-    hasActiveNotificationFilter(item) {
-      return this.notificationFilters.some((filter) => filter.affects(item));
-    },
-    toggleFilterSettings(item) {
-      this.$emit('toggle-notification-filter-settings', item);
-    },
-    async confirmShutdownApplication(application) {
-      const isConfirmed = await this.$sbaModal.confirm(
-        this.$t('applications.actions.shutdown'),
-        this.$t('applications.shutdown', { name: application.name })
-      );
-      if (isConfirmed) {
-        this.$emit('shutdown', application);
-      }
-    },
-    async confirmUnregisterApplication(application) {
-      const isConfirmed = await this.$sbaModal.confirm(
-        this.$t('applications.actions.unregister'),
-        this.$t('applications.unregister', { name: application.name })
-      );
-      if (isConfirmed) {
-        this.$emit('unregister', application);
-      }
-    },
-    async confirmUnregisterInstance(instance) {
-      const isConfirmed = await this.$sbaModal.confirm(
-        this.$t('applications.actions.unregister'),
-        this.$t('applications.unregister', { name: instance.id })
-      );
-      if (isConfirmed) {
-        this.$emit('unregister', instance);
-      }
-    },
-    async confirmRestartApplication(application) {
-      const isConfirmed = await this.$sbaModal.confirm(
-        this.$t('applications.actions.restart'),
-        this.$t('applications.restart', { name: application.name })
-      );
-      if (isConfirmed) {
-        this.$emit('restart', application);
-      }
-    },
-    async confirmRestartInstance(instance) {
-      const isConfirmed = await this.$sbaModal.confirm(
-        this.$t('applications.actions.restart'),
-        this.$t('instances.restart', { name: instance.id })
-      );
-      if (isConfirmed) {
-        this.$emit('restart', instance);
-      }
-    },
-    async confirmShutdownInstance(instance) {
-      const isConfirmed = await this.$sbaModal.confirm(
-        this.$t('applications.actions.shutdown'),
-        this.$t('instances.shutdown', { name: instance.id })
-      );
-      if (isConfirmed) {
-        this.$emit('shutdown', instance);
-      }
-    },
-  },
-};
-</script>
-
-<style>
-.application-list-item {
-  transition: all ease-out 250ms;
-}
-
-.application-list-item:not(.is-active) {
-  @apply cursor-pointer;
-}
-
-.application-list-item.is-active {
-  @apply border-t border-b bg-gray-50;
-  max-width: unset;
-}
-
-.application-list-item.is-active:first-child {
-  @apply border-t-0;
-}
-
-.application-list-item.is-active:last-child {
-  @apply border-b-0;
-}
-
-.application-list-item.is-active li {
-  @apply pl-4 pr-4 cursor-pointer;
-}
-
-.application-list-item.is-active .application-list-item__header {
-  @apply pb-1;
-}
-
-.application-list-item__header {
-  @apply px-4 py-3 flex justify-between items-center;
-}
-
-.application-list-item:not(.is-active):hover {
-  @apply bg-gray-100 cursor-pointer;
-}
-
-.application-list-item__header .title {
-  flex-grow: 1;
-  flex-basis: 50%;
-  margin: 0.75rem 0;
-}
-</style>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/applications/index.vue b/spring-boot-admin-server-ui/src/main/frontend/views/applications/index.vue
index 5f3ba2f9d05..22c1331f778 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/applications/index.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/applications/index.vue
@@ -16,25 +16,25 @@
 
 <template>
   <div>
-    <sba-wave />
+    <sba-wave/>
     <section>
       <sba-sticky-subnav>
         <div class="container mx-auto flex">
-          <application-stats />
+          <ApplicationStats/>
           <ApplicationNotificationCenter
-            v-if="hasNotificationFiltersSupport"
-            :notification-filters="notificationFilters"
-            @filter-remove="removeFilter"
+              v-if="hasNotificationFiltersSupport"
+              :notification-filters="notificationFilters"
+              @filter-remove="removeFilter"
           />
           <div class="flex-1">
             <sba-input
-              v-model="filter"
-              :placeholder="t('term.filter')"
-              name="filter"
-              type="search"
+                v-model="filter"
+                :placeholder="t('term.filter')"
+                name="filter"
+                type="search"
             >
               <template #prepend>
-                <font-awesome-icon icon="filter" />
+                <font-awesome-icon icon="filter"/>
               </template>
             </sba-input>
           </div>
@@ -43,73 +43,94 @@
 
       <div class="container mx-auto py-6">
         <sba-alert
-          v-if="error"
-          :error="error"
-          :title="t('applications.server_connection_failed')"
-          class-names="mb-6"
-          severity="WARN"
+            v-if="error"
+            :error="error"
+            :title="t('applications.server_connection_failed')"
+            class-names="mb-6"
+            severity="WARN"
         />
         <sba-panel v-if="!applicationsInitialized">
           <p
-            class="is-muted is-loading"
-            v-text="t('applications.loading_applications')"
+              class="is-muted is-loading"
+              v-text="t('applications.loading_applications')"
           />
         </sba-panel>
 
-        <application-status-hero v-if="applicationsInitialized" />
+        <ApplicationStatusHero v-if="applicationsInitialized"/>
 
         <template v-if="applicationsInitialized">
-          <TransitionGroup>
-            <sba-panel
-              v-if="hasActiveFilter && statusGroups.length === 0"
+          <sba-panel
+              v-if="hasActiveFilter && grouped.length === 0"
               class="text-center"
-            >
-              {{ t('filter.no_results') }}
-            </sba-panel>
+          >
+            {{ t('filter.no_results') }}
+          </sba-panel>
+
+          <template v-else>
+            <div class="text-right mb-6" v-if="groupNames.length > 1">
+              <sba-button-group>
+                <sba-button @click="() => setGroupingFunction('application')">
+                  <font-awesome-icon icon="list"/>
+                </sba-button>
+                <sba-button @click="() => setGroupingFunction('group')">
+                  <font-awesome-icon icon="expand"/>
+                </sba-button>
+              </sba-button-group>
+            </div>
+
             <sba-panel
-              v-for="group in statusGroups"
-              v-else
-              :key="group.status"
-              :seamless="true"
-              :title="t('term.applications_tc', group.applications.length)"
-              class="application-group"
+                v-for="group in grouped"
+                :key="group.name"
+                :seamless="true"
+                :title="t(group.name)"
+                :subtitle="t('term.instances_tc', {count: group.instances?.length ?? 0})"
+                class="application-group"
+                @titleClick="() => toggleGroup(group.name)"
             >
-              <template #title>
-                <sba-status-badge :status="group.statusKey" />
+              <template #prefix>
+                <font-awesome-icon icon="chevron-down"
+                                   :class="{'-rotate-90': !isExpanded(group.name), 'mr-2 transition-[transform]': true}"/>
+                <sba-status-badge class="mr-2" v-if="isGroupedByApplication"
+                                  :status="findApplicationByInstanceId(group.instances[0].id)?.status"/>
+              </template>
+
+              <template #actions v-if="isGroupedByApplication">
+                <ApplicationListItemAction
+                    :has-notification-filters-support="hasNotificationFiltersSupport"
+                    :item="findApplicationByInstanceId(group.instances[0].id)"
+                    @filter-settings="toggleNotificationFilterSettings"
+                />
               </template>
 
-              <applications-list-item
-                v-for="application in group.applications"
-                :key="application.name"
-                :application="application"
-                :has-notification-filters-support="
-                  hasNotificationFiltersSupport
-                "
-                :is-expanded="selected === application.name || Boolean(filter)"
-                :notification-filters="notificationFilters"
-                @deselect="deselect"
-                @restart="restart"
-                @select="select"
-                @shutdown="shutdown"
-                @unregister="unregister"
-                @toggle-notification-filter-settings="
-                  toggleNotificationFilterSettings
-                "
-              />
+              <template #default v-if="isExpanded(group.name)">
+                <InstancesList :instances="group.instances">
+                  <template #actions="{instance}">
+                    <ApplicationListItemAction
+                        :has-notification-filters-support="hasNotificationFiltersSupport"
+                        :item="instance"
+                        class="md:hidden"
+                        @filter-settings="toggleNotificationFilterSettings"
+                    />
+                  </template>
+                </InstancesList>
+              </template>
             </sba-panel>
-          </TransitionGroup>
-          <notification-filter-settings
-            v-if="showNotificationFilterSettingsObject"
-            v-popper="
+          </template>
+
+
+          <NotificationFilterSettings
+              v-on-clickaway="() => toggleNotificationFilterSettings(null)"
+              v-if="showNotificationFilterSettingsObject"
+              v-popper="
               `nf-settings-${
                 showNotificationFilterSettingsObject.id ||
                 showNotificationFilterSettingsObject.name
               }`
             "
-            :notification-filters="notificationFilters"
-            :object="showNotificationFilterSettingsObject"
-            @filter-add="addFilter"
-            @filter-remove="removeFilter"
+              :notification-filters="notificationFilters"
+              :object="showNotificationFilterSettingsObject"
+              @filter-add="addFilter"
+              @filter-remove="removeFilter"
           />
         </template>
       </div>
@@ -118,50 +139,70 @@
 </template>
 
 <script lang="ts">
-import { useNotificationCenter } from '@stekoe/vue-toast-notificationcenter';
-import { groupBy, sortBy, transform } from 'lodash-es';
-import { computed, defineComponent, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { RouteLocationRaw, useRoute, useRouter } from 'vue-router';
+import {useNotificationCenter} from '@stekoe/vue-toast-notificationcenter';
+import {groupBy, sortBy, transform} from 'lodash-es';
+import {computed, defineComponent, ref, watch} from 'vue';
+import {useI18n} from 'vue-i18n';
+import {RouteLocationNamedRaw, useRoute, useRouter} from 'vue-router';
 
-import SbaStickySubnav from '@/components/sba-sticky-subnav';
-import SbaWave from '@/components/sba-wave';
+import SbaStickySubnav from '@/components/sba-sticky-subnav.vue';
+import SbaWave from '@/components/sba-wave.vue';
 
-import { useApplicationStore } from '@/composables/useApplicationStore';
+import {useApplicationStore} from '@/composables/useApplicationStore';
 import Popper from '@/directives/popper';
 import subscribing from '@/mixins/subscribing';
 import Application from '@/services/application';
 import NotificationFilter from '@/services/notification-filter';
-import { anyValueMatches } from '@/utils/collections';
-import { Subject, concatMap, mergeWith, timer } from '@/utils/rxjs';
-import ApplicationNotificationCenter from '@/views/applications/application-notification-center';
-import ApplicationStats from '@/views/applications/application-stats';
-import ApplicationStatusHero from '@/views/applications/application-status-hero';
-import ApplicationsListItem from '@/views/applications/applications-list-item';
-import handle from '@/views/applications/handle';
-import NotificationFilterSettings from '@/views/applications/notification-filter-settings';
+import {anyValueMatches} from '@/utils/collections';
+import {concatMap, mergeWith, Subject, timer} from '@/utils/rxjs';
+import ApplicationNotificationCenter from '@/views/applications/ApplicationNotificationCenter.vue';
+import ApplicationStats from '@/views/applications/ApplicationStats.vue';
+import ApplicationStatusHero from '@/views/applications/ApplicationStatusHero.vue';
+import handle from '@/views/applications/handle.vue';
+import NotificationFilterSettings from '@/views/applications/NotificationFilterSettings.vue';
+import Instance from "@/services/instance";
+import ApplicationListItemAction from "@/views/applications/ApplicationListItemAction.vue";
+import InstancesList from "@/views/applications/InstancesList.vue";
+import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
+import { directive as onClickaway } from 'vue3-click-away';
+
 
 const instanceMatchesFilter = (term, instance) => {
   const predicate = (value) => String(value).toLowerCase().includes(term);
   return (
-    anyValueMatches(instance.registration, predicate) ||
-    anyValueMatches(instance.buildVersion, predicate) ||
-    anyValueMatches(instance.id, predicate) ||
-    anyValueMatches(instance.tags, predicate)
+      anyValueMatches(instance.registration, predicate) ||
+      anyValueMatches(instance.buildVersion, predicate) ||
+      anyValueMatches(instance.id, predicate) ||
+      anyValueMatches(instance.tags, predicate)
   );
 };
 
 type NotificationFilterSettingsObject = { id: string; name: string };
 
+type InstancesListType = {
+  name?: string;
+  statusKey?: string;
+  status?: string;
+  instances?: Instance[];
+  applications?: Application[];
+}
+
+const groupingFunctions = {
+  'application': (instance: Instance) => instance.registration.name,
+  'group': (instance: Instance) => instance.registration.metadata?.['group'] ?? "term.no_group",
+}
+
 export default defineComponent({
-  directives: { Popper },
+  directives: {Popper, onClickaway},
   components: {
+    FontAwesomeIcon,
+    InstancesList,
+    ApplicationListItemAction,
     ApplicationNotificationCenter,
     SbaWave,
     ApplicationStatusHero,
     SbaStickySubnav,
     ApplicationStats,
-    ApplicationsListItem,
     NotificationFilterSettings,
   },
   mixins: [subscribing],
@@ -176,24 +217,28 @@ export default defineComponent({
     },
   },
   setup: function (props) {
-    const { t } = useI18n();
+    const {t} = useI18n();
     const router = useRouter();
     const route = useRoute();
-    const { applications, applicationsInitialized } = useApplicationStore();
+    const {applications, applicationsInitialized, applicationStore} = useApplicationStore();
     const notificationCenter = useNotificationCenter({});
     const filter = ref(route.query.q?.toString());
+    const expandedGroups = ref([]);
+    const groupingFunction = ref(groupingFunctions.application);
 
     watch(filter, (q) => {
       let to = {
         name: 'applications',
-        params: { selected: props.selected },
-      } as RouteLocationRaw;
+        params: {selected: props.selected},
+      } as RouteLocationNamedRaw;
 
       if (q?.length > 0) {
         to = {
           ...to,
-          query: { q },
-        } as RouteLocationRaw;
+          query: {
+            q
+          },
+        } as RouteLocationNamedRaw;
       }
 
       router.replace(to);
@@ -206,6 +251,11 @@ export default defineComponent({
     return {
       applications,
       applicationsInitialized,
+      setGroupingFunction: (key: keyof typeof groupingFunctions) => {
+        groupingFunction.value = groupingFunctions[key];
+        expandedGroups.value = [];
+      },
+      findApplicationByInstanceId: applicationStore.findApplicationByInstanceId,
       errors: ref([]),
       filter,
       hasActiveFilter,
@@ -215,35 +265,53 @@ export default defineComponent({
       notificationFilters: ref([]),
       palette: ref({}),
       router,
+      expandedGroups,
+      isExpanded: (name: string) => expandedGroups.value.includes(name),
+      groupingFunction,
+      toggleGroup: (name: string) => {
+        if (expandedGroups.value.includes(name)) {
+          expandedGroups.value = expandedGroups.value.filter((n) => n !== name);
+        } else {
+          expandedGroups.value = [...expandedGroups.value, name];
+        }
+      },
       showNotificationFilterSettingsObject: ref(
-        null as unknown as NotificationFilterSettingsObject
+          null as unknown as NotificationFilterSettingsObject
       ),
       t,
     };
   },
   computed: {
-    statusGroups() {
+    groupNames() {
+      return [...new Set(this.applications.flatMap(application => application.instances)
+          .map(instance => instance.registration.metadata?.['group'] ?? "Ungrouped"))];
+    },
+    grouped() {
       const filteredApplications = this.filterInstances(this.applications);
-      const applicationsByStatus = groupBy(
-        filteredApplications,
-        (application) => application.status
-      );
-      const list = transform(
-        applicationsByStatus,
-        (result, applications, status: string) => {
-          const statusKey = status.replace(/[^\w]/gi, '').toLowerCase();
-          result.push({
-            statusKey,
-            status: status,
-            applications: sortBy(applications, [
-              (application) => application.name,
-            ]),
-          });
-        },
-        []
+
+      const instances = filteredApplications.flatMap(application => application.instances);
+
+      const grouped = groupBy<Instance>(
+          instances,
+          this.groupingFunction
       );
+
+      const list = transform<Instance[], InstancesListType[]>(
+          grouped,
+          (result, instances, name) => {
+            result.push({
+              name,
+              instances: sortBy(instances, [
+                (instance) => instance.registration.name,
+              ]),
+            });
+          }, []);
+
       return sortBy(list, [(item) => item.status]);
     },
+    isGroupedByApplication() {
+      return this.groupingFunction === groupingFunctions.application;
+    },
   },
   watch: {
     selected: {
@@ -258,7 +326,7 @@ export default defineComponent({
     select(name) {
       this.router.replace({
         name: 'applications',
-        params: { selected: name },
+        params: {selected: name},
       });
     },
     deselect(event, expectedSelected) {
@@ -267,7 +335,7 @@ export default defineComponent({
       }
       this.toggleNotificationFilterSettings(null);
       if (this.selected === expectedSelected || !expectedSelected) {
-        this.router.replace({ name: 'applications' });
+        this.router.replace({name: 'applications'});
       }
     },
     async scrollIntoView(id, behavior) {
@@ -284,96 +352,26 @@ export default defineComponent({
         }
       }
     },
-    async unregister(item) {
-      this.toggleNotificationFilterSettings(null);
-      try {
-        await item.unregister();
-        const message =
-          item instanceof Application
-            ? 'applications.unregister_successful'
-            : 'instances.unregister_successful';
-        this.notificationCenter.success(
-          this.t(message, { name: item.id || item.name })
-        );
-      } catch (error) {
-        const message =
-          item instanceof Application
-            ? 'applications.unregister_failed'
-            : 'instances.unregister_failed';
-        this.notificationCenter.error(
-          this.t(message, {
-            name: item.id || item.name,
-            error: error.response.status,
-          })
-        );
-      }
-    },
-    async shutdown(item) {
-      try {
-        await item.shutdown();
-        const message =
-          item instanceof Application
-            ? 'applications.shutdown_successful'
-            : 'instances.shutdown_successful';
-        this.notificationCenter.success(
-          this.t(message, { name: item.id || item.name })
-        );
-      } catch (error) {
-        const message =
-          item instanceof Application
-            ? 'applications.shutdown_failed'
-            : 'instances.shutdown_failed';
-        this.notificationCenter.error(
-          this.t(message, {
-            name: item.id || item.name,
-            error: error.response.status,
-          })
-        );
-      }
-    },
-    async restart(item) {
-      try {
-        await item.restart();
-        const message =
-          item instanceof Application
-            ? 'applications.restarted'
-            : 'instances.restarted';
-        this.notificationCenter.success(
-          this.t(message, { name: item.id || item.name })
-        );
-      } catch (error) {
-        const message =
-          item instanceof Application
-            ? 'applications.restart_failed'
-            : 'instances.restart_failed';
-        this.notificationCenter.error(
-          this.t(message, {
-            name: item.id || item.name,
-            error: error.response.status,
-          })
-        );
-      }
-    },
     createSubscription() {
       return timer(0, 60000)
-        .pipe(
-          mergeWith(this.notificationFilterSubject),
-          concatMap(this.fetchNotificationFilters)
-        )
-        .subscribe({
-          next: (data) => {
-            this.notificationFilters = data;
-          },
-          error: (error) => {
-            console.warn(
-              'Fetching notification filters failed with error:',
-              error
-            );
-            this.notificationCenter.error(
-              this.t('applications.fetching_notification_filters_failed')
-            );
-          },
-        });
+          .pipe(
+              mergeWith(this.notificationFilterSubject),
+              concatMap(this.fetchNotificationFilters)
+          )
+          .subscribe({
+            next: (data) => {
+              this.notificationFilters = data;
+            },
+            error: (error) => {
+              console.warn(
+                  'Fetching notification filters failed with error:',
+                  error
+              );
+              this.notificationCenter.error(
+                  this.t('applications.fetching_notification_filters_failed')
+              );
+            },
+          });
     },
     async fetchNotificationFilters() {
       if (this.hasNotificationFiltersSupport) {
@@ -382,17 +380,17 @@ export default defineComponent({
       }
       return [];
     },
-    async addFilter({ object, ttl }) {
+    async addFilter({object, ttl}) {
       try {
         const response = await NotificationFilter.addFilter(object, ttl);
         let notificationFilter = response.data;
         this.notificationFilterSubject.next(notificationFilter);
         this.notificationCenter.success(
-          `${this.t('applications.notifications_suppressed_for', {
-            name:
-              notificationFilter.applicationName ||
-              notificationFilter.instanceId,
-          })} <strong>${notificationFilter.expiry.fromNow(true)}</strong>.`
+            `${this.t('applications.notifications_suppressed_for', {
+              name:
+                  notificationFilter.applicationName ||
+                  notificationFilter.instanceId,
+            })} <strong>${notificationFilter.expiry.fromNow(true)}</strong>.`
         );
       } catch (error) {
         console.warn('Adding notification filter failed:', error);
@@ -405,7 +403,7 @@ export default defineComponent({
         await activeFilter.delete();
         this.notificationFilterSubject.next(activeFilter.id);
         this.notificationCenter.success(
-          this.t('applications.notification_filter.removed')
+            this.t('applications.notification_filter.removed')
         );
       } catch (error) {
         console.warn('Deleting notification filter failed:', error);
@@ -416,21 +414,21 @@ export default defineComponent({
     toggleNotificationFilterSettings(obj) {
       this.showNotificationFilterSettingsObject = obj ? obj : null;
     },
-    filterInstances(applications) {
+    filterInstances(applications: Application[]) {
       if (!this.filter) {
         return applications;
       }
 
       return applications
-        .map((application) =>
-          application.filterInstances((i) =>
-            instanceMatchesFilter(this.filter.toLowerCase(), i)
+          .map((application) =>
+              application.filterInstances((i) =>
+                  instanceMatchesFilter(this.filter.toLowerCase(), i)
+              )
           )
-        )
-        .filter((application) => application.instances.length > 0);
+          .filter((application) => application.instances.length > 0);
     },
   },
-  install({ viewRegistry }) {
+  install({viewRegistry}) {
     viewRegistry.addView({
       path: '/applications/:selected?',
       props: true,
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/applications/instances-list.vue b/spring-boot-admin-server-ui/src/main/frontend/views/applications/instances-list.vue
deleted file mode 100644
index f1d5e850df6..00000000000
--- a/spring-boot-admin-server-ui/src/main/frontend/views/applications/instances-list.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<!--
-  - Copyright 2014-2018 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
-  -
-  -     http://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.
-  -->
-
-<template>
-  <li
-    v-for="instance in instances"
-    :key="instance.id"
-    :data-testid="instance.id"
-    class="flex items-center hover:bg-gray-100 p-2"
-    @click.stop="showDetails(instance)"
-  >
-    <div class="pr-3 md:w-16 text-center">
-      <sba-status
-        :date="instance.statusTimestamp"
-        :status="instance.statusInfo.status"
-      />
-    </div>
-    <div class="w-1/3 truncate">
-      <a
-        :href="
-          instance.registration.serviceUrl || instance.registration.healthUrl
-        "
-        @click.stop
-        v-text="
-          instance.registration.serviceUrl || instance.registration.healthUrl
-        "
-      /><br />
-      <span class="text-sm italic" v-text="instance.id" />
-    </div>
-    <div class="hidden xl:block w-1/4 overflow-x-scroll">
-      <sba-tags :small="true" :tags="instance.tags" :wrap="false" />
-    </div>
-    <div
-      class="hidden xl:block w-1/4 text-center"
-      v-text="instance.buildVersion"
-    />
-    <div class="instance-list-item__actions text-right">
-      <slot :instance="instance" name="actions" />
-    </div>
-  </li>
-</template>
-<script>
-export default {
-  props: {
-    instances: {
-      type: Array,
-      default: () => [],
-    },
-    showNotificationSettings: {
-      type: Boolean,
-      default: false,
-    },
-    hasActiveNotificationFilter: {
-      type: Function,
-      default: () => false,
-    },
-  },
-  methods: {
-    showDetails(instance) {
-      this.$router.push({
-        name: 'instances/details',
-        params: { instanceId: instance.id },
-      });
-    },
-  },
-};
-</script>
-
-<style lang="css">
-.instances-list td {
-  vertical-align: middle;
-}
-</style>
diff --git a/spring-boot-admin-server-ui/vite.config.ts b/spring-boot-admin-server-ui/vite.config.ts
index 92240b22509..095b45fe02a 100644
--- a/spring-boot-admin-server-ui/vite.config.ts
+++ b/spring-boot-admin-server-ui/vite.config.ts
@@ -54,7 +54,6 @@ export default defineConfig(({ mode }) => {
     root: frontendDir,
     build: {
       target: 'es2020',
-      sourcemap: true,
       outDir,
       rollupOptions: {
         input: {