From e1855efe912b54c63324bb61a4e72e216d76e93f Mon Sep 17 00:00:00 2001
From: Matteo Di Lorenzi <matteo.dilorenzi@nethesis.it>
Date: Thu, 18 Jun 2026 12:28:01 +0200
Subject: [PATCH 1/2] feat(dhcp): support multiple dhcp ranges

---
 .../standalone/dns_dhcp/DhcpCard.vue          |  20 ++-
 .../standalone/dns_dhcp/DhcpManager.vue       |  10 +-
 .../dns_dhcp/EditDhcpInterfaceDrawer.vue      | 163 +++++++++++++++---
 src/i18n/en.json                              |   7 +-
 src/i18n/it.json                              |   7 +-
 5 files changed, 169 insertions(+), 38 deletions(-)

diff --git a/src/components/standalone/dns_dhcp/DhcpCard.vue b/src/components/standalone/dns_dhcp/DhcpCard.vue
index 050a2c275..5e286b8c8 100644
--- a/src/components/standalone/dns_dhcp/DhcpCard.vue
+++ b/src/components/standalone/dns_dhcp/DhcpCard.vue
@@ -1,3 +1,8 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
 <script lang="ts" setup>
 import type { DhcpInterface } from '@/components/standalone/dns_dhcp/DhcpManager.vue'
 import {
@@ -35,11 +40,11 @@ const borderColor = computed((): string => {
   return getZoneBorderColorClasses(zoneName)
 })
 
-const range = computed((): string | undefined => {
-  if (dhcpInterface.first != undefined && dhcpInterface.last != undefined) {
-    return `${dhcpInterface.first} - ${dhcpInterface.last}`
+const allRanges = computed((): Array<string> => {
+  if (dhcpInterface.ranges && dhcpInterface.ranges.length > 0) {
+    return dhcpInterface.ranges.map(({ first, last }) => `${first} - ${last}`)
   }
-  return undefined
+  return []
 })
 
 const dhcpOptions = computed(() => {
@@ -133,7 +138,12 @@ const visibleOptions = computed(() => {
         />
       </p>
       <div v-if="dhcpInterface.active" class="space-y-1 font-normal">
-        <p v-if="range != undefined">{{ t('standalone.dns_dhcp.ip_range') }}: {{ range }}</p>
+        <div v-if="allRanges.length > 0" class="flex gap-2">
+          <span class="shrink-0">{{ t('standalone.dns_dhcp.ip_range') }}:</span>
+          <div class="flex flex-col gap-0.5">
+            <span v-for="(range, index) in allRanges" :key="index">{{ range }}</span>
+          </div>
+        </div>
         <p v-if="leaseTime != undefined">
           {{ t('standalone.dns_dhcp.lease_time') }}: {{ leaseTime }}
         </p>
diff --git a/src/components/standalone/dns_dhcp/DhcpManager.vue b/src/components/standalone/dns_dhcp/DhcpManager.vue
index d98a51c4f..21e3d65f6 100644
--- a/src/components/standalone/dns_dhcp/DhcpManager.vue
+++ b/src/components/standalone/dns_dhcp/DhcpManager.vue
@@ -1,5 +1,5 @@
 <!--
-  Copyright (C) 2024 Nethesis S.r.l.
+  Copyright (C) 2026 Nethesis S.r.l.
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 
@@ -24,13 +24,13 @@ type BindingType = 0 | 1 | 2
 
 export type DhcpInterface = {
   device: string
-  start: string
-  end: string
   active: boolean
   options: Record<string, string>
   zone: string
-  first?: string
-  last?: string
+  ranges: Array<{
+    first: string
+    last: string
+  }>
   ns_binding?: BindingType
 }
 
diff --git a/src/components/standalone/dns_dhcp/EditDhcpInterfaceDrawer.vue b/src/components/standalone/dns_dhcp/EditDhcpInterfaceDrawer.vue
index c7ebb6aa2..aed93ac24 100644
--- a/src/components/standalone/dns_dhcp/EditDhcpInterfaceDrawer.vue
+++ b/src/components/standalone/dns_dhcp/EditDhcpInterfaceDrawer.vue
@@ -1,5 +1,5 @@
 <!--
-  Copyright (C) 2024 Nethesis S.r.l.
+  Copyright (C) 2026 Nethesis S.r.l.
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 
@@ -16,6 +16,7 @@ import {
   getAxiosErrorMessage,
   NeButton,
   type NeComboboxOption,
+  NeFormItemLabel,
   NeInlineNotification,
   NeRadioSelection,
   NeSideDrawer,
@@ -27,8 +28,9 @@ import {
 import NeMultiTextInput, { type KeyValueItem } from '../NeMultiTextInput.vue'
 import { useI18n } from 'vue-i18n'
 import { ubusCall, ValidationError } from '@/lib/standalone/ubus'
+import { ipv4ToInt } from '@/lib/ipUtils'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
+import { faChevronDown, faChevronUp, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons'
 
 const props = defineProps<{
   isShown: boolean
@@ -57,8 +59,8 @@ const availableDhcpOptions = ref<NeComboboxOption[]>([])
 // Form fields
 const iface = ref('')
 const enableDhcp = ref(false)
-const rangeIpStart = ref('')
-const rangeIpEnd = ref('')
+const classStartIp = ref('')
+const classEndIp = ref('')
 const leaseTime = ref('')
 const dhcpOptions = ref<KeyValueItem[]>([])
 const force = ref(true)
@@ -72,6 +74,20 @@ type RadioOption = {
   description: string
 }
 
+type IpRange = { firstIp: string; lastIp: string }
+const ipRanges = ref<IpRange[]>([{ firstIp: '', lastIp: '' }])
+
+function addIpRange() {
+  if (ipRanges.value.some((range) => range.firstIp === '' && range.lastIp === '')) {
+    return
+  }
+  ipRanges.value.push({ firstIp: '', lastIp: '' })
+}
+
+function removeIpRange(index: number) {
+  ipRanges.value.splice(index, 1)
+}
+
 const macIpBindingSelections: RadioOption[] = [
   {
     id: 'soft',
@@ -93,10 +109,19 @@ async function resetForm() {
         await ubusCall('ns.dhcp', 'get-interface', { interface: props.interfaceToEdit })
       ).data
       iface.value = interfaceResponse.interface
-      rangeIpStart.value = interfaceResponse.first
-      rangeIpEnd.value = interfaceResponse.last
       leaseTime.value = interfaceResponse.leasetime
       enableDhcp.value = interfaceResponse.active
+      classStartIp.value = interfaceResponse.class_start_ip ?? ''
+      classEndIp.value = interfaceResponse.class_end_ip ?? ''
+      // map ranges to ipRanges format
+      if (interfaceResponse.ranges && interfaceResponse.ranges.length > 0) {
+        ipRanges.value = interfaceResponse.ranges.map((range: { first: string; last: string }) => ({
+          firstIp: range.first,
+          lastIp: range.last
+        }))
+      } else {
+        ipRanges.value = [{ firstIp: '', lastIp: '' }]
+      }
       dhcpOptions.value = interfaceResponse.options.map((optionObj: { [key: string]: string }) => {
         const key: keyof typeof optionObj = Object.keys(optionObj)[0]!
         return { key, value: optionObj[key] }
@@ -124,13 +149,14 @@ async function resetForm() {
   } else {
     iface.value = ''
     enableDhcp.value = false
-    rangeIpStart.value = ''
-    rangeIpEnd.value = ''
     leaseTime.value = ''
+    ipRanges.value = [{ firstIp: '', lastIp: '' }]
     dhcpOptions.value = []
     force.value = true
     enableMacIpBinding.value = false
     macIpBindingType.value = 'soft'
+    classStartIp.value = ''
+    classEndIp.value = ''
   }
 }
 
@@ -197,9 +223,67 @@ function validate() {
     }
   }
 
+  // ranges validation
+  let validRanges = true
+  for (const [index, range] of ipRanges.value.entries()) {
+    const bothEmpty = range.firstIp === '' && range.lastIp === ''
+    if (bothEmpty) continue
+
+    if (range.firstIp === '') {
+      validationErrorBag.value.set(`ranges.${index}.first`, ['error.required'])
+      validRanges = false
+    } else {
+      const firstIpValidator = validateIpAddress(range.firstIp)
+      if (!firstIpValidator.valid) {
+        validationErrorBag.value.set(`ranges.${index}.first`, [
+          firstIpValidator.errMessage as string
+        ])
+        validRanges = false
+      } else if (
+        classStartIp.value &&
+        classEndIp.value &&
+        (ipv4ToInt(range.firstIp) < ipv4ToInt(classStartIp.value) ||
+          ipv4ToInt(range.firstIp) > ipv4ToInt(classEndIp.value))
+      ) {
+        validationErrorBag.value.set(`ranges.${index}.first`, ['error.ip_out_of_class_range'])
+        validRanges = false
+      }
+    }
+
+    const firstIpValid =
+      range.firstIp !== '' &&
+      validateIpAddress(range.firstIp).valid &&
+      (!classStartIp.value ||
+        !classEndIp.value ||
+        (ipv4ToInt(range.firstIp) >= ipv4ToInt(classStartIp.value) &&
+          ipv4ToInt(range.firstIp) <= ipv4ToInt(classEndIp.value)))
+
+    if (range.lastIp === '') {
+      validationErrorBag.value.set(`ranges.${index}.last`, ['error.required'])
+      validRanges = false
+    } else {
+      const lastIpValidator = validateIpAddress(range.lastIp)
+      if (!lastIpValidator.valid) {
+        validationErrorBag.value.set(`ranges.${index}.last`, [lastIpValidator.errMessage as string])
+        validRanges = false
+      } else if (firstIpValid && ipv4ToInt(range.lastIp) <= ipv4ToInt(range.firstIp)) {
+        validationErrorBag.value.set(`ranges.${index}.last`, [
+          'error.last_must_be_greater_than_first'
+        ])
+        validRanges = false
+      } else if (
+        classStartIp.value &&
+        classEndIp.value &&
+        (ipv4ToInt(range.lastIp) < ipv4ToInt(classStartIp.value) ||
+          ipv4ToInt(range.lastIp) > ipv4ToInt(classEndIp.value))
+      ) {
+        validationErrorBag.value.set(`ranges.${index}.last`, ['error.ip_out_of_class_range'])
+        validRanges = false
+      }
+    }
+  }
+
   const validators: [validationOutput[], string][] = [
-    [[validateRequired(rangeIpStart.value), validateIpAddress(rangeIpStart.value)], 'first'],
-    [[validateRequired(rangeIpEnd.value), validateIpAddress(rangeIpEnd.value)], 'last'],
     [[validateRequired(leaseTime.value), validateLeaseTime(leaseTime.value)], 'leasetime']
   ]
 
@@ -208,7 +292,8 @@ function validate() {
       .map(([validator, label]) => runValidators(validator, label))
       .every((result) => result) &&
     validDhcpOptionValues &&
-    validDhcpOptionKeys
+    validDhcpOptionKeys &&
+    validRanges
   )
 }
 
@@ -227,8 +312,12 @@ async function saveChanges() {
       }
       await ubusCall('ns.dhcp', 'edit-interface', {
         interface: iface.value,
-        first: rangeIpStart.value,
-        last: rangeIpEnd.value,
+        ranges: ipRanges.value
+          .filter((range) => range.firstIp !== '' || range.lastIp !== '')
+          .map((range) => ({
+            first: range.firstIp,
+            last: range.lastIp
+          })),
         active: enableDhcp.value,
         leasetime: leaseTime.value,
         options: dhcpOptions.value.map((option) => ({ [option.key]: option.value })),
@@ -297,9 +386,9 @@ watch(
       </template>
     </NeInlineNotification>
     <NeSkeleton v-if="loading" :lines="10" />
-    <div v-else class="space-y-8">
+    <div v-else class="space-y-12">
       <div class="space-y-6">
-        <div class="space-y-4">
+        <div class="space-y-1">
           <h5 class="text-lg font-medium text-secondary">
             {{ t('standalone.dns_dhcp.mac_binding') }}
           </h5>
@@ -325,7 +414,7 @@ watch(
         </div>
       </div>
       <div class="space-y-6">
-        <div class="space-y-4">
+        <div class="space-y-1">
           <h5 class="text-lg font-medium text-secondary">
             {{ t('standalone.dns_dhcp.dhcp') }}
           </h5>
@@ -335,16 +424,38 @@ watch(
             :top-label="t('common.status')"
           />
         </div>
-        <NeTextInput
-          v-model="rangeIpStart"
-          :invalid-message="t(validationErrorBag.getFirstI18nKeyFor('first'))"
-          :label="t('standalone.dns_dhcp.range_ip_start')"
-        />
-        <NeTextInput
-          v-model="rangeIpEnd"
-          :invalid-message="t(validationErrorBag.getFirstI18nKeyFor('last'))"
-          :label="t('standalone.dns_dhcp.range_ip_end')"
-        />
+        <div class="space-y-2">
+          <NeFormItemLabel>{{ t('standalone.dns_dhcp.ip_ranges') }}</NeFormItemLabel>
+          <div v-for="(range, index) in ipRanges" :key="index" class="flex items-start gap-x-2">
+            <NeTextInput
+              v-model="range.firstIp"
+              :invalid-message="t(validationErrorBag.getFirstI18nKeyFor(`ranges.${index}.first`))"
+              :placeholder="t('standalone.dns_dhcp.ip_range_start')"
+              class="min-w-0 flex-1"
+            />
+            <NeTextInput
+              v-model="range.lastIp"
+              :invalid-message="t(validationErrorBag.getFirstI18nKeyFor(`ranges.${index}.last`))"
+              :placeholder="t('standalone.dns_dhcp.ip_range_end')"
+              class="min-w-0 flex-1"
+            />
+            <NeButton
+              kind="tertiary"
+              size="md"
+              :disabled="ipRanges.length <= 1"
+              class="mt-1"
+              @click="removeIpRange(index)"
+            >
+              <FontAwesomeIcon :icon="faTrash" aria-hidden="true" class="h-4 w-4" />
+            </NeButton>
+          </div>
+          <NeButton kind="tertiary" @click="addIpRange()">
+            <template #prefix>
+              <FontAwesomeIcon :icon="faPlus" />
+            </template>
+            {{ t('standalone.dns_dhcp.add_ip_range') }}
+          </NeButton>
+        </div>
         <NeTextInput
           v-model="leaseTime"
           :invalid-message="t(validationErrorBag.getFirstI18nKeyFor('leasetime'))"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 5fd7dd924..cdb8196e9 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -260,6 +260,7 @@
     "cannot_update_packages": "Cannot update packages",
     "cannot_update_system": "Cannot update system",
     "last_must_be_greater_than_first": "Ensure that the last IP in the range is greater than the first IP",
+    "ip_out_of_class_range": "IP address is outside of the interface class range",
     "cannot_delete_proxy": "Cannot delete proxy",
     "cannot_retrieve_proxies": "Cannot retrieve proxies",
     "cannot_create_proxy": "Cannot create proxy",
@@ -1325,7 +1326,11 @@
       "custom": "Custom",
       "scan_network_reservation": "Reservation",
       "scan_network_reservation_ip_reserved": "IP reserved",
-      "scan_network_reservation_ip_not_reserved": "IP not reserved"
+      "scan_network_reservation_ip_not_reserved": "IP not reserved",
+      "add_ip_range": "Add IP range",
+      "ip_ranges": "IP ranges",
+      "ip_range_start": "Range IP start",
+      "ip_range_end": "Range IP end"
     },
     "routes": {
       "title": "Routes",
diff --git a/src/i18n/it.json b/src/i18n/it.json
index a4ab4fde9..9912a0a4e 100644
--- a/src/i18n/it.json
+++ b/src/i18n/it.json
@@ -252,6 +252,7 @@
     "cannot_create_dpi_exception": "Impossibile creare l'eccezione DPI",
     "cannot_edit_dpi_exception": "Impossibile modificare l'eccezione DPI",
     "last_must_be_greater_than_first": "Assicurarsi che l'ultimo IP nel range sia più grande del primo IP",
+    "ip_out_of_class_range": "L'indirizzo IP non appartiene alla classe dell'interfaccia",
     "invalid_address": "Inserire un indirizzo IP valido con notazione CIDR opzionale, un indirizzo MAC, un nome host o un FQDN",
     "cannot_delete_dpi_exception": "Impossibile eliminare l'eccezione DPI",
     "duplicate": "Valore duplicato",
@@ -1258,7 +1259,11 @@
       "soft_binding": "Soft binding",
       "scan_network_reservation": "Riservato",
       "scan_network_reservation_ip_reserved": "IP riservato",
-      "scan_network_reservation_ip_not_reserved": "IP non riservato"
+      "scan_network_reservation_ip_not_reserved": "IP non riservato",
+      "add_ip_range": "Aggiungi intervallo IP",
+      "ip_ranges": "Intervalli IP",
+      "ip_range_start": "Inizio intervallo IP",
+      "ip_range_end": "Fine intervallo IP"
     },
     "storage": {
       "vendor": "Produttore",

From efde72ed52f623ac65bbd33805c7504d64d31725 Mon Sep 17 00:00:00 2001
From: Matteo Di Lorenzi <matteo.dilorenzi@nethesis.it>
Date: Fri, 19 Jun 2026 18:34:11 +0200
Subject: [PATCH 2/2] feat(dhcp): refactor dhcp card interface

---
 src/assets/main.css                           |   2 +-
 .../standalone/dns_dhcp/DhcpCard.vue          | 131 +++++++++++-------
 .../dns_dhcp/EditDhcpInterfaceDrawer.vue      |   9 +-
 .../security/threat_shield/GeoBlockingTab.vue |   2 +-
 src/i18n/en.json                              |   2 +-
 src/i18n/it.json                              |   2 +-
 6 files changed, 89 insertions(+), 59 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index 5eff62d1b..bfc47761a 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -158,7 +158,7 @@
 }
 
 @utility text-tertiary-neutral {
-  @apply text-gray-600 dark:text-gray-300;
+  @apply text-gray-600 dark:text-gray-400;
 }
 
 @utility text-enabled {
diff --git a/src/components/standalone/dns_dhcp/DhcpCard.vue b/src/components/standalone/dns_dhcp/DhcpCard.vue
index 5e286b8c8..6471e74b7 100644
--- a/src/components/standalone/dns_dhcp/DhcpCard.vue
+++ b/src/components/standalone/dns_dhcp/DhcpCard.vue
@@ -13,14 +13,8 @@ import {
 } from '@/lib/standalone/network.ts'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { computed } from 'vue'
-import {
-  faCheck,
-  faCircleCheck,
-  faCircleXmark,
-  faPenToSquare,
-  faXmark
-} from '@fortawesome/free-solid-svg-icons'
-import { NeBadge, NeButton, NeLink, NeTooltip } from '@nethesis/vue-components'
+import { faCircleCheck, faCircleXmark, faPenToSquare } from '@fortawesome/free-solid-svg-icons'
+import { NeButton, NeLink, NeTooltip } from '@nethesis/vue-components'
 import { useI18n } from 'vue-i18n'
 import { useFirewallStore } from '@/stores/standalone/firewall.ts'
 
@@ -80,9 +74,14 @@ const visibleOptions = computed(() => {
             class="h-4 w-4"
           />
         </div>
-        <span class="text-base leading-6 font-medium">
-          {{ interfaceName }}<br />{{ dhcpInterface.device }}
-        </span>
+        <div class="flex flex-col">
+          <span class="text-base leading-6 font-medium text-primary-neutral">
+            {{ interfaceName }}
+          </span>
+          <span class="text-sm text-tertiary-neutral">
+            {{ dhcpInterface.device }}
+          </span>
+        </div>
       </div>
       <div>
         <NeButton kind="tertiary" size="sm" @click="$emit('edit', dhcpInterface)">
@@ -93,10 +92,15 @@ const visibleOptions = computed(() => {
         </NeButton>
       </div>
     </div>
-    <div class="space-y-2 text-tertiary-neutral">
-      <p class="flex items-center gap-3">
-        <span>{{ t('standalone.dns_dhcp.mac_binding') }}:</span>
-        <span class="space-x-1">
+
+    <!-- MAC binding section -->
+    <div class="space-y-2">
+      <p class="text-sm font-medium text-primary-neutral">
+        {{ t('standalone.dns_dhcp.mac_binding') }}
+      </p>
+      <div class="flex items-center justify-between text-sm text-tertiary-neutral">
+        <span>{{ t('common.status') }}</span>
+        <span class="flex items-center gap-1.5">
           <template v-if="dhcpInterface.ns_binding != undefined && dhcpInterface.ns_binding == 0">
             <FontAwesomeIcon :icon="faCircleXmark" class="text-offline" />
             <span>{{ t('common.disabled') }}</span>
@@ -114,44 +118,61 @@ const visibleOptions = computed(() => {
             </span>
           </template>
         </span>
-      </p>
-      <hr />
+      </div>
     </div>
-    <div class="space-y-1 text-sm">
-      <p class="flex items-center">
-        {{ t('standalone.dns_dhcp.dhcp') }}
-        <NeBadge
-          v-if="dhcpInterface.active"
-          :icon="faCheck"
-          :text="t('common.enabled')"
-          class="ml-auto"
-          kind="success"
-          size="xs"
-        />
-        <NeBadge
-          v-else
-          :icon="faXmark"
-          :text="t('common.disabled')"
-          class="ml-auto"
-          kind="secondary"
-          size="xs"
-        />
-      </p>
-      <div v-if="dhcpInterface.active" class="space-y-1 font-normal">
-        <div v-if="allRanges.length > 0" class="flex gap-2">
-          <span class="shrink-0">{{ t('standalone.dns_dhcp.ip_range') }}:</span>
-          <div class="flex flex-col gap-0.5">
+
+    <!-- DHCP section -->
+    <div class="mt-6 space-y-2">
+      <p class="text-sm font-medium text-primary-neutral">{{ t('standalone.dns_dhcp.dhcp') }}</p>
+
+      <!-- status -->
+      <div class="flex items-center justify-between text-sm text-tertiary-neutral">
+        <span>{{ t('common.status') }}</span>
+        <span class="flex items-center gap-1.5">
+          <FontAwesomeIcon
+            :icon="dhcpInterface.active ? faCircleCheck : faCircleXmark"
+            :class="dhcpInterface.active ? 'text-online' : 'text-offline'"
+          />
+          <span>{{ dhcpInterface.active ? t('common.enabled') : t('common.disabled') }}</span>
+        </span>
+      </div>
+
+      <template v-if="dhcpInterface.active">
+        <hr />
+        <!-- IP ranges -->
+        <div
+          v-if="allRanges.length > 0"
+          class="flex justify-between gap-4 text-sm text-tertiary-neutral"
+        >
+          <span class="shrink-0">
+            {{ t('standalone.dns_dhcp.ip_range', allRanges.length) }}
+          </span>
+          <div class="flex flex-col items-end gap-0.5">
             <span v-for="(range, index) in allRanges" :key="index">{{ range }}</span>
           </div>
         </div>
-        <p v-if="leaseTime != undefined">
-          {{ t('standalone.dns_dhcp.lease_time') }}: {{ leaseTime }}
-        </p>
+        <hr />
+        <!-- lease time -->
+        <div
+          v-if="leaseTime != undefined"
+          class="flex items-center justify-between text-sm text-tertiary-neutral"
+        >
+          <span>
+            {{ t('standalone.dns_dhcp.lease_time') }}
+          </span>
+          <span>{{ leaseTime }}</span>
+        </div>
+
+        <!-- DHCP options -->
         <template v-if="visibleOptions.length > 3">
-          <p v-for="dhcpOption in visibleOptions.slice(0, 2)" :key="dhcpOption.key">
-            {{ dhcpOption.key }}: {{ dhcpOption.value }}
-          </p>
-          <p v-if="visibleOptions.length > 2">
+          <template v-for="dhcpOption in visibleOptions.slice(0, 2)" :key="dhcpOption.key">
+            <hr />
+            <div class="flex items-center justify-between text-sm text-tertiary-neutral">
+              <span>{{ dhcpOption.key }}</span>
+              <span>{{ dhcpOption.value }}</span>
+            </div>
+          </template>
+          <div v-if="visibleOptions.length > 2" class="flex justify-end">
             <NeTooltip>
               <template #trigger>
                 <NeLink>
@@ -164,14 +185,18 @@ const visibleOptions = computed(() => {
                 </p>
               </template>
             </NeTooltip>
-          </p>
+          </div>
         </template>
         <template v-else>
-          <p v-for="dhcpOption in visibleOptions" :key="dhcpOption.key">
-            {{ dhcpOption.key }}: {{ dhcpOption.value }}
-          </p>
+          <template v-for="dhcpOption in visibleOptions" :key="dhcpOption.key">
+            <hr />
+            <div class="flex items-center justify-between text-sm text-tertiary-neutral">
+              <span>{{ dhcpOption.key }}</span>
+              <span>{{ dhcpOption.value }}</span>
+            </div>
+          </template>
         </template>
-      </div>
+      </template>
     </div>
   </div>
 </template>
diff --git a/src/components/standalone/dns_dhcp/EditDhcpInterfaceDrawer.vue b/src/components/standalone/dns_dhcp/EditDhcpInterfaceDrawer.vue
index aed93ac24..ce373d036 100644
--- a/src/components/standalone/dns_dhcp/EditDhcpInterfaceDrawer.vue
+++ b/src/components/standalone/dns_dhcp/EditDhcpInterfaceDrawer.vue
@@ -30,7 +30,12 @@ import { useI18n } from 'vue-i18n'
 import { ubusCall, ValidationError } from '@/lib/standalone/ubus'
 import { ipv4ToInt } from '@/lib/ipUtils'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faChevronDown, faChevronUp, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons'
+import {
+  faChevronDown,
+  faChevronUp,
+  faCirclePlus,
+  faTrash
+} from '@fortawesome/free-solid-svg-icons'
 
 const props = defineProps<{
   isShown: boolean
@@ -451,7 +456,7 @@ watch(
           </div>
           <NeButton kind="tertiary" @click="addIpRange()">
             <template #prefix>
-              <FontAwesomeIcon :icon="faPlus" />
+              <FontAwesomeIcon :icon="faCirclePlus" />
             </template>
             {{ t('standalone.dns_dhcp.add_ip_range') }}
           </NeButton>
diff --git a/src/components/standalone/security/threat_shield/GeoBlockingTab.vue b/src/components/standalone/security/threat_shield/GeoBlockingTab.vue
index 3b4ccc764..77d7aedfd 100644
--- a/src/components/standalone/security/threat_shield/GeoBlockingTab.vue
+++ b/src/components/standalone/security/threat_shield/GeoBlockingTab.vue
@@ -456,7 +456,7 @@ function saveGeoblockingConfiguration() {
                       >
                         {{ t(region.nameKey) }}
                       </span>
-                      <span class="truncate text-tertiary-neutral dark:text-gray-400">
+                      <span class="truncate text-tertiary-neutral">
                         {{
                           t('standalone.threat_shield.countries_count', {
                             count: region.countries.length
diff --git a/src/i18n/en.json b/src/i18n/en.json
index cdb8196e9..0e820d5fc 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1317,7 +1317,7 @@
       "mac_binding_tooltip": "Filters traffic based on IP-MAC bindings defined in the static lease configuration.",
       "soft": "Soft",
       "strict": "Strict",
-      "ip_range": "IP range",
+      "ip_range": "IP range | IP ranges",
       "plus_n_others": "+{n} other | +{n} others",
       "soft_binding": "Soft binding",
       "soft_binding_description": "Allows hosts without a reservation, blocks mismatched IP/MAC",
diff --git a/src/i18n/it.json b/src/i18n/it.json
index 9912a0a4e..5b2af5833 100644
--- a/src/i18n/it.json
+++ b/src/i18n/it.json
@@ -1251,7 +1251,7 @@
       "strict_binding_description": "Solo gli host con una reservation sono permessi, gli altri sono bloccati",
       "dhcp": "DHCP",
       "strict": "Strict",
-      "ip_range": "Intervallo IP",
+      "ip_range": "Intervallo IP | Intervalli IP",
       "soft": "Soft",
       "soft_binding_description": "Consente host senza reservation, blocca gli IP/MAC non corrispondenti",
       "custom": "Personallizzato",