diff --git a/webapp/src/components/navigation/LogInButton.tsx b/webapp/src/components/navigation/LogInButton.tsx
deleted file mode 100644
index 3db36c7..0000000
--- a/webapp/src/components/navigation/LogInButton.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import "../../css/login.css"
-import {useNavigate} from "react-router-dom";
-import Button from "@mui/material/Button";
-
-function LogInButton() {
-
-    const navigate = useNavigate();
-
-
-    return (
-        <Button id="loginButton" onClick={() => navigate('/login')} value="Log in">Log in</Button>
-    )
-}
-
-export default LogInButton
\ No newline at end of file
diff --git a/webapp/src/components/navigation/NavBar.tsx b/webapp/src/components/navigation/NavBar.tsx
index f3f2d64..ee09912 100644
--- a/webapp/src/components/navigation/NavBar.tsx
+++ b/webapp/src/components/navigation/NavBar.tsx
@@ -45,18 +45,20 @@ function NavBar() {
             <NavItem to={"/help"} text={"Help"}/>
             <NavItem to={"/about"} text={"About"}/>
             <div id="login-manage">
-                {(!isLoggedIn) ? null :
+                {(!isLoggedIn) ? "" :
                     <Card><Card.Text>{dropdownTitle}</Card.Text></Card>}
                 {(!isLoggedIn) ?
                     <LoginButton oidcIssuer="https://inrupt.net" redirectUrl="http://localhost:3000/map">
-                        <Button variant="contained" color="primary">
+                        <Button variant="contained" color="primary"  id="login">
                             Login
                         </Button>
                     </LoginButton> : <LogoutButton>
-                        <Button variant="contained" color="error">
+                        <Button variant="contained" color="error" id="logout">
                             Logout
                         </Button></LogoutButton>}
-                <a href="https://inrupt.net/register">Haven't signed yed? Register now!</a>
+                {(isLoggedIn) ? "" :
+                    <a href="https://inrupt.net/register">Haven't signed yed? Register now!</a>
+                }
             </div>
         </nav>
     );
diff --git a/webapp/src/css/navigation.css b/webapp/src/css/navigation.css
index c277f9f..c01bf03 100644
--- a/webapp/src/css/navigation.css
+++ b/webapp/src/css/navigation.css
@@ -46,10 +46,9 @@ nav a:active, #login-manage a:active {
     margin-right: 0;
 }
 
-div[role="button"] button {
+#login, #logout {
     font-weight: bold;
     color: white;
-    background-color: #0063fd;
     padding: 10px;
     border-radius: 20px;
     border-color: white;
@@ -58,11 +57,19 @@ div[role="button"] button {
     cursor: pointer;
 }
 
-div[role="button"] button:hover {
+#login {
+    background-color: #0063fd;
+}
+
+#logout {
+    background-color: #8f8d8d;
+}
+
+#login:hover, #logout:hover {
     background-color: #00a6fb;
 }
 
-div[role="button"] button:active {
+#login:active, #logout:active {
     background-color: #007ffd;
 }