diff --git a/src/contexts/Auth/AuthState.jsx b/src/contexts/Auth/AuthState.jsx
index c7a904d229c0c1002125e433e998b8d90c74a7e0..05d213c88d2affdee62ea0958e0e4f1619c32d92 100755
--- a/src/contexts/Auth/AuthState.jsx
+++ b/src/contexts/Auth/AuthState.jsx
@@ -31,20 +31,20 @@ function AuthState({ children }) {
       credentials,
       { withCredentials: true }
     );
+    console.log;
     // set current user to login and merge accessToken into currentUser
-    dispatchCurrentUser({ type: USER_ACTIONS.SET, payload: { ...result.data.document } });
-    setAccessToken(result.data.accessToken);
+    dispatchCurrentUser({ type: USER_ACTIONS.SET, payload: { ...result.data.record } });
+    setAccessToken(result.data.token);
     // TODO: don't store accessToken in localStorage, keep in memory only
-    localStorage.setItem("accessToken", JSON.stringify(result.data.accessToken));
+    localStorage.setItem("accessToken", JSON.stringify(result.data.token));
     return result;
   }
 
   // ### HANDLE LOGOUT
   async function logout() {
     dispatchCurrentUser({ type: USER_ACTIONS.DROP });
-    const result = await api.delete(
+    const result = await api.get(
       '/users/logout',
-      { withCredentials: true }
     );
     return result;
   }
diff --git a/src/layouts/partials/navbar/Navbar.jsx b/src/layouts/partials/navbar/Navbar.jsx
index 059023a4e4264b37081ee7c0a4731cc14b88737a..a9ccd8416f5a06cbe91b77612a384221ca1d1abc 100644
--- a/src/layouts/partials/navbar/Navbar.jsx
+++ b/src/layouts/partials/navbar/Navbar.jsx
@@ -14,6 +14,7 @@ function Navbar(props) {
   useEffect(() => {
     // fetch all links for navbars
     const [overall] = sitemap.filter((item) => item.title === 'MenuBar');
+
     // fetch all children from /
     const [home] = overall.children;
 
diff --git a/src/pages/User/Logout.jsx b/src/pages/User/Logout.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..ba40eae6960cca52be5b3c31832393718363c0fc
--- /dev/null
+++ b/src/pages/User/Logout.jsx
@@ -0,0 +1,44 @@
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../../contexts/Auth/AuthState';
+import { mergeBackendValidation, setFlashMsg } from '../../utils/ErrorHandling';
+
+function Logout() {
+  // #################################
+  // HOOKS
+  // #################################
+  // ### CONNECT AUTH CONTEXT
+  const { logout } = useAuth();
+
+  // ### LOGOUT IMMEDIATLY AFTER LOADING
+  useEffect(() => {
+    handleLogout();
+  }, []);
+  // ### ENABLE Redirections
+  const redirect = useNavigate();
+
+  // #################################
+  // FUNCTIONS
+  // #################################
+
+  async function handleLogout() {
+    try {
+      const result = await logout();
+      redirect('/login');
+      // set flash mmessagesg
+      setFlashMsg(result.data?.message);
+    } catch (err) {
+      console.error(err);
+      mergeBackendValidation(500, err);
+    }
+  }
+
+  // #################################
+  // OUTPUT
+  // #################################
+  return (
+    <div>You're about to log out</div>
+  );
+}
+
+export default React.memo(Logout);
\ No newline at end of file
diff --git a/src/routes/Sitemap.jsx b/src/routes/Sitemap.jsx
index 04299d2d3d544ed2607c3c185d3c5649ad0a7926..c0163e9b3056928c4de2905e27c69893baaddd2d 100644
--- a/src/routes/Sitemap.jsx
+++ b/src/routes/Sitemap.jsx
@@ -6,26 +6,27 @@ import CleanLayout from '../layouts/CleanLayout';
 
 export const sitemap = [{
   title: 'MenuBar', element: <MainLayout />,
-  children: [
-    {
-      title: 'Home',
-      path: '/',
-      handle: { crumb: () => <Link to="/">ZBH Portal</Link> },
-      children: [
-        {
-          index: true,
-          element: loadComponent('Home', true, true)
-        },
-        // ONBOARDING
-        {
-          title: 'Onboarding',
-          path: '/onboarding',
-          element: loadComponent('Onboarding/Onboarding', true, true),
-          handle: { crumb: () => <Link to="/onboarding">Onboarding</Link> }
-        }
-      ]
-    }
-  ]
+  children: [{
+    // HOME
+    title: 'Home',
+    path: '/',
+    handle: { crumb: () => <Link to="/">ZBH Portal</Link> },
+    children: [
+      {
+        index: true,
+        element: loadComponent('Home', true, true)
+      },
+      // ONBOARDING
+      {
+        title: 'Onboarding',
+        path: '/onboarding',
+        element: loadComponent('Onboarding/Onboarding', true, true),
+        handle: { crumb: () => <Link to="/onboarding">Onboarding</Link> }
+      },
+      // LOGOUT
+      { title: 'Logout', path: '/logout', element: loadComponent('User/Logout', true, true), handle: { crumb: () => <Link to="/profile/logout">Logout</Link> } }
+    ]
+  }]
 }, {
   title: 'Others', element: <CleanLayout />, children: [
     // USER