diff --git a/src/web/templates/index.html b/src/web/templates/index.html
index a03f91a..457c89b 100644
--- a/src/web/templates/index.html
+++ b/src/web/templates/index.html
@@ -94,50 +94,34 @@
         }
         .viewport-3d canvas { width: 100% !important; height: 100% !important; }
 
-        /* Split layout: 3D left ~80%, sidebar right ~20% with cam previews */
-        .split-layout {
+        /* Bottom layout: 3D + sidebar panel */
+        .court-bottom, .traj-bottom {
             display: flex;
-            height: calc(100vh - 100px);
+            height: calc(100vh - 100px - 30vw);
             overflow: hidden;
         }
-        .split-main {
+        .court-main, .traj-main {
             flex: 1;
             position: relative;
             min-width: 0;
         }
-        .split-main .viewport-3d {
+        .court-main .viewport-3d,
+        .traj-main .viewport-3d {
             width: 100%;
             height: 100%;
             border-top: none;
         }
-        .split-sidebar {
-            width: 220px;
-            flex-shrink: 0;
-            display: flex;
-            flex-direction: column;
-            gap: 6px;
-            padding: 6px;
-            background: #0d0d20;
-            border-left: 1px solid #222;
-            overflow-y: auto;
-        }
-        .split-sidebar img {
-            width: 100%;
-            border-radius: 4px;
-            border: 1px solid #222;
-            display: block;
-        }
 
         /* Sidebar panel (calibration, etc.) */
         .sidebar-panel {
+            width: 220px;
+            flex-shrink: 0;
             display: flex;
             flex-direction: column;
             gap: 8px;
             padding: 10px;
             background: #111128;
-            border-radius: 6px;
-            border: 1px solid #222;
-            margin-top: 4px;
+            border-left: 1px solid #222;
         }
         .btn-calibrate {
             width: 100%;
@@ -163,14 +147,14 @@
 
         /* VAR panel (sidebar version) */
         .var-panel-sidebar {
+            width: 220px;
+            flex-shrink: 0;
             display: flex;
             flex-direction: column;
             gap: 8px;
             padding: 10px;
             background: #111128;
-            border-radius: 6px;
-            border: 1px solid #222;
-            margin-top: 4px;
+            border-left: 1px solid #222;
         }
         .var-indicator {
             display: flex;
@@ -281,57 +265,64 @@
 <!-- Tab 1: Detection -->
 <div class="tab-content active" id="tab-detection">
     <div class="cameras">
-        <div class="cam-box">
-            <img id="det-cam0" alt="Camera 0">
-        </div>
         <div class="cam-box">
             <img id="det-cam1" alt="Camera 1">
         </div>
+        <div class="cam-box">
+            <img id="det-cam0" alt="Camera 0">
+        </div>
     </div>
 </div>
 
-<!-- Tab 2: Court — 3D left, sidebar right with cams + calibration -->
+<!-- Tab 2: Court — cameras on top, 3D below -->
 <div class="tab-content" id="tab-court">
-    <div class="split-layout">
-        <div class="split-main">
+    <div class="cameras">
+        <div class="cam-box">
+            <img id="court-cam1" alt="Camera 1">
+        </div>
+        <div class="cam-box">
+            <img id="court-cam0" alt="Camera 0">
+        </div>
+    </div>
+    <div class="court-bottom">
+        <div class="court-main">
             <div class="viewport-3d" id="court-3d"></div>
         </div>
-        <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">
-                    <span id="calStatusText">Not calibrated</span>
-                </div>
+        <div class="sidebar-panel">
+            <button class="btn-calibrate" id="btnCalibrate" onclick="doCalibrate()">Calibrate Court</button>
+            <div class="calibrate-status" id="calStatus">
+                <span id="calStatusText">Not calibrated</span>
             </div>
         </div>
     </div>
 </div>
 
-<!-- Tab 3: Trajectory — 3D left, cam previews + VAR panel right -->
+<!-- Tab 3: Trajectory — cameras on top, 3D below -->
 <div class="tab-content" id="tab-trajectory">
-    <div class="split-layout">
-        <div class="split-main">
+    <div class="cameras">
+        <div class="cam-box">
+            <img id="traj-cam1" alt="Camera 1">
+        </div>
+        <div class="cam-box">
+            <img id="traj-cam0" alt="Camera 0">
+        </div>
+    </div>
+    <div class="traj-bottom">
+        <div class="traj-main">
             <div class="viewport-3d" id="trajectory-3d"></div>
         </div>
-        <div class="split-sidebar">
-            <img id="traj-cam0" alt="Camera 0">
-            <img id="traj-cam1" alt="Camera 1">
-            <!-- VAR panel in sidebar -->
-            <div class="var-panel-sidebar">
-                <div class="var-indicator">
-                    <div class="var-dot" id="varDot"></div>
-                    <div class="var-label" id="varLabel">VAR</div>
-                </div>
-                <div class="var-info" id="varInfo">
-                    <div class="var-line" id="varLine">No events</div>
-                    <div class="var-timer" id="varTimer"></div>
-                    <div class="var-dist" id="varDist"></div>
-                </div>
-                <img class="var-snapshot" id="varSnapshot" style="display:none">
-                <div class="var-snapshot empty" id="varSnapshotEmpty">No snapshot</div>
+        <div class="var-panel-sidebar">
+            <div class="var-indicator">
+                <div class="var-dot" id="varDot"></div>
+                <div class="var-label" id="varLabel">VAR</div>
             </div>
+            <div class="var-info" id="varInfo">
+                <div class="var-line" id="varLine">No events</div>
+                <div class="var-timer" id="varTimer"></div>
+                <div class="var-dist" id="varDist"></div>
+            </div>
+            <img class="var-snapshot" id="varSnapshot" style="display:none">
+            <div class="var-snapshot empty" id="varSnapshotEmpty">No snapshot</div>
         </div>
     </div>
 </div>