diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 17286e2..d2622be 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -3,13 +3,17 @@ import React, {FC} from 'react';
 import {Link} from 'react-router-dom';
 import * as ROUTES from '../constants/routes';
 //Redux
+import {compose} from '@reduxjs/toolkit';
 import {connect} from 'react-redux';
+import {withFirebase, WithFirebaseProps} from 'react-redux-firebase';
 import {selectProfile} from '../store/firebase';
 // Style
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faCode, faSignOutAlt, faUser} from '@fortawesome/free-solid-svg-icons';
+// Typing
+import User from '../models/User';
 
-interface IProps {
+interface IProps extends WithFirebaseProps<User> {
   isEmpty: boolean;
   isLoaded: boolean;
 }
@@ -17,7 +21,7 @@ interface IProps {
 /**
  * Main Navbar serves navigation routes.
  */
-const NavBar: FC<IProps> = ({isEmpty, isLoaded}) => {
+const NavBar: FC<IProps> = ({firebase, isEmpty, isLoaded}) => {
   const publicLinks = (
     <ul data-testid="publicLinks">
       <li>
@@ -57,7 +61,11 @@ const NavBar: FC<IProps> = ({isEmpty, isLoaded}) => {
         </Link>
       </li>
       <li>
-        <Link to={ROUTES.SIGN_IN} data-testid="logoutLink">
+        <Link
+          to={ROUTES.SIGN_IN}
+          data-testid="logoutLink"
+          onClick={() => firebase.logout()}
+        >
           <FontAwesomeIcon icon={faSignOutAlt} />
           <span className="hide-sm"> Log out</span>
         </Link>
@@ -81,4 +89,6 @@ const NavBar: FC<IProps> = ({isEmpty, isLoaded}) => {
 };
 
 /** connect HOC subscribes to the store */
-export default connect(selectProfile)(NavBar);
+
+const enhance = compose<FC>(connect(selectProfile), withFirebase);
+export default enhance(NavBar);
diff --git a/src/pages/SignIn.tsx b/src/pages/SignIn.tsx
index 3bd77da..353c66f 100644
--- a/src/pages/SignIn.tsx
+++ b/src/pages/SignIn.tsx
@@ -5,7 +5,7 @@ import {connect} from 'react-redux';
 import {WithFirebaseProps, withFirebase} from 'react-redux-firebase';
 import {selectProfile} from '../store/firebase';
 // Routing
-import {Link, useHistory, Redirect} from 'react-router-dom';
+import {Link, Redirect} from 'react-router-dom';
 import * as ROUTES from '../constants/routes';
 // Style
 import GoogleButton from 'react-google-button';
@@ -30,7 +30,6 @@ interface IProps extends WithFirebaseProps<User> {
  * Sign in form
  */
 const SignIn: FC<IProps> = ({firebase, isEmpty, isLoaded}) => {
-  const history = useHistory();
   const [error, setError] = useState<any>(null);
 
   // handle form data
diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx
index 2395af9..35166f7 100644
--- a/src/pages/SignUp.tsx
+++ b/src/pages/SignUp.tsx
@@ -1,6 +1,6 @@
 import React, {FC, useState} from 'react';
 // Routing
-import {Link, useHistory, Redirect} from 'react-router-dom';
+import {Link, Redirect} from 'react-router-dom';
 import * as ROUTES from '../constants/routes';
 // Redux
 import {compose} from 'redux';
@@ -32,7 +32,6 @@ interface InitFormData {
  * Sign up form recieves firebase from withFirebase HOC
  */
 const SignUp: FC<IProps> = ({firebase, isEmpty, isLoaded}) => {
-  const history = useHistory();
   const [error, setError] = useState<any>(null);
 
   // handle form data