diff --git a/src/app/app.component.css b/src/app/app.component.css
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 046919174d5af1f047768ca34bc8c6b79e2e1532..c88959035ac30935f1a8d318e6a4efbc6368a947 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,5 +1,3 @@
-@import '../theme/default-Theme/_variables.scss';
-
 .app-component {
   padding: 4%;
   background-color:var(--background);
diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html
index 111deec408ba6a8f451a3db7ba0872c527bcc708..51d1685f922f686887ebfc89b3b76790b1b7c653 100644
--- a/src/app/components/shared/header/header.component.html
+++ b/src/app/components/shared/header/header.component.html
@@ -1,4 +1,4 @@
-<mat-toolbar>
+<mat-toolbar class="mat-elevation-z6">
   <mat-toolbar-row>
     <button *ngIf="router.url !== '/home'" (click)="goBack()" mat-icon-button>
       <mat-icon class="header-icons" aria-label="Go back">keyboard_arrow_left</mat-icon>
@@ -7,9 +7,23 @@
     <span *ngIf="router.url !== '/home'" class="app-title" (click)="goToHomepage()">ARSnova</span>
     <span class="fill-remaining-space"></span>
 
-    <mat-menu #themeMenu="matMenu" [overlapTrigger]="false">
-      <button mat-menu-item (click)="changeTheme('')">{{ 'header.default' | translate }}</button>
-      <button mat-menu-item (click)="changeTheme('dark')">{{ 'header.dark' | translate }}</button>
+    <mat-menu #themeMenu="matMenu" [overlapTrigger]="false" xPosition="before">
+      <mat-grid-list cols="2">
+        <mat-grid-tile>
+          <button mat-menu-item (click)="changeTheme('arsnova')">{{ 'header.default' | translate }}</button>
+        </mat-grid-tile>
+        <mat-grid-tile>
+          <button mat-menu-item (click)="changeTheme('dark')">{{ 'header.dark' | translate }}</button>
+        </mat-grid-tile>
+        <mat-grid-tile>
+          <button mat-menu-item (click)="changeTheme('purple')">
+            <mat-icon>lens</mat-icon>
+          </button>
+        </mat-grid-tile>
+        <mat-grid-tile>
+          <button mat-menu-item (click)="changeTheme('yellow')">Yellow</button>
+        </mat-grid-tile>
+      </mat-grid-list>
     </mat-menu>
 
     <button mat-icon-button [matMenuTriggerFor]="themeMenu">
diff --git a/src/app/components/shared/header/header.component.scss b/src/app/components/shared/header/header.component.scss
index 3daed62173d7c31f65307d1ef5b83e2c19429fc5..9e2de8a46fdb9519ea19453e6f7681ee86a207eb 100644
--- a/src/app/components/shared/header/header.component.scss
+++ b/src/app/components/shared/header/header.component.scss
@@ -6,6 +6,7 @@
 
 mat-toolbar {
   background-color: var(--surface);
+  position: relative;
 }
 
 .header-icons {
diff --git a/src/app/components/shared/header/header.component.ts b/src/app/components/shared/header/header.component.ts
index 6c0490fb1efdcf9eee8045c7214f178dcecfed71..df26a09a6050c4309796e06a2f234c22a02e6f0f 100644
--- a/src/app/components/shared/header/header.component.ts
+++ b/src/app/components/shared/header/header.component.ts
@@ -67,11 +67,7 @@ export class HeaderComponent implements OnInit {
 
   changeTheme(theme) {
     this.themeClass = theme;
-    if (theme === '') {
-      this.themeService.activate('arsnovaTheme');
-    } else {
-      this.themeService.activate(theme);
-    }
+    this.themeService.activate(theme);
   }
 
   login(isLecturer: boolean) {
diff --git a/src/theme/arsnova-theme.const.ts b/src/theme/arsnova-theme.const.ts
index 91ae0b442be2a92a93b2d6e64badcc28573556b0..44fd8b030868a02849fbb90ec0a878cebf23aec6 100644
--- a/src/theme/arsnova-theme.const.ts
+++ b/src/theme/arsnova-theme.const.ts
@@ -1,7 +1,7 @@
 import { dark } from './dark-Theme/darkTheme.const';
-import { defaultTheme } from './default-Theme/defaultTheme.const';
+import { arsnova } from './default-Theme/defaultTheme.const';
 
 export const themes = {
-  arsnovaTheme: defaultTheme,
+  arsnova: arsnova,
   dark: dark
 };
diff --git a/src/theme/default-Theme/defaultTheme.const.ts b/src/theme/default-Theme/defaultTheme.const.ts
index 30c85dab711a3c15c51b222c81183bbf3c92a93f..82f67187b23ec920b4bf448f95295685508282b6 100644
--- a/src/theme/default-Theme/defaultTheme.const.ts
+++ b/src/theme/default-Theme/defaultTheme.const.ts
@@ -1,4 +1,4 @@
-export const defaultTheme = {
+export const arsnova = {
 
   '--primary' : '#4DB6AC',
   '--primary-variant': '#80cbc4',
diff --git a/src/theme/theme.directive.ts b/src/theme/theme.directive.ts
index 4202d0503f24cec72957090d239ef4f7856b9404..e9903558f33afc5c034b322a09e7294b94eb22de 100644
--- a/src/theme/theme.directive.ts
+++ b/src/theme/theme.directive.ts
@@ -10,7 +10,7 @@ import { Subscription } from 'rxjs';
 
 export class ThemeDirective implements OnInit, OnDestroy {
 
-  private themeName = 'arsnovaTheme';
+  private themeName = 'arsnova';
   private themServiceSubscription: Subscription;
 
   constructor(private elementRef: ElementRef,