diff --git a/assets/imgs/main-banner-desktop.png b/assets/imgs/main-banner-desktop.png
new file mode 100644
index 0000000..5d94877
Binary files /dev/null and b/assets/imgs/main-banner-desktop.png differ
diff --git a/assets/imgs/main-banner-mobile.png b/assets/imgs/main-banner-mobile.png
new file mode 100644
index 0000000..098a4dc
Binary files /dev/null and b/assets/imgs/main-banner-mobile.png differ
diff --git a/index.html b/index.html
index 5ff5f2e..c7db8fe 100644
--- a/index.html
+++ b/index.html
@@ -19,6 +19,11 @@
                 <img src="./assets/svgs/m3-logo.svg" alt="Logo da M3">
             </a>
         </header>
+
+        <div>
+            <img class="main-banner" id="main-banner-desktop" src="./assets/imgs/main-banner-desktop.png" alt="Banner Principal Desktop">
+            <img class="main-banner" id="main-banner-mobile" src="./assets/imgs/main-banner-mobile.png" alt="Banner Principal Mobile">
+        </div>
     </body>
 
 </html>
\ No newline at end of file
diff --git a/styles/main.css b/styles/main.css
index 1985105..1c2b36a 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -13,4 +13,20 @@ img{
     justify-content: center;
     background: #000000;
     padding: 29px 0;
+}
+
+.main-banner{
+    width: 100%;
+}
+
+@media screen and (max-width: 1024px){
+    #main-banner-desktop{
+        display: none;
+    }
+}
+
+@media screen and (min-width: 1025px){
+    #main-banner-mobile{
+        display: none;
+    }
 }
\ No newline at end of file