diff --git a/public/i18n/en/translation.json b/public/i18n/en/translation.json
index b09253f9f..565d4a9a3 100644
--- a/public/i18n/en/translation.json
+++ b/public/i18n/en/translation.json
@@ -19,6 +19,7 @@
     "http_404": "Resource not found",
     "http_500": "Server error",
     "required": "Required",
+    "required_option": "Select at least one option",
     "validation_failed": "Validation failed",
     "invalid_hostname": "Invalid hostname",
     "hostname_is_too_long": "Hostname has too many characters",
@@ -34,6 +35,7 @@
     "invalid_ip_v6_address": "Invalid IPv6 address",
     "invalid_cidr_v4_address": "Enter a valid IPv4 address with CIDR notation",
     "invalid_cidr_v6_address": "Enter a valid IPv6 address with CIDR notation",
+    "invalid_port": "Enter an integer number between 1 and 65535",
     "invalid_uci_name": "Only letters, numbers and underscore (_) are allowed",
     "cannot_apply_configuration_changes": "Cannot apply configuration changes",
     "cannot_revert_configuration_changes": "Cannot revert configuration changes",
@@ -54,7 +56,16 @@
     "cannot_retrieve_wan_list": "Cannot retrieve WAN list",
     "cannot_retrieve_wan_traffic": "Cannot retrieve WAN traffic",
     "register_unit_error": "Cannot register unit",
-    "cancel_registration_error": "Cannot cancel registration"
+    "cancel_registration_error": "Cannot cancel registration",
+    "cannot_delete_port_forward": "Cannot delete port forward",
+    "cannot_create_port_forward": "Cannot create port forward",
+    "cannot_edit_port_forward": "Cannot edit port forward",
+    "cannot_duplicate_port_forward": "Cannot duplicate port forward",
+    "cannot_enable_port_forward": "Cannot enable port forward",
+    "cannot_disable_port_forward": "Cannot disable port forward",
+    "cannot_retrieve_protocols": "Cannot retrieve protocols",
+    "cannot_retrieve_zones": "Cannot retrieve zones",
+    "cannot_retrieve_wan_interfaces": "Cannot retrieve WAN interfaces"
   },
   "ne_text_input": {
     "show_password": "Show password",
@@ -459,6 +470,45 @@
       "enable_logging": "Enable logging on this zone",
       "delete_zone": "Delete \"{0}\"?"
     },
+    "port_forward": {
+      "title": "Port forward",
+      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      "add_port_forward": "Add port forward",
+      "name": "Name",
+      "source_port": "Source port",
+      "destination_port": "Destination port",
+      "protocols": "Protocols",
+      "wan_ip": "WAN IP",
+      "restrict_access_to": "Restrict access to",
+      "status": "Status",
+      "enabled": "Enabled",
+      "disabled": "Disabled",
+      "filter": "Filter",
+      "enable": "Enable",
+      "disable": "Disable",
+      "duplicate": "Duplicate",
+      "delete_port_forward": "Delete port forward",
+      "delete_port_forward_message": "You are about to delete port forward '{name}'",
+      "destination": "Destination",
+      "edit_port_forward": "Edit port forward",
+      "destination_address": "Destination address",
+      "destination_zone": "Destination zone",
+      "advanced_settings": "Advanced settings",
+      "add_ip_address": "Add IP address",
+      "log": "Log",
+      "hairpin_nat": "Hairpin NAT",
+      "hairpin_nat_zones": "Hairpin NAT enabled on following zones",
+      "choose_zone": "Choose zone",
+      "choose_protocol": "Choose protocol",
+      "any_zone": "Any zone",
+      "any": "Any",
+      "destination_address_tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      "restrict_access_to_tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      "no_port_forward_configured": "No port forward configured",
+      "no_port_forward_found": "No port forward found",
+      "filter_change_suggestion": "Try changing filter value",
+      "copy": "Copy"
+    },
     "firewall": {
       "title": "Firewall"
     },
