diff --git a/Alien.css b/Alien.css
index 76f4b54..60268ef 100644
--- a/Alien.css
+++ b/Alien.css
@@ -76,39 +76,61 @@ body.dark-theme {
   margin-right: 9px;
 }
 
+/* General Navbar Styling */
 .navbar {
   background-color: #0b0e17;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
-  border-bottom: none;
-  /* margin-bottom: 50px; */
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 80px;
   z-index: 100;
-  /* padding-right: 20px; */
   box-shadow: 0 4px 8px rgba(0, 255, 255, 0.1);
+  padding: 20px;
 }
 
-/* Styling individual links in the navbar */
+/* Navbar link styling */
 .navbar a {
   color: #a0a0a0;
-  /* Link color */
   font-size: 18px;
-  /* Font size */
   text-decoration: none;
-  /* Remove underline */
   padding: 0.5rem 1rem;
   border-radius: 0.5rem;
-  /* Rounded corners for hover effect */
   transition: background-color 0.3s ease;
-  /* Smooth hover transition */
 }
 
+/* Dark Mode Styling */
+body.dark-theme .navbar {
+  background-color: #0b0e17;
+  box-shadow: 0 4px 8px rgba(0, 255, 255, 0.1);
+}
+
+body.dark-theme .navbar a {
+  color: #a0a0a0;
+  transition: color 0.3s;
+}
+
+/* Light Mode Styling */
+body:not(.dark-theme) .navbar {
+  background-color: #f9f9f9;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+body:not(.dark-theme) .navbar a {
+  color: #333;
+  transition: color 0.3s;
+}
+
+/* Responsive Navbar Styling */
+.navbar .faq-btn {
+  font-size: 0.8em;
+  padding: 10px 20px;
+  margin: 5px;
+}
 .home {
   padding-left: 90px;
 }
