diff --git a/src/components/charts/BasicBarChart.vue b/src/components/charts/BasicBarChart.vue
index 244db10b0..7bdb8869d 100644
--- a/src/components/charts/BasicBarChart.vue
+++ b/src/components/charts/BasicBarChart.vue
@@ -31,7 +31,7 @@ const props = withDefaults(
     showValuesOnBars?: boolean
     byteFormat?: boolean
   }>(),
-  { isHorizontal: false, showLegend: false, showValuesOnBars: true, byteFormat: false }
+  { height: '', isHorizontal: false, showLegend: false, showValuesOnBars: true, byteFormat: false }
 )
 
 const options: any = {
diff --git a/src/components/charts/BasicPieChart.vue b/src/components/charts/BasicPieChart.vue
index 3894f9f77..005ed8ac2 100644
--- a/src/components/charts/BasicPieChart.vue
+++ b/src/components/charts/BasicPieChart.vue
@@ -14,12 +14,15 @@ import { byteFormat1024 } from '@nethesis/vue-components'
 
 const themeStore = useThemeStore()
 
-const props = defineProps<{
-  labels: string[]
-  datasets: any[]
-  height?: string
-  byteFormat?: boolean
-}>()
+const props = withDefaults(
+  defineProps<{
+    labels: string[]
+    datasets: any[]
+    height?: string
+    byteFormat?: boolean
+  }>(),
+  { height: '', byteFormat: false }
+)
 
 const options: any = {
   responsive: true,
diff --git a/src/components/charts/TimeLineChart.vue b/src/components/charts/TimeLineChart.vue
new file mode 100644
index 000000000..ba50140cd
--- /dev/null
+++ b/src/components/charts/TimeLineChart.vue
@@ -0,0 +1,151 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  TimeScale
+} from 'chart.js'
+import 'chartjs-adapter-date-fns'
+import { Line } from 'vue-chartjs'
+import { computed } from 'vue'
+import { useThemeStore } from '@/stores/theme'
+import { formatDateLoc, kbpsFormat } from '@nethesis/vue-components'
+import { GRAY_200, GRAY_700, GRAY_800 } from '@/lib/color'
+
+const themeStore = useThemeStore()
+
+const props = withDefaults(
+  defineProps<{
+    labels: number[]
+    datasets: any[]
+    height?: string
+    showLegend?: boolean
+    useKbpsFormat?: boolean
+    datasetSuffix?: string
+  }>(),
+  { height: '', showLegend: true, useKbpsFormat: false, datasetSuffix: '' }
+)
+
+const options: any = {
+  // turn off animations and data parsing for performance
+  animation: false,
+  interaction: {
+    mode: 'nearest',
+    axis: 'x',
+    intersect: false
+  },
+  scales: {
+    x: {
+      type: 'time',
+      time: {
+        unit: 'minute'
+      },
+      ticks: {
+        source: 'auto',
+        autoSkip: true,
+        color: themeStore.isLight ? GRAY_700 : GRAY_200,
+        callback: function (value: number) {
+          return formatDateLoc(value, 'HH:mm')
+        }
+      },
+      grid: {
+        color: themeStore.isLight ? GRAY_200 : GRAY_800
+      }
+    },
+    y: {
+      ticks: {
+        callback: function (value: number) {
+          if (props.useKbpsFormat) {
+            // format traffic on chart ticks
+            return kbpsFormat(Math.abs(value))
+          } else if (props.datasetSuffix) {
+            // add suffix to y axis ticks
+            return `${value.toLocaleString()} ${props.datasetSuffix}`
+          } else {
+            return value.toLocaleString()
+          }
+        },
+        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) {
+            if (props.useKbpsFormat) {
+              label += kbpsFormat(Math.abs(context.parsed.y))
+            } else if (props.datasetSuffix) {
+              label += `${context.parsed.y.toLocaleString()} ${props.datasetSuffix}`
+            } else {
+              label += context.parsed.y.toLocaleString()
+            }
+          }
+          return label
+        },
+        // format tooltip title
+        title: function (context: any) {
+          return formatDateLoc(context[0].parsed.x, 'HH:mm:ss')
+        }
+      }
+    },
+    legend: {
+      display: props.showLegend,
+      labels: {
+        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,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  TimeScale
+)
+</script>
+
+<template>
+  <Line :data="chartData" :options="options" :style="chartStyle" />
+</template>
diff --git a/src/components/standalone/monitoring/ConnectivityMonitor.vue b/src/components/standalone/monitoring/ConnectivityMonitor.vue
index e4fe0b005..99a46048c 100644
--- a/src/components/standalone/monitoring/ConnectivityMonitor.vue
+++ b/src/components/standalone/monitoring/ConnectivityMonitor.vue
@@ -7,6 +7,7 @@
 import { ubusCall } from '@/lib/standalone/ubus'
 import {
   getAxiosErrorMessage,
+  NeButton,
   NeCard,
   NeEmptyState,
   NeInlineNotification,
@@ -15,13 +16,17 @@ import {
 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'
 import { useNetworkDevices } from '@/composables/useNetworkDevices'
 import { getIpv4Addresses, getIpv6Addresses, getName, isDeviceUp } from '@/lib/standalone/network'
 import { useUciNetworkConfig } from '@/composables/useUciNetworkConfig'
+import InterfaceTrafficCard from './connectivity/InterfaceTrafficCard.vue'
+import { useLatencyAndQualityReport } from '@/composables/useLatencyAndQualityReport'
+import TimeLineChart from '@/components/charts/TimeLineChart.vue'
+import { useRouter } from 'vue-router'
+import { getStandaloneRoutePrefix } from '@/lib/router'
 
 export type Wan = {
   iface: string
@@ -46,11 +51,19 @@ const {
   errorNetworkConfig,
   errorNetworkConfigDetails
 } = useUciNetworkConfig()
+const router = useRouter()
 
 const wans = ref<Wan[]>([])
 const mwanEvents = ref<Record<string, any[]>>({})
 const mwanPolicies = ref<Policy[]>([])
 
+const {
+  latencyAndQualityCharts,
+  loadingLatencyAndQualityReport,
+  errorLatencyAndQualityReport,
+  errorLatencyAndQualityReportDetails
+} = useLatencyAndQualityReport()
+
 let loading = ref({
   listWans: false,
   getMwanReport: false,
@@ -269,6 +282,19 @@ async function getMwanPolicies() {
         {{ errorNetworkConfigDetails }}
       </template>
     </NeInlineNotification>
+    <!-- latencyAndQualityReport error notification -->
+    <NeInlineNotification
+      v-if="errorLatencyAndQualityReport"
+      kind="error"
+      :title="t('error.cannot_retrieve_latency_and_quality_report')"
+      :description="errorLatencyAndQualityReport"
+      :closeAriaLabel="t('common.close')"
+      class="mb-4"
+    >
+      <template v-if="errorLatencyAndQualityReportDetails" #details>
+        {{ errorLatencyAndQualityReportDetails }}
+      </template>
+    </NeInlineNotification>
     <div class="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-12">
       <!-- skeleton -->
       <template v-if="loadingData">
@@ -320,6 +346,69 @@ async function getMwanPolicies() {
           :device="wan.device"
           class="sm:col-span-12 xl:col-span-6 3xl:col-span-4 7xl:col-span-3"
         />
+        <!-- latency and quality -->
+        <NeCard
+          v-if="loadingLatencyAndQualityReport"
+          loading
+          :skeletonLines="7"
+          class="sm:col-span-12 xl:col-span-6 3xl:col-span-4 7xl:col-span-3"
+        ></NeCard>
+        <NeCard
+          v-else-if="latencyAndQualityCharts.length == 0"
+          :title="t('standalone.real_time_monitor.latency_and_packet_delivery_rate')"
+          class="sm:col-span-12 xl:col-span-6 3xl:col-span-4 7xl:col-span-3"
+        >
+          <NeEmptyState
+            :title="t('standalone.real_time_monitor.no_hosts_configured_for_monitoring')"
+            :icon="['fas', 'chart-line']"
+            class="bg-white dark:bg-gray-950"
+          >
+            <NeButton
+              kind="secondary"
+              @click="
+                () => {
+                  router.push(`${getStandaloneRoutePrefix()}/monitoring/ping-latency-monitor`)
+                }
+              "
+            >
+              <template #prefix>
+                <font-awesome-icon
+                  :icon="['fas', 'arrow-right']"
+                  class="h-4 w-4"
+                  aria-hidden="true"
+                />
+              </template>
+              {{ t('common.go_to_page', { page: t('standalone.ping_latency_monitor.title') }) }}
+            </NeButton>
+          </NeEmptyState>
+        </NeCard>
+        <template v-else v-for="(chart, index) in latencyAndQualityCharts" :key="index">
+          <NeCard
+            :title="
+              chart.type === 'latency'
+                ? t('standalone.real_time_monitor.ping_host_latency', { pingHost: chart.pingHost })
+                : t('standalone.real_time_monitor.ping_host_packet_delivery_rate', {
+                    pingHost: chart.pingHost
+                  })
+            "
+            class="sm:col-span-12 xl:col-span-6 3xl:col-span-4 7xl:col-span-3"
+          >
+            <TimeLineChart
+              v-if="chart.type === 'latency'"
+              :labels="chart.labels"
+              :datasets="chart.datasets"
+              datasetSuffix="ms"
+              height="30vh"
+            />
+            <TimeLineChart
+              v-else-if="chart.type === 'quality'"
+              :labels="chart.labels"
+              :datasets="chart.datasets"
+              datasetSuffix="%"
+              height="30vh"
+            />
+          </NeCard>
+        </template>
       </template>
     </div>
   </div>
diff --git a/src/composables/useLatencyAndQualityReport.ts b/src/composables/useLatencyAndQualityReport.ts
new file mode 100644
index 000000000..5fa613f85
--- /dev/null
+++ b/src/composables/useLatencyAndQualityReport.ts
@@ -0,0 +1,174 @@
+//  Copyright (C) 2024 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { onMounted, onUnmounted, ref } from 'vue'
+import { ubusCall } from '@/lib/standalone/ubus'
+import { useI18n } from 'vue-i18n'
+import { getAxiosErrorMessage } from '@nethesis/vue-components'
+import { useThemeStore } from '@/stores/theme'
+import { AMBER_500, AMBER_600, CYAN_500, CYAN_600, EMERALD_500, EMERALD_600 } from '@/lib/color'
+
+export type LatencyOrQualityChart = {
+  pingHost: string
+  type: 'latency' | 'quality'
+  labels: number[] // timestamps
+  datasets: LatencyOrQualityDataset[]
+}
+
+type LatencyAndQualityData = {
+  latency: ChartLabelsAndData
+  quality: ChartLabelsAndData
+}
+
+type ChartLabelsAndData = {
+  labels: string[]
+  data: number[][]
+}
+
+interface LatencyOrQualityDataset {
+  label: string
+  borderColor: string
+  backgroundColor: string
+  data: number[]
+  borderWidth: number
+  radius: number
+}
+
+export function useLatencyAndQualityReport() {
+  // random refresh interval between 20 and 30 seconds
+  const REFRESH_INTERVAL = 20000 + Math.random() * 10 * 1000
+  const { t } = useI18n()
+  const themeStore = useThemeStore()
+  const intervalId = ref(0)
+  const latencyAndQualityCharts = ref<LatencyOrQualityChart[]>([])
+  const loadingLatencyAndQualityReport = ref(true)
+  const errorLatencyAndQualityReport = ref('')
+  const errorLatencyAndQualityReportDetails = ref('')
+
+  onMounted(() => {
+    fetchLatencyAndQualityReport()
+
+    // periodically reload data
+    intervalId.value = setInterval(fetchLatencyAndQualityReport, REFRESH_INTERVAL)
+  })
+
+  onUnmounted(() => {
+    if (intervalId.value) {
+      clearInterval(intervalId.value)
+    }
+  })
+
+  function buildQualityChart(latencyAndQualityData: LatencyAndQualityData, pingHost: string) {
+    // convert timestamp to milliseconds
+    const chartLabels = latencyAndQualityData.quality.data.map((d: number[]) => d[0] * 1000)
+    const qualityData = latencyAndQualityData.quality.data.map((d: number[]) => d[1])
+
+    const chartDatasets = [
+      {
+        label: t('standalone.real_time_monitor.packet_delivery_rate'),
+        borderColor: themeStore.isLight ? CYAN_600 : CYAN_500,
+        backgroundColor: themeStore.isLight ? CYAN_600 : CYAN_500,
+        data: qualityData,
+        borderWidth: 1,
+        radius: 0
+      }
+    ]
+
+    const qualityChart = {
+      pingHost,
+      type: 'quality',
+      labels: chartLabels,
+      datasets: chartDatasets
+    } as LatencyOrQualityChart
+    return qualityChart
+  }
+
+  function buildLatencyChart(latencyAndQualityData: LatencyAndQualityData, pingHost: string) {
+    // convert timestamp to milliseconds
+    const chartLabels = latencyAndQualityData.latency.data.map((d: number[]) => d[0] * 1000)
+    // show latency in milliseconds with one decimal
+    const minLatencyData = latencyAndQualityData.latency.data.map((d: number[]) =>
+      d[1] ? parseFloat(d[1].toFixed(1)) : null
+    )
+    const maxLatencyData = latencyAndQualityData.latency.data.map((d: number[]) =>
+      d[2] ? parseFloat(d[2].toFixed(1)) : null
+    )
+    const avgLatencyData = latencyAndQualityData.latency.data.map((d: number[]) =>
+      d[3] ? parseFloat(d[3].toFixed(1)) : null
+    )
+
+    const chartDatasets = [
+      {
+        label: t('standalone.real_time_monitor.min_latency'),
+        borderColor: themeStore.isLight ? EMERALD_600 : EMERALD_500,
+        backgroundColor: themeStore.isLight ? EMERALD_600 : EMERALD_500,
+        data: minLatencyData,
+        borderWidth: 1,
+        radius: 0
+      },
+      {
+        label: t('standalone.real_time_monitor.max_latency'),
+        borderColor: themeStore.isLight ? AMBER_600 : AMBER_500,
+        backgroundColor: themeStore.isLight ? AMBER_600 : AMBER_500,
+        data: maxLatencyData,
+        borderWidth: 1,
+        radius: 0
+      },
+      {
+        label: t('standalone.real_time_monitor.avg_latency'),
+        borderColor: themeStore.isLight ? CYAN_600 : CYAN_500,
+        backgroundColor: themeStore.isLight ? CYAN_600 : CYAN_500,
+        data: avgLatencyData,
+        borderWidth: 1,
+        radius: 0
+      }
+    ]
+
+    const latencyChart = {
+      pingHost,
+      type: 'latency',
+      labels: chartLabels,
+      datasets: chartDatasets
+    } as LatencyOrQualityChart
+    return latencyChart
+  }
+
+  async function fetchLatencyAndQualityReport() {
+    errorLatencyAndQualityReport.value = ''
+    errorLatencyAndQualityReportDetails.value = ''
+
+    try {
+      const res = await ubusCall('ns.report', 'latency-and-quality-report')
+      latencyAndQualityCharts.value = []
+
+      for (const [pingHost, latencyAndQualityData] of Object.entries(res.data) as [
+        string,
+        LatencyAndQualityData
+      ][]) {
+        if (latencyAndQualityData.latency.data.length > 0) {
+          const latencyChart = buildLatencyChart(latencyAndQualityData, pingHost)
+          latencyAndQualityCharts.value.push(latencyChart)
+        }
+
+        if (latencyAndQualityData.quality.data.length > 0) {
+          const qualityChart = buildQualityChart(latencyAndQualityData, pingHost)
+          latencyAndQualityCharts.value.push(qualityChart)
+        }
+      }
+    } catch (err: any) {
+      console.error(err)
+      errorLatencyAndQualityReport.value = t(getAxiosErrorMessage(err))
+      errorLatencyAndQualityReportDetails.value = err.toString()
+    } finally {
+      loadingLatencyAndQualityReport.value = false
+    }
+  }
+
+  return {
+    latencyAndQualityCharts,
+    fetchLatencyAndQualityReport,
+    loadingLatencyAndQualityReport,
+    errorLatencyAndQualityReport,
+    errorLatencyAndQualityReportDetails
+  }
+}
diff --git a/src/i18n/en/translation.json b/src/i18n/en/translation.json
index 2845535e3..75b0264a0 100644
--- a/src/i18n/en/translation.json
+++ b/src/i18n/en/translation.json
@@ -385,7 +385,8 @@
     "cannot_retrieve_client_traffic_by_hour": "Cannot retrieve client traffic by hour",
     "cannot_retrieve_talkers_list": "Cannot retrieve talkers list",
     "invalid_number": "Invalid number",
-    "network_conflict": "This name is already in use by another network interface"
+    "network_conflict": "This name is already in use by another network interface",
+    "cannot_retrieve_latency_and_quality_report": "Cannot retrieve latency and quality report"
   },
   "ne_text_input": {
     "show_password": "Show password",
@@ -1953,11 +1954,19 @@
       "no_events_message": "No events, all good",
       "view_all_on_grafana": "View all on Grafana",
       "no_vpn_network_configured": "No VPN network configured",
-      "blocklist": "Blocklist"
+      "blocklist": "Blocklist",
+      "min_latency": "Min latency",
+      "max_latency": "Max latency",
+      "avg_latency": "Avg latency",
+      "packet_delivery_rate": "Packet delivery rate",
+      "ping_host_latency": "Latency to {pingHost}",
+      "ping_host_packet_delivery_rate": "Packet delivery rate to {pingHost}",
+      "latency_and_packet_delivery_rate": "Latency and packet delivery rate",
+      "no_hosts_configured_for_monitoring": "No hosts configured for monitoring"
     },
     "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.",
+      "description": "Measure round-trip time and packet delivery rates by pinging network hosts. Add one or more hosts, including VPN IPs to monitor tunnel quality. Latency and packet delivery charts are available under Monitoring > Real Time Monitor > Connectivity.",
       "add_host": "Add host",
       "host_to_monitor": "Hosts to monitor"
     },