diff --git a/assets/image/main-banner-desktop.png b/assets/image/main-banner-desktop.png
new file mode 100644
index 0000000..cab0a60
Binary files /dev/null and b/assets/image/main-banner-desktop.png differ
diff --git a/assets/image/main-banner-mobile.png b/assets/image/main-banner-mobile.png
new file mode 100644
index 0000000..5118021
Binary files /dev/null and b/assets/image/main-banner-mobile.png differ
diff --git a/assets/styles/style.css b/assets/styles/style.css
index f2c7863..ea5f487 100644
--- a/assets/styles/style.css
+++ b/assets/styles/style.css
@@ -13,4 +13,24 @@
 
 .header-logo {
     display: block;
+}
+
+.main-banner-desktop {
+    width: 100%;
+}
+
+.main-banner-mobile {
+    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 ab6e01a..207a465 100644
--- a/index.html
+++ b/index.html
@@ -16,5 +16,12 @@
             <img  class="header-logo" src="./assets/image/Logo-M3Academy 1.png" alt="Logo M3" />
         </a>
     </header>
+
+    <main>
+        <section>
+            <img class="main-banner-desktop" src="./assets/image/main-banner-desktop.png" alt="Banner Principal">
+            <img class="main-banner-mobile" src="./assets/image/main-banner-mobile.png" alt="Banner Principal">
+        </section>
+    </main>
 </body>
 </html>
\ No newline at end of file