diff --git a/public/app.js b/public/app.js
index dab1fe8..df6b62d 100644
--- a/public/app.js
+++ b/public/app.js
@@ -772,12 +772,13 @@ 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)
+    // Close both panels (webhooks is a sibling, hide it too)
     panel.style.display = 'none';
+    if (webhooksSection) webhooksSection.style.display = 'none';
     if (statusRefreshHandle) { clearInterval(statusRefreshHandle); statusRefreshHandle = null; }
     return;
   }
-  // Open status panel (contains webhooks nested inside)
+  // Open status panel and webhooks section (siblings)
   panel.style.display = 'block';
   // Show webhooks section for admin users (collapsed by default)
   if (webhooksSection && isAdmin) {
@@ -796,6 +797,8 @@ 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 13b24d9..30854f8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -71,8 +71,10 @@
             <div id="status-panel" class="status-panel" style="display: none;">
                 <!-- Status content gets rendered here -->
                 <div id="status-content"><p class="status-loading">Loading status...</p></div>
-                <!-- Webhooks Configuration Panel (nested inside status) -->
-                <div class="webhooks-section" id="webhooks-section" style="display: none;">
+            </div>
+
+            <!-- Webhooks Configuration Panel (sibling to status-panel) -->
+            <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>
@@ -129,7 +131,6 @@
                     </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 26cfd4f..1a7f5a6 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1544,16 +1544,6 @@ 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);