diff --git a/blog.css b/blog.css
new file mode 100644
index 0000000..e6ca269
--- /dev/null
+++ b/blog.css
@@ -0,0 +1,423 @@
+/* Shadow Effect on Image */
+.thumbnail {
+    display: inline-block;
+    border-radius: 12px; /* Increased border radius for a smoother look */
+    overflow: hidden; /* Ensures the shadow stays within rounded corners */
+  }
+  
+  .thumbnail-img {
+    width: 100%;
+    height: auto;
+    border-radius: 12px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 4px 15px rgba(0, 0, 0, 0.3); /* Layered shadow for more depth */
+    transition: box-shadow 0.4s ease; /* Smooth transition for hover */
+  }
+  
+  /* Hover Effect */
+  .thumbnail-img:hover {
+    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.4); /* Stronger shadow on hover */
+  }
+  
+ /* Color variables for light and dark themes */
+ :root {
+  --card-bg-color-light: #f5efe4; /* Light mode card background (cream) */
+  --card-bg-color-dark: #2a2a2a; /* Dark mode card background */
+  --text-color-light: #333333; /* Dark text for light mode */
+  --text-color-dark: #e0e0e0; /* Light text for dark mode */
+  --shadow-light: rgba(0, 0, 0, 0.2); /* Soft shadow for light mode */
+  --shadow-dark: rgba(0, 0, 0, 0.7); /* Stronger shadow for dark mode */
+  --highlight-color-light: #f9b0b0; /* Light mode highlight color */
+  --highlight-color-dark: #f9b0b0; /* Dark mode highlight color */
+  --tag-bg-color-light: #fff; /* Light mode tag background */
+  --tag-bg-color-dark: #333; /* Dark mode tag background */
+  --post-navigation-bg-light: #f5efe4; /* Light mode background for post navigation */
+  --post-navigation-bg-dark: #2a2a2a; /* Dark mode background for post navigation */
+  --post-bg-light: #ffffff; /* Light mode post card background */
+  --post-bg-dark: #3b3b3b; /* Dark mode post card background */
+  --post-hover-bg-light: #e6e6e6; /* Light mode post card hover background */
+  --post-hover-bg-dark: #2c2c2c; /* Dark mode post card hover background */
+  --post-shadow-light: rgba(0, 0, 0, 0.2); /* Light mode shadow */
+  --post-shadow-dark: rgba(0, 0, 0, 0.5); /* Dark mode shadow */
+  --post-hover-shadow-light: rgba(0, 0, 0, 0.3); /* Light mode hover shadow */
+  --post-hover-shadow-dark: rgba(0, 0, 0, 0.7); /* Dark mode hover shadow */
+  --border-radius: 10px; /* Consistent border radius for both modes */
+}
+
+/* Card container styles */
+.content-container {
+  padding: 20px;
+  border-radius: 10px;
+  transition: all 0.3s ease; /* Smooth transition */
+}
+
+/* Light mode card background, shadow, and text color */
+[data-theme="light"] .content-container {
+  background-color: var(--card-bg-color-light);
+  box-shadow: 0 4px 15px var(--shadow-light); /* Softer shadow for light mode */
+  color: var(--text-color-light); /* Black text for readability */
+}
+
+/* Dark mode card background, shadow, and text color */
+[data-theme="dark"] .content-container {
+  background-color: var(--card-bg-color-dark);
+  box-shadow: 0 4px 15px var(--shadow-dark); /* Strong shadow for dark mode */
+  color: var(--text-color-dark); /* White text for readability */
+}
+
+/* Secondary title styling */
+.secondary-title {
+  color: inherit; /* Inherit text color from parent */
+  font-size: 2rem;
+  font-weight: 700;
+  text-align: center;
+  margin-bottom: 15px;
+  padding: 10px; /* Optional: Add padding for better appearance */
+}
+
+/* Paragraph text adjustments */
+.content p {
+  font-size: 1.1rem;
+  line-height: 1.6; /* Improved line spacing */
+  margin: 10px 0; /* Consistent spacing between paragraphs */
+  color: inherit; /* Inherit text color for light and dark mode */
+}
+
+  
+ /* Container Styling */
+.post-footer-container {
+  background-color: var(--card-bg-color-dark); /* Default to dark mode background */
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px var(--shadow-dark);
+}
+
+[data-theme="light"] .post-footer-container {
+  background-color: var(--card-bg-color-light); /* Light mode background */
+  box-shadow: 0 4px 12px var(--shadow-light);
+}
+
+/* Tags Styling */
+.tag-link {
+  background-color: var(--tag-bg-color-dark); /* Default dark background */
+  color: var(--highlight-color-dark); /* Set text color to match social icons */
+  margin: 5px;
+  padding: 8px 15px;
+  border-radius: 20px;
+  font-weight: 500;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+/* Hover effect for tags */
+.tag-link:hover {
+  background-color: var(--highlight-color-dark);
+  color: #333;
+}
+
+[data-theme="light"] .tag-link {
+  background-color: var(--tag-bg-color-light); /* Light mode tag background */
+  color: var(--highlight-color-light); /* Light mode text color */
+}
+
+[data-theme="light"] .tag-link:hover {
+  background-color: var(--highlight-color-light);
+  color: #333;
+}
+
+/* Author Section Styling */
+.author-name {
+  font-size: 20px;
+  color: var(--highlight-color-dark); /* Color matches social icons */
+  margin: 10px 0 5px;
+}
+
+[data-theme="light"] .author-name {
+  color: var(--highlight-color-light); /* Light mode author name color */
+}
+
+.author-bio {
+  font-size: 14px;
+  color: #ddd;
+  margin-bottom: 10px;
+}
+
+/* Social Media Links */
+.social-links .social-icon {
+  color: var(--highlight-color-dark); /* Matches the tag and author text color */
+  font-size: 18px;
+  margin: 0 8px;
+  padding: 8px;
+  border-radius: 50%;
+  background-color: #333;
+  transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+.social-links .social-icon:hover {
+  background-color: var(--highlight-color-dark);
+  color: #333;
+  transform: scale(1.1);
+}
+
+/* Container Styling */
+.post-footer-container {
+  background-color: #1e1e1e;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+
+/* Post Footer Styling */
+.post-footer {
+  margin-bottom: 3rem;
+}
+
+/* Author Avatar Styling */
+.author-avatar {
+  width: 100px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.author-avatar img {
+  width: 100%; /* Makes the image responsive */
+  height: auto; /* Maintains aspect ratio */
+  border-radius: 50%; /* Keeps it circular */
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Retains shadow effect */
+}
+
+/* Social Links Styling */
+.social-links .social-icon {
+  color: var(--highlight-color-dark); /* Matches the color for text */
+}
+
+[data-theme="light"] .social-links .social-icon {
+  color: var(--highlight-color-light);
+}
+ 
+  
+  /* Navigation Label */
+  .nav-label {
+    padding: 15px;
+    color: #f9b0b0; /* Light color for links */
+    font-weight: bold;
+    text-align: center; /* Center-align label text */
+  }
+  
+  /* Navigation Link */
+  .nav-link {
+    color: inherit;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    justify-content: center; /* Center align for the entire link */
+    transition: color 0.3s ease;
+    font-size: 1.2rem; /* Increased font size for better readability */
+  }
+  
+  .nav-link:hover {
+    color: #f9b0b0; /* Hover color change */
+  }
+  
+  /* Post Article */
+  .post-article {
+    display: flex;
+    flex-direction: column; /* Stack image and content */
+    flex: 1; /* Ensure equal height for content */
+  }
+  
+  /* Post Image */
+  .post-image img {
+    width: 100%;
+    height: auto;
+    border-bottom: 4px solid #f9b0b0; /* Bottom border for image */
+    transition: transform 0.3s ease; /* Smooth scale on hover */
+  }
+  
+  .post-image img:hover {
+    transform: scale(1.05); /* Slight scale effect on hover */
+  }
+  
+  /* Post Content */
+  .post-content {
+    padding: 15px;
+    flex-grow: 1; /* Allow content to fill available space */
+  }
+  
+  /* Post Category */
+  .post-category {
+    margin-bottom: 10px;
+    text-align: center; /* Center the category */
+  }
+  
+  .category-link {
+    background-color: #555; /* Category background */
+    color: #f9b0b0;
+    padding: 8px 12px; /* More padding for better touch area */
+    border-radius: 20px;
+    text-decoration: none;
+    font-size: 14px;
+    transition: background-color 0.3s ease, color 0.3s ease; /* Added transition */
+  }
+  
+  .category-link:hover {
+    background-color: #f9b0b0; /* Change category background on hover */
+    color: #333; /* Change text color on hover */
+  }
+  
+  /* Post Title */
+  .post-title {
+    font-size: 1.4rem; /* Increased font size for titles */
+    color: #ffffff; /* White text for contrast */
+    text-decoration: none;
+    transition: color 0.3s ease;
+  }
+  
+  .post-title:hover {
+    color: #f9b0b0; /* Change title color on hover */
+    text-decoration: underline; /* Underline on hover for emphasis */
+  }
+  
+  /* Section Title */
+.section-title {
+    text-align: center;
+    color: #f9b0b0; /* Light color for contrast */
+    font-size: 2rem; /* Larger font size for title */
+    margin-bottom: 20px;
+    transition: color 0.3s ease, text-shadow 0.3s ease; /* Smooth transitions */
+  }
+  
+  .section-title:hover {
+    color: #ea5541; /* Change to pink on hover */
+    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Subtle shadow effect */
+  }
+  /* Categories Section */
+.categories {
+    background-color: #2a2a2a; /* Dark background */
+    padding: 30px; /* Padding for spacing */
+    border-radius: 10px; /* Rounded corners */
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Subtle shadow */
+    margin: 30px 0; /* Margin to separate from other sections */
+  }
+  
+  /* Category Heading */
+  .category-heading {
+    text-align: center;
+    color: #f9b0b0; /* Light color for contrast */
+    font-size: 2rem; /* Larger font size for heading */
+    margin-bottom: 20px; /* Space below heading */
+    transition: color 0.3s ease; /* Smooth color transition */
+  }
+  
+  /* Category Item */
+  .category-list {
+    display: flex;
+    flex-direction: column; /* Stack items vertically */
+  }
+  
+  .category-item {
+    margin-bottom: 15px; /* Space between items */
+  }
+  
+  .category-link {
+    display: block;
+    background-color: #3b3b3b; /* Dark background for links */
+    padding: 15px; /* Padding for clickable area */
+    border-radius: 5px; /* Rounded corners */
+    text-decoration: none; /* Remove underline */
+    color: #ffffff; /* White text for contrast */
+    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transitions */
+  }
+  
+  .category-link:hover {
+    background-color: #ea5541; /* Pink background on hover */
+    transform: translateY(-2px); /* Slight lift on hover */
+  }
+  
+  .category-link span {
+    font-size: 1.2rem; /* Slightly larger font size for text */
+  }
+  
+  
+.d-flex-gap {
+  display: flex;
+  gap: 15px; /* Space between buttons */
+  flex-wrap: wrap; /* Wrap items to the next line if necessary */
+  justify-content: center; /* Center the buttons horizontally */
+}.d-flex-gap a {
+  transition: all 0.2s ease;
+  font-weight: 600;
+  color: var(--text-color);
+}
+
+.d-flex-gap a i {
+  font-size: 24px;
+  
+}.d-flex-gap {
+  margin: 10px 15px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  
+   /* justify-content: space-around; */
+}
+
+.footer-title {
+  text-align: center;
+}
+
+/* Center-align the icon container and set gap between icons */
+#contact .d-flex-gap {
+  display: flex;
+  justify-content: center;
+  gap: 1px; /* Adjust the spacing between icons */
+  flex-wrap: wrap;
+}
+
+/* Style each social icon button */
+#contact .nav-link {
+  width: 50px; /* Ensure all icons are the same size */
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%; /* Make them circular */
+  font-size: 20px; /* Adjust icon size */
+  padding: 0;
+}
+
+footer .secondary-title.text-secondary.display-3 {
+  font-size: 0.875rem; /* Reduced font size */
+}
+
+/* Decrease the font size of the date paragraphs */
+footer .secondary-title.text-secondary {
+  font-size: 0.875rem; /* Reduced font size */
+}
+footer .secondary-title.text-secondary {
+  font-size: 0.875rem; /* Reduced font size */
+  font-weight: normal; /* Ensure text is not bold */
+}
+
+footer .footer-title.secondary-title {
+  font-size: 1.75rem; /* Adjust the size as needed */
+}
+
+
+
+
+
+
+
+
+.feature-post .flex-item .article .text-title {
+  margin-bottom: 5px; /* Adjust this value to decrease spacing between title and date */
+}
+
+.feature-post .flex-item .article .secondary-title {
+  margin-top: 2px; /* Adjust this value to decrease spacing between date and the content */
+}
+.feature-post .flex-item {
+  margin-bottom: 10px; /* Adjust this to decrease the space between posts */
+}
diff --git a/blog.html b/blog.html
index 64a8c70..889bbd9 100644
--- a/blog.html
+++ b/blog.html
@@ -20,9 +20,7 @@
   <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> -->
   <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="Scroll_and_progressbar.css">
-
-
-
+  <link rel="stylesheet" href="blog.css">
 
 </head>
 
@@ -61,244 +59,271 @@ <h2>WordWise</h2>
 
         <div class="dropdown">
           <!-- Profile Icon -->
-
+  
           <a href="javascript:void(0);" class="profile-link profile-icon" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
               <i class="fas fa-user-circle"></i>
+  
           </a>
-      
-
+  
           <!-- Dropdown Menu -->
           <ul class="dropdown-menu" id="profileMenu" style="display: none; position: absolute; z-index: 1;">
-              <li><a href="./profile.html">My Profile</a></li>
+            
               <li><a href="#login" onclick="openForm('login')">Login</a></li>
               <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
           </ul>
       </div>
-
       <script>
-          // Function to toggle the visibility of the dropdown menu
-          function toggleMenu() {
-              const menu = document.getElementById('profileMenu');
-              menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
-          }
-
-          // Close the dropdown if the user clicks outside of it
-          window.onclick = function(event) {
-              const menu = document.getElementById('profileMenu');
-              if (!event.target.matches('.profile-link img') && menu.style.display === 'block') {
-                  menu.style.display = 'none';
-              }
-          }
-      
-          // Update the profile image in the dropdown menu based on the selected avatar stored in localStorage
-          document.addEventListener("DOMContentLoaded", function() {
-              // Retrieve the saved avatar from localStorage
-              const savedAvatar = localStorage.getItem("selectedAvatar");
-      
-              // If an avatar is saved, update the profile image
-              if (savedAvatar) {
-                  const dropdownProfileImage = document.getElementById("dropdownProfileImage");
-                  if (dropdownProfileImage) {
-                      dropdownProfileImage.src = savedAvatar;  // Update the image source
-                  }
-              }
-          });
-      </script>
-
-
-
-
-        <!--  Login Form -->
-        <div class="form-popup" id="loginForm">
-          <form class="form-container" onsubmit="return validateLoginForm()" style="max-width: 400px; margin: auto;">
-            <span class="close-icon" onclick="closeForm('login')">&times;</span>
-            <h2 class="text-center">Login</h2>
-            <div class="form-group">
-              <label for="loginEmail"><b>Email</b></label>
-              <input type="email" class="form-control" id="loginEmail" placeholder="Enter Email" name="email" required>
-            </div>
-            <div class="form-group position-relative">
-              <label for="loginPsw"><b>Password</b></label>
-              <input type="password" class="form-control" id="loginPsw" placeholder="Enter Password" name="psw" required
-                minlength="6">
-              <i class="bi bi-eye eye-icon" id="toggleLoginPassword"
-                onclick="togglePasswordVisibility('loginPsw', 'toggleLoginPassword')"></i>
-            </div>
-            <div class="forgot">
-              <a href="javascript:void(0);" onclick="openForgotPassword()">Forgot Password?</a>
-            </div>
-            <button type="submit" class="btn btn-primary w-100 mb-3">LOGIN</button>
-            <!-- Google Sign-In Button -->
-            <button type="button" class="btn google-btn" onclick="handleGoogleLogin()">
-              <img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
-              Sign in with Google
-            </button>
-          </form>
-        </div>
-
-        <!-- Signup Form -->
-        <div class="form-popup" id="signupForm">
-          <form class="form-container" onsubmit="return validateSignupForm()" style="max-width: 400px; margin: auto;">
-            <span class="close-icon" onclick="closeForm('signup')">&times;</span>
-            <h2 class="text-center">Signup</h2>
-            <div class="form-group">
-              <label for="name"><b>Full Name</b></label>
-              <input type="text" class="form-control" id="name" placeholder="Enter Full Name" name="name" required
-                pattern="[a-zA-Z ]+" oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')"
-                oninput="this.setCustomValidity('')">
-            </div>
-            <div class="form-group">
-              <label for="signupEmail"><b>Email</b></label>
-              <input type="email" class="form-control" id="signupEmail" placeholder="Enter Email" name="email" required>
-            </div>
-            <div class="form-group position-relative">
-              <label for="signupPsw"><b>Password</b></label>
-              <input type="password" id="signupPsw" placeholder="Enter Password" name="psw" required minlength="6"
-                oninput="checkPasswordStrength()">
-              <i class="bi bi-eye eye-icon" id="toggleSignupPassword"
-                onclick="togglePasswordVisibility('signupPsw', 'toggleSignupPassword')"></i>
-              <div id="passwordStrength" class="strength-meter"></div>
-            </div>
-
-            <div class="form-group position-relative">
-              <label for="confirmPsw"><b>Confirm Password</b></label>
-              <input type="password" class="form-control" id="confirmPsw" placeholder="Confirm Password"
-                name="confirmPsw" required minlength="6">
-              <i class="bi bi-eye eye-icon" id="toggleConfirmPassword"
-                onclick="togglePasswordVisibility('confirmPsw', 'toggleConfirmPassword')"></i>
-            </div>
-            <button type="submit" class="btn btn-primary w-100 mb-3">SIGNUP</button>
-            <!-- Google Sign-In Button -->
-            <button type="button" class="btn google-btn" onclick="handleGoogleLogin()">
-              <img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
-              Sign in with Google</button>
-          </form>
-        </div>
-
-        <!-- Forgot Password Modal -->
-        <div id="forgot-password-modal" class="modal">
-          <div class="form-container modal-content">
-            <h2>Forgot Password</h2>
-            <p>Please enter your email address to reset your password.</p>
-
-            <label for="email">Email Address</label>
-            <input type="email" id="email" placeholder="Enter your email" required />
-
-            <button class="btn" onclick="submitForgotPassword()">Submit</button>
-            <button class="btn cancel" onclick="closeForgotPasswordModal()">Cancel</button>
-          </div>
-        </div>
-
-        <!-- Toggle Password Visibility Script -->
-        <script>
-          function togglePasswordVisibility(passwordFieldId, iconId) {
-            const passwordField = document.getElementById(passwordFieldId);
-            const togglePassword = document.getElementById(iconId);
-            if (passwordField.type === 'password') {
-              passwordField.type = 'text';
-              togglePassword.classList.remove('bi-eye');
-              togglePassword.classList.add('bi-eye-slash');
-            } else {
-              passwordField.type = 'password';
-              togglePassword.classList.remove('bi-eye-slash');
-              togglePassword.classList.add('bi-eye');
+        function toggleMenu() {
+            const menu = document.getElementById('profileMenu');
+            menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
+        }
+    
+        // Close the dropdown if the user clicks outside of it
+        window.onclick = function(event) {
+            const menu = document.getElementById('profileMenu');
+            if (!event.target.matches('.profile-link img') && menu.style.display === 'block') {
+                menu.style.display = 'none';
             }
-          }
-        </script>
-
-        <!-- Updated CSS Styles -->
-        <style>
-          .form-popup {
-            display: none;
-            position: fixed;
-            z-index: 9;
-            left: 50%;
-            top: 50%;
-            transform: translate(-50%, -50%);
-            width: 100%;
-            max-width: 500px;
-            padding: 20px;
-            background-color: white;
-            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.6);
-            border-radius: 10px;
-            box-sizing: border-box;
-          }
-
-          .form-container h2 {
-            margin-bottom: 20px;
-            color: #333;
-          }
-
-          .form-group {
-            margin-bottom: 15px;
-          }
-
-          .form-control {
-            border-radius: 5px;
-            padding: 12px;
-            font-size: 16px;
-            line-height: 1.5;
-            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
-            width: 100%;
-          }
-
-          .forgot {
-            text-align: right;
-            margin-left: 50px;
-            font-size: 10px;
-            margin-top: -40px;
-
-          }
-
-          .btn {
-            margin-top: 10px;
-            border-radius: 5px;
-          }
-
-          .eye-icon {
-            position: absolute;
-            right: 15px;
-            top: 38px;
-            cursor: pointer;
-            color: #007bff;
-          }
-
-          .close-icon {
-            font-size: 24px;
-            cursor: pointer;
-            float: right;
-          }
-
-          .position-relative {
-            position: relative;
-          }
-
-          /* Login button jumping issue fix */
-          .btn-primary {
-            transition: all 0.3s ease;
-            /* Smooth transition */
-          }
-
-          .btn-primary:hover {
-            background-color: #0056b3;
-          }
-
-          .google-btn {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-
-          .google-logo {
-            width: 20px;
-            height: 20px;
-            margin-right: 10px;
-          }
-
-          .btn-primary:hover {
-            background-color: #0056b3;
-          }
-        </style>
+        }
+    </script>
+    
+     
+    
+        
+                  <!-- Login Form -->
+                  <div class="form-popup" id="loginForm">
+                    <form class="form-container" onsubmit="return validateLoginForm()" style="max-width: 400px; margin: auto;">
+                        <span class="close-icon" onclick="closeForm('login')">&times;</span>
+                        <h2 class="text-center">Login</h2>
+                        <div class="form-group">
+                            <label for="loginEmail"><b>Email</b></label>
+                            <input type="email" class="form-control" id="loginEmail" placeholder="Enter Email" name="email" required>
+                        </div>
+                        <div class="form-group position-relative">
+                            <label for="loginPsw"><b>Password</b></label>
+                            <input type="password" class="form-control" id="loginPsw" placeholder="Enter Password" name="psw" required minlength="6">
+                            <i class="bi bi-eye eye-icon" id="toggleLoginPassword" onclick="togglePasswordVisibility('loginPsw', 'toggleLoginPassword')"></i>
+                        </div>
+                        <div class="remember-me">
+                            <input type="checkbox" id="remember-me" />
+                            <label for="remember-me">Remember Me</label>
+                        </div>
+                        <div class="forgot">
+                            <a href="javascript:void(0);" onclick="openForgotPassword()">Forgot Password?</a>
+                        </div>
+                        <button type="submit" class="btn btn-secondary w-100 mb-3">LOGIN</button>
+                        <style>
+                            .btn:hover {
+                                transition: 0.5s ease;
+                            }
+                        </style>
+                        <!-- Google Login Button -->
+                        <button type="button" class="btn google-btn" onclick="window.location.href='https://accounts.google.com/v3/signin/identifier?authuser=0&continue=https%3A%2F%2Fmyaccount.google.com%2F&ec=GAlAwAE&hl=en_GB&service=accountsettings&flowName=GlifWebSignIn&flowEntry=AddSession&dsh=S1527110508%3A1729760212648495&ddm=0'">
+                            <img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
+                            Sign in with Google</button>
+                        <button type="button" class="btn btn-secondary w-100" onclick="closeForm('login')">CLOSE</button>
+                        <!-- Link to Signup Page -->
+                        <div class="new">
+                            <p>Don't have an account? <a href="javascript:void(0);" onclick="openForm('signup')">Sign up
+                                    here</a></p>
+                        </div>
+                    </form>
+                </div>
+  
+                <!-- Signup Form -->
+                <div class="form-popup" id="signupForm">
+                    <form class="form-container" onsubmit="return validateSignupForm()" style="max-width: 400px; margin: auto;">
+                        <span class="close-icon" onclick="closeForm('signup')">&times;</span>
+                        <h2 class="text-center">Signup</h2>
+                        <div class="form-group">
+                            <label for="name"><b>Full Name</b></label>
+                            <input type="text" class="form-control" id="name" placeholder="Enter Full Name" name="name" required>
+                        </div>
+                        <div class="form-group">
+                            <label for="signupEmail"><b>Email</b></label>
+                            <input type="email" class="form-control" id="signupEmail" placeholder="Enter Email" name="email" required>
+                        </div>
+                        <div class="form-group position-relative">
+                            <label for="signupPsw"><b>Password</b></label>
+                            <input type="password" class="form-control" id="signupPsw" placeholder="Enter Password" name="psw" required minlength="6">
+                            <i class="bi bi-eye eye-icon" id="toggleSignupPassword" onclick="togglePasswordVisibility('signupPsw', 'toggleSignupPassword')"></i>
+                        </div>
+                        <div class="form-group position-relative">
+                            <label for="confirmPsw"><b>Confirm Password</b></label>
+                            <input type="password" class="form-control" id="confirmPsw" placeholder="Confirm Password" name="confirmPsw" required minlength="6">
+                            <i class="bi bi-eye eye-icon" id="toggleConfirmPassword" onclick="togglePasswordVisibility('confirmPsw', 'toggleConfirmPassword')"></i>
+                        </div>
+                        <div class="remember-me">
+                            <input type="checkbox" id="remember-me" />
+                            <label for="remember-me">Remember Me</label>
+                        </div>
+                        <button type="submit" class="btn btn-primary w-100 mb-3">SIGNUP</button>
+                        <!-- Google Sign-In Button -->
+                        <button type="button" class="btn google-btn" onclick="window.location.href='https://accounts.google.com/v3/signin/identifier?authuser=0&continue=https%3A%2F%2Fmyaccount.google.com%2F&ec=GAlAwAE&hl=en_GB&service=accountsettings&flowName=GlifWebSignIn&flowEntry=AddSession&dsh=S1527110508%3A1729760212648495&ddm=0'">
+                            <img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
+                            Sign in with Google</button>
+                        <button type="button" class="btn btn-secondary w-100" onclick="closeForm('signup')">CLOSE</button>
+                        <!-- Link to Login Page -->
+                        <div class="new">
+                            <p>Already have an account? <a href="javascript:void(0);" onclick="openForm('login')">Login
+                                    here</a></p>
+                        </div>
+                    </form>
+                </div>
+  
+                <!-- Forgot Password Modal -->
+                <div id="forgot-password-modal" class="modal">
+                    <div class="form-container modal-content">
+                        <h2>Forgot Password</h2>
+                        <p>Please enter your email address to reset your password.</p>
+  
+                        <label for="email">Email Address</label>
+                        <input type="email" id="email" placeholder="Enter your email" required />
+  
+                        <button class="btn" onclick="submitForgotPassword()">Submit</button>
+                        <button class="btn cancel" onclick="closeForgotPasswordModal()">Cancel</button>
+                    </div>
+                </div>
+  
+                <!-- Toggle Password Visibility Script -->
+                <script>
+                    function togglePasswordVisibility(passwordFieldId, iconId) {
+                        const passwordField = document.getElementById(passwordFieldId);
+                        const togglePassword = document.getElementById(iconId);
+                        if (passwordField.type === 'password') {
+                            passwordField.type = 'text';
+                            togglePassword.classList.remove('bi-eye');
+                            togglePassword.classList.add('bi-eye-slash');
+                        } else {
+                            passwordField.type = 'password';
+                            togglePassword.classList.remove('bi-eye-slash');
+                            togglePassword.classList.add('bi-eye');
+                        }
+                    }
+                </script>
+                <script>
+                    document.addEventListener("DOMContentLoaded", function () {
+                        const rememberMeCheckbox = document.getElementById("remember-me");
+                        const usernameInput = document.getElementById("username");
+  
+                        // Load saved username if it exists
+                        if (localStorage.getItem("rememberedUsername")) {
+                            usernameInput.value = localStorage.getItem("rememberedUsername");
+                            rememberMeCheckbox.checked = true;
+                        }
+  
+                        // When the form is submitted, save the username if "Remember Me" is checked
+                        document.querySelector(".sign-in-form").addEventListener("submit", function (e) {
+                            e.preventDefault(); // Prevent default form submission
+  
+                            if (rememberMeCheckbox.checked) {
+                                localStorage.setItem("rememberedUsername", usernameInput.value);
+                            } else {
+                                localStorage.removeItem("rememberedUsername");
+                            }
+  
+                            // Add form submission logic here
+                        });
+                    });
+                </script>
+  
+  
+    <!-- CSS Styles -->
+    
+                  <!-- Styles -->
+                  <style>
+                    .form-popup {
+                        .form-popup {
+                            display: none;
+                            /* Hidden by default */
+                            position: fixed;
+                            /* Stay in place */
+                            z-index: 9;
+                            /* Sit on top */
+                            left: 50%;
+                            top: 50%;
+                            transform: translate(-50%, -50%);
+                            /* Center the popup */
+                            width: 100%;
+                            max-width: 500px;
+                            /* Limit width */
+                            padding: 20px;
+                            background-color: white;
+                            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.6);
+                            border-radius: 10px;
+                            box-sizing: border-box;
+                        }
+                    }
+                    
+                    .form-container h2 {
+                        margin-bottom: 20px;
+                        color: #333;
+                    }
+                    
+                    .form-group {
+                        margin-bottom: 15px;
+                    }
+                    
+                    .form-control {
+                        border-radius: 5px;
+                        padding: 10px;
+                        box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
+                    }
+                    
+                    .btn {
+                        margin-top: 10px;
+                        border-radius: 5px;
+                    }
+                    
+                    .eye-icon {
+                        position: absolute;
+                        right: 15px;
+                        top: 38px;
+                        cursor: pointer;
+                        color: #007bff;
+                    }
+                    
+                    .close-icon {
+                        font-size: 24px;
+                        cursor: pointer;
+                        float: right;
+                    }
+                    
+                    .position-relative {
+                        position: relative;
+                    }
+                    
+                    .btn-primary:hover {
+                        background-color: #0056b3;
+                    }
+                    
+                    .btn-secondary:hover {
+                        background-color: #6c757d;
+                    }
+                    
+                    .scroll-to-top {
+                        background-color: #0066cc;
+                        /* Button color */
+                        color: white;
+                        /* Text color */
+                        border: none;
+                        /* No border */
+                        border-radius: 5px;
+                        /* Rounded corners */
+                        padding: 10px 15px;
+                        /* Padding for better appearance */
+                        cursor: pointer;
+                        /* Pointer cursor on hover */
+                        margin-top: 10px;
+                        /* Space between the paragraph and button */
+                    }
+                    
+                    .scroll-to-top:hover {
+                        background-color: #005bb5;
+                        /* Darker shade on hover */
+                    }
+                </style>
+  
         <!-- Toggle Password Visibility Script -->
         <script>
           function togglePasswordVisibility(passwordFieldId, iconId) {
@@ -429,7 +454,9 @@ <h2>Forgot Password</h2>
       <!-- <div class="col-8"> -->
       <article id="post">
         <!--article heading-->
-        <div class="heading text-center">
+       
+        
+       <div class="heading text-center">
           <div class="Category">
             <a href="#" class="nav-link" id="travel">Travel</a>
           </div>
@@ -454,67 +481,66 @@ <h2 class="text-title text-dark display-1" looking for feedback></h2>
               <span id="bookmark-text" style="color: f9b0b0;">Bookmark</span>
             </a>
           </div>
-
-
-        </div>
+       
+        
         <!--thumbnail-->
-        <div class="thumbnail mt-3">
-          <img src="./assets/img1.webp" class="thumbnail" alt="">
+        <div class="thumbnail mt-3" style="border-radius: 8px; overflow: hidden;">
+          <img src="./assets/img1.webp" class="thumbnail-img" alt="">
         </div>
         <!--content-->
-        <div class="content text-dark display-1 secondary-title mt-3">
-          <p>
-
-
-            In the realm of mechanical marvels, our journey begins an odyssey of speed, freedom, and human ingenuity:
-            the automobile. A symphony of gears and pistons, it has reshaped the world, granting us the power to
-            traverse great distances with unparalleled ease. Join me as we delve into the rich history, exhilarating
-            innovations, and unforgettable memories that revolve around the ever-evolving wonder that is the car.
-
-            At the dawn of the 19th century, the world witnessed the birth of the automobile, a contraption that
-            combined the visions of brilliant minds like Karl Benz, Gottlieb Daimler, and Henry Ford. In these early
-            days, the car was a novelty, a wondrous oddity with a top speed of a brisk trotting horse. Yet, it laid the
-            groundwork for an automotive revolution that would forever change the landscape of our existence. Fast
-            forward to today, and the automobile stands as a symbol of progress, blending elegance and performance, as
-            we race forward into the future.
-          </p>
-
+        <div class="content-container">
+          <div class="content text-light display-1 secondary-title mt-3">
+            <p>
+              In the realm of mechanical marvels, our journey begins an odyssey of speed, freedom, and human ingenuity: the automobile.
+              A symphony of gears and pistons, it has reshaped the world, granting us the power to traverse great distances with
+              unparalleled ease. Join me as we delve into the rich history, exhilarating innovations, and unforgettable memories that
+              revolve around the ever-evolving wonder that is the car.
+        
+              At the dawn of the 19th century, the world witnessed the birth of the automobile, a contraption that combined the visions
+              of brilliant minds like Karl Benz, Gottlieb Daimler, and Henry Ford. In these early days, the car was a novelty, a wondrous
+              oddity with a top speed of a brisk trotting horse. Yet, it laid the groundwork for an automotive revolution that would
+              forever change the landscape of our existence. Fast forward to today, and the automobile stands as a symbol of progress,
+              blending elegance and performance, as we race forward into the future.
+            </p>
+          </div>
         </div>
-
+        
 
       </article>
       <!--post footer-->
-      <div class="post-footer mb-3">
-        <div class="post-tags d-flex flex-wrap justify-content-center">
-          <a href="#" class="nav-link btn bg-light">Travel</a>
-          <a href="#" class="nav-link btn bg-light">Food</a>
-          <a href="#" class="nav-link btn bg-light">Lifestyle</a>
-          <a href="#" class="nav-link btn bg-light">Technology</a>
-          <a href="#" class="nav-link btn bg-light">Fashion</a>
-
-        </div>
-        <div class="post-author text-center">
-          <div class="author-avatar">
-            <img src="./assets/face/face1.webp" class="rounded">
-
+      <div class="post-footer-container">
+        <div class="post-footer mb-3">
+          <!-- Post Tags -->
+          <div class="post-tags d-flex flex-wrap justify-content-center mb-4">
+            <a href="#" class="tag-link btn">Travel</a>
+            <a href="#" class="tag-link btn">Food</a>
+            <a href="#" class="tag-link btn">Lifestyle</a>
+            <a href="#" class="tag-link btn">Technology</a>
+            <a href="#" class="tag-link btn">Fashion</a>
           </div>
-          <div class="author-info py-2">
-            <h3 class="text-dark">Amy Tan</h3>
-            <p class="text-secondary secondary-title">
-              Author Info
-            </p>
-            <div class="post-tags d-flex flex-wrap justify-content-center">
-              <a href="#" id="facebook" class="nav-link btn bg-light"><i class="fa-brands fa-facebook"></i></a>
-              <a href="#" id="instagram" class="nav-link btn bg-light"><i class="fa-brands fa-instagram"></i></a>
-              <a href="#" id="twitter" class="nav-link btn bg-light"><i class="fa-brands fa-twitter"></i></a>
-              <a href="#" id="dribbble" class="nav-link btn bg-light"><i class="fa-brands fa-dribbble"></i></a>
-              <a href="https://github.com/ANSHIKA-26?tab=overview&from=2022-12-01&to=2022-12-31" id="github"
-                target="_blank" class="nav-link btn bg-light"><i class="fa-brands fa-github"></i></a>
-
-
+      
+          <!-- Author Section -->
+          <div class="post-author text-center">
+            <div class="author-avatar mb-2">
+              <img src="./assets/face/face1.webp" class="rounded-circle" alt="Author's avatar">
+            </div>
+            <div class="author-info py-2">
+              <h3 class="author-name">Amy Tan</h3>
+              <p class="author-bio">Author Info</p>
+      
+              <!-- Social Media Links -->
+              <div class="social-links d-flex justify-content-center mt-3">
+                <a href="#" class="social-icon" id="facebook"><i class="fa-brands fa-facebook"></i></a>
+                <a href="#" class="social-icon" id="instagram"><i class="fa-brands fa-instagram"></i></a>
+                <a href="#" class="social-icon" id="twitter"><i class="fa-brands fa-twitter"></i></a>
+                <a href="#" class="social-icon" id="dribbble"><i class="fa-brands fa-dribbble"></i></a>
+                <a href="https://github.com/ANSHIKA-26" id="github" target="_blank" class="social-icon"><i class="fa-brands fa-github"></i></a>
+              </div>
             </div>
           </div>
         </div>
+      </div>
+      
         <!--post related -->
         <!-- post related -->
         <div class="post-navigation">
@@ -579,11 +605,9 @@ <h3 class="text-dark">Amy Tan</h3>
           <div class="comments-section">
             <div class="comments-container">
               <h2 class="section-title">
-                <span class="title-text">
-                  Join the Conversation
-                </span>
+                <span class="title-text">Join the Conversation</span>
               </h2>
-
+        
               <!-- Comment Form -->
               <div class="comment-form">
                 <h3 class="form-title">Share Your Thoughts</h3>
@@ -604,7 +628,7 @@ <h3 class="form-title">Share Your Thoughts</h3>
                   </button>
                 </form>
               </div>
-
+        
               <!-- Comment List -->
               <div id="commentList" class="comment-list">
                 <!-- Existing comments will be loaded here -->
@@ -612,6 +636,7 @@ <h3 class="form-title">Share Your Thoughts</h3>
             </div>
           </div>
         </section>
+        
 
         <script>
           // Comment data structure
@@ -1077,36 +1102,37 @@ <h5 class="commenter-name">${comment.name}</h5>
       <div class="col-4">
         <aside id="sidebar" class="px-1">
 
-          <!--categories-->
-          <section class="categories">
-            <center>
-              <h2 class="category-heading">Categories</h2>
-            </center>
-            <div class="category-item">
-              <a href="#" class="d-flex justify-content-between text-dark">
-                <span>Design</span>
-                <span>5</span>
-              </a>
-            </div>
-            <div class="category-item">
-              <a href="#" class="d-flex justify-content-between text-dark">
-                <span>Illustrations</span>
-                <span>10</span>
-              </a>
-            </div>
-            <div class="category-item">
-              <a href="#" class="d-flex justify-content-between text-dark">
-                <span>Fashion</span>
-                <span>5</span>
-              </a>
-            </div>
-            <div class="category-item">
-              <a href="#" class="d-flex justify-content-between text-dark">
-                <span>Graphic</span>
-                <span>4</span>
-              </a>
-            </div>
-          </section>
+         <!-- Categories Section -->
+<section class="categories">
+  <h2 class="category-heading">Categories</h2>
+  <div class="category-list">
+    <div class="category-item">
+      <a href="#" class="category-link d-flex justify-content-between text-dark">
+        <span>Design</span>
+        <span>5</span>
+      </a>
+    </div>
+    <div class="category-item">
+      <a href="#" class="category-link d-flex justify-content-between text-dark">
+        <span>Illustrations</span>
+        <span>10</span>
+      </a>
+    </div>
+    <div class="category-item">
+      <a href="#" class="category-link d-flex justify-content-between text-dark">
+        <span>Fashion</span>
+        <span>5</span>
+      </a>
+    </div>
+    <div class="category-item">
+      <a href="#" class="category-link d-flex justify-content-between text-dark">
+        <span>Graphic</span>
+        <span>4</span>
+      </a>
+    </div>
+  </div>
+</section>
+
 
           <style>
             :root {
@@ -1238,111 +1264,106 @@ <h2 class="category-heading">Categories</h2>
     <i class="fas fa-arrow-up"></i>
   </div>
 
-  <!-- footer -->
-  <footer id="footer">
-    <div class="footer-container">
-        <div class="row mb-3 col-3-main">
-            <div class="col-3">
-               <div id = "about-us">
-                <h2 class="footer-title secondary-title" >About Us</h2>
-
-                  <div class="secondary-title text-secondary " >
-                     <p class="mt-2 text-lg" style="text-align: left;" >
-                      We are a close-knit team of passionate storytellers dedicated to sharing captivating content with the world.
-                     </p>
-
-                     <address class="mt-2">
-                         <i class="fas fa-map-marker-alt text-primary"></i>
-                         5 South Main Street Los Angeles, ZZ-9611 USA
-                     </address>
-
-                     <div class="phone mt-2">
-                         <i class="fas fa-mobile text-primary"></i>
-                         125-896-485
-                     </div>
-
-                    <div class="email mt-2">
-                          <a href="mailto: dailysupport@gmail.com" style="color: 3B3B58;"><i class="fas fa-envelope text-primary"></i>
-                         <span id="mailhover">dailysupport@gmail.com</span>
-                         <style>
-                          #mailhover:hover{
-                              color: #f44336;
-                              transition: color 0.5s ease-out;
-                          }
-                         </style>
-                      </a>
-                     </div>
-
-                     <div>
-                      <!-- <img src="https://hits.sh/anshika-26.github.io/WordWise.svg?label=Website%20Views&extraCount=1515&color=30322f&labelColor=F5B3B5" alt="Web views" style="height: 20px;width: 150px;margin-top: 40px;"> -->
-                        <div class="containerWebsiteViews">
-                          <div class="containerText"><p>Website Views</p></div>
-                          <div class="containerNumbers"><p id="visitorCount">0</p></div>
-                        </div>
-                     </div>
+     
+<!-- footer -->
+<footer id="footer">
+  <div class="footer-container">
+      <div class="row mb-3 col-3-main">
+          <div class="col-3">
+              <div id="about-us">
+                  <h2 class="footer-title secondary-title">About Us</h2>
+                  <div class="secondary-title text-secondary">
+                      <p class="mt-2 text-lg" style="text-align: left;">
+                          We are a close-knit team of passionate storytellers dedicated to sharing captivating
+                          content with the world.
+                      </p>
+                      <address class="mt-2">
+                          <i class="fas fa-map-marker-alt text-primary"></i>
+                          5 South Main Street Los Angeles, ZZ-9611 USA
+                      </address>
+                      <div class="phone mt-2">
+                          <i class="fas fa-mobile text-primary"></i>
+                          125-896-485
+                      </div>
+                      <div class="email mt-2">
+                          <a href="mailto:dailysupport@gmail.com" style="color: #3B3B58;">
+                              <i class="fas fa-envelope text-primary"></i>
+                              <span>dailysupport@gmail.com</span>
+                          </a>
+                      </div>
+                      <div>
+                          <a href="privacy.html" style="color: #520be1e7;">Privacy Policy</a>
+                      </div>
+                      <div>
+                          <img
+                              src="https://hits.sh/anshika-26.github.io/WordWise.svg?label=Website%20Views&extraCount=1515&color=30322f&labelColor=F5B3B5"
+                              alt="Web views" style="height: 20px;width: 150px;margin-top: 10px;">
+                      </div>
                   </div>
-
-               </div>
-            </div>
-            <div class="col-3">
-                <h2 class="footer-title secondary-title">Feature Post</h2>
-
-                <div class="feature-post">
-                    <div class="flex-item">
+              </div>
+          </div>
+          <div class="col-3">
+              <h2 class="footer-title secondary-title">Featured Post</h2>
+              <div class="feature-post">
+                  <div class="flex-item">
                       <article class="article">
-                          <div class="d-flex" style="align-items: flex-start; ">
+                          <div class="d-flex" style="align-items: flex-start;">
                               <a class="d-flex" href="#">
                                   <img src="./assets/img9.webp" class="object-fit" alt="">
-                                  <div class="px-1" style="width: 300px; ">
+                                  <div class="px-1" style="width: 300px;">
                                       <a href="#" class="text-title display-2 text-dark">
-                                          Embrace the beauty of nature through our enchanting blog, where we celebrate the wonders of the natural world
+                                          Embrace the beauty of nature through our enchanting blog, where we
+                                          celebrate the wonders of the natural world
                                       </a>
-                                      <p class="secondary-title text-secondary " style="margin-top:3px;margin-left:0px; text-align: left; ">
+                                      <p class="secondary-title text-secondary"
+                                         style="margin-top:3px;margin-left:0px; text-align: left;">
                                           <span><i class="far fa-clock text-primary"></i> Wed 02, 2022 </span>
                                       </p>
                                   </div>
                               </a>
                           </div>
                       </article>
-
-                    </div>
-                    <div class="flex-item">
-                     <article class="article">
-                         <div class="d-flex" style="align-items: flex-start; ">
-                             <a class="d-flex" href="#">
-                                 <img src="./assets/img1.webp" class="object-fit" alt="">
-                                 <div class="px-1" style="width: 300px;">
-                                     <a href="#" class="text-title display-2 text-dark">
-                                      Embark on unforgettable journeys through our travel blog, where wanderlust meets inspiration
-                                     </a>
-                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;margin-left:0px; text-align: left;">
+                  </div>
+                  <div class="flex-item">
+                      <article class="article">
+                          <div class="d-flex" style="align-items: flex-start;">
+                              <a class="d-flex" href="#">
+                                  <img src="./assets/img1.webp" class="object-fit" alt="">
+                                  <div class="px-1" style="width: 300px;">
+                                      <a href="#" class="text-title display-2 text-dark">
+                                          Embark on unforgettable journeys through our travel blog, where
+                                          wanderlust meets inspiration
+                                      </a>
+                                      <p class="secondary-title text-secondary display-3"
+                                         style="margin-top:3px;margin-left:0px; text-align: left;">
                                           <span><i class="far fa-clock text-primary"></i> Wed 05, 2020 </span>
-                                     </p>
-                                 </div>
-                             </a>
-                         </div>
-                     </article>
-                      </div>
-                      <div class="flex-item">
-                         <article class="article">
-                             <div class="d-flex" style="align-items: flex-start; ">
-                                 <a class="d-flex " href="#" >
-                                     <img src="./assets/img2.webp" class="object-fit" alt="">
-                                     <div class="px-1" style="width: 300px;">
-                                         <a href="#" class="text-title display-2 text-dark">
+                                      </p>
+                                  </div>
+                              </a>
+                          </div>
+                      </article>
+                  </div>
+                  <div class="flex-item">
+                      <article class="article">
+                          <div class="d-flex" style="align-items: flex-start;">
+                              <a class="d-flex" href="#">
+                                  <img src="./assets/img2.webp" class="object-fit" alt="">
+                                  <div class="px-1" style="width: 300px;">
+                                      <a href="#" class="text-title display-2 text-dark">
                                           Gaming Adventures Unleashed
-                                         </a>
-                                         <p class="secondary-title text-secondary display-3" style="margin-top:3px;margin-left:0px; text-align: left;">
-                                              <span><i class="far fa-clock text-primary"></i> Wed 02, 2021 </span>
-                                         </p>
-                                     </div>
-                                 </a>
-                             </div>
-                         </article>
-                     </div>
-                </div>
-            </div>
-            <div class="col-3">
+                                      </a>
+                                      <p class="secondary-title text-secondary display-3"
+                                         style="margin-top:3px;margin-left:0px; text-align: left;">
+                                          <span><i class="far fa-clock text-primary"></i> Wed 02, 2021 </span>
+                                      </p>
+                                  </div>
+                              </a>
+                          </div>
+                      </article>
+                  </div>
+              </div>
+          </div>
+          <div class="col-3">
               <h2 class="footer-title secondary-title">Popular Tags</h2>
               <div class="tags">
                 <div class="d-flex-gap flex-wrap all-tags">
@@ -1356,7 +1377,7 @@ <h2 class="footer-title secondary-title">Popular Tags</h2>
               </div>
               <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
               <div class="tags social" id="contact">
-                  <div class="d-flex-gap flex-wrap" style="">
+                  <div class="d-flex-gap flex-wrap">
                       <a href="https://www.facebook.com/" id="facebook" class="nav-link btn bg-light">
                           <i class="fab fa-facebook-f"></i>
                       </a>
@@ -1376,14 +1397,15 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
                   </div>
               </div>
           </div>
-        </div>
-
-
-    </div>
-     <!-- the authentication copyright -->
-     <div class="wordwise-footer">
+      </div>
+  </div>
+  <!-- the authentication copyright -->
+  <div class="wordwise-footer">
       <div class="wordwise-footer-content">
-        <p class="last">&copy; <span id="current-year"></span> WordWise. All rights reserved.</p>
+          <p>
+              &copy; <span id="current-year"></span> WordWise. All rights
+              reserved.
+          </p>
       </div>
   </div>
 </footer>
diff --git a/category.html b/category.html
index 046a50d..327ce17 100644
--- a/category.html
+++ b/category.html
@@ -71,239 +71,273 @@ <h2>WordWise</h2>
             <a href="give_feedback.html">Give Feedback</a>
         </div>
        
-        <div class="dropdown">
-            <!-- Profile Icon -->
+      <div class="dropdown">
+        <!-- Profile Icon -->
 
-            <a href="javascript:void(0);" class="profile-link profile-icon" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
-                <i class="fas fa-user-circle"></i>
-            </a>
-        
+        <a href="javascript:void(0);" class="profile-link profile-icon" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
+            <i class="fas fa-user-circle"></i>
 
-            <!-- Dropdown Menu -->
-            <ul class="dropdown-menu" id="profileMenu" style="display: none; position: absolute; z-index: 1;">
-                <li><a href="./profile.html">My Profile</a></li>
-                <li><a href="#login" onclick="openForm('login')">Login</a></li>
-                <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
-            </ul>
-        </div>
+        </a>
 
-        <script>
-            // Function to toggle the visibility of the dropdown menu
-            function toggleMenu() {
-                const menu = document.getElementById('profileMenu');
-                menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
-            }
-
-            // Close the dropdown if the user clicks outside of it
-            window.onclick = function(event) {
-                const menu = document.getElementById('profileMenu');
-                if (!event.target.matches('.profile-link img') && menu.style.display === 'block') {
-                    menu.style.display = 'none';
-                }
-            }
-        
-            // Update the profile image in the dropdown menu based on the selected avatar stored in localStorage
-            document.addEventListener("DOMContentLoaded", function() {
-                // Retrieve the saved avatar from localStorage
-                const savedAvatar = localStorage.getItem("selectedAvatar");
-        
-                // If an avatar is saved, update the profile image
-                if (savedAvatar) {
-                    const dropdownProfileImage = document.getElementById("dropdownProfileImage");
-                    if (dropdownProfileImage) {
-                        dropdownProfileImage.src = savedAvatar;  // Update the image source
-                    }
-                }
-            });
-        </script>
-     
-        
-     
-      <!--  Login Form -->
-<div class="form-popup" id="loginForm">
-    <form class="form-container" onsubmit="return validateLoginForm()" style="max-width: 400px; margin: auto;">
-        <span class="close-icon" onclick="closeForm('login')">&times;</span>
-        <h2 class="text-center">Login</h2>
-        <div class="form-group">
-            <label for="loginEmail"><b>Email</b></label>
-            <input type="email" class="form-control" id="loginEmail" placeholder="Enter Email" name="email" required>
-        </div>
-        <div class="form-group position-relative">
-            <label for="loginPsw"><b>Password</b></label>
-            <input type="password" class="form-control" id="loginPsw" placeholder="Enter Password" name="psw" required minlength="6">
-            <i class="bi bi-eye eye-icon" id="toggleLoginPassword" onclick="togglePasswordVisibility('loginPsw', 'toggleLoginPassword')"></i>
-        </div>
-        <div class="forgot">
-            <a href="javascript:void(0);" onclick="openForgotPassword()">Forgot Password?</a>
-        </div>
-        <button type="submit" class="btn btn-primary w-100 mb-3">LOGIN</button>
-        <!-- Google Sign-In Button -->
-        <button type="button" class="btn google-btn" onclick="handleGoogleLogin()">
-            <img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
-            Sign in with Google
-        </button>
-    </form>
-  </div>
- 
-<!-- Signup Form -->
-<div class="form-popup" id="signupForm">
-    <form class="form-container" onsubmit="return validateSignupForm()" style="max-width: 400px; margin: auto;">
-        <span class="close-icon" onclick="closeForm('signup')">&times;</span>
-        <h2 class="text-center">Signup</h2>
-        <div class="form-group">
-            <label for="name"><b>Full Name</b></label>
-            <input type="text" class="form-control" id="name" placeholder="Enter Full Name" name="name"
-                            required pattern="[a-zA-Z ]+"
-                        oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')"
-                        oninput="this.setCustomValidity('')">
-        </div>
-        <div class="form-group">
-            <label for="signupEmail"><b>Email</b></label>
-            <input type="email" class="form-control" id="signupEmail" placeholder="Enter Email" name="email" required>
-        </div>
-        <div class="form-group position-relative">
-          <label for="signupPsw"><b>Password</b></label>
-          <input type="password" id="signupPsw" placeholder="Enter Password" name="psw" required minlength="6" oninput="checkPasswordStrength()">
-          <i class="bi bi-eye eye-icon" id="toggleSignupPassword" onclick="togglePasswordVisibility('signupPsw', 'toggleSignupPassword')"></i>
-          <div id="passwordStrength" class="strength-meter"></div>
-      </div>
-  
-        <div class="form-group position-relative">
-            <label for="confirmPsw"><b>Confirm Password</b></label>
-            <input type="password" class="form-control" id="confirmPsw" placeholder="Confirm Password" name="confirmPsw" required minlength="6">
-            <i class="bi bi-eye eye-icon" id="toggleConfirmPassword" onclick="togglePasswordVisibility('confirmPsw', 'toggleConfirmPassword')"></i>
-        </div>
-        <button type="submit" class="btn btn-primary w-100 mb-3">SIGNUP</button>
-        <!-- Google Sign-In Button -->
-         <button type="button" class="btn google-btn" onclick="handleGoogleLogin()">
-          <img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
-          Sign in with Google</button>
-    </form>
-  </div>
-  
-  <!-- Forgot Password Modal -->
-  <div id="forgot-password-modal" class="modal">
-    <div class="form-container modal-content">
-      <h2>Forgot Password</h2>
-      <p>Please enter your email address to reset your password.</p>
-  
-      <label for="email">Email Address</label>
-      <input type="email" id="email" placeholder="Enter your email" required />
-  
-      <button class="btn" onclick="submitForgotPassword()">Submit</button>
-      <button class="btn cancel" onclick="closeForgotPasswordModal()">Cancel</button>
+        <!-- Dropdown Menu -->
+        <ul class="dropdown-menu" id="profileMenu" style="display: none; position: absolute; z-index: 1;">
+            
+            <li><a href="#login" onclick="openForm('login')">Login</a></li>
+            <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
+        </ul>
     </div>
-  </div>
+    <script>
+      function toggleMenu() {
+          const menu = document.getElementById('profileMenu');
+          menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
+      }
   
-  <!-- Toggle Password Visibility Script -->
-  <script>
-    function togglePasswordVisibility(passwordFieldId, iconId) {
-        const passwordField = document.getElementById(passwordFieldId);
-        const togglePassword = document.getElementById(iconId);
-        if (passwordField.type === 'password') {
-            passwordField.type = 'text';
-            togglePassword.classList.remove('bi-eye');
-            togglePassword.classList.add('bi-eye-slash');
-        } else {
-            passwordField.type = 'password';
-            togglePassword.classList.remove('bi-eye-slash');
-            togglePassword.classList.add('bi-eye');
-        }
-    }
+      // Close the dropdown if the user clicks outside of it
+      window.onclick = function(event) {
+          const menu = document.getElementById('profileMenu');
+          if (!event.target.matches('.profile-link img') && menu.style.display === 'block') {
+              menu.style.display = 'none';
+          }
+      }
   </script>
   
-  <!-- Updated CSS Styles -->
-  <style>
-    .form-popup {
-        display: none;
-        position: fixed;
-        z-index: 9;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        width: 100%;
-        max-width: 500px;
-        padding: 20px;
-        background-color: white;
-        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.6);
-        border-radius: 10px;
-        box-sizing: border-box;
-    }
-  
-    .form-container h2 {
-        margin-bottom: 20px;
-        color: #333;
-    }
-  
-    .form-group {
-        margin-bottom: 15px;
-    }
-  
-    .form-control {
-        border-radius: 5px;
-        padding: 12px;
-        font-size: 16px; 
-        line-height: 1.5; 
-        box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
-        width: 100%;
-    }
-  
-    .forgot {
-        text-align: right; 
-        margin-left: 50px;
-        font-size: 10px;   
-        margin-top: -40px;
-  
-    }
-  
-    .btn {
-        margin-top: 10px;
-        border-radius: 5px;
-    }
-  
-    .eye-icon {
-        position: absolute;
-        right: 15px;
-        top: 38px;
-        cursor: pointer;
-        color: #fac8db;
-    }
-  
-    .close-icon {
-        font-size: 24px;
-        cursor: pointer;
-        float: right;
-    }
-  
-    .position-relative {
-        position: relative;
-    }
-  
-    /* Login button jumping issue fix */
-    .btn-primary {
-        transition: all 0.3s ease; /* Smooth transition */
-    }
+   
   
-    .btn-primary:hover {
-        background-color: #0056b3;
-    }
-  
-    .google-btn {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-  
-    .google-logo {
-        width: 20px;
-        height: 20px;
-        margin-right: 10px;
-    }
+      
+                <!-- Login Form -->
+                <div class="form-popup" id="loginForm">
+                  <form class="form-container" onsubmit="return validateLoginForm()" style="max-width: 400px; margin: auto;">
+                      <span class="close-icon" onclick="closeForm('login')">&times;</span>
+                      <h2 class="text-center">Login</h2>
+                      <div class="form-group">
+                          <label for="loginEmail"><b>Email</b></label>
+                          <input type="email" class="form-control" id="loginEmail" placeholder="Enter Email" name="email" required>
+                      </div>
+                      <div class="form-group position-relative">
+                          <label for="loginPsw"><b>Password</b></label>
+                          <input type="password" class="form-control" id="loginPsw" placeholder="Enter Password" name="psw" required minlength="6">
+                          <i class="bi bi-eye eye-icon" id="toggleLoginPassword" onclick="togglePasswordVisibility('loginPsw', 'toggleLoginPassword')"></i>
+                      </div>
+                      <div class="remember-me">
+                          <input type="checkbox" id="remember-me" />
+                          <label for="remember-me">Remember Me</label>
+                      </div>
+                      <div class="forgot">
+                          <a href="javascript:void(0);" onclick="openForgotPassword()">Forgot Password?</a>
+                      </div>
+                      <button type="submit" class="btn btn-secondary w-100 mb-3">LOGIN</button>
+                      <style>
+                          .btn:hover {
+                              transition: 0.5s ease;
+                          }
+                      </style>
+                      <!-- Google Login Button -->
+                      <button type="button" class="btn google-btn" onclick="window.location.href='https://accounts.google.com/v3/signin/identifier?authuser=0&continue=https%3A%2F%2Fmyaccount.google.com%2F&ec=GAlAwAE&hl=en_GB&service=accountsettings&flowName=GlifWebSignIn&flowEntry=AddSession&dsh=S1527110508%3A1729760212648495&ddm=0'">
+                          <img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
+                          Sign in with Google</button>
+                      <button type="button" class="btn btn-secondary w-100" onclick="closeForm('login')">CLOSE</button>
+                      <!-- Link to Signup Page -->
+                      <div class="new">
+                          <p>Don't have an account? <a href="javascript:void(0);" onclick="openForm('signup')">Sign up
+                                  here</a></p>
+                      </div>
+                  </form>
+              </div>
+
+              <!-- Signup Form -->
+              <div class="form-popup" id="signupForm">
+                  <form class="form-container" onsubmit="return validateSignupForm()" style="max-width: 400px; margin: auto;">
+                      <span class="close-icon" onclick="closeForm('signup')">&times;</span>
+                      <h2 class="text-center">Signup</h2>
+                      <div class="form-group">
+                          <label for="name"><b>Full Name</b></label>
+                          <input type="text" class="form-control" id="name" placeholder="Enter Full Name" name="name" required>
+                      </div>
+                      <div class="form-group">
+                          <label for="signupEmail"><b>Email</b></label>
+                          <input type="email" class="form-control" id="signupEmail" placeholder="Enter Email" name="email" required>
+                      </div>
+                      <div class="form-group position-relative">
+                          <label for="signupPsw"><b>Password</b></label>
+                          <input type="password" class="form-control" id="signupPsw" placeholder="Enter Password" name="psw" required minlength="6">
+                          <i class="bi bi-eye eye-icon" id="toggleSignupPassword" onclick="togglePasswordVisibility('signupPsw', 'toggleSignupPassword')"></i>
+                      </div>
+                      <div class="form-group position-relative">
+                          <label for="confirmPsw"><b>Confirm Password</b></label>
+                          <input type="password" class="form-control" id="confirmPsw" placeholder="Confirm Password" name="confirmPsw" required minlength="6">
+                          <i class="bi bi-eye eye-icon" id="toggleConfirmPassword" onclick="togglePasswordVisibility('confirmPsw', 'toggleConfirmPassword')"></i>
+                      </div>
+                      <div class="remember-me">
+                          <input type="checkbox" id="remember-me" />
+                          <label for="remember-me">Remember Me</label>
+                      </div>
+                      <button type="submit" class="btn btn-primary w-100 mb-3">SIGNUP</button>
+                      <!-- Google Sign-In Button -->
+                      <button type="button" class="btn google-btn" onclick="window.location.href='https://accounts.google.com/v3/signin/identifier?authuser=0&continue=https%3A%2F%2Fmyaccount.google.com%2F&ec=GAlAwAE&hl=en_GB&service=accountsettings&flowName=GlifWebSignIn&flowEntry=AddSession&dsh=S1527110508%3A1729760212648495&ddm=0'">
+                          <img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
+                          Sign in with Google</button>
+                      <button type="button" class="btn btn-secondary w-100" onclick="closeForm('signup')">CLOSE</button>
+                      <!-- Link to Login Page -->
+                      <div class="new">
+                          <p>Already have an account? <a href="javascript:void(0);" onclick="openForm('login')">Login
+                                  here</a></p>
+                      </div>
+                  </form>
+              </div>
+
+              <!-- Forgot Password Modal -->
+              <div id="forgot-password-modal" class="modal">
+                  <div class="form-container modal-content">
+                      <h2>Forgot Password</h2>
+                      <p>Please enter your email address to reset your password.</p>
+
+                      <label for="email">Email Address</label>
+                      <input type="email" id="email" placeholder="Enter your email" required />
+
+                      <button class="btn" onclick="submitForgotPassword()">Submit</button>
+                      <button class="btn cancel" onclick="closeForgotPasswordModal()">Cancel</button>
+                  </div>
+              </div>
+
+              <!-- Toggle Password Visibility Script -->
+              <script>
+                  function togglePasswordVisibility(passwordFieldId, iconId) {
+                      const passwordField = document.getElementById(passwordFieldId);
+                      const togglePassword = document.getElementById(iconId);
+                      if (passwordField.type === 'password') {
+                          passwordField.type = 'text';
+                          togglePassword.classList.remove('bi-eye');
+                          togglePassword.classList.add('bi-eye-slash');
+                      } else {
+                          passwordField.type = 'password';
+                          togglePassword.classList.remove('bi-eye-slash');
+                          togglePassword.classList.add('bi-eye');
+                      }
+                  }
+              </script>
+              <script>
+                  document.addEventListener("DOMContentLoaded", function () {
+                      const rememberMeCheckbox = document.getElementById("remember-me");
+                      const usernameInput = document.getElementById("username");
+
+                      // Load saved username if it exists
+                      if (localStorage.getItem("rememberedUsername")) {
+                          usernameInput.value = localStorage.getItem("rememberedUsername");
+                          rememberMeCheckbox.checked = true;
+                      }
+
+                      // When the form is submitted, save the username if "Remember Me" is checked
+                      document.querySelector(".sign-in-form").addEventListener("submit", function (e) {
+                          e.preventDefault(); // Prevent default form submission
+
+                          if (rememberMeCheckbox.checked) {
+                              localStorage.setItem("rememberedUsername", usernameInput.value);
+                          } else {
+                              localStorage.removeItem("rememberedUsername");
+                          }
+
+                          // Add form submission logic here
+                      });
+                  });
+              </script>
+
+
+  <!-- CSS Styles -->
   
-    .btn-primary:hover {
-        background-color: #0056b3;
-    }
-  </style>
+                <!-- Styles -->
+                <style>
+                  .form-popup {
+                      .form-popup {
+                          display: none;
+                          /* Hidden by default */
+                          position: fixed;
+                          /* Stay in place */
+                          z-index: 9;
+                          /* Sit on top */
+                          left: 50%;
+                          top: 50%;
+                          transform: translate(-50%, -50%);
+                          /* Center the popup */
+                          width: 100%;
+                          max-width: 500px;
+                          /* Limit width */
+                          padding: 20px;
+                          background-color: white;
+                          box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.6);
+                          border-radius: 10px;
+                          box-sizing: border-box;
+                      }
+                  }
+                  
+                  .form-container h2 {
+                      margin-bottom: 20px;
+                      color: #333;
+                  }
+                  
+                  .form-group {
+                      margin-bottom: 15px;
+                  }
+                  
+                  .form-control {
+                      border-radius: 5px;
+                      padding: 10px;
+                      box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
+                  }
+                  
+                  .btn {
+                      margin-top: 10px;
+                      border-radius: 5px;
+                  }
+                  
+                  .eye-icon {
+                      position: absolute;
+                      right: 15px;
+                      top: 38px;
+                      cursor: pointer;
+                      color: #007bff;
+                  }
+                  
+                  .close-icon {
+                      font-size: 24px;
+                      cursor: pointer;
+                      float: right;
+                  }
+                  
+                  .position-relative {
+                      position: relative;
+                  }
+                  
+                  .btn-primary:hover {
+                      background-color: #0056b3;
+                  }
+                  
+                  .btn-secondary:hover {
+                      background-color: #6c757d;
+                  }
+                  
+                  .scroll-to-top {
+                      background-color: #0066cc;
+                      /* Button color */
+                      color: white;
+                      /* Text color */
+                      border: none;
+                      /* No border */
+                      border-radius: 5px;
+                      /* Rounded corners */
+                      padding: 10px 15px;
+                      /* Padding for better appearance */
+                      cursor: pointer;
+                      /* Pointer cursor on hover */
+                      margin-top: 10px;
+                      /* Space between the paragraph and button */
+                  }
+                  
+                  .scroll-to-top:hover {
+                      background-color: #005bb5;
+                      /* Darker shade on hover */
+                  }
+              </style>
+
 <!-- Toggle Password Visibility Script -->
 <script>
     function togglePasswordVisibility(passwordFieldId, iconId) {
diff --git a/contact_us.html b/contact_us.html
index 16697ac..3c0b15e 100644
--- a/contact_us.html
+++ b/contact_us.html
@@ -115,332 +115,274 @@ <h2>WordWise</h2>
       </div>
 
 
+      
       <div class="dropdown">
         <!-- Profile Icon -->
 
         <a href="javascript:void(0);" class="profile-link profile-icon" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
             <i class="fas fa-user-circle"></i>
+
         </a>
 
         <!-- Dropdown Menu -->
         <ul class="dropdown-menu" id="profileMenu" style="display: none; position: absolute; z-index: 1;">
-            <li><a href="./profile.html">My Profile</a></li>
+          
             <li><a href="#login" onclick="openForm('login')">Login</a></li>
             <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
         </ul>
     </div>
-
     <script>
-        // Function to toggle the visibility of the dropdown menu
-        function toggleMenu() {
-            const menu = document.getElementById('profileMenu');
-            menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
-        }
-
-        // Close the dropdown if the user clicks outside of it
-        window.onclick = function(event) {
-            const menu = document.getElementById('profileMenu');
-            if (!event.target.matches('.profile-link img') && menu.style.display === 'block') {
-                menu.style.display = 'none';
-            }
-        }
-    
-        // Update the profile image in the dropdown menu based on the selected avatar stored in localStorage
-        document.addEventListener("DOMContentLoaded", function() {
-            // Retrieve the saved avatar from localStorage
-            const savedAvatar = localStorage.getItem("selectedAvatar");
-    
-            // If an avatar is saved, update the profile image
-            if (savedAvatar) {
-                const dropdownProfileImage = document.getElementById("dropdownProfileImage");
-                if (dropdownProfileImage) {
-                    dropdownProfileImage.src = savedAvatar;  // Update the image source
-                }
-            }
-        });
-    </script>
-
-
-
-      <!--  Login Form -->
-      <div class="form-popup" id="loginForm">
-        <form class="form-container" onsubmit="return validateLoginForm()" style="max-width: 400px; margin: auto;">
-          <span class="close-icon" onclick="closeForm('login')">&times;</span>
-          <h2 class="text-center">Login</h2>
-          <div class="form-group">
-            <label for="loginEmail"><b>Email</b></label>
-            <input type="email" class="form-control" id="loginEmail" placeholder="Enter Email" name="email" required>
-          </div>
-          <div class="form-group position-relative">
-            <label for="loginPsw"><b>Password</b></label>
-            <input type="password" class="form-control" id="loginPsw" placeholder="Enter Password" name="psw" required
-              minlength="6">
-            <i class="bi bi-eye eye-icon" id="toggleLoginPassword"
-              onclick="togglePasswordVisibility('loginPsw', 'toggleLoginPassword')"></i>
-          </div>
-          <div class="forgot">
-            <a href="javascript:void(0);" onclick="openForgotPassword()">Forgot Password?</a>
-          </div>
-          <button type="submit" class="btn btn-primary w-100 mb-3">LOGIN</button>
-          <!-- Google Sign-In Button -->
-          <button type="button" class="btn google-btn" onclick="handleGoogleLogin()">
-            <img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
-            Sign in with Google
-          </button>
-        </form>
-      </div>
-
+      function toggleMenu() {
+          const menu = document.getElementById('profileMenu');
+          menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
+      }
+  
+      // Close the dropdown if the user clicks outside of it
+      window.onclick = function(event) {
+          const menu = document.getElementById('profileMenu');
+          if (!event.target.matches('.profile-link img') && menu.style.display === 'block') {
+              menu.style.display = 'none';
+          }
+      }
+  </script>
+  
+   
+  
+      
+                <!-- Login Form -->
+                <div class="form-popup" id="loginForm">
+                  <form class="form-container" onsubmit="return validateLoginForm()" style="max-width: 400px; margin: auto;">
+                      <span class="close-icon" onclick="closeForm('login')">&times;</span>
+                      <h2 class="text-center">Login</h2>
+                      <div class="form-group">
+                          <label for="loginEmail"><b>Email</b></label>
+                          <input type="email" class="form-control" id="loginEmail" placeholder="Enter Email" name="email" required>
+                      </div>
+                      <div class="form-group position-relative">
+                          <label for="loginPsw"><b>Password</b></label>
+                          <input type="password" class="form-control" id="loginPsw" placeholder="Enter Password" name="psw" required minlength="6">
+                          <i class="bi bi-eye eye-icon" id="toggleLoginPassword" onclick="togglePasswordVisibility('loginPsw', 'toggleLoginPassword')"></i>
+                      </div>
+                      <div class="remember-me">
+                          <input type="checkbox" id="remember-me" />
+                          <label for="remember-me">Remember Me</label>
+                      </div>
+                      <div class="forgot">
+                          <a href="javascript:void(0);" onclick="openForgotPassword()">Forgot Password?</a>
+                      </div>
+                      <button type="submit" class="btn btn-secondary w-100 mb-3">LOGIN</button>
+                      <style>
+                          .btn:hover {
+                              transition: 0.5s ease;
+                          }
+                      </style>
+                      <!-- Google Login Button -->
+                      <button type="button" class="btn google-btn" onclick="window.location.href='https://accounts.google.com/v3/signin/identifier?authuser=0&continue=https%3A%2F%2Fmyaccount.google.com%2F&ec=GAlAwAE&hl=en_GB&service=accountsettings&flowName=GlifWebSignIn&flowEntry=AddSession&dsh=S1527110508%3A1729760212648495&ddm=0'">
+                          <img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
+                          Sign in with Google</button>
+                      <button type="button" class="btn btn-secondary w-100" onclick="closeForm('login')">CLOSE</button>
+                      <!-- Link to Signup Page -->
+                      <div class="new">
+                          <p>Don't have an account? <a href="javascript:void(0);" onclick="openForm('signup')">Sign up
+                                  here</a></p>
+                      </div>
+                  </form>
+              </div>
 
-      <!-- Signup Form -->
-      <div class="form-popup" id="signupForm">
-        <form class="form-container" onsubmit="return validateSignupForm()" style="max-width: 400px; margin: auto;">
-          <span class="close-icon" onclick="closeForm('signup')">&times;</span>
-          <h2 class="text-center">Signup</h2>
-          <div class="form-group">
-            <label for="name"><b>Full Name</b></label>
-            <input type="text" class="form-control" id="name" placeholder="Enter Full Name" name="name"
-                            required pattern="[a-zA-Z ]+"
-                        oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')"
-                        oninput="this.setCustomValidity('')">
-          </div>
-          <div class="form-group">
-            <label for="signupEmail"><b>Email</b></label>
-            <input type="email" class="form-control" id="signupEmail" placeholder="Enter Email" name="email" required>
-          </div>
-          <div class="form-group position-relative">
-            <label for="signupPsw"><b>Password</b></label>
-            <input type="password" id="signupPsw" placeholder="Enter Password" name="psw" required minlength="6"
-              oninput="checkPasswordStrength()">
-            <i class="bi bi-eye eye-icon" id="toggleSignupPassword"
-              onclick="togglePasswordVisibility('signupPsw', 'toggleSignupPassword')"></i>
-            <div id="passwordStrength" class="strength-meter"></div>
-          </div>
+              <!-- Signup Form -->
+              <div class="form-popup" id="signupForm">
+                  <form class="form-container" onsubmit="return validateSignupForm()" style="max-width: 400px; margin: auto;">
+                      <span class="close-icon" onclick="closeForm('signup')">&times;</span>
+                      <h2 class="text-center">Signup</h2>
+                      <div class="form-group">
+                          <label for="name"><b>Full Name</b></label>
+                          <input type="text" class="form-control" id="name" placeholder="Enter Full Name" name="name" required>
+                      </div>
+                      <div class="form-group">
+                          <label for="signupEmail"><b>Email</b></label>
+                          <input type="email" class="form-control" id="signupEmail" placeholder="Enter Email" name="email" required>
+                      </div>
+                      <div class="form-group position-relative">
+                          <label for="signupPsw"><b>Password</b></label>
+                          <input type="password" class="form-control" id="signupPsw" placeholder="Enter Password" name="psw" required minlength="6">
+                          <i class="bi bi-eye eye-icon" id="toggleSignupPassword" onclick="togglePasswordVisibility('signupPsw', 'toggleSignupPassword')"></i>
+                      </div>
+                      <div class="form-group position-relative">
+                          <label for="confirmPsw"><b>Confirm Password</b></label>
+                          <input type="password" class="form-control" id="confirmPsw" placeholder="Confirm Password" name="confirmPsw" required minlength="6">
+                          <i class="bi bi-eye eye-icon" id="toggleConfirmPassword" onclick="togglePasswordVisibility('confirmPsw', 'toggleConfirmPassword')"></i>
+                      </div>
+                      <div class="remember-me">
+                          <input type="checkbox" id="remember-me" />
+                          <label for="remember-me">Remember Me</label>
+                      </div>
+                      <button type="submit" class="btn btn-primary w-100 mb-3">SIGNUP</button>
+                      <!-- Google Sign-In Button -->
+                      <button type="button" class="btn google-btn" onclick="window.location.href='https://accounts.google.com/v3/signin/identifier?authuser=0&continue=https%3A%2F%2Fmyaccount.google.com%2F&ec=GAlAwAE&hl=en_GB&service=accountsettings&flowName=GlifWebSignIn&flowEntry=AddSession&dsh=S1527110508%3A1729760212648495&ddm=0'">
+                          <img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
+                          Sign in with Google</button>
+                      <button type="button" class="btn btn-secondary w-100" onclick="closeForm('signup')">CLOSE</button>
+                      <!-- Link to Login Page -->
+                      <div class="new">
+                          <p>Already have an account? <a href="javascript:void(0);" onclick="openForm('login')">Login
+                                  here</a></p>
+                      </div>
+                  </form>
+              </div>
 
-          <div class="form-group position-relative">
-            <label for="confirmPsw"><b>Confirm Password</b></label>
-            <input type="password" class="form-control" id="confirmPsw" placeholder="Confirm Password" name="confirmPsw"
-              required minlength="6">
-            <i class="bi bi-eye eye-icon" id="toggleConfirmPassword"
-              onclick="togglePasswordVisibility('confirmPsw', 'toggleConfirmPassword')"></i>
+              <!-- Forgot Password Modal -->
+              <div id="forgot-password-modal" class="modal">
+                  <div class="form-container modal-content">
+                      <h2>Forgot Password</h2>
+                      <p>Please enter your email address to reset your password.</p>
 
+                      <label for="email">Email Address</label>
+                      <input type="email" id="email" placeholder="Enter your email" required />
 
-              <!-- Added missing button  -->
+                      <button class="btn" onclick="submitForgotPassword()">Submit</button>
+                      <button class="btn cancel" onclick="closeForgotPasswordModal()">Cancel</button>
+                  </div>
+              </div>
 
-              <button type="submit" class="btn btn-primary w-100 mb-3">SIGNUP</button>
-              <!-- Google Sign-In Button -->
-               <button type="button" class="btn google-btn" onclick="handleGoogleLogin()">
-                <img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
-                Sign in with Google</button>
-          </div>
-        </div>
-  
-        <!-- Toggle Password Visibility Script -->
-        <script>
-          function togglePasswordVisibility(passwordFieldId, iconId) {
-            const passwordField = document.getElementById(passwordFieldId);
-            const togglePassword = document.getElementById(iconId);
-            if (passwordField.type === 'password') {
-              passwordField.type = 'text';
-              togglePassword.classList.remove('bi-eye');
-              togglePassword.classList.add('bi-eye-slash');
-            } else {
-              passwordField.type = 'password';
-              togglePassword.classList.remove('bi-eye-slash');
-              togglePassword.classList.add('bi-eye');
-            }
-          }
-          function checkPasswordStrength() {
-            var strengthMeter = document.getElementById('passwordStrength');
-            var password = document.getElementById('signupPsw').value;
-            var strength = 0;
-  
-            if (password.length >= 6) strength++;
-            if (password.match(/[a-z]+/)) strength++;
-            if (password.match(/[A-Z]+/)) strength++;
-            if (password.match(/[0-9]+/)) strength++;
-            if (password.match(/[\W]+/)) strength++;
+              <!-- Toggle Password Visibility Script -->
+              <script>
+                  function togglePasswordVisibility(passwordFieldId, iconId) {
+                      const passwordField = document.getElementById(passwordFieldId);
+                      const togglePassword = document.getElementById(iconId);
+                      if (passwordField.type === 'password') {
+                          passwordField.type = 'text';
+                          togglePassword.classList.remove('bi-eye');
+                          togglePassword.classList.add('bi-eye-slash');
+                      } else {
+                          passwordField.type = 'password';
+                          togglePassword.classList.remove('bi-eye-slash');
+                          togglePassword.classList.add('bi-eye');
+                      }
+                  }
+              </script>
+              <script>
+                  document.addEventListener("DOMContentLoaded", function () {
+                      const rememberMeCheckbox = document.getElementById("remember-me");
+                      const usernameInput = document.getElementById("username");
+
+                      // Load saved username if it exists
+                      if (localStorage.getItem("rememberedUsername")) {
+                          usernameInput.value = localStorage.getItem("rememberedUsername");
+                          rememberMeCheckbox.checked = true;
+                      }
+
+                      // When the form is submitted, save the username if "Remember Me" is checked
+                      document.querySelector(".sign-in-form").addEventListener("submit", function (e) {
+                          e.preventDefault(); // Prevent default form submission
+
+                          if (rememberMeCheckbox.checked) {
+                              localStorage.setItem("rememberedUsername", usernameInput.value);
+                          } else {
+                              localStorage.removeItem("rememberedUsername");
+                          }
+
+                          // Add form submission logic here
+                      });
+                  });
+              </script>
+
+
+  <!-- CSS Styles -->
   
-            switch (strength) {
-              case 0:
-              case 1:
-                strengthMeter.style.width = '20%';
-                strengthMeter.style.backgroundColor = 'red';
-                strengthMeter.textContent = 'Weak';
-                break;
-              case 2:
-                strengthMeter.style.width = '40%';
-                strengthMeter.style.backgroundColor = 'orange';
-                strengthMeter.textContent = 'Fair';
-                break;
-              case 3:
-                strengthMeter.style.width = '60%';
-                strengthMeter.style.backgroundColor = 'yellow';
-                strengthMeter.textContent = 'Good';
-                break;
-              case 4:
-                strengthMeter.style.width = '80%';
-                strengthMeter.style.backgroundColor = 'blue';
-                strengthMeter.textContent = 'Strong';
-                break;
-              case 5:
-                strengthMeter.style.width = '100%';
-                strengthMeter.style.backgroundColor = 'green';
-                strengthMeter.textContent = 'Very Strong';
-                break;
-            }
-          }
-        </script>
-  
-        <!-- Updated CSS Styles -->
-        <style>
-          .form-popup {
-            display: none;
-            position: fixed;
-            z-index: 9;
-            left: 50%;
-            top: 50%;
-            transform: translate(-50%, -50%);
-            width: 100%;
-            max-width: 500px;
-            padding: 20px;
-            background-color: white;
-            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.6);
-            border-radius: 10px;
-            box-sizing: border-box;
-            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Added transition for movement and shadow effect */
-          }
-        
-          .form-container h2 {
-            margin-bottom: 20px;
-            color: #333;
-            text-align: center; /* Centered the heading */
-          }
-        
-          .form-group {
-            margin-bottom: 15px;
-            display: flex;
-            flex-direction: column; /* Ensures vertical stacking of form elements */
-            align-items: stretch; /* Stretches form controls to fill the container */
-          }
-        
-          .form-control {
-            border-radius: 5px;
-            padding: 12px;
-            font-size: 16px;
-            line-height: 1.5;
-            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
-            width: 100%;
-            transition: box-shadow 0.3s; /* Added transition for focus effect */
-          }
-        
-          .form-control:focus {
-            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Enhanced focus effect */
-            outline: none; /* Remove default outline */
-          }
-        
-          .forgot {
-            text-align: right;
-            margin-left: 50px;
-            font-size: 10px;
-            margin-top: -40px;
-          }
-        
-          .btn {
-            margin-top: 10px;
-            border-radius: 5px;
-            padding: 10px 20px; /* Increased padding for better button size */
-            font-size: 16px; /* Adjusted font size */
-            text-align: center; /* Center text within the button */
-          }
-        
-          .eye-icon {
-            position: absolute;
-            right: 15px;
-            top: 38px;
-            cursor: pointer;
-            color: #007bff;
-            font-size: 20px; /* Increased icon size */
-            transition: transform 0.3s; /* Added transition for hover effect */
-          }
-        
-          .eye-icon:hover {
-            transform: scale(1.2); /* Scale icon on hover */
-          }
-        
-          .close-icon {
-            font-size: 24px;
-            cursor: pointer;
-            float: right;
-            transition: transform 0.3s; /* Added transition for hover effect */
-          }
-        
-          .close-icon:hover {
-            transform: scale(1.2); /* Scale icon on hover */
-          }
-        
-          .position-relative {
-            position: relative;
-          }
-        
-          /* Login button jumping issue fix */
-          .btn-primary {
-            transition: all 0.3s ease; /* Smooth transition */
-            background-color: #007bff; /* Original button color */
-            color: white; /* Text color */
-          }
-        
-          .btn-primary:hover {
-            background-color: #0056b3; /* Hover color */
-          }
-        
-          .google-btn {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background-color: #db4437; /* Google button color */
-            color: white; /* Text color */
-            padding: 10px 20px; /* Increased padding for better button size */
-            border-radius: 5px;
-            transition: background-color 0.3s; /* Added transition for hover effect */
-          }
-        
-          .google-btn:hover {
-            background-color: #c13525; /* Hover color for Google button */
-          }
-        
-          .google-logo {
-            width: 24px; /* Increased logo size */
-            height: 24px; /* Increased logo size */
-            margin-right: 10px;
-          }
-        
-          .strength-meter {
-            height: 10px;
-            width: 0;
-            transition: width 0.3s;
-            margin-top: 5px;
-            text-align: center;
-            color: white;
-            font-size: 12px;
-          }
-        
-          /* Styles for contact icons */
-          .contact-icons {
-            display: flex; /* Changed to flex for horizontal alignment */
-            justify-content: center; /* Center the icons */
-            margin-top: 20px; /* Added margin for spacing */
-          }
-        
-          .contact-icons a {
-            margin: 0 10px; /* Horizontal spacing between icons */
-            transition: transform 0.3s; /* Added transition for hover effect */
-          }
-        
-          .contact-icons a:hover {
-            transform: scale(1.1); /* Scale icons on hover */
-          }
-        </style>
-        
+                <!-- Styles -->
+                <style>
+                  .form-popup {
+                      .form-popup {
+                          display: none;
+                          /* Hidden by default */
+                          position: fixed;
+                          /* Stay in place */
+                          z-index: 9;
+                          /* Sit on top */
+                          left: 50%;
+                          top: 50%;
+                          transform: translate(-50%, -50%);
+                          /* Center the popup */
+                          width: 100%;
+                          max-width: 500px;
+                          /* Limit width */
+                          padding: 20px;
+                          background-color: white;
+                          box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.6);
+                          border-radius: 10px;
+                          box-sizing: border-box;
+                      }
+                  }
+                  
+                  .form-container h2 {
+                      margin-bottom: 20px;
+                      color: #333;
+                  }
+                  
+                  .form-group {
+                      margin-bottom: 15px;
+                  }
+                  
+                  .form-control {
+                      border-radius: 5px;
+                      padding: 10px;
+                      box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
+                  }
+                  
+                  .btn {
+                      margin-top: 10px;
+                      border-radius: 5px;
+                  }
+                  
+                  .eye-icon {
+                      position: absolute;
+                      right: 15px;
+                      top: 38px;
+                      cursor: pointer;
+                      color: #007bff;
+                  }
+                  
+                  .close-icon {
+                      font-size: 24px;
+                      cursor: pointer;
+                      float: right;
+                  }
+                  
+                  .position-relative {
+                      position: relative;
+                  }
+                  
+                  .btn-primary:hover {
+                      background-color: #0056b3;
+                  }
+                  
+                  .btn-secondary:hover {
+                      background-color: #6c757d;
+                  }
+                  
+                  .scroll-to-top {
+                      background-color: #0066cc;
+                      /* Button color */
+                      color: white;
+                      /* Text color */
+                      border: none;
+                      /* No border */
+                      border-radius: 5px;
+                      /* Rounded corners */
+                      padding: 10px 15px;
+                      /* Padding for better appearance */
+                      cursor: pointer;
+                      /* Pointer cursor on hover */
+                      margin-top: 10px;
+                      /* Space between the paragraph and button */
+                  }
+                  
+                  .scroll-to-top:hover {
+                      background-color: #005bb5;
+                      /* Darker shade on hover */
+                  }
+              </style>
+
   
   
         <script src="signup.js"></script>
diff --git a/give_feedback.html b/give_feedback.html
index 2047ef6..52cc779 100644
--- a/give_feedback.html
+++ b/give_feedback.html
@@ -122,338 +122,268 @@ <h2>WordWise</h2>
 
         <a href="javascript:void(0);" class="profile-link profile-icon" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
             <i class="fas fa-user-circle"></i>
+
         </a>
-    
 
         <!-- Dropdown Menu -->
         <ul class="dropdown-menu" id="profileMenu" style="display: none; position: absolute; z-index: 1;">
-            <li><a href="./profile.html">My Profile</a></li>
+          
             <li><a href="#login" onclick="openForm('login')">Login</a></li>
             <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
         </ul>
     </div>
-
     <script>
-        // Function to toggle the visibility of the dropdown menu
-        function toggleMenu() {
-            const menu = document.getElementById('profileMenu');
-            menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
-        }
-
-        // Close the dropdown if the user clicks outside of it
-        window.onclick = function(event) {
-            const menu = document.getElementById('profileMenu');
-            if (!event.target.matches('.profile-link img') && menu.style.display === 'block') {
-                menu.style.display = 'none';
-            }
-        }
-    
-        // Update the profile image in the dropdown menu based on the selected avatar stored in localStorage
-        document.addEventListener("DOMContentLoaded", function() {
-            // Retrieve the saved avatar from localStorage
-            const savedAvatar = localStorage.getItem("selectedAvatar");
-    
-            // If an avatar is saved, update the profile image
-            if (savedAvatar) {
-                const dropdownProfileImage = document.getElementById("dropdownProfileImage");
-                if (dropdownProfileImage) {
-                    dropdownProfileImage.src = savedAvatar;  // Update the image source
-                }
-            }
-        });
-    </script>
-
-
-      <!--  Login Form -->
-      <div class="form-popup" id="loginForm">
-        <form class="form-container" onsubmit="return validateLoginForm()" style="max-width: 400px; margin: auto;">
-          <span class="close-icon" onclick="closeForm('login')">&times;</span>
-          <h2 class="text-center">Login</h2>
-          <div class="form-group">
-            <label for="loginEmail"><b>Email</b></label>
-            <input type="email" class="form-control" id="loginEmail" placeholder="Enter Email" name="email" required>
-          </div>
-          <div class="form-group position-relative">
-            <label for="loginPsw"><b>Password</b></label>
-            <input type="password" class="form-control" id="loginPsw" placeholder="Enter Password" name="psw" required
-              minlength="6">
-            <i class="bi bi-eye eye-icon" id="toggleLoginPassword"
-              onclick="togglePasswordVisibility('loginPsw', 'toggleLoginPassword')"></i>
-          </div>
-          <div class="forgot">
-            <a href="javascript:void(0);" onclick="openForgotPassword()">Forgot Password?</a>
-          </div>
-          <button type="submit" class="btn btn-primary w-100 mb-3">LOGIN</button>
-          <!-- Google Sign-In Button -->
-          <button type="button" class="btn google-btn" onclick="handleGoogleLogin()">
-            <img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
-            Sign in with Google
-          </button>
-        </form>
-      </div>
-
-
-      <!-- Signup Form -->
-      <div class="form-popup" id="signupForm">
-        <form class="form-container" onsubmit="return validateSignupForm()" style="max-width: 400px; margin: auto;">
-          <span class="close-icon" onclick="closeForm('signup')">&times;</span>
-          <h2 class="text-center">Signup</h2>
-          <div class="form-group">
-            <label for="name"><b>Full Name</b></label>
-            <input type="text" class="form-control" id="name" placeholder="Enter Full Name" name="name" required>
-          </div>
-          <div class="form-group">
-            <label for="signupEmail"><b>Email</b></label>
-            <input type="email" class="form-control" id="signupEmail" placeholder="Enter Email" name="email" required>
-          </div>
-          <div class="form-group position-relative">
-            <label for="signupPsw"><b>Password</b></label>
-            <input type="password" id="signupPsw" placeholder="Enter Password" name="psw" required minlength="6"
-              oninput="checkPasswordStrength()">
-            <i class="bi bi-eye eye-icon" id="toggleSignupPassword"
-              onclick="togglePasswordVisibility('signupPsw', 'toggleSignupPassword')"></i>
-            <div id="passwordStrength" class="strength-meter"></div>
-          </div>
-
-          <div class="form-group position-relative">
-            <label for="confirmPsw"><b>Confirm Password</b></label>
-            <input type="password" class="form-control" id="confirmPsw" placeholder="Confirm Password" name="confirmPsw"
-              required minlength="6">
-            <i class="bi bi-eye eye-icon" id="toggleConfirmPassword"
-              onclick="togglePasswordVisibility('confirmPsw', 'toggleConfirmPassword')"></i>
-main
-          </div>
-        </div>
-  
-        <!-- Toggle Password Visibility Script -->
-        <script>
-          function togglePasswordVisibility(passwordFieldId, iconId) {
-            const passwordField = document.getElementById(passwordFieldId);
-            const togglePassword = document.getElementById(iconId);
-            if (passwordField.type === 'password') {
-              passwordField.type = 'text';
-              togglePassword.classList.remove('bi-eye');
-              togglePassword.classList.add('bi-eye-slash');
-            } else {
-              passwordField.type = 'password';
-              togglePassword.classList.remove('bi-eye-slash');
-              togglePassword.classList.add('bi-eye');
-            }
-          }
-          function checkPasswordStrength() {
-            var strengthMeter = document.getElementById('passwordStrength');
-            var password = document.getElementById('signupPsw').value;
-            var strength = 0;
-  
-            if (password.length >= 6) strength++;
-            if (password.match(/[a-z]+/)) strength++;
-            if (password.match(/[A-Z]+/)) strength++;
-            if (password.match(/[0-9]+/)) strength++;
-            if (password.match(/[\W]+/)) strength++;
-  
-            switch (strength) {
-              case 0:
-              case 1:
-                strengthMeter.style.width = '20%';
-                strengthMeter.style.backgroundColor = 'red';
-                strengthMeter.textContent = 'Weak';
-                break;
-              case 2:
-                strengthMeter.style.width = '40%';
-                strengthMeter.style.backgroundColor = 'orange';
-                strengthMeter.textContent = 'Fair';
-                break;
-              case 3:
-                strengthMeter.style.width = '60%';
-                strengthMeter.style.backgroundColor = 'yellow';
-                strengthMeter.textContent = 'Good';
-                break;
-              case 4:
-                strengthMeter.style.width = '80%';
-                strengthMeter.style.backgroundColor = 'blue';
-                strengthMeter.textContent = 'Strong';
-                break;
-              case 5:
-                strengthMeter.style.width = '100%';
-                strengthMeter.style.backgroundColor = 'green';
-                strengthMeter.textContent = 'Very Strong';
-                break;
-            }
-          }
-        </script>
-  
-        <!-- Updated CSS Styles -->
-        <style>
-          .form-popup {
-            display: none;
-            position: fixed;
-            z-index: 9;
-            left: 50%;
-            top: 50%;
-            transform: translate(-50%, -50%);
-            width: 100%;
-            max-width: 500px;
-            padding: 20px;
-            background-color: white;
-            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.6);
-            border-radius: 10px;
-            box-sizing: border-box;
-          }
-  
-          .form-container h2 {
-            margin-bottom: 20px;
-            color: #333;
-          }
-  
-          .form-group {
-            margin-bottom: 15px;
-          }
-  
-          .form-control {
-            border-radius: 5px;
-            padding: 12px;
-            font-size: 16px;
-            line-height: 1.5;
-            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
-            width: 100%;
-          }
-  
-          .forgot {
-            text-align: right;
-            margin-left: 50px;
-            font-size: 10px;
-            margin-top: -40px;
-  
-          }
-  
-          .btn {
-            margin-top: 10px;
-            border-radius: 5px;
-          }
-  
-          .eye-icon {
-            position: absolute;
-            right: 15px;
-            top: 38px;
-            cursor: pointer;
-            color: #007bff;
-          }
-  
-          .close-icon {
-            font-size: 24px;
-            cursor: pointer;
-            float: right;
-          }
-  
-          .position-relative {
-            position: relative;
-          }
-  
-          /* Login button jumping issue fix */
-          .btn-primary {
-            transition: all 0.3s ease;
-            /* Smooth transition */
-          }
-  
-          .btn-primary:hover {
-            background-color: #0056b3;
-          }
-  
-          .google-btn {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
+      function toggleMenu() {
+          const menu = document.getElementById('profileMenu');
+          menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
+      }
   
-          .google-logo {
-            width: 20px;
-            height: 20px;
-            margin-right: 10px;
+      // Close the dropdown if the user clicks outside of it
+      window.onclick = function(event) {
+          const menu = document.getElementById('profileMenu');
+          if (!event.target.matches('.profile-link img') && menu.style.display === 'block') {
+              menu.style.display = 'none';
           }
+      }
+  </script>
   
-          .btn-primary:hover {
-            background-color: #0056b3;
-          }
+   
   
-          .strength-meter {
-            height: 10px;
-            width: 0;
-            transition: width 0.3s;
-            margin-top: 5px;
-            text-align: center;
-            color: white;
-            font-size: 12px;
-          }
-          .star-rating {
-      text-align: left;
-      display: flex;
-      justify-content: flex-end;
-    }
-
-    .star-rating label {
-      font-size: 25px;
-      color: #ddd;
-      cursor: pointer;
-    }
-
-    .star-rating input:checked~label {
-      color: #f39c12;
-    }
+      
+                <!-- Login Form -->
+                <div class="form-popup" id="loginForm">
+                  <form class="form-container" onsubmit="return validateLoginForm()" style="max-width: 400px; margin: auto;">
+                      <span class="close-icon" onclick="closeForm('login')">&times;</span>
+                      <h2 class="text-center">Login</h2>
+                      <div class="form-group">
+                          <label for="loginEmail"><b>Email</b></label>
+                          <input type="email" class="form-control" id="loginEmail" placeholder="Enter Email" name="email" required>
+                      </div>
+                      <div class="form-group position-relative">
+                          <label for="loginPsw"><b>Password</b></label>
+                          <input type="password" class="form-control" id="loginPsw" placeholder="Enter Password" name="psw" required minlength="6">
+                          <i class="bi bi-eye eye-icon" id="toggleLoginPassword" onclick="togglePasswordVisibility('loginPsw', 'toggleLoginPassword')"></i>
+                      </div>
+                      <div class="remember-me">
+                          <input type="checkbox" id="remember-me" />
+                          <label for="remember-me">Remember Me</label>
+                      </div>
+                      <div class="forgot">
+                          <a href="javascript:void(0);" onclick="openForgotPassword()">Forgot Password?</a>
+                      </div>
+                      <button type="submit" class="btn btn-secondary w-100 mb-3">LOGIN</button>
+                      <style>
+                          .btn:hover {
+                              transition: 0.5s ease;
+                          }
+                      </style>
+                      <!-- Google Login Button -->
+                      <button type="button" class="btn google-btn" onclick="window.location.href='https://accounts.google.com/v3/signin/identifier?authuser=0&continue=https%3A%2F%2Fmyaccount.google.com%2F&ec=GAlAwAE&hl=en_GB&service=accountsettings&flowName=GlifWebSignIn&flowEntry=AddSession&dsh=S1527110508%3A1729760212648495&ddm=0'">
+                          <img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
+                          Sign in with Google</button>
+                      <button type="button" class="btn btn-secondary w-100" onclick="closeForm('login')">CLOSE</button>
+                      <!-- Link to Signup Page -->
+                      <div class="new">
+                          <p>Don't have an account? <a href="javascript:void(0);" onclick="openForm('signup')">Sign up
+                                  here</a></p>
+                      </div>
+                  </form>
+              </div>
 
-    .star-rating input {
-      display: none;
-    }
+              <!-- Signup Form -->
+              <div class="form-popup" id="signupForm">
+                  <form class="form-container" onsubmit="return validateSignupForm()" style="max-width: 400px; margin: auto;">
+                      <span class="close-icon" onclick="closeForm('signup')">&times;</span>
+                      <h2 class="text-center">Signup</h2>
+                      <div class="form-group">
+                          <label for="name"><b>Full Name</b></label>
+                          <input type="text" class="form-control" id="name" placeholder="Enter Full Name" name="name" required>
+                      </div>
+                      <div class="form-group">
+                          <label for="signupEmail"><b>Email</b></label>
+                          <input type="email" class="form-control" id="signupEmail" placeholder="Enter Email" name="email" required>
+                      </div>
+                      <div class="form-group position-relative">
+                          <label for="signupPsw"><b>Password</b></label>
+                          <input type="password" class="form-control" id="signupPsw" placeholder="Enter Password" name="psw" required minlength="6">
+                          <i class="bi bi-eye eye-icon" id="toggleSignupPassword" onclick="togglePasswordVisibility('signupPsw', 'toggleSignupPassword')"></i>
+                      </div>
+                      <div class="form-group position-relative">
+                          <label for="confirmPsw"><b>Confirm Password</b></label>
+                          <input type="password" class="form-control" id="confirmPsw" placeholder="Confirm Password" name="confirmPsw" required minlength="6">
+                          <i class="bi bi-eye eye-icon" id="toggleConfirmPassword" onclick="togglePasswordVisibility('confirmPsw', 'toggleConfirmPassword')"></i>
+                      </div>
+                      <div class="remember-me">
+                          <input type="checkbox" id="remember-me" />
+                          <label for="remember-me">Remember Me</label>
+                      </div>
+                      <button type="submit" class="btn btn-primary w-100 mb-3">SIGNUP</button>
+                      <!-- Google Sign-In Button -->
+                      <button type="button" class="btn google-btn" onclick="window.location.href='https://accounts.google.com/v3/signin/identifier?authuser=0&continue=https%3A%2F%2Fmyaccount.google.com%2F&ec=GAlAwAE&hl=en_GB&service=accountsettings&flowName=GlifWebSignIn&flowEntry=AddSession&dsh=S1527110508%3A1729760212648495&ddm=0'">
+                          <img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
+                          Sign in with Google</button>
+                      <button type="button" class="btn btn-secondary w-100" onclick="closeForm('signup')">CLOSE</button>
+                      <!-- Link to Login Page -->
+                      <div class="new">
+                          <p>Already have an account? <a href="javascript:void(0);" onclick="openForm('login')">Login
+                                  here</a></p>
+                      </div>
+                  </form>
+              </div>
 
-    .submitbtn {
-      width: 100%;
-      background-color: #3498db;
-      color: white;
-      padding: 10px;
-      font-size: 16px;
-      border: none;
-      border-radius: 5px;
-      cursor: pointer;
-    }
+              <!-- Forgot Password Modal -->
+              <div id="forgot-password-modal" class="modal">
+                  <div class="form-container modal-content">
+                      <h2>Forgot Password</h2>
+                      <p>Please enter your email address to reset your password.</p>
 
-    .submitbtn:hover {
-      background-color: #2980b9;
-    }
+                      <label for="email">Email Address</label>
+                      <input type="email" id="email" placeholder="Enter your email" required />
 
-    .overlay {
-      display: none;
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.7);
-      z-index: 999;
-    }
-
-    .popup {
-      display: none;
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      background-color: white;
-      padding: 20px;
-      border-radius: 10px;
-      text-align: center;
-      z-index: 1000;
-    }
+                      <button class="btn" onclick="submitForgotPassword()">Submit</button>
+                      <button class="btn cancel" onclick="closeForgotPasswordModal()">Cancel</button>
+                  </div>
+              </div>
 
-    #closePopup {
-      background-color: #3498db;
-      color: white;
-      padding: 10px 20px;
-      font-size: 16px;
-      border: none;
-      border-radius: 5px;
-      cursor: pointer;
-    }
+              <!-- Toggle Password Visibility Script -->
+              <script>
+                  function togglePasswordVisibility(passwordFieldId, iconId) {
+                      const passwordField = document.getElementById(passwordFieldId);
+                      const togglePassword = document.getElementById(iconId);
+                      if (passwordField.type === 'password') {
+                          passwordField.type = 'text';
+                          togglePassword.classList.remove('bi-eye');
+                          togglePassword.classList.add('bi-eye-slash');
+                      } else {
+                          passwordField.type = 'password';
+                          togglePassword.classList.remove('bi-eye-slash');
+                          togglePassword.classList.add('bi-eye');
+                      }
+                  }
+              </script>
+              <script>
+                  document.addEventListener("DOMContentLoaded", function () {
+                      const rememberMeCheckbox = document.getElementById("remember-me");
+                      const usernameInput = document.getElementById("username");
+
+                      // Load saved username if it exists
+                      if (localStorage.getItem("rememberedUsername")) {
+                          usernameInput.value = localStorage.getItem("rememberedUsername");
+                          rememberMeCheckbox.checked = true;
+                      }
+
+                      // When the form is submitted, save the username if "Remember Me" is checked
+                      document.querySelector(".sign-in-form").addEventListener("submit", function (e) {
+                          e.preventDefault(); // Prevent default form submission
+
+                          if (rememberMeCheckbox.checked) {
+                              localStorage.setItem("rememberedUsername", usernameInput.value);
+                          } else {
+                              localStorage.removeItem("rememberedUsername");
+                          }
+
+                          // Add form submission logic here
+                      });
+                  });
+              </script>
+
+
+  <!-- CSS Styles -->
+  
+                <!-- Styles -->
+                <style>
+                  .form-popup {
+                      .form-popup {
+                          display: none;
+                          /* Hidden by default */
+                          position: fixed;
+                          /* Stay in place */
+                          z-index: 9;
+                          /* Sit on top */
+                          left: 50%;
+                          top: 50%;
+                          transform: translate(-50%, -50%);
+                          /* Center the popup */
+                          width: 100%;
+                          max-width: 500px;
+                          /* Limit width */
+                          padding: 20px;
+                          background-color: white;
+                          box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.6);
+                          border-radius: 10px;
+                          box-sizing: border-box;
+                      }
+                  }
+                  
+                  .form-container h2 {
+                      margin-bottom: 20px;
+                      color: #333;
+                  }
+                  
+                  .form-group {
+                      margin-bottom: 15px;
+                  }
+                  
+                  .form-control {
+                      border-radius: 5px;
+                      padding: 10px;
+                      box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
+                  }
+                  
+                  .btn {
+                      margin-top: 10px;
+                      border-radius: 5px;
+                  }
+                  
+                  .eye-icon {
+                      position: absolute;
+                      right: 15px;
+                      top: 38px;
+                      cursor: pointer;
+                      color: #007bff;
+                  }
+                  
+                  .close-icon {
+                      font-size: 24px;
+                      cursor: pointer;
+                      float: right;
+                  }
+                  
+                  .position-relative {
+                      position: relative;
+                  }
+                  
+                  .btn-primary:hover {
+                      background-color: #0056b3;
+                  }
+                  
+                  .btn-secondary:hover {
+                      background-color: #6c757d;
+                  }
+                  
+                  .scroll-to-top {
+                      background-color: #0066cc;
+                      /* Button color */
+                      color: white;
+                      /* Text color */
+                      border: none;
+                      /* No border */
+                      border-radius: 5px;
+                      /* Rounded corners */
+                      padding: 10px 15px;
+                      /* Padding for better appearance */
+                      cursor: pointer;
+                      /* Pointer cursor on hover */
+                      margin-top: 10px;
+                      /* Space between the paragraph and button */
+                  }
+                  
+                  .scroll-to-top:hover {
+                      background-color: #005bb5;
+                      /* Darker shade on hover */
+                  }
+              </style>
 
