diff --git a/.DS_Store b/.DS_Store
index 2b26649..cbb8d59 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/about.html b/about.html
index 20656c6..79bbcb0 100644
--- a/about.html
+++ b/about.html
@@ -3,29 +3,49 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="img/logo1.png" type="image/png">
     <title>About Us - CabRental</title>
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css"
     />
+    
+    
     <nav class="navbar">
       <div class="logo">
-        <img src="img/cabz.png.png" alt="Logo" class="navbar-logo" />
+        <a href="index.html" class="logo"><img src="img/logo.png" alt=""></a>
+        <a href="index.html"><img src="img/cabz.png.png" alt="Logo" class="navbar-logo" /></a>
     </div>
       <ul>
           <li><a href="index.html">Home</a></li>
-          <li><a href="#company-overview">Company Overview</a></li>
-          <li><a href="#mission-vision">Mission & Vision</a></li>
-          <li><a href="#values-principles">Values & Principles</a></li>
+          <li><a href="ride.html">Ride</a></li>
+          <li><a href="serv.html">Services</a></li>
+          <li><a href="#about.html">About</a></li>
+          <li><a href="review.html">Reviews</a></li>
+          <li><a href="contactus.html">Contact</a></li>
+          <li>
+            <div class="header-btn">
+              <a href="login.html" class="sign-up">Login</a>
+          </div>
+          </li>
+          <li>
+            <div class="theme-switch" id="theme-switch"></div>
+          </li>
       </ul>
   </nav>
   
+  
     <style>
+      .logo img {
+            height: 60px;
+            padding-right: 40px;
+            padding-left: 40px;
+        }
       body {
         font-family: "Poppins", sans-serif;
         margin: 0;
         padding: 0;
-        background-color: #f9f9f9;
+        background-color: #eeeff1;
         color: #333;
         line-height: 1.6;
       }
@@ -34,25 +54,37 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-        background-color: #fff;
+        background-color: #eeeff1;
         padding: 20px;
         position: sticky;
         top: 0;
         z-index: 1000;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        height: 50px;
       }
 
       .navbar ul li a:hover {
         background-color: #8f6883;
         transform: scale(1.1);
       }
-
+      .header-btn .sign-up:hover {
+            background-color: red;
+            border-color: red;
+        }
+        .header-btn .sign-up {
+            padding: 10px 20px;
+            background-color: #007bff;
+            border-color: #007bff;
+            color: #fff;
+            text-decoration: none;
+            border-radius: 5px;
+        }
       .navbar ul {
         display: flex;
         justify-content: space-around; /* Spacing between links */
         list-style: none;
         padding: 10px; /* Padding for the group of links */
-        background-color: #e6e4e4; /* Background color for the navbar */
+        background-color: #eeeff1; /* Background color for the navbar */
     }
 
     .navbar ul li {
diff --git a/contactus.html b/contactus.html
index 7b3bd95..77abaef 100644
--- a/contactus.html
+++ b/contactus.html
@@ -3,6 +3,7 @@
    <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
+      <link rel="icon" href="img/logo1.png" type="image/png">
       <meta name="author" content="CodeHim">
       <title>Contact Us Page</title>
       <link rel="stylesheet" href="contactus.css">
diff --git a/img/.DS_Store b/img/.DS_Store
index 5008ddf..19f53f4 100644
Binary files a/img/.DS_Store and b/img/.DS_Store differ
diff --git a/img/services.png b/img/services.png
new file mode 100644
index 0000000..e2be8e6
Binary files /dev/null and b/img/services.png differ
diff --git a/index.html b/index.html
index 2a533b3..26fb861 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE-edge">
-    <meta name="viewprot" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- Favicon -->
     <link rel="icon" href="img/logo1.png" type="image/png">
     <title>CabRental</title>
@@ -13,7 +13,6 @@
     <link rel="stylesheet" href="https://unpkg.com/swiper@11.1.4/swiper-bundle.min.css" />
     <!-- font awesome cdn link  -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     <!-- custom css link -->
     <script src="https://kit.fontawesome.com/2815a7015d.js" crossorigin="anonymous"></script>
     <link rel="stylesheet" href="style.css">
@@ -31,17 +30,18 @@
             justify-content: space-between;
             align-items: center;
             padding: 10px 20px;
-            background-color: #fff;
+            background-color: #eeeff1;
             box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
         }
 
         .logo img {
-            height: 50px;
+            height: 40px;
         }
 
         .navbar {
             display: flex;
             gap: 20px;
+            padding-top: 20px;
             list-style: none;
         }
 
