diff --git a/assets/images/middle-banner-desktop.png b/assets/images/middle-banner-desktop.png
new file mode 100644
index 0000000..127cff9
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..1cb8c22
Binary files /dev/null and b/assets/images/middle-banner-mobile.png differ
diff --git a/index.html b/index.html
index 074bcff..0bb68ae 100644
--- a/index.html
+++ b/index.html
@@ -70,6 +70,18 @@
 
             </figure>
         </div>
+
+        <div>
+            <figure>
+                <!-- banner desktop -->
+                <img class="middle-banner middle-banner-desktop" src="/assets/images/middle-banner-desktop.png"
+                    alt="imagem de um computador" />
+                <!-- banner mobile -->
+                <img class="middle-banner middle-banner-mobile" src="/assets/images/middle-banner-mobile.png"
+                    alt="imagem de um computador" />
+            </figure>
+        </div>
+        
     </main>
 </body>
 
diff --git a/styles/main.css b/styles/main.css
index 54e6226..c92d583 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -21,16 +21,16 @@ body {
     display: block;
 }
 
-/*Banner*/
-.main-banner {
+/*Banners*/
+.main-banner, .middle-banner {
     width: 100%;
 }
 
-.main-banner-desktop {
+.main-banner-desktop, .middle-banner-desktop {
     display: block;
 }
 
-.main-banner-mobile {
+.main-banner-mobile, .middle-banner-mobile {
     display: none;
 }
 
@@ -158,12 +158,12 @@ body {
 
 @media screen and (max-width: 414px) {
 
-    /*banner*/
-    .main-banner-desktop {
+    /*banners*/
+    .main-banner-desktop, .middle-banner-desktop {
         display: none;
     }
 
-    .main-banner-mobile {
+    .main-banner-mobile, .middle-banner-mobile {
         display: block;
     }