diff --git a/client/src/pages/firewall/destination_nat_rules.vue b/client/src/pages/firewall/destination_nat_rules.vue
index 8543ad0..35b62f9 100644
--- a/client/src/pages/firewall/destination_nat_rules.vue
+++ b/client/src/pages/firewall/destination_nat_rules.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { apiCall } from '../../api';
 import getPlugins from '../../plugins';
+import ArrayDisplay from '~/components/display/ArrayDisplay.vue';
+import ElementDisplay from '~/components/display/ElementDisplay.vue';
 const p = getPlugins();
 
 let rules = $ref([]);
@@ -9,11 +11,11 @@ let selection = $ref([] as number[]);
 
 const columns = [
   { heading: 'Name', path: 'name' },
-  { heading: 'Source', path: 'source_addresses' },
-  { heading: 'Destination', path: 'destination_addresses' },
-  { heading: 'Service', path: 'services' },
-  { heading: 'Translated Address', path: 'dnat_address' },
-  { heading: 'Translated Service', path: 'dnat_service' },
+  { heading: 'Source', path: 'source_addresses', component: markRaw(ArrayDisplay), componentProp: 'data' },
+  { heading: 'Destination', path: 'destination_addresses', component: markRaw(ArrayDisplay), componentProp: 'data' },
+  { heading: 'Service', path: 'services', component: markRaw(ArrayDisplay), componentProp: 'data' },
+  { heading: 'Translated Address', path: 'dnat_address', component: markRaw(ElementDisplay), componentProp: 'data' },
+  { heading: 'Translated Service', path: 'dnat_service', component: markRaw(ElementDisplay), componentProp: 'data' },
   { heading: 'Counter', path: 'counter' },
   { heading: 'Comment', path: 'comment' },
 ];
@@ -59,11 +61,11 @@ onMounted(async() => {
 
 <template>
   <div>
-    <TableView v-model:selection="selection" v-model:data="rules" title="DNAT Rules" :columns="columns" :loading="loading" :table-props="{sort:true, sortSelf: true, draggable: true}" @dragged-row="draggedRow">
+    <TableView v-model:selection="selection" v-model:data="rules" title="DNAT Rules" :columns="columns" :loading="loading" :table-props="{draggable: true}" @dragged-row="draggedRow">
       <button @click="load">Refresh</button>
       <router-link class="button" to="/firewall/destination_nat_rules/edit">Create</router-link>
       <router-link class="button" :class="{ disabled: selection.length != 1 }" :to="'/firewall/destination_nat_rules/edit/' + selection[0]">Edit</router-link>
       <button :disabled="selection.length != 1" @click="deleteRule">Delete</button>
     </TableView>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/client/src/pages/firewall/forward_rules.vue b/client/src/pages/firewall/forward_rules.vue
index d3ec441..ea31e8c 100644
--- a/client/src/pages/firewall/forward_rules.vue
+++ b/client/src/pages/firewall/forward_rules.vue
@@ -59,11 +59,11 @@ onMounted(async() => {
 
 <template>
   <div>
-    <TableView v-model:selection="selection" v-model:data="rules" title="Forward Rules" :columns="columns" :loading="loading" :table-props="{sort:true, sortSelf: true, draggable: true}" @dragged-row="draggedRow">
+    <TableView v-model:selection="selection" v-model:data="rules" title="Forward Rules" :columns="columns" :loading="loading" :table-props="{draggable: true}" @dragged-row="draggedRow">
       <button @click="load">Refresh</button>
       <router-link class="button" to="/firewall/forward_rules/edit">Create</router-link>
       <router-link class="button" :class="{ disabled: selection.length != 1 }" :to="'/firewall/forward_rules/edit/' + selection[0]">Edit</router-link>
       <button :disabled="selection.length != 1" @click="deleteRule">Delete</button>
     </TableView>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/client/src/pages/firewall/source_nat_rules.vue b/client/src/pages/firewall/source_nat_rules.vue
index 84b9973..fba25d5 100644
--- a/client/src/pages/firewall/source_nat_rules.vue
+++ b/client/src/pages/firewall/source_nat_rules.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { apiCall } from '../../api';
 import getPlugins from '../../plugins';
+import ArrayDisplay from '~/components/display/ArrayDisplay.vue';
+import ElementDisplay from '~/components/display/ElementDisplay.vue';
+import EnumTypeDisplay from '~/components/display/EnumTypeDisplay.vue';
+
 const p = getPlugins();
 
 let rules = $ref([]);
@@ -9,11 +13,12 @@ let selection = $ref([] as number[]);
 
 const columns = [
   { heading: 'Name', path: 'name' },
-  { heading: 'Source', path: 'source_addresses' },
-  { heading: 'Destination', path: 'destination_addresses' },
-  { heading: 'Service', path: 'services' },
-  { heading: 'Translated Address', path: 'snat_type.snat.address' },
-  { heading: 'Translated Service', path: 'snat_type.snat.service' },
+  { heading: 'Source', path: 'source_addresses', component: markRaw(ArrayDisplay), componentProp: 'data' },
+  { heading: 'Destination', path: 'destination_addresses', component: markRaw(ArrayDisplay), componentProp: 'data' },
+  { heading: 'Service', path: 'services', component: markRaw(ArrayDisplay), componentProp: 'data' },
+  { heading: 'Type', path: 'snat_type', component: markRaw(EnumTypeDisplay), componentProp: 'data' },
+  { heading: 'Translated Address', path: 'snat_type.snat.address', component: markRaw(ElementDisplay), componentProp: 'data' },
+  { heading: 'Translated Service', path: 'snat_type.snat.service', component: markRaw(ElementDisplay), componentProp: 'data' },
   { heading: 'Counter', path: 'counter' },
   { heading: 'Comment', path: 'comment' },
 ];
@@ -59,11 +64,11 @@ onMounted(async() => {
 
 <template>
   <div>
-    <TableView v-model:selection="selection" v-model:data="rules" title="SNAT Rules" :columns="columns" :loading="loading" :table-props="{sort:true, sortSelf: true, draggable: true}" @dragged-row="draggedRow">
+    <TableView v-model:selection="selection" v-model:data="rules" title="SNAT Rules" :columns="columns" :loading="loading" :table-props="{draggable: true}" @dragged-row="draggedRow">
       <button @click="load">Refresh</button>
       <router-link class="button" to="/firewall/source_nat_rules/edit">Create</router-link>
       <router-link class="button" :class="{ disabled: selection.length != 1 }" :to="'/firewall/source_nat_rules/edit/' + selection[0]">Edit</router-link>
       <button :disabled="selection.length != 1" @click="deleteRule">Delete</button>
     </TableView>
   </div>
-</template>
\ No newline at end of file
+</template>