diff --git a/index.html b/index.html
index 5597d4e8..b3880cad 100644
--- a/index.html
+++ b/index.html
@@ -471,7 +471,6 @@ <h3 class="secHeader"><span>About</span> CodeClip</h3>
         </div>
       </div>
     </section>
-    <!-- ================================ About Section End Here ================================ -->
 
     <!-- ================================ Footer Section Start Here ================================ -->
     <footer id="contactFooter">
diff --git a/pages/about.html b/pages/about.html
index 5476a1da..dd793952 100644
--- a/pages/about.html
+++ b/pages/about.html
@@ -15,7 +15,7 @@
 
     <!-- Styles -->
     <!-- If you want to keep all challenge styles in one file, use: -->
-    <link rel="stylesheet" href="../styles.css">
+    <link rel="stylesheet" href="/CodeClip/styles/about.css">
     <!-- Or, if you want to scope styles to just challenges, use: -->
     <!-- <link rel="stylesheet" href="../styles/challenges.css" /> -->
 </head>
@@ -28,11 +28,12 @@
       </div>
       <nav class="header__nav" id="navMenu">
         <ul class="nav__list">
-          <li><a href="/" data-route="/" class="nav__link">Home</a></li>
-          <li><a href="challenges.html" data-route="/challenges" class="nav__link active">Challenges</a></li>
-          <li><a href="editor.html" data-route="/editor" class="nav__link">Editor</a></li>
-          <li><a href="profile.html" data-route="/profile" class="nav__link">Profile</a></li>
-          <li><a href="about.html" class="nav__link">About</a></li>
+          <li><a href="index.html" data-route="/" class="nav__link">Home</a></li>
+<li><a href="challenges.html" data-route="/challenges" class="nav__link active">Challenges</a></li>
+<li><a href="editor.html" data-route="/editor" class="nav__link">Editor</a></li>
+<li><a href="profile.html" data-route="/profile" class="nav__link">Profile</a></li>
+<li><a href="about.html" class="nav__link">About</a></li>
+
         </ul>
       </nav>
       <button class="header__toggle" id="navToggle" aria-label="Open navigation menu">
@@ -78,9 +79,10 @@ <h4>CodeClip</h4>
         <div class="footer__section">
           <h4>Quick Links</h4>
           <ul>
-            <li><a href="/" data-route="/">Home</a></li>
-            <li><a href="challenges.html" data-route="/challenges">Challenges</a></li>
-            <li><a href="editor.html" data-route="/editor">Editor</a></li>
+            <li><a href="index.html" data-route="/">Home</a></li>
+<li><a href="challenges.html" data-route="/challenges">Challenges</a></li>
+<li><a href="editor.html" data-route="/editor">Editor</a></li>
+
           </ul>
         </div>
         <div class="footer__section">
@@ -105,10 +107,9 @@ <h4>Community</h4>
   </button>
 
   <!-- Scripts -->
