diff --git a/index.html b/index.html
index 48699c2f..803c5d33 100644
--- a/index.html
+++ b/index.html
@@ -528,82 +528,197 @@ <h1>TourGuide . . .</h1>
       <canvas></canvas>
       <canvas></canvas>
     </div>
-    
-
-    <!-- <div id="progressbar"></div> -->
-
-    <!-- <div id="scrollPath"></div> -->
-
-    <!-- <canvas id="canvas"></canvas> -->
-    <!-- <nav>
-
-    <a href="#" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>
-    <ul class="nav__links">
-      <li class="link" data-aos="fade-down"><a href="#Home">Home</a></li>
-      <li class="link" data-aos="fade-down"><a href="#AboutUs">About Us</a></li>
-      <li class="link" data-aos="fade-down"><a href="#Destinations">Destinations</a></li>
-      <li class="link" data-aos="fade-down"><a href="#trip">Pricing</a></li>
-      <li class="link" data-aos="fade-down"><a href="#testimonials">Testimonials</a></li>
-      <li class="link" data-aos="fade-down"><a href="#ReviewGallery">Reviews</a></li>
-      <li class="link" data-aos="fade-down"><a href="feedback.html">Rate Us?</a></li>
-      <li class="link" data-aos="fade-down"><a href="login.html">Login</a></li>
-
-    </ul>
-    <button id="toggle" data-aos="fade-down">Dark Theme</button>
-    <a href="#contact"><button class="btn" id="btn-style">Contact Us</button></a>
-  </nav> -->
-
-    <div class="nav-container" id="top">
-      <nav class="newNav">
-        <div style="display: flex; flex-direction: row; align-items: center;">
-          <img src="/favicon.ico" class="sitelogo">
-        
-          <a href="#" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>
+    <nav class="newNav">
+        <div style="display: flex; align-items: center;">
+            <img src="/favicon.ico" class="sitelogo">
+            <a href="#" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>
         </div>
 
         <ul class="navLinks">
-          <li class="link" id="View-link" data-aos=""><a href="mapa.html">View</a></li>
-          <li class="link" id="LogIn-link" data-aos=""><a href="newLogin.html">Log In</a></li>
-          <li class="link" data-aos=""><a href="#Home">Home</a></li>
-          <li class="link" data-aos=""><a href="./about.html">About</a></li>
-          <li class="link dropdown" data-aos="">
-              <a href="#Services" class="dropdown">Services</a>
-              <ul class="dropdown-menu">
-                  <li><a href="#Destinations">Destination</a></li>
-                  <li><a href="#trip">Prices</a></li>
-                  <li><a href="#ReviewGallery">Trip Gallery</a></li>
-                  <li><a href="#tourist">Tourist Guide</a></li>
-                  <li><a href="#hotel">Hotel & Resort</a></li>
-              </ul>
-          </li>
-          <li class="link" data-aos=""><a href="./topdeals/topdeals.html">Top Deals</a></li>
-          <li class="link" data-aos=""><a href="./packages.html">Packages</a></li>
-          <li class="link" data-aos=""><a href="#testimonials">Testimonial</a></li>
-          <li class="link" data-aos=""><a href="feedback.html">Rate Us?</a></li>
-          <li class="link" data-aos=""><a href="#cnt-form">Contact Us</a></li>
+            <li class="link" id="View-link" data-aos=""><a href="mapa.html">View</a></li>
+            <li class="link" id="LogIn-link" data-aos=""><a href="newLogin.html">Log In</a></li>
+            <li class="link" data-aos=""><a href="#Home">Home</a></li>
+            <li class="link" data-aos=""><a href="./about.html">About</a></li>
+            <li class="link dropdown" data-aos="">
+                <a href="#Services" class="dropdown">Services</a>
+                <ul class="dropdown-menu">
+                    <li><a href="#Destinations" style="color: #000;">Destination</a></li>
+                    <li><a href="#trip" style="color: #000;">Prices</a></li>
+                    <li><a href="#ReviewGallery" style="color: #000;">Trip Gallery</a></li>
+                    <li><a href="#tourist" style="color: #000;">Tourist Guide</a></li>
+                    <li><a href="#hotel" style="color: #000;">Hotel & Resort</a></li>
+                </ul>
+            </li>
+            <li class="link" data-aos=""><a href="./topdeals/topdeals.html">Top Deals</a></li>
+            <li class="link" data-aos=""><a href="./packages.html">Packages</a></li>
+            <li class="link" data-aos=""><a href="#testimonials">Testimonial</a></li>
+            <li class="link" data-aos=""><a href="feedback.html">Rate Us?</a></li>
+            <li class="link" data-aos=""><a href="#cnt-form">Contact Us</a></li>
         </ul>
 
