diff --git a/whatsapp_bridge/ui/index.html b/whatsapp_bridge/ui/index.html
new file mode 100644
index 0000000..7254107
--- /dev/null
+++ b/whatsapp_bridge/ui/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bahmcloud Bridge Manager</title>
+    <style>
+        body { font-family: sans-serif; background: #111; color: white; text-align: center; padding: 20px; }
+        .card { background: #222; border-radius: 15px; padding: 20px; max-width: 400px; margin: auto; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
+        h1 { color: #25D366; }
+        .status-badge { display: inline-block; padding: 5px 15px; border-radius: 20px; font-weight: bold; margin: 10px 0; }
+        .connected { background: #25D366; color: black; }
+        .disconnected { background: #e74c3c; color: white; }
+        .qr-container img { background: white; padding: 10px; border-radius: 10px; margin-top: 15px; width: 200px; }
+        .btn { display: block; width: 100%; padding: 12px; margin: 10px 0; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; transition: 0.3s; }
+        .btn-orange { background: #e67e22; color: white; }
+        .btn-red { background: #c0392b; color: white; }
+        .btn:disabled { opacity: 0.5; cursor: not-allowed; }
+    </style>
+</head>
+<body>
+    <div class="card">
+        <h1>WhatsApp Bridge</h1>
+        <div id="status" class="status-badge disconnected">Checking...</div>
+        
+        <div id="qr-section" class="qr-container" style="display:none;">
+            <p>Scan this QR Code:</p>
+            <div id="qr-code"></div>
+        </div>
+
+        <div style="margin-top: 20px;">
+            <button class="btn btn-orange" onclick="cmd('/auth/logout', 'POST', 'Logout current account?')">📲 Change Account</button>
+            <button class="btn btn-red" onclick="cmd('/system/reset', 'DELETE', 'DELETE ALL DATA?')">⚠️ Factory Reset</button>
+        </div>
+        <p id="msg" style="font-size: 12px; color: #888; margin-top: 10px;"></p>
+    </div>
+
+    <script>
+        async function update() {
+            try {
+                const res = await fetch('/api/status');
+                const data = await res.json();
+                const statusEl = document.getElementById('status');
+                const qrSection = document.getElementById('qr-section');
+
+                if (data.isReady) {
+                    statusEl.innerText = "CONNECTED ✅";
+                    statusEl.className = "status-badge connected";
+                    qrSection.style.display = "none";
+                } else if (data.hasQr) {
+                    statusEl.innerText = "WAITING FOR SCAN 📱";
+                    statusEl.className = "status-badge disconnected";
+                    qrSection.style.display = "block";
+                    document.getElementById('qr-code').innerHTML = `<img src="${data.qrCode}">`;
+                } else {
+                    statusEl.innerText = "INITIALIZING...";
+                    qrSection.style.display = "none";
+                }
+            } catch (e) {}
+        }
+
+        async function cmd(url, method, msg) {
+            if (!confirm(msg)) return;
+            document.getElementById('msg').innerText = "Working...";
+            const res = await fetch(url, { method });
+            const data = await res.json();
+            alert(data.message);
+            location.reload();
+        }
+
+        setInterval(update, 3000);
+        update();
+    </script>
+</body>
+</html>
\ No newline at end of file