@@ -59,13 +59,15 @@
         .header-btn .sign-up {
             padding: 10px 20px;
             background-color: #007bff;
+            border-color: #007bff;
             color: #fff;
             text-decoration: none;
             border-radius: 5px;
         }
 
         .header-btn .sign-up:hover {
-            background-color: #0056b3;
+            background-color: red;
+            border-color: red;
         }
 
         /* Hide menu icon initially */
@@ -81,7 +83,6 @@
                 left: -250px;
                 width: 250px;
                 height: 100%;
-                background-color: #fff;
                 flex-direction: column;
                 align-items: start;
                 justify-content: flex-start;
@@ -475,8 +476,8 @@
 <body>
     <!-- Header -->
     <header>
-        <a href="#" class="logo"><img src="img/logo.png" alt=""></a>
-        <a href="#" class="CabRental_logo"><img src="img/cabz.png.png" alt=""></a>
+        <a href="index.html" class="logo"><img src="img/logo.png" alt=""></a>
+        <a href="index.html" class="CabRental_logo"><img src="img/cabz.png.png" alt=""></a>
         <div class="bx bx-menu" id="menu-icon"></div>
         <ul class="navbar">
             <li><a href="index.html">Home</a></li>
diff --git a/login.html b/login.html
index 8fdc7a4..7397c4f 100644
--- a/login.html
+++ b/login.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="img/logo1.png" type="image/png">
     <title>Login</title>
     <link rel="stylesheet" href="login.css"/>
 </head>
@@ -21,7 +22,7 @@ <h1 class="animated-heading">Cab Rental<span class="blinking-cursor">|</span></h
                 <button type="submit" class="submit-button">Login</button>
             </form>
             <p class="already-signed-up">
-                Not signed up? <a href="./signup.html"> Sign In</a>
+                Don't have an account? <a href="./signup.html"> Sign Up</a>
             </p>
             <p class="forgot password">
                 Forgot Password? <a href="./forgot-password.html">Click Here</a>
diff --git a/review.html b/review.html
index d706c02..eaf1a7f 100644
--- a/review.html
+++ b/review.html
@@ -4,6 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="img/logo1.png" type="image/png">
     <title>Cabrental Reviews</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
@@ -28,6 +29,35 @@
             color: #6d28d9;
         }
 
+        .navbar ul li:hover a {
+    background-color: #555;
+    transform: scale(1.2); /* Popup effect */
+}
+
+.navbar ul li:hover::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    background-color: #00aced;
+    top: 100%;
+    left: 0;
+    transform: scaleX(1);
+    transition: all 0.3s ease;
+}
+
+.navbar ul li::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    background-color: transparent;
+    top: 100%;
+    left: 0;
+    transform: scaleX(0);
+    transition: all 0.3s ease;
+}
+
         .card {
             transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
@@ -62,10 +92,10 @@
     <nav class="bg-white shadow-md">
         <div class="container mx-auto px-4 nav-container">
             <div class="flex items-center">
-                <img src="img/logo.png" alt="Logo" class="logo">
-                <div class="text-lg font-bold text-purple-800">
+                <a href="index.html"><img src="img/logo.png" alt="Logo" class="logo"></a>
+                <a href="index.html"><div class="text-lg font-bold text-purple-800">
                     Cabrental
-                </div>
+                </div></a>
             </div>
             <div class="nav-items">
                 <a href="index.html" class="text-gray-800 hover:text-purple-800">Home</a>
diff --git a/ride.html b/ride.html
index d21b825..fcaf50e 100644
--- a/ride.html
+++ b/ride.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="img/logo1.png" type="image/png">
     <title>Cabshare</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     
@@ -188,21 +189,108 @@
               font-size: 18px;
           }
 
-          header {
-              flex-direction: column;
-          }
-
-          .navbar {
-              flex-direction: column;
-              gap: 10px;
-          }
-
           .footer a {
               display: block;
               margin-bottom: 5px;
           }
         }
