diff --git a/img/icons/hamburger.png b/img/icons/hamburger.png
new file mode 100644
index 0000000..cb4b079
Binary files /dev/null and b/img/icons/hamburger.png differ
diff --git a/index.html b/index.html
index f746406..1ded21d 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="scroll-smooth">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -11,10 +11,14 @@
 <body class="font-sans text-lavender bg-deep-purple">
   <nav class="absolute flex flex-row items-center justify-between flex-none w-full px-5 py-5 lg:px-12 bg-deep-purple">
     <h3 class="text-2xl">DandyHacks &OpenCurlyQuote;23</h3>
-    <div class="flex flex-row items-start hidden font-bold gap-16">
-      <a href="#about">About</a>
-      <a href="#faq">FAQ</a>
-      <a href="#sponsoring">Sponsoring</a>
+    <div>
+      <input class="absolute z-20 w-8 h-8 opacity-0 peer lg:hidden" type="checkbox" />
+      <img class="lg:hidden" src="img/icons/hamburger.png" />
+      <ul class="fixed top-0 right-0 z-10 flex flex-col h-full pt-16 text-3xl font-bold transition-transform ease-in-out gap-8 lg:flex-row lg:text-xl px-9 lg:p-0 w-72 bg-violet peer-checked:translate-x-0 translate-x-72 lg:bg-deep-purple lg:translate-x-0 lg:w-fit lg:h-fit lg:relative lg:gap-16 lg:transition-none">
+        <li class="text-right"><a href="#about">About</a></li>
+        <li class="text-right"><a href="#faq">FAQ</a></li>
+        <li class="hidden text-right lg:block"><a href="#sponsoring">Sponsoring</a></li>
+      </ul>
     </div>
     <a id="mlh-trust-badge" style="
           display: block;
@@ -24,7 +28,6 @@ <h3 class="text-2xl">DandyHacks &OpenCurlyQuote;23</h3>
           right: 50px;
           top: 100%;
           width: 10%;
-          z-index: 10000;
         "
       href="https://mlh.io/na?utm_source=na-hackathon&utm_medium=TrustBadge&utm_campaign=2024-season&utm_content=white"
       target="_blank"><img
@@ -46,7 +49,7 @@ <h2 class="text-2xl lg:text-4xl text-purple">November 3-5</h2>
       </div>
     </div>
   </div>
-  <div class="flex flex-row items-center justify-center bg-violet gap-[77px]">
+  <div id="about" class="flex flex-row items-center justify-center bg-violet gap-[77px]">
     <img class="hidden lg:self-start lg:block" src="img/sticker2.png" />
     <div class="px-9 lg:px-0 lg:flex-[0_0_454px] flex flex-col gap-7 lg:gap-14 mb-16 lg:mb-[150px]">
       <h2 class="text-2xl lg:text-5xl">What is DandyHacks?</h2>
@@ -69,7 +72,7 @@ <h2 class="text-2xl lg:text-5xl">What is DandyHacks?</h2>
     </div>
     <img class="hidden lg:block lg:relative b-[150px]" src="img/sticker1.png" />
   </div>
-  <div class="px-5 lg:bg-repeat-y lg:bg-center-top lg:bg-fireflies lg:px-0">
+  <div id="faq" class="px-5 lg:bg-repeat-y lg:bg-center-top lg:bg-fireflies lg:px-0">
     <div class="flex flex-col items-center py-24 box-border gap-12 lg:gap-20">
       <h2 class="text-5xl">FAQS</h2>
       <div class="flex flex-col px-10 py-4 lg:py-0 gap-5 lg:px-0">
@@ -160,7 +163,7 @@ <h2 class="text-5xl">FAQS</h2>
         </details>
       </div>
     </div>
-    <div class="flex-col items-center hidden mb-24 lg:flex gap-20">
+    <div id="sponsoring" class="flex-col items-center hidden mb-24 lg:flex gap-20">
       <h2 class="text-5xl">Sponsoring</h2>
       <div class="flex flex-row gap-24">
         <div class="flex flex-col w-[434px] bg-violet rounded-3xl p-12 text-xl">
@@ -204,11 +207,21 @@ <h3 class="text-3xl text-center pb-7">Why sponsor?</h3>
         <a href="https://twitter.com/dandyhacks"><img src="img/social/twitter.svg"></a>
       </div>
     </div>
-    <div class="flex flex-col items-center gap-5 mb-5 lg:mb-0">
+    <div class="flex flex-col items-center mb-5 gap-5 lg:mb-0">
       <a class="font-bold" href="http://mlh.io/code-of-conduct" target="_blank"><span>MLH Code of Conduct</span></a>
       <span>© 2023 DandyHacks</span>
     </div>
   </footer>
