diff --git a/web-app/css/styles.css b/web-app/css/styles.css
index ef1a3b0d..df15688e 100644
--- a/web-app/css/styles.css
+++ b/web-app/css/styles.css
@@ -620,7 +620,7 @@ body.sidebar-active .sidebar-dock {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: calc(var(--nav-height) + 40px) 24px 60px;
+  padding: calc(var(--nav-height) + 12px) 24px 60px;
   overflow: hidden;
 }
 
@@ -1862,7 +1862,7 @@ body.sidebar-active .sidebar-dock {
   }
 
   body.sidebar-active:not(.sidebar-collapsed) .projects-section {
-    padding-left: 312px !important;
+    padding-left: 296px !important;
   }
 
   body.sidebar-collapsed .projects-section {
@@ -3293,7 +3293,7 @@ body.sidebar-active .sidebar-dock {
 
 @media (min-width: 1100px) {
   body.sidebar-active:not(.sidebar-collapsed) .footer {
-    padding-left: 312px !important;
+    padding-left: 296px !important;
     padding-right: 24px !important;
   }
 
@@ -5032,7 +5032,7 @@ html[data-theme="dark"] body {
   font-size: clamp(3rem, 7vw, 5.6rem);
   line-height: 1;
   letter-spacing: -0.05em;
-  margin-top: 0.75rem;
+  margin-top: 0;
 }
 
 .hero-title span {
@@ -5988,4 +5988,4 @@ html[data-theme="dark"] body {
   transition:
     transform var(--duration-slow, 500ms) cubic-bezier(0.16, 1, 0.3, 1),
     opacity   var(--duration-slow, 500ms) cubic-bezier(0.16, 1, 0.3, 1);
-}
+}
\ No newline at end of file
diff --git a/web-app/index.html b/web-app/index.html
index b137ad95..b0433f78 100644
--- a/web-app/index.html
+++ b/web-app/index.html
@@ -54,8 +54,8 @@
 <i class="fas fa-search"></i>
 <input aria-label="Search projects" id="navSearchInput" placeholder="Search projects or games..." type="text"/>
 </div>
-<!-- HAMBURGER TOGGLE (mobile) -->
-<button type="button" class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle navigation menu" aria-expanded="false">
+<!-- HAMBURGER — toggles sidebar -->
+<button type="button" class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle sidebar" aria-expanded="true" onclick="(function(b){var open=b.classList.toggle('sidebar-active');document.getElementById('mobileMenuToggle').setAttribute('aria-expanded',String(open));})(document.body)">
 <i class="fas fa-bars"></i>
 </button>
 <!-- RIGHT -->
@@ -823,7 +823,62 @@ <h3>Legal</h3>
 <script src="js/main.js"></script>
 <script src="js/hero-canvas.js"></script>
 <script>lucide.createIcons();</script>
-<script src="js/fix.js"></script> 
+<script src="js/fix.js"></script>
+<script>
+/* ── FIX 2: Keep sidebar open when clicking project cards or modal content ──
+   main.js registers a document-level click listener that removes sidebar-active
+   for "click outside" — we stop propagation on the project grid and modal so
+   those clicks never reach that handler.                                      */
+(function () {
+  function guardSidebar() {
+    /* Elements whose clicks must NOT close the sidebar */
+    var guards = [
+      '#projectsSection',   /* entire projects grid area */
+      '#projectsGrid',
+      '.project-card',
+      '.btn-play',
+      '.modal',             /* project modal */
+      '#projectModal',
+      '.modal-content',
+      '#modalBody',
+      '.playground-section',
+      '.playground-body',
+    ];
+    guards.forEach(function (sel) {
+      document.querySelectorAll(sel).forEach(function (el) {
+        el.addEventListener('click', function (e) {
+          /* Only block propagation if sidebar is currently open */
+          if (document.body.classList.contains('sidebar-active')) {
+            e.stopPropagation();
+          }
+        }, true /* capture — runs before main.js bubble handler */);
+      });
+    });
+
+    /* Also re-guard whenever new cards are injected (dynamic render) */
+    var observer = new MutationObserver(function () {
+      guards.forEach(function (sel) {
+        document.querySelectorAll(sel).forEach(function (el) {
+          if (el._sidebarGuarded) return;
+          el._sidebarGuarded = true;
+          el.addEventListener('click', function (e) {
+            if (document.body.classList.contains('sidebar-active')) {
+              e.stopPropagation();
+            }
+          }, true);
+        });
+      });
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', guardSidebar, { once: true });
+  } else {
+    guardSidebar();
+  }
+})();
+</script> 
 <script>
 (function () {
   var projectAliases = {
@@ -890,4 +945,4 @@ <h3 id="infoModalTitle">How to Play</h3>
 </div>
 
 </body>
-</html>
+</html>
\ No newline at end of file