diff --git a/assets/images/top-infocard-image.png b/assets/images/top-infocard-image.png
new file mode 100644
index 0000000..3f60ac9
Binary files /dev/null and b/assets/images/top-infocard-image.png differ
diff --git a/assets/styles/main.css b/assets/styles/main.css
index 76e3e3c..d610887 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -1,32 +1,98 @@
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Inter', sans-serif;
+  color: #000000;
 }
 
 .page-header {
-    display: flex;
-    justify-content:center ;
-    padding: 28px 0;
-    background: #000000;
-}  
-
-.header-logo{
-display:block;
+  display: flex;
+  justify-content: center;
+  padding: 28px 0;
+  background: #000000;
 }
 
-.main-banner{
-width: 100%;
+.header-logo {
+  display: block;
+}
+
+.main-banner {
+  width: 100%;
+}
+
+.top-infocard {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 0 96px;
+}
+
+.top-infocard-text {
+  max-width: 766px;
+  margin-right: 124px;
+}
+
+.top-inforcard-subtitle {
+  font-weight: 400;
+  font-size: 32px;
+  text-transform: uppercase;
+}
+
+.top-infocard-title {
+  margin-bottom: 24px;
+  font-weight: 500;
+  font-size: 48px;
+  text-transform: uppercase;
+}
+
+.top-infocard-description {
+  font-size: 16px;
+  line-height: 24px;
 }
 
 @media screen and (max-width: 414px) {
   .main-banner-desktop {
     display: none;
-  } 
+  }
 }
 
 @media screen and (min-width: 415px) {
-    .main-banner-mobile {
-      display: none;
-    } 
+  .main-banner-mobile {
+    display: none;
   }
+}
+
+@media screen and (max-width: 992px) {
+  .top-infocard {
+    flex-direction: column;
+    padding: 84px 26px 158px;
+  }
+
+  .top-infocard-text {
+    margin: 0 0 68px;
+
+  }
+
+  .top-inforcard-subtitle {
+    font-size: 20px;
+  }
+
+  .top-inforcard-title {
+    margin-bottom: 20px;
+    font-size: 28px;
+}
+
+.top-infocard-image {
+  width: 100%;
+  max-width: 240px;
+}
+
+@media screen and (min-width: 993px) and (max-width: 1280px)  {
+    .top-infocard-text {
+     max-width: 520px;
+     margin-right: 70px; 
+}
diff --git a/index.html b/index.html
index 6054bb6..7ad9f7a 100644
--- a/index.html
+++ b/index.html
@@ -1,27 +1,52 @@
 <!DOCTYPE html>
 
 <html lang="pt-br">
-    <head>
-        <meta charset="UTF-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-        <title>M3 Landing Page</title>   
-         <link rel="stylesheet" href="./assets/styles/main.css" />
-    </head>
+<head>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 
-    <body>
-        <header class="page-header">
-            <a href="/">
-                <img class="header-logo" src="./assets/images/logoM3.png" alt="Logo M3" />  
-            </a>
-        </header>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>M3 Landing Page</title>
+
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" href="./assets/styles/main.css" />
+</head>
+
+<body>
+    <header class="page-header">
+        <a href="/">
+            <img class="header-logo" src="./assets/images/logoM3.png" alt="Logo M3" />
+        </a>
+    </header>
+
+    <main>
+        <section>
+            <img class="main-banner main-banner-desktop" src="./assets/images/main-banner-desktop.png"
+                alt="Banner Principal Desktop" />
+            <img class="main-banner main-banner-mobile" src="./assets/images/main-banner-mobile.png"
+                alt="Banner Principal Mobile" />
+        </section>
+
+        <section class="top-infocard">
+            <div class="top-infocard-text">
+                <h2 class="top-inforcard-subtitle">Lorem ipsum</h2>
+                <h1 class="top-infocard-title">Dolor sit amet</h1>
+
+                <p class="top-infocard-description">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
+                    interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna
+                    dui.
+                </p>
+            </div>
+
+            <img class="top-infocard-image" src="./assets/images/top-infocard-image.png" alt="Banner de Infocard do Topo" />
+        </section>
+    </main>
+</body>
 
-        <main>
-            <section>
-                <img class="main-banner main-banner-desktop" src="./assets/images/main-banner-desktop.png" alt="Banner Principal Desktop" />
-                <img class="main-banner main-banner-mobile" src="./assets/images/main-banner-mobile.png" alt="Banner Principal Mobile" />
-            </section>
-        </main>
-    </body>
 </html>
\ No newline at end of file
