diff --git a/frontend/src/app/pages/dashboard-root/dashboard-root.component.html b/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
index 23eb2c3..e7728ac 100644
--- a/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
+++ b/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
@@ -1,97 +1,120 @@
-<div class="flex flex-col h-screen overflow-hidden">
-  <!-- Header -->
-  <header
-    class="p-4 bg-primary text-primary-content flex items-center z-20 h-20 shadow-sm shadow-black/50">
-    <div class="w-10 flex items-center justify-center">
-      <label class="btn btn-ghost swap swap-rotate md:invisible">
-        <input
-          type="checkbox"
-          (change)="toggleSidebar()"
-          [checked]="!isCollapsed" />
-        <!-- hamburger icon -->
-        <svg
-          class="swap-off fill-current"
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 512 512">
-          <path
-            d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z" />
-        </svg>
-        <!-- close icon -->
-        <svg
-          class="swap-on fill-current"
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 512 512">
-          <polygon
-            points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49" />
-        </svg>
-      </label>
-    </div>
-    <div class="pl-4 flex-grow">
-      <div>Logo</div>
-    </div>
-    <!-- Desktop toggle button -->
-    <button class="hidden md:block" (click)="toggleDesktopSidebar()">
-      {{ isDesktopCollapsed ? '👉' : '👈' }}
-    </button>
-  </header>
-
-  <div class="flex flex-1 relative">
-    <!-- Sidebar -->
-    <div
-      [class]="
-        isCollapsed
-          ? 'bg-primary w-0 md:w-20 transition-all duration-300 ease-in-out'
+<div class="flex h-screen overflow-hidden">
+  <!-- Sidebar -->
+  <div
+    [class]="
+      isCollapsed
+        ? 'bg-primary w-0 md:w-20 transition-all duration-300 ease-in-out'
+        : showMobileMenu
+          ? 'bg-primary w-64 transition-all duration-300 ease-in-out'
           : isDesktopCollapsed
-            ? 'bg-primary w-48 md:w-20 transition-all duration-300 ease-in-out shadow-xl shadow-black/50'
-            : 'bg-primary w-48 md:w-48 transition-all duration-300 ease-in-out shadow-xl shadow-black/50'
-      "
-      class="transform absolute md:relative h-full z-20 overflow-y-auto">
-      <ul class="p-4">
-        <li class="px-1 py-2" *ngFor="let item of menuItems">
-          <span
-            class="cursor-pointer text-red text-primary-content block md:inline-block"
-            *ngIf="isDesktopCollapsed && !showMobileMenu"
-            [innerHTML]="item.icon"></span>
-
-          <div
-            class="flex items-center justify-between cursor-pointer text-primary-content"
-            *ngIf="!isDesktopCollapsed || showMobileMenu"
-            (click)="toggleSubMenu(item)">
-            <div class="flex items-center">
-              <span [innerHTML]="item.icon" class="mx-2"></span>
-              <span>{{ item.name }}</span>
-            </div>
-            <span
-              *ngIf="item.subItems && item.subItems.length > 0"
-              [class.rotate-90]="item.open"
-              class="transition-transform duration-300">
-              ▶
-            </span>
-          </div>
-
-          <ul
-            *ngIf="(!isDesktopCollapsed || showMobileMenu) && item.open"
-            class="mt-2 ml-4 transition-all duration-300 ease-in-out">
-            <li
-              class="py-2 cursor-pointer text-primary-content hover:bg-primary-focus rounded"
-              *ngFor="let subItem of item.subItems">
-              {{ subItem }}
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </div>
-
+            ? 'bg-primary w-48 md:w-16 transition-all duration-300 ease-in-out'
+            : 'bg-primary w-48 md:w-48 transition-all duration-300 ease-in-out'
+    "
+    class="transform h-full z-20 overflow-y-auto fixed md:relative">
     <div
-      *ngIf="!isCollapsed"
-      class="fixed inset-0 bg-black bg-opacity-50 z-10 md:hidden"
-      (click)="toggleSidebar()"></div>
+      [ngClass]="showMobileMenu ? 'justify-center' : 'justify-between'"
+      class="p-1 w-full h-16 bg-base-100 flex items-center relative">
+      <div class="flex items-center justify-center h-full w-full">
+        <div class="flex items-center space-x-4">
+          @if (!isCollapsed && !isDesktopCollapsed) {
+            <div class="text-primary">Logo</div>
+          }
 
