diff --git a/Scroll_and_progressbar.css b/Scroll_and_progressbar.css
index 7d41f244..771f3cf1 100644
--- a/Scroll_and_progressbar.css
+++ b/Scroll_and_progressbar.css
@@ -45,7 +45,7 @@
     background-color: #f8b5b5; /* Background color matching scrollbar track */
     border-radius: 10px; /* Rounded corners */
     box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2); /* Optional shadow for container */
-    position: fixed;
+    /* position: fixed; */
     overflow: hidden;
   }
   
diff --git a/about.html b/about.html
index 0427574d..d6d34d58 100644
--- a/about.html
+++ b/about.html
@@ -79,6 +79,7 @@
 </head>
 
 <body>
+   <nav style="margin-bottom: 4rem;">
     <div class="progress-container">
         <div class="progress-bar" id="progress-bar"></div>
     </div>
@@ -106,7 +107,7 @@ <h2>WordWise</h2>
                 <a href="category.html">Categories</a>
                 <a href="about.html">About</a>
                 <a href="contact_us.html">Contact Us</a>
-                <a href="contact_us.html">Give Feedback</a>
+                <a href="give_feedback.html">Give Feedback</a>
             </div>
 
             <div class="dropdown">
@@ -393,12 +394,13 @@ <h2>Forgot Password</h2>
 
         </header>
     </div>
+   </nav>
 
     <!--main-->
-    </main>
+    <!-- </main> -->
 
     <!--mainn-->
-    <div class="about">
+    <div class="about" style="margin-top: 8rem;">
         <div class="about-content">
             <h1>About Us</h1>
             <p>WordWise is a responsive, user-friendly blogging platform designed to enrich vocabulary and engage
@@ -443,6 +445,11 @@ <h2>Our Contributors</h2>
         </div>
     </div>
 
+     <!-- <button id="backToTop">⬆️</button> -->
+     <div id="backToTop" title="Back to Top">
+        <i class="fas fa-arrow-up"></i>
+    </div>
+
    
     <!-- footer -->
     <footer id="footer">
diff --git a/blog.html b/blog.html
index fce19094..78307079 100644
--- a/blog.html
+++ b/blog.html
@@ -25,6 +25,7 @@
 </head>
 
 <body>
+<nav>
   <div class="progress-container">
     <div class="progress-bar" id="progress-bar"></div>
   </div>
@@ -52,7 +53,7 @@ <h2>WordWise</h2>
         <a href="category.html">Categories</a>
         <a href="about.html">About</a>
         <a href="contact_us.html">Contact Us</a>
-        <a href="contact_us.html">Give Feedback</a>
+        <a href="give_feedback.html">Give Feedback</a>
       </div>
 
 
@@ -333,11 +334,12 @@ <h2>Forgot Password</h2>
 
     </header>
   </div>
+</nav>
  
   <!--header-->
   
     <!--mainn-->
-    <main id="site-main">
+    <main id="site-main" style="margin-top: 8rem;">
       <!--post content-->
       <section class="container">
         <!-- <div class="layout-2 row"> -->
@@ -490,7 +492,9 @@ <h2 class="section-title">
       <h3 class="form-title">Share Your Thoughts</h3>
       <form id="commentForm" class="form-content">
         <div class="input-container">
-          <input type="text" id="commenterName" class="input-field" placeholder=" " required>
+          <input type="text" id="commenterName" class="input-field" placeholder=" " required pattern="[a-zA-Z ]+"
+                                oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')"
+                                oninput="this.setCustomValidity('')">
           <label for="commenterName" class="input-label">Your Name</label>
         </div>
         <div class="input-container">
@@ -684,41 +688,48 @@ <h5 class="commenter-name">${comment.name}</h5>
   max-width: 48rem;
   margin: 0 auto;
 }
