diff --git a/frontend/src/features/gallery/HoverableImage.scss b/frontend/src/features/gallery/HoverableImage.scss
index ea26d830a0..c084b3fe16 100644
--- a/frontend/src/features/gallery/HoverableImage.scss
+++ b/frontend/src/features/gallery/HoverableImage.scss
@@ -16,8 +16,9 @@
   }
 
   .hoverable-image-image {
-    width: 80px;
-    height: 80px;
+    width: 100%;
+    max-width: 100%;
+    max-height: 100%;
   }
 
   .hoverable-image-content {
diff --git a/frontend/src/features/gallery/HoverableImage.tsx b/frontend/src/features/gallery/HoverableImage.tsx
index 2a931d1f00..b102e81408 100644
--- a/frontend/src/features/gallery/HoverableImage.tsx
+++ b/frontend/src/features/gallery/HoverableImage.tsx
@@ -69,8 +69,6 @@ const HoverableImage = memo((props: HoverableImageProps) => {
       onMouseOut={handleMouseOut}
     >
       <Image
-        width={80}
-        height={80}
         objectFit="cover"
         rounded={'md'}
         src={url}