-        </style>
   
   
         <script src="signup.js"></script>
diff --git a/index.html b/index.html
index 2263314..3654ca3 100644
--- a/index.html
+++ b/index.html
@@ -10,46 +10,34 @@
     <link rel="shortcut icon" type="image/x-icon" href="/images/favi.webp" />
 
     <!--font awesome-->
-    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" as="style"
-        onload="this.onload=null;this.rel='stylesheet'">
-    <noscript>
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    </noscript>
+    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+    <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"></noscript>
     <!--swiper slider css-->
-    <link rel="preload" href="https://unpkg.com/swiper/swiper-bundle.min.css" as="style"
-        onload="this.onload=null;this.rel='stylesheet'">
-    <noscript>
-        <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
-    </noscript>
+    <link rel="preload" href="https://unpkg.com/swiper/swiper-bundle.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+    <noscript><link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"></noscript>
 
     <!-- bootstrap icons -->
-    <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
-        as="style" onload="this.onload=null;this.rel='stylesheet'">
-    <noscript>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
-    </noscript>
+    <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+    <noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"></noscript>
 
     <!-- for scroll reveal -->
-
+  
 
     <!--css-->
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="Scroll_and_progressbar.css">
-    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" as="style"
-        onload="this.onload=null;this.rel='stylesheet'">
-    <noscript>
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
-    </noscript>
+    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+    <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"></noscript>
 
 
 
