diff --git a/.history/src/__tests__/components/app.test_20200601125027.js b/.history/src/__tests__/components/app.test_20200601125027.js
new file mode 100644
index 0000000..04c6908
--- /dev/null
+++ b/.history/src/__tests__/components/app.test_20200601125027.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import { Provider } from 'react-redux';
+import App from '../../app.js';
+import store from '../../redux/store.js';
+
+
+it('renders app component without crashing', () => {
+  shallow(<App />);
+});
+
+it('renders entire app without crashing', () => {
+  mount(<Provider store={store}>
+    <App />
+  </Provider>);
+});
diff --git a/.history/src/__tests__/components/app.test_20200610111723.js b/.history/src/__tests__/components/app.test_20200610111723.js
new file mode 100644
index 0000000..04c6908
--- /dev/null
+++ b/.history/src/__tests__/components/app.test_20200610111723.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import { Provider } from 'react-redux';
+import App from '../../app.js';
+import store from '../../redux/store.js';
+
+
+it('renders app component without crashing', () => {
+  shallow(<App />);
+});
+
+it('renders entire app without crashing', () => {
+  mount(<Provider store={store}>
+    <App />
+  </Provider>);
+});
diff --git a/.history/src/__tests__/components/app.test_20200610111724.js b/.history/src/__tests__/components/app.test_20200610111724.js
new file mode 100644
index 0000000..04c6908
--- /dev/null
+++ b/.history/src/__tests__/components/app.test_20200610111724.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import { Provider } from 'react-redux';
+import App from '../../app.js';
+import store from '../../redux/store.js';
+
+
+it('renders app component without crashing', () => {
+  shallow(<App />);
+});
+
+it('renders entire app without crashing', () => {
+  mount(<Provider store={store}>
+    <App />
+  </Provider>);
+});
diff --git a/.history/src/api/api_20200601125027.js b/.history/src/api/api_20200601125027.js
new file mode 100644
index 0000000..f9e17ae
--- /dev/null
+++ b/.history/src/api/api_20200601125027.js
@@ -0,0 +1,19 @@
+// axiosconfig.js
+import axios from 'axios';
+import store from '../redux/store.js';
+
+// configure base url
+const api = axios.create({
+  baseURL: 'https://edukolab-api-team-099-b-li6nmp.herokuapp.com/v1'
+});
+
+// intercept requests and add authorization token
+api.interceptors.request.use((config) => {
+  const { token } = store.getState().auth;
+  if (token) {
+    config.headers.authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+export default api;
diff --git a/.history/src/api/api_20200610111716.js b/.history/src/api/api_20200610111716.js
new file mode 100644
index 0000000..f9e17ae
--- /dev/null
+++ b/.history/src/api/api_20200610111716.js
@@ -0,0 +1,19 @@
+// axiosconfig.js
+import axios from 'axios';
+import store from '../redux/store.js';
+
+// configure base url
+const api = axios.create({
+  baseURL: 'https://edukolab-api-team-099-b-li6nmp.herokuapp.com/v1'
+});
+
+// intercept requests and add authorization token
+api.interceptors.request.use((config) => {
+  const { token } = store.getState().auth;
+  if (token) {
+    config.headers.authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+export default api;
diff --git a/.history/src/api/api_20200610111717.js b/.history/src/api/api_20200610111717.js
new file mode 100644
index 0000000..f9e17ae
--- /dev/null
+++ b/.history/src/api/api_20200610111717.js
@@ -0,0 +1,19 @@
+// axiosconfig.js
+import axios from 'axios';
+import store from '../redux/store.js';
+
+// configure base url
+const api = axios.create({
+  baseURL: 'https://edukolab-api-team-099-b-li6nmp.herokuapp.com/v1'
+});
+
+// intercept requests and add authorization token
+api.interceptors.request.use((config) => {
+  const { token } = store.getState().auth;
+  if (token) {
+    config.headers.authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+export default api;
diff --git a/.history/src/components/auth/authForm_20200601125027.js b/.history/src/components/auth/authForm_20200601125027.js
new file mode 100644
index 0000000..233a8e9
--- /dev/null
+++ b/.history/src/components/auth/authForm_20200601125027.js
@@ -0,0 +1,142 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faAddressCard, faCheckCircle } from '@fortawesome/free-regular-svg-icons';
+
+import { faLock, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { Link } from 'react-router-dom';
+import { Field, reduxForm } from 'redux-form';
+
+import '../../assets/css/auth/authForm.css';
+
+class AuthForm extends Component {
+  static propTypes = {
+    handleSubmit: PropTypes.func
+  };
+
+  renderValidateIcon = (touched, error) => {
+    let className = null;
+    let icon = null;
+    if (touched) {
+      className = error === undefined ? 'text-success' : 'text-danger';
+      icon = error === undefined ? faCheckCircle : faTimes;
+
+      return <FontAwesomeIcon className={className} icon={icon} />;
+    }
+    return false;
+  }
+
+  renderField = ({
+    input, label, type, placeholder, icon, action, meta: { touched, error, warning }
+  }) => (
+
+    <div className="col-12 form-holder">
+      <div className="d-flex align-items-center">
+        <div className="form-icon">
+          <FontAwesomeIcon icon={icon} />
+        </div>
+        <div className="flex-grow-1">
+          <label htmlFor={`${action}${input.name}`}>{label}</label>
+          <input
+            {...input}
+            component="input"
+            type={type}
+            className="form-control"
+            id={`${action}${input.name}`}
+            placeholder={placeholder}
+            autoComplete="off"
+          />
+        </div>
+        <div className="form-validation-response">
+         {this.renderValidateIcon(touched, error)}
+        </div>
+      </div>
+      { touched ? (
+        touched
+        && (error && <small className="form-info text-danger">{error}</small>))
+        : warning && <small className="form-info text-info">{warning}</small>}
+    </div>
+  );
+
+  render() {
+    const { handleSubmit } = this.props;
+
+    return (
+      <form onSubmit={handleSubmit} autoComplete="off">
+        <h2 className="mb-0">Welcome Back</h2>
+        <p>
+          Login to EduKolab{' '}
+          <span role="img" aria-label="smiley-face-wink">
+            &#128521;
+          </span>
+        </p>
+        <div className="form-row">
+          <Field action='login' name="contact" type="text" component={this.renderField} label="contact" placeholder="e.g: 08103459871" icon={faAddressCard} />
+        </div>
+        <div className="form-row">
+        <Field action='login' name="password" type="password" component={this.renderField} label="password" placeholder="Type Here" icon={faLock} />
+        </div>
+
+        <div className="button-group">
+          <button className="btn btn-auth btn-auth-main" type="submit">
+            Login
+          </button>
+          <Link className="btn btn-auth btn-auth-side" to="/register" role="button">
+            Create Account
+          </Link>
+        </div>
+      </form>
+    );
+  }
+}
+
+const warn = () => {
+  const warnings = {
+    contact: 'Phone number or email address',
+    password: 'Forgot password?'
+  };
+
+  return warnings;
+};
+
+const validate = (authUser) => {
+  const errors = {};
+  if (!authUser.fName) {
+    errors.fName = 'First Name is required';
+  }
+  if (!authUser.lName) {
+    errors.lName = 'Family Name is required';
+  }
+
+  if (!authUser.contact) {
+    errors.contact = 'Required';
+  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(authUser.contact)) {
+    errors.contact = authUser.contact.length === 11 && authUser.contact.split('')[0] === '0'
+      ? undefined
+      : 'A valid email address or phone number is required';
+  }
+
+  if (!authUser.password) {
+    errors.password = 'Required';
+  } else if (!/\d/.test(authUser.password)) {
+    errors.password = 'Password must contain a number';
+  } else if (!/[A-Z]/.test(authUser.password)) {
+    errors.password = 'Password must contain an upperCase letter';
+  } else if (authUser.password.length < 6) {
+    errors.password = 'Password must be at least 6 characters long';
+  }
+
+  if (!authUser.cpassword) {
+    errors.cpassword = 'Required';
+  } else if (authUser.cpassword !== authUser.password) {
+    errors.cpassword = 'Passwords must match';
+  }
+
+  if (!authUser.role) {
+    errors.age = 'Required';
+  }
+
+  return errors;
+};
+
+export default reduxForm({ form: 'authForm', validate, warn })(AuthForm);
diff --git a/.history/src/components/auth/authForm_20200610111645.js b/.history/src/components/auth/authForm_20200610111645.js
new file mode 100644
index 0000000..233a8e9
--- /dev/null
+++ b/.history/src/components/auth/authForm_20200610111645.js
@@ -0,0 +1,142 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faAddressCard, faCheckCircle } from '@fortawesome/free-regular-svg-icons';
+
+import { faLock, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { Link } from 'react-router-dom';
+import { Field, reduxForm } from 'redux-form';
+
+import '../../assets/css/auth/authForm.css';
+
+class AuthForm extends Component {
+  static propTypes = {
+    handleSubmit: PropTypes.func
+  };
+
+  renderValidateIcon = (touched, error) => {
+    let className = null;
+    let icon = null;
+    if (touched) {
+      className = error === undefined ? 'text-success' : 'text-danger';
+      icon = error === undefined ? faCheckCircle : faTimes;
+
+      return <FontAwesomeIcon className={className} icon={icon} />;
+    }
+    return false;
+  }
+
+  renderField = ({
+    input, label, type, placeholder, icon, action, meta: { touched, error, warning }
+  }) => (
+
+    <div className="col-12 form-holder">
+      <div className="d-flex align-items-center">
+        <div className="form-icon">
+          <FontAwesomeIcon icon={icon} />
+        </div>
+        <div className="flex-grow-1">
+          <label htmlFor={`${action}${input.name}`}>{label}</label>
+          <input
+            {...input}
+            component="input"
+            type={type}
+            className="form-control"
+            id={`${action}${input.name}`}
+            placeholder={placeholder}
+            autoComplete="off"
+          />
+        </div>
+        <div className="form-validation-response">
+         {this.renderValidateIcon(touched, error)}
+        </div>
+      </div>
+      { touched ? (
+        touched
+        && (error && <small className="form-info text-danger">{error}</small>))
+        : warning && <small className="form-info text-info">{warning}</small>}
+    </div>
+  );
+
+  render() {
+    const { handleSubmit } = this.props;
+
+    return (
+      <form onSubmit={handleSubmit} autoComplete="off">
+        <h2 className="mb-0">Welcome Back</h2>
+        <p>
+          Login to EduKolab{' '}
+          <span role="img" aria-label="smiley-face-wink">
+            &#128521;
+          </span>
+        </p>
+        <div className="form-row">
+          <Field action='login' name="contact" type="text" component={this.renderField} label="contact" placeholder="e.g: 08103459871" icon={faAddressCard} />
+        </div>
+        <div className="form-row">
+        <Field action='login' name="password" type="password" component={this.renderField} label="password" placeholder="Type Here" icon={faLock} />
+        </div>
+
+        <div className="button-group">
+          <button className="btn btn-auth btn-auth-main" type="submit">
+            Login
+          </button>
+          <Link className="btn btn-auth btn-auth-side" to="/register" role="button">
+            Create Account
+          </Link>
+        </div>
+      </form>
+    );
+  }
+}
+
+const warn = () => {
+  const warnings = {
+    contact: 'Phone number or email address',
+    password: 'Forgot password?'
+  };
+
+  return warnings;
+};
+
+const validate = (authUser) => {
+  const errors = {};
+  if (!authUser.fName) {
+    errors.fName = 'First Name is required';
+  }
+  if (!authUser.lName) {
+    errors.lName = 'Family Name is required';
+  }
+
+  if (!authUser.contact) {
+    errors.contact = 'Required';
+  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(authUser.contact)) {
+    errors.contact = authUser.contact.length === 11 && authUser.contact.split('')[0] === '0'
+      ? undefined
+      : 'A valid email address or phone number is required';
+  }
+
+  if (!authUser.password) {
+    errors.password = 'Required';
+  } else if (!/\d/.test(authUser.password)) {
+    errors.password = 'Password must contain a number';
+  } else if (!/[A-Z]/.test(authUser.password)) {
+    errors.password = 'Password must contain an upperCase letter';
+  } else if (authUser.password.length < 6) {
+    errors.password = 'Password must be at least 6 characters long';
+  }
+
+  if (!authUser.cpassword) {
+    errors.cpassword = 'Required';
+  } else if (authUser.cpassword !== authUser.password) {
+    errors.cpassword = 'Passwords must match';
+  }
+
+  if (!authUser.role) {
+    errors.age = 'Required';
+  }
+
+  return errors;
+};
+
+export default reduxForm({ form: 'authForm', validate, warn })(AuthForm);
diff --git a/.history/src/components/auth/authHeader_20200601125027.js b/.history/src/components/auth/authHeader_20200601125027.js
new file mode 100644
index 0000000..4779a33
--- /dev/null
+++ b/.history/src/components/auth/authHeader_20200601125027.js
@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import blueLogo from '../../assets/img/logo_blue.png';
+import whiteLogo from '../../assets/img/logo_white.png';
+import '../../assets/css/auth/authHeader.css';
+
+export default class AuthHeader extends Component {
+  render = () => (
+      <header className="header">
+      <nav className="navbar fixed-top navbar-expand-lg navbar-light py-3">
+        <div className="container-fluid">
+          <Link to="/" alt="logo" className="navbar-brand">
+            <img
+              src={blueLogo}
+              alt="logo"
+              width="25"
+              className="mr-0 d-none d-lg-inline"
+            />
+            <img
+              src={whiteLogo}
+              alt="logo"
+              width="75"
+              className="mr-0 d-none d-sm-block d-lg-none"
+            />
+            <img
+              src={whiteLogo}
+              alt="logo"
+              width="50"
+              className="mr-0 d-sm-none"
+            />
+            <span
+              className="lead font-weight-bold text-lg-primary d-none d-lg-inline">edukolab</span>
+          </Link>
+        </div>
+      </nav>
+    </header>
+  )
+}
diff --git a/.history/src/components/auth/authHeader_20200610111638.js b/.history/src/components/auth/authHeader_20200610111638.js
new file mode 100644
index 0000000..4779a33
--- /dev/null
+++ b/.history/src/components/auth/authHeader_20200610111638.js
@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import blueLogo from '../../assets/img/logo_blue.png';
+import whiteLogo from '../../assets/img/logo_white.png';
+import '../../assets/css/auth/authHeader.css';
+
+export default class AuthHeader extends Component {
+  render = () => (
+      <header className="header">
+      <nav className="navbar fixed-top navbar-expand-lg navbar-light py-3">
+        <div className="container-fluid">
+          <Link to="/" alt="logo" className="navbar-brand">
+            <img
+              src={blueLogo}
+              alt="logo"
+              width="25"
+              className="mr-0 d-none d-lg-inline"
+            />
+            <img
+              src={whiteLogo}
+              alt="logo"
+              width="75"
+              className="mr-0 d-none d-sm-block d-lg-none"
+            />
+            <img
+              src={whiteLogo}
+              alt="logo"
+              width="50"
+              className="mr-0 d-sm-none"
+            />
+            <span
+              className="lead font-weight-bold text-lg-primary d-none d-lg-inline">edukolab</span>
+          </Link>
+        </div>
+      </nav>
+    </header>
+  )
+}
diff --git a/.history/src/components/auth/authRedirect_20200601125027.js b/.history/src/components/auth/authRedirect_20200601125027.js
new file mode 100644
index 0000000..818b82d
--- /dev/null
+++ b/.history/src/components/auth/authRedirect_20200601125027.js
@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Redirect } from 'react-router-dom';
+
+class AuthRedirect extends Component {
+  static propTypes = { auth: PropTypes.object, type: PropTypes.string };
+
+  render = () => {
+    const { auth, type } = this.props;
+
+    if (type === 'logout') {
+      return auth.isSignedIn ? '' : <Redirect to="/" />;
+    }
+    return auth.isSignedIn ? <Redirect to="/" /> : '';
+  };
+}
+
+const mapStateToProps = ({ auth }) => ({ auth });
+
+export default connect(mapStateToProps)(AuthRedirect);
diff --git a/.history/src/components/auth/authRedirect_20200610111633.js b/.history/src/components/auth/authRedirect_20200610111633.js
new file mode 100644
index 0000000..818b82d
--- /dev/null
+++ b/.history/src/components/auth/authRedirect_20200610111633.js
@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Redirect } from 'react-router-dom';
+
+class AuthRedirect extends Component {
+  static propTypes = { auth: PropTypes.object, type: PropTypes.string };
+
+  render = () => {
+    const { auth, type } = this.props;
+
+    if (type === 'logout') {
+      return auth.isSignedIn ? '' : <Redirect to="/" />;
+    }
+    return auth.isSignedIn ? <Redirect to="/" /> : '';
+  };
+}
+
+const mapStateToProps = ({ auth }) => ({ auth });
+
+export default connect(mapStateToProps)(AuthRedirect);
diff --git a/.history/src/components/auth/authRedirect_20200610111634.js b/.history/src/components/auth/authRedirect_20200610111634.js
new file mode 100644
index 0000000..818b82d
--- /dev/null
+++ b/.history/src/components/auth/authRedirect_20200610111634.js
@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Redirect } from 'react-router-dom';
+
+class AuthRedirect extends Component {
+  static propTypes = { auth: PropTypes.object, type: PropTypes.string };
+
+  render = () => {
+    const { auth, type } = this.props;
+
+    if (type === 'logout') {
+      return auth.isSignedIn ? '' : <Redirect to="/" />;
+    }
+    return auth.isSignedIn ? <Redirect to="/" /> : '';
+  };
+}
+
+const mapStateToProps = ({ auth }) => ({ auth });
+
+export default connect(mapStateToProps)(AuthRedirect);
diff --git a/.history/src/components/auth/login/login_20200601125027.js b/.history/src/components/auth/login/login_20200601125027.js
new file mode 100644
index 0000000..79d67a7
--- /dev/null
+++ b/.history/src/components/auth/login/login_20200601125027.js
@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFacebookF } from '@fortawesome/free-brands-svg-icons';
+import '../../../assets/css/auth/auth.css';
+import { connect } from 'react-redux';
+import loginSVG from '../../../assets/svg/undraw_secure_login_pdn4.svg';
+
+import AuthHeader from '../authHeader.js';
+import AuthForm from '../authForm.js';
+import AuthRedirect from '../authRedirect.js';
+import loginAction from '../../../redux/actions/auth/loginAction.js';
+
+class Login extends Component {
+  static propTypes = {
+    loginAction: PropTypes.func
+  }
+
+  submit = (authUser) => this.props.loginAction(authUser);
+
+  render = () => (
+    <>
+      <AuthRedirect />
+      <AuthHeader />
+      <div id="authContainer" className="container-fluid h-100">
+        <div className="row h-100 align-items-center py-0">
+          <div className="d-none d-lg-flex col auth-svg auth-holder">
+            <img src={loginSVG} alt="" className="img-fluid d-none d-md-block" />
+          </div>
+
+          <div className="col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-0 form-container-holder auth-holder">
+            <AuthForm onSubmit={this.submit} />
+            <div className="social-auth">
+              <p className="section-header">or login with</p>
+              <div className="social-auth-facebook">
+                <FontAwesomeIcon icon={faFacebookF} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+
+export default connect(null, { loginAction })(Login);
diff --git a/.history/src/components/auth/login/login_20200610111655.js b/.history/src/components/auth/login/login_20200610111655.js
new file mode 100644
index 0000000..79d67a7
--- /dev/null
+++ b/.history/src/components/auth/login/login_20200610111655.js
@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFacebookF } from '@fortawesome/free-brands-svg-icons';
+import '../../../assets/css/auth/auth.css';
+import { connect } from 'react-redux';
+import loginSVG from '../../../assets/svg/undraw_secure_login_pdn4.svg';
+
+import AuthHeader from '../authHeader.js';
+import AuthForm from '../authForm.js';
+import AuthRedirect from '../authRedirect.js';
+import loginAction from '../../../redux/actions/auth/loginAction.js';
+
+class Login extends Component {
+  static propTypes = {
+    loginAction: PropTypes.func
+  }
+
+  submit = (authUser) => this.props.loginAction(authUser);
+
+  render = () => (
+    <>
+      <AuthRedirect />
+      <AuthHeader />
+      <div id="authContainer" className="container-fluid h-100">
+        <div className="row h-100 align-items-center py-0">
+          <div className="d-none d-lg-flex col auth-svg auth-holder">
+            <img src={loginSVG} alt="" className="img-fluid d-none d-md-block" />
+          </div>
+
+          <div className="col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-0 form-container-holder auth-holder">
+            <AuthForm onSubmit={this.submit} />
+            <div className="social-auth">
+              <p className="section-header">or login with</p>
+              <div className="social-auth-facebook">
+                <FontAwesomeIcon icon={faFacebookF} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+
+export default connect(null, { loginAction })(Login);
diff --git a/.history/src/components/auth/login/login_20200610111656.js b/.history/src/components/auth/login/login_20200610111656.js
new file mode 100644
index 0000000..79d67a7
--- /dev/null
+++ b/.history/src/components/auth/login/login_20200610111656.js
@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFacebookF } from '@fortawesome/free-brands-svg-icons';
+import '../../../assets/css/auth/auth.css';
+import { connect } from 'react-redux';
+import loginSVG from '../../../assets/svg/undraw_secure_login_pdn4.svg';
+
+import AuthHeader from '../authHeader.js';
+import AuthForm from '../authForm.js';
+import AuthRedirect from '../authRedirect.js';
+import loginAction from '../../../redux/actions/auth/loginAction.js';
+
+class Login extends Component {
+  static propTypes = {
+    loginAction: PropTypes.func
+  }
+
+  submit = (authUser) => this.props.loginAction(authUser);
+
+  render = () => (
+    <>
+      <AuthRedirect />
+      <AuthHeader />
+      <div id="authContainer" className="container-fluid h-100">
+        <div className="row h-100 align-items-center py-0">
+          <div className="d-none d-lg-flex col auth-svg auth-holder">
+            <img src={loginSVG} alt="" className="img-fluid d-none d-md-block" />
+          </div>
+
+          <div className="col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-0 form-container-holder auth-holder">
+            <AuthForm onSubmit={this.submit} />
+            <div className="social-auth">
+              <p className="section-header">or login with</p>
+              <div className="social-auth-facebook">
+                <FontAwesomeIcon icon={faFacebookF} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+
+export default connect(null, { loginAction })(Login);
diff --git a/.history/src/components/auth/logout/logout_20200601125027.js b/.history/src/components/auth/logout/logout_20200601125027.js
new file mode 100644
index 0000000..dba034c
--- /dev/null
+++ b/.history/src/components/auth/logout/logout_20200601125027.js
@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+import { PropTypes } from 'prop-types';
+import { connect } from 'react-redux';
+import logoutAction from '../../../redux/actions/auth/logoutAction.js';
+import AuthRedirect from '../authRedirect.js';
+
+class Logout extends Component {
+  static propTypes = {
+    logoutAction: PropTypes.func
+  };
+
+  render = () => <AuthRedirect type="logout" />;
+
+  componentDidMount = () => this.props.logoutAction();
+}
+
+export default connect(null, { logoutAction })(Logout);
diff --git a/.history/src/components/auth/logout/logout_20200610111649.js b/.history/src/components/auth/logout/logout_20200610111649.js
new file mode 100644
index 0000000..dba034c
--- /dev/null
+++ b/.history/src/components/auth/logout/logout_20200610111649.js
@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+import { PropTypes } from 'prop-types';
+import { connect } from 'react-redux';
+import logoutAction from '../../../redux/actions/auth/logoutAction.js';
+import AuthRedirect from '../authRedirect.js';
+
+class Logout extends Component {
+  static propTypes = {
+    logoutAction: PropTypes.func
+  };
+
+  render = () => <AuthRedirect type="logout" />;
+
+  componentDidMount = () => this.props.logoutAction();
+}
+
+export default connect(null, { logoutAction })(Logout);
diff --git a/.history/src/components/auth/logout/logout_20200610111650.js b/.history/src/components/auth/logout/logout_20200610111650.js
new file mode 100644
index 0000000..dba034c
--- /dev/null
+++ b/.history/src/components/auth/logout/logout_20200610111650.js
@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+import { PropTypes } from 'prop-types';
+import { connect } from 'react-redux';
+import logoutAction from '../../../redux/actions/auth/logoutAction.js';
+import AuthRedirect from '../authRedirect.js';
+
+class Logout extends Component {
+  static propTypes = {
+    logoutAction: PropTypes.func
+  };
+
+  render = () => <AuthRedirect type="logout" />;
+
+  componentDidMount = () => this.props.logoutAction();
+}
+
+export default connect(null, { logoutAction })(Logout);
diff --git a/.history/src/components/home/home_20200601125027.js b/.history/src/components/home/home_20200601125027.js
new file mode 100644
index 0000000..1809fd6
--- /dev/null
+++ b/.history/src/components/home/home_20200601125027.js
@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+
+import PropTypes from 'prop-types';
+
+class Home extends Component {
+  static propTypes = {
+    auth: PropTypes.object
+  };
+
+  renderAuthButton = ({ isSignedIn }) => (isSignedIn ? <Link to="/logout">Logout</Link> : <Link to="/login">Login</Link>);
+
+  render = () => (
+    <>
+      <div>Welcome Home</div>
+      {this.renderAuthButton(this.props.auth)}
+    </>
+  );
+}
+
+const mapStateToProps = ({ auth }) => ({ auth });
+
+export default connect(mapStateToProps)(Home);
diff --git a/.history/src/components/home/home_20200610111626.js b/.history/src/components/home/home_20200610111626.js
new file mode 100644
index 0000000..1809fd6
--- /dev/null
+++ b/.history/src/components/home/home_20200610111626.js
@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+
+import PropTypes from 'prop-types';
+
+class Home extends Component {
+  static propTypes = {
+    auth: PropTypes.object
+  };
+
+  renderAuthButton = ({ isSignedIn }) => (isSignedIn ? <Link to="/logout">Logout</Link> : <Link to="/login">Login</Link>);
+
+  render = () => (
+    <>
+      <div>Welcome Home</div>
+      {this.renderAuthButton(this.props.auth)}
+    </>
+  );
+}
+
+const mapStateToProps = ({ auth }) => ({ auth });
+
+export default connect(mapStateToProps)(Home);
diff --git a/.history/src/components/home/home_20200610111627.js b/.history/src/components/home/home_20200610111627.js
new file mode 100644
index 0000000..1809fd6
--- /dev/null
+++ b/.history/src/components/home/home_20200610111627.js
@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+
+import PropTypes from 'prop-types';
+
+class Home extends Component {
+  static propTypes = {
+    auth: PropTypes.object
+  };
+
+  renderAuthButton = ({ isSignedIn }) => (isSignedIn ? <Link to="/logout">Logout</Link> : <Link to="/login">Login</Link>);
+
+  render = () => (
+    <>
+      <div>Welcome Home</div>
+      {this.renderAuthButton(this.props.auth)}
+    </>
+  );
+}
+
+const mapStateToProps = ({ auth }) => ({ auth });
+
+export default connect(mapStateToProps)(Home);
diff --git a/.history/src/index_20200601125027.js b/.history/src/index_20200601125027.js
new file mode 100644
index 0000000..3286872
--- /dev/null
+++ b/.history/src/index_20200601125027.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+
+// jQuery & BootStrap
+import 'jquery/dist/jquery.min';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap/dist/js/bootstrap.min';
+import 'popper.js/dist/popper.min';
+
+import * as serviceWorker from './serviceWorker.js';
+// Import redux store
+import store from './redux/store.js';
+
+import App from './app.js';
+
+ReactDOM.render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById('root')
+);
+
+if (!window.location.host.includes('localhost')) {
+  serviceWorker.register();
+}
diff --git a/.history/src/index_20200610111828.js b/.history/src/index_20200610111828.js
new file mode 100644
index 0000000..3286872
--- /dev/null
+++ b/.history/src/index_20200610111828.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+
+// jQuery & BootStrap
+import 'jquery/dist/jquery.min';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap/dist/js/bootstrap.min';
+import 'popper.js/dist/popper.min';
+
+import * as serviceWorker from './serviceWorker.js';
+// Import redux store
+import store from './redux/store.js';
+
+import App from './app.js';
+
+ReactDOM.render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById('root')
+);
+
+if (!window.location.host.includes('localhost')) {
+  serviceWorker.register();
+}
diff --git a/.history/src/redux/actions/auth/loginAction_20200601125027.js b/.history/src/redux/actions/auth/loginAction_20200601125027.js
new file mode 100644
index 0000000..c030a91
--- /dev/null
+++ b/.history/src/redux/actions/auth/loginAction_20200601125027.js
@@ -0,0 +1,6 @@
+import api from '../../../api/api.js';
+
+export default (payload) => ({
+  type: 'LOGIN',
+  payload: api.post('/auth/login', payload)
+});
diff --git a/.history/src/redux/actions/auth/loginAction_20200610111609.js b/.history/src/redux/actions/auth/loginAction_20200610111609.js
new file mode 100644
index 0000000..c030a91
--- /dev/null
+++ b/.history/src/redux/actions/auth/loginAction_20200610111609.js
@@ -0,0 +1,6 @@
+import api from '../../../api/api.js';
+
+export default (payload) => ({
+  type: 'LOGIN',
+  payload: api.post('/auth/login', payload)
+});
diff --git a/.history/src/redux/actions/auth/loginAction_20200610111610.js b/.history/src/redux/actions/auth/loginAction_20200610111610.js
new file mode 100644
index 0000000..c030a91
--- /dev/null
+++ b/.history/src/redux/actions/auth/loginAction_20200610111610.js
@@ -0,0 +1,6 @@
+import api from '../../../api/api.js';
+
+export default (payload) => ({
+  type: 'LOGIN',
+  payload: api.post('/auth/login', payload)
+});
diff --git a/.history/src/redux/actions/auth/logoutAction_20200601125027.js b/.history/src/redux/actions/auth/logoutAction_20200601125027.js
new file mode 100644
index 0000000..ed33365
--- /dev/null
+++ b/.history/src/redux/actions/auth/logoutAction_20200601125027.js
@@ -0,0 +1,3 @@
+import auth from '../types/authTypes.js';
+
+export default () => ({ type: auth.LOGOUT });
diff --git a/.history/src/redux/actions/auth/logoutAction_20200610111605.js b/.history/src/redux/actions/auth/logoutAction_20200610111605.js
new file mode 100644
index 0000000..ed33365
--- /dev/null
+++ b/.history/src/redux/actions/auth/logoutAction_20200610111605.js
@@ -0,0 +1,3 @@
+import auth from '../types/authTypes.js';
+
+export default () => ({ type: auth.LOGOUT });
diff --git a/.history/src/redux/actions/auth/logoutAction_20200610111606.js b/.history/src/redux/actions/auth/logoutAction_20200610111606.js
new file mode 100644
index 0000000..ed33365
--- /dev/null
+++ b/.history/src/redux/actions/auth/logoutAction_20200610111606.js
@@ -0,0 +1,3 @@
+import auth from '../types/authTypes.js';
+
+export default () => ({ type: auth.LOGOUT });
diff --git a/.history/src/redux/actions/types/authTypes_20200601125027.js b/.history/src/redux/actions/types/authTypes_20200601125027.js
new file mode 100644
index 0000000..530ff1c
--- /dev/null
+++ b/.history/src/redux/actions/types/authTypes_20200601125027.js
@@ -0,0 +1,8 @@
+export default {
+  LOGIN: {
+    LOGIN_PENDING: 'LOGIN_PENDING',
+    LOGIN_FULFILLED: 'LOGIN_FULFILLED',
+    LOGIN_REJECTED: 'LOGIN_REJECTED'
+  },
+  LOGOUT: 'LOGOUT'
+};
diff --git a/.history/src/redux/actions/types/authTypes_20200610111558.js b/.history/src/redux/actions/types/authTypes_20200610111558.js
new file mode 100644
index 0000000..530ff1c
--- /dev/null
+++ b/.history/src/redux/actions/types/authTypes_20200610111558.js
@@ -0,0 +1,8 @@
+export default {
+  LOGIN: {
+    LOGIN_PENDING: 'LOGIN_PENDING',
+    LOGIN_FULFILLED: 'LOGIN_FULFILLED',
+    LOGIN_REJECTED: 'LOGIN_REJECTED'
+  },
+  LOGOUT: 'LOGOUT'
+};
diff --git a/.history/src/redux/reducers/authReducer_20200601125027.js b/.history/src/redux/reducers/authReducer_20200601125027.js
new file mode 100644
index 0000000..6c170fd
--- /dev/null
+++ b/.history/src/redux/reducers/authReducer_20200601125027.js
@@ -0,0 +1,6 @@
+const INIT = { isSignedIn: false, token: undefined, user: undefined };
+
+export default (state = INIT, action) => ({
+  LOGIN_FULFILLED: { ...state, isSignedIn: true, user: action.payload && action.payload.data },
+  LOGOUT: { ...state, isSignedIn: false }
+}[action.type] || state);
diff --git a/.history/src/redux/reducers/authReducer_20200610111550.js b/.history/src/redux/reducers/authReducer_20200610111550.js
new file mode 100644
index 0000000..6c170fd
--- /dev/null
+++ b/.history/src/redux/reducers/authReducer_20200610111550.js
@@ -0,0 +1,6 @@
+const INIT = { isSignedIn: false, token: undefined, user: undefined };
+
+export default (state = INIT, action) => ({
+  LOGIN_FULFILLED: { ...state, isSignedIn: true, user: action.payload && action.payload.data },
+  LOGOUT: { ...state, isSignedIn: false }
+}[action.type] || state);
diff --git a/.history/src/redux/reducers/rootReducer_20200601125027.js b/.history/src/redux/reducers/rootReducer_20200601125027.js
new file mode 100644
index 0000000..a99c836
--- /dev/null
+++ b/.history/src/redux/reducers/rootReducer_20200601125027.js
@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux';
+import { reducer as formReducer } from 'redux-form';
+import authReducer from './authReducer.js';
+
+export default combineReducers({
+  auth: authReducer,
+  form: formReducer
+});
diff --git a/.history/src/redux/reducers/rootReducer_20200610111801.js b/.history/src/redux/reducers/rootReducer_20200610111801.js
new file mode 100644
index 0000000..a99c836
--- /dev/null
+++ b/.history/src/redux/reducers/rootReducer_20200610111801.js
@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux';
+import { reducer as formReducer } from 'redux-form';
+import authReducer from './authReducer.js';
+
+export default combineReducers({
+  auth: authReducer,
+  form: formReducer
+});
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..cfb3f05
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,21 @@
+{
+    "workbench.colorCustomizations": {
+        "activityBar.activeBackground": "#232866",
+        "activityBar.activeBorder": "#a63941",
+        "activityBar.background": "#232866",
+        "activityBar.foreground": "#e7e7e7",
+        "activityBar.inactiveForeground": "#e7e7e799",
+        "activityBarBadge.background": "#a63941",
+        "activityBarBadge.foreground": "#e7e7e7",
+        "statusBar.background": "#161940",
+        "statusBar.border": "#161940",
+        "statusBar.foreground": "#e7e7e7",
+        "statusBarItem.hoverBackground": "#232866",
+        "titleBar.activeBackground": "#161940",
+        "titleBar.activeForeground": "#e7e7e7",
+        "titleBar.border": "#161940",
+        "titleBar.inactiveBackground": "#16194099",
+        "titleBar.inactiveForeground": "#e7e7e799"
+    },
+    "peacock.color": "161940"
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 2b3a7e9..f698dbb 100644
--- a/README.md
+++ b/README.md
@@ -1,17 +1,16 @@
-trainings, certifications and employment opportunities for teachers
+employment opportunities for teachers
 
 [![Codacy Badge](https://api.codacy.com/project/badge/Grade/c2a6c9e610854e1da519d5eeab79df0d)](https://app.codacy.com/gh/BuildForSDG/EduKolab-Frontend?utm_source=github.com&utm_medium=referral&utm_content=BuildForSDG/EduKolab-Frontend&utm_campaign=Badge_Grade_Settings)
-[![Codacy Badge](https://api.codacy.com/project/badge/Grade/c2a6c9e610854e1da519d5eeab79df0d)](https://app.codacy.com/gh/BuildForSDG/team-099-frontend?utm_source=github.com&utm_medium=referral&utm_content=BuildForSDG/team-099-frontend&utm_campaign=Badge_Grade_Settings)
 
 ## About
-The name of our soolution is **EduKolab**.
+The name of our solution is **EduKolab**.
 It is a web app that:
 - connects teachers in primary && secondary schools with international cooperations for training and certification as well as
 - offers trained & certified teachers to schools && guardians for employment
 
 ## Why
 The problem we set out to solve is that of 
-_**insuuficient supply of qualified teachers in your community, Nigeria, as well as other developing countries**_.
+_**insufficient supply of qualified teachers in your community, Nigeria, as well as other developing countries**_.
 
 This project is geared at addressing the [4th Sustainable Developemnt Goal of Education](https://sustainabledevelopment.un.org/sdg4)
 
@@ -22,7 +21,7 @@ It is very important and relevant especially in this time for a good number of r
 
 ## Usage
 URL to deployed staging-app is below
-[EduKolab Staging App](https://edukolab-staging-app.herokuapp.com/)
+[EduKolab Staging App](https://edukolab-client-staging-app.herokuapp.com/)
 
 ## Setup
 1. Clone repo `git clone https://github.com/BuildForSDG/EduKolab-Frontend.git edukolab`
diff --git a/jest.config.js b/jest.config.js
index de0c5dc..82a3654 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -3,5 +3,5 @@ module.exports = {
   rootDir: '__tests__',
   testRegex: ['.spec.js$', '.test.js$'],
   coverageDirectory: './coverage',
-  testEnvironment: 'node',
+  testEnvironment: 'node'
 };
diff --git a/package-lock.json b/package-lock.json
index 3c77daf..b04447e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1085,6 +1085,51 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.28",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.28.tgz",
+      "integrity": "sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.28",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.28.tgz",
+      "integrity": "sha512-4LeaNHWvrneoU0i8b5RTOJHKx7E+y7jYejplR7uSVB34+mp3Veg7cbKk7NBCLiI4TyoWS1wh9ZdoyLJR8wSAdg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.28"
+      }
+    },
+    "@fortawesome/free-brands-svg-icons": {
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.13.0.tgz",
+      "integrity": "sha512-/6xXiJFCMEQxqxXbL0FPJpwq5Cv6MRrjsbJEmH/t5vOvB4dILDpnY0f7zZSlA8+TG7jwlt12miF/yZpZkykucA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.28"
+      }
+    },
+    "@fortawesome/free-regular-svg-icons": {
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.13.0.tgz",
+      "integrity": "sha512-70FAyiS5j+ANYD4dh9NGowTorNDnyvQHHpCM7FpnF7GxtDjBUCKdrFqCPzesEIpNDFNd+La3vex+jDk4nnUfpA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.28"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.13.0.tgz",
+      "integrity": "sha512-IHUgDJdomv6YtG4p3zl1B5wWf9ffinHIvebqQOmV3U+3SLw4fC+LUCCgwfETkbTtjy5/Qws2VoVf6z/ETQpFpg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.28"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.9.tgz",
+      "integrity": "sha512-49V3WNysLZU5fZ3sqSuys4nGRytsrxJktbv3vuaXkEoxv22C6T7TEG0TW6+nqVjMnkfCQd5xOnmJoZHMF78tOw==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -2482,6 +2527,32 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz",
       "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug=="
     },
+    "axios": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+      "requires": {
+        "follow-redirects": "1.5.10"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        }
+      }
+    },
     "axobject-query": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.1.2.tgz",
@@ -3035,6 +3106,11 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bootstrap": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.0.tgz",
+      "integrity": "sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA=="
+    },
     "boxen": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz",
@@ -3550,6 +3626,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -3689,6 +3770,11 @@
         }
       }
     },
+    "clone-function": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/clone-function/-/clone-function-1.0.6.tgz",
+      "integrity": "sha1-QoRxk3dQvKnEjsv7wW9uIy90oD0="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -4424,6 +4510,11 @@
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
       "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
     },
+    "deep-diff": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-0.3.8.tgz",
+      "integrity": "sha1-wB3mPvsO7JeYgB1Ax+Da4ltYLIQ="
+    },
     "deep-equal": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
@@ -4687,6 +4778,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.4.tgz",
+      "integrity": "sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^2.6.7"
+      }
+    },
     "dom-serializer": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
@@ -5058,6 +5158,11 @@
         "next-tick": "~1.0.0"
       }
     },
