diff --git a/web-app/assets/logo.png b/web-app/assets/logo.png
new file mode 100644
index 0000000..ea3383e
Binary files /dev/null and b/web-app/assets/logo.png differ
diff --git a/web-app/css/styles.css b/web-app/css/styles.css
index cc210f6..a29c27a 100644
--- a/web-app/css/styles.css
+++ b/web-app/css/styles.css
@@ -1483,7 +1483,17 @@ body {
 
 /* Card icon wrapper (SVG Lucide icons) */
 .card-icon {
-    display: none;
+    width: 72px;
+    height: 72px;
+    margin: 0 auto 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 20px;
+    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(74, 222, 128, 0.10));
+    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+    font-size: 2.25rem;
+    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2));
 }
 
 .card-icon svg { width: 34px; height: 34px; stroke-width: 2.2; }
diff --git a/web-app/games.html b/web-app/games.html
index 0afa792..fe6de70 100644
--- a/web-app/games.html
+++ b/web-app/games.html
@@ -95,17 +95,10 @@ <h1>🎮 Python Mini Projects</h1>
             <div class="container">
                 <div class="projects-grid" id="projectsGrid">
 
-                    <div class="project-card" data-category="games" data-project="rock-paper-scissor">
-                        <div class="card-icon">🪨</div>
-                        <h3>Rock Paper Scissors</h3>
-                        <p>Battle against the computer!</p>
-                        <button class="btn-play">Try It</button>
-                    </div>
-
-                    <div class="project-card" data-category="games" data-project="dice-rolling">
-                        <div class="card-icon">🎲</div>
-                        <h3>Dice Rolling</h3>
-                        <p>Roll the dice with 3D animation!</p>
+                    <div class="project-card" data-category="games" data-project="2048-game">
+                        <div class="card-icon">🟦</div>
+                        <h3>2048 Game</h3>
+                        <p>Combine tiles and reach 2048!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
@@ -116,24 +109,24 @@ <h3>Coin Flip</h3>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="games" data-project="number-guessing">
-                        <div class="card-icon">🎯</div>
-                        <h3>Number Guessing</h3>
-                        <p>Guess the secret number!</p>
+                    <div class="project-card" data-category="games" data-project="dice-rolling">
+                        <div class="card-icon">🎲</div>
+                        <h3>Dice Rolling</h3>
+                        <p>Roll the dice with 3D animation!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="games" data-project="hangman">
-                        <div class="card-icon">🎮</div>
-                        <h3>Hangman</h3>
-                        <p>Classic word-guessing game!</p>
+                    <div class="project-card" data-category="games" data-project="dots-boxes">
+                        <div class="card-icon">🔲</div>
+                        <h3>Dots &amp; Boxes AI</h3>
+                        <p>Challenge friends or AI in this strategy game!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="games" data-project="word-scramble">
-                        <div class="card-icon">🔤</div>
-                        <h3>Word Scramble</h3>
-                        <p>Unscramble words before attempts run out!</p>
+                    <div class="project-card" data-category="games" data-project="emoji-memory">
+                        <div class="card-icon">🧠</div>
+                        <h3>Emoji Memory Game</h3>
+                        <p>Test your memory with matching emojis!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
@@ -144,17 +137,17 @@ <h3>FLAMES Game</h3>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="games" data-project="dots-boxes">
-                        <div class="card-icon">🔲</div>
-                        <h3>Dots &amp; Boxes AI</h3>
-                        <p>Challenge friends or AI in this strategy game!</p>
+                    <div class="project-card" data-category="games" data-project="flappy-game">
+                        <div class="card-icon">🐦</div>
+                        <h3>Flappy Game</h3>
+                        <p>Dodge the incoming balls and survive!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="games" data-project="password-forge">
-                        <div class="card-icon">🔐</div>
-                        <h3>Password Forge</h3>
-                        <p>Survive evolving firewall password rules!</p>
+                    <div class="project-card" data-category="games" data-project="hangman">
+                        <div class="card-icon">🎮</div>
+                        <h3>Hangman</h3>
+                        <p>Classic word-guessing game!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
@@ -165,6 +158,27 @@ <h3>Math Quiz</h3>
                         <button class="btn-play">Try It</button>
                     </div>
 
