diff --git a/web-app/assets/banners/binary-search.jpg b/web-app/assets/banners/binary-search.jpg
index 2168f687..89f26030 100644
Binary files a/web-app/assets/banners/binary-search.jpg and b/web-app/assets/banners/binary-search.jpg differ
diff --git a/web-app/assets/banners/bubble-sort.jpg b/web-app/assets/banners/bubble-sort.jpg
index 596af1d0..b7925012 100644
Binary files a/web-app/assets/banners/bubble-sort.jpg and b/web-app/assets/banners/bubble-sort.jpg differ
diff --git a/web-app/assets/banners/emoji-memory-game.jpg b/web-app/assets/banners/emoji-memory-game.jpg
new file mode 100644
index 00000000..3ffa9fc1
Binary files /dev/null and b/web-app/assets/banners/emoji-memory-game.jpg differ
diff --git a/web-app/assets/banners/productive-pet.jpg b/web-app/assets/banners/productive-pet.jpg
new file mode 100644
index 00000000..e2be7d1d
Binary files /dev/null and b/web-app/assets/banners/productive-pet.jpg differ
diff --git a/web-app/assets/banners/progress-tracker.jpg b/web-app/assets/banners/progress-tracker.jpg
new file mode 100644
index 00000000..ac05ef38
Binary files /dev/null and b/web-app/assets/banners/progress-tracker.jpg differ
diff --git a/web-app/assets/banners/snake.jpg b/web-app/assets/banners/snake.jpg
new file mode 100644
index 00000000..7b18632d
Binary files /dev/null and b/web-app/assets/banners/snake.jpg differ
diff --git a/web-app/assets/banners/spot-the-difference.jpg b/web-app/assets/banners/spot-the-difference.jpg
new file mode 100644
index 00000000..1ed15093
Binary files /dev/null and b/web-app/assets/banners/spot-the-difference.jpg differ
diff --git a/web-app/assets/banners/tic-tac-toe.jpg b/web-app/assets/banners/tic-tac-toe.jpg
new file mode 100644
index 00000000..0a1dd612
Binary files /dev/null and b/web-app/assets/banners/tic-tac-toe.jpg differ
diff --git a/web-app/generate_banners.py b/web-app/generate_banners.py
index 367d2113..cad79709 100644
--- a/web-app/generate_banners.py
+++ b/web-app/generate_banners.py
@@ -433,13 +433,14 @@ def draw_o(ox, oy):
     print(f"Generated HD banner: {filename}")
 
 # Project category directory mappings
+
 projects = [
     # GAMES
     ("2048 Game", "games", "2048-game.jpg"),
     ("Coin Flip", "games", "coin-flip.jpg"),
     ("Dice Rolling", "games", "dice-rolling.jpg"),
     ("Dots & Boxes AI", "games", "dots-boxes.jpg"),
-    ("Emoji Memory Game", "games", "emoji-memory.jpg"),
+    ("Emoji Memory Game", "games", "emoji-memory-game.jpg"),  # FIXED filename
     ("FLAMES Game", "games", "flames.jpg"),
     ("Flappy Game", "games", "flappy-game.jpg"),
     ("Hangman", "games", "hangman.jpg"),
@@ -447,10 +448,15 @@ def draw_o(ox, oy):
     ("Number Guessing", "games", "number-guessing.jpg"),
     ("Password Forge", "games", "password-forge.jpg"),
     ("Rock Paper Scissors", "games", "rock-paper-scissor.jpg"),
-    ("Snake Game", "games", "snake-game.jpg"),
+    ("Snake Game", "games", "snake.jpg"),
     ("Whack-a-Mole", "games", "whack-a-mole.jpg"),
     ("Word Scramble", "games", "word-scramble.jpg"),
     ("Blackjack 21", "games", "blackjack21.jpg"),
+    ("Simon Says", "games", "simon-says.jpg"),
+    ("Tic Tac Toe", "games", "tic-tac-toe.jpg"),
+    ("Spot the Difference", "games", "spot-the-difference.jpg"),
+    ("Productive Pet", "utilities", "productive-pet.jpg"),
+    ("Progress Tracker", "utilities", "progress-tracker.jpg"),
 
     # MATH
     ("AP/GP/AGP/HP Recognizer", "math", "progression-recognizer.jpg"),
@@ -463,6 +469,9 @@ def draw_o(ox, oy):
     ("Pascal's Triangle", "math", "pascal-triangle.jpg"),
     ("Prime Analyzer", "math", "prime-analyzer.jpg"),
     ("Projectile Motion", "math", "projectile-motion.jpg"),
+    ("Binary Search", "math", "binary-search.jpg"),
+    ("Bubble Sort", "math", "bubble-sort.jpg"),
+    ("Tower of Hanoi", "math", "tower-of-hanoi.jpg"),
 
     # UTILITIES
     ("Morse Code", "utilities", "morse-code.jpg"),
@@ -472,7 +481,6 @@ def draw_o(ox, oy):
     ("Color Palette Suggestor", "utilities", "color-palette.jpg"),
     ("AI Resume Analyzer", "utilities", "resume-analyzer.jpg"),
     ("Caesar Cipher", "utilities", "caesar-cipher.jpg"),
-    ("Simon Says", "games", "simon-says.jpg"),
 ]
 
 # Run generation
diff --git a/web-app/index.html b/web-app/index.html
index c51f7a64..abcded8d 100644
--- a/web-app/index.html
+++ b/web-app/index.html
@@ -29,94 +29,45 @@
 
 <!-- Cursor Glow -->
 <div aria-hidden="true" class="cursor-glow" id="cursorGlow"></div>
+
 <!-- Navigation -->
 <nav aria-label="Primary" class="navbar" id="mainNavbar">
 <div class="nav-island">
