diff --git a/frontend/src/app/layout/main-layout/layout.component.html b/frontend/src/app/layout/main-layout/layout.component.html
index 83ddb7b..06733de 100644
--- a/frontend/src/app/layout/main-layout/layout.component.html
+++ b/frontend/src/app/layout/main-layout/layout.component.html
@@ -1,7 +1,9 @@
 <div class="flex h-screen w-screen bg-base-200">
   <div class="flex flex-col w-full lg:w-full bg-base-100 h-screen">
     <!-- Header mit dem Burger-Menü -->
-    <header class="w-full navbar bg-primary text-primary-content z-40">
+    <header
+      [ngStyle]="navigation"
+      class="w-full navbar bg-primary text-primary-content z-40">
       <div class="flex-1">
         <a class="btn btn-ghost normal-case text-xl text-primary-content">
           [APP-NAME]
@@ -384,7 +386,7 @@
           'lg:ml-16': isCompact && !isDrawerOpen,
           'ml-0': !isDrawerOpen || isCompact
         }">
-        <main class="flex-1">
+        <main [ngStyle]="mainContent" class="flex-1 w-full h-full">
           <div class="w-full h-full flex items-center justify-center">
             <div class="w-full max-w-5xl">
               <router-outlet></router-outlet>
diff --git a/frontend/src/app/layout/main-layout/layout.component.ts b/frontend/src/app/layout/main-layout/layout.component.ts
index fb858b0..f153160 100644
--- a/frontend/src/app/layout/main-layout/layout.component.ts
+++ b/frontend/src/app/layout/main-layout/layout.component.ts
@@ -100,13 +100,13 @@ interface BottomMenuItem {
       state(
         'open',
         style({
-          width: '16rem', // 256px
+          width: '16rem',
         })
       ),
       state(
         'compact',
         style({
-          width: '4rem', // 64px
+          width: '4rem',
         })
       ),
       state(
@@ -221,12 +221,13 @@ export class LayoutComponent implements OnInit, OnDestroy {
   ) {}
 
   @HostListener('window:resize', ['$event'])
-  public onResize(event: any): void {
-    this.isMobile = event.target.innerWidth < 1024;
-    this.adjustDrawerState(event.target.innerWidth);
+  public onResize(event: Event): void {
+    this.isMobile = (event.target as Window).innerWidth < 1024;
+    this.adjustDrawerState((event.target as Window).innerWidth);
   }
 
   public ngOnInit(): void {
+    this.setBackground();
     this.adjustDrawerState(window.innerWidth);
 
     window.addEventListener('resize', this.onResize.bind(this));
@@ -260,21 +261,21 @@ export class LayoutComponent implements OnInit, OnDestroy {
 
   public toggleDrawer(): void {
     this.isDrawerOpen = !this.isDrawerOpen;
-    this.isCompact = !this.isDrawerOpen; // Wechsel zwischen kompaktem und vollem Zustand
+    this.isCompact = !this.isDrawerOpen;
   }
 
   public toggleCompactMode(): void {
     this.isCompact = !this.isCompact;
-    this.isDrawerOpen = !this.isCompact; // Wenn kompaktes Mode aktiviert wird, Drawer geschlossen
+    this.isDrawerOpen = !this.isCompact;
   }
 
   public adjustDrawerState(width: number): void {
     if (width < 1024) {
       this.isCompact = true;
-      this.isDrawerOpen = false; // Kompaktmodus auf mobilen Geräten
+      this.isDrawerOpen = false;
     } else {
       this.isCompact = false;
-      this.isDrawerOpen = true; // Vollmodus auf Desktop
+      this.isDrawerOpen = true;
     }
   }
 
@@ -294,6 +295,41 @@ export class LayoutComponent implements OnInit, OnDestroy {
     item.isOpen = !item.isOpen;
   }
 
+  public setBackground(): void {
+    const theme = this.themeService.getTheme();
+    let opacity: number;
+
+    if (theme === 'dark') {
+      opacity = 0.05;
+    } else {
+      opacity = 0.1;
+    }
+
+    const colorPrimary = getComputedStyle(
+      this.el.nativeElement
+    ).getPropertyValue('--p');
+
+    const colorPrimaryC = getComputedStyle(
+      this.el.nativeElement
+    ).getPropertyValue('--pc');
+
+    const svgUrlMainContent = this.backgroundPatternService.getPlusPattern(
+      colorPrimary,
+      opacity
+    );
+    const svgUrlNavigation = this.backgroundPatternService.getBankNotePattern(
+      colorPrimaryC,
+      opacity
+    );
+
+    this.mainContent = {
+      'background-image': `url("${svgUrlMainContent}")`,
+    };
+    this.navigation = {
+      'background-image': `url("${svgUrlNavigation}")`,
+    };
+  }
+
   private updateMenuState(currentRoute: string): void {
     this.menuItems.forEach((item: TopMenuItem) => {
       // Set top-level items active state
@@ -320,76 +356,6 @@ export class LayoutComponent implements OnInit, OnDestroy {
     });
   }
 
-  // @HostListener('window:resize', ['$event'])
-  // public onResize(): void {
-  //   if (window.innerWidth >= 768) {
-  //     this.showMobileMenu = false;
-  //     this.isCollapsed = false;
-  //   } else {
-  //     this.isDesktopCollapsed = false;
-  //     this.isCollapsed = true;
-  //     this.showMobileMenu = false;
-  //   }
-  // }
-
-  // public setBackground(): void {
-  //   const theme = this.themeService.getTheme();
-  //   let opacity: number;
-
-  //   if (theme === 'dark') {
-  //     opacity = 0.05;
-  //   } else {
-  //     opacity = 0.1;
-  //   }
-
-  //   const colorPrimary = getComputedStyle(
-  //     this.el.nativeElement
-  //   ).getPropertyValue('--p');
-
-  //   const colorPrimaryC = getComputedStyle(
-  //     this.el.nativeElement
-  //   ).getPropertyValue('--pc');
-
-  //   const svgUrlMainContent = this.backgroundPatternService.getPlusPattern(
-  //     colorPrimary,
-  //     opacity
-  //   );
-  //   const svgUrlNavigation = this.backgroundPatternService.getBankNotePattern(
-  //     colorPrimaryC,
-  //     opacity
-  //   );
-
-  //   this.mainContent = {
-  //     'background-image': `url("${svgUrlMainContent}")`,
-  //   };
-  //   this.navigation = {
-  //     'background-image': `url("${svgUrlNavigation}")`,
-  //   };
-  // }
-
-  // public toggleSidebar(): void {
-  //   if (window.innerWidth < 768) {
-  //     this.showMobileMenu = !this.showMobileMenu;
-  //     this.isCollapsed = !this.showMobileMenu;
-  //   } else {
-  //     this.isDesktopCollapsed = !this.isDesktopCollapsed;
-  //   }
-  // }
-
-  // public toggleDesktopSidebar(): void {
-  //   this.isDesktopCollapsed = !this.isDesktopCollapsed;
-  // }
-
-  // public setActive(item: TopMenuItem): void {
-  //   this.menuItems.forEach((menu: TopMenuItem) => {
-  //     menu.active = false;
-  //   });
-  //   this.router.navigate([item.route]);
-  //   if (!this.isCollapsed && this.showMobileMenu) {
-  //     this.toggleSidebar();
-  //   }
-  // }
-
   private signout(): void {
     this.authService.signout().subscribe((response: SuccessDtoApiModel) => {
       if (response.success) {