diff --git a/assets/images/main-banner-desktop.png b/assets/images/main-banner-desktop.png
new file mode 100644
index 0000000..a2c9f47
Binary files /dev/null and b/assets/images/main-banner-desktop.png differ
diff --git a/assets/images/main-banner-mobile.png b/assets/images/main-banner-mobile.png
new file mode 100644
index 0000000..a0f7541
Binary files /dev/null and b/assets/images/main-banner-mobile.png differ
diff --git a/assets/styles/main.css b/assets/styles/main.css
index a211540..76e3e3c 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -14,3 +14,19 @@
 .header-logo{
 display:block;
 }
+
+.main-banner{
+width: 100%;
+}
+
+@media screen and (max-width: 414px) {
+  .main-banner-desktop {
+    display: none;
+  } 
+}
+
+@media screen and (min-width: 415px) {
+    .main-banner-mobile {
+      display: none;
+    } 
+  }
diff --git a/index.html b/index.html
index 58ece1e..6054bb6 100644
--- a/index.html
+++ b/index.html
@@ -16,5 +16,12 @@
                 <img class="header-logo" src="./assets/images/logoM3.png" alt="Logo M3" />  
             </a>
         </header>
+
+        <main>
+            <section>
+                <img class="main-banner main-banner-desktop" src="./assets/images/main-banner-desktop.png" alt="Banner Principal Desktop" />
+                <img class="main-banner main-banner-mobile" src="./assets/images/main-banner-mobile.png" alt="Banner Principal Mobile" />
+            </section>
+        </main>
     </body>
 </html>
\ No newline at end of file