diff --git a/frontend/src/components/image/index.tsx b/frontend/src/components/image/index.tsx
index fd1bf35..8fceac2 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 flex justify-center">
+		<A href={`/image/${props.ID}`} class="w-full flex justify-center h-[300px]">
 			<img
-				class="w-full object-contain rounded-xl max-w-[700px] max-h-[400px]"
+				class="flex w-full object-contain rounded-xl"
 				src={`${base}/image/${props.ID}`}
 			/>
 		</A>
diff --git a/frontend/src/pages/search/index.tsx b/frontend/src/pages/search/index.tsx
index 9f7fcbe..eb3b909 100644
--- a/frontend/src/pages/search/index.tsx
+++ b/frontend/src/pages/search/index.tsx
@@ -3,6 +3,7 @@ import { Search } from "@kobalte/core/search";
 import { IconSearch } from "@tabler/icons-solidjs";
 import { useSearch } from "./search";
 import { JustTheImageWhatAreTheseNames } from "@network/index";
+import { ImageComponent } from "@components/image";
 
 export const SearchPage: Component = () => {
 	const fuse = useSearch();
@@ -37,7 +38,7 @@ export const SearchPage: Component = () => {
 				<Search.Content class="container relative w-full rounded-xl bg-white p-4 grid grid-cols-3 gap-4">
 					<Search.Arrow />
 					<For each={searchItems()}>
-						{(item) => <div>{item.Image.Description}</div>}
+						{(item) => <ImageComponent ID={item.ImageID} />}
 					</For>
 					<Search.NoResult>No result found</Search.NoResult>
 				</Search.Content>