diff --git a/Assets/Images/Banner-midle-mobile.png b/Assets/Images/Banner-midle-mobile.png
new file mode 100644
index 0000000..e7b1c0b
Binary files /dev/null and b/Assets/Images/Banner-midle-mobile.png differ
diff --git a/Styles/index.css b/Styles/index.css
index 4b15227..e0b8508 100644
--- a/Styles/index.css
+++ b/Styles/index.css
@@ -25,6 +25,7 @@ body{
     display: none;
 }
 
+
 .text-infocard{
     display: flex;
     flex-direction: column;
@@ -32,14 +33,12 @@ body{
     align-items: center;
     text-align: center;
 }
-
 .infocard-subtitle{
     font-weight: 400;
     font-size: 32px;
     line-height: 39px;
     text-transform: uppercase;
 }
-
 .infocard-title{
     font-weight: 500;
     font-size: 48px;
@@ -47,27 +46,25 @@ body{
     margin-bottom: 20px;
     text-transform: uppercase;
 }
-
 .infocard-description{
     font-weight: 400;
     font-size: 16px;
     line-height: 24px;
     width: 38%;
 }
-
 .infocard-image{
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
+
 .top-cards{
     display: flex;
     justify-content: center;
     padding: 178px 150px 80px;
     gap: 26px;
 }
-
 .top-card{
     display: flex;
     flex-direction: column;
@@ -80,34 +77,31 @@ body{
     box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
 }
 
-.card-icon{
-    width: 100%;
-    height: 100%;
-    max-width: 103px;
-    max-height: 104px;
-}
-
-.banner-midle-back{
-    background: #E0E0E0;
-    padding: 0 72px;
-    
-}
 
 .banners-midle{
     display: flex;
-    gap: 39px;
+    padding: 0 72px;
+    gap: 4.3%;
+    justify-content: center;   
+    background: #E0E0E0;
 }
-
 .banners-midle img{
     position: relative;
-    top: 62px;
-    
+    top: 35px;
+    gap: 20px;
 }
-
 .banner-midle{
     display: flex;
-    gap: 39px;
+    gap: 3.4%;
 }
+.banner-midle img{
+    max-width: 50%;
+}
+.banner-midle-third{
+    gap: 39px;
+    width: 32%;
+}
+
 
 .bottom-cards{
     display: flex;
@@ -115,7 +109,6 @@ body{
     padding: 178px 30px 108px;
     gap: 16px;
 }
-
 .bottom-card{
     display: flex;
     flex-direction: column;
@@ -128,12 +121,12 @@ body{
     box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
 }
 
+
 .bottom-infocard{
     display: flex;
     flex-direction: column;
     align-items: center;
 }
-
 .text-bottom-infocard {
     display: flex;
     flex-direction: column;
@@ -142,19 +135,18 @@ body{
     width: 80%;
     padding: 0 0 50px;
 }
-
 .bottom-infocard-title{
     font-weight: 600;
     font-size: 32px;
     line-height: 39px;
 }
-
 .bottom-infocard img{
     justify-content: center;
     width: 70%;
     padding: 0 0 116px;
 }
 
+
 .page-footer{
     display: flex;
     flex-direction: column;
@@ -164,7 +156,6 @@ body{
     gap: 16px;
     background-color: #000000;
 }
-
 .page-footer p{
     font-weight: 400;
     font-size: 10px;
@@ -175,6 +166,7 @@ body{
     color: #BDBDBD;
 }
 
+
 @media screen and (max-width: 414px){
     .banner-principal-desktop,
     .infocard-image-desktop{
@@ -184,6 +176,8 @@ body{
     .infocard-image-mobile{
         display: unset;
     }
+
+    
     .text-bottom-infocard{
         width: 100%;
     }
@@ -193,6 +187,11 @@ body{
     .bottom-infocard img{
         width: 100%;
     }
+
+
+    .page-footer p{
+        width: 100%;
+    }
 }
 
 @media screen and (max-width: 768px){
@@ -208,11 +207,40 @@ body{
         width: 100%;
         padding: 0 40px;
     }
+
+
     .top-cards{
         flex-direction: column;
         align-items: center;
         padding: 90px 32px 80px;
     }
+
+
+    .banners-midle{
+        display: flex;
+        flex-direction: column;
+        padding: 0 23px;
+        gap: 24px;
+    }
+    .banners-midle img{
+        position: relative;
+        top: 32px;
+    }
+    .banner-midle{
+        display: flex;
+        flex-direction: row-reverse;
+        gap: 14px;
+        justify-content: center;
+    }
+    .banner-midle img{
+        width: 48%;
+    }
+    .banner-midle-third{
+        gap: 24px;
+        width: 100%;
+    }
+
+
     .bottom-cards{
         flex-direction: column;
         align-items: center;
@@ -221,21 +249,25 @@ body{
     .bottom-card{
         max-width: 350px;
     }
+
+
     .bottom-infocard{
         flex-direction: column-reverse;
     }
+    .bottom-infocard img{
+        padding: unset;
+    }
     .text-bottom-infocard{
         padding: 50px 0 87px;
     }
+
+
     .banner-bottom-desktop{
         display: none;
     }
     .banner-bottom-mobile{
         display: unset;
     }
-    .bottom-infocard img{
-        padding: unset;
-    }
 }
 
 @media screen and (min-width: 2000px){
@@ -250,6 +282,8 @@ body{
     .card-description{
         font-size: 25px;
     }
+
+
     .top-infocard{
         display: flex;
         flex-direction: column;
@@ -260,6 +294,8 @@ body{
         max-width: 400px;
         align-items: unset;
     }
+
+
     .top-cards{
         padding: 200px 250px 80px;
     }
@@ -269,12 +305,63 @@ body{
         padding: 40px;
         gap: 40px;
     }
+
+
     .bottom-cards{
         padding: 178px 72px 80px;
     }
     .bottom-card{
         padding: 40px;
         gap: 40px;
-        
+    }
+
+
+    .banner-midle{
+        gap: 50px;
+    }
+    .banners-midle{
+        gap: 50px;
+    }
+    .banners-midle img{
+        max-width: 566px;
+    }
+
+
+    .page-footer p{
+        font-size: 15px;
     }
 }
+
+@media screen and (min-width: 3000px){
+    .infocard-subtitle,
+    .bottom-infocard-title{
+        font-size: 55px;
+    }
+    .infocard-title{
+        font-size: 67px;
+    }
+    .infocard-description,
+    .card-description{
+        font-size: 36px;
+    }
+    .infocard-description,
+    .infocard-subtitle{
+        line-height: 50px;
+    }
+
+
+    .top-card{
+        max-width: 20%;
+        height: 500px;
+        padding: 60px;
+        gap: 90px;
+    }
+
+    
+    .bottom-card{
+        max-width: 100%;
+        height: 580px;
+        padding: 60px;
+        gap: 50px;
+    }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index adf1e68..6925352 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,7 @@
 
 </head>
 <body>
+    
     <header class="page-header">
 
         <a href="/">
@@ -32,6 +33,7 @@
         </div>
 
         <section class="top-infocard">
+
             <div class="text-infocard">
                 <h2 class="infocard-subtitle"> Lorem ipsum </h2>
                 <h1 class="infocard-title"> dolor sit amet </h1>
@@ -43,14 +45,16 @@
             </div>
             
             <div class="infocard-image"> 
-                <img  class="infocard-image-desktop" src="./Assets/SVG/Computer-image-desktop.svg" alt="infocard image desktop">
-                <img  class="infocard-image-mobile" src="./Assets/SVG/Computer-image-mobile.svg" alt="infocard image mobile">
+                <img  class="infocard-image-desktop" src="./Assets/SVG/Computer-image-desktop.svg" alt="infocard image desktop"/>
+                <img  class="infocard-image-mobile" src="./Assets/SVG/Computer-image-mobile.svg" alt="infocard image mobile"/>
             </div>
+
         </section>
         
         <div class="top-cards">
+
             <div class="top-card">
-                <img class="card-icon" src="./Assets/SVG/Store-icon.svg" alt="Store icon"/>
+                <img src="./Assets/SVG/Store-icon.svg" alt="Store icon"/>
 
                 <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                     Cras euismod enim non dui fringilla interdum. 
@@ -58,7 +62,7 @@
             </div>
 
             <div class="top-card">
-                <img class="card-icon" src="./Assets/SVG/shopping-bag.svg" alt="Shopping-bag icon"/>
+                <img src="./Assets/SVG/shopping-bag.svg" alt="Shopping-bag icon"/>
 
                 <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                     Cras euismod enim non dui fringilla interdum. 
@@ -66,7 +70,7 @@
             </div>
 
             <div class="top-card">
-                <img class="card-icon" src="./Assets/SVG/Coin-icon.svg" alt="Coin icon"/>
+                <img src="./Assets/SVG/Coin-icon.svg" alt="Coin icon"/>
 
                 <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                     Cras euismod enim non dui fringilla interdum. 
@@ -75,20 +79,20 @@
 
         </div>
 
-        <!--<div class="banner-midle-back">
-            <div class="banners-midle">
+        <div class="banners-midle">
+
                 <div class="banner-midle">
                     <img src="./Assets/Images/Banner-midle-first.png" alt="Banner midle first">
                     <img src="./Assets/Images/Banner-midle-second.png" alt="Banner midle second">
                 </div>
-                <img  src="./Assets/Images/Banner-midle-third.png" alt="Banner-midle-third">
-            </div>
 
-        </div>-->
+                <img class="banner-midle-third"  src="./Assets/Images/Banner-midle-third.png" alt="Banner-midle-third">
+        </div>
 
         <div class="bottom-cards">
+
             <div class="bottom-card">
-                <img src="./Assets/SVG/Money-icon.svg" alt="Money icon">
+                <img src="./Assets/SVG/Money-icon.svg" alt="Money icon"/>
 
                 <p class="card-description">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
@@ -97,7 +101,7 @@
             </div>
 
             <div class="bottom-card">
-                <img src="./Assets/SVG/Coin-icon.svg" alt="Coin icon">
+                <img src="./Assets/SVG/Coin-icon.svg" alt="Coin icon"/>
 
                 <p class="card-description">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
@@ -106,7 +110,7 @@
             </div>
 
             <div class="bottom-card">
-                <img src="./Assets/SVG/Laptop-icon.svg" alt="Laptop icon">
+                <img src="./Assets/SVG/Laptop-icon.svg" alt="Laptop icon"/>
 
                 <p class="card-description">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
@@ -115,20 +119,23 @@
             </div>
 
             <div class="bottom-card">
-                <img src="./Assets/SVG/Cellphone-icon.svg" alt="Cellphone icon">
+                <img src="./Assets/SVG/Cellphone-icon.svg" alt="Cellphone icon"/>
 
                 <p class="card-description">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                     Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
                 </p>
             </div>
+
         </div>
 
         <section class="bottom-infocard">
+
             <div class="text-bottom-infocard">
                 <h2 class="bottom-infocard-title">
                     Lorem ipsum dolor sit amet
                 </h2>
+
                 <p class="infocard-description">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. 
                     Quisque  a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
@@ -138,28 +145,33 @@
 
             <img class="banner-bottom-desktop" src="./Assets/Images/Bannner-bottom-desktop.png" alt="Bannner bottom desktop"/>
             <img class="banner-bottom-mobile" src="./Assets/Images/Banner-bottom-mobile.png" alt="Banner bottom mobile"/>
+
         </section>
 
     </main>
 
     <footer class="page-footer">
+
         <div>
-            <a href="http://">
-                <img src="./Assets/SVG/Instagram-logo.svg" alt="Instagram logo">
+            <a href="https://www.instagram.com/m3.ecommerce/">
+                <img src="./Assets/SVG/Instagram-logo.svg" alt="Instagram logo"/>
             </a>
     
-            <a href="http://">
-                <img src="./Assets/SVG/Facebook-logo.svg" alt="Facebook logo">
+            <a href="https://pt-br.facebook.com/digitalm3/">
+                <img src="./Assets/SVG/Facebook-logo.svg" alt="Facebook logo"/>
             </a>
     
-            <a href="http://">
-                <img src="./Assets/SVG/Youtube-logo.svg" alt="Youtube logo">
+            <a href="https://www.youtube.com/channel/UCW4o86gZG_ceA8CmHltXeXA">
+                <img src="./Assets/SVG/Youtube-logo.svg" alt="Youtube logo"/>
             </a>
         </div>
 
         <p>
-            Copyright © 2020 - Loja  Comércio Eletrônico CNPJ: 000.000.000/0001-00
+            Copyright © 2020 - Loja  Comércio Eletrônico 
+            CNPJ: 000.000.000/0001-00
         </p>
+
     </footer>
+
 </body>
 </html>
\ No newline at end of file