diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index ad5244136..36cb008ce 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -194,31 +194,6 @@
       "count": 2
     }
   },
-  "src/components/standalone/dashboard/InternetConnectionCard.vue": {
-    "@typescript-eslint/no-explicit-any": {
-      "count": 4
-    }
-  },
-  "src/components/standalone/dashboard/OpenVpnTunnelOrIpsecCard.vue": {
-    "@typescript-eslint/no-explicit-any": {
-      "count": 1
-    }
-  },
-  "src/components/standalone/dashboard/ServiceCard.vue": {
-    "@typescript-eslint/no-explicit-any": {
-      "count": 4
-    }
-  },
-  "src/components/standalone/dashboard/SystemInfoCard.vue": {
-    "@typescript-eslint/no-explicit-any": {
-      "count": 2
-    }
-  },
-  "src/components/standalone/dashboard/ThreatShieldIpCard.vue": {
-    "@typescript-eslint/no-explicit-any": {
-      "count": 6
-    }
-  },
   "src/components/standalone/dns_dhcp/CreateOrEditDnsRecordDrawer.vue": {
     "@typescript-eslint/no-explicit-any": {
       "count": 1
diff --git a/src/components/standalone/dashboard/BackupStatusCard.vue b/src/components/standalone/dashboard/BackupStatusCard.vue
index f141d65f5..af6c0f0c1 100644
--- a/src/components/standalone/dashboard/BackupStatusCard.vue
+++ b/src/components/standalone/dashboard/BackupStatusCard.vue
@@ -2,19 +2,21 @@
 import {
   formatDateLoc,
   getAxiosErrorMessage,
-  NeBadge,
+  NeBadgeV2,
   NeCard,
   NeLink
 } from '@nethesis/vue-components'
 import { useSubscriptionStore } from '@/stores/standalone/subscription.ts'
 import { getStandaloneRoutePrefix } from '@/lib/router.ts'
 import { useI18n } from 'vue-i18n'
-import { computed, ref, watchEffect } from 'vue'
+import { computed } from 'vue'
 import { faClock, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { ubusCall } from '@/lib/standalone/ubus.ts'
+import { useQuery } from '@tanstack/vue-query'
 import type { AxiosResponse } from 'axios'
 import { useBackupsStore } from '@/stores/standalone/backups.ts'
+import { DASHBOARD_REFRESH_INTERVAL } from '@/composables/useDashboardOverview'
 
 type BackupData = {
   created: number
@@ -35,31 +37,24 @@ const backups = useBackupsStore()
 
 const { t } = useI18n()
 
-const latestBackupLoading = ref(true)
-const latestBackupError = ref<Error>()
-const lastBackup = ref<string>()
-
-watchEffect(() => {
-  if (subscription.isActive) {
-    latestBackupError.value = undefined
-    latestBackupLoading.value = true
-    ubusCall('ns.backup', 'registered-list-backups')
-      .then((response: BackupResponse) => {
-        const backup = response.data.values.backups.sort((a, b) => b.created - a.created).shift()
-        if (backup != undefined) {
-          lastBackup.value = formatDateLoc(new Date(backup.created * 1000), 'PPpp')
-        } else {
-          lastBackup.value = undefined
-        }
-      })
-      .catch(() => {
-        lastBackup.value = undefined
-      })
-  }
+const {
+  data: lastBackup,
+  isPending: latestBackupLoading,
+  error: latestBackupError
+} = useQuery({
+  queryKey: ['dashboard', 'backup', 'last'],
+  queryFn: ({ signal }) =>
+    ubusCall<BackupResponse>('ns.backup', 'registered-list-backups', {}, { signal }),
+  select: (response) => {
+    const backup = response.data.values.backups.sort((a, b) => b.created - a.created).shift()
+    return backup != undefined ? formatDateLoc(new Date(backup.created * 1000), 'PPpp') : undefined
+  },
+  enabled: () => subscription.isActive,
+  refetchInterval: DASHBOARD_REFRESH_INTERVAL
 })
 
 const loading = computed((): boolean => {
-  return [subscription.loading, latestBackupLoading.value, backups.loading].every((entry) => entry)
+  return [subscription.loading, latestBackupLoading.value, backups.loading].some((entry) => entry)
 })
 
 const error = computed((): string | undefined => {
@@ -101,13 +96,10 @@ const error = computed((): string | undefined => {
           {{ t('standalone.backup_and_restore.backup.no_backups') }}
         </template>
       </p>
-      <NeBadge
-        v-if="!backups.isPassPhraseSet"
-        :icon="faTriangleExclamation"
-        :text="t('standalone.backup_and_restore.backup.passphrase_not_configured')"
-        class="text-center"
-        kind="warning"
-      />
+      <NeBadgeV2 v-if="!backups.isPassPhraseSet" kind="amber" class="text-center">
+        <FontAwesomeIcon :icon="faTriangleExclamation" class="size-4" />
+        {{ t('standalone.backup_and_restore.backup.passphrase_not_configured') }}
+      </NeBadgeV2>
     </div>
   </NeCard>
 </template>
diff --git a/src/components/standalone/dashboard/HaStatusCard.vue b/src/components/standalone/dashboard/HaStatusCard.vue
index ea8112ecd..e4b56da95 100644
--- a/src/components/standalone/dashboard/HaStatusCard.vue
+++ b/src/components/standalone/dashboard/HaStatusCard.vue
@@ -1,58 +1,65 @@
 <script lang="ts" setup>
-import { useHaStatusStore } from '@/stores/standalone/haStatus'
 import {
   getAxiosErrorMessage,
+  NeBadgeV2,
   NeCard,
-  NeBadge,
-  NeSkeleton,
   NeTooltip,
   formatDateLoc
 } from '@nethesis/vue-components'
-import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { faCheck, faXmark } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faCheck, faTriangleExclamation, faXmark } from '@fortawesome/free-solid-svg-icons'
+import { useQuery } from '@tanstack/vue-query'
+import { ubusCall } from '@/lib/standalone/ubus'
+import { DASHBOARD_REFRESH_INTERVAL } from '@/composables/useDashboardOverview'
+
+type HaStatusResponse = {
+  data: {
+    state: string
+    role: string
+    status: string
+    last_sync_status: string
+    last_sync_time: number
+  }
+}
 
-const REFRESH_INTERVAL = 20000 + Math.random() * 10 * 1000
-const ha = useHaStatusStore()
-const intervalId = ref(0)
 const { t } = useI18n()
-const errorTitle = ref<string>()
-const errorDescription = ref<string>()
 
-onMounted(() => {
-  ha.fetchStatus()
-  intervalId.value = setInterval(ha.fetchStatus, REFRESH_INTERVAL)
+const {
+  data: ha,
+  isPending,
+  isError,
+  error
+} = useQuery({
+  queryKey: ['dashboard', 'ha', 'status'],
+  queryFn: ({ signal }) => ubusCall<HaStatusResponse>('ns.ha', 'status', {}, { signal }),
+  select: (res) => ({
+    status: res.data.status,
+    role: res.data.role,
+    state: res.data.state,
+    lastSyncStatus: res.data.last_sync_status.toLowerCase().replace(/ /g, '_'),
+    lastSyncTime: res.data.last_sync_time
+  }),
+  refetchInterval: DASHBOARD_REFRESH_INTERVAL
 })
 
-onUnmounted(() => {
-  if (intervalId.value) {
-    clearInterval(intervalId.value)
-  }
-})
+const lastSyncStatus = computed(() => ha.value?.lastSyncStatus ?? '')
+const lastSyncTime = computed(() => Number(ha.value?.lastSyncTime) || 0)
 
-watch(
-  () => ha.error,
-  (error) => {
-    if (error) {
-      errorTitle.value = t('standalone.ha.failed_to_fetch_info')
-      errorDescription.value = t(getAxiosErrorMessage(error))
-    } else {
-      errorTitle.value = ''
-      errorDescription.value = ''
-    }
-  }
-)
+const errorTitle = computed(() => (isError.value ? t('standalone.ha.failed_to_fetch_info') : ''))
+const errorDescription = computed(() => (isError.value ? t(getAxiosErrorMessage(error.value)) : ''))
 
 function getBadgeKind(status: string) {
   switch (status) {
     case 'enabled':
     case 'up_to_date':
     case 'successfull':
-      return 'success'
+      return 'green'
     case 'disabled':
-      return 'secondary'
+      return 'gray'
     default:
-      return 'error'
+      return 'rose'
   }
 }
 
@@ -93,21 +100,18 @@ function getBadgeIcon(status: string) {
     :error-description="errorDescription"
     :error-title="errorTitle"
     :icon="['fas', 'server']"
-    :loading="ha.loading"
+    :loading="isPending"
     :skeleton-lines="2"
   >
     <template #title>
       {{ t('standalone.ha.sidebar_title') }}
     </template>
-    <NeSkeleton v-if="ha.loading" />
-    <div v-else class="space-y-3">
-      <NeBadge
-        v-if="ha.status"
-        :kind="getBadgeKind(ha.status)"
-        :text="getBadgeText(ha.status)"
-        :icon="getBadgeIcon(ha.status)"
-      />
-      <ul v-if="ha.status === 'enabled'">
+    <div class="space-y-3">
+      <NeBadgeV2 v-if="ha?.status" :kind="getBadgeKind(ha.status)">
+        <FontAwesomeIcon :icon="getBadgeIcon(ha.status)" class="size-4" />
+        {{ getBadgeText(ha.status) }}
+      </NeBadgeV2>
+      <ul v-if="ha?.status === 'enabled'">
         <li>
           <span class="mr-3 font-semibold">{{ t('standalone.ha.role') }}</span
           ><span>{{ t('standalone.ha.' + ha.role) }}</span>
@@ -120,16 +124,16 @@ function getBadgeIcon(status: string) {
               <template #content>
                 <span class="mr-3 font-semibold">{{ t('standalone.ha.last_sync_status') }}</span
                 ><span>{{
-                  ha.lastSyncStatus
-                    ? t('standalone.ha.' + ha.lastSyncStatus)
+                  lastSyncStatus
+                    ? t('standalone.ha.' + lastSyncStatus)
                     : t('standalone.dashboard.unavailable')
                 }}</span
                 ><br />
 
                 <span class="mr-3 font-semibold">{{ t('standalone.ha.last_sync_time') }}</span>
                 <span>{{
-                  ha.lastSyncTime > 0
-                    ? formatDateLoc(new Date(ha.lastSyncTime * 1000), 'PPpp')
+                  lastSyncTime > 0
+                    ? formatDateLoc(new Date(lastSyncTime * 1000), 'PPpp')
                     : t('standalone.dashboard.unavailable')
                 }}</span>
               </template>
@@ -138,11 +142,10 @@ function getBadgeIcon(status: string) {
         </li>
 
         <li v-if="ha.role === 'backup'" class="pt-3">
-          <NeBadge
-            :kind="'warning'"
-            :icon="['fas', 'triangle-exclamation']"
-            :text="t('standalone.ha.backup_warning')"
-          />
+          <NeBadgeV2 kind="amber">
+            <FontAwesomeIcon :icon="faTriangleExclamation" class="size-4" />
+            {{ t('standalone.ha.backup_warning') }}
+          </NeBadgeV2>
         </li>
       </ul>
     </div>
diff --git a/src/components/standalone/dashboard/InternetConnectionCard.vue b/src/components/standalone/dashboard/InternetConnectionCard.vue
index 483e7ba9b..831208e55 100644
--- a/src/components/standalone/dashboard/InternetConnectionCard.vue
+++ b/src/components/standalone/dashboard/InternetConnectionCard.vue
@@ -5,129 +5,72 @@
 
 <script setup lang="ts">
 import { ubusCall } from '@/lib/standalone/ubus'
-import { NeBadge, NeCard, NeLink, NeTooltip, getAxiosErrorMessage } from '@nethesis/vue-components'
-import { onMounted, onUnmounted, ref } from 'vue'
+import {
+  NeBadgeV2,
+  NeCard,
+  NeLink,
+  NeTooltip,
+  getAxiosErrorMessage
+} from '@nethesis/vue-components'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { faCheck, faWarning, faXmark } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faWarning } from '@fortawesome/free-solid-svg-icons'
 import { getStandaloneRoutePrefix } from '@/lib/router'
 import { useRoute, useRouter } from 'vue-router'
+import { useQuery } from '@tanstack/vue-query'
+import {
+  DASHBOARD_REFRESH_INTERVAL,
+  useDashboardOverview,
+  type ServiceStatus
+} from '@/composables/useDashboardOverview'
+import { getStatusBadge } from '@/lib/standalone/dashboard'
 
 const { t } = useI18n()
 const router = useRouter()
 const route = useRoute()
 
-// random refresh interval between 20 and 30 seconds
-const REFRESH_INTERVAL = 20000 + Math.random() * 10 * 1000
-const internetStatus = ref<any>(null)
-const dnsConfiguredStatus = ref<any>(null)
-const statusIntervalId = ref(0)
-
-const loading = ref({
-  getInternetStatus: false,
-  getDnsConfiguredStatus: false
-})
-
-const error = ref({
-  title: '',
-  description: ''
-})
-
-onMounted(() => {
-  loadData()
-
-  // periodically reload data
-  statusIntervalId.value = setInterval(loadData, REFRESH_INTERVAL)
-})
-
-onUnmounted(() => {
-  if (statusIntervalId.value) {
-    clearInterval(statusIntervalId.value)
+// ubusCall returns the HTTP body: the api-server wraps the ubus result under
+// `data`, and ns.dashboard wraps its output under `result`
+type ServiceStatusResponse = {
+  data: {
+    result: {
+      status: ServiceStatus
+    }
   }
-})
-
-function loadData() {
-  fetchInternetStatus()
-  fetchDnsConfiguredStatus()
 }
 
-async function fetchInternetStatus() {
-  // show skeleton only the first time
-  if (!statusIntervalId.value) {
-    loading.value.getInternetStatus = true
-  }
-  error.value.title = ''
-  error.value.description = ''
-
-  try {
-    const res = await ubusCall('ns.dashboard', 'service-status', { service: 'internet' })
-    internetStatus.value = res.data.result.status
-  } catch (err: any) {
-    console.error(err)
-    error.value.title = t('error.cannot_retrieve_service_status')
-    error.value.description = t(getAxiosErrorMessage(err))
-  } finally {
-    loading.value.getInternetStatus = false
-  }
-}
-
-async function fetchDnsConfiguredStatus() {
-  // show skeleton only the first time
-  if (!statusIntervalId.value) {
-    loading.value.getDnsConfiguredStatus = true
-  }
-  error.value.title = ''
-  error.value.description = ''
-
-  try {
-    const res = await ubusCall('ns.dashboard', 'service-status', { service: 'dns-configured' })
-    dnsConfiguredStatus.value = res.data.result.status
-  } catch (err: any) {
-    console.error(err)
-    error.value.title = t('error.cannot_retrieve_service_status')
-    error.value.description = t(getAxiosErrorMessage(err))
-  } finally {
-    loading.value.getDnsConfiguredStatus = false
-  }
-}
-
-function getBadgeKind(status: string) {
-  switch (status) {
-    case 'ok':
-      return 'success'
-    case 'warning':
-      return 'warning'
-    case 'disabled':
-      return 'secondary'
-    default:
-      return 'error'
-  }
-}
+const { data: overview, isPending: isOverviewPending } = useDashboardOverview()
+
+// the internet check pings remote hosts and can be very slow when the
+// connection is down: it is polled separately from the dashboard overview
+const {
+  data: internetStatus,
+  isPending: isInternetPending,
+  isError: isInternetError,
+  error: internetError
+} = useQuery({
+  queryKey: ['dashboard', 'internet-status'],
+  queryFn: ({ signal }) =>
+    ubusCall<ServiceStatusResponse>(
+      'ns.dashboard',
+      'service-status',
+      { service: 'internet' },
+      { signal }
+    ),
+  select: (res) => res.data.result.status,
+  refetchInterval: DASHBOARD_REFRESH_INTERVAL
+})
 
-function getBadgeText(status: string) {
-  switch (status) {
-    case 'ok':
-      return t('standalone.dashboard.active')
-    case 'warning':
-      return t('standalone.dashboard.warning')
-    case 'disabled':
-      return t('standalone.dashboard.inactive')
-    default:
-      return t('standalone.dashboard.unknown')
-  }
-}
+const internetBadge = computed(() => getStatusBadge(internetStatus.value))
+const dnsConfiguredStatus = computed(() => overview.value?.services.dns_configured)
 
-function getBadgeIcon(status: string) {
-  switch (status) {
-    case 'ok':
-      return faCheck
-    case 'warning':
-      return faWarning
-    case 'disabled':
-      return faXmark
-    default:
-      return faXmark
-  }
-}
+const errorTitle = computed(() =>
+  isInternetError.value ? t('error.cannot_retrieve_service_status') : ''
+)
+const errorDescription = computed(() =>
+  isInternetError.value ? t(getAxiosErrorMessage(internetError.value)) : ''
+)
 
 function goToDns() {
   router.push(`${getStandaloneRoutePrefix(route)}/network/dns-dhcp?tab=dns`)
@@ -139,21 +82,20 @@ function goToDns() {
     :title="t('standalone.dashboard.internet_connection')"
     :icon="['fas', 'earth-americas']"
     :skeleton-lines="2"
-    :loading="loading.getInternetStatus || loading.getDnsConfiguredStatus"
-    :error-title="error.title"
-    :error-description="error.description"
+    :loading="isInternetPending || isOverviewPending"
+    :error-title="errorTitle"
+    :error-description="errorDescription"
   >
     <div class="space-y-4">
-      <NeBadge
-        :kind="getBadgeKind(internetStatus)"
-        :text="getBadgeText(internetStatus)"
-        :icon="getBadgeIcon(internetStatus)"
-      />
+      <NeBadgeV2 :kind="internetBadge.kind">
+        <FontAwesomeIcon :icon="internetBadge.icon" class="size-4" />
+        {{ t(internetBadge.textKey) }}
+      </NeBadgeV2>
       <NeTooltip v-if="dnsConfiguredStatus === 'warning'" class="block">
         <template #trigger>
           <div class="flex items-center gap-2">
-            <font-awesome-icon
-              :icon="['fas', 'warning']"
+            <FontAwesomeIcon
+              :icon="faWarning"
               class="h-4 w-4 text-amber-700 dark:text-amber-500"
               aria-hidden="true"
             />
diff --git a/src/components/standalone/dashboard/IpsServiceCard.vue b/src/components/standalone/dashboard/IpsServiceCard.vue
index 6b4ade587..a338beb73 100644
--- a/src/components/standalone/dashboard/IpsServiceCard.vue
+++ b/src/components/standalone/dashboard/IpsServiceCard.vue
@@ -1,41 +1,24 @@
 <script lang="ts" setup>
-import { useIpsStatusStore } from '@/stores/standalone/ipsStatus'
-import { getAxiosErrorMessage, NeCard, NeLink, NeSkeleton } from '@nethesis/vue-components'
-import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { getAxiosErrorMessage, NeBadgeV2, NeCard, NeLink } from '@nethesis/vue-components'
+import { computed } from 'vue'
 import { getStandaloneRoutePrefix } from '@/lib/router'
 import { useI18n } from 'vue-i18n'
-import IpsEnabledBadge from '@/components/standalone/security/ips/IpsEnabledBadge.vue'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faCheck, faXmark } from '@fortawesome/free-solid-svg-icons'
+import { DASHBOARD_REFRESH_INTERVAL } from '@/composables/useDashboardOverview'
+import { useIpsStatus } from '@/composables/useIpsStatus'
 
-const REFRESH_INTERVAL = 20000 + Math.random() * 10 * 1000
-const ips = useIpsStatusStore()
-const intervalId = ref(0)
 const { t } = useI18n()
-const errorTitle = ref<string>()
-const errorDescription = ref<string>()
 
-onMounted(() => {
-  ips.fetchStatus()
-  intervalId.value = setInterval(ips.fetchStatus, REFRESH_INTERVAL)
-})
+const {
+  data: ips,
+  isPending,
+  isError,
+  error
+} = useIpsStatus({ refetchInterval: DASHBOARD_REFRESH_INTERVAL })
 
-onUnmounted(() => {
-  if (intervalId.value) {
-    clearInterval(intervalId.value)
-  }
-})
-
-watch(
-  () => ips.error,
-  (error) => {
-    if (error) {
-      errorTitle.value = t('standalone.ips.failed_to_fetch_info')
-      errorDescription.value = t(getAxiosErrorMessage(error))
-    } else {
-      errorTitle.value = ''
-      errorDescription.value = ''
-    }
-  }
-)
+const errorTitle = computed(() => (isError.value ? t('standalone.ips.failed_to_fetch_info') : ''))
+const errorDescription = computed(() => (isError.value ? t(getAxiosErrorMessage(error.value)) : ''))
 </script>
 
 <template>
@@ -43,7 +26,7 @@ watch(
     :error-description="errorDescription"
     :error-title="errorTitle"
     :icon="['fas', 'shield']"
-    :loading="ips.loading"
+    :loading="isPending"
     :skeleton-lines="2"
   >
     <template #title>
@@ -51,16 +34,19 @@ watch(
         {{ t('standalone.ips.sidebar_title') }}
       </NeLink>
     </template>
-    <NeSkeleton v-if="ips.loading" />
-    <div v-else class="space-y-3">
-      <IpsEnabledBadge
-        :disabled-label="t('standalone.dashboard.inactive')"
-        :enabled-label="t('standalone.dashboard.active')"
-      />
+    <div class="space-y-3">
+      <NeBadgeV2 v-if="ips?.enabled" kind="green">
+        <FontAwesomeIcon :icon="faCheck" class="size-4" />
+        {{ t('standalone.dashboard.active') }}
+      </NeBadgeV2>
+      <NeBadgeV2 v-else kind="gray">
+        <FontAwesomeIcon :icon="faXmark" class="size-4" />
+        {{ t('standalone.dashboard.inactive') }}
+      </NeBadgeV2>
       <div>
         <p>
-          <span class="mr-1 text-xl">{{ ips.events }}</span>
-          {{ t('standalone.ips.events_today', ips.events) }}
+          <span class="mr-1 text-xl">{{ ips?.events ?? '-' }}</span>
+          {{ t('standalone.ips.events_today', ips?.events ?? 0) }}
         </p>
       </div>
     </div>
diff --git a/src/components/standalone/dashboard/MacBindingStatusCard.vue b/src/components/standalone/dashboard/MacBindingStatusCard.vue
index e6ac524fe..8f3bf6e95 100644
--- a/src/components/standalone/dashboard/MacBindingStatusCard.vue
+++ b/src/components/standalone/dashboard/MacBindingStatusCard.vue
@@ -1,10 +1,13 @@
 <script lang="ts" setup>
 import { getStandaloneRoutePrefix } from '@/lib/router.ts'
-import { getAxiosErrorMessage, NeBadge, NeCard, NeLink, NeSkeleton } from '@nethesis/vue-components'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { getAxiosErrorMessage, NeBadgeV2, NeCard, NeLink } from '@nethesis/vue-components'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { ubusCall } from '@/lib/standalone/ubus.ts'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faCheck, faXmark } from '@fortawesome/free-solid-svg-icons'
+import { useQuery } from '@tanstack/vue-query'
+import { ubusCall } from '@/lib/standalone/ubus.ts'
+import { DASHBOARD_REFRESH_INTERVAL } from '@/composables/useDashboardOverview'
 
 type ListInterfacesResponse = {
   data: {
@@ -14,50 +17,31 @@ type ListInterfacesResponse = {
   }
 }
 
-const REFRESH_INTERVAL = 20000 + Math.random() * 10 * 1000
-
 const { t } = useI18n()
 
-const error = ref<Error>()
-const loading = ref(true)
-const enabled = ref(false)
-const interval = ref<number>()
-
-onMounted(() => {
-  fetchStatus()
-  interval.value = setInterval(fetchStatus, REFRESH_INTERVAL)
-})
-
-onUnmounted(() => {
-  if (interval.value) {
-    clearInterval(interval.value)
-  }
+const {
+  data: enabled,
+  isPending,
+  isError,
+  error
+} = useQuery({
+  queryKey: ['dashboard', 'mac-binding'],
+  queryFn: ({ signal }) =>
+    ubusCall<ListInterfacesResponse>('ns.dhcp', 'list-interfaces', {}, { signal }),
+  select: (res) => Object.values(res.data).some((item) => item.ns_binding != 0),
+  refetchInterval: DASHBOARD_REFRESH_INTERVAL
 })
 
-function fetchStatus() {
-  ubusCall('ns.dhcp', 'list-interfaces')
-    .then((response: ListInterfacesResponse) => {
-      enabled.value = Object.values(response.data).some((item) => item.ns_binding != 0)
-    })
-    .catch((reason: Error) => {
-      error.value = reason
-    })
-    .finally(() => {
-      loading.value = false
-    })
-}
-
-const errorDescription = computed((): string => {
-  return error.value != undefined ? t(getAxiosErrorMessage(error.value)) : ''
-})
+const errorTitle = computed(() => (isError.value ? t('error.cannot_retrieve_service_status') : ''))
+const errorDescription = computed(() => (isError.value ? t(getAxiosErrorMessage(error.value)) : ''))
 </script>
 
 <template>
   <NeCard
     :error-description="errorDescription"
-    :error-title="error != undefined ? t('error.cannot_retrieve_service_status') : ''"
+    :error-title="errorTitle"
     :icon="['fas', 'network-wired']"
-    :loading="loading"
+    :loading="isPending"
     :skeleton-lines="2"
   >
     <template #title>
@@ -65,13 +49,13 @@ const errorDescription = computed((): string => {
         {{ t('standalone.dns_dhcp.mac_binding') }}
       </NeLink>
     </template>
-    <NeSkeleton v-if="loading" />
-    <NeBadge
-      v-else-if="enabled"
-      :icon="faCheck"
-      :text="t('standalone.dashboard.active')"
-      kind="success"
-    />
-    <NeBadge v-else :icon="faXmark" :text="t('standalone.dashboard.inactive')" kind="secondary" />
+    <NeBadgeV2 v-if="enabled" kind="green">
+      <FontAwesomeIcon :icon="faCheck" class="size-4" />
+      {{ t('standalone.dashboard.active') }}
+    </NeBadgeV2>
+    <NeBadgeV2 v-else kind="gray">
+      <FontAwesomeIcon :icon="faXmark" class="size-4" />
+      {{ t('standalone.dashboard.inactive') }}
+    </NeBadgeV2>
   </NeCard>
 </template>
diff --git a/src/components/standalone/dashboard/OpenVpnTunnelOrIpsecCard.vue b/src/components/standalone/dashboard/OpenVpnTunnelOrIpsecCard.vue
index 5943670f5..f00bb5150 100644
--- a/src/components/standalone/dashboard/OpenVpnTunnelOrIpsecCard.vue
+++ b/src/components/standalone/dashboard/OpenVpnTunnelOrIpsecCard.vue
@@ -4,97 +4,51 @@
 -->
 
 <script setup lang="ts">
-import { ubusCall } from '@/lib/standalone/ubus'
-import { NeCard, NeSkeleton, getAxiosErrorMessage } from '@nethesis/vue-components'
-import { onMounted, onUnmounted, ref } from 'vue'
+import { NeCard, getAxiosErrorMessage } from '@nethesis/vue-components'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useDashboardOverview } from '@/composables/useDashboardOverview'
 
-interface TunnelCounters {
-  enabled: number
-  connected: number
-}
-
-const props = defineProps({
-  method: { type: String, required: true }
-})
+const props = defineProps<{
+  method: 'ipsec-tunnels' | 'ovpn-tunnels'
+}>()
 
 const { t } = useI18n()
 
-// random refresh interval between 20 and 30 seconds
-const REFRESH_INTERVAL = 20000 + Math.random() * 10 * 1000
-const counters = ref<TunnelCounters>({ enabled: 0, connected: 0 })
-const counterIntervalId = ref(0)
-
-const loading = ref({
-  getCounters: false
-})
+const { data: overview, isPending, isError, error } = useDashboardOverview()
 
-const error = ref({
-  title: '',
-  description: ''
+const counters = computed(() => {
+  const vpn = overview.value?.vpn
+  const tunnelCounters = props.method === 'ipsec-tunnels' ? vpn?.ipsec : vpn?.ovpn
+  return tunnelCounters ?? { enabled: 0, connected: 0 }
 })
 
-onMounted(() => {
-  getCounters()
-
-  // periodically reload data
-  counterIntervalId.value = setInterval(getCounters, REFRESH_INTERVAL)
-})
-
-onUnmounted(() => {
-  if (counterIntervalId.value) {
-    clearInterval(counterIntervalId.value)
-  }
-})
-
-async function getCounters() {
-  // show skeleton only the first time
-  if (!counterIntervalId.value) {
-    loading.value.getCounters = true
-  }
-  error.value.title = ''
-  error.value.description = ''
-
-  try {
-    const res = await ubusCall('ns.dashboard', props.method)
-    counters.value = res.data.result
-  } catch (err: any) {
-    console.error(err)
-    error.value.title = t('error.cannot_retrieve_service_status')
-    error.value.description = t(getAxiosErrorMessage(err))
-  } finally {
-    loading.value.getCounters = false
-  }
-}
+const errorTitle = computed(() => (isError.value ? t('error.cannot_retrieve_service_status') : ''))
+const errorDescription = computed(() => (isError.value ? t(getAxiosErrorMessage(error.value)) : ''))
 </script>
 
 <template>
   <NeCard
     :icon="['fas', 'globe']"
     :skeleton-lines="2"
-    :loading="loading.getCounters"
-    :error-title="error.title"
-    :error-description="error.description"
+    :loading="isPending"
+    :error-title="errorTitle"
+    :error-description="errorDescription"
   >
     <!-- title slot -->
     <template #title>
       <slot name="title"></slot>
     </template>
     <div>
-      <NeSkeleton v-if="loading.getCounters" :lines="1" class="w-14"></NeSkeleton>
-      <div v-else>
-        <div>
-          <span class="text-xl">{{ counters.enabled }}</span>
-          <span class="ml-2">{{
-            t('standalone.dashboard.tunnels_enabled', counters.enabled)
-          }}</span>
-        </div>
-        <div>
-          <span class="text-xl">{{ counters.connected }}</span>
-          <span class="ml-2">{{
-            t('standalone.dashboard.tunnels_connected', counters.connected)
-          }}</span>
-        </div>
+      <div>
+        <span class="text-xl">{{ counters.enabled }}</span>
+        <span class="ml-2">{{ t('standalone.dashboard.tunnels_enabled', counters.enabled) }}</span>
+      </div>
+      <div>
+        <span class="text-xl">{{ counters.connected }}</span>
+        <span class="ml-2">{{
+          t('standalone.dashboard.tunnels_connected', counters.connected)
+        }}</span>
       </div>
     </div>
   </NeCard>
diff --git a/src/components/standalone/dashboard/ServiceCard.vue b/src/components/standalone/dashboard/ServiceCard.vue
index 84345fa06..3dc5e0f59 100644
--- a/src/components/standalone/dashboard/ServiceCard.vue
+++ b/src/components/standalone/dashboard/ServiceCard.vue
@@ -4,152 +4,44 @@
 -->
 
 <script setup lang="ts">
-import { ubusCall } from '@/lib/standalone/ubus'
-import { NeBadge, NeCard, NeSkeleton, getAxiosErrorMessage } from '@nethesis/vue-components'
-import { onMounted, onUnmounted, ref, type PropType } from 'vue'
+import { NeBadgeV2, NeCard, getAxiosErrorMessage } from '@nethesis/vue-components'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { faCheck, faWarning, faXmark } from '@fortawesome/free-solid-svg-icons'
-
-interface CardCounter {
-  name: string
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import {
+  useDashboardOverview,
+  type DashboardCounterName,
+  type DashboardServiceName
+} from '@/composables/useDashboardOverview'
+import { getStatusBadge } from '@/lib/standalone/dashboard'
+
+type CardCounter = {
+  name: DashboardCounterName
   label: string
 }
 
-const props = defineProps({
-  serviceName: { type: String },
-  hasStatus: { type: Boolean, default: false },
-  counter: { type: Object as PropType<CardCounter>, default: undefined },
-  title: {
-    type: String
-  },
-  icon: {
-    type: Array<string>
-  }
-})
+const props = defineProps<{
+  serviceName?: DashboardServiceName
+  hasStatus?: boolean
+  counter?: CardCounter
+  title?: string
+  icon?: string[]
+}>()
 
 const { t } = useI18n()
 
-// random refresh interval between 20 and 30 seconds
-const REFRESH_INTERVAL = 20000 + Math.random() * 10 * 1000
-const serviceStatus = ref<any>(null)
-const serviceCounter = ref<any>(null)
-const statusIntervalId = ref(0)
-const counterIntervalId = ref(0)
-
-const loading = ref({
-  getServiceStatus: false,
-  getServiceCounter: false
-})
-
-const error = ref({
-  title: '',
-  description: ''
-})
-
-onMounted(() => {
-  if (props.hasStatus) {
-    getServiceStatus()
-
-    // periodically reload data
-    statusIntervalId.value = setInterval(getServiceStatus, REFRESH_INTERVAL)
-  }
+const { data: overview, isPending, isError, error } = useDashboardOverview()
 
-  if (props.counter) {
-    getServiceCounter()
+const serviceStatus = computed(() =>
+  props.serviceName ? overview.value?.services[props.serviceName] : undefined
+)
+const badge = computed(() => getStatusBadge(serviceStatus.value))
+const serviceCounter = computed(() =>
+  props.counter ? overview.value?.counters[props.counter.name] : undefined
+)
 
-    // periodically reload data
-    counterIntervalId.value = setInterval(getServiceCounter, REFRESH_INTERVAL)
-  }
-})
-
-onUnmounted(() => {
-  if (statusIntervalId.value) {
-    clearInterval(statusIntervalId.value)
-  }
-
-  if (counterIntervalId.value) {
-    clearInterval(counterIntervalId.value)
-  }
-})
-
-async function getServiceStatus() {
-  // show skeleton only the first time
-  if (!statusIntervalId.value) {
-    loading.value.getServiceStatus = true
-  }
-  error.value.title = ''
-  error.value.description = ''
-
-  try {
-    const res = await ubusCall('ns.dashboard', 'service-status', { service: props.serviceName })
-    serviceStatus.value = res.data.result.status
-  } catch (err: any) {
-    console.error(err)
-    error.value.title = t('error.cannot_retrieve_service_status')
-    error.value.description = t(getAxiosErrorMessage(err))
-  } finally {
-    loading.value.getServiceStatus = false
-  }
-}
-
-async function getServiceCounter() {
-  // show skeleton only the first time
-  if (!counterIntervalId.value) {
-    loading.value.getServiceCounter = true
-  }
-  error.value.title = ''
-  error.value.description = ''
-
-  try {
-    const res = await ubusCall('ns.dashboard', 'counter', { service: props.counter?.name })
-    serviceCounter.value = res.data.result.count
-  } catch (err: any) {
-    console.error(err)
-    error.value.title = t('error.cannot_retrieve_service_status')
-    error.value.description = t(getAxiosErrorMessage(err))
-  } finally {
-    loading.value.getServiceCounter = false
-  }
-}
-
-function getBadgeKind(status: string) {
-  switch (status) {
-    case 'ok':
-      return 'success'
-    case 'warning':
-      return 'warning'
-    case 'disabled':
-      return 'secondary'
-    default:
-      return 'error'
-  }
-}
-
-function getBadgeText(status: string) {
-  switch (status) {
-    case 'ok':
-      return t('standalone.dashboard.active')
-    case 'warning':
-      return t('standalone.dashboard.warning')
-    case 'disabled':
-      return t('standalone.dashboard.inactive')
-    default:
-      return t('standalone.dashboard.unknown')
-  }
-}
-
-function getBadgeIcon(status: string) {
-  switch (status) {
-    case 'ok':
-      return faCheck
-    case 'warning':
-      return faWarning
-    case 'disabled':
-      return faXmark
-    default:
-      return faXmark
-  }
-}
+const errorTitle = computed(() => (isError.value ? t('error.cannot_retrieve_service_status') : ''))
+const errorDescription = computed(() => (isError.value ? t(getAxiosErrorMessage(error.value)) : ''))
 </script>
 
 <template>
@@ -157,28 +49,23 @@ function getBadgeIcon(status: string) {
     :title="title"
     :icon="icon"
     :skeleton-lines="2"
-    :loading="loading.getServiceStatus || loading.getServiceCounter"
-    :error-title="error.title"
-    :error-description="error.description"
+    :loading="isPending"
+    :error-title="errorTitle"
+    :error-description="errorDescription"
   >
     <!-- title slot (if present) -->
     <template #title>
       <slot name="title"></slot>
     </template>
     <div class="space-y-3">
-      <NeBadge
-        v-if="hasStatus"
-        :kind="getBadgeKind(serviceStatus)"
-        :text="getBadgeText(serviceStatus)"
-        :icon="getBadgeIcon(serviceStatus)"
-      />
-      <template v-if="counter">
-        <NeSkeleton v-if="loading.getServiceCounter" :lines="1" class="w-14"></NeSkeleton>
-        <div v-else>
-          <span class="text-xl">{{ serviceCounter }}</span>
-          <span v-if="counter.label" class="ml-2">{{ counter.label }}</span>
-        </div>
-      </template>
+      <NeBadgeV2 v-if="hasStatus" :kind="badge.kind">
+        <FontAwesomeIcon :icon="badge.icon" class="size-4" />
+        {{ t(badge.textKey) }}
+      </NeBadgeV2>
+      <div v-if="counter">
+        <span class="text-xl">{{ serviceCounter ?? '-' }}</span>
+        <span v-if="counter.label" class="ml-2">{{ counter.label }}</span>
+      </div>
     </div>
   </NeCard>
 </template>
diff --git a/src/components/standalone/dashboard/SystemInfoCard.vue b/src/components/standalone/dashboard/SystemInfoCard.vue
index c94965d67..76b785252 100644
--- a/src/components/standalone/dashboard/SystemInfoCard.vue
+++ b/src/components/standalone/dashboard/SystemInfoCard.vue
@@ -15,49 +15,83 @@ import {
   byteFormat1024,
   NeSpinner
 } from '@nethesis/vue-components'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { round } from 'lodash-es'
 import { getStandaloneRoutePrefix } from '@/lib/router'
 import { useRouter } from 'vue-router'
 import type { SystemUpdate } from '@/views/standalone/system/UpdateView.vue'
+import { useQuery } from '@tanstack/vue-query'
+import { faServer, faWarning } from '@fortawesome/free-solid-svg-icons'
+import { useDashboardOverview, type StorageEntry } from '@/composables/useDashboardOverview'
 
 const { t } = useI18n()
 const router = useRouter()
 
-// random refresh interval between 20 and 30 seconds
-const REFRESH_INTERVAL = 20000 + Math.random() * 10 * 1000
-const systemInfo = ref<any>({})
-const loadDataIntervalId = ref(0)
-const systemUpdateData = ref<SystemUpdate | null>(null)
+type SystemUpdateResponse = {
+  data: SystemUpdate
+}
 
-const freeMemory = ref(0)
-const totalMemory = ref(0)
-const memoryUsagePerc = ref(0)
+type Usage = {
+  free: number
+  total: number
+  perc: number
+}
 
-const freeRoot = ref(0)
-const totalRoot = ref(0)
-const rootUsagePerc = ref(0)
+// check-system-update queries the remote update server: poll it sparingly
+const UPDATE_CHECK_INTERVAL = 30 * 60 * 1000
 
-const freeTmpfs = ref(0)
-const totalTmpfs = ref(0)
-const tmpfsUsagePerc = ref(0)
+const {
+  data: overview,
+  isPending: isSystemInfoPending,
+  isError: isSystemInfoError,
+  error: systemInfoError
+} = useDashboardOverview()
 
-const freeDataStorage = ref(0)
-const totalDataStorage = ref(0)
-const dataStorageUsagePerc = ref(0)
+const systemInfo = computed(() => overview.value?.system ?? null)
 
-const loading = ref({
-  getSystemInfo: true,
-  getUpdatesStatus: true
+const { data: systemUpdateData, isFetching: isUpdateStatusFetching } = useQuery({
+  queryKey: ['dashboard', 'check-system-update'],
+  queryFn: ({ signal }) =>
+    ubusCall<SystemUpdateResponse>('ns.update', 'check-system-update', {}, { signal }),
+  select: (res) => res.data,
+  refetchInterval: UPDATE_CHECK_INTERVAL,
+  staleTime: UPDATE_CHECK_INTERVAL,
+  // run only after system-info has returned data
+  enabled: computed(() => !!systemInfo.value)
 })
 
-const error = ref({
-  title: '',
-  description: ''
+const errorTitle = computed(() =>
+  isSystemInfoError.value ? t('error.cannot_retrieve_system_info') : ''
+)
+const errorDescription = computed(() =>
+  isSystemInfoError.value ? t(getAxiosErrorMessage(systemInfoError.value)) : ''
+)
+
+function usageFromStorage(entry?: StorageEntry): Usage {
+  const free = entry?.available_bytes ?? 0
+  const used = entry?.used_bytes ?? 0
+  const total = free + used
+  return { free, total, perc: total ? round((used / total) * 100) : 0 }
+}
+
+const memory = computed<Usage>(() => {
+  const mem = systemInfo.value?.memory
+  if (!mem) {
+    return { free: 0, total: 0, perc: 0 }
+  }
+
+  const total = mem.mem_total
+  const free = mem.mem_available
+  const used = total - free
+  return { free, total, perc: total ? round((used / total) * 100) : 0 }
 })
 
+const root = computed<Usage>(() => usageFromStorage(systemInfo.value?.storage['/']))
+const tmpfs = computed<Usage>(() => usageFromStorage(systemInfo.value?.storage['tmpfs']))
+const dataStorage = computed<Usage>(() => usageFromStorage(systemInfo.value?.storage['/mnt/data']))
+
 const isUpdateAvailable = computed(
   () =>
     systemUpdateData.value?.lastVersion &&
@@ -68,72 +102,6 @@ const isUpdateScheduled = computed(
   () => systemUpdateData.value?.scheduledAt && systemUpdateData.value.scheduledAt != -1
 )
 
-onMounted(() => {
-  loadData()
-
-  // periodically reload system info
-  loadDataIntervalId.value = setInterval(loadData, REFRESH_INTERVAL)
-})
-
-onUnmounted(() => {
-  if (loadDataIntervalId.value) {
-    clearInterval(loadDataIntervalId.value)
-  }
-})
-
-function loadData() {
-  error.value.title = ''
-  error.value.description = ''
-  getSystemInfo()
-  getUpdatesStatus()
-}
-
-async function getSystemInfo() {
-  try {
-    const res = await ubusCall('ns.dashboard', 'system-info')
-    systemInfo.value = res.data.result
-
-    // Support both old format (available_bytes, used_bytes) and new format (mem_total, mem_available)
-    // Introduced by https://github.com/NethServer/nethsecurity/pull/1569, can be removed after the next release since controllers should be updated
-    if (
-      systemInfo.value.memory.mem_total != undefined &&
-      systemInfo.value.memory.mem_available != undefined
-    ) {
-      // New format
-      totalMemory.value = systemInfo.value.memory.mem_total
-      freeMemory.value = systemInfo.value.memory.mem_available
-    } else {
-      // Old format
-      freeMemory.value = systemInfo.value.memory.available_bytes
-      const usedMemory = systemInfo.value.memory.used_bytes
-      totalMemory.value = usedMemory + freeMemory.value
-    }
-    const usedMemory = totalMemory.value - freeMemory.value
-    memoryUsagePerc.value = round((usedMemory / totalMemory.value) * 100)
-
-    freeRoot.value = systemInfo.value.storage['/'].available_bytes
-    const usedRoot = systemInfo.value.storage['/'].used_bytes
-    totalRoot.value = usedRoot + freeRoot.value
-    rootUsagePerc.value = round((usedRoot / totalRoot.value) * 100)
-
-    freeTmpfs.value = systemInfo.value.storage['tmpfs'].available_bytes
-    const usedTmpfs = systemInfo.value.storage['tmpfs'].used_bytes
-    totalTmpfs.value = usedTmpfs + freeTmpfs.value
-    tmpfsUsagePerc.value = round((usedTmpfs / totalTmpfs.value) * 100)
-
-    freeDataStorage.value = systemInfo.value.storage['/mnt/data'].available_bytes
-    const usedDataStorage = systemInfo.value.storage['/mnt/data'].used_bytes
-    totalDataStorage.value = usedDataStorage + freeDataStorage.value
-    dataStorageUsagePerc.value = round((usedDataStorage / totalDataStorage.value) * 100)
-  } catch (err: any) {
-    console.error(err)
-    error.value.title = t('error.cannot_retrieve_system_info')
-    error.value.description = t(getAxiosErrorMessage(err))
-  } finally {
-    loading.value.getSystemInfo = false
-  }
-}
-
 function getProgressBarColor(progress: number) {
   if (progress < 75) {
     return 'primary'
@@ -151,30 +119,21 @@ function goToSystemSettings() {
 function goToUpdates() {
   router.push(`${getStandaloneRoutePrefix()}/system/update`)
 }
-
-async function getUpdatesStatus() {
-  try {
-    systemUpdateData.value = (await ubusCall('ns.update', 'check-system-update')).data
-    // Ignore error: toast error notification is enough here
-  } finally {
-    loading.value.getUpdatesStatus = false
-  }
-}
 </script>
 
 <template>
   <NeCard
     :title="t('standalone.dashboard.system')"
     :skeleton-lines="5"
-    :loading="loading.getSystemInfo"
-    :error-title="error.title"
-    :error-description="error.description"
+    :loading="isSystemInfoPending"
+    :error-title="errorTitle"
+    :error-description="errorDescription"
   >
     <div class="mt-3 mb-2 flex items-center">
       <div
         class="mr-3 flex h-9 w-9 items-center justify-center rounded-full bg-primary-400 dark:bg-primary-700"
       >
-        <FontAwesomeIcon :icon="['fas', 'server']" class="h-5 w-5 text-white" />
+        <FontAwesomeIcon :icon="faServer" class="h-5 w-5 text-white" />
       </div>
       <div>{{ systemInfo?.hardware || '-' }}</div>
     </div>
@@ -184,10 +143,10 @@ async function getUpdatesStatus() {
         <div class="inline-flex items-center gap-1">
           <span>{{ systemInfo?.hostname || '-' }}</span>
           <!-- warning for default hostname -->
-          <NeTooltip v-if="systemInfo.hostname === 'NethSec'" interactive class="leading-none">
+          <NeTooltip v-if="systemInfo?.hostname === 'NethSec'" interactive class="leading-none">
             <template #trigger>
-              <font-awesome-icon
-                :icon="['fas', 'warning']"
+              <FontAwesomeIcon
+                :icon="faWarning"
                 class="h-4 w-4 text-amber-700 dark:text-amber-500"
                 aria-hidden="true"
               />
@@ -212,12 +171,12 @@ async function getUpdatesStatus() {
         <span class="mr-3 font-semibold">{{ t('standalone.dashboard.operating_system') }}</span>
         <div class="inline-flex items-center gap-2">
           <span>{{ systemInfo?.version?.release || '-' }}</span>
-          <NeSpinner v-if="loading.getUpdatesStatus" size="4" />
+          <NeSpinner v-if="isUpdateStatusFetching" size="4" />
           <!-- warning for image update available -->
           <NeTooltip v-if="isUpdateAvailable && !isUpdateScheduled" class="leading-none">
             <template #trigger>
-              <font-awesome-icon
-                :icon="['fas', 'warning']"
+              <FontAwesomeIcon
+                :icon="faWarning"
                 class="h-4 w-4 text-amber-700 dark:text-amber-500"
                 aria-hidden="true"
               />
@@ -251,14 +210,14 @@ async function getUpdatesStatus() {
           <span class="mr-3 font-semibold">{{ t('standalone.dashboard.memory_usage') }}</span>
           <span>{{
             t('standalone.dashboard.usage_free_of_total', {
-              free: byteFormat1024(freeMemory),
-              total: byteFormat1024(totalMemory)
+              free: byteFormat1024(memory.free),
+              total: byteFormat1024(memory.total)
             })
           }}</span>
           <NeProgressBar
-            :progress="memoryUsagePerc"
+            :progress="memory.perc"
             size="sm"
-            :color="getProgressBarColor(memoryUsagePerc)"
+            :color="getProgressBarColor(memory.perc)"
             class="my-1"
           />
         </div>
@@ -266,14 +225,14 @@ async function getUpdatesStatus() {
           <span class="mr-3 font-semibold">{{ t('standalone.dashboard.root_usage') }}</span>
           <span>{{
             t('standalone.dashboard.usage_free_of_total', {
-              free: byteFormat1024(freeRoot),
-              total: byteFormat1024(totalRoot)
+              free: byteFormat1024(root.free),
+              total: byteFormat1024(root.total)
             })
           }}</span>
           <NeProgressBar
-            :progress="rootUsagePerc"
+            :progress="root.perc"
             size="sm"
-            :color="getProgressBarColor(rootUsagePerc)"
+            :color="getProgressBarColor(root.perc)"
             class="my-1"
           />
         </div>
@@ -281,29 +240,29 @@ async function getUpdatesStatus() {
           <span class="mr-3 font-semibold">{{ t('standalone.dashboard.tmpfs_usage') }}</span>
           <span>{{
             t('standalone.dashboard.usage_free_of_total', {
-              free: byteFormat1024(freeTmpfs),
-              total: byteFormat1024(totalTmpfs)
+              free: byteFormat1024(tmpfs.free),
+              total: byteFormat1024(tmpfs.total)
             })
           }}</span>
           <NeProgressBar
-            :progress="tmpfsUsagePerc"
+            :progress="tmpfs.perc"
             size="sm"
-            :color="getProgressBarColor(tmpfsUsagePerc)"
+            :color="getProgressBarColor(tmpfs.perc)"
             class="my-1"
           />
         </div>
-        <div v-if="freeDataStorage != 0 || totalDataStorage != 0">
+        <div v-if="dataStorage.free != 0 || dataStorage.total != 0">
           <span class="mr-3 font-semibold">{{ t('standalone.dashboard.storage_usage') }}</span>
           <span>{{
             t('standalone.dashboard.usage_free_of_total', {
-              free: byteFormat1024(freeDataStorage),
-              total: byteFormat1024(totalDataStorage)
+              free: byteFormat1024(dataStorage.free),
+              total: byteFormat1024(dataStorage.total)
             })
           }}</span>
           <NeProgressBar
-            :progress="dataStorageUsagePerc"
+            :progress="dataStorage.perc"
             size="sm"
-            :color="getProgressBarColor(dataStorageUsagePerc)"
+            :color="getProgressBarColor(dataStorage.perc)"
             class="my-1"
           />
         </div>
diff --git a/src/components/standalone/dashboard/ThreatShieldIpCard.vue b/src/components/standalone/dashboard/ThreatShieldIpCard.vue
index e3059d63c..52bbcb05c 100644
--- a/src/components/standalone/dashboard/ThreatShieldIpCard.vue
+++ b/src/components/standalone/dashboard/ThreatShieldIpCard.vue
@@ -4,163 +4,61 @@
 -->
 
 <script setup lang="ts">
-import { ubusCall } from '@/lib/standalone/ubus'
 import {
-  NeBadge,
+  NeBadgeV2,
   NeCard,
   NeLink,
-  NeSkeleton,
   NeTooltip,
   getAxiosErrorMessage
 } from '@nethesis/vue-components'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { faCheck, faWarning, faXmark } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faWarning } from '@fortawesome/free-solid-svg-icons'
 import router from '@/router'
 import { getStandaloneRoutePrefix } from '@/lib/router'
 import { useRoute } from 'vue-router'
+import {
+  DASHBOARD_REFRESH_INTERVAL,
+  useDashboardOverview
+} from '@/composables/useDashboardOverview'
+import { useThreatShieldSettings } from '@/composables/useThreatShieldSettings'
+import { getStatusBadge } from '@/lib/standalone/dashboard'
 
 const { t } = useI18n()
 const route = useRoute()
 
-// random refresh interval between 20 and 30 seconds
-const REFRESH_INTERVAL = 20000 + Math.random() * 10 * 1000
-const serviceStatus = ref<any>(null)
-const serviceCounter = ref<any>(null)
-const threatShieldConfig = ref<any>(null)
-const intervalId = ref(0)
-
-const loading = ref({
-  getServiceStatus: false,
-  getServiceCounter: false,
-  getThreatShieldConfig: false
-})
-
-const error = ref({
-  title: '',
-  description: ''
-})
-
-const isLoggingDisabled = computed(() => {
-  return (
-    !threatShieldConfig.value?.ban_logforwardlan &&
-    !threatShieldConfig.value?.ban_logforwardwan &&
-    !threatShieldConfig.value?.ban_loginput &&
-    !threatShieldConfig.value?.ban_logprerouting
-  )
-})
-
-onMounted(() => {
-  loadData()
-
-  // periodically reload data
-  intervalId.value = setInterval(loadData, REFRESH_INTERVAL)
-})
-
-onUnmounted(() => {
-  if (intervalId.value) {
-    clearInterval(intervalId.value)
-  }
-})
-
-function loadData() {
-  getServiceStatus()
-  getServiceCounter()
-  getThreatShieldConfig()
-}
-
-async function getServiceStatus() {
-  // show skeleton only the first time
-  if (!intervalId.value) {
-    loading.value.getServiceStatus = true
-  }
-  error.value.title = ''
-  error.value.description = ''
-
-  try {
-    const res = await ubusCall('ns.dashboard', 'service-status', { service: 'banip' })
-    serviceStatus.value = res.data.result.status
-  } catch (err: any) {
-    console.error(err)
-    error.value.title = t('error.cannot_retrieve_service_status')
-    error.value.description = t(getAxiosErrorMessage(err))
-  } finally {
-    loading.value.getServiceStatus = false
-  }
-}
-
-async function getServiceCounter() {
-  // show skeleton only the first time
-  if (!intervalId.value) {
-    loading.value.getServiceCounter = true
-  }
-  error.value.title = ''
-  error.value.description = ''
-
-  try {
-    const res = await ubusCall('ns.dashboard', 'counter', { service: 'threat_shield_ip' })
-    serviceCounter.value = res.data.result.count
-  } catch (err: any) {
-    console.error(err)
-    error.value.title = t('error.cannot_retrieve_service_status')
-    error.value.description = t(getAxiosErrorMessage(err))
-  } finally {
-    loading.value.getServiceCounter = false
-  }
-}
-
-async function getThreatShieldConfig() {
-  try {
-    loading.value.getThreatShieldConfig = true
-    const res = await ubusCall('ns.threatshield', 'list-settings')
-    threatShieldConfig.value = res.data.data
-  } catch (err: any) {
-    console.error(err)
-    error.value.title = t('error.cannot_retrieve_threat_shield_settings')
-    error.value.description = t(getAxiosErrorMessage(err))
-  } finally {
-    loading.value.getThreatShieldConfig = false
-  }
-}
-
-function getBadgeKind(status: string) {
-  switch (status) {
-    case 'ok':
-      return 'success'
-    case 'warning':
-      return 'warning'
-    case 'disabled':
-      return 'secondary'
-    default:
-      return 'error'
-  }
-}
-
-function getBadgeText(status: string) {
-  switch (status) {
-    case 'ok':
-      return t('standalone.dashboard.active')
-    case 'warning':
-      return t('standalone.dashboard.warning')
-    case 'disabled':
-      return t('standalone.dashboard.inactive')
-    default:
-      return t('standalone.dashboard.unknown')
-  }
-}
-
-function getBadgeIcon(status: string) {
-  switch (status) {
-    case 'ok':
-      return faCheck
-    case 'warning':
-      return faWarning
-    case 'disabled':
-      return faXmark
-    default:
-      return faXmark
-  }
-}
+const {
+  data: overview,
+  isPending: isOverviewPending,
+  isError: isOverviewError,
+  error: overviewError
+} = useDashboardOverview()
+
+const {
+  data: tsSettings,
+  isPending: isSettingsPending,
+  isError: isSettingsError,
+  error: settingsError
+} = useThreatShieldSettings({ refetchInterval: DASHBOARD_REFRESH_INTERVAL })
+
+const badge = computed(() => getStatusBadge(overview.value?.services.banip))
+const serviceCounter = computed(() => overview.value?.counters.threat_shield_ip)
+
+const isLoggingDisabled = computed(
+  () =>
+    !tsSettings.value?.ban_logforwardlan &&
+    !tsSettings.value?.ban_logforwardwan &&
+    !tsSettings.value?.ban_loginput &&
+    !tsSettings.value?.ban_logprerouting
+)
+
+const isPending = computed(() => isOverviewPending.value || isSettingsPending.value)
+const isError = computed(() => isOverviewError.value || isSettingsError.value)
+const error = computed(() => overviewError.value ?? settingsError.value)
+
+const errorTitle = computed(() => (isError.value ? t('error.cannot_retrieve_service_status') : ''))
+const errorDescription = computed(() => (isError.value ? t(getAxiosErrorMessage(error.value)) : ''))
 
 function goTo(path: string) {
   router.push(`${getStandaloneRoutePrefix(route)}${path}`)
@@ -171,9 +69,9 @@ function goTo(path: string) {
   <NeCard
     :icon="['fas', 'shield']"
     :skeleton-lines="2"
-    :loading="loading.getServiceStatus || loading.getServiceCounter"
-    :error-title="error.title"
-    :error-description="error.description"
+    :loading="isPending"
+    :error-title="errorTitle"
+    :error-description="errorDescription"
   >
     <!-- title slot -->
     <template #title>
@@ -183,19 +81,17 @@ function goTo(path: string) {
     </template>
     <div class="space-y-3">
       <!-- status -->
-      <NeBadge
-        :kind="getBadgeKind(serviceStatus)"
-        :text="getBadgeText(serviceStatus)"
-        :icon="getBadgeIcon(serviceStatus)"
-      />
+      <NeBadgeV2 :kind="badge.kind">
+        <FontAwesomeIcon :icon="badge.icon" class="size-4" />
+        {{ t(badge.textKey) }}
+      </NeBadgeV2>
       <!-- monitoring disabled warning -->
       <NeTooltip v-if="isLoggingDisabled" class="inline-block">
         <template #trigger>
-          <NeBadge
-            kind="warning"
-            :text="t('standalone.dashboard.monitoring_disabled')"
-            :icon="faWarning"
-          />
+          <NeBadgeV2 kind="amber">
+            <FontAwesomeIcon :icon="faWarning" class="size-4" />
+            {{ t('standalone.dashboard.monitoring_disabled') }}
+          </NeBadgeV2>
         </template>
         <template #content>
           <i18n-t keypath="standalone.dashboard.monitoring_disabled_tooltip" tag="p" scope="global">
@@ -208,9 +104,8 @@ function goTo(path: string) {
         </template>
       </NeTooltip>
       <!-- counter -->
-      <NeSkeleton v-if="loading.getServiceCounter" :lines="1" class="w-14"></NeSkeleton>
-      <div v-else>
-        <span class="text-xl">{{ serviceCounter }}</span>
+      <div>
+        <span class="text-xl">{{ serviceCounter ?? '-' }}</span>
         <span class="ml-2">{{ t('standalone.dashboard.blocked_ips_last_hour') }}</span>
       </div>
     </div>
diff --git a/src/components/standalone/dashboard/WireguardCard.vue b/src/components/standalone/dashboard/WireguardCard.vue
index 7008f649a..7ea3032a8 100644
--- a/src/components/standalone/dashboard/WireguardCard.vue
+++ b/src/components/standalone/dashboard/WireguardCard.vue
@@ -4,63 +4,55 @@
 -->
 
 <script setup lang="ts">
-import { ubusCall } from '@/lib/standalone/ubus'
 import { NeCard, getAxiosErrorMessage } from '@nethesis/vue-components'
-import { ref } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useIntervalFn } from '@vueuse/core'
+import { useQuery } from '@tanstack/vue-query'
+import { ubusCall } from '@/lib/standalone/ubus'
+import { DASHBOARD_REFRESH_INTERVAL } from '@/composables/useDashboardOverview'
 import type { Tunnel } from '@/views/standalone/vpn/WireguardTunnelView.vue'
 
-const { t } = useI18n()
-
-const enabledServers = ref(0)
-const activePeers = ref(0)
-const loading = ref(true)
-const error = ref<Error>()
-
-async function getCounters() {
-  error.value = undefined
-
-  try {
-    const res = await ubusCall('ns.wireguard', 'list-servers')
-    const instances: Tunnel[] = res.data.instances
-
-    // Count enabled servers
-    enabledServers.value = instances.filter((instance: Tunnel) => instance.enabled).length
-
-    // Count active peers across all servers
-    activePeers.value = 0
-    instances.forEach((instance: Tunnel) => {
-      activePeers.value += instance.peers.filter((peer) => peer.active).length
-    })
-  } catch (err) {
-    error.value = err as Error
-  } finally {
-    loading.value = false
+type ListServersResponse = {
+  data: {
+    instances: Tunnel[]
   }
 }
 
-// random refresh interval between 20 and 30 seconds
-const REFRESH_INTERVAL = (20 + Math.random() * 10) * 1000
+const { t } = useI18n()
+
+const {
+  data: counters,
+  isPending,
+  isError,
+  error
+} = useQuery({
+  queryKey: ['dashboard', 'wireguard', 'servers'],
+  queryFn: ({ signal }) =>
+    ubusCall<ListServersResponse>('ns.wireguard', 'list-servers', {}, { signal }),
+  select: (res) => ({
+    enabledServers: res.data.instances.filter((instance) => instance.enabled).length,
+    activePeers: res.data.instances.reduce(
+      (sum, instance) => sum + instance.peers.filter((peer) => peer.active).length,
+      0
+    )
+  }),
+  refetchInterval: DASHBOARD_REFRESH_INTERVAL
+})
 
-useIntervalFn(
-  () => {
-    getCounters()
-  },
-  REFRESH_INTERVAL,
-  {
-    immediateCallback: true
-  }
-)
+const enabledServers = computed(() => counters.value?.enabledServers ?? 0)
+const activePeers = computed(() => counters.value?.activePeers ?? 0)
+
+const errorTitle = computed(() => (isError.value ? t('error.cannot_retrieve_wireguard_stats') : ''))
+const errorDescription = computed(() => (isError.value ? t(getAxiosErrorMessage(error.value)) : ''))
 </script>
 
 <template>
   <NeCard
     :icon="['fas', 'globe']"
     :skeleton-lines="2"
-    :loading="loading"
-    :error-title="error ? t('error.cannot_retrieve_wireguard_stats') : ''"
-    :error-description="error ? t(getAxiosErrorMessage(error)) : ''"
+    :loading="isPending"
+    :error-title="errorTitle"
+    :error-description="errorDescription"
   >
     <!-- title slot -->
     <template #title>
diff --git a/src/components/standalone/monitoring/SecurityMonitor.vue b/src/components/standalone/monitoring/SecurityMonitor.vue
index c069c29cd..8bd028ea6 100644
--- a/src/components/standalone/monitoring/SecurityMonitor.vue
+++ b/src/components/standalone/monitoring/SecurityMonitor.vue
@@ -91,6 +91,8 @@ async function getThreatShieldSettings() {
   error.value.getThreatShieldSettingsDetails = ''
 
   try {
+    // @deprecated fetch via useThreatShieldSettings() composable
+    // (@/composables/useThreatShieldSettings) — adds abort-on-unmount signaling
     const res = await ubusCall('ns.threatshield', 'list-settings')
     isThreatShieldEnabled.value = res.data.data.enabled
 
diff --git a/src/components/standalone/security/threat_shield/BlocklistTab.vue b/src/components/standalone/security/threat_shield/BlocklistTab.vue
index 87f010375..20b9b0964 100644
--- a/src/components/standalone/security/threat_shield/BlocklistTab.vue
+++ b/src/components/standalone/security/threat_shield/BlocklistTab.vue
@@ -78,6 +78,8 @@ async function fetchBlocklists() {
   try {
     loading.value = true
     blocklists.value = (await ubusCall('ns.threatshield', 'list-blocklist')).data.data
+    // @deprecated fetch via useThreatShieldSettings() composable
+    // (@/composables/useThreatShieldSettings) — adds abort-on-unmount signaling
     isThreatShieldEnabled.value = (
       await ubusCall('ns.threatshield', 'list-settings')
     ).data.data.enabled
diff --git a/src/components/standalone/security/threat_shield/GeoBlockingTab.vue b/src/components/standalone/security/threat_shield/GeoBlockingTab.vue
index 77d7aedfd..edf4ba536 100644
--- a/src/components/standalone/security/threat_shield/GeoBlockingTab.vue
+++ b/src/components/standalone/security/threat_shield/GeoBlockingTab.vue
@@ -99,6 +99,8 @@ const {
   error: settingsError
 } = useQuery({
   queryKey: ['threatshield', 'settings'],
+  // @deprecated fetch via useThreatShieldSettings() composable
+  // (@/composables/useThreatShieldSettings) — adds abort-on-unmount signaling
   queryFn: () =>
     ubusCall<{ data: { data: { enabled: boolean } } }>('ns.threatshield', 'list-settings'),
   select: (res) => res.data.data
diff --git a/src/components/standalone/security/threat_shield/SettingsTab.vue b/src/components/standalone/security/threat_shield/SettingsTab.vue
index 7fa8333fe..a7bcc1a29 100644
--- a/src/components/standalone/security/threat_shield/SettingsTab.vue
+++ b/src/components/standalone/security/threat_shield/SettingsTab.vue
@@ -98,6 +98,8 @@ type ListSettingsResponse = {
 async function fetchSettings() {
   try {
     loading.value.listSettings = true
+    // @deprecated fetch via useThreatShieldSettings() composable
+    // (@/composables/useThreatShieldSettings) — adds abort-on-unmount signaling
     const res = await ubusCall<ListSettingsResponse>('ns.threatshield', 'list-settings')
     const threatShieldConfig = res.data.data
     isThreatShieldEnabled.value = threatShieldConfig.enabled
diff --git a/src/composables/useAlerts.ts b/src/composables/useAlerts.ts
index ed059b39d..016e1ec85 100644
--- a/src/composables/useAlerts.ts
+++ b/src/composables/useAlerts.ts
@@ -1,6 +1,5 @@
 import { ubusCall } from '@/lib/standalone/ubus'
 import { useQuery } from '@tanstack/vue-query'
-import type { AxiosResponse } from 'axios'
 import type { NeNotificationV2 } from '@nethesis/vue-components'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -17,7 +16,9 @@ export type Alert = {
 }
 
 type ListAlertsResponse = {
-  alerts: Alert[]
+  data: {
+    alerts: Alert[]
+  }
 }
 
 function getSeverityBadgeKind(severity: string | undefined): NeNotificationV2['kind'] {
@@ -37,8 +38,8 @@ export function useAlerts() {
 
   const { data, error, status, isPending, isError, dataUpdatedAt } = useQuery({
     queryKey: ['metrics', 'alerts'],
-    queryFn: async () =>
-      await ubusCall<AxiosResponse<ListAlertsResponse>>('ns.telegraf', 'list-alerts'),
+    queryFn: ({ signal }) =>
+      ubusCall<ListAlertsResponse>('ns.telegraf', 'list-alerts', {}, { signal }),
     select: (response) => response.data.alerts,
     refetchInterval: 15000,
     // Pause polling while a disruptive system action (reboot, update, image
diff --git a/src/composables/useDashboardOverview.ts b/src/composables/useDashboardOverview.ts
new file mode 100644
index 000000000..1142b6489
--- /dev/null
+++ b/src/composables/useDashboardOverview.ts
@@ -0,0 +1,87 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { ubusCall } from '@/lib/standalone/ubus'
+import { useQuery } from '@tanstack/vue-query'
+
+export type ServiceStatus = 'ok' | 'warning' | 'error' | 'disabled' | null
+
+export type StorageEntry = {
+  used_bytes: number
+  available_bytes: number
+}
+
+export type SystemInfo = {
+  uptime: number
+  load: [number, number, number]
+  version: {
+    arch: string
+    release: string
+  }
+  hostname: string
+  hardware: string
+  memory: {
+    mem_total: number
+    mem_available: number
+  }
+  storage: {
+    '/': StorageEntry
+    '/mnt/data': StorageEntry
+    tmpfs: StorageEntry
+  }
+}
+
+export type TunnelCounters = {
+  enabled: number
+  connected: number
+}
+
+// Every section can degrade to null if the corresponding subsystem fails on
+// the firewall; the section name is then listed in `errors`.
+export type DashboardOverview = {
+  system: SystemInfo | null
+  services: {
+    dns_configured: ServiceStatus
+    mwan: ServiceStatus
+    openvpn_rw: ServiceStatus
+    threat_shield_dns: ServiceStatus
+    dedalo: ServiceStatus
+    banip: ServiceStatus
+  }
+  counters: {
+    hosts: number | null
+    openvpn_rw: number | null
+    threat_shield_ip: number | null
+  }
+  vpn: {
+    ipsec: TunnelCounters | null
+    ovpn: TunnelCounters | null
+  }
+  errors: string[]
+}
+
+export type DashboardServiceName = keyof DashboardOverview['services']
+export type DashboardCounterName = keyof DashboardOverview['counters']
+
+// ubusCall returns the HTTP body (it already unwraps the AxiosResponse). The
+// api-server wraps every ubus result under `data`, and the ns.dashboard script
+// wraps its output under `result`.
+type DashboardOverviewResponse = {
+  data: {
+    result: DashboardOverview
+  }
+}
+
+export const DASHBOARD_REFRESH_INTERVAL = 20_000
+
+export function useDashboardOverview() {
+  // The same query key is shared by all dashboard cards: TanStack Query
+  // deduplicates them into a single HTTP request per refresh interval
+  return useQuery({
+    queryKey: ['dashboard', 'overview'],
+    queryFn: ({ signal }) =>
+      ubusCall<DashboardOverviewResponse>('ns.dashboard', 'dashboard-v2', {}, { signal }),
+    select: (res) => res.data.result,
+    refetchInterval: DASHBOARD_REFRESH_INTERVAL
+  })
+}
diff --git a/src/composables/useIpsStatus.ts b/src/composables/useIpsStatus.ts
new file mode 100644
index 000000000..a2d40bf6f
--- /dev/null
+++ b/src/composables/useIpsStatus.ts
@@ -0,0 +1,30 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { ubusCall } from '@/lib/standalone/ubus'
+import { useQuery } from '@tanstack/vue-query'
+
+export type IpsStatus = {
+  enabled: boolean
+  events: number
+}
+
+// ubusCall unwraps the AxiosResponse; the api-server wraps the ubus result
+// under `data`.
+type IpsStatusResponse = {
+  data: {
+    status: IpsStatus
+  }
+}
+
+// Shared query for the IPS (snort) status. The `signal` from the queryFn
+// context is threaded into ubusCall so the request is aborted when the last
+// consuming component unmounts.
+export function useIpsStatus(options?: { refetchInterval?: number }) {
+  return useQuery({
+    queryKey: ['ips', 'status'],
+    queryFn: ({ signal }) => ubusCall<IpsStatusResponse>('ns.snort', 'status', {}, { signal }),
+    select: (res) => res.data.status,
+    refetchInterval: options?.refetchInterval
+  })
+}
diff --git a/src/composables/useThreatShieldSettings.ts b/src/composables/useThreatShieldSettings.ts
new file mode 100644
index 000000000..53b0700ff
--- /dev/null
+++ b/src/composables/useThreatShieldSettings.ts
@@ -0,0 +1,36 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { ubusCall } from '@/lib/standalone/ubus'
+import { useQuery } from '@tanstack/vue-query'
+
+// Different consumers read different fields of the ThreatShield IP
+// list-settings payload, so all are optional here.
+export type ThreatShieldSettings = {
+  enabled?: boolean
+  ban_logforwardlan?: boolean
+  ban_logforwardwan?: boolean
+  ban_loginput?: boolean
+  ban_logprerouting?: boolean
+}
+
+// api-server wraps the ubus result under `data`, and ns.threatshield wraps its
+// own output under a second `data`.
+type ThreatShieldSettingsResponse = {
+  data: {
+    data: ThreatShieldSettings
+  }
+}
+
+// Shared query for ThreatShield IP settings (ns.threatshield list-settings).
+// The `signal` from the queryFn context is threaded into ubusCall so the
+// request is aborted when the last consuming component unmounts.
+export function useThreatShieldSettings(options?: { refetchInterval?: number }) {
+  return useQuery({
+    queryKey: ['threatshield', 'settings'],
+    queryFn: ({ signal }) =>
+      ubusCall<ThreatShieldSettingsResponse>('ns.threatshield', 'list-settings', {}, { signal }),
+    select: (res) => res.data.data,
+    refetchInterval: options?.refetchInterval
+  })
+}
diff --git a/src/lib/__tests__/dashboard.spec.ts b/src/lib/__tests__/dashboard.spec.ts
new file mode 100644
index 000000000..9572c2c2b
--- /dev/null
+++ b/src/lib/__tests__/dashboard.spec.ts
@@ -0,0 +1,56 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { describe, expect, it } from 'vitest'
+import { getStatusBadge } from '@/lib/standalone/dashboard'
+import { faCheck, faWarning, faXmark } from '@fortawesome/free-solid-svg-icons'
+
+describe('getStatusBadge', () => {
+  it('maps ok to a green badge', () => {
+    expect(getStatusBadge('ok')).toEqual({
+      kind: 'green',
+      icon: faCheck,
+      textKey: 'standalone.dashboard.active'
+    })
+  })
+
+  it('maps warning to an amber badge', () => {
+    expect(getStatusBadge('warning')).toEqual({
+      kind: 'amber',
+      icon: faWarning,
+      textKey: 'standalone.dashboard.warning'
+    })
+  })
+
+  it('maps disabled to a gray badge', () => {
+    expect(getStatusBadge('disabled')).toEqual({
+      kind: 'gray',
+      icon: faXmark,
+      textKey: 'standalone.dashboard.inactive'
+    })
+  })
+
+  it('maps error to a rose badge with unknown text', () => {
+    expect(getStatusBadge('error')).toEqual({
+      kind: 'rose',
+      icon: faXmark,
+      textKey: 'standalone.dashboard.unknown'
+    })
+  })
+
+  it('maps null (degraded backend section) to a rose badge with unknown text', () => {
+    expect(getStatusBadge(null)).toEqual({
+      kind: 'rose',
+      icon: faXmark,
+      textKey: 'standalone.dashboard.unknown'
+    })
+  })
+
+  it('maps undefined (data not loaded yet) to a rose badge with unknown text', () => {
+    expect(getStatusBadge(undefined)).toEqual({
+      kind: 'rose',
+      icon: faXmark,
+      textKey: 'standalone.dashboard.unknown'
+    })
+  })
+})
diff --git a/src/lib/standalone/dashboard.ts b/src/lib/standalone/dashboard.ts
new file mode 100644
index 000000000..c6f59018d
--- /dev/null
+++ b/src/lib/standalone/dashboard.ts
@@ -0,0 +1,26 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { faCheck, faWarning, faXmark, type IconDefinition } from '@fortawesome/free-solid-svg-icons'
+import type { NeBadgeV2Kind } from '@nethesis/vue-components'
+import type { ServiceStatus } from '@/composables/useDashboardOverview'
+
+export type StatusBadge = {
+  kind: NeBadgeV2Kind
+  icon: IconDefinition
+  // i18n key, to be translated by the consuming component
+  textKey: string
+}
+
+export function getStatusBadge(status: ServiceStatus | undefined): StatusBadge {
+  switch (status) {
+    case 'ok':
+      return { kind: 'green', icon: faCheck, textKey: 'standalone.dashboard.active' }
+    case 'warning':
+      return { kind: 'amber', icon: faWarning, textKey: 'standalone.dashboard.warning' }
+    case 'disabled':
+      return { kind: 'gray', icon: faXmark, textKey: 'standalone.dashboard.inactive' }
+    default:
+      return { kind: 'rose', icon: faXmark, textKey: 'standalone.dashboard.unknown' }
+  }
+}
diff --git a/src/stores/standalone/haStatus.ts b/src/stores/standalone/haStatus.ts
deleted file mode 100644
index e8b07801c..000000000
--- a/src/stores/standalone/haStatus.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { defineStore } from 'pinia'
-import { onMounted, ref } from 'vue'
-import { ubusCall } from '@/lib/standalone/ubus'
-import type { AxiosResponse } from 'axios'
-
-type HaStatus = AxiosResponse<{
-  state: string
-  role: string
-  status: string
-  last_sync_status: string
-  last_sync_time: number
-}>
-
-export const useHaStatusStore = defineStore('haStatus', () => {
-  const state = ref<string>('')
-  const role = ref<string>('')
-  const status = ref<string>('')
-  const lastSyncStatus = ref<string>('')
-  const lastSyncTime = ref<number>(0)
-
-  const loading = ref(true)
-  const error = ref<Error>()
-
-  function fetchStatus() {
-    ubusCall('ns.ha', 'status', {})
-      .then((response: HaStatus) => {
-        state.value = response.data.state
-        role.value = response.data.role
-        status.value = response.data.status
-        lastSyncStatus.value = response.data.last_sync_status.toLowerCase().replace(/ /g, '_')
-        lastSyncTime.value = response.data.last_sync_time
-      })
-      .catch((reason: Error) => {
-        error.value = reason
-      })
-      .finally(() => {
-        loading.value = false
-      })
-  }
-
-  onMounted(() => {
-    fetchStatus()
-  })
-
-  return {
-    state,
-    role,
-    status,
-    lastSyncStatus,
-    lastSyncTime,
-    loading,
-    error,
-    fetchStatus
-  }
-})
diff --git a/src/stores/standalone/ipsStatus.ts b/src/stores/standalone/ipsStatus.ts
index cd343ca98..a00514c3d 100644
--- a/src/stores/standalone/ipsStatus.ts
+++ b/src/stores/standalone/ipsStatus.ts
@@ -10,6 +10,13 @@ type IpsStatus = AxiosResponse<{
   }
 }>
 
+/**
+ * @deprecated Use the `useIpsStatus()` composable
+ * (`@/composables/useIpsStatus`) instead. It fetches `ns.snort status` via
+ * TanStack Query with an abort signal, so the request is cancelled when the
+ * consuming component unmounts. This store fetches manually on mount without
+ * signaling and is kept only until its consumers are migrated.
+ */
 export const useIpsStatusStore = defineStore('ipsStatus', () => {
   const enabled = ref<boolean>(false)
   const events = ref<number>(0)
diff --git a/src/views/standalone/StandaloneDashboardView.vue b/src/views/standalone/StandaloneDashboardView.vue
index 2d91d2593..d1f100fa9 100644
--- a/src/views/standalone/StandaloneDashboardView.vue
+++ b/src/views/standalone/StandaloneDashboardView.vue
@@ -4,22 +4,22 @@
 -->
 
 <script setup lang="ts">
-import { NeLink, NeHeading } from '@nethesis/vue-components'
+import { NeHeading, NeLink } from '@nethesis/vue-components'
 import { useI18n } from 'vue-i18n'
-import SystemInfoCard from '@/components/standalone/dashboard/SystemInfoCard.vue'
-import ServiceCard from '@/components/standalone/dashboard/ServiceCard.vue'
 import { getStandaloneRoutePrefix } from '@/lib/router'
 import router from '@/router'
 import { useRoute } from 'vue-router'
-import OpenVpnTunnelOrIpsecCard from '@/components/standalone/dashboard/OpenVpnTunnelOrIpsecCard.vue'
+import SystemInfoCard from '@/components/standalone/dashboard/SystemInfoCard.vue'
 import InternetConnectionCard from '@/components/standalone/dashboard/InternetConnectionCard.vue'
+import ServiceCard from '@/components/standalone/dashboard/ServiceCard.vue'
+import AlertsCard from '@/components/standalone/dashboard/AlertsCard.vue'
+import OpenVpnTunnelOrIpsecCard from '@/components/standalone/dashboard/OpenVpnTunnelOrIpsecCard.vue'
+import WireguardCard from '@/components/standalone/dashboard/WireguardCard.vue'
 import ThreatShieldIpCard from '@/components/standalone/dashboard/ThreatShieldIpCard.vue'
-import IpsServiceCard from '@/components/standalone/dashboard/IpsServiceCard.vue'
 import MacBindingStatusCard from '@/components/standalone/dashboard/MacBindingStatusCard.vue'
+import IpsServiceCard from '@/components/standalone/dashboard/IpsServiceCard.vue'
 import BackupStatusCard from '@/components/standalone/dashboard/BackupStatusCard.vue'
 import HaStatusCard from '@/components/standalone/dashboard/HaStatusCard.vue'
-import WireguardCard from '@/components/standalone/dashboard/WireguardCard.vue'
-import AlertsCard from '@/components/standalone/dashboard/AlertsCard.vue'
 
 const { t } = useI18n()
 const route = useRoute()
@@ -30,101 +30,103 @@ function goTo(path: string) {
 </script>
 
 <template>
-  <div class="flex flex-col justify-between md:flex-row md:items-center">
-    <NeHeading tag="h3" class="mb-7">{{ t('standalone.dashboard.title') }}</NeHeading>
-    <div class="mb-6 text-sm text-gray-500 dark:text-gray-400">
-      {{ t('common.data_updated_every_seconds', { seconds: 20 }) }}
+  <div>
+    <div class="mb-7 flex flex-wrap items-center gap-4">
+      <NeHeading tag="h3" class="mr-auto">{{ t('standalone.dashboard.title') }}</NeHeading>
+      <div class="text-sm text-gray-500 dark:text-gray-400">
+        {{ t('common.data_updated_every_seconds', { seconds: 20 }) }}
+      </div>
     </div>
-  </div>
-
-  <div class="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-2 xl:grid-cols-4 3xl:grid-cols-6">
-    <!-- system -->
-    <SystemInfoCard class="sm:col-span-2 xl:row-span-3" />
-    <!-- internet connection -->
-    <InternetConnectionCard />
-    <!-- multiwan -->
-    <ServiceCard service-name="mwan" has-status :icon="['fas', 'earth-americas']">
-      <template #title>
-        <NeLink @click="goTo('/network/multi-wan')">
-          {{ t('standalone.dashboard.multiwan') }}
-        </NeLink>
-      </template>
-    </ServiceCard>
-    <!-- alerts -->
-    <AlertsCard />
-    <!-- openvpn rw -->
-    <ServiceCard
-      service-name="openvpn_rw"
-      has-status
-      :counter="{
-        name: 'openvpn_rw',
-        label: t('standalone.dashboard.clients_connected')
-      }"
-      :icon="['fas', 'globe']"
+    <div
+      class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4 lg:grid-rows-3 2xl:grid-cols-6"
     >
-      <template #title>
-        <NeLink @click="goTo('/vpn/openvpn-rw')">
-          {{ t('standalone.dashboard.openvpn_rw') }}
-        </NeLink>
-      </template>
-    </ServiceCard>
-    <!-- ipsec tunnels -->
-    <OpenVpnTunnelOrIpsecCard method="ipsec-tunnels">
-      <template #title>
-        <NeLink @click="goTo('/vpn/ipsec-tunnel')">
-          {{ t('standalone.ipsec_tunnel.title') }}
-        </NeLink>
-      </template>
-    </OpenVpnTunnelOrIpsecCard>
-    <!-- ovpn tunnels -->
-    <OpenVpnTunnelOrIpsecCard method="ovpn-tunnels">
-      <template #title>
-        <NeLink @click="goTo('/vpn/openvpn-tunnel')">
-          {{ t('standalone.openvpn_tunnel.title') }}
-        </NeLink>
-      </template>
-    </OpenVpnTunnelOrIpsecCard>
-    <!-- wireguard servers -->
-    <WireguardCard>
-      <template #title>
-        <NeLink @click="goTo('/vpn/wireguard-tunnel')">
-          {{ t('standalone.wireguard_tunnel.title') }}
-        </NeLink>
-      </template>
-    </WireguardCard>
-    <!-- threat shield IP / banIP -->
-    <ThreatShieldIpCard />
-    <!-- MAC binding -->
-    <MacBindingStatusCard />
-    <!-- IPS -->
-    <IpsServiceCard />
-    <!-- threat shield dns -->
-    <ServiceCard service-name="threat_shield_dns" has-status :icon="['fas', 'shield']">
-      <template #title>
-        <NeLink @click="goTo('/security/threat-shield-dns')">
-          {{ t('standalone.threat_shield_dns.title') }}
-        </NeLink>
-      </template>
-    </ServiceCard>
-    <!-- hotspot -->
-    <ServiceCard service-name="dedalo" has-status :icon="['fas', 'wifi']">
-      <template #title>
-        <NeLink @click="goTo('/network/hotspot')">
-          {{ t('standalone.dashboard.hotspot') }}
-        </NeLink>
-      </template>
-    </ServiceCard>
-    <!-- known hosts -->
-    <ServiceCard
-      service-name="hosts"
-      :counter="{
-        name: 'hosts',
-        label: ''
-      }"
-      :title="t('standalone.dashboard.known_hosts')"
-      :icon="['fas', 'circle-info']"
-    />
-    <BackupStatusCard />
-    <HaStatusCard />
+      <!-- system -->
+      <SystemInfoCard class="row-span-3 sm:col-span-2" />
+      <!-- internet connection -->
+      <InternetConnectionCard />
+      <!-- multiwan -->
+      <ServiceCard service-name="mwan" has-status :icon="['fas', 'earth-americas']">
+        <template #title>
+          <NeLink @click="goTo('/network/multi-wan')">
+            {{ t('standalone.dashboard.multiwan') }}
+          </NeLink>
+        </template>
+      </ServiceCard>
+      <!-- alerts -->
+      <AlertsCard />
+      <!-- openvpn rw -->
+      <ServiceCard
+        service-name="openvpn_rw"
+        has-status
+        :counter="{
+          name: 'openvpn_rw',
+          label: t('standalone.dashboard.clients_connected')
+        }"
+        :icon="['fas', 'globe']"
+      >
+        <template #title>
+          <NeLink @click="goTo('/vpn/openvpn-rw')">
+            {{ t('standalone.dashboard.openvpn_rw') }}
+          </NeLink>
+        </template>
+      </ServiceCard>
+      <!-- ipsec tunnels -->
+      <OpenVpnTunnelOrIpsecCard method="ipsec-tunnels">
+        <template #title>
+          <NeLink @click="goTo('/vpn/ipsec-tunnel')">
+            {{ t('standalone.ipsec_tunnel.title') }}
+          </NeLink>
+        </template>
+      </OpenVpnTunnelOrIpsecCard>
+      <!-- ovpn tunnels -->
+      <OpenVpnTunnelOrIpsecCard method="ovpn-tunnels">
+        <template #title>
+          <NeLink @click="goTo('/vpn/openvpn-tunnel')">
+            {{ t('standalone.openvpn_tunnel.title') }}
+          </NeLink>
+        </template>
+      </OpenVpnTunnelOrIpsecCard>
+      <!-- wireguard servers -->
+      <WireguardCard>
+        <template #title>
+          <NeLink @click="goTo('/vpn/wireguard-tunnel')">
+            {{ t('standalone.wireguard_tunnel.title') }}
+          </NeLink>
+        </template>
+      </WireguardCard>
+      <!-- threat shield IP / banIP -->
+      <ThreatShieldIpCard />
+      <!-- MAC binding -->
+      <MacBindingStatusCard />
+      <!-- IPS -->
+      <IpsServiceCard />
+      <!-- threat shield dns -->
+      <ServiceCard service-name="threat_shield_dns" has-status :icon="['fas', 'shield']">
+        <template #title>
+          <NeLink @click="goTo('/security/threat-shield-dns')">
+            {{ t('standalone.threat_shield_dns.title') }}
+          </NeLink>
+        </template>
+      </ServiceCard>
+      <!-- hotspot -->
+      <ServiceCard service-name="dedalo" has-status :icon="['fas', 'wifi']">
+        <template #title>
+          <NeLink @click="goTo('/network/hotspot')">
+            {{ t('standalone.dashboard.hotspot') }}
+          </NeLink>
+        </template>
+      </ServiceCard>
+      <!-- known hosts -->
+      <ServiceCard
+        :counter="{
+          name: 'hosts',
+          label: ''
+        }"
+        :title="t('standalone.dashboard.known_hosts')"
+        :icon="['fas', 'circle-info']"
+      />
+      <BackupStatusCard />
+      <HaStatusCard />
+    </div>
   </div>
 </template>