diff --git a/storefront/components/Layout/Header/MobileMenu/MobileMenu.tsx b/storefront/components/Layout/Header/MobileMenu/MobileMenu.tsx
index a7216ea0ce..c453549e3d 100644
--- a/storefront/components/Layout/Header/MobileMenu/MobileMenu.tsx
+++ b/storefront/components/Layout/Header/MobileMenu/MobileMenu.tsx
@@ -42,7 +42,7 @@ export const MobileMenu: FC = () => {
                         initial={{ translateX: '100%' }}
                         transition={{ duration: 0.2, type: 'tween' }}
                         className={twJoin(
-                            'fixed inset-0 z-maximum flex max-h-screen flex-col gap-5 overflow-y-auto bg-background p-8 shadow-md',
+                            'fixed inset-0 z-maximum max-h-screen w-full overflow-y-auto overflow-x-hidden bg-background p-8 shadow-md',
                         )}
                     >
                         <MobileMenuContent
diff --git a/storefront/components/Layout/Header/MobileMenu/MobileMenuContent.tsx b/storefront/components/Layout/Header/MobileMenu/MobileMenuContent.tsx
index 90363c55bc..df3d55ea8e 100644
--- a/storefront/components/Layout/Header/MobileMenu/MobileMenuContent.tsx
+++ b/storefront/components/Layout/Header/MobileMenu/MobileMenuContent.tsx
@@ -3,9 +3,11 @@ import { SubMenu } from './MobileMenuSubItems';
 import { mapNavigationMenuItems } from './mobileMenuUtils';
 import { ArrowIcon } from 'components/Basic/Icon/ArrowIcon';
 import { CloseIcon } from 'components/Basic/Icon/CloseIcon';
+import { AnimationSequence, useAnimate } from 'framer-motion';
 import { TypeNavigationQuery } from 'graphql/requests/navigation/queries/NavigationQuery.generated';
 import useTranslation from 'next-translate/useTranslation';
 import { useState } from 'react';
+import { twJoin } from 'tailwind-merge';
 
 export type MenuItem = {
     name: string;
@@ -23,19 +25,49 @@ export const MobileMenuContent: FC<MobileMenuContentProps> = ({ navigationItems,
     const { t } = useTranslation();
     const [historyMenuGroups, setHistoryMenuGroups] = useState<MenuItem[][] | undefined>();
     const [currentMenuItems, setCurrentMenuItems] = useState<MenuItem[]>(mapNavigationMenuItems(navigationItems));
+    const [scope, animate] = useAnimate();
 
     const currentGroupTitle = currentMenuItems[0].parentItem;
 
+    const handleExpandClick = (navigationItem: MenuItem) => {
+        const slideAwayThenTeleportIntoViewSequence: AnimationSequence = [
+            ['#animation-visible-element', { transform: 'translateX(-120%)' }, { duration: 0.2, type: 'tween' }],
+            ['#animation-visible-element', { transform: 'translateX(0)' }, { duration: 0 }],
+        ];
+
+        const slideIntoViewThenTeleportAwaySequence: AnimationSequence = [
+            ['#animation-hidden-element', { transform: 'translateX(0)' }, { duration: 0.2, type: 'tween' }],
+            ['#animation-hidden-element', { transform: 'translateX(120%)' }, { duration: 0 }],
+        ];
+
+        animate(slideAwayThenTeleportIntoViewSequence);
+        animate(slideIntoViewThenTeleportAwaySequence);
+
+        setHistoryMenuGroups([...(historyMenuGroups || []), currentMenuItems]);
+        setCurrentMenuItems(navigationItem.children!);
+    };
+
     const handleBackClick = (historyMenuGroups: MenuItem[][]) => {
-        const previousHistoryMenuGroups = [...historyMenuGroups].pop()!;
+        const teleportAwayThenSlideIntoViewSequence: AnimationSequence = [
+            ['#animation-visible-element', { transform: 'translateX(-120%)' }, { duration: 0 }],
+            ['#animation-visible-element', { transform: 'translateX(0)' }, { duration: 0.2, type: 'tween' }],
+        ];
+        const teleportIntoViewThenSlideAwaySequence: AnimationSequence = [
+            ['#animation-hidden-element', { transform: 'translateX(0)' }, { duration: 0 }],
+            ['#animation-hidden-element', { transform: 'translateX(120%)' }, { duration: 0.2, type: 'tween' }],
+        ];
+
+        animate(teleportAwayThenSlideIntoViewSequence);
+        animate(teleportIntoViewThenSlideAwaySequence);
 
+        const previousHistoryMenuGroups = [...historyMenuGroups].pop()!;
         setCurrentMenuItems(previousHistoryMenuGroups);
         setHistoryMenuGroups(historyMenuGroups.slice(0, -1));
     };
 
     return (
-        <>
-            <div className="flex py-3">
+        <div ref={scope}>
+            <div className="mb-5 flex py-3">
                 {!!historyMenuGroups?.length && (
                     <button
                         className="flex w-9 cursor-pointer items-center justify-start gap-2 text-sm uppercase text-text"
@@ -59,21 +91,42 @@ export const MobileMenuContent: FC<MobileMenuContentProps> = ({ navigationItems,
                 </button>
             </div>
 
-            <div>
-                {currentMenuItems.map((navigationItem) => (
-                    <DropdownMenuListItem
-                        key={navigationItem.link}
-                        navigationItem={navigationItem}
-                        onNavigate={onMenuToggleHandler}
-                        onExpand={() => {
-                            setHistoryMenuGroups([...(historyMenuGroups || []), currentMenuItems]);
-                            setCurrentMenuItems(navigationItem.children!);
-                        }}
-                    />
-                ))}
-            </div>
+            <MenuItems
+                id="animation-visible-element"
+                menuItems={currentMenuItems}
+                onExpand={handleExpandClick}
+                onNavigate={onMenuToggleHandler}
+            />
+
+            <MenuItems
+                className="translate-x-[120%]"
+                id="animation-hidden-element"
+                menuItems={currentMenuItems}
+                onExpand={handleExpandClick}
+                onNavigate={onMenuToggleHandler}
+            />
 
             <SubMenu onNavigate={onMenuToggleHandler} />
-        </>
+        </div>
+    );
+};
+
+const MenuItems: FC<{
+    id: string;
+    menuItems: MenuItem[];
+    onExpand: (item: MenuItem) => void;
+    onNavigate: () => void;
+}> = ({ className, id, menuItems, onExpand, onNavigate }) => {
+    return (
+        <div className={twJoin('absolute w-[calc(100%-4rem)] divide-y divide-borderAccent', className)} id={id}>
+            {menuItems.map((navigationItem) => (
+                <DropdownMenuListItem
+                    key={navigationItem.link + navigationItem.name + id}
+                    navigationItem={navigationItem}
+                    onExpand={() => onExpand(navigationItem)}
+                    onNavigate={onNavigate}
+                />
+            ))}
+        </div>
     );
 };
diff --git a/storefront/components/Layout/Header/MobileMenu/MobileMenuListItem.tsx b/storefront/components/Layout/Header/MobileMenu/MobileMenuListItem.tsx
index b080701fa2..fc4c601b10 100644
--- a/storefront/components/Layout/Header/MobileMenu/MobileMenuListItem.tsx
+++ b/storefront/components/Layout/Header/MobileMenu/MobileMenuListItem.tsx
@@ -13,7 +13,7 @@ export const DropdownMenuListItem: FC<DropdownMenuListProps> = ({ navigationItem
     const isWithChildren = !!navigationItem.children?.length;
 
     return (
-        <div key={navigationItem.link} className="flex border-b border-borderAccent py-3 last:border-b-0">
+        <div key={navigationItem.link + navigationItem.name} className="flex py-3">
             <ExtendedNextLink
                 className="flex-1 font-bold uppercase text-text no-underline"
                 href={navigationItem.link}
diff --git a/storefront/components/Layout/Header/MobileMenu/MobileMenuSubItems.tsx b/storefront/components/Layout/Header/MobileMenu/MobileMenuSubItems.tsx
index 35f98faec0..cb74103dc1 100644
--- a/storefront/components/Layout/Header/MobileMenu/MobileMenuSubItems.tsx
+++ b/storefront/components/Layout/Header/MobileMenu/MobileMenuSubItems.tsx
@@ -25,7 +25,7 @@ export const SubMenu: FC<SubMenuProps> = ({ onNavigate }) => {
     const { wishlist } = useWishlist();
 
     return (
-        <div className="mt-auto flex flex-col">
+        <div className="absolute bottom-8 flex flex-col">
             <SubMenuItem href={storesUrl} type="stores" onClick={onNavigate}>
                 {t('Stores')}
             </SubMenuItem>