diff --git a/.vscode/settings.json b/.vscode/settings.json
index a0de46ff..85245c9e 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5504
+    "liveServer.settings.port": 5505
 }
\ No newline at end of file
diff --git a/F&Q.html b/F&Q.html
index a079e3cb..18e2ccfa 100644
--- a/F&Q.html
+++ b/F&Q.html
@@ -208,6 +208,50 @@
       .btn-view-itinerary:hover {
         background-color: #0056b3;
       }
+
+/*       darkmode */
+    body { 
+    background-color: white;
+    color: black;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+body.dark-mode {
+    background-color: #121212;
+    color: #ffffff;
+}
+
+header.dark-mode {
+    background-color: #1f1f1f;
+}
+
+.mode-toggle {
+    cursor: pointer;
+    border: none;
+    background: transparent;
+    outline: none;
+    padding: 10px;
+}
+
+.mode-toggle img {
+    width: 24px;
+    height: 24px;
+}
+
+.navbar {
+    background-color: #f0f0f0;
+    transition: background-color 0.3s;
+}
+
+body.dark-mode .navbar {
+    background-color: #333;
+}
+
+body.dark-mode .navbar a:hover {
+    color: #4C51BF;
+    transform: translateY(-2px);
+}
+      
     </style>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
   </head>
@@ -527,6 +571,68 @@ <h2>Suggestions/Questions</h2>
         background-color: #ffe0b2;
       }
     </style>
+
+     <!-- dark theme -->
+    <script>
+      document.addEventListener("DOMContentLoaded", function () {
+        const hamburger = document.getElementById("hamburger");
+        const navList = document.getElementById("nav-links");
+        const closeBtn = document.getElementById("closeBtn");
+  
+        hamburger.addEventListener("click", function () {
+          navList.classList.toggle("active");
+        });
+  
+        closeBtn.addEventListener("click", function () {
+          navList.classList.remove("active");
+        });
+      });
+  
+     document.addEventListener("DOMContentLoaded", function() {
+       const modeToggle = document.getElementById("modeToggle");
+       const sunIcon = document.querySelector(".sun-icon");
+       const moonIcon = document.querySelector(".moon-icon");
+  
+       // Check saved theme in localStorage and apply it
+       const currentTheme = localStorage.getItem("theme") || "light";
+        if (currentTheme === "dark") {
+          document.body.classList.add("dark-mode");
+          sunIcon.style.display = "none";
+          moonIcon.style.display = "inline-block";
+       } else {
+          sunIcon.style.display = "inline-block";
+          moonIcon.style.display = "none";
+      }
+  
+  // Toggle between light and dark mode on button click
+  modeToggle.addEventListener("click", () => {
+      const isDarkMode = document.body.classList.toggle("dark-mode");
+  
+      // Apply dark mode styles to relevant sections
+      const sections = document.querySelectorAll('.about, .core-values, .team');
+      sections.forEach(section => {
+          if (isDarkMode) {
+              section.classList.add('dark-mode');
+          } else {
+              section.classList.remove('dark-mode');
+          }
+      });
+  
+      // Update icons and local storage
+      if (isDarkMode) {
+          sunIcon.style.display = "none";
+          moonIcon.style.display = "inline-block";
+          localStorage.setItem("theme", "dark");
+      } else {
+          sunIcon.style.display = "inline-block";
+          moonIcon.style.display = "none";
+          localStorage.setItem("theme", "light");
+      }
+  });
+  });
+    </script>  
+  </body>
+=======
     
 
   <footer id="footer">
diff --git a/README.md b/README.md
index 4646dd7c..ab419533 100644
--- a/README.md
+++ b/README.md
@@ -65,6 +65,20 @@
 <!--Line-->
 <img src="https://user-images.githubusercontent.com/74038190/212284100-561aa473-3905-4a80-b561-0d28506553ee.gif" width="900">
 
