diff --git a/app/components/popup/modal.tsx b/app/components/popup/modal.tsx
index 2aec6a7..c072f5b 100644
--- a/app/components/popup/modal.tsx
+++ b/app/components/popup/modal.tsx
@@ -18,10 +18,14 @@ export default function PopupModal({
       open={isOpen}
       onClose={onClose}
       className="relative z-50"
+      transition
     >
-      <DialogBackdrop className="fixed inset-0 bg-black/30" />
+      <DialogBackdrop
+        className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
+        transition
+      />
       <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
-        <DialogPanel className="max-w-lg space-y-4 rounded-lg bg-white p-8 shadow-lg">
+        <DialogPanel className="max-w-lg space-y-4 rounded-lg bg-white p-8 shadow-lg duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0">
           <div className="relative">{children}</div>
         </DialogPanel>
       </div>