diff --git a/backend/src/main/java/com/dhbw/get2gether/backend/user/model/ColorMode.java b/backend/src/main/java/com/dhbw/get2gether/backend/user/model/ColorMode.java
index 76a80f4..76e9114 100644
--- a/backend/src/main/java/com/dhbw/get2gether/backend/user/model/ColorMode.java
+++ b/backend/src/main/java/com/dhbw/get2gether/backend/user/model/ColorMode.java
@@ -7,6 +7,5 @@ public enum ColorMode {
     GRASSLAND,
     SUNSET,
     DEVELOPER,
-    DARK_BV,
     AUTUMN
 }
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 4b5b78a..2861934 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -43,8 +43,8 @@ import {EventpageComponent} from "./eventpage/eventpage.component";
 import {MatRippleModule} from "@angular/material/core";
 import {EventSearchComponent} from './dashboard/side-menu/event-search/event-search.component';
 import {FormsModule} from "@angular/forms";
-import { UserSettingsComponent } from './dashboard/user-settings/user-settings.component';
-import { UserSettingsItemComponent } from './dashboard/user-settings/user-settings-item/user-settings-item.component';
+import {UserSettingsComponent} from './dashboard/user-settings/user-settings.component';
+import {UserSettingsItemComponent} from './dashboard/user-settings/user-settings-item/user-settings-item.component';
 import {EventBannerComponent} from './eventpage/event-banner/event-banner.component';
 import {EventDescriptionComponent} from './eventpage/event-description/event-description.component';
 import {WidgetsSectionComponent} from './eventpage/widgets-section/widgets-section.component';
@@ -52,8 +52,8 @@ import {WidgetContainerComponent} from './eventpage/widgets-section/widget-conta
 import {ScrollingModule} from "@angular/cdk/scrolling";
 import {WidgetsBarComponent} from './eventpage/widgets-section/widgets-bar/widgets-bar.component';
 import {MatTabsModule} from "@angular/material/tabs";
-import { ParticipantsSidenavComponent } from './eventpage/participants-sidenav/participants-sidenav.component';
-import { ParticipantCardComponent } from './eventpage/participants-sidenav/participant-card/participant-card.component';
+import {ParticipantsSidenavComponent} from './eventpage/participants-sidenav/participants-sidenav.component';
+import {ParticipantCardComponent} from './eventpage/participants-sidenav/participant-card/participant-card.component';
 
 registerLocaleData(localeDe);
 
diff --git a/frontend/src/app/dashboard/side-menu/event-list/event-list-item/event-list-item.component.html b/frontend/src/app/dashboard/side-menu/event-list/event-list-item/event-list-item.component.html
index cf7234f..1e58701 100644
--- a/frontend/src/app/dashboard/side-menu/event-list/event-list-item/event-list-item.component.html
+++ b/frontend/src/app/dashboard/side-menu/event-list/event-list-item/event-list-item.component.html
@@ -4,6 +4,7 @@
     [routerLink]="'./' + event.id"
     routerLinkActive="selected"
     class="event-card"
+    tabindex="0"
   >
     <div class="ripple-container" mat-ripple [matRippleTrigger]="wrapper"></div>
     <mat-card-header>
diff --git a/frontend/src/app/dashboard/side-menu/profile-menu/profile-menu.component.html b/frontend/src/app/dashboard/side-menu/profile-menu/profile-menu.component.html
index f419264..33337b3 100644
--- a/frontend/src/app/dashboard/side-menu/profile-menu/profile-menu.component.html
+++ b/frontend/src/app/dashboard/side-menu/profile-menu/profile-menu.component.html
@@ -7,6 +7,7 @@
       width="30"
       height="30"
       [ngSrc]="user.profilePictureUrl"
+      referrerpolicy="no-referrer"
       alt="Profilbild">
 
     <mat-menu #menu="matMenu">
@@ -33,7 +34,7 @@
     color="accent"
     matTooltip="Event erstellen"
     class="event-add-button"
-    (click)="openDialog()"
+    (click)="openCreateEventDialog()"
     [disabled]="user.guest"
   >
     <mat-icon>add</mat-icon>