-
+ 
 .section-title {
-  font-size: 2.25rem;
-  font-weight: 800;
-  text-align: center;
-  color: #111827;
-  margin-bottom: 48px;
-}
 
+  font-size:  2.25rem;
+  font-weight:  800;
+  text-align:  center;
+  color:  #111827;
+  margin-bottom:  48px;
+
+}
+ 
 .title-text {
   background-clip: text;
   -webkit-background-clip: text;
   color: #f4978e;
   /* background-image: linear-gradient(to right, #f4978e); */
 }
-
+ 
 .comment-form {
-  margin-bottom: 64px;
-  background-color: white;
-  padding: 24px;
-  border-radius: 0.75rem;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  transition: all 0.3s;
-}
 
+  margin:  64px auto;
+  background-color:  transparent;
+  padding:  24px;
+  border-radius:  0.75rem;
+  box-shadow:  0 10px 20px var(--text-color);
+  transition:  all 0.3s;
+
+}
+ 
 .comment-form:hover {
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
 }
-
+ 
 .form-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: #1f2937;
-  margin-bottom: 24px;
+
+  font-size:  1.5rem;
+  font-weight:  700;
+  color:  #3498db;
+  margin-bottom:  24px;
+
 }
+ 
 
 .form-content {
   display: flex;
@@ -730,6 +741,17 @@ <h5 class="commenter-name">${comment.name}</h5>
   position: relative;
 }
 