+                    <div class="project-card" data-category="games" data-project="number-guessing">
+                        <div class="card-icon">🎯</div>
+                        <h3>Number Guessing</h3>
+                        <p>Guess the secret number!</p>
+                        <button class="btn-play">Try It</button>
+                    </div>
+
+                    <div class="project-card" data-category="games" data-project="password-forge">
+                        <div class="card-icon">🔐</div>
+                        <h3>Password Forge</h3>
+                        <p>Survive evolving firewall password rules!</p>
+                        <button class="btn-play">Try It</button>
+                    </div>
+
+                    <div class="project-card" data-category="games" data-project="rock-paper-scissor">
+                        <div class="card-icon">🪨</div>
+                        <h3>Rock Paper Scissors</h3>
+                        <p>Battle against the computer!</p>
+                        <button class="btn-play">Try It</button>
+                    </div>
+
                     <div class="project-card" data-category="games" data-project="snake-game">
                         <div class="card-icon">🐍</div>
                         <h3>Snake Game</h3>
@@ -172,13 +186,6 @@ <h3>Snake Game</h3>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="games" data-project="emoji-memory">
-                        <div class="card-icon">🧠</div>
-                        <h3>Emoji Memory Game</h3>
-                        <p>Test your memory with matching emojis!</p>
-                        <button class="btn-play">Try It</button>
-                    </div>
-
                     <div class="project-card" data-category="games" data-project="whack-a-mole">
                         <div class="card-icon">🔨</div>
                         <h3>Whack-a-Mole</h3>
@@ -186,17 +193,10 @@ <h3>Whack-a-Mole</h3>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="games" data-project="flappy-game">
-                        <div class="card-icon">🐦</div>
-                        <h3>Flappy Game</h3>
-                        <p>Dodge the incoming balls and survive!</p>
-                        <button class="btn-play">Try It</button>
-                    </div>
-
-                    <div class="project-card" data-category="games" data-project="game2048">
-                        <div class="card-icon">🟦</div>
-                        <h3>2048 Game</h3>
-                        <p>Combine tiles and reach 2048!</p>
+                    <div class="project-card" data-category="games" data-project="word-scramble">
+                        <div class="card-icon">🔤</div>
+                        <h3>Word Scramble</h3>
+                        <p>Unscramble words before attempts run out!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
diff --git a/web-app/index.html b/web-app/index.html
index dea9ddd..292f5c5 100644
--- a/web-app/index.html
+++ b/web-app/index.html
@@ -804,7 +804,7 @@
 
                 <!-- LOGO IMAGE -->
                 <img 
-                    src="/python-mini-project/images/logo.png"
+                    src="assets/logo.png"
                     alt="PyMini Logo"
                     class="navbar-logo"
                 >
@@ -964,117 +964,116 @@ <h2 class="hero-title">Learn Python the Fun Way!</h2>
         <!-- </section> -->
 
 
-                <!-- Math Tools -->
-                <div class="project-card" data-category="math" data-project="fibonacci">
-                    <div class="card-icon">✨</div>
-                    <h3>Fibonacci Series</h3>
-                    <p>Generate Fibonacci sequences!</p>
-                    <button class="btn-play">Try It</button>
-                </div>
-
-                    <!-- GAMES -->
-                    <div class="project-card" data-category="games" data-project="rock-paper-scissor"
-                        data-tags="game,random,choice,strategy,decision">
-                        <div class="card-icon game-icon-rps">
-                            <i data-lucide="scissors"></i>
+                <!-- ── Projects Grid ──────────────────────────────────────── -->
+        <section class="projects-section" aria-label="Projects">
+            <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">
+                        <div class="card-icon game-icon-puzzle">
+                            <i data-lucide="blocks"></i>
                         </div>
-                        <h3>Rock Paper Scissors</h3>
-                        <p>Battle against the computer!</p>
+                        <h3>2048 Game</h3>
+                        <p>Combine tiles and reach 2048!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="games" data-project="dice-rolling"
-                         data-tags="game,random,animation,probability">
-                        <div class="card-icon game-icon-dice">
-                            <i data-lucide="dice-5"></i>
+                    <div class="project-card" data-category="math" data-project="progression-recognizer"
+                        data-tags="math,sequence,progression,arithmetic,geometric">
+                        <div class="card-icon math-icon-progress">
+                            <i data-lucide="sigma"></i>
                         </div>
