diff --git a/client/src/pages/firewall/DestinationNATRules.vue b/client/src/pages/firewall/DestinationNATRules.vue
index da0390b..683efea 100644
--- a/client/src/pages/firewall/DestinationNATRules.vue
+++ b/client/src/pages/firewall/DestinationNATRules.vue
@@ -2,6 +2,9 @@
 import { apiCall } from "../../api";
 
 let rules = $ref([]);
+let loading = $ref(false);
+let selection = $ref([] as number[]);
+
 const columns = [
   {heading: 'Name', path: 'name'},
   {heading: 'Source', path: 'match.source_addresses'},
@@ -11,27 +14,39 @@ const columns = [
   {heading: 'Comment', path: 'comment'},
 ];
 
-async function loadRules(){
+async function load(){
   let res = await apiCall("Firewall.GetDestinationNATRules", {});
   if (res.Error === null) {
-    rules = res.Data.DestinationNATRules;
+    rules = res.Data.destination_nat_rules;
     console.debug("rules", rules);
   } else {
     console.debug("error", res);
   }
 }
 
+async function deleteRule(){
+  let res = await apiCall("Firewall.DeleteDestinationNATRule", {index: selection[0]});
+  if (res.Error === null) {
+    console.debug("deleted rule");
+  } else {
+    console.debug("error", res);
+  }
+  load();
+}
+
 onMounted(async() => {
-  loadRules();
+  load();
 });
 
 </script>
 
 <template>
   <div>
-    <PageHeader title="DNAT Rules">
-      <button @click="loadRules">Load Rules</button>
-    </PageHeader>
-    <NiceTable :columns="columns" v-model:data="rules" draggable="true"/>
+      <TableView title="DNAT Rules" :columns="columns" :loading="loading" v-model:selection="selection" v-model:data="rules" :table-props="{sort:true, sortSelf: true, dragable: true}">
+      <button @click="load">Refresh</button>
+      <button @click="load">Create</button>
+      <button @click="load" :disabled="selection.length != 1">Edit</button>
+      <button @click="deleteRule" :disabled="selection.length != 1">Delete</button>
+    </TableView>
   </div>
 </template>
\ No newline at end of file
diff --git a/client/src/pages/firewall/ForwardRules.vue b/client/src/pages/firewall/ForwardRules.vue
index 5b8866c..17a845e 100644
--- a/client/src/pages/firewall/ForwardRules.vue
+++ b/client/src/pages/firewall/ForwardRules.vue
@@ -2,6 +2,9 @@
 import { apiCall } from "../../api";
 
 let rules = $ref([]);
+let loading = $ref(false);
+let selection = $ref([] as number[]);
+
 const columns = [
   {heading: 'Name', path: 'name'},
   {heading: 'Source', path: 'match.source_addresses'},
@@ -12,27 +15,39 @@ const columns = [
   {heading: 'Comment', path: 'comment'},
 ];
 
-async function loadRules(){
+async function load(){
   let res = await apiCall("Firewall.GetForwardRules", {});
   if (res.Error === null) {
-    rules = res.Data.ForwardRules;
+    rules = res.Data.forward_rules;
     console.debug("rules", rules);
   } else {
     console.debug("error", res);
   }
 }
 
+async function deleteRule(){
+  let res = await apiCall("Firewall.DeleteForwardRule", {index: selection[0]});
+  if (res.Error === null) {
+    console.debug("deleted rule");
+  } else {
+    console.debug("error", res);
+  }
+  load();
+}
+
 onMounted(async() => {
-  loadRules();
+  load();
 });
 
 </script>
 
 <template>
   <div>
-    <PageHeader title="Forward Rules">
-      <button @click="loadRules">Load Rules</button>
-    </PageHeader>
-    <NiceTable :columns="columns" v-model:data="rules" draggable="true"/>
+      <TableView title="Forward Rules" :columns="columns" :loading="loading" v-model:selection="selection" v-model:data="rules" :table-props="{sort:true, sortSelf: true, dragable: true}">
+      <button @click="load">Refresh</button>
+      <button @click="load">Create</button>
+      <button @click="load" :disabled="selection.length != 1">Edit</button>
+      <button @click="deleteRule" :disabled="selection.length != 1">Delete</button>
+    </TableView>
   </div>
 </template>
\ No newline at end of file
diff --git a/client/src/pages/firewall/SourceNATRules.vue b/client/src/pages/firewall/SourceNATRules.vue
index 7659253..fa92cee 100644
--- a/client/src/pages/firewall/SourceNATRules.vue
+++ b/client/src/pages/firewall/SourceNATRules.vue
@@ -2,6 +2,9 @@
 import { apiCall } from "../../api";
 
 let rules = $ref([]);
+let loading = $ref(false);
+let selection = $ref([] as number[]);
+
 const columns = [
   {heading: 'Name', path: 'name'},
   {heading: 'Source', path: 'match.source_addresses'},
@@ -11,27 +14,39 @@ const columns = [
   {heading: 'Comment', path: 'comment'},
 ];
 
-async function loadRules(){
+async function load(){
   let res = await apiCall("Firewall.GetSourceNATRules", {});
   if (res.Error === null) {
-    rules = res.Data.SourceNATRules;
+    rules = res.Data.source_nat_rules;
     console.debug("rules", rules);
   } else {
     console.debug("error", res);
   }
 }
 
+async function deleteRule(){
+  let res = await apiCall("Firewall.DeleteSourceNATRule", {index: selection[0]});
+  if (res.Error === null) {
+    console.debug("deleted rule");
+  } else {
+    console.debug("error", res);
+  }
+  load();
+}
+
 onMounted(async() => {
-  loadRules();
+  load();
 });
 
 </script>
 
 <template>
   <div>
-    <PageHeader title="SNAT Rules">
-      <button @click="loadRules">Load Rules</button>
-    </PageHeader>
-    <NiceTable :columns="columns" v-model:data="rules" draggable="true"/>
+      <TableView title="DNAT Rules" :columns="columns" :loading="loading" v-model:selection="selection" v-model:data="rules" :table-props="{sort:true, sortSelf: true, dragable: true}">
+      <button @click="load">Refresh</button>
+      <button @click="load">Create</button>
+      <button @click="load" :disabled="selection.length != 1">Edit</button>
+      <button @click="deleteRule" :disabled="selection.length != 1">Delete</button>
+    </TableView>
   </div>
 </template>
\ No newline at end of file