diff --git a/packages/design-system/lib/components/RateCard/Modal/index.tsx b/packages/design-system/lib/components/RateCard/Modal/index.tsx
index 25a1981c3..4b3a5edd3 100644
--- a/packages/design-system/lib/components/RateCard/Modal/index.tsx
+++ b/packages/design-system/lib/components/RateCard/Modal/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'framer-motion'
 import { type PropsWithChildren, useEffect, useState } from 'react'
 import {
   Dialog,
@@ -132,6 +132,8 @@ export default function Modal({
     }
   }, [isOpen])
 
+  const shouldRender = isOpen || animation !== AnimationStateEnum.unmounted
+
   if (!trigger) {
     return (
       <InnerModal
@@ -159,16 +161,20 @@ export default function Modal({
       }
     >
       {trigger}
-      <InnerModal
-        onAnimationComplete={onAnimationComplete}
-        animation={animation}
-        setAnimation={setAnimation}
-        title={title}
-        subtitle={subtitle}
-        withActions={withActions}
-      >
-        {children}
-      </InnerModal>
+      <AnimatePresence>
+        {shouldRender && (
+          <InnerModal
+            onAnimationComplete={onAnimationComplete}
+            animation={animation}
+            setAnimation={setAnimation}
+            title={title}
+            subtitle={subtitle}
+            withActions={withActions}
+          >
+            {children}
+          </InnerModal>
+        )}
+      </AnimatePresence>
     </DialogTrigger>
   )
 }