diff --git a/coldbrew/vpn/templates/vpn/setup_device.html b/coldbrew/vpn/templates/vpn/setup_device.html
new file mode 100644
index 0000000..c0cb403
--- /dev/null
+++ b/coldbrew/vpn/templates/vpn/setup_device.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Setup Device</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
+    <script src="https://unpkg.com/@jprichardson/wireguard-crypto@0.0.10/dist/wireguard-crypto.min.js"></script>
+  </head>
+  <body>
+    <h1>Setup Device</h1>
+    <form id="device-form">
+      <label for="device-name">Device Name:</label>
+      <input
+        type="text"
+        id="device-name"
+        name="device_name"
+        required
+      /><br /><br />
+      <button type="button" onclick="generateConfig()">
+        Generate Configuration
+      </button>
+    </form>
+
+    <h2>Wireguard Configuration</h2>
+    <pre id="wg-config"></pre>
+
+    <h2>QR Code</h2>
+    <div id="qrcode"></div>
+
+    <script>
+      function generateConfig() {
+        const deviceName = document.getElementById("device-name").value;
+        if (!deviceName) {
+          alert("Please enter a device name.");
+          return;
+        }
+
+        // Generate Wireguard keys
+        const privateKey = window.wireguard.generatePrivateKey();
+        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] }}";
+
+        // Generate Wireguard configuration
+        const config = `
+[Interface]
+PrivateKey = ${privateKey}
+Address = ${ipv4Address}, ${ipv6Address}
+DNS = 1.1.1.1
+
+[Peer]
+PublicKey = ${serverPublicKey}
+PresharedKey = ${presharedKey}
+Endpoint = ${serverEndpoint}
+AllowedIPs = 0.0.0.0/0, ::/0
+PersistentKeepalive = 25
+`;
+
+        // Display the configuration
+        document.getElementById("wg-config").textContent = config;
+
+        // Generate QR code
+        const qrcode = new QRCode(document.getElementById("qrcode"), {
+          text: config,
+          width: 128,
+          height: 128,
+        });
+      }
+    </script>
+  </body>
+</html>