-  <script type="module" src="../scripts/app.js"></script>
-  <script type="module" src="../scripts/theme.js"></script>
-  <script src="../scripts/challenges.js"></script>
-  
+ <script type="module" src="app.js"></script>
+<script type="module" src="theme.js"></script>
+<script src="challenges.js"></script>
   <style>
     /* Additional styles for challenges page */
     .challenges-hero {
diff --git a/pages/challenges.html b/pages/challenges.html
index b2ebbca5..025fedeb 100644
--- a/pages/challenges.html
+++ b/pages/challenges.html
@@ -1,42 +1,41 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Challenges - CodeClip</title>
-    
-    <!-- Google Fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <!-- Merge both font options for flexibility -->
-    <link href="https://fonts.googleapis.com/css2?family=Bitcount:wght@100..900&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Bitcount:wght@100..900&family=Oooh+Baby&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Challenges - CodeClip</title>
 
-    <!-- Styles -->
-    <!-- If you want to keep all challenge styles in one file, use: -->
-    <link rel="stylesheet" href="../styles.css">
-    <!-- Or, if you want to scope styles to just challenges, use: -->
-    <!-- <link rel="stylesheet" href="../styles/challenges.css" /> -->
+  <!-- Google Fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Bitcount:wght@100..900&family=Oooh+Baby&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+
+  <!-- Link your separate CSS file here -->
+  <link rel="stylesheet" href="/CodeClip/styles/challenges.css" />
 </head>
 <body>
-  <!-- Header Component -->
-  <header class="header">
+
+  <!-- Header -->
+  <header class="header" role="banner">
     <div class="container header__container">
       <div class="header__logo">
         <span class="logo-text">CodeClip</span>
       </div>
-      <nav class="header__nav" id="navMenu">
+      <nav class="header__nav" id="navMenu" aria-label="Primary navigation">
         <ul class="nav__list">
-
-          <li><a href="/" data-route="/" class="nav__link" aria-label="Main navigation">Home</a></li>
-          <li><a href="/challenges" data-route="/challenges" class="nav__link active" aria-label="Challenges">Challenges</a></li>
-          <li><a href="/editor" data-route="/editor" class="nav__link" aria-label="Editor">Editor</a></li>
-          <li><a href="/profile" data-route="/profile" class="nav__link" aria-label="Profile">Profile</a></li>
-
+          <li><a href="/CodeClip" class="nav__link" aria-label="Home">Home</a></li>
+          <li><a href="/challenges" class="nav__link active" aria-current="page" aria-label="Challenges">Challenges</a></li>
+          <li><a href="/CodeClip/pages/editor.html" class="nav__link" aria-label="Editor">Editor</a></li>
+          <li><a href="/CodeClip/pages/profile.html" class="nav__link" aria-label="Profile">Profile</a></li>
         </ul>
       </nav>
-      <button class="header__toggle" id="navToggle" aria-label="Open navigation menu">
+      <button
+        class="header__toggle"
+        id="navToggle"
+        aria-label="Toggle navigation menu"
+        aria-expanded="false"
+        aria-controls="navMenu"
+      >
         <span class="hamburger"></span>
         <span class="hamburger"></span>
         <span class="hamburger"></span>
@@ -46,7 +45,7 @@
 
   <!-- Main Content -->
   <main>
-    <!-- Challenges Hero Section -->
+    <!-- Hero Section -->
     <section class="challenges-hero">
       <div class="container">
         <div class="challenges-hero__content">
@@ -60,49 +59,59 @@ <h1 class="challenges-hero__title">
       </div>
     </section>
 
-    <!-- Controls (merged from both versions) -->
-    <section class="challenges-filter">
-      <div class="container">
-        <div class="filter-controls">
-          <div class="filter-group">
-            <label for="difficulty-filter">Difficulty:</label>
-            <select id="difficulty-filter" class="filter-select">
-              <option value="">All Levels</option>
-              <option value="easy">Easy</option>
-              <option value="medium">Medium</option>
-              <option value="hard">Hard</option>
-            </select>
-          </div>
-          <div class="filter-group">
-            <label for="category-filter">Category:</label>
-            <select id="category-filter" class="filter-select">
-              <option value="">All Categories</option>
-              <option value="arrays">Arrays</option>
-              <option value="strings">Strings</option>
-              <option value="algorithms">Algorithms</option>
-              <option value="data-structures">Data Structures</option>
-              <option value="frontend">Frontend</option>
-              <option value="backend">Backend</option>
-              <option value="fullstack">Fullstack</option>
-            </select>
-          </div>
-          <div class="search-group">
-            <input type="text" id="search-challenges" placeholder="Search challenges..." class="search-input">
-          </div>
+    <!-- Filter Controls -->
+    <section class="challenges-filter" aria-labelledby="filters-heading">
+      <div class="container filter-controls">
+        <h2 id="filters-heading" class="visually-hidden">Filter Challenges</h2>
+
+        <div class="filter-group">
+          <label for="difficulty-filter">Difficulty:</label>
+          <select id="difficulty-filter" class="filter-select" aria-label="Filter challenges by difficulty">
+            <option value="">All Levels</option>
+            <option value="easy">Easy</option>
+            <option value="medium">Medium</option>
+            <option value="hard">Hard</option>
+          </select>
+        </div>
+
+        <div class="filter-group">
+          <label for="category-filter">Category:</label>
+          <select id="category-filter" class="filter-select" aria-label="Filter challenges by category">
+            <option value="">All Categories</option>
+            <option value="arrays">Arrays</option>
+            <option value="strings">Strings</option>
+            <option value="algorithms">Algorithms</option>
+            <option value="data-structures">Data Structures</option>
+            <option value="frontend">Frontend</option>
+            <option value="backend">Backend</option>
+            <option value="fullstack">Fullstack</option>
+          </select>
+        </div>
+
+        <div class="search-group" style="margin-left:auto;">
+          <input
+            type="search"
+            id="search-challenges"
+            class="search-input"
+            placeholder="Search challenges..."
+            aria-label="Search coding challenges by title or tag"
+          />
         </div>
       </div>
     </section>
 
     <!-- Challenges Grid -->
-    <section class="challenges-grid">
+    <section class="challenges-grid" aria-labelledby="challenge-heading">
       <div class="container">
+        <h2 id="challenge-heading" class="visually-hidden">Available Coding Challenges</h2>
+
         <div class="challenges-list" id="challengesList">
-          <!-- Challenge cards can be rendered here dynamically via JS -->
-          <div class="challenge-card" data-difficulty="easy" data-category="arrays">
-            <div class="challenge-card__header">
+          <!-- Sample challenges -->
+          <article class="challenge-card" data-difficulty="easy" data-category="arrays" tabindex="0" aria-label="Challenge Two Sum, difficulty easy, category arrays">
+            <header class="challenge-card__header">
               <h3 class="challenge-card__title">Two Sum</h3>
               <span class="difficulty-badge difficulty-easy">Easy</span>
-            </div>
+            </header>
             <p class="challenge-card__description">
               Given an array of integers and a target sum, return indices of two numbers that add up to the target.
             </p>
@@ -111,15 +120,15 @@ <h3 class="challenge-card__title">Two Sum</h3>
               <span class="category-tag">Hash Table</span>
             </div>
             <div class="challenge-card__actions">
-              <a href="editor.html" data-route="/editor" class="btn btn-primary btn-sm">Solve Challenge</a>
+              <a href="editor.html" class="btn btn-primary btn-sm" aria-label="Solve challenge Two Sum">Solve Challenge</a>
             </div>
-          </div>
+          </article>
 
-          <div class="challenge-card" data-difficulty="medium" data-category="strings">
-            <div class="challenge-card__header">
+          <article class="challenge-card" data-difficulty="medium" data-category="strings" tabindex="0" aria-label="Challenge Longest Palindromic Substring, difficulty medium, category strings">
+            <header class="challenge-card__header">
               <h3 class="challenge-card__title">Longest Palindromic Substring</h3>
               <span class="difficulty-badge difficulty-medium">Medium</span>
-            </div>
+            </header>
             <p class="challenge-card__description">
               Given a string, find the longest palindromic substring within it.
             </p>
@@ -128,15 +137,15 @@ <h3 class="challenge-card__title">Longest Palindromic Substring</h3>
               <span class="category-tag">Dynamic Programming</span>
             </div>
             <div class="challenge-card__actions">
-              <a href="editor.html" data-route="/editor" class="btn btn-primary btn-sm">Solve Challenge</a>
+              <a href="editor.html" class="btn btn-primary btn-sm" aria-label="Solve challenge Longest Palindromic Substring">Solve Challenge</a>
             </div>
-          </div>
+          </article>
 
-          <div class="challenge-card" data-difficulty="hard" data-category="algorithms">
-            <div class="challenge-card__header">
+          <article class="challenge-card" data-difficulty="hard" data-category="algorithms" tabindex="0" aria-label="Challenge Merge K Sorted Lists, difficulty hard, category algorithms">
+            <header class="challenge-card__header">
               <h3 class="challenge-card__title">Merge K Sorted Lists</h3>
               <span class="difficulty-badge difficulty-hard">Hard</span>
-            </div>
+            </header>
             <p class="challenge-card__description">
               Merge k sorted linked lists and return it as one sorted list.
             </p>
@@ -145,15 +154,15 @@ <h3 class="challenge-card__title">Merge K Sorted Lists</h3>
               <span class="category-tag">Divide and Conquer</span>
             </div>
             <div class="challenge-card__actions">
-              <a href="editor.html" data-route="/editor" class="btn btn-primary btn-sm">Solve Challenge</a>
+              <a href="editor.html" class="btn btn-primary btn-sm" aria-label="Solve challenge Merge K Sorted Lists">Solve Challenge</a>
             </div>
-          </div>
+          </article>
 
-          <div class="challenge-card" data-difficulty="easy" data-category="data-structures">
-            <div class="challenge-card__header">
+          <article class="challenge-card" data-difficulty="easy" data-category="data-structures" tabindex="0" aria-label="Challenge Valid Parentheses, difficulty easy, category data structures">
+            <header class="challenge-card__header">
               <h3 class="challenge-card__title">Valid Parentheses</h3>
               <span class="difficulty-badge difficulty-easy">Easy</span>
-            </div>
+            </header>
             <p class="challenge-card__description">
               Determine if the input string has valid parentheses.
             </p>
@@ -162,11 +171,12 @@ <h3 class="challenge-card__title">Valid Parentheses</h3>
               <span class="category-tag">Strings</span>
             </div>
             <div class="challenge-card__actions">
-              <a href="editor.html" data-route="/editor" class="btn btn-primary btn-sm">Solve Challenge</a>
+              <a href="editor.html" class="btn btn-primary btn-sm" aria-label="Solve challenge Valid Parentheses">Solve Challenge</a>
             </div>
-          </div>
+          </article>
         </div>
-        <div id="no-results" class="no-results-message" style="display: none;">
+
+        <div id="no-results" class="no-results-message" style="display:none;">
           <h2>🤔 No challenges found...</h2>
           <p>Try adjusting your search or filter criteria.</p>
         </div>
@@ -175,29 +185,31 @@ <h2>🤔 No challenges found...</h2>
   </main>
 
   <!-- Footer -->
-  <footer class="footer">
+  <footer class="footer" role="contentinfo">
     <div class="container">
       <div class="footer__content">
-        <div class="footer__section">
+        <section class="footer__section">
           <h4>CodeClip</h4>
           <p>Master coding challenges in your browser</p>
-        </div>
-        <div class="footer__section">
+        </section>
+
+        <section class="footer__section">
           <h4>Quick Links</h4>
           <ul>
-            <li><a href="/" data-route="/">Home</a></li>
-            <li><a href="challenges.html" data-route="/challenges">Challenges</a></li>
-            <li><a href="editor.html" data-route="/editor">Editor</a></li>
+            <li><a href="/">Home</a></li>
+            <li><a href="challenges.html">Challenges</a></li>
+            <li><a href="editor.html">Editor</a></li>
           </ul>
-        </div>
-        <div class="footer__section">
+        </section>
+
+        <section class="footer__section">
           <h4>Community</h4>
           <ul>
-            <li><a href="#">GitHub</a></li>
-            <li><a href="#">Discord</a></li>
-            <li><a href="#">Twitter</a></li>
+            <li><a href="#" aria-label="GitHub link">GitHub</a></li>
+            <li><a href="#" aria-label="Discord link">Discord</a></li>
+            <li><a href="#" aria-label="Twitter link">Twitter</a></li>
           </ul>
-        </div>
+        </section>
       </div>
       <div class="footer__bottom">
         <p>&copy; 2024 CodeClip. All rights reserved.</p>
@@ -205,204 +217,68 @@ <h4>Community</h4>
     </div>
   </footer>
 
-  <!-- Theme Toggle Button (from main branch version) -->
-  <button id="theme-toggle" title="Toggle theme" aria-label="Toggle light/dark theme">
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><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>
+  <!-- Theme Toggle Button -->
+  <button id="theme-toggle" title="Toggle theme" aria-label="Toggle light or dark theme">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="feather feather-sun"
+    >
+      <circle cx="12" cy="12" r="5" />
+      <line x1="12" y1="1" x2="12" y2="3" />
+      <line x1="12" y1="21" x2="12" y2="23" />
+      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+      <line x1="1" y1="12" x2="3" y2="12" />
+      <line x1="21" y1="12" x2="23" y2="12" />
+      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+    </svg>
   </button>
 
-  <!-- Scripts -->
-  <script type="module" src="../scripts/app.js"></script>
-  <script type="module" src="../scripts/theme.js"></script>
-  <script src="../scripts/challenges.js"></script>
-  
-  <style>
-    /* Additional styles for challenges page */
-    .challenges-hero {
-      background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
-      padding: 6rem 0 4rem;
-      text-align: center;
-    }
-
-    .challenges-hero__title {
-      font-size: 3.5rem;
-      font-weight: 700;
-      margin-bottom: 1.5rem;
-      color: white;
-    }
-
-    .challenges-hero__description {
-      font-size: 1.2rem;
-      color: rgba(255, 255, 255, 0.9);
-      max-width: 600px;
-      margin: 0 auto;
-    }
-
-    .challenges-filter {
-      background: var(--bg-secondary);
-      padding: 2rem 0;
-      border-bottom: 1px solid var(--border-color);
-    }
-
-    .filter-controls {
-      display: flex;
-      gap: 2rem;
-      align-items: center;
-      flex-wrap: wrap;
-    }
-
-    .filter-group {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
-
-    .filter-select, .search-input {
-      padding: 0.5rem 1rem;
-      border: 1px solid var(--border-color);
-      border-radius: 0.5rem;
-      background: white;
-      font-size: 0.9rem;
-    }
-
-    .search-group {
-      margin-left: auto;
-    }
-
-    .search-input {
-      width: 300px;
-    }
-
-    .challenges-grid {
-      padding: 3rem 0;
-    }
-
-    .challenges-list {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-      gap: 2rem;
-    }
-
-    .challenge-card {
-      background: white;
-      border-radius: 1rem;
-      padding: 1.5rem;
-      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-      transition: transform 0.2s ease, box-shadow 0.2s ease;
-    }
-
-    .challenge-card:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-    }
-
-    .challenge-card__header {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      margin-bottom: 1rem;
-    }
-
-    .challenge-card__title {
-      font-size: 1.25rem;
-      font-weight: 600;
-      color: var(--text-dark);
-      margin: 0;
-    }
-
-    .difficulty-badge {
-      padding: 0.25rem 0.75rem;
-      border-radius: 1rem;
-      font-size: 0.75rem;
-      font-weight: 600;
-      text-transform: uppercase;
-    }
-
-    .difficulty-easy {
-      background: #d4edda;
-      color: #155724;
-    }
-
-    .difficulty-medium {
-      background: #fff3cd;
-      color: #856404;
-    }
-
-    .difficulty-hard {
-      background: #f8d7da;
-      color: #721c24;
-    }
-
-    .challenge-card__description {
-      color: var(--text-muted);
-      margin-bottom: 1rem;
-      line-height: 1.5;
-    }
-
-    .challenge-card__meta {
-      display: flex;
-      gap: 0.5rem;
-      margin-bottom: 1.5rem;
-      flex-wrap: wrap;
-    }
-
-    .category-tag {
-      background: var(--bg-light);
-      color: var(--primary-color);
-      padding: 0.25rem 0.75rem;
-      border-radius: 1rem;
-      font-size: 0.75rem;
-      font-weight: 500;
-    }
-
-    .challenge-card__actions {
-      text-align: right;
-    }
-
-    .btn-sm {
-      padding: 0.5rem 1rem;
-      font-size: 0.875rem;
-    }
-
-    #theme-toggle {
-      position: fixed;
-      right: 2rem;
-      bottom: 2rem;
-      background: var(--bg-primary, #fff);
-      border: none;
-      border-radius: 50%;
-      padding: 0.75rem;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-      cursor: pointer;
-      z-index: 1000;
-      transition: background 0.2s;
-    }
-
-    #theme-toggle svg {
-      vertical-align: middle;
-    }
-
-    @media (max-width: 768px) {
-      .challenges-hero__title {
-        font-size: 2.5rem;
-      }
-
-      .filter-controls {
-        flex-direction: column;
-        align-items: stretch;
-      }
-
-      .search-group {
-        margin-left: 0;
+  <!-- JavaScript -->
+  <script>
+    // Mobile Navigation Toggle
+    const navToggle = document.getElementById('navToggle');
+    const navMenu = document.getElementById('navMenu');
+
+    navToggle.addEventListener('click', () => {
+      const isExpanded = navToggle.getAttribute('aria-expanded') === 'true';
+      navToggle.setAttribute('aria-expanded', !isExpanded);
+      navMenu.classList.toggle('open');
+    });
+
+    // Theme Toggle (simple example)
+    const themeToggle = document.getElementById('theme-toggle');
+    const rootElement = document.documentElement;
+
+    // Initialize theme based on prefers-color-scheme or localStorage
+    function initTheme() {
+      const savedTheme = localStorage.getItem('theme');
+      if (savedTheme) {
+        rootElement.setAttribute('data-theme', savedTheme);
+      } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        rootElement.setAttribute('data-theme', 'dark');
+      } else {
+        rootElement.setAttribute('data-theme', 'light');
       }
+    }
+    initTheme();
 
-      .search-input {
-        width: 100%;
-      }
+    themeToggle.addEventListener('click', () => {
+      const currentTheme = rootElement.getAttribute('data-theme');
+      const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+      rootElement.setAttribute('data-theme', newTheme);
+      localStorage.setItem('theme', newTheme);
+    });
+  </script>
 
-      .challenges-list {
-        grid-template-columns: 1fr;
-      }
-    }
-  </style>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/pages/editor.html b/pages/editor.html
index 08feb00c..64f38f5b 100644
--- a/pages/editor.html
+++ b/pages/editor.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
     <!-- Prism.js CSS for syntax highlighting -->
     <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
