diff --git a/src/App.tsx b/src/App.tsx
index f9ce2ac..571dbef 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,20 +7,50 @@ import NavbarUserInfo from "./components/NavbarUserInfo.tsx";
 
 import Home from "./pages/Home.tsx";
 import Login from "./pages/Login.tsx";
+import Logout from "./pages/Logout.tsx";
 import About from "./pages/About.tsx";
 
 import {
   usernameStorageHandlerInit,
   authTokenStorageHandlerInit,
+  userIDStorageHandlerInit,
 } from "./components/storageHandler.ts";
 
+function getUserIDbyAuthToken(
+  authTokenStorageHandler: object,
+  userIDStorageHandler: object,
+) {
+  if (
+    authTokenStorageHandler.authTokenValue &&
+    !userIDStorageHandler.userIDValue
+  ) {
+    fetch("http://127.0.0.1:8000/api/userIDByAuthToken", {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        authToken: authTokenStorageHandler.authTokenValue,
+      },
+    })
+      .then((response) => response.json())
+      .then((responseParsed: Object) => {
+        console.log(responseParsed);
+        if (responseParsed.success) {
+          userIDStorageHandler.setUserIDValue(responseParsed.userID);
+        }
+      });
+  }
+}
+
+function testUserButton() {
+  return usernameStorageHandler.usernameValue ? "" : "Test User";
+}
+
 export default function App() {
   const usernameStorageHandler = usernameStorageHandlerInit();
   const authTokenStorageHandler = authTokenStorageHandlerInit();
+  const userIDStorageHandler = userIDStorageHandlerInit();
 
-  function testUserButton() {
-    return usernameStorageHandler.usernameValue ? "" : "Test User";
-  }
+  getUserIDbyAuthToken(authTokenStorageHandler, userIDStorageHandler);
 
   return (
     <>
@@ -28,21 +58,16 @@ export default function App() {
         <Navbar>
           <NavbarButton>Home</NavbarButton>
           <NavbarButton>About</NavbarButton>
-          {usernameStorageHandler.usernameValue ? (
-            <NavbarUserInfo
-              username={"Logged in as " + usernameStorageHandler.usernameValue}
-            ></NavbarUserInfo>
+          {userIDStorageHandler.userIDValue ? (
+            <>
+              <NavbarUserInfo
+                userID={userIDStorageHandler.userIDValue}
+              ></NavbarUserInfo>
+              <NavbarButton>Logout</NavbarButton>
+            </>
           ) : (
             <NavbarButton>Login</NavbarButton>
           )}
-          <button
-            onClick={() =>
-              usernameStorageHandler.setUsernameValue(testUserButton())
-            }
-            className="navBarItem navBarItemText"
-          >
-            Click me!
-          </button>
         </Navbar>
         <div id="page">
           <Routes>
@@ -50,6 +75,7 @@ export default function App() {
             <Route path="/home" exact element={<Home></Home>} />
             <Route path="/about" exact element={<About></About>} />
             <Route path="/login" exact element={<Login></Login>} />
+            <Route path="/logout" exact element={<Logout></Logout>} />
           </Routes>
         </div>
       </BrowserRouter>
diff --git a/src/components/NavbarUserInfo.tsx b/src/components/NavbarUserInfo.tsx
index eae0813..530e234 100644
--- a/src/components/NavbarUserInfo.tsx
+++ b/src/components/NavbarUserInfo.tsx
@@ -1,13 +1,39 @@
 import * as React from "react";
+import { usernameStorageHandlerInit } from "../components/storageHandler.ts";
 
 interface Props {
-  username: string;
+  userID: number;
 }
 
-export default function NavbarUserInfo({ username }: Props) {
+/* Implement checking whether userInfo name etc reaches a certain character size, if it does then we'll split the string and add ... to the end instead*/
+
+export default function NavbarUserInfo({ userID }: Props) {
+  const usernameStorageHandler = usernameStorageHandlerInit();
+
+  if (!usernameStorageHandler.usernameValue) {
+    fetch("http://127.0.0.1:8000/api/publicInfo/" + userID.toString(), {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+      .then((response) => response.json())
+      .then((responseParsed: Object) => {
+        console.log(responseParsed);
+        if (responseParsed.success) {
+          usernameStorageHandler.setUsernameValue(responseParsed.username);
+        }
+      });
+  }
   return (
     <>
-      <p className="navBarItem navBarItemText">{username}</p>
+      {usernameStorageHandler.usernameValue ? (
+        <p className="navBarItem navBarItemText">
+          {usernameStorageHandler.usernameValue}
+        </p>
+      ) : (
+        <p className="navBarItem navBarItemText">Unknown User Logged In!</p>
+      )}
     </>
   );
 }
diff --git a/src/components/storageHandler.ts b/src/components/storageHandler.ts
index b2df90f..16b102b 100644
--- a/src/components/storageHandler.ts
+++ b/src/components/storageHandler.ts
@@ -8,6 +8,7 @@ Or could simply stop using react hooks for this role
 It appears to work for now so will leave be
 
 Confirmed that react cannot currently find and update DOM elements in other files. This will need to be changed
+For now when changing these values (Logging in etc) I just refresh the page
  */
 
 export const usernameStorageHandlerInit = () => {
@@ -21,6 +22,17 @@ export const usernameStorageHandlerInit = () => {
   };
 };
 
+export const userIDStorageHandlerInit = () => {
+  const [userIDValue, setUserIDValue, deleteUserIDValue] =
+    useLocalStorage("userID");
+
+  return {
+    userIDValue,
+    setUserIDValue,
+    deleteUserIDValue,
+  };
+};
+
 export const authTokenStorageHandlerInit = () => {
   const [authTokenValue, setAuthTokenValue, deleteAuthTokenValue] =
     useLocalStorage("authtoken");
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 32174f1..71adbf6 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Navigate } from "react-router-dom";
 import {
   usernameStorageHandlerInit,
   authTokenStorageHandlerInit,
@@ -13,6 +14,10 @@ export default function Login() {
     setUsernameFormValue(eventData.target.value);
   }
 
+  if (authTokenStorageHandler.authTokenValue) {
+    return <Navigate to="/home"></Navigate>;
+  }
+
   function onUsernameInputDefocus(formEvent) {
     console.log("Down");
   }
@@ -41,6 +46,7 @@ export default function Login() {
         console.log(responseParsed);
         if (responseParsed.success) {
           authTokenStorageHandler.setAuthTokenValue(responseParsed.authToken);
+          window.location.reload();
         } else {
           console.log("Login failure!");
         }
diff --git a/src/pages/Logout.tsx b/src/pages/Logout.tsx
new file mode 100644
index 0000000..95d8a52
--- /dev/null
+++ b/src/pages/Logout.tsx
@@ -0,0 +1,37 @@
+import * as React from "react";
+import { Navigate } from "react-router-dom";
+import {
+  usernameStorageHandlerInit,
+  authTokenStorageHandlerInit,
+  userIDStorageHandlerInit,
+} from "../components/storageHandler.ts";
+
+export default function Logout() {
+  const authTokenStorageHandler = authTokenStorageHandlerInit();
+  const userIDStorageHandler = userIDStorageHandlerInit();
+  const usernameStorageHandler = usernameStorageHandlerInit();
+
+  if (!authTokenStorageHandler.authTokenValue) {
+    return <Navigate to="/home"></Navigate>;
+  }
+
+  function onLogoutButtonClick() {
+    authTokenStorageHandler.deleteAuthTokenValue();
+    userIDStorageHandler.deleteUserIDValue();
+    usernameStorageHandler.deleteUsernameValue();
+    window.location.reload();
+  }
+
+  return (
+    <>
+      <div className="centeredBoxArea">
+        <div id="loginBox">
+          <div id="loginBoxContents">
+            <h1>Logout</h1>
+            <button onClick={onLogoutButtonClick}>Logout</button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}