diff --git a/css/index.css b/css/index.css
index 5a58934..a45230d 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1066,7 +1066,7 @@ body {
 
 .app {
   display: grid;
-  grid-template-columns: 240px 1fr 340px;
+  grid-template-columns: 240px 1fr var(--panel-width, 340px);
   height: 720px;
   border: 1px solid var(--color-border-tertiary);
   border-radius: var(--border-radius-lg);
diff --git a/index.html b/index.html
index 57fc009..acf6546 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,11 @@ <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;">
+    <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:12px; box-sizing:border-box;">
+
+    <div style="text-align: right; margin-bottom: 20px;">
+      <a id="forgot-password-link" href="#" style="color:#4f46e5; font-size:13px; font-weight:500; text-decoration:none;">Forgot Password?</a>
+    </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
@@ -293,16 +297,34 @@ <h3 style="font-size:12px; font-weight:700; text-transform:uppercase; color:var(
   <script type="module" src="/js/app.js"></script>
   <script>
   let isLogin = true;
+  let isForgotPassword = false;
 
   document.getElementById('auth-toggle-btn').addEventListener('click', (e) => {
     e.preventDefault();
     isLogin = !isLogin;
+    isForgotPassword = false;
+    document.getElementById('auth-password').style.display = 'block';
+    document.getElementById('forgot-password-link').style.display = isLogin ? 'inline' : 'none';
     document.getElementById('auth-title').textContent = isLogin ? 'Welcome back' : 'Create account';
     document.getElementById('auth-subtitle').textContent = isLogin ? 'Sign in to your StudyPlan account' : 'Start planning your studies';
     document.getElementById('auth-submit-btn').textContent = isLogin ? 'Sign In' : 'Sign Up';
     document.getElementById('auth-toggle-text').textContent = isLogin ? "Don't have an account?" : 'Already have an account?';
     document.getElementById('auth-toggle-btn').textContent = isLogin ? 'Sign Up' : 'Sign In';
     document.getElementById('auth-error').style.display = 'none';
+    document.getElementById('auth-error').style.color = 'red';
+  });
+
+  document.getElementById('forgot-password-link').addEventListener('click', (e) => {
+    e.preventDefault();
+    isForgotPassword = true;
+    document.getElementById('auth-title').textContent = 'Reset Password';
+    document.getElementById('auth-subtitle').textContent = 'Enter your email to receive a reset link';
+    document.getElementById('auth-password').style.display = 'none';
+    document.getElementById('forgot-password-link').style.display = 'none';
+    document.getElementById('auth-submit-btn').textContent = 'Send Reset Link';
+    document.getElementById('auth-toggle-text').textContent = 'Remember your password?';
+    document.getElementById('auth-toggle-btn').textContent = 'Sign In';
+    document.getElementById('auth-error').style.display = 'none';
   });
 
   document.getElementById('auth-submit-btn').addEventListener('click', async () => {
@@ -310,12 +332,43 @@ <h3 style="font-size:12px; font-weight:700; text-transform:uppercase; color:var(
     const password = document.getElementById('auth-password').value.trim();
     const errorEl = document.getElementById('auth-error');
 
-    if (!email || !password) {
+    if (!email || (!password && !isForgotPassword)) {
       errorEl.textContent = 'Please fill in all fields';
+      errorEl.style.color = 'red';
       errorEl.style.display = 'block';
       return;
     }
 
+    if (isForgotPassword) {
+      try {
+        const res = await fetch('/api/auth/forgot-password', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ email })
+        });
+        const data = await res.json();
+
+        if (res.ok) {
+          errorEl.textContent = data.message || 'Password reset link sent';
+          errorEl.style.color = 'green';
+          errorEl.style.display = 'block';
+          setTimeout(() => {
+            isLogin = false; // so click toggles to true
+            document.getElementById('auth-toggle-btn').click();
+          }, 2000);
+        } else {
+          errorEl.textContent = data.error || 'An error occurred';
+          errorEl.style.color = 'red';
+          errorEl.style.display = 'block';
+        }
+      } catch (err) {
+        errorEl.textContent = 'Network error. Please try again.';
+        errorEl.style.color = 'red';
+        errorEl.style.display = 'block';
+      }
+      return;
+    }
+
     const endpoint = isLogin ? '/api/auth/login' : '/api/auth/signup';
 
     try {
@@ -328,6 +381,7 @@ <h3 style="font-size:12px; font-weight:700; text-transform:uppercase; color:var(
 
       if (!res.ok) {
         errorEl.textContent = data.error || 'Something went wrong';
+        errorEl.style.color = 'red';
         errorEl.style.display = 'block';
         return;
       }
@@ -337,6 +391,7 @@ <h3 style="font-size:12px; font-weight:700; text-transform:uppercase; color:var(
 
     } catch (err) {
       errorEl.textContent = 'Network error. Please try again.';
+      errorEl.style.color = 'red';
       errorEl.style.display = 'block';
     }
   });
diff --git a/server.js b/server.js
index 4532ea3..e5537d1 100644
--- a/server.js
+++ b/server.js
@@ -484,6 +484,18 @@ Text: "${text}"
 // ================= AUTH =================
 const users = {}; // Simple in-memory user store
 
+app.post('/api/auth/forgot-password', (req, res) => {
+  const { email } = req.body;
+  if (!email) {
+    return res.status(400).json({ error: 'Email required' });
+  }
+  const user = users[email];
+  if (!user) {
+    return res.status(404).json({ error: 'User not found' });
+  }
+  res.json({ success: true, message: 'Password reset link sent to ' + email });
+});
+
 app.post('/api/auth/signup', (req, res) => {
   const { email, password } = req.body;
   if (!email || !password) {