diff --git a/client/src/App.vue b/client/src/App.vue
index 64110e0..19f5150 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -34,7 +34,7 @@ const navRoutesNew = [
     { caption: 'Rules', icon: IRule, href: '/firewall/forward_rules' },
     { caption: 'SNAT', icon: ISNAT, href: '/firewall/source_nat_rules' },
     { caption: 'DNAT', icon: IDNAT, href: '/firewall/destination_nat_rules' },
-  ]},
+  ] },
   { caption: 'Network', icon: INetwork, children: [
     { caption: 'Interfaces', icon: IEthernet, href: '/network/interfaces' },
     { caption: 'Static Routes', icon: IStaticRoutes, href: '/network/static_routes' },
@@ -53,7 +53,7 @@ const navRoutesNew = [
       { caption: 'Status', icon: IDashboard, href: '/vpn/wireguard_status' },
       { caption: 'Interfaces', icon: IEthernet, href: '/vpn/wireguard.interfaces' },
       { caption: 'Peers', icon: INodes, href: '/vpn/wireguard.peers' },
-    ]},
+    ] },
   ] },
   { caption: 'Users', icon: IUser, href: '/system/users' },
   { caption: 'Config', icon: IConfig, href: '/config/config' },
diff --git a/client/src/api.ts b/client/src/api.ts
index b28f66f..4e142b7 100644
--- a/client/src/api.ts
+++ b/client/src/api.ts
@@ -20,7 +20,7 @@ export async function apiCall(method: string, params: Record<string, any>): Prom
     console.debug('[API] Calling ', method, params, pResult);
     const result = await pResult;
     console.debug('[API] Response', method, result);
-    return { Data: result, Error: null};
+    return { Data: result, Error: null };
   } catch (ex: any){
     if (ex.code === 401) {
       UnauthorizedCallback();
@@ -28,33 +28,33 @@ export async function apiCall(method: string, params: Record<string, any>): Prom
       $toast.error(`${method }: ${  ex.message}`);
       console.debug('[API] Error   ', method, ex);
     }
-    return { Data: null, Error: ex};
+    return { Data: null, Error: ex };
   }
 }
 
 export async function authenticate(username: string, password: string): Promise<any> {
-  const pResponse = axios.post('/login', { username, password }, {timeout: 10100});
+  const pResponse = axios.post('/login', { username, password }, { timeout: 10100 });
   try {
     const response = await pResponse;
     // Dont log this as the user password is inside: console.debug(response);
-    return { data: response.data, error: null};
+    return { data: response.data, error: null };
   } catch (error) {
-    return { data: null, error: error};
+    return { data: null, error: error };
   }
 }
 
 export async function logout(): Promise<any> {
-  const pResponse = axios.post('/logout', null, {timeout: 10100});
+  const pResponse = axios.post('/logout', null, { timeout: 10100 });
   try {
     const response = await pResponse;
-    return { data: response.data, error: null};
+    return { data: response.data, error: null };
   } catch (error) {
-    return { data: null, error: error};
+    return { data: null, error: error };
   }
 }
 
 export async function checkAuthentication() {
-  const pResponse = axios.post('/session', null, {timeout: 10100});
+  const pResponse = axios.post('/session', null, { timeout: 10100 });
   try {
     const response = await pResponse;
     const last_hash = window.localStorage.getItem('commit_hash');
@@ -65,11 +65,11 @@ export async function checkAuthentication() {
         window.location.reload();
       }
     } else window.localStorage.setItem('commit_hash', response.data.commit_hash);
-    return {auth: 2, error: null};
+    return { auth: 2, error: null };
   } catch (error: any) {
     if (error.response.status == 401) {
-      return {auth: 0, error: null};
+      return { auth: 0, error: null };
     }
-    return {auth: 0, error: error};
+    return { auth: 0, error: error };
   }
 }
