diff --git a/package-lock.json b/package-lock.json
index a148ebf12..693a5b450 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,8 @@
         "@nethesis/nethesis-solid-svg-icons": "github:nethesis/Font-Awesome#ns-solid",
         "@nethesis/vue-components": "^3.2.0",
         "@tailwindcss/vite": "^4.1.8",
+        "@tanstack/vue-query": "^5.92.9",
+        "@tanstack/vue-query-devtools": "^6.1.4",
         "@types/lodash-es": "^4.17.12",
         "@types/semver": "^7.5.8",
         "@vuepic/vue-datepicker": "^12.0.5",
@@ -2973,6 +2975,42 @@
         "vite": "^5.2.0 || ^6 || ^7"
       }
     },
+    "node_modules/@tanstack/match-sorter-utils": {
+      "version": "8.19.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.19.4.tgz",
+      "integrity": "sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==",
+      "license": "MIT",
+      "dependencies": {
+        "remove-accents": "0.5.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.90.20",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.20.tgz",
+      "integrity": "sha512-OMD2HLpNouXEfZJWcKeVKUgQ5n+n3A2JFmBaScpNDUqSrQSjiveC7dKMe53uJUg1nDG16ttFPz2xfilz6i2uVg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-devtools": {
+      "version": "5.93.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.93.0.tgz",
+      "integrity": "sha512-+kpsx1NQnOFTZsw6HAFCW3HkKg0+2cepGtAWXjiiSOJJ1CtQpt72EE2nyZb+AjAbLRPoeRmPJ8MtQd8r8gsPdg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tanstack/virtual-core": {
       "version": "3.13.19",
       "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.19.tgz",
@@ -2983,6 +3021,80 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@tanstack/vue-query": {
+      "version": "5.92.9",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-query/-/vue-query-5.92.9.tgz",
+      "integrity": "sha512-jjAZcqKveyX0C4w/6zUqbnqk/XzuxNWaFsWjGTJWULVFizUNeLGME2gf9vVSDclIyiBhR13oZJPPs6fJgfpIJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/match-sorter-utils": "^8.19.4",
+        "@tanstack/query-core": "5.90.20",
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.1.2",
+        "vue": "^2.6.0 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@tanstack/vue-query-devtools": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-query-devtools/-/vue-query-devtools-6.1.4.tgz",
+      "integrity": "sha512-DR3r0sDc317TYLxfzQIst0YEZ5Va1FpJ8A70JDU9daSpTrRMJSYuGdLx4O1qUvwRlJqo4bRC1ixUuBzTJEkIMg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-devtools": "5.93.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/vue-query": "^5.92.9",
+        "vue": "^3.3.0"
+      }
+    },
+    "node_modules/@tanstack/vue-query/node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
+    "node_modules/@tanstack/vue-query/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@tanstack/vue-virtual": {
       "version": "3.13.19",
       "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.13.19.tgz",
@@ -7346,6 +7458,12 @@
         "node": "^18.17.0 || >=20.5.0"
       }
     },
+    "node_modules/remove-accents": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
+      "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==",
+      "license": "MIT"
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
diff --git a/package.json b/package.json
index d34ff81fe..0863729a5 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,8 @@
     "@nethesis/nethesis-solid-svg-icons": "github:nethesis/Font-Awesome#ns-solid",
     "@nethesis/vue-components": "^3.2.0",
     "@tailwindcss/vite": "^4.1.8",
+    "@tanstack/vue-query": "^5.92.9",
+    "@tanstack/vue-query-devtools": "^6.1.4",
     "@types/lodash-es": "^4.17.12",
     "@types/semver": "^7.5.8",
     "@vuepic/vue-datepicker": "^12.0.5",
diff --git a/src/components/AdvancedSettingsDropdown.vue b/src/components/AdvancedSettingsDropdown.vue
index d84cc0d2a..f4f8b796e 100644
--- a/src/components/AdvancedSettingsDropdown.vue
+++ b/src/components/AdvancedSettingsDropdown.vue
@@ -21,7 +21,9 @@ const icon = computed<IconDefinition>(() => {
 
 <template>
   <NeButton kind="tertiary" @click="model = !model">
-    {{ t('common.advanced_settings') }}
+    <slot name="title">
+      {{ t('common.advanced_settings') }}
+    </slot>
     <template #suffix>
       <FontAwesomeIcon :icon="icon" class="h-4 w-4" aria-hidden="true" />
     </template>
diff --git a/src/components/standalone/monitoring/FlowSection.vue b/src/components/standalone/monitoring/FlowSection.vue
new file mode 100644
index 000000000..d9a1f8fe8
--- /dev/null
+++ b/src/components/standalone/monitoring/FlowSection.vue
@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import {
+  getAxiosErrorMessage,
+  NeButton,
+  NeInlineNotification,
+  NeSkeleton
+} from '@nethesis/vue-components'
+import { useI18n } from 'vue-i18n'
+import { ref, watch } from 'vue'
+import FlowConfigureDrawer from '@/components/standalone/monitoring/flows/FlowConfigureDrawer.vue'
+import { useQuery } from '@tanstack/vue-query'
+import { ubusCall } from '@/lib/standalone/ubus.ts'
+import FlowsTable from '@/components/standalone/monitoring/FlowsTable.vue'
+
+const { t } = useI18n()
+
+type FlowDaemonResponse = {
+  data: {
+    configuration: {
+      enabled: boolean
+      expired_persistence: string
+    }
+    status: boolean
+  }
+}
+
+const configuringDaemon = ref(false)
+const daemonRunning = ref(false)
+const { isSuccess, isError, isPending, data, error } = useQuery({
+  queryKey: ['flow', 'config'],
+  queryFn: async () => ubusCall<FlowDaemonResponse>('ns.flows', 'get-configuration'),
+  select: (data) => data.data,
+  refetchInterval: () => {
+    if (configuringDaemon.value || daemonRunning.value) {
+      return false
+    } else {
+      return 5000
+    }
+  }
+})
+
+const enabled = ref(false)
+const expiredPersistence = ref('')
+watch(data, (newData) => {
+  if (newData != undefined) {
+    daemonRunning.value = newData.status
+    enabled.value = newData.configuration.enabled
+    expiredPersistence.value = newData.configuration.expired_persistence
+  }
+})
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="flex flex-wrap items-start gap-4">
+      <p class="mr-auto max-w-xl text-secondary-neutral">{{ t('standalone.flows.subtitle') }}</p>
+      <template v-if="isSuccess">
+        <NeButton
+          v-if="data!.configuration.enabled"
+          kind="secondary"
+          size="lg"
+          @click="configuringDaemon = true"
+        >
+          {{ t('standalone.flows.configure_flows_daemon') }}
+        </NeButton>
+      </template>
+    </div>
+    <NeSkeleton v-if="isPending" :lines="10" />
+    <NeInlineNotification
+      v-else-if="isError"
+      :description="t(getAxiosErrorMessage(error))"
+      :title="t('standalone.unable_to_get_flows_configuration')"
+      kind="error"
+    />
+    <template v-else>
+      <NeInlineNotification
+        v-if="!data!.configuration.enabled"
+        :description="t('standalone.flows.daemon_disabled_description')"
+        :primary-button-label="t('standalone.flows.configure_flows_daemon')"
+        :title="t('standalone.flows.daemon_disabled')"
+        kind="info"
+        @primary-click="configuringDaemon = true"
+      />
+      <NeInlineNotification
+        v-else-if="!data!.status"
+        :description="t('standalone.flows.daemon_not_running_description')"
+        :title="t('standalone.flows.daemon_not_running')"
+        kind="warning"
+      />
+      <FlowsTable v-else />
+    </template>
+    <FlowConfigureDrawer
+      :enabled="enabled"
+      :expired-persistence="expiredPersistence"
+      :show="configuringDaemon"
+      @close="configuringDaemon = false"
+    />
+  </div>
+</template>
diff --git a/src/components/standalone/monitoring/FlowsTable.vue b/src/components/standalone/monitoring/FlowsTable.vue
new file mode 100644
index 000000000..9067028be
--- /dev/null
+++ b/src/components/standalone/monitoring/FlowsTable.vue
@@ -0,0 +1,607 @@
+<script lang="ts">
+import {
+  faArrowDown,
+  faArrowUp,
+  faBroadcastTower,
+  faMagnifyingGlass,
+  faQuestion,
+  faUsers
+} from '@fortawesome/free-solid-svg-icons'
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
+
+type FlowListResponse = {
+  data: {
+    current_page: number
+    flows: FlowEvent[]
+    total: number
+    last_page: number
+    per_page: number
+    filters: {
+      applications: {
+        id: number
+        name: string
+      }[]
+      protocols: {
+        id: number
+        name: string
+      }[]
+      sources: string[]
+      destinations: string[]
+      tags: string[]
+    }
+  }
+}
+
+export type FlowEvent = {
+  type: 'flow_dpi_complete' | 'flow'
+  interface: string
+  internal: boolean
+  flow: Flow
+  tags: string[]
+}
+
+export type Flow = {
+  conntrack: {
+    id: string
+  }
+  detected_application: number
+  detected_application_name: string
+  detected_protocol: number
+  detected_protocol_name: string
+  detection_guessed?: boolean
+  detection_packets?: number
+  local_ip: string
+  local_port: number
+  other_ip: string
+  other_port: number
+  local_origin: boolean
+  first_seen_at: number
+  last_seen_at: number
+  local_bytes: number
+  local_rate: number
+  local_mac: string
+  other_bytes: number
+  other_rate: number
+  other_mac: string
+  other_type: 'remote' | 'local' | 'broadcast'
+  digest: string
+  host_server_name?: string
+  dns_host_name?: string
+  risks: {
+    ndpi_risk_score: number
+    ndpi_risk_score_client: number
+    ndpi_risk_score_server: number
+    risks?: number[]
+  }
+  ssl?: {
+    client_sni?: string
+  }
+  total_bytes: number
+}
+
+export type Badge = {
+  id: string
+  text: string
+  icon: IconDefinition
+  content?: string
+  customClasses: string[]
+}
+
+export function matchBadge(tag: string): Badge {
+  switch (tag) {
+    case 'remote': {
+      return {
+        id: 'remote',
+        text: 'standalone.flows.remote',
+        icon: faArrowDown,
+        customClasses: ['bg-rose-100', 'text-rose-800', 'dark:bg-rose-700', 'dark:text-rose-100'],
+        content: 'standalone.flows.remote_description'
+      }
+    }
+    case 'outgoing': {
+      return {
+        id: 'outgoing',
+        text: 'standalone.flows.outgoing',
+        icon: faArrowUp,
+        customClasses: [
+          'bg-green-100',
+          'text-green-800',
+          'dark:bg-green-700',
+          'dark:text-green-100'
+        ],
+        content: 'standalone.flows.outgoing_description'
+      }
+    }
+    case 'internal': {
+      return {
+        id: 'local',
+        text: 'standalone.flows.internal',
+        icon: faUsers,
+        customClasses: ['bg-blue-100', 'text-blue-800', 'dark:bg-blue-700', 'dark:text-blue-100'],
+        content: 'standalone.flows.internal_description'
+      }
+    }
+    case 'broadcast': {
+      return {
+        id: 'broadcast',
+        text: 'standalone.flows.broadcast',
+        icon: faBroadcastTower,
+        customClasses: [
+          'bg-purple-100',
+          'text-purple-800',
+          'dark:bg-purple-700',
+          'dark:text-purple-100'
+        ],
+        content: 'standalone.flows.broadcast_description'
+      }
+    }
+    case 'scanning': {
+      return {
+        id: 'scanning',
+        text: 'standalone.flows.scanning',
+        icon: faMagnifyingGlass,
+        customClasses: ['bg-gray-100', 'text-gray-800', 'dark:bg-gray-700', 'dark:text-gray-100'],
+        content: 'standalone.flows.scanning_description'
+      }
+    }
+    default: {
+      return {
+        id: tag,
+        text: tag,
+        icon: faQuestion,
+        customClasses: ['bg-gray-100', 'text-gray-800', 'dark:bg-gray-700', 'dark:text-gray-100']
+      }
+    }
+  }
+}
+
+export function extractBadges(entry: FlowEvent): Badge[] {
+  return entry.tags.map((tag) => matchBadge(tag))
+}
+</script>
+
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+import { computed, ref, watch } from 'vue'
+import {
+  NeTable,
+  NeTableBody,
+  NeTableHead,
+  NeTableHeadCell,
+  NeTextInput,
+  NeDropdownFilter,
+  type FilterOption,
+  NePaginator,
+  type SortEvent,
+  NeInlineNotification,
+  getAxiosErrorMessage,
+  NeEmptyState,
+  NeTableCell,
+  NeTableRow,
+  NeButton
+} from '@nethesis/vue-components'
+import FlowTableRow from '@/components/standalone/monitoring/flows/FlowTableRow.vue'
+import RefreshProgressBar from '@/components/standalone/monitoring/flows/RefreshProgressBar.vue'
+import { useRouteQuery } from '@vueuse/router'
+import FlowDetail from '@/components/standalone/monitoring/flows/FlowDetail.vue'
+import { faTable } from '@fortawesome/free-solid-svg-icons'
+import { useQuery, useQueryClient, keepPreviousData } from '@tanstack/vue-query'
+import { ubusCall } from '@/lib/standalone/ubus.ts'
+import { refDebounced } from '@vueuse/core'
+import { useNetifydStore } from '@/stores/standalone/netifyd.ts'
+
+const { t } = useI18n()
+const queryClient = useQueryClient()
+const netifydStore = useNetifydStore()
+
+const applicationsFilter = useRouteQuery<string, string[]>('application', '', {
+  transform: {
+    get: (val) => (val ? val.split(',') : []),
+    set: (val) => val.join(',')
+  }
+})
+const protocolsFilter = useRouteQuery<string, string[]>('protocols', '', {
+  transform: {
+    get: (val) => (val ? val.split(',') : []),
+    set: (val) => val.join(',')
+  }
+})
+const tagsFilter = useRouteQuery<string, string[]>('tags', '', {
+  transform: {
+    get: (val) => (val ? val.split(',') : []),
+    set: (val) => val.join(',')
+  }
+})
+const sourceFilter = useRouteQuery<string, string[]>('source', '', {
+  transform: {
+    get: (val) => (val ? val.split(',') : []),
+    set: (val) => val.join(',')
+  }
+})
+
+const destinationFilter = useRouteQuery<string, string[]>('destination', '', {
+  transform: {
+    get: (val) => (val ? val.split(',') : []),
+    set: (val) => val.join(',')
+  }
+})
+
+const currentPage = ref(1)
+const perPage = useRouteQuery<string, number>('per_page', '10', {
+  transform: {
+    get: (val) => parseInt(val),
+    set: (val) => val.toString()
+  }
+})
+watch(perPage, () => {
+  if (currentPage.value != 1) {
+    currentPage.value = 1
+  }
+})
+const sortDescending = useRouteQuery<string, boolean>('descending', 'true', {
+  transform: {
+    get: (val) => val == 'true',
+    set: (val) => val.toString()
+  }
+})
+type SortableKeys = 'duration' | 'last_seen_at' | 'download' | 'upload'
+const sortKey = useRouteQuery<SortableKeys>('sort', 'download')
+
+const flowDetails = ref<FlowEvent>()
+
+type RefreshInterval = '10s' | '30s' | '60s' | 'off'
+type RefreshFilterOption = FilterOption & {
+  id: RefreshInterval
+}
+const refreshIntervalOptions: RefreshFilterOption[] = [
+  {
+    id: '10s',
+    label: t('standalone.flows.refresh_interval', { value: '10s' })
+  },
+  {
+    id: '30s',
+    label: t('standalone.flows.refresh_interval', { value: '30s' })
+  },
+  {
+    id: '60s',
+    label: t('standalone.flows.refresh_interval', { value: '60s' })
+  },
+  {
+    id: 'off',
+    label: t('standalone.flows.refresh_interval', { value: 'off' })
+  }
+]
+const refreshIntervalSelection = useRouteQuery<string, RefreshInterval[]>(
+  'refresh_interval',
+  '10s',
+  {
+    transform: {
+      get: (val) => (val ? (val.split(',') as RefreshInterval[]) : ['10s']),
+      set: (val) => val.join(',')
+    }
+  }
+)
+const refreshIntervalsValue = computed<number | false>(() => {
+  if (flowDetails.value != undefined) {
+    return false
+  }
+  switch (refreshIntervalSelection.value[0]) {
+    case '10s':
+      return 10000
+    case '30s':
+      return 30000
+    case '60s':
+      return 60000
+    case 'off':
+    default:
+      return false
+  }
+})
+
+const query = useRouteQuery('query', '')
+const queryDebounced = refDebounced(query, 500)
+watch(queryDebounced, () => {
+  if (currentPage.value != 1) {
+    currentPage.value = 1
+  }
+})
+
+const { data, isError, error, isPending, dataUpdatedAt } = useQuery({
+  queryKey: [
+    'flow',
+    'list',
+    queryDebounced,
+    sortKey,
+    sortDescending,
+    perPage,
+    currentPage,
+    applicationsFilter,
+    protocolsFilter,
+    tagsFilter,
+    sourceFilter,
+    destinationFilter
+  ],
+  queryFn: async () =>
+    ubusCall<FlowListResponse>('ns.flows', 'list', {
+      q: queryDebounced.value,
+      sort_by: sortKey.value,
+      desc: sortDescending.value,
+      per_page: perPage.value,
+      page: currentPage.value,
+      application: applicationsFilter.value,
+      protocol: protocolsFilter.value,
+      source: sourceFilter.value,
+      destination: destinationFilter.value,
+      tag: tagsFilter.value
+    }),
+  placeholderData: keepPreviousData,
+  refetchInterval: refreshIntervalsValue,
+  select: (data) => data.data,
+  refetchOnReconnect: () => refreshIntervalsValue.value != false,
+  refetchOnWindowFocus: () => refreshIntervalsValue.value != false
+})
+
+watch(data, () => {
+  if (data.value != undefined) {
+    if (currentPage.value > data.value.last_page) {
+      currentPage.value = data.value.last_page
+    }
+  }
+})
+
+watch(refreshIntervalSelection, (val) => {
+  if (!val.includes('off')) {
+    queryClient.invalidateQueries({ queryKey: ['flow', 'list'] })
+  }
+})
+
+const applications = computed<FilterOption[]>(() => {
+  if (data.value == undefined) {
+    return []
+  }
+  return data.value.filters.applications.map((application) => {
+    return {
+      id: application.name,
+      label: netifydStore.getApplicationNameById(application.id, application.name)
+    }
+  })
+})
+
+const protocols = computed<FilterOption[]>(() => {
+  if (data.value == undefined) {
+    return []
+  }
+  return data.value.filters.protocols.map((protocol) => {
+    return {
+      id: protocol.name,
+      label: netifydStore.getProtocolNameById(protocol.id, protocol.name)
+    }
+  })
+})
+
+const tags = computed<FilterOption[]>(() => {
+  return (
+    data.value?.filters.tags.map((tag) => {
+      const badge = matchBadge(tag)
+      return {
+        id: badge.id,
+        label: t(badge.text)
+      }
+    }) ?? []
+  )
+})
+
+const sourceIps = computed<FilterOption[]>(() => {
+  return (
+    data.value?.filters.sources.map((sourceIp) => ({
+      id: sourceIp,
+      label: sourceIp
+    })) ?? []
+  )
+})
+
+const destinationIps = computed<FilterOption[]>(() => {
+  return (
+    data.value?.filters.destinations.map((destinationIp) => ({
+      id: destinationIp,
+      label: destinationIp
+    })) ?? []
+  )
+})
+
+const onSort = (payload: SortEvent) => {
+  sortKey.value = payload.key as SortableKeys
+  sortDescending.value = payload.descending
+}
+
+function resetFilters() {
+  query.value = ''
+  applicationsFilter.value = []
+  protocolsFilter.value = []
+  tagsFilter.value = []
+  sourceFilter.value = []
+  destinationFilter.value = []
+}
+</script>
+
+<template>
+  <div class="space-y-8">
+    <div class="space-y-4">
+      <NeInlineNotification
+        v-if="isError"
+        kind="error"
+        :title="t('error.cannot_retrieve_flows')"
+        :description="t(getAxiosErrorMessage(error))"
+      />
+      <div v-else-if="!isPending" class="flex flex-wrap items-start gap-6">
+        <div class="mr-auto flex flex-wrap items-center gap-4">
+          <NeTextInput v-model="query" :placeholder="t('common.filter')" is-search />
+          <NeDropdownFilter
+            v-model="applicationsFilter"
+            :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
+            :clear-search-label="t('ne_dropdown_filter.clear_search')"
+            :label="t('standalone.flows.application')"
+            :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+            :no-options-label="t('ne_dropdown_filter.no_options')"
+            :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+            :options="applications"
+            kind="checkbox"
+            show-options-filter
+          />
+          <NeDropdownFilter
+            v-model="protocolsFilter"
+            :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
+            :clear-search-label="t('ne_dropdown_filter.clear_search')"
+            :label="t('standalone.flows.protocol')"
+            :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+            :no-options-label="t('ne_dropdown_filter.no_options')"
+            :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+            :options="protocols"
+            kind="checkbox"
+            show-options-filter
+          />
+          <NeDropdownFilter
+            v-model="tagsFilter"
+            :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
+            :clear-search-label="t('ne_dropdown_filter.clear_search')"
+            :label="t('standalone.flows.tags')"
+            :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+            :no-options-label="t('ne_dropdown_filter.no_options')"
+            :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+            :options="tags"
+            kind="checkbox"
+            show-options-filter
+          />
+          <NeDropdownFilter
+            v-model="sourceFilter"
+            :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
+            :clear-search-label="t('ne_dropdown_filter.clear_search')"
+            :label="t('standalone.flows.source')"
+            :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+            :no-options-label="t('ne_dropdown_filter.no_options')"
+            :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+            :options="sourceIps"
+            kind="checkbox"
+            show-options-filter
+          />
+          <NeDropdownFilter
+            v-model="destinationFilter"
+            :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
+            :clear-search-label="t('ne_dropdown_filter.clear_search')"
+            :label="t('standalone.flows.destination')"
+            :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+            :no-options-label="t('ne_dropdown_filter.no_options')"
+            :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+            :options="destinationIps"
+            kind="checkbox"
+            show-options-filter
+          />
+          <NeButton kind="tertiary" @click="resetFilters">
+            {{ t('common.clear_filters') }}
+          </NeButton>
+        </div>
+        <div class="space-y-2">
+          <NeDropdownFilter
+            v-model="refreshIntervalSelection"
+            :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
+            :clear-search-label="t('ne_dropdown_filter.clear_search')"
+            :label="t('standalone.flows.refresh_interval', { value: refreshIntervalSelection[0] })"
+            :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+            :no-options-label="t('ne_dropdown_filter.no_options')"
+            :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+            :options="refreshIntervalOptions"
+            kind="radio"
+          />
+          <RefreshProgressBar :data-updated-at="dataUpdatedAt" :interval="refreshIntervalsValue" />
+        </div>
+      </div>
+    </div>
+    <NeTable
+      :aria-label="t('standalone.flows.table_aria_label')"
+      :loading="isPending"
+      :skeleton-columns="11"
+      :skeleton-rows="perPage + 1"
+      :sort-descending="sortDescending"
+      :sort-key="sortKey"
+      card-breakpoint="2xl"
+    >
+      <NeTableHead>
+        <NeTableHeadCell>
+          {{ t('standalone.flows.application') }}
+        </NeTableHeadCell>
+        <NeTableHeadCell>
+          {{ t('standalone.flows.protocol') }}
+        </NeTableHeadCell>
+        <NeTableHeadCell>
+          {{ t('standalone.flows.tags') }}
+        </NeTableHeadCell>
+        <NeTableHeadCell>
+          {{ t('standalone.flows.source') }}
+        </NeTableHeadCell>
+        <NeTableHeadCell>
+          {{ t('standalone.flows.destination') }}
+        </NeTableHeadCell>
+        <NeTableHeadCell column-key="download" sortable @sort="onSort">
+          {{ t('standalone.flows.download') }}
+        </NeTableHeadCell>
+        <NeTableHeadCell column-key="upload" sortable @sort="onSort">
+          {{ t('standalone.flows.upload') }}
+        </NeTableHeadCell>
+        <NeTableHeadCell column-key="duration" sortable @sort="onSort">
+          {{ t('standalone.flows.duration') }}
+        </NeTableHeadCell>
+        <NeTableHeadCell column-key="last_seen_at" sortable @sort="onSort">
+          {{ t('standalone.flows.last_seen_at') }}
+        </NeTableHeadCell>
+        <NeTableHeadCell />
+      </NeTableHead>
+      <NeTableBody v-if="data!.total > 0">
+        <FlowTableRow
+          v-for="flow in data!.flows"
+          :key="flow.flow.digest"
+          :item="flow"
+          @show="flowDetails = $event"
+        />
+      </NeTableBody>
+      <NeTableBody v-else>
+        <NeTableRow>
+          <NeTableCell colspan="10">
+            <NeEmptyState
+              class="bg-white dark:bg-gray-950"
+              :description="t('standalone.flows.no_flows_found_description')"
+              :icon="faTable"
+              :title="t('standalone.flows.no_flows_found')"
+            >
+              <NeButton @click="resetFilters">
+                {{ t('common.clear_filters') }}
+              </NeButton>
+            </NeEmptyState>
+          </NeTableCell>
+        </NeTableRow>
+      </NeTableBody>
+      <template v-if="!isPending && data!.total > 0" #paginator>
+        <NePaginator
+          :current-page="currentPage"
+          :nav-pagination-label="t('ne_table.pagination')"
+          :next-label="t('ne_table.go_to_next_page')"
+          :page-size="data!.per_page"
+          :page-size-label="t('ne_table.show')"
+          :previous-label="t('ne_table.go_to_previous_page')"
+          :range-of-total-label="t('ne_table.of')"
+          :total-rows="data!.total"
+          @select-page="
+            (page: number) => {
+              currentPage = page
+            }
+          "
+          @select-page-size="
+            (size: number) => {
+              perPage = size
+            }
+          "
+        />
+      </template>
+    </NeTable>
+    <FlowDetail :flow="flowDetails" @close="flowDetails = undefined" />
+  </div>
+</template>
diff --git a/src/components/standalone/monitoring/flows/FlowBadge.vue b/src/components/standalone/monitoring/flows/FlowBadge.vue
new file mode 100644
index 000000000..2c2687ce9
--- /dev/null
+++ b/src/components/standalone/monitoring/flows/FlowBadge.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { NeBadgeV2, NeTooltip } from '@nethesis/vue-components'
+import { useI18n } from 'vue-i18n'
+import { computed, h } from 'vue'
+import type { Badge } from '@/components/standalone/monitoring/FlowsTable.vue'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  badge: Badge
+}>()
+
+const badgeComponent = computed(() =>
+  h(
+    NeBadgeV2,
+    {
+      customKindClasses: props.badge.customClasses.join(' '),
+      kind: 'custom',
+      size: 'sm'
+    },
+    () =>
+      h('span', { class: 'flex items-center gap-1' }, [
+        h(FontAwesomeIcon, { icon: props.badge.icon }),
+        t(props.badge.text)
+      ])
+  )
+)
+</script>
+
+<template>
+  <NeTooltip v-if="badge.content" trigger-event="mouseenter click">
+    <template #content>
+      {{ t(badge.content) }}
+    </template>
+    <template #trigger>
+      <component :is="badgeComponent" />
+    </template>
+  </NeTooltip>
+  <component :is="badgeComponent" v-else />
+</template>
diff --git a/src/components/standalone/monitoring/flows/FlowConfigureDrawer.vue b/src/components/standalone/monitoring/flows/FlowConfigureDrawer.vue
new file mode 100644
index 000000000..c7e18fc30
--- /dev/null
+++ b/src/components/standalone/monitoring/flows/FlowConfigureDrawer.vue
@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import {
+  getAxiosErrorMessage,
+  NeButton,
+  NeInlineNotification,
+  NeSideDrawer,
+  NeTextInput,
+  NeToggle
+} from '@nethesis/vue-components'
+import { useI18n } from 'vue-i18n'
+import { ref } from 'vue'
+import { MessageBag } from '@/lib/validation.ts'
+import { ubusCall, ValidationError } from '@/lib/standalone/ubus.ts'
+import { useMutation, useQueryClient } from '@tanstack/vue-query'
+import { useUciPendingChangesStore } from '@/stores/standalone/uciPendingChanges.ts'
+
+const { t } = useI18n()
+
+type SetConfigPayload = {
+  enabled: boolean
+  expired_persistence: string
+}
+
+defineProps<{
+  show: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const uci = useUciPendingChangesStore()
+const queryClient = useQueryClient()
+
+const enabled = defineModel<boolean>('enabled', { default: false })
+const expiredPersistence = defineModel<string>('expiredPersistence', { default: '' })
+
+const validationBag = ref(new MessageBag())
+
+const { mutate, error, status, isPending } = useMutation({
+  mutationFn: (payload: SetConfigPayload) => ubusCall('ns.flows', 'set-configuration', payload),
+  onMutate: () => validationBag.value.clear(),
+  onSuccess: async () => {
+    await Promise.all([
+      uci.getChanges(),
+      queryClient.invalidateQueries({ queryKey: ['flow', 'config'] })
+    ])
+    emit('close')
+  },
+  onError: (e: Error) => {
+    if (e instanceof ValidationError) {
+      validationBag.value = e.errorBag
+    }
+  }
+})
+
+function submit() {
+  mutate({
+    enabled: enabled.value,
+    expired_persistence: expiredPersistence.value
+  })
+}
+</script>
+
+<template>
+  <NeSideDrawer
+    :is-shown="show"
+    :title="t('standalone.flows.configure_flows_daemon')"
+    @close="emit('close')"
+  >
+    <form class="space-y-8" @submit.prevent="submit">
+      <NeInlineNotification
+        v-if="status == 'error' && validationBag.size < 1"
+        :description="t(getAxiosErrorMessage(error))"
+        :title="t('standalone.flows.unable_to_configure_flows_daemon')"
+        kind="error"
+      />
+      <NeToggle
+        v-model="enabled"
+        :disabled="isPending"
+        :invalid-message="t(validationBag.getFirstI18nKeyFor('enabled'))"
+        :label="enabled ? t('common.enabled') : t('common.disabled')"
+        :top-label="t('standalone.flows.daemon_enabled')"
+      />
+      <NeTextInput
+        v-model="expiredPersistence"
+        :disabled="isPending"
+        :invalid-message="t(validationBag.getFirstI18nKeyFor('expired_persistence'))"
+        :label="t('standalone.flows.persistence_after_expiration')"
+      />
+      <hr />
+      <div class="flex flex-wrap justify-end gap-6">
+        <NeButton :disabled="isPending" kind="tertiary" @click="emit('close')">
+          {{ t('common.cancel') }}
+        </NeButton>
+        <NeButton :disabled="isPending" :loading="isPending" kind="primary" type="submit">
+          {{ t('common.configure') }}
+        </NeButton>
+      </div>
+    </form>
+  </NeSideDrawer>
+</template>
diff --git a/src/components/standalone/monitoring/flows/FlowDetail.vue b/src/components/standalone/monitoring/flows/FlowDetail.vue
new file mode 100644
index 000000000..3f039855f
--- /dev/null
+++ b/src/components/standalone/monitoring/flows/FlowDetail.vue
@@ -0,0 +1,344 @@
+<script lang="ts" setup>
+import { byteFormat1024, kbpsFormat, NeModal } from '@nethesis/vue-components'
+import type { FlowEvent } from '@/components/standalone/monitoring/FlowsTable.vue'
+import { useI18n } from 'vue-i18n'
+import { computed, ref, watch } from 'vue'
+import { formatDistance } from 'date-fns'
+import AdvancedSettingsDropdown from '@/components/AdvancedSettingsDropdown.vue'
+import { useNetifydStore } from '@/stores/standalone/netifyd.ts'
+
+const { t } = useI18n()
+const netifydStore = useNetifydStore()
+
+defineEmits<{
+  close: []
+}>()
+
+const props = defineProps<{
+  flow?: FlowEvent
+}>()
+
+const _flow = ref<FlowEvent>()
+
+watch(
+  () => props.flow,
+  (val) => {
+    if (val != undefined) {
+      _flow.value = val
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+type Fact = {
+  label: string
+  value: string | number
+}
+
+type FactsGroup = {
+  title: string
+  facts: Fact[] | string[]
+}
+
+const facts = computed<FactsGroup[]>(() => {
+  if (_flow.value == undefined) {
+    return []
+  }
+
+  const groups: FactsGroup[] = []
+
+  // Endpoint Information
+  groups.push({
+    title: t('standalone.flows.endpoint_information'),
+    facts: [
+      {
+        label: t('standalone.flows.source_ip'),
+        value: source.value.ip
+      },
+      {
+        label: t('standalone.flows.source_port'),
+        value: source.value.port
+      },
+      {
+        label: t('standalone.flows.source_mac'),
+        value: source.value.mac != '00:00:00:00:00:00' ? source.value.mac : t('common.unknown')
+      },
+      {
+        label: t('standalone.flows.destination_ip'),
+        value: destination.value.ip
+      },
+      {
+        label: t('standalone.flows.destination_port'),
+        value: destination.value.port
+      },
+      {
+        label: t('standalone.flows.destination_mac'),
+        value:
+          destination.value.mac != '00:00:00:00:00:00' ? destination.value.mac : t('common.unknown')
+      }
+    ]
+  })
+
+  // Hostname Information (conditional)
+  if (hostnameInformationVisible.value) {
+    const hostnameFacts: Fact[] = []
+
+    if (_flow.value.flow.host_server_name) {
+      hostnameFacts.push({
+        label: t('standalone.flows.hostname'),
+        value: _flow.value.flow.host_server_name
+      })
+    }
+
+    if (_flow.value.flow.dns_host_name) {
+      hostnameFacts.push({
+        label: t('standalone.flows.domain'),
+        value: _flow.value.flow.dns_host_name
+      })
+    }
+
+    if (_flow.value.flow.ssl?.client_sni) {
+      hostnameFacts.push({
+        label: t('standalone.flows.tls_sni_hostname'),
+        value: _flow.value.flow.ssl.client_sni
+      })
+    }
+
+    if (hostnameFacts.length > 0) {
+      groups.push({
+        title: t('standalone.flows.hostname_information'),
+        facts: hostnameFacts
+      })
+    }
+  }
+
+  // Traffic Inspection Details
+  const trafficInspectionTitle =
+    _flow.value.type == 'flow'
+      ? t('standalone.flows.partial_traffic_inspection')
+      : t('standalone.flows.traffic_inspection_details')
+
+  groups.push({
+    title: trafficInspectionTitle,
+    facts: [
+      {
+        label: t('standalone.flows.protocol'),
+        value: netifydStore.getProtocolByFlow(_flow.value.flow).label
+      },
+      {
+        label: t('standalone.flows.application'),
+        value: netifydStore.getApplicationByFlow(_flow.value.flow).label
+      },
+      {
+        label: t('standalone.flows.packets_analyzed'),
+        value: _flow.value.flow.detection_packets ?? 0
+      }
+    ]
+  })
+
+  // Flow Info
+  groups.push({
+    title: t('standalone.flows.flow_info'),
+    facts: [
+      {
+        label: t('standalone.flows.conntrack_id'),
+        value: _flow.value.flow.conntrack.id
+      },
+      {
+        label: t('standalone.flows.first_seen_at'),
+        value: new Date(_flow.value.flow.first_seen_at).toLocaleString()
+      },
+      {
+        label: t('standalone.flows.last_seen_at'),
+        value: new Date(_flow.value.flow.last_seen_at).toLocaleString()
+      },
+      {
+        label: t('standalone.flows.duration'),
+        value: formatDistance(
+          new Date(_flow.value.flow.first_seen_at),
+          new Date(_flow.value.flow.last_seen_at)
+        )
+      }
+    ]
+  })
+
+  // Traffic Flow
+  groups.push({
+    title: t('standalone.flows.traffic_flow'),
+    facts: [
+      {
+        label: t('standalone.flows.download_rate'),
+        value: formatRate(downloadRate.value)
+      },
+      {
+        label: t('standalone.flows.upload_rate'),
+        value: formatRate(uploadRate.value)
+      },
+      {
+        label: t('standalone.flows.download_bytes'),
+        value: byteFormat1024(downloadBytes.value)
+      },
+      {
+        label: t('standalone.flows.upload_bytes'),
+        value: byteFormat1024(uploadBytes.value)
+      },
+      {
+        label: t('standalone.flows.total_bytes'),
+        value: byteFormat1024(_flow.value.flow.total_bytes)
+      }
+    ]
+  })
+
+  return groups
+})
+
+type EndpointInfo = {
+  ip: string
+  port: number
+  mac: string
+}
+
+const source = computed<EndpointInfo>(() => {
+  let ip = ''
+  let port = 0
+  let mac = ''
+
+  if (_flow.value != undefined) {
+    if (_flow.value.flow.local_origin) {
+      ip = _flow.value.flow.local_ip
+      port = _flow.value.flow.local_port
+      mac = _flow.value.flow.local_mac
+    } else {
+      ip = _flow.value.flow.other_ip
+      port = _flow.value.flow.other_port
+      mac = _flow.value.flow.other_mac
+    }
+  }
+
+  return {
+    ip,
+    port,
+    mac
+  }
+})
+
+const destination = computed<EndpointInfo>(() => {
+  let ip = ''
+  let port = 0
+  let mac = ''
+
+  if (_flow.value != undefined) {
+    if (_flow.value.flow.local_origin) {
+      ip = _flow.value.flow.other_ip
+      port = _flow.value.flow.other_port
+      mac = _flow.value.flow.other_mac
+    } else {
+      ip = _flow.value.flow.local_ip
+      port = _flow.value.flow.local_port
+      mac = _flow.value.flow.local_mac
+    }
+  }
+
+  return {
+    ip,
+    port,
+    mac
+  }
+})
+
+const uploadRate = computed(() => {
+  if (_flow.value == undefined) {
+    return 0
+  }
+  return _flow.value.flow.local_origin ? _flow.value.flow.local_rate : _flow.value.flow.other_rate
+})
+
+const downloadRate = computed(() => {
+  if (_flow.value == undefined) {
+    return 0
+  }
+  return _flow.value.flow.local_origin ? _flow.value.flow.other_rate : _flow.value.flow.local_rate
+})
+
+const uploadBytes = computed(() => {
+  if (_flow.value == undefined) {
+    return 0
+  }
+  return _flow.value.flow.local_origin ? _flow.value.flow.local_bytes : _flow.value.flow.other_bytes
+})
+
+const downloadBytes = computed(() => {
+  if (_flow.value == undefined) {
+    return 0
+  }
+  return _flow.value.flow.local_origin ? _flow.value.flow.other_bytes : _flow.value.flow.local_bytes
+})
+
+function formatRate(rate: number): string {
+  // Convert bytes/s to Kbps: (bytes * 8 bits/byte) / 1000
+  return kbpsFormat((rate * 8) / 1000)
+}
+
+const hostnameInformationVisible = computed<boolean>(() => {
+  return [
+    _flow.value?.flow.host_server_name != undefined,
+    _flow.value?.flow.dns_host_name != undefined,
+    _flow.value?.flow.ssl?.client_sni != undefined
+  ].some((value) => value)
+})
+
+function isStringArray(facts: Fact[] | string[]): facts is string[] {
+  return typeof facts[0] == 'string'
+}
+</script>
+
+<template>
+  <NeModal
+    :close-aria-label="t('common.close')"
+    :primary-label="t('common.close')"
+    :title="t('standalone.flows.flow_details')"
+    :visible="flow != undefined"
+    kind="neutral"
+    size="lg"
+    @close="$emit('close')"
+    @primary-click="$emit('close')"
+  >
+    <div class="space-y-6">
+      <div v-if="_flow != undefined" class="space-y-8">
+        <div v-for="entry in facts" :key="entry.title">
+          <h1 class="pb-2">{{ entry.title }}</h1>
+          <ul v-if="isStringArray(entry.facts)">
+            <li
+              v-for="(item, index) in entry.facts"
+              :key="index"
+              class="border-gray-200 px-4 py-2 not-last:border-b dark:border-gray-700"
+            >
+              {{ item }}
+            </li>
+          </ul>
+          <dl v-else>
+            <div
+              v-for="item in entry.facts"
+              :key="item.label"
+              class="flex gap-4 border-gray-200 px-4 py-2 not-last:border-b dark:border-gray-700"
+            >
+              <dt class="font-medium">{{ item.label }}</dt>
+              <dd class="ml-auto">{{ item.value }}</dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+
+      <AdvancedSettingsDropdown>
+        <template #title>
+          {{ t('standalone.flows.raw_data') }}
+        </template>
+        <pre class="col-span-full overflow-auto rounded-md bg-gray-50 p-4 text-sm dark:bg-gray-900">
+        <code>{{ JSON.stringify(_flow, null, 2) }}</code>
+      </pre>
+      </AdvancedSettingsDropdown>
+    </div>
+  </NeModal>
+</template>
diff --git a/src/components/standalone/monitoring/flows/FlowTableRow.vue b/src/components/standalone/monitoring/flows/FlowTableRow.vue
new file mode 100644
index 000000000..7faec1d16
--- /dev/null
+++ b/src/components/standalone/monitoring/flows/FlowTableRow.vue
@@ -0,0 +1,125 @@
+<script lang="ts" setup>
+import {
+  type Badge,
+  extractBadges,
+  type FlowEvent
+} from '@/components/standalone/monitoring/FlowsTable.vue'
+import { kbpsFormat, NeButton, NeTableCell, NeTableRow, NeTooltip } from '@nethesis/vue-components'
+import { useI18n } from 'vue-i18n'
+import { computed } from 'vue'
+import { differenceInSeconds } from 'date-fns'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import {
+  faArrowDown,
+  faArrowUp,
+  faCircleQuestion,
+  faMagnifyingGlassPlus
+} from '@fortawesome/free-solid-svg-icons'
+import FlowBadge from '@/components/standalone/monitoring/flows/FlowBadge.vue'
+import { type Application, type Protocol, useNetifydStore } from '@/stores/standalone/netifyd.ts'
+
+const { item } = defineProps<{
+  item: FlowEvent
+}>()
+
+defineEmits<{
+  show: [flow: FlowEvent]
+}>()
+
+const { t } = useI18n()
+const netifydStore = useNetifydStore()
+
+const flowAge = computed<string>(() => {
+  const totalSeconds = differenceInSeconds(item.flow.last_seen_at, item.flow.first_seen_at)
+  const hours = Math.floor(totalSeconds / 3600)
+  const minutes = Math.floor((totalSeconds % 3600) / 60)
+  const seconds = totalSeconds % 60
+  return [hours, minutes, seconds].map((value) => String(value).padStart(2, '0')).join(':')
+})
+
+const appDetails = computed<Application>(() => netifydStore.getApplicationByFlow(item.flow))
+
+const protocolDetails = computed<Protocol>(() => netifydStore.getProtocolByFlow(item.flow))
+
+const badges = computed<Badge[]>(() => extractBadges(item))
+
+const sourceIp = computed<string>(() =>
+  item.flow.local_origin ? item.flow.local_ip : item.flow.other_ip
+)
+const sourcePort = computed<number>(() =>
+  item.flow.local_origin ? item.flow.local_port : item.flow.other_port
+)
+const destinationIp = computed<string>(() =>
+  item.flow.local_origin ? item.flow.other_ip : item.flow.local_ip
+)
+const destinationPort = computed<number>(() =>
+  item.flow.local_origin ? item.flow.other_port : item.flow.local_port
+)
+
+function formatRate(rate: number): string {
+  return kbpsFormat((rate * 8) / 1000)
+}
+</script>
+
+<template>
+  <NeTableRow>
+    <NeTableCell :data-label="t('standalone.flows.application')">
+      <span class="flex items-center gap-4">
+        <img v-if="appDetails.icon" :src="appDetails.icon" class="size-6" :alt="appDetails.label" />
+        <FontAwesomeIcon v-else :icon="faCircleQuestion" class="size-6" />
+        <span>{{ appDetails.label }}</span>
+      </span>
+    </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.protocol')">
+      {{ protocolDetails.label }}
+    </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.tags')">
+      <span class="flex flex-wrap gap-2">
+        <FlowBadge v-for="badge in badges" :key="badge.text" :badge="badge" />
+      </span>
+    </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.source')">
+      {{ sourceIp }}:{{ sourcePort }}
+    </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.destination')">
+      <NeTooltip v-if="item.flow.host_server_name != undefined" trigger-event="mouseenter click">
+        <template #content>
+          <p>{{ t('standalone.flows.destination_ip') }}: {{ destinationIp }}</p>
+          <p>{{ t('standalone.flows.destination_port') }}: {{ destinationPort }}</p>
+          <p v-if="item.flow.dns_host_name != undefined">
+            {{ t('standalone.flows.destination_dns') }} : {{ item.flow.dns_host_name }}
+          </p>
+        </template>
+        <template #trigger> {{ item.flow.host_server_name }}:{{ destinationPort }} </template>
+      </NeTooltip>
+      <template v-else> {{ destinationIp }}:{{ destinationPort }} </template>
+    </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.download')">
+      <div class="flex items-center gap-2">
+        <FontAwesomeIcon :icon="faArrowDown" />
+        <span v-if="item.flow.local_origin">{{ formatRate(item.flow.other_rate) }}</span>
+        <span v-else>{{ formatRate(item.flow.local_rate) }}</span>
+      </div>
+    </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.upload')">
+      <div class="flex items-center gap-2">
+        <FontAwesomeIcon :icon="faArrowUp" />
+        <span v-if="item.flow.local_origin">{{ formatRate(item.flow.local_rate) }}</span>
+        <span v-else>{{ formatRate(item.flow.other_rate) }}</span>
+      </div>
+    </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.duration')">
+      {{ flowAge }}
+    </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.last_seen_at')">
+      {{ new Date(item.flow.last_seen_at).toLocaleTimeString() }}
+    </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.more_info')">
+      <div class="flex items-start">
+        <NeButton kind="tertiary" @click="$emit('show', item)">
+          <FontAwesomeIcon :icon="faMagnifyingGlassPlus" />
+        </NeButton>
+      </div>
+    </NeTableCell>
+  </NeTableRow>
+</template>
diff --git a/src/components/standalone/monitoring/flows/RefreshProgressBar.vue b/src/components/standalone/monitoring/flows/RefreshProgressBar.vue
new file mode 100644
index 000000000..c136defcb
--- /dev/null
+++ b/src/components/standalone/monitoring/flows/RefreshProgressBar.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useIntervalFn, useNow } from '@vueuse/core'
+import { NeProgressBar } from '@nethesis/vue-components'
+
+const { dataUpdatedAt, interval } = defineProps<{
+  dataUpdatedAt: number
+  interval: number | false
+}>()
+
+const now = useNow({
+  scheduler: (cb) => useIntervalFn(cb, 1000)
+})
+
+const progress = computed(() => {
+  if (interval == false) {
+    return 0
+  }
+  const elapsed = now.value.getTime() - dataUpdatedAt
+  const progressValue = (elapsed / interval) * 100
+  return Math.max(0, Math.min(progressValue, 100))
+})
+</script>
+
+<template>
+  <div v-if="interval != false">
+    <NeProgressBar :progress="progress" color="indigo" size="sm" />
+  </div>
+</template>
diff --git a/src/composables/useTabs.ts b/src/composables/useTabs.ts
index 6237d2a5b..99d50c698 100644
--- a/src/composables/useTabs.ts
+++ b/src/composables/useTabs.ts
@@ -2,41 +2,19 @@
 //  SPDX-License-Identifier: GPL-3.0-or-later
 
 import type { Tab } from '@nethesis/vue-components'
-import { ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { ref } from 'vue'
+import { useRouteQuery } from '@vueuse/router'
 
 /**
  * Composable that handles the state associated to the tabs of a page, binding them to
  * the router's `tab` query string.
- * @param {Tab[]} tabsList - A list containing all the tabs.
- * @param {string} [initialTabName] - If present, `selectedTab` will be set to
+ * @param {Tab[]} tabsList - A list containing all the tabs, the first tab will be selected by default.
  * the specified value when the component is mounted. If absent, the first value in `tabsList` will be
  * used instead.
  */
-export function useTabs(tabsList: Tab[], initialTabName?: string) {
-  const route = useRoute()
-  const router = useRouter()
-
+export function useTabs(tabsList: Tab[]) {
   const tabs = ref(tabsList)
-  const selectedTab = ref('')
-  const currentPath = route.path
-
-  watch(
-    () => route.query.tab,
-    () => {
-      if (route.path === currentPath) {
-        selectedTab.value =
-          (route.query.tab as string) ??
-          initialTabName ??
-          (tabs.value.length > 0 ? (tabs.value[0]?.name ?? '') : '')
-      }
-    },
-    { immediate: true }
-  )
-
-  watch(selectedTab, () => {
-    router.push({ path: route.path, query: { tab: selectedTab.value } })
-  })
+  const selectedTab = useRouteQuery('tab', tabs.value[0]?.name ?? '')
 
   return { tabs, selectedTab }
 }
diff --git a/src/i18n/en.json b/src/i18n/en.json
index c3cf617a6..4116f1ee2 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -70,7 +70,8 @@
     "automated_tooltip": "This item is managed by the system and cannot be modified.",
     "remove": "Remove",
     "connected": "Connected",
-    "not_connected": "Not connected"
+    "not_connected": "Not connected",
+    "port": "Port"
   },
   "error": {
     "generic_error": "Something went wrong",
@@ -429,7 +430,8 @@
     "duplicate_port": "Port has already been used",
     "cannot_regenerate_cert": "Cannot regenerate certificates",
     "cannot_renew_server_cert": "Cannot renew server certificate",
-    "cannot_regenerate_all_certs": "Cannot regenerate all certificates"
+    "cannot_regenerate_all_certs": "Cannot regenerate all certificates",
+    "cannot_retrieve_flows": "Cannot retrieve flows, please try again later"
   },
   "ne_text_input": {
     "show_password": "Show password",
@@ -2285,6 +2287,7 @@
       "cannot_open_grafana_message": "Grafana monitoring is available only after connecting the unit to a controller",
       "cannot_open_report_from_controller": "Cannot open report from a controlled unit. You can open the report by accessing the unit UI directly, or by accessing the controller UI, going to 'Unit manager' page, clicking the three dots menu of the unit and selecting 'Open metrics'.",
       "traffic": "Traffic",
+      "daily_traffic": "Daily traffic",
       "connectivity": "WAN uplinks",
       "vpn": "VPN",
       "security": "Security",
@@ -2296,7 +2299,7 @@
       "today_top_protocols": "Protocols",
       "no_protocols": "No protocols",
       "daily_total_traffic": "Daily total traffic",
-      "instant_traffic": "Real-time traffic",
+      "top_talkers": "Top Talkers",
       "today_traffic": "Today traffic",
       "recent_traffic": "Recent traffic",
       "host": "Host",
@@ -2355,7 +2358,75 @@
       "public_ip_address": "Public IP address",
       "error_fetching_data": "Error fetching data",
       "remote_hosts": "Remote hosts",
-      "no_data_available": "No data available"
+      "no_data_available": "No data available",
+      "live_flows": "Live flows"
+    },
+    "flows": {
+      "subtitle": "View real-time network connections, each row represents an active flow with live transfer rates and total traffic.",
+      "application": "Application",
+      "protocol": "Protocol",
+      "source": "Source",
+      "destination": "Destination",
+      "origin": "Origin",
+      "duration": "Duration",
+      "download": "Download",
+      "upload": "Upload",
+      "total_download": "Tot. download",
+      "total_upload": "Tot. upload",
+      "last_seen_at": "Last seen at",
+      "refresh_interval": "Refresh interval: { value }",
+      "tags": "Tags",
+      "internal": "Internal",
+      "internal_description": "Connection is between local networks",
+      "remote": "Remote",
+      "remote_description": "Connection has been established from internet to the firewall",
+      "more_info": "More info",
+      "flow_details": "Flow details",
+      "endpoint_information": "Endpoint information",
+      "source_ip": "Source IP",
+      "source_port": "Source port",
+      "source_mac": "Source MAC",
+      "destination_ip": "Destination IP",
+      "destination_dns": "Destination DNS",
+      "destination_port": "Destination port",
+      "destination_mac": "Destination MAC",
+      "traffic_inspection_details": "Traffic Inspection Details",
+      "partial_traffic_inspection": "Partial traffic inspection",
+      "flow_info": "Flow info",
+      "conntrack_id": "Conntrack ID",
+      "first_seen_at": "First seen at",
+      "packets_analyzed": "Packets analyzed",
+      "detection_guessed": "Detection guessed",
+      "hostname_information": "Hostname information",
+      "hostname": "Hostname",
+      "domain": "Domain",
+      "tls_sni_hostname": "TLS SNI hostname",
+      "traffic_flow": "Traffic flow",
+      "upload_rate": "Upload rate",
+      "download_rate": "Download rate",
+      "upload_bytes": "Upload bytes",
+      "download_bytes": "Download bytes",
+      "total_bytes": "Total bytes",
+      "no_flows_found": "No flows found",
+      "no_flows_found_description": "No flows found for the current filters. Try changing the search filters or wait for new connections to be established.",
+      "scanning": "Scanning",
+      "scanning_description": "The flow is currently being analyzed. Additional insights will be available once the scan completes.",
+      "risks_detected": "Risks detected",
+      "outgoing": "Outgoing",
+      "outgoing_description": "The connection has been initiated from local networks to the internet",
+      "broadcast": "Broadcast",
+      "broadcast_description": "The connection is a broadcast connection",
+      "unable_to_get_flows_configuration": "Unable to get flows daemon configuration",
+      "unable_to_configure_flows_daemon": "Unable to configure flows daemon",
+      "daemon_disabled": "Flows daemon is disabled.",
+      "daemon_disabled_description": "Please enable it in the settings to view real-time network connections.",
+      "configure_flows_daemon": "Configure flows daemon",
+      "daemon_enabled": "Flows daemon enabled",
+      "persistence_after_expiration": "Flows persistence after expiration",
+      "persistence_after_expiration_description": "Keep flow information available for a short period after the flow has ended. This allows to view information about recently ended flows, which can be useful to investigate connections that are established and closed in a short time frame.",
+      "daemon_not_running": "Flows daemon is enabled but not running",
+      "daemon_not_running_description": "If you just enabled the daemon, commit changes and wait a few seconds for the daemon to start. If the problem persists, check the system logs for errors related to the flows daemon.",
+      "raw_data": "Raw data"
     },
     "ping_latency_monitor": {
       "title": "Ping latency monitor",
diff --git a/src/lib/__tests__/ipUtils.spec.ts b/src/lib/__tests__/ipUtils.spec.ts
index 65108f921..2d7e486e7 100644
--- a/src/lib/__tests__/ipUtils.spec.ts
+++ b/src/lib/__tests__/ipUtils.spec.ts
@@ -1,5 +1,5 @@
 import { expect, test, describe } from 'vitest'
-import { ipv4ToInt } from '@/lib/ipUtils.ts'
+import { ipv4ToInt, sortIps } from '@/lib/ipUtils.ts'
 
 describe('ipUtils', function () {
   test.each([
@@ -20,4 +20,113 @@ describe('ipUtils', function () {
       expect(() => ipv4ToInt(ip)).toThrowError('Invalid IPv4 address')
     }
   )
+
+  describe('sortIps', () => {
+    test('sorts IPv4 addresses correctly', () => {
+      const ips = ['192.168.1.10', '192.168.1.2', '10.0.0.1', '192.168.1.1']
+      const sorted = [...ips].sort(sortIps)
+      expect(sorted).toEqual(['10.0.0.1', '192.168.1.1', '192.168.1.2', '192.168.1.10'])
+    })
+
+    test('sorts IPv6 addresses correctly', () => {
+      const ips = ['2001:db8::2', '2001:db8::1', '2001:db8::10', '::1']
+      const sorted = [...ips].sort(sortIps)
+      expect(sorted).toEqual(['::1', '2001:db8::1', '2001:db8::2', '2001:db8::10'])
+    })
+
+    test('sorts mixed IPv4 and IPv6 with IPv4 first', () => {
+      const ips = ['2001:db8::1', '192.168.1.1', '::1', '10.0.0.1', '2001:db8::2', '192.168.1.10']
+      const sorted = [...ips].sort(sortIps)
+      expect(sorted).toEqual([
+        '10.0.0.1',
+        '192.168.1.1',
+        '192.168.1.10',
+        '::1',
+        '2001:db8::1',
+        '2001:db8::2'
+      ])
+    })
+
+    test('handles compressed and expanded IPv6 notation', () => {
+      const ips = ['2001:0db8:0000:0000:0000:0000:0000:0001', '2001:db8::2', '2001:db8::1']
+      const sorted = [...ips].sort(sortIps)
+      expect(sorted).toEqual([
+        '2001:0db8:0000:0000:0000:0000:0000:0001',
+        '2001:db8::1',
+        '2001:db8::2'
+      ])
+    })
+
+    test('handles empty array', () => {
+      const sorted = [].sort(sortIps)
+      expect(sorted).toEqual([])
+    })
+
+    test('handles single IP', () => {
+      expect(['192.168.1.1'].sort(sortIps)).toEqual(['192.168.1.1'])
+      expect(['2001:db8::1'].sort(sortIps)).toEqual(['2001:db8::1'])
+    })
+
+    test('does not mutate original array when using spread', () => {
+      const ips = ['192.168.1.2', '192.168.1.1']
+      const original = [...ips]
+      const sorted = [...ips].sort(sortIps)
+      expect(ips).toEqual(original)
+      expect(sorted).toEqual(['192.168.1.1', '192.168.1.2'])
+    })
+
+    test('sorts real-world example from FlowsTable', () => {
+      const ips = [
+        '192.168.1.203',
+        '192.168.1.111',
+        '192.168.120.12',
+        '192.168.1.202',
+        '10.0.0.1',
+        '2001:db8::1',
+        '::1'
+      ]
+      const sorted = [...ips].sort(sortIps)
+      expect(sorted).toEqual([
+        '10.0.0.1',
+        '192.168.1.111',
+        '192.168.1.202',
+        '192.168.1.203',
+        '192.168.120.12',
+        '::1',
+        '2001:db8::1'
+      ])
+    })
+
+    test('comparator returns negative for IPv4 < IPv4', () => {
+      expect(sortIps('10.0.0.1', '192.168.1.1')).toBeLessThan(0)
+    })
+
+    test('comparator returns positive for IPv4 > IPv4', () => {
+      expect(sortIps('192.168.1.1', '10.0.0.1')).toBeGreaterThan(0)
+    })
+
+    test('comparator returns zero for equal IPv4', () => {
+      expect(sortIps('192.168.1.1', '192.168.1.1')).toBe(0)
+    })
+
+    test('comparator returns negative for IPv6 < IPv6', () => {
+      expect(sortIps('::1', '2001:db8::1')).toBeLessThan(0)
+    })
+
+    test('comparator returns positive for IPv6 > IPv6', () => {
+      expect(sortIps('2001:db8::1', '::1')).toBeGreaterThan(0)
+    })
+
+    test('comparator returns zero for equal IPv6', () => {
+      expect(sortIps('2001:db8::1', '2001:db8::1')).toBe(0)
+    })
+
+    test('comparator returns negative when IPv4 compared to IPv6', () => {
+      expect(sortIps('192.168.1.1', '2001:db8::1')).toBe(-1)
+    })
+
+    test('comparator returns positive when IPv6 compared to IPv4', () => {
+      expect(sortIps('2001:db8::1', '192.168.1.1')).toBe(1)
+    })
+  })
 })
diff --git a/src/lib/ipUtils.ts b/src/lib/ipUtils.ts
index 89ab53bc9..fafe864a0 100644
--- a/src/lib/ipUtils.ts
+++ b/src/lib/ipUtils.ts
@@ -8,3 +8,72 @@ export function ipv4ToInt(ip: string): number {
   }
   return ip.split('.').reduce((acc, val) => acc * 256 + parseInt(val), 0)
 }
+
+/**
+ * Check if a string is a valid IPv4 address
+ */
+function isIPv4(ip: string): boolean {
+  return /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(
+    ip
+  )
+}
+
+/**
+ * Normalize IPv6 address by expanding compressed notation
+ */
+function normalizeIPv6(ip: string): string {
+  // Remove zone identifier if present (e.g., %eth0)
+  const cleanIp = ip.split('%')[0] || ip
+
+  // Handle :: compression
+  if (cleanIp.includes('::')) {
+    const sides = cleanIp.split('::')
+    const leftGroups = sides[0] ? sides[0].split(':') : []
+    const rightGroups = sides[1] ? sides[1].split(':') : []
+    const missingGroups = 8 - leftGroups.length - rightGroups.length
+    const middleGroups = Array(missingGroups).fill('0')
+    const allGroups = [...leftGroups, ...middleGroups, ...rightGroups]
+    return allGroups.map((g) => g.padStart(4, '0')).join(':')
+  }
+
+  // Already expanded, just pad each group
+  return cleanIp
+    .split(':')
+    .map((g) => g.padStart(4, '0'))
+    .join(':')
+}
+
+/**
+ * Convert IPv6 address to array of numeric segments for comparison
+ */
+function ipv6ToSegments(ip: string): number[] {
+  const normalized = normalizeIPv6(ip)
+  return normalized.split(':').map((segment) => parseInt(segment, 16))
+}
+
+/**
+ * Sort IP addresses (IPv4 and IPv6). IPv4 addresses are sorted first, followed by IPv6.
+ *
+ * @param a First IP address
+ * @param b Second IP address
+ * @returns Negative if a < b, 0 if equal, positive if a > b
+ */
+export function sortIps(a: string, b: string): number {
+  const aIsV4 = isIPv4(a)
+  const bIsV4 = isIPv4(b)
+
+  if (aIsV4 && bIsV4) {
+    return ipv4ToInt(a) - ipv4ToInt(b)
+  }
+  if (!aIsV4 && !bIsV4) {
+    const segmentsA = ipv6ToSegments(a)
+    const segmentsB = ipv6ToSegments(b)
+    for (let i = 0; i < 8; i++) {
+      const diff = (segmentsA[i] || 0) - (segmentsB[i] || 0)
+      if (diff !== 0) return diff
+    }
+    return 0
+  }
+
+  return aIsV4 ? -1 : 1
+}
diff --git a/src/main.ts b/src/main.ts
index 3eff66a31..1501ba892 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -12,6 +12,7 @@ import messages from '@intlify/unplugin-vue-i18n/messages'
 
 import App from './App.vue'
 import router from './router'
+import { VueQueryPlugin } from '@tanstack/vue-query'
 
 const app = createApp(App)
 const pinia = createPinia()
@@ -38,4 +39,9 @@ app.use(
   })
 )
 
+// tanstack
+app.use(VueQueryPlugin, {
+  enableDevtoolsV6Plugin: true
+})
+
 app.mount('#app')
diff --git a/src/stores/standalone/netifyd.ts b/src/stores/standalone/netifyd.ts
new file mode 100644
index 000000000..99ed61b18
--- /dev/null
+++ b/src/stores/standalone/netifyd.ts
@@ -0,0 +1,103 @@
+import { defineStore } from 'pinia'
+import { useQuery } from '@tanstack/vue-query'
+import { ubusCall } from '@/lib/standalone/ubus.ts'
+import type { Flow } from '@/components/standalone/monitoring/FlowsTable.vue'
+
+export type Response<T> = {
+  data: {
+    values: T[]
+  }
+}
+
+export type Application = {
+  id: number
+  tag: string
+  label: string
+  icon?: string
+}
+
+export type Protocol = {
+  id: number
+  tag: string
+  label: string
+}
+
+export const useNetifydStore = defineStore('netifyd', () => {
+  const applications = useQuery({
+    queryKey: ['netifyd', 'applications'],
+    queryFn: () => ubusCall<Response<Application>>('ns.dpi', 'list-application-catalog'),
+    select: (data) => data.data.values,
+    initialData: { data: { values: [] } }
+  })
+
+  const protocols = useQuery({
+    queryKey: ['netifyd', 'protocols'],
+    queryFn: () => ubusCall<Response<Application>>('ns.dpi', 'list-protocol-catalog'),
+    select: (data) => data.data.values,
+    initialData: { data: { values: [] } }
+  })
+
+  function getApplicationByFlow(flow: Flow): Application {
+    const app = applications.data.value.find((app) => app.id == flow.detected_application)
+    if (app != undefined) {
+      return app
+    }
+    return {
+      id: flow.detected_application,
+      tag: flow.detected_application_name,
+      label: generateApplicationLabel(flow.detected_application_name)
+    }
+  }
+
+  function generateApplicationLabel(applicationName: string): string {
+    let name = applicationName
+    // Remove netify. prefix if present
+    if (name.startsWith('netify.')) {
+      name = name.substring(7)
+    }
+    // Replace dashes with spaces
+    name = name.replace(/-/g, ' ')
+    // Capitalize first character of each word
+    return name
+      .split(' ')
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ')
+  }
+
+  function getProtocolByFlow(flow: Flow): Protocol {
+    const proto = protocols.data.value.find((proto) => proto.id == flow.detected_protocol)
+    if (proto != undefined) {
+      return proto
+    }
+    return {
+      id: flow.detected_protocol,
+      tag: flow.detected_protocol_name,
+      label: flow.detected_protocol_name
+    }
+  }
+
+  function getApplicationNameById(id: number, fallback: string): string {
+    const app = applications.data.value.find((app) => app.id == id)
+    if (app != undefined) {
+      return app.label
+    }
+    return generateApplicationLabel(fallback)
+  }
+
+  function getProtocolNameById(id: number, fallback: string): string {
+    const proto = protocols.data.value.find((proto) => proto.id == id)
+    if (proto != undefined) {
+      return proto.label
+    }
+    return fallback
+  }
+
+  return {
+    applications,
+    protocols,
+    getApplicationByFlow,
+    getProtocolByFlow,
+    getApplicationNameById,
+    getProtocolNameById
+  }
+})
diff --git a/src/views/standalone/monitoring/RealTimeMonitoringView.vue b/src/views/standalone/monitoring/RealTimeMonitoringView.vue
index 1ce12b590..85208ba70 100644
--- a/src/views/standalone/monitoring/RealTimeMonitoringView.vue
+++ b/src/views/standalone/monitoring/RealTimeMonitoringView.vue
@@ -21,13 +21,22 @@ import { isStandaloneMode } from '@/lib/config'
 import { onMounted, ref } from 'vue'
 import { ubusCall } from '@/lib/standalone/ubus'
 import InstantTrafficMonitor from '@/components/standalone/monitoring/InstantTrafficMonitor.vue'
+import FlowSection from '@/components/standalone/monitoring/FlowSection.vue'
 
 const { t } = useI18n()
 
 const { tabs, selectedTab } = useTabs([
   {
-    name: 'traffic',
-    label: t('standalone.real_time_monitor.traffic')
+    name: 'daily-traffic',
+    label: t('standalone.real_time_monitor.daily_traffic')
+  },
+  {
+    name: 'live-flows',
+    label: t('standalone.real_time_monitor.live_flows')
+  },
+  {
+    name: 'top-talkers',
+    label: t('standalone.real_time_monitor.top_talkers')
   },
   {
     name: 'connectivity',
@@ -40,10 +49,6 @@ const { tabs, selectedTab } = useTabs([
   {
     name: 'security',
     label: t('standalone.real_time_monitor.security')
-  },
-  {
-    name: 'instant-traffic',
-    label: t('standalone.real_time_monitor.instant_traffic')
   }
 ])
 
@@ -162,10 +167,11 @@ function openGrafana() {
       class="mb-8"
       @select-tab="selectedTab = $event"
     />
-    <TrafficMonitor v-if="selectedTab === 'traffic'" />
+    <TrafficMonitor v-if="selectedTab === 'daily-traffic'" />
     <ConnectivityMonitor v-else-if="selectedTab === 'connectivity'" />
     <VpnMonitor v-else-if="selectedTab === 'vpn'" />
     <SecurityMonitor v-else-if="selectedTab === 'security'" />
-    <InstantTrafficMonitor v-else-if="selectedTab == 'instant-traffic'" />
+    <InstantTrafficMonitor v-else-if="selectedTab == 'top-talkers'" />
+    <FlowSection v-else-if="selectedTab == 'live-flows'" />
   </div>
 </template>