diff --git a/index.html b/index.html
index b438f79..d911608 100644
--- a/index.html
+++ b/index.html
@@ -4,16 +4,30 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="LearnSphere provides a world-class education to everyone, anywhere. Join our platform for high quality educational resources.">
+    <meta name="description" content="LearnSphere – An AI-powered educational platform providing world-class education to everyone, anywhere.">
     <title>LearnSphere - Quality Education</title>
     <link rel="stylesheet" href="styles.css">
 </head>
 
 <body>
 
-    <header class="navbar">
-        <div class="logo">LearnSphere</div>
-        <nav>
+    <header class="navbar" role="banner">
+        <div class="logo"><a href="index.html" aria-label="LearnSphere Home">LearnSphere</a></div>
+
+        <!-- Hamburger button — visible only on mobile -->
+        <button
+            class="hamburger"
+            id="hamburgerBtn"
+            aria-label="Toggle navigation menu"
+            aria-expanded="false"
+            aria-controls="navMenu"
+        >
+            <span></span>
+            <span></span>
+            <span></span>
+        </button>
+
+        <nav id="navMenu" role="navigation" aria-label="Main navigation">
             <ul>
                 <li><a href="explore.html">Explore</a></li>
                 <li><a href="courses.html">Courses</a></li>
@@ -21,29 +35,62 @@
                 <li><a href="community.html">Community</a></li>
             </ul>
         </nav>
+
         <div class="buttons">
             <button class="login"><a href="log/login.html">Log in</a></button>
             <button class="signup"><a href="log/register.html">Sign up</a></button>
         </div>
     </header>
 
-    <section class="hero">
-        <div class="hero-content">
-            <h1>For every student, every classroom.</h1>
-            <h2>Real results.</h2>
-            <p>We aim to provide a world-class education to everyone, anywhere.</p>
-            <div class="cta-buttons">
-                <button class="cta"><a href="learner.html">Learners</a></button>
-                <button class="cta"><a href="teachers.html">Teachers</a></button>
-                <button class="cta"><a href="parents.html">Parents</a></button>
+    <main>
+        <section class="hero" aria-label="Welcome section">
+            <div class="hero-content">
+                <h1>For every student, every classroom.</h1>
+                <h2>Real results.</h2>
+                <p>We aim to provide a world-class education to everyone, anywhere.</p>
+                <div class="cta-buttons" role="group" aria-label="User type selection">
+                    <button class="cta"><a href="learner.html">Learners</a></button>
+                    <button class="cta"><a href="teachers.html">Teachers</a></button>
+                    <button class="cta"><a href="parents.html">Parents</a></button>
+                </div>
             </div>
-        </div>
-        <div class="hero-image">
-            <img src="student.png" alt="Happy Student" loading="lazy">
-        </div>
-    </section>
+            <div class="hero-image">
+                <img src="student.png" alt="Happy student studying on LearnSphere" loading="lazy" width="400" height="400">
+            </div>
+        </section>
+    </main>
 
     <script src="script.js"></script>
+    <script>
+        // Hamburger menu toggle
+        const hamburgerBtn = document.getElementById("hamburgerBtn");
+        const navMenu = document.getElementById("navMenu");
+
+        hamburgerBtn.addEventListener("click", () => {
+            const isOpen = navMenu.classList.toggle("is-open");
+            hamburgerBtn.classList.toggle("is-open", isOpen);
+            hamburgerBtn.setAttribute("aria-expanded", isOpen.toString());
+        });
+
+        // Close menu when a nav link is clicked (single-page anchor behaviour)
+        navMenu.querySelectorAll("a").forEach(link => {
+            link.addEventListener("click", () => {
+                navMenu.classList.remove("is-open");
+                hamburgerBtn.classList.remove("is-open");
+                hamburgerBtn.setAttribute("aria-expanded", "false");
+            });
+        });
+
+        // Close menu on Escape key
+        document.addEventListener("keydown", (e) => {
+            if (e.key === "Escape" && navMenu.classList.contains("is-open")) {
+                navMenu.classList.remove("is-open");
+                hamburgerBtn.classList.remove("is-open");
+                hamburgerBtn.setAttribute("aria-expanded", "false");
+                hamburgerBtn.focus();
+            }
+        });
+    </script>
 </body>
 
 </html>
diff --git a/styles.css b/styles.css
index bb42f68..61940a3 100644
--- a/styles.css
+++ b/styles.css
@@ -1,78 +1,3 @@
-/* ── CSS Custom Properties (Theme Tokens) ─────────────────────────────────── */
-:root {
-    --color-bg: linear-gradient(135deg, #0d0d0d, #1a1a2e);
-    --color-text: #ffffff;
-    --color-navbar: #002244;
-    --color-nav-shadow: rgba(0, 255, 255, 0.3);
-    --color-accent: cyan;
-    --color-link: white;
-    --color-btn: #007bff;
-    --color-btn-hover: #0056b3;
-    --color-hero-h2: #00d9ff;
-}
-
-/* Light mode overrides — applied when data-theme="light" on <html> */
-[data-theme="light"] {
-    --color-bg: linear-gradient(135deg, #f0f4ff, #e8f0fe);
-    --color-text: #1a1a2e;
-    --color-navbar: #1a3a6e;
-    --color-nav-shadow: rgba(0, 100, 200, 0.2);
-    --color-accent: #0056b3;
-    --color-link: #ffffff;
-    --color-btn: #0056b3;
-    --color-btn-hover: #003a8c;
-    --color-hero-h2: #0056b3;
-}
-
-[data-theme="light"] body {
-    background: var(--color-bg);
-    color: var(--color-text);
-}
-
-[data-theme="light"] .navbar {
-    background: var(--color-navbar);
-}
-
-[data-theme="light"] .logo {
-    color: var(--color-accent);
-}
-
-[data-theme="light"] .navbar ul li a {
-    color: var(--color-link);
-}
-
-[data-theme="light"] .hero h2 {
-    color: var(--color-hero-h2);
-}
-
-/* ── Theme Toggle Button ──────────────────────────────────────────────────── */
-#themeToggleBtn {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    background: var(--color-btn);
-    color: white;
-    border: none;
-    padding: 10px 16px;
-    border-radius: 24px;
-    cursor: pointer;
-    font-size: 0.9rem;
-    font-weight: bold;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
-    transition: background 0.3s ease, transform 0.2s ease;
-    z-index: 999;
-}
-
-#themeToggleBtn:hover {
-    background: var(--color-btn-hover);
-    transform: scale(1.05);
-}
-
-#themeToggleBtn:focus-visible {
-    outline: 3px solid cyan;
-    outline-offset: 3px;
-}
-
 * {
     box-sizing: border-box;
 }