-                        <h3>Dice Rolling</h3>
-                        <p>Roll the dice with 3D animation!</p>
+                        <h3>AP/GP/AGP/HP Recognizer</h3>
+                        <p>Identify progression types from any sequence.</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="games" data-project="coin-flip"
-                         data-tags="game,random,animation,probability,heads,tails">
-                        <div class="card-icon game-icon-coin">
-                            <i data-lucide="coins"></i>
+                    <div class="project-card" data-category="math" data-project="armstrong"
+                        data-tags="math,number,digits,power">
+                        <div class="card-icon math-icon-gem">
+                            <i data-lucide="gem"></i>
                         </div>
-                        <h3>Coin Flip</h3>
-                        <p>Heads or tails with spinning animation!</p>
+                        <h3>Armstrong Numbers</h3>
+                        <p>Check special number properties!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="games" data-project="number-guessing"
-                         data-tags="game,logic,loops,conditional">
-                        <div     class="card-icon game-icon-target">
-                            <i data-lucide="target"></i>
+                    <div class="project-card" data-category="math" data-project="calculator"
+                        data-tags="math,calculator,arithmetic,operations">
+                        <div class="card-icon math-icon-calc">
+                            <i data-lucide="calculator"></i>
                         </div>
-                        <h3>Number Guessing</h3>
-                        <p>Guess the secret number!</p>
+                        <h3>Calculator</h3>
+                        <p>Your mathematical companion!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="games" data-project="hangman"
-                         data-tags="game,word,letters,logic,string">
-                        <div class="card-icon game-icon-hangman">
-                            <i data-lucide="person-standing"></i>
+                    <div class="project-card" data-category="games" data-project="coin-flip"
+                        data-tags="game,random,animation,probability,heads,tails">
+                        <div class="card-icon game-icon-coin">
+                            <i data-lucide="coins"></i>
                         </div>
-                        <h3>Hangman</h3>
-                        <p>Classic word-guessing game!</p>
+                        <h3>Coin Flip</h3>
+                        <p>Heads or tails with spinning animation!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="games" data-project="word-scramble">
-                        <div class="card-icon game-icon-word">
-                            <i data-lucide="shuffle"></i>
+                    <div class="project-card" data-category="math" data-project="collatz"
+                        data-tags="math,conjecture,algorithm,sequence">
+                        <div class="card-icon math-icon-number">
+                            <i data-lucide="hash"></i>
                         </div>
-                        <h3>Word Scramble</h3>
-                        <p>Unscramble words before attempts run out!</p>
+                        <h3>Collatz Conjecture</h3>
+                        <p>Explore the 3n+1 problem!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="games" data-project="flames">
-                        <div class="card-icon game-icon-love">
-                            <i data-lucide="heart"></i>
+                    <div class="project-card" data-category="utilities" data-project="color-palette"
+                        data-tags="utility,color,palette,css,design,theme,website">
+                        <div class="card-icon utility-icon-typing">
+                            <i data-lucide="palette"></i>
                         </div>
-                        <h3>FLAMES Game</h3>
-                        <p>Discover your relationship status!</p>
+                        <h3>Color Palette Suggestor</h3>
+                        <p>Generate palettes + CSS snippets for any website type and mood!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="games" data-project="dots-boxes">
-                        <div class="card-icon game-icon-grid">
-                            <i data-lucide="grid-3x3"></i>
+                    <div class="project-card" data-category="math" data-project="coordinate-polar-transform"
+                        data-tags="math,coordinate,transformation,geometry">
+                        <div class="card-icon math-icon-compass">
+                            <i data-lucide="compass"></i>
                         </div>
-                       <h3>Dots & Boxes AI</h3> 
-                        <p>Challenge friends or AI in this strategy game!</p>
+                        <h3>Coordinate to Polar</h3>
+                        <p>Transform Cartesian (x, y) into polar (r, theta).</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="games" data-project="password-forge">
-                        <div class="card-icon game-icon-lock">
-                            <i data-lucide="shield-check"></i>
+                    <div class="project-card" data-category="math" data-project="derivative-calculator"
+                        data-tags="math,calculus,derivative,polynomial">
+                        <div class="card-icon math-icon-derivative">
+                            <i data-lucide="function-square"></i>
                         </div>