+.input-field {
+
+  width:  100%;
+  padding:  12px 16px;
+  border:  2px solid #d1d5db;
+  border-radius:  0.5rem;
+  transition:  border-color 0.3s;
+  margin-top: 7px;
+
+}
+
 .input-field {
   width: 100%;
   padding: 12px 16px;
@@ -745,7 +767,7 @@ <h5 class="commenter-name">${comment.name}</h5>
 
 .input-label {
   position: absolute;
-  left: 16px;
+  left: 8px;
   top: 12px;
   color: #6b7280;
   transition: all 0.3s;
@@ -755,21 +777,24 @@ <h5 class="commenter-name">${comment.name}</h5>
 .input-field:focus + .input-label,
 .input-field:not(:placeholder-shown) + .input-label {
   font-size: 0.875rem;
-  top: -10px;
+  top: -17px;
   color: #f4978e;
 }
-
+ 
 .submit-button {
-  width: 100%;
-  color: #f4978e;
-  font-weight: 600;
-  padding: 12px 24px;
-  border-radius: 0.5rem;
-  border: none;
-  cursor: pointer;
-  transition: all 0.3s;
-}
 
+  width:  100%;
+  color:  #ffffff;
+  font-weight:  600;
+  padding:  12px 24px;
+  border-radius:  0.5rem;
+  border:  none;
+  cursor:  pointer;
+  transition:  all 0.3s;
+  background-color:  #3498db;
+
+}
+ 
 .submit-button:hover {
   color: #f4978e;
   transform: scale(1.05);
@@ -1095,8 +1120,12 @@ <h5 class="commenter-name">${comment.name}</h5>
 
 
   </main>
-  <button id="backToTop">⬆️</button>
   <!--mainn-->
+  <!-- <button id="backToTop">⬆️</button> -->
+  <div id="backToTop" title="Back to Top">
+    <i class="fas fa-arrow-up"></i>
+  </div>
+  
   <!-- footer -->
   <!-- footer -->
   <footer id="footer">
diff --git a/category.html b/category.html
index 4f2809c6..fc4093ee 100644
--- a/category.html
+++ b/category.html
@@ -38,6 +38,7 @@
 </head>
 
 <body>
+   <nav>
     <div class="progress-container">
         <div class="progress-bar" id="progress-bar"></div>
       </div>
@@ -65,7 +66,7 @@ <h2>WordWise</h2>
             <a href="category.html">Categories</a>
             <a href="about.html">About</a>
             <a href="contact_us.html">Contact Us</a>
-            <a href="contact_us.html">Give Feedback</a>
+            <a href="give_feedback.html">Give Feedback</a>
         </div>
        
         <div class="dropdown">
@@ -340,10 +341,11 @@ <h2>Forgot Password</h2>
         
         </header>
     </div>
+   </nav>
     <!--header-->
 
 
-    <main>
+    <main style="margin-top: 8rem;">
         <section class="category-container">
             <div class="category-row">
                 <div class="new-category-box">
@@ -548,7 +550,10 @@ <h3 class="new-post-title">Fashion Trends</h3>
     <!-- Swiper end -->
     </main>
 
-
+    <!-- <button id="backToTop">⬆️</button> -->
+    <div id="backToTop" title="Back to Top">
+        <i class="fas fa-arrow-up"></i>
+    </div>
     <!-- footer -->
 
     <footer id="footer" style="margin-top: 30px;">
diff --git a/contact_us.html b/contact_us.html
index 81a2d369..c160499d 100644
--- a/contact_us.html
+++ b/contact_us.html
@@ -84,314 +84,317 @@
 </head>
 
 <body>
-  <div class="progress-container">
-    <div class="progress-bar" id="progress-bar"></div>
-  </div>
-  <div class="layout-container" style="margin-bottom: 4rem;">
-
-    <header>
-
-
-
-      <div class="logo">
-        <a href="index.html">
-          <h2>WordWise</h2>
-        </a>
-      </div>
-      <div class="hamburger" id="hamburger">
-        <span></span>
-        <span></span>
-        <span></span>
-      </div>
-      <div class="nav-links1">
-        <a href="index.html">Home</a>
-        <a href="blog.html">Leading Blog</a>
-        <a href="start_writing.html">Start Writing</a>
-        <a href="category.html">Categories</a>
-        <a href="about.html">About</a>
-        <a href="contact_us.html">Contact Us</a>
-        <a href="give_feedback.html">Give Feedback</a>
-      </div>
-
-
-      <div class="dropdown">
-        <!-- Profile Icon -->
-        <a href="#" class="profile-icon" id="profileDropdown" onclick="toggleDropdown()">
-          <i class="fas fa-user-circle"></i>
-        </a>
-
-        <!-- Dropdown Menu -->
-        <ul class="dropdown-menu" id="dropdownMenu">
-          <li><a href="#login" onclick="openForm('login')">Login</a></li>
-          <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
-        </ul>
-      </div>
-
-
-
-      <!--  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.jpg" 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>
+  <nav>
+    <div class="progress-container">
+      <div class="progress-bar" id="progress-bar"></div>
+    </div>
+    <div class="layout-container" style="margin-bottom: 4rem;">
+  
+      <header>
+  
+  
+  
+        <div class="logo">
+          <a href="index.html">
+            <h2>WordWise</h2>
+          </a>
+        </div>
+        <div class="hamburger" id="hamburger">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+        <div class="nav-links1">
+          <a href="index.html">Home</a>
+          <a href="blog.html">Leading Blog</a>
+          <a href="start_writing.html">Start Writing</a>
+          <a href="category.html">Categories</a>
+          <a href="about.html">About</a>
+          <a href="contact_us.html">Contact Us</a>
+          <a href="give_feedback.html">Give Feedback</a>
+        </div>
+  
+  
+        <div class="dropdown">
+          <!-- Profile Icon -->
+          <a href="#" class="profile-icon" id="profileDropdown" onclick="toggleDropdown()">
+            <i class="fas fa-user-circle"></i>
+          </a>
+  
+          <!-- Dropdown Menu -->
+          <ul class="dropdown-menu" id="dropdownMenu">
+            <li><a href="#login" onclick="openForm('login')">Login</a></li>
+            <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
+          </ul>
+        </div>
+  
+  
+  
+        <!--  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.jpg" 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>
+            </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.jpg" 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>
-          <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.jpg" 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');
+  
+        <!-- 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;
+          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;
-        }
-
-        .google-logo {
-          width: 20px;
-          height: 20px;
-          margin-right: 10px;
-        }
-
-        .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;
-        }
-      </style>
-
-
-      <script src="signup.js"></script>
-      <!-- Link to your JavaScript file -->
-
-      <div class="theme-switch-wrapper">
-        <label class="theme-switch" for="checkbox">
-          <input type="checkbox" id="checkbox" />
-          <div class="slider">
-            <img src="https://img.icons8.com/emoji/48/000000/sun-emoji.png" alt="Sun" class="icon sun-icon" />
-            <img src="https://img.icons8.com/emoji/48/000000/crescent-moon-emoji.png" alt="Moon"
-              class="icon moon-icon" />
-          </div>
-        </label>
-        <span id="mode-label"></span>
-
-      </div>
-    </header>
-  </div>
+        </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;
+          }
+  
+          .strength-meter {
+            height: 10px;
+            width: 0;
+            transition: width 0.3s;
+            margin-top: 5px;
+            text-align: center;
+            color: white;
+            font-size: 12px;
+          }
+        </style>
+  
+  
+        <script src="signup.js"></script>
+        <!-- Link to your JavaScript file -->
+  
+        <div class="theme-switch-wrapper">
+          <label class="theme-switch" for="checkbox">
+            <input type="checkbox" id="checkbox" />
+            <div class="slider">
+              <img src="https://img.icons8.com/emoji/48/000000/sun-emoji.png" alt="Sun" class="icon sun-icon" />
+              <img src="https://img.icons8.com/emoji/48/000000/crescent-moon-emoji.png" alt="Moon"
+                class="icon moon-icon" />
+            </div>
+          </label>
+          <span id="mode-label"></span>
+  
+        </div>
+      </header>
+    </div>
+  </nav>
 
   <div class="container" style="
         max-width: 600px;
         margin: 50px auto;
