diff --git a/src/App.tsx b/src/App.tsx
index c5eed210e52bf7400357019e6f94def7ab7a17a8..3e1b31735a47c62b296c985cc9c7d4d4cdaaa03f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,6 +2,7 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom'
 import Login from './components/Login'
 import Navbar from './components/Navbar'
 import Register from './components/Register'
+import Logout from './components/Logout'
 
 function App() {
 
@@ -11,6 +12,7 @@ function App() {
       <Routes>
         <Route path='/Login' element={<Login/>}/>
         <Route path='/Register' element={<Register/>}/>
+        <Route path='/Logout' element={<Logout/>}/>
       </Routes>
     </BrowserRouter>
   )
diff --git a/src/components/Login.tsx b/src/components/Login.tsx
index 0e0dcee0494d1004c5f6c34874f48994ae251278..f434a7d9941fb2a8efb3bec11db143a9a494e779 100644
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@@ -15,6 +15,7 @@ import {
 import { validateConfirmPassword, validateEmail, validateLogin, validateRegister, validateUsername } from '../utils/Login'
 import React, {useState} from 'react'
 import { useNavigate } from 'react-router-dom';
+import { setUser } from '../utils/LocalStorage';
 
 type formType = {
   username : string,
@@ -44,6 +45,7 @@ export default function Login() {
                                       formData.password);
       response.then((success) => {
         if(success) {
+          setUser(formData.username);
           navigate('/');
         }else {
           setPasswordValid(false);
diff --git a/src/components/Logout.tsx b/src/components/Logout.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e2910aadd28e9af44e57462a82b19c30372050dd
--- /dev/null
+++ b/src/components/Logout.tsx
@@ -0,0 +1,7 @@
+import { Navigate } from "react-router-dom";
+import { unsetUser } from "../utils/LocalStorage";
+
+export default function Logout() {
+    unsetUser();
+    return <Navigate to="/Login"/>
+}
\ No newline at end of file
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index fa9b19869aaf2fc31a5cff4027eab1ccedebc5c6..5fda8fbc36935470a72dceefe74cc0d629e6f11e 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -18,6 +18,7 @@ import {
   CloseIcon,
 } from '@chakra-ui/icons'
 import NavItem from '../interfaces/NavItem'
+import { getUser, isLoggedIn } from '../utils/LocalStorage'
 
 const NAV_ITEMS: Array<NavItem> = [
   {
@@ -70,25 +71,74 @@ export default function Navbar() {
           </Flex>
         </Flex>
 
-        <Stack
-          flex={{ base: 1, md: 0 }}
-          justify={'flex-end'}
-          direction={'row'}
-          spacing={6}>
-          <Button
-            as={'a'}
-            display={{ base: 'none', md: 'inline-flex' }}
-            fontSize={'sm'}
-            fontWeight={600}
-            color={'white'}
-            bg={'pink.400'}
-            href={'Login'}
-            _hover={{
-              bg: 'pink.300',
-            }}>
-            Sign In
-          </Button>
-        </Stack>
+        {isLoggedIn() ? 
+          <Stack
+            flex={{ base: 1, md: 0 }}
+            justify={'flex-end'}
+            direction={'row'}
+            spacing={6}>
+            <Button
+              as={'a'}
+              display={{ base: 'none', md: 'inline-flex' }}
+              fontSize={'sm'}
+              fontWeight={600}
+              color={'black'}
+              href={'/Profile'}
+              _hover={{
+                bg: 'pink.300',
+              }}>
+              {getUser()}
+            </Button>
+            <Button
+              as={'a'}
+              display={{ base: 'none', md: 'inline-flex' }}
+              fontSize={'sm'}
+              fontWeight={600}
+              color={'white'}
+              bg={'pink.400'}
+              href={'/Logout'}
+              _hover={{
+                bg: 'pink.300',
+              }}>
+              Log Out
+            </Button>
+          </Stack>
+        :
+          <Stack
+            flex={{ base: 1, md: 0 }}
+            justify={'flex-end'}
+            direction={'row'}
+            spacing={6}>
+            <Button
+              as={'a'}
+              display={{ base: 'none', md: 'inline-flex' }}
+              fontSize={'sm'}
+              fontWeight={600}
+              color={'white'}
+              bg={'pink.400'}
+              href={'/Login'}
+              _hover={{
+                bg: 'pink.300',
+              }}>
+              Sign In
+            </Button>
+            <Button
+              as={'a'}
+              display={{ base: 'none', md: 'inline-flex' }}
+              fontSize={'sm'}
+              fontWeight={600}
+              color={'white'}
+              bg={'pink.400'}
+              href={'/Register'}
+              _hover={{
+                bg: 'pink.300',
+              }}>
+              Register
+            </Button>
+          </Stack>
+        }
+        
+        
       </Flex>
 
       <Collapse in={isOpen} animateOpacity>
diff --git a/src/components/Register.tsx b/src/components/Register.tsx
index 78fd627fb63960740f81263812637715ab7649b1..4d101c3b69635c514492e7c45566703d3a848db2 100644
--- a/src/components/Register.tsx
+++ b/src/components/Register.tsx
@@ -15,6 +15,7 @@ import {
 import { validateConfirmPassword, validateEmail, validateRegister, validateUsername } from '../utils/Login'
 import React, {useState} from 'react'
 import { useNavigate } from 'react-router-dom';
+import { setUser } from '../utils/LocalStorage';
 
 type formType = {
   username : string,
@@ -61,6 +62,7 @@ export default function Register() {
                                         formData.email,
                                         formData.password);
       response.then(() => {
+        setUser(formData.username);
         navigate('/');
       });
     }
diff --git a/src/utils/LocalStorage.ts b/src/utils/LocalStorage.ts
new file mode 100644
index 0000000000000000000000000000000000000000..83e191051f9357a8e2d310e576fe9ecd40ba2c96
--- /dev/null
+++ b/src/utils/LocalStorage.ts
@@ -0,0 +1,19 @@
+
+export function setUser(username : string) {
+    localStorage.setItem('username', username);
+}
+
+export function unsetUser() {
+    localStorage.removeItem('username');
+}
+
+export function getUser() {
+    const username = localStorage.getItem('username');
+    return username;
+}
+
+export function isLoggedIn() {
+    const loggedIn = (getUser() !== null);
+    console.log('isLoggedIn', loggedIn);
+    return loggedIn;
+}