diff --git a/packages/frontend/component/src/ui/modal/modal.stories.tsx b/packages/frontend/component/src/ui/modal/modal.stories.tsx
index 55f8358e43..414c0f065f 100644
--- a/packages/frontend/component/src/ui/modal/modal.stories.tsx
+++ b/packages/frontend/component/src/ui/modal/modal.stories.tsx
@@ -139,3 +139,37 @@ export const Animations = () => {
     </div>
   );
 };
+
+export const Nested = () => {
+  const [openRoot, setOpenRoot] = useState(false);
+  const [openNested, setOpenNested] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpenRoot(true)}>Open Root Modal</Button>
+      <Modal
+        animation="slideBottom"
+        open={openRoot}
+        onOpenChange={setOpenRoot}
+        contentOptions={{
+          style: {
+            transition: 'all .3s ease 0.1s',
+            transform: openNested
+              ? `scale(0.95) translateY(-20px)`
+              : 'scale(1) translateY(0)',
+          },
+        }}
+      >
+        <Button onClick={() => setOpenNested(true)}>Open Nested Modal</Button>
+      </Modal>
+      <Modal
+        animation="slideBottom"
+        open={openNested}
+        onOpenChange={setOpenNested}
+        overlayOptions={{ style: { background: 'transparent' } }}
+      >
+        Nested Modal
+      </Modal>
+    </>
+  );
+};
diff --git a/packages/frontend/component/src/ui/modal/modal.tsx b/packages/frontend/component/src/ui/modal/modal.tsx
index 6eb5c7b61a..6859e2c805 100644
--- a/packages/frontend/component/src/ui/modal/modal.tsx
+++ b/packages/frontend/component/src/ui/modal/modal.tsx
@@ -89,6 +89,11 @@ class ModalTransitionContainer extends HTMLElement {
     this.animationFrame = requestAnimationFrame(() => {
       if (typeof document.startViewTransition === 'function') {
         const nodes = this.pendingTransitionNodes;
+        nodes.forEach(child => {
+          if (child instanceof HTMLElement) {
+            child.classList.add('vt-active');
+          }
+        });
         document.startViewTransition(() => {
           nodes.forEach(child => {
             // eslint-disable-next-line unicorn/prefer-dom-node-remove
diff --git a/packages/frontend/component/src/ui/modal/styles.css.ts b/packages/frontend/component/src/ui/modal/styles.css.ts
index 2b4ef0b9af..15a4a867c1 100644
--- a/packages/frontend/component/src/ui/modal/styles.css.ts
+++ b/packages/frontend/component/src/ui/modal/styles.css.ts
@@ -92,14 +92,18 @@ export const modalContentWrapper = style({
     },
     '&.anim-fadeScaleTop': {
       animation: `${contentShowFadeScaleTop} 150ms cubic-bezier(0.42, 0, 0.58, 1)`,
-      viewTransitionName: modalContentViewTransitionNameFadeScaleTop,
       animationFillMode: 'forwards',
     },
+    '&.anim-fadeScaleTop.vt-active': {
+      viewTransitionName: modalContentViewTransitionNameFadeScaleTop,
+    },
     '&.anim-slideBottom': {
       animation: `${contentShowSlideBottom} 0.23s ease`,
-      viewTransitionName: modalContentViewTransitionNameSlideBottom,
       animationFillMode: 'forwards',
     },
+    '&.anim-slideBottom.vt-active': {
+      viewTransitionName: modalContentViewTransitionNameSlideBottom,
+    },
   },
 });
 globalStyle(