diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
index 8548d89..70ac755 100644
--- a/src/components/Header/Header.scss
+++ b/src/components/Header/Header.scss
@@ -2,11 +2,19 @@ header {
   width: 100%;
   background-color: black;
 
+  .menu-open {
+    display: block;
+  }
+
+  .menu-closed {
+    display: none;
+  }
+
   .header-top {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 25px 100px;
+    padding: 22px 100px;
     border-bottom: 1px solid #c4c4c4;
     figure {
       margin: 0;
@@ -16,23 +24,47 @@ header {
       width: 100%;
       height: 100%;
     }
+
+    .hamburguer {
+      display: none;
+    }
+
     .logo {
       height: 26px;
       width: 136px;
     }
 
     .search-bar {
-      height: 32px;
       width: 264px;
       display: flex;
       align-items: center;
 
+      input::-webkit-input-placeholder,
+      textarea::-webkit-input-placeholder {
+        color: #c4c4c4;
+      }
+
       .search-bar-input {
         width: 100%;
         background: #ffffff;
         border: 2px solid #f0f0f0;
         border-radius: 5px;
-        padding: 12px 16px;
+        padding: 10px 16px;
+        border: 2px solid #f0f0f0;
+
+        background-image: url(./assets/lupa.svg);
+        background-position: center right 16px;
+        background-repeat: no-repeat;
+        background-size: 18px;
+        font-family: "Roboto";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 16px;
+
+        /* primary-500 */
+
+        color: #c6c6c6;
       }
     }
 
@@ -79,3 +111,166 @@ header {
     }
   }
 }
+// Telas > 2500
+@media (min-width: 2500px) {
+  header {
+    .header-top {
+      padding: 25px 100px;
+
+      .logo {
+        height: 50px;
+        width: 265px;
+      }
+
+      .search-bar {
+        width: 515px;
+        display: flex;
+        align-items: center;
+
+        input::-webkit-input-placeholder,
+        textarea::-webkit-input-placeholder {
+          color: #c4c4c4;
+        }
+
+        .search-bar-input {
+          width: 100%;
+          background: #ffffff;
+          border: 2px solid #f0f0f0;
+          border-radius: 5px;
+          padding: 10px 16px;
+          border: 0;
+
+          background-image: url(./assets/lupa.svg);
+          background-position: center right 16px;
+          background-repeat: no-repeat;
+          background-size: 36px;
+          font-size: 28px;
+          line-height: 33px;
+          color: #c4c4c4;
+        }
+      }
+
+      .access {
+        .entrar {
+          font-size: 28px;
+          line-height: 33px;
+        }
+
+        .shopping-cart {
+          height: 55px;
+          width: 55px;
+        }
+      }
+    }
+
+    .header-bottom {
+      display: flex;
+      align-items: center;
+      padding: 14px 100px;
+      gap: 55px;
+
+      font-size: 28px;
+      line-height: 33px;
+    }
+  }
+}
+
+// Tablet  < 720
+@media screen and (max-width: 1024px) {
+  header {
+    .header-top {
+      padding: 25px 16px;
+      border-bottom: 0px solid #c4c4c4;
+
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      grid-template-rows: 28px 1fr;
+      gap: 25px 0px;
+      grid-template-areas:
+        ". . ."
+        "search-bar search-bar search-bar";
+
+      .hamburguer {
+        display: block;
+        height: 23px;
+        width: 28px;
+        justify-content: flex-start;
+      }
+
+      .logo {
+        justify-self: center;
+      }
+
+      .search-bar {
+        grid-area: search-bar;
+        width: 100%;
+      }
+
+      .access {
+        justify-content: flex-end;
+
+        .entrar {
+          display: none;
+        }
+      }
+    }
+
+    .header-bottom {
+      display: none;
+    }
+
+    // Menu Mobile
+    .overlay {
+      background: rgba(69, 69, 69, 0.7);
+      position: absolute;
+      top: 0;
+      height: 100%;
+      width: 100%;
+
+      .side-menu {
+        width: 90%;
+
+        .side-menu-top {
+          width: 96%;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          width: 100%;
+          background-color: black;
+          color: #ffffff;
+          padding: 31px 16px;
+
+          .entrar {
+            margin: 0;
+            font-family: "Roboto";
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 16px;
+            text-transform: uppercase;
+            color: #ffffff;
+          }
+        }
+
+        .side-menu-content {
+          width: 100%;
+          height: 585px;
+          display: flex;
+          flex-direction: column;
+          background-color: #ffffff;
+          margin: 0;
+          list-style-type: none;
+          padding: 31px 16px;
+          gap: 12px;
+          font-family: "Roboto";
+          font-style: normal;
+          font-weight: 500;
+          font-size: 14px;
+          line-height: 16px;
+          text-transform: uppercase;
+          color: #c4c4c4;
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index bf46b4a..b4324bb 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,14 +1,26 @@
 import React from "react";
+import { useState } from "react";
 import "./Header.scss";
 import logo from "./assets/Logo-M3Academy.svg";
-import lupa from "./assets/lupa.svg";
 import shoppingCart from "./assets/shopping-cart.svg";
+import hamburguer from "./assets/hamburguer.svg";
+import close from "./assets/close.svg";
 
 const Header = () => {
+  const [active, setMode] = useState(false);
+
+  const ToggleMenu = () => {
+    setMode(!active);
+  };
+
   return (
     <>
       <header>
         <div className="header-top">
+          {/* Hamburguer */}
+          <figure className="hamburguer" onClick={ToggleMenu}>
+            <img src={hamburguer} alt="Ícone do carrinho de compras" />
+          </figure>
           {/* Logo M3 Academy */}
           <figure className="logo">
             <img src={logo} alt="Logo M3 Academy" />
@@ -37,6 +49,24 @@ const Header = () => {
           <p>Saiba Mais</p>
           <p>Institucionais</p>
         </div>
+
+        {/* Menu para mobile */}
+        <div className={active ? "menu-open overlay" : "menu-closed"}>
+          <nav className="side-menu">
+            <div className="side-menu-top">
+              <p className="entrar">Entrar</p>
+              <span onClick={ToggleMenu}>
+                <img src={close} alt="" />
+              </span>
+            </div>
+
+            <ul className="side-menu-content">
+              <li>Cursos</li>
+              <li>Saiba Mais</li>
+              <li>Institucionais</li>
+            </ul>
+          </nav>
+        </div>
       </header>
     </>
   );
diff --git a/src/components/Header/assets/close.svg b/src/components/Header/assets/close.svg
new file mode 100644
index 0000000..e0e6d36
--- /dev/null
+++ b/src/components/Header/assets/close.svg
@@ -0,0 +1,4 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2284 1.28215L1.22996 10.9942C0.550673 11.6541 0.568968 12.7044 1.27083 13.3401C1.97268 13.9759 3.09232 13.9564 3.77161 13.2966L13.77 3.58449C14.4493 2.92466 14.431 1.87436 13.7292 1.23858C13.0273 0.602806 11.9077 0.622311 11.2284 1.28215Z" fill="white"/>
+<path d="M1.65213 3.40819L10.8751 13.7186C11.5082 14.4263 12.6262 14.5239 13.3724 13.9366C14.1185 13.3493 14.2102 12.2995 13.5771 11.5918L4.35414 1.28143C3.72107 0.573715 2.603 0.476092 1.85686 1.06338C1.11072 1.65067 1.01906 2.70048 1.65213 3.40819Z" fill="white"/>
+</svg>
diff --git a/src/components/Header/assets/hamburguer.svg b/src/components/Header/assets/hamburguer.svg
new file mode 100644
index 0000000..6cadeb3
--- /dev/null
+++ b/src/components/Header/assets/hamburguer.svg
@@ -0,0 +1,5 @@
+<svg width="28" height="23" viewBox="0 0 28 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.25 19.0001H1.75002C0.783509 19.0001 0 19.7836 0 20.7501C0 21.7166 0.783508 22.5001 1.75002 22.5001H26.25C27.2165 22.5001 28 21.7166 28 20.7501C28 19.7836 27.2165 19.0001 26.25 19.0001Z" fill="white"/>
+<path d="M26.25 9.5H1.75002C0.783509 9.5 0 10.2835 0 11.25C0 12.2165 0.783508 13 1.75002 13H26.25C27.2165 13 28 12.2165 28 11.25C28 10.2835 27.2165 9.5 26.25 9.5Z" fill="white"/>
+<path d="M26.25 0H1.75002C0.783509 0 0 0.783509 0 1.75002C0 2.71652 0.783508 3.50003 1.75002 3.50003H26.25C27.2165 3.50003 28 2.71652 28 1.75002C28 0.783509 27.2165 0 26.25 0Z" fill="white"/>
+</svg>
diff --git a/src/global.css b/src/global.css
index ecbd796..393a0c4 100644
--- a/src/global.css
+++ b/src/global.css
@@ -6,6 +6,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   box-sizing: border-box;
+  padding: 0;
 }
 
 code {