+# 📋 Table of Contents
+
+- [🏞️ BuddyTrail](#-buddytrail)
+- [🌟 Project Badges](#-project-badges)
+- [📸 Website Preview](#-website-preview)
+- [🚀 Features](#-features)
+- [⚙️ Getting Started with the Code](#-getting-started-with-the-code)
+- [🛠️ Technologies Used](#-technologies-used)
+- [🎉 Welcome Contributors!!](#-welcome-contributors-)
+- [📁 Project Structure](#project-structure-)
+- [❤️ Our Contributors](#-our-contributors)
+- [👥 Team](#-team)
+- [⭐️ Support the Project](#-support-the-project)
+
 # 📸 Website Preview
 
 
@@ -160,18 +174,32 @@ All responses are in JSON format. Ensure to handle errors appropriately.
 Join the list. **We are waiting** <br/>
 Here's how you can contribute to the repository:
 
-1. Fork this Repository  🍴 
-2. Clone to your local machine 🧩 using:
-    git clone https://github.com/Your-Username/BuddyTrail.git
-3. Create a new branch:
-    git branch -c "Feature-Name"
-4. Navigate to the branch:
-    git checkout Feature-Name
-5. Add changes and Commit:
-    git commit -m "Add Changes message"
-6. Push to the branch:
-    git push origin Feature-Name
-7. Submit Pull Request 
+1. **Fork this Repository** 🍴 
+2. **Clone to your local machine** 🧩 using:
+```bash
+git clone https://github.com/Your-Username/BuddyTrail.git
+```
+3. **Create a new branch**:
+```bash
+git branch -c "Feature-Name"
+```
+
+4. **Navigate to the branch**:
+```bash
+git checkout Feature-Name
+```
+
+5. **Add changes and Commit**:
+```bash
+git commit -m "Add Changes message"
+```
+
+6. **Push to the branch**:
+```bash
+git push origin Feature-Name
+```
+
+7. **Submit Pull Request**
 
 We welcome all contributions to improve **BuddyTrail**! If you would like to contribute, please follow the [Contributing.md](./Contributing.md) for more details on how to get started.
 
@@ -191,14 +219,25 @@ You can find the project structure in the [Project Structure](project-structure.
 <!--Line-->
 <img src="https://user-images.githubusercontent.com/74038190/212284100-561aa473-3905-4a80-b561-0d28506553ee.gif" width="900">
 
+## 👥 Team
+
+| ![Priya Ghosal](https://avatars.githubusercontent.com/u/162816363?v=4&s=80) |
+|:--:|
+| **Priya Ghosal** <br> <sub>Project Admin</sub> | 
+| [![LinkedIn](https://img.icons8.com/fluency/32/000000/linkedin.png)](https://www.linkedin.com/in/priya-ghosal-785771286/) [![Discord](https://img.icons8.com/fluency/32/000000/discord.png)](https://discord.com/invite/priyaghosal) [![Twitter](https://img.icons8.com/fluency/32/000000/twitter.png)](https://twitter.com/PriyaGhosa39968) [![GitHub](https://img.icons8.com/fluency/32/000000/github.png)](https://github.com/PriyaGhosal/BuddyTrail) |
+
+
+
+For any inquiries or feedback, please contact. Happy Contributing 🫡
+
+<!--Line-->
+<img src="https://user-images.githubusercontent.com/74038190/212284100-561aa473-3905-4a80-b561-0d28506553ee.gif" width="900">
 <div>
   <h2 align="center"><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Red%20Heart.png" width="35" height="35"> Our Contributors</h2>
   <div align="center">
     <h3>Thank you for contributing to our repository</h3
 
 
-
-      
 <p align="center">
       <a href="https://github.com/PriyaGhosal/BuddyTrail/graphs/contributors">
         <img src="https://api.vaunt.dev/v1/github/entities/PriyaGhosal/repositories/BuddyTrail/contributors?format=svg&limit=54" width="700" height="250" />
@@ -229,26 +268,19 @@ You can find the project structure in the [Project Structure](project-structure.
 
 </div>
 
-
+<picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=PriyaGhosal/BuddyTrail&type=Date&theme=dark" />
+      <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=PriyaGhosal/BuddyTrail&type=Date" />
+      <img align="center" alt="Star History Chart" src="https://api.star-history.com/svg?repos=PriyaGhosal/BuddyTrail&type=Date" />
+    </picture>
+    
 <div align="right">
     <a href="#top">
         <img src="https://img.shields.io/badge/Back%20to%20Top-000000?style=for-the-badge&logo=github&logoColor=white" alt="Back to Top">
     </a>
 </div>
 
-<!--Line-->
-<img src="https://user-images.githubusercontent.com/74038190/212284100-561aa473-3905-4a80-b561-0d28506553ee.gif" width="900">
 
-## 👥 Team
-
-| ![Priya Ghosal](https://avatars.githubusercontent.com/u/162816363?v=4&s=80) |
-|:--:|
-| **Priya Ghosal** <br> <sub>Project Admin</sub> | 
-| [![LinkedIn](https://img.icons8.com/fluency/32/000000/linkedin.png)](https://www.linkedin.com/in/priya-ghosal-785771286/) [![Discord](https://img.icons8.com/fluency/32/000000/discord.png)](https://discord.com/invite/priyaghosal) [![Twitter](https://img.icons8.com/fluency/32/000000/twitter.png)](https://twitter.com/PriyaGhosa39968) [![GitHub](https://img.icons8.com/fluency/32/000000/github.png)](https://github.com/PriyaGhosal/BuddyTrail) |
-
-
-
-For any inquiries or feedback, please contact. Happy Contributing 🫡
 
 <!--Line-->
 <img src="https://user-images.githubusercontent.com/74038190/212284100-561aa473-3905-4a80-b561-0d28506553ee.gif" width="900">
diff --git a/about.css b/about.css
index 3e855f56..5c3fd873 100644
--- a/about.css
+++ b/about.css
@@ -73,6 +73,9 @@ nav {
     line-height: 1;
 }
 
+
+
+
 .nav-links {
     list-style: none;
     display: flex;
@@ -102,7 +105,10 @@ nav {
 .nav-link.active {
     color: #4C51BF;
     font-weight: bold;
-}
+} 
+
+ 
+
 
 .btn-primary {
     display: inline-block;
@@ -370,7 +376,7 @@ footer {
     font-size: 1.125rem;
 }
 
-.social-icons {
+/* .social-icons {
     display: flex;
     gap: 1rem;
     margin-top: 0.5rem;
@@ -384,24 +390,81 @@ footer {
 .social-icons a:hover {
     color: #4C51BF;
     transform: translateY(-2px);
+} */
+
+ 
+
+.social-icons {
+    display: flex;
+    gap: 15px; /* Adjust spacing between icons */
+    position: relative; /* Ensure the positioning context for the pseudo-elements */
 }
 
-.copyright {
-    text-align: center;
-    margin-top: 1.5rem;
-    padding-top: 1rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
+.social-icons a {
+    display: inline-block;
+    transition: transform 0.3s ease, color 0.3s ease;
+    position: relative;
+    color: #000; /* Default color for the icons */
 }
 
+.social-icons a::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: rgba(0, 0, 255, 0.6); /* Blue background */
+    transition: width 0.3s ease, height 0.3s ease, top 0.3s ease, left 0.3s ease;
+    z-index: -1; /* Send the background behind the icon */
+}
 
+.social-icons a:hover::before {
+    width: 120%; /* Slightly larger than the icon for a better effect */
+    height: 120%; /* Slightly larger than the icon */
+    top: -10%; /* Adjust position to keep it centered */
+    left: -10%; /* Adjust position to keep it centered */
+}
 
+.social-icons a:hover {
+    transform: scale(1.2);
+    color: #fff; /* Change icon color on hover */
+}
 
+.social-icons img {
+    width: 30px; /* Adjust size of the X logo */
+    height: auto; /* Maintain aspect ratio */
+    transition: transform 0.3s ease;
+}
 
+.social-icons img:hover {
+    transform: scale(1.2);
+}
 
+/* Optional: Additional hover effects for individual icons */
+.social-icons a.discord:hover::before {
+    background: linear-gradient(45deg, #7289da, #61dafb); /* Discord gradient */
+}
 
+.social-icons a.github:hover::before {
+    background: linear-gradient(45deg, #333, #fff); /* GitHub gradient */
+}
 
+.social-icons a.linkedin:hover::before {
+    background: linear-gradient(45deg, #0077b5, #fff); /* LinkedIn gradient */
+}
 
+.social-icons a.twitter:hover::before {
+    background: linear-gradient(45deg, #1da1f2, #fff); /* Twitter gradient */
+}
 
+.copyright {
+    text-align: center;
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
 
 footer {
     width: 100%;
@@ -530,6 +593,10 @@ form button .fas {
     background: #fff;
     margin-right: 15px;
     cursor: pointer;
+
+    & :hover{
+         background-color: #61dafb;
+    }
 }
 
 hr {
@@ -571,6 +638,48 @@ hr {
     animation: moving 2s linear infinite;
 }
 
+ 
+
+.footer-links {
+    list-style: none; /* Remove bullet points */
+    padding: 0; /* Remove default padding */
+}
+
+.footer-links li {
+   
+    margin-right: 20px; /* Space between links */
+}
+
+.footer-links a {
+    text-decoration: none; /* Remove default underline */
+    color: whitesmoke;  
+    position: relative;  
+    transition: color 0.3s ease;  
+}
+
+.footer-links a::after {
+    content: '';  
+    position: absolute;  
+    left: 0;  
+    bottom: -5px;  
+    width: 100%;  
+    height: 2px;  
+    background: blue;  
+    transform: scaleX(0);  
+    transition: transform 0.3s ease;  
+}
+
+.footer-links a:hover::after {
+    transform: scaleX(1); /* Scale to full width on hover */
+}
+
+.footer-links a:hover {
+    color: blue; /* Change text color on hover */
+}
+
+
+ 
+
 @keyframes moving {
 
     0% {
diff --git a/about.html b/about.html
index 0d1218e0..d38b78dc 100644
--- a/about.html
+++ b/about.html
@@ -605,6 +605,16 @@ <h3>PRIYA Ghosal</h3>
 
         }
 
+ 
+        .hover-color {
+            transition: color 0.3s ease;
+            /* Smooth transition for color change */
+        }
+
+        .hover-color:hover {
+            color: rgb(199, 59, 159);
+            /* Change color on hover */
+=======
         /* Navbar style */
 
         .nav-link {
@@ -640,6 +650,7 @@ <h3>PRIYA Ghosal</h3>
         .nav-link:hover::after {
             transform: scaleX(1);
             transform-origin: bottom left;
+ 
         }
     </style>
 
@@ -652,7 +663,9 @@ <h3>PRIYA Ghosal</h3>
                         <img src="img/logo.png" alt="BuddyTrail Logo" />
                         <h1 id="logo">BuddyTrail</h1>
                     </div>
-                    <p>Welcome to BuddyTrail - your premier travel companion! Whether you're planning a family vacation
+                    <p class="hover-color">Welcome to BuddyTrail - your premier travel companion! Whether you're
+                        planning a
+                        family vacation
                         or a
                         getaway with friends, BuddyTrail is here to help you discover and explore incredible
                         destinations.
@@ -674,7 +687,7 @@ <h4>+123 456 7890</h4>
                 <div class="col">
                     <h3>Links <div class="underline"><span></span></div>
                     </h3>
-                    <ul>
+                    <ul class="footer-links">
                         <li><a href="https://buddytrail.netlify.app/#home">Home</a></li>
                         <li><a href="https://buddytrail.netlify.app/#services">Services</a></li>
                         <li><a href="https://buddytrail.netlify.app/about">About Us</a></li>
diff --git a/backend/.gitignore b/backend/.gitignore
index 2eea525d..32c96c19 100644
--- a/backend/.gitignore
+++ b/backend/.gitignore
@@ -1 +1,2 @@
-.env
\ No newline at end of file
+.env
+/node_modules
\ No newline at end of file
diff --git a/backend/package-lock.json b/backend/package-lock.json
index 9b8b10b9..e334b780 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -15,6 +15,7 @@
         "cors": "^2.8.5",
         "dotenv": "^16.4.5",
         "express": "^4.21.1",
+        "express-rate-limit": "^7.4.1",
         "jsonwebtoken": "^9.0.2",
         "mongoose": "^8.7.3"
       }
@@ -357,6 +358,21 @@
         "node": ">= 0.10.0"
       }
     },
+    "node_modules/express-rate-limit": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-7.4.1.tgz",
+      "integrity": "sha512-KS3efpnpIDVIXopMc65EMbWbUht7qvTCdtCR2dD/IZmi9MIkopYESwyRqLgv8Pfu589+KqDqOdzJWW7AHoACeg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/express-rate-limit"
+      },
+      "peerDependencies": {
+        "express": "4 || 5 || ^5.0.0-beta.1"
+      }
+    },
     "node_modules/express/node_modules/cookie": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
diff --git a/backend/package.json b/backend/package.json
index 785be57c..e1319e4d 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -16,6 +16,7 @@
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",
     "express": "^4.21.1",
+    "express-rate-limit": "^7.4.1",
     "jsonwebtoken": "^9.0.2",
     "mongoose": "^8.7.3"
   }
diff --git a/backend/routes/authRoutes.js b/backend/routes/authRoutes.js
index abafc6b2..5a667a3d 100644
--- a/backend/routes/authRoutes.js
+++ b/backend/routes/authRoutes.js
@@ -1,11 +1,26 @@
-const express = require('express');
-const { signup, login, logout, verifyToken } = require('../controllers/authController');
+const express = require("express");
+const rateLimit = require("express-rate-limit");
+const {
+  signup,
+  login,
+  logout,
+  verifyToken,
+} = require("../controllers/authController");
 
 const router = express.Router();
 
-router.post('/signup', signup);
-router.post('/login', login);
-router.post('/logout', logout);
-router.get('/verify', verifyToken); // New verification route
+// Set up rate limiter for the login route
+const loginRateLimiter = rateLimit({
+  windowMs: 5 * 60 * 1000, // 5 minutes
+  max: 5,
+  message: "Too many login attempts. Please try again in 5 minutes.",
+  standardHeaders: true,
+  legacyHeaders: false,
+});
+
+router.post("/signup", signup);
+router.post("/login", loginRateLimiter, login); // Apply the limiter here
+router.post("/logout", logout);
+router.get("/verify", verifyToken);
 
 module.exports = router;
diff --git a/contact.html b/contact.html
index c5df49cb..1d7f95e6 100644
--- a/contact.html
+++ b/contact.html
@@ -65,6 +65,7 @@
         max-width: 100%;
         height: auto;
         max-height: 500px;
+        margin-top: 60px;
     }
     
     .form-group {
@@ -121,6 +122,34 @@
             min-width: 100%;
         }
     }
+     /* .form-group { 
+    position: relative;
+}  */
+
+.tooltip {
+    visibility: hidden;
+    background-color:  black;
+    color: #fff;
+    width: 200px;
+    text-align: center;
+    padding: 3px;
+    border-radius: 5px;
+    position: absolute;
+    z-index: 1;
+    /* bottom: 30%; Position above the input field */
+    top: 41%;
+    left: 60%;
+    transform: translateX(-50%);
+    opacity: 0;
+    transition: opacity 0.3s;
+    font-size: 12px;
+}
+
+.form-group:hover .tooltip {
+    visibility: visible;
+    opacity: 1;
+}
+
 
 </style>
 <body>
@@ -168,22 +197,26 @@ <h2>Contact Us</h2>
                         <form id="contactForm">
                             <div class="form-group">
                                 <label for="name">Name</label>
-                                <input type="text" id="fullname" name="fullname" placeholder="Your name">
+                                <input type="text" id="fullname" name="fullname" placeholder="Your name" required>
+                                <div class="tooltip">Please enter your full name here.</div> 
                                 <span class="error-message" id="nameError"></span>
                             </div>
                             <div class="form-group">
                                 <label for="email">Email</label>
-                                <input type="email" id="email" name="email" placeholder="Your email">
+                                <input type="email" id="email" name="email" placeholder="Your email" required>
+                                <div class="tooltip">Please enter a valid email like example@mail.com.</div>
                                 <span class="error-message" id="emailError"></span>
                             </div>
                             <div class="form-group">
                                 <label for="phone">Phone Number</label>
-                                <input type="tel" id="phone" name="phone" placeholder="Your phone number">
+                                <input type="tel" id="phone" name="phone" placeholder="Your phone number" required>
+                                <div class="tooltip">Please enter your phone number(10 digits).</div>
                                 <span class="error-message" id="phoneError"></span>
                             </div>
                             <div class="form-group">
                                 <label for="message">Message</label>
-                                <textarea id="message" name="message" placeholder="Your message"></textarea>
+                                <textarea id="message" name="message" placeholder="Your message" required></textarea>
+                                <div class="tooltip">Feel free to describe your message in detail.</div>
                                 <span class="error-message" id="messageError"></span>
                             </div>
                             <button type="submit">Send</button>
diff --git a/cookie_policy.html b/cookie_policy.html
index f6e0616f..f25f8edf 100644
--- a/cookie_policy.html
+++ b/cookie_policy.html
@@ -302,7 +302,7 @@ <h2 id="section6">6. Changes to This Cookie Policy</h2>
             <h2 id="section7">7. Contact Us</h2>
             <p>If you have any questions or concerns about this Cookie Policy, please contact us:</p>
             <p>Email: <a href="mailto:support@buddytrail.com">support@buddytrail.com</a></p>
-            <p>Phone: +1-800-555-1234</p>
+            <p>Phone: <a href="tel:+1234567890" style="color: rgb(90, 198, 245); text-decoration: none;">+123 456 7890</a></p>
         </div>
     </div>
 
@@ -332,8 +332,8 @@ <h3>Quick Links</h3>
             </div>
             <div class="footer-column">
               <h3>Contact Us</h3>
-              <p>Email: info@example.com</p>
-              <p>Phone: +123 456 7890</p>
+              <p>Email: <a href="mailto:info@example.com" style="color: white; text-decoration: none;">info@example.com</a></p>
+              <p>Phone: <a href="tel:+1234567890" style="color: white; text-decoration: none;">+123 456 7890</a></p>
             </div>
             <div class="footer-column">
               <h3>Follow Us</h3>
diff --git a/copyright.html b/copyright.html
index f4411727..232d5878 100644
--- a/copyright.html
+++ b/copyright.html
@@ -259,11 +259,14 @@ <h2 id="contact">8. Contact Information</h2>
 
   </div>
   <footer>
-    <div class="container3">
+    <div class="container2">
       <div class="footer-content">
         <div class="footer-column">
           <h3>About Us</h3>
-          <p>Discover and plan affordable trips with BuddyTrail's travel companion tools.</p>
+          <p>
+            Discover and plan affordable trips with BuddyTrail's travel
+            companion tools.
+          </p>
         </div>
         <div class="footer-column">
           <h3>Quick Links</h3>
@@ -274,24 +277,36 @@ <h3>Quick Links</h3>
             <li><a href="/#services">Services</a></li>
             <li><a href="contact.html">Contact</a></li>
             <li><a href="team.html">Team</a></li>
-            <li><a href="contributor/contributor.html">Our Contributor</a></li>
+            <li>
+              <a href="contributor/contributor.html">Our Contributor</a>
+            </li>
           </ul>
         </div>
         <div class="footer-column">
           <h3>Contact Us</h3>
-          <p>Email: <a href="mailto:info@example.com" style="color: white; text-decoration: none;">info@example.com</a>
-          </p>
+          <p>Email: <a href="mailto:info@example.com" style="color: white; text-decoration: none;">info@example.com</a></p>
           <p>Phone: <a href="tel:+1234567890" style="color: white; text-decoration: none;">+123 456 7890</a></p>
-
+          
         </div>
         <div class="footer-column">
           <h3>Follow Us</h3>
           <div class="social-icons">
-            <a href="https://discord.com/invite/priyaghosal" target="_blank"><i class="fab fa-discord"></i></a>
-            <a href="https://twitter.com/PriyaGhosa39968" target="_blank"><i class="fab fa-twitter"></i></a>
-            <a href="https://github.com/PriyaGhosal/BuddyTrail" target="_blank"><i class="fab fa-github"></i></a>
-            <a href="https://www.linkedin.com/in/priya-ghosal-785771286/" target="_blank"><i
-                class="fab fa-linkedin-in"></i></a>
+            <a href="https://discord.com/invite/priyaghosal" target="_blank"
+              ><i class="fab fa-discord"></i
+            ></a>
+            <a href="https://twitter.com/PriyaGhosa39968" target="_blank"
+              ><i class="fab fa-twitter"></i
+            ></a>
+            <a
+              href="https://github.com/PriyaGhosal/BuddyTrail"
+              target="_blank"
+              ><i class="fab fa-github"></i
+            ></a>
+            <a
+              href="https://www.linkedin.com/in/priya-ghosal-785771286/"
+              target="_blank"
+              ><i class="fab fa-linkedin-in"></i
+            ></a>
           </div>
         </div>
       </div>
@@ -300,7 +315,6 @@ <h3>Follow Us</h3>
   </footer>
 
 
-
   <script>
     // Hamburger menu functionality
     document.addEventListener("DOMContentLoaded", function () {
diff --git a/disclaimer.html b/disclaimer.html
index dd689c74..b900df73 100644
--- a/disclaimer.html
+++ b/disclaimer.html
@@ -284,6 +284,61 @@ <h2 id="section6">6. Contact Us</h2>
             <p>Phone: <a href="tel:+1234567890" style="color: rgb(103, 115, 212); text-decoration: none;">+123 456 7890</a></p>
         </div>
     </div>
+    <footer>
+        <div class="container2">
+          <div class="footer-content">
+            <div class="footer-column">
+              <h3>About Us</h3>
+              <p>
+                Discover and plan affordable trips with BuddyTrail's travel
+                companion tools.
+              </p>
+            </div>
+            <div class="footer-column">
+              <h3>Quick Links</h3>
+              <ul>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="about.html">About</a></li>
+                <li><a href="faq.html" class="faq-link">FAQs</a></li>
+                <li><a href="/#services">Services</a></li>
+                <li><a href="contact.html">Contact</a></li>
+                <li><a href="team.html">Team</a></li>
+                <li>
+                  <a href="contributor/contributor.html">Our Contributor</a>
+                </li>
+              </ul>
+            </div>
+            <div class="footer-column">
+              <h3>Contact Us</h3>
+              <p>Email: <a href="mailto:info@example.com" style="color: white; text-decoration: none;">info@example.com</a></p>
+              <p>Phone: <a href="tel:+1234567890" style="color: white; text-decoration: none;">+123 456 7890</a></p>
+              
+            </div>
+            <div class="footer-column">
+              <h3>Follow Us</h3>
+              <div class="social-icons">
+                <a href="https://discord.com/invite/priyaghosal" target="_blank"
+                  ><i class="fab fa-discord"></i
+                ></a>
+                <a href="https://twitter.com/PriyaGhosa39968" target="_blank"
+                  ><i class="fab fa-twitter"></i
+                ></a>
+                <a
+                  href="https://github.com/PriyaGhosal/BuddyTrail"
+                  target="_blank"
+                  ><i class="fab fa-github"></i
+                ></a>
+                <a
+                  href="https://www.linkedin.com/in/priya-ghosal-785771286/"
+                  target="_blank"
+                  ><i class="fab fa-linkedin-in"></i
+                ></a>
+              </div>
+            </div>
+          </div>
+          <p class="copyright">&copy; 2024 BuddyTrail | All rights reserved.</p>
+        </div>
+      </footer>
     <script>
         const modeToggle = document.getElementById('modeToggle');
         const body = document.body;
diff --git a/faq.html b/faq.html
index 472f4d4e..78a71084 100644
--- a/faq.html
+++ b/faq.html
@@ -1,114 +1,142 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>BuddyTrail</title>
-    <link rel="stylesheet" href="styles.css"> <!-- Link to your CSS file -->
-    <link rel="stylesheet" href="about.css" />
-    <link rel="icon" href="https://img.icons8.com/?size=100&id=11808&format=png&color=000000">
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
-    />
-    <style>
-      header {
-            background-color: #2D3748;
-            position: sticky;
-            top: 0;
-            z-index: 100;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        }
-
-        nav {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 0.5rem 0;
-        }
-            #faq{
-                padding-top: 80px;
-                padding-top: 70px;
-              }
-                              
-                
-                .faq-container {
-                  max-width: 900px;
-                  margin: 40px auto;
-                  padding: 20px;
-                  background-color: rgb(203, 203, 220);
-                  border: 1px solid #ddd;
-                  border-radius: 10px;
-                  box-shadow: 2 10px 8px rgba(255, 254, 254, 0.1);
-                }
-                
-                .faq-title {
-                  text-align: center;
-                  font-size: 1.8em;
-                  color: #161515;
-                  margin-bottom: 20px;
-                }
-                
-                .faq {
-                  margin-bottom: 15px;
-                }
-                
-                .faq input[type="checkbox"] {
-                  display: none;
-                }
-                
-                .faq-question {
-                  padding: 15px;
-                  font-size: 1.2em;
-                  background-color: #1477da;
-                  color: #fff;
-                  border: none;
-                  border-radius: 5px;
-                  cursor: pointer;
-                  /* display: block; */
-                  display: flex;
-                  justify-content: space-between;
-                  align-items: center;
-                  transition: background-color 0.3s ease;
-                }
-                
-                .faq-question:hover {
-                  background-color: #0680fa;
-                }
-                
-                .faq-answer {
-                  max-height: 0;
-                  overflow: hidden;
-                  padding: 0 15px;
-                  background-color: #f3f1ef;
-                  color: #333;
-                  border-left: 4px solid #0f0f10;
-                  transition: all 0.6s ease;
-                }
-                
-                .faq input[type="checkbox"]:checked ~ .faq-answer {
-                  max-height: 150px;
-                  padding: 15px;
-                }
-                .arrow {
-                  margin-top: -3px;
-                  display: inline-block;
-                  width: 12px;
-                  height: 12px;
-                  border-right: 2px solid #fff;
-                  border-bottom: 2px solid #fff;
-                  transform: rotate(45deg);
-                  transition: transform 0.3s ease;
-                }
-                /* Rotate arrow on FAQ open */
-                .faq input[type="checkbox"]:checked + label .arrow {
-                  transform: rotate(225deg);
-                }
-              
-            </style>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BuddyTrail</title>
+  <link rel="stylesheet" href="styles.css"> <!-- Link to your CSS file -->
+  <link rel="stylesheet" href="about.css" />
+  <link rel="icon" href="https://img.icons8.com/?size=100&id=11808&format=png&color=000000">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
+  <style>
+    header {
+      background-color: #2D3748;
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    nav {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.5rem 0;
+    }
+
+    #faq {
+      padding-top: 80px;
+      padding-top: 70px;
+    }
+
+
+    .faq-container {
+      max-width: 900px;
+      margin: 40px auto;
+      padding: 20px;
+      background-color: rgb(203, 203, 220);
+      border: 1px solid #ddd;
+      border-radius: 10px;
+      box-shadow: 2 10px 8px rgba(255, 254, 254, 0.1);
+    }
+
+    .faq-title {
+      text-align: center;
+      font-size: 1.8em;
+      color: #161515;
+      margin-bottom: 20px;
+    }
+
+    .faq {
+      margin-bottom: 15px;
+    }
+
+    .faq input[type="checkbox"] {
+      display: none;
+    }
+
+    .faq-question {
+      padding: 15px;
+      font-size: 1.2em;
+      background-color: #1477da;
+      color: #fff;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      /* display: block; */
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      transition: background-color 0.3s ease;
+    }
+
+    .faq-question:hover {
+      background-color: #0680fa;
+    }
+
+    .faq-answer {
+      max-height: 0;
+      overflow: hidden;
+      padding: 0 15px;
+      background-color: #f3f1ef;
+      color: #333;
+      border-left: 4px solid #0f0f10;
+      transition: all 0.6s ease;
+    }
+
+    .faq input[type="checkbox"]:checked~.faq-answer {
+      max-height: 150px;
+      padding: 15px;
+    }
+
+    .arrow {
+      margin-top: -3px;
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      border-right: 2px solid #fff;
+      border-bottom: 2px solid #fff;
+      transform: rotate(45deg);
+      transition: transform 0.3s ease;
+    }
+
+    /* Rotate arrow on FAQ open */
+    .faq input[type="checkbox"]:checked+label .arrow {
+      transform: rotate(225deg);
+    }
+
+    .social-icons {
+    display: flex;
+    gap: 15px;
+}
+
+.social-icons a {
+    display: inline-block;
+    transition: transform 0.3s ease, color 0.3s ease;
+    perspective: 1000px;
+}
+
+.social-icons a i, .social-icons img {
+    font-size: 24px;
+    color: #000;
+    transition: transform 0.3s ease, color 0.3s ease;
+    width: 24px;
+    height: auto;
+}
+
+.social-icons a:hover i, .social-icons a:hover img {
+    transform: rotateY(360deg) scale(1.2);
+    
+}
+ 
+
+
+  </style>
 
 
 </head>
+
 <body>
   <header>
     <div class="container">
@@ -127,119 +155,129 @@ <h1 id="logo">BuddyTrail</h1>
       </nav>
     </div>
   </header>
-<!-- FAQ Section -->
-<section id="faq">          
-  <div class="faq-container">
-      <h1 class="faq-title" data-aos="fade-right">Frequently Asked Questions</h1>  
-      
+  <!-- FAQ Section -->
+  <section id="faq">
+    <div class="faq-container">
+      <h1 class="faq-title" data-aos="fade-right">Frequently Asked Questions</h1>
+
       <div class="faq" data-aos="fade-right">
-          <input type="checkbox" id="faq1">
-          <label for="faq1" class="faq-question">1. What is BuddyTrail? <span class="arrow"></span></label>
-          <div class="faq-answer">
-              BuddyTrail is your all-in-one travel assistant, helping you discover new destinations, find the best hotels, and book flights with ease. Whether you're traveling solo, with family, or friends, BuddyTrail offers personalized suggestions to make your trip unforgettable.
-          </div>
+        <input type="checkbox" id="faq1">
+        <label for="faq1" class="faq-question">1. What is BuddyTrail? <span class="arrow"></span></label>
+        <div class="faq-answer">
+          BuddyTrail is your all-in-one travel assistant, helping you discover new destinations, find the best hotels,
+          and book flights with ease. Whether you're traveling solo, with family, or friends, BuddyTrail offers
+          personalized suggestions to make your trip unforgettable.
+        </div>
       </div>
 
       <div class="faq" data-aos="fade-right">
-          <input type="checkbox" id="faq2">
-          <label for="faq2" class="faq-question">2. How can BuddyTrail help me plan my trip? <span class="arrow"></span></label>
-          <div class="faq-answer">
-              BuddyTrail offers destination guides, hotel recommendations, and flight booking tools all in one platform. We make it easy to compare prices, explore local attractions, and plan the perfect itinerary based on your preferences.
-          </div>
+        <input type="checkbox" id="faq2">
+        <label for="faq2" class="faq-question">2. How can BuddyTrail help me plan my trip? <span
+            class="arrow"></span></label>
+        <div class="faq-answer">
+          BuddyTrail offers destination guides, hotel recommendations, and flight booking tools all in one platform. We
+          make it easy to compare prices, explore local attractions, and plan the perfect itinerary based on your
+          preferences.
+        </div>
       </div>
 
       <div class="faq" data-aos="fade-right">
-          <input type="checkbox" id="faq3">
-          <label for="faq3" class="faq-question">3. Does BuddyTrail offer travel deals and discounts? <span class="arrow"></span></label>
-          <div class="faq-answer">
-              Yes! BuddyTrail partners with various airlines, hotels, and travel services to bring you exclusive discounts and offers. Be sure to check our deals section for the latest promotions on flights, accommodations, and vacation packages.
-          </div>
+        <input type="checkbox" id="faq3">
+        <label for="faq3" class="faq-question">3. Does BuddyTrail offer travel deals and discounts? <span
+            class="arrow"></span></label>
+        <div class="faq-answer">
+          Yes! BuddyTrail partners with various airlines, hotels, and travel services to bring you exclusive discounts
+          and offers. Be sure to check our deals section for the latest promotions on flights, accommodations, and
+          vacation packages.
+        </div>
       </div>
 
       <div class="faq" data-aos="fade-right">
-          <input type="checkbox" id="faq4">
-          <label for="faq4" class="faq-question">4. Can I customize my trip on BuddyTrail? <span class="arrow"></span></label>
-          <div class="faq-answer">
-              Absolutely! You can customize every aspect of your trip from choosing destinations, hotels, and flights, to adding local experiences. BuddyTrail provides a flexible travel planning experience to suit your needs.
-          </div>
+        <input type="checkbox" id="faq4">
+        <label for="faq4" class="faq-question">4. Can I customize my trip on BuddyTrail? <span
+            class="arrow"></span></label>
+        <div class="faq-answer">
+          Absolutely! You can customize every aspect of your trip from choosing destinations, hotels, and flights, to
+          adding local experiences. BuddyTrail provides a flexible travel planning experience to suit your needs.
+        </div>
       </div>
 
       <div class="faq" data-aos="fade-right">
-          <input type="checkbox" id="faq5">
-          <label for="faq5" class="faq-question">5. How do I track my bookings? <span class="arrow"></span></label>
-          <div class="faq-answer">
-              Once you've booked a flight or hotel through BuddyTrail, you'll receive a confirmation email with a link to track and manage your bookings. You can also access your bookings via your BuddyTrail account.
-          </div>
+        <input type="checkbox" id="faq5">
+        <label for="faq5" class="faq-question">5. How do I track my bookings? <span class="arrow"></span></label>
+        <div class="faq-answer">
+          Once you've booked a flight or hotel through BuddyTrail, you'll receive a confirmation email with a link to
+          track and manage your bookings. You can also access your bookings via your BuddyTrail account.
+        </div>
       </div>
 
       <div class="faq" data-aos="fade-right">
-          <input type="checkbox" id="faq6">
-          <label for="faq6" class="faq-question">6. What if I need to cancel or change my booking? <span class="arrow"></span></label>
-          <div class="faq-answer">
-              Cancellations and changes are allowed based on the policy of the airline or hotel. You can manage your booking through BuddyTrail, and our support team is available to assist you if you encounter any issues.
-          </div>
+        <input type="checkbox" id="faq6">
+        <label for="faq6" class="faq-question">6. What if I need to cancel or change my booking? <span
+            class="arrow"></span></label>
+        <div class="faq-answer">
+          Cancellations and changes are allowed based on the policy of the airline or hotel. You can manage your booking
+          through BuddyTrail, and our support team is available to assist you if you encounter any issues.
+        </div>
       </div>
 
       <div class="faq" data-aos="fade-right">
-          <input type="checkbox" id="faq7">
-          <label for="faq7" class="faq-question">7. Does BuddyTrail offer support for group bookings? <span class="arrow"></span></label>
-          <div class="faq-answer">
-              Yes! Whether you're planning a family trip or a getaway with friends, BuddyTrail makes group bookings easy. You can book flights and hotels for multiple travelers and receive group discounts where applicable.
-          </div>
+        <input type="checkbox" id="faq7">
+        <label for="faq7" class="faq-question">7. Does BuddyTrail offer support for group bookings? <span
+            class="arrow"></span></label>
+        <div class="faq-answer">
+          Yes! Whether you're planning a family trip or a getaway with friends, BuddyTrail makes group bookings easy.
+          You can book flights and hotels for multiple travelers and receive group discounts where applicable.
+        </div>
       </div>
-  </div>
-</section>
+    </div>
+  </section>
 
 
-<div class="gtranslate_wrapper"></div>
+  <div class="gtranslate_wrapper"></div>
 
-<script>
+  <script>
 
-window.gtranslateSettings = {
-  "default_language":"en",
-  "detect_browser_language":true,
-  "wrapper_selector":".gtranslate_wrapper"
-}
+    window.gtranslateSettings = {
+      "default_language": "en",
+      "detect_browser_language": true,
+      "wrapper_selector": ".gtranslate_wrapper"
+    }
 
-</script>
+  </script>
 
-<script 
-  src="https://cdn.gtranslate.net/widgets/latest/float.js"
-  defer
-></script>
+  <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
 
- 
 
-    <!-- Footer Include -->
-  
-    <footer>
-      <div class="container">
-        <div class="footer-content">
-          <div class="footer-column-l">
-            <h3>Contact Us</h3>
-            <p>Email: info@example.com</p>
-            <p>Phone: +123 456 7890</p>
-          </div>
-          <div class="footer-column-r">
-            <h3>Follow Us</h3>
-            <div class="social-icons">
-              <a href="https://discord.com/invite/priyaghosal" target="_blank"
-                ><i class="fab fa-discord"></i
-              ></a>
-              <a href="https://twitter.com/PriyaGhosa39968" target="_blank"
-                ><i class="fab fa-twitter"></i
-              ></a>
-              <a href="https://github.com/PriyaGhosal/BuddyTrail" target="_blank"
-                ><i class="fab fa-github"></i
-              ></a>
-              <a href="https://www.linkedin.com/in/priya-ghosal-785771286/" target="_blank"
-                ><i class="fab fa-linkedin-in"></i
-              ></a>
-            </div>
+
+  <!-- Footer Include -->
+
+  <footer>
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-column-l">
+          <h3>Contact Us</h3>
+          <p>Email: info@example.com</p>
+          <p>Phone: +123 456 7890</p>
+        </div>
+        <div class="footer-column-r">
+          <h3>Follow Us</h3>
+          <div class="social-icons">
+            <a href="https://discord.com/invite/priyaghosal" target="_blank"><i class="fab fa-discord"></i></a>
+            <a href="https://twitter.com/PriyaGhosa39968" target="_blank">
+              <img src="img/x-logo.png" alt="X logo" class="fab twitter" style="width: 40px; height: 40px;">
+          </a>
+          
+            <a href="https://github.com/PriyaGhosal/BuddyTrail" target="_blank"><i class="fab fa-github"></i></a>
+            <a href="https://www.linkedin.com/in/priya-ghosal-785771286/" target="_blank"><i
+                class="fab fa-linkedin-in"></i></a>
           </div>
+
         </div>
-        <p class="copyright">&copy; 2024 BuddyTrail | All rights reserved.</p>
       </div>
-    </footer>
+      <p class="copyright">&copy; 2024 BuddyTrail | All rights reserved.</p>
+    </div>
+  </footer>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/fly.css b/fly.css
index 51b76377..6e69468c 100644
--- a/fly.css
+++ b/fly.css
@@ -51,6 +51,11 @@
     transform: translateX(0);
   }
 }
+.preview-image {
+  width: 100%;
+  aspect-ratio: 3/1;
+  object-fit: cover;
+}
 
 .btn {
   padding: 10px 20px;
diff --git a/fly.html b/fly.html
index ed9f1471..1bf36a96 100644
--- a/fly.html
+++ b/fly.html
@@ -38,7 +38,7 @@ <h1 class="section__header">
       <div style="display: flex; justify-content: center">
         <img
           src="img/Presentation1-removebg-preview.png"
-          style="width: 2000px; height: 500px"
+         class="preview-image"
           alt="header"
         />
       </div>
@@ -299,9 +299,9 @@ <h4>INFORMATION</h4>
         </div>
         <div class="footer__col">
           <h4>CONTACT</h4>
-          <p>Support</p>
-          <p>Media</p>
-          <p>Socials</p>
+         <a href="contact.html">Support</a> 
+         <a href="blog.html">Media</a> 
+         <a href="#">Social</a> 
         </div>
       </div>
       <div class="section__container footer__bar">
diff --git a/index.html b/index.html
index df7dbb40..accec4a9 100644
--- a/index.html
+++ b/index.html
@@ -41,7 +41,7 @@
        border-radius:8px;
        padding: 10px 8px 4px 8px;
      }
-      
+
     /* Button Styling */
     .btn {
       background-color: #007bff; /* Primary button color */
@@ -230,7 +230,7 @@
 .card.inview {
   opacity: 1;
   transform: translateY(0);
-  
+
 }
 .card.inview header1 {
       padding: 10px 8px 4px 8px;
@@ -312,7 +312,7 @@
     background-color: rgba(0, 0, 0, 0.9);
     z-index: 1000;
   }
-  
+
   /* Wrapper for the logo and loader */
   .loader-wrapper {
     position: relative;
@@ -322,7 +322,7 @@
     justify-content: center;
     align-items: center;
   }
-  
+
   /* Logo Styling */
   #logo {
     width: 140px;
@@ -330,7 +330,7 @@
     z-index: 10; /* Ensures logo stays above the loader */
     animation: pulse 2s infinite ease-in-out;
   }
-  
+
   /* Circular Loader surrounding the logo */
   .loader-globe {
     position: absolute;
@@ -342,7 +342,7 @@
     border-right-color: white;
     animation: spin 2s linear infinite;
   }
-  
+
   /* Loading Text */
   #loading-text {
     margin-top: 20px;
@@ -352,18 +352,18 @@
     letter-spacing: 1px;
     animation: textGlow 2s ease-in-out infinite;
   }
-  
+
   /* Keyframes Animations */
   @keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
   }
-  
+
   @keyframes textGlow {
     0%, 100% { opacity: 1; }
     50% { opacity: 0.5; }
   }
-  
+
   @keyframes pulse {
     0% { transform: scale(1); }
     50% { transform: scale(1.05); }
@@ -375,13 +375,13 @@
     window.addEventListener('load', function() {
         const preloader = document.getElementById('preloader');
         const content = document.getElementById('content');
-    
+
         // Set a small timeout for better user experience
         setTimeout(function() {
             // Hide preloader
             preloader.style.opacity = '0';
             preloader.style.transition = 'opacity 1s ease-in-out';
-    
+
             // Show content after preloader fades out
             setTimeout(function() {
                 preloader.style.display = 'none';
@@ -390,7 +390,7 @@
             }, 1000); // Match the transition duration
         }, 2000);  // Adjust to the length of your spinner animation
     });
-    
+
       </script>
 
     <!-- Google Translate Button -->
@@ -715,6 +715,17 @@ <h4>Fly</h4>
 </div>
 
 </div>
+<style>
+    .dark-mode .card{
+      background: #0e0e0e;
+    }
+    .dark-mode .card h4{
+      color: #f39c12;
+    }
+    .dark-mode .card p{
+      color: #fff;
+    }
+</style>
 <script>
   document.addEventListener("DOMContentLoaded", function () {
   const cards = document.querySelectorAll(".card");
@@ -952,7 +963,7 @@ <h3>Wildlife Safari in Kenya</h3>
   border: none;
   padding: 10px 20px;
   border-radius: 8px;
-  font-size: 1rem;
+  font-size: 1.5rem;
   transition: background-color 0.3s ease, transform 0.3s ease, border 0.3s ease;
 }
 
@@ -1656,7 +1667,7 @@ <h2>Upload Content</h2>
 
         <section id="content">
           <h2>Content</h2>
-          <input id="content-input" type="text">
+          <textarea id="content-input"></textarea>
           <ul id="content-list"></ul>
         </section>
       </main>
@@ -1693,6 +1704,7 @@ <h2>Content</h2>
   width: 100%; /* Ensure full width inside the container */
   border-radius: 8px;
   outline: none;
+  resize: vertical;
 }
 
 /* Header styling */
@@ -2145,16 +2157,16 @@ <h3>Share Your Experiences</h3>
               <textarea id="postContent" placeholder="Write your post here..." required></textarea>
               <button type="submit">Submit</button>
           </form>
-      </div> 
+      </div>
       <style>
 
     .post-container {
     background: linear-gradient(135deg, #f0cac0, #c7dcf7); /* Gradient background */
-    
-    border-radius: 8px; 
+
+    border-radius: 8px;
     color: white;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
-    
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+
 }
 
 
@@ -2177,20 +2189,9 @@ <h2>Explore Popular Destinations</h2>
       <div id="map"></div>
     </section>
     <!-- Google Maps JavaScript API -->
-    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCYcdQdpiSF7BjZl6JF_pyucrblrUCZMxc&callback=initMap"
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCYcdQdpiSF7BjZl6JF_pyucrblrUCZMxc&loading=async&callback=initMap"
       async defer></script>
 
-
-
-      <!-- Map Section -->
-
-      <!-- Google Maps JavaScript API -->
-      <script
-        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCYcdQdpiSF7BjZl6JF_pyucrblrUCZMxc&callback=initMap"
-        async
-        defer
-      ></script>
-
     <!-- CONTACT US-->
     <style>
       .contact-section .container {
@@ -2517,11 +2518,13 @@ <h2 style="color: #0057B3;" id="h1darkbtn">Rate your experience</h2>
           <form class="form" id="reviewForm">
             <label for="name" id="darkbtn" style="color: black;">Your Name:</label>
             <input type="text" id="name" name="name" required pattern="[a-zA-Z ]+"
+            placeholder="Enter your name"
             oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')"
             oninput="this.setCustomValidity('')"/>
 
             <label for="destination" id="darkbtn" style="color: black;">Destination/Service:</label>
             <input type="text" id="destination" name="destination" required  required pattern="[a-zA-Z ]+"
+            placeholder="Enter your destination or service"
             oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')"
             oninput="this.setCustomValidity('')"/>
 
@@ -3140,4 +3143,4 @@ <h2>Exclusive Deals and Offers!</h2>
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/romantic-gateway.css b/romantic-gateway.css
index 63aac0c4..48b6c0d0 100644
--- a/romantic-gateway.css
+++ b/romantic-gateway.css
@@ -3,7 +3,8 @@ body {
     color: #333;
 }
 
-h1, h2 {
+h1,
+h2 {
     color: #ff69b4;
 }
 
@@ -41,9 +42,15 @@ h1, h2 {
     height: 100%;
 }
 
+.card-img-top {
+    width: 100%;
+    aspect-ratio: 3/2;
+    object-fit: cover;
+}
+
 @media (max-width: 768px) {
     .container {
         padding-left: 15px;
         padding-right: 15px;
     }
-}
+}
\ No newline at end of file
diff --git a/romantic-gateway.html b/romantic-gateway.html
index 5060315c..afe9b46b 100644
--- a/romantic-gateway.html
+++ b/romantic-gateway.html
@@ -48,7 +48,7 @@ <h2 class="mb-3">🔍 Find Your Perfect Destination</h2>
         <section id="map" class="mb-5">
             <h2 class="mb-3">🗺️ Explore Romantic Destinations</h2>
             <div class="ratio ratio-21x9">
-                <img src="https://images.unsplash.com/photo-1524661135-423995f22d0b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" class="img-fluid rounded" alt="Interactive Map">
+                <img src="https://images.unsplash.com/photo-1524661135-423995f22d0b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" class="card-img-top" alt="Interactive Map">
             </div>
         </section>
 
diff --git a/script.js b/script.js
index 409d2851..5a0c0266 100644
--- a/script.js
+++ b/script.js
@@ -595,4 +595,3 @@ if ('serviceWorker' in navigator) {
         });
     });
   }
-  
\ No newline at end of file
diff --git a/service.css b/service.css
index 3520544a..19afdb1b 100644
--- a/service.css
+++ b/service.css
@@ -28,3 +28,50 @@ body {
         margin-bottom: 20px;
     }
 }
+
+/* dark mode */
+
+body {
+    background-color: white;
+    color: black;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+body.dark-mode {
+    background-color: #121212;
+    color: #ffffff;
+}
+
+header.dark-mode {
+    background-color: #1f1f1f;
+}
+
+.mode-toggle {
+    cursor: pointer;
+    border: none;
+    background: transparent;
+    outline: none;
+    padding: 10px;
+}
+
+.mode-toggle img {
+    width: 24px;
+    height: 24px;
+}
+
+.navbar {
+    background-color: #f0f0f0;
+    transition: background-color 0.3s;
+}
+
+body.dark-mode .navbar {
+    background-color: #333;
+}
+
+body.dark-mode .navbar a:hover {
+    color: #4C51BF;
+    transform: translateY(-2px);
+}
+
+
+
diff --git a/service.html b/service.html
index a1c70cfa..589cb993 100644
--- a/service.html
+++ b/service.html
@@ -6,6 +6,7 @@
     <title>Travel Services</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="service.css" rel="stylesheet">
+
 </head>
 <body>
     <header class="bg-primary text-white py-4">
@@ -25,6 +26,13 @@ <h1 class="display-4">Travel Services</h1>
                     <li class="nav-item"><a class="nav-link" href="#hotels">Hotels</a></li>
                     <li class="nav-item"><a class="nav-link" href="#flights">Flights</a></li>
                     <li class="nav-item"><a class="nav-link" href="#cars">Car Rentals</a></li>
+                    <li>
+                        <button class="mode-toggle" id="modeToggle">
+                            <span class="sun-icon glow"><img src="day-mode.png" alt="Light mode"></span>
+                            <span class="moon-icon glow" style="display: none;"><img src="moon.png" alt="Dark mode"></span>
+                          </button>
+                        </li>
+            
                 </ul>
             </div>
         </div>
@@ -213,7 +221,66 @@ <h5>Follow Us</h5>
             </div>
         </div>
     </footer>
-
+    
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+     <script>
+        document.addEventListener("DOMContentLoaded", function () {
+          const hamburger = document.getElementById("hamburger");
+          const navList = document.getElementById("nav-links");
+          const closeBtn = document.getElementById("closeBtn");
+    
+          hamburger.addEventListener("click", function () {
+            navList.classList.toggle("active");
+          });
+    
+          closeBtn.addEventListener("click", function () {
+            navList.classList.remove("active");
+          });
+        });
+    
+       document.addEventListener("DOMContentLoaded", function() {
+         const modeToggle = document.getElementById("modeToggle");
+         const sunIcon = document.querySelector(".sun-icon");
+         const moonIcon = document.querySelector(".moon-icon");
+    
+         // Check saved theme in localStorage and apply it
+         const currentTheme = localStorage.getItem("theme") || "light";
+          if (currentTheme === "dark") {
+            document.body.classList.add("dark-mode");
+            sunIcon.style.display = "none";
+            moonIcon.style.display = "inline-block";
+         } else {
+            sunIcon.style.display = "inline-block";
+            moonIcon.style.display = "none";
+        }
+    
+    // Toggle between light and dark mode on button click
+    modeToggle.addEventListener("click", () => {
+        const isDarkMode = document.body.classList.toggle("dark-mode");
+    
+        // Apply dark mode styles to relevant sections
+        const sections = document.querySelectorAll('.about, .core-values, .team');
+        sections.forEach(section => {
+            if (isDarkMode) {
+                section.classList.add('dark-mode');
+            } else {
+                section.classList.remove('dark-mode');
+            }
+        });
+    
+        // Update icons and local storage
+        if (isDarkMode) {
+            sunIcon.style.display = "none";
+            moonIcon.style.display = "inline-block";
+            localStorage.setItem("theme", "dark");
+        } else {
+            sunIcon.style.display = "inline-block";
+            moonIcon.style.display = "none";
+            localStorage.setItem("theme", "light");
+        }
+    });
+    });
+      </script>
+    
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/solo-adventure.css b/solo-adventure.css
index ae387b15..8448f565 100644
--- a/solo-adventure.css
+++ b/solo-adventure.css
@@ -12,7 +12,8 @@ body {
 }
 
 .card-img-top {
-    height: 200px;
+    width: 100%;
+    aspect-ratio: 3/2;
     object-fit: cover;
 }
 
diff --git a/solo-adventure.html b/solo-adventure.html
index 5527d116..a4350299 100644
--- a/solo-adventure.html
+++ b/solo-adventure.html
@@ -6,6 +6,7 @@
     <title>Solo Adventure Explorer</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="index.css">
+    <link rel="stylesheet" href="solo-adventure.css">
 </head>
 <body>
     <div class="container mt-5">
diff --git a/style.css b/style.css
index 558acf10..f926507c 100644
--- a/style.css
+++ b/style.css
@@ -242,7 +242,7 @@ h3 {
 
 h4,
 h5 {
-  font-size: 1.8rem;
+  font-size: 2rem;
 }
 
 #logo-web {
@@ -742,6 +742,10 @@ h2 {
   line-height: inherit;
 }
 
+.card p {
+  font-size: 1.5rem;
+}
+
 .card-icon {
   border-radius: 10px;
   background: #8b66b6;