-                        <h3>Password Forge</h3>
-                        <p>Survive evolving firewall password rules!</p>
+                        <h3>Derivative Calculator</h3>
+                        <p>Compute 1st/nth polynomial derivatives and evaluate them.</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="games" data-project="math-quiz"
-                        data-tags="game,math,quiz,mcq,lives,streak">
-                        <div class="card-icon game-icon-brain">
-                            <i data-lucide="brain"></i>
+                    <div class="project-card" data-category="games" data-project="dice-rolling"
+                        data-tags="game,random,animation,probability">
+                        <div class="card-icon game-icon-dice">
+                            <i data-lucide="dice-5"></i>
                         </div>
-                        <h3>Math Quiz</h3>
-                        <p>MCQ quiz with lives, streaks & difficulty levels!</p>
+                        <h3>Dice Rolling</h3>
+                        <p>Roll the dice with 3D animation!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="games" data-project="snake-game">
-                        <div class="card-icon game-icon-snake">
-                            <i data-lucide="bug"></i>
+                    <div class="project-card" data-category="games" data-project="dots-boxes">
+                        <div class="card-icon game-icon-grid">
+                            <i data-lucide="grid-3x3"></i>
                         </div>
-                        <h3>Snake Game</h3>
-                        <p>Classic snake game!</p>
+                        <h3>Dots & Boxes AI</h3>
+                        <p>Challenge friends or AI in this strategy game!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
@@ -1087,12 +1086,22 @@ <h3>Emoji Memory Game</h3>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="games" data-project="whack-a-mole">
-                        <div class="card-icon game-icon-hammer">
-                            <i data-lucide="hammer"></i>
-                        </div>                        
-                        <h3>Whack-a-Mole</h3>
-                        <p>Hit the moles before they disappear!</p>
+                    <div class="project-card" data-category="math" data-project="fibonacci"
+                        data-tags="math,sequence,series,loops,recursion">
+                        <div class="card-icon math-icon-fibonacci">
+                            <i data-lucide="sparkles"></i>
+                        </div>
+                        <h3>Fibonacci Series</h3>
+                        <p>Generate Fibonacci sequences!</p>
+                        <button class="btn-play">Try It</button>
+                    </div>
+
+                    <div class="project-card" data-category="games" data-project="flames">
+                        <div class="card-icon game-icon-love">
+                            <i data-lucide="heart"></i>
+                        </div>
+                        <h3>FLAMES Game</h3>
+                        <p>Discover your relationship status!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
@@ -1105,79 +1114,73 @@ <h3>Flappy Game</h3>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="games" data-project="2048-game"
-                         data-tags="game,puzzle,2048,logic,tiles">
-                        <div class="card-icon game-icon-puzzle">
-                            <i data-lucide="blocks"></i>
+                    <div class="project-card" data-category="games" data-project="hangman"
+                        data-tags="game,word,letters,logic,string">
+                        <div class="card-icon game-icon-hangman">
+                            <i data-lucide="person-standing"></i>
                         </div>
-                        <h3>2048 Game</h3>
-                        <p>Combine tiles and reach 2048!</p>
+                        <h3>Hangman</h3>
+                        <p>Classic word-guessing game!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <!-- MATH -->
-                    <div class="project-card" data-category="math" data-project="fibonacci"
-                        data-tags="math,sequence,series,loops,recursion">
-                        <div class="card-icon math-icon-fibonacci">
-                            <i data-lucide="sparkles"></i>
+                    <div class="project-card" data-category="games" data-project="math-quiz"
+                        data-tags="game,math,quiz,mcq,lives,streak">
+                        <div class="card-icon game-icon-brain">
+                            <i data-lucide="brain"></i>
                         </div>
