diff --git a/app/javascript/application.js b/app/javascript/application.js
index f806ca27..188ec610 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -1,2 +1,11 @@
 // Entry point for the build script in your package.json
 import "@hotwired/turbo-rails";
+
+document.addEventListener("DOMContentLoaded", function () {
+  const hamburgerMenu = document.getElementById("hamburger-menu");
+  const menuList = document.getElementById("menu-list");
+
+  hamburgerMenu.addEventListener("click", function () {
+    menuList.classList.toggle("hidden");
+  });
+});
diff --git a/app/views/shared/_hamburger_menu.html.erb b/app/views/shared/_hamburger_menu.html.erb
new file mode 100644
index 00000000..01a75dfa
--- /dev/null
+++ b/app/views/shared/_hamburger_menu.html.erb
@@ -0,0 +1,12 @@
+<div class="navigation text-5xl nav text-right">
+  <button id="hamburger-menu">
+   ☰
+  </button>
+  <ul id="menu-list" class="hidden text-sm">
+    <li>Air quality forecast</li>
+    <li>Alerts</li>
+    <li>Health information</li>
+    <li>About</li>
+    <li>Contact</li>
+  </ul>
+</div>
diff --git a/app/views/shared/_header.html.erb b/app/views/shared/_header.html.erb
index a43866d8..d6192e28 100644
--- a/app/views/shared/_header.html.erb
+++ b/app/views/shared/_header.html.erb
@@ -9,10 +9,8 @@
         Air Quality Service
       </div>
     </div>
-    <div class="navigation text-5xl">
-      <div class="nav text-right">
-        ☰
-      </div>
-    </div>
+    <nav>
+      <%= render 'shared/hamburger_menu' %>
+    </nav>
   </div>
 </header>