diff --git a/src/Components/Navbar/NavBarWrapper.js b/src/Components/Navbar/NavBarWrapper.js
index dcba10351..63701b934 100755
--- a/src/Components/Navbar/NavBarWrapper.js
+++ b/src/Components/Navbar/NavBarWrapper.js
@@ -1,14 +1,18 @@
 import React from 'react';
 import UserNavbar from './UserNavbar';
 import AdminNavbar from './AdminNavbar';
+import { useUser } from '../context/UserContext';
 
 function NavBarWrapper({
   enableAdminNavbar = false,
   component: Component,
   ...appProps
 }) {
+  const { user, setUser } = useUser();
+
   function handleLogout() {
     appProps.setAuthenticated(false);
+    setUser(null);
     window.localStorage.removeItem('jwtToken');
     window.location.reload();
   }
diff --git a/src/Components/context/UserContext.js b/src/Components/context/UserContext.js
new file mode 100644
index 000000000..76ab85f10
--- /dev/null
+++ b/src/Components/context/UserContext.js
@@ -0,0 +1,7 @@
+import React, { createContext, useContext } from 'react';
+
+export const UserContext = createContext();
+
+export function useUser() {
+  return useContext(UserContext);
+}
diff --git a/src/Routing.js b/src/Routing.js
index 88955e8cb..0d5b1eabf 100644
--- a/src/Routing.js
+++ b/src/Routing.js
@@ -32,16 +32,19 @@ import Messaging from './Pages/Messaging/Messaging.js';
 
 import CardReader from './Pages/CardReader/CardReader.js';
 
+import { useUser } from './Components/context/UserContext';
+
 export default function Routing({ appProps }) {
+  const { user, setUser } = useUser();
   const userIsAuthenticated = appProps.authenticated;
   const userIsMember =
     userIsAuthenticated &&
-    appProps.user &&
-    appProps.user.accessLevel === membershipState.MEMBER;
+    user &&
+    user.accessLevel === membershipState.MEMBER;
   const userIsOfficerOrAdmin =
     userIsAuthenticated &&
-    appProps.user &&
-    appProps.user.accessLevel >= membershipState.OFFICER;
+    user &&
+    user.accessLevel >= membershipState.OFFICER;
   const signedInRoutes = [
     // new for Overview
     {
@@ -178,7 +181,6 @@ export default function Routing({ appProps }) {
                 path={path}
                 appProps={{
                   allowed: allowedIf,
-                  user: appProps.user,
                   redirect,
                   authenticated:userIsAuthenticated,
                   ...appProps
diff --git a/src/index.js b/src/index.js
index 1d4b70248..3c6741005 100755
--- a/src/index.js
+++ b/src/index.js
@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { withRouter, BrowserRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
 import './index.css';
 
 import Routing from './Routing';
 import { checkIfUserIsSignedIn } from './APIFunctions/Auth';
-
+import { UserContext } from './Components/context/UserContext';
 
 function App(props) {
   const [authenticated, setAuthenticated] = useState(false);
@@ -27,13 +27,13 @@ function App(props) {
 
   return (
     !isAuthenticating && (
-      <BrowserRouter>
-        <Routing appProps={{ authenticated, setAuthenticated, user }} />
-      </BrowserRouter>
+      <UserContext.Provider value={{ user, setUser }}>
+        <BrowserRouter>
+          <Routing appProps={{ authenticated, setAuthenticated, user }} />
+        </BrowserRouter>
+      </UserContext.Provider>
     )
   );
 }
 
-export default withRouter(App);
-
 ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/test/frontend/Routing.test.js b/test/frontend/Routing.test.js
index 90e4887aa..7636589d0 100644
--- a/test/frontend/Routing.test.js
+++ b/test/frontend/Routing.test.js
@@ -3,6 +3,7 @@ import React from 'react';
 import Enzyme, { mount } from 'enzyme';
 import { expect } from 'chai';
 import Adapter from '@cfaester/enzyme-adapter-react-18';
+import { UserContext } from '../../src/Components/context/UserContext';
 
 import Routing from '../../src/Routing';
 import Home from '../../src/Pages/Home/Home';
@@ -38,10 +39,17 @@ if (typeof SVGElement === 'undefined') {
   global.SVGElement = class SVGElement extends HTMLElement {};
 }
 function getComponentFromRoute(route, props = adminAppProps) {
+  const mockUserContext = {
+    user: props.user,
+    setUser: () => {}
+  };
+
   return mount(
-    <MemoryRouter initialEntries={[route]} appProps={props} >
-      <Routing appProps={props} />
-    </MemoryRouter>
+    <UserContext.Provider value={mockUserContext}>
+      <MemoryRouter initialEntries={[route]}>
+        <Routing appProps={props} />
+      </MemoryRouter>
+    </UserContext.Provider>
   );
 }