diff --git a/auth.html b/auth.html
index 658514d9..0c567ccc 100644
--- a/auth.html
+++ b/auth.html
@@ -38,7 +38,11 @@ <h2 class="title">Sign in</h2>
               <i class="fas fa-lock"></i>
               <input type="password" placeholder="Password" id="sign-in-password" />
               <i class="fas fa-eye password-toggle" onclick="togglePassword('sign-in-password', this)"></i>
-            </div>           
+            </div>
+            <div class="form-check d-flex">
+              <input type="checkbox" class="form-check-input" id="login-remember" />
+              <label class="form-check-label">Remember me</label>
+            </div>
             <div class="login">
               <input type="submit" value="Login" class="btn solid" />
             </div>
@@ -81,12 +85,15 @@ <h2 class="title">Sign up</h2>
   </div>
 
   <!-- Password Strength Bars -->
-  <div class="password-strength">
+  <!-- <div class="password-strength">
     <div id="strength-weak"></div>
     <div id="strength-medium"></div>
     <div id="strength-strong"></div>
+  </div> -->
+  <div class="form-check d-flex">
+    <input type="checkbox" class="form-check-input" id="login-remember" />
+    <label class="form-check-label">Remember me</label>
   </div>
-
   <input type="submit" class="btn" value="Sign up" />
 </form>
 <p id="error-message" style="color: red; display: none;"></p>
diff --git a/auth.js b/auth.js
index 98b9d2f1..4daadc92 100644
--- a/auth.js
+++ b/auth.js
@@ -136,6 +136,20 @@ document.querySelector(".sign-up-form").addEventListener('submit', function(even
     console.error('Signup error:', error);
   }
 });
+document.querySelector('#login-btn').addEventListener('click', (event) => {
+  event.preventDefault();
+  
+  const emailInput = document.getElementById('login-email');
+  const rememberMeCheckbox = document.getElementById('login-remember');
+
+  if (rememberMeCheckbox.checked) {
+    localStorage.setItem('rememberedEmail', emailInput.value);
+  } else {
+    localStorage.removeItem('rememberedEmail');
+  }
+
+  // Continue with your existing login logic...
+});
 
 // Toggle password visibility
 function togglePassword(fieldId, icon) {
diff --git a/index.html b/index.html
index d01aba38..c274f7c1 100644
--- a/index.html
+++ b/index.html
@@ -322,55 +322,16 @@
 
     /* circle styles */
     .circle {
-      height: 24px;
-      width: 24px;
-      border-radius: 24px;
-      background-color: rgb(255, 0, 0);
-      position: fixed;
-      top: 0;
-      left: 0;
-      pointer-events: none;
-      z-index: 99999999;
-  </style>
-  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
-  <script>
-    (function () {
-      const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-      const savedTheme = localStorage.getItem('theme');
-      if (savedTheme) {
-        document.body.classList.add(savedTheme === 'dark' ? 'dark-mode' : 'light-mode');
-      } else if (userPrefersDark) {
-        document.body.classList.add('dark-mode');
-      } else {
-        document.body.classList.add('light-mode');
-      }
-    })();
-  </script>
-</head>
-<body class="light-mode">
-  <!-- Preloader -->
-  <div id="preloader">
-    <div class="loader-wrapper">
-      <img src="img/logo.png" alt="Travel Website Logo" id="logo">
-      <div class="loader-globe"></div>
-    </div>
-    <div id="loading-text">Ready to Explore the World...</div>
-  </div>
-  <style>
-    /* Preloader Container */
-    #preloader {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-      background-color: rgba(0, 0, 0, 0.9);
-      z-index: 1000;
-    }
+     height: 24px;
+     width: 24px;
+     border-radius: 24px;
+     background-color: rgb(255, 0, 0);
+     position: fixed;
+     top: 0;
+     left: 0;
+     pointer-events: none;
+     z-index: 99999999;
+    }   
 
     /* Wrapper for the logo and loader */
     .loader-wrapper {
@@ -3852,21 +3813,16 @@ <h2>Exclusive Deals and Offers!</h2>
 
       document.getElementById("progressBar").style.width = scrollPercent + "%";
     }
-
-  </script>
-  <style>
-    .popup {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-color: rgba(24, 23, 24, 0.5);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      z-index: 1000;
-    }
+  .custom-alert p {
+/*     white color text on black background will look nice */
+    color:white;
+    margin: 0;
+    line-height: 1.5;
+  }
+    </style>
+  <script src="script.js">
+document.getElementById('newsletter-form').addEventListener('submit', function (e) {
+    e.preventDefault(); // Prevent the default form submission
 
     .popup-content {
       background-color: white;
@@ -3926,55 +3882,8 @@ <h2>Exclusive Deals and Offers!</h2>
   <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>
 
-
-  <script>
-    main
-    // coordinates for the cursor :
-    const coords = { x: 0, y: 0 };
-    const circles = document.querySelectorAll(".circle");
-
-    const colors = [
-      "#fc5720", "#fc6532", "#fc6532", "#fd8b65", "#d5585c", "#fac3b1", "#f4d5cb", "#fefefe", "#fefefe", "#cdf2c5", "#b2eca5", "#95e283", "#7dda68", "#4adc2d", "#69d451", "#54c939", "#34b916", "#28b309", "#1e9c02",
-    ];
-
-    circles.forEach(function (circle, index) {
-      circle.x = 0;
-      circle.y = 0;
-      circle.style.backgroundColor = colors[index % colors.length];
-    });
-
-    // update the coordinates when the mouse moves:
-    window.addEventListener("mousemove", function (e) {
-      coords.x = e.clientX;
-      coords.y = e.clientY;
-    });
-
-    // animation function to move the circles:
-    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();
-
-    document.addEventListener("DOMContentLoaded", function () {
+    <script>
+      // coordinates for the cursor :
       const coords = { x: 0, y: 0 };
       const circles = document.querySelectorAll(".circle");
 
@@ -4010,10 +3919,9 @@ <h2>Exclusive Deals and Offers!</h2>
 
       animateCircles();
     });
-
-    main
-  </script>
-
+        animateCircles();
+      });
+    </script>
   <body>
     <div class="container">
       <!-- Your existing content -->
@@ -4206,6 +4114,5 @@ <h2>Exclusive Deals and Offers!</h2>
     <script src="visi.js"></script>
     <script src="script.js"></script>
 
-  </body>
-
+</body>
 </html>
