diff --git a/src/app/app-root/login/login.component.ts b/src/app/app-root/login/login.component.ts
index 6c47e4cbe3eb539d4f8563a9725fc4ef31bfedcb..25979c6f2ea7fc6c79c4e9b168a08144d9f545a3 100644
--- a/src/app/app-root/login/login.component.ts
+++ b/src/app/app-root/login/login.component.ts
@@ -11,7 +11,7 @@ import { BackendService } from '../../backend.service';
   templateUrl: './login.component.html',
   styles: [
     'mat-card {margin: 10px;}',
-    '.mat-card-gray {background-color: lightgray}',
+    '.mat-card-gray {background: var(--tc-box-background)}',
     '#toggle-show-password {cursor: pointer}'
   ]
 })
diff --git a/src/app/config/app.config.ts b/src/app/config/app.config.ts
index 8aedddd1a7ddbb41a645ed5e29e1cedc2dcbf56f..6a7df6241aecd2bd7940140bf4c3bf1283e484e6 100644
--- a/src/app/config/app.config.ts
+++ b/src/app/config/app.config.ts
@@ -11,7 +11,8 @@ export interface SysConfig {
   serverTimestamp: number;
   broadcastingService: BroadCastingServiceInfo;
   app_title: string;
-  background_color: string;
+  background_body: string;
+  background_box: string;
   intro_html: string;
   impressum_html: string;
   global_warning: string;
@@ -35,7 +36,8 @@ export class AppConfig {
   serverTimestamp = 0;
   broadcastingService: BroadCastingServiceInfo = { status: 'none' };
   app_title = 'IQB-Testcenter';
-  background_color: string;
+  background_body: string;
+  background_box: string;
   intro_html = 'Einführungstext nicht definiert';
   trusted_intro_html: SafeUrl = null;
   impressum_html = 'Impressum/Datenschutz nicht definiert';
@@ -71,7 +73,14 @@ export class AppConfig {
       });
       if (sysConfig.app_title) this.app_title = sysConfig.app_title;
       if (sysConfig.mainLogo) this.mainLogo = sysConfig.mainLogo;
-      this.background_color = sysConfig.background_color;
+      if (sysConfig.background_body) {
+        this.background_body = sysConfig.background_body;
+        document.documentElement.style.setProperty('--tc-body-background', this.background_body);
+      }
+      if (sysConfig.background_box) {
+        this.background_box = sysConfig.background_box;
+        document.documentElement.style.setProperty('--tc-box-background', this.background_box);
+      }
       this.isValidApiVersion = AppConfig.checkApiVersion(sysConfig.version, expectedApiVersion);
       this.detectedApiVersion = sysConfig.version;
       if (sysConfig.intro_html) this.intro_html = sysConfig.intro_html;
diff --git a/src/iqb-theme1.scss b/src/iqb-theme1.scss
index e9cd27fc001f15ce499dac3c3bf7e7ce81f922ec..e438de661b91c36e350b3206c4870907183d3bfc 100644
--- a/src/iqb-theme1.scss
+++ b/src/iqb-theme1.scss
@@ -5,17 +5,3 @@ $iqb-primary: mat-palette($mat-cyan, 900);
 $iqb-accent: mat-palette($mat-light-green, A200);
 $iqb-app-theme: mat-light-theme($iqb-primary, $iqb-accent);
 @include angular-material-theme($iqb-app-theme);
-
-body {
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  font-family: "Orienta";
-  background: #003333;
-  // background-color: #B0BEC5;
-}
-
-.mat-tooltip {
-  font-size: 100%
-}
diff --git a/src/styles.css b/src/styles.css
index 40fb5340509563395c39d55c797cf7f8d67ee26d..fd72e5b6cef4e77e5d7e87ccee2bb6e63689b485 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -2,6 +2,22 @@
   --tc-header-height: 65px;
   --tc-unit-title-height: 40px;
   --tc-unit-page-nav-height: 45px;
+  --tc-body-background: #003333 linear-gradient(to bottom, #003333, #045659, #0d7b84, #1aa2b2, #2acae5);
+  --tc-box-background: lightgray;
+  min-height: 100%;
+}
+
+body {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  font-family: "Orienta", sans-serif;
+  background: var(--tc-body-background);
+}
+
+.mat-tooltip {
+  font-size: 100%
 }
 
 /* orienta-regular - latin */
@@ -29,7 +45,6 @@
   width: 100%;
   top: 20px;
   bottom: 0;
-  background: linear-gradient(to bottom, #003333, #045659, #0d7b84, #1aa2b2, #2acae5);
 }
 
 .sheetofpaper {