diff --git a/index.html b/index.html
index cd7ef13..369d096 100644
--- a/index.html
+++ b/index.html
@@ -21,8 +21,22 @@ <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 45px 12px 12px; border:1px solid #ddd; border-radius:8px; font-size:14px; box-sizing:border-box;"
+  >
+
+  <button
+    type="button"
+    id="toggle-password"
+    style="position:absolute; right:12px; top:50%; transform:translateY(-50%); border:none; background:none; cursor:pointer;"
+  >
+    👁️
+  </button>
+</div>
     <button id="auth-submit-btn" style="width:100%; padding:12px; background:#4f46e5; color:white; border:none; border-radius:8px; font-size:15px; font-weight:600; cursor:pointer;">
     Sign In
     </button>
@@ -305,6 +319,18 @@ <h3 style="font-size:12px; font-weight:700; text-transform:uppercase; color:var(
 
   <script type="module" src="/js/app.js"></script>
   <script>
+    const passwordInput = document.getElementById('auth-password');
+const togglePassword = document.getElementById('toggle-password');
+
+if (passwordInput && togglePassword) {
+  togglePassword.addEventListener('click', () => {
+    const isPassword = passwordInput.type === 'password';
+
+    passwordInput.type = isPassword ? 'text' : 'password';
+    togglePassword.textContent = isPassword ? '🙈' : '👁️';
+  });
+}
+
   let isLogin = true;
 
   document.getElementById('auth-toggle-btn').addEventListener('click', (e) => {