\ No newline at end of file
diff --git a/client/src/components/display/NiceTable.vue b/client/src/components/display/NiceTable.vue
index 8b865b9..10b31a0 100644
--- a/client/src/components/display/NiceTable.vue
+++ b/client/src/components/display/NiceTable.vue
@@ -85,7 +85,7 @@ function toggleRowSelection(index: number) {
   else if (shiftState) { // Selection becomes a range including the highest, lowest and clicked row
     const points = [Math.max(...selection), Math.min(...selection), index];
     const [max, min] = [Math.max(...points), Math.min(...points)];
-    selection = Array.from({length: max - min + 1}, (_, i) => i + min);
+    selection = Array.from({ length: max - min + 1 }, (_, i) => i + min);
   } else if (ctrlState) // Toggle the presence of the row in the selection
     selection = selection.includes(index)
       ? selection.filter(i => i !== index)
diff --git a/client/src/components/input/DropdownInput.vue b/client/src/components/input/DropdownInput.vue
index 52a2e29..86bf7c4 100644
--- a/client/src/components/input/DropdownInput.vue
+++ b/client/src/components/input/DropdownInput.vue
@@ -103,7 +103,7 @@ watch($$(search), async (val, oldVal) => {
 
 async function performSearch(unknownKeys?: Index[]) {
   if (searchProvider !== null)
-    options = await searchProvider({search, unknownKeys});
+    options = await searchProvider({ search, unknownKeys });
 }
 
 async function expand() {
diff --git a/client/src/definitions.ts b/client/src/definitions.ts
index f0bdb00..138fab7 100644
--- a/client/src/definitions.ts
+++ b/client/src/definitions.ts
@@ -57,18 +57,18 @@ const GetPeers: SearchProvider = async (o) => {
 };
 
 const PortDefinition: Object = {
-  'any': { display: 'Any'},
+  'any': { display: 'Any' },
   'single': {
     display: 'Single',
     fields: {
-      port: { is: 'NumberBox', label: 'Port'},
+      port: { is: 'NumberBox', label: 'Port' },
     },
   },
   'range': {
     display: 'Range',
     fields: {
-      start_port: { is: 'NumberBox', label: 'Start Port'},
-      end_port: { is: 'NumberBox', label: 'End Port'},
+      start_port: { is: 'NumberBox', label: 'Start Port' },
+      end_port: { is: 'NumberBox', label: 'End Port' },
     },
   },
 };
@@ -80,55 +80,55 @@ export const editTypes: { [key: string]: { [key: string]: any } } = {
       name: 'Forward Rule',
       idType: 'Number',
       fields: {
-        name: { is: 'TextBox', label: 'Name'},
-        source_addresses: { is: 'MultiSelect', label: 'Source', props: { searchProvider: GetAddresses}},
-        destination_addresses: { is: 'MultiSelect', label: 'Destination', props: { searchProvider: GetAddresses}},
-        services: { is: 'MultiSelect', label: 'Services', props: { searchProvider: GetServices}},
+        name: { is: 'TextBox', label: 'Name' },
+        source_addresses: { is: 'MultiSelect', label: 'Source', props: { searchProvider: GetAddresses } },
+        destination_addresses: { is: 'MultiSelect', label: 'Destination', props: { searchProvider: GetAddresses } },
+        services: { is: 'MultiSelect', label: 'Services', props: { searchProvider: GetServices } },
         verdict: { is: 'EnumInput', label: 'Verdict', props: { variants: {
-          'accept': { display: 'Accept'},
-          'drop': { display: 'Drop'},
-          'continue': { display: 'Continue'},
-        }}},
-        counter: { is: 'CheckBox', label: 'Counter'},
-        comment: { is: 'MultilineTextBox', label: 'Comment'},
+          'accept': { display: 'Accept' },
+          'drop': { display: 'Drop' },
+          'continue': { display: 'Continue' },
+        } } },
+        counter: { is: 'CheckBox', label: 'Counter' },
+        comment: { is: 'MultilineTextBox', label: 'Comment' },
       },
     },
     'destination_nat_rules': {
       name: 'Destination NAT Rule',
       idType: 'Number',
       fields: {
-        name: { is: 'TextBox', label: 'Name'},
-        source_addresses: { is: 'MultiSelect', label: 'Source', props: { searchProvider: GetAddresses}},
-        destination_addresses: { is: 'MultiSelect', label: 'Destination', props: { searchProvider: GetAddresses}},
-        services: { is: 'MultiSelect', label: 'Services', props: { searchProvider: GetServices}},
-        dnat_heading: { is: 'Heading', props: { caption: 'DNAT' }},
-        dnat_address: { is: 'SingleSelect', label: 'Destination', props: { searchProvider: GetAddresses}},
-        dnat_service: { is: 'SingleSelect', label: 'Service', props: { searchProvider: GetServices}},
-        counter: { is: 'CheckBox', label: 'Counter'},
-        comment: { is: 'MultilineTextBox', label: 'Comment'},
+        name: { is: 'TextBox', label: 'Name' },
+        source_addresses: { is: 'MultiSelect', label: 'Source', props: { searchProvider: GetAddresses } },
+        destination_addresses: { is: 'MultiSelect', label: 'Destination', props: { searchProvider: GetAddresses } },
+        services: { is: 'MultiSelect', label: 'Services', props: { searchProvider: GetServices } },
+        dnat_heading: { is: 'Heading', props: { caption: 'DNAT' } },
+        dnat_address: { is: 'SingleSelect', label: 'Destination', props: { searchProvider: GetAddresses } },
+        dnat_service: { is: 'SingleSelect', label: 'Service', props: { searchProvider: GetServices } },
+        counter: { is: 'CheckBox', label: 'Counter' },
+        comment: { is: 'MultilineTextBox', label: 'Comment' },
       },
     },
     'source_nat_rules': {
       name: 'Source NAT Rule',
       idType: 'Number',
       fields: {
-        name: { is: 'TextBox', label: 'Name'},
-        source_addresses: { is: 'MultiSelect', label: 'Source', props: { searchProvider: GetAddresses}},
-        destination_addresses: { is: 'MultiSelect', label: 'Destination', props: { searchProvider: GetAddresses}},
-        services: { is: 'MultiSelect', label: 'Services', props: { searchProvider: GetServices}},
-        snat_heading: { is: 'Heading', props: { caption: 'SNAT' }},
+        name: { is: 'TextBox', label: 'Name' },
+        source_addresses: { is: 'MultiSelect', label: 'Source', props: { searchProvider: GetAddresses } },
+        destination_addresses: { is: 'MultiSelect', label: 'Destination', props: { searchProvider: GetAddresses } },
+        services: { is: 'MultiSelect', label: 'Services', props: { searchProvider: GetServices } },
+        snat_heading: { is: 'Heading', props: { caption: 'SNAT' } },
         snat_type: { is: 'EnumInput', label: 'Type', props: { variants: {
           'masquerade': { display: 'Masquerade' },
           'snat': {
             display: 'SNAT',
             fields: {
-              address: { is: 'SingleSelect', label: 'Source', props: { searchProvider: GetAddresses}},
-              service: { is: 'SingleSelect', label: 'Service', props: { searchProvider: GetServices}},
+              address: { is: 'SingleSelect', label: 'Source', props: { searchProvider: GetAddresses } },
+              service: { is: 'SingleSelect', label: 'Service', props: { searchProvider: GetServices } },
             },
           },
-        }}},
-        counter: { is: 'CheckBox', label: 'Counter'},
-        comment: { is: 'MultilineTextBox', label: 'Comment'},
+        } } },
+        counter: { is: 'CheckBox', label: 'Counter' },
+        comment: { is: 'MultilineTextBox', label: 'Comment' },
       },
     },
   },
