From a2f654e56e87a67142f6cf07c184b919f4cab45f Mon Sep 17 00:00:00 2001
From: Shreyansh Mojidra <your-github-email@example.com>
Date: Sat, 21 Feb 2026 21:04:20 +0000
Subject: [PATCH 1/4] fixed dark/light mode for user list

---
 web/templates/users_list.html | 44 +++++++++++++++++++----------------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/web/templates/users_list.html b/web/templates/users_list.html
index dbdac3dd1..431f00512 100644
--- a/web/templates/users_list.html
+++ b/web/templates/users_list.html
@@ -6,19 +6,19 @@
 {% block content %}
   <div class="container mx-auto px-4 py-8">
     <div class="flex justify-between items-center mb-8">
-      <h1 class="text-3xl font-bold text-gray-800">User List</h1>
+      <h1 class="text-3xl font-bold text-gray-800 dark:text-white">User List</h1>
     </div>
     {% if page_obj %}
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         {% for profile in page_obj %}
-          <div class="bg-white rounded-lg shadow-md overflow-hidden border border-gray-200 hover:shadow-lg transition-shadow duration-300"
+          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300"
                role="article"
                aria-labelledby="user-{{ profile.user.id }}">
             <div class="p-6">
               <div class="flex justify-between items-start">
                 <h3 id="user-{{ profile.user.id }}"
-                    class="text-xl font-semibold text-gray-800 mb-2">{{ profile.user.username }}</h3>
-                <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">
+                    class="text-xl font-semibold text-gray-800 dark:text-white mb-2">{{ profile.user.username }}</h3>
+                <span class="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs font-medium px-2.5 py-0.5 rounded">
                   {% if profile.is_teacher %}
                     Teacher
                   {% else %}
@@ -26,29 +26,31 @@ <h1 class="text-3xl font-bold text-gray-800">User List</h1>
                   {% endif %}
                 </span>
               </div>
-              <p class="text-gray-600 mb-4">Joined: {{ profile.user.date_joined|date:"F d, Y" }}</p>
+              <p class="text-gray-600 dark:text-gray-300 mb-4">Joined: {{ profile.user.date_joined|date:"F d, Y" }}</p>
               {% if profile.is_teacher %}
                 <div class="mt-2 space-y-1">
-                  <p class="text-sm text-gray-600">Courses: {{ profile.total_courses }}</p>
-                  <p class="text-sm text-gray-600">Students: {{ profile.total_students }}</p>
-                  {% if profile.avg_rating > 0 %}<p class="text-sm text-gray-600">Rating: {{ profile.avg_rating }}/5</p>{% endif %}
+                  <p class="text-sm text-gray-600 dark:text-gray-300">Courses: {{ profile.total_courses }}</p>
+                  <p class="text-sm text-gray-600 dark:text-gray-300">Students: {{ profile.total_students }}</p>
+                  {% if profile.avg_rating > 0 %}
+                    <p class="text-sm text-gray-600 dark:text-gray-300">Rating: {{ profile.avg_rating }}/5</p>
+                  {% endif %}
                 </div>
               {% else %}
                 <div class="mt-2 space-y-1">
-                  <p class="text-sm text-gray-600">Enrolled: {{ profile.total_courses }}</p>
-                  <p class="text-sm text-gray-600">Completed: {{ profile.total_completed }}</p>
-                  <p class="text-sm text-gray-600">Avg. Progress: {{ profile.avg_progress }}%</p>
-                  <p class="text-sm text-gray-600">Achievements: {{ profile.achievements_count }}</p>
+                  <p class="text-sm text-gray-600 dark:text-gray-300">Enrolled: {{ profile.total_courses }}</p>
+                  <p class="text-sm text-gray-600 dark:text-gray-300">Completed: {{ profile.total_completed }}</p>
+                  <p class="text-sm text-gray-600 dark:text-gray-300">Avg. Progress: {{ profile.avg_progress }}%</p>
+                  <p class="text-sm text-gray-600 dark:text-gray-300">Achievements: {{ profile.achievements_count }}</p>
                 </div>
               {% endif %}
               <div class="flex justify-between items-center">
                 {% if profile.user.groups.exists %}
-                  <span class="text-sm text-gray-500">{{ profile.user.groups.count }} group{{ profile.user.groups.count|pluralize }}</span>
+                  <span class="text-sm text-gray-500 dark:text-gray-400">{{ profile.user.groups.count }} group{{ profile.user.groups.count|pluralize }}</span>
                 {% else %}
-                  <span class="text-sm text-gray-500">0 groups</span>
+                  <span class="text-sm text-gray-500 dark:text-gray-400">0 groups</span>
                 {% endif %}
                 <a href="{% url 'public_profile' profile.user.username %}"
-                   class="text-blue-600 hover:text-blue-800 font-medium">View Profile</a>
+                   class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium">View Profile</a>
               </div>
             </div>
           </div>
@@ -59,21 +61,23 @@ <h1 class="text-3xl font-bold text-gray-800">User List</h1>
         <nav class="inline-flex">
           {% if page_obj.has_previous %}
             <a href="?page={{ page_obj.previous_page_number }}"
-               class="bg-white border border-gray-300 text-gray-500 hover:bg-gray-100 px-4 py-2 text-sm font-medium rounded-l-md">Previous</a>
+               class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 px-4 py-2 text-sm font-medium rounded-l-md">Previous</a>
           {% endif %}
