diff --git a/_dev/css/theme/components/_index.scss b/_dev/css/theme/components/_index.scss
index 34450a05..6edda917 100644
--- a/_dev/css/theme/components/_index.scss
+++ b/_dev/css/theme/components/_index.scss
@@ -2,7 +2,6 @@
 @import "customer/index";
 @import "cart/index";
 @import "cms/index";
-@import "menu/index";
 @import "404/index";
 @import "newsletter/index";
 @import "homeslider/index";
diff --git a/_dev/css/theme/components/menu/_index.scss b/_dev/css/theme/components/menu/_index.scss
deleted file mode 100644
index 6b2ecb2f..00000000
--- a/_dev/css/theme/components/menu/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "mainmenu";
diff --git a/_dev/css/theme/components/menu/_mainmenu.scss b/_dev/css/theme/components/menu/_mainmenu.scss
deleted file mode 100644
index ec742097..00000000
--- a/_dev/css/theme/components/menu/_mainmenu.scss
+++ /dev/null
@@ -1,144 +0,0 @@
-@use "sass:map";
-
-.main-menu {
-  $self: &;
-
-  &__item-header {
-    display: flex;
-    align-items: center;
-    @include media-breakpoint-up(md) {
-      display: block;
-    }
-  }
-
-  &__dropdown {
-    margin: -#{$modal-inner-padding} -#{$modal-inner-padding} map.get($spacers, 3);
-    border-bottom: 1px solid $border-color;
-    @include media-breakpoint-up(md) {
-      position: relative;
-      display: flex;
-      align-items: center;
-      margin: 0;
-      border: 0;
-    }
-  }
-
-  &__list {
-    @include media-breakpoint-up(md) {
-      margin: 0 0 map.get($spacers, 2);
-
-      &--1 {
-        display: flex;
-        flex-wrap: wrap;
-      }
-    }
-  }
-
-  &__item-link {
-    display: block;
-    padding: $modal-inner-padding;
-
-    @include media-breakpoint-up(md) {
-      display: inline-block;
-      padding: 0;
-    }
-
-    &--top {
-      @include font-size($font-size-lg);
-      font-weight: 700;
-      color: $gray-900;
-
-      &:hover,
-      &:focus {
-        text-decoration: none;
-      }
-
-      @include media-breakpoint-up(md) {
-        padding: map.get($spacers, 3) map.get($spacers, 4);
-      }
-    }
-
-    &--sub {
-      color: $gray-900;
-      @include media-breakpoint-up(md) {
-        margin: 0 0 map.get($spacers, 1);
-      }
-    }
-
-    &--1 {
-      font-weight: 700;
-    }
-
-    &--2 {
-      padding-left: #{rem-calc($modal-inner-padding) + rem-calc(map.get($spacers, 2))};
-      @include media-breakpoint-up(md) {
-        padding: 0;
-      }
-    }
-
-    &--3 {
-      padding-left: #{rem-calc($modal-inner-padding) + rem-calc(map.get($spacers, 3))};
-      @include media-breakpoint-up(md) {
-        padding-left: map.get($spacers, 2);
-      }
-    }
-
-    &--4 {
-      padding-left: #{rem-calc($modal-inner-padding) + rem-calc(map.get($spacers, 4))};
-      @include media-breakpoint-up(md) {
-        padding-left: map.get($spacers, 2);
-      }
-    }
-
-  }
-
-  &__item {
-    border-top: 1px solid $border-color;
-
-    &--top {
-      &:first-child {
-        border: 0;
-      }
-    }
-
-    @include media-breakpoint-up(md) {
-      border: 0;
-    }
-
-    &--active {
-      @include media-breakpoint-up(md) {
-        #{$self} {
-          &__sub {
-            visibility: visible;
-            opacity: 1;
-            transform: translateY(0);
-          }
-        }
-      }
-    }
-
-    &--1 {
-      @include media-breakpoint-up(md) {
-        @include custom-col-padded(25%);
-      }
-    }
-  }
-
-  &__sub {
-    background: $gray-100;
-    @include media-breakpoint-up(md) {
-      position: absolute;
-      top: 100%;
-      right: 0;
-      left: 0;
-      z-index: 100;
-      padding: map.get($spacers, 4) map.get($spacers, 4) map.get($spacers, 3);
-      visibility: hidden;
-      background: $white;
-      box-shadow: $box-shadow;
-      opacity: 0;
-      transition: 0.2s ease-in;
-      transform: translateY(5px);
-    }
-  }
-}
diff --git a/_dev/js/theme/components/header/index.js b/_dev/js/theme/components/header/index.js
index 0893c440..46fa3006 100644
--- a/_dev/js/theme/components/header/index.js
+++ b/_dev/js/theme/components/header/index.js
@@ -1,5 +1,4 @@
 import { DOMReady } from '../../../utils/DOM/DOMHelpers';
