diff --git a/_assets/css/main.css b/_assets/css/main.css
index 63bcba1..b64dee1 100644
--- a/_assets/css/main.css
+++ b/_assets/css/main.css
@@ -17,3 +17,18 @@
     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/_assets/img/notebook1.jpg b/_assets/img/main-banner-desktop.jpg
similarity index 100%
rename from _assets/img/notebook1.jpg
rename to _assets/img/main-banner-desktop.jpg
diff --git a/_assets/img/main-banner-mobile.jpg b/_assets/img/main-banner-mobile.jpg
new file mode 100644
index 0000000..88d6b90
Binary files /dev/null and b/_assets/img/main-banner-mobile.jpg differ
diff --git a/index.html b/index.html
index 20cc1ad..9f92b5a 100644
--- a/index.html
+++ b/index.html
@@ -16,5 +16,12 @@
                 <img class="header-logo" src="./_assets/img/logo_m3.svg" alt="Logo M3" />
             </a>            
         </header>
+
+        <main>
+            <section>
+                <img class="main-banner main-banner-desktop" src="./_assets/img/main-banner-desktop.jpg" alt="Banner principal Desktop" />
+                <img class="main-banner main-banner-mobile" src="./_assets/img/main-banner-mobile.jpg" alt="Banner principal Mobile" />
+            </section>
+        </main>
     </body>
 </html>