diff --git a/static/js/app.js b/static/js/app.js
index ec6653a..bdfe032 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -21,35 +21,43 @@ document.addEventListener('DOMContentLoaded', () => {
   const config = window.config || {}; // Sicherstellen, dass config existiert
 
   // ── Connect-Button ────────────────────────────────────────────────────────
-  connectBtn.addEventListener('click', async () => {
-    connectBtn.disabled = true;
-    connectBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> Verbinde...';
+connectBtn.addEventListener('click', async () => {
+  connectBtn.disabled = true;
+  connectBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> Verbinde...';
 
-    try {
-      const response = await fetch('/api/connect', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' }
-      });
+  try {
+    console.log("→ Sende /api/connect ...");
+    const response = await fetch('/api/connect', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' }
+    });
 
-      const result = await response.json();
+    console.log("→ Antwort erhalten:", response.status);
+    const result = await response.json();
+    console.log("→ Resultat:", result);
 
-      if (result.success) {
-        connectSection.style.display = 'none';
-        controlSection.style.display = 'block';
-        reconnectSection.style.display = 'none';
-        renderChannels();
-        console.log('Verbindung erfolgreich');
-      } else {
-        alert('Verbindung fehlgeschlagen:\n' + (result.message || 'Unbekannter Fehler'));
-      }
-    } catch (err) {
-      console.error('Connect-Fehler:', err);
-      alert('Netzwerk- oder Verbindungsfehler: ' + err.message);
-    } finally {
-      connectBtn.disabled = false;
-      connectBtn.innerHTML = '<i class="bi bi-bluetooth me-2"></i> Mit Hub verbinden';
+    if (result.success) {
+      console.log("→ Connect erfolgreich – blende Sections um");
+      connectSection.style.display = 'none';
+      controlSection.style.display = 'block';
+      reconnectSection.style.display = 'none';
+
+      console.log("→ Rufe renderChannels() auf");
+      renderChannels();
+
+      console.log("→ renderChannels() abgeschlossen");
+    } else {
+      console.warn("→ Connect fehlgeschlagen:", result.message);
+      alert('Verbindung fehlgeschlagen:\n' + (result.message || 'Unbekannter Fehler'));
     }
-  });
+  } catch (err) {
+    console.error("→ Connect-Fehler:", err);
+    alert('Netzwerk- oder Verbindungsfehler: ' + err.message);
+  } finally {
+    connectBtn.disabled = false;
+    connectBtn.innerHTML = '<i class="bi bi-bluetooth me-2"></i> Mit Hub verbinden';
+  }
+});
 
   // ── Alle stoppen ──────────────────────────────────────────────────────────
   if (stopAllBtn) {
@@ -114,13 +122,34 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // ── Kanäle dynamisch rendern ──────────────────────────────────────────────
   function renderChannels() {
-    if (!channelsContainer) return;
-    channelsContainer.innerHTML = '';
+  console.log("renderChannels() START");
+  console.log("→ config.channels existiert?", !!config?.channels);
+  console.log("→ channels.length:", config?.channels?.length ?? "undefined");
 
-    if (!config.channels || config.channels.length === 0) {
-      channelsContainer.innerHTML = '<p class="text-center text-muted py-5">Keine Kanäle in der Konfiguration definiert.</p>';
-      return;
-    }
+  if (!channelsContainer) {
+    console.error("→ channelsContainer nicht gefunden im DOM!");
+    return;
+  }
+
+  channelsContainer.innerHTML = '';
+  console.log("→ Container geleert");
+
+  if (!config?.channels || config.channels.length === 0) {
+    console.warn("→ Keine Kanäle erkannt – zeige leere Meldung");
+    channelsContainer.innerHTML = '<p class="text-center text-muted py-5">Keine Kanäle in der Konfiguration definiert.</p>';
+    return;
+  }
+
+  console.log("→ Beginne mit Rendern von", config.channels.length, "Kanälen");
+
+//  function renderChannels() {
+//    if (!channelsContainer) return;
+//    channelsContainer.innerHTML = '';
+
+//    if (!config.channels || config.channels.length === 0) {
+//      channelsContainer.innerHTML = '<p class="text-center text-muted py-5">Keine Kanäle in der Konfiguration definiert.</p>';
+//      return;
+//    }
 
     config.channels.forEach(channel => {
       const col = document.createElement('div');