-
+    
     <style>
         /* Custom CSS Variables for the new theme */
         :root {
@@ -121,10 +121,10 @@
                 <div style="display: flex; align-items: center; gap: 2rem;">
                     <div style="font-size: 1.5rem; font-weight: 700; color: #4FC3F7;">CodeClip</div>
                     <nav style="display: flex; gap: 1.5rem;">
-                        <a href="/" data-route="/" style="color: #f8f9fa; text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.5rem; transition: background 0.2s;">Home</a>
-                        <a href="challenges.html" data-route="/challenges" style="color: #f8f9fa; text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.5rem; transition: background 0.2s;">Challenges</a>
-                        <a href="editor.html" data-route="/editor" style="color: #4FC3F7; text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.5rem; background: rgba(79, 195, 247, 0.1);">Editor</a>
-                        <a href="profile.html" data-route="/profile" style="color: #f8f9fa; text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.5rem; transition: background 0.2s;">Profile</a>
+                        <a href="/CodeClip"  style="color: #f8f9fa; text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.5rem; transition: background 0.2s;">Home</a>
+                        <a href="/CodeClip/pages/challenges.html"  style="color: #f8f9fa; text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.5rem; transition: background 0.2s;">Challenges</a>
+                        <a href="/CodeClip/pages/editor.html"  style="color: #4FC3F7; text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.5rem; background: rgba(79, 195, 247, 0.1);">Editor</a>
+                        <a href="/CodeClip/pages/profile.html"  style="color: #f8f9fa; text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.5rem; transition: background 0.2s;">Profile</a>
                     </nav>
                 </div>
                 <div>
diff --git a/pages/profile.html b/pages/profile.html
index 92c71d57..06065553 100644
--- a/pages/profile.html
+++ b/pages/profile.html
@@ -12,8 +12,8 @@
     <link href="https://fonts.googleapis.com/css2?family=Bitcount:wght@100..900&family=Oooh+Baby&display=swap" rel="stylesheet">
     
     <!-- Styles -->
-    <link rel="stylesheet" href="../styles.css">
-    <link rel="stylesheet" href="/styles/profile.css">
+    <link rel="stylesheet" href="/CodeClip/styles.css">
+    <link rel="stylesheet" href="..\styles\profile.css">
 
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
@@ -27,10 +27,10 @@
       </div>
       <nav class="header__nav" id="navMenu">
         <ul class="nav__list">
-          <li><a href="/" data-route="/" class="nav__link">Home</a></li>
-          <li><a href="challenges.html" data-route="/challenges" class="nav__link">Challenges</a></li>
-          <li><a href="editor.html" data-route="/editor" class="nav__link">Editor</a></li>
-          <li><a href="profile.html" data-route="/profile" class="nav__link active">Profile</a></li>
+          <li><a href="/CodeClip/index.html"   class="nav__link">Home</a></li>
+          <li><a href="/CodeClip/pages/challenges.html"   class="nav__link">Challenges</a></li>
+          <li><a href="/CodeClip/pages/editor.html"   class="nav__link">Editor</a></li>
+          <li><a href="/CodeClip/pages/profile.html"   class="nav__link active">Profile</a></li>
         </ul>
       </nav>
       <button class="header__toggle" id="navToggle" aria-label="Open navigation menu">
diff --git a/styles.css b/styles.css
index 3f821f22..adf5c51f 100644
--- a/styles.css
+++ b/styles.css
@@ -46,13 +46,8 @@ body {
   background: #3b82f6;
 }
 
-[data-theme="dark"] .floating-element {
-  background: #3b82f6;
-}
-
 [data-theme="dark"] .hero__subtitle,
 [data-theme="dark"] .hero__description {
-  /* color: #cccccc;   Black is not enough contrast*/
   color: #f5f5f5;
 }
 
@@ -118,6 +113,8 @@ body {
   position: sticky;
   top: 0;
   z-index: 100;
+  margin-bottom: 80px;
+  border-radius: 10px;
 }
 
 .header__container {
@@ -142,6 +139,7 @@ body {
   display: flex;
   gap: 2.5rem;
   list-style: none;
+  transition: all 0.3s ease;
 }
 
 .nav__link {
@@ -243,10 +241,7 @@ body {
   left: 30%;
   animation-delay: 4s;
 }
-#theme-toggle:hover{
-  cursor: pointer;
 
-}
 @keyframes float {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(-20px); }
@@ -331,12 +326,12 @@ body {
   border-radius: 12px;
   padding: 1.5rem;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
-  transform: rotateY( 5deg);
+  transform: rotateY(5deg);
   transition: transform 0.3s ease-in-out;
 }
 
 .code-window:hover {
-  transform: rotateY(-5deg)  ;
+  transform: rotateY(-5deg);
 }
 
 .code-window__header {
@@ -369,64 +364,188 @@ body {
 .keyword { color: #2563eb; }
 .string { color: #16a34a; }
 
-/* Theme Toggle */
-.theme-toggle-container {
-  text-align: center;
-  padding: 2rem 0;
+/* Filter Section */
+.challenges-filter {
+  background: #fff;
+  padding: 1rem 0;
+  border-radius: 10px;
+  margin-top: 20px;
+  margin-bottom: 4rem;
+  margin-left:2rem;
+  margin-right: 2rem;
+  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
 }
 
-.theme-toggle-btn {
-  background: #64748b;
-  color: #fff;
-  border: none;
-  padding: 0.8rem 1.5rem;
-  border-radius: 8px;
-  cursor: pointer;
+.filter-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem 2rem;
+  align-items: center;
+  justify-content: center;
+}
+
+.filter-group {
+  display: flex;
+  flex-direction: column;
+  font-weight: 500;
+  font-size: 1rem;
+  color: #333;
+}
+
+.filter-group label {
+  margin-bottom: 0.3rem;
+}
+
+.filter-select {
+  padding: 0.4rem 0.8rem;
+  font-size: 1rem;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+  outline: none;
+  transition: border-color 0.3s ease;
+}
+
+.filter-select:focus {
+  border-color: #2563eb;
+}
+
+.search-group {
+  flex-grow: 1;
+  min-width: 200px;
+}
+
+.search-input {
+  width: 100%;
+  padding: 0.5rem 0.8rem;
+  font-size: 1rem;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+  outline: none;
+  transition: border-color 0.3s ease;
+}
+
+.search-input:focus {
+  border-color: #2563eb;
+}
+
+/* Challenges Grid */
+.challenges-grid {
+  margin-bottom: 3rem;
+}
+
+.challenges-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 2rem;
+}
+
+/* Challenge Card */
+.challenge-card {
+  background: #ffffff;
+  border-radius: 10px;
+  padding: 1.5rem;
+  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  transition: box-shadow 0.3s ease;
+}
+
+.challenge-card:focus-within,
+.challenge-card:hover {
+  box-shadow: 0 6px 25px rgba(37, 99, 235, 0.3);
+  outline: none;
+}
+
+.challenge-card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.challenge-card__title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #2563eb;
+}
+
+.difficulty-badge {
+  padding: 0.2rem 0.6rem;
+  border-radius: 20px;
+  font-size: 0.8rem;
   font-weight: 600;
-  transition: background 0.3s ease;
+  color: white;
+  text-transform: uppercase;
 }
 
-.theme-toggle-btn:hover {
-  background: #475569;
+.difficulty-easy {
+  background: #34d399; /* Green */
 }
 
+.difficulty-medium {
+  background: #fbbf24; /* Yellow */
+}
 
-/* Responsive Styles */
-@media (max-width: 1024px) {
-  .hero__content {
-    grid-template-columns: 1fr;
-    text-align: center;
-  }
-  .hero__cta {
-    justify-content: center;
-  }
-  .hero__visual {
-    margin: 0 auto;
+.difficulty-hard {
+  background: #ef4444; /* Red */
+}
+
+.challenge-card__description {
+  flex-grow: 1;
+  color: #64748b;
+  margin-bottom: 1rem;
+  font-size: 1rem;
+  line-height: 1.4;
+}
+
+.challenge-card__meta {
+  margin-bottom: 1rem;
+}
 
-/* Content Section - Fixed for proper centering */
+.category-tag {
+  display: inline-block;
+  background: #e0e7ff;
+  color: #3730a3;
+  padding: 0.25rem 0.6rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  margin-right: 0.5rem;
+  text-transform: capitalize;
+}
+
+.challenge-card__actions {
+  text-align: right;
+}
+
+.btn-sm {
+  padding: 0.4rem 0.8rem;
+  font-size: 0.875rem;
+  border-radius: 6px;
+}
+
+/* Content Section: Challenge Vault */
 .content {
   max-width: 1024px;
   width: 100%;
-  padding: 0 4%;
-  padding-top: 150px;
+  padding: 50px 4%;
   margin: 0 auto;
   display: flex;
   justify-content: center;
   align-items: center;
-  flex-wrap: wrap; /* Added to handle multiple cards better */
+  flex-wrap: wrap;
 }
 
-/* Card Styles */
 .card {
   width: 100%;
   max-width: 300px;
   min-width: 200px;
   height: 250px;
-  background-color: var(--background-color, #292929);
+  background-color: #fff;
   margin: 10px;
   border-radius: 10px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.24);
-  border: 2px solid rgba(7, 7, 7, 0.12);
+  border: 2px solid rgba(249, 15, 15, 0.12);
   font-size: 16px;
   transition: all 0.3s ease;
   position: relative;
@@ -435,6 +554,8 @@ body {
   align-items: center;
   flex-direction: column;
   cursor: pointer;
+  color: black;
+  text-align: center;
 }
 
 [data-theme="dark"] .card {
@@ -443,21 +564,107 @@ body {
 
 [data-theme="light"] .card {
   --background-color: #C9D9F6;
+  color: #212121;
 }
 
-[data-theme="light"] .title {
-  --color: #212121;
+.challenge-vault-section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 48px 0 24px 0;
 }
 
-[data-theme="light"] .text {
-  --color: #212121;
+.vault-card {
+  background: linear-gradient(135deg, #e0e7ff 0%, #f8fafc 100%);
+  border-radius: 18px;
+  box-shadow: 0 8px 32px rgba(37,99,235,0.07), 0 1.5px 7px rgba(37,99,235,0.09);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 2rem;
+  padding: 2rem 3rem;
+  max-width: 510px;
+  width: 100%;
+  margin: 0 auto;
+  transition: box-shadow 0.2s;
+  border: 1.5px solid #e0e7ff;
+}
+.vault-card:hover {
+  box-shadow: 0 12px 40px #2563eb35;
+}
+
+.vault-icon-circle {
+  flex-shrink: 0;
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: #2563eb12;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 34px;
+}
+
+.vault-card-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.vault-title {
+  margin: 0 0 6px 0;
+  font-size: 1.55rem;
+  color: #2563eb;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+}
+
+.vault-desc {
+  color: #334155;
+  margin-bottom: 1.15rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  max-width: 320px;
+}
+
+.vault-cta {
+  font-size: 1rem;
+  padding: 0.5rem 1.3rem;
+  border-radius: 7px;
+  background: #2563eb;
+  color: #fff;
+  font-weight: 500;
+  text-decoration: none;
+  box-shadow: none;
+  transition: background 0.18s;
+}
+.vault-cta:hover,
+.vault-cta:focus {
+  background: #1e40af;
+}
+
+/* Responsive tweaks */
+@media (max-width: 700px) {
+  .vault-card {
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1.5rem;
+    align-items: stretch;
+    text-align: center;
+  }
+  .vault-icon-circle {
+    margin: 0 auto 18px auto;
+  }
+  .vault-card-content {
+    align-items: center;
+  }
 }
 
 .icon {
   margin: 0 auto;
-  width: 100%;
+  width: 80px;
   height: 80px;
-  max-width:80px;
   background: linear-gradient(90deg, #93C5FD 0%, #3B82F6 40%, rgba(0, 0, 0, 0.28) 60%);
   border-radius: 100%;
   display: flex;
@@ -469,30 +676,26 @@ body {
   background-size: 200px;
 }
 
-.material-icons.md-36 { font-size: 36px; }
+.material-icons.md-36 {
+  font-size: 36px;
+}
 
 .card .title {
-  width: 100%;
-  margin: 0;
-  text-align: center;
   margin-top: 30px;
-  color: var(--color, #ffffff);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 3px;
+  font-size: 1rem;
 }
 
 .card .text {
   width: 80%;
-  margin: 0 auto;
+  margin: 20px auto 0;
   font-size: 13px;
-  text-align: center;
-  margin-top: 20px;
-  color: var(--color, #ffffff);
   font-weight: 200;
   letter-spacing: 2px;
   opacity: 0;
-  max-height:0;
+  max-height: 0;
   transition: all 0.3s ease;
 }
 
@@ -500,134 +703,91 @@ body {
   height: 270px;
 }
 
-.card:hover .info {
-  height: 90%;
-}
-
 .card:hover .text {
-  transition: all 0.3s ease;
   opacity: 1;
-  max-height:40px;
+  max-height: 40px;
 }
 
 .card:hover .icon {
   background-position: -120px;
-  transition: all 0.3s ease;
 }
 
 .card:hover .icon i {
   background: linear-gradient(90deg, #93C5FD, #3B82F6);
   -webkit-background-clip: text;
+  background-clip: text;
   -webkit-text-fill-color: transparent;
   opacity: 1;
-  transition: all 0.3s ease;
 }
 
-a {
-  text-decoration: none;
+/* Footer */
+.footer {
+  background: #ffffff;
+  padding: 2rem 0;
+  border-top: 1px solid #e2e8f0;
+  text-align: center;
+  color: #64748b;
 }
 
-/* Responsive Styles */
-@media (max-width: 1024px) {
-  .hero__content {
-    /*grid-template-columns: 1fr;*/
-    text-align: center;
-  }
-  .hero__cta {
-    justify-content: center;
-  }
-  .hero__visual {
-    margin: 0 auto;
-    max-width: 400px;
-  }
-
+.footer__content {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  gap: 2rem;
+  margin-bottom: 1rem;
+}
 
+.footer__section h4 {
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+  color: #2563eb;
 }
 
+.footer__section ul {
+  list-style: none;
+}
 
-@media screen and (max-width: 799px) {
-  /* Full centering for hero */
-  .hero {
-    padding: 2rem 0;
-    min-height: 100vh;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
+.footer__section a {
+  color: #64748b;
+  text-decoration: none;
+  font-size: 0.9rem;
+}
 
-  .hero .container {
-    width: 100%;
-    padding: 0 1rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
+.footer__section a:hover,
+.footer__section a:focus {
+  color: #2563eb;
+}
 
-  .hero__content {
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    width: 100%;
-    max-width: 600px;
-    margin: 0 auto;
-    display: flex;
-    gap: 2rem;
-  }
+.footer__bottom p {
+  font-size: 0.9rem;
+  color: #94a3b8;
+}
 
-  .hero__text {
-    width: 100%;
-    max-width: unset;
-    margin: 0 auto;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
+/* Responsive Styles */
 
-  .hero__subtitle,
-  .hero__title,
-  .hero__description {
+@media (max-width: 1024px) {
+  .hero__content {
+    grid-template-columns: 1fr;
     text-align: center;
-    width: 100%;
   }
-
   .hero__cta {
     justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 1rem;
   }
-
   .hero__visual {
     margin: 0 auto;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-
     max-width: 400px;
   }
-}
-
-
-  .content {
-    padding-top: 50px;
+  .filter-controls {
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
+    gap: 1rem;
+    align-items: stretch;
   }
-  
-  .card {
-    margin: 15px 0;
+  .nav__list {
+    gap: 1.2rem;
   }
-
-
+}
 
 @media (max-width: 768px) {
-  .header__container {
-    height: 60px;
-  }
   .nav__list {
     position: absolute;
     top: 60px;
@@ -640,6 +800,7 @@ a {
     visibility: hidden;
     opacity: 0;
     transition: visibility 0.3s, opacity 0.3s;
+    border-radius: 0 0 10px 10px;
   }
   [data-theme="dark"] .nav__list {
     background: #1a1a1a;
@@ -659,12 +820,9 @@ a {
   .hero__title {
     font-size: 2.5rem;
   }
-
-  
   .content {
     padding-top: 300px;
   }
-
 }
 
 @media (max-width: 480px) {
@@ -677,23 +835,27 @@ a {
   .hero__title {
     font-size: 2rem;
   }
-
-  
-  /* Ensure hero still uses full width on mobile and centers content */
   .hero .container {
     padding: 0 0.5rem;
     display: flex;
     justify-content: center;
     align-items: center;
   }
-  
   .hero__content {
     text-align: center;
     justify-items: center;
   }
 }
-#navid {
-  background-color: skyblue;
-}
-  }
+
+/* Utility: Visually Hidden for Accessibility */
+.visually-hidden {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important;
 }
diff --git a/styles/about.css b/styles/about.css
new file mode 100644
index 00000000..2f8be35e
--- /dev/null
+++ b/styles/about.css
@@ -0,0 +1,301 @@
+:root {
+  --primary-color: #4f46e5;
+  --secondary-color: #6366f1;
+  --bg-primary: #ffffff;
+  --bg-secondary: #f9fafb;
+  --bg-light: #f3f4f6;
+  --border-color: #e5e7eb;
+  --text-dark: #111827;
+  --text-muted: #6b7280;
+}
+
+body {
+  font-family: 'Inter', sans-serif;
+  margin: 0;
+  padding: 0;
+  background: var(--bg-primary);
+  color: var(--text-dark);
+}
+
+/* Header Styles */
+.header {
+  background: var(--bg-primary);
+  border-bottom: 1px solid var(--border-color);
+  padding: 1rem 0;
+}
+
+.header__container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.header__logo .logo-text {
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+.header__nav .nav__list {
+  display: flex;
+  gap: 1.5rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nav__link {
+  text-decoration: none;
+  color: var(--text-dark);
+  font-weight: 500;
+}
+
+.nav__link.active {
+  color: var(--primary-color);
+}
+
+.header__toggle {
+  display: none;
+}
+
+/* About Container */
+.about-container {
+  max-width: 800px;
+  margin: 4rem auto;
+  padding: 0 1rem;
+}
+
+/* Footer Styles */
+.footer {
+  background: var(--bg-secondary);
+  padding: 2rem 0;
+  border-top: 1px solid var(--border-color);
+}
+
+.footer__content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1rem;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.footer__section h4 {
+  margin-bottom: 1rem;
+  font-size: 1rem;
+}
+
+.footer__section ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.footer__section ul li {
+  margin-bottom: 0.5rem;
+}
+
+.footer__section ul li a {
+  text-decoration: none;
+  color: var(--text-muted);
+}
+
+.footer__bottom {
+  text-align: center;
+  margin-top: 2rem;
+  font-size: 0.875rem;
+  color: var(--text-muted);
+}
+
+/* Challenges Page Specific */
+.challenges-hero {
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+  padding: 6rem 0 4rem;
+  text-align: center;
+}
+
+.challenges-hero__title {
+  font-size: 3.5rem;
+  font-weight: 700;
+  margin-bottom: 1.5rem;
+  color: white;
+}
+
+.challenges-hero__description {
+  font-size: 1.2rem;
+  color: rgba(255, 255, 255, 0.9);
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.challenges-filter {
+  background: var(--bg-secondary);
+  padding: 2rem 0;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.filter-controls {
+  display: flex;
+  gap: 2rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.filter-group {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.filter-select, .search-input {
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: 0.5rem;
+  background: white;
+  font-size: 0.9rem;
+}
+
+.search-group {
+  margin-left: auto;
+}
+
+.search-input {
+  width: 300px;
+}
+
+.challenges-grid {
+  padding: 3rem 0;
+}
+
+.challenges-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  gap: 2rem;
+}
+
+.challenge-card {
+  background: white;
+  border-radius: 1rem;
+  padding: 1.5rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.challenge-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.challenge-card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+}
+
+.challenge-card__title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text-dark);
+  margin: 0;
+}
+
+.difficulty-badge {
+  padding: 0.25rem 0.75rem;
+  border-radius: 1rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.difficulty-easy {
+  background: #d4edda;
+  color: #155724;
+}
+
+.difficulty-medium {
+  background: #fff3cd;
+  color: #856404;
+}
+
+.difficulty-hard {
+  background: #f8d7da;
+  color: #721c24;
+}
+
+.challenge-card__description {
+  color: var(--text-muted);
+  margin-bottom: 1rem;
+  line-height: 1.5;
+}
+
+.challenge-card__meta {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.category-tag {
+  background: var(--bg-light);
+  color: var(--primary-color);
+  padding: 0.25rem 0.75rem;
+  border-radius: 1rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.challenge-card__actions {
+  text-align: right;
+}
+
+.btn-sm {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+}
+
+/* Theme Toggle Button */
+#theme-toggle {
+  position: fixed;
+  right: 2rem;
+  bottom: 2rem;
+  background: var(--bg-primary, #fff);
+  border: none;
+  border-radius: 50%;
+  padding: 0.75rem;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  cursor: pointer;
+  z-index: 1000;
+  transition: background 0.2s;
+}
+
+#theme-toggle svg {
+  vertical-align: middle;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .challenges-hero__title {
+    font-size: 2.5rem;
+  }
+
+  .filter-controls {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .search-group {
+    margin-left: 0;
+  }
+
+  .search-input {
+    width: 100%;
+  }
+
+  .challenges-list {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/styles/challenges.css b/styles/challenges.css
index 6e8eacab..d3718e91 100644
--- a/styles/challenges.css
+++ b/styles/challenges.css
@@ -1,4 +1,4 @@
-/* --- THEME & GLOBAL STYLES --- */
+/* === VARIABLES === */
 :root {
   --bg-color: #f4f7f9;
   --text-color: #1a202c;
@@ -7,13 +7,12 @@
   --input-bg: #ffffff;
   --accent-color: #3182ce;
   --accent-color-hover: #2b6cb0;
-  
+
   /* Badge Colors */
   --easy-bg: #d4edda;
   --easy-text: #155724;
   --medium-bg: #fff3cd;
-  /* --medium-text: #856404; very low contrast on light background */
-  --medium-text: #5a4501; /* darker brown for better contrast */
+  --medium-text: #5a4501;
   --hard-bg: #f8d7da;
   --hard-text: #721c24;
 }
@@ -27,7 +26,6 @@
   --accent-color: #63b3ed;
   --accent-color-hover: #90cdf4;
 
-  /* Badge Colors */
   --easy-bg: #1c4532;
   --easy-text: #68d391;
   --medium-bg: #4a3a19;
@@ -36,183 +34,478 @@
   --hard-text: #f56565;
 }
 
+/* === GLOBAL RESET & BASE === */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
 body {
   margin: 0;
-  padding: 0;
-  box-sizing: border-box;
   font-family: 'Inter', sans-serif;
   background-color: var(--bg-color);
   color: var(--text-color);
+  line-height: 1.5;
   transition: background-color 0.3s ease, color 0.3s ease;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
 
 .container {
   max-width: 1200px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 0 1.5rem 2rem;
+  width: 100%;
+}
+
+/* === HEADER === */
+.header {
+  background: var(--card-bg);
+  border-bottom: 1px solid var(--border-color);
+  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  padding-top: 20px;
+  flex-shrink: 0;
+}
+
+.header__container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 70px;
+}
+
+.header__logo .logo-text {
+  color: var(--accent-color);
+  font-size: 1.8rem;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+}
+
+.header__nav {
+  display: flex;
+}
+
+.nav__list {
+  list-style: none;
+  display: flex;
+  gap: 2rem;
+  margin: 0;
+  padding: 0;
+  transition: all 0.3s ease;
+}
+
+/* Mobile nav (hidden by default) */
+.nav__list.open {
+  display: flex !important;
+}
+
+.nav__link {
+  color: var(--text-color);
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 1rem;
+  position: relative;
+  padding: 0.25rem 0;
+  transition: color 0.3s ease;
+}
+
+.nav__link.active,
+.nav__link:hover,
+.nav__link:focus {
+  color: var(--accent-color);
+}
+
+.nav__link.active::after,
+.nav__link:hover::after,
+.nav__link:focus::after {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 2px;
+  background-color: var(--accent-color);
+  position: absolute;
+  bottom: -4px;
+  left: 0;
+  border-radius: 2px;
+}
+
+/* Hamburger toggle */
+.header__toggle {
+  display: none;
+  flex-direction: column;
+  gap: 6px;
+  width: 28px;
+  height: 22px;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.hamburger {
+  width: 100%;
+  height: 3px;
+  background-color: var(--text-color);
+  border-radius: 2px;
+  transition: background-color 0.3s;
 }
 
-.page-header {
+/* === HERO === */
+.challenges-hero {
+  background: linear-gradient(135deg, var(--accent-color), #94bbe9);
+  padding: 5rem 0 3rem;
   text-align: center;
-  margin-bottom: 2.5rem;
+  color: white;
 }
 
-.page-header h1 {
-  font-size: 2.5rem;
+.challenges-hero__title {
+  font-size: 3.5rem;
   font-weight: 700;
-  margin-bottom: 0.5rem;
+  margin-bottom: 1rem;
 }
 
-.page-header p {
-  font-size: 1.1rem;
-  /* color: #718096; Neutral color, works in both themes */
-  color: #4a5568; /* more readable */
+.challenges-hero__description {
+  font-size: 1.25rem;
+  max-width: 660px;
+  margin: 0 auto;
+  opacity: 0.9;
 }
 
+/* === FILTER CONTROLS === */
+.challenges-filter {
+  background-color: var(--card-bg);
+  padding: 1.5rem 0;
+  border-bottom: 1px solid var(--border-color);
+}
 
-/* --- CONTROLS (SEARCH & FILTER) --- */
-.controls {
+.filter-controls {
   display: flex;
-  gap: 1rem;
-  margin-bottom: 2rem;
   flex-wrap: wrap;
+  gap: 1.5rem 2rem;
+  justify-content: center;
+  align-items: center;
 }
 
-.controls input, .controls select {
-  flex-grow: 1;
-  padding: 0.75rem 1rem;
-  font-size: 1rem;
+.filter-group {
+  display: flex;
+  flex-direction: column;
+  min-width: 150px;
+}
+
+.filter-group label {
+  font-weight: 600;
+  margin-bottom: 0.3rem;
+  color: var(--text-color);
+}
+
+.filter-select,
+.search-input {
+  width: 100%;
+  padding: 0.5rem 1rem;
   border: 1px solid var(--border-color);
-  border-radius: 8px;
+  border-radius: 0.5rem;
   background-color: var(--input-bg);
   color: var(--text-color);
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  font-size: 1rem;
+  transition: border-color 0.3s ease;
 }
 
-.controls input:focus, .controls select:focus {
+.filter-select:focus,
+.search-input:focus {
   outline: none;
   border-color: var(--accent-color);
-  box-shadow: 0 0 0 3px var(--accent-color-hover-shadow, rgba(49, 130, 206, 0.3));
+  box-shadow: 0 0 6px var(--accent-color-hover);
 }
 
-.controls select {
-  min-width: 200px;
-  flex-grow: 0;
+/* === CHALLENGES GRID === */
+.challenges-grid {
+  padding: 3rem 0 5rem;
 }
 
-/* --- CHALLENGE GRID & CARDS --- */
-.challenge-grid {
+.challenges-list {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 1.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 2rem;
 }
 
-.card {
+.challenge-card {
   background-color: var(--card-bg);
-  border: 1px solid var(--border-color);
   border-radius: 12px;
   padding: 1.5rem;
+  border: 1px solid var(--border-color);
+  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
   display: flex;
   flex-direction: column;
-  gap: 1rem;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  transition: box-shadow 0.3s ease, transform 0.2s ease;
   cursor: pointer;
 }
 
-.card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+.challenge-card:hover,
+.challenge-card:focus-within {
+  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
+  transform: translateY(-3px);
+  outline: none;
 }
 
-.card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: 1rem;
+.challenge-card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 0.75rem;
 }
 
-.card h3 {
+.challenge-card__title {
   font-size: 1.25rem;
-  font-weight: 600;
+  font-weight: 700;
   margin: 0;
-  color: var(--text-color);
   flex-grow: 1;
+  color: var(--accent-color);
 }
 
-.badge {
+.difficulty-badge {
   padding: 0.25rem 0.75rem;
   border-radius: 9999px;
   font-size: 0.75rem;
-  font-weight: 600;
+  font-weight: 700;
   text-transform: uppercase;
   white-space: nowrap;
+  user-select: none;
+}
+
+.difficulty-easy {
+  background-color: var(--easy-bg);
+  color: var(--easy-text);
+}
+
+.difficulty-medium {
+  background-color: var(--medium-bg);
+  color: var(--medium-text);
+}
+
+.difficulty-hard {
+  background-color: var(--hard-bg);
+  color: var(--hard-text);
+}
+
+.challenge-card__description {
+  flex-grow: 1;
+  font-size: 1rem;
+  line-height: 1.4;
+  color: #555;
+  margin-bottom: 1rem;
 }
 
-.badge.easy { background-color: var(--easy-bg); color: var(--easy-text); }
-/* .badge.medium { background-color: var(--medium-bg); color: var(--medium-text); } */
-.badge.medium {
-  background-color: #ffe69b;
-  color: #5a4501;
+.challenge-card__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 1.25rem;
 }
-.badge.hard { background-color: var(--hard-bg); color: var(--hard-text); }
 
-.card-body {
-    flex-grow: 1;
+.category-tag {
+  background-color: var(--accent-color);
+  color: white;
+  padding: 0.2rem 0.6rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  text-transform: capitalize;
+  user-select: none;
+}
+
+.challenge-card__actions {
+  text-align: right;
 }
 
-.language {
+.btn {
+  border: none;
+  border-radius: 0.5rem;
+  padding: 0.55rem 1.1rem;
   font-size: 0.9rem;
-  /* color: #718096; Fail on white */
-  color: #4a5568; /* darker grey for better contrast */
+  font-weight: 700;
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-block;
+  transition: background-color 0.3s ease;
+  user-select: none;
 }
 
-.card-footer {
-    border-top: 1px solid var(--border-color);
-    padding-top: 1rem;
-    margin-top: 0.5rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+.btn-sm {
+  font-size: 0.85rem;
+  padding: 0.4rem 0.8rem;
 }
 
-.status {
+.btn-primary {
+  background-color: var(--accent-color);
+  color: white;
+}
+
+.btn-primary:hover,
+.btn-primary:focus {
+  background-color: var(--accent-color-hover);
+  outline: none;
+}
+
+/* No results message */
+.no-results-message {
+  text-align: center;
+  color: #718096;
+  padding: 3rem;
+  font-size: 1.25rem;
+}
+
+/* === FOOTER === */
+.footer {
+  background-color: var(--card-bg);
+  padding: 2rem 1.5rem;
+  border-top: 1px solid var(--border-color);
+  color: var(--text-color);
   font-size: 0.9rem;
+  flex-shrink: 0;
+}
+
+.footer__content {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  gap: 2rem;
+  margin-bottom: 1.5rem;
+}
+
+.footer__section h4 {
+  font-weight: 700;
+  margin-bottom: 0.8rem;
+  color: var(--accent-color);
+}
+
+.footer__section ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.footer__section a {
+  color: var(--text-color);
+  text-decoration: none;
   font-weight: 500;
+  transition: color 0.3s;
 }
-.status.complete { color: var(--easy-text); }
-.status.incomplete { color: var(--medium-text); }
 
+.footer__section a:hover,
+.footer__section a:focus {
+  color: var(--accent-color);
+  outline: none;
+}
 
-/* --- UTILITIES --- */
-.no-results-message {
-    text-align: center;
-    padding: 3rem;
-    color: #718096;
+.footer__bottom {
+  text-align: center;
+  color: #94a3b8;
+  font-size: 0.85rem;
 }
 
+/* === THEME TOGGLE BUTTON === */
 #theme-toggle {
   position: fixed;
-  bottom: 20px;
-  right: 20px;
-  background-color: var(--card-bg);
-  color: var(--text-color);
+  right: 1.5rem;
+  bottom: 1.5rem;
+  background: var(--card-bg);
   border: 1px solid var(--border-color);
   border-radius: 50%;
+  padding: 0.6rem;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  transition: background-color 0.3s ease;
+  z-index: 1001;
 }
 
+#theme-toggle svg {
+  display: block;
+  width: 24px;
+  height: 24px;
+  stroke: var(--text-color);
+}
 
-.copy-button:focus {
-  outline: 2px solid #00f;
-  outline-offset: 2px;
+/* === RESPONSIVE === */
+@media (max-width: 768px) {
+  .nav__list {
+    position: absolute;
+    top: 70px;
+    right: 0;
+    background-color: var(--card-bg);
+    width: 220px;
+    flex-direction: column;
+    padding: 1rem;
+    border-radius: 0 0 8px 8px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-10px);
+    transition: opacity 0.25s ease, visibility 0.25s, transform 0.25s ease;
+    z-index: 1000;
+    display: none; /* hide by default */
+  }
 
-/* Hamburger CSS */
-.hamburger {
-  display: block;
-  width: 25px;
-  height: 3px;
-  background: var(--text-color);
-  margin: 4px 0;
-  transition: 0.4s;
+  .nav__list.open {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+    display: flex; /* show when open */
+  }
+
+  .nav__link {
+    padding: 0.7rem 1rem;
+    font-size: 1rem;
+  }
+
+  .header__toggle {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    width: 28px;
+    height: 22px;
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+
+  .hamburger {
+    width: 100%;
+    height: 3px;
+    background-color: var(--text-color);
+    border-radius: 2px;
+    transition: background-color 0.3s;
+  }
+
+  .filter-controls {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .search-group {
+    margin-left: 0;
+    width: 100%;
+  }
+
+  .search-input {
+    width: 100%;
+  }
+
+  .challenges-list {
+    grid-template-columns: 1fr;
+  }
+
+  .challenges-hero__title {
+    font-size: 2.5rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .container {
+    padding: 0 1rem 2rem;
+  }
 
+  .challenges-hero__title {
+    font-size: 2rem;
+  }
 }
diff --git a/styles/themes.css b/styles/themes.css
index f2319d36..a76eceab 100644
--- a/styles/themes.css
+++ b/styles/themes.css
@@ -2,12 +2,14 @@
     --bg-color: #ffffff;
     --text-color: #000000;
     --header-bg: #f0f0f0;
+    --card-bg: #ffffff;
   }
   
   [data-theme="dark"] {
     --bg-color: #121212;
     --text-color: #f1f1f1;
     --header-bg: #1e1e1e;
+    --card-bg: #232323;
   } 
   
   body {
@@ -89,5 +91,6 @@
   }
 
 }
+}
 
   
\ No newline at end of file
