diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
new file mode 100644
index 00000000..d3bc83d2
--- /dev/null
+++ b/.github/workflows/playwright.yml
@@ -0,0 +1,47 @@
+name: Playwright E2E Tests
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  test:
+    timeout-minutes: 15
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: 20
+
+    - name: Set up Python
+      uses: actions/setup-python@v5
+      with:
+        python-version: "3.12"
+
+    - name: Install dependencies
+      run: |
+        cd web-app
+        npm ci
+
+    - name: Install Playwright Browsers
+      run: |
+        cd web-app
+        npx playwright install --with-deps
+
+    - name: Run Playwright tests
+      run: |
+        cd web-app
+        npx playwright test
+
+    - name: Upload Playwright Report
+      uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: web-app/playwright-report/
+        retention-days: 30
diff --git a/.gitignore b/.gitignore
index d50a3efe..a6b60985 100644
Binary files a/.gitignore and b/.gitignore differ
diff --git a/web-app/index.html b/web-app/index.html
index abcded8d..4fea3d40 100644
--- a/web-app/index.html
+++ b/web-app/index.html
@@ -110,6 +110,250 @@
     </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 class="sidebar-menu-wrapper">
     <div class="sidebar-menu-title">Categories</div>
     <nav class="sidebar-menu" role="tablist" aria-label="Filter by category">
@@ -504,6 +748,32 @@ <h3>Legal</h3>
 
 <!-- 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',
+      '.modal',             /* project modal */
+      '#projectModal',
+      '.modal-content',
+      '#modalBody',
+      '.playground-section',
+      '.playground-body',
+    ];
+    guards.forEach(function (sel) {
+      document.querySelectorAll(sel).forEach(function (el) {
+        el.addEventListener('click', function (e) {
+          /* Only block propagation if sidebar is currently open */
+          if (document.body.classList.contains('sidebar-active')) {
+            e.stopPropagation();
+          }
+        }, false /* bubble — runs after target target bubble handlers */);
+      });
 (function() {
     const projectsGrid = document.getElementById('projectsGrid');
     if (!projectsGrid) return;
@@ -693,6 +963,7 @@ <h3>${proj.title}</h3>
                     toggle.setAttribute('aria-label', 'Switch to dark mode');
                 }
             }
+          }, false);
         });
     }
     
diff --git a/web-app/js/main.js b/web-app/js/main.js
index de59f2e9..08a1418e 100644
--- a/web-app/js/main.js
+++ b/web-app/js/main.js
@@ -2,6 +2,8 @@
    main.js — App wiring for Premium Python Projects Gallery
    ═══════════════════════════════════════════════════════════════ */
 
