diff --git a/coldbrew/vpn/templates/vpn/setup_device.html b/coldbrew/vpn/templates/vpn/setup_device.html
index c0cb403..55a4ede 100644
--- a/coldbrew/vpn/templates/vpn/setup_device.html
+++ b/coldbrew/vpn/templates/vpn/setup_device.html
@@ -6,7 +6,7 @@
     <script src="https://unpkg.com/@jprichardson/wireguard-crypto@0.0.10/dist/wireguard-crypto.min.js"></script>
   </head>
   <body>
-    <h1>Setup Device</h1>
+    <h1>Setup Device for VPN: {{ vpn.name }}</h1>
     <form id="device-form">
       <label for="device-name">Device Name:</label>
       <input
@@ -15,6 +15,22 @@
         name="device_name"
         required
       /><br /><br />
+      <label for="ipv4-address">IPv4 Address:</label>
+      <input
+        type="text"
+        id="ipv4-address"
+        name="ipv4_address"
+        required
+        placeholder="e.g., 10.0.1.2"
+      /><br /><br />
+      <label for="ipv6-address">IPv6 Address:</label>
+      <input
+        type="text"
+        id="ipv6-address"
+        name="ipv6_address"
+        required
+        placeholder="e.g., fd00::2"
+      /><br /><br />
       <button type="button" onclick="generateConfig()">
         Generate Configuration
       </button>
@@ -29,8 +45,10 @@
     <script>
       function generateConfig() {
         const deviceName = document.getElementById("device-name").value;
-        if (!deviceName) {
-          alert("Please enter a device name.");
+        const ipv4Address = document.getElementById("ipv4-address").value;
+        const ipv6Address = document.getElementById("ipv6-address").value;
+        if (!deviceName || !ipv4Address || !ipv6Address) {
+          alert("Please fill out all fields.");
           return;
         }
 
@@ -39,19 +57,16 @@
         const publicKey = window.wireguard.getPublicKey(privateKey);
         const presharedKey = window.wireguard.generatePresharedKey();
 
-        // Use server public key and endpoint from context
-        const serverPublicKey = "{{ server_public_key }}";
-        const serverEndpoint = "{{ server_endpoint }}";
-
-        // Use user's subnet details from context
-        const ipv4Address = "{{ ipv4_subnet.split(" / ")[0] }}";
-        const ipv6Address = "{{ ipv6_subnet.split(" / ")[0] }}";
+        // Use VPN details from the context
+        const serverPublicKey = "{{ vpn.public_key }}";
+        const serverEndpoint =
+          "{{ vpn.owner.username }}@{{ request.get_host }}:{{ vpn.port }}";
 
         // Generate Wireguard configuration
         const config = `
 [Interface]
 PrivateKey = ${privateKey}
-Address = ${ipv4Address}, ${ipv6Address}
+Address = ${ipv4Address}/24, ${ipv6Address}/64
 DNS = 1.1.1.1
 
 [Peer]
@@ -71,6 +86,36 @@ PersistentKeepalive = 25
           width: 128,
           height: 128,
         });
+
+        // Optionally, send the public key and preshared key to the server to create the device
+        const csrfToken = document.querySelector(
+          "[name=csrfmiddlewaretoken]"
+        ).value;
+        fetch('{% url "add_device" vpn.id %}', {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "X-CSRFToken": csrfToken,
+          },
+          body: JSON.stringify({
+            name: deviceName,
+            public_key: publicKey,
+            preshared_key: presharedKey,
+            ipv4_address: ipv4Address,
+            ipv6_address: ipv6Address,
+          }),
+        })
+          .then((response) => response.json())
+          .then((data) => {
+            if (data.success) {
+              alert("Device added successfully!");
+            } else {
+              alert("Error adding device: " + data.error);
+            }
+          })
+          .catch((error) => {
+            console.error("Error:", error);
+          });
       }
     </script>
   </body>
