diff --git a/src/components/ProductCard.module.css b/src/components/ProductCard.module.css
index 3b73999..061faaf 100644
--- a/src/components/ProductCard.module.css
+++ b/src/components/ProductCard.module.css
@@ -31,3 +31,16 @@
   background: #b7ada3;
   cursor: not-allowed;
 }
+
+.image {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+  border-radius: 3px;
+  margin-bottom: var(--space-sm);
+  transition: transform 0.3s ease;
+}
+
+.card:hover .image {
+  transform: scale(1.05);
+}
diff --git a/src/components/ProductCard.test.tsx b/src/components/ProductCard.test.tsx
index b976639..d4ee6af 100644
--- a/src/components/ProductCard.test.tsx
+++ b/src/components/ProductCard.test.tsx
@@ -15,6 +15,7 @@ describe('ProductCard', () => {
     render(<ProductCard product={product} onInquire={onInquire} />)
     expect(screen.getByText('Silk Edge Control')).toBeInTheDocument()
     expect(screen.getByText('$12')).toBeInTheDocument()
+    expect(screen.getByRole('img', { name: 'Silk Edge Control' })).toHaveAttribute('src', '/x.jpg')
     await userEvent.click(screen.getByRole('button', { name: /ask about this/i }))
     expect(onInquire).toHaveBeenCalledWith(product)
   })
diff --git a/src/components/ProductCard.tsx b/src/components/ProductCard.tsx
index a1c058f..6c71444 100644
--- a/src/components/ProductCard.tsx
+++ b/src/components/ProductCard.tsx
@@ -9,6 +9,7 @@ interface ProductCardProps {
 function ProductCard({ product, onInquire }: ProductCardProps) {
   return (
     <div className={styles.card}>
+      <img src={product.image} alt={product.name} className={styles.image} />
       <h3>{product.name}</h3>
       <p>${product.price}</p>
       <p>{product.description}</p>