+import { updateProjectVisibility } from "./modules/utils.js";
+
 function prefersReducedMotion() {
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
@@ -136,6 +138,7 @@ document.addEventListener("DOMContentLoaded", function () {
     var footerNode = document.querySelector("footer.footer");
     var backToTopNode = document.getElementById("backToTop");
     var infoModalNode = document.getElementById("infoModalOverlay");
+    var projectModalNode = document.getElementById("projectModal");
     var sidebarDockNode = document.getElementById("mainSidebar");
     var mobileToggleNode = document.getElementById("mobileSidebarToggle");
     var heroControlsNode = document.querySelector(".hero-controls");
@@ -147,6 +150,7 @@ document.addEventListener("DOMContentLoaded", function () {
     if (footerNode) fragment.appendChild(footerNode);
     if (backToTopNode) fragment.appendChild(backToTopNode);
     if (infoModalNode) fragment.appendChild(infoModalNode);
+    if (projectModalNode) fragment.appendChild(projectModalNode);
     if (heroControlsNode) heroControlsNode.remove();
 
     document.body.appendChild(fragment);
@@ -1018,8 +1022,8 @@ document.addEventListener("DOMContentLoaded", function () {
   });
 
   renderRecentSearches();
-});
-/* ═══════════════════════════════════════════════════════════════
+
+  /* ═══════════════════════════════════════════════════════════════
       MODAL
     ═══════════════════════════════════════════════════════════════ */
 function getFocusableElements(root) {
@@ -1062,7 +1066,7 @@ function openProjectSafe(name, trigger) {
   var scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
   document.body.style.paddingRight = scrollbarWidth + "px";
   document.body.style.overflow = "hidden";
-  window.setMainInert(true);
+  setMainInert(true);
 
   safeRun(function () {
     if (typeof getProjectHTML === "function") {
@@ -1145,7 +1149,7 @@ function closeProjectSafe() {
   modal.setAttribute("aria-hidden", "true");
   document.body.style.paddingRight = "";
   document.body.style.overflow = "";
-  window.setMainInert(false);
+  setMainInert(false);
   if (removeTrap) {
     removeTrap();
     removeTrap = null;
@@ -1172,6 +1176,7 @@ document.addEventListener("keydown", function (e) {
 /* ── Expose for inline use ────────────────────────────────── */
 window.openProjectSafe = openProjectSafe;
 window.closeProjectSafe = closeProjectSafe;
+window.setMainInert = setMainInert;
 
 /* ═══════════════════════════════════════════════════════════════
      WIRE PROJECT CARDS
@@ -1644,3 +1649,5 @@ 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 44f0d6b9..89502ad8 100644
--- a/web-app/js/projects/tic-tac-toe.js
+++ b/web-app/js/projects/tic-tac-toe.js
@@ -865,6 +865,7 @@ function initTicTacToe() {
     if (!gameOver) lockBoard(false);
   }
 }
- 
-initTicTacToe();
+if (document.getElementById("start-btn")) {
+  initTicTacToe();
+}
 //end of init function
\ No newline at end of file
diff --git a/web-app/package-lock.json b/web-app/package-lock.json
index 25306af9..06815581 100644
--- a/web-app/package-lock.json
+++ b/web-app/package-lock.json
@@ -17,6 +17,7 @@
         "@codemirror/state": "^6.6.0",
         "@codemirror/theme-one-dark": "^6.1.3",
         "@codemirror/view": "^6.43.0",
+        "@playwright/test": "^1.60.0",
         "codemirror": "^6.0.2",
         "esbuild": "^0.28.0"
       }
@@ -624,6 +625,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@playwright/test": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.60.0.tgz",
+      "integrity": "sha512-O71yZIbAh/PxDMNGns37GHBIfrVkEVyn+AXyIa5dOTfb4/xNvRWV+Vv/NMbNCtODB/pO7vLlF2OTmMVLhmr7Ag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.60.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/codemirror": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.2.tgz",
@@ -689,6 +706,53 @@
         "@esbuild/win32-x64": "0.28.0"
       }
     },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.60.0.tgz",
+      "integrity": "sha512-hheHdokM8cdqCb0lcE3s+zT4t4W+vvjpGxsZlDnikarzx8tSzMebh3UiFtgqwFwnTnjYQcsyMF8ei2mCO/tpeA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.60.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.60.0.tgz",
+      "integrity": "sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/style-mod": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.3.tgz",
diff --git a/web-app/package.json b/web-app/package.json
index bc9b5328..691a8883 100644
--- a/web-app/package.json
+++ b/web-app/package.json
@@ -3,7 +3,8 @@
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "test:e2e": "playwright test"
   },
   "keywords": [],
   "author": "",
@@ -18,6 +19,7 @@
     "@codemirror/state": "^6.6.0",
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.43.0",
+    "@playwright/test": "^1.60.0",
     "codemirror": "^6.0.2",
     "esbuild": "^0.28.0"
   }
diff --git a/web-app/playwright.config.js b/web-app/playwright.config.js
new file mode 100644
index 00000000..796c718a
--- /dev/null
+++ b/web-app/playwright.config.js
@@ -0,0 +1,40 @@
+const { defineConfig, devices } = require('@playwright/test');
+
+module.exports = defineConfig({
+  testDir: './tests-e2e',
+  timeout: 45000,
+  expect: {
+    timeout: 5000
+  },
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://127.0.0.1:8000',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
+  webServer: {
+    command: 'python3 -m http.server 8000',
+    url: 'http://127.0.0.1:8000',
+    reuseExistingServer: !process.env.CI,
+    cwd: __dirname,
+    timeout: 10000,
+  },
+});
diff --git a/web-app/tests-e2e/modal.spec.js b/web-app/tests-e2e/modal.spec.js
new file mode 100644
index 00000000..997d8954
--- /dev/null
+++ b/web-app/tests-e2e/modal.spec.js
@@ -0,0 +1,75 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('Modal Lifecycle & Focus Trapping', () => {
+  test('should open modal, trap keyboard focus, close modal, and restore focus to trigger button', async ({ page }) => {
+    await page.goto('/');
+
+    // Scroll to projects to show cards
+    const exploreBtn = page.locator('#exploreBtn');
+    await exploreBtn.click();
+
+    // Wait for sidebar to be active
+    await expect(page.locator('body')).toHaveClass(/sidebar-active/);
+
+    // Get the first project card's "Try It" button
+    const firstCardPlayBtn = page.locator('.project-card .btn-play').first();
+    await expect(firstCardPlayBtn).toBeVisible();
+
+    // Focus and click the play button
+    await firstCardPlayBtn.focus();
+    await firstCardPlayBtn.click();
+
+    const modal = page.locator('#projectModal');
+    // Verify modal has active class
+    await expect(modal).toHaveClass(/active/);
+
+    // Selector for focusable elements
+    const focusableSelector = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+    // Get focusable element tags/ids/classes inside modal to compare
+    const focusablesInModal = await modal.evaluate((modalEl, sel) => {
+      return Array.from(modalEl.querySelectorAll(sel))
+        .filter(el => !el.closest('[aria-hidden="true"]') && !el.classList.contains("visually-hidden"))
+        .map(el => el.tagName + (el.id ? '#' + el.id : '') + (el.className ? '.' + el.className.split(' ').join('.') : ''));
+    }, focusableSelector);
+
+    expect(focusablesInModal.length).toBeGreaterThan(0);
+
+    // 1. Manually focus the first focusable element inside the modal
+    await modal.evaluate((modalEl, sel) => {
+      const focusables = Array.from(modalEl.querySelectorAll(sel))
+        .filter(el => !el.closest('[aria-hidden="true"]') && !el.classList.contains("visually-hidden"));
+      focusables[0].focus();
+    }, focusableSelector);
+
+    // 2. Press Shift+Tab. Focus should wrap around to the last focusable element in the modal.
+    await page.keyboard.press('Shift+Tab');
+    
+    let activeTag = await page.evaluate(() => {
+      const el = document.activeElement;
+      return el.tagName + (el.id ? '#' + el.id : '') + (el.className ? '.' + el.className.split(' ').join('.') : '');
+    });
+    const lastTagName = focusablesInModal[focusablesInModal.length - 1];
+    expect(activeTag).toBe(lastTagName);
+
+    // 3. Press Tab. Focus should wrap back to the first focusable element in the modal.
+    await page.keyboard.press('Tab');
+    
+    activeTag = await page.evaluate(() => {
+      const el = document.activeElement;
+      return el.tagName + (el.id ? '#' + el.id : '') + (el.className ? '.' + el.className.split(' ').join('.') : '');
+    });
+    const firstTagName = focusablesInModal[0];
+    expect(activeTag).toBe(firstTagName);
+
+    // 4. Close the modal by pressing Escape
+    await page.keyboard.press('Escape');
+
+    // Verify modal is closed (no longer has active class)
+    await expect(modal).not.toHaveClass(/active/);
+
+    // Verify focus is restored to the original play button
+    const isPlayBtnFocused = await firstCardPlayBtn.evaluate(el => el === document.activeElement);
+    expect(isPlayBtnFocused).toBe(true);
+  });
+});
diff --git a/web-app/tests-e2e/playground.spec.js b/web-app/tests-e2e/playground.spec.js
new file mode 100644
index 00000000..9818bb03
--- /dev/null
+++ b/web-app/tests-e2e/playground.spec.js
@@ -0,0 +1,32 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('Python Playground', () => {
+  test('should load Pyodide, execute default code, and show output in console', async ({ page }) => {
+    // 1. Navigate to homepage
+    await page.goto('/');
+
+    // 2. Click the Playground tab in the sticky filter bar
+    const playgroundTab = page.locator('button[data-sticky-category="playground"]');
+    await expect(playgroundTab).toBeVisible();
+    await playgroundTab.click();
+
+    // Verify playground section is displayed
+    const playgroundSection = page.locator('#playgroundSection');
+    await expect(playgroundSection).toBeVisible();
+
+    // 3. Wait for Pyodide load completion (wait up to 30 seconds for external download)
+    const statusText = page.locator('#statusText');
+    await expect(statusText).toHaveText(/Pyodide Ready/, { timeout: 30000 });
+
+    // Verify run code button is enabled
+    const runBtn = page.locator('#runCode');
+    await expect(runBtn).toBeEnabled();
+
+    // 4. Click the run code button
+    await runBtn.click();
+
+    // 5. Verify output console shows "Hello, World!"
+    const consoleOutput = page.locator('#consoleOutput');
+    await expect(consoleOutput).toContainText('Hello, World!');
+  });
+});
diff --git a/web-app/tests-e2e/search.spec.js b/web-app/tests-e2e/search.spec.js
new file mode 100644
index 00000000..c4c4275b
--- /dev/null
+++ b/web-app/tests-e2e/search.spec.js
@@ -0,0 +1,57 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('Search & Filter', () => {
+  test('should show autocomplete suggestions on typing and filter cards by category', async ({ page }) => {
+    await page.goto('/');
+
+    // Scroll to projects to show the sidebar search
+    const exploreBtn = page.locator('#exploreBtn');
+    await exploreBtn.click();
+
+    // Wait for sidebar to be active
+    await expect(page.locator('body')).toHaveClass(/sidebar-active/);
+
+    const searchInput = page.locator('#searchInput');
+    const searchDropdown = page.locator('#searchDropdown');
+    const resultsList = page.locator('#resultsList');
+
+    // Wait for the search input to become visible
+    await expect(searchInput).toBeVisible();
+
+    // 1. Focus search input and type query
+    await searchInput.focus();
+    await searchInput.fill('2048');
+
+    // Verify autocomplete dropdown is active and shows matching suggestions
+    await expect(searchDropdown).toHaveClass(/active/);
+    const suggestionText = resultsList.locator('.dropdown-item-text');
+    await expect(suggestionText).toContainText('2048');
+
+    // Clear search input to restore all cards
+    await searchInput.fill('');
+    await page.keyboard.press('Enter');
+
+    // 2. Click category tab "games" from sidebar
+    const gamesTab = page.locator('.sidebar-tab[data-category="games"]');
+    await gamesTab.click();
+
+    // Verify that the games tab has the active class
+    await expect(gamesTab).toHaveClass(/active/);
+
+    // Verify only games category cards are displayed, and others are hidden
+    const projectCards = page.locator('.project-card');
+    const count = await projectCards.count();
+    expect(count).toBeGreaterThan(0);
+
+    for (let i = 0; i < count; i++) {
+      const card = projectCards.nth(i);
+      const isVisible = await card.isVisible();
+      if (isVisible) {
+        await expect(card).toHaveAttribute('data-category', 'games');
+      } else {
+        const category = await card.getAttribute('data-category');
+        expect(category).not.toBe('games');
+      }
+    }
+  });
+});
diff --git a/web-app/tests-e2e/theme.spec.js b/web-app/tests-e2e/theme.spec.js
new file mode 100644
index 00000000..b4eb33fc
--- /dev/null
+++ b/web-app/tests-e2e/theme.spec.js
@@ -0,0 +1,48 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('Theme Toggle', () => {
+  test('should switch to light/dark mode and confirm correct data-theme attribute and color variables exist', async ({ page }) => {
+    await page.goto('/');
+
+    const html = page.locator('html');
+    
+    // Default theme is dark
+    await expect(html).toHaveAttribute('data-theme', 'dark');
+
+    // Verify initial dark variables
+    let bg = await html.evaluate(el => window.getComputedStyle(el).getPropertyValue('--bg').trim());
+    let text = await html.evaluate(el => window.getComputedStyle(el).getPropertyValue('--text').trim());
+    expect(bg).toBe('#0c0f1a');
+    expect(text).toBe('#f0f2f5');
+
+    // Scroll to projects to show the sidebar theme toggle
+    await page.locator('#exploreBtn').click();
+
+    // Wait for sidebar to be active
+    await expect(page.locator('body')).toHaveClass(/sidebar-active/);
+
+    // Target the visible theme toggle in the sidebar
+    const themeToggle = page.locator('.sidebar-dock #themeToggle');
+    await expect(themeToggle).toBeVisible();
+    await themeToggle.click();
+
+    // Verify theme changed to light
+    await expect(html).toHaveAttribute('data-theme', 'light');
+
+    // Verify light variables
+    bg = await html.evaluate(el => window.getComputedStyle(el).getPropertyValue('--bg').trim());
+    text = await html.evaluate(el => window.getComputedStyle(el).getPropertyValue('--text').trim());
+    expect(bg).toBe('#f4f6f9');
+    expect(text).toBe('#0f172a');
+
+    // Click theme toggle again to switch back to dark mode
+    await themeToggle.click();
+
+    // Verify theme changed back to dark
+    await expect(html).toHaveAttribute('data-theme', 'dark');
+    bg = await html.evaluate(el => window.getComputedStyle(el).getPropertyValue('--bg').trim());
+    text = await html.evaluate(el => window.getComputedStyle(el).getPropertyValue('--text').trim());
+    expect(bg).toBe('#0c0f1a');
+    expect(text).toBe('#f0f2f5');
+  });
+});