diff --git a/src/app/navbar/navbar.component.css b/src/app/navbar/navbar.component.css
index e63a669..e91c890 100644
--- a/src/app/navbar/navbar.component.css
+++ b/src/app/navbar/navbar.component.css
@@ -7,7 +7,6 @@ nav {
 
 .navbar {
   width: 250px;
-  background-color: white;
   padding: 5px;
   transition: color .2s;
 }
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index 36a3db4..70c901e 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -1,27 +1,35 @@
-<nav class="navbar">
-  <ul class="nav-list">
-    <div class="grid grid-cols-1 bg-indigo-50 rounded-md border-1 border-gray-300">
-      @for (item of navItems; track item.path) {
-        <li>
-          <div class="grid grid-cols-1 m-1 rounded-sm">
-            <a [routerLink]="[item.path]"
-               routerLinkActive="active"
-               [routerLinkActiveOptions]="{ exact: true }"
-               class="text-2xl pl-3 hover:bg-gray-200 gradient-text rounded-sm">
-              {{ item.label }}
-            </a>
-          </div>
-        </li>
-      }
-    </div>
+<nav class="navbar bg-white-50 border-r border-gray-300">
+  <ul class="nav-list grid grid-cols-1 p-2">
+    @for (item of navItems; track item.path) {
+      <li class="relative group">
+        <a [routerLink]="[item.path]"
+          routerLinkActive="active"
+          [routerLinkActiveOptions]="{ exact: true }"
+          class="relative block text-2xl px-3 py-2 pl-5 gradient-text">
+
+          <!-- Pfeil links -->
+          <span class="
+            absolute left-2 top-1/2 -translate-y-1/2
+            w-0 h-0 border-t-4 border-b-4 border-l-6 border-t-transparent border-b-transparent border-l-indigo-500
+            opacity-0 transition-all duration-300
+            group-hover:opacity-100
+            group-[.active]:opacity-100
+            group-hover:-translate-x-1
+          "></span>
+
+          {{ item.label }}
+        </a>
+      </li>
+    }
   </ul>
+
   @if (currentUser() != null) {
     <div class="mt-auto flex items-center justify-between gap-x-2 px-3 pb-3 text-gray-600">
       <div class="flex items-center gap-x-1">
         <span>Angemeldet als:</span>
         <span class="text-indigo-500">{{ currentUser()?.displayName }}</span>
       </div>
-      <button (click)="logout()" class="relative top-[1px] rounded opacity-50 hover:opacity-100 text-black">
+      <button (click)="logout()" class="relative top-px rounded opacity-50 hover:opacity-100 text-black">
         <mat-icon style="font-size: 20px; width: 20px; height: 20px;">logout</mat-icon>
       </button>
     </div>