diff --git a/client/src/components/Image.tsx b/client/src/components/Image.tsx
index fa5b5cc..05ba963 100644
--- a/client/src/components/Image.tsx
+++ b/client/src/components/Image.tsx
@@ -1,20 +1,23 @@
 import { Component } from "solid-js";
 
 export type Image = {
-  image: String;
-  name: String;
-  width: String;
-  heigh: String;
-  is_scale: Boolean;
+  image: string;
+  name: string;
+  width: string;
+  heigh: string;
+  is_scale: boolean;
 };
 
 const Image: Component<Image> = (props) => {
+  const { image, name, width, heigh, is_scale } = props;
   return (
-    <div class="aspect-h-4 aspect-w-3 hidden overflow-hidden rounded-lg lg:block">
+    <div class="aspect-h-4 aspect-w-3 hidden overflow-hidden rounded-lg lg:block border mx-auto">
       <img
-        src="https://tailwindui.com/img/ecommerce-images/product-page-02-tertiary-product-shot-01.jpg"
-        alt="Two each of gray, white, and black shirts laying flat."
-        class="h-full w-full object-cover object-center hover:scale-125 duration-150"
+        src={image}
+        alt={name}
+        class={` mx-auto h-auto w-2/3 object-cover object-center ${
+          is_scale && " hover:scale-125 duration-150"
+        }`}
       />
     </div>
   );
diff --git a/client/src/pages/products/details.tsx b/client/src/pages/products/details.tsx
index f05754f..dc61b77 100644
--- a/client/src/pages/products/details.tsx
+++ b/client/src/pages/products/details.tsx
@@ -95,7 +95,7 @@ const ProductDetail: Component<{}> = (props) => {
 
           <div class="mx-auto mt-6 max-w-2xl sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-3 lg:gap-x-4 lg:px-8">
             <Image
-              image="https://tailwindui.com/img/ecommerce-images/product-page-02-tertiary-product-shot-01.jpg"
+              image="/products/product1.png"
               name="undefined"
               width="undefined"
               heigh="undefined"
@@ -103,14 +103,14 @@ const ProductDetail: Component<{}> = (props) => {
             />
             <div class="hidden lg:grid lg:grid-cols-1 lg:gap-y-4">
               <Image
-                image="https://tailwindui.com/img/ecommerce-images/product-page-02-tertiary-product-shot-01.jpg"
+                image="/products/product1.png"
                 name="undefined"
                 width="undefined"
                 heigh="undefined"
                 is_scale={true}
               />
               <Image
-                image="https://tailwindui.com/img/ecommerce-images/product-page-02-tertiary-product-shot-01.jpg"
+                image="/products/product1.png"
                 name="undefined"
                 width="undefined"
                 heigh="undefined"
@@ -118,7 +118,7 @@ const ProductDetail: Component<{}> = (props) => {
               />
             </div>
             <Image
-              image="https://tailwindui.com/img/ecommerce-images/product-page-02-tertiary-product-shot-01.jpg"
+              image="/products/product1.png"
               name="undefined"
               width="undefined"
               heigh="undefined"