-                        <h3>Fibonacci Series</h3>
-                        <p>Generate Fibonacci sequences!</p>
+                        <h3>Math Quiz</h3>
+                        <p>MCQ quiz with lives, streaks & difficulty levels!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="math" data-project="progression-recognizer"
-                         data-tags="math,sequence,progression,arithmetic,geometric">
-                        <div class="card-icon math-icon-progress">
-                            <i data-lucide="sigma"></i>
+                    <div class="project-card" data-category="utilities" data-project="morse-code"
+                        data-tags="utility,morse,translation,communication">
+                        <div class="card-icon utility-icon-radio">
+                            <i data-lucide="radio"></i>
                         </div>
-                        <h3>AP/GP/AGP/HP Recognizer</h3>
-                        <p>Identify progression types from any sequence.</p>
+                        <h3>Morse Code</h3>
+                        <p>Translate with lights &amp; sound!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="math" data-project="pascal-triangle"
-                         data-tags="math,triangle,visualization,recursion">
-                        <div class="card-icon math-icon-triangle">
-                            <i data-lucide="triangle"></i>
-                        </div>  
-                        <h3>Pascal's Triangle</h3>
-                        <p>Beautiful hexagon visualization!</p>
+                    <div class="project-card" data-category="utilities" data-project="number-converter">
+                        <div class="card-icon utility-icon-convert">
+                            <i data-lucide="refresh-cw"></i>
+                        </div>
+                        <h3>Number Converter</h3>
+                        <p>Convert Dec, Bin, Oct, and Hex!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="math" data-project="armstrong"
-                         data-tags="math,number,digits,power">
-                        <div class="card-icon math-icon-gem">
-                            <i data-lucide="gem"></i>
-                        </div>
-                        <h3>Armstrong Numbers</h3>
-                        <p>Check special number properties!</p>
+                    <div class="project-card" data-category="games" data-project="number-guessing"
+                        data-tags="game,logic,loops,conditional">
+                        <h3>Number Guessing</h3>
+                        <p>Guess the secret number!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="math" data-project="calculator"
-                         data-tags="math,calculator,arithmetic,operations">
-                       <div class="card-icon math-icon-calc">
-                            <i data-lucide="calculator"></i>
+                    <div class="project-card" data-category="math" data-project="pascal-triangle"
+                        data-tags="math,triangle,visualization,recursion">
+                        <div class="card-icon math-icon-triangle">
+                            <i data-lucide="triangle"></i>
                         </div>
-                        <h3>Calculator</h3>
-                        <p>Your mathematical companion!</p>
+                        <h3>Pascal's Triangle</h3>
+                        <p>Beautiful hexagon visualization!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="math" data-project="collatz"
-                         data-tags="math,conjecture,algorithm,sequence">
-                        <div class="card-icon math-icon-number">
-                            <i data-lucide="hash"></i>
+                    <div class="project-card" data-category="games" data-project="password-forge">
+                        <div class="card-icon game-icon-lock">
+                            <i data-lucide="shield-check"></i>
                         </div>
-                        <h3>Collatz Conjecture</h3>
-                        <p>Explore the 3n+1 problem!</p>
+                        <h3>Password Forge</h3>
+                        <p>Survive evolving firewall password rules!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
                     <div class="project-card" data-category="math" data-project="prime-analyzer"
-                         data-tags="math,prime,factors,algorithm">
+                        data-tags="math,prime,factors,algorithm">
                         <div class="card-icon math-icon-prime">
                             <i data-lucide="sparkles"></i>
                         </div>
@@ -1187,7 +1190,7 @@ <h3>Prime Analyzer</h3>
                     </div>
 
                     <div class="project-card" data-category="math" data-project="projectile-motion"
-                         data-tags="math,physics,motion,calculation">
+                        data-tags="math,physics,motion,calculation">
                         <div class="card-icon math-icon-rocket">
                             <i data-lucide="rocket"></i>
                         </div>
@@ -1196,38 +1199,27 @@ <h3>Projectile Motion</h3>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="math" data-project="coordinate-polar-transform"
-                         data-tags="math,coordinate,transformation,geometry">
-                        <div class="card-icon math-icon-compass">
-                            <i data-lucide="compass"></i>
-                        </div>
-                        <h3>Coordinate to Polar</h3>
-                        <p>Transform Cartesian (x, y) into polar (r, theta).</p>
-                        <button class="btn-play">Try It</button>
-                    </div>
-
-                    <div class="project-card" data-category="math" data-project="derivative-calculator"
-                         data-tags="math,calculus,derivative,polynomial">
-                        <div class="card-icon math-icon-derivative">
-                            <i data-lucide="function-square"></i>
+                    <div class="project-card" data-category="games" data-project="rock-paper-scissor"
+                        data-tags="game,random,choice,strategy,decision">
+                        <div class="card-icon game-icon-rps">
+                            <i data-lucide="scissors"></i>
                         </div>
