diff --git a/public/i18n/en/translation.json b/public/i18n/en/translation.json
index afedcb5b3..f54d5c667 100644
--- a/public/i18n/en/translation.json
+++ b/public/i18n/en/translation.json
@@ -46,7 +46,11 @@
     "more_info": "More info",
     "data_updated_every_seconds": "Data updated every {seconds} seconds",
     "actions": "Actions",
-    "go_to_page": "Go to {page}"
+    "go_to_page": "Go to {page}",
+    "download": "Download",
+    "upload": "Upload",
+    "no_data_available": "No data available",
+    "type": "Type"
   },
   "error": {
     "generic_error": "Something went wrong",
@@ -200,6 +204,7 @@
     "cannot_delete_rule": "Cannot delete rule",
     "upload_file_migration": "Uploaded file is not a valid migration archive",
     "cannot_migrate": "Can't execute migration",
+    "cannot_retrieve_ovpn_tunnels": "Cannot retrieve OpenVPN tunnels",
     "cannot_retrieve_server_tunnels": "Cannot retrieve server tunnels",
     "cannot_retrieve_client_tunnels": "Cannot retrieve client tunnels",
     "cannot_duplicate_tunnel": "Cannot duplicate tunnel",
@@ -357,7 +362,15 @@
     "start_reserved": "First IP of network is reserved",
     "cannot_retrieve_object_suggestions": "Cannot retrieve object suggestions",
     "cannot_retrieve_nat_helpers": "Cannot retrieve NAT helpers",
-    "cannot_save_nat_helper": "Cannot save NAT helper"
+    "cannot_save_nat_helper": "Cannot save NAT helper",
+    "cannot_retrieve_mwan_report": "Cannot retrieve MultiWAN report",
+    "cannot_retrieve_malware_report": "Cannot retrieve malware report",
+    "cannot_retrieve_attack_report": "Cannot retrieve attack report",
+    "cannot_retrieve_ovpn_traffic_by_hour": "Cannot retrieve OpenVPN traffic by hour",
+    "cannot_retrieve_vpn_client_sessions": "Cannot retrieve VPN client sessions",
+    "cannot_retrieve_connected_client_by_hour": "Cannot retrieve connected clients by hour",
+    "cannot_retrieve_client_traffic_by_hour": "Cannot retrieve client traffic by hour",
+    "cannot_retrieve_talkers_list": "Cannot retrieve talkers list"
   },
   "ne_text_input": {
     "show_password": "Show password",
@@ -430,15 +443,6 @@
       "hotspot": "Hotspot",
       "thread_shield_ip": "Threat Shield IP",
       "known_hosts": "Known hosts",
-      "real_time_traffic": "Real time traffic",
-      "host": "Host",
-      "traffic": "Traffic",
-      "today_top_hosts": "Top hosts",
-      "today_top_applications": "Top applications",
-      "today_top_protocols": "Top protocols",
-      "today_top_hosts_description": "Hosts that generated most traffic today",
-      "today_top_applications_description": "Applications that generated most traffic today",
-      "today_top_protocols_description": "Protocols that generated most traffic today",
       "wan_traffic": "WAN traffic",
       "wan_interface": "WAN interface",
       "download": "Download",
@@ -448,9 +452,6 @@
       "root_usage": "Root",
       "storage_usage": "Data",
       "tmpfs_usage": "Tmpfs",
-      "no_hosts": "No hosts",
-      "no_applications": "No applications",
-      "no_protocols": "No protocols",
       "openvpn_rw": "OpenVPN RW",
       "usage_free_of_total": "{free} free of {total}",
       "default_hostname_warning": "Using the default hostname 'NethSec' is not recommended. Change it in {systemSettingsLink} and apply the change.",
@@ -1443,7 +1444,7 @@
       "blocklist_description": "Threat shield keeps you safe by blocking attacks from known malicious IP addresses. These addresses are compiled into blocklists, each with a clear name that tells you its purpose and who maintains it. The confidence score is a value from 1 to 10 that indicates the quality of the list. A higher number means a lower chance of false positives. This score is not available for 'Community' lists.",
       "blocklist_subscription_description": "Nethesis and Yoroi blocklists are available only if the unit has a valid subscription that includes Threat shield service.",
       "threat_shield_enabled": "Threat shield enabled",
-      "threat_shield_disabled": "Threat shield disabled",
+      "threat_shield_disabled": "Threat shield is disabled",
       "name": "Name",
       "type": "Type",
       "confidence": "Confidence",
@@ -1783,22 +1784,79 @@
       "search_error": "Invalid regular expression.",
       "search_tooltip": "The search uses regular expression format."
     },
