diff --git a/assets/images/middle-banner-desktop.png b/assets/images/middle-banner-desktop.png
new file mode 100644
index 0000000..c81c20a
Binary files /dev/null and b/assets/images/middle-banner-desktop.png differ
diff --git a/assets/images/middle-banner-mobile.png b/assets/images/middle-banner-mobile.png
new file mode 100644
index 0000000..d84198b
Binary files /dev/null and b/assets/images/middle-banner-mobile.png differ
diff --git a/assets/styles/main.css b/assets/styles/main.css
index 61330ec..bf5f086 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -20,8 +20,9 @@ body {
     display: block; 
 }
 
-.main-banner {
+.main-banner, .middle-banner {
     width: 100%;
+    display: block;
 }
 
 .top-infocard {
@@ -87,7 +88,8 @@ body {
 
 @media screen and (max-width: 414px) { /*esse pixel pq é o tamanho maximo da imagem banner mobile*/
 
-    .main-banner-desktop{
+    .main-banner-desktop,
+    .middle-banner-desktop{
         display: none;
     }    
 }
@@ -139,7 +141,8 @@ body {
 
 @media screen and (min-width: 415px) { /*esse pixel pq é o tamanho maximo da imagem banner mobile*/
 
-    .main-banner-mobile{
+    .main-banner-mobile,
+    .middle-banner-mobile{
         display: none;
     }    
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 0f52bf4..271a666 100644
--- a/index.html
+++ b/index.html
@@ -61,6 +61,11 @@
                     <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
                 </div>
             </div>
+
+            <div>  
+                <img class="middle-banner middle-banner-desktop" src="/assets/images/middle-banner-desktop.png" alt="Banner do meio desktop" />
+                <img class="middle-banner middle-banner-mobile" src="/assets/images/middle-banner-mobile.png" alt="Banner do meio mobile" />
+            </div>
         </main>
     </body>
 </html>
\ No newline at end of file