diff --git a/assets/main-banner-desktop.png b/assets/main-banner-desktop.png
new file mode 100644
index 0000000..cab0a60
Binary files /dev/null and b/assets/main-banner-desktop.png differ
diff --git a/assets/main-banner-mobile.png b/assets/main-banner-mobile.png
new file mode 100644
index 0000000..5118021
Binary files /dev/null and b/assets/main-banner-mobile.png differ
diff --git a/css/style.css b/css/style.css
index 65eb0e5..306cf0f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -24,4 +24,21 @@ body{
 .main-banner-desktop{
     display: block;
     width: 100%;
-}
\ No newline at end of file
+}
+.main-banner-mobile{
+    display: block;
+    width: 100%;
+}
+
+@media screen and (max-width: 1024px){
+    .main-banner-desktop{
+        display: none;
+    }
+}
+
+@media screen and (min-width: 1025px){
+    .main-banner-mobile{
+        display: none;
+    }
+}
+
diff --git a/index.html b/index.html
index 21c5f04..a85328e 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,13 @@
         <img src="./assets/logoM3.svg" alt="" />
     </header>
 
-    
+    <div>
+        <img src="./assets/main-banner-desktop.png" alt="" class="main-banner-desktop">
+    </div>
+
+    <div>
+        <img src="./assets/main-banner-mobile.png" alt="" class="main-banner-mobile">
+    </div>
 
     
 </body>