diff --git a/index.html b/index.html
index 1f5ceb5..66b4fb0 100644
--- a/index.html
+++ b/index.html
@@ -14,94 +14,6 @@
         <p>Interactive simulation of a swerve drive robot with configurable size, speeds, and number of wheels</p>
     </header>
     <main>
-        <section class="visualization-canvas">
-            <h2>Robot Visualization</h2>
-            <canvas id="swerve-canvas" width="800" height="800"></canvas>
-        </section>
-
-        <section class="control-panel">
-            <h2>Drive Controls</h2>
-
-            <fieldset>
-                <legend>Translation &amp; Rotation</legend>
-
-                <div class="control-group">
-                    <label for="vy-slider">Move Forward/Backward (pixels/s)</label>
-                    <input type="range" id="vy-slider" min="-300" max="300" step="10" value="0">
-                    <output id="vy-value">0</output>
-                </div>
-
-                <div class="control-group">
-                    <label for="vx-slider">Strafe Left/Right (pixels/s)</label>
-                    <input type="range" id="vx-slider" min="-300" max="300" step="10" value="0">
-                    <output id="vx-value">0</output>
-                </div>
-
-                <div class="control-group">
-                    <label for="omega-slider">Rotation (rad/s)</label>
-                    <input type="range" id="omega-slider" min="-3" max="3" step="0.1" value="0">
-                    <output id="omega-value">0</output>
-                </div>
-
-                <button id="reset-btn" type="button">Reset Controls</button>
-            </fieldset>
-
-            <fieldset>
-                <legend>Performance Limits</legend>
-
-                <div class="control-group">
-                    <label for="max-speed-slider">Max Module Speed (pixels/s)</label>
-                    <input type="range" id="max-speed-slider" min="200" max="1000" step="10" value="400">
-                    <output id="max-speed-value">0</output>
-                </div>
-            </fieldset>
-        </section>
-        <section class="config-panel">
-            <h2>Robot Configuration</h2>
-            <fieldset>
-                <legend>Quick Presets</legend>
-                <div class="preset-buttons">
-                    <button id="preset-2wheel" type="button">2-Wheel</button>
-                    <button id="preset-3wheel" type="button">3-Wheel Triangle</button>
-                    <button id="preset-4wheel" type="button">4-Wheel Square</button>
-                    <button id="preset-4rect" type="button">4-Wheel Rectangle</button>
-                    <button id="preset-6wheel" type="button">6-Wheel Hexagon</button>
-                    <button id="preset-8wheel" type="button">8-Wheel Octagon</button>
-                    <button id="preset-8square" type="button">8-Wheel Square</button>
-                    <button id="preset-12hex" type="button">12-Wheel Hexagon</button>
-                    <button id="preset-16oct" type="button">16-Wheel Octogon</button>
-                </div>
-            </fieldset>
-            <fieldset>
-                <legend>Custom Configuration</legend>
-
-                <div class="control-group">
-                    <label for="module-count">Number of Modules</label>
-                    <input type="number" id="module-count" min="2" max="12" value="4" step="1">
-                </div>
-
-                <button id="generate-inputs-btn" type="button">Generate Position Inputs</button>
-                <button id="delete-inputs-btn" type="button">Remove Position Inputs</button>
-
-                <div id="module-position-inputs" class="position-inputs">
-                    <!-- Dynamically generated position inputs will appear here -->
-                </div>
-
-                <button id="apply-custom-btn" type="button" style="display: none;">Apply Custom Configuration</button>
-            </fieldset>
-        </section>
-        <section class="module-states">
-            <h2>Module States</h2>
-            <div id="current-config-info" class="config-info">
-                Current Configuration: <strong id="config-name">4-Wheel Rectangle</strong>
-                (<span id="module-count-display">4</span> modules)
-                <br>
-                Gyro Heading: <strong id="gyro-heading-display">0.0°</strong>
-            </div>
-            <div class="module-grid" id="module-grid">
-                <!-- Dynamically generated module data will appear here -->
-            </div>
-        </section>
         <section class="documentation">
             <h2>About This Project</h2>
             <details>
@@ -275,6 +187,95 @@ if scale &lt; 1:
                 </div>
             </details>
         </section>
