diff --git a/assets/images/main-banner-desktop.png b/assets/images/main-banner-desktop.png
new file mode 100644
index 0000000..67dc789
Binary files /dev/null and b/assets/images/main-banner-desktop.png differ
diff --git a/assets/images/main-banner-mobile.png b/assets/images/main-banner-mobile.png
new file mode 100644
index 0000000..2da3a66
Binary files /dev/null and b/assets/images/main-banner-mobile.png differ
diff --git a/index.html b/index.html
index 514ee25..71ab357 100644
--- a/index.html
+++ b/index.html
@@ -11,11 +11,24 @@
 </head>
 
 <body>
+    <!-- Header -->
     <header class="page-header">
         <a href="/">
             <img class="header-logo" src="./assets/svgs/logo-m3.svg" alt="logo da M3" />
         </a>
     </header>
+
+    <main>
+        <!-- banner -->
+        <div>
+            <figure>
+                <!-- banner desktop -->
+                <img class="main-banner main-banner-desktop" src="/assets/images/main-banner-desktop.png" alt="imagem de um computador">
+                <!-- banner mobile -->
+                <img class="main-banner main-banner-mobile" src="/assets/images/main-banner-mobile.png" alt="imagem de um computador">
+            </figure>
+        </div>
+    </main>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/styles/main.css b/styles/main.css
index 1a12390..9bd7a0d 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -14,4 +14,27 @@
 
 .header-logo {
     display: block;
+}
+
+/*Banner*/
+.main-banner {
+    width: 100%;
+}
+
+.main-banner-desktop {
+    display: block;
+}
+
+.main-banner-mobile {
+    display: none;
+}
+
+@media screen and (max-width: 414px) {
+    .main-banner-desktop {
+        display: none;
+    }
+
+    .main-banner-mobile {
+        display: block;
+    }
 }
\ No newline at end of file
