diff --git a/frontend/public/global.css b/frontend/public/global.css
index 37936ee..344c663 100644
--- a/frontend/public/global.css
+++ b/frontend/public/global.css
@@ -190,12 +190,23 @@ body {
 @media screen and (max-width: 768px) {
 	.modal {
 		width: 100%;
-		height: 100%;
-		border-radius: 0px;
+		border-radius: var(--radius-xl);
+		border-bottom-left-radius: 0;
+		border-bottom-right-radius: 0;
 	}
 	.modal-backdrop {
+		align-items: flex-end;
+		justify-content: center;
+		backdrop-filter: unset;
+	}
+	.modal-backdrop-opaque {
 		display: block;
 	}
+	.modal-backdrop-opaque .modal {
+		width: 100%;
+		height: 100%;
+		border-radius: 0;
+	}
 }
 
 /* input */
diff --git a/frontend/src/animations.js b/frontend/src/animations.js
index c7356bd..1fb8a06 100644
--- a/frontend/src/animations.js
+++ b/frontend/src/animations.js
@@ -1,12 +1,16 @@
 import { fade, fly, scale } from "svelte/transition";
 import { cubicInOut } from "svelte/easing";
 import { getItem } from "./storage";
+import { smallViewport } from "./stores";
 
 export function maybeModalFade(node) {
     return maybeFade(node, { duration: 175, easing: cubicInOut });
 }
 
 export function maybeModalScale(node) {
+    if (smallViewport.value) {
+        return maybeFly(node, { duration: 175, easing: cubicInOut, y: 20 })
+    }
     return maybeScale(node, { duration: 175, easing: cubicInOut, start: 0.93 });
 }