diff --git a/src/web/templates/index.html b/src/web/templates/index.html
index 02a2a4f..1d65583 100644
--- a/src/web/templates/index.html
+++ b/src/web/templates/index.html
@@ -128,22 +128,25 @@
             display: block;
         }
 
-        /* Calibrate button */
-        .calibrate-bar {
+        /* Sidebar panel (calibration, etc.) */
+        .sidebar-panel {
             display: flex;
-            align-items: center;
-            gap: 16px;
-            padding: 8px 16px;
+            flex-direction: column;
+            gap: 8px;
+            padding: 10px;
             background: #111128;
-            border-bottom: 1px solid #222;
+            border-radius: 6px;
+            border: 1px solid #222;
+            margin-top: 4px;
         }
         .btn-calibrate {
-            padding: 8px 24px;
+            width: 100%;
+            padding: 8px 12px;
             background: #4ecca3;
             color: #000;
             border: none;
             border-radius: 6px;
-            font-size: 14px;
+            font-size: 13px;
             font-weight: 600;
             cursor: pointer;
             transition: all 0.2s;
@@ -151,8 +154,9 @@
         .btn-calibrate:hover { background: #3dbb92; }
         .btn-calibrate:disabled { background: #333; color: #666; cursor: not-allowed; }
         .calibrate-status {
-            font-size: 13px;
+            font-size: 11px;
             color: #666;
+            line-height: 1.6;
         }
         .calibrate-status .ok { color: #4ecca3; }
         .calibrate-status .fail { color: #ff4444; }
@@ -286,15 +290,8 @@
     </div>
 </div>
 
-<!-- Tab 2: Court — 3D scene is primary, cameras are secondary -->
+<!-- Tab 2: Court — 3D left, sidebar right with cams + calibration -->
 <div class="tab-content" id="tab-court">
-    <div class="calibrate-bar">
-        <button class="btn-calibrate" id="btnCalibrate" onclick="doCalibrate()">Calibrate Court</button>
-        <div class="calibrate-status" id="calStatus">
-            CAM 0: <span id="calStatus0">not calibrated</span> |
-            CAM 1: <span id="calStatus1">not calibrated</span>
-        </div>
-    </div>
     <div class="split-layout">
         <div class="split-main">
             <div class="viewport-3d" id="court-3d"></div>
@@ -302,6 +299,13 @@
         <div class="split-sidebar">
             <img id="court-cam0" alt="Camera 0">
             <img id="court-cam1" alt="Camera 1">
+            <div class="sidebar-panel">
+                <button class="btn-calibrate" id="btnCalibrate" onclick="doCalibrate()">Calibrate Court</button>
+                <div class="calibrate-status" id="calStatus">
+                    CAM 0: <span id="calStatus0">--</span><br>
+                    CAM 1: <span id="calStatus1">--</span>
+                </div>
+            </div>
         </div>
     </div>
 </div>