diff --git a/src/app/components/home/home-page/home-page.component.scss b/src/app/components/home/home-page/home-page.component.scss
index 8f6f54c55a0b45bc3ffd4eb32570118ae1e1bd2d..b84a2bf8cc497a09bb735403ae65af5e7a0a6799 100644
--- a/src/app/components/home/home-page/home-page.component.scss
+++ b/src/app/components/home/home-page/home-page.component.scss
@@ -21,7 +21,7 @@
   font-size: 60%;
   text-align: center;
   letter-spacing: 10px;
-  color: var(--secondary-variant);
+  color: var(--on-surface);
   animation: moveInRight 1s ease-out;
 }
 
diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html
index 51d1685f922f686887ebfc89b3b76790b1b7c653..c5da79c4d7d18c011755063278d8ea80fa893a81 100644
--- a/src/app/components/shared/header/header.component.html
+++ b/src/app/components/shared/header/header.component.html
@@ -7,21 +7,33 @@
     <span *ngIf="router.url !== '/home'" class="app-title" (click)="goToHomepage()">ARSnova</span>
     <span class="fill-remaining-space"></span>
 
-    <mat-menu #themeMenu="matMenu" [overlapTrigger]="false" xPosition="before">
+    <mat-menu class="color-menu" #themeMenu="matMenu" [overlapTrigger]="false">
       <mat-grid-list cols="2">
         <mat-grid-tile>
-          <button mat-menu-item (click)="changeTheme('arsnova')">{{ 'header.default' | translate }}</button>
+          <button mat-icon-button class="default color-button" (click)="changeTheme('arsnova')">
+            <mat-icon class="color-icon">
+              lens
+              <mat-icon *ngIf="themeClass === 'arsnova'" class="check">check_circle</mat-icon>
+            </mat-icon>
+          </button>
         </mat-grid-tile>
         <mat-grid-tile>
-          <button mat-menu-item (click)="changeTheme('dark')">{{ 'header.dark' | translate }}</button>
+          <button mat-icon-button class="dark color-button" (click)="changeTheme('dark')">
+            <mat-icon class="color-icon">lens</mat-icon>
+            <mat-icon *ngIf="themeClass === 'dark'" class="check">check_circle</mat-icon>
+          </button>
         </mat-grid-tile>
         <mat-grid-tile>
-          <button mat-menu-item (click)="changeTheme('purple')">
-            <mat-icon>lens</mat-icon>
+          <button mat-icon-button class="purple color-button" (click)="changeTheme('purple')">
+            <mat-icon class="color-icon">lens</mat-icon>
+            <mat-icon *ngIf="themeClass === 'purple'" class="check">check_circle</mat-icon>
           </button>
         </mat-grid-tile>
         <mat-grid-tile>
-          <button mat-menu-item (click)="changeTheme('yellow')">Yellow</button>
+          <button mat-icon-button class="blue color-button" (click)="changeTheme('blue')">
+            <mat-icon class="color-icon">lens</mat-icon>
+            <mat-icon *ngIf="themeClass === 'blue'" class="check">check_circle</mat-icon>
+          </button>
         </mat-grid-tile>
       </mat-grid-list>
     </mat-menu>
diff --git a/src/app/components/shared/header/header.component.scss b/src/app/components/shared/header/header.component.scss
index 9e2de8a46fdb9519ea19453e6f7681ee86a207eb..f091a450465019fab031b6419c53a9f93cdb818f 100644
--- a/src/app/components/shared/header/header.component.scss
+++ b/src/app/components/shared/header/header.component.scss
@@ -12,3 +12,46 @@ mat-toolbar {
 .header-icons {
   color: var(--on-surface);
 }
+
+.purple {
+  color: var(--purple);
+}
+
+.blue {
+  color: var(--blue);
+}
+
+.dark {
+  color: var(--on-primary);
+}
+
+.default {
+  color: var(--teal);
+}
+
+.color-button {
+  width: 100%;
+  height: 100%;
+}
+
+.color-icon {
+  font-size: 45px;
+  height: 45px;
+  width: 45px;
+  line-height: 100%!important;
+}
+
+::ng-deep .color-menu {
+  padding: 0 8px 0 8px;
+}
+
+.check {
+  font-size: 25px;
+  height: 25px;
+  width: 25px;
+  line-height: 100%!important;
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  color: white;
+}
diff --git a/src/theme/dark-Theme/darkTheme.const.ts b/src/theme/dark-Theme/darkTheme.const.ts
index e326878b0246d8312dd97d85d1ba109b46a88264..6e66c17f8a25ae389cdac1351fdeb3d3451c3c8d 100644
--- a/src/theme/dark-Theme/darkTheme.const.ts
+++ b/src/theme/dark-Theme/darkTheme.const.ts
@@ -18,7 +18,9 @@ export const dark = {
   '--green': '#AED581',
   '--red': '#FF8A80',
   '--yellow': '#FFD54F',
-  '--blue': '#1E88E5',
+  '--blue': '#3f51b5',
+  '--purple': '#9c27b0',
+  '--teal': '#4DB6AC',
   '--grey': '#BDBDBD',
   '--grey-light': '#9E9E9E'
 };
diff --git a/src/theme/default-Theme/defaultTheme.const.ts b/src/theme/default-Theme/defaultTheme.const.ts
index 82f67187b23ec920b4bf448f95295685508282b6..f27dfde39625d68e930e802280a79d1ef70a544c 100644
--- a/src/theme/default-Theme/defaultTheme.const.ts
+++ b/src/theme/default-Theme/defaultTheme.const.ts
@@ -18,7 +18,9 @@ export const arsnova = {
   '--green': '#AED581',
   '--red': '#FF8A80',
   '--yellow': '#FFD54F',
-  '--blue': '#1E88E5',
+  '--blue': '#3f51b5',
+  '--purple': '#9c27b0',
+  '--teal': '#4DB6AC',
   '--grey': '#BDBDBD',
   '--grey-light': '#EEEEEE'
 };