diff --git a/assets/img/Rectangle 13 desktop.png b/assets/img/Rectangle 13 desktop.png
new file mode 100644
index 0000000..c81c20a
Binary files /dev/null and b/assets/img/Rectangle 13 desktop.png differ
diff --git a/assets/img/Rectangle 13 mobile.png b/assets/img/Rectangle 13 mobile.png
new file mode 100644
index 0000000..d84198b
Binary files /dev/null and b/assets/img/Rectangle 13 mobile.png differ
diff --git a/css/layout/main.css b/css/layout/main.css
index c40b70b..de9e04b 100644
--- a/css/layout/main.css
+++ b/css/layout/main.css
@@ -60,6 +60,13 @@
     margin: 27px 0;
 }
 
+.banner-desktop, .banner-mobile {
+    width: 100%;
+    height: auto;
+    position: relative;
+
+}
+
 @media screen and (max-width: 415px) {
     .main_banner_desktop {
         display: none;
@@ -101,10 +108,18 @@
         justify-content: space-around;
 
     }
+
+    .banner-desktop {
+        display: none;
+    }
 }
 
 @media screen and (min-width: 415px) {
     .main_banner_mobile {
         display: none;
     }
+
+    .banner-mobile {
+        display: none;
+    }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 09bd791..8d59ae6 100644
--- a/index.html
+++ b/index.html
@@ -56,5 +56,9 @@
         </div>
         
     </section>
+    <section class="banner-container">
+        <img src="./assets/img/Rectangle 13 desktop.png" alt="banner desktop" class="banner-desktop">
+        <img src="./assets/img/Rectangle 13 mobile.png" alt="banner mobile" class="banner-mobile">
+    </section>
 </body>
 </html>
\ No newline at end of file