+        margin-top: 8rem;
         padding: 20px;
         /* background-color: #f9f9f9; */
         background-color: var(--background-color);
@@ -476,6 +479,11 @@ <h2 style="color: var(--text-color); font-size: 24px; margin-bottom: 20px">
       </button>
     </form>
 
+    <!-- <button id="backToTop">⬆️</button> -->
+    <div id="backToTop" title="Back to Top">
+      <i class="fas fa-arrow-up"></i>
+    </div>
+
     <div class="tags social" id="contact">
       <div class="d-flex-gap flex-wrap center-icons">
         <a href="https://www.facebook.com/" id="facebook" class="nav-link btn bg-light circle-icon"><i
diff --git a/give_feedback.html b/give_feedback.html
index 716d3fbc..7ccffd52 100644
--- a/give_feedback.html
+++ b/give_feedback.html
@@ -83,6 +83,7 @@
 </head>
 
 <body>
+ main
   <div class="progress-container">
     <div class="progress-bar" id="progress-bar"></div>
   </div>
@@ -177,212 +178,311 @@ <h2 class="text-center">Signup</h2>
               required minlength="6">
             <i class="bi bi-eye eye-icon" id="toggleConfirmPassword"
               onclick="togglePasswordVisibility('confirmPsw', 'toggleConfirmPassword')"></i>