+    "es6-error": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
+      "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg=="
+    },
     "es6-iterator": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
@@ -6565,6 +6670,14 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "hosted-git-info": {
       "version": "2.8.8",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
@@ -7234,6 +7347,11 @@
         "isobject": "^3.0.1"
       }
     },
+    "is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
+    },
     "is-regex": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.5.tgz",
@@ -7931,6 +8049,11 @@
         }
       }
     },
+    "jquery": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
+      "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -8239,6 +8362,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
       "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
     },
+    "lodash-es": {
+      "version": "4.17.15",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
+      "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ=="
+    },
     "lodash._baseisequal": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/lodash._baseisequal/-/lodash._baseisequal-3.0.7.tgz",
@@ -8599,6 +8727,15 @@
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.0.tgz",
       "integrity": "sha1-z8RcN+nsDY8KDsPdTvf3w6vjklY="
     },
+    "mini-create-react-context": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.0.tgz",
+      "integrity": "sha512-b0TytUgFSbgFJGzJqXPKCFCBWigAjpjo+Fl7Vf7ZbKRDptszpppKxXH6DRXEABZ/gcEQczeb0iZ7JvL8e8jjCA==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "tiny-warning": "^1.0.3"
+      }
+    },
     "mini-css-extract-plugin": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
@@ -9066,6 +9203,11 @@
         }
       }
     },
