diff --git a/src/App.scss b/src/App.scss
new file mode 100644
index 0000000..02fa106
--- /dev/null
+++ b/src/App.scss
@@ -0,0 +1,111 @@
+@import "./components/Variables.scss";
+
+body {
+  margin: 0;
+}
+
+.Container-menu {
+  display: flex;
+  flex-direction: column;
+}
+
+.TopContainer_wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.MainConteiner {
+  display: flex;
+  max-width: 100%;
+  padding-bottom: 66px;
+
+  @media (min-width: 1025px) {
+    margin: 0 100px;
+    margin-bottom: 70px;
+  }
+
+  @media (max-width: 1024px) {
+    padding-bottom: 68px;
+  }
+
+  @media (min-width: 2500px) {
+    margin-bottom: 84px;
+  }
+
+  .Main_textArea {
+    @media (min-width: 1025px) {
+      width: 100%;
+      padding: 10px 0px;
+    }
+
+    @media (max-width: 1024px) {
+      padding: 0 16px;
+    }
+
+    h2 {
+      margin: 0;
+      margin-bottom: 12px;
+      font-family: $fontFamily;
+      font-style: normal;
+      font-weight: 700;
+      font-size: 24px;
+      line-height: 28px;
+      color: $color-black;
+
+      @media (max-width: 1024px) {
+        text-align: center;
+        margin-top: 30px;
+      }
+
+      @media (min-width: 2500px) {
+        font-weight: 700;
+        font-size: 48px;
+        line-height: 56px;
+      }
+    }
+
+    .MainText {
+      display: flex;
+      flex-direction: column;
+      font-family: $fontFamily;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 15px;
+      color: $color-gray-500;
+      gap: 20px;
+
+      .Apagar-Texto {
+        @media (max-width: 1024px) {
+          display: none;
+        }
+      }
+
+      p {
+        margin: 0;
+        color: $color-gray-500;
+        font-weight: 400;
+        font-size: 13px;
+        line-height: 15px;
+        font-family: $fontFamily;
+
+        @media (max-width: 1024px) {
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 18px;
+          text-align: justify;
+        }
+
+        @media (min-width: 2500px) {
+          font-weight: 400;
+          font-size: 26px;
+          line-height: 30px;
+        }
+      }
+    }
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+  }
+}
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..b54722c
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,32 @@
+import { Router } from "./router";
+import { Navegation } from "./components/Navegation";
+
+import { ScreenSize } from "./components/DetectSize";
+
+import { HeaderDesktop } from "./components/Header/HeaderDesktop";
+import { HeaderMobile } from "./components/Header/HeaderMobile";
+import { TopContainer } from "./components/Container-menu/TopContainer";
+import { MainFooter } from "./components/Footer/FooterMain";
+
+import "./App.scss";
+
+export const App = () => {
+  return (
+    ScreenSize(),
+    (
+      <>
+        {window.innerWidth > 1024 ? <HeaderDesktop /> : <HeaderMobile />}
+        <section className="Container-menu">
+          <div className="TopContainer_wrapper">
+            <TopContainer />
+          </div>
+          <div className="MainConteiner">
+            <Navegation />
+            <Router />
+          </div>
+          <MainFooter />
+        </section>
+      </>
+    )
+  );
+};
diff --git a/src/components/ContactForm.tsx b/src/components/ContactForm.tsx
new file mode 100644
index 0000000..4378ee6
--- /dev/null
+++ b/src/components/ContactForm.tsx
@@ -0,0 +1,133 @@
+import { Formik, Form, Field, ErrorMessage } from "formik";
+import FormSchema from "./schema/FormSchema";
+import { useState } from "react";
+
+interface IFormikValues {
+  name: string;
+  email: string;
+  cpf: string;
+  data: string;
+  telefone: string;
+  instagram?: string;
+  checkbox: boolean;
+}
+
+const initialValues = {
+  name: "",
+  email: "",
+  cpf: "",
+  data: "",
+  telefone: "",
+  instagram: "",
+  checkbox: false,
+};
+
+export const ContactForm = () => {
+  const [isSubmited, setIsSubmited] = useState(false);
+  const formSubmit = (values: IFormikValues) => {
+    setIsSubmited(true);
+  };
+  return (
+    <Formik
+      onSubmit={formSubmit}
+      initialValues={initialValues}
+      validationSchema={FormSchema}
+      validateOnMount
+    >
+      {({ errors, touched, isValid, validateForm }) => (
+        <Form>
+          <div className="form-entryes">
+            <label htmlFor="name">Nome</label>
+            <span className="error">
+              <ErrorMessage name="name" className="form-ivalid-feedback" />
+            </span>
+            <Field
+              id="name"
+              name="name"
+              placeholder="Seu nome completo"
+              className={errors.name && touched.name && "invalid"}
+            />
+          </div>
+
+          <div className="form-entryes">
+            <label htmlFor="email">E-mail</label>
+            <span className="error">
+              <ErrorMessage name="email" className="form-ivalid-feedback" />
+            </span>
+            <Field
+              id="email"
+              name="email"
+              placeholder="Seu e-mail"
+              className={errors.email && touched.email && "invalid"}
+            />
+          </div>
+
+          <div className="form-entryes">
+            <label htmlFor="cpf">CPF</label>
+            <span className="error">
+              <ErrorMessage name="cpf" className="form-ivalid-feedback" />
+            </span>
+            <Field
+              id="cpf"
+              name="cpf"
+              type="number"
+              placeholder="000.000.000-00"
+              className={errors.cpf && touched.cpf && "invalid"}
+            />
+          </div>
+
+          <div className="form-entryes">
+            <label htmlFor="data">Data de Nascimento:</label>
+            <span className="error">
+              <ErrorMessage name="data" className="form-ivalid-feedback" />
+            </span>
+            <Field
+              id="data"
+              name="data"
+              type="number"
+              placeholder="00.00.0000"
+              className={errors.data && touched.data && "invalid"}
+            />
+          </div>
+
+          <div className="form-entryes">
+            <label htmlFor="telefone">Telefone:</label>
+            <span className="error">
+              <ErrorMessage name="telefone" className="form-ivalid-feedback" />
+            </span>
+            <Field
+              id="telefone"
+              name="telefone"
+              type="tel"
+              placeholder="(00) 00000-0000"
+              className={errors.telefone && touched.telefone && "invalid"}
+            />
+          </div>
+
+          <div className="form-entryes">
+            <label htmlFor="instagram">Instagram</label>
+            <span>
+              <ErrorMessage name="instagram" className="form-ivalid-feedback" />
+            </span>
+            <Field id="instagram" name="instagram" placeholder="@seuuser" />
+          </div>
+
+          <div className="checkbox_wrapper">
+            <label htmlFor="checkbox">Declaro que li e aceito</label>
+            <span className="error">
+              <ErrorMessage name="checkbox" className="form-ivalid-feedback" />
+            </span>
+            <Field
+              type="checkbox"
+              id="checkbox"
+              name="checkbox"
+              className={errors.checkbox && touched.checkbox && "invalid"}
+            />
+          </div>
+          <button>CADASTRE-SE</button>
+          {isSubmited && <span>*Formulário enviado com sucesso!</span>}
+        </Form>
+      )}
+    </Formik>
+  );
+};
diff --git a/src/components/Container-menu/TextContainer.tsx b/src/components/Container-menu/TextContainer.tsx
new file mode 100644
index 0000000..7c428b9
--- /dev/null
+++ b/src/components/Container-menu/TextContainer.tsx
@@ -0,0 +1,35 @@
+export const MainText = () => {
+  return (
+    <>
+      <div className="MainText">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        <p>
+          Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+          accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
+          ab illo inventore veritatis et quasi architecto beatae vitae dicta
+          sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+          aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
+          qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
+          dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
+          quia non numquam eius modi tempora incidunt ut labore et dolore magnam
+          aliquam quaerat voluptatem.
+        </p>
+        <p className="Apagar-Texto">
+          Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
+          suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
+          autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
+          nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
+          voluptas nulla pariatur?
+        </p>
+      </div>
+    </>
+  );
+};
diff --git a/src/components/Container-menu/TopContainer.modules.scss b/src/components/Container-menu/TopContainer.modules.scss
new file mode 100644
index 0000000..89214e8
--- /dev/null
+++ b/src/components/Container-menu/TopContainer.modules.scss
@@ -0,0 +1,75 @@
+@import "../Variables.scss";
+
+.TopIcons {
+  display: flex;
+  padding: 29px 16px;
+  align-items: center;
+
+  .HouseIcon {
+    @media (min-width: 2500px) {
+      img {
+        width: 31.22px;
+      }
+    }
+  }
+
+  @media (min-width: 1025px) {
+    padding: 30px 0 81px 100px;
+  }
+
+  .Arrow {
+    margin: 0 9.7px;
+
+    @media (min-width: 2500px) {
+      width: 15.62px;
+      height: 15.62px;
+    }
+  }
+
+  .span_top {
+    font-family: $fontFamily;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 14px;
+    color: $color-gray;
+    text-transform: uppercase;
+    @media (min-width: 2500px) {
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 28px;
+    }
+  }
+}
+
+.Title_wrapper {
+  display: flex;
+  justify-content: center;
+
+  .Title {
+    margin: 0 0 80px 0;
+    font-family: $fontFamily;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 28px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: $color-gray-800;
+
+    @media (max-width: 1024px) {
+      margin: 80px 0 40px;
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 28px;
+      letter-spacing: 0.1em;
+    }
+
+    @media (min-width: 2500px) {
+      font-weight: 400;
+      font-size: 48px;
+      line-height: 56px;
+      letter-spacing: 0.1em;
+    }
+  }
+}
diff --git a/src/components/Container-menu/TopContainer.tsx b/src/components/Container-menu/TopContainer.tsx
new file mode 100644
index 0000000..efec1c2
--- /dev/null
+++ b/src/components/Container-menu/TopContainer.tsx
@@ -0,0 +1,23 @@
+import { NavLink } from "react-router-dom";
+
+import HouseIcon from "../assets/imgs/SVGs/house-icon.svg";
+import Arrow from "../assets/imgs/SVGs/arrow-point-to-right.svg";
+
+import "./TopContainer.modules.scss";
+
+export const TopContainer = () => {
+  return (
+    <>
+      <div className="TopIcons">
+        <NavLink className="HouseIcon" to={"/"}>
+          <img src={HouseIcon} alt="HouseIcon" />
+        </NavLink>
+        <img className="Arrow" src={Arrow} alt="Arrow" />
+        <span className="span_top"> institucional </span>
+      </div>
+      <div className="Title_wrapper">
+        <h1 className="Title"> institucional </h1>
+      </div>
+    </>
+  );
+};
diff --git a/src/components/DetectSize.tsx b/src/components/DetectSize.tsx
new file mode 100644
index 0000000..80cfc16
--- /dev/null
+++ b/src/components/DetectSize.tsx
@@ -0,0 +1,26 @@
+import React, { useState, useEffect } from "react";
+
+import { HeaderDesktop } from "./Header/HeaderDesktop";
+import { HeaderMobile } from "./Header/HeaderMobile";
+
+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 /> : <HeaderMobile />;
+}
diff --git a/src/components/Header/ContentMenuHeader.tsx b/src/components/Header/ContentMenuHeader.tsx
deleted file mode 100644
index a11f752..0000000
--- a/src/components/Header/ContentMenuHeader.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { NavLink } from "react-router-dom";
-
-export const ContentMenuHeader = () => {
-  return (
-    <>
-      <div className="ContentHeader_wrapper">
-        <NavLink to={"/"}>
-          <button>CURSOS</button>
-        </NavLink>
-        <NavLink to={"/"}>
-          <button>SAIBA MAIS</button>
-        </NavLink>
-        <NavLink to={"/"}>
-          <button>INSTITUCIONAIS</button>
-        </NavLink>
-      </div>
-    </>
-  );
-};
diff --git a/src/components/Header/HeaderDesktop.modules.scss b/src/components/Header/HeaderDesktop.modules.scss
deleted file mode 100644
index 05956ff..0000000
--- a/src/components/Header/HeaderDesktop.modules.scss
+++ /dev/null
@@ -1,148 +0,0 @@
-@import "../Variables.scss";
-
-.HeaderDesktop {
-  display: flex;
-  justify-content: space-between;
-  height: 31px;
-  padding: 22px 100px;
-  background: $color-black;
-  font-family: $fontFamily;
-  border-bottom: 1px solid $color-gray;
-
-  @media (min-width: 2500px) {
-    height: 56px;
-  }
-
-  .m3LogoWrapper {
-    display: flex;
-    align-items: center;
-
-    .M3Logo {
-      width: 100%;
-      @media (min-width: 2500px) {
-        width: 265.62px;
-        height: 50.5px;
-      }
-    }
-  }
-
-  .Search_Header_wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 24.445%;
-    max-width: 515px;
-
-    .Search_Header {
-      position: relative;
-      width: 100%;
-      height: 12px;
-      padding: 8px 16px;
-      border: 2px solid $color-white-100;
-      border-radius: 5px;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 16px;
-      color: $color-gray;
-
-      &::placeholder {
-        color: $color-gray;
-      }
-
-      @media (min-width: 2500px) {
-        height: 29px;
-        padding: 12px 16px;
-        font-weight: 400;
-        font-size: 28px;
-        line-height: 33px;
-      }
-    }
-  }
-  .Search_Header_wrapper::after {
-    position: absolute;
-    content: "";
-    width: 18px;
-    height: 18px;
-    top: 7px;
-    right: 16px;
-    background-image: url("../assets/imgs/SVGs/search-icon-desktop.svg");
-    background-repeat: no-repeat;
-    cursor: pointer;
-
-    @media (min-width: 2500px) {
-      width: 35.15px;
-      height: 35.15px;
-      background-size: contain;
-      top: 10px;
-    }
-  }
-  .Headerlinks {
-    display: flex;
-    gap: 55px;
-
-    .EnterLink {
-      display: flex;
-      align-items: center;
-      font-style: normal;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 16px;
-      color: $color-white;
-      text-decoration: none;
-
-      @media (min-width: 2500px) {
-        font-size: 28px;
-        line-height: 33px;
-      }
-    }
-
-    .CartIcon_Wrapper {
-      display: flex;
-      align-items: center;
-
-      a {
-        display: flex;
-        align-items: center;
-      }
-
-      .CartIcon {
-        width: 100%;
-      }
-    }
-  }
-}
-
-.ContentHeader_wrapper {
-  padding: 14px 100px;
-  background: $color-black;
-  font-family: $fontFamily;
-  font-style: normal;
-  gap: 55px;
-  display: flex;
-  height: 16px;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 16px;
-
-  @media (min-width: 2500px) {
-    height: 33px;
-  }
-
-  button {
-    padding: 0;
-    background: $color-black;
-    border: none;
-    color: $color-white;
-    cursor: pointer;
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 16px;
-    text-transform: uppercase;
-    font-family: $fontFamily;
-    @media (min-width: 2500px) {
-      font-weight: 500;
-      font-size: 28px;
-      line-height: 33px;
-    }
-  }
-}
diff --git a/src/components/Header/HeaderDesktop.tsx b/src/components/Header/HeaderDesktop.tsx
deleted file mode 100644
index c29e19e..0000000
--- a/src/components/Header/HeaderDesktop.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from "react";
-import { NavLink } from "react-router-dom";
-
-import LogoM3 from "../assets/imgs/SVGs/M3Logo_desktop.svg";
-import CartIcon from "../assets/imgs/SVGs/CartIcon_desktop.svg";
-
-import { ContentMenuHeader } from "./ContentMenuHeader";
-
-import "./HeaderDesktop.modules.scss";
-
-export const HeaderDesktop = () => {
-  return (
-    <>
-      <section className="HeaderDesktop">
-        <div className="m3LogoWrapper">
-          <NavLink to={"/"}>
-            <img src={LogoM3} alt="LogoM3" className="M3Logo" />
-          </NavLink>
-        </div>
-        <div className="Search_Header_wrapper">
-          <input
-            name="Search_Header"
-            className="Search_Header"
-            placeholder="Buscar..."
-          />
-          <label className="InconWrapper" htmlFor={"Search_Header"}></label>
-        </div>
-        <div className="Headerlinks">
-          <NavLink to={"/"} className="EnterLink">
-            ENTRAR
-          </NavLink>
-          <div className="CartIcon_Wrapper">
-            <NavLink to={"/"}>
-              <img src={CartIcon} alt="Cart-Icon" className="CartIcon" />
-            </NavLink>
-          </div>
-        </div>
-      </section>
-      <div className="Header_botom">
-        <ContentMenuHeader />
-      </div>
-    </>
-  );
-};
diff --git a/src/components/Header/HeaderMobile.modules.scss b/src/components/Header/HeaderMobile.modules.scss
deleted file mode 100644
index 84e7135..0000000
--- a/src/components/Header/HeaderMobile.modules.scss
+++ /dev/null
@@ -1,141 +0,0 @@
-@import "../Variables.scss";
-
-.HeaderMobile {
-  display: flex;
-  flex-direction: column;
-  padding: 25px 16px;
-  background: $color-black;
-
-  .topHeaderMobile {
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: 25px;
-
-    .ModalWrapper {
-      position: fixed;
-      left: 0;
-      top: 0;
-
-      pointer-events: none;
-      opacity: 0;
-      transition: all 0.2s ease-in-out;
-
-      .ModalContent {
-        z-index: 8;
-
-        .ContentHeader_wrapper {
-          display: flex;
-          flex-direction: column;
-          height: 585px;
-          background: $color-white;
-          padding: 31px 16px;
-          gap: 12px;
-          z-index: 8;
-
-          button {
-            color: $color-gray;
-            background: $color-white;
-          }
-        }
-      }
-
-      .Modaltop {
-        display: flex;
-        justify-content: space-between;
-        padding: 31px 16px;
-        background: $color-black;
-        color: $color-white;
-        font-family: $fontFamily;
-        font-style: normal;
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 16px;
-        z-index: 8;
-
-        .CloseButton {
-          border: none;
-          background: $color-black;
-        }
-      }
-    }
-
-    .ModalWrapper.opened {
-      display: flex;
-      flex-direction: column;
-      width: calc(100% - 36px);
-      position: fixed;
-      left: 0;
-      top: 0;
-      z-index: 8;
-
-      pointer-events: all;
-      opacity: 1;
-    }
-
-    .ModalOuverlay {
-      position: fixed;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      z-index: 1;
-
-      background-color: rgba(69, 69, 69, 0.7);
-    }
-  }
-
-  .MenuIcon {
-    background: $color-black;
-    border: none;
-
-    @media (max-width: 1024px) {
-      padding-left: 0;
-    }
-  }
-
-  .Search_Header_wrapper {
-    position: relative;
-    width: 100%;
-
-    @media (max-width: 374px) {
-      display: flex;
-      justify-content: center;
-    }
-
-    .Search_Header {
-      width: 96.372%;
-      border: 2px solid $color-white-100;
-      border-radius: 5px;
-      padding: 10px 16px;
-      color: $color-black;
-
-      @media (max-width: 1024px) {
-        height: 12px;
-        width: calc(100% - 36px);
-      }
-
-      @media (max-width: 375px) {
-        width: 89.508%;
-        height: 12px;
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 16px;
-      }
-
-      &::placeholder {
-        color: $color-gray;
-      }
-    }
-  }
-
-  .Search_Header_wrapper::after {
-    position: absolute;
-    content: "";
-    width: 18px;
-    height: 18px;
-    right: 16px;
-    top: 10px;
-    background-image: url("../assets/imgs/SVGs/search-icon-desktop.svg");
-    cursor: pointer;
-  }
-}
\ No newline at end of file
diff --git a/src/components/Header/HeaderMobile.tsx b/src/components/Header/HeaderMobile.tsx
deleted file mode 100644
index e87fc82..0000000
--- a/src/components/Header/HeaderMobile.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useState } from "react";
-import { NavLink } from "react-router-dom";
-
-import LogoM3 from "../assets/imgs/SVGs/Logo-M3Academy_mobile.svg";
-import CartIcon from "../assets/imgs/SVGs/minicart_mobile.svg";
-import MenuHamburguer from "../assets/imgs/SVGs/MenuHamburguer.svg";
-import { MenuHeader } from "../MenuHeader";
-
-import "./HeaderMobile.modules.scss";
-
-export const HeaderMobile = () => {
-  const [isOpened, setIsOpened] = useState(false);
-  return (
-    <>
-      <section className="HeaderMobile">
-        <div className="topHeaderMobile">
-          <MenuHeader isOpened={isOpened} setIsOpened={setIsOpened} />
-          <button className="MenuIcon" onClick={() => setIsOpened(true)}>
-            <img src={MenuHamburguer} alt="" />
-          </button>
-          <div>
-            <NavLink to={"/"}>
-              <img src={LogoM3} alt="LogoM3" className="M3Logo" />
-            </NavLink>
-          </div>
-          <div>
-            <NavLink to={"/"}>
-              <img src={CartIcon} alt="CartIcon" className="CartIcon" />
-            </NavLink>
-          </div>
-        </div>
-        <div className="Search_Header_wrapper">
-          <input className="Search_Header" placeholder="Buscar..." />
-        </div>
-      </section>
-    </>
-  );
-};
diff --git a/src/components/MenuHeader.tsx b/src/components/MenuHeader.tsx
new file mode 100644
index 0000000..1489d78
--- /dev/null
+++ b/src/components/MenuHeader.tsx
@@ -0,0 +1,27 @@
+import { ContentMenuHeader } from "./Header/ContentMenuHeader";
+
+import CloseIcon from "./assets/imgs/SVGs/Close-button.svg";
+
+interface MenuHeaderProps {
+  isOpened: boolean;
+  setIsOpened: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const MenuHeader = ({ isOpened, setIsOpened }: MenuHeaderProps) => {
+  return (
+    <>
+      <section className={`ModalWrapper ${isOpened && "opened"}`}>
+        <div className="Modaltop">
+          <span> ENTRAR </span>
+          <button className="CloseButton" onClick={() => setIsOpened(false)}>
+            <img src={CloseIcon} alt="CloseIcon" />
+          </button>
+        </div>
+        <div className="ModalContent">
+          <ContentMenuHeader />
+        </div>
+        <div className="ModalOuverlay"></div>
+      </section>
+    </>
+  );
+};
diff --git a/src/components/Navegation.tsx b/src/components/Navegation.tsx
new file mode 100644
index 0000000..5bb9011
--- /dev/null
+++ b/src/components/Navegation.tsx
@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { NavLink } from "react-router-dom";
+
+import "./Navegation.modules.scss";
+
+export const Navegation = () => {
+  const [isActive, setIsActive] = useState(false);
+
+  const handlechange = () => {
+    setIsActive((isActive) => !isActive);
+  };
+
+  let toggleClassCheck = isActive ? "active" : "";
+
+  return (
+    <>
+      <nav className="MenuRoutes">
+        <ul className="links_wrapper">
+          <li className={`Title_links ${toggleClassCheck} `}>
+            <NavLink to={"/"}> Sobre </NavLink>
+          </li>
+          <li className={`Title_links ${toggleClassCheck} `}>
+            <NavLink to={"/Pagamentos"}> Formas de Pagamento </NavLink>
+          </li>
+          <li className={`Title_links ${toggleClassCheck} `}>
+            <NavLink to={"/Entrega"}> Entrega </NavLink>
+          </li>
+          <li className={`Title_links ${toggleClassCheck} `}>
+            <NavLink to={"/Devolução"}> Troca e Devolução </NavLink>
+          </li>
+          <li className={`Title_links ${toggleClassCheck} `}>
+            <NavLink to={"/Segurança"}> Segurança e Privacidade </NavLink>
+          </li>
+          <li className={`Title_links ${toggleClassCheck} `}>
+            <NavLink to={"/Contatos"}> Contatos </NavLink>
+          </li>
+        </ul>
+      </nav>
+    </>
+  );
+};
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..494dd23
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import { App } from "./App";
+
+const root = ReactDOM.createRoot(
+  document.getElementById("root") as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
new file mode 100644
index 0000000..6431bc5
--- /dev/null
+++ b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/src/router.tsx b/src/router.tsx
new file mode 100644
index 0000000..216694f
--- /dev/null
+++ b/src/router.tsx
@@ -0,0 +1,23 @@
+import { Routes, Route } from "react-router-dom";
+
+import { About } from "./pages/About";
+import { Payments } from "./pages/Payments";
+import { Delivery } from "./pages/Delivery";
+import { Form } from "./pages/Contact";
+import { Privacy } from "./pages/Privacy";
+import { Refund } from "./pages/Refund";
+
+export const Router = () => {
+  return (
+    <>
+      <Routes>
+        <Route path="/" element={<About />} />
+        <Route path="/Pagamentos" element={<Payments />} />
+        <Route path="/Entrega" element={<Delivery />} />
+        <Route path="/Devolução" element={<Refund />} />
+        <Route path="/Segurança" element={<Privacy />} />
+        <Route path="/Contatos" element={<Form />} />
+      </Routes>
+    </>
+  );
+};