-    <!-- Preconnect for faster loading of external resources -->
-    <link rel="preconnect" href="https://cdnjs.cloudflare.com">
-    <link rel="preconnect" href="https://unpkg.com">
-    <link rel="preconnect" href="https://cdn.jsdelivr.net">
+        <!-- Preconnect for faster loading of external resources -->
+        <link rel="preconnect" href="https://cdnjs.cloudflare.com">
+        <link rel="preconnect" href="https://unpkg.com">
+        <link rel="preconnect" href="https://cdn.jsdelivr.net">
     <style>
         /* Chatbot Container */
-
+        
         .chatbot-container {
             position: fixed;
             bottom: 20px;
@@ -59,9 +47,8 @@
             z-index: 1000;
             /* Ensure it appears above other elements */
         }
-
         /* Chatbot Button */
-
+        
         .chatbot-button {
             background-color: #007bff;
             /* Change to your preferred color */
@@ -76,18 +63,16 @@
             height: 50px;
             /* Adjusted size */
         }
-
         /* Button Image */
-
+        
         .chatbot-button img {
             width: 30px;
             /* Adjusted image size */
             height: 30px;
             /* Adjusted image size */
         }
-
         /* Tooltip Text */
-
+        
         .tooltip-text {
             display: none;
             /* Hide by default */
@@ -106,16 +91,14 @@
             /* Prevent text from wrapping */
             line-height: 20px
         }