-<!-- LEFT -->
-<div class="navbar-brand">
-<a class="logo-wrap" href="#">
-<!-- LOGO IMAGE -->
-<img alt="PyMini Logo" class="navbar-logo" src="assets/favicon.svg"/>
-<!-- TEXT -->
-<div class="logo-text">
-    <span class="logo-py">py</span>
-    <span class="logo-mini">.mini</span>
-    <span class="logo-parens">()</span>
-</div>
-<!-- SMALL TAGLINE -->
-<span class="logo-tagline">
-    games, math &amp; terminal toys
-</span>
-</a>
-</div>
-<!-- CENTER SEARCH -->
-<div class="search-box">
-<i class="fas fa-search"></i>
-<input aria-label="Search projects" id="navSearchInput" placeholder="Search projects or games..." type="text"/>
-</div>
-<!-- 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 -->
-<div class="nav-controls" id="navControls">
+  <div class="navbar-brand">
+    <a class="logo-wrap" href="#">
+      <img alt="PyMini Logo" class="navbar-logo" src="assets/favicon.svg"/>
+      <div class="logo-text">
+        <span class="logo-py">py</span>
+        <span class="logo-mini">.mini</span>
+        <span class="logo-parens">()</span>
+      </div>
+      <span class="logo-tagline">games, math &amp; terminal toys</span>
+    </a>
+  </div>
+  <div class="search-box">
+    <i class="fas fa-search"></i>
+    <input aria-label="Search projects" id="navSearchInput" placeholder="Search projects or games..." type="text"/>
+  </div>
+  <button type="button" class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle sidebar" aria-expanded="true">
+    <i class="fas fa-bars"></i>
+  </button>
+  <div class="nav-controls" id="navControls">
     <button aria-label="Mute sounds" class="sound-toggle" id="soundToggle" type="button">
-        <i class="fas fa-volume-up"></i>
+      <i class="fas fa-volume-up"></i>
     </button>
     <button aria-label="Switch theme" class="theme-toggle" id="themeToggle" type="button">
-        <i class="fas fa-moon"></i>
+      <i class="fas fa-moon"></i>
     </button>
-</div>
+  </div>
 </div>
 </nav>
-<main id="main-content" tabindex="-1">
-    <section class="hero-section" aria-label="Welcome">
-        <canvas aria-hidden="true" id="boardCanvas"></canvas>
-        <div class="hero-background"></div>
-        <div aria-hidden="true" class="hero-orb hero-orb-one"></div>
-        <div aria-hidden="true" class="hero-orb hero-orb-two"></div>
-        <div aria-hidden="true" class="hero-code-snippets">
-            <div class="code-snippet snippet-one">for project in library: launch(project)</div>
-            <div class="code-snippet snippet-two">score = accuracy * focus</div>
-            <div class="code-snippet snippet-three">challenge = "typing-speed-tester"</div>
-            <div class="code-snippet snippet-four">print("tiny arcade, huge learning energy")</div>
-            <div class="code-snippet snippet-five">if curiosity &gt; 0: launch_random()</div>
-            <div class="code-snippet snippet-six">favorite_projects.append("math-quiz")</div>
-        </div>
-        <div class="container">
-            <div class="hero-shell">
-                <div class="hero-content">
-                <div class="hero-kicker">Python arcade for curious beginners</div>
-                <div class="hero-title-wrapper">
-                    <h1 class="hero-title">
-                        <span class="hero-title-line">build tiny python projects</span>
-                        <span class="hero-title-line hero-title-accent">and play in a playful coding aracade</span>
-                    </h1>
-                    <div aria-hidden="true" class="python-orbit">
-                        <div class="python-orbiter">
-                            <span class="python-logo">🐍</span>
-                        </div>
-                    </div>
-                </div>
-                <p class="hero-subtitle">Jump into browser-ready games, math experiments, and utility labs that feel rewarding from the first click.</p>
-                <p class="hero-search-note">Press <kbd>Ctrl</kbd> + <kbd>K</kbd> to focus search.</p>
-
-                <div aria-live="polite" class="hero-typing">
-                    <span class="typing-label">Now loading:</span>
-                    <span class="typing-text" id="heroTypewriter">typing speed drills</span>
-                </div>
-                <div class="hero-meta">
-                    <span><strong id="heroProjectCount">0</strong> total projects</span>
-                    <span><strong id="heroGameCount">0</strong> games</span>
-                    <span><strong id="heroUtilityCount">0</strong> utilities</span>
-                </div>
 
 <!-- Mobile Sidebar Toggle -->
 <button type="button" class="mobile-sidebar-toggle" id="mobileSidebarToggle" aria-label="Toggle sidebar menu" aria-expanded="false">
   <i class="fas fa-bars" aria-hidden="true"></i>
 </button>
 
-<!-- ── PRIMARY SIDEBAR DOCK ──────────────────────────────────── -->
+<!-- Sidebar -->
 <aside class="sidebar-dock" id="mainSidebar" aria-label="Primary Navigation">
   <div class="sidebar-brand">
     <a class="logo-wrap" href="index.html">
@@ -159,251 +110,6 @@ <h1 class="hero-title">
     </div>
   </div>
 