+        header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 20px;
+            background-color: #eeeff1;
+            box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+        }
+
+        .logo img {
+            height: 40px;
+        }
+
+        .navbar {
+            display: flex;
+            gap: 20px;
+            padding-top: 20px;
+            list-style: none;
+        }
+
+        .navbar li a {
+            text-decoration: none;
+            color: #333;
+            padding: 10px 15px;
+            transition: 0.3s ease;
+        }
+
+        .navbar li a:hover {
+            color: #007bff;
+        }
+
+        .header-btn .sign-up {
+            padding: 10px 20px;
+            background-color: #007bff;
+            border-color: #007bff;
+            color: #fff;
+            text-decoration: none;
+            border-radius: 5px;
+        }
+        
+        .header-btn .sign-up:hover {
+            background-color: red;
+            border-color: red;
+        }
+
+        /* Hide menu icon initially */
+        #menu-icon {
+            display: none;
+        }
+
+        /* Responsive styles for mobile sidebar */
+        @media (max-width: 600px) {
+            .navbar {
+                position: fixed;
+                top: 0;
+                left: -250px;
+                width: 250px;
+                height: 100%;
+                flex-direction: column;
+                align-items: start;
+                justify-content: flex-start;
+                padding: 20px;
+                transition: 0.3s;
+                z-index: 1000;
+            }
+
+            .navbar.active {
+                left: 0;
+            }
+
+            .navbar li {
+                width: 100%;
+                margin: 20px 0;
+            }
+
+            .navbar li a {
+                display: block;
+                width: 100%;
+                text-align: left;
+                padding: 10px 15px;
+            }
 
+            #menu-icon {
+                display: block;
+                font-size: 28px;
+                cursor: pointer;
+                position: absolute;
+                right: 20px;
+            }
+
+            .close-btn {
+                font-size: 28px;
+                cursor: pointer;
+                margin-left: auto;
+                margin-bottom: 20px;
+            }
+        }
 
     </style>
 </head>
@@ -217,7 +305,8 @@
     <script src="main.js"></script>
     <!-- Header -->
     <header style="display: flex !important;">
-        <a href="#" class="logo"><img src="img/logo.png" alt=""></a>
+        <a href="index.html" class="logo"><img src="img/logo.png" alt=""></a>
+        <a href="index.html" class="CabRental_logo"><img src="img/cabz.png.png" alt=""></a>
         <div class="bx bx-menu" id="menu-icon"></div>
         <ul class="navbar">
             <li><a href="index.html">Home</a></li>
diff --git a/serv.css b/serv.css
index 77b5447..3a1a129 100644
--- a/serv.css
+++ b/serv.css
@@ -7,65 +7,131 @@ body {
     display: flex;
     flex-direction: column;
     overflow-x: hidden;
+    background-color: #eeeff1;
   }
   main{
     flex: 1;
   }
 
-header {
-  color: #000000;
-  text-align: left;
-
-  padding: 20px 0;
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+    background-color: #eeeff1;
+    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+    height: 70px;
 }
 
