diff --git a/index.html b/index.html
index 84dfcb7..8af4c97 100644
--- a/index.html
+++ b/index.html
@@ -180,6 +180,7 @@
       } else {
         BLE.connect().catch(e => {
           console.error('[BLE Connect Error]', e);
+          UI.setButtonLoading('btn-ble-connect', false);
           if (!e.message?.includes('cancelled')) {
             UI.log(`Connect error: ${e.message} (${e.name})`, 'error');
           }
diff --git a/web/js/ui.js b/web/js/ui.js
index 95067b7..0997a64 100644
--- a/web/js/ui.js
+++ b/web/js/ui.js
@@ -46,21 +46,12 @@ const UI = (() => {
       : 'Disconnected';
     if (btn) {
       btn.disabled = false;
-      btn.innerHTML = connected
-        ? '<span class="btn-text">Disconnect</span>'
-        : '<span class="btn-text">Connect</span>';
-      btn.className = connected
-        ? 'btn btn-sm btn-danger'
-        : 'btn btn-sm btn-primary';
-
-      // Rebind: when connected, button should disconnect
-      btn.onclick = connected
-        ? () => BLE.disconnect()
-        : () => BLE.connect().catch(e => {
-          if (!e.message?.includes('cancelled')) {
-            log(`Connect failed: ${e.message}`, 'error');
-          }
-        });
+      const btnText = btn.querySelector('.btn-text');
+      if (btnText) {
+        btnText.textContent = connected ? 'Disconnect' : 'Connect';
+      }
+      btn.classList.toggle('btn-danger', connected);
+      btn.classList.toggle('btn-primary', !connected);
     }
   }