diff --git a/client/src/components/display/ArrayDisplay.vue b/client/src/components/display/ArrayDisplay.vue
index 1c45383..c28caf8 100644
--- a/client/src/components/display/ArrayDisplay.vue
+++ b/client/src/components/display/ArrayDisplay.vue
@@ -3,33 +3,25 @@ const props = withDefaults(defineProps<{
   data: any[],
   component?: string,
   componentProp?: '',
-  ellipsis?: number
+  ellipsis?: number,
+  empty?: string
 }>(), {
   data: () => [],
   component: '',
   componentProp: '',
-  ellipsis: 2,
+  ellipsis: 10,
+  empty: '',
 });
-
-
 </script>
 <template>
-  <div class="pillbar">
+  <div v-if="props.data.length != 0" class="pillstack">
     <div v-for="(item, index) of props.data.slice(0, ellipsis)" :key="index" class="pill">
       <component v-bind="{[props.componentProp]: item}" :is="props.component" v-if="props.component !== ''"/>
       <template v-else>{{ item }}</template>
     </div>
     <div v-if="props.data.length >= props.ellipsis" class="pill">...</div>
   </div>
+  <div v-else>
+    {{ props.empty }}
+  </div>
 </template>
-<style scoped>
-  .pillbar {
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 0.25rem;
-  }
-  .pill {
-    border: 1px solid var(--cl-fg);
-    padding: 0.25rem;
-  }
-</style>
\ No newline at end of file
diff --git a/client/src/components/display/ElementDisplay.vue b/client/src/components/display/ElementDisplay.vue
new file mode 100644
index 0000000..30e9a76
--- /dev/null
+++ b/client/src/components/display/ElementDisplay.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  data: any,
+  component?: string,
+  componentProp?: '',
+}>(), {
+  data: '',
+  component: '',
+  componentProp: '',
+});
+</script>
+<template>
+  <div v-if="data" class="pillbar">
+    <div class="pill">
+      <component v-bind="{[props.componentProp]: props.data}" :is="props.component" v-if="props.component !== ''"/>
+      <template v-else>{{ props.data }}</template>
+    </div>
+  </div>
+</template>
diff --git a/client/src/components/display/EnumTypeDisplay.vue b/client/src/components/display/EnumTypeDisplay.vue
new file mode 100644
index 0000000..659e6b3
--- /dev/null
+++ b/client/src/components/display/EnumTypeDisplay.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { variantOf } from '~/util';
+
+const props = withDefaults(defineProps<{
+  data: object | string,
+}>(), {
+  data: '',
+});
+</script>
+<template>
+  {{ variantOf(props.data) }}
+</template>
diff --git a/client/src/components/display/NiceTable.vue b/client/src/components/display/NiceTable.vue
index 10b31a0..4100b00 100644
--- a/client/src/components/display/NiceTable.vue
+++ b/client/src/components/display/NiceTable.vue
@@ -108,7 +108,10 @@ function dragDropRow() {
     data.splice(draggedRow, 1);
     data.splice(draggedOverRow, 0, row);
     data = data;
-    emit('draggedRow', draggedRow, draggedOverRow);
+    // Don't emit if we are at the same spot
+    if (draggedRow !== draggedOverRow){
+      emit('draggedRow', draggedRow, draggedOverRow);
+    }
   }
 
   // Reset Drag & Remove Selection
