diff --git a/assets/images/coin.png b/assets/images/coin.png
new file mode 100644
index 0000000..cfbd0f1
Binary files /dev/null and b/assets/images/coin.png differ
diff --git a/assets/images/notebook1.png b/assets/images/notebook1.png
new file mode 100644
index 0000000..834d573
Binary files /dev/null and b/assets/images/notebook1.png differ
diff --git a/assets/images/notebook2.png b/assets/images/notebook2.png
new file mode 100644
index 0000000..6561eb0
Binary files /dev/null and b/assets/images/notebook2.png differ
diff --git a/assets/images/notebook3.png b/assets/images/notebook3.png
new file mode 100644
index 0000000..8eba01f
Binary files /dev/null and b/assets/images/notebook3.png differ
diff --git a/assets/images/shop.png b/assets/images/shop.png
new file mode 100644
index 0000000..4b144a6
Binary files /dev/null and b/assets/images/shop.png differ
diff --git a/assets/images/shopping-bag.png b/assets/images/shopping-bag.png
new file mode 100644
index 0000000..55c9060
Binary files /dev/null and b/assets/images/shopping-bag.png differ
diff --git a/assets/styles/main.css b/assets/styles/main.css
index 898ce87..e0be09c 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -27,5 +27,62 @@ body{
 
 .top-infocard{
     display: flex;
-    
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    max-width: 100%;
+    padding-top: 4%;
+}
+
+.top-infocard-text{
+    width: 40.25%;
+    margin-bottom: 4.42%;
+}
+
+.top-infocard-subtitle{
+    font-weight: 400;
+    display: flex;
+    justify-content: center;
+    font-size: 32px;
+}
+
+.top-infocard-title{
+    display: flex;
+    justify-content: center;
+    margin-bottom: 3.66%;
+    font-weight: 500;
+    font-size: 48px;
+}
+
+.top-infocard-description{
+    font-size: 16px;
+    line-height: 24px;
+}
+
+.top-infocard-image{
+    width: 16.6%;
+}
+
+.top-cards{
+    display: flex;
+    justify-content: center;
+    align-self: center;
+    margin-top: 9.4%;
+    gap: 2%;
+}
+
+.top-card-images{
+    display: flex;
+    justify-content: center;
+    padding-bottom: 10%;
+}
+
+.top-card{
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.23);
+    width: 18.4%;
+    padding: 2%;
+}
+
+.top-card-description{
+    text-align: center;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 65aa1e9..58ed7dc 100644
--- a/index.html
+++ b/index.html
@@ -13,12 +13,16 @@
 <body>
     <header class="header">
         <a href="">
-            <img class="header-logo" src="./assets/images//LogoM3Academy.svg" alt="logo M3">
+            <figure>
+                <img class="header-logo" src="./assets/images//LogoM3Academy.svg" alt="logo M3">
+            </figure>
         </a>
     </header>
     <main>
         <section class="banner-desktop">
-            <img class="banner-desktop-img" src="./assets/images/top-banner.png" alt="Banner principal">
+            <figure>
+                <img class="banner-desktop-img" src="./assets/images/top-banner.png" alt="Banner principal">
+            </figure>
         </section>
 
         <section class="top-infocard">
@@ -27,8 +31,30 @@
                 <h1 class="top-infocard-title">DOLOR SIT AMET</h1>
                 <p class="top-infocard-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui. </p>
             </div>
-            <img class="top-infocard-image" src="./assets/images/Computadores.png" alt="Infocard">
+                <img class="top-infocard-image" src="./assets/images/Computadores.png" alt="Infocard">
         </section>
+
+        <section class="top-cards">
+            <div class="top-card">
+                <figure class="top-card-images">
+                    <img src="/assets/images/shop.png" alt="shop">
+                </figure>
+                <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+            </div>
+            <div class="top-card">
+                <figure class="top-card-images">
+                    <img src="/assets/images/shopping-bag.png" alt="bag">
+                </figure>
+                <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+            </div>
+            <div class="top-card">
+                <figure class="top-card-images">
+                    <img src="/assets/images/coin.png" alt="coin">
+                </figure>
+                <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+            </div>
+        </section>
+
     </main>
 </body>
 </html>
\ No newline at end of file
