diff --git a/workout/2026-04-22.html b/workout/2026-04-22.html
index 26e001a..4eb744c 100644
--- a/workout/2026-04-22.html
+++ b/workout/2026-04-22.html
@@ -14,11 +14,23 @@
       height: 100%;
       overflow: hidden;
     }
+
+    /* Page: horizontal layout. Sidebar is top-level so it goes to top */
     .page {
       display: flex;
-      flex-direction: column;
+      flex-direction: row;
       height: 100vh;
       max-width: 100%;
+      overflow: hidden;
+    }
+
+    /* Left side: header + workout */
+    .left {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      overflow: hidden;
     }
 
     /* Header */
@@ -35,19 +47,12 @@
 
     /* Main content area */
     .main {
-      display: flex;
       flex: 1;
-      overflow: hidden;
-      gap: 24px;
+      overflow-y: auto;
       padding: 0 24px 16px;
     }
 
     /* Workout column */
-    .workout-column {
-      flex: 1;
-      overflow-y: auto;
-      min-width: 0;
-    }
     .section { margin-bottom: 20px; }
     h2 { font-size: 1rem; color: #f97316; margin-bottom: 10px; font-weight: 600; }
     .table {
@@ -93,12 +98,13 @@
     .muscle-tag.shoulders { background: rgba(100, 181, 246, 0.25); color: #64b5f6; }
     .muscle-tag.forearms { background: rgba(255, 183, 77, 0.25); color: #ffb74d; }
 
-    /* Anatomy sidebar */
+    /* Anatomy sidebar — top-level, goes to top of page */
     .anatomy-column {
       width: 360px;
       flex-shrink: 0;
       display: flex;
       flex-direction: column;
+      padding: 16px 24px 16px 0;
       overflow-y: auto;
     }
     .anatomy-section {
@@ -137,8 +143,9 @@
     /* Mobile: hide sidebar, stack normally */
     @media (max-width: 1100px) {
       html, body { height: auto; overflow: auto; }
-      .page { height: auto; }
-      .main { flex-direction: column; padding: 0 16px 16px; }
+      .page { flex-direction: column; height: auto; }
+      .left { height: auto; }
+      .main { padding: 0 16px 16px; }
       .anatomy-column { display: none; }
       .header { padding: 16px 16px 8px; }
     }
@@ -146,14 +153,14 @@
     /* TV adjustments */
     @media (min-width: 1600px) {
       .header { padding: 20px 32px 12px; }
-      .main { gap: 32px; padding: 0 32px 20px; }
+      .main { padding: 0 32px 20px; }
       h1 { font-size: 2rem; }
       .day-badge { font-size: 0.9rem; padding: 4px 12px; }
       .table td { padding: 12px 14px; font-size: 1rem; }
       .exercise-name { font-size: 1.1rem; }
       .reps, .weight { font-size: 0.95rem; }
       .muscle-tag { font-size: 0.75rem; padding: 3px 10px; }
-      .anatomy-column { width: 400px; }
+      .anatomy-column { width: 400px; padding: 20px 32px 20px 0; }
     }
 
     @keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }
@@ -162,16 +169,16 @@
 </head>
 <body>
   <div class="page">
-    <div class="header">
-      <p class="breadcrumb"><a href="../">Ash Pages</a> / <a href="index.html">Workouts</a> /</p>
-      <h1>💪 Full-Body Circuit</h1>
-      <div class="date-header">Wednesday, April 22, 2026</div>
-      <div class="day-badge">Day B — Full-Body Circuit</div>
-    </div>
+    <!-- LEFT SIDE: header + workout -->
+    <div class="left">
+      <div class="header">
+        <p class="breadcrumb"><a href="../">Ash Pages</a> / <a href="index.html">Workouts</a> /</p>
+        <h1>💪 Full-Body Circuit</h1>
+        <div class="date-header">Wednesday, April 22, 2026</div>
+        <div class="day-badge">Day B — Full-Body Circuit</div>
+      </div>
 
-    <div class="main">
-      <!-- WORKOUT COLUMN -->
-      <div class="workout-column" id="workoutColumn">
+      <div class="main">
         <!-- Main workout table -->
         <div class="section">
           <h2>Main Workout</h2>
@@ -313,34 +320,34 @@
         </div>
 
         <a href="index.html" class="back-link">← Back to workout list</a>
-      </div> <!-- /workout-column -->
+      </div> <!-- /main -->
+    </div> <!-- /left -->
 
-      <!-- ANATOMY SIDEBAR -->
-      <div class="anatomy-column">
-        <div class="anatomy-section">
-          <div class="anatomy-header">
-            <div class="anatomy-title">📚 Muscle Reference</div>
+    <!-- RIGHT SIDE: anatomy sidebar — goes all the way to top -->
+    <div class="anatomy-column">
+      <div class="anatomy-section">
+        <div class="anatomy-header">
+          <div class="anatomy-title">📚 Muscle Reference</div>
+        </div>
+        <div class="anatomy-diagrams">
+          <div class="diagram-container" id="diagram-anterior">
+            <h3>Anterior (Front)</h3>
+            <img src="workout/muscles-anterior-labeled.png" alt="Anterior muscles">
           </div>
-          <div class="anatomy-diagrams">
-            <div class="diagram-container" id="diagram-anterior">
-              <h3>Anterior (Front)</h3>
-              <img src="workout/muscles-anterior-labeled.png" alt="Anterior muscles">
-            </div>
-            <div class="diagram-container" id="diagram-posterior">
-              <h3>Posterior (Back)</h3>
-              <img src="workout/muscles-posterior-labeled.png" alt="Posterior muscles">
-            </div>
+          <div class="diagram-container" id="diagram-posterior">
+            <h3>Posterior (Back)</h3>
+            <img src="workout/muscles-posterior-labeled.png" alt="Posterior muscles">
           </div>
         </div>
-      </div> <!-- /anatomy-column -->
-    </div> <!-- /main -->
+      </div>
+    </div> <!-- /anatomy-column -->
   </div> <!-- /page -->
 
   <div class="wake-locked" id="wakeLockStatus">Screen locked for workout</div>
 
   <script>
     // Remote control: arrow keys scroll workout
-    const workoutCol = document.getElementById('workoutColumn');
+    const workoutCol = document.querySelector('.main');
     const SCROLL_AMOUNT = 120;
 
     document.addEventListener('keydown', (e) => {
diff --git a/workout/template.html b/workout/template.html
index 0fa69ce..dd7441a 100644
--- a/workout/template.html
+++ b/workout/template.html
@@ -15,11 +15,23 @@
       height: 100%;
       overflow: hidden;
     }
+
+    /* Page: horizontal layout. Sidebar is top-level so it goes to top */
     .page {
       display: flex;
-      flex-direction: column;
+      flex-direction: row;
       height: 100vh;
       max-width: 100%;
+      overflow: hidden;
+    }
+
+    /* Left side: header + workout */
+    .left {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      overflow: hidden;
     }
 
     /* Header */
@@ -36,19 +48,12 @@
 
     /* Main content area */
     .main {
-      display: flex;
       flex: 1;
-      overflow: hidden;
-      gap: 24px;
+      overflow-y: auto;
       padding: 0 24px 16px;
     }
 
     /* Workout column */
-    .workout-column {
-      flex: 1;
-      overflow-y: auto;
-      min-width: 0;
-    }
     .section { margin-bottom: 20px; }
     h2 { font-size: 1rem; color: #f97316; margin-bottom: 10px; font-weight: 600; }
     .table {
@@ -94,12 +99,13 @@
     .muscle-tag.shoulders { background: rgba(100, 181, 246, 0.25); color: #64b5f6; }
     .muscle-tag.forearms { background: rgba(255, 183, 77, 0.25); color: #ffb74d; }
 
-    /* Anatomy sidebar */
+    /* Anatomy sidebar — top-level, goes to top of page */
     .anatomy-column {
       width: 360px;
       flex-shrink: 0;
       display: flex;
       flex-direction: column;
+      padding: 16px 24px 16px 0;
       overflow-y: auto;
     }
     .anatomy-section {
@@ -138,8 +144,9 @@
     /* Mobile: hide sidebar, stack normally */
     @media (max-width: 1100px) {
       html, body { height: auto; overflow: auto; }
-      .page { height: auto; }
-      .main { flex-direction: column; padding: 0 16px 16px; }
+      .page { flex-direction: column; height: auto; }
+      .left { height: auto; }
+      .main { padding: 0 16px 16px; }
       .anatomy-column { display: none; }
       .header { padding: 16px 16px 8px; }
     }
@@ -147,14 +154,14 @@
     /* TV adjustments */
     @media (min-width: 1600px) {
       .header { padding: 20px 32px 12px; }
-      .main { gap: 32px; padding: 0 32px 20px; }
+      .main { padding: 0 32px 20px; }
       h1 { font-size: 2rem; }
       .day-badge { font-size: 0.9rem; padding: 4px 12px; }
       .table td { padding: 12px 14px; font-size: 1rem; }
       .exercise-name { font-size: 1.1rem; }
       .reps, .weight { font-size: 0.95rem; }
       .muscle-tag { font-size: 0.75rem; padding: 3px 10px; }
-      .anatomy-column { width: 400px; }
+      .anatomy-column { width: 400px; padding: 20px 32px 20px 0; }
     }
 
     @keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }
@@ -163,52 +170,54 @@
 </head>
 <body>
   <div class="page">
-    <div class="header">
-      <p class="breadcrumb"><a href="../">Ash Pages</a> / <a href="index.html">Workouts</a> /</p>
-      <h1>💪 Workout Day</h1>
-      <div class="date-header">DATE_HERE</div>
-      <div class="day-badge">Day X — DESCRIPTION</div>
-    </div>
+    <!-- LEFT SIDE: header + workout -->
+    <div class="left">
+      <div class="header">
+        <p class="breadcrumb"><a href="../">Ash Pages</a> / <a href="index.html">Workouts</a> /</p>
+        <h1>💪 Workout Day</h1>
+        <div class="date-header">DATE_HERE</div>
+        <div class="day-badge">Day X — DESCRIPTION</div>
+      </div>
 
-    <div class="main">
-      <!-- WORKOUT COLUMN -->
-      <div class="workout-column" id="workoutColumn">
-        <!-- Main workout table -->
-        <div class="section">
-          <h2>Main Workout</h2>
-          <div class="table">
-            <table>
-              <thead><tr><th>#</th><th>Exercise</th><th>Reps</th><th>Weight</th><th>Muscles</th></tr></thead>
-              <tbody>
-                <!-- Fill in exercises -->
-              </tbody>
-            </table>
+      <div class="main">
+        <div class="workout-column" id="workoutColumn">
+          <!-- Main workout table -->
+          <div class="section">
+            <h2>Main Workout</h2>
+            <div class="table">
+              <table>
+                <thead><tr><th>#</th><th>Exercise</th><th>Reps</th><th>Weight</th><th>Muscles</th></tr></thead>
+                <tbody>
+                  <!-- Fill in exercises -->
+                </tbody>
+              </table>
+            </div>
+            <div class="note"><strong>Structure:</strong> 3 rounds, 60-90s rest</div>
           </div>
-          <div class="note"><strong>Structure:</strong> 3 rounds, 60-90s rest</div>
+
+          <!-- Core finisher -->
+        </div> <!-- /workout-column --
+      </div> <!-- /main --
+    </div> <!-- /left -->
+
+    <!-- RIGHT SIDE: anatomy sidebar — goes all the way to top -->
+    <div class="anatomy-column">
+      <div class="anatomy-section">
+        <div class="anatomy-header">
+          <div class="anatomy-title">📚 Muscle Reference</div>
         </div>
-
-        <!-- Core finisher -->
-      </div> <!-- /workout-column -->
-
-      <!-- ANATOMY SIDEBAR -->
-      <div class="anatomy-column">
-        <div class="anatomy-section">
-          <div class="anatomy-header">
-            <div class="anatomy-title">📚 Muscle Reference</div>
+        <div class="anatomy-diagrams">
+          <div class="diagram-container" id="diagram-anterior">
+            <h3>Anterior (Front)</h3>
+            <img src="workout/muscles-anterior-labeled.png" alt="Anterior muscles">
           </div>
-          <div class="anatomy-diagrams">
-            <div class="diagram-container" id="diagram-anterior">
-              <h3>Anterior (Front)</h3>
-              <img src="workout/muscles-anterior-labeled.png" alt="Anterior muscles">
-            </div>
-            <div class="diagram-container" id="diagram-posterior">
-              <h3>Posterior (Back)</h3>
-              <img src="workout/muscles-posterior-labeled.png" alt="Posterior muscles">
-            </div>
+          <div class="diagram-container" id="diagram-posterior">
+            <h3>Posterior (Back)</h3>
+            <img src="workout/muscles-posterior-labeled.png" alt="Posterior muscles">
           </div>
         </div>
-      </div> <!-- /anatomy-column -->
-    </div> <!-- /main -->
+      </div>
+    </div> <!-- /anatomy-column --
   </div> <!-- /page -->
 
   <div class="wake-locked" id="wakeLockStatus">Screen locked for workout</div>
