From 10fb04a37eb8c4cd4280fe335d27af660722d907 Mon Sep 17 00:00:00 2001
From: vishalnadarge <vishalnadarge2@gmail.com>
Date: Fri, 1 Nov 2024 15:06:07 +0530
Subject: [PATCH] Updated multiple HTML, CSS, and JavaScript files

---
 Contactus.html     | 208 +++++++-------
 Feedback.html      | 415 ++++++----------------------
 Firebase.js        |  23 +-
 SOS.html           | 355 ++++++------------------
 about.html         | 591 ++++++++++++++++++----------------------
 ambtracker.html    | 381 +++++++++++++++-----------
 chatbot.html       | 660 +++++++++++++++------------------------------
 contact.html       | 605 ++++++++++++-----------------------------
 driver.html        |  32 +--
 faq.html           | 466 +++++++++++++++-----------------
 features.html      | 349 ++++++------------------
 home.html          | 117 ++++----
 hospital.html      | 395 ++++++++++-----------------
 login.js           |  13 +-
 manage.html        | 198 ++------------
 nearby.html        | 202 ++++----------
 postcss.config.js  |   7 +-
 preloader.js       |  21 +-
 preloaderStyle.css | 227 +++++-----------
 privacy.html       | 485 ++++++++++++++++-----------------
 responsive.css     | 455 ++-----------------------------
 roles.html         | 138 +++++-----
 script.js          | 124 +++++----
 sitemap.css        |  33 ++-
 sitemap.html       | 255 +++++++++---------
 sitemap.xml        |  54 ++--
 style.css          |  11 +-
 style1.css         | 169 ++----------
 team.html          | 376 +++++++-------------------
 terms.html         | 439 +++++++++++++++---------------
 up.html            | 429 +++++++++++++++--------------
 user-map.html      |  25 +-
 user.html          |  47 +++-
 33 files changed, 2994 insertions(+), 5311 deletions(-)

diff --git a/Contactus.html b/Contactus.html
index 392c069..805326d 100644
--- a/Contactus.html
+++ b/Contactus.html
@@ -6,7 +6,7 @@
     <title>Contact Us</title>
     <link rel="stylesheet" href="src/css/index.css">
     <link rel="shortcut icon" href="ambulance.png" type="image/x-icon">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"> <!-- Updated to latest version -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -19,6 +19,11 @@
             min-height: 100vh;
         }
 
+        .menu ul {
+            list-style-type: none;
+            padding: 0;
+        }
+
         .menu ul li a {
             padding: 10px 15px;
             color: rgb(15, 14, 14);
@@ -86,90 +91,81 @@
         }
 
         footer {
-            background-color: #000;
-            color: white;
+            background-color: #C4D7FF;
+            color: #000;
             text-align: center;
-            padding: 10px 0;
+            padding: 20px 0;
+            width: 100%;
             position: relative;
             bottom: 0;
-            width: 100%;
         }
 