-        <a href="newLogin.html" class="contact-btn" id="nav-login-btn"><button class="btn login" id="btn-style"
-            data-aos="fade-down">Login/SignUp</button></a>
-        <a href="mapa.html" class="contact-btn" id="nav-view-btn"><button class="btn" id="btn-style" style="margin: 0;"
-            data-aos="fade-down">view <map name=""></map></button></a>
-
-        <a href="loginPage.html" class="contact-btn"><button class="btn" id="logout-btn"
-            style="margin: 0; display: none;" data-aos="fade-down" disabled>Log Out</button></a>
-
-        <!-- <a href="login-modified.html" class="contact-btn"><button class="btn" id="btn-style"
-            style="margin: 0; box-shadow:1.5px 1.5px 6px red;" data-aos="fade-down">Login</button></a> -->
+        <div class="contact-btns">
+            <a href="newLogin.html" class="contact-btn" id="nav-login-btn">
+                <button class="btn login" id="btn-style" data-aos="fade-down">Login/<br>SignUp</button>
+            </a>
+            <a href="mapa.html" class="contact-btn" id="nav-view-btn">
+                <button class="btn" id="btn-style" style="margin: 0;" data-aos="fade-down">View <map name=""></map></button>
+            </a>
+            <a href="loginPage.html" class="contact-btn">
+                <button class="btn" id="logout-btn" style="margin: 0; display: none;" data-aos="fade-down" disabled>Log Out</button>
+            </a>
+        </div>
 
         <div class="toggle-container" data-aos="fade-down" style="margin-right: 28px;">
-          <input id="themeToggle" class="toggle" type="checkbox">
+            <input id="themeToggle" class="toggle" type="checkbox">
         </div>
-        <div class="hamburger" data-aos="fade-down">
-          <div class="line"></div>
-          <div class="line"></div>
-          <div class="line"></div>
+
+        <div class="hamburger" id="hamburger" data-aos="fade-down">
+            <div class="line" style="margin-bottom: 5px;"></div>
+            <div class="line" style="margin-bottom: 5px;"></div>
+            <div class="line" style="margin-bottom: 5px;"></div>
+            <div class="line" style="margin-bottom: 5px;"></div>
         </div>
-      </nav>
-    </div>
+    </nav>
+
+<style>
+  /* General Styles for the Navigation */
+.nav-container {
+    background-color: #ffffff; /* Background color */
+    padding: 5px 20px; /* Reduced padding for smaller height */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.newNav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+.sitelogo {
+    height: 35px; /* Slightly smaller logo */
+    width: 35px;
+    margin-right: 10px; /* Reduced space between logo and title */
+}
+
+.nav__logo {
+    font-size: 28px; /* Adjust font size */
+    color: #ece6e6; /* Logo color */
+    text-decoration: none; /* Remove underline */
+}
+
+.navLinks {
+    list-style: none; /* Remove bullet points */
+    display: flex; /* Display items in a row */
+    margin: 0; /* Remove default margin */
+    padding: 0; /* Remove default padding */
+}
+.navLinks.active {
+    display: flex; /* Show links when the 'active' class is applied */
+}
+
+
+.link {
+    margin: 0 10px; /* Reduced space between links */
+}
+
+.link a {
+    font-size: 18px; /* Increased font size */
+    text-decoration: none; /* Remove underline */
+    color: #d8d4d4; /* Link color */
+    transition: color 0.3s ease; /* Smooth color transition */
+}
+
+.link a:hover {
+    color: #007BFF; /* Change color on hover */
+}
+
+.dropdown-menu {
+    display: none; /* Hide dropdown initially */
+    position: absolute; /* Position dropdown below the parent */
+    background-color: #fff; /* Dropdown background */
+    border: 1px solid #ccc; /* Border for dropdown */
+    z-index: 1000; /* Ensure dropdown appears above other content */
+}
+
+.dropdown:hover .dropdown-menu {
+    display: block; /* Show dropdown on hover */
+}
+
+.contact-btns {
+    display: flex; /* Align buttons side by side */
+    align-items: center;
+    gap: 10px; /* Small gap between the buttons */
+}
+
+.contact-btn {
+    margin: 0; /* Remove extra space between buttons */
+}
+
+.btn {
+    padding: 8px 12px; /* Adjusted padding for smaller height */
+    border: none; /* Remove border */
+    border-radius: 5px; /* Rounded corners */
+    cursor: pointer; /* Pointer cursor on hover */
+}
+
+/* Hamburger Menu Styles */
+.hamburger {
+    display: none; /* Hide on larger screens */
+}
+
+/* Toggle Theme Container */
+.toggle-container {
+    display: flex;
+    align-items: center; /* Center vertically */
+}
+
+/* Responsive Styles */
+@media (max-width: 1168px) {
+  .hamburger {
+                display: block; /* Show hamburger on small screens */
+            }
+
+  .navLinks {
+                display: none; /* Hide nav links on small screens */
+                flex-direction: column; /* Stack links vertically */
+                position: absolute; /* Position over content */
+                top: 60px; /* Adjusted position below navbar */
+                left: 0;
+                background-color: #ffffff; /* Background color */
+                width: 100%; /* Full width */
+                z-index: 1000; /* Stack above other content */
+                padding: 10px 0; /* Padding for spacing */
+            }
+
+            .navLinks.active {
+                display: flex; /* Show links when active */
+                padding: 10px; /* Padding around links */
+            }
+
+            .link {
+                margin: 10px 0; /* Space between links */
+                text-align: center; /* Center align links */
+            }
+
+            .dropdown {
+                position: center; /* Position for dropdown menu */
+            }
+        }
+
+</style>
+<script>
+  const hamburger = document.getElementById('hamburger');
+  const navLinks = document.querySelector('.navLinks');
+  const dropdownToggles = document.querySelectorAll('.dropdown');
+
+  hamburger.addEventListener('click', () => {
+      navLinks.classList.toggle('active'); // Toggles the 'active' class
+  });
+</script>
+
     <header>
       <div class="nav-wrapperr">
         <div id="progress-container">