@@ -160,4 +163,4 @@ function dragDropRow() {
 .dragged-over-after { border-bottom: 0.25rem solid var(--cl-fg); }
 
 tr { cursor: grab; }
-</style>
\ No newline at end of file
+</style>
diff --git a/client/src/components/input/EnumInput.vue b/client/src/components/input/EnumInput.vue
index 1c859ae..c079ecd 100644
--- a/client/src/components/input/EnumInput.vue
+++ b/client/src/components/input/EnumInput.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { Index, MaybeIndex, equals } from '../../util';
+import { Index, MaybeIndex, equals, variantOf } from '../../util';
 import { Fields } from './NicerForm.vue';
 
 export type Variant = {
@@ -34,7 +34,7 @@ const emit = defineEmits<{
 }>();
 
 // Local Variables for Two-Way bindings
-let modelValue: MaybeEnumValue = $ref(null);
+let modelValue = $ref(null as MaybeEnumValue);
 // Sync from v-model
 onMounted(() => {
   watch(() => props.modelValue, (val) => {
@@ -49,8 +49,14 @@ onMounted(() => {
   }, { deep: true, immediate: true });
 });
 // Sync to v-model
-watch($$(modelValue), (val) => {
+watch($$(modelValue), (val, oldVal) => {
   if (equals(val, props.modelValue)) return;
+  const [oldVariant, newVariant] = [variantOf(oldVal), variantOf(val)];
+  // Wipe variant values if variant definitions change
+  if (typeof val === 'object'
+    && val && newVariant && oldVariant
+    && !equals(props.variants[newVariant].fields, props.variants[oldVariant].fields))
+    val[newVariant] = formValue = {};
   emit('update:modelValue', typeof val === 'string' ? val : Object.assign({}, val));
 }, { deep: true });
 
@@ -88,4 +94,4 @@ watchEffect(() => {
   border: 1px solid var(--cl-fg);
   padding: calc(0.25rem - 1px);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/client/src/global-styles/components.css b/client/src/global-styles/components.css
index bcee1c8..95e1746 100644
--- a/client/src/global-styles/components.css
+++ b/client/src/global-styles/components.css
@@ -120,4 +120,21 @@ tbody tr:hover, th:hover {
 
 tbody tr.selected {
   background-color: var(--cl-table-sl)
+}
+
+.pillbar {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.pillstack {
+  align-content: flex-start;
+  align-items: flex-start;
+  gap: 0.25rem;
+}
+
+.pill {
+  border: 1px solid var(--cl-fg);
+  padding: 0.25rem;
 }
\ No newline at end of file
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..18c0bb4 100644
--- a/client/src/pages/firewall/forward_rules.vue
+++ b/client/src/pages/firewall/forward_rules.vue
@@ -15,6 +15,7 @@ const columns = [
   { heading: 'Service', path: 'services', component: markRaw(ArrayDisplay), componentProp: 'data' },
   { heading: 'Verdict', path: 'verdict' },
   { heading: 'Counter', path: 'counter' },
+  { heading: 'Log', path: 'log' },
   { heading: 'Comment', path: 'comment' },
 ];
 
@@ -59,11 +60,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>
diff --git a/client/src/pages/network/interfaces.vue b/client/src/pages/network/interfaces.vue
index 2afd9d3..ba2b810 100644
--- a/client/src/pages/network/interfaces.vue
+++ b/client/src/pages/network/interfaces.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 EnumTypeDisplay from '~/components/display/EnumTypeDisplay.vue';
 const p = getPlugins();
 
 let interfaces = $ref({});
@@ -9,10 +11,15 @@ let selection = $ref([] as number[]);
 
 const columns = [
   { heading: 'Name', path: 'name' },
-  { heading: 'Type', path: 'type' },
-  { heading: 'Members', path: 'members' },
-  { heading: 'Addressing Mode', path: 'addressing_mode' },
-  { heading: 'Address', path: 'address' },
+  { heading: 'Alias', path: 'alias' },
+  { heading: 'Type', path: 'interface_type', component: markRaw(EnumTypeDisplay), componentProp: 'data' },
+  { heading: 'Addressing Mode', path: 'addressing_mode', component: markRaw(EnumTypeDisplay), componentProp: 'data' },
+  { heading: 'Address', path: 'addressing_mode.static.address' },
+  { heading: 'Vlan Parent', path: 'interface_type.vlan.parent' },
+  { heading: 'Vlan ID', path: 'interface_type.vlan.id' },
+  { heading: 'Bond Members', path: 'interface_type.bond.members', component: markRaw(ArrayDisplay), componentProp: 'data' },
+  { heading: 'Bridge Members', path: 'interface_type.bridge.members', component: markRaw(ArrayDisplay), componentProp: 'data' },
+  { heading: 'Comment', path: 'comment' },
 ];
 
 const displayData = $computed(() => {
@@ -21,7 +28,8 @@ const displayData = $computed(() => {
   for (const index in interfaces) {
     data.push({
       name: interfaces[index].name,
-      type: interfaces[index].type,
+      alias: interfaces[index].alias,
+      interface_type: interfaces[index].interface_type,
       addressing_mode: interfaces[index].addressing_mode,
       address: interfaces[index].address,
       comment: interfaces[index].comment,
@@ -69,4 +77,4 @@ onMounted(async() => {
     <button :disabled="selection.length != 1" @click="editInterface">Edit</button>
     <button :disabled="selection.length != 1" @click="deleteInterface">Delete</button>
   </TableView>
-</template>
\ No newline at end of file
+</template>
diff --git a/client/src/pages/object/addresses.vue b/client/src/pages/object/addresses.vue
index 5af55dc..894909a 100644
--- a/client/src/pages/object/addresses.vue
+++ b/client/src/pages/object/addresses.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { apiCall } from '../../api';
 import getPlugins from '../../plugins';
+import EnumTypeDisplay from '~/components/display/EnumTypeDisplay.vue';
 const p = getPlugins();
 
 let addresses = $ref([]);
@@ -9,7 +10,7 @@ let selection = $ref([] as number[]);
 
 const columns = [
   { heading: 'Name', path: 'name' },
-  { heading: 'Type', path: 'type' },
+  { heading: 'Type', path: 'type', component: markRaw(EnumTypeDisplay), componentProp: 'data' },
   { heading: 'Value', path: 'value' },
   { heading: 'Comment', path: 'comment' },
 ];
@@ -33,7 +34,7 @@ const displayData = $computed(() => {
     data.push({
       name: addresses[index].name,
       value: getAddressValue(addresses[index]),
-      type: addresses[index].type,
+      type: addresses[index].address_type,
       comment: addresses[index].comment,
     });
   }
@@ -42,7 +43,7 @@ const displayData = $computed(() => {
 
 function getAddressValue(s: any): string {
   let value: string;
-  switch (s.type) {
+  switch (s.address_type) {
   case 'host':
     value = s.host;
     break;
@@ -88,4 +89,4 @@ onMounted(async() => {
     <button :disabled="selection.length != 1" @click="editAddress">Edit</button>
     <button :disabled="selection.length != 1" @click="deleteAddress">Delete</button>
   </TableView>
-</template>
\ No newline at end of file
+</template>
diff --git a/client/src/pages/object/services.vue b/client/src/pages/object/services.vue
index f34e586..5801255 100644
--- a/client/src/pages/object/services.vue
+++ b/client/src/pages/object/services.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { apiCall } from '../../api';
 import getPlugins from '../../plugins';
+import EnumTypeDisplay from '~/components/display/EnumTypeDisplay.vue';
 const p = getPlugins();
 
 let services = $ref({});
@@ -9,7 +10,7 @@ let selection = $ref([] as number[]);
 
 const columns = [
   { heading: 'Name', path: 'name' },
-  { heading: 'Type', path: 'type' },
+  { heading: 'Type', path: 'type', component: markRaw(EnumTypeDisplay), componentProp: 'data' },
   { heading: 'Value', path: 'value' },
   { heading: 'Comment', path: 'comment' },
 ];
@@ -91,4 +92,4 @@ onMounted(async() => {
     <button :disabled="selection.length != 1" @click="editService">Edit</button>
     <button :disabled="selection.length != 1" @click="deleteService">Delete</button>
   </TableView>
-</template>
\ No newline at end of file
+</template>
diff --git a/client/src/pages/service/dhcp_servers.vue b/client/src/pages/service/dhcp_servers.vue
index 3725b76..cf59670 100644
--- a/client/src/pages/service/dhcp_servers.vue
+++ b/client/src/pages/service/dhcp_servers.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { apiCall } from '../../api';
 import getPlugins from '../../plugins';
+import ArrayDisplay from '~/components/display/ArrayDisplay.vue';
 const p = getPlugins();
 
 let servers = $ref([]);
@@ -9,6 +10,7 @@ let selection = $ref([] as number[]);
 
 const columns = [
   { heading: 'Interface', path: 'interface' },
+  { heading: 'Pool', path: 'pool', component: markRaw(ArrayDisplay), componentProp: 'data' },
   { heading: 'Comment', path: 'comment' },
 ];
 
@@ -48,4 +50,4 @@ onMounted(async() => {
       <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/vpn/wireguard.interfaces.vue b/client/src/pages/vpn/wireguard.interfaces.vue
index e8557ca..81e220e 100644
--- a/client/src/pages/vpn/wireguard.interfaces.vue
+++ b/client/src/pages/vpn/wireguard.interfaces.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { apiCall } from '../../api';
 import getPlugins from '../../plugins';
+import ArrayDisplay from '~/components/display/ArrayDisplay.vue';
 const p = getPlugins();
 
 let interfaces = $ref({});
@@ -10,7 +11,7 @@ let selection = $ref([] as number[]);
 const columns = [
   { heading: 'Name', path: 'name' },
   { heading: 'Listen Port', path: 'listen_port' },
-  { heading: 'Peers', path: 'peers' },
+  { heading: 'Peers', path: 'peers', component: markRaw(ArrayDisplay), componentProp: 'data' },
   { heading: 'Comment', path: 'comment' },
 
 ];
@@ -68,4 +69,4 @@ onMounted(async() => {
     <button :disabled="selection.length != 1" @click="editInterface">Edit</button>
     <button :disabled="selection.length != 1" @click="deleteInterface">Delete</button>
   </TableView>
-</template>
\ No newline at end of file
+</template>
diff --git a/client/src/pages/vpn/wireguard.peers.vue b/client/src/pages/vpn/wireguard.peers.vue
index 55bc357..0ab2d5f 100644
--- a/client/src/pages/vpn/wireguard.peers.vue
+++ b/client/src/pages/vpn/wireguard.peers.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { apiCall } from '../../api';
 import getPlugins from '../../plugins';
+import ArrayDisplay from '~/components/display/ArrayDisplay.vue';
 const p = getPlugins();
 
 let peers = $ref({});
@@ -9,7 +10,7 @@ let selection = $ref([] as number[]);
 
 const columns = [
   { heading: 'Name', path: 'name' },
-  { heading: 'Allowed IPs', path: 'allowed_ips' },
+  { heading: 'Allowed IPs', path: 'allowed_ips', component: markRaw(ArrayDisplay), componentProp: 'data' },
   { heading: 'Endpoint', path: 'endpoint' },
   { heading: 'Persistent Keepalive', path: 'persistent_keepalive' },
   { heading: 'Comment', path: 'comment' },
diff --git a/client/src/util.ts b/client/src/util.ts
index 59b0c60..03c100b 100644
--- a/client/src/util.ts
+++ b/client/src/util.ts
@@ -16,6 +16,7 @@ export function isNullish(value: any) {
 }
 
 export function variantOf(enumValue: any) {
+  if (enumValue === null) return null;
   if (typeof enumValue === 'string') return enumValue;
   else return Object.entries(enumValue)[0][0];
 }