diff --git a/.changeset/warm-pans-kiss.md b/.changeset/warm-pans-kiss.md
new file mode 100644
index 0000000000..cc14d3155f
--- /dev/null
+++ b/.changeset/warm-pans-kiss.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`Modal`, `Dialog`, `Drawer`: improve opening/closing animations
diff --git a/e2e/tests/componentsWithinModal/test.spec.ts b/e2e/tests/componentsWithinModal/test.spec.ts
index 95bf672f57..3d660b64ee 100644
--- a/e2e/tests/componentsWithinModal/test.spec.ts
+++ b/e2e/tests/componentsWithinModal/test.spec.ts
@@ -29,7 +29,9 @@ test('open modal, select an option, open nested modal through select input, clos
   await page.getByTestId('select-input-color').click()
 
   await page.getByRole('button', { name: 'Open Nested Modal' }).click()
-  await page.locator('dialog').filter({ hasText: 'This is the nested modal' }).getByLabel('close').click()
+  const nestedModal = page.locator('dialog').filter({ hasText: 'This is the nested modal' })
+  await nestedModal.getByLabel('close').click()
+  await expect(nestedModal).not.toBeAttached()
 
   await page.getByLabel('close').click()
   await expect(page.locator('dialog')).not.toBeVisible()
diff --git a/packages/ui/src/components/Dialog/__tests__/index.test.tsx b/packages/ui/src/components/Dialog/__tests__/index.test.tsx
index bdfa627b69..98e6e7b2d6 100644
--- a/packages/ui/src/components/Dialog/__tests__/index.test.tsx
+++ b/packages/ui/src/components/Dialog/__tests__/index.test.tsx
@@ -1,4 +1,4 @@
-import { screen } from '@testing-library/react'
+import { screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import { renderWithTheme } from '@utils/test'
 import { describe, expect, it, vi } from 'vitest'
@@ -45,7 +45,9 @@ describe('dialog', () => {
 
     const cancelButton = screen.getByRole('button', { name: 'Cancel' })
     await userEvent.click(cancelButton)
-    expect(screen.queryByRole('heading', { name: 'Title Test' })).not.toBeInTheDocument()
+    await waitFor(() => {
+      expect(screen.queryByRole('heading', { name: 'Title Test' })).not.toBeInTheDocument()
+    })
   })
 
   it('[CancelButton] : should handle click', async () => {
diff --git a/packages/ui/src/components/Dialog/components/Button.tsx b/packages/ui/src/components/Dialog/components/Button.tsx
index b2620f5051..b697fe87a4 100644
--- a/packages/ui/src/components/Dialog/components/Button.tsx
+++ b/packages/ui/src/components/Dialog/components/Button.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import type { ComponentProps, ReactNode } from 'react'
+import type { ComponentProps, MouseEvent, ReactNode } from 'react'
 import { Button } from '../../Button'
 import { useDialogContext } from '../Context'
 
@@ -11,8 +11,16 @@ type DialogButtonProps = {
 export const DialogButton = ({ children, onClick, disabled, tooltip, style }: DialogButtonProps) => {
   const context = useDialogContext()
 
+  function onButtonClick(e: MouseEvent<HTMLElement>) {
+    const dialog = (e.target as HTMLElement).closest('dialog')
+    if (dialog) {
+      dialog.dataset['closeAction'] = 'confirm'
+    }
+    onClick?.(e)
+  }
+
   return (
-    <Button disabled={disabled} onClick={onClick} sentiment={context.sentiment} style={style} tooltip={tooltip}>
+    <Button disabled={disabled} onClick={onButtonClick} sentiment={context.sentiment} style={style} tooltip={tooltip}>
       {children}
     </Button>
   )
diff --git a/packages/ui/src/components/Drawer/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Drawer/__tests__/__snapshots__/index.test.tsx.snap
index 2006555b4a..bb3b021783 100644
--- a/packages/ui/src/components/Drawer/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Drawer/__tests__/__snapshots__/index.test.tsx.snap
@@ -175,26 +175,25 @@ exports[`drawer > renders with disclosure and onClose 1`] = `
   </div>
   <div>
     <div
-      class="backdrop-drawer styles__lrojhc7 styles__lrojhc6 styles_open_true__lrojhc8 styles_visible_true__lrojhc9"
+      class="backdrop-drawer styles__lrojhc7"
       data-testid="test-backdrop"
-      data-visible="true"
     >
       <dialog
         aria-label="drawer-test"
         aria-modal="true"
-        class="styles_medium__1iezf7y4 styles__1iezf7yb styles__lrojhca styles_placement_top-right__lrojhcl styles_size_medium__lrojhco"
+        class="styles_medium__1iezf7y1 styles__1iezf7y8 styles__lrojhc8 styles_placement_right__lrojhcf styles_size_medium__lrojhcl"
         data-size="medium"
         data-testid="test"
         id="drawer-test"
         open=""
-        style="--lrojhc0: -0px; --lrojhc1: -50px;"
+        style="--lrojhc0: -0px; --lrojhc1: 1.1;"
         tabindex="0"
       >
         <div
-          class="styles__1iezf7y6 styles__toi52u0 styles_flexDirection_column_xxsmall__toi52u2d styles_gap_1rem_xxsmall__toi52u3v"
+          class="styles__1iezf7y3 styles__toi52u0 styles_flexDirection_column_xxsmall__toi52u2d styles_gap_1rem_xxsmall__toi52u3v"
         >
           <h2
-            class="styles__1iezf7y9 style__m4c9ow0 style_prominence_default__m4c9ow4 style_sentiment_neutral__m4c9owb style_variant_headingSmallStrong__m4c9ow16 style_undefined_compound_0__m4c9ow1a style_undefined_compound_64__m4c9ow32"
+            class="styles__1iezf7y6 style__m4c9ow0 style_prominence_default__m4c9ow4 style_sentiment_neutral__m4c9owb style_variant_headingSmallStrong__m4c9ow16 style_undefined_compound_0__m4c9ow1a style_undefined_compound_64__m4c9ow32"
           >
             header
           </h2>
@@ -204,10 +203,10 @@ exports[`drawer > renders with disclosure and onClose 1`] = `
             style="--bu43fb0: 1px;"
           />
           <div
-            class="styles__1iezf7y7"
+            class="styles__1iezf7y4"
           >
             <div
-              class="styles__1iezf7y8"
+              class="styles__1iezf7y5"
             >
               <div>
                 drawer
@@ -216,7 +215,7 @@ exports[`drawer > renders with disclosure and onClose 1`] = `
           </div>
         </div>
         <div
-          class="styles__lrojhc2"
+          class="styles__lrojhc3"
         >
           <button
             aria-label="close"
diff --git a/packages/ui/src/components/Drawer/index.tsx b/packages/ui/src/components/Drawer/index.tsx
index 8c75648d37..5d80c37244 100644
--- a/packages/ui/src/components/Drawer/index.tsx
+++ b/packages/ui/src/components/Drawer/index.tsx
@@ -121,7 +121,7 @@ export const BaseDrawer = ({
       onClose={onClose}
       onOpen={onOpenPush}
       open={open}
-      placement="top-right"
+      placement="right"
       preventBodyScroll={!push}
       ref={modalRef}
       size={size}
diff --git a/packages/ui/src/components/Drawer/styles.css.ts b/packages/ui/src/components/Drawer/styles.css.ts
index b38df95ebf..cf712fc2fc 100644
--- a/packages/ui/src/components/Drawer/styles.css.ts
+++ b/packages/ui/src/components/Drawer/styles.css.ts
@@ -1,5 +1,5 @@
 import { theme } from '@ultraviolet/themes'
-import { globalStyle, keyframes, style, styleVariants } from '@vanilla-extract/css'
+import { globalStyle, style, styleVariants } from '@vanilla-extract/css'
 
 export const SIZES = {
   large: 75.5,
@@ -7,35 +7,12 @@ export const SIZES = {
   small: 22.25,
 } as const
 
-export const DURATION = {
-  large: 0.3,
-  medium: 0.25,
-  small: 0.15,
-} as const
-
-const slideIn = () =>
-  keyframes({
-    '0%': {
-      transform: 'translateX(90%)',
-    },
-    '100%': {
-      transform: 'translateX(0)',
-    },
-  })
-
 export type SizeProp = keyof typeof SIZES
 
-function makeStyleSize(size: SizeProp) {
-  return {
-    height: '100%',
-    transform: 'translateX(0)',
-    animation: `${slideIn()} linear ${DURATION[size]}s`,
-  }
-}
 const drawer = styleVariants({
-  large: makeStyleSize('large'),
-  medium: makeStyleSize('medium'),
-  small: makeStyleSize('small'),
+  large: {},
+  medium: {},
+  small: {},
 })
 
 const contentWrapper = style({
@@ -63,7 +40,9 @@ const footer = style({
   paddingTop: 0,
 })
 
-const base = style({})
+const base = style({
+  height: '100%',
+})
 
 const push = style({})
 
@@ -71,17 +50,14 @@ const contentToPushStyle = style({})
 
 globalStyle(`${contentToPushStyle}[data-drawer="small"]`, {
   paddingRight: `${SIZES.small}rem`,
-  transition: `padding-right ${DURATION.small}s !important`,
 })
 
 globalStyle(`${contentToPushStyle}[data-drawer="medium"]`, {
-  transition: `padding-right ${DURATION.small}s !important`,
   paddingRight: `${SIZES.medium}rem`,
 })
 
 globalStyle(`${contentToPushStyle}[data-drawer="large"]`, {
   paddingRight: `${SIZES.large}rem`,
-  transition: `padding-right ${DURATION.large}s !important`,
 })
 export const drawerStyle = {
   drawer,
diff --git a/packages/ui/src/components/Modal/ModalContent.tsx b/packages/ui/src/components/Modal/ModalContent.tsx
index 33fdac478d..159367a33a 100644
--- a/packages/ui/src/components/Modal/ModalContent.tsx
+++ b/packages/ui/src/components/Modal/ModalContent.tsx
@@ -1,15 +1,16 @@
 'use client'
 
 import { CloseIcon } from '@ultraviolet/icons/CloseIcon'
+import { useEffect, useState } from 'react'
 import type { ComponentProps, CSSProperties } from 'react'
 import type { Modal } from '.'
 import { Button } from '../Button'
 import { Dialog } from './components/Dialog'
 import type { ModalPlacement, ModalSize } from './types'
+import { ANIMATION_DURATION_MS } from './constants.css'
 import { modalStyle } from './styles.css'
 
 type ModalContentProps = ComponentProps<typeof Modal> & {
-  visible: boolean
   open: boolean
   placement: ModalPlacement
   finalSize: ModalSize
@@ -23,7 +24,6 @@ type ModalContentProps = ComponentProps<typeof Modal> & {
 }
 
 export const ModalContent = ({
-  visible,
   open,
   placement,
   finalSize,
@@ -45,8 +45,14 @@ export const ModalContent = ({
   style,
   ref,
   isDrawer,
-}: ModalContentProps) =>
-  visible || open ? (
+}: ModalContentProps) => {
+  const shouldRender = useDelayUnmount(open, ANIMATION_DURATION_MS)
+
+  if (!shouldRender) {
+    return null
+  }
+
+  return (
     <Dialog
       ariaLabel={ariaLabel}
       backdropClassName={backdropClassName}
@@ -58,7 +64,7 @@ export const ModalContent = ({
       image={image}
       isDrawer={isDrawer}
       onClose={handleClose}
-      open={visible || open}
+      open={open}
       placement={placement}
       preventBodyScroll={preventBodyScroll}
       ref={ref}
@@ -71,7 +77,7 @@ export const ModalContent = ({
             modalId: finalId,
             show: handleOpen,
             toggle: handleToggle,
-            visible,
+            visible: open,
           })
         : children}
       <div className={modalStyle.container}>
@@ -89,4 +95,21 @@ export const ModalContent = ({
         ) : null}
       </div>
     </Dialog>
-  ) : null
+  )
+}
+
+function useDelayUnmount(open?: boolean, delayTime?: number) {
+  const [shouldRender, setShouldRender] = useState(open)
+
+  useEffect(() => {
+    let timeoutId: ReturnType<typeof setTimeout>
+    if (open && !shouldRender) {
+      setShouldRender(true)
+    } else if (!open && shouldRender) {
+      timeoutId = setTimeout(() => setShouldRender(false), delayTime)
+    }
+    return () => clearTimeout(timeoutId)
+  }, [open, delayTime, shouldRender])
+
+  return shouldRender
+}
diff --git a/packages/ui/src/components/Modal/__stories__/Placement.stories.tsx b/packages/ui/src/components/Modal/__stories__/Placement.stories.tsx
index bc8849d78b..d5d5e8e25e 100644
--- a/packages/ui/src/components/Modal/__stories__/Placement.stories.tsx
+++ b/packages/ui/src/components/Modal/__stories__/Placement.stories.tsx
@@ -1,7 +1,7 @@
 import type { StoryFn } from '@storybook/react-vite'
 import { Modal } from '..'
 import { Button } from '../../Button'
-import { MODAL_PLACEMENT } from '../constants'
+import { MODAL_PLACEMENT } from '../constants.css'
 
 export const Placement: StoryFn = props => (
   <>
diff --git a/packages/ui/src/components/Modal/__stories__/Size.stories.tsx b/packages/ui/src/components/Modal/__stories__/Size.stories.tsx
index 6314f40537..d45888a45a 100644
--- a/packages/ui/src/components/Modal/__stories__/Size.stories.tsx
+++ b/packages/ui/src/components/Modal/__stories__/Size.stories.tsx
@@ -1,7 +1,7 @@
 import type { StoryFn } from '@storybook/react-vite'
 import { Modal } from '..'
 import { Button } from '../../Button'
-import { MODAL_WIDTH } from '../constants'
+import { MODAL_WIDTH } from '../constants.css'
 
 export const Size: StoryFn = props => (
   <>
diff --git a/packages/ui/src/components/Modal/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Modal/__tests__/__snapshots__/index.test.tsx.snap
index b99e2ce871..acf9d52c74 100644
--- a/packages/ui/src/components/Modal/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Modal/__tests__/__snapshots__/index.test.tsx.snap
@@ -95,26 +95,25 @@ exports[`modal > renders with disclosure and onClose 1`] = `
   </div>
   <div>
     <div
-      class="styles__lrojhc7 styles__lrojhc6 styles_open_true__lrojhc8 styles_visible_true__lrojhc9"
+      class="styles__lrojhc7"
       data-testid="test-backdrop"
-      data-visible="true"
     >
       <dialog
         aria-label="modal-test"
         aria-modal="true"
-        class="styles__lrojhca styles_placement_center__lrojhcg styles_size_small__lrojhcp"
+        class="styles__lrojhc8 styles_placement_center__lrojhcd styles_size_small__lrojhcm"
         data-size="small"
         data-testid="test"
         id="modal-test"
         open=""
-        style="--lrojhc0: -0px; --lrojhc1: 0px;"
+        style="--lrojhc0: -0px; --lrojhc1: 1;"
         tabindex="0"
       >
         <div>
           modal
         </div>
         <div
-          class="styles__lrojhc2"
+          class="styles__lrojhc3"
         >
           <button
             aria-label="close"
diff --git a/packages/ui/src/components/Modal/__tests__/index.test.tsx b/packages/ui/src/components/Modal/__tests__/index.test.tsx
index d76dc25c97..71375ae20f 100644
--- a/packages/ui/src/components/Modal/__tests__/index.test.tsx
+++ b/packages/ui/src/components/Modal/__tests__/index.test.tsx
@@ -1,4 +1,4 @@
-import { renderHook, screen } from '@testing-library/react'
+import { renderHook, screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import { consoleLightTheme } from '@ultraviolet/themes'
 import { renderWithTheme } from '@utils/test'
@@ -127,8 +127,10 @@ describe('modal', () => {
     await userEvent.click(screen.getByRole('button', { name: 'Open modal' }))
     const closeButton = screen.getByRole('button', { name: 'close' })
     await userEvent.click(closeButton)
-    expect(count).toBe(1)
 
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument())
+
+    expect(count).toBe(1)
     expect(asFragment()).toMatchSnapshot()
   })
 
diff --git a/packages/ui/src/components/Modal/components/Dialog.tsx b/packages/ui/src/components/Modal/components/Dialog.tsx
index 51e46cfc28..83daef234e 100644
--- a/packages/ui/src/components/Modal/components/Dialog.tsx
+++ b/packages/ui/src/components/Modal/components/Dialog.tsx
@@ -2,7 +2,7 @@
 
 import { cn } from '@ultraviolet/utils'
 import { assignInlineVars } from '@vanilla-extract/dynamic'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 import type {
   FocusEventHandler,
   KeyboardEvent,
@@ -14,7 +14,7 @@ import { createPortal } from 'react-dom'
 import { Stack } from '../../Stack'
 import { useModal } from '../ModalProvider'
 import type { DialogProps } from '../types'
-import { modalStyle, positionModal, topModal } from '../styles.css'
+import { modalStyle, nestedModalScale, nestedModalTop } from '../styles.css'
 
 // Prevent default behaviour on Escape
 const stopCancel: ReactEventHandler = event => {
@@ -39,30 +39,28 @@ export const Dialog = ({
   style,
   ref,
   isDrawer,
+  open,
 }: DialogProps) => {
-  const [isVisible, setIsVisible] = useState(false)
-
   const containerRef = useRef(document.createElement('div'))
   const nonDefaultRef = useRef<HTMLDialogElement>(null)
   const dialogRef = ref ?? nonDefaultRef
   const onCloseRef = useRef(onClose)
-  const { registerModal, unregisterModal, openedModals, previsousOpenedModales } = useModal()
-
-  useEffect(() => {
-    setIsVisible(true)
-  }, [])
+  const { registerModal, unregisterModal, openedModals } = useModal()
 
   // register/unregister the modal to handle nested modals
   useEffect(() => {
     // a drawer should not be registered since it does not stack with other modals
-    if (!isDrawer) {
+    if (open && !isDrawer) {
       registerModal({ id, ref: dialogRef })
     }
+    if (!open) {
+      unregisterModal(id)
+    }
 
     return () => {
       unregisterModal(id)
     }
-  }, [id, registerModal, unregisterModal, dialogRef, isDrawer])
+  }, [id, open, registerModal, unregisterModal, dialogRef, isDrawer])
 
   // Portal to put the modal in
   useEffect(() => {
@@ -83,8 +81,10 @@ export const Dialog = ({
 
   // On open focus the modal
   useEffect(() => {
-    dialogRef.current?.focus()
-  }, [dialogRef])
+    if (open) {
+      dialogRef.current?.focus()
+    }
+  }, [open, dialogRef])
 
   // Handle body scroll
   useEffect(() => {
@@ -197,13 +197,10 @@ export const Dialog = ({
     top = (modalAbove?.ref?.current?.offsetHeight ?? 0) / 2 - currentModalHeight / 2 + 20
   }
 
-  const animation = openedModals.length > 1 && position === 0 && previsousOpenedModales.length < openedModals.length
-
   return createPortal(
     <div
-      className={cn(backdropClassName, modalStyle.backdrop({ open: true, visible: isVisible }))}
+      className={cn(backdropClassName, modalStyle.backdrop)}
       data-testid={dataTestId ? `${dataTestId}-backdrop` : undefined}
-      data-visible={isVisible}
       onClick={handleClose}
       onFocus={stopFocus}
       onKeyDown={() => {}}
@@ -214,7 +211,6 @@ export const Dialog = ({
         className={cn(
           className,
           modalStyle.modal({
-            animation,
             image: !!image,
             placement,
             positivePosition: position > 0,
@@ -228,12 +224,12 @@ export const Dialog = ({
         onClose={stopCancel}
         onKeyDown={handleFocusTrap}
         onKeyUp={handleKeyUp}
-        open
+        open={open}
         ref={dialogRef}
         style={{
           ...assignInlineVars({
-            [topModal]: `-${top}px`,
-            [positionModal]: `${position * 50}px`,
+            [nestedModalTop]: `-${top}px`,
+            [nestedModalScale]: String(1 - position * 0.1),
           }),
           ...style,
         }}
diff --git a/packages/ui/src/components/Modal/constants.css.ts b/packages/ui/src/components/Modal/constants.css.ts
new file mode 100644
index 0000000000..54a3fa6951
--- /dev/null
+++ b/packages/ui/src/components/Modal/constants.css.ts
@@ -0,0 +1,88 @@
+import type { StyleRule } from '@vanilla-extract/css'
+import { createVar } from '@vanilla-extract/css'
+import type { ModalPlacement, ModalSize } from './types'
+
+export const MODAL_WIDTH: Record<ModalSize, number> = {
+  large: 53.125, // in rem
+  medium: 44.25,
+  small: 38.5,
+  xsmall: 25,
+  xxsmall: 22.5,
+}
+
+export const ANIMATION_DURATION_MS = 250
+export const ANIMATION_EASING_OPACITY = 'ease'
+
+export const animationEasingTranslation = createVar()
+export const animationDuration = createVar()
+export const animationDurationTranslation = createVar()
+export const offscreenTranslation = createVar()
+
+export const MODAL_PLACEMENT: Record<ModalPlacement, StyleRule> = {
+  bottom: {
+    margin: 'auto',
+    marginBottom: 0,
+    vars: {
+      [offscreenTranslation]: 'translateY(8px)',
+    },
+  },
+  'bottom-left': {
+    margin: 'auto',
+    marginBottom: 0,
+    marginLeft: 0,
+    vars: {
+      [offscreenTranslation]: 'translateY(8px)',
+    },
+  },
+  'bottom-right': {
+    margin: 'auto',
+    marginBottom: 0,
+    marginRight: 0,
+    vars: {
+      [offscreenTranslation]: 'translateY(8px)',
+    },
+  },
+  center: {
+    margin: 'auto',
+    vars: {
+      [offscreenTranslation]: 'scale(.97)',
+    },
+  },
+  left: {
+    margin: 'auto',
+    marginLeft: 0,
+    vars: {
+      [offscreenTranslation]: 'translateX(-8px)',
+    },
+  },
+  right: {
+    margin: 'auto',
+    marginRight: 0,
+    vars: {
+      [offscreenTranslation]: 'translateX(8px)',
+    },
+  },
+  top: {
+    margin: 'auto',
+    marginTop: 0,
+    vars: {
+      [offscreenTranslation]: 'translateY(-8px)',
+    },
+  },
+  'top-left': {
+    margin: 'auto',
+    marginLeft: 0,
+    marginTop: 0,
+    vars: {
+      [offscreenTranslation]: 'translateY(-8px)',
+    },
+  },
+  'top-right': {
+    margin: 'auto',
+    marginRight: 0,
+    marginTop: 0,
+    vars: {
+      [offscreenTranslation]: 'translateY(-8px)',
+    },
+  },
+}
diff --git a/packages/ui/src/components/Modal/constants.ts b/packages/ui/src/components/Modal/constants.ts
deleted file mode 100644
index 6b9beda4b6..0000000000
--- a/packages/ui/src/components/Modal/constants.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import type { ModalSize } from './types'
-
-export const MODAL_WIDTH: Record<ModalSize, number> = {
-  large: 53.125, // in rem
-  medium: 44.25,
-  small: 38.5,
-  xsmall: 25,
-  xxsmall: 22.5,
-}
-
-export const MODAL_PLACEMENT = {
-  bottom: {
-    margin: 'auto',
-    marginBottom: 0,
-  },
-  'bottom-left': {
-    margin: 'auto',
-    marginBottom: 0,
-    marginLeft: 0,
-  },
-  'bottom-right': {
-    margin: 'auto',
-    marginBottom: 0,
-    marginRight: 0,
-  },
-  center: {
-    margin: 'auto',
-  },
-  left: {
-    margin: 'auto',
-    marginLeft: 0,
-  },
-  right: {
-    margin: 'auto',
-    marginRight: 0,
-  },
-  top: {
-    margin: 'auto',
-    marginTop: 0,
-  },
-  'top-left': {
-    margin: 'auto',
-    marginLeft: 0,
-    marginTop: 0,
-  },
-  'top-right': {
-    margin: 'auto',
-    marginRight: 0,
-    marginTop: 0,
-  },
-}
diff --git a/packages/ui/src/components/Modal/index.tsx b/packages/ui/src/components/Modal/index.tsx
index 941382c022..1ad841224c 100644
--- a/packages/ui/src/components/Modal/index.tsx
+++ b/packages/ui/src/components/Modal/index.tsx
@@ -136,12 +136,11 @@ export const Modal = ({
           closeButtonSentiment={closeButtonSentiment}
           isClosable={isClosable}
           isDrawer={isDrawer}
-          open={open}
+          open={visible || open}
           placement={placement}
           preventBodyScroll={preventBodyScroll}
           ref={ref}
           style={style}
-          visible={visible}
         >
           {children}
         </ModalContent>
diff --git a/packages/ui/src/components/Modal/styles.css.ts b/packages/ui/src/components/Modal/styles.css.ts
index 7517c53169..89ea44e823 100644
--- a/packages/ui/src/components/Modal/styles.css.ts
+++ b/packages/ui/src/components/Modal/styles.css.ts
@@ -1,13 +1,22 @@
 import { theme } from '@ultraviolet/themes'
 import { createVar, style } from '@vanilla-extract/css'
 import { recipe } from '@vanilla-extract/recipes'
-import { slideFromBottom } from '../../utils'
-import { MODAL_PLACEMENT, MODAL_WIDTH } from './constants'
 import { dialogStyle } from '../Dialog/styles.css'
 import { drawerStyle, SIZES } from '../Drawer/styles.css'
+import {
+  ANIMATION_DURATION_MS,
+  ANIMATION_EASING_OPACITY,
+  animationDuration,
+  animationDurationTranslation,
+  animationEasingTranslation,
+  MODAL_PLACEMENT,
+  MODAL_WIDTH,
+  offscreenTranslation,
+} from './constants.css'
 
-export const topModal = createVar()
-export const positionModal = createVar()
+export const nestedModalTop = createVar()
+export const nestedModalScale = createVar()
+const modalWidth = createVar()
 
 const container = style({
   position: 'absolute',
@@ -35,45 +44,60 @@ const content = style({
   padding: theme.space[3],
 })
 
-const backdropBase = style({
-  backgroundColor: theme.colors.overlay,
-  height: 0,
-  opacity: 0,
-  overflow: 'hidden',
+const backdrop = style({
+  height: '100%',
+  width: '100%',
+  overflow: 'auto',
   position: 'fixed',
-  right: 0,
-  top: 0,
-  width: 0,
+  inset: 0,
   zIndex: 1,
+  display: 'flex',
+  padding: theme.space[2],
+  '@starting-style': {
+    overflow: 'hidden',
+  },
+  vars: {
+    [animationDuration]: `${ANIMATION_DURATION_MS}ms`,
+    [animationEasingTranslation]: 'cubic-bezier(0.22, 1, 0.36, 1)', // easeOutQuint
+    [animationDurationTranslation]: `calc(${animationDuration} * 1.5)`,
+  },
   selectors: {
+    ['&::before']: {
+      content: '',
+      position: 'fixed',
+      inset: '0',
+      background: theme.colors.overlay,
+      transition: `opacity ${animationDuration} ${ANIMATION_EASING_OPACITY}`,
+      '@starting-style': {
+        opacity: 0,
+      },
+    },
+    ['&:not(:has(dialog[open]))::before']: {
+      opacity: 0,
+    },
+    [`&:not(:has(dialog[open]))`]: {
+      vars: {
+        [animationDuration]: `${ANIMATION_DURATION_MS * 0.7}ms`,
+        [animationDurationTranslation]: animationDuration,
+      },
+      overflow: 'hidden',
+      transitionDelay: '0s',
+    },
     [`&:has(${drawerStyle.base})`]: {
       padding: 0,
-      transition: 'opacity 100ms ease-in-out',
+      transition: `overflow 0s ${animationDurationTranslation} allow-discrete`, // prevent a horizontal scrollbar
     },
     [`&:has(${drawerStyle.push})`]: {
-      background: 'none',
       pointerEvents: 'none',
     },
-  },
-})
-
-const backdrop = recipe({
-  base: backdropBase,
-  variants: {
-    open: {
-      true: {
-        bottom: 0,
-        display: 'flex',
-        height: '100%',
-        left: 0,
-        overflow: 'auto',
-        padding: theme.space[2],
-        width: '100%',
-      },
+    [`&:has(${drawerStyle.push})::before`]: {
+      background: 'none',
     },
-    visible: {
-      true: {
-        opacity: 1,
+  },
+  '@media': {
+    '(prefers-reduced-motion: reduce)': {
+      vars: {
+        [animationDuration]: '0s !important',
       },
     },
   },
@@ -87,63 +111,101 @@ const modal = recipe({
     boxShadow: `${theme.shadows.overlay[0]}, ${theme.shadows.overlay[1]}`,
     padding: theme.space[3],
     position: 'relative',
-    transition: 'width 0.3s ease-in-out, transform 0.3s ease-in-out',
-    width: `${MODAL_WIDTH.medium}rem`,
+    transition: `
+      opacity ${animationDuration} ${ANIMATION_EASING_OPACITY},
+      width ${animationDurationTranslation} ${animationEasingTranslation},
+      transform ${animationDurationTranslation} ${animationEasingTranslation},
+      box-shadow ${animationDurationTranslation} ${animationEasingTranslation}
+    `,
+    width: modalWidth,
+    '@starting-style': {
+      opacity: 0,
+      transform: offscreenTranslation,
+    },
     selectors: {
-      [`&${drawerStyle.push}`]: {
-        borderLeft: `1px solid ${theme.colors.neutral.border}`,
-        boxShadow: 'none',
-        pointerEvents: 'auto',
+      '&:not([open])': {
+        opacity: 0,
+        display: 'block', // the default `display: none` breaks the transition on Firefox and Safari
+        transform: offscreenTranslation,
+      },
+      '&:not([open])[data-close-action=confirm]': {
+        transform: 'scale(1.03)',
       },
-      [`&${drawerStyle.drawer.large}, &${drawerStyle.drawer.small}, &${drawerStyle.drawer.medium}`]: {
+      [`&${drawerStyle.base}`]: {
         borderRadius: '0',
         marginRight: '0',
         padding: '0',
+        '@starting-style': {
+          opacity: 1,
+          transform: `translateX(calc(${modalWidth} * 0.9))`,
+          boxShadow: 'none',
+        },
+      },
+      [`&${drawerStyle.base}:not([open])`]: {
+        opacity: 1,
+        transform: `translateX(${modalWidth})`,
+        boxShadow: 'none',
+        borderLeft: `1px solid ${theme.colors.neutral.border}`,
+        vars: {
+          [animationEasingTranslation]: 'cubic-bezier(0.5, 0, 0.1, 1)',
+        },
+      },
+      [`&${drawerStyle.push}`]: {
+        borderLeft: `1px solid ${theme.colors.neutral.border}`,
+        boxShadow: 'none',
+        pointerEvents: 'auto',
       },
       [`&${drawerStyle.drawer.large}`]: {
-        width: `${SIZES.large}rem`,
+        vars: {
+          [modalWidth]: `min(100dvw, ${SIZES.large}rem)`,
+        },
       },
       [`&${drawerStyle.drawer.small}`]: {
-        width: `${SIZES.small}rem`,
+        vars: {
+          [modalWidth]: `min(100dvw, ${SIZES.small}rem)`,
+        },
       },
       [`&${drawerStyle.drawer.medium}`]: {
-        width: `${SIZES.medium}rem`,
+        vars: {
+          [modalWidth]: `min(100dvw, ${SIZES.medium}rem)`,
+        },
       },
       [`&${dialogStyle.xsmall}`]: {
-        width: '32.5rem',
+        vars: {
+          [modalWidth]: 'min(100dvw, 32.5rem)',
+        },
       },
     },
   },
-  compoundVariants: Object.keys(MODAL_WIDTH).map(size => ({
-    style: {
-      transform: `translate3d(0, ${topModal}, 0)`,
-      width: `calc(${MODAL_WIDTH[size as keyof typeof MODAL_WIDTH]}rem - ${positionModal}) !important`,
-    },
-    variants: { positivePosition: true, size },
-  })),
   defaultVariants: {
-    animation: false,
     image: false,
     placement: 'center',
     positivePosition: false,
     size: 'medium',
   },
   variants: {
-    animation: {
-      true: {
-        animation: `${slideFromBottom} 0.3s ease-in-out forwards`,
-      },
-    },
     image: {
       true: {
         padding: 0,
       },
     },
-    placement: Object.fromEntries(Object.entries(MODAL_PLACEMENT).map(([placement, value]) => [placement, value])),
+    placement: MODAL_PLACEMENT,
     positivePosition: {
-      true: {},
+      true: {
+        transformOrigin: 'top',
+        transform: `translateY(${nestedModalTop}) scale(${nestedModalScale})`,
+      },
     },
-    size: Object.fromEntries(Object.entries(MODAL_WIDTH).map(([size, width]) => [size, { width: `${width}rem` }])),
+    size: Object.fromEntries(
+      Object.entries(MODAL_WIDTH).map(([size, width]) => [
+        size,
+        {
+          vars: {
+            [modalWidth]: `min(${width}rem, 100dvw)`,
+          },
+        },
+      ]),
+    ),
   },
 })
 
@@ -152,7 +214,6 @@ export const modalStyle = {
   imageContainer,
   image,
   content,
-  backdropBase,
   backdrop,
   modal,
 }
diff --git a/packages/ui/src/compositions/Navigation/constants.ts b/packages/ui/src/compositions/Navigation/constants.ts
index 5b2aacd984..32bc80af8c 100644
--- a/packages/ui/src/compositions/Navigation/constants.ts
+++ b/packages/ui/src/compositions/Navigation/constants.ts
@@ -8,4 +8,4 @@ export const NAVIGATION_MAX_WIDTH = 320 // in px
  * collapse and expand animation duration of the whole nav in ms
  */
 export const ANIMATION_DURATION = 250
-export const ANIMATION_EASING = 'cubic-bezier(0.5, 0, 0.2, 1)'
+export const ANIMATION_EASING = 'cubic-bezier(0.5, 0, 0.1, 1)'