diff --git a/.changeset/silly-beds-chew.md b/.changeset/silly-beds-chew.md
new file mode 100644
index 0000000000..9da333e811
--- /dev/null
+++ b/.changeset/silly-beds-chew.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-frontend/application-components': patch
+---
+
+fix issue of jumpy modal animation on page resize
diff --git a/packages/application-components/src/components/portals-container/portals-container.tsx b/packages/application-components/src/components/portals-container/portals-container.tsx
index eb97d6ec05..3a1e822f64 100644
--- a/packages/application-components/src/components/portals-container/portals-container.tsx
+++ b/packages/application-components/src/components/portals-container/portals-container.tsx
@@ -114,6 +114,7 @@ const PortalsContainer = forwardRef<TLayoutRefs, TPortalsContainerProps>(
       props.containerSelectorToPreventScrollingOnOpen ?? 'main';
     const zIndex = props.zIndex ?? 10000;
     const baseModalZIndex = props.baseModalZIndex ?? 1000;
+    const modalWidthTransition = 'width 150ms cubic-bezier(1, 0, 0.58, 1)';
 
     const portalsContainerRef = useRef<HTMLDivElement>(null);
     const globalNotificationsElementDimensions = useObserverElementDimensions(
@@ -188,10 +189,12 @@ const PortalsContainer = forwardRef<TLayoutRefs, TPortalsContainerProps>(
                 right: 0;
                 bottom: 0;
                 z-index: ${zIndex};
+                transition: ${modalWidthTransition};
               }
 
               .ReactModal__Body--open.body__menu-open #${PORTALS_CONTAINER_ID} {
                 width: calc(100% - ${offsetLeftOnExpandedMenu});
+                transition: ${modalWidthTransition};
               }
             `,
             // Apply styles for stacking layers.