diff --git a/src/pages/student-dashboard/StoryPage.tsx b/src/pages/student-dashboard/StoryPage.tsx
index da4079b..079f33b 100644
--- a/src/pages/student-dashboard/StoryPage.tsx
+++ b/src/pages/student-dashboard/StoryPage.tsx
@@ -355,7 +355,7 @@ function ImageWithLoading({ src, alt, className }: { src: string; alt: string; c
   const [error, setError] = useState(false);
 
   return (
-    <div className="relative aspect-video bg-gray-100">
+    <div className="relative bg-gray-100 aspect-[9/16] md:aspect-video">
       {isLoading && (
         <div className="absolute inset-0 flex items-center justify-center">
           <Loader2 className="w-8 h-8 text-purple-600 animate-spin" />