diff --git a/dashboard/src/components/StateLED.vue b/dashboard/src/components/StateLED.vue
new file mode 100644
index 000000000..c2eae3172
--- /dev/null
+++ b/dashboard/src/components/StateLED.vue
@@ -0,0 +1,27 @@
+<script setup>
+
+defineProps({
+  busy: {
+    type: Boolean,
+    default: false,
+  },
+  state: {
+    validator(value) {
+      // The value must match one of these strings
+      return ['success', 'warning', 'danger', ''].includes(value);
+    }
+  },
+});
+
+function color(state) {
+  if (state === 'success') return '#27CE65';
+  else if (state === 'warning') return '#f0ad4e';
+  else if (state === 'danger') return '#d9534f';
+  else return '#7c7c7c';
+}
+
+</script>
+
+<template>
+  <i class="fa" :class="{ 'fa-circle': !busy, 'fa-circle-notch fa-spin': busy, 'fa-fade': state === 'warning' }" :style="{ color: busy ? null : color(state) }"></i>
+</template>
diff --git a/dashboard/src/style.css b/dashboard/src/style.css
index 415f9c146..bf0dfad13 100644
--- a/dashboard/src/style.css
+++ b/dashboard/src/style.css
@@ -83,12 +83,6 @@ footer > .p {
   margin: 4px;
 }
 
