diff --git a/src/App.jsx b/src/App.jsx
index ee5feff..767b7b1 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,8 +5,11 @@ import AllCourses from "./components/AllCourses";
 import Home from "./components/Home";
 import Login from "./components/Login";
 import Signup from "./components/Signup";
+
 import PrivacyPolicy from "./components/PrivacyPolicy"; 
 import TermsOfUse from "./components/TermsOfUse";
+import RecoverPasswordPage from "./components/RecoverPasswordPage";
+
 
 
 function App() {
@@ -16,9 +19,12 @@ function App() {
         <Route path='/' element={<Home />} />
         <Route path='/login' element={<Login />} />
         <Route path='/signup' element={<Signup />} />
+
         <Route path='/privacy-policy' element={<PrivacyPolicy />} /> 
         <Route path='/terms-of-use' element={<TermsOfUse />} />
         <Route path='/courses' element={<AllCourses />} />
+           <Route path='/recover-password' element={<RecoverPasswordPage />}
+
 
       </Routes>
     </Router>
diff --git a/src/components/Login.css b/src/components/Login.css
index b506d30..df7f179 100644
--- a/src/components/Login.css
+++ b/src/components/Login.css
@@ -1,190 +1,205 @@
 /* Container to center the card */
 .container {
-    min-height: 100vh;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: linear-gradient(to bottom, #e0c8ff, #430c7a);
-    padding: 16px;
-    animation: fadeIn 1s ease-in-out;
-  }
-  
-  /* Basic card styling */
-  .card {
-    width: 100%;
-    max-width: 400px;
-    margin: 0 auto;
-    padding: 20px;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    animation: slideIn 0.5s ease-in-out;
-  }
-  
-  .card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  }
-  
-  /* Card header styling */
-  .card-header {
-    margin-bottom: 20px;
-    text-align: center;
-  }
-  
-  .logo {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 8px;
-  }
-  
-  .icon {
-    font-size: 32px;
-    margin-right: 8px;
-  }
-  
-  .card-title {
-    font-size: 24px;
-    font-weight: bold;
-    color: #333;
-  }
-  
-  .description {
-    font-size: 14px;
-    color: #ffffff;
-  }
-  
-  /* Card content styling */
-  .card-content {
-    display: flex;
-    flex-direction: column;
-  }
-  
-  /* Form styling */
-  .form {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-  }
-  
-  .form-group {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    animation: fadeIn 1s ease-in-out;
-  }
-  
-  .form-label {
-    font-size: 14px;
-    font-weight: 500;
-    color: #333;
-  }
-  
-  .form-input {
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    font-size: 14px;
-    transition: border-color 0.3s ease, box-shadow 0.3s ease;
-  }
-  
-  .form-input:focus {
-    border-color: #007bff;
-    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
-    outline: none;
-  }
-  
-  /* Error alert styling */
-  .error-alert {
-    background-color: #f8d7da;
-    color: #721c24;
-    padding: 8px;
-    border-radius: 4px;
-    margin-top: 8px;
-    animation: shake 0.3s ease-in-out;
-  }
-  
-  /* Button styling */
-  .login-button {
-    width: 100%;
-    padding: 12px;
-    background-color: #401291;
-    color: white;
-    font-size: 16px;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    margin-top: 16px;
-    margin-bottom: 20px;
-    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  
-  .login-button:hover {
-    background-color: #e0c8ff;
-    color: #333;
-    transform: scale(1.05);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  }
-  
-  .login-button i {
-    margin-left: 8px;
-  }
-  
-  /* Signup link styling */
-  .signup-link {
-    text-align: center;
-    margin-bottom: 20px;
-    margin-top: 60px;
-    font-size: 14px;
-  }
-  
-  .signup-link a {
-    color: #007bff;
-    text-decoration: none;
-  }
-  
-  .signup-link a:hover {
-    text-decoration: underline;
-  }
-  
-  /* Animations */
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-  
-  @keyframes slideIn {
-    from {
-      transform: translateY(20px);
-      opacity: 0;
-    }
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-  
-  @keyframes shake {
-    0%, 100% {
-      transform: translateX(0);
-    }
-    25% {
-      transform: translateX(-5px);
-    }
-    50% {
-      transform: translateX(5px);
-    }
-    75% {
-      transform: translateX(-5px);
-    }
-  }
\ No newline at end of file
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(to bottom, #e0c8ff, #430c7a);
+  padding: 16px;
+  animation: fadeIn 1s ease-in-out;
+}
+
+/* Basic card styling */
+.card {
+  width: 100%;
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  animation: slideIn 0.5s ease-in-out;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+/* Card header styling */
+.card-header {
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8px;
+}
+
+.icon {
+  font-size: 32px;
+  margin-right: 8px;
+}
+
+.card-title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #333;
+}
+
+.description {
+  font-size: 14px;
+  color: #ffffff;
+}
+
+/* Card content styling */
+.card-content {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Form styling */
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  animation: fadeIn 1s ease-in-out;
+}
+
+.form-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+
+.form-input {
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 14px;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.form-input:focus {
+  border-color: #007bff;
+  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+  outline: none;
+}
+
+/* Forgot password link styling */
+.forgot-password {
+  text-align: right;
+  margin-top: 8px;
+}
+
+.forgot-password a {
+  color: #007bff;
+  text-decoration: none;
+}
+
+.forgot-password a:hover {
+  text-decoration: underline;
+}
+
+/* Error alert styling */
+.error-alert {
+  background-color: #f8d7da;
+  color: #721c24;
+  padding: 8px;
+  border-radius: 4px;
+  margin-top: 8px;
+  animation: shake 0.3s ease-in-out;
+}
+
+/* Button styling */
+.login-button {
+  width: 100%;
+  padding: 12px;
+  background-color: #401291;
+  color: white;
+  font-size: 16px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-top: 16px;
+  margin-bottom: 20px;
+  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.login-button:hover {
+  background-color: #e0c8ff;
+  color: #333;
+  transform: scale(1.05);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.login-button i {
+  margin-left: 8px;
+}
+
+/* Signup link styling */
+.signup-link {
+  text-align: center;
+  margin-bottom: 20px;
+  margin-top: 60px;
+  font-size: 14px;
+}
+
+.signup-link a {
+  color: #007bff;
+  text-decoration: none;
+}
+
+.signup-link a:hover {
+  text-decoration: underline;
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-5px);
+  }
+  50% {
+    transform: translateX(5px);
+  }
+  75% {
+    transform: translateX(-5px);
+  }
+}
\ No newline at end of file
diff --git a/src/components/Login.jsx b/src/components/Login.jsx
index 8b2f27c..ecdacc7 100644
--- a/src/components/Login.jsx
+++ b/src/components/Login.jsx
@@ -54,6 +54,9 @@ export default function LoginPage() {
                 onChange={(e) => setPassword(e.target.value)}
                 required
               />
+              <div className='forgot-password'>
+                <Link to='/recover-password'>Forgot Password?</Link>
+              </div>
             </div>
             {error && <div className='error-alert'>{error}</div>}
             <button type='submit' className='login-button'>
diff --git a/src/components/RecoverPassword.css b/src/components/RecoverPassword.css
new file mode 100644
index 0000000..abcceb4
--- /dev/null
+++ b/src/components/RecoverPassword.css
@@ -0,0 +1,146 @@
+  .card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  }
+  
+  /* Card header styling */
+  .card-header {
+    margin-bottom: 20px;
+    text-align: center;
+  }
+  
+  .logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 8px;
+  }
+  
+  .icon {
+    font-size: 32px;
+    margin-right: 8px;
+  }
+  
+  .card-title {
+    font-size: 24px;
+    font-weight: bold;
+    color: #333;
+  }
+  
+  .description {
+    font-size: 14px;
+    color: #ffffff;
+  }
+  
+  /* Card content styling */
+  .card-content {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* Form styling */
+  .form {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+  
+  .form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    animation: fadeIn 1s ease-in-out;
+  }
+  
+  .form-label {
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+  }
+  
+  .form-input {
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+  }
+  
+  .form-input:focus {
+    border-color: #007bff;
+    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+    outline: none;
+  }
+  
+  /* Message alert styling */
+  .message-alert {
+    background-color: #d4edda;
+    color: #155724;
+    padding: 8px;
+    border-radius: 4px;
+    margin-top: 8px;
+    animation: fadeIn 0.3s ease-in-out;
+  }
+  
+  /* Button styling */
+  .recover-button {
+    width: 100%;
+    padding: 12px;
+    background-color: #401291;
+    color: white;
+    font-size: 16px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-top: 16px;
+    margin-bottom: 20px;
+    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .recover-button:hover {
+    background-color: #e0c8ff;
+    color: #333;
+    transform: scale(1.05);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  }
+  
+  /* Login link styling */
+  .login-link {
+    text-align: center;
+    margin-bottom: 20px;
+    margin-top: 60px;
+    font-size: 14px;
+  }
+  
+  .login-link a {
+    color: #007bff;
+    text-decoration: none;
+  }
+  
+  .login-link a:hover {
+    text-decoration: underline;
+  }
+  
+  /* Animations */
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  
+  @keyframes slideIn {
+    from {
+      transform: translateY(20px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
\ No newline at end of file
diff --git a/src/components/RecoverPasswordPage.jsx b/src/components/RecoverPasswordPage.jsx
new file mode 100644
index 0000000..f28b64d
--- /dev/null
+++ b/src/components/RecoverPasswordPage.jsx
@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import "./RecoverPassword.css";
+import { Link } from "react-router-dom";
+
+export default function RecoverPasswordPage() {
+  const [email, setEmail] = useState("");
+  const [message, setMessage] = useState("");
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setMessage("");
+
+    if (!email) {
+      setMessage("Please enter your email address");
+      return;
+    }
+
+    console.log("Password recovery attempted with:", { email });
+    setMessage(
+      "If an account with that email exists, a password recovery link has been sent."
+    );
+  };
+
+  return (
+    <div className='container'>
+      <div className='card'>
+        <div className='card-header'>
+          <div className='logo'>
+            <span className='icon'>🔑</span>
+            <h1>Recover Password</h1>
+          </div>
+          <p className='description'>
+            Enter your email to receive password recovery instructions
+          </p>
+        </div>
+        <div className='card-content'>
+          <form onSubmit={handleSubmit}>
+            <div className='input-group'>
+              <label htmlFor='email'>Email</label>
+              <input
+                id='email'
+                type='email'
+                placeholder='you@example.com'
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+              />
+            </div>
+            {message && <div className='message-alert'>{message}</div>}
+            <button type='submit' className='recover-button'>
+              Send Recovery Link
+            </button>
+          </form>
+          <div className='login-link'>
+            Remembered your password? <Link to='/login'>Log in</Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}