-    "report": {
-      "title": "Report",
-      "tabs": {
-        "real_time_report": "Real time report",
-        "ping_latency_monitor": "Ping latency monitor"
-      },
-      "real_time_report": {
-        "description": "The monitoring tool offers in-depth analysis of system and application performance, presenting detailed metrics and visualizations. These metrics are stored in RAM and reset upon machine reboot, except when the unit is linked to a remote controller. In such cases, metrics are saved in the controller and persist through reboots.",
-        "open_report": "Open report",
-        "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'."
-      },
-      "ping_latency_monitor": {
-        "description": "Set up the monitoring tool to assess round-trip time and packet loss by sending ping messages to network hosts. This tool is used for monitoring network connectivity quality. You can add one or more hosts to monitor. It's also possible to add IP addresses in a VPN to assess tunnel quality.",
-        "add_host": "Add host",
-        "host_to_monitor": "Hosts to monitor"
-      }
+    "monitoring": {
+      "title": "Monitoring"
+    },
+    "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",
+      "connectivity": "Connectivity",
+      "vpn": "VPN",
+      "security": "Security",
+      "today_top_local_hosts": "Local hosts",
+      "no_hosts": "No hosts",
+      "today_top_applications": "Applications",
+      "today_top_remote_hosts": "Remote hosts",
+      "no_applications": "No applications",
+      "today_top_protocols": "Protocols",
+      "no_protocols": "No protocols",
+      "today_total_traffic": "Today total traffic",
+      "instant_traffic": "Instant traffic",
+      "today_traffic": "Today traffic",
+      "recent_traffic": "Recent traffic",
+      "host": "Host",
+      "hosts": "Hosts",
+      "application": "Application",
+      "applications": "Applications",
+      "protocol": "Protocol",
+      "protocols": "Protocols",
+      "connections": "Connections",
+      "wan_events": "WAN events",
+      "wan_name_events": "{name} events",
+      "interface_name_traffic": "{name} traffic",
+      "blocked_threats": "Blocked threats",
+      "blocked_packets_by_hour": "Blocked packets by hour",
+      "malware_by_direction": "Malware by direction",
+      "malware_by_category": "Malware by category",
+      "most_blocked_ip_addresses": "Most blocked IP addresses",
+      "blocked_ip_addresses_by_hour": "Blocked IP addresses by hour",
+      "times_blocked": "Times blocked",
+      "blocked_ip_addresses": "Blocked IP addresses",
+      "timestamp": "Timestamp",
+      "event": "Event",
+      "remote_access_vpn": "Remote access VPN",
+      "site_to_site_vpn": "Site-to-Site VPN",
+      "connected_clients": "Connected clients",
+      "total_clients_traffic_by_hour": "Total clients traffic by hour",
+      "client_sessions": "Client sessions",
+      "account": "Account",
+      "connected_since": "Connected since",
+      "no_sessions": "No sessions",
+      "connected_clients_by_hour": "Connected clients by hour",
+      "client_traffic_by_hour": "Client traffic by hour",
+      "connected_tunnels": "Connected tunnels",
+      "configured_tunnels": "Configured tunnels",
+      "tunnel_ovpn_client": "OpenVPN client tunnel",
+      "tunnel_ovpn_server": "OpenVPN server tunnel",
+      "tunnel_ipsec": "IPsec tunnel",
+      "device": "Device",
+      "interface": "Interface",
+      "threat_shield_disabled_message": "No statistics are available because Threat shield is disabled.",
+      "online": "Online",
+      "offline": "Offline",
+      "no_events_message": "No events, all good",
+      "view_all_on_grafana": "View all on Grafana",
+      "no_vpn_network_configured": "No VPN network configured"
+    },
+    "ping_latency_monitor": {
+      "title": "Ping latency monitor",
+      "description": "Set up the monitoring tool to assess round-trip time and packet loss by sending ping messages to network hosts. This tool is used for monitoring network connectivity quality. You can add one or more hosts to monitor. It's also possible to add IP addresses in a VPN to assess tunnel quality.",
+      "add_host": "Add host",
+      "host_to_monitor": "Hosts to monitor"
     },
     "account_management": {
       "title": "Account settings for '{name}'",
diff --git a/src/components/charts/BasicBarChart.vue b/src/components/charts/BasicBarChart.vue
new file mode 100644
index 000000000..422449acc
--- /dev/null
+++ b/src/components/charts/BasicBarChart.vue
@@ -0,0 +1,103 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale
+} from 'chart.js'
+import { Bar } from 'vue-chartjs'
+import { computed } from 'vue'
+import { useThemeStore } from '@/stores/theme'
+import { GRAY_200, GRAY_700, GRAY_800 } from '@/lib/color'
+
+const themeStore = useThemeStore()
+
+const props = withDefaults(
+  defineProps<{
+    labels: string[]
+    datasets: any[]
+    height?: string
+    isHorizontal?: boolean
+    showLegend?: boolean
+    showValuesOnBars?: boolean
+  }>(),
+  { isHorizontal: false, showLegend: false, showValuesOnBars: true }
+)
+
+const options: any = {
+  indexAxis: props.isHorizontal ? 'y' : 'x',
+  scales: {
+    x: {
+      ticks: {
+        color: themeStore.isLight ? GRAY_700 : GRAY_200
+      },
+      grid: {
+        color: themeStore.isLight ? GRAY_200 : GRAY_800
+      }
+    },
+    y: {
+      ticks: {
+        color: themeStore.isLight ? GRAY_700 : GRAY_200
+      },
+      grid: {
+        color: themeStore.isLight ? GRAY_200 : GRAY_800
+      }
+    }
+  },
+  plugins: {
+    legend: {
+      display: props.showLegend
+    }
+  },
+  animation:
+    props.showValuesOnBars && props.isHorizontal
+      ? {
+          duration: 1,
+          onComplete: function ({ chart }: any) {
+            const ctx = chart.ctx
+
+            chart.config.data.datasets.forEach(function (dataset: any, i: number) {
+              const meta = chart.getDatasetMeta(i)
+
+              meta.data.forEach(function (bar: any, index: number) {
+                const data = dataset.data[index]
+
+                if (data) {
+                  ctx.fillStyle = themeStore.isLight ? GRAY_700 : GRAY_200
+                  ctx.fillText(Number(data).toLocaleString(), bar.x + 5, bar.y + 5)
+                }
+              })
+            })
+          }
+        }
+      : {}
+}
+
+const chartData: any = computed(() => {
+  return { labels: props.labels, datasets: props.datasets }
+})
+
+const chartStyle = computed(() => {
+  return {
+    height: props.height || '',
+    width: '100%',
+    position: 'relative'
+  }
+})
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
+</script>
+
+<template>
+  <div>
+    <Bar :data="chartData" :options="options" :style="chartStyle" />
+  </div>
+</template>
diff --git a/src/components/charts/BasicPieChart.vue b/src/components/charts/BasicPieChart.vue
new file mode 100644
index 000000000..8d54ce136
--- /dev/null
+++ b/src/components/charts/BasicPieChart.vue
@@ -0,0 +1,85 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import 'chartjs-adapter-date-fns'
+import { computed } from 'vue'
+import { useThemeStore } from '@/stores/theme'
+import { GRAY_200, GRAY_700 } from '@/lib/color'
+import { Pie } from 'vue-chartjs'
+import { Chart as ChartJS, registerables } from 'chart.js'
+
+const themeStore = useThemeStore()
+
+const props = defineProps<{
+  labels: string[]
+  datasets: any[]
+  height?: string
+}>()
+
+const options: any = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      position: 'right',
+      labels: {
+        // show dataset value and sort by pie slice
+        generateLabels: function (chart: any) {
+          const data = chart.data
+          if (data.labels.length && data.datasets.length) {
+            // Create an array of label-value pairs
+            const labelValuePairs = data.labels.map((label: string, i: number) => {
+              const value = data.datasets[0].data[i]
+              return { label, value, index: i }
+            })
+
+            // Sort the array by value in descending order
+            labelValuePairs.sort((a: any, b: any) => b.value - a.value)
+
+            // Return the sorted labels
+            return labelValuePairs.map(
+              ({ label, value, index }: { label: string; value: number; index: number }) => {
+                const meta = chart.getDatasetMeta(0)
+                const ds = data.datasets[0]
+                const arc = meta.data[index]
+                const custom = (arc && arc.custom) || {}
+                return {
+                  text: `${label}: ${value?.toLocaleString()}`,
+                  fontColor: themeStore.isLight ? GRAY_700 : GRAY_200,
+                  fillStyle: custom.backgroundColor || ds.backgroundColor[index],
+                  hidden: isNaN(ds.data[index]) || meta.data[index].hidden,
+                  index: index
+                }
+              }
+            )
+          }
+          return []
+        }
+      }
+    }
+  }
+}
+
+const chartData: any = computed(() => {
+  return { labels: props.labels, datasets: props.datasets }
+})
+
+const chartStyle = computed(() => {
+  return {
+    height: props.height || '',
+    width: '100%',
+    position: 'relative'
+  }
+})
+
+ChartJS.register(...registerables)
+</script>
+
+<template>
+  <div>
+    <Pie :data="chartData" :options="options" :style="chartStyle" />
+  </div>
+</template>
diff --git a/src/components/charts/SimpleStat.vue b/src/components/charts/SimpleStat.vue
new file mode 100644
index 000000000..7666b72aa
--- /dev/null
+++ b/src/components/charts/SimpleStat.vue
@@ -0,0 +1,12 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<template>
+  <div
+    class="inline-block w-full text-center text-2xl font-medium text-indigo-700 dark:text-indigo-500 2xl:text-3xl"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/standalone/SideMenu.vue b/src/components/standalone/SideMenu.vue
index c3fc9662d..f3bdf9d46 100644
--- a/src/components/standalone/SideMenu.vue
+++ b/src/components/standalone/SideMenu.vue
@@ -29,7 +29,8 @@ const menuExpanded: any = ref({
   'users-objects': false,
   firewall: false,
   security: false,
-  vpn: false
+  vpn: false,
+  monitoring: false
 })
 
 const navigation: Ref<MenuItem[]> = ref([
@@ -191,8 +192,22 @@ const navigation: Ref<MenuItem[]> = ref([
       }
     ]
   },
-  { name: t('standalone.logs.title'), to: 'logs', icon: 'list' },
-  { name: t('standalone.report.title'), to: 'report', icon: 'chart-line' }
+  {
+    name: t('standalone.monitoring.title'),
+    to: 'monitoring',
+    icon: 'chart-line',
+    children: [
+      {
+        name: t('standalone.real_time_monitor.title'),
+        to: 'monitoring/real-time-monitoring'
+      },
+      {
+        name: t('standalone.ping_latency_monitor.title'),
+        to: 'monitoring/ping-latency-monitor'
+      }
+    ]
+  },
+  { name: t('standalone.logs.title'), to: 'logs', icon: 'list' }
 ])
 
 onMounted(() => {
diff --git a/src/components/standalone/dashboard/RealTimeTrafficCard.vue b/src/components/standalone/dashboard/RealTimeTrafficCard.vue
deleted file mode 100644
index 9e57be0e8..000000000
--- a/src/components/standalone/dashboard/RealTimeTrafficCard.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<!--
-  Copyright (C) 2024 Nethesis S.r.l.
-  SPDX-License-Identifier: GPL-3.0-or-later
--->
-
-<script setup lang="ts">
-import { ubusCall } from '@/lib/standalone/ubus'
-import { NeCard } from '@nethesis/vue-components'
-import { getAxiosErrorMessage, kbpsFormat } from '@nethesis/vue-components'
-import { onMounted, onUnmounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import NeTable from '@/components/standalone/NeTable.vue'
-
-const { t } = useI18n()
-
-// random refresh interval between 20 and 30 seconds
-const REFRESH_INTERVAL = 20000 + Math.random() * 10 * 1000
-const NUM_HOSTS = 5
-const topTalkersIntervalId = ref(0)
-const topTalkers = ref([])
-
-const tableHeaders = [
-  {
-    label: t('standalone.dashboard.host'),
-    key: 'host'
-  },
-  {
-    label: t('standalone.dashboard.traffic'),
-    key: 'traffic'
-  }
-]
-
-let loading = ref({
-  getTopTalkers: true
-})
-
-let error = ref({
-  title: '',
-  description: ''
-})
-
-onMounted(() => {
-  getTopTalkers()
-
-  // periodically reload top talkers
-  topTalkersIntervalId.value = setInterval(getTopTalkers, REFRESH_INTERVAL)
-})
-
-onUnmounted(() => {
-  if (topTalkersIntervalId.value) {
-    clearInterval(topTalkersIntervalId.value)
-  }
-})
-
-function formatTraffic(value: number) {
-  return kbpsFormat((value / 1000) * 8)
-}
-
-async function getTopTalkers() {
-  error.value.title = ''
-  error.value.description = ''
-
-  try {
-    const res = await ubusCall('ns.talkers', 'list', {
-      limit: NUM_HOSTS
-    })
-    topTalkers.value = res.data.talkers.map((row: any) => {
-      return { host: row.host, traffic: formatTraffic(row.totals.bandwidth) }
-    })
-  } catch (err: any) {
-    console.error(err)
-    error.value.title = t('error.cannot_retrieve_realtime_traffic')
-    error.value.description = t(getAxiosErrorMessage(err))
-  } finally {
-    loading.value.getTopTalkers = false
-  }
-}
-</script>
-
-<template>
-  <NeCard
-    :title="t('standalone.dashboard.real_time_traffic')"
-    :skeletonLines="5"
-    :loading="loading.getTopTalkers"
-    :errorTitle="error.title"
-    :errorDescription="error.description"
-  >
-    <div class="mt-3">
-      <NeTable
-        :data="topTalkers"
-        :headers="tableHeaders"
-        :loading="loading.getTopTalkers"
-        :skeletonLines="5"
-        ghost
-        condensed
-      />
-    </div>
-  </NeCard>
-</template>
diff --git a/src/components/standalone/dashboard/SystemInfoCard.vue b/src/components/standalone/dashboard/SystemInfoCard.vue
index 957ad7cde..ff8ab9523 100644
--- a/src/components/standalone/dashboard/SystemInfoCard.vue
+++ b/src/components/standalone/dashboard/SystemInfoCard.vue
@@ -169,7 +169,7 @@ async function getUpdatesStatus() {
       <div>{{ systemInfo?.hardware || '-' }}</div>
     </div>
     <div class="divide-y divide-gray-300 dark:divide-gray-600">
-      <div class="py-2">
+      <div class="py-3">
         <span class="mr-3 font-semibold">{{ t('standalone.dashboard.hostname') }}</span>
         <div class="inline-flex items-center gap-1">
           <span>{{ systemInfo?.hostname || '-' }}</span>
@@ -198,7 +198,7 @@ async function getUpdatesStatus() {
           </NeTooltip>
         </div>
       </div>
-      <div class="py-2">
+      <div class="py-3">
         <span class="mr-3 font-semibold">{{ t('standalone.dashboard.operating_system') }}</span>
         <div class="inline-flex items-center gap-2">
           <span>{{ systemInfo?.version?.release || '-' }}</span>
@@ -208,11 +208,11 @@ async function getUpdatesStatus() {
           </NeLink>
         </div>
       </div>
-      <div class="py-2">
+      <div class="py-3">
         <span class="mr-3 font-semibold">{{ t('standalone.dashboard.uptime') }}</span>
         <span>{{ systemInfo?.uptime ? formatDurationLoc(systemInfo.uptime) : '-' }}</span>
       </div>
-      <div class="py-2">
+      <div class="py-3">
         <span class="mr-3 font-semibold">{{ t('standalone.dashboard.load_minutes') }}</span>
         <span>{{
           systemInfo?.load
@@ -223,7 +223,7 @@ async function getUpdatesStatus() {
         }}</span>
       </div>
       <!-- memory and storage usage -->
-      <div class="space-y-3 py-2">
+      <div class="space-y-4 pt-4">
         <div>
           <span class="mr-3 font-semibold">{{ t('standalone.dashboard.memory_usage') }}</span>
           <span>{{
diff --git a/src/components/standalone/dashboard/WanTrafficCard.vue b/src/components/standalone/dashboard/WanTrafficCard.vue
deleted file mode 100644
index 222e9e770..000000000
--- a/src/components/standalone/dashboard/WanTrafficCard.vue
+++ /dev/null
@@ -1,182 +0,0 @@
-<!--
-  Copyright (C) 2024 Nethesis S.r.l.
-  SPDX-License-Identifier: GPL-3.0-or-later
--->
-
-<script setup lang="ts">
-import WanTrafficChart from '@/components/standalone/dashboard/WanTrafficChart.vue'
-import { CYAN_500, CYAN_600, INDIGO_400, INDIGO_600 } from '@/lib/color'
-import { ubusCall } from '@/lib/standalone/ubus'
-import { useLoginStore } from '@/stores/standalone/standaloneLogin'
-import { useThemeStore } from '@/stores/theme'
-import {
-  NeCombobox,
-  NeCard,
-  NeSkeleton,
-  getAxiosErrorMessage,
-  getPreference,
-  savePreference
-} from '@nethesis/vue-components'
-import { isEmpty } from 'lodash-es'
-import { onMounted, onUnmounted, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-const loginStore = useLoginStore()
-const themeStore = useThemeStore()
-
-// random refresh interval between 20 and 30 seconds
-const REFRESH_INTERVAL = 20000 + Math.random() * 10 * 1000
-const chartLabels = ref<any[]>([])
-const chartDatasets = ref<any[]>([])
-const intervalId = ref(0)
-const wanOptions = ref<any[]>([])
-const selectedDevice = ref<any>(null)
-
-let loading = ref({
-  listWans: false,
-  getInterfaceTraffic: false
-})
-
-let error = ref({
-  title: '',
-  description: ''
-})
-
-watch(selectedDevice, () => {
-  if (selectedDevice.value) {
-    loading.value.getInterfaceTraffic = true
-    getInterfaceTraffic()
-
-    // save preferred wan
-    savePreference('dashboardWan', selectedDevice.value, loginStore.username)
-  }
-})
-
-onMounted(() => {
-  getWanList()
-})
-
-onUnmounted(() => {
-  if (intervalId.value) {
-    clearInterval(intervalId.value)
-  }
-})
-
-async function getWanList() {
-  loading.value.listWans = true
-  error.value.title = ''
-  error.value.description = ''
-
-  try {
-    const res = await ubusCall('ns.dashboard', 'list-wans')
-
-    wanOptions.value = res.data.result.map((wan: any) => {
-      return {
-        id: wan.device,
-        label: `${wan.iface} (${wan.device})`
-      }
-    })
-    setSelectedDevice()
-
-    // periodically reload data
-    intervalId.value = setInterval(getInterfaceTraffic, REFRESH_INTERVAL)
-  } catch (err: any) {
-    console.error(err)
-    error.value.title = t('error.cannot_retrieve_wan_list')
-    error.value.description = t(getAxiosErrorMessage(err))
-  } finally {
-    loading.value.listWans = false
-  }
-}
-
-function setSelectedDevice() {
-  if (isEmpty(wanOptions.value)) {
-    return
-  }
-
-  // select the first wan device
-  let defaultWanDevice = wanOptions.value[0].id
-
-  // get preferred wan from preferences
-  const username = loginStore.username || 'root'
-  const preferredWan = getPreference('dashboardWan', username)
-  if (preferredWan) {
-    defaultWanDevice = preferredWan
-  }
-  selectedDevice.value = defaultWanDevice
-}
-
-async function getInterfaceTraffic() {
-  // show skeleton only the first time
-  if (!intervalId.value) {
-    loading.value.getInterfaceTraffic = true
-  }
-  error.value.title = ''
-  error.value.description = ''
-
-  try {
-    const res = await ubusCall('ns.dashboard', 'interface-traffic', {
-      interface: selectedDevice.value
-    })
-
-    chartLabels.value = res.data.result.labels.map((timestamp: any) => timestamp * 1000)
-
-    const downloadData = res.data.result.data.map((values: any) => values[0])
-    const uploadData = res.data.result.data.map((values: any) => values[1])
-
-    chartDatasets.value = [
-      {
-        label: t('standalone.dashboard.download'),
-        borderColor: themeStore.isLight ? CYAN_600 : CYAN_500,
-        backgroundColor: themeStore.isLight ? CYAN_600 : CYAN_500,
-        data: downloadData,
-        borderWidth: 1,
-        radius: 0
-      },
-      {
-        label: t('standalone.dashboard.upload'),
-        borderColor: themeStore.isLight ? INDIGO_600 : INDIGO_400,
-        backgroundColor: themeStore.isLight ? INDIGO_600 : INDIGO_400,
-        data: uploadData,
-        borderWidth: 1,
-        radius: 0
-      }
-    ]
-  } catch (err: any) {
-    console.error(err)
-    error.value.title = t('error.cannot_retrieve_wan_traffic')
-    error.value.description = t(getAxiosErrorMessage(err))
-  } finally {
-    loading.value.getInterfaceTraffic = false
-  }
-}
-</script>
-
-<template>
-  <NeCard
-    :title="t('standalone.dashboard.wan_traffic')"
-    :description="isEmpty(wanOptions) ? t('standalone.dashboard.no_wan_interfaces') : ''"
-    :skeletonLines="8"
-    :loading="loading.listWans"
-    :errorTitle="error.title"
-    :errorDescription="error.description"
-  >
-    <template v-if="wanOptions.length">
-      <NeCombobox
-        v-model="selectedDevice"
-        :options="wanOptions"
-        :disabled="loading.listWans || loading.getInterfaceTraffic"
-        :noResultsLabel="t('ne_combobox.no_results')"
-        :limitedOptionsLabel="t('ne_combobox.limited_options_label')"
-        :noOptionsLabel="t('ne_combobox.no_options_label')"
-        :selected-label="t('ne_combobox.selected')"
-        :user-input-label="t('ne_combobox.user_input_label')"
-        :optionalLabel="t('common.optional')"
-        class="mb-4"
-      />
-      <NeSkeleton v-if="loading.getInterfaceTraffic" :lines="6"></NeSkeleton>
-      <WanTrafficChart v-else :labels="chartLabels" :datasets="chartDatasets" />
-    </template>
-  </NeCard>
-</template>
diff --git a/src/components/standalone/monitoring/ConnectivityMonitor.vue b/src/components/standalone/monitoring/ConnectivityMonitor.vue
new file mode 100644
index 000000000..2ede431c9
--- /dev/null
+++ b/src/components/standalone/monitoring/ConnectivityMonitor.vue
@@ -0,0 +1,244 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { ubusCall } from '@/lib/standalone/ubus'
+import {
+  getAxiosErrorMessage,
+  NeCard,
+  NeEmptyState,
+  NeInlineNotification,
+  sortByProperty
+} from '@nethesis/vue-components'
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import WanEventsCard from './connectivity/WanEventsCard.vue'
+import InterfaceTrafficCard from './connectivity/InterfaceTrafficCard.vue'
+import { isEmpty } from 'lodash-es'
+import type { Policy } from '@/composables/useMwan'
+import WanConnectionsCard from './connectivity/WanConnectionsCard.vue'
+
+export type Wan = {
+  iface: string
+  device: string
+  status?: string
+}
+
+export type WanEvent = {
+  time: number
+  status: number
+}
+
+const { t } = useI18n()
+
+const wans = ref<Wan[]>([])
+const mwanEvents = ref<Record<string, any[]>>({})
+const mwanPolicies = ref<Policy[]>([])
+let loading = ref({
+  listWans: false,
+  getMwanReport: false,
+  getMwanPolicies: false
+})
+
+let error = ref({
+  listWans: '',
+  listWansDetails: '',
+  getMwanReport: '',
+  getMwanReportDetails: '',
+  getMwanPolicies: '',
+  getMwanPoliciesDetails: ''
+})
+
+const wanConnections = computed(() => {
+  const wanData = []
+
+  for (const wan of wans.value) {
+    // get wan status from policy data
+    let statusFound = false
+
+    for (const policy of mwanPolicies.value) {
+      if (statusFound) {
+        break
+      }
+
+      for (const policyMembers of Object.values(policy.members)) {
+        if (statusFound) {
+          break
+        }
+
+        for (const policyMember of policyMembers) {
+          if (policyMember.interface == wan.iface) {
+            wanData.push({
+              ...wan,
+              status: policyMember.status
+            })
+            statusFound = true
+            break
+          }
+        }
+      }
+    }
+  }
+  return wanData
+})
+
+onMounted(() => {
+  listWans()
+  getMwanReport()
+  getMwanPolicies()
+})
+
+async function listWans() {
+  loading.value.listWans = true
+  error.value.listWans = ''
+  error.value.listWansDetails = ''
+
+  try {
+    const res = await ubusCall('ns.dashboard', 'list-wans')
+    wans.value = res.data.result
+  } catch (err: any) {
+    console.error(err)
+    error.value.listWans = t(getAxiosErrorMessage(err))
+    error.value.listWansDetails = err.toString()
+  } finally {
+    loading.value.listWans = false
+  }
+}
+
+async function getMwanReport() {
+  loading.value.getMwanReport = true
+  error.value.getMwanReport = ''
+  error.value.getMwanReportDetails = ''
+
+  try {
+    const res = await ubusCall('ns.report', 'mwan-report')
+    mwanEvents.value = {}
+
+    for (const [wanName, eventsList] of Object.entries(res.data.events_by_wan) as [
+      string,
+      any[]
+    ][]) {
+      let events = eventsList.map((event: number[]) => {
+        return {
+          time: event[0],
+          status: event[1]
+        }
+      })
+      mwanEvents.value[wanName] = events.sort(sortByProperty('time')).reverse()
+    }
+  } catch (err: any) {
+    console.error(err)
+    error.value.getMwanReport = t(getAxiosErrorMessage(err))
+    error.value.getMwanReportDetails = err.toString()
+  } finally {
+    loading.value.getMwanReport = false
+  }
+}
+
+async function getMwanPolicies() {
+  loading.value.getMwanPolicies = true
+  error.value.getMwanPolicies = ''
+  error.value.getMwanPoliciesDetails = ''
+
+  try {
+    const res = await ubusCall('ns.mwan', 'index_policies')
+    mwanPolicies.value = res.data.values
+  } catch (err: any) {
+    console.error(err)
+    error.value.getMwanPolicies = t(getAxiosErrorMessage(err))
+    error.value.getMwanPoliciesDetails = err.toString()
+  } finally {
+    loading.value.getMwanPolicies = false
+  }
+}
+</script>
+
+<template>
+  <div>
+    <!-- listWans error notification -->
+    <NeInlineNotification
+      v-if="error.listWans"
+      kind="error"
+      :title="t('error.cannot_retrieve_wan_list')"
+      :description="error.listWans"
+      :closeAriaLabel="t('common.close')"
+      class="mb-4"
+    >
+      <template v-if="error.listWansDetails" #details>
+        {{ error.listWansDetails }}
+      </template>
+    </NeInlineNotification>
+    <!-- getMwanReport error notification -->
+    <NeInlineNotification
+      v-if="error.getMwanReport"
+      kind="error"
+      :title="t('error.cannot_retrieve_mwan_report')"
+      :description="error.getMwanReport"
+      :closeAriaLabel="t('common.close')"
+      class="mb-4"
+    >
+      <template v-if="error.getMwanReportDetails" #details>
+        {{ error.getMwanReportDetails }}
+      </template>
+    </NeInlineNotification>
+    <!-- getMwanPolicies error notification -->
+    <NeInlineNotification
+      v-if="error.getMwanPolicies"
+      kind="error"
+      :title="t('error.cannot_retrieve_wan_list')"
+      :description="error.getMwanPolicies"
+      :closeAriaLabel="t('common.close')"
+      class="mb-4"
+    >
+      <template v-if="error.getMwanPoliciesDetails" #details>
+        {{ error.getMwanPoliciesDetails }}
+      </template>
+    </NeInlineNotification>
+    <div class="grid grid-cols-1 gap-x-6 gap-y-6 xl:grid-cols-2">
+      <!-- skeleton -->
+      <template v-if="loading.listWans || loading.getMwanReport || loading.getMwanPolicies">
+        <NeCard
+          v-for="index in 4"
+          :key="index"
+          loading
+          :skeletonLines="5"
+          class="col-span-1"
+        ></NeCard>
+      </template>
+      <template v-else>
+        <!-- connections -->
+        <WanConnectionsCard v-if="wanConnections.length" :wanConnections="wanConnections" />
+        <!-- wan events -->
+        <NeCard
+          v-if="isEmpty(mwanEvents)"
+          :title="t('standalone.real_time_monitor.wan_events')"
+          class="col-span-1"
+        >
+          <NeEmptyState
+            :title="t('standalone.real_time_monitor.no_events_message')"
+            :icon="['fas', 'network-wired']"
+            class="bg-white dark:bg-gray-950"
+          />
+        </NeCard>
+        <WanEventsCard
+          v-else
+          v-for="(events, wanName) in mwanEvents"
+          :key="wanName"
+          :wan="wanName"
+          :wanEvents="events"
+          class="col-span-1"
+        />
+        <!-- wans traffic -->
+        <InterfaceTrafficCard
+          v-for="wan in wans"
+          :key="wan.device"
+          :iface="wan.iface"
+          :device="wan.device"
+          class="col-span-1"
+        />
+      </template>
+    </div>
+  </div>
+</template>
diff --git a/src/components/standalone/monitoring/SecurityMonitor.vue b/src/components/standalone/monitoring/SecurityMonitor.vue
new file mode 100644
index 000000000..57d9380d9
--- /dev/null
+++ b/src/components/standalone/monitoring/SecurityMonitor.vue
@@ -0,0 +1,472 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { ubusCall } from '@/lib/standalone/ubus'
+import {
+  getAxiosErrorMessage,
+  NeButton,
+  NeCard,
+  NeEmptyState,
+  NeInlineNotification
+} from '@nethesis/vue-components'
+import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import SimpleStat from '../../charts/SimpleStat.vue'
+import BlockedPacketsByHourChart from './security/BlockedPacketsByHourChart.vue'
+import { useThemeStore } from '@/stores/theme'
+import {
+  AMBER_500,
+  AMBER_600,
+  CYAN_300,
+  CYAN_500,
+  CYAN_600,
+  CYAN_800,
+  EMERALD_500,
+  EMERALD_600,
+  FUCHSIA_500,
+  FUCHSIA_600,
+  GRAY_400,
+  GRAY_50,
+  GRAY_500,
+  GRAY_900,
+  INDIGO_500,
+  INDIGO_600,
+  LIME_500,
+  LIME_600,
+  ROSE_500,
+  ROSE_600,
+  VIOLET_500,
+  VIOLET_600
+} from '@/lib/color'
+import BasicPieChart from '../../charts/BasicPieChart.vue'
+import BasicBarChart from '../../charts/BasicBarChart.vue'
+import BlockedIpsByHourChart from './security/BlockedIpsByHourChart.vue'
+import { useRouter } from 'vue-router'
+import { getStandaloneRoutePrefix } from '@/lib/router'
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+const router = useRouter()
+
+const CHART_NUM_ITEMS = 10
+const isThreatShieldEnabled = ref(false)
+const malwareCount = ref<number>(0)
+const attackCount = ref<number>(0)
+const blockedPacketsChartLabels = ref<number[]>([])
+const blockedPacketsChartDatasets = ref<any[]>([])
+const malwareByDirectionChartLabels = ref<string[]>([])
+const malwareByDirectionChartDatasets = ref<any[]>([])
+const malwareByCategoryChartLabels = ref<string[]>([])
+const malwareByCategoryChartDatasets = ref<any[]>([])
+const mostBlockedIpsChartLabels = ref<string[]>([])
+const mostBlockedIpsChartDatasets = ref<any[]>([])
+const blockedIpsByHourChartLabels = ref<string[]>([])
+const blockedIpsByHourChartDatasets = ref<any[]>([])
+
+let loading = ref({
+  getMalwareReport: false,
+  getAttackReport: false,
+  getThreatShieldSettings: false
+})
+
+let error = ref({
+  getMalwareReport: '',
+  getMalwareReportDetails: '',
+  getAttackReport: '',
+  getAttackReportDetails: '',
+  getThreatShieldSettings: '',
+  getThreatShieldSettingsDetails: ''
+})
+
+onMounted(() => {
+  getThreatShieldSettings()
+})
+
+async function getThreatShieldSettings() {
+  loading.value.getThreatShieldSettings = true
+  error.value.getThreatShieldSettings = ''
+  error.value.getThreatShieldSettingsDetails = ''
+
+  try {
+    const res = await ubusCall('ns.threatshield', 'list-settings')
+    isThreatShieldEnabled.value = res.data.data.enabled
+
+    if (isThreatShieldEnabled.value) {
+      getMalwareReport()
+      getAttackReport()
+    }
+  } catch (err: any) {
+    console.error(err)
+    error.value.getThreatShieldSettings = t(getAxiosErrorMessage(err))
+    error.value.getThreatShieldSettingsDetails = err.toString()
+  } finally {
+    loading.value.getThreatShieldSettings = false
+  }
+}
+
+async function getMalwareReport() {
+  loading.value.getMalwareReport = true
+  error.value.getMalwareReport = ''
+  error.value.getMalwareReportDetails = ''
+
+  try {
+    const res = await ubusCall('ns.report', 'tsip-malware-report')
+
+    // blocked packets chart
+
+    blockedPacketsChartLabels.value = res.data.malware_by_hour.map((data: any[]) => data[0])
+    const blockedPacketsChartData = res.data.malware_by_hour.map((data: any[]) => data[1])
+    blockedPacketsChartDatasets.value = [
+      {
+        label: t('standalone.real_time_monitor.blocked_packets_by_hour'),
+        backgroundColor: themeStore.isLight ? CYAN_600 : CYAN_500,
+        borderColor: themeStore.isLight ? CYAN_600 : CYAN_500,
+        borderRadius: 6,
+        maxBarThickness: 25,
+        borderWidth: 1,
+        radius: 0,
+        data: blockedPacketsChartData
+      }
+    ]
+
+    // malware by direction chart
+
+    malwareByDirectionChartLabels.value = Object.keys(res.data.malware_by_chain)
+    const malwareByDirectionChartData = Object.values(res.data.malware_by_chain)
+
+    malwareByDirectionChartDatasets.value = [
+      {
+        borderColor: themeStore.isLight ? GRAY_50 : GRAY_900,
+        backgroundColor: themeStore.isLight
+          ? [
+              CYAN_600,
+              INDIGO_600,
+              EMERALD_600,
+              VIOLET_600,
+              AMBER_600,
+              ROSE_600,
+              LIME_600,
+              FUCHSIA_600,
+              CYAN_800,
+              GRAY_500
+            ]
+          : [
+              CYAN_500,
+              INDIGO_500,
+              EMERALD_500,
+              VIOLET_500,
+              AMBER_500,
+              ROSE_500,
+              LIME_500,
+              FUCHSIA_500,
+              CYAN_300,
+              GRAY_400
+            ],
+        data: malwareByDirectionChartData
+      }
+    ]
+
+    // malware by category chart
+
+    malwareByCategoryChartLabels.value = Object.keys(res.data.malware_by_category)
+    const malwareByCategoryChartData = Object.values(res.data.malware_by_category)
+
+    malwareByCategoryChartDatasets.value = [
+      {
+        borderColor: themeStore.isLight ? GRAY_50 : GRAY_900,
+        backgroundColor: themeStore.isLight
+          ? [
+              CYAN_600,
+              INDIGO_600,
+              EMERALD_600,
+              VIOLET_600,
+              AMBER_600,
+              ROSE_600,
+              LIME_600,
+              FUCHSIA_600,
+              CYAN_800,
+              GRAY_500
+            ]
+          : [
+              CYAN_500,
+              INDIGO_500,
+              EMERALD_500,
+              VIOLET_500,
+              AMBER_500,
+              ROSE_500,
+              LIME_500,
+              FUCHSIA_500,
+              CYAN_300,
+              GRAY_400
+            ],
+        data: malwareByCategoryChartData
+      }
+    ]
+  } catch (err: any) {
+    console.error(err)
+    error.value.getMalwareReport = t(getAxiosErrorMessage(err))
+    error.value.getMalwareReportDetails = err.toString()
+  } finally {
+    loading.value.getMalwareReport = false
+  }
+}
+
+async function getAttackReport() {
+  loading.value.getAttackReport = true
+  error.value.getAttackReport = ''
+  error.value.getAttackReportDetails = ''
+
+  try {
+    const res = await ubusCall('ns.report', 'tsip-attack-report')
+
+    // most blocked ip addresses chart
+
+    mostBlockedIpsChartLabels.value = res.data.attack_by_ip
+      .slice(0, CHART_NUM_ITEMS)
+      .map((data: any[]) => data[0])
+
+    const mostBlockedIpAddresses = res.data.attack_by_ip
+      .slice(0, CHART_NUM_ITEMS)
+      .map((data: any[]) => data[1])
+
+    mostBlockedIpsChartDatasets.value = [
+      {
+        label: t('standalone.real_time_monitor.times_blocked'),
+        backgroundColor: themeStore.isLight ? CYAN_600 : CYAN_500,
+        borderColor: themeStore.isLight ? CYAN_600 : CYAN_500,
+        borderRadius: 6,
+        maxBarThickness: 25,
+        borderWidth: 1,
+        radius: 0,
+        data: mostBlockedIpAddresses
+      }
+    ]
+
+    // blocked ip addresses per hour chart
+
+    blockedIpsByHourChartLabels.value = res.data.attack_by_hour.map((data: any[]) => data[0])
+    const blockedIpsByHourChartData = res.data.attack_by_hour.map((data: any[]) => data[1])
+    blockedIpsByHourChartDatasets.value = [
+      {
+        label: t('standalone.real_time_monitor.blocked_ip_addresses'),
+        backgroundColor: themeStore.isLight ? CYAN_600 : CYAN_500,
+        borderColor: themeStore.isLight ? CYAN_600 : CYAN_500,
+        borderRadius: 6,
+        maxBarThickness: 25,
+        borderWidth: 1,
+        radius: 0,
+        data: blockedIpsByHourChartData
+      }
+    ]
+  } catch (err: any) {
+    console.error(err)
+    error.value.getAttackReport = t(getAxiosErrorMessage(err))
+    error.value.getAttackReportDetails = err.toString()
+  } finally {
+    loading.value.getAttackReport = false
+  }
+}
+</script>
+
+<template>
+  <div>
+    <!-- getThreatShieldSettings error notification -->
+    <NeInlineNotification
+      v-if="error.getThreatShieldSettings"
+      kind="error"
+      :title="t('error.cannot_retrieve_threat_shield_settings')"
+      :description="error.getThreatShieldSettings"
+      :closeAriaLabel="t('common.close')"
+      class="mb-4"
+    >
+      <template v-if="error.getThreatShieldSettingsDetails" #details>
+        {{ error.getThreatShieldSettingsDetails }}
+      </template>
+    </NeInlineNotification>
+    <!-- getAttackReport error notification -->
+    <NeInlineNotification
+      v-if="error.getAttackReport"
+      kind="error"
+      :title="t('error.cannot_retrieve_attack_report')"
+      :description="error.getAttackReport"
+      :closeAriaLabel="t('common.close')"
+      class="mb-4"
+    >
+      <template v-if="error.getAttackReportDetails" #details>
+        {{ error.getAttackReportDetails }}
+      </template>
+    </NeInlineNotification>
+    <!-- getMalwareReport error notification -->
+    <NeInlineNotification
+      v-if="error.getMalwareReport"
+      kind="error"
+      :title="t('error.cannot_retrieve_malware_report')"
+      :description="error.getMalwareReport"
+      :closeAriaLabel="t('common.close')"
+      class="mb-4"
+    >
+      <template v-if="error.getMalwareReportDetails" #details>
+        {{ error.getMalwareReportDetails }}
+      </template>
+    </NeInlineNotification>
+    <div class="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-12">
+      <template v-if="!loading.getThreatShieldSettings && !isThreatShieldEnabled">
+        <!-- empty state -->
+        <NeEmptyState
+          :title="t('standalone.threat_shield.threat_shield_disabled')"
+          :description="t('standalone.real_time_monitor.threat_shield_disabled_message')"
+          :icon="['fas', 'shield']"
+          class="col-span-full"
+        >
+          <NeButton
+            kind="primary"
+            @click="
+              () => {
+                router.push(`${getStandaloneRoutePrefix()}/security/threat-shield?tab=settings`)
+              }
+            "
+          >
+            <template #prefix>
+              <font-awesome-icon
+                :icon="['fas', 'arrow-right']"
+                class="h-4 w-4"
+                aria-hidden="true"
+              />
+            </template>
+            {{ t('standalone.threat_shield.go_to_settings') }}
+          </NeButton>
+        </NeEmptyState>
+      </template>
+      <template v-else>
+        <!-- blocked threats -->
+        <NeCard
+          :title="t('standalone.real_time_monitor.blocked_threats')"
+          :skeletonLines="2"
+          :loading="loading.getMalwareReport || loading.getThreatShieldSettings"
+          :errorTitle="error.getMalwareReport"
+          :errorDescription="error.getMalwareReportDetails"
+          class="sm:col-span-6 md:col-span-6 lg:col-span-4 xl:col-span-3 2xl:col-span-3"
+        >
+          <SimpleStat class="mt-1">
+            {{ malwareCount }}
+          </SimpleStat>
+        </NeCard>
+        <!-- blocked packets -->
+        <NeCard
+          :title="t('standalone.real_time_monitor.blocked_packets_by_hour')"
+          :loading="loading.getMalwareReport || loading.getThreatShieldSettings"
+          :errorTitle="error.getMalwareReport"
+          :errorDescription="error.getMalwareReportDetails"
+          class="row-span-2 sm:col-span-12 xl:col-span-9 2xl:col-span-9"
+        >
+          <BlockedPacketsByHourChart
+            :labels="blockedPacketsChartLabels"
+            :datasets="blockedPacketsChartDatasets"
+            height="25vh"
+          />
+        </NeCard>
+        <!-- blocked ip addresses -->
+        <NeCard
+          :title="t('standalone.real_time_monitor.blocked_ip_addresses')"
+          :skeletonLines="2"
+          :loading="loading.getAttackReport || loading.getThreatShieldSettings"
+          :errorTitle="error.getAttackReport"
+          :errorDescription="error.getAttackReportDetails"
+          class="sm:col-span-6 md:col-span-6 lg:col-span-4 xl:col-span-3 2xl:col-span-3"
+        >
+          <SimpleStat class="mt-1">
+            {{ attackCount }}
+          </SimpleStat>
+        </NeCard>
+        <!-- malware by direction -->
+        <NeCard
+          :title="t('standalone.real_time_monitor.malware_by_direction')"
+          :skeletonLines="4"
+          :loading="loading.getMalwareReport || loading.getThreatShieldSettings"
+          :errorTitle="error.getMalwareReport"
+          :errorDescription="error.getMalwareReportDetails"
+          class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 2xl:col-span-6 5xl:col-span-3"
+        >
+          <!-- empty state -->
+          <NeEmptyState
+            v-if="!malwareByDirectionChartDatasets[0]?.data.length"
+            :title="t('common.no_data_available')"
+            :icon="['fas', 'chart-line']"
+            class="bg-white dark:bg-gray-950"
+          />
+          <BasicPieChart
+            v-else
+            :labels="malwareByDirectionChartLabels"
+            :datasets="malwareByDirectionChartDatasets"
+            height="25vh"
+          />
+        </NeCard>
+        <!-- malware by category -->
+        <NeCard
+          :title="t('standalone.real_time_monitor.malware_by_category')"
+          :skeletonLines="4"
+          :loading="loading.getMalwareReport || loading.getThreatShieldSettings"
+          :errorTitle="error.getMalwareReport"
+          :errorDescription="error.getMalwareReportDetails"
+          class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 2xl:col-span-6 5xl:col-span-3"
+        >
+          <!-- empty state -->
+          <NeEmptyState
+            v-if="!malwareByCategoryChartDatasets[0]?.data.length"
+            :title="t('common.no_data_available')"
+            :icon="['fas', 'chart-line']"
+            class="bg-white dark:bg-gray-950"
+          />
+          <BasicPieChart
+            v-else
+            :labels="malwareByCategoryChartLabels"
+            :datasets="malwareByCategoryChartDatasets"
+            height="25vh"
+          />
+        </NeCard>
+        <!-- most blocked ip addresses -->
+        <NeCard
+          :title="t('standalone.real_time_monitor.most_blocked_ip_addresses')"
+          :skeletonLines="5"
+          :loading="loading.getAttackReport || loading.getThreatShieldSettings"
+          :errorTitle="error.getAttackReport"
+          :errorDescription="error.getAttackReportDetails"
+          class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 2xl:col-span-6 5xl:col-span-3"
+        >
+          <!-- empty state -->
+          <NeEmptyState
+            v-if="!mostBlockedIpsChartDatasets[0]?.data.length"
+            :title="t('common.no_data_available')"
+            :icon="['fas', 'chart-line']"
+            class="bg-white dark:bg-gray-950"
+          />
+          <BasicBarChart
+            v-else
+            :labels="mostBlockedIpsChartLabels"
+            :datasets="mostBlockedIpsChartDatasets"
+            isHorizontal
+            height="30vh"
+          />
+        </NeCard>
+        <!-- blocked ip addresses per hour -->
+        <NeCard
+          :title="t('standalone.real_time_monitor.blocked_ip_addresses_by_hour')"
+          :skeletonLines="5"
+          :loading="loading.getAttackReport || loading.getThreatShieldSettings"
+          :errorTitle="error.getAttackReport"
+          :errorDescription="error.getAttackReportDetails"
+          class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 2xl:col-span-6 5xl:col-span-3"
+        >
+          <BlockedIpsByHourChart
+            :labels="blockedIpsByHourChartLabels"
+            :datasets="blockedIpsByHourChartDatasets"
+            height="25vh"
+          />
+        </NeCard>
+      </template>
+    </div>
+  </div>
+</template>
diff --git a/src/components/standalone/monitoring/TrafficByHourChart.vue b/src/components/standalone/monitoring/TrafficByHourChart.vue
new file mode 100644
index 000000000..c9d22a339
--- /dev/null
+++ b/src/components/standalone/monitoring/TrafficByHourChart.vue
@@ -0,0 +1,112 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale
+} from 'chart.js'
+import 'chartjs-adapter-date-fns'
+import { Bar } from 'vue-chartjs'
+import { computed } from 'vue'
+import { useThemeStore } from '@/stores/theme'
+import { GRAY_200, GRAY_700, GRAY_800 } from '@/lib/color'
+import { padStart } from 'lodash-es'
+import { byteFormat1024 } from '@nethesis/vue-components'
+
+const themeStore = useThemeStore()
+
+const props = defineProps<{
+  labels: number[] | string[]
+  datasets: any[]
+  height?: string
+}>()
+
+const options: any = {
+  scales: {
+    x: {
+      ticks: {
+        source: 'auto',
+        autoSkip: true,
+        color: themeStore.isLight ? GRAY_700 : GRAY_200,
+        callback: function (value: number) {
+          return `${padStart(value.toString(), 2, '0')}:00`
+        }
+      },
+      grid: {
+        color: themeStore.isLight ? GRAY_200 : GRAY_800
+      }
+    },
+    y: {
+      ticks: {
+        // format traffic on chart ticks
+        callback: function (value: number) {
+          return byteFormat1024(Math.abs(value))
+        },
+        color: themeStore.isLight ? GRAY_700 : GRAY_200
+      },
+      grid: {
+        color: themeStore.isLight ? GRAY_200 : GRAY_800
+      }
+    }
+  },
+  plugins: {
+    decimation: {
+      enabled: true,
+      algorithm: 'min-max'
+    },
+    tooltip: {
+      callbacks: {
+        // format traffic bytes
+        label: function (context: any) {
+          let label = context.dataset.label || ''
+
+          if (label) {
+            label += ': '
+          }
+          if (context.parsed.y !== null) {
+            label += byteFormat1024(Math.abs(context.parsed.y))
+          }
+          return label
+        },
+        // format tooltip title
+        title: function (context: any) {
+          return `${padStart(context[0].parsed.x.toString(), 2, '0')}:00`
+        }
+      }
+    },
+    // hide legend
+    legend: {
+      display: false
+    }
+  },
+  responsive: true
+}
+
+const chartData: any = computed(() => {
+  return { labels: props.labels, datasets: props.datasets }
+})
+
+const chartStyle = computed(() => {
+  return {
+    height: props.height || '',
+    width: '100%',
+    position: 'relative'
+  }
+})
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
+</script>
+
+<template>
+  <div>
+    <Bar :data="chartData" :options="options" :style="chartStyle" />
+  </div>
+</template>
diff --git a/src/components/standalone/monitoring/TrafficMonitor.vue b/src/components/standalone/monitoring/TrafficMonitor.vue
new file mode 100644
index 000000000..0875ea9e6
--- /dev/null
+++ b/src/components/standalone/monitoring/TrafficMonitor.vue
@@ -0,0 +1,180 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { useTrafficSummary } from '@/composables/useTrafficSummary'
+import { NeCard, NeEmptyState, NeHeading, byteFormat1024 } from '@nethesis/vue-components'
+import InstantHostTrafficCard from '@/components/standalone/monitoring/traffic/InstantHostTrafficCard.vue'
+import TrafficSummaryChart from '@/components/standalone/monitoring/traffic/TrafficSummaryChart.vue'
+import TrafficByHourChart from './TrafficByHourChart.vue'
+import SimpleStat from '../../charts/SimpleStat.vue'
+import { useTopTalkers } from '@/composables/useTopTalkers'
+import InstantAppTrafficCard from './traffic/InstantAppTrafficCard.vue'
+import InstantProtocolTrafficCard from './traffic/InstantProtocolTrafficCard.vue'
+
+const { t } = useI18n()
+
+const {
+  clientsLabels,
+  clientsDatasets,
+  protocolsLabels,
+  protocolsDatasets,
+  appsLabels,
+  appsDatasets,
+  remoteHostsLabels,
+  remoteHostsDatasets,
+  hoursLabels,
+  hoursDatasets,
+  totalTraffic,
+  loadingTrafficSummary,
+  trafficSummaryError,
+  trafficSummaryErrorDescription
+} = useTrafficSummary()
+
+const {
+  topApps,
+  topHosts,
+  topProtocols,
+  loadingTopTalkers,
+  errorTopTalkers,
+  errorTopTalkersDescription
+} = useTopTalkers(20)
+</script>
+
+<template>
+  <div>
+    <div class="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-12">
+      <!-- total traffic -->
+      <NeCard
+        :title="t('standalone.real_time_monitor.today_total_traffic')"
+        :skeletonLines="2"
+        :loading="loadingTrafficSummary"
+        :errorTitle="trafficSummaryError"
+        :errorDescription="trafficSummaryErrorDescription"
+        class="sm:col-span-6 md:col-span-6 lg:col-span-4 xl:col-span-3 2xl:col-span-3"
+      >
+        <SimpleStat class="mt-1">
+          {{ byteFormat1024(totalTraffic) }}
+        </SimpleStat>
+      </NeCard>
+      <!-- recent traffic -->
+      <NeCard
+        :title="t('standalone.real_time_monitor.recent_traffic')"
+        :loading="loadingTrafficSummary"
+        :skeletonLines="6"
+        :errorTitle="trafficSummaryError"
+        :errorDescription="trafficSummaryErrorDescription"
+        class="row-span-2 sm:col-span-12 xl:col-span-9 2xl:col-span-9"
+      >
+        <TrafficByHourChart :labels="hoursLabels" :datasets="hoursDatasets" height="25vh" />
+      </NeCard>
+
+      <!-- today traffic title -->
+      <NeHeading tag="h6" class="col-span-full mt-4">
+        {{ t('standalone.real_time_monitor.today_traffic') }}
+      </NeHeading>
+
+      <!-- top protocols -->
+      <NeCard
+        :title="t('standalone.real_time_monitor.today_top_protocols')"
+        :skeletonLines="6"
+        :loading="loadingTrafficSummary"
+        :errorTitle="trafficSummaryError"
+        :errorDescription="trafficSummaryErrorDescription"
+        class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 2xl:col-span-6 5xl:col-span-3"
+      >
+        <NeEmptyState
+          v-if="!protocolsDatasets[0]?.data.length"
+          :title="t('common.no_data_available')"
+          :icon="['fas', 'chart-line']"
+          class="bg-white dark:bg-gray-950"
+        />
+        <TrafficSummaryChart v-else :labels="protocolsLabels" :datasets="protocolsDatasets" />
+      </NeCard>
+      <!-- top applications -->
+      <NeCard
+        :title="t('standalone.real_time_monitor.today_top_applications')"
+        :skeletonLines="6"
+        :loading="loadingTrafficSummary"
+        :errorTitle="trafficSummaryError"
+        :errorDescription="trafficSummaryErrorDescription"
+        class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 2xl:col-span-6 5xl:col-span-3"
+      >
+        <NeEmptyState
+          v-if="!appsDatasets[0]?.data.length"
+          :title="t('common.no_data_available')"
+          :icon="['fas', 'chart-line']"
+          class="bg-white dark:bg-gray-950"
+        />
+        <TrafficSummaryChart v-else :labels="appsLabels" :datasets="appsDatasets" />
+      </NeCard>
+      <!-- top remote hosts -->
+      <NeCard
+        :title="t('standalone.real_time_monitor.today_top_remote_hosts')"
+        :skeletonLines="6"
+        :loading="loadingTrafficSummary"
+        :errorTitle="trafficSummaryError"
+        :errorDescription="trafficSummaryErrorDescription"
+        class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 2xl:col-span-6 5xl:col-span-3"
+      >
+        <NeEmptyState
+          v-if="!remoteHostsDatasets[0]?.data.length"
+          :title="t('common.no_data_available')"
+          :icon="['fas', 'chart-line']"
+          class="bg-white dark:bg-gray-950"
+        />
+        <TrafficSummaryChart v-else :labels="remoteHostsLabels" :datasets="remoteHostsDatasets" />
+      </NeCard>
+      <!-- top local hosts -->
+      <NeCard
+        :title="t('standalone.real_time_monitor.today_top_local_hosts')"
+        :skeletonLines="6"
+        :loading="loadingTrafficSummary"
+        :errorTitle="trafficSummaryError"
+        :errorDescription="trafficSummaryErrorDescription"
+        class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 2xl:col-span-6 5xl:col-span-3"
+      >
+        <NeEmptyState
+          v-if="!clientsDatasets[0]?.data.length"
+          :title="t('common.no_data_available')"
+          :icon="['fas', 'chart-line']"
+          class="bg-white dark:bg-gray-950"
+        />
+        <TrafficSummaryChart v-else :labels="clientsLabels" :datasets="clientsDatasets" />
+      </NeCard>
+
+      <!-- instant traffic title -->
+      <NeHeading tag="h6" class="col-span-full mt-4">
+        {{ t('standalone.real_time_monitor.instant_traffic') }}
+      </NeHeading>
+
+      <!-- instant hosts traffic -->
+      <InstantHostTrafficCard
+        :topHosts="topHosts"
+        :loading="loadingTopTalkers"
+        :error="errorTopTalkers"
+        :errorDescription="errorTopTalkersDescription"
+        class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 3xl:col-span-4"
+      />
+      <!-- instant apps traffic -->
+      <InstantAppTrafficCard
+        :topApps="topApps"
+        :loading="loadingTopTalkers"
+        :error="errorTopTalkers"
+        :errorDescription="errorTopTalkersDescription"
+        class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 3xl:col-span-4"
+      />
+      <!-- instant protocols traffic -->
+      <InstantProtocolTrafficCard
+        :topProtocols="topProtocols"
+        :loading="loadingTopTalkers"
+        :error="errorTopTalkers"
+        :errorDescription="errorTopTalkersDescription"
+        class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 3xl:col-span-4"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/components/standalone/monitoring/VpnMonitor.vue b/src/components/standalone/monitoring/VpnMonitor.vue
new file mode 100644
index 000000000..b83f6c7c3
--- /dev/null
+++ b/src/components/standalone/monitoring/VpnMonitor.vue
@@ -0,0 +1,428 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { ubusCall } from '@/lib/standalone/ubus'
+import {
+  formatDateLoc,
+  getAxiosErrorMessage,
+  NeCard,
+  NeEmptyState,
+  NeHeading,
+  NeInlineNotification
+} from '@nethesis/vue-components'
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import ServerStatusCard from './vpn/ServerStatusCard.vue'
+import CurrentlyConnectedClientsCard from './vpn/CurrentlyConnectedClientsCard.vue'
+import ClientsTrafficByHourCard from './vpn/ClientsTrafficByHourCard.vue'
+import ClientSessionsCard from './vpn/ClientSessionsCard.vue'
+import ConnectedClientsByHourCard from './vpn/ConnectedClientsByHourCard.vue'
+import TrafficByClientByHourCard from './vpn/TrafficByClientByHourCard.vue'
+import SimpleStat from '@/components/charts/SimpleStat.vue'
+import ConfiguredTunnelsCard from './vpn/ConfiguredTunnelsCard.vue'
+import type { DeviceOrIface } from '@/lib/standalone/network'
+import InterfaceTrafficCard from './connectivity/InterfaceTrafficCard.vue'
+import type { RWServer } from '@/views/standalone/vpn/OpenvpnRoadWarriorView.vue'
+
+export type OvpnUser = {
+  name: string
+  description: string
+  local: boolean
+  database: string
+  openvpn_enabled: string
+  openvpn_ipaddr: string
+  openvpn_2fa: string
+  admin: boolean
+  id: string
+  connected: boolean
+  expiration: number
+  expired: boolean
+  used: boolean
+  matches: any[]
+}
+
+const { t } = useI18n()
+
+const ovpnInstances = ref<string[]>([])
+const ovpnTunnels = ref<any[]>([])
+const ipsecTunnels = ref<any[]>([])
+const allDevices = ref<DeviceOrIface[]>([])
+const ovpnUsers = ref<Record<string, OvpnUser[]>>({})
+const ovpnConfiguration = ref<Record<string, RWServer>>({})
+const today = formatDateLoc(new Date(), 'yyyy-MM-dd')
+
+const loading = ref({
+  listOvpnInstances: true,
+  listUsers: true,
+  getOvpnConfiguration: true,
+  listOvpnTunnels: true,
+  listIpsecTunnels: true,
+  listDevices: true
+})
+
+const error = ref({
+  listOvpnInstances: '',
+  listOvpnInstancesDetails: '',
+  listUsers: '',
+  listUsersDetails: '',
+  getOvpnConfiguration: '',
+  getOvpnConfigurationDetails: '',
+  listOvpnTunnels: '',
+  listOvpnTunnelsDetails: '',
+  listIpsecTunnels: '',
+  listIpsecTunnelsDetails: '',
+  listDevices: '',
+  listDevicesDetails: ''
+})
+
+const allTunnels = computed(() => {
+  return ovpnTunnels.value.concat(ipsecTunnels.value)
+})
+
+const connectedTunnels = computed(() => {
+  return allTunnels.value.filter((tunnel) => tunnel.connected)
+})
+
+const tunnelDevices = computed(() => {
+  const devices: Record<string, string> = {}
+
+  for (const tunnel of allTunnels.value) {
+    const prefix = tunnel.type === 'ipsec' ? 'ipsec/' : 'openvpn/'
+    const tunnelIdWithPrefix = prefix + tunnel.id // e.g. openvpn/ns_mytun
+
+    // find device for tunnel
+    const deviceFound = allDevices.value.find((device) => {
+      if (tunnel.type === 'ipsec') {
+        return device.ns_link === tunnelIdWithPrefix
+      } else {
+        return device.iface?.ns_link === tunnelIdWithPrefix
+      }
+    })
+
+    if (deviceFound) {
+      devices[tunnel.id] = deviceFound.name || deviceFound['.name']!
+    }
+  }
+  return devices
+})
+
+onMounted(() => {
+  listOvpnInstances()
+  listOvpnTunnels()
+  listIpsecTunnels()
+  listDevices()
+})
+
+async function listOvpnInstances() {
+  loading.value.listOvpnInstances = true
+  error.value.listOvpnInstances = ''
+  error.value.listOvpnInstancesDetails = ''
+
+  try {
+    const res = await ubusCall('ns.ovpnrw', 'list-instances')
+    ovpnInstances.value = res.data.instances
+
+    for (const ovpnInstance of ovpnInstances.value) {
+      listUsers(ovpnInstance)
+      getOvpnConfiguration(ovpnInstance)
+    }
+  } catch (err: any) {
+    console.error(err)
+    error.value.listOvpnInstances = t(getAxiosErrorMessage(err))
+    error.value.listOvpnInstancesDetails = err.toString()
+  } finally {
+    loading.value.listOvpnInstances = false
+  }
+}
+
+async function listOvpnTunnels() {
+  loading.value.listOvpnTunnels = true
+  error.value.listOvpnTunnels = ''
+  error.value.listOvpnTunnelsDetails = ''
+
+  try {
+    const res = await ubusCall('ns.ovpntunnel', 'list-tunnels')
+    const tunnels = []
+
+    for (const tunnel of res.data.clients) {
+      tunnel.type = 'ovpn_client'
+      tunnel.name = tunnel.ns_name
+      tunnels.push(tunnel)
+    }
+
+    for (const tunnel of res.data.servers) {
+      tunnel.type = 'ovpn_server'
+      tunnel.name = tunnel.ns_name
+      tunnels.push(tunnel)
+    }
+    ovpnTunnels.value = tunnels
+  } catch (err: any) {
+    console.error(err)
+    error.value.listOvpnTunnels = t(getAxiosErrorMessage(err))
+    error.value.listOvpnTunnelsDetails = err.toString()
+  } finally {
+    loading.value.listOvpnTunnels = false
+  }
+}
+
+async function listIpsecTunnels() {
+  loading.value.listIpsecTunnels = true
+  error.value.listIpsecTunnels = ''
+  error.value.listIpsecTunnelsDetails = ''
+
+  try {
+    const res = await ubusCall('ns.ipsectunnel', 'list-tunnels')
+    ipsecTunnels.value = res.data.tunnels.map((tunnel: any) => {
+      tunnel.type = 'ipsec'
+      return tunnel
+    })
+  } catch (err: any) {
+    console.error(err)
+    error.value.listIpsecTunnels = t(getAxiosErrorMessage(err))
+    error.value.listIpsecTunnelsDetails = err.toString()
+  } finally {
+    loading.value.listIpsecTunnels = false
+  }
+}
+
+async function listUsers(ovpnInstance: string) {
+  loading.value.listUsers = true
+  error.value.listUsers = ''
+  error.value.listUsersDetails = ''
+
+  try {
+    const res = await ubusCall('ns.ovpnrw', 'list-users', { instance: ovpnInstance })
+    ovpnUsers.value[ovpnInstance] = res.data.users
+  } catch (err: any) {
+    console.error(err)
+    error.value.listUsers = t(getAxiosErrorMessage(err))
+    error.value.listUsersDetails = err.toString()
+  } finally {
+    loading.value.listUsers = false
+  }
+}
+
+async function getOvpnConfiguration(ovpnInstance: string) {
+  loading.value.getOvpnConfiguration = true
+  error.value.getOvpnConfiguration = ''
+  error.value.getOvpnConfigurationDetails = ''
+
+  try {
+    const res = await ubusCall('ns.ovpnrw', 'get-configuration', { instance: ovpnInstance })
+    ovpnConfiguration.value[ovpnInstance] = res.data
+  } catch (err: any) {
+    console.error(err)
+    error.value.getOvpnConfiguration = t(getAxiosErrorMessage(err))
+    error.value.getOvpnConfigurationDetails = err.toString()
+  } finally {
+    loading.value.getOvpnConfiguration = false
+  }
+}
+
+async function listDevices() {
+  loading.value.listDevices = true
+  error.value.listDevices = ''
+  error.value.listDevicesDetails = ''
+
+  try {
+    const res = await ubusCall('ns.devices', 'list-devices')
+    allDevices.value = res.data.all_devices
+  } catch (err: any) {
+    console.error(err)
+    error.value.listDevices = t(getAxiosErrorMessage(err))
+    error.value.listDevicesDetails = err.toString()
+  } finally {
+    loading.value.listDevices = false
+  }
+}
+
+function getTunnelName(tunnelId: string) {
+  const tunnel = allTunnels.value.find((tunnel) => tunnel.id === tunnelId)
+  return tunnel ? tunnel.name : ''
+}
+</script>
+<template>
+  <div>
+    <!-- listOvpnInstances error notification -->
+    <NeInlineNotification
+      v-if="error.listOvpnInstances"
+      kind="error"
+      :title="t('error.cannot_retrieve_rw_server')"
+      :description="error.listOvpnInstances"
+      :closeAriaLabel="t('common.close')"
+      class="mb-4"
+    >
+      <template v-if="error.listOvpnInstancesDetails" #details>
+        {{ error.listOvpnInstancesDetails }}
+      </template>
+    </NeInlineNotification>
+    <!-- listUsers error notification -->
+    <NeInlineNotification
+      v-if="error.listUsers"
+      kind="error"
+      :title="t('error.cannot_retrieve_users')"
+      :description="error.listUsers"
+      :closeAriaLabel="t('common.close')"
+      class="mb-4"
+    >
+      <template v-if="error.listUsersDetails" #details>
+        {{ error.listUsersDetails }}
+      </template>
+    </NeInlineNotification>
+    <!-- listOvpnTunnels error notification -->
+    <NeInlineNotification
+      v-if="error.listOvpnTunnels"
+      kind="error"
+      :title="t('error.cannot_retrieve_ovpn_tunnels')"
+      :description="error.listOvpnTunnels"
+      :closeAriaLabel="t('common.close')"
+      class="mb-4"
+    >
+      <template v-if="error.listOvpnTunnelsDetails" #details>
+        {{ error.listOvpnTunnelsDetails }}
+      </template>
+    </NeInlineNotification>
+    <!-- listIpsecTunnels error notification -->
+    <NeInlineNotification
+      v-if="error.listIpsecTunnels"
+      kind="error"
+      :title="t('error.cannot_retrieve_ipsec_tunnels')"
+      :description="error.listIpsecTunnels"
+      :closeAriaLabel="t('common.close')"
+      class="mb-4"
+    >
+      <template v-if="error.listIpsecTunnelsDetails" #details>
+        {{ error.listIpsecTunnelsDetails }}
+      </template>
+    </NeInlineNotification>
+    <!-- listDevices error notification -->
+    <NeInlineNotification
+      v-if="error.listDevices"
+      kind="error"
+      :title="t('error.cannot_load_network_devices')"
+      :description="error.listDevices"
+      :closeAriaLabel="t('common.close')"
+      class="mb-4"
+    >
+      <template v-if="error.listDevicesDetails" #details>
+        {{ error.listDevicesDetails }}
+      </template>
+    </NeInlineNotification>
+    <!-- getOvpnConfiguration error notification -->
+    <NeInlineNotification
+      v-if="error.getOvpnConfiguration"
+      kind="error"
+      :title="t('error.cannot_retrieve_rw_server')"
+      :description="error.getOvpnConfiguration"
+      :closeAriaLabel="t('common.close')"
+      class="mb-4"
+    >
+      <template v-if="error.getOvpnConfigurationDetails" #details>
+        {{ error.getOvpnConfigurationDetails }}
+      </template>
+    </NeInlineNotification>
+    <div class="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-12">
+      <!-- global empty state -->
+      <NeEmptyState
+        v-if="
+          !loading.listOvpnInstances &&
+          !loading.listOvpnTunnels &&
+          !loading.listIpsecTunnels &&
+          !ovpnInstances.length &&
+          !allTunnels.length
+        "
+        :title="t('standalone.real_time_monitor.no_vpn_network_configured')"
+        :icon="['fas', 'globe']"
+        class="col-span-full"
+      >
+      </NeEmptyState>
+      <!-- skeleton -->
+      <template
+        v-if="loading.listOvpnInstances || loading.listOvpnTunnels || loading.listIpsecTunnels"
+      >
+        <NeCard
+          v-for="index in 6"
+          :key="index"
+          loading
+          class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 3xl:col-span-4"
+        ></NeCard>
+      </template>
+      <template v-else v-for="ovpnInstance in ovpnInstances" :key="ovpnInstance">
+        <!-- rw server title -->
+        <NeHeading tag="h6" class="col-span-full">
+          {{ ovpnConfiguration[ovpnInstance]?.ns_description }}
+        </NeHeading>
+        <!-- server status -->
+        <ServerStatusCard
+          :ovpnConfiguration="ovpnConfiguration[ovpnInstance]"
+          class="sm:col-span-6 md:col-span-6 lg:col-span-4 xl:col-span-3 2xl:col-span-3"
+        />
+        <!-- clients traffic by hour -->
+        <ClientsTrafficByHourCard
+          :ovpnInstance="ovpnInstance"
+          :day="today"
+          class="row-span-2 sm:col-span-12 xl:col-span-9 2xl:col-span-9"
+        ></ClientsTrafficByHourCard>
+        <!-- connected clients -->
+        <CurrentlyConnectedClientsCard
+          :ovpnInstance="ovpnInstance"
+          :ovpnUsers="ovpnUsers[ovpnInstance] || []"
+          :loading="loading.listUsers"
+          class="sm:col-span-6 md:col-span-6 lg:col-span-4 xl:col-span-3 2xl:col-span-3"
+        ></CurrentlyConnectedClientsCard>
+        <!-- client sessions -->
+        <ClientSessionsCard
+          :ovpnInstance="ovpnInstance"
+          :day="today"
+          class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 3xl:col-span-4"
+        ></ClientSessionsCard>
+        <!-- connected clients by hour -->
+        <ConnectedClientsByHourCard
+          :ovpnInstance="ovpnInstance"
+          :day="today"
+          class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 3xl:col-span-4"
+        ></ConnectedClientsByHourCard>
+        <!-- connected clients by hour -->
+        <TrafficByClientByHourCard
+          :ovpnInstance="ovpnInstance"
+          :ovpnUsers="ovpnUsers[ovpnInstance] || []"
+          :day="today"
+          :loadingUsers="loading.listUsers"
+          class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 3xl:col-span-4"
+        ></TrafficByClientByHourCard>
+      </template>
+      <template v-if="allTunnels.length">
+        <!-- site-to-site vpn title -->
+        <NeHeading tag="h6" class="col-span-full">
+          {{ t('standalone.real_time_monitor.site_to_site_vpn') }}
+        </NeHeading>
+        <!-- connected tunnels -->
+        <NeCard
+          :title="t('standalone.real_time_monitor.connected_tunnels')"
+          class="sm:col-span-6 md:col-span-6 lg:col-span-4 xl:col-span-3 3xl:col-span-3"
+        >
+          <SimpleStat class="mt-1">
+            <span>{{ connectedTunnels.length }}/{{ allTunnels.length }}</span>
+          </SimpleStat>
+        </NeCard>
+        <!-- configured tunnels -->
+        <ConfiguredTunnelsCard
+          :tunnels="allTunnels"
+          :tunnelDevices="tunnelDevices"
+          class="row-span-2 sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-9 3xl:col-span-5"
+        ></ConfiguredTunnelsCard>
+        <!-- tunnels traffic -->
+        <InterfaceTrafficCard
+          v-for="(tunnelDevice, tunnelId) in tunnelDevices"
+          :key="tunnelDevice"
+          :iface="getTunnelName(tunnelId)"
+          :device="tunnelDevice"
+          class="row-span-2 sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 3xl:col-span-4"
+        />
+      </template>
+    </div>
+  </div>
+</template>
diff --git a/src/components/standalone/monitoring/connectivity/InterfaceTrafficCard.vue b/src/components/standalone/monitoring/connectivity/InterfaceTrafficCard.vue
new file mode 100644
index 000000000..42fac3c79
--- /dev/null
+++ b/src/components/standalone/monitoring/connectivity/InterfaceTrafficCard.vue
@@ -0,0 +1,110 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { CYAN_500, CYAN_600, INDIGO_400, INDIGO_600 } from '@/lib/color'
+import { ubusCall } from '@/lib/standalone/ubus'
+import { useThemeStore } from '@/stores/theme'
+import { NeCard, NeSkeleton, getAxiosErrorMessage } from '@nethesis/vue-components'
+import { onMounted, onUnmounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import InterfaceTrafficChart from '../traffic/InterfaceTrafficChart.vue'
+
+const props = defineProps<{
+  iface?: string
+  device: string
+}>()
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+
+// random refresh interval between 20 and 30 seconds
+const REFRESH_INTERVAL = 20000 + Math.random() * 10 * 1000
+const chartLabels = ref<any[]>([])
+const chartDatasets = ref<any[]>([])
+const intervalId = ref(0)
+
+let loading = ref({
+  getInterfaceTraffic: false
+})
+
+let error = ref({
+  getInterfaceTraffic: '',
+  getInterfaceTrafficDescription: ''
+})
+
+onMounted(() => {
+  // periodically reload data
+  intervalId.value = setInterval(getInterfaceTraffic, REFRESH_INTERVAL)
+
+  getInterfaceTraffic()
+})
+
+onUnmounted(() => {
+  if (intervalId.value) {
+    clearInterval(intervalId.value)
+  }
+})
+
+async function getInterfaceTraffic() {
+  // show skeleton only the first time
+  if (!intervalId.value) {
+    loading.value.getInterfaceTraffic = true
+  }
+  error.value.getInterfaceTraffic = ''
+  error.value.getInterfaceTrafficDescription = ''
+
+  try {
+    const res = await ubusCall('ns.dashboard', 'interface-traffic', {
+      interface: props.device
+    })
+    chartLabels.value = res.data.result.labels.map((timestamp: any) => timestamp * 1000)
+    const downloadData = res.data.result.data.map((values: any) => values[0])
+    const uploadData = res.data.result.data.map((values: any) => values[1])
+
+    chartDatasets.value = [
+      {
+        label: t('common.download'),
+        borderColor: themeStore.isLight ? CYAN_600 : CYAN_500,
+        backgroundColor: themeStore.isLight ? CYAN_600 : CYAN_500,
+        data: downloadData,
+        borderWidth: 1,
+        radius: 0
+      },
+      {
+        label: t('common.upload'),
+        borderColor: themeStore.isLight ? INDIGO_600 : INDIGO_400,
+        backgroundColor: themeStore.isLight ? INDIGO_600 : INDIGO_400,
+        data: uploadData,
+        borderWidth: 1,
+        radius: 0
+      }
+    ]
+  } catch (err: any) {
+    console.error(err)
+    error.value.getInterfaceTraffic = t('error.cannot_retrieve_wan_traffic')
+    error.value.getInterfaceTrafficDescription = t(getAxiosErrorMessage(err))
+  } finally {
+    loading.value.getInterfaceTraffic = false
+  }
+}
+</script>
+
+<template>
+  <NeCard
+    :title="
+      t('standalone.real_time_monitor.interface_name_traffic', {
+        name: props.iface || props.device
+      })
+    "
+    :skeletonLines="8"
+    :loading="loading.getInterfaceTraffic"
+    :errorTitle="error.getInterfaceTraffic"
+    :errorDescription="error.getInterfaceTrafficDescription"
+  >
+    <NeSkeleton v-if="loading.getInterfaceTraffic" :lines="6"></NeSkeleton>
+    <InterfaceTrafficChart v-else :labels="chartLabels" :datasets="chartDatasets" height="30vh" />
+  </NeCard>
+</template>
diff --git a/src/components/standalone/monitoring/connectivity/WanConnectionsCard.vue b/src/components/standalone/monitoring/connectivity/WanConnectionsCard.vue
new file mode 100644
index 000000000..749737b14
--- /dev/null
+++ b/src/components/standalone/monitoring/connectivity/WanConnectionsCard.vue
@@ -0,0 +1,98 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import {
+  NeCard,
+  NeTable,
+  NeTableHead,
+  NeTableHeadCell,
+  NeTableBody,
+  NeTableRow,
+  NeTableCell,
+  NePaginator,
+  useItemPagination
+} from '@nethesis/vue-components'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { Wan } from '../ConnectivityMonitor.vue'
+
+const props = defineProps<{
+  wanConnections: Wan[]
+}>()
+
+const { t } = useI18n()
+
+const pageSize = ref(5)
+const { currentPage, paginatedItems } = useItemPagination(() => props.wanConnections, {
+  itemsPerPage: pageSize
+})
+</script>
+
+<template>
+  <NeCard :title="t('standalone.real_time_monitor.connections')">
+    <NeTable
+      :ariaLabel="t('standalone.real_time_monitor.connections')"
+      cardBreakpoint="sm"
+      class="mt-2"
+    >
+      <NeTableHead>
+        <NeTableHeadCell>{{ t('standalone.real_time_monitor.interface') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ t('standalone.real_time_monitor.device') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ t('common.status') }}</NeTableHeadCell>
+      </NeTableHead>
+      <NeTableBody>
+        <NeTableRow v-for="(item, index) in paginatedItems" :key="index">
+          <NeTableCell :data-label="t('standalone.real_time_monitor.interface')">
+            {{ item.iface }}
+          </NeTableCell>
+          <NeTableCell :data-label="t('standalone.real_time_monitor.device')">
+            {{ item.device }}
+          </NeTableCell>
+          <NeTableCell :data-label="t('common.status')">
+            <div class="flex items-center gap-2">
+              <font-awesome-icon
+                :icon="['fas', item.status == 'online' ? 'circle-check' : 'circle-xmark']"
+                :class="[
+                  'h-4 w-4',
+                  item.status == 'online'
+                    ? 'text-green-600 dark:text-green-400'
+                    : 'text-rose-600 dark:text-rose-400'
+                ]"
+                aria-hidden="true"
+              />
+              {{
+                item.status == 'online'
+                  ? t('standalone.real_time_monitor.online')
+                  : t('standalone.real_time_monitor.offline')
+              }}
+            </div>
+          </NeTableCell>
+        </NeTableRow>
+      </NeTableBody>
+      <template #paginator>
+        <NePaginator
+          :current-page="currentPage"
+          :total-rows="wanConnections.length"
+          :page-size="pageSize"
+          :page-sizes="[5, 10]"
+          :nav-pagination-label="t('ne_table.pagination')"
+          :next-label="t('ne_table.go_to_next_page')"
+          :previous-label="t('ne_table.go_to_previous_page')"
+          :range-of-total-label="t('ne_table.of')"
+          :page-size-label="t('ne_table.show')"
+          @select-page="
+            (page: number) => {
+              currentPage = page
+            }"
+          @selectPageSize="
+            (size: number) => {
+              pageSize = size
+            }"
+        />
+      </template>
+    </NeTable>
+  </NeCard>
+</template>
diff --git a/src/components/standalone/monitoring/connectivity/WanEventsCard.vue b/src/components/standalone/monitoring/connectivity/WanEventsCard.vue
new file mode 100644
index 000000000..11bc095ad
--- /dev/null
+++ b/src/components/standalone/monitoring/connectivity/WanEventsCard.vue
@@ -0,0 +1,106 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import {
+  NeCard,
+  NeTable,
+  NeTableHead,
+  NeTableHeadCell,
+  NeTableBody,
+  NeTableRow,
+  NeTableCell,
+  NePaginator,
+  useItemPagination,
+  formatDateLoc
+} from '@nethesis/vue-components'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { WanEvent } from '../ConnectivityMonitor.vue'
+
+const props = defineProps<{
+  wan: string
+  wanEvents: WanEvent[]
+}>()
+
+const { t } = useI18n()
+
+const pageSize = ref(5)
+const { currentPage, paginatedItems } = useItemPagination(() => props.wanEvents, {
+  itemsPerPage: pageSize
+})
+</script>
+
+<template>
+  <NeCard
+    :title="
+      t('standalone.real_time_monitor.wan_name_events', {
+        name: props.wan
+      })
+    "
+  >
+    <NeTable
+      :ariaLabel="
+        t('standalone.real_time_monitor.wan_name_events', {
+          name: props.wan
+        })
+      "
+      cardBreakpoint="sm"
+      class="mt-2"
+    >
+      <NeTableHead>
+        <NeTableHeadCell>{{ t('standalone.real_time_monitor.timestamp') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ t('standalone.real_time_monitor.event') }}</NeTableHeadCell>
+      </NeTableHead>
+      <NeTableBody>
+        <NeTableRow v-for="item in paginatedItems" :key="item.time">
+          <NeTableCell :data-label="t('standalone.real_time_monitor.timestamp')">
+            {{ formatDateLoc(new Date(Number(item.time) * 1000), 'PPpp') || '-' }}
+          </NeTableCell>
+          <NeTableCell :data-label="t('standalone.real_time_monitor.event')">
+            <div class="flex items-center gap-2">
+              <font-awesome-icon
+                :icon="['fas', item.status ? 'circle-check' : 'circle-xmark']"
+                :class="[
+                  'h-4 w-4',
+                  item.status
+                    ? 'text-green-600 dark:text-green-400'
+                    : 'text-rose-600 dark:text-rose-400'
+                ]"
+                aria-hidden="true"
+              />
+              {{
+                item.status
+                  ? t('standalone.real_time_monitor.online')
+                  : t('standalone.real_time_monitor.offline')
+              }}
+            </div>
+          </NeTableCell>
+        </NeTableRow>
+      </NeTableBody>
+      <template #paginator>
+        <NePaginator
+          :current-page="currentPage"
+          :total-rows="wanEvents.length"
+          :page-size="pageSize"
+          :page-sizes="[5, 10]"
+          :nav-pagination-label="t('ne_table.pagination')"
+          :next-label="t('ne_table.go_to_next_page')"
+          :previous-label="t('ne_table.go_to_previous_page')"
+          :range-of-total-label="t('ne_table.of')"
+          :page-size-label="t('ne_table.show')"
+          @select-page="
+            (page: number) => {
+              currentPage = page
+            }"
+          @selectPageSize="
+            (size: number) => {
+              pageSize = size
+            }"
+        />
+      </template>
+    </NeTable>
+  </NeCard>
+</template>
diff --git a/src/components/standalone/monitoring/security/BlockedIpsByHourChart.vue b/src/components/standalone/monitoring/security/BlockedIpsByHourChart.vue
new file mode 100644
index 000000000..d45b7faed
--- /dev/null
+++ b/src/components/standalone/monitoring/security/BlockedIpsByHourChart.vue
@@ -0,0 +1,95 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale
+} from 'chart.js'
+import 'chartjs-adapter-date-fns'
+import { Bar } from 'vue-chartjs'
+import { computed } from 'vue'
+import { useThemeStore } from '@/stores/theme'
+import { GRAY_200, GRAY_700, GRAY_800 } from '@/lib/color'
+import { padStart } from 'lodash-es'
+
+const themeStore = useThemeStore()
+
+const props = defineProps<{
+  labels: string[]
+  datasets: any[]
+  height?: string
+}>()
+
+const options: any = {
+  scales: {
+    x: {
+      ticks: {
+        source: 'auto',
+        autoSkip: true,
+        color: themeStore.isLight ? GRAY_700 : GRAY_200,
+        callback: function (value: number) {
+          return `${padStart(value.toString(), 2, '0')}:00`
+        }
+      },
+      grid: {
+        color: themeStore.isLight ? GRAY_200 : GRAY_800
+      }
+    },
+    y: {
+      ticks: {
+        color: themeStore.isLight ? GRAY_700 : GRAY_200
+      },
+      grid: {
+        color: themeStore.isLight ? GRAY_200 : GRAY_800
+      }
+    }
+  },
+  plugins: {
+    decimation: {
+      enabled: true,
+      algorithm: 'min-max'
+    },
+    tooltip: {
+      callbacks: {
+        // format tooltip title
+        title: function (context: any) {
+          return `${padStart(context[0].parsed.x.toString(), 2, '0')}:00`
+        }
+      }
+    },
+    // hide legend
+    legend: {
+      display: false
+    }
+  },
+  responsive: true
+}
+
+const chartData: any = computed(() => {
+  return { labels: props.labels, datasets: props.datasets }
+})
+
+const chartStyle = computed(() => {
+  return {
+    height: props.height || '',
+    width: '100%',
+    position: 'relative'
+  }
+})
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
+</script>
+
+<template>
+  <div>
+    <Bar :data="chartData" :options="options" :style="chartStyle" />
+  </div>
+</template>
diff --git a/src/components/standalone/monitoring/security/BlockedPacketsByHourChart.vue b/src/components/standalone/monitoring/security/BlockedPacketsByHourChart.vue
new file mode 100644
index 000000000..e98209b09
--- /dev/null
+++ b/src/components/standalone/monitoring/security/BlockedPacketsByHourChart.vue
@@ -0,0 +1,106 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale
+} from 'chart.js'
+import 'chartjs-adapter-date-fns'
+import { Bar } from 'vue-chartjs'
+import { computed } from 'vue'
+import { useThemeStore } from '@/stores/theme'
+import { GRAY_200, GRAY_700, GRAY_800 } from '@/lib/color'
+import { padStart } from 'lodash-es'
+
+const themeStore = useThemeStore()
+
+const props = defineProps<{
+  labels: number[]
+  datasets: any[]
+  height?: string
+}>()
+
+const options: any = {
+  scales: {
+    x: {
+      ticks: {
+        source: 'auto',
+        autoSkip: true,
+        color: themeStore.isLight ? GRAY_700 : GRAY_200,
+        callback: function (value: number) {
+          return `${padStart(value.toString(), 2, '0')}:00`
+        }
+      },
+      grid: {
+        color: themeStore.isLight ? GRAY_200 : GRAY_800
+      }
+    },
+    y: {
+      ticks: {
+        color: themeStore.isLight ? GRAY_700 : GRAY_200
+      },
+      grid: {
+        color: themeStore.isLight ? GRAY_200 : GRAY_800
+      }
+    }
+  },
+  plugins: {
+    decimation: {
+      enabled: true,
+      algorithm: 'min-max'
+    },
+    tooltip: {
+      callbacks: {
+        label: function (context: any) {
+          let label = context.dataset.label || ''
+
+          if (label) {
+            label += ': '
+          }
+          if (context.parsed.y !== null) {
+            label += context.parsed.y.toLocaleString()
+          }
+          return label
+        },
+        // format tooltip title
+        title: function (context: any) {
+          return `${padStart(context[0].parsed.x.toString(), 2, '0')}:00`
+        }
+      }
+    },
+    // hide legend
+    legend: {
+      display: false
+    }
+  },
+  responsive: true
+}
+
+const chartData: any = computed(() => {
+  return { labels: props.labels, datasets: props.datasets }
+})
+
+const chartStyle = computed(() => {
+  return {
+    height: props.height || '',
+    width: '100%',
+    position: 'relative'
+  }
+})
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
+</script>
+
+<template>
+  <div>
+    <Bar :data="chartData" :options="options" :style="chartStyle" />
+  </div>
+</template>
diff --git a/src/components/standalone/monitoring/traffic/InstantAppTrafficCard.vue b/src/components/standalone/monitoring/traffic/InstantAppTrafficCard.vue
new file mode 100644
index 000000000..90511f6f8
--- /dev/null
+++ b/src/components/standalone/monitoring/traffic/InstantAppTrafficCard.vue
@@ -0,0 +1,101 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import {
+  NeCard,
+  NeTable,
+  NeTableHead,
+  NeTableHeadCell,
+  NeTableBody,
+  NeTableRow,
+  NeTableCell,
+  NePaginator,
+  useItemPagination,
+  NeEmptyState
+} from '@nethesis/vue-components'
+import { kbpsFormat } from '@nethesis/vue-components'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { type TopItem } from '@/composables/useTopTalkers'
+
+const props = defineProps<{
+  topApps: TopItem[]
+  loading: boolean
+  error: string
+  errorDescription: string
+}>()
+
+const { t } = useI18n()
+
+const pageSize = ref(5)
+const { currentPage, paginatedItems } = useItemPagination(() => props.topApps, {
+  itemsPerPage: pageSize
+})
+
+function formatTraffic(value: number) {
+  return kbpsFormat((value / 1000) * 8)
+}
+</script>
+
+<template>
+  <NeCard
+    :title="t('standalone.real_time_monitor.applications')"
+    :skeletonLines="5"
+    :errorTitle="error"
+    :errorDescription="errorDescription"
+  >
+    <NeTable
+      :ariaLabel="t('standalone.real_time_monitor.applications')"
+      cardBreakpoint="sm"
+      class="mt-2"
+    >
+      <NeTableHead>
+        <NeTableHeadCell>{{ t('standalone.real_time_monitor.application') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ t('standalone.real_time_monitor.traffic') }}</NeTableHeadCell>
+      </NeTableHead>
+      <NeTableBody>
+        <NeTableRow v-if="!paginatedItems.length">
+          <NeTableCell colspan="9">
+            <NeEmptyState
+              :title="t('common.no_data_available')"
+              :icon="['fas', 'table']"
+              class="bg-white dark:bg-gray-950"
+            />
+          </NeTableCell>
+        </NeTableRow>
+        <NeTableRow v-else v-for="(item, index) in paginatedItems" :key="index">
+          <NeTableCell :data-label="t('standalone.real_time_monitor.application')">
+            {{ item.name }}
+          </NeTableCell>
+          <NeTableCell :data-label="t('standalone.real_time_monitor.traffic')">
+            {{ formatTraffic(item.value) }}
+          </NeTableCell>
+        </NeTableRow>
+      </NeTableBody>
+      <template #paginator>
+        <NePaginator
+          :current-page="currentPage"
+          :total-rows="props.topApps.length"
+          :page-size="pageSize"
+          :page-sizes="[5, 10]"
+          :nav-pagination-label="t('ne_table.pagination')"
+          :next-label="t('ne_table.go_to_next_page')"
+          :previous-label="t('ne_table.go_to_previous_page')"
+          :range-of-total-label="t('ne_table.of')"
+          :page-size-label="t('ne_table.show')"
+          @select-page="
+            (page: number) => {
+              currentPage = page
+            }"
+          @selectPageSize="
+            (size: number) => {
+              pageSize = size
+            }"
+        />
+      </template>
+    </NeTable>
+  </NeCard>
+</template>
diff --git a/src/components/standalone/monitoring/traffic/InstantHostTrafficCard.vue b/src/components/standalone/monitoring/traffic/InstantHostTrafficCard.vue
new file mode 100644
index 000000000..6b640f8bd
--- /dev/null
+++ b/src/components/standalone/monitoring/traffic/InstantHostTrafficCard.vue
@@ -0,0 +1,97 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import {
+  NeCard,
+  NeTable,
+  NeTableHead,
+  NeTableHeadCell,
+  NeTableBody,
+  NeTableRow,
+  NeTableCell,
+  NePaginator,
+  useItemPagination,
+  NeEmptyState
+} from '@nethesis/vue-components'
+import { kbpsFormat } from '@nethesis/vue-components'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { type TopHost } from '@/composables/useTopTalkers'
+
+const props = defineProps<{
+  topHosts: TopHost[]
+  loading: boolean
+  error: string
+  errorDescription: string
+}>()
+
+const { t } = useI18n()
+
+const pageSize = ref(5)
+const { currentPage, paginatedItems } = useItemPagination(() => props.topHosts, {
+  itemsPerPage: pageSize
+})
+
+function formatTraffic(value: number) {
+  return kbpsFormat((value / 1000) * 8)
+}
+</script>
+
+<template>
+  <NeCard
+    :title="t('standalone.real_time_monitor.hosts')"
+    :skeletonLines="5"
+    :errorTitle="error"
+    :errorDescription="errorDescription"
+  >
+    <NeTable :ariaLabel="t('standalone.real_time_monitor.hosts')" cardBreakpoint="sm" class="mt-2">
+      <NeTableHead>
+        <NeTableHeadCell>{{ t('standalone.real_time_monitor.host') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ t('standalone.real_time_monitor.traffic') }}</NeTableHeadCell>
+      </NeTableHead>
+      <NeTableBody>
+        <NeTableRow v-if="!paginatedItems.length">
+          <NeTableCell colspan="9">
+            <NeEmptyState
+              :title="t('common.no_data_available')"
+              :icon="['fas', 'table']"
+              class="bg-white dark:bg-gray-950"
+            />
+          </NeTableCell>
+        </NeTableRow>
+        <NeTableRow v-else v-for="(item, index) in paginatedItems" :key="index">
+          <NeTableCell :data-label="t('standalone.real_time_monitor.host')">
+            {{ item.host }}
+          </NeTableCell>
+          <NeTableCell :data-label="t('standalone.real_time_monitor.traffic')">
+            {{ formatTraffic(item.totals.bandwidth) }}
+          </NeTableCell>
+        </NeTableRow>
+      </NeTableBody>
+      <template #paginator>
+        <NePaginator
+          :current-page="currentPage"
+          :total-rows="props.topHosts.length"
+          :page-size="pageSize"
+          :page-sizes="[5, 10]"
+          :nav-pagination-label="t('ne_table.pagination')"
+          :next-label="t('ne_table.go_to_next_page')"
+          :previous-label="t('ne_table.go_to_previous_page')"
+          :range-of-total-label="t('ne_table.of')"
+          :page-size-label="t('ne_table.show')"
+          @select-page="
+            (page: number) => {
+              currentPage = page
+            }"
+          @selectPageSize="
+            (size: number) => {
+              pageSize = size
+            }"
+        />
+      </template>
+    </NeTable>
+  </NeCard>
+</template>
diff --git a/src/components/standalone/monitoring/traffic/InstantProtocolTrafficCard.vue b/src/components/standalone/monitoring/traffic/InstantProtocolTrafficCard.vue
new file mode 100644
index 000000000..60eccee2f
--- /dev/null
+++ b/src/components/standalone/monitoring/traffic/InstantProtocolTrafficCard.vue
@@ -0,0 +1,101 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import {
+  NeCard,
+  NeTable,
+  NeTableHead,
+  NeTableHeadCell,
+  NeTableBody,
+  NeTableRow,
+  NeTableCell,
+  NePaginator,
+  useItemPagination,
+  NeEmptyState
+} from '@nethesis/vue-components'
+import { kbpsFormat } from '@nethesis/vue-components'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { type TopItem } from '@/composables/useTopTalkers'
+
+const props = defineProps<{
+  topProtocols: TopItem[]
+  loading: boolean
+  error: string
+  errorDescription: string
+}>()
+
+const { t } = useI18n()
+
+const pageSize = ref(5)
+const { currentPage, paginatedItems } = useItemPagination(() => props.topProtocols, {
+  itemsPerPage: pageSize
+})
+
+function formatTraffic(value: number) {
+  return kbpsFormat((value / 1000) * 8)
+}
+</script>
+
+<template>
+  <NeCard
+    :title="t('standalone.real_time_monitor.protocols')"
+    :skeletonLines="5"
+    :errorTitle="error"
+    :errorDescription="errorDescription"
+  >
+    <NeTable
+      :ariaLabel="t('standalone.real_time_monitor.protocols')"
+      cardBreakpoint="sm"
+      class="mt-2"
+    >
+      <NeTableHead>
+        <NeTableHeadCell>{{ t('standalone.real_time_monitor.protocol') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ t('standalone.real_time_monitor.traffic') }}</NeTableHeadCell>
+      </NeTableHead>
+      <NeTableBody>
+        <NeTableRow v-if="!paginatedItems.length">
+          <NeTableCell colspan="9">
+            <NeEmptyState
+              :title="t('common.no_data_available')"
+              :icon="['fas', 'table']"
+              class="bg-white dark:bg-gray-950"
+            />
+          </NeTableCell>
+        </NeTableRow>
+        <NeTableRow v-else v-for="(item, index) in paginatedItems" :key="index">
+          <NeTableCell :data-label="t('standalone.real_time_monitor.protocol')">
+            {{ item.name }}
+          </NeTableCell>
+          <NeTableCell :data-label="t('standalone.real_time_monitor.traffic')">
+            {{ formatTraffic(item.value) }}
+          </NeTableCell>
+        </NeTableRow>
+      </NeTableBody>
+      <template #paginator>
+        <NePaginator
+          :current-page="currentPage"
+          :total-rows="props.topProtocols.length"
+          :page-size="pageSize"
+          :page-sizes="[5, 10]"
+          :nav-pagination-label="t('ne_table.pagination')"
+          :next-label="t('ne_table.go_to_next_page')"
+          :previous-label="t('ne_table.go_to_previous_page')"
+          :range-of-total-label="t('ne_table.of')"
+          :page-size-label="t('ne_table.show')"
+          @select-page="
+            (page: number) => {
+              currentPage = page
+            }"
+          @selectPageSize="
+            (size: number) => {
+              pageSize = size
+            }"
+        />
+      </template>
+    </NeTable>
+  </NeCard>
+</template>
diff --git a/src/components/standalone/dashboard/WanTrafficChart.vue b/src/components/standalone/monitoring/traffic/InterfaceTrafficChart.vue
similarity index 89%
rename from src/components/standalone/dashboard/WanTrafficChart.vue
rename to src/components/standalone/monitoring/traffic/InterfaceTrafficChart.vue
index ba3dc390c..09bc77b34 100644
--- a/src/components/standalone/dashboard/WanTrafficChart.vue
+++ b/src/components/standalone/monitoring/traffic/InterfaceTrafficChart.vue
@@ -24,16 +24,11 @@ import { GRAY_200, GRAY_700, GRAY_800 } from '@/lib/color'
 
 const themeStore = useThemeStore()
 
-const props = defineProps({
-  labels: {
-    type: Array,
-    required: true
-  },
-  datasets: {
-    type: Array,
-    required: true
-  }
-})
+const props = defineProps<{
+  labels: string[]
+  datasets: any[]
+  height?: string
+}>()
 
 const options: any = {
   // turn off animations and data parsing for performance
@@ -104,13 +99,22 @@ const options: any = {
         color: themeStore.isLight ? GRAY_700 : GRAY_200
       }
     }
-  }
+  },
+  responsive: true
 }
 
 const chartData: any = computed(() => {
   return { labels: props.labels, datasets: props.datasets }
 })
 
+const chartStyle = computed(() => {
+  return {
+    height: props.height || '',
+    width: '100%',
+    position: 'relative'
+  }
+})
+
 ChartJS.register(
   CategoryScale,
   LinearScale,
@@ -124,5 +128,5 @@ ChartJS.register(
 </script>
 
 <template>
-  <Line :data="chartData" :options="options" />
+  <Line :data="chartData" :options="options" :style="chartStyle" />
 </template>
diff --git a/src/components/standalone/dashboard/TrafficSummaryChart.vue b/src/components/standalone/monitoring/traffic/TrafficSummaryChart.vue
similarity index 75%
rename from src/components/standalone/dashboard/TrafficSummaryChart.vue
rename to src/components/standalone/monitoring/traffic/TrafficSummaryChart.vue
index 327322f56..a26ad0329 100644
--- a/src/components/standalone/dashboard/TrafficSummaryChart.vue
+++ b/src/components/standalone/monitoring/traffic/TrafficSummaryChart.vue
@@ -78,6 +78,25 @@ const options: any = {
     legend: {
       display: false
     }
+  },
+  animation: {
+    duration: 1,
+    onComplete: function ({ chart }: any) {
+      const ctx = chart.ctx
+
+      chart.config.data.datasets.forEach(function (dataset: any, i: number) {
+        const meta = chart.getDatasetMeta(i)
+
+        meta.data.forEach(function (bar: any, index: number) {
+          const data = dataset.data[index]
+
+          if (data) {
+            ctx.fillStyle = themeStore.isLight ? GRAY_700 : GRAY_200
+            ctx.fillText(byteFormat1024(Number(data)), bar.x + 5, bar.y + 5)
+          }
+        })
+      })
+    }
   }
 }
 
@@ -89,5 +108,7 @@ ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
 </script>
 
 <template>
-  <Bar :data="chartData" :options="options" />
+  <div>
+    <Bar :data="chartData" :options="options" />
+  </div>
 </template>
diff --git a/src/components/standalone/monitoring/vpn/ClientSessionsCard.vue b/src/components/standalone/monitoring/vpn/ClientSessionsCard.vue
new file mode 100644
index 000000000..33266ccf8
--- /dev/null
+++ b/src/components/standalone/monitoring/vpn/ClientSessionsCard.vue
@@ -0,0 +1,131 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import {
+  NeCard,
+  NeTable,
+  NeTableHead,
+  NeTableHeadCell,
+  NeTableBody,
+  NeTableRow,
+  NeTableCell,
+  NePaginator,
+  useItemPagination,
+  NeEmptyState,
+  formatDateLoc,
+  getAxiosErrorMessage,
+  sortByProperty
+} from '@nethesis/vue-components'
+import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { ubusCall } from '@/lib/standalone/ubus'
+
+export type ClientSession = {
+  common_name: string
+  virtual_ip_addr: string
+  remote_ip_addr: string
+  start_time: number
+  duration: number
+  bytes_received: number
+  bytes_sent: number
+}
+
+const props = defineProps<{
+  ovpnInstance: string
+  day: string
+}>()
+
+const { t } = useI18n()
+
+const clientSessions = ref<ClientSession[]>([])
+const pageSize = ref(5)
+const { currentPage, paginatedItems } = useItemPagination(() => clientSessions.value, {
+  itemsPerPage: pageSize
+})
+const loading = ref(false)
+const error = ref('')
+const errorDescription = ref('')
+
+onMounted(() => {
+  getClientSessions()
+})
+
+async function getClientSessions() {
+  loading.value = true
+  error.value = ''
+  errorDescription.value = ''
+
+  try {
+    const res = await ubusCall('ns.report', 'ovpnrw-clients-by-day', {
+      instance: props.ovpnInstance,
+      day: props.day
+    })
+    clientSessions.value = res.data.clients.sort(sortByProperty('start_time')).reverse()
+  } catch (err: any) {
+    console.error(err)
+    error.value = t('error.cannot_retrieve_vpn_client_sessions')
+    errorDescription.value = t(getAxiosErrorMessage(err))
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <NeCard :title="t('standalone.real_time_monitor.client_sessions')">
+    <NeTable
+      :ariaLabel="t('standalone.real_time_monitor.client_sessions')"
+      cardBreakpoint="sm"
+      class="mt-2"
+    >
+      <NeTableHead>
+        <NeTableHeadCell>{{ t('standalone.real_time_monitor.account') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ t('standalone.real_time_monitor.connected_since') }}</NeTableHeadCell>
+      </NeTableHead>
+      <NeTableBody>
+        <!-- empty state -->
+        <NeTableRow v-if="!clientSessions.length">
+          <NeTableCell colspan="2">
+            <NeEmptyState
+              :title="t('standalone.real_time_monitor.no_sessions')"
+              :icon="['fas', 'table']"
+              class="bg-white dark:bg-gray-950"
+            />
+          </NeTableCell>
+        </NeTableRow>
+        <NeTableRow v-else v-for="(item, index) in paginatedItems" :key="index">
+          <NeTableCell :data-label="t('standalone.real_time_monitor.account')">
+            {{ item.common_name }}
+          </NeTableCell>
+          <NeTableCell :data-label="t('standalone.real_time_monitor.connected_since')">
+            {{ formatDateLoc(new Date(Number(item.start_time) * 1000), 'PPpp') || '-' }}
+          </NeTableCell>
+        </NeTableRow>
+      </NeTableBody>
+      <template #paginator>
+        <NePaginator
+          :current-page="currentPage"
+          :total-rows="clientSessions.length"
+          :page-size="pageSize"
+          :page-sizes="[5, 10]"
+          :nav-pagination-label="t('ne_table.pagination')"
+          :next-label="t('ne_table.go_to_next_page')"
+          :previous-label="t('ne_table.go_to_previous_page')"
+          :range-of-total-label="t('ne_table.of')"
+          :page-size-label="t('ne_table.show')"
+          @select-page="
+            (page: number) => {
+              currentPage = page
+            }"
+          @selectPageSize="
+            (size: number) => {
+              pageSize = size
+            }"
+        />
+      </template>
+    </NeTable>
+  </NeCard>
+</template>
diff --git a/src/components/standalone/monitoring/vpn/ClientsTrafficByHourCard.vue b/src/components/standalone/monitoring/vpn/ClientsTrafficByHourCard.vue
new file mode 100644
index 000000000..de63f4a22
--- /dev/null
+++ b/src/components/standalone/monitoring/vpn/ClientsTrafficByHourCard.vue
@@ -0,0 +1,75 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { CYAN_500, CYAN_600 } from '@/lib/color'
+import { ubusCall } from '@/lib/standalone/ubus'
+import { useThemeStore } from '@/stores/theme'
+import { getAxiosErrorMessage, NeCard } from '@nethesis/vue-components'
+import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import TrafficByHourChart from '../TrafficByHourChart.vue'
+
+const props = defineProps<{
+  ovpnInstance: string
+  day: string
+}>()
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+
+const chartLabels = ref<number[]>([])
+const chartDatasets = ref<any[]>([])
+const loading = ref(false)
+const error = ref('')
+const errorDescription = ref('')
+
+onMounted(() => {
+  getOvpnTrafficByHour()
+})
+
+async function getOvpnTrafficByHour() {
+  loading.value = true
+  error.value = ''
+  errorDescription.value = ''
+
+  try {
+    const res = await ubusCall('ns.report', 'ovpnrw-bytes-by-hour', {
+      instance: props.ovpnInstance,
+      day: props.day
+    })
+    chartLabels.value = res.data.hours.map((data: any[]) => data[0])
+    const chartData = res.data.hours.map((data: any[]) => data[1])
+    chartDatasets.value = [
+      {
+        label: t('standalone.real_time_monitor.traffic'),
+        backgroundColor: themeStore.isLight ? CYAN_600 : CYAN_500,
+        borderColor: themeStore.isLight ? CYAN_600 : CYAN_500,
+        borderRadius: 6,
+        maxBarThickness: 25,
+        borderWidth: 1,
+        radius: 0,
+        data: chartData
+      }
+    ]
+  } catch (err: any) {
+    console.error(err)
+    error.value = t('error.cannot_retrieve_ovpn_traffic_by_hour')
+    errorDescription.value = t(getAxiosErrorMessage(err))
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <NeCard
+    :title="t('standalone.real_time_monitor.total_clients_traffic_by_hour')"
+    :loading="loading"
+    :skeletonLines="5"
+  >
+    <TrafficByHourChart :labels="chartLabels" :datasets="chartDatasets" height="25vh" />
+  </NeCard>
+</template>
diff --git a/src/components/standalone/monitoring/vpn/ConfiguredTunnelsCard.vue b/src/components/standalone/monitoring/vpn/ConfiguredTunnelsCard.vue
new file mode 100644
index 000000000..98f3fadae
--- /dev/null
+++ b/src/components/standalone/monitoring/vpn/ConfiguredTunnelsCard.vue
@@ -0,0 +1,109 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import {
+  NeCard,
+  NeTable,
+  NeTableHead,
+  NeTableHeadCell,
+  NeTableBody,
+  NeTableRow,
+  NeTableCell,
+  NePaginator,
+  useItemPagination
+} from '@nethesis/vue-components'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+interface Tunnel {
+  id: string
+  name: string
+  type: string
+  connected: boolean
+}
+
+const props = defineProps<{
+  tunnels: Tunnel[]
+  tunnelDevices: Record<string, string>
+}>()
+
+const { t } = useI18n()
+
+const pageSize = ref(5)
+const { currentPage, paginatedItems } = useItemPagination(() => props.tunnels, {
+  itemsPerPage: pageSize
+})
+</script>
+
+<template>
+  <NeCard :title="t('standalone.real_time_monitor.configured_tunnels')">
+    <NeTable
+      :ariaLabel="t('standalone.real_time_monitor.configured_tunnels')"
+      cardBreakpoint="sm"
+      class="mt-2"
+    >
+      <NeTableHead>
+        <NeTableHeadCell>{{ t('common.name') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ t('common.type') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ t('standalone.real_time_monitor.device') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ t('common.status') }}</NeTableHeadCell>
+      </NeTableHead>
+      <NeTableBody>
+        <NeTableRow v-for="(item, index) in paginatedItems" :key="index">
+          <NeTableCell :data-label="t('common.name')">
+            {{ item.name }}
+          </NeTableCell>
+          <NeTableCell :data-label="t('common.type')">
+            {{ t(`standalone.real_time_monitor.tunnel_${item.type}`) }}
+          </NeTableCell>
+          <NeTableCell :data-label="t('common.device')">
+            {{ props.tunnelDevices[item.id] ? props.tunnelDevices[item.id] : '-' }}
+          </NeTableCell>
+          <NeTableCell :data-label="t('common.status')">
+            <div class="flex items-center gap-2">
+              <font-awesome-icon
+                :icon="['fas', item.connected ? 'circle-check' : 'circle-xmark']"
+                :class="[
+                  'h-4 w-4',
+                  item.status
+                    ? 'text-green-600 dark:text-green-400'
+                    : 'text-rose-600 dark:text-rose-400'
+                ]"
+                aria-hidden="true"
+              />
+              {{
+                item.status
+                  ? t('standalone.openvpn_tunnel.connected')
+                  : t('standalone.openvpn_tunnel.not_connected')
+              }}
+            </div>
+          </NeTableCell>
+        </NeTableRow>
+      </NeTableBody>
+      <template #paginator>
+        <NePaginator
+          :current-page="currentPage"
+          :total-rows="props.tunnels.length"
+          :page-size="pageSize"
+          :page-sizes="[5, 10]"
+          :nav-pagination-label="t('ne_table.pagination')"
+          :next-label="t('ne_table.go_to_next_page')"
+          :previous-label="t('ne_table.go_to_previous_page')"
+          :range-of-total-label="t('ne_table.of')"
+          :page-size-label="t('ne_table.show')"
+          @select-page="
+            (page: number) => {
+              currentPage = page
+            }"
+          @selectPageSize="
+            (size: number) => {
+              pageSize = size
+            }"
+        />
+      </template>
+    </NeTable>
+  </NeCard>
+</template>
diff --git a/src/components/standalone/monitoring/vpn/ConnectedClientsByHourCard.vue b/src/components/standalone/monitoring/vpn/ConnectedClientsByHourCard.vue
new file mode 100644
index 000000000..6a7d5bf6f
--- /dev/null
+++ b/src/components/standalone/monitoring/vpn/ConnectedClientsByHourCard.vue
@@ -0,0 +1,71 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { NeCard, getAxiosErrorMessage } from '@nethesis/vue-components'
+import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { ubusCall } from '@/lib/standalone/ubus'
+import { useThemeStore } from '@/stores/theme'
+import { CYAN_500, CYAN_600 } from '@/lib/color'
+import ConnectedClientsByHourChart from './ConnectedClientsByHourChart.vue'
+
+const props = defineProps<{
+  ovpnInstance: string
+  day: string
+}>()
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+
+const chartLabels = ref<string[]>([])
+const chartDatasets = ref<any[]>([])
+const loading = ref(false)
+const error = ref('')
+const errorDescription = ref('')
+
+onMounted(() => {
+  getConnectedClientsByHour()
+})
+
+async function getConnectedClientsByHour() {
+  loading.value = true
+  error.value = ''
+  errorDescription.value = ''
+
+  try {
+    const res = await ubusCall('ns.report', 'ovpnrw-count-clients-by-hour', {
+      instance: props.ovpnInstance,
+      day: props.day
+    })
+    chartLabels.value = res.data.hours.map((data: any[]) => data[0])
+    const chartData = res.data.hours.map((data: any[]) => data[1])
+    chartDatasets.value = [
+      {
+        label: t('standalone.real_time_monitor.connected_clients'),
+        backgroundColor: themeStore.isLight ? CYAN_600 : CYAN_500,
+        borderColor: themeStore.isLight ? CYAN_600 : CYAN_500,
+        borderRadius: 6,
+        maxBarThickness: 25,
+        borderWidth: 1,
+        radius: 0,
+        data: chartData
+      }
+    ]
+  } catch (err: any) {
+    console.error(err)
+    error.value = t('error.cannot_retrieve_connected_client_by_hour')
+    errorDescription.value = t(getAxiosErrorMessage(err))
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <NeCard :title="t('standalone.real_time_monitor.connected_clients_by_hour')">
+    <ConnectedClientsByHourChart :labels="chartLabels" :datasets="chartDatasets" height="25vh" />
+  </NeCard>
+</template>
diff --git a/src/components/standalone/monitoring/vpn/ConnectedClientsByHourChart.vue b/src/components/standalone/monitoring/vpn/ConnectedClientsByHourChart.vue
new file mode 100644
index 000000000..d45b7faed
--- /dev/null
+++ b/src/components/standalone/monitoring/vpn/ConnectedClientsByHourChart.vue
@@ -0,0 +1,95 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale
+} from 'chart.js'
+import 'chartjs-adapter-date-fns'
+import { Bar } from 'vue-chartjs'
+import { computed } from 'vue'
+import { useThemeStore } from '@/stores/theme'
+import { GRAY_200, GRAY_700, GRAY_800 } from '@/lib/color'
+import { padStart } from 'lodash-es'
+
+const themeStore = useThemeStore()
+
+const props = defineProps<{
+  labels: string[]
+  datasets: any[]
+  height?: string
+}>()
+
+const options: any = {
+  scales: {
+    x: {
+      ticks: {
+        source: 'auto',
+        autoSkip: true,
+        color: themeStore.isLight ? GRAY_700 : GRAY_200,
+        callback: function (value: number) {
+          return `${padStart(value.toString(), 2, '0')}:00`
+        }
+      },
+      grid: {
+        color: themeStore.isLight ? GRAY_200 : GRAY_800
+      }
+    },
+    y: {
+      ticks: {
+        color: themeStore.isLight ? GRAY_700 : GRAY_200
+      },
+      grid: {
+        color: themeStore.isLight ? GRAY_200 : GRAY_800
+      }
+    }
+  },
+  plugins: {
+    decimation: {
+      enabled: true,
+      algorithm: 'min-max'
+    },
+    tooltip: {
+      callbacks: {
+        // format tooltip title
+        title: function (context: any) {
+          return `${padStart(context[0].parsed.x.toString(), 2, '0')}:00`
+        }
+      }
+    },
+    // hide legend
+    legend: {
+      display: false
+    }
+  },
+  responsive: true
+}
+
+const chartData: any = computed(() => {
+  return { labels: props.labels, datasets: props.datasets }
+})
+
+const chartStyle = computed(() => {
+  return {
+    height: props.height || '',
+    width: '100%',
+    position: 'relative'
+  }
+})
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
+</script>
+
+<template>
+  <div>
+    <Bar :data="chartData" :options="options" :style="chartStyle" />
+  </div>
+</template>
diff --git a/src/components/standalone/monitoring/vpn/CurrentlyConnectedClientsCard.vue b/src/components/standalone/monitoring/vpn/CurrentlyConnectedClientsCard.vue
new file mode 100644
index 000000000..af968f1d4
--- /dev/null
+++ b/src/components/standalone/monitoring/vpn/CurrentlyConnectedClientsCard.vue
@@ -0,0 +1,39 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import SimpleStat from '@/components/charts/SimpleStat.vue'
+import { NeCard } from '@nethesis/vue-components'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { OvpnUser } from '../VpnMonitor.vue'
+
+const props = defineProps<{
+  ovpnInstance: string
+  ovpnUsers: OvpnUser[]
+}>()
+
+const { t } = useI18n()
+
+const loading = ref(false)
+
+const connectedClientsText = computed(() => {
+  const connected = props.ovpnUsers.filter((client: any) => client.connected)
+  const totalUsers = props.ovpnUsers.length
+  return `${connected.length}/${totalUsers}`
+})
+</script>
+
+<template>
+  <NeCard
+    :title="t('standalone.real_time_monitor.connected_clients')"
+    :loading="loading"
+    :skeletonLines="2"
+  >
+    <SimpleStat class="mt-1">
+      {{ connectedClientsText }}
+    </SimpleStat>
+  </NeCard>
+</template>
diff --git a/src/components/standalone/monitoring/vpn/ServerStatusCard.vue b/src/components/standalone/monitoring/vpn/ServerStatusCard.vue
new file mode 100644
index 000000000..549ca9a3b
--- /dev/null
+++ b/src/components/standalone/monitoring/vpn/ServerStatusCard.vue
@@ -0,0 +1,31 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import SimpleStat from '@/components/charts/SimpleStat.vue'
+import type { RWServer } from '@/views/standalone/vpn/OpenvpnRoadWarriorView.vue'
+import { NeCard } from '@nethesis/vue-components'
+import { useI18n } from 'vue-i18n'
+
+defineProps<{
+  ovpnConfiguration?: RWServer
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <NeCard :title="t('common.status')">
+    <SimpleStat class="mt-1">
+      <div class="flex items-center justify-center gap-2">
+        <font-awesome-icon
+          :icon="['fas', ovpnConfiguration?.enabled ? 'circle-check' : 'circle-xmark']"
+          aria-hidden="true"
+        />
+        <span>{{ ovpnConfiguration?.enabled ? t('common.enabled') : t('common.disabled') }}</span>
+      </div>
+    </SimpleStat>
+  </NeCard>
+</template>
diff --git a/src/components/standalone/monitoring/vpn/TrafficByClientByHourCard.vue b/src/components/standalone/monitoring/vpn/TrafficByClientByHourCard.vue
new file mode 100644
index 000000000..a89d274be
--- /dev/null
+++ b/src/components/standalone/monitoring/vpn/TrafficByClientByHourCard.vue
@@ -0,0 +1,124 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { CYAN_500, CYAN_600 } from '@/lib/color'
+import { ubusCall } from '@/lib/standalone/ubus'
+import { useThemeStore } from '@/stores/theme'
+import { NeCard, getAxiosErrorMessage, NeCombobox, NeSkeleton } from '@nethesis/vue-components'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { OvpnUser } from '../VpnMonitor.vue'
+import TrafficByHourChart from '../TrafficByHourChart.vue'
+
+const props = defineProps<{
+  ovpnInstance: string
+  day: string
+  ovpnUsers: OvpnUser[]
+  loadingUsers: boolean
+}>()
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+
+const chartLabels = ref<any[]>([])
+const chartDatasets = ref<any[]>([])
+const selectedClient = ref<string>('')
+
+let loading = ref({
+  getClientTraffic: false
+})
+
+let error = ref({
+  getClientTraffic: '',
+  getClientTrafficDescription: ''
+})
+
+const clientOptions = computed(() => {
+  return props.ovpnUsers.map((user: any) => {
+    return {
+      id: user.name,
+      label: user.name,
+      description: user.description
+    }
+  })
+})
+
+watch(selectedClient, (newSelectedClient, oldSelectedClient) => {
+  if (newSelectedClient !== oldSelectedClient) {
+    loading.value.getClientTraffic = true
+    getClientTraffic()
+  }
+})
+
+watch(
+  () => props.ovpnUsers,
+  () => {
+    if (props.ovpnUsers?.length) {
+      selectedClient.value = clientOptions.value[0].id
+    }
+  },
+  { immediate: true }
+)
+
+async function getClientTraffic() {
+  loading.value.getClientTraffic = true
+  error.value.getClientTraffic = ''
+  error.value.getClientTrafficDescription = ''
+
+  try {
+    const res = await ubusCall('ns.report', 'ovpnrw-bytes-by-hour-and-user', {
+      instance: props.ovpnInstance,
+      day: props.day,
+      user: selectedClient.value
+    })
+    chartLabels.value = res.data.hours.map((data: any) => data[0])
+    const chartData = res.data.hours.map((data: any) => data[1])
+    chartDatasets.value = [
+      {
+        label: t('standalone.real_time_monitor.traffic'),
+        backgroundColor: themeStore.isLight ? CYAN_600 : CYAN_500,
+        borderColor: themeStore.isLight ? CYAN_600 : CYAN_500,
+        borderRadius: 6,
+        maxBarThickness: 25,
+        borderWidth: 1,
+        radius: 0,
+        data: chartData
+      }
+    ]
+  } catch (err: any) {
+    console.error(err)
+    error.value.getClientTraffic = t('error.cannot_retrieve_client_traffic_by_hour')
+    error.value.getClientTrafficDescription = t(getAxiosErrorMessage(err))
+  } finally {
+    loading.value.getClientTraffic = false
+  }
+}
+</script>
+
+<template>
+  <NeCard
+    :title="t('standalone.real_time_monitor.client_traffic_by_hour')"
+    :skeletonLines="9"
+    :loading="loadingUsers"
+    :errorTitle="error.getClientTraffic"
+    :errorDescription="error.getClientTrafficDescription"
+  >
+    <NeCombobox
+      v-model="selectedClient"
+      :options="clientOptions"
+      :disabled="loading.getClientTraffic"
+      :noResultsLabel="t('ne_combobox.no_results')"
+      :limitedOptionsLabel="t('ne_combobox.limited_options_label')"
+      :noOptionsLabel="t('ne_combobox.no_options_label')"
+      :selected-label="t('ne_combobox.selected')"
+      :user-input-label="t('ne_combobox.user_input_label')"
+      :optionalLabel="t('common.optional')"
+      class="mb-4 mt-2"
+    />
+    <NeSkeleton v-if="loading.getClientTraffic" :lines="7"></NeSkeleton>
+    <TrafficByHourChart v-else :labels="chartLabels" :datasets="chartDatasets" height="25vh" />
+  </NeCard>
+</template>
diff --git a/src/components/standalone/report/ReportContent.vue b/src/components/standalone/report/ReportContent.vue
deleted file mode 100644
index 828dadb0f..000000000
--- a/src/components/standalone/report/ReportContent.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<!--
-  Copyright (C) 2024 Nethesis S.r.l.
-  SPDX-License-Identifier: GPL-3.0-or-later
--->
-
-<script lang="ts" setup>
-import { useI18n } from 'vue-i18n'
-import { NeButton, NeTooltip } from '@nethesis/vue-components'
-import FormLayout from '@/components/standalone/FormLayout.vue'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { isStandaloneMode } from '@/lib/config'
-
-const { t } = useI18n()
-
-function goToReport() {
-  window.open('http://' + window.location.hostname + ':19999')
-}
-</script>
-
-<template>
-  <div>
-    <FormLayout
-      :description="t('standalone.report.real_time_report.description')"
-      class="max-w-12xl"
-    >
-      <div class="mr-auto self-start">
-        <NeButton v-if="isStandaloneMode()" kind="secondary" size="lg" @click="goToReport()">
-          <template #prefix>
-            <FontAwesomeIcon :icon="['fa', 'arrow-up-right-from-square']" />
-          </template>
-          {{ t('standalone.report.real_time_report.open_report') }}
-        </NeButton>
-        <!-- cannot open report from a controlled unit -->
-        <NeTooltip v-else triggerEvent="mouseenter focus">
-          <template #trigger>
-            <NeButton kind="secondary" size="lg" disabled>
-              <template #prefix>
-                <FontAwesomeIcon :icon="['fa', 'arrow-up-right-from-square']" />
-              </template>
-              {{ t('standalone.report.real_time_report.open_report') }}
-            </NeButton>
-          </template>
-          <template #content>
-            {{ t('standalone.report.real_time_report.cannot_open_report_from_controller') }}
-          </template>
-        </NeTooltip>
-      </div>
-    </FormLayout>
-  </div>
-</template>
diff --git a/src/composables/useTopTalkers.ts b/src/composables/useTopTalkers.ts
new file mode 100644
index 000000000..4926c71d3
--- /dev/null
+++ b/src/composables/useTopTalkers.ts
@@ -0,0 +1,86 @@
+//  Copyright (C) 2024 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { onMounted, onUnmounted, ref, toValue, type MaybeRefOrGetter } from 'vue'
+import { ubusCall } from '@/lib/standalone/ubus'
+import { useI18n } from 'vue-i18n'
+import { getAxiosErrorMessage } from '@nethesis/vue-components'
+
+export type TopHost = {
+  host: string
+  ip: string
+  mac: string
+  totals: TopHostTotal
+}
+
+type TopHostTotal = {
+  bandwidth: number
+  download: number
+  packets: number
+  upload: number
+}
+
+export type TopItem = {
+  name: string
+  value: number
+}
+
+export function useTopTalkers(limit: MaybeRefOrGetter<number> = 20) {
+  // random refresh interval between 20 and 30 seconds
+  const REFRESH_INTERVAL = 20000 + Math.random() * 10 * 1000
+  const { t } = useI18n()
+  const intervalId = ref(0)
+  const topHosts = ref<TopHost[]>([])
+  const topApps = ref<TopItem[]>([])
+  const topProtocols = ref<TopItem[]>([])
+  const loadingTopTalkers = ref(false)
+  const errorTopTalkers = ref('')
+  const errorTopTalkersDescription = ref('')
+
+  onMounted(() => {
+    getTopTalkers()
+
+    // periodically reload data
+    intervalId.value = setInterval(getTopTalkers, REFRESH_INTERVAL)
+  })
+
+  onUnmounted(() => {
+    if (intervalId.value) {
+      clearInterval(intervalId.value)
+    }
+  })
+
+  async function getTopTalkers() {
+    errorTopTalkers.value = ''
+    errorTopTalkersDescription.value = ''
+
+    // show skeleton only the first time
+    if (!intervalId.value) {
+      loadingTopTalkers.value = true
+    }
+
+    try {
+      const res = await ubusCall('ns.talkers', 'list', {
+        limit: toValue(limit)
+      })
+      topApps.value = res.data.talkers.top_apps
+      topHosts.value = res.data.talkers.top_hosts
+      topProtocols.value = res.data.talkers.top_protocols
+    } catch (err: any) {
+      console.error(err)
+      errorTopTalkers.value = t('error.cannot_retrieve_talkers_list')
+      errorTopTalkersDescription.value = t(getAxiosErrorMessage(err))
+    } finally {
+      loadingTopTalkers.value = false
+    }
+  }
+
+  return {
+    topApps,
+    topHosts,
+    topProtocols,
+    loadingTopTalkers,
+    errorTopTalkers,
+    errorTopTalkersDescription
+  }
+}
diff --git a/src/composables/useTrafficSummary.ts b/src/composables/useTrafficSummary.ts
index 957e10fd7..ab1743698 100644
--- a/src/composables/useTrafficSummary.ts
+++ b/src/composables/useTrafficSummary.ts
@@ -1,7 +1,7 @@
 //  Copyright (C) 2024 Nethesis S.r.l.
 //  SPDX-License-Identifier: GPL-3.0-or-later
 
-import { onMounted, onUnmounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { ubusCall } from '@/lib/standalone/ubus'
 import { padStart, upperFirst } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
@@ -10,54 +10,46 @@ import { useThemeStore } from '@/stores/theme'
 import { CYAN_500, CYAN_600 } from '@/lib/color'
 
 export function useTrafficSummary() {
-  // random refresh interval between 20 and 30 seconds
-  const REFRESH_INTERVAL = 20000 + Math.random() * 10 * 1000
   const CHART_NUM_ITEMS = 5
   const { t } = useI18n()
   const themeStore = useThemeStore()
-  const intervalId = ref(0)
-  const clientsLabels = ref<any>([])
+  const clientsLabels = ref<string[]>([])
   const clientsDatasets = ref<any>([])
-  const protocolsLabels = ref<any[]>([])
+  const protocolsLabels = ref<string[]>([])
   const protocolsDatasets = ref<any[]>([])
-  const appsLabels = ref<any>([])
+  const remoteHostsLabels = ref<string[]>([])
+  const remoteHostsDatasets = ref<any[]>([])
+  const appsLabels = ref<string[]>([])
   const appsDatasets = ref<any>([])
+  const hoursLabels = ref<string[]>([])
+  const hoursDatasets = ref<any[]>([])
+  const totalTraffic = ref(0)
   const loadingTrafficSummary = ref(false)
-  const errorTitle = ref('')
-  const errorDescription = ref('')
+  const trafficSummaryError = ref('')
+  const trafficSummaryErrorDescription = ref('')
 
   const datasetProps = {
-    label: t('standalone.dashboard.traffic'),
+    label: t('standalone.real_time_monitor.traffic'),
     backgroundColor: themeStore.isLight ? CYAN_600 : CYAN_500,
+    borderColor: themeStore.isLight ? CYAN_600 : CYAN_500,
     borderRadius: 6,
-    maxBarThickness: 25
+    maxBarThickness: 25,
+    borderWidth: 1,
+    radius: 0
   }
 
   onMounted(() => {
     getTrafficSummary()
-
-    // periodically reload data
-    intervalId.value = setInterval(getTrafficSummary, REFRESH_INTERVAL)
-  })
-
-  onUnmounted(() => {
-    if (intervalId.value) {
-      clearInterval(intervalId.value)
-    }
   })
 
   async function getTrafficSummary() {
-    errorTitle.value = ''
-    errorDescription.value = ''
+    trafficSummaryError.value = ''
+    trafficSummaryErrorDescription.value = ''
     const today = new Date()
     const year = today.getFullYear()
     const month = today.getMonth() + 1
     const day = today.getDate()
-
-    // show skeleton only the first time
-    if (!intervalId.value) {
-      loadingTrafficSummary.value = true
-    }
+    loadingTrafficSummary.value = true
 
     try {
       const res = await ubusCall('ns.dpireport', 'summary', {
@@ -65,6 +57,7 @@ export function useTrafficSummary() {
         month: padStart(month.toString(), 2, '0'),
         day: day.toString()
       })
+      totalTraffic.value = res.data.total
 
       // protocols chart
 
@@ -125,10 +118,36 @@ export function useTrafficSummary() {
           data: clientsChartData
         }
       ]
+
+      // hosts chart
+
+      remoteHostsLabels.value = res.data.host
+        .slice(0, CHART_NUM_ITEMS)
+        .map((host: any[]) => host[0])
+
+      const hostsChartData = res.data.host.slice(0, CHART_NUM_ITEMS).map((host: any[]) => host[1])
+
+      remoteHostsDatasets.value = [
+        {
+          ...datasetProps,
+          data: hostsChartData
+        }
+      ]
+
+      // hours chart
+
+      hoursLabels.value = res.data.hours.map((host: any[]) => host[0])
+      const hoursChartData = res.data.hours.map((host: any[]) => host[1])
+      hoursDatasets.value = [
+        {
+          ...datasetProps,
+          data: hoursChartData
+        }
+      ]
     } catch (err: any) {
       console.error(err)
-      errorTitle.value = t('error.cannot_retrieve_traffic_summary')
-      errorDescription.value = t(getAxiosErrorMessage(err))
+      trafficSummaryError.value = t('error.cannot_retrieve_traffic_summary')
+      trafficSummaryErrorDescription.value = t(getAxiosErrorMessage(err))
     } finally {
       loadingTrafficSummary.value = false
     }
@@ -141,8 +160,13 @@ export function useTrafficSummary() {
     protocolsDatasets,
     appsLabels,
     appsDatasets,
+    remoteHostsLabels,
+    remoteHostsDatasets,
+    hoursLabels,
+    hoursDatasets,
+    totalTraffic,
     loadingTrafficSummary,
-    errorTitle,
-    errorDescription
+    trafficSummaryError,
+    trafficSummaryErrorDescription
   }
 }
diff --git a/src/lib/color.ts b/src/lib/color.ts
index 7723d8e42..598d71a7b 100644
--- a/src/lib/color.ts
+++ b/src/lib/color.ts
@@ -2,10 +2,30 @@
 //  SPDX-License-Identifier: GPL-3.0-or-later
 
 // Use these color constants only where Tailwind classes cannot be used
+// TODO use Tailwind color variables instead of these constants
+export const CYAN_300 = '#67e8f9'
 export const CYAN_500 = '#06b6d4'
 export const CYAN_600 = '#0891b2'
+export const CYAN_800 = '#155e75'
 export const INDIGO_400 = '#818cf8'
+export const INDIGO_500 = '#6366f1'
 export const INDIGO_600 = '#4f46e5'
+export const GRAY_50 = '#f9fafb'
 export const GRAY_200 = '#e5e7eb'
+export const GRAY_400 = '#9ca3af'
+export const GRAY_500 = '#6b7280'
 export const GRAY_700 = '#374151'
 export const GRAY_800 = '#1f2937'
+export const GRAY_900 = '#111827'
+export const EMERALD_500 = '#10b981'
+export const EMERALD_600 = '#059669'
+export const VIOLET_500 = '#8b5cf6'
+export const VIOLET_600 = '#7c3aed'
+export const AMBER_500 = '#f59e0b'
+export const AMBER_600 = '#d97706'
+export const ROSE_500 = '#f43f5e'
+export const ROSE_600 = '#e11d48'
+export const LIME_500 = '#84cc16'
+export const LIME_600 = '#65a30d'
+export const FUCHSIA_500 = '#d946ef'
+export const FUCHSIA_600 = '#c026d3'
diff --git a/src/router/index.ts b/src/router/index.ts
index c8c5ba3d2..5e0ead40e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -166,19 +166,19 @@ const standaloneRoutes = [
     component: () => import('../views/standalone/LogsView.vue')
   },
   {
-    path: 'report',
-    name: 'Report',
-    component: () => import('../views/standalone/ReportView.vue')
+    path: 'monitoring/real-time-monitoring',
+    name: 'RealTimeMonitoring',
+    component: () => import('../views/standalone/monitoring/RealTimeMonitoringView.vue')
+  },
+  {
+    path: 'monitoring/ping-latency-monitor',
+    name: 'PingLatencyMonitor',
+    component: () => import('../views/standalone/monitoring/PingLatencyMonitorView.vue')
   },
   {
     path: 'account',
     name: 'Account',
     component: () => import('../views/standalone/AccountView.vue')
-  },
-  {
-    path: 'report',
-    name: 'Report',
-    component: () => import('../views/standalone/ReportView.vue')
   }
 ]
 
diff --git a/src/views/standalone/ReportView.vue b/src/views/standalone/ReportView.vue
deleted file mode 100644
index 1f80d5799..000000000
--- a/src/views/standalone/ReportView.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<!--
-  Copyright (C) 2024 Nethesis S.r.l.
-  SPDX-License-Identifier: GPL-3.0-or-later
--->
-
-<script lang="ts" setup>
-import { NeHeading, NeTabs } from '@nethesis/vue-components'
-import { useI18n } from 'vue-i18n'
-import { onMounted, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import ReportContent from '@/components/standalone/report/ReportContent.vue'
-import PingContent from '@/components/standalone/report/PingContent.vue'
-import { useTabs } from '@/composables/useTabs'
-
-const { t } = useI18n()
-const route = useRoute()
-const router = useRouter()
-const { tabs, selectedTab } = useTabs([
-  {
-    name: 'tab-report',
-    label: t('standalone.report.tabs.real_time_report')
-  },
-  {
-    name: 'tab-ping',
-    label: t('standalone.report.tabs.ping_latency_monitor')
-  }
-])
-
-onMounted(() => {
-  selectedTab.value = (route.query.tab as string) ?? tabs.value[0].name
-})
-
-watch(selectedTab, () => {
-  router.push({ path: route.path, query: { tab: selectedTab.value } })
-})
-</script>
-
-<template>
-  <NeHeading tag="h3" class="mb-7">{{ t('standalone.report.title') }}</NeHeading>
-  <div class="flex flex-col gap-y-6">
-    <NeTabs
-      :selected="selectedTab"
-      :srSelectTabLabel="t('ne_tabs.select_a_tab')"
-      :srTabsLabel="t('ne_tabs.tabs')"
-      :tabs="tabs"
-      class="mb-8"
-      @selectTab="selectedTab = $event"
-    />
-    <ReportContent v-if="selectedTab == 'tab-report'" />
-    <PingContent v-if="selectedTab == 'tab-ping'" />
-  </div>
-</template>
diff --git a/src/views/standalone/StandaloneDashboardView.vue b/src/views/standalone/StandaloneDashboardView.vue
index 70fd21bb1..9cb2c8466 100644
--- a/src/views/standalone/StandaloneDashboardView.vue
+++ b/src/views/standalone/StandaloneDashboardView.vue
@@ -4,14 +4,10 @@
 -->
 
 <script setup lang="ts">
-import { NeCard, NeLink, NeHeading } from '@nethesis/vue-components'
+import { NeLink, NeHeading } from '@nethesis/vue-components'
 import { useI18n } from 'vue-i18n'
-import RealTimeTrafficCard from '@/components/standalone/dashboard/RealTimeTrafficCard.vue'
 import SystemInfoCard from '@/components/standalone/dashboard/SystemInfoCard.vue'
 import ServiceCard from '@/components/standalone/dashboard/ServiceCard.vue'
-import TrafficSummaryChart from '@/components/standalone/dashboard/TrafficSummaryChart.vue'
-import WanTrafficCard from '@/components/standalone/dashboard/WanTrafficCard.vue'
-import { useTrafficSummary } from '@/composables/useTrafficSummary'
 import { getStandaloneRoutePrefix } from '@/lib/router'
 import router from '@/router'
 import { useRoute } from 'vue-router'
@@ -20,17 +16,6 @@ import InternetConnectionCard from '@/components/standalone/dashboard/InternetCo
 
 const { t } = useI18n()
 const route = useRoute()
-const {
-  clientsLabels,
-  clientsDatasets,
-  protocolsLabels,
-  protocolsDatasets,
-  appsLabels,
-  appsDatasets,
-  loadingTrafficSummary,
-  errorTitle,
-  errorDescription
-} = useTrafficSummary()
 
 function goTo(path: string) {
   router.push(`${getStandaloneRoutePrefix(route)}${path}`)
@@ -131,70 +116,5 @@ function goTo(path: string) {
       :title="t('standalone.dashboard.known_hosts')"
       :icon="['fas', 'circle-info']"
     />
-    <!-- column spacer (only from 3xl screen) -->
-    <div class="col-span-1 hidden 3xl:block"></div>
-    <WanTrafficCard class="sm:col-span-2 3xl:col-span-3" />
-    <!-- realtime traffic -->
-    <RealTimeTrafficCard class="sm:col-span-2 3xl:col-span-3" />
-    <!-- top hosts -->
-    <NeCard
-      :title="t('standalone.dashboard.today_top_hosts')"
-      :description="
-        clientsDatasets[0]?.data.length
-          ? t('standalone.dashboard.today_top_hosts_description')
-          : t('standalone.dashboard.no_hosts')
-      "
-      :skeletonLines="6"
-      :loading="loadingTrafficSummary"
-      :errorTitle="errorTitle"
-      :errorDescription="errorDescription"
-      class="sm:col-span-2 xl:row-span-2"
-    >
-      <TrafficSummaryChart
-        v-if="clientsDatasets[0]?.data.length"
-        :labels="clientsLabels"
-        :datasets="clientsDatasets"
-      />
-    </NeCard>
-    <!-- top applications -->
-    <NeCard
-      :title="t('standalone.dashboard.today_top_applications')"
-      :description="
-        appsDatasets[0]?.data.length
-          ? t('standalone.dashboard.today_top_applications_description')
-          : t('standalone.dashboard.no_applications')
-      "
-      :skeletonLines="6"
-      :loading="loadingTrafficSummary"
-      :errorTitle="errorTitle"
-      :errorDescription="errorDescription"
-      class="sm:col-span-2 xl:row-span-2"
-    >
-      <TrafficSummaryChart
-        v-if="appsDatasets[0]?.data.length"
-        :labels="appsLabels"
-        :datasets="appsDatasets"
-      />
-    </NeCard>
-    <!-- top protocols -->
-    <NeCard
-      :title="t('standalone.dashboard.today_top_protocols')"
-      :description="
-        protocolsDatasets[0]?.data.length
-          ? t('standalone.dashboard.today_top_protocols_description')
-          : t('standalone.dashboard.no_protocols')
-      "
-      :skeletonLines="6"
-      :loading="loadingTrafficSummary"
-      :errorTitle="errorTitle"
-      :errorDescription="errorDescription"
-      class="sm:col-span-2 xl:row-span-2"
-    >
-      <TrafficSummaryChart
-        v-if="protocolsDatasets[0]?.data.length"
-        :labels="protocolsLabels"
-        :datasets="protocolsDatasets"
-      />
-    </NeCard>
   </div>
 </template>
diff --git a/src/components/standalone/report/PingContent.vue b/src/views/standalone/monitoring/PingLatencyMonitorView.vue
similarity index 90%
rename from src/components/standalone/report/PingContent.vue
rename to src/views/standalone/monitoring/PingLatencyMonitorView.vue
index 2ce6e35bc..8b8353d1f 100644
--- a/src/components/standalone/report/PingContent.vue
+++ b/src/views/standalone/monitoring/PingLatencyMonitorView.vue
@@ -11,7 +11,8 @@ import {
   NeInlineNotification,
   NeButton,
   NeSkeleton,
-  getAxiosErrorMessage
+  getAxiosErrorMessage,
+  NeHeading
 } from '@nethesis/vue-components'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import NeMultiTextInput from '@/components/standalone/NeMultiTextInput.vue'
@@ -105,6 +106,12 @@ function save() {
 
 <template>
   <div>
+    <NeHeading tag="h3" class="mb-7">
+      {{ t('standalone.ping_latency_monitor.title') }}
+    </NeHeading>
+    <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" />
     <NeInlineNotification
       v-if="!loading && errorConfiguration.notificationTitle"
@@ -118,18 +125,11 @@ function save() {
       </template>
     </NeInlineNotification>
     <template v-if="!loading && !errorConfiguration.notificationTitle">
-      <div class="flex">
-        <div>
-          <p class="max-w-2xl text-sm font-normal text-gray-500 dark:text-gray-400">
-            {{ t('standalone.report.ping_latency_monitor.description') }}
-          </p>
-        </div>
-      </div>
-      <div class="mt-6 max-w-xl">
+      <div class="max-w-md">
         <NeMultiTextInput
           v-model="formPing.hostList"
-          :title="t('standalone.report.ping_latency_monitor.host_to_monitor')"
-          :add-item-label="t('standalone.report.ping_latency_monitor.add_host')"
+          :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"
diff --git a/src/views/standalone/monitoring/RealTimeMonitoringView.vue b/src/views/standalone/monitoring/RealTimeMonitoringView.vue
new file mode 100644
index 000000000..f8c001a46
--- /dev/null
+++ b/src/views/standalone/monitoring/RealTimeMonitoringView.vue
@@ -0,0 +1,165 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+import {
+  getAxiosErrorMessage,
+  NeButton,
+  NeHeading,
+  NeTabs,
+  NeTooltip
+} from '@nethesis/vue-components'
+import { useTabs } from '@/composables/useTabs'
+import TrafficMonitor from '@/components/standalone/monitoring/TrafficMonitor.vue'
+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'
+
+const { t } = useI18n()
+
+const { tabs, selectedTab } = useTabs([
+  {
+    name: 'traffic',
+    label: t('standalone.real_time_monitor.traffic')
+  },
+  {
+    name: 'connectivity',
+    label: t('standalone.real_time_monitor.connectivity')
+  },
+  {
+    name: 'vpn',
+    label: t('standalone.real_time_monitor.vpn')
+  },
+  {
+    name: 'security',
+    label: t('standalone.real_time_monitor.security')
+  }
+])
+
+const isLinkedToController = ref(false)
+const controllerUrl = ref('')
+
+let loading = ref({
+  getControllerSettings: false
+})
+
+let error = ref({
+  getControllerSettings: '',
+  getControllerSettingsDescription: ''
+})
+
+onMounted(() => {
+  getControllerSettings()
+})
+
+async function getControllerSettings() {
+  loading.value.getControllerSettings = true
+  error.value.getControllerSettings = ''
+  error.value.getControllerSettingsDescription = ''
+
+  try {
+    const res = await ubusCall('ns.plug', 'status')
+
+    if (res.data.server) {
+      isLinkedToController.value = true
+      controllerUrl.value = res.data.server
+    } else {
+      isLinkedToController.value = false
+    }
+  } catch (err: any) {
+    console.error(err)
+    error.value.getControllerSettings = t('error.cannot_fetch_controller_registration_status')
+    error.value.getControllerSettingsDescription = t(getAxiosErrorMessage(err))
+  } finally {
+    loading.value.getControllerSettings = false
+  }
+}
+
+function openNetdata() {
+  window.open('http://' + window.location.hostname + ':19999')
+}
+
+function openGrafana() {
+  window.open(controllerUrl.value + '/grafana')
+}
+</script>
+<template>
+  <div>
+    <div class="mb-8 flex flex-col justify-between gap-6 md:flex-row md:items-center">
+      <NeHeading tag="h3">
+        {{ 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 triggerEvent="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"
+          kind="secondary"
+          size="lg"
+          :disabled="loading.getControllerSettings"
+          @click="openGrafana()"
+        >
+          <template #prefix>
+            <FontAwesomeIcon :icon="['fa', 'arrow-up-right-from-square']" />
+          </template>
+          {{ t('standalone.real_time_monitor.view_all_on_grafana') }}
+        </NeButton>
+        <!-- cannot open grafana if unit is not linked to a controller -->
+        <NeTooltip v-else triggerEvent="mouseenter focus" placement="bottom">
+          <template #trigger>
+            <NeButton kind="secondary" size="lg" disabled>
+              <template #prefix>
+                <FontAwesomeIcon :icon="['fa', 'arrow-up-right-from-square']" />
+              </template>
+              {{ t('standalone.real_time_monitor.view_all_on_grafana') }}
+            </NeButton>
+          </template>
+          <template #content>
+            {{ t('standalone.real_time_monitor.cannot_open_grafana_message') }}
+          </template>
+        </NeTooltip>
+      </div>
+    </div>
+    <p class="mb-4 max-w-2xl text-gray-500 dark:text-gray-400">
+      {{ t('standalone.real_time_monitor.description') }}
+    </p>
+    <NeTabs
+      :tabs="tabs"
+      :selected="selectedTab"
+      :srTabsLabel="t('ne_tabs.tabs')"
+      :srSelectTabLabel="t('ne_tabs.select_a_tab')"
+      @selectTab="selectedTab = $event"
+      class="mb-8"
+    />
+    <TrafficMonitor v-if="selectedTab === 'traffic'" />
+    <ConnectivityMonitor v-else-if="selectedTab === 'connectivity'" />
+    <VpnMonitor v-else-if="selectedTab === 'vpn'" />
+    <SecurityMonitor v-else-if="selectedTab === 'security'" />
+  </div>
+</template>