diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index f6d8220..71db7f5 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -9,6 +9,8 @@ import ToolOverview from './components/ToolOverview';
 
 import './css/base.css';
 import './css/buttons.css';
+import './css/dark.css';
+import './css/light.css';
 import './css/menu.css';
 
 
diff --git a/frontend/src/components/NavBar.jsx b/frontend/src/components/NavBar.jsx
index 249b006..d4dc927 100644
--- a/frontend/src/components/NavBar.jsx
+++ b/frontend/src/components/NavBar.jsx
@@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router-dom';
+import '../css/navbar.css';
 import LightDarkToggle from './LightDarkToggle';
 import LogoutButton from './LogoutButton';
-import './css/navBar.css';
 
 function NavBar() {
   const navigate = useNavigate();
diff --git a/frontend/src/components/ToolOverview.jsx b/frontend/src/components/ToolOverview.jsx
index e48d133..78d9dc4 100644
--- a/frontend/src/components/ToolOverview.jsx
+++ b/frontend/src/components/ToolOverview.jsx
@@ -1,5 +1,4 @@
 import { useNavigate } from 'react-router-dom';
-import LogoutButton from './LogoutButton';
 
 function ToolOverview() {
   const navigate = useNavigate();
@@ -14,8 +13,6 @@ function ToolOverview() {
       {role === 'admin' && (
         <button onClick={() => navigate('/admin')}>Admin-Bereich</button>
       )}
-      <br /><br />
-      <LogoutButton />
     </div>
   );
 }
diff --git a/frontend/src/css/navBar.css b/frontend/src/css/navBar.css
index 35e152f..130052c 100644
--- a/frontend/src/css/navBar.css
+++ b/frontend/src/css/navBar.css
@@ -1,33 +1,36 @@
 .navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: 10px 20px;
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  background-color: var(--navbar-bg, #282c34);
-  padding: 10px 20px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  color: white;
-}
-
-.navbar-left button,
-.navbar-right button {
-  background-color: transparent;
-  border: none;
-  color: inherit;
-  font-size: 16px;
-  cursor: pointer;
-  margin-right: 10px;
-  padding: 5px 10px;
-  transition: background-color 0.2s;
-}
-
-.navbar-left button:hover,
-.navbar-right button:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-  border-radius: 5px;
+  background-color: var(--background-color);
+  z-index: 1000;
 }
 
+.navbar-left,
 .navbar-right {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 20px;
+}
+
+.navbar a,
+.navbar button {
+  background: none;
+  border: none;
+  color: var(--text);
+  font-size: 16px;
+  cursor: pointer;
+  text-decoration: none;
+  padding: 6px 12px;
+  transition: background-color 0.3s;
+}
+
+.navbar a:hover,
+.navbar button:hover {
+  background-color: var(--accent-hover);
+  border-radius: 4px;
 }
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index c7be0e9..89bd47e 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,7 +1,11 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App.jsx'
-import './css/index.css'
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+import './css/base.css';
+import './css/dark.css';
+import './css/light.css';
+import './css/navbar.css';
+
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>