diff --git a/src/features/catalog/Catalog.module.css b/src/features/catalog/Catalog.module.css
index de2e490..9e9c1c6 100644
--- a/src/features/catalog/Catalog.module.css
+++ b/src/features/catalog/Catalog.module.css
@@ -44,7 +44,6 @@
   background: linear-gradient(135deg, rgba(247, 251, 255, 0.9), transparent 42%);
 }
 
-.card img,
 .categoryImg,
 .img {
   position: relative;
@@ -57,6 +56,33 @@
   object-fit: contain;
 }
 
+.productCard {
+  min-height: 0;
+  padding: 0;
+  justify-content: flex-start;
+}
+
+.productImageFrame {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  overflow: hidden;
+  aspect-ratio: 1 / 1;
+  background: #f5f7fa;
+}
+
+.productImage {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.28s ease;
+}
+
+.productCard:hover .productImage {
+  transform: scale(1.04);
+}
+
 .cardContent {
   position: relative;
   z-index: 1;
@@ -66,6 +92,12 @@
   justify-content: space-between;
 }
 
+.productCard .cardContent {
+  min-height: 86px;
+  padding: 16px 18px 18px;
+  align-items: center;
+}
+
 .name,
 .categoryName {
   position: relative;
@@ -290,13 +322,22 @@ button:disabled {
     padding: 18px;
   }
 
-  .card img,
   .categoryImg,
   .img {
     height: 128px;
     max-width: 150px;
   }
 
+  .productCard {
+    min-height: 0;
+    padding: 0;
+  }
+
+  .productCard .cardContent {
+    min-height: 76px;
+    padding: 14px 16px 16px;
+  }
+
   .name,
   .categoryName {
     font-size: 14px;
diff --git a/src/features/catalog/ProductCard.tsx b/src/features/catalog/ProductCard.tsx
index 46c2a69..1ec4939 100644
--- a/src/features/catalog/ProductCard.tsx
+++ b/src/features/catalog/ProductCard.tsx
@@ -18,11 +18,12 @@ const ProductCard: React.FC<Props> = ({ product }) => {
 
   return (
     <div 
-      className={styles.card}
+      className={`${styles.card} ${styles.productCard}`}
       onClick={() => onSelect(product.id)}
     >
-      
-      <img src={product.images[0]} alt={product.name} />
+      <div className={styles.productImageFrame}>
+        <img className={styles.productImage} src={product.images[0]} alt={product.name} />
+      </div>
       <div className={styles.cardContent}>
       <p className={styles.name}>{product.name}</p>
       <button className={styles.plus}>+</button>
@@ -31,4 +32,4 @@ const ProductCard: React.FC<Props> = ({ product }) => {
   );
 };
 
-export default ProductCard;
\ No newline at end of file
+export default ProductCard;