@@ -87,8 +12,7 @@ body {
     min-height: 100vh;
 }
 
-
-/* Navbar */
+/* ─── Navbar ──────────────────────────────────────────────────────────────── */
 .navbar {
     display: flex;
     justify-content: space-between;
@@ -96,12 +20,21 @@ body {
     background: #002244;
     padding: 15px 20px;
     box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
+    position: relative;
+    z-index: 100;
 }
 
 .logo {
     font-size: 1.8rem;
     font-weight: bold;
     color: cyan;
+    flex-shrink: 0;
+}
+
+.logo a {
+    text-decoration: none;
+    color: inherit;
+    font-weight: bold;
 }
 
 .navbar ul {
@@ -119,11 +52,21 @@ body {
     text-decoration: none;
     color: white;
     font-size: 1.2rem;
-    transition: 0.3s;
+    transition: color 0.3s;
 }
 
-.navbar ul li a:hover {
+.navbar ul li a:hover,
+.navbar ul li a:focus {
     color: cyan;
+    outline: 2px solid cyan;
+    outline-offset: 2px;
+    border-radius: 2px;
+}
+
+.buttons {
+    display: flex;
+    gap: 8px;
+    flex-shrink: 0;
 }
 
 .buttons button {
@@ -134,7 +77,7 @@ body {
     border-radius: 5px;
     cursor: pointer;
     font-size: 1rem;
-    transition: 0.3s;
+    transition: background 0.3s;
 }
 
 .buttons button a {
@@ -146,7 +89,43 @@ body {
     background: #0056b3;
 }
 
-/* Hero Section */
+/* ─── Hamburger Menu Button ───────────────────────────────────────────────── */
+.hamburger {
+    display: none;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 28px;
+    height: 20px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    z-index: 200;
+}
+
+.hamburger span {
+    display: block;
+    height: 3px;
+    width: 100%;
+    background: #ffffff;
+    border-radius: 3px;
+    transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+/* Animate hamburger to X when open */
+.hamburger.is-open span:nth-child(1) {
+    transform: translateY(8px) rotate(45deg);
+}
+
+.hamburger.is-open span:nth-child(2) {
+    opacity: 0;
+}
+
+.hamburger.is-open span:nth-child(3) {
+    transform: translateY(-9px) rotate(-45deg);
+}
+
+/* ─── Hero Section ────────────────────────────────────────────────────────── */
 .hero {
     display: flex;
     justify-content: center;
@@ -187,35 +166,74 @@ body {
     font-size: 1rem;
     cursor: pointer;
     border: none;
-    transition: 0.3s;
+    transition: background 0.3s;
 }
 
 .cta:hover {
     background: #0056b3;
 }
 
-.logo a {
-    text-decoration: none; 
-    color: inherit; 
-    font-weight: bold; 
-}
-
 .cta a {
-    text-decoration: none; 
-    color: inherit; 
-    font-weight: bold; 
+    text-decoration: none;
+    color: inherit;
+    font-weight: bold;
 }
 
 .hero-image img {
     width: 400px;
     max-width: 100%;
     border-radius: 10px;
-    /* box-shadow: 0 0 15px rgba(0, 255, 255, 0.3); */
     filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.3));
 }
 
-/* Responsive Design */
+/* ─── Responsive — Mobile ─────────────────────────────────────────────────── */
 @media (max-width: 768px) {
+    /* Show hamburger button */
+    .hamburger {
+        display: flex;
+    }
+
+    /* Nav slides in from the top when open */
+    .navbar nav {
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        background: #002244;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+        padding: 12px 0;
+        z-index: 99;
+    }
+
+    .navbar nav.is-open {
+        display: block;
+    }
+
+    .navbar ul {
+        flex-direction: column;
+        align-items: center;
+        gap: 0;
+    }
+
+    .navbar ul li {
+        margin: 0;
+        width: 100%;
+    }
+
+    .navbar ul li a {
+        display: block;
+        padding: 12px 20px;
+        text-align: center;
+        font-size: 1.1rem;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    }
+
+    /* Hide auth buttons on very small screens to save space */
+    .buttons {
+        display: none;
+    }
+
     .hero {
         flex-direction: column;
         text-align: center;
@@ -226,7 +244,8 @@ body {
     }
 }
 
+/* ─── Animations ──────────────────────────────────────────────────────────── */
 @keyframes fadeIn {
     from { opacity: 0; transform: translateY(-20px); }
-    to { opacity: 1; transform: translateY(0); }
+    to   { opacity: 1; transform: translateY(0); }
 }