-  
-
-    
-<template id="projectsTemplate">
-    <div class="container">
-        <div class="projects-grid" id="projectsGrid">
-                    <div class="project-card" data-category="games" data-project="2048-game" data-tags="game,puzzle,2048,logic,tiles">
-                        <img class="card-banner" src="assets/banners/2048-game.jpg" alt="2048 Game" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>2048 Game</h3>
-                        <p>Combine tiles and reach 2048!</p>
-                    </div>
-                    <div class="project-card" data-category="math" data-project="progression-recognizer" data-tags="math,sequence,progression,arithmetic,geometric">
-                        <img class="card-banner" src="assets/banners/progression-recognizer.jpg" alt="AP/GP/AGP/HP Recognizer" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>AP/GP/AGP/HP Recognizer</h3>
-                        <p>Identify progression types from any sequence.</p>
-                    </div>
-                    <div class="project-card" data-category="math" data-project="armstrong" data-tags="math,number,digits,power">
-                        <img class="card-banner" src="assets/banners/armstrong.jpg" alt="Armstrong Numbers" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Armstrong Numbers</h3>
-                        <p>Check special number properties!</p>
-                    </div>
-                    <div class="project-card" data-category="utilities" data-project="binary-search" data-tags="search,algorithm,binary,sorted,visualizer">
-                        <img class="card-banner" src="assets/banners/binary-search.jpg" alt="Binary Search" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Binary Search</h3>
-                        <p>Visualize binary search step by step!</p>
-                    </div>
-                    <div class="project-card" data-category="utilities" data-project="bubble-sort" data-tags="sort,algorithm,bubble,visualizer,array">
-                        <img class="card-banner" src="assets/banners/bubble-sort.jpg" alt="Bubble Sort" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Bubble Sort</h3>
-                        <p>Watch bubble sort in real-time!</p>
-                    </div>
-                    <div class="project-card" data-category="games" data-project="blackjack(21)" data-tags="game,casino,card,random">
-                        <img class="card-banner" src="assets/banners/blackjack21.jpg" alt="BlackJack21" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Play Now</button></div>
-                        <h3>BlackJack21</h3>
-                        <p>Beat the dealer!</p>
-                    </div>
-                    <div class="project-card" data-category="math" data-project="calculator" data-tags="math,calculator,arithmetic,operations">
-                        <img class="card-banner" src="assets/banners/calculator.jpg" alt="Calculator" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Calculator</h3>
-                        <p>Your mathematical companion!</p>
-                    </div>
-
-                    <div class="project-card" data-category="games" data-project="coin-flip" data-tags="game,random,animation,probability,heads,tails">
-                        <img class="card-banner" src="assets/banners/coin-flip.jpg" alt="Coin Flip" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Coin Flip</h3>
-                        <p>Heads or tails with spinning animation!</p>
-                    </div>
-                    <div class="project-card" data-category="math" data-project="collatz" data-tags="math,conjecture,algorithm,sequence">
-                        <img class="card-banner" src="assets/banners/collatz.jpg" alt="Collatz Conjecture" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Collatz Conjecture</h3>
-                        <p>Explore the 3n+1 problem!</p>
-                    </div>
-                    <div class="project-card" data-category="utilities" data-project="color-palette" data-tags="utility,color,palette,css,design,theme,website">
-                    <img class="card-banner" src="assets/banners/color-palette.jpg" alt="Color Palette Suggestor" loading="lazy">
-                    <div class="card-actions"><button class="btn-play">Try It</button></div>
-                    <h3>Color Palette Suggestor</h3>
-                    <p>Generate palettes + CSS snippets for any website type and mood!</p>
-                </div>
-                <div class="project-card" data-category="tracker" data-project="progress-tracker" data-tags="utility,tracker,progress,learning,projects">
-                 <img class="card-banner" src="assets/banners/progress-tracker.svg" alt="Progress Tracker" loading="lazy">
-                    <div class="card-actions"><button class="btn-play">Try It</button></div>
-                    <h3>Progress Tracker</h3>
-                    <p>Track your completed mini projects!</p>
-                </div>
-                    <div class="project-card" data-category="utilities" data-project="resume-analyzer" data-tags="utility,resume,ats,career,analysis,keywords">
-                      <img class="card-banner" src="assets/banners/resume-analyzer.jpg" alt="AI Resume Analyzer" loading="lazy">
-                      <div class="card-actions"><button class="btn-play">Try It</button></div>
-                      <h3>AI Resume Analyzer</h3>
-                      <p>Score resumes with ATS-style keyword and formatting insights!</p>
-                    </div>
-                    <div class="project-card" data-category="math" data-project="coordinate-polar-transform" data-tags="math,coordinate,transformation,geometry">
-                        <img class="card-banner" src="assets/banners/coordinate-polar-transform.jpg" alt="Coordinate to Polar" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Coordinate to Polar</h3>
-                        <p>Transform Cartesian (x, y) into polar (r, theta).</p>
-                    </div>
-                    <div class="project-card" data-category="math" data-project="derivative-calculator" data-tags="math,calculus,derivative,polynomial">
-                        <img class="card-banner" src="assets/banners/derivative-calculator.jpg" alt="Derivative Calculator" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Derivative Calculator</h3>
-                        <p>Compute 1st/nth polynomial derivatives and evaluate them.</p>
-                    </div>
-                    <div class="project-card" data-category="games" data-project="dice-rolling" data-tags="game,random,animation,probability">
-                        <img class="card-banner" src="assets/banners/dice-rolling.jpg" alt="Dice Rolling" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Dice Rolling</h3>
-                        <p>Roll the dice with 3D animation!</p>
-                    </div>
-                    <div class="project-card" data-category="games" data-project="dots-boxes">
-                        <img class="card-banner" src="assets/banners/dots-boxes.jpg" alt="Dots &amp; Boxes AI" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Dots &amp; Boxes AI</h3>
-                        <p>Challenge friends or AI in this strategy game!</p>
-                    </div>
-                    <div class="project-card" data-category="games" data-project="emoji-memory">
-                        <img class="card-banner" src="assets/banners/emoji-memory.jpg" alt="Emoji Memory Game" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Emoji Memory Game</h3>
-                        <p>Test your memory with matching emojis!</p>
-                    </div>
-                    <div class="project-card" data-category="math" data-project="fibonacci" data-tags="math,sequence,series,loops,recursion">
-                        <img class="card-banner" src="assets/banners/fibonacci.jpg" alt="Fibonacci Series" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Fibonacci Series</h3>
-                        <p>Generate Fibonacci sequences!</p>
-                    </div>
-                    <div class="project-card" data-category="games" data-project="flames">
-                        <img class="card-banner" src="assets/banners/flames.jpg" alt="FLAMES Game" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>FLAMES Game</h3>
-                        <p>Discover your relationship status!</p>
-                    </div>
-                    <div class="project-card" data-category="games" data-project="flappy-game">
-                        <img class="card-banner" src="assets/banners/flappy-game.jpg" alt="Flappy Game" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Flappy Game</h3>
-                        <p>Dodge the incoming balls and survive!</p>
-                    </div>
-                    <div class="project-card" data-category="games" data-project="hangman" data-tags="game,word,letters,logic,string">
-                        <img class="card-banner" src="assets/banners/hangman.jpg" alt="Hangman" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Hangman</h3>
-                        <p>Classic word-guessing game!</p>
-                    </div>
-                    <div class="project-card" data-category="games" data-project="math-quiz" data-tags="game,math,quiz,mcq,lives,difficulty">
-                        <img class="card-banner" src="assets/banners/math-quiz.jpg" alt="Math Quiz" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Math Quiz</h3>
-                        <p>MCQ quiz with lives and difficulty levels!</p>
-                    </div>
-                    <div class="project-card" data-category="utilities" data-project="morse-code" data-tags="utility,morse,translation,communication">
-                        <img class="card-banner" src="assets/banners/morse-code.jpg" alt="Morse Code" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Morse Code</h3>
-                        <p>Translate with lights &amp; sound!</p>
-                    </div>
-                    <div class="project-card" data-category="utilities" data-project="number-converter">
-                        <img class="card-banner" src="assets/banners/number-converter.jpg" alt="Number Converter" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Number Converter</h3>
-                        <p>Convert Dec, Bin, Oct, and Hex!</p>
-                    </div>
-                      <div class="project-card" data-category="utilities" data-project="productive-pet" data-tags="utility,pet,productivity,habit,focus">
-                        <img class="card-banner" src="assets/banners/productive-pet.svg" alt="Productive Pet" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Productive Pet</h3>
-                        <p>Grow your pet by staying focused and productive!</p>
-                      </div>
-                    <div class="project-card" data-category="games" data-project="number-guessing" data-tags="game,logic,loops,conditional">
-                        <img class="card-banner" src="assets/banners/number-guessing.jpg" alt="Number Guessing" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Number Guessing</h3>
-                        <p>Guess the secret number!</p>
-                    </div>
-                    <div class="project-card" data-category="math" data-project="pascal-triangle" data-tags="math,triangle,visualization,recursion">
-                        <img class="card-banner" src="assets/banners/pascal-triangle.jpg" alt="Pascal's Triangle" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Pascal's Triangle</h3>
-                        <p>Beautiful hexagon visualization!</p>
-                    </div>
-                    <div class="project-card" data-category="games" data-project="password-forge">
-                        <img class="card-banner" src="assets/banners/password-forge.jpg" alt="Password Forge" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Password Forge</h3>
-                        <p>Survive evolving firewall password rules!</p>
-                    </div>
-                    <div class="project-card" data-category="math" data-project="prime-analyzer" data-tags="math,prime,factors,algorithm">
-                        <img class="card-banner" src="assets/banners/prime-analyzer.jpg" alt="Prime Analyzer" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Prime Analyzer</h3>
-                        <p>All-in-one prime number toolkit!</p>
-                    </div>
-                    <div class="project-card" data-category="math" data-project="projectile-motion" data-tags="math,physics,motion,calculation">
-                        <img class="card-banner" src="assets/banners/projectile-motion.jpg" alt="Projectile Motion" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Projectile Motion</h3>
-                        <p>Calculate TOF, Hmax, and Range with physics!</p>
-                    </div>
-                    <div class="project-card" data-category="games" data-project="rock-paper-scissor" data-tags="game,random,choice,strategy,decision">
-                        <img class="card-banner" src="assets/banners/rock-paper-scissor.jpg" alt="Rock Paper Scissors" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Rock Paper Scissors</h3>
-                        <p>Battle against the computer!</p>
-                    </div>
-                    <div class="project-card" data-category="games" data-project="simon-says" data-tags="game,memory,reflex,pattern,sequence">
-                      <img class="card-banner" src="assets/banners/simon-says.jpg" alt="Simon Says" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Simon Says</h3>
-                        <p>Repeat the pattern and test your memory skills!</p>
-                    </div>
-                    <div class="project-card" data-category="games" data-project="snake-game">
-                        <img class="card-banner" src="assets/banners/snake-game.jpg" alt="Snake Game" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Snake Game</h3>
-                        <p>Classic snake game!</p>
-                    </div>
-                    <div class="project-card" data-category="utilities" data-project="tower-of-hanoi" data-tags="utility,puzzle,recursion,algorithm">
-                        <img class="card-banner" src="assets/banners/tower-of-hanoi.jpg" alt="Tower of Hanoi" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Tower of Hanoi</h3>
-                        <p>Solve the classic puzzle!</p>
-                    </div>
-                    <div class="project-card" data-category="utilities" data-project="typing-speed-tester" data-tags="utility,typing,speed,tester">
-                        <img class="card-banner" src="assets/banners/typing-speed-tester.jpg" alt="Typing Speed Tester" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Typing Speed Tester</h3>
-                        <p>Test your typing skills!</p>
-                    </div>
-                    <div class="project-card" data-category="games" data-project="whack-a-mole">
-                        <img class="card-banner" src="assets/banners/whack-a-mole.jpg" alt="Whack-a-Mole" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Whack-a-Mole</h3>
-                        <p>Hit the moles before they disappear!</p>
-                    </div>
-                    <div class="project-card" data-category="games" data-project="word-scramble" data-tags="game,word,scramble,letters">
-                        <img class="card-banner" src="assets/banners/word-scramble.jpg" alt="Word Scramble" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Word Scramble</h3>
-                        <p>Unscramble words before attempts run out!</p>
-                    </div>
-                      <div class="project-card" data-category="games" data-project="spot-the-difference" data-tags="game,spot,difference,observation,puzzle">
-                        <img class="card-banner" src="assets/banners/spot-the-difference.svg" alt="Spot the Difference" loading="lazy">
-                        <div class="card-actions"><button class="btn-play">Try It</button></div>
-                        <h3>Spot the Difference</h3>
-                        <p>Find all hidden changes before time runs out!</p>
-                      </div>
-                </div>
-
-                <div id="emptyState" class="empty-state" style="display: none;">
-                    <p>No Projects right now :)</p>
-                    <p class="empty-state-hint">Try adjusting your search or category filter.</p>
-                </div>
-            </div>
-        </template>
-  </div>
-
   <div class="sidebar-menu-wrapper">
     <div class="sidebar-menu-title">Categories</div>
     <nav class="sidebar-menu" role="tablist" aria-label="Filter by category">
