diff --git a/web-app/assets/moon.svg b/web-app/assets/moon.svg
new file mode 100644
index 0000000..c14ef3a
--- /dev/null
+++ b/web-app/assets/moon.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M21 14.5C19.74 18.29 16.17 21 12 21C7.03 21 3 16.97 3 12C3 7.83 5.71 4.26 9.5 3C8.92 4.07 8.6 5.29 8.6 6.6C8.6 11.46 12.54 15.4 17.4 15.4C18.71 15.4 19.93 15.08 21 14.5Z"
+    fill="#CBD5E1"/>
+</svg>
\ No newline at end of file
diff --git a/web-app/assets/sun.svg b/web-app/assets/sun.svg
new file mode 100644
index 0000000..0053526
--- /dev/null
+++ b/web-app/assets/sun.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="24"
+     height="24"
+     viewBox="0 0 24 24"
+     fill="none"
+     stroke="#000000"
+     stroke-width="2"
+     stroke-linecap="round"
+     stroke-linejoin="round">
+     
+    <circle cx="12" cy="12" r="5"></circle>
+    <line x1="12" y1="1" x2="12" y2="3"></line>
+    <line x1="12" y1="21" x2="12" y2="23"></line>
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+    <line x1="1" y1="12" x2="3" y2="12"></line>
+    <line x1="21" y1="12" x2="23" y2="12"></line>
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+</svg>
\ No newline at end of file
diff --git a/web-app/css/styles.css b/web-app/css/styles.css
index 691ba2e..84b1ea9 100644
--- a/web-app/css/styles.css
+++ b/web-app/css/styles.css
@@ -118,7 +118,6 @@ body {
 }
 
 .container {
-    max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
 }