-import useTopMenu from './useTopMenu';
 import useStickyElement from '../useStickyElement';
 
 const initStickyHeader = () => {
@@ -14,8 +13,5 @@ const initStickyHeader = () => {
 };
 
 DOMReady(() => {
-  const { init: initTopMenu } = useTopMenu('.js-main-menu');
-
-  initTopMenu();
   initStickyHeader();
 });
diff --git a/_dev/js/theme/components/header/useTopMenu.js b/_dev/js/theme/components/header/useTopMenu.js
deleted file mode 100644
index 095e257b..00000000
--- a/_dev/js/theme/components/header/useTopMenu.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { on, off } from '../../../utils/event/eventHandler';
-
-const useTopMenu = (selector) => {
-  const menuElement = document.querySelector(selector);
-  const DOM_SELECTORS = {
-    SUB_ELEMENTS: '.main-menu__item--top',
-    SUB_MENU: '.main-menu__sub',
-  };
-  const ITEM_ACTIVE = 'main-menu__item--active';
-
-  const toggleSubMenu = (e) => {
-    const { currentTarget } = e;
-    const { SUB_MENU } = DOM_SELECTORS;
-    const expanded = currentTarget.getAttribute('aria-expanded');
-    const isExpanded = expanded && expanded.toLowerCase() === 'true';
-    const subMenu = currentTarget.querySelector(SUB_MENU);
-
-    currentTarget.classList.toggle(ITEM_ACTIVE);
-
-    if (subMenu) {
-      currentTarget.setAttribute('aria-expanded', !isExpanded);
-
-      subMenu.setAttribute('aria-hidden', isExpanded);
-      subMenu.setAttribute('aria-expanded', !isExpanded);
-    }
-  };
-
-  const init = () => {
-    const { SUB_ELEMENTS } = DOM_SELECTORS;
-
-    off(menuElement, 'mouseenter', SUB_ELEMENTS, toggleSubMenu);
-    off(menuElement, 'mouseleave', SUB_ELEMENTS, toggleSubMenu);
-    on(menuElement, 'mouseenter', SUB_ELEMENTS, toggleSubMenu);
-    on(menuElement, 'mouseleave', SUB_ELEMENTS, toggleSubMenu);
-  };
-
-  return {
-    init,
-  };
-};
-
-export default useTopMenu;
diff --git a/config/theme.yml b/config/theme.yml
index d65f8292..c2fe3fa9 100644
--- a/config/theme.yml
+++ b/config/theme.yml
@@ -57,12 +57,14 @@ global_settings:
      - is_shoppingcart
      - is_imageslider
      - is_searchbar
+     - is_mainmenu
    to_disable:
      - blockreassurance
      - ps_searchbar
      - ps_shoppingcart
      - ps_imageslider
      - blockwishlist
+     - ps_mainmenu
   hooks:
     modules_to_hook:
       displayNav1:
diff --git a/templates/_partials/header.tpl b/templates/_partials/header.tpl
index 76d6c280..84808c8d 100644
--- a/templates/_partials/header.tpl
+++ b/templates/_partials/header.tpl
@@ -56,7 +56,7 @@
                                     href="#"
                                     role="button"
                                     data-bs-toggle="offcanvas"
-                                    data-bs-target="#mobile_top_menu_wrapper"
+                                    data-bs-target="#mobile_menu_offcanvas"
                             >
                                 <div class="header-top__icon-container">
                                     <span class="header-top__icon material-icons">menu</span>
diff --git a/templates/_partials/mobile-modals.tpl b/templates/_partials/mobile-modals.tpl
index deb0a749..fef2af07 100644
--- a/templates/_partials/mobile-modals.tpl
+++ b/templates/_partials/mobile-modals.tpl
@@ -1,6 +1,4 @@
 
 {include file="_partials/modal-search.tpl"}
 
-{include file="_partials/modal-menu.tpl"}
-
 {include file="_partials/modal-filters.tpl"}
diff --git a/templates/_partials/modal-menu.tpl b/templates/_partials/modal-menu.tpl
deleted file mode 100644
index 1ba2a54b..00000000
--- a/templates/_partials/modal-menu.tpl
+++ /dev/null
@@ -1,12 +0,0 @@
-{extends file='components/offcanvas.tpl'}
-
-{block name='offcanvas_extra_attribues'}id="mobile_top_menu_wrapper"{/block}
-{block name='offcanvas_title'}{l s='Menu' d='Shop.Theme.Catalog'}{/block}
-{block name='offcanvas_body'}
-  <div class="js-top-menu mobile" id="_mobile_top_menu"></div>
-  <div class="js-top-menu-bottom">
-    <div id="_mobile_currency_selector" class="mb-2"></div>
-    <div id="_mobile_language_selector" class="mb-2"></div>
-    <div id="_mobile_contact_link" class="mb-2"></div>
-  </div>
-{/block}
diff --git a/templates/layouts/layout-both-columns.tpl b/templates/layouts/layout-both-columns.tpl
index e27ec56d..3d61eb20 100644
--- a/templates/layouts/layout-both-columns.tpl
+++ b/templates/layouts/layout-both-columns.tpl
@@ -120,6 +120,8 @@
       {include file="_partials/page-loader.tpl"}
     {/block}
 
+    {hook h='displayMobileMenu'}
+
   </body>
 
 </html>