-
         /* Show Tooltip on Hover */
-
+        
         .chatbot-button:hover .tooltip-text {
             display: block;
             /* Show on hover */
         }
-
         /* Chat Window Styles */
-
+        
         .chat-window {
             position: fixed;
             bottom: 90px;
@@ -134,9 +117,8 @@
             z-index: 1000;
             /* Ensure it appears above other elements */
         }
-
         /* Iframe for Chatbot HTML */
-
+        
         #chat-iframe {
             width: 100%;
             /* Full width of the chat window */
@@ -145,61 +127,54 @@
             border: none;
             /* Remove border */
         }
-
+        
         @media (max-width: 1200px) {
             .footer-container {
                 padding: 20px;
             }
-
             .col-3-main {
                 flex-direction: row;
                 flex-wrap: wrap;
             }
-
             .col-3 {
                 width: 33.33%;
             }
         }
-
+        
         @media (max-width: 992px) {
             .col-3 {
                 width: 50%;
                 /* Stack 2 columns side by side on medium screens */
             }
         }
-
+        
         @media (max-width: 768px) {
             .col-3 {
                 width: 100%;
                 /* Stack all columns vertically on small screens */
                 margin-bottom: 20px;
             }
-
             .feature-post div {
                 flex-direction: column;
             }
-
             .tags {
                 text-align: center;
             }
         }
