diff --git a/ui/src/components/Modal.tsx b/ui/src/components/Modal.tsx
index 7133b71..f4c8aa0 100644
--- a/ui/src/components/Modal.tsx
+++ b/ui/src/components/Modal.tsx
@@ -28,7 +28,7 @@ export default function Modal(props: ModalProps) {
           onClick={() => props.onClose()}
         />
         <div
-          class={`relative w-full ${props.maxWidth ?? "max-w-lg"} bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 shadow-2xl animate-scale-in overflow-hidden`}
+          class={`relative w-full ${props.maxWidth ?? "max-w-lg"} bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 shadow-2xl animate-pop-in overflow-hidden`}
         >
           {props.children}
         </div>
diff --git a/ui/src/index.css b/ui/src/index.css
index fb2cfc7..9c9ef1c 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -49,22 +49,22 @@
   }
 }
 
-@keyframes scale-in {
+@keyframes pop-in {
   from {
     opacity: 0;
-    transform: scale(0.95);
+    transform: translateY(8px);
   }
   to {
     opacity: 1;
-    transform: scale(1);
+    transform: translateY(0);
   }
 }
 
 .animate-fade-in {
   animation: fade-in 0.15s ease-out;
 }
-.animate-scale-in {
-  animation: scale-in 0.15s ease-out;
+.animate-pop-in {
+  animation: pop-in 0.15s ease-out;
 }
 
 .btn-destructive {