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 7b57822d..3b570c51 100644
--- a/src/app/actions/User.ts
+++ b/src/app/actions/User.ts
@@ -10,6 +10,8 @@ export namespace UserActions {
     GET_USER_DETAILS = 'GET_USER_DETAILS',
     EDIT_USER_PROFILE = 'EDIT_USER_PROFILE',
     EDIT_USER_PASSWORD = 'EDIT_USER_PASSWORD',
+    CHANGE_USER_PASSWORD = 'CHANGE_USER_PASSWORD',
+    FORGOT_PASSWORD = 'FORGOT_PASSWORD',
     UPDATE_ERROR_MESSAGE = 'UPDATE_ERROR_MESSAGE',
     UPDATE_USER_DETAILS = 'UPDATE_USER_DETAILS',
     CHECK_EMAIL_EXISTS = 'CHECK_EMAIL_EXISTS',
@@ -70,6 +72,17 @@ export namespace UserActions {
   export const checkUsernameExists = (username: string) =>
     action(Type.CHECK_USERNAME_EXISTS, { username });
 
+  export const changeUserPassword = (
+    newPassword: string,
+    passwordResetToken: string,
+    userId: number,
+  ) =>
+    action(Type.CHANGE_USER_PASSWORD, {
+      newPassword,
+      passwordResetToken,
+      userId,
+    });
+
   export const toggleUserProfileModal = (isUserProfileModalOpen: boolean) =>
     action(Type.TOGGLE_USER_PROFILE_MODAL, { isUserProfileModalOpen });
 
@@ -82,4 +95,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/Code.ts b/src/app/apiFetch/Code.ts
index 07ba5f06..58d0961c 100644
--- a/src/app/apiFetch/Code.ts
+++ b/src/app/apiFetch/Code.ts
@@ -131,7 +131,6 @@ export const getLastSaveTime = () => {
       return textResponseWrapper(response);
     })
     .then((data) => {
-      console.log(data);
       return data;
     })
     .catch((error) => {
diff --git a/src/app/apiFetch/User.ts b/src/app/apiFetch/User.ts
index 8b5dcc8a..c503eb21 100644
--- a/src/app/apiFetch/User.ts
+++ b/src/app/apiFetch/User.ts
@@ -1,5 +1,10 @@
 /* tslint:disable:no-console*/
-import { HeadReqType, headResponseWrapper, jsonResponseWrapper } from 'app/apiFetch/utils';
+import {
+  HeadReqType,
+  headResponseWrapper,
+  jsonResponseWrapper,
+  textResponseWrapper,
+} from 'app/apiFetch/utils';
 import * as UserInterfaces from 'app/types/User';
 import { API_BASE_URL } from '../../config/config';
 
@@ -131,6 +136,43 @@ export const userEditPassword = (body: UserInterfaces.EditUserPassword) => {
     });
 };
 
+export const changeUserPassword = (body: UserInterfaces.ChangeUserPassword) => {
+  return fetch(`${API_BASE_URL}user/password`, {
+    body: JSON.stringify(body),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+  })
+    .then((response) => {
+      return textResponseWrapper(response);
+    })
+    .then((data) => {
+      return data;
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+};
+export const userForgotPassword = (email: string) => {
+  return fetch(`${API_BASE_URL}user/forgot-password`, {
+    body: email,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+  })
+    .then((response) => {
+      return response.text();
+    })
+    .then((data) => {
+      return data;
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+};
+
 export const userGetDetails = () => {
   return fetch(`${API_BASE_URL}user`, {
     credentials: 'include',
diff --git a/src/app/apiFetch/utils/index.ts b/src/app/apiFetch/utils/index.ts
index cd609447..fb8ec5a7 100644
--- a/src/app/apiFetch/utils/index.ts
+++ b/src/app/apiFetch/utils/index.ts
@@ -90,8 +90,11 @@ export function textResponseWrapper(response: any) {
         case 302:
         case 409:
         case 401:
+        case 404:
+        case 403:
         case 500:
         case 403:
+        case 501:
           error = 'Oops! Something went wrong.';
           type = resType.ERROR;
       }
diff --git a/src/app/components/Authentication/ChangePassword.tsx b/src/app/components/Authentication/ChangePassword.tsx
new file mode 100644
index 00000000..6ad682ca
--- /dev/null
+++ b/src/app/components/Authentication/ChangePassword.tsx
@@ -0,0 +1,146 @@
+import * as authStyles from 'app/styles/Authentication.module.css';
+import * as registerStyles from 'app/styles/Register.module.css';
+import { changePasswordProps, ChangePasswordState } from 'app/types/Authentication/ChangePassword';
+import classnames from 'classnames';
+import * as React from 'react';
+
+export class ChangePassword extends React.Component<changePasswordProps, ChangePasswordState> {
+  private credentialsFormRef = React.createRef<HTMLFormElement>();
+  private passwordResetToken = '';
+  private userId = 0;
+  constructor(props: changePasswordProps) {
+    super(props);
+    this.state = {
+      password: '',
+      passwordError: '',
+      repeatPassword: '',
+    };
+  }
+
+  public componentDidMount() {
+    // get string from url
+    const search = this.props.location.search;
+    const urlParams = search.split('&');
+    this.passwordResetToken = urlParams[0].split('=')[1];
+    this.userId = parseInt(urlParams[1].split('=')[1], 0);
+  }
+
+  public render() {
+    return (
+      <div className={classnames(authStyles.registerRoot)}>
+        <div className={classnames(authStyles.registerMessage)}>
+          <h1 className={classnames(authStyles['register-h1'])}> Reset Password </h1>
+          <p> Enter your new password </p>
+        </div>
+        <div className={classnames('col-sm-12', authStyles.form)}>
+          <form
+            className={classnames(
+              'registerForm d-flex flex-wrap',
+              authStyles['main-register-form'],
+            )}
+            noValidate
+          >
+            <div className={classnames(authStyles['stage-div'])}>
+              <form
+                className={classnames(authStyles['stage-form'])}
+                noValidate
+                ref={this.credentialsFormRef}
+              >
+                <div className={classnames(authStyles['login-label'])}> New Password </div>
+                <div className={classnames(registerStyles['input-group'])}>
+                  <input
+                    type="password"
+                    className={classnames('form-control', authStyles['register-input'])}
+                    id="registerValidationPassword"
+                    aria-describedby="inputGroupPrepend"
+                    pattern=".{5,}"
+                    value={this.state.password}
+                    onChange={(e) =>
+                      this.setState({
+                        password: e.target.value,
+                      })
+                    }
+                    required
+                  />
+                  <div className={classnames('invalid-feedback', authStyles['register-error'])}>
+                    Password should have minimum 5 characters.
+                  </div>
+                </div>
+                <div className={classnames(authStyles['login-label'])}> Confirm Password </div>
+                <div className={classnames(registerStyles['input-group'])}>
+                  <input
+                    type="password"
+                    className={classnames('form-control', authStyles['register-input'])}
+                    id="registerValidationrepeatPassword"
+                    aria-describedby="inputGroupPrepend"
+                    pattern=".{5,}"
+                    value={this.state.repeatPassword}
+                    onChange={(e) =>
+                      this.setState({
+                        repeatPassword: e.target.value,
+                      })
+                    }
+                    required
+                  />
+                </div>
+
+                <div
+                  className={
+                    this.state.passwordError !== '' || this.props.errorMessage !== ''
+                      ? classnames('form-row', authStyles['register-error-active'])
+                      : classnames('form-row', authStyles['register-error-inactive'])
+                  }
+                >
+                  <div
+                    className={classnames(
+                      'col text-center mt -0 mb-2 errorMessage',
+                      registerStyles.errorMessage,
+                    )}
+                  >
+                    {this.state.passwordError}
+                    {'\n'}
+                    {this.props.errorMessage}
+                  </div>
+                </div>
+                <div
+                  className={classnames(
+                    registerStyles['input-group'],
+                    'd-flex justify-content-center',
+                  )}
+                >
+                  <button
+                    className={classnames(authStyles['register-button'])}
+                    onClick={(e) => this.submitPassword(e)}
+                  >
+                    Confirm
+                  </button>
+                </div>
+              </form>
+            </div>
+          </form>
+        </div>
+      </div>
+    );
+  }
+
+  private submitPassword = (e: React.MouseEvent) => {
+    e.preventDefault();
+    if (this.state.password === this.state.repeatPassword) {
+      if (this.credentialsFormRef.current) {
+        this.credentialsFormRef.current.classList.add('was-validated');
+        if (this.credentialsFormRef.current.checkValidity()) {
+          this.setState({
+            ...this.state,
+            passwordError: '',
+          });
+          this.props.changePassword(this.state.password, this.passwordResetToken, this.userId);
+        }
+      }
+    } else {
+      this.setState({
+        ...this.state,
+        passwordError: 'Password and confirm passwords have different values',
+      });
+    }
+  };
+}
diff --git a/src/app/components/Authentication/ForgotPassword.tsx b/src/app/components/Authentication/ForgotPassword.tsx
new file mode 100644
index 00000000..246ef40e
--- /dev/null
+++ b/src/app/components/Authentication/ForgotPassword.tsx
@@ -0,0 +1,131 @@
+import { Routes } from 'app/routes';
+import * as styles from 'app/styles/Authentication.module.css';
+import * as registerStyles from 'app/styles/Register.module.css';
+import { AuthType } from 'app/types/Authentication';
+import * as LoginInterfaces from 'app/types/Authentication/Login';
+import classnames from 'classnames';
+import * as React from 'react';
+import { Col, Row } from 'react-bootstrap';
+
+// tslint:disable-next-line: variable-name
+const ForgotPassword = (props: LoginInterfaces.ForgotPasswordProps) => {
+  const forgotPasswordRef = React.createRef<HTMLFormElement>();
+
+  const handleForgotPassword = (event: React.FormEvent<HTMLFormElement>) => {
+    const form = forgotPasswordRef.current;
+
+    event.preventDefault();
+    if (form) {
+      if (form.checkValidity()) {
+        props.forgotPassword(props.username);
+      }
+      form.classList.add('was-validated');
+    }
+  };
+
+  return (
+    <div>
+      <div className={classnames(styles.loginRoot)}>
+        <div className={classnames(styles.welcomeBack)}>
+          <h1> Forgot your password? </h1>
+        </div>
+        <Row>
+          <Col className="text-center my-3 ml-auto mr-auto">
+            <div className="text-dark">
+              <Row>
+                <div className={classnames('col-sm-10', styles.form)}>
+                  <form
+                    className={classnames(styles.loginForm)}
+                    noValidate
+                    ref={forgotPasswordRef}
+                    onSubmit={handleForgotPassword}
+                  >
+                    <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={props.username}
+                            onChange={(e) => props.setUsername(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={
+                          !props.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'],
+                              )
+                        }
+                      >
+                        {props.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>
+              </Row>
+            </div>
+          </Col>
+        </Row>
+        <Row>
+          <Col className="text-center my-3 ml-auto mr-auto">
+            <div
+              className={classnames('text-dark', styles['forgot-your-password'])}
+              onClick={() => props.closeForgotPassword()}
+            >
+              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={() => {
+                  props.updateErrorMessage('');
+                  props.handleSelectPanel(AuthType.REGISTER);
+                }}
+              >
+                Create one
+              </a>
+            </div>
+          </Col>
+        </Row>
+      </div>
+    </div>
+  );
+};
+
+export default ForgotPassword;
diff --git a/src/app/components/Authentication/Login.tsx b/src/app/components/Authentication/Login.tsx
index e7bbc7da..ceb623be 100644
--- a/src/app/components/Authentication/Login.tsx
+++ b/src/app/components/Authentication/Login.tsx
@@ -1,6 +1,7 @@
 import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { API_BASE_URL } from 'app/../config/config';
+import ForgotPassword from 'app/components/Authentication/ForgotPassword';
 import PopUpMenu from 'app/components/PopUpMenu';
 import { Routes } from 'app/routes';
 import * as styles from 'app/styles/Authentication.module.css';
@@ -16,7 +17,6 @@ export enum OAUTH_ROUTES {
   GOOGLE = 'login/google',
   GITHUB = 'login/github',
 }
-
 export class Login extends React.Component<LoginInterfaces.Props, LoginInterfaces.State> {
   private loginRef = React.createRef<HTMLFormElement>();
 
@@ -24,6 +24,7 @@ export class Login extends React.Component<LoginInterfaces.Props, LoginInterface
     super(props);
 
     this.state = {
+      isForgotPasswordOpen: false,
       password: '',
       username: '',
     };
@@ -35,6 +36,7 @@ export class Login extends React.Component<LoginInterfaces.Props, LoginInterface
   };
 
   public componentDidMount() {
+    this.props.updateErrorMessage('');
     window.addEventListener('beforeunload', this.componentCleanup);
   }
 
@@ -59,174 +61,216 @@ export class Login extends React.Component<LoginInterfaces.Props, LoginInterface
   }
 
   public render() {
-    const { username, password } = this.state;
+    const { username, password, isForgotPasswordOpen } = 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.
-          </div>
-        </div>
-        <div className={classnames('container px-0 justify-content-center', styles.loginForm)}>
-          <Row
-            onClick={(e) => {
-              window.location.href = `${API_BASE_URL}${OAUTH_ROUTES.GOOGLE}`;
-            }}
-            className={classnames(
-              styles['google-btn'],
-              'border justify-content-center my-3',
-              styles.oauth_btn,
-              styles.no_margin,
-            )}
-          >
-            <div className={classnames('col-auto my-2', styles.img_div)}>
-              <img src="assets/img/google.png" height="24" width="24" />
-            </div>
-            <p className="col-auto">Log in with Google</p>
-          </Row>
-          <Row
-            onClick={(e) => {
-              window.location.href = `${API_BASE_URL}${OAUTH_ROUTES.GITHUB}`;
-            }}
-            className={classnames(
-              'justify-content-center',
-              styles['github-btn'],
-              styles.oauth_btn,
-              styles.no_margin,
-            )}
-          >
-            <div className={classnames('col-auto my-2', styles.img_div)}>
-              <img src="assets/img/github.png" height="24" width="24" />
+    if (errorMessage === ' ' && isForgotPasswordOpen) {
+      this.setState({
+        isForgotPasswordOpen: false,
+      });
+      updateErrorMessage('');
+    }
+    if (!isForgotPasswordOpen) {
+      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>
-            <p className="col-auto">Log in with Github</p>
-          </Row>
-          <Row className={classnames(styles.no_margin)}>
-            <div className={classnames(styles.separator)}>
-              <div className={classnames(styles.wordWithLine)}>
-                <span className={classnames(styles.text)}>or</span>
+          </div>
+          <div className={classnames('container px-0 justify-content-center', styles.loginForm)}>
+            <Row
+              onClick={(e) => {
+                window.location.href = `${API_BASE_URL}${OAUTH_ROUTES.GOOGLE}`;
+              }}
+              className={classnames(
+                styles['google-btn'],
+                'border justify-content-center my-3',
+                styles.oauth_btn,
+                styles.no_margin,
+              )}
+            >
+              <div className={classnames('col-auto my-2', styles.img_div)}>
+                <img src="assets/img/google.png" height="24" width="24" />
               </div>
-            </div>
-          </Row>
-        </div>
-        <Row className={classnames(styles.no_margin)}>
-          <div className={classnames('col-sm-10 offset-sm-1', styles.form)}>
-            <form
-              className={classnames(styles.loginForm)}
-              noValidate
-              ref={this.loginRef}
-              onSubmit={this.handleLogin}
+              <p className="col-auto">Log in with Google</p>
+            </Row>
+            <Row
+              onClick={(e) => {
+                window.location.href = `${API_BASE_URL}${OAUTH_ROUTES.GITHUB}`;
+              }}
+              className={classnames(
+                'justify-content-center',
+                styles['github-btn'],
+                styles.oauth_btn,
+                styles.no_margin,
+              )}
             >
-              <div className="form-row">
-                <div className="col mb-4">
-                  <div className={classnames(styles['login-label'])}> 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 className={classnames('col-auto my-2', styles.img_div)}>
+                <img src="assets/img/github.png" height="24" width="24" />
+              </div>
+              <p className="col-auto">Log in with Github</p>
+            </Row>
+            <Row className={classnames(styles.no_margin)}>
+              <div className={classnames(styles.separator)}>
+                <div className={classnames(styles.wordWithLine)}>
+                  <span className={classnames(styles.text)}>or</span>
+                </div>
+              </div>
+            </Row>
+          </div>
+          <Row className={classnames(styles.no_margin)}>
+            <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'])}> 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>
-              <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">
+                    <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.trim().length === 0
+                        ? 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>
-              </div>
-            </form>
-          </div>
-        </Row>
-        <Row className={classnames(styles.no_margin)}>
-          <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>
+              </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({ isForgotPasswordOpen: 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>
+            </Col>
+          </Row>
+          <PopUpMenu />
+        </div>
+      );
+    }
+    return (
+      <div>
+        <ForgotPassword
+          updateErrorMessage={updateErrorMessage}
+          handleSelectPanel={this.props.handleSelectPanel}
+          errorMessage={this.props.errorMessage}
+          forgotPassword={this.props.forgotPassword}
+          username={username}
+          setUsername={(newUsername) =>
+            this.setState({
+              username: newUsername,
+            })
+          }
+          closeForgotPassword={() =>
+            this.setState({
+              isForgotPasswordOpen: false,
+            })
+          }
+        />
         <PopUpMenu />
       </div>
     );
diff --git a/src/app/components/Authentication/Register.tsx b/src/app/components/Authentication/Register.tsx
index 2a1f3186..6dd0ad0e 100644
--- a/src/app/components/Authentication/Register.tsx
+++ b/src/app/components/Authentication/Register.tsx
@@ -70,6 +70,7 @@ export class Register extends React.Component<RegisterInterfaces.Props, Register
   };
 
   public componentDidMount() {
+    this.props.updateErrorMessage('');
     window.addEventListener('beforeunload', this.resetErrorMessage);
   }
   public componentWillReceiveProps(newProps: RegisterInterfaces.Props) {
diff --git a/src/app/containers/Authentication/ChangePassword.ts b/src/app/containers/Authentication/ChangePassword.ts
new file mode 100644
index 00000000..da36565a
--- /dev/null
+++ b/src/app/containers/Authentication/ChangePassword.ts
@@ -0,0 +1,17 @@
+import { UserActions } from 'app/actions';
+import { ChangePassword } from 'app/components/Authentication/ChangePassword';
+import { RootState } from 'app/reducers';
+import { DispatchProps, StateProps } from 'app/types/Authentication/ChangePassword';
+import { connect } from 'react-redux';
+
+const mapStateToProps = (rootState: RootState) => {
+  return {
+    errorMessage: rootState.user.errorMessage,
+  };
+};
+
+const changePasswordContainer = connect<StateProps, DispatchProps, {}>(mapStateToProps, {
+  changePassword: UserActions.changeUserPassword,
+})(ChangePassword);
+
+export default changePasswordContainer;
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/index.tsx b/src/app/index.tsx
index d70d20c7..49d531db 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -1,4 +1,5 @@
 import ActivateUser from 'app/containers/Authentication/ActivateUser';
+import ChangePassword from 'app/containers/Authentication/ChangePassword';
 import Login from 'app/containers/Authentication/Login';
 import Register from 'app/containers/Authentication/Register';
 import Dashboard from 'app/containers/Dashboard';
@@ -25,6 +26,7 @@ export const App = hot(module)(() => (
       <Route exact path={Routes.LEADERBOARD} component={Leaderboard} />
       <Route exact path={Routes.USER_PROFILE_MODEL} component={UserProfileModal} />
       <Route path={Routes.USER_ACTIVATION} component={ActivateUser} />
+      <Route path={Routes.CHANGE_PASSWORD} component={ChangePassword} />
     </Switch>
     <Sugar background="#484848" color="white" />
   </BrowserRouter>
diff --git a/src/app/routes.ts b/src/app/routes.ts
index 7b0c8cb8..174ec139 100644
--- a/src/app/routes.ts
+++ b/src/app/routes.ts
@@ -7,4 +7,5 @@ export enum Routes {
   GITHUB_OAUTH = '/login/github',
   GOOGLE_OAUTH = '/login/google',
   USER_ACTIVATION = '/user-activate',
+  CHANGE_PASSWORD = '/reset-password',
 }
diff --git a/src/app/sagas/User.ts b/src/app/sagas/User.ts
index c3435890..78995d05 100644
--- a/src/app/sagas/User.ts
+++ b/src/app/sagas/User.ts
@@ -209,6 +209,19 @@ export function* editUserPassword(action: ActionType<typeof UserActions.editUser
   }
 }
 
+export function* changeUserPassword(action: ActionType<typeof UserActions.changeUserPassword>) {
+  try {
+    const res = yield call(UserFetch.changeUserPassword, action.payload);
+    yield put(UserActions.updateErrorMessage(res.error ? res.body.message : ''));
+
+    if (res.type !== resType.ERROR) {
+      window.location.assign('/login');
+    }
+  } catch (err) {
+    console.error(err);
+  }
+}
+
 export function* checkEmailExists(action: ActionType<typeof UserActions.checkEmailExists>) {
   try {
     const res = yield call(UserFetch.checkEmailExists, action.payload.email);
@@ -231,6 +244,29 @@ export function* checkUsernameExists(action: ActionType<typeof UserActions.check
   }
 }
 
+export function* forgotPassword(action: ActionType<typeof UserActions.forgotPassword>) {
+  try {
+    const res = yield call(UserFetch.userForgotPassword, action.payload.email);
+
+    if (res === 'Password Reset URL sent to the registered email!') {
+      yield put(
+        NotificationActions.success(`Password reset URL have been sent to ${action.payload.email}`),
+      );
+    }
+
+    // Call returns error if username already exists, else empty
+    const message =
+      res === 'Invalid email'
+        ? 'Email is not registered'
+        : res === 'Password Reset URL sent to the registered email!'
+        ? ' '
+        : res;
+    yield put(UserActions.updateErrorMessage(message));
+  } catch (err) {
+    console.error(err);
+  }
+}
+
 export function* resetAppState(action: ActionType<typeof UserActions.resetAppState>) {
   try {
     yield put(CodeActions.resetCodeState());
@@ -253,11 +289,13 @@ export function* userSagas() {
     takeEvery(UserActions.Type.REGISTER, register),
     takeEvery(UserActions.Type.EDIT_USER_PROFILE, editUserProfile),
     takeEvery(UserActions.Type.EDIT_USER_PASSWORD, editUserPassword),
+    takeEvery(UserActions.Type.CHANGE_USER_PASSWORD, changeUserPassword),
     takeEvery(UserActions.Type.LOGIN, login),
     takeEvery(UserActions.Type.LOGOUT, logout),
     takeEvery(UserActions.Type.CHECK_EMAIL_EXISTS, checkEmailExists),
     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 37c00f98..6627a5fa 100755
--- a/src/app/styles/Authentication.module.css
+++ b/src/app/styles/Authentication.module.css
@@ -568,3 +568,11 @@
   background: #fff;
   padding: 0 10px;
 }
+
+.forgot-your-password {
+  cursor: pointer;
+}
+
+.forgot-your-password:hover {
+  color: #4630eb !important;
+}
diff --git a/src/app/types/Authentication/ChangePassword.ts b/src/app/types/Authentication/ChangePassword.ts
new file mode 100644
index 00000000..15888467
--- /dev/null
+++ b/src/app/types/Authentication/ChangePassword.ts
@@ -0,0 +1,16 @@
+import { RouteComponentProps } from 'react-router-dom';
+
+export interface ChangePasswordState {
+  password: string;
+  repeatPassword: string;
+  passwordError: string;
+}
+export interface StateProps {
+  errorMessage: string;
+}
+
+export interface DispatchProps {
+  changePassword: (password: string, passwordResetToken: string, userId: number) => void;
+}
+
+export type changePasswordProps = StateProps & DispatchProps & RouteComponentProps;
diff --git a/src/app/types/Authentication/Login.ts b/src/app/types/Authentication/Login.ts
index 2cbf9e8e..9c020162 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 {
+  isForgotPasswordOpen: boolean;
   username: string;
   password: string;
 }
@@ -15,8 +16,19 @@ export interface StateProps {
 }
 
 export interface DispatchProps {
+  forgotPassword: (email: string) => void;
   login: (username: string, password: string) => void;
   updateErrorMessage: (errorMessage: string) => void;
 }
 
+export interface ForgotPasswordProps {
+  updateErrorMessage: (errorMessage: string) => void;
+  handleSelectPanel: (authType: AuthType) => void;
+  closeForgotPassword: () => void;
+  errorMessage: string;
+  username: string;
+  setUsername: (username: string) => void;
+  forgotPassword: (email: string) => void;
+}
+
 export type Props = ElementOwnProps & StateProps & DispatchProps;
diff --git a/src/app/types/User.ts b/src/app/types/User.ts
index 99e8ab1a..ebb2c782 100644
--- a/src/app/types/User.ts
+++ b/src/app/types/User.ts
@@ -30,6 +30,12 @@ export interface EditUserPassword {
   oldPassword?: string;
 }
 
+export interface ChangeUserPassword {
+  newPassword: string;
+  passwordResetToken: string;
+  userId: number;
+}
+
 export interface Login {
   email: string;
   password: string;
@@ -39,11 +45,15 @@ export interface ActivateUser {
   authToken: string;
   userId: number;
 }
+export interface ForgotPassword {
+  email: string;
+}
 
 const actions = {
   ActivateUser: UserActions.activateUser,
   editUserPassword: UserActions.editUserPassword,
   editUserProfile: UserActions.editUserProfile,
+  forgotPassword: UserActions.forgotPassword,
   getUserDetails: UserActions.getUserDetails,
   login: UserActions.login,
   logout: UserActions.logout,