diff --git a/.eslintrc.js b/.eslintrc.js
index 31a452a82..d0858feb9 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -31,6 +31,14 @@ module.exports = {
     '@vue-storefront/eslint-config-jest',
   ],
   rules: {
-    "@typescript-eslint/no-floating-promises": "off"
+    "@typescript-eslint/no-floating-promises": "off",
+    "jest/expect-expect": [
+      "error",
+      {
+        "assertFunctionNames": ["expect", "getByRole", "getByTestId"],
+      }
+    ],
+    "no-plusplus": "off",
   }
 }
+
diff --git a/packages/theme/components/AppHeader.vue b/packages/theme/components/AppHeader.vue
index d3ed18f55..4d95b92a7 100644
--- a/packages/theme/components/AppHeader.vue
+++ b/packages/theme/components/AppHeader.vue
@@ -9,14 +9,7 @@
         <HeaderLogo />
       </template>
       <template #navigation>
-        <HeaderNavigationItem
-          v-for="(category, index) in categoryTree"
-          :key="index"
-          v-e2e="'app-header-url_women'"
-          class="nav-item"
-          :label="category.name"
-          :link="localePath(getCatLink(category))"
-        />
+        <HeaderNavigation :category-tree="categoryTree" />
       </template>
       <template #aside>
         <div class="sf-header__switchers">
@@ -122,7 +115,7 @@ import {
   onMounted,
   useFetch,
 } from '@nuxtjs/composition-api';
