diff --git a/client/src/App/App.container.jsx b/client/src/App/App.container.jsx
index 37fa0db81..1072fafbe 100644
--- a/client/src/App/App.container.jsx
+++ b/client/src/App/App.container.jsx
@@ -1,6 +1,4 @@
 import React, { Component } from "react";
-import { Mutation, Query } from "react-apollo";
-import { GET_CURRENT_USER, SET_CURRENT_USER } from "../graphql/local.queries";
 
 import App from "./App";
 import Spin from "../components/loading-spinner/loading-spinner.component";
@@ -72,29 +70,17 @@ class AppContainer extends Component {
     }
     middlewares.push(authLink.concat(link));
 
-    const cache = new InMemoryCache({ addTypename: false });
+    const cache = new InMemoryCache();
 
     const client = new ApolloClient({
       link: ApolloLink.from(middlewares),
       cache,
       typeDefs,
-      resolvers,
-      defaultOptions: {
-        watchQuery: {
-          fetchPolicy: "cache-and-network",
-          errorPolicy: "ignore"
-        },
-        query: {
-          fetchPolicy: "cache-and-network",
-          errorPolicy: "all"
-        }
-      }
+      resolvers
     });
 
     client.writeData({
-      data: {
-        ...initialState
-      }
+      data: initialState
     });
 
     try {
@@ -125,24 +111,7 @@ class AppContainer extends Component {
 
     return (
       <ApolloProvider client={client}>
-        <Query query={GET_CURRENT_USER}>
-          {({ loading, error, data: { currentUser } }) => {
-            if (loading) return <Spin />;
-            if (error) return error.message;
-            return (
-              <Mutation mutation={SET_CURRENT_USER}>
-                {setCurrentUser => (
-                  <App
-                    currentUser={currentUser}
-                    setCurrentUser={user => {
-                      setCurrentUser({ variables: { user } });
-                    }}
-                  />
-                )}
-              </Mutation>
-            );
-          }}
-        </Query>
+        <App />
       </ApolloProvider>
     );
   }
diff --git a/client/src/App/App.js b/client/src/App/App.js
index fe7e83e3c..02ebfddcd 100644
--- a/client/src/App/App.js
+++ b/client/src/App/App.js
@@ -1,4 +1,5 @@
-import React from "react";
+import React, { useEffect } from "react";
+import { useApolloClient, useQuery } from "@apollo/react-hooks";
 import { Switch, Route, Redirect } from "react-router-dom";
 import firebase from "../firebase/firebase.utils";
 
@@ -6,32 +7,33 @@ import "./App.css";
 
 //Component Imports
 import LandingPage from "../pages/landing/landing.page";
-import Manage from "../pages/manage/manage.page";
+import ManagePage from "../pages/manage/manage.page";
 import PrivateRoute from "../utils/private-route";
 import SignInPage from "../pages/sign-in/sign-in.page";
 import Unauthorized from "../pages/unauthorized/unauthorized.component";
 
 import { auth } from "../firebase/firebase.utils";
 
-class App extends React.Component {
-  unsubscribeFromAuth = null;
+import { GET_CURRENT_USER } from "../graphql/local.queries";
+import LoadingSpinner from "../components/loading-spinner/loading-spinner.component";
+import AlertComponent from "../components/alert/alert.component";
+import SignOut from "../components/sign-out/sign-out.component";
 
-  componentDidMount() {
-    const { setCurrentUser } = this.props;
-    console.log("DIDMOUNT");
-    this.unsubscribeFromAuth = auth.onAuthStateChanged(async user => {
-      console.log("Current User:", user);
+import { UPSERT_USER } from "../graphql/user.queries";
+
+export default () => {
+  const apolloClient = useApolloClient();
+
+  useEffect(() => {
+    //Run the auth code only on the first render.
+    const unsubscribeFromAuth = auth.onAuthStateChanged(async user => {
       if (user) {
-        const token = await user.getIdToken();
+        let token;
+        token = await user.getIdToken();
         const idTokenResult = await user.getIdTokenResult();
         const hasuraClaim =
           idTokenResult.claims["https://hasura.io/jwt/claims"];
         if (hasuraClaim) {
-          setCurrentUser({
-            email: user.email,
-            displayName: user.displayName,
-            token
-          });
         } else {
           // Check if refresh is required.
           const metadataRef = firebase
@@ -39,62 +41,71 @@ class App extends React.Component {
             .ref("metadata/" + user.uid + "/refreshTime");
           metadataRef.on("value", async () => {
             // Force refresh to pick up the latest custom claims changes.
-            const token = await user.getIdToken(true);
-            setCurrentUser({
-              email: user.email,
-              displayName: user.displayName,
-              token
-            });
+            token = await user.getIdToken(true);
           });
         }
-        // console.log('###Debug (app.js)| Token', token)
+        apolloClient.writeData({
+          data: {
+            currentUser: {
+              email: user.email,
+              displayName: user.displayName,
+              token,
+              uid: user.uid,
+              photoUrl: user.photoURL,
+              __typename: "currentUser"
+            }
+          }
+        });
         //add the bearer token to the headers.
         localStorage.setItem("token", token);
+
+        apolloClient
+          .mutate({
+            mutation: UPSERT_USER,
+            variables: { authEmail: user.email, authToken: user.uid }
+          })
+          .then(r => console.log("Successful Upsert", r))
+          .catch(error => {
+            console.log("Upsert error!!!!", error);
+          });
       } else {
-        setCurrentUser({
-          email: null,
-          displayName: null,
-          token: null
-        });
+        apolloClient.writeData({ data: { currentUser: null } });
         localStorage.removeItem("token");
       }
     });
-  }
 
-  componentWillUnmount() {
-    this.unsubscribeFromAuth();
-  }
+    return function cleanup() {
+      unsubscribeFromAuth();
+    };
+  }, [apolloClient]);
 
-  render() {
-    console.log(
-      "###Debug (App.js) | Props Current User: ",
-      this.props.currentUser.email
-    );
-    return (
-      <div>
-        <Switch>
-          <Route exact path="/" component={LandingPage} />
-          <Route exact path="/unauthorized" component={Unauthorized} />
-          <Route
-            exact
-            path="/signin"
-            render={() =>
-              this.props.currentUser.email != null ? (
-                <Redirect to="/manage" />
-              ) : (
-                <SignInPage />
-              )
-            }
-          />
-          <PrivateRoute
-            isAuthorized={this.props.currentUser.email != null}
-            path="/manage"
-            component={Manage}
-          />
-        </Switch>
-      </div>
-    );
-  }
-}
-
-export default App;
+  const HookCurrentUser = useQuery(GET_CURRENT_USER);
+  if (HookCurrentUser.loading) return <LoadingSpinner />;
+  if (HookCurrentUser.error)
+    return <AlertComponent message={HookCurrentUser.error.message} />;
+  return (
+    <div>
+      <SignOut />
+      <Switch>
+        <Route exact path="/" component={LandingPage} />
+        <Route exact path="/unauthorized" component={Unauthorized} />
+        <Route
+          exact
+          path="/signin"
+          render={() =>
+            HookCurrentUser.data.currentUser ? (
+              <Redirect to="/manage" />
+            ) : (
+              <SignInPage />
+            )
+          }
+        />
+        <PrivateRoute
+          isAuthorized={HookCurrentUser.data.currentUser ? true : false}
+          path="/manage"
+          component={ManagePage}
+        />
+      </Switch>
+    </div>
+  );
+};
diff --git a/client/src/components/alert/alert.component.jsx b/client/src/components/alert/alert.component.jsx
new file mode 100644
index 000000000..e620c862b
--- /dev/null
+++ b/client/src/components/alert/alert.component.jsx
@@ -0,0 +1,7 @@
+import { Alert } from "antd";
+
+import React from "react";
+
+export default function AlertComponent({ props }) {
+  return <Alert {...props} />;
+}
diff --git a/client/src/components/header/header.component.jsx b/client/src/components/header/header.component.jsx
index 01c667e5e..d864afc0b 100644
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -3,20 +3,41 @@ import { Link } from "react-router-dom";
 import { Menu, Icon } from "antd";
 import "./header.styles.scss";
 import SignOut from "../sign-out/sign-out.component";
+import { useQuery } from "react-apollo";
+import {
+  GET_LANDING_NAV_ITEMS,
+  GET_NAV_ITEMS
+} from "../../graphql/metadata.queries";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import AlertComponent from "../alert/alert.component";
+
+export default ({ landingHeader }) => {
+  let HookNavItems;
+
+  if (landingHeader) {
+    HookNavItems = useQuery(GET_LANDING_NAV_ITEMS);
+  } else {
+    HookNavItems = useQuery(GET_NAV_ITEMS);
+  }
 
-export default ({ landingHeader, selectedNavItem, navItems }) => {
   const handleClick = e => {
     console.log("click ", e);
     // this.setState({
     //   current: e.key
     // });
   };
+
+  if (HookNavItems.loading) return <LoadingSpinner />;
+  if (HookNavItems.error)
+    return <AlertComponent message={HookNavItems.error.message} />;
+
+  const navItems = JSON.parse(HookNavItems.data.masterdata_by_pk.value);
   return (
     <Menu
       theme="dark"
       className="header"
       onClick={handleClick}
-      selectedKeys={selectedNavItem}
+      selectedKeys="Home"
       mode="horizontal"
     >
       {navItems.map(navItem => (
diff --git a/client/src/components/header/header.container.jsx b/client/src/components/header/header.container.jsx
deleted file mode 100644
index e0ec170a3..000000000
--- a/client/src/components/header/header.container.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from "react";
-import { Query } from "react-apollo";
-
-import { Alert } from "antd";
-import Header from "./header.component";
-
-import Spin from "../loading-spinner/loading-spinner.component";
-// import Skeleton from "../loading-skeleton/loading-skeleton.component";
-
-import {
-  GET_SELECTED_NAV_ITEM,
-  GET_LANDING_NAV_ITEMS,
-  GET_NAV_ITEMS
-} from "../../graphql/metadata.queries";
-
-const HeaderContainer = ({ landingHeader }) => {
-  let GET_METADATA;
-  if (landingHeader) GET_METADATA = GET_LANDING_NAV_ITEMS;
-  else GET_METADATA = GET_NAV_ITEMS;
-
-  return (
-    <Query query={GET_SELECTED_NAV_ITEM}>
-      {({ loading, error, data: { selectedNavItem } }) => {
-        return (
-          <Query query={GET_METADATA}>
-            {({ loading, error, data }) => {
-              if (loading) return <Spin />;
-              if (error) return <Alert message={error.message} />;
-              const parsedNavItems = JSON.parse(data.masterdata_by_pk.value);
-              return (
-                <Header
-                  landingHeader={landingHeader}
-                  selectedNavItem={selectedNavItem}
-                  navItems={parsedNavItems}
-                />
-              );
-            }}
-          </Query>
-        );
-      }}
-    </Query>
-  );
-};
-
-export default HeaderContainer;
diff --git a/client/src/components/sign-in-form/sign-in-form.component.jsx b/client/src/components/sign-in-form/sign-in-form.component.jsx
index c1bf32ec1..2a38f481d 100644
--- a/client/src/components/sign-in-form/sign-in-form.component.jsx
+++ b/client/src/components/sign-in-form/sign-in-form.component.jsx
@@ -2,7 +2,6 @@ import React from "react";
 import { auth } from "../../firebase/firebase.utils";
 import { Form, Icon, Input, Button, Alert } from "antd";
 
-import { UPSERT_USER } from "../../graphql/user.queries";
 class SignInForm extends React.Component {
   constructor() {
     super();
@@ -24,16 +23,6 @@ class SignInForm extends React.Component {
             password
           );
 
-          apolloClient
-            .mutate({
-              mutation: UPSERT_USER,
-              variables: { authEmail: user.email, authToken: user.uid }
-            })
-            .then(r => console.log("Successful Upsert", r))
-            .catch(error => {
-              console.log("Upsert error!!!!", error);
-            });
-
           this.props.form.resetFields();
         } catch (error) {
           this.setState({ ...this.state, errorMessage: error.message });
diff --git a/client/src/components/sign-in-form/sign-in-form.container.jsx b/client/src/components/sign-in-form/sign-in-form.container.jsx
index 87a6a21be..85ca228d4 100644
--- a/client/src/components/sign-in-form/sign-in-form.container.jsx
+++ b/client/src/components/sign-in-form/sign-in-form.container.jsx
@@ -15,7 +15,7 @@ export default function SignInFormContainer() {
           <Layout>
             <Content>
               <Row align="middle">
-                <Col span="2" offset="8">
+                <Col span={2} offset={8}>
                   <div>
                     <img
                       src={Logo}
@@ -25,12 +25,12 @@ export default function SignInFormContainer() {
                     />
                   </div>
                 </Col>
-                <Col span="6">
+                <Col span={6}>
                   <Typography.Title>Bodyshop.app</Typography.Title>
                 </Col>
               </Row>
               <Row>
-                <Col span="8" offset="8">
+                <Col span={8} offset={8}>
                   <SignInFormComponent apolloClient={client} />
                 </Col>
               </Row>
diff --git a/client/src/components/sign-out/sign-out.component.jsx b/client/src/components/sign-out/sign-out.component.jsx
index 9bb3627d0..edfcd4e9a 100644
--- a/client/src/components/sign-out/sign-out.component.jsx
+++ b/client/src/components/sign-out/sign-out.component.jsx
@@ -1,15 +1,33 @@
-import React from "react";
+import React, { Component } from "react";
+import { Redirect } from "react-router-dom";
 import firebase from "../../firebase/firebase.utils";
+export default class SignOut extends Component {
+  state = {
+    redirect: false
+  };
 
-export default function SignOut({ match }) {
-  const signOut = async () => {
+  signOut = async () => {
     try {
       await firebase.auth().signOut();
-      console.log("match", match);
+      this.setState({
+        redirect: true
+      });
     } catch (error) {
       console.log(error);
     }
   };
 
-  return <div onClick={signOut}>Sign Out</div>;
+  renderRedirect = () => {
+    if (this.state.redirect) {
+      //return <Redirect to="/signin" />;
+    }
+  };
+  render() {
+    return (
+      <div>
+        {this.renderRedirect()}
+        <div onClick={this.signOut}>Sign Out</div>
+      </div>
+    );
+  }
 }
diff --git a/client/src/graphql/initial-state.js b/client/src/graphql/initial-state.js
index 11b75d57c..817a49928 100644
--- a/client/src/graphql/initial-state.js
+++ b/client/src/graphql/initial-state.js
@@ -1,5 +1,6 @@
 export default {
-  currentUser: { email: null, displayName: null },
+  __typename: "State",
+  currentUser: null,
   selectedNavItem: "Home",
   recentItems: [],
   whiteBoardLeftSiderVisible: true
diff --git a/client/src/graphql/local.queries.js b/client/src/graphql/local.queries.js
index 5e728aeb4..b5f469097 100644
--- a/client/src/graphql/local.queries.js
+++ b/client/src/graphql/local.queries.js
@@ -12,6 +12,10 @@ export const GET_CURRENT_USER = gql`
   {
     currentUser @client {
       email
+      displayName
+      token
+      uid
+      photoUrl
     }
   }
 `;
@@ -20,4 +24,4 @@ export const GET_WHITE_BOARD_LEFT_SIDER_VISIBLE = gql`
   {
     whiteBoardLeftSiderVisible @client
   }
-`;
\ No newline at end of file
+`;
diff --git a/client/src/graphql/metadata.queries.js b/client/src/graphql/metadata.queries.js
index 788dbe049..940210b5b 100644
--- a/client/src/graphql/metadata.queries.js
+++ b/client/src/graphql/metadata.queries.js
@@ -20,11 +20,3 @@ export const GET_SELECTED_NAV_ITEM = gql`
     selectedNavItem @client
   }
 `;
-
-
-
-// export const SET_CURRENT_USER = gql`
-// mutation SetCurrentUser($user User!){
-//   setCurrentUser(currentUser: $user)
-// }
-// `;
diff --git a/client/src/graphql/user.queries.js b/client/src/graphql/user.queries.js
index dd7af55d3..8b697ec52 100644
--- a/client/src/graphql/user.queries.js
+++ b/client/src/graphql/user.queries.js
@@ -6,7 +6,7 @@ export const UPSERT_USER = gql`
       objects: [{ email: $authEmail, authid: $authToken }]
       on_conflict: { constraint: users_pkey, update_columns: [authid] }
     ) {
-      data {
+      returning {
         authid
       }
     }
diff --git a/client/src/pages/landing/landing.page.jsx b/client/src/pages/landing/landing.page.jsx
index f1daa4282..4208fce4c 100644
--- a/client/src/pages/landing/landing.page.jsx
+++ b/client/src/pages/landing/landing.page.jsx
@@ -1,12 +1,12 @@
 import React from "react";
 import { Typography } from "antd";
 
-import HeaderContainer from "../../components/header/header.container";
+import HeaderComponent from "../../components/header/header.component";
 
 export default function LandingPage() {
   return (
     <div>
-      <HeaderContainer landingHeader />
+      <HeaderComponent landingHeader />
       <Typography.Title>
         Welcome to bodyshop.app.
       </Typography.Title>
diff --git a/client/src/pages/manage/manage.page.jsx b/client/src/pages/manage/manage.page.jsx
index 7b7a90ad3..d8038ed46 100644
--- a/client/src/pages/manage/manage.page.jsx
+++ b/client/src/pages/manage/manage.page.jsx
@@ -5,7 +5,7 @@ import { Route } from "react-router";
 import WhiteBoardPage from "../white-board/white-board.page";
 import JobsPage from "../jobs/jobs.page";
 import JobsDetailPageContainer from "../jobs-detail/jobs-detail.page.container";
-import HeaderComponentContainer from "../../components/header/header.container";
+import HeaderComponent from "../../components/header/header.component";
 import FooterComponent from "../../components/footer/footer.component";
 
 import { Layout } from "antd";
@@ -16,7 +16,7 @@ export default function Manage({ match }) {
   return (
     <Layout>
       <Header>
-        <HeaderComponentContainer />
+        <HeaderComponent />
       </Header>
 
       <Content>
diff --git a/client/src/pages/unauthorized/unauthorized.component.jsx b/client/src/pages/unauthorized/unauthorized.component.jsx
index 913be8192..b0a50a3ee 100644
--- a/client/src/pages/unauthorized/unauthorized.component.jsx
+++ b/client/src/pages/unauthorized/unauthorized.component.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Typography } from "antd";
-import HeaderContainer from "../../components/header/header.container";
+import HeaderContainer from "../../components/header/header.component";
 
 export default function Unauthorized() {
   return (
diff --git a/client/src/utils/private-route.js b/client/src/utils/private-route.js
index f7e796e70..9b905e843 100644
--- a/client/src/utils/private-route.js
+++ b/client/src/utils/private-route.js
@@ -1,14 +1,16 @@
 import React from "react";
 import { Route, Redirect } from "react-router-dom";
-export default ({ component: Component, isAuthorized, ...rest }) => (
-  <Route
-    {...rest}
-    render={props =>
-      isAuthorized === true ? (
-        <Component {...props} />
-      ) : (
-        <Redirect to="/unauthorized" />
-      )
-    }
-  />
-);
+export default ({ component: Component, isAuthorized, ...rest }) => {
+  return (
+    <Route
+      {...rest}
+      render={props =>
+        isAuthorized === true ? (
+          <Component {...props} />
+        ) : (
+          <Redirect to="/unauthorized" />
+        )
+      }
+    />
+  );
+};