@@ -137,58 +137,58 @@ export const editTypes: { [key: string]: { [key: string]: any } } = {
     'interfaces': {
       name: 'Interface',
       fields: {
-        name: { is: 'TextBox', label: 'Name'},
-        alias: { is: 'TextBox', label: 'Alias'},
+        name: { is: 'TextBox', label: 'Name' },
+        alias: { is: 'TextBox', label: 'Alias' },
         interface_type: { is: 'EnumInput', label: 'Type', props: { variants: {
           'hardware': {
             display: 'Hardware',
             fields: {
-              device: { is: 'SingleSelect', label: 'Device', props: { searchProvider: GetHardwareInterfaces }},
+              device: { is: 'SingleSelect', label: 'Device', props: { searchProvider: GetHardwareInterfaces } },
             },
           },
           'vlan': {
             display: 'VLAN',
             fields: {
-              parent: { is: 'SingleSelect', label: 'VLAN Parent', props: { searchProvider: GetInterfaces}},
-              id: { is: 'NumberBox', label: 'VLAN ID', props: { min: 1, max: 4094 }},
+              parent: { is: 'SingleSelect', label: 'VLAN Parent', props: { searchProvider: GetInterfaces } },
+              id: { is: 'NumberBox', label: 'VLAN ID', props: { min: 1, max: 4094 } },
             },
           },
           'bond': {
             display: 'Bond',
             fields: {
-              members: { is: 'MultiSelect', label: 'Members', props: { searchProvider: GetInterfaces}},
+              members: { is: 'MultiSelect', label: 'Members', props: { searchProvider: GetInterfaces } },
             },
           },
           'bridge': {
             display: 'Bridge',
             fields: {
-              members: { is: 'MultiSelect', label: 'Members', props: { searchProvider: GetInterfaces}},
+              members: { is: 'MultiSelect', label: 'Members', props: { searchProvider: GetInterfaces } },
             },
           },
-        }}},
+        } } },
         addressing_mode: { is: 'EnumInput', label: 'Addressing Mode', props: { variants: {
           'none': { display: 'None' },
           'static': {
             display: 'Static',
             fields: {
-              address: { is: 'TextBox', label: 'Address'},
+              address: { is: 'TextBox', label: 'Address' },
             },
           },
           'dhcp': { display: 'DHCP' },
-        }}},
-        comment: { is: 'MultilineTextBox', label: 'Comment'},
+        } } },
+        comment: { is: 'MultilineTextBox', label: 'Comment' },
       },
     },
     'static_routes': {
       name: 'Static Route',
       idType: 'Number',
       fields: {
-        name: { is: 'TextBox', label: 'Name'},
-        interface: { is: 'SingleSelect', label: 'Interface', props: { searchProvider: GetInterfaces} },
-        gateway: { is: 'TextBox', label: 'Gateway'},
-        destination: { is: 'TextBox', label: 'Destination'},
-        metric: { is: 'NumberBox', label: 'Metric'},
-        comment: { is: 'MultilineTextBox', label: 'Comment'},
+        name: { is: 'TextBox', label: 'Name' },
+        interface: { is: 'SingleSelect', label: 'Interface', props: { searchProvider: GetInterfaces } },
+        gateway: { is: 'TextBox', label: 'Gateway' },
+        destination: { is: 'TextBox', label: 'Destination' },
+        metric: { is: 'NumberBox', label: 'Metric' },
+        comment: { is: 'MultilineTextBox', label: 'Comment' },
       },
     },
   },
@@ -197,69 +197,69 @@ export const editTypes: { [key: string]: { [key: string]: any } } = {
     'addresses': {
       name: 'Address',
       fields: {
-        name: { is: 'TextBox', label: 'Name'},
+        name: { is: 'TextBox', label: 'Name' },
         address_type: { is: 'EnumInput', label: 'Type', props: { variants: {
           'host': {
             display: 'Host',
             fields: {
-              address: { is: 'TextBox', label: 'Address'},
+              address: { is: 'TextBox', label: 'Address' },
             },
           },
           'range': {
             display: 'Range',
             fields: {
-              range: { is: 'TextBox', label: 'Range'},
+              range: { is: 'TextBox', label: 'Range' },
             },
           },
           'network': {
             display: 'Network',
             fields: {
-              network: { is: 'TextBox', label: 'Network'},
+              network: { is: 'TextBox', label: 'Network' },
             },
           },
           'group': {
             display: 'Group',
             fields: {
-              members: { is: 'MultiSelect', label: 'Members', props: { searchProvider: GetAddresses}},
+              members: { is: 'MultiSelect', label: 'Members', props: { searchProvider: GetAddresses } },
             },
           },
-        }}},
-        comment: { is: 'MultilineTextBox', label: 'Comment'},
+        } } },
+        comment: { is: 'MultilineTextBox', label: 'Comment' },
       },
     },
     'services': {
       name: 'Service',
       fields: {
-        name: { is: 'TextBox', label: 'Name'},
+        name: { is: 'TextBox', label: 'Name' },
         service_type: { is: 'EnumInput', label: 'Type', props: { variants: {
           'tcp': {
             display: 'TCP',
             fields: {
-              source: { is: 'EnumInput', label: 'Source', props: { variants: PortDefinition }},
-              destination: { is: 'EnumInput', label: 'Destination', props: { variants: PortDefinition }},
+              source: { is: 'EnumInput', label: 'Source', props: { variants: PortDefinition } },
+              destination: { is: 'EnumInput', label: 'Destination', props: { variants: PortDefinition } },
             },
           },
           'udp': {
             display: 'UDP',
             fields: {
-              source: { is: 'EnumInput', label: 'Source', props: { variants: PortDefinition }},
-              destination: { is: 'EnumInput', label: 'Destination', props: { variants: PortDefinition }},
+              source: { is: 'EnumInput', label: 'Source', props: { variants: PortDefinition } },
+              destination: { is: 'EnumInput', label: 'Destination', props: { variants: PortDefinition } },
             },
           },
           'icmp': {
             display: 'ICMP',
             fields: {
-              icmp_code: { is: 'NumberBox', label: 'ICMP Code'},
+              icmp_code: { is: 'NumberBox', label: 'ICMP Code' },
             },
           },
           'group': {
             display: 'Group',
             fields: {
-              members: { is: 'MultiSelect', label: 'Members', props: { searchProvider: GetServices}},
+              members: { is: 'MultiSelect', label: 'Members', props: { searchProvider: GetServices } },
             },
           },
-        }}},
-        comment: { is: 'MultilineTextBox', label: 'Comment'},
+        } } },
+        comment: { is: 'MultilineTextBox', label: 'Comment' },
       },
     },
   },
