diff --git a/assets/Image/mid-banner-desktop.png b/assets/Image/mid-banner-desktop.png
new file mode 100644
index 0000000..e03a0ba
Binary files /dev/null and b/assets/Image/mid-banner-desktop.png differ
diff --git a/assets/Image/middle-banner-mobile.png b/assets/Image/middle-banner-mobile.png
new file mode 100644
index 0000000..588ea2b
Binary files /dev/null and b/assets/Image/middle-banner-mobile.png differ
diff --git a/assets/css/main.css b/assets/css/main.css
index b9f79e0..a3f68ee 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -18,7 +18,8 @@ body{
     display: block;
 
 }
-.main-banner{
+.main-banner, .mid-banner{
+    display: block;
     width: 100%;
 }
 .top-infocard  {
@@ -76,7 +77,7 @@ body{
     max-width: 300px;
 }
 @media screen and (max-width: 414px) {
-    .main-banner-desktop{
+    .main-banner-desktop, .mid-banner-desktop{
         display: none;
     } 
 }
@@ -87,7 +88,7 @@ body{
     }
 }
 @media screen and (min-width: 415px) {
-    .main-banner-mobile{
+    .main-banner-mobile, .mid-banner-desktop{
         display: none;
     }
 }
diff --git a/index.html b/index.html
index 56d2278..fe9e9f5 100644
--- a/index.html
+++ b/index.html
@@ -45,6 +45,10 @@
                             <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p class="top-card-description">
                         </div>
                 </section>
+                <section>
+                    <img class="mid-banner mid-banner-desktop" src="/assets/Image/mid-banner-desktop.png" alt="Banner Principal desktop"/>
+                    <img class="mid-banner mid-banner-mobile""  src="/assets/Image/middle-banner-mobile.png" alt="Banner Principal mobile"/>
+                </section>
         </main>
         <footer></footer>
     </body>