diff --git a/client/src/App.vue b/client/src/App.vue
index 4feedf1..639af28 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -46,10 +46,12 @@ const navRoutesNew = [
     { caption: 'DHCP', icon: IDHCPServer, href: '/service/dhcp_servers' },
     { caption: 'DNS', icon: IDNSServer, href: '/service/dns_servers' },
     { caption: 'NTP', icon: ITimeServer, href: '/service/ntp_servers' },
+  ] },
+  { caption: 'VPN', icon: IList, children: [
     { caption: 'Wireguard', icon: IWireguard, children: [
       { 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: 'Interfaces', icon: IEthernet, href: '/vpn/wireguard.interfaces' },
+      { caption: 'Peers', icon: INodes, href: '/vpn/wireguard.peers' },
     ]},
   ] },
   { caption: 'Users', icon: IUser, href: '/system/users' },
diff --git a/client/src/definitions.ts b/client/src/definitions.ts
index 22d8431..183148d 100644
--- a/client/src/definitions.ts
+++ b/client/src/definitions.ts
@@ -325,24 +325,24 @@ export const editTypes: { [key: string]: { [key: string]: any } } = {
   },
   'vpn': {
     name: 'VPN',
-    'wireguard_interfaces': {
+    '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: 'MutliSelect', label: 'Peers', props: { searchProvider: GetPeers} },
+        peers: { is: 'MultiSelect', label: 'Peers', props: { searchProvider: GetPeers} },
         comment: { is: 'MultilineTextBox', label: 'Comment'},
       },
     },
-    'wireguard_peers': {
+    '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: 'MutliSelect', label: 'Allowed IPs', props: { searchProvider: GetAddresses} },
+        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'},
diff --git a/client/src/pages/vpn/wireguard_interfaces.vue b/client/src/pages/vpn/wireguard.interfaces.vue
similarity index 83%
rename from client/src/pages/vpn/wireguard_interfaces.vue
rename to client/src/pages/vpn/wireguard.interfaces.vue
index 8b6de3a..318b781 100644
--- a/client/src/pages/vpn/wireguard_interfaces.vue
+++ b/client/src/pages/vpn/wireguard.interfaces.vue
@@ -18,12 +18,12 @@ const columns = [
 const displayData = $computed(() => {
   let data: any;
   data = [];
-  for (const name in interfaces) {
+  for (const index in interfaces) {
     data.push({
-      name,
-      listen_port: interfaces[name].listen_port,
-      peers: interfaces[name].peers,
-      comment: interfaces[name].comment,
+      name: interfaces[index].name,
+      listen_port: interfaces[index].listen_port,
+      peers: interfaces[index].peers,
+      comment: interfaces[index].comment,
     });
   }
   return data;
@@ -52,7 +52,7 @@ async function deleteInterface(){
 }
 
 async function editInterface() {
-  p.router.push(`/vpn/wireguard_interfaces/edit/${  displayData[selection[0]].name}`);
+  p.router.push(`/vpn/wireguard.interfaces/edit/${  displayData[selection[0]].name}`);
 }
 
 onMounted(async() => {
@@ -64,7 +64,7 @@ onMounted(async() => {
 <template>
   <TableView title="Wireguard Interfaces" :columns="columns" :loading="loading" v-model:selection="selection" v-model:data="displayData" :table-props="{sort:true, sortSelf: true}">
     <button @click="load">Refresh</button>
-    <router-link class="button" to="/vpn/wireguard_interfaces/edit">Create</router-link>
+    <router-link class="button" to="/vpn/wireguard.interfaces/edit">Create</router-link>
     <button @click="editInterface" :disabled="selection.length != 1">Edit</button>
     <button @click="deleteInterface" :disabled="selection.length != 1">Delete</button>
   </TableView>
diff --git a/client/src/pages/vpn/wireguard_peers.vue b/client/src/pages/vpn/wireguard.peers.vue
similarity index 93%
rename from client/src/pages/vpn/wireguard_peers.vue
rename to client/src/pages/vpn/wireguard.peers.vue
index ab9ba09..adbcd42 100644
--- a/client/src/pages/vpn/wireguard_peers.vue
+++ b/client/src/pages/vpn/wireguard.peers.vue
@@ -53,7 +53,7 @@ async function deletePeer(){
 }
 
 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() => {
@@ -65,7 +65,7 @@ onMounted(async() => {
 <template>
   <TableView title="Peers" :columns="columns" :loading="loading" v-model:selection="selection" v-model:data="displayData" :table-props="{sort:true, sortSelf: true}">
     <button @click="load">Refresh</button>
-    <router-link class="button" to="/vpn/wireguard_peers/edit">Create</router-link>
+    <router-link class="button" to="/vpn/wireguard.peers/edit">Create</router-link>
     <button @click="editPeer" :disabled="selection.length != 1">Edit</button>
     <button @click="deletePeer" :disabled="selection.length != 1">Delete</button>
   </TableView>