diff --git a/index.html b/index.html
index 10f1139..d7708fd 100644
--- a/index.html
+++ b/index.html
@@ -2,20 +2,19 @@
 <html lang="en">
 <head>
     <link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=DM+Serif+Display:ital@0;1&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
-
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=DM+Serif+Display:ital@0;1&family=Montserrat:ital,wght@0;1,100..900&display=swap" rel="stylesheet">
+    
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- ... existing head content ... -->
     <style>
+        /* Loader styling */
         #loader-wrapper {
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            /* background-color: #100d0d; */
-            background-image:url(src/assets/bk.jpg) ;
+            background-image: url('src/assets/bk.jpg'); /* Update with actual path */
             display: flex;
             justify-content: center;
             align-items: center;
@@ -33,36 +32,247 @@
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
+
+        /* Theme Toggle Button Styling */
+        .theme-toggle {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            width: 40px;
+            height: 40px;
+            background-color: #250141;
+            color: white;
+            font-size: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: none;
+            border-radius: 50%;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+        .theme-toggle:hover {
+            background-color: #4b145e;
+        }
+
+        /* Tooltip styling */
+        .theme-toggle[aria-label]:hover::after {
+            content: attr(aria-label);
+            position: absolute;
+            top: 50px;
+            right: -10px;
+            background-color: #4b145e;
+            color: white;
+            padding: 5px 10px;
+            border-radius: 4px;
+            font-size: 12px;
+            white-space: nowrap;
+            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+        }
+
+        /* Light and Dark Theme Styles */
+        body.light-mode {
+            background-color: #ffffff;
+            color: #000000;
+        }
+        body.dark-mode {
+            background-color: #100d0d;
+            color: #ffffff;
+        }
+
+        /* About Us and Contact Us Button Styles */
+        .top-buttons {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            z-index: 1000;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .top-button {
+            width: 40px;
+            height: 40px;
+            background-color: #250141;
+            color: white;
+            font-size: 20px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+
+        .top-button:hover {
+            background-color: #4b145e;
+        }
+
+        /* Hidden sections for About Us and Contact Us */
+        .hidden-section {
+            display: none;
+            position: fixed;
+            top: 60px;
+            right: 20px;
+            background-color: #250141;
+            padding: 20px;
+            color: white;
+            border-radius: 10px;
+            width: 300px;
+            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
+        }
+
+        /* Notifications button */
+        .notifications-button {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background-color: #250141;
+            color: white;
+            font-size: 20px;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+
+        .notifications-button:hover {
+            background-color: #4b145e;
+        }
+
+        /* Marquee styling for notifications */
+        .marquee-container {
+            position: fixed;
+            bottom: 80px;
+            right: 20px;
+            width: 300px;
+            background-color: #4b145e;
+            color: white;
+            font-size: 16px;
+            padding: 10px;
+            border-radius: 10px;
+            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+            display: none; /* Initially hidden */
+        }
+
+        .marquee-container marquee {
+            font-size: 16px;
+        }
+
     </style>
 </head>
-<body>
+<body class="light-mode">
     <div id="loader-wrapper">
         <div class="loader"></div>
     </div>
+
+    <!-- Theme Toggle Button -->
+    <button class="theme-toggle" id="themeToggleButton" aria-label="Switch to Dark Mode">🌞</button>
+
+    <!-- About Us, Contact Us Buttons -->
+    <div class="top-buttons">
+        <button class="top-button" id="aboutUsButton" aria-label="About Us">ℹ️</button>
+        <button class="top-button" id="contactUsButton" aria-label="Contact Us">📞</button>
+    </div>
+
+    <!-- Notifications Button -->
+    <button class="notifications-button" id="notificationsButton">🔔</button>
+
+    <!-- Marquee for Notifications -->
+    <div class="marquee-container" id="marqueeContainer">
+        <marquee behavior="scroll" direction="left">You have new notifications!</marquee>
+    </div>
+
+    <!-- Hidden Sections -->
+    <div class="hidden-section" id="aboutUsSection">
+        <h3>About Us</h3>
+        <p>We are a tech-driven team focused on building innovative solutions.</p>
+    </div>
+
+    <div class="hidden-section" id="contactUsSection">
+        <h3>Contact Us</h3>
+        <p>Email: support@techcompany.com</p>
+        <p>Phone: +1 123 456 7890</p>
+    </div>
+
+    <!-- Main Content -->
     <div id="root"></div>
 
+    <!-- Chatbot Embed -->
+    <div id="chatbotContainer"></div>
     <script>
         window.embeddedChatbotConfig = {
-        chatbotId: "rfrWIJLugIrq6XpUHDKwC",
-        domain: "www.chatbase.co"
-        }
-        </script>
-        <script
-        src="https://www.chatbase.co/embed.min.js"
-        chatbotId="rfrWIJLugIrq6XpUHDKwC"
-        domain="www.chatbase.co"
-        defer>
-        </script>
-    <script type="module" src="./src/main.jsx"></script> <!-- Use relative path -->
-
-    <script type="module" src="./src/main.jsx"></script>
+            chatbotId: "rfrWIJLugIrq6XpUHDKwC", // Replace with actual Chatbase chatbot ID
+            domain: "www.chatbase.co"
+        };
+    </script>
+    <script src="https://www.chatbase.co/embed.min.js"></script>
+
+    <!-- Theme Toggle Script -->
     <script>
+        const themeToggleButton = document.getElementById("themeToggleButton");
+
+        // Check LocalStorage for theme
+        function applyStoredTheme() {
+            const storedTheme = localStorage.getItem("theme");
+            if (storedTheme === "dark") {
+                document.body.classList.replace("light-mode", "dark-mode");
+                themeToggleButton.textContent = "🌜";
+                themeToggleButton.setAttribute("aria-label", "Switch to Light Mode");
+            }
+        }
+
+        // Toggle Theme on Button Click
+        themeToggleButton.addEventListener("click", () => {
+            if (document.body.classList.contains("light-mode")) {
+                document.body.classList.replace("light-mode", "dark-mode");
+                themeToggleButton.textContent = "🌜";
+                themeToggleButton.setAttribute("aria-label", "Switch to Light Mode");
+                localStorage.setItem("theme", "dark");
+            } else {
+                document.body.classList.replace("dark-mode", "light-mode");
+                themeToggleButton.textContent = "🌞";
+                themeToggleButton.setAttribute("aria-label", "Switch to Dark Mode");
+                localStorage.setItem("theme", "light");
+            }
+        });
+
+        // Apply stored theme on load
+        applyStoredTheme();
+
+        // Hide Loader after Page Load
         window.addEventListener('load', function() {
             setTimeout(function() {
                 document.getElementById('loader-wrapper').style.display = 'none';
-            }, 1000); // Hide loader after 1 second (adjust as needed)
+            }, 500); // Hide loader after 500ms
+        });
+
+        // Notifications Button (Just for Demo)
+        const notificationsButton = document.getElementById('notificationsButton');
+        const marqueeContainer = document.getElementById('marqueeContainer');
+        notificationsButton.addEventListener('click', () => {
+            if (marqueeContainer.style.display === "none" || marqueeContainer.style.display === "") {
+                marqueeContainer.style.display = "block";
+            } else {
+                marqueeContainer.style.display = "none";
+            }
         });
-    </script>
 
+        // About Us and Contact Us Button Handlers
+        document.getElementById("aboutUsButton").addEventListener("click", function() {
+            const aboutUsSection = document.getElementById("aboutUsSection");
+            aboutUsSection.style.display = (aboutUsSection.style.display === "none" || aboutUsSection.style.display === "") ? "block" : "none";
+        });
+
+        document.getElementById("contactUsButton").addEventListener("click", function() {
+            const contactUsSection = document.getElementById("contactUsSection");
+            contactUsSection.style.display = (contactUsSection.style.display === "none" || contactUsSection.style.display === "") ? "block" : "none";
+        });
+    </script>
 </body>
-</html>
\ No newline at end of file
+</html>