-
+        
         @media (max-width: 576px) {
             .feature-post div {
                 align-items: center;
             }
-
             .tags.social {
                 justify-content: center;
             }
-
             .wordwise-footer-content {
                 text-align: center;
             }
         }
-
         /* Optional: You can also set max-width for images */
-
+        
         img.object-fit {
             max-width: 100%;
             /* Makes images responsive */
@@ -213,7 +188,7 @@
             max-width: 350px;
             padding: 20px;
         }
-
+        
         .form-group input {
             width: 100%;
             padding: 1px;
@@ -222,13 +197,12 @@
             /* box-sizing: border-box; */
             font-size: 16px;
         }
-
+        
         .form-container h2 {
             font-size: 24px;
             margin-bottom: 20px;
             text-align: center;
         }
-
         /* .btn {
     background-color: #4CAF50;
     color: white;
@@ -239,15 +213,15 @@
     width: 100%;
     font-size: 16px;
 } */
-
+        
         .btn:hover {
             opacity: 0.8;
         }
-
+        
         .cancel {
             background-color: #f44336;
         }
-
+        
         .toggle-button {
             cursor: pointer;
             color: #007bff;
@@ -277,11 +251,10 @@
     <!-- Styles -->
     <style>
         /* General Styles */
-
+        
         .logo h1 a {
             font-size: 40px;
         }
-
         /* .nav-links1 {
     display: flex;
     gap: 30px;
@@ -375,7 +348,7 @@
         font-size: 24px;
     }
 } */
-
+        
         .dropdown-menu {
             display: none;
             position: absolute;
@@ -384,7 +357,7 @@
             box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
             z-index: 1;
         }
-
+        
         .dropdown:hover .dropdown-menu {
             display: block;
         }
@@ -420,66 +393,48 @@ <h2>WordWise</h2>
 
                 <div class="dropdown">
                     <!-- Profile Icon -->
-
- 
-                    <a href="javascript:void(0);" class="profile-link"
-                        style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
-                        <img id="dropdownProfileImage" src="https://i.postimg.cc/NFFmtc9K/xnz-Mst5-V-400x400.jpg"
-                            alt="Profile Icon"
-                            style="width: 50px; height: 50px; border-radius: 50%; margin-top: -17px;">
-
+        
+                    <a href="javascript:void(0);" class="profile-link profile-icon" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
+                        <i class="fas fa-user-circle"></i>
+        
                     </a>
-
- 
-
+            
                     <!-- Dropdown Menu -->
                     <ul class="dropdown-menu" id="profileMenu" style="display: none; position: absolute; z-index: 1;">
-                        <li id="profileLink" style="display: none;"><a href="./profile.html"
-                                onclick="toggleProfileMenu()">My Profile</a></li>
-                        <li id="loginLink"><a href="#login" onclick="openForm('login')">Login</a></li>
-                        <li id="signupLink"><a href="#signup" onclick="openForm('signup')">Signup</a></li>
-                        <li id="logoutLink" style="display: none;"><a href="javascript:void(0);"
-                                onclick="logoutUser()">Logout</a></li>
+                    
+                        <li><a href="#login" onclick="openForm('login')">Login</a></li>
+                        <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
                     </ul>
                 </div>
-
-
-
+                
                 <script>
                     function toggleMenu() {
                         const menu = document.getElementById('profileMenu');
                         menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
                     }
-
+                
                     // Close the dropdown if the user clicks outside of it
-                    window.onclick = function (event) {
+                    window.onclick = function(event) {
                         const menu = document.getElementById('profileMenu');
                         if (!event.target.matches('.profile-link img') && menu.style.display === 'block') {
                             menu.style.display = 'none';
                         }
                     }
- 
                 </script>
-
+                
                 <!-- Login Form -->
                 <div class="form-popup" id="loginForm">
-                    <!-- Someone either didnt give the Javascript for this or some pr ended up deleting it -->
-                    <!--the validateLoginForm is not there... -->
-                    <form class="form-container" onsubmit="validateLoginForm()" style="max-width: 400px; margin: auto;">
- 
+                    <form class="form-container" onsubmit="return validateLoginForm()" style="max-width: 400px; margin: auto;">
                         <span class="close-icon" onclick="closeForm('login')">&times;</span>
                         <h2 class="text-center">Login</h2>
                         <div class="form-group">
                             <label for="loginEmail"><b>Email</b></label>
-                            <input type="email" class="form-control" id="loginEmail" placeholder="Enter Email"
-                                name="email" required>
+                            <input type="email" class="form-control" id="loginEmail" placeholder="Enter Email" name="email" required>
                         </div>
                         <div class="form-group position-relative">
                             <label for="loginPsw"><b>Password</b></label>
-                            <input type="password" class="form-control" id="loginPsw" placeholder="Enter Password"
-                                name="psw" required minlength="6">
-                            <i class="bi bi-eye eye-icon" id="toggleLoginPassword"
-                                onclick="togglePasswordVisibility('loginPsw', 'toggleLoginPassword')"></i>
+                            <input type="password" class="form-control" id="loginPsw" placeholder="Enter Password" name="psw" required minlength="6">
+                            <i class="bi bi-eye eye-icon" id="toggleLoginPassword" onclick="togglePasswordVisibility('loginPsw', 'toggleLoginPassword')"></i>
                         </div>
                         <div class="remember-me">
                             <input type="checkbox" id="remember-me" />
@@ -495,12 +450,10 @@ <h2 class="text-center">Login</h2>
                             }
                         </style>
                         <!-- Google Login Button -->
-                        <button type="button" class="btn google-btn"
-                            onclick="window.location.href='https://accounts.google.com/v3/signin/identifier?authuser=0&continue=https%3A%2F%2Fmyaccount.google.com%2F&ec=GAlAwAE&hl=en_GB&service=accountsettings&flowName=GlifWebSignIn&flowEntry=AddSession&dsh=S1527110508%3A1729760212648495&ddm=0'">
+                        <button type="button" class="btn google-btn" onclick="window.location.href='https://accounts.google.com/v3/signin/identifier?authuser=0&continue=https%3A%2F%2Fmyaccount.google.com%2F&ec=GAlAwAE&hl=en_GB&service=accountsettings&flowName=GlifWebSignIn&flowEntry=AddSession&dsh=S1527110508%3A1729760212648495&ddm=0'">
                             <img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
                             Sign in with Google</button>
-                        <button type="button" class="btn btn-secondary w-100"
-                            onclick="closeForm('login')">CLOSE</button>
+                        <button type="button" class="btn btn-secondary w-100" onclick="closeForm('login')">CLOSE</button>
                         <!-- Link to Signup Page -->
                         <div class="new">
                             <p>Don't have an account? <a href="javascript:void(0);" onclick="openForm('signup')">Sign up
@@ -511,34 +464,26 @@ <h2 class="text-center">Login</h2>
 
                 <!-- Signup Form -->
                 <div class="form-popup" id="signupForm">
- 
-                    <form class="form-container" onsubmit="validateSignupForm()"
-                         style="max-width: 400px; margin: auto;">
+                    <form class="form-container" onsubmit="return validateSignupForm()" style="max-width: 400px; margin: auto;">
                         <span class="close-icon" onclick="closeForm('signup')">&times;</span>
                         <h2 class="text-center">Signup</h2>
                         <div class="form-group">
                             <label for="name"><b>Full Name</b></label>
-                            <input type="text" class="form-control" id="name" placeholder="Enter Full Name" name="name"
-                                required>
+                            <input type="text" class="form-control" id="name" placeholder="Enter Full Name" name="name" required>
                         </div>
                         <div class="form-group">
                             <label for="signupEmail"><b>Email</b></label>
-                            <input type="email" class="form-control" id="signupEmail" placeholder="Enter Email"
-                                name="email" required>
+                            <input type="email" class="form-control" id="signupEmail" placeholder="Enter Email" name="email" required>
                         </div>
                         <div class="form-group position-relative">
                             <label for="signupPsw"><b>Password</b></label>
-                            <input type="password" class="form-control" id="signupPsw" placeholder="Enter Password"
-                                name="psw" required minlength="6">
-                            <i class="bi bi-eye eye-icon" id="toggleSignupPassword"
-                                onclick="togglePasswordVisibility('signupPsw', 'toggleSignupPassword')"></i>
+                            <input type="password" class="form-control" id="signupPsw" placeholder="Enter Password" name="psw" required minlength="6">
+                            <i class="bi bi-eye eye-icon" id="toggleSignupPassword" onclick="togglePasswordVisibility('signupPsw', 'toggleSignupPassword')"></i>
                         </div>
                         <div class="form-group position-relative">
                             <label for="confirmPsw"><b>Confirm Password</b></label>
-                            <input type="password" class="form-control" id="confirmPsw" placeholder="Confirm Password"
-                                name="confirmPsw" required minlength="6">
-                            <i class="bi bi-eye eye-icon" id="toggleConfirmPassword"
-                                onclick="togglePasswordVisibility('confirmPsw', 'toggleConfirmPassword')"></i>
+                            <input type="password" class="form-control" id="confirmPsw" placeholder="Confirm Password" name="confirmPsw" required minlength="6">
+                            <i class="bi bi-eye eye-icon" id="toggleConfirmPassword" onclick="togglePasswordVisibility('confirmPsw', 'toggleConfirmPassword')"></i>
                         </div>
                         <div class="remember-me">
                             <input type="checkbox" id="remember-me" />
@@ -546,12 +491,10 @@ <h2 class="text-center">Signup</h2>
                         </div>
                         <button type="submit" class="btn btn-primary w-100 mb-3">SIGNUP</button>
                         <!-- Google Sign-In Button -->
-                        <button type="button" class="btn google-btn"
-                            onclick="window.location.href='https://accounts.google.com/v3/signin/identifier?authuser=0&continue=https%3A%2F%2Fmyaccount.google.com%2F&ec=GAlAwAE&hl=en_GB&service=accountsettings&flowName=GlifWebSignIn&flowEntry=AddSession&dsh=S1527110508%3A1729760212648495&ddm=0'">
+                        <button type="button" class="btn google-btn" onclick="window.location.href='https://accounts.google.com/v3/signin/identifier?authuser=0&continue=https%3A%2F%2Fmyaccount.google.com%2F&ec=GAlAwAE&hl=en_GB&service=accountsettings&flowName=GlifWebSignIn&flowEntry=AddSession&dsh=S1527110508%3A1729760212648495&ddm=0'">
                             <img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
                             Sign in with Google</button>
-                        <button type="button" class="btn btn-secondary w-100"
-                            onclick="closeForm('signup')">CLOSE</button>
+                        <button type="button" class="btn btn-secondary w-100" onclick="closeForm('signup')">CLOSE</button>
                         <!-- Link to Login Page -->
                         <div class="new">
                             <p>Already have an account? <a href="javascript:void(0);" onclick="openForm('login')">Login
@@ -576,30 +519,6 @@ <h2>Forgot Password</h2>
 
                 <!-- Toggle Password Visibility Script -->
                 <script>
-                    document.addEventListener('DOMContentLoaded', function () {
-                        const authToken = localStorage.getItem('authToken');
-                        console.log(authToken)
-                        const profileLink = document.getElementById('profileLink');
-                        const loginLink = document.getElementById('loginLink');
-                        const signupLink = document.getElementById('signupLink');
-                        const logoutLink = document.getElementById('logoutLink');
-
-                        if (authToken) {
-                            // User is logged in: show "My Profile" and "Logout", hide "Login" and "Signup"
-                            profileLink.style.display = 'block';
-                            logoutLink.style.display = 'block';
-                            loginLink.style.display = 'none';
-                            signupLink.style.display = 'none';
-                        } else {
-                            // User is not logged in: show "Login" and "Signup", hide "My Profile" and "Logout"
-                            profileLink.style.display = 'none';
-                            logoutLink.style.display = 'none';
-                            loginLink.style.display = 'block';
-                            signupLink.style.display = 'block';
-                        }
-                    });
-                    // Call the checkLoginStatus function on page load to set up the menu correctly
-
                     function togglePasswordVisibility(passwordFieldId, iconId) {
                         const passwordField = document.getElementById(passwordFieldId);
                         const togglePassword = document.getElementById(iconId);
@@ -641,6 +560,7 @@ <h2>Forgot Password</h2>
                 </script>
 
 
+
                 <!-- Styles -->
                 <style>
                     .form-popup {
@@ -665,27 +585,27 @@ <h2>Forgot Password</h2>
                             box-sizing: border-box;
                         }
                     }
-
+                    
                     .form-container h2 {
                         margin-bottom: 20px;
                         color: #333;
                     }
-
+                    
                     .form-group {
                         margin-bottom: 15px;
                     }
-
+                    
                     .form-control {
                         border-radius: 5px;
                         padding: 10px;
                         box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
                     }
-
+                    
                     .btn {
                         margin-top: 10px;
                         border-radius: 5px;
                     }
-
+                    
                     .eye-icon {
                         position: absolute;
                         right: 15px;
@@ -693,25 +613,25 @@ <h2>Forgot Password</h2>
                         cursor: pointer;
                         color: #007bff;
                     }
-
+                    
                     .close-icon {
                         font-size: 24px;
                         cursor: pointer;
                         float: right;
                     }
-
+                    
                     .position-relative {
                         position: relative;
                     }
-
+                    
                     .btn-primary:hover {
                         background-color: #0056b3;
                     }
-
+                    
                     .btn-secondary:hover {
                         background-color: #6c757d;
                     }
-
+                    
                     .scroll-to-top {
                         background-color: #0066cc;
                         /* Button color */
@@ -728,7 +648,7 @@ <h2>Forgot Password</h2>
                         margin-top: 10px;
                         /* Space between the paragraph and button */
                     }
-
+                    
                     .scroll-to-top:hover {
                         background-color: #005bb5;
                         /* Darker shade on hover */
@@ -736,8 +656,7 @@ <h2>Forgot Password</h2>
                 </style>
 
                 <!-- Bootstrap Icons -->
-                <link rel="stylesheet"
-                    href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
+                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
                 <script src="backend/signup/signup.js"></script>
                 <!-- Link to your JavaScript file -->
 
@@ -759,7 +678,6 @@ <h2>Forgot Password</h2>
         </div>
 
     </nav>
- 
 
     <!-- JavaScript for Hamburger Menu Toggle -->
     <script>
@@ -779,21 +697,18 @@ <h2>Forgot Password</h2>
                             <div class="card">
                                 <div class="overflow-img">
                                     <a href="#">
-                                        <img style="height: 250px;width:300px" src="./assets/img1.webp"
-                                            class="img-fluid ">
+                                        <img style="height: 250px;width:300px" src="./assets/img1.webp" class="img-fluid ">
 
 
                                     </a>
                                 </div>
-                                <div class="card-body text-center px-1"
-                                    style="width: 300px;margin-top: 30px; text-align: center;">
+                                <div class="card-body text-center px-1" style="width: 300px;margin-top: 30px; text-align: center;">
                                     <a href="blog.html" class="text-title display-1 text-dark">
                                         Roaming Routes
                                     </a>
                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;">
                                         <span><i class="fa-regular fa-calendar"></i> Wed 01,2020 &nbsp;</span>
-                                        <a href="comment1.html"> <span class="comment-icon"><i
-                                                    class="bi bi-chat-fill"></i> 13</span></a>
+                                        <a href="comment1.html"> <span class="comment-icon" ><i class="bi bi-chat-fill"></i> 13</span></a>
                                         <span class="heart-container">
                                             <button class="heart-btn" style="position: absolute; bottom: -20px;">
                                                 <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg"
@@ -817,14 +732,12 @@ <h2>Forgot Password</h2>
                             <div class="card">
                                 <div class="overflow-img">
                                     <a href="#">
-                                        <img style="height: 250px;width:300px" src="./assets/img2.webp"
-                                            class="img-fluid ">
+                                        <img style="height: 250px;width:300px" src="./assets/img2.webp" class="img-fluid ">
 
 
                                     </a>
                                 </div>
-                                <div class="card-body text-center px-1"
-                                    style="width: 300px;margin-top: 30px; text-align: center;">
+                                <div class="card-body text-center px-1" style="width: 300px;margin-top: 30px; text-align: center;">
                                     <a href="gaming_chronicles.html" class="text-title display-1 text-dark">
                                         Gaming Chronicles
 
@@ -832,8 +745,7 @@ <h2>Forgot Password</h2>
                                     </a>
                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;">
                                         <span><i class="fa-regular fa-calendar"></i> Mon 13,2023 &nbsp;</span>
-                                        <a href="comment2.html"> <span class="comment-icon"><i
-                                                    class="bi bi-chat-fill"></i> 12</span></a>
+                                        <a href="comment2.html"> <span class="comment-icon"><i class="bi bi-chat-fill"></i> 12</span></a>
                                         <span class="heart-container">
                                             <button class="heart-btn" style="position: absolute; bottom: -20px;">
                                                 <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg"
@@ -857,14 +769,12 @@ <h2>Forgot Password</h2>
                             <div class="card">
                                 <div class="overflow-img">
                                     <a href="#">
-                                        <img style="height: 250px;width:300px" src="./assets/img3.webp"
-                                            class="img-fluid ">
+                                        <img style="height: 250px;width:300px" src="./assets/img3.webp" class="img-fluid ">
 
 
                                     </a>
                                 </div>
-                                <div class="card-body text-center px-1"
-                                    style="width: 300px;margin-top: 30px; text-align: center;">
+                                <div class="card-body text-center px-1" style="width: 300px;margin-top: 30px; text-align: center;">
                                     <a href="#" class="text-title display-1 text-dark">
                                         Virtual Realms
 
@@ -873,8 +783,7 @@ <h2>Forgot Password</h2>
                                     </a>
                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;">
                                         <span><i class="fa-regular fa-calendar"></i> Wed 09,2023 &nbsp;</span>
-                                        <a href="comment3.html"> <span class="comment-icon"><i
-                                                    class="bi bi-chat-fill"></i> 19</span></a>
+                                        <a href="comment3.html"> <span class="comment-icon"><i class="bi bi-chat-fill"></i> 19</span></a>
                                         <span class="heart-container">
                                             <button class="heart-btn" style="position: absolute; bottom: -20px;">
                                                 <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg"
@@ -897,14 +806,12 @@ <h2>Forgot Password</h2>
                             <div class="card">
                                 <div class="overflow-img">
                                     <a href="#">
-                                        <img style="height: 250px;width:300px" src="./assets/img4.webp"
-                                            class="img-fluid">
+                                        <img style="height: 250px;width:300px" src="./assets/img4.webp" class="img-fluid">
 
 
                                     </a>
                                 </div>
-                                <div class="card-body text-center px-1"
-                                    style="width: 300px;margin-top: 30px; text-align: center;">
+                                <div class="card-body text-center px-1" style="width: 300px;margin-top: 30px; text-align: center;">
                                     <a href="#" class="text-title display-1 text-dark">
                                         Laptop life
 
@@ -913,8 +820,7 @@ <h2>Forgot Password</h2>
                                     </a>
                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;">
                                         <span><i class="fa-regular fa-calendar"></i> Tue 07,2019 &nbsp;</span>
-                                        <a href="comment4.html"> <span class="comment-icon"><i
-                                                    class="bi bi-chat-fill"></i> 06</span></a>
+                                        <a href="comment4.html"> <span class="comment-icon"><i class="bi bi-chat-fill"></i> 06</span></a>
                                         <span class="heart-container">
                                             <button class="heart-btn" style="position: absolute; bottom: -20px;">
                                                 <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg"
@@ -937,14 +843,12 @@ <h2>Forgot Password</h2>
                             <div class="card">
                                 <div class="overflow-img">
                                     <a href="#">
-                                        <img style="height: 250px;width:300px" src="./assets/img5.webp"
-                                            class="img-fluid">
+                                        <img style="height: 250px;width:300px" src="./assets/img5.webp" class="img-fluid">
 
 
                                     </a>
                                 </div>
-                                <div class="card-body text-center px-1"
-                                    style="width: 300px;margin-top: 30px; text-align: center;">
+                                <div class="card-body text-center px-1" style="width: 300px;margin-top: 30px; text-align: center;">
                                     <a href="#" class="text-title display-1 text-dark">
                                         Mouthwatering Memoirs
 
@@ -953,8 +857,7 @@ <h2>Forgot Password</h2>
                                     </a>
                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;">
                                         <span><i class="fa-regular fa-calendar"></i> Tue 02,2021 &nbsp;</span>
-                                        <a href="comment5.html"> <span class="comment-icon"><i
-                                                    class="bi bi-chat-fill"></i> 10</span></a>
+                                        <a href="comment5.html"> <span class="comment-icon"><i class="bi bi-chat-fill"></i> 10</span></a>
                                         <span class="heart-container">
                                             <button class="heart-btn" style="position: absolute; bottom: -20px;">
                                                 <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg"
@@ -979,14 +882,12 @@ <h2>Forgot Password</h2>
                             <div class="card">
                                 <div class="overflow-img">
                                     <a href="#">
-                                        <img style="height: 250px;width:300px" src="./assets/img6.webp"
-                                            class="img-fluid">
+                                        <img style="height: 250px;width:300px" src="./assets/img6.webp" class="img-fluid">
 
 
                                     </a>
                                 </div>
-                                <div class="card-body text-center px-1"
-                                    style="width: 300px;margin-top: 30px; text-align: center;">
+                                <div class="card-body text-center px-1" style="width: 300px;margin-top: 30px; text-align: center;">
                                     <a href="#" class="text-title display-1 text-dark">
                                         Tech travels
 
@@ -995,8 +896,7 @@ <h2>Forgot Password</h2>
                                     </a>
                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;">
                                         <span><i class="fa-regular fa-calendar"></i> Wed 02,2023 &nbsp;</span>
-                                        <a href="comment6.html"> <span class="comment-icon"><i
-                                                    class="bi bi-chat-fill"></i> 12</span></a>
+                                        <a href="comment6.html"> <span class="comment-icon"><i class="bi bi-chat-fill"></i> 12</span></a>
                                         <span class="heart-container">
                                             <button class="heart-btn" style="position: absolute; bottom: -20px;">
                                                 <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg"
@@ -1019,14 +919,12 @@ <h2>Forgot Password</h2>
                             <div class="card">
                                 <div class="overflow-img">
                                     <a href="#">
-                                        <img style="height: 250px;width:300px" src="./assets/img7.webp"
-                                            class="img-fluid">
+                                        <img style="height: 250px;width:300px" src="./assets/img7.webp" class="img-fluid">
 
 
                                     </a>
                                 </div>
-                                <div class="card-body text-center px-1"
-                                    style="width: 300px;margin-top: 30px; text-align: center;">
+                                <div class="card-body text-center px-1" style="width: 300px;margin-top: 30px; text-align: center;">
                                     <a href="#" class="text-title display-1 text-dark">
                                         Culinary Delights
 
@@ -1035,8 +933,7 @@ <h2>Forgot Password</h2>
                                     </a>
                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;">
                                         <span><i class="fa-regular fa-calendar"></i> Wed 02,2023 &nbsp;</span>
-                                        <a href="comment7.html"> <span class="comment-icon"><i
-                                                    class="bi bi-chat-fill"></i> 12</span></a>
+                                        <a href="comment7.html"> <span class="comment-icon"><i class="bi bi-chat-fill"></i> 12</span></a>
                                         <span class="heart-container">
                                             <button class="heart-btn" style="position: absolute; bottom: -20px;">
                                                 <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg"
@@ -1059,14 +956,12 @@ <h2>Forgot Password</h2>
                             <div class="card">
                                 <div class="overflow-img">
                                     <a href="#">
-                                        <img style="height: 250px;width:300px" src="./assets/img8.webp"
-                                            class="img-fluid">
+                                        <img style="height: 250px;width:300px" src="./assets/img8.webp" class="img-fluid">
 
 
                                     </a>
                                 </div>
-                                <div class="card-body text-center px-1"
-                                    style="width: 300px;margin-top: 30px; text-align: center;">
+                                <div class="card-body text-center px-1" style="width: 300px;margin-top: 30px; text-align: center;">
                                     <a href="#" class="text-title display-1 text-dark">
                                         Voyage Vista: Where Travel Dreams Take Flight
 
@@ -1075,8 +970,7 @@ <h2>Forgot Password</h2>
                                     </a>
                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;">
                                         <span><i class="fa-regular fa-calendar"></i> Wed 02,2023 &nbsp;</span>
-                                        <a href="comment8.html"> <span class="comment-icon"><i
-                                                    class="bi bi-chat-fill"></i> 12</span></a>
+                                        <a href="comment8.html"> <span class="comment-icon"><i class="bi bi-chat-fill"></i> 12</span></a>
                                         <span class="heart-container">
                                             <button class="heart-btn" style="position: absolute; bottom: -20px;">
                                                 <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg"
@@ -1099,14 +993,12 @@ <h2>Forgot Password</h2>
                             <div class="card">
                                 <div class="overflow-img">
                                     <a href="#">
-                                        <img style="height: 250px;width:300px" src="./assets/img9.webp"
-                                            class="img-fluid">
+                                        <img style="height: 250px;width:300px" src="./assets/img9.webp" class="img-fluid">
 
 
                                     </a>
                                 </div>
-                                <div class="card-body text-center px-1"
-                                    style="width: 300px;margin-top: 30px; text-align: center;">
+                                <div class="card-body text-center px-1" style="width: 300px;margin-top: 30px; text-align: center;">
                                     <a href="#" class="text-title display-1 text-dark">
                                         Beak & Claw: A Chronicle of Birds in the Wild
 
@@ -1115,8 +1007,7 @@ <h2>Forgot Password</h2>
                                     </a>
                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;">
                                         <span><i class="fa-regular fa-calendar"></i> Wed 02,2023 &nbsp;</span>
-                                        <a href="comment9.html"> <span class="comment-icon"><i
-                                                    class="bi bi-chat-fill"></i> 12</span></a>
+                                        <a href="comment9.html"> <span class="comment-icon"><i class="bi bi-chat-fill"></i> 12</span></a>
                                         <span class="heart-container">
                                             <button class="heart-btn" style="position: absolute; bottom: -20px;">
                                                 <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg"
@@ -1139,14 +1030,12 @@ <h2>Forgot Password</h2>
                             <div class="card">
                                 <div class="overflow-img">
                                     <a href="#">
-                                        <img style="height: 250px;width:300px" src="./assets/img10.webp"
-                                            class="img-fluid">
+                                        <img style="height: 250px;width:300px" src="./assets/img10.webp" class="img-fluid">
 
 
                                     </a>
                                 </div>
-                                <div class="card-body text-center px-1"
-                                    style="width: 300px;margin-top: 30px; text-align: center;">
+                                <div class="card-body text-center px-1" style="width: 300px;margin-top: 30px; text-align: center;">
                                     <a href="#" class="text-title display-1 text-dark">
                                         Wild Whispers: Listening to Nature's Creatures
 
@@ -1155,8 +1044,7 @@ <h2>Forgot Password</h2>
                                     </a>
                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;">
                                         <span><i class="fa-regular fa-calendar"></i> Wed 02,2023 &nbsp;</span>
-                                        <a href="comment10.html"> <span class="comment-icon"><i
-                                                    class="bi bi-chat-fill"></i> 12</span></a>
+                                        <a href="comment10.html"> <span class="comment-icon"><i class="bi bi-chat-fill"></i> 12</span></a>
                                         <span class="heart-container">
                                             <button class="heart-btn" style="position: absolute; bottom: -20px;">
                                                 <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg"
@@ -1179,14 +1067,12 @@ <h2>Forgot Password</h2>
                             <div class="card">
                                 <div class="overflow-img">
                                     <a href="#">
-                                        <img style="height: 250px;width:300px" src="./assets/img11.webp"
-                                            class="img-fluid">
+                                        <img style="height: 250px;width:300px" src="./assets/img11.webp" class="img-fluid">
 
 
                                     </a>
                                 </div>
-                                <div class="card-body text-center px-1"
-                                    style="width: 300px;margin-top: 30px; text-align: center;">
+                                <div class="card-body text-center px-1" style="width: 300px;margin-top: 30px; text-align: center;">
                                     <a href="#" class="text-title display-1 text-dark">
                                         Aesthetic Abodes: Inspirations from Architectural Design
 
@@ -1195,8 +1081,7 @@ <h2>Forgot Password</h2>
                                     </a>
                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;">
                                         <span><i class="fa-regular fa-calendar"></i> Wed 02,2023 &nbsp;</span>
-                                        <a href="comment11.html"> <span class="comment-icon"><i
-                                                    class="bi bi-chat-fill"></i> 12</span></a>
+                                        <a href="comment11.html"> <span class="comment-icon"><i class="bi bi-chat-fill"></i> 12</span></a>
                                         <span class="heart-container">
                                             <button class="heart-btn" style="position: absolute; bottom: -20px;">
                                                 <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg"
@@ -1218,14 +1103,12 @@ <h2>Forgot Password</h2>
                             <div class="card">
                                 <div class="overflow-img">
                                     <a href="#">
-                                        <img style="height: 250px;width:300px" src="./assets/img12.webp"
-                                            class="img-fluid">
+                                        <img style="height: 250px;width:300px" src="./assets/img12.webp" class="img-fluid">
 
 
                                     </a>
                                 </div>
-                                <div class="card-body text-center px-1"
-                                    style="width: 300px;margin-top: 30px; text-align: center;">
+                                <div class="card-body text-center px-1" style="width: 300px;margin-top: 30px; text-align: center;">
                                     <a href="#" class="text-title display-1 text-dark">
                                         Nature's Kaleidoscope: A Symphony of Colors and Life
 
@@ -1235,8 +1118,7 @@ <h2>Forgot Password</h2>
                                     </a>
                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;">
                                         <span><i class="fa-regular fa-calendar"></i> Wed 02,2023 &nbsp;</span>
-                                        <a href="comment12.html"> <span class="comment-icon"><i
-                                                    class="bi bi-chat-fill"></i> 12</span></a>
+                                        <a href="comment12.html"> <span class="comment-icon"><i class="bi bi-chat-fill"></i> 12</span></a>
                                         <span class="heart-container">
                                             <button class="heart-btn" style="position: absolute; bottom: -20px;">
                                                 <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg"
@@ -1259,12 +1141,10 @@ <h2>Forgot Password</h2>
                             <div class="card">
                                 <div class="overflow-img">
                                     <a href="#">
-                                        <img style="height: 250px;width:300px" src="./assets/img13.webp"
-                                            class="img-fluid">
+                                        <img style="height: 250px;width:300px" src="./assets/img13.webp" class="img-fluid">
                                     </a>
                                 </div>
-                                <div class="card-body text-center px-1"
-                                    style="width: 300px;margin-top: 30px; text-align: center;">
+                                <div class="card-body text-center px-1" style="width: 300px;margin-top: 30px; text-align: center;">
                                     <a href="#" class="text-title display-1 text-dark">
                                         Chirp & Flutter: Tales from the Aviary
 
@@ -1273,8 +1153,7 @@ <h2>Forgot Password</h2>
                                     </a>
                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;">
                                         <span><i class="fa-regular fa-calendar"></i> Wed 02,2023 &nbsp;</span>
-                                        <a href="comment13.html"> <span class="comment-icon"><i
-                                                    class="bi bi-chat-fill"></i> 12</span></a>
+                                        <a href="comment13.html"> <span class="comment-icon"><i class="bi bi-chat-fill"></i> 12</span></a>
                                         <span class="heart-container">
                                             <button class="heart-btn" style="position: absolute; bottom: -20px;">
                                                 <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg"
@@ -1297,14 +1176,12 @@ <h2>Forgot Password</h2>
                             <div class="card">
                                 <div class="overflow-img">
                                     <a href="#">
-                                        <img style="height: 250px;width:300px" src="./assets/img14.webp"
-                                            class="img-fluid">
+                                        <img style="height: 250px;width:300px" src="./assets/img14.webp" class="img-fluid">
 
 
                                     </a>
                                 </div>
-                                <div class="card-body text-center px-1"
-                                    style="width: 300px;margin-top: 30px; text-align: center;">
+                                <div class="card-body text-center px-1" style="width: 300px;margin-top: 30px; text-align: center;">
                                     <a href="#" class="text-title display-1 text-dark">
                                         Unlocking the Power of the Mind: A Journey to Self-Discovery
 
@@ -1313,8 +1190,7 @@ <h2>Forgot Password</h2>
                                     </a>
                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;">
                                         <span><i class="fa-regular fa-calendar"></i> Wed 02,2023 &nbsp;</span>
-                                        <a href="comment14.html"> <span class="comment-icon"><i
-                                                    class="bi bi-chat-fill"></i> 12</span></a>
+                                        <a href="comment14.html"> <span class="comment-icon"><i class="bi bi-chat-fill"></i> 12</span></a>
                                         <span class="heart-container">
                                             <button class="heart-btn" style="position: absolute; bottom: -20px;">
                                                 <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg"
@@ -1334,8 +1210,7 @@ <h2>Forgot Password</h2>
 
                 </div>
                 <div style="display: flex;justify-content: center;">
-                    <button class="btn load-posts-btn secondary-title text-light"
-                        style="height:50px;width:200px;font-size: large;border-radius: 20px;">Load More
+                    <button class="btn load-posts-btn secondary-title text-light" style="height:50px;width:200px;font-size: large;border-radius: 20px;">Load More
                         Posts...</button>
                 </div>
             </div>
@@ -1343,8 +1218,8 @@ <h2>Forgot Password</h2>
                 const heartButtons = document.querySelectorAll('.heart-btn');
 
 
-                heartButtons.forEach(function (button) {
-                    button.addEventListener('click', function () {
+                heartButtons.forEach(function(button) {
+                    button.addEventListener('click', function() {
 
                         const heartIcon = this.querySelector('.heart-icon');
 
@@ -1422,9 +1297,7 @@ <h2 class="accordion__question">How do I switch between dark and light themes?</
                         </div>
                         <div class="accordion__content">
                             <!-- <i class="fa-solid fa-comments"></i> -->
-                            <p class="accordion__answer">You can easily switch between dark and light themes by clicking
-                                the theme toggle button located in the website header. This allows you to customize your
-                                viewing experience according to your preference.</p>
+                            <p class="accordion__answer">You can easily switch between dark and light themes by clicking the theme toggle button located in the website header. This allows you to customize your viewing experience according to your preference.</p>
                         </div>
                     </div>
 
@@ -1437,10 +1310,7 @@ <h2 class="accordion__question">How do I use the 'Start Writing' page?</h2>
                         </div>
                         <div class="accordion__content">
                             <!-- <i class="fa-solid fa-comments"></i> -->
-                            <p class="accordion__answer">The 'Start Writing' page provides a simple interface for
-                                quickly creating and publishing blog posts. Just click "Start Writing" from the
-                                navigation bar, fill in your title, content, and tags, and publish your blog with a
-                                single
+                            <p class="accordion__answer">The 'Start Writing' page provides a simple interface for quickly creating and publishing blog posts. Just click "Start Writing" from the navigation bar, fill in your title, content, and tags, and publish your blog with a single
                                 click.
                             </p>
                         </div>
@@ -1455,9 +1325,7 @@ <h2 class="accordion__question">How does the sliding bar with latest blogs work?
                         </div>
                         <div class="accordion__content">
                             <!-- <i class="fa-solid fa-comments"></i> -->
-                            <p class="accordion__answer">The sliding bar on the home page features the latest blogs
-                                published on the platform. It updates automatically and allows users to easily scroll
-                                through and click on any blog that catches their attention.</p>
+                            <p class="accordion__answer">The sliding bar on the home page features the latest blogs published on the platform. It updates automatically and allows users to easily scroll through and click on any blog that catches their attention.</p>
                         </div>
                     </div>
 
@@ -1470,9 +1338,7 @@ <h2 class="accordion__question">How are top picks chosen for the leading blog pa
                         </div>
                         <div class="accordion__content">
                             <!-- <i class="fa-solid fa-comments"></i> -->
-                            <p class="accordion__answer">Top picks are curated by a combination of editor
-                                recommendations and user engagement metrics, such as views, likes, and comments, to
-                                highlight the best content available on Word Wise.</p>
+                            <p class="accordion__answer">Top picks are curated by a combination of editor recommendations and user engagement metrics, such as views, likes, and comments, to highlight the best content available on Word Wise.</p>
                         </div>
                     </div>
 
@@ -1486,17 +1352,9 @@ <h2 class="accordion__question">How can I stay updated with new blog posts?</h2>
 
                         <div class="accordion__content">
                             <!-- <i class="fa-solid fa-comments"></i> -->
-                            <p class="accordion__answer">You can stay updated by following your favorite authors or
-                                topics, and by checking the sliding bar for the latest blog posts. You can also
-                                subscribe to newsletters or enable notifications for real-time updates.</p>
+                            <p class="accordion__answer">You can stay updated by following your favorite authors or topics, and by checking the sliding bar for the latest blog posts. You can also subscribe to newsletters or enable notifications for real-time updates.</p>
                         </div>
                     </div>
-
-
-                    <div style="display: flex;justify-content: center;">
-                        <button class="btn load-posts-btn secondary-title text-light" style="height:50px;width:200px;font-size: large;border-radius: 20px;"><a href="./forum.html" style="color: white;">FAQs Forum..</a></button>
-                    </div>
-
                 </div>
             </div>
         </section>
@@ -1520,28 +1378,30 @@ <h3>Sentence: </h3>
         </div>
 
         <style>
-            #word-of-the-day {
-                font-family: Arial, sans-serif;
-    min-height: 10vh;
-    background-color: #f9b0b0;
-    width: 80%; /* Adjust width as desired */
-    border-radius: 15px; /* Adds curved edges */
-    margin: 0 auto; /* Centers the element */
-    padding: 10px; /* Adds inner spacing */
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);} /* Optional: adds shadow for a 
-            }
+         #word-of-the-day {
+  font-family: Arial, sans-serif;
+  min-height: 10vh;
+  background-color: #f9b0b0;
+  width: 80%; /* Adjust width as desired */
+  border-radius: 15px; /* Adds curved edges */
+  margin: 0 auto; /* Centers the element */
+  padding: 10px; /* Adds inner spacing */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: adds shadow */
+}
+
+            
             .word-entry {
                 display: flex;
                 align-items: center;
                 margin-bottom: 8px;
             }
-
+            
             .word-entry h3 {
                 margin: 0;
                 font-weight: bold;
                 margin-right: 5px;
             }
-
+            
             .word-entry p {
                 margin: 0;
             }
@@ -1554,9 +1414,7 @@ <h3>Sentence: </h3>
                 <h2>Subscribe to Our Newsletter</h2>
                 <p>Stay updated with the latest articles and insights from WordWise.</p>
                 <form class="wordwise-newsletter-form" id="newsletterForm" novalidate>
-                    <input type="email" id="emailInput" placeholder="Enter your email address" required
-                        style="border: 1px solid pink; transition: transform 0.2s ease, box-shadow 0.2s ease;"
-                        onmouseover="this.style.transform='scale(1.05)'; this.style.boxShadow='0 0 8px 2px pink';"
+                    <input type="email" id="emailInput" placeholder="Enter your email address" required style="border: 1px solid pink; transition: transform 0.2s ease, box-shadow 0.2s ease;" onmouseover="this.style.transform='scale(1.05)'; this.style.boxShadow='0 0 8px 2px pink';"
                         onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">
                     <div id="error-message" style="color: red; display: none;">Please include '@' in your email address.
                     </div>
@@ -1567,71 +1425,16 @@ <h2>Subscribe to Our Newsletter</h2>
             <!-- Toast Popup -->
             <div id="toast" class="toast hidden"></div>
         </section>
-<script>
-    document.getElementById('newsletterForm').onsubmit = async function(event) {
-  event.preventDefault(); // Prevent the form from refreshing the page
-
-  const emailInput = document.getElementById('emailInput');
-  const email = emailInput.value;
-  const errorMessage = document.getElementById('error-message');
-  const toast = document.getElementById('toast');
-
-  // Basic validation to check if email contains '@'
-  if (!email.includes('@')) {
-    errorMessage.style.display = 'block';
-    return;
-  } else {
-    errorMessage.style.display = 'none';
-  }
-
-  try {
-    // Call the API
-    const response = await fetch('http://localhost:5000/api/contact/newsletter', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ email }),
-    });
-
-    const result = await response.json();
-
-    // Show toast with feedback
-    if (response.ok) {
-      showToast("You've successfully subscribed to the newsletter!");
-      emailInput.value = ''; // Clear the input after success
-    } else {
-      showToast(result.message || 'Failed to subscribe. Please try again.');
-    }
-  } catch (error) {
-    console.error('Error:', error);
-    showToast('An error occurred. Please try again.');
-  }
-};
-
-// Function to display toast message
-function showToast(message) {
-  const toast = document.getElementById('toast');
-  toast.textContent = message;
-  toast.classList.remove('hidden');
-  
-  // Hide toast after 3 seconds
-  setTimeout(() => {
-    toast.classList.add('hidden');
-  }, 3000);
-}
 
-    </script>
         <style>
             /* Style the email input field */
-
+            
             #emailInput {
                 border: 1px solid pink;
                 transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
             }
-
             /* Hover effect for glow */
-
+            
             #emailInput:hover {
                 transform: scale(1.05);
                 box-shadow: 0 0 8px 2px pink;
@@ -1661,13 +1464,13 @@ <h2>Subscribe to Our Newsletter</h2>
 
     <script>
         // JavaScript Functionality
-        document.getElementById('chatbot-toggle').addEventListener('click', function () {
+        document.getElementById('chatbot-toggle').addEventListener('click', function() {
             const chatWindow = document.getElementById('chat-window');
             // Toggle visibility of the chat window
             chatWindow.style.display = chatWindow.style.display === 'none' || chatWindow.style.display === '' ? 'flex' : 'none';
         });
 
-        document.getElementById('close-chat').addEventListener('click', function () {
+        document.getElementById('close-chat').addEventListener('click', function() {
             document.getElementById('chat-window').style.display = 'none'; // Hide chat on close
         });
     </script>
@@ -1681,8 +1484,7 @@ <h2 class="footer-title secondary-title">About Us</h2>
 
                         <div class="secondary-title text-secondary ">
                             <p class="mt-2 text-lg" style="text-align: left;">
-                                We are a close-knit team of passionate storytellers dedicated to sharing captivating
-                                content with the world.
+                                We are a close-knit team of passionate storytellers dedicated to sharing captivating content with the world.
                             </p>
 
                             <address class="mt-2">
@@ -1709,14 +1511,10 @@ <h2 class="footer-title secondary-title">About Us</h2>
 
                             <div>
                                 <!-- <img src="https://hits.sh/anshika-26.github.io/WordWise.svg?label=Website%20Views&extraCount=1515&color=30322f&labelColor=F5B3B5" alt="Web views" style="height: 20px;width: 150px;margin-top: 40px;"> -->
-                                <div class="containerWebsiteViews">
-                                    <div class="containerText">
-                                        <p>Website Views</p>
-                                    </div>
-                                    <div class="containerNumbers">
-                                        <p id="visitorCount">0</p>
-                                    </div>
-                                </div>
+                                 <div class="containerWebsiteViews">
+                                    <div class="containerText"><p>Website Views</p></div>
+                                    <div class="containerNumbers"><p id="visitorCount">0</p></div>
+                                 </div>
                             </div>
                         </div>
 
@@ -1736,8 +1534,7 @@ <h2 class="footer-title secondary-title">Feature Post</h2>
                                                 Embrace the beauty of nature through our enchanting blog, where we
                                                 celebrate the wonders of the natural world
                                             </a>
-                                            <p class="secondary-title text-secondary "
-                                                style="margin-top:3px;margin-left:0px; text-align: left; ">
+                                            <p class="secondary-title text-secondary " style="margin-top:3px;margin-left:0px; text-align: left; ">
                                                 <span><i class="far fa-clock text-primary"></i> Wed 02, 2022 </span>
                                             </p>
                                         </div>
@@ -1756,8 +1553,7 @@ <h2 class="footer-title secondary-title">Feature Post</h2>
                                                 Embark on unforgettable journeys through our travel blog, where
                                                 wanderlust meets inspiration
                                             </a>
-                                            <p class="secondary-title text-secondary display-3"
-                                                style="margin-top:3px;margin-left:0px; text-align: left;">
+                                            <p class="secondary-title text-secondary display-3" style="margin-top:3px;margin-left:0px; text-align: left;">
                                                 <span><i class="far fa-clock text-primary"></i> Wed 05, 2020 </span>
                                             </p>
                                         </div>
@@ -1774,8 +1570,7 @@ <h2 class="footer-title secondary-title">Feature Post</h2>
                                             <a href="#" class="text-title display-2 text-dark">
                                                 Gaming Adventures Unleashed
                                             </a>
-                                            <p class="secondary-title text-secondary display-3"
-                                                style="margin-top:3px;margin-left:0px; text-align: left;">
+                                            <p class="secondary-title text-secondary display-3" style="margin-top:3px;margin-left:0px; text-align: left;">
                                                 <span><i class="far fa-clock text-primary"></i> Wed 02, 2021 </span>
                                             </p>
                                         </div>
@@ -1788,6 +1583,15 @@ <h2 class="footer-title secondary-title">Feature Post</h2>
                 <div class="col-3"> 
                     <h2 class="footer-title secondary-title">Popular Tags</h2>
                     <div class="tags">
+<div class="d-flex-gap flex-wrap">
+                        <a href="./blog.html" class="nav-link btn category-btn">Travel</a>
+                        <a href="./blog.html" class="nav-link btn category-btn">Food</a>
+                        <a href="./blog.html" class="nav-link btn category-btn">Lifestyle</a>
+                        <a href="./blog.html" class="nav-link btn category-btn">Technology</a>
+                        <a href="./blog.html" class="nav-link btn category-btn">Fashion</a>
+                    </div>
+                    
+
                         <div class="d-flex-gap flex-wrap all-tags">
                             <a href="./blog.html" class="nav-link btn category-btn">Travel</a>
                             <a href="./blog.html" class="nav-link btn category-btn">Food</a>
@@ -1795,7 +1599,6 @@ <h2 class="footer-title secondary-title">Popular Tags</h2>
                             <a href="./blog.html" class="nav-link btn category-btn">Technology</a>
                             <a href="./blog.html" class="nav-link btn category-btn">Fashion</a>
                         </div>
-
                     </div>
                     <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
                     <div class="tags social" id="contact">
@@ -1812,8 +1615,8 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
                             <a href="https://dribbble.com/" id="dribbble" class="nav-link btn bg-light">
                                 <i class="fab fa-dribbble"></i>
                             </a>
-                            <a href="https://github.com/ANSHIKA-26?tab=overview&from=2022-12-01&to=2022-12-31"
-                                id="github" target="_blank" class="nav-link btn bg-light">
+                            <a href="https://github.com/ANSHIKA-26?tab=overview&from=2022-12-01&to=2022-12-31" id="github" target="_blank"
+                               class="nav-link btn bg-light">
                                 <i class="fab fa-github"></i>
                             </a>
                         </div>
@@ -1831,7 +1634,7 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
             </div>
         </div>
         <script>
-            document.getElementById('scrollToTop').addEventListener('click', function () {
+            document.getElementById('scrollToTop').addEventListener('click', function() {
                 window.scrollTo({
                     top: 0,
                     behavior: 'smooth' // Smooth scrolling effect
@@ -1866,7 +1669,7 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
     <script src="progress_bar.js"></script>
     <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
     <script>
-        window.addEventListener("scroll", function () {
+        window.addEventListener("scroll", function() {
             var scrollPosition = window.scrollY;
             var height = document.body.offsetHeight - window.innerHeight;
             if (scrollPosition > 90) {
@@ -1876,7 +1679,7 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
             }
         });
 
-        document.getElementById("backToTop").addEventListener("click", function () {
+        document.getElementById("backToTop").addEventListener("click", function() {
             window.scrollTo({
                 top: 0,
                 behavior: "smooth"
@@ -1930,55 +1733,54 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
 
     <div id="back-to-top" class="back-to-top">
         <i class="fas fa-chevron-up"></i>
-    </div>
-
-    <style>
+      </div>
+    
+      <style>
         .back-to-top {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            width: 50px;
-            height: 50px;
-            background-color: #007bff;
-            color: white;
-            border-radius: 50%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            cursor: pointer;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-            transition: opacity 0.3s;
-            opacity: 0;
-            visibility: hidden;
+          position: fixed;
+          bottom: 20px;
+          right: 20px;
+          width: 50px;
+          height: 50px;
+          background-color: #007bff;
+          color: white;
+          border-radius: 50%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+          transition: opacity 0.3s;
+          opacity: 0;
+          visibility: hidden;
         }
-
+    
         .back-to-top.show {
-            opacity: 1;
-            visibility: visible;
+          opacity: 1;
+          visibility: visible;
         }
-    </style>
-
-    <script>
+      </style>
+    
+      <script>
         const backToTopButton = document.getElementById('back-to-top');
-
+    
         window.addEventListener('scroll', () => {
-            if (window.scrollY > 300) {
-                backToTopButton.classList.add('show');
-            } else {
-                backToTopButton.classList.remove('show');
-            }
+          if (window.scrollY > 300) {
+            backToTopButton.classList.add('show');
+          } else {
+            backToTopButton.classList.remove('show');
+          }
         });
-
-        backToTopButton.addEventListener('click', () => {
-            window.scrollTo({
-                top: 0,
-                behavior: 'smooth'
-            });
+    
+        backToTopButton.addEventListener('click', ()=>{
+          window.scrollTo({
+            top: 0,
+            behavior:'smooth'
+          });
         });
-    </script>
-
- 
-
+      </script>
+    
+    
 </body>
 
 </html>
\ No newline at end of file
diff --git a/start_writing.html b/start_writing.html
index e8ac126..ff5bb2f 100644
--- a/start_writing.html
+++ b/start_writing.html
@@ -90,271 +90,275 @@ <h2>WordWise</h2>
             <a href="contact_us.html">Contact Us</a>
             <a href="give_feedback.html">Give Feedback</a>
         </div>
-        <div class="dropdown">
-          <!-- Profile Icon -->
-
-          <a href="javascript:void(0);" class="profile-link profile-icon" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
-              <i class="fas fa-user-circle"></i>
-          </a>
       
+   
+      <div class="dropdown">
+        <!-- Profile Icon -->
 
-          <!-- Dropdown Menu -->
-          <ul class="dropdown-menu" id="profileMenu" style="display: none; position: absolute; z-index: 1;">
-              <li><a href="./profile.html">My Profile</a></li>
-              <li><a href="#login" onclick="openForm('login')">Login</a></li>
-              <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
-          </ul>
-      </div>
+        <a href="javascript:void(0);" class="profile-link profile-icon" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
+            <i class="fas fa-user-circle"></i>
 
-        <script>
-            // Function to toggle the visibility of the dropdown menu
-            function toggleMenu() {
-                const menu = document.getElementById('profileMenu');
-                menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
-            }
-
-            // Close the dropdown if the user clicks outside of it
-            window.onclick = function(event) {
-                const menu = document.getElementById('profileMenu');
-                if (!event.target.matches('.profile-link img') && menu.style.display === 'block') {
-                    menu.style.display = 'none';
-                }
-            }
-        
-            // Update the profile image in the dropdown menu based on the selected avatar stored in localStorage
-            document.addEventListener("DOMContentLoaded", function() {
-                // Retrieve the saved avatar from localStorage
-                const savedAvatar = localStorage.getItem("selectedAvatar");
-        
-                // If an avatar is saved, update the profile image
-                if (savedAvatar) {
-                    const dropdownProfileImage = document.getElementById("dropdownProfileImage");
-                    if (dropdownProfileImage) {
-                        dropdownProfileImage.src = savedAvatar;  // Update the image source
-                    }
-                }
-            });
-        </script>
-   
-    <!--  Login Form -->
-  <div class="form-popup" id="loginForm">
-    <form class="form-container" onsubmit="return validateLoginForm()" style="max-width: 400px; margin: auto;">
-        <span class="close-icon" onclick="closeForm('login')">&times;</span>
-        <h2 class="text-center">Login</h2>
-        <div class="form-group">
-            <label for="loginEmail"><b>Email</b></label>
-            <input type="email" class="form-control" id="loginEmail" placeholder="Enter Email" name="email" required>
-        </div>
-        <div class="form-group position-relative">
-            <label for="loginPsw"><b>Password</b></label>
-            <input type="password" class="form-control" id="loginPsw" placeholder="Enter Password" name="psw" required minlength="6">
-            <i class="bi bi-eye eye-icon" id="toggleLoginPassword" onclick="togglePasswordVisibility('loginPsw', 'toggleLoginPassword')"></i>
-        </div>
-        <div class="forgot">
-            <a href="javascript:void(0);" onclick="openForgotPassword()">Forgot Password?</a>
-        </div>
-        <button type="submit" class="btn btn-primary w-100 mb-3">LOGIN</button>
-        <!-- Google Sign-In Button -->
-        <button type="button" class="btn google-btn" onclick="handleGoogleLogin()">
-            <img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
-            Sign in with Google
-        </button>
-    </form>
-  </div>
-  
-  <!-- Signup Form -->
-  <div class="form-popup" id="signupForm">
-    <form class="form-container" onsubmit="return validateSignupForm()" style="max-width: 400px; margin: auto;">
-        <span class="close-icon" onclick="closeForm('signup')">&times;</span>
-        <h2 class="text-center">Signup</h2>
-        <div class="form-group">
-            <label for="name"><b>Full Name</b></label>
-            <input type="text" class="form-control" id="name" placeholder="Enter Full Name" name="name"
-                            required pattern="[a-zA-Z ]+"
-                        oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')"
-                        oninput="this.setCustomValidity('')">
-        </div>
-        <div class="form-group">
-            <label for="signupEmail"><b>Email</b></label>
-            <input type="email" class="form-control" id="signupEmail" placeholder="Enter Email" name="email" required>
-        </div>
-        <div class="form-group position-relative">
-            <label for="signupPsw"><b>Password</b></label>
-            <input type="password" class="form-control" id="signupPsw" placeholder="Enter Password" name="psw" required minlength="6">
-            <i class="bi bi-eye eye-icon" id="toggleSignupPassword" onclick="togglePasswordVisibility('signupPsw', 'toggleSignupPassword')"></i>
-        </div>
-        <div class="form-group position-relative">
-            <label for="confirmPsw"><b>Confirm Password</b></label>
-            <input type="password" class="form-control" id="confirmPsw" placeholder="Confirm Password" name="confirmPsw" required minlength="6">
-            <i class="bi bi-eye eye-icon" id="toggleConfirmPassword" onclick="togglePasswordVisibility('confirmPsw', 'toggleConfirmPassword')"></i>
-        </div>
-        <button type="submit" class="btn btn-primary w-100 mb-3">SIGNUP</button>
-        <!-- Google Sign-In Button -->
-         <button type="button" class="btn google-btn" onclick="handleGoogleLogin()">
-          <img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
-          Sign in with Google</button>
-    </form>
-  </div>
+        </a>
 
-  <!-- Forgot Password Modal -->
-  <div id="forgot-password-modal" class="modal">
-    <div class="form-container modal-content">
-      <h2>Forgot Password</h2>
-      <p>Please enter your email address to reset your password.</p>
-  
-      <label for="email">Email Address</label>
-      <input type="email" id="email" placeholder="Enter your email" required />
-  
-      <button class="btn" onclick="submitForgotPassword()">Submit</button>
-      <button class="btn cancel" onclick="closeForgotPasswordModal()">Cancel</button>
+        <!-- Dropdown Menu -->
+        <ul class="dropdown-menu" id="profileMenu" style="display: none; position: absolute; z-index: 1;">
+        
+            <li><a href="#login" onclick="openForm('login')">Login</a></li>
+            <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
+        </ul>
     </div>
-  </div>
+    <script>
+      function toggleMenu() {
+          const menu = document.getElementById('profileMenu');
+          menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
+      }
   
-  <!-- Toggle Password Visibility Script -->
-  <script>
-    function togglePasswordVisibility(passwordFieldId, iconId) {
-        const passwordField = document.getElementById(passwordFieldId);
-        const togglePassword = document.getElementById(iconId);
-        if (passwordField.type === 'password') {
-            passwordField.type = 'text';
-            togglePassword.classList.remove('bi-eye');
-            togglePassword.classList.add('bi-eye-slash');
-        } else {
-            passwordField.type = 'password';
-            togglePassword.classList.remove('bi-eye-slash');
-            togglePassword.classList.add('bi-eye');
-        }
-    }
+      // Close the dropdown if the user clicks outside of it
+      window.onclick = function(event) {
+          const menu = document.getElementById('profileMenu');
+          if (!event.target.matches('.profile-link img') && menu.style.display === 'block') {
+              menu.style.display = 'none';
+          }
+      }
   </script>
   
-  <!-- CSS Styles -->
-  <style>
-    .form-popup {
-        display: none;
-        position: fixed;
-        z-index: 9;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        width: 100%;
-        max-width: 500px;
-        padding: 20px;
-        background-color: white;
-        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.6);
-        border-radius: 10px;
-        box-sizing: border-box;
-    }
-  
-    .form-container h2 {
-        margin-bottom: 20px;
-        color: #333;
-    }
-  
-    .form-group {
-        margin-bottom: 15px;
-    }
-  
-    .form-control {
-        border-radius: 5px;
-        padding: 12px;
-        font-size: 16px; 
-        line-height: 1.5; 
-        box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
-        width: 100%;
-    }
-  
-    .forgot {
-        text-align: right; 
-        margin-left: 50px;
-        font-size: 10px;   
-        margin-top: -40px;
-  
-    }
-  
-    .btn {
-        margin-top: 10px;
-        border-radius: 5px;
-    }
-  
-    .eye-icon {
-        position: absolute;
-        right: 15px;
-        top: 38px;
-        cursor: pointer;
-        color: #007bff;
-    }
-  
-    .close-icon {
-        font-size: 24px;
-        cursor: pointer;
-        float: right;
-    }
-  
-    .position-relative {
-        position: relative;
-    }
-  
-    /* Login button jumping issue fix */
-    .btn-primary {
-        transition: all 0.3s ease; /* Smooth transition */
-    }
-  
-    .btn-primary:hover {
-        background-color: #0056b3;
-    }
-  
-    .google-btn {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-  
-    .google-logo {
-        width: 20px;
-        height: 20px;
-        margin-right: 10px;
-    }
-  
-    .btn-primary:hover {
-        background-color: #0056b3;
-    }
-  
-          /* Styles for collaborative writing feature */
-          #collaborators {
-          margin-bottom: 15px;
-        }
-  
-        #collaboratorsList {
-          list-style-type: none;
-          padding: 0;
-        }
-  
-        #collaboratorsList li {
-          display: inline-block;
-          margin-right: 10px;
-          padding: 5px 10px;
-          background-color: #f0f0f0;
-          border-radius: 15px;
-        }
-  
-        #addCollaborator {
-          margin-top: 10px;
-        }
-  
-        #collaborativeSection {
-          border: 1px solid #ccc;
-          padding: 15px;
-          margin-bottom: 15px;
-          border-radius: 5px;
-        }
+   
   
-        #collaborativeContent {
-          width: 100%;
-          min-height: 200px;
-          margin-bottom: 10px;
-        }
-  </style>
+      
+                <!-- Login Form -->
+                <div class="form-popup" id="loginForm">
+                  <form class="form-container" onsubmit="return validateLoginForm()" style="max-width: 400px; margin: auto;">
+                      <span class="close-icon" onclick="closeForm('login')">&times;</span>
+                      <h2 class="text-center">Login</h2>
+                      <div class="form-group">
+                          <label for="loginEmail"><b>Email</b></label>
+                          <input type="email" class="form-control" id="loginEmail" placeholder="Enter Email" name="email" required>
+                      </div>
+                      <div class="form-group position-relative">
+                          <label for="loginPsw"><b>Password</b></label>
+                          <input type="password" class="form-control" id="loginPsw" placeholder="Enter Password" name="psw" required minlength="6">
+                          <i class="bi bi-eye eye-icon" id="toggleLoginPassword" onclick="togglePasswordVisibility('loginPsw', 'toggleLoginPassword')"></i>
+                      </div>
+                      <div class="remember-me">
+                          <input type="checkbox" id="remember-me" />
+                          <label for="remember-me">Remember Me</label>
+                      </div>
+                      <div class="forgot">
+                          <a href="javascript:void(0);" onclick="openForgotPassword()">Forgot Password?</a>
+                      </div>
+                      <button type="submit" class="btn btn-secondary w-100 mb-3">LOGIN</button>
+                      <style>
+                          .btn:hover {
+                              transition: 0.5s ease;
+                          }
+                      </style>
+                      <!-- Google Login Button -->
+                      <button type="button" class="btn google-btn" onclick="window.location.href='https://accounts.google.com/v3/signin/identifier?authuser=0&continue=https%3A%2F%2Fmyaccount.google.com%2F&ec=GAlAwAE&hl=en_GB&service=accountsettings&flowName=GlifWebSignIn&flowEntry=AddSession&dsh=S1527110508%3A1729760212648495&ddm=0'">
+                          <img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
+                          Sign in with Google</button>
+                      <button type="button" class="btn btn-secondary w-100" onclick="closeForm('login')">CLOSE</button>
+                      <!-- Link to Signup Page -->
+                      <div class="new">
+                          <p>Don't have an account? <a href="javascript:void(0);" onclick="openForm('signup')">Sign up
+                                  here</a></p>
+                      </div>
+                  </form>
+              </div>
+
+              <!-- Signup Form -->
+              <div class="form-popup" id="signupForm">
+                  <form class="form-container" onsubmit="return validateSignupForm()" style="max-width: 400px; margin: auto;">
+                      <span class="close-icon" onclick="closeForm('signup')">&times;</span>
+                      <h2 class="text-center">Signup</h2>
+                      <div class="form-group">
+                          <label for="name"><b>Full Name</b></label>
+                          <input type="text" class="form-control" id="name" placeholder="Enter Full Name" name="name" required>
+                      </div>
+                      <div class="form-group">
+                          <label for="signupEmail"><b>Email</b></label>
+                          <input type="email" class="form-control" id="signupEmail" placeholder="Enter Email" name="email" required>
+                      </div>
+                      <div class="form-group position-relative">
+                          <label for="signupPsw"><b>Password</b></label>
+                          <input type="password" class="form-control" id="signupPsw" placeholder="Enter Password" name="psw" required minlength="6">
+                          <i class="bi bi-eye eye-icon" id="toggleSignupPassword" onclick="togglePasswordVisibility('signupPsw', 'toggleSignupPassword')"></i>
+                      </div>
+                      <div class="form-group position-relative">
+                          <label for="confirmPsw"><b>Confirm Password</b></label>
+                          <input type="password" class="form-control" id="confirmPsw" placeholder="Confirm Password" name="confirmPsw" required minlength="6">
+                          <i class="bi bi-eye eye-icon" id="toggleConfirmPassword" onclick="togglePasswordVisibility('confirmPsw', 'toggleConfirmPassword')"></i>
+                      </div>
+                      <div class="remember-me">
+                          <input type="checkbox" id="remember-me" />
+                          <label for="remember-me">Remember Me</label>
+                      </div>
+                      <button type="submit" class="btn btn-primary w-100 mb-3">SIGNUP</button>
+                      <!-- Google Sign-In Button -->
+                      <button type="button" class="btn google-btn" onclick="window.location.href='https://accounts.google.com/v3/signin/identifier?authuser=0&continue=https%3A%2F%2Fmyaccount.google.com%2F&ec=GAlAwAE&hl=en_GB&service=accountsettings&flowName=GlifWebSignIn&flowEntry=AddSession&dsh=S1527110508%3A1729760212648495&ddm=0'">
+                          <img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
+                          Sign in with Google</button>
+                      <button type="button" class="btn btn-secondary w-100" onclick="closeForm('signup')">CLOSE</button>
+                      <!-- Link to Login Page -->
+                      <div class="new">
+                          <p>Already have an account? <a href="javascript:void(0);" onclick="openForm('login')">Login
+                                  here</a></p>
+                      </div>
+                  </form>
+              </div>
+
+              <!-- Forgot Password Modal -->
+              <div id="forgot-password-modal" class="modal">
+                  <div class="form-container modal-content">
+                      <h2>Forgot Password</h2>
+                      <p>Please enter your email address to reset your password.</p>
+
+                      <label for="email">Email Address</label>
+                      <input type="email" id="email" placeholder="Enter your email" required />
+
+                      <button class="btn" onclick="submitForgotPassword()">Submit</button>
+                      <button class="btn cancel" onclick="closeForgotPasswordModal()">Cancel</button>
+                  </div>
+              </div>
+
+              <!-- Toggle Password Visibility Script -->
+              <script>
+                  function togglePasswordVisibility(passwordFieldId, iconId) {
+                      const passwordField = document.getElementById(passwordFieldId);
+                      const togglePassword = document.getElementById(iconId);
+                      if (passwordField.type === 'password') {
+                          passwordField.type = 'text';
+                          togglePassword.classList.remove('bi-eye');
+                          togglePassword.classList.add('bi-eye-slash');
+                      } else {
+                          passwordField.type = 'password';
+                          togglePassword.classList.remove('bi-eye-slash');
+                          togglePassword.classList.add('bi-eye');
+                      }
+                  }
+              </script>
+              <script>
+                  document.addEventListener("DOMContentLoaded", function () {
+                      const rememberMeCheckbox = document.getElementById("remember-me");
+                      const usernameInput = document.getElementById("username");
+
+                      // Load saved username if it exists
+                      if (localStorage.getItem("rememberedUsername")) {
+                          usernameInput.value = localStorage.getItem("rememberedUsername");
+                          rememberMeCheckbox.checked = true;
+                      }
+
+                      // When the form is submitted, save the username if "Remember Me" is checked
+                      document.querySelector(".sign-in-form").addEventListener("submit", function (e) {
+                          e.preventDefault(); // Prevent default form submission
+
+                          if (rememberMeCheckbox.checked) {
+                              localStorage.setItem("rememberedUsername", usernameInput.value);
+                          } else {
+                              localStorage.removeItem("rememberedUsername");
+                          }
+
+                          // Add form submission logic here
+                      });
+                  });
+              </script>
+
+
+  <!-- CSS Styles -->
   
+                <!-- Styles -->
+                <style>
+                  .form-popup {
+                      .form-popup {
+                          display: none;
+                          /* Hidden by default */
+                          position: fixed;
+                          /* Stay in place */
+                          z-index: 9;
+                          /* Sit on top */
+                          left: 50%;
+                          top: 50%;
+                          transform: translate(-50%, -50%);
+                          /* Center the popup */
+                          width: 100%;
+                          max-width: 500px;
+                          /* Limit width */
+                          padding: 20px;
+                          background-color: white;
+                          box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.6);
+                          border-radius: 10px;
+                          box-sizing: border-box;
+                      }
+                  }
+                  
+                  .form-container h2 {
+                      margin-bottom: 20px;
+                      color: #333;
+                  }
+                  
+                  .form-group {
+                      margin-bottom: 15px;
+                  }
+                  
+                  .form-control {
+                      border-radius: 5px;
+                      padding: 10px;
+                      box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
+                  }
+                  
+                  .btn {
+                      margin-top: 10px;
+                      border-radius: 5px;
+                  }
+                  
+                  .eye-icon {
+                      position: absolute;
+                      right: 15px;
+                      top: 38px;
+                      cursor: pointer;
+                      color: #007bff;
+                  }
+                  
+                  .close-icon {
+                      font-size: 24px;
+                      cursor: pointer;
+                      float: right;
+                  }
+                  
+                  .position-relative {
+                      position: relative;
+                  }
+                  
+                  .btn-primary:hover {
+                      background-color: #0056b3;
+                  }
+                  
+                  .btn-secondary:hover {
+                      background-color: #6c757d;
+                  }
+                  
+                  .scroll-to-top {
+                      background-color: #0066cc;
+                      /* Button color */
+                      color: white;
+                      /* Text color */
+                      border: none;
+                      /* No border */
+                      border-radius: 5px;
+                      /* Rounded corners */
+                      padding: 10px 15px;
+                      /* Padding for better appearance */
+                      cursor: pointer;
+                      /* Pointer cursor on hover */
+                      margin-top: 10px;
+                      /* Space between the paragraph and button */
+                  }
+                  
+                  .scroll-to-top:hover {
+                      background-color: #005bb5;
+                      /* Darker shade on hover */
+                  }
+              </style>
+
   <!-- Bootstrap Icons and Script for Eye Icon Functionality -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
   <script>
@@ -372,7 +376,9 @@ <h2>Forgot Password</h2>
         }
     }
   </script>
-
+  
+  
+  
           <div class="theme-switch-wrapper">
             <label class="theme-switch" for="checkbox">
               <input type="checkbox" id="checkbox" />
@@ -477,11 +483,7 @@ <h4>Suggestions:</h4>
       </div>
     </main>
 
-    <!-- <button id="backTotop ">⬆️</button>  -->
-    </form>
-    <div id="backToTop " title="Back to Top">
-      <i class="fas fa-arrow-up"></i>
-    </div> 
+    <button id="backToTop">⬆️</button>
 
     <!-- main -->
 
@@ -621,8 +623,6 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
           </div>
       </div>
   </div>
-  
-  
   <!-- the authentication copyright -->
   <div class="wordwise-footer">
       <div class="wordwise-footer-content">
@@ -824,13 +824,14 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</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 src="script.js"></script>
+<div id="back-to-top" class="back-to-top">
+
+  <i class="fas fa-chevron-up"></i>
+
+</div>
 
-<div id="backToTop" title="Back to Top">
-  <i class="fas fa-arrow-up" style="margin-left: 18px;"></i>
-  </div>
 <style>
-  
-  #backtoTop {
+  #backToTop {
     position: fixed;
     bottom: 20px;
     right: 30px;
@@ -849,17 +850,29 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
     visibility: hidden;
   }
 
-  #back-to-top.show {
+  #backToTop.show {
     opacity: 1;
     visibility: visible;
   }
-
-   
 </style>
+</head>
+<body>
+
+<!-- Content of the page goes here -->
+<div style="height: 1500px;">
+  <h1>Scroll down to see the "Back to Top" button</h1>
+</div>
+
+<!-- Back to Top Button -->
+<div id="backToTop" title="Back to Top">
+  <i class="fas fa-arrow-up" style="margin-left: 18px;"></i>
+</div>
 
 <script>
-  const backToTopButton = document.getElementById('back-to-top');
+  // Get the Back to Top button element
+  const backToTopButton = document.getElementById('backToTop');
 
+  // Add scroll event to show/hide the button
   window.addEventListener('scroll', () => {
     if (window.scrollY > 300) {
       backToTopButton.classList.add('show');
@@ -868,17 +881,14 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
     }
   });
 
-  backToTopButton.addEventListener('click', ()=>{
+  // Add click event to scroll to the top smoothly
+  backToTopButton.addEventListener('click', () => {
     window.scrollTo({
       top: 0,
-      behavior:'smooth'
+      behavior: 'smooth'
     });
   });
 </script>
 
-
-
-
-
-  </body>
-</html>
+</body>
+</html>
\ No newline at end of file
diff --git a/start_writing.js b/start_writing.js
index 39522a3..9c15973 100644
--- a/start_writing.js
+++ b/start_writing.js
@@ -123,3 +123,4 @@ async function getWritingSuggestions() {
 
 
 document.getElementById("getSuggestions").addEventListener("click", getWritingSuggestions);
+