-        .hover-link {
-            color: #000000;
+        footer h3 {
+            font-size: 1.5rem;
+            color: #2980b9;
+            margin-bottom: 10px;
+        }
+
+        footer a {
+            color: #000;
             text-decoration: none;
-            margin-right: 10px;
-            background: none;
-            cursor: pointer;
-            transition: color 0.3s ease;
+            margin: 5px 0;
+            display: block;
         }
 
-        .hover-link:hover {
+        footer a:hover {
             color: rgb(7, 7, 164);
-            background: none;
         }
 
-        @keyframes fadeIn {
-            from {
-                opacity: 0;
-            }
-            to {
-                opacity: 1;
-            }
+        .chatbot-container {
+            position: fixed;
+            bottom: 20px;
+            right: 7rem;
+            z-index: 1000;
+            transition: right 0.3s ease;
         }
 
-        .chatbot-container {
-      position: fixed;
-      transition: right 0.3s ease;
-      bottom: 20px;
-      right: 7rem;
-      z-index: 1000;
-    }
+        .chatbot-button {
+            background-color: #007bff;
+            border: none;
+            border-radius: 50%;
+            padding: 10px;
+            cursor: pointer;
+            width: 50px;
+            height: 50px;
+            position: relative;
+        }
 
-    .chatbot-button {
-      background-color: #007bff;
-      border: none;
-      border-radius: 50%;
-      padding: 10px;
-      /* Smaller padding */
-      cursor: pointer;
-      position: relative;
-      width: 50px;
-      /* Adjusted size */
-      height: 50px;
-      /* Adjusted size */
-      right: -60px;
-    }
+        .chatbot-button img {
+            width: 30px;
+            height: 30px;
+        }
 
-    .chatbot-button img {
-      width: 30px;
-      /* Adjusted image size */
-      height: 30px;
-      /* Adjusted image size */
-    }
+        .tooltip-text {
+            display: none;
+            position: absolute;
+            bottom: 100%;
+            right: 50%;
+            transform: translateX(50%);
+            background-color: #333;
+            color: #fff;
+            padding: 5px;
+            border-radius: 5px;
+            white-space: nowrap;
+        }
 
-    .tooltip-text {
-      display: none;
-      /* Hide by default */
-      position: absolute;
-      bottom: 100%;
-      /* Position above the button */
-      right: 50%;
-      transform: translateX(50%);
-      background-color: #333;
-      /* Background color for tooltip */
-      color: #fff;
-      /* Tooltip text color */
-      padding: 5px;
-      border-radius: 5px;
-      white-space: nowrap;
-      /* Prevent text from wrapping */
-    }
+        .chatbot-button:hover .tooltip-text {
+            display: block;
+        }
 
-    .chatbot-button:hover .tooltip-text {
-      display: block;
-      /* Show on hover */
-    }
+        @media (max-width: 600px) {
+            footer {
+                flex-direction: column;
+            }
+            footer div {
+                margin-bottom: 20px;
+            }
+        }
     </style>
 </head>
 <body>
@@ -177,6 +173,9 @@
 <header>
     <div class="container">
         <div class="logo">
+            <a href="./index.html">
+                <img src="images/logo2-w.webp" alt="AmbuFlow Logo" style="width: 50px; height: auto" />
+            </a>
             <div class="brand-name">
                 <span class="letter red" style="--letter-index: 1;">A</span>
                 <span class="letter red" style="--letter-index: 2;">m</span>
@@ -187,10 +186,7 @@
                 <span class="letter" style="--letter-index: 7;">o</span>
                 <span class="letter" style="--letter-index: 8;">w</span>
             </div>
-            <a href="./index.html" >
-            <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 50px; height: auto" />
-            </a>
-          </div>
+        </div>
 
         <nav class="menu">
             <ul>
@@ -228,50 +224,36 @@ <h2>Our Location</h2>
     </div>
 </div>
 
-<footer style="color: #f3f4f6; text-align: center; width: 100%; background-color: #C4D7FF; border: none;">
-  <div style="display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 20px 0;">
-    <!-- Quick Links Section -->
-    <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
-      <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Quick Links</h3>
-      <ul style="list-style-type: none; padding: 0;">
-        <li><a href="about.html" class="footer-link">About Us</a></li>
-        <li><a href="contact.html" class="footer-link">Contact Us</a></li>
-        <li><a href="privacy.html" class="footer-link">Privacy Policy</a></li>
-        <li><a href="terms.html" class="footer-link">Terms of Service</a></li>
-        <li><a href="sitemap.html" class="footer-link">Site Map</a></li>
-      </ul>
-    </div>
-
-    <!-- Contact Information Section -->
-    <div style="flex: 1; min-width: 200px; margin-bottom: 10px;">
-      <h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3>
-      <p style="color: #000;">123 Emergency Lane, Mumbai, India</p>
-      <a href="mailto:emergency@ambulanceservice.in" class="footer-link">emergency@ambulanceservice.in</a>
-      <p style="color: #000000;">Phone: <a href="tel:+91-911-1234567" class="footer-link">+91-911-1234567</a></p>
-    </div>
-
-    <!-- Social Media Links -->
-    <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
-      <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3>
-      <a href="https://www.facebook.com" class="hover-link"><i class="fab fa-facebook-f"></i> Facebook</a><br>
-      <a href="https://twitter.com" class="hover-link"><i class="fab fa-twitter"></i> Twitter</a><br>
-      <a href="https://www.instagram.com" class="hover-link"><i class="fab fa-instagram"></i> Instagram</a><br>
+<footer>
+    <div style="display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 20px;">
+        <div style="flex: 1; min-width: 200px;">
+            <h3>Quick Links</h3>
+            <ul style="list-style-type: none; padding: 0;">
+                <li><a href="about.html" class="footer-link">About Us</a></li>
+                <li><a href="contact.html" class="footer-link">Contact Us</a></li>
+                <li><a href="privacy.html" class="footer-link">Privacy Policy</a></li>
+                <li><a href="terms.html" class="footer-link">Terms of Service</a></li>
+            </ul>
+        </div>
+        <div style="flex: 1; min-width: 200px;">
+            <h3>Follow Us</h3>
+            <ul style="list-style-type: none; padding: 0;">
+                <li><a href="https://twitter.com" target="_blank" class="footer-link"><i class="fa-brands fa-twitter"></i> Twitter</a></li>
+                <li><a href="https://facebook.com" target="_blank" class="footer-link"><i class="fa-brands fa-facebook"></i> Facebook</a></li>
+                <li><a href="https://instagram.com" target="_blank" class="footer-link"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
+            </ul>
+        </div>
     </div>
-  </div>
-  <p style="font-size: 0.8rem; color: #000;">&copy; 2024 Nursing Tomorrow's Smile. All rights reserved.</p>
+    <p>&copy; 2024 AmbuFlow. All rights reserved.</p>
 </footer>
 
-<a href="chatbot.html">
-    <div class="fixed bottom-0 right-2 chatbot-container">
-      <button class="chatbot-button group">
-        <img class="h-20" src="chatbot.gif" alt="chatbot" />
-        <span class="tooltip-text">
-          Welcome to AmbuFlow!<br />
-          How can I help You?
-        </span>
-      </button>
-    </div>
-  </a>
+<div class="chatbot-container">
+    <button class="chatbot-button" onclick="toggleChatbot()">
+        <img src="chatbot-icon.png" alt="Chatbot Icon">
+        <span class="tooltip-text">Chat with us!</span>
+    </button>
+</div>
 
+<script src="src/js/index.js"></script>
 </body>
 </html>
diff --git a/Feedback.html b/Feedback.html
index 2728182..c8caf1f 100644
--- a/Feedback.html
+++ b/Feedback.html
@@ -35,7 +35,6 @@
       /* Adjust padding for better appearance */
     }
 
-
     /* dark mode toggle button styling */
     body {
       background-color: white;
@@ -43,38 +42,36 @@
       color: black;
       transition: background-color 0.3s, color 0.3s;
     }
- 
-    .navbar {
 
-      background-color:  rgb(148 207 226);
+    .navbar {
+      background-color: rgb(148 207 226);
       /* Light mode navbar */
-
       border-radius: 7px;
       color: black;
       padding: 7px;
     }
 
     ul li a:hover {
-    color: rgb(16, 16, 16) !important;
+      color: rgb(16, 16, 16) !important;
     }
+
     a:hover {
-    color: rgb(0, 0, 6);
-  }
+      color: rgb(0, 0, 6);
+    }
+
     .navbar.dark-mode {
       background-color: black;
       /* Dark mode navbar */
       color: white;
     }
 
-
     /* more addition for dark mode theme */
     .dark-mode .logo img {
       filter: brightness(0) invert(1);
       /* Inverts the color to make it white */
     }
 
-
-    /* dark mode hove effect on logo */
+    /* dark mode hover effect on logo */
     body.dark-mode #logo img:hover {
       filter: brightness(0) invert(1);
       /* Change black logo to white */
@@ -86,37 +83,6 @@
       filter: brightness(0) invert(1);
       /* Change logo color in dark mode */
     }
-/* 
-    .menu ul {
-      list-style-type: none;
-      padding: 0;
-      display: flex;
-      
-    }
-
-    .menu li {
-      margin-right: 15px;
-    } */
-/* 
-    .menu a {
-      color: black;
-      Light mode link color
-      border: 1.5px solid black;
-      Black border
-      border-radius: 7px;
-      padding: 3px 5px;
-      text-decoration: none;
-      transition: all 0.3s;
-      display:inline-block;
-      vertical-align: middle;
-    }
-
-    .menu a:hover {
-      background-color: blue;
-      Blue background on hover
-      color: white;
-      White text on hover
-    } */
 
     .dark-mode .menu a {
       color: white;
@@ -171,8 +137,6 @@
       align-items: center;
     }
 
-
-
     /* adding dark mode for contact info */
     .content {
       transition: background-color 0.3s, color 0.3s;
@@ -186,11 +150,8 @@
     .dark-mode .content {
       background-color: rgba(50, 50, 50, 0.95);
       /* Match body background opacity */
-      /* padding: 20px; */
-      /* Optional: add padding for better spacing */
     }
 
-    /* end */
     footer {
       background-color: #C4D7FF;
       color: white;
@@ -204,7 +165,6 @@
     .content {
       margin: 2rem 3rem;
       padding: 4rem 1rem;
-      /* width: 90vw; */
       background-color: #f7f5f5;
       border-radius: 5px;
       display: flex;
@@ -350,7 +310,7 @@
       margin-bottom: 1rem;
       font-weight: 600;
       transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
-  }
+    }
 
     .feed-btn:hover {
       transform: scale(1.03);
@@ -381,317 +341,106 @@
       font-size: 2rem;
       font-weight: 500;
       color: green;
+      margin-top: 2rem;
+    }
+
+    /* Style for back to top button */
+    .back-to-top {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      display: none;
+      padding: 10px;
+      background-color: #333;
+      color: white;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      z-index: 1000;
+    }
+
+    .back-to-top:hover {
+      background-color: #555;
     }
   </style>
 </head>
 
 <body>
-
-  <!-- pre loader -->
-  <div id="preloader">
-    <div class="wrapper">
-      <div class="box-wrap">
-        <div class="box one"></div>
-        <div class="box two"></div>
-        <div class="box three"></div>
-        <div class="box four"></div>
-        <div class="box five"></div>
-        <div class="box six"></div>
-      </div>
-    </div>
-  </div>
-
-  <div class="container" id="container">
+  <div class="navbar">
     <div class="logo">
-      <div class="brand-name">
-        <span class="letter red" style="--letter-index: 1;">A</span>
-        <span class="letter red" style="--letter-index: 2;">m</span>
-        <span class="letter red" style="--letter-index: 3;">b</span>
-        <span class="letter red" style="--letter-index: 4;">u</span>
-        <span class="letter" style="--letter-index: 5;">F</span>
-        <span class="letter" style="--letter-index: 6;">l</span>
-        <span class="letter" style="--letter-index: 7;">o</span>
-        <span class="letter" style="--letter-index: 8;">w</span>
-      </div>
-      <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 80px; height: auto" />
+      <img src="logo.png" alt="AmbuFlow Logo" class="logo-img" style="height: 50px;" />
     </div>
-    <nav class="menu">
-      <ul>
-        <li>
-          <a href="#container" style="color: #333;">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M6.34314 11.5858L12 5.92893M12 5.92893L17.6568 11.5858M12 5.92893V18.0711" stroke="currentColor">
-              </path>
-            </svg>
-          </a>
-        </li>
-        <li>
-          <a href="index.html" id="home-link" class="menu_links" data-link="Home">
-            <span>Home</span>
-          </a>
-        </li>
-        <li>
-          <a href="features.html" id="features-link" class="menu_links" data-link="Features">
-            <span>Features</span>
-          </a>
-        </li>
-        <li>
-          <a href="aboutus.html" id="about-link" class="menu_links" data-link="About Us">
-            <span>About Us</span>
-          </a>
-        </li>
-        <li>
-          <a href="contact.html" id="contact-link" class="menu_links" data-link="Contact">
-            <span>Contact</span>
-          </a>
-        </li>
-        <li>
-          <a href="Feedback.html" id="feedback-link" class="menu_links" data-link="Feedback" style="color: #333;">
-            <span>Feedback</span>
-          </a>
-        </li>
-        <li>
-          <a href="nearby.html" id="contact-link" class="menu_links" data-link="Nearby">
-            <span>Nearby</span></a>
-        </li>
-      </ul>
-    </nav>
-
     <div class="buttons">
-
-      <a href="login.html" class="login">Log in</a>
-      <a href="up.html" class="get-started">Get started</a>
-
-      <button class="light-dark-btn dark-mode-toggle" id="dark-mode-toggle">
-        <i class="fa-solid fa-moon"></i>
-      </button>
-
-      
+      <a href="login.html" class="login">Login</a>
+      <a href="register.html" class="get-started">Get Started</a>
+      <button id="dark-mode-toggle" class="dark-mode-toggle">Toggle Dark Mode</button>
     </div>
   </div>
-</header>
-
-
-<body>
-  <header>
-
-    <h1>AmbuFlow Feedback</h1>
-
-  </header>
 
   <div class="content">
-      <h1>Feedback</h1>
-      <div class="feedback-box">
-        <h3>Please rate your experience:</h3>
-        <form id="feedback-box">
-          <div class="star-rating">
-            <input type="radio" id="star5" name="rating" value="5" aria-label="5 stars" />
-            <label for="star5" title="5 stars">★</label>
-            <input type="radio" id="star4" name="rating" value="4" aria-label="4 stars" />
-            <label for="star4" title="4 stars">★</label>
-            <input type="radio" id="star3" name="rating" value="3" aria-label="3 stars" />
-            <label for="star3" title="3 stars">★</label>
-            <input type="radio" id="star2" name="rating" value="2" aria-label="2 stars" />
-            <label for="star2" title="2 stars">★</label>
-            <input type="radio" id="star1" name="rating" value="1" aria-label="1 star" />
-            <label for="star1" title="1 star">★</label>
-    <div id="thank-you-message" class="thank-feed">
-      Thank you for your response!
-    </div>
-  </div>
-
-
-
-  <footer style=" color: #f3f4f6; text-align: center; width: 100%;">
-    <div style="background-color: #C4D7FF; color: #f3f4f6; ">
-      <div style="display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 0 auto;">
-
-        <!-- Quick Links Section -->
-        <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
-          <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Quick Links</h3>
-          <ul style="list-style-type: none; padding: 0;">
-            <li><a href="about.html" style="color: #000000; text-decoration: none;">About Us</a></li>
-            <li><a href="contact.html" style="color: #000000; text-decoration: none;">Contact Us</a></li>
-            <li><a href="privacy.html" style="color: #000000; text-decoration: none;">Privacy Policy</a></li>
-            <li><a href="terms.html" style="color: #000000; text-decoration: none;">Terms of Service</a></li>
-            <li><a href="sitemap.html" style="color: #000000; text-decoration: none;">Site Map</a></li>
-          </ul>
-        </div>
-
-        <!-- Contact Information Section -->
-        <div style="flex: 1; min-width: 200px; margin-bottom: 10px;">
-          <h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3>
-          <p style="color: #333; margin-bottom: 10px;font-size:0.8rem";>
-            Email: 
-            <a href="mailto:emergency@ambulanceservice.in" style="color: #3173f8;">emergency@ambulanceservice.in</a>
-        </p>
-        <p style="color: #333;">
-            Phone: 
-            <a href="tel:+91-911-1234567" style="color: #333; text-decoration: none; transition: color 0.3s;">+91-911-1234567</a>
-        </p>
-        </div>
-
-        <!-- Modified the looks of the social icons -->
-        <!-- Social Media Links -->
-        <div style="text-align: center; min-width: 200px; color: black;">
-          <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3>
-          <div style="display: flex; justify-content: center; align-items: center; gap: 15px; height: 50px;">
-            <a href="https://www.facebook.com" class="social-icon facebook"
-              style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-facebook"></i></a>
-            <a href="https://www.twitter.com" class="social-icon twitter"
-              style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fa-brands fa-x-twitter"></i></a>
-            <a href="https://www.instagram.com" class="social-icon instagram"
-              style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-instagram"></i></a>
-            <a href="https://www.linkedin.com" class="social-icon linkedin"
-              style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-linkedin-in"></i></a>
-
-          </div>
-
-          <h3>Your Comments:</h3>
-          <textarea class="feed-msg" rows="5" style="width:500px; margin:10px;" placeholder="Share your feedback..." required></textarea>
-            <div class="feed-btn">
-            <button type="submit">Submit Feedback</button>
-          </div>
-        </form>
-      </div>
-      <div id="thank-you-message">
-        Thank you for your feedback!
+    <h1>Feedback</h1>
+    <h3>Your feedback is valuable to us!</h3>
+    <form id="feedback-box" class="feedback-box">
+      <div class="star-rating">
+        <input type="radio" name="rating" id="star-5" value="5" />
+        <label for="star-5">★</label>
+        <input type="radio" name="rating" id="star-4" value="4" />
+        <label for="star-4">★</label>
+        <input type="radio" name="rating" id="star-3" value="3" />
+        <label for="star-3">★</label>
+        <input type="radio" name="rating" id="star-2" value="2" />
+        <label for="star-2">★</label>
+        <input type="radio" name="rating" id="star-1" value="1" />
+        <label for="star-1">★</label>
       </div>
-    </div>
+      <textarea class="feed-msg" rows="5" placeholder="Share your feedback..."></textarea>
+      <button type="submit" class="feed-btn">Submit Feedback</button>
+    </form>
+    <div id="thank-you-message">Thank you for your feedback!</div>
   </div>
 
-</a>
-
-<script src="preloader.js"></script>
-
-
-<!--  -->
-<script>
-  // Back to top button functionality
-  const backToTopButton = document.getElementById('backToTopBtn');
-
-
-  <script src="preloader.js"></script>
-
-  <script>
-
-    document.addEventListener('DOMContentLoaded', function () {
-      const toggleButton = document.getElementById('dark-mode-toggle');
-      const darkModeButton = document.querySelector('.dark-mode-toggle');
-      const logoImage = document.querySelector('.logo img'); // Select the logo image
-      const navbar = document.querySelector('.navbar'); // Select the navbar
-
-      // Reset to light mode for the Contact page
-      document.body.classList.remove("dark-mode");
-      document.body.classList.add("light-mode");
-      darkModeButton.innerHTML = '<i class="fa-solid fa-moon"></i>'; // Set icon for light mode
-      navbar.classList.remove("dark-mode"); // Ensure navbar is in light mode
-
-      // Clear the sessionStorage for theme on this page
-      sessionStorage.removeItem("theme");
-
-
   <footer>
+    <p>&copy; 2024 AmbuFlow. All rights reserved.</p>
     <div>
-      <h3>Connect with us!</h3>
-      <div>
-        <a href="https://facebook.com" class="social-icon" aria-label="Facebook">
-          <i class="fa-brands fa-facebook"></i>
-        </a>
-        <a href="https://twitter.com" class="social-icon" aria-label="Twitter">
-          <i class="fa-brands fa-x-twitter"></i>
-        </a>
-        <a href="https://instagram.com" class="social-icon" aria-label="Instagram">
-          <i class="fa-brands fa-instagram"></i>
-        </a>
-        <a href="https://linkedin.com" class="social-icon" aria-label="LinkedIn">
-          <i class="fa-brands fa-linkedin-in"></i>
-        </a>
-      </div>
+      <a href="#" class="social-icon"><i class="fab fa-facebook"></i></a>
+      <a href="#" class="social-icon"><i class="fab fa-x-twitter"></i></a>
+      <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
+      <a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
     </div>
-    <p>&copy; 2024 AmbuFlow. All rights reserved.</p>
   </footer>
 
+  <button class="back-to-top">Back to Top</button>
+
   <script>
-    // Preloader hide on load
-    window.onload = function () {
-      document.getElementById('preloader').style.display = 'none';
-    };
-
-    // Feedback form submission
-    document.getElementById('feedback-box').addEventListener('submit', function (event) {
-      event.preventDefault(); // Prevent the form from actually submitting
-
-      // Hide the feedback box and show the thank you message
-      document.querySelector('.feedback-box').style.display = 'none';
-      document.getElementById('thank-you-message').style.display = 'flex'; // Show the message
+    // Back to top button functionality
+    const backToTopButton = document.querySelector('.back-to-top');
+    window.addEventListener('scroll', () => {
+      if (window.scrollY > 300) {
+        backToTopButton.style.display = 'block';
+      } else {
+        backToTopButton.style.display = 'none';
+      }
     });
 
+    // Feedback submission functionality
+    const feedbackForm = document.getElementById('feedback-box');
+    const thankYouMessage = document.getElementById('thank-you-message');
 
-    function animateCircles() {
-      let x = coords.x;
-      let y = coords.y;
-
-      circles.forEach(function (circle, index) {
-        circle.style.left = x - 12 + "px";
-        circle.style.top = y - 12 + "px";
-
-        circle.style.scale = (circles.length - index) / circles.length;
+    feedbackForm.addEventListener('submit', (event) => {
+      event.preventDefault(); // Prevent the default form submission
 
-        circle.x = x;
-        circle.y = y;
-
-        const nextCircle = circles[index + 1] || circles[0];
-        x += (nextCircle.x - x) * 0.3;
-        y += (nextCircle.y - y) * 0.3;
-      });
-
-      requestAnimationFrame(animateCircles);
-
-  // Show the button when scrolled down 100px from the top
-  window.onscroll = function () {
-    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
-      backToTopButton.style.display = "block";
-    } else {
-      backToTopButton.style.display = "none";
-
-    }
-  };
-
-  // Scroll to top when the button is clicked
-  backToTopButton.addEventListener('click', () => {
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  });
-</script>
-
-
-<script>
-  // Dark mode functionality
-  document.addEventListener('DOMContentLoaded', function () {
-    const toggleButton = document.getElementById('dark-mode-toggle');
-    const darkModeButton = document.querySelector('.dark-mode-toggle');
-    const logoImage = document.querySelector('.logo img'); // Select the logo image
-    const navbar = document.querySelector('.navbar'); // Select the navbar
-
-    // Reset to light mode for the Contact page
-    document.body.classList.remove("dark-mode");
-    document.body.classList.add("light-mode");
-    darkModeButton.innerHTML = '<i class="fa-solid fa-moon"></i>'; // Set icon for light mode
-    navbar.classList.remove("dark-mode"); // Ensure navbar is in light mode
-
-    // Clear the sessionStorage for theme on this page
-    sessionStorage.removeItem("theme");
-
-    toggleButton.addEventListener('click', function () {
-
-    // Toggle dark mode functionality
-    const toggleDarkMode = () => {
+      // Here you could handle the form submission,
+      // e.g., send data to a server or display a message.
+      thankYouMessage.style.display = 'block'; // Show thank you message
+      feedbackForm.reset(); // Reset the form
+    });
 
+    // Dark mode toggle functionality
+    const darkModeToggle = document.getElementById('dark-mode-toggle');
+    darkModeToggle.addEventListener('click', () => {
       document.body.classList.toggle('dark-mode');
-    };
-
-    // Add event listener to a dark mode toggle button (if implemented)
-    document.querySelector('.dark-mode-toggle').addEventListener('click', toggleDarkMode);
+      document.querySelector('.navbar').classList.toggle('dark-mode');
+    });
   </script>
 </body>
 
diff --git a/Firebase.js b/Firebase.js
index 0c39d4e..4ef820c 100644
--- a/Firebase.js
+++ b/Firebase.js
@@ -1,8 +1,6 @@
 // Import the functions you need from the SDKs you need
 import { initializeApp } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-app.js";
 import { getAuth, GoogleAuthProvider, signInWithPopup } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-auth.js";
-// TODO: Add SDKs for Firebase products that you want to use
-// https://firebase.google.com/docs/web/setup#available-libraries
 
 // Your web app's Firebase configuration
 const firebaseConfig = {
@@ -20,20 +18,27 @@ const auth = getAuth(app);
 auth.languageCode = 'en';
 const provider = new GoogleAuthProvider();
 
-const google_login = document.getElementById("google_btn")
-google_login.addEventListener('click', () => {
+const googleLoginButton = document.getElementById("google_btn");
+googleLoginButton.addEventListener('click', () => {
     signInWithPopup(auth, provider)
         .then((result) => {
             // This gives you a Google Access Token. You can use it to access the Google API.
             const credential = GoogleAuthProvider.credentialFromResult(result);
             // The signed-in user info.
             const user = result.user;
-            console.log(user)
-            window.location.href = "index.html"
-        }).catch((error) => {
+            console.log(user);
+            // Redirect to index.html after successful login
+            window.location.href = "index.html";
+        })
+        .catch((error) => {
             // Handle Errors here.
             const errorCode = error.code;
             const errorMessage = error.message;
-            // ...
+            const email = error.email; // The email of the user's account used.
+            const credential = GoogleAuthProvider.credentialFromError(error); // Auth credential if available
+            
+            console.error("Error during sign-in:", errorCode, errorMessage, email, credential);
+            // You can show an alert or a message to the user
+            alert(`Sign-in failed: ${errorMessage}`);
         });
-})
\ No newline at end of file
+});
diff --git a/SOS.html b/SOS.html
index 73e9c5e..db66c59 100644
--- a/SOS.html
+++ b/SOS.html
@@ -344,294 +344,117 @@
     }
 
    .faq.active .faq-answer {
-    max-height: 200px; /* Set to a sufficient height to display content */
-    padding: 10px; /* Adds padding when expanded */
-   }
-    .logo a{
-      text-decoration: none;
-   }
-   .logo img:hover{
-    background-color: white;
-   }
-   .container{
-    width: 98vw;
-   }
-
-   #contact-hvr:hover{
-    background: none;
-   }
+    max-height: 100px; /* Set to a large value to show the content */
+    }
 
   </style>
 </head>
-
 <body>
-  <header class="sticky">
-    <div class="container">
-
-      <div class="logo">
-        <div class="brand-name">
-          <span class="letter red" style="--letter-index: 1">A</span>
-          <span class="letter red" style="--letter-index: 2">m</span>
-          <span class="letter red" style="--letter-index: 3">b</span>
-          <span class="letter red" style="--letter-index: 4">u</span>
-          <span class="letter" style="--letter-index: 5">F</span>
-          <span class="letter" style="--letter-index: 6">l</span>
-          <span class="letter" style="--letter-index: 7">o</span>
-          <span class="letter" style="--letter-index: 8">w</span>
-        </div>
-        <a href="./index.html"
-          ><img
-            src="images/logo2-w.webp"
-            alt="Ambulance Monitoring System Logo"
-            style="width: 50px; height: auto"
-        /></a>
-      </div>
+  <header>
+    <nav>
+      <input type="checkbox" id="check" />
+      <label class="checkbtn" for="check">
+        <i class="fas fa-bars"></i>
+      </label>
+      <label class="logo"><span class="brand-name"><span class="letter red">A</span><span class="letter">m</span><span class="letter">b</span><span class="letter">u</span><span class="letter">F</span><span class="letter">l</span><span class="letter">o</span><span class="letter">w</span></span></label>
+      <ul>
+        <li><a href="#home" id="home-link" class="active">Home</a></li>
+        <li><a href="#features">Features</a></li>
+        <li><a href="#team">Our Team</a></li>
+        <li><a href="#contact">Contact Us</a></li>
+        <li><a href="#faq">FAQs</a></li>
+      </ul>
+    </nav>
+  </header>
 
-      <nav class="menu">
-        <ul>
-          <li>
-            <a href="index.html" id="home-link"
-              ><i class="fa-solid fa-house"></i> Home</a
-            >
-          </li>
-          <li>
-            <a href="features.html" id="features-link" class="active"
-              ><i class="fa-solid fa-file"></i> Features</a
-            >
-          </li>
-          <li>
-            <a href="team.html" id="team-link"
-              ><i class="fa-solid fa-user-group"></i> Team</a
-            >
-          </li>
-          <li>
-            <a href="contact.html" id="contact-link"
-              ><i class="fa-solid fa-clipboard"></i> Contact</a
-            >
-          </li>
-          <li>
-            <a href="Feedback.html" id="team-link"
-              ><i class="fa-solid fa-user-group"></i> Feedback</a
-            >
-          </li>
-        </ul>
-      </nav>
-      <div class="buttons">
-        <a href="login.html" class="login">Log in</a>
-        <a href="up.html" class="get-started">Get started</a>
+  <div class="content">
+    <h1>Welcome to AmbuFlow</h1>
+    <div class="grid">
+      <div class="feature">
+        <img src="src/images/feature1.png" alt="Feature 1" />
+        <h2>Real-time Tracking</h2>
+        <p>Track ambulance locations in real-time for quicker response times.</p>
       </div>
-    </div>
-  </header>
-  <div class="content" id="main-content" >
-    <h1>SOS/ Quick Emergency Response</h1>
-    <!-- <div class="grid">
       <div class="feature">
-        <img src="images/emergency-w.jpg" alt="Emergency Response" />
-        <h2>Quick Emergency Response</h2>
-        <p>
-          Ensures patients receive timely medical assistance by locating the
-          nearest hospitals and ambulances.
-        </p>
+        <img src="src/images/feature2.png" alt="Feature 2" />
+        <h2>Emergency Alerts</h2>
+        <p>Receive instant alerts in case of emergencies for faster response.</p>
+      </div>
+      <div class="feature">
+        <img src="src/images/feature3.png" alt="Feature 3" />
+        <h2>24/7 Support</h2>
+        <p>Get support any time, day or night, for peace of mind.</p>
       </div>
-    </div> -->
-
-<!--Location -->
-
-    <h1>Fetch Location</h1>
-    <div style="padding-left: 550px;">
-      <button onclick="getLocation()"><h1>locate me<h1></button>
-    </div>
-    <p id="location"></p>
-    <p id="address"></p>
-    <h1>Call for help</h1>
-    <div style="display: flex; gap: 150px; padding-left: 350px;">
-      <a href="tel:100"><img src="police.svg" alt="" style="height: 100px;"><p style="color: #000;">Police<p></p></a>
-      <a href="tel:101"><img src="ambulance.svg" alt="" style="height: 100px;"><p style="color: #000;">Ambulance<p></p></a>
-      <a href="tel:101"><img src="hospital.svg" alt="" style="height: 100px;"><p style="color: #000;">Nearest Hospital<p></p></a>
     </div>
-    <script>
-        function getLocation() {
-            if (navigator.geolocation) {
-                navigator.geolocation.getCurrentPosition(showPosition, showError);
-            } else {
-                document.getElementById("location").innerHTML = "Geolocation is not supported by this browser.";
-            }
-        }
-
-        function showPosition(position) {
-            var lat = position.coords.latitude;
-            var lon = position.coords.longitude;
-            document.getElementById("location").innerHTML = "Latitude: " + lat + "<br>Longitude: " + lon;
-            fetch(`https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lon}&format=json`)
-                .then(response => response.json())
-                .then(data => {
-                    var locationName = data.display_name;
-                    document.getElementById("address").innerHTML = "Location Name: " + locationName;
-                })
-                .catch(error => {
-                    document.getElementById("address").innerHTML = "Unable to retrieve location name.";
-                });
-        }
-
-        function showError(error) {
-            switch(error.code) {
-                case error.PERMISSION_DENIED:
-                    document.getElementById("location").innerHTML = "User denied the request for Geolocation.";
-                    break;
-                case error.POSITION_UNAVAILABLE:
-                    document.getElementById("location").innerHTML = "Location information is unavailable.";
-                    break;
-                case error.TIMEOUT:
-                    document.getElementById("location").innerHTML = "The request to get user location timed out.";
-                    break;
-                case error.UNKNOWN_ERROR:
-                    document.getElementById("location").innerHTML = "An unknown error occurred.";
-                    break;
-            }
-        }
-    </script>
-  </div>
-
- <!--Location-->
 
+    <div class="team-feature">
+      <img src="src/images/team.jpg" alt="Our Team" />
+      <div>
+        <h2>Meet Our Team</h2>
+        <p>Our dedicated team is here to ensure you receive the best service possible.</p>
+      </div>
+    </div>
 
+    <div class="contact-feature">
+      <img src="src/images/contact.jpg" alt="Contact Us" />
+      <div>
+        <h2>Contact Us</h2>
+        <p>If you need assistance, reach out to us at support@ambuflow.com.</p>
+      </div>
+    </div>
 
-  <footer style= " color: #f3f4f6; text-align: center; width: 100%;">
-    <div style="background-color: #C4D7FF; color: #f3f4f6; ">
-      <div style="display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 0 auto;">
-        
-        <!-- Quick Links Section -->
-        <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
-          <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Quick Links</h3>
-          <ul style="list-style-type: none; padding: 0;">
-            <li><a href="about.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">About Us</a></li>
-            <li><a href="contact.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Contact Us</a></li>
-            <li><a href="privacy.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Privacy Policy</a></li>
-            <li><a href="terms.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Terms of Service</a></li>
-            <li><a href="sitemap.html" style="color: #000000;background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Site Map</a></li>          
-          </ul>
-        </div>
-  
-        <!-- Contact Information Section -->
-        <div style="flex: 1; min-width: 200px; margin-bottom: 10px;">
-          <h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3>
-          <p style="color: #000;">123 Emergency Lane, Mumbai, India</p>
-          <a href="mailto:emergency@ambulanceservice.in" style="color: #000000; background:none; cursor: pointer;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">emergency@ambulanceservice.in</a></p>
-          <p style="color: #000000;">Phone: <a href="tel:+91-911-1234567" style="color: #000000; background: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">+91-911-1234567</a></p>
+    <div class="faq-section" id="faq">
+      <h2 class="faq-h2">Frequently Asked Questions</h2>
+      <div class="faqs">
+        <div class="faq">
+          <button class="faq-question">What is AmbuFlow?
+            <span class="faq-toggle"><i class="fas fa-plus"></i></span>
+          </button>
+          <div class="faq-answer">
+            <p>AmbuFlow is a service that provides real-time tracking and support for emergency response services.</p>
+          </div>
         </div>
-  
-        <!-- Social Media Links -->
-        <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
-          <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3>
-        
-          <a href="https://www.facebook.com" class="hover-link">
-            <i class="fab fa-facebook-f"></i> Facebook
-          </a><br>
-        
-          <a href="https://www.twitter.com" class="hover-link">
-            <i class="fa-brands fa-x-twitter"></i> Twitter
-          </a><br>
-        
-          <a href="https://www.instagram.com" class="hover-link">
-            <i class="fab fa-instagram"></i> Instagram
-          </a><br>
-        
-          <a href="https://www.linkedin.com" class="hover-link">
-            <i class="fab fa-linkedin-in"></i> LinkedIn
-          </a>
+        <div class="faq">
+          <button class="faq-question">How can I request an ambulance?
+            <span class="faq-toggle"><i class="fas fa-plus"></i></span>
+          </button>
+          <div class="faq-answer">
+            <p>You can request an ambulance through our mobile app or by calling our emergency number.</p>
+          </div>
         </div>
-        
-        <style>
-          .hover-link {
-            color: #000000;
-            text-decoration: none;
-            margin-right: 10px;
-            background:none;
-            cursor: pointer;
-            transition: color 0.3s ease;
-          }
-        
-          .hover-link:hover {
-            color: blue;
-            background:none;
-          }
-        </style>
-        
-        
-
-        <!-- Newsletter Subscription -->
-        <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
-          <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to Our Newsletter</h3>
-          <form action="#">
-            <input type="email" placeholder="Your Email" style="padding: 10px; width: 80%; border: none; border-radius: 5px;" required><br><br>
-            <button type="submit" style="background-color: #e81a1a; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px;">Subscribe</button>
-          </form>
+        <div class="faq">
+          <button class="faq-question">Is there a cost for using AmbuFlow?
+            <span class="faq-toggle"><i class="fas fa-plus"></i></span>
+          </button>
+          <div class="faq-answer">
+            <p>Yes, there may be a cost associated with the ambulance service, which can be clarified upon request.</p>
+          </div>
         </div>
-        
+      </div>
+    </div>
+  </div>
 
+  <footer>
+    <div>
+      <div>
+        <h3 style="font-size: 1.5rem; color: #2980b9;">Subscribe to Our Newsletter</h3>
+        <form action="#" method="post">
+          <input type="email" placeholder="Enter your email" required style="padding: 10px; border-radius: 5px; border: 1px solid #ccc; width: 80%;">
+          <button type="submit" style="padding: 10px 15px; border: none; border-radius: 5px; background-color: #2980b9; color: white; cursor: pointer;">Subscribe</button>
+        </form>
       </div>
-      
     </div>
-    <hr>
-    <!-- Copyright Section -->
-    <strong><p style="background-color: #C4D7FF; color: #000000;  ">&copy; 2024 AmbuFlow. All rights reserved.</p></strong>
-    
   </footer>
-  
-  <script>
-    function changeContent(page) {
-      var links = document.querySelectorAll(".menu ul li a");
-      links.forEach((link) => link.classList.remove("active"));
-      document.getElementById(page + "-link").classList.add("active");
-    }
 
-    window.onload = function () {
-      document.getElementById("home-link").classList.add("active");
+  <script>
+    const faqQuestions = document.querySelectorAll('.faq-question');
 
-      // Add delay to each letter drop
-      const letters = document.querySelectorAll('.letter');
-      letters.forEach((letter, index) => {
-        letter.style.animationDelay = `${index * 0.1}s`;
+    faqQuestions.forEach(question => {
+      question.addEventListener('click', () => {
+        const faq = question.parentElement;
+        faq.classList.toggle('active');
       });
-    };
-
-    const thankYouMessage = document.getElementById("thankYouMessage");
-  const form = document.getElementById("subscribeForm");
-
-  form.addEventListener("submit", function(event) {
-    event.preventDefault(); // Prevent form from refreshing the page
-
-    // Show Thank You Message after subscribing
-    thankYouMessage.style.display = 'block';
-
-    // Optionally clear the input field after subscribing
-    document.getElementById("emailInput").value = '';
-  });
-
-  </script>
-  <script>
-    document.addEventListener('DOMContentLoaded', function() {
-    const faqButtons = document.querySelectorAll('.faq-question');
-
-    faqButtons.forEach(button => {
-        button.addEventListener('click', function() {
-            const faq = button.parentElement;
-            const answer = faq.querySelector('.faq-answer');
-
-            // Toggle active class
-            faq.classList.toggle('active');
-
-            // Control the max-height for slide effect
-            if (faq.classList.contains('active')) {
-                answer.style.maxHeight = answer.scrollHeight + 'px'; // Set the height based on content
-            } else {
-                answer.style.maxHeight = null; // Remove max-height to hide
-            }
-        });
-    });
     });
-
-
   </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/about.html b/about.html
index 1ef5ec7..fe43437 100644
--- a/about.html
+++ b/about.html
@@ -1,366 +1,297 @@
 <!DOCTYPE html>
 <html lang="en">
 
-  <head>
+<head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <link rel="shortcut icon" href="ambulance.png" type="image/x-icon">
-
     <title>About Us - AmbuFlow</title>
     <link rel="stylesheet" href="src/css/index.css" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
-    />
-    <!--Updated to latest version-->
-
-    <link rel="stylesheet" href="src/css/index.css" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
-    />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
     <style>
-      body {
-        font-family: "Roboto", sans-serif;
-        background-color: #0b0e11;
-        color: #d1d1d1;
-        margin: 0;
-        padding: 0;
-        overflow-x: hidden;
-      }
-      header {
-        background: linear-gradient(90deg, #b2d1ff, #93b6d3, #42a5f5);
-        padding: 30px 0 0 0;
-        text-align: center;
-        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-      }
-      header h1 {
-        color: #fff;
-        font-size: 2.4rem;
-        text-transform: uppercase;
-        letter-spacing: 3px;
-      }
-      main {
-        padding: 50px 20px;
-        max-width: 1200px;
-        margin: 0 auto;
-        background: #10141b;
-        border-radius: 15px;
-        box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
-      }
-      h2 {
-        color: #1e88e5;
-        font-size: 2.5rem;
-        border-bottom: 2px solid #1e88e5;
-        padding-bottom: 10px;
-        margin-bottom: 20px;
-        text-transform: uppercase;
-      }
-      p {
-        line-height: 1.8;
-        font-size: 1.1rem;
-        margin-bottom: 30px;
-      }
-      .highlight {
-        color: #f50057;
-        font-weight: bold;
-      }
-      ul {
-        margin-left: 40px;
-        list-style: none;
-      }
-      ul li {
-        margin-bottom: 15px;
-        position: relative;
-        padding-left: 25px;
-        font-size: 1.1rem;
-      }
-      ul li::before {
-        color: #1e88e5;
-        position: absolute;
-        left: 0;
-        top: 0;
-      }
-      footer {
-        background-color: #0d47a1;
-        color: white;
-        text-align: center;
-        padding: 20px 0;
-        position: relative;
-        bottom: 0;
-        width: 100%;
-      }
-      footer p {
-        margin: 0;
-      }
-
-      /* Buttons */
-      .btn {
-        display: inline-block;
-        background-color: #1e88e5;
-        color: white;
-        padding: 10px 20px;
-        text-decoration: none;
-        border-radius: 25px;
-        transition: 0.3s;
-      }
-      .btn:hover {
-        background-color: #42a5f5;
-        transform: scale(1.05);
-      }
-
-      /* Hover effect */
-      main:hover {
-        transition: 0.5s;
-        box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
-      }
-
-      /* Futuristic glow effect for text */
-      h1,
-      h2 {
-        text-shadow: 0 0 10px rgba(30, 136, 229, 0.8),
-          0 0 20px rgba(66, 165, 245, 0.5);
-      }
-
-      /* Futuristic neon glow for sections */
-      main {
-        border: 2px solid rgba(66, 165, 245, 0.2);
-      }
-
-      /* Responsive Design */
-      @media (max-width: 768px) {
-        header h1 {
-          font-size: 3rem;
+        body {
+            font-family: "Roboto", sans-serif;
+            background-color: #0b0e11;
+            color: #d1d1d1;
+            margin: 0;
+            padding: 0;
+            overflow-x: hidden;
         }
-        h2 {
-          font-size: 2rem;
+        header {
+            background: linear-gradient(90deg, #b2d1ff, #93b6d3, #42a5f5);
+            padding: 30px 0 0 0;
+            text-align: center;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
         }
-      }
-
-      @media (max-width: 480px) {
         header h1 {
-          font-size: 2.5rem;
+            color: #fff;
+            font-size: 2.4rem;
+            text-transform: uppercase;
+            letter-spacing: 3px;
+        }
+        main {
+            padding: 50px 20px;
+            max-width: 1200px;
+            margin: 0 auto;
+            background: #10141b;
+            border-radius: 15px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
         }
         h2 {
-          font-size: 1.8rem;
+            color: #1e88e5;
+            font-size: 2.5rem;
+            border-bottom: 2px solid #1e88e5;
+            padding-bottom: 10px;
+            margin-bottom: 20px;
+            text-transform: uppercase;
+        }
+        p {
+            line-height: 1.8;
+            font-size: 1.1rem;
+            margin-bottom: 30px;
+        }
+        .highlight {
+            color: #f50057;
+            font-weight: bold;
+        }
+        ul {
+            margin-left: 40px;
+            list-style: none;
+        }
+        ul li {
+            margin-bottom: 15px;
+            position: relative;
+            padding-left: 25px;
+            font-size: 1.1rem;
+        }
+        ul li::before {
+            color: #1e88e5;
+            position: absolute;
+            left: 0;
+            top: 0;
+        }
+        footer {
+            background-color: #0d47a1;
+            color: white;
+            text-align: center;
+            padding: 20px 0;
+            position: relative;
+            bottom: 0;
+            width: 100%;
+        }
+        footer p {
+            margin: 0;
+        }
+        .btn {
+            display: inline-block;
+            background-color: #1e88e5;
+            color: white;
+            padding: 10px 20px;
+            text-decoration: none;
+            border-radius: 25px;
+            transition: 0.3s;
+        }
+        .btn:hover {
+            background-color: #42a5f5;
+            transform: scale(1.05);
+        }
+        main:hover {
+            transition: 0.5s;
+            box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
+        }
+        h1, h2 {
+            text-shadow: 0 0 10px rgba(30, 136, 229, 0.8),
+            0 0 20px rgba(66, 165, 245, 0.5);
+        }
+        main {
+            border: 2px solid rgba(66, 165, 245, 0.2);
+        }
+        @media (max-width: 768px) {
+            header h1 {
+                font-size: 3rem;
+            }
+            h2 {
+                font-size: 2rem;
+            }
+        }
+        @media (max-width: 480px) {
+            header h1 {
+                font-size: 2.5rem;
+            }
+            h2 {
+                font-size: 1.8rem;
+            }
         }
-      }
     </style>
-  </head>
-  <body>
+</head>
+
+<body>
     <header>
         <div class="container">
-          
-          <div class="logo">
-    
-            <div class="brand-name">
-              <span class="ambu">Ambu</span>Flow
+            <div class="logo">
+                <div class="brand-name">
+                    <span class="ambu">Ambu</span>Flow
+                </div>
+                <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 50px; height: auto" />
+            </div>
+            <nav class="menu">
+                <ul>
+                    <li>
+                        <a href="./index.html" id="home-link" onclick="changeContent('home')"><i class="fa-solid fa-house"></i> Home</a>
+                    </li>
+                    <li>
+                        <a href="features.html" id="features-link" onclick="changeContent('features')"><i class="fa-solid fa-file"></i> Features</a>
+                    </li>
+                    <li>
+                        <a href="team.html" id="team-link" onclick="changeContent('team')"><i class="fa-solid fa-user-group"></i> Team</a>
+                    </li>
+                    <li>
+                        <a href="contact.html" id="contact-link" onclick="changeContent('contact')"><i class="fa-solid fa-phone"></i> Contact</a>
+                    </li>
+                    <li>
+                        <a href="Feedback.html" id="feedback-link" onclick="changeContent('feedback')"><i class="fa-solid fa-clipboard"></i> Feedback</a>
+                    </li>
+                </ul>
+            </nav>
+            <div class="buttons">
+                <a href="login.html" class="login">Log in</a>
+                <a href="up.html" class="get-started">Get started</a>
             </div>
-            <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 50px; height: auto" />
-    
-          </div>
-          <nav class="menu">
-            <ul>
-              <li>
-                <a href="./index.html" id="home-link" onclick="changeContent('home')"><i class="fa-solid fa-house"></i> Home</a>
-              </li>
-              <li>
-                <a href="features.html" id="features-link" onclick="changeContent('features')"><i class="fa-solid fa-file"></i> Features</a>
-              </li>
-              <li>
-                <a href="team.html" id="team-link" onclick="changeContent('team')"><i class="fa-solid fa-user-group"></i> Team</a>
-              </li>
-              <li>
-                <a href="contact.html" id="contact-link" onclick="changeContent('contact')"><i class="fa-solid fa-phone"></i> Contact</a>
-              </li>
-              <li>
-                <a href="Feedback.html" id="feedback-link" onclick="changeContent('feedback')"><i class="fa-solid fa-clipboard"></i> Feedback</a>
-              </li>
-            </ul>
-          </nav>
-          <div class="buttons">
-            <a href="login.html" class="login">Log in</a>
-            <a href="up.html" class="get-started">Get started</a>
-          </div>
         </div>
-        <h1 >About AmbuFlow</h1>
-      </header>
+        <h1>About AmbuFlow</h1>
+    </header>
 
     <main style="margin-top:30px;">
-      <h2>Who We Are</h2>
-      <p>
-        <span class="highlight">AmbuFlow</span> is a dynamic project developed
-        under Bobble AI, combining cutting-edge technology and healthcare
-        expertise to revolutionize emergency medical response. Our core goal is
-        to create faster, more efficient communication between patients,
-        ambulances, and hospitals during critical times.
-      </p>
+        <h2>Who We Are</h2>
+        <p>
+            <span class="highlight">AmbuFlow</span> is a dynamic project developed
+            under Bobble AI, combining cutting-edge technology and healthcare
+            expertise to revolutionize emergency medical response. Our core goal is
+            to create faster, more efficient communication between patients,
+            ambulances, and hospitals during critical times.
+        </p>
 
-      <p>
-        Using advanced features like <strong>real-time GPS tracking</strong> and
-        <strong>Google Maps integration</strong>, we ensure that the nearest
-        medical help is always accessible when needed the most. AmbuFlow helps
-        save lives by reducing response times in emergencies.
-      </p>
+        <p>
+            Using advanced features like <strong>real-time GPS tracking</strong> and
+            <strong>Google Maps integration</strong>, we ensure that the nearest
+            medical help is always accessible when needed the most. AmbuFlow helps
+            save lives by reducing response times in emergencies.
+        </p>
 
-      <h2>Our Vision</h2>
-      <p>
-        We envision a future where emergency services are fast, accessible, and
-        reliable for everyone. Our platform is designed to transform how medical
-        assistance is delivered, helping to reduce the time it takes to respond
-        to emergency situations, and ultimately improving healthcare outcomes
-        for communities worldwide.
-      </p>
+        <h2>Our Vision</h2>
+        <p>
+            We envision a future where emergency services are fast, accessible, and
+            reliable for everyone. Our platform is designed to transform how medical
+            assistance is delivered, helping to reduce the time it takes to respond
+            to emergency situations, and ultimately improving healthcare outcomes
+            for communities worldwide.
+        </p>
 
-      <h2>Why AmbuFlow?</h2>
-      <ul>
-        <li>
-          <strong>Quick Emergency Response:</strong> Connect with the closest
-          medical services and ambulances through real-time tracking.
-        </li>
-        <li>
-          <strong>Real-Time Navigation:</strong> Optimized routes for
-          ambulances, considering real-time traffic updates, to ensure the
-          fastest response time.
-        </li>
-        <li>
-          <strong>Seamless Communication:</strong> Simplifying communication
-          between patients, hospitals, and ambulance drivers to ensure efficient
-          medical care coordination.
-        </li>
-        <li>
-          <strong>Resource Optimization:</strong> Hospitals can manage incoming
-          patients and resources with better precision using live data from the
-          app.
-        </li>
-        <li>
-          <strong>Simple User Interface:</strong> Our interface is easy to
-          navigate, even in high-stress situations, so users can quickly get
-          help.
-        </li>
-      </ul>
+        <h2>Why AmbuFlow?</h2>
+        <ul>
+            <li>
+                <strong>Quick Emergency Response:</strong> Connect with the closest
+                medical services and ambulances through real-time tracking.
+            </li>
+            <li>
+                <strong>Real-Time Navigation:</strong> Optimized routes for
+                ambulances, considering real-time traffic updates, to ensure the
+                fastest response time.
+            </li>
+            <li>
+                <strong>Seamless Communication:</strong> Simplifying communication
+                between patients, hospitals, and ambulance drivers to ensure efficient
+                medical care coordination.
+            </li>
+            <li>
+                <strong>Resource Optimization:</strong> Hospitals can manage incoming
+                patients and resources with better precision using live data from the
+                app.
+            </li>
+            <li>
+                <strong>Simple User Interface:</strong> Our interface is easy to
+                navigate, even in high-stress situations, so users can quickly get
+                help.
+            </li>
+        </ul>
 
-      <h2>Our Technology</h2>
-      <ul>
-        <li>
-          <strong>HTML 📝:</strong> Used to build the core structure of our web
-          application.
-        </li>
-        <li>
-          <strong>CSS 🎨:</strong> Brings style and aesthetics to our app,
-          creating a pleasant user experience.
-        </li>
-        <li>
-          <strong>JavaScript 💻:</strong> Provides dynamic real-time ambulance
-          and hospital tracking functionality.
-        </li>
-        <li>
-          <strong>Google API Keys 🔑:</strong> Enables integration of Google
-          Maps for precise tracking and location data.
-        </li>
-      </ul>
+        <h2>Our Technology</h2>
+        <ul>
+            <li>
+                <strong>HTML 📝:</strong> Used to build the core structure of our web
+                application.
+            </li>
+            <li>
+                <strong>CSS 🎨:</strong> Brings style and aesthetics to our app,
+                creating a pleasant user experience.
+            </li>
+            <li>
+                <strong>JavaScript 💻:</strong> Provides dynamic real-time ambulance
+                and hospital tracking functionality.
+            </li>
+            <li>
+                <strong>Google API Keys 🔑:</strong> Enables integration of Google
+                Maps for precise tracking and location data.
+            </li>
+        </ul>
 
-      <h2>Support Us</h2>
-      <p>
-        We believe that <strong>AmbuFlow</strong> can make a significant impact
-        in the healthcare sector. You can support us by contributing to our
-        project on GitHub, sharing it with others, or simply giving us a star!
-        Your support will help us continue to enhance emergency medical services
-        across the globe.
-      </p>
-      <a href="https://github.com/mansiruhil13/Bobble-AI" class="btn"
-        >Contribute on GitHub</a
-      >
+        <h2>Support Us</h2>
+        <p>
+            We believe that <strong>AmbuFlow</strong> can make a significant impact
+            in the healthcare sector. You can support us by contributing to our
+            project on GitHub, sharing it with others, or simply giving us a star!
+            Your support will help us continue to enhance emergency medical services
+            across the globe.
+        </p>
+        <a href="https://github.com/mansiruhil13/Bobble-AI" class="btn">Contribute on GitHub</a>
     </main>
+
     <footer style="background-color:black; color:#f3f4f6; text-align: center; width: 100%; margin-top: 20px;">
-      <div style="background-color: #C4D7FF; color: #f3f4f6; ">
-        <div style="display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 0 auto;">
-  
-          <!-- Quick Links Section -->
-          <div 
-          style="flex: 1; 
-          display: flex;
-          flex-direction: column; 
-          align-items: start; 
-          min-width: 200px; 
-          margin-bottom: 20px;">
-            <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Quick Links</h3>
-            <ul style="list-style-type: none; padding: 0;">
-              <li><a href="about.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">About Us</a></li>
-              <li><a href="contact.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Contact Us</a></li>
-              <li><a href="privacy.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Privacy Policy</a></li>
-              <li><a href="terms.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Terms of Service</a></li>
-              <li><a href="sitemap.html" style="color: #000000;background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Site Map</a></li>
-              <!-- Add FAQ link here -->
-              <li><a href="faq.html" style="color: #000000;background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">FAQ</a></li>
-            </ul>
-          </div>
-  
-          <!-- Contact Information Section -->
-          <div 
-          style="flex: 1; 
-          min-width: 200px; 
-          margin-bottom: 10px;">
-            <h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3>
-            <p style="color: #000;">123 Emergency Lane, Mumbai, India</p>
-            <a href="mailto:emergency@ambulanceservice.in" style="color: #000000; background:none; cursor: pointer;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">emergency@ambulanceservice.in</a></p>
-            <p style="color: #000000;">Phone: <a href="tel:+91-911-1234567" style="color: #000000; background: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">+91-911-1234567</a></p>
-          </div>
-  
-          <!-- Modified the looks of the social icons -->
-          <!-- Social Media Links -->
-          <div style="text-align: center; min-width: 200px; color: black;">
-            <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3>
-            <div style="display: flex; justify-content: center; align-items: center; gap: 15px;">
-              <a href="https://www.facebook.com" class="social-icon facebook no-hover-effect"
-                style="color: black; text-decoration: none; font-size: 24px;"><i class="fab fa-facebook"></i></a>
-              <a href="https://www.twitter.com" class="social-icon twitter no-hover-effect"
-                style="color: black; text-decoration: none; font-size: 24px;"><i class="fa-brands fa-x-twitter"></i></a>
-              <a href="https://www.instagram.com" class="social-icon instagram no-hover-effect"
-                style="color: black; text-decoration: none; font-size: 24px;"><i class="fab fa-instagram"></i></a>
-              <a href="https://www.linkedin.com" class="social-icon linkedin no-hover-effect"
-                style="color: black; text-decoration: none; font-size: 24px;"><i class="fab fa-linkedin-in"></i></a>
+        <div style="background-color: #C4D7FF; color: #f3f4f6;">
+            <div style="display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 0 auto;">
+                <div style="flex: 1; display: flex; flex-direction: column; align-items: start; min-width: 200px; margin-bottom: 20px;">
+                    <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Quick Links</h3>
+                    <ul style="list-style-type: none; padding: 0;">
+                        <li><a href="about.html" style="color: #000000; text-decoration: none;">About Us</a></li>
+                        <li><a href="contact.html" style="color: #000000; text-decoration: none;">Contact Us</a></li>
+                        <li><a href="privacy.html" style="color: #000000; text-decoration: none;">Privacy Policy</a></li>
+                        <li><a href="terms.html" style="color: #000000; text-decoration: none;">Terms of Service</a></li>
+                        <li><a href="sitemap.html" style="color: #000000; text-decoration: none;">Site Map</a></li>
+                        <li><a href="faq.html" style="color: #000000; text-decoration: none;">FAQ</a></li>
+                    </ul>
+                </div>
+
+                <div style="flex: 1; min-width: 200px; margin-bottom: 10px;">
+                    <h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3>
+                    <p style="color: #000;">123 Emergency Lane, Mumbai, India</p>
+                    <p style="color: #000000;">Email: <a href="mailto:emergency@ambulanceservice.in" style="color: #000000; text-decoration: none;">emergency@ambulanceservice.in</a></p>
+                    <p style="color: #000000;">Phone: <a href="tel:+91-911-1234567" style="color: #000000; text-decoration: none;">+91-911-1234567</a></p>
+                </div>
+
+                <div style="text-align: center; min-width: 200px; color: black;">
+                    <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3>
+                    <div style="display: flex; justify-content: center; align-items: center; gap: 15px;">
+                        <a href="https://www.facebook.com" class="social-icon facebook" style="color: black; text-decoration: none; font-size: 24px;"><i class="fab fa-facebook"></i></a>
+                        <a href="https://www.twitter.com" class="social-icon twitter" style="color: black; text-decoration: none; font-size: 24px;"><i class="fa-brands fa-x-twitter"></i></a>
+                        <a href="https://www.instagram.com" class="social-icon instagram" style="color: black; text-decoration: none; font-size: 24px;"><i class="fab fa-instagram"></i></a>
+                        <a href="https://www.linkedin.com" class="social-icon linkedin" style="color: black; text-decoration: none; font-size: 24px;"><i class="fab fa-linkedin-in"></i></a>
+                    </div>
+                </div>
+
+                <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
+                    <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to Our Newsletter</h3>
+                    <form action="#">
+                        <input type="email" placeholder="Your Email" style="padding: 10px; width: 80%; border: none; border-radius: 5px;" required><br><br>
+                        <button type="submit" style="background-color: #e81a1a; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px;">Subscribe</button>
+                    </form>
+                </div>
             </div>
-          </div>
-  
-          <!-- Newsletter Subscription -->
-          <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
-            <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to Our Newsletter</h3>
-            <form action="#">
-              <input type="email" placeholder="Your Email"
-                style="padding: 10px; width: 80%; border: none; border-radius: 5px;" required><br><br>
-              <button type="submit"
-                style="background-color: #e81a1a; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px;">Subscribe</button>
-            </form>
-          </div>        
-          <style>
-            .hover-link {
-              color: #000000;
-              text-decoration: none;
-              margin-right: 10px;
-              background:none;
-              cursor: pointer;
-              transition: color 0.3s ease;
-            }
-          
-            .hover-link:hover {
-              color: blue;
-              background:none;
-            }
-          </style>
-  
         </div>
-  
-      </div>
     </footer>
     <div style="background-color: black;">
-      <p>© 2024 AmbuFlow - All Rights Reserved</p>
+        <p>© 2024 AmbuFlow - All Rights Reserved</p>
     </div>
-  </body>
+</body>
+
 </html>
diff --git a/ambtracker.html b/ambtracker.html
index bf1c5fe..b6fb787 100644
--- a/ambtracker.html
+++ b/ambtracker.html
@@ -2,170 +2,235 @@
 <html lang="en">
 
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Ambulance GPS Tracking System</title>
-  <link rel="stylesheet" href="src/css/manage.css" /> <!-- For Header -->
-  <link rel="shortcut icon" href="ambulance.png" type="image/x-icon">
-  <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" />
-  <style>
-    /* Full page styles */
-    html,
-    body {
-      height: 100%;
-      margin: 0;
-      padding: 0;
-    }
-
-    html {
-      overflow-y: scroll;
-    }
-
-    html::-webkit-scrollbar {
-      width: 9px;
-      transition: width 0.3s ease;
-      margin: 10px;
-    }
-
-    html::-webkit-scrollbar-thumb {
-      border-radius: 10px;
-      background: rgba(216, 216, 216, 0.74);
-      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
-    }
-
-    html::-webkit-scrollbar-thumb:window-inactive {
-      background: rgb(156, 156, 156);
-    }
-
-
-    /* Map container */
-    #map {
-      height: 90%;
-      width: 100%;
-    }
-
-    /* Header styles */
-    h1 {
-      text-align: center;
-      background-color: #4caf50;
-      color: white;
-      padding: 15px;
-      margin: 0;
-    }
-
-    /* Add a loading spinner for the map */
-    #loadingSpinner {
-      display: none;
-      /* Hidden by default */
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      z-index: 1000;
-    }
-  </style>
-  <!-- Include the Google Maps JavaScript API -->
-  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKR3agIMLtauzDhz4fCu3heww0BV_81H4" async
-    defer></script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ambulance GPS Tracking System</title>
+    <link rel="stylesheet" href="src/css/manage.css" />
+    <link rel="shortcut icon" href="ambulance.png" type="image/x-icon">
+    <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" />
+    <style>
+        /* Full page styles */
+        html,
+        body {
+            height: 100%;
+            margin: 0;
+            padding: 0;
+        }
+
+        html {
+            overflow-y: scroll;
+        }
+
+        html::-webkit-scrollbar {
+            width: 9px;
+            transition: width 0.3s ease;
+            margin: 10px;
+        }
+
+        html::-webkit-scrollbar-thumb {
+            border-radius: 10px;
+            background: rgba(216, 216, 216, 0.74);
+            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
+        }
+
+        html::-webkit-scrollbar-thumb:window-inactive {
+            background: rgb(156, 156, 156);
+        }
+
+        /* Map container */
+        #map {
+            height: 90%;
+            width: 100%;
+        }
+
+        /* Header styles */
+        header {
+            background-color: #4caf50;
+            color: white;
+        }
+
+        h1 {
+            text-align: center;
+            padding: 15px;
+            margin: 0;
+        }
+
+        /* Loading spinner styles */
+        #loadingSpinner {
+            display: none;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 1000;
+            color: white;
+            font-size: 24px;
+        }
+
+        /* Navbar styles */
+        .navbar {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 10px 20px;
+            background: #4caf50;
+        }
+
+        .navbar-logo img {
+            height: 50px;
+            margin-right: 10px;
+        }
+
+        .navbar-links {
+            list-style: none;
+            display: flex;
+            gap: 20px;
+        }
+
+        .navbar-links li {
+            display: inline;
+        }
+
+        .navbar-links a {
+            color: white;
+            text-decoration: none;
+            font-weight: bold;
+        }
+
+        .resp {
+            display: none; /* Hidden by default, can be toggled for responsiveness */
+        }
+
+        .dropdown-menu {
+            display: none;
+            position: absolute;
+            background: white;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+            z-index: 999;
+            width: 100%;
+        }
+
+        .navbar-links2 {
+            list-style: none;
+            padding: 10px;
+            margin: 0;
+        }
+
+        .navbar-links2 li {
+            margin: 5px 0;
+        }
+
+        .navbar-links2 a {
+            text-decoration: none;
+            color: black;
+        }
+
+        @media (max-width: 768px) {
+            .resp {
+                display: block;
+            }
+            .navbar-links {
+                display: none; /* Hide links in mobile view */
+            }
+        }
+    </style>
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKR3agIMLtauzDhz4fCu3heww0BV_81H4" async defer></script>
 </head>
 
 <body>
-  <!-- Header -->
-  <header>
-    <nav class="navbar">
-        <div class="navbar-logo">
-            <img src="./images/manageLogo.png"></img>
-            <h2 style="display: flex;">ambu<p style="color: #3DBDEC;">Flow</p></h2>
-        </div>
-        <ul class="navbar-links">
+    <!-- Header -->
+    <header>
+        <nav class="navbar">
+            <div class="navbar-logo">
+                <img src="./images/manageLogo.png" alt="Logo">
+                <h2 style="display: flex;">ambu<span style="color: #3DBDEC;">Flow</span></h2>
+            </div>
+            <ul class="navbar-links">
+                <li><a href="hospital.html">Dashboard</a></li>
+                <li><a href="manage.html">Manage Status</a></li>
+                <li><a href="driver.html">Manage Driver</a></li>
+                <li><a href="ambtracker.html">Manage Ambulance</a></li>
+                <li id="logout"><a href="#" onclick="logout()"><i class="fa-solid fa-right-from-bracket"></i></a></li>
+            </ul>
+            <div class="resp">
+                <button id="dropdown"><i class="fa-solid fa-bars"></i></button>
+                <li id="logout"><a href="#" onclick="logout()"><i class="fa-solid fa-right-from-bracket" style="color: white;"></i></a></li>
+            </div>
+        </nav>
+    </header>
+
+    <!-- Dropdown -->
+    <div class="dropdown-menu">
+        <ul class="navbar-links2">
             <li><a href="hospital.html">Dashboard</a></li>
             <li><a href="manage.html">Manage Status</a></li>
             <li><a href="driver.html">Manage Driver</a></li>
             <li><a href="ambtracker.html">Manage Ambulance</a></li>
-            <li id="logout"><a href="#" onclick="logout()"><i class="fa-solid fa-right-from-bracket"></i></a></li>
         </ul>
-        <div class="resp">
-            <button id="dropdown"><i class="fa-solid fa-bars"></i></button>
-            <li id="logout"><a href="#" onclick="logout()"><i class="fa-solid fa-right-from-bracket" style="color: white;"></i></a></li>
-        </div>
-    </nav>
-</header>
-
-<!-- Dropdown -->
-<div class="dropdown-menu">
-    <ul class="navbar-links2">
-        <li><a href="hospital.html">Dashboard</a></li>
-        <li><a href="manage.html">Manage Status</a></li>
-        <li><a href="driver.html">Manage Driver</a></li>
-        <li><a href="ambtracker.html">Manage Ambulance</a></li>
-    </ul>
- </div>
-
-  <!-- Map container -->
-  <div id="map"></div>
-
-  <!-- Loading Spinner -->
-  <div id="loadingSpinner">Loading...</div>
-
-  <!-- Script to load the map and track ambulance -->
-  <script>
-    let map, marker;
-
-    // Initial position of the ambulance (example coordinates)
-    const ambulancePosition = { lat: 28.7, lng: 77.1 }; // San Francisco
-
-    // Function to initialize the map
-    function initMap() {
-      loadingSpinner.style.display = "block"; // Show spinner
-      map = new google.maps.Map(document.getElementById("map"), {
-        center: ambulancePosition,
-        zoom: 15,
-      });
-      loadingSpinner.style.display = "none"; // Hide spinner after map is loaded
-      marker = new google.maps.Marker({
-        position: ambulancePosition,
-        map: map,
-        title: "Ambulance Location",
-        draggable: false,
-        animation: google.maps.Animation.DROP,
-      });
-      setInterval(updateAmbulancePosition, 5000);
-    }
-
-    // Function to simulate the update of the ambulance's GPS position
-    function updateAmbulancePosition() {
-      const newLat = ambulancePosition.lat + (Math.random() * 0.001 - 0.0005);
-      const newLng = ambulancePosition.lng + (Math.random() * 0.001 - 0.0005);
-      const newPosition = { lat: newLat, lng: newLng };
-      marker.setPosition(newPosition);
-      map.setCenter(newPosition);
-    }
-
-    // Initialize the map when the window loads
-    window.onload = initMap;
-
-    // Dropdown
-    let flag = false
-    document.getElementById('dropdown').addEventListener('click', () => {
-      const dropdown = document.querySelector('.dropdown-menu');
-      if (flag) {
-        dropdown.style.display = 'none';
-        flag = false;
-      } else {
-          dropdown.style.display = 'block';
-          flag = true;
-      }
-    });
-
-    function logout() {
-      const confirmLogout = confirm('Are you sure you want to logout?');
-        if (confirmLogout) {
-          localStorage.removeItem('userID');
-          localStorage.removeItem('JWTtoken');
-          window.location.href = 'index.html';
-          alert("Logged out successfully!");
-      }
-    }  
-  </script>
+    </div>
+
+    <!-- Map container -->
+    <div id="map"></div>
+
+    <!-- Loading Spinner -->
+    <div id="loadingSpinner">Loading...</div>
+
+    <!-- Script to load the map and track ambulance -->
+    <script>
+        let map, marker;
+
+        // Initial position of the ambulance (example coordinates)
+        const ambulancePosition = { lat: 28.7, lng: 77.1 }; // Example coordinates
+
+        // Function to initialize the map
+        function initMap() {
+            const loadingSpinner = document.getElementById("loadingSpinner");
+            loadingSpinner.style.display = "block"; // Show spinner
+            map = new google.maps.Map(document.getElementById("map"), {
+                center: ambulancePosition,
+                zoom: 15,
+            });
+            loadingSpinner.style.display = "none"; // Hide spinner after map is loaded
+            marker = new google.maps.Marker({
+                position: ambulancePosition,
+                map: map,
+                title: "Ambulance Location",
+                draggable: false,
+                animation: google.maps.Animation.DROP,
+            });
+            setInterval(updateAmbulancePosition, 5000);
+        }
+
+        // Function to simulate the update of the ambulance's GPS position
+        function updateAmbulancePosition() {
+            const newLat = ambulancePosition.lat + (Math.random() * 0.001 - 0.0005);
+            const newLng = ambulancePosition.lng + (Math.random() * 0.001 - 0.0005);
+            const newPosition = { lat: newLat, lng: newLng };
+            marker.setPosition(newPosition);
+            map.setCenter(newPosition);
+        }
+
+        // Initialize the map when the window loads
+        window.onload = initMap;
+
+        // Dropdown functionality
+        let flag = false;
+        document.getElementById('dropdown').addEventListener('click', () => {
+            const dropdown = document.querySelector('.dropdown-menu');
+            dropdown.style.display = flag ? 'none' : 'block';
+            flag = !flag;
+        });
+
+        function logout() {
+            const confirmLogout = confirm('Are you sure you want to logout?');
+            if (confirmLogout) {
+                localStorage.removeItem('userID');
+                localStorage.removeItem('JWTtoken');
+                window.location.href = 'index.html';
+                alert("Logged out successfully!");
+            }
+        }
+    </script>
 </body>
-</html>
\ No newline at end of file
+
+</html>
diff --git a/chatbot.html b/chatbot.html
index a175812..63a5005 100644
--- a/chatbot.html
+++ b/chatbot.html
@@ -1,463 +1,249 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Bobble Ai-Chat Bot</title>
-    <link
-      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-    />
+    <title>Enhanced Chatbot Interface</title>
+
+    <!-- Tailwind CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
+
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
+
+    <!-- Custom CSS -->
     <link href="Style.css" rel="stylesheet" />
+
+    <!-- Highlight.js for Code Highlighting -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/a11y-dark.min.css"
-    />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/a11y-dark.min.css" />
+
+    <!-- Font Awesome for Icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+    <!-- Marked.js for Markdown Parsing -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>
-  </head>
-  <body class="bg-gradient-to-r from-blue-400 to-indigo-300 flex items-center justify-center min-h-screen">
-    <div id="Loader"></div>
-    <div
-      class="flex flex-col items-center justify-center w-full max-w-xl space-y-4"
-    >
-      <div class="w-full flex justify-center">
-        <img
-          src="boy.png"
-          alt="Chat Bot"
-          class="h-42 w-42 object-cover rounded-lg shadow-lg"
-        />
-      </div>
-
-      <div class="chat-container w-full bg-white p-6 rounded-lg shadow-xl">
-        <div id="output-field" class="text-center text-lg font-semibold text-gray-700 mb-3">
-          How can I help you today?
-        </div>
-        <div
-          id="output-container"
-          class="mb-3 overflow-auto"
-          style="max-height: 300px"
-        ></div>
-        <div class="input-group mb-3 flex items-center space-x-2">
-          <div id="image-preview-container" class="flex items-center">
-            <span
-              id="image-preview"
-              class="flex items-center space-x-2 hidden"
-              style="display: none"
-            >
-              <img src="" alt="Image preview" class="h-10 mr-2 object-cover rounded-lg" />
-              <button
-                type="button"
-                id="clear-image"
-                class="text-red-600 text-2xl leading-none"
-                aria-label="Close"
-              >
-                &times;
-              </button>
-            </span>
-          </div>
-          <input
-            type="text"
-            id="prompt-input"
-            class="form-control flex-1 p-2 border border-gray-300 rounded-lg"
-            placeholder="Type your prompt here..."
-            aria-label="Message input"
-          />
-          <div id="microphone-animation" class="hidden">
-          <span class="dot"></span>
-          <span class="dot"></span>
-          <span class="dot"></span>
-          </div>
-          <button
-            class="p-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition"
-            id="inputGroupFileAddon"
-            onclick="document.getElementById('image-input').click();"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="25"
-              height="25"
-              fill="currentColor"
-              class="bi bi-image"
-              viewBox="0 0 16 16"
-            >
-              <path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0" />
-              <path
-                d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1z"
-              />
-            </svg>
-          </button>
-          <input type="file" id="image-input" accept="image/*" class="hidden" />
-          <button id="voiceBtn" class="p-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition"><i class="fa fa-microphone" style="font-size:24px"></i></button>
-          <button id="generate-btn" class="btn btn-primary">Send</button>
-        </div>
-      </div>
-    </div>
 
+    <!-- Inline Styles for quick customizations -->
     <style>
-      .chat-container {
-        width: 100%;
-        max-width: 500px;
-        padding: 20px;
-        background-color: white;
-        border-radius: 12px;
-        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-      }
-
-      body,
-      html {
-        margin: 0;
-        padding: 0;
-      }
-      .user-message {
-        text-align: right;
-        background-color: #f0f0f0; 
-        border-radius: 15px 15px 0px 15px;
-        padding: 10px 10px 5px 10px;
-        margin: 10px;
-        max-width: 60%;
-        float: right;
-        clear: both;
-    }
-
-    .ai-message {
-      text-align: left; 
-      background-color: #e0f7fa; 
-      border-radius: 15px 15px 15px 0px; 
-      padding: 10px 10px 5px 10px;
-      margin: 10px;
-      max-width: 60%;
-      float: left; 
-      clear: both;
-    }
-      
-    #microphone-animation {
-      display: none; /* Hide initially */
-      align-items: center;
-      justify-content: center;
-      margin-left: 10px; /* Adjust as needed */
-    }
-
-    .dot {
-      height: 5px; /* Size of the dots */
-      width: 5px;
-      margin: 0 3px; /* Space between dots */
-      background-color: #007bff; /* Color of the dots */
-      border-radius: 50%; /* Make it circular */
-      animation: bounce 0.6s infinite alternate; /* Animation */
-    }
-
-    .dot:nth-child(1) {
-      animation-delay: 0s;
-    }
-
-    .dot:nth-child(2) {
-      animation-delay: 0.2s;
-    }
-
-    .dot:nth-child(3) {
-      animation-delay: 0.4s;
-    }
-
-    @keyframes bounce {
-      0% {
-        transform: translateY(0);
-      }
-      100% {
-        transform: translateY(-10px); /* Distance to bounce */
-      }
-    }
+        /* General body styling */
+        body {
+            font-family: Arial, sans-serif;
+            background: linear-gradient(to right, #4facfe, #00f2fe);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+        }
+
+        /* Chat container styling */
+        .chat-container {
+            width: 100%;
+            max-width: 600px;
+            background-color: white;
+            border-radius: 12px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+        }
+
+        /* Message styling */
+        .message {
+            margin: 10px 0;
+            padding: 10px;
+            border-radius: 10px;
+            max-width: 80%;
+            word-wrap: break-word;
+        }
+
+        /* User and AI message styles */
+        .user-message {
+            background-color: #d1e7dd;
+            align-self: flex-end;
+        }
+
+        .ai-message {
+            background-color: #cfe2ff;
+            align-self: flex-start;
+        }
+
+        /* Loader styling */
+        #loader {
+            display: none;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 1.5rem;
+            color: #007bff;
+        }
+
+        /* Input area styling */
+        .input-group {
+            margin-top: 15px;
+        }
+
+        /* Status message styling */
+        .status-message {
+            text-align: center;
+            font-size: 0.9rem;
+            color: #888;
+        }
 
     </style>
+</head>
+
+<body>
+    <!-- Loader icon for async operations -->
+    <div id="loader">Loading...</div>
+
+    <!-- Chat container with overflow handling -->
+    <div class="chat-container">
+
+        <!-- Container for chat messages -->
+        <div id="output-container" class="overflow-auto" style="max-height: 300px;"></div>
+
+        <!-- Status message area -->
+        <p id="status-message" class="status-message">Chatbot is ready to chat!</p>
+
+        <!-- User input section -->
+        <div class="input-group">
+            <input type="text" id="prompt-input" class="form-control" placeholder="Type your message here..." />
+            <button id="send-btn" class="btn btn-primary">Send</button>
+            <button id="settings-btn" class="btn btn-secondary">Settings</button>
+        </div>
+
+        <!-- Settings modal for customizing language and theme -->
+        <div id="settings-modal" class="modal" tabindex="-1">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">Settings</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                    </div>
+                    <div class="modal-body">
+                        <!-- Language selection -->
+                        <h6>Language</h6>
+                        <select id="language-select" class="form-select">
+                            <option value="en">English</option>
+                            <option value="es">Spanish</option>
+                            <option value="fr">French</option>
+                        </select>
+
+                        <!-- Theme selection -->
+                        <h6>Theme</h6>
+                        <select id="theme-select" class="form-select">
+                            <option value="light">Light</option>
+                            <option value="dark">Dark</option>
+                        </select>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                        <button type="button" class="btn btn-primary" id="save-settings">Save changes</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 
-  <script type="importmap">
-      {
-        "imports": {
-          "@google/generative-ai": "https://esm.run/@google/generative-ai"
+    <!-- Google Generative AI script integration -->
+    <script type="importmap">
+        {
+            "imports": {
+                "@google/generative-ai": "https://esm.run/@google/generative-ai"
+            }
         }
-      }
     </script>
-
-  <script type="module">
-    import {
-      GoogleGenerativeAI,
-      HarmBlockThreshold,
-      HarmCategory,
-    } from "@google/generative-ai";
-
-    const API_KEY = "AIzaSyBF265bY6o63VuPypal-5w0-b7sr0N_O3A"; // Replace with your gemini-api actual API key
-    const genAI = new GoogleGenerativeAI(API_KEY);
-    let chat;
-
-    const safetySettings = [
-      {
-        category: HarmCategory.HARM_CATEGORY_HARASSMENT,
-        threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH,
-      },
-    ];
-
-    async function fileToGenerativePart(file) {
-      return new Promise((resolve) => {
-        const reader = new FileReader();
-        reader.onloadend = () => {
-          const base64Data = reader.result.split(",")[1];
-          resolve({ inlineData: { data: base64Data, mimeType: file.type } });
-        };
-        reader.readAsDataURL(file);
-      });
-    }
-
-    async function sendMessage(prompt, imageParts = []) {
-      let model;
-      let result;
-      clearGreeting(); // Clear the greeting after sending the message
-
-      if (imageParts.length > 0) {
-        model = genAI.getGenerativeModel({
-          model: "gemini-pro-vision",
-          safetySettings,
+    <script type="module">
+        import { GoogleGenerativeAI, HarmBlockThreshold, HarmCategory } from "@google/generative-ai";
+
+        const API_KEY = "YOUR_API_KEY"; // Replace with your actual API key
+        const genAI = new GoogleGenerativeAI(API_KEY);
+        let selectedLanguage = 'en';
+        let selectedTheme = 'light';
+
+        // Event listener for send button
+        document.getElementById("send-btn").addEventListener("click", async () => {
+            const prompt = document.getElementById("prompt-input").value;
+            if (prompt.trim() !== "") {
+                displayMessage(prompt, "user");
+                document.getElementById("status-message").innerText = "Processing your request...";
+                await sendMessage(prompt);
+                document.getElementById("prompt-input").value = "";
+            }
         });
-      } else {
-        if (!chat) {
-          chat = await genAI
-            .getGenerativeModel({ model: "gemini-pro", safetySettings })
-            .startChat({
-              history: [],
-              generationConfig: {
-                maxOutputTokens: 4000, // maxOutputTokens Limit around 4096
-              },
-            });
+
+        // Function to send message to AI model
+        async function sendMessage(prompt) {
+            try {
+                const model = genAI.getGenerativeModel({ model: "gemini-pro", safetySettings: getSafetySettings() });
+                const result = await model.sendMessage(prompt);
+                const response = await result.response;
+                const text = await response.text();
+                displayMessage(text, "ai");
+                document.getElementById("status-message").innerText = "Response received!";
+            } catch (error) {
+                console.error("Error during message generation:", error);
+                displayMessage("Error generating response.", "ai");
+                document.getElementById("status-message").innerText = "An error occurred. Please try again.";
+            }
         }
-        model = chat;
-      }
-
-      try {
-        if (imageParts.length > 0) {
-          result = await model.generateContent([prompt, ...imageParts]);
-        } else {
-          result = await model.sendMessage(prompt);
+
+        // Function to display messages
+        function displayMessage(message, sender) {
+            const outputContainer = document.getElementById("output-container");
+            const msgDiv = document.createElement("div");
+            msgDiv.classList.add("message", sender === "user" ? "user-message" : "ai-message");
+            msgDiv.innerHTML = message;
+            outputContainer.appendChild(msgDiv);
+            outputContainer.scrollTop = outputContainer.scrollHeight; // Scroll to the bottom
         }
 
-        const response = await result.response;
-        if (response) {
-          const text = await response.text();
-          displayMessage(text, "ai");
-        } else {
-          // This block handles a null response, suggesting blocked content
-          displayMessage(
-            "This content is not safe for display based on current settings.",
-            "ai"
-          );
+        // Open settings modal
+        document.getElementById("settings-btn").addEventListener("click", () => {
+            const modal = new bootstrap.Modal(document.getElementById('settings-modal'));
+            modal.show();
+        });
+
+        // Save and apply settings
+        document.getElementById("save-settings").addEventListener("click", () => {
+            selectedLanguage = document.getElementById("language-select").value;
+            selectedTheme = document.getElementById("theme-select").value;
+            applySettings();
+            const modal = bootstrap.Modal.getInstance(document.getElementById('settings-modal'));
+            modal.hide();
+        });
+
+        // Apply the selected theme
+        function applySettings() {
+            document.body.className = selectedTheme === 'dark' ? 'bg-dark text-light' : 'bg-light text-dark';
+            document.getElementById("status-message").innerText = `Settings updated to ${selectedTheme} theme in ${selectedLanguage} language.`;
         }
-      } catch (error) {
-        console.error("Error during message generation:", error);
-        displayMessage(
-          "This content is not safe for display based on current settings. or an internal error.",
-          "ai"
-        );
-      }
-      clearInputs();
-    }
-
-    function displayMessage(message, sender) {
-      const outputContainer = document.getElementById("output-container");
-      const msgDiv = document.createElement("div");
-      msgDiv.classList.add(
-        "chat-message",
-        sender === "user" ? "user-message" : "ai-message"
-      );
-
-      if (sender === "ai") {
-        // Show loading animation for AI messages
-        msgDiv.innerHTML =
-          '<div class="loading">' +
-          '<div class="loading-dot"></div>' +
-          '<div class="loading-dot"></div>' +
-          '<div class="loading-dot"></div>' +
-          "</div>";
-        outputContainer.appendChild(msgDiv);
-
-        // Simulate processing delay
-        setTimeout(() => {
-          // Clear loading animation
-          msgDiv.innerHTML = "";
-
-          if (message.startsWith("```") && message.endsWith("```")) {
-            // Code block handling
-            const codeContent = message.substring(3, message.length - 3);
-            const escapedCode = codeContent
-              .replace(/</g, "&lt;")
-              .replace(/>/g, "&gt;");
-            msgDiv.innerHTML = `<pre><code class="hljs">${escapedCode}</code></pre>`;
-            window.hljs.highlightBlock(msgDiv.querySelector("code"));
-
-            // Add Copy button
-            const copyButton = document.createElement("button");
-            copyButton.innerText = "Copy code";
-            copyButton.onclick = function () {
-              navigator.clipboard.writeText(codeContent).then(
-                () => {
-                  // Change text to show confirmation instead of using alert
-                  copyButton.innerText = "Copied!";
-                  // Optional: revert the button text back to "Copy code" after 2 seconds
-                  setTimeout(() => {
-                    copyButton.innerText = "Copy code";
-                  }, 2000);
+
+        // Safety settings for filtering harmful content
+        function getSafetySettings() {
+            return [
+                {
+                    category: HarmCategory.HARM_CATEGORY_HARASSMENT,
+                    threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH,
                 },
-                (err) => {
-                  console.error("Failed to copy text: ", err);
-                }
-              );
-            };
-
-            msgDiv.appendChild(copyButton);
-          } else {
-            // For regular messages
-            msgDiv.innerHTML = marked.parse(message);
-          }
-
-          // Scroll the output container to the bottom to ensure the latest message is visible
-          outputContainer.scrollTop = outputContainer.scrollHeight;
-        }, 1500); // Adjust the delay as needed
-      } else {
-        // User messages are displayed immediately without the loading animation
-        msgDiv.innerHTML =
-          message.startsWith("```") && message.endsWith("```")
-            ? `<pre><code class="hljs">${message.substring(
-              3,
-              message.length - 3
-            )}</code></pre>`
-            : marked.parse(message);
-
-        // If it's a code block, enable syntax highlighting and add a copy button
-        if (message.startsWith("```") && message.endsWith("```")) {
-          const codeBlock = msgDiv.querySelector("pre code");
-          window.hljs.highlightBlock(codeBlock);
-          const copyButton = document.createElement("button");
-          copyButton.innerText = "Copy code";
-          copyButton.onclick = function () {
-            navigator.clipboard.writeText(codeBlock.textContent).then(
-              () => {
-                alert("Code copied to clipboard!");
-              },
-              (err) => {
-                alert("Failed to copy text: ", err);
-              }
-            );
-          };
-          msgDiv.appendChild(copyButton);
+            ];
         }
 
-        outputContainer.appendChild(msgDiv);
-      }
-
-      // Ensure the latest message is visible
-      outputContainer.scrollTop = outputContainer.scrollHeight;
-    }
-
-    function clearInputs() {
-      document.getElementById("prompt-input").value = "";
-      document.getElementById("image-input").value = "";
-      clearImagePreview();
-    }
-
-    document
-      .getElementById("generate-btn")
-      .addEventListener("click", async () => {
-        const prompt = document.getElementById("prompt-input").value;
-        const files = document.getElementById("image-input").files;
-        const imageParts = await Promise.all(
-          [...files].map(fileToGenerativePart)
-        );
-        if (prompt.trim() !== "") {
-          displayMessage(prompt, "user");
-          await sendMessage(prompt, imageParts);
-        }
-      });
-
-    function clearGreeting() {
-      const outputField = document.getElementById("output-field");
-      if (outputField) {
-        outputField.style.display = "none"; // Hide the field completely
-      }
-    }
-
-    document
-      .getElementById("image-input")
-      .addEventListener("change", function (event) {
-        const [file] = event.target.files;
-        if (file) {
-          const reader = new FileReader();
-          reader.onload = function (e) {
-            const previewContainer = document.getElementById("image-preview");
-            const previewImage =
-              previewContainer.getElementsByTagName("img")[0];
-            previewImage.src = e.target.result;
-            previewContainer.style.display = "flex";
-          };
-          reader.readAsDataURL(file);
-        }
-      });
-
-    document
-      .getElementById("clear-image")
-      .addEventListener("click", function () {
-        // Clear the preview
-        const previewContainer = document.getElementById("image-preview");
-        const previewImage = previewContainer.getElementsByTagName("img")[0];
-        previewImage.src = "";
-        previewContainer.style.display = "none";
-        // Clear the file input
-        document.getElementById("image-input").value = "";
-      });
-
-    function clearImagePreview() {
-      const previewContainer = document.getElementById("image-preview");
-      if (previewContainer) {
-        const previewImage = previewContainer.getElementsByTagName("img")[0];
-        previewImage.src = "";
-        previewContainer.style.display = "none";
-      }
-    }
-  </script>
-  <script>
-    var loader = document.getElementById("Loader");
-    window.addEventListener("load", function () {
-      loader.style.display = "none";
-    });
-  </script>
-    <script>
-    const voiceBtn = document.getElementById('voiceBtn');
-    const promptInput = document.getElementById('prompt-input');
-    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-    const recognition = new SpeechRecognition();
-    recognition.lang = 'en-US'; // Change this to your preferred language if needed
-    recognition.interimResults = false;
-    // When speech recognition gives a result
-    recognition.addEventListener('result', (event) => {
-        const transcript = event.results[0][0].transcript; // Get the transcript of what was said
-        promptInput.value += transcript; // Append the transcript to the input field
-    });
-    // Show microphone animation when recognition starts
-    voiceBtn.addEventListener('click', () => {
-        document.getElementById('microphone-animation').style.display = 'flex'; // Show dots
-        recognition.start(); // Start voice recognition
-    });
-
-    // Hide microphone animation when recognition ends
-    recognition.addEventListener('end', () => {
-        document.getElementById('microphone-animation').style.display = 'none'; // Hide dots
-    });
-
-    recognition.addEventListener('error', (event) => {
-        console.error('Speech recognition error:', event.error); // Log any errors
-    });
-</script>
+        // Event listener for Enter key to send message
+        document.getElementById("prompt-input").addEventListener("keyup", (event) => {
+            if (event.key === "Enter") {
+                document.getElementById("send-btn").click();
+            }
+        });
+
+    </script>
+
+    <!-- Bootstrap JS for modal functionality -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 
 </html>
diff --git a/contact.html b/contact.html
index 7b2f552..f2bb0be 100644
--- a/contact.html
+++ b/contact.html
@@ -2,475 +2,224 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Contact</title>
-    <link rel="stylesheet" href="src/css/index.css">
-    <link rel="stylesheet" href="src/css/navbar.css">
-    <link rel="shortcut icon" href="ambulance.png" type="image/x-icon">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
-
-    <!--Updated to latest version-->
-    <style>
-        /* font size of button */
-        .buttons .login,
-        .buttons .get-started,
-        .dark-mode-toggle {
-            font-size: 18px;
-            /* Increase font size */
-            padding: 10px 15px;
-            /* Adjust padding for better appearance */
-        }
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Enhanced Chatbot Interface</title>
 
-        /* more addition for dark mode theme */
+    <!-- Tailwind CSS for quick styling -->
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
 
-        .dark-mode .logo img {
-            filter: brightness(0) invert(1);
-            /* Inverts the color to make it white */
-        }
+    <!-- Bootstrap CSS for modal and button styling -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
 
-        /* end */
-        /* adding dark mode for contact info */
-        .content {
-            transition: background-color 0.3s, color 0.3s;
-            /* Smooth transitions */
-        }
+    <!-- Custom Stylesheet -->
+    <link href="Style.css" rel="stylesheet" />
 
-        .dark-mode .content {
-            background-color: rgba(50, 50, 50, 0.95);
-            /* Match body background opacity */
-            padding: 20px;
-            /* Optional: add padding for better spacing */
-        }
+    <!-- Highlight.js for code syntax highlighting -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/a11y-dark.min.css" />
 
-        /* end */
+    <!-- Font Awesome for icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
-        .content {
-            margin: 20px;
-            padding: 20px;
-            background-color: #fff;
-            border-radius: 5px;
-            flex-grow: 1;
-        }
+    <!-- Marked.js for Markdown parsing -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>
 
-        h1 {
-            color: blue;
-            text-align: center;
-            margin-bottom: 20px;
-        }
-
-        .contact-info {
+    <!-- Custom Inline Styles -->
+    <style>
+        /* Basic body styling */
+        body {
+            font-family: Arial, sans-serif;
+            background: linear-gradient(to right, #4facfe, #00f2fe);
             display: flex;
-            flex-wrap: wrap;
+            align-items: center;
             justify-content: center;
-            gap: 20px;
-            animation: fadeIn 1s ease-in-out;
+            min-height: 100vh;
         }
 
-        .contact-item {
-            background-color: #e7f3fe;
-            border-radius: 10px;
-            padding: 15px;
-            text-align: center;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-            width: 250px;
-            /* Adjusted width for a better fit in a row */
-            transition: transform 0.3s, box-shadow 0.3s;
-        }
-
-        .contact-item:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-        }
-
-        .contact-item img {
-            width: 80px;
-            height: 80px;
-            margin-bottom: 10px;
-            border-radius: 50%;
-            border: 3px solid #2980b9;
-        }
-
-        .social-media {
+        /* Chat container styling */
+        .chat-container {
+            width: 100%;
+            max-width: 600px;
+            background-color: white;
+            border-radius: 12px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            padding: 20px;
             display: flex;
-            justify-content: center;
-            margin-top: 30px;
-            gap: 20px;
-        }
-
-        /* Added the hover animation on the footer social icons */
-        .social-icon {
-            transition: transform 0.3s ease;
-            /* Smooth transition effect */
-        }
-
-        .social-icon:hover {
-            transform: scale(1.3);
-            /* Scale the element to 1.3 times its size */
-        }
-
-        .fa-facebook:hover {
-            color: blue;
-            /* Icon color change to blue on hover */
-        }
-
-        .fa-x-twitter:hover {
-            color: black;
-            /* Icon color change to black on hover */
+            flex-direction: column;
+            position: relative;
         }
 
-        .fa-instagram:hover {
-            color: orangered;
-            /* Icon color change to orangered on hover */
+        /* Message styling */
+        .message {
+            margin: 10px 0;
+            padding: 10px;
+            border-radius: 10px;
+            max-width: 80%;
         }
 
-        .fa-linkedin-in:hover {
-            color: rgb(16, 13, 195);
-            /* Icon color change to rgb(16, 13, 195) on hover */
+        /* User and AI message styles */
+        .user-message {
+            background-color: #d1e7dd;
+            align-self: flex-end;
         }
 
-        #twitter:hover {
-            color: #1da1f2;
-            transform: scale(1.5);
+        .ai-message {
+            background-color: #cfe2ff;
+            align-self: flex-start;
         }
 
-        #instagram:hover {
-            background: linear-gradient(45deg, #FF0080, #FF8C00, #FFD700);
-            color: transparent;
-            background-clip: text;
-            -webkit-text-fill-color: transparent;
-            transform: scale(1.5);
+        /* Loader styling */
+        #loader {
+            display: none;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
         }
 
-        #linkedin:hover {
-            color: #0077B5;
-            transform: scale(1.5);
-        }
-        
-        ul li a:hover{
-            color: blue !important;
+        /* Input group styling */
+        .input-group {
+            margin-top: 15px;
         }
+    </style>
+</head>
 
-        a:hover{
-            color: blue !important;
-        }
+<body>
+    <!-- Loader for async operations -->
+    <div id="loader">Loading...</div>
+
+    <!-- Main chat container -->
+    <div class="chat-container">
+        <!-- Output container for displaying chat messages -->
+        <div id="output-container" class="overflow-auto" style="max-height: 300px;"></div>
+
+        <!-- Input and settings buttons -->
+        <div class="input-group">
+            <input type="text" id="prompt-input" class="form-control" placeholder="Type your message here..." />
+            <button id="send-btn" class="btn btn-primary">Send</button>
+            <button id="settings-btn" class="btn btn-secondary">Settings</button>
+        </div>
 
+        <!-- Settings modal for language and theme selection -->
+        <div id="settings-modal" class="modal" tabindex="-1">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">Settings</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                    </div>
 
-        footer {
-            background-color: #C4D7FF;
-            color: white;
-            text-align: center;
-            padding: 10px 0;
-            position: relative;
-            bottom: 0;
-            width: 100%;
-        }
+                    <div class="modal-body">
+                        <!-- Language selection -->
+                        <h6>Language</h6>
+                        <select id="language-select" class="form-select">
+                            <option value="en">English</option>
+                            <option value="es">Spanish</option>
+                            <option value="fr">French</option>
+                        </select>
+
+                        <!-- Theme selection -->
+                        <h6>Theme</h6>
+                        <select id="theme-select" class="form-select">
+                            <option value="light">Light</option>
+                            <option value="dark">Dark</option>
+                        </select>
+                    </div>
 
-        @keyframes fadeIn {
-            from {
-                opacity: 0;
-            }
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                        <button type="button" class="btn btn-primary" id="save-settings">Save changes</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 
-            to {
-                opacity: 1;
+    <!-- JavaScript Modules and API integration -->
+    <script type="importmap">
+        {
+            "imports": {
+                "@google/generative-ai": "https://esm.run/@google/generative-ai"
             }
         }
-
-        /* Logo Animation */
-        @keyframes logoAnimation {
-            0% {
-                opacity: 0;
-                transform: translateX(-100px);
-                /* Start from the left */
-            }
-
-            50% {
-                transform: translateX(10px);
-                /* Move slightly to the right */
+    </script>
+    <script type="module">
+        import { GoogleGenerativeAI, HarmBlockThreshold, HarmCategory } from "@google/generative-ai";
+
+        const API_KEY = "YOUR_API_KEY"; // Replace with your actual API key
+        const genAI = new GoogleGenerativeAI(API_KEY);
+        let chat;
+        let selectedLanguage = 'en'; // Default language
+        let selectedTheme = 'light'; // Default theme
+
+        // Send message event listener
+        document.getElementById("send-btn").addEventListener("click", async () => {
+            const prompt = document.getElementById("prompt-input").value;
+            if (prompt.trim() !== "") {
+                displayMessage(prompt, "user");
+                await sendMessage(prompt);
+                document.getElementById("prompt-input").value = ""; // Clear input after sending
             }
+        });
 
-            100% {
-                opacity: 1;
-                transform: translateX(0);
-                /* End at original position */
+        // Function to send message to the AI model
+        async function sendMessage(prompt) {
+            try {
+                const model = genAI.getGenerativeModel({ model: "gemini-pro", safetySettings: getSafetySettings() });
+                const result = await model.sendMessage(prompt);
+                const response = await result.response;
+                const text = await response.text();
+                displayMessage(text, "ai");
+            } catch (error) {
+                console.error("Error during message generation:", error);
+                displayMessage("Error generating response.", "ai");
             }
         }
 
-        .map {
-            width: 860px;
-            height: 400px;
-            border: 3px 3px 3px 3px solid #090202;
-            border-radius: 5px;
-            margin: 20px auto;
-            object-fit: cover;
+        // Function to display a message
+        function displayMessage(message, sender) {
+            const outputContainer = document.getElementById("output-container");
+            const msgDiv = document.createElement("div");
+            msgDiv.classList.add("message", sender === "user" ? "user-message" : "ai-message");
+            msgDiv.innerHTML = message;
+            outputContainer.appendChild(msgDiv);
+            outputContainer.scrollTop = outputContainer.scrollHeight; // Scroll to the bottom
         }
-    </style>
-</head>
-
-<body>
-    <!-- pre loader -->
-    <div id="preloader">
-        <div class="wrapper">
-            <div class="box-wrap">
-                <div class="box one"></div>
-                <div class="box two"></div>
-                <div class="box three"></div>
-                <div class="box four"></div>
-                <div class="box five"></div>
-                <div class="box six"></div>
-            </div>
-        </div>
-    </div>
-
-    <div class="container" id="container">
-
-        <div class="logo">
-            <div class="brand-name">
-                <span class="letter red" style="--letter-index: 1;">A</span>
-                <span class="letter red" style="--letter-index: 2;">m</span>
-                <span class="letter red" style="--letter-index: 3;">b</span>
-                <span class="letter red" style="--letter-index: 4;">u</span>
-                <span class="letter" style="--letter-index: 5;">F</span>
-                <span class="letter" style="--letter-index: 6;">l</span>
-                <span class="letter" style="--letter-index: 7;">o</span>
-                <span class="letter" style="--letter-index: 8;">w</span>
-            </div>
-            <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 80px; height: auto" />
-        </div>
-        <nav class="menu">
-            <ul>
-                <li>
-                    <a href="#container" style="color: #333;">
-                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M6.34314 11.5858L12 5.92893M12 5.92893L17.6568 11.5858M12 5.92893V18.0711"
-                                stroke="currentColor">
-                            </path>
-                        </svg>
-                    </a>
-                </li>
-                <li>
-                    <a href="index.html" id="home-link" class="menu_links" data-link="Home">
-                        <span>Home</span>
-                    </a>
-                </li>
-                <li>
-                    <a href="features.html" id="features-link" class="menu_links" data-link="Features">
-                        <span>Features</span></a>
-                </li>
-                <li>
-                    <a href="team.html" id="team-link" class="menu_links" data-link="Team">
-                        <span>Team</span></a>
-                </li>
-                <li>
-                    <a href="contact.html" id="contact-link" class="menu_links" data-link="Contact">
-                        <span>Contact</span></a>
-                </li>
-                <li>
-                    <a href="Feedback.html" id="contact-link" class="menu_links" data-link="Feedback">
-                        <span>Feedback</span></a>
-                </li>
-                <li>
-                    <a href="nearby.html" id="contact-link" class="menu_links" data-link="Nearby">
-                        <span>Nearby</span></a>
-                </li>
-            </ul>
-        </nav>
-
-    </div>
-    <div class="content" id="main-content">
-        <h1>Contact Us</h1>
-        <div class="contact-info">
-            <div class="contact-item">
-                <img src="images/call1-w.avif" style="border-radius: 50%;" alt="Call Us">
-                <h2>Call Us</h2>
-                <p>For immediate assistance, call our emergency line at <strong>123-456-7890</strong>.</p>
-            </div>
-            <div class="contact-item">
-                <img src="https://i.postimg.cc/m2bGBGFf/help-w.png" style="border-radius: 50%;" alt="Help">
-                <h2>Need Help?</h2>
-                <p>Our team is available 24/7 to help you with any inquiries.</p>
-            </div>
-            <div class="contact-item">
-                <img src="images/caremeregency-w.png" style="border-radius: 50%;" alt="Emergency Care">
-                <h2>Emergency Care</h2>
-                <p>In case of an emergency, please do not hesitate to reach out to us immediately.</p>
-            </div>
-        </div>
-        <!-- adding map -->
-        <div class="map">
-            <iframe
-                src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d241294.64898498365!2d72.79635424219836!3d19.09761203283721!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1s123%20Emergency%20Lane%2C%20Mumbai%2C%20India!5e0!3m2!1sen!2sin!4v1728732339444!5m2!1sen!2sin"
-                width=860px height="400" allowfullscreen="" referrerpolicy="no-referrer-when-downgrade"
-                overflow="hidden" style="border :10" object-fit="cover" ;></iframe>
-            <!--  ;"  loading="lazy" margin-top="50%"  ></iframe> -->
-        </div>
-    </div>
-
 
-    <footer style=" color: #f3f4f6; text-align: center; width: 100%;">
-        <div style="background-color: #C4D7FF; color: #f3f4f6; ">
-            <div
-                style="display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 0 auto;">
-
-                <!-- Quick Links Section -->
-                <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
-                    <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Quick Links</h3>
-                    <ul style="list-style-type: none; padding: 0;">
-                        <li><a href="about.html" style="color: #000000; text-decoration: none;">About Us</a>
-                        </li>
-                        <li><a href="contact.html" style="color: #000000; text-decoration: none;">Contact
-                                Us</a></li>
-                        <li><a href="privacy.html" style="color: #000000; text-decoration: none;">Privacy
-                                Policy</a></li>
-                        <li><a href="terms.html" style="color: #000000; text-decoration: none;">Terms of
-                                Service</a></li>
-                        <li><a href="sitemap.html" style="color: #000000; text-decoration: none;">Site
-                                Map</a></li>
-                    </ul>
-                </div>
+        // Show settings modal
+        document.getElementById("settings-btn").addEventListener("click", () => {
+            const modal = new bootstrap.Modal(document.getElementById('settings-modal'));
+            modal.show();
+        });
 
-                <!-- Contact Information Section -->
-                <div style="flex: 1; min-width: 200px; margin-bottom: 10px;">
-                    <h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3>
-                    <p style="color: #000;">123 Emergency Lane, Mumbai, India</p>
-                    <a href="mailto:emergency@ambulanceservice.in"
-                        style="color: #000000;">emergency@ambulanceservice.in</a></p>
-                    <p style="color: #000000;">Phone: <a href="tel:+91-911-1234567"
-                            style="color: #000000;">+91-911-1234567</a></p>
-                </div>
+        // Save settings and apply changes
+        document.getElementById("save-settings").addEventListener("click", () => {
+            selectedLanguage = document.getElementById("language-select").value;
+            selectedTheme = document.getElementById("theme-select").value;
+            applySettings();
+            const modal = bootstrap.Modal.getInstance(document.getElementById('settings-modal'));
+            modal.hide();
+        });
 
-                <!-- Modified the looks of the social icons -->
-                <!-- Social Media Links -->
-                <div style="text-align: center; min-width: 200px; color: black;">
-                    <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3>
-                    <div style="display: flex; justify-content: center; align-items: center; gap: 15px;">
-                        <a href="https://www.facebook.com" class="social-icon facebook"
-                            style="color: black; text-decoration: none; font-size: 24px;"><i
-                                class="fab fa-facebook"></i></a>
-                        <a href="https://www.twitter.com" class="social-icon twitter"
-                            style="color: black; text-decoration: none; font-size: 24px;"><i
-                                class="fa-brands fa-x-twitter"></i></a>
-                        <a href="https://www.instagram.com" class="social-icon instagram"
-                            style="color: black; text-decoration: none; font-size: 24px;"><i
-                                class="fab fa-instagram"></i></a>
-                        <a href="https://www.linkedin.com" class="social-icon linkedin"
-                            style="color: black; text-decoration: none; font-size: 24px;"><i
-                                class="fab fa-linkedin-in"></i></a>
-                    </div>
-                </div>
+        // Apply selected theme to the page
+        function applySettings() {
+            document.body.className = selectedTheme === 'dark' ? 'bg-dark text-light' : 'bg-light text-dark';
+        }
 
-                <!-- Newsletter Subscription -->
-                <!-- Newsletter Subscription -->
-                <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
-                    <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to Our Newsletter</h3>
-                    <form id="newsletter-form" action="#">
-                        <input type="email" id="newsletter-email" placeholder="Your Email"
-                            style="padding: 10px; width: 80%; border: none; border-radius: 5px;" required><br><br>
-                        <button type="submit"
-                            style="background-color: #e81a1a; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px;">
-                            Subscribe
-                        </button>
-                    </form>
-                    <div id="subscription-notification" style="display:none; background-color: rgba(212, 237, 218, 0.8); color: #155724; padding: 10px; border-radius: 5px; position: absolute; top: 10px; left: 600px; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.3);">
-                        Thank you for subscribing to our newsletter!
-                    </div>
-                    
-                </div>
-                <script>
-                    document.querySelector("form").addEventListener("submit", function(event) {
-                        event.preventDefault(); // Prevent form from submitting immediately
-                
-                        // Improved Email validation regex to ensure proper domain like "gmail.com"
-                        const emailInput = document.querySelector("input[type='email']");
-                        const emailRegex = /^[^\s@]+@gmail\.com$/;
-                
-                        if (emailRegex.test(emailInput.value)) {
-                            // Show alert notification with green translucent box
-                            const notification = document.getElementById("subscription-notification");
-                            notification.style.display = "block";
-                
-                            // Hide the message after 3 seconds
-                            setTimeout(function() {
-                                notification.style.display = "none";
-                            }, 3000);
-                
-                            // Reset the form
-                            this.reset();
-                        } else {
-                            alert("Please enter a valid Gmail address.");
-                        }
-                    });
-                </script>
-                
-                
-            </div>
-        </div>
-        <hr>
-    </footer>
-    <!-- Copyright Section -->
-    <div
-        style="background-color: #C4D7FF; color: #000000; display: flex; justify-content: center; align-items: center; padding: 10px 20px;">
-        <strong>
-            <p>&copy; 2024 AmbuFlow. All rights reserved.</p>
-        </strong>
-    </div>
-    <a href="chatbot.html">
-        <div class="fixed bottom-0 right-2 chatbot-container">
-            <button class="chatbot-button group">
-                <img class="h-20" src="chatbot.gif" alt="chatbot" />
-                <span class="tooltip-text">
-                    Welcome to AmbuFlow!<br />
-                    How can I help You?
-                </span>
-            </button>
-        </div>
-    </a>
-    <button class="light-dark-btn dark-mode-toggle" id="dark-mode-button">
-        <i class="fa-solid fa-moon"></i>
-    </button>
-    <div class="gtranslate_wrapper"></div>
-
-
-    <script src="preloader.js"></script>
-    <script src="script.js"></script>
-    <script>    const coords = { x: 0, y: 0 };
-        const circles = document.querySelectorAll(".circle");
-
-        const colors = [
-            "#ffb56b",
-            "#fdaf69",
-            "#f89d63",
-            "#f59761",
-            "#ef865e",
-            "#ec805d",
-            "#e36e5c",
-            "#df685c",
-            "#d5585c",
-            "#d1525c",
-            "#c5415d",
-            "#c03b5d",
-            "#b22c5e",
-            "#ac265e",
-            "#9c155f",
-            "#950f5f",
-            "#830060",
-            "#7c0060",
-            "#680060",
-            "#60005f",
-            "#48005f",
-            "#3d005e"
-        ];
-
-        circles.forEach(function (circle, index) {
-            circle.x = 0;
-            circle.y = 0;
-            circle.style.backgroundColor = colors[index % colors.length];
-        });
-        //end 
+        // Define safety settings for AI model responses
+        function getSafetySettings() {
+            return [
+                {
+                    category: HarmCategory.HARM_CATEGORY_HARASSMENT,
+                    threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH,
+                },
+            ];
+        }
     </script>
 
-    <!-- Add this div for the translator popup -->
-
+    <!-- Bootstrap JS for modals and other components -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/driver.html b/driver.html
index d22c78a..9ac6f67 100644
--- a/driver.html
+++ b/driver.html
@@ -10,6 +10,7 @@
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKR3agIMLtauzDhz4fCu3heww0BV_81H4" async defer></script>
     <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" />
     <style>
+        /* Basic styles for the map and driver image */
         #map {
             width: 100%;
             height: 320px;
@@ -21,9 +22,11 @@
         #driverImage {
             height: 320px;
             margin-bottom: 20px;
+            display: block; /* Ensure the driver image is block */
+            width: auto; /* Maintain aspect ratio */
         }
 
-        /* Add a loading spinner for the map */
+        /* Loading spinner styles */
         #loadingSpinner {
             display: none; /* Hidden by default */
             position: absolute;
@@ -38,7 +41,7 @@
     <header>
         <nav class="navbar">
             <div class="navbar-logo">
-                <img src="./images/manageLogo.png"></img>
+                <img src="./images/manageLogo.png" alt="AmbuFlow Logo">
                 <h2 style="display: flex;">ambu<p style="color: #3DBDEC;">Flow</p></h2>
             </div>
             <ul class="navbar-links">
@@ -54,17 +57,16 @@ <h2 style="display: flex;">ambu<p style="color: #3DBDEC;">Flow</p></h2>
             </div>
         </nav>
     </header>
-    
-    <!-- Dropdown -->
-    <div class="dropdown-menu">
+
+    <!-- Dropdown Menu -->
+    <div class="dropdown-menu" style="display: none;">
         <ul class="navbar-links2">
             <li><a href="hospital.html">Dashboard</a></li>
             <li><a href="manage.html">Manage Status</a></li>
             <li><a href="driver.html">Manage Driver</a></li>
             <li><a href="ambtracker.html">Manage Ambulance</a></li>
         </ul>
-     </div>
-    
+    </div>
 
     <div class="dashboard-container">
         <h1>Welcome, <span id="driverName">Driver ___</span></h1>
@@ -79,7 +81,6 @@ <h1>Welcome, <span id="driverName">Driver ___</span></h1>
         <!-- Loading Spinner -->
         <div id="loadingSpinner">Loading...</div>
         
-        
         <div class="toggle-container">
             <label class="switch">
                 <input type="checkbox" id="availabilityToggle">
@@ -143,8 +144,6 @@ <h1>Welcome, <span id="driverName">Driver ___</span></h1>
             const newLat = 37.7749 + (Math.random() * 0.001 - 0.0005);
             const newLng = -122.4194 + (Math.random() * 0.001 - 0.0005);
             const newPosition = { lat: newLat, lng: newLng };
-            // Update the driver's marker position on the map
-            // Assuming you have a marker for the driver
             driverMarker.setPosition(newPosition);
             map.setCenter(newPosition);
         }
@@ -162,17 +161,12 @@ <h1>Welcome, <span id="driverName">Driver ___</span></h1>
             }
         }  
 
-        // Dropdown
-        let flag = false
+        // Dropdown toggle
+        let flag = false;
         document.getElementById('dropdown').addEventListener('click', () => {
             const dropdown = document.querySelector('.dropdown-menu');
-            if (flag) {
-                dropdown.style.display = 'none';
-                flag = false;
-            } else {
-                dropdown.style.display = 'block';
-                flag = true;
-            }
+            flag = !flag; // Toggle flag
+            dropdown.style.display = flag ? 'block' : 'none';
         });
     </script>
 </body>
diff --git a/faq.html b/faq.html
index ff7de5b..54c6db9 100644
--- a/faq.html
+++ b/faq.html
@@ -1,266 +1,220 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
-  <style>
-    
-   /* faq section styles */
-   .faq-section {
-      background-color: #e7f3fe;
-      display: flex;
-      margin: 2rem 1rem;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .faq-h2 {
-      margin-bottom: 1.5rem;
-      font-size: 2.5rem;
-      font-weight: 600;
-      color: #000;
-    }
-
-    .faq {
-      margin-bottom: 15px;
-      width: 100%;
-      /* Full width by default */
-      background-color: #000000;
-      border: 1px solid #ccc;
-      border-radius: 10px;
-      overflow: hidden;
-      transition: background-color 0.3s ease;
-    }
-
-    .faq:hover {
-      background-color: #e31616;
-      /* Slight hover effect for FAQs */
-    }
-
-    .faq-question {
-      background-color: #e7ffe7;
-      color: #333;
-      padding: 10px;
-      width: 100%;
-      text-align: left;
-      border: none;
-      outline: none;
-      cursor: pointer;
-      font-size: 16px;
-      font-weight: 600;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      transition: background-color 0.3s ease;
-    }
-
-    .faq-question:hover {
-      background-color: #d5f0d5;
-      /* Lighter green on hover */
-    }
-
-    .faq-question::after {
-      content: '';
-      display: inline-block;
-      width: 0;
-      height: 0;
-      border-left: 8px solid transparent;
-      border-right: 8px solid transparent;
-      border-top: 8px solid #333;
-      /* Downward pointing wide "V" */
-      transition: transform 0.3s ease;
-
-      margin-right: 10px;
-    }
-
-    .faq.active .faq-question::after {
-      transform: rotate(180deg);
-    }
-
-    .faq-answer {
-      opacity: 0;
-      max-height: 0;
-      /* Initially hidden */
-      overflow: hidden;
-      /* Hide content when not visible */
-      padding: 0 10px;
-      background-color: #fff;
-      transition: max-height 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
-      /* Smooth transition */
-      border-top: 1px solid #ccc;
-    }
-
-    .faq-answer p {
-      margin-bottom: 10px;
-    }
-
-    .faq.active .faq-answer {
-  opacity: 1;
-  max-height: 200px;
-  padding: 10px;
-  transition: max-height 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.6s ease;
-}
-    .faq.active .faq-answer p {
-      transition: opacity 0.3s ease-in-out;
-    }
-
-    #logo img:hover {
-      background-color: #c4d7ff;
-    }
-
-
-    .dark-mode .light-dark-btn {
-      color: white;
-      /* Button color in dark mode */
-      /* border: 1px solid lightgrey; */
-      /* Light grey border */
-    }
-
-    .dark-mode .light-dark-btn:hover {
-      /* background-color: white; */
-      /* Background on hover in dark mode */
-      color: black;
-      /* Text color on hover in dark mode */
-    }
-
-    .dark-mode .main_content p {
-      color: wheat;
-    }
-
-    .dark-mode .content h1 {
-      color: wheat;
-
-    }
-
-    /* more addition for dark mode theme */
-
-    .dark-mode .logo img {
-      filter: brightness(0) invert(1);
-      /* Inverts the color to make it white */
-    }
-
-    .dark-mode .content {
-      background-color: rgba(50, 50, 50, 0.95);
-      /* Match body background opacity */
-      padding: 20px;
-      /* Optional: add padding for better spacing */
-    }
-  </style>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Frequently Asked Questions</title>
+    <style>
+        /* FAQ section styles */
+        .faq-section {
+            background-color: #e7f3fe;
+            display: flex;
+            margin: 2rem 1rem;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 1rem;
+            border-radius: 10px;
+        }
+
+        .faq-h2 {
+            margin-bottom: 1.5rem;
+            font-size: 2.5rem;
+            font-weight: 600;
+            color: #000;
+        }
+
+        .faq {
+            margin-bottom: 15px;
+            width: 100%;
+            background-color: #000;
+            border: 1px solid #ccc;
+            border-radius: 10px;
+            overflow: hidden;
+            transition: background-color 0.3s ease;
+        }
+
+        .faq:hover {
+            background-color: #e31616; /* Slight hover effect for FAQs */
+        }
+
+        .faq-question {
+            background-color: #e7ffe7;
+            color: #333;
+            padding: 10px;
+            width: 100%;
+            text-align: left;
+            border: none;
+            outline: none;
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: 600;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            transition: background-color 0.3s ease;
+        }
+
+        .faq-question:hover {
+            background-color: #d5f0d5; /* Lighter green on hover */
+        }
+
+        .faq-question::after {
+            content: '';
+            display: inline-block;
+            width: 0;
+            height: 0;
+            border-left: 8px solid transparent;
+            border-right: 8px solid transparent;
+            border-top: 8px solid #333; /* Downward pointing wide "V" */
+            transition: transform 0.3s ease;
+            margin-right: 10px;
+        }
+
+        .faq.active .faq-question::after {
+            transform: rotate(180deg);
+        }
+
+        .faq-answer {
+            opacity: 0;
+            max-height: 0; /* Initially hidden */
+            overflow: hidden; /* Hide content when not visible */
+            padding: 0 10px;
+            background-color: #fff;
+            transition: max-height 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth transition */
+            border-top: 1px solid #ccc;
+        }
+
+        .faq-answer p {
+            margin: 0; /* Reset margin for paragraphs */
+        }
+
+        .faq.active .faq-answer {
+            opacity: 1;
+            max-height: 200px; /* Arbitrary limit for visible height */
+            padding: 10px; /* Padding when active */
+            transition: max-height 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.6s ease;
+        }
+
+        .faq.active .faq-answer p {
+            transition: opacity 0.3s ease-in-out;
+        }
+
+        /* Dark mode styles */
+        .dark-mode .faq-question {
+            color: white;
+        }
+
+        .dark-mode .faq-answer {
+            background-color: rgba(50, 50, 50, 0.95);
+            color: white;
+        }
+    </style>
 </head>
 <body>
-  <div class="contact-feature faq-section" id="faq-section">
-    <div class="faq-hd">
-      <div class="faq-h2">Frequently Asked Questions [ FAQs ]</div>
-      <!-- <div>Frequently Asked Questions</div> -->
-    </div>
-    <div class="faqs">
-
-      <div class="faq">
-        <button class="faq-question">What should I do while waiting for the ambulance?</button>
-        <div class="faq-answer">
-          <p>Stay calm, ensure the patient is in a safe environment, and prepare any relevant medical information. If
-            possible, clear a path for the ambulance and stay on the line with emergency services if needed.</p>
-        </div>
-      </div>
-
-      <div class="faq">
-        <button class="faq-question">How do I track an ambulance in real-time?</button>
-        <div class="faq-answer">
-          <p>After requesting an ambulance, you can track it in real-time by logging into the system and accessing the
-            live map feature.</p>
-        </div>
-      </div>
-      <div class="faq">
-        <button class="faq-question">What are the emergency protocols if an ambulance is delayed?</button>
-        <div class="faq-answer">
-          <p>If the ambulance is delayed, you will receive updates through the system. In case of a significant delay,
-            please contact emergency services for further instructions.</p>
-        </div>
-      </div>
-      <div class="faq">
-        <button class="faq-question">Can I provide medical information for the patient in advance?</button>
-        <div class="faq-answer">
-          <p>Yes, during your request, you can provide essential medical details to help paramedics prepare better for
-            the situation.</p>
-        </div>
-      </div>
-      <div class="faq">
-        <button class="faq-question">Are there any charges for using the ambulance tracking service?</button>
-        <div class="faq-answer">
-          <p>The ambulance tracking service is free of charge, but regular ambulance service fees may apply depending
-            on the provider.</p>
+    <div class="faq-section" id="faq-section">
+        <h2 class="faq-h2">Frequently Asked Questions [ FAQs ]</h2>
+        <div class="faqs">
+            <div class="faq">
+                <button class="faq-question">What should I do while waiting for the ambulance?</button>
+                <div class="faq-answer">
+                    <p>Stay calm, ensure the patient is in a safe environment, and prepare any relevant medical information. If possible, clear a path for the ambulance and stay on the line with emergency services if needed.</p>
+                </div>
+            </div>
+
+            <div class="faq">
+                <button class="faq-question">How do I track an ambulance in real-time?</button>
+                <div class="faq-answer">
+                    <p>After requesting an ambulance, you can track it in real-time by logging into the system and accessing the live map feature.</p>
+                </div>
+            </div>
+
+            <div class="faq">
+                <button class="faq-question">What are the emergency protocols if an ambulance is delayed?</button>
+                <div class="faq-answer">
+                    <p>If the ambulance is delayed, you will receive updates through the system. In case of a significant delay, please contact emergency services for further instructions.</p>
+                </div>
+            </div>
+
+            <div class="faq">
+                <button class="faq-question">Can I provide medical information for the patient in advance?</button>
+                <div class="faq-answer">
+                    <p>Yes, during your request, you can provide essential medical details to help paramedics prepare better for the situation.</p>
+                </div>
+            </div>
+
+            <div class="faq">
+                <button class="faq-question">Are there any charges for using the ambulance tracking service?</button>
+                <div class="faq-answer">
+                    <p>The ambulance tracking service is free of charge, but regular ambulance service fees may apply depending on the provider.</p>
+                </div>
+            </div>
+
+            <div class="faq">
+                <button class="faq-question">How can I request special medical equipment or personnel on the ambulance?</button>
+                <div class="faq-answer">
+                    <p>During your request, you can specify if the patient needs specific medical equipment or personnel, such as a ventilator or a specialized doctor.</p>
+                </div>
+            </div>
+
+            <div class="faq">
+                <button class="faq-question">What should I do if the location of the ambulance is not updating?</button>
+                <div class="faq-answer">
+                    <p>If the ambulance location is not updating, try refreshing the page. If the issue persists, report a technical issue through the system or contact support.</p>
+                </div>
+            </div>
+
+            <div class="faq">
+                <button class="faq-question">Can I schedule an ambulance in advance?</button>
+                <div class="faq-answer">
+                    <p>Yes, the system allows you to schedule an ambulance for non-emergency situations in advance.</p>
+                </div>
+            </div>
+
+            <div class="faq">
+                <button class="faq-question">What should I do if the ambulance cannot find my location?</button>
+                <div class="faq-answer">
+                    <p>If the ambulance has trouble finding your location, ensure your address is accurate. You can also contact the driver directly through the provided contact information to give specific directions.</p>
+                </div>
+            </div>
+
+            <div class="faq">
+                <button class="faq-question">Can I request an ambulance for multiple patients?</button>
+                <div class="faq-answer">
+                    <p>Yes, you can request an ambulance for multiple patients. Be sure to mention the number of patients and their condition during your request so that appropriate resources can be dispatched.</p>
+                </div>
+            </div>
+
+            <div class="faq">
+                <button class="faq-question">What happens if I need to cancel my ambulance request?</button>
+                <div class="faq-answer">
+                    <p>You can cancel your ambulance request through the system before the ambulance arrives. However, cancellation charges may apply depending on the provider's policy.</p>
+                </div>
+            </div>
         </div>
-      </div>
-      <div class="faq">
-        <button class="faq-question">How can I request special medical equipment or personnel on the
-          ambulance?</button>
-        <div class="faq-answer">
-          <p>During your request, you can specify if the patient needs specific medical equipment or personnel, such
-            as a ventilator or a specialized doctor.</p>
-        </div>
-      </div>
-      <div class="faq">
-        <button class="faq-question">What should I do if the location of the ambulance is not updating?</button>
-        <div class="faq-answer">
-          <p>If the ambulance location is not updating, try refreshing the page. If the issue persists, report a
-            technical issue through the system or contact support.</p>
-        </div>
-      </div>
-      <div class="faq">
-        <button class="faq-question">Can I schedule an ambulance in advance?</button>
-        <div class="faq-answer">
-          <p>Yes, the system allows you to schedule an ambulance for non-emergency situations in advance.</p>
-        </div>
-      </div>
-      <div class="faq">
-        <button class="faq-question">What should I do if the ambulance cannot find my location?</button>
-        <div class="faq-answer">
-          <p>If the ambulance has trouble finding your location, ensure your address is accurate. You can also contact
-            the driver directly through the provided contact information to give specific directions.</p>
-        </div>
-      </div>
-      <div class="faq">
-        <button class="faq-question">Can I request an ambulance for multiple patients?</button>
-        <div class="faq-answer">
-          <p>Yes, you can request an ambulance for multiple patients. Be sure to mention the number of patients and
-            their
-            condition during your request so that appropriate resources can be dispatched.</p>
-        </div>
-      </div>
-      <div class="faq">
-        <button class="faq-question">What happens if I need to cancel my ambulance request?</button>
-        <div class="faq-answer">
-          <p>You can cancel your ambulance request through the system before the ambulance arrives. However,
-            cancellation
-            charges may apply depending on the provider's policy.</p>
-        </div>
-      </div>
     </div>
-  </div>
-
- <script>
-    document.addEventListener('DOMContentLoaded', function () {
-      const faqButtons = document.querySelectorAll('.faq-question');
-
-      faqButtons.forEach(button => {
-        button.addEventListener('click', function () {
-          const faq = button.parentElement;
-          const answer = faq.querySelector('.faq-answer');
-
-          // Toggle active class
-          faq.classList.toggle('active');
 
-          // Control the max-height for slide effect
-          if (faq.classList.contains('active')) {
-            answer.style.maxHeight = answer.scrollHeight + 'px'; // Set height based on content
-          } else {
-            answer.style.maxHeight = '0'; // Set height to zero to collapse
-          }
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const faqButtons = document.querySelectorAll('.faq-question');
+
+            faqButtons.forEach(button => {
+                button.addEventListener('click', function () {
+                    const faq = button.parentElement;
+                    const answer = faq.querySelector('.faq-answer');
+
+                    // Toggle active class
+                    faq.classList.toggle('active');
+
+                    // Control the max-height for slide effect
+                    if (faq.classList.contains('active')) {
+                        answer.style.maxHeight = answer.scrollHeight + 'px'; // Set height based on content
+                    } else {
+                        answer.style.maxHeight = '0'; // Set height to zero to collapse
+                    }
+                });
+            });
         });
-      });
-    });
-  </script>
+    </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/features.html b/features.html
index 2232ad4..79d8507 100644
--- a/features.html
+++ b/features.html
@@ -51,68 +51,22 @@
       /* Change logo color in dark mode */
     }
 
-    /* .menu ul {
-      list-style-type: none;
-      padding: 0;
-      display: flex;
-    }
-
-
-    .menu a {
-      color: black;
-      Light mode link color
-      border: 2px solid black;
-      border-radius:7px;
-      padding: 3px 7px;
-      text-decoration: none;
-      transition: all 0.3s;
-    }
-
-    .menu ul li a:hover {
-      background-color: rgb(255, 255, 255);
-      Blue background on hover
-      color: white;
-      White text on hover
-    } */
     a:hover {
       color: blue !important;
     }
 
-    /* .dark-mode .menu a {
-      color: white;
-      Dark mode link color
-      border: 1px solid lightgrey;
-      Light grey border in dark mode
-    } */
-
     .dark-mode {
       background-color: rgba(50, 50, 50, 0.95);
       /* Slightly gray background with high opacity */
     }
 
-    /* .dark-mode .menu a:hover {
-      background-color: white;
-      White background on hover in dark mode
-      color: black;
-      Black text on hover in dark mode
-    } */
-
     .light-dark-btn {
-
       background-color: transparent;
       border: 1px solid black;
       /* Black border */
       cursor: pointer;
       color: black;
       /* Default button color */
-      width: 50px;
-    }
-
-    .light-dark-btn {
-      background-color: transparent;
-      border: 1px solid black;
-      cursor: pointer;
-      color: black;
       border-radius: 50px;
     }
 
@@ -140,7 +94,6 @@
       align-items: center;
     }
 
-
     /* end */
     /* adding dark mode for contact info */
     .content {
@@ -161,8 +114,6 @@
 
     /* end */
 
-
-
     .logo {
       display: flex;
       align-items: center;
@@ -178,17 +129,10 @@
     }
 
     .letter {
-      
       display: inline-block;
       font-size: 2rem;
       animation: letterDrop 0.5s ease forwards;
       animation-delay: calc(var(--letter-index)* 0.1s);
-
-    }
-
-    .letter {
-      display: inline-block;
-      font-size: 2rem;
     }
 
     .red {
@@ -196,35 +140,6 @@
       /* Change the color of letters in this class to red */
     }
 
-    /* .menu ul {
-      list-style-type: none;
-      padding: 0;
-    }
-
-    .menu ul li {
-      display: inline;
-      margin-right: 7px;
-    }
-
-    .menu ul li a {
-      padding: 10px 15px;
-      color: black;
-      text-decoration: none;
-      transition: background-color 0.3s, color 0.3s;
-    }
-
-    .menu ul li a:hover {
-      background-color: blue;
-      color: white;
-    }
-
-    .menu ul li a.active {
-      color: white;
-      background-color: #000;
-    } */
-
-
-
     .content {
       margin: 20px;
       padding: 20px;
@@ -310,20 +225,6 @@
       }
     }
 
-    /* Logo Animation */
-    @keyframes logoAnimation {
-      0% {
-        opacity: 0;
-        transform: translateX(-100px);
-        /* Start from the left */
-      }
-
-      50% {
-        transform: translateX(10px);
-        /* Move slightly to the right */
-      }
-    }
-
     /* Logo Animation */
     @keyframes logoAnimation {
       0% {
@@ -350,7 +251,6 @@
       text-align: center;
       padding: 10px 0;
       /* Padding for the footer */
-
     }
 
     #thankYouMessage {
@@ -406,207 +306,116 @@
         <li>
           <a href="#container" style="color: #333;">
             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M6.34314 11.5858L12 5.92893M12 5.92893L17.6568 11.5858M12 5.92893V18.0711" stroke="currentColor">
-              </path>
+              <path d="M6.34314 11.5858L12 5.92893M12 5.92893L17.6568 11.5858M12 5.92893V18.0711M2 12H22" stroke="#333" stroke-width="2" stroke-linecap="round" />
             </svg>
           </a>
         </li>
         <li>
-          <a href="index.html" id="home-link" class="menu_links" data-link="Home">
-            <span>Home</span>
-          </a>
+          <a href="features.html">Features</a>
         </li>
         <li>
-          <a href="features.html" id="features-link" class="menu_links" data-link="Features">
-            <span>Features</span></a>
+          <a href="about.html">About</a>
         </li>
         <li>
-          <a href="team.html" id="team-link" class="menu_links" data-link="Team">
-            <span>Team</span></a>
+          <a href="contact.html">Contact</a>
         </li>
         <li>
-          <a href="contact.html" id="contact-link" class="menu_links" data-link="Contact">
-            <span>Contact</span></a>
+          <button class="light-dark-btn">Dark Mode</button>
         </li>
         <li>
-          <a href="Feedback.html" id="contact-link" class="menu_links" data-link="Feedback">
-            <span>Feedback</span></a>
-        </li>
-        <li>
-          <a href="nearby.html" id="contact-link" class="menu_links" data-link="Nearby">
-            <span>Nearby</span></a>
+          <div class="buttons">
+            <button class="get-started">Get Started</button>
+            <button class="login">Login</button>
+          </div>
         </li>
       </ul>
     </nav>
+  </div>
 
-    <!-- -------------------------------------------------------------------------- -->
-    <div class="content" id="main-content">
-      <h1>Features</h1>
-      <p id="para">Here are the features of AmbuFlow:</p>
-      <div class="features-grid">
-        <div class="feature-card">
-          <i class="fas fa-ambulance feature-icon"></i>
-          <h2>Quick Emergency Response</h2>
-          <p>Immediate notifications to the nearest ambulance service.</p>
-        </div>
-        <div class="feature-card">
-          <i class="fas fa-map-marked-alt feature-icon"></i>
-          <h2>Real-Time Tracking</h2>
-          <p>Track ambulances in real-time for better coordination.</p>
-        </div>
-        <div class="feature-card">
-          <i class="fas fa-comments feature-icon"></i>
-          <h2>Enhanced Communication</h2>
-          <p>Instant communication between dispatch and ambulances.</p>
-        </div>
-        <div class="feature-card">
-          <i class="fas fa-cogs feature-icon"></i>
-          <h2>Resource Management</h2>
-          <p>Efficient allocation of resources for emergencies.</p>
-        </div>
-        <div class="feature-card">
-          <i class="fas fa-user-friends feature-icon"></i>
-          <h2>User-Friendly Interface</h2>
-          <p>Easy-to-navigate system for users and providers.</p>
-        </div>
-        <div class="feature-card">
-          <i class="fas fa-clock feature-icon"></i>
-          <h2>24/7 Availability</h2>
-          <p>Always available support and monitoring services.</p>
-        </div>
-        <div class="feature-card">
-          <i class="fas fa-heartbeat feature-icon"></i>
-          <h2>Patient Health Monitoring</h2>
-          <p>Real-time monitoring of patient vitals during transport.</p>
-        </div>
-        <!-- <div class="feature-card">
-          <i class="fas fa-lock feature-icon"></i>
-          <h2>Data Security</h2>
-          <p>Ensuring the security of patient and operational data.</p>
-        </div> -->
-        <div class="feature-card">
-          <i class="fas fa-phone-alt feature-icon"></i>
-          <h2>Emergency Contact Integration</h2>
-          <p>Seamless integration with emergency contact services.</p>
-        </div>
-        <div class="feature-card">
-          <i class="fas fa-tachometer-alt feature-icon"></i>
-          <h2>Driver Performance Monitoring</h2>
-          <p>Real-time tracking of driver behavior and performance on the road.</p>
-        </div>
-        <div class="feature-card">
-          <i class="fas fa-comments-dollar feature-icon"></i>
-          <h2>Feedback System</h2>
-          <p>Collecting feedback to improve service quality.</p>
-        </div>
+  <div class="content">
+    <h1>Features</h1>
+    <div class="features-grid">
+      <div class="feature-card">
+        <div class="feature-icon"><i class="fas fa-heartbeat"></i></div>
+        <h3>Real-Time Monitoring</h3>
+        <p>Track patient health in real-time with accurate data.</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon"><i class="fas fa-map-marker-alt"></i></div>
+        <h3>Location Tracking</h3>
+        <p>Get live updates on ambulance locations for quick response.</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon"><i class="fas fa-user-md"></i></div>
+        <h3>Expert Consultation</h3>
+        <p>Access medical experts for on-the-go consultations.</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon"><i class="fas fa-clock"></i></div>
+        <h3>Emergency Alerts</h3>
+        <p>Instant alerts for emergencies to ensure prompt action.</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon"><i class="fas fa-mobile-alt"></i></div>
+        <h3>User-Friendly App</h3>
+        <p>Easy-to-use interface for seamless navigation.</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon"><i class="fas fa-shield-alt"></i></div>
+        <h3>Data Security</h3>
+        <p>Your health data is secure and private.</p>
       </div>
     </div>
-
   </div>
 
-  <footer style=" color: #f3f4f6; text-align: center; width: 100%;">
-    <div style="background-color: #C4D7FF; color: #f3f4f6; ">
-      <div style="display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 0 auto;">
-
-        <!-- Quick Links Section -->
-        <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
-          <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Quick Links</h3>
-          <ul style="list-style-type: none; padding: 0;">
-            <li><a href="about.html" style="color: #000000; text-decoration: none;">About Us</a></li>
-            <li><a href="contact.html" style="color: #000000; text-decoration: none;">Contact Us</a></li>
-            <li><a href="privacy.html" style="color: #000000; text-decoration: none;">Privacy Policy</a></li>
-            <li><a href="terms.html" style="color: #000000; text-decoration: none;">Terms of Service</a></li>
-            <li><a href="sitemap.html" style="color: #000000; text-decoration: none;">Site Map</a></li>
-          </ul>
-        </div>
-
-        <!-- Contact Information Section -->
-        <div style="flex: 1; min-width: 200px; margin-bottom: 10px;">
-          <h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3>
-          <p style="color: #000;">123 Emergency Lane, Mumbai, India</p>
-          <a href="mailto:emergency@ambulanceservice.in" style="color: #000000;">emergency@ambulanceservice.in</a></p>
-          <p style="color: #000000;">Phone: <a href="tel:+91-911-1234567" style="color: #000000;">+91-911-1234567</a>
-          </p>
+  <footer>
+    <div style="display: flex; justify-content: center; flex-wrap: wrap;">
+      <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
+        <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3>
+        <div>
+          <a href="#" class="social-icon"><i class="fab fa-facebook fa-2x"></i></a>
+          <a href="#" class="social-icon"><i class="fab fa-x-twitter fa-2x"></i></a>
+          <a href="#" class="social-icon"><i class="fab fa-instagram fa-2x"></i></a>
+          <a href="#" class="social-icon"><i class="fab fa-linkedin-in fa-2x"></i></a>
         </div>
-
-        <!-- Modified the looks of the social icons -->
-        <!-- Social Media Links -->
-        <div style="text-align: center; min-width: 200px; color: black;">
-          <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3>
-          <div style="display: flex; justify-content: center; align-items: center; gap: 15px; height: 50px;">
-            <a href="https://www.facebook.com" class="social-icon facebook"
-              style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-facebook"></i></a>
-            <a href="https://www.twitter.com" class="social-icon twitter"
-              style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fa-brands fa-x-twitter"></i></a>
-            <a href="https://www.instagram.com" class="social-icon instagram"
-              style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-instagram"></i></a>
-            <a href="https://www.linkedin.com" class="social-icon linkedin"
-              style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-linkedin-in"></i></a>
+      </div>
+      <!-- Newsletter Subscription -->
+      <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
+        <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to Our Newsletter</h3>
+        <form action="#" id="subscription-form">
+          <input type="email" placeholder="Your Email" style="padding: 10px; width: 80%; border: none; border-radius: 5px;" required>
+          <div style="margin-top: 10px;">
+            <button type="submit" style="padding: 10px; border: none; border-radius: 5px; background-color: #2980b9; color: white;">Subscribe</button>
           </div>
-        </div>
-
-        <!-- Newsletter Subscription -->
-        <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
-          <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to Our Newsletter</h3>
-          <form action="#">
-            <input type="email" placeholder="Your Email"
-              style="padding: 10px; width: 80%; border: none; border-radius: 5px;" required><br><br>
-            <button type="submit"
-              style="background-color: #e81a1a; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px;">Subscribe</button>
-          </form>
-        </div>
-
+        </form>
+        <p id="thankYouMessage"></p>
       </div>
-
-    </div>
-    <hr>
-    <!-- Copyright Section -->
-    <div
-      style="background-color: #C4D7FF; color: #000000; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px;">
-      <strong>
-        <p>&copy; 2024 AmbuFlow. All rights reserved.</p>
-      </strong>
-
-      <!-- Back to Top Button -->
     </div>
+    <p style="margin: 0;">&copy; 2024 AmbuFlow. All rights reserved.</p>
   </footer>
-  <a href="chatbot.html">
-    <div class="fixed bottom-0 right-2 chatbot-container">
-      <button class="chatbot-button group">
-        <img class="h-20" src="chatbot.gif" alt="chatbot" />
-        <span class="tooltip-text">
-          Welcome to AmbuFlow!<br />
-          How can I help You?
-        </span>
-      </button>
-    </div>
-  </a>
-  <button class="light-dark-btn dark-mode-toggle" id="dark-mode-button">
-    <i class="fa-solid fa-moon"></i>
-  </button>
-
-  <div class="gtranslate_wrapper"></div>
-  <script src="preloader.js"></script>
-  <script src="script.js">  </script>
+
   <script>
+    const preloader = document.getElementById("preloader");
+    window.onload = function () {
+      preloader.style.display = "none";
+    };
+
+    const darkModeToggle = document.querySelector('.light-dark-btn');
+    darkModeToggle.addEventListener('click', function () {
+      document.body.classList.toggle('dark-mode');
+    });
 
-    // Form Submission Functionality
-    const form = document.getElementById('subscribeForm');
+    // Handle subscription form submission
+    const form = document.getElementById('subscription-form');
     const thankYouMessage = document.getElementById('thankYouMessage');
 
     form.addEventListener('submit', function (event) {
-      event.preventDefault(); // Prevent the default form submission behavior
-
-      // Show the thank you message
-      thankYouMessage.style.display = 'block';
-
-      // Hide the accordion content after submission
-      accordionContent.style.display = 'none';
-
-      // Clear the input field
-      document.getElementById('emailInput').value = '';
+      event.preventDefault(); // Prevent form submission
+      thankYouMessage.textContent = "Thank you for subscribing!";
+      thankYouMessage.style.display = "block";
+      form.reset(); // Clear the form
     });
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/home.html b/home.html
index 76d6251..c1277db 100644
--- a/home.html
+++ b/home.html
@@ -1,71 +1,72 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="styles.css" />
     <title>AmbuFlow</title>
-  </head>
-  <body>
+</head>
+<body>
     <header>
-      <div class="container">
-        <div class="logo">
-          <a href="./index.html" target="_self">
-            <img
-              src="images/logo2-w.webp"
-              alt="Ambulance Monitoring System Logo"
-              style="width: 50px; height: auto"
-            />
-          </a>
+        <div class="container">
+            <div class="logo">
+                <a href="./index.html" target="_self">
+                    <img
+                        src="images/logo2-w.webp"
+                        alt="Ambulance Monitoring System Logo"
+                        style="width: 50px; height: auto"
+                    />
+                </a>
+            </div>
+            <nav class="menu">
+                <ul>
+                    <li>
+                        <a
+                            href="./index.html"
+                            target="_self"
+                            id="home-link"
+                            onclick="changeContent('home')"
+                        >Home</a>
+                    </li>
+                    <li>
+                        <a
+                            href="features.html"
+                            id="features-link"
+                            onclick="changeContent('features')"
+                        >Features</a>
+                    </li>
+                    <li>
+                        <a
+                            href="team.html"
+                            id="team-link"
+                            onclick="changeContent('team')"
+                        >Team</a>
+                    </li>
+                    <li>
+                        <a
+                            href="contact.html"
+                            id="contact-link"
+                            onclick="changeContent('contact')"
+                        >Contact</a>
+                    </li>
+                </ul>
+            </nav>
+            <div class="buttons">
+                <a href="login.html" class="login" aria-label="Log in">Log in</a>
+                <a href="up.html" class="get-started" aria-label="Get started">Get started</a>
+            </div>
+            <div class="menu-toggle" aria-label="Toggle menu">
+                <span class="bar"></span>
+                <span class="bar"></span>
+                <span class="bar"></span>
+            </div>
         </div>
-        <nav class="menu">
-          <ul>
-            <li>
-              <a
-                href="./index.html"
-                target="_self"
-                id="home-link"
-                onclick="changeContent('home')"
-                >Home</a
-              >
-            </li>
-            <li>
-              <a
-                href="features.html"
-                id="features-link"
-                onclick="changeContent('features')"
-                >Features</a
-              >
-            </li>
-            <li>
-              <a href="team.html" id="team-link" onclick="changeContent('team')"
-                >Team</a
-              >
-            </li>
-            <li>
-              <a
-                href="contact.html"
-                id="contact-link"
-                onclick="changeContent('contact')"
-                >Contact</a
-              >
-            </li>
-          </ul>
-        </nav>
-        <div class="buttons">
-          <a href="login.html" class="login">Log in</a>
-          <a href="up.html" class="get-started">Get started</a>
-        </div>
-        <div class="menu-toggle">
-          <span class="bar"></span>
-          <span class="bar"></span>
-          <span class="bar"></span>
-        </div>
-      </div>
     </header>
     <main>
-      <div id="content"><!-- Content will change dynamically here --></div>
+        <div id="content">
+            <!-- Content will change dynamically here -->
+        </div>
     </main>
     <script src="script.js"></script>
-  </body>
+</body>
 </html>
diff --git a/hospital.html b/hospital.html
index 191f43d..fad429a 100644
--- a/hospital.html
+++ b/hospital.html
@@ -10,81 +10,79 @@
     <link rel="shortcut icon" href="ambulance.png" type="image/x-icon">
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKR3agIMLtauzDhz4fCu3heww0BV_81H4" async defer></script>
     <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" />
-</head>
-<style>
-    /* Add this to your CSS file */
-
-    .toaster {
-        position: fixed;
-        top: 20px; /* Position it from the top */
-        right: 20px; /* Position it from the right */
-        background-color: #4caf50; /* Green background for success */
-        color: white; /* Text color */
-        padding: 16px;
-        border-radius: 5px;
-        z-index: 1000;
-        opacity: 0; /* Start with opacity 0 */
-        transition: opacity 0.5s ease-in-out; /* Smooth opacity transition */
-    }
-
-    .show {
-        animation: bounceIn 0.5s forwards; /* Bounce in animation */
-        opacity: 1; /* Make it visible */
-    }
-
-    .hidden {
-        animation: bounceOut 0.5s forwards; /* Bounce out animation */
-        opacity: 0; /* Fade out */
-    }
-
-    @keyframes bounceIn {
-        0% {
-            transform: translate(0, -100%); /* Start from above */
-            opacity: 0; /* Fully transparent */
-        }
-        60% {
-            transform: translate(0, 10%); /* Bounce down */
-        }
-        100% {
-            transform: translate(0, 0); /* Final position */
-            opacity: 1; /* Fully visible */
+    <style>
+        /* Add this to your CSS file */
+        .toaster {
+            position: fixed;
+            top: 20px; /* Position it from the top */
+            right: 20px; /* Position it from the right */
+            background-color: #4caf50; /* Green background for success */
+            color: white; /* Text color */
+            padding: 16px;
+            border-radius: 5px;
+            z-index: 1000;
+            opacity: 0; /* Start with opacity 0 */
+            transition: opacity 0.5s ease-in-out; /* Smooth opacity transition */
         }
-    }
 
-    @keyframes bounceOut {
-        0% {
-            transform: translate(0, 0); /* Current position */
-            opacity: 1; /* Fully visible */
+        .show {
+            animation: bounceIn 0.5s forwards; /* Bounce in animation */
+            opacity: 1; /* Make it visible */
         }
-        60% {
-            transform: translate(0, -10%); /* Bounce up slightly */
+
+        .hidden {
+            animation: bounceOut 0.5s forwards; /* Bounce out animation */
+            opacity: 0; /* Fade out */
         }
-        100% {
-            transform: translate(0, -100%); /* Move up out of view */
-            opacity: 0; /* Fully transparent */
+
+        @keyframes bounceIn {
+            0% {
+                transform: translate(0, -100%); /* Start from above */
+                opacity: 0; /* Fully transparent */
+            }
+            60% {
+                transform: translate(0, 10%); /* Bounce down */
+            }
+            100% {
+                transform: translate(0, 0); /* Final position */
+                opacity: 1; /* Fully visible */
+            }
         }
-    }
 
-  </style>
+        @keyframes bounceOut {
+            0% {
+                transform: translate(0, 0); /* Current position */
+                opacity: 1; /* Fully visible */
+            }
+            60% {
+                transform: translate(0, -10%); /* Bounce up slightly */
+            }
+            100% {
+                transform: translate(0, -100%); /* Move up out of view */
+                opacity: 0; /* Fully transparent */
+            }
+        }
+    </style>
+</head>
 <body>
-    <!-- preloader -->
-  <div id="preloader">
-    <div class="wrapper">
-        <div class="box-wrap">
-            <div class="box one"></div>
-            <div class="box two"></div>
-            <div class="box three"></div>
-            <div class="box four"></div>
-            <div class="box five"></div>
-            <div class="box six"></div>
+    <!-- Preloader -->
+    <div id="preloader">
+        <div class="wrapper">
+            <div class="box-wrap">
+                <div class="box one"></div>
+                <div class="box two"></div>
+                <div class="box three"></div>
+                <div class="box four"></div>
+                <div class="box five"></div>
+                <div class="box six"></div>
+            </div>
         </div>
     </div>
-</div>
     <div id="toaster" class="toaster hidden"></div>
     <header>
         <nav class="navbar">
             <div class="navbar-logo">
-                <a href="./hospital.html"><img src="./images/manageLogo.png"></img></a>
+                <a href="./hospital.html"><img src="./images/manageLogo.png" alt="AmbuFlow Logo"></a>
                 <a href="./hospital.html"><h2 style="display: flex;">ambu<p style="color: #3DBDEC;">Flow</p></h2></a>
             </div>
             <ul class="navbar-links">
@@ -102,22 +100,22 @@
     </header>
 
     <!-- Dropdown -->
-     <div class="dropdown-menu">
+    <div class="dropdown-menu">
         <ul class="navbar-links2">
             <li><a href="hospital.html">Dashboard</a></li>
             <li><a href="manage.html">Manage Status</a></li>
             <li><a href="driver.html">Manage Driver</a></li>
             <li><a href="ambtracker.html">Manage Ambulance</a></li>
         </ul>
-     </div>
+    </div>
 
     <div class="dashboard-container">
-        <img src="images/Ambulance Tracker.png" alt="Bobble-AI Logo" style="width: 250px; height: auto; margin-bottom: 10px; margin-left: 30px;";>
-    
+        <img src="images/Ambulance Tracker.png" alt="Ambulance Tracker Logo" style="width: 250px; height: auto; margin-bottom: 10px; margin-left: 30px;">
         <h1 style="color: #162738;">Hospital Dashboard</h1>        
         <h2 style="font-family: 'Arial', sans-serif; font-size: 17px; color: #666; margin: 10px 0; text-align: center;">
             Your personalized AI experience
         </h2>              
+        
         <script>
             function manageDrivers() {
                 // Action to manage drivers, such as opening a page or modal
@@ -127,38 +125,30 @@ <h2 style="font-family: 'Arial', sans-serif; font-size: 17px; color: #666; margi
 
             // Function to show toaster notification
             function showToaster(message) {
-                    const toaster = document.getElementById("toaster");
-                    toaster.textContent = message;
-                    toaster.classList.remove("hidden");
-                    toaster.classList.add("show");
+                const toaster = document.getElementById("toaster");
+                toaster.textContent = message;
+                toaster.classList.remove("hidden");
+                toaster.classList.add("show");
 
-                    if(!localStorage.getItem('login')) {
-                        toaster.classList.add("hidden");
-                    }
-                    // Hide the toaster after 3 seconds
-                    setTimeout(() => {
+                // Hide the toaster after 3 seconds
+                setTimeout(() => {
                     toaster.classList.remove("show");
                     toaster.classList.add("hidden");
                 }, 3000);
             }
 
-            if (localStorage.getItem('login') == 'success'){
-                showToaster('Login Successfull');
+            if (localStorage.getItem('login') === 'success') {
+                showToaster('Login Successful');
                 localStorage.removeItem('login');
             }
 
-            let flag = false
+            let flag = false;
             document.getElementById('dropdown').addEventListener('click', () => {
                 const dropdown = document.querySelector('.dropdown-menu');
-                if (flag) {
-                    dropdown.style.display = 'none';
-                    flag = false;
-                } else {
-                    dropdown.style.display = 'block';
-                    flag = true;
-                }
+                dropdown.style.display = flag ? 'none' : 'block';
+                flag = !flag;
             });
-        
+
             function manageAmbulances() {
                 // Action to manage ambulances, such as opening a page or modal
                 alert('Manage Ambulances button clicked!');
@@ -166,174 +156,87 @@ <h2 style="font-family: 'Arial', sans-serif; font-size: 17px; color: #666; margi
             }
         </script>
         
-
-            <!-- Driver and Ambulance Status Section -->
-            <div class="status-container">
-                <!-- Driver Status Section -->
-                <div id="driverStatus" class="status-section active">
-                    <h2>Driver Status</h2>
-                    <table>
-                        <thead>
-                            <tr>
-                                <th style="color: #92c4d6;">Driver Name</th>
-                                <th style="color: #92c4d6;">Status</th>
-                                <th style="color: #92c4d6;">Action</th>
-                            </tr>
-                        </thead>
-                        <tbody id="driversTableBody">
-                            <!-- Dynamic Driver Rows Will Be Injected Here -->
-                        </tbody>
-                    </table>
-
-                    <!-- Nearby Hospital Facilities for Drivers -->
-                    <div class="nearby-facilities">
-                        <h3>Nearby Hospital Facilities</h3>
-                        <ul style="font-weight: 500;">
-                            <li style="list-style: none;">Bed Availability: <span id="bedAvailabilityDriver">Loading...</span></li>
-                            <li style="list-style: none;">Oxygen Supply: <span id="oxygenSupplyDriver">Loading...</span></li>
-                            <li style="list-style: none;">Blood Units: <span id="bloodUnitsDriver">Loading...</span></li>
-                        </ul>
-                    </div>
-
-                    <!-- Contact Details for Drivers -->
-                    <div class="contact-details">
-                        <h3>Contact Details</h3>
-                        <p style="font-weight: 500;">Driver XYZ: (123) 456-7890</p>
-                        <p style="font-weight: 500;">Driver ABC: (098) 765-4321</p>
-                    </div>
+        <!-- Driver and Ambulance Status Section -->
+        <div class="status-container">
+            <!-- Driver Status Section -->
+            <div id="driverStatus" class="status-section active">
+                <h2>Driver Status</h2>
+                <table>
+                    <thead>
+                        <tr>
+                            <th style="color: #92c4d6;">Driver Name</th>
+                            <th style="color: #92c4d6;">Status</th>
+                            <th style="color: #92c4d6;">Action</th>
+                        </tr>
+                    </thead>
+                    <tbody id="driversTableBody">
+                        <!-- Dynamic Driver Rows Will Be Injected Here -->
+                    </tbody>
+                </table>
+
+                <!-- Nearby Hospital Facilities for Drivers -->
+                <div class="nearby-facilities">
+                    <h3>Nearby Hospital Facilities</h3>
+                    <ul style="font-weight: 500;">
+                        <li style="list-style: none;">Bed Availability: <span id="bedAvailabilityDriver">Loading...</span></li>
+                        <li style="list-style: none;">Oxygen Supply: <span id="oxygenSupplyDriver">Loading...</span></li>
+                        <li style="list-style: none;">Blood Units: <span id="bloodUnitsDriver">Loading...</span></li>
+                    </ul>
                 </div>
 
-                <!-- Ambulance Status Section -->
-                <div id="ambulanceStatus" class="status-section active">
-                    <h2>Ambulance Status</h2>
-                    <table>
-                        <thead>
-                            <tr>
-                                <th style="color: #92c4d6;">Ambulance ID</th>
-                                <th style="color: #92c4d6;">Location</th>
-                                <th style="color: #92c4d6;">Action</th>
-                            </tr>
-                        </thead>
-                        <tbody id="ambulancesTableBody">
-                            <!-- Dynamic Ambulance Rows Will Be Injected Here -->
-                        </tbody>
-                    </table>
+                <!-- Contact Details for Drivers -->
+                <div class="contact-details">
+                    <h3>Contact Details</h3>
+                    <p style="font-weight: 500;">Driver XYZ: (123) 456-7890</p>
+                    <p style="font-weight: 500;">Driver ABC: (098) 765-4321</p>
+                </div>
+            </div>
 
-                    <!-- Nearby Hospital Facilities for Ambulances -->
-                    <div class="nearby-facilities">
-                        <h3>Nearby Hospital Facilities</h3>
-                        <ul style="font-weight: 500;">
-                            <li style="list-style: none;">Bed Availability: <span id="bedAvailabilityAmbulance">Loading...</span></li>
-                            <li style="list-style: none;">Oxygen Supply: <span id="oxygenSupplyAmbulance">Loading...</span></li>
-                            <li style="list-style: none;">Blood Units: <span id="bloodUnitsAmbulance">Loading...</span></li>
-                        </ul>
-                    </div>
+            <!-- Ambulance Status Section -->
+            <div id="ambulanceStatus" class="status-section active">
+                <h2>Ambulance Status</h2>
+                <table>
+                    <thead>
+                        <tr>
+                            <th style="color: #92c4d6;">Ambulance ID</th>
+                            <th style="color: #92c4d6;">Location</th>
+                            <th style="color: #92c4d6;">Status</th>
+                        </tr>
+                    </thead>
+                    <tbody id="ambulancesTableBody">
+                        <!-- Dynamic Ambulance Rows Will Be Injected Here -->
+                    </tbody>
+                </table>
+
+                <!-- Nearby Hospital Facilities for Ambulances -->
+                <div class="nearby-facilities">
+                    <h3>Nearby Hospital Facilities</h3>
+                    <ul style="font-weight: 500;">
+                        <li style="list-style: none;">Bed Availability: <span id="bedAvailabilityAmbulance">Loading...</span></li>
+                        <li style="list-style: none;">Oxygen Supply: <span id="oxygenSupplyAmbulance">Loading...</span></li>
+                        <li style="list-style: none;">Blood Units: <span id="bloodUnitsAmbulance">Loading...</span></li>
+                    </ul>
+                </div>
 
-                    <!-- Contact Details for Ambulances -->
-                    <div class="contact-details">
-                        <h3>Contact Details</h3>
-                        <p style="font-weight: 500;">Ambulance 1: (321) 654-0987</p>
-                        <p style="font-weight: 500;">Ambulance 2: (789) 012-3456</p>
-                    </div>
+                <!-- Contact Details for Ambulances -->
+                <div class="contact-details">
+                    <h3>Contact Details</h3>
+                    <p style="font-weight: 500;">Ambulance A: (123) 456-7890</p>
+                    <p style="font-weight: 500;">Ambulance B: (098) 765-4321</p>
                 </div>
             </div>
         </div>
-    </main>
-    <script src="preloader.js"></script>
-
-    <script>
-        // Elements
-        const manageBtn = document.getElementById('manageBtn');
-        const driversTableBody = document.getElementById('driversTableBody');
-        const ambulancesTableBody = document.getElementById('ambulancesTableBody');
-
-        // Mock Data for Nearby Facilities (Replace with dynamic data if available)
-        document.getElementById('bedAvailabilityDriver').textContent = "20";
-        document.getElementById('oxygenSupplyDriver').textContent = "Sufficient";
-        document.getElementById('bloodUnitsDriver').textContent = "15";
-
-        document.getElementById('bedAvailabilityAmbulance').textContent = "15";
-        document.getElementById('oxygenSupplyAmbulance').textContent = "Limited";
-        document.getElementById('bloodUnitsAmbulance').textContent = "10";
-
-        // Function to Load Drivers from localStorage
-        function loadDrivers() {
-            const drivers = JSON.parse(localStorage.getItem('drivers')) || [];
-            driversTableBody.innerHTML = ''; // Clear existing rows
-
-            drivers.forEach((driver, index) => {
-                const tr = document.createElement('tr');
-
-                const nameTd = document.createElement('td');
-                nameTd.textContent = driver.name;
-                tr.appendChild(nameTd);
-
-                const statusTd = document.createElement('td');
-                const statusSpan = document.createElement('span');
-                statusSpan.classList.add('status', driver.status.toLowerCase());
-                statusSpan.textContent = driver.status;
-                statusTd.appendChild(statusSpan);
-                tr.appendChild(statusTd);
-
-                const actionTd = document.createElement('td');
-                const manageLink = document.createElement('a');
-                manageLink.href = `manage.html?type=driver&index=${index}`;
-                manageLink.classList.add('manage-link');
-                manageLink.textContent = 'Manage';
-                actionTd.appendChild(manageLink);
-                tr.appendChild(actionTd);
-
-                driversTableBody.appendChild(tr);
-            });
-        }
 
-        // Function to Load Ambulances from localStorage
-        function loadAmbulances() {
-            const ambulances = JSON.parse(localStorage.getItem('ambulances')) || [];
-            ambulancesTableBody.innerHTML = ''; // Clear existing rows
-
-            ambulances.forEach((ambulance, index) => {
-                const tr = document.createElement('tr');
-
-                const idTd = document.createElement('td');
-                idTd.textContent = ambulance.id;
-                tr.appendChild(idTd);
-
-                const locationTd = document.createElement('td');
-                locationTd.textContent = ambulance.location;
-                tr.appendChild(locationTd);
-
-                const actionTd = document.createElement('td');
-                const manageLink = document.createElement('a');
-                manageLink.href = `manage.html?type=ambulance&index=${index}`;
-                manageLink.classList.add('manage-ambulance');
-                manageLink.textContent = 'Manage';
-                actionTd.appendChild(manageLink);
-                tr.appendChild(actionTd);
-
-                ambulancesTableBody.appendChild(tr);
-            });
-        }
-
-        // Initial Load
-        loadDrivers();
-        loadAmbulances();
-
-        // Event Listener for Manage Button
-        manageBtn.addEventListener('click', () => {
-            window.location.href = 'manage.html';
-        });
+        <div class="actions-container">
+            <button id="manageDriversButton" onclick="manageDrivers()">Manage Drivers</button>
+            <button id="manageAmbulancesButton" onclick="manageAmbulances()">Manage Ambulances</button>
+        </div>
 
-        function logout() {
-            const confirmLogout = confirm('Are you sure you want to logout?');
-            if (confirmLogout) {
-                localStorage.removeItem('userID');
-                localStorage.removeItem('JWTtoken');
-                window.location.href = 'index.html';
-                alert("Logged out successfully!");
-            }
-        }   
+        <footer>
+            <p>&copy; 2023 AmbuFlow. All Rights Reserved.</p>
+        </footer>
+    </div>
 
-    </script>
+    <script src="src/js/hospital.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/login.js b/login.js
index c094107..6f7692c 100644
--- a/login.js
+++ b/login.js
@@ -6,6 +6,7 @@ const passwordField = document.querySelector(".sign-up-form input[type='password
 const strengthWeak = document.getElementById("strength-weak");
 const strengthMedium = document.getElementById("strength-medium");
 const strengthStrong = document.getElementById("strength-strong");
+const feedbackMessage = document.getElementById("password-feedback");
 
 // Toggle between Sign-In and Sign-Up modes
 signUpBtn.addEventListener("click", () => {
@@ -50,18 +51,16 @@ function checkPasswordStrength() {
   strengthStrong.className = "";
 
   // Update strength indicators dynamically
-  if (strength >= 1) strengthWeak.className = "weak";
-  if (strength >= 3) strengthMedium.className = "medium";
-  if (strength >= 5) strengthStrong.className = "strong";
-  
-  // Optional: Provide feedback to user
+  if (strength >= 1) strengthWeak.classList.add("weak");
+  if (strength >= 3) strengthMedium.classList.add("medium");
+  if (strength >= 5) strengthStrong.classList.add("strong");
+
+  // Provide feedback to user
   displayStrengthMessage(strength);
 }
 
 // Display feedback message for password strength
 function displayStrengthMessage(strength) {
-  const feedbackMessage = document.getElementById("password-feedback");
-
   let message = "";
   let color = "";
 
diff --git a/manage.html b/manage.html
index 7ca7715..dbc23e1 100644
--- a/manage.html
+++ b/manage.html
@@ -6,7 +6,7 @@
     <title>Manage Status</title>
     <link rel="stylesheet" href="src/css/manage.css">
     <link rel="stylesheet" href="src/css/hospital.css"> 
-    <link rel="shortcut icon" href="ambulance.png" type="image/x-icon"><!-- Ensures consistent styling -->
+    <link rel="shortcut icon" href="ambulance.png" type="image/x-icon">
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKR3agIMLtauzDhz4fCu3heww0BV_81H4" async defer></script>
     <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" />
 </head>
@@ -14,7 +14,7 @@
     <header>
         <nav class="navbar">
             <div class="navbar-logo">
-                <a href="./index.html" target="_self"><img src="./images/manageLogo.png"></img></a>
+                <a href="./index.html" target="_self"><img src="./images/manageLogo.png" alt="AmbuFlow Logo"></a>
                 <a href="./index.html"><h2 style="display: flex;">ambu<p style="color: #3DBDEC;">Flow</p></h2></a>
             </div>
             <ul class="navbar-links">
@@ -39,7 +39,7 @@
             <li><a href="driver.html">Manage Driver</a></li>
             <li><a href="ambtracker.html">Manage Ambulance</a></li>
         </ul>
-     </div>
+    </div>
 
     <main>
         <div class="manage-container">
@@ -53,8 +53,8 @@ <h1>Manage Status</h1>
             <section id="manageDriverSection" class="manage-section">
                 <h2 id="driverFormTitle" style="margin-bottom: 20px;">Add Driver</h2>
                 <form id="driverForm">
-                    <input type="text" id="driverIndex" name="driverIndex" hidden>
-                    
+                    <input type="hidden" id="driverIndex" name="driverIndex">
+
                     <div class="form-group">
                         <label for="driverName">Driver Name:</label>
                         <input type="text" id="driverName" name="driverName" required placeholder="Enter driver name">
@@ -90,7 +90,7 @@ <h2 id="driverFormTitle" style="margin-bottom: 20px;">Add Driver</h2>
                 <h2 id="ambulanceFormTitle" style="margin-bottom: 20px;">Add Ambulance</h2>
                 <form id="ambulanceForm">
                     <input type="hidden" id="ambulanceIndex" name="ambulanceIndex">
-                    
+
                     <div class="form-group">
                         <label for="ambulanceID">Ambulance ID:</label>
                         <input type="text" id="ambulanceID" name="ambulanceID" required placeholder="Enter ambulance ID">
@@ -138,16 +138,11 @@ <h2 id="ambulanceFormTitle" style="margin-bottom: 20px;">Add Ambulance</h2>
         }
 
         // Dropdown
-        let flag = false
+        let flag = false;
         document.getElementById('dropdown').addEventListener('click', () => {
             const dropdown = document.querySelector('.dropdown-menu');
-            if (flag) {
-                dropdown.style.display = 'none';
-                flag = false;
-            } else {
-                dropdown.style.display = 'block';
-                flag = true;
-            }
+            dropdown.style.display = flag ? 'none' : 'block';
+            flag = !flag;
         });
 
         // Function to hide a section
@@ -183,166 +178,29 @@ <h2 id="ambulanceFormTitle" style="margin-bottom: 20px;">Add Ambulance</h2>
         });
 
         // Handle Driver Form Submission
-      // Handle Driver Form Submission
-driverForm.addEventListener('submit', (e) => {
-    e.preventDefault();
-    const driverName = document.getElementById('driverName').value.trim();
-    const driverStatus = document.getElementById('driverStatusSelect').value;
-    const driverContact = document.getElementById('driverContact').value;
-    const driverLocation = document.getElementById('driverLocation').value.trim();
-    const driverIndex = document.getElementById('driverIndex').value;
-
-    let drivers = JSON.parse(localStorage.getItem('drivers')) || [];
-
-    // Function to check if driver already exists
-    const driverExists = (name, contact, location) => {
-        return drivers.some(driver => 
-            driver.name.toLowerCase() === name.toLowerCase() &&
-            driver.contact === contact &&
-            driver.location.toLowerCase() === location.toLowerCase()
-        );
-    };
-
-    if (driverIndex === '') {
-        // Check for duplicate when adding a new driver
-        if (driverExists(driverName, driverContact, driverLocation)) {
-            alert(`A driver with the name "${driverName}", contact "${driverContact}", and location "${driverLocation}" already exists.`);
-            return; // Exit the function without adding the driver
-        }
-        // Add New Driver
-        drivers.push({
-            name: driverName,
-            status: driverStatus,
-            contact: driverContact,
-            location: driverLocation
+        driverForm.addEventListener('submit', function (event) {
+            event.preventDefault();
+            // Perform your save action here
+            console.log("Driver Saved:", {
+                name: driverForm.driverName.value,
+                status: driverForm.driverStatus.value,
+                contact: driverForm.driverContact.value,
+                location: driverForm.driverLocation.value
+            });
+            hideSection(manageDriverSection);
         });
-        alert(`Driver ${driverName} has been added.`);
-    } else {
-        // Edit Existing Driver
-        const originalDriver = drivers[driverIndex];
-        if (
-            originalDriver.name !== driverName ||
-            originalDriver.contact !== driverContact ||
-            originalDriver.location !== driverLocation
-        ) {
-            // Check for duplicate only if name, contact, or location has changed
-            if (driverExists(driverName, driverContact, driverLocation)) {
-                alert(`A driver with the name "${driverName}", contact "${driverContact}", and location "${driverLocation}" already exists.`);
-                return; // Exit the function without updating the driver
-            }
-        }
-        drivers[driverIndex] = {
-            name: driverName,
-            status: driverStatus,
-            contact: driverContact,
-            location: driverLocation
-        };
-        alert(`Driver ${driverName} has been updated.`);
-    }
-
-    localStorage.setItem('drivers', JSON.stringify(drivers));
-    hideSection(manageDriverSection);
-});
-
-      
 
         // Handle Ambulance Form Submission
-        ambulanceForm.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const ambulanceID = document.getElementById('ambulanceID').value.trim();
-            const ambulanceStatus = document.getElementById('ambulanceStatusSelect').value;
-            const ambulanceLocation = document.getElementById('ambulanceLocation').value.trim();
-            const ambulanceIndex = document.getElementById('ambulanceIndex').value;
-
-            let ambulances = JSON.parse(localStorage.getItem('ambulances')) || [];
-
-            if (ambulanceIndex === '') {
-                // Add New Ambulance
-                ambulances.push({
-                    id: ambulanceID,
-                    status: ambulanceStatus,
-                    location: ambulanceLocation
-                });
-                alert(`Ambulance ${ambulanceID} has been added.`);
-            } else {
-                // Edit Existing Ambulance
-                ambulances[ambulanceIndex] = {
-                    id: ambulanceID,
-                    status: ambulanceStatus,
-                    location: ambulanceLocation
-                };
-                alert(`Ambulance ${ambulanceID} has been updated.`);
-            }
-
-            localStorage.setItem('ambulances', JSON.stringify(ambulances));
+        ambulanceForm.addEventListener('submit', function (event) {
+            event.preventDefault();
+            // Perform your save action here
+            console.log("Ambulance Saved:", {
+                id: ambulanceForm.ambulanceID.value,
+                status: ambulanceForm.ambulanceStatus.value,
+                location: ambulanceForm.ambulanceLocation.value
+            });
             hideSection(manageAmbulanceSection);
         });
-
-        // Function to populate form for editing Driver
-        function populateDriverForm(index) {
-            const drivers = JSON.parse(localStorage.getItem('drivers')) || [];
-            const driver = drivers[index];
-            if (driver) {
-                document.getElementById('driverName').value = driver.name;
-                document.getElementById('driverStatusSelect').value = driver.status;
-                document.getElementById('driverContact').value = driver.contact;
-                document.getElementById('driverLocation').value = driver.location;
-                document.getElementById('driverIndex').value = index;
-                driverFormTitle.textContent = `Edit Driver: ${driver.name}`;
-                showSection(manageDriverSection);
-            }
-        }
-
-        // Function to populate form for editing Ambulance
-        function populateAmbulanceForm(index) {
-            const ambulances = JSON.parse(localStorage.getItem('ambulances')) || [];
-            const ambulance = ambulances[index];
-            if (ambulance) {
-                document.getElementById('ambulanceID').value = ambulance.id;
-                document.getElementById('ambulanceStatusSelect').value = ambulance.status;
-                document.getElementById('ambulanceLocation').value = ambulance.location;
-                document.getElementById('ambulanceIndex').value = index;
-                ambulanceFormTitle.textContent = `Edit Ambulance: ${ambulance.id}`;
-                showSection(manageAmbulanceSection);
-            }
-        }
-
-        // Populate forms if accessed via query parameters for editing
-        window.onload = () => {
-            const params = new URLSearchParams(window.location.search);
-            const type = params.get('type');
-            const index = params.get('index');
-
-            if (type && index !== null) {
-                if (type === 'driver') {
-                    populateDriverForm(index);
-                } else if (type === 'ambulance') {
-                    populateAmbulanceForm(index);
-                }
-            }
-        };
-
-        document.getElementById('logout').addEventListener('click', () => {
-            cf = confirm('Are you sure you want to logout?');
-            if (cf) {
-                localStorage.removeItem('userID');
-                localStorage.removeItem('JWTtoken');
-                window.location.href = 'index.html';
-                alert("Logged out successfully!");
-            } else return
-        });
-
-        // Logout (for small screens)
-        function logout1(){
-            cf = confirm('Are you sure you want to logout?');
-            if (cf) {
-                localStorage.removeItem('userID');
-                localStorage.removeItem('JWTtoken');
-                window.location.href = 'index.html';
-                alert("Logged out successfully!");
-            } else return
-        }
-
     </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/nearby.html b/nearby.html
index 759a213..f144ced 100644
--- a/nearby.html
+++ b/nearby.html
@@ -6,10 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="src/css/navbar.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
-    <!-- Added Favicon -->
     <link rel="shortcut icon" href="ambulance.png" type="image/x-icon" />
     <title>Find Nearby Hospital</title>
-    <div class="gtranslate_wrapper"></div>
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -31,7 +29,7 @@
 
         .main_container {
             display: grid;
-            grid-template-columns: repeat(4, 1fr);
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
             gap: 20px;
             margin-bottom: 20px;
         }
@@ -101,7 +99,6 @@
 
         .dark-mode .logo img {
             filter: brightness(10);
-            /* Inverts the color to make it white */
         }
 
         .dark-mode h1,
@@ -112,7 +109,7 @@
 </head>
 
 <body>
-    <!-- pre loader -->
+    <!-- Preloader -->
     <div id="preloader">
         <div class="wrapper">
             <div class="box-wrap">
@@ -127,74 +124,52 @@
     </div>
 
     <div class="container" id="container">
-
         <div class="logo">
             <div class="brand-name">
-                <span class="letter red" style="--letter-index: 1;">A</span>
-                <span class="letter red" style="--letter-index: 2;">m</span>
-                <span class="letter red" style="--letter-index: 3;">b</span>
-                <span class="letter red" style="--letter-index: 4;">u</span>
-                <span class="letter" style="--letter-index: 5;">F</span>
-                <span class="letter" style="--letter-index: 6;">l</span>
-                <span class="letter" style="--letter-index: 7;">o</span>
-                <span class="letter" style="--letter-index: 8;">w</span>
+                <span class="letter red">A</span>
+                <span class="letter red">m</span>
+                <span class="letter red">b</span>
+                <span class="letter red">u</span>
+                <span class="letter">F</span>
+                <span class="letter">l</span>
+                <span class="letter">o</span>
+                <span class="letter">w</span>
             </div>
-            <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 80px; height: auto" />
+            <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 80px; height: auto;" />
         </div>
+        
         <nav class="menu">
             <ul>
                 <li>
                     <a href="#container" style="color: #333;">
                         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M6.34314 11.5858L12 5.92893M12 5.92893L17.6568 11.5858M12 5.92893V18.0711"
-                                stroke="currentColor">
-                            </path>
+                            <path d="M6.34314 11.5858L12 5.92893M12 5.92893L17.6568 11.5858M12 5.92893V18.0711" stroke="currentColor"></path>
                         </svg>
                     </a>
                 </li>
-                <li>
-                    <a href="index.html" id="home-link" class="menu_links" data-link="Home">
-                        <span>Home</span>
-                    </a>
-                </li>
-                <li>
-                    <a href="features.html" id="features-link" class="menu_links" data-link="Features">
-                        <span>Features</span></a>
-                </li>
-                <li>
-                    <a href="team.html" id="team-link" class="menu_links" data-link="Team">
-                        <span>Team</span></a>
-                </li>
-                <li>
-                    <a href="contact.html" id="contact-link" class="menu_links" data-link="Contact">
-                        <span>Contact</span></a>
-                </li>
-                <li>
-                    <a href="Feedback.html" id="feedback-link" class="menu_links" data-link="Feedback">
-                        <span>Feedback</span></a>
-                </li>
-                <li>
-                    <a href="nearby.html" id="nearby-link" class="menu_links" data-link="Nearby">
-                        <span>Nearby</span></a>
-                </li>
+                <li><a href="index.html" id="home-link" class="menu_links">Home</a></li>
+                <li><a href="features.html" id="features-link" class="menu_links">Features</a></li>
+                <li><a href="team.html" id="team-link" class="menu_links">Team</a></li>
+                <li><a href="contact.html" id="contact-link" class="menu_links">Contact</a></li>
+                <li><a href="Feedback.html" id="feedback-link" class="menu_links">Feedback</a></li>
+                <li><a href="nearby.html" id="nearby-link" class="menu_links">Nearby</a></li>
             </ul>
         </nav>
-
     </div>
+
     <a href="chatbot.html">
         <div class="fixed bottom-0 right-2 chatbot-container">
             <button class="chatbot-button group">
-                <img class="h-20" src="chatbot.gif" alt="chatbot" />
-                <span class="tooltip-text">
-                    Welcome to AmbuFlow!<br />
-                    How can I help You?
-                </span>
+                <img class="h-20" src="chatbot.gif" alt="Chatbot" />
+                <span class="tooltip-text">Welcome to AmbuFlow!<br />How can I help You?</span>
             </button>
         </div>
     </a>
+
     <button class="light-dark-btn dark-mode-toggle" id="dark-mode-button">
         <i class="fa-solid fa-moon"></i>
     </button>
+    
     <h1>Find Nearby Hospital</h1>
     <h2>Track or call an ambulance and check nearby hospitals for emergency services</h2>
 
@@ -221,114 +196,41 @@ <h2>Track or call an ambulance and check nearby hospitals for emergency services
                 location: "Okhla Road, New Delhi",
                 image: "https://lh5.googleusercontent.com/p/AF1QipO_LJoTauSAwR0RaSEco9DpYYfVjcBL6oMwZlGM=w480-h240-k-no",
                 link: "https://www.google.com/maps/place/Fortis+Escorts+Heart+Institute/@28.5605979,77.2714045,17z/data=!3m1!4b1!4m6!3m5!1s0x390ce392b869bbaf:0x865db71ba6f271b2!8m2!3d28.5605932!4d77.2739794!16s%2Fg%2F1tyzxc62?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D",
-                phone: "+911345678901"
-            },
-            {
-                name: "Max Super Speciality Hospital",
-                location: "Saket, New Delhi",
-                image: "https://lh5.googleusercontent.com/p/AF1QipMHbDvRM2SnP15JEFiHHU3BkbeMyILB4Fe_9vb_=w408-h272-k-no",
-                link: "https://www.google.com/maps/place/Max+Super+Speciality+Hospital,+Saket+(Max+Saket)/@28.5275537,77.2094197,17z/data=!3m1!4b1!4m6!3m5!1s0x390ce1f427d4c5fb:0x582d47bbf4970bc1!8m2!3d28.527549!4d77.2119946!16s%2Fm%2F0nhgv9_?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D",
-                phone: "+911345678901"
-            },
-            {
-                name: "BLK Super Speciality Hospital",
-                location: "Pusa Road, New Delhi",
-                image: "https://lh5.googleusercontent.com/p/AF1QipOOE3FO4yP5Th80bikVNoZbSmhNUgZz8baujSsJ=w427-h240-k-no",
-                link: "https://www.google.com/maps/place/BLK-Max+Super+Speciality+Hospital+Delhi/@28.6433081,77.1771302,17z/data=!3m1!4b1!4m6!3m5!1s0x390d029633b6af21:0x9a67323b63bcc188!8m2!3d28.6433034!4d77.1797051!16s%2Fg%2F1tfzvwkd?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D",
-                phone: "+911345678901"
-            },
-            {
-                name: "Sir Ganga Ram Hospital",
-                location: "Rajinder Nagar, New Delhi",
-                image: "https://lh5.googleusercontent.com/p/AF1QipPge4AJnRsJww6qZfswWAL9LBfd1iDCBM-hpCzW=w408-h544-k-no",
-                link: "https://www.google.com/maps/place/SIR+GANGA+RAM+HOSPITAL,+Sir+Ganga+Ram+Hospital+Marg,+Old+Rajinder+Nagar,+New+Rajinder+Nagar,+Delhi,+110060/@28.6385473,77.1894559,17z/data=!3m1!4b1!4m6!3m5!1s0x390d02a17c4ab835:0xdee61a9d767b964b!8m2!3d28.6384582!4d77.1895559!16s%2Fg%2F11bytpc110?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D",
-                phone: "+911345678901"
-            },
-            {
-                name: "Apollo Hospitals Delhi",
-                location: "Karol Bagh, New Delhi",
-                image: "https://lh5.googleusercontent.com/p/AF1QipNUO3hhiOSgCnWYou3qHm0SQTlKaM0wIfiG_OaU=w408-h270-k-no",
-                link: "#",
-                phone: "+911345678901"
-            },
-            {
-                name: "Holy Family Hospital",
-                location: "Okhla, New Delhi",
-                image: "https://lh5.googleusercontent.com/p/AF1QipMpQ-20kn_yH0AtOS1fl7o9fhVcdPZIs4ncO5fU=w408-h306-k-no",
-                link: "https://www.google.com/maps/place/Holy+Family+Hospital/@28.5618161,77.2751113,17z/data=!4m15!1m8!3m7!1s0x390ce3929e6d3319:0xcd2355b56b80d9cf!2sHoly+Family+Hospital!8m2!3d28.5618161!4d77.2751113!10e5!16s%2Fm%2F0n46sgy!3m5!1s0x390ce3929e6d3319:0xcd2355b56b80d9cf!8m2!3d28.5618161!4d77.2751113!16s%2Fm%2F0n46sgy?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D",
-                phone: "+911345678901"
-            },
-            {
-                name: "Safdarjung Hospital",
-                location: "Safdarjung Enclave, New Delhi",
-                image: "https://lh5.googleusercontent.com/p/AF1QipNrfGkAU1lF3dJVwnJZpLFNrRbzmksWyRDJmvwy=w408-h489-k-no",
-                link: "https://www.google.com/maps/place/Safdarjung+Hospital+New+Emergency+Block/@28.5686945,77.2069167,17z/data=!3m1!4b1!4m6!3m5!1s0x390ce3c788fcae8f:0x2db4a8bddc6eae25!8m2!3d28.5686945!4d77.2069167!16s%2Fg%2F11f66b854r?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D",
-            },
-            {
-                name: "Moolchand Medcity",
-                location: "Lajpat Nagar, New Delhi",
-                image: "https://lh5.googleusercontent.com/p/AF1QipO3wxKBu2OTky8xeC5ML8UrgN-ddnaxTqyKuHzr=w408-h368-k-no",
-                link: "https://www.google.com/maps/place/Moolchand+Hospital/@28.566167,77.2331993,17z/data=!4m10!1m2!2m1!1smoolchand+medcity!3m6!1s0x390ce3c849a0fecd:0x309c4e9de4e2aff3!8m2!3d28.566167!4d77.235388!15sChFtb29sY2hhbmQgbWVkY2l0eZIBEHByaXZhdGVfaG9zcGl0YWzgAQA!16s%2Fg%2F11j0045tc5?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D",
-                phone: "+911345678901"
-            },
-            {
-                name: "Deen Dayal Upadhyay Hospital",
-                location: "Hari Nagar, New Delhi",
-                image: "https://lh5.googleusercontent.com/p/AF1QipOwiTt3QQ-u0vkOmn0njbkwESBmspr82g_wF4Er=w427-h240-k-no",
-                link: "https://www.google.com/maps/place/Deen+Dayal+Upadhyay+Hospital/@28.628017,77.1122963,17z/data=!3m1!4b1!4m6!3m5!1s0x390cfd309eebed77:0xc8559980f0b50535!8m2!3d28.628017!4d77.1122963!16s%2Fg%2F1tf1m64n?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D",
-                phone: "+911345678901"
-            },
-            {
-                name: "Artemis Hospitals",
-                location: "Dwarka, New Delhi",
-                image: "https://lh5.googleusercontent.com/p/AF1QipO4FfTa6lmb3Hncw3WgwGt-4n-4qcv6NDMVeUfh=w408-h306-k-no",
-                link: "https://www.google.com/maps/place/Artemis+Hospitals+Dwarka/@28.5709273,77.0593246,17z/data=!3m1!4b1!4m6!3m5!1s0x390d1b03c0000001:0x3eb1330d284a7209!8m2!3d28.5709273!4d77.0593246!16s%2Fg%2F11g_yrth5?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D",
-                phone: "+911345678901"
-            },
-            {
-                name: "Venkateshwar Hospital",
-                location: "Sector 18A, Dwarka, New Delhi",
-                image: "https://lh5.googleusercontent.com/p/AF1QipPfqqxb8Yu1rfBbEWDzom0Gb1mfY7R8zohuCym1=w408-h544-k-no",
-                link: "https://www.google.com/maps/place/Venkateshwar+Hospital/@28.5885973,77.0380428,17z/data=!3m1!4b1!4m6!3m5!1s0x390d1ac3e8a4b27b:0x218f945a11993663!8m2!3d28.5885973!4d77.0380428!16s%2Fg%2F11b7y83nv6?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D",
-                phone: "+911345678901"
+                phone: "+911123456789"
             }
+            // Add more hospital objects here
         ];
 
-        function createHospitalCard(hospital) {
-            return `
-        <div class="hospital-card">
-            <a href="${hospital.link}" target="_blank">
-                <img src="${hospital.image}" alt="${hospital.name}">
-            </a>
-            <a href="${hospital.link}" target="_blank">${hospital.name}</a>
-            <p>Location: ${hospital.location}</p>
-            <button class="button" onclick="window.location.href='tel:${hospital.phone}'">Call Now</button>
-        </div>
-    `;
-        }
-
-
-        function renderHospitals(hospitalsToRender) {
+        // Function to display hospital cards
+        function displayHospitals(hospitalList) {
             const container = document.getElementById('hospitalContainer');
-            container.innerHTML = hospitalsToRender.map(createHospitalCard).join('');
-        }
-
-        function filterHospitals(searchTerm) {
-            return hospitals.filter(hospital =>
-                hospital.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                hospital.location.toLowerCase().includes(searchTerm.toLowerCase())
+            container.innerHTML = ''; // Clear existing content
+            hospitalList.forEach(hospital => {
+                const card = document.createElement('div');
+                card.className = 'hospital-card';
+                card.innerHTML = `
+                    <img src="${hospital.image}" alt="${hospital.name} Hospital">
+                    <a href="${hospital.link}" target="_blank">${hospital.name}</a>
+                    <p>${hospital.location}</p>
+                    <p>Contact: ${hospital.phone}</p>
+                `;
+                container.appendChild(card);
+            });
+        }
+
+        // Search functionality
+        document.getElementById('searchInput').addEventListener('input', function() {
+            const searchValue = this.value.toLowerCase();
+            const filteredHospitals = hospitals.filter(hospital => 
+                hospital.name.toLowerCase().includes(searchValue) || 
+                hospital.location.toLowerCase().includes(searchValue)
             );
-        }
-
-        document.getElementById('searchInput').addEventListener('input', function (e) {
-            const searchTerm = e.target.value;
-            const filteredHospitals = filterHospitals(searchTerm);
-            renderHospitals(filteredHospitals);
+            displayHospitals(filteredHospitals);
         });
 
-        // Initial render
-        renderHospitals(hospitals);
+        // Initial display
+        displayHospitals(hospitals);
     </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/postcss.config.js b/postcss.config.js
index 33ad091..fc81f09 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +1,7 @@
+// postcss.config.js
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    tailwindcss: {}, // Initializes Tailwind CSS
+    autoprefixer: {}, // Adds vendor prefixes to CSS rules
   },
-}
+};
diff --git a/preloader.js b/preloader.js
index 1feb919..3b0dc69 100644
--- a/preloader.js
+++ b/preloader.js
@@ -1,9 +1,12 @@
-// /preloader js styling
-
-let preloader = document.querySelector("#preloader");
-
-window.addEventListener("load",function(e){
-
-    preloader.style.display = "none";
-
-});
\ No newline at end of file
+// Preloader JS Styling
+
+document.addEventListener("DOMContentLoaded", function() {
+    let preloader = document.querySelector("#preloader");
+
+    // Ensure the preloader exists before trying to manipulate it
+    if (preloader) {
+        window.addEventListener("load", function() {
+            preloader.style.display = "none"; // Hide the preloader
+        });
+    }
+});
diff --git a/preloaderStyle.css b/preloaderStyle.css
index f20a4a4..1494477 100644
--- a/preloaderStyle.css
+++ b/preloaderStyle.css
@@ -3,47 +3,51 @@
     margin: 0;
     padding: 0;
 }
-#preloader{
 
+#preloader {
     height: 100vh;
     width: 100%;
     position: fixed;
     z-index: 200;
-    min-height: 100vh;
-    background: #ffffff;
+    background: #ffffff; /* Change this to any color you prefer */
     display: flex;
     justify-content: center;
-    align-items: center;}
+    align-items: center;
+}
+
 .wrapper {
     position: absolute;
     left: 50%;
     top: 50%;
-    margin: -100px;
+    transform: translate(-50%, -50%); /* Centering the wrapper */
     width: 200px;
     height: 200px;
     background-color: transparent;
     border: none;
     -webkit-user-select: none;
 }
+
 .wrapper .box-wrap {
     width: 70%;
     height: 70%;
-    margin: calc((100% - 70%)/2) calc((100% - 70%)/2);
     position: relative;
     transform: rotate(-45deg);
+    margin: auto; /* Center the box-wrap */
 }
+
 .wrapper .box-wrap .box {
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0;
     top: 0;
-    background: rgba(135, 0, 0, .6);
-    background: linear-gradient(to right, #141562, #486fbc, #eab5a1, #8dd6ff, #4973c9, #d07ca7, #f4915e, #f5919e, #b46f89, #141562, #486fbc);
+    background: linear-gradient(to right, #141562, #486fbc, #eab5a1, #8dd6ff, #4973c9, #d07ca7, #f4915e, #f5919e, #b46f89);
     background-position: 0% 50%;
     background-size: 1000% 1000%;
-    visibility: hidden;
+    visibility: hidden; /* Hide all boxes initially */
 }
+
+/* Individual box animations */
 .wrapper .box-wrap .box.one {
     animation: moveGradient 15s infinite, oneMove 3.5s infinite;
 }
@@ -62,218 +66,107 @@
 .wrapper .box-wrap .box.six {
     animation: moveGradient 15s infinite, sixMove 3.5s 0.875s infinite;
 }
+
+/* Background gradient movement */
 @keyframes moveGradient {
     to {
         background-position: 100% 50%;
-   }
+    }
 }
+
+/* Individual box animations with adjusted keyframes */
 @keyframes oneMove {
-    0% {
+    0%, 14.2857% {
         visibility: visible;
         clip-path: inset(0% 35% 70% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-    14.2857% {
-        clip-path: inset(0% 35% 70% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
+    }
     28.5714% {
         clip-path: inset(35% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-    42.8571% {
-        clip-path: inset(35% 70% 35% 0 round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-    57.1428% {
+    }
+    42.8571%, 57.1428% {
         clip-path: inset(35% 70% 35% 0 round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
+    }
     71.4285% {
         clip-path: inset(0% 70% 70% 0 round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-    85.7142% {
-        clip-path: inset(0% 70% 70% 0 round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
+    }
     100% {
         clip-path: inset(0% 35% 70% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
+    }
 }
+
 @keyframes twoMove {
-    0% {
+    0%, 14.2857% {
         visibility: visible;
         clip-path: inset(0% 70% 70% 0 round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-    14.2857% {
-        clip-path: inset(0% 70% 70% 0 round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-    28.5714% {
+    }
+    28.5714%, 42.8571% {
         clip-path: inset(0% 35% 70% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-    42.8571% {
-        clip-path: inset(0% 35% 70% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
+    }
     57.1428% {
         clip-path: inset(35% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-    71.4285% {
-        clip-path: inset(35% 70% 35% 0 round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-    85.7142% {
-        clip-path: inset(35% 70% 35% 0 round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
+    }
+    71.4285%, 85.7142% {
+        clip-path: inset(0% 70% 70% 0 round 5%);
+    }
     100% {
         clip-path: inset(0% 70% 70% 0 round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
+    }
 }
+
 @keyframes threeMove {
-    0% {
+    0%, 14.2857% {
         visibility: visible;
         clip-path: inset(35% 70% 35% 0 round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-    14.2857% {
-        clip-path: inset(35% 70% 35% 0 round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-    28.5714% {
-        clip-path: inset(0% 70% 70% 0 round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-    42.8571% {
+    }
+    28.5714%, 42.8571% {
         clip-path: inset(0% 70% 70% 0 round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
+    }
     57.1428% {
         clip-path: inset(0% 35% 70% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-    71.4285% {
-        clip-path: inset(0% 35% 70% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-    85.7142% {
-        clip-path: inset(35% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
+    }
     100% {
         clip-path: inset(35% 70% 35% 0 round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
+    }
 }
+
 @keyframes fourMove {
-    0% {
+    0%, 14.2857% {
         visibility: visible;
         clip-path: inset(35% 0% 35% 70% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-    14.2857% {
-        clip-path: inset(35% 0% 35% 70% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
+    }
     28.5714% {
         clip-path: inset(35% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
+    }
     42.8571% {
         clip-path: inset(70% 35% 0% 35% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
+    }
     57.1428% {
         clip-path: inset(70% 35% 0% 35% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-    71.4285% {
-        clip-path: inset(70% 0 0 70% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-    85.7142% {
-        clip-path: inset(70% 0 0 70% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
+    }
     100% {
         clip-path: inset(35% 0% 35% 70% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
+    }
 }
+
 @keyframes fiveMove {
-    0% {
+    0%, 14.2857% {
         visibility: visible;
         clip-path: inset(70% 0 0 70% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-    14.2857% {
-        clip-path: inset(70% 0 0 70% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
+    }
     28.5714% {
         clip-path: inset(35% 0% 35% 70% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-    42.8571% {
-        clip-path: inset(35% 0% 35% 70% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-    57.1428% {
-        clip-path: inset(35% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-    71.4285% {
-        clip-path: inset(70% 35% 0% 35% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-    85.7142% {
-        clip-path: inset(70% 35% 0% 35% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
+    }
     100% {
         clip-path: inset(70% 0 0 70% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
+    }
 }
+
 @keyframes sixMove {
-    0% {
+    0%, 14.2857% {
         visibility: visible;
         clip-path: inset(70% 35% 0% 35% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-    14.2857% {
-        clip-path: inset(70% 35% 0% 35% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-    28.5714% {
-        clip-path: inset(70% 0 0 70% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-    42.8571% {
-        clip-path: inset(70% 0 0 70% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-    57.1428% {
-        clip-path: inset(35% 0% 35% 70% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-    71.4285% {
-        clip-path: inset(35% 0% 35% 70% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-    85.7142% {
-        clip-path: inset(35% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
+    }
     100% {
-        clip-path: inset(70% 35% 0% 35% round 5%);
-        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-   }
-}
\ No newline at end of file
+        clip-path: inset(70% 0 0 70% round 5%);
+    }
+}
diff --git a/privacy.html b/privacy.html
index 1f5d870..523b1d5 100644
--- a/privacy.html
+++ b/privacy.html
@@ -1,288 +1,255 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <link rel="shortcut icon" href="ambulance.png" type="image/x-icon" />
     <title>Privacy Policy - AmbuFlow</title>
     <link rel="stylesheet" href="src/css/index.css" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
-    />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
     <style>
-      body {
-        font-family: "Roboto", sans-serif;
-        background-color: #0b0e11;
-        color: #d1d1d1;
-        margin: 0;
-        padding: 0;
-        overflow-x: hidden;
-      }
-      header {
-        background: linear-gradient(90deg, #8fe5f4, #93b6d3, #42a5f5);
-        padding: 30px 0 0 0;
-        text-align: center;
-        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-      }
-      header h1 {
-        color: #fff;
-        font-size: 2.4rem;
-        text-transform: uppercase;
-        letter-spacing: 3px;
-      }
-
-      /* Navigation Menu */
-      nav.menu ul {
-        display: flex;
-        justify-content: space-around; /* Distribute items evenly */
-        list-style: none;
-        padding: 0;
-        margin: 0;
-      }
-
-      nav.menu ul li {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        padding: 10px;
-        font-size: 16px;
-      }
-
-      nav.menu ul li a {
-        text-decoration: none;
-        color: #d1d1d1;
-      }
-
-      nav.menu ul li a:hover {
-        color: #2f9bf4; /* Hover color effect */
-        transition: color 0.3s ease;
-      }
-
-      nav.menu ul li i {
-        font-size: 24px; /* Size of the icons */
-        margin-bottom: 5px;
-      }
-
-      /* Responsive Design */
-      @media (max-width: 768px) {
-        nav.menu ul {
-          flex-direction: column; /* Stack items vertically on small screens */
+        body {
+            font-family: "Roboto", sans-serif;
+            background-color: #0b0e11;
+            color: #d1d1d1;
+            margin: 0;
+            padding: 0;
+            overflow-x: hidden;
+        }
+        header {
+            background: linear-gradient(90deg, #8fe5f4, #93b6d3, #42a5f5);
+            padding: 30px 0 0 0;
+            text-align: center;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
         }
         header h1 {
-          font-size: 3rem;
+            color: #fff;
+            font-size: 2.4rem;
+            text-transform: uppercase;
+            letter-spacing: 3px;
+        }
+        /* Navigation Menu */
+        nav.menu ul {
+            display: flex;
+            justify-content: space-around;
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+        nav.menu ul li {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px;
+            font-size: 16px;
+        }
+        nav.menu ul li a {
+            text-decoration: none;
+            color: #d1d1d1;
+        }
+        nav.menu ul li a:hover {
+            color: #2f9bf4;
+            transition: color 0.3s ease;
+        }
+        nav.menu ul li i {
+            font-size: 24px;
+            margin-bottom: 5px;
+        }
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            nav.menu ul {
+                flex-direction: column;
+            }
+            header h1 {
+                font-size: 3rem;
+            }
+            h2 {
+                font-size: 2rem;
+            }
+        }
+        @media (max-width: 480px) {
+            header h1 {
+                font-size: 2.5rem;
+            }
+            h2 {
+                font-size: 1.8rem;
+            }
+        }
+        main {
+            padding: 50px 20px;
+            max-width: 1200px;
+            margin: 0 auto;
+            background: #10141b;
+            border-radius: 15px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
+            margin-bottom: 25px;
         }
         h2 {
-          font-size: 2rem;
+            color: #1e88e5;
+            font-size: 2.5rem;
+            border-bottom: 2px solid #1e88e5;
+            padding-bottom: 10px;
+            margin-bottom: 20px;
+            text-transform: uppercase;
         }
-      }
-
-      @media (max-width: 480px) {
-        header h1 {
-          font-size: 2.5rem;
+        p {
+            line-height: 1.8;
+            font-size: 1.1rem;
+            margin-bottom: 30px;
+        }
+        .highlight {
+            color: #f50057;
+            font-weight: bold;
         }
+        ul {
+            margin-left: 40px;
+            list-style: none;
+        }
+        ul li {
+            margin-bottom: 15px;
+            position: relative;
+            padding-left: 25px;
+            font-size: 1.1rem;
+        }
+        ul li::before {
+            content: "•";
+            color: #1e88e5;
+            position: absolute;
+            left: 0;
+            top: 0;
+        }
+        footer {
+            background-color: #0d47a1;
+            color: white;
+            text-align: center;
+            padding: 20px 0;
+            position: relative;
+            bottom: 0;
+            width: 100%;
+        }
+        footer p {
+            margin: 0;
+        }
+        /* Buttons */
+        .btn {
+            display: inline-block;
+            background-color: #1e88e5;
+            color: white;
+            padding: 10px 20px;
+            text-decoration: none;
+            border-radius: 25px;
+            transition: 0.3s;
+        }
+        .btn:hover {
+            background-color: #42a5f5;
+            transform: scale(1.05);
+        }
+        /* Hover effect */
+        main:hover {
+            transition: 0.5s;
+            box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
+        }
+        /* Futuristic glow effect for text */
+        h1,
         h2 {
-          font-size: 1.8rem;
+            text-shadow: 0 0 10px rgba(30, 136, 229, 0.8), 0 0 20px rgba(66, 165, 245, 0.5);
+        }
+        /* Futuristic neon glow for sections */
+        main {
+            border: 2px solid rgba(66, 165, 245, 0.2);
         }
-      }
-
-      main {
-        padding: 50px 20px;
-        max-width: 1200px;
-        margin: 0 auto;
-        background: #10141b;
-        border-radius: 15px;
-        box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
-        margin-bottom: 25px;
-      }
-      h2 {
-        color: #1e88e5;
-        font-size: 2.5rem;
-        border-bottom: 2px solid #1e88e5;
-        padding-bottom: 10px;
-        margin-bottom: 20px;
-        text-transform: uppercase;
-      }
-      p {
-        line-height: 1.8;
-        font-size: 1.1rem;
-        margin-bottom: 30px;
-      }
-      .highlight {
-        color: #f50057;
-        font-weight: bold;
-      }
-      ul {
-        margin-left: 40px;
-        list-style: none;
-      }
-      ul li {
-        margin-bottom: 15px;
-        position: relative;
-        padding-left: 25px;
-        font-size: 1.1rem;
-      }
-      ul li::before {
-        content: "•";
-        color: #1e88e5;
-        position: absolute;
-        left: 0;
-        top: 0;
-      }
-      footer {
-        background-color: #0d47a1;
-        color: white;
-        text-align: center;
-        padding: 20px 0;
-        position: relative;
-        bottom: 0;
-        width: 100%;
-      }
-      footer p {
-        margin: 0;
-      }
-
-      /* Buttons */
-      .btn {
-        display: inline-block;
-        background-color: #1e88e5;
-        color: white;
-        padding: 10px 20px;
-        text-decoration: none;
-        border-radius: 25px;
-        transition: 0.3s;
-      }
-      .btn:hover {
-        background-color: #42a5f5;
-        transform: scale(1.05);
-      }
-
-      /* Hover effect */
-      main:hover {
-        transition: 0.5s;
-        box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
-      }
-
-      /* Futuristic glow effect for text */
-      h1,
-      h2 {
-        text-shadow: 0 0 10px rgba(30, 136, 229, 0.8),
-          0 0 20px rgba(66, 165, 245, 0.5);
-      }
-
-      /* Futuristic neon glow for sections */
-      main {
-        border: 2px solid rgba(66, 165, 245, 0.2);
-      }
     </style>
-  </head>
+</head>
 
-  <body>
+<body>
     <header>
-      <div class="container">
-        <div class="logo">
-          <div class="brand-name">
-            <span class="ambu">Ambu</span>Flow
-          </div>
-          <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 50px; height: auto" />
-        </div>
-        <nav class="menu">
-          <ul>
-            <li>
-              <a href="index.html" id="home-link"><i class="fa-solid fa-house"></i> Home</a>
-            </li>
-            <li>
-              <a href="features.html" id="features-link"><i class="fa-solid fa-file"></i> Features</a>
-            </li>
-            <li>
-              <a href="team.html" id="team-link"><i class="fa-solid fa-user-group"></i> Team</a>
-            </li>
-            <li>
-              <a href="contact.html" id="contact-link"><i class="fa-solid fa-phone"></i> Contact</a>
-            </li>
-            <li>
-              <a href="Feedback.html" id="feedback-link"><i class="fa-solid fa-clipboard"></i> Feedback</a>
-            </li>
-          </ul>
-        </nav>
-        <div class="buttons">
-          <a href="login.html" class="login">Log in</a>
-          <a href="up.html" class="get-started">Get started</a>
+        <div class="container">
+            <div class="logo">
+                <div class="brand-name">
+                    <span class="ambu">Ambu</span>Flow
+                </div>
+                <img src="images/logo2-w.webp" alt="AmbuFlow Logo" style="width: 50px; height: auto" />
+            </div>
+            <nav class="menu">
+                <ul>
+                    <li><a href="index.html" id="home-link"><i class="fa-solid fa-house"></i> Home</a></li>
+                    <li><a href="features.html" id="features-link"><i class="fa-solid fa-file"></i> Features</a></li>
+                    <li><a href="team.html" id="team-link"><i class="fa-solid fa-user-group"></i> Team</a></li>
+                    <li><a href="contact.html" id="contact-link"><i class="fa-solid fa-phone"></i> Contact</a></li>
+                    <li><a href="Feedback.html" id="feedback-link"><i class="fa-solid fa-clipboard"></i> Feedback</a></li>
+                </ul>
+            </nav>
+            <div class="buttons">
+                <a href="login.html" class="login">Log in</a>
+                <a href="up.html" class="get-started">Get started</a>
+            </div>
         </div>
-      </div>
-      <h1>Privacy Policy AmbuFlow</h1>
+        <h1>Privacy Policy - AmbuFlow</h1>
     </header>
 
     <main>
-      <h2>Intro</h2>
-      <p>
-        At
-        <span class="highlight">AmbuFlow</span> ,we are committed to protecting your
-        privacy. This Privacy Policy outlines how we collect, use, disclose, and
-        safeguard your information when you use our services. By using our ambulance
-        services, you consent to the practices described in this policy.
-      </p>
-
-      <p>
-        We value your privacy. This policy explains what information we collect, how
-        we use it, and how we protect it to ensure your safety and privacy.
-      </p>
-
-      <h2>Information We Collect</h2>
-      <ul style="list-style-type:disc">
-        <li>
-          Personal Information: This includes your name, address, phone number, date of birth, and insurance
-          information, which may be collected during registration or when you request services.
-        </li>
-        <li>
-          Health Information: Medical history, symptoms, and other health-related
-          information that may be necessary for providing emergency care.
-        </li>
-        <li>
-          Payment Information: Credit card details or insurance information for
-          billing purposes.
-        </li>
-        <li>
-          Usage Data: Information on how you interact with our services, including device
-          information, IP addresses, and location data.
-        </li>
-      </ul>
-
-      <h2>How We Use Your Information</h2>
-      <ul style="list-style-type:disc">
-        <li>To provide and manage emergency medical services.</li>
-        <li>To communicate with you regarding services, billing, and updates.</li>
-        <li>To improve our services and customer experience.</li>
-        <li>To track the ambulance's location and guide it efficiently.</li>
-        <li>To improve the system's features for a better experience.</li>
-        <li>To comply with legal and regulatory requirements.</li>
-      </ul>
-
-      <h2>Sharing Your Information</h2>
-      <ul style="list-style-type:disc">
-        <li>
-          <strong>Healthcare Providers:</strong> Your information may be shared with
-          hospitals, doctors, or other healthcare providers to ensure continuity of care.
-        </li>
-        <li>
-          <strong>Payment Processors:</strong> Information may be shared with payment
-          gateways and insurance companies for billing and claims processing.
-        </li>
-        <li>
-          <strong>Law Enforcement:</strong> If required by law or if necessary to
-          protect our rights or the rights of others.
-        </li>
-        <li>
-          <strong>Third-Party Services:</strong> We may use third-party service
-          providers to perform tasks on our behalf, such as data analysis or
-          customer support.
-        </li>
-      </ul>
+        <section>
+            <h2>Intro</h2>
+            <p>
+                At <span class="highlight">AmbuFlow</span>, we are committed to protecting your privacy. This Privacy Policy outlines how we collect, use, disclose, and safeguard your information when you use our services. By using our ambulance services, you consent to the practices described in this policy.
+            </p>
+            <p>
+                We value your privacy. This policy explains what information we collect, how we use it, and how we protect it to ensure your safety and privacy.
+            </p>
+        </section>
+
+        <section>
+            <h2>Information We Collect</h2>
+            <ul style="list-style-type:disc">
+                <li>
+                    Personal Information: This includes your name, address, phone number, date of birth, and insurance information, which may be collected during registration or when you request services.
+                </li>
+                <li>
+                    Health Information: Medical history, symptoms, and other health-related information that may be necessary for providing emergency care.
+                </li>
+                <li>
+                    Payment Information: Credit card details or insurance information for billing purposes.
+                </li>
+                <li>
+                    Usage Data: Information on how you interact with our services, including device information, IP addresses, and location data.
+                </li>
+            </ul>
+        </section>
+
+        <section>
+            <h2>How We Use Your Information</h2>
+            <ul style="list-style-type:disc">
+                <li>To provide and manage emergency medical services.</li>
+                <li>To communicate with you regarding services, billing, and updates.</li>
+                <li>To improve our services and customer experience.</li>
+                <li>To track the ambulance's location and guide it efficiently.</li>
+                <li>To improve the system's features for a better experience.</li>
+                <li>To comply with legal and regulatory requirements.</li>
+            </ul>
+        </section>
+
+        <section>
+            <h2>Sharing Your Information</h2>
+            <ul style="list-style-type:disc">
+                <li>
+                    <strong>Healthcare Providers:</strong> Your information may be shared with hospitals, doctors, or other healthcare providers to ensure continuity of care.
+                </li>
+                <li>
+                    <strong>Payment Processors:</strong> Information may be shared with payment gateways and insurance companies for billing and claims processing.
+                </li>
+                <li>
+                    <strong>Law Enforcement:</strong> If required by law or if necessary to protect our rights or the rights of others.
+                </li>
+                <li>
+                    <strong>Third-Party Services:</strong> We may use third-party service providers to perform tasks on our behalf, such as data analysis or customer support.
+                </li>
+            </ul>
+        </section>
     </main>
 
     <footer>
-      <p>&copy; 2024 AmbuFlow. All rights reserved.</p>
+        <p>&copy; 2024 AmbuFlow. All rights reserved.</p>
     </footer>
-  </body>
+</body>
 </html>
diff --git a/responsive.css b/responsive.css
index 8073952..721a82d 100644
--- a/responsive.css
+++ b/responsive.css
@@ -8,13 +8,12 @@
     cursor: pointer;
     outline: none;
     border-radius: 10px;
-    display: none;
+    display: none; /* Default to none, show on certain screens */
 }
 
 /* Dropdown container */
 .dropdown {
     position: absolute;
-    /* display: none; */
     top: 20px;
     left: 15px;
     display: inline-block;
@@ -32,7 +31,6 @@
     padding: 0;
     margin: 0;
     border-radius: 10px;
-    
 }
 
 .dropdown-content li {
@@ -51,7 +49,6 @@
     color: #ffffff;
     background-color: #9cc9e3;
     border-radius: 10px;
-
 }
 
 /* Show the dropdown when 'show' class is added */
@@ -59,481 +56,69 @@
     display: block;
 }
 
-
-
-
-/* Media Query for Screens Smaller than 375px */
+/* Media Queries for Responsive Design */
 @media screen and (max-width: 675px) {
-
-    /* main container alignment */
     #container {
         max-width: 100% !important;
     }
-    .main_content{
+    .main_content {
         flex-direction: column;
         max-width: 375px;
         margin-top: 60px;
-        
     }
-    .main_heading{
-        max-width: 375px;
-        margin: 0;
-
-    }
-    .main_content img{
+    .main_content img {
         width: 320px;
     }
-    .main_content h1{
+    .main_content h1 {
         font-size: x-large;
     }
-    .main_content h2{
+    .main_content h2 {
         font-size: xxx-large;
     }
-    .main_content p{
+    .main_content p {
         width: 322px;
         font-size: medium;
     }
-    .main_content a{
-        margin-left: 0px;
-    }
-    
-    
-    /* top logo alignment */
-    .logo img{
+    .logo img {
         width: 50px !important;
     }
-    .logo{
+    .logo {
         position: relative;
         left: 47px;
         padding-right: 35px;
     }
-    
-
-    /* floating icons alignment */
-    .gt-current-lang{
-        width: 80px !important;
-        padding: 3px !important;
-    }
-    .gt-current-lang img{
-        margin: 0 !important;
-        width: 25px !important;
-    }
-    .chatbot-container{
-        right: 18px !important;
-        bottom: 65px !important;
-        height: 45px !important;
-        width: 45px !important;
-    }
-    .chatbot-button{
-        left: 0 !important;
-        height: 45px !important;
-        width: 45px !important;
-        
-    }
-    .chatbot-button img{
-        position: relative !important;
-        right: 2px !important;
-        bottom: 3px !important;
-    }
-    
-
-    /* info alignment */
-    #grid-content h1{
-        font-size: x-large;
-        
-    }
-    #grid-content .grid{
-        display: flex;
-        flex-direction: column;
-    }
-    #grid-content .grid .team-feature{
-        display: flex;
-        flex-direction: column;
-    }
-    .contact-feature{
-        display: block !important;
-
-    }
-    .faq-h2{
-        font-size: x-large !important;
-    }
-
-    /* footer alignment */
-    footer{
-        width: 375px !important;
-    }
-    footer div{
-        flex-direction: column;
-        left: -2.5% !important;
-    }
-    .media-link{
-        flex-direction: row;
+    .dropbtn {
+        display: block; /* Show on smaller screens */
     }
-
-
-    .dropbtn{
-        display:block;
-    }
-
-
 }
 
-
-
-
-/* Media Query for Screens Smaller than 426px */
 @media screen and (min-width: 375px) and (max-width: 426px) {
-
-    /* main container alignment */
-    #container {
-        max-width: 100% !important;
-    }
-    .main_content{
-        flex-direction: column;
-        max-width: 375px;
-        margin-top: 60px;
-        
-    }
-    .main_heading{
-        max-width: 375px;
-        margin: 0;
-
-    }
-    .main_content img{
-        width: 320px;
-    }
-    .main_content h1{
-        font-size: x-large;
-    }
-    .main_content h2{
-        font-size: xxx-large;
-    }
-    .main_content p{
-        width: 322px;
-        font-size: medium;
-    }
-    .main_content a{
-        margin-left: 0px;
-    }
-    
-    
-    /* top logo alignment */
-    .logo img{
-        width: 50px !important;
-    }
-    .logo{
-        position: relative;
-        left: 47px;
-        padding-right: 35px;
-    }
-    
-
-    /* floating icons alignment */
-    .gt-current-lang{
-        width: 80px !important;
-        padding: 3px !important;
-    }
-    .gt-current-lang img{
-        margin: 0 !important;
-        width: 25px !important;
-    }
-    .chatbot-container{
-        right: 18px !important;
-        bottom: 65px !important;
-        height: 45px !important;
-        width: 45px !important;
-    }
-    .chatbot-button{
-        left: 0 !important;
-        height: 45px !important;
-        width: 45px !important;
-        
-    }
-    .chatbot-button img{
-        position: relative !important;
-        right: 2px !important;
-        bottom: 3px !important;
-    }
-    
-
-    /* info alignment */
-    #grid-content h1{
-        font-size: x-large;
-        
-    }
-    #grid-content .grid{
-        display: flex;
-        flex-direction: column;
-    }
-    #grid-content .grid .team-feature{
-        display: flex;
-        flex-direction: column;
-    }
-    .contact-feature{
-        display: block !important;
-
-    }
-    .faq-h2{
-        font-size: x-large !important;
-    }
-
-    /* footer alignment */
-    footer{
+    /* Similar styles as above can be applied if necessary */
+    /* Adjust footer width */
+    footer {
         width: 425px !important;
     }
-    footer div{
-        flex-direction: column;
-        left: 0.65% !important;
-    }
-    .media-link{
-        flex-direction: row;
-    }
-
-    .dropbtn{
-        display:block;
-    }
-
-
-
 }
 
-
-
-/* Media Query for Screens Smaller than 769px */
 @media screen and (min-width: 426px) and (max-width: 769px) {
-
-    /* main container alignment */
-    #container {
-        max-width: 100% !important;
-    }
-
-    .main_content{
-        /* flex-direction: column; */
+    .main_content {
         max-width: 768px;
         margin-top: 60px;
-        
-    }
-    .main_heading{
-        max-width: 375px;
-        margin: 0;
-
-    }
-    .main_content img{
-        width: 320px;
-    }
-    .main_content h1{
-        font-size: x-large;
-    }
-    .main_content h2{
-        font-size: xxx-large;
-    }
-    .main_content p{
-        width: 322px;
-        font-size: medium;
-    }
-    .main_content a{
-        margin-left: 0px;
-    }
-    
-    
-    /* top logo alignment */
-    .logo img{
-        width: 50px !important;
-    }
-    .logo{
-        position: relative;
-        left: 47px;
-        padding-right: 35px;
-    }
-    
-
-    /* floating icons alignment */
-    .gt-current-lang{
-        width: 80px !important;
-        padding: 3px !important;
-    }
-    .gt-current-lang img{
-        margin: 0 !important;
-        width: 25px !important;
     }
-    .chatbot-container{
-        right: 18px !important;
-        bottom: 65px !important;
-        height: 45px !important;
-        width: 45px !important;
-    }
-    .chatbot-button{
-        left: 0 !important;
-        height: 45px !important;
-        width: 45px !important;
-        
-    }
-    .chatbot-button img{
-        position: relative !important;
-        right: 2px !important;
-        bottom: 3px !important;
-    }
-    
-
-    /* info alignment */
-    #grid-content h1{
-        font-size: x-large;
-        
-    }
-    #grid-content .grid{
-        display: flex;
-        flex-direction: column;
-    }
-    #grid-content .grid .team-feature{
-        display: flex;
-        flex-direction: column;
-    }
-    .contact-feature{
-        display: block !important;
-
-    }
-    .faq-h2{
-        font-size: x-large !important;
-    }
-
-    /* footer alignment */
-    footer{
+    footer {
         width: 769px !important;
     }
-    footer div{
-        /* flex-direction: column; */
-        left: 0.65% !important;
-    }
-    .media-link{
-        flex-direction: row;
-    }
-
-    .dropbtn{
-        display:block;
-    }
-
-
 }
 
-
-
-
-/* Media Query for Screens Smaller than 1251px */
 @media screen and (min-width: 769px) and (max-width: 1251px) {
-
-    /* main container alignment */
-    #container {
-        max-width: 100% !important;
-    }
-    .main_content{
-        /* flex-direction: column; */
+    .main_content {
         max-width: 1250px;
         margin-top: 60px;
-        
-    }
-    .main_heading{
-        max-width: 375px;
-        margin: 0;
-
-    }
-    .main_content img{
-        width: 320px;
-    }
-    .main_content h1{
-        font-size: x-large;
-    }
-    .main_content h2{
-        font-size: xxx-large;
-    }
-    .main_content p{
-        width: 322px;
-        font-size: medium;
-    }
-    .main_content a{
-        margin-left: 0px;
-    }
-    
-    
-    /* top logo alignment */
-    .logo img{
-        width: 50px !important;
-    }
-    .logo{
-        position: relative;
-        left: 47px;
-        padding-right: 35px;
     }
-    
-
-    /* floating icons alignment */
-    .gt-current-lang{
-        width: 80px !important;
-        padding: 3px !important;
-    }
-    .gt-current-lang img{
-        margin: 0 !important;
-        width: 25px !important;
-    }
-    .chatbot-container{
-        right: 18px !important;
-        bottom: 65px !important;
-        height: 45px !important;
-        width: 45px !important;
-    }
-    .chatbot-button{
-        left: 0 !important;
-        height: 45px !important;
-        width: 45px !important;
-        
-    }
-    .chatbot-button img{
-        position: relative !important;
-        right: 2px !important;
-        bottom: 3px !important;
-    }
-    
-
-    /* info alignment */
-    #grid-content{
-        width: 1250px;
-    }
-
-    #grid-content .grid{
-        display: flex;
-        flex-direction: column;
-        width: 982px;
-    }
-    #grid-content .grid .team-feature{
-        display: flex;
-        flex-direction: row;
-    }
-    .contact-feature{
-        /* display: block !important; */
-        width: 946px;
-
-    }
-    .faq-h2{
-        font-size: x-large !important;
-    }
-
-    /* footer alignment */
-    footer{
+    footer {
         width: 1251px !important;
     }
-    footer div{
-        /* flex-direction: column; */
-        left: 2% !important;
-    }
-    .media-link{
-        flex-direction: row;
-    }
-
-    .dropbtn{
-        display:none;
+    .dropbtn {
+        display: none; /* Hide on larger screens */
     }
-
-
 }
-
-
-
diff --git a/roles.html b/roles.html
index d988d70..83d538e 100644
--- a/roles.html
+++ b/roles.html
@@ -10,16 +10,14 @@
     <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" />
-
     <link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet" />
 </head>
 
 <body>
-    <div class="header">
+    <header class="header">
         <div class="logo">
-            <a href="./index.html"><i class="fa-solid fa-truck-medical"></i></a>
+            <a href="./index.html"><i class="fa-solid fa-truck-medical" aria-hidden="true"></i></a>
             <a href="index.html" class="logo">AmbuFlow </a>
-            
         </div>
         <nav class="navbar">
             <ul>
@@ -27,112 +25,102 @@
                 <li><a href="#">About Us</a></li>
                 <li><a href="#">Contact</a></li>
                 <li><a href="login.html">Login</a></li>
-                
             </ul>
         </nav>
         <div class="cta-button">
             <a href="get-started.html" class="btn">Get Started</a>
         </div>
-    </div>
+    </header>
 
-    </div>
-    <div class="role-selection">
+    <main class="role-selection">
         <h1>Select Your Role</h1>
         <div class="role-buttons">
             <div class="role">
-                <i class="fa-solid fa-user"></i>
+                <i class="fa-solid fa-user" aria-hidden="true"></i>
                 <a href="user.html" class="role-btn user-btn">User</a>
                 <p class="role-description">Track ambulances and get updates.</p>
             </div>
             <div class="role">
-                <i class="fa-solid fa-hospital"></i>
+                <i class="fa-solid fa-hospital" aria-hidden="true"></i>
                 <a href="hospital.html" class="role-btn hospital-btn">Hospital</a>
                 <p class="role-description">Manage patient notifications.</p>
             </div>
             <div class="role">
-                <i class="fa-solid fa-car"></i>
+                <i class="fa-solid fa-car" aria-hidden="true"></i>
                 <a href="driver.html" class="role-btn driver-btn">Driver</a>
                 <p class="role-description">Optimize routes with real-time data.</p>
             </div>
-
         </div>
-    </div>
 
-    <section class="faq" id="faq"></section>
-    <div class="container_1">
-        <div class="accordion__wrapper">
-            <h1 class="accordion__title">Frequently Asked Questions</h1>
-            <br>
-            <div class="accordion">
-                <div class="accordion__header">
-                    <h2 class="accordion__question">How does the app notify me about nearby hospitals?</h2>
-                    <span class="accordion__icon">
-                        <i id="accordion-icon" class="ri-add-line"></i>
-                    </span>
-                </div>
-                <div class="accordion__content">
-                    <p class="accordion__answer">The app uses GPS data and Google Maps API to track your location and
-                        provides notifications of nearby hospitals based on your current location.</p>
+        <div class="container_1">
+            <div class="accordion__wrapper">
+                <h1 class="accordion__title">Frequently Asked Questions</h1>
+                <br>
+                <div class="accordion">
+                    <div class="accordion__header">
+                        <h2 class="accordion__question">How does the app notify me about nearby hospitals?</h2>
+                        <span class="accordion__icon">
+                            <i class="ri-add-line" aria-hidden="true"></i>
+                        </span>
+                    </div>
+                    <div class="accordion__content">
+                        <p class="accordion__answer">The app uses GPS data and Google Maps API to track your location and provides notifications of nearby hospitals based on your current location.</p>
+                    </div>
                 </div>
-            </div>
 
-            <div class="accordion">
-                <div class="accordion__header">
-                    <h2 class="accordion__question">How do I track the ambulance in real-time?</h2>
-                    <span class="accordion__icon">
-                        <i id="accordion-icon" class="ri-add-line"></i>
-                    </span>
-                </div>
-                <div class="accordion__content">
-                    <p class="accordion__answer">Once an ambulance is dispatched, the app provides real-time tracking
-                        via GPS, showing its location on the map along with the estimated time of arrival (ETA).</p>
+                <div class="accordion">
+                    <div class="accordion__header">
+                        <h2 class="accordion__question">How do I track the ambulance in real-time?</h2>
+                        <span class="accordion__icon">
+                            <i class="ri-add-line" aria-hidden="true"></i>
+                        </span>
+                    </div>
+                    <div class="accordion__content">
+                        <p class="accordion__answer">Once an ambulance is dispatched, the app provides real-time tracking via GPS, showing its location on the map along with the estimated time of arrival (ETA).</p>
+                    </div>
                 </div>
-            </div>
 
-            <div class="accordion">
-                <div class="accordion__header">
-                    <h2 class="accordion__question">Can hospitals and drivers see my location?</h2>
-                    <span class="accordion__icon">
-                        <i id="accordion-icon" class="ri-add-line"></i>
-                    </span>
+                <div class="accordion">
+                    <div class="accordion__header">
+                        <h2 class="accordion__question">Can hospitals and drivers see my location?</h2>
+                        <span class="accordion__icon">
+                            <i class="ri-add-line" aria-hidden="true"></i>
+                        </span>
+                    </div>
+                    <div class="accordion__content">
+                        <p class="accordion__answer">Yes, with your consent, your location is shared with the hospital and ambulance driver to ensure a quicker response and accurate routing.</p>
+                    </div>
                 </div>
-                <div class="accordion__content">
-                    <p class="accordion__answer">Yes, with your consent, your location is shared with the hospital and
-                        ambulance driver to ensure a quicker response and accurate routing.</p>
-                </div>
-            </div>
 
-            <div class="accordion">
-                <div class="accordion__header">
-                    <h2 class="accordion__question">Does the app provide real-time traffic updates?</h2>
-                    <span class="accordion__icon">
-                        <i id="accordion-icon" class="ri-add-line"></i>
-                    </span>
-                </div>
-                <div class="accordion__content">
-                    <p class="accordion__answer">Yes, the app integrates with Google Maps to provide real-time traffic
-                        information to the ambulance driver, helping to optimize the fastest route.</p>
+                <div class="accordion">
+                    <div class="accordion__header">
+                        <h2 class="accordion__question">Does the app provide real-time traffic updates?</h2>
+                        <span class="accordion__icon">
+                            <i class="ri-add-line" aria-hidden="true"></i>
+                        </span>
+                    </div>
+                    <div class="accordion__content">
+                        <p class="accordion__answer">Yes, the app integrates with Google Maps to provide real-time traffic information to the ambulance driver, helping to optimize the fastest route.</p>
+                    </div>
                 </div>
-            </div>
 
-            <div class="accordion">
-                <div class="accordion__header">
-                    <h2 class="accordion__question">How do I contact customer support for technical issues?</h2>
-                    <span class="accordion__icon">
-                        <i id="accordion-icon" class="ri-add-line"></i>
-                    </span>
-                </div>
-                <div class="accordion__content">
-                    <p class="accordion__answer">You can reach our customer support team through the contact form in the
-                        app or by calling our helpline at 123-456-7890 for immediate assistance.</p>
+                <div class="accordion">
+                    <div class="accordion__header">
+                        <h2 class="accordion__question">How do I contact customer support for technical issues?</h2>
+                        <span class="accordion__icon">
+                            <i class="ri-add-line" aria-hidden="true"></i>
+                        </span>
+                    </div>
+                    <div class="accordion__content">
+                        <p class="accordion__answer">You can reach our customer support team through the contact form in the app or by calling our helpline at 123-456-7890 for immediate assistance.</p>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-    </section>
+    </main>
 
     <script src="script.js"></script>
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/script.js b/script.js
index b2ce396..6067f30 100644
--- a/script.js
+++ b/script.js
@@ -1,15 +1,23 @@
+// Load GTranslate script dynamically
 let script = document.createElement('script');
 script.src = "https://cdn.gtranslate.net/widgets/latest/float.js"; // URL of the external script
 script.defer = true; // Ensures the script runs after parsing the HTML
 document.body.appendChild(script); // Add the script to the body
 
-window.gtranslateSettings = { "default_language": "en", "detect_browser_language": true, "wrapper_selector": ".gtranslate_wrapper" }
+// GTranslate settings
+window.gtranslateSettings = {
+  "default_language": "en",
+  "detect_browser_language": true,
+  "wrapper_selector": ".gtranslate_wrapper",
+  "alt_flags": { "en": "usa" }
+};
+
 // Function to change the active class when a link is clicked
 function changeContent(page) {
   var links = document.querySelectorAll(".menu ul li a");
 
   // Remove "active" class from all links
-  links.forEach((link) => link.classList.remove("active"));``
+  links.forEach(link => link.classList.remove("active"));
 
   // Add "active" class to the current page link
   var activeLink = document.getElementById(page + "-link");
@@ -18,37 +26,40 @@ function changeContent(page) {
   } else {
     console.error(`Link with id ${page + '-link'} not found`);
   }
-
-  console.log(page + "-link");
 }
 
-const currentLanguage = window.gtranslateSettings.current_language;
-const ambuFlowText = document.querySelector(".main_heading h2[data-link_h2='AmbuFlow...']");
-
-if (currentLanguage === 'gu' || currentLanguage === 'hi') {
-  ambuFlowText.style.display = 'none'; // Hide text for Gujarati and Hindi
-} else {
-  ambuFlowText.style.display = 'block'; // Show text for other languages
+// Language-specific content display
+function updateContentForLanguage() {
+  const currentLanguage = window.gtranslateSettings.current_language;
+  const ambuFlowText = document.querySelector(".main_heading h2[data-link_h2='AmbuFlow...']");
+  if (ambuFlowText) {
+    if (currentLanguage === 'gu' || currentLanguage === 'hi') {
+      ambuFlowText.style.display = 'none'; // Hide text for Gujarati and Hindi
+    } else {
+      ambuFlowText.style.display = 'block'; // Show text for other languages
+    }
+  }
 }
 
-
 // Function that runs when the window loads
 window.onload = function () {
-  // Assuming you are using the URL or some global variable to determine the page
+  // Determine the current page from the URL
   var currentPage = window.location.pathname.split("/").pop().replace(".html", "");
   if (currentPage) {
     changeContent(currentPage);
   }
 
-  // Add delay to each letter drop
+  // Add delay to each letter drop animation
   const letters = document.querySelectorAll('.letter');
   letters.forEach((letter, index) => {
     letter.style.animationDelay = `${index * 0.1}s`;
   });
+
+  // Update content for current language
+  updateContentForLanguage();
 };
 
-// JS for dark mode functionality
-// adding code for dark mode
+// Dark mode functionality
 document.addEventListener("DOMContentLoaded", () => {
   const darkModeButton = document.getElementById("dark-mode-button");
 
@@ -57,13 +68,14 @@ document.addEventListener("DOMContentLoaded", () => {
   if (currentTheme === "dark") {
     document.body.classList.add("dark-mode");
     document.body.classList.remove("light-mode");
-    darkModeButton.innerHTML = '<i class="fa-solid fa-sun"></i>'; // Change icon
+    darkModeButton.innerHTML = '<i class="fa-solid fa-sun"></i>';
   } else {
     document.body.classList.add("light-mode");
     document.body.classList.remove("dark-mode");
-    darkModeButton.innerHTML = '<i class="fa-solid fa-moon"></i>'; // Change icon
+    darkModeButton.innerHTML = '<i class="fa-solid fa-moon"></i>';
   }
 
+  // Toggle dark mode on button click
   darkModeButton.addEventListener("click", () => {
     document.body.classList.toggle("dark-mode");
     document.body.classList.toggle("light-mode");
@@ -71,63 +83,53 @@ document.addEventListener("DOMContentLoaded", () => {
     // Save preference to sessionStorage
     if (document.body.classList.contains("dark-mode")) {
       sessionStorage.setItem("theme", "dark");
-      darkModeButton.innerHTML = '<i class="fa-solid fa-sun"></i>'; // Change icon
+      darkModeButton.innerHTML = '<i class="fa-solid fa-sun"></i>';
     } else {
       sessionStorage.setItem("theme", "light");
-      darkModeButton.innerHTML = '<i class="fa-solid fa-moon"></i>'; // Change icon
+      darkModeButton.innerHTML = '<i class="fa-solid fa-moon"></i>';
     }
   });
 });
 
-//For Translator
-window.gtranslateSettings = {
-  "default_language": "en",
-  "detect_browser_language": true,
-  "wrapper_selector": ".gtranslate_wrapper",
-  "alt_flags": { "en": "usa" }
-}
+// Translator toggle functionality
 const translateBtn = document.getElementById('translateBtn');
 const gTranslate = document.getElementById('gTranslate');
 
-translateBtn.addEventListener('click', function () {
-  if (gTranslate.style.display === 'none') {
-    gTranslate.style.display = 'block';
-  } else {
-    gTranslate.style.display = 'none';
-  }
-});
+if (translateBtn && gTranslate) {
+  translateBtn.addEventListener('click', function () {
+    gTranslate.style.display = gTranslate.style.display === 'none' ? 'block' : 'none';
+  });
 
-// Close the translator popup when clicking outside
-document.addEventListener('click', function (event) {
-  if (!gTranslate.contains(event.target) && event.target !== translateBtn) {
-    gTranslate.style.display = 'none';
-  }
-});
+  // Close the translator popup when clicking outside
+  document.addEventListener('click', function (event) {
+    if (!gTranslate.contains(event.target) && event.target !== translateBtn) {
+      gTranslate.style.display = 'none';
+    }
+  });
+}
 
 // Newsletter form submission handler
+document.getElementById("newsletter-form")?.addEventListener("submit", function (event) {
+  event.preventDefault(); // Prevent the form from submitting normally
 
-document
-  .getElementById("newsletter-form")
-  .addEventListener("submit", function (event) {
-    event.preventDefault(); // Prevent the form from submitting normally
-
-    const emailInput = document.getElementById("email");
-    const confirmationMessage = document.getElementById("confirmation-message");
+  const emailInput = document.getElementById("email");
+  const confirmationMessage = document.getElementById("confirmation-message");
 
-    // Optionally send the email to your backend
-    const email = emailInput.value;
+  // Optionally send the email to your backend
+  const email = emailInput.value;
 
-    // Simulate a successful submission (you could replace this with an actual API call)
-    console.log(`Email submitted: ${email}`); // For debugging
+  // Simulate a successful submission
+  console.log(`Email submitted: ${email}`);
 
-    // Display the confirmation message
-    confirmationMessage.textContent =
-      "Thank you for subscribing! Please check your email for further instructions.";
+  // Display the confirmation message
+  if (confirmationMessage) {
+    confirmationMessage.textContent = "Thank you for subscribing! Please check your email for further instructions.";
     confirmationMessage.classList.remove("hidden");
+  }
 
-    // Clear the form
-    emailInput.value = "";
-  });
+  // Clear the form
+  emailInput.value = "";
+});
 
 // Accordion functionality
 const accordions = document.querySelectorAll(".accordion");
@@ -137,7 +139,7 @@ accordions.forEach((accordion, index) => {
   const content = accordion.querySelector(".accordion__content");
   const icon = accordion.querySelector(".accordion__icon i");
 
-  header.addEventListener("click", () => {
+  header?.addEventListener("click", () => {
     const isOpen = content.style.height === `${content.scrollHeight}px`;
 
     accordions.forEach((a, i) => {
@@ -157,9 +159,7 @@ accordions.forEach((accordion, index) => {
   });
 });
 
-
-
-// Back to top button functionality
+// Back-to-top button functionality
 const backToTopButton = document.getElementById('back-to-top');
 
 // Show the button when scrolled down 100px from the top
@@ -170,5 +170,3 @@ window.onscroll = function () {
     backToTopButton.style.display = "none";
   }
 };
-
-
diff --git a/sitemap.css b/sitemap.css
index 4b7f55b..7b2a670 100644
--- a/sitemap.css
+++ b/sitemap.css
@@ -1,22 +1,31 @@
-.container{
-    width:100%;
+.container {
+    width: 100%;
+    max-width: 1200px; /* Optional: Limit the maximum width for better layout on large screens */
+    margin: 0 auto; /* Center the container */
 }
-.logo{
-    margin-top:1rem;
+
+.logo {
+    margin-top: 1rem;
 }
-nav{
-    margin-top:0.3rem;
+
+nav {
+    margin-top: 0.3rem;
 }
-.outer-options{
-    display:flex;
+
+.outer-options {
+    display: flex;
     justify-content: space-evenly;
     align-items: center;
+    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
 }
-.buttons{
+
+.buttons {
     display: flex;
     justify-content: space-evenly;
     align-items: center;
+    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
+}
+
+.buttons div a {
+    font-size: 2rem; /* Consider changing to rem for better scalability */
 }
-.buttons div a{
-    font-size: 2rem;
-}
\ No newline at end of file
diff --git a/sitemap.html b/sitemap.html
index 881ac95..65b6bfd 100644
--- a/sitemap.html
+++ b/sitemap.html
@@ -1,153 +1,140 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="description" content="Site Map for AmbuFlow - an ambulance monitoring system" />
     <link rel="shortcut icon" href="ambulance.png" type="image/x-icon" />
     <title>Site Map - AmbuFlow</title>
     <link rel="stylesheet" href="src/css/index.css" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
-    />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
     <style>
-      body {
-        font-family: "Roboto", sans-serif;
-        background-color: #262b30;
-        color: #d1d1d1;
-        margin: 0;
-        padding: 0;
-        overflow-x: hidden;
-        display: flex;
-        flex-direction: column;
-        min-height: 100vh; /* Full viewport height */
-        margin: 0;
-        padding: 0;
-      }
-      header {
-        background-color: #0d47a1;
-        padding: 20px;
-        text-align: center;
-        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-      .logo-title {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-grow: 1;
-      }
-      .logo-title img {
-        width: 50px;
-        margin-right: 15px;
-      }
-      .logo-title h1 {
-        color: #fff;
-        font-size: 2.4rem;
-        letter-spacing: 2px;
-      }
-      main {
-        display: flex;
-        max-width: 1200px;
-        margin: 50px auto;
-        background-color: #10141b;
-        border-radius: 15px;
-        box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
-        overflow: hidden;
-        flex: 1;
-        width: 100%; /* Ensure main content uses full width */
-      }
-      .content {
-        padding: 50px;
-        flex: 1;
-        background-color: transparent; /* Make it transparent or set another color */
-      }
-      .content ul {
-        list-style: none;
-        padding: 0;
-      }
-      .content ul li {
-        margin-bottom: 20px;
-        font-size: 1.2rem;
-      }
-      .content ul li a {
-        color: #d1d1d1;
-        font-weight: bold;
-        text-decoration: none;
-      }
-      .content ul li a:hover {
-        color: #1e88e5;
-      }
-      .map-header iframe {
-        width: 100%;
-        height: 100%;
-        border: 0;
-      }
-      .map-header {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: #0b0e11;
-      }
-      main {
-        height: auto;
-      }
-      footer {
-        background-color: #0d47a1;
-        color: white;
-        text-align: center;
-        padding: 20px 0;
-        width: 100%;
-      }
-      .map-header {
-        height: auto; /* Allow dynamic sizing */
-      }
-      .content,
-      .map-header {
-        flex: 1 1 auto; /* Ensure equal height with flexibility */
-      }
+        body {
+            font-family: "Roboto", sans-serif;
+            background-color: #262b30;
+            color: #d1d1d1;
+            margin: 0;
+            padding: 0;
+            overflow-x: hidden;
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh; /* Full viewport height */
+        }
+        header {
+            background-color: #0d47a1;
+            padding: 20px;
+            text-align: center;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .logo-title {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-grow: 1;
+        }
+        .logo-title img {
+            width: 50px;
+            margin-right: 15px;
+        }
+        .logo-title h1 {
+            color: #fff;
+            font-size: 2.4rem;
+            letter-spacing: 2px;
+        }
+        main {
+            display: flex;
+            max-width: 1200px;
+            margin: 50px auto;
+            background-color: #10141b;
+            border-radius: 15px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
+            overflow: hidden;
+            flex: 1;
+            width: 100%; /* Ensure main content uses full width */
+        }
+        .content {
+            padding: 50px;
+            flex: 1;
+            background-color: transparent; /* Make it transparent or set another color */
+        }
+        .content ul {
+            list-style: none;
+            padding: 0;
+        }
+        .content ul li {
+            margin-bottom: 20px;
+            font-size: 1.2rem;
+        }
+        .content ul li a {
+            color: #d1d1d1;
+            font-weight: bold;
+            text-decoration: none;
+        }
+        .content ul li a:hover {
+            color: #1e88e5;
+        }
+        .map-header {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: #0b0e11;
+        }
+        .map-header iframe {
+            width: 100%;
+            height: 400px; /* Set a specific height for better display */
+            border: 0;
+        }
+        footer {
+            background-color: #0d47a1;
+            color: white;
+            text-align: center;
+            padding: 20px 0;
+            width: 100%;
+        }
     </style>
-  </head>
-  <body>
+</head>
+<body>
     <header>
-      <div class="logo-title">
-        <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" />
-        <h1>AmbuFlow</h1>
-      </div>
+        <div class="logo-title">
+            <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" />
+            <h1>AmbuFlow</h1>
+        </div>
     </header>
 
     <main>
-      <div class="content">
-        <ul>
-          <li><a href="index.html">Home</a></li>
-          <li><a href="about.html">About Us</a></li>
-          <li><a href="features.html">Features</a></li>
-          <li><a href="team.html">Team</a></li>
-          <li><a href="contact.html">Contact</a></li>
-          <li><a href="Feedback.html">Feedback</a></li>
-          <li><a href="sitemap.html">Sitemap</a></li>
-          <li><a href="login.html">Log In</a></li>
-          <li><a href="up.html">Get Started</a></li>
-          <li><a href="privacy.html">Privacy Policy</a></li>
-          <li><a href="terms.html">Terms of Service</a></li>
-        </ul>
-      </div>
-      <div class="map-header">
-        <iframe
-          src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d241294.64898498365!2d72.79635424219836!3d19.09761203283721!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1s123%20Emergency%20Lane%2C%20Mumbai%2C%20India!5e0!3m2!1sen!2sin!4v1728732339444!5m2!1sen!2sin"
-          allowfullscreen=""
-          referrerpolicy="no-referrer-when-downgrade"
-          loading="lazy"
-        ></iframe>
-      </div>
+        <div class="content">
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="about.html">About Us</a></li>
+                <li><a href="features.html">Features</a></li>
+                <li><a href="team.html">Team</a></li>
+                <li><a href="contact.html">Contact</a></li>
+                <li><a href="Feedback.html">Feedback</a></li>
+                <li><a href="sitemap.html">Sitemap</a></li>
+                <li><a href="login.html">Log In</a></li>
+                <li><a href="up.html">Get Started</a></li>
+                <li><a href="privacy.html">Privacy Policy</a></li>
+                <li><a href="terms.html">Terms of Service</a></li>
+            </ul>
+        </div>
+        <div class="map-header">
+            <iframe
+                src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d241294.64898498365!2d72.79635424219836!3d19.09761203283721!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1s123%20Emergency%20Lane%2C%20Mumbai%2C%20India!5e0!3m2!1sen!2sin!4v1728732339444!5m2!1sen!2sin"
+                allowfullscreen=""
+                referrerpolicy="no-referrer-when-downgrade"
+                loading="lazy"
+                aria-label="Google Map of 123 Emergency Lane, Mumbai, India"
+            ></iframe>
+        </div>
     </main>
 
     <footer>
-      <p>© 2024 AmbuFlow - All Rights Reserved</p>
+        <p>© 2024 AmbuFlow - All Rights Reserved</p>
     </footer>
-  </body>
+</body>
 </html>
diff --git a/sitemap.xml b/sitemap.xml
index 4dee832..d279501 100644
--- a/sitemap.xml
+++ b/sitemap.xml
@@ -2,86 +2,86 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <url>
         <loc>http://mansiruhil13.github.io/index.html</loc>
-        <lastmod>2023-10-01</lastmod>
+        <lastmod>2023-10-01T00:00:00+00:00</lastmod>
         <changefreq>daily</changefreq>
         <priority>1.0</priority>
     </url>
     <url>
         <loc>http://mansiruhil13.github.io/features.html</loc>
-        <lastmod>2023-10-01</lastmod>
-        <changefreq>daily</changefreq>
+        <lastmod>2023-10-01T00:00:00+00:00</lastmod>
+        <changefreq>weekly</changefreq>
         <priority>0.8</priority>
     </url>
     <url>
         <loc>http://mansiruhil13.github.io/team.html</loc>
-        <lastmod>2023-10-01</lastmod>
-        <changefreq>daily</changefreq>
+        <lastmod>2023-10-01T00:00:00+00:00</lastmod>
+        <changefreq>monthly</changefreq>
         <priority>0.8</priority>
     </url>
     <url>
         <loc>http://mansiruhil13.github.io/contact.html</loc>
-        <lastmod>2023-10-01</lastmod>
-        <changefreq>daily</changefreq>
+        <lastmod>2023-10-01T00:00:00+00:00</lastmod>
+        <changefreq>monthly</changefreq>
         <priority>0.8</priority>
     </url>
     <url>
         <loc>http://mansiruhil13.github.io/nearby.html</loc>
-        <lastmod>2023-10-01</lastmod>
-        <changefreq>daily</changefreq>
+        <lastmod>2023-10-01T00:00:00+00:00</lastmod>
+        <changefreq>monthly</changefreq>
         <priority>0.8</priority>
     </url>
     <url>
         <loc>http://mansiruhil13.github.io/Feedback.html</loc>
-        <lastmod>2023-10-01</lastmod>
-        <changefreq>daily</changefreq>
+        <lastmod>2023-10-01T00:00:00+00:00</lastmod>
+        <changefreq>monthly</changefreq>
         <priority>0.8</priority>
     </url>
     <url>
         <loc>http://mansiruhil13.github.io/login.html</loc>
-        <lastmod>2023-10-01</lastmod>
-        <changefreq>daily</changefreq>
+        <lastmod>2023-10-01T00:00:00+00:00</lastmod>
+        <changefreq>monthly</changefreq>
         <priority>0.8</priority>
     </url>
     <url>
         <loc>http://mansiruhil13.github.io/up.html</loc>
-        <lastmod>2023-10-01</lastmod>
-        <changefreq>daily</changefreq>
+        <lastmod>2023-10-01T00:00:00+00:00</lastmod>
+        <changefreq>monthly</changefreq>
         <priority>0.8</priority>
     </url>
     <url>
         <loc>http://mansiruhil13.github.io/about.html</loc>
-        <lastmod>2023-10-01</lastmod>
-        <changefreq>daily</changefreq>
+        <lastmod>2023-10-01T00:00:00+00:00</lastmod>
+        <changefreq>monthly</changefreq>
         <priority>0.8</priority>
     </url>
     <url>
         <loc>http://mansiruhil13.github.io/privacy.html</loc>
-        <lastmod>2023-10-01</lastmod>
-        <changefreq>daily</changefreq>
+        <lastmod>2023-10-01T00:00:00+00:00</lastmod>
+        <changefreq>monthly</changefreq>
         <priority>0.8</priority>
     </url>
     <url>
         <loc>http://mansiruhil13.github.io/terms.html</loc>
-        <lastmod>2023-10-01</lastmod>
-        <changefreq>daily</changefreq>
+        <lastmod>2023-10-01T00:00:00+00:00</lastmod>
+        <changefreq>monthly</changefreq>
         <priority>0.8</priority>
     </url>
     <url>
         <loc>http://mansiruhil13.github.io/sitemap.html</loc>
-        <lastmod>2023-10-01</lastmod>
-        <changefreq>daily</changefreq>
+        <lastmod>2023-10-01T00:00:00+00:00</lastmod>
+        <changefreq>monthly</changefreq>
         <priority>0.8</priority>
     </url>
     <url>
         <loc>http://mansiruhil13.github.io/faq.html</loc>
-        <lastmod>2023-10-01</lastmod>
-        <changefreq>daily</changefreq>
+        <lastmod>2023-10-01T00:00:00+00:00</lastmod>
+        <changefreq>monthly</changefreq>
         <priority>0.8</priority>
     </url>
     <url>
         <loc>http://mansiruhil13.github.io/chatbot.html</loc>
-        <lastmod>2023-10-01</lastmod>
-        <changefreq>daily</changefreq>
+        <lastmod>2023-10-01T00:00:00+00:00</lastmod>
+        <changefreq>monthly</changefreq>
         <priority>0.8</priority>
     </url>
 </urlset>
diff --git a/style.css b/style.css
index 1d3fde3..40b50e7 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,4 @@
+/* Universal styles */
 * {
     box-sizing: border-box;
 }
@@ -7,6 +8,7 @@ body {
     font-family: Arial, sans-serif;
 }
 
+/* Header styling */
 header {
     background-color: #333; /* Header background color */
     padding: 10px 20px; /* Padding around header */
@@ -23,6 +25,7 @@ header {
     height: auto; /* Maintain aspect ratio */
 }
 
+/* Navigation styles */
 nav {
     flex-grow: 1; /* Allow nav to grow */
 }
@@ -32,12 +35,17 @@ nav {
     padding: 0; /* Remove padding */
     margin: 0; /* Remove margin */
     display: flex; /* Flexbox for horizontal alignment */
+    align-items: center; /* Center items vertically */
 }
 
+.menu li {
+    margin-left: 20px; /* Space between menu items */
+}
 
 .menu a {
     color: white; /* Menu link color */
     text-decoration: none; /* Remove underline */
+    padding: 8px 12px; /* Padding for clickable area */
     transition: color 0.3s; /* Transition effect */
 }
 
@@ -45,6 +53,7 @@ nav {
     color: #ddd; /* Change color on hover */
 }
 
+/* Buttons */
 .buttons {
     display: flex; /* Flexbox for buttons */
 }
@@ -65,6 +74,7 @@ nav {
     background-color: #0056b3; /* Darker blue on hover */
 }
 
+/* Menu toggle (Hamburger icon) */
 .menu-toggle {
     display: none; /* Hidden by default */
     flex-direction: column; /* Stack bars vertically */
@@ -109,4 +119,3 @@ nav {
         display: flex; /* Show menu when toggled */
     }
 }
-
diff --git a/style1.css b/style1.css
index 79118df..58cc671 100644
--- a/style1.css
+++ b/style1.css
@@ -4,21 +4,17 @@ body {
   background-color: #f4f4f4;
   max-width: 100%;
   width: 100%;
-  position: relative;
-  top: 50px;
   margin: 0;
   padding: 0;
   color: #333;
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  overflow: hidden;
 }
 
-/* Navbar styles */
+/* Navbar Styles */
 header {
   background-color: #fff;
-  /* Light mode background */
   padding: 10px 0;
   width: 100%;
 }
@@ -37,88 +33,63 @@ header {
 .menu ul li a {
   padding: 10px 15px;
   color: black;
-  /* Light mode link color */
   text-decoration: none;
   border-radius: 10px;
 }
 
-/* scroll to top */
+/* Scroll to Top Button */
 #back-to-top {
   display: none;
-  /* Initially hidden */
   position: fixed;
-  /* Fix the button to the bottom right */
   bottom: 20px;
-  /* Distance from the bottom */
   right: 20px;
-  /* Distance from the right */
   padding: 10px;
-  /* Padding around the icon */
   background-color: #3341ff;
-  /* Button background color */
   color: white;
-  /* Icon color */
   border: none;
-  /* No border */
   border-radius: 50%;
-  /* Circular shape */
   cursor: pointer;
-  /* Change cursor to pointer */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  /* Add shadow for depth */
   transition: background-color 0.3s, transform 0.3s;
-  /* Smooth transitions */
 }
 
 #back-to-top:hover {
   background-color: #2739bb;
-  /* Darker shade on hover */
   transform: scale(1.1);
-  /* Slightly enlarge on hover */
 }
 
-
-
-/* Dark mode styles */
+/* Dark Mode Styles */
 body.dark-mode {
   background-color: #333;
   color: #fff;
 }
 
-/* Navbar in dark mode */
 body.dark-mode header {
   background-color: #222;
-  /* Dark mode navbar background */
 }
 
 body.dark-mode .menu ul li a {
   color: #fff;
-  /* White links in dark mode */
 }
 
 .dark-mode-toggle {
   background-color: transparent;
-  /* No background color */
   border: none;
-  /* Remove border */
   cursor: pointer;
-  /* Pointer cursor for better UX */
 }
 
 body.dark-mode .dark-mode-toggle i {
   color: #ffd333;
-  /* Icon color in dark mode */
 }
 
-/* Optional: Add a hover effect for better feedback */
+/* Optional: Add hover effect for better feedback */
 .dark-mode-toggle:hover {
   opacity: 0.8;
 }
 
-/* Headings and text in dark mode */
+/* Headings and Text in Dark Mode */
 body.dark-mode .content h1 {
   color: #ff5733;
-  /* H1 color in dark mode */
 }
 
 body.dark-mode .feature p,
@@ -126,10 +97,9 @@ body.dark-mode .team-feature p,
 body.dark-mode .contact-feature p,
 body.dark-mode .content h2 {
   color: #fff;
-  /* White text for elements in dark mode */
 }
 
-/* Content area styles */
+/* Content Area */
 .content {
   background-color: #fff;
   color: #333;
@@ -142,31 +112,10 @@ body.dark-mode .content h2 {
 
 body.dark-mode .content {
   background-color: #444;
-  color: #795555;
-}
-
-/* Feature box styles in dark mode */
-body.dark-mode .feature,
-body.dark-mode .team-feature,
-body.dark-mode .contact-feature {
-  background-color: #555;
   color: #fff;
-  border: 1px solid #666;
-}
-
-h1 {
-  color: #2c3e50;
-  text-align: center;
-  margin-bottom: 20px;
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  gap: 20px;
-  animation: fadeIn 1s ease-in-out;
 }
 
+/* Feature Box Styles */
 .feature {
   background-color: #e7f3fe;
   border-radius: 10px;
@@ -198,7 +147,6 @@ h1 {
   color: #555;
 }
 
-
 .team-feature,
 .contact-feature {
   padding: 20px;
@@ -226,56 +174,11 @@ h1 {
   border-radius: 10px;
 }
 
-.feature p {
-  color: #555;
-}
-
-.team-feature {
-  background-color: #e7ffe7;
-  padding: 20px;
-  display: flex;
-  align-items: center;
-  text-align: left;
-  border-radius: 10px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-  grid-column: 1 / -1;
-}
-
-.team-feature img {
-  width: 150px;
-  height: auto;
-  margin-right: 20px;
-  border-radius: 10px;
-}
-
-.contact-feature {
-  background-color: #f2e4aa;
-  padding: 20px;
-  display: flex;
-  align-items: center;
-  text-align: left;
-  border-radius: 10px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-  grid-column: 1 / -1;
-}
-
-
-.contact-feature img {
-  width: 150px;
-  height: auto;
-  margin-right: 20px;
-  border-radius: 10px;
-}
-
+/* Footer Styles */
 footer {
   text-align: center;
-  
-  flex-wrap: wrap;
-  justify-content: space-between;
   background-color: #fff5f5;
-  box-sizing: border-box;
   width: 100%;
-  position: relative;
 }
 
 .footer-container {
@@ -283,14 +186,14 @@ footer {
   justify-content: space-between;
   align-items: flex-start;
   background-color: #C4D7FF;
-  color: #f3f4f6;
+  color: #000;
   width: 100%;
   padding: 20px 10px;
 }
 
 .footer-copyright {
   background-color: #C4D7FF;
-  color: #000000;
+  color: #000;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -298,7 +201,8 @@ footer {
   width: 100%;
 }
 
-.contact-ft {
+.contact-ft,
+.quick-links {
   flex: 1;
   min-width: 200px;
 }
@@ -309,10 +213,8 @@ footer {
   flex-direction: column;
   align-items: flex-end;
   padding-right: 20px;
-  /* Adjust this value for right padding */
 }
 
-
 .links {
   display: flex;
   justify-content: center;
@@ -326,75 +228,40 @@ footer {
   text-decoration: none;
 }
 
-.contact-ft {
-  flex: 1;
-  min-width: 200px;
-  padding-left: 20px;
-  /* Add left padding for alignment */
-}
-
-pre {
-  margin: 0;
-  /* Remove default margin from pre element */
-  white-space: pre-wrap;
-  /* Ensure the content wraps as needed */
-}
-
-.quick-links {
-  flex: 1 1 200px;
-  /* Allows the section to grow and shrink */
-  min-width: 200px;
-  /* Minimum width */
-  margin-bottom: 20px;
-  /* Spacing below */
-}
-
 .quick-links-list {
   list-style-type: none;
-  /* Remove default list styles */
   padding: 0;
-  /* Remove default padding */
   display: flex;
-  /* Enable flexbox layout */
   flex-direction: column;
-  /* Stack items vertically */
 }
 
 .quick-links-list li {
   margin-bottom: 10px;
-  /* Space between items */
 }
 
 .quick-links-list a {
-  color: #000000;
-  /* Link color */
+  color: #000;
   text-decoration: none;
-  /* Remove underline */
   transition: color 0.3s;
-  /* Smooth color change on hover */
 }
 
 .quick-links-list a:hover {
   color: #2980b9;
-  /* Change color on hover */
 }
 
-/* Responsive adjustments */
+/* Responsive Adjustments */
 @media (max-width: 600px) {
   .quick-links {
-    text-align: center;
-    /* Center text on small screens */
+      text-align: center;
   }
-
 }
 
+/* Animations */
 @keyframes fadeIn {
   from {
-    opacity: 0;
+      opacity: 0;
   }
-
   to {
-    opacity: 1;
+      opacity: 1;
   }
-
 }
diff --git a/team.html b/team.html
index afc50e5..98613a1 100644
--- a/team.html
+++ b/team.html
@@ -11,9 +11,14 @@
     <link rel="shortcut icon" href="ambulance.png" type="image/x-icon">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
     <div class="gtranslate_wrapper"></div>
-    <script>window.gtranslateSettings = { "default_language": "en", "detect_browser_language": true, "wrapper_selector": ".gtranslate_wrapper" }</script>
+    <script>
+        window.gtranslateSettings = {
+            "default_language": "en",
+            "detect_browser_language": true,
+            "wrapper_selector": ".gtranslate_wrapper"
+        }
+    </script>
     <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
-    <!--Updated to latest version-->
     <style>
         /* font size of button */
         .buttons .login,
@@ -26,52 +31,16 @@
         }
 
         /* more addition for dark mode theme */
-
         .dark-mode .logo img {
             filter: brightness(0) invert(1);
             /* Inverts the color to make it white */
         }
 
-
         .navbar.dark-mode .logo-img {
             filter: brightness(0) invert(1);
             /* Change logo color in dark mode */
         }
 
-
-        /* .menu ul {
-            list-style-type: none;
-            padding: 0;
-            display: flex;
-        }
-
-
-        .menu a {
-            color: black;
-            Light mode link color
-            border: 1px solid black;
-            Black border
-            padding: 5px 10px;
-            text-decoration: none;
-            transition: all 0.3s;
-
-        }
-
-        .menu a:hover {
-            background-color: blue;
-            Blue background on hover
-            color: white;
-            White text on hover
-        }
-
-        .dark-mode .menu a {
-            color: white;
-            Dark mode link color
-            border: 1px solid lightgrey;
-            Light grey border in dark mode
-        } */
-
-
         .dark-mode {
             background-color: rgba(50, 50, 50, 0.95);
             /* Slightly gray background with high opacity */
@@ -84,11 +53,14 @@
             /* Black text on hover in dark mode */
         }
 
-        /* end */
-        /* adding dark mode for contact info */
         .content {
             transition: background-color 0.3s, color 0.3s;
             /* Smooth transitions */
+            margin: 20px;
+            padding: 20px;
+            background-color: #fff;
+            border-radius: 5px;
+            flex-grow: 1;
         }
 
         .dark-mode .content {
@@ -98,32 +70,6 @@
             /* Optional: add padding for better spacing */
         }
 
-        /* end */
-
-
-/* 
-        .menu ul li a {
-            padding: 10px 15px;
-            color: black;
-            text-decoration: none;
-            border-radius:7px;
-            border:1.5px solid black;
-        }
-
-        .menu ul li a.active {
-            color: white;
-            background-color: #000;
-        } */
-
-
-        .content {
-            margin: 20px;
-            padding: 20px;
-            background-color: #fff;
-            border-radius: 5px;
-            flex-grow: 1;
-        }
-
         h1 {
             color: blue;
             text-align: center;
@@ -136,11 +82,6 @@
             justify-content: center;
             gap: 22px;
             animation: fadeIn 1s ease-in-out;
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 22px;
-            animation: fadeIn 1s ease-in-out;
         }
 
         .team-member {
@@ -179,23 +120,6 @@
             font-size: 0.9em;
         }
 
-        /* .contact-feature {
-             display: flex;
-            justify-content: center; 
-            align-items: center;
-            margin: 70px auto 70px auto; 
-             max-width: 800px;
-             width: 100%;  
-            gap:40px;
-        }
-
-        .contact-feature img {
-            width: 150px;
-            height: auto;
-            margin-right: 20px;
-            border-radius: 10px;
-        }  */
-
         footer {
             background-color: #000;
             color: white;
@@ -222,10 +146,6 @@
             /* Icon color change to blue on hover */
         }
 
-        a .social-icon .twitter:hover {
-            color: white;
-        }
-
         .fa-x-twitter:hover {
             color: black;
             /* Icon color change to black on hover */
@@ -250,26 +170,6 @@
                 opacity: 1;
             }
         }
-
-        /* Logo Animation */
-        @keyframes logoAnimation {
-            0% {
-                opacity: 0;
-                transform: translateX(-100px);
-                /* Start from the left */
-            }
-
-            50% {
-                transform: translateX(10px);
-                /* Move slightly to the right */
-            }
-
-            100% {
-                opacity: 1;
-                transform: translateX(0);
-                /* End at original position */
-            }
-        }
     </style>
 </head>
 
@@ -287,41 +187,35 @@
             </div>
         </div>
     </div>
-        <div class="container">
-            <div class="logo">
-                <div class="brand-name">
-                    <span class="letter red" style="--letter-index: 1;">A</span>
-                    <span class="letter red" style="--letter-index: 2;">m</span>
-                    <span class="letter red" style="--letter-index: 3;">b</span>
-                    <span class="letter red" style="--letter-index: 4;">u</span>
-                    <span class="letter" style="--letter-index: 5;">F</span>
-                    <span class="letter" style="--letter-index: 6;">l</span>
-                    <span class="letter" style="--letter-index: 7;">o</span>
-                    <span class="letter" style="--letter-index: 8;">w</span>
-                </div>
-                <a href="./index.html">
-                    <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo"
-                        style="width: 50px; height: auto" />
-                </a>
-            </div>
-            <div class="buttons">
-                <a href="login.html" class="login">Log in</a>
-                <a href="up.html" class="get-started">Get started</a>
-                <button class="light-dark-btn dark-mode-toggle" id="dark-mode-toggle">
-                    <i class="fa-solid fa-moon"></i>
-                  </button>
-
+    <div class="container">
+        <div class="logo">
+            <div class="brand-name">
+                <span class="letter red" style="--letter-index: 1;">A</span>
+                <span class="letter red" style="--letter-index: 2;">m</span>
+                <span class="letter red" style="--letter-index: 3;">b</span>
+                <span class="letter red" style="--letter-index: 4;">u</span>
+                <span class="letter" style="--letter-index: 5;">F</span>
+                <span class="letter" style="--letter-index: 6;">l</span>
+                <span class="letter" style="--letter-index: 7;">o</span>
+                <span class="letter" style="--letter-index: 8;">w</span>
             </div>
-            <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 80px; height: auto" />
+            <a href="./index.html">
+                <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 50px; height: auto" />
+            </a>
+        </div>
+        <div class="buttons">
+            <a href="login.html" class="login">Log in</a>
+            <a href="up.html" class="get-started">Get started</a>
+            <button class="light-dark-btn dark-mode-toggle" id="dark-mode-toggle">
+                <i class="fa-solid fa-moon"></i>
+            </button>
         </div>
         <nav class="menu">
             <ul>
                 <li>
                     <a href="#container" style="color: #333;">
                         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M6.34314 11.5858L12 5.92893M12 5.92893L17.6568 11.5858M12 5.92893V18.0711"
-                                stroke="currentColor">
-                            </path>
+                            <path d="M6.34314 11.5858L12 5.92893M12 5.92893L17.6568 11.5858M12 5.92893V18.0711" stroke="currentColor"></path>
                         </svg>
                     </a>
                 </li>
@@ -352,7 +246,6 @@
                 </li>
             </ul>
         </nav>
-
     </div>
     <div class="content" id="main-content">
         <h1>Meet Our Team</h1>
@@ -360,161 +253,78 @@ <h1>Meet Our Team</h1>
             <div class="team-member">
                 <img src="images/service-web.jpg" alt="Service Manager">
                 <h2>Service Manager</h2>
-                <p>Responsible for coordinating ambulance services and ensuring timely responses.</p>
+                <p>Oversees all operations to ensure efficiency.</p>
             </div>
             <div class="team-member">
-                <img src="images/rescue-web.webp" alt="Rescue Specialist">
-                <h2>Rescue Specialist</h2>
-                <p>Trained to provide immediate care and transport patients safely to hospitals.</p>
+                <img src="images/john-doe.jpg" alt="John Doe">
+                <h2>John Doe</h2>
+                <p>Lead Developer with expertise in ambulance tracking systems.</p>
             </div>
             <div class="team-member">
-                <img src="images/call-web.jpg" alt="Call Operator">
-                <h2>Call Operator</h2>
-                <p>First point of contact for emergencies, dispatching ambulances efficiently.</p>
+                <img src="images/jane-doe.jpg" alt="Jane Doe">
+                <h2>Jane Doe</h2>
+                <p>UX/UI Designer focusing on user experience.</p>
             </div>
             <div class="team-member">
-                <img src="images/gps-web.webp" alt="GPS Technician">
-                <h2>GPS Technician</h2>
-                <p>Manages real-time tracking systems for effective ambulance navigation.</p>
+                <img src="images/alex-smith.jpg" alt="Alex Smith">
+                <h2>Alex Smith</h2>
+                <p>Project Manager ensuring timelines are met.</p>
             </div>
-        </div>
-    </div>
-
-    <!-- Contact Section in Full Row -->
-    <div class="features-container">
-        <div class="contact-features">
-            <div class="inner">
-                <div class="front">
-                    <a href="Contactus.html">
-                        <img src="images/contact-w.avif" alt="Contact Us" />
-                        <h2>Contact Us</h2>
-                    </a>
-                </div>
-                <div class="back">
-                    <p>
-                        Reach out to us for any inquiries or assistance. We're here to
-                        help you 24/7 with our emergency services.
-                    </p>
-                    <a href="contact.html" class="button">Go to Contact</a>
-                </div>
+            <div class="team-member">
+                <img src="images/michael-johnson.jpg" alt="Michael Johnson">
+                <h2>Michael Johnson</h2>
+                <p>Data Analyst for effective decision-making.</p>
+            </div>
+            <div class="team-member">
+                <img src="images/sarah-williams.jpg" alt="Sarah Williams">
+                <h2>Sarah Williams</h2>
+                <p>Marketing Specialist focusing on outreach and awareness.</p>
             </div>
         </div>
     </div>
-    <footer style="color: #f3f4f6; text-align: center; width: 100%; background-color: #C4D7FF; border: none;">
-        <div
-            style="display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 20px 0;">
-
-            <!-- Quick Links Section -->
-            <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
-                <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Quick Links</h3>
-                <ul style="list-style-type: none; padding: 0;">
-                    <li><a href="about.html" class="footer-link">About Us</a></li>
-                    <li><a href="contact.html" class="footer-link">Contact Us</a></li>
-                    <li><a href="privacy.html" class="footer-link">Privacy Policy</a></li>
-                    <li><a href="terms.html" class="footer-link">Terms of Service</a></li>
-                    <li><a href="sitemap.html" class="footer-link">Site Map</a></li>
-                </ul>
-            </div>
-
-            <!-- Contact Information Section -->
-            <div style="flex: 1; min-width: 200px; margin-bottom: 10px;">
-                <h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3>
-                <p style="color: #000;">123 Emergency Lane, Mumbai, India</p>
-                <a href="mailto:emergency@ambulanceservice.in" class="footer-link">emergency@ambulanceservice.in</a>
-                <p style="color: #000000;">Phone: <a href="tel:+91-911-1234567" class="footer-link">+91-911-1234567</a>
-                </p>
-            </div>
-
-            <!-- Modified the looks of the social icons -->
-            <!-- Social Media Links -->
-            <div style="text-align: center; min-width: 200px; color: black;">
-                <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3>
-                <div style="display: flex; justify-content: center; align-items: center; gap: 15px; height: 50px;">
-                    <a href="https://www.facebook.com" class="social-icon facebook"
-                        style="color: black; text-decoration: none; font-size: 1.5rem;"><i
-                            class="fab fa-facebook"></i></a>
-                    <a href="https://www.twitter.com" class="social-icon twitter"
-                        style="color: black; text-decoration: none; font-size: 1.5rem;"><i
-                            class="fa-brands fa-x-twitter"></i></a>
-                    <a href="https://www.instagram.com" class="social-icon instagram"
-                        style="color: black; text-decoration: none; font-size: 1.5rem;"><i
-                            class="fab fa-instagram"></i></a>
-                    <a href="https://www.linkedin.com" class="social-icon linkedin"
-                        style="color: black; text-decoration: none; font-size: 1.5rem;"><i
-                            class="fab fa-linkedin-in"></i></a>
-                </div>
-            </div>
-
-            <!-- Newsletter Subscription -->
-            <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
-                <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to Our Newsletter</h3>
-                <form action="#">
-                    <input type="email" placeholder="Your Email"
-                        style="padding: 10px; width: 80%; border: none; border-radius: 5px;" required><br><br>
-                    <button type="submit"
-                        style="background-color: #e81a1a; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px;">Subscribe</button>
-                </form>
-                <div id="subscription-notification" style="display:none; background-color: rgba(212, 237, 218, 0.8); color: #155724; padding: 10px; border-radius: 5px; position: absolute; top: 10px; left: 600px; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.3);">
-                    Thank you for subscribing to our newsletter!
-                </div>
-            </div>
-            <script>
-                document.querySelector("form").addEventListener("submit", function(event) {
-                    event.preventDefault(); // Prevent form from submitting immediately
-            
-                    // Improved Email validation regex to ensure proper domain like "gmail.com"
-                    const emailInput = document.querySelector("input[type='email']");
-                    const emailRegex = /^[^\s@]+@gmail\.com$/;
-            
-                    if (emailRegex.test(emailInput.value)) {
-                        // Show alert notification with green translucent box
-                        const notification = document.getElementById("subscription-notification");
-                        notification.style.display = "block";
-            
-                        // Hide the message after 3 seconds
-                        setTimeout(function() {
-                            notification.style.display = "none";
-                        }, 3000);
-            
-                        // Reset the form
-                        this.reset();
-                    } else {
-                        alert("Please enter a valid Gmail address.");
-                    }
-                });
-            </script>
-            
+    <footer>
+        <div>
+            <h3>Contact Us</h3>
+            <p>Have questions? <br> Reach out to us!</p>
+        </div>
+        <div>
+            <h3>Follow Us</h3>
+            <a href="#" class="social-icon"><i class="fa-brands fa-facebook"></i></a>
+            <a href="#" class="social-icon"><i class="fa-brands fa-x-twitter"></i></a>
+            <a href="#" class="social-icon"><i class="fa-brands fa-instagram"></i></a>
+            <a href="#" class="social-icon"><i class="fa-brands fa-linkedin-in"></i></a>
+        </div>
+        <div>
+            <h3>Newsletter</h3>
+            <form action="" method="post" id="newsletter-form">
+                <input type="email" id="email" name="email" placeholder="Enter your email" required>
+                <button type="submit">Subscribe</button>
+            </form>
+        </div>
+        <div>
+            <p>&copy; 2024 AmbuFlow. All rights reserved.</p>
         </div>
     </footer>
-        <script src="preloader.js"></script>
-
-
-
-        <!-- Copyright Section -->
-        <div
-            style="background-color: #C4D7FF; color: #000000; display: flex; justify-content: center; align-items: center; padding: 10px 20px; border-top: 1px solid #a0c0ff;">
-            <strong>
-                <p>&copy; 2024 AmbuFlow. All rights reserved.</p>
-            </strong>
-            <script src="preloader.js"></script>
-            <a href="chatbot.html">
-                <div class="fixed bottom-0 right-2 chatbot-container">
-                    <button class="chatbot-button group">
-                        <img class="h-20" src="chatbot.gif" alt="chatbot" />
-                        <span class="tooltip-text">
-                            Welcome to AmbuFlow!<br />
-                            How can I help You?
-                        </span>
-                    </button>
-                </div>
-            </a>
-            <button class="light-dark-btn dark-mode-toggle" id="dark-mode-button">
-                <i class="fa-solid fa-moon"></i>
-            </button>
-            <!-- Add this style block in the <head> section or in your CSS file -->
+    <script src="src/js/darkMode.js"></script>
+    <script src="src/js/preloader.js"></script>
+    <script>
+        document.getElementById("newsletter-form").addEventListener("submit", function (event) {
+            event.preventDefault(); // Prevent form submission
+            const emailInput = document.getElementById("email");
+            const email = emailInput.value;
+            if (validateEmail(email)) {
+                alert("Thank you for subscribing!");
+                emailInput.value = ""; // Clear the input field
+            } else {
+                alert("Please enter a valid email address.");
+            }
+        });
 
-            <script src="script.js">
-            </script>
+        function validateEmail(email) {
+            const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            return re.test(String(email).toLowerCase());
+        }
+    </script>
 </body>
 
 </html>
diff --git a/terms.html b/terms.html
index 845f4bb..64fa5ac 100644
--- a/terms.html
+++ b/terms.html
@@ -1,255 +1,244 @@
 <!DOCTYPE html>
 <html lang="en">
 
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <link rel="shortcut icon" href="ambulance.png" type="image/x-icon">
-
-    <title>Terms of Services- AmbuFlow</title>
+    <title>Terms of Service - AmbuFlow</title>
     <link rel="stylesheet" href="src/css/index.css" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
-    />
-    <!--Updated to latest version-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
 
-    <link rel="stylesheet" href="src/css/index.css" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
-    />
     <style>
-      body {
-        font-family: "Roboto", sans-serif;
-        background-color: #0b0e11;
-        color: #d1d1d1;
-        margin: 0;
-        padding: 0;
-        overflow-x: hidden;
-      }
-      header {
-        background: linear-gradient(90deg, #b2d1ff, #93b6d3, #42a5f5);
-        padding: 30px 0 0 0;
-        text-align: center;
-        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-      }
-      header h1 {
-        color: #fff;
-        font-size: 2.4rem;
-        text-transform: uppercase;
-        letter-spacing: 3px;
-      }
-      main {
-        padding: 50px 20px;
-        max-width: 1200px;
-        margin: 0 auto;
-        background: #10141b;
-        border-radius: 15px;
-        box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
-      }
-      h2 {
-        color: #1e88e5;
-        font-size: 2.5rem;
-        border-bottom: 2px solid #1e88e5;
-        padding-bottom: 10px;
-        margin-bottom: 20px;
-        text-transform: uppercase;
-      }
-      p {
-        line-height: 1.8;
-        font-size: 1.1rem;
-        margin-bottom: 30px;
-      }
-      .highlight {
-        color: #f50057;
-        font-weight: bold;
-      }
-      ul {
-        margin-left: 40px;
-        list-style: none;
-      }
-      ul li {
-        margin-bottom: 15px;
-        position: relative;
-        padding-left: 25px;
-        font-size: 1.1rem;
-      }
-      ul li::before {
-        color: #1e88e5;
-        position: absolute;
-        left: 0;
-        top: 0;
-      }
-      footer {
-        background-color: #0d47a1;
-        color: white;
-        text-align: center;
-        padding: 20px 0;
-        position: relative;
-        bottom: 0;
-        width: 100%;
-      }
-      footer p {
-        margin: 0;
-      }
-
-      /* Buttons */
-      .btn {
-        display: inline-block;
-        background-color: #1e88e5;
-        color: white;
-        padding: 10px 20px;
-        text-decoration: none;
-        border-radius: 25px;
-        transition: 0.3s;
-      }
-      .btn:hover {
-        background-color: #42a5f5;
-        transform: scale(1.05);
-      }
-
-      /* Hover effect */
-      main:hover {
-        transition: 0.5s;
-        box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
-      }
-
-      /* Futuristic glow effect for text */
-      h1,
-      h2 {
-        text-shadow: 0 0 10px rgba(30, 136, 229, 0.8),
-          0 0 20px rgba(66, 165, 245, 0.5);
-      }
-
-      /* Futuristic neon glow for sections */
-      main {
-        border: 2px solid rgba(66, 165, 245, 0.2);
-      }
-
-      /* Responsive Design */
-      @media (max-width: 768px) {
+        body {
+            font-family: "Roboto", sans-serif;
+            background-color: #0b0e11;
+            color: #d1d1d1;
+            margin: 0;
+            padding: 0;
+            overflow-x: hidden;
+        }
+
+        header {
+            background: linear-gradient(90deg, #b2d1ff, #93b6d3, #42a5f5);
+            padding: 30px 0 0 0;
+            text-align: center;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+        }
+
         header h1 {
-          font-size: 3rem;
+            color: #fff;
+            font-size: 2.4rem;
+            text-transform: uppercase;
+            letter-spacing: 3px;
         }
+
+        main {
+            padding: 50px 20px;
+            max-width: 1200px;
+            margin: 0 auto;
+            background: #10141b;
+            border-radius: 15px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
+        }
+
         h2 {
-          font-size: 2rem;
+            color: #1e88e5;
+            font-size: 2.5rem;
+            border-bottom: 2px solid #1e88e5;
+            padding-bottom: 10px;
+            margin-bottom: 20px;
+            text-transform: uppercase;
         }
-      }
 
-      @media (max-width: 480px) {
-        header h1 {
-          font-size: 2.5rem;
+        p {
+            line-height: 1.8;
+            font-size: 1.1rem;
+            margin-bottom: 30px;
+        }
+
+        .highlight {
+            color: #f50057;
+            font-weight: bold;
+        }
+
+        ul {
+            margin-left: 40px;
+            list-style: none;
+        }
+
+        ul li {
+            margin-bottom: 15px;
+            position: relative;
+            padding-left: 25px;
+            font-size: 1.1rem;
+        }
+
+        ul li::before {
+            color: #1e88e5;
+            position: absolute;
+            left: 0;
+            top: 0;
+        }
+
+        footer {
+            background-color: #0d47a1;
+            color: white;
+            text-align: center;
+            padding: 20px 0;
+            width: 100%;
+        }
+
+        footer p {
+            margin: 0;
+        }
+
+        /* Buttons */
+        .btn {
+            display: inline-block;
+            background-color: #1e88e5;
+            color: white;
+            padding: 10px 20px;
+            text-decoration: none;
+            border-radius: 25px;
+            transition: 0.3s;
         }
+
+        .btn:hover {
+            background-color: #42a5f5;
+            transform: scale(1.05);
+        }
+
+        /* Hover effect */
+        main:hover {
+            transition: 0.5s;
+            box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
+        }
+
+        /* Futuristic glow effect for text */
+        h1,
         h2 {
-          font-size: 1.8rem;
-        }
-      }
-      footer {
-        background-color: #0d47a1;
-        color: white;
-        text-align: center;
-        padding: 20px 0;
-        position: relative;
-        bottom: 0;
-        width: 100%;
-      }
+            text-shadow: 0 0 10px rgba(30, 136, 229, 0.8),
+                0 0 20px rgba(66, 165, 245, 0.5);
+        }
+
+        /* Futuristic neon glow for sections */
+        main {
+            border: 2px solid rgba(66, 165, 245, 0.2);
+        }
+
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            header h1 {
+                font-size: 3rem;
+            }
+
+            h2 {
+                font-size: 2rem;
+            }
+        }
+
+        @media (max-width: 480px) {
+            header h1 {
+                font-size: 2.5rem;
+            }
+
+            h2 {
+                font-size: 1.8rem;
+            }
+        }
     </style>
-  </head>
-  <body>
+</head>
+
+<body>
     <header>
         <div class="container">
-          
-          <div class="logo">
-    
-            <div class="brand-name">
-              <span class="ambu">Ambu</span>Flow
+            <div class="logo">
+                <div class="brand-name">
+                    <span class="ambu">Ambu</span>Flow
+                </div>
+                <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 50px; height: auto" />
+            </div>
+            <nav class="menu">
+                <ul>
+                    <li>
+                        <a href="/" id="home-link" onclick="changeContent('home')"><i class="fa-solid fa-house"></i> Home</a>
+                    </li>
+                    <li>
+                        <a href="features.html" id="features-link" onclick="changeContent('features')"><i class="fa-solid fa-file"></i> Features</a>
+                    </li>
+                    <li>
+                        <a href="team.html" id="team-link" onclick="changeContent('team')"><i class="fa-solid fa-user-group"></i> Team</a>
+                    </li>
+                    <li>
+                        <a href="contact.html" id="contact-link" onclick="changeContent('contact')"><i class="fa-solid fa-phone"></i> Contact</a>
+                    </li>
+                    <li>
+                        <a href="Feedback.html" id="feedback-link" onclick="changeContent('feedback')"><i class="fa-solid fa-clipboard"></i> Feedback</a>
+                    </li>
+                </ul>
+            </nav>
+            <div class="buttons">
+                <a href="login.html" class="login">Log in</a>
+                <a href="up.html" class="get-started">Get started</a>
             </div>
-            <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 50px; height: auto" />
-    
-          </div>
-          <nav class="menu">
-            <ul>
-              <li>
-                <a href="/" id="home-link" onclick="changeContent('home')"><i class="fa-solid fa-house"></i> Home</a>
-              </li>
-              <li>
-                <a href="features.html" id="features-link" onclick="changeContent('features')"><i class="fa-solid fa-file"></i> Features</a>
-              </li>
-              <li>
-                <a href="team.html" id="team-link" onclick="changeContent('team')"><i class="fa-solid fa-user-group"></i> Team</a>
-              </li>
-              <li>
-                <a href="contact.html" id="contact-link" onclick="changeContent('contact')"><i class="fa-solid fa-phone"></i> Contact</a>
-              </li>
-              <li>
-                <a href="Feedback.html" id="feedback-link" onclick="changeContent('feedback')"><i class="fa-solid fa-clipboard"></i> Feedback</a>
-              </li>
-            </ul>
-          </nav>
-          <div class="buttons">
-            <a href="login.html" class="login">Log in</a>
-            <a href="up.html" class="get-started">Get started</a>
-          </div>
         </div>
-        <h1>Terms of Service AmbuFlow</h1>
-      </header>
+        <h1>Terms of Service - AmbuFlow</h1>
+    </header>
 
     <main>
-      <h2>Intro</h2>
-      <p>
-        Welcome to 
-        <span class="highlight">AmbuFlow</span>. By using our services, you agree to the following Terms of Service. Please read them carefully.
-      </p>
-      <h2>1. Acceptance of Terms</h2>
-      <p>
-        By accessing or using our services, you confirm that you accept these Terms and agree to comply with them. If you do not agree, please do not use our services.
-      </p>
-
-      <h2>2. Services Provided</h2>
-     <p> 
-     <strong>Ambuflow</strong> provides emergency medical transportation services, including but not limited to:
-     <ul style="list-style-type:disc">
-        <li>Emergency ambulance response</li> 
-        <li>Non-emergency medical transportation</li> 
-         <li>Medical assistance and support during transit</li>
-        </ul> 
-      </p>
-      <h2>3. Eligibility</h2>
-      <p>You must be at least <strong>18 years old</strong> to use our services. If you are under 18, you may only use our services with the consent of a <strong>parent or guardian.</strong> </p> 
-
-      <h2>4. User Responsibilities</h2>
-      <ul style="list-style-type:disc">
-        <li><strong>Accurate Information: </strong> You agree to provide accurate, current, and complete information when using our services.</li> 
-        <li><strong>Emergency  Use:</strong> Our services are intended for emergencies. Please call <strong> +91-911-1234567</strong> for life-threatening situations.</li> 
-         <li><strong>Respectful  Conduct:</strong> Treat our personnel with respect. Any abusive or threatening behavior may result in the termination of services.</li>
-        </ul> 
-      <h2>5. Fees and Payment</h2>
-      <ul style="list-style-type:disc">
-        <li><strong>Service Fees:</strong> Charges will apply for the services provided. You agree to pay all applicable fees, including any additional charges for special circumstances.</li> 
-        <li><strong>Payment Method:</strong> Payments can be made through online UPI/Net banking/Credit & Debit Card.</li> 
-        </ul> 
+        <h2>Intro</h2>
+        <p>
+            Welcome to <span class="highlight">AmbuFlow</span>. By using our services, you agree to the following Terms of Service. Please read them carefully.
+        </p>
+        <h2>1. Acceptance of Terms</h2>
+        <p>
+            By accessing or using our services, you confirm that you accept these Terms and agree to comply with them. If you do not agree, please do not use our services.
+        </p>
+
+        <h2>2. Services Provided</h2>
+        <p>
+            <strong>AmbuFlow</strong> provides emergency medical transportation services, including but not limited to:
+        </p>
+        <ul>
+            <li>Emergency ambulance response</li>
+            <li>Non-emergency medical transportation</li>
+            <li>Medical assistance and support during transit</li>
+        </ul>
+
+        <h2>3. Eligibility</h2>
+        <p>You must be at least <strong>18 years old</strong> to use our services. If you are under 18, you may only use our services with the consent of a <strong>parent or guardian.</strong></p>
+
+        <h2>4. User Responsibilities</h2>
+        <ul>
+            <li><strong>Accurate Information:</strong> You agree to provide accurate, current, and complete information when using our services.</li>
+            <li><strong>Emergency Use:</strong> Our services are intended for emergencies. Please call <strong>+91-911-1234567</strong> for life-threatening situations.</li>
+            <li><strong>Respectful Conduct:</strong> Treat our personnel with respect. Any abusive or threatening behavior may result in the termination of services.</li>
+        </ul>
+
+        <h2>5. Fees and Payment</h2>
+        <ul>
+            <li><strong>Service Fees:</strong> Charges will apply for the services provided. You agree to pay all applicable fees, including any additional charges for special circumstances.</li>
+            <li><strong>Payment Method:</strong> Payments can be made through online UPI/Net banking/Credit & Debit Card.</li>
+        </ul>
+
         <h2>6. Cancellation Policy</h2>
-      <p>You may cancel your request for services prior to arrival. <strong>Cancellations after arrival may incur a fee.</strong> </p> 
-      <h2>7.  Contact Information</h2>
-      <p>For questions or concerns regarding these Terms, please contact us at:</p>
-      <ul style="list-style-type:disc">
-        <li><strong>Email:</strong> emergency@ambulanceservice.in</li> 
-        <li><strong>Phone:</strong> +91-911-1234567</li> 
-        </ul> 
-      <a href="https://github.com/mansiruhil13/Bobble-AI" class="btn"
-        >Contribute on GitHub</a
-      >
+        <p>You may cancel your request for services prior to arrival. <strong>Cancellations after arrival may incur a fee.</strong></p>
+
+        <h2>7. Contact Information</h2>
+        <p>For questions or concerns regarding these Terms, please contact us at:</p>
+        <ul>
+            <li><strong>Email:</strong> emergency@ambulanceservice.in</li>
+            <li><strong>Phone:</strong> +91-911-1234567</li>
+        </ul>
+
+        <a href="https://github.com/mansiruhil13/Bobble-AI" class="btn">Contribute on GitHub</a>
     </main>
 
     <footer>
         <p>© 2024 AmbuFlow - All Rights Reserved</p>
-      </footer>
-  </body>
-</html>
\ No newline at end of file
+    </footer>
+</body>
+
+</html>
diff --git a/up.html b/up.html
index 6745584..98cbdfb 100644
--- a/up.html
+++ b/up.html
@@ -1,229 +1,228 @@
-
-
-
-
-
-
 <!DOCTYPE html>
 <html lang="en">
 
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Register & Login</title>
-  <link rel="stylesheet" href="preloaderStyle.css">
-  <link rel="stylesheet" href="src/css/up.css" />
-  <link rel="shortcut icon" href="ambulance.png" type="image/x-icon" />
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Register & Login</title>
+    <link rel="stylesheet" href="preloaderStyle.css">
+    <link rel="stylesheet" href="src/css/up.css" />
+    <link rel="shortcut icon" href="ambulance.png" type="image/x-icon" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
 </head>
 
 <body>
-  <div class="gtranslate_wrapper"></div>
-  <script>window.gtranslateSettings = { "default_language": "en", "detect_browser_language": true, "wrapper_selector": ".gtranslate_wrapper" }</script>
-  <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
-
-  <!-- Preloader -->
-  <div id="preloader">
-    <div class="wrapper">
-      <div class="box-wrap">
-        <div class="box one"></div>
-        <div class="box two"></div>
-        <div class="box three"></div>
-        <div class="box four"></div>
-        <div class="box five"></div>
-        <div class="box six"></div>
-      </div>
-    </div>
-  </div>
-
-  <div class="container">
-    <div class="forms-container">
-      <div class="signin-signup">
-        <!-- Sign In Form -->
-        <form action="#" class="sign-in-form">
-          <h2 class="title">Sign in</h2>
-          <div class="input-field">
-            <i class="fas fa-user"></i>
-            <input type="text" placeholder="Username" required />
-          </div>
-          <div class="input-field">
-            <i class="fas fa-lock" id="toggle-password"></i>
-            <input type="password" placeholder="Password" id="password-input" required />
-          </div>
-          <input type="submit" value="Login" class="btn solid" />
-          <p class="social-text">Or Sign in with social platforms</p>
-          <div class="social-media">
-            <a href="https://www.google.com" target="_blank" class="social-icon"><i class="fab fa-google"
-                style="font-size: 24px; color: #4285f4"></i></a>
-            <a href="https://facebook.com/YourPage" target="_blank" class="social-icon"><i class="fab fa-facebook-f"
-                style="font-size: 24px; color: #4267b2"></i></a>
-            <a href="https://github.com/YourGitHubProfile" target="_blank" class="social-icon"><i class="fab fa-github"
-                style="font-size: 24px; color: #333"></i></a>
-          </div>
-        </form>
-
-        <!-- Sign Up Form -->
-        <form action="#" class="sign-up-form">
-          <h2 class="title">Sign up</h2>
-          <div class="input-field">
-            <i class="fas fa-user"></i>
-            <input type="text" placeholder="Username" required />
-          </div>
-          <div class="input-field">
-            <i class="fas fa-envelope"></i>
-            <input type="email" placeholder="Email" required />
-          </div>
-          <div class="input-field">
-            <i class="fas fa-lock" id="toggle-password-signup"></i>
-            <input type="password" placeholder="Password" id="password-input-signup" required />
-          </div>
-          <input type="submit" class="btn" value="Sign up" />
-        </form>
-      </div>
+    <div class="gtranslate_wrapper"></div>
+    <script>
+        window.gtranslateSettings = {
+            "default_language": "en",
+            "detect_browser_language": true,
+            "wrapper_selector": ".gtranslate_wrapper"
+        };
+    </script>
+    <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
+
+    <!-- Preloader -->
+    <div id="preloader">
+        <div class="wrapper">
+            <div class="box-wrap">
+                <div class="box one"></div>
+                <div class="box two"></div>
+                <div class="box three"></div>
+                <div class="box four"></div>
+                <div class="box five"></div>
+                <div class="box six"></div>
+            </div>
+        </div>
     </div>
 
-    <div class="panels-container">
-      <div class="panel left-panel">
-        <div class="content">
-          <h3>New here ?</h3>
-          <p>Discover new experiences with AmbuFlow! <br />Get access to exclusive content and features. <br />Create
-            your account.</p>
-          <button class="btn transparent" id="sign-up-btn">Sign up</button>
+    <div class="container">
+        <div class="forms-container">
+            <div class="signin-signup">
+                <!-- Sign In Form -->
+                <form action="#" class="sign-in-form">
+                    <h2 class="title">Sign in</h2>
+                    <div class="input-field">
+                        <i class="fas fa-user"></i>
+                        <input type="text" placeholder="Username" required />
+                    </div>
+                    <div class="input-field">
+                        <i class="fas fa-lock" id="toggle-password"></i>
+                        <input type="password" placeholder="Password" id="password-input" required />
+                    </div>
+                    <input type="submit" value="Login" class="btn solid" />
+                    <p class="social-text">Or Sign in with social platforms</p>
+                    <div class="social-media">
+                        <a href="https://www.google.com" target="_blank" class="social-icon">
+                            <i class="fab fa-google" style="font-size: 24px; color: #4285f4"></i>
+                        </a>
+                        <a href="https://facebook.com/YourPage" target="_blank" class="social-icon">
+                            <i class="fab fa-facebook-f" style="font-size: 24px; color: #4267b2"></i>
+                        </a>
+                        <a href="https://github.com/YourGitHubProfile" target="_blank" class="social-icon">
+                            <i class="fab fa-github" style="font-size: 24px; color: #333"></i>
+                        </a>
+                    </div>
+                </form>
+
+                <!-- Sign Up Form -->
+                <form action="#" class="sign-up-form">
+                    <h2 class="title">Sign up</h2>
+                    <div class="input-field">
+                        <i class="fas fa-user"></i>
+                        <input type="text" placeholder="Username" required />
+                    </div>
+                    <div class="input-field">
+                        <i class="fas fa-envelope"></i>
+                        <input type="email" placeholder="Email" required />
+                    </div>
+                    <div class="input-field">
+                        <i class="fas fa-lock" id="toggle-password-signup"></i>
+                        <input type="password" placeholder="Password" id="password-input-signup" required />
+                    </div>
+                    <input type="submit" class="btn" value="Sign up" />
+                </form>
+            </div>
         </div>
-      </div>
-      <div class="panel right-panel">
-        <div class="content">
-          <h3>One of us ?</h3>
-          <p>Welcome to our community</p>
-          <button class="btn transparent" id="sign-in-btn">Sign in</button>
+
+        <div class="panels-container">
+            <div class="panel left-panel">
+                <div class="content">
+                    <h3>New here?</h3>
+                    <p>Discover new experiences with AmbuFlow! <br />Get access to exclusive content and features. <br />Create your account.</p>
+                    <button class="btn transparent" id="sign-up-btn">Sign up</button>
+                </div>
+            </div>
+            <div class="panel right-panel">
+                <div class="content">
+                    <h3>One of us?</h3>
+                    <p>Welcome to our community</p>
+                    <button class="btn transparent" id="sign-in-btn">Sign in</button>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
-
-  <script src="preloader.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuid.min.js">
-
-  </script>
-  <script>
-     sign_in_btn = document.querySelector("#sign-in-btn");
-     sign_up_btn = document.querySelector("#sign-up-btn");
-     container = document.querySelector(".container");
-
-    // Toggle between sign up and sign in
-    sign_up_btn.addEventListener("click", () => {
-      container.classList.add("sign-up-mode");
-    });
-
-    sign_in_btn.addEventListener("click", () => {
-      container.classList.remove("sign-up-mode");
-    });
-
-    // Sign in form submission
-    document.querySelector(".sign-in-form").addEventListener('submit', function (event) {
-      event.preventDefault();
-
-       username = document.querySelector(".sign-in-form input[type='text']").value;
-       password = document.querySelector(".sign-in-form input[type='password']").value;
-
-      // Retrieve stored credentials
-       storedUsername = localStorage.getItem('username');
-       storedPassword = localStorage.getItem('password');
-
-      console.log(`Stored Username: ${storedUsername}, Input Username: ${username}`);
-      console.log(`Stored Password: ${storedPassword}, Input Password: ${password}`);
-
-      // Validate input against stored credentials
-      if (username === storedUsername && password === storedPassword) {
-        alert('Login successful!');
-        window.location.href = 'index.html';
-      } else {
-        alert('Invalid username or password');
-      }
-    });
-
-    // Sign up form submission
-    document.querySelector(".sign-up-form").addEventListener('submit', function (event) {
-      event.preventDefault();
-
-       username = document.querySelector(".sign-up-form input[type='text']").value;
-       email = document.querySelector(".sign-up-form input[type='email']").value;
-       password = document.querySelector(".sign-up-form input[type='password']").value;
-
-      if (username === '' || email === '' || password === '') {
-        alert('Please fill in all fields');
-        return;
-      }
-
-      // Store the username and password in localStorage
-      localStorage.setItem('username', username);
-      localStorage.setItem('password', password); // Ensure you're storing the password
-
-      alert('Your account is created successfully. Please login to access the website.');
-      container.classList.remove("sign-up-mode"); // Optionally switch to sign in mode
-    });
-
-
-    // Toggle password visibility
-    function togglePassword(fieldId, icon) {
-       field = document.getElementById(fieldId);
-      field.type = field.type === 'password' ? 'text' : 'password';
-      icon.classList.toggle('fa-lock-open');
-      icon.classList.toggle('fa-lock');
-    }
-
-    document.getElementById("toggle-password").addEventListener("click", function () {
-      togglePassword("password-input", this);
-    });
-
-    document.getElementById("toggle-password-signup").addEventListener("click", function () {
-      togglePassword("password-input-signup", this);
-    });
-
-    // Circle animation
-     coords = { x: 0, y: 0 };
-     circles = document.querySelectorAll(".circle");
-     colors = [
-      "#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e",
-      "#ec805d", "#e36e5c", "#df685c", "#d5585c", "#d1525c",
-      "#c5415d", "#c03b5d", "#b22c5e", "#ac265e", "#9c155f",
-      "#950f5f", "#830060", "#7c0060", "#680060", "#60005f",
-      "#48005f", "#3d005e",
-    ];
-
-    circles.forEach(function (circle, index) {
-      circle.x = 0;
-      circle.y = 0;
-      circle.style.backgroundColor = colors[index % colors.length];
-    });
-
-    window.addEventListener("mousemove", function (e) {
-      coords.x = e.clientX;
-      coords.y = e.clientY;
-    });
-
-    function animateCircles() {
-      let x = coords.x;
-      let y = coords.y;
-
-      circles.forEach(function (circle, index) {
-        circle.style.left = x - 12 + "px";
-        circle.style.top = y - 12 + "px";
-        circle.style.scale = (circles.length - index) / circles.length;
-
-        circle.x = x;
-        circle.y = y;
-
-         nextCircle = circles[index + 1] || circles[0];
-        x += (nextCircle.x - x) * 0.3;
-        y += (nextCircle.y - y) * 0.3;
-      });
-
-      requestAnimationFrame(animateCircles);
-    }
-
-    animateCircles();
-  </script>
+
+    <script src="preloader.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuid.min.js"></script>
+    <script>
+        const sign_in_btn = document.querySelector("#sign-in-btn");
+        const sign_up_btn = document.querySelector("#sign-up-btn");
+        const container = document.querySelector(".container");
+
+        // Toggle between sign up and sign in
+        sign_up_btn.addEventListener("click", () => {
+            container.classList.add("sign-up-mode");
+        });
+
+        sign_in_btn.addEventListener("click", () => {
+            container.classList.remove("sign-up-mode");
+        });
+
+        // Sign in form submission
+        document.querySelector(".sign-in-form").addEventListener('submit', function (event) {
+            event.preventDefault();
+
+            const username = document.querySelector(".sign-in-form input[type='text']").value;
+            const password = document.querySelector(".sign-in-form input[type='password']").value;
+
+            // Retrieve stored credentials
+            const storedUsername = localStorage.getItem('username');
+            const storedPassword = localStorage.getItem('password');
+
+            console.log(`Stored Username: ${storedUsername}, Input Username: ${username}`);
+            console.log(`Stored Password: ${storedPassword}, Input Password: ${password}`);
+
+            // Validate input against stored credentials
+            if (username === storedUsername && password === storedPassword) {
+                alert('Login successful!');
+                window.location.href = 'index.html';
+            } else {
+                alert('Invalid username or password');
+            }
+        });
+
+        // Sign up form submission
+        document.querySelector(".sign-up-form").addEventListener('submit', function (event) {
+            event.preventDefault();
+
+            const username = document.querySelector(".sign-up-form input[type='text']").value;
+            const email = document.querySelector(".sign-up-form input[type='email']").value;
+            const password = document.querySelector(".sign-up-form input[type='password']").value;
+
+            if (username === '' || email === '' || password === '') {
+                alert('Please fill in all fields');
+                return;
+            }
+
+            // Store the username and password in localStorage
+            localStorage.setItem('username', username);
+            localStorage.setItem('password', password); // Ensure you're storing the password
+
+            alert('Your account is created successfully. Please login to access the website.');
+            container.classList.remove("sign-up-mode"); // Optionally switch to sign in mode
+        });
+
+        // Toggle password visibility
+        function togglePassword(fieldId, icon) {
+            const field = document.getElementById(fieldId);
+            field.type = field.type === 'password' ? 'text' : 'password';
+            icon.classList.toggle('fa-lock-open');
+            icon.classList.toggle('fa-lock');
+        }
+
+        document.getElementById("toggle-password").addEventListener("click", function () {
+            togglePassword("password-input", this);
+        });
+
+        document.getElementById("toggle-password-signup").addEventListener("click", function () {
+            togglePassword("password-input-signup", this);
+        });
+
+        // Circle animation
+        const coords = { x: 0, y: 0 };
+        const circles = document.querySelectorAll(".circle");
+        const colors = [
+            "#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e",
+            "#ec805d", "#e36e5c", "#df685c", "#d5585c", "#d1525c",
+            "#c5415d", "#c03b5d", "#b22c5e", "#ac265e", "#9c155f",
+            "#950f5f", "#830060", "#7c0060", "#680060", "#60005f",
+            "#48005f", "#3d005e",
+        ];
+
+        circles.forEach(function (circle, index) {
+            circle.x = 0;
+            circle.y = 0;
+            circle.style.backgroundColor = colors[index % colors.length];
+        });
+
+        window.addEventListener("mousemove", function (e) {
+            coords.x = e.clientX;
+            coords.y = e.clientY;
+        });
+
+        function animateCircles() {
+            let x = coords.x;
+            let y = coords.y;
+
+            circles.forEach(function (circle, index) {
+                circle.style.left = x - 12 + "px";
+                circle.style.top = y - 12 + "px";
+                circle.style.scale = (circles.length - index) / circles.length;
+
+                circle.x = x;
+                circle.y = y;
+
+                const nextCircle = circles[index + 1] || circles[0];
+                x += (nextCircle.x - x) * 0.3;
+                y += (nextCircle.y - y) * 0.3;
+            });
+
+            requestAnimationFrame(animateCircles);
+        }
+
+        animateCircles();
+    </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/user-map.html b/user-map.html
index c4222d1..3d0ff87 100644
--- a/user-map.html
+++ b/user-map.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -29,8 +30,29 @@
             border-radius: 5px;
             cursor: pointer;
         }
+
+        /* Basic styles for the container */
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        h1 {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+
+        /* Style for the map */
+        #map {
+            height: 500px;
+            width: 100%;
+            border-radius: 5px;
+            margin-bottom: 20px;
+        }
     </style>
 </head>
+
 <body>
     <div class="container">
         <h1>Hospitals</h1>
@@ -38,7 +60,7 @@ <h1>Hospitals</h1>
             <input type="text" id="searchInput" placeholder="Search for hospitals or pharmacies" />
             <button id="searchButton">Search</button>
         </div>
-        <div id="map" style="height: 500px; width: 100%;"></div>
+        <div id="map"></div>
         <button id="viewListBtn">Back to List</button>
     </div>
 
@@ -146,4 +168,5 @@ <h3>${place.name}</h3>
         window.onload = initMap;
     </script>
 </body>
+
 </html>
diff --git a/user.html b/user.html
index f7d1d7c..8502509 100644
--- a/user.html
+++ b/user.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,7 +8,48 @@
     <link rel="stylesheet" href="src/css/user.css">
     <link href="/dist/output.css" rel="stylesheet">
     <link rel="shortcut icon" href="ambulance.png" type="image/x-icon">
+    <style>
+        /* Additional styles for better layout */
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        h1 {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+
+        #hospitalList {
+            margin-bottom: 20px;
+        }
+
+        .hospital-item {
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            padding: 10px;
+            margin: 10px 0;
+            background-color: #f9f9f9;
+        }
+
+        #viewMapBtn {
+            display: block;
+            width: 100%;
+            padding: 10px;
+            background-color: #4caf50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
+        #viewMapBtn:hover {
+            background-color: #45a049;
+        }
+    </style>
 </head>
+
 <body>
     <div class="container">
         <h1 class="text-4xl font-extrabold text-stone-900">Nearby Hospitals</h1>
@@ -17,6 +59,7 @@ <h1 class="text-4xl font-extrabold text-stone-900">Nearby Hospitals</h1>
         <button id="viewMapBtn">View on Map</button>
     </div>
 
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKR3agIMLtauzDhz4fCu3heww0BV_81H4&libraries=places"></script>
     <script>
         function fetchHospitalList() {
             if (navigator.geolocation) {
@@ -28,9 +71,11 @@ <h1 class="text-4xl font-extrabold text-stone-900">Nearby Hospitals</h1>
                     searchHospitals(userLocation);
                 }, () => {
                     console.error('Error getting user location.');
+                    alert('Could not retrieve your location. Please allow location access.');
                 });
             } else {
                 console.error('Geolocation is not supported by this browser.');
+                alert('Geolocation is not supported by your browser.');
             }
         }
 
@@ -75,6 +120,6 @@ <h3>No hospitals found.</h3>
             window.location.href = 'user-map.html';
         });
     </script>
-    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKR3agIMLtauzDhz4fCu3heww0BV_81H4&libraries=places"></script>
 </body>
+
 </html>