+    "object-foreach": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/object-foreach/-/object-foreach-0.1.2.tgz",
+      "integrity": "sha1-10IcW0DjtqPvV6xiQ2jSHY+NLew="
+    },
     "object-hash": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.0.3.tgz",
@@ -9090,6 +9232,15 @@
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
       "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
     },
+    "object-merge": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/object-merge/-/object-merge-2.5.1.tgz",
+      "integrity": "sha1-B36JFc446nKUeIRIxd0znjTfQic=",
+      "requires": {
+        "clone-function": ">=1.0.1",
+        "object-foreach": ">=0.1.2"
+      }
+    },
     "object-path": {
       "version": "0.11.4",
       "resolved": "https://registry.npmjs.org/object-path/-/object-path-0.11.4.tgz",
@@ -9621,6 +9772,11 @@
         "ts-pnp": "^1.1.6"
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
     "portfinder": {
       "version": "1.0.26",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.26.tgz",
@@ -11157,6 +11313,77 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-redux": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.0.tgz",
+      "integrity": "sha512-EvCAZYGfOLqwV7gh849xy9/pt55rJXPwmYvI4lilPM5rUT/1NxuuN59ipdBksRVSvz0KInbPnp4IfoXJXCqiDA==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "hoist-non-react-statics": "^3.3.0",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.9.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
+      "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.2.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "dependencies": {
+        "history": {
+          "version": "4.10.1",
+          "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+          "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+          "requires": {
+            "@babel/runtime": "^7.1.2",
+            "loose-envify": "^1.2.0",
+            "resolve-pathname": "^3.0.0",
+            "tiny-invariant": "^1.0.2",
+            "tiny-warning": "^1.0.0",
+            "value-equal": "^1.0.1"
+          }
+        },
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "path-to-regexp": {
+          "version": "1.8.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+          "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        },
+        "react-router": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
+          "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
+          "requires": {
+            "@babel/runtime": "^7.1.2",
+            "history": "^4.9.0",
+            "hoist-non-react-statics": "^3.1.0",
+            "loose-envify": "^1.3.1",
+            "mini-create-react-context": "^0.4.0",
+            "path-to-regexp": "^1.7.0",
+            "prop-types": "^15.6.2",
+            "react-is": "^16.6.0",
+            "tiny-invariant": "^1.0.2",
+            "tiny-warning": "^1.0.0"
+          }
+        }
+      }
+    },
     "react-scripts": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz",