-header h1 {
-  margin: 0;
-  font-size: 2rem;
+.theme-switch {
+  display: inline-block;
+  width: 60px;
+  height: 30px;
+  border-radius: 30px;
+  background: linear-gradient(49deg, #ffffff, #0644ff);
   position: relative;
-  left: 34px;
+  cursor: pointer;
+  transition: background 0.3s ease-in-out;
+  vertical-align: middle;
 }
 
-nav {
-   padding:0px 0;
-    position: relative;
-    left: 55px;
-    top: -55px;
-   
-  
-  }
-
-  nav ul {
+.logo img {
+    height: 50px;
+    padding-left: 20px;
+    padding-top: 10px;
+}
+.CabRental_logo img{
+  padding-top: 20px;
+}
 
-    list-style: none;
-    margin:0;
-    padding: 0;
+.navbar {
     display: flex;
-    justify-content: center;
-   
-  }
-
-  nav ul li {
-    margin: 0 20px;
+    gap: 20px;
+    padding-top: 5px;
+    list-style: none;
+    font-size: 30;
+}
 
-  }
+.navbar li a {
+    
+    text-decoration: none;
+    font-weight: 500;
+    color: #333;
+    padding: 10px 15px;
+    transition: 0.3s ease;
+}
 
-  nav a:hover {
-    background: rgb(231, 223, 223);
-    padding-block:6px;
-    padding-inline: 9px;
-    border-radius: 2px;
-  }
+.navbar li a:hover {
+    color: #007bff;
+}
 
-  nav ul li a {
-    color: #000000;
+.header-btn .sign-up {
+  padding: 20px;
+    padding: 10px 20px;
+    background-color: #007bff;
+    border-color: #007bff;
+    color: #fff;
     text-decoration: none;
-    font-size: 1rem;
-    transition: color 0.3s;
-    padding-block:6px;
-    padding-inline: 9px;
-  }
+    border-radius: 5px;
+}
+
+.header-btn .sign-up:hover {
+    background-color: red;
+    border-color: red;
+}
 
+/* Hide menu icon initially */
+#menu-icon {
+    display: none;
+}
+
+/* Responsive styles for mobile sidebar */
+@media (max-width: 600px) {
+    .navbar {
+        position: fixed;
+        top: 0;
+        left: -250px;
+        width: 250px;
+        height: 100%;
+        flex-direction: column;
+        align-items: start;
+        justify-content: flex-start;
+        padding: 20px;
+        transition: 0.3s;
+        z-index: 1000;
+    }
+
+    .navbar.active {
+        left: 0;
+    }
+
+    .navbar li {
+        width: 100%;
+        margin: 20px 0;
+    }
+
+    .navbar li a {
+        display: block;
+        width: 100%;
+        text-align: left;
+        padding: 10px 15px;
+    }
+
+    #menu-icon {
+        display: block;
+        font-size: 28px;
+        cursor: pointer;
+        position: absolute;
+        right: 20px;
+    }
+
+    .close-btn {
+        font-size: 28px;
+        cursor: pointer;
+        margin-left: auto;
+        margin-bottom: 20px;
+    }
+}
   /* nav ul li a:hover {
     color: #ff0000;
   } */
diff --git a/serv.html b/serv.html
index 844758f..83e8c7a 100644
--- a/serv.html
+++ b/serv.html
@@ -15,17 +15,23 @@
   </head>
   <body>
     <header>
-      <h1>CabRental Services</h1>
-    </header>
-    <nav>
-      <ul>
-        <li><a href="index.html">Home</a></li>
-        <li><a href="#city-transfers">City Transfers</a></li>
-        <li><a href="#hourly-rentals">Hourly Rentals</a></li>
-        <li><a href="#special-occasions">Special Occasions</a></li>
-        <li><a href="contactus.html">Contact Us</a></li>
+      <a href="index.html" class="logo"><img src="img/logo.png" alt=""></a>
+      <a href="index.html" class="CabRental_logo"><img src="img/cabz.png.png" alt=""></a>
+      <div class="bx bx-menu" id="menu-icon"></div>
+      <ul class="navbar">
+          <li><a href="index.html">Home</a></li>
+          <li><a href="ride.html">Ride</a></li>
+          <li><a href="serv.html">Services</a></li>
+          <li><a href="about.html">About</a></li>
+          <li><a href="review.html">Reviews</a></li>
+          <li><a href="contactus.html">Contact</a></li>
       </ul>
-    </nav>
+      <div class="header-btn">
+          <a href="login.html" class="sign-up">Login</a>
+      </div>
+      <div class="theme-switch" id="theme-switch"></div>
+  </header>
+
     <main>
       <div id="city-transfers" class="citytransfer">
         <div class="head1">
@@ -116,6 +122,7 @@ <h2>Special Occasions</h2>
             padding-bottom: 80px;  /* Space for the footer */
         }
     </style>
+    <script src="script.js"></script>
       <script>
        let lastScrollTop = 0;
         const footer = document.querySelector("footer");
diff --git a/signup.html b/signup.html
index 432f5b4..0a2d75c 100644
--- a/signup.html
+++ b/signup.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="img/logo1.png" type="image/png">
     <title>Register</title>
     <link rel="stylesheet" href="login.css"/>
 </head>
