diff --git a/assets/images/main-banner-desktop.png b/assets/images/main-banner-desktop.png
new file mode 100644
index 0000000..5d94877
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..098a4dc
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 e5a68c3..4182e99 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -13,4 +13,20 @@
 
 .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;
+    }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index fa55443..81dde30 100644
--- a/index.html
+++ b/index.html
@@ -17,5 +17,12 @@
                 <img class="header-logo" src="./assets/images/m3-logo.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