-                        <h3>Derivative Calculator</h3>
-                        <p>Compute 1st/nth polynomial derivatives and evaluate them.</p>
+                        <h3>Rock Paper Scissors</h3>
+                        <p>Battle against the computer!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="utilities" data-project="morse-code"
-                         data-tags="utility,morse,translation,communication">
-                        <div class="card-icon utility-icon-radio">
-                            <i data-lucide="radio"></i>
+                    <div class="project-card" data-category="games" data-project="snake-game">
+                        <div class="card-icon game-icon-snake">
+                            <i data-lucide="bug"></i>
                         </div>
-                        <h3>Morse Code</h3>
-                        <p>Translate with lights &amp; sound!</p>
+                        <h3>Snake Game</h3>
+                        <p>Classic snake game!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
                     <div class="project-card" data-category="utilities" data-project="tower-of-hanoi"
-                         data-tags="utility,puzzle,recursion,algorithm">
+                        data-tags="utility,puzzle,recursion,algorithm">
                         <div class="card-icon utility-icon-tower">
                             <i data-lucide="tower-control"></i>
                         </div>
@@ -1236,15 +1228,6 @@ <h3>Tower of Hanoi</h3>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="utilities" data-project="number-converter">
-                        <div class="card-icon utility-icon-convert">
-                            <i data-lucide="refresh-cw"></i>
-                        </div>
-                        <h3>Number Converter</h3>
-                        <p>Convert Dec, Bin, Oct, and Hex!</p>
-                        <button class="btn-play">Try It</button>
-                    </div>
-
                     <div class="project-card" data-category="utilities" data-project="typing-speed-tester">
                         <div class="card-icon utility-icon-typing">
                             <i data-lucide="keyboard"></i>
@@ -1254,16 +1237,23 @@ <h3>Typing Speed Tester</h3>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="utilities" data-project="color-palette"
-                        data-tags="utility,color,palette,css,design,theme,website">
-                        <div class="card-icon utility-icon-typing">
-                            <i data-lucide="palette"></i>
+                    <div class="project-card" data-category="games" data-project="whack-a-mole">
+                        <div class="card-icon game-icon-hammer">
+                            <i data-lucide="hammer"></i>
                         </div>
-                        <h3>Color Palette Suggestor</h3>
-                        <p>Generate palettes + CSS snippets for any website type and mood!</p>
+                        <h3>Whack-a-Mole</h3>
+                        <p>Hit the moles before they disappear!</p>
                         <button class="btn-play">Try It</button>
                     </div>
 
+                    <div class="project-card" data-category="games" data-project="word-scramble">
+                        <div class="card-icon game-icon-word">
+                            <i data-lucide="shuffle"></i>
+                        </div>
+                        <h3>Word Scramble</h3>
+                        <p>Unscramble words before attempts run out!</p>
+                        <button class="btn-play">Try It</button>
+                    </div>
                 </div><!-- /projects-grid -->
                 
                 <div id="emptyState" class="empty-state" style="display: none;">
diff --git a/web-app/math.html b/web-app/math.html
index a448c4a..d28bac5 100644
--- a/web-app/math.html
+++ b/web-app/math.html
@@ -96,13 +96,6 @@ <h1>🎮 Python Mini Projects</h1>
             <div class="container">
                 <div class="projects-grid" id="projectsGrid">
 
-                    <div class="project-card" data-category="math" data-project="fibonacci">
-                        <div class="card-icon">✨</div>
-                        <h3>Fibonacci Series</h3>
-                        <p>Generate Fibonacci sequences!</p>
-                        <button class="btn-play">Try It</button>
-                    </div>
-
                     <div class="project-card" data-category="math" data-project="progression-recognizer">
                         <div class="card-icon">📐</div>
                         <h3>AP/GP/AGP/HP Recognizer</h3>
