diff --git a/assets/styles.css/main.css b/assets/styles.css/main.css
index 9444846..7a15279 100644
--- a/assets/styles.css/main.css
+++ b/assets/styles.css/main.css
@@ -1,10 +1,33 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
 .page-header {
     display: flex;
     justify-content: center;
     background: #000000;
-    padding: 28px 0;
+    padding: 29px 0;
 }
 
 .header-logo {
     display: block;
 }
+
+.main-banner {
+    width: 100%;
+    display: block;
+}
+
+@media screen and (max-width: 414px) {
+    .main-banner-desktop {
+        display: none;
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .main-banner-mobile {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index a4c2060..044668c 100644
--- a/index.html
+++ b/index.html
@@ -17,7 +17,12 @@
                 <img class="header-logo" src="./assets/images/Logo-M3Academy 1.png" alt="Logo M3-Academy" />
             </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>