@@ -436,10 +142,10 @@ <h3>Spot the Difference</h3>
 
   <div class="sidebar-footer">
     <div class="sidebar-controls">
-      <button aria-label="Mute sound" class="sound-toggle" id="soundToggle" type="button">
+      <button aria-label="Mute sound" class="sound-toggle" id="sidebarSoundToggle" type="button">
         <i class="fas fa-volume-up" aria-hidden="true"></i>
       </button>
-      <button aria-label="Switch to light mode" class="theme-toggle" id="themeToggle" type="button">
+      <button aria-label="Switch to light mode" class="theme-toggle" id="sidebarThemeToggle" type="button">
         <i class="fas fa-sun" aria-hidden="true"></i>
       </button>
       <button aria-label="Toggle Sidebar" class="collapse-sidebar-btn" id="sidebarCollapseBtn" type="button">
@@ -449,22 +155,9 @@ <h3>Spot the Difference</h3>
   </div>
 </aside>
 
-
-<div class="hero-controls">
-  <button aria-label="Mute sound" class="hero-control-btn sound-toggle" id="heroSoundToggle" type="button">
-    <i class="fas fa-volume-up" aria-hidden="true"></i>
-  </button>
-  <button aria-label="Switch to light mode" class="hero-control-btn theme-toggle" id="heroThemeToggle" type="button">
-    <i class="fas fa-sun" aria-hidden="true"></i>
-  </button>
-</div>
-
-<!-- ═══════════════════════════════════════════════════════════════
-     MAIN CONTENT
-     ═══════════════════════════════════════════════════════════════ -->
 <main id="main-content" tabindex="-1">
 
-<!-- ── Hero Section ─────────────────────────────────────────── -->
+<!-- Hero Section -->
 <section class="hero-section" aria-label="Welcome">
   <canvas aria-hidden="true" id="boardCanvas"></canvas>
   <div class="hero-background" aria-hidden="true"></div>
@@ -473,14 +166,12 @@ <h3>Spot the Difference</h3>
   <div aria-hidden="true" class="hero-orb hero-orb-three"></div>
 
   <div class="hero-shell">
