diff --git a/public/i18n/en/translation.json b/public/i18n/en/translation.json
index 27e99bee0..2f73e8bb6 100644
--- a/public/i18n/en/translation.json
+++ b/public/i18n/en/translation.json
@@ -355,7 +355,9 @@
     "cannot_delete_backup": "Cannot delete remote backup",
     "end_must_be_greater_then_start": "IP end must be greater than start",
     "start_reserved": "First IP of network is reserved",
-    "cannot_retrieve_object_suggestions": "Cannot retrieve object suggestions"
+    "cannot_retrieve_object_suggestions": "Cannot retrieve object suggestions",
+    "cannot_retrieve_nat_helpers": "Cannot retrieve NAT helpers",
+    "cannot_save_nat_helper": "Cannot save NAT helper"
   },
   "ne_text_input": {
     "show_password": "Show password",
@@ -1864,7 +1866,8 @@
       "rewrite_ip": "Rewrite IP",
       "delete_nat_rule": "Delete NAT rule",
       "confirm_delete_rule": "You are about to delete NAT rule '{name}'",
-      "any_address": "Any address"
+      "any_address": "Any address",
+      "rules_and_netmap": "Rules and NETMAP"
     },
     "netmap": {
       "title": "NETMAP",
@@ -1889,6 +1892,23 @@
       "delete_netmap": "Delete NETMAP",
       "confirm_delete_rule": "You are about to delete NETMAP '{name}'"
     },