@@ -11429,6 +11656,27 @@
         "scheduler": "^0.19.1"
       }
     },
+    "react-toastify": {
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-6.0.5.tgz",
+      "integrity": "sha512-1YXSb6Jr478c1TJEyVpxLHFvtmeXGMvdpZc0fke/7lK+MoLBC+NFgB74bq+C2SZe6LdK+K1voEURJoY88WqWvA==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "prop-types": "^15.7.2",
+        "react-transition-group": "^4.4.1"
+      }
+    },
+    "react-transition-group": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
+      "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -11491,6 +11739,62 @@
         "strip-indent": "^3.0.0"
       }
     },
+    "redux": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz",
+      "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "symbol-observable": "^1.2.0"
+      }
+    },
+    "redux-devtools-extension": {
+      "version": "2.13.8",
+      "resolved": "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz",
+      "integrity": "sha512-8qlpooP2QqPtZHQZRhx3x3OP5skEV1py/zUdMY28WNAocbafxdG2tRD1MWE7sp8obGMNYuLWanhhQ7EQvT1FBg=="
+    },
+    "redux-form": {
+      "version": "8.3.5",
+      "resolved": "https://registry.npmjs.org/redux-form/-/redux-form-8.3.5.tgz",
+      "integrity": "sha512-GSpi9pbEor2wmL2cie+svP8QCylbwjlpAFegOHPaxSrQQm2Mk8ZHVWVObJUfF9cXcczIzB/bH/xOdIqeNl1OCA==",
+      "requires": {
+        "@babel/runtime": "^7.8.4",
+        "es6-error": "^4.1.1",
+        "hoist-non-react-statics": "^3.3.2",
+        "invariant": "^2.2.4",
+        "is-promise": "^2.1.0",
+        "lodash": "^4.17.15",
+        "lodash-es": "^4.17.15",
+        "prop-types": "^15.6.1",
+        "react-is": "^16.12.0"
+      }
+    },
+    "redux-localstorage-simple": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/redux-localstorage-simple/-/redux-localstorage-simple-2.2.0.tgz",
+      "integrity": "sha512-BmgnJ3NkxTDvNsnHAZrRVDgODafg2Vtb17q2F2LEhuJ+EderZBJA6aqRsyqZC32BJWpu8PPtferv4Io9dpUf3w==",
+      "requires": {
+        "object-merge": "2.5.1"
+      }
+    },
+    "redux-logger": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz",
+      "integrity": "sha1-91VZZvMJjzyIYExEnPC69XeCdL8=",
+      "requires": {
+        "deep-diff": "^0.3.5"
+      }
+    },
+    "redux-promise-middleware": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/redux-promise-middleware/-/redux-promise-middleware-6.1.2.tgz",
+      "integrity": "sha512-ZqZu/nnSzGgwTtNbGoGVontpk7LjTOv0kigtt3CcgXI9gpq+8WlfXTXRZD0WTD5yaohRq0q2nYmJXSTjwXs83Q=="
+    },
+    "redux-thunk": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz",
+      "integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw=="
+    },
     "reflect.ownkeys": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz",
@@ -11729,6 +12033,11 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
       "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
     },
+    "resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -12059,9 +12368,9 @@
       "integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ=="
     },
     "serve": {
-      "version": "11.3.0",
-      "resolved": "https://registry.npmjs.org/serve/-/serve-11.3.0.tgz",
-      "integrity": "sha512-AU0g50Q1y5EVFX56bl0YX5OtVjUX1N737/Htj93dQGKuHiuLvVB45PD8Muar70W6Kpdlz8aNJfoUqTyAq9EE/A==",
+      "version": "11.3.1",
+      "resolved": "https://registry.npmjs.org/serve/-/serve-11.3.1.tgz",
+      "integrity": "sha512-+tcx5eybTZT0scsp1PCb7HYjzBSfRF9fQIwyEU8ZYLioVuhHwywRYBBTF5WYlTXvC62eumK2bloDXAd7+9blGQ==",
       "requires": {
         "@zeit/schemas": "2.6.0",
         "ajv": "6.5.3",
@@ -13101,6 +13410,11 @@
         }
       }
     },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -13390,6 +13704,16 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tiny-invariant": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
