diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss
index 53abd01f8..69cb296eb 100644
--- a/webapp/assets/_new/styles/tokens.scss
+++ b/webapp/assets/_new/styles/tokens.scss
@@ -356,3 +356,16 @@ $media-query-x-large: (min-width: 1200px);
 /** 
  * @tokens Background Images
  */
+
+/** 
+ * @tokens Header Color
+ */
+
+$color-header-background: $color-neutral-100;
+
+/** 
+ * @tokens Footer Color
+ */
+
+$color-footer-background: $color-neutral-100;
+
diff --git a/webapp/assets/styles/imports/_branding.scss b/webapp/assets/styles/imports/_branding.scss
index 473091f8c..2f746b0f2 100644
--- a/webapp/assets/styles/imports/_branding.scss
+++ b/webapp/assets/styles/imports/_branding.scss
@@ -1,37 +1,21 @@
-.main-navigation {
-    background-color: #6e8b87;
-}
-.main-navigation .ds-menu-item-link {
-    color: #a6ff00;
-}
-.main-navigation .ds-menu-item-link:hover {
-    color: #f2f2f1;
-}
+
+$color-primary: #6e8b87;
+$color-primary-light: #a6ff00;
+
+$color-header-background: $color-primary;
+$color-footer-background: $color-primary-light;
 
 .main-navigation a {
-    color: #a6ff00;
+    color: $color-primary-light;
 }
 .main-navigation a:hover {
-    color: #ffffff;
+    color: $color-neutral-100;
 }
 
 .main-navigation .locale-menu {
-    color: #a6ff00;
+    color: $color-primary-light;
 }
 
-.base-button {
-    color: #a6ff00;
-}
-
-.ds-menu-item-link {
-    color: antiquewhite;
-}
-.ds-menu-item-link.router-link-exact-active {
-    color: #6a8ee1;
-    background-color: #faf9fa;
-    border-left: 2px solid #a6ff00;
-}
-
-.ds-menu-item-navbar.ds-menu-item-show-submenu.ds-menu-item-level-0>.ds-menu-item-link {
-    color: #ffffff;
+.main-navigation  .base-button {
+    color: $color-primary-light;
 }
\ No newline at end of file
diff --git a/webapp/assets/styles/main.scss b/webapp/assets/styles/main.scss
index d797bbf4e..144701f83 100644
--- a/webapp/assets/styles/main.scss
+++ b/webapp/assets/styles/main.scss
@@ -179,6 +179,4 @@ hr {
 
 .dropdown-arrow {
   font-size: $font-size-xx-small;
-}
-
-@import './imports/_branding.scss';
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/webapp/components/Dropdown.vue b/webapp/components/Dropdown.vue
index c01b12bd9..7e4d21223 100644
--- a/webapp/components/Dropdown.vue
+++ b/webapp/components/Dropdown.vue
@@ -8,7 +8,7 @@
     :offset="offset"
   >
     <slot :toggleMenu="toggleMenu" :openMenu="openMenu" :closeMenu="closeMenu" :isOpen="isOpen" />
-    <div slot="popover" @mouseover="popoverMouseEnter" @mouseleave="popoveMouseLeave">
+    <div slot="popover" @mouseover="popoverMouseEnter" @mouseleave="popoverMouseLeave">
       <slot
         name="popover"
         :toggleMenu="toggleMenu"
@@ -97,7 +97,7 @@ export default {
       }
       this.clearTimeouts()
       if (useTimeout === true) {
-        this.popoveMouseLeave()
+        this.popoverMouseLeave()
       } else {
         this.isPopoverOpen = false
       }
@@ -113,7 +113,7 @@ export default {
         }, 500)
       }
     },
-    popoveMouseLeave() {
+    popoverMouseLeave() {
       if (this.developerNoAutoClosing) return
       if (this.disabled) {
         return
diff --git a/webapp/components/PageFooter/PageFooter.vue b/webapp/components/PageFooter/PageFooter.vue
index b9d41b4d0..67659e137 100644
--- a/webapp/components/PageFooter/PageFooter.vue
+++ b/webapp/components/PageFooter/PageFooter.vue
@@ -38,7 +38,7 @@ export default {
   position: fixed;
   bottom: 0px;
   z-index: 10;
-  background-color: #a6ff00;
+  background-color: $color-footer-background;
   width: 100%;
   padding: 10px 10px;
   box-shadow: 0px -6px 12px -4px rgba(0, 0, 0, 0.1);
diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.vue b/webapp/components/_new/generic/BaseButton/BaseButton.vue
index 23fbed8dc..d87598d76 100644
--- a/webapp/components/_new/generic/BaseButton/BaseButton.vue
+++ b/webapp/components/_new/generic/BaseButton/BaseButton.vue
@@ -141,5 +141,4 @@ export default {
     color: $color-neutral-100;
   }
 }
-@import '~/assets/styles/imports/_branding.scss';
 </style>
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 329f9d8a1..b41770926 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -168,6 +168,9 @@ export default {
 </script>
 
 <style lang="scss">
+.main-navigation {
+  background-color: $color-header-background;
+}
 .margin-right-20 {
   margin-right: 20px;
 }
diff --git a/webapp/nuxt.config.js b/webapp/nuxt.config.js
index 717aa0339..7a03194e9 100644
--- a/webapp/nuxt.config.js
+++ b/webapp/nuxt.config.js
@@ -91,13 +91,21 @@ export default {
   /*
    ** Global CSS
    */
-  css: ['~assets/_new/styles/resets.scss', '~assets/styles/main.scss'],
+  css: [
+    '~assets/_new/styles/resets.scss',
+    '~assets/styles/main.scss',
+    '~assets/styles/imports/_branding.scss',
+  ],
 
   /*
    ** Global processed styles
    */
   styleResources: {
-    scss: [styleguideStyles, '~assets/_new/styles/tokens.scss'],
+    scss: [
+      styleguideStyles,
+      '~assets/_new/styles/tokens.scss',
+      '~assets/styles/imports/_branding.scss',
+    ],
   },
 
   /*