diff --git a/frontend/src/components/image/index.tsx b/frontend/src/components/image/index.tsx
index 1a76706..0eea15f 100644
--- a/frontend/src/components/image/index.tsx
+++ b/frontend/src/components/image/index.tsx
@@ -4,9 +4,9 @@ import { A } from "@solidjs/router";
 
 export const ImageComponent: Component<{ ID: string }> = (props) => {
 	return (
-		<A href={`/image/${props.ID}`} class="w-full h-full max-h-[400px]">
+		<A href={`/image/${props.ID}`} class="w-full h-full">
 			<img
-				class="w-full object-contain rounded-xl max-h-full"
+				class="w-full object-contain rounded-xl max-h-[400px]"
 				src={`${base}/image/${props.ID}`}
 			/>
 		</A>
diff --git a/frontend/src/pages/image/index.tsx b/frontend/src/pages/image/index.tsx
index a50640b..25ad4ce 100644
--- a/frontend/src/pages/image/index.tsx
+++ b/frontend/src/pages/image/index.tsx
@@ -1,3 +1,4 @@
+import { ImageComponent } from "@components/image";
 import { SearchCard } from "@components/search-card/SearchCard";
 import { useSearchImageContext } from "@contexts/SearchImageContext";
 import { base, UserImage } from "@network/index";
@@ -14,7 +15,7 @@ export const ImagePage: Component = () => {
 
 	return (
 		<main class="flex flex-col items-center">
-			<img class="h-1/2" alt="users" src={`${base}/image/${imageId}`} />
+			<ImageComponent ID={imageId} />
 			<div class="w-3/4 grid grid-cols-9 gap-2 grid-flow-row-dense py-4">
 				<Show when={imageProperties()}>
 					{(image) => (