+=======
+  <nav>
+    <div class="progress-container">
+      <div class="progress-bar" id="progress-bar"></div>
+    </div>
+    <div class="layout-container" style="margin-bottom: 4rem;">
+  
+      <header>
+        <div class="logo">
+          <a href="index.html">
+            <h2>WordWise</h2>
+          </a>
+        </div>
+        <div class="nav-links1">
+          <a href="index.html">Home</a>
+          <a href="blog.html">Leading Blog</a>
+          <a href="start_writing.html">Start Writing</a>
+          <a href="category.html">Categories</a>
+          <a href="about.html">About</a>
+          <a href="contact_us.html">Contact Us</a>
+          <a href="give_feedback.html">Give Feedback</a>
+        </div>
+  
+  
+        <div class="dropdown">
+          <!-- Profile Icon -->
+          <a href="#" class="profile-icon" id="profileDropdown" onclick="toggleDropdown()">
+            <i class="fas fa-user-circle"></i>
+          </a>
+  
+          <!-- Dropdown Menu -->
+          <ul class="dropdown-menu" id="dropdownMenu">
+            <li><a href="#login" onclick="openForm('login')">Login</a></li>
+            <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
+          </ul>
+        </div>
+  
+  
+  
+        <!--  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.jpg" 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>
+            </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.jpg" 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>
+ main
           </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.jpg" 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');
+  
+        <!-- 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;
+          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;
-        }
-
-        .google-logo {
-          width: 20px;
-          height: 20px;
-          margin-right: 10px;
-        }
-
-        .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;
-        }
-      </style>
-
-
-      <script src="signup.js"></script>
-      <!-- Link to your JavaScript file -->
-
-      <div class="theme-switch-wrapper">
-        <label class="theme-switch" for="checkbox">
-          <input type="checkbox" id="checkbox" />
-          <div class="slider">
-            <img src="https://img.icons8.com/emoji/48/000000/sun-emoji.png" alt="Sun" class="icon sun-icon" />
-            <img src="https://img.icons8.com/emoji/48/000000/crescent-moon-emoji.png" alt="Moon"
-              class="icon moon-icon" />
-          </div>
-        </label>
-        <span id="mode-label"></span>
-
-      </div>
-    </header>
-  </div>
+        </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;
+          }
+  
+          .strength-meter {
+            height: 10px;
+            width: 0;
+            transition: width 0.3s;
+            margin-top: 5px;
+            text-align: center;
+            color: white;
+            font-size: 12px;
+          }
+        </style>
+  
+  
+        <script src="signup.js"></script>
+        <!-- Link to your JavaScript file -->
+  
+        <div class="theme-switch-wrapper">
+          <label class="theme-switch" for="checkbox">
+            <input type="checkbox" id="checkbox" />
+            <div class="slider">
+              <img src="https://img.icons8.com/emoji/48/000000/sun-emoji.png" alt="Sun" class="icon sun-icon" />
+              <img src="https://img.icons8.com/emoji/48/000000/crescent-moon-emoji.png" alt="Moon"
+                class="icon moon-icon" />
+            </div>
+          </label>
+          <span id="mode-label"></span>
+  
+        </div>
+      </header>
+    </div>
+  </nav>
 
   <div class="container" style="
         max-width: 600px;
         margin: 50px auto;
+        margin-top: 8rem;
         padding: 20px;
         /* background-color: #f9f9f9; */
         background-color: var(--background-color);
@@ -508,6 +608,11 @@ <h3 style="color: #3498db">Message Sent</h3>
     </div>
   </div>
 
+  <!-- <button id="backToTop">⬆️</button> -->
+  <div id="backToTop" title="Back to Top">
+    <i class="fas fa-arrow-up"></i>
+  </div>
+
   <!-- footer -->
   <footer id="footer">
     <div class="footer-container">
diff --git a/index.html b/index.html
index 025a08f4..39e7ea56 100644
--- a/index.html
+++ b/index.html
@@ -22,9 +22,10 @@
     <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" /> -->
 
     <!--css-->
