diff --git a/assets/css/main.css b/assets/css/main.css
index 0e5d82f..1c4f2bd 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -18,6 +18,14 @@
   display: flex;
 }
 
+/*-------------*\
+=  MAIN BANNER  =
+\*-------------*/
+.main-banner-image {
+  width: 100%;
+  height: auto;
+}
+
 /*CUBE CSS styles*/
 
 /*-------*\
@@ -25,4 +33,24 @@
 \*-------*/
 .bg-clr-black {
   background-color: var(--bg-clr-black);
+}
+
+@media only screen and (max-width: 1024px) {
+  .image-mobile {
+    display: flex;
+  }
+
+  .image-desktop {
+    display: none;
+  }
+}
+
+@media only screen and (min-width: 1025px) {
+  .image-mobile {
+    display: none;
+  }
+
+  .image-desktop {
+    display: flex;
+  }
 }
\ No newline at end of file
diff --git a/assets/images/main-banner-mobile.jpg b/assets/images/main-banner-mobile.jpg
new file mode 100644
index 0000000..553ceec
Binary files /dev/null and b/assets/images/main-banner-mobile.jpg differ
diff --git a/index.html b/index.html
index 1e773e5..aa42800 100644
--- a/index.html
+++ b/index.html
@@ -29,6 +29,18 @@
     </header>
 
     <!--=============== Main Banner ===============-->
+    <figure class="main-banner">
+      <img
+        class="main-banner-image image-desktop"
+        src="./assets/images/main-banner-desktop.jpg"
+        alt="Um desktop aberto em um software de ambiente de desenvolvimento"
+      />
+      <img
+        class="main-banner-image image-mobile"
+        src="./assets/images/main-banner-mobile.jpg"
+        alt="Um desktop aberto em um software de ambiente de desenvolvimento"
+      />
+    </figure>
 
     <!--=============== Information ===============-->