diff --git a/public/app.js b/public/app.js
index 2c8f977..d592a06 100644
--- a/public/app.js
+++ b/public/app.js
@@ -772,20 +772,22 @@ async function toggleStatusPanel() {
   const panel = document.getElementById('status-panel');
   const webhooksSection = document.getElementById('webhooks-section');
   if (panel.style.display !== 'none') {
+    // Close both panels (webhooks is nested, but hide explicitly)
     panel.style.display = 'none';
-    if (webhooksSection) webhooksSection.style.display = 'none';
     if (statusRefreshHandle) { clearInterval(statusRefreshHandle); statusRefreshHandle = null; }
     return;
   }
+  // Open status panel (contains webhooks nested inside)
   panel.style.display = 'block';
   // Show webhooks section for admin users (collapsed by default)
   if (webhooksSection && isAdmin) {
-    webhooksSection.style.display = '';
-    // Ensure webhooks section starts collapsed
+    webhooksSection.style.display = 'block';
     webhookSectionExpanded = false;
     document.getElementById('webhooks-content').style.display = 'none';
     document.getElementById('webhooks-toggle').classList.remove('expanded');
     await fetchWebhookStatus();
+  } else if (webhooksSection) {
+    webhooksSection.style.display = 'none';
   }
   await refreshStatusPanel();
   if (statusRefreshHandle) clearInterval(statusRefreshHandle);
@@ -794,8 +796,6 @@ async function toggleStatusPanel() {
 
 function closeStatusPanel() {
   document.getElementById('status-panel').style.display = 'none';
-  const webhooksSection = document.getElementById('webhooks-section');
-  if (webhooksSection) webhooksSection.style.display = 'none';
   if (statusRefreshHandle) { clearInterval(statusRefreshHandle); statusRefreshHandle = null; }
 }
 
diff --git a/public/index.html b/public/index.html
index 93c89ff..ae0c43f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -68,10 +68,9 @@
                 </div>
             </header>
 
-            <div id="status-panel" class="status-panel" style="display: none;"></div>
-
-            <!-- Webhooks Configuration Panel (inline with status) -->
-            <div class="webhooks-section" id="webhooks-section" style="display: none;">
+            <div id="status-panel" class="status-panel" style="display: none;">
+                <!-- Webhooks Configuration Panel (nested inside status) -->
+                <div class="webhooks-section" id="webhooks-section" style="display: none;">
                 <div class="webhooks-header" id="webhooks-header">
                     <h2>⚡ Webhooks Configuration</h2>
                     <span class="webhooks-toggle" id="webhooks-toggle">▼</span>
@@ -128,6 +127,7 @@
                     </div>
                 </div>
             </div>
+            </div>
 
             <div id="error-message" class="error-message" style="display: none;"></div>
 
diff --git a/public/style.css b/public/style.css
index dd6e650..9fdfef8 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1528,6 +1528,16 @@ body {
   overflow: hidden;
 }
 
+/* When nested inside status-panel, remove outer styling and look like a subsection */
+.status-panel > .webhooks-section {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  margin-bottom: 0;
+  border-top: 1px solid var(--border);
+}
+
 .webhooks-header {
   padding: 16px 20px;
   background: var(--surface-alt);