diff --git a/client/src/App.tsx b/client/src/App.tsx
index 5e7c3a7..c0dc73e 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,11 +1,10 @@
 // framework tools and custom utils
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import { AuthContext, IAuthContext, useAuthContext } from './context/AuthContext';
-import { attemptLogout, checkCredientials } from './util/apiUtils';
-import { IUser } from './schemas';
+import { useAuthContext } from './context/AuthContext';
+import jwtDecode from 'jwt-decode';
 
-// pages, ui, styles
+// pages, ui, components, styles
 import Subscriptions from './components/pages/Subscriptions/Subscriptions';
 import Browser from './components/ui/Browser';
 import Collection from './components/pages/Collection';
@@ -19,55 +18,41 @@ import CollectionBrowser from './components/pages/CollectionBrowser';
 import { Navbar } from './components/ui';
 import GroceryList from './components/pages/GroceryList';
 import GroceryListCollection from './components/pages/GroceryListCollection';
+import { TokenType } from './util/types';
 import './sass/App.scss';
 
 function App() {
-  const [user, setUser] = useState<any>();
-  const parentState = { user, setUser };
-
-  const receiveChange = (() => {});
+  const { setUser, setToken } = useAuthContext();
 
   useEffect(() => {
-    const wrapper = async () => {
-      try {
-        const result: IAuthContext | undefined = await checkCredientials();
-        
-        if (result == undefined) {
-          setUser({ user: undefined });
-        } else {
-          setUser(result);
-        }
-      } catch(e) {
-        console.error(e);
-      }
+    if (document.cookie) {
+      const extractedToken: Partial<TokenType> = jwtDecode(document.cookie.split("=")[1]);
+      setToken(document.cookie.split("=")[1]);
+      setUser(extractedToken.user);
     }
-
-    wrapper();
-  }, [])
+  }, []);
 
   return (
     <BrowserRouter>
-      <AuthContext.Provider value={ parentState }>
-        <div className="App">
-          <Navbar receiveChange={receiveChange} />
-          <Routes>
-            <Route path="/"                       element={<Welcome />} />
-            <Route path="/register"               element={<Register receiveChange={receiveChange} />} />
-            <Route path="/login"                  element={<Login />} />
-            <Route path="/profile"                element={<Profile />} />
-            <Route path="/collections"            element={<CollectionBrowser />} />
-            <Route path="/collections/:id"        element={<Collection />} />
-            <Route path="/explore"                element={<Browser header="" searchFunction={() => {}} />} />
-            <Route path="/recipe/:id"             element={<Recipe />} />
-            <Route path="/subscriptions"          element={<Subscriptions />} />
-            <Route path="/subscriptions/:id"      element={<Collection />} />
+      <div className="App">
+        <Navbar />
+        <Routes>
+          <Route path="/"                       element={<Welcome />} />
+          <Route path="/register"               element={<Register />} />
+          <Route path="/login"                  element={<Login />} />
+          <Route path="/profile"                element={<Profile />} />
+          <Route path="/collections"            element={<CollectionBrowser />} />
+          <Route path="/collections/:id"        element={<Collection />} />
+          <Route path="/explore"                element={<Browser header="" searchFunction={() => {}} />} />
+          <Route path="/recipe/:id"             element={<Recipe />} />
+          <Route path="/subscriptions"          element={<Subscriptions />} />
+          <Route path="/subscriptions/:id"      element={<Collection />} />
 
-            <Route path="/add-recipe"             element={<AddRecipe />} />
-            <Route path="/grocery-list"           element={<GroceryListCollection />} />
-            <Route path="/grocery-list/:id"       element={<GroceryList />} />
-          </Routes>
-        </div>
-      </AuthContext.Provider>
+          <Route path="/add-recipe"             element={<AddRecipe />} />
+          <Route path="/grocery-list"           element={<GroceryListCollection />} />
+          <Route path="/grocery-list/:id"       element={<GroceryList />} />
+        </Routes>
+      </div>
     </BrowserRouter>
   )
 }