+    "nat_helpers": {
+      "title": "NAT helpers",
+      "nat_helpers_description": "NAT helpers are used to automatically modify the payload of specific protocols to allow them to pass through NAT.",
+      "module": "Module",
+      "status": "Status",
+      "loaded_on_kernel": "Loaded on kernel",
+      "loaded": "Loaded",
+      "not_loaded": "Not loaded",
+      "enabled_but_not_loaded_tooltip": "The module is enabled but not loaded on the kernel.",
+      "disabled_but_loaded_tooltip": "This module is disabled but currently loaded on the kernel: you might need to reboot the unit to unload it.",
+      "filter_nat_helpers": "Filter NAT helpers",
+      "no_nat_helpers_found": "No NAT helpers found",
+      "edit_nat_helper": "Edit NAT helper",
+      "reboot_to_apply_changes": "Reboot to apply NAT helper changes",
+      "reboot_to_apply_changes_description": "Reboot the unit to apply the changes to module '{module}'",
+      "nat_helper_name_saved": "NAT helper '{module}' saved"
+    },
     "conntrack": {
       "title": "Connections",
       "short_title": "Connections",
diff --git a/src/components/standalone/firewall/nat/EditNatHelperDrawer.vue b/src/components/standalone/firewall/nat/EditNatHelperDrawer.vue
new file mode 100644
index 000000000..d92e9fcb7
--- /dev/null
+++ b/src/components/standalone/firewall/nat/EditNatHelperDrawer.vue
@@ -0,0 +1,265 @@
+<!--
+  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 { ref } from 'vue'
+import { MessageBag, validateRequired, type validationOutput } from '@/lib/validation'
+import { watch } from 'vue'
+import { ubusCall, ValidationError } from '@/lib/standalone/ubus'
+import {
+  NeInlineNotification,
+  NeSideDrawer,
+  NeButton,
+  NeTextInput,
+  getAxiosErrorMessage
+} from '@nethesis/vue-components'
+import { NeToggle } from '@nethesis/vue-components'
+import type { NatHelper } from '@/stores/standalone/firewall'
+import { upperFirst } from 'lodash-es'
+import { useNotificationsStore } from '@/stores/notifications'
+import { useRouter } from 'vue-router'
+import { getStandaloneRoutePrefix } from '@/lib/router'
+
+type Param = {
+  name: string
+  value: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    isShown: boolean
+    natHelper?: NatHelper
+  }>(),
+  { isShown: false }
+)
+
+const emit = defineEmits(['close', 'reloadData'])
+
+const { t } = useI18n()
+const notificationsStore = useNotificationsStore()
+const router = useRouter()
+
+const module = ref('')
+const enabled = ref(true)
+const params = ref<Param[]>([])
+const errorBag = ref(new MessageBag())
+
+const loading = ref({
+  editNatHelper: false
+})
+
+const error = ref({
+  editNatHelper: '',
+  editNatHelperDetails: ''
+})
+
+watch(
+  () => props.isShown,
+  () => {
+    if (props.isShown) {
+      clearErrors()
+
+      if (props.natHelper) {
+        module.value = props.natHelper.name
+        enabled.value = props.natHelper.enabled
+        const moduleParams = []
+
+        if (props.natHelper.params) {
+          for (let [paramName, paramValue] of Object.entries(props.natHelper.params)) {
+            moduleParams.push({
+              name: paramName,
+              value: paramValue
+            })
+          }
+          params.value = moduleParams
+        }
+      }
+    }
+  }
+)
+
+function clearErrors() {
+  errorBag.value.clear()
+  error.value.editNatHelper = ''
+  error.value.editNatHelperDetails = ''
+}
+
+function runValidators(validators: validationOutput[], label: string): boolean {
+  for (let validator of validators) {
+    if (!validator.valid) {
+      errorBag.value.set(label, [validator.errMessage as string])
+    }
+  }
+  return validators.every((validator) => validator.valid)
+}
+
+function validate() {
+  clearErrors()
+
+  if (!enabled.value) {
+    return true
+  }
+
+  // all parameters are required
+
+  const paramValidators: [validationOutput[], string][] = []
+
+  for (let param of params.value) {
+    paramValidators.push([[validateRequired(param.value)], param.name])
+  }
+
+  return paramValidators
+    .map(([validator, label]) => runValidators(validator, label))
+    .every((result) => result)
+}
+
+async function editNatHelper() {
+  const isValidationOk = validate()
+  if (!isValidationOk) {
+    return
+  }
+
+  loading.value.editNatHelper = true
+  const natHelperName = props.natHelper?.name
+
+  const payload = {
+    name: natHelperName,
+    enabled: enabled.value,
+    // convert params array to object
+    params: params.value.reduce((acc, param) => {
+      acc[param.name] = param.value
+      return acc
+    }, {} as Record<string, string>)
+  }
+
+  try {
+    const res = await ubusCall('ns.nathelpers', 'edit-nat-helper', payload)
+    const isRebootNeeded = res.data.reboot_needed
+
+    // show toast notification
+
+    let toastTitle = ''
+    let toastDescription = ''
+    let toastKind = ''
+    let toastAction: Function | undefined = undefined
+    let toastActionLabel = ''
+
+    if (isRebootNeeded) {
+      // show warning toast
+      toastTitle = t('standalone.nat_helpers.reboot_to_apply_changes')
+      toastDescription = t('standalone.nat_helpers.reboot_to_apply_changes_description', {
+        module: natHelperName
+      })
+      toastKind = 'warning'
+      toastAction = () => {
+        router.push(`${getStandaloneRoutePrefix()}/system/reboot-and-shutdown`)
+      }
+      toastActionLabel = t('common.go_to_page', { page: t('standalone.reboot_and_shutdown.title') })
+    } else {
+      // show success toast
+      toastTitle = t('standalone.nat_helpers.nat_helper_name_saved', {
+        module: natHelperName
+      })
+      toastKind = 'success'
+    }
+
+    setTimeout(() => {
+      notificationsStore.createNotification({
+        title: toastTitle,
+        description: toastDescription,
+        kind: toastKind,
+        secondaryAction: toastAction,
+        secondaryLabel: toastActionLabel
+      })
+    }, 500)
+
+    emit('reloadData')
+    closeDrawer()
+  } catch (err: any) {
+    console.error(err)
+
+    if (err instanceof ValidationError) {
+      errorBag.value = err.errorBag
+    } else {
+      error.value.editNatHelper = t(getAxiosErrorMessage(err))
+      error.value.editNatHelperDetails = err.toString()
+    }
+  } finally {
+    loading.value.editNatHelper = false
+  }
+}
+
+function closeDrawer() {
+  emit('close')
+}
+
+function getParamLabel(paramName: string) {
+  return upperFirst(paramName.replace(/_/g, ' '))
+}
+</script>
+
+<template>
+  <NeSideDrawer
+    :isShown="isShown"
+    :title="t('standalone.nat_helpers.edit_nat_helper')"
+    :closeAriaLabel="t('common.shell.close_side_drawer')"
+    @close="closeDrawer()"
+  >
+    <form @submit.prevent>
+      <div class="space-y-6">
+        <NeTextInput v-model="module" :label="t('standalone.nat_helpers.module')" disabled />
+        <NeToggle
+          v-model="enabled"
+          :topLabel="t('common.status')"
+          :label="enabled ? t('common.enabled') : t('common.disabled')"
+        />
+        <template v-if="enabled">
+          <!-- params -->
+          <NeTextInput
+            v-for="param in params"
+            :key="param.name"
+            v-model.trim="param.value"
+            :label="getParamLabel(param.name)"
+            :invalidMessage="t(errorBag.getFirstI18nKeyFor(param.name))"
+          />
+        </template>
+        <!-- editNatHelper error notification -->
+        <NeInlineNotification
+          v-if="error.editNatHelper"
+          kind="error"
+          :title="t('error.cannot_save_nat_helper')"
+          :description="error.editNatHelper"
+        >
+          <template #details v-if="error.editNatHelperDetails">
+            {{ error.editNatHelperDetails }}
+          </template>
+        </NeInlineNotification>
+        <!-- footer -->
+        <hr class="my-8 border-gray-200 dark:border-gray-700" />
+        <div class="flex justify-end">
+          <NeButton
+            kind="tertiary"
+            size="lg"
+            @click.prevent="closeDrawer"
+            :disabled="loading.editNatHelper"
+            class="mr-3"
+          >
+            {{ t('common.cancel') }}
+          </NeButton>
+          <NeButton
+            kind="primary"
+            size="lg"
+            @click.prevent="editNatHelper"
+            :disabled="loading.editNatHelper"
+            :loading="loading.editNatHelper"
+          >
+            {{ t('common.save') }}
+          </NeButton>
+        </div>
+      </div>
+    </form>
+  </NeSideDrawer>
+</template>
diff --git a/src/components/standalone/firewall/nat/NatHelpers.vue b/src/components/standalone/firewall/nat/NatHelpers.vue
new file mode 100644
index 000000000..3eaa4def9
--- /dev/null
+++ b/src/components/standalone/firewall/nat/NatHelpers.vue
@@ -0,0 +1,141 @@
+<!--
+  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 {
+  NeButton,
+  NeHeading,
+  NeInlineNotification,
+  NeTextInput,
+  getAxiosErrorMessage,
+  sortByProperty
+} from '@nethesis/vue-components'
+import { computed, onMounted, ref } from 'vue'
+import { type NatHelper } from '@/stores/standalone/firewall'
+import { ubusCall } from '@/lib/standalone/ubus'
+import NatHelpersTable from './NatHelpersTable.vue'
+import EditNatHelperDrawer from './EditNatHelperDrawer.vue'
+
+const { t } = useI18n()
+const natHelpers = ref<NatHelper[]>([])
+const currentNatHelper = ref<NatHelper | undefined>(undefined)
+const isShownEditNatHelper = ref(false)
+const textFilter = ref('')
+
+const loading = ref({
+  listNatHelpers: false
+})
+
+const error = ref({
+  listNatHelpers: '',
+  listNatHelpersDetails: ''
+})
+
+const filteredNatHelpers = computed(() => {
+  const regex = /[^a-zA-Z0-9-]/g
+  const queryText = textFilter.value.replace(regex, '')
+
+  return natHelpers.value.filter((natHelper) => {
+    return new RegExp(queryText, 'i').test(natHelper.name.replace(regex, ''))
+  })
+})
+
+onMounted(() => {
+  loadData()
+})
+
+async function loadData() {
+  listNatHelpers()
+}
+
+function clearFilters() {
+  textFilter.value = ''
+}
+
+async function listNatHelpers() {
+  loading.value.listNatHelpers = true
+  error.value.listNatHelpers = ''
+  error.value.listNatHelpersDetails = ''
+  natHelpers.value = []
+
+  try {
+    const res = await ubusCall('ns.nathelpers', 'list-nat-helpers')
+    const natHelpersList = res.data.values
+    // sort by status
+    natHelpers.value = natHelpersList.sort(sortByProperty('enabled')).reverse()
+  } catch (err: any) {
+    console.error(err)
+    error.value.listNatHelpers = t(getAxiosErrorMessage(err))
+    error.value.listNatHelpersDetails = err.toString()
+  } finally {
+    loading.value.listNatHelpers = false
+  }
+}
+
+function showEditNatHelper(natHelper: NatHelper) {
+  currentNatHelper.value = natHelper
+  isShownEditNatHelper.value = true
+}
+
+function hideEditNatHelperDrawer() {
+  isShownEditNatHelper.value = false
+}
+</script>
+
+<template>
+  <div>
+    <NeHeading tag="h5" class="mb-2">{{ t('standalone.nat_helpers.title') }}</NeHeading>
+    <div class="mb-8 max-w-2xl text-gray-500 dark:text-gray-400">
+      {{ t('standalone.nat_helpers.nat_helpers_description') }}
+    </div>
+    <!-- listNatHelpers error notification -->
+    <NeInlineNotification
+      v-if="error.listNatHelpers"
+      kind="error"
+      :title="t('error.cannot_retrieve_nat_helpers')"
+      :description="error.listNatHelpers"
+      class="mb-5"
+    >
+      <template #details v-if="error.listNatHelpersDetails">
+        {{ error.listNatHelpersDetails }}
+      </template>
+    </NeInlineNotification>
+    <div v-else class="space-y-6">
+      <!-- no error -->
+
+      <!-- filters -->
+      <div class="flex items-center gap-4">
+        <!-- text filter -->
+        <NeTextInput
+          :placeholder="t('standalone.nat_helpers.filter_nat_helpers')"
+          v-model.trim="textFilter"
+          :disabled="loading.listNatHelpers"
+          class="max-w-[12rem] sm:max-w-sm"
+        />
+        <!-- clear filters -->
+        <NeButton kind="tertiary" @click="clearFilters" :disabled="loading.listNatHelpers">
+          {{ t('common.clear_filters') }}
+        </NeButton>
+      </div>
+      <!-- nat helpers table -->
+      <NatHelpersTable
+        :filteredNatHelpers="filteredNatHelpers"
+        :totalNatHelpers="natHelpers.length"
+        :loading="loading.listNatHelpers"
+        @reloadNatHelpers="loadData"
+        @editNatHelper="showEditNatHelper"
+        @clearFilters="clearFilters"
+      />
+    </div>
+    <!-- edit rule drawer -->
+    <EditNatHelperDrawer
+      :natHelper="currentNatHelper"
+      :isShown="isShownEditNatHelper"
+      @close="hideEditNatHelperDrawer"
+      @reloadData="loadData"
+    />
+  </div>
+</template>
diff --git a/src/components/standalone/firewall/nat/NatHelpersTable.vue b/src/components/standalone/firewall/nat/NatHelpersTable.vue
new file mode 100644
index 000000000..58ee63a38
--- /dev/null
+++ b/src/components/standalone/firewall/nat/NatHelpersTable.vue
@@ -0,0 +1,170 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import {
+  NeTable,
+  NeTableHead,
+  NeTableHeadCell,
+  NeTableBody,
+  NeTableRow,
+  NeTableCell,
+  NePaginator,
+  useItemPagination,
+  NeButton,
+  NeTooltip,
+  NeEmptyState
+} from '@nethesis/vue-components'
+import { ref, type PropType } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { NatHelper } from '@/stores/standalone/firewall'
+
+const props = defineProps({
+  filteredNatHelpers: {
+    type: Array as PropType<NatHelper[]>,
+    required: true
+  },
+  totalNatHelpers: {
+    type: Number,
+    required: true
+  },
+  loading: {
+    type: Boolean,
+    required: true
+  }
+})
+
+const emit = defineEmits(['reloadNatHelpers', 'editNatHelper', 'clearFilters'])
+
+const { t } = useI18n()
+const pageSize = ref(25)
+const { currentPage, paginatedItems } = useItemPagination(() => props.filteredNatHelpers, {
+  itemsPerPage: pageSize
+})
+</script>
+
+<template>
+  <NeTable
+    :ariaLabel="t('standalone.dns_dhcp.scan_results')"
+    cardBreakpoint="xl"
+    :loading="loading"
+    :skeletonColumns="4"
+    :skeletonRows="7"
+  >
+    <NeTableHead>
+      <NeTableHeadCell>{{ t('standalone.nat_helpers.module') }}</NeTableHeadCell>
+      <NeTableHeadCell>{{ t('standalone.nat_helpers.status') }}</NeTableHeadCell>
+      <NeTableHeadCell>{{ t('standalone.nat_helpers.loaded_on_kernel') }}</NeTableHeadCell>
+      <NeTableHeadCell>
+        <!-- no header for actions -->
+      </NeTableHeadCell>
+    </NeTableHead>
+    <NeTableBody>
+      <!-- empty state -->
+      <NeTableRow v-if="!props.totalNatHelpers">
+        <NeTableCell colspan="4">
+          <NeEmptyState
+            :title="t('ne_table.no_items')"
+            :icon="['fas', 'table']"
+            class="bg-white dark:bg-gray-950"
+          />
+        </NeTableCell>
+      </NeTableRow>
+      <!-- no nat helper matching filter -->
+      <NeTableRow v-else-if="!props.filteredNatHelpers.length">
+        <NeTableCell colspan="4">
+          <NeEmptyState
+            :title="t('standalone.nat_helpers.no_nat_helpers_found')"
+            :description="t('common.try_changing_search_filters')"
+            :icon="['fas', 'circle-info']"
+            class="bg-white dark:bg-gray-950"
+          >
+            <NeButton kind="tertiary" @click="emit('clearFilters')">
+              {{ t('common.clear_filters') }}</NeButton
+            >
+          </NeEmptyState>
+        </NeTableCell>
+      </NeTableRow>
+      <NeTableRow v-else v-for="item in paginatedItems" :key="item.ip">
+        <NeTableCell :data-label="t('standalone.nat_helpers.module')">
+          {{ item.name }}
+        </NeTableCell>
+        <NeTableCell :data-label="t('standalone.nat_helpers.status')">
+          <div class="flex items-center gap-2">
+            <font-awesome-icon
+              :icon="['fas', item.enabled ? 'circle-check' : 'circle-xmark']"
+              class="h-4 w-4"
+              aria-hidden="true"
+            />
+            {{ item.enabled ? t('common.enabled') : t('common.disabled') }}
+          </div>
+        </NeTableCell>
+        <NeTableCell :data-label="t('standalone.nat_helpers.loaded_on_kernel')">
+          <div class="flex items-center gap-2">
+            <span>
+              {{
+                item.loaded
+                  ? t('standalone.nat_helpers.loaded')
+                  : t('standalone.nat_helpers.not_loaded')
+              }}
+            </span>
+            <!-- enabled/loaded inconsistency warning -->
+            <NeTooltip v-if="(item.enabled && !item.loaded) || (!item.enabled && item.loaded)">
+              <template #trigger>
+                <font-awesome-icon
+                  :icon="['fas', 'triangle-exclamation']"
+                  class="h-4 w-4 text-amber-500"
+                />
+              </template>
+              <template #content>
+                <p>
+                  {{
+                    item.enabled && !item.loaded
+                      ? t('standalone.nat_helpers.enabled_but_not_loaded_tooltip')
+                      : t('standalone.nat_helpers.disabled_but_loaded_tooltip')
+                  }}
+                </p>
+              </template>
+            </NeTooltip>
+          </div>
+        </NeTableCell>
+        <NeTableCell :data-label="t('common.actions')">
+          <div class="-ml-2.5 flex xl:ml-0 xl:justify-end">
+            <NeButton kind="tertiary" @click="emit('editNatHelper', item)">
+              <template #prefix>
+                <font-awesome-icon
+                  :icon="['fas', 'pen-to-square']"
+                  class="h-4 w-4"
+                  aria-hidden="true"
+                />
+              </template>
+              {{ t('common.edit') }}
+            </NeButton>
+          </div>
+        </NeTableCell>
+      </NeTableRow>
+    </NeTableBody>
+    <template #paginator>
+      <NePaginator
+        :current-page="currentPage"
+        :total-rows="props.filteredNatHelpers.length"
+        :page-size="pageSize"
+        :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>
+</template>
diff --git a/src/components/standalone/firewall/nat/NatRulesContent.vue b/src/components/standalone/firewall/nat/NatRulesContent.vue
index 643098f67..745464a5c 100644
--- a/src/components/standalone/firewall/nat/NatRulesContent.vue
+++ b/src/components/standalone/firewall/nat/NatRulesContent.vue
@@ -87,7 +87,6 @@ function hideCreateOrEditRuleDrawer() {
 
 <template>
   <div>
-    <NeHeading tag="h3" class="mb-7">{{ t('standalone.nat.title') }}</NeHeading>
     <NeHeading tag="h5" class="mb-2">{{ t('standalone.nat.nat_rules') }}</NeHeading>
     <div class="mb-8 flex flex-col items-start justify-between gap-6 md:flex-row">
       <div class="max-w-2xl text-gray-500 dark:text-gray-400">
diff --git a/src/stores/standalone/firewall.ts b/src/stores/standalone/firewall.ts
index e1c74cd08..17da35dce 100644
--- a/src/stores/standalone/firewall.ts
+++ b/src/stores/standalone/firewall.ts
@@ -100,6 +100,13 @@ export interface NetmapDevice {
 
 export type NetmapType = 'src' | 'dest'
 
+export interface NatHelper {
+  name: string
+  enabled: boolean
+  loaded: boolean
+  params?: Record<string, string>
+}
+
 export interface RuleService {
   id: string
   proto: string[]
diff --git a/src/views/standalone/firewall/NatView.vue b/src/views/standalone/firewall/NatView.vue
index 70c8c9cda..27b1473d6 100644
--- a/src/views/standalone/firewall/NatView.vue
+++ b/src/views/standalone/firewall/NatView.vue
@@ -6,13 +6,36 @@
 <script setup lang="ts">
 import NatRulesContent from '@/components/standalone/firewall/nat/NatRulesContent.vue'
 import NetmapContent from '@/components/standalone/firewall/nat/NetmapContent.vue'
+import NatHelpers from '@/components/standalone/firewall/nat/NatHelpers.vue'
+import { useTabs } from '@/composables/useTabs'
+import { NeHeading, NeTabs } from '@nethesis/vue-components'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const { tabs, selectedTab } = useTabs([
+  { name: 'nat', label: t('standalone.nat.rules_and_netmap') },
+  { name: 'natHelpers', label: t('standalone.nat_helpers.title') }
+])
 </script>
 
 <template>
   <div>
-    <!-- nat rules -->
-    <NatRulesContent />
-    <!-- netmap -->
-    <NetmapContent class="mt-12" />
+    <NeHeading tag="h3" class="mb-7">{{ t('standalone.nat.title') }}</NeHeading>
+    <NeTabs
+      :tabs="tabs"
+      :selected="selectedTab"
+      :srTabsLabel="t('ne_tabs.tabs')"
+      :srSelectTabLabel="t('ne_tabs.select_a_tab')"
+      @selectTab="selectedTab = $event"
+      class="mb-8"
+    />
+    <template v-if="selectedTab === 'nat'">
+      <!-- nat rules -->
+      <NatRulesContent />
+      <!-- netmap -->
+      <NetmapContent class="mt-12" />
+    </template>
+    <NatHelpers v-else-if="selectedTab === 'natHelpers'" />
   </div>
 </template>