diff --git a/package-lock.json b/package-lock.json
index b5ce66408..0fed49084 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
         "@nethesis/nethesis-brands-svg-icons": "github:nethesis/Font-Awesome#ns-brands",
         "@nethesis/nethesis-light-svg-icons": "github:nethesis/Font-Awesome#ns-light",
         "@nethesis/nethesis-solid-svg-icons": "github:nethesis/Font-Awesome#ns-solid",
-        "@nethserver/vue-tailwind-lib": "^0.0.89",
+        "@nethserver/vue-tailwind-lib": "^0.0.90",
         "@types/lodash": "^4.14.195",
         "@vueuse/core": "^10.5.0",
         "axios": "^1.4.0",
@@ -1298,9 +1298,9 @@
       }
     },
     "node_modules/@nethserver/vue-tailwind-lib": {
-      "version": "0.0.89",
-      "resolved": "https://registry.npmjs.org/@nethserver/vue-tailwind-lib/-/vue-tailwind-lib-0.0.89.tgz",
-      "integrity": "sha512-G7x8JdZxoKo62hGJiN0XhHvgoxfhgZhCdOaBT2zQxUGh+FrHsLn8TMZQ9OIix5xEmKibgU/OzYe6xPVArTTHXA==",
+      "version": "0.0.90",
+      "resolved": "https://registry.npmjs.org/@nethserver/vue-tailwind-lib/-/vue-tailwind-lib-0.0.90.tgz",
+      "integrity": "sha512-qLhtacQ/uGcCBFhdBxgd0xAxWbWc+iL8OCOhwaVOdjorGkAHYL6nRbJ+roZ6vhl5UaXomLslfXAA7/N1qUvOVA==",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.4.0",
         "@fortawesome/free-solid-svg-icons": "github:nethesis/Font-Awesome#solid",
diff --git a/package.json b/package.json
index 061425928..42eb4d68d 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "@nethesis/nethesis-brands-svg-icons": "github:nethesis/Font-Awesome#ns-brands",
     "@nethesis/nethesis-light-svg-icons": "github:nethesis/Font-Awesome#ns-light",
     "@nethesis/nethesis-solid-svg-icons": "github:nethesis/Font-Awesome#ns-solid",
-    "@nethserver/vue-tailwind-lib": "^0.0.89",
+    "@nethserver/vue-tailwind-lib": "^0.0.90",
     "@types/lodash": "^4.14.195",
     "@vueuse/core": "^10.5.0",
     "axios": "^1.4.0",
diff --git a/public/i18n/en/translation.json b/public/i18n/en/translation.json
index 9d002da31..a60784c53 100644
--- a/public/i18n/en/translation.json
+++ b/public/i18n/en/translation.json
@@ -14,6 +14,9 @@
     "disable": "Disable",
     "enabled": "Enabled",
     "disabled": "Disabled",
+    "step": "Step",
+    "previous": "Previous",
+    "next": "Next",
     "page_under_construction": "Page under construction"
   },
   "error": {
@@ -138,7 +141,10 @@
     "cannot_disable_tunnel": "Cannot disable tunnel",
     "cannot_retrieve_tunnel_options": "Cannot retrieve tunnel options",
     "cannot_retrieve_tunnel_defaults": "Cannot retrieve tunnel defaults",
-    "cannot_import_configuration": "Cannot import configuration"
+    "cannot_import_configuration": "Cannot import configuration",
+    "cannot_retrieve_ipsec_tunnels": "Cannot retrieve IPsec tunnels",
+    "cannot_retrieve_ipsec_algorithms": "Cannot retrieve IPsec algorithms",
+    "cannot_retrieve_tunnel_data": "Cannot retrieve tunnel data"
   },
   "ne_text_input": {
     "show_password": "Show password",
@@ -907,6 +913,53 @@
       "topology_tooltip_subnet_description": "This method offers a straightforward configuration approach. Instead of using a point-to-point setup, utilize a subnet configuration by specifying a local IP address and subnet mask for the tun interface. In this mode, each connected client is assigned a unique IP address, and it is compatible with Windows systems as well.",
       "topology_tooltip_p2p_description": "Implement a point-to-point topology where the client's tun interface remote endpoint consistently points to the server's tun interface local endpoint. This configuration assigns a single IP address to each connected client. Utilize this mode exclusively when none of the connected clients operate on Windows systems."
     },