@@ -138,11 +137,9 @@ body {
 
 .navbar .container {
     display: flex;
-    justify-content: space-between;
+    justify-content:space-around;
     align-items: center;
-    gap: 2rem;
 }
-
 .navbar-brand {
     display: flex;
     align-items: baseline;
@@ -557,8 +554,9 @@ body {
     display: flex;
     gap: 1.05rem;
     justify-content: center;
+    align-items: center;
     flex-wrap: wrap;
-    margin-bottom: 1.1rem;
+    /* margin-bottom: 1.1rem; */
     animation: fadeInUp 0.7s ease 0.4s both;
 }
 
@@ -1235,6 +1233,12 @@ body {
     max-width: 600px;
     margin: 0 auto;
 }
+.search-box-container{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 20px;
+}
 
 .search-box {
     position: relative;
@@ -1244,6 +1248,7 @@ body {
     padding: 0.5rem 1.5rem;
     display: flex;
     align-items: center;
+    justify-content: center;
     gap: 1rem;
     transition: var(--transition);
 }
diff --git a/web-app/index.html b/web-app/index.html
index 03fae2e..f29f4d4 100644
--- a/web-app/index.html
+++ b/web-app/index.html
@@ -797,72 +797,74 @@
         🚀 Skip to main content
     </a>
 <!-- Navigation -->
-<nav aria-label="Primary" class="navbar">
-<div class="container nav-wrapper">
-<!-- LEFT -->
-<div class="navbar-brand">
+     <nav aria-label="Primary" class="navbar">
+         <div class="container nav-wrapper">
+             <!-- LEFT -->
+             <div class="navbar-brand">
 <a class="logo-wrap" href="#">
 <!-- LOGO IMAGE -->
 <img alt="PyMini Logo" class="navbar-logo" src="/assets/logo.png"/>
 <!-- TEXT -->
 <div class="logo-text">
-<span class="logo-py">py</span>
-<span class="logo-mini">.mini</span>
-<span class="logo-parens">()</span>
+    <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>
+    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="searchInput" placeholder="Search projects or games..." type="text"/>
-</div>
-<!-- RIGHT -->
-<div class="nav-controls">
-<button aria-label="Mute sounds" class="sound-toggle" id="soundToggle" type="button">
-<i class="fas fa-volume-up"></i>
+
+        <div class="container1">
+            <div aria-label="Project categories" class="hero-features" role="tablist">
+<button aria-selected="true" class="feature-badge tab active" data-category="all" role="tab" tabindex="0">
+<span class="feature-icon"><i data-lucide="star"></i></span>
+<span class="feature-label">all</span>
+</button>
+<button aria-selected="false" class="feature-badge tab" data-category="games" role="tab" tabindex="-1">
+<span class="feature-icon"><i data-lucide="gamepad-2"></i></span>
+<span class="feature-label">games</span>
 </button>
-<button aria-label="Switch theme" class="theme-toggle" id="themeToggle" type="button">
-<i class="fas fa-moon"></i>
+<button aria-selected="false" class="feature-badge tab" data-category="math" role="tab" tabindex="-1">
+<span class="feature-icon"><i data-lucide="hash"></i></span>
+<span class="feature-label">math</span>
 </button>
+<button aria-selected="false" class="feature-badge tab" data-category="utilities" role="tab" tabindex="-1">
+<span class="feature-icon"><i data-lucide="lock"></i></span>
+<span class="feature-label">utilities</span>
+</button>
+<button aria-selected="false" class="feature-badge tab" data-category="playground" id="playgroundTab" role="tab" tabindex="-1">
+<span class="feature-icon"><i data-lucide="terminal"></i></span>
+<span class="feature-label">playground</span>
+</button>
+<button class="btn-random-project" id="randomProjectBtn" title="Discover a random project!">
+        launch random →
+    </button>
+</div>
 </div>
+    
+<!-- RIGHT -->
+<div class="nav-controls">
+    <button aria-label="Mute sounds" class="sound-toggle" id="soundToggle" type="button">
+        <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>
+    </button>
 </div>
+
 </nav>
+<!-- CENTER SEARCH -->
+ <div class="search-box-container">
+     <div class="search-box">
+         <i class="fas fa-search"></i>
+         <input aria-label="Search projects" id="searchInput" placeholder="Search projects or games..." type="text"/>
+        </div>
+    </div>
 <!-- ── Sticky Category Filter Bar ─────────────────────────────── -->
 <!-- Appears below navbar when user scrolls past the hero section  -->
-<div aria-label="Project categories (sticky)" class="sticky-filter-bar" id="stickyFilterBar" role="tablist">
-    <div class="sticky-filter-inner">
-        <button aria-selected="true" class="sticky-tab active" data-sticky-category="all" role="tab" tabindex="0">
-            <i aria-hidden="true" data-lucide="layout-grid"></i>
-            <span>all</span>
-        </button>
-        <button aria-selected="false" class="sticky-tab" data-sticky-category="games" role="tab" tabindex="-1">
-            <i aria-hidden="true" data-lucide="gamepad-2"></i>
-            <span>games</span>
-        </button>
-        <button aria-selected="false" class="sticky-tab" data-sticky-category="math" role="tab" tabindex="-1">
-            <i aria-hidden="true" data-lucide="hash"></i>
-            <span>math</span>
-        </button>
-        <button aria-selected="false" class="sticky-tab" data-sticky-category="utilities" role="tab" tabindex="-1">
-            <i aria-hidden="true" data-lucide="lock"></i>
-            <span>utilities</span>
-        </button>
-        <button aria-selected="false" class="sticky-tab" data-sticky-category="playground" role="tab" tabindex="-1">
-            <i aria-hidden="true" data-lucide="terminal"></i>
-            <span>playground</span>
-        </button>
-        <button aria-selected="false" class="sticky-tab" data-sticky-category="favorites" role="tab" tabindex="-1">
-            <i aria-hidden="true" class="fas fa-star"></i>
-            <span>favorites</span>
-        </button>
-    </div>
-</div>
-
 <main id="main-content" tabindex="-1">
     <section class="hero-section" aria-label="Welcome">
         <div class="hero-background"></div>
@@ -871,50 +873,15 @@
                 <h2 class="hero-title">Learn Python the Fun Way!</h2>
                 <p class="hero-subtitle">25+ Mini Projects • Beautiful UI • Beginner Friendly • Zero Dependencies</p>
 
-                <div aria-label="Project categories" class="hero-features" role="tablist">
-                    <button aria-selected="true" class="feature-badge tab active" data-category="all" role="tab" tabindex="0">
-                        <span class="feature-icon"><i data-lucide="layout-grid"></i></span>
-                        <span class="feature-label">all</span>
-                    </button>
-                    <button aria-selected="false" class="feature-badge tab" data-category="games" role="tab" tabindex="-1">
-                        <span class="feature-icon"><i data-lucide="gamepad-2"></i></span>
-                        <span class="feature-label">games</span>
-                    </button>
-                    <button aria-selected="false" class="feature-badge tab" data-category="math" role="tab" tabindex="-1">
-                        <span class="feature-icon"><i data-lucide="hash"></i></span>
-                        <span class="feature-label">math</span>
-                    </button>
-                    <button aria-selected="false" class="feature-badge tab" data-category="utilities" role="tab" tabindex="-1">
-                        <span class="feature-icon"><i data-lucide="lock"></i></span>
-                        <span class="feature-label">utilities</span>
-                    </button>
-                    <!--
-                        PLAYGROUND TAB
-                        data-category="playground" is detected by main.js
-                        and delegates to window.playgroundAPI instead of
-                        running applyCategoryFilter().
-                    -->
-                    <button aria-selected="false" class="feature-badge tab" data-category="playground" id="playgroundTab" role="tab" tabindex="-1">
-                        <span class="feature-icon"><i data-lucide="terminal"></i></span>
-                        <span class="feature-label">playground</span>
-                    </button>
-                    <button aria-selected="false" class="feature-badge tab" data-category="favorites" role="tab" tabindex="-1">
-                        <span class="feature-icon"><i class="fas fa-star"></i></span>
-                        <span class="feature-label">favorites</span>
-                    </button>
-                </div>
-
-                <button class="btn-random-project" id="randomProjectBtn" title="Discover a random project!">
-                    launch random →
-                </button>
-            </div>
-        </div>
+
     </section>
 
-    <section class="projects-section">
-        <div class="container">
-            <div class="projects-grid">
-                <div class="project-card" data-category="games" data-project="blackjack(21)">
+
+    
+<section class="projects-section">
+    <div class="container">
+        <div class="projects-grid">
+            <div class="project-card" data-category="games" data-project="blackjack(21)">
 <div class="card-icon">🃏</div>
 <h3>BlackJack21</h3>
 <p>Beat the dealer!</p>
diff --git a/web-app/js/main.js b/web-app/js/main.js
index 13090d3..b9a4ec5 100644
--- a/web-app/js/main.js
+++ b/web-app/js/main.js
@@ -105,8 +105,8 @@ document.addEventListener('DOMContentLoaded', function () {
         syncThemeColor(savedTheme);
         themeToggle.innerHTML =
             savedTheme === 'light'
-                ? '<i class="fas fa-sun" aria-hidden="true"></i>'
-                : '<i class="fas fa-moon" aria-hidden="true"></i>';
+                ? '<img src="assets/sun.svg" alt="" aria-hidden="true" class="theme-icon">'
+                : '<img src="assets/moon.svg" alt="" aria-hidden="true" class="theme-icon">';
         updateThemeToggleAria(savedTheme === 'light');
 
         themeToggle.addEventListener('click', function () {
@@ -119,8 +119,8 @@ document.addEventListener('DOMContentLoaded', function () {
 
             themeToggle.innerHTML =
                 newTheme === 'light'
-                    ? '<i class="fas fa-sun" aria-hidden="true"></i>'
-                    : '<i class="fas fa-moon" aria-hidden="true"></i>';
+                    ? '<img src="assets/sun.svg" alt="" aria-hidden="true" class="theme-icon">'
+                    : '<img src="assets/moon.svg" alt="" aria-hidden="true" class="theme-icon">';
             updateThemeToggleAria(newTheme === 'light');
         });
     }