diff --git a/assets/bannerPrincipalMobile.png b/assets/bannerPrincipalMobile.png
new file mode 100644
index 0000000..5118021
Binary files /dev/null and b/assets/bannerPrincipalMobile.png differ
diff --git a/index.html b/index.html
index 7761e68..5e98920 100644
--- a/index.html
+++ b/index.html
@@ -12,13 +12,16 @@
 <body>
     <header>
         <a href="./">
-            <img src="assets/icons/Logo-M3.svg" alt="Logo-M3" class="logo-header">
+            <img src="assets/icons/Logo-M3.svg" alt="Logo-M3" class="logo-header" />
         </a>
     </header>
     <main>
-        <div class="banner-principal">
+        <div>
             <figure>
-                <img src="assets/bannerPrincipal.png" alt="Computador aberto com codigos de programação">
+                <img src="assets/bannerPrincipal.png" alt="Computador aberto com codigos de programação"
+                    class="banner-principal banner-principal-desktop" />
+                <img src="assets/bannerPrincipalMobile.png" alt="Computador aberto com codigos de programação"
+                    class="banner-principal banner-principal-mobile" />
             </figure>
         </div>
     </main>
diff --git a/style/style.css b/style/style.css
index 4764de7..db44a43 100644
--- a/style/style.css
+++ b/style/style.css
@@ -14,4 +14,21 @@ header {
 
 .logo-header {
     display: block;
+}
+
+.banner-principal {
+    width: 100%;
+}
+
+@media (max-width:414px) {
+    .banner-principal-desktop {
+        display: none;
+    }
+
+}
+
+@media (min-width:415px) {
+    .banner-principal-mobile {
+        display: none;
+    }
 }
\ No newline at end of file