diff --git a/src/components/standalone/NeMultiTextInput.vue b/src/components/standalone/NeMultiTextInput.vue
new file mode 100644
index 000000000..8c95712d1
--- /dev/null
+++ b/src/components/standalone/NeMultiTextInput.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { ref } from 'vue'
+import { NeButton, NeTextInput } from '@nethserver/vue-tailwind-lib'
+import { watch } from 'vue'
+
+const props = defineProps<{
+  modelValue: string[]
+  addItemLabel: string
+  invalidMessages?: string[]
+  title?: string
+  optional?: boolean
+  disableInputs?: boolean
+  disableAddButton?: boolean
+  optionalLabel?: string
+}>()
+
+const emit = defineEmits(['delete-item', 'add-item', 'update:modelValue'])
+
+const items = ref<string[]>([])
+
+function deleteItem(idx: number) {
+  items.value.splice(idx, 1)
+  emit('update:modelValue', items.value)
+  emit('delete-item')
+}
+
+function addItem() {
+  items.value.push('')
+  emit('update:modelValue', items.value)
+  emit('add-item')
+}
+
+function updateModelValue(idx: number, newValue: string) {
+  items.value[idx] = newValue
+  emit('update:modelValue', items.value)
+}
+
+watch(props.modelValue, () => {
+  items.value = [...props.modelValue]
+})
+
+onMounted(() => {
+  items.value = [...props.modelValue]
+})
+</script>
+
+<template>
+  <div>
+    <div v-if="title" class="mb-4 flex items-end justify-between">
+      <div>
+        <span class="mr-2 text-sm font-medium leading-6 text-gray-700 dark:text-gray-200">
+          {{ title }}
+        </span>
+        <slot name="tooltip"></slot>
+      </div>
+      <span v-if="optional" class="ml-2 font-normal">{{ optionalLabel }}</span>
+    </div>
+
+    <div class="space-y-6">
+      <div class="space-y-4">
+        <div v-for="(item, i) in items" :key="i" class="flex items-start gap-2">
+          <NeTextInput
+            :value="items[i]"
+            @input="updateModelValue(i, $event.target.value)"
+            class="grow"
+            :invalid-message="invalidMessages ? invalidMessages[i] : ''"
+            :disabled="disableInputs"
+          />
+          <NeButton kind="tertiary" size="md" @click="deleteItem(i)">
+            <font-awesome-icon :icon="['fas', 'trash']" class="h-4 w-4 py-1" aria-hidden="true" />
+          </NeButton>
+        </div>
+        <NeButton size="md" @click="addItem" :disabled="disableAddButton">
+          <template #prefix>
+            <font-awesome-icon :icon="['fas', 'plus']" class="h-4 w-4" aria-hidden="true" />
+          </template>
+          {{ addItemLabel }}
+        </NeButton>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/standalone/NeTable.vue b/src/components/standalone/NeTable.vue
index 1a5b7bdc9..47f855824 100644
--- a/src/components/standalone/NeTable.vue
+++ b/src/components/standalone/NeTable.vue
@@ -133,7 +133,7 @@ table {
 
 /* Base style CSS. */
 .table-basic {
-  @apply -mx-4 overflow-hidden overflow-x-auto border-y border-gray-300 dark:border-gray-600 sm:mx-0 sm:rounded-lg sm:border-x;
+  @apply -mx-4 overflow-x-auto border-y border-gray-300 dark:border-gray-600 sm:mx-0 sm:rounded-lg sm:border-x;
 }
 
 .table-basic.ghost {
diff --git a/src/components/standalone/SideMenu.vue b/src/components/standalone/SideMenu.vue
index 50fc18916..9cac3c929 100644
--- a/src/components/standalone/SideMenu.vue
+++ b/src/components/standalone/SideMenu.vue
@@ -64,6 +64,10 @@ const navigation: Ref<any> = ref([
     to: 'firewall',
     icon: 'block-brick-fire',
     children: [
+      {
+        name: t('standalone.port_forward.title'),
+        to: 'firewall/port-forward'
+      },
       {
         name: t('standalone.zones_and_policies.title'),
         to: 'firewall/zones-and-policies'
diff --git a/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue b/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
new file mode 100644
index 000000000..dcf19e98c
--- /dev/null
+++ b/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
@@ -0,0 +1,404 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import {
+  NeSideDrawer,
+  NeToggle,
+  NeTextInput,
+  NeCombobox,
+  NeButton,
+  NeSkeleton,
+  NeInlineNotification,
+  NeTooltip,
+  type NeComboboxOption,
+  getAxiosErrorMessage
+} from '@nethserver/vue-tailwind-lib'
+import { toRefs, ref, onMounted } from 'vue'
+import type {
+  CreateEditPortForwardPayload,
+  PortForward
+} from '@/views/standalone/firewall/PortForward.vue'
+import { watchEffect } from 'vue'
+import { ubusCall } from '@/lib/standalone/ubus'
+import NeMultiTextInput from '../NeMultiTextInput.vue'
+import { ZoneType, useFirewallStore } from '@/stores/standalone/useFirewallStore'
+import { computed } from 'vue'
+import {
+  MessageBag,
+  validateIpAddress,
+  validateRequired,
+  validatePort,
+  validateRequiredOption,
+  type validationOutput
+} from '@/lib/validation'
+
+const props = defineProps<{
+  isShown: boolean
+  initialItem: PortForward | null
+}>()
+const { isShown } = toRefs(props)
+
+const emit = defineEmits(['close', 'add-edit-port-forward'])
+
+const firewallConfig = useFirewallStore()
+
+const showAdvancedSettings = ref(false)
+const loading = ref(true)
+const isSubmittingRequest = ref(false)
+const error = ref({
+  notificationTitle: '',
+  notificationDescription: ''
+})
+const validationErrorBag = ref(new MessageBag())
+const restrictIPValidationErrors = ref<string[]>([])
+
+// Options
+const supportedProtocols = ref<NeComboboxOption[]>([])
+const supportedReflectionZones = ref<NeComboboxOption[]>([])
+const wanInterfaces = ref<NeComboboxOption[]>([])
+const supportedDestinationZones = computed<NeComboboxOption[]>(() => {
+  if (firewallConfig.loading) return []
+  else {
+    return [
+      { id: 'any', label: t('standalone.port_forward.any_zone') },
+      ...firewallConfig.zones
+        .filter((zone) => zone.type() != ZoneType.WAN)
+        .map((zone) => ({
+          id: zone.name,
+          label: zone.name.toUpperCase()
+        }))
+    ]
+  }
+})
+
+// Form fields
+const id = ref('')
+const name = ref('')
+const sourcePort = ref('')
+const destinationIP = ref('')
+const destinationPort = ref('')
+const wan = ref('')
+const enabled = ref(false)
+const restrict = ref<string[]>([])
+const protocols = ref<NeComboboxOption[]>([])
+const log = ref(false)
+const reflection = ref(false)
+const reflectionZones = ref<NeComboboxOption[]>([])
+const destinationZone = ref('')
+
+function resetForm() {
+  validationErrorBag.value.clear()
+
+  id.value = props.initialItem?.id ?? ''
+  name.value = props.initialItem?.name ?? ''
+  sourcePort.value = props.initialItem?.source_port ?? ''
+  destinationIP.value = props.initialItem?.dest_ip ?? ''
+  destinationPort.value = props.initialItem?.destination_port ?? ''
+  wan.value = props.initialItem?.wan ?? 'any'
+  enabled.value = props.initialItem?.enabled ?? false
+  restrict.value = props.initialItem?.restrict.map((x) => x) ?? []
+  protocols.value =
+    props.initialItem?.protocol.map((proto: string) => ({
+      id: proto,
+      label: proto.toUpperCase()
+    })) ?? []
+  log.value = props.initialItem?.log ?? false
+  reflection.value = props.initialItem?.reflection ?? false
+  reflectionZones.value =
+    props.initialItem?.reflection_zone.map((reflectionZone) => ({
+      id: reflectionZone,
+      label: reflectionZone.toUpperCase()
+    })) ?? []
+  destinationZone.value = props.initialItem?.dest ?? 'any'
+}
+
+const { t } = useI18n()
+
+async function fetchOptions() {
+  loading.value = true
+  try {
+    supportedProtocols.value = (
+      await ubusCall('ns.redirects', 'list-protocols')
+    ).data.protocols.map((proto: string) => ({
+      id: proto,
+      label: proto.toUpperCase()
+    }))
+  } catch (err: any) {
+    error.value.notificationTitle = t('error.cannot_retrieve_protocols')
+    error.value.notificationDescription = t(getAxiosErrorMessage(err))
+    return
+  }
+
+  try {
+    supportedReflectionZones.value = (await ubusCall('ns.redirects', 'list-zones')).data.zones.map(
+      (zone: string) => ({
+        id: zone,
+        label: zone.toUpperCase()
+      })
+    )
+  } catch (err: any) {
+    error.value.notificationTitle = t('error.cannot_retrieve_zones')
+    error.value.notificationDescription = t(getAxiosErrorMessage(err))
+    return
+  }
+
+  try {
+    wanInterfaces.value = [
+      { id: 'any', label: t('standalone.port_forward.any') },
+      ...(await ubusCall('ns.redirects', 'list-wans')).data.wans.map(
+        (iface: { device: string; ipaddr: string }) => ({
+          id: iface.ipaddr,
+          label: iface.ipaddr,
+          description: iface.device
+        })
+      )
+    ]
+  } catch (err: any) {
+    error.value.notificationTitle = t('error.cannot_retrieve_wan_interfaces')
+    error.value.notificationDescription = t(getAxiosErrorMessage(err))
+    return
+  }
+  loading.value = false
+}
+
+watchEffect(() => {
+  resetForm()
+})
+
+function close() {
+  resetForm()
+  emit('close')
+}
+
+onMounted(() => {
+  fetchOptions()
+  firewallConfig.fetch()
+})
+
+function resetRestrictIPValidationErrors() {
+  restrictIPValidationErrors.value = []
+}
+
+function runValidators(validators: validationOutput[], label: string): boolean {
+  for (let validator of validators) {
+    if (!validator.valid) {
+      validationErrorBag.value.set(label, [t(validator.errMessage as string)])
+    }
+  }
+
+  return validators.every((validator) => validator.valid)
+}
+
+function validate(): boolean {
+  validationErrorBag.value.clear()
+
+  restrictIPValidationErrors.value = []
+  restrict.value.forEach(() => {
+    restrictIPValidationErrors.value.push('')
+  })
+
+  let validRestrict = true
+  for (let [index, restrictValue] of restrict.value.entries()) {
+    for (let validator of [validateRequired(restrictValue), validateIpAddress(restrictValue)]) {
+      if (!validator.valid) {
+        restrictIPValidationErrors.value[index] = t(validator.errMessage as string)
+        validRestrict = false
+        break
+      }
+    }
+  }
+
+  if (!validRestrict) {
+    showAdvancedSettings.value = true
+  }
+
+  let validators: [validationOutput[], string][] = [
+    [[validateRequired(name.value)], 'name'],
+    [[validateRequired(sourcePort.value), validatePort(sourcePort.value)], 'sourcePort'],
+    [[validateRequiredOption(protocols.value)], 'protocols'],
+    [
+      [validateRequired(destinationIP.value), validateIpAddress(destinationIP.value)],
+      'destinationIP'
+    ],
+    [
+      [validateRequired(destinationPort.value), validatePort(destinationPort.value)],
+      'destinationPort'
+    ],
+    [reflection.value ? [validateRequiredOption(reflectionZones.value)] : [], 'reflectionZones']
+  ]
+
+  return (
+    validators
+      .map(([validator, label]) => runValidators(validator, label))
+      .every((result) => result) && validRestrict
+  )
+}
+
+async function createOrEditPortForward() {
+  const isEditing = id.value != ''
+
+  try {
+    isSubmittingRequest.value = true
+    const requestType = isEditing ? 'edit-redirect' : 'add-redirect'
+
+    if (validate()) {
+      const payload: CreateEditPortForwardPayload = {
+        dest_ip: destinationIP.value,
+        proto: protocols.value.map((protoObj) => protoObj.id),
+        src_dport: sourcePort.value,
+        dest_port: destinationPort.value,
+        name: name.value,
+        src_dip: wan.value === 'any' ? '' : wan.value,
+        enabled: enabled.value ? '1' : '0',
+        log: log.value ? '1' : '0',
+        reflection: reflection.value ? '1' : '0',
+        restrict: restrict.value,
+        dest: destinationZone.value === 'any' ? '' : destinationZone.value,
+        reflection_zone: reflectionZones.value.map((reflectionZone) => reflectionZone.id)
+      }
+
+      if (isEditing) payload.id = id.value
+
+      await ubusCall('ns.redirects', requestType, payload)
+      emit('add-edit-port-forward')
+      close()
+    }
+  } catch (err: any) {
+    error.value.notificationTitle = isEditing
+      ? t('error.cannot_edit_port_forward')
+      : t('error.cannot_create_port_forward')
+
+    error.value.notificationDescription = t(getAxiosErrorMessage(err))
+  } finally {
+    isSubmittingRequest.value = false
+  }
+}
+</script>
+
+<template>
+  <NeSideDrawer
+    :is-shown="isShown"
+    @close="close()"
+    :closeAriaLabel="t('standalone.shell.close_side_drawer')"
+    :title="
+      id
+        ? t('standalone.port_forward.edit_port_forward')
+        : t('standalone.port_forward.add_port_forward')
+    "
+  >
+    <NeInlineNotification
+      v-if="error.notificationTitle"
+      :title="error.notificationTitle"
+      :description="error.notificationDescription"
+      class="mb-6"
+      kind="error"
+    />
+    <NeSkeleton v-if="loading || firewallConfig.loading" :lines="10" />
+    <div v-else class="flex flex-col gap-y-6">
+      <NeToggle :label="t('standalone.port_forward.status')" v-model="enabled" />
+      <NeTextInput
+        :label="t('standalone.port_forward.name')"
+        v-model="name"
+        :invalid-message="validationErrorBag.getFirstFor('name')"
+      />
+      <NeCombobox
+        :label="t('standalone.port_forward.protocols')"
+        :placeholder="t('standalone.port_forward.choose_protocol')"
+        :multiple="true"
+        :options="supportedProtocols"
+        v-model="protocols"
+        :invalid-message="validationErrorBag.getFirstFor('protocols')"
+      />
+      <NeTextInput
+        :label="t('standalone.port_forward.source_port')"
+        v-model="sourcePort"
+        :invalid-message="validationErrorBag.getFirstFor('sourcePort')"
+        type="number"
+      />
+      <NeTextInput
+        :label="t('standalone.port_forward.destination_address')"
+        v-model="destinationIP"
+        :invalid-message="validationErrorBag.getFirstFor('destinationIP')"
+      >
+        <template #tooltip
+          ><NeTooltip
+            ><template #content>{{
+              t('standalone.port_forward.destination_address_tooltip')
+            }}</template></NeTooltip
+          ></template
+        >
+      </NeTextInput>
+      <NeCombobox
+        :label="t('standalone.port_forward.destination_zone')"
+        :placeholder="t('standalone.port_forward.choose_zone')"
+        :options="supportedDestinationZones"
+        :selected-label="t('standalone.port_forward.any_zone')"
+        v-model="destinationZone"
+      />
+      <NeTextInput
+        :label="t('standalone.port_forward.destination_port')"
+        v-model="destinationPort"
+        :invalid-message="validationErrorBag.getFirstFor('destinationPort')"
+        type="number"
+      />
+      <div>
+        <NeButton kind="tertiary" @click="showAdvancedSettings = !showAdvancedSettings">
+          {{ t('standalone.port_forward.advanced_settings') }}
+          <template #suffix>
+            <font-awesome-icon
+              :icon="['fas', showAdvancedSettings ? 'chevron-up' : 'chevron-down']"
+              class="h-4 w-4"
+              aria-hidden="true"
+            />
+          </template>
+        </NeButton>
+      </div>
+      <template v-if="showAdvancedSettings">
+        <NeCombobox
+          :label="t('standalone.port_forward.wan_ip')"
+          :options="wanInterfaces"
+          v-model="wan"
+        />
+
+        <NeMultiTextInput
+          :title="t('standalone.port_forward.restrict_access_to')"
+          :optional="true"
+          :optional-label="t('common.optional')"
+          :add-item-label="t('standalone.port_forward.add_ip_address')"
+          :invalid-messages="restrictIPValidationErrors"
+          v-model="restrict"
+          @delete-item="resetRestrictIPValidationErrors"
+        >
+          <template #tooltip>
+            <NeTooltip
+              ><template #content>{{
+                t('standalone.port_forward.restrict_access_to_tooltip')
+              }}</template></NeTooltip
+            >
+          </template>
+        </NeMultiTextInput>
+
+        <NeToggle :label="t('standalone.port_forward.log')" v-model="log" />
+        <NeToggle :label="t('standalone.port_forward.hairpin_nat')" v-model="reflection" />
+        <NeCombobox
+          v-if="reflection"
+          :label="t('standalone.port_forward.hairpin_nat_zones')"
+          :placeholder="t('standalone.port_forward.choose_zone')"
+          :options="supportedReflectionZones"
+          v-model="reflectionZones"
+          :invalid-message="validationErrorBag.getFirstFor('reflectionZones')"
+        />
+      </template>
+      <hr />
+      <div class="flex justify-end">
+        <NeButton kind="tertiary" class="mr-4" @click="close()">{{ t('common.cancel') }}</NeButton>
+        <NeButton
+          kind="primary"
+          @click="createOrEditPortForward()"
+          :disabled="isSubmittingRequest"
+          :loading="isSubmittingRequest"
+          >{{ id ? t('common.save') : t('standalone.port_forward.add_port_forward') }}</NeButton
+        >
+      </div>
+    </div>
+  </NeSideDrawer>
+</template>
diff --git a/src/components/standalone/firewall/DeletePortForwardModal.vue b/src/components/standalone/firewall/DeletePortForwardModal.vue
new file mode 100644
index 000000000..6a5e458ac
--- /dev/null
+++ b/src/components/standalone/firewall/DeletePortForwardModal.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ubusCall } from '@/lib/standalone/ubus'
+import type { PortForward } from '@/views/standalone/firewall/PortForward.vue'
+import { NeModal, NeInlineNotification, getAxiosErrorMessage } from '@nethserver/vue-tailwind-lib'
+import { ref, toRefs } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps<{
+  visible: boolean
+  itemToDelete: PortForward | null
+}>()
+
+const emit = defineEmits(['close', 'port-forward-deleted'])
+
+const { visible, itemToDelete } = toRefs(props)
+const error = ref('')
+const isDeleting = ref(false)
+const { t } = useI18n()
+
+async function deletePortForward() {
+  if (itemToDelete.value) {
+    try {
+      isDeleting.value = true
+      await ubusCall('ns.redirects', 'delete-redirect', {
+        id: itemToDelete.value.id
+      })
+      emit('port-forward-deleted')
+      emit('close')
+    } catch (err: any) {
+      error.value = t(getAxiosErrorMessage(err))
+    } finally {
+      isDeleting.value = false
+    }
+  }
+}
+</script>
+
+<template>
+  <NeModal
+    :visible="visible"
+    kind="warning"
+    :title="t('standalone.port_forward.delete_port_forward')"
+    :primaryLabel="t('standalone.port_forward.delete_port_forward')"
+    :primaryButtonDisabled="isDeleting"
+    :primaryButtonLoading="isDeleting"
+    @primaryClick="deletePortForward()"
+    @close="emit('close')"
+  >
+    {{
+      t('standalone.port_forward.delete_port_forward_message', {
+        name: itemToDelete?.name ?? ''
+      })
+    }}
+    <NeInlineNotification
+      v-if="error"
+      kind="error"
+      :title="t('error.delete_port_forward_error')"
+      :description="error"
+    />
+  </NeModal>
+</template>
diff --git a/src/components/standalone/firewall/PortForwardTable.vue b/src/components/standalone/firewall/PortForwardTable.vue
new file mode 100644
index 000000000..39dc6d343
--- /dev/null
+++ b/src/components/standalone/firewall/PortForwardTable.vue
@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import type { PortForward } from '@/views/standalone/firewall/PortForward.vue'
+import { toRefs } from 'vue'
+import NeTable from '../NeTable.vue'
+import { NeDropdown, NeButton } from '@nethserver/vue-tailwind-lib'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  portForwards: PortForward[]
+  header: string
+}>()
+
+const { portForwards, header } = toRefs(props)
+
+const emit = defineEmits([
+  'port-forward-duplicate',
+  'port-forward-toggle-enable',
+  'port-forward-delete',
+  'port-forward-edit'
+])
+
+const tableHeaders = [
+  {
+    label: t('standalone.port_forward.name'),
+    key: 'name'
+  },
+  {
+    label: t('standalone.port_forward.source_port'),
+    key: 'source_port'
+  },
+  {
+    label: t('standalone.port_forward.destination_port'),
+    key: 'destination_port'
+  },
+  {
+    label: t('standalone.port_forward.protocols'),
+    key: 'protocols'
+  },
+  {
+    label: t('standalone.port_forward.wan_ip'),
+    key: 'wan'
+  },
+  {
+    label: t('standalone.port_forward.restrict_access_to'),
+    key: 'restrict'
+  },
+  {
+    label: t('standalone.port_forward.status'),
+    key: 'enabled'
+  },
+  {
+    label: '',
+    key: 'menu'
+  }
+]
+
+function getDropdownItems(item: PortForward) {
+  return [
+    {
+      id: 'enable_disable',
+      label: item.enabled
+        ? t('standalone.port_forward.disable')
+        : t('standalone.port_forward.enable'),
+      iconStyle: 'fas',
+      icon: item.enabled ? 'circle-xmark' : 'circle-check',
+      action: () => {
+        emit('port-forward-toggle-enable', item)
+      }
+    },
+    {
+      id: 'duplicate',
+      label: t('standalone.port_forward.duplicate'),
+      iconStyle: 'fas',
+      icon: 'clone',
+      action: () => {
+        emit('port-forward-duplicate', item)
+      }
+    },
+    {
+      id: 'delete',
+      label: t('common.delete'),
+      iconStyle: 'fas',
+      icon: 'trash',
+      danger: true,
+      action: () => {
+        emit('port-forward-delete', item)
+      }
+    }
+  ]
+}
+
+function getCellClasses(item: PortForward) {
+  return !item.enabled ? ['text-gray-400', 'dark:text-gray-700'] : []
+}
+</script>
+
+<template>
+  <div>
+    <p
+      class="z-0 -my-1 table max-w-md rounded-se-md rounded-ss-md bg-indigo-300 p-2 text-sm dark:bg-indigo-800"
+    >
+      {{ t('standalone.port_forward.destination') }}: <strong>{{ header }}</strong>
+    </p>
+    <NeTable :data="portForwards" :headers="tableHeaders" class="z-10">
+      <template #name="{ item }: { item: PortForward }">
+        <p :class="[...getCellClasses(item)]">{{ item.name }}</p>
+      </template>
+      <template #source_port="{ item }: { item: PortForward }">
+        <p :class="[...getCellClasses(item)]">
+          {{ item.source_port }} {{ item.source_port_name ? `(${item.source_port_name})` : '' }}
+        </p>
+      </template>
+      <template #destination_port="{ item }: { item: PortForward }">
+        <p :class="[...getCellClasses(item)]">
+          {{ item.destination_port }}
+        </p>
+      </template>
+      <template #protocols="{ item }: { item: PortForward }">
+        <p
+          v-for="(prot, idx) in item.protocol.slice(0, 2)"
+          :key="prot"
+          :class="[...getCellClasses(item)]"
+        >
+          {{ prot.toUpperCase() }}{{ item.protocol.length > 2 && idx == 1 ? '...' : '' }}
+        </p>
+      </template>
+      <template #wan="{ item }: { item: PortForward }">
+        <p :class="[...getCellClasses(item)]">
+          {{ item.wan === 'any' ? t('standalone.port_forward.any') : item.wan }}
+        </p>
+      </template>
+      <template #restrict="{ item }: { item: PortForward }">
+        <template v-if="item.restrict.length > 0">
+          <p
+            v-for="(restrictIP, idx) in item.restrict.slice(0, 2)"
+            :key="restrictIP"
+            :class="[...getCellClasses(item)]"
+          >
+            {{ restrictIP }}{{ item.restrict.length > 2 && idx == 1 ? '...' : '' }}
+          </p>
+        </template>
+        <p :class="[...getCellClasses(item)]" v-else>-</p>
+      </template>
+      <template #enabled="{ item }: { item: PortForward }">
+        <div :class="['flex', 'flex-row', 'items-center', ...getCellClasses(item)]">
+          <font-awesome-icon
+            :icon="['fas', item.enabled ? 'circle-check' : 'circle-xmark']"
+            class="mr-2 h-5 w-5"
+            aria-hidden="true"
+          />
+          <p>
+            {{
+              item.enabled
+                ? t('standalone.port_forward.enabled')
+                : t('standalone.port_forward.disabled')
+            }}
+          </p>
+        </div>
+      </template>
+      <template #menu="{ item }: { item: PortForward }">
+        <div class="align-center flex justify-end">
+          <NeButton kind="tertiary" @click="emit('port-forward-edit', item)">
+            <template #prefix>
+              <font-awesome-icon
+                :icon="['fas', 'pen-to-square']"
+                class="h-4 w-4"
+                aria-hidden="true"
+              />
+            </template>
+            {{ t('common.edit') }}
+          </NeButton>
+          <NeDropdown :items="getDropdownItems(item)" :align-to-right="true" />
+        </div>
+      </template>
+    </NeTable>
+  </div>
+</template>
diff --git a/src/components/standalone/system_settings/TimeSynchronization.vue b/src/components/standalone/system_settings/TimeSynchronization.vue
index 339c029ff..fa2c08d45 100644
--- a/src/components/standalone/system_settings/TimeSynchronization.vue
+++ b/src/components/standalone/system_settings/TimeSynchronization.vue
@@ -14,7 +14,6 @@ import {
   NeSkeleton,
   NeCombobox,
   NeInlineNotification,
-  NeTextInput,
   getAxiosErrorMessage
 } from '@nethserver/vue-tailwind-lib'
 import type { NeComboboxOption } from '@nethserver/vue-tailwind-lib'
