diff --git a/assets/images/banner-principal-mobile.png b/assets/images/banner-principal-mobile.png
new file mode 100644
index 0000000..5118021
Binary files /dev/null and b/assets/images/banner-principal-mobile.png differ
diff --git a/assets/images/banner-princpal-desktop.png b/assets/images/banner-princpal-desktop.png
new file mode 100644
index 0000000..4414756
Binary files /dev/null and b/assets/images/banner-princpal-desktop.png differ
diff --git a/assets/styles/css/main.css b/assets/styles/css/main.css
index 9871fd2..bc9ff5e 100644
--- a/assets/styles/css/main.css
+++ b/assets/styles/css/main.css
@@ -3,12 +3,24 @@
     justify-content:center;
     align-items:center;
     padding:29px 0;
-    
+
     background:#000
 }
 
 .header__logo {
     width: 16%;
+    display: block;
+}
+
+.banner__img {
+    width: 100%;
+    display: block;
+}
+
+@media screen and  (min-width: 415px) {
+    .banner__img__mobile {
+        display: none;
+    }
 }
 
 @media screen and (max-width: 414px) {
@@ -16,4 +28,7 @@
     .header__logo {
         width: 54%;
     }
+    .banner__img__desktop {
+        display: none;
+    }
 }
diff --git a/index.html b/index.html
index d997296..be510bc 100644
--- a/index.html
+++ b/index.html
@@ -13,5 +13,15 @@
     <header class="header">
         <img class="header__logo" src="./assets/images/logo-m3.svg" alt="Logo M3 Academy">
     </header>
+
+    <main>
+        
+        <section class="banner">
+            <img class="banner__img banner__img__desktop" src="/assets/images/banner-princpal-desktop.png" alt="Banner Principal do Site" />
+            <img class="banner__img banner__img__mobile" src="/assets/images/banner-principal-mobile.png" alt="Banner Principal do Site" />
+        </section>
+
+    </main>
+
 </body>
 </html>
\ No newline at end of file