diff --git a/src/index.html b/src/index.html
index 636689d72f..11c4681e74 100644
--- a/src/index.html
+++ b/src/index.html
@@ -45,7 +45,7 @@
             <li><a href="#">smartphones</a></li>
             <li>
               <a
-                data-qa="hover"
+                data-qa="nav-hover"
                 href="#"
               >
                 laptops & computers
@@ -59,11 +59,8 @@
         </nav>
       </header>
     </div>
-    <div>
-      <div
-        class="card"
-        data-qa="card"
-      >
+    <main class="conteiner">
+      <div class="card">
         <div class="card__img">
           <a
             href="#"
@@ -109,13 +106,351 @@ <h1 class="card__header">
           <p class="card__price-tag">$2,199</p>
         </div>
 
-        <button
-          class="card__button"
-          data-qa="hover"
-        >
-          buy
-        </button>
+        <button class="card__button">buy</button>
       </div>
-    </div>
+
+      <div class="card">
+        <div class="card__img">
+          <a
+            href="#"
+            class="card__img-img"
+          ></a>
+        </div>
+
+        <h1 class="card__header">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h1>
+
+        <p class="card__product-code">Product code: 195434</p>
+
+        <div class="card__response">
+          <div class="card__response-starsLine stars">
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+          </div>
+
+          <p class="card__response-reviews">Reviews: 5</p>
+        </div>
+
+        <div class="card__price">
+          <p class="card__price-price">Price:</p>
+          <p class="card__price-tag">$2,199</p>
+        </div>
+
+        <button class="card__button">buy</button>
+      </div>
+
+      <div class="card">
+        <div class="card__img">
+          <a
+            href="#"
+            class="card__img-img"
+          ></a>
+        </div>
+
+        <h1 class="card__header">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h1>
+
+        <p class="card__product-code">Product code: 195434</p>
+
+        <div class="card__response">
+          <div class="card__response-starsLine stars">
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+          </div>
+
+          <p class="card__response-reviews">Reviews: 5</p>
+        </div>
+
+        <div class="card__price">
+          <p class="card__price-price">Price:</p>
+          <p class="card__price-tag">$2,199</p>
+        </div>
+
+        <button class="card__button">buy</button>
+      </div>
+
+      <div class="card">
+        <div class="card__img">
+          <a
+            href="#"
+            class="card__img-img"
+          ></a>
+        </div>
+
+        <h1 class="card__header">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h1>
+
+        <p class="card__product-code">Product code: 195434</p>
+
+        <div class="card__response">
+          <div class="card__response-starsLine stars">
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+          </div>
+
+          <p class="card__response-reviews">Reviews: 5</p>
+        </div>
+
+        <div class="card__price">
+          <p class="card__price-price">Price:</p>
+          <p class="card__price-tag">$2,199</p>
+        </div>
+
+        <button class="card__button">buy</button>
+      </div>
+
+      <div class="card">
+        <div class="card__img">
+          <a
+            href="#"
+            class="card__img-img"
+          ></a>
+        </div>
+
+        <h1 class="card__header">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h1>
+
+        <p class="card__product-code">Product code: 195434</p>
+
+        <div class="card__response">
+          <div class="card__response-starsLine stars">
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+          </div>
+
+          <p class="card__response-reviews">Reviews: 5</p>
+        </div>
+
+        <div class="card__price">
+          <p class="card__price-price">Price:</p>
+          <p class="card__price-tag">$2,199</p>
+        </div>
+
+        <button class="card__button">buy</button>
+      </div>
+
+      <div class="card">
+        <div class="card__img">
+          <a
+            href="#"
+            class="card__img-img"
+          ></a>
+        </div>
+
+        <h1 class="card__header">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h1>
+
+        <p class="card__product-code">Product code: 195434</p>
+
+        <div class="card__response">
+          <div class="card__response-starsLine stars">
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+          </div>
+
+          <p class="card__response-reviews">Reviews: 5</p>
+        </div>
+
+        <div class="card__price">
+          <p class="card__price-price">Price:</p>
+          <p class="card__price-tag">$2,199</p>
+        </div>
+
+        <button class="card__button">buy</button>
+      </div>
+
+      <div class="card">
+        <div class="card__img">
+          <a
+            href="#"
+            class="card__img-img"
+          ></a>
+        </div>
+
+        <h1 class="card__header">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h1>
+
+        <p class="card__product-code">Product code: 195434</p>
+
+        <div class="card__response">
+          <div class="card__response-starsLine stars">
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+          </div>
+
+          <p class="card__response-reviews">Reviews: 5</p>
+        </div>
+
+        <div class="card__price">
+          <p class="card__price-price">Price:</p>
+          <p class="card__price-tag">$2,199</p>
+        </div>
+
+        <button class="card__button">buy</button>
+      </div>
+
+      <div class="card">
+        <div class="card__img">
+          <a
+            href="#"
+            class="card__img-img"
+          ></a>
+        </div>
+
+        <h1 class="card__header">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h1>
+
+        <p class="card__product-code">Product code: 195434</p>
+
+        <div class="card__response">
+          <div class="card__response-starsLine stars">
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+          </div>
+
+          <p class="card__response-reviews">Reviews: 5</p>
+        </div>
+
+        <div class="card__price">
+          <p class="card__price-price">Price:</p>
+          <p class="card__price-tag">$2,199</p>
+        </div>
+
+        <button class="card__button">buy</button>
+      </div>
+    </main>
   </body>
 </html>
diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss
index 80e262366d..e0cf1e4b9d 100644
--- a/src/styles/blocks/card.scss
+++ b/src/styles/blocks/card.scss
@@ -5,6 +5,13 @@ body {
   font-style: normal;
 }
 
+.conteiner {
+  display: grid;
+  grid-template-columns: repeat(4, 200px);
+  gap: 46px 48px;
+  padding: 40px 50px;
+}
+
 .card {
   box-sizing: border-box;
   width: 200px;
@@ -14,6 +21,8 @@ body {
   flex-direction: column;
   padding: $card-padding;
 
+  transition-duration: 300ms;
+
   &__img {
     padding: 0 3px;
     &-img {
@@ -102,3 +111,16 @@ body {
     color: $main-button-color;
   }
 }
+
+.card:hover {
+  transform: scale(120%);
+}
+
+.card:hover .card__header {
+  color: #34568b;
+}
+
+.card__button:hover {
+  background-color: #fff;
+  color: #00acdc;
+}
diff --git a/src/styles/blocks/moyo-header.scss b/src/styles/blocks/header.scss
similarity index 97%
rename from src/styles/blocks/moyo-header.scss
rename to src/styles/blocks/header.scss
index 49a4ccc6b7..72e459c325 100644
--- a/src/styles/blocks/moyo-header.scss
+++ b/src/styles/blocks/header.scss
@@ -25,7 +25,7 @@ body {
   }
   a {
     text-decoration: none;
-    color: black;
+    color: #060b35;
   }
 
   ul {
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 5ab91c4db2..d588565280 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,9 +1,4 @@
-body {
-  margin: 0;
-}
-
 @import 'blocks/variables';
-@import 'blocks/moyo-header';
+@import 'blocks/header';
 @import 'blocks/card';
 @import 'blocks/stars';
-