-    <!-- ── Big Brand Header (Logo & Futuristic Title) ────────────────── -->
     <div class="hero-logo-header">
       <div class="hero-logo-text">
         <span class="hero-logo-py">py</span><span class="hero-logo-mini">.mini</span><span class="hero-logo-parens">()</span>
       </div>
     </div>
 
-    <!-- ── Welcome Badges (Glassified with Hover Glints) ──────────────── -->
     <div class="hero-badge-row">
       <span class="hero-kicker">
         <span class="hero-kicker-dot"></span>
@@ -501,7 +192,6 @@ <h1 class="hero-title">
 
     <p class="hero-subtitle">Jump into browser-ready games, math experiments, and utility labs — each one ready in your browser, no install required.</p>
 
-    <!-- ── Hero CTA Action Row ──────────────────────────────────────── -->
     <div class="hero-cta-row">
       <button class="btn-primary-hero" id="exploreBtn">
         <i class="fas fa-rocket" aria-hidden="true"></i>
@@ -526,8 +216,7 @@ <h1 class="hero-title">
   </div>
 </section>
 
-
-<!-- ── Sticky Project Filter ───────────────────────────────── -->
+<!-- Sticky Filter Bar -->
 <div class="sticky-filter-bar visible" id="stickyFilterBar" aria-label="Project category filters">
   <button aria-selected="true" class="sticky-tab active" data-sticky-category="all" role="tab" tabindex="0" type="button">All</button>
   <button aria-selected="false" class="sticky-tab" data-sticky-category="games" role="tab" tabindex="-1" type="button">Games</button>
@@ -537,7 +226,7 @@ <h1 class="hero-title">
   <button aria-selected="false" class="sticky-tab" data-sticky-category="playground" role="tab" tabindex="-1" type="button">Playground</button>
 </div>
 
-<!-- ── Timeline Section ─────────────────────────────────────── -->
+<!-- Timeline Section -->
 <section class="hero-timeline-section" id="timelineSection">
   <div class="timeline-background" aria-hidden="true"></div>
   <div aria-hidden="true" class="timeline-orb timeline-orb-one"></div>
@@ -621,9 +310,7 @@ <h3 class="timeline-title">Share</h3>
   </div>
 </section>
 
-
-
-<!-- ── Projects Section (Bento Grid) ────────────────────────── -->
+<!-- Projects Section -->
 <section class="projects-section" id="projectsSection">
   <div class="container">
     <div class="section-header">
@@ -634,7 +321,6 @@ <h2 class="section-heading">Projects <span id="projectCountBadge"></span></h2>
       </button>
     </div>
     <div class="projects-grid" id="projectsGrid"></div>
-
     <div id="emptyState" class="empty-state" style="display: none;">
       <p>No Projects right now :)</p>
       <p class="empty-state-hint">Try adjusting your search or category filter.</p>
@@ -642,7 +328,7 @@ <h2 class="section-heading">Projects <span id="projectCountBadge"></span></h2>
   </div>
 </section>
 
-<!-- ── Python Playground Section ────────────────────────────── -->
+<!-- Playground Section -->
 <section aria-label="Python Playground" class="playground-section" id="playgroundSection" style="display:none">
   <div class="container">
     <div class="playground-header">
@@ -677,7 +363,6 @@ <h2 class="playground-title">🐍 Python Playground</h2>
             </button>
           </div>
         </div>
-        <!-- CodeMirror 6 will mount here -->
         <div id="pythonEditor" aria-label="Python code editor" role="textbox" aria-multiline="true"></div>
       </div>
 
@@ -705,9 +390,7 @@ <h2 class="playground-title">🐍 Python Playground</h2>
 
 </main>
 
-
-
-<!-- ── Project Modal ─────────────────────────────────────────── -->
+<!-- Project Modal -->
 <div aria-hidden="true" aria-labelledby="modalDialogTitle" aria-modal="true" class="modal" id="projectModal" role="dialog">
   <div class="modal-content">
     <div class="modal-header">
@@ -717,12 +400,12 @@ <h2 class="playground-title">🐍 Python Playground</h2>
   </div>
 </div>
 
-<!-- ── Back to Top ───────────────────────────────────────────── -->
+<!-- Back to Top -->
 <button aria-label="Back to top" class="back-to-top" id="backToTop" title="Back to top" type="button">
   <i class="fas fa-arrow-up" aria-hidden="true"></i>
 </button>
 
-<!-- ── Footer ────────────────────────────────────────────────── -->
+<!-- Footer -->
 <footer class="footer">
   <div class="container">
     <div class="footer-content">
@@ -768,10 +451,12 @@ <h3>Legal</h3>
   </div>
 </footer>
 
-<!-- ── SCRIPTS ──────────────────────────────────────────────── -->
+<!-- Scripts -->
 <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
 <script src="js/audio.js"></script>
 <script src="js/audioManager.js"></script>
+
+<!-- ALL PROJECT SCRIPTS -->
 <script src="js/projects/rock-paper-scissor.js"></script>
 <script src="js/projects/dice-rolling.js"></script>
 <script src="js/projects/coin-flip.js"></script>
@@ -810,130 +495,368 @@ <h3>Legal</h3>
 <script src="js/projects/spot-the-difference.js"></script>
 <script src="js/projects/color-palette.js"></script>
 <script src="js/projects/resume-analyzer.js"></script>
-<!-- Registry: maps project names to their module functions -->
-    <script src="js/projects.js"></script>
-<!--
-        playground.js MUST come before main.js so that
-        window.playgroundAPI is defined when main.js runs.
-        No Pyodide CDN tag here — Pyodide is injected lazily.
-    -->
-<!-- CodeMirror 6 – syntax-highlighted Python editor (local bundle) -->
+<script src="js/projects.js"></script>
 <script src="js/cm-editor.js"></script>
 <script src="js/playground.js"></script>
 <script type="module" src="js/main.js"></script>
 <script src="js/hero-canvas.js"></script>
 <script>lucide.createIcons();</script>
-<script src="js/fix.js"></script>
+
+<!-- PROJECT LOADER - WITH FAVORITE BUTTONS -->
 <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',
