diff --git a/Sources/ViewController/Views/MainPage.swift b/Sources/ViewController/Views/MainPage.swift
index 89387e9..ff57736 100644
--- a/Sources/ViewController/Views/MainPage.swift
+++ b/Sources/ViewController/Views/MainPage.swift
@@ -21,8 +21,13 @@ public struct MainPage<Inner: HTML>: SendableHTMLDocument where Inner: Sendable
 
   public var body: some HTML {
     div(.class("bg-white dark:bg-gray-800 dark:text-white")) {
+      Sidebar()
       inner
     }
+    script(.src("https://unpkg.com/lucide@latest")) {}
+    script {
+      "lucide.createIcons();"
+    }
   }
 }
 
diff --git a/Sources/ViewController/Views/Sidebar.swift b/Sources/ViewController/Views/Sidebar.swift
new file mode 100644
index 0000000..d40371f
--- /dev/null
+++ b/Sources/ViewController/Views/Sidebar.swift
@@ -0,0 +1,39 @@
+import Elementary
+
+struct Sidebar: HTML {
+
+  var body: some HTML {
+    div(
+      .class(
+        """
+          h-screen w-64 border-r-3 bg-gray-100 shadow space-y-4
+        """)
+    ) {
+      row(title: "Project", icon: "map-pin")
+      row(title: "Rooms", icon: "door-closed")
+      row(title: "Equivalent Lengths", icon: "ruler-dimension-line")
+      row(title: "Friction Rate", icon: "square-function")
+      row(title: "Duct Sizes", icon: "wind")
+    }
+  }
+
+  func row(
+    title: String,
+    icon: String
+  ) -> some HTML {
+    button(
+      .class(
+        """
+        flex w-full jusitfy-between items-center text-gray-800 hover:bg-gray-300
+        """
+      )
+    ) {
+      i(.data("lucide", value: icon)) {}
+      p(
+        .class("text-2xl flex-1")
+      ) {
+        title
+      }
+    }
+  }
+}