+        <section class="visualization-canvas">
+            <h2>Robot Visualization</h2>
+            <canvas id="swerve-canvas" width="800" height="800"></canvas>
+        </section>
+
+        <section class="control-panel">
+            <h2>Drive Controls</h2>
+
+            <fieldset>
+                <legend>Translation &amp; Rotation</legend>
+
+                <div class="control-group">
+                    <label for="vy-slider">Move Forward/Backward (pixels/s)</label>
+                    <input type="range" id="vy-slider" min="-300" max="300" step="10" value="0">
+                    <output id="vy-value">0</output>
+                </div>
+
+                <div class="control-group">
+                    <label for="vx-slider">Strafe Left/Right (pixels/s)</label>
+                    <input type="range" id="vx-slider" min="-300" max="300" step="10" value="0">
+                    <output id="vx-value">0</output>
+                </div>
+
+                <div class="control-group">
+                    <label for="omega-slider">Rotation (rad/s)</label>
+                    <input type="range" id="omega-slider" min="-3" max="3" step="0.1" value="0">
+                    <output id="omega-value">0</output>
+                </div>
+
+                <button id="reset-btn" type="button">Reset Controls</button>
+            </fieldset>
+
+            <fieldset>
+                <legend>Performance Limits</legend>
+
+                <div class="control-group">
+                    <label for="max-speed-slider">Max Module Speed (pixels/s)</label>
+                    <input type="range" id="max-speed-slider" min="200" max="1000" step="10" value="400">
+                    <output id="max-speed-value">0</output>
+                </div>
+            </fieldset>
+        </section>
+        <section class="config-panel">
+            <h2>Robot Configuration</h2>
+            <fieldset>
+                <legend>Quick Presets</legend>
+                <div class="preset-buttons">
+                    <button id="preset-2wheel" type="button">2-Wheel</button>
+                    <button id="preset-3wheel" type="button">3-Wheel Triangle</button>
+                    <button id="preset-4wheel" type="button">4-Wheel Square</button>
+                    <button id="preset-4rect" type="button">4-Wheel Rectangle</button>
+                    <button id="preset-6wheel" type="button">6-Wheel Hexagon</button>
+                    <button id="preset-8wheel" type="button">8-Wheel Octagon</button>
+                    <button id="preset-8square" type="button">8-Wheel Square</button>
+                    <button id="preset-12hex" type="button">12-Wheel Hexagon</button>
+                    <button id="preset-16oct" type="button">16-Wheel Octogon</button>
+                </div>
+            </fieldset>
+            <fieldset>
+                <legend>Custom Configuration</legend>
+
+                <div class="control-group">
+                    <label for="module-count">Number of Modules</label>
+                    <input type="number" id="module-count" min="2" max="12" value="4" step="1">
+                </div>
+
+                <button id="generate-inputs-btn" type="button">Generate Position Inputs</button>
+                <button id="delete-inputs-btn" type="button">Remove Position Inputs</button>
+
+                <div id="module-position-inputs" class="position-inputs">
+                    <!-- Dynamically generated position inputs will appear here -->
+                </div>
+
+                <button id="apply-custom-btn" type="button" style="display: none;">Apply Custom Configuration</button>
+            </fieldset>
+        </section>
+        <section class="module-states">
+            <h2>Module States</h2>
+            <div id="current-config-info" class="config-info">
+                Current Configuration: <strong id="config-name">4-Wheel Rectangle</strong>
+                (<span id="module-count-display">4</span> modules)
+                <br>
+                Gyro Heading: <strong id="gyro-heading-display">0.0°</strong>
+            </div>
+            <div class="module-grid" id="module-grid">
+                <!-- Dynamically generated module data will appear here -->
+            </div>
+        </section>
+
     </main>
 
     <script type="module" src="vendor/lucio/graham-scan.mjs"></script>
diff --git a/styles.css b/styles.css
index 28482b6..ac06d96 100644
--- a/styles.css
+++ b/styles.css
@@ -238,7 +238,7 @@ tr:hover {
 
 .visualization-area {
   grid-column: 1 / 2;
-  grid-row: 1 / 3;
+  grid-row: 2 / 4;
 }
 
 #swerve-canvas {
@@ -252,22 +252,22 @@ tr:hover {
 
 .controls-panel {
   grid-column: 1 / 2;
-  grid-row: 2 / 3;
+  grid-row: 3 / 4;
 }
 
 .config-panel {
   grid-column: 2 / 3;
-  grid-row: 1 / 2;
+  grid-row: 2 / 3;
 }
 
 .module-states {
   grid-column: 2 / 3;
-  grid-row: 2 / 3;
+  grid-row: 3 / 4;
 }
 
 .documentation {
   grid-column: 1 / 3;
-  grid-row: 4 / 5;
+  grid-row: 1 / 2;
 }
 
 fieldset {