diff --git a/src/app/components/creator/content-list/content-list.component.scss b/src/app/components/creator/content-list/content-list.component.scss
index 62c7c77e99343bd65f50eab26542b3d53f6b0b65..0bc0bfa469125ed02391d45fe03b8cc8b8ac7ed5 100644
--- a/src/app/components/creator/content-list/content-list.component.scss
+++ b/src/app/components/creator/content-list/content-list.component.scss
@@ -1,7 +1,7 @@
 mat-card {
   width: 800px;
   max-width: 90%;
-  background-color: var(--secondary-variant)!important;
+  background-color: var(--surface)!important;
 }
 
 mat-card-content > :first-child {
@@ -9,7 +9,7 @@ mat-card-content > :first-child {
 }
 
 mat-expansion-panel {
-  background-color: var(--surface);
+  background-color: var(--grey);
   margin-bottom: 5px;
 }
 
diff --git a/src/app/components/creator/content-presentation/content-presentation.component.scss b/src/app/components/creator/content-presentation/content-presentation.component.scss
index 10afc3bd5a639d0ffd3e71967b0217cfdc18b314..57541136c3a813bed4e71b72a37f3d360d6d05d7 100644
--- a/src/app/components/creator/content-presentation/content-presentation.component.scss
+++ b/src/app/components/creator/content-presentation/content-presentation.component.scss
@@ -11,7 +11,7 @@ mat-card {
   width: 800px;
   max-width: 90%;
   margin-top: 20px;
-  background-color: var(--secondary-variant);
+  background-color: var(--surface);
 }
 
 h3 {
diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.scss b/src/app/components/creator/room-creator-page/room-creator-page.component.scss
index 72b29e68b8a3f3b4f5850346e5a49eb37007474c..de4f002f6a1aa51f7e1a337d87505cff48179e62 100644
--- a/src/app/components/creator/room-creator-page/room-creator-page.component.scss
+++ b/src/app/components/creator/room-creator-page/room-creator-page.component.scss
@@ -2,7 +2,7 @@
 
 mat-card {
   width: 800px;
-  background-color: var(--secondary-variant)!important;
+  background-color: var(--surface)!important;
 }
 
 mat-card-content > :first-child {
@@ -57,22 +57,22 @@ mat-tooltip-component {
 
 p {
   font-size: medium;
-  color: var(--text-1)!important;
+  color: var(--on-surface)!important;
 }
 
 h2 {
    font-size: large;
-   color: var(--text-1)!important;
+   color: var(--on-surface)!important;
  }
 
 h3 {
   font-size: larger;
-  color: var(--text-1)!important;
+  color: var(--on-surface)!important;
 }
 
 h4 {
   font-size: medium;
-  color: var(--text-1)!important;
+  color: var(--on-surface)!important;
 }
 
 mat-card-header {
@@ -93,6 +93,6 @@ mat-grid-tile {
 }
 
 mat-expansion-panel {
-  background-color: var(--secondary-variant)!important;
+  background-color: var(--surface)!important;
   min-width: 200px;
 }
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 b84a2bf8cc497a09bb735403ae65af5e7a0a6799..d20082412fe82d9467152f7691aff97756bf33d0 100644
--- a/src/app/components/home/home-page/home-page.component.scss
+++ b/src/app/components/home/home-page/home-page.component.scss
@@ -10,7 +10,7 @@
   font-weight: bold;
   text-align: center;
   letter-spacing: 10px;
-  color: var(--primary);
+  color: var(--secondary);
   animation: moveInLeft 2s ease-out;
   padding-top: 10px;
 }
diff --git a/src/app/components/participant/room-participant-page/room-participant-page.component.scss b/src/app/components/participant/room-participant-page/room-participant-page.component.scss
index 01c97c9a27c5cf9d426fac2d9c9766529afcaf25..ba4b71ad23bcaeb9cc6ebfeef1131a4a80877705 100644
--- a/src/app/components/participant/room-participant-page/room-participant-page.component.scss
+++ b/src/app/components/participant/room-participant-page/room-participant-page.component.scss
@@ -3,7 +3,7 @@
 mat-card {
   width: 100%;
   max-width: 800px;
-  background-color: var(--secondary-variant)!important;
+  background-color: var(--surface)!important;
 }
 
 mat-card-content>:first-child {
@@ -35,24 +35,24 @@ button {
 
 p {
   font-size: medium;
-  color: var(--text-1)!important;
+  color: var(--on-surface)!important;
 }
 
 h2 {
   font-size: large;
-  color: var(--text-1)!important;
+  color: var(--on-surface)!important;
 }
 
 h3 {
   font-size: larger;
-  color: var(--text-1)!important;
+  color: var(--on-surface)!important;
   margin-top: 10px;
   margin-bottom: 10px;
 }
 
 h4 {
   font-size: medium;
-  color: var(--text-1)!important;
+  color: var(--on-surface)!important;
 }
 
 mat-card-header {
@@ -69,7 +69,7 @@ mat-card-subtitle {
 }
 
 mat-expansion-panel {
-  background-color: var(--secondary-variant)!important;
+  background-color: var(--surface)!important;
   min-width: 200px;
 }
 
diff --git a/src/app/components/shared/comment/comment.component.scss b/src/app/components/shared/comment/comment.component.scss
index 9e2cb8116f1c9d6cea2e7d86c9da83a9eeef4767..d5386181d262aae6a3de6ddf568acceff84f55f6 100644
--- a/src/app/components/shared/comment/comment.component.scss
+++ b/src/app/components/shared/comment/comment.component.scss
@@ -29,7 +29,7 @@ mat-card-content > :first-child {
 }
 
 .not-marked {
-  color: var(--grey);
+  color: var(--on-surface);
 }
 
 .correct-icon {
diff --git a/src/app/components/shared/content-groups/content-groups.component.scss b/src/app/components/shared/content-groups/content-groups.component.scss
index edc89098a51358fe47f46a7530a732a542b9fa3f..4cd4cbd4c9a0ab1291c3ef88c04992a5875d48e1 100644
--- a/src/app/components/shared/content-groups/content-groups.component.scss
+++ b/src/app/components/shared/content-groups/content-groups.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../theme/default-Theme/_variables.scss';
+@import '../../../../theme/default-theme/_variables.scss';
 
 #contentGroup {
   background-color: var(--primary);
@@ -15,8 +15,8 @@
 
   &:hover {
     cursor: pointer;
-    background-color: var(--surface);
-    color: var(--on-surface);
+    background-color: var(--primary-variant);
+    color: var(--on-primary);
     transform: translateZ(20px);
     transform: translateY(-5px);
     transform: scaleY(1.1);
diff --git a/src/app/components/shared/header/header.component.scss b/src/app/components/shared/header/header.component.scss
index f091a450465019fab031b6419c53a9f93cdb818f..bd5d97f80ab8f45024a3072092bfa408bea38687 100644
--- a/src/app/components/shared/header/header.component.scss
+++ b/src/app/components/shared/header/header.component.scss
@@ -1,16 +1,16 @@
 .app-title {
   cursor: pointer;
   margin: 0 auto;
-  color: var(--on-surface);
+  color: var(--on-primary);
 }
 
 mat-toolbar {
-  background-color: var(--surface);
+  background-color: var(--primary);
   position: relative;
 }
 
 .header-icons {
-  color: var(--on-surface);
+  color: var(--on-primary);
 }
 
 .purple {
@@ -22,7 +22,7 @@ mat-toolbar {
 }
 
 .dark {
-  color: var(--on-primary);
+  color: var(--black);
 }
 
 .default {
diff --git a/src/app/components/shared/list-statistic/list-statistic.component.scss b/src/app/components/shared/list-statistic/list-statistic.component.scss
index 355b5e21b1c7c11d96d6f6eff3af86ae4bf0fd2d..9d5e36959bb59c1af92d3a07d29ba0e975493b11 100644
--- a/src/app/components/shared/list-statistic/list-statistic.component.scss
+++ b/src/app/components/shared/list-statistic/list-statistic.component.scss
@@ -35,7 +35,7 @@ mat-cell {
 
 mat-toolbar {
   height: 20px;
-  background-color: var(--secondary-variant)!important;
+  background-color: var(--surface)!important;
 }
 
 .positive {
diff --git a/src/app/components/shared/room-list/room-list.component.scss b/src/app/components/shared/room-list/room-list.component.scss
index 28561c7fb718760b3355d1f8b7d2aefb49108bd9..36f04a865381cfdfc82fa1ad12f31e8e4a29b86f 100644
--- a/src/app/components/shared/room-list/room-list.component.scss
+++ b/src/app/components/shared/room-list/room-list.component.scss
@@ -33,7 +33,7 @@ mat-panel-title {
 
 .headerTitle {
   width: 8%;
-  color: var(--on-secondary)!important;
+  color: var(--on-background)!important;
 }
 
 .panelTitle {
diff --git a/src/app/components/shared/statistic/statistic.component.scss b/src/app/components/shared/statistic/statistic.component.scss
index 3353bb77e850c3ec82afaace36722749fbc43037..7ecc8110a20f00ea2a2ba1de7dc3fecccad66f45 100644
--- a/src/app/components/shared/statistic/statistic.component.scss
+++ b/src/app/components/shared/statistic/statistic.component.scss
@@ -1,12 +1,12 @@
 mat-card {
   width: 800px;
   max-width: 90%;
-  background-color: var(--secondary-variant)!important;
+  background-color: var(--surface)!important;
 }
 
 mat-toolbar {
   height: 15px;
-  background-color: var(--secondary-variant)!important;
+  background-color: var(--surface)!important;
 }
 
 .mat-icon-button {
diff --git a/src/app/components/shared/statistics-page/statistics-page.component.scss b/src/app/components/shared/statistics-page/statistics-page.component.scss
index 389817472746480db8a8a7e9050c42fc4eef7802..e49933b050ca00fb4eb635842e8cf4671844822a 100644
--- a/src/app/components/shared/statistics-page/statistics-page.component.scss
+++ b/src/app/components/shared/statistics-page/statistics-page.component.scss
@@ -2,9 +2,9 @@ mat-card {
   width: 800px;
   max-width: 90%;
   min-height: 300px;
-  background-color: var(--secondary-variant)!important;
+  background-color: var(--surface)!important;
 }
 
 h2 {
-  color: var(--text-1);
+  color: var(--on-surface);
 }
diff --git a/src/styles.scss b/src/styles.scss
index 9d8295a06c48b3922ec958e59e8adce73ab08a6a..e3a5dc1a18362be4d32b82228094e17305017c45 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,5 +1,6 @@
-@import 'theme/default-Theme/_variables.scss';
-@import "theme/dark-Theme/dark-theme";
+@import 'theme/default-theme/_variables.scss';
+@import 'theme/dark-theme/dark-theme';
+@import 'theme/blue-theme/blue-theme';
 // Plus imports for other components in your app.
 
 // Include the common styles for Angular Material. We include this here so that you only
@@ -17,5 +18,8 @@
   @include angular-material-theme($dark-theme);
 }
 
+.blue {
+  @include angular-material-theme($blue-theme);
+}
 
-@import 'theme/default-Theme/theme';
+@import 'theme/default-theme/theme';
diff --git a/src/theme/arsnova-theme.const.ts b/src/theme/arsnova-theme.const.ts
index 44fd8b030868a02849fbb90ec0a878cebf23aec6..0ea72d31c0012cc04beb5f0c1ca22085b12265a7 100644
--- a/src/theme/arsnova-theme.const.ts
+++ b/src/theme/arsnova-theme.const.ts
@@ -1,7 +1,9 @@
-import { dark } from './dark-Theme/darkTheme.const';
-import { arsnova } from './default-Theme/defaultTheme.const';
+import { dark } from './dark-theme/darkTheme.const';
+import { arsnova } from './default-theme/defaultTheme.const';
+import { blue } from './blue-theme/blueTheme.const';
 
 export const themes = {
   arsnova: arsnova,
-  dark: dark
+  dark: dark,
+  blue: blue
 };
diff --git a/src/theme/blue-theme/_blue-theme.scss b/src/theme/blue-theme/_blue-theme.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2d9ac0f756874994d8f641a57c934b3593c63e58
--- /dev/null
+++ b/src/theme/blue-theme/_blue-theme.scss
@@ -0,0 +1,8 @@
+@import './../../../node_modules/@angular/material/theming';
+
+$blue-primary: mat-palette($mat-indigo,500);
+$blue-accent: mat-palette($mat-amber, 200); //$mat-blue-gray, A200, A100, A400);
+
+$blue-warn: mat-palette($mat-red, A100);
+
+$blue-theme: mat-light-theme($blue-primary, $blue-accent, $blue-warn);
diff --git a/src/theme/blue-theme/blueTheme.const.ts b/src/theme/blue-theme/blueTheme.const.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a70bf2a2934a159336414ddc1abfa676b44b67f3
--- /dev/null
+++ b/src/theme/blue-theme/blueTheme.const.ts
@@ -0,0 +1,27 @@
+export const blue = {
+
+  '--primary' : '#3f51b5',
+  '--primary-variant': '#757de8',
+
+  '--secondary': '#3f51b5',
+  '--secondary-variant': '#757de8',
+
+  '--background': '#f5f5f5',
+  '--surface': '#bdbdbd',
+  '--dialog': '#c2c2c2',
+
+  '--on-primary': '#FFFFFF',
+  '--on-secondary': '#FFFFFF',
+  '--on-background': '#212121',
+  '--on-surface': '#212121',
+
+  '--green': '#AED581',
+  '--red': '#FF8A80',
+  '--yellow': '#FFD54F',
+  '--blue': '#3f51b5',
+  '--purple': '#9c27b0',
+  '--teal': '#4DB6AC',
+  '--grey': '#BDBDBD',
+  '--grey-light': '#EEEEEE',
+  '--black': '#212121'
+};
diff --git a/src/theme/dark-Theme/_dark-theme.scss b/src/theme/dark-Theme/_dark-theme.scss
deleted file mode 100644
index 052a6d3e6a35cf9fafc1211cdfeb8f18748f0545..0000000000000000000000000000000000000000
--- a/src/theme/dark-Theme/_dark-theme.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@import '../../../node_modules/@angular/material/theming';
-
-html, body {
-  font-family: 'Roboto', 'Helvetica Neue', sans-serif;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.fill-remaining-space {
-  /* This fills the remaining space, by using flexbox.
-     Every toolbar row uses a flexbox row layout. */
-  flex: 1 1 auto;
-}
-
-mat-form-field.input-block {
-  display: block;
-}
-
-.mat-fab .mat-button-wrapper {
-  padding: 0!important;
-}
-
-.mat-dialog-container {
-  background-color: white;
-}
-
-.mat-tab-header {
-  border-bottom-style: none!important;
-}
-
-
-$dark-primary: mat-palette($mat-blue-gray, 800);
-$dark-accent: mat-palette($mat-orange, 200);
-$dark-warn: mat-palette($mat-red, A200);
-
-$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
-
diff --git a/src/theme/dark-theme/_dark-theme.scss b/src/theme/dark-theme/_dark-theme.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4c901c3618b44e49db134b2200844ec0f3e4c34b
--- /dev/null
+++ b/src/theme/dark-theme/_dark-theme.scss
@@ -0,0 +1,8 @@
+@import './../../../node_modules/@angular/material/theming';
+
+$dark-primary: mat-palette($mat-blue-gray, 800);
+$dark-accent: mat-palette($mat-orange, 200);
+$dark-warn: mat-palette($mat-red, A200);
+
+$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
+
diff --git a/src/theme/dark-Theme/darkTheme.const.ts b/src/theme/dark-theme/darkTheme.const.ts
similarity index 90%
rename from src/theme/dark-Theme/darkTheme.const.ts
rename to src/theme/dark-theme/darkTheme.const.ts
index 6e66c17f8a25ae389cdac1351fdeb3d3451c3c8d..6aa4c582e58ee1f5cded0c675a093cbd0fb2422a 100644
--- a/src/theme/dark-Theme/darkTheme.const.ts
+++ b/src/theme/dark-theme/darkTheme.const.ts
@@ -22,5 +22,6 @@ export const dark = {
   '--purple': '#9c27b0',
   '--teal': '#4DB6AC',
   '--grey': '#BDBDBD',
-  '--grey-light': '#9E9E9E'
+  '--grey-light': '#9E9E9E',
+  '--black': '#212121'
 };
diff --git a/src/theme/default-Theme/_form.scss b/src/theme/default-theme/_form.scss
similarity index 100%
rename from src/theme/default-Theme/_form.scss
rename to src/theme/default-theme/_form.scss
diff --git a/src/theme/default-Theme/_theme.scss b/src/theme/default-theme/_theme.scss
similarity index 100%
rename from src/theme/default-Theme/_theme.scss
rename to src/theme/default-theme/_theme.scss
diff --git a/src/theme/default-Theme/_util.scss b/src/theme/default-theme/_util.scss
similarity index 100%
rename from src/theme/default-Theme/_util.scss
rename to src/theme/default-theme/_util.scss
diff --git a/src/theme/default-Theme/_variables.scss b/src/theme/default-theme/_variables.scss
similarity index 100%
rename from src/theme/default-Theme/_variables.scss
rename to src/theme/default-theme/_variables.scss
diff --git a/src/theme/default-Theme/defaultTheme.const.ts b/src/theme/default-theme/defaultTheme.const.ts
similarity index 90%
rename from src/theme/default-Theme/defaultTheme.const.ts
rename to src/theme/default-theme/defaultTheme.const.ts
index f27dfde39625d68e930e802280a79d1ef70a544c..27d001ede101145f93c0f35baf6ea9ff5eb74197 100644
--- a/src/theme/default-Theme/defaultTheme.const.ts
+++ b/src/theme/default-theme/defaultTheme.const.ts
@@ -22,5 +22,6 @@ export const arsnova = {
   '--purple': '#9c27b0',
   '--teal': '#4DB6AC',
   '--grey': '#BDBDBD',
-  '--grey-light': '#EEEEEE'
+  '--grey-light': '#EEEEEE',
+  '--black': '#212121'
 };