@@ -354,13 +376,13 @@ body:not(.dark-theme) #congratsPopup.show {
 /* Buttons */
 button {
   padding: 10px 20px;
-  border-radius: 4px;
+  border-radius:  4px;
   cursor: pointer;
-  font-family: var(--game-font);
-  text-transform: uppercase;
-  letter-spacing: 1px;
+  font-family:  var(--game-font);
+  text-transform:  uppercase;
+  letter-spacing:  1px;
   transition: all var(--transition-speed);
-  margin-left: -13px;
+
 }
 
 body:not(.dark-theme) button {
@@ -400,7 +422,7 @@ body.dark-theme button:hover {
 } */
 /* Responsive Sidebar Styling */
 .sidebar {
-  position: fixed;
+  position: absolute;
   right: 0;
   top: 0;
   width: 300px;
@@ -408,7 +430,7 @@ body.dark-theme button:hover {
   max-height: 92vh;
   height: 100%;
   padding: 20px;
-  margin-top: 100px;
+  margin-top: 120px;
   background-color: var(--card-bg-light);
   border-left: 2px solid var(--border-light);
   transition: background-color var(--transition-speed),
@@ -435,6 +457,83 @@ body.dark-mode .sidebar::-webkit-scrollbar-thumb {
   background-color: var(--border-dark);
 }
 
+/* Footer General Styling */
+.footer {
+  background-color: #0b0e17; /* Dark background for default mode */
+  color: #a0a0a0;
+  padding: 20px 10px;
+  text-align: center;
+  font-size: 16px;
+  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Footer Links Styling */
+.footer-links {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin-bottom: 10px;
+}
+
+.footer-links a {
+  color: #a0a0a0; /* Default link color */
+  text-decoration: none;
+  transition: color 0.3s, background-color 0.3s;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+
+.footer-links a:hover {
+  background-color: rgba(160, 160, 160, 0.2);
+  color: #ffffff;
+}
+
+/* Light Mode Footer Styling */
+body:not(.dark-theme) .footer {
+  background-color: #f9f9f9; /* Light background for light mode */
+  color: #333;
+  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
+}
+
+body:not(.dark-theme) .footer-links a {
+  color: #333;
+}
+
+body:not(.dark-theme) .footer-links a:hover {
+  background-color: rgba(51, 51, 51, 0.2);
+  color: #0b0e17;
+}
+
+/* Dark Mode Footer Styling */
+body.dark-theme .footer {
+  background-color: #0b0e17;
+  color: #a0a0a0;
+  box-shadow: 0 -4px 8px rgba(0, 255, 255, 0.1);
+}
+
+body.dark-theme .footer-links a {
+  color: #a0a0a0;
+}
+
+body.dark-theme .footer-links a:hover {
+  background-color: rgba(0, 255, 255, 0.1);
+  color: #ffffff;
+}
+
+/* Footer Note Styling */
+.footer-note {
+  margin-top: 10px;
+  font-size: 14px;
+}
+
+/* Responsive Footer Styling */
+@media (max-width: 768px) {
+  .footer-links {
+    flex-direction: column;
+    gap: 10px;
+  }
+}
+
 /* Responsive Breakpoints */
 @media (max-width: 768px) {
   .sidebar {
@@ -597,7 +696,6 @@ body.dark-theme #instructionsTitle {
     font-size: 10px;
     gap: 10px;
     padding: 8px;
-    margin-top: 8px;
   }
 
   #gameControls.header button,
@@ -612,4 +710,47 @@ body.dark-theme #instructionsTitle {
     font-size: 0.9em;
     padding: 5px 8px;
   }
+  .navbar {
+    flex-direction: column;
+    padding: 20px;
+  }
+
+  .navbar a {
+    padding: 0px;
+    margin: 0px;
+  }
+
+  .navbar button {
+    padding: 6px 10px;
+    font-size: 0.4em;
+    width: auto;
+  }
+
+  .navbar .faq-btn {
+    font-size: 0.6em;
+    padding: 5px 8px;
+    margin: 0px;
+  }
+  .theme-switch {
+    width: 40px; /* Smaller width for mobile */
+    height: 20px; /* Smaller height for mobile */
+  }
+
+  .slider:before {
+    height: 16px; /* Adjusted circle size */
+    width: 16px;
+    bottom: 2px;
+    left: 2px;
+  }
+
+  #mode-label {
+    font-size: 0em; /* Slightly smaller label */
+  }
+  input:checked + .slider:before {
+    transform: translateX(21px);
+  }
+
+  .home {
+    padding-left: 0;
+  }
 }
diff --git a/FAQs.html b/FAQs.html
index 5bb5e8b..6b98b77 100644
--- a/FAQs.html
+++ b/FAQs.html
@@ -13,6 +13,57 @@
     />
 
     <style>
+
+      /* General Body Styling */
+
+    body {
+
+cursor: none; /* Hide the default cursor */
+
+}
+
+/* Cursor Tail Effect - the small dots trailing behind */
+.cursor-tail {
+
+position: absolute;
+width: 11px;  /* Small dot */
+height: 11px;
+background-color: rgba(63, 228, 253, 0.8); /* Neon green tail */
+border-radius: 50%;
+pointer-events: none; /* Ensure the trail doesn't interfere with clicks */
+z-index: 9999;
+transform: translate(-50%, -50%);
+animation: trail 0.5s forwards;
+
+}
+
+/* Tail Effect Animation - Fades and shrinks */
+@keyframes trail {
+
+0% {
+  transform: scale(1) translate(-50%, -50%);
+  opacity: 1;
+}
+100% {
+  transform: scale(0) translate(-50%, -50%);
+  opacity: 0;
+}
+
+}
+
+/* Sample content to make sure scrolling works */
+.content {
+
+height: 200vh; /* Make the page taller to enable scrolling */
+display: flex;
+flex-direction: column;
+align-items: center;
+justify-content: center;
+
+}
+
+
+
       /* Custom Scrollbar */
       html::-webkit-scrollbar {
         width: 12px;
@@ -318,6 +369,126 @@ <h2 onclick="toggleAnswer(this)">
         </p>
       </section>
     </main>
+    <div class="game-background">
+      <div class="form-container">
+        <h1 class="title">Space Warship Q&A</h1>
+        <p class="instructions">Ask your questions about the space warship and get answers!</p>
+        
+        <form id="question-form">
+          <label for="user-question">Your Question:</label>
+          <textarea id="user-question" name="question" placeholder="Type your question here..." required></textarea><br>
+          
+          <button type="submit">Submit Question</button>
+        </form>
+  
+        <div id="answer-container" class="answer-container">
+          <h3>Answer:</h3>
+          <p id="answer"></p>
+        </div>
+      </div>
+    </div>
+    <style>
+      .game-background {
+  background: url('space-background.jpg') no-repeat center center/cover;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.form-container {
+
+  margin-top: 90px;
+  background: rgba(0, 0, 0, 0.8);
+  padding: 30px;
+  border-radius: 10px;
+  color: white;
+  text-align: center;
+ border: 5px solid white;
+  width:800px;
+}
+
+.title {
+  font-size: 2.5em;
+  margin-bottom: 20px;
+  text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.6);
+}
+
+.instructions {
+  font-size: 1.2em;
+  margin-bottom: 20px;
+}
+
+textarea {
+  width: 100%;
+  height: 150px;
+  padding: 10px;
+  margin-bottom: 20px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  font-size: 1.1em;
+}
+
+button {
+  background-color: #4CAF50;
+  color: white;
+  padding: 10px 20px;
+  font-size: 1.2em;
+  border: none;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+button:hover {
+  background-color: #45a049;
+}
+
+.answer-container {
+  margin-top: 20px;
+  text-align: left;
+  display: none;
+}
+
+.answer-container h3 {
+  font-size: 1.8em;
+  margin-bottom: 10px;
+}
+
+.answer-container p {
+  font-size: 1.2em;
+  color: #ffcc00;
+}
+    </style>
+    <script>
+      document.getElementById("question-form").addEventListener("submit", function(event) {
+  event.preventDefault();
+
+  const userQuestion = document.getElementById("user-question").value.trim();
+  const answerContainer = document.getElementById("answer-container");
+  const answerText = document.getElementById("answer");
+
+  if (userQuestion) {
+    // Simple example of answering based on the question content
+    let answer = "Sorry, I don't have an answer for that.";
+
+    if (userQuestion.toLowerCase().includes("weapon")) {
+      answer = "The primary weapon of the space warship is the Laser Cannon.";
+    } else if (userQuestion.toLowerCase().includes("shield")) {
+      answer = "The warship uses an energy shield to protect itself from enemy attacks.";
+    } else if (userQuestion.toLowerCase().includes("speed")) {
+      answer = "The space warship can travel at FTL (faster-than-light) speeds!";
+    }
+
+    answerText.textContent = answer;
+    answerContainer.style.display = "block";  // Show the answer container
+  } else {
+    answerText.textContent = "Please ask a valid question.";
+    answerContainer.style.display = "block";
+  }
+});
+
+    </script>
 
     <footer class="bg-body-tertiary text-center">
       <!-- Grid container -->
@@ -465,5 +636,34 @@ <h2 onclick="toggleAnswer(this)">
       domain="www.chatbase.co"
       defer
     ></script>
+
+    <script>
+      // Create a trailing dot element dynamically
+      function createTrailDot(x, y) {
+        const trailDot = document.createElement('div');
+        trailDot.classList.add('cursor-tail');
+        trailDot.style.left = `${x}px`;
+        trailDot.style.top = `${y}px`;
+        document.body.appendChild(trailDot);
+
+        // Remove the trail dot after the animation completes (0.5s)
+        setTimeout(() => {
+          trailDot.remove();
+        }, 500); // Match the duration of the animation in CSS
+      }
+
+      // Function to move the cursor and generate trailing dots
+      function moveCursor(event) {
+        const x = event.pageX;
+        const y = event.pageY;
+
+        // Create a new trail dot at the cursor position
+        createTrailDot(x, y);
+      }
+
+      // Listen to mousemove event to trigger the cursor and trail
+      document.addEventListener('mousemove', moveCursor);
+    </script>
+    
   </body>
 </html>
diff --git a/about.html b/about.html
index 7544a6f..5629393 100644
--- a/about.html
+++ b/about.html
@@ -6,12 +6,123 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>About Us | Alien Invasion Defense</title>
     
-    <link rel="stylesheet" href="about.css">
+    <style>
+        /* Base styles */
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: Arial, sans-serif;
+            background-color: #0a0a2a;
+            color: #ffffff;
+        }
+
+        /* Container styles */
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        /* Header styles */
+        header {
+            background-color: #1a1a4a;
+            padding: 20px;
+            position: relative;
+            box-shadow: 0 2px 10px rgba(0, 255, 255, 0.2);
+        }
+
+        .main-heading {
+            text-align: center;
+            margin: 0;
+            font-size: 2.5em;
+            color: #00ffff;
+            text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
+        }
+
+        /* Back to Home button styles */
+        .home-button {
+            position: absolute;
+            left: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: linear-gradient(45deg, #00ccff, #0066ff);
+            border: none;
+            border-radius: 25px;
+            padding: 10px 20px;
+            color: white;
+            font-weight: bold;
+            cursor: pointer;
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            transition: all 0.3s ease;
+            box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
+        }
+
+        .home-button:hover {
+            transform: translateY(-50%) scale(1.05);
+            box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
+        }
+
+        .home-button:before {
+            content: '🏠';
+            font-size: 1.2em;
+        }
+
+        /* Section styles */
+        section {
+            background-color: rgba(26, 26, 74, 0.6);
+            margin: 20px 0;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 0 15px rgba(0, 255, 255, 0.1);
+        }
+
+        /* Headings */
+        h2 {
+            color: #00ffff;
+            border-bottom: 2px solid #00ffff;
+            padding-bottom: 10px;
+            margin-top: 0;
+        }
+
+        /* Lists */
+        ul {
+            list-style-type: none;
+            padding-left: 0;
+        }
+
+        li {
+            margin: 10px 0;
+            padding-left: 25px;
+            position: relative;
+        }
+
+        /* Highlight text */
+        .highlight {
+            color: #00ffff;
+            font-weight: bold;
+        }
+
+        /* Responsive design */
+        @media (max-width: 768px) {
+            .main-heading {
+                font-size: 1.8em;
+            }
+
+            .home-button {
+                padding: 8px 16px;
+                font-size: 0.9em;
+            }
+        }
+    </style>
 </head>
 
 <body>
     <!-- Main Heading: About Us -->
     <header>
+        <a href="index.html" class="home-button">Back to Home</a>
         <h1 class="main-heading">🚀 Alien Invasion Defense 🛸</h1>
     </header>
 
@@ -20,7 +131,7 @@ <h1 class="main-heading">🚀 Alien Invasion Defense 🛸</h1>
         <section class="intro">
             <h2>Welcome to <span class="highlight">Alien Invasion Defense</span> 👾</h2>
             <p>
-                <span class="highlight">Alien Invasion Defense</span> is an exciting space-shooter game that challenges you to defend your base from waves of alien invaders. With sleek graphics, easy controls, and thrilling gameplay, you’ll be immersed in an intergalactic battle for survival. Are you ready to become the ultimate space defender?
+                <span class="highlight">Alien Invasion Defense</span> is an exciting space-shooter game that challenges you to defend your base from waves of alien invaders. With sleek graphics, easy controls, and thrilling gameplay, you'll be immersed in an intergalactic battle for survival. Are you ready to become the ultimate space defender?
             </p>
         </section>
 
@@ -32,7 +143,7 @@ <h2>🌟 Features</h2>
                 <li>🎮 <strong>Easy Controls & Interface:</strong> Simple controls make gameplay intuitive and accessible for all players.</li>
                 <li>💥 <strong>Three Lives:</strong> Protect your base with only 3 chances before the game ends.</li>
                 <li>🚀 <strong>Smooth Shooting:</strong> Responsive shooting mechanics to destroy incoming alien invaders.</li>
-                <li>🖥️ <strong>Modern Graphics:</strong> A visually pleasing, clean interface that complements the game’s exciting pace.</li>
+                <li>🖥️ <strong>Modern Graphics:</strong> A visually pleasing, clean interface that complements the game's exciting pace.</li>
                 <li>🔄 <strong>Quick Restart:</strong> Restart the game instantly with one click.</li>
                 <li>🏆 <strong>Leaderboard (Optional):</strong> Track your highest scores and challenge your friends to beat them.</li>
             </ul>
@@ -64,7 +175,7 @@ <h2>📜 Game Rules</h2>
         <!-- Tech Stack Section -->
         <section class="tech-stack">
             <h2>Tech Stack ⚙️</h2>
-            <p>Alien Invasion Defense is powered by modern web technologies to ensure a smooth and engaging experience for players. Here’s the tech stack behind the game:</p>
+            <p>Alien Invasion Defense is powered by modern web technologies to ensure a smooth and engaging experience for players. Here's the tech stack behind the game:</p>
             <ul>
                 <li><strong>HTML5</strong> - Structure and game layout.</li>
                 <li><strong>CSS3</strong> - For styling and responsive design.</li>
@@ -73,8 +184,8 @@ <h2>Tech Stack ⚙️</h2>
             </ul>
         </section>
 
-          <!-- Contributors Section -->
-          <section class="contributors">
+        <!-- Contributors Section -->
+        <section class="contributors">
             <h2>❤️ Our Valuable Contributors</h2>
             <div class="contributors-content" align="center">
                 <a href="https://github.com/YadavAkhileshh/Alien-Invasion-Defense/graphs/contributors">
@@ -84,35 +195,29 @@ <h2>❤️ Our Valuable Contributors</h2>
             </div>
         </section>
 
-      
-
         <!-- Support Section -->
         <section class="support">
-            <h2> 🤝 Support the Project</h2>
+            <h2>🤝 Support the Project</h2>
             <p>If you find this project helpful, please consider giving it a star on GitHub! Your support helps us grow and improve the game.</p>
-            
-            <hr>
-            <ul>
-                 <!-- Stargazers Section -->
-        <section class="stargazers">
-            <h2>⭐️ Stargazers</h2>
-            <div align="center">
-                <a href="https://github.com/YadavAkhileshh/Alien-Invasion-Defense/stargazers">
-                    <img src="https://reporoster.com/stars/YadavAkhileshh/Alien-Invasion-Defense" alt="Stargazers Repo Roster">
-                </a>
-                <p>Thank you to all the amazing people who have starred our project!</p>
-            </div>
             <hr>
-
-            <h2>🍴 Forkers</h2>
-            <div align="center">
-                <a href="https://github.com/YadavAkhileshh/Alien-Invasion-Defense/network/members">
-                    <img src="https://reporoster.com/forks/YadavAkhileshh/Alien-Invasion-Defense" alt="Forkers Repo Roster">
-                </a>
-                <p>Special thanks to everyone who has forked this repository!</p>
-            </div>
-        </section>
-        </ul>
+            <!-- Stargazers Section -->
+            <section class="stargazers">
+                <h2>⭐️ Stargazers</h2>
+                <div align="center">
+                    <a href="https://github.com/YadavAkhileshh/Alien-Invasion-Defense/stargazers">
+                        <img src="https://reporoster.com/stars/YadavAkhileshh/Alien-Invasion-Defense" alt="Stargazers Repo Roster">
+                    </a>
+                    <p>Thank you to all the amazing people who have starred our project!</p>
+                </div>
+                <hr>
+                <h2>🍴 Forkers</h2>
+                <div align="center">
+                    <a href="https://github.com/YadavAkhileshh/Alien-Invasion-Defense/network/members">
+                        <img src="https://reporoster.com/forks/YadavAkhileshh/Alien-Invasion-Defense" alt="Forkers Repo Roster">
+                    </a>
+                    <p>Special thanks to everyone who has forked this repository!</p>
+                </div>
+            </section>
         </section>
 
         <!-- Call to Action -->
@@ -127,5 +232,4 @@ <h2>🍴 Forkers</h2>
         </section>
     </div>
 </body>
-
-</html>
+</html>
\ No newline at end of file
diff --git a/contributors.html b/contributors.html
index be05a0c..bccea73 100644
--- a/contributors.html
+++ b/contributors.html
@@ -10,6 +10,60 @@
 </head>
 <body>
 
+  <style>
+
+
+      /* General Body Styling */
+
+      body {
+
+cursor: none; /* Hide the default cursor */
+
+}
+
+/* Cursor Tail Effect - the small dots trailing behind */
+.cursor-tail {
+
+position: absolute;
+width: 11px;  /* Small dot */
+height: 11px;
+background-color: rgba(63, 228, 253, 0.8); /* Neon green tail */
+border-radius: 50%;
+pointer-events: none; /* Ensure the trail doesn't interfere with clicks */
+z-index: 9999;
+transform: translate(-50%, -50%);
+animation: trail 0.5s forwards;
+
+}
+
+/* Tail Effect Animation - Fades and shrinks */
+@keyframes trail {
+
+0% {
+  transform: scale(1) translate(-50%, -50%);
+  opacity: 1;
+}
+100% {
+  transform: scale(0) translate(-50%, -50%);
+  opacity: 0;
+}
+
+}
+
+/* Sample content to make sure scrolling works */
+.content {
+
+height: 200vh; /* Make the page taller to enable scrolling */
+display: flex;
+flex-direction: column;
+align-items: center;
+justify-content: center;
+
+}
+
+
+
+  </style>
     <!-- on scroll progress bar -->
   <div class="progress-bar-container">
     <div class="progress-bar" id="progress-bar-cn"></div>
@@ -72,5 +126,6 @@ <h1 class="title">Our Contributors</h1>
   </style>
 
   <script src="./contributor.js"></script>
+
 </body>
 </html>
diff --git a/donation_page.html b/donation_page.html
index 9291696..446af13 100644
--- a/donation_page.html
+++ b/donation_page.html
@@ -9,6 +9,60 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
     />
     <style>
+
+      
+
+      /* General Body Styling */
+
+      body {
+
+cursor: none; /* Hide the default cursor */
+
+}
+
+/* Cursor Tail Effect - the small dots trailing behind */
+.cursor-tail {
+
+position: absolute;
+width: 11px;  /* Small dot */
+height: 11px;
+background-color: rgba(63, 228, 253, 0.8); /* Neon green tail */
+border-radius: 50%;
+pointer-events: none; /* Ensure the trail doesn't interfere with clicks */
+z-index: 9999;
+transform: translate(-50%, -50%);
+animation: trail 0.5s forwards;
+
+}
+
+/* Tail Effect Animation - Fades and shrinks */
+@keyframes trail {
+
+0% {
+  transform: scale(1) translate(-50%, -50%);
+  opacity: 1;
+}
+100% {
+  transform: scale(0) translate(-50%, -50%);
+  opacity: 0;
+}
+
+}
+
+/* Sample content to make sure scrolling works */
+.content {
+
+height: 200vh; /* Make the page taller to enable scrolling */
+display: flex;
+flex-direction: column;
+align-items: center;
+justify-content: center;
+
+}
+
+
+
+
       @keyframes float {
         0% {
           transform: translateY(0px);
@@ -961,5 +1015,38 @@ <h2 id="modalTitle">Become a Supporter</h2>
         `;
       document.head.appendChild(style);
     </script>
+
+    
+  
+<script>
+  // Create a trailing dot element dynamically
+  function createTrailDot(x, y) {
+    const trailDot = document.createElement('div');
+    trailDot.classList.add('cursor-tail');
+    trailDot.style.left = `${x}px`;
+    trailDot.style.top = `${y}px`;
+    document.body.appendChild(trailDot);
+
+    // Remove the trail dot after the animation completes (0.5s)
+    setTimeout(() => {
+      trailDot.remove();
+    }, 500); // Match the duration of the animation in CSS
+  }
+
+  // Function to move the cursor and generate trailing dots
+  function moveCursor(event) {
+    const x = event.pageX;
+    const y = event.pageY;
+
+    // Create a new trail dot at the cursor position
+    createTrailDot(x, y);
+  }
+
+  // Listen to mousemove event to trigger the cursor and trail
+  document.addEventListener('mousemove', moveCursor);
+</script>
+
+
+
   </body>
 </html>
diff --git a/feedback.html b/feedback.html
index 1f807cb..c8cd517 100644
--- a/feedback.html
+++ b/feedback.html
@@ -9,6 +9,60 @@
   <link rel="stylesheet" href="feedback.css" />
 </head>
 
+<style>
+
+        /* General Body Styling */
+
+        body {
+
+cursor: none; /* Hide the default cursor */
+
+}
+
+/* Cursor Tail Effect - the small dots trailing behind */
+.cursor-tail {
+
+position: absolute;
+width: 11px;  /* Small dot */
+height: 11px;
+background-color: rgba(63, 228, 253, 0.8); /* Neon green tail */
+border-radius: 50%;
+pointer-events: none; /* Ensure the trail doesn't interfere with clicks */
+z-index: 9999;
+transform: translate(-50%, -50%);
+animation: trail 0.5s forwards;
+
+}
+
+/* Tail Effect Animation - Fades and shrinks */
+@keyframes trail {
+
+0% {
+  transform: scale(1) translate(-50%, -50%);
+  opacity: 1;
+}
+100% {
+  transform: scale(0) translate(-50%, -50%);
+  opacity: 0;
+}
+
+}
+
+/* Sample content to make sure scrolling works */
+.content {
+
+height: 200vh; /* Make the page taller to enable scrolling */
+display: flex;
+flex-direction: column;
+align-items: center;
+justify-content: center;
+
+}
+
+
+
+
+</style>
 <body class="space-bg min-h-screen text-white">
 
   <!-- on scroll progress bar -->
@@ -292,6 +346,36 @@
 
 
   </script>
+
+
+<script>
+  // Create a trailing dot element dynamically
+  function createTrailDot(x, y) {
+    const trailDot = document.createElement('div');
+    trailDot.classList.add('cursor-tail');
+    trailDot.style.left = `${x}px`;
+    trailDot.style.top = `${y}px`;
+    document.body.appendChild(trailDot);
+
+    // Remove the trail dot after the animation completes (0.5s)
+    setTimeout(() => {
+      trailDot.remove();
+    }, 500); // Match the duration of the animation in CSS
+  }
+
+  // Function to move the cursor and generate trailing dots
+  function moveCursor(event) {
+    const x = event.pageX;
+    const y = event.pageY;
+
+    // Create a new trail dot at the cursor position
+    createTrailDot(x, y);
+  }
+
+  // Listen to mousemove event to trigger the cursor and trail
+  document.addEventListener('mousemove', moveCursor);
+</script>
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 90e2348..a8e240a 100644
--- a/index.html
+++ b/index.html
@@ -44,6 +44,58 @@
     <audio id="congratsSound" src="congrats.wav"></audio>
 
     <style>
+
+
+    /* General Body Styling */
+
+    body {
+
+      cursor: none; /* Hide the default cursor */
+
+    }
+
+    /* Cursor Tail Effect - the small dots trailing behind */
+    .cursor-tail {
+
+      position: absolute;
+      width: 11px;  /* Small dot */
+      height: 11px;
+      background-color: rgba(63, 228, 253, 0.8); /* Neon green tail */
+      border-radius: 50%;
+      pointer-events: none; /* Ensure the trail doesn't interfere with clicks */
+      z-index: 9999;
+      transform: translate(-50%, -50%);
+      animation: trail 0.5s forwards;
+
+    }
+
+    /* Tail Effect Animation - Fades and shrinks */
+    @keyframes trail {
+
+      0% {
+        transform: scale(1) translate(-50%, -50%);
+        opacity: 1;
+      }
+      100% {
+        transform: scale(0) translate(-50%, -50%);
+        opacity: 0;
+      }
+
+    }
+
+    /* Sample content to make sure scrolling works */
+    .content {
+
+      height: 200vh; /* Make the page taller to enable scrolling */
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+    }
+
+
+    
         body {
 
 
@@ -561,11 +613,10 @@ <h2 class="uppercase">What power-up do you find most helpful?</h2>
 <body>
 
     <nav class="navbar">
-        <!--         <img src="assets/images/logo1-.png" alt="logo" height="80px" class="image"> -->
         <div class="title5">
-
-            <h1 class="site-name">Alien Invasion Defense</h1>
-            <i class="fa-solid fa-paintbrush" style="margin: 25px 0 0 0;"></i>
+            <a href="index.html" class="home">
+       <img src="./assets/images/alien.png" alt="Game Logo" class="logoImage">
+            </a>
         </div>
         <!-- <div class="nav-links">
             <a href="index.html">Home</a>
@@ -580,93 +631,41 @@ <h1 class="site-name">Alien Invasion Defense</h1>
         <div class="toggle-container aos-init aos-animate" data-aos="fade-down">
             <input id="themeToggle" class="toggle" type="checkbox">
         </div> -->
-        <div id="faqbtn">
-            <a href="index.html" class="home">
-                <button class="faq-btn">Home</button>
-            </a>
-        </div>
 
         <div id="faqbtn">
-            <a href="FAQs.html">
-                <button class="faq-btn">FAQs</button>
+            <a href="./donation_page.html">
+                <button class="faq-btn">Donate</button>
             </a>
         </div>
-
-        <button class="feedback-button" onclick="window.location.href='feedback.html'">Feedback</button>
-
-
-
-        <h2 class="primary-btn" id="logoutButton" style="display: none;">
-            <i class="fas fa-sign-out-alt"></i> Logout
-        </h2>
-
         <div id="faqbtn">
-            <a href="welcometestimonials.html">
-                <button class="faq-btn">Testimonials</button>
+            <a href="./share_score.html">
+                <button class="faq-btn">Share Score</button>
             </a>
         </div>
-
         <div id="faqbtn">
             <a href="./Contributors/contributor.html">
                 <button class="faq-btn">Contributors</button>
             </a>
         </div>
-
-
-
-
-        <button class="feedback-button" onclick="window.location.href='donation_page.html'">Donate</button>
-
-        </div>
-
-        <div id="privacybtn">
-            <a href="privacy_policy.html">
-                <button class="priacy">Privacy Policy</button>
-            </a>
-        </div>
         <div id="faqbtn">
             <a href="./login.html">
-        <button class="primary-btn" id="signupButton" window.location.href="/Login and Signup/index.html">
-            Signup/Register
-        </button>
-    </a>
-</div>
-
-        <div class="theme-switch-wrapper">
-            <label class="theme-switch" for="checkbox">
-                <input type="checkbox" id="checkbox">
-                <div class="slider"></div>
-            </label>
-
-            <span id="mode-label">Light Mode</span>
-        </div>
-
-
-
-<!--         <div class="theme-switch-wrapper">
-
-
-        <div id="faqbtn">
-            <a href="./contributors.html">
-                <button class="faq-btn">Contributors</button>
+              <button class="primary-btn" id="signupButton" window.location.href="/Login and Signup/index.html">
+                  Signup
+              </button>
             </a>
         </div>
 
-
-        <!--         <div class="theme-switch-wrapper">
-
+        <div class="theme-switch-wrapper">
             <label class="theme-switch" for="checkbox">
                 <input type="checkbox" id="checkbox">
                 <div class="slider"></div>
             </label>
-            
+
             <span id="mode-label">Light Mode</span>
         </div>
- -->
     </nav>
     <div class="gtranslate_wrapper"></div>
     <div id="gameControls" class="header">
-        <img src="./assets/images/alien.png" alt="Game Logo" class="logoImage">
         <div class="controlGroup">
             <label for="levelSelect" id="difficulty">Select Difficulty:</label>
             <select id="levelSelect">
@@ -687,8 +686,9 @@ <h2 class="primary-btn" id="logoutButton" style="display: none;">
             <button id="restartButton" style="display: none"><i class="fas fa-redo"></i> Play Again </button>
         </div>
 
+
         <div class="theme-switch-wrapper">
-            <label class="theme-switch" for="checkbox">
+            <label class="theme-switch" for="checkbox"> 
                 <input type="checkbox" id="checkbox">
                 <div class="slider"></div>
             </label>
@@ -703,6 +703,7 @@ <h2 class="primary-btn" id="logoutButton" style="display: none;">
             <span id="mode-label">Light Mode</span>
         </div> -->
 
+
     </div>
     <div id="gameContainer">
         <canvas id="gameCanvas"></canvas>
@@ -889,7 +890,23 @@ <h2>Congratulations!</h2>
                     <span id="healthBoostTimer"></span>
                     <span id="speedBoostTimer"></span>
                     <span id="shieldTimer"></span>
+                </div> 
+            </div>
+        
+            <div id="instructions">
+                <div class="theme-switch-wrapper">
+                    <label class="theme-switch" for="checkbox">
+                        <input type="checkbox" id="checkbox">
+                        <div class="slider"></div>
+                    </label>
+                    <span id="mode-label"><button id="">Light mode</button></span>
                 </div>
+                
+                <div id="volumeControl">
+                    <div id="muteControl">
+                        <button id="muteButton" class="styled-button">
+                            <i class="fas fa-volume-up"></i> Music Volume
+                        </button> 
 
                 <div id="instructions">
 
@@ -919,7 +936,7 @@ <h2 class="primary-btn" id="instructionsTitle">Player Instructions</h2>
                         <p><i class="fas fa-plus-circle"></i> Collect Health Boost power-ups</p>
                         <p><i class="fas fa-tachometer-alt"></i> Collect Speed Boost power-ups</p>
                         <p><i class="fas fa-shield-alt"></i> Collect Shield power-ups</p>
-                        <p><i class="fas fa-shield-alt"></i><a href="./rules.html">explore more</a></p>
+                        <p><i class="fas fa-shield-alt"></i><a href="./rules.html">explore more</a></p> 
                     </div>
                 </div>
 
@@ -1325,7 +1342,49 @@ <h2 class="primary-btn" id="logoutButton" style="display: none;">
         </script>
         <script src="scripts.js"></script> <!-- Link to your service worker registration script -->
 
+  
+        
+          <script>
+            // Create a trailing dot element dynamically
+            function createTrailDot(x, y) {
+              const trailDot = document.createElement('div');
+              trailDot.classList.add('cursor-tail');
+              trailDot.style.left = `${x}px`;
+              trailDot.style.top = `${y}px`;
+              document.body.appendChild(trailDot);
+        
+              // Remove the trail dot after the animation completes (0.5s)
+              setTimeout(() => {
+                trailDot.remove();
+              }, 500); // Match the duration of the animation in CSS
+            }
+        
+            // Function to move the cursor and generate trailing dots
+            function moveCursor(event) {
+              const x = event.pageX;
+              const y = event.pageY;
+        
+              // Create a new trail dot at the cursor position
+              createTrailDot(x, y);
+            }
+        
+            // Listen to mousemove event to trigger the cursor and trail
+            document.addEventListener('mousemove', moveCursor);
+          </script>
 </body>
+<footer class="footer">
+    <div class="footer-links">
+        <a href="FAQs.html">FAQs</a>
+        <a href="privacy_policy.html">Privacy Policy</a>
+        <a href="feedback.html">Feedback</a>
+        <a href="welcometestimonials.html">Testimonials</a>
+        <a href="./Contributors/contributor.html">Contributors</a>
+    </div>
+    <div class="footer-note">
+        &copy; 2024 Alien Invasion Defense. All rights reserved.
+    </div>
+</footer>
+
 
 <script>
     function toggleSidebar() {
@@ -1334,4 +1393,4 @@ <h2 class="primary-btn" id="logoutButton" style="display: none;">
     }
 </script>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/login.css b/login.css
index 9376241..7655ae5 100644
--- a/login.css
+++ b/login.css
@@ -442,4 +442,45 @@ form.sign-in-form {
   pointer-events: none;
   z-index: 99999999;
   /* Stays on top of all elements */
-}
\ No newline at end of file
+}
+
+
+
+      /* General Body Styling */
+
+      body {
+
+cursor: none; /* Hide the default cursor */
+
+}
+
+/* Cursor Tail Effect - the small dots trailing behind */
+.cursor-tail {
+
+position: absolute;
+width: 11px;  /* Small dot */
+height: 11px;
+background-color: rgba(63, 228, 253, 0.8); /* Neon green tail */
+border-radius: 50%;
+pointer-events: none; /* Ensure the trail doesn't interfere with clicks */
+z-index: 9999;
+transform: translate(-50%, -50%);
+animation: trail 0.5s forwards;
+
+}
+
+/* Tail Effect Animation - Fades and shrinks */
+@keyframes trail {
+
+0% {
+  transform: scale(1) translate(-50%, -50%);
+  opacity: 1;
+}
+100% {
+  transform: scale(0) translate(-50%, -50%);
+  opacity: 0;
+}
+
+}
+
+
diff --git a/login.html b/login.html
index 5d18ffb..5b9bc3c 100644
--- a/login.html
+++ b/login.html
@@ -27,27 +27,7 @@
       </div>
     </div>
   </div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
+  
   <div class="container">
     <div class="forms-container">
       <div class="signin-signup">
@@ -452,6 +432,39 @@ <h3>One of us ?</h3>
   </script>
   <script src="https://apis.google.com/js/platform.js" async defer></script>
   <!-- <script src="Firebase.js" type="module"></script> -->
+
+
+    
+  
+<script>
+  // Create a trailing dot element dynamically
+  function createTrailDot(x, y) {
+    const trailDot = document.createElement('div');
+    trailDot.classList.add('cursor-tail');
+    trailDot.style.left = `${x}px`;
+    trailDot.style.top = `${y}px`;
+    document.body.appendChild(trailDot);
+
+    // Remove the trail dot after the animation completes (0.5s)
+    setTimeout(() => {
+      trailDot.remove();
+    }, 500); // Match the duration of the animation in CSS
+  }
+
+  // Function to move the cursor and generate trailing dots
+  function moveCursor(event) {
+    const x = event.pageX;
+    const y = event.pageY;
+
+    // Create a new trail dot at the cursor position
+    createTrailDot(x, y);
+  }
+
+  // Listen to mousemove event to trigger the cursor and trail
+  document.addEventListener('mousemove', moveCursor);
+</script>
+
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/privacy_policy.html b/privacy_policy.html
index 8589b45..d1d8c15 100644
--- a/privacy_policy.html
+++ b/privacy_policy.html
@@ -8,6 +8,59 @@
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
   <style>
+
+    
+
+      /* General Body Styling */
+
+      body {
+
+cursor: none; /* Hide the default cursor */
+
+}
+
+/* Cursor Tail Effect - the small dots trailing behind */
+.cursor-tail {
+
+position: absolute;
+width: 11px;  /* Small dot */
+height: 11px;
+background-color: rgba(63, 228, 253, 0.8); /* Neon green tail */
+border-radius: 50%;
+pointer-events: none; /* Ensure the trail doesn't interfere with clicks */
+z-index: 9999;
+transform: translate(-50%, -50%);
+animation: trail 0.5s forwards;
+
+}
+
+/* Tail Effect Animation - Fades and shrinks */
+@keyframes trail {
+
+0% {
+  transform: scale(1) translate(-50%, -50%);
+  opacity: 1;
+}
+100% {
+  transform: scale(0) translate(-50%, -50%);
+  opacity: 0;
+}
+
+}
+
+/* Sample content to make sure scrolling works */
+.content {
+
+height: 200vh; /* Make the page taller to enable scrolling */
+display: flex;
+flex-direction: column;
+align-items: center;
+justify-content: center;
+
+}
+
+
+
     body {
       font-family: 'Roboto', sans-serif;
       line-height: 1.6;
@@ -15,6 +68,34 @@
       padding: 20px;
       color: #333;
     }
+    .back-home {
+      position: fixed;
+      top: 20px;
+      left: 20px;
+      z-index: 1000;
+    }
+
+    .back-home a {
+      display: flex;
+      align-items: center;
+      padding: 12px 24px;
+      background: rgba(0, 0, 0, 0.7);
+      color: white;
+      text-decoration: none;
+      border-radius: 30px;
+      font-size: 1.1rem;
+      transition: all 0.3s ease;
+      backdrop-filter: blur(5px);
+    }
+
+    .back-home a:hover {
+      background: rgba(0, 0, 0, 0.9);
+      transform: scale(1.05);
+    }
+
+    .back-home i {
+      margin-right: 8px;
+    }
 
     h1,
     h2,
@@ -105,36 +186,6 @@
     <div class="progress-bar" id="progress-bar-prvp"></div>
   </div>
 
-
-  <div class="home-nav">
-    <a href="/"><i class="fa-solid fa-arrow-left-long"></i>&nbsp; Return to Home</a>
-    <style>
-      .home-nav a {
-        text-decoration: none;
-        height: 50px;
-        width: 250px;
-        color: white;
-        font-size: 1.25rem;
-        position: absolute;
-        top: 35px;
-        left: 40px;
-        background-color: rgba(0, 0, 0, 0.6);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border-radius: 30px;
-        transition: all 0.4s ease;
-      }
-
-      .home-nav a:hover {
-        transform: scale(1.02);
-        background-color: #000;
-        color: white;
-      }
-    </style>
-  </div>
-
-
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -142,7 +193,12 @@
     <link rel="stylesheet" href="privacy.css" />
     <!-- Link to your CSS file -->
   </head>
-
+  <div class="back-home">
+    <a href="index.html">
+      <i class="fas fa-chevron-left"></i>
+      Back to Home
+    </a>
+  </div>
   <body>
     <header>
       <h1>Privacy Policy</h1>
@@ -334,6 +390,39 @@ <h2>6. Contact Us</h2>
       </div>
       <!-- Copyright -->
     </footer>
+
+    
+  
+<script>
+  // Create a trailing dot element dynamically
+  function createTrailDot(x, y) {
+    const trailDot = document.createElement('div');
+    trailDot.classList.add('cursor-tail');
+    trailDot.style.left = `${x}px`;
+    trailDot.style.top = `${y}px`;
+    document.body.appendChild(trailDot);
+
+    // Remove the trail dot after the animation completes (0.5s)
+    setTimeout(() => {
+      trailDot.remove();
+    }, 500); // Match the duration of the animation in CSS
+  }
+
+  // Function to move the cursor and generate trailing dots
+  function moveCursor(event) {
+    const x = event.pageX;
+    const y = event.pageY;
+
+    // Create a new trail dot at the cursor position
+    createTrailDot(x, y);
+  }
+
+  // Listen to mousemove event to trigger the cursor and trail
+  document.addEventListener('mousemove', moveCursor);
+</script>
+
+
+
   </body>
   <script>
 
diff --git a/welcometestimonials.html b/welcometestimonials.html
index c481485..96d0b9d 100644
--- a/welcometestimonials.html
+++ b/welcometestimonials.html
@@ -11,6 +11,59 @@
         crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
     <style>
+
+
+      /* General Body Styling */
+
+      body {
+
+cursor: none; /* Hide the default cursor */
+
+}
+
+/* Cursor Tail Effect - the small dots trailing behind */
+.cursor-tail {
+
+position: absolute;
+width: 11px;  /* Small dot */
+height: 11px;
+background-color: rgba(63, 228, 253, 0.8); /* Neon green tail */
+border-radius: 50%;
+pointer-events: none; /* Ensure the trail doesn't interfere with clicks */
+z-index: 9999;
+transform: translate(-50%, -50%);
+animation: trail 0.5s forwards;
+
+}
+
+/* Tail Effect Animation - Fades and shrinks */
+@keyframes trail {
+
+0% {
+  transform: scale(1) translate(-50%, -50%);
+  opacity: 1;
+}
+100% {
+  transform: scale(0) translate(-50%, -50%);
+  opacity: 0;
+}
+
+}
+
+/* Sample content to make sure scrolling works */
+.content {
+
+height: 200vh; /* Make the page taller to enable scrolling */
+display: flex;
+flex-direction: column;
+align-items: center;
+justify-content: center;
+
+}
+
+
+
+
         body {
             margin: 0;
             overflow: hidden;
@@ -108,19 +161,8 @@
             outline: none;
         }
 
-        /* Circle styles */
-        .circle {
-            height: 24px;
-            width: 24px;
-            border-radius: 50%;
-            background-color: black;
-            position: fixed;
-            top: 0;
-            left: 0;
-            pointer-events: none;
-            z-index: 99999999;
-            transition: transform 0.1s ease-out;
-        }
+        
+    
         .counter-container {
         position: absolute;
         bottom: 30px;
@@ -309,6 +351,39 @@ <h1 class="welcome-title">Welcome to Alien-Invasion-Defense Testimonials</h1>
 
         animateCircles();
     </script>
+
+
+
+<script>
+    // Create a trailing dot element dynamically
+    function createTrailDot(x, y) {
+      const trailDot = document.createElement('div');
+      trailDot.classList.add('cursor-tail');
+      trailDot.style.left = `${x}px`;
+      trailDot.style.top = `${y}px`;
+      document.body.appendChild(trailDot);
+  
+      // Remove the trail dot after the animation completes (0.5s)
+      setTimeout(() => {
+        trailDot.remove();
+      }, 500); // Match the duration of the animation in CSS
+    }
+  
+    // Function to move the cursor and generate trailing dots
+    function moveCursor(event) {
+      const x = event.pageX;
+      const y = event.pageY;
+  
+      // Create a new trail dot at the cursor position
+      createTrailDot(x, y);
+    }
+  
+    // Listen to mousemove event to trigger the cursor and trail
+    document.addEventListener('mousemove', moveCursor);
+  </script>
+
+
+
 </body>
 
 </html>