diff --git a/css/index.css b/css/index.css
index 3b4df15..f4aa969 100644
--- a/css/index.css
+++ b/css/index.css
@@ -284,8 +284,64 @@ body::before {
     border-color: rgb(var(--accent-rgb));
 }
 
+/* Nav bar */
 
+body {
+  font-family: "Lato", sans-serif;
+}
 
+.sidenav {
+  height: 100%;
+  width: 0;
+  position: fixed;
+  z-index: 2000;
+  top: 0;
+  left: 0;
+  background-color: var(--base);
+  overflow-x: hidden;
+  transition: 0.5s;
+  padding-top: 60px;
+
+}
+
+.sidenav a {
+  padding: 8px 8px 8px 32px;
+  text-decoration: none;
+  font-size: 25px;
+  color: var(--subtext-0);
+  display: block;
+  transition: 0.3s;
+}
+
+.sidenav a:hover {
+  color: var(--text);
+}
+
+.sidenav .closebtn {
+  position: absolute;
+  top: 0;
+  right: 25px;
+  font-size: 36px;
+  margin-left: 50px;
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 15px;}
+  .sidenav a {font-size: 18px;}
+}
+
+.hamburger {
+  position: fixed;
+  top: 1rem;
+  left: 1rem;
+  font-size: 30px;
+  cursor: pointer;
+  z-index: 1000;
+}
+
+.sidenav a.active {
+  color: var(--lavender);
+}
 /* ==========================================
 2. /coffee
 ============================================= */
diff --git a/dev-info/index.html b/dev-info/index.html
index 95cc58d..8bae885 100644
--- a/dev-info/index.html
+++ b/dev-info/index.html
@@ -79,6 +79,13 @@
 </head>
 
 <body>
+    <span class="hamburger" onclick="openNav()">&#9776;</span>
+    <div id="mySidenav" class="sidenav">
+        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
+        <a href="/">Index</a>
+        <a href="/dev-info/" class="active">Dev Info</a>
+        <a href="/hardware-info/">Hardware Info</a>
+    </div>
     <main class="intro">
         <header class="hub-header">
             <img class="pfp" src="/assets/media/avatar.webp" alt="Ari avatar" width="96" height="96"
diff --git a/hardware-info/index.html b/hardware-info/index.html
index 26eb6b4..da49406 100644
--- a/hardware-info/index.html
+++ b/hardware-info/index.html
@@ -79,6 +79,13 @@
 </head>
 
 <body>
+    <span class="hamburger" onclick="openNav()">&#9776;</span>
+    <div id="mySidenav" class="sidenav">
+        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
+        <a href="/">Index</a>
+        <a href="/dev-info/">Dev Info</a>
+        <a href="/hardware-info/" class="active">Hardware Info</a>
+    </div>
     <main class="intro">
         <header class="hub-header">
             <img class="pfp" src="/assets/media/avatar.webp" alt="Ari avatar" width="96" height="96"
diff --git a/index.html b/index.html
index c3704b6..2f118df 100644
--- a/index.html
+++ b/index.html
@@ -79,7 +79,17 @@
 </head>
 
 <body>
+    <span class="hamburger" onclick="openNav()">&#9776;</span>
+    <div id="mySidenav" class="sidenav">
+        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
+        <a href="/" class="active">Index</a>
+        <a href="/dev-info/">Dev Info</a>
+        <a href="/hardware-info/">Hardware Info</a>
+    </div>
+
+
     <main class="intro">
+        
         <header class="hub-header">
             <img class="pfp" src="assets/media/avatar.webp" alt="Ari avatar" width="96" height="96"
                 fetchpriority="high">
@@ -116,9 +126,9 @@
         <img src="/assets/88x31/transnow2.gif" alt="Melt Ice" loading="lazy">
     </aside>
 </body>
-<script src="js/index.js"></script>
-<script src="js/flavors.js"></script>
-<script src="js/cat.js"></script>
+<script src="/js/index.js"></script>
+<script src="/js/flavors.js"></script>
+<script src="/js/cat.js"></script>
 <script src="/js/heatmap.js"></script>
 <script>ContribHeatmap.render("#contrib", { theme: "trans" });</script>
 
diff --git a/js/index.js b/js/index.js
index 3b21aa9..28d6317 100644
--- a/js/index.js
+++ b/js/index.js
@@ -23,3 +23,11 @@ function loadArt() {
     })
     .catch(function () {});
 }
+
+function openNav() {
+  document.getElementById("mySidenav").style.width = "250px";
+}
+
+function closeNav() {
+  document.getElementById("mySidenav").style.width = "0";
+}
\ No newline at end of file
