diff --git a/public/assets/img/close.svg b/public/assets/img/close.svg
new file mode 100644
index 00000000..b5db36c0
--- /dev/null
+++ b/public/assets/img/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
\ No newline at end of file
diff --git a/public/assets/img/hamburger.svg b/public/assets/img/hamburger.svg
new file mode 100644
index 00000000..e8030bb6
--- /dev/null
+++ b/public/assets/img/hamburger.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
\ No newline at end of file
diff --git a/src/components/global/hamburger.astro b/src/components/global/hamburger.astro
new file mode 100644
index 00000000..f9d88ada
--- /dev/null
+++ b/src/components/global/hamburger.astro
@@ -0,0 +1,36 @@
+<div class="text-white size-6">
+  <button id="open" class="w-auto h-auto lg:hidden">
+    <img src="../../public/assets/img/hamburger.svg" alt="hamburger" />
+  </button>
+  <div
+    id="list"
+    class="z-10 bg-[#000] fixed top-0 right-0 flex flex-col w-[60%] h-full p-4"
+    style="display: none;"
+  >
+    <button id="close" class="size-6">
+      <img src="../../public/assets/img/close.svg" alt="close" />
+    </button>
+    <ol class="[&>li]:py-2">
+      <li><a href="/#about" class="font-normal">About</a></li>
+      <li><a href="/#news" class="font-normal">News</a></li>
+      <li><a href="/#gi" class="font-normal">Get Involved</a></li>
+      <li><a href="/#sponsors" class="font-normal">Sponsors</a></li>
+    </ol>
+  </div>
+
+  <script>
+    const openButton = document.getElementById("open");
+    const list = document.getElementById("list");
+    const closeButton = document.getElementById("close");
+
+    if (list && openButton && closeButton) {
+      openButton.addEventListener("click", () => {
+        list.style.display = "block";
+      });
+
+      closeButton.addEventListener("click", () => {
+        list.style.display = "none";
+      });
+    }
+  </script>
+</div>
diff --git a/src/components/global/navigation.astro b/src/components/global/navigation.astro
index 1878fa11..171ba7bf 100644
--- a/src/components/global/navigation.astro
+++ b/src/components/global/navigation.astro
@@ -1,3 +1,7 @@
+---
+import Hamburger from "./hamburger.astro";
+---
+
 <header class="p-[20px] bg-[#000] relative">
   <div id="header-blobs" class="absolute pointer-events-none z-10 top-0 left-0">
     <img src="/assets/img/header-eclipse.svg" alt="Header Gradient Blobs" />
@@ -24,5 +28,6 @@
         Donate
       </a>
     </div>
+    <Hamburger />
   </div>
 </header>