-import HeaderNavigationItem from '~/components/Header/Navigation/HeaderNavigationItem.vue';
+import HeaderNavigation from '~/components/Header/Navigation/HeaderNavigation.vue';
 import {
   useCart,
   useCategory,
@@ -132,6 +125,7 @@ import {
   useUser,
 } from '~/composables';
 
+import type { CategoryTree } from '~/modules/GraphQL/types';
 import CurrencySelector from '~/components/CurrencySelector.vue';
 import HeaderLogo from '~/components/HeaderLogo.vue';
 import SvgImage from '~/components/General/SvgImage.vue';
@@ -140,7 +134,7 @@ import { useCustomerStore } from '~/stores/customer';
 
 export default defineComponent({
   components: {
-    HeaderNavigationItem,
+    HeaderNavigation,
     SfHeader,
     SfOverlay,
     CurrencySelector,
@@ -171,7 +165,7 @@ export default defineComponent({
 
     const wishlistHasProducts = computed(() => wishlistItemsQty.value > 0);
     const accountIcon = computed(() => (isAuthenticated.value ? 'profile_fill' : 'profile'));
-    const categoryTree = ref([]);
+    const categoryTree = ref<CategoryTree[]>([]);
 
     const handleAccountClick = async () => {
       if (isAuthenticated.value) {
@@ -231,14 +225,6 @@ export default defineComponent({
   z-index: 2;
 }
 
-.nav-item {
-  --header-navigation-item-margin: 0 var(--spacer-sm);
-
-  .sf-header-navigation-item__item--mobile {
-    display: none;
-  }
-}
-
 .cart-badge {
   position: absolute;
   bottom: 40%;
diff --git a/packages/theme/components/Header/Navigation/HeaderNavigation.vue b/packages/theme/components/Header/Navigation/HeaderNavigation.vue
new file mode 100644
index 000000000..f5986e910
--- /dev/null
+++ b/packages/theme/components/Header/Navigation/HeaderNavigation.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="header-navigation">
+    <div class="sf-header-navigation-item__item sf-header-navigation-item__item--desktop">
+      <HeaderNavigationItem
+        v-for="(category, index) in categoryTree"
+        :key="index"
+        ref="lvl0CatRefs"
+        :data-testid="category.uid"
+        :label="category.name"
+        :link="localePath(getCatLink(category))"
+        tabindex="1"
+        aria-haspopup="true"
+        class="nav-item"
+        :data-index="index"
+        :has-children="hasChildren(category)"
+        @mouseenter.native.prevent="onMouseEnter(category)"
+        @keydown.down.native.prevent="setCurrentCategory(category)"
+        @keydown.up.native.prevent="setCurrentCategory(null)"
+        @keyup.tab.native.prevent="setFocus($event)"
+        @keydown.right.native.prevent="navRight()"
+        @keydown.left.native.prevent="navLeft()"
+      />
+    </div>
+    <HeaderNavigationSubcategories
+      v-if="hasChildren(currentCategory)"
+      :current-category="currentCategory"
+      :has-focus="hasFocus"
+      @hideSubcategories="focusRootElementAndHideSubcategories"
+    />
+  </div>
+</template>
+<script lang="ts">
+import {
+  defineComponent, PropType, ref,
+} from '@nuxtjs/composition-api';
+import HeaderNavigationItem from './HeaderNavigationItem.vue';
+
+import { CategoryTree } from '~/modules/GraphQL/types';
+import { useUiHelpers } from '~/composables';
+
+export default defineComponent({
+  name: 'HeaderNavigation',
+  components: {
+    HeaderNavigationSubcategories: () => import('~/components/Header/Navigation/HeaderNavigationSubcategories.vue'),
+    HeaderNavigationItem,
+  },
+  props: {
+    categoryTree: {
+      type: Array as PropType<CategoryTree[]>,
+      default: () => [],
+    },
+  },
+  setup() {
+    const { getCatLink } = useUiHelpers();
+
+    const currentCategory = ref<CategoryTree>(null);
+    const lvl0CatRefs = ref([]);
+    const hasFocus = ref(false);
+    let lvl0CatFocusIdx = 0;
+    let focusedElement = null;
+
+    const setCurrentCategory = (category: CategoryTree | null) => {
+      currentCategory.value = category;
+    };
+
+    const hasChildren = (category: CategoryTree) => Boolean(category?.children);
+
+    const setFocus = (event) => {
+      focusedElement = event.target;
+      lvl0CatFocusIdx = Number(event.target.dataset.index);
+      hasFocus.value = true;
+    };
+
+    const focusRootElementAndHideSubcategories = () => {
+      setCurrentCategory(null);
+      if (focusedElement !== null) focusedElement.focus();
+    };
+
+    const navRight = () => {
+      lvl0CatFocusIdx++;
+      if (lvl0CatRefs.value[lvl0CatFocusIdx]) {
+        lvl0CatRefs.value[lvl0CatFocusIdx].$el.focus();
+        focusedElement = lvl0CatRefs.value[lvl0CatFocusIdx].$el;
+      } else {
+        lvl0CatFocusIdx--;
+      }
+    };
+
+    const navLeft = () => {
+      lvl0CatFocusIdx--;
+      if (lvl0CatRefs.value[lvl0CatFocusIdx]) {
+        lvl0CatRefs.value[lvl0CatFocusIdx].$el.focus();
+        focusedElement = lvl0CatRefs.value[lvl0CatFocusIdx].$el;
+      } else {
+        lvl0CatFocusIdx++;
+      }
+    };
+
+    const onMouseEnter = (category: CategoryTree) => {
+      currentCategory.value = category;
+      focusedElement = null;
+      hasFocus.value = false;
+    };
+
+    return {
+      getCatLink,
+      setCurrentCategory,
+      currentCategory,
+      hasChildren,
+      setFocus,
+      focusRootElementAndHideSubcategories,
+      lvl0CatRefs,
+      navRight,
+      navLeft,
+      hasFocus,
+      onMouseEnter,
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.header-navigation {
+  &__main {
+    display: flex;
+  }
+}
+.nav-item {
+  --header-navigation-item-margin: 0 var(--spacer-sm);
+
+  .sf-header-navigation-item__item--mobile {
+    display: none;
+  }
+}
+</style>
diff --git a/packages/theme/components/Header/Navigation/HeaderNavigationItem.vue b/packages/theme/components/Header/Navigation/HeaderNavigationItem.vue
index 79653315a..6caec4171 100644
--- a/packages/theme/components/Header/Navigation/HeaderNavigationItem.vue
+++ b/packages/theme/components/Header/Navigation/HeaderNavigationItem.vue
@@ -1,27 +1,29 @@
 <template>
-  <div class="sf-header-navigation-item">
-    <div class="sf-header-navigation-item__item sf-header-navigation-item__item--desktop">
-      <slot name="desktop-navigation-item">
-        <SfLink
-          class="sf-header-navigation-item__link"
-          :link="link"
-        >
-          {{
-            label
-          }}
-        </SfLink>
-      </slot>
-      <slot />
-    </div>
-  </div>
+  <SfLink
+    class="sf-header-navigation-item__link"
+    :link="link"
+  >
+    {{
+      label
+    }}
+    <SfIcon
+      v-if="hasChildren"
+      icon="chevron_down"
+      size="xxs"
+      color="green-primary"
+      viewBox="0 0 24 24"
+      :coverage="1"
+    />
+  </SfLink>
 </template>
-<script>
-import { SfLink } from '@storefront-ui/vue';
+<script lang="ts">
+import { SfLink, SfIcon } from '@storefront-ui/vue';
 
 export default {
   name: 'HeaderNavigationItem',
   components: {
     SfLink,
+    SfIcon,
   },
   props: {
     label: {
@@ -32,6 +34,19 @@ export default {
       type: [String, Object],
       default: '',
     },
+    hasChildren: {
+      type: Boolean,
+      default: false,
+    },
   },
 };
 </script>
+<style lang="scss">
+.sf-header-navigation-item__link {
+  display: flex;
+  .sf-icon {
+    display: inline-flex;
+    margin: 0 var(--spacer-xs);
+  }
+}
+</style>
diff --git a/packages/theme/components/Header/Navigation/HeaderNavigationSubcategories.vue b/packages/theme/components/Header/Navigation/HeaderNavigationSubcategories.vue
new file mode 100644
index 000000000..b81fabaaa
--- /dev/null
+++ b/packages/theme/components/Header/Navigation/HeaderNavigationSubcategories.vue
@@ -0,0 +1,228 @@
+<template>
+  <div
+    v-if="hasChildren(currentCategory)"
+    data-testid="navigation-subcategories"
+    class="header-navigation__subcategories"
+  >
+    <div class="header-navigation__subcategories-inner">
+      <div
+        v-for="(catLvl1, idxLvl1) in currentCategory.children"
+        :key="idxLvl1"
+        class="header-navigation__subcategory"
+        aria-haspopup="true"
+      >
+        <SfLink
+          ref="lvl1CatRefs"
+          class="header-navigation__link1"
+          :link="localePath(getCatLink(catLvl1))"
+          :data-children="catLvl1.children.length"
+          @click.native="$emit('hideSubcategories')"
+          @focus.native="setupNav()"
+          @keydown.right.native.prevent="navRight()"
+          @keydown.left.native.prevent="navLeft()"
+          @keydown.down.native.prevent="navDown()"
+          @keydown.up.native.prevent="navUp()"
+        >
+          <h2 class="sf-heading sf-heading--left sf-heading sf-heading--left h5">
+            {{ catLvl1.name }}
+          </h2>
+        </SfLink>
+        <SfList v-if="hasChildren(catLvl1)">
+          <SfListItem
+            v-for="(catLvl2, idxLvl2) in catLvl1.children"
+            :key="idxLvl2"
+          >
+            <SfLink
+              ref="lvl2CatRefs"
+              class="header-navigation__link2"
+              :link="localePath(getCatLink(catLvl2))"
+              tabindex="-1"
+              @click.native="$emit('hideSubcategories')"
+              @keydown.down.native.prevent="navDown()"
+              @keydown.up.native.prevent="navUp()"
+              @keydown.right.native.prevent="navRight()"
+              @keydown.left.native.prevent="navLeft()"
+            >
+              {{ catLvl2.name }}
+            </SfLink>
+          </SfListItem>
+        </SfList>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import {
+  SfLink, SfList,
+} from '@storefront-ui/vue';
+import {
+  defineComponent, PropType, ref, onMounted,
+} from '@nuxtjs/composition-api';
+import { CategoryTree } from '~/modules/GraphQL/types';
+import { useUiHelpers } from '~/composables';
+
+export default defineComponent({
+  name: 'HeaderNavigationSubcategories',
+  components: {
+    SfLink,
+    SfList,
+  },
+  props: {
+    currentCategory: {
+      type: Object as PropType<CategoryTree | null>,
+      default: () => null,
+    },
+    hasFocus: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { emit }) {
+    const { getCatLink } = useUiHelpers();
+    const hasChildren = (category: CategoryTree) => Boolean(category?.children.length > 0);
+    const lvl1CatRefs = ref([]);
+    const lvl2CatRefs = ref([]);
+    const lvl2GroupedCatRefs = ref([]);
+
+    const getGroupedLvl2CatRefs = () => {
+      let current = 0;
+      const result = [];
+      lvl1CatRefs.value.forEach((lvl1CatRef) => {
+        const groupCount = Number(lvl1CatRef.$attrs['data-children']);
+        result.push(lvl2CatRefs.value.slice(current, current + groupCount));
+        current += groupCount;
+      });
+
+      return result;
+    };
+
+    // Once submenu is opened we start from the very first element
+    let lvl1CatFocusIdx = 0;
+    // We start from the "outside" of lvl2Cats, navigation action must be performed to jump into lvl2CatTree
+    let lvl2CatFocusIdx = -1;
+
+    const navRight = () => {
+      if (lvl1CatRefs.value[++lvl1CatFocusIdx]) {
+        lvl1CatRefs.value[lvl1CatFocusIdx].$el.focus();
+        lvl2CatFocusIdx = -1;
+        lvl2GroupedCatRefs.value = getGroupedLvl2CatRefs();
+      } else {
+        lvl1CatFocusIdx--;
+      }
+    };
+
+    const navLeft = () => {
+      if (lvl1CatRefs.value[--lvl1CatFocusIdx]) {
+        lvl1CatRefs.value[lvl1CatFocusIdx].$el.focus();
+        lvl2CatFocusIdx = -1;
+        lvl2GroupedCatRefs.value = getGroupedLvl2CatRefs();
+      } else {
+        lvl1CatFocusIdx++;
+      }
+    };
+
+    const navDown = () => {
+      lvl2CatFocusIdx++;
+      if (lvl2CatFocusIdx !== -1 && !lvl2GroupedCatRefs.value[lvl1CatFocusIdx][lvl2CatFocusIdx]) {
+        lvl2CatFocusIdx--;
+        return;
+      }
+      lvl2GroupedCatRefs.value[lvl1CatFocusIdx][lvl2CatFocusIdx].$el.focus();
+    };
+
+    const navUp = () => {
+      if (lvl2CatFocusIdx > 0) {
+        lvl2CatFocusIdx--;
+        lvl2GroupedCatRefs.value[lvl1CatFocusIdx][lvl2CatFocusIdx].$el.focus();
+        return;
+      }
+
+      if (lvl2CatFocusIdx === 0) {
+        lvl1CatRefs.value[lvl1CatFocusIdx].$el.focus();
+        lvl2CatFocusIdx = -1;
+
+        return;
+      }
+
+      if (lvl2CatFocusIdx === -1) {
+        emit('hideSubcategories');
+      }
+    };
+
+    const setupNav = () => {
+      lvl2CatFocusIdx = -1;
+      lvl1CatRefs.value[lvl1CatFocusIdx].$el.focus();
+      lvl2GroupedCatRefs.value = getGroupedLvl2CatRefs();
+    };
+
+    onMounted(() => {
+      if (props.hasFocus) {
+        setupNav();
+      }
+    });
+
+    return {
+      getCatLink,
+      hasChildren,
+      navRight,
+      navLeft,
+      navDown,
+      navUp,
+      setupNav,
+      lvl1CatRefs,
+      lvl2CatRefs,
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.header-navigation {
+  &__subcategories {
+    position: absolute;
+    z-index: 10;
+    background-color: #fff;
+    box-shadow: 0 3px var(--c-primary);
+    left: 0;
+    padding: 30px;
+    right: 0;
+    top: 90px;
+    flex-wrap: wrap;
+    justify-content: center;
+    display: flex;
+
+    &-inner {
+      display: flex;
+      justify-content: flex-start;
+      width: var(--header-width, 77.5rem);
+    }
+  }
+
+  &__subcategory {
+    flex: 0 0 25%;
+  }
+
+  .sf-heading {
+    margin-bottom: var(--spacer-sm);
+    &__title {
+      font-weight: bold;
+    }
+    &.h5 {
+      font-size: var(--h5-font-size)
+    }
+  }
+
+  .sf-link {
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &__link2 {
+    &:hover {
+      color: var(--c-primary);
+
+    }
+  }
+}
+</style>
diff --git a/packages/theme/components/Header/Navigation/__tests__/HeaderNavigation.spec.js b/packages/theme/components/Header/Navigation/__tests__/HeaderNavigation.spec.js
new file mode 100644
index 000000000..512083531
--- /dev/null
+++ b/packages/theme/components/Header/Navigation/__tests__/HeaderNavigation.spec.js
@@ -0,0 +1,92 @@
+import userEvent from '@testing-library/user-event';
+import HeaderNavigation from '../HeaderNavigation.vue';
+import { render } from '~/test-utils';
+
+import { useUiHelpers } from '~/composables';
+import useUiHelpersMock from '~/test-utils/mocks/useUiHelpersMock';
+import CategoryTreeDataMock from '~/test-utils/mocks/categoryTreeDataMock';
+
+jest.mock('~/composables');
+useUiHelpers.mockReturnValue(useUiHelpersMock());
+
+const sharedOptions = { props: { categoryTree: CategoryTreeDataMock[0].children } };
+describe('HeaderNavigation', () => {
+  it('displays main categories', () => {
+    const { getByRole } = render(HeaderNavigation, sharedOptions);
+    getByRole('link', { name: /women/i });
+    getByRole('link', { name: /gear/i });
+    getByRole('link', { name: /training/i });
+  });
+
+  it('subcategories are hidden by default', () => {
+    const { queryByTestId } = render(HeaderNavigation, sharedOptions);
+    expect(queryByTestId(/navigation-subcategories/i)).toBeNull();
+  });
+
+  it('subcategories are displayed on @mouseenter', async () => {
+    const user = userEvent.setup();
+    const { getByTestId, getByRole } = render(HeaderNavigation, sharedOptions);
+    const womenCategory = getByTestId('MjA=');
+
+    await user.hover(womenCategory);
+    getByTestId(/navigation-subcategories/i);
+    getByRole('link', { name: /tops/i });
+    getByRole('link', { name: /jackets/i });
+  });
+
+  it('main link is focused on @keyup.tab', async () => {
+    const user = userEvent.setup();
+    const { getByTestId } = render(HeaderNavigation, sharedOptions);
+    const womenCategory = getByTestId('MjA=');
+
+    await user.tab(); // "What's new" no children category
+    await user.tab(); // "Women" category with children
+
+    expect(womenCategory).toHaveFocus();
+  });
+
+  it('user can traverse cat links with arrow keys', async () => {
+    const user = userEvent.setup();
+    const { getByTestId } = render(HeaderNavigation, sharedOptions);
+    const whatsNewCategory = getByTestId('Mzg=');
+    const womenCategory = getByTestId('MjA=');
+    const menCategory = getByTestId('MTE=');
+    const gearCategory = getByTestId('Mw==');
+
+    // Moving right
+    await user.tab(); // "What's new" no children category
+    expect(whatsNewCategory).toHaveFocus();
+    await user.keyboard('{ArrowRight}');
+    expect(womenCategory).toHaveFocus();
+    await user.keyboard('{ArrowRight}');
+    expect(menCategory).toHaveFocus();
+    await user.keyboard('{ArrowRight}');
+    expect(gearCategory).toHaveFocus();
+
+    // Moving left
+    await user.keyboard('{ArrowLeft}');
+    expect(menCategory).toHaveFocus();
+    await user.keyboard('{ArrowLeft}');
+    expect(womenCategory).toHaveFocus();
+    await user.keyboard('{ArrowLeft}');
+    expect(whatsNewCategory).toHaveFocus();
+  });
+
+  it('user can open submenu with @keydown.down and close it with @keydown.up', async () => {
+    const user = userEvent.setup();
+    const { getByTestId, getByRole, queryByTestId } = render(HeaderNavigation, sharedOptions);
+    const womenCategory = getByTestId('MjA=');
+
+    await user.tab(); // "What's new" no children category
+    await user.keyboard('{ArrowRight}');
+    expect(womenCategory).toHaveFocus();
+
+    await user.keyboard('{ArrowDown}');
+    getByTestId(/navigation-subcategories/i);
+    getByRole('link', { name: /tops/i });
+    getByRole('link', { name: /jackets/i });
+
+    await user.keyboard('{ArrowUp}');
+    expect(queryByTestId('navigation-subcategories')).toBeFalsy();
+  });
+});
diff --git a/packages/theme/components/Header/Navigation/__tests__/HeaderNavigationItem.spec.js b/packages/theme/components/Header/Navigation/__tests__/HeaderNavigationItem.spec.js
new file mode 100644
index 000000000..3e21c9e0b
--- /dev/null
+++ b/packages/theme/components/Header/Navigation/__tests__/HeaderNavigationItem.spec.js
@@ -0,0 +1,12 @@
+import HeaderNavigationItem from '../HeaderNavigationItem.vue';
+import { render } from '~/test-utils';
+
+describe('HeaderNavigationItem', () => {
+  it('display proper label and link', () => {
+    const testLabel = 'test_label';
+    const testLink = 'http://some_path/';
+    const { getByText, getByRole } = render(HeaderNavigationItem, { props: { label: testLabel, link: testLink } });
+    getByText(testLabel);
+    expect(getByRole('link', { name: /test_label/i })).toHaveAttribute('href', testLink);
+  });
+});
diff --git a/packages/theme/components/Header/Navigation/__tests__/HeaderNavigationSubcategories.spec.js b/packages/theme/components/Header/Navigation/__tests__/HeaderNavigationSubcategories.spec.js
new file mode 100644
index 000000000..6d78ea1ec
--- /dev/null
+++ b/packages/theme/components/Header/Navigation/__tests__/HeaderNavigationSubcategories.spec.js
@@ -0,0 +1,54 @@
+import userEvent from '@testing-library/user-event';
+import HeaderNavigationSubcategories from '../HeaderNavigationSubcategories.vue';
+import { render } from '~/test-utils';
+import CategoryTreeDataMock from '~/test-utils/mocks/categoryTreeDataMock';
+import { useUiHelpers } from '~/composables';
+import useUiHelpersMock from '~/test-utils/mocks/useUiHelpersMock';
+
+jest.mock('~/composables');
+useUiHelpers.mockReturnValue(useUiHelpersMock());
+
+// Women category selection
+const childrenProps = { props: { currentCategory: CategoryTreeDataMock[0].children[1] } };
+const noChildrenProps = { props: { currentCategory: CategoryTreeDataMock[0].children[0] } };
+
+describe('HeaderNavigationSubcategories', () => {
+  it('displays level 1 children category links', () => {
+    const { getByRole } = render(HeaderNavigationSubcategories, childrenProps);
+    getByRole('link', { name: /tops/i });
+    getByRole('link', { name: /bottoms/i });
+  });
+
+  it('displays level 2 children category links', () => {
+    const { getByRole } = render(HeaderNavigationSubcategories, childrenProps);
+    getByRole('link', { name: /jackets/i });
+    getByRole('link', { name: /hoodies & sweatshirts/i });
+    getByRole('link', { name: /tees/i });
+    getByRole('link', { name: /tanks/i });
+  });
+
+  it('do not display any links if root category has no children', () => {
+    const { queryByTestId } = render(HeaderNavigationSubcategories, noChildrenProps);
+    expect(queryByTestId(/navigation-subcategories/i)).toBeNull();
+  });
+
+  it('should emit "hideSubcategories" event when linkLv1 is clicked', async () => {
+    const user = userEvent.setup();
+    const { getByRole, emitted } = render(HeaderNavigationSubcategories, childrenProps);
+    const lvl1Link = getByRole('link', { name: /tops/i });
+
+    await user.click(lvl1Link);
+
+    expect(emitted()).toHaveProperty('hideSubcategories');
+  });
+
+  it('should emit "hideSubcategories" event when linkLv2 is clicked', async () => {
+    const user = userEvent.setup();
+    const { getByRole, emitted } = render(HeaderNavigationSubcategories, childrenProps);
+    const lvl2Link = getByRole('link', { name: /jackets/i });
+
+    await user.click(lvl2Link);
+
+    expect(emitted()).toHaveProperty('hideSubcategories');
+  });
+});
diff --git a/packages/theme/components/__tests__/AddtoWishlist.spec.js b/packages/theme/components/__tests__/AddtoWishlist.spec.js
index 4855df97b..b349a5051 100644
--- a/packages/theme/components/__tests__/AddtoWishlist.spec.js
+++ b/packages/theme/components/__tests__/AddtoWishlist.spec.js
@@ -1,7 +1,7 @@
 import userEvent from '@testing-library/user-event';
 import { render } from '~/test-utils';
 // @ts-ignore
-import AddToWishlist from '../AddToWishlist';
+import AddToWishlist from '../AddToWishlist.vue';
 
 describe('<AddToWishlist>', () => {
   it('Should not render add to wishlist button because isShow prop equals false by default', () => {
@@ -33,7 +33,9 @@ describe('<AddToWishlist>', () => {
     expect(button).toBeInTheDocument();
   });
 
-  it('Should emit clock event when add to wishlist button is clicked', () => {
+  it('Should emit clock event when add to wishlist button is clicked', async () => {
+    const user = userEvent.setup();
+
     const { getByText, emitted } = render(AddToWishlist, {
       props: {
         isShow: true,
@@ -42,7 +44,7 @@ describe('<AddToWishlist>', () => {
 
     const button = getByText('Add to wishlist');
     // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-    userEvent.click(button);
+    await user.click(button);
 
     expect(emitted()).toHaveProperty('addToWishlist');
   });
diff --git a/packages/theme/package.json b/packages/theme/package.json
index 2e23d0eee..9a014e950 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -64,7 +64,7 @@
     "@nuxt/types": "latest",
     "@nuxt/typescript-build": "^2.1.0",
     "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/user-event": "^14.1.1",
     "@testing-library/vue": "^5.8.2",
     "@vue/test-utils": "^1.3.0",
     "babel-core": "7.0.0-bridge.0",
diff --git a/packages/theme/test-utils/mocks/categoryTreeDataMock.ts b/packages/theme/test-utils/mocks/categoryTreeDataMock.ts
index 240465bef..1f62fe1d6 100644
--- a/packages/theme/test-utils/mocks/categoryTreeDataMock.ts
+++ b/packages/theme/test-utils/mocks/categoryTreeDataMock.ts
@@ -20,7 +20,7 @@ export const categoryTreeData: CategoryTree[] = [
         uid: 'Mzg=',
         url_path: 'what-is-new',
         url_suffix: '.html',
-        include_in_menu: 0,
+        include_in_menu: 1,
         redirect_code: 301,
         children: [],
       },
diff --git a/packages/theme/test-utils/mocks/useUiHelpersMock.ts b/packages/theme/test-utils/mocks/useUiHelpersMock.ts
new file mode 100644
index 000000000..cf9f2493f
--- /dev/null
+++ b/packages/theme/test-utils/mocks/useUiHelpersMock.ts
@@ -0,0 +1,6 @@
+export const useUiHelpersMock = (extend = {}) => ({
+  getCatLink: jest.fn((val) => val),
+  ...extend,
+});
+
+export default useUiHelpersMock;
diff --git a/yarn.lock b/yarn.lock
index 26e91f292..24531bc35 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3661,12 +3661,10 @@
     lodash "^4.17.15"
     redent "^3.0.0"
 
-"@testing-library/user-event@^13.5.0":
-  version "13.5.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.5.0.tgz#69d77007f1e124d55314a2b73fd204b333b13295"
-  integrity sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
+"@testing-library/user-event@^14.1.1":
+  version "14.1.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.1.1.tgz#e1ff6118896e4b22af31e5ea2f9da956adde23d8"
+  integrity sha512-XrjH/iEUqNl9lF2HX9YhPNV7Amntkcnpw0Bo1KkRzowNDcgSN9i0nm4Q8Oi5wupgdfPaJNMAWa61A+voD6Kmwg==
 
 "@testing-library/vue@^5.8.2":
   version "5.8.2"