-
-/* TODO use pankow has-error everywhere instead*/
-.text-danger {
-  color: var(--pankow-color-danger);
-}
-
 .content {
   max-width: 1280px;
   width: 100%;
@@ -148,22 +142,22 @@ tr:hover .table-actions {
 
 /* status classes for circle indicators */
 .status-active {
-    color: #27CE65;
+  color: #27CE65;
 }
 
 .status-inactive {
-    color: #7c7c7c;
+  color: #7c7c7c;
 }
 
 .status-starting {
-    color: #f0ad4e;
+  color: #f0ad4e;
 }
 
 .status-error {
-    color: #ec534f;
+  color: #ec534f;
 }
 
-/* generic test modifiers */
+/* generic text modifiers */
 .text-success {
   color: #5CB85C;
 }
@@ -172,6 +166,10 @@ tr:hover .table-actions {
   color: #8a6d3b;
 }
 
+.text-danger {
+  color: var(--pankow-color-danger);
+}
+
 .text-bold {
   font-weight: bold;
 }
diff --git a/dashboard/src/views/BackupsView.vue b/dashboard/src/views/BackupsView.vue
index abdf465ab..eb071c285 100644
--- a/dashboard/src/views/BackupsView.vue
+++ b/dashboard/src/views/BackupsView.vue
@@ -4,6 +4,7 @@ import { ref, onMounted, useTemplateRef } from 'vue';
 import { marked } from 'marked';
 import { Button } from 'pankow';
 import Section from  '../components/Section.vue';
+import StateLED from  '../components/StateLED.vue';
 import BackupDialog from  '../components/BackupDialog.vue';
 import BackupSchedule from  '../components/BackupSchedule.vue';
 import BackupList from  '../components/BackupList.vue';
@@ -87,7 +88,7 @@ onMounted(async () => {
         <div class="info-value">
           <span v-show="config.provider === 'filesystem'">{{ config.backupFolder }}</span>
           <span v-show="mountlike(config.provider)">
-            <i class="fa fa-circle" :style="{ color: mountStatus.state === 'active' ? '#27CE65' : '#d9534f' }" v-show="mountStatus" v-tooltip="mountStatus.message"></i>
+            <StateLED v-if="mountStatus" :state="mountStatus.state === 'active' ? 'success' : 'danger'" v-tooltip="mountStatus.message"/>
             <span v-show="config.provider === 'disk' || config.provider === 'filesystem' || config.provider === 'ext4' || config.provider === 'xfs' || config.provider === 'mountpoint'">{{ mountOptions.diskPath || config.mountPoint }}{{ (config.prefix ? '/' : '') + config.prefix }}</span>
             <span v-show="config.provider === 'cifs' || config.provider === 'nfs' || config.provider === 'sshfs'">{{ mountOptions.host }}:{{ mountOptions.remoteDir }}{{ (config.prefix ? '/' : '') + config.prefix }}</span>
           </span>
diff --git a/dashboard/src/views/EmailView.vue b/dashboard/src/views/EmailView.vue
index e0ea6eea7..12553aa8d 100644
--- a/dashboard/src/views/EmailView.vue
+++ b/dashboard/src/views/EmailView.vue
@@ -8,6 +8,7 @@ import { ref, onMounted, useTemplateRef } from 'vue';
 import { Button, TableView, ProgressBar, InputDialog, Dialog, FormGroup, TextInput, InputGroup, Switch, ButtonGroup, SingleSelect } from 'pankow';
 import { prettyDecimalSize } from 'pankow/utils';
 import Section from '../components/Section.vue';
+import StateLED from '../components/StateLED.vue';
 import SettingsItem from '../components/SettingsItem.vue';
 import DomainsModel from '../models/DomainsModel.js';
 import MailModel from '../models/MailModel.js';
@@ -385,8 +386,7 @@ onMounted(async () => {
     <Section>
       <TableView :columns="columns" :model="domains" :busy="busy">
         <template #status="domain">
-          <i class="fa fa-circle" :class="{ 'status-active': domain.status, 'status-error': !domain.status }" v-if="domain.statusCheckDone"></i>
-          <i class="fa fa-circle-notch fa-spin" v-if="!domain.statusCheckDone"></i>
+          <StateLED :busy="!domain.statusCheckDone" :state="domain.status ? 'success' : 'danger'"/>
         </template>
         <template #domain="domain">
           <a :href="`/#/email/${domain.domain}`">{{ domain.domain }}</a>
diff --git a/dashboard/src/views/ServicesView.vue b/dashboard/src/views/ServicesView.vue
index ccec9e822..ec94dce06 100644
--- a/dashboard/src/views/ServicesView.vue
+++ b/dashboard/src/views/ServicesView.vue
@@ -9,6 +9,7 @@ import { Button, TableView, ProgressBar, ButtonGroup, FormGroup, Checkbox, Dialo
 import { prettyBinarySize } from 'pankow/utils';
 import { each } from 'async';
 import Section from '../components/Section.vue';
+import StateLED from '../components/StateLED.vue';
 import ServicesModel from '../models/ServicesModel.js';
 import SystemModel from '../models/SystemModel.js';
 import AppsModel from '../models/AppsModel.js';
@@ -122,7 +123,7 @@ function onResetToDefaults() {
   editMemoryLimit.value = editService.value.defaultMemoryLimit;
 }
 
-async function onEditConfirm() {
+async function onEditSubmit() {
   editBusy.value = true;
 
   const [error] = await servicesModel.update(editService.value.id, parseInt(editMemoryLimit.value), editRecoveryMode.value);
@@ -133,11 +134,27 @@ async function onEditConfirm() {
     return;
   }
 
-  setTimeout(() => refresh(editService.value.id), 2000);
+  await refresh(editService.value.id);
   editBusy.value = false;
   dialog.value.close();
 }
 
+function state(service) {
+  if (service.status === 'active') return 'success';
+  else if (service.status === 'starting' && service.config.recoveryMode) return '';
+  else if (service.status === 'starting') return 'warning';
+  else return 'danger';
+}
+
+function stateTooltip(service) {
+  if (!service.status) return '';
+
+  if (service.status === 'active') return 'Active';
+  else if (service.status === 'starting' && service.config.recoveryMode) return 'Recovery mode';
+  else if (service.status === 'starting') return 'Starting';
+  else return service.status;
+}
+
 onMounted(async () => {
   await refreshAll();
 
@@ -156,7 +173,7 @@ onMounted(async () => {
       :confirm-label="$t('main.dialog.save')"
       :reject-label="$t('main.dialog.cancel')"
       reject-style="secondary"
-      @confirm="onEditConfirm()"
+      @confirm="onEditSubmit()"
     >
       <p class="has-error text-center" v-show="editError">{{ editError }}</p>
 
@@ -183,19 +200,7 @@ onMounted(async () => {
 
       <TableView :columns="columns" :model="servicesArray">
         <template #status="service">
-          <span v-show="service.status">
-            <span v-if="service.status === 'active'">
-              <i class="fa fa-circle status-active" v-tooltip="'active'"></i>
-            </span>
-            <span v-else-if="service.status === 'starting'">
-              <i class="fa fa-circle status-starting" v-tooltip="'starting'" v-show="!service.config.recoveryMode"></i>
-              <i class="fa fa-circle status-inactive" v-tooltip="'recovery mode'" v-show="service.config.recoveryMode"></i>
-            </span>
-            <span v-else>
-              <i class="fa fa-circle status-error" uib-tooltip="{{ service.status }}"></i>
-            </span>
-          </span>
-          <i class="fa fa-circle-notch fa-spin" v-show="!service.status"></i>
+          <StateLED :busy="!service.status" :state="state(service)" :title="stateTooltip(service)"/>
         </template>
         <template #memoryPercent="service">
           <ProgressBar :value="service.memoryPercent" v-show="service.memoryPercent" />
diff --git a/dashboard/src/views/SupportView.vue b/dashboard/src/views/SupportView.vue
index a5e7c7ace..b84946e60 100644
--- a/dashboard/src/views/SupportView.vue
+++ b/dashboard/src/views/SupportView.vue
@@ -49,7 +49,6 @@ onMounted(async () => {
     </Section>
 
     <Section :title="$t('support.remoteSupport.title')">
-      <h2 class="text-center" v-show="!ready"><i class="fa fa-circle-notch fa-spin"></i></h2>
       <div v-show="ready">
         <p>{{ $t('support.remoteSupport.description') }}</p>
         <b>{{ $t('support.remoteSupport.warning') }}</b>
diff --git a/dashboard/src/views/VolumesView.vue b/dashboard/src/views/VolumesView.vue
index 5ed671648..272a5b52d 100644
--- a/dashboard/src/views/VolumesView.vue
+++ b/dashboard/src/views/VolumesView.vue
@@ -7,6 +7,7 @@ const t = i18n.t;
 import { computed, ref, useTemplateRef, onMounted } from 'vue';
 import { Button, ButtonGroup, Checkbox, Dialog, Dropdown, FormGroup, InputDialog, NumberInput, PasswordInput, TableView, TextInput } from 'pankow';
 import Section from  '../components/Section.vue';
+import StateLED from  '../components/StateLED.vue';
 import VolumesModel from '../models/VolumesModel.js';
 
 const volumesModel = VolumesModel.create();
@@ -86,14 +87,16 @@ async function refresh() {
 
   const [error, result] = await volumesModel.list();
   if (error) return console.error(error);
+  result.forEach(v => { v.busy = true; });
   volumes.value = result;
 
   busy.value = false;
 
   for (const v of volumes.value) {
     const status = await volumesModel.getStatus(v.id);
-    v.state = status.state;
+    v.state = status.state === 'inactive' ? 'danger' : (status.state === 'active' ? 'success' : '');
     v.message = status.message;
+    v.busy = false;
   }
 };
 
@@ -285,8 +288,8 @@ onMounted(async () =>{
           {{ (volume.mountType === 'mountpoint' || volume.mountType === 'filesystem') ? volume.hostPath : (volume.mountOptions.host || volume.mountOptions.diskPath || volume.hostPath) + (volume.mountOptions.remoteDir || '') }}
         </template>
         <template #status="volume">
-          <div style="text-align: center;" v-tooltip="volume.message">
-            <i class="fa fa-circle" :style="{ color: volume.state === 'active' ? '#27CE65' : '#d9534f' }"></i>
+          <div style="text-align: center;" :title="volume.message">
+            <StateLED :busy="volume.busy" :state="volume.state"/>
           </div>
         </template>
         <template #actions="volume">