diff --git a/desafio-react-e-typescript/src/App.scss b/desafio-react-e-typescript/src/App.scss
index a534de6..d283bb8 100644
--- a/desafio-react-e-typescript/src/App.scss
+++ b/desafio-react-e-typescript/src/App.scss
@@ -1,3 +1,7 @@
+body {
+  margin: 0;
+}
+
 .Container-menu {
   display: flex;
 
diff --git a/desafio-react-e-typescript/src/App.tsx b/desafio-react-e-typescript/src/App.tsx
index 97fc3d3..bb6917f 100644
--- a/desafio-react-e-typescript/src/App.tsx
+++ b/desafio-react-e-typescript/src/App.tsx
@@ -1,12 +1,43 @@
+import React, { useState, useEffect } from "react";
+
 import { Router } from "./router";
 import "./App.scss";
 
+import { HeaderDesktop } from "./components/HeaderDesktop";
+
+export function ScreenSize() {
+  const [windowDimenion, detectHW] = useState({
+    winWidth: window.innerWidth,
+  });
+
+  const detectSize = () => {
+    detectHW({
+      winWidth: window.innerWidth,
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener("resize", detectSize);
+
+    return () => {
+      window.removeEventListener("resize", detectSize);
+    };
+  }, [windowDimenion]);
+
+  return window.innerWidth > 1024 ? <HeaderDesktop /> : <h3> Hello World !</h3>;
+}
+
 export const App = () => {
   return (
-    <>
-      <section className="Container-menu">
-        <Router />
-      </section>
-    </>
+    ScreenSize(),
+    (
+      <>
+        {window.innerWidth > 1024 ? <HeaderDesktop /> : <h3> Hello World !</h3>}
+
+        <section className="Container-menu">
+          <Router />
+        </section>
+      </>
+    )
   );
 };
diff --git a/desafio-react-e-typescript/src/assets/imgs/pngs/Logo-M3Academy.png b/desafio-react-e-typescript/src/assets/imgs/pngs/Logo-M3Academy.png
new file mode 100644
index 0000000..779015f
Binary files /dev/null and b/desafio-react-e-typescript/src/assets/imgs/pngs/Logo-M3Academy.png differ
diff --git a/desafio-react-e-typescript/src/assets/imgs/pngs/cart.png b/desafio-react-e-typescript/src/assets/imgs/pngs/cart.png
new file mode 100644
index 0000000..a84a5da
Binary files /dev/null and b/desafio-react-e-typescript/src/assets/imgs/pngs/cart.png differ
diff --git a/desafio-react-e-typescript/src/assets/imgs/pngs/search 2.png b/desafio-react-e-typescript/src/assets/imgs/pngs/search 2.png
new file mode 100644
index 0000000..7b8f948
Binary files /dev/null and b/desafio-react-e-typescript/src/assets/imgs/pngs/search 2.png differ
diff --git a/desafio-react-e-typescript/src/components/ContactForm.tsx b/desafio-react-e-typescript/src/components/ContactForm.tsx
index 44660e7..bae8233 100644
--- a/desafio-react-e-typescript/src/components/ContactForm.tsx
+++ b/desafio-react-e-typescript/src/components/ContactForm.tsx
@@ -1,4 +1,4 @@
-import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik";
+import { Formik, Form, Field, ErrorMessage } from "formik";
 import FormSchema from "../schema/FormSchema";
 
 interface IFormikValues {
@@ -35,43 +35,55 @@ export const ContactForm = () => {
       {({ errors, touched }) => (
         <Form>
           <h2>Preencha o formulário </h2>
+
           <label htmlFor="name">Nome</label>
           <Field
             id="name"
             name="name"
+            placeholder="Seu nome completo"
             className={errors.name && touched.name && "invalid"}
           />
           <ErrorMessage name="name" className="form-ivalid-feedback" />
           <label htmlFor="email">E-mail</label>
+
           <Field
             id="email"
             name="email"
+            placeholder="Seu e-mail"
             className={errors.email && touched.email && "invalid"}
           />
           <ErrorMessage name="email" className="form-ivalid-feedback" />
           <label htmlFor="cpf">CPF</label>
+
           <Field
             id="cpf"
             name="cpf"
+            placeholder="000.000.000-00"
             className={errors.cpf && touched.cpf && "invalid"}
           />
           <ErrorMessage name="cpf" className="form-ivalid-feedback" />
           <label htmlFor="data">Data de Nascimento:</label>
+
           <Field
             id="data"
             name="data"
+            placeholder="00.00.0000"
             className={errors.data && touched.data && "invalid"}
           />
           <ErrorMessage name="data" className="form-ivalid-feedback" />
+
           <label htmlFor="telefone">Telefone:</label>
           <Field
             id="telefone"
             name="telefone"
+            type="tel"
+            placeholder="(00) 00000-0000"
             className={errors.telefone && touched.telefone && "invalid"}
           />
           <ErrorMessage name="telefone" className="form-ivalid-feedback" />
+
           <label htmlFor="instagram">Instagram</label>
-          <Field id="instagram" name="instagram" />
+          <Field id="instagram" name="instagram" placeholder="@seuuser" />
           <ErrorMessage name="instagram" className="form-ivalid-feedback" />
           <div>
             <label htmlFor="checkbox">Declaro que li e aceito</label>
diff --git a/desafio-react-e-typescript/src/components/HeaderDesktop.modules.scss b/desafio-react-e-typescript/src/components/HeaderDesktop.modules.scss
new file mode 100644
index 0000000..270c24d
--- /dev/null
+++ b/desafio-react-e-typescript/src/components/HeaderDesktop.modules.scss
@@ -0,0 +1,24 @@
+.Header {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 100px;
+  background: #000000;
+
+  .Search_Header_wrapper {
+    width: 100%;
+    .Search_Header {
+      width: 100%;
+    }
+  }
+
+  @media (min-width: 1025px) {
+    padding: 22px 100px;
+
+    .Search_Header_wrapper {
+      width: 100%;
+      .Search_Header {
+        width: 100%;
+      }
+    }
+  }
+}
diff --git a/desafio-react-e-typescript/src/components/HeaderDesktop.tsx b/desafio-react-e-typescript/src/components/HeaderDesktop.tsx
new file mode 100644
index 0000000..5abc9af
--- /dev/null
+++ b/desafio-react-e-typescript/src/components/HeaderDesktop.tsx
@@ -0,0 +1,28 @@
+import { NavLink } from "react-router-dom";
+import LogoM3 from "../assets/imgs/pngs/Logo-M3Academy.png";
+import CartIcon from "../assets/imgs/pngs/cart.png";
+
+import "./HeaderDesktop.modules.scss";
+
+export const HeaderDesktop = () => {
+  return (
+    <>
+      <section className="Header">
+        <div>
+          <NavLink to={"/"}>
+            <img src={LogoM3} alt="LogoM3" className="M3Logo" />
+          </NavLink>
+        </div>
+        <div className="Search_Header_wrapper">
+          <input readOnly className="Search_Header" placeholder="Buscar..." />
+        </div>
+        <div>
+          <NavLink to={"/"}> ENTRAR </NavLink>
+          <NavLink to={"/"}>
+            <img src={CartIcon} alt="CartIcon" className="CartIcon" />
+          </NavLink>
+        </div>
+      </section>
+    </>
+  );
+};
diff --git a/desafio-react-e-typescript/src/components/Navegation.scss b/desafio-react-e-typescript/src/components/Navegation.modules.scss
similarity index 93%
rename from desafio-react-e-typescript/src/components/Navegation.scss
rename to desafio-react-e-typescript/src/components/Navegation.modules.scss
index 8085164..62549f2 100644
--- a/desafio-react-e-typescript/src/components/Navegation.scss
+++ b/desafio-react-e-typescript/src/components/Navegation.modules.scss
@@ -1,4 +1,4 @@
-.Menu-routes {
+.MenuRoutes {
   padding: 0 16px;
 
   @media (min-width: 1025px) {
diff --git a/desafio-react-e-typescript/src/components/Navegation.tsx b/desafio-react-e-typescript/src/components/Navegation.tsx
index 5888a19..b84be17 100644
--- a/desafio-react-e-typescript/src/components/Navegation.tsx
+++ b/desafio-react-e-typescript/src/components/Navegation.tsx
@@ -1,28 +1,28 @@
-import { Link } from "react-router-dom";
-import "./Navegation.scss";
+import { NavLink } from "react-router-dom";
+import "./Navegation.modules.scss";
 
 export const Navegation = () => {
   return (
     <>
-      <nav className="Menu-routes">
+      <nav className="MenuRoutes">
         <ul>
           <li>
-            <Link to={"/"}> Sobre </Link>
+            <NavLink to={"/"}> Sobre </NavLink>
           </li>
           <li>
-            <Link to={"/Pagamentos"}> Formas de Pagamento</Link>
+            <NavLink to={"/Pagamentos"}> Formas de Pagamento</NavLink>
           </li>
           <li>
-            <Link to={"/Entrega"}> Entrega </Link>
+            <NavLink to={"/Entrega"}> Entrega </NavLink>
           </li>
           <li>
-            <Link to={"/Devolução"}> Troca e Devolução </Link>
+            <NavLink to={"/Devolução"}> Troca e Devolução </NavLink>
           </li>
           <li>
-            <Link to={"/Segurança"}> Segurança e Privacidade</Link>
+            <NavLink to={"/Segurança"}> Segurança e Privacidade</NavLink>
           </li>
           <li>
-            <Link to={"/Contatos"}> Contatos</Link>
+            <NavLink to={"/Contatos"}> Contatos</NavLink>
           </li>
         </ul>
       </nav>
diff --git a/desafio-react-e-typescript/src/pages/About.tsx b/desafio-react-e-typescript/src/pages/About.tsx
index fde7c80..6c8c4a0 100644
--- a/desafio-react-e-typescript/src/pages/About.tsx
+++ b/desafio-react-e-typescript/src/pages/About.tsx
@@ -1,3 +1,3 @@
 export const About = () => {
-  return <h1>Sobre</h1>;
+  return <h2>Sobre</h2>;
 };
diff --git a/desafio-react-e-typescript/src/pages/Delivery.tsx b/desafio-react-e-typescript/src/pages/Delivery.tsx
index 5dcd792..3131971 100644
--- a/desafio-react-e-typescript/src/pages/Delivery.tsx
+++ b/desafio-react-e-typescript/src/pages/Delivery.tsx
@@ -1,3 +1,3 @@
 export const Delivery = () => {
-  return <h1> Entrega </h1>;
+  return <h2> Entrega </h2>;
 };
diff --git a/desafio-react-e-typescript/src/pages/Payments.tsx b/desafio-react-e-typescript/src/pages/Payments.tsx
index 26fa249..446065d 100644
--- a/desafio-react-e-typescript/src/pages/Payments.tsx
+++ b/desafio-react-e-typescript/src/pages/Payments.tsx
@@ -1,3 +1,3 @@
 export const Payments = () => {
-  return <h1>Pagamentos</h1>;
+  return <h2>Pagamentos</h2>;
 };
diff --git a/desafio-react-e-typescript/src/pages/Privacy.tsx b/desafio-react-e-typescript/src/pages/Privacy.tsx
index ee493c8..278d2f0 100644
--- a/desafio-react-e-typescript/src/pages/Privacy.tsx
+++ b/desafio-react-e-typescript/src/pages/Privacy.tsx
@@ -1,3 +1,3 @@
 export const Privacy = () => {
-  return <h1> Seguraça e Privacidade </h1>;
+  return <h2> Seguraça e Privacidade </h2>;
 };
diff --git a/desafio-react-e-typescript/src/pages/Refund.tsx b/desafio-react-e-typescript/src/pages/Refund.tsx
index 830ea05..fff6a08 100644
--- a/desafio-react-e-typescript/src/pages/Refund.tsx
+++ b/desafio-react-e-typescript/src/pages/Refund.tsx
@@ -1,3 +1,3 @@
 export const Refund = () => {
-  return <h1> Troca ou Devolução </h1>;
+  return <h2> Troca ou Devolução </h2>;
 };
diff --git a/desafio-react-e-typescript/src/react-app-env.d.ts b/desafio-react-e-typescript/src/react-app-env.d.ts
new file mode 100644
index 0000000..6431bc5
--- /dev/null
+++ b/desafio-react-e-typescript/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/desafio-react-e-typescript/src/schema/CustonValidations.ts b/desafio-react-e-typescript/src/schema/CustonValidations.ts
deleted file mode 100644
index a9eeec3..0000000
--- a/desafio-react-e-typescript/src/schema/CustonValidations.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const phoneNumber = /\([1-9]{2}\) 9[1-9]\d{3}-\d{4}/;
-
-export const cpfNumber = /\d{3}.\d{3}.\d{3}-\d{2}/;
diff --git a/desafio-react-e-typescript/src/schema/CustonValidationsRegex.ts b/desafio-react-e-typescript/src/schema/CustonValidationsRegex.ts
new file mode 100644
index 0000000..a7557b5
--- /dev/null
+++ b/desafio-react-e-typescript/src/schema/CustonValidationsRegex.ts
@@ -0,0 +1,5 @@
+export const phoneNumber = /\([1-9]{2}\) [1-9]{2}\d{3}-\d{4}/;
+
+export const cpfNumber = /\d{3}.\d{3}.\d{3}-\d{2}/;
+
+export const insta = /@/;
diff --git a/desafio-react-e-typescript/src/schema/FormSchema.ts b/desafio-react-e-typescript/src/schema/FormSchema.ts
index b52de13..831a175 100644
--- a/desafio-react-e-typescript/src/schema/FormSchema.ts
+++ b/desafio-react-e-typescript/src/schema/FormSchema.ts
@@ -1,6 +1,6 @@
 import * as Yup from "yup";
 
-import { phoneNumber, cpfNumber } from "./CustonValidations";
+import { phoneNumber, cpfNumber, insta } from "./CustonValidationsRegex";
 
 export default Yup.object().shape({
   name: Yup.string().required("*Campo Obrigatório"),
@@ -8,8 +8,13 @@ export default Yup.object().shape({
     .email()
     .required("*Campo Obrigatório")
     .email("E-mail inválido"),
-  cpf: Yup.string().matches(cpfNumber).required("*Campo Obrigatório"),
-  telefone: Yup.string().matches(phoneNumber).required("*Campo Obrigatório"),
-  data: Yup.number().required("*Campo Obrigatório"),
-  checkbox: Yup.boolean().required("*"),
+  cpf: Yup.string()
+    .matches(cpfNumber, "CPF inválido")
+    .required("*Campo Obrigatório"),
+  telefone: Yup.string()
+    .matches(phoneNumber, "numero inválido")
+    .required("*Campo Obrigatório"),
+  instagram: Yup.string().matches(insta, "conta inválida"),
+  data: Yup.date().required("*Campo Obrigatório"),
+  checkbox: Yup.boolean().oneOf([true], "*"),
 });