diff --git a/index.html b/index.html
index 3948a37..c96c181 100644
--- a/index.html
+++ b/index.html
@@ -24,7 +24,12 @@ <h2 id="auth-title" style="margin:0 0 8px; font-size:22px; font-weight:700;">Wel
 
     <input id="auth-email" type="email" placeholder="Email address" style="width:100%; padding:12px; border:1px solid #ddd; border-radius:8px; font-size:14px; margin-bottom:12px; box-sizing:border-box;">
     
-    <input id="auth-password" type="password" placeholder="Password" style="width:100%; padding:12px; border:1px solid #ddd; border-radius:8px; font-size:14px; margin-bottom:20px; box-sizing:border-box;">
+    <div style="position:relative; margin-bottom:20px;">
+      <input id="auth-password" type="password" placeholder="Password" style="width:100%; padding:12px 44px 12px 12px; border:1px solid #ddd; border-radius:8px; font-size:14px; box-sizing:border-box;">
+      <button type="button" id="password-toggle-btn" aria-label="Show password" aria-pressed="false" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); border:none; background:transparent; cursor:pointer; color:#4b5563; font-size:16px; display:flex; align-items:center; justify-content:center; padding:4px;">
+        <i class="fa-regular fa-eye" aria-hidden="true"></i>
+      </button>
+    </div>
 
     <input id="auth-confirm-password"
        type="password"
@@ -68,6 +73,7 @@ <h1 class="site-title">StudyPlan</h1>
 </nav>
 
   <div class="header-right">
+
     <button class="profile-btn" id="restart-tour-btn">Take Tour</button>
     <button class="profile-btn" id="profile-btn">Profile</button>
     <!--Streak Badge-->
@@ -434,6 +440,22 @@ <h3 style="font-size:12px; font-weight:700; text-transform:uppercase; color:var(
   <script>
   let isLogin = true;
 
+  const passwordToggleBtn = document.getElementById('password-toggle-btn');
+  const authPasswordInput = document.getElementById('auth-password');
+
+  if (passwordToggleBtn && authPasswordInput) {
+    passwordToggleBtn.addEventListener('click', () => {
+      const isVisible = authPasswordInput.type === 'text';
+      authPasswordInput.type = isVisible ? 'password' : 'text';
+      const icon = passwordToggleBtn.querySelector('i');
+      if (icon) {
+        icon.className = isVisible ? 'fa-regular fa-eye' : 'fa-regular fa-eye-slash';
+      }
+      passwordToggleBtn.setAttribute('aria-label', isVisible ? 'Show password' : 'Hide password');
+      passwordToggleBtn.setAttribute('aria-pressed', (!isVisible).toString());
+    });
+  }
+
   document.getElementById('auth-toggle-btn').addEventListener('click', (e) => {
     e.preventDefault();
     isLogin = !isLogin;
diff --git a/js/app.js b/js/app.js
index 5f50a0b..45a6e2f 100644
--- a/js/app.js
+++ b/js/app.js
@@ -778,10 +778,12 @@ function renderProfileSection() {
             <span class="profile-stat-value">${subjectsCount}</span>
             <span>Subjects</span>
           </div>
+
           <div>
              <span class="profile-stat-value">${readinessPercentage}%</span>
               <span>Readiness</span>
           </div>
+
         </div>
       </section>
     </div>
@@ -1924,7 +1926,6 @@ document.addEventListener('DOMContentLoaded', () => {
       renderFocusTasks();
     });
   }
-
   downloadBtn.addEventListener('click', () => {
     currentView = 'review';
     document.querySelector('.cal-section').classList.add('hidden');
@@ -1938,7 +1939,6 @@ document.addEventListener('DOMContentLoaded', () => {
     currentMonthDate.setMonth(currentMonthDate.getMonth() - 1);
     renderCalendar();
   });
-
   document.getElementById('cal-next').addEventListener('click', () => {
     currentMonthDate.setMonth(currentMonthDate.getMonth() + 1);
     renderCalendar();