diff --git a/CabRental b/CabRental
new file mode 160000
index 0000000..d4538d9
--- /dev/null
+++ b/CabRental
@@ -0,0 +1 @@
+Subproject commit d4538d9b23633c454d763a0676e59ee31fe31f7f
diff --git a/review.html b/review.html
index 477ad0d..aeb4625 100644
--- a/review.html
+++ b/review.html
@@ -8,96 +8,108 @@
     <title>Cabrental Reviews</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
-        .nav-container {
+       
+       header {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            height: 80px;
+            padding: 10px 20px;
+            background-color: #eeeff1;
+            box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
         }
 
-        .nav-items {
-            flex-grow: 1;
-            text-align: center;
-        }
-
-        .nav-items a {
-            margin: 0 1rem;
-            transition: color 0.3s ease;
+        .logo img {
+            height: 40px;
         }
 
-        .nav-items a:hover {
-            color: #6d28d9;
+        .navbar {
+            display: flex;
+            gap: 20px;
+            padding-top: 20px;
+            list-style: none;
         }
 
-        .navbar ul li:hover a {
-    background-color: #555;
-    transform: scale(1.2); /* Popup effect */
-}
-.circle {
-            height: 18px;
-            width: 18px;
-            border-radius: 24px;
-            background-color: #ff0000;
-            position: absolute;
-            top: 0;
-            left: 0;
-            z-index: 1000; /* Ensure the trail is above everything */
-            pointer-events: none; /* Prevent the circles from interfering with mouse events */
+        .navbar li a {
+            text-decoration: none;
+            color: #333;
+            padding: 10px 15px;
+            transition: 0.3s ease;
         }
 
-.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;
+        .navbar li a:hover {
+            color: #007bff;
         }
 
-        .card:hover {
-            transform: translateY(-10px);
-            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
+        .header-btn .sign-up {
+            padding: 10px 20px;
+            background-color: #007bff;
+            border-color: #007bff;
+            color: #fff;
+            text-decoration: none;
+            border-radius: 5px;
         }
-
-        .logo {
-            height: 40px;
-            width: auto;
+        
+        .header-btn .sign-up:hover {
+            background-color: red;
+            border-color: red;
         }
 
-        .text-lg {
-            padding-left: 10px;
+        /* Hide menu icon initially */
+        #menu-icon {
+            display: none;
         }
 
-        .bg-gradient-to-r {
-            background: linear-gradient(90deg, #6d28d9 0%, #4f46e5 100%);
+        /* 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;
+            }
         }
 
-        .rating-star {
-            color: #fbbf24;
-        }
     </style>
 </head>
-
-<body class="bg-gray-100 font-sans leading-normal tracking-normal">
+<body class="col-md-12">
     <!-- 20 circle elements -->
     <div class="circle"></div>
     <div class="circle"></div>
@@ -122,30 +134,28 @@
     <div class="circle"></div>
     <div class="circle"></div>
     <div class="circle"></div>
-    <div class="circle"></div>
 
-    <!-- Navbar -->
-    <nav class="bg-white shadow-md">
-        <div class="container mx-auto px-4 nav-container">
-            <div class="flex items-center">
-                <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></a>
-            </div>
-            <div class="nav-items">
-                <a href="index.html" class="text-gray-800 hover:text-purple-800">Home</a>
-                <a href="ride.html" class="text-gray-800 hover:text-purple-800">Ride</a>
-                <a href="serv.html" class="text-gray-800 hover:text-purple-800">Service</a>
-                <a href="about.html" class="text-gray-800 hover:text-purple-800">About</a>
-                <a href="review.html" class="text-gray-800 hover:text-purple-800">Reviews</a>
-                <a href="contactus.html" class="text-gray-800 hover:text-purple-800">Contact</a>
-            </div>
-            <div>
-                <button class="bg-purple-500 text-white px-4 py-2 rounded shadow hover:bg-purple-600" onclick="window.location.href='login.html'">Login</button>
-            </div>
+  
+    <div class="video-container">
+    <script src="main.js"></script>
+    <!-- Header -->
+    <header style="display: flex !important;">
+        <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>
+        <div class="header-btn">
+            <a href="login.html" class="sign-up">Login</a>
         </div>
-    </nav>
+        <div class="theme-switch" id="theme-switch"></div>
+    </header>
 
     <!-- Hero Section -->
     <section class="bg-gradient-to-r from-purple-500 to-indigo-600 text-white py-20">
diff --git a/ride.html b/ride.html
index fd964c4..483cc80 100644
--- a/ride.html
+++ b/ride.html
@@ -487,7 +487,16 @@ <h3>Follow Us</h3>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc2z6lnf65V2w4HmoRbHUXaB/91MoZl6fCJVN6eK" crossorigin="anonymous"></script>
 -->
-
+<footer class="bg-gray-800 text-white py-6">
+    <div class="container mx-auto text-center">
+        <p class="mb-2">© 2024 Cabrental. All rights reserved.</p>
+        <div class="flex justify-center space-x-4">
+            <a href="#" class="hover:text-purple-500">Privacy Policy</a>
+            <a href="#" class="hover:text-purple-500">Terms of Service</a>
+            <a href="contactus.html" class="hover:text-purple-500">Contact Us</a>
+        </div>
+    </div>
+</footer>
 <script>
     window.embeddedChatbotConfig = {
     chatbotId: "2zn6LCEiOl1sZnaTGnPqp",
diff --git a/serv.html b/serv.html
index 8041af4..800f80c 100644
--- a/serv.html
+++ b/serv.html
@@ -131,8 +131,16 @@ <h2>Special Occasions</h2>
         </div>
       </div>
     </main>
-    <footer>
-      <p>&copy; 2024 CabRental. All rights reserved.</p>
+    <footer> class="bg-gray-800 text-white py-6">
+      <div class="container mx-auto text-center">
+          <p class="mb-2">© 2024 Cabrental. All rights reserved.</p>
+          <div class="flex justify-center space-x-4">
+              <a href="#" class="hover:text-purple-500">Privacy Policy</a>
+              <a href="#" class="hover:text-purple-500">Terms of Service</a>
+              <a href="contactus.html" class="hover:text-purple-500">Contact Us</a>
+          </div>
+      </div>
+  
       <style>
         /* Styling the footer */
         footer {