diff --git a/client/src/pages/firewall/DestinationNATRules.vue b/client/src/pages/firewall/DestinationNATRules.vue
index 683efea..f9f59ce 100644
--- a/client/src/pages/firewall/DestinationNATRules.vue
+++ b/client/src/pages/firewall/DestinationNATRules.vue
@@ -34,6 +34,17 @@ async function deleteRule(){
   load();
 }
 
+async function draggedRow(draggedRow: number, draggedOverRow: number) {
+  console.log("dragged", draggedRow, draggedOverRow);
+  let res = await apiCall("Firewall.MoveDestinationNATRule", {index: draggedRow, to_index: draggedOverRow});
+  if (res.Error === null) {
+    console.debug("deleted rule");
+  } else {
+    console.debug("error", res);
+  }
+  load();
+}
+
 onMounted(async() => {
   load();
 });
@@ -42,7 +53,7 @@ onMounted(async() => {
 
 <template>
   <div>
-      <TableView title="DNAT Rules" :columns="columns" :loading="loading" v-model:selection="selection" v-model:data="rules" :table-props="{sort:true, sortSelf: true, dragable: true}">
+      <TableView title="DNAT Rules" :columns="columns" :loading="loading" @draggedRow="draggedRow" v-model:selection="selection" v-model:data="rules" :table-props="{sort:true, sortSelf: true, draggable: true}">
       <button @click="load">Refresh</button>
       <button @click="load">Create</button>
       <button @click="load" :disabled="selection.length != 1">Edit</button>
diff --git a/client/src/pages/firewall/ForwardRules.vue b/client/src/pages/firewall/ForwardRules.vue
index 17a845e..7fc6103 100644
--- a/client/src/pages/firewall/ForwardRules.vue
+++ b/client/src/pages/firewall/ForwardRules.vue
@@ -35,6 +35,17 @@ async function deleteRule(){
   load();
 }
 
+async function draggedRow(draggedRow: number, draggedOverRow: number) {
+  console.log("dragged", draggedRow, draggedOverRow);
+  let res = await apiCall("Firewall.MoveForwardRule", {index: draggedRow, to_index: draggedOverRow});
+  if (res.Error === null) {
+    console.debug("deleted rule");
+  } else {
+    console.debug("error", res);
+  }
+  load();
+}
+
 onMounted(async() => {
   load();
 });
@@ -43,7 +54,7 @@ onMounted(async() => {
 
 <template>
   <div>
-      <TableView title="Forward Rules" :columns="columns" :loading="loading" v-model:selection="selection" v-model:data="rules" :table-props="{sort:true, sortSelf: true, dragable: true}">
+      <TableView title="Forward Rules" :columns="columns" :loading="loading" @draggedRow="draggedRow" v-model:selection="selection" v-model:data="rules" :table-props="{sort:true, sortSelf: true, draggable: true}">
       <button @click="load">Refresh</button>
       <button @click="load">Create</button>
       <button @click="load" :disabled="selection.length != 1">Edit</button>
diff --git a/client/src/pages/firewall/SourceNATRules.vue b/client/src/pages/firewall/SourceNATRules.vue
index fa92cee..c96e121 100644
--- a/client/src/pages/firewall/SourceNATRules.vue
+++ b/client/src/pages/firewall/SourceNATRules.vue
@@ -34,6 +34,17 @@ async function deleteRule(){
   load();
 }
 
+async function draggedRow(draggedRow: number, draggedOverRow: number) {
+  console.log("dragged", draggedRow, draggedOverRow);
+  let res = await apiCall("Firewall.MoveSourceNATRule", {index: draggedRow, to_index: draggedOverRow});
+  if (res.Error === null) {
+    console.debug("deleted rule");
+  } else {
+    console.debug("error", res);
+  }
+  load();
+}
+
 onMounted(async() => {
   load();
 });
@@ -42,7 +53,7 @@ onMounted(async() => {
 
 <template>
   <div>
-      <TableView title="DNAT Rules" :columns="columns" :loading="loading" v-model:selection="selection" v-model:data="rules" :table-props="{sort:true, sortSelf: true, dragable: true}">
+      <TableView title="SNAT Rules" :columns="columns" :loading="loading" @draggedRow="draggedRow" v-model:selection="selection" v-model:data="rules" :table-props="{sort:true, sortSelf: true, draggable: true}">
       <button @click="load">Refresh</button>
       <button @click="load">Create</button>
       <button @click="load" :disabled="selection.length != 1">Edit</button>