diff --git a/src/app.js b/src/app.js
index 00abbc1..8fa96f1 100644
--- a/src/app.js
+++ b/src/app.js
@@ -50,7 +50,6 @@ class App extends React.Component {
       type: 'config/load',
     });
 
-    branding.applyBranding();
     this.state = {} 
   }
 
diff --git a/src/branding/branding.js b/src/branding/branding.js
index 7a83fdb..92bb583 100644
--- a/src/branding/branding.js
+++ b/src/branding/branding.js
@@ -23,32 +23,16 @@ import slew_values from './slew/slew-values';
 
 class Branding {
     constructor(chosenbrand) {
-        if (!Branding.branding) {
-            if (chosenbrand === undefined) {
-                chosenbrand = "villasweb"
-            }
-            this.brand = chosenbrand;
-
-            this.setValues();
-            this.isSet = true;
-
-            Branding.branding = this;
+        if (Branding.branding) {
+            return Branding.branding;
         }
-        /*
-        // TODO: simplify; error only for "wrong" brand, not for missing brand
-        var brand = _.get(brands, [chosenbrand]);
-        if (!brand) {
-            console.error("Branding '" + chosenbrand + "' not available, will use 'villasweb' branding");
-            brand = _.get(brands, ['villasweb']);
-            chosenbrand = 'villasweb';
-            this.default = true;
-        } else if (chosenbrand === 'villasweb') {
-            this.default = true;
-        } else {
-            this.default = false;
-        }
-        *****/
-        return Branding.branding;
+
+        this.brand = chosenbrand;
+        this.setValues();
+        this.checkValues();
+        this.applyStyle();
+
+        Branding.branding = this;
     }
 
     setValues() {
@@ -60,6 +44,8 @@ class Branding {
                 this.values = slew_values;
                 break;
             default:
+                console.error("Branding '" + this.brand + "' not available, will use 'villasweb' branding");
+                this.brand = 'villasweb';
                 this.values = villasweb_values;
                 break;
         }
@@ -69,13 +55,13 @@ class Branding {
         var homepage = '';
         switch (this.brand) {
             case 'villasweb':
-                homepage = villasweb_home(this.values.title, username, userid, role);
+                homepage = villasweb_home(this.getTitle(), username, userid, role);
                 break;
             case 'slew':
-                homepage = slew_home(this.values.title);
+                homepage = slew_home();
                 break;
             default:
-                homepage = villasweb_home();
+                homepage = villasweb_home(this.getTitle(), username, userid, role);
                 break;
         }
         return homepage;
@@ -99,15 +85,22 @@ class Branding {
     }
 
     defaultWelcome() {
-        return (<h1>Welcome!</h1>);
+        return (<div><h1>Welcome!</h1><p>This is the welcome page and you are very welcome here.</p></div>);
     }
 
-    // TODO: error handling if icon cannot be found
+    // if icon cannot be found, the default favicon will be used
     changeHead() {
+        // set title of document
+        let title = this.getTitle();
+        if (this.getSubtitle()) {
+            title += " " + this.getSubtitle();
+        }
+        document.title = title;
+
+        // set document icon
         if (!this.values.icon) {
             return;
         }
-        document.title = this.values.title + " " + this.values.subtitle;
         var oldlink = document.getElementById('dynamic-favicon');
 
         var link = document.createElement('link');
@@ -121,14 +114,51 @@ class Branding {
         document.head.appendChild(link);
     }
 
-    applyBranding() {
+    checkValues() {
+        if (!this.values.hasOwnProperty('pages'))  {
+            let pages = {};
+            pages.home =  true;
+            pages.scenarios = true;
+            pages.infrastructure = true;
+            pages.users = true;
+            pages.account = true;
+            pages.api = true;
+
+            this.values.pages = pages;
+        } else {
+            if (!this.values.pages.hasOwnProperty('home')) {
+                this.values.pages['home'] = false;
+            }
+            if (!this.values.pages.hasOwnProperty('scenarios')) {
+                this.values.pages['scenarios'] = false;
+            }
+            if (!this.values.pages.hasOwnProperty('infrastructure')) {
+                this.values.pages['infrastructure'] = false;
+            }
+            if (!this.values.pages.hasOwnProperty('users')) {
+                this.values.pages['users'] = false;
+            }
+            if (!this.values.pages.hasOwnProperty('account')) {
+                this.values.pages['account'] = false;
+            }
+            if (!this.values.pages.hasOwnProperty('api')) {
+                this.values.pages['api'] = false;
+            }
+        }
+    }
+
+    applyStyle() {
         this.changeHead();
 
         const rootEl = document.querySelector(':root');
-        let background = this.getBackgroundColor();
 
+        let background = this.getBackgroundColor();
         if (background) {
-            document.body.style.backgroundColor = background;
+            console.log(background)
+            rootEl.style.setProperty('--bg', background);
+            //document.body.style.backgroundColor = background;
+        } else {
+            console.log(document.body.style.backgroundColor)
         }
 
         let maincolor = this.getMainColor();
@@ -141,11 +171,6 @@ class Branding {
             rootEl.style.setProperty('--highlights', highlight);
         }
 
-        let primary = this.getPrimaryTextColor();
-        if (primary) {
-            rootEl.style.setProperty('--primarytext', primary);
-        }
-
         let secondary = this.getSecondaryTextColor();
         if (secondary) {
             rootEl.style.setProperty('--secondarytext', secondary);
@@ -163,8 +188,8 @@ class Branding {
     }
 
     getBackgroundColor() {
-        if (this.values.style && this.values.style.bgcolor) {
-            return this.values.style.bgcolor;
+        if (this.values.style && this.values.style.background) {
+            return this.values.style.background;
         }
         return null;
     }
@@ -183,13 +208,6 @@ class Branding {
         return null;
     }
 
-    getPrimaryTextColor() {
-        if (this.values.style && this.values.style.primarytext) {
-            return this.values.style.primarytext;
-        }
-        return null;
-    }
-
     getSecondaryTextColor() {
         if (this.values.style && this.values.style.secondarytext) {
             return this.values.style.secondarytext;
@@ -210,6 +228,14 @@ class Branding {
         }
         return null;
     }
+
+    getTitle() {
+        return this.values.title ? this.values.title : "No Title!";
+    }
+
+    getSubtitle() {
+        return this.values.subtitle ? this.values.subtitle : null;
+    }
 };
 
 const branding = new Branding(process.env.REACT_APP_BRAND);
diff --git a/src/branding/slew/slew-functions.js b/src/branding/slew/slew-functions.js
index d15da26..1fecbe7 100644
--- a/src/branding/slew/slew-functions.js
+++ b/src/branding/slew/slew-functions.js
@@ -18,13 +18,13 @@ import React from 'react';
 import './slew.css'
 
 
-export function slew_home(title) {
+export function slew_home() {
     return (
         <div className="home-container">
             <img style={{ height: 120, float: 'right' }} src={require('./img/slew-logo-draft.png').default} alt="Logo VILLASweb" />
             <h1>Home</h1>
             <p>
-                Welcome to <b>{title}</b>!
+                Welcome to <b>SLEW</b>!
             </p>
             <p>SLEW is a learning platform for running experiments in a virtual power engineering world.
                 The platform enables to interact with the experiments in real time and perform analyses on the experimental results.</p>
diff --git a/src/branding/slew/slew-values.js b/src/branding/slew/slew-values.js
index 0c5b06e..34488da 100644
--- a/src/branding/slew/slew-values.js
+++ b/src/branding/slew/slew-values.js
@@ -32,10 +32,9 @@ const slew_values = {
       "VILLASframework": "https://villas.fein-aachen.org/doc"
    },
    style: {
-      bgcolor: 'rgba(107,29,26, 0.8)',
+      background: 'rgba(107,29,26, 0.8)',
       highlights: '#610C04',
       maincolor: 'rgba(40,0,0,0.8)',
-      primarytext: '#472120',
       secondarytext: '#472120',
       font: "16px Roboto, sans-serif",
       borderradius: "10px"
diff --git a/src/branding/villasweb/villasweb-values.js b/src/branding/villasweb/villasweb-values.js
index f4b2dd9..c055a32 100644
--- a/src/branding/villasweb/villasweb-values.js
+++ b/src/branding/villasweb/villasweb-values.js
@@ -28,9 +28,9 @@ const villasweb_values = {
       api: true,
    },
    style: {
-      bgcolor: '#6EA2B0',
+      background: '#6EA2B0',
       highlights: '#527984',
-      primarytext: '#4d4d4d',
+      maincolor: '#4d4d4d',
       secondarytext: '#818181',
    }
 }
diff --git a/src/common/header.js b/src/common/header.js
index 97d094b..a01575e 100644
--- a/src/common/header.js
+++ b/src/common/header.js
@@ -20,10 +20,19 @@ import branding from '../branding/branding';
 
 class Header extends React.Component {
   render() {
+    let hasSubtitle = branding.getSubtitle();
     return (
-      <header className="app-header">
-        <h1>{branding.values.title} - {branding.values.subtitle}</h1>
+      <div>
+      { hasSubtitle ?
+        <header className="app-header">
+        <h1>{branding.getTitle()} - {branding.getSubtitle()}</h1>
       </header>
+      :
+      <header className="app-header">
+        <h1>{branding.getTitle()} </h1>
+      </header>
+      }
+      </div>
     );
   }
 }
diff --git a/src/styles/app.css b/src/styles/app.css
index 9a4b9b5..9ba1fd9 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -22,10 +22,10 @@
 :root {
   --bg: #6EA2B0;
   --highlights: #527984;
-  --primarytext: #4d4d4d;
   --secondarytext: #818181;
   --borderradius: 0px;
   --mainfont: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --maincolor: #4d4d4d;
 }
 
 * {
@@ -33,12 +33,12 @@
 }
 
 body {
-  background-color: var(--bg);
+  background-color: var(--bg) !important;
 }
 
 .app {
   height: 100vh;
-  color: var(--primarytext);
+  color: var(--maincolor);
   border-radius: var(--borderradius);
 
 
diff --git a/src/user/login.js b/src/user/login.js
index 24f2fd5..f7dcc17 100644
--- a/src/user/login.js
+++ b/src/user/login.js
@@ -38,9 +38,6 @@ class Login extends Component {
     AppDispatcher.dispatch({
       type: 'config/load',
     });
-
-    // apply branding in case the login page gets refreshed
-    branding.applyBranding();
   }
 
   static getStores() {