diff --git a/frontend/src/app/dashboard/side-menu/profile-menu/profile-menu.component.ts b/frontend/src/app/dashboard/side-menu/profile-menu/profile-menu.component.ts
index d6c4c05..96e41f3 100644
--- a/frontend/src/app/dashboard/side-menu/profile-menu/profile-menu.component.ts
+++ b/frontend/src/app/dashboard/side-menu/profile-menu/profile-menu.component.ts
@@ -23,11 +23,13 @@ export class ProfileMenuComponent {
     return [user.firstName, user.lastName].filter(x => x).join(" ");
   }
 
-  openDialog() {
+  openCreateEventDialog() {
     this.dialog.open(EventCreationComponent);
   }
 
   openUserSettings(){
-    this.dialog.open(UserSettingsComponent);
+    this.dialog.open(UserSettingsComponent, {
+      width: "600px"
+    });
   }
 }
diff --git a/frontend/src/app/dashboard/user-settings/user-settings-item/user-settings-item.component.html b/frontend/src/app/dashboard/user-settings/user-settings-item/user-settings-item.component.html
index 4f2ec09..b5beab8 100644
--- a/frontend/src/app/dashboard/user-settings/user-settings-item/user-settings-item.component.html
+++ b/frontend/src/app/dashboard/user-settings/user-settings-item/user-settings-item.component.html
@@ -1,19 +1,19 @@
 <div class="wrapper" #wrapper>
   <mat-card
     appearance="outlined"
-    routerLinkActive="selected"
-    (click)="switchColor()"
-    class="settingscard"
-
+    (click)="onSelect.emit()"
+    (keyup.enter)="onSelect.emit()"
+    [class.selected]="isSelected"
+    tabindex="0"
+    class="settings-card"
   >
     <div class="ripple-container" mat-ripple [matRippleTrigger]="wrapper"></div>
 
     <mat-card-content>
-        <div class="cardcontent-container">
-           <p class="colorcard" [style.background]="'var(--'+color+'-primary)'"></p>
-            {{color}}
-        </div>
+      <div class="cardcontent-container">
+        <div class="colorcard" [style.background-color]="'var(--' + colorMode.toLowerCase() + '-primary-preview)'"></div>
+        {{ colorMode | titlecase }}
+      </div>
     </mat-card-content>
   </mat-card>
 </div>
