diff --git a/packages/boilerplate/api-client/src/api/getCategory/index.ts b/packages/boilerplate/api-client/src/api/getCategory/index.ts
index 4f42f4ad660..4e5d960ace2 100644
--- a/packages/boilerplate/api-client/src/api/getCategory/index.ts
+++ b/packages/boilerplate/api-client/src/api/getCategory/index.ts
@@ -5,25 +5,81 @@ export default async function getCategory(context, params, customQuery?: CustomQ
   return Promise.resolve([
     {
       id: 1,
+      name: 'New',
+      slug: 'new',
+      childCount: 2,
+      children: [
+        {
+          id: 15,
+          name: 'Women',
+          slug: 'new-women',
+          childCount: 2,
+          children: [
+            {
+              id: 16,
+              name: 'Clothing',
+              slug: 'new-women-clothing',
+              childCount: 0,
+              children: []
+            },
+            {
+              id: 17,
+              name: 'Shoes',
+              slug: 'new-women-shoes',
+              childCount: 0,
+              children: []
+            }
+          ]
+        },
+        {
+          id: 11,
+          name: 'Men',
+          slug: 'new-men',
+          childCount: 1,
+          children: [
+            {
+              id: 18,
+              name: 'Clothing',
+              slug: 'new-men-clothing',
+              childCount: 0,
+              children: []
+            },
+            {
+              id: 19,
+              name: 'Shoes',
+              slug: 'new-men-shoes',
+              childCount: 0,
+              children: []
+            }
+          ]
+        }
+      ]
+    },
+    {
+      id: 2,
       name: 'Women',
       slug: 'women',
-      items: [
+      childCount: 2,
+      children: [
         {
           id: 4,
           name: 'Women jackets',
           slug: 'women-jackets',
-          items: [
+          childCount: 2,
+          children: [
             {
               id: 9,
               name: 'Winter jackets',
               slug: 'winter-jackets',
-              items: []
+              childCount: 0,
+              children: []
             },
             {
               id: 10,
               name: 'Autumn jackets',
               slug: 'autmun-jackets',
-              items: []
+              childCount: 0,
+              children: []
             }
           ]
         },
@@ -31,44 +87,51 @@ export default async function getCategory(context, params, customQuery?: CustomQ
           id: 5,
           name: 'Skirts',
           slug: 'skirts',
-          items: []
+          childCount: 0,
+          children: []
         }
       ]
     },
     {
-      id: 2,
+      id: 3,
       name: 'Men',
       slug: 'men',
-      items: [
+      childCount: 1,
+      children: [
         {
           id: 6,
           name: 'Men T-shirts',
           slug: 'men-tshirts',
-          items: []
+          childCount: 0,
+          children: []
         }
       ]
     },
     {
-      id: 3,
+      id: 4,
       name: 'Kids',
       slug: 'kids',
-      items: [
+      childCount: 1,
+      children: [
         {
           id: 7,
           name: 'Toys',
           slug: 'toys',
-          items: [
+          childCount: 2,
+          children: [
             {
               id: 8,
               name: 'Toy Cars',
               slug: 'toy-cars',
-              items: []
+              childCount: 0,
+              children: []
             },
             {
               id: 8,
               name: 'Dolls',
               slug: 'dolls',
-              items: []
+              childCount: 0,
+              children: []
             }
           ]
         }
diff --git a/packages/boilerplate/theme/static/megamenu/bannerA.webp b/packages/boilerplate/theme/static/megamenu/bannerA.webp
new file mode 100644
index 00000000000..a5ab92d2662
Binary files /dev/null and b/packages/boilerplate/theme/static/megamenu/bannerA.webp differ
diff --git a/packages/boilerplate/theme/static/megamenu/bannerB.webp b/packages/boilerplate/theme/static/megamenu/bannerB.webp
new file mode 100644
index 00000000000..32290c8e352
Binary files /dev/null and b/packages/boilerplate/theme/static/megamenu/bannerB.webp differ
diff --git a/packages/commercetools/theme/components/Header/HeaderNav.vue b/packages/commercetools/theme/components/Header/HeaderNav.vue
new file mode 100644
index 00000000000..da071b95e29
--- /dev/null
+++ b/packages/commercetools/theme/components/Header/HeaderNav.vue
@@ -0,0 +1,111 @@
+<template>
+  <SfHeaderNavigation>
+    <SfHeaderNavigationItem
+      v-for="category in categories"
+      :key="category.id"
+      :label="category.name"
+      @mouseenter="() => handleMouseEnter(category.slug)"
+      @mouseleave="() => handleMouseLeave()"
+      @click="handleMouseLeave()"
+      :link="localePath(`/c/${category.slug}`)"
+    >
+      <SfMegaMenu
+        is-absolute
+        :visible="currentCatSlug === category.slug"
+        :title="category.name"
+        @close="currentCatSlug = ''"
+        v-if="activeSubCategory && activeSubCategory[0] && activeSubCategory[0].children"
+      >
+        <SfMegaMenuColumn
+          v-for="subCategory in activeSubCategory[0].children"
+          :key="subCategory.id"
+          :title="subCategory.name"
+        >
+          <SfLoader :loading="subCategoriesLoading">
+            <SfList>
+              <SfListItem
+                v-for="subCategoryChild in subCategory.children"
+                :key="subCategoryChild.id"
+              >
+                <SfMenuItem :label="subCategoryChild.name" :link="localePath(`/c/${subCategoryChild.slug}`)">
+                  <SfLink>
+                    {{ subCategoryChild.name }}
+                  </SfLink>
+                </SfMenuItem>
+              </SfListItem>
+            </SfList>
+          </SfLoader>
+        </SfMegaMenuColumn>
+        <NewCatBanners v-if="currentCatSlug === 'new'" />
+      </SfMegaMenu>
+    </SfHeaderNavigationItem>
+  </SfHeaderNavigation>
+</template>
+
+<script>
+import { SfMegaMenu, SfMenuItem, SfList, SfBanner, SfLoader } from '@storefront-ui/vue';
+import { useCategory } from '@vue-storefront/commercetools';
+import { onSSR } from '@vue-storefront/core';
+import { reactive, ref } from '@vue/composition-api';
+import debounce from 'lodash.debounce';
+
+export default {
+  name: 'HeaderNav',
+  components: {
+    SfMegaMenu,
+    SfMenuItem,
+    SfList,
+    SfBanner,
+    SfLoader,
+    NewCatBanners: () => import('./NewCatBanners')
+  },
+  setup (_, { emit }) {
+    const { categories, search } = useCategory('menu-categories');
+    const { categories: subCategories, search: subCategoriesSearch, loading: subCategoriesLoading } = useCategory('menu-subCategories');
+    const currentCatSlug = ref('');
+    const activeSubCategory = ref(null);
+    const fetchedSubCategories = reactive({});
+
+    const handleMouseEnter = debounce(async slug => {
+      currentCatSlug.value = slug;
+      const { childCount } = categories.value.find(category => category.slug === currentCatSlug.value);
+      emit('setOverlay', Boolean(childCount));
+
+      if (!fetchedSubCategories[slug] && Boolean(childCount)) {
+        await subCategoriesSearch({ slug });
+        fetchedSubCategories[slug] = subCategories.value;
+      }
+      activeSubCategory.value = fetchedSubCategories[currentCatSlug.value];
+    }, 200);
+
+    const handleMouseLeave = debounce(() => {
+      emit('setOverlay', false);
+      currentCatSlug.value = '';
+    }, 200);
+
+    onSSR(async () => {
+      await search({ customQuery: { categories: 'root-categories-query' } });
+    });
+
+    return {
+      categories,
+      fetchedSubCategories,
+      activeSubCategory,
+      subCategories,
+      currentCatSlug,
+      subCategoriesLoading,
+      handleMouseEnter,
+      handleMouseLeave
+    };
+  }
+};
+</script>
+
+<style lang='scss'>
+.sf-mega-menu__bar.sf-bar {
+  display: flex;
+  @include for-desktop {
+    display:  none;
+  }
+}
+</style>
diff --git a/packages/commercetools/theme/components/Header/MobileMenu.vue b/packages/commercetools/theme/components/Header/MobileMenu.vue
new file mode 100644
index 00000000000..cab0fb08a41
--- /dev/null
+++ b/packages/commercetools/theme/components/Header/MobileMenu.vue
@@ -0,0 +1,109 @@
+<template>
+  <SfMegaMenu
+    visible
+    @close="toggleMobileMenu"
+  >
+    <SfMegaMenuColumn
+      v-for="category in categories"
+      :key="category.id"
+      :title="category.name"
+    >
+      <template #title="{ title, changeActive }">
+        <SfMenuItem
+          :label="title"
+          class="sf-mega-menu-column__header"
+          @click="changeActive(title); handleClickCategory(category.slug)"
+        />
+      </template>
+      <SfList v-if="activeCategory && activeCategory[0] && activeCategory[0].children">
+        <SfListItem
+          v-for="subCategory in activeCategory[0].children"
+          :key="subCategory.id"
+        >
+          <SfMenuItem
+            :label="subCategory.name"
+            @click.native="handleClickSubCategory(subCategory.slug)"
+          >
+            <SfLink>
+              {{ subCategory.name }}
+            </SfLink>
+          </SfMenuItem>
+        </SfListItem>
+      </SfList>
+      <NewCatBanners v-if="currentCatSlug === 'new'" />
+    </SfMegaMenuColumn>
+  </SfMegaMenu>
+</template>
+
+<script>
+import { SfMegaMenu, SfMenuItem, SfList, SfLoader } from '@storefront-ui/vue';
+import { useCategory } from '@vue-storefront/commercetools';
+import { useUiState } from '~/composables';
+import { onSSR } from '@vue-storefront/core';
+import { ref } from '@vue/composition-api';
+
+export default {
+  name: 'MobileMenu',
+  components: {
+    SfMegaMenu,
+    SfMenuItem,
+    SfList,
+    SfLoader,
+    NewCatBanners: () => import('./NewCatBanners')
+  },
+  setup (_, { root }) {
+    const { categories, search } = useCategory('menu-categories');
+    const { categories: subCategories, search: subCategoriesSearch, loading: subCategoriesLoading } = useCategory('menu-subCategories');
+    const currentCatSlug = ref('');
+    const deepCatSlug = ref('');
+    const activeCategory = ref(null);
+    const fetchedCategories = ref({});
+    const { toggleMobileMenu } = useUiState();
+
+    const getSubCategories = async (slug, childCount) => {
+      if (!childCount) {
+        root.$router.push(`/c/${slug}`);
+        toggleMobileMenu();
+      }
+      if (!fetchedCategories.value[slug]) {
+        await subCategoriesSearch({ slug });
+        fetchedCategories.value = {
+          ...fetchedCategories.value,
+          [slug]: subCategories.value
+        };
+      }
+      activeCategory.value = fetchedCategories.value[slug];
+    };
+
+    const handleClickCategory = async slug => {
+      currentCatSlug.value = slug;
+      const { childCount } = categories.value.find(category => category.slug === currentCatSlug.value);
+
+      await getSubCategories(slug, childCount);
+    };
+
+    const handleClickSubCategory = async slug => {
+      deepCatSlug.value = slug;
+      if (activeCategory.value && activeCategory.value[0] && activeCategory.value[0].children) {
+        const { childCount } = activeCategory.value[0].children.find(child => child.slug === deepCatSlug.value);
+
+        await getSubCategories(slug, childCount);
+      }
+    };
+
+    onSSR(async () => {
+      await search({ customQuery: { categories: 'root-categories-query' } });
+    });
+
+    return {
+      categories,
+      activeCategory,
+      currentCatSlug,
+      handleClickCategory,
+      handleClickSubCategory,
+      toggleMobileMenu,
+      subCategoriesLoading
+    };
+  }
+};
+</script>
diff --git a/packages/commercetools/theme/middleware.config.js b/packages/commercetools/theme/middleware.config.js
index 834ffc13788..03fb2174ff8 100644
--- a/packages/commercetools/theme/middleware.config.js
+++ b/packages/commercetools/theme/middleware.config.js
@@ -24,6 +24,36 @@ module.exports = {
         },
         currency: 'USD',
         country: 'US'
+      },
+      customQueries: {
+        'root-categories-query': ({ variables }) => {
+
+          const rootCategoriesQuery = `
+            fragment DefaultRootCategory on Category {
+              id
+              slug(acceptLanguage: $acceptLanguage)
+              name(acceptLanguage: $acceptLanguage)
+              childCount
+            }
+            query categories($where: String, $sort: [String!], $limit: Int, $offset: Int, $acceptLanguage: [Locale!]) {
+              categories(where: $where, sort: $sort, limit: $limit, offset: $offset) {
+                offset
+                count
+                total
+                results {
+                  ...DefaultRootCategory
+                }
+              }
+            }
+          `;
+
+          variables.where = 'parent is not defined';
+
+          return {
+            query: rootCategoriesQuery,
+            variables
+          };
+        }
       }
     }
   }
diff --git a/packages/commercetools/theme/static/megamenu/bannerA.webp b/packages/commercetools/theme/static/megamenu/bannerA.webp
new file mode 100644
index 00000000000..a5ab92d2662
Binary files /dev/null and b/packages/commercetools/theme/static/megamenu/bannerA.webp differ
diff --git a/packages/commercetools/theme/static/megamenu/bannerB.webp b/packages/commercetools/theme/static/megamenu/bannerB.webp
new file mode 100644
index 00000000000..32290c8e352
Binary files /dev/null and b/packages/commercetools/theme/static/megamenu/bannerB.webp differ
diff --git a/packages/core/core/__tests__/composables/useUiState.spec.ts b/packages/core/core/__tests__/composables/useUiState.spec.ts
index 4ec89bdd5c7..d775a4ca4b0 100644
--- a/packages/core/core/__tests__/composables/useUiState.spec.ts
+++ b/packages/core/core/__tests__/composables/useUiState.spec.ts
@@ -6,11 +6,13 @@ const {
   isLoginModalOpen,
   isCategoryGridView,
   isFilterSidebarOpen,
+  isMobileMenuOpen,
   toggleCartSidebar,
   toggleWishlistSidebar,
   toggleLoginModal,
   toggleCategoryGridView,
-  toggleFilterSidebar
+  toggleFilterSidebar,
+  toggleMobileMenu
 } = useUiState();
 
 describe('useUiState', () => {
@@ -53,4 +55,12 @@ describe('useUiState', () => {
 
     expect(expectedIsFilterSidebarOpen).toBe(isFilterSidebarOpen.value);
   });
+
+  it('Mobile Menu', () => {
+    const expectedIsMobileMenuOpen = !isMobileMenuOpen.value;
+
+    toggleMobileMenu();
+
+    expect(expectedIsMobileMenuOpen).toBe(isMobileMenuOpen.value);
+  });
 });
diff --git a/packages/core/docs/changelog/5267.js b/packages/core/docs/changelog/5267.js
new file mode 100644
index 00000000000..f349c125f6f
--- /dev/null
+++ b/packages/core/docs/changelog/5267.js
@@ -0,0 +1,8 @@
+module.exports = {
+  description: 'added MegaMenu to theme',
+  link: 'https://github.com/vuestorefront/vue-storefront/issues/5267',
+  isBreaking: false,
+  breakingChanges: [],
+  author: 'Łukasz Jędrasik',
+  linkToGitHubAccount: 'https://github.com/lukaszjedrasik'
+};
diff --git a/packages/core/nuxt-theme-module/theme/components/BottomNavigation.vue b/packages/core/nuxt-theme-module/theme/components/BottomNavigation.vue
index 39792b33c73..696dcdaac55 100644
--- a/packages/core/nuxt-theme-module/theme/components/BottomNavigation.vue
+++ b/packages/core/nuxt-theme-module/theme/components/BottomNavigation.vue
@@ -2,9 +2,9 @@
 <!-- TODO: create logic with isActive prop for BottomNavigationItems -->
   <SfBottomNavigation class="navigation-bottom smartphone-only">
     <nuxt-link data-cy="bottom-navigation-url_home" to="/">
-      <SfBottomNavigationItem :class="$route.path == '/' ? 'sf-bottom-navigation__item--active' : ''" icon="home" size="20px" label="Home"/>
+      <SfBottomNavigationItem :class="$route.path == '/' ? 'sf-bottom-navigation__item--active' : ''" icon="home" size="20px" label="Home" @click="handleHomeClick"/>
     </nuxt-link>
-    <SfBottomNavigationItem data-cy="bottom-navigation-url_menu" icon="menu" size="20px" label="Menu"/>
+    <SfBottomNavigationItem data-cy="bottom-navigation-url_menu" icon="menu" size="20px" label="Menu" @click="toggleMobileMenu"/>
     <SfBottomNavigationItem data-cy="bottom-navigation-url_wishlist" icon="heart" size="20px" label="Wishlist" @click="toggleWishlistSidebar"/>
     <SfBottomNavigationItem data-cy="bottom-navigation-url_account" icon="profile" size="20px" label="Account" @click="handleAccountClick"/>
     <!-- TODO: add logic for label - if on Home then Basket, if on PDC then AddToCart etc. -->
@@ -31,6 +31,7 @@
 import { SfBottomNavigation, SfIcon, SfCircleIcon } from '@storefront-ui/vue';
 import { useUiState } from '~/composables';
 import { useUser } from '<%= options.generate.replace.composables %>';
+import { watch } from '@vue/composition-api';
 
 export default {
   components: {
@@ -39,20 +40,32 @@ export default {
     SfCircleIcon
   },
   setup(props, { root }) {
-    const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal } = useUiState();
+    const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal, toggleMobileMenu, isMobileMenuOpen } = useUiState();
     const { isAuthenticated } = useUser();
 
     const handleAccountClick = async () => {
+      if (isMobileMenuOpen.value) toggleMobileMenu();
       if (isAuthenticated.value) {
         return root.$router.push('/my-account');
       }
       toggleLoginModal();
     };
 
+    const handleHomeClick = () => {
+      if (isMobileMenuOpen.value) toggleMobileMenu();
+    };
+
+    watch(isMobileMenuOpen, () => {
+      if (isMobileMenuOpen.value) document.body.classList.add('no-scroll');
+      else document.body.classList.remove('no-scroll');
+    });
+
     return {
       toggleWishlistSidebar,
       toggleCartSidebar,
-      handleAccountClick
+      toggleMobileMenu,
+      handleAccountClick,
+      handleHomeClick
     };
   }
 };
diff --git a/packages/core/nuxt-theme-module/theme/components/AppHeader.vue b/packages/core/nuxt-theme-module/theme/components/Header/AppHeader.vue
similarity index 88%
rename from packages/core/nuxt-theme-module/theme/components/AppHeader.vue
rename to packages/core/nuxt-theme-module/theme/components/Header/AppHeader.vue
index e2218e899ec..734bc434d9b 100644
--- a/packages/core/nuxt-theme-module/theme/components/AppHeader.vue
+++ b/packages/core/nuxt-theme-module/theme/components/Header/AppHeader.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <SfOverlay :visible="isOverlayVisible" />
     <SfHeader
       data-cy="app-header"
       class="sf-header--has-mobile-search"
@@ -12,8 +13,10 @@
         </nuxt-link>
       </template>
       <template #navigation>
-        <SfHeaderNavigationItem class="nav-item" data-cy="app-header-url_women" label="WOMEN" :link="localePath('/c/women')"/>
-        <SfHeaderNavigationItem class="nav-item"  data-cy="app-header-url_men" label="MEN" :link="localePath('/c/men')" />
+        <HeaderNav
+          v-if="!isMobile"
+          @setOverlay="isOverlayVisible = $event"
+        />
       </template>
       <template #aside>
         <LocaleSelector class="smartphone-only" />
@@ -90,18 +93,23 @@
     </SfHeader>
     <SearchResults :visible="isSearchOpen" :result="result" @close="closeSearch" />
     <SfOverlay :visible="isSearchOpen" />
+    <MobileMenu
+      v-if="isMobile && isMobileMenuOpen"
+      class="mobile-menu"
+    />
   </div>
 </template>
 
 <script>
 import { SfHeader, SfImage, SfIcon, SfButton, SfBadge, SfSearchBar, SfOverlay } from '@storefront-ui/vue';
-import { useUiState } from '~/composables';
+import { useUiState, useUiHelpers } from '~/composables';
 import { useCart, useWishlist, useUser, cartGetters, useFacet } from '<%= options.generate.replace.composables %>';
 import { computed, ref, onBeforeUnmount, watch } from '@vue/composition-api';
 import { onSSR } from '@vue-storefront/core';
-import { useUiHelpers } from '~/composables';
 import LocaleSelector from './LocaleSelector';
 import SearchResults from '~/components/SearchResults';
+import HeaderNav from './HeaderNav';
+import MobileMenu from './MobileMenu';
 import { clickOutside } from '@storefront-ui/vue/src/utilities/directives/click-outside/click-outside-directive.js';
 import {
   mapMobileObserver,
@@ -119,11 +127,13 @@ export default {
     SfBadge,
     SfSearchBar,
     SearchResults,
-    SfOverlay
+    SfOverlay,
+    HeaderNav,
+    MobileMenu
   },
   directives: { clickOutside },
   setup(props, { root }) {
-    const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal } = useUiState();
+    const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal, isMobileMenuOpen } = useUiState();
     const { setTermForUrl, getFacetsFromURL, getSearchTermFromUrl} = useUiHelpers();
     const { result, search } = useFacet();
     const { isAuthenticated, load: loadUser } = useUser();
@@ -132,6 +142,7 @@ export default {
     const term = ref(getFacetsFromURL().term);
     const isSearchOpen = ref(false);
     const searchBarRef = ref(null);
+    const isOverlayVisible = ref(false);
 
     const cartTotalItems = computed(() => {
       const count = cartGetters.getTotalItems(cart.value);
@@ -209,7 +220,9 @@ export default {
       result,
       closeOrFocusSearchBar,
       searchBarRef,
-      isMobile
+      isMobile,
+      isOverlayVisible,
+      isMobileMenuOpen
     };
   }
 };
@@ -220,6 +233,7 @@ export default {
   --header-padding:  var(--spacer-sm);
   @include for-desktop {
     --header-padding: 0;
+    z-index: var(--header-wrapper-z-index, 1);
   }
   &__logo-image {
       height: 100%;
@@ -231,10 +245,19 @@ export default {
 .nav-item {
   --header-navigation-item-margin: 0 var(--spacer-base);
 }
-
 .cart-badge {
   position: absolute;
   bottom: 40%;
   left: 40%;
 }
+.mobile-menu {
+  position: fixed;
+  opacity: 1;
+  visibility: visible;
+  overflow-y: auto;
+  top: 0;
+  z-index: 1;
+  width: 100%;
+  --mega-menu-aside-menu-height: calc(100vh - var(--bottom-navigation-height) - var(--bar-height));
+}
 </style>
diff --git a/packages/core/nuxt-theme-module/theme/components/Header/HeaderNav.vue b/packages/core/nuxt-theme-module/theme/components/Header/HeaderNav.vue
new file mode 100644
index 00000000000..cc01e6b000f
--- /dev/null
+++ b/packages/core/nuxt-theme-module/theme/components/Header/HeaderNav.vue
@@ -0,0 +1,95 @@
+<template>
+  <SfHeaderNavigation>
+    <SfHeaderNavigationItem
+      v-for="category in categories"
+      :key="category.name"
+      :label="category.name"
+      @mouseenter="() => handleMouseEnter(category.slug)"
+      @mouseleave="() => handleMouseLeave()"
+      @click="handleMouseLeave()"
+      :link="localePath(`/c/${category.slug}`)"
+    >
+      <SfMegaMenu
+        is-absolute
+        :visible="currentCatSlug === category.slug"
+        :title="category.name"
+        @close="currentCatSlug = ''"
+        v-if="category && category.children && category.children.length"
+      >
+        <SfMegaMenuColumn
+          v-for="subCategory in category.children"
+          :key="subCategory.id"
+          :title="subCategory.name"
+        >
+          <SfList>
+            <SfListItem
+              v-for="subCategoryChild in subCategory.children"
+              :key="subCategoryChild.name"
+            >
+              <SfMenuItem :label="subCategoryChild.name" :link="localePath(`/c/${subCategoryChild.slug}`)">
+                <SfLink>
+                  {{ subCategoryChild.name }}
+                </SfLink>
+              </SfMenuItem>
+            </SfListItem>
+          </SfList>
+        </SfMegaMenuColumn>
+        <NewCatBanners v-if="currentCatSlug === 'new'" />
+      </SfMegaMenu>
+    </SfHeaderNavigationItem>
+  </SfHeaderNavigation>
+</template>
+
+<script>
+import { SfMegaMenu, SfMenuItem, SfList } from '@storefront-ui/vue';
+import { useCategory } from '<%= options.generate.replace.composables %>';
+import { onSSR } from '@vue-storefront/core';
+import { ref } from '@vue/composition-api';
+
+export default {
+  name: 'HeaderNav',
+  components: {
+    SfMegaMenu,
+    SfMenuItem,
+    SfList,
+    NewCatBanners: () => import('./NewCatBanners')
+  },
+  setup (_, { emit }) {
+    const { categories, search } = useCategory('menu-categories');
+    const currentCatSlug = ref('');
+
+    const handleMouseEnter = (slug) => {
+      if (currentCatSlug.value) return;
+
+      currentCatSlug.value = slug;
+      const { childCount } = categories.value.find(category => category.slug === currentCatSlug.value);
+      emit('setOverlay', Boolean(childCount));
+    };
+
+    const handleMouseLeave = () => {
+      emit('setOverlay', false);
+      currentCatSlug.value = '';
+    };
+
+    onSSR(async () => {
+      await search({});
+    });
+
+    return {
+      categories,
+      currentCatSlug,
+      handleMouseEnter,
+      handleMouseLeave
+    };
+  }
+};
+</script>
+
+<style lang='scss'>
+.sf-mega-menu__bar.sf-bar {
+  display: flex;
+  @include for-desktop {
+    display:  none;
+  }
+}
+</style>
diff --git a/packages/core/nuxt-theme-module/theme/components/LocaleSelector.vue b/packages/core/nuxt-theme-module/theme/components/Header/LocaleSelector.vue
similarity index 100%
rename from packages/core/nuxt-theme-module/theme/components/LocaleSelector.vue
rename to packages/core/nuxt-theme-module/theme/components/Header/LocaleSelector.vue
diff --git a/packages/core/nuxt-theme-module/theme/components/Header/MobileMenu.vue b/packages/core/nuxt-theme-module/theme/components/Header/MobileMenu.vue
new file mode 100644
index 00000000000..62277080f7b
--- /dev/null
+++ b/packages/core/nuxt-theme-module/theme/components/Header/MobileMenu.vue
@@ -0,0 +1,75 @@
+<template>
+  <SfMegaMenu
+    visible
+    @close="toggleMobileMenu"
+  >
+    <SfMegaMenuColumn
+      v-for="category in categories"
+      :key="category.name"
+      :title="category.name"
+    >
+      <template #title="{ title, changeActive }">
+        <SfMenuItem
+          :label="title"
+          class="sf-mega-menu-column__header"
+          @click="changeActive(title); handleClickCategory(category.slug)"
+        />
+      </template>
+      <SfList>
+        <SfListItem
+          v-for="subCategoryChild in category.children"
+          :key="subCategoryChild.name"
+        >
+          <SfMenuItem
+            :label="subCategoryChild.name"
+            :link="localePath(`/c/${subCategoryChild.slug}`)"
+            @click.native="toggleMobileMenu()"
+          >
+            <SfLink>
+              {{ subCategoryChild.name }}
+            </SfLink>
+          </SfMenuItem>
+        </SfListItem>
+      </SfList>
+      <NewCatBanners v-if="currentCatSlug === 'new'" />
+    </SfMegaMenuColumn>
+  </SfMegaMenu>
+</template>
+
+<script>
+import { SfMegaMenu, SfMenuItem, SfList } from '@storefront-ui/vue';
+import { useCategory } from '<%= options.generate.replace.composables %>';
+import { useUiState } from '~/composables';
+import { onSSR } from '@vue-storefront/core';
+import { ref } from '@vue/composition-api';
+
+export default {
+  name: 'MobileMenu',
+  components: {
+    SfMegaMenu,
+    SfMenuItem,
+    SfList,
+    NewCatBanners: () => import('./NewCatBanners')
+  },
+  setup () {
+    const { categories, search } = useCategory('menu-categories');
+    const currentCatSlug = ref('');
+    const { toggleMobileMenu } = useUiState();
+
+    const handleClickCategory = (slug) => {
+      currentCatSlug.value = slug;
+    };
+
+    onSSR(async () => {
+      await search({});
+    });
+
+    return {
+      categories,
+      currentCatSlug,
+      handleClickCategory,
+      toggleMobileMenu
+    };
+  }
+};
+</script>
diff --git a/packages/core/nuxt-theme-module/theme/components/Header/NewCatBanners.vue b/packages/core/nuxt-theme-module/theme/components/Header/NewCatBanners.vue
new file mode 100644
index 00000000000..53f2314cd0e
--- /dev/null
+++ b/packages/core/nuxt-theme-module/theme/components/Header/NewCatBanners.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="sb-mega-menu__banners">
+    <SfBanner
+      v-for="(banner, key) in banners"
+      :key="key"
+      :title="banner.title"
+      :subtitle="banner.subtitle"
+      :image="banner.pictures"
+      class="sb-mega-menu__banner"
+    />
+  </div>
+</template>
+
+<script>
+import { SfBanner } from '@storefront-ui/vue';
+
+export default {
+  name: 'NewCatBanners',
+  components: {
+    SfBanner
+  },
+  data() {
+    return {
+      banners: [
+        {
+          title: 'THE OFFICE LIFE',
+          subtitle: 'T-shirts',
+          pictures: {
+            mobile: '/megamenu/bannerA.webp',
+            desktop: '/megamenu/bannerA.webp'
+          }
+        },
+        {
+          title: 'ECO SANDALS',
+          subtitle: 'T-shirts',
+          pictures: {
+            mobile: '/megamenu/bannerB.webp',
+            desktop: '/megamenu/bannerB.webp'
+          }
+        }
+      ]
+    };
+  }
+};
+</script>
+
+<style scoped lang='scss'>
+.sb-mega-menu {
+  &__featured {
+    flex: 0 0 43.125rem;
+  }
+  &__banners {
+    display: flex;
+    flex-direction: column;
+    padding: var(--spacer-base);
+    @include for-desktop {
+      flex-direction: row;
+      padding: 0;
+    }
+  }
+  &__banner{
+    &:first-child{
+      margin: 0 0 var(--spacer-sm) 0;
+      @include for-desktop {
+        margin: 0 var(--spacer-sm) 0 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/core/nuxt-theme-module/theme/components/TopBar.vue b/packages/core/nuxt-theme-module/theme/components/Header/TopBar.vue
similarity index 100%
rename from packages/core/nuxt-theme-module/theme/components/TopBar.vue
rename to packages/core/nuxt-theme-module/theme/components/Header/TopBar.vue
diff --git a/packages/core/nuxt-theme-module/theme/composables/useUiState.ts b/packages/core/nuxt-theme-module/theme/composables/useUiState.ts
index e526b286937..95b3828dcf4 100644
--- a/packages/core/nuxt-theme-module/theme/composables/useUiState.ts
+++ b/packages/core/nuxt-theme-module/theme/composables/useUiState.ts
@@ -9,22 +9,31 @@ const state = reactive({
   isWishlistSidebarOpen: false,
   isLoginModalOpen: false,
   isCategoryGridView: true,
-  isFilterSidebarOpen: false
+  isFilterSidebarOpen: false,
+  isMobileMenuOpen: false
 });
 
 const useUiState = () => {
+  const isMobileMenuOpen = computed(() => state.isMobileMenuOpen);
+  const toggleMobileMenu = () => {
+    state.isMobileMenuOpen = !state.isMobileMenuOpen;
+  };
+
   const isCartSidebarOpen = computed(() => state.isCartSidebarOpen);
   const toggleCartSidebar = () => {
+    if (state.isMobileMenuOpen) toggleMobileMenu();
     state.isCartSidebarOpen = !state.isCartSidebarOpen;
   };
 
   const isWishlistSidebarOpen = computed(() => state.isWishlistSidebarOpen);
   const toggleWishlistSidebar = () => {
+    if (state.isMobileMenuOpen) toggleMobileMenu();
     state.isWishlistSidebarOpen = !state.isWishlistSidebarOpen;
   };
 
   const isLoginModalOpen = computed(() => state.isLoginModalOpen);
   const toggleLoginModal = () => {
+    if (state.isMobileMenuOpen) toggleMobileMenu();
     state.isLoginModalOpen = !state.isLoginModalOpen;
   };
 
@@ -44,11 +53,13 @@ const useUiState = () => {
     isLoginModalOpen,
     isCategoryGridView,
     isFilterSidebarOpen,
+    isMobileMenuOpen,
     toggleCartSidebar,
     toggleWishlistSidebar,
     toggleLoginModal,
     toggleCategoryGridView,
-    toggleFilterSidebar
+    toggleFilterSidebar,
+    toggleMobileMenu
   };
 };
 
diff --git a/packages/core/nuxt-theme-module/theme/layouts/account.vue b/packages/core/nuxt-theme-module/theme/layouts/account.vue
index 8e2755e7ad1..970d0a4acd9 100644
--- a/packages/core/nuxt-theme-module/theme/layouts/account.vue
+++ b/packages/core/nuxt-theme-module/theme/layouts/account.vue
@@ -12,9 +12,9 @@
 </template>
 
 <script>
-import AppHeader from '~/components/AppHeader.vue';
+import AppHeader from '~/components/Header/AppHeader.vue';
 import BottomNavigation from '~/components/BottomNavigation.vue';
-import TopBar from '~/components/TopBar.vue';
+import TopBar from '~/components/Header/TopBar.vue';
 import CartSidebar from '~/components/CartSidebar.vue';
 import LoginModal from '~/components/LoginModal.vue';
 
diff --git a/packages/core/nuxt-theme-module/theme/layouts/default.vue b/packages/core/nuxt-theme-module/theme/layouts/default.vue
index 19a954f5741..5433851aaee 100644
--- a/packages/core/nuxt-theme-module/theme/layouts/default.vue
+++ b/packages/core/nuxt-theme-module/theme/layouts/default.vue
@@ -25,10 +25,10 @@
 </template>
 
 <script>
-import AppHeader from '~/components/AppHeader.vue';
+import AppHeader from '~/components/Header/AppHeader.vue';
 import BottomNavigation from '~/components/BottomNavigation.vue';
 import AppFooter from '~/components/AppFooter.vue';
-import TopBar from '~/components/TopBar.vue';
+import TopBar from '~/components/Header/TopBar.vue';
 import CartSidebar from '~/components/CartSidebar.vue';
 import WishlistSidebar from '~/components/WishlistSidebar.vue';
 import LoginModal from '~/components/LoginModal.vue';