diff --git a/packages/frontend/component/src/ui/modal/modal.tsx b/packages/frontend/component/src/ui/modal/modal.tsx
index e883c9e6c9..73bf6f1ea1 100644
--- a/packages/frontend/component/src/ui/modal/modal.tsx
+++ b/packages/frontend/component/src/ui/modal/modal.tsx
@@ -142,7 +142,9 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
       children,
       contentWrapperClassName,
       contentWrapperStyle,
-      animation = 'fadeScaleTop',
+      animation = environment.isBrowser && environment.isMobile
+        ? 'slideBottom'
+        : 'fadeScaleTop',
       ...otherProps
     } = props;
     const { className: closeButtonClassName, ...otherCloseButtonProps } =
diff --git a/packages/frontend/component/src/ui/modal/styles.css.ts b/packages/frontend/component/src/ui/modal/styles.css.ts
index 48e12c36b3..0add40f619 100644
--- a/packages/frontend/component/src/ui/modal/styles.css.ts
+++ b/packages/frontend/component/src/ui/modal/styles.css.ts
@@ -75,6 +75,13 @@ export const modalContentWrapper = style({
   alignItems: 'center',
   justifyContent: 'center',
   zIndex: cssVar('zIndexModal'),
+  '@media': {
+    'screen and (width <= 640px)': {
+      // todo: adjust animation
+      alignItems: 'flex-end',
+      paddingBottom: 32,
+    },
+  },
 
   selectors: {
     '&.anim-none': {