-    <link rel="stylesheet" href="style.css">
+    <!-- <link rel="stylesheet" href="style.css"> -->
     <link rel="stylesheet" href="Scroll_and_progressbar.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="style.css">
     <style>
 
          @media (max-width: 1200px) {
@@ -102,318 +103,321 @@
   <div id="square5"></div>
 </div>
     </div>
-    <div class="progress-container">
-        <div class="progress-bar" id="progress-bar"></div>
-    </div>
-<!-- Navigation Bar  -->
-<div class="layout-container" style="margin-bottom: 4rem;">
-
-    <header>
-
-
-
-        <div class="logo">
-          <a href="index.html">
-            <h2>WordWise</h2>
-          </a>
-        </div>
-  
-        <div class="hamburger" id="hamburger">
-          <span></span>
-          <span></span>
-          <span></span>
-        </div>
-        <div class="nav-links1">
-          <a href="index.html">Home</a>
-          <a href="blog.html">Leading Blog</a>
-          <a href="start_writing.html">Start Writing</a>
-          <a href="category.html">Categories</a>
-          <a href="about.html">About</a>
-          <a href="contact_us.html">Contact Us</a>
-          <a href="give_feedback.html">Give Feedback</a>
-        </div>
-  
-  
-        <div class="dropdown">
-          <!-- Profile Icon -->
-          <a href="#" class="profile-icon" id="profileDropdown" onclick="toggleDropdown()">
-            <i class="fas fa-user-circle"></i>
-          </a>
-  
-          <!-- Dropdown Menu -->
-          <ul class="dropdown-menu" id="dropdownMenu">
-            <li><a href="#login" onclick="openForm('login')">Login</a></li>
-            <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
-          </ul>
-        </div>
-  
-  
-   
-  
-        <!--  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')">×</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.jpg" alt="Google Logo" class="google-logo">
-                  Sign in with Google
-              </button>
-          </form>
+    <nav>
+        <div class="progress-container">
+            <div class="progress-bar" id="progress-bar"></div>
         </div>
+    <!-- Navigation Bar  -->
+    <div class="layout-container" style="margin-bottom: 4rem;">
+    
+        <header>
+    
+    
+    
+            <div class="logo">
+              <a href="index.html">
+                <h2>WordWise</h2>
+              </a>
+            </div>
+      
+            <div class="hamburger" id="hamburger">
+              <span></span>
+              <span></span>
+              <span></span>
+            </div>
+            <div class="nav-links1">
+              <a href="index.html">Home</a>
+              <a href="blog.html">Leading Blog</a>
+              <a href="start_writing.html">Start Writing</a>
+              <a href="category.html">Categories</a>
+              <a href="about.html">About</a>
+              <a href="contact_us.html">Contact Us</a>
+              <a href="give_feedback.html">Give Feedback</a>
+            </div>
+      
+      
+            <div class="dropdown">
+              <!-- Profile Icon -->
+              <a href="#" class="profile-icon" id="profileDropdown" onclick="toggleDropdown()">
+                <i class="fas fa-user-circle"></i>
+              </a>
+      
+              <!-- Dropdown Menu -->
+              <ul class="dropdown-menu" id="dropdownMenu">
+                <li><a href="#login" onclick="openForm('login')">Login</a></li>
+                <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
+              </ul>
+            </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')">×</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>
+      
+            <!--  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')">×</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.jpg" 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')">×</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>
+                  </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.jpg" alt="Google Logo" class="google-logo">
+                    Sign in with Google</button>
+              </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="">
+            
+                <button class="btn" onclick="submitForgotPassword()">Submit</button>
+                <button class="btn cancel" onclick="closeForgotPasswordModal()">Cancel</button>
               </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.jpg" 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');
+            </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>
-        
-        <!-- 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>
-      <!-- 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>
+            
+            <!-- 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>
+          <!-- 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;
               }
           }
