diff --git a/packages/boilerplate/api-client/src/api/getCategory/index.ts b/packages/boilerplate/api-client/src/api/getCategory/index.ts
index 4f42f4ad66..4e5d960ace 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 0000000000..a5ab92d266
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 0000000000..32290c8e35
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 0000000000..1d8dbb8ed1
--- /dev/null
+++ b/packages/commercetools/theme/components/Header/HeaderNav.vue
@@ -0,0 +1,95 @@
+<template>
+  <SfHeaderNavigation>
+    <SfHeaderNavigationItem
+      v-for="(category, index) in categories"
+      :key="index"
+      :label="category.name"
+      @mouseenter="() => handleMouseEnter(category.slug)"
+      @mouseleave="() => handleMouseLeave()"
+      @click="handleMouseLeave()"
+      :link="localePath(`/c/${category.slug}`)"
+    >
+      <SfMegaMenu
+        :is-absolute="true"
+        :visible="currentCatSlug === category.slug"
+        :title="category.name"
+        @close="currentCatSlug = ''"
+        v-if="category && category.children.length"
+      >
+        <SfMegaMenuColumn
+          v-for="(subCategory, subIndex) in category.children"
+          :key="subIndex"
+          :title="subCategory.name"
+        >
+          <SfLoader :loading="subCategoriesLoading">
+            <SfList>
+              <SfListItem
+                v-for="(subCategoryChild, childIndex) in subCategory.children"
+                :key="childIndex"
+              >
+                <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 { 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 handleMouseEnter = debounce((slug) => {
+      if (currentCatSlug.value) return;
+
+      currentCatSlug.value = slug;
+      const catChild = categories.value.find(category => category.slug === currentCatSlug.value);
+      emit('setOverlay', Boolean(catChild.childCount));
+      subCategoriesSearch({ slug });
+    }, 200);
+
+    const handleMouseLeave = debounce(() => {
+      emit('setOverlay', false);
+      currentCatSlug.value = '';
+    }, 200);
+
+    onSSR(async () => {
+      await search({ customQuery: { categories: 'root-categories-query' } });
+    });
+
+    return {
+      categories,
+      subCategories,
+      currentCatSlug,
+      subCategoriesLoading,
+      handleMouseEnter,
+      handleMouseLeave
+    };
+  }
+};
+</script>
diff --git a/packages/commercetools/theme/middleware.config.js b/packages/commercetools/theme/middleware.config.js
index 834ffc1378..795035e687 100644
--- a/packages/commercetools/theme/middleware.config.js
+++ b/packages/commercetools/theme/middleware.config.js
@@ -24,6 +24,14 @@ module.exports = {
         },
         currency: 'USD',
         country: 'US'
+      },
+      customQueries: {
+        'root-categories-query': ({ query, variables }) => {
+
+          variables.where = 'parent is not defined';
+
+          return { query, variables };
+        }
       }
     }
   }
diff --git a/packages/commercetools/theme/static/megamenu/bannerA.webp b/packages/commercetools/theme/static/megamenu/bannerA.webp
new file mode 100644
index 0000000000..a5ab92d266
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 0000000000..32290c8e35
Binary files /dev/null and b/packages/commercetools/theme/static/megamenu/bannerB.webp differ
diff --git a/packages/core/docs/changelog/5267.js b/packages/core/docs/changelog/5267.js
new file mode 100644
index 0000000000..f349c125f6
--- /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/AppHeader.vue b/packages/core/nuxt-theme-module/theme/components/Header/AppHeader.vue
similarity index 95%
rename from packages/core/nuxt-theme-module/theme/components/AppHeader.vue
rename to packages/core/nuxt-theme-module/theme/components/Header/AppHeader.vue
index e2218e899e..9d639ffa4a 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,7 @@
         </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 @setOverlay="isOverlayVisible = $event" />
       </template>
       <template #aside>
         <LocaleSelector class="smartphone-only" />
@@ -102,6 +102,7 @@ import { onSSR } from '@vue-storefront/core';
 import { useUiHelpers } from '~/composables';
 import LocaleSelector from './LocaleSelector';
 import SearchResults from '~/components/SearchResults';
+import HeaderNav from './HeaderNav';
 import { clickOutside } from '@storefront-ui/vue/src/utilities/directives/click-outside/click-outside-directive.js';
 import {
   mapMobileObserver,
@@ -119,7 +120,8 @@ export default {
     SfBadge,
     SfSearchBar,
     SearchResults,
-    SfOverlay
+    SfOverlay,
+    HeaderNav
   },
   directives: { clickOutside },
   setup(props, { root }) {
@@ -132,6 +134,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 +212,8 @@ export default {
       result,
       closeOrFocusSearchBar,
       searchBarRef,
-      isMobile
+      isMobile,
+      isOverlayVisible
     };
   }
 };
@@ -220,6 +224,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%;
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 0000000000..80479467a4
--- /dev/null
+++ b/packages/core/nuxt-theme-module/theme/components/Header/HeaderNav.vue
@@ -0,0 +1,86 @@
+<template>
+  <SfHeaderNavigation>
+    <SfHeaderNavigationItem
+      v-for="(category, index) in categories"
+      :key="index"
+      :label="category.name"
+      @mouseenter="() => handleMouseEnter(category.slug)"
+      @mouseleave="() => handleMouseLeave()"
+      @click="handleMouseLeave()"
+      :link="localePath(`/c/${category.slug}`)"
+    >
+      <SfMegaMenu
+        :is-absolute="true"
+        :visible="currentCatSlug === category.slug"
+        :title="category.name"
+        @close="currentCatSlug = ''"
+        v-if="category && category.children.length"
+      >
+        <SfMegaMenuColumn
+          v-for="(subCategory, subIndex) in category.children"
+          :key="subIndex"
+          :title="subCategory.name"
+        >
+          <SfList>
+            <SfListItem
+              v-for="(subCategoryChild, childIndex) in subCategory.children"
+              :key="childIndex"
+            >
+              <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 catChild = categories.value.find(category => category.slug === currentCatSlug.value);
+      emit('setOverlay', Boolean(catChild.childCount));
+    };
+
+    const handleMouseLeave = () => {
+      emit('setOverlay', false);
+      currentCatSlug.value = '';
+    };
+
+    onSSR(async () => {
+      await search({});
+    });
+
+    return {
+      categories,
+      currentCatSlug,
+      handleMouseEnter,
+      handleMouseLeave
+    };
+  }
+};
+</script>
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/NewCatBanners.vue b/packages/core/nuxt-theme-module/theme/components/Header/NewCatBanners.vue
new file mode 100644
index 0000000000..44a236eb1c
--- /dev/null
+++ b/packages/core/nuxt-theme-module/theme/components/Header/NewCatBanners.vue
@@ -0,0 +1,75 @@
+<template>
+  <SfMegaMenuColumn
+    title="Featured"
+    class="sf-mega-menu-column--pined-content-on-mobile sf-mega-menu-column--hide-header-on-mobile sb-mega-menu__featured"
+  >
+    <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>
+  </SfMegaMenuColumn>
+</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/layouts/account.vue b/packages/core/nuxt-theme-module/theme/layouts/account.vue
index 8e2755e7ad..970d0a4acd 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 3934c12921..b7e0953c7f 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';