+(function() {
+    const projectsGrid = document.getElementById('projectsGrid');
+    if (!projectsGrid) return;
+    
+    // ALL projects from your js/projects/ folder
+    const projectsData = [
+        // GAMES (20+)
+        { project: "2048-game", title: "2048 Game", category: "games", desc: "Combine tiles and reach 2048!", tags: "game,puzzle,2048" },
+        { project: "rock-paper-scissor", title: "Rock Paper Scissor", category: "games", desc: "Classic hand game against AI", tags: "game,rock,paper" },
+        { project: "dice-rolling", title: "Dice Rolling", category: "games", desc: "Roll virtual dice", tags: "game,dice" },
+        { project: "coin-flip", title: "Coin Flip", category: "games", desc: "Flip a coin for decisions", tags: "game,coin" },
+        { project: "number-guessing", title: "Number Guessing", category: "games", desc: "Guess the secret number", tags: "game,numbers" },
+        { project: "hangman", title: "Hangman", category: "games", desc: "Classic word guessing game", tags: "game,words" },
+        { project: "word-scramble", title: "Word Scramble", category: "games", desc: "Unscramble letters to find words", tags: "game,words" },
+        { project: "tic-tac-toe", title: "Tic Tac Toe", category: "games", desc: "Classic X vs O game", tags: "game,strategy" },
+        { project: "snake", title: "Snake Game", category: "games", desc: "Classic snake eating game", tags: "game,arcade" },
+        { project: "flappy-game", title: "Flappy Game", category: "games", desc: "Flappy bird style game", tags: "game,arcade" },
+        { project: "simon-says", title: "Simon Says", category: "games", desc: "Memory pattern game", tags: "game,memory" },
+        { project: "whack-a-mole", title: "Whack a Mole", category: "games", desc: "Hit the moles as they pop up", tags: "game,arcade" },
+        { project: "dots-boxes", title: "Dots and Boxes", category: "games", desc: "Connect dots to complete boxes", tags: "game,strategy" },
+        { project: "emoji-memory-game", title: "Emoji Memory", category: "games", desc: "Match pairs of emojis", tags: "game,memory" },
+        { project: "spot-the-difference", title: "Spot the Difference", category: "games", desc: "Find differences between images", tags: "game,puzzle" },
+        { project: "flames", title: "FLAMES Game", category: "games", desc: "Friendship relationship calculator", tags: "game,relationship" },
+        
+        // MATH (15+)
+        { project: "binary-search", title: "Binary Search", category: "math", desc: "Visualize binary search algorithm", tags: "math,algorithm" },
+        { project: "bubble-sort", title: "Bubble Sort", category: "math", desc: "Visualize bubble sort algorithm", tags: "math,algorithm" },
+        { project: "fibonacci", title: "Fibonacci", category: "math", desc: "Generate Fibonacci sequence", tags: "math,numbers" },
+        { project: "pascal-triangle", title: "Pascal Triangle", category: "math", desc: "Generate Pascal's triangle", tags: "math,numbers" },
+        { project: "armstrong", title: "Armstrong Number", category: "math", desc: "Check Armstrong numbers", tags: "math,numbers" },
+        { project: "collatz", title: "Collatz Conjecture", category: "math", desc: "3n+1 sequence analyzer", tags: "math,numbers" },
+        { project: "prime-analyzer", title: "Prime Analyzer", category: "math", desc: "Prime number checker", tags: "math,numbers" },
+        { project: "projectile-motion", title: "Projectile Motion", category: "math", desc: "Physics projectile calculator", tags: "math,physics" },
+        { project: "progression-recognizer", title: "Progression Recognizer", category: "math", desc: "Recognize sequences", tags: "math,sequences" },
+        { project: "coordinate-polar-transform", title: "Coordinate Transform", category: "math", desc: "Convert between coordinate systems", tags: "math,coordinates" },
+        { project: "derivative-calculator", title: "Derivative Calculator", category: "math", desc: "Calculate derivatives", tags: "math,calculus" },
+        { project: "tower-of-hanoi", title: "Tower of Hanoi", category: "math", desc: "Solve Tower of Hanoi puzzle", tags: "math,puzzle" },
+        { project: "math-quiz", title: "Math Quiz", category: "math", desc: "Test your math skills", tags: "math,quiz" },
+        
+        // UTILITIES (10+)
+        { project: "morse-code", title: "Morse Code", category: "utilities", desc: "Convert text to Morse code", tags: "utility,converter" },
+        { project: "number-converter", title: "Number Converter", category: "utilities", desc: "Convert between number systems", tags: "utility,converter" },
+        { project: "password-forge", title: "Password Forge", category: "utilities", desc: "Generate strong passwords", tags: "utility,security" },
+        { project: "typing-speed-tester", title: "Typing Speed Tester", category: "utilities", desc: "Test your typing speed", tags: "utility,typing" },
+        { project: "productive-pet", title: "Productive Pet", category: "utilities", desc: "Virtual productivity pet", tags: "utility,pet" },
+        { project: "color-palette", title: "Color Palette", category: "utilities", desc: "Generate color palettes", tags: "utility,design" },
+        { project: "resume-analyzer", title: "Resume Analyzer", category: "utilities", desc: "Analyze and improve resumes", tags: "utility,career" },
+        { project: "calculator", title: "Calculator", category: "utilities", desc: "Basic arithmetic calculator", tags: "utility,math" },
+        { project: "progress-tracker", title: "Progress Tracker", category: "utilities", desc: "Track your learning progress", tags: "utility,tracker" }
     ];
-    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 */);
-      });
+    
+    projectsGrid.innerHTML = '';
+    
+    // Get favorites from localStorage
+    let favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
+    
+    // Function to save favorites
+    function saveFavorites() {
+        localStorage.setItem('favorites', JSON.stringify(favorites));
+    }
+    
+    projectsData.forEach(proj => {
+        const card = document.createElement('div');
+        card.className = 'project-card';
+        card.setAttribute('data-category', proj.category);
+        card.setAttribute('data-project', proj.project);
+        card.setAttribute('data-tags', proj.tags);
+        
+        const isFavorite = favorites.includes(proj.project);
+        const starClass = isFavorite ? 'fas fa-star' : 'far fa-star';
+        
+        card.innerHTML = `
+            <img class="card-banner" src="assets/banners/${proj.project}.jpg" alt="${proj.title}" loading="lazy">
+            <div class="card-actions">
+                <button class="btn-play" data-project="${proj.project}">Try It</button>
+                <button class="btn-favorite" data-project="${proj.project}" aria-label="Add to favorites">
+                    <i class="${starClass}"></i>
+                </button>
+            </div>
+            <h3>${proj.title}</h3>
+            <p>${proj.desc}</p>
+        `;
+        
+        projectsGrid.appendChild(card);
     });