@@ -269,59 +269,59 @@ export const editTypes: { [key: string]: { [key: string]: any } } = {
       name: 'DHCP Server',
       idType: 'Number',
       fields: {
-        name: { is: 'TextBox', label: 'Name'},
-        interface: { is: 'SingleSelect', label: 'Interface', props: { searchProvider: GetInterfaces} },
-        pool: { is: 'MultiSelect', label: 'Pool', props: { searchProvider: GetAddresses} },
+        name: { is: 'TextBox', label: 'Name' },
+        interface: { is: 'SingleSelect', label: 'Interface', props: { searchProvider: GetInterfaces } },
+        pool: { is: 'MultiSelect', label: 'Pool', props: { searchProvider: GetAddresses } },
         gateway_mode: { is: 'EnumInput', label: 'Gateway Mode', props: { variants: {
           'none': { display: 'None' },
           'interface': { display: 'Interface' },
           'specify': {
             display: 'Specify',
             fields: {
-              gateway: { is: 'SingleSelect', label: 'Gateway', props: { searchProvider: GetAddresses} },
+              gateway: { is: 'SingleSelect', label: 'Gateway', props: { searchProvider: GetAddresses } },
             },
           },
-        }}},
+        } } },
         dns_server_mode: { is: 'EnumInput', label: 'DNS Server Mode', props: { variants: {
           'none': { display: 'None' },
           'interface': { display: 'Interface' },
           'specify': {
             display: 'Specify',
             fields: {
-              dns_servers: { is: 'MultiSelect', label: 'DNS Servers', props: { searchProvider: GetAddresses} },
+              dns_servers: { is: 'MultiSelect', label: 'DNS Servers', props: { searchProvider: GetAddresses } },
             },
           },
-        }}},
+        } } },
         ntp_server_mode: { is: 'EnumInput', label: 'NTP Server Mode', props: { variants: {
           'none': { display: 'None' },
           'interface': { display: 'Interface' },
           'specify': {
             display: 'Specify',
             fields: {
-              ntp_servers: { is: 'MultiSelect', label: 'NTP Servers', props: { searchProvider: GetAddresses} },
+              ntp_servers: { is: 'MultiSelect', label: 'NTP Servers', props: { searchProvider: GetAddresses } },
             },
           },
-        }}},
-        lease_time: { is: 'NumberBox', label: 'Lease Time'},
-        comment: { is: 'MultilineTextBox', label: 'Comment'},
+        } } },
+        lease_time: { is: 'NumberBox', label: 'Lease Time' },
+        comment: { is: 'MultilineTextBox', label: 'Comment' },
       },
     },
     'ntp_servers': {
       name: 'NTP Server',
       idType: 'Number',
       fields: {
-        name: { is: 'TextBox', label: 'Name'},
-        interface: { is: 'SingleSelect', label: 'Interface', props: { searchProvider: GetInterfaces} },
-        comment: { is: 'MultilineTextBox', label: 'Comment'},
+        name: { is: 'TextBox', label: 'Name' },
+        interface: { is: 'SingleSelect', label: 'Interface', props: { searchProvider: GetInterfaces } },
+        comment: { is: 'MultilineTextBox', label: 'Comment' },
       },
     },
     'dns_servers': {
       name: 'DNS Server',
       idType: 'Number',
       fields: {
-        name: { is: 'TextBox', label: 'Name'},
-        interface: { is: 'SingleSelect', label: 'Interface', props: { searchProvider: GetInterfaces} },
-        comment: { is: 'MultilineTextBox', label: 'Comment'},
+        name: { is: 'TextBox', label: 'Name' },
+        interface: { is: 'SingleSelect', label: 'Interface', props: { searchProvider: GetInterfaces } },
+        comment: { is: 'MultilineTextBox', label: 'Comment' },
       },
     },
   },
@@ -330,24 +330,24 @@ export const editTypes: { [key: string]: { [key: string]: any } } = {
     'wireguard.interfaces': {
       name: 'Wireguard Interface',
       fields: {
-        name: { is: 'TextBox', label: 'Name'},
-        public_key: { is: 'TextBox', label: 'Public Key'},
-        private_key: { is: 'TextBox', label: 'Private Key'},
-        listen_port: { is: 'NumberBox', label: 'Listen Port'},
-        peers: { is: 'MultiSelect', label: 'Peers', props: { searchProvider: GetPeers} },
-        comment: { is: 'MultilineTextBox', label: 'Comment'},
+        name: { is: 'TextBox', label: 'Name' },
+        public_key: { is: 'TextBox', label: 'Public Key' },
+        private_key: { is: 'TextBox', label: 'Private Key' },
+        listen_port: { is: 'NumberBox', label: 'Listen Port' },
+        peers: { is: 'MultiSelect', label: 'Peers', props: { searchProvider: GetPeers } },
+        comment: { is: 'MultilineTextBox', label: 'Comment' },
       },
     },
     'wireguard.peers': {
       name: 'Wireguard Peer',
       fields: {
-        name: { is: 'TextBox', label: 'Name'},
-        public_key: { is: 'TextBox', label: 'Public Key'},
-        preshared_key: { is: 'TextBox', label: 'Preshared Key'},
-        allowed_ips: { is: 'MultiSelect', label: 'Allowed IPs', props: { searchProvider: GetAddresses} },
-        endpoint: { is: 'TextBox', label: 'Endpoint'},
-        persistent_keepalive: { is: 'NumberBox', label: 'Persistent Keepalive'},
-        comment: { is: 'MultilineTextBox', label: 'Comment'},
+        name: { is: 'TextBox', label: 'Name' },
+        public_key: { is: 'TextBox', label: 'Public Key' },
+        preshared_key: { is: 'TextBox', label: 'Preshared Key' },
+        allowed_ips: { is: 'MultiSelect', label: 'Allowed IPs', props: { searchProvider: GetAddresses } },
+        endpoint: { is: 'TextBox', label: 'Endpoint' },
+        persistent_keepalive: { is: 'NumberBox', label: 'Persistent Keepalive' },
+        comment: { is: 'MultilineTextBox', label: 'Comment' },
       },
     },
   },
