diff --git a/packages/boilerplate/api-client/src/api/getCategory/index.ts b/packages/boilerplate/api-client/src/api/getCategory/index.ts
index 9c8fc90b2b..4f42f4ad66 100644
--- a/packages/boilerplate/api-client/src/api/getCategory/index.ts
+++ b/packages/boilerplate/api-client/src/api/getCategory/index.ts
@@ -5,70 +5,25 @@ export default async function getCategory(context, params, customQuery?: CustomQ
   return Promise.resolve([
     {
       id: 1,
-      name: 'New',
-      slug: 'new',
-      children: [
-        {
-          id: 15,
-          name: 'Women',
-          slug: 'new-women',
-          children: [
-            {
-              id: 16,
-              name: 'Clothing',
-              slug: 'new-women-clothing',
-              children: []
-            },
-            {
-              id: 17,
-              name: 'Shoes',
-              slug: 'new-women-shoes',
-              children: []
-            }
-          ]
-        },
-        {
-          id: 11,
-          name: 'Men',
-          slug: 'new-men',
-          children: [
-            {
-              id: 18,
-              name: 'Clothing',
-              slug: 'new-men-clothing',
-              children: []
-            },
-            {
-              id: 19,
-              name: 'Shoes',
-              slug: 'new-men-shoes',
-              children: []
-            }
-          ]
-        }
-      ]
-    },
-    {
-      id: 2,
       name: 'Women',
       slug: 'women',
-      children: [
+      items: [
         {
           id: 4,
           name: 'Women jackets',
           slug: 'women-jackets',
-          children: [
+          items: [
             {
               id: 9,
               name: 'Winter jackets',
               slug: 'winter-jackets',
-              children: []
+              items: []
             },
             {
               id: 10,
               name: 'Autumn jackets',
               slug: 'autmun-jackets',
-              children: []
+              items: []
             }
           ]
         },
@@ -76,44 +31,44 @@ export default async function getCategory(context, params, customQuery?: CustomQ
           id: 5,
           name: 'Skirts',
           slug: 'skirts',
-          children: []
+          items: []
         }
       ]
     },
     {
-      id: 3,
+      id: 2,
       name: 'Men',
       slug: 'men',
-      children: [
+      items: [
         {
           id: 6,
           name: 'Men T-shirts',
           slug: 'men-tshirts',
-          children: []
+          items: []
         }
       ]
     },
     {
-      id: 4,
+      id: 3,
       name: 'Kids',
       slug: 'kids',
-      children: [
+      items: [
         {
           id: 7,
           name: 'Toys',
           slug: 'toys',
-          children: [
+          items: [
             {
               id: 8,
               name: 'Toy Cars',
               slug: 'toy-cars',
-              children: []
+              items: []
             },
             {
               id: 8,
               name: 'Dolls',
               slug: 'dolls',
-              children: []
+              items: []
             }
           ]
         }
diff --git a/packages/boilerplate/theme/static/megamenu/bannerA.webp b/packages/boilerplate/theme/static/megamenu/bannerA.webp
deleted file mode 100644
index a5ab92d266..0000000000
Binary files a/packages/boilerplate/theme/static/megamenu/bannerA.webp and /dev/null differ
diff --git a/packages/boilerplate/theme/static/megamenu/bannerB.webp b/packages/boilerplate/theme/static/megamenu/bannerB.webp
deleted file mode 100644
index 32290c8e35..0000000000
Binary files a/packages/boilerplate/theme/static/megamenu/bannerB.webp and /dev/null differ
diff --git a/packages/commercetools/api-client/src/api/getCategory/defaultQuery.ts b/packages/commercetools/api-client/src/api/getCategory/defaultQuery.ts
index b658c2b09f..36c9492c37 100644
--- a/packages/commercetools/api-client/src/api/getCategory/defaultQuery.ts
+++ b/packages/commercetools/api-client/src/api/getCategory/defaultQuery.ts
@@ -1,9 +1,6 @@
 import gql from 'graphql-tag';
-import { CategoryFragment } from './../../fragments';
 
-export default gql`    
-  ${CategoryFragment}
-  
+export default gql`
   fragment Children on Category {
     id
     slug(acceptLanguage: $acceptLanguage)
@@ -11,6 +8,22 @@ export default gql`
     childCount
   }
 
+  fragment DefaultCategory on Category {
+    id
+    slug(acceptLanguage: $acceptLanguage)
+    name(acceptLanguage: $acceptLanguage)
+    childCount
+    children {
+      ...Children
+      children {
+        ...Children
+        children {
+          ...Children
+        }
+      }
+    }
+  }
+
   query categories($where: String, $sort: [String!], $limit: Int, $offset: Int, $acceptLanguage: [Locale!]) {
     categories(where: $where, sort: $sort, limit: $limit, offset: $offset) {
       offset
diff --git a/packages/commercetools/api-client/src/fragments/index.ts b/packages/commercetools/api-client/src/fragments/index.ts
index 71328cd0c5..debd2940d8 100644
--- a/packages/commercetools/api-client/src/fragments/index.ts
+++ b/packages/commercetools/api-client/src/fragments/index.ts
@@ -297,20 +297,3 @@ export const OrderFragment = `
   }
 `;
 
-export const CategoryFragment = `
-  fragment DefaultCategory on Category {
-    id
-    slug(acceptLanguage: $acceptLanguage)
-    name(acceptLanguage: $acceptLanguage)
-    childCount
-    children {
-      ...Children
-      children {
-        ...Children
-        children {
-          ...Children
-        }
-      }
-    }
-  }
-`;
diff --git a/packages/commercetools/theme/components/header/HeaderNav.vue b/packages/commercetools/theme/components/header/HeaderNav.vue
deleted file mode 100644
index 584c6cf90d..0000000000
--- a/packages/commercetools/theme/components/header/HeaderNav.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<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 { rootCategoriesQuery } from '../../queries/topCategories';
-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;
-
-      emit('setOverlay', true);
-      currentCatSlug.value = slug;
-      subCategoriesSearch({ slug });
-    }, 200);
-
-    const handleMouseLeave = debounce(() => {
-      emit('setOverlay', false);
-      currentCatSlug.value = '';
-    }, 200);
-
-    onSSR(async () => {
-      await search({ customQuery: rootCategoriesQuery });
-    });
-
-    return {
-      categories,
-      subCategories,
-      currentCatSlug,
-      subCategoriesLoading,
-      handleMouseEnter,
-      handleMouseLeave
-    };
-  }
-};
-</script>
diff --git a/packages/commercetools/theme/queries/topCategories.ts b/packages/commercetools/theme/queries/topCategories.ts
deleted file mode 100644
index 6c0021b53a..0000000000
--- a/packages/commercetools/theme/queries/topCategories.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import gql from 'graphql-tag';
-import { CategoryFragment } from '@vue-storefront/commercetools-api';
-
-const customQuery = gql`
-  ${CategoryFragment}
-
-  fragment Children 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 {
-        ...DefaultCategory
-      }
-    }
-  }
-`;
-
-export const rootCategoriesQuery = (query, variables) => {
-  const customVariables = {
-    ...variables,
-    where: 'parent is not defined'
-  };
-
-  return {
-    query: customQuery,
-    variables: customVariables
-  };
-};
diff --git a/packages/commercetools/theme/static/megamenu/bannerA.webp b/packages/commercetools/theme/static/megamenu/bannerA.webp
deleted file mode 100644
index a5ab92d266..0000000000
Binary files a/packages/commercetools/theme/static/megamenu/bannerA.webp and /dev/null differ
diff --git a/packages/commercetools/theme/static/megamenu/bannerB.webp b/packages/commercetools/theme/static/megamenu/bannerB.webp
deleted file mode 100644
index 32290c8e35..0000000000
Binary files a/packages/commercetools/theme/static/megamenu/bannerB.webp and /dev/null differ
diff --git a/packages/core/docs/commercetools/changelog.md b/packages/core/docs/commercetools/changelog.md
index e1a3f8c968..66974c4107 100644
--- a/packages/core/docs/commercetools/changelog.md
+++ b/packages/core/docs/commercetools/changelog.md
@@ -1,7 +1,6 @@
 # Changelog
 
 ## 1.1.0 (not released)
-- added MegaMenu to theme ([#5267](https://github.com/vuestorefront/vue-storefront/issues/5267))
 - fix getOrders api ([#5328](https://github.com/DivanteLtd/vue-storefront/issues/5328))
 - added bottom margin to fix visibility of last footer category ([#5253](https://github.com/DivanteLtd/vue-storefront/issues/5253))
 - [BREAKING] refactored names of many factory methods and composable methods, details in linked PR ([#5299](https://github.com/DivanteLtd/vue-storefront/pull/5299))
diff --git a/packages/core/docs/contributing/changelog.md b/packages/core/docs/contributing/changelog.md
index 40e60826cc..09adfc3408 100644
--- a/packages/core/docs/contributing/changelog.md
+++ b/packages/core/docs/contributing/changelog.md
@@ -1,7 +1,6 @@
 # Changelog
 
 ## 2.2.0 (not released)
-- added MegaMenu to theme ([#5267](https://github.com/vuestorefront/vue-storefront/issues/5267))
 - added bottom margin to fix visibility of last footer category ([#5253](https://github.com/DivanteLtd/vue-storefront/issues/5253))
 - [BREAKING] refactored names of many factory methods and composable methods, details in linked PR ([#5299](https://github.com/DivanteLtd/vue-storefront/pull/5299))
 - [BREAKING] changed signatures of factory methods to always 2 arguments, details in linked PR ([#5299](https://github.com/DivanteLtd/vue-storefront/pull/5299))
diff --git a/packages/core/nuxt-theme-module/package.json b/packages/core/nuxt-theme-module/package.json
index f53d45d850..22888860a6 100644
--- a/packages/core/nuxt-theme-module/package.json
+++ b/packages/core/nuxt-theme-module/package.json
@@ -23,7 +23,6 @@
     "access": "public"
   },
   "dependencies": {
-    "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2"
   }
 }
diff --git a/packages/core/nuxt-theme-module/theme/components/header/AppHeader.vue b/packages/core/nuxt-theme-module/theme/components/AppHeader.vue
similarity index 57%
rename from packages/core/nuxt-theme-module/theme/components/header/AppHeader.vue
rename to packages/core/nuxt-theme-module/theme/components/AppHeader.vue
index b7c1fa7609..f3dc30da32 100644
--- a/packages/core/nuxt-theme-module/theme/components/header/AppHeader.vue
+++ b/packages/core/nuxt-theme-module/theme/components/AppHeader.vue
@@ -1,52 +1,47 @@
 <template>
-  <div>
-    <SfOverlay :visible="!!isOverlayVisible" />
-    <SfHeader
-      data-cy="app-header"
-      @click:cart="toggleCartSidebar"
-      @click:wishlist="toggleWishlistSidebar"
-      @click:account="handleAccountClick"
-      @enter:search="changeSearchTerm"
-      @change:search="p => term = p"
-      :searchValue="term"
-      :cartItemsQty="cartTotalItems"
-      :accountIcon="accountIcon"
-      class="sf-header--has-mobile-search"
-    >
-      <!-- TODO: add mobile view buttons after SFUI team PR -->
-      <template #logo>
-        <nuxt-link data-cy="app-header-url_logo" :to="localePath('/')" class="sf-header__logo">
-          <SfImage src="/icons/logo.svg" alt="Vue Storefront Next" class="sf-header__logo-image"/>
-        </nuxt-link>
-      </template>
-      <template #navigation>
-        <HeaderNav @setOverlay="isOverlayVisible = $event" />
-      </template>
-      <template #aside>
-        <LocaleSelector class="smartphone-only" />
-      </template>
-    </SfHeader>
-  </div>
+  <SfHeader
+    data-cy="app-header"
+    @click:cart="toggleCartSidebar"
+    @click:wishlist="toggleWishlistSidebar"
+    @click:account="handleAccountClick"
+    @enter:search="changeSearchTerm"
+    @change:search="p => term = p"
+    :searchValue="term"
+    :cartItemsQty="cartTotalItems"
+    :accountIcon="accountIcon"
+    class="sf-header--has-mobile-search"
+  >
+    <!-- TODO: add mobile view buttons after SFUI team PR -->
+    <template #logo>
+      <nuxt-link data-cy="app-header-url_logo" :to="localePath('/')" class="sf-header__logo">
+        <SfImage src="/icons/logo.svg" alt="Vue Storefront Next" class="sf-header__logo-image"/>
+      </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')" />
+      <SfHeaderNavigationItem class="nav-item" data-cy="app-header-url_kids" label="KIDS" :link="localePath('/c/kids')" />
+    </template>
+    <template #aside>
+      <LocaleSelector class="smartphone-only" />
+    </template>
+  </SfHeader>
 </template>
 
 <script>
-import { SfHeader, SfImage, SfLink, SfOverlay } from '@storefront-ui/vue';
+import { SfHeader, SfImage } from '@storefront-ui/vue';
 import { useUiState } from '~/composables';
 import { useCart, useWishlist, useUser, cartGetters } from '<%= options.generate.replace.composables %>';
 import { computed, ref } from '@vue/composition-api';
 import { onSSR } from '@vue-storefront/core';
 import { useUiHelpers } from '~/composables';
-import LocaleSelector from '../LocaleSelector';
-import HeaderNav from './HeaderNav';
+import LocaleSelector from './LocaleSelector';
 
 export default {
   components: {
     SfHeader,
     SfImage,
-    SfLink,
-    SfOverlay,
-    LocaleSelector,
-    HeaderNav
+    LocaleSelector
   },
   setup(props, { root }) {
     const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal } = useUiState();
@@ -55,7 +50,6 @@ export default {
     const { cart, load: loadCart } = useCart();
     const { load: loadWishlist } = useWishlist();
     const term = ref(getFacetsFromURL().term);
-    const isOverlayVisible = ref(false);
 
     const cartTotalItems = computed(() => {
       const count = cartGetters.getTotalItems(cart.value);
@@ -86,8 +80,7 @@ export default {
       toggleCartSidebar,
       toggleWishlistSidebar,
       changeSearchTerm,
-      term,
-      isOverlayVisible
+      term
     };
   }
 };
@@ -98,10 +91,9 @@ 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%;
+      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
deleted file mode 100644
index 269665c920..0000000000
--- a/packages/core/nuxt-theme-module/theme/components/header/HeaderNav.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<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;
-
-      emit('setOverlay', true);
-      currentCatSlug.value = slug;
-    };
-
-    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/header/NewCatBanners.vue b/packages/core/nuxt-theme-module/theme/components/header/NewCatBanners.vue
deleted file mode 100644
index 44a236eb1c..0000000000
--- a/packages/core/nuxt-theme-module/theme/components/header/NewCatBanners.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<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/layouts/account.vue b/packages/core/nuxt-theme-module/theme/layouts/account.vue
index 052251f4b6..8e2755e7ad 100644
--- a/packages/core/nuxt-theme-module/theme/layouts/account.vue
+++ b/packages/core/nuxt-theme-module/theme/layouts/account.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import AppHeader from '~/components/header/AppHeader.vue';
+import AppHeader from '~/components/AppHeader.vue';
 import BottomNavigation from '~/components/BottomNavigation.vue';
 import TopBar from '~/components/TopBar.vue';
 import CartSidebar from '~/components/CartSidebar.vue';
diff --git a/packages/core/nuxt-theme-module/theme/layouts/default.vue b/packages/core/nuxt-theme-module/theme/layouts/default.vue
index f08a138965..0c352a57f6 100644
--- a/packages/core/nuxt-theme-module/theme/layouts/default.vue
+++ b/packages/core/nuxt-theme-module/theme/layouts/default.vue
@@ -4,11 +4,11 @@
       <TopBar class="desktop-only" />
     </LazyHydrate>
 
-    <LazyHydrate when-idle>
-      <AppHeader />
-    </LazyHydrate>
-
     <div id="layout">
+      <LazyHydrate when-idle>
+        <AppHeader />
+      </LazyHydrate>
+
       <nuxt :key="$route.fullPath"/>
 
       <LazyHydrate when-visible>
@@ -27,7 +27,7 @@
 </template>
 
 <script>
-import AppHeader from '~/components/header/AppHeader.vue';
+import AppHeader from '~/components/AppHeader.vue';
 import BottomNavigation from '~/components/BottomNavigation.vue';
 import AppFooter from '~/components/AppFooter.vue';
 import TopBar from '~/components/TopBar.vue';