diff --git a/src/App.tsx b/src/App.tsx
index 44f0ff8..f9ce2ac 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,6 +3,7 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 
 import Navbar from "./components/Navbar.tsx";
 import NavbarButton from "./components/NavbarButton.tsx";
+import NavbarUserInfo from "./components/NavbarUserInfo.tsx";
 
 import Home from "./pages/Home.tsx";
 import Login from "./pages/Login.tsx";
@@ -17,13 +18,31 @@ export default function App() {
   const usernameStorageHandler = usernameStorageHandlerInit();
   const authTokenStorageHandler = authTokenStorageHandlerInit();
 
+  function testUserButton() {
+    return usernameStorageHandler.usernameValue ? "" : "Test User";
+  }
+
   return (
     <>
       <BrowserRouter>
         <Navbar>
           <NavbarButton>Home</NavbarButton>
-          <NavbarButton>Login</NavbarButton>
           <NavbarButton>About</NavbarButton>
+          {usernameStorageHandler.usernameValue ? (
+            <NavbarUserInfo
+              username={"Logged in as " + usernameStorageHandler.usernameValue}
+            ></NavbarUserInfo>
+          ) : (
+            <NavbarButton>Login</NavbarButton>
+          )}
+          <button
+            onClick={() =>
+              usernameStorageHandler.setUsernameValue(testUserButton())
+            }
+            className="navBarItem navBarItemText"
+          >
+            Click me!
+          </button>
         </Navbar>
         <div id="page">
           <Routes>
diff --git a/src/components/NavbarButton.tsx b/src/components/NavbarButton.tsx
index 3c89745..6e5d04b 100644
--- a/src/components/NavbarButton.tsx
+++ b/src/components/NavbarButton.tsx
@@ -8,8 +8,8 @@ interface Props {
 export default function NavbarButton({ children }: Props) {
   return (
     <>
-      <Link to={children.toLowerCase()} className="navBarButton">
-        <p className="navBarButtonText">{children}</p>
+      <Link to={children.toLowerCase()} className="navBarItem">
+        <p className="navBarItemText">{children}</p>
       </Link>
     </>
   );
diff --git a/src/components/NavbarUserInfo.tsx b/src/components/NavbarUserInfo.tsx
new file mode 100644
index 0000000..eae0813
--- /dev/null
+++ b/src/components/NavbarUserInfo.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+interface Props {
+  username: string;
+}
+
+export default function NavbarUserInfo({ username }: Props) {
+  return (
+    <>
+      <p className="navBarItem navBarItemText">{username}</p>
+    </>
+  );
+}
diff --git a/src/components/storageHandler.ts b/src/components/storageHandler.ts
index 5e7ccb7..b2df90f 100644
--- a/src/components/storageHandler.ts
+++ b/src/components/storageHandler.ts
@@ -6,6 +6,8 @@ React Hooks may not be a good fit for this role as these functions need to be re
 Could look at using global variables to avoid this (But it appears to be frowned upon? And react has trouble updating usestate hooks when it comes to globals it seems)
 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
  */
 
 export const usernameStorageHandlerInit = () => {
diff --git a/src/index.css b/src/index.css
index b5d8774..11af8a8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -33,20 +33,16 @@ a {
   height: var(--nav-bar-height);
   max-height: var(--nav-bar-height);
   max-width: 100%;
-  display: grid;
+  display: flex;
   gap: 10px;
   padding: 5px;
-  grid-auto-flow: column;
-  grid-auto-rows: 100%;
-  grid-auto-columns: 5rem;
   background-color: black;
 }
 
-.navBarButton {
+.navBarItem {
   height: 100%;
-  width: 100%;
+  min-width: 5rem;
   max-height: 100%;
-  max-width: 100%;
   border-radius: var(--border-radii);
   display: flex;
   align-items: center;
@@ -54,7 +50,7 @@ a {
   background: white;
 }
 
-.navBarButtonText {
+.navBarItemText {
   margin: 0px;
   padding: 0px;
   text-align: center;