diff --git a/index.html b/index.html
index dd50130d..f2cc8ecd 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>AmbuFlow</title>
+
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
+  <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="style1.css">
+
   <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
   <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">
@@ -365,12 +372,49 @@
    }
 
   </style>
+
 </head>
 
 <body>
   <header class="sticky">
     <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="/" 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>
+        </ul>
+      </nav>
+      <div class="buttons">
+        <button class="dark-mode-toggle" id="dark-mode-button">
+          <i class="fa-solid fa-moon"></i>
+        </button>
+        <a href="login.html" class="login">Log in</a>
+        <a href="up.html" class="get-started">Get started</a>
+      </div>
+    </div>
+  </header>
+
+
       <div class="logo">
         <div class="brand-name">
           <span class="letter red" style="--letter-index: 1">A</span>
@@ -390,6 +434,7 @@
         /></a>
       </div>
 
+
       <nav class="menu">
         <ul>
           <li>
@@ -488,79 +533,61 @@ <h2>Meet the Team</h2>
         <div>
           <h2>Contact Us</h2>
           <p>
-            Have questions or feedback? Reach out to us through our contact
-            page.
+            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>
+    </div>
+  </div>
 
-      <!-- FAQ Section in Full Row -->
+  <footer>
+    <!-- Newsletter Subscription -->
+    <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
+      <h3>Subscribe to Our Newsletter</h3>
+      <form action="#">
+        <input type="email" placeholder="Your Email" style="padding: 10px; width: 80%;" required /><br /><br />
+        <button type="submit" style="
+                      background-color: #ff5733;
+                      color: white;
+                      padding: 10px 20px;
+                      border: none;
+                      cursor: pointer;
+                    ">
+          Subscribe
+        </button>
+      </form>
+    </div>
 
-      <div class="contact-feature 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>
-         </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>
-         
+    <!-- Footer Container -->
+    <div class="footer-container" style="display: flex; justify-content: space-between; align-items: flex-start;">
+      <!-- Contact Information Section -->
+      <div class="contact-ft" style="flex: 1; min-width: 200px;">
+        <h3>Contact Info</h3>
+        <pre>123 Emergency Lane, Mumbai, India
+          Phone : +91-911-1234567
+          Email : emergency@ambulanceservice.in</pre>
+      </div>
 
+      <!-- Social Media Links -->
+      <div class="social-ft"
+        style="flex: 1; display: flex; flex-direction: column; align-items: flex-end; padding-right: 220px;">
+        <h3>Get in Touch</h3>
+        <div style="display: flex; justify-content: center; gap: 1rem; font-size: 1.9rem; flex-wrap: wrap; "
+          class="links">
+          <a href="https://www.facebook.com" style="color: white; text-decoration: none;"><i
+              class="fab fa-facebook-f"></i></a>
+          <a href="https://www.twitter.com" style="color: white; text-decoration: none;"><i
+              class="fa-brands fa-x-twitter"></i></a>
+          <a href="https://www.instagram.com" style="color: white; text-decoration: none;"><i
+              class="fab fa-instagram"></i></a>
+          <a href="https://www.linkedin.com" style="color: white; text-decoration: none;"><i
+              class="fab fa-linkedin-in"></i></a>
         </div>
       </div>
-
-      <!-- FAQ section ends here -->
-
     </div>
-  </div>
+
  
   <footer style="color: #f3f4f6; text-align: center; width: 100%;">
     <div style="background-color: #C4D7FF; color: #f3f4f6; ">
@@ -704,25 +731,29 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
     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');
+    <!-- Copyright Section -->
+    <div style="
+            text-align: center;
+            margin-top: 20px;
+            border-top: 1px solid white;
+            padding-top: 10px;
+          ">
+      <p>&copy; 2024 Ambulance Monitoring System. All rights reserved.</p>
+    </div>
+  </footer>
 
-            // 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
-            }
-        });
-    });
-    });
 
+  <!-- Back to Top Button -->
+  <button id="back-to-top">
+    <i class="fas fa-chevron-up" style="font-size: 30px;"></i>
+  </button>
+
+  <script src="script.js"></script>
 
-  </script>
 </body>
+
+
 </html>
+
+
diff --git a/script.js b/script.js
index 418d2a71..ee922ba2 100644
--- a/script.js
+++ b/script.js
@@ -1,3 +1,5 @@
+
+
 // Newsletter form submission handler
 document
   .getElementById("newsletter-form")
@@ -23,6 +25,7 @@ document
   });
 
 // Accordion functionality
+
 const accordions = document.querySelectorAll(".accordion");
 
 accordions.forEach((accordion, index) => {
@@ -47,3 +50,60 @@ accordions.forEach((accordion, index) => {
         ic.classList.remove("ri-subtract-fill");
       }
     });
+
+
+});
+
+// Function to handle the active state of navbar items
+function changeContent(page) {
+    // Get all navigation links
+    var links = document.querySelectorAll(".menu ul li a");
+
+    // Remove the active class from all links
+    links.forEach((link) => link.classList.remove("active"));
+
+    // Add the active class to the clicked link
+    document.getElementById(page + "-link").classList.add("active");
+}
+
+// Make "Home" the default active page on load
+window.onload = function () {
+    document.getElementById("home-link").classList.add("active");
+};
+
+//JS for dark mode fuctionality
+// Select the dark mode button
+// Get the dark mode button element
+const darkModeButton = document.getElementById('dark-mode-button');
+
+// Add event listener for toggle functionality
+darkModeButton.addEventListener('click', () => {
+    document.body.classList.toggle('dark-mode');
+
+    // Toggle icon between moon and sun
+    const icon = darkModeButton.querySelector('i');
+    icon.classList.toggle('fa-moon');
+    icon.classList.toggle('fa-sun');
+
+    // Log the current classes for debugging
+    console.log(icon.classList); // Check the classes being applied to the icon
+});
+
+
+// Back to top button functionality
+const backToTopButton = document.getElementById('back-to-top');
+
+// 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' });
+
+});
diff --git a/style1.css b/style1.css
index fbcb3919..f8fe9f68 100644
--- a/style1.css
+++ b/style1.css
@@ -1,14 +1,3 @@
-/* .logo span {
-            font-size: 28px;
-            font-weight: bold;
-            background: linear-gradient(45deg, #ff5733, #33ff57, #3357ff);
-            -webkit-background-clip: text;
-            color: transparent;
-            letter-spacing: 2px;
-            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
-            font-family: 'Arial', sans-serif;
-        } */
-
 /* Base Styles */
 body {
   font-family: Arial, sans-serif;
@@ -45,6 +34,29 @@ header {
   border-radius: 10px;
 }
 
+/* scroll to top */
+#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 */
 body.dark-mode {
   background-color: #333;
@@ -229,6 +241,48 @@ footer {
     width: 100%;
 }
 
+.footer-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.contact-ft {
+  flex: 1;
+  min-width: 200px;
+}
+
+.social-ft {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  padding-right: 20px; /* Adjust this value for right padding */
+}
+
+.links {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  font-size: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.links a {
+  color: white;
+  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 */
+}
+
 @keyframes fadeIn {
     from {
         opacity: 0;
@@ -238,4 +292,4 @@ footer {
         opacity: 1;
     }
 
-}
\ No newline at end of file
+}
