diff --git a/src/web/templates/index.html b/src/web/templates/index.html
index d3c322a..746fcbf 100644
--- a/src/web/templates/index.html
+++ b/src/web/templates/index.html
@@ -94,6 +94,24 @@
         }
         .viewport-3d canvas { width: 100% !important; height: 100% !important; }
 
+        /* Court tab: 3D scene takes most space, cameras are small below */
+        .court-viewport-main {
+            height: calc(100vh - 240px);
+            min-height: 400px;
+            border-top: none;
+        }
+        .cameras-small {
+            padding: 4px 8px;
+            gap: 6px;
+        }
+        .cam-box-small {
+            max-width: 320px;
+            flex: 0 0 auto;
+        }
+        .cam-box-small img {
+            border-radius: 4px;
+        }
+
         /* Calibrate button */
         .calibrate-bar {
             display: flex;
@@ -254,7 +272,7 @@
     </div>
 </div>
 
-<!-- Tab 2: Court -->
+<!-- Tab 2: Court — 3D scene is primary, cameras are secondary -->
 <div class="tab-content" id="tab-court">
     <div class="calibrate-bar">
         <button class="btn-calibrate" id="btnCalibrate" onclick="doCalibrate()">Calibrate Court</button>
@@ -263,17 +281,17 @@
             CAM 1: <span id="calStatus1">not calibrated</span>
         </div>
     </div>
-    <div class="cameras">
-        <div class="cam-box">
-            <div class="cam-label">CAM 0 - Court Lines</div>
+    <div class="viewport-3d court-viewport-main" id="court-3d"></div>
+    <div class="cameras cameras-small">
+        <div class="cam-box cam-box-small">
+            <div class="cam-label">CAM 0</div>
             <img id="court-cam0" alt="Camera 0">
         </div>
-        <div class="cam-box">
-            <div class="cam-label">CAM 1 - Court Lines</div>
+        <div class="cam-box cam-box-small">
+            <div class="cam-label">CAM 1</div>
             <img id="court-cam1" alt="Camera 1">
         </div>
     </div>
-    <div class="viewport-3d" id="court-3d"></div>
 </div>
 
 <!-- Tab 3: Trajectory -->