diff --git a/src/components/media/PopupModal.tsx b/src/components/media/PopupModal.tsx
index e6693370..b88e72fd 100644
--- a/src/components/media/PopupModal.tsx
+++ b/src/components/media/PopupModal.tsx
@@ -152,15 +152,19 @@ export function PopupModal({
 
   return (
     <div
-      className="fixed inset-0 bg-opacity-50 flex justify-center items-center z-50 transition-opacity duration-100 overflow-y-auto"
+      className="fixed inset-0 bg-opacity-50 flex justify-center items-center sm:items-start z-50 transition-opacity duration-100 top-10 sm:top-10"
       style={{ opacity: style.opacity, visibility: style.visibility }}
     >
       <div
         ref={modalRef}
-        className="rounded-xl p-3 m-4 sm:m-8 bg-modal-background flex justify-center items-center transition-opacity duration-100 max-w-full sm:max-w-xl w-full sm:w-auto"
-        style={{ opacity: style.opacity }}
+        className="rounded-xl bg-modal-background flex flex-col justify-center items-center transition-opacity duration-100 max-w-full sm:max-w-xl w-full sm:w-auto sm:h-auto overflow-y-auto p-4"
+        style={{
+          opacity: style.opacity,
+          maxHeight: "90vh",
+          height: "auto",
+        }}
       >
-        <div className="aspect-w-16 aspect-h-9 overflow-y-auto w-full sm:w-auto">
+        <div className="aspect-w-16 aspect-h-9 w-full sm:w-auto">
           <div className="rounded-xl">
             {data?.backdrop_path ? (
               <img
@@ -168,6 +172,9 @@ export function PopupModal({
                 alt={media.poster ? "" : "failed to fetch :("}
                 className="rounded-xl object-cover w-full h-full"
                 loading="lazy"
+                style={{
+                  maxHeight: "60vh",
+                }}
               />
             ) : (
               <Skeleton />