diff --git a/client/src/components/pages/Login.tsx b/client/src/components/pages/Login.tsx
index 4edad82..0fe25bd 100644
--- a/client/src/components/pages/Login.tsx
+++ b/client/src/components/pages/Login.tsx
@@ -1,10 +1,10 @@
 import { useCallback, useContext, useEffect, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
 import { AuthContext, useAuthContext } from "../../context/AuthContext";
-import { attemptLogin } from "../../util/apiUtils";
+import { useNavigate, useParams } from "react-router-dom";
 import { IUser, IUserAuth } from "../../schemas";
 import { Button, Form, Page, Panel } from "../ui";
 import { FormConfig } from "../ui/Form";
+import API from "../../util/API";
 
 export default function Login() {
     const params = new URLSearchParams(window.location.search);
@@ -24,9 +24,12 @@ export default function Login() {
 
     const handleLogin = async () => {
         if (!input.email || !input.password) return;
-        const { data, ok } = await attemptLogin(input);
-        if (ok) setUser(data);
-        navigate(`/${redirect ?? ''}`);
+        const result = await new API.Auth().login(input);
+        console.log(result);
+
+        // const { data, ok } = await attemptLogin(input);
+        // if (ok) setUser(data);
+        // navigate(`/${redirect ?? ''}`);
     }
 
     // check for logged in user and mount form
diff --git a/client/src/components/pages/Register/collection.tsx b/client/src/components/pages/Register/collection.tsx
index ee97dfc..5a41012 100644
--- a/client/src/components/pages/Register/collection.tsx
+++ b/client/src/components/pages/Register/collection.tsx
@@ -6,7 +6,7 @@ import { attemptLogin, createNewCollection } from "../../../util/apiUtils";
 import { Button, Divider, Page, Panel } from "../../ui";
 import TextField from "../../ui/TextField";
 
-const InitialCollection: RegisterVariantType = ({ transitionDisplay, receiveChange, input }) => {
+const InitialCollection: RegisterVariantType = ({ transitionDisplay, input }) => {
     const [collectionName, setCollectionName] = useState<string>();
     const [view, setView] = useState<JSX.Element>(<Page><h1>Loading...</h1></Page>);
     const [user, setUser] = useState<IUser>();
@@ -45,8 +45,7 @@ const InitialCollection: RegisterVariantType = ({ transitionDisplay, receiveChan
     }
 
     useEffect(() => {    
-        if (user && receiveChange) {
-            receiveChange(user);
+        if (user) {
             setView(
                 <Page>
                     <h1>Hi, {user.firstname}! Great to meet you.</h1>
diff --git a/client/src/components/pages/Register/index.tsx b/client/src/components/pages/Register/index.tsx
index 4d42422..bf39270 100644
--- a/client/src/components/pages/Register/index.tsx
+++ b/client/src/components/pages/Register/index.tsx
@@ -19,17 +19,17 @@ export enum VariantLabel {
     FinishUp
 }
 
-const Register: FC<{receiveChange: (change: IUser) => void}> = ({ receiveChange }) => {
+const Register = () => {
     const [displayed, setDisplayed] = useState<JSX.Element>();
-    const authContext = useAuthContext();
+    const { user } = useAuthContext();
 
-    const transitionDisplay = (variant: number | VariantLabel, user?: IUser) => {
+    const transitionDisplay = (variant: number | VariantLabel) => {
         switch (variant) {
             case 0:
                 setDisplayed(<AboutYou transitionDisplay={transitionDisplay} />);
                 break;
             case 1:
-                setDisplayed(<InitialCollection transitionDisplay={transitionDisplay} input={user} receiveChange={receiveChange} />);
+                setDisplayed(<InitialCollection transitionDisplay={transitionDisplay} input={user} />);
                 break;
             case 2:
                 setDisplayed(<AddFriends transitionDisplay={transitionDisplay} input={user} />);
@@ -38,7 +38,7 @@ const Register: FC<{receiveChange: (change: IUser) => void}> = ({ receiveChange
                 setDisplayed(<FinishUp transitionDisplay={transitionDisplay} />);
                 break;
             default:
-                setDisplayed(<AboutYou transitionDisplay={transitionDisplay} input={authContext.user || user} />);
+                setDisplayed(<AboutYou transitionDisplay={transitionDisplay} input={user} />);
                 break;
         }
     }
diff --git a/client/src/components/ui/Navbar/index.tsx b/client/src/components/ui/Navbar/index.tsx
index b15b1db..8e3aca1 100644
--- a/client/src/components/ui/Navbar/index.tsx
+++ b/client/src/components/ui/Navbar/index.tsx
@@ -1,44 +1,25 @@
-import { FC, useCallback, useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
 import { LoggedIn, NotLoggedIn, Registering } from "./variants";
 import { useAuthContext } from "../../../context/AuthContext";
-import { IUser } from "../../../schemas";
 import "/src/sass/components/Navbar.scss";
 
-const Navbar: FC<{receiveChange: (change: IUser) => void}> = ({ receiveChange }) => {
+const Navbar = () => {
     // setup and local state
-    const navigate = useNavigate();
-    const { user, setUser } = useAuthContext();
-    const [received, setReceived] = useState<IUser | undefined>();
-    const [displayed, setDisplayed] = useState<JSX.Element>();
-
-    // lift and store state from navbar variants
-    const liftChange = useCallback((newValue: IUser | undefined) => {
-        if (!newValue) {
-            return;
-        }
-        
-        setUser(newValue);
-        setReceived(newValue);
-    }, [])
+    const { user } = useAuthContext();
+    const [displayed, setDisplayed] = useState<JSX.Element>(<p>Loading...</p>);
 
     const variants = {
-        loggedin:    <LoggedIn navigate={navigate} received={received} liftChange={liftChange} />,
-        notloggedin: <NotLoggedIn navigate={navigate} received={received} />,
-        registering: <Registering navigate={navigate} received={received} />
+        loggedin:    <LoggedIn />,
+        notloggedin: <NotLoggedIn />,
+        registering: <Registering />
     }
 
     // side effects for live rendering
     useEffect(() => {
-        user && setReceived(user);
-    }, [user])
+        setDisplayed(user ? variants.loggedin : variants.notloggedin);
+    }, [user]);
 
-    useEffect(() => {
-        if (received) receiveChange(received);
-        setDisplayed(received ? variants.loggedin : variants.notloggedin);
-    }, [received, setReceived]);
-
-    return displayed || <p>Loading...</p>;
+    return displayed;
 }
 
 export default Navbar;
\ No newline at end of file
diff --git a/client/src/components/ui/Navbar/variants.tsx b/client/src/components/ui/Navbar/variants.tsx
index a9fa831..e76694c 100644
--- a/client/src/components/ui/Navbar/variants.tsx
+++ b/client/src/components/ui/Navbar/variants.tsx
@@ -1,15 +1,26 @@
-import { attemptLogout } from "../../../util/apiUtils";
+import API from "../../../util/API";
 import { NavbarType } from "../../../util/types";
-import { Button, Dropdown } from '../.'
+import { Button, Dropdown } from '..'
 import { useState } from "react";
+import { useAuthContext } from "../../../context/AuthContext";
+import { useNavigate } from "react-router-dom";
+
+const LoggedIn = () => {
+    const { user, setUser, setToken } = useAuthContext();
+    const navigate = useNavigate();
+    const auth = new API.Auth();
 
-const LoggedIn: NavbarType = ({ received, liftChange, navigate }) => {
     const [dropdownActive, setDropdownActive] = useState(false);
     const [searchActive, setSearchActive] = useState(false);
 
     const handleLogout = async () => {
-        const success = await attemptLogout();
-        if (success) liftChange!(undefined);
+        const success = await auth.logout();
+        console.log(success);
+
+        // nullify cookie and unset user/token data
+        document.cookie = `token=;expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+        setUser(undefined);
+        setToken(undefined);
         navigate('/');
     }
 
@@ -36,7 +47,7 @@ const LoggedIn: NavbarType = ({ received, liftChange, navigate }) => {
                     <a onClick={() => navigate('/')}>RECIPIN</a>
                 </div>
                 <div className="navbar-block">
-                    <p>Hi, {received?.firstname}.</p>
+                    <p>Hi, {user?.firstname}.</p>
                     <span id="search-icon"></span>
                     <Button onClick={() => handleUIChange("SEARCH")}>Search</Button>
                     <Button onClick={() => handleUIChange("ACTIONS")}>Actions</Button>
@@ -64,7 +75,9 @@ const LoggedIn: NavbarType = ({ received, liftChange, navigate }) => {
     )
 }
 
-const NotLoggedIn: NavbarType = ({ navigate }) => {
+const NotLoggedIn = () => {
+    const navigate = useNavigate();
+
     return (
         <div id="navbar">
             <div className="navbar-block">
@@ -77,14 +90,17 @@ const NotLoggedIn: NavbarType = ({ navigate }) => {
     )
 }
 
-const Registering: NavbarType = ({ received, navigate }) => {
+const Registering = () => {
+    const { user } = useAuthContext();
+    const navigate = useNavigate();
+
     return (
         <div id="navbar">
             <div className="navbar-block">
                 <a onClick={() => navigate('/')}>RECIPIN</a>
             </div>
             <div className="navbar-block">
-                <p>Hi, {received?.firstname}.</p>
+                <p>Hi, {user?.firstname}.</p>
             </div>
         </div>
     )
diff --git a/client/src/context/AuthContext.tsx b/client/src/context/AuthContext.tsx
index 25c44bf..7e511d5 100644
--- a/client/src/context/AuthContext.tsx
+++ b/client/src/context/AuthContext.tsx
@@ -3,12 +3,16 @@ import { IUser } from "../schemas";
 
 export interface IAuthContext {
     user?: IUser
-    setUser: Dispatch<SetStateAction<IUser>> | VoidFunction
+    setUser: Dispatch<SetStateAction<IUser | undefined>> | VoidFunction
+    token?: string
+    setToken: Dispatch<SetStateAction<string | undefined>> | VoidFunction
 }
 
 export const defaultValue: IAuthContext = {
     user: undefined,
-    setUser: () => {}
+    setUser: () => {},
+    token: undefined,
+    setToken: () => {}
 }
 
 export const AuthContext = createContext<IAuthContext>(defaultValue);
diff --git a/client/src/context/AuthProvider.tsx b/client/src/context/AuthProvider.tsx
new file mode 100644
index 0000000..c660c76
--- /dev/null
+++ b/client/src/context/AuthProvider.tsx
@@ -0,0 +1,18 @@
+import { FC, Provider, ReactPortal, useEffect, useState } from "react"
+import { IUser } from "../schemas";
+import { AuthContext, IAuthContext } from "./AuthContext";
+
+const AuthProvider = ({ children }: any) => {
+    const [user, setUser] = useState<IUser>();
+    const [token, setToken] = useState<string>();
+
+    const value = { user, setUser, token, setToken }
+
+    return (
+        <AuthContext.Provider value={ value }>
+            { children }
+        </AuthContext.Provider>
+    )
+}
+
+export default AuthProvider;
\ No newline at end of file
diff --git a/client/src/main.tsx b/client/src/main.tsx
index bbf6a0e..bec94b7 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -1,6 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
+import AuthProvider from './context/AuthProvider'
 import './sass/index.scss'
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<App />)
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+    <AuthProvider>
+        <React.StrictMode>
+            <App />
+        </React.StrictMode>
+    </AuthProvider>
+)
diff --git a/client/src/util/API.ts b/client/src/util/API.ts
index f1fbdc1..5265001 100644
--- a/client/src/util/API.ts
+++ b/client/src/util/API.ts
@@ -2,7 +2,7 @@ import { AxiosHeaders, AxiosRequestHeaders } from "axios";
 import { IUser, IUserAuth, IFriendship, IRecipe, IIngredient, ICollection, IGroceryList } from "../schemas";
 import { default as _instance } from "./axiosInstance";
 
-export module API {
+module API {
     const APISTRING = import.meta.env.APISTRING || "http://localhost:8080";
 
     abstract class RestController<T> {
@@ -149,4 +149,6 @@ export module API {
             super(APISTRING + "/app/grocery-list")
         }
     }
-}
\ No newline at end of file
+}
+
+export default API
\ No newline at end of file
diff --git a/client/src/util/axiosInstance.ts b/client/src/util/axiosInstance.ts
index ebaa5e4..5e8c3fb 100644
--- a/client/src/util/axiosInstance.ts
+++ b/client/src/util/axiosInstance.ts
@@ -10,13 +10,9 @@ const instance = axios.create({
 instance.interceptors.response.use((res: AxiosResponse<any,any>) => {
     if (res?.data.token) {
         document.cookie = `token=${res.data.token}`;
-
-        return res;
-    } else {
-        console.error("Token was not found in response");
-
-        return res;
     }
+    
+    return res;
 }, (err) => {
     return Promise.reject(err);
 })
diff --git a/client/src/util/types.ts b/client/src/util/types.ts
index 2cdd098..ff5ffea 100644
--- a/client/src/util/types.ts
+++ b/client/src/util/types.ts
@@ -46,4 +46,8 @@ export type ButtonComponent = FC<ButtonParams>
 export type ProtectPortal = FC<ProtectParams>
 export type UserCardType = FC<UserCardProps>
 export type NavbarType = FC<NavbarProps>
-export type CheckboxType = FC<CheckboxProps>
\ No newline at end of file
+export type CheckboxType = FC<CheckboxProps>
+
+export interface TokenType {
+    user: IUser
+}
\ No newline at end of file