-          <span class="bg-blue-50 border border-gray-300 text-blue-600 px-4 py-2 text-sm font-medium">
+          <span class="bg-blue-50 dark:bg-blue-900 border border-gray-300 dark:border-gray-700 text-blue-600 dark:text-blue-300 px-4 py-2 text-sm font-medium">
             {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
           </span>
           {% if page_obj.has_next %}
             <a href="?page={{ page_obj.next_page_number }}"
-               class="bg-white border border-gray-300 text-gray-500 hover:bg-gray-100 px-4 py-2 text-sm font-medium rounded-r-md">Next</a>
+               class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 px-4 py-2 text-sm font-medium rounded-r-md">Next</a>
           {% endif %}
         </nav>
       </div>
     {% else %}
       <div class="text-center py-8">
-        <p class="text-gray-600 mb-2">No public profiles found</p>
-        <p class="text-sm text-gray-500">Users need to set their profiles to public to appear in this list.</p>
+        <p class="text-gray-600 dark:text-gray-300 mb-2">No public profiles found</p>
+        <p class="text-sm text-gray-500 dark:text-gray-400">
+          Users need to set their profiles to public to appear in this list.
+        </p>
       </div>
     {% endif %}
   </div>

From bc3289d93e5d6799a49e81f059abac6306b02d02 Mon Sep 17 00:00:00 2001
From: Shreyansh Mojidra <your-github-email@example.com>
Date: Mon, 23 Feb 2026 18:08:44 +0000
Subject: [PATCH 2/4] New UI for Navbar

---
 web/templates/base.html | 807 ++++++++++++++++++++++------------------
 1 file changed, 437 insertions(+), 370 deletions(-)

diff --git a/web/templates/base.html b/web/templates/base.html
index 121663855..0d0edb7d3 100644
--- a/web/templates/base.html
+++ b/web/templates/base.html
@@ -69,20 +69,38 @@
         function updateDarkModeIcon() {
             const isDark = document.documentElement.classList.contains('dark');
             const icon = document.getElementById('darkModeIcon');
+            const label = document.getElementById('darkModeLabel');
             log(`Updating icon. Dark mode is: ${isDark}`);
 
             if (icon) {
-                icon.className = isDark ? 'fas fa-sun' : 'fas fa-moon';
+                icon.className = 'fas w-5 text-teal-500 ' + (isDark ? 'fa-sun' : 'fa-moon');
                 icon.title = isDark ? 'Switch to Light Mode' : 'Switch to Dark Mode';
                 log('Icon updated successfully');
-            } else {
-                log('Warning: Dark mode icon element not found');
+            }
+            if (label) {
+                label.textContent = isDark ? 'Light mode' : 'Dark mode';
             }
         }
 
         // Initialize dark mode immediately and after DOM content loads
         initializeDarkMode();
         document.addEventListener('DOMContentLoaded', initializeDarkMode);
+
+        // Navbar scroll effect: backdrop blur + shadow on scroll
+        function updateNavbarOnScroll() {
+            const header = document.getElementById('main-header');
+            if (!header) return;
+            const scrollClasses = ['bg-teal-600/95', 'dark:bg-teal-800/95', 'backdrop-blur-md', 'shadow-lg'];
+            if (window.scrollY > 10) {
+                scrollClasses.forEach(c => header.classList.add(c));
+            } else {
+                scrollClasses.forEach(c => header.classList.remove(c));
+            }
+        }
+        window.addEventListener('scroll', updateNavbarOnScroll, {
+            passive: true
+        });
+        document.addEventListener('DOMContentLoaded', updateNavbarOnScroll);
     </script>
     <!-- Font Awesome (Free CDN) -->
     <link rel="stylesheet"
@@ -95,28 +113,37 @@
             integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
             crossorigin="anonymous"></script>
     <script>
-        // Toggle the language dropdown
-        function toggleLanguageDropdown() {
-            document.getElementById('language-dropdown').classList.toggle('hidden');
-        }
         // Toggle the user dropdown
         function toggleUserDropdown() {
             document.getElementById('user-dropdown').classList.toggle('hidden');
         }
+        // Toggle the more dropdown (language, dark mode, messages)
+        function toggleMoreDropdown() {
+            document.getElementById('more-dropdown').classList.toggle('hidden');
+            document.getElementById('language-subdropdown').classList.add('hidden');
+        }
+        // Toggle the language sub-dropdown inside more dropdown
+        function toggleLanguageSubdropdown() {
+            const sub = document.getElementById('language-subdropdown');
+            const chevron = document.getElementById('language-chevron');
+            sub.classList.toggle('hidden');
+            if (chevron) chevron.classList.toggle('rotate-180', !sub.classList.contains('hidden'));
+        }
         // Close dropdowns when clicking outside
         document.addEventListener('click', function(event) {
-            const languageDropdown = document.getElementById('language-dropdown');
             const userDropdown = document.getElementById('user-dropdown');
-            const languageButton = event.target.closest('[onclick="toggleLanguageDropdown()"]');
+            const moreDropdown = document.getElementById('more-dropdown');
             const userButton = event.target.closest('[onclick="toggleUserDropdown()"]');
-
-            if (!languageButton && !languageDropdown.contains(event.target)) {
-                languageDropdown.classList.add('hidden');
-            }
+            const moreButton = event.target.closest('[onclick="toggleMoreDropdown()"]');
 
             if (userDropdown && !userButton && !userDropdown.contains(event.target)) {
                 userDropdown.classList.add('hidden');
             }
+            if (moreDropdown && !moreButton && !moreDropdown.contains(event.target)) {
+                moreDropdown.classList.add('hidden');
+                const langSub = document.getElementById('language-subdropdown');
+                if (langSub) langSub.classList.add('hidden');
+            }
         });
     </script>
     <style>
@@ -152,391 +179,420 @@
     <link rel="stylesheet" href="{% static 'css/markdown.css' %}" />
   </head>
   <body class="min-h-screen flex flex-col bg-white text-gray-900 dark:bg-black dark:text-gray-100 transition-colors duration-300 overflow-x-hidden {% if user.is_authenticated %}user-authenticated{% endif %}">
-    <header class="w-full bg-teal-600 dark:bg-teal-800 text-white shadow-md">
-      <div class="max-w-[90rem] mx-auto px-4 md:px-6 flex items-center justify-between h-[70px] relative gap-2">
+    <header id="main-header"
+            class="sticky top-0 z-50 w-full bg-teal-600 dark:bg-teal-800 text-white shadow-md transition-all duration-300 ease-out">
+      <div class="max-w-[90rem] mx-auto px-4 md:px-8 flex items-center justify-between h-16 relative">
         <!-- Logo and Title -->
         <a href="{% url 'index' %}"
-           class="flex flex-1 min-w-[150px] max-w-[50%] items-center space-x-2">
+           class="flex-shrink-0 flex items-center gap-3 group/logo">
           <img src="{% static 'images/logo.png' %}"
                alt="Alpha One Labs Logo"
                height="40"
                width="40"
-               class="h-10 w-10" />
-          <span class="text-xl font-bold text-white ">Alpha One Labs</span>
+               class="h-9 w-9" />
+          <span class="text-lg font-bold text-white hidden sm:inline">Alpha One Labs</span>
         </a>
         <!-- Mobile Menu Button -->
-        <button class="md:hidden p-2 hover:bg-teal-700 rounded-lg"
-                onclick="toggleMobileMenu()">
-          <i class="fas fa-bars text-xl"></i>
+        <button class="md:hidden p-2.5 hover:bg-teal-700/80 rounded-lg transition-colors"
+                onclick="toggleMobileMenu()"
+                aria-label="Toggle menu">
+          <i class="fas fa-bars text-lg"></i>
         </button>
-        <!-- Nav and additional actions -->
-        <nav class="hidden md:flex items-center space-x-3">
-          <!-- Main navigation links with dropdowns -->
-          <div class="flex space-x-2 items-center">
-            <!-- LEARN Dropdown -->
-            <div class="relative group">
-              <button class="flex items-center space-x-1 text-white hover:text-teal-100 focus:outline-none py-2">
-                <span class="font-medium">LEARN</span>
-                <i class="fas fa-chevron-down text-xs transition-transform duration-200 group-hover:rotate-180"></i>
-              </button>
-              <div class="absolute left-0 mt-1 w-56 bg-white dark:bg-gray-800 rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 transform origin-top-left">
-                <div class="py-2 px-1">
-                  <a href="{% url 'classes_map' %}"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-map-marker-alt mr-2 text-teal-500"></i>Classes Near Me
-                  </a>
-                  <a href="{% url 'course_search' %}"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-book-open mr-2 text-teal-500"></i>Courses
-                  </a>
-                  <a href="{% url 'subjects' %}"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-list-check mr-2 text-teal-500"></i>Subjects
-                  </a>
-                  <a href="{% url 'quiz_list' %}"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-question-circle mr-2 text-teal-500"></i>Quizzes
-                  </a>
-                  <a href="{% url 'educational_videos_list' %}"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-video mr-2 text-teal-500"></i>Videos
-                  </a>
-                  <a href="{% url 'challenge_list' %}"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-trophy mr-2 text-teal-500"></i>Challenges
-                  </a>
-                  <a href="{% url 'graphing_calculator' %}"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-calculator mr-2 text-teal-500"></i>Graphing Calculator
-                  </a>
-                  <a href="{% url 'whiteboard' %}"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-palette mr-2 text-teal-500"></i>Whiteboard
-                  </a>
-                  <a href="{% url 'all_study_groups' %}"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-users mr-2 text-teal-500"></i>Study Groups
-                  </a>
+        <!-- Desktop Nav: centered links + right actions -->
+        <nav class="hidden md:flex items-center flex-1 min-w-0">
+          <!-- Centered nav links -->
+          <div class="flex-1 flex justify-center">
+            <div class="flex items-center gap-1">
+              <!-- LEARN Dropdown -->
+              <div class="relative group">
+                <button class="flex items-center gap-1 text-white hover:text-teal-100 focus:outline-none py-2.5 px-3 rounded-lg hover:bg-teal-700/60 transition-colors">
+                  <span class="text-sm font-medium">Learn</span>
+                  <i class="fas fa-chevron-down text-[10px] transition-transform duration-200 group-hover:rotate-180"></i>
+                </button>
+                <div class="absolute left-0 mt-1 w-56 bg-white dark:bg-gray-800 rounded-lg shadow-lg opacity-0 invisible -translate-y-2 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 transition-all duration-200 z-50 origin-top-left border border-gray-100 dark:border-gray-700">
+                  <div class="py-2 px-1">
+                    <a href="{% url 'classes_map' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300 transition-all duration-150 hover:translate-x-0.5">
+                      <i class="fas fa-map-marker-alt mr-2 text-teal-500"></i>Classes Near Me
+                    </a>
+                    <a href="{% url 'course_search' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-book-open mr-2 text-teal-500"></i>Courses
+                    </a>
+                    <a href="{% url 'subjects' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-list-check mr-2 text-teal-500"></i>Subjects
+                    </a>
+                    <a href="{% url 'quiz_list' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-question-circle mr-2 text-teal-500"></i>Quizzes
+                    </a>
+                    <a href="{% url 'educational_videos_list' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-video mr-2 text-teal-500"></i>Videos
+                    </a>
+                    <a href="{% url 'challenge_list' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-trophy mr-2 text-teal-500"></i>Challenges
+                    </a>
+                    <a href="{% url 'graphing_calculator' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-calculator mr-2 text-teal-500"></i>Graphing Calculator
+                    </a>
+                    <a href="{% url 'whiteboard' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-palette mr-2 text-teal-500"></i>Whiteboard
+                    </a>
+                    <a href="{% url 'all_study_groups' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-users mr-2 text-teal-500"></i>Study Groups
+                    </a>
+                  </div>
                 </div>
               </div>
-            </div>
-            <!-- COMMUNITY Dropdown -->
-            <div class="relative group">
-              <button class="flex items-center space-x-1 text-white hover:text-teal-100 focus:outline-none py-2">
-                <span class="font-medium">COMMUNITY</span>
-                <i class="fas fa-chevron-down text-xs transition-transform duration-200 group-hover:rotate-180"></i>
-              </button>
-              <div class="absolute left-0 mt-1 w-56 bg-white dark:bg-gray-800 rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 transform origin-top-left">
-                <div class="py-2 px-1">
-                  <a href="{% url 'waiting_rooms' %}"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-chalkboard-teacher mr-2 text-teal-500"></i>Learning Requests
-                  </a>
-                  <a href="{% url 'surveys' %}"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300 ">
-                    <i class="fas fa-square-poll-vertical mr-2 text-teal-500"></i>Surveys
-                  </a>
-                  <a href="{% url 'waiting_room_list' %}"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-door-open mr-2 text-teal-500"></i>Waiting Rooms
-                  </a>
-                  <a href="{% url 'forum_categories' %}"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-comments mr-2 text-teal-500"></i>Forum
-                  </a>
-                  <a href="{% url 'blog_list' %}"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-blog mr-2 text-teal-500"></i>Blog
-                  </a>
-                  <a href="{% url 'meme_list' %}"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-face-smile mr-2 text-teal-500"></i>Edu Memes
-                  </a>
-                  <a href="{% url 'features' %}"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-lightbulb mr-2 text-teal-500"></i>Features
-                  </a>
-                  <a href="{% url 'users_list' %}"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-users mr-2 text-teal-500"></i>Users
-                  </a>
-                  <a href="{% url 'success_story_list' %}"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-star mr-2 text-teal-500"></i>Success Stories
-                  </a>
-                  <a href="{% url 'team_goals' %}"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-user-friends mr-2 text-teal-500"></i>Peer Network
-                  </a>
-                  <a href="{% url 'team_goals' %}?view=teams"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-users-cog mr-2 text-teal-500"></i>Teams
-                  </a>
+              <!-- COMMUNITY Dropdown -->
+              <div class="relative group">
+                <button class="flex items-center gap-1 text-white hover:text-teal-100 focus:outline-none py-2.5 px-3 rounded-lg hover:bg-teal-700/60 transition-colors">
+                  <span class="text-sm font-medium">Community</span>
+                  <i class="fas fa-chevron-down text-[10px] transition-transform duration-200 group-hover:rotate-180"></i>
+                </button>
+                <div class="absolute left-0 mt-1 w-56 bg-white dark:bg-gray-800 rounded-lg shadow-lg opacity-0 invisible -translate-y-2 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 transition-all duration-200 z-50 origin-top-left border border-gray-100 dark:border-gray-700">
+                  <div class="py-2 px-1">
+                    <a href="{% url 'waiting_rooms' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-chalkboard-teacher mr-2 text-teal-500"></i>Learning Requests
+                    </a>
+                    <a href="{% url 'surveys' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300 ">
+                      <i class="fas fa-square-poll-vertical mr-2 text-teal-500"></i>Surveys
+                    </a>
+                    <a href="{% url 'waiting_room_list' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-door-open mr-2 text-teal-500"></i>Waiting Rooms
+                    </a>
+                    <a href="{% url 'forum_categories' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-comments mr-2 text-teal-500"></i>Forum
+                    </a>
+                    <a href="{% url 'blog_list' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-blog mr-2 text-teal-500"></i>Blog
+                    </a>
+                    <a href="{% url 'meme_list' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-face-smile mr-2 text-teal-500"></i>Edu Memes
+                    </a>
+                    <a href="{% url 'features' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-lightbulb mr-2 text-teal-500"></i>Features
+                    </a>
+                    <a href="{% url 'users_list' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-users mr-2 text-teal-500"></i>Users
+                    </a>
+                    <a href="{% url 'success_story_list' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-star mr-2 text-teal-500"></i>Success Stories
+                    </a>
+                    <a href="{% url 'team_goals' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-user-friends mr-2 text-teal-500"></i>Peer Network
+                    </a>
+                    <a href="{% url 'team_goals' %}?view=teams"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-users-cog mr-2 text-teal-500"></i>Teams
+                    </a>
+                  </div>
                 </div>
               </div>
-            </div>
-            <!-- RESOURCES Dropdown -->
-            <div class="relative group">
-              <button class="flex items-center space-x-1 text-white hover:text-teal-100 focus:outline-none py-2">
-                <span class="font-medium">RESOURCES</span>
-                <i class="fas fa-chevron-down text-xs transition-transform duration-200 group-hover:rotate-180"></i>
-              </button>
-              <div class="absolute left-0 mt-1 w-56 bg-white dark:bg-gray-800 rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 transform origin-top-left">
-                <div class="py-2 px-1">
-                  <a href="{% url 'virtual_lab:virtual_lab_home' %}"
-                     class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                    <i class="fas fa-flask mr-2 text-teal-500"></i>
-                    <span>Virtual Lab</span>
-                  </a>
-                  <a href="{% url 'progress_visualization' %}"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-chart-line mr-2 text-teal-500"></i>Progress Trackers
-                  </a>
-                  <a href="{% url 'gradeable_link_list' %}"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-link mr-2 text-teal-500"></i>Grade Links
-                  </a>
-                  <a href="{% url 'goods_listing' %}"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-store mr-2 text-teal-500"></i>Products
-                  </a>
-                  <a href="{% url 'goods_listing' %}?type=storefront"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-shopping-basket mr-2 text-teal-500"></i>Storefronts
-                  </a>
-                  <a href="https://github.com/alphaonelabs/alphaonelabs-education-website/wiki/GSOC-2026-Ideas"
-                     target="_blank"
-                     rel="noopener"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-code mr-2 text-teal-500"></i>GSOC'26
-                  </a>
+              <!-- RESOURCES Dropdown -->
+              <div class="relative group">
+                <button class="flex items-center gap-1 text-white hover:text-teal-100 focus:outline-none py-2.5 px-3 rounded-lg hover:bg-teal-700/60 transition-colors">
+                  <span class="text-sm font-medium">Resources</span>
+                  <i class="fas fa-chevron-down text-[10px] transition-transform duration-200 group-hover:rotate-180"></i>
+                </button>
+                <div class="absolute left-0 mt-1 w-56 bg-white dark:bg-gray-800 rounded-lg shadow-lg opacity-0 invisible -translate-y-2 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 transition-all duration-200 z-50 origin-top-left border border-gray-100 dark:border-gray-700">
+                  <div class="py-2 px-1">
+                    <a href="{% url 'virtual_lab:virtual_lab_home' %}"
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-flask mr-2 text-teal-500"></i>
+                      <span>Virtual Lab</span>
+                    </a>
+                    <a href="{% url 'progress_visualization' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-chart-line mr-2 text-teal-500"></i>Progress Trackers
+                    </a>
+                    <a href="{% url 'gradeable_link_list' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-link mr-2 text-teal-500"></i>Grade Links
+                    </a>
+                    <a href="{% url 'goods_listing' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-store mr-2 text-teal-500"></i>Products
+                    </a>
+                    <a href="{% url 'goods_listing' %}?type=storefront"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-shopping-basket mr-2 text-teal-500"></i>Storefronts
+                    </a>
+                    <a href="https://github.com/alphaonelabs/alphaonelabs-education-website/wiki/GSOC-2026-Ideas"
+                       target="_blank"
+                       rel="noopener"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-code mr-2 text-teal-500"></i>GSOC'26
+                    </a>
+                  </div>
                 </div>
               </div>
-            </div>
-            <!-- ABOUT Dropdown -->
-            <div class="relative group">
-              <button class="flex items-center space-x-1 text-white hover:text-teal-100 focus:outline-none py-2">
-                <span class="font-medium">ABOUT</span>
-                <i class="fas fa-chevron-down text-xs transition-transform duration-200 group-hover:rotate-180"></i>
-              </button>
-              <div class="absolute left-0 mt-1 w-56 bg-white dark:bg-gray-800 rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 transform origin-top-left">
-                <div class="py-2 px-1">
-                  <a href="{% url 'about' %}"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-circle-info mr-2 text-teal-500"></i>Our Mission
-                  </a>
-                  <a href="{% url 'terms' %}#general"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-file-contract mr-2 text-teal-500"></i>Terms
-                  </a>
-                  <a href="{% url 'system_status' %}"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-chart-line mr-2 text-teal-500"></i>Status
-                  </a>
-                  <a href="{% url 'feedback' %}"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-comment-dots mr-2 text-teal-500"></i>Feedback
-                  </a>
-                  <a href="{% url 'donate' %}"
-                     class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                    <i class="fas fa-hand-holding-heart mr-2 text-teal-500"></i>Donate
-                  </a>
+              <!-- ABOUT Dropdown -->
+              <div class="relative group">
+                <button class="flex items-center gap-1 text-white hover:text-teal-100 focus:outline-none py-2.5 px-3 rounded-lg hover:bg-teal-700/60 transition-colors">
+                  <span class="text-sm font-medium">About</span>
+                  <i class="fas fa-chevron-down text-[10px] transition-transform duration-200 group-hover:rotate-180"></i>
+                </button>
+                <div class="absolute left-0 mt-1 w-56 bg-white dark:bg-gray-800 rounded-lg shadow-lg opacity-0 invisible -translate-y-2 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 transition-all duration-200 z-50 origin-top-left border border-gray-100 dark:border-gray-700">
+                  <div class="py-2 px-1">
+                    <a href="{% url 'about' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-circle-info mr-2 text-teal-500"></i>Our Mission
+                    </a>
+                    <a href="{% url 'terms' %}#general"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-file-contract mr-2 text-teal-500"></i>Terms
+                    </a>
+                    <a href="{% url 'system_status' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-chart-line mr-2 text-teal-500"></i>Status
+                    </a>
+                    <a href="{% url 'feedback' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-comment-dots mr-2 text-teal-500"></i>Feedback
+                    </a>
+                    <a href="{% url 'donate' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-hand-holding-heart mr-2 text-teal-500"></i>Donate
+                    </a>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-          <!-- Search bar (persistent element) -->
-          <div class="relative hidden lg:inline-block w-[250px]">
-            <form action="{% url 'course_search' %}" method="get" class="m-0">
-              <input type="text"
-                     name="q"
-                     placeholder="What do you want to learn?"
-                     class="rounded-full w-[250px] bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-teal-300 dark:focus:ring-teal-700" />
-              <button type="submit"
-                      class="absolute right-3 top-2 text-gray-500 dark:text-gray-300">
-                <i class="fas fa-search"></i>
-              </button>
-            </form>
-          </div>
-          <!-- Messaging Button -->
-          <a href="{% url 'inbox' %}"
-             title="Messages"
-             class="flex items-center p-2 hover:bg-teal-700 rounded-lg">
-            <i class="fas fa-comments text-xl"></i>
-          </a> <!-- Language and Dark Mode -->
-          <div class="flex items-center space-x-2">
-            <!-- Cart Icon -->
-            <a href="{% url 'cart_view' %}"
-               class="relative hover:underline flex items-center p-2 hover:bg-teal-700 rounded-lg">
-              <i class="fa-solid fa-shopping-cart"></i>
-              {% if request.user.cart.item_count > 0 or request.session.session_key and request.session.session_key|get_cart_item_count > 0 %}
-                <span class="absolute -top-1 -right-1 bg-orange-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
-                  {% if request.user.is_authenticated %}
-                    {{ request.user.cart.item_count }}
-                  {% else %}
-                    {{ request.session.session_key|get_cart_item_count }}
-                  {% endif %}
-                </span>
-              {% endif %}
-            </a>
-            <!-- New Notification Button for Invitations -->
-            <a href="{% url 'user_invitations' %}"
-               class="relative hover:underline flex items-center p-2 hover:bg-teal-700 rounded-lg">
-              <i class="fas fa-bell"></i>
-              {% if pending_invites_count %}
-                <span class="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-red-600 flex items-center justify-center text-white text-xs">
-                  {{ pending_invites_count }}
-                </span>
-              {% endif %}
-            </a>
-            <div class="relative">
-              <button class="focus:outline-none hover:underline flex items-center p-2 hover:bg-teal-700 rounded-lg"
-                      onclick="toggleLanguageDropdown()">
-                <i class="fa-solid fa-globe"></i>
-              </button>
-              <!-- Language dropdown content -->
-              <div id="language-dropdown"
-                   class="hidden absolute right-0 mt-2 w-40 bg-white dark:bg-gray-800 shadow-lg rounded-md py-2 z-50">
-                <form action="{% url 'set_language' %}" method="post" class="m-0">
-                  {% csrf_token %}
-                  <input type="hidden" name="next" value="{{ request.get_full_path }}" />
-                  <button type="submit"
-                          name="language"
-                          value="en"
-                          class="w-full text-left block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
-                    English
-                  </button>
-                  <button type="submit"
-                          name="language"
-                          value="es"
-                          class="w-full text-left block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
-                    Spanish
-                  </button>
-                  <button type="submit"
-                          name="language"
-                          value="fr"
-                          class="w-full text-left block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
-                    French
-                  </button>
-                  <button type="submit"
-                          name="language"
-                          value="de"
-                          class="w-full text-left block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
-                    German
-                  </button>
-                  <button type="submit"
-                          name="language"
-                          value="zh-hans"
-                          class="w-full text-left block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
-                    Chinese
+          <!-- Right actions -->
+          <div class="flex-1 flex justify-end items-center gap-3 pl-6">
+            <!-- Search bar -->
+            <div class="relative hidden xl:inline-block w-52 flex-shrink-0 group/search">
+              <form action="{% url 'course_search' %}" method="get" class="m-0">
+                <input type="text"
+                       name="q"
+                       placeholder="What do you want to learn?"
+                       class="rounded-full w-full bg-white/95 dark:bg-gray-700/95 text-gray-900 dark:text-gray-100 px-3 py-1.5 pr-9 text-sm focus:outline-none focus:ring-2 focus:ring-white/50 placeholder:text-gray-500 dark:placeholder:text-gray-400" />
+                <button type="submit"
+                        class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-300 transition-colors duration-200 group-hover/search:text-teal-600 dark:group-hover/search:text-teal-300">
+                  <i class="fas fa-search"></i>
+                </button>
+              </form>
+            </div>
+            <!-- Right actions: divider + icons -->
+            <div class="h-6 w-px bg-teal-500/40 hidden lg:block"></div>
+            <div class="flex items-center gap-1">
+              <a href="{% url 'cart_view' %}"
+                 class="relative flex items-center justify-center w-9 h-9 hover:bg-teal-700/80 rounded-lg transition-colors">
+                <i class="fa-solid fa-shopping-cart"></i>
+                {% if request.user.cart.item_count > 0 or request.session.session_key and request.session.session_key|get_cart_item_count > 0 %}
+                  <span class="absolute -top-1 -right-1 bg-orange-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
+                    {% if request.user.is_authenticated %}
+                      {{ request.user.cart.item_count }}
+                    {% else %}
+                      {{ request.session.session_key|get_cart_item_count }}
+                    {% endif %}
+                  </span>
+                {% endif %}
+              </a>
+              <a href="{% url 'user_invitations' %}"
+                 class="relative flex items-center justify-center w-9 h-9 hover:bg-teal-700/80 rounded-lg transition-colors">
+                <i class="fas fa-bell"></i>
+                {% if pending_invites_count %}
+                  <span class="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-red-600 flex items-center justify-center text-white text-xs">
+                    {{ pending_invites_count }}
+                  </span>
+                {% endif %}
+              </a>
+              <!-- More dropdown: Messages, Language, Dark mode -->
+              <div class="relative">
+                <button class="focus:outline-none flex items-center justify-center w-9 h-9 hover:bg-teal-700/80 rounded-lg transition-colors"
+                        onclick="toggleMoreDropdown()"
+                        aria-label="More options"
+                        title="More options">
+                  <i class="fas fa-ellipsis-v"></i>
+                </button>
+                <div id="more-dropdown"
+                     class="hidden absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 shadow-lg rounded-lg py-2 z-50 border border-gray-100 dark:border-gray-700">
+                  <a href="{% url 'inbox' %}"
+                     class="flex items-center gap-2 px-4 py-2.5 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
+                    <i class="fas fa-comments w-5 text-teal-500"></i>
+                    <span>Messages</span>
+                  </a>
+                  <div class="border-t border-gray-200 dark:border-gray-600 my-1"></div>
+                  <!-- Language: expandable sub-dropdown -->
+                  <div class="relative">
+                    <button type="button"
+                            onclick="toggleLanguageSubdropdown()"
+                            class="w-full text-left flex items-center justify-between gap-2 px-4 py-2.5 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
+                      <div class="flex items-center gap-2">
+                        <i class="fas fa-globe w-5 text-teal-500"></i>
+                        <span>Language</span>
+                      </div>
+                      <i id="language-chevron"
+                         class="fas fa-chevron-down text-xs text-gray-500 transition-transform duration-200"></i>
+                    </button>
+                    <div id="language-subdropdown"
+                         class="hidden pl-4 mt-1 border-l-2 border-teal-200 dark:border-teal-700 ml-4">
+                      <form action="{% url 'set_language' %}" method="post" class="m-0">
+                        {% csrf_token %}
+                        <input type="hidden" name="next" value="{{ request.get_full_path }}" />
+                        <button type="submit"
+                                name="language"
+                                value="en"
+                                class="w-full text-left px-3 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">
+                          English
+                        </button>
+                        <button type="submit"
+                                name="language"
+                                value="es"
+                                class="w-full text-left px-3 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">
+                          Spanish
+                        </button>
+                        <button type="submit"
+                                name="language"
+                                value="fr"
+                                class="w-full text-left px-3 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">
+                          French
+                        </button>
+                        <button type="submit"
+                                name="language"
+                                value="de"
+                                class="w-full text-left px-3 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">
+                          German
+                        </button>
+                        <button type="submit"
+                                name="language"
+                                value="zh-hans"
+                                class="w-full text-left px-3 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">
+                          Chinese
+                        </button>
+                      </form>
+                    </div>
+                  </div>
+                  <div class="border-t border-gray-200 dark:border-gray-600 my-1"></div>
+                  <button type="button"
+                          onclick="toggleDarkMode(); document.getElementById('more-dropdown').classList.add('hidden');"
+                          class="w-full text-left flex items-center gap-2 px-4 py-2.5 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
+                    <i id="darkModeIcon" class="fas fa-moon w-5 text-teal-500"></i>
+                    <span id="darkModeLabel">Dark mode</span>
                   </button>
-                </form>
+                </div>
               </div>
             </div>
-            <button class="focus:outline-none flex items-center hover:underline p-2 rounded-lg hover:bg-teal-700 transition-colors"
-                    title="Switch to Dark Mode"
-                    onclick="toggleDarkMode()">
-              <i id="darkModeIcon" class="fas fa-moon"></i>
-            </button>
-          </div>
-          <!-- Auth Buttons -->
-          {% if user.is_authenticated %}
-            <!-- User Avatar and Dropdown -->
-            <div class="relative">
-              <button onclick="toggleUserDropdown()"
-                      class="flex items-center space-x-2 focus:outline-none">
-                {% if user.profile.custom_avatar %}
-                  <div class="w-12 h-12 p-1.5 transform hover:scale-105 transition-transform duration-200">
-                    <div class="w-full h-full overflow-hidden rounded-full flex items-center justify-center">
-                      {{ user.profile.custom_avatar.svg|safe }}
+            <!-- User / Auth -->
+            <div class="h-6 w-px bg-teal-500/40 hidden lg:block"></div>
+            {% if user.is_authenticated %}
+              <div class="relative flex-shrink-0">
+                <button onclick="toggleUserDropdown()"
+                        class="flex items-center gap-2 focus:outline-none p-1.5 rounded-lg hover:bg-teal-700/80 transition-colors">
+                  {% if user.profile.custom_avatar %}
+                    <div class="w-12 h-12 p-1.5 transform hover:scale-105 transition-transform duration-200">
+                      <div class="w-full h-full overflow-hidden rounded-full flex items-center justify-center">
+                        {{ user.profile.custom_avatar.svg|safe }}
+                      </div>
                     </div>
+                  {% elif user.profile.avatar %}
+                    <img src="{{ user.profile.avatar.url }}"
+                         alt="User Avatar"
+                         class="h-8 w-8 rounded-full object-cover border-2 border-white"
+                         height="32"
+                         width="32" />
+                  {% else %}
+                    <div class="h-8 w-8 rounded-full bg-orange-500 flex items-center justify-center text-white border-2 border-white">
+                      {{ user.first_name|first|default:user.username|first|upper }}
+                    </div>
+                  {% endif %}
+                  <span class="text-white text-sm font-medium hidden lg:block truncate max-w-[80px]">{{ user.username }}</span>
+                  <i class="fas fa-chevron-down text-white text-xs"></i>
+                </button>
+                <!-- User Dropdown Menu -->
+                <div id="user-dropdown"
+                     class="hidden absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-100 dark:border-gray-700">
+                  <div class="px-4 py-2 text-sm text-gray-700 dark:text-gray-200 border-b border-gray-200 dark:border-gray-700">
+                    <div class="font-semibold truncate" title="{{ user.username }}">{{ user.username }}</div>
+                    <div class="text-sm text-gray-500 dark:text-gray-400 truncate"
+                         title="{{ user.email }}">{{ user.email }}</div>
                   </div>
-                {% elif user.profile.avatar %}
-                  <img src="{{ user.profile.avatar.url }}"
-                       alt="User Avatar"
-                       class="h-8 w-8 rounded-full object-cover border-2 border-white"
-                       height="32"
-                       width="32" />
-                {% else %}
-                  <div class="h-8 w-8 rounded-full bg-orange-500 flex items-center justify-center text-white border-2 border-white">
-                    {{ user.first_name|first|default:user.username|first|upper }}
-                  </div>
-                {% endif %}
-                <span class="text-white font-medium hidden sm:block truncate max-w-[100px]">{{ user.username }}</span>
-                <i class="fas fa-chevron-down text-white text-xs"></i>
-              </button>
-              <!-- User Dropdown Menu -->
-              <div id="user-dropdown"
-                   class="hidden absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50">
-                <div class="px-4 py-2 text-sm text-gray-700 dark:text-gray-200 border-b border-gray-200 dark:border-gray-700">
-                  <div class="font-semibold truncate" title="{{ user.username }}">{{ user.username }}</div>
-                  <div class="text-sm text-gray-500 dark:text-gray-400 truncate"
-                       title="{{ user.email }}">{{ user.email }}</div>
-                </div>
-                <a href="{% url 'profile' %}"
-                   class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
-                  <i class="fas fa-user-edit mr-2"></i> Edit Profile
-                </a>
-                <a href="{% url 'create_course' %}"
-                   class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
-                  <i class="fas fa-plus-circle mr-2"></i> Create Course
-                </a>
-                {% if user.is_superuser %}
-                  <a href="{% url 'admin:index' %}"
+                  <a href="{% url 'profile' %}"
                      class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
-                    <i class="fas fa-cog mr-2"></i> Admin Panel
+                    <i class="fas fa-user-edit mr-2"></i> Edit Profile
                   </a>
-                {% endif %}
-                <a href="{% url 'messaging_dashboard' %}"
-                   title="Messages"
-                   class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
-                  <i class="fas fa-comments mr-2 text-xl"></i>Messages
-                </a>
-                <!-- Add the Notification Preferences link here -->
-                <a href="{% url 'notification_preferences' %}"
-                   class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
-                  <i class="fas fa-bell mr-2"></i> Notification Preferences
-                </a>
-                <a href="{% url 'teacher_dashboard' %}"
-                   class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
-                  <i class="fas fa-chalkboard-teacher mr-2"></i> Teacher Dashboard
-                </a>
-                <a href="{% url 'student_dashboard' %}"
-                   class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
-                  <i class="fas fa-graduation-cap mr-2"></i> Student Dashboard
+                  <a href="{% url 'create_course' %}"
+                     class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
+                    <i class="fas fa-plus-circle mr-2"></i> Create Course
+                  </a>
+                  {% if user.is_superuser %}
+                    <a href="{% url 'admin:index' %}"
+                       class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
+                      <i class="fas fa-cog mr-2"></i> Admin Panel
+                    </a>
+                  {% endif %}
+                  <a href="{% url 'messaging_dashboard' %}"
+                     title="Messages"
+                     class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
+                    <i class="fas fa-comments mr-2 text-xl"></i>Messages
+                  </a>
+                  <!-- Add the Notification Preferences link here -->
+                  <a href="{% url 'notification_preferences' %}"
+                     class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
+                    <i class="fas fa-bell mr-2"></i> Notification Preferences
+                  </a>
+                  <a href="{% url 'teacher_dashboard' %}"
+                     class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
+                    <i class="fas fa-chalkboard-teacher mr-2"></i> Teacher Dashboard
+                  </a>
+                  <a href="{% url 'student_dashboard' %}"
+                     class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
+                    <i class="fas fa-graduation-cap mr-2"></i> Student Dashboard
+                  </a>
+                  <a href="{% url 'progress_visualization' %}"
+                     class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
+                    <i class="fas fa-chart-line mr-2"></i> Progress Chart
+                  </a>
+                  <form method="post" action="{% url 'account_logout' %}" class="block">
+                    {% csrf_token %}
+                    <button type="submit"
+                            class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
+                      <i class="fas fa-sign-out-alt mr-2"></i> Logout
+                    </button>
+                  </form>
+                </div>
+              </div>
+            {% else %}
+              <div class="flex items-center gap-4">
+                <a href="{% url 'account_login' %}"
+                   class="px-5 py-2.5 rounded-lg hover:bg-teal-700/80 transition-colors text-base font-semibold">
+                  Login
                 </a>
-                <a href="{% url 'progress_visualization' %}"
-                   class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
-                  <i class="fas fa-chart-line mr-2"></i> Progress Chart
+                <a href="{% url 'account_signup' %}"
+                   class="px-5 py-2.5 rounded-lg bg-orange-500 hover:bg-orange-600 text-white text-base font-semibold whitespace-nowrap transition-colors">
+                  Sign up
                 </a>
-                <form method="post" action="{% url 'account_logout' %}" class="block">
-                  {% csrf_token %}
-                  <button type="submit"
-                          class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
-                    <i class="fas fa-sign-out-alt mr-2"></i> Logout
-                  </button>
-                </form>
               </div>
-            </div>
-          {% else %}
-            <div class="flex items-center space-x-2">
-              <a href="{% url 'account_login' %}"
-                 class="hover:underline flex items-center p-2 hover:bg-teal-700 rounded-lg">
-                <i class="fa-solid fa-right-to-bracket mr-1"></i>
-                <span class="hidden sm:inline">Login</span>
-              </a>
-              <a href="{% url 'account_signup' %}"
-                 class="px-3 py-1 rounded-full bg-orange-500 hover:bg-orange-600 text-white font-semibold flex items-center">
-                <i class="fa-solid fa-user-plus mr-2"></i>
-                <span class="hidden sm:inline">Signup</span>
-              </a>
-            </div>
-          {% endif %}
+            {% endif %}
+          </div>
         </nav>
         <!-- Mobile Menu (hidden by default) -->
         <div id="mobile-menu"
-             class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4 hidden">
-          <div class="absolute right-0 top-0 h-full w-72 bg-white dark:bg-gray-800 shadow-lg overflow-y-auto mobile-menu-content">
+             class="fixed inset-0 z-50 flex items-end sm:items-stretch sm:justify-end opacity-0 pointer-events-none transition-opacity duration-300 ease-out">
+          <div class="absolute inset-0 bg-black/50"
+               onclick="toggleMobileMenu()"
+               aria-hidden="true"></div>
+          <div id="mobile-menu-panel"
+               class="absolute right-0 top-0 h-full w-72 max-w-[85vw] bg-white dark:bg-gray-800 shadow-2xl overflow-y-auto mobile-menu-content translate-x-full transition-transform duration-300 ease-out">
             <!-- Close button -->
             <button class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
                     onclick="toggleMobileMenu()">
@@ -1094,17 +1150,28 @@ <h4 class="font-medium text-sm mb-2 text-gray-700 dark:text-gray-300">SUBSCRIBE
     <script>
         function toggleMobileMenu() {
             const menu = document.getElementById('mobile-menu');
-            menu.classList.toggle('hidden');
-            document.body.classList.toggle('overflow-hidden');
+            const panel = document.getElementById('mobile-menu-panel');
+            const isOpen = menu.classList.contains('mobile-menu-open');
+            if (isOpen) {
+                menu.classList.remove('mobile-menu-open', 'opacity-100', 'pointer-events-auto');
+                menu.classList.add('opacity-0', 'pointer-events-none');
+                if (panel) panel.classList.add('translate-x-full');
+                document.body.classList.remove('overflow-hidden');
+            } else {
+                menu.classList.add('mobile-menu-open', 'opacity-100', 'pointer-events-auto');
+                menu.classList.remove('opacity-0', 'pointer-events-none');
+                if (panel) panel.classList.remove('translate-x-full');
+                document.body.classList.add('overflow-hidden');
+            }
         }
 
-        // Close mobile menu when clicking outside
+        // Close mobile menu when clicking overlay
         document.addEventListener('click', function(event) {
             const menu = document.getElementById('mobile-menu');
             const menuButton = event.target.closest('[onclick="toggleMobileMenu()"]');
             const menuContent = event.target.closest('.mobile-menu-content');
 
-            if (!menu.classList.contains('hidden') && !menuButton && !menuContent) {
+            if (menu.classList.contains('mobile-menu-open') && !menuButton && !menuContent) {
                 toggleMobileMenu();
             }
         });

From 19e23ff6bee55047fef7b33c84d6bec7dd19bc6d Mon Sep 17 00:00:00 2001
From: Shreyansh Mojidra <your-github-email@example.com>
Date: Mon, 23 Feb 2026 18:42:39 +0000
Subject: [PATCH 3/4] feat(navbar): redesign navbar UI

---
 web/templates/base.html | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/web/templates/base.html b/web/templates/base.html
index 0d0edb7d3..7409ee3aa 100644
--- a/web/templates/base.html
+++ b/web/templates/base.html
@@ -294,10 +294,6 @@
                        class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
                       <i class="fas fa-star mr-2 text-teal-500"></i>Success Stories
                     </a>
-                    <a href="{% url 'team_goals' %}"
-                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                      <i class="fas fa-user-friends mr-2 text-teal-500"></i>Peer Network
-                    </a>
                     <a href="{% url 'team_goals' %}?view=teams"
                        class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
                       <i class="fas fa-users-cog mr-2 text-teal-500"></i>Teams
@@ -720,11 +716,6 @@
                       <i class="fas fa-star mr-2 text-teal-500"></i>
                       <span>Success Stories</span>
                     </a>
-                    <a href="{% url 'team_goals' %}"
-                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                      <i class="fas fa-user-friends mr-2 text-teal-500"></i>
-                      <span>Peer Network</span>
-                    </a>
                     <a href="{% url 'team_goals' %}?view=teams"
                        class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
                       <i class="fas fa-users-cog mr-2 text-teal-500"></i>

From f7e4e00d2e589c6972f5014aa78b9d18dce40c96 Mon Sep 17 00:00:00 2001
From: Shreyansh Mojidra <your-github-email@example.com>
Date: Mon, 23 Feb 2026 19:24:20 +0000
Subject: [PATCH 4/4] Resolved Conflicts

---
 web/templates/base.html | 1714 +++++++++++++++++++--------------------
 1 file changed, 831 insertions(+), 883 deletions(-)

diff --git a/web/templates/base.html b/web/templates/base.html
index 45c0caf32..7409ee3aa 100644
--- a/web/templates/base.html
+++ b/web/templates/base.html
@@ -250,7 +250,6 @@
                   </div>
                 </div>
               </div>
-              <<<<<<< HEAD
               <!-- COMMUNITY Dropdown -->
               <div class="relative group">
                 <button class="flex items-center gap-1 text-white hover:text-teal-100 focus:outline-none py-2.5 px-3 rounded-lg hover:bg-teal-700/60 transition-colors">
@@ -300,955 +299,904 @@
                       <i class="fas fa-users-cog mr-2 text-teal-500"></i>Teams
                     </a>
                   </div>
-                  =======
                 </div>
-                <!-- COMMUNITY Dropdown -->
-                <div class="relative group">
-                  <button class="flex items-center space-x-1 text-white hover:text-teal-100 focus:outline-none py-2">
-                    <span class="font-medium">COMMUNITY</span>
-                    <i class="fas fa-chevron-down text-xs transition-transform duration-200 group-hover:rotate-180"></i>
-                  </button>
-                  <div class="absolute left-0 mt-1 w-56 bg-white dark:bg-gray-800 rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 transform origin-top-left">
-                    <div class="py-2 px-1">
-                      <a href="{% url 'waiting_rooms' %}"
-                         class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                        <i class="fas fa-chalkboard-teacher mr-2 text-teal-500"></i>Learning Requests
-                      </a>
-                      <a href="{% url 'surveys' %}"
-                         class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300 ">
-                        <i class="fas fa-square-poll-vertical mr-2 text-teal-500"></i>Surveys
-                      </a>
-                      <a href="{% url 'waiting_room_list' %}"
-                         class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                        <i class="fas fa-door-open mr-2 text-teal-500"></i>Waiting Rooms
-                      </a>
-                      <a href="{% url 'forum_categories' %}"
-                         class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                        <i class="fas fa-comments mr-2 text-teal-500"></i>Forum
-                      </a>
-                      <a href="{% url 'blog_list' %}"
-                         class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                        <i class="fas fa-blog mr-2 text-teal-500"></i>Blog
-                      </a>
-                      <a href="{% url 'meme_list' %}"
-                         class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                        <i class="fas fa-face-smile mr-2 text-teal-500"></i>Edu Memes
-                      </a>
-                      <a href="{% url 'features' %}"
-                         class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                        <i class="fas fa-lightbulb mr-2 text-teal-500"></i>Features
-                      </a>
-                      <a href="{% url 'users_list' %}"
-                         class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                        <i class="fas fa-users mr-2 text-teal-500"></i>Users
-                      </a>
-                      <a href="{% url 'success_story_list' %}"
-                         class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                        <i class="fas fa-star mr-2 text-teal-500"></i>Success Stories
-                      </a>
-                      <a href="{% url 'team_goals' %}?view=teams"
-                         class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                        <i class="fas fa-users-cog mr-2 text-teal-500"></i>Teams
-                      </a>
-                      >>>>>>> main
-                    </div>
-                  </div>
-                  <!-- RESOURCES Dropdown -->
-                  <div class="relative group">
-                    <button class="flex items-center gap-1 text-white hover:text-teal-100 focus:outline-none py-2.5 px-3 rounded-lg hover:bg-teal-700/60 transition-colors">
-                      <span class="text-sm font-medium">Resources</span>
-                      <i class="fas fa-chevron-down text-[10px] transition-transform duration-200 group-hover:rotate-180"></i>
-                    </button>
-                    <div class="absolute left-0 mt-1 w-56 bg-white dark:bg-gray-800 rounded-lg shadow-lg opacity-0 invisible -translate-y-2 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 transition-all duration-200 z-50 origin-top-left border border-gray-100 dark:border-gray-700">
-                      <div class="py-2 px-1">
-                        <a href="{% url 'virtual_lab:virtual_lab_home' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-flask mr-2 text-teal-500"></i>
-                          <span>Virtual Lab</span>
-                        </a>
-                        <a href="{% url 'progress_visualization' %}"
-                           class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                          <i class="fas fa-chart-line mr-2 text-teal-500"></i>Progress Trackers
-                        </a>
-                        <a href="{% url 'gradeable_link_list' %}"
-                           class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                          <i class="fas fa-link mr-2 text-teal-500"></i>Grade Links
-                        </a>
-                        <a href="{% url 'goods_listing' %}"
-                           class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                          <i class="fas fa-store mr-2 text-teal-500"></i>Products
-                        </a>
-                        <a href="{% url 'goods_listing' %}?type=storefront"
-                           class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                          <i class="fas fa-shopping-basket mr-2 text-teal-500"></i>Storefronts
-                        </a>
-                        <a href="https://github.com/alphaonelabs/alphaonelabs-education-website/wiki/GSOC-2026-Ideas"
-                           target="_blank"
-                           rel="noopener"
-                           class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                          <i class="fas fa-code mr-2 text-teal-500"></i>GSOC'26
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                  <!-- ABOUT Dropdown -->
-                  <div class="relative group">
-                    <button class="flex items-center gap-1 text-white hover:text-teal-100 focus:outline-none py-2.5 px-3 rounded-lg hover:bg-teal-700/60 transition-colors">
-                      <span class="text-sm font-medium">About</span>
-                      <i class="fas fa-chevron-down text-[10px] transition-transform duration-200 group-hover:rotate-180"></i>
-                    </button>
-                    <div class="absolute left-0 mt-1 w-56 bg-white dark:bg-gray-800 rounded-lg shadow-lg opacity-0 invisible -translate-y-2 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 transition-all duration-200 z-50 origin-top-left border border-gray-100 dark:border-gray-700">
-                      <div class="py-2 px-1">
-                        <a href="{% url 'about' %}"
-                           class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                          <i class="fas fa-circle-info mr-2 text-teal-500"></i>Our Mission
-                        </a>
-                        <a href="{% url 'terms' %}#general"
-                           class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                          <i class="fas fa-file-contract mr-2 text-teal-500"></i>Terms
-                        </a>
-                        <a href="{% url 'system_status' %}"
-                           class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                          <i class="fas fa-chart-line mr-2 text-teal-500"></i>Status
-                        </a>
-                        <a href="{% url 'feedback' %}"
-                           class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                          <i class="fas fa-comment-dots mr-2 text-teal-500"></i>Feedback
-                        </a>
-                        <a href="{% url 'donate' %}"
-                           class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
-                          <i class="fas fa-hand-holding-heart mr-2 text-teal-500"></i>Donate
-                        </a>
-                      </div>
-                    </div>
+              </div>
+              <!-- RESOURCES Dropdown -->
+              <div class="relative group">
+                <button class="flex items-center gap-1 text-white hover:text-teal-100 focus:outline-none py-2.5 px-3 rounded-lg hover:bg-teal-700/60 transition-colors">
+                  <span class="text-sm font-medium">Resources</span>
+                  <i class="fas fa-chevron-down text-[10px] transition-transform duration-200 group-hover:rotate-180"></i>
+                </button>
+                <div class="absolute left-0 mt-1 w-56 bg-white dark:bg-gray-800 rounded-lg shadow-lg opacity-0 invisible -translate-y-2 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 transition-all duration-200 z-50 origin-top-left border border-gray-100 dark:border-gray-700">
+                  <div class="py-2 px-1">
+                    <a href="{% url 'virtual_lab:virtual_lab_home' %}"
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-flask mr-2 text-teal-500"></i>
+                      <span>Virtual Lab</span>
+                    </a>
+                    <a href="{% url 'progress_visualization' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-chart-line mr-2 text-teal-500"></i>Progress Trackers
+                    </a>
+                    <a href="{% url 'gradeable_link_list' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-link mr-2 text-teal-500"></i>Grade Links
+                    </a>
+                    <a href="{% url 'goods_listing' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-store mr-2 text-teal-500"></i>Products
+                    </a>
+                    <a href="{% url 'goods_listing' %}?type=storefront"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-shopping-basket mr-2 text-teal-500"></i>Storefronts
+                    </a>
+                    <a href="https://github.com/alphaonelabs/alphaonelabs-education-website/wiki/GSOC-2026-Ideas"
+                       target="_blank"
+                       rel="noopener"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-code mr-2 text-teal-500"></i>GSOC'26
+                    </a>
                   </div>
                 </div>
               </div>
-              <!-- Right actions -->
-              <div class="flex-1 flex justify-end items-center gap-3 pl-6">
-                <!-- Search bar -->
-                <div class="relative hidden xl:inline-block w-52 flex-shrink-0 group/search">
-                  <form action="{% url 'course_search' %}" method="get" class="m-0">
-                    <input type="text"
-                           name="q"
-                           placeholder="What do you want to learn?"
-                           class="rounded-full w-full bg-white/95 dark:bg-gray-700/95 text-gray-900 dark:text-gray-100 px-3 py-1.5 pr-9 text-sm focus:outline-none focus:ring-2 focus:ring-white/50 placeholder:text-gray-500 dark:placeholder:text-gray-400" />
-                    <button type="submit"
-                            class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-300 transition-colors duration-200 group-hover/search:text-teal-600 dark:group-hover/search:text-teal-300">
-                      <i class="fas fa-search"></i>
-                    </button>
-                  </form>
+              <!-- ABOUT Dropdown -->
+              <div class="relative group">
+                <button class="flex items-center gap-1 text-white hover:text-teal-100 focus:outline-none py-2.5 px-3 rounded-lg hover:bg-teal-700/60 transition-colors">
+                  <span class="text-sm font-medium">About</span>
+                  <i class="fas fa-chevron-down text-[10px] transition-transform duration-200 group-hover:rotate-180"></i>
+                </button>
+                <div class="absolute left-0 mt-1 w-56 bg-white dark:bg-gray-800 rounded-lg shadow-lg opacity-0 invisible -translate-y-2 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 transition-all duration-200 z-50 origin-top-left border border-gray-100 dark:border-gray-700">
+                  <div class="py-2 px-1">
+                    <a href="{% url 'about' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-circle-info mr-2 text-teal-500"></i>Our Mission
+                    </a>
+                    <a href="{% url 'terms' %}#general"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-file-contract mr-2 text-teal-500"></i>Terms
+                    </a>
+                    <a href="{% url 'system_status' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-chart-line mr-2 text-teal-500"></i>Status
+                    </a>
+                    <a href="{% url 'feedback' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-comment-dots mr-2 text-teal-500"></i>Feedback
+                    </a>
+                    <a href="{% url 'donate' %}"
+                       class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
+                      <i class="fas fa-hand-holding-heart mr-2 text-teal-500"></i>Donate
+                    </a>
+                  </div>
                 </div>
-                <!-- Right actions: divider + icons -->
-                <div class="h-6 w-px bg-teal-500/40 hidden lg:block"></div>
-                <div class="flex items-center gap-1">
-                  <a href="{% url 'cart_view' %}"
-                     class="relative flex items-center justify-center w-9 h-9 hover:bg-teal-700/80 rounded-lg transition-colors">
-                    <i class="fa-solid fa-shopping-cart"></i>
-                    {% if request.user.cart.item_count > 0 or request.session.session_key and request.session.session_key|get_cart_item_count > 0 %}
-                      <span class="absolute -top-1 -right-1 bg-orange-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
-                        {% if request.user.is_authenticated %}
-                          {{ request.user.cart.item_count }}
-                        {% else %}
-                          {{ request.session.session_key|get_cart_item_count }}
-                        {% endif %}
-                      </span>
-                    {% endif %}
-                  </a>
-                  <a href="{% url 'user_invitations' %}"
-                     class="relative flex items-center justify-center w-9 h-9 hover:bg-teal-700/80 rounded-lg transition-colors">
-                    <i class="fas fa-bell"></i>
-                    {% if pending_invites_count %}
-                      <span class="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-red-600 flex items-center justify-center text-white text-xs">
-                        {{ pending_invites_count }}
-                      </span>
+              </div>
+            </div>
+          </div>
+          <!-- Right actions -->
+          <div class="flex-1 flex justify-end items-center gap-3 pl-6">
+            <!-- Search bar -->
+            <div class="relative hidden xl:inline-block w-52 flex-shrink-0 group/search">
+              <form action="{% url 'course_search' %}" method="get" class="m-0">
+                <input type="text"
+                       name="q"
+                       placeholder="What do you want to learn?"
+                       class="rounded-full w-full bg-white/95 dark:bg-gray-700/95 text-gray-900 dark:text-gray-100 px-3 py-1.5 pr-9 text-sm focus:outline-none focus:ring-2 focus:ring-white/50 placeholder:text-gray-500 dark:placeholder:text-gray-400" />
+                <button type="submit"
+                        class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-300 transition-colors duration-200 group-hover/search:text-teal-600 dark:group-hover/search:text-teal-300">
+                  <i class="fas fa-search"></i>
+                </button>
+              </form>
+            </div>
+            <!-- Right actions: divider + icons -->
+            <div class="h-6 w-px bg-teal-500/40 hidden lg:block"></div>
+            <div class="flex items-center gap-1">
+              <a href="{% url 'cart_view' %}"
+                 class="relative flex items-center justify-center w-9 h-9 hover:bg-teal-700/80 rounded-lg transition-colors">
+                <i class="fa-solid fa-shopping-cart"></i>
+                {% if request.user.cart.item_count > 0 or request.session.session_key and request.session.session_key|get_cart_item_count > 0 %}
+                  <span class="absolute -top-1 -right-1 bg-orange-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
+                    {% if request.user.is_authenticated %}
+                      {{ request.user.cart.item_count }}
+                    {% else %}
+                      {{ request.session.session_key|get_cart_item_count }}
                     {% endif %}
+                  </span>
+                {% endif %}
+              </a>
+              <a href="{% url 'user_invitations' %}"
+                 class="relative flex items-center justify-center w-9 h-9 hover:bg-teal-700/80 rounded-lg transition-colors">
+                <i class="fas fa-bell"></i>
+                {% if pending_invites_count %}
+                  <span class="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-red-600 flex items-center justify-center text-white text-xs">
+                    {{ pending_invites_count }}
+                  </span>
+                {% endif %}
+              </a>
+              <!-- More dropdown: Messages, Language, Dark mode -->
+              <div class="relative">
+                <button class="focus:outline-none flex items-center justify-center w-9 h-9 hover:bg-teal-700/80 rounded-lg transition-colors"
+                        onclick="toggleMoreDropdown()"
+                        aria-label="More options"
+                        title="More options">
+                  <i class="fas fa-ellipsis-v"></i>
+                </button>
+                <div id="more-dropdown"
+                     class="hidden absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 shadow-lg rounded-lg py-2 z-50 border border-gray-100 dark:border-gray-700">
+                  <a href="{% url 'inbox' %}"
+                     class="flex items-center gap-2 px-4 py-2.5 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
+                    <i class="fas fa-comments w-5 text-teal-500"></i>
+                    <span>Messages</span>
                   </a>
-                  <!-- More dropdown: Messages, Language, Dark mode -->
+                  <div class="border-t border-gray-200 dark:border-gray-600 my-1"></div>
+                  <!-- Language: expandable sub-dropdown -->
                   <div class="relative">
-                    <button class="focus:outline-none flex items-center justify-center w-9 h-9 hover:bg-teal-700/80 rounded-lg transition-colors"
-                            onclick="toggleMoreDropdown()"
-                            aria-label="More options"
-                            title="More options">
-                      <i class="fas fa-ellipsis-v"></i>
-                    </button>
-                    <div id="more-dropdown"
-                         class="hidden absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 shadow-lg rounded-lg py-2 z-50 border border-gray-100 dark:border-gray-700">
-                      <a href="{% url 'inbox' %}"
-                         class="flex items-center gap-2 px-4 py-2.5 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
-                        <i class="fas fa-comments w-5 text-teal-500"></i>
-                        <span>Messages</span>
-                      </a>
-                      <div class="border-t border-gray-200 dark:border-gray-600 my-1"></div>
-                      <!-- Language: expandable sub-dropdown -->
-                      <div class="relative">
-                        <button type="button"
-                                onclick="toggleLanguageSubdropdown()"
-                                class="w-full text-left flex items-center justify-between gap-2 px-4 py-2.5 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
-                          <div class="flex items-center gap-2">
-                            <i class="fas fa-globe w-5 text-teal-500"></i>
-                            <span>Language</span>
-                          </div>
-                          <i id="language-chevron"
-                             class="fas fa-chevron-down text-xs text-gray-500 transition-transform duration-200"></i>
-                        </button>
-                        <div id="language-subdropdown"
-                             class="hidden pl-4 mt-1 border-l-2 border-teal-200 dark:border-teal-700 ml-4">
-                          <form action="{% url 'set_language' %}" method="post" class="m-0">
-                            {% csrf_token %}
-                            <input type="hidden" name="next" value="{{ request.get_full_path }}" />
-                            <button type="submit"
-                                    name="language"
-                                    value="en"
-                                    class="w-full text-left px-3 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">
-                              English
-                            </button>
-                            <button type="submit"
-                                    name="language"
-                                    value="es"
-                                    class="w-full text-left px-3 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">
-                              Spanish
-                            </button>
-                            <button type="submit"
-                                    name="language"
-                                    value="fr"
-                                    class="w-full text-left px-3 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">
-                              French
-                            </button>
-                            <button type="submit"
-                                    name="language"
-                                    value="de"
-                                    class="w-full text-left px-3 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">
-                              German
-                            </button>
-                            <button type="submit"
-                                    name="language"
-                                    value="zh-hans"
-                                    class="w-full text-left px-3 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">
-                              Chinese
-                            </button>
-                          </form>
-                        </div>
+                    <button type="button"
+                            onclick="toggleLanguageSubdropdown()"
+                            class="w-full text-left flex items-center justify-between gap-2 px-4 py-2.5 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
+                      <div class="flex items-center gap-2">
+                        <i class="fas fa-globe w-5 text-teal-500"></i>
+                        <span>Language</span>
                       </div>
-                      <div class="border-t border-gray-200 dark:border-gray-600 my-1"></div>
-                      <button type="button"
-                              onclick="toggleDarkMode(); document.getElementById('more-dropdown').classList.add('hidden');"
-                              class="w-full text-left flex items-center gap-2 px-4 py-2.5 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
-                        <i id="darkModeIcon" class="fas fa-moon w-5 text-teal-500"></i>
-                        <span id="darkModeLabel">Dark mode</span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-                <!-- User / Auth -->
-                <div class="h-6 w-px bg-teal-500/40 hidden lg:block"></div>
-                {% if user.is_authenticated %}
-                  <div class="relative flex-shrink-0">
-                    <button onclick="toggleUserDropdown()"
-                            class="flex items-center gap-2 focus:outline-none p-1.5 rounded-lg hover:bg-teal-700/80 transition-colors">
-                      {% if user.profile.custom_avatar %}
-                        <div class="w-12 h-12 p-1.5 transform hover:scale-105 transition-transform duration-200">
-                          <div class="w-full h-full overflow-hidden rounded-full flex items-center justify-center">
-                            {{ user.profile.custom_avatar.svg|safe }}
-                          </div>
-                        </div>
-                      {% elif user.profile.avatar %}
-                        <img src="{{ user.profile.avatar.url }}"
-                             alt="User Avatar"
-                             class="h-8 w-8 rounded-full object-cover border-2 border-white"
-                             height="32"
-                             width="32" />
-                      {% else %}
-                        <div class="h-8 w-8 rounded-full bg-orange-500 flex items-center justify-center text-white border-2 border-white">
-                          {{ user.first_name|first|default:user.username|first|upper }}
-                        </div>
-                      {% endif %}
-                      <span class="text-white text-sm font-medium hidden lg:block truncate max-w-[80px]">{{ user.username }}</span>
-                      <i class="fas fa-chevron-down text-white text-xs"></i>
+                      <i id="language-chevron"
+                         class="fas fa-chevron-down text-xs text-gray-500 transition-transform duration-200"></i>
                     </button>
-                    <!-- User Dropdown Menu -->
-                    <div id="user-dropdown"
-                         class="hidden absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-100 dark:border-gray-700">
-                      <div class="px-4 py-2 text-sm text-gray-700 dark:text-gray-200 border-b border-gray-200 dark:border-gray-700">
-                        <div class="font-semibold truncate" title="{{ user.username }}">{{ user.username }}</div>
-                        <div class="text-sm text-gray-500 dark:text-gray-400 truncate"
-                             title="{{ user.email }}">{{ user.email }}</div>
-                      </div>
-                      <a href="{% url 'profile' %}"
-                         class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
-                        <i class="fas fa-user-edit mr-2"></i> Edit Profile
-                      </a>
-                      <a href="{% url 'create_course' %}"
-                         class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
-                        <i class="fas fa-plus-circle mr-2"></i> Create Course
-                      </a>
-                      {% if user.is_superuser %}
-                        <a href="{% url 'admin:index' %}"
-                           class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
-                          <i class="fas fa-cog mr-2"></i> Admin Panel
-                        </a>
-                      {% endif %}
-                      <a href="{% url 'messaging_dashboard' %}"
-                         title="Messages"
-                         class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
-                        <i class="fas fa-comments mr-2 text-xl"></i>Messages
-                      </a>
-                      <!-- Add the Notification Preferences link here -->
-                      <a href="{% url 'notification_preferences' %}"
-                         class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
-                        <i class="fas fa-bell mr-2"></i> Notification Preferences
-                      </a>
-                      <a href="{% url 'teacher_dashboard' %}"
-                         class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
-                        <i class="fas fa-chalkboard-teacher mr-2"></i> Teacher Dashboard
-                      </a>
-                      <a href="{% url 'student_dashboard' %}"
-                         class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
-                        <i class="fas fa-graduation-cap mr-2"></i> Student Dashboard
-                      </a>
-                      <a href="{% url 'progress_visualization' %}"
-                         class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
-                        <i class="fas fa-chart-line mr-2"></i> Progress Chart
-                      </a>
-                      <form method="post" action="{% url 'account_logout' %}" class="block">
+                    <div id="language-subdropdown"
+                         class="hidden pl-4 mt-1 border-l-2 border-teal-200 dark:border-teal-700 ml-4">
+                      <form action="{% url 'set_language' %}" method="post" class="m-0">
                         {% csrf_token %}
+                        <input type="hidden" name="next" value="{{ request.get_full_path }}" />
+                        <button type="submit"
+                                name="language"
+                                value="en"
+                                class="w-full text-left px-3 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">
+                          English
+                        </button>
+                        <button type="submit"
+                                name="language"
+                                value="es"
+                                class="w-full text-left px-3 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">
+                          Spanish
+                        </button>
                         <button type="submit"
-                                class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
-                          <i class="fas fa-sign-out-alt mr-2"></i> Logout
+                                name="language"
+                                value="fr"
+                                class="w-full text-left px-3 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">
+                          French
+                        </button>
+                        <button type="submit"
+                                name="language"
+                                value="de"
+                                class="w-full text-left px-3 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">
+                          German
+                        </button>
+                        <button type="submit"
+                                name="language"
+                                value="zh-hans"
+                                class="w-full text-left px-3 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">
+                          Chinese
                         </button>
                       </form>
                     </div>
                   </div>
-                {% else %}
-                  <div class="flex items-center gap-4">
-                    <a href="{% url 'account_login' %}"
-                       class="px-5 py-2.5 rounded-lg hover:bg-teal-700/80 transition-colors text-base font-semibold">
-                      Login
-                    </a>
-                    <a href="{% url 'account_signup' %}"
-                       class="px-5 py-2.5 rounded-lg bg-orange-500 hover:bg-orange-600 text-white text-base font-semibold whitespace-nowrap transition-colors">
-                      Sign up
-                    </a>
-                  </div>
-                {% endif %}
+                  <div class="border-t border-gray-200 dark:border-gray-600 my-1"></div>
+                  <button type="button"
+                          onclick="toggleDarkMode(); document.getElementById('more-dropdown').classList.add('hidden');"
+                          class="w-full text-left flex items-center gap-2 px-4 py-2.5 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
+                    <i id="darkModeIcon" class="fas fa-moon w-5 text-teal-500"></i>
+                    <span id="darkModeLabel">Dark mode</span>
+                  </button>
+                </div>
               </div>
-            </nav>
-            <!-- Mobile Menu (hidden by default) -->
-            <div id="mobile-menu"
-                 class="fixed inset-0 z-50 flex items-end sm:items-stretch sm:justify-end opacity-0 pointer-events-none transition-opacity duration-300 ease-out">
-              <div class="absolute inset-0 bg-black/50"
-                   onclick="toggleMobileMenu()"
-                   aria-hidden="true"></div>
-              <div id="mobile-menu-panel"
-                   class="absolute right-0 top-0 h-full w-72 max-w-[85vw] bg-white dark:bg-gray-800 shadow-2xl overflow-y-auto mobile-menu-content translate-x-full transition-transform duration-300 ease-out">
-                <!-- Close button -->
-                <button class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-                        onclick="toggleMobileMenu()">
-                  <i class="fas fa-times text-xl"></i>
-                </button>
-                <!-- Mobile menu content -->
-                <div class="pt-16 px-4 pb-8">
-                  <!-- Search bar -->
-                  <div class="relative mb-6">
-                    <form action="{% url 'course_search' %}" method="get" class="m-0">
-                      <input type="text"
-                             name="q"
-                             placeholder="What do you want to learn?"
-                             class="w-full rounded-full bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-teal-300 dark:focus:ring-teal-700" />
-                      <button type="submit"
-                              class="absolute right-3 top-2.5 text-gray-500 dark:text-gray-400">
-                        <i class="fas fa-search"></i>
-                      </button>
-                    </form>
-                  </div>
-                  <!-- Mobile Navigation Menu with Accordions -->
-                  <div class="space-y-4">
-                    <!-- LEARN Section -->
-                    <div class="border-b border-gray-200 dark:border-gray-700 pb-4">
-                      <div class="flex items-center justify-between py-2 cursor-pointer"
-                           onclick="toggleAccordion('learn-accordion')">
-                        <span class="text-gray-800 dark:text-gray-200 font-semibold">LEARN</span>
-                        <i id="learn-accordion-icon"
-                           class="fas fa-chevron-down text-gray-500 dark:text-gray-400 transition-transform duration-200"></i>
-                      </div>
-                      <div id="learn-accordion" class="hidden mt-2 ml-2 space-y-2">
-                        <a href="{% url 'classes_map' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-map-marker-alt mr-2 text-teal-500"></i>
-                          <span>Classes Near Me</span>
-                        </a>
-                        <a href="{% url 'course_search' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-book-open mr-2 text-teal-500"></i>
-                          <span>Courses</span>
-                        </a>
-                        <a href="{% url 'subjects' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-list-check mr-2 text-teal-500"></i>
-                          <span>Subjects</span>
-                        </a>
-                        <a href="{% url 'quiz_list' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-question-circle mr-2 text-teal-500"></i>
-                          <span>Quizzes</span>
-                        </a>
-                        <a href="{% url 'educational_videos_list' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-video mr-2 text-teal-500"></i>
-                          <span>Videos</span>
-                        </a>
-                        <a href="{% url 'challenge_list' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-trophy mr-2 text-teal-500"></i>
-                          <span>Challenges</span>
-                        </a>
-                        <a href="{% url 'graphing_calculator' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-calculator mr-2 text-teal-500"></i>
-                          <span>Graphing Calculator</span>
-                        </a>
-                        <a href="{% url 'whiteboard' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-palette mr-2 text-teal-500"></i>
-                          <span>Whiteboard</span>
-                        </a>
-                        <a href="{% url 'all_study_groups' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-users mr-2 text-teal-500"></i>
-                          <span>Study Groups</span>
-                        </a>
-                      </div>
-                    </div>
-                    <!-- COMMUNITY Section -->
-                    <div class="border-b border-gray-200 dark:border-gray-700 pb-4">
-                      <div class="flex items-center justify-between py-2 cursor-pointer"
-                           onclick="toggleAccordion('community-accordion')">
-                        <span class="text-gray-800 dark:text-gray-200 font-semibold">COMMUNITY</span>
-                        <i id="community-accordion-icon"
-                           class="fas fa-chevron-down text-gray-500 dark:text-gray-400 transition-transform duration-200"></i>
-                      </div>
-                      <div id="community-accordion" class="hidden mt-2 ml-2 space-y-2">
-                        <a href="{% url 'waiting_rooms' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-chalkboard-teacher mr-2 text-teal-500"></i>
-                          <span>Learning Requests</span>
-                        </a>
-                        <a href="{% url 'surveys' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md ">
-                          <i class="fas fa-square-poll-vertical mr-2 text-teal-500"></i>
-                          <span>Learning Requests</span>
-                        </a>
-                        <a href="{% url 'waiting_room_list' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-door-open mr-2 text-teal-500"></i>
-                          <span>Waiting Rooms</span>
-                        </a>
-                        <a href="{% url 'forum_categories' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-comments mr-2 text-teal-500"></i>
-                          <span>Forum</span>
-                        </a>
-                        <a href="{% url 'blog_list' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-blog mr-2 text-teal-500"></i>
-                          <span>Blog</span>
-                        </a>
-                        <a href="{% url 'meme_list' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-face-smile mr-2 text-teal-500"></i>
-                          <span>Edu Memes</span>
-                        </a>
-                        <a href="{% url 'features' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-lightbulb mr-2 text-teal-500"></i>
-                          <span>Features</span>
-                        </a>
-                        <a href="{% url 'success_story_list' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-star mr-2 text-teal-500"></i>
-                          <span>Success Stories</span>
-                        </a>
-                        <a href="{% url 'team_goals' %}?view=teams"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-users-cog mr-2 text-teal-500"></i>
-                          <span>Teams</span>
-                        </a>
-                        <a href="{% url 'video_request_list' %}?view=teams"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fa fa-play-circle mr-2 text-teal-500"></i>
-                          <span>Video Requests</span>
-                        </a>
-                      </div>
-                    </div>
-                    <!-- RESOURCES Section -->
-                    <div class="border-b border-gray-200 dark:border-gray-700 pb-4">
-                      <div class="flex items-center justify-between py-2 cursor-pointer"
-                           onclick="toggleAccordion('resources-accordion')">
-                        <span class="text-gray-800 dark:text-gray-200 font-semibold">RESOURCES</span>
-                        <i id="resources-accordion-icon"
-                           class="fas fa-chevron-down text-gray-500 dark:text-gray-400 transition-transform duration-200"></i>
-                      </div>
-                      <div id="resources-accordion" class="hidden mt-2 ml-2 space-y-2">
-                        <a href="{% url 'virtual_lab:virtual_lab_home' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-flask mr-2 text-teal-500"></i>
-                          <span>Virtual Lab</span>
-                        </a>
-                        <a href="{% url 'progress_visualization' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-chart-line mr-2 text-teal-500"></i>
-                          <span>Trackers</span>
-                        </a>
-                        <a href="{% url 'gradeable_link_list' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-link mr-2 text-teal-500"></i>
-                          <span>Grade Links</span>
-                        </a>
-                        <a href="{% url 'goods_listing' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-store mr-2 text-teal-500"></i>
-                          <span>Products</span>
-                        </a>
-                        <a href="{% url 'goods_listing' %}?type=storefront"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-shopping-basket mr-2 text-teal-500"></i>
-                          <span>Storefronts</span>
-                        </a>
-                        <a href="https://github.com/alphaonelabs/alphaonelabs-education-website/wiki/GSOC-2026-Ideas"
-                           target="_blank"
-                           rel="noopener"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-code mr-2 text-teal-500"></i>
-                          <span>GSOC'26</span>
-                        </a>
+            </div>
+            <!-- User / Auth -->
+            <div class="h-6 w-px bg-teal-500/40 hidden lg:block"></div>
+            {% if user.is_authenticated %}
+              <div class="relative flex-shrink-0">
+                <button onclick="toggleUserDropdown()"
+                        class="flex items-center gap-2 focus:outline-none p-1.5 rounded-lg hover:bg-teal-700/80 transition-colors">
+                  {% if user.profile.custom_avatar %}
+                    <div class="w-12 h-12 p-1.5 transform hover:scale-105 transition-transform duration-200">
+                      <div class="w-full h-full overflow-hidden rounded-full flex items-center justify-center">
+                        {{ user.profile.custom_avatar.svg|safe }}
                       </div>
                     </div>
-                    <!-- ABOUT Section -->
-                    <div class="border-b border-gray-200 dark:border-gray-700 pb-4">
-                      <div class="flex items-center justify-between py-2 cursor-pointer"
-                           onclick="toggleAccordion('about-accordion')">
-                        <span class="text-gray-800 dark:text-gray-200 font-semibold">ABOUT</span>
-                        <i id="about-accordion-icon"
-                           class="fas fa-chevron-down text-gray-500 dark:text-gray-400 transition-transform duration-200"></i>
-                      </div>
-                      <div id="about-accordion" class="hidden mt-2 ml-2 space-y-2">
-                        <a href="{% url 'about' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-circle-info mr-2 text-teal-500"></i>
-                          <span>Our Mission</span>
-                        </a>
-                        <a href="{% url 'terms' %}#general"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-file-contract mr-2 text-teal-500"></i>
-                          <span>Terms</span>
-                        </a>
-                        <a href="{% url 'system_status' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-chart-line mr-2 text-teal-500"></i>
-                          <span>Status</span>
-                        </a>
-                        <a href="{% url 'feedback' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-comment-dots mr-2 text-teal-500"></i>
-                          <span>Feedback</span>
-                        </a>
-                        <a href="{% url 'donate' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-hand-holding-heart mr-2 text-teal-500"></i>
-                          <span>Donate</span>
-                        </a>
-                      </div>
+                  {% elif user.profile.avatar %}
+                    <img src="{{ user.profile.avatar.url }}"
+                         alt="User Avatar"
+                         class="h-8 w-8 rounded-full object-cover border-2 border-white"
+                         height="32"
+                         width="32" />
+                  {% else %}
+                    <div class="h-8 w-8 rounded-full bg-orange-500 flex items-center justify-center text-white border-2 border-white">
+                      {{ user.first_name|first|default:user.username|first|upper }}
                     </div>
-                    <!-- Cart Link -->
-                    <a href="{% url 'cart_view' %}"
-                       class="flex items-center justify-between py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">
-                      <div class="flex items-center">
-                        <i class="fa-solid fa-shopping-cart mr-2 text-teal-500"></i>
-                        <span>Cart</span>
-                      </div>
-                      {% if request.user.cart.item_count > 0 or request.session.session_key and request.session.session_key|get_cart_item_count > 0 %}
-                        <span class="bg-orange-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
-                          {% if request.user.is_authenticated %}
-                            {{ request.user.cart.item_count }}
-                          {% else %}
-                            {{ request.session.session_key|get_cart_item_count }}
-                          {% endif %}
-                        </span>
-                      {% endif %}
+                  {% endif %}
+                  <span class="text-white text-sm font-medium hidden lg:block truncate max-w-[80px]">{{ user.username }}</span>
+                  <i class="fas fa-chevron-down text-white text-xs"></i>
+                </button>
+                <!-- User Dropdown Menu -->
+                <div id="user-dropdown"
+                     class="hidden absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-100 dark:border-gray-700">
+                  <div class="px-4 py-2 text-sm text-gray-700 dark:text-gray-200 border-b border-gray-200 dark:border-gray-700">
+                    <div class="font-semibold truncate" title="{{ user.username }}">{{ user.username }}</div>
+                    <div class="text-sm text-gray-500 dark:text-gray-400 truncate"
+                         title="{{ user.email }}">{{ user.email }}</div>
+                  </div>
+                  <a href="{% url 'profile' %}"
+                     class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
+                    <i class="fas fa-user-edit mr-2"></i> Edit Profile
+                  </a>
+                  <a href="{% url 'create_course' %}"
+                     class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
+                    <i class="fas fa-plus-circle mr-2"></i> Create Course
+                  </a>
+                  {% if user.is_superuser %}
+                    <a href="{% url 'admin:index' %}"
+                       class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
+                      <i class="fas fa-cog mr-2"></i> Admin Panel
                     </a>
-                    <!-- User Account Section -->
-                    {% if user.is_authenticated %}
-                      <div class="border-t border-gray-200 dark:border-gray-700 pt-4 mt-4">
-                        <div class="px-3 py-2 text-sm font-semibold text-gray-700 dark:text-gray-200">Your Account</div>
-                        <a href="{% url 'profile' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-user-circle mr-2 text-teal-500"></i>
-                          <span>Profile</span>
-                        </a>
-                        <a href="{% url 'profile' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fas fa-user-edit mr-2 text-teal-500"></i>
-                          <span>Edit Profile</span>
-                        </a>
-                        {% if request.user.is_teacher %}
-                          <a href="{% url 'teacher_dashboard' %}"
-                             class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                            <i class="fas fa-chalkboard-teacher mr-2 text-teal-500"></i>
-                            <span>Teacher Dashboard</span>
-                          </a>
-                        {% endif %}
-                        {% if request.user.enrollments.exists %}
-                          <a href="{% url 'student_dashboard' %}"
-                             class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                            <i class="fas fa-graduation-cap mr-2 text-teal-500"></i>
-                            <span>Student Dashboard</span>
-                          </a>
-                        {% endif %}
-                        {% if request.user.is_teacher %}
-                          <a href="{% url 'create_course' %}"
-                             class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                            <i class="fas fa-plus-circle mr-2 text-teal-500"></i>
-                            <span>Create Course</span>
-                          </a>
-                        {% endif %}
-                        {% if user.is_superuser %}
-                          <a href="{% url 'admin:index' %}"
-                             class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                            <i class="fas fa-cog mr-2 text-teal-500"></i>
-                            <span>Admin Panel</span>
-                          </a>
-                          <a href="{% url 'admin:index' %}/dashboard"
-                             class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                            <i class="fas fa-cog mr-2 text-teal-500"></i>
-                            <span>Admin Dashboard</span>
-                          </a>
-                          <a href="{% url 'system_dashboard' %}"
-                             class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                            <i class="fas fa-server mr-2 text-teal-500"></i>
-                            <span>System Dashboard</span>
-                          </a>
-                        {% endif %}
-                        <form method="post" action="{% url 'account_logout' %}" class="block mt-2">
-                          {% csrf_token %}
-                          <button type="submit"
-                                  class="w-full flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                            <i class="fas fa-sign-out-alt mr-2 text-teal-500"></i>
-                            <span>Logout</span>
-                          </button>
-                        </form>
-                      </div>
-                    {% else %}
-                      <div class="flex flex-col space-y-2 mt-4 border-t border-gray-200 dark:border-gray-700 pt-4">
-                        <a href="{% url 'account_login' %}"
-                           class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                          <i class="fa-solid fa-right-to-bracket mr-2 text-teal-500"></i>
-                          <span>Login</span>
-                        </a>
-                        <a href="{% url 'account_signup' %}"
-                           class="flex items-center py-2 px-3 bg-orange-500 hover:bg-orange-600 text-white rounded-md">
-                          <i class="fa-solid fa-user-plus mr-2"></i>
-                          <span>Signup</span>
-                        </a>
-                      </div>
-                    {% endif %}
-                    <!-- Dark Mode Toggle -->
-                    <button onclick="toggleDarkMode()"
-                            class="w-full flex items-center py-2 px-3 mt-4 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
-                      <i id="darkModeIconMobile" class="fas fa-moon mr-2 text-teal-500"></i>
-                      <span>Toggle Dark Mode</span>
+                  {% endif %}
+                  <a href="{% url 'messaging_dashboard' %}"
+                     title="Messages"
+                     class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
+                    <i class="fas fa-comments mr-2 text-xl"></i>Messages
+                  </a>
+                  <!-- Add the Notification Preferences link here -->
+                  <a href="{% url 'notification_preferences' %}"
+                     class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
+                    <i class="fas fa-bell mr-2"></i> Notification Preferences
+                  </a>
+                  <a href="{% url 'teacher_dashboard' %}"
+                     class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
+                    <i class="fas fa-chalkboard-teacher mr-2"></i> Teacher Dashboard
+                  </a>
+                  <a href="{% url 'student_dashboard' %}"
+                     class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
+                    <i class="fas fa-graduation-cap mr-2"></i> Student Dashboard
+                  </a>
+                  <a href="{% url 'progress_visualization' %}"
+                     class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
+                    <i class="fas fa-chart-line mr-2"></i> Progress Chart
+                  </a>
+                  <form method="post" action="{% url 'account_logout' %}" class="block">
+                    {% csrf_token %}
+                    <button type="submit"
+                            class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
+                      <i class="fas fa-sign-out-alt mr-2"></i> Logout
                     </button>
-                  </div>
+                  </form>
                 </div>
               </div>
-            </div>
-          </div>
-        </header>
-        {% if messages %}
-          <div class="fixed left-1/2 transform -translate-x-1/2 top-20 z-50 w-full max-w-lg space-y-2">
-            {% for message in messages %}
-              <div class="flex items-center p-4 rounded-lg shadow-lg {% if message.tags == 'error' %}bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-200{% elif message.tags == 'success' %}bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-200{% elif message.tags == 'warning' %}bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-200{% else %}bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-200{% endif %}">
-                <div class="mr-3">
-                  {% if message.tags == 'error' %}
-                    <i class="fas fa-exclamation-circle"></i>
-                  {% elif message.tags == 'success' %}
-                    <i class="fas fa-check-circle"></i>
-                  {% elif message.tags == 'warning' %}
-                    <i class="fas fa-exclamation-triangle"></i>
-                  {% else %}
-                    <i class="fas fa-info-circle"></i>
-                  {% endif %}
-                </div>
-                <p class="flex-1">{{ message }}</p>
-                <button type="button" class="ml-auto" onclick="this.parentElement.remove()">
-                  <i class="fas fa-times"></i>
-                </button>
+            {% else %}
+              <div class="flex items-center gap-4">
+                <a href="{% url 'account_login' %}"
+                   class="px-5 py-2.5 rounded-lg hover:bg-teal-700/80 transition-colors text-base font-semibold">
+                  Login
+                </a>
+                <a href="{% url 'account_signup' %}"
+                   class="px-5 py-2.5 rounded-lg bg-orange-500 hover:bg-orange-600 text-white text-base font-semibold whitespace-nowrap transition-colors">
+                  Sign up
+                </a>
               </div>
-            {% endfor %}
+            {% endif %}
           </div>
-        {% endif %}
-        {% block extra_body %}
-          {% block content %}
-          {% endblock content %}
-        {% endblock extra_body %}
-        <!-- FOOTER -->
-        <footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 mt-auto">
-          <div class="max-w-[90rem] mx-auto px-4 md:px-6 py-12">
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
-              <!-- LEARNING Column -->
-              <div>
-                <h3 class="text-lg font-bold mb-4 text-gray-700 dark:text-gray-200">LEARNING</h3>
-                <ul class="space-y-2">
-                  <li>
+        </nav>
+        <!-- Mobile Menu (hidden by default) -->
+        <div id="mobile-menu"
+             class="fixed inset-0 z-50 flex items-end sm:items-stretch sm:justify-end opacity-0 pointer-events-none transition-opacity duration-300 ease-out">
+          <div class="absolute inset-0 bg-black/50"
+               onclick="toggleMobileMenu()"
+               aria-hidden="true"></div>
+          <div id="mobile-menu-panel"
+               class="absolute right-0 top-0 h-full w-72 max-w-[85vw] bg-white dark:bg-gray-800 shadow-2xl overflow-y-auto mobile-menu-content translate-x-full transition-transform duration-300 ease-out">
+            <!-- Close button -->
+            <button class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                    onclick="toggleMobileMenu()">
+              <i class="fas fa-times text-xl"></i>
+            </button>
+            <!-- Mobile menu content -->
+            <div class="pt-16 px-4 pb-8">
+              <!-- Search bar -->
+              <div class="relative mb-6">
+                <form action="{% url 'course_search' %}" method="get" class="m-0">
+                  <input type="text"
+                         name="q"
+                         placeholder="What do you want to learn?"
+                         class="w-full rounded-full bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-teal-300 dark:focus:ring-teal-700" />
+                  <button type="submit"
+                          class="absolute right-3 top-2.5 text-gray-500 dark:text-gray-400">
+                    <i class="fas fa-search"></i>
+                  </button>
+                </form>
+              </div>
+              <!-- Mobile Navigation Menu with Accordions -->
+              <div class="space-y-4">
+                <!-- LEARN Section -->
+                <div class="border-b border-gray-200 dark:border-gray-700 pb-4">
+                  <div class="flex items-center justify-between py-2 cursor-pointer"
+                       onclick="toggleAccordion('learn-accordion')">
+                    <span class="text-gray-800 dark:text-gray-200 font-semibold">LEARN</span>
+                    <i id="learn-accordion-icon"
+                       class="fas fa-chevron-down text-gray-500 dark:text-gray-400 transition-transform duration-200"></i>
+                  </div>
+                  <div id="learn-accordion" class="hidden mt-2 ml-2 space-y-2">
+                    <a href="{% url 'classes_map' %}"
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-map-marker-alt mr-2 text-teal-500"></i>
+                      <span>Classes Near Me</span>
+                    </a>
                     <a href="{% url 'course_search' %}"
-                       class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
-                      <i class="fas fa-book-open mr-2 text-teal-500 w-5 text-center"></i>Courses
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-book-open mr-2 text-teal-500"></i>
+                      <span>Courses</span>
                     </a>
-                  </li>
-                  <li>
                     <a href="{% url 'subjects' %}"
-                       class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
-                      <i class="fas fa-list-check mr-2 text-teal-500 w-5 text-center"></i>Subjects
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-list-check mr-2 text-teal-500"></i>
+                      <span>Subjects</span>
                     </a>
-                  </li>
-                  <li>
                     <a href="{% url 'quiz_list' %}"
-                       class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
-                      <i class="fas fa-question-circle mr-2 text-teal-500 w-5 text-center"></i>Quizzes
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-question-circle mr-2 text-teal-500"></i>
+                      <span>Quizzes</span>
                     </a>
-                  </li>
-                  <li>
                     <a href="{% url 'educational_videos_list' %}"
-                       class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
-                      <i class="fas fa-video mr-2 text-teal-500 w-5 text-center"></i>Videos
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-video mr-2 text-teal-500"></i>
+                      <span>Videos</span>
                     </a>
-                  </li>
-                  <li>
                     <a href="{% url 'challenge_list' %}"
-                       class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
-                      <i class="fas fa-trophy mr-2 text-teal-500 w-5 text-center"></i>Challenges
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-trophy mr-2 text-teal-500"></i>
+                      <span>Challenges</span>
+                    </a>
+                    <a href="{% url 'graphing_calculator' %}"
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-calculator mr-2 text-teal-500"></i>
+                      <span>Graphing Calculator</span>
+                    </a>
+                    <a href="{% url 'whiteboard' %}"
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-palette mr-2 text-teal-500"></i>
+                      <span>Whiteboard</span>
                     </a>
-                  </li>
-                  <li>
                     <a href="{% url 'all_study_groups' %}"
-                       class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
-                      <i class="fas fa-users mr-2 text-teal-500 w-5 text-center"></i>Study Groups
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-users mr-2 text-teal-500"></i>
+                      <span>Study Groups</span>
+                    </a>
+                  </div>
+                </div>
+                <!-- COMMUNITY Section -->
+                <div class="border-b border-gray-200 dark:border-gray-700 pb-4">
+                  <div class="flex items-center justify-between py-2 cursor-pointer"
+                       onclick="toggleAccordion('community-accordion')">
+                    <span class="text-gray-800 dark:text-gray-200 font-semibold">COMMUNITY</span>
+                    <i id="community-accordion-icon"
+                       class="fas fa-chevron-down text-gray-500 dark:text-gray-400 transition-transform duration-200"></i>
+                  </div>
+                  <div id="community-accordion" class="hidden mt-2 ml-2 space-y-2">
+                    <a href="{% url 'waiting_rooms' %}"
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-chalkboard-teacher mr-2 text-teal-500"></i>
+                      <span>Learning Requests</span>
+                    </a>
+                    <a href="{% url 'surveys' %}"
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md ">
+                      <i class="fas fa-square-poll-vertical mr-2 text-teal-500"></i>
+                      <span>Learning Requests</span>
+                    </a>
+                    <a href="{% url 'waiting_room_list' %}"
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-door-open mr-2 text-teal-500"></i>
+                      <span>Waiting Rooms</span>
                     </a>
-                  </li>
-                </ul>
-              </div>
-              <!-- COMMUNITY Column -->
-              <div>
-                <h3 class="text-lg font-bold mb-4 text-gray-700 dark:text-gray-200">COMMUNITY</h3>
-                <ul class="space-y-2">
-                  <li>
                     <a href="{% url 'forum_categories' %}"
-                       class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
-                      <i class="fas fa-comments mr-2 text-teal-500 w-5 text-center"></i>Forum
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-comments mr-2 text-teal-500"></i>
+                      <span>Forum</span>
                     </a>
-                  </li>
-                  <li>
                     <a href="{% url 'blog_list' %}"
-                       class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
-                      <i class="fas fa-blog mr-2 text-teal-500 w-5 text-center"></i>Blog
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-blog mr-2 text-teal-500"></i>
+                      <span>Blog</span>
+                    </a>
+                    <a href="{% url 'meme_list' %}"
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-face-smile mr-2 text-teal-500"></i>
+                      <span>Edu Memes</span>
                     </a>
-                  </li>
-                  <li>
                     <a href="{% url 'features' %}"
-                       class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
-                      <i class="fas fa-lightbulb mr-2 text-teal-500 w-5 text-center"></i>Features
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-lightbulb mr-2 text-teal-500"></i>
+                      <span>Features</span>
                     </a>
-                  </li>
-                  <li>
                     <a href="{% url 'success_story_list' %}"
-                       class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
-                      <i class="fas fa-star mr-2 text-teal-500 w-5 text-center"></i>Success Stories
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-star mr-2 text-teal-500"></i>
+                      <span>Success Stories</span>
                     </a>
-                  </li>
-                </ul>
-              </div>
-              <!-- RESOURCES & INFO Column -->
-              <div>
-                <h3 class="text-lg font-bold mb-4 text-gray-700 dark:text-gray-200">RESOURCES & INFO</h3>
-                <ul class="space-y-2">
-                  <li>
+                    <a href="{% url 'team_goals' %}?view=teams"
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-users-cog mr-2 text-teal-500"></i>
+                      <span>Teams</span>
+                    </a>
+                    <a href="{% url 'video_request_list' %}?view=teams"
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fa fa-play-circle mr-2 text-teal-500"></i>
+                      <span>Video Requests</span>
+                    </a>
+                  </div>
+                </div>
+                <!-- RESOURCES Section -->
+                <div class="border-b border-gray-200 dark:border-gray-700 pb-4">
+                  <div class="flex items-center justify-between py-2 cursor-pointer"
+                       onclick="toggleAccordion('resources-accordion')">
+                    <span class="text-gray-800 dark:text-gray-200 font-semibold">RESOURCES</span>
+                    <i id="resources-accordion-icon"
+                       class="fas fa-chevron-down text-gray-500 dark:text-gray-400 transition-transform duration-200"></i>
+                  </div>
+                  <div id="resources-accordion" class="hidden mt-2 ml-2 space-y-2">
                     <a href="{% url 'virtual_lab:virtual_lab_home' %}"
-                       class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
-                      <i class="fas fa-flask mr-2 text-teal-500 w-5 text-center"></i>Virtual Lab
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-flask mr-2 text-teal-500"></i>
+                      <span>Virtual Lab</span>
+                    </a>
+                    <a href="{% url 'progress_visualization' %}"
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-chart-line mr-2 text-teal-500"></i>
+                      <span>Trackers</span>
+                    </a>
+                    <a href="{% url 'gradeable_link_list' %}"
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-link mr-2 text-teal-500"></i>
+                      <span>Grade Links</span>
+                    </a>
+                    <a href="{% url 'goods_listing' %}"
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-store mr-2 text-teal-500"></i>
+                      <span>Products</span>
+                    </a>
+                    <a href="{% url 'goods_listing' %}?type=storefront"
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-shopping-basket mr-2 text-teal-500"></i>
+                      <span>Storefronts</span>
                     </a>
-                  </li>
-                  <li>
                     <a href="https://github.com/alphaonelabs/alphaonelabs-education-website/wiki/GSOC-2026-Ideas"
                        target="_blank"
                        rel="noopener"
-                       class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
-                      <i class="fas fa-code mr-2 text-teal-500 w-5 text-center"></i>GSOC'26
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-code mr-2 text-teal-500"></i>
+                      <span>GSOC'26</span>
+                    </a>
+                  </div>
+                </div>
+                <!-- ABOUT Section -->
+                <div class="border-b border-gray-200 dark:border-gray-700 pb-4">
+                  <div class="flex items-center justify-between py-2 cursor-pointer"
+                       onclick="toggleAccordion('about-accordion')">
+                    <span class="text-gray-800 dark:text-gray-200 font-semibold">ABOUT</span>
+                    <i id="about-accordion-icon"
+                       class="fas fa-chevron-down text-gray-500 dark:text-gray-400 transition-transform duration-200"></i>
+                  </div>
+                  <div id="about-accordion" class="hidden mt-2 ml-2 space-y-2">
+                    <a href="{% url 'about' %}"
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-circle-info mr-2 text-teal-500"></i>
+                      <span>Our Mission</span>
+                    </a>
+                    <a href="{% url 'terms' %}#general"
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-file-contract mr-2 text-teal-500"></i>
+                      <span>Terms</span>
                     </a>
-                  </li>
-                  <li>
                     <a href="{% url 'system_status' %}"
-                       class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
-                      <i class="fas fa-chart-line mr-2 text-teal-500 w-5 text-center"></i>Status
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-chart-line mr-2 text-teal-500"></i>
+                      <span>Status</span>
                     </a>
-                  </li>
-                  <li>
                     <a href="{% url 'feedback' %}"
-                       class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
-                      <i class="fas fa-comment-dots mr-2 text-teal-500 w-5 text-center"></i>Feedback
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-comment-dots mr-2 text-teal-500"></i>
+                      <span>Feedback</span>
                     </a>
-                  </li>
-                  <li>
-                    <a href="{% url 'terms' %}#general"
-                       class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
-                      <i class="fas fa-file-contract mr-2 text-teal-500 w-5 text-center"></i>Terms
+                    <a href="{% url 'donate' %}"
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-hand-holding-heart mr-2 text-teal-500"></i>
+                      <span>Donate</span>
                     </a>
-                  </li>
-                </ul>
-              </div>
-              <!-- SOCIAL LINKS Column -->
-              <div>
-                <h3 class="text-lg font-bold mb-4 text-gray-700 dark:text-gray-200">CONNECT WITH US</h3>
-                <div class="flex flex-wrap gap-4">
-                  <a href="https://twitter.com/alphaonelabs"
-                     target="_blank"
-                     rel="noopener"
-                     class="flex items-center justify-center h-10 w-10 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-teal-100 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-400 transition-colors">
-                    <img src="{% static 'images/x-logo.svg' %}"
-                         alt="X (Twitter) Logo"
-                         class="w-5 h-5 dark:invert"
-                         width="20"
-                         height="20" />
-                  </a>
-                  <a href="https://discord.gg/HJtuzTJN3h"
-                     target="_blank"
-                     rel="noopener"
-                     class="flex items-center justify-center h-10 w-10 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-teal-100 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-400 transition-colors">
-                    <i class="fab fa-discord text-xl"></i>
-                  </a>
-                  <a href="https://instagram.com/alphaonelabs1"
-                     target="_blank"
-                     rel="noopener"
-                     class="flex items-center justify-center h-10 w-10 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-teal-100 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-400 transition-colors">
-                    <i class="fab fa-instagram text-xl"></i>
-                  </a>
-                  <a href="https://facebook.com/alphaonelabs"
-                     target="_blank"
-                     rel="noopener"
-                     class="flex items-center justify-center h-10 w-10 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-teal-100 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-400 transition-colors">
-                    <i class="fab fa-facebook text-xl"></i>
-                  </a>
-                  <a href="https://youtube.com/alphaonelabs"
-                     target="_blank"
-                     rel="noopener"
-                     class="flex items-center justify-center h-10 w-10 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-teal-100 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-400 transition-colors">
-                    <i class="fab fa-youtube text-xl"></i>
-                  </a>
-                  <a href="https://github.com/AlphaOneLabs"
-                     target="_blank"
-                     rel="noopener"
-                     class="flex items-center justify-center h-10 w-10 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-teal-100 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-400 transition-colors">
-                    <i class="fab fa-github text-xl"></i>
-                  </a>
-                  <a href="https://join.slack.com/t/alphaonelabs/shared_invite/zt-3glzypiib-8Lq~UZwWvcCFAjeG5uwcPg"
-                     target="_blank"
-                     rel="noopener"
-                     class="flex items-center justify-center h-10 w-10 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-teal-100 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-400 transition-colors">
-                    <i class="fab fa-slack text-xl"></i>
-                  </a>
-                </div>
-                <div class="mt-6">
-                  <h4 class="font-medium text-sm mb-2 text-gray-700 dark:text-gray-300">SUBSCRIBE TO NEWSLETTER</h4>
-                  <form class="flex">
-                    <input type="email"
-                           placeholder="Your email"
-                           class="flex-1 rounded-l-lg bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 px-3 py-2 text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-teal-300 dark:focus:ring-teal-700" />
-                    <button type="submit"
-                            class="rounded-r-lg bg-teal-500 px-4 text-white hover:bg-teal-600 transition-colors">
-                      <i class="fas fa-paper-plane"></i>
-                    </button>
-                  </form>
+                  </div>
                 </div>
+                <!-- Cart Link -->
+                <a href="{% url 'cart_view' %}"
+                   class="flex items-center justify-between py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">
+                  <div class="flex items-center">
+                    <i class="fa-solid fa-shopping-cart mr-2 text-teal-500"></i>
+                    <span>Cart</span>
+                  </div>
+                  {% if request.user.cart.item_count > 0 or request.session.session_key and request.session.session_key|get_cart_item_count > 0 %}
+                    <span class="bg-orange-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
+                      {% if request.user.is_authenticated %}
+                        {{ request.user.cart.item_count }}
+                      {% else %}
+                        {{ request.session.session_key|get_cart_item_count }}
+                      {% endif %}
+                    </span>
+                  {% endif %}
+                </a>
+                <!-- User Account Section -->
+                {% if user.is_authenticated %}
+                  <div class="border-t border-gray-200 dark:border-gray-700 pt-4 mt-4">
+                    <div class="px-3 py-2 text-sm font-semibold text-gray-700 dark:text-gray-200">Your Account</div>
+                    <a href="{% url 'profile' %}"
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-user-circle mr-2 text-teal-500"></i>
+                      <span>Profile</span>
+                    </a>
+                    <a href="{% url 'profile' %}"
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fas fa-user-edit mr-2 text-teal-500"></i>
+                      <span>Edit Profile</span>
+                    </a>
+                    {% if request.user.is_teacher %}
+                      <a href="{% url 'teacher_dashboard' %}"
+                         class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                        <i class="fas fa-chalkboard-teacher mr-2 text-teal-500"></i>
+                        <span>Teacher Dashboard</span>
+                      </a>
+                    {% endif %}
+                    {% if request.user.enrollments.exists %}
+                      <a href="{% url 'student_dashboard' %}"
+                         class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                        <i class="fas fa-graduation-cap mr-2 text-teal-500"></i>
+                        <span>Student Dashboard</span>
+                      </a>
+                    {% endif %}
+                    {% if request.user.is_teacher %}
+                      <a href="{% url 'create_course' %}"
+                         class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                        <i class="fas fa-plus-circle mr-2 text-teal-500"></i>
+                        <span>Create Course</span>
+                      </a>
+                    {% endif %}
+                    {% if user.is_superuser %}
+                      <a href="{% url 'admin:index' %}"
+                         class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                        <i class="fas fa-cog mr-2 text-teal-500"></i>
+                        <span>Admin Panel</span>
+                      </a>
+                      <a href="{% url 'admin:index' %}/dashboard"
+                         class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                        <i class="fas fa-cog mr-2 text-teal-500"></i>
+                        <span>Admin Dashboard</span>
+                      </a>
+                      <a href="{% url 'system_dashboard' %}"
+                         class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                        <i class="fas fa-server mr-2 text-teal-500"></i>
+                        <span>System Dashboard</span>
+                      </a>
+                    {% endif %}
+                    <form method="post" action="{% url 'account_logout' %}" class="block mt-2">
+                      {% csrf_token %}
+                      <button type="submit"
+                              class="w-full flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                        <i class="fas fa-sign-out-alt mr-2 text-teal-500"></i>
+                        <span>Logout</span>
+                      </button>
+                    </form>
+                  </div>
+                {% else %}
+                  <div class="flex flex-col space-y-2 mt-4 border-t border-gray-200 dark:border-gray-700 pt-4">
+                    <a href="{% url 'account_login' %}"
+                       class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                      <i class="fa-solid fa-right-to-bracket mr-2 text-teal-500"></i>
+                      <span>Login</span>
+                    </a>
+                    <a href="{% url 'account_signup' %}"
+                       class="flex items-center py-2 px-3 bg-orange-500 hover:bg-orange-600 text-white rounded-md">
+                      <i class="fa-solid fa-user-plus mr-2"></i>
+                      <span>Signup</span>
+                    </a>
+                  </div>
+                {% endif %}
+                <!-- Dark Mode Toggle -->
+                <button onclick="toggleDarkMode()"
+                        class="w-full flex items-center py-2 px-3 mt-4 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                  <i id="darkModeIconMobile" class="fas fa-moon mr-2 text-teal-500"></i>
+                  <span>Toggle Dark Mode</span>
+                </button>
               </div>
             </div>
-            <!-- Copyright and Extra Links -->
-            <div class="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
-              <div class="flex flex-col md:flex-row justify-between items-center gap-4">
-                <div class="text-sm text-gray-500 dark:text-gray-400">
-                  <p>© {% now "Y" %} Alpha One Labs. All rights reserved.</p>
-                  <p class="mt-1">Last updated: {{ last_modified|date:"m/d/Y h:ia" }}</p>
-                </div>
-                <div class="flex space-x-4 text-sm text-gray-500 dark:text-gray-400">
-                  <a href="{% url 'about' %}"
-                     class="hover:text-teal-600 dark:hover:text-teal-400">About Us</a>
-                  <a href="{% url 'terms' %}#terms"
-                     class="hover:text-teal-600 dark:hover:text-teal-400">Terms & Conditions</a>
-                  <a href="{% url 'terms' %}#privacy"
-                     class="hover:text-teal-600 dark:hover:text-teal-400">Privacy Policy</a>
-                  <a href="{% url 'terms' %}#cookies"
-                     class="hover:text-teal-600 dark:hover:text-teal-400">Cookie Policy</a>
-                </div>
-              </div>
+          </div>
+        </div>
+      </div>
+    </header>
+    {% if messages %}
+      <div class="fixed left-1/2 transform -translate-x-1/2 top-20 z-50 w-full max-w-lg space-y-2">
+        {% for message in messages %}
+          <div class="flex items-center p-4 rounded-lg shadow-lg {% if message.tags == 'error' %}bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-200{% elif message.tags == 'success' %}bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-200{% elif message.tags == 'warning' %}bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-200{% else %}bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-200{% endif %}">
+            <div class="mr-3">
+              {% if message.tags == 'error' %}
+                <i class="fas fa-exclamation-circle"></i>
+              {% elif message.tags == 'success' %}
+                <i class="fas fa-check-circle"></i>
+              {% elif message.tags == 'warning' %}
+                <i class="fas fa-exclamation-triangle"></i>
+              {% else %}
+                <i class="fas fa-info-circle"></i>
+              {% endif %}
             </div>
+            <p class="flex-1">{{ message }}</p>
+            <button type="button" class="ml-auto" onclick="this.parentElement.remove()">
+              <i class="fas fa-times"></i>
+            </button>
           </div>
-        </footer>
-        <script>
-            function toggleMobileMenu() {
-                const menu = document.getElementById('mobile-menu');
-                const panel = document.getElementById('mobile-menu-panel');
-                const isOpen = menu.classList.contains('mobile-menu-open');
-                if (isOpen) {
-                    menu.classList.remove('mobile-menu-open', 'opacity-100', 'pointer-events-auto');
-                    menu.classList.add('opacity-0', 'pointer-events-none');
-                    if (panel) panel.classList.add('translate-x-full');
-                    document.body.classList.remove('overflow-hidden');
-                } else {
-                    menu.classList.add('mobile-menu-open', 'opacity-100', 'pointer-events-auto');
-                    menu.classList.remove('opacity-0', 'pointer-events-none');
-                    if (panel) panel.classList.remove('translate-x-full');
-                    document.body.classList.add('overflow-hidden');
-                }
+        {% endfor %}
+      </div>
+    {% endif %}
+    {% block extra_body %}
+      {% block content %}
+      {% endblock content %}
+    {% endblock extra_body %}
+    <!-- FOOTER -->
+    <footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 mt-auto">
+      <div class="max-w-[90rem] mx-auto px-4 md:px-6 py-12">
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+          <!-- LEARNING Column -->
+          <div>
+            <h3 class="text-lg font-bold mb-4 text-gray-700 dark:text-gray-200">LEARNING</h3>
+            <ul class="space-y-2">
+              <li>
+                <a href="{% url 'course_search' %}"
+                   class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
+                  <i class="fas fa-book-open mr-2 text-teal-500 w-5 text-center"></i>Courses
+                </a>
+              </li>
+              <li>
+                <a href="{% url 'subjects' %}"
+                   class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
+                  <i class="fas fa-list-check mr-2 text-teal-500 w-5 text-center"></i>Subjects
+                </a>
+              </li>
+              <li>
+                <a href="{% url 'quiz_list' %}"
+                   class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
+                  <i class="fas fa-question-circle mr-2 text-teal-500 w-5 text-center"></i>Quizzes
+                </a>
+              </li>
+              <li>
+                <a href="{% url 'educational_videos_list' %}"
+                   class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
+                  <i class="fas fa-video mr-2 text-teal-500 w-5 text-center"></i>Videos
+                </a>
+              </li>
+              <li>
+                <a href="{% url 'challenge_list' %}"
+                   class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
+                  <i class="fas fa-trophy mr-2 text-teal-500 w-5 text-center"></i>Challenges
+                </a>
+              </li>
+              <li>
+                <a href="{% url 'all_study_groups' %}"
+                   class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
+                  <i class="fas fa-users mr-2 text-teal-500 w-5 text-center"></i>Study Groups
+                </a>
+              </li>
+            </ul>
+          </div>
+          <!-- COMMUNITY Column -->
+          <div>
+            <h3 class="text-lg font-bold mb-4 text-gray-700 dark:text-gray-200">COMMUNITY</h3>
+            <ul class="space-y-2">
+              <li>
+                <a href="{% url 'forum_categories' %}"
+                   class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
+                  <i class="fas fa-comments mr-2 text-teal-500 w-5 text-center"></i>Forum
+                </a>
+              </li>
+              <li>
+                <a href="{% url 'blog_list' %}"
+                   class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
+                  <i class="fas fa-blog mr-2 text-teal-500 w-5 text-center"></i>Blog
+                </a>
+              </li>
+              <li>
+                <a href="{% url 'features' %}"
+                   class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
+                  <i class="fas fa-lightbulb mr-2 text-teal-500 w-5 text-center"></i>Features
+                </a>
+              </li>
+              <li>
+                <a href="{% url 'success_story_list' %}"
+                   class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
+                  <i class="fas fa-star mr-2 text-teal-500 w-5 text-center"></i>Success Stories
+                </a>
+              </li>
+            </ul>
+          </div>
+          <!-- RESOURCES & INFO Column -->
+          <div>
+            <h3 class="text-lg font-bold mb-4 text-gray-700 dark:text-gray-200">RESOURCES & INFO</h3>
+            <ul class="space-y-2">
+              <li>
+                <a href="{% url 'virtual_lab:virtual_lab_home' %}"
+                   class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
+                  <i class="fas fa-flask mr-2 text-teal-500 w-5 text-center"></i>Virtual Lab
+                </a>
+              </li>
+              <li>
+                <a href="https://github.com/alphaonelabs/alphaonelabs-education-website/wiki/GSOC-2026-Ideas"
+                   target="_blank"
+                   rel="noopener"
+                   class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
+                  <i class="fas fa-code mr-2 text-teal-500 w-5 text-center"></i>GSOC'26
+                </a>
+              </li>
+              <li>
+                <a href="{% url 'system_status' %}"
+                   class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
+                  <i class="fas fa-chart-line mr-2 text-teal-500 w-5 text-center"></i>Status
+                </a>
+              </li>
+              <li>
+                <a href="{% url 'feedback' %}"
+                   class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
+                  <i class="fas fa-comment-dots mr-2 text-teal-500 w-5 text-center"></i>Feedback
+                </a>
+              </li>
+              <li>
+                <a href="{% url 'terms' %}#general"
+                   class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
+                  <i class="fas fa-file-contract mr-2 text-teal-500 w-5 text-center"></i>Terms
+                </a>
+              </li>
+            </ul>
+          </div>
+          <!-- SOCIAL LINKS Column -->
+          <div>
+            <h3 class="text-lg font-bold mb-4 text-gray-700 dark:text-gray-200">CONNECT WITH US</h3>
+            <div class="flex flex-wrap gap-4">
+              <a href="https://twitter.com/alphaonelabs"
+                 target="_blank"
+                 rel="noopener"
+                 class="flex items-center justify-center h-10 w-10 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-teal-100 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-400 transition-colors">
+                <img src="{% static 'images/x-logo.svg' %}"
+                     alt="X (Twitter) Logo"
+                     class="w-5 h-5 dark:invert"
+                     width="20"
+                     height="20" />
+              </a>
+              <a href="https://discord.gg/HJtuzTJN3h"
+                 target="_blank"
+                 rel="noopener"
+                 class="flex items-center justify-center h-10 w-10 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-teal-100 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-400 transition-colors">
+                <i class="fab fa-discord text-xl"></i>
+              </a>
+              <a href="https://instagram.com/alphaonelabs1"
+                 target="_blank"
+                 rel="noopener"
+                 class="flex items-center justify-center h-10 w-10 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-teal-100 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-400 transition-colors">
+                <i class="fab fa-instagram text-xl"></i>
+              </a>
+              <a href="https://facebook.com/alphaonelabs"
+                 target="_blank"
+                 rel="noopener"
+                 class="flex items-center justify-center h-10 w-10 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-teal-100 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-400 transition-colors">
+                <i class="fab fa-facebook text-xl"></i>
+              </a>
+              <a href="https://youtube.com/alphaonelabs"
+                 target="_blank"
+                 rel="noopener"
+                 class="flex items-center justify-center h-10 w-10 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-teal-100 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-400 transition-colors">
+                <i class="fab fa-youtube text-xl"></i>
+              </a>
+              <a href="https://github.com/AlphaOneLabs"
+                 target="_blank"
+                 rel="noopener"
+                 class="flex items-center justify-center h-10 w-10 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-teal-100 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-400 transition-colors">
+                <i class="fab fa-github text-xl"></i>
+              </a>
+              <a href="https://join.slack.com/t/alphaonelabs/shared_invite/zt-3glzypiib-8Lq~UZwWvcCFAjeG5uwcPg"
+                 target="_blank"
+                 rel="noopener"
+                 class="flex items-center justify-center h-10 w-10 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-teal-100 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-400 transition-colors">
+                <i class="fab fa-slack text-xl"></i>
+              </a>
+            </div>
+            <div class="mt-6">
+              <h4 class="font-medium text-sm mb-2 text-gray-700 dark:text-gray-300">SUBSCRIBE TO NEWSLETTER</h4>
+              <form class="flex">
+                <input type="email"
+                       placeholder="Your email"
+                       class="flex-1 rounded-l-lg bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 px-3 py-2 text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-teal-300 dark:focus:ring-teal-700" />
+                <button type="submit"
+                        class="rounded-r-lg bg-teal-500 px-4 text-white hover:bg-teal-600 transition-colors">
+                  <i class="fas fa-paper-plane"></i>
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+        <!-- Copyright and Extra Links -->
+        <div class="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
+          <div class="flex flex-col md:flex-row justify-between items-center gap-4">
+            <div class="text-sm text-gray-500 dark:text-gray-400">
+              <p>© {% now "Y" %} Alpha One Labs. All rights reserved.</p>
+              <p class="mt-1">Last updated: {{ last_modified|date:"m/d/Y h:ia" }}</p>
+            </div>
+            <div class="flex space-x-4 text-sm text-gray-500 dark:text-gray-400">
+              <a href="{% url 'about' %}"
+                 class="hover:text-teal-600 dark:hover:text-teal-400">About Us</a>
+              <a href="{% url 'terms' %}#terms"
+                 class="hover:text-teal-600 dark:hover:text-teal-400">Terms & Conditions</a>
+              <a href="{% url 'terms' %}#privacy"
+                 class="hover:text-teal-600 dark:hover:text-teal-400">Privacy Policy</a>
+              <a href="{% url 'terms' %}#cookies"
+                 class="hover:text-teal-600 dark:hover:text-teal-400">Cookie Policy</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+    <script>
+        function toggleMobileMenu() {
+            const menu = document.getElementById('mobile-menu');
+            const panel = document.getElementById('mobile-menu-panel');
+            const isOpen = menu.classList.contains('mobile-menu-open');
+            if (isOpen) {
+                menu.classList.remove('mobile-menu-open', 'opacity-100', 'pointer-events-auto');
+                menu.classList.add('opacity-0', 'pointer-events-none');
+                if (panel) panel.classList.add('translate-x-full');
+                document.body.classList.remove('overflow-hidden');
+            } else {
+                menu.classList.add('mobile-menu-open', 'opacity-100', 'pointer-events-auto');
+                menu.classList.remove('opacity-0', 'pointer-events-none');
+                if (panel) panel.classList.remove('translate-x-full');
+                document.body.classList.add('overflow-hidden');
             }
+        }
 
-            // Close mobile menu when clicking overlay
-            document.addEventListener('click', function(event) {
-                const menu = document.getElementById('mobile-menu');
-                const menuButton = event.target.closest('[onclick="toggleMobileMenu()"]');
-                const menuContent = event.target.closest('.mobile-menu-content');
+        // Close mobile menu when clicking overlay
+        document.addEventListener('click', function(event) {
+            const menu = document.getElementById('mobile-menu');
+            const menuButton = event.target.closest('[onclick="toggleMobileMenu()"]');
+            const menuContent = event.target.closest('.mobile-menu-content');
 
-                if (menu.classList.contains('mobile-menu-open') && !menuButton && !menuContent) {
-                    toggleMobileMenu();
-                }
-            });
+            if (menu.classList.contains('mobile-menu-open') && !menuButton && !menuContent) {
+                toggleMobileMenu();
+            }
+        });
 
-            // Toggle accordion sections in mobile menu
-            function toggleAccordion(accordionId) {
-                const accordion = document.getElementById(accordionId);
-                const icon = document.getElementById(accordionId + '-icon');
+        // Toggle accordion sections in mobile menu
+        function toggleAccordion(accordionId) {
+            const accordion = document.getElementById(accordionId);
+            const icon = document.getElementById(accordionId + '-icon');
 
-                // Toggle the accordion content
-                accordion.classList.toggle('hidden');
+            // Toggle the accordion content
+            accordion.classList.toggle('hidden');
 
-                // Rotate the icon when open
-                if (accordion.classList.contains('hidden')) {
-                    icon.classList.remove('rotate-180');
-                } else {
-                    icon.classList.add('rotate-180');
-                }
+            // Rotate the icon when open
+            if (accordion.classList.contains('hidden')) {
+                icon.classList.remove('rotate-180');
+            } else {
+                icon.classList.add('rotate-180');
+            }
 
-                // Close other accordions
-                const allAccordions = ['learn-accordion', 'community-accordion', 'resources-accordion', 'about-accordion'];
-                allAccordions.forEach(id => {
-                    if (id !== accordionId) {
-                        const otherAccordion = document.getElementById(id);
-                        const otherIcon = document.getElementById(id + '-icon');
-                        if (otherAccordion && !otherAccordion.classList.contains('hidden')) {
-                            otherAccordion.classList.add('hidden');
-                            otherIcon.classList.remove('rotate-180');
-                        }
+            // Close other accordions
+            const allAccordions = ['learn-accordion', 'community-accordion', 'resources-accordion', 'about-accordion'];
+            allAccordions.forEach(id => {
+                if (id !== accordionId) {
+                    const otherAccordion = document.getElementById(id);
+                    const otherIcon = document.getElementById(id + '-icon');
+                    if (otherAccordion && !otherAccordion.classList.contains('hidden')) {
+                        otherAccordion.classList.add('hidden');
+                        otherIcon.classList.remove('rotate-180');
                     }
-                });
-            }
-        </script>
-        {% block extra_js %}
-        {% endblock extra_js %}
-      </body>
-    </html>
+                }
+            });
+        }
+    </script>
+    {% block extra_js %}
+    {% endblock extra_js %}
+  </body>
+</html>