+    "ipsec_tunnel": {
+      "title": "IPsec tunnel",
+      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse gravida, nibh vel finibus suscipit, mauris erat porta",
+      "add_ipsec_tunnel": "Add IPsec tunnel",
+      "no_tunnel_found": "No tunnel found",
+      "name": "Name",
+      "local_networks": "Local networks",
+      "remote_networks": "Remote networks",
+      "received": "Received",
+      "sent": "Sent",
+      "started": "Started",
+      "status": "Status",
+      "connection": "Connection",
+      "connected": "Connected",
+      "not_connected": "Not connected",
+      "enable": "Enable",
+      "disable": "Disable",
+      "enabled": "Enabled",
+      "disabled": "Disabled",
+      "delete_tunnel": "Delete tunnel",
+      "delete_tunnel_message": "You are about to delete tunnel '{name}'",
+      "add_tunnel": "Add tunnel",
+      "edit_tunnel": "Edit tunnel",
+      "tunnel_name": "Tunnel name",
+      "wan_ip_address": "WAN IP address",
+      "remote_ip_address": "Remote IP address",
+      "local_identifier": "Local identifier",
+      "remote_identifier": "Remote identifier",
+      "choose_wan": "Choose WAN",
+      "add_network": "Add network",
+      "pre_shared_key": "Pre-shared key",
+      "generate_key": "Generate key",
+      "import_key": "Import key",
+      "dpd_dead_peer_detection": "DPD (dead peer detection)",
+      "pfs_perfect_forward_secrecy_disabled": "PFS (Perfect Forward Secrecy) disabled",
+      "compression": "Compression",
+      "phase_one_ike": "Phase 1 (IKE)",
+      "phase_two_esp": "Phase 2 (ESP)",
+      "ike_version": "IKE version",
+      "encryption_algorithm": "Encryption algorithm",
+      "integrity_algorithm": "Integrity algorithm",
+      "diffie_hellman_group": "Diffie-Hellman group",
+      "key_life_time_seconds": "Key life time (seconds)",
+      "remote_ip_address_tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse gravida, nibh vel finibus suscipit, mauris erat porta",
+      "local_identifier_tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse gravida, nibh vel finibus suscipit, mauris erat porta",
+      "edit_ipsec_tunnel": "Edit IPsec tunnel"
+    },
     "logs": {
       "title": "Logs",
       "limit_rows": "Lines limit",
diff --git a/src/components/standalone/NeCopyField.vue b/src/components/standalone/NeCopyField.vue
new file mode 100644
index 000000000..92b15f9ba
--- /dev/null
+++ b/src/components/standalone/NeCopyField.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+const props = defineProps<{
+  value: string
+  label?: string
+  copyValueLabel?: string
+}>()
+
+function copyValue() {
+  navigator.clipboard.writeText(props.value)
+}
+</script>
+
+<template>
+  <div>
+    <p class="mb-2 text-sm font-medium leading-6 text-gray-700 dark:text-gray-200" v-if="label">
+      {{ label }}
+    </p>
+    <div
+      class="text-md flex flex-row rounded-md border border-gray-300 bg-white text-gray-700 transition-colors duration-200 dark:border-gray-600 dark:bg-gray-950 dark:text-gray-200 sm:text-sm sm:leading-6"
+    >
+      <div class="no-scrollbar mt-0 max-w-full flex-grow overflow-x-scroll px-3 py-1.5">
+        {{ value }}
+      </div>
+      <button
+        class="rounded-r-md bg-gray-50 px-3 py-1.5 duration-200 hover:bg-gray-200 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-white focus:duration-0 dark:bg-gray-950 dark:hover:bg-gray-800 dark:focus:ring-primary-300 dark:focus:ring-offset-primary-950"
+        @click="copyValue()"
+      >
+        <font-awesome-icon
+          :icon="['fas', 'clone']"
+          aria-hidden="true"
+          :class="['h-4', 'w-4', copyValueLabel ? 'mr-2' : '']"
+        />
+        {{ copyValueLabel }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style>
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+</style>
diff --git a/src/components/standalone/NeMultiTextInput.vue b/src/components/standalone/NeMultiTextInput.vue
index fd83dca8d..de2fd0197 100644
--- a/src/components/standalone/NeMultiTextInput.vue
+++ b/src/components/standalone/NeMultiTextInput.vue
@@ -21,6 +21,7 @@ const props = withDefaults(
     modelValue: string[] | KeyValueItem[]
     addItemLabel: string
     invalidMessages?: string[]
+    generalInvalidMessage?: string
     invalidKeyMessages?: string[]
     keyOptions?: NeComboboxOption[]
     title?: string
@@ -106,7 +107,9 @@ onMounted(() => {
   <div>
     <div
       v-if="title"
-      :class="`${items.length > 0 ? 'mb-2' : 'mb-4'} flex items-center justify-between`"
+      :class="`${
+        items.length > 0 || generalInvalidMessage ? 'mb-2' : 'mb-4'
+      } flex items-center justify-between`"
     >
       <div>
         <span class="mr-2 text-sm font-medium leading-6 text-gray-700 dark:text-gray-200">
@@ -140,6 +143,9 @@ onMounted(() => {
             <font-awesome-icon :icon="['fas', 'trash']" class="h-4 w-4 py-1" aria-hidden="true" />
           </NeButton>
         </div>
+        <p v-if="generalInvalidMessage" :class="'mt-2 text-sm text-rose-700 dark:text-rose-400'">
+          {{ generalInvalidMessage }}
+        </p>
         <NeButton size="md" @click="addItem" :disabled="disableAddButton">
           <template #prefix>
             <font-awesome-icon :icon="['fas', 'plus']" class="h-4 w-4" aria-hidden="true" />
diff --git a/src/components/standalone/NeStepper.vue b/src/components/standalone/NeStepper.vue
new file mode 100644
index 000000000..01493cbb5
--- /dev/null
+++ b/src/components/standalone/NeStepper.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { NeProgressBar } from '@nethserver/vue-tailwind-lib'
+import { range } from 'lodash'
+
+const props = defineProps<{
+  totalSteps: number
+  currentStep: number
+  stepLabel: string
+}>()
+</script>
+
+<template>
+  <div>
+    <NeProgressBar :progress="(currentStep / totalSteps) * 100" size="sm" />
+    <div class="mt-2 flex flex-row">
+      <div v-for="i in range(1, totalSteps + 1)" :key="i" class="flex grow basis-0 justify-center">
+        <p class="text-xs font-semibold text-primary-400" v-if="i == currentStep">
+          Step {{ currentStep }}/{{ totalSteps }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/standalone/SideMenu.vue b/src/components/standalone/SideMenu.vue
index 73f39a926..d60dd367b 100644
--- a/src/components/standalone/SideMenu.vue
+++ b/src/components/standalone/SideMenu.vue
@@ -129,6 +129,10 @@ const navigation: Ref<MenuItem[]> = ref([
       {
         name: t('standalone.openvpn_tunnel.title'),
         to: 'vpn/openvpn-tunnel'
+      },
+      {
+        name: t('standalone.ipsec_tunnel.title'),
+        to: 'vpn/ipsec-tunnel'
       }
     ]
   },
diff --git a/src/components/standalone/ipsec_tunnel/CreateOrEditTunnelDrawer.vue b/src/components/standalone/ipsec_tunnel/CreateOrEditTunnelDrawer.vue
new file mode 100644
index 000000000..a02ce55bc
--- /dev/null
+++ b/src/components/standalone/ipsec_tunnel/CreateOrEditTunnelDrawer.vue
@@ -0,0 +1,674 @@
+<script setup lang="ts">
+import {
+  MessageBag,
+  validateIp4Cidr,
+  validateIpAddress,
+  validateRequired,
+  type validationOutput
+} from '@/lib/validation'
+import type { IpsecTunnel } from '@/views/standalone/vpn/IPsecTunnelView.vue'
+import { ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import NeStepper from '../NeStepper.vue'
+import {
+  NeSideDrawer,
+  NeSkeleton,
+  NeButton,
+  NeToggle,
+  NeTextInput,
+  NeCombobox,
+  NeTooltip,
+  NeRadioSelection,
+  NeFormItemLabel,
+  NeTitle,
+  NeInlineNotification,
+  type NeComboboxOption,
+  getAxiosErrorMessage
+} from '@nethserver/vue-tailwind-lib'
+import { ubusCall } from '@/lib/standalone/ubus'
+import NeMultiTextInput from '../NeMultiTextInput.vue'
+import NeCopyField from '../NeCopyField.vue'
+
+const props = defineProps<{
+  isShown: boolean
+  itemToEdit: IpsecTunnel | null
+}>()
+
+type CreateEditIpsecTunnelPayload = {
+  id?: string
+  ike: {
+    encryption_algorithm: string
+    hash_algorithm: string
+    dh_group: string
+    rekeytime: string
+  }
+  esp: {
+    encryption_algorithm: string
+    hash_algorithm: string
+    dh_group: string
+    rekeytime: string
+  }
+  ipcomp: string
+  dpdaction: 'restart' | 'none'
+  remote_subnet: string[]
+  local_subnet: string[]
+  ns_name: string
+  gateway: string
+  keyexchange: string
+  local_identifier: string
+  local_ip: string
+  enabled: '0' | '1'
+  remote_identifier: string
+  pre_shared_key: string
+}
+
+const { t } = useI18n()
+
+const emit = defineEmits(['close', 'add-edit-tunnel'])
+
+const loading = ref(false)
+const isSavingChanges = ref(false)
+const error = ref({
+  notificationTitle: '',
+  notificationDescription: '',
+  notificationDetails: ''
+})
+const step = ref(1)
+const validationErrorBag = ref(new MessageBag())
+const localNetworksValidationErrors = ref<string[]>([])
+const remoteNetworksValidationErrors = ref<string[]>([])
+
+const id = ref('')
+const generatedPresharedKey = ref('')
+
+// Step 1 fields
+const enabled = ref(true)
+const name = ref('')
+const wanIpAddress = ref('')
+const remoteIpAddress = ref('')
+const localNetworks = ref<string[]>([])
+const remoteNetworks = ref<string[]>([])
+const localIdentifier = ref('')
+const remoteIdentifier = ref('')
+
+// Step 2 fields
+const presharedKeyMode = ref<'generate' | 'import'>('generate')
+const presharedKey = ref('')
+const dpd = ref(false)
+const enableCompression = ref(false)
+
+// Step 3 fields
+const ikeVersion = ref('')
+const ikeEncryptionAlgorithm = ref('')
+const ikeIntegrityAlgorithm = ref('')
+const ikeDiffieHellmanGroup = ref('')
+const ikeKeyLifetime = ref('')
+const espEncryptionAlgorithm = ref('')
+const espIntegrityAlgorithm = ref('')
+const espDiffieHellmanGroup = ref('')
+const espKeyLifetime = ref('')
+
+// Form options
+const ikeVersionOptions: NeComboboxOption[] = [
+  {
+    id: 'ike',
+    label: 'IKEv1 & IKEv2'
+  },
+  {
+    id: 'ikev1',
+    label: 'IKEv1'
+  },
+  {
+    id: 'ikev2',
+    label: 'IKEv2'
+  }
+]
+const presharedKeyOptions = [
+  {
+    id: 'generate',
+    label: t('standalone.ipsec_tunnel.generate_key'),
+    icon: 'key'
+  },
+  {
+    id: 'import',
+    label: t('standalone.ipsec_tunnel.import_key'),
+    icon: 'circle-arrow-up'
+  }
+]
+const wanOptions = ref<NeComboboxOption[]>([])
+const encryptionOptions = ref<NeComboboxOption[]>([])
+const integrityOptions = ref<NeComboboxOption[]>([])
+const diffieHellmanOptions = ref<NeComboboxOption[]>([])
+
+async function fetchOptions() {
+  try {
+    const wansResponse = await ubusCall('ns.ipsectunnel', 'list-wans')
+    wanOptions.value = wansResponse.data.wans.map((x: { device: string; ipaddr: string }) => ({
+      id: x.ipaddr,
+      description: x.device,
+      label: x.ipaddr
+    }))
+  } catch (err: any) {
+    error.value.notificationTitle = t('error.cannot_retrieve_wan_list')
+    error.value.notificationDescription = t(getAxiosErrorMessage(err))
+    error.value.notificationDetails = err.toString()
+    throw err
+  }
+
+  try {
+    const algsResponse = await ubusCall('ns.ipsectunnel', 'list-algs')
+    encryptionOptions.value = algsResponse.data.encryption.map(
+      (x: { id: string; name: string }) => ({
+        id: x.id,
+        label: x.name
+      })
+    )
+    integrityOptions.value = algsResponse.data.integrity.map((x: { id: string; name: string }) => ({
+      id: x.id,
+      label: x.name
+    }))
+    diffieHellmanOptions.value = algsResponse.data.dh.map((x: { id: string; name: string }) => ({
+      id: x.id,
+      label:
+        x.name == '-' ? t('standalone.ipsec_tunnel.pfs_perfect_forward_secrecy_disabled') : x.name
+    }))
+  } catch (err: any) {
+    error.value.notificationTitle = t('error.cannot_retrieve_ipsec_algorithms')
+    error.value.notificationDescription = t(getAxiosErrorMessage(err))
+    error.value.notificationDetails = err.toString()
+    throw err
+  }
+}
+
+async function resetForm() {
+  step.value = 1
+  // tunnelData is null if there is no item to edit, otherwise it will contain the result from the get-tunnel call
+  let tunnelData: CreateEditIpsecTunnelPayload | null = null
+
+  if (props.itemToEdit) {
+    try {
+      tunnelData = (
+        await ubusCall('ns.ipsectunnel', 'get-tunnel', {
+          id: props.itemToEdit.id
+        })
+      ).data as CreateEditIpsecTunnelPayload
+
+      localIdentifier.value = tunnelData.local_identifier
+      remoteIdentifier.value = tunnelData.remote_identifier
+      presharedKey.value = tunnelData.pre_shared_key
+      presharedKeyMode.value = 'import'
+    } catch (err: any) {
+      error.value.notificationTitle = t('error.cannot_retrieve_tunnel_data')
+      error.value.notificationDescription = t(getAxiosErrorMessage(err))
+      error.value.notificationDetails = err.toString()
+      throw err
+    }
+  } else {
+    try {
+      // get default values if tunnel is being added
+      const defaultsResponse = await ubusCall('ns.ipsectunnel', 'get-defaults')
+      localIdentifier.value = defaultsResponse.data.local_identifier
+      remoteIdentifier.value = defaultsResponse.data.remote_identifier
+      generatedPresharedKey.value = defaultsResponse.data.pre_shared_key
+      presharedKeyMode.value = 'generate'
+      presharedKey.value = ''
+    } catch (err: any) {
+      error.value.notificationTitle = t('error.cannot_retrieve_tunnel_defaults')
+      error.value.notificationDescription = t(getAxiosErrorMessage(err))
+      error.value.notificationDetails = err.toString()
+      throw err
+    }
+  }
+
+  id.value = props.itemToEdit?.id ?? ''
+  name.value = tunnelData?.ns_name ?? ''
+  enabled.value = tunnelData ? tunnelData.enabled === '1' : true
+  wanIpAddress.value = tunnelData?.local_ip ?? ''
+  remoteIpAddress.value = tunnelData?.gateway ?? ''
+  localNetworks.value = tunnelData?.local_subnet ?? []
+  remoteNetworks.value = tunnelData?.remote_subnet ?? []
+  dpd.value = tunnelData ? tunnelData.dpdaction == 'restart' : false
+  enableCompression.value = tunnelData ? tunnelData.ipcomp === 'true' : false
+  ikeVersion.value = tunnelData?.keyexchange ?? ikeVersionOptions[0].id
+  ikeEncryptionAlgorithm.value =
+    tunnelData?.ike.encryption_algorithm ?? encryptionOptions.value[0].id
+  ikeIntegrityAlgorithm.value = tunnelData?.ike.hash_algorithm ?? integrityOptions.value[0].id
+  ikeDiffieHellmanGroup.value = tunnelData?.ike.dh_group ?? diffieHellmanOptions.value[0].id
+  ikeKeyLifetime.value = tunnelData?.ike.rekeytime ?? ''
+  espEncryptionAlgorithm.value =
+    tunnelData?.esp.encryption_algorithm ?? encryptionOptions.value[0].id
+  espIntegrityAlgorithm.value = tunnelData?.esp.hash_algorithm ?? integrityOptions.value[0].id
+  espDiffieHellmanGroup.value = tunnelData?.esp.dh_group ?? diffieHellmanOptions.value[0].id
+  espKeyLifetime.value = tunnelData?.esp.rekeytime ?? ''
+}
+
+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 validateNetworkFields(
+  networkList: string[],
+  validationBagKey: string
+): [boolean, string[]] {
+  let validationErrors = []
+  let validationResult = true
+  networkList.forEach(() => {
+    validationErrors.push('')
+  })
+
+  if (networkList.length == 0) {
+    validationErrorBag.value.set(validationBagKey, [t('error.required')])
+    return [false, []]
+  }
+
+  for (let [index, networkEntry] of networkList.entries()) {
+    if (networkEntry) {
+      let validator = validateIp4Cidr(networkEntry)
+      if (!validator.valid) {
+        validationErrors[index] = t(validator.errMessage as string)
+        validationResult = false
+      }
+    } else {
+      validationErrors[index] = t('error.required')
+      validationResult = false
+    }
+  }
+
+  return [validationResult, validationErrors]
+}
+
+function validateFormByStep(step: number): boolean {
+  if (step == 1) {
+    const [localValidationResult, localValidationError] = validateNetworkFields(
+      localNetworks.value,
+      'localNetworks'
+    )
+    localNetworksValidationErrors.value = localValidationError
+
+    const [remoteValidationResult, remoteValidationError] = validateNetworkFields(
+      remoteNetworks.value,
+      'remoteNetworks'
+    )
+    remoteNetworksValidationErrors.value = remoteValidationError
+
+    const step1Validators: [validationOutput[], string][] = [
+      [[validateRequired(name.value)], 'name'],
+      [[validateRequired(wanIpAddress.value)], 'wanIpAddress'],
+      [
+        [validateRequired(remoteIpAddress.value), validateIpAddress(remoteIpAddress.value)],
+        'remoteIpAddress'
+      ],
+      [[validateRequired(localIdentifier.value)], 'localIdentifier'],
+      [[validateRequired(remoteIdentifier.value)], 'remoteIdentifier']
+    ]
+
+    return (
+      step1Validators
+        .map(([validator, label]) => runValidators(validator, label))
+        .every((result) => result) &&
+      localValidationResult &&
+      remoteValidationResult
+    )
+  } else if (step == 2) {
+    if (presharedKeyMode.value === 'generate') {
+      return true
+    } else {
+      const validator = validateRequired(presharedKey.value)
+      if (!validator.valid) {
+        validationErrorBag.value.set('presharedKey', [t(validator.errMessage as string)])
+        return false
+      }
+      return true
+    }
+  } else {
+    const step3Validators: [validationOutput[], string][] = [
+      [[validateRequired(ikeVersion.value)], 'ikeVersion'],
+      [[validateRequired(ikeEncryptionAlgorithm.value)], 'ikeEncryptionAlgorithm'],
+      [[validateRequired(ikeIntegrityAlgorithm.value)], 'ikeIntegrityAlgorithm'],
+      [[validateRequired(ikeKeyLifetime.value)], 'ikeKeyLifetime'],
+      [[validateRequired(espEncryptionAlgorithm.value)], 'espEncryptionAlgorithm'],
+      [[validateRequired(espIntegrityAlgorithm.value)], 'espIntegrityAlgorithm'],
+      [[validateRequired(espKeyLifetime.value)], 'espKeyLifetime']
+    ]
+
+    return step3Validators
+      .map(([validator, label]) => runValidators(validator, label))
+      .every((result) => result)
+  }
+}
+
+function handleNextStep() {
+  cleanValidationErrors()
+  if (validateFormByStep(step.value)) {
+    if (step.value == 3) {
+      createOrEditTunnel()
+    } else {
+      step.value++
+    }
+  }
+}
+
+function handlePreviousStep() {
+  if (step.value == 1) {
+    close()
+  } else {
+    step.value--
+  }
+}
+
+async function createOrEditTunnel() {
+  error.value.notificationTitle = ''
+  error.value.notificationDescription = ''
+  const isEditing = id.value != ''
+  const requestType = isEditing ? 'edit-tunnel' : 'add-tunnel'
+  const payload: CreateEditIpsecTunnelPayload = {
+    ns_name: name.value,
+    ike: {
+      hash_algorithm: ikeIntegrityAlgorithm.value,
+      encryption_algorithm: ikeEncryptionAlgorithm.value,
+      dh_group: ikeDiffieHellmanGroup.value,
+      rekeytime: ikeKeyLifetime.value
+    },
+    esp: {
+      hash_algorithm: espIntegrityAlgorithm.value,
+      encryption_algorithm: espEncryptionAlgorithm.value,
+      dh_group: espDiffieHellmanGroup.value,
+      rekeytime: espKeyLifetime.value
+    },
+    ipcomp: enableCompression.value ? 'true' : 'false',
+    enabled: enabled.value ? '1' : '0',
+    dpdaction: dpd.value ? 'restart' : 'none',
+    keyexchange: ikeVersion.value,
+    remote_subnet: remoteNetworks.value.filter((x) => x != ''),
+    local_subnet: localNetworks.value.filter((x) => x != ''),
+    gateway: remoteIpAddress.value,
+    local_identifier: localIdentifier.value,
+    remote_identifier: remoteIdentifier.value,
+    local_ip: wanIpAddress.value,
+    pre_shared_key:
+      presharedKeyMode.value == 'import' ? presharedKey.value : generatedPresharedKey.value
+  }
+
+  if (isEditing) payload.id = id.value
+
+  try {
+    isSavingChanges.value = true
+    await ubusCall('ns.ipsectunnel', requestType, payload)
+    emit('add-edit-tunnel')
+    close()
+  } catch (err: any) {
+    error.value.notificationTitle = isEditing
+      ? t('error.cannot_edit_tunnel')
+      : t('error.cannot_create_tunnel')
+
+    error.value.notificationDescription = t(getAxiosErrorMessage(err))
+    error.value.notificationDetails = err.toString()
+  } finally {
+    isSavingChanges.value = false
+  }
+}
+
+function cleanValidationErrors() {
+  validationErrorBag.value.clear()
+  localNetworksValidationErrors.value = []
+  remoteNetworksValidationErrors.value = []
+}
+
+function close() {
+  cleanValidationErrors()
+  error.value.notificationTitle = ''
+  error.value.notificationDescription = ''
+  emit('close')
+}
+
+watch(
+  () => props.isShown,
+  () => {
+    if (props.isShown) {
+      loading.value = true
+      fetchOptions().then(() => {
+        resetForm().then(() => {
+          loading.value = false
+        })
+      })
+    }
+  }
+)
+</script>
+
+<template>
+  <NeSideDrawer
+    :is-shown="isShown"
+    @close="close()"
+    :closeAriaLabel="t('standalone.shell.close_side_drawer')"
+    :title="
+      id
+        ? t('standalone.ipsec_tunnel.edit_ipsec_tunnel')
+        : t('standalone.ipsec_tunnel.add_ipsec_tunnel')
+    "
+  >
+    <NeInlineNotification
+      v-if="error.notificationTitle"
+      :title="error.notificationTitle"
+      :description="error.notificationDescription"
+      class="mb-6"
+      kind="error"
+    >
+      <template #details v-if="error.notificationDetails">
+        {{ error.notificationDetails }}
+      </template></NeInlineNotification
+    >
+    <NeSkeleton :lines="20" v-if="loading" />
+    <div class="flex flex-col gap-y-6" v-else>
+      <NeStepper :currentStep="step" :totalSteps="3" :stepLabel="t('common.step')" />
+      <template v-if="step == 1">
+        <div>
+          <NeFormItemLabel>{{ t('standalone.ipsec_tunnel.status') }}</NeFormItemLabel>
+          <NeToggle
+            :label="
+              enabled ? t('standalone.ipsec_tunnel.enabled') : t('standalone.ipsec_tunnel.disabled')
+            "
+            v-model="enabled"
+          />
+        </div>
+        <NeTextInput
+          v-model="name"
+          :label="t('standalone.ipsec_tunnel.tunnel_name')"
+          :invalidMessage="validationErrorBag.getFirstFor('name')"
+        />
+        <NeCombobox
+          v-model="wanIpAddress"
+          :label="t('standalone.ipsec_tunnel.wan_ip_address')"
+          :placeholder="t('standalone.ipsec_tunnel.choose_wan')"
+          :invalidMessage="validationErrorBag.getFirstFor('wanIpAddress')"
+          :options="wanOptions"
+          :noOptionsLabel="t('ne_combobox.no_options_label')"
+          :noResultsLabel="t('ne_combobox.no_results')"
+        />
+        <NeTextInput
+          v-model="remoteIpAddress"
+          :label="t('standalone.ipsec_tunnel.remote_ip_address')"
+          :invalidMessage="validationErrorBag.getFirstFor('remoteIpAddress')"
+          ><template #tooltip>
+            <NeTooltip
+              ><template #content>{{
+                t('standalone.ipsec_tunnel.remote_ip_address_tooltip')
+              }}</template></NeTooltip
+            >
+          </template>
+        </NeTextInput>
+        <NeMultiTextInput
+          v-model="localNetworks"
+          :add-item-label="t('standalone.ipsec_tunnel.add_network')"
+          :title="t('standalone.ipsec_tunnel.local_networks')"
+          :invalid-messages="localNetworksValidationErrors"
+          :general-invalid-message="validationErrorBag.getFirstFor('localNetworks')"
+          @add-item="validationErrorBag.delete('localNetworks')"
+        />
+        <NeMultiTextInput
+          v-model="remoteNetworks"
+          :add-item-label="t('standalone.ipsec_tunnel.add_network')"
+          :title="t('standalone.ipsec_tunnel.remote_networks')"
+          :invalid-messages="remoteNetworksValidationErrors"
+          :general-invalid-message="validationErrorBag.getFirstFor('remoteNetworks')"
+          @add-item="validationErrorBag.delete('remoteNetworks')"
+        />
+        <NeTextInput
+          v-model="localIdentifier"
+          :label="t('standalone.ipsec_tunnel.local_identifier')"
+          :invalidMessage="validationErrorBag.getFirstFor('localIdentifier')"
+          ><template #tooltip>
+            <NeTooltip
+              ><template #content>{{
+                t('standalone.ipsec_tunnel.local_identifier_tooltip')
+              }}</template></NeTooltip
+            >
+          </template>
+        </NeTextInput>
+        <NeTextInput
+          v-model="remoteIdentifier"
+          :label="t('standalone.ipsec_tunnel.remote_identifier')"
+          :invalidMessage="validationErrorBag.getFirstFor('remoteIdentifier')"
+        />
+      </template>
+      <template v-else-if="step == 2">
+        <NeRadioSelection
+          v-if="!id"
+          :label="t('standalone.ipsec_tunnel.pre_shared_key')"
+          :options="presharedKeyOptions"
+          v-model="presharedKeyMode"
+          :card="true"
+          :grid-style="'grid-cols-1 sm:grid-cols-2 gap-3'"
+        />
+
+        <NeTextInput
+          v-model="presharedKey"
+          :invalidMessage="validationErrorBag.getFirstFor('presharedKey')"
+          :label="id ? t('standalone.ipsec_tunnel.pre_shared_key') : ''"
+          v-if="presharedKeyMode == 'import'"
+        />
+        <NeCopyField v-else :value="generatedPresharedKey" />
+
+        <div>
+          <NeFormItemLabel>{{
+            t('standalone.ipsec_tunnel.dpd_dead_peer_detection')
+          }}</NeFormItemLabel>
+          <NeToggle
+            :label="
+              dpd ? t('standalone.ipsec_tunnel.enabled') : t('standalone.ipsec_tunnel.disabled')
+            "
+            v-model="dpd"
+          />
+        </div>
+        <div>
+          <NeFormItemLabel>{{ t('standalone.ipsec_tunnel.compression') }}</NeFormItemLabel>
+          <NeToggle
+            :label="
+              enableCompression
+                ? t('standalone.ipsec_tunnel.enabled')
+                : t('standalone.ipsec_tunnel.disabled')
+            "
+            v-model="enableCompression"
+          />
+        </div>
+      </template>
+      <template v-else>
+        <NeTitle level="h4">{{ t('standalone.ipsec_tunnel.phase_one_ike') }}</NeTitle>
+        <NeCombobox
+          v-model="ikeVersion"
+          :label="t('standalone.ipsec_tunnel.ike_version')"
+          :invalidMessage="validationErrorBag.getFirstFor('ikeVersion')"
+          :noOptionsLabel="t('ne_combobox.no_options_label')"
+          :noResultsLabel="t('ne_combobox.no_results')"
+          :options="ikeVersionOptions"
+        />
+        <NeCombobox
+          v-model="ikeEncryptionAlgorithm"
+          :label="t('standalone.ipsec_tunnel.encryption_algorithm')"
+          :invalidMessage="validationErrorBag.getFirstFor('ikeEncryptionAlgorithm')"
+          :noOptionsLabel="t('ne_combobox.no_options_label')"
+          :noResultsLabel="t('ne_combobox.no_results')"
+          :options="encryptionOptions"
+        />
+        <NeCombobox
+          v-model="ikeIntegrityAlgorithm"
+          :label="t('standalone.ipsec_tunnel.integrity_algorithm')"
+          :invalidMessage="validationErrorBag.getFirstFor('ikeIntegrityAlgorithm')"
+          :noOptionsLabel="t('ne_combobox.no_options_label')"
+          :noResultsLabel="t('ne_combobox.no_results')"
+          :options="integrityOptions"
+        />
+        <NeCombobox
+          v-model="ikeDiffieHellmanGroup"
+          :label="t('standalone.ipsec_tunnel.diffie_hellman_group')"
+          :invalidMessage="validationErrorBag.getFirstFor('ikeDiffieHellmanGroup')"
+          :noOptionsLabel="t('ne_combobox.no_options_label')"
+          :noResultsLabel="t('ne_combobox.no_results')"
+          :options="diffieHellmanOptions"
+        />
+        <NeTextInput
+          v-model="ikeKeyLifetime"
+          type="number"
+          :label="t('standalone.ipsec_tunnel.key_life_time_seconds')"
+          :invalidMessage="validationErrorBag.getFirstFor('ikeKeyLifetime')"
+        />
+        <NeTitle level="h4">{{ t('standalone.ipsec_tunnel.phase_two_esp') }}</NeTitle>
+        <NeCombobox
+          v-model="espEncryptionAlgorithm"
+          :label="t('standalone.ipsec_tunnel.encryption_algorithm')"
+          :invalidMessage="validationErrorBag.getFirstFor('espEncryptionAlgorithm')"
+          :noOptionsLabel="t('ne_combobox.no_options_label')"
+          :noResultsLabel="t('ne_combobox.no_results')"
+          :options="encryptionOptions"
+        />
+        <NeCombobox
+          v-model="espIntegrityAlgorithm"
+          :label="t('standalone.ipsec_tunnel.integrity_algorithm')"
+          :invalidMessage="validationErrorBag.getFirstFor('espIntegrityAlgorithm')"
+          :noOptionsLabel="t('ne_combobox.no_options_label')"
+          :noResultsLabel="t('ne_combobox.no_results')"
+          :options="integrityOptions"
+        />
+        <NeCombobox
+          v-model="espDiffieHellmanGroup"
+          :label="t('standalone.ipsec_tunnel.diffie_hellman_group')"
+          :invalidMessage="validationErrorBag.getFirstFor('espDiffieHellmanGroup')"
+          :noOptionsLabel="t('ne_combobox.no_options_label')"
+          :noResultsLabel="t('ne_combobox.no_results')"
+          :options="diffieHellmanOptions"
+        />
+        <NeTextInput
+          v-model="espKeyLifetime"
+          type="number"
+          :label="t('standalone.ipsec_tunnel.key_life_time_seconds')"
+          :invalidMessage="validationErrorBag.getFirstFor('espKeyLifetime')"
+        />
+      </template>
+      <hr />
+      <div class="flex justify-end">
+        <NeButton kind="tertiary" class="mr-4" @click="handlePreviousStep">{{
+          step == 1 ? t('common.cancel') : t('common.previous')
+        }}</NeButton>
+        <NeButton
+          kind="primary"
+          @click="handleNextStep"
+          :disabled="isSavingChanges"
+          :loading="isSavingChanges"
+          >{{
+            step === 3
+              ? id
+                ? t('common.save')
+                : t('standalone.ipsec_tunnel.add_tunnel')
+              : t('common.next')
+          }}</NeButton
+        >
+      </div>
+    </div>
+  </NeSideDrawer>
+</template>
diff --git a/src/components/standalone/ipsec_tunnel/DeleteTunnelModal.vue b/src/components/standalone/ipsec_tunnel/DeleteTunnelModal.vue
new file mode 100644
index 000000000..dd5df8b5c
--- /dev/null
+++ b/src/components/standalone/ipsec_tunnel/DeleteTunnelModal.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { NeModal, NeInlineNotification, getAxiosErrorMessage } from '@nethserver/vue-tailwind-lib'
+import { ref, toRefs } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { ubusCall } from '@/lib/standalone/ubus'
+import type { IpsecTunnel } from '@/views/standalone/vpn/IPsecTunnelView.vue'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  visible: boolean
+  itemToDelete: IpsecTunnel | null
+}>()
+
+const emit = defineEmits(['close', 'tunnel-deleted'])
+
+const { visible, itemToDelete } = toRefs(props)
+const error = ref({
+  notificationDescription: '',
+  notificationDetails: ''
+})
+const isDeleting = ref(false)
+
+async function deleteTunnel() {
+  if (itemToDelete.value) {
+    try {
+      error.value = {
+        notificationDescription: '',
+        notificationDetails: ''
+      }
+      isDeleting.value = true
+      await ubusCall('ns.ipsectunnel', 'delete-tunnel', { id: itemToDelete.value.id })
+      emit('tunnel-deleted')
+      emit('close')
+    } catch (err: any) {
+      error.value.notificationDescription = t(getAxiosErrorMessage(err))
+      error.value.notificationDetails = err.toString()
+    } finally {
+      isDeleting.value = false
+    }
+  }
+}
+
+function close() {
+  error.value = {
+    notificationDescription: '',
+    notificationDetails: ''
+  }
+  emit('close')
+}
+</script>
+
+<template>
+  <NeModal
+    :visible="visible"
+    kind="warning"
+    :title="t('standalone.ipsec_tunnel.delete_tunnel')"
+    :primaryLabel="t('common.delete')"
+    :primaryButtonDisabled="isDeleting"
+    :primaryButtonLoading="isDeleting"
+    @primaryClick="deleteTunnel()"
+    @close="close()"
+  >
+    {{
+      t('standalone.ipsec_tunnel.delete_tunnel_message', {
+        name: itemToDelete?.name ?? ''
+      })
+    }}
+    <NeInlineNotification
+      v-if="error.notificationDescription"
+      kind="error"
+      :title="t('error.cannot_delete_tunnel')"
+      :description="error.notificationDescription"
+      class="my-2"
+      ><template #details v-if="error.notificationDetails">
+        {{ error.notificationDetails }}
+      </template></NeInlineNotification
+    >
+  </NeModal>
+</template>
diff --git a/src/components/standalone/ipsec_tunnel/TunnelTable.vue b/src/components/standalone/ipsec_tunnel/TunnelTable.vue
new file mode 100644
index 000000000..4baf6b5bc
--- /dev/null
+++ b/src/components/standalone/ipsec_tunnel/TunnelTable.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import NeTable from '../NeTable.vue'
+import { NeDropdown, NeButton } from '@nethserver/vue-tailwind-lib'
+import type { IpsecTunnel } from '@/views/standalone/vpn/IPsecTunnelView.vue'
+
+const { t } = useI18n()
+
+defineProps<{
+  tunnels: IpsecTunnel[]
+}>()
+
+const emit = defineEmits(['tunnel-delete', 'tunnel-edit', 'tunnel-toggle-enable'])
+
+const tableHeaders = [
+  {
+    label: t('standalone.ipsec_tunnel.name'),
+    key: 'name'
+  },
+  {
+    label: t('standalone.ipsec_tunnel.local_networks'),
+    key: 'local_networks'
+  },
+  {
+    label: t('standalone.ipsec_tunnel.remote_networks'),
+    key: 'remote_networks'
+  },
+  {
+    label: t('standalone.ipsec_tunnel.status'),
+    key: 'status'
+  },
+  {
+    label: t('standalone.ipsec_tunnel.connection'),
+    key: 'connection'
+  },
+  {
+    label: '',
+    key: 'menu'
+  }
+]
+
+function getDropdownItems(item: IpsecTunnel) {
+  return [
+    {
+      id: 'enable_disable',
+      label:
+        item.enabled === '1'
+          ? t('standalone.ipsec_tunnel.disable')
+          : t('standalone.ipsec_tunnel.enable'),
+      iconStyle: 'fas',
+      icon: item.enabled === '1' ? 'circle-xmark' : 'circle-check',
+      action: () => {
+        emit('tunnel-toggle-enable', item)
+      }
+    },
+    {
+      id: 'delete',
+      label: t('common.delete'),
+      iconStyle: 'fas',
+      icon: 'trash',
+      danger: true,
+      action: () => {
+        emit('tunnel-delete', item)
+      }
+    }
+  ]
+}
+
+function getCellClasses(item: IpsecTunnel) {
+  return item.enabled === '0' ? ['text-gray-400', 'dark:text-gray-700'] : []
+}
+</script>
+
+<template>
+  <NeTable :data="tunnels" :headers="tableHeaders">
+    <template #name="{ item }: { item: IpsecTunnel }">
+      <p :class="[...getCellClasses(item)]">{{ item.name }}</p>
+    </template>
+    <template #local_networks="{ item }: { item: IpsecTunnel }">
+      <template v-if="item.local.length > 0">
+        <p
+          v-for="(local, idx) in item.local.slice(0, 2)"
+          :key="local"
+          :class="[...getCellClasses(item)]"
+        >
+          {{ local }}{{ item.local.length > 2 && idx == 1 ? '...' : '' }}
+        </p>
+      </template>
+      <p :class="[...getCellClasses(item)]" v-else>-</p>
+    </template>
+    <template #remote_networks="{ item }: { item: IpsecTunnel }">
+      <template v-if="item.remote.length > 0">
+        <p
+          v-for="(remote, idx) in item.remote.slice(0, 2)"
+          :key="remote"
+          :class="[...getCellClasses(item)]"
+        >
+          {{ remote }}{{ item.remote.length > 2 && idx == 1 ? '...' : '' }}
+        </p>
+      </template>
+      <p :class="[...getCellClasses(item)]" v-else>-</p>
+    </template>
+    <template #status="{ item }: { item: IpsecTunnel }">
+      <div :class="['flex', 'flex-row', 'items-center', ...getCellClasses(item)]">
+        <font-awesome-icon
+          :icon="['fas', item.enabled === '1' ? 'circle-check' : 'circle-xmark']"
+          class="mr-2 h-5 w-5"
+          aria-hidden="true"
+        />
+        <p>
+          {{
+            item.enabled === '1'
+              ? t('standalone.ipsec_tunnel.enabled')
+              : t('standalone.ipsec_tunnel.disabled')
+          }}
+        </p>
+      </div>
+    </template>
+    <template #connection="{ item }: { item: IpsecTunnel }">
+      <div :class="['flex', 'flex-row', 'items-center', ...getCellClasses(item)]">
+        <font-awesome-icon
+          :icon="['fas', item.connected ? 'circle-check' : 'circle-xmark']"
+          :class="[
+            'mr-2',
+            'h-5',
+            'w-5',
+            item.enabled === '0'
+              ? 'text-gray-400 dark:text-gray-700'
+              : item.connected
+              ? 'text-green-500'
+              : 'text-rose-500'
+          ]"
+          aria-hidden="true"
+        />
+        <p>
+          {{
+            item.connected
+              ? t('standalone.ipsec_tunnel.connected')
+              : t('standalone.ipsec_tunnel.not_connected')
+          }}
+        </p>
+      </div>
+    </template>
+    <template #menu="{ item }: { item: IpsecTunnel }">
+      <div class="align-center flex justify-end">
+        <NeButton kind="tertiary" @click="emit('tunnel-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>
+</template>
diff --git a/src/components/standalone/subscription/RemoteSupport.vue b/src/components/standalone/subscription/RemoteSupport.vue
index 3326d14a5..2413b7131 100644
--- a/src/components/standalone/subscription/RemoteSupport.vue
+++ b/src/components/standalone/subscription/RemoteSupport.vue
@@ -11,6 +11,7 @@ import {
 import { toRefs } from 'vue'
 import { ubusCall } from '@/lib/standalone/ubus'
 import { onMounted } from 'vue'
+import NeCopyField from '../NeCopyField.vue'
 
 type DonRequestType = 'start' | 'status' | 'stop'
 
@@ -54,10 +55,6 @@ async function getSessionStatus() {
   isLoadingSessionStatus.value = false
 }
 
-function copySessionId() {
-  navigator.clipboard.writeText(sessionId.value)
-}
-
 async function makeDonRequest(type: DonRequestType) {
   try {
     error.value = ''
@@ -102,23 +99,11 @@ onMounted(() => {
       >
       <div v-else>
         <!-- Session ID item -->
-        <p class="mb-2 text-sm font-medium leading-6 text-gray-700 dark:text-gray-200">
-          {{ t('standalone.subscription.session_id') }}
-        </p>
-        <div
-          class="text-md flex flex-row rounded-md border border-gray-300 bg-white text-gray-700 transition-colors duration-200 dark:border-gray-600 dark:bg-gray-950 dark:text-gray-200 sm:text-sm sm:leading-6"
-        >
-          <div class="mt-0 flex-grow px-3 py-1.5">
-            {{ sessionId }}
-          </div>
-          <button
-            class="rounded-r-md bg-gray-50 px-3 py-1.5 duration-200 hover:bg-gray-200 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-white focus:duration-0 dark:bg-gray-950 dark:hover:bg-gray-800 dark:focus:ring-primary-300 dark:focus:ring-offset-primary-950"
-            @click="copySessionId()"
-          >
-            <font-awesome-icon :icon="['fas', 'clone']" aria-hidden="true" class="mr-2 h-4 w-4" />
-            {{ t('standalone.subscription.copy_id') }}
-          </button>
-        </div>
+        <NeCopyField
+          :label="t('standalone.subscription.session_id')"
+          :value="sessionId"
+          :copy-value-label="t('standalone.subscription.copy_id')"
+        />
 
         <div class="mt-6 flex justify-end">
           <NeButton
diff --git a/src/lib/fontawesome.ts b/src/lib/fontawesome.ts
index 2b9b7bfe1..b6290d235 100644
--- a/src/lib/fontawesome.ts
+++ b/src/lib/fontawesome.ts
@@ -91,6 +91,7 @@ import {
   faWhatsapp,
   faYoutube
 } from '@nethesis/nethesis-brands-svg-icons'
+import { faKey } from '@fortawesome/free-solid-svg-icons/faKey'
 
 export async function loadFontAwesome(app: any) {
   app.component('FontAwesomeIcon', FontAwesomeIcon)
@@ -183,4 +184,5 @@ export async function loadFontAwesome(app: any) {
   library.add(faTwitch)
   library.add(fasTrafficCone)
   library.add(fasStar)
+  library.add(faKey)
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index 5d73ca6ad..c7fe5ce1c 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -100,6 +100,11 @@ const standaloneRoutes = [
     name: 'OpenVPNTunnel',
     component: () => import('../views/standalone/vpn/OpenvpnTunnelView.vue')
   },
+  {
+    path: 'vpn/ipsec-tunnel',
+    name: 'IPsecTunnel',
+    component: () => import('../views/standalone/vpn/IPsecTunnelView.vue')
+  },
   {
     path: 'logs',
     name: 'Logs',
diff --git a/src/views/standalone/vpn/IPsecTunnelView.vue b/src/views/standalone/vpn/IPsecTunnelView.vue
new file mode 100644
index 000000000..3c097f72c
--- /dev/null
+++ b/src/views/standalone/vpn/IPsecTunnelView.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import {
+  NeTitle,
+  NeButton,
+  NeEmptyState,
+  NeInlineNotification,
+  NeSkeleton,
+  getAxiosErrorMessage
+} from '@nethserver/vue-tailwind-lib'
+import { useUciPendingChangesStore } from '@/stores/standalone/uciPendingChanges'
+import { onMounted, ref } from 'vue'
+import { ubusCall } from '@/lib/standalone/ubus'
+import TunnelTable from '@/components/standalone/ipsec_tunnel/TunnelTable.vue'
+import DeleteTunnelModal from '@/components/standalone/ipsec_tunnel/DeleteTunnelModal.vue'
+import CreateOrEditTunnelDrawer from '@/components/standalone/ipsec_tunnel/CreateOrEditTunnelDrawer.vue'
+
+export type IpsecTunnel = {
+  id: string
+  name: string
+  local: string[]
+  remote: string[]
+  enabled: '0' | '1'
+  connected: boolean
+}
+
+const { t } = useI18n()
+
+const uciChangesStore = useUciPendingChangesStore()
+
+const loading = ref(true)
+const tunnels = ref([])
+const selectedTunnel = ref<IpsecTunnel | null>(null)
+const showCreateEditDrawer = ref(false)
+const showDeleteModal = ref(false)
+
+const error = ref({
+  notificationTitle: '',
+  notificationDescription: '',
+  notificationDetails: ''
+})
+
+async function fetchTunnels() {
+  try {
+    loading.value = true
+    tunnels.value = (await ubusCall('ns.ipsectunnel', 'list-tunnels')).data.tunnels
+    loading.value = false
+  } catch (err: any) {
+    error.value.notificationTitle = t('error.cannot_retrieve_ipsec_tunnels')
+    error.value.notificationDescription = t(getAxiosErrorMessage(err))
+    error.value.notificationDetails = err.toString()
+  }
+}
+
+function openCreateEditDrawer(itemToEdit: IpsecTunnel | null) {
+  selectedTunnel.value = itemToEdit
+  showCreateEditDrawer.value = true
+}
+
+function openDeleteModal(itemToDelete: IpsecTunnel) {
+  selectedTunnel.value = itemToDelete
+  showDeleteModal.value = true
+}
+
+function closeModalsAndDrawers() {
+  selectedTunnel.value = null
+  showDeleteModal.value = false
+  showCreateEditDrawer.value = false
+}
+
+function cleanError() {
+  error.value = {
+    notificationTitle: '',
+    notificationDescription: '',
+    notificationDetails: ''
+  }
+}
+
+async function toggleTunnelEnable(tunnel: IpsecTunnel) {
+  try {
+    cleanError()
+    await ubusCall('ns.ipsectunnel', tunnel.enabled === '1' ? 'disable-tunnel' : 'enable-tunnel', {
+      id: tunnel.id
+    })
+    await reloadTunnels()
+  } catch (err: any) {
+    error.value.notificationTitle = t(
+      tunnel.enabled ? 'error.cannot_disable_tunnel' : 'error.cannot_enable_tunnel'
+    )
+    error.value.notificationDescription = t(getAxiosErrorMessage(err))
+    error.value.notificationDetails = err.toString()
+  }
+}
+
+async function reloadTunnels() {
+  cleanError()
+  await fetchTunnels()
+  await uciChangesStore.getChanges()
+}
+
+onMounted(() => {
+  fetchTunnels()
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-y-6">
+    <NeTitle>{{ t('standalone.ipsec_tunnel.title') }}</NeTitle>
+    <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.ipsec_tunnel.description') }}
+      </p>
+      <template v-if="tunnels.length > 0">
+        <div class="ml-2 flex shrink-0 flex-col gap-x-0 gap-y-2 sm:flex-row sm:gap-x-2 sm:gap-y-0">
+          <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.ipsec_tunnel.add_ipsec_tunnel') }}
+          </NeButton>
+        </div>
+      </template>
+    </div>
+    <NeInlineNotification
+      kind="error"
+      :title="error.notificationTitle"
+      :description="error.notificationDescription"
+      v-if="error.notificationTitle"
+      ><template #details v-if="error.notificationDetails">
+        {{ error.notificationDetails }}
+      </template></NeInlineNotification
+    >
+    <NeSkeleton v-if="loading" :lines="10" />
+    <template v-else>
+      <NeEmptyState
+        v-if="tunnels.length == 0"
+        :title="t('standalone.ipsec_tunnel.no_tunnel_found')"
+        :icon="['fas', 'globe']"
+        ><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.ipsec_tunnel.add_ipsec_tunnel') }}</NeButton
+        ></NeEmptyState
+      >
+      <TunnelTable
+        v-else
+        :tunnels="tunnels"
+        @tunnel-delete="openDeleteModal"
+        @tunnel-edit="openCreateEditDrawer"
+        @tunnel-toggle-enable="toggleTunnelEnable"
+      />
+    </template>
+  </div>
+  <DeleteTunnelModal
+    :visible="showDeleteModal"
+    :item-to-delete="selectedTunnel"
+    @close="closeModalsAndDrawers"
+    @tunnel-deleted="reloadTunnels"
+  />
+  <CreateOrEditTunnelDrawer
+    :item-to-edit="selectedTunnel"
+    @close="closeModalsAndDrawers"
+    @add-edit-tunnel="reloadTunnels"
+    :is-shown="showCreateEditDrawer"
+  />
+</template>