diff --git a/webapp/components/HeaderMenu/HeaderMenu.vue b/webapp/components/HeaderMenu/HeaderMenu.vue
new file mode 100644
index 000000000..1228d1e4a
--- /dev/null
+++ b/webapp/components/HeaderMenu/HeaderMenu.vue
@@ -0,0 +1,20 @@
+<template>
+    <div class="header-menu">
+    
+      <ds-menu v-if="show" :routes="menu" navbar style="margin-right: 20px"></ds-menu>
+ 
+    </div>
+</template>
+<script>
+import headerMenu from '../../constants/headerMenu.js'
+
+export default {
+ name: 'HeaderMenu',
+ data() {
+     return {
+         show: headerMenu.SHOW_HEADER_MENU,
+         menu: headerMenu.MENU,
+     }
+ },
+}
+</script>
\ No newline at end of file
diff --git a/webapp/constants/headerMenu.js b/webapp/constants/headerMenu.js
new file mode 100644
index 000000000..da7a72e85
--- /dev/null
+++ b/webapp/constants/headerMenu.js
@@ -0,0 +1,35 @@
+export default {
+    SHOW_HEADER_MENU: true,
+    MENU: [{
+      name: 'Themen',
+      path: '/#'
+    },
+    {
+      name: 'Gruppen',
+      path: '/#',
+      children: [
+        {
+          name: 'Gruppe 1',
+          path: '/#'
+        },
+        {
+          name: 'Gruppe 2',
+          path: '/#'
+        }
+      ]
+    },
+    {
+      name: 'Über Yunite',
+      path: '/#',
+      children: [
+        {
+          name: 'Impressum',
+          path: '/#'
+        },
+        {
+          name: 'Yunite Team',
+          path: '/#'
+        }
+      ]
+    }]
+  }
\ No newline at end of file
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 0dfd752bf..503b22185 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -9,6 +9,7 @@
                 <logo logoType="header" />
               </nuxt-link>
             </ds-flex-item>
+            <header-menu />
             <ds-flex-item
               :width="{ base: '40%', sm: '40%', md: '40%', lg: '0%' }"
               class="mobile-hamburger-menu"
@@ -16,7 +17,7 @@
               <base-button icon="bars" @click="toggleMobileMenuView" circle />
             </ds-flex-item>
             <ds-flex-item
-              :width="{ base: '45%', sm: '45%', md: '45%', lg: '50%' }"
+              :width="{ base: '45%', sm: '45%', md: '45%', lg: show ? 'auto' : '50%' }"
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
               style="flex-shrink: 0; flex-grow: 1"
               id="nav-search-box"
@@ -80,6 +81,8 @@
 
 <script>
 import Logo from '~/components/Logo/Logo'
+import HeaderMenu from '~/components/HeaderMenu/HeaderMenu.vue'
+import headerMenu from '../constants/headerMenu.js'
 import { mapGetters } from 'vuex'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import SearchField from '~/components/features/SearchField/SearchField.vue'
@@ -94,6 +97,7 @@ import InviteButton from '~/components/InviteButton/InviteButton'
 export default {
   components: {
     Logo,
+    HeaderMenu,
     LocaleSwitch,
     SearchField,
     Modal,
@@ -106,6 +110,7 @@ export default {
   mixins: [seo],
   data() {
     return {
+      show: headerMenu.SHOW_HEADER_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,