diff --git a/.env.sample b/.env.example
similarity index 100%
rename from .env.sample
rename to .env.example
diff --git a/web/templates/base.html b/web/templates/base.html
index d869af45a..34ec49ce9 100644
--- a/web/templates/base.html
+++ b/web/templates/base.html
@@ -170,9 +170,9 @@
           <i class="fas fa-bars text-xl"></i>
         </button>
         <!-- Nav and additional actions -->
-        <nav class="hidden md:flex items-center space-x-3">
+        <nav class="hidden md:flex items-center space-x-6">
           <!-- Main navigation links with dropdowns -->
-          <div class="flex space-x-2 items-center">
+          <div class="flex space-x-4 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">
@@ -342,14 +342,14 @@
             </div>
           </div>
           <!-- Search bar (persistent element) -->
-          <div class="relative hidden lg:inline-block w-[250px]">
+          <div class="relative hidden lg:inline-block w-[180px]">
             <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" />
+                     placeholder="Search..."
+                     class="rounded-full w-full bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-1.5 text-sm 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">
+                      class="absolute right-3 top-1 text-gray-500 dark:text-gray-300">
                 <i class="fas fa-search"></i>
               </button>
             </form>
@@ -360,7 +360,7 @@
              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">
+          <div class="flex items-center space-x-4">
             <!-- Cart Icon -->
             <a href="{% url 'cart_view' %}"
                class="relative hover:underline flex items-center p-2 hover:bg-teal-700 rounded-lg">
@@ -518,7 +518,7 @@
             <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>
+                <i class="fa-solid fa-right-to-bracket mr-(-1)"></i>
                 <span class="hidden sm:inline">Login</span>
               </a>
               <a href="{% url 'account_signup' %}"
@@ -556,7 +556,7 @@
               <!-- 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="border-b border-gray-200 dark:border-gray-700 pb-6">
                   <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>