-          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>
+          </script>
+          
+          
+          <script src="signup.js"></script> <!-- Link to your JavaScript file -->
+          
+          
       
       
-      <script src="signup.js"></script> <!-- Link to your JavaScript file -->
       
       
-  
-  
-  
-  
-        <div class="theme-switch-wrapper">
-          <label class="theme-switch" for="checkbox">
-            <input type="checkbox" id="checkbox">
-            <div class="slider">
-              <img src="https://img.icons8.com/emoji/48/000000/sun-emoji.png" alt="Sun" class="icon sun-icon">
-              <img src="https://img.icons8.com/emoji/48/000000/crescent-moon-emoji.png" alt="Moon" class="icon moon-icon">
+            <div class="theme-switch-wrapper">
+              <label class="theme-switch" for="checkbox">
+                <input type="checkbox" id="checkbox">
+                <div class="slider">
+                  <img src="https://img.icons8.com/emoji/48/000000/sun-emoji.png" alt="Sun" class="icon sun-icon">
+                  <img src="https://img.icons8.com/emoji/48/000000/crescent-moon-emoji.png" alt="Moon" class="icon moon-icon">
+                </div>
+              </label>
+              <span id="mode-label">Light Mode</span>
+              &nbsp;&nbsp;&nbsp;&nbsp;
             </div>
-          </label>
-          <span id="mode-label">Light Mode</span>
-          &nbsp;&nbsp;&nbsp;&nbsp;
-        </div>
-  
-      </header>
-</div>
+      
+          </header>
+    </div>
+    </nav>
+   
 <!--Header Ends-->
     <!--Main Section Starts-->
-    <main id="site-main" style="margin-top: 90px;margin-left: 50px;">
+    <main id="site-main" style="margin-top: 8rem;margin-left: 50px;">
         <!--blog post section-->
         <section id="posts">
             <div class="container" >
diff --git a/start_writing.html b/start_writing.html
index 3db0e531..23fd278b 100644
--- a/start_writing.html
+++ b/start_writing.html
@@ -56,314 +56,316 @@
 </head>
 
   <body>
-    <div class="progress-container">
-      <div class="progress-bar" id="progress-bar"></div>
-    </div>
-    <!--header-->
-    <div class="layout-container" style="margin-bottom: 4rem;">
-
-      <header>
-  
-  
-  
-      <div class="logo" >
-        <a href="index.html">
-          <h2>WordWise</h2>
-        </a>
-      </div>
-      <div class="hamburger" id="hamburger">
-        <span></span>
-        <span></span>
-        <span></span>
-      </div>
-      <div class="nav-links1">
-          <a href="index.html">Home</a>
-          <a href="blog.html">Leading Blog</a>
-          <a href="start_writing.html">Start Writing</a>
-          <a href="category.html">Categories</a>
-          <a href="about.html">About</a>
-          <a href="contact_us.html">Contact Us</a>
-          <a href="contact_us.html">Give Feedback</a>
+    <nav>
+      <div class="progress-container">
+        <div class="progress-bar" id="progress-bar"></div>
       </div>
-      
-      <div class="dropdown">
-        <!-- Profile Icon -->
-        <a href="#" class="profile-icon" id="profileDropdown" onclick="toggleDropdown()">
-            <i class="fas fa-user-circle"></i>
-        </a>
+      <!--header-->
+      <div class="layout-container" style="margin-bottom: 4rem;">
+  
+        <header>
     
-        <!-- Dropdown Menu -->
-        <ul class="dropdown-menu" id="dropdownMenu">
-            <li><a href="#login" onclick="openForm('login')">Login</a></li>
-            <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
-        </ul>
-    </div>
- 
+    
+    
+        <div class="logo" >
+          <a href="index.html">
+            <h2>WordWise</h2>
+          </a>
+        </div>
+        <div class="hamburger" id="hamburger">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+        <div class="nav-links1">
+            <a href="index.html">Home</a>
+            <a href="blog.html">Leading Blog</a>
+            <a href="start_writing.html">Start Writing</a>
+            <a href="category.html">Categories</a>
+            <a href="about.html">About</a>
+            <a href="contact_us.html">Contact Us</a>
+            <a href="give_feedback.html">Give Feedback</a>
+        </div>
         