+    
+    // Update counts
+    const total = projectsData.length;
+    const games = projectsData.filter(p => p.category === 'games').length;
+    const math = projectsData.filter(p => p.category === 'math').length;
+    const utils = projectsData.filter(p => p.category === 'utilities').length;
+    
+    const heroCount = document.getElementById('heroProjectCount');
+    const heroGames = document.getElementById('heroGameCount');
+    const heroMath = document.getElementById('heroMathCount');
+    const heroUtils = document.getElementById('heroUtilityCount');
+    const projectBadge = document.getElementById('projectCountBadge');
+    
+    if (heroCount) heroCount.textContent = total;
+    if (heroGames) heroGames.textContent = games;
+    if (heroMath) heroMath.textContent = math;
+    if (heroUtils) heroUtils.textContent = utils;
+    if (projectBadge) projectBadge.textContent = total + ' projects';
+    
+    console.log(`✅ Loaded ${total} projects: ${games} games, ${math} math, ${utils} utilities`);
+    
+    // Wire up buttons
+    setTimeout(() => {
+        // Play buttons
+        document.querySelectorAll('.btn-play').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const projectName = btn.getAttribute('data-project');
+                if (projectName && window.openProjectSafe) {
+                    window.openProjectSafe(projectName, btn);
+                }
+            });
+        });
+        
+        // Favorite buttons
+        document.querySelectorAll('.btn-favorite').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const projectName = btn.getAttribute('data-project');
+                const icon = btn.querySelector('i');
+                
+                let favs = JSON.parse(localStorage.getItem('favorites') || '[]');
+                const index = favs.indexOf(projectName);
+                
+                if (index === -1) {
+                    // Add to favorites
+                    favs.push(projectName);
+                    icon.className = 'fas fa-star';
+                    btn.setAttribute('aria-label', 'Remove from favorites');
+                    console.log(`⭐ Added ${projectName} to favorites`);
+                } else {
+                    // Remove from favorites
+                    favs.splice(index, 1);
+                    icon.className = 'far fa-star';
+                    btn.setAttribute('aria-label', 'Add to favorites');
+                    console.log(`☆ Removed ${projectName} from favorites`);
+                }
+                
+                localStorage.setItem('favorites', JSON.stringify(favs));
+                
+                // If we're on favorites tab, refresh the view
+                const activeCategory = document.querySelector('.sidebar-tab.active')?.getAttribute('data-category');
+                if (activeCategory === 'favorites' && typeof applyCategoryFilter === 'function') {
+                    applyCategoryFilter('favorites');
+                }
+            });
+        });
+        
+        // Card clicks
+        document.querySelectorAll('.project-card').forEach(card => {
+            card.addEventListener('click', (e) => {
+                if (e.target.closest('.btn-play') || e.target.closest('.btn-favorite')) return;
+                const projectName = card.getAttribute('data-project');
+                if (projectName && window.openProjectSafe) {
+                    window.openProjectSafe(projectName, card);
+                }
+            });
+        });
+    }, 100);
+})();
+</script>
 
