diff --git a/webapp/components/FilterMenu/FilterMenu.vue b/webapp/components/FilterMenu/FilterMenu.vue
index 9e211ccf9..74265803b 100644
--- a/webapp/components/FilterMenu/FilterMenu.vue
+++ b/webapp/components/FilterMenu/FilterMenu.vue
@@ -14,6 +14,7 @@
       <div class="filter-menu-options">
         <h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>
         <following-filter />
+        <categories-filter v-if="categoriesActive" />
       </div>
       <div class="filter-menu-options">
         <h2 class="title">{{ $t('filter-menu.order-by') }}</h2>
@@ -28,12 +29,19 @@ import Dropdown from '~/components/Dropdown'
 import { mapGetters } from 'vuex'
 import FollowingFilter from './FollowingFilter'
 import OrderByFilter from './OrderByFilter'
+import CategoriesFilter from './CategoriesFilter'
 
 export default {
   components: {
     Dropdown,
     FollowingFilter,
     OrderByFilter,
+    CategoriesFilter,
+  },
+  data() {
+    return {
+      categoriesActive: this.$env.CATEGORIES_ACTIVE,
+    }
   },
   props: {
     placement: { type: String },
diff --git a/webapp/components/NotificationMenu/NotificationMenu.vue b/webapp/components/NotificationMenu/NotificationMenu.vue
index ec991f0ef..4256278af 100644
--- a/webapp/components/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/NotificationMenu/NotificationMenu.vue
@@ -112,16 +112,6 @@ export default {
 </script>
 
 <style lang="scss">
-.notifications-menu {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-
-  .base-button {
-    overflow: visible;
-  }
-}
-
 .notifications-menu-popover {
   max-width: 500px;
   margin-bottom: $size-height-base;
diff --git a/webapp/constants/headerMenu.js b/webapp/constants/headerMenu.js
index 5365e0dc1..cf5069f39 100644
--- a/webapp/constants/headerMenu.js
+++ b/webapp/constants/headerMenu.js
@@ -1,12 +1,12 @@
 export default {
   MENU: [
-    // {
-    //   nameIdent: 'ocelotRebranding.newsFeed',
-    //   path: '/',
-    // },
-    // {
-    //   nameIdent: 'ocelotRebranding.about',
-    //   url: 'https://ocelot.org',
-    // },
+    {
+      nameIdent: 'Über Ocelot',
+      path: '/',
+    },
+    {
+      nameIdent: 'About',
+      url: 'https://ocelot.org',
+    },
   ],
 }
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index ea980cdf8..7910487d9 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -3,7 +3,8 @@
     <div class="main-navigation">
       <ds-container class="main-navigation-container" style="padding: 10px 10px">
         <div>
-          <ds-flex class="main-navigation-flex">
+          <!-- header menu -->
+          <ds-flex v-if="!showMobileMenu" class="main-navigation-flex">
             <!-- logo -->
             <ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px">
               <nuxt-link :to="{ name: 'index' }" v-scroll-to="'.main-navigation'">
@@ -30,29 +31,13 @@
                 </ds-text>
               </nuxt-link>
             </ds-flex-item>
-            <!-- categories-menu -->
-            <ds-flex-item
-              v-if="categoriesActive && isLoggedIn"
-              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
-              class="branding-menu"
-              style="flex-grow: 0; flex-basis: auto; margin-right: 20px"
-            >
-              <client-only>
-                <categories-menu></categories-menu>
-              </client-only>
-            </ds-flex-item>
-            <!-- hamburger-menu -->
-            <ds-flex-item
-              :width="{ base: '20%', sm: '40%', md: '40%', lg: '0%' }"
-              class="mobile-hamburger-menu"
-            >
-              <base-button icon="bars" @click="toggleMobileMenuView" circle />
-            </ds-flex-item>
+            
             <!-- search-field -->
             <ds-flex-item
               v-if="isLoggedIn"
               id="nav-search-box"
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+              class="header-search"
               :width="{
                 base: '45%',
                 sm: '40%',
@@ -108,15 +93,73 @@
               </div>
             </ds-flex-item>
           </ds-flex>
-          <ds-flex>
-            <!-- Footer menu if mobile -->
-            <ds-flex-item
-              style="flex-basis: auto"
-              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
-              class="footer-mobile"
+
+          <!-- mobile header menu -->
+          <div v-else>
+            <!-- logo, hamburger-->
+            <ds-flex>
+              <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>
+
+              <!-- hamburger button -->
+              <ds-flex-item   class="mobile-hamburger-menu">
+                  <client-only >
+                    <div style="display: inline-flex; padding-right: 20px;">
+                      <notification-menu />
+                    </div>
+                  </client-only>
+                <base-button icon="bars" @click="toggleMobileMenuView" circle />
+              </ds-flex-item>
+            </ds-flex>
+            <!-- search, filter-->
+            <ds-flex class="mobile-menu">
+              <!-- search-field mobile-->
+              <ds-flex-item
+                v-if="isLoggedIn"
+                :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+                style="padding: 20px"
+              >
+                <search-field />
+              </ds-flex-item>
+              <!-- filter menu mobile-->
+              <ds-flex-item
+                v-if="isLoggedIn"
+                :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+                style="flex-grow: 0; flex-basis: auto; padding: 20px 0"
+              >
+                <client-only>
+                  <filter-menu v-show="showFilterMenuDropdown" />
+                </client-only>
+              </ds-flex-item>
+            </ds-flex>
+            <!-- switch language, notification, invite, profil -->
+            <ds-flex style="margin: 0 20px ">
+              <!-- locale-switch mobile-->
+              <ds-flex-item :class="{ 'hide-mobile-menu': !toggleMobileMenu }">
+                <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
+              </ds-flex-item> 
+              <!-- invite-button mobile-->
+              <ds-flex-item :class="{ 'hide-mobile-menu': !toggleMobileMenu }" style="text-align: center;">
+                <client-only>
+                        <invite-button placement="top" />
+                      </client-only>
+              </ds-flex-item>
+              <ds-flex-item :class="{ 'hide-mobile-menu': !toggleMobileMenu }" style="text-align: end;">
+                <client-only>
+                      <!-- avatar-menu mobile-->
+                      <avatar-menu placement="top" />
+                    </client-only>
+              </ds-flex-item>
+            </ds-flex>
+            <div
+            :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+                class="mobile-menu footer-mobile"
             >
               <!-- dynamic branding menu  -->
-              <ul v-if="isHeaderMenu">
+              <ul v-if="isHeaderMenu" class="dynamic-branding-mobil">
                 <li v-for="item in menu" :key="item.name">
                   <a v-if="item.url" :href="item.url" target="_blank">
                     <ds-text size="large" bold>
@@ -130,29 +173,17 @@
                   </nuxt-link>
                 </li>
               </ul>
-              <!-- dynamic branding menu Categories / Topic  -->
-              <ul>
-                <li
-                  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>
-                </li>
-              </ul>
               <hr />
               <!-- dynamic footer menu in header  -->
-              <ul>
+              <ul class="dynamic-footer-mobil">
                 <li v-for="pageParams in links.FOOTER_LINK_LIST" :key="pageParams.name">
                   <page-params-link :pageParams="pageParams">
                     {{ $t(pageParams.internalPage.footerIdent) }}
                   </page-params-link>
                 </li>
               </ul>
-            </ds-flex-item>
-          </ds-flex>
+            </div>
+          </div>
         </div>
       </ds-container>
     </div>
@@ -183,7 +214,6 @@ import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
 import PageFooter from '~/components/PageFooter/PageFooter'
 import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
 import InviteButton from '~/components/InviteButton/InviteButton'
-import CategoriesMenu from '~/components/FilterMenu/CategoriesMenu.vue'
 import links from '~/constants/links.js'
 import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
 
@@ -198,12 +228,12 @@ export default {
     FilterMenu,
     PageFooter,
     InviteButton,
-    CategoriesMenu,
     PageParamsLink,
   },
   mixins: [seo],
   data() {
     return {
+      windowWidth: null ,
       links,
       LOGOS,
       isHeaderMenu: headerMenu.MENU.length > 0,
@@ -222,12 +252,20 @@ export default {
       const [firstRoute] = this.$route.matched
       return firstRoute && firstRoute.name === 'index'
     },
+    showMobileMenu() {
+      return  this.windowWidth < 810 
+    }
   },
   methods: {
     toggleMobileMenuView() {
       this.toggleMobileMenu = !this.toggleMobileMenu
     },
   },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.windowWidth = window.innerWidth
+    })
+  },
 }
 </script>
 
@@ -270,11 +308,22 @@ export default {
   text-align: right;
 }
 
-.ds-flex-item.footer-mobile ul {
-  margin-left: 20px;
+.mobile-menu {
+ margin: 0 20px;
+}
+.mobile-search {
+  margin-top: 20px;
+}
+
+.dynamic-branding-mobil, 
+.dynamic-footer-mobil {
+ 
   line-height: 30px;
   font-size: large;
 }
+.dynamic-branding-mobil li{
+  margin: 17px 0;
+}
 
 @media only screen and (max-width: 810px) {
   #nav-search-box,
@@ -284,16 +333,13 @@ export default {
   .main-navigation-right {
     width: 100%;
   }
-  .branding-menu,
   .hide-mobile-menu {
     display: none;
   }
+  
 }
 @media only screen and (min-width: 810px) {
-  .footer-mobile,
-  .mobile-hamburger-menu {
-    display: none;
-  }
+   
   .main-navigation-right {
     width: 100%;
   }