- 
-
-  <!--  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 class="dropdown">
+          <!-- Profile Icon -->
+          <a href="#" class="profile-icon" id="profileDropdown" onclick="toggleDropdown()">
+              <i class="fas fa-user-circle"></i>
+          </a>
+      
+          <!-- Dropdown Menu -->
+          <ul class="dropdown-menu" id="dropdownMenu">
+              <li><a href="#login" onclick="openForm('login')">Login</a></li>
+              <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
+          </ul>
       </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()">
+   
+          
+   
+  
+    <!--  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.jpg" 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" 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.jpg" 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" 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.jpg" 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>
+          Sign in with Google</button>
+    </form>
   </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>
-
-<!-- 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;
+  
+  <!-- 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>
+  
+  <!-- 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;
-      }
-
-      #collaborativeContent {
+        padding: 12px;
+        font-size: 16px; 
+        line-height: 1.5; 
+        box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
         width: 100%;
-        min-height: 200px;
-        margin-bottom: 10px;
-      }
-</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>
-  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>
-
-
-
-        <div class="theme-switch-wrapper">
-          <label class="theme-switch" for="checkbox">
-            <input type="checkbox" id="checkbox" />
-            <div class="slider">
-              <img
-                src="https://img.icons8.com/emoji/48/000000/sun-emoji.png"
-                alt="Sun"
-                class="icon sun-icon"
-              />
-              <img
-                src="https://img.icons8.com/emoji/48/000000/crescent-moon-emoji.png"
-                alt="Moon"
-                class="icon moon-icon"
-              />
-            </div>
-          </label>
-          <span id="mode-label"></span>
-              
-        </div>
-      </header>
-    </div>
+    }
+  
+    .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>
+  
+  <!-- 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>
+    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>
+  
+  
+  
+          <div class="theme-switch-wrapper">
+            <label class="theme-switch" for="checkbox">
+              <input type="checkbox" id="checkbox" />
+              <div class="slider">
+                <img
+                  src="https://img.icons8.com/emoji/48/000000/sun-emoji.png"
+                  alt="Sun"
+                  class="icon sun-icon"
+                />
+                <img
+                  src="https://img.icons8.com/emoji/48/000000/crescent-moon-emoji.png"
+                  alt="Moon"
+                  class="icon moon-icon"
+                />
+              </div>
+            </label>
+            <span id="mode-label"></span>
+                
+          </div>
+        </header>
+      </div>
+    </nav>
     <!--header-->
     <!-- main -->
     <!-- main -->
-    <main>
+    <main style="margin-top: 8rem;">
       <div class="blog-form-container">
         <form id="blogForm" onsubmit="PostBlog(event)">
           <h2 style="margin-bottom: 15px">Start Writing</h2>
diff --git a/style.css b/style.css
index 267b28b1..6dd55ea3 100644
--- a/style.css
+++ b/style.css
@@ -1021,9 +1021,9 @@ button {
   justify-content: center;
   align-items: center;
   background-color: #f8b5b5;
-  top: 0;
-  position: sticky;
-  z-index: 899;
+  top: 0 !important;
+  position: sticky !important;
+  z-index: 899 !important;
 
 }
 
@@ -2839,14 +2839,7 @@ for facebook
   transform:scale(1.1);
  } */
 
-/* for dribble 
-.flex-wrap .fa-dribbble {
-  transition: color 0.3s ease, transform 0.3s ease;
-}
-.flex-wrap .fa-dribbble:hover{
-  color:#ea4c89;
-  transform:scale(1.1);
-} */
+
 .flex-wrap a{
   margin-right: 10px;
   transition: all .38s ease-in-out;
@@ -3322,3 +3315,11 @@ text-align: center;
 .star-rating label:hover ~ label {
   color: #ffca28; 
 }
+nav{
+ width: 100%;
+  position: fixed;
+  top:0;
+  margin-bottom: 4rem;
+  z-index: 999;
+  
+}
\ No newline at end of file
