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/images/main-banner.png b/assets/images/main-banner.png
new file mode 100644
index 0000000..5d94877
Binary files /dev/null and b/assets/images/main-banner.png differ
diff --git a/assets/styles/style.css b/assets/styles/style.css
index 339e6fe..d6b69e8 100644
--- a/assets/styles/style.css
+++ b/assets/styles/style.css
@@ -15,7 +15,37 @@
     
 
 }
+
 .header-logo{
     display: block;
 
+}
+
+.main-banner-desktop{
+   width: 100%;      
+
+
+}
+@media screen and (max-width: 414px) {
+   .main-banner-desktop{
+    display: none;
+   
+    
+
+
+   }
+
+   .main-banner-mobile{
+    width: 100%;
+
+
+   }
+
+}
+
+
+@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 d6c842a..89b2c1a 100644
--- a/index.html
+++ b/index.html
@@ -12,8 +12,15 @@
         <a href="/">
             <img class="header-logo" src="assets/images/m3-logo.png" alt="m3 logo"/>
         </a>
-       
     </header>
+    <main>
+        <div>
+            <img class="main-banner-desktop" src="assets/images/main-banner.png" alt="main-banner">
+            <img class="main-banner-mobile" src="assets/images/main-banner-mobile.png" alt="main-banner-mobile">
+        </div>
+
+        
+    </main>
    
 </body>
 </html>
\ No newline at end of file