diff --git a/deepfence_frontend/packages/tailwind-preset/src/preset.ts b/deepfence_frontend/packages/tailwind-preset/src/preset.ts
index 4058071214..f3d17e9fd9 100644
--- a/deepfence_frontend/packages/tailwind-preset/src/preset.ts
+++ b/deepfence_frontend/packages/tailwind-preset/src/preset.ts
@@ -785,16 +785,20 @@ const preset = {
           '0%': { left: '0' },
         },
         'opacity-in': {
-          '0%': { opacity: '0' },
-          '100%': { opacity: '1' },
+          from: { opacity: '0' },
+          to: { opacity: '1' },
         },
         'opacity-out': {
-          '0%': { opacity: '1' },
-          '100%': { opacity: '0' },
+          from: { opacity: '1' },
+          to: { opacity: '0' },
         },
         'modal-slide-in': {
-          '0%': { opacity: '1', transform: 'translateY(-24px)' },
-          '100%': { opacity: '1', transform: 'translateY(0)' },
+          from: { opacity: '0', transform: 'translateY(-24px)' },
+          to: { opacity: '1', transform: 'translateY(0)' },
+        },
+        'modal-slide-out': {
+          from: { opacity: '1', transform: 'translateY(0)' },
+          to: { opacity: '0', transform: 'translateY(-24px)' },
         },
         'pop-in': {
           '0%': { opacity: '0', transform: 'scale(.96)' },
@@ -834,13 +838,14 @@ const preset = {
         // modal
         'pop-in': 'pop-in 250ms ease',
         'pop-out': 'pop-out 250ms ease',
-        'slide-right-in': 'slide-right-in 250ms forwards cubic-bezier(0.16, 1, 0.3, 1)',
-        'slide-right-out': 'slide-right-out 250ms forwards cubic-bezier(0.16, 1, 0.3, 1)',
-        'slide-left-in': 'slide-left-in 250ms forwards cubic-bezier(0.16, 1, 0.3, 1)',
-        'slide-left-out': 'slide-left-out 250ms forwards cubic-bezier(0.16, 1, 0.3, 1)',
-        'opacity-out': 'opacity-out 250ms cubic-bezier(0.16, 1, 0.3, 1)',
-        'opacity-in': 'opacity-in 250ms cubic-bezier(0.16, 1, 0.3, 1)',
+        'slide-right-in': 'slide-right-in 300ms forwards cubic-bezier(0.16, 1, 0.3, 1)',
+        'slide-right-out': 'slide-right-out 300ms forwards cubic-bezier(0.16, 1, 0.3, 1)',
+        'slide-left-in': 'slide-left-in 300ms forwards cubic-bezier(0.16, 1, 0.3, 1)',
+        'slide-left-out': 'slide-left-out 300ms forwards cubic-bezier(0.16, 1, 0.3, 1)',
+        'opacity-out': 'opacity-out 300ms cubic-bezier(0.5, 1, 0.5, 1)',
+        'opacity-in': 'opacity-in 300ms cubic-bezier(0.5, 1, 0.5, 1)',
         'modal-slide-in': 'modal-slide-in 300ms cubic-bezier(0.5, 1, 0.5, 1)',
+        'modal-slide-out': 'modal-slide-out 300ms cubic-bezier(0.5, 1, 0.5, 1)',
         'accordion-open': 'accordion-slide-down 100ms cubic-bezier(0.16, 1, 0.3, 1)',
         'accordion-closed': 'accordion-slide-up 100ms cubic-bezier(0.16, 1, 0.3, 1)',
       },
diff --git a/deepfence_frontend/packages/ui-components/src/components/modal/Modal.tsx b/deepfence_frontend/packages/ui-components/src/components/modal/Modal.tsx
index 2852e7bc4c..91833c3df6 100644
--- a/deepfence_frontend/packages/ui-components/src/components/modal/Modal.tsx
+++ b/deepfence_frontend/packages/ui-components/src/components/modal/Modal.tsx
@@ -101,6 +101,8 @@ const contentCva = cva(
       'text-p1 text-text-text-and-icon',
       // padding
       'px-5',
+      'data-[state=closed]:animate-modal-slide-out',
+      'data-[state=open]:animate-modal-slide-in',
     ),
   ],
   {
@@ -112,10 +114,6 @@ const contentCva = cva(
         xl: 'w-[720px]',
         xxl: 'w-[800px]',
       },
-      open: {
-        true: 'animate-modal-slide-in',
-        // false: 'animate-pop-out',
-      },
     },
     defaultVariants: {
       size: 'm',
@@ -145,12 +143,13 @@ export const Modal: FC<ModalProps> = ({
         <DialogPrimitive.Overlay
           className={cn(
             'fixed inset-0 bg-black/50 dark:bg-bg-left-nav/80 flex justify-center items-center',
+            'data-[state=closed]:animate-opacity-out',
+            'data-[state=open]:animate-opacity-in',
           )}
         >
           <DialogPrimitive.Content
             className={contentCva({
               size,
-              open: wasOpen,
             })}
             onCloseAutoFocus={() => elementToFocusOnCloseRef?.current?.focus()}
           >