+      "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
+    },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -13780,6 +14104,11 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
diff --git a/package.json b/package.json
index 535b0b2..caa49ac 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,9 @@
 {
   "name": "edukolab",
   "version": "0.0.1",
-  "description": "A boilerplate for starting js code",
+  "description": "employment opportunities for teachers",
   "keywords": [
-    "edukolab-frontend",
-    "boilerplate"
+    "edukolab-frontend"
   ],
   "private": false,
   "directories": {
@@ -35,17 +34,37 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-brands-svg-icons": "^5.13.0",
+    "@fortawesome/free-regular-svg-icons": "^5.13.0",
+    "@fortawesome/free-solid-svg-icons": "^5.13.0",
+    "@fortawesome/react-fontawesome": "^0.1.9",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "axios": "^0.19.2",
+    "bootstrap": "^4.5.0",
     "cross-env": "^7.0.2",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "jest-enzyme": "^7.1.2",
+    "jquery": "^3.5.1",
+    "popper.js": "^1.16.1",
+    "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-redux": "^7.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
-    "serve": "^11.3.0"
+    "react-toastify": "^6.0.5",
+    "redux": "^4.0.5",
+    "redux-devtools-extension": "^2.13.8",
+    "redux-form": "^8.3.5",
+    "redux-localstorage-simple": "^2.2.0",
+    "redux-logger": "^3.0.6",
+    "redux-promise-middleware": "^6.1.2",
+    "redux-thunk": "^2.3.0",
+    "serve": "^11.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
diff --git a/public/css/master.css b/public/css/master.css
deleted file mode 100644
index 61fcca8..0000000
--- a/public/css/master.css
+++ /dev/null
@@ -1,117 +0,0 @@
-/* CSS Document */
-* {
-  font-family: 'Montserrat', sans-serif;
-  box-sizing: border-box;
-  word-wrap: break-word;
-  transition: all 0.05s;
-}
-
-body,
-html {
-  height: 100%;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: 'Roboto', serif;
-}
-
-a {
-  text-decoration: none;
-  box-shadow: none;
-  background: inherit;
-}
-
-a:hover,
-a.active {
-  color: #161940;
-  font-weight: 600;
-}
-
-.form-control,
-.form-control:-webkit-autofill,
-.form-control:-webkit-autofill:hover,
-.form-control:-webkit-autofill:focus,
-.form-control:-webkit-autofill:active {
-  box-shadow: none;
-  -webkit-box-shadow: 0 0 0 100 #fff inset;
-  font-family: 'Montserrat', sans-serif;
-}
-
-.btn,
-button,
-.btn:focus,
-button:focus,
-.btn:hover,
-button:hover {
-  font-weight: 600;
-  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-  border: none;
-  color: #fff;
-}
-
-.border-success {
-  border-color: #099a7e;
-}
-
-.border-primary {
-  border-color: #161940;
-}
-
-.border-warning {
-  border-color: #e7816e;
-}
-
-.text-success,
-.btn-outline-success {
-  color: #099a7e;
-}
-
-.text-primary,
-.btn-outline-primary {
-  color: #161940;
-}
-
-.text-warning,
-.btn-outline-warning {
-  color: #e7816e;
-}
-
-.bg-success,
-.btn-success,
-.btn-outline-success:hover {
-  background: #099a7e;
-}
-
-.bg-primary,
-.btn-primary,
-.btn-outline-primary:hover {
-  background: #161940;
-}
-
-.bg-warning,
-.btn-warning,
-.btn-outline-warning:hover {
-  background: #e7816e;
-}
-
-.btn-link {
-  box-shadow: none;
-  color: #161940;
-  font-weight: bold;
-  padding-left: 0;
-  text-decoration: none;
-}
-
-.clear {
-  clear: both;
-}
-
-.pointer {
-  box-shadow: none;
-  cursor: pointer;
-}
diff --git a/public/index.html b/public/index.html
index 75a1969..748836a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -48,9 +48,9 @@
     -->
     <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
   </head>
-  <body>
+  <body id="body">
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <main id="root"></main>
+    <main class="h-100" id="root"></main>
 
     <!-- Modernizr. Plugins -->
     <script src="%PUBLIC_URL%/js/modernizr.min.js" async></script>
@@ -67,9 +67,6 @@
 
       <!-- Main CSS -->
       <link rel="stylesheet" href="%PUBLIC_URL%/css/main.css" />
-
-      <!-- Main CSS -->
-      <link rel="stylesheet" href="%PUBLIC_URL%/css/master.css" />
     </noscript>
     <script>
       var loadDeferredStyles = function () {
diff --git a/src/__tests__/App.test.js b/src/__tests__/App.test.js
deleted file mode 100644
index 08800e6..0000000
--- a/src/__tests__/App.test.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-import { render } from '@testing-library/react';
-import App from '../app.js';
-
-it('renders welcome message', () => {
-  const { getByText } = render(<App />);
-  expect(getByText('Learn React')).toBeInTheDocument();
-});
-
-it('renders app component without crashing', () => {
-  shallow(<App />);
-});
-
-it('renders entire app without crashing', () => {
-  mount(<App />);
-});
diff --git a/src/__tests__/components/app.test.js b/src/__tests__/components/app.test.js
new file mode 100644
index 0000000..04c6908
--- /dev/null
+++ b/src/__tests__/components/app.test.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import { Provider } from 'react-redux';
+import App from '../../app.js';
+import store from '../../redux/store.js';
+
+
+it('renders app component without crashing', () => {
+  shallow(<App />);
+});
+
+it('renders entire app without crashing', () => {
+  mount(<Provider store={store}>
+    <App />
+  </Provider>);
+});
diff --git a/src/api/api.js b/src/api/api.js
new file mode 100644
index 0000000..c93f71c
--- /dev/null
+++ b/src/api/api.js
@@ -0,0 +1,19 @@
+// axiosconfig.js
+import axios from 'axios';
+import store from '../redux/store.js';
+
+// configure base url
+const api = axios.create({
+  baseURL: 'http://localhost:8008/api'
+});
+
+// intercept requests and add authorization token
+api.interceptors.request.use((config) => {
+  const { token } = store.getState().auth;
+  if (token) {
+    config.headers.authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+export default api;
diff --git a/src/app.css b/src/app.css
new file mode 100644
index 0000000..436ee71
--- /dev/null
+++ b/src/app.css
@@ -0,0 +1,132 @@
+/* CSS Document */
+* {
+  font-family: 'Montserrat', sans-serif;
+  box-sizing: border-box;
+  word-wrap: break-word;
+  transition: all 0.1s ease-out;
+}
+
+body#body,
+body#body > main,
+html {
+  height: 100%;
+  scroll-behavior: smooth;
+}
+
+body#body h1,
+body#body h2,
+body#body h3,
+body#body h4,
+body#body h5,
+body#body h6 {
+  font-family: 'Roboto', serif;
+}
+
+body#body a {
+  text-decoration: none;
+  box-shadow: none;
+  background: inherit;
+}
+
+body#body a:hover,
+body#body a.active {
+  color: #161940;
+  font-weight: 600;
+}
+
+body#body .form-control,
+body#body .form-control:-webkit-autofill,
+body#body .form-control:-webkit-autofill:hover,
+body#body .form-control:-webkit-autofill:focus,
+body#body .form-control:-webkit-autofill:active {
+  box-shadow: none;
+  -webkit-box-shadow: 0 0 0 100 #fff inset;
+  font-family: 'Montserrat', sans-serif;
+}
+
+body#body .btn,
+body#body button,
+body#body .btn:focus,
+body#body button:focus,
+body#body .btn:hover,
+body#body button:hover {
+  font-weight: 600;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  border: none;
+  color: #fff;
+}
+
+body#body .border-success {
+  border-color: #099a7e;
+}
+
+body#body .border-primary {
+  border-color: #161940;
+}
+
+body#body .border-warning {
+  border-color: #e7816e;
+}
+
+body#body .text-success,
+body#body .btn-outline-success {
+  color: #099a7e;
+}
+
+body#body .text-primary,
+body#body .btn-outline-primary {
+  color: #161940;
+}
+
+body#body .text-warning,
+body#body .btn-outline-warning {
+  color: #e7816e;
+}
+
+body#body .bg-success,
+body#body .btn-success,
+body#body .btn-outline-success:hover {
+  background: #099a7e;
+}
+
+body#body .bg-primary,
+body#body .btn-primary,
+body#body .btn-outline-primary:hover {
+  background: #161940;
+}
+
+body#body .bg-warning,
+body#body .btn-warning,
+body#body .btn-outline-warning:hover {
+  background: #e7816e;
+}
+
+body#body .bg-white,
+body#body .btn-white,
+body#body .btn-outline-white:hover {
+  background: #fff;
+  color: #161940;
+}
+
+body#body .bg-light,
+body#body .btn-light,
+body#body .btn-outline-light:hover {
+  background: #eef1f4;
+}
+
+body#body .btn-link {
+  box-shadow: none;
+  color: #161940;
+  font-weight: bold;
+  padding-left: 0;
+  text-decoration: none;
+}
+
+body#body .clear {
+  clear: both;
+}
+
+body#body .pointer {
+  box-shadow: none;
+  cursor: pointer;
+}
diff --git a/src/app.js b/src/app.js
index f82d248..33323c1 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,7 +1,32 @@
 import React from 'react';
+import { Route, BrowserRouter as Router } from 'react-router-dom';
+import './app.css';
+import { ToastContainer } from 'react-toastify';
+import Home from './components/home/home.js';
+import Login from './components/auth/login/login.js';
+import Logout from './components/auth/logout/logout.js';
 
 function App() {
-  return <div className="App">Learn React</div>;
+  return (
+    <>
+      <Router>
+        <Route exact path="/" component={Home} />
+        <Route path="/login" component={Login} />
+        <Route path="/logout" component={Logout} />
+      </Router>
+      <ToastContainer
+        position="top-right"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+      />
+    </>
+  );
 }
 
 export default App;