@@ -356,9 +356,9 @@ export const editTypes: { [key: string]: { [key: string]: any } } = {
     'users': {
       name: 'User',
       fields: {
-        name: { is: 'TextBox', label: 'Name'},
-        password: { is: 'TextBox', label: 'Password'},
-        comment: { is: 'MultilineTextBox', label: 'Comment'},
+        name: { is: 'TextBox', label: 'Name' },
+        password: { is: 'TextBox', label: 'Password' },
+        comment: { is: 'MultilineTextBox', label: 'Comment' },
       },
     },
   },
diff --git a/client/src/pages/[subsystem]/[entity]/edit/[id].vue b/client/src/pages/[subsystem]/[entity]/edit/[id].vue
index fdadcd3..ae132cf 100644
--- a/client/src/pages/[subsystem]/[entity]/edit/[id].vue
+++ b/client/src/pages/[subsystem]/[entity]/edit/[id].vue
@@ -14,9 +14,9 @@ async function load(){
   loading = true;
   let res: any;
   if (editTypes[subsystem][entity].idType == 'Number') {
-    res = await apiCall(`${subsystem}.${entity}.get`, {index: id as number - 0});
+    res = await apiCall(`${subsystem}.${entity}.get`, { index: id as number - 0 });
   } else {
-    res = await apiCall(`${subsystem}.${entity}.get`, {name: id});
+    res = await apiCall(`${subsystem}.${entity}.get`, { name: id });
   }
 
   if (res.Error === null) {
@@ -33,15 +33,15 @@ async function update() {
   let res: any;
 
   if (editTypes[subsystem][entity].idType == 'Number') {
-    res = await apiCall(`${subsystem}.${entity}.update`, {index: id as number - 0, thing: vm});
+    res = await apiCall(`${subsystem}.${entity}.update`, { index: id as number - 0, thing: vm });
   } else {
     if (id != vm.name) {
       if (confirm('You are about to Change the name and all references, are you Sure?')) {
-        res = await apiCall(`${subsystem}.${entity}.update`, {name: id, thing: vm});
+        res = await apiCall(`${subsystem}.${entity}.update`, { name: id, thing: vm });
       }
 
     } else {
-      res = await apiCall(`${subsystem}.${entity}.update`, {name: id, thing: vm});
+      res = await apiCall(`${subsystem}.${entity}.update`, { name: id, thing: vm });
     }
   }
 
diff --git a/client/src/pages/config/config.vue b/client/src/pages/config/config.vue
index 10f11b4..20144b6 100644
--- a/client/src/pages/config/config.vue
+++ b/client/src/pages/config/config.vue
@@ -8,9 +8,9 @@ let changelog = $ref([]);
 let loading = $ref(false);
 
 const columns = [
-  {heading: 'Path', path: 'path'},
-  {heading: 'Action', path: 'action'},
-  {heading: 'ID', path: 'id'},
+  { heading: 'Path', path: 'path' },
+  { heading: 'Action', path: 'action' },
+  { heading: 'ID', path: 'id' },
 ];
 
 const displayData = $computed(() => {
diff --git a/client/src/pages/firewall/destination_nat_rules.vue b/client/src/pages/firewall/destination_nat_rules.vue
index 79cbc2f..8543ad0 100644
--- a/client/src/pages/firewall/destination_nat_rules.vue
+++ b/client/src/pages/firewall/destination_nat_rules.vue
@@ -8,14 +8,14 @@ let loading = $ref(false);
 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: 'Counter', path: 'counter'},
-  {heading: 'Comment', path: 'comment'},
+  { 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: 'Counter', path: 'counter' },
+  { heading: 'Comment', path: 'comment' },
 ];
 
 async function load(){
@@ -29,7 +29,7 @@ async function load(){
 }
 
 async function deleteRule(){
-  let res = await apiCall('firewall.destination_nat_rules.delete', {id: selection[0]});
+  let res = await apiCall('firewall.destination_nat_rules.delete', { id: selection[0] });
   if (res.Error === null) {
     console.debug('deleted rule');
     p.toast.success('Deleted Rule');
@@ -41,7 +41,7 @@ async function deleteRule(){
 
 async function draggedRow(draggedRow: number, draggedOverRow: number) {
   console.log('dragged', draggedRow, draggedOverRow);
-  let res = await apiCall('firewall.destination_nat_rules.move', {index: draggedRow, to_index: draggedOverRow});
+  let res = await apiCall('firewall.destination_nat_rules.move', { index: draggedRow, to_index: draggedOverRow });
   if (res.Error === null) {
     console.debug('moved rule');
     p.toast.success('Moved Rule');
diff --git a/client/src/pages/firewall/forward_rules.vue b/client/src/pages/firewall/forward_rules.vue
index c9fa10e..d3ec441 100644
--- a/client/src/pages/firewall/forward_rules.vue
+++ b/client/src/pages/firewall/forward_rules.vue
@@ -9,13 +9,13 @@ let loading = $ref(false);
 let selection = $ref([] as number[]);
 
 const columns = [
-  {heading: 'Name', path: 'name'},
-  {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: 'Verdict', path: 'verdict'},
-  {heading: 'Counter', path: 'counter'},
-  {heading: 'Comment', path: 'comment'},
+  { heading: 'Name', path: 'name' },
+  { 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: 'Verdict', path: 'verdict' },
+  { heading: 'Counter', path: 'counter' },
+  { heading: 'Comment', path: 'comment' },
 ];
 
 async function load(){
@@ -29,7 +29,7 @@ async function load(){
 }
 
 async function deleteRule(){
-  let res = await apiCall('firewall.forward_rules.delete', {id: selection[0]});
+  let res = await apiCall('firewall.forward_rules.delete', { id: selection[0] });
   if (res.Error === null) {
     console.debug('deleted rule');
     p.toast.success('Deleted Rule');
@@ -41,7 +41,7 @@ async function deleteRule(){
 
 async function draggedRow(draggedRow: number, draggedOverRow: number) {
   console.log('dragged', draggedRow, draggedOverRow);
-  let res = await apiCall('firewall.forward_rules.move', {index: draggedRow, to_index: draggedOverRow});
+  let res = await apiCall('firewall.forward_rules.move', { index: draggedRow, to_index: draggedOverRow });
   if (res.Error === null) {
     console.debug('moved rule');
     p.toast.success('Moved Rule');
diff --git a/client/src/pages/firewall/source_nat_rules.vue b/client/src/pages/firewall/source_nat_rules.vue
index d570bd1..84b9973 100644
--- a/client/src/pages/firewall/source_nat_rules.vue
+++ b/client/src/pages/firewall/source_nat_rules.vue
@@ -8,14 +8,14 @@ let loading = $ref(false);
 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: 'Counter', path: 'counter'},
-  {heading: 'Comment', path: 'comment'},
+  { 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: 'Counter', path: 'counter' },
+  { heading: 'Comment', path: 'comment' },
 ];
 
 async function load(){
@@ -29,7 +29,7 @@ async function load(){
 }
 
 async function deleteRule(){
-  let res = await apiCall('firewall.source_nat_rules.delete', {id: selection[0]});
+  let res = await apiCall('firewall.source_nat_rules.delete', { id: selection[0] });
   if (res.Error === null) {
     console.debug('deleted rule');
     p.toast.success('Deleted Rule');
@@ -41,7 +41,7 @@ async function deleteRule(){
 
 async function draggedRow(draggedRow: number, draggedOverRow: number) {
   console.log('dragged', draggedRow, draggedOverRow);
-  let res = await apiCall('firewall.source_nat_rules.move', {index: draggedRow, to_index: draggedOverRow});
+  let res = await apiCall('firewall.source_nat_rules.move', { index: draggedRow, to_index: draggedOverRow });
   if (res.Error === null) {
     console.debug('moved rule');
     p.toast.success('Moved Rule');
diff --git a/client/src/pages/network/interfaces.vue b/client/src/pages/network/interfaces.vue
index 4fb5fd6..2afd9d3 100644
--- a/client/src/pages/network/interfaces.vue
+++ b/client/src/pages/network/interfaces.vue
@@ -8,11 +8,11 @@ let loading = $ref(false);
 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: 'Name', path: 'name' },
+  { heading: 'Type', path: 'type' },
+  { heading: 'Members', path: 'members' },
+  { heading: 'Addressing Mode', path: 'addressing_mode' },
+  { heading: 'Address', path: 'address' },
 ];
 
 const displayData = $computed(() => {
@@ -43,7 +43,7 @@ async function load(){
 }
 
 async function deleteInterface(){
-  let res = await apiCall('network.interfaces.delete', {name: displayData[selection[0]].name});
+  let res = await apiCall('network.interfaces.delete', { name: displayData[selection[0]].name });
   if (res.Error === null) {
     console.debug('deleted interface');
   } else {
diff --git a/client/src/pages/network/static_routes.vue b/client/src/pages/network/static_routes.vue
index e6e1382..44a88ac 100644
--- a/client/src/pages/network/static_routes.vue
+++ b/client/src/pages/network/static_routes.vue
@@ -6,11 +6,11 @@ let loading = $ref(false);
 let selection = $ref([] as number[]);
 
 const columns = [
-  {heading: 'Name', path: 'name'},
-  {heading: 'Interface', path: 'interface'},
-  {heading: 'Gateway', path: 'gateway'},
-  {heading: 'Destination', path: 'destination'},
-  {heading: 'Metric', path: 'metric'},
+  { heading: 'Name', path: 'name' },
+  { heading: 'Interface', path: 'interface' },
+  { heading: 'Gateway', path: 'gateway' },
+  { heading: 'Destination', path: 'destination' },
+  { heading: 'Metric', path: 'metric' },
 ];
 
 async function load(){
@@ -26,7 +26,7 @@ async function load(){
 }
 
 async function deleteStaticRoutes(){
-  let res = await apiCall('network.static_routes.delete', {id: selection[0]});
+  let res = await apiCall('network.static_routes.delete', { id: selection[0] });
   if (res.Error === null) {
     console.debug('deleted static routes');
   } else {
diff --git a/client/src/pages/object/addresses.vue b/client/src/pages/object/addresses.vue
index 9349d35..5af55dc 100644
--- a/client/src/pages/object/addresses.vue
+++ b/client/src/pages/object/addresses.vue
@@ -8,10 +8,10 @@ let loading = $ref(false);
 let selection = $ref([] as number[]);
 
 const columns = [
-  {heading: 'Name', path: 'name'},
-  {heading: 'Type', path: 'type'},
-  {heading: 'Value', path: 'value'},
-  {heading: 'Comment', path: 'comment'},
+  { heading: 'Name', path: 'name' },
+  { heading: 'Type', path: 'type' },
+  { heading: 'Value', path: 'value' },
+  { heading: 'Comment', path: 'comment' },
 ];
 
 async function load(){
@@ -62,7 +62,7 @@ function getAddressValue(s: any): string {
 }
 
 async function deleteAddress(){
-  let res = await apiCall('object.addresses_delete', {id: displayData[selection[0]].name});
+  let res = await apiCall('object.addresses_delete', { id: displayData[selection[0]].name });
   if (res.Error === null) {
     console.debug('deleted address');
   } else {
diff --git a/client/src/pages/object/services.vue b/client/src/pages/object/services.vue
index 491986d..f34e586 100644
--- a/client/src/pages/object/services.vue
+++ b/client/src/pages/object/services.vue
@@ -8,10 +8,10 @@ let loading = $ref(false);
 let selection = $ref([] as number[]);
 
 const columns = [
-  {heading: 'Name', path: 'name'},
-  {heading: 'Type', path: 'type'},
-  {heading: 'Value', path: 'value'},
-  {heading: 'Comment', path: 'comment'},
+  { heading: 'Name', path: 'name' },
+  { heading: 'Type', path: 'type' },
+  { heading: 'Value', path: 'value' },
+  { heading: 'Comment', path: 'comment' },
 ];
 
 const displayData = $computed(() => {
@@ -65,7 +65,7 @@ async function load(){
 }
 
 async function deleteService(){
-  let res = await apiCall('object.services.delete', {name: displayData[selection[0]].name});
+  let res = await apiCall('object.services.delete', { name: displayData[selection[0]].name });
   if (res.Error === null) {
     console.debug('deleted service');
   } else {
diff --git a/client/src/pages/service/dhcp_servers.vue b/client/src/pages/service/dhcp_servers.vue
index 7249a7c..3725b76 100644
--- a/client/src/pages/service/dhcp_servers.vue
+++ b/client/src/pages/service/dhcp_servers.vue
@@ -8,8 +8,8 @@ let loading = $ref(false);
 let selection = $ref([] as number[]);
 
 const columns = [
-  {heading: 'Interface', path: 'interface'},
-  {heading: 'Comment', path: 'comment'},
+  { heading: 'Interface', path: 'interface' },
+  { heading: 'Comment', path: 'comment' },
 ];
 
 async function load(){
@@ -23,7 +23,7 @@ async function load(){
 }
 
 async function deleteRule(){
-  let res = await apiCall('service.dhcp_servers.delete', {index: selection[0]});
+  let res = await apiCall('service.dhcp_servers.delete', { index: selection[0] });
   if (res.Error === null) {
     console.debug('deleted server');
     p.toast.success('Deleted DHCP Server');
diff --git a/client/src/pages/service/dns_servers.vue b/client/src/pages/service/dns_servers.vue
index e1f50e3..144a379 100644
--- a/client/src/pages/service/dns_servers.vue
+++ b/client/src/pages/service/dns_servers.vue
@@ -8,8 +8,8 @@ let loading = $ref(false);
 let selection = $ref([] as number[]);
 
 const columns = [
-  {heading: 'Interface', path: 'interface'},
-  {heading: 'Comment', path: 'comment'},
+  { heading: 'Interface', path: 'interface' },
+  { heading: 'Comment', path: 'comment' },
 ];
 
 async function load(){
@@ -23,7 +23,7 @@ async function load(){
 }
 
 async function deleteRule(){
-  let res = await apiCall('service.dns_servers.delete', {index: selection[0]});
+  let res = await apiCall('service.dns_servers.delete', { index: selection[0] });
   if (res.Error === null) {
     console.debug('deleted server');
     p.toast.success('Deleted DNS Server');
diff --git a/client/src/pages/service/ntp_servers.vue b/client/src/pages/service/ntp_servers.vue
index 12bc838..0ebb2de 100644
--- a/client/src/pages/service/ntp_servers.vue
+++ b/client/src/pages/service/ntp_servers.vue
@@ -8,8 +8,8 @@ let loading = $ref(false);
 let selection = $ref([] as number[]);
 
 const columns = [
-  {heading: 'Interface', path: 'interface'},
-  {heading: 'Comment', path: 'comment'},
+  { heading: 'Interface', path: 'interface' },
+  { heading: 'Comment', path: 'comment' },
 ];
 
 async function load(){
@@ -23,7 +23,7 @@ async function load(){
 }
 
 async function deleteRule(){
-  let res = await apiCall('service.ntp_server.delete', {id: selection[0]});
+  let res = await apiCall('service.ntp_server.delete', { id: selection[0] });
   if (res.Error === null) {
     console.debug('deleted server');
     p.toast.success('Deleted NTP Server');
diff --git a/client/src/pages/system/users.vue b/client/src/pages/system/users.vue
index 83a08e1..dd83f5e 100644
--- a/client/src/pages/system/users.vue
+++ b/client/src/pages/system/users.vue
@@ -8,8 +8,8 @@ let loading = $ref(false);
 let selection = $ref([] as number[]);
 
 const columns = [
-  {heading: 'Name', path: 'name'},
-  {heading: 'Comment', path: 'comment'},
+  { heading: 'Name', path: 'name' },
+  { heading: 'Comment', path: 'comment' },
 ];
 
 async function load(){
@@ -25,7 +25,7 @@ async function load(){
 }
 
 async function deleteUser(){
-  let res = await apiCall('system.users.delete', {name: users[selection[0]].name});
+  let res = await apiCall('system.users.delete', { name: users[selection[0]].name });
   if (res.Error === null) {
     console.debug('deleted user');
   } else {
diff --git a/client/src/pages/test.vue b/client/src/pages/test.vue
index d6eae99..db1732c 100644
--- a/client/src/pages/test.vue
+++ b/client/src/pages/test.vue
@@ -8,7 +8,7 @@ const testValues: Options = {
   a: { display: 'Option a' },
   z: { display: 'Option z' },
 };
-let vm: any = $ref({Multiple: [1]});
+let vm: any = $ref({ Multiple: [1] });
 
 function genSP(indexIsChar: boolean): SearchProvider {
   return async (o) => {
diff --git a/client/src/pages/vpn/wireguard.interfaces.vue b/client/src/pages/vpn/wireguard.interfaces.vue
index 35e4ff3..e8557ca 100644
--- a/client/src/pages/vpn/wireguard.interfaces.vue
+++ b/client/src/pages/vpn/wireguard.interfaces.vue
@@ -8,10 +8,10 @@ let loading = $ref(false);
 let selection = $ref([] as number[]);
 
 const columns = [
-  {heading: 'Name', path: 'name'},
-  {heading: 'Listen Port', path: 'listen_port'},
-  {heading: 'Peers', path: 'peers'},
-  {heading: 'Comment', path: 'comment'},
+  { heading: 'Name', path: 'name' },
+  { heading: 'Listen Port', path: 'listen_port' },
+  { heading: 'Peers', path: 'peers' },
+  { heading: 'Comment', path: 'comment' },
 
 ];
 
@@ -42,7 +42,7 @@ async function load(){
 }
 
 async function deleteInterface(){
-  let res = await apiCall('vpn.wireguard.interfaces.delete', {name: displayData[selection[0]].name});
+  let res = await apiCall('vpn.wireguard.interfaces.delete', { name: displayData[selection[0]].name });
   if (res.Error === null) {
     console.debug('deleted interface');
   } else {
diff --git a/client/src/pages/vpn/wireguard.peers.vue b/client/src/pages/vpn/wireguard.peers.vue
index c48888c..55bc357 100644
--- a/client/src/pages/vpn/wireguard.peers.vue
+++ b/client/src/pages/vpn/wireguard.peers.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { apiCall } from "../../api";
-import getPlugins from "../../plugins";
+import { apiCall } from '../../api';
+import getPlugins from '../../plugins';
 const p = getPlugins();
 
 let peers = $ref({});
@@ -8,81 +8,83 @@ let loading = $ref(false);
 let selection = $ref([] as number[]);
 
 const columns = [
-    { heading: "Name", path: "name" },
-    { heading: "Allowed IPs", path: "allowed_ips" },
-    { heading: "Endpoint", path: "endpoint" },
-    { heading: "Persistent Keepalive", path: "persistent_keepalive" },
-    { heading: "Comment", path: "comment" },
+  { heading: 'Name', path: 'name' },
+  { heading: 'Allowed IPs', path: 'allowed_ips' },
+  { heading: 'Endpoint', path: 'endpoint' },
+  { heading: 'Persistent Keepalive', path: 'persistent_keepalive' },
+  { heading: 'Comment', path: 'comment' },
 ];
 
 const displayData = $computed(() => {
-    let data: any;
-    data = [];
-    for (const index in peers) {
-        data.push({
-            name: peers[index].name,
-            allowed_ips: peers[index].allowed_ips,
-            endpoint: peers[index].endpoint,
-            persistent_keepalive: peers[index].persistent_keepalive,
-            comment: peers[index].comment,
-        });
-    }
-    return data;
+  let data: any;
+  data = [];
+  for (const index in peers) {
+    data.push({
+      name: peers[index].name,
+      allowed_ips: peers[index].allowed_ips,
+      endpoint: peers[index].endpoint,
+      persistent_keepalive: peers[index].persistent_keepalive,
+      comment: peers[index].comment,
+    });
+  }
+  return data;
 });
 
 async function load() {
-    loading = true;
-    let res = await apiCall("vpn.wireguard.peers.list", {});
-    if (res.Error === null) {
-        console.debug("peers", res.Data);
-        peers = res.Data;
-    } else {
-        console.debug("error", res);
-    }
-    loading = false;
+  loading = true;
+  let res = await apiCall('vpn.wireguard.peers.list', {});
+  if (res.Error === null) {
+    console.debug('peers', res.Data);
+    peers = res.Data;
+  } else {
+    console.debug('error', res);
+  }
+  loading = false;
 }
 
 async function deletePeer() {
-    let res = await apiCall("vpn.wireguard.peers.delete", {
-        name: displayData[selection[0]].name,
-    });
-    if (res.Error === null) {
-        console.debug("deleted peer");
-    } else {
-        console.debug("error", res);
-    }
-    load();
+  let res = await apiCall('vpn.wireguard.peers.delete', {
+    name: displayData[selection[0]].name,
+  });
+  if (res.Error === null) {
+    console.debug('deleted peer');
+  } else {
+    console.debug('error', res);
+  }
+  load();
 }
 
 async function editPeer() {
-    p.router.push(
-        `/vpn/wireguard.peers/edit/${displayData[selection[0]].name}`,
-    );
+  p.router.push(
+    `/vpn/wireguard.peers/edit/${displayData[selection[0]].name}`,
+  );
 }
 
 onMounted(async () => {
-    load();
+  load();
 });
 </script>
 
 <template>
-    <TableView
-        v-model:selection="selection"
-        v-model:data="displayData"
-        title="Peers"
-        :columns="columns"
-        :loading="loading"
-        :table-props="{ sort: true, sortSelf: true }"
+  <TableView
+    v-model:selection="selection"
+    v-model:data="displayData"
+    title="Peers"
+    :columns="columns"
+    :loading="loading"
+    :table-props="{ sort: true, sortSelf: true }"
+  >
+    <button @click="load">Refresh</button>
+    <router-link class="button" to="/vpn/wireguard.peers/edit"
     >
-        <button @click="load">Refresh</button>
-        <router-link class="button" to="/vpn/wireguard.peers/edit"
-            >Create</router-link
-        >
-        <button :disabled="selection.length != 1" @click="editPeer">
-            Edit
-        </button>
-        <button :disabled="selection.length != 1" @click="deletePeer">
-            Delete
-        </button>
-    </TableView>
+      Create
+    </router-link
+    >
+    <button :disabled="selection.length != 1" @click="editPeer">
+      Edit
+    </button>
+    <button :disabled="selection.length != 1" @click="deletePeer">
+      Delete
+    </button>
+  </TableView>
 </template>