@@ -110,13 +103,6 @@ <h3>AP/GP/AGP/HP Recognizer</h3>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="math" data-project="pascal-triangle">
-                        <div class="card-icon">🔺</div>
-                        <h3>Pascal's Triangle</h3>
-                        <p>Beautiful hexagon visualization!</p>
-                        <button class="btn-play">Try It</button>
-                    </div>
-
                     <div class="project-card" data-category="math" data-project="armstrong">
                         <div class="card-icon">💎</div>
                         <h3>Armstrong Numbers</h3>
@@ -138,20 +124,6 @@ <h3>Collatz Conjecture</h3>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="math" data-project="prime-analyzer">
-                        <div class="card-icon">🔱</div>
-                        <h3>Prime Analyzer</h3>
-                        <p>All-in-one prime number toolkit!</p>
-                        <button class="btn-play">Try It</button>
-                    </div>
-
-                    <div class="project-card" data-category="math" data-project="projectile-motion">
-                        <div class="card-icon">🚀</div>
-                        <h3>Projectile Motion</h3>
-                        <p>Calculate TOF, Hmax, and Range with physics!</p>
-                        <button class="btn-play">Try It</button>
-                    </div>
-
                     <div class="project-card" data-category="math" data-project="coordinate-polar-transform">
                         <div class="card-icon">🧭</div>
                         <h3>Coordinate to Polar</h3>
@@ -166,6 +138,34 @@ <h3>Derivative Calculator</h3>
                         <button class="btn-play">Try It</button>
                     </div>
 
+                    <div class="project-card" data-category="math" data-project="fibonacci">
+                        <div class="card-icon">✨</div>
+                        <h3>Fibonacci Series</h3>
+                        <p>Generate Fibonacci sequences!</p>
+                        <button class="btn-play">Try It</button>
+                    </div>
+
+                    <div class="project-card" data-category="math" data-project="pascal-triangle">
+                        <div class="card-icon">🔺</div>
+                        <h3>Pascal's Triangle</h3>
+                        <p>Beautiful hexagon visualization!</p>
+                        <button class="btn-play">Try It</button>
+                    </div>
+
+                    <div class="project-card" data-category="math" data-project="prime-analyzer">
+                        <div class="card-icon">🔱</div>
+                        <h3>Prime Analyzer</h3>
+                        <p>All-in-one prime number toolkit!</p>
+                        <button class="btn-play">Try It</button>
+                    </div>
+
+                    <div class="project-card" data-category="math" data-project="projectile-motion">
+                        <div class="card-icon">🚀</div>
+                        <h3>Projectile Motion</h3>
+                        <p>Calculate TOF, Hmax, and Range with physics!</p>
+                        <button class="btn-play">Try It</button>
+                    </div>
+
                 </div><!-- /projects-grid -->
             </div>
         </section>
diff --git a/web-app/utilities.html b/web-app/utilities.html
index 959972d..e49ed2a 100644
--- a/web-app/utilities.html
+++ b/web-app/utilities.html
@@ -102,13 +102,6 @@ <h3>Morse Code</h3>
                         <button class="btn-play">Try It</button>
                     </div>
 
-                    <div class="project-card" data-category="utilities" data-project="tower-of-hanoi">
-                        <div class="card-icon">🗼</div>
-                        <h3>Tower of Hanoi</h3>
-                        <p>Solve the classic puzzle!</p>
-                        <button class="btn-play">Try It</button>
-                    </div>
-
                     <div class="project-card" data-category="utilities" data-project="number-converter">
                         <div class="card-icon">🔢</div>
                         <h3>Number Converter</h3>
@@ -116,6 +109,13 @@ <h3>Number Converter</h3>
                         <button class="btn-play">Try It</button>
                     </div>
 
+                    <div class="project-card" data-category="utilities" data-project="tower-of-hanoi">
+                        <div class="card-icon">🗼</div>
+                        <h3>Tower of Hanoi</h3>
+                        <p>Solve the classic puzzle!</p>
+                        <button class="btn-play">Try It</button>
+                    </div>
+
                     <div class="project-card" data-category="utilities" data-project="typing-speed-tester">
                         <div class="card-icon">⌨️</div>
                         <h3>Typing Speed Tester</h3>