diff --git a/package-lock.json b/package-lock.json
index b27fc00..d8399c1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-headless-accordion": "^1.0.2",
+        "react-modal": "^3.16.1",
         "react-scripts": "5.0.1",
         "sass": "^1.57.1",
         "scss": "^0.2.4",
@@ -26,6 +27,9 @@
         "web-vitals": "^2.1.4",
         "yup": "^0.32.11",
         "yup-phone": "^1.3.2"
+      },
+      "devDependencies": {
+        "@types/react-modal": "^3.13.1"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -3875,6 +3879,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-modal": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.13.1.tgz",
+      "integrity": "sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -7491,6 +7504,11 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
+    },
     "node_modules/exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -14249,6 +14267,29 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "node_modules/react-modal": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
+      "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
+      "dependencies": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18",
+        "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -16301,6 +16342,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -19912,6 +19961,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-modal": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.13.1.tgz",
+      "integrity": "sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -22561,6 +22619,11 @@
         "strip-final-newline": "^2.0.0"
       }
     },
+    "exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
+    },
     "exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -27280,6 +27343,22 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-modal": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
+      "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
+      "requires": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      }
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -28800,6 +28879,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/package.json b/package.json
index ddcf1ce..933e02b 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-headless-accordion": "^1.0.2",
+    "react-modal": "^3.16.1",
     "react-scripts": "5.0.1",
     "sass": "^1.57.1",
     "scss": "^0.2.4",
@@ -45,5 +46,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/react-modal": "^3.13.1"
   }
 }
diff --git a/src/components/header/assets/menu.png b/src/components/header/assets/menu.png
new file mode 100644
index 0000000..2b91465
Binary files /dev/null and b/src/components/header/assets/menu.png differ
diff --git a/src/components/header/header-hamburger/header-hamburger.module.scss b/src/components/header/header-hamburger/header-hamburger.module.scss
new file mode 100644
index 0000000..e3645df
--- /dev/null
+++ b/src/components/header/header-hamburger/header-hamburger.module.scss
@@ -0,0 +1,48 @@
+.headerHamburger {
+  height: 139px;
+  width: 100%;
+  background-color: black;
+
+  @media (min-width: 1025px) {
+    display: none;
+  }
+  .headerHamburgerTop {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 25px 16px 30px 16px;
+
+    .btnModal {
+      background: none;
+      border: none;
+    }
+  }
+  .headerHamburgerPlaceholder {
+    padding: 0 16px 0 16px;
+
+    .lupaIcon {
+      /* position: relative;
+      left: 955px;
+      top: -27px; */
+    }
+
+    & input {
+      width: 100%;
+      box-sizing: border-box;
+      background: #ffffff;
+      border: 2px solid #f0f0f0;
+      border-radius: 5px;
+      height: 36px;
+      padding: 10px 16px;
+
+      &::placeholder {
+        font-family: "Roboto";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 16px;
+        color: #c4c4c4;
+      }
+    }
+  }
+}
diff --git a/src/components/header/header-hamburger/header-hamburger.tsx b/src/components/header/header-hamburger/header-hamburger.tsx
new file mode 100644
index 0000000..f9a232c
--- /dev/null
+++ b/src/components/header/header-hamburger/header-hamburger.tsx
@@ -0,0 +1,32 @@
+import style from "./header-hamburger.module.scss";
+import menu from "../assets/menu.png";
+import m3logo from "../assets/logo.png";
+import cart from "../assets/cart1.png";
+import lupa from "../assets/lupa.png";
+import React from "react";
+
+interface HamburgerProps {
+  openModal: () => void;
+}
+
+export function HeaderHamburger({ openModal }: HamburgerProps) {
+  return (
+    <div className={style.headerHamburger}>
+      <div className={style.headerHamburgerTop}>
+        <button onClick={openModal} className={style.btnModal}>
+          {" "}
+          <img src={menu} alt="" />
+        </button>
+        <img src={m3logo} alt="" />
+        <img src={cart} alt="" />
+      </div>
+      <div className={style.headerHamburgerPlaceholder}>
+        <input type="text" placeholder="Buscar..." />
+        <a href="/">
+          {" "}
+          <img className={style.lupaIcon} src={lupa} alt=""></img>
+        </a>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/header/header-hamburger/menu-aberto.module.scss b/src/components/header/header-hamburger/menu-aberto.module.scss
new file mode 100644
index 0000000..dc49cb9
--- /dev/null
+++ b/src/components/header/header-hamburger/menu-aberto.module.scss
@@ -0,0 +1,19 @@
+.menuModal {
+  background: white;
+  width: 100%;
+  height: 585px;
+}
+
+.modalOverlay {
+  background: rgba(69, 69, 69, 0.7);
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding-right: 36px;
+}
+
+.cscs {
+  font-size: 50px;
+}
diff --git a/src/components/header/header-hamburger/menu-aberto.tsx b/src/components/header/header-hamburger/menu-aberto.tsx
new file mode 100644
index 0000000..bcac44a
--- /dev/null
+++ b/src/components/header/header-hamburger/menu-aberto.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import Modal from "react-modal";
+import style from "./menu-aberto.module.scss";
+
+interface MenuHamburgerProps {
+  isOpen: boolean;
+  onRequestClose: () => void;
+}
+
+export function MenuAberto({ isOpen, onRequestClose }: MenuHamburgerProps) {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      overlayClassName={style.modalOverlay}
+      className={style.menuModal}
+      ariaHideApp={false}
+    >
+      <h1 className={style.cscs}>Hello World</h1>
+    </Modal>
+  );
+}
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index da79248..4685a89 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -1,5 +1,8 @@
 import { HeaderMenu } from "./header-menu/header-menu";
 import { HeaderRoute } from "./header-route/header-route";
+import { HeaderHamburger } from "./header-hamburger/header-hamburger";
+import { MenuAberto } from "./header-hamburger/menu-aberto";
+import { useState } from "react";
 
 import style from "./header.module.scss";
 import logoM3 from "./assets/logo.png";
@@ -7,6 +10,7 @@ import cartBuy from "./assets/cart1.png";
 import searchIcon from "./assets/lupa.png";
 
 export function Header() {
+  const [openModal, setOpenModal] = useState(false);
   return (
     <>
       <header className={style.header}>
@@ -33,6 +37,11 @@ export function Header() {
           </div>
         </div>
       </header>
+      <HeaderHamburger openModal={() => setOpenModal(true)} />
+      <MenuAberto
+        isOpen={openModal}
+        onRequestClose={() => setOpenModal(false)}
+      />
       <HeaderMenu />
       <HeaderRoute />
     </>