+  <script>
+    let navigationLinks = document.querySelectorAll('nav li');
+    let hamburgerCheckbox = document.querySelector('nav .peer');
+
+    navigationLinks.forEach(navigationLink => {
+      navigationLink.addEventListener('click', e => {
+        hamburgerCheckbox.checked = false;
+      });
+    });
+  </script>
 </body>
 
 </html>
diff --git a/styles.css b/styles.css
index 5a3fecd..0a40cf3 100644
--- a/styles.css
+++ b/styles.css
@@ -643,6 +643,18 @@ h1, h2, h3, h4, h5, h6 {
   inset-inline-end: 0.25rem;
 }
 
+.left-0 {
+  left: 0px;
+}
+
+.top-0 {
+  top: 0px;
+}
+
+.right-0 {
+  right: 0px;
+}
+
 .isolate {
   isolation: isolate;
 }
@@ -651,6 +663,14 @@ h1, h2, h3, h4, h5, h6 {
   isolation: auto;
 }
 
+.z-10 {
+  z-index: 10;
+}
+
+.z-20 {
+  z-index: 20;
+}
+
 .float-right {
   float: right;
 }
@@ -691,14 +711,14 @@ h1, h2, h3, h4, h5, h6 {
   margin-bottom: 6rem;
 }
 
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
 .mb-5 {
   margin-bottom: 1.25rem;
 }
 
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
 .box-border {
   box-sizing: border-box;
 }
@@ -802,6 +822,28 @@ h1, h2, h3, h4, h5, h6 {
   height: 100vh;
 }
 
