diff --git a/public/css/style.css b/public/css/style.css
index 467f452..ea4e362 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -65,25 +65,25 @@ footer {
   height: 100%;
 }
 
-nav {
+.nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-nav > div:first-child {
+.nav > div:first-child {
   margin-left: 1.25rem;
 }
-nav > div:last-child {
+.nav > div:last-child {
   margin-right: 1rem;
 }
-nav > * {
+.nav > * {
   width: 33.33%;
 }
-nav .hamburger {
+.nav .hamburger {
   border: none;
   background-color: transparent;
 }
-nav .hamburger ion-icon {
+.nav .hamburger ion-icon {
   margin-top: 0.15rem;
 }
 .nav-logo > img {
@@ -131,7 +131,6 @@ nav .hamburger ion-icon {
 .nav-hyperlinks li[data-mobile] {
   display: list-item;
 }
-
 .nav-hyperlinks a span {
   display: inline-block;
   overflow: hidden;
@@ -140,11 +139,94 @@ nav .hamburger ion-icon {
   transition: max-width 0.25s linear;
   margin-left: 0.25rem;
 }
-
 .nav-hyperlinks a:hover span {
   max-width: 100px;
 }
 
+.mobile-nav {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  bottom: 0;
+  top: 0;
+  right: 0;
+  width: 400px;
+  border-left: var(--borders);
+  transform: translateX(100%);
+  transition: transform 0.25s ease-in-out;
+  z-index: 1000;
+
+  /* I want the background to be white with a tan overlay.
+   * TODO: see if there's a way to do this without linear-gradient so I can change the base "white" color for dark mode */
+  background-color: white;
+  background-image: linear-gradient(rgba(var(--tan), 0.12), rgba(var(--tan), 0.12));
+  background-blend-mode: multiply;
+}
+.mobile-nav.show {
+  transform: none;
+}
+.mobile-nav .hamburger {
+  border: none;
+  background-color: transparent;
+}
+.mobile-nav .hamburger ion-icon {
+  margin-top: 0.15rem;
+  font-size: 28px;
+}
+.mobile-nav-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: rgba(var(--tan), 1);
+  width: 100%;
+  padding: 1rem;
+}
+.mobile-nav-header h1 {
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+.mobile-nav ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.mobile-nav ul li {
+  border-bottom: var(--borders);
+}
+.mobile-nav ul li:first-child {
+  border-top: var(--borders);
+}
+.mobile-nav ul li:hover {
+  background-color: rgba(var(--lightblue), .52);
+}
+.mobile-nav ul li a {
+  text-decoration: none;
+  color: rgba(var(--black), .52);
+  display: flex;
+  align-items: center;
+  padding: 0.5rem;
+}
+.mobile-nav ul li span {
+  margin-left: 0.5rem;
+}
+.mobile-nav-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgb(var(--black));
+  opacity: 0;
+  z-index: 999;
+  transition: opacity 0.25s ease-in-out;
+}
+.mobile-nav-backdrop.show {
+  opacity: 0.5;
+}
+nav li[data-mobile] {
+  cursor: pointer;
+}
+
 .flex-adaptive {
   display: flex;
   flex-direction: column-reverse;
diff --git a/src/_includes/layout.html b/src/_includes/layout.html
index 747d005..3eb4143 100644
--- a/src/_includes/layout.html
+++ b/src/_includes/layout.html
@@ -44,7 +44,7 @@
 </head>
 <body>
   <header>
-    <nav class="container h-100" aria-label="Main nav">
+    <nav class="container nav h-100" aria-label="Main nav">
       <div class="nav-logo">
         <img class="site-logo" src="/img/logo.png" alt="CyBySide logo" />
       </div>
@@ -79,6 +79,35 @@
         </ul>
       </div>
     </nav>
+    <nav id="mobile-nav" class="mobile-nav" aria-label="Mobile nav">
+      <div class="mobile-nav-header">
+        <h1>{{ metadata.title }}</h1>
+        <button id="mobile-nav-close-btn" class="hamburger" aria-label="Toggle menu">
+          <ion-icon name="close-sharp"></ion-icon>
+        </button>
+      </div>
+      <div class="mobile-nav-links">
+        <ul>
+          <li>
+            <a href="/">
+              <ion-icon name="home-sharp"></ion-icon>
+              <span>Home</span>
+            </a>
+          </li>
+          <li>
+            <a href="/posts">
+              <ion-icon name="newspaper-sharp"></ion-icon>
+              <span>Posts</span>
+            </a>
+          </li>
+          <li>
+            <a href="/about">
+              <ion-icon name="help-circle-sharp"></ion-icon>
+              <span>About</span>
+            </a>
+          </li>
+        </ul>
+      </div>
   </header>
   <main>
     <div>
@@ -176,7 +205,44 @@
   <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
   <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
   <script>
-    document.getElementById('mobile-nav-btn').addEventListener('click', () => alert('Not yet implemented!'));
+    const mobileNav = document.getElementById('mobile-nav');
+    
+    function toggleMobileNav() {
+      if (mobileNav.classList.contains('show')) {
+        removeBackdrop()
+      } else {
+        const backdrop = document.createElement('div');
+        backdrop.className = 'mobile-nav-backdrop';
+        document.body.appendChild(backdrop);
+        backdrop.addEventListener('click', () => {
+          mobileNav.classList.remove('show');
+          removeBackdrop();
+        });
+        setTimeout(() => backdrop.classList.add('show'), 10);
+      }
+      mobileNav.classList.toggle('show');
+    }
+
+    function removeBackdrop() {
+      const backdrop = document.querySelector('.mobile-nav-backdrop');
+      if (backdrop) {
+        backdrop.classList.remove('show');
+        setTimeout(() => {
+          backdrop.remove();
+        }, 250);
+      }
+    }
+
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape') {
+        if (mobileNav.classList.contains('show')) {
+          mobileNav.classList.remove('show');
+          removeBackdrop();
+        }
+      }
+    });
+    document.getElementById('mobile-nav-btn').addEventListener('click', toggleMobileNav);
+    document.getElementById('mobile-nav-close-btn').addEventListener('click', toggleMobileNav);
   </script>
 </body>
 </html>
\ No newline at end of file
