diff --git a/backend/src/schema/resolvers/users/location.spec.js b/backend/src/schema/resolvers/users/location.spec.js
index 92f08893e..c0525ca1c 100644
--- a/backend/src/schema/resolvers/users/location.spec.js
+++ b/backend/src/schema/resolvers/users/location.spec.js
@@ -121,7 +121,7 @@ describe('Location Service', () => {
     const result = await query({ query: queryLocations, variables })
     expect(result.data.queryLocations).toEqual(
       expect.arrayContaining([
-        { id: 'place.14094307404564380', place_name: 'Berlin, Germany' },
+        { id: expect.stringMatching(/^place\.[0-9]+$/), place_name: 'Berlin, Germany' },
         {
           id: expect.stringMatching(/^place\.[0-9]+$/),
           place_name: 'Berlin, Maryland, United States',
diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss
index 53abd01f8..6aa6410df 100644
--- a/webapp/assets/_new/styles/tokens.scss
+++ b/webapp/assets/_new/styles/tokens.scss
@@ -356,3 +356,22 @@ $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;
+$color-footer-link: $color-primary;
+
+/** 
+ * @tokens Locale Menu Color
+ */
+
+$color-locale-menu: $text-color-soft;
\ No newline at end of file
diff --git a/webapp/assets/styles/imports/_branding.scss b/webapp/assets/styles/imports/_branding.scss
new file mode 100644
index 000000000..75058595d
--- /dev/null
+++ b/webapp/assets/styles/imports/_branding.scss
@@ -0,0 +1,5 @@
+/* 
+    *
+    * Here, all SCSS variables and classes can be adapted to your custom design. 
+    *
+*/
\ No newline at end of file
diff --git a/webapp/assets/styles/main.scss b/webapp/assets/styles/main.scss
index d6821e013..144701f83 100644
--- a/webapp/assets/styles/main.scss
+++ b/webapp/assets/styles/main.scss
@@ -179,4 +179,4 @@ hr {
 
 .dropdown-arrow {
   font-size: $font-size-xx-small;
-}
+}
\ 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/FilterMenu/CategoriesMenu.vue b/webapp/components/FilterMenu/CategoriesMenu.vue
index 37bd19c84..0b5505503 100644
--- a/webapp/components/FilterMenu/CategoriesMenu.vue
+++ b/webapp/components/FilterMenu/CategoriesMenu.vue
@@ -1,14 +1,8 @@
 <template>
   <dropdown ref="category-menu" placement="top-start" :offset="8" class="category-menu">
-    <base-button
-      slot="default"
-      :filled="filterActive"
-      :ghost="!filterActive"
-      slot-scope="{ toggleMenu }"
-      @click.prevent="toggleMenu()"
-    >
-      <ds-text uppercase>{{ $t('admin.categories.name') }}</ds-text>
-    </base-button>
+    <a href="#" slot="default" slot-scope="{ toggleMenu }" @click.prevent="toggleMenu()">
+      <ds-text bold size="large">{{ $t('admin.categories.name') }}</ds-text>
+    </a>
     <template slot="popover">
       <div class="category-menu-options">
         <h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>
@@ -40,6 +34,7 @@ export default {
   },
   computed: {
     ...mapGetters({
+      // TODO: implement visibility of active filter later on
       filterActive: 'posts/isActive',
     }),
   },
diff --git a/webapp/components/LocaleSwitch/LocaleSwitch.vue b/webapp/components/LocaleSwitch/LocaleSwitch.vue
index 353fc406a..2535ca145 100644
--- a/webapp/components/LocaleSwitch/LocaleSwitch.vue
+++ b/webapp/components/LocaleSwitch/LocaleSwitch.vue
@@ -117,7 +117,7 @@ export default {
   align-items: center;
   height: 100%;
   padding: $space-xx-small;
-  color: $text-color-soft;
+  color: $color-locale-menu;
 
   > .label {
     margin: 0 $space-xx-small;
diff --git a/webapp/components/Logo/Logo.vue b/webapp/components/Logo/Logo.vue
index ed5c147e8..3d7d336ce 100644
--- a/webapp/components/Logo/Logo.vue
+++ b/webapp/components/Logo/Logo.vue
@@ -59,7 +59,11 @@ export default {
   },
   data() {
     const logosObject = {
-      header: { path: logos.LOGO_HEADER_PATH, alt: 'Header', widthDefault: '130px' },
+      header: {
+        path: logos.LOGO_HEADER_PATH,
+        alt: 'Header',
+        widthDefault: logos.LOGO_HEADER_WIDTH,
+      },
       welcome: { path: logos.LOGO_WELCOME_PATH, alt: 'Welcome', widthDefault: '200px' },
       signup: { path: logos.LOGO_SIGNUP_PATH, alt: 'Sign Up', widthDefault: '200px' },
       logout: { path: logos.LOGO_LOGOUT_PATH, alt: 'Logging Out', widthDefault: '200px' },
@@ -107,7 +111,6 @@ export default {
 }
 
 .ds-logo-svg {
-  width: 130px;
   height: auto;
   fill: #000000;
 }
diff --git a/webapp/components/Logo/style.scss b/webapp/components/Logo/style.scss
index 305e907c5..69897422f 100644
--- a/webapp/components/Logo/style.scss
+++ b/webapp/components/Logo/style.scss
@@ -8,10 +8,4 @@
 
 .ds-logo-inverse {
   color: $text-color-primary-inverse;
-}
-
-.ds-logo-svg {
-  width: 130px;
-  height: auto;
-  fill: currentColor;
 }
\ No newline at end of file
diff --git a/webapp/components/PageFooter/PageFooter.vue b/webapp/components/PageFooter/PageFooter.vue
index 24d35244b..c71fc4b5c 100644
--- a/webapp/components/PageFooter/PageFooter.vue
+++ b/webapp/components/PageFooter/PageFooter.vue
@@ -38,11 +38,14 @@ export default {
   position: fixed;
   bottom: 0px;
   z-index: 10;
-  background-color: white;
+  background-color: $color-footer-background;
   width: 100%;
   padding: 10px 10px;
   box-shadow: 0px -6px 12px -4px rgba(0, 0, 0, 0.1);
 }
+.ds-footer a {
+  color: $color-footer-link;
+}
 .division-line {
   margin-left: 0.2rem;
   margin-right: 0.2rem;
diff --git a/webapp/constants/headerMenu.js b/webapp/constants/headerMenu.js
new file mode 100644
index 000000000..7055c44e5
--- /dev/null
+++ b/webapp/constants/headerMenu.js
@@ -0,0 +1,13 @@
+export default {
+  MENU: [
+    // {
+    //   name: 'Beiträge',
+    //   path: '/#',
+    // },
+    // {
+    //   name: 'Über Yunite',
+    //   path: '/#',
+    //   url: 'https://yunite.org',
+    // },
+  ],
+}
diff --git a/webapp/constants/logos.js b/webapp/constants/logos.js
index d093c7b46..2bea199da 100644
--- a/webapp/constants/logos.js
+++ b/webapp/constants/logos.js
@@ -2,6 +2,7 @@
 // this are the paths in the webapp
 export default {
   LOGO_HEADER_PATH: '/img/custom/logo-horizontal.svg',
+  LOGO_HEADER_WIDTH: '130px',
   LOGO_SIGNUP_PATH: '/img/custom/logo-squared.svg',
   LOGO_WELCOME_PATH: '/img/custom/logo-squared.svg',
   LOGO_LOGOUT_PATH: '/img/custom/logo-squared.svg',
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 1e4fe5cf5..3e2a4aa69 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -4,11 +4,39 @@
       <ds-container class="main-navigation-container" style="padding: 10px 10px">
         <div>
           <ds-flex class="main-navigation-flex">
-            <ds-flex-item :width="{ base: '142px' }">
+            <ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px">
               <nuxt-link :to="{ name: 'index' }" v-scroll-to="'.main-navigation'">
                 <logo logoType="header" />
               </nuxt-link>
             </ds-flex-item>
+
+            <ds-flex-item
+              v-for="item in menu"
+              :key="item.name"
+              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+              :width="{ base: 'auto' }"
+              style="margin-right: 20px"
+            >
+              <a v-if="item.url" :href="item.url" target="_blank">
+                <ds-text size="large" bold>
+                  {{ item.name }}
+                </ds-text>
+              </a>
+              <nuxt-link v-else :to="item.path">
+                <ds-text size="large" bold>
+                  {{ item.name }}
+                </ds-text>
+              </nuxt-link>
+            </ds-flex-item>
+            <ds-flex-item
+              v-if="categoriesActive && isLoggedIn"
+              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+              style="flex-grow: 0; flex-basis: auto; margin-right: 20px"
+            >
+              <client-only>
+                <categories-menu></categories-menu>
+              </client-only>
+            </ds-flex-item>
             <ds-flex-item
               :width="{ base: '40%', sm: '40%', md: '40%', lg: '0%' }"
               class="mobile-hamburger-menu"
@@ -16,16 +44,12 @@
               <base-button icon="bars" @click="toggleMobileMenuView" circle />
             </ds-flex-item>
             <ds-flex-item
-              v-if="categoriesActive && isLoggedIn"
-              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
-              style="flex-grow: 0; flex-basis: auto"
-            >
-              <client-only>
-                <categories-menu></categories-menu>
-              </client-only>
-            </ds-flex-item>
-            <ds-flex-item
-              :width="{ base: '45%', sm: '45%', md: '45%', lg: '50%' }"
+              :width="{
+                base: '45%',
+                sm: '45%',
+                md: isHeaderMenu ? 'auto' : '45%',
+                lg: isHeaderMenu ? 'auto' : '50%',
+              }"
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
               style="flex-shrink: 0; flex-grow: 1"
               id="nav-search-box"
@@ -43,7 +67,7 @@
               </client-only>
             </ds-flex-item>
             <ds-flex-item
-              style="background-color: white; flex-basis: auto"
+              style="flex-basis: auto"
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
             >
               <div
@@ -89,6 +113,8 @@
 
 <script>
 import Logo from '~/components/Logo/Logo'
+import LOGOS from '../constants/logos.js'
+import headerMenu from '../constants/headerMenu.js'
 import { mapGetters } from 'vuex'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import SearchField from '~/components/features/SearchField/SearchField.vue'
@@ -117,6 +143,9 @@ export default {
   mixins: [seo],
   data() {
     return {
+      LOGOS,
+      isHeaderMenu: headerMenu.MENU.length > 0,
+      menu: headerMenu.MENU,
       mobileSearchVisible: false,
       toggleMobileMenu: false,
       inviteRegistration: this.$env.INVITE_REGISTRATION === true, // for 'false' in .env INVITE_REGISTRATION is of type undefined and not(!) boolean false, because of internal handling,
@@ -141,6 +170,17 @@ export default {
 </script>
 
 <style lang="scss">
+.main-navigation {
+  background-color: $color-header-background;
+}
+.margin-right-20 {
+  margin-right: 20px;
+}
+.margin-x {
+  margin-left: 20px;
+  margin-right: 20px;
+  white-space: nowrap;
+}
 .topbar-locale-switch {
   display: flex;
   margin-right: $space-xx-small;
@@ -156,11 +196,6 @@ export default {
   align-items: center;
 }
 
-.main-navigation {
-  a {
-    color: $text-color-soft;
-  }
-}
 .main-navigation-right {
   display: flex;
   justify-content: flex-end;
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',
+    ],
   },
 
   /*
diff --git a/webapp/pages/settings/index.vue b/webapp/pages/settings/index.vue
index 5d59f5ecb..b060e1327 100644
--- a/webapp/pages/settings/index.vue
+++ b/webapp/pages/settings/index.vue
@@ -48,6 +48,7 @@ import { queryLocations } from '~/graphql/location'
 let timeout
 
 export default {
+  name: 'NewsFeed',
   data() {
     return {
       cities: [],