diff --git a/public/i18n/en/translation.json b/public/i18n/en/translation.json
index 057f388bb..b54bde146 100644
--- a/public/i18n/en/translation.json
+++ b/public/i18n/en/translation.json
@@ -383,7 +383,9 @@
       "create_new_rule": "Create new rule",
       "rule_name": "Rule name",
       "assigned_policy": "Assigned policy",
+      "select_policy": "Select policy",
       "source_address": "Source Address",
+      "source_port": "Source Port",
       "destination_address": "Destination Address",
       "destination_port": "Destination Port",
       "protocol": "Protocol",
@@ -392,6 +394,7 @@
       "rules": "Rules",
       "rules_description": "Routing policies are assigned to hosts via rules. To use a different policy than the default, create a rule and place it above the default rule.",
       "no_rule_found": "No rule found",
+      "create_policy_before": "Please create a policy before continuing",
       "create_rule": "Create rule",
       "label_input_label": "Label",
       "behave_picker": {
@@ -424,11 +427,15 @@
       "interface_recovery_title": "WANs tests",
       "interface_recovery_description": "Number of tests needed to enable or disable the single WAN interface.",
       "delete_rule_modal": {
+        "title": "Are you sure you want to delete '{name}' rule?",
         "button": "@:common.delete"
       },
       "delete_policy_modal": {
+        "title": "Are you sure you want to delete '{name}' policy?",
         "button": "@:common.delete"
-      }
+      },
+      "any": "any",
+      "all": "all"
     },
     "users_and_objects": {
       "title": "Users & objects"
diff --git a/public/i18n/it/translation.json b/public/i18n/it/translation.json
index abe51c58d..ef629d9f2 100644
--- a/public/i18n/it/translation.json
+++ b/public/i18n/it/translation.json
@@ -55,7 +55,9 @@
     "cannot_retrieve_service_status": "Impossibile recuperare lo stato del servizio",
     "cannot_retrieve_wan_traffic": "Impossibile recuperare il traffico WAN",
     "cannot_retrieve_wan_list": "Impossibile recuperare l'elenco delle WAN",
-    "cannot_retrieve_traffic_summary": "Impossibile recuperare il riepilogo del traffico"
+    "cannot_retrieve_traffic_summary": "Impossibile recuperare il riepilogo del traffico",
+    "cancel_registration_error": "Impossibile annullare la registrazione",
+    "register_unit_error": "Impossibile registrare l'unità"
   },
   "login": {
     "sign_in": "Accedi",
@@ -196,7 +198,27 @@
       "openvpn_rw": "OpenVPN RW"
     },
     "subscription": {
-      "title": "Sottoscrizione"
+      "title": "Sottoscrizione",
+      "expiration": "Scadenza",
+      "remote_support": "Supporto remoto",
+      "register": "Registra",
+      "end_session": "Termina sessione",
+      "invalid_secret_or_server_not_found": "Token non valido o server non trovato",
+      "authentication_token_placeholder": "Incolla il token qui",
+      "no_expiration": "Nessuna scadenza",
+      "remote_support_description": "Disponibile solo per piani di sottoscrizione specifici.",
+      "session_id": "ID sessione",
+      "unit_subscription": "Registrazione unità",
+      "authentication_token": "Token di autenticazione",
+      "status": "Stato",
+      "active": "Attivo",
+      "unit_subscription_description": "Incolla qui il token di autenticazione per abilitare la registrazione",
+      "plan": "Piano",
+      "copy_id": "Copia ID",
+      "cancel_registration": "Annulla registrazione",
+      "inactive": "Inattivo",
+      "system_id": "ID sistema",
+      "start_session": "Avvia sessione"
     },
     "system_settings": {
       "title": "Impostazioni di sistema",
diff --git a/src/components/standalone/multi-wan/MultiWanManager.vue b/src/components/standalone/multi-wan/MultiWanManager.vue
index 77bc84b87..7076f4118 100644
--- a/src/components/standalone/multi-wan/MultiWanManager.vue
+++ b/src/components/standalone/multi-wan/MultiWanManager.vue
@@ -5,126 +5,137 @@
 
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
-import { reactive, ref } from 'vue'
-import type { Policy, Rule } from '@/composables/useMwanConfig'
-import { useMwanConfig } from '@/composables/useMwanConfig'
+import { onMounted, onUnmounted, ref } from 'vue'
 import {
   getAxiosErrorMessage,
+  NeBadge,
   NeButton,
-  NeInlineNotification,
-  NeModal,
-  NeSideDrawer,
-  NeSkeleton
+  NeDropdown,
+  NeInlineNotification
 } from '@nethserver/vue-tailwind-lib'
-import HorizontalCard from '@/components/standalone/HorizontalCard.vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faCirclePlus } from '@fortawesome/free-solid-svg-icons'
-import RuleManager from '@/components/standalone/multi-wan/RuleManager.vue'
-import PolicyCreator from '@/components/standalone/multi-wan/PolicyCreator.vue'
 import { useUciPendingChangesStore } from '@/stores/standalone/uciPendingChanges'
+import type { Member, Policy, Rule } from '@/composables/useMwan'
+import { useMwan } from '@/composables/useMwan'
+import NeTable from '@/components/standalone/NeTable.vue'
+import HorizontalCard from '@/components/standalone/HorizontalCard.vue'
+import PolicyCreator from '@/components/standalone/multi-wan/PolicyCreator.vue'
+import PolicyDeleter from '@/components/standalone/multi-wan/PolicyDeleter.vue'
+import PolicyEditor from '@/components/standalone/multi-wan/PolicyEditor.vue'
+import RuleManager from '@/components/standalone/multi-wan/RuleManager.vue'
 import RuleCreator from '@/components/standalone/multi-wan/RuleCreator.vue'
+import RuleDeleter from '@/components/standalone/multi-wan/RuleDeleter.vue'
 import RuleEditor from '@/components/standalone/multi-wan/RuleEditor.vue'
-import { ubusCall } from '@/lib/standalone/ubus'
-import type { AxiosError } from 'axios'
-import PolicyView from '@/components/standalone/multi-wan/PolicyView.vue'
-import PolicyEditor from '@/components/standalone/multi-wan/PolicyEditor.vue'
 
 const { t } = useI18n()
 
-const mwanConfig = reactive(useMwanConfig())
+const mwan = ref(useMwan())
+
 const uciPendingChangesStore = useUciPendingChangesStore()
 
 const createPolicy = ref(false)
-const deletePolicy = ref<Policy>()
-const deletingPolicy = ref(false)
-const errorDeletingPolicy = ref<Error>()
-const editPolicy = ref<Policy>()
+const toDeletePolicy = ref<Policy>()
+const toEditPolicy = ref<Policy>()
 
 const createRule = ref(false)
-const editRule = ref<Rule>()
-const deleteRule = ref<Rule>()
-const deletingRule = ref(false)
-const errorDeletingRule = ref<Error>()
+const toDeleteRule = ref<Rule>()
+const toEditRule = ref<Rule>()
 
-/**
- * Due to the component nature of the RuleManager, there's no way to notify the component of a change unless refactoring
- * the component. This variable is keyed to RuleManager so, when it gets updated, triggers a redraw of the component.
- */
-const ruleTimestamp = ref(Date.now())
+let intervalId: number
 
-/**
- * Handler for policyCreated event.
- */
-function policyCreatedHandler() {
+onMounted(() => {
+  intervalId = setInterval(() => {
+    mwan.value.fetch()
+  }, 5000)
+})
+
+onUnmounted(() => {
+  clearInterval(intervalId)
+})
+
+function policyCreated() {
   createPolicy.value = false
   reloadConfig()
 }
 
-/**
- * Handler for policy edited with success event.
- */
-function policyEditedHandler() {
-  editPolicy.value = undefined
+function policyDeleted() {
+  toDeletePolicy.value = undefined
+  reloadConfig()
+}
+
+function policyEdited() {
+  toEditPolicy.value = undefined
   reloadConfig()
 }
 
-/**
- * Handler for the ruleCreated event.
- */
-function ruleCreatedHandler() {
+function ruleCreated() {
   createRule.value = false
   reloadConfig()
 }
 
-/**
- * Rule Created Handler
- */
-function ruleEditedHandler() {
-  editRule.value = undefined
+function ruleDeleted() {
+  toDeleteRule.value = undefined
+  reloadConfig()
+}
+
+function ruleEdited() {
+  toEditRule.value = undefined
   reloadConfig()
 }
 
 function reloadConfig() {
-  mwanConfig.fetch()
-  ruleTimestamp.value = Date.now()
+  mwan.value.fetch()
   uciPendingChangesStore.getChanges()
 }
 
-function deleteRuleHandler() {
-  deletingRule.value = true
-  ubusCall('uci', 'delete', {
-    config: 'mwan3',
-    section: deleteRule.value?.name
-  })
-    .then(() => {
-      deleteRule.value = undefined
-      reloadConfig()
-    })
-    .catch((error: AxiosError) => (errorDeletingRule.value = error))
-    .finally(() => (deletingRule.value = false))
+function badgeIcon(member: Member) {
+  switch (member.status) {
+    case 'online':
+      return ['fas', 'circle-check']
+    case 'offline':
+      return ['fas', 'circle-xmark']
+    case 'disconnecting':
+    case 'connecting':
+      return ['fas', 'warning']
+    case 'disabled':
+      return ['fas', 'circle-stop']
+    default:
+      return ['fas', 'clock']
+  }
 }
 
-function deletePolicyHandler() {
-  deletingPolicy.value = true
-  ubusCall('uci', 'delete', {
-    config: 'mwan3',
-    section: deletePolicy.value?.name
-  })
-    .then(() => {
-      deletePolicy.value = undefined
-      reloadConfig()
-    })
-    .catch((error: AxiosError) => (errorDeletingPolicy.value = error))
-    .finally(() => (deletingPolicy.value = false))
+function badgeType(member: Member) {
+  switch (member.status) {
+    case 'online':
+      return 'success'
+    case 'offline':
+      return 'error'
+    case 'disconnecting':
+    case 'connecting':
+      return 'warning'
+    default:
+      return undefined
+  }
+}
+
+function policyIcon(policy: Policy) {
+  switch (policy.type) {
+    case 'balance':
+      return ['fas', 'scale-balanced']
+    case 'backup':
+      return ['fas', 'layer-group']
+    default:
+      return ['fas', 'user-gear']
+  }
 }
 </script>
 
 <template>
-  <NeSkeleton v-if="mwanConfig.loading" :lines="10" />
-  <div v-else class="space-y-16">
+  <div class="space-y-16">
     <div class="space-y-8">
-      <div class="flex">
-        <div>
+      <div class="flex flex-wrap gap-y-4">
+        <div class="mr-auto">
           <h6 class="mb-2 text-xl font-medium text-gray-900 dark:text-gray-50">
             {{ t('standalone.multi_wan.policy') }}
           </h6>
@@ -133,9 +144,9 @@ function deletePolicyHandler() {
           </p>
         </div>
         <NeButton
-          v-if="mwanConfig.policies.length >= 1"
-          :kind="'secondary'"
-          class="ml-auto self-start"
+          v-if="mwan.policies.length > 0"
+          class="self-start"
+          kind="secondary"
           @click="createPolicy = true"
         >
           <template #prefix>
@@ -144,19 +155,16 @@ function deletePolicyHandler() {
           {{ t('standalone.multi_wan.create_policy') }}
         </NeButton>
       </div>
-      <div class="space-y-6">
-        <NeSkeleton v-if="mwanConfig.loading" :lines="3" :size="'sm'" />
-        <template v-else-if="mwanConfig.policies.length > 0">
-          <PolicyView
-            v-for="(policy, index) in mwanConfig.policies"
-            :key="index"
-            :belongs-to-rule="mwanConfig.rules.some((rule) => rule.policy.name == policy.name)"
-            :policy="policy"
-            @delete="(toDeletePolicy) => (deletePolicy = toDeletePolicy)"
-            @edit="(toEditPolicy) => (editPolicy = toEditPolicy)"
-          />
-        </template>
-        <HorizontalCard v-else class="space-y-4 text-center">
+      <NeInlineNotification
+        v-if="mwan.error"
+        :title="t(getAxiosErrorMessage(mwan.error))"
+        kind="error"
+      />
+      <template v-else>
+        <HorizontalCard
+          v-if="!mwan.loading && mwan.policies.length < 1"
+          class="space-y-4 text-center"
+        >
           <p>{{ t('standalone.multi_wan.no_policy_found') }}</p>
           <NeButton :kind="'primary'" @click="createPolicy = true">
             <template #prefix>
@@ -165,12 +173,98 @@ function deletePolicyHandler() {
             {{ t('standalone.multi_wan.create_default_policy') }}
           </NeButton>
         </HorizontalCard>
-      </div>
+        <NeTable
+          v-else
+          :data="mwan.policies"
+          :headers="[
+            {
+              key: 'label',
+              label: 'Policy Name'
+            },
+            {
+              key: 'type'
+            },
+            {
+              key: 'gateways',
+              label: 'Gateways'
+            },
+            {
+              key: 'actions'
+            }
+          ]"
+          :loading="mwan.loading"
+          :skeleton-lines="3"
+          :style="'card'"
+        >
+          <template #label="{ item }: { item: Policy }">
+            <div class="flex items-center gap-4 border-r pr-8 dark:border-gray-600">
+              <div
+                v-if="item.name == 'ns_default'"
+                class="flex h-8 w-8 items-center justify-center rounded-full dark:bg-gray-50 dark:text-gray-600"
+              >
+                <FontAwesomeIcon :icon="['fas', 'lock']" />
+              </div>
+              <p>{{ item.label ?? item.name }}</p>
+            </div>
+          </template>
+          <template #type="{ item }: { item: Policy }">
+            <div class="flex items-center">
+              <FontAwesomeIcon :icon="policyIcon(item)" class="mr-2" />
+              <p>{{ t(`standalone.multi_wan.modes.${item.type}`) }}</p>
+            </div>
+          </template>
+          <template #gateways="{ item }: { item: Policy }">
+            <div class="space-y-4">
+              <div
+                v-for="([metric, members], metricIndex) in Object.entries(item.members)"
+                :key="metric"
+                class="flex flex-wrap items-center gap-4"
+              >
+                <div v-if="Object.entries(item.members).length > 1">
+                  {{ t('standalone.multi_wan.priority', metricIndex + 1) }}
+                </div>
+                <div class="flex flex-wrap gap-4">
+                  <template v-for="(member, index) in members" :key="index">
+                    <NeBadge
+                      :icon="badgeIcon(member)"
+                      :kind="badgeType(member)"
+                      :label="members.length > 1 ? `weight: ${member.weight}` : ''"
+                      :text="member.interface"
+                    />
+                  </template>
+                </div>
+              </div>
+            </div>
+          </template>
+          <template #actions="{ item }: { item: Policy }">
+            <div class="flex items-center justify-end">
+              <NeButton :kind="'tertiary'" @click="toEditPolicy = item">
+                <template #prefix>
+                  <FontAwesomeIcon :icon="['fas', 'edit']" />
+                </template>
+                {{ t('common.edit') }}
+              </NeButton>
+              <NeDropdown
+                :items="[
+                  {
+                    id: 'delete',
+                    label: t('common.delete'),
+                    disabled: item.name == 'ns_default',
+                    action: () => (toDeletePolicy = item),
+                    danger: true
+                  }
+                ]"
+                align-to-right
+              />
+            </div>
+          </template>
+        </NeTable>
+      </template>
     </div>
-    <div v-if="mwanConfig.policies.length > 0">
+    <div>
       <div class="space-y-6">
-        <div class="flex">
-          <div>
+        <div class="flex flex-wrap gap-y-4">
+          <div class="mr-auto">
             <h6 class="mb-2 text-xl font-medium text-gray-900 dark:text-gray-50">
               {{ t('standalone.multi_wan.rules') }}
             </h6>
@@ -178,7 +272,12 @@ function deletePolicyHandler() {
               {{ t('standalone.multi_wan.rules_description') }}
             </p>
           </div>
-          <NeButton :kind="'secondary'" class="ml-auto self-start" @click="createRule = true">
+          <NeButton
+            v-if="mwan.policies.length > 0"
+            :kind="'secondary'"
+            class="self-start"
+            @click="createRule = true"
+          >
             <template #prefix>
               <FontAwesomeIcon :icon="faCirclePlus" />
             </template>
@@ -187,82 +286,43 @@ function deletePolicyHandler() {
         </div>
         <div>
           <RuleManager
-            :key="ruleTimestamp"
-            @delete="(toDeleteRule) => (deleteRule = toDeleteRule)"
-            @edit="(toEditRule) => (editRule = toEditRule)"
+            :loading="mwan.loading"
+            :policies-exist="mwan.policies.length > 0"
+            :rules="mwan.rules"
+            @delete="(rule) => (toDeleteRule = rule)"
+            @edit="(rule) => (toEditRule = rule)"
           />
         </div>
       </div>
     </div>
   </div>
   <PolicyCreator
-    :create-default="mwanConfig.policies.length < 1"
+    :create-default="mwan.policies.length < 1"
     :is-shown="createPolicy"
     @close="createPolicy = false"
-    @policy-created="policyCreatedHandler()"
+    @success="policyCreated()"
   />
-  <NeSideDrawer
-    :is-shown="editPolicy != undefined"
-    :title="t('standalone.multi_wan.edit_policy')"
-    @close="editPolicy = undefined"
-  >
-    <PolicyEditor
-      v-if="editPolicy"
-      :policy="editPolicy"
-      @cancel="editPolicy = undefined"
-      @success="policyEditedHandler()"
-    />
-  </NeSideDrawer>
-  <NeSideDrawer
+  <PolicyDeleter
+    :policy="toDeletePolicy"
+    @close="toDeletePolicy = undefined"
+    @success="policyDeleted()"
+  />
+  <PolicyEditor
+    :policy="toEditPolicy"
+    @close="toEditPolicy = undefined"
+    @success="policyEdited()"
+  />
+  <RuleCreator
     :is-shown="createRule"
-    :title="t('standalone.multi_wan.create_new_rule')"
-    @close="createRule = false"
-  >
-    <RuleCreator @cancel="createRule = false" @success="ruleCreatedHandler()" />
-  </NeSideDrawer>
-  <NeSideDrawer
-    :is-shown="editRule != undefined"
-    :title="t('standalone.multi_wan.edit_rule', { name: editRule?.name })"
-    @close="editRule = undefined"
-  >
-    <template v-if="editRule != undefined">
-      <RuleEditor :rule="editRule" @cancel="editRule = undefined" @success="ruleEditedHandler()" />
-    </template>
-  </NeSideDrawer>
-  <!-- TODO: ask for labels for rule delete modal -->
-  <NeModal
-    :primary-button-disabled="deletingRule"
-    :primary-button-loading="deletingRule"
-    :primary-label="t('standalone.multi_wan.delete_rule_modal.button')"
-    :title="t('standalone.multi_wan.delete_rule_modal.title', { name: deleteRule?.name ?? '' })"
-    :visible="deleteRule != undefined"
-    kind="warning"
-    primary-button-kind="danger"
-    @close="deleteRule = undefined"
-    @primary-click="deleteRuleHandler()"
-  >
-    <NeInlineNotification
-      v-if="errorDeletingRule"
-      :title="t(getAxiosErrorMessage(errorDeletingRule.message))"
-      kind="error"
-    />
-  </NeModal>
-  <!-- TODO: ask for labels for policy delete modal -->
-  <NeModal
-    :primary-button-disabled="deletingPolicy"
-    :primary-button-loading="deletingPolicy"
-    :primary-label="t('standalone.multi_wan.delete_policy_modal.button')"
-    :title="t('standalone.multi_wan.delete_policy_modal.title', { name: deletePolicy?.name ?? '' })"
-    :visible="deletePolicy != undefined"
-    kind="warning"
-    primary-button-kind="danger"
-    @close="deletePolicy = undefined"
-    @primary-click="deletePolicyHandler()"
-  >
-    <NeInlineNotification
-      v-if="errorDeletingPolicy"
-      :title="t(getAxiosErrorMessage(errorDeletingPolicy.message))"
-      kind="error"
-    />
-  </NeModal>
+    :policies="mwan.policies"
+    @cancel="createRule = false"
+    @success="ruleCreated()"
+  />
+  <RuleDeleter :rule="toDeleteRule" @cancel="toDeleteRule = undefined" @success="ruleDeleted()" />
+  <RuleEditor
+    :policies="mwan.policies"
+    :rule="toEditRule"
+    @close="toEditRule = undefined"
+    @success="ruleEdited()"
+  />
 </template>
diff --git a/src/components/standalone/multi-wan/PolicyCreator.vue b/src/components/standalone/multi-wan/PolicyCreator.vue
index 76e2ce62a..4a590367f 100644
--- a/src/components/standalone/multi-wan/PolicyCreator.vue
+++ b/src/components/standalone/multi-wan/PolicyCreator.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { NeComboboxOption } from '@nethserver/vue-tailwind-lib'
 import {
-  getAxiosErrorMessage,
   NeButton,
   NeCombobox,
   NeFormItemLabel,
@@ -12,68 +11,18 @@ import {
   NeTextInput
 } from '@nethserver/vue-tailwind-lib'
 import { useI18n } from 'vue-i18n'
-import { computed, onMounted, reactive, ref, watch } from 'vue'
-import { ubusCall } from '@/lib/standalone/ubus'
-import type { AxiosError, AxiosResponse } from 'axios'
+import { computed, onMounted, reactive, ref, toRef, watch } from 'vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faPlus } from '@fortawesome/free-solid-svg-icons'
-import { useMwanConfig } from '@/composables/useMwanConfig'
-import { MessageBag, validateRequired, validateUciName } from '@/lib/validation'
-import { useMwanDefaults } from '@/composables/useMwanDefaults'
+import { MessageBag, validateRequired } from '@/lib/validation'
+import { useFirewallStore, Zone } from '@/stores/standalone/useFirewallStore'
+import { ubusCall, ValidationError } from '@/lib/standalone/ubus'
+import type { AxiosError } from 'axios'
+import { Gateway, usePolicyForm } from '@/composables/usePolicyForm'
 
 const { t } = useI18n()
 
-/**
- * Interface describing the get firewall response
- */
-interface FirewallResponse {
-  values: {
-    [name: string]: {
-      name: string
-      network: Array<string>
-    }
-  }
-}
-
-/**
- * Gateway definition.
- */
-class Gateway {
-  id: string
-  weight: string
-
-  constructor(id: string = '', weight: string = '100') {
-    this.id = id
-    this.weight = weight
-  }
-}
-
-/**
- * Reactive state interface.
- */
-interface Form {
-  label: string
-  selection: string
-  priorities: Array<Array<Gateway>>
-}
-
-/**
- * RadioSelection options
- */
-const policyOptions = [
-  {
-    id: 'balance',
-    label: t('standalone.multi_wan.behave_picker.balance')
-  },
-  {
-    id: 'backup',
-    label: t('standalone.multi_wan.behave_picker.backup')
-  },
-  {
-    id: 'custom',
-    label: t('standalone.multi_wan.behave_picker.custom')
-  }
-]
+const firewall = useFirewallStore()
 
 const props = defineProps({
   isShown: {
@@ -86,55 +35,26 @@ const props = defineProps({
   }
 })
 
-const mwanConfig = reactive(useMwanConfig())
-const mwanDefaults = reactive(useMwanDefaults())
+const policyForm = reactive(usePolicyForm(toRef(() => undefined)))
 
-const form = ref<Form>({
-  label: '',
-  selection: policyOptions[0].id,
-  priorities: [[new Gateway(), new Gateway()]]
-})
-const gateways = ref<Array<NeComboboxOption>>()
-const error = ref<Error>()
-const loading = ref(false)
 const saving = ref(false)
 const messageBag = ref(new MessageBag())
+const error = ref<Error>()
 
 const labelElement = ref<HTMLInputElement | null>(null)
 
-/**
- * Weather the button should be disabled or not once deletion.
- */
-const isTrashButtonDisabled = computed<boolean>(() => {
-  if (form.value.selection == 'balance') {
-    return form.value.priorities[0].length < 3
-  } else if (form.value.selection == 'backup') {
-    return form.value.priorities.length < 3
-  }
-  return false
-})
-
-/**
- * Map transformation of priorities and gateways between behaviours, allows to keep previous values set.
- */
-watch(
-  () => form.value.selection,
-  () => {
-    if (form.value.selection == 'backup') {
-      form.value.priorities = form.value.priorities
-        .map((priority) => priority.map((gateway) => [gateway]))
-        .flat(1)
-      for (let i = form.value.priorities.length; i < 2; i++) {
-        form.value.priorities.push([new Gateway()])
-      }
-    } else if (form.value.selection == 'balance') {
-      form.value.priorities = [form.value.priorities.flat(1)]
-      for (let i = form.value.priorities[0].length; i < 2; i++) {
-        form.value.priorities[0].push(new Gateway())
+const availableGateways = computed((): Array<NeComboboxOption> => {
+  return firewall.zones
+    .filter((zone: Zone) => zone.configName == 'ns_wan')
+    .map((zone: Zone) => zone.interfaces)
+    .flat()
+    .map((name: string) => {
+      return {
+        id: name,
+        label: name
       }
-    }
-  }
-)
+    })
+})
 
 /**
  * Focus and populate first element on open, delay by 50ms due to DOM creation.
@@ -142,8 +62,9 @@ watch(
 watch(
   () => props.isShown,
   () => {
+    policyForm.cleanForm()
     if (props.createDefault) {
-      form.value.label = 'Default'
+      policyForm.label = 'Default'
     }
     if (props.isShown && !props.createDefault) {
       setTimeout(() => labelElement.value?.focus(), 50)
@@ -151,181 +72,64 @@ watch(
   }
 )
 
-/**
- * Get error from mwanDefaults if any
- */
-watch(
-  () => mwanDefaults.error,
-  () => (error.value = mwanDefaults.error)
-)
-
-/**
- * Get error from mwanConfig if any
- */
-watch(
-  () => mwanConfig.error,
-  () => (error.value = mwanConfig.error)
-)
+const emit = defineEmits(['success', 'close'])
 
-const emit = defineEmits(['policyCreated', 'abortCreation'])
-
-onMounted(() => fetchGateways())
-
-/**
- * Get gateways from the 'wan' firewall zone.
- */
-function fetchGateways() {
-  loading.value = true
-  ubusCall('uci', 'get', { config: 'firewall', type: 'zone' })
-    .then(
-      (response: AxiosResponse<FirewallResponse>) =>
-        (gateways.value = Object.entries(response.data.values)
-          .filter((value) => value[1].name == 'wan')
-          .flatMap((value) => value[1].network)
-          .map((value) => {
-            return {
-              id: value,
-              label: value
-            }
-          }))
-    )
-    .catch((exception: AxiosError) => (error.value = new Error(t(getAxiosErrorMessage(exception)))))
-    .finally(() => (loading.value = false))
-}
-
-/**
- * If there's a priority that is empty, remove it.
- */
-function cleanPriorities() {
-  form.value.priorities = form.value.priorities.filter((priority) => priority.length > 0)
-}
+onMounted(() => {
+  firewall.fetch()
+})
 
 /**
  * Validation form.
  */
 function validate(): boolean {
   messageBag.value = new MessageBag()
-  let errMessage = validateRequired(form.value.label).errMessage
-  if (errMessage) {
-    messageBag.value.set('label', [t(errMessage.valueOf())])
-    labelElement.value?.focus()
-  }
-  errMessage = validateUciName(form.value.label).errMessage
+  let errMessage = validateRequired(policyForm.label).errMessage
   if (errMessage) {
-    messageBag.value.set('label', [t(errMessage.valueOf())])
+    messageBag.value.set('name', [t(errMessage.valueOf())])
     labelElement.value?.focus()
   }
-  // TODO: implement priority/gateway validation
+  policyForm.priorities.flat().forEach((priority, index) => {
+    errMessage = validateRequired(priority.id).errMessage
+    if (errMessage) {
+      messageBag.value.set(`interfaces.${index}.name`, [t(errMessage.valueOf())])
+    }
+  })
   return !(messageBag.value.size > 0)
 }
 
 /**
  * Create every entity needed for the policy to work. Interfaces, Members, Policies and Default Rule (if missing)
  */
-function createPolicy() {
+function create() {
   if (validate()) {
     saving.value = true
-    // group all calls in one big promise
-    let calls: Promise<any>[] = []
-    // interface creation
-    calls.push(
-      // start with organizing the interfaces to create
-      ...form.value.priorities
-        // flatten all priorities, get only the gateways picked
-        .map((priorities) => priorities.map((gateway) => gateway))
-        .flat(1)
-        // gateways must not already exist, this filters them out
-        .filter((gateway) => !mwanConfig.interfaces.some((iface) => iface.name == gateway.id))
-        // map all in multiple calls
-        .map((gateway) =>
-          ubusCall('uci', 'add', {
-            config: 'mwan3',
-            name: gateway.id,
-            type: 'interface',
-            values: {
-              enabled: '1',
-              initial_state: mwanDefaults.data!.values.initial_state,
-              family: mwanDefaults.data!.values.protocol,
-              track_ip: mwanDefaults.data!.values.track_ip,
-              track_method: mwanDefaults.data!.values.tracking_method,
-              reliability: mwanDefaults.data!.values.tracking_reliability,
-              count: mwanDefaults.data!.values.ping_count,
-              size: mwanDefaults.data!.values.ping_size,
-              max_ttl: mwanDefaults.data!.values.ping_max_ttl,
-              timeout: mwanDefaults.data!.values.ping_timeout,
-              interval: mwanDefaults.data!.values.ping_interval,
-              failure_interval: mwanDefaults.data!.values.ping_failure_interval,
-              recovery_interval: mwanDefaults.data!.values.ping_recovery_interval,
-              down: mwanDefaults.data!.values.interface_down_threshold,
-              up: mwanDefaults.data!.values.interface_up_threshold
+    ubusCall('ns.mwan', 'store_policy', {
+      name: policyForm.label,
+      interfaces: policyForm.priorities
+        .map((gateways, index) =>
+          gateways.map((gateway) => {
+            return {
+              name: gateway.id,
+              metric: (index + 1) * 10,
+              weight: gateway.weight
             }
           })
         )
-    )
-    // member creation
-    calls.push(
-      // for each priority we'll have +10 metric applied
-      ...form.value.priorities
-        .map((priority, index) =>
-          // call 'add' to each gateway
-          priority.map((gateway) =>
-            ubusCall('uci', 'add', {
-              config: 'mwan3',
-              name: `${gateway.id}_M${(index + 1) * 10}_W${gateway.weight ?? 100}`,
-              type: 'member',
-              values: {
-                interface: gateway.id,
-                metric: (index + 1) * 10,
-                weight: gateway.weight ?? 100
-              }
-            })
-          )
-        )
-        // flatten array, we have nested promises here
-        .flat(1)
-    )
-    calls.push(
-      // create policy
-      ubusCall('uci', 'add', {
-        config: 'mwan3',
-        name: form.value.label,
-        type: 'policy',
-        values: {
-          // map gateways to members name
-          // TODO: reuse name generation logic from above
-          use_member: form.value.priorities
-            .map((priority, index) =>
-              priority.map(
-                (gateway) => `${gateway.id}_M${(index + 1) * 10}_W${gateway.weight ?? 100}`
-              )
-            )
-            .flat(1)
-        }
-      })
-    )
-    // if this is the default policy, create a default rule too
-    if (props.createDefault) {
-      calls.push(
-        ubusCall('uci', 'add', {
-          config: 'mwan3',
-          name: 'DefaultRule',
-          type: 'rule',
-          values: {
-            proto: 'all',
-            src_ip: '0.0.0.0/0',
-            dest_ip: '0.0.0.0/0',
-            sticky: '0',
-            use_policy: form.value.label
-          }
-        })
-      )
-    }
-    // If all calls are successful, go forth and reload the UI
-    // TODO: implement error catching, with rollback.
-    Promise.all(calls).then(() => {
-      saving.value = false
-      emit('policyCreated')
+        .flat()
     })
+      .then(() => {
+        emit('success')
+        policyForm.cleanForm()
+      })
+      .catch((reason: ValidationError) => {
+        messageBag.value = reason.errorBag
+      })
+      .catch((reason: AxiosError) => {
+        error.value = reason
+      })
+      .finally(() => {
+        saving.value = false
+      })
   }
 }
 </script>
@@ -333,58 +137,70 @@ function createPolicy() {
 <template>
   <NeSideDrawer
     :is-shown="isShown"
-    :title="t('standalone.multi_wan.create_policy', { name: form.label })"
+    :title="t('standalone.multi_wan.create_policy', { name: policyForm.label })"
+    @close="$emit('close')"
   >
-    <NeSkeleton v-if="loading" :lines="10" />
-    <NeInlineNotification v-else-if="error" :kind="'error'" :title="error.message" />
+    <NeInlineNotification v-if="firewall.error" :kind="'error'" :title="firewall.error.message" />
     <div v-else class="space-y-8">
       <NeTextInput
         ref="labelElement"
-        v-model="form.label"
+        v-model="policyForm.label"
         :disabled="createDefault"
-        :invalid-message="messageBag.get('label')?.[0]"
+        :invalid-message="messageBag.getFirstFor('name')"
         :label="t('standalone.multi_wan.label_input_label')"
       />
       <NeRadioSelection
-        v-model="form.selection"
+        v-model="policyForm.selection"
         :label="t('standalone.multi_wan.behave_picker.choose_behaviour')"
-        :options="policyOptions"
+        :options="policyForm.policyOptionSelection"
         :screen-reader-help-text="t('standalone.multi_wan.behave_picker.choose_behaviour_sr')"
       />
-      <div v-for="(priority, index) in form.priorities" :key="index" class="space-y-4">
-        <NeFormItemLabel v-if="form.priorities.length > 1">
-          {{ t('standalone.multi_wan.priority', index + 1) }}
-        </NeFormItemLabel>
-        <template v-for="(gateway, index) in priority" :key="index">
-          <div class="flex gap-x-4">
-            <NeCombobox
-              v-model="gateway.id"
-              :options="gateways"
-              :placeholder="t('standalone.multi_wan.choose_gateway')"
-              class="grow"
-            />
-            <NeTextInput
-              v-if="form.selection != 'backup'"
-              v-model.number="gateway.weight"
-              :placeholder="t('standalone.multi_wan.weight')"
-            />
-            <NeButton
-              :disabled="isTrashButtonDisabled"
-              @click=";[priority.splice(index, 1), cleanPriorities()]"
-            >
-              <FontAwesomeIcon :icon="['fas', 'trash']" />
-            </NeButton>
-          </div>
-        </template>
-        <NeButton
-          v-if="form.selection != 'backup'"
-          :kind="'tertiary'"
-          @click="priority.push(new Gateway())"
+      <NeSkeleton v-if="firewall.loading" :lines="10" />
+      <template v-else>
+        <div
+          v-for="(priority, priorityIndex) in policyForm.priorities"
+          :key="priorityIndex"
+          class="space-y-4"
         >
-          {{ t('standalone.multi_wan.add_gateway') }}
-        </NeButton>
-      </div>
-      <NeButton v-if="form.selection != 'balance'" @click="form.priorities.push([new Gateway()])">
+          <NeFormItemLabel v-if="policyForm.priorities.length > 1">
+            {{ t('standalone.multi_wan.priority', priorityIndex + 1) }}
+          </NeFormItemLabel>
+          <template v-for="(gateway, index) in priority" :key="index">
+            <div class="flex gap-x-4">
+              <NeCombobox
+                v-model="gateway.id"
+                :invalid-message="messageBag.getFirstFor(`interfaces.${index}.name`)"
+                :options="availableGateways"
+                :placeholder="t('standalone.multi_wan.choose_gateway')"
+                class="grow"
+              />
+              <NeTextInput
+                v-if="policyForm.selection != 'backup'"
+                v-model.number="gateway.weight"
+                :invalid-message="messageBag.getFirstFor(`interfaces.${index}.weight`)"
+                :placeholder="t('standalone.multi_wan.weight')"
+              />
+              <NeButton
+                :disabled="policyForm.isTrashButtonDisabled"
+                @click="policyForm.removePriority(priorityIndex, index)"
+              >
+                <FontAwesomeIcon :icon="['fas', 'trash']" />
+              </NeButton>
+            </div>
+          </template>
+          <NeButton
+            v-if="policyForm.selection != 'backup'"
+            :kind="'tertiary'"
+            @click="priority.push(new Gateway())"
+          >
+            {{ t('standalone.multi_wan.add_gateway') }}
+          </NeButton>
+        </div>
+      </template>
+      <NeButton
+        v-if="policyForm.selection != 'balance'"
+        @click="policyForm.priorities.push([new Gateway()])"
+      >
         <template #prefix>
           <FontAwesomeIcon :icon="faPlus" />
         </template>
@@ -392,10 +208,10 @@ function createPolicy() {
       </NeButton>
       <hr />
       <div class="flex justify-end gap-4">
-        <NeButton :disabled="saving" :kind="'tertiary'" @click="emit('abortCreation')">
+        <NeButton :disabled="saving" :kind="'tertiary'" @click="$emit('close')">
           {{ t('common.cancel') }}
         </NeButton>
-        <NeButton :disabled="saving" :kind="'primary'" :loading="saving" @click="createPolicy()">
+        <NeButton :disabled="saving" :kind="'primary'" :loading="saving" @click="create()">
           {{ t('common.save') }}
         </NeButton>
       </div>
diff --git a/src/components/standalone/multi-wan/PolicyDeleter.vue b/src/components/standalone/multi-wan/PolicyDeleter.vue
new file mode 100644
index 000000000..a520ba2e7
--- /dev/null
+++ b/src/components/standalone/multi-wan/PolicyDeleter.vue
@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import { getAxiosErrorMessage, NeInlineNotification, NeModal } from '@nethserver/vue-tailwind-lib'
+import type { PropType } from 'vue'
+import { ref } from 'vue'
+import type { Policy } from '@/composables/useMwan'
+import { useI18n } from 'vue-i18n'
+import { ubusCall } from '@/lib/standalone/ubus'
+import type { AxiosError } from 'axios'
+
+const { t } = useI18n()
+
+const props = defineProps({
+  policy: {
+    type: Object as PropType<Policy>
+  }
+})
+
+const emit = defineEmits(['close', 'success'])
+
+const loading = ref(false)
+const error = ref<Error>()
+
+function deletePolicy() {
+  loading.value = true
+  ubusCall('ns.mwan', 'delete_policy', {
+    name: props.policy?.name
+  })
+    .then(() => emit('success'))
+    .catch((reason: AxiosError) => (error.value = reason))
+    .finally(() => (loading.value = false))
+}
+
+function handleClose() {
+  if (!loading.value) {
+    emit('close')
+  }
+}
+</script>
+
+<template>
+  <NeModal
+    :primary-button-disabled="loading"
+    :primary-button-loading="loading"
+    :primary-label="t('standalone.multi_wan.delete_policy_modal.button')"
+    :secondary-button-disabled="loading"
+    :title="
+      t('standalone.multi_wan.delete_policy_modal.title', { name: policy?.label ?? policy?.name })
+    "
+    :visible="policy != undefined"
+    kind="warning"
+    primary-button-kind="danger"
+    @close="handleClose()"
+    @primary-click="deletePolicy()"
+  >
+    <NeInlineNotification v-if="error" :title="t(getAxiosErrorMessage(error))" kind="error" />
+  </NeModal>
+</template>
diff --git a/src/components/standalone/multi-wan/PolicyEditor.vue b/src/components/standalone/multi-wan/PolicyEditor.vue
index cb6598f71..57f366653 100644
--- a/src/components/standalone/multi-wan/PolicyEditor.vue
+++ b/src/components/standalone/multi-wan/PolicyEditor.vue
@@ -1,286 +1,173 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue'
-import { computed, onBeforeMount, reactive, ref, watch } from 'vue'
-import type { Member, Policy } from '@/composables/useMwanConfig'
-import { useMwanConfig } from '@/composables/useMwanConfig'
+import { computed, onMounted, reactive, ref, toRef } from 'vue'
+import type { Policy } from '@/composables/useMwan'
 import {
-  getAxiosErrorMessage,
   NeButton,
   NeCombobox,
   NeFormItemLabel,
   NeInlineNotification,
   NeRadioSelection,
+  NeSideDrawer,
   NeSkeleton,
   NeTextInput
 } from '@nethserver/vue-tailwind-lib'
+import type { NeComboboxOption } from '@nethserver/vue-tailwind-lib'
 import { useI18n } from 'vue-i18n'
-import { groupBy } from 'lodash'
-import { faPlus } from '@fortawesome/free-solid-svg-icons'
+import { Gateway, usePolicyForm } from '@/composables/usePolicyForm'
+import { MessageBag } from '@/lib/validation'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { Gateway, PolicyOptions, usePolicyForm } from '@/composables/usePolicyForm'
-import { ubusCall } from '@/lib/standalone/ubus'
-import { useMwanDefaults } from '@/composables/useMwanDefaults'
+import { useFirewallStore, Zone } from '@/stores/standalone/useFirewallStore'
+import { faPlus } from '@fortawesome/free-solid-svg-icons'
+import { ubusCall, ValidationError } from '@/lib/standalone/ubus'
 import type { AxiosError } from 'axios'
 
 const { t } = useI18n()
 
-/**
- * Translates the policyOptions into labels.
- */
-const policyOptionsSelection = [
-  {
-    id: PolicyOptions.BALANCE,
-    label: t('standalone.multi_wan.behave_picker.balance')
-  },
-  {
-    id: PolicyOptions.BACKUP,
-    label: t('standalone.multi_wan.behave_picker.backup')
-  },
-  {
-    id: PolicyOptions.CUSTOM,
-    label: t('standalone.multi_wan.behave_picker.custom')
-  }
-]
-
-const emit = defineEmits(['cancel', 'success'])
+const firewall = useFirewallStore()
 
-const policyForm = reactive(usePolicyForm())
-const mwanConfig = reactive(useMwanConfig())
-const mwanDefaults = reactive(useMwanDefaults())
-
-const { form } = usePolicyForm()
-const saving = ref(false)
-const updateError = ref<Error>()
+onMounted(() => {
+  firewall.fetch()
+})
 
 const props = defineProps({
   policy: {
-    type: Object as PropType<Policy>,
-    required: true
-  }
-})
-
-/**
- * Weather the button should be disabled or not once deletion.
- */
-const isTrashButtonDisabled = computed<boolean>(() => {
-  if (form.value.selection == PolicyOptions.BALANCE) {
-    return form.value.priorities[0].length < 3
-  } else if (form.value.selection == PolicyOptions.BACKUP) {
-    return form.value.priorities.length < 3
+    type: Object as PropType<Policy>
   }
-  return false
 })
 
-/**
- * Map transformation of priorities and gateways between behaviours, allows to keep previous values set.
- */
-watch(
-  () => form.value.selection,
-  () => {
-    if (form.value.selection == PolicyOptions.BACKUP) {
-      form.value.priorities = form.value.priorities
-        .map((priority) => priority.map((gateway) => [gateway]))
-        .flat(1)
-      for (let i = form.value.priorities.length; i < 2; i++) {
-        form.value.priorities.push([new Gateway()])
-      }
-    } else if (form.value.selection == PolicyOptions.BALANCE) {
-      form.value.priorities = [form.value.priorities.flat(1)]
-      for (let i = form.value.priorities[0].length; i < 2; i++) {
-        form.value.priorities[0].push(new Gateway())
-      }
-    }
-  }
-)
+const emit = defineEmits(['close', 'success'])
 
-/**
- * When removing a gateway, check if there's an empty priority, then clean if any.
- * @param priorityIndex
- * @param gatewayIndex
- */
-function removeGateway(priorityIndex: number, gatewayIndex: number) {
-  form.value.priorities[priorityIndex].splice(gatewayIndex, 1)
-  form.value.priorities = form.value.priorities.filter((priority) => priority.length > 0)
-}
+const policyForm = reactive(usePolicyForm(toRef(() => props.policy)))
+const messageBag = ref(new MessageBag())
+const loading = ref(false)
+const error = ref<Error>()
 
-/**
- * Delete the edited policy, then create it again with the edited values.
- */
-function save() {
-  //saving.value = true
-  const promises: Promise<any>[] = []
-  promises.push(
-    ubusCall('uci', 'delete', {
-      config: 'mwan3',
-      section: props.policy?.name
+const availableGateways = computed((): Array<NeComboboxOption> => {
+  return firewall.zones
+    .filter((zone: Zone) => zone.configName == 'ns_wan')
+    .map((zone: Zone) => zone.interfaces)
+    .flat()
+    .map((name: string) => {
+      return {
+        id: name,
+        label: name
+      }
     })
-  )
-  promises.push(
-    ...form.value.priorities
-      .flat()
-      .filter((gateway) => !mwanConfig.interfaces.some((iface) => iface.name == gateway.id))
-      .map((gateway) =>
-        ubusCall('uci', 'add', {
-          config: 'mwan3',
-          name: gateway.id,
-          type: 'interface',
-          values: {
-            enabled: '1',
-            initial_state: mwanDefaults.data!.values.initial_state,
-            family: mwanDefaults.data!.values.protocol,
-            track_ip: mwanDefaults.data!.values.track_ip,
-            track_method: mwanDefaults.data!.values.tracking_method,
-            reliability: mwanDefaults.data!.values.tracking_reliability,
-            count: mwanDefaults.data!.values.ping_count,
-            size: mwanDefaults.data!.values.ping_size,
-            max_ttl: mwanDefaults.data!.values.ping_max_ttl,
-            timeout: mwanDefaults.data!.values.ping_timeout,
-            interval: mwanDefaults.data!.values.ping_interval,
-            failure_interval: mwanDefaults.data!.values.ping_failure_interval,
-            recovery_interval: mwanDefaults.data!.values.ping_recovery_interval,
-            down: mwanDefaults.data!.values.interface_down_threshold,
-            up: mwanDefaults.data!.values.interface_up_threshold
+})
+
+function submit() {
+  ubusCall('ns.mwan', 'edit_policy', {
+    name: props.policy?.name,
+    label: policyForm.label,
+    interfaces: policyForm.priorities
+      .map((gateways, index) =>
+        gateways.map((gateway) => {
+          return {
+            name: gateway.id,
+            metric: (index + 1) * 10,
+            weight: gateway.weight
           }
         })
       )
-  )
-  promises.push(
-    // for each priority we'll have +10 metric applied
-    ...form.value.priorities
-      .map((priority, index) =>
-        // call 'add' to each gateway
-        priority.map((gateway) =>
-          ubusCall('uci', 'add', {
-            config: 'mwan3',
-            name: `${gateway.id}_M${(index + 1) * 10}_W${gateway.weight ?? 100}`,
-            type: 'member',
-            values: {
-              interface: gateway.id,
-              metric: (index + 1) * 10,
-              weight: gateway.weight ?? 100
-            }
-          })
-        )
-      )
-      // flatten array, we have nested promises here
       .flat()
-  )
-  promises.push(
-    // create policy
-    ubusCall('uci', 'add', {
-      config: 'mwan3',
-      name: props.policy?.name,
-      type: 'policy',
-      values: {
-        // map gateways to members name
-        // TODO: reuse name generation logic from above
-        use_member: form.value.priorities
-          .map((priority, index) =>
-            priority.map(
-              (gateway) => `${gateway.id}_M${(index + 1) * 10}_W${gateway.weight ?? 100}`
-            )
-          )
-          .flat()
-      }
+  })
+    .then(() => {
+      emit('success')
+    })
+    .catch((reason: ValidationError) => {
+      messageBag.value = reason.errorBag
+    })
+    .catch((reason: AxiosError) => {
+      error.value = reason
+    })
+    .finally(() => {
+      loading.value = false
     })
-  )
-  Promise.all(promises)
-    .then(() => emit('success'))
-    .catch(
-      (exception: AxiosError) => (updateError.value = new Error(t(getAxiosErrorMessage(exception))))
-    )
-    .finally(() => (saving.value = false))
 }
-
-/**
- * Adapt the policy object to the form
- * TODO: might be better to put this inside a PolicyAdapter
- */
-onBeforeMount(() => {
-  const metrics = props.policy?.members.map((member) => member.metric)
-  if (metrics.every((metric, index, array) => array[0] == metric)) {
-    form.value.selection = PolicyOptions.BALANCE
-  } else if (metrics.every((metric, index, array) => array.indexOf(metric) == index)) {
-    form.value.selection = PolicyOptions.BACKUP
-  } else {
-    form.value.selection = PolicyOptions.CUSTOM
-  }
-
-  form.value.priorities = Object.values(groupBy(props.policy?.members, 'metric')).map(
-    (members: Member[]) => {
-      return members.map((member) => new Gateway(member.interface.name, String(member.weight)))
-    }
-  )
-})
 </script>
+
 <template>
-  <NeSkeleton v-if="policyForm.loading" :lines="20" />
-  <NeInlineNotification
-    v-else-if="policyForm.error"
-    :title="t(getAxiosErrorMessage(policyForm.error))"
-    kind="error"
-  />
-  <div v-else class="space-y-8">
-    <NeRadioSelection
-      v-model="form.selection"
-      :label="t('standalone.multi_wan.behave_picker.choose_behaviour')"
-      :options="policyOptionsSelection"
-      :screen-reader-help-text="t('standalone.multi_wan.behave_picker.choose_behaviour_sr')"
-    />
-    <div
-      v-for="(priority, priorityIndex) in form.priorities"
-      :key="priorityIndex"
-      class="space-y-4"
-    >
-      <NeFormItemLabel v-if="form.priorities.length > 1">
-        {{ t('standalone.multi_wan.priority', priorityIndex + 1) }}
-      </NeFormItemLabel>
-      <template v-for="(gateway, gatewayIndex) in priority" :key="gatewayIndex">
-        <div class="flex gap-x-4">
-          <NeCombobox
-            v-model="gateway.id"
-            :options="policyForm.gateways"
-            :placeholder="t('standalone.multi_wan.choose_gateway')"
-            class="grow"
-          />
-          <NeTextInput
-            v-if="form.selection != PolicyOptions.BACKUP"
-            v-model.number="gateway.weight"
-            :placeholder="t('standalone.multi_wan.weight')"
-          />
+  <NeSideDrawer
+    :is-shown="policy != undefined"
+    :title="t('standalone.multi_wan.edit_policy', { name: policyForm.label })"
+    @close="$emit('close')"
+  >
+    <NeInlineNotification v-if="firewall.error" :kind="'error'" :title="firewall.error.message" />
+    <div v-else class="space-y-8">
+      <NeTextInput
+        ref="labelElement"
+        v-model="policyForm.label"
+        :disabled="policy?.name == 'ns_default'"
+        :invalid-message="messageBag.getFirstFor('name')"
+        :label="t('standalone.multi_wan.label_input_label')"
+      />
+      <NeRadioSelection
+        v-model="policyForm.selection"
+        :label="t('standalone.multi_wan.behave_picker.choose_behaviour')"
+        :options="policyForm.policyOptionSelection"
+        :screen-reader-help-text="t('standalone.multi_wan.behave_picker.choose_behaviour_sr')"
+      />
+      <NeSkeleton v-if="firewall.loading" :lines="10" />
+      <template v-else>
+        <div
+          v-for="(priority, priorityIndex) in policyForm.priorities"
+          :key="priorityIndex"
+          class="space-y-4"
+        >
+          <NeFormItemLabel v-if="policyForm.priorities.length > 1">
+            {{ t('standalone.multi_wan.priority', priorityIndex + 1) }}
+          </NeFormItemLabel>
+          <template v-for="(gateway, index) in priority" :key="index">
+            <div class="flex gap-x-4">
+              <NeCombobox
+                v-model="gateway.id"
+                :invalid-message="messageBag.getFirstFor(`interfaces.${index}.name`)"
+                :options="availableGateways"
+                :placeholder="t('standalone.multi_wan.choose_gateway')"
+                class="grow"
+              />
+              <NeTextInput
+                v-if="policyForm.selection != 'backup'"
+                v-model.number="gateway.weight"
+                :invalid-message="messageBag.getFirstFor(`interfaces.${index}.weight`)"
+                :placeholder="t('standalone.multi_wan.weight')"
+              />
+              <NeButton
+                :disabled="policyForm.isTrashButtonDisabled"
+                @click="policyForm.removePriority(priorityIndex, index)"
+              >
+                <FontAwesomeIcon :icon="['fas', 'trash']" />
+              </NeButton>
+            </div>
+          </template>
           <NeButton
-            :disabled="isTrashButtonDisabled"
-            @click="removeGateway(priorityIndex, gatewayIndex)"
+            v-if="policyForm.selection != 'backup'"
+            :kind="'tertiary'"
+            @click="priority.push(new Gateway())"
           >
-            <FontAwesomeIcon :icon="['fas', 'trash']" />
+            {{ t('standalone.multi_wan.add_gateway') }}
           </NeButton>
         </div>
       </template>
       <NeButton
-        v-if="form.selection != PolicyOptions.BACKUP"
-        :kind="'tertiary'"
-        @click="priority.push(new Gateway())"
+        v-if="policyForm.selection != 'balance'"
+        @click="policyForm.priorities.push([new Gateway()])"
       >
-        {{ t('standalone.multi_wan.add_gateway') }}
-      </NeButton>
-    </div>
-    <NeButton
-      v-if="form.selection != PolicyOptions.BALANCE"
-      @click="form.priorities.push([new Gateway()])"
-    >
-      <template #prefix>
-        <FontAwesomeIcon :icon="faPlus" />
-      </template>
-      Add Priority level
-    </NeButton>
-    <hr />
-    <div class="flex justify-end gap-4">
-      <NeButton :disabled="saving" :kind="'tertiary'" @click="$emit('cancel')">
-        {{ t('common.cancel') }}
-      </NeButton>
-      <NeButton :disabled="saving" :kind="'primary'" :loading="saving" @click="save()">
-        {{ t('common.save') }}
+        <template #prefix>
+          <FontAwesomeIcon :icon="faPlus" />
+        </template>
+        Add Priority level
       </NeButton>
+      <hr />
+      <div class="flex justify-end gap-4">
+        <NeButton :disabled="loading" :kind="'tertiary'" @click="$emit('close')">
+          {{ t('common.cancel') }}
+        </NeButton>
+        <NeButton :disabled="loading" :kind="'primary'" :loading="loading" @click="submit()">
+          {{ t('common.edit') }}
+        </NeButton>
+      </div>
     </div>
-  </div>
+  </NeSideDrawer>
 </template>
diff --git a/src/components/standalone/multi-wan/PolicyView.vue b/src/components/standalone/multi-wan/PolicyView.vue
deleted file mode 100644
index a81a2d841..000000000
--- a/src/components/standalone/multi-wan/PolicyView.vue
+++ /dev/null
@@ -1,181 +0,0 @@
-<!--
-  Copyright (C) 2023 Nethesis S.r.l.
-  SPDX-License-Identifier: GPL-3.0-or-later
--->
-
-<script lang="ts" setup>
-import { useI18n } from 'vue-i18n'
-import type { Member, Policy } from '@/composables/useMwanConfig'
-import HorizontalCard from '@/components/standalone/HorizontalCard.vue'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { useMwanStatus } from '@/composables/useMwanStatus'
-import type { PropType } from 'vue'
-import { computed, reactive } from 'vue'
-import { NeBadge, NeButton, NeDropdown } from '@nethserver/vue-tailwind-lib'
-
-enum PolicyType {
-  BALANCED,
-  BACKUP,
-  CUSTOM
-}
-
-const props = defineProps({
-  policy: {
-    type: Object as PropType<Policy>,
-    required: true
-  },
-  belongsToRule: {
-    type: Boolean,
-    required: true
-  }
-})
-
-defineEmits<{
-  delete: [policy: Policy]
-  edit: [policy: Policy]
-}>()
-
-const { t } = useI18n()
-
-const mwanStatus = reactive(useMwanStatus())
-
-const membersGrouped = computed(() => {
-  const map = new Map<number, Array<Member>>()
-  props.policy?.members.forEach((value) => {
-    if (map.get(value.metric) == undefined) {
-      map.set(value.metric, [])
-    }
-    map.get(value.metric)!.push(value)
-  })
-  return map
-})
-
-const policyType = computed(() => {
-  const members = props.policy?.members.map((value) => value.metric) ?? []
-  if (members.every((value, index, array) => value == array[0])) {
-    return PolicyType.BALANCED
-  } else if (members.every((value, index, array) => array.indexOf(value) == index)) {
-    return PolicyType.BACKUP
-  } else {
-    return PolicyType.CUSTOM
-  }
-})
-
-const policyIcon = computed(() => {
-  switch (policyType.value) {
-    case PolicyType.BALANCED:
-      return ['fas', 'scale-balanced']
-    case PolicyType.BACKUP:
-      return ['fas', 'layer-group']
-    default:
-      return undefined
-  }
-})
-
-const policyLabel = computed(() => {
-  switch (policyType.value) {
-    case PolicyType.BALANCED:
-      return 'standalone.multi_wan.modes.balance'
-    case PolicyType.BACKUP:
-      return 'standalone.multi_wan.modes.backup'
-    case PolicyType.CUSTOM:
-      return 'standalone.multi_wan.modes.custom'
-    default:
-      return ''
-  }
-})
-
-function badgeIcon(member: Member) {
-  switch (mwanStatus.interfaces.get(member.interface.name)!.status) {
-    case 'online':
-      return ['fas', 'circle-check']
-    case 'offline':
-      return ['fas', 'circle-xmark']
-    case 'disconnecting':
-    case 'connecting':
-      return ['fas', 'warning']
-    default:
-      return ['fas', 'clock']
-  }
-}
-
-function badgeType(member: Member) {
-  switch (mwanStatus.interfaces.get(member.interface.name)!.status) {
-    case 'online':
-      return 'success'
-    case 'offline':
-      return 'error'
-    case 'disconnecting':
-    case 'connecting':
-      return 'warning'
-    default:
-      return undefined
-  }
-}
-</script>
-
-<template>
-  <HorizontalCard
-    :class="[policy.name == 'Default' ? 'border-indigo-900' : 'border-transparent']"
-    class="mb-4 border-l-4"
-  >
-    <div class="flex flex-wrap gap-y-6 md:gap-6">
-      <div
-        class="flex basis-1/2 items-center border-r-[1px] border-gray-600 md:basis-3/12 xl:basis-2/12"
-      >
-        <div
-          v-if="policy.name == 'Default'"
-          class="mr-3 flex h-8 w-8 items-center justify-center rounded-full dark:bg-gray-50 dark:text-gray-600"
-        >
-          <FontAwesomeIcon :icon="['fas', 'lock']" />
-        </div>
-        <p class="break-all">{{ policy.name }}</p>
-      </div>
-      <div
-        class="flex basis-1/2 items-center justify-end md:basis-2/12 md:justify-start xl:basis-2/12"
-      >
-        <FontAwesomeIcon v-if="policyIcon != undefined" :icon="policyIcon" class="mr-2" />
-        <p>{{ t(policyLabel) }}</p>
-      </div>
-      <div
-        v-if="!mwanStatus.loading"
-        class="flex basis-full flex-col justify-center gap-y-6 md:basis-4/12 xl:w-3/12"
-      >
-        <div v-for="([metric, members], membersIndex) in membersGrouped" :key="metric">
-          <div v-if="membersGrouped.size > 1" class="mb-2">
-            {{ t('standalone.multi_wan.priority', membersIndex + 1) }}
-          </div>
-          <div class="flex flex-wrap gap-4">
-            <div v-for="(member, index) in members" :key="index">
-              <NeBadge
-                :icon="badgeIcon(member)"
-                :kind="badgeType(member)"
-                :label="members.length > 1 ? `weight: ${member.weight}` : ''"
-                :text="member.interface.name"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ml-auto flex items-center">
-        <NeButton :kind="'tertiary'" @click="$emit('edit', policy)">
-          <template #prefix>
-            <FontAwesomeIcon :icon="['fas', 'edit']" />
-          </template>
-          {{ t('common.edit') }}
-        </NeButton>
-        <NeDropdown
-          :items="[
-            {
-              id: 'delete',
-              label: t('common.delete'),
-              disabled: policy.name == 'Default' || belongsToRule,
-              action: () => $emit('delete', policy)
-            }
-          ]"
-          align-to-right
-        />
-      </div>
-    </div>
-  </HorizontalCard>
-</template>
diff --git a/src/components/standalone/multi-wan/RuleCreator.vue b/src/components/standalone/multi-wan/RuleCreator.vue
index acf54f8bd..a2851848a 100644
--- a/src/components/standalone/multi-wan/RuleCreator.vue
+++ b/src/components/standalone/multi-wan/RuleCreator.vue
@@ -1,122 +1,142 @@
 <script lang="ts" setup>
-import {
-  getAxiosErrorMessage,
-  NeButton,
-  NeCombobox,
-  NeInlineNotification,
-  NeSkeleton,
-  NeTextInput
-} from '@nethserver/vue-tailwind-lib'
-import { reactive, ref } from 'vue'
+import { NeButton, NeCombobox, NeSideDrawer, NeTextInput } from '@nethserver/vue-tailwind-lib'
+import { ref, toRef } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { ubusCall } from '@/lib/standalone/ubus'
-import type { AxiosError } from 'axios'
-import type { Form } from '@/composables/useRuleForm'
+import type { Policy } from '@/composables/useMwan'
+import { ubusCall, ValidationError } from '@/lib/standalone/ubus'
 import { useRuleForm } from '@/composables/useRuleForm'
-import { MessageBag } from '@/lib/validation'
 
 const { t } = useI18n()
 
-const emit = defineEmits(['cancel', 'success'])
+const emit = defineEmits<{
+  success: []
+  cancel: []
+}>()
 
-const { protocolOptions, policyOptions, error: policyError, loading: policyLoading } = useRuleForm()
+const props = defineProps<{
+  isShown: boolean
+  policies: Policy[]
+}>()
 
-const form = reactive<Form>({
-  name: '',
-  assignedPolicy: '',
-  sourceAddress: '',
-  destinationAddress: '',
-  destinationPort: '',
-  protocol: ''
-})
+const {
+  policyDropdownOptions,
+  protocolOptions,
+  policyDropdownPlaceholder,
+  name,
+  policy,
+  protocol,
+  sourceAddress,
+  sourcePort,
+  destinationAddress,
+  destinationPort,
+  validationErrors,
+  isValid
+} = useRuleForm(toRef(() => props.policies))
 
 const saving = ref(false)
-const saveError = ref<Error>()
-const validationErrors = reactive(new MessageBag())
-
-// TODO: implement validation
-// You can put errors in validationErrors object, setting the errors using snake case of the form fields.
-// validationErrors.set('assigned_policy', [t('error.generic_error')])
-function validate() {
-  return true
-}
+const error = ref<Error>()
 
 function save() {
-  if (validate()) {
+  if (isValid()) {
     saving.value = true
-    ubusCall('uci', 'add', {
-      config: 'mwan3',
-      name: form.name,
-      type: 'rule',
-      values: {
-        proto: form.protocol,
-        src_ip: form.sourceAddress,
-        dest_ip: form.destinationAddress,
-        dest_port: form.destinationPort,
-        sticky: '0',
-        use_policy: form.assignedPolicy
-      }
+    ubusCall('ns.mwan', 'store_rule', {
+      name: name.value,
+      policy: policy.value,
+      protocol: protocol.value,
+      source_address: sourceAddress.value,
+      source_port: sourcePort.value,
+      destination_address: destinationAddress.value,
+      destination_port: destinationPort.value
     })
-      .then(() => {
-        emit('success')
+      .then(() => emit('success'))
+      .catch((reason: Error) => {
+        if (reason instanceof ValidationError) {
+          validationErrors.value = reason.errorBag
+        } else {
+          error.value = reason
+        }
       })
-      .catch((error: AxiosError) => (saveError.value = new Error(t(getAxiosErrorMessage(error)))))
       .finally(() => (saving.value = false))
   }
 }
 </script>
 
 <template>
-  <NeInlineNotification v-if="saveError" :kind="'error'" :title="saveError.message" />
-  <NeSkeleton v-if="policyLoading" :lines="20" />
-  <NeInlineNotification v-if="policyError" :kind="'error'" :title="policyError.message" />
-  <div v-else class="space-y-8">
-    <NeTextInput
-      v-model="form.name"
-      :disabled="saving"
-      :invalid-message="validationErrors.get('name')?.[0]"
-      :label="t('standalone.multi_wan.rule_name')"
-    />
-    <NeCombobox
-      v-model="form.assignedPolicy"
-      :disabled="saving"
-      :invalid-message="validationErrors.get('assigned_policy')?.[0]"
-      :label="t('standalone.multi_wan.assigned_policy')"
-      :options="policyOptions"
-    />
-    <NeTextInput
-      v-model="form.sourceAddress"
-      :disabled="saving"
-      :invalid-message="validationErrors.get('source_address')?.[0]"
-      :label="t('standalone.multi_wan.source_address')"
-    />
-    <NeTextInput
-      v-model="form.destinationAddress"
-      :disabled="saving"
-      :invalid-message="validationErrors.get('destination_address')?.[0]"
-      :label="t('standalone.multi_wan.destination_address')"
-    />
-    <NeTextInput
-      v-model="form.destinationPort"
-      :disabled="saving"
-      :invalid-message="validationErrors.get('destination_port')?.[0]"
-      :label="t('standalone.multi_wan.destination_port')"
-    />
-    <NeCombobox
-      v-model="form.protocol"
-      :disabled="saving"
-      :invalid-message="validationErrors.get('protocol')?.[0]"
-      :label="t('standalone.multi_wan.protocol')"
-      :options="protocolOptions"
-    />
-    <hr />
-    <div class="flex justify-end gap-4">
-      <NeButton :disabled="saving" :kind="'secondary'" @click="emit('cancel')">
-        {{ t('common.cancel') }}
-      </NeButton>
-      <NeButton :disabled="saving" :kind="'primary'" :loading="saving" @click="save()">
-        {{ t('common.save') }}
-      </NeButton>
+  <NeSideDrawer
+    :is-shown="isShown"
+    :title="t('standalone.multi_wan.create_new_rule')"
+    @close="$emit('cancel')"
+  >
+    <div class="space-y-8">
+      <NeTextInput
+        v-model="name"
+        :disabled="saving"
+        :invalid-message="validationErrors.getFirstFor('name')"
+        :label="t('standalone.multi_wan.rule_name')"
+        :placeholder="t('standalone.multi_wan.rule_name')"
+        name="rule_name"
+      />
+      <NeCombobox
+        v-model="policy"
+        :disabled="saving"
+        :invalid-message="validationErrors.getFirstFor('policy')"
+        :label="t('standalone.multi_wan.assigned_policy')"
+        :options="policyDropdownOptions"
+        :placeholder="policyDropdownPlaceholder"
+        name="policy"
+      />
+      <NeCombobox
+        v-model="protocol"
+        :disabled="saving"
+        :invalid-message="validationErrors.getFirstFor('protocol')"
+        :label="t('standalone.multi_wan.protocol')"
+        :options="protocolOptions"
+        :placeholder="protocolOptions[0].label"
+        name="protocol"
+      />
+      <NeTextInput
+        v-model="sourceAddress"
+        :disabled="saving"
+        :invalid-message="validationErrors.getFirstFor('source_address')"
+        :label="t('standalone.multi_wan.source_address')"
+        name="source_address"
+        placeholder="any"
+      />
+      <NeTextInput
+        v-if="protocol == 'tcp' || protocol == 'udp'"
+        v-model="sourcePort"
+        :disabled="saving"
+        :invalid-message="validationErrors.getFirstFor('source_port')"
+        :label="t('standalone.multi_wan.source_port')"
+        :placeholder="t('standalone.multi_wan.any')"
+        name="source_port"
+      />
+      <NeTextInput
+        v-model="destinationAddress"
+        :disabled="saving"
+        :invalid-message="validationErrors.getFirstFor('destination_address')"
+        :label="t('standalone.multi_wan.destination_address')"
+        :placeholder="t('standalone.multi_wan.any')"
+        name="destination_address"
+      />
+      <NeTextInput
+        v-if="protocol == 'tcp' || protocol == 'udp'"
+        v-model="destinationPort"
+        :disabled="saving"
+        :invalid-message="validationErrors.getFirstFor('destination_port')"
+        :label="t('standalone.multi_wan.destination_port')"
+        :placeholder="t('standalone.multi_wan.any')"
+        name="destination_port"
+      />
+      <hr />
+      <div class="flex justify-end gap-4">
+        <NeButton :disabled="saving" :kind="'secondary'" @click="emit('cancel')">
+          {{ t('common.cancel') }}
+        </NeButton>
+        <NeButton :disabled="saving" :kind="'primary'" :loading="saving" @click="save()">
+          {{ t('common.save') }}
+        </NeButton>
+      </div>
     </div>
-  </div>
+  </NeSideDrawer>
 </template>
diff --git a/src/components/standalone/multi-wan/RuleDeleter.vue b/src/components/standalone/multi-wan/RuleDeleter.vue
new file mode 100644
index 000000000..d30c5adb4
--- /dev/null
+++ b/src/components/standalone/multi-wan/RuleDeleter.vue
@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import { getAxiosErrorMessage, NeInlineNotification, NeModal } from '@nethserver/vue-tailwind-lib'
+import type { Rule } from '@/composables/useMwan'
+import { ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { ubusCall } from '@/lib/standalone/ubus'
+import type { AxiosError } from 'axios'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  rule: Rule | undefined
+}>()
+
+const emit = defineEmits<{
+  success: []
+  cancel: []
+}>()
+
+const loading = ref(false)
+const error = ref<Error>()
+
+const ruleName = ref('')
+const ruleLabel = ref('')
+
+watch(
+  () => props.rule,
+  () => {
+    if (props.rule != undefined) {
+      ruleName.value = props.rule.name
+      ruleLabel.value = props.rule.label ?? props.rule.name
+      loading.value = false
+    }
+  }
+)
+
+function closeHandler() {
+  if (!loading.value) {
+    emit('cancel')
+  }
+}
+
+function submit() {
+  loading.value = true
+  ubusCall('ns.mwan', 'delete_rule', { name: ruleName.value })
+    .then(() => emit('success'))
+    .catch((reason: AxiosError) => {
+      error.value = reason
+      loading.value = false
+    })
+}
+</script>
+
+<template>
+  <NeModal
+    :visible="props.rule != undefined"
+    kind="warning"
+    @close="closeHandler()"
+    primary-button-kind="danger"
+    :title="t('standalone.multi_wan.delete_rule_modal.title', { name: ruleLabel })"
+    :primary-label="t('standalone.multi_wan.delete_rule_modal.button')"
+    :primary-button-disabled="loading"
+    :primary-button-loading="loading"
+    :secondary-button-disabled="loading"
+    @primary-click="submit()"
+  >
+    <NeInlineNotification kind="error" v-if="error" :title="t(getAxiosErrorMessage(error))" />
+  </NeModal>
+</template>
diff --git a/src/components/standalone/multi-wan/RuleEditor.vue b/src/components/standalone/multi-wan/RuleEditor.vue
index 3216e040b..4ed2f3d5c 100644
--- a/src/components/standalone/multi-wan/RuleEditor.vue
+++ b/src/components/standalone/multi-wan/RuleEditor.vue
@@ -1,121 +1,145 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
-import type { PropType } from 'vue'
-import { reactive, ref } from 'vue'
-import type { Rule } from '@/composables/useMwanConfig'
-import type { Form } from '@/composables/useRuleForm'
-import { useRuleForm } from '@/composables/useRuleForm'
-import {
-  NeButton,
-  NeCombobox,
-  NeInlineNotification,
-  NeSkeleton,
-  NeTextInput
-} from '@nethserver/vue-tailwind-lib'
-import { ubusCall } from '@/lib/standalone/ubus'
-import type { AxiosError } from 'axios'
+import { ref, toRef } from 'vue'
+import { NeButton, NeCombobox, NeSideDrawer, NeTextInput } from '@nethserver/vue-tailwind-lib'
 import { MessageBag } from '@/lib/validation'
+import type { Policy, Rule } from '@/composables/useMwan'
+import { ubusCall, ValidationError } from '@/lib/standalone/ubus'
+import { useRuleForm } from '@/composables/useRuleForm'
 
 const { t } = useI18n()
 
-const { protocolOptions, policyOptions, error: policyError, loading: policyLoading } = useRuleForm()
+const props = defineProps<{
+  rule: Rule | undefined
+  policies: Policy[]
+}>()
 
-const props = defineProps({
-  rule: {
-    type: Object as PropType<Rule>,
-    required: true
-  }
-})
+const {
+  policyDropdownOptions,
+  protocolOptions,
+  policyDropdownPlaceholder,
+  name,
+  policy,
+  protocol,
+  sourceAddress,
+  sourcePort,
+  destinationAddress,
+  destinationPort,
+  validationErrors,
+  isValid
+} = useRuleForm(
+  toRef(() => props.policies),
+  toRef(() => props.rule)
+)
 
-const emit = defineEmits(['cancel', 'success'])
+const emit = defineEmits(['close', 'success'])
 
-const form = reactive<Form>({
-  name: props.rule.name,
-  assignedPolicy: props.rule.policy.name,
-  sourceAddress: props.rule.source,
-  destinationAddress: props.rule.destination,
-  destinationPort: props.rule.destinationPort,
-  protocol: props.rule.protocol
-})
 const saving = ref(false)
-const editError = ref<Error>()
-const validationErrors = reactive(new MessageBag())
-
-// TODO: implement validation
-// You can put errors in validationErrors object, setting the errors using snake case of the form fields.
-// validationErrors.set('assigned_policy', [t('error.generic_error')])
-function validate(): boolean {
-  return true
-}
+const messageBag = ref(new MessageBag())
+const error = ref<Error>()
 
 function save() {
-  if (validate()) {
+  if (isValid()) {
     saving.value = true
-    ubusCall('uci', 'set', {
-      config: 'mwan3',
-      section: props.rule.name,
-      values: {
-        proto: form.protocol,
-        src_ip: form.sourceAddress,
-        dest_port: form.destinationPort,
-        dest_ip: form.destinationAddress,
-        use_policy: form.assignedPolicy
-      }
+    ubusCall('ns.mwan', 'edit_rule', {
+      name: props.rule?.name,
+      label: name.value,
+      policy: policy.value,
+      protocol: protocol.value,
+      source_address: sourceAddress.value,
+      source_port: sourcePort.value,
+      destination_address: destinationAddress.value,
+      destination_port: destinationPort.value
     })
       .then(() => emit('success'))
-      .catch((error: AxiosError) => (editError.value = error))
+      .catch((reason: Error) => {
+        if (reason instanceof ValidationError) {
+          messageBag.value = reason.errorBag
+        } else {
+          error.value = reason
+        }
+      })
       .finally(() => (saving.value = false))
   }
 }
 </script>
 
 <template>
-  <div class="space-y-8">
-    <NeInlineNotification v-if="editError" :title="editError.message" kind="error" />
-    <NeSkeleton v-if="policyLoading" :lines="20" />
-    <NeInlineNotification v-else-if="policyError" :kind="'error'" :title="policyError.message" />
-    <template v-else>
+  <NeSideDrawer
+    :is-shown="rule != undefined"
+    :title="t('standalone.multi_wan.edit_rule', { name: name })"
+    @close="$emit('close')"
+  >
+    <div class="space-y-8">
+      <NeTextInput
+        v-model="name"
+        :disabled="saving || rule?.name == 'ns_default_rule'"
+        :invalid-message="validationErrors.getFirstFor('name')"
+        :label="t('standalone.multi_wan.rule_name')"
+        :placeholder="t('standalone.multi_wan.rule_name')"
+        name="rule_name"
+      />
       <NeCombobox
-        v-model="form.assignedPolicy"
+        v-model="policy"
         :disabled="saving"
-        :invalid-message="validationErrors.get('assigned_policy')?.[0]"
+        :invalid-message="validationErrors.getFirstFor('policy')"
         :label="t('standalone.multi_wan.assigned_policy')"
-        :options="policyOptions"
+        :options="policyDropdownOptions"
+        :placeholder="policyDropdownPlaceholder"
+        name="policy"
+      />
+      <NeCombobox
+        v-model="protocol"
+        :disabled="saving"
+        :invalid-message="validationErrors.getFirstFor('protocol')"
+        :label="t('standalone.multi_wan.protocol')"
+        :options="protocolOptions"
+        :placeholder="protocolOptions[0].label"
+        name="protocol"
       />
       <NeTextInput
-        v-model="form.sourceAddress"
+        v-model="sourceAddress"
         :disabled="saving"
-        :invalid-message="validationErrors.get('source_address')?.[0]"
+        :invalid-message="validationErrors.getFirstFor('source_address')"
         :label="t('standalone.multi_wan.source_address')"
+        name="source_address"
+        placeholder="any"
       />
       <NeTextInput
-        v-model="form.destinationAddress"
+        v-if="protocol == 'tcp' || protocol == 'udp'"
+        v-model="sourcePort"
         :disabled="saving"
-        :invalid-message="validationErrors.get('destination_address')?.[0]"
-        :label="t('standalone.multi_wan.destination_address')"
+        :invalid-message="validationErrors.getFirstFor('source_port')"
+        :label="t('standalone.multi_wan.source_port')"
+        :placeholder="t('standalone.multi_wan.any')"
+        name="source_port"
       />
       <NeTextInput
-        v-model="form.destinationPort"
+        v-model="destinationAddress"
         :disabled="saving"
-        :invalid-message="validationErrors.get('destination_port')?.[0]"
-        :label="t('standalone.multi_wan.destination_port')"
+        :invalid-message="validationErrors.getFirstFor('destination_address')"
+        :label="t('standalone.multi_wan.destination_address')"
+        :placeholder="t('standalone.multi_wan.any')"
+        name="destination_address"
       />
-      <NeCombobox
-        v-model="form.protocol"
+      <NeTextInput
+        v-if="protocol == 'tcp' || protocol == 'udp'"
+        v-model="destinationPort"
         :disabled="saving"
-        :invalid-message="validationErrors.get('protocol')?.[0]"
-        :label="t('standalone.multi_wan.protocol')"
-        :options="protocolOptions"
+        :invalid-message="validationErrors.getFirstFor('destination_port')"
+        :label="t('standalone.multi_wan.destination_port')"
+        :placeholder="t('standalone.multi_wan.any')"
+        name="destination_port"
       />
       <hr />
       <div class="flex justify-end gap-4">
-        <NeButton :disabled="saving" :kind="'secondary'" @click="$emit('cancel')">
+        <NeButton :disabled="saving" :kind="'secondary'" @click="emit('close')">
           {{ t('common.cancel') }}
         </NeButton>
         <NeButton :disabled="saving" :kind="'primary'" :loading="saving" @click="save()">
-          {{ t('common.edit') }}
+          {{ t('common.save') }}
         </NeButton>
       </div>
-    </template>
-  </div>
+    </div>
+  </NeSideDrawer>
 </template>
diff --git a/src/components/standalone/multi-wan/RuleManager.vue b/src/components/standalone/multi-wan/RuleManager.vue
index 89c0bc7da..6b8b78481 100644
--- a/src/components/standalone/multi-wan/RuleManager.vue
+++ b/src/components/standalone/multi-wan/RuleManager.vue
@@ -1,20 +1,21 @@
 <script lang="ts" setup>
-import type { Rule } from '@/composables/useMwanConfig'
-import { genericValueComparator, useMwanConfig } from '@/composables/useMwanConfig'
 import NeTable from '@/components/standalone/NeTable.vue'
-import { reactive, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faGripVertical } from '@fortawesome/free-solid-svg-icons'
+import { faCirclePlus, faGripVertical } from '@fortawesome/free-solid-svg-icons'
 import { useI18n } from 'vue-i18n'
-import { ubusCall } from '@/lib/standalone/ubus'
 import { useUciPendingChangesStore } from '@/stores/standalone/uciPendingChanges'
-import type { AxiosError } from 'axios'
 import {
   getAxiosErrorMessage,
   NeButton,
   NeDropdown,
-  NeInlineNotification
+  NeInlineNotification,
+  NeSkeleton
 } from '@nethserver/vue-tailwind-lib'
+import type { Rule } from '@/composables/useMwan'
+import { ubusCall } from '@/lib/standalone/ubus'
+import type { AxiosError } from 'axios'
+import HorizontalCard from '@/components/standalone/HorizontalCard.vue'
 
 const { t } = useI18n()
 
@@ -51,20 +52,33 @@ const headers = [
 ]
 
 defineEmits<{
+  create: any
   edit: [rule: Rule]
   delete: [rule: Rule]
 }>()
 
-const mwanConfig = reactive(useMwanConfig())
+interface Props {
+  rules: Array<Rule>
+  policiesExist: boolean
+  loading: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false
+})
+
 const data = ref<Array<Rule>>([])
 const error = ref<Error>()
 
 const ruleDragged = ref<number>()
 const indexOver = ref<number>()
 
-watch(mwanConfig, () => {
-  data.value = mwanConfig.rules
-})
+watch(
+  () => props.rules,
+  () => {
+    data.value = props.rules
+  }
+)
 
 function drop(index: number): void {
   indexOver.value = undefined
@@ -79,14 +93,8 @@ function drop(index: number): void {
 }
 
 function saveState(): void {
-  const sorted = Object.values(mwanConfig.data?.values ?? [])
-    .filter((value) => value['.type'] != 'rule')
-    .sort(genericValueComparator)
-    .map((value) => value['.name'])
-  data.value.forEach((value) => sorted.push(value['name']))
-  ubusCall('uci', 'order', {
-    config: 'mwan3',
-    sections: sorted
+  ubusCall('ns.mwan', 'order_rules', {
+    rules: data.value.map((rule) => rule.name)
   })
     .then(() => uciPendingChangesStore.getChanges())
     .catch((exception: AxiosError) => (error.value = new Error(getAxiosErrorMessage(exception))))
@@ -97,77 +105,97 @@ function saveState(): void {
   <NeInlineNotification v-if="error" :kind="'error'" class="mb-4">
     {{ error.message }}
   </NeInlineNotification>
+  <HorizontalCard class="space-y-4 text-center" v-else-if="!loading && rules.length < 1">
+    <p>{{ t('standalone.multi_wan.no_rule_found') }}</p>
+    <NeButton v-if="policiesExist" :kind="'primary'" @click="$emit('create')">
+      <template #prefix>
+        <FontAwesomeIcon :icon="faCirclePlus" />
+      </template>
+      {{ t('standalone.multi_wan.create_default_policy') }}
+    </NeButton>
+    <p v-else>{{ t('standalone.multi_wan.create_policy_before') }}</p>
+  </HorizontalCard>
   <NeTable
     v-else
-    :data="data"
+    :data="rules"
     :headers="headers"
-    :loading="mwanConfig.loading"
+    :loading="loading"
     :style="'card'"
     class="!border-spacing-y-1"
   >
     <template #tbody>
       <tbody>
-        <template v-for="(item, index) in data" :key="item.key">
-          <tr
-            :class="[
-              indexOver == index ? 'drop-over drop-target' : '',
-              ruleDragged != undefined ? 'drop-active' : ''
-            ]"
-            class="drop-target"
-            @dragenter="indexOver = index"
-            @dragleave="indexOver = undefined"
-            @drop.prevent="drop(index)"
-            @dragover.prevent
-          >
-            <td :colspan="headers.length"></td>
-          </tr>
-          <tr
-            :class="{ 'opacity-30': ruleDragged == index }"
-            draggable="true"
-            @dragend="ruleDragged = undefined"
-            @dragstart="ruleDragged = index"
-          >
-            <td class="cursor-move text-center hover:bg-opacity-50 hover:dark:bg-opacity-70">
-              <FontAwesomeIcon :icon="faGripVertical" />
-            </td>
-            <td>
-              {{ item.name }}
-            </td>
-            <td>
-              {{ item.policy.name }}
-            </td>
-            <td>
-              {{ item.source }}
-            </td>
-            <td>
-              {{ item.destination }}
-            </td>
-            <td>
-              {{ item.protocol }}
-            </td>
-            <td>
-              <div class="flex justify-start gap-2">
-                <NeButton kind="tertiary" @click="$emit('edit', item)">
-                  <template #prefix>
-                    <FontAwesomeIcon :icon="['fas', 'edit']" />
-                  </template>
-                  {{ t('Edit') }}
-                </NeButton>
-                <NeDropdown
-                  align-to-right
-                  :items="[
-                    {
-                      id: 'delete',
-                      action: () => $emit('delete', item),
-                      label: t('common.delete'),
-                      disabled: item.name == 'DefaultRule'
-                    }
-                  ]"
-                />
-              </div>
+        <template v-if="loading">
+          <tr>
+            <td :colspan="headers.length">
+              <NeSkeleton :lines="3" />
             </td>
           </tr>
         </template>
+        <template v-else>
+          <template v-for="(item, index) in data" :key="item.key">
+            <tr
+              :class="[
+                indexOver == index ? 'drop-over drop-target' : '',
+                ruleDragged != undefined ? 'drop-active' : ''
+              ]"
+              class="drop-target"
+              @dragenter="indexOver = index"
+              @dragleave="indexOver = undefined"
+              @drop.prevent="drop(index)"
+              @dragover.prevent
+            >
+              <td :colspan="headers.length"></td>
+            </tr>
+            <tr
+              :class="{ 'opacity-30': ruleDragged == index }"
+              draggable="true"
+              @dragend="ruleDragged = undefined"
+              @dragstart="ruleDragged = index"
+            >
+              <td class="cursor-move text-center hover:bg-opacity-50 hover:dark:bg-opacity-70">
+                <FontAwesomeIcon :icon="faGripVertical" />
+              </td>
+              <td>
+                {{ item.label ?? item.name }}
+              </td>
+              <td>
+                {{ item.policy.label ?? item.policy.name }}
+              </td>
+              <td>
+                {{ item.source_address ?? t('standalone.multi_wan.any') }}
+              </td>
+              <td>
+                {{ item.destination_address ?? t('standalone.multi_wan.any') }}
+              </td>
+              <td>
+                {{ item.protocol ?? t('standalone.multi_wan.all') }}
+              </td>
+              <td>
+                <div class="flex justify-start gap-2">
+                  <NeButton kind="tertiary" @click="$emit('edit', item)">
+                    <template #prefix>
+                      <FontAwesomeIcon :icon="['fas', 'edit']" />
+                    </template>
+                    {{ t('Edit') }}
+                  </NeButton>
+                  <NeDropdown
+                    :items="[
+                      {
+                        id: 'delete',
+                        action: () => $emit('delete', item),
+                        label: t('common.delete'),
+                        disabled: item.name == 'ns_default_rule',
+                        danger: true
+                      }
+                    ]"
+                    align-to-right
+                  />
+                </div>
+              </td>
+            </tr>
+          </template>
+        </template>
         <tr
           :class="[
             indexOver == data.length ? 'drop-over' : '',
diff --git a/src/composables/useMwan.ts b/src/composables/useMwan.ts
new file mode 100644
index 000000000..6c04d0bda
--- /dev/null
+++ b/src/composables/useMwan.ts
@@ -0,0 +1,62 @@
+import { onMounted, ref } from 'vue'
+import { ubusCall } from '@/lib/standalone/ubus'
+import type { AxiosResponse } from 'axios'
+
+export interface Member {
+  name: string
+  interface: string
+  metric: number
+  weight: number
+  status: string
+}
+
+export interface Policy {
+  name: string
+  label?: string
+  type: 'balance' | 'backup' | 'custom'
+  members: {
+    [metric: string]: Array<Member>
+  }
+}
+
+export interface Rule {
+  name: string
+  label?: string
+  policy: {
+    name: string
+    label?: string
+  }
+  protocol?: 'tcp' | 'udp' | 'icmp' | 'all'
+  source_address?: string
+  source_port?: string
+  destination_address?: string
+  destination_port?: string
+}
+
+interface ApiResponse<T> {
+  values: Array<T>
+}
+
+export function useMwan() {
+  const loading = ref(true)
+  const error = ref<Error>()
+  const policies = ref<Policy[]>([])
+  const rules = ref<Rule[]>([])
+
+  async function fetch() {
+    return await Promise.all([
+      ubusCall('ns.mwan', 'index_rules').then(
+        (response: AxiosResponse<ApiResponse<Rule>>) => (rules.value = response.data.values)
+      ),
+      ubusCall('ns.mwan', 'index_policies').then(
+        (response: AxiosResponse<ApiResponse<Policy>>) => (policies.value = response.data.values)
+      )
+    ]).catch((reason: Error) => (error.value = reason))
+  }
+
+  onMounted(() => {
+    fetch().finally(() => (loading.value = false))
+  })
+
+  return { loading, fetch, policies, rules, error }
+}
diff --git a/src/composables/useMwanConfig.ts b/src/composables/useMwanConfig.ts
deleted file mode 100644
index f031e2942..000000000
--- a/src/composables/useMwanConfig.ts
+++ /dev/null
@@ -1,228 +0,0 @@
-//  Copyright (C) 2023 Nethesis S.r.l.
-//  SPDX-License-Identifier: GPL-3.0-or-later
-
-import { ubusCall } from '@/lib/standalone/ubus'
-import type { AxiosError, AxiosResponse } from 'axios'
-import { computed, onMounted, ref } from 'vue'
-
-/**
- * Interface for the root of the response.
- */
-interface Response {
-  values: {
-    [name: string]: GenericValueResponse
-  }
-}
-
-/**
- * Every value inside the response must have this fields.
- */
-interface GenericValueResponse {
-  '.anonymous': boolean
-  '.index': number
-  '.name': string
-  '.type': 'globals' | 'interface' | 'member' | 'policy' | 'rule'
-}
-
-/**
- * Global response configuration.
- */
-interface GlobalsResponse extends GenericValueResponse {}
-
-/**
- * Interface response.
- */
-interface IFaceResponse extends GenericValueResponse {
-  count: string
-  down: string
-  enabled: string
-  failure_interval: string
-  family: string
-  initial_state: string
-  interval: string
-  max_ttl: string
-  recovery_interval: string
-  reliability: string
-  size: string
-  timeout: string
-  track_ip: Array<string>
-  track_method: string
-  up: string
-}
-
-/**
- * Member response.
- */
-interface MemberResponse extends GenericValueResponse {
-  interface: string
-  metric: string
-  weight: string
-}
-
-/**
- * Policy response.
- */
-interface PolicyResponse extends GenericValueResponse {
-  dest_ip: string
-  last_resort: string
-  proto: string
-  src_ip: string
-  sticky: string
-  use_member: Array<string>
-  use_policy: string
-}
-
-/**
- * Rule response.
- */
-interface RuleResponse extends GenericValueResponse {
-  dest_ip: string
-  dest_port?: string
-  proto: string
-  src_ip: string
-  sticky: string
-  use_policy: string
-}
-
-/**
- * Parsed response for interface.
- */
-export interface IFace {
-  name: string
-}
-
-/**
- * Parsed members, in addition of the fields that are configured, contains interface object.
- */
-export interface Member {
-  name: string
-  weight: number
-  metric: number
-  interface: IFace
-}
-
-/**
- * Parsed policies, only name is needed, array of members are set for ease of use.
- */
-export interface Policy {
-  name: string
-  members: Array<Member>
-}
-
-/**
- * Parsed rules, referred policy is set for ease of use.
- */
-export interface Rule {
-  key: number
-  name: string
-  source: string
-  destination: string
-  destinationPort: string
-  protocol: string
-  sticky: string
-  policy: Policy
-}
-
-/**
- * Comparator for GenericValueResponse interface.
- */
-export function genericValueComparator(a: GenericValueResponse, b: GenericValueResponse): number {
-  return a['.index'] - b['.index']
-}
-
-/**
- * Allows the usage of the calls to get the mwan3 configuration.
- */
-export function useMwanConfig() {
-  /**
-   * Data got directly from the API.
-   */
-  const data = ref<Response>()
-  /**
-   * Axios error, if any.
-   */
-  const error = ref<Error>()
-  /**
-   * Loading state.
-   */
-  const loading = ref(false)
-
-  /**
-   * Utility function that does the base filtering and sorting.
-   * @param type due to language limitation, additional field is needed to filter correct values
-   */
-  function baseFilter<T extends GenericValueResponse>(
-    type: GenericValueResponse['.type']
-  ): Array<T> {
-    return Object.values(data.value?.values ?? [])
-      .filter((value) => value['.type'] == type)
-      .sort(genericValueComparator)
-      .map((value) => value as T)
-  }
-
-  const globals = computed<Array<GlobalsResponse>>(() => {
-    return baseFilter<GlobalsResponse>('globals')
-  })
-
-  const interfaces = computed<Array<IFace>>(() => {
-    return baseFilter<IFaceResponse>('interface').map((value) => {
-      return {
-        name: value['.name']
-      }
-    })
-  })
-
-  const members = computed<Array<Member>>(() => {
-    return baseFilter<MemberResponse>('member').map((value) => {
-      return {
-        name: value['.name'],
-        weight: Number(value.weight),
-        metric: Number(value.metric),
-        interface: interfaces.value.filter((iface) => iface.name == value.interface)[0]
-      }
-    })
-  })
-
-  const policies = computed<Array<Policy>>(() => {
-    return baseFilter<PolicyResponse>('policy').map((value) => {
-      return {
-        name: value['.name'],
-        members: members.value.filter((member) => value.use_member.includes(member.name))
-      }
-    })
-  })
-
-  const rules = computed<Array<Rule>>(() => {
-    return baseFilter<RuleResponse>('rule').map((value) => {
-      return {
-        key: value['.index'],
-        name: value['.name'],
-        source: value.src_ip,
-        destination: value.dest_ip,
-        destinationPort: value.dest_port ?? '',
-        protocol: value.proto,
-        sticky: value.sticky,
-        policy: policies.value.filter((policy) => policy.name == value.use_policy)[0]
-      }
-    })
-  })
-
-  /**
-   * Fetches the data from the API, and sets the reactive values.
-   */
-  const fetch = function () {
-    ubusCall('uci', 'get', {
-      config: 'mwan3'
-    })
-      .then((response: AxiosResponse<Response>) => (data.value = response.data))
-      .catch((exception: AxiosError) => (error.value = exception))
-      .finally(() => (loading.value = false))
-  }
-
-  onMounted(() => {
-    loading.value = true
-    fetch()
-  })
-
-  return { data, error, loading, globals, interfaces, members, policies, rules, fetch }
-}
diff --git a/src/composables/useMwanStatus.ts b/src/composables/useMwanStatus.ts
deleted file mode 100644
index 241b5387e..000000000
--- a/src/composables/useMwanStatus.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-//  Copyright (C) 2023 Nethesis S.r.l.
-//  SPDX-License-Identifier: GPL-3.0-or-later
-
-import { ubusCall } from '@/lib/standalone/ubus'
-import type { AxiosError, AxiosResponse } from 'axios'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-
-export interface IFace {
-  status: string
-}
-
-export function useMwanStatus() {
-  const data = ref()
-  const error = ref<Error>()
-  const loading = ref(true)
-
-  const interfaces = computed(() => {
-    const map = new Map<string, IFace>()
-    Object.entries(data.value?.interfaces ?? []).forEach((entry: [string, any]) => {
-      map.set(entry[0], {
-        status: entry[1].status
-      })
-    })
-    return map
-  })
-
-  function fetch() {
-    ubusCall('mwan3', 'status')
-      .then((response: AxiosResponse) => (data.value = response.data))
-      .catch((exception: AxiosError) => (error.value = exception))
-      .finally(() => (loading.value = false))
-  }
-
-  let interval: number
-
-  onMounted(() => {
-    fetch()
-    interval = setInterval(() => fetch(), 5000)
-  })
-
-  onUnmounted(() => clearInterval(interval))
-
-  return { data, error, loading, interfaces }
-}
diff --git a/src/composables/usePolicyForm.ts b/src/composables/usePolicyForm.ts
index 8533182a9..f33636bc0 100644
--- a/src/composables/usePolicyForm.ts
+++ b/src/composables/usePolicyForm.ts
@@ -1,19 +1,7 @@
-import { onBeforeMount, ref } from 'vue'
-import { ubusCall } from '@/lib/standalone/ubus'
-import type { NeComboboxOption } from '@nethserver/vue-tailwind-lib'
-import type { AxiosError, AxiosResponse } from 'axios'
-
-/**
- * Interface describing the get firewall response
- */
-interface FirewallResponse {
-  values: {
-    [name: string]: {
-      name: string
-      network: Array<string>
-    }
-  }
-}
+import type { Ref } from 'vue'
+import { computed, ref, watch } from 'vue'
+import type { Policy } from '@/composables/useMwan'
+import { useI18n } from 'vue-i18n'
 
 /**
  * Gateway form definition.
@@ -28,15 +16,6 @@ export class Gateway {
   }
 }
 
-/**
- * Form used to manage Policy
- */
-export interface Form {
-  label?: string
-  selection: PolicyOptions
-  priorities: Array<Array<Gateway>>
-}
-
 /**
  * Enum categorization of possible gateways configuration
  */
@@ -46,41 +25,114 @@ export enum PolicyOptions {
   CUSTOM = 'custom'
 }
 
-export function usePolicyForm() {
-  const form = ref<Form>({
-    label: '',
-    selection: PolicyOptions.BALANCE,
-    priorities: [[new Gateway(), new Gateway()]]
+/**
+ * Translates the policyOptions into labels.
+ */
+const radioSelections = [
+  {
+    id: PolicyOptions.BALANCE,
+    label: 'standalone.multi_wan.behave_picker.balance'
+  },
+  {
+    id: PolicyOptions.BACKUP,
+    label: 'standalone.multi_wan.behave_picker.backup'
+  },
+  {
+    id: PolicyOptions.CUSTOM,
+    label: 'standalone.multi_wan.behave_picker.custom'
+  }
+]
+
+export function usePolicyForm(policy: Ref<Policy | undefined>) {
+  const { t } = useI18n()
+
+  // form inputs
+  const label = ref('')
+  const selection = ref<PolicyOptions>(PolicyOptions.BALANCE)
+  const priorities = ref([[new Gateway(), new Gateway()]])
+
+  // watcher for editable policy
+  watch(policy, () => {
+    if (policy.value != undefined) {
+      // set name of the policy if defined
+      label.value = policy.value.label ?? ''
+
+      // decode members into picker
+      const metrics = Object.values(policy.value?.members)
+        .flat()
+        .map((member) => member.metric)
+      if (metrics.every((metric, index, array) => metric == array[0])) {
+        selection.value = PolicyOptions.BALANCE
+      } else if (metrics.every((metric, index, array) => array.indexOf(metric) == index)) {
+        selection.value = PolicyOptions.BACKUP
+      } else {
+        selection.value = PolicyOptions.CUSTOM
+      }
+
+      // parse gateways
+      priorities.value = []
+      Object.values(policy.value?.members).forEach((members, index) => {
+        priorities.value[index] = members.map(
+          (member) => new Gateway(member.interface, String(member.weight))
+        )
+      })
+    }
+  })
+
+  watch(selection, (value) => {
+    if (value == PolicyOptions.BACKUP) {
+      priorities.value = priorities.value
+        .map((priority) => priority.map((gateway) => [gateway]))
+        .flat(1)
+      for (let i = priorities.value.length; i < 2; i++) {
+        priorities.value.push([new Gateway()])
+      }
+    } else if (value == PolicyOptions.BALANCE) {
+      priorities.value = [priorities.value.flat(1)]
+      for (let i = priorities.value[0].length; i < 2; i++) {
+        priorities.value[0].push(new Gateway())
+      }
+    }
   })
-  const loading = ref(false)
-  const error = ref<Error>()
-  const gateways = ref<NeComboboxOption[]>()
 
   /**
-   * Get gateways from the 'wan' firewall zone.
+   * Whether the button should be disabled or not once deletion.
    */
-  function fetchGateways() {
-    ubusCall('uci', 'get', { config: 'firewall', type: 'zone' })
-      .then(
-        (response: AxiosResponse<FirewallResponse>) =>
-          (gateways.value = Object.entries(response.data.values)
-            .filter((value) => value[1].name == 'wan')
-            .flatMap((value) => value[1].network)
-            .map((value) => {
-              return {
-                id: value,
-                label: value
-              }
-            }))
-      )
-      .catch((exception: AxiosError) => (error.value = exception))
-      .finally(() => (loading.value = false))
-  }
+  const isTrashButtonDisabled = computed<boolean>(() => {
+    if (selection.value == 'balance') {
+      return priorities.value[0].length < 3
+    } else if (selection.value == 'backup') {
+      return priorities.value.length < 3
+    }
+    return false
+  })
 
-  onBeforeMount(() => {
-    loading.value = true
-    fetchGateways()
+  /**
+   * Translation of the radio selections.
+   */
+  const policyOptionSelection = radioSelections.map((entry) => {
+    entry.label = t(entry.label)
+    return entry
   })
 
-  return { form, loading, error, gateways }
+  function removePriority(prioritiesIndex: number, priority: number) {
+    priorities.value[prioritiesIndex].splice(priority, 1)
+    priorities.value = priorities.value.filter((priority) => priority.length > 0)
+  }
+
+  function cleanForm() {
+    label.value = ''
+    selection.value = PolicyOptions.BALANCE
+    priorities.value = [[new Gateway(), new Gateway()]]
+  }
+
+  return {
+    label,
+    selection,
+    priorities,
+    policyOptionSelection,
+    isTrashButtonDisabled,
+    removePriority,
+    cleanForm
+  }
 }
diff --git a/src/composables/useRuleForm.ts b/src/composables/useRuleForm.ts
index eb57152c8..4e25bf4c5 100644
--- a/src/composables/useRuleForm.ts
+++ b/src/composables/useRuleForm.ts
@@ -1,18 +1,11 @@
 import { useI18n } from 'vue-i18n'
 import type { NeComboboxOption } from '@nethserver/vue-tailwind-lib'
-import { computed } from 'vue'
-import { useMwanConfig } from '@/composables/useMwanConfig'
-
-export interface Form {
-  name: string
-  assignedPolicy: string
-  sourceAddress: string
-  destinationAddress: string
-  destinationPort: string
-  protocol: string
-}
+import type { Ref } from 'vue'
+import { computed, ref, watch } from 'vue'
+import type { Policy, Rule } from '@/composables/useMwan'
+import { MessageBag, validateIp4Cidr, validatePortRange, validateRequired } from '@/lib/validation'
 
-export function useRuleForm() {
+export function useRuleForm(policies: Ref<Policy[]>, rule?: Ref<Rule | undefined>) {
   const { t } = useI18n()
 
   const protocolOptions: NeComboboxOption[] = [
@@ -38,16 +31,98 @@ export function useRuleForm() {
     }
   ]
 
-  const { error, loading, policies } = useMwanConfig()
-
-  const policyOptions = computed((): NeComboboxOption[] => {
+  const policyDropdownOptions = computed((): NeComboboxOption[] => {
     return policies.value.map((policy) => {
       return {
         id: policy.name,
-        label: policy.name
+        label: policy.label ?? policy.name
       }
     })
   })
 
-  return { protocolOptions, policyOptions, error, loading }
+  const policyDropdownPlaceholder = computed((): string => {
+    if (policyDropdownOptions.value.length < 3) {
+      return t('standalone.multi_wan.select_policy')
+    }
+    return policyDropdownOptions.value.map((option) => option.label).join(', ') + ',...'
+  })
+
+  watch(
+    () => rule?.value,
+    () => {
+      if (rule?.value != undefined) {
+        name.value = rule.value.label ?? ''
+        policy.value = rule.value.policy.name
+        protocol.value = rule.value.protocol ?? protocolOptions[0].id
+        sourceAddress.value = rule.value.source_address ?? ''
+        sourcePort.value = rule.value.source_port ?? ''
+        destinationAddress.value = rule.value.destination_address ?? ''
+        destinationPort.value = rule.value.destination_port ?? ''
+      }
+    }
+  )
+
+  const name = ref('')
+  const policy = ref('')
+  const protocol = ref('')
+  const sourceAddress = ref('')
+  const sourcePort = ref('')
+  const destinationAddress = ref('')
+  const destinationPort = ref('')
+
+  const validationErrors = ref(new MessageBag())
+
+  function isValid() {
+    validationErrors.value.clear()
+    let validationCheck = validateRequired(name.value)
+    if (!validationCheck.valid) {
+      validationErrors.value.set('name', t(String(validationCheck.errMessage)))
+    }
+    validationCheck = validateRequired(policy.value)
+    if (!validationCheck.valid) {
+      validationErrors.value.set('policy', t(String(validationCheck.errMessage)))
+    }
+    if (sourceAddress.value != '') {
+      validationCheck = validateIp4Cidr(sourceAddress.value)
+      if (!validationCheck.valid) {
+        validationErrors.value.set('source_address', t(String(validationCheck.errMessage)))
+      }
+    }
+    if (destinationAddress.value != '') {
+      validationCheck = validateIp4Cidr(destinationAddress.value)
+      if (!validationCheck.valid) {
+        validationErrors.value.set('destination_address', t(String(validationCheck.errMessage)))
+      }
+    }
+    if (protocol.value == 'tcp' || protocol.value == 'udp') {
+      if (sourcePort.value != '') {
+        validationCheck = validatePortRange(sourcePort.value)
+        if (!validationCheck.valid) {
+          validationErrors.value.set('source_port', t(String(validationCheck.errMessage)))
+        }
+      }
+      if (destinationPort.value != '') {
+        validationCheck = validatePortRange(destinationPort.value)
+        if (!validationCheck.valid) {
+          validationErrors.value.set('destination_port', t(String(validationCheck.errMessage)))
+        }
+      }
+    }
+    return validationErrors.value.size < 1
+  }
+
+  return {
+    protocolOptions,
+    policyDropdownOptions,
+    policyDropdownPlaceholder,
+    name,
+    policy,
+    protocol,
+    sourceAddress,
+    sourcePort,
+    destinationAddress,
+    destinationPort,
+    validationErrors,
+    isValid
+  }
 }
diff --git a/src/lib/fontawesome.ts b/src/lib/fontawesome.ts
index c52994211..2ea0a0195 100644
--- a/src/lib/fontawesome.ts
+++ b/src/lib/fontawesome.ts
@@ -4,7 +4,9 @@ import {
   faArrowRight,
   faArrowsRotate,
   faPowerOff,
-  faHouse as fasHouse
+  faCircleStop,
+  faHouse as fasHouse,
+  faUserGear
 } from '@fortawesome/free-solid-svg-icons'
 import { faHouse as falHouse } from '@nethesis/nethesis-light-svg-icons'
 import { faServer as fasServer } from '@fortawesome/free-solid-svg-icons'
@@ -127,4 +129,6 @@ export async function loadFontAwesome(app: any) {
   library.add(faClone)
   library.add(faAngleUp)
   library.add(faAngleDown)
+  library.add(faUserGear)
+  library.add(faCircleStop)
 }
diff --git a/src/lib/validation.ts b/src/lib/validation.ts
index 129e036fe..ce8f32aac 100644
--- a/src/lib/validation.ts
+++ b/src/lib/validation.ts
@@ -200,15 +200,33 @@ export const validateVlanId = (value: String): validationOutput => {
   return { valid: true }
 }
 
-export const validatePort = (value: String): validationOutput => {
-  const port = Number(value)
+export function validatePort(value: string, minPort = 1, maxPort = 65565): validationOutput {
+  const port = Number.parseInt(value)
 
-  if (isNaN(port) || !Number.isInteger(port) || port < 0 || port > 65535) {
+  if (Number.isNaN(port) || port < minPort || port > maxPort) {
     return { valid: false, errMessage: 'error.invalid_port' }
   }
   return { valid: true }
 }
 
+export function validatePortRange(value: string, minRange = 1, maxRange = 65565): validationOutput {
+  let strings: string[]
+  if (value.indexOf(',')) {
+    strings = value.split(',')
+  } else if (value.indexOf('-')) {
+    strings = value.split('-')
+  } else {
+    strings = [value]
+  }
+  for (const port of strings) {
+    const validation = validatePort(port, minRange, maxRange)
+    if (!validation.valid) {
+      return { valid: false, errMessage: 'error.invalid_port_range' }
+    }
+  }
+  return { valid: true }
+}
+
 export const validateRequiredOption = (value: NeComboboxOption[]): validationOutput => {
   if (value.length == 0) {
     return { valid: false, errMessage: 'error.required_option' }
@@ -220,7 +238,10 @@ export const validateRequiredOption = (value: NeComboboxOption[]): validationOut
  * Extends Map class to provide a name-array for errors
  */
 export class MessageBag extends Map<string, Array<string>> {
-  set(key: string, value: Array<string>): this {
+  set(key: string, value: Array<string> | string): this {
+    if (typeof value === 'string') {
+      value = [value]
+    }
     if (!this.has(key)) {
       super.set(key, new Array<string>())
     }