diff --git a/my-app/src/assets/svgs/Search.svg b/my-app/src/assets/svgs/Search.svg
new file mode 100644
index 0000000..9f9b9f0
--- /dev/null
+++ b/my-app/src/assets/svgs/Search.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.2094 11.6186C14.0951 10.409 14.6249 8.92328 14.6249 7.31261C14.6249 3.28064 11.3444 0.00012207 7.31245 0.00012207C3.28048 0.00012207 0 3.28064 0 7.31261C0 11.3446 3.28052 14.6251 7.31248 14.6251C8.92315 14.6251 10.409 14.0952 11.6186 13.2094L16.4092 18L18 16.4092C18 16.4092 13.2094 11.6186 13.2094 11.6186ZM7.31248 12.3751C4.52086 12.3751 2.25001 10.1042 2.25001 7.31261C2.25001 4.52098 4.52086 2.25013 7.31248 2.25013C10.1041 2.25013 12.375 4.52098 12.375 7.31261C12.375 10.1042 10.1041 12.3751 7.31248 12.3751Z" fill="#303030"/>
+</svg>
diff --git a/my-app/src/components/Header/Header.modules.scss b/my-app/src/components/Header/Header.modules.scss
index fb905d0..65bef17 100644
--- a/my-app/src/components/Header/Header.modules.scss
+++ b/my-app/src/components/Header/Header.modules.scss
@@ -20,9 +20,11 @@
     height: 32px;
     display: flex;
     align-items: center;
-    padding-left: 16px;
+    justify-content: space-between;
+    padding: 7px 16px;
 }
 .SearchInput{
+    width: 100%;
     border: none;
     color: #C6C6C6;
     font-family: 'Roboto';
@@ -31,14 +33,22 @@
     font-size: 14px;
     line-height: 16px;
     &:focus{
-        border: none;
+        color: #000;
+        outline: none;
     }
 }
+.LoginAndCart{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
 .loginlink{
     text-decoration: none;
     color: #FFFFFF;
     margin-right: 55px;
+    width: 100%;
 }
 .carticon{
-    align-items: center;
+    width: 100%;
 }
\ No newline at end of file
diff --git a/my-app/src/components/Header/Header.tsx b/my-app/src/components/Header/Header.tsx
index 51590c9..843181e 100644
--- a/my-app/src/components/Header/Header.tsx
+++ b/my-app/src/components/Header/Header.tsx
@@ -1,19 +1,21 @@
 // import { NavLink } from "react-router-dom"
 import Logo from "../../assets/svgs/Logo.svg";
 import Cart from "../../assets/svgs/Cart.svg"
+import Search from "../../assets/svgs/Search.svg"
 
 import './Header.modules.scss'
 
 const Header = () => {
   return (
     <section className="Header">
-      <div>
+      <div className="logo">
           <a href="/"><img src={Logo} alt="LogoM3" className="academylogo"/></a>
       </div>
       <div className="SearchBar">
         <input className="SearchInput" placeholder="Buscar..." />
+        <a href="/" className="searchLink"><img src={Search} alt="SearchButton" className="searchImg"/></a>
       </div>
-      <div>
+      <div className="LoginAndCart">
         <a href="/" className="loginlink">ENTRAR</a>
         <span>
         <a href="/"><img src={Cart} alt="CartIcon" /></a>
diff --git a/my-app/src/components/HeaderBottom/HeaderBottom.modules.scss b/my-app/src/components/HeaderBottom/HeaderBottom.modules.scss
new file mode 100644
index 0000000..b5f6ebc
--- /dev/null
+++ b/my-app/src/components/HeaderBottom/HeaderBottom.modules.scss
@@ -0,0 +1,17 @@
+.headerBottom{
+    background-color: #000;
+    display: flex;
+}
+.headerUl{
+    display: flex;
+    flex-direction: row;
+    gap: 55px;
+}
+.headerItem{
+    color: #fff;
+    list-style-type: none;
+}
+.headerA{
+    color: #fff;
+    text-decoration: none;
+}
\ No newline at end of file
diff --git a/my-app/src/components/HeaderBottom/HeaderBottom.tsx b/my-app/src/components/HeaderBottom/HeaderBottom.tsx
new file mode 100644
index 0000000..2bd7975
--- /dev/null
+++ b/my-app/src/components/HeaderBottom/HeaderBottom.tsx
@@ -0,0 +1,17 @@
+import './HeaderBottom.modules.scss'
+
+const HeaderBottom = () => {
+    return (
+      <section className="headerBottom">
+        <div>
+            <ul className='headerUl'>
+                <li className='headerItem'><a href="/" className='headerA'>CURSOS</a></li>
+                <li className='headerItem'><a href="/" className='headerA'>SAIBA MAIS</a></li>
+                <li className='headerItem'><a href="/" className='headerA'>INSTITUCIONAIS</a></li>
+            </ul>
+        </div>
+      </section>
+    )
+  }
+
+  export {HeaderBottom}
\ No newline at end of file
diff --git a/my-app/src/pages/Home.tsx b/my-app/src/pages/Home.tsx
index 60ca414..63c8e64 100644
--- a/my-app/src/pages/Home.tsx
+++ b/my-app/src/pages/Home.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
 import {Header} from "../components/Header/Header"
+import{HeaderBottom} from "../components/HeaderBottom/HeaderBottom"
 
 function App() {
   return (
     <div className="App">
       <Header />
+      <HeaderBottom />
     </div>
   );
 }