diff --git a/client/src/App.vue b/client/src/App.vue
index 94459f2..3892b31 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -6,13 +6,17 @@ import IDashboard from '~icons/ri/dashboard-2-line';
 import IRule from '~icons/material-symbols/rule-folder-outline-sharp';
 import IAddress from '~icons/eos-icons/ip';
 import IService from '~icons/material-symbols/home-repair-service';
+import ISNAT from '~icons/mdi/arrow-expand-right';
+import IDNAT from '~icons/mdi/arrow-collapse-right';
 
 enum NavState { Open, Reduced, Collapsed };
 const NavStateCount = 3;
 let navState = $ref(NavState.Open);
 const navRoutes = {
   "/": { icon: IDashboard, caption: "Dashboard" },
-  "/firewall/rules": { icon: IRule, caption: "Rules" },
+  "/firewall/forwardrules": { icon: IRule, caption: "Rules" },
+  "/firewall/sourcenatrules": { icon: ISNAT, caption: "SNAT" },
+  "/firewall/destinationnatrules": { icon: IDNAT, caption: "DNAT" },
   "/object/addresses": { icon: IAddress, caption: "Addresses" },
   "/object/services": { icon: IService, caption: "Services" },
 };
diff --git a/client/src/pages/firewall/DestinationNATRules.vue b/client/src/pages/firewall/DestinationNATRules.vue
new file mode 100644
index 0000000..c64ef70
--- /dev/null
+++ b/client/src/pages/firewall/DestinationNATRules.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { apiCall } from "../../api";
+
+let rules = $ref([]);
+const columns = [
+  {heading: 'Name', path: 'name'},
+  {heading: 'Source', path: 'match.source_addresses'},
+  {heading: 'Destination', path: 'match.destination_addresses'},
+  {heading: 'Service', path: 'match.services'},
+  {heading: 'Verdict', path: 'verdict'},
+  {heading: 'Counter', path: 'counter'},
+  {heading: 'Comment', path: 'comment'},
+];
+
+async function loadRules(){
+  let res = await apiCall("Firewall.GetDestinationNATRules", {});
+  if (res.Error === null) {
+    rules = res.Data.DestinationNATRules;
+    console.debug("rules", rules);
+  } else {
+    console.debug("error", res);
+  }
+}
+
+onMounted(async() => {
+  loadRules();
+});
+
+</script>
+
+<template>
+  <div>
+    <PageHeader title="DNAT Rules">
+      <button @click="loadRules">Load Rules</button>
+    </PageHeader>
+    <NiceTable :columns="columns" v-model:data="rules"/>
+  </div>
+</template>
\ No newline at end of file
diff --git a/client/src/pages/firewall/Rules.vue b/client/src/pages/firewall/ForwardRules.vue
similarity index 100%
rename from client/src/pages/firewall/Rules.vue
rename to client/src/pages/firewall/ForwardRules.vue
diff --git a/client/src/pages/firewall/SourceNATRules.vue b/client/src/pages/firewall/SourceNATRules.vue
new file mode 100644
index 0000000..3b8c6bd
--- /dev/null
+++ b/client/src/pages/firewall/SourceNATRules.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { apiCall } from "../../api";
+
+let rules = $ref([]);
+const columns = [
+  {heading: 'Name', path: 'name'},
+  {heading: 'Source', path: 'match.source_addresses'},
+  {heading: 'Destination', path: 'match.destination_addresses'},
+  {heading: 'Service', path: 'match.services'},
+  {heading: 'Verdict', path: 'verdict'},
+  {heading: 'Counter', path: 'counter'},
+  {heading: 'Comment', path: 'comment'},
+];
+
+async function loadRules(){
+  let res = await apiCall("Firewall.GetSourceNATRules", {});
+  if (res.Error === null) {
+    rules = res.Data.SourceNATRules;
+    console.debug("rules", rules);
+  } else {
+    console.debug("error", res);
+  }
+}
+
+onMounted(async() => {
+  loadRules();
+});
+
+</script>
+
+<template>
+  <div>
+    <PageHeader title="SNAT Rules">
+      <button @click="loadRules">Load Rules</button>
+    </PageHeader>
+    <NiceTable :columns="columns" v-model:data="rules"/>
+  </div>
+</template>
\ No newline at end of file