@@ -22,6 +21,7 @@ import { isEmpty, uniq } from 'lodash'
 import { computed, onMounted, ref, type Ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import FormLayout from '@/components/standalone/FormLayout.vue'
+import NeMultiTextInput from '../NeMultiTextInput.vue'
 
 const { t } = useI18n()
 const uciChangesStore = useUciPendingChangesStore()
@@ -253,15 +253,9 @@ async function save() {
   }
 }
 
-function deleteNtpServer(ntpServerName: string) {
+function resetNtpServerErrors() {
   // reset errors to prevent validation errors mismatch
   error.value.ntpServerCandidate = []
-
-  ntpServerCandidates.value = ntpServerCandidates.value.filter((elem) => elem !== ntpServerName)
-}
-
-function addNtpServer() {
-  ntpServerCandidates.value.push('')
 }
 </script>
 
@@ -321,41 +315,14 @@ function addNtpServer() {
         <div v-if="enableNtpClient">
           <hr class="my-8" />
           <FormLayout :title="t('standalone.system_settings.ntp_server_candidates')">
-            <div class="space-y-6">
-              <div class="space-y-4">
-                <div
-                  v-for="(ntpServer, i) in ntpServerCandidates"
-                  :key="i"
-                  class="flex items-start gap-2"
-                >
-                  <NeTextInput
-                    v-model.trim="ntpServerCandidates[i]"
-                    :invalid-message="error.ntpServerCandidate[i]"
-                    :disabled="loading.save"
-                    class="grow"
-                  />
-                  <NeButton
-                    kind="tertiary"
-                    size="lg"
-                    @click="deleteNtpServer(ntpServer)"
-                    :disabled="loading.save"
-                  >
-                    <font-awesome-icon
-                      :icon="['fas', 'trash']"
-                      class="h-4 w-4 py-1"
-                      aria-hidden="true"
-                    />
-                  </NeButton>
-                </div>
-                <!-- add ntp server -->
-                <NeButton size="lg" @click="addNtpServer" :disabled="loading.save">
-                  <template #prefix>
-                    <font-awesome-icon :icon="['fas', 'plus']" class="h-4 w-4" aria-hidden="true" />
-                  </template>
-                  {{ t('standalone.system_settings.add_ntp_server') }}
-                </NeButton>
-              </div>
-            </div>
+            <NeMultiTextInput
+              :add-item-label="t('standalone.system_settings.add_ntp_server')"
+              :invalid-messages="error.ntpServerCandidate"
+              :disable-inputs="loading.save"
+              :disable-add-button="loading.save"
+              v-model="ntpServerCandidates"
+              @delete-item="resetNtpServerErrors()"
+            />
           </FormLayout>
         </div>
       </Transition>
diff --git a/src/lib/validation.ts b/src/lib/validation.ts
index ffacc917b..f0f3b4f23 100644
--- a/src/lib/validation.ts
+++ b/src/lib/validation.ts
@@ -1,7 +1,9 @@
 //  Copyright (C) 2023 Nethesis S.r.l.
 //  SPDX-License-Identifier: GPL-3.0-or-later
 
-interface validationOutput {
+import type { NeComboboxOption } from '@nethserver/vue-tailwind-lib'
+
+export interface validationOutput {
   valid: Boolean
   errMessage?: String
   i18Params?: Object
@@ -198,7 +200,7 @@ export const validateVlanId = (value: String): validationOutput => {
   return { valid: true }
 }
 
-export function validatePort(value: string, minPort = 1, maxPort = 65565): validationOutput {
+export function validatePort(value: string, minPort = 1, maxPort = 65535): validationOutput {
   const port = Number.parseInt(value)
 
   if (Number.isNaN(port) || port < minPort || port > maxPort) {
@@ -207,7 +209,7 @@ export function validatePort(value: string, minPort = 1, maxPort = 65565): valid
   return { valid: true }
 }
 
-export function validatePortRange(value: string, minRange = 1, maxRange = 65565): validationOutput {
+export function validatePortRange(value: string, minRange = 1, maxRange = 65535): validationOutput {
   let strings: string[]
   if (value.indexOf(',')) {
     strings = value.split(',')
@@ -225,6 +227,13 @@ export function validatePortRange(value: string, minRange = 1, maxRange = 65565)
   return { valid: true }
 }
 
+export const validateRequiredOption = (value: NeComboboxOption[]): validationOutput => {
+  if (value.length == 0) {
+    return { valid: false, errMessage: 'error.required_option' }
+  }
+  return { valid: true }
+}
+
 /**
  * Extends Map class to provide a name-array for errors
  */
diff --git a/src/router/index.ts b/src/router/index.ts
index 7e46c528e..34a027774 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -54,6 +54,11 @@ const standaloneRoutes = [
     path: 'firewall/zones-and-policies',
     name: 'ZonesAndPolicies',
     component: () => import('../views/standalone/firewall/ZonesAndPolicies.vue')
+  },
+  {
+    path: 'firewall/port-forward',
+    name: 'PortForward',
+    component: () => import('../views/standalone/firewall/PortForward.vue')
   }
 ]
 
diff --git a/src/views/standalone/firewall/PortForward.vue b/src/views/standalone/firewall/PortForward.vue
new file mode 100644
index 000000000..dd18de564
--- /dev/null
+++ b/src/views/standalone/firewall/PortForward.vue
@@ -0,0 +1,260 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import {
+  NeTitle,
+  getAxiosErrorMessage,
+  NeButton,
+  NeTextInput,
+  NeSkeleton,
+  NeInlineNotification
+} from '@nethserver/vue-tailwind-lib'
+import PortForwardTable from '@/components/standalone/firewall/PortForwardTable.vue'
+import { onMounted, ref } from 'vue'
+import { ubusCall } from '@/lib/standalone/ubus'
+import { useUciPendingChangesStore } from '@/stores/standalone/uciPendingChanges'
+import CreateOrEditPortForwardDrawer from '@/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue'
+import DeletePortForwardModal from '@/components/standalone/firewall/DeletePortForwardModal.vue'
+import { computed } from 'vue'
+
+const { t } = useI18n()
+
+export type PortForward = {
+  dest_ip: string
+  protocol: string[]
+  source_port: string
+  source_port_name: string
+  destination_port: string
+  name: string
+  wan: string
+  enabled: boolean
+  id: string
+  restrict: string[]
+  log: boolean
+  reflection: boolean
+  reflection_zone: string[]
+  dest: string
+}
+
+export type CreateEditPortForwardPayload = {
+  dest_ip: string
+  proto: string[]
+  src_dport: string
+  dest_port: string
+  name: string
+  src_dip: string
+  enabled: '0' | '1'
+  id?: string
+  restrict: string[]
+  log: '0' | '1'
+  reflection: '0' | '1'
+  reflection_zone: string[]
+  dest: string
+}
+
+const uciChangesStore = useUciPendingChangesStore()
+
+const loading = ref(false)
+const error = ref({
+  notificationTitle: '',
+  notificationDescription: ''
+})
+const portForwards = ref<Record<string, PortForward[]>>({})
+const filter = ref('')
+const showCreateEditDrawer = ref(false)
+const showDeleteModal = ref(false)
+const selectedItem = ref<PortForward | null>(null)
+
+const filteredPortForwards = computed<Record<string, PortForward[]>>(() => {
+  return filter.value == ''
+    ? portForwards.value
+    : Object.fromEntries(
+        Object.entries(portForwards.value)
+          .map(([k, v]) => [
+            k,
+            v.filter(
+              (el) =>
+                el.name.includes(filter.value) ||
+                el.source_port.includes(filter.value) ||
+                el.destination_port.includes(filter.value) ||
+                el.protocol.filter((prot) => prot.includes(filter.value)).length > 0 ||
+                el.wan.includes(filter.value) ||
+                el.restrict.filter((rs) => rs.includes(filter.value)).length > 0
+            )
+          ])
+          .filter(([, v]) => v.length > 0)
+      )
+})
+
+function cleanError() {
+  error.value = {
+    notificationTitle: '',
+    notificationDescription: ''
+  }
+}
+
+async function fetchPortForwards() {
+  try {
+    cleanError()
+    loading.value = true
+    const response = await ubusCall('ns.redirects', 'list-redirects')
+    portForwards.value = response.data.redirects
+    loading.value = false
+  } catch (err: any) {
+    error.value.notificationTitle = t('error.generic_error')
+    error.value.notificationDescription = t(getAxiosErrorMessage(err))
+  }
+}
+
+async function reloadPortForwards() {
+  await uciChangesStore.getChanges()
+  await fetchPortForwards()
+}
+
+async function toggleEnablePortForward(item: PortForward) {
+  try {
+    cleanError()
+    await ubusCall('ns.redirects', item.enabled ? 'disable-redirect' : 'enable-redirect', {
+      id: item.id
+    })
+    await reloadPortForwards()
+  } catch (err: any) {
+    error.value.notificationTitle = t(
+      item.enabled ? 'error.cannot_disable_port_forward' : 'error.cannot_enable_port_forward'
+    )
+    error.value.notificationDescription = t(getAxiosErrorMessage(err))
+  }
+}
+
+async function duplicatePortForward(item: PortForward) {
+  try {
+    cleanError()
+    let payload: CreateEditPortForwardPayload = {
+      dest_ip: item.dest_ip,
+      proto: item.protocol,
+      src_dport: item.source_port,
+      src_dip: item.wan,
+      dest_port: item.destination_port,
+      name: `${item.name} (${t('standalone.port_forward.copy')})`,
+      enabled: item.enabled ? '1' : '0',
+      log: item.log ? '1' : '0',
+      restrict: item.restrict,
+      reflection: item.reflection ? '1' : '0',
+      reflection_zone: item.reflection_zone,
+      dest: item.dest
+    }
+    await ubusCall('ns.redirects', 'add-redirect', payload)
+    await reloadPortForwards()
+  } catch (err: any) {
+    error.value.notificationTitle = t('error.cannot_duplicate_port_forward')
+    error.value.notificationDescription = t(getAxiosErrorMessage(err))
+  }
+}
+
+function openCreateEditDrawer(itemToEdit: PortForward | null) {
+  selectedItem.value = itemToEdit
+  showCreateEditDrawer.value = true
+}
+
+function closeCreateEditDrawer() {
+  selectedItem.value = null
+  showCreateEditDrawer.value = false
+}
+
+function openDeleteModal(itemToEdit: PortForward) {
+  selectedItem.value = itemToEdit
+  showDeleteModal.value = true
+}
+
+function closeDeleteModal() {
+  selectedItem.value = null
+  showDeleteModal.value = false
+}
+
+onMounted(() => {
+  fetchPortForwards()
+})
+</script>
+
+<template>
+  <NeTitle>{{ t('standalone.port_forward.title') }}</NeTitle>
+  <div class="flex flex-col gap-y-6">
+    <div class="flex flex-row items-center justify-between">
+      <p class="max-w-2xl text-sm font-normal text-gray-500 dark:text-gray-400">
+        {{ t('standalone.port_forward.description') }}
+      </p>
+      <div>
+        <NeButton kind="secondary" @click="openCreateEditDrawer(null)">
+          <template #prefix>
+            <font-awesome-icon :icon="['fas', 'circle-plus']" class="h-4 w-4" aria-hidden="true" />
+          </template>
+          {{ t('standalone.port_forward.add_port_forward') }}
+        </NeButton>
+      </div>
+    </div>
+    <NeTextInput
+      class="max-w-xs"
+      :placeholder="t('standalone.port_forward.filter')"
+      v-model="filter"
+    />
+    <NeInlineNotification
+      kind="error"
+      :title="error.notificationTitle"
+      :description="error.notificationDescription"
+      v-if="error.notificationDescription"
+    />
+    <NeSkeleton v-if="loading" :lines="10" />
+    <template v-else>
+      <div
+        v-if="Object.keys(portForwards).length == 0"
+        class="flex flex-col items-center justify-center rounded-md p-10 dark:bg-gray-800"
+      >
+        <p class="mb-4 text-sm">
+          <strong>{{ t('standalone.port_forward.no_port_forward_configured') }}</strong>
+        </p>
+        <NeButton kind="primary" @click="openCreateEditDrawer(null)"
+          ><template #prefix>
+            <font-awesome-icon
+              :icon="['fas', 'circle-plus']"
+              class="h-4 w-4"
+              aria-hidden="true"
+            /> </template
+          >{{ t('standalone.port_forward.add_port_forward') }}</NeButton
+        >
+      </div>
+      <div
+        v-else-if="Object.keys(filteredPortForwards).length == 0"
+        class="flex flex-col items-center justify-center rounded-md p-10 dark:bg-gray-800"
+      >
+        <p class="mb-4 text-sm">
+          <strong>{{ t('standalone.port_forward.no_port_forward_found') }}</strong>
+        </p>
+        <p class="text-sm">
+          {{ t('standalone.port_forward.filter_change_suggestion') }}
+        </p>
+      </div>
+      <PortForwardTable
+        v-else
+        v-for="(portForward, key) in filteredPortForwards"
+        :key="key"
+        :port-forwards="portForward"
+        :header="key"
+        @port-forward-delete="openDeleteModal"
+        @port-forward-duplicate="duplicatePortForward"
+        @port-forward-edit="openCreateEditDrawer"
+        @port-forward-toggle-enable="toggleEnablePortForward"
+      />
+    </template>
+  </div>
+  <CreateOrEditPortForwardDrawer
+    :is-shown="showCreateEditDrawer"
+    :initial-item="selectedItem"
+    @close="closeCreateEditDrawer()"
+    @add-edit-port-forward="reloadPortForwards()"
+  />
+  <DeletePortForwardModal
+    :visible="showDeleteModal"
+    @close="closeDeleteModal()"
+    @port-forward-deleted="reloadPortForwards()"
+    :item-to-delete="selectedItem"
+  />
+</template>