diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index 78b270677..ad5244136 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -849,11 +849,6 @@
       "count": 4
     }
   },
-  "src/views/standalone/monitoring/PingLatencyMonitorView.vue": {
-    "@typescript-eslint/no-explicit-any": {
-      "count": 1
-    }
-  },
   "src/views/standalone/monitoring/RealTimeMonitoringView.vue": {
     "@typescript-eslint/no-explicit-any": {
       "count": 1
@@ -916,7 +911,7 @@
   },
   "src/views/standalone/users_objects/UsersDatabaseView.vue": {
     "@typescript-eslint/no-explicit-any": {
-      "count": 2
+      "count": 1
     }
   },
   "src/views/standalone/vpn/IPsecTunnelView.vue": {
diff --git a/package.json b/package.json
index 4034d44d0..82d80fd75 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --build",
-    "lint": "eslint . --max-warnings 1229",
+    "lint": "eslint . --max-warnings 645",
     "lint-fix": "npm run lint -- --fix",
     "format": "prettier --list-different src/",
     "format-fix": "prettier --write src/",
diff --git a/src/assets/main.css b/src/assets/main.css
index d0f376184..5eff62d1b 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -146,7 +146,7 @@
 }
 
 @utility text-primary-neutral {
-  @apply text-gray-600 dark:text-gray-50;
+  @apply text-gray-900 dark:text-gray-50;
 }
 
 @utility text-secondary {
@@ -154,7 +154,7 @@
 }
 
 @utility text-secondary-neutral {
-  @apply dark:text-gray-200;
+  @apply text-gray-700 dark:text-gray-200;
 }
 
 @utility text-tertiary-neutral {
@@ -165,6 +165,18 @@
   @apply text-green-700 dark:text-green-500;
 }
 
+@utility text-danger {
+  @apply text-rose-700 dark:text-rose-500;
+}
+
 @utility text-disabled {
   @apply text-gray-400 dark:text-gray-600;
 }
+
+@utility bg-icon-danger {
+  @apply bg-rose-700 dark:bg-rose-500;
+}
+
+@utility border-elevation-0 {
+  @apply border-white dark:border-gray-950;
+}
diff --git a/src/components/NotificationDrawer.vue b/src/components/NotificationDrawer.vue
index 545916b6c..add5dadae 100644
--- a/src/components/NotificationDrawer.vue
+++ b/src/components/NotificationDrawer.vue
@@ -4,18 +4,35 @@
 -->
 
 <script setup lang="ts">
-import { NeSideDrawer, NeEmptyState } from '@nethesis/vue-components'
-import { NeToastNotification } from '@nethesis/vue-components'
+import {
+  NeSideDrawer,
+  NeEmptyState,
+  NeToastNotificationV2,
+  NeToastNotification
+} from '@nethesis/vue-components'
 import { useI18n } from 'vue-i18n'
 import { useNotificationsStore } from '@/stores/notifications'
 import { isEmpty } from 'lodash-es'
+import { faBell } from '@fortawesome/free-solid-svg-icons'
+import { useAlerts } from '@/composables/useAlerts'
+import { useRoute, useRouter } from 'vue-router'
+import { getStandaloneRoutePrefix } from '@/lib/router'
 
 const { t } = useI18n()
 const notificationsStore = useNotificationsStore()
+const { notifications: alertNotifications } = useAlerts()
 
 function closeDrawer() {
   notificationsStore.setNotificationDrawerOpen(false)
 }
+
+const router = useRouter()
+const route = useRoute()
+
+function goToAlerts() {
+  closeDrawer()
+  router.push(`${getStandaloneRoutePrefix(route)}/monitoring/metrics?tab=alerts`)
+}
 </script>
 
 <template>
@@ -25,24 +42,36 @@ function closeDrawer() {
     :close-aria-label="t('common.shell.close_side_drawer')"
     @close="closeDrawer"
   >
-    <!-- empty state -->
-    <NeEmptyState
-      v-if="isEmpty(notificationsStore.notifications)"
-      :title="t('notifications.no_notification')"
-      :icon="['fas', 'bell']"
-    />
-    <!-- notifications -->
-    <div v-else class="flex w-full flex-col items-center space-y-4 sm:items-end">
-      <TransitionGroup name="fade">
-        <NeToastNotification
-          v-for="notification in notificationsStore.notifications"
-          :key="notification.id"
-          :notification="notification"
-          full-width
-          show-timestamp
-          :sr-close-label="t('common.close')"
-        />
-      </TransitionGroup>
+    <div class="space-y-6">
+      <!-- empty state -->
+      <NeEmptyState
+        v-if="isEmpty(notificationsStore.notifications) && alertNotifications.length == 0"
+        :title="t('notifications.no_notification')"
+        :icon="faBell"
+      />
+      <!-- notifications -->
+      <div v-else class="flex w-full flex-col items-center space-y-4 sm:items-end">
+        <TransitionGroup name="fade">
+          <template v-if="alertNotifications.length > 0">
+            <NeToastNotificationV2
+              v-for="alert in alertNotifications"
+              :key="alert.id"
+              :notification="alert"
+              :sr-close-label="t('common.close')"
+              full-width
+              @action="goToAlerts"
+            />
+          </template>
+          <NeToastNotification
+            v-for="notification in notificationsStore.notifications"
+            :key="notification.id"
+            :notification="notification"
+            full-width
+            show-timestamp
+            :sr-close-label="t('common.close')"
+          />
+        </TransitionGroup>
+      </div>
     </div>
   </NeSideDrawer>
 </template>
diff --git a/src/components/charts/TimeLineChart.vue b/src/components/charts/TimeLineChart.vue
index 3a7fefd54..b5f52e0c1 100644
--- a/src/components/charts/TimeLineChart.vue
+++ b/src/components/charts/TimeLineChart.vue
@@ -125,11 +125,16 @@ const defaultOptions: any = {
 }
 
 const allOptions = computed(() => {
-  return merge(typeof props.options === 'object' ? props.options : {}, defaultOptions)
+  const customOptions = props.options && typeof props.options === 'object' ? props.options : {}
+  return merge({}, defaultOptions, customOptions)
 })
 
 const chartData: any = computed(() => {
-  return { labels: props.labels, datasets: props.datasets }
+  // Deep-clone to strip Vue readonly proxies before handing data to Chart.js.
+  // Chart.js internally mutates dataset objects (attaches _meta, controllers, etc.)
+  // and Vue will block those mutations with "target is readonly" warnings if the
+  // objects are still wrapped in a shallowReadonly prop proxy.
+  return JSON.parse(JSON.stringify({ labels: props.labels, datasets: props.datasets }))
 })
 
 const chartStyle = computed(() => {
diff --git a/src/components/standalone/SideMenu.vue b/src/components/standalone/SideMenu.vue
index 98584f1b7..0f05a14fb 100644
--- a/src/components/standalone/SideMenu.vue
+++ b/src/components/standalone/SideMenu.vue
@@ -51,6 +51,10 @@ const navigation: Ref<MenuItem[]> = ref([
       {
         name: 'standalone.ping_latency_monitor.title',
         to: 'monitoring/ping-latency-monitor'
+      },
+      {
+        name: 'standalone.metrics.title',
+        to: 'monitoring/metrics'
       }
     ]
   },
diff --git a/src/components/standalone/StandaloneTopBar.vue b/src/components/standalone/StandaloneTopBar.vue
index 716bb3c5c..2c092ec9e 100644
--- a/src/components/standalone/StandaloneTopBar.vue
+++ b/src/components/standalone/StandaloneTopBar.vue
@@ -18,6 +18,7 @@ import { isStandaloneMode } from '@/lib/config'
 import UciChangesModal from './UciChangesModal.vue'
 import {
   faAward,
+  faBell,
   faCircleUser,
   faMoon,
   faRightFromBracket,
@@ -25,6 +26,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { useSubscriptionStore } from '@/stores/standalone/subscription.ts'
+import { useAlerts } from '@/composables/useAlerts'
 
 const emit = defineEmits(['openSidebar'])
 
@@ -34,6 +36,7 @@ const themeStore = useThemeStore()
 const uciChangesStore = useUciPendingChangesStore()
 const notificationsStore = useNotificationsStore()
 const subscriptionStore = useSubscriptionStore()
+const { notifications: alertNotifications } = useAlerts()
 
 const showUciChangesModal = ref(false)
 const isChangesButtonFlashing = ref(false)
@@ -106,6 +109,22 @@ watch(
   }
 )
 
+watch(
+  () => alertNotifications.value.length,
+  (newAlerts, oldAlerts) => {
+    if (newAlerts > oldAlerts) {
+      // briefly shake notifications icon
+      setTimeout(() => {
+        shakeNotificationsIcon.value = true
+      }, 700)
+
+      setTimeout(() => {
+        shakeNotificationsIcon.value = false
+      }, 2700)
+    }
+  }
+)
+
 onMounted(() => {
   getSystemBoard()
 })
@@ -223,16 +242,22 @@ function openNotificationsDrawer() {
           <template #trigger>
             <button
               type="button"
-              :class="['-m-2.5 flex p-2.5', topBarButtonsColorClasses]"
+              :class="['relative -m-2.5 flex p-2.5', topBarButtonsColorClasses]"
               @click="openNotificationsDrawer"
             >
               <span class="sr-only">{{ t('common.shell.show_notifications') }}</span>
-              <font-awesome-icon
-                :icon="['fas', 'bell']"
+              <FontAwesomeIcon
+                :icon="faBell"
                 :class="['h-6 w-6 shrink-0', { 'fa-shake': shakeNotificationsIcon }]"
                 style="--fa-animation-duration: 2s"
                 aria-hidden="true"
               />
+              <!-- notification indicator -->
+              <span
+                v-if="notificationsStore.numNotifications > 0 || alertNotifications.length > 0"
+                class="absolute top-2.5 right-2.5 size-3 rounded-full border border-elevation-0 bg-icon-danger"
+                aria-hidden="true"
+              />
             </button>
           </template>
           <template #content>
diff --git a/src/components/standalone/dashboard/AlertsCard.vue b/src/components/standalone/dashboard/AlertsCard.vue
new file mode 100644
index 000000000..ea3fb0ef5
--- /dev/null
+++ b/src/components/standalone/dashboard/AlertsCard.vue
@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { getStandaloneRoutePrefix } from '@/lib/router'
+import { useAlerts } from '@/composables/useAlerts'
+import { faCheck } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { NeBadgeV2, NeCard, NeLink, NeSkeleton } from '@nethesis/vue-components'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
+const { data, status: alertsStatus } = useAlerts()
+const { t } = useI18n()
+
+const alertCount = computed<number>(() => {
+  return data.value?.length ?? 0
+})
+
+function goToAlerts() {
+  router.push(`${getStandaloneRoutePrefix(route)}/monitoring/metrics?tab=alerts`)
+}
+</script>
+
+<template>
+  <NeCard :icon="['fas', 'triangle-exclamation']">
+    <template #title>
+      <NeLink @click="goToAlerts">
+        {{ t('standalone.metrics.tabs.alerts') }}
+      </NeLink>
+    </template>
+    <NeSkeleton v-if="alertsStatus == 'pending'" />
+    <div v-else class="space-y-3">
+      <NeBadgeV2 v-if="!alertCount" kind="green">
+        <FontAwesomeIcon :icon="faCheck" class="size-4" />
+        {{ t('standalone.metrics.no_alerts') }}
+      </NeBadgeV2>
+      <p :class="{ 'text-danger': alertCount }">
+        <span v-if="alertCount" class="mr-1 text-xl">{{ alertCount }}</span>
+        {{ t('standalone.metrics.active_alerts', { count: alertCount }) }}
+      </p>
+    </div>
+  </NeCard>
+</template>
diff --git a/src/components/standalone/firewall/PortForwardTable.vue b/src/components/standalone/firewall/PortForwardTable.vue
index ec3d0f717..1851d0b71 100644
--- a/src/components/standalone/firewall/PortForwardTable.vue
+++ b/src/components/standalone/firewall/PortForwardTable.vue
@@ -15,14 +15,17 @@ import {
   NeTableBody,
   NeTableRow,
   NeTableCell,
-  NeButton
+  NeButton,
+  NeTooltip
 } from '@nethesis/vue-components'
 import ObjectTooltip from '@/components/standalone/users_objects/ObjectTooltip.vue'
 import {
   faCircleCheck,
   faCircleXmark,
   faClone,
+  faList,
   faPenToSquare,
+  faThumbTack,
   faTrash
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -124,7 +127,45 @@ function getCellClasses(item: PortForward) {
       <NeTableBody>
         <NeTableRow v-for="item in portForwards" :key="item.id">
           <NeTableCell :data-label="t('standalone.port_forward.name')">
-            <p :class="[...getCellClasses(item)]">{{ item.name }}</p>
+            <div class="flex w-full items-center justify-between gap-2">
+              <div class="flex-1">
+                <p :class="[...getCellClasses(item)]">{{ item.name }}</p>
+              </div>
+              <div class="flex flex-wrap items-center justify-end gap-4">
+                <!-- logging info -->
+                <NeTooltip v-if="item.enabled && item.log" trigger-event="mouseenter focus">
+                  <template #trigger>
+                    <NeLink>
+                      <FontAwesomeIcon
+                        :icon="faList"
+                        class="h-4 w-4 text-indigo-800 dark:text-indigo-300"
+                      />
+                    </NeLink>
+                  </template>
+                  <template #content>
+                    <span> {{ t('standalone.port_forward.logging_enabled') }} </span>
+                  </template>
+                </NeTooltip>
+                <!-- hairpin NAT -->
+                <NeTooltip v-if="item.enabled && item.reflection" trigger-event="mouseenter focus">
+                  <template #trigger>
+                    <NeLink>
+                      <FontAwesomeIcon
+                        :icon="faThumbTack"
+                        class="h-4 w-4 text-indigo-800 dark:text-indigo-300"
+                      />
+                    </NeLink>
+                  </template>
+                  <template #content>
+                    <span>{{
+                      t('standalone.port_forward.hairpin_nat_enabled', {
+                        zones: item.reflection_zone?.map((z: string) => z.toUpperCase()).join(', ')
+                      })
+                    }}</span>
+                  </template>
+                </NeTooltip>
+              </div>
+            </div>
           </NeTableCell>
           <NeTableCell :data-label="t('standalone.port_forward.source_port')">
             <p :class="[...getCellClasses(item)]">
diff --git a/src/components/standalone/firewall/rules/CreateOrEditFirewallRuleDrawer.vue b/src/components/standalone/firewall/rules/CreateOrEditFirewallRuleDrawer.vue
index 437241dd0..c0a7e6435 100644
--- a/src/components/standalone/firewall/rules/CreateOrEditFirewallRuleDrawer.vue
+++ b/src/components/standalone/firewall/rules/CreateOrEditFirewallRuleDrawer.vue
@@ -112,6 +112,10 @@ const actionOptions = ref([
   {
     id: 'ACCEPT',
     label: 'ACCEPT'
+  },
+  {
+    id: 'NOTRACK',
+    label: 'NOTRACK'
   }
 ])
 
diff --git a/src/components/standalone/firewall/rules/FirewallRulesContent.vue b/src/components/standalone/firewall/rules/FirewallRulesContent.vue
index c386ae91e..3fa302283 100644
--- a/src/components/standalone/firewall/rules/FirewallRulesContent.vue
+++ b/src/components/standalone/firewall/rules/FirewallRulesContent.vue
@@ -282,7 +282,7 @@ function searchStringInRule(rule: FirewallRule, queryText: string) {
       </div>
       <NeButton
         v-if="loading.listRules || rules.length"
-        kind="secondary"
+        kind="primary"
         size="lg"
         class="ml-6 shrink-0"
         @click="showCreateRuleDrawer"
diff --git a/src/components/standalone/firewall/rules/FirewallRulesTable.vue b/src/components/standalone/firewall/rules/FirewallRulesTable.vue
index f1af0075d..f5cacfcf9 100644
--- a/src/components/standalone/firewall/rules/FirewallRulesTable.vue
+++ b/src/components/standalone/firewall/rules/FirewallRulesTable.vue
@@ -17,6 +17,8 @@ import {
   faCircleXmark,
   faCopy,
   faGripVertical,
+  faList,
+  faTag,
   faTrash
 } from '@fortawesome/free-solid-svg-icons'
 import { useHostSets } from '@/composables/useHostSets'
@@ -182,6 +184,8 @@ function getRuleActionIcon(ruleTarget: string) {
     case 'DROP':
     case 'REJECT':
       return 'ban'
+    case 'NOTRACK':
+      return 'eye-slash'
     default:
       return 'circle-question'
   }
@@ -198,6 +202,8 @@ function getRuleActionColor(rule: FirewallRule) {
     case 'DROP':
     case 'REJECT':
       return 'text-rose-700 dark:text-rose-500'
+    case 'NOTRACK':
+      return 'text-gray-700 dark:text-gray-500'
     default:
       return ''
   }
@@ -354,9 +360,9 @@ function searchStringInRule(rule: FirewallRule, queryText: string) {
                 <!-- name -->
                 <td :class="!isEnabled(rule) ? disabledRuleClasses : ''">
                   <div
-                    class="flex items-center justify-between gap-2 border-r border-gray-200 pr-4 dark:border-gray-600"
+                    class="flex w-full items-center justify-between gap-2 border-r border-gray-200 pr-4 dark:border-gray-600"
                   >
-                    <div>
+                    <div class="flex-1">
                       <div :class="{ 'opacity-50': !isEnabled(rule) }">
                         {{ rule.name }}
                       </div>
@@ -393,24 +399,39 @@ function searchStringInRule(rule: FirewallRule, queryText: string) {
                         </NeTooltip>
                       </div>
                     </div>
-                    <!-- show details icon -->
-                    <NeTooltip>
-                      <template #trigger>
-                        <NeLink>
-                          <FontAwesomeIcon :icon="['fas', 'magnifying-glass-plus']" />
-                        </NeLink>
-                      </template>
-                      <template #content>
-                        <div>
-                          <span> {{ t('standalone.firewall_rules.tags') }}: </span>
-                          <span>{{ rule.ns_tag?.join(', ') || '-' }}</span>
-                        </div>
-                        <div>
-                          <span> {{ t('standalone.firewall_rules.logging') }}: </span>
-                          <span>{{ rule.log ? t('common.enabled') : t('common.disabled') }}</span>
-                        </div>
-                      </template>
-                    </NeTooltip>
+                    <div class="flex flex-wrap items-center justify-end gap-4">
+                      <!-- logging info -->
+                      <NeTooltip
+                        v-if="isEnabled(rule) && rule.log"
+                        trigger-event="mouseenter focus"
+                      >
+                        <template #trigger>
+                          <NeLink>
+                            <FontAwesomeIcon
+                              :icon="faList"
+                              class="h-4 w-4 text-indigo-800 dark:text-indigo-300"
+                            />
+                          </NeLink>
+                        </template>
+                        <template #content>
+                          <span> {{ t('standalone.firewall_rules.logging_enabled') }} </span>
+                        </template>
+                      </NeTooltip>
+                      <!-- tags -->
+                      <NeTooltip v-if="rule.ns_tag.length > 0" trigger-event="mouseenter focus">
+                        <template #trigger>
+                          <NeLink>
+                            <FontAwesomeIcon
+                              :icon="faTag"
+                              class="h-4 w-4 text-indigo-800 dark:text-indigo-300"
+                            />
+                          </NeLink>
+                        </template>
+                        <template #content>
+                          <span>{{ rule.ns_tag?.join(', ') }}</span>
+                        </template>
+                      </NeTooltip>
+                    </div>
                   </div>
                 </td>
                 <!-- source -->
diff --git a/src/components/standalone/ipsec_tunnel/CreateOrEditTunnelDrawer.vue b/src/components/standalone/ipsec_tunnel/CreateOrEditTunnelDrawer.vue
index bc22431ac..73bbfc1b9 100644
--- a/src/components/standalone/ipsec_tunnel/CreateOrEditTunnelDrawer.vue
+++ b/src/components/standalone/ipsec_tunnel/CreateOrEditTunnelDrawer.vue
@@ -59,7 +59,7 @@ type CreateEditIpsecTunnelPayload = {
   }
   ipcomp: string
   closeaction?: string
-  dpdaction: 'restart' | 'none'
+  dpdaction: TunnelDpdAction
   remote_subnet: string[]
   local_subnet: string[]
   ns_name: string
@@ -72,6 +72,9 @@ type CreateEditIpsecTunnelPayload = {
   pre_shared_key: string
 }
 
+type DpdAction = 'clear' | 'trap' | 'restart'
+type TunnelDpdAction = DpdAction | 'none'
+
 const { t } = useI18n()
 
 const emit = defineEmits(['close', 'add-edit-tunnel'])
@@ -104,7 +107,7 @@ const remoteIdentifier = ref('')
 // Step 2 fields
 const presharedKeyMode = ref<'generate' | 'import'>('generate')
 const presharedKey = ref('')
-const dpd = ref(false)
+const dpdAction = ref<DpdAction>('clear')
 const enableCompression = ref(false)
 const closeAction = ref('none')
 
@@ -152,6 +155,11 @@ const closeActionOptions: NeComboboxOption[] = [
   { id: 'trap', label: 'trap' },
   { id: 'start', label: 'start' }
 ]
+const dpdActionOptions: NeComboboxOption[] = [
+  { id: 'clear', label: 'clear' },
+  { id: 'trap', label: 'trap' },
+  { id: 'restart', label: 'restart' }
+]
 const encryptionOptions = ref<NeComboboxOption[]>([])
 const integrityOptions = ref<NeComboboxOption[]>([])
 const diffieHellmanOptions = ref<NeComboboxOption[]>([])
@@ -253,7 +261,7 @@ async function resetForm() {
   wanIpAddress.value = tunnelData?.local_ip ?? ''
   remoteIpAddress.value = tunnelData?.gateway ?? ''
   remoteNetworks.value = tunnelData?.remote_subnet ?? ['']
-  dpd.value = tunnelData ? tunnelData.dpdaction == 'restart' : false
+  dpdAction.value = normalizeDpdAction(tunnelData?.dpdaction)
   enableCompression.value = tunnelData ? tunnelData.ipcomp === 'true' : false
   closeAction.value = tunnelData?.closeaction ?? 'none'
   ikeVersion.value = tunnelData?.keyexchange ?? ikeVersionOptions[0].id
@@ -403,6 +411,18 @@ function handlePreviousStep() {
   }
 }
 
+function normalizeDpdAction(action?: string | null): DpdAction {
+  switch (action) {
+    case 'trap':
+    case 'restart':
+    case 'clear':
+      return action
+    case 'none':
+    default:
+      return 'clear'
+  }
+}
+
 async function createOrEditTunnel() {
   error.value.notificationTitle = ''
   error.value.notificationDescription = ''
@@ -425,7 +445,7 @@ async function createOrEditTunnel() {
     ipcomp: enableCompression.value ? 'true' : 'false',
     closeaction: closeAction.value,
     enabled: enabled.value ? '1' : '0',
-    dpdaction: dpd.value ? 'restart' : 'none',
+    dpdaction: dpdAction.value,
     keyexchange: ikeVersion.value,
     remote_subnet: remoteNetworks.value.filter((x) => x != ''),
     local_subnet: localNetworks.value
@@ -621,17 +641,25 @@ watch(
         </NeTextInput>
         <NeCopyField v-else :value="generatedPresharedKey" />
 
-        <div>
-          <NeFormItemLabel>{{
-            t('standalone.ipsec_tunnel.dpd_dead_peer_detection')
-          }}</NeFormItemLabel>
-          <NeToggle
-            v-model="dpd"
-            :label="
-              dpd ? t('standalone.ipsec_tunnel.enabled') : t('standalone.ipsec_tunnel.disabled')
-            "
-          />
-        </div>
+        <NeCombobox
+          v-model="dpdAction"
+          :label="t('standalone.ipsec_tunnel.dpd_dead_peer_detection')"
+          :options="dpdActionOptions"
+          :no-options-label="t('ne_combobox.no_options_label')"
+          :no-results-label="t('ne_combobox.no_results')"
+          :limited-options-label="t('ne_combobox.limited_options_label')"
+          :selected-label="t('ne_combobox.selected')"
+          :user-input-label="t('ne_combobox.user_input_label')"
+          :optional-label="t('common.optional')"
+        >
+          <template #tooltip>
+            <NeTooltip>
+              <template #content>
+                {{ t('standalone.ipsec_tunnel.dpd_dead_peer_detection_tooltip') }}
+              </template>
+            </NeTooltip>
+          </template>
+        </NeCombobox>
         <div>
           <NeFormItemLabel>{{ t('standalone.ipsec_tunnel.compression') }}</NeFormItemLabel>
           <NeToggle
diff --git a/src/components/standalone/monitoring/metrics/MetricChartCard.vue b/src/components/standalone/monitoring/metrics/MetricChartCard.vue
new file mode 100644
index 000000000..3ae255bac
--- /dev/null
+++ b/src/components/standalone/monitoring/metrics/MetricChartCard.vue
@@ -0,0 +1,46 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script lang="ts" setup>
+import { faChartLine } from '@fortawesome/free-solid-svg-icons'
+import { NeCard, NeEmptyState } from '@nethesis/vue-components'
+import { useI18n } from 'vue-i18n'
+import TimeLineChart from '@/components/charts/TimeLineChart.vue'
+import type { ChartData } from '@/lib/standalone/metricsCharts'
+
+defineProps<{
+  title: string
+  chart: ChartData | null
+  options?: object
+  showLegend?: boolean
+  datasetSuffix?: string
+  useKbpsFormat?: boolean
+  height?: string
+  loading?: boolean
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <NeCard :title="title" :loading="loading">
+    <TimeLineChart
+      v-if="chart?.labels?.length"
+      :labels="chart.labels"
+      :datasets="chart.datasets"
+      :height="height ?? '200px'"
+      :show-legend="showLegend ?? true"
+      :options="options"
+      :dataset-suffix="datasetSuffix ?? ''"
+      :use-kbps-format="useKbpsFormat ?? false"
+    />
+    <NeEmptyState
+      v-else
+      :title="t('standalone.metrics.no_data')"
+      :icon="faChartLine"
+      class="bg-white dark:bg-gray-950"
+    />
+  </NeCard>
+</template>
diff --git a/src/components/standalone/monitoring/metrics/MetricsAlertsSection.vue b/src/components/standalone/monitoring/metrics/MetricsAlertsSection.vue
new file mode 100644
index 000000000..6edbcaa5a
--- /dev/null
+++ b/src/components/standalone/monitoring/metrics/MetricsAlertsSection.vue
@@ -0,0 +1,187 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import {
+  NeBadgeV2,
+  type NeBadgeV2Kind,
+  NeEmptyState,
+  NeInlineNotification,
+  NeTable,
+  NeTableBody,
+  NeTableCell,
+  NeTableHead,
+  NeTableHeadCell,
+  NeTableRow,
+  getAxiosErrorMessage
+} from '@nethesis/vue-components'
+import { useAlerts, type Alert } from '@/composables/useAlerts'
+import { faCircleCheck } from '@fortawesome/free-solid-svg-icons'
+
+const { t, locale } = useI18n()
+
+const { data, error, isError, isPending } = useAlerts()
+
+const errorDescription = computed(() => {
+  const currentError = error.value
+  const axiosErrorMessage = currentError ? getAxiosErrorMessage(currentError) : undefined
+
+  if (axiosErrorMessage) {
+    return t(axiosErrorMessage)
+  }
+
+  return t('error.generic_error')
+})
+
+function getLocalizedAnnotation(alert: Alert, annotation: 'summary' | 'description') {
+  const localeCode = locale.value.split('-')[0]
+
+  return (
+    alert.annotations[`${annotation}_${localeCode}`] ??
+    alert.annotations[`${annotation}_en`] ??
+    alert.annotations[annotation] ??
+    ''
+  )
+}
+
+function getStateBadgeKind(state: string): NeBadgeV2Kind {
+  switch (state) {
+    case 'firing':
+      return 'rose'
+    case 'pending':
+      return 'blue'
+    default:
+      return 'gray'
+  }
+}
+
+function getSeverityBadgeKind(severity: string | undefined): NeBadgeV2Kind {
+  switch (severity) {
+    case 'critical':
+      return 'rose'
+    case 'warning':
+      return 'amber'
+    case 'info':
+      return 'blue'
+    default:
+      return 'gray'
+  }
+}
+
+function getSeverityLabel(alert: Alert) {
+  switch (alert.labels.severity) {
+    case 'critical':
+      return t('standalone.metrics.critical')
+    case 'warning':
+      return t('standalone.metrics.warning')
+    case 'info':
+      return t('standalone.metrics.info')
+    default:
+      return t('standalone.metrics.unknown')
+  }
+}
+
+function getStateLabel(alert: Alert) {
+  switch (alert.state) {
+    case 'firing':
+      return t('standalone.metrics.firing')
+    case 'pending':
+      return t('standalone.metrics.pending')
+    default:
+      return t('standalone.metrics.unknown')
+  }
+}
+
+function formatActiveAt(activeAt: string) {
+  return Intl.DateTimeFormat(locale.value, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  }).format(new Date(activeAt))
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <NeInlineNotification
+      v-if="isError"
+      kind="error"
+      :title="t('standalone.metrics.cannot_retrieve_alerts')"
+      :description="errorDescription"
+      :close-aria-label="t('common.close')"
+    />
+
+    <NeEmptyState
+      v-if="!isError && !isPending && !(data ?? []).length"
+      :title="t('standalone.metrics.no_alerts_yet')"
+      :description="t('standalone.metrics.no_alerts_description')"
+      :icon="faCircleCheck"
+    />
+
+    <NeTable
+      v-else
+      :aria-label="t('standalone.metrics.alerts_table_aria_label')"
+      card-breakpoint="xl"
+      :loading="isPending"
+      :skeleton-columns="5"
+      :skeleton-rows="6"
+    >
+      <NeTableHead>
+        <NeTableHeadCell>{{ t('standalone.metrics.severity') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ t('standalone.metrics.alert') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ t('standalone.metrics.status') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ t('standalone.metrics.triggered_by') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ t('standalone.metrics.started_at') }}</NeTableHeadCell>
+      </NeTableHead>
+      <NeTableBody>
+        <NeTableRow v-for="alert in data!" :key="`${alert.name}-${alert.activeAt}`">
+          <NeTableCell :data-label="t('standalone.metrics.severity')">
+            <NeBadgeV2 :kind="getSeverityBadgeKind(alert.labels.severity)" size="xs">
+              {{ getSeverityLabel(alert) }}
+            </NeBadgeV2>
+          </NeTableCell>
+          <NeTableCell :data-label="t('standalone.metrics.alert')">
+            <div class="space-y-1 whitespace-normal">
+              <p>
+                {{ getLocalizedAnnotation(alert, 'summary') || alert.name }}
+              </p>
+              <p
+                v-if="getLocalizedAnnotation(alert, 'description')"
+                class="text-xs text-tertiary-neutral"
+              >
+                {{ getLocalizedAnnotation(alert, 'description') }}
+              </p>
+            </div>
+          </NeTableCell>
+          <NeTableCell :data-label="t('standalone.metrics.status')">
+            <NeBadgeV2 :kind="getStateBadgeKind(alert.state)" size="xs">
+              {{ getStateLabel(alert) }}
+            </NeBadgeV2>
+          </NeTableCell>
+          <NeTableCell :data-label="t('standalone.metrics.triggered_by')">
+            <div class="space-y-1">
+              <p>
+                {{ alert.name }}
+              </p>
+              <p class="text-xs text-tertiary-neutral">
+                {{ t('standalone.metrics.service') }}: {{ alert.labels.service ?? '-' }}
+                <span class="mx-1">-</span>
+                {{ t('standalone.metrics.group') }}: {{ alert.labels.alertgroup ?? '-' }}
+              </p>
+            </div>
+          </NeTableCell>
+          <NeTableCell :data-label="t('standalone.metrics.started_at')">
+            {{ formatActiveAt(alert.activeAt) }}
+          </NeTableCell>
+        </NeTableRow>
+      </NeTableBody>
+    </NeTable>
+  </div>
+</template>
diff --git a/src/components/standalone/monitoring/metrics/MetricsChartsSection.vue b/src/components/standalone/monitoring/metrics/MetricsChartsSection.vue
new file mode 100644
index 000000000..e9f349005
--- /dev/null
+++ b/src/components/standalone/monitoring/metrics/MetricsChartsSection.vue
@@ -0,0 +1,298 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script lang="ts" setup>
+import {
+  getAxiosErrorMessage,
+  NeDropdownFilter,
+  NeHeading,
+  NeInlineNotification
+} from '@nethesis/vue-components'
+import { computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import MetricChartCard from './MetricChartCard.vue'
+import { ubusCall } from '@/lib/standalone/ubus'
+import { useQuery } from '@tanstack/vue-query'
+import type { AxiosResponse } from 'axios'
+import { useThemeStore } from '@/stores/theme'
+import {
+  buildCpuChart,
+  buildLoadChart,
+  buildDiskioChart,
+  buildDiskChart,
+  buildProcessesChart,
+  buildMemoryChart,
+  buildPacketsChart,
+  buildConnectionsChart,
+  buildTrafficChart,
+  buildLatencyChart,
+  buildQualityChart,
+  getTrafficInterfaces,
+  getInterfaceDisplayName,
+  getLatencyQuality,
+  byteAxisOptions,
+  latencyOptions,
+  qualityOptions,
+  type MetricsData,
+  type PingHost
+} from '@/lib/standalone/metricsCharts'
+import { useStorage } from '@vueuse/core'
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+
+const { interval } = defineProps<{
+  interval: number | false
+}>()
+
+const emits = defineEmits<{
+  updatedAt: [number]
+}>()
+
+type TimeRangeId = '5m' | '30m' | '1h' | '12h' | '24h' | '7d'
+type TimeRange = {
+  id: TimeRangeId
+  label: string
+  num: number
+  seconds: number
+  step: number
+}
+
+const TIME_RANGES: TimeRange[] = [
+  {
+    id: '5m',
+    label: t('standalone.metrics.time_range_minutes', { count: 5 }),
+    num: 5,
+    seconds: 300,
+    step: 5
+  },
+  {
+    id: '30m',
+    label: t('standalone.metrics.time_range_minutes', { count: 30 }),
+    num: 30,
+    seconds: 1800,
+    step: 30
+  },
+  {
+    id: '1h',
+    label: t('standalone.metrics.time_range_hours', { count: 1 }),
+    num: 1,
+    seconds: 3600,
+    step: 60
+  },
+  {
+    id: '12h',
+    label: t('standalone.metrics.time_range_hours', { count: 12 }),
+    num: 12,
+    seconds: 43200,
+    step: 300
+  },
+  {
+    id: '24h',
+    label: t('standalone.metrics.time_range_hours', { count: 24 }),
+    num: 24,
+    seconds: 86400,
+    step: 300
+  },
+  {
+    id: '7d',
+    label: t('standalone.metrics.time_range_days', { count: 7 }),
+    num: 7,
+    seconds: 604800,
+    step: 1800
+  }
+]
+
+const DEFAULT_TIME_RANGE = TIME_RANGES[1]!
+const selectedTimeRangeId = useStorage<TimeRangeId[]>('metrics_time_range', [DEFAULT_TIME_RANGE.id])
+const timeRangeLabel = computed(() => {
+  const range = TIME_RANGES.find((r) => r.id == selectedTimeRangeId.value[0])
+  return range ? range.label : ''
+})
+const range = computed(() => {
+  const range = TIME_RANGES.find((r) => r.id == selectedTimeRangeId.value[0])
+  return range ? range.seconds : DEFAULT_TIME_RANGE.seconds
+})
+const step = computed(() => {
+  const range = TIME_RANGES.find((r) => r.id == selectedTimeRangeId.value[0])
+  return range ? range.step : DEFAULT_TIME_RANGE.step
+})
+
+// ── Data fetching ─────────────────────────────────────────────────────────────
+
+const { data, isPending, error, dataUpdatedAt } = useQuery({
+  queryKey: ['metrics', 'charts', () => range, () => step],
+  queryFn: async () => {
+    const now = Math.floor(Date.now() / 1000)
+    const res = await ubusCall<AxiosResponse<MetricsData>>('ns.telegraf', 'metrics-history', {
+      start: now - range.value,
+      end: now,
+      step: step.value
+    })
+    return res.data
+  },
+  refetchInterval: interval,
+  refetchOnWindowFocus: interval != false
+})
+
+watch(
+  dataUpdatedAt,
+  (newVal) => {
+    emits('updatedAt', newVal)
+  },
+  { immediate: true }
+)
+
+// ── Computed chart data ───────────────────────────────────────────────────────
+
+const cpuChart = computed(() => buildCpuChart(data.value ?? null, themeStore.isLight))
+const loadChart = computed(() => buildLoadChart(data.value ?? null, themeStore.isLight))
+const diskioChart = computed(() => buildDiskioChart(data.value ?? null, themeStore.isLight))
+const diskChart = computed(() => buildDiskChart(data.value ?? null, themeStore.isLight))
+const processesChart = computed(() => buildProcessesChart(data.value ?? null, themeStore.isLight))
+const memoryChart = computed(() => buildMemoryChart(data.value ?? null, themeStore.isLight))
+const packetsChart = computed(() => buildPacketsChart(data.value ?? null, themeStore.isLight))
+const connectionsChart = computed(() =>
+  buildConnectionsChart(data.value ?? null, themeStore.isLight)
+)
+
+const trafficInterfaces = computed(() => getTrafficInterfaces(data.value ?? null))
+
+const latencyQuality = computed(() => getLatencyQuality(data.value ?? null))
+
+// ── Helper methods ────────────────────────────────────────────────────────────
+
+function getInterfaceTrafficChart(iface: string) {
+  return buildTrafficChart(iface, data.value ?? null, themeStore.isLight)
+}
+
+function getDisplayName(iface: string) {
+  return getInterfaceDisplayName(iface, data.value ?? null)
+}
+
+function getLatencyCommunityChart(hostData: PingHost) {
+  return buildLatencyChart(hostData, themeStore.isLight)
+}
+
+function getQualityCommunityChart(hostData: PingHost) {
+  return buildQualityChart(hostData, themeStore.isLight)
+}
+</script>
+
+<template>
+  <div>
+    <!-- Error notification -->
+    <NeInlineNotification
+      v-if="error"
+      kind="error"
+      :title="t('standalone.metrics.cannot_retrieve_metrics')"
+      :description="t(getAxiosErrorMessage(error) ?? 'error.generic_error')"
+      :close-aria-label="t('common.close')"
+    />
+
+    <!-- System Metrics Section -->
+    <div v-else class="space-y-4">
+      <NeDropdownFilter
+        v-model="selectedTimeRangeId"
+        :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
+        :clear-search-label="t('ne_dropdown_filter.clear_search')"
+        :label="timeRangeLabel"
+        :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+        :no-options-label="t('ne_dropdown_filter.no_options')"
+        :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+        :options="TIME_RANGES"
+        kind="radio"
+      />
+      <div class="grid grid-cols-1 gap-6 xl:grid-cols-2 3xl:grid-cols-3">
+        <NeHeading tag="h5" class="col-span-full uppercase">
+          {{ t('standalone.metrics.system_section') }}
+        </NeHeading>
+        <!-- CPU Usage -->
+        <MetricChartCard
+          :title="t('standalone.metrics.cpu')"
+          :chart="cpuChart"
+          dataset-suffix="%"
+          :show-legend="false"
+          :loading="isPending"
+        />
+        <!-- System Load -->
+        <MetricChartCard
+          :title="t('standalone.metrics.load')"
+          :chart="loadChart"
+          :loading="isPending"
+        />
+        <!-- Disk I/O -->
+        <MetricChartCard
+          :title="t('standalone.metrics.diskio')"
+          :chart="diskioChart"
+          :options="byteAxisOptions"
+          :loading="isPending"
+        />
+        <!-- Disk Usage per partition -->
+        <MetricChartCard
+          :title="t('standalone.metrics.disk')"
+          :chart="diskChart"
+          dataset-suffix="%"
+          :loading="isPending"
+        />
+        <!-- Total Processes -->
+        <MetricChartCard
+          :title="t('standalone.metrics.processes')"
+          :chart="processesChart"
+          :show-legend="false"
+          :loading="isPending"
+        />
+        <!-- RAM Usage -->
+        <MetricChartCard
+          :title="t('standalone.metrics.memory')"
+          :chart="memoryChart"
+          dataset-suffix="MB"
+          :loading="isPending"
+        />
+        <NeHeading tag="h5" class="col-span-full uppercase">
+          {{ t('standalone.metrics.network_section') }}
+        </NeHeading>
+        <!-- Network Traffic per interface -->
+        <MetricChartCard
+          v-for="iface in trafficInterfaces"
+          :key="`traffic-${iface}`"
+          :title="`${t('standalone.metrics.traffic')} - ${getDisplayName(iface)}`"
+          :chart="getInterfaceTrafficChart(iface)"
+          use-kbps-format
+          :loading="isPending"
+        />
+        <!-- Network Packets Rx/Tx -->
+        <MetricChartCard
+          :title="t('standalone.metrics.packets')"
+          :chart="packetsChart"
+          :loading="isPending"
+        />
+        <!-- Connections (conntrack) -->
+        <MetricChartCard
+          :title="t('standalone.metrics.connections')"
+          :chart="connectionsChart"
+          :show-legend="false"
+          :loading="isPending"
+        />
+        <!-- Latency and quality per ping host -->
+        <template v-for="(hostData, host) in latencyQuality" :key="`latency-${host}`">
+          <MetricChartCard
+            :title="`${t('standalone.metrics.latency')} - ${host}`"
+            :chart="getLatencyCommunityChart(hostData as PingHost)"
+            :options="latencyOptions"
+            :loading="isPending"
+          />
+          <MetricChartCard
+            :title="`${t('standalone.metrics.packet_delivery')} - ${host}`"
+            :chart="getQualityCommunityChart(hostData as PingHost)"
+            :show-legend="false"
+            :options="qualityOptions"
+            :loading="isPending"
+          />
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/composables/useAlerts.ts b/src/composables/useAlerts.ts
new file mode 100644
index 000000000..3d14dd45b
--- /dev/null
+++ b/src/composables/useAlerts.ts
@@ -0,0 +1,81 @@
+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'
+
+export type Alert = {
+  id?: string
+  activeAt: string
+  annotations: Record<string, string>
+  labels: Record<string, string>
+  name: string
+  source?: string
+  state: string
+}
+
+type ListAlertsResponse = {
+  alerts: Alert[]
+}
+
+function getSeverityBadgeKind(severity: string | undefined): NeNotificationV2['kind'] {
+  switch (severity) {
+    case 'critical':
+      return 'error'
+    case 'warning':
+      return 'warning'
+    default:
+      return 'info'
+  }
+}
+
+export function useAlerts() {
+  const { locale, t } = useI18n()
+
+  const { data, error, status, isPending, isError, dataUpdatedAt } = useQuery({
+    queryKey: ['metrics', 'alerts'],
+    queryFn: async () =>
+      await ubusCall<AxiosResponse<ListAlertsResponse>>('ns.telegraf', 'list-alerts'),
+    select: (response) => response.data.alerts,
+    refetchInterval: 5000
+  })
+
+  const notifications = computed<NeNotificationV2[]>(() => {
+    if (!data.value) {
+      return []
+    }
+
+    return data.value.map((alert) => {
+      const summary =
+        alert.annotations[`summary_${locale.value}`] ||
+        alert.annotations['summary_en'] ||
+        alert.name
+      const description =
+        alert.annotations[`description_${locale.value}`] ||
+        alert.annotations['description_en'] ||
+        ''
+
+      return {
+        id: alert.id ?? `${alert.name}-${alert.activeAt}`,
+        kind: getSeverityBadgeKind(alert.labels.severity),
+        title: summary,
+        description: description,
+        timestamp: new Date(alert.activeAt),
+        firstButtonLabel: t('standalone.metrics.go_to_alerts'),
+        firstButtonAction: 'goto_alerts',
+        isShown: true
+      }
+    })
+  })
+
+  return {
+    data,
+    notifications,
+    error,
+    status,
+    isPending,
+    isError,
+    dataUpdatedAt
+  }
+}
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 0f68f40e5..1ac83b093 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -212,6 +212,7 @@
     "cannot_retrieve_backup_info": "Cannot retrieve backup information",
     "cannot_retrieve_flashstart_configuration": "Cannot retrieve configuration",
     "cannot_retrieve_netdata_configuration": "Cannot retrieve configuration",
+    "cannot_retrieve_telegraf_configuration": "Cannot retrieve Telegraf configuration",
     "cannot_retrieve_dpi_rules": "Cannot retrieve DPI rules",
     "cannot_retrieve_dpi_exceptions": "Cannot retrieve DPI exceptions",
     "cannot_create_dpi_exception": "Cannot create DPI exception",
@@ -882,8 +883,6 @@
       "edit_scheduled_date": "Edit scheduled date",
       "update": "Update",
       "automatic_updates": "Automatic updates",
-      "automatic_updates_tooltip": "Enable to activate automatic updates. Available only with subscription.",
-      "go_to_subscription": "Go to subscription",
       "automatic_updates_enabled_message": "Automatic updates successfully enabled",
       "automatic_updates_disabled_message": "Automatic updates successfully disabled",
       "schedule_update": "Schedule update",
@@ -1506,7 +1505,8 @@
       "zone_dmz_color": "Orange",
       "preset_active_title": "Preset selected",
       "preset_active_description": "When you create this zone, the system will automatically add firewall rules to allow access to essential services. You can view or modify them anytime under Firewall > Rules > Input Rules.",
-      "choose_one_or_more_zones": "Choose one or more zones"
+      "choose_one_or_more_zones": "Choose one or more zones",
+      "logging_enabled": "Logging enabled"
     },
     "port_forward": {
       "title": "Port forward",
@@ -1538,6 +1538,8 @@
       "log": "Log",
       "hairpin_nat": "Hairpin NAT",
       "hairpin_nat_zones": "Hairpin NAT enabled on following zones",
+      "hairpin_nat_enabled": "Hairpin NAT enabled on {zones}",
+      "logging_enabled": "Logging enabled",
       "choose_zone": "Choose zone",
       "choose_protocol": "Choose protocol",
       "protocol_helper": "Leave unselected for any source protocol",
@@ -1643,7 +1645,8 @@
       "destination_object": "Destination object",
       "inactive": "Inactive",
       "zone_no_longer_exists": "This rule is inactive because it uses a zone that no longer exists",
-      "disabled_rule": "This rule has been manually disabled, but can be re-enabled"
+      "disabled_rule": "This rule has been manually disabled, but can be re-enabled",
+      "logging_enabled": "Logging enabled"
     },
     "firewall": {
       "title": "Firewall"
@@ -2186,7 +2189,8 @@
       "pre_shared_key_invalid_chars_tooltip": "The characters '\\{' and '\\}' are not allowed in the pre-shared key",
       "use_generated_key": "Use generated key",
       "use_custom_key": "Use custom key",
-      "dpd_dead_peer_detection": "DPD (dead peer detection)",
+      "dpd_dead_peer_detection": "DPD action",
+      "dpd_dead_peer_detection_tooltip": "Action to perform for this CHILD_SA on DPD (Dead Peer Detection) timeout. The default action is 'clear' which closes the CHILD_SA and does not take further action. 'trap' installs a trap policy, which catches matching traffic and tries to re-negotiate the tunnel on-demand. 'restart' immediately tries to re-negotiate the CHILD_SA under a fresh IKE_SA.",
       "pfs_perfect_forward_secrecy_disabled": "PFS (Perfect Forward Secrecy) disabled",
       "compression": "Compression",
       "close_action": "Close action",
@@ -2271,7 +2275,6 @@
       "unchanged": "Unchanged",
       "remote_database_added": "Remote database added",
       "remote_database_added_description": "{name} added successfully",
-      "add_remote_database_tooltip": "Remote users databases are available only with a subscription plan",
       "administrator": "Administrator user",
       "administrator_tooltip": "A user promoted to administrator can access the administration web interface and configure this unit.",
       "remove_admin": "Remove from administrator users",
@@ -2298,9 +2301,7 @@
     "real_time_monitor": {
       "title": "Real-time monitor",
       "description": "In-depth analysis of system and application performance, detailed metrics and visualizations. Monitoring data are stored in RAM and reset upon unit reboot. If the unit is linked to a remote controller, metrics are saved on the controller too and persist through unit reboots.",
-      "open_report": "Open Netdata",
       "cannot_open_grafana_message": "Grafana monitoring is available only after connecting the unit to a controller",
-      "cannot_open_report_from_controller": "Cannot open report from a controlled unit. You can open the report by accessing the unit UI directly, or by accessing the controller UI, going to 'Unit manager' page, clicking the three dots menu of the unit and selecting 'Open metrics'.",
       "traffic": "Traffic",
       "daily_traffic": "Daily traffic",
       "connectivity": "WAN uplinks",
@@ -2444,6 +2445,59 @@
       "raw_data": "Raw data",
       "table_aria_label": "Table of active flows"
     },
+    "metrics": {
+      "title": "Metrics",
+      "time_range": "Time range",
+      "time_range_minutes": "Last minute | Last {count} minutes",
+      "time_range_hours": "Last hour | Last {count} hours",
+      "time_range_days": "Last day | Last {count} days",
+      "refresh_interval": "Auto-refresh",
+      "system_section": "System",
+      "network_section": "Network",
+      "connections": "Connections (conntrack)",
+      "traffic": "Network interface traffic",
+      "latency": "Latency",
+      "packet_delivery": "Packet delivery",
+      "cpu": "CPU usage",
+      "load": "System load",
+      "diskio": "Disk I/O",
+      "disk": "Disk usage (%)",
+      "processes": "Total processes",
+      "memory": "RAM usage",
+      "packets": "Network packets",
+      "no_data": "No data available for the selected time range",
+      "cannot_retrieve_metrics": "Cannot retrieve metrics",
+      "tabs": {
+        "charts": "Charts",
+        "alerts": "Alerts"
+      },
+      "alerts_description": "Current pending and firing alerts evaluated by vmalert.",
+      "alerts_table_aria_label": "Table of current monitoring alerts",
+      "alert": "Alert",
+      "status": "Status",
+      "severity": "Severity",
+      "triggered_by": "Triggered by",
+      "started_at": "Started at",
+      "service": "Service",
+      "group": "Group",
+      "no_alerts_yet": "No alerts yet",
+      "no_alerts_description": "System is fully operational.",
+      "cannot_retrieve_alerts": "Cannot retrieve alerts",
+      "firing": "Firing",
+      "pending": "Pending",
+      "critical": "Critical",
+      "warning": "Warning",
+      "info": "Info",
+      "unknown": "Unknown",
+      "go_to_alerts": "Go to Alerts",
+      "active_alerts": "@:standalone.metrics.no_alerts_description | active alert | active alerts",
+      "no_alerts": "No alerts"
+    },
+    "metrics_monitor": {
+      "description": "Historical view of key system metrics collected by Telegraf and stored in VictoriaMetrics. Select a time range to adjust the chart window.",
+      "refresh": "Refresh",
+      "vm_unreachable": "VictoriaMetrics is not reachable. Make sure the service is running."
+    },
     "ping_latency_monitor": {
       "title": "Ping latency monitor",
       "description": "Measure round-trip time and packet delivery rates by pinging network hosts. Add one or more hosts, including VPN IPs to monitor tunnel quality. Latency and packet delivery charts are available under Monitoring > Real-time monitor > WAN uplinks.",
diff --git a/src/i18n/it.json b/src/i18n/it.json
index ba07f7ebe..d1da194b2 100644
--- a/src/i18n/it.json
+++ b/src/i18n/it.json
@@ -189,6 +189,7 @@
     "invalid_future_date": "La data non può essere impostata nel passato",
     "cannot_set_passphrase": "Impossibile impostare passphrase",
     "cannot_retrieve_netdata_configuration": "Impossibile recuperare la configurazione Netdata",
+    "cannot_retrieve_telegraf_configuration": "Impossibile recuperare la configurazione Telegraf",
     "cannot_retrieve_tunnel_options": "Impossibile recuperare le opzioni del tunnel",
     "invalid_negative_integer": "Inserire un numero intero maggiore o uguale a 0",
     "cannot_cancel_update_schedule": "Impossibile annullare la programmazione dell'aggiornamento",
@@ -1052,7 +1053,8 @@
       "zone_dmz_color": "Orange",
       "preset_active_title": "Preset selezionato",
       "preset_active_description": "Quando si crea questa zona, il sistema aggiungerà automaticamente le regole firewall per consentire l'accesso ai servizi essenziali. È possibile visualizzarli o modificarli in qualsiasi momento sotto Firewall > Regole > Regole di input.",
-      "choose_one_or_more_zones": "Scegliere una o più zone"
+      "choose_one_or_more_zones": "Scegliere una o più zone",
+      "logging_enabled": "Logging abilitato"
     },
     "port_forward": {
       "disable": "Disabilita",
@@ -1079,6 +1081,8 @@
       "status": "Stato",
       "title": "Port forward",
       "hairpin_nat_zones": "Hairpin NAT abilitato sulle seguenti zone",
+      "hairpin_nat_enabled": "Hairpin NAT abilitato su {zones}",
+      "logging_enabled": "Logging abilitato",
       "log": "Log",
       "wan_ip": "IP WAN",
       "destination_port": "Porta di destinazione",
@@ -1559,7 +1563,8 @@
       "no_tunnel_found": "Nessun tunnel trovato",
       "connected": "Connesso",
       "use_generated_key": "Utilizza la chiave generata",
-      "dpd_dead_peer_detection": "DPD (dead peer detection)",
+      "dpd_dead_peer_detection": "DPD action",
+      "dpd_dead_peer_detection_tooltip": "Azione da eseguire per questo CHILD_SA al timeout DPD (Dead Peer Detection). Il valore predefinito 'clear' chiude il CHILD_SA e non esegue altre azioni. 'trap' installa una trap policy, che intercetta il traffico corrispondente e prova a rinegoziare il tunnel on-demand. 'restart' prova immediatamente a rinegoziare il CHILD_SA con un nuovo IKE_SA.",
       "choose_wan": "Scegli WAN",
       "wan_ip_address": "Indirizzo IP WAN",
       "enable": "Abilita",
@@ -1621,8 +1626,6 @@
       "automatic_updates": "Aggiornamenti automatici",
       "automatic_updates_enabled_message": "Aggiornamenti automatici abilitati con successo",
       "automatic_updates_disabled_message": "Aggiornamenti automatici disattivati con successo",
-      "automatic_updates_tooltip": "Abilita per attivare gli aggiornamenti automatici. Disponibile solo con subscription.",
-      "go_to_subscription": "Vai a subscription",
       "schedule_update": "Pianifica aggiornamento",
       "no_updates_available": "Nessun aggiornamento disponibilw",
       "new_release_available": "Nuova versione disponibile",
@@ -1740,7 +1743,6 @@
       "set_admin": "Impostare come utente amministratore",
       "remove_admin": "Rimuovi dagli utenti amministratori",
       "administrator_table_tooltip": "Utente amministratore",
-      "add_remote_database_tooltip": "I database degli utenti remoti sono disponibili solo con subscription",
       "administrator_tooltip": "Un utente promosso ad amministratore può accedere all'interfaccia web di amministrazione e configurare questa unità.",
       "user_bind_dn": "User bind DN personalizzato",
       "user_bind_dn_tooltip": "Distinguished Name (DN) utilizzato per collegarsi al server LDAP. Questo campo sovrascrive il bind DN calcolato. Utilizzare quando ci si autenticata ad un server Active Directory. Può contenere una variabile '%u' che verrà espansa con il nome dell'utente. Esempio: '%u{'@'}secretexample.com', 'SECRETEXAMPLE\\%u'",
@@ -2002,7 +2004,8 @@
       "destination_object": "Oggetto di destinazione",
       "inactive": "Inattiva",
       "zone_no_longer_exists": "Questa regola è stata disattivata perché utilizza una zona che non esiste più",
-      "disabled_rule": "Questa regola è stata disabilitata manualmente, ma può essere riattivata"
+      "disabled_rule": "Questa regola è stata disabilitata manualmente, ma può essere riattivata",
+      "logging_enabled": "Logging abilitato"
     },
     "certificates": {
       "title": "Certificati",
@@ -2408,10 +2411,8 @@
       "account": "Account",
       "threat_shield_disabled_message": "Non sono disponibili statistiche perché Threat Shield IP è disabilitato.",
       "title": "Monitor in tempo reale",
-      "open_report": "Apri Netdata",
       "cannot_open_grafana_message": "Il monitoraggio con Grafana è disponibile solo dopo aver collegato l'unità a un controller",
       "description": "Analisi approfondita delle prestazioni del sistema e delle applicazioni, metriche dettagliate e visualizzazioni. I dati di monitoraggio vengono memorizzati in RAM e ripristinati al riavvio dell'unità. Se l'unità è collegata a un controller remoto, le metriche vengono salvate anche sul controller e persistono al riavvio dell'unità .",
-      "cannot_open_report_from_controller": "Impossibile aprire il report per l'unità controllata. È possibile aprire il report accedendo direttamente all'interfaccia dell unità, o accedendo all'interfaccia del controller, andando alla pagina 'Gestione unità, facendo clic sul menu tre punti dell'unità e selezionando 'Apri metriche'.",
       "times_blocked": "Numero blocchi",
       "timestamp": "Data e ora",
       "daily_total_traffic": "Traffico totale giornaliero",
@@ -2457,6 +2458,63 @@
     "monitoring": {
       "title": "Monitoraggio"
     },
+    "metrics": {
+      "title": "Metriche",
+      "time_range": "Intervallo di tempo",
+      "time_range_minutes": "Ultimo {num} minuto | Ultimi {num} minuti",
+      "time_range_hours": "Ultima {num} ora | Ultime {num} ore",
+      "time_range_days": "Ultimo {num} giorno | Ultimi {num} giorni",
+      "refresh_interval": "Aggiornamento automatico",
+      "refresh_off": "Disattivato",
+      "refresh_30s": "Ogni 30 secondi",
+      "refresh_60s": "Ogni 60 secondi",
+      "system_section": "Sistema",
+      "network_section": "Rete",
+      "connections": "Connessioni (conntrack)",
+      "traffic": "Traffico delle interfacce di rete",
+      "latency": "Latenza",
+      "packet_delivery": "Consegna pacchetti",
+      "cpu": "Utilizzo CPU",
+      "load": "Carico di sistema",
+      "diskio": "I/O disco",
+      "disk": "Utilizzo disco (%)",
+      "processes": "Processi totali",
+      "memory": "Utilizzo RAM",
+      "packets": "Pacchetti di rete",
+      "no_data": "Nessun dato disponibile per l'intervallo selezionato",
+      "cannot_retrieve_metrics": "Impossibile recuperare le metriche",
+      "tabs": {
+        "charts": "Grafici",
+        "alerts": "Avvisi"
+      },
+      "alerts_description": "Elenco corrente degli avvisi in stato pending o firing valutati da vmalert.",
+      "alerts_table_aria_label": "Tabella degli avvisi di monitoraggio correnti",
+      "alert": "Avviso",
+      "status": "Stato",
+      "severity": "Gravita",
+      "triggered_by": "Rilevato da",
+      "started_at": "Avviato il",
+      "service": "Servizio",
+      "group": "Gruppo",
+      "no_alerts_yet": "Nessun avviso",
+      "no_alerts_description": "Il sistema funziona correttamente.",
+      "cannot_retrieve_alerts": "Impossibile recuperare gli avvisi",
+      "firing": "Attivo",
+      "pending": "In attesa",
+      "critical": "Critico",
+      "warning": "Avviso",
+      "info": "Info",
+      "unknown": "Sconosciuto",
+      "go_to_alerts": "Vai agli avvisi",
+      "active_alerts": "@:standalone.metrics.no_alerts_description | avviso attivo | avvisi attivi",
+      "system_degraded": "Sistema degradato",
+      "no_alerts": "Nessun avviso"
+    },
+    "metrics_monitor": {
+      "description": "Vista storica delle metriche principali del sistema raccolte da Telegraf e archiviate in VictoriaMetrics. Seleziona un intervallo di tempo per regolare la finestra dei grafici.",
+      "refresh": "Aggiorna",
+      "vm_unreachable": "VictoriaMetrics non e raggiungibile. Verifica che il servizio sia in esecuzione."
+    },
     "netify_informatics": {
       "title": "Netify Informatics",
       "netify_informatics_disable_description": "L'invio di metadati è stato disattivato",
diff --git a/src/i18n/ta.json b/src/i18n/ta.json
index 881499d06..63843c99c 100644
--- a/src/i18n/ta.json
+++ b/src/i18n/ta.json
@@ -133,6 +133,7 @@
     "cannot_retrieve_backup_info": "காப்புப் பிரதி தகவலை மீட்டெடுக்க முடியாது",
     "cannot_retrieve_flashstart_configuration": "உள்ளமைவை மீட்டெடுக்க முடியவில்லை",
     "cannot_retrieve_netdata_configuration": "உள்ளமைவை மீட்டெடுக்க முடியவில்லை",
+    "cannot_retrieve_telegraf_configuration": "Telegraf உள்ளமைவை மீட்டெடுக்க முடியவில்லை",
     "cannot_retrieve_dpi_rules": "DPI விதிகளை மீட்டெடுக்க முடியாது",
     "cannot_retrieve_dpi_exceptions": "DPI விதிவிலக்குகளை மீட்டெடுக்க முடியாது",
     "cannot_create_dpi_exception": "DPI விதிவிலக்கை உருவாக்க முடியாது",
@@ -859,8 +860,6 @@
       "edit_scheduled_date": "திட்டமிடப்பட்ட தேதியைத் திருத்தவும்",
       "update": "புதுப்பிப்பு",
       "automatic_updates": "தானியங்கி புதுப்பிப்புகள்",
-      "automatic_updates_tooltip": "தானியங்கி புதுப்பிப்புகளை செயல்படுத்த இயக்கவும். சந்தாவுடன் மட்டுமே கிடைக்கும்.",
-      "go_to_subscription": "சந்தாவிற்கு செல்க",
       "automatic_updates_enabled_message": "தானியங்கி புதுப்பிப்புகள் வெற்றிகரமாக இயக்கப்பட்டன",
       "automatic_updates_disabled_message": "தானியங்கி புதுப்பிப்புகள் வெற்றிகரமாக முடக்கப்பட்டன",
       "schedule_update": "அட்டவணை புதுப்பிப்பு",
@@ -2184,7 +2183,6 @@
       "unchanged": "மாறாதது",
       "remote_database_added": "தொலைநிலை தரவுத்தளம் சேர்க்கப்பட்டது",
       "remote_database_added_description": "{name} வெற்றிகரமாக சேர்க்கப்பட்டது",
-      "add_remote_database_tooltip": "தொலைநிலை பயனர்களின் தரவுத்தளங்கள் சந்தா திட்டத்துடன் மட்டுமே கிடைக்கும்",
       "administrator": "நிர்வாகி பயனர்",
       "administrator_tooltip": "நிர்வாகியாக பதவி உயர்வு பெற்ற ஒரு பயனர், நிர்வாக இணைய இடைமுகத்தை அணுகி இந்த அலகை உள்ளமைக்க முடியும்.",
       "remove_admin": "நிர்வாகி பயனர்களிடமிருந்து அகற்று",
diff --git a/src/lib/standalone/metricsCharts.ts b/src/lib/standalone/metricsCharts.ts
new file mode 100644
index 000000000..55203c81b
--- /dev/null
+++ b/src/lib/standalone/metricsCharts.ts
@@ -0,0 +1,308 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { byteFormat1024 } from '@nethesis/vue-components'
+import {
+  AMBER_500,
+  AMBER_600,
+  CYAN_500,
+  CYAN_600,
+  EMERALD_500,
+  EMERALD_600,
+  FUCHSIA_500,
+  FUCHSIA_600,
+  INDIGO_500,
+  INDIGO_600,
+  ROSE_500,
+  ROSE_600,
+  VIOLET_500,
+  VIOLET_600
+} from '@/lib/color'
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+export interface MetricDataset {
+  label: string
+  data: number[]
+}
+
+export interface MetricSeries {
+  labels: number[]
+  datasets: MetricDataset[]
+}
+
+export interface TrafficInterface extends MetricSeries {
+  zone?: string
+  device?: string
+}
+
+export interface PingHost {
+  latency: MetricSeries
+  quality: MetricSeries
+}
+
+export interface MetricsData {
+  connections: MetricSeries
+  traffic: Record<string, TrafficInterface>
+  cpu: MetricSeries
+  load: MetricSeries
+  diskio: MetricSeries
+  disk: MetricSeries
+  processes: MetricSeries
+  memory: MetricSeries
+  packets: MetricSeries
+  latency_quality?: Record<string, PingHost>
+}
+
+export interface ChartData {
+  labels: number[]
+  datasets: object[]
+}
+
+// ── Color palette ─────────────────────────────────────────────────────────────
+
+const PALETTE_LIGHT = [
+  CYAN_600,
+  INDIGO_600,
+  EMERALD_600,
+  ROSE_600,
+  AMBER_600,
+  VIOLET_600,
+  FUCHSIA_600
+]
+const PALETTE_DARK = [
+  CYAN_500,
+  INDIGO_500,
+  EMERALD_500,
+  ROSE_500,
+  AMBER_500,
+  VIOLET_500,
+  FUCHSIA_500
+]
+
+// ── Helper functions ──────────────────────────────────────────────────────────
+
+function toMs(labels: number[]): number[] {
+  return labels.map((s) => s * 1000)
+}
+
+function makeDataset(ds: MetricDataset, color: string) {
+  return {
+    label: ds.label,
+    data: ds.data,
+    borderColor: color,
+    backgroundColor: color,
+    borderWidth: 1.5,
+    radius: 0,
+    tension: 0
+  }
+}
+
+function buildDatasets(
+  series: MetricSeries,
+  colorsLight: string[],
+  colorsDark: string[],
+  isLight: boolean
+): object[] {
+  const palette = isLight ? colorsLight : colorsDark
+  return series.datasets.map((ds, i) => makeDataset(ds, palette[i % palette.length]!))
+}
+
+function buildTrafficDatasets(series: MetricSeries, isLight: boolean): object[] {
+  return buildDatasets(series, [CYAN_600, INDIGO_600], [CYAN_500, INDIGO_500], isLight)
+}
+
+function buildLatencyDatasets(series: MetricSeries, isLight: boolean): object[] {
+  return buildDatasets(
+    series,
+    [EMERALD_600, AMBER_600, ROSE_600],
+    [EMERALD_500, AMBER_500, ROSE_500],
+    isLight
+  )
+}
+
+function buildQualityDatasets(series: MetricSeries, isLight: boolean): object[] {
+  return buildDatasets(series, [INDIGO_600], [INDIGO_500], isLight)
+}
+
+// ── Chart options (plain objects – they never change) ─────────────────────────
+
+export const byteAxisOptions = {
+  scales: {
+    y: { ticks: { callback: (value: number) => byteFormat1024(Math.abs(value)) } }
+  },
+  plugins: {
+    tooltip: {
+      callbacks: {
+        label: (ctx: { dataset: { label?: string }; parsed: { y: number } }) => {
+          const label = ctx.dataset.label ? `${ctx.dataset.label}: ` : ''
+          return label + byteFormat1024(Math.abs(ctx.parsed.y))
+        }
+      }
+    }
+  }
+}
+
+export const latencyOptions = {
+  scales: {
+    y: { ticks: { callback: (value: number) => `${Math.round(value)} ms` } }
+  },
+  plugins: {
+    tooltip: {
+      callbacks: {
+        label: (ctx: { dataset: { label?: string }; parsed: { y: number } }) => {
+          const label = ctx.dataset.label ? `${ctx.dataset.label}: ` : ''
+          return label + `${Math.round(ctx.parsed.y)} ms`
+        }
+      }
+    }
+  }
+}
+
+export const qualityOptions = {
+  scales: {
+    y: {
+      min: 0,
+      max: 100,
+      ticks: { callback: (value: number) => `${Math.round(value)}%` }
+    }
+  },
+  plugins: {
+    tooltip: {
+      callbacks: {
+        label: (ctx: { dataset: { label?: string }; parsed: { y: number } }) => {
+          const label = ctx.dataset.label ? `${ctx.dataset.label}: ` : ''
+          return label + `${Math.round(ctx.parsed.y)}%`
+        }
+      }
+    }
+  }
+}
+
+// ── Chart builders ────────────────────────────────────────────────────────────
+
+export function buildCpuChart(metrics: MetricsData | null, isLight: boolean): ChartData | null {
+  if (!metrics) return null
+  const s = metrics.cpu
+  return { labels: toMs(s.labels), datasets: buildDatasets(s, [AMBER_600], [AMBER_500], isLight) }
+}
+
+export function buildLoadChart(metrics: MetricsData | null, isLight: boolean): ChartData | null {
+  if (!metrics) return null
+  const s = metrics.load
+  return {
+    labels: toMs(s.labels),
+    datasets: buildDatasets(
+      s,
+      [EMERALD_600, CYAN_600, VIOLET_600],
+      [EMERALD_500, CYAN_500, VIOLET_500],
+      isLight
+    )
+  }
+}
+
+export function buildDiskioChart(metrics: MetricsData | null, isLight: boolean): ChartData | null {
+  if (!metrics) return null
+  const s = metrics.diskio
+  return {
+    labels: toMs(s.labels),
+    datasets: buildDatasets(s, [CYAN_600, ROSE_600], [CYAN_500, ROSE_500], isLight)
+  }
+}
+
+export function buildDiskChart(metrics: MetricsData | null, isLight: boolean): ChartData | null {
+  if (!metrics) return null
+  const s = metrics.disk
+  return {
+    labels: toMs(s.labels),
+    datasets: buildDatasets(s, PALETTE_LIGHT, PALETTE_DARK, isLight)
+  }
+}
+
+export function buildProcessesChart(
+  metrics: MetricsData | null,
+  isLight: boolean
+): ChartData | null {
+  if (!metrics) return null
+  const s = metrics.processes
+  return {
+    labels: toMs(s.labels),
+    datasets: buildDatasets(s, [FUCHSIA_600], [FUCHSIA_500], isLight)
+  }
+}
+
+export function buildMemoryChart(metrics: MetricsData | null, isLight: boolean): ChartData | null {
+  if (!metrics) return null
+  const s = metrics.memory
+  return {
+    labels: toMs(s.labels),
+    datasets: buildDatasets(s, [INDIGO_600, CYAN_600], [INDIGO_500, CYAN_500], isLight)
+  }
+}
+
+export function buildPacketsChart(metrics: MetricsData | null, isLight: boolean): ChartData | null {
+  if (!metrics) return null
+  const s = metrics.packets
+  return {
+    labels: toMs(s.labels),
+    datasets: buildDatasets(s, [CYAN_600, INDIGO_600], [CYAN_500, INDIGO_500], isLight)
+  }
+}
+
+export function buildConnectionsChart(
+  metrics: MetricsData | null,
+  isLight: boolean
+): ChartData | null {
+  if (!metrics) return null
+  const s = metrics.connections
+  return {
+    labels: toMs(s.labels),
+    datasets: buildDatasets(s, [EMERALD_600], [EMERALD_500], isLight)
+  }
+}
+
+export function buildTrafficChart(
+  iface: string,
+  metrics: MetricsData | null,
+  isLight: boolean
+): ChartData | null {
+  if (!metrics?.traffic[iface]) return null
+  const s = metrics.traffic[iface]
+  return { labels: toMs(s.labels), datasets: buildTrafficDatasets(s, isLight) }
+}
+
+export function buildLatencyChart(hostData: PingHost, isLight: boolean): ChartData | null {
+  if (!hostData.latency?.labels?.length) return null
+  return {
+    labels: toMs(hostData.latency.labels),
+    datasets: buildLatencyDatasets(hostData.latency, isLight)
+  }
+}
+
+export function buildQualityChart(hostData: PingHost, isLight: boolean): ChartData | null {
+  if (!hostData.quality?.labels?.length) return null
+  return {
+    labels: toMs(hostData.quality.labels),
+    datasets: buildQualityDatasets(hostData.quality, isLight)
+  }
+}
+
+// ── Utility helpers ───────────────────────────────────────────────────────────
+
+export function getTrafficInterfaces(metrics: MetricsData | null): string[] {
+  if (!metrics) return []
+  return Object.keys(metrics.traffic).sort()
+}
+
+export function getInterfaceDisplayName(iface: string, metrics: MetricsData | null): string {
+  if (!metrics?.traffic[iface]) return iface
+  const data = metrics.traffic[iface]
+  if (data.zone && data.device) {
+    return `${data.zone} (${data.device})`
+  }
+  return iface
+}
+
+export function getLatencyQuality(metrics: MetricsData | null): Record<string, PingHost> {
+  return metrics?.latency_quality ?? {}
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index d774594ef..6587d01dc 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -196,6 +196,11 @@ const standaloneRoutes = [
     name: 'PingLatencyMonitor',
     component: () => import('../views/standalone/monitoring/PingLatencyMonitorView.vue')
   },
+  {
+    path: 'monitoring/metrics',
+    name: 'MetricsMonitor',
+    component: () => import('../views/standalone/monitoring/MetricsView.vue')
+  },
   {
     path: 'account',
     name: 'Account',
diff --git a/src/stores/standalone/firewall.ts b/src/stores/standalone/firewall.ts
index 0b1745214..218830809 100644
--- a/src/stores/standalone/firewall.ts
+++ b/src/stores/standalone/firewall.ts
@@ -50,7 +50,7 @@ interface ForwardingResponse {
   ipset?: string
 }
 
-export type FirewallRuleAction = 'DROP' | 'REJECT' | 'ACCEPT'
+export type FirewallRuleAction = 'DROP' | 'REJECT' | 'ACCEPT' | 'NOTRACK'
 export type NatRuleAction = 'SNAT' | 'MASQUERADE' | 'ACCEPT'
 
 export interface FirewallRule {
diff --git a/src/stores/standalone/threatShield.ts b/src/stores/standalone/threatShield.ts
index fe8a9e574..f717cf32c 100644
--- a/src/stores/standalone/threatShield.ts
+++ b/src/stores/standalone/threatShield.ts
@@ -7,7 +7,6 @@ import { ubusCall, ValidationError } from '@/lib/standalone/ubus'
 import { getAxiosErrorMessage, sortByProperty } from '@nethesis/vue-components'
 import { defineStore } from 'pinia'
 import { useUciPendingChangesStore } from './uciPendingChanges'
-import { useNotificationsStore } from '../notifications'
 
 export type Blocklist = {
   name: string
@@ -36,7 +35,6 @@ export type DnsAllowedDomain = {
 export const useThreatShieldStore = defineStore('threatShield', () => {
   const { t, te } = useI18n()
   const uciChangesStore = useUciPendingChangesStore()
-  const notificationsStore = useNotificationsStore()
   const dnsBlocklists = ref<Blocklist[]>([])
   const dnsSettings = ref<DnsSettings>()
   const dnsZones = ref<string[]>([])
@@ -190,17 +188,7 @@ export const useThreatShieldStore = defineStore('threatShield', () => {
 
     try {
       await ubusCall('ns.threatshield', method, domain)
-
-      if (!isEditing) {
-        // applied instantly, show notification (only if creating)
-        notificationsStore.createNotification({
-          kind: 'success',
-          title: t('standalone.threat_shield_dns.blocked_domain_added_title'),
-          description: t('standalone.threat_shield_dns.blocked_domain_added_description', {
-            domain: domain.address
-          })
-        })
-      }
+      uciChangesStore.getChanges()
     } catch (err: any) {
       console.error(err)
 
@@ -223,17 +211,7 @@ export const useThreatShieldStore = defineStore('threatShield', () => {
 
     try {
       await ubusCall('ns.threatshield', method, domain)
-
-      if (!isEditing) {
-        // applied instantly, show notification (only if creating)
-        notificationsStore.createNotification({
-          kind: 'success',
-          title: t('standalone.threat_shield_dns.allowed_domain_added_title'),
-          description: t('standalone.threat_shield_dns.allowed_domain_added_description', {
-            domain: domain.address
-          })
-        })
-      }
+      uciChangesStore.getChanges()
     } catch (err: any) {
       console.error(err)
 
@@ -278,14 +256,7 @@ export const useThreatShieldStore = defineStore('threatShield', () => {
       await ubusCall('ns.threatshield', 'dns-delete-blocked', {
         address: domain
       })
-      // applied instantly, show notification
-      notificationsStore.createNotification({
-        kind: 'success',
-        title: t('standalone.threat_shield_dns.blocked_domain_deleted_title'),
-        description: t('standalone.threat_shield_dns.blocked_domain_deleted_description', {
-          domain
-        })
-      })
+      uciChangesStore.getChanges()
     } catch (err: any) {
       console.error(err)
       errorDeleteDnsBlockedDomain.value = t(getAxiosErrorMessage(err))
@@ -310,14 +281,7 @@ export const useThreatShieldStore = defineStore('threatShield', () => {
       await ubusCall('ns.threatshield', 'dns-delete-allowed', {
         address: domain
       })
-      // applied instantly, show notification
-      notificationsStore.createNotification({
-        kind: 'success',
-        title: t('standalone.threat_shield_dns.allowed_domain_deleted_title'),
-        description: t('standalone.threat_shield_dns.allowed_domain_deleted_description', {
-          domain
-        })
-      })
+      uciChangesStore.getChanges()
     } catch (err: any) {
       console.error(err)
       errorDeleteDnsAllowedDomain.value = t(getAxiosErrorMessage(err))
diff --git a/src/views/standalone/StandaloneDashboardView.vue b/src/views/standalone/StandaloneDashboardView.vue
index 231ca388c..2d91d2593 100644
--- a/src/views/standalone/StandaloneDashboardView.vue
+++ b/src/views/standalone/StandaloneDashboardView.vue
@@ -19,6 +19,7 @@ import MacBindingStatusCard from '@/components/standalone/dashboard/MacBindingSt
 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()
@@ -49,13 +50,8 @@ function goTo(path: string) {
         </NeLink>
       </template>
     </ServiceCard>
-    <!-- dpi-core -->
-    <ServiceCard
-      service-name="netifyd"
-      has-status
-      :title="t('standalone.dashboard.dpi_core')"
-      :icon="['fas', 'bolt']"
-    />
+    <!-- alerts -->
+    <AlertsCard />
     <!-- openvpn rw -->
     <ServiceCard
       service-name="openvpn_rw"
diff --git a/src/views/standalone/firewall/ZonesAndPolicies.vue b/src/views/standalone/firewall/ZonesAndPolicies.vue
index 67c294aaa..b153a3962 100644
--- a/src/views/standalone/firewall/ZonesAndPolicies.vue
+++ b/src/views/standalone/firewall/ZonesAndPolicies.vue
@@ -18,7 +18,8 @@ import {
   NeTableCell,
   NePaginator,
   NeEmptyState,
-  useItemPagination
+  useItemPagination,
+  NeTooltip
 } from '@nethesis/vue-components'
 import { useI18n } from 'vue-i18n'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -33,7 +34,13 @@ import {
   getZoneColorClasses,
   getIconFromZone
 } from '@/lib/standalone/network'
-import { faPenToSquare, faTrash } from '@fortawesome/free-solid-svg-icons'
+import {
+  faArrowRight,
+  faBan,
+  faList,
+  faPenToSquare,
+  faTrash
+} from '@fortawesome/free-solid-svg-icons'
 
 const { t } = useI18n()
 const firewallConfig = useFirewallStore()
@@ -89,7 +96,7 @@ function editZone(zone: Zone) {
       </p>
       <div>
         <!-- TODO: add settings -->
-        <NeButton kind="secondary" size="lg" @click="createZone">
+        <NeButton kind="primary" size="lg" @click="createZone">
           <template #prefix>
             <FontAwesomeIcon :icon="['fas', 'circle-plus']" />
           </template>
@@ -123,7 +130,6 @@ function editZone(zone: Zone) {
           t('standalone.zones_and_policies.traffic_to_same_zone')
         }}</NeTableHeadCell>
         <NeTableHeadCell>{{ t('standalone.zones_and_policies.interfaces') }}</NeTableHeadCell>
-        <NeTableHeadCell>{{ t('standalone.zones_and_policies.logging') }}</NeTableHeadCell>
         <NeTableHeadCell>
           <!-- no header for actions -->
         </NeTableHeadCell>
@@ -140,14 +146,33 @@ function editZone(zone: Zone) {
         </NeTableRow>
         <NeTableRow v-for="item in paginatedItems" v-else :key="item.name">
           <NeTableCell :data-label="t('standalone.zones_and_policies.zone')">
-            <div class="flex items-center gap-x-4">
-              <div
-                :class="getZoneColorClasses(item.name)"
-                class="flex h-10 w-10 items-center justify-center rounded-full"
-              >
-                <FontAwesomeIcon :icon="getIconFromZone(item.name)" class="h-5 w-5" />
+            <div class="flex w-full items-center justify-between gap-2">
+              <div>
+                <div class="flex items-center gap-x-4">
+                  <div
+                    :class="getZoneColorClasses(item.name)"
+                    class="flex h-10 w-10 items-center justify-center rounded-full"
+                  >
+                    <FontAwesomeIcon :icon="getIconFromZone(item.name)" class="h-5 w-5" />
+                  </div>
+                  <span class="uppercase">{{ item.name }}</span>
+                </div>
+              </div>
+              <div>
+                <NeTooltip v-if="item.logging" trigger-event="mouseenter focus">
+                  <template #trigger>
+                    <NeLink>
+                      <FontAwesomeIcon
+                        :icon="faList"
+                        class="h-4 w-4 text-indigo-800 dark:text-indigo-300"
+                      />
+                    </NeLink>
+                  </template>
+                  <template #content>
+                    <span> {{ t('standalone.zones_and_policies.logging_enabled') }} </span>
+                  </template>
+                </NeTooltip>
               </div>
-              <span class="uppercase">{{ item.name }}</span>
             </div>
           </NeTableCell>
           <NeTableCell :data-label="t('standalone.zones_and_policies.allow_forwards_to')">
@@ -171,24 +196,38 @@ function editZone(zone: Zone) {
                 -</template
               >
               <template v-else-if="getTrafficToWan(item, firewallConfig.forwardings)">
-                <FontAwesomeIcon :icon="['fas', 'arrow-right']" />
+                <FontAwesomeIcon :icon="faArrowRight" class="text-green-700 dark:text-green-500" />
                 <p>ACCEPT</p>
               </template>
               <template v-else>
-                <FontAwesomeIcon :icon="['fas', 'ban']" />
+                <FontAwesomeIcon :icon="faBan" class="text-rose-700 dark:text-rose-500" />
                 <p>REJECT</p>
               </template>
             </div>
           </NeTableCell>
           <NeTableCell :data-label="t('standalone.zones_and_policies.traffic_to_firewall')">
             <div class="flex items-center gap-x-2">
-              <FontAwesomeIcon :icon="['fas', trafficIcon(item.input)]" />
+              <FontAwesomeIcon
+                :icon="['fas', trafficIcon(item.input)]"
+                :class="[
+                  item.input === TrafficPolicy.ACCEPT
+                    ? 'text-green-700 dark:text-green-500'
+                    : 'text-rose-700 dark:text-rose-500'
+                ]"
+              />
               {{ item.input.toUpperCase() }}
             </div>
           </NeTableCell>
           <NeTableCell :data-label="t('standalone.zones_and_policies.traffic_to_same_zone')">
             <div class="flex items-center gap-x-2">
-              <FontAwesomeIcon :icon="['fas', trafficIcon(item.forward)]" />
+              <FontAwesomeIcon
+                :icon="['fas', trafficIcon(item.forward)]"
+                :class="[
+                  item.forward === TrafficPolicy.ACCEPT
+                    ? 'text-green-700 dark:text-green-500'
+                    : 'text-rose-700 dark:text-rose-500'
+                ]"
+              />
               {{ item.forward.toUpperCase() }}
             </div>
           </NeTableCell>
@@ -198,16 +237,6 @@ function editZone(zone: Zone) {
             </template>
             <template v-else>-</template>
           </NeTableCell>
-          <NeTableCell :data-label="t('standalone.zones_and_policies.logging')">
-            <div class="flex items-center gap-2">
-              <font-awesome-icon
-                :icon="['fas', item.logging ? 'circle-check' : 'circle-xmark']"
-                :class="['h-4 w-4', { 'text-green-600 dark:text-green-400': item.logging }]"
-                aria-hidden="true"
-              />
-              {{ item.logging ? t('common.enabled') : t('common.disabled') }}
-            </div>
-          </NeTableCell>
           <NeTableCell :data-label="t('common.actions')">
             <div class="-ml-2.5 flex 2xl:ml-0">
               <NeDropdown
diff --git a/src/views/standalone/monitoring/MetricsView.vue b/src/views/standalone/monitoring/MetricsView.vue
new file mode 100644
index 000000000..ffdc59895
--- /dev/null
+++ b/src/views/standalone/monitoring/MetricsView.vue
@@ -0,0 +1,104 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { NeCombobox, NeTabs, NeHeading } from '@nethesis/vue-components'
+import RefreshProgressBar from '@/components/standalone/monitoring/flows/RefreshProgressBar.vue'
+import MetricsChartsSection from '@/components/standalone/monitoring/metrics/MetricsChartsSection.vue'
+import MetricsAlertsSection from '@/components/standalone/monitoring/metrics/MetricsAlertsSection.vue'
+import { useTabs } from '@/composables/useTabs'
+import { useStorage } from '@vueuse/core'
+
+const { t } = useI18n()
+const { tabs, selectedTab } = useTabs([
+  {
+    name: 'charts',
+    label: t('standalone.metrics.tabs.charts')
+  },
+  {
+    name: 'alerts',
+    label: t('standalone.metrics.tabs.alerts')
+  }
+])
+
+type RefreshIntervalId = 'off' | '10s' | '30s' | '60s'
+type RefreshInterval = {
+  id: RefreshIntervalId
+  label: string
+  ms?: number | false
+}
+
+const REFRESH_INTERVALS: RefreshInterval[] = [
+  { id: 'off', label: t('standalone.flows.refresh_interval', { value: 'off' }), ms: false },
+  { id: '10s', label: t('standalone.flows.refresh_interval', { value: '10s' }), ms: 10000 },
+  { id: '30s', label: t('standalone.flows.refresh_interval', { value: '30s' }), ms: 30000 },
+  { id: '60s', label: t('standalone.flows.refresh_interval', { value: '60s' }), ms: 60000 }
+]
+
+const DEFAULT_REFRESH_INTERVAL = REFRESH_INTERVALS[1]!
+const selectedRefreshId = useStorage<RefreshIntervalId>(
+  'metrics_refresh_interval',
+  DEFAULT_REFRESH_INTERVAL.id
+)
+
+const interval = computed(() => {
+  return REFRESH_INTERVALS.find((item) => item.id == selectedRefreshId.value)?.ms ?? false
+})
+
+const updatedAt = ref<number>(0)
+
+// ── Data fetching ─────────────────────────────────────────────────────────────
+
+const pageDescription = computed(() =>
+  selectedTab.value === 'alerts'
+    ? t('standalone.metrics.alerts_description')
+    : t('standalone.metrics_monitor.description')
+)
+</script>
+
+<template>
+  <div class="space-y-8">
+    <!-- Heading -->
+    <NeHeading tag="h3" class="mb-7">{{ t('standalone.metrics.title') }}</NeHeading>
+
+    <NeTabs
+      :selected="selectedTab"
+      :sr-select-tab-label="t('ne_tabs.select_a_tab')"
+      :sr-tabs-label="t('ne_tabs.tabs')"
+      :tabs="tabs"
+      @select-tab="selectedTab = $event"
+    />
+
+    <!-- Controls -->
+    <div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+      <p class="max-w-xl text-sm text-gray-500 dark:text-gray-400">
+        {{ pageDescription }}
+      </p>
+      <div v-if="selectedTab === 'charts'" class="flex flex-col gap-2">
+        <NeCombobox
+          v-model="selectedRefreshId"
+          :options="REFRESH_INTERVALS"
+          :label="t('standalone.metrics.refresh_interval')"
+          :no-results-label="t('ne_combobox.no_results')"
+          :limited-options-label="t('ne_combobox.limited_options_label')"
+          :no-options-label="t('ne_combobox.no_options')"
+          :selected-label="t('ne_combobox.selected')"
+          :user-input-label="t('ne_combobox.user_input')"
+          :optional-label="t('common.optional')"
+        />
+        <RefreshProgressBar :data-updated-at="updatedAt" :interval="interval" />
+      </div>
+    </div>
+
+    <MetricsChartsSection
+      v-if="selectedTab === 'charts'"
+      :interval="interval"
+      @updated-at="updatedAt = $event"
+    />
+    <MetricsAlertsSection v-else />
+  </div>
+</template>
diff --git a/src/views/standalone/monitoring/PingLatencyMonitorView.vue b/src/views/standalone/monitoring/PingLatencyMonitorView.vue
index 00810df3f..0f42325d7 100644
--- a/src/views/standalone/monitoring/PingLatencyMonitorView.vue
+++ b/src/views/standalone/monitoring/PingLatencyMonitorView.vue
@@ -3,10 +3,10 @@
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 
-<script setup lang="ts">
-import { onMounted, ref } from 'vue'
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { ubusCall } from '@/lib/standalone/ubus'
+import { ubusCall, ValidationError } from '@/lib/standalone/ubus'
 import {
   NeInlineNotification,
   NeButton,
@@ -16,92 +16,58 @@ import {
 } from '@nethesis/vue-components'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import NeMultiTextInput from '@/components/standalone/NeMultiTextInput.vue'
-import { validateHost } from '@/lib/validation'
-import { AxiosError } from 'axios'
+import { MessageBag } from '@/lib/validation'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import { useUciPendingChangesStore } from '@/stores/standalone/uciPendingChanges'
+import { faFloppyDisk } from '@fortawesome/free-solid-svg-icons'
+
 const { t } = useI18n()
+const queryClient = useQueryClient()
+const uci = useUciPendingChangesStore()
 
-const formPing = ref({
-  hostList: ['']
-})
-const loading = ref(true)
-const saving = ref(false)
+const hosts = ref<string[]>([''])
+const validationBag = ref(new MessageBag())
 
-const errorConfiguration = ref({
-  notificationTitle: '',
-  notificationDescription: '',
-  notificationDetails: ''
-})
-const errorSaving = ref({
-  notificationTitle: '',
-  notificationDescription: '',
-  notificationDetails: ''
+const { data, isPending, isError, error } = useQuery({
+  queryKey: ['telegraf', 'config'],
+  queryFn: () => ubusCall('ns.telegraf', 'get-configuration', {}),
+  select: (res) => res.data
 })
-const errorForm = ref({
-  hostList: ['']
-})
-
-onMounted(() => {
-  getConfiguration()
-})
-
-async function getConfiguration() {
-  loading.value = true
-  try {
-    const res = await ubusCall('ns.netdata', 'get-configuration', {})
-    if (res?.data?.hosts) {
-      formPing.value.hostList = res.data.hosts
-    }
-  } catch (exception: any) {
-    errorConfiguration.value.notificationTitle = t('error.cannot_retrieve_netdata_configuration')
-    errorConfiguration.value.notificationDescription = t(getAxiosErrorMessage(exception))
-    errorConfiguration.value.notificationDetails = exception.toString()
-  } finally {
-    loading.value = false
-  }
-}
 
-function validate() {
-  let isValidationOk = true
-
-  for (const [index, item] of formPing.value.hostList.entries()) {
-    if (item) {
-      const { valid, errMessage } = validateHost(item)
-
-      if (!valid) {
-        errorForm.value.hostList[index] = t(errMessage as string)
-        isValidationOk = false
-      }
+watch(
+  data,
+  (newData) => {
+    if (newData?.hosts?.length) {
+      hosts.value = newData.hosts
     }
-  }
+  },
+  { immediate: true }
+)
 
-  return isValidationOk
-}
-
-function save() {
-  errorForm.value = {
-    hostList: ['']
-  }
-  if (validate()) {
-    saving.value = true
+const hostErrors = computed(() =>
+  hosts.value.map((_, i) => t(validationBag.value.getFirstI18nKeyFor(`hosts.${i}`)))
+)
 
-    const payload = {
-      hosts: formPing.value.hostList.filter((item) => item)
+const {
+  mutate,
+  status: mutateStatus,
+  error: mutateError,
+  isPending: isSaving
+} = useMutation({
+  mutationFn: () => ubusCall('ns.telegraf', 'set-hosts', { hosts: hosts.value.filter((h) => h) }),
+  onMutate: () => validationBag.value.clear(),
+  onSuccess: async () => {
+    await Promise.all([
+      uci.getChanges(),
+      queryClient.invalidateQueries({ queryKey: ['telegraf', 'config'] })
+    ])
+  },
+  onError: (e: Error) => {
+    if (e instanceof ValidationError) {
+      validationBag.value = e.errorBag
     }
-
-    ubusCall('ns.netdata', 'set-hosts', payload)
-      .then((response) => {
-        if (response?.data?.success && response.data.success) {
-          getConfiguration()
-        }
-      })
-      .catch((exception: AxiosError) => {
-        errorSaving.value.notificationTitle = t('error.cannot_save_configuration')
-        errorSaving.value.notificationDescription = t(getAxiosErrorMessage(exception))
-        errorSaving.value.notificationDetails = exception.toString()
-      })
-      .finally(() => (saving.value = false))
   }
-}
+})
 </script>
 
 <template>
@@ -112,54 +78,43 @@ function save() {
     <p class="mb-6 max-w-2xl text-sm font-normal text-gray-500 dark:text-gray-400">
       {{ t('standalone.ping_latency_monitor.description') }}
     </p>
-    <NeSkeleton v-if="loading" :lines="5" />
+    <NeSkeleton v-if="isPending" :lines="5" />
     <NeInlineNotification
-      v-if="!loading && errorConfiguration.notificationTitle"
+      v-else-if="isError"
       class="my-4"
       kind="error"
-      :title="errorConfiguration.notificationTitle"
-      :description="errorConfiguration.notificationDescription"
-    >
-      <template v-if="errorConfiguration.notificationDetails" #details>
-        {{ errorConfiguration.notificationDetails }}
-      </template>
-    </NeInlineNotification>
-    <template v-if="!loading && !errorConfiguration.notificationTitle">
-      <div class="max-w-md">
+      :title="t('error.cannot_retrieve_telegraf_configuration')"
+      :description="t(getAxiosErrorMessage(error))"
+    />
+    <template v-else>
+      <form class="max-w-md space-y-6" @submit.prevent="mutate()">
         <NeMultiTextInput
-          ref="hostListRef"
-          v-model="formPing.hostList"
+          v-model="hosts"
           :title="t('standalone.ping_latency_monitor.host_to_monitor')"
           :add-item-label="t('standalone.ping_latency_monitor.add_host')"
-          :invalid-messages="errorForm.hostList"
-          :disable-inputs="saving"
-          :disable-add-button="saving"
+          :invalid-messages="hostErrors"
+          :disable-inputs="isSaving"
+          :disable-add-button="isSaving"
           optional
           :optional-label="t('common.optional')"
         />
-        <div class="mt-6">
-          <hr />
-        </div>
         <NeInlineNotification
-          v-if="errorSaving.notificationTitle"
+          v-if="mutateStatus === 'error' && validationBag.size < 1"
           class="my-4"
           kind="error"
-          :title="errorSaving.notificationTitle"
-          :description="errorSaving.notificationDescription"
-        >
-          <template v-if="errorSaving.notificationDetails" #details>
-            {{ errorSaving.notificationDetails }}
-          </template>
-        </NeInlineNotification>
-        <div class="flex justify-end py-6">
-          <NeButton :disabled="saving" :kind="'primary'" :loading="saving" @click="save()">
+          :title="t('error.cannot_save_configuration')"
+          :description="t(getAxiosErrorMessage(mutateError))"
+        />
+        <hr />
+        <div class="flex justify-end">
+          <NeButton :disabled="isSaving" kind="primary" :loading="isSaving" type="submit">
             <template #prefix>
-              <FontAwesomeIcon :icon="['fas', 'floppy-disk']" class="h-4 w-4" aria-hidden="true" />
+              <FontAwesomeIcon :icon="faFloppyDisk" class="h-4 w-4" aria-hidden="true" />
             </template>
             {{ t('common.save') }}
           </NeButton>
         </div>
-      </div>
+      </form>
     </template>
   </div>
 </template>
diff --git a/src/views/standalone/monitoring/RealTimeMonitoringView.vue b/src/views/standalone/monitoring/RealTimeMonitoringView.vue
index 85208ba70..214cbffbe 100644
--- a/src/views/standalone/monitoring/RealTimeMonitoringView.vue
+++ b/src/views/standalone/monitoring/RealTimeMonitoringView.vue
@@ -17,7 +17,6 @@ import TrafficMonitor from '@/components/standalone/monitoring/TrafficMonitor.vu
 import ConnectivityMonitor from '@/components/standalone/monitoring/ConnectivityMonitor.vue'
 import VpnMonitor from '@/components/standalone/monitoring/VpnMonitor.vue'
 import SecurityMonitor from '@/components/standalone/monitoring/SecurityMonitor.vue'
-import { isStandaloneMode } from '@/lib/config'
 import { onMounted, ref } from 'vue'
 import { ubusCall } from '@/lib/standalone/ubus'
 import InstantTrafficMonitor from '@/components/standalone/monitoring/InstantTrafficMonitor.vue'
@@ -91,10 +90,6 @@ async function getControllerSettings() {
   }
 }
 
-function openNetdata() {
-  window.open('http://' + window.location.hostname + ':19999')
-}
-
 function openGrafana() {
   window.open(controllerUrl.value + '/grafana')
 }
@@ -106,27 +101,6 @@ function openGrafana() {
         {{ t('standalone.real_time_monitor.title') }}
       </NeHeading>
       <div class="flex gap-4">
-        <!-- link to netdata -->
-        <NeButton v-if="isStandaloneMode()" kind="tertiary" size="lg" @click="openNetdata()">
-          <template #prefix>
-            <FontAwesomeIcon :icon="['fa', 'arrow-up-right-from-square']" />
-          </template>
-          {{ t('standalone.real_time_monitor.open_report') }}
-        </NeButton>
-        <!-- cannot open netdata from a controlled unit -->
-        <NeTooltip v-else trigger-event="mouseenter focus" placement="bottom">
-          <template #trigger>
-            <NeButton kind="tertiary" size="lg" disabled>
-              <template #prefix>
-                <FontAwesomeIcon :icon="['fa', 'arrow-up-right-from-square']" />
-              </template>
-              {{ t('standalone.real_time_monitor.open_report') }}
-            </NeButton>
-          </template>
-          <template #content>
-            {{ t('standalone.real_time_monitor.cannot_open_report_from_controller') }}
-          </template>
-        </NeTooltip>
         <!-- link to grafana -->
         <NeButton
           v-if="isLinkedToController || loading.getControllerSettings"
diff --git a/src/views/standalone/system/UpdateView.vue b/src/views/standalone/system/UpdateView.vue
index 8e01191c0..7ed07c61a 100644
--- a/src/views/standalone/system/UpdateView.vue
+++ b/src/views/standalone/system/UpdateView.vue
@@ -4,13 +4,10 @@ import {
   NeButton,
   NeHeading,
   NeInlineNotification,
-  NeLink,
   NeModal,
   NeSkeleton,
-  NeToggle,
-  NeTooltip
+  NeToggle
 } from '@nethesis/vue-components'
-import { getStandaloneRoutePrefix } from '@/lib/router'
 import { useI18n } from 'vue-i18n'
 import FormLayout from '@/components/standalone/FormLayout.vue'
 import ScheduleUpdateDrawer from '@/components/standalone/update/ScheduleUpdateDrawer.vue'
@@ -21,7 +18,6 @@ import UpdatePackagesModal from '@/components/standalone/update/UpdatePackagesMo
 import SystemUpdateInProgressModal from '@/components/standalone/update/SystemUpdateInProgressModal.vue'
 import { getProductName } from '@/lib/config'
 import { useNotificationsStore } from '@/stores/notifications'
-import { useRouter } from 'vue-router'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 export type PackageUpdate = {
@@ -38,7 +34,6 @@ export type SystemUpdate = {
 
 const { t } = useI18n()
 const notificationsStore = useNotificationsStore()
-const router = useRouter()
 
 const loading = ref(true)
 const error = ref({
@@ -62,7 +57,6 @@ const isApplyingSystemUpdate = ref(false)
 const noPackageUpdatesAvailable = ref(false)
 
 const automaticUpdatesEnabled = ref(false)
-const isSubscriptionActive = ref(false)
 const isChangingAutomaticUpdatesSetting = ref(false)
 
 const showScheduleUpdateDrawer = ref(false)
@@ -93,10 +87,6 @@ async function fetchUpdatesStatus() {
       lastPackageUpdateCheck.value = new Date(lastPackageUpdateCheckResponse.lastCheck * 1000)
     }
 
-    const subscriptionResponse = await ubusCall('ns.subscription', 'info')
-    isSubscriptionActive.value =
-      subscriptionResponse.data.systemd_id != '' && subscriptionResponse.data.active
-
     automaticUpdatesEnabled.value = (
       await ubusCall('ns.update', 'get-automatic-updates-status')
     ).data.enabled
@@ -265,30 +255,11 @@ onMounted(() => {
       <div class="mt-6">
         <NeToggle
           v-model="automaticUpdatesEnabled"
-          :disabled="!isSubscriptionActive || isChangingAutomaticUpdatesSetting"
+          :disabled="isChangingAutomaticUpdatesSetting"
           :label="automaticUpdatesEnabled ? t('common.enabled') : t('common.disabled')"
           :top-label="t('standalone.update.automatic_updates')"
           @update:model-value="handleAutomaticUpdatesToggle"
-        >
-          <template #topTooltip>
-            <NeTooltip>
-              <template #content>
-                <p>
-                  {{ t('standalone.update.automatic_updates_tooltip') }}
-                </p>
-                <NeLink
-                  inverted-theme
-                  @click="
-                    () => {
-                      router.push(`${getStandaloneRoutePrefix()}/system/subscription`)
-                    }
-                  "
-                  >{{ t('standalone.update.go_to_subscription') }}</NeLink
-                >
-              </template>
-            </NeTooltip>
-          </template>
-        </NeToggle>
+        />
       </div>
     </template>
   </FormLayout>
diff --git a/src/views/standalone/users_objects/UsersDatabaseView.vue b/src/views/standalone/users_objects/UsersDatabaseView.vue
index dd4547543..def523519 100644
--- a/src/views/standalone/users_objects/UsersDatabaseView.vue
+++ b/src/views/standalone/users_objects/UsersDatabaseView.vue
@@ -7,8 +7,7 @@ import {
   NeSkeleton,
   NeInlineNotification,
   getAxiosErrorMessage,
-  NeTabs,
-  NeTooltip
+  NeTabs
 } from '@nethesis/vue-components'
 import { onMounted } from 'vue'
 import { ref } from 'vue'
@@ -31,10 +30,7 @@ const { t } = useI18n()
 const uciChangesStore = useUciPendingChangesStore()
 const notificationsStore = useNotificationsStore()
 
-const loading = ref({
-  listDatabases: true,
-  getSubscriptionInfo: true
-})
+const loadingDatabases = ref(true)
 const databases = ref<UserDatabase[]>([])
 const error = ref({
   listDatabases: '',
@@ -43,13 +39,12 @@ const error = ref({
   getSubscriptionInfoDetails: ''
 })
 const showCreateDrawer = ref(false)
-const activeSubscription = ref(false)
 
 const { tabs, selectedTab } = useTabs([])
 
 async function fetchDatabases(resetSelectedTab: boolean = false) {
   try {
-    loading.value.listDatabases = true
+    loadingDatabases.value = true
     if (resetSelectedTab) {
       selectedTab.value = ''
     }
@@ -65,7 +60,7 @@ async function fetchDatabases(resetSelectedTab: boolean = false) {
     error.value.listDatabases = t(getAxiosErrorMessage(err))
     error.value.listDatabasesDetails = err.toString()
   } finally {
-    loading.value.listDatabases = false
+    loadingDatabases.value = false
   }
 }
 
@@ -76,30 +71,14 @@ async function reloadDatabases(resetSelectedTab: boolean = false) {
 
 onMounted(() => {
   fetchDatabases()
-  fetchSubscriptionInfo()
 })
-
-async function fetchSubscriptionInfo() {
-  loading.value.getSubscriptionInfo = true
-
-  try {
-    const res = await ubusCall('ns.subscription', 'info')
-
-    activeSubscription.value = (res.data?.systemd_id && res.data?.active) || false
-  } catch (err: any) {
-    error.value.getSubscriptionInfo = t(getAxiosErrorMessage(err))
-    error.value.getSubscriptionInfoDetails = err.toString()
-  } finally {
-    loading.value.getSubscriptionInfo = false
-  }
-}
 </script>
 
 <template>
   <div class="mb-6 flex flex-row items-center justify-between">
     <NeHeading tag="h3">{{ t('standalone.users_database.title') }}</NeHeading>
-    <!-- add remote database button (subscription only) -->
-    <NeButton v-if="activeSubscription" kind="secondary" @click="showCreateDrawer = true"
+    <!-- add remote database button -->
+    <NeButton kind="secondary" @click="showCreateDrawer = true"
       ><template #prefix>
         <font-awesome-icon
           :icon="['fas', 'circle-plus']"
@@ -108,20 +87,6 @@ async function fetchSubscriptionInfo() {
         /> </template
       >{{ t('standalone.users_database.add_remote_database') }}</NeButton
     >
-    <!-- disabled add remote database button for community -->
-    <NeTooltip v-else trigger-event="mouseenter focus" placement="bottom">
-      <template #trigger>
-        <NeButton kind="secondary" disabled>
-          <template #prefix>
-            <font-awesome-icon :icon="['fas', 'circle-plus']" class="h-4 w-4" aria-hidden="true" />
-          </template>
-          {{ t('standalone.users_database.add_remote_database') }}
-        </NeButton>
-      </template>
-      <template #content>
-        {{ t('standalone.users_database.add_remote_database_tooltip') }}
-      </template>
-    </NeTooltip>
   </div>
   <!-- list databases error -->
   <NeInlineNotification
@@ -147,7 +112,7 @@ async function fetchSubscriptionInfo() {
       {{ error.listDatabasesDetails }}
     </template></NeInlineNotification
   >
-  <NeSkeleton v-if="loading.listDatabases || loading.getSubscriptionInfo" :lines="10" size="lg" />
+  <NeSkeleton v-if="loadingDatabases" :lines="10" size="lg" />
   <div v-else-if="!error.listDatabases && !error.getSubscriptionInfo">
     <NeTabs
       :selected="selectedTab"