-    /* 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();
+<!-- THEME TOGGLE FIX - FINAL -->
+<script>
+(function() {
+    const html = document.documentElement;
+    const themeColorMeta = document.getElementById('themeColorMeta');
+    
+    // Get all theme toggle buttons
+    const themeToggles = document.querySelectorAll('.theme-toggle');
+    
+    // Update all toggle icons and aria labels based on current theme
+    function updateAllToggles(theme) {
+        themeToggles.forEach(toggle => {
+            const icon = toggle.querySelector('i');
+            if (icon) {
+                if (theme === 'dark') {
+                    icon.className = 'fas fa-sun';
+                    toggle.setAttribute('aria-label', 'Switch to light mode');
+                } else {
+                    icon.className = 'fas fa-moon';
+                    toggle.setAttribute('aria-label', 'Switch to dark mode');
+                }
             }
-          }, true);
         });
-      });
+    }
+    
+    // Apply theme to the page
+    function applyTheme(theme) {
+        html.setAttribute('data-theme', theme);
+        localStorage.setItem('theme', theme);
+        
+        // Update theme-color meta tag
+        if (themeColorMeta) {
+            themeColorMeta.setAttribute('content', theme === 'light' ? '#f4f6f9' : '#0c0f1a');
+        }
+        
+        // Update all toggle icons
+        updateAllToggles(theme);
+        
+        console.log('Theme set to:', theme);
+    }
+    
+    // Load saved theme or default to dark
+    const savedTheme = localStorage.getItem('theme');
+    const initialTheme = (savedTheme === 'light' || savedTheme === 'dark') ? savedTheme : 'dark';
+    applyTheme(initialTheme);
+    
+    // Add click listeners to all theme toggles
+    themeToggles.forEach(toggle => {
+        // Remove any existing listeners
+        const newToggle = toggle.cloneNode(true);
+        toggle.parentNode.replaceChild(newToggle, toggle);
+        
+        newToggle.addEventListener('click', function(e) {
+            e.preventDefault();
+            const current = html.getAttribute('data-theme');
+            const next = current === 'light' ? 'dark' : 'light';
+            applyTheme(next);
+        });
     });
-    observer.observe(document.body, { childList: true, subtree: true });
-  }
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', guardSidebar, { once: true });
-  } else {
-    guardSidebar();
-  }
+    
+    console.log('✅ Theme toggle ready. Found', themeToggles.length, 'toggle buttons');
 })();
-</script> 
-<script>
-(function () {
-  var projectAliases = {
-    'blackjack(21)': 'blackjack-21'
-  };
-
-  function resolveProjectName(projectName) {
-    return projectAliases[projectName] || projectName;
-  }
-
-  function bindFallbackProjectButtons() {
-    var projectCards = document.querySelectorAll('.project-card');
-
-    projectCards.forEach(function (card) {
-      var playButton = card.querySelector('.btn-play'); 
-      var projectName = card.getAttribute('data-project');
+</script>
 
-      if (!playButton || !projectName || playButton.getAttribute('aria-label')) {
+<!-- MODAL FIX - Load projects properly -->
+<script>
+(function() {
+    const modal = document.getElementById('projectModal');
+    const modalBody = document.getElementById('modalBody');
+    const modalClose = document.getElementById('modalClose');
+    
+    if (!modal || !modalBody) {
+        console.error('Modal elements not found!');
         return;
-      }
-
-      var resolvedProjectName = resolveProjectName(projectName);
-      var titleNode = card.querySelector('h3');
-      var buttonLabel = titleNode ? 'Open ' + titleNode.textContent : 'Open project';
-
-      playButton.setAttribute('aria-label', buttonLabel);
-
-      playButton.addEventListener('click', function (event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (typeof window.openProjectSafe === 'function') {
-          window.openProjectSafe(resolvedProjectName, playButton);
+    }
+    
+    // Function to close modal
+    function closeModal() {
+        modal.classList.remove('active');
+        modal.setAttribute('aria-hidden', 'true');
+        document.body.style.overflow = '';
+        document.body.style.paddingRight = '';
+        
+        // Clear modal body
+        modalBody.innerHTML = '';
+        
+        console.log('Modal closed');
+    }
+    
+    // Function to open modal with project
+    window.openProjectModal = function(projectName, triggerElement) {
+        console.log('Opening project:', projectName);
+        
+        // Clear previous content
+        modalBody.innerHTML = '<div style="text-align: center; padding: 2rem;">Loading project...</div>';
+        
+        // Show modal
+        modal.classList.add('active');
+        modal.setAttribute('aria-hidden', 'false');
+        document.body.style.overflow = 'hidden';
+        
+        // Get project HTML
+        let projectHTML = '';
+        
+        // Try to get HTML from the project's function
+        const functionName = 'get' + projectName.split('-').map(word => 
+            word.charAt(0).toUpperCase() + word.slice(1)
+        ).join('') + 'HTML';
+        
+        if (typeof window[functionName] === 'function') {
+            try {
+                projectHTML = window[functionName]();
+                console.log('Loaded via', functionName);
+            } catch(e) {
+                console.error('Error loading project:', e);
+                projectHTML = `<div style="text-align: center; padding: 2rem; color: red;">
+                    <h3>Error loading project</h3>
+                    <p>${e.message}</p>
+                </div>`;
+            }
+        } else {
+            // Fallback: Try to find by looking at loaded scripts
+            console.warn('No loader found for:', projectName);
+            projectHTML = `<div style="text-align: center; padding: 2rem;">
+                <h3>${projectName.replace(/-/g, ' ').toUpperCase()}</h3>
+                <p>Project content will be available soon.</p>
+                <p style="color: var(--accent);">Check back later!</p>
+            </div>`;
         }
-      });
-
-      card.addEventListener('click', function (event) {
-        if (event.target.closest('.btn-play') || event.target.closest('.btn-favorite') || event.target.closest('.btn-share')) {
-          return;
+        
+        modalBody.innerHTML = `
+            <div class="modal-project-container">
+                <div class="modal-project-header">
+                    <h2>${projectName.replace(/-/g, ' ').toUpperCase()}</h2>
+                </div>
+                <div class="modal-project-content">
+                    ${projectHTML}
+                </div>
+            </div>
+        `;
+        
+        // Try to initialize project if function exists
+        const initName = 'init' + projectName.split('-').map(word => 
+            word.charAt(0).toUpperCase() + word.slice(1)
+        ).join('');
+        
+        if (typeof window[initName] === 'function') {
+            setTimeout(() => {
+                try {
+                    window[initName]();
+                    console.log('Initialized:', projectName);
+                } catch(e) {
+                    console.error('Init error:', e);
+                }
+            }, 100);
         }
-
-        if (typeof window.openProjectSafe === 'function') {
-          window.openProjectSafe(resolvedProjectName, card);
+    };
+    
+    // Close button handler
+    if (modalClose) {
+        modalClose.addEventListener('click', closeModal);
+    }
+    
+    // Click outside to close
+    modal.addEventListener('click', (e) => {
+        if (e.target === modal) {
+            closeModal();
         }
-      });
     });
-  }
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', bindFallbackProjectButtons, { once: true });
-  } else {
-    bindFallbackProjectButtons();
-  }
+    
+    // Escape key to close
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && modal.classList.contains('active')) {
+            closeModal();
+        }
+    });
+    
+    // Override the existing openProjectSafe if needed
+    if (typeof window.openProjectSafe !== 'function') {
+        window.openProjectSafe = window.openProjectModal;
+    }
+    
+    console.log('✅ Modal fix loaded');
 })();
 </script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.6/purify.min.js"></script>
+
 <!-- Info Modal Popup -->
 <div id="infoModalOverlay" class="info-modal-overlay">
   <div class="info-modal-content">
diff --git a/web-app/js/main.js b/web-app/js/main.js
index aecfee18..de59f2e9 100644
--- a/web-app/js/main.js
+++ b/web-app/js/main.js
@@ -1644,4 +1644,3 @@ if (progressBar) {
 
   // Initial card filtering state update
   updateProjectVisibility(currentCategory, currentSearchQuery);
-});
diff --git a/web-app/js/projects/tic-tac-toe.js b/web-app/js/projects/tic-tac-toe.js
index a215b07d..44f0d6b9 100644
--- a/web-app/js/projects/tic-tac-toe.js
+++ b/web-app/js/projects/tic-tac-toe.js
@@ -545,27 +545,27 @@ function initTicTacToe() {
   }
  
   // ── SCREEN ──
-  function showScreen(id) {
+ function showScreen(id) {
     document.querySelectorAll(".screen").forEach(s => {
-      s.classList.toggle("screen--active", s.id === id);
+        s.classList.toggle("screen--active", s.id === id);
     });
   }
  
   // ── PILLS ──
-  document.getElementById("diff-group").style.display = "none";
+  const diffGroup = document.getElementById("diff-group");
+  if (diffGroup) diffGroup.style.display = "none";
  
   function initPills(groupId, cb) {
     const grp = document.getElementById(groupId);
     if (!grp) return;
     grp.querySelectorAll(".pill").forEach(btn => {
-      btn.addEventListener("click", () => {
-        grp.querySelectorAll(".pill").forEach(b => b.classList.remove("pill--on"));
-        btn.classList.add("pill--on");
-        cb(btn.dataset.val);
-      });
+        btn.addEventListener("click", () => {
+            grp.querySelectorAll(".pill").forEach(b => b.classList.remove("pill--on"));
+            btn.classList.add("pill--on");
+            cb(btn.dataset.val);
+        });
     });
   }
- 
   initPills("mode-group", val => {
     mode = val;
     const diffGrp = document.getElementById("diff-group");
@@ -605,9 +605,7 @@ function initTicTacToe() {
   // ── EVENT LISTENERS ──
   document.getElementById("start-btn").addEventListener("click", () => {
     p1 = document.getElementById("p1-input").value.trim() || "Player 1";
-    p2 = mode === "ai"
-      ? "Computer "
-      : (document.getElementById("p2-input").value.trim() || "Player 2");
+    p2 = mode === "ai" ? "Computer" : (document.getElementById("p2-input").value.trim() || "Player 2");
     scores = { p1: 0, p2: 0, draws: 0 };
     round = 1;
     buildBoard();