diff --git a/__tests__/app/containers/Authentication/__snapshots__/Login.test.tsx.snap b/__tests__/app/containers/Authentication/__snapshots__/Login.test.tsx.snap
index efd2a5a7..c4db6d25 100644
--- a/__tests__/app/containers/Authentication/__snapshots__/Login.test.tsx.snap
+++ b/__tests__/app/containers/Authentication/__snapshots__/Login.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`Login Container Should render 1`] = `
 <Login
   errorMessage=""
+  forgotPassword={[Function]}
   handleSelectPanel={[Function]}
   isLoggedIn={false}
   isLoginLoading={false}
diff --git a/src/app/actions/User.ts b/src/app/actions/User.ts
index bffc8a6d..d20e1cda 100644
--- a/src/app/actions/User.ts
+++ b/src/app/actions/User.ts
@@ -9,6 +9,7 @@ export namespace UserActions {
     GET_USER_DETAILS = 'GET_USER_DETAILS',
     EDIT_USER_PROFILE = 'EDIT_USER_PROFILE',
     EDIT_USER_PASSWORD = 'EDIT_USER_PASSWORD',
+    FORGOT_PASSWORD = 'FORGOT_PASSWORD',
     UPDATE_ERROR_MESSAGE = 'UPDATE_ERROR_MESSAGE',
     UPDATE_USER_DETAILS = 'UPDATE_USER_DETAILS',
     CHECK_USERNAME_EXISTS = 'CHECK_USERNAME_EXISTS',
@@ -72,4 +73,6 @@ export namespace UserActions {
 
   export const setIsLoginLoading = (isLoginLoading: boolean) =>
     action(Type.SET_IS_LOGIN_LOADING, { isLoginLoading });
+
+  export const forgotPassword = (email: string) => action(Type.FORGOT_PASSWORD, { email });
 }
diff --git a/src/app/apiFetch/User.ts b/src/app/apiFetch/User.ts
index da76a8f0..edea468e 100644
--- a/src/app/apiFetch/User.ts
+++ b/src/app/apiFetch/User.ts
@@ -102,6 +102,27 @@ export const userEditPassword = (body: UserInterfaces.EditUserPassword) => {
     });
 };
 
+export const userForgotPassword = (body: UserInterfaces.ForgotPassword) => {
+  return fetch(`${API_BASE_URL}user/forgot-password`, {
+    body: JSON.stringify(body),
+    credentials: 'include',
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+  })
+    .then((response) => {
+      return response.json();
+    })
+    .then((data) => {
+      return data;
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+};
+
 export const userGetDetails = () => {
   return fetch(`${API_BASE_URL}user/profile`, {
     credentials: 'include',
diff --git a/src/app/components/Authentication/Login.tsx b/src/app/components/Authentication/Login.tsx
index 15f1d0b2..c0de2c3a 100644
--- a/src/app/components/Authentication/Login.tsx
+++ b/src/app/components/Authentication/Login.tsx
@@ -12,11 +12,13 @@ import { Redirect } from 'react-router-dom';
 
 export class Login extends React.Component<LoginInterfaces.Props, LoginInterfaces.State> {
   private loginRef = React.createRef<HTMLFormElement>();
+  private forgotPasswordRef = React.createRef<HTMLFormElement>();
 
   constructor(props: LoginInterfaces.Props) {
     super(props);
 
     this.state = {
+      isForgotPassword: false,
       password: '',
       username: '',
     };
@@ -52,138 +54,268 @@ export class Login extends React.Component<LoginInterfaces.Props, LoginInterface
   }
 
   public render() {
-    const { username, password } = this.state;
+    const { isForgotPassword, username, password } = this.state;
     const { errorMessage, updateErrorMessage, isLoginLoading, isLoggedIn } = this.props;
     if (isLoggedIn) {
       return <Redirect to={Routes.ROOT} />;
     }
-
-    return (
-      <div className={classnames(styles.loginRoot)}>
-        <div className={classnames(styles.welcomeBack)}>
-          <h1> Welcome! </h1>
-          <p> Log in to access your dashboard and profile </p>
-          <div className={classnames('text-center text-dark mb-2', styles['pragyan-login'])}>
-            You can use your{' '}
-            <a
-              target="blank"
-              href="https://pragyan.org"
-              className={classnames(styles['create-one-button'])}
-            >
-              Pragyan
-            </a>{' '}
-            account credentials to login.
+    if (!isForgotPassword) {
+      return (
+        <div className={classnames(styles.loginRoot)}>
+          <div className={classnames(styles.welcomeBack)}>
+            <h1> Welcome! </h1>
+            <p> Log in to access your dashboard and profile </p>
+            <div className={classnames('text-center text-dark mb-2', styles['pragyan-login'])}>
+              You can use your{' '}
+              <a
+                target="blank"
+                href="https://pragyan.org"
+                className={classnames(styles['create-one-button'])}
+              >
+                Pragyan
+              </a>{' '}
+              account credentials to login.
+            </div>
           </div>
-        </div>
 
-        <Row>
-          <div className={classnames('col-sm-10 offset-sm-1', styles.form)}>
-            <form
-              className={classnames(styles.loginForm)}
-              noValidate
-              ref={this.loginRef}
-              onSubmit={this.handleLogin}
-            >
-              <div className="form-row">
-                <div className="col mb-4">
-                  <div className={classnames(styles['login-label'])}> Username </div>
-                  <div className="input-group">
-                    <input
-                      type="email"
-                      className={classnames('form-control', styles['login-input'])}
-                      id="validationUsername"
-                      aria-describedby="inputGroupPrepend"
-                      required
-                      value={username}
-                      onChange={(e) =>
-                        this.setState({
-                          username: e.target.value,
-                        })
-                      }
-                    />
-                    <div className={classnames('invalid-feedback', styles['login-error'])}>
-                      {' '}
-                      Please enter a valid Email.{' '}
+          <Row>
+            <div className={classnames('col-sm-10 offset-sm-1', styles.form)}>
+              <form
+                className={classnames(styles.loginForm)}
+                noValidate
+                ref={this.loginRef}
+                onSubmit={this.handleLogin}
+              >
+                <div className="form-row">
+                  <div className="col mb-4">
+                    <div className={classnames(styles['login-label'])}> Username </div>
+                    <div className="input-group">
+                      <input
+                        type="email"
+                        className={classnames('form-control', styles['login-input'])}
+                        id="validationUsername"
+                        aria-describedby="inputGroupPrepend"
+                        required
+                        value={username}
+                        onChange={(e) =>
+                          this.setState({
+                            username: e.target.value,
+                          })
+                        }
+                      />
+                      <div className={classnames('invalid-feedback', styles['login-error'])}>
+                        {' '}
+                        Please enter a valid Email.{' '}
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-              <div className="form-row">
-                <div className="col mb-1">
-                  <div className={classnames(styles['login-label'])}> Password </div>
-                  <div className="input-group">
-                    <input
-                      type="password"
-                      className={classnames('form-control', styles['login-input'])}
-                      id="validationPassword"
-                      aria-describedby="inputGroupPrepend"
-                      minLength={5}
-                      value={password}
-                      onChange={(e) =>
-                        this.setState({
-                          password: e.target.value,
-                        })
-                      }
-                      required
-                    />
-                    <div className={classnames('invalid-feedback', styles['login-error'])}>
-                      Please enter the correct password.
+                <div className="form-row">
+                  <div className="col mb-1">
+                    <div className={classnames(styles['login-label'])}> Password </div>
+                    <div className="input-group">
+                      <input
+                        type="password"
+                        className={classnames('form-control', styles['login-input'])}
+                        id="validationPassword"
+                        aria-describedby="inputGroupPrepend"
+                        minLength={5}
+                        value={password}
+                        onChange={(e) =>
+                          this.setState({
+                            password: e.target.value,
+                          })
+                        }
+                        required
+                      />
+                      <div className={classnames('invalid-feedback', styles['login-error'])}>
+                        Please enter the correct password.
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-              <div className={classnames('form-row', styles['error-row'])}>
-                <div
-                  className={
-                    !errorMessage
-                      ? classnames(
-                          'col text-center mt -0 mb-2 ',
-                          styles['register-error-inactive'],
-                          registerStyles.errorMessage,
-                        )
-                      : classnames(
-                          'col text-center mt -0 mb-2 errorMessage',
-                          styles['register-error-active'],
-                          registerStyles.errorMessageLogin,
-                          styles['login-error-active'],
-                        )
-                  }
-                >
-                  {errorMessage}
+                <div className={classnames('form-row', styles['error-row'])}>
+                  <div
+                    className={
+                      !errorMessage
+                        ? classnames(
+                            'col text-center mt -0 mb-2 ',
+                            styles['register-error-inactive'],
+                            registerStyles.errorMessage,
+                          )
+                        : classnames(
+                            'col text-center mt -0 mb-2 errorMessage',
+                            styles['register-error-active'],
+                            registerStyles.errorMessageLogin,
+                            styles['login-error-active'],
+                          )
+                    }
+                  >
+                    {errorMessage}
+                  </div>
                 </div>
-              </div>
-              <div className="form-row">
-                <div className="col text-center">
-                  <button className={classnames('btn btn-info', styles.loginButton)} type="submit">
-                    Login &nbsp;
-                    {isLoginLoading ? <FontAwesomeIcon icon={faSpinner} spin /> : null}
-                  </button>
+                <div className="form-row">
+                  <div className="col text-center">
+                    <button
+                      className={classnames('btn btn-info', styles.loginButton)}
+                      type="submit"
+                    >
+                      Login &nbsp;
+                      {isLoginLoading ? <FontAwesomeIcon icon={faSpinner} spin /> : null}
+                    </button>
+                  </div>
                 </div>
+              </form>
+            </div>
+          </Row>
+          <Row>
+            <Col className="text-center my-3 ml-auto mr-auto">
+              <div
+                className={classnames('text-dark', styles['forgot-your-password'])}
+                onClick={() => this.setState({ isForgotPassword: true })}
+              >
+                Forgot Your Password?{' '}
+              </div>
+            </Col>
+          </Row>
+          <Row>
+            <Col className="text-center my-3 ml-auto mr-auto">
+              <div className="text-dark">
+                Don't have an account?{' '}
+                <a
+                  href={Routes.REGISTER}
+                  className={classnames(styles['create-one-button'])}
+                  onClick={() => {
+                    updateErrorMessage('');
+                    this.props.handleSelectPanel(AuthType.REGISTER);
+                  }}
+                >
+                  Create one
+                </a>
               </div>
-            </form>
+            </Col>
+          </Row>
+        </div>
+      );
+    }
+    return (
+      <div>
+        <div className={classnames(styles.loginRoot)}>
+          <div className={classnames(styles.welcomeBack)}>
+            <h1> Forgot your password? </h1>
           </div>
-        </Row>
-        <Row>
-          <Col className="text-center my-3 ml-auto mr-auto">
-            <div className="text-dark">
-              Don't have an account?{' '}
-              <a
-                href={Routes.REGISTER}
-                className={classnames(styles['create-one-button'])}
-                onClick={() => {
-                  updateErrorMessage('');
-                  this.props.handleSelectPanel(AuthType.REGISTER);
-                }}
+          <Row>
+            <div className={classnames('col-sm-10 offset-sm-1', styles.form)}>
+              <form
+                className={classnames(styles.loginForm)}
+                noValidate
+                ref={this.forgotPasswordRef}
+                onSubmit={this.handleForgotPassword}
               >
-                Create one
-              </a>
+                <div className="form-row">
+                  <div className="col mb-4">
+                    <div className={classnames(styles['login-label'])}> Your Email: </div>
+                    <div className="input-group">
+                      <input
+                        type="email"
+                        className={classnames('form-control', styles['login-input'])}
+                        id="validationUsername"
+                        aria-describedby="inputGroupPrepend"
+                        required
+                        value={username}
+                        onChange={(e) =>
+                          this.setState({
+                            username: e.target.value,
+                          })
+                        }
+                      />
+                      <div className={classnames('invalid-feedback', styles['login-error'])}>
+                        {' '}
+                        Please enter a valid Email.{' '}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className={classnames('form-row', styles['error-row'])}>
+                  <div
+                    className={
+                      !errorMessage
+                        ? classnames(
+                            'col text-center mt -0 mb-2 ',
+                            styles['register-error-inactive'],
+                            registerStyles.errorMessage,
+                          )
+                        : classnames(
+                            'col text-center mt -0 mb-2 errorMessage',
+                            styles['register-error-active'],
+                            registerStyles.errorMessageLogin,
+                            styles['login-error-active'],
+                          )
+                    }
+                  >
+                    {errorMessage}
+                  </div>
+                </div>
+                <div className="form-row">
+                  <div className="col text-center">
+                    <button
+                      className={classnames('btn btn-info', styles.loginButton)}
+                      type="submit"
+                    >
+                      Reset Password&nbsp;
+                    </button>
+                  </div>
+                </div>
+              </form>
             </div>
-          </Col>
-        </Row>
+          </Row>
+          <Row>
+            <Col className="text-center my-3 ml-auto mr-auto">
+              <div
+                className={classnames('text-dark', styles['forgot-your-password'])}
+                onClick={() => this.setState({ isForgotPassword: false })}
+              >
+                Back{' '}
+              </div>
+            </Col>
+          </Row>
+          <Row>
+            <Col className="text-center my-3 ml-auto mr-auto">
+              <div className="text-dark">
+                Don't have an account?{' '}
+                <a
+                  href={Routes.REGISTER}
+                  className={classnames(styles['create-one-button'])}
+                  onClick={() => {
+                    updateErrorMessage('');
+                    this.props.handleSelectPanel(AuthType.REGISTER);
+                  }}
+                >
+                  Create one
+                </a>
+              </div>
+            </Col>
+          </Row>
+        </div>
       </div>
     );
   }
 
+  private handleForgotPassword = (event: React.FormEvent<HTMLFormElement>) => {
+    const { username } = this.state;
+    const { forgotPassword } = this.props;
+    const form = this.forgotPasswordRef.current;
+
+    event.preventDefault();
+    if (form) {
+      if (form.checkValidity()) {
+        forgotPassword(username);
+      }
+      form.classList.add('was-validated');
+    }
+  };
+
   private handleLogin = (event: React.FormEvent<HTMLFormElement>) => {
     const { login } = this.props;
     const { username, password } = this.state;
diff --git a/src/app/containers/Authentication/Login.ts b/src/app/containers/Authentication/Login.ts
index 7f3eee77..7d900daf 100644
--- a/src/app/containers/Authentication/Login.ts
+++ b/src/app/containers/Authentication/Login.ts
@@ -15,6 +15,7 @@ const mapStateToProps = (rootState: RootState) => {
 const loginContainer = connect<LoginInterfaces.StateProps, LoginInterfaces.DispatchProps, {}>(
   mapStateToProps,
   {
+    forgotPassword: UserActions.forgotPassword,
     login: UserActions.login,
     updateErrorMessage: UserActions.updateErrorMessage,
   },
diff --git a/src/app/sagas/User.ts b/src/app/sagas/User.ts
index 0de6e9b6..e5ad5684 100644
--- a/src/app/sagas/User.ts
+++ b/src/app/sagas/User.ts
@@ -182,6 +182,17 @@ export function* checkUsernameExists(action: ActionType<typeof UserActions.check
   }
 }
 
+export function* forgotPassword(action: ActionType<typeof UserActions.forgotPassword>) {
+  try {
+    const res = yield call(UserFetch.userForgotPassword, { email: action.payload.email });
+
+    // Call returns error if username already exists, else empty
+    yield put(UserActions.updateErrorMessage(res.error));
+  } catch (err) {
+    console.error(err);
+  }
+}
+
 export function* resetAppState(action: ActionType<typeof UserActions.resetAppState>) {
   try {
     yield put(CodeActions.resetCodeState());
@@ -208,5 +219,6 @@ export function* userSagas() {
     takeEvery(UserActions.Type.CHECK_USERNAME_EXISTS, checkUsernameExists),
     takeEvery(UserActions.Type.GET_USER_DETAILS, getUserDetails),
     takeEvery(UserActions.Type.RESET_APP_STATE, resetAppState),
+    takeEvery(UserActions.Type.FORGOT_PASSWORD, forgotPassword),
   ]);
 }
diff --git a/src/app/styles/Authentication.module.css b/src/app/styles/Authentication.module.css
index 5b859418..19e5dc23 100755
--- a/src/app/styles/Authentication.module.css
+++ b/src/app/styles/Authentication.module.css
@@ -492,3 +492,11 @@
   position: relative;
   left: 1%;
 }
+
+.forgot-your-password {
+  cursor: pointer;
+}
+
+.forgot-your-password:hover {
+  color: #4630eb !important;
+}
diff --git a/src/app/types/Authentication/Login.ts b/src/app/types/Authentication/Login.ts
index 2cbf9e8e..c2345b71 100644
--- a/src/app/types/Authentication/Login.ts
+++ b/src/app/types/Authentication/Login.ts
@@ -1,6 +1,7 @@
 import { AuthType } from 'app/types/Authentication';
 
 export interface State {
+  isForgotPassword: boolean;
   username: string;
   password: string;
 }
@@ -15,7 +16,9 @@ export interface StateProps {
 }
 
 export interface DispatchProps {
+  forgotPassword: (email: string) => void;
   login: (username: string, password: string) => void;
+
   updateErrorMessage: (errorMessage: string) => void;
 }
 
diff --git a/src/app/types/User.ts b/src/app/types/User.ts
index 04f5563b..6d393a55 100644
--- a/src/app/types/User.ts
+++ b/src/app/types/User.ts
@@ -35,9 +35,14 @@ export interface Login {
   password: string;
 }
 
+export interface ForgotPassword {
+  email: string;
+}
+
 const actions = {
   editUserPassword: UserActions.editUserPassword,
   editUserProfile: UserActions.editUserProfile,
+  forgotPassword: UserActions.forgotPassword,
   getUserDetails: UserActions.getUserDetails,
   login: UserActions.login,
   logout: UserActions.logout,