diff --git a/src/lib/Server.js b/src/lib/Server.js
index 1144121a..65dbecb4 100644
--- a/src/lib/Server.js
+++ b/src/lib/Server.js
@@ -161,14 +161,14 @@ module.exports = class Server {
         const { address } = req.body;
         return WireGuard.updateClientAddress({ clientId, address });
       }))
-        .put('/api/wireguard/client/:clientId/allowedips', Util.promisify(async (req, res) => {
-          const { clientId } = req.params;
-          if (clientId === '__proto__' || clientId === 'constructor' || clientId === 'prototype') {
-            res.end(403);
-          }
-          const { allowedIPs } = req.body;
-          return WireGuard.updateClientAllowedIPs({ clientId, allowedIPs });
-        }))
+      .put('/api/wireguard/client/:clientId/allowedips', Util.promisify(async (req, res) => {
+        const { clientId } = req.params;
+        if (clientId === '__proto__' || clientId === 'constructor' || clientId === 'prototype') {
+          res.end(403);
+        }
+        const { allowedIPs } = req.body;
+        return WireGuard.updateClientAllowedIPs({ clientId, allowedIPs });
+      }))
 
       .listen(PORT, WEBUI_HOST, () => {
         debug(`Listening on http://${WEBUI_HOST}:${PORT}`);
diff --git a/src/lib/WireGuard.js b/src/lib/WireGuard.js
index e1b9cf8a..a6906051 100644
--- a/src/lib/WireGuard.js
+++ b/src/lib/WireGuard.js
@@ -105,12 +105,12 @@ PostDown = ${WG_POST_DOWN}
     for (const [clientId, client] of Object.entries(config.clients)) {
       if (!client.enabled) continue;
       let allowedIPs = '';
-      if(client?.allowedIPs){
+      if (client?.allowedIPs) {
         for (const allowedIP of client.allowedIPs) {
           allowedIPs += `,${allowedIP.address}/${allowedIP.cidr}`;
         }
         allowedIPs = allowedIPs.substring(1);
-      }else {
+      } else {
         allowedIPs = client.address;
       }
 
@@ -149,7 +149,7 @@ AllowedIPs = ${allowedIPs}`;
       publicKey: client.publicKey,
       createdAt: new Date(client.createdAt),
       updatedAt: new Date(client.updatedAt),
-      allowedIPs: client?.allowedIPs?client.allowedIPs:[{type:'ipv4', address:client.address, cidr: 32}],
+      allowedIPs: client?.allowedIPs ? client.allowedIPs : [{ type: 'ipv4', address: client.address, cidr: 32 }],
 
       persistentKeepalive: null,
       latestHandshakeAt: null,
@@ -272,7 +272,7 @@ Endpoint = ${WG_HOST}:${WG_PORT}`;
 
       createdAt: new Date(),
       updatedAt: new Date(),
-      allowedIPs: [{type:'ipv4', address, cidr: 32}],
+      allowedIPs: [{ type: 'ipv4', address, cidr: 32 }],
 
       enabled: true,
     };
@@ -326,8 +326,7 @@ Endpoint = ${WG_HOST}:${WG_PORT}`;
     if (!Util.isValidIPv4(address)) {
       throw new ServerError(`Invalid Address: ${address}`, 400);
     }
-    if(client?.allowedIPs){
-      let allowedIPs = client.allowedIPs
+    if (client?.allowedIPs) {
       client.allowedIPs[0].address = address;
     }
     client.address = address;
@@ -335,14 +334,15 @@ Endpoint = ${WG_HOST}:${WG_PORT}`;
 
     await this.saveConfig();
   }
+
   async updateClientAllowedIPs({ clientId, allowedIPs }) {
     const client = await this.getClient({ clientId });
-    let ips = allowedIPs.map(item=>item.address)
-    ips.forEach(ip=>{
+    const ips = allowedIPs.map((item) => item.address);
+    ips.forEach((ip) => {
       if (!Util.isValidIPv4(ip)) {
         throw new ServerError(`Invalid Address: ${ip}`, 400);
       }
-    })
+    });
     client.allowedIPs = allowedIPs;
     client.updatedAt = new Date();
 
diff --git a/src/www/js/api.js b/src/www/js/api.js
index bee99091..74431fc3 100644
--- a/src/www/js/api.js
+++ b/src/www/js/api.js
@@ -116,6 +116,7 @@ class API {
       body: { address },
     });
   }
+
   async updateClientAllowedIPs({ clientId, allowedIPs }) {
     return this.call({
       method: 'put',
@@ -124,5 +125,4 @@ class API {
     });
   }
 
-
 }
diff --git a/src/www/js/app.js b/src/www/js/app.js
index 2bf4aa49..92c604be 100644
--- a/src/www/js/app.js
+++ b/src/www/js/app.js
@@ -42,7 +42,7 @@ new Vue({
     clientEditAddress: null,
     clientEditAddressId: null,
     clientEditAllowedIPs: null,
-    userInputIP:[0,0,0,0,0],
+    userInputIP: [0, 0, 0, 0, 0],
     qrcode: null,
 
     currentRelease: null,
@@ -247,20 +247,20 @@ new Vue({
     },
     updateClientAllowedIPs(client) {
       this.api.updateClientAllowedIPs({ clientId: client.id, allowedIPs: client.allowedIPs })
-          .catch((err) => alert(err.message || err.toString()))
-          .finally(() => this.refresh().catch(console.error));
+        .catch((err) => alert(err.message || err.toString()))
+        .finally(() => this.refresh().catch(console.error));
     },
-    addNewIP(){
-      let address = this.userInputIP.slice(0,4).join('.');
-      let allowedIPs = this.clientEditAllowedIPs.allowedIPs;
-      let obj = {type:'ipv4', address, cidr: this.userInputIP[4]};
+    addNewIP() {
+      const address = this.userInputIP.slice(0, 4).join('.');
+      const allowedIPs = [...this.clientEditAllowedIPs.allowedIPs];
+      const obj = { type: 'ipv4', address, cidr: this.userInputIP[4] };
       allowedIPs.push(obj);
       this.clientEditAllowedIPs.allowedIPs = allowedIPs;
-      this.userInputIP = [0,0,0,0,0];
+      this.userInputIP = [0, 0, 0, 0, 0];
     },
-    removeIP(index){
-      let allowedIPs = this.clientEditAllowedIPs.allowedIPs;
-      allowedIPs.splice(index,1);
+    removeIP(index) {
+      const allowedIPs = [...this.clientEditAllowedIPs.allowedIPs];
+      allowedIPs.splice(index, 1);
       this.clientEditAllowedIPs.allowedIPs = allowedIPs;
     },
     toggleTheme() {