-
diff --git a/frontend/src/app/dashboard/user-settings/user-settings-item/user-settings-item.component.scss b/frontend/src/app/dashboard/user-settings/user-settings-item/user-settings-item.component.scss
index b9705d9..f87894e 100644
--- a/frontend/src/app/dashboard/user-settings/user-settings-item/user-settings-item.component.scss
+++ b/frontend/src/app/dashboard/user-settings/user-settings-item/user-settings-item.component.scss
@@ -1,6 +1,7 @@
-.settingscard {
+.settings-card {
   cursor: pointer;
   overflow: hidden;
+  --mdc-outlined-card-outline-color: transparent;
 
   &.selected {
     --mdc-outlined-card-outline-color: var(--primary-color);
@@ -19,24 +20,26 @@
   height: 100%;
   z-index: 0;
 }
-mat-card-content{
-  padding: 5% 0 5% 5%;
+
+mat-card-content {
+  padding: 8px !important;
 }
-.cardcontent-container{
-    display: grid;
-    grid-template-columns: 1fr 3fr;
-    grid-gap: 2%;
-    align-items: center;
-    //align-items: center;
-    //padding: 10% 0 10% 0;
-    .colorcard{
-      position: relative;
-      aspect-ratio: 1 / 1;
-      height: 70%;
-      padding: 0;
-      margin: 0;
 
-      border-radius: 12px;
-    }
+.cardcontent-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: var(--size-12);
+  align-items: center;
+  font-weight: var(--font-weight-subtitle);
+
+  .colorcard {
+    position: relative;
+    aspect-ratio: 1 / 1;
+    height: 50px;
+    padding: 0;
+    margin: 0;
+    border-radius: 12px;
+  }
 }
 
diff --git a/frontend/src/app/dashboard/user-settings/user-settings-item/user-settings-item.component.ts b/frontend/src/app/dashboard/user-settings/user-settings-item/user-settings-item.component.ts
index 161155c..3943a0b 100644
--- a/frontend/src/app/dashboard/user-settings/user-settings-item/user-settings-item.component.ts
+++ b/frontend/src/app/dashboard/user-settings/user-settings-item/user-settings-item.component.ts
@@ -1,9 +1,5 @@
-import {Component, Input, ViewChild} from '@angular/core';
-import {EventOverview} from "../../../../model/event";
-import {User} from "../../../../model/user";
-import {HttpClient} from "@angular/common/http";
-import {UserService} from "../../../../services/user.service";
-import {iconButton} from "material-components-web/index";
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {ColorMode} from "../../../../model/user";
 
 @Component({
   selector: 'app-user-settings-item',
@@ -11,25 +7,14 @@ import {iconButton} from "material-components-web/index";
   styleUrl: './user-settings-item.component.scss'
 })
 export class UserSettingsItemComponent {
-  constructor(
-    public userService: UserService,
-    private http: HttpClient
-  ) {}
 
   @Input()
-  color!: string;
+  colorMode!: ColorMode;
+
+  @Input()
+  isSelected = false;
+
+  @Output()
+  onSelect = new EventEmitter();
 
-  //switch color on change
-  switchColor() {
-    document.documentElement.setAttribute("theme", this.color);
-    console.log("curr ColorMode: "+document.documentElement.getAttribute("theme"))
-    let colormode:string=this.color.replace("-","_").toUpperCase();
-    this.http.put("http://localhost:8080/user/self", {
-      "settings": {
-        "colorMode" : colormode
-      }
-    },{withCredentials: true}).subscribe(result =>{
-      console.log(result);
-    })
-  }
 }
diff --git a/frontend/src/app/dashboard/user-settings/user-settings.component.html b/frontend/src/app/dashboard/user-settings/user-settings.component.html
index 3b3ca59..267a06c 100644
--- a/frontend/src/app/dashboard/user-settings/user-settings.component.html
+++ b/frontend/src/app/dashboard/user-settings/user-settings.component.html
@@ -1,22 +1,42 @@
-<h1 mat-dialog-title class="prim-color">Einstellungen</h1>
-<p class="subTitle" mat-dialog-title>Wähle ein Farbschema aus.</p>
+<h2 mat-dialog-title class="prim-color">
+  Einstellungen
+  <button mat-icon-button class="close-button" matDialogClose tabindex="-1">
+    <mat-icon>close</mat-icon>
+  </button>
+</h2>
 <mat-dialog-content>
-  <p class="subTitle">Day Theme</p>
-  <mat-divider></mat-divider>
-  <ul class="color-list">
+  <p>Wähle ein Farbschema aus</p>
+
+  @if (userService.user | async; as user) {
+    <h4 class="section-title">Day Theme</h4>
+    <ul class="color-list">
       @for (color of lightColors; track color) {
         <li>
-          <app-user-settings-item [color]="color"></app-user-settings-item>
+          <app-user-settings-item
+            [colorMode]="color"
+            [isSelected]="user.settings.colorMode === color"
+            (onSelect)="selectColorMode(color)"
+          ></app-user-settings-item>
         </li>
       }
-  </ul>
-  <p class="subTitle">Night Theme</p>
-  <mat-divider></mat-divider>
-  <ul class="color-list">
+    </ul>
+
+    <h4 class="section-title">Night Theme</h4>
+    <ul class="color-list">
       @for (color of darkColors; track color) {
         <li>
-          <app-user-settings-item [color]="color"></app-user-settings-item>
+          <app-user-settings-item
+            [colorMode]="color"
+            [isSelected]="user.settings.colorMode === color"
+            (onSelect)="selectColorMode(color)"
+          ></app-user-settings-item>
         </li>
       }
     </ul>
+  } @else {
+    <div class="loading-container">
+      <mat-spinner></mat-spinner>
+      <p>Profil wird geladen...</p>
+    </div>
+  }
 </mat-dialog-content>
diff --git a/frontend/src/app/dashboard/user-settings/user-settings.component.scss b/frontend/src/app/dashboard/user-settings/user-settings.component.scss
index 1719254..a407a2d 100644
--- a/frontend/src/app/dashboard/user-settings/user-settings.component.scss
+++ b/frontend/src/app/dashboard/user-settings/user-settings.component.scss
@@ -1,8 +1,12 @@
+.close-button {
+  float: right;
+  margin-top: 8px;
+}
+
 .container {
   overflow-y: auto;
   height: 100%;
 }
-
 .color-list {
   list-style: none;
   padding: 0;
@@ -10,12 +14,25 @@
 
 
   li:not(:last-child) {
-    margin-bottom: var(--size-12);
+    margin-bottom: 2px;
   }
 }
-.prim-color{
+
+.prim-color {
   color: var(--primary-color);
 }
-.subTitle{
+
+.section-title {
   color: var(--secondary-color);
+  margin-top: var(--size-24);
+}
+
+.loading-container {
+  text-align: center;
+  padding: var(--size-12);
+
+  mat-spinner {
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
diff --git a/frontend/src/app/dashboard/user-settings/user-settings.component.ts b/frontend/src/app/dashboard/user-settings/user-settings.component.ts
index 45e6517..3a09d24 100644
--- a/frontend/src/app/dashboard/user-settings/user-settings.component.ts
+++ b/frontend/src/app/dashboard/user-settings/user-settings.component.ts
@@ -1,5 +1,6 @@
-import { Component } from '@angular/core';
-import {MatDialogModule} from "@angular/material/dialog";
+import {Component} from '@angular/core';
+import {UserService} from "../../../services/user.service";
+import {ColorMode} from "../../../model/user";
 
 @Component({
   selector: 'app-user-settings',
@@ -7,9 +8,19 @@ import {MatDialogModule} from "@angular/material/dialog";
   styleUrl: './user-settings.component.scss'
 })
 export class UserSettingsComponent {
-  lightColors:string[]=["light", "water", "sunset", "grassland"]
-  darkColors :string[] = ["dark", "developer","autumn"];
+  lightColors = [ColorMode.LIGHT, ColorMode.WATER, ColorMode.SUNSET, ColorMode.GRASSLAND];
+  darkColors = [ColorMode.DARK, ColorMode.DEVELOPER, ColorMode.AUTUMN];
 
-}
+  isLoading = false;
 
+  constructor(public userService: UserService) {
+  }
 
+  selectColorMode(colorMode: ColorMode) {
+    this.isLoading = true;
+    this.userService.applyThemeAttribute(colorMode);
+    this.userService.updateTheme(colorMode).subscribe(() => {
+      this.isLoading = false;
+    });
+  }
+}
diff --git a/frontend/src/model/user.ts b/frontend/src/model/user.ts
index 4586ef9..15b120c 100644
--- a/frontend/src/model/user.ts
+++ b/frontend/src/model/user.ts
@@ -1,11 +1,12 @@
 export type User = {
-  id: string
-  creationDate: string
-  email: string
-  firstName: string
-  lastName: string
-  profilePictureUrl: string
-  guest: true | undefined
+  id: string;
+  creationDate: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  profilePictureUrl: string;
+  settings: UserSettings;
+  guest: true | undefined;
 }
 
 export type SimpleUser = {
@@ -14,3 +15,17 @@ export type SimpleUser = {
   lastName: string;
   profilePictureUrl: string;
 }
+
+export type UserSettings = {
+  colorMode: ColorMode;
+}
+
+export enum ColorMode {
+  LIGHT = "LIGHT",
+  DARK = "DARK",
+  WATER = "WATER",
+  GRASSLAND = "GRASSLAND",
+  SUNSET = "SUNSET",
+  DEVELOPER = "DEVELOPER",
+  AUTUMN = "AUTUMN"
+}
diff --git a/frontend/src/services/user.service.ts b/frontend/src/services/user.service.ts
index 690c2b2..5f6eda3 100644
--- a/frontend/src/services/user.service.ts
+++ b/frontend/src/services/user.service.ts
@@ -1,7 +1,7 @@
 import {Injectable} from '@angular/core';
 import {HttpClient} from "@angular/common/http";
-import {Observable, ReplaySubject} from "rxjs";
-import {User} from "../model/user";
+import {Observable, ReplaySubject, tap} from "rxjs";
+import {ColorMode, User} from "../model/user";
 import {environment} from "../environment/environment";
 
 @Injectable({
@@ -14,11 +14,18 @@ export class UserService {
   constructor(private http: HttpClient) {
   }
 
+  private updateUserModel(user: User) {
+    this.user.next(user);
+    if (user.settings && user.settings.colorMode) {
+      this.applyThemeAttribute(user.settings.colorMode);
+    }
+  }
+
   init() {
     return this.fetchUserModel().subscribe({
       next: user => {
         console.log("Loaded user model", user);
-        this.user.next(user);
+        this.updateUserModel(user);
       },
       error: () => {
         this.user.next(null);
@@ -30,4 +37,18 @@ export class UserService {
     return this.http.get<User>(`${environment.api}/user`, {withCredentials: true});
   }
 
+  updateTheme(colorMode: ColorMode): Observable<User> {
+    return this.http.put<User>(`${environment.api}/user/self`, {
+      settings: {
+        colorMode: colorMode
+      }
+    }, {withCredentials: true}).pipe(
+      tap(value => this.updateUserModel(value))
+    );
+  }
+
+  applyThemeAttribute(colorMode: ColorMode) {
+    document.documentElement.setAttribute("theme", colorMode.toLowerCase());
+  }
+
 }
diff --git a/frontend/src/styles/theme.scss b/frontend/src/styles/theme.scss
index 616482a..29f798b 100644
--- a/frontend/src/styles/theme.scss
+++ b/frontend/src/styles/theme.scss
@@ -50,50 +50,51 @@ $developer: define-theme(dark, matx.$m3-chartreuse-palette, matx.$m3-green-palet
 $autumn: define-theme(dark, matx.$m3-yellow-palette, matx.$m3-orange-palette);
 
 
-//define primary colors for the theme preview
-:root{
-  //light defaults
-  --light-primary: #{mat.get-theme-color($light-default, primary)};
-  --water-primary: #{mat.get-theme-color($water, primary)};
-  --grassland-primary: #{mat.get-theme-color($grassland, primary)};
-  --sunset-primary: #{mat.get-theme-color($sunset, primary)};
-  //dark defaults
-  --dark-primary: #{mat.get-theme-color($dark-default, primary)};
-  --developer-primary: #{mat.get-theme-color($developer , primary)};
-  --autumn-primary: #{mat.get-theme-color($autumn, primary)};
-
+// define primary colors for the theme preview
+:root {
+  // light defaults
+  --light-primary-preview: #{mat.get-theme-color($light-default, primary)};
+  --water-primary-preview: #{mat.get-theme-color($water, primary)};
+  --grassland-primary-preview: #{mat.get-theme-color($grassland, primary)};
+  --sunset-primary-preview: #{mat.get-theme-color($sunset, primary)};
+
+  // dark defaults
+  --dark-primary-preview: #{mat.get-theme-color($dark-default, primary)};
+  --developer-primary-preview: #{mat.get-theme-color($developer , primary)};
+  --autumn-primary-preview: #{mat.get-theme-color($autumn, primary)};
 }
+
 // apply default theme
 html {
   @include apply-theme($light-default, true);
 }
 
-// apply other theme variants
-
-////////////////////////////////////////////////
-//light
 //////////////////////////////////////////////
-
-
+// Light
+//////////////////////////////////////////////
 html[theme="water"] {
-   @include apply-theme($water);
+  @include apply-theme($water);
 }
+
 html[theme="grassland"] {
-   @include apply-theme($grassland);
+  @include apply-theme($grassland);
 }
+
 html[theme="sunset"] {
-   @include apply-theme($sunset);
+  @include apply-theme($sunset);
 }
 
-////////////////////////////////////////////////
-//dark
+//////////////////////////////////////////////
+// Dark
 //////////////////////////////////////////////
 html[theme="dark"] {
   @include apply-theme($dark-default);
 }
+
 html[theme="developer"] {
   @include apply-theme($developer);
 }
+
 html[theme="autumn"] {
   @include apply-theme($autumn);
 }