-    <!-- Main content -->
-    <div class="flex-1 p-10 text-2xl font-bold">Hauptinhalt hier</div>
+          @if (!isCollapsed && !showMobileMenu) {
+            <button
+              (click)="toggleDesktopSidebar()"
+              class="flex items-center justify-center w-10 h-10 rounded-full">
+              @if (isDesktopCollapsed) {
+                <svg
+                  class="stroke-current text-primary w-6 h-6"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="3">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+                </svg>
+              } @else {
+                <svg
+                  class="stroke-current text-primary w-6 h-6"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="3">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M15.75 19.5 8.25 12l7.5-7.5" />
+                </svg>
+              }
+            </button>
+          }
+        </div>
+      </div>
+    </div>
+    <ul class="m-1">
+      <li
+        class="hover:bg-accent-content cursor-pointer hover:text-accent text-primary-content rounded-btn"
+        *ngFor="let item of menuItems">
+        <div
+          class="flex justify-center p-2"
+          *ngIf="isDesktopCollapsed && !showMobileMenu">
+          <span class="p-1" [innerHTML]="item.icon"></span>
+        </div>
+
+        <div
+          class="flex items-center rounded-btn justify-between cursor-pointer px-1 py-2 hover:bg-accent-content hover:text-accent text-primary-content"
+          *ngIf="!isDesktopCollapsed || showMobileMenu">
+          <div class="flex items-center hover:bold">
+            <span [innerHTML]="item.icon" class="mx-2"></span>
+            <span>{{ item.name }}</span>
+          </div>
+        </div>
+      </li>
+    </ul>
   </div>
+
+  <div class="flex flex-col flex-grow">
+    <header class="p-4 bg-primary text-primary-content flex items-center h-16">
+      <div class="w-10 flex items-center justify-center md:hidden">
+        <label class="btn btn-ghost swap swap-rotate">
+          <input
+            type="checkbox"
+            (change)="toggleSidebar()"
+            [checked]="!isCollapsed" />
+          <svg
+            class="swap-off fill-current"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 512 512">
+            <path
+              d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z" />
+          </svg>
+          <svg
+            class="swap-on fill-current"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 512 512">
+            <polygon
+              points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49" />
+          </svg>
+        </label>
+      </div>
+    </header>
+
+    <div class="flex-grow p-10 text-2xl font-bold overflow-y-auto">
+      <p>isCollapsed: {{ isCollapsed }}</p>
+      <p>showMobileMenu: {{ showMobileMenu }}</p>
+      <p>isDesktopCollapsed: {{ isDesktopCollapsed }}</p>
+    </div>
+  </div>
+
+  <div
+    *ngIf="!isCollapsed"
+    class="fixed inset-0 bg-black bg-opacity-50 z-10 md:hidden"
+    (click)="toggleSidebar()"></div>
 </div>
diff --git a/frontend/src/app/pages/dashboard-root/dashboard-root.component.ts b/frontend/src/app/pages/dashboard-root/dashboard-root.component.ts
index aec9cfb..2da5013 100644
--- a/frontend/src/app/pages/dashboard-root/dashboard-root.component.ts
+++ b/frontend/src/app/pages/dashboard-root/dashboard-root.component.ts
@@ -3,14 +3,15 @@ import {
   ChangeDetectionStrategy,
   Component,
   HostListener,
+  OnInit,
 } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 interface MenuItem {
   name: string;
   icon: SafeHtml;
-  subItems: string[];
   open?: boolean;
+  active?: boolean;
 }
 
 @Component({
@@ -22,7 +23,7 @@ interface MenuItem {
   styleUrl: './dashboard-root.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DashboardRootComponent {
+export class DashboardRootComponent implements OnInit {
   public isCollapsed: boolean = false;
   public isDesktopCollapsed: boolean = false;
   public showMobileMenu: boolean = false;
@@ -34,37 +35,38 @@ export class DashboardRootComponent {
         .bypassSecurityTrustHtml(`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
         <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
       </svg>`),
-      subItems: [],
     },
   ];
 
   public constructor(private sanitizer: DomSanitizer) {}
 
+  public ngOnInit(): void {
+    this.onResize();
+  }
+
   @HostListener('window:resize', ['$event'])
   public onResize(): void {
-    if (!this.userHasInteracted) {
-      this.isCollapsed = window.innerWidth < 768;
+    if (window.innerWidth >= 768) {
+      this.showMobileMenu = false;
+      this.isCollapsed = false;
     } else {
-      if (window.innerWidth > 768) {
-        this.isCollapsed = false;
-        this.userHasInteracted = false;
-      }
+      this.isDesktopCollapsed = false;
+      this.isCollapsed = true;
+      this.showMobileMenu = false;
     }
   }
 
   public toggleSidebar(): void {
-    this.isCollapsed = !this.isCollapsed;
-    this.showMobileMenu = !this.isCollapsed;
+    if (window.innerWidth < 768) {
+      this.showMobileMenu = !this.showMobileMenu;
+      this.isCollapsed = !this.showMobileMenu;
+    } else {
+      this.isDesktopCollapsed = !this.isDesktopCollapsed;
+    }
     this.userHasInteracted = true;
   }
 
   public toggleDesktopSidebar(): void {
     this.isDesktopCollapsed = !this.isDesktopCollapsed;
   }
-
-  public toggleSubMenu(item: any): void {
-    if (item.subItems.length) {
-      item.open = !item.open;
-    }
-  }
 }