+.h-full {
+  height: 100%;
+}
+
+.h-max {
+  height: -moz-max-content;
+  height: max-content;
+}
+
+.h-min {
+  height: -moz-min-content;
+  height: min-content;
+}
+
+.h-5 {
+  height: 1.25rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
 .w-\[434px\] {
   width: 434px;
 }
@@ -810,6 +852,40 @@ h1, h2, h3, h4, h5, h6 {
   width: 100%;
 }
 
+.w-max {
+  width: -moz-max-content;
+  width: max-content;
+}
+
+.w-min {
+  width: -moz-min-content;
+  width: min-content;
+}
+
+.w-5 {
+  width: 1.25rem;
+}
+
+.w-8 {
+  width: 2rem;
+}
+
+.w-96 {
+  width: 24rem;
+}
+
+.w-52 {
+  width: 13rem;
+}
+
+.w-80 {
+  width: 20rem;
+}
+
+.w-72 {
+  width: 18rem;
+}
+
 .flex-none {
   flex: none;
 }
@@ -854,6 +930,11 @@ h1, h2, h3, h4, h5, h6 {
   border-collapse: separate;
 }
 
+.translate-x-72 {
+  --tw-translate-x: 18rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .\!transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
 }
@@ -1370,18 +1451,14 @@ h1, h2, h3, h4, h5, h6 {
   gap: 1.75rem;
 }
 
-.gap-\[77px\] {
-  gap: 77px;
-}
-
-.gap-10 {
-  gap: 2.5rem;
-}
-
 .gap-8 {
   gap: 2rem;
 }
 
+.gap-\[77px\] {
+  gap: 77px;
+}
+
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -1843,10 +1920,6 @@ h1, h2, h3, h4, h5, h6 {
   background-image: url('img/website-bg.svg');
 }
 
-.bg-groundboi {
-  background-image: url('img/sticker2-no_border.png');
-}
-
 .decoration-slice {
   -webkit-box-decoration-break: slice;
           box-decoration-break: slice;
@@ -1867,10 +1940,6 @@ h1, h2, h3, h4, h5, h6 {
           box-decoration-break: clone;
 }
 
-.bg-\[length\:344px_auto\] {
-  background-size: 344px auto;
-}
-
 .bg-cover {
   background-size: cover;
 }
@@ -1908,10 +1977,6 @@ h1, h2, h3, h4, h5, h6 {
   background-position: center bottom;
 }
 
-.bg-center-top {
-  background-position: center top;
-}
-
 .bg-repeat {
   background-repeat: repeat;
 }
@@ -1977,16 +2042,19 @@ h1, h2, h3, h4, h5, h6 {
   padding: 3rem;
 }
 
+.p-9 {
+  padding: 2.25rem;
+}
+
+.p-20 {
+  padding: 5rem;
+}
+
 .px-10 {
   padding-left: 2.5rem;
   padding-right: 2.5rem;
 }
 
-.px-24 {
-  padding-left: 6rem;
-  padding-right: 6rem;
-}
-
 .px-5 {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
@@ -2002,11 +2070,6 @@ h1, h2, h3, h4, h5, h6 {
   padding-right: 2.25rem;
 }
 
-.py-12 {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-}
-
 .py-24 {
   padding-top: 6rem;
   padding-bottom: 6rem;
@@ -2026,6 +2089,10 @@ h1, h2, h3, h4, h5, h6 {
   padding-bottom: 1.75rem;
 }
 
+.pt-16 {
+  padding-top: 4rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -2257,6 +2324,10 @@ h1, h2, h3, h4, h5, h6 {
   -moz-osx-font-smoothing: auto;
 }
 
+.opacity-0 {
+  opacity: 0;
+}
+
 .bg-blend-normal {
   background-blend-mode: normal;
 }
@@ -2511,6 +2582,12 @@ h1, h2, h3, h4, h5, h6 {
   transition-duration: 150ms;
 }
 
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
@@ -2661,6 +2738,11 @@ details p {
   text-align: center;
 }
 
+.peer:checked ~ .peer-checked\:translate-x-0 {
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 @media (min-width: 640px) {
   .sm\:underline {
     text-decoration-line: underline;
@@ -2668,18 +2750,22 @@ details p {
 }
 
 @media (min-width: 1024px) {
-  .lg\:relative {
-    position: relative;
+  .lg\:static {
+    position: static;
   }
 
-  .lg\:mb-\[150px\] {
-    margin-bottom: 150px;
+  .lg\:relative {
+    position: relative;
   }
 
   .lg\:mb-0 {
     margin-bottom: 0px;
   }
 
+  .lg\:mb-\[150px\] {
+    margin-bottom: 150px;
+  }
+
   .lg\:block {
     display: block;
   }
@@ -2692,10 +2778,29 @@ details p {
     display: flex;
   }
 
+  .lg\:hidden {
+    display: none;
+  }
+
+  .lg\:h-fit {
+    height: -moz-fit-content;
+    height: fit-content;
+  }
+
+  .lg\:w-fit {
+    width: -moz-fit-content;
+    width: fit-content;
+  }
+
   .lg\:flex-\[0_0_454px\] {
     flex: 0 0 454px;
   }
 
+  .lg\:translate-x-0 {
+    --tw-translate-x: 0px;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+
   .lg\:flex-row {
     flex-direction: row;
   }
@@ -2724,10 +2829,28 @@ details p {
     gap: 5rem;
   }
 
+  .lg\:gap-16 {
+    gap: 4rem;
+  }
+
   .lg\:self-start {
     align-self: flex-start;
   }
 
+  .lg\:bg-lavender {
+    --tw-bg-opacity: 1;
+    background-color: rgb(229 204 255 / var(--tw-bg-opacity));
+  }
+
+  .lg\:bg-deep-purple {
+    --tw-bg-opacity: 1;
+    background-color: rgb(27 0 44 / var(--tw-bg-opacity));
+  }
+
+  .lg\:bg-opacity-0 {
+    --tw-bg-opacity: 0;
+  }
+
   .lg\:bg-fireflies {
     background-image: url('img/website-bg2.png');
   }
@@ -2752,6 +2875,10 @@ details p {
     background-repeat: repeat-y;
   }
 
+  .lg\:p-0 {
+    padding: 0px;
+  }
+
   .lg\:px-0 {
     padding-left: 0px;
     padding-right: 0px;
@@ -2767,26 +2894,26 @@ details p {
     padding-right: 3rem;
   }
 
-  .lg\:py-0 {
-    padding-top: 0px;
-    padding-bottom: 0px;
-  }
-
-  .lg\:py-5 {
-    padding-top: 1.25rem;
-    padding-bottom: 1.25rem;
-  }
-
   .lg\:px-24 {
     padding-left: 6rem;
     padding-right: 6rem;
   }
 
+  .lg\:py-0 {
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+
   .lg\:py-12 {
     padding-top: 3rem;
     padding-bottom: 3rem;
   }
 
+  .lg\:py-5 {
+    padding-top: 1.25rem;
+    padding-bottom: 1.25rem;
+  }
+
   .lg\:text-2xl {
     font-size: 1.5rem;
     line-height: 2rem;
@@ -2811,6 +2938,10 @@ details p {
     font-size: 1.25rem;
     line-height: 1.75rem;
   }
+
+  .lg\:transition-none {
+    transition-property: none;
+  }
 }
 
 @media (prefers-color-scheme: dark) {
