diff --git a/assets/images/main-banner.png b/assets/images/main-banner-desktop.png
similarity index 100%
rename from assets/images/main-banner.png
rename to assets/images/main-banner-desktop.png
diff --git a/assets/images/main-banner-mobile.png b/assets/images/main-banner-mobile.png
new file mode 100644
index 0000000..098a4dc
Binary files /dev/null and b/assets/images/main-banner-mobile.png differ
diff --git a/index.html b/index.html
index 1ea1eef..d0014b7 100644
--- a/index.html
+++ b/index.html
@@ -28,8 +28,11 @@
 
     <main>
         <figure>
-            <img class="main-banner" src="./assets/images/main-banner.png"
+            <img class="main-banner main-banner-desktop" src="./assets/images/main-banner-desktop.png"
                 alt="Banner principal: Um notebook rodando um aplicativo de programação" />
+        
+            <img class="main-banner main-banner-mobile" src="./assets/images/main-banner-mobile.png"
+                alt="Banner principal: Um notebook rodando um aplicativo de programação">
         </figure>
     </main>
 </body>
diff --git a/styles/main.css b/styles/main.css
index 6763df7..8cc1ad9 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -4,6 +4,7 @@
     box-sizing: border-box;
 }
 
+
 .header-logo {
     width: 100%;
     display: block;
@@ -16,6 +17,18 @@
     background: #000;
 }
 
-.main-banner {
+.main-banner{
     width: 100%;
+}
+
+@media screen and (min-width: 821px) {
+    .main-banner-mobile {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 820px) {
+    .main-banner-desktop {
+        display: none;
+    }
 }
\ No newline at end of file