diff --git a/src/assets/css/auth/auth.css b/src/assets/css/auth/auth.css
new file mode 100644
index 0000000..e77cdde
--- /dev/null
+++ b/src/assets/css/auth/auth.css
@@ -0,0 +1,89 @@
+body#body div#authContainer {
+  padding-top: 0;
+  background: #eef1f4;
+}
+
+body#body div#authContainer .btn {
+  border-radius: 50rem;
+  padding: 0.5rem 1.5rem;
+}
+
+body#body div#authContainer .button-group .btn-auth-main {
+  background: #fff;
+  color: #161940;
+}
+
+body#body div#authContainer .button-group .btn-auth-side {
+  background: #161940;
+}
+
+body#body div#authContainer .auth-svg {
+  padding: 4rem 10rem 1rem 2.5rem;
+}
+
+body#body div#authContainer .social-auth {
+  padding: 40px 0;
+  text-align: center;
+  background: #eef1f4;
+}
+
+body#body div#authContainer .social-auth p {
+  margin: 0;
+}
+
+body#body div#authContainer .social-auth div {
+  border-radius: 50%;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  margin-right: 15px;
+  width: 35px;
+  height: 35px;
+}
+
+body#body div#authContainer .social-auth div.social-auth-facebook {
+  background: #3b5998;
+  padding: 5.5px 12.5px;
+  margin: 10px auto;
+  color: #fff;
+}
+
+@media (min-width: 576px) {
+  body#body div#authContainer {
+    padding-top: 0;
+    background: #161940;
+  }
+}
+
+@media (min-width: 576px) {
+  body#body div#authContainer .social-auth {
+    background: #161940;
+    color: #fff;
+  }
+}
+
+@media (min-width: 992px) {
+  body#body div#authContainer,
+  body#body div#authContainer .auth-holder {
+    background: #eef1f4;
+  }
+
+  body#body div#authContainer .button-group .btn-auth-main {
+    background: #161940;
+    color: #fff;
+  }
+
+  body#body div#authContainer .button-group .btn-auth-side {
+    background: #fff;
+    color: #161940;
+  }
+
+  body#body div#authContainer .social-auth {
+    padding: 0;
+    text-align: left;
+    color: #161940;
+    background: #eef1f4;
+  }
+
+  body#body div#authContainer .social-auth div.social-auth-facebook {
+    margin: 10px 0;
+  }
+}
diff --git a/src/assets/css/auth/authForm.css b/src/assets/css/auth/authForm.css
new file mode 100644
index 0000000..1d60019
--- /dev/null
+++ b/src/assets/css/auth/authForm.css
@@ -0,0 +1,200 @@
+body#body div#authContainer .form-container-holder {
+  padding: 0;
+  background: #eef1f4;
+}
+
+body#body div#authContainer form {
+  background: #161940;
+  padding: 90px 20px 10px 20px;
+  color: #fff;
+}
+
+body#body div#authContainer form .form-row {
+  margin: 8px auto;
+}
+
+body#body div#authContainer form .form-row .form-holder {
+  background: transparent;
+  padding: 8px 20px;
+}
+
+body#body div#authContainer form .form-row .form-holder:hover {
+  background: #fff;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  transform: scale(1.02);
+}
+
+body#body div#authContainer form .form-icon {
+  font-size: 20px;
+  margin-right: 18px;
+  color: #a1a1a1;
+}
+
+body#body div#authContainer form label,
+form .section-header {
+  color: #a1a1a1;
+  margin: 0;
+  padding: 0;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 10px;
+  position: relative;
+}
+
+body#body div#authContainer form .form-row .form-holder .form-control {
+  border: none;
+  background: #eef1f4;
+  padding: 0;
+  margin: 0;
+  height: fit-content;
+  position: relative;
+  top: -2px;
+  border-radius: 0;
+}
+
+body#body div#authContainer form .form-holder:hover .form-control {
+  background: #fff;
+}
+
+body#body div#authContainer form .form-row .form-holder .form-control,
+body#body div#authContainer form .form-row .form-holder .form-control:focus,
+body#body div#authContainer form .form-row .form-holder .form-control:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 100px #161940 inset;
+  box-shadow: 0 0 0 100px #161940 inset;
+  border: none;
+  outline: none;
+  -webkit-text-fill-color: #eef1f4;
+}
+
+body#body div#authContainer form .form-row .form-holder:hover .form-control,
+body#body div#authContainer form .form-row .form-holder:hover .form-control:focus,
+body#body div#authContainer form .form-row .form-holder:hover .form-control:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 100px #fff inset;
+  box-shadow: 0 0 0 100px #fff inset;
+  background: #fff;
+  outline: none;
+  -webkit-text-fill-color: #161940;
+}
+
+body#body div#authContainer form .form-row .form-holder .form-control:-webkit-autofill:hover,
+body#body div#authContainer form .form-row .form-holder .form-control:-webkit-autofill:focus,
+body#body div#authContainer form .form-row .form-holder .form-control:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 100px #161940 inset;
+  box-shadow: 0 0 0 100px #161940 inset;
+  border: none;
+  outline: none;
+  -webkit-text-fill-color: #eef1f4;
+}
+
+body#body div#authContainer form .form-row .form-holder:hover .form-control:-webkit-autofill:hover,
+body#body div#authContainer form .form-row .form-holder:hover .form-control:-webkit-autofill:focus,
+body#body div#authContainer form .form-row .form-holder:hover .form-control:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 100px #fff inset;
+  box-shadow: 0 0 0 100px #fff inset;
+  background: #fff;
+  outline: none;
+  -webkit-text-fill-color: #161940;
+}
+
+body#body div#authContainer form .form-validation-response {
+  padding: 18px 10px 0 10px;
+}
+
+body#body div#authContainer form .form-row .form-holder.form-holder-select {
+  padding: 0;
+  overflow: hidden;
+  text-align: center;
+}
+
+body#body div#authContainer form .form-holder-select label {
+  width: 100%;
+  height: 100%;
+  padding: 10px 25px;
+  cursor: pointer;
+}
+
+body#body div#authContainer form .form-holder-select label i {
+  display: block;
+  font-size: 300%;
+}
+
+body#body div#authContainer form input[type='radio']:checked + label {
+  color: #161940;
+  background: #fff;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+}
+
+body#body div#authContainer form .button-group {
+  margin: 0.5rem 0;
+  position: relative;
+  top: 45px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+body#body div#authContainer form .button-group .btn {
+  margin: 0.5rem;
+}
+
+@media (min-width: 576px) {
+  body#body div#authContainer .form-container-holder {
+    background: #161940;
+  }
+}
+
+@media (min-width: 992px) {
+  body#body div#authContainer .form-container-holder {
+    background: #eef1f4;
+  }
+}
+
+@media (min-width: 992px) {
+  body#body div#authContainer form {
+    background: #eef1f4;
+    padding: 0;
+    color: #161940;
+    margin-right: 3.5rem;
+  }
+}
+
+@media (min-width: 992px) {
+  body#body div#authContainer form .button-group {
+    margin: 0.5rem 0;
+    position: static;
+    justify-content: start;
+  }
+}
+
+@media (min-width: 992px) {
+  body#body div#authContainer form .form-row .form-holder {
+    background: #eef1f4;
+  }
+}
+
+@media (min-width: 992px) {
+  body#body div#authContainer form .form-row .form-holder:hover {
+    background: #fff;
+  }
+}
+
+@media (min-width: 992px) {
+  body#body div#authContainer form .form-row .form-holder .form-control,
+  body#body div#authContainer form .form-row .form-holder .form-control:focus,
+  body#body div#authContainer form .form-row .form-holder .form-control:-webkit-autofill,
+  body#body div#authContainer form .form-row .form-holder .form-control:-webkit-autofill:hover,
+  body#body div#authContainer form .form-row .form-holder .form-control:-webkit-autofill:focus,
+  body#body div#authContainer form .form-row .form-holder .form-control:-webkit-autofill:active {
+    -webkit-box-shadow: 0 0 0 100px #eef1f4 inset;
+    box-shadow: 0 0 0 100px #eef1f4 inset;
+    background: #eef1f4;
+    -webkit-text-fill-color: #161940;
+  }
+}
+
+@media (min-width: 992px) {
+  body#body div#authContainer form input[type='radio']:checked + label {
+    background: #161940;
+    color: #fff;
+  }
+}
diff --git a/src/assets/css/auth/authHeader.css b/src/assets/css/auth/authHeader.css
new file mode 100644
index 0000000..3afdc0f
--- /dev/null
+++ b/src/assets/css/auth/authHeader.css
@@ -0,0 +1,19 @@
+body#body header nav {
+  background: #161940;
+}
+
+body#body header nav .navbar-brand {
+  margin: 0 auto;
+}
+
+@media (min-width: 992px) {
+  body#body header nav {
+    background: transparent;
+  }
+}
+
+@media (min-width: 992px) {
+  body#body header nav .navbar-brand {
+    margin: unset;
+  }
+}
diff --git a/src/assets/img/logo_blue.png b/src/assets/img/logo_blue.png
new file mode 100644
index 0000000..67cc9cb
Binary files /dev/null and b/src/assets/img/logo_blue.png differ
diff --git a/src/assets/img/logo_white.png b/src/assets/img/logo_white.png
new file mode 100644
index 0000000..d1bc15d
Binary files /dev/null and b/src/assets/img/logo_white.png differ
diff --git a/src/assets/svg/undraw_enter_uhqk.svg b/src/assets/svg/undraw_enter_uhqk.svg
new file mode 100644
index 0000000..0b2062a
--- /dev/null
+++ b/src/assets/svg/undraw_enter_uhqk.svg
@@ -0,0 +1 @@
+<svg id="b8ea24f2-0d0e-4134-9f6b-a081050070ad" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="783.92771" height="868.73369" viewBox="0 0 783.92771 868.73369"><title>enter</title><path d="M741.2766,553.82947c427.43868,285.99636,288.51919,392.56531-266.62023,295.50409C329.60644,823.97285,208.03614,717.03187,208.03614,553.82947s119.37-295.50409,266.62023-295.50409S605.63611,463.0733,741.2766,553.82947Z" transform="translate(-208.03614 -15.63315)" fill="#3f3d56"/><ellipse cx="571.45602" cy="801.70598" rx="168.85948" ry="15.10848" opacity="0.1"/><ellipse cx="238.42771" cy="303.70598" rx="89.5" ry="15.10848" opacity="0.1"/><path d="M441.77321,356.53218A203.53841,203.53841,0,0,0,258.143,472.19205,203.02876,203.02876,0,0,1,408.89,405.41256c112.39817,0,203.52011,91.12188,203.52011,203.52011a202.64833,202.64833,0,0,1-19.88988,87.86024,202.7816,202.7816,0,0,0,52.773-136.74062C645.29332,447.65406,554.17138,356.53218,441.77321,356.53218Z" transform="translate(-208.03614 -15.63315)" opacity="0.1"/><path d="M612.41016,608.044a202.6483,202.6483,0,0,1-19.88988,87.86024,203.02876,203.02876,0,0,1-150.74707,66.77949c-112.39818,0-203.52011-91.12193-203.52011-203.5201A202.64811,202.64811,0,0,1,258.143,471.30334,203.02877,203.02877,0,0,1,408.89,404.52384C521.28822,404.52384,612.41016,495.64572,612.41016,608.044Z" transform="translate(-208.03614 -15.63315)" fill="#6c63ff" opacity="0.3"/><path d="M441.77343,763.68346c-112.773,0-204.52051-91.74707-204.52051-204.51953a202.601,202.601,0,0,1,19.98828-88.293A204.539,204.539,0,0,1,441.77343,354.64342c112.77295,0,204.52,91.74756,204.52,204.52051a204.50619,204.50619,0,0,1-204.52,204.51953Zm0-407.04c-77.48926,0-149.21485,45.17627-182.72852,115.09277a200.60547,200.60547,0,0,0-19.792,87.42774c0,111.66992,90.8501,202.51953,202.52051,202.51953a202.50552,202.50552,0,0,0,202.52-202.51953C644.29345,447.49352,553.44335,356.64342,441.77343,356.64342Z" transform="translate(-208.03614 -15.63315)" fill="#fff"/><path d="M907.39185,766.26778c-14.78157,19.33172-13.09129,45.458-13.09129,45.458s25.65595-5.21661,40.43753-24.54834,13.09128-45.458,13.09128-45.458S922.17342,746.93605,907.39185,766.26778Z" transform="translate(-208.03614 -15.63315)" fill="#d0cde1"/><path d="M917.07859,770.60943c-2.86846,24.16572-22.286,41.72709-22.286,41.72709s-14.76681-21.619-11.89835-45.78475,22.286-41.7271,22.286-41.7271S919.94705,746.4437,917.07859,770.60943Z" transform="translate(-208.03614 -15.63315)" fill="#6c63ff"/><circle cx="172.82786" cy="104.91057" r="83.97916" fill="#ff6584"/><path d="M562.93745,206.166c.04074,83.8842-49.81343,113.19375-111.32351,113.22362q-2.14317.001-4.26566-.04579-4.27613-.09017-8.46322-.38554c-55.51682-3.90373-98.66675-34.672-98.70463-112.68411C340.14122,125.5413,443.274,23.60786,451.00859,16.07085c.00676,0,.00676,0,.0136-.00685.29385-.28725.44423-.43085.44423-.43085S562.89671,122.28859,562.93745,206.166Z" transform="translate(-208.03614 -15.63315)" fill="#6c63ff"/><path d="M447.55394,306.56045l40.7079-56.9361-40.80742,63.18424-.10614,6.53524q-4.27613-.09017-8.46322-.38554l4.348-83.92055-.03444-.64937.075-.12312.41322-7.92991-40.97141-63.30175L443.807,220.39481l.10338,1.68162,3.28464-63.40527L412.11519,93.25422l35.505,54.27411,3.38836-131.45748.01339-.43748.00021.43063-.52377,103.66783L485.36237,78.617,450.3523,128.65968l-.89526,56.7732,32.56057-54.4985-32.68636,62.8453-.49737,31.56877,47.25439-75.86125-47.43363,86.87409Z" transform="translate(-208.03614 -15.63315)" fill="#3f3d56"/><path d="M780.99194,254.22683c-10.67463-18.03682-31.79353-18.87742-31.79353-18.87742s-20.57917-2.63164-33.78057,24.83865c-12.30476,25.60458-29.2869,50.32632-2.734,56.32016l4.79623-14.928,2.97028,16.03938a103.89546,103.89546,0,0,0,11.361.19416c28.436-.91808,55.517.26861,54.64508-9.93543C785.29731,294.3135,791.26307,271.58185,780.99194,254.22683Z" transform="translate(-208.03614 -15.63315)" fill="#2f2e41"/><polygon points="525.862 407.843 528.608 435.301 592.22 428.437 593.593 407.843 525.862 407.843" fill="#a0616a"/><path d="M727.03377,438.57806l-1.83056,16.01748s-21.05155,29.2891-19.221,79.62975S677.15077,808.353,699.1176,810.18356s61.32406,4.57642,63.15463-2.28821,5.4917-267.26307,5.4917-267.26307,9.61049,267.588,26.08561,268.50324,71.84983,2.74586,71.84983-4.11878S817.1893,491.66456,817.1893,491.66456l-7.77992-25.628-7.77992-31.57731s-48.51008,8.23756-61.7817,5.03406S727.03377,438.57806,727.03377,438.57806Z" transform="translate(-208.03614 -15.63315)" fill="#2f2e41"/><circle cx="540.96446" cy="266.8889" r="29.2891" fill="#a0616a"/><path d="M800.25653,331.03213l-5.56031,8.09112-3.56047,5.17593-5.98141,8.69978-29.74675,2.28821s-7.22619-2.334-15.56441-5.7434c-3.07993-1.2631-6.31549-2.67264-9.39083-4.16912-11.93071-5.79376-21.50461-12.86434-10.74085-17.546a35.73415,35.73415,0,0,0,5.48712-2.94722,27.877,27.877,0,0,0,4.39794-3.56044,23.9886,23.9886,0,0,0,6.59006-21.40852l28.83146-4.11878c-.83752,7.31312,6.43448,15.28982,14.58511,21.80208,2.67714,2.14635,5.45506,4.12792,8.06818,5.87612C794.52226,328.05746,800.25653,331.03213,800.25653,331.03213Z" transform="translate(-208.03614 -15.63315)" fill="#a0616a"/><path d="M760.8993,339.72734s-28.145-4.80525-34.552-14.87338c0,0-27.68735,3.43232-25.39914,18.07687s25.17032,94.73195,25.17032,94.73195,57.20528-10.98342,78.25682-2.74586l12.814-102.05422s-4.57643-10.06813-13.27163-7.32227-12.12752.22882-12.12752.22882S781.95084,339.72734,760.8993,339.72734Z" transform="translate(-208.03614 -15.63315)" fill="#d0cde1"/><path d="M786.52727,500.35976s19.67861,21.96683,8.6952,25.628-24.255-14.64455-24.255-14.64455Z" transform="translate(-208.03614 -15.63315)" fill="#a0616a"/><path d="M792.93426,502.19033s-16.01748,10.98342-10.06813,18.30569,26.54325-6.407,26.54325-9.15284S792.93426,502.19033,792.93426,502.19033Z" transform="translate(-208.03614 -15.63315)" fill="#a0616a"/><path d="M753.577,442.69684l-13.27162,2.28821-8.6952-64.52755a231.696,231.696,0,0,0-1.15785-35.08285c-.9702-7.77991-2.59022-15.2578-5.25373-20.49323a27.877,27.877,0,0,0,4.39794-3.56044c3.18523,5.04778,8.99726,15.73829,10.24662,28.22279a45.47952,45.47952,0,0,1,.00458,9.40454c-2.28821,21.50919-1.83057,25.628-1.83057,25.628Z" transform="translate(-208.03614 -15.63315)" fill="#2f2e41"/><path d="M722.915,328.74392s-21.50918-5.94935-23.33975,6.86464.45764,45.76422,5.49171,58.12056S727.49142,446.358,727.49142,446.358s31.57731,40.27252,32.95024,49.883,8.23756,19.67862,8.23756,19.67862L790.646,501.73269l-43.01837-72.76512-18.76334-50.34064S736.64426,332.8627,722.915,328.74392Z" transform="translate(-208.03614 -15.63315)" fill="#d0cde1"/><path d="M807.12117,330.57449l10.06813,2.28821s9.15284,39.35724,5.4917,60.40878-4.11878,28.37382-4.11878,28.37382l-3.20349,59.95113s.91528,38.44195-5.49171,32.4926-19.221-8.6952-19.221-8.6952,1.37292-16.93277,6.407-21.05155c0,0,5.94935-31.57731,2.28821-45.30658S807.12117,330.57449,807.12117,330.57449Z" transform="translate(-208.03614 -15.63315)" fill="#d0cde1"/><path d="M810.7823,374.96579,799.11243,442.468l-7.09346-2.97468,12.35634-64.52755-13.23956-30.66661-11.53256-26.70342c2.67714,2.14635,5.45506,4.12792,8.06818,5.87612l7.02485,15.65137Z" transform="translate(-208.03614 -15.63315)" fill="#2f2e41"/><polygon points="568.236 236.855 547.372 225.926 518.559 230.397 512.598 256.726 527.437 256.155 531.583 246.482 531.583 255.996 538.43 255.732 542.404 240.332 544.888 256.726 569.23 256.229 568.236 236.855" fill="#2f2e41"/><ellipse cx="527.01932" cy="796.37357" rx="14.21975" ry="5.3324" fill="#2f2e41"/><ellipse cx="623.0026" cy="796.37357" rx="14.21975" ry="5.3324" fill="#2f2e41"/><path d="M471.5819,664.42784a99.80371,99.80371,0,0,1-98.79146,5.75454l2.20106-4.48976A95.5,95.5,0,1,0,321.647,582.98325l-4.99791.15331A100.50454,100.50454,0,1,1,471.5819,664.42784Z" transform="translate(-208.03614 -15.63315)" fill="#fff"/><path d="M426.354,574.00832c-14.78539,3.27254-34.46288,5.267-48.8008,3.18441l17.999,13.70676L345.16364,623.3983l2.71005,4.20186,50.38869-32.49887,5.06542,22.05426C407.34427,603.235,417.27721,586.13185,426.354,574.00832Z" transform="translate(-208.03614 -15.63315)" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/src/assets/svg/undraw_secure_login_pdn4.svg b/src/assets/svg/undraw_secure_login_pdn4.svg
new file mode 100644
index 0000000..a36d53c
--- /dev/null
+++ b/src/assets/svg/undraw_secure_login_pdn4.svg
@@ -0,0 +1 @@
+<svg id="a5c16198-98a1-478b-8909-43624583dcf2" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="793" height="551.73152" viewBox="0 0 793 551.73152"><ellipse cx="158" cy="539.73152" rx="158" ry="12" fill="#e6e6e6"/><path d="M324.27227,296.55377c27.49676-11.6953,61.74442-4.28528,95.19092.85757.31124-6.228,4.08385-13.80782.132-18.15284-4.80115-5.2788-4.35917-10.82529-1.47008-16.40375,7.38788-14.265-3.1969-29.44375-13.88428-42.0647a23.66937,23.66937,0,0,0-19.75537-8.29179l-19.7975,1.41411A23.70939,23.70939,0,0,0,343.635,230.85851v0c-4.72724,6.42917-7.25736,12.84055-5.66438,19.21854-7.08065,4.83882-8.27029,10.67977-5.08851,17.2644,2.698,4.14592,2.66928,8.18161-.12275,12.1056a55.89079,55.89079,0,0,0-8.31011,16.5061Z" transform="translate(-203.5 -174.13424)" fill="#2f2e41"/><path d="M977.70889,651.09727H417.29111A18.79111,18.79111,0,0,1,398.5,632.30616h0q304.727-35.41512,598,0h0A18.79111,18.79111,0,0,1,977.70889,651.09727Z" transform="translate(-203.5 -174.13424)" fill="#2f2e41"/><path d="M996.5,633.41151l-598-1.10536,69.30611-116.61553.3316-.55268V258.13057a23.7522,23.7522,0,0,1,23.75418-23.75418H899.792a23.7522,23.7522,0,0,1,23.75418,23.75418V516.90649Z" transform="translate(-203.5 -174.13424)" fill="#3f3d56"/><path d="M491.35028,250.95679a7.74623,7.74623,0,0,0-7.73753,7.73753V493.03073a7.74657,7.74657,0,0,0,7.73753,7.73752H903.64972a7.74691,7.74691,0,0,0,7.73753-7.73752V258.69432a7.74657,7.74657,0,0,0-7.73753-7.73753Z" transform="translate(-203.5 -174.13424)" fill="#fff"/><path d="M493.07794,531.71835a3.32522,3.32522,0,0,0-3.01275,1.93006l-21.35537,46.42514a3.31594,3.31594,0,0,0,3.01221,4.7021H920.81411a3.3157,3.3157,0,0,0,2.96526-4.79925L900.5668,533.55126a3.29926,3.29926,0,0,0-2.96526-1.83291Z" transform="translate(-203.5 -174.13424)" fill="#2f2e41"/><circle cx="492.34196" cy="67.97967" r="4.97412" fill="#fff"/><path d="M651.69986,593.61853a3.32114,3.32114,0,0,0-3.20165,2.4536l-5.35679,19.89649a3.31576,3.31576,0,0,0,3.20166,4.17856h101.874a3.31531,3.31531,0,0,0,3.13257-4.40093l-6.88691-19.89649a3.31784,3.31784,0,0,0-3.13366-2.23123Z" transform="translate(-203.5 -174.13424)" fill="#2f2e41"/><polygon points="720.046 337.135 720.046 341.556 264.306 341.556 264.649 341.004 264.649 337.135 720.046 337.135" fill="#2f2e41"/><circle cx="707.33457" cy="77.37523" r="77.37523" fill="#6c63ff"/><path d="M942.89,285.223H878.77911a4.42582,4.42582,0,0,1-4.42144-4.42145V242.11391a4.42616,4.42616,0,0,1,4.42144-4.42144H942.89a4.42616,4.42616,0,0,1,4.42144,4.42144v38.68761A4.42582,4.42582,0,0,1,942.89,285.223Zm-64.11091-43.10906v38.68761h64.11415L942.89,242.11391Z" transform="translate(-203.5 -174.13424)" fill="#fff"/><path d="M930.73105,242.11391h-39.793V224.42814c0-12.80987,8.36792-22.10721,19.89649-22.10721s19.89648,9.29734,19.89648,22.10721Zm-35.37153-4.42144h30.95009V224.42814c0-10.413-6.36338-17.68576-15.475-17.68576s-15.47505,7.27281-15.47505,17.68576Z" transform="translate(-203.5 -174.13424)" fill="#fff"/><circle cx="707.33457" cy="86.21811" r="4.42144" fill="#fff"/><path d="M856.81994,421.28372H538.18006a5.90767,5.90767,0,0,1-5.90073-5.90073V336.342a5.90767,5.90767,0,0,1,5.90073-5.90072H856.81994a5.90767,5.90767,0,0,1,5.90073,5.90072V415.383A5.90767,5.90767,0,0,1,856.81994,421.28372Zm-318.63988-88.4821a3.5443,3.5443,0,0,0-3.54043,3.54043V415.383a3.54431,3.54431,0,0,0,3.54043,3.54044H856.81994a3.54431,3.54431,0,0,0,3.54043-3.54044V336.342a3.5443,3.5443,0,0,0-3.54043-3.54043Z" transform="translate(-203.5 -174.13424)" fill="#e6e6e6"/><circle cx="384.19021" cy="198.69546" r="24.03645" fill="#e6e6e6"/><path d="M643.203,356.80541a4.00608,4.00608,0,1,0,0,8.01215H832.06074a4.00607,4.00607,0,0,0,0-8.01215Z" transform="translate(-203.5 -174.13424)" fill="#e6e6e6"/><path d="M643.203,380.84186a4.00607,4.00607,0,1,0,0,8.01214H724.469a4.00607,4.00607,0,1,0,0-8.01214Z" transform="translate(-203.5 -174.13424)" fill="#e6e6e6"/><path d="M467.022,382.46241,408.1189,413.778l-.74561-26.09629c19.22553-3.20948,37.51669-8.7974,54.42941-17.8946l6.1605-15.22008a10.31753,10.31753,0,0,1,17.53643-2.67788l0,0a10.31753,10.31753,0,0,1-.90847,14.06885Z" transform="translate(-203.5 -174.13424)" fill="#ffb8b8"/><path d="M323.09819,563.26707v0a11.57378,11.57378,0,0,1,1.46928-9.36311l12.93931-19.85777a22.61221,22.61221,0,0,1,29.335-7.73927h0c-5.438,9.25647-4.67994,17.37679,1.87806,24.43365a117.63085,117.63085,0,0,0-27.93606,19.04492A11.57386,11.57386,0,0,1,323.09819,563.26707Z" transform="translate(-203.5 -174.13424)" fill="#2f2e41"/><path d="M469.70475,537.30274l0,0a22.20314,22.20314,0,0,1-18.87085,10.77909l-85.96027.65122-3.728-21.62264,38.026-11.18413-32.06116-24.60507L402.154,450.31277l63.65,59.32431A22.20317,22.20317,0,0,1,469.70475,537.30274Z" transform="translate(-203.5 -174.13424)" fill="#2f2e41"/><path d="M351.45266,685.17939H331.32124c-18.07509-123.89772-36.47383-248.14186,17.8946-294.51529l64.12231,10.43852L405.13646,455.532l-35.7892,41.00845Z" transform="translate(-203.5 -174.13424)" fill="#2f2e41"/><path d="M369.14917,713.24594h0a11.57381,11.57381,0,0,1-9.3632-1.46873l-21.85854-2.93814a22.61221,22.61221,0,0,1-7.741-29.33451v0c9.2568,5.43749,17.37707,4.67891,24.43354-1.8795,4.98593,10.06738,13.20093,9.45331,21.04657,17.93494A11.57385,11.57385,0,0,1,369.14917,713.24594Z" transform="translate(-203.5 -174.13424)" fill="#2f2e41"/><path d="M399.1716,307.90158l-37.28042-8.94731c6.19168-12.6739,6.70155-26.77618,3.728-41.75406l25.35068-.74561C391.76421,275.08,394.16732,292.48081,399.1716,307.90158Z" transform="translate(-203.5 -174.13424)" fill="#ffb8b8"/><path d="M409.41752,423.55243c-27.13873,18.49308-46.31418.63272-60.94729-26.92346,2.03338-16.86188-1.259-37.04061-7.35672-58.96635a40.13762,40.13762,0,0,1,24.50567-48.40124h0l32.06116,13.421c27.22362,22.19038,32.582,46.227,22.36825,71.5784Z" transform="translate(-203.5 -174.13424)" fill="#6c63ff"/><path d="M331.32124,326.54178,301.4969,342.19956l52.9382,31.31555,7.366,18.16951a9.63673,9.63673,0,0,1-5.78925,12.73088h0a9.63673,9.63673,0,0,1-12.76159-8.54442l-.74489-12.66307-67.2838-22.20366a15.73306,15.73306,0,0,1-9.87265-9.61147v0a15.733,15.733,0,0,1,5.90262-18.30258l54.10485-37.11845Z" transform="translate(-203.5 -174.13424)" fill="#ffb8b8"/><path d="M361.14557,329.52422c-12.43861-5.4511-23.74934.47044-38.026,5.21926l-2.23683-39.51725c14.17612-7.55568,27.69209-9.59281,40.26285-3.728Z" transform="translate(-203.5 -174.13424)" fill="#6c63ff"/><circle cx="172.52496" cy="78.09251" r="23.80211" fill="#ffb8b8"/><path d="M404.5,249.22353c-23.56616,2.30811-41.52338-1.54606-53-12.52007v-8.8377h51Z" transform="translate(-203.5 -174.13424)" fill="#2f2e41"/></svg>
\ No newline at end of file
diff --git a/src/components/auth/authHeader.js b/src/components/auth/authHeader.js
new file mode 100644
index 0000000..4779a33
--- /dev/null
+++ b/src/components/auth/authHeader.js
@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import blueLogo from '../../assets/img/logo_blue.png';
+import whiteLogo from '../../assets/img/logo_white.png';
+import '../../assets/css/auth/authHeader.css';
+
+export default class AuthHeader extends Component {
+  render = () => (
+      <header className="header">
+      <nav className="navbar fixed-top navbar-expand-lg navbar-light py-3">
+        <div className="container-fluid">
+          <Link to="/" alt="logo" className="navbar-brand">
+            <img
+              src={blueLogo}
+              alt="logo"
+              width="25"
+              className="mr-0 d-none d-lg-inline"
+            />
+            <img
+              src={whiteLogo}
+              alt="logo"
+              width="75"
+              className="mr-0 d-none d-sm-block d-lg-none"
+            />
+            <img
+              src={whiteLogo}
+              alt="logo"
+              width="50"
+              className="mr-0 d-sm-none"
+            />
+            <span
+              className="lead font-weight-bold text-lg-primary d-none d-lg-inline">edukolab</span>
+          </Link>
+        </div>
+      </nav>
+    </header>
+  )
+}
diff --git a/src/components/auth/authRedirect.js b/src/components/auth/authRedirect.js
new file mode 100644
index 0000000..818b82d
--- /dev/null
+++ b/src/components/auth/authRedirect.js
@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Redirect } from 'react-router-dom';
+
+class AuthRedirect extends Component {
+  static propTypes = { auth: PropTypes.object, type: PropTypes.string };
+
+  render = () => {
+    const { auth, type } = this.props;
+
+    if (type === 'logout') {
+      return auth.isSignedIn ? '' : <Redirect to="/" />;
+    }
+    return auth.isSignedIn ? <Redirect to="/" /> : '';
+  };
+}
+
+const mapStateToProps = ({ auth }) => ({ auth });
+
+export default connect(mapStateToProps)(AuthRedirect);
diff --git a/src/components/auth/login/login.js b/src/components/auth/login/login.js
new file mode 100644
index 0000000..168bb59
--- /dev/null
+++ b/src/components/auth/login/login.js
@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFacebookF } from '@fortawesome/free-brands-svg-icons';
+import '../../../assets/css/auth/auth.css';
+import { connect } from 'react-redux';
+import { toast } from 'react-toastify';
+import loginSVG from '../../../assets/svg/undraw_secure_login_pdn4.svg';
+
+import AuthHeader from '../authHeader.js';
+import LoginForm from './loginForm.js';
+import AuthRedirect from '../authRedirect.js';
+import { login } from '../../../redux/actions/auth.js';
+
+import 'react-toastify/dist/ReactToastify.css';
+
+class Login extends Component {
+  INIT = { buttonValue: 'Login' }
+
+  constructor(props) {
+    super(props);
+    this.state = this.INIT;
+  }
+
+  static propTypes = {
+    login: PropTypes.func
+  };
+
+  submit = (authUser) => {
+    this.setState({
+      buttonValue: (
+        <div className="spinner-border text-primary" role="status">
+          <span className="sr-only">Loading...</span>
+        </div>
+      )
+    });
+
+    this.props
+      .login(authUser)
+      .then((res) => toast.success(res && res.data && res.data.message))
+      .catch((err) => {
+        this.setState(this.INIT);
+
+        toast.error(
+          (err && err.response && err.response.data && err.response.data.message)
+            || (err && err.response && err.response.statusText)
+            || 'Network error'
+        );
+      });
+  };
+
+  render = () => (
+    <>
+      <AuthRedirect />
+      <AuthHeader />
+      <div id="authContainer" className="container-fluid h-100">
+        <div className="row h-100 align-items-center py-0">
+          <div className="d-none d-lg-flex col auth-svg auth-holder">
+            <img src={loginSVG} alt="" className="img-fluid d-none d-md-block" />
+          </div>
+
+          <div className="col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-0 form-container-holder auth-holder">
+            <LoginForm onSubmit={this.submit} buttonValue={this.state.buttonValue} />
+            <div className="social-auth">
+              <p className="section-header">or login with</p>
+              <div className="social-auth-facebook">
+                <FontAwesomeIcon icon={faFacebookF} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default connect(null, { login })(Login);
diff --git a/src/components/auth/login/loginForm.js b/src/components/auth/login/loginForm.js
new file mode 100644
index 0000000..f7583e1
--- /dev/null
+++ b/src/components/auth/login/loginForm.js
@@ -0,0 +1,152 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCheckCircle, faEnvelope } from '@fortawesome/free-regular-svg-icons';
+
+import { faLock, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { Link } from 'react-router-dom';
+import { Field, reduxForm } from 'redux-form';
+
+import '../../../assets/css/auth/authForm.css';
+
+class LoginForm extends Component {
+  static propTypes = {
+    handleSubmit: PropTypes.func,
+    buttonValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
+  };
+
+  renderValidateIcon = (touched, error) => {
+    let className = null;
+    let icon = null;
+    if (touched) {
+      className = error === undefined ? 'text-success' : 'text-danger';
+      icon = error === undefined ? faCheckCircle : faTimes;
+
+      return <FontAwesomeIcon className={className} icon={icon} />;
+    }
+    return false;
+  };
+
+  renderField = ({
+    input, label, type, placeholder, icon, action, meta: { touched, error, warning }
+  }) => (
+    <div className="col-12 form-holder">
+      <div className="d-flex align-items-center">
+        <div className="form-icon">
+          <FontAwesomeIcon icon={icon} />
+        </div>
+        <div className="flex-grow-1">
+          <label htmlFor={`${action}${input.name}`}>{label}</label>
+          <input
+            {...input}
+            component="input"
+            type={type}
+            className="form-control"
+            id={`${action}${input.name}`}
+            placeholder={placeholder}
+            autoComplete="off"
+          />
+        </div>
+        <div className="form-validation-response">{this.renderValidateIcon(touched, error)}</div>
+      </div>
+      {touched
+        ? touched && error && <small className="form-info text-danger">{error}</small>
+        : warning && <small className="form-info text-info">{warning}</small>}
+    </div>
+  );
+
+  render() {
+    const { handleSubmit, buttonValue } = this.props;
+
+    return (
+      <form onSubmit={handleSubmit} autoComplete="off">
+        <h2 className="mb-0">Welcome Back</h2>
+        <p>
+          Login to EduKolab{' '}
+          <span role="img" aria-label="smiley-face-wink">
+            &#128521;
+          </span>
+        </p>
+        <div className="form-row">
+          <Field
+            action="login"
+            name="email"
+            type="text"
+            component={this.renderField}
+            label="email"
+            placeholder="e.g: 08103459871"
+            icon={faEnvelope}
+          />
+        </div>
+        <div className="form-row">
+          <Field
+            action="login"
+            name="password"
+            type="password"
+            component={this.renderField}
+            label="password"
+            placeholder="Type Here"
+            icon={faLock}
+          />
+        </div>
+
+        <div className="button-group">
+          <button className="btn btn-auth btn-auth-main" type="submit">
+            {buttonValue}
+          </button>
+          <Link className="btn btn-auth btn-auth-side" to="/register" role="button">
+            Create Account
+          </Link>
+        </div>
+      </form>
+    );
+  }
+}
+
+const warn = () => {
+  const warnings = {
+    password: 'Forgot password?'
+  };
+
+  return warnings;
+};
+
+const validate = (authUser) => {
+  const errors = {};
+  if (!authUser.fName) {
+    errors.fName = 'First Name is required';
+  }
+  if (!authUser.lName) {
+    errors.lName = 'Family Name is required';
+  }
+
+  if (!authUser.email) {
+    errors.email = 'Required';
+  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(authUser.email)) {
+    errors.email = 'A valid email address or phone number is required';
+  }
+
+  if (!authUser.password) {
+    errors.password = 'Required';
+  } else if (!/\d/.test(authUser.password)) {
+    errors.password = 'Password must contain a number';
+  } else if (!/[A-Z]/.test(authUser.password)) {
+    errors.password = 'Password must contain an upperCase letter';
+  } else if (authUser.password.length < 6) {
+    errors.password = 'Password must be at least 6 characters long';
+  }
+
+  if (!authUser.cpassword) {
+    errors.cpassword = 'Required';
+  } else if (authUser.cpassword !== authUser.password) {
+    errors.cpassword = 'Passwords must match';
+  }
+
+  if (!authUser.role) {
+    errors.age = 'Required';
+  }
+
+  return errors;
+};
+
+export default reduxForm({ form: 'loginForm', validate, warn })(LoginForm);
diff --git a/src/components/auth/logout/logout.js b/src/components/auth/logout/logout.js
new file mode 100644
index 0000000..1ab3201
--- /dev/null
+++ b/src/components/auth/logout/logout.js
@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+import { PropTypes } from 'prop-types';
+import { connect } from 'react-redux';
+import { logout } from '../../../redux/actions/auth.js';
+import AuthRedirect from '../authRedirect.js';
+
+class Logout extends Component {
+  static propTypes = {
+    logout: PropTypes.func
+  };
+
+  render = () => <AuthRedirect type="logout" />;
+
+  componentDidMount = () => this.props.logout();
+}
+
+export default connect(null, { logout })(Logout);
diff --git a/src/components/home/home.js b/src/components/home/home.js
new file mode 100644
index 0000000..1809fd6
--- /dev/null
+++ b/src/components/home/home.js
@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+
+import PropTypes from 'prop-types';
+
+class Home extends Component {
+  static propTypes = {
+    auth: PropTypes.object
+  };
+
+  renderAuthButton = ({ isSignedIn }) => (isSignedIn ? <Link to="/logout">Logout</Link> : <Link to="/login">Login</Link>);
+
+  render = () => (
+    <>
+      <div>Welcome Home</div>
+      {this.renderAuthButton(this.props.auth)}
+    </>
+  );
+}
+
+const mapStateToProps = ({ auth }) => ({ auth });
+
+export default connect(mapStateToProps)(Home);
diff --git a/src/index.js b/src/index.js
index e423a10..3286872 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,12 +1,23 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './app.js';
+import { Provider } from 'react-redux';
+
+// jQuery & BootStrap
+import 'jquery/dist/jquery.min';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap/dist/js/bootstrap.min';
+import 'popper.js/dist/popper.min';
+
 import * as serviceWorker from './serviceWorker.js';
+// Import redux store
+import store from './redux/store.js';
+
+import App from './app.js';
 
 ReactDOM.render(
-  <React.StrictMode>
+  <Provider store={store}>
     <App />
-  </React.StrictMode>,
+  </Provider>,
   document.getElementById('root')
 );
 
diff --git a/src/redux/actions/auth.js b/src/redux/actions/auth.js
new file mode 100644
index 0000000..f62e1c9
--- /dev/null
+++ b/src/redux/actions/auth.js
@@ -0,0 +1,16 @@
+import api from '../../api/api.js';
+import userOneGet from './user.js';
+import store from '../store.js';
+
+export const login = (loginData) => (dispatch) => {
+  const res = dispatch({
+    type: 'LOGIN',
+    payload: api.post('/auth', loginData)
+  });
+
+  return res.then(() => dispatch(userOneGet(store.getState().auth.userID)));
+};
+
+export const logout = () => ({
+  type: 'LOGOUT'
+});
diff --git a/src/redux/actions/types/authTypes.js b/src/redux/actions/types/authTypes.js
new file mode 100644
index 0000000..530ff1c
--- /dev/null
+++ b/src/redux/actions/types/authTypes.js
@@ -0,0 +1,8 @@
+export default {
+  LOGIN: {
+    LOGIN_PENDING: 'LOGIN_PENDING',
+    LOGIN_FULFILLED: 'LOGIN_FULFILLED',
+    LOGIN_REJECTED: 'LOGIN_REJECTED'
+  },
+  LOGOUT: 'LOGOUT'
+};
diff --git a/src/redux/actions/user.js b/src/redux/actions/user.js
new file mode 100644
index 0000000..6765c02
--- /dev/null
+++ b/src/redux/actions/user.js
@@ -0,0 +1,6 @@
+import api from '../../api/api.js';
+
+export default (userID) => ({
+  type: 'USER_ONE_GET',
+  payload: api.get(`/user/${userID}`)
+});
diff --git a/src/redux/reducers/authReducer.js b/src/redux/reducers/authReducer.js
new file mode 100644
index 0000000..573c06d
--- /dev/null
+++ b/src/redux/reducers/authReducer.js
@@ -0,0 +1,21 @@
+const INIT = {
+  isSignedIn: false,
+  token: null,
+  userID: null
+};
+
+export default (state = INIT, action) => {
+  const responseData = action.payload && action.payload.data && action.payload.data.data;
+
+  return (
+    {
+      LOGIN_FULFILLED: {
+        ...state,
+        isSignedIn: true,
+        token: responseData && responseData.token,
+        userID: responseData && responseData.id
+      },
+      LOGOUT: INIT
+    }[action.type] || state
+  );
+};
diff --git a/src/redux/reducers/rootReducer.js b/src/redux/reducers/rootReducer.js
new file mode 100644
index 0000000..54281bf
--- /dev/null
+++ b/src/redux/reducers/rootReducer.js
@@ -0,0 +1,10 @@
+import { combineReducers } from 'redux';
+import { reducer as formReducer } from 'redux-form';
+import authReducer from './authReducer.js';
+import userReducer from './userReducer.js';
+
+export default combineReducers({
+  auth: authReducer,
+  form: formReducer,
+  user: userReducer
+});
diff --git a/src/redux/reducers/userReducer.js b/src/redux/reducers/userReducer.js
new file mode 100644
index 0000000..e0e8dfd
--- /dev/null
+++ b/src/redux/reducers/userReducer.js
@@ -0,0 +1,18 @@
+const INIT = {
+  all: [],
+  selected: {}
+};
+
+export default (state = INIT, action) => {
+  const responseData = action.payload && action.payload.data && action.payload.data.data;
+
+  return (
+    {
+      USER_ONE_GET_FULFILLED: {
+        ...state,
+        selected: responseData
+      },
+      LOGOUT: INIT
+    }[action.type] || state
+  );
+};
diff --git a/src/redux/store.js b/src/redux/store.js
new file mode 100644
index 0000000..453beff
--- /dev/null
+++ b/src/redux/store.js
@@ -0,0 +1,14 @@
+import { createStore, applyMiddleware } from 'redux';
+import promiseMiddleware from 'redux-promise-middleware';
+import thunk from 'redux-thunk';
+import { composeWithDevTools } from 'redux-devtools-extension';
+import { save, load } from 'redux-localstorage-simple';
+import reducers from './reducers/rootReducer.js';
+
+const createStoreWithMiddleware = composeWithDevTools(
+  applyMiddleware(promiseMiddleware, thunk, save(['auth', 'user']))
+)(createStore);
+
+const store = createStoreWithMiddleware(reducers, load());
+
+export default store;