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/style.css b/assets/styles/style.css
index 4783648..6cf5a5b 100644
--- a/assets/styles/style.css
+++ b/assets/styles/style.css
@@ -29,6 +29,17 @@ a {
     width: 98%;
 }
 
+/* MAIN BANNER */
+
+.main-banner {
+    display: block;
+    width: 100%;
+}
+
+.main-banner-mobile {
+    display: none;
+}
+
 /* MOBILE */
 
 @media (max-width: 1024px) {
@@ -38,4 +49,13 @@ a {
     
     .logo {
         width: 99%;
-    }
\ No newline at end of file
+    }
+
+    .main-banner-desktop {
+        display: none;
+    }
+
+    .main-banner-mobile  {
+        display: block;
+    }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index ebd316e..15b77bf 100644
--- a/index.html
+++ b/index.html
@@ -22,5 +22,17 @@
                 <img class="logo" src="./assets/images/logo-m3academy.svg" alt="Logo M3 Academy"/> 
             </a>   
         </header>
+
+        <main>
+            <div>
+                <figure>
+                    <img class="main-banner main-banner-desktop" src="./assets/images/main-banner-desktop.png" alt="Banner Principal Desktop"/>
+                </figure>
+
+                <figure>
+                    <img class="main-banner main-banner-mobile" src="./assets/images/main-banner-mobile.png" alt="Banner Principal Mobile"/>
+                </figure>
+            </div>
+        </main>
     </body>
 </html>   
\ No newline at end of file