diff --git a/assets/images/imagePrincipal.png b/assets/images/imagePrincipal.png
new file mode 100644
index 0000000..a2c9f47
Binary files /dev/null and b/assets/images/imagePrincipal.png differ
diff --git a/assets/images/imagePrincipalMob.png b/assets/images/imagePrincipalMob.png
new file mode 100644
index 0000000..a0f7541
Binary files /dev/null and b/assets/images/imagePrincipalMob.png differ
diff --git a/assets/styles/style.css b/assets/styles/style.css
index f14d420..7e5d285 100644
--- a/assets/styles/style.css
+++ b/assets/styles/style.css
@@ -9,3 +9,17 @@
    background: black;
    padding: 28px 0;
 }
+.imagemPrincipal img{
+   max-width: 100%;
+}
+@media only screen and (max-width: 414px){
+       .bannerPrincipalDesktop{
+         display: none;
+       }
+}
+@media only screen and (min-width: 414px){
+   .bannerPrincipalMobile{
+     display: none;
+   }
+}
+
diff --git a/index.html b/index.html
index 45832d7..1266d5a 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,10 @@
             <img style="display: block;" src="./assets/images/Logo_M3.png" alt="Logo M3">
         </a>
     </header>
+    <div class="imagemPrincipal">
+        <img class="bannerPrincipalDesktop" src="assets/images/imagePrincipal.png" alt="image de um computador com o fundo de um escritorio">
+        <img class="bannerPrincipalMobile" src="assets/images/imagePrincipalMob.png" alt="image de um computador com o fundo de um escritorio">
+    </div>
 
 </body> 
 </html>
\ No newline at end of file