diff --git a/index.html b/index.html
index e69de29..51e337c 100644
--- a/index.html
+++ b/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Swerve Drive Visualizer</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <header>
+        <h1>Swerve Drive Movement Visualizer</h1>
+        <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="600" height="600"></canvas>
+        </section>
+
+        <section class="control-panel">
+            <h2>Drive Controls</h2>
+            <!--  Controls here, e.g. robot speed -->
+        </section>
+        <section class="config-panel">
+            <h2>Robot Configuration</h2>
+            <!--  Configurations here, e.g. module positions, robot size, presets for all settings -->
+        </section>
+        <section class="module-states">
+            <h2>Module States</h2>
+            <!--  Output display for the swerve modules. This will be dynamically generated by javascript  -->
+        </section>
+        <section class="documentation">
+            <h2>About This Project</h2>
+            <details>
+                <summary>How To Use</summary>
+            </details>
+            <details>
+                <summary>Explaination of Swerve Kinematics</summary>
+            </details>
+        </section>
+    </main>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/style.css b/styles.css
similarity index 100%
rename from style.css
rename to styles.css
