diff --git a/assets/scss/components/_navbar.scss b/assets/scss/components/_navbar.scss
index 5b296f0bbd..f009a474db 100644
--- a/assets/scss/components/_navbar.scss
+++ b/assets/scss/components/_navbar.scss
@@ -514,7 +514,7 @@ $navNumOfItemBlocks: 4;
 
 .header .menu-btn:checked ~ .menu {
   // if adding list items from menu, update below
-  max-height: 600px;
+  max-height: 1400px;
 }
 
 .header .menu-btn:checked ~ .menu-icon .navicon {
@@ -552,6 +552,66 @@ $navNumOfItemBlocks: 4;
   }
 }
 
+// Mobile dropdown styles
+.mobile-dropdown-header {
+  display: flex;
+  align-items: center;
+
+  a {
+    flex: 1;
+    text-transform: uppercase;
+  }
+
+  .mobile-dropdown-toggle {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 20px;
+    color: inherit;
+    font-size: 0.9rem;
+    line-height: 1;
+
+    .fa-chevron-down {
+      transition: transform 0.2s ease-out;
+    }
+
+    &:hover {
+      background-color: #c40729;
+      color: white;
+    }
+  }
+}
+
+.mobile-dropdown {
+  &.open .fa-chevron-down {
+    transform: rotate(180deg);
+  }
+}
+
+.mobile-submenu {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  background: #f0f0f0;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.2s ease-out;
+
+  li a {
+    padding: 14px 20px 14px 36px;
+    font-size: 0.9rem;
+
+    &:hover {
+      background-color: #c40729;
+      color: white;
+    }
+  }
+}
+
+.mobile-dropdown.open .mobile-submenu {
+  max-height: 500px;
+}
+
 @media only screen and (min-width: 1050px) {
   .navbar-items {
     display: flex;
diff --git a/layouts/partials/navbar_temp.html b/layouts/partials/navbar_temp.html
index 3d064d5f29..9d6fe00338 100644
--- a/layouts/partials/navbar_temp.html
+++ b/layouts/partials/navbar_temp.html
@@ -86,20 +86,61 @@
   <input class="menu-btn" type="checkbox" id="menu-btn" />
   <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
   <ul class="menu">
-    <li><a href="/about">ABOUT</a></li>
-    <li>
-      <a
-        href="https://docs.google.com/spreadsheets/d/171SP2PWsn6LUza4QzX0nNi2-qwFZnKN-2Q8ERwGkV6o"
-        >BUDGET</a
-      >
+    <li class="mobile-dropdown">
+      <div class="mobile-dropdown-header">
+        <a href="/about">ABOUT</a>
+        <button class="mobile-dropdown-toggle" aria-label="Toggle submenu">
+          <i class="fa fa-chevron-down"></i>
+        </button>
+      </div>
+      <ul class="mobile-submenu">
+        <li><a href="/about/team">THE TEAM</a></li>
+        <li><a href="/about/governance">GOVERNANCE</a></li>
+        <li><a href="/partnerships">PARTNER WITH US</a></li>
+        <li>
+          <a
+            href="https://docs.google.com/spreadsheets/d/171SP2PWsn6LUza4QzX0nNi2-qwFZnKN-2Q8ERwGkV6o"
+            target="_blank"
+            >BUDGET</a
+          >
+        </li>
+      </ul>
     </li>
-    <li><a href="/events">EVENTS</a></li>
-    <li>
-      <!-- <a href="https://carletoncss.myshopify.com/collections/all">SHOP</a> -->
+    <li class="mobile-dropdown">
+      <div class="mobile-dropdown-header">
+        <a href="/events">EVENTS</a>
+        <button class="mobile-dropdown-toggle" aria-label="Toggle submenu">
+          <i class="fa fa-chevron-down"></i>
+        </button>
+      </div>
+      <ul class="mobile-submenu">
+        <li><a href="/jobuary">JOBUARY</a></li>
+        <li><a href="/hackthetunnels">HACK THE TUNNELS</a></li>
+        <li><a href="/events/weekofawesome">WEEK OF AWESOME</a></li>
+      </ul>
     </li>
     <li><a href="/news">NEWS</a></li>
-    <li><a href="/blog">BLOG</a></li>
+    <li class="mobile-dropdown">
+      <div class="mobile-dropdown-header">
+        <a href="#">COMMUNITY</a>
+        <button class="mobile-dropdown-toggle" aria-label="Toggle submenu">
+          <i class="fa fa-chevron-down"></i>
+        </button>
+      </div>
+      <ul class="mobile-submenu">
+        <li><a href="/blog">BLOG</a></li>
+        <li><a href="/community/organizations">ORGANIZATIONS</a></li>
+      </ul>
+    </li>
     <li><a href="/volunteer">VOLUNTEER</a></li>
     <li><a href="/resources/">RESOURCES</a></li>
   </ul>
 </header>
+
+<script>
+  document.querySelectorAll(".mobile-dropdown-toggle").forEach(function (btn) {
+    btn.addEventListener("click", function () {
+      btn.closest(".mobile-dropdown").classList.toggle("open");
+    });
+  });
+</script>