diff --git a/src/components/BreadCrumb/BreadCreumb.tsx b/src/components/BreadCrumb/BreadCreumb.tsx
index 89903d4..4b98d5f 100644
--- a/src/components/BreadCrumb/BreadCreumb.tsx
+++ b/src/components/BreadCrumb/BreadCreumb.tsx
@@ -12,21 +12,20 @@ export const BreadCrumb = () => {
 
     const routeName = pathname.split("/")[1]
 
-
     return (
         <nav >
             {pathname !== "/" && (
-                <ul className={styles.breadNav}>
-                    <li>
-                        <Link to="/">
+                <ul className={styles["breadNav"]}>
+                    <li className={styles["navItem"]}>
+                        <Link to="/institucional/sobre">
                             <img src={homeIcon} alt="Icone de home" />
                         </Link>
                     </li>
 
-                    <li className={styles.navItem}>
+                    <li className={styles["navItem"]}>
                         <img src={arrowRight} alt="Icone de seta para a direita" />
 
-                        <span className={styles.routeName}>
+                        <span className={styles["routeName"]}>
                             {routeName}
                         </span>
                     </li>
diff --git a/src/components/BreadCrumb/BreadCrumb.module.scss b/src/components/BreadCrumb/BreadCrumb.module.scss
index b206042..a50b0a5 100644
--- a/src/components/BreadCrumb/BreadCrumb.module.scss
+++ b/src/components/BreadCrumb/BreadCrumb.module.scss
@@ -2,8 +2,21 @@
     display: flex;
     gap: 12px;
     align-items: center;
-    margin: 0 7.8125%;
+    margin: 0 100px;
     padding: 30px 16px;
+
+    @media (max-width:1024px) {
+        margin: 0 16px;
+    }
+
+    a {
+        img {
+            @media (min-width:2500px) {
+                min-width: 31.25px;
+                min-height: 31.25px;
+            }
+        }
+    }
 }
 
 .navItem {
@@ -11,6 +24,14 @@
     gap: 12px;
     align-items: center;
 
+    img {
+        @media (min-width:2500px) {
+            width: 100%;
+            height: 100%;
+            min-width: 8.9px;
+            min-height: 15.62px;
+        }
+    }
 }
 
 .routeName {
@@ -24,4 +45,12 @@
     color: #C4C4C4;
 
     text-transform: uppercase;
+
+    @media (min-width:2500px) {
+
+        font-size: 24px;
+        line-height: 28px;
+
+
+    }
 }
\ No newline at end of file
diff --git a/src/components/Footer/Accordion/styles/Accordion.module.scss b/src/components/Footer/Accordion/styles/Accordion.module.scss
index 3ec6133..7a483a6 100644
--- a/src/components/Footer/Accordion/styles/Accordion.module.scss
+++ b/src/components/Footer/Accordion/styles/Accordion.module.scss
@@ -22,7 +22,9 @@ h5 {
     justify-content: space-between;
     width: 100%;
     max-width: 707px;
-    height: 139px;
+
+    height: 100%;
+    // max-height: 139px;
 
     @media (min-width:2500px) {
 
@@ -84,7 +86,7 @@ h5 {
 .accordion__body {
     display: flex;
     flex-direction: column;
-    max-height: 140px;
+    // max-height: 140px;
     margin-top: 12px;
     gap: 6px;
     height: 125px;
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 596d211..aeee3ec 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -13,6 +13,7 @@ export const Footer = () => {
                 <AccordionFooter />
                 <SocialMedia />
             </div>
+
             <Rodape />
         </div >
 
diff --git a/src/components/Footer/NewsLetter/Newsletter.module.scss b/src/components/Footer/NewsLetter/Newsletter.module.scss
index eddc9c4..b0fa35d 100644
--- a/src/components/Footer/NewsLetter/Newsletter.module.scss
+++ b/src/components/Footer/NewsLetter/Newsletter.module.scss
@@ -70,7 +70,7 @@
             &__input {
 
                 width: 100%;
-                max-width: 340px;
+                // max-width: 340px;
                 height: 42px;
                 border-radius: 4px;
                 border: 1px solid #E5E5E5;
diff --git a/src/components/Footer/Rodape/Rodape.module.scss b/src/components/Footer/Rodape/Rodape.module.scss
index e0ee5cd..0b57cec 100644
--- a/src/components/Footer/Rodape/Rodape.module.scss
+++ b/src/components/Footer/Rodape/Rodape.module.scss
@@ -14,7 +14,7 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-        margin: 0 7.8125%;
+        margin: 0 100px;
 
         @media (max-width: 1024px) {
             flex-direction: column;
diff --git a/src/components/Footer/Rodape/Rodape.tsx b/src/components/Footer/Rodape/Rodape.tsx
index 68371ee..1563569 100644
--- a/src/components/Footer/Rodape/Rodape.tsx
+++ b/src/components/Footer/Rodape/Rodape.tsx
@@ -18,6 +18,9 @@ import { DevelopedBy } from './DevelopedBy';
 export const Rodape = () => {
     return (
         <footer className={styleRodape["footer"]}>
+            {/* 
+            <Rodape />
+             */}
             <div className={styleRodape["footer__wrapper"]}>
                 <div className={styleRodape["footer__address"]}>
                     <span>Lorem ipsum dolor sit amet, consectetur adipiscing
diff --git a/src/components/Footer/SocialMedia/SocialMedia.tsx b/src/components/Footer/SocialMedia/SocialMedia.tsx
index e4289f5..1949212 100644
--- a/src/components/Footer/SocialMedia/SocialMedia.tsx
+++ b/src/components/Footer/SocialMedia/SocialMedia.tsx
@@ -15,23 +15,23 @@ export const SocialMedia = () => {
 
         <div className={styleSocialMedia["wrapper"]}>
             <div className={styleSocialMedia["wrapper__social__media"]}>
-                <IconLink link={""}
+                <IconLink link={"/"}
                     sourceImg={facebook}
                     altText="Logo da rede social "
                 />
-                <IconLink link={""}
+                <IconLink link={"/"}
                     sourceImg={instagram}
                     altText="Logo da rede social "
                 />
-                <IconLink link={""}
+                <IconLink link={"/"}
                     sourceImg={twitter}
                     altText="Logo da rede social "
                 />
-                <IconLink link={""}
+                <IconLink link={"/"}
                     sourceImg={youtube}
                     altText="Logo da rede social "
                 />
-                <IconLink link={""}
+                <IconLink link={"/"}
                     sourceImg={linkedin}
                     altText="Logo da rede social "
                 />
diff --git a/src/components/Header/HeaderDesk/HeaderBottom.tsx b/src/components/Header/HeaderDesk/HeaderBottom.tsx
index c893593..f06bce4 100644
--- a/src/components/Header/HeaderDesk/HeaderBottom.tsx
+++ b/src/components/Header/HeaderDesk/HeaderBottom.tsx
@@ -13,7 +13,7 @@ export const HeaderBottom = () => {
                 <Link className={styleHeader["list__items__link"]} to="/saiba-mais">
                     Saiba Mais
                 </Link>
-                <Link className={styleHeader["list__items__link"]} to="/institucional">
+                <Link className={styleHeader["list__items__link"]} to="/institucional/sobre">
                     Institucional
                 </Link>
             </nav>
diff --git a/src/components/Header/HeaderDesk/HeaderTop.tsx b/src/components/Header/HeaderDesk/HeaderTop.tsx
index a8d91a1..45f7544 100644
--- a/src/components/Header/HeaderDesk/HeaderTop.tsx
+++ b/src/components/Header/HeaderDesk/HeaderTop.tsx
@@ -4,14 +4,15 @@ import search from "../assets/svgs/search.svg";
 import cart from "../assets/svgs/cart.svg";
 
 import styleHeader from '../styles/Header.module.scss';
+import { Link } from "react-router-dom";
 
 export const HeaderTop = () => {
     return (
         <div className={styleHeader["header__top"]}>
             <div className={styleHeader["container__header__top"]}>
-                <div className={styleHeader["container__logo"]}>
+                <Link to="/institucional/sobre" className={styleHeader["container__logo"]}>
                     < img src={logo} alt="Logo M3" className={styleHeader["container__logo__img"]} />
-                </div>
+                </Link>
                 <form className={styleHeader["container__search"]}>
                     <input className={styleHeader["container__search__input"]} type="text" placeholder="Buscar..." />
                     <a className={styleHeader["container__search__link"]} href="/">
@@ -23,9 +24,9 @@ export const HeaderTop = () => {
                         <a href="/">Entrar</a>
                     </span>
                     <span className={styleHeader["container__menu__cart"]}>
-                        <a href="/" >
+                        <Link to="/" >
                             <img src={cart} alt="icone de cart" />
-                        </a>
+                        </Link>
                     </span>
                 </div>
             </div>
diff --git a/src/components/Header/styles/Header.module.scss b/src/components/Header/styles/Header.module.scss
index 9ecedfe..8d99525 100644
--- a/src/components/Header/styles/Header.module.scss
+++ b/src/components/Header/styles/Header.module.scss
@@ -51,7 +51,7 @@ a {
     .container__header__top {
       display: flex;
       align-items: center;
-      margin: 0 7.8125%;
+      margin: 0 100px;
       width: 100%;
 
 
@@ -276,7 +276,7 @@ a {
   .navBar__items {
     width: 100%;
     max-width: 349px;
-    margin: 0 7.8125%;
+    margin: 0 100px;
 
 
     display: flex;
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
deleted file mode 100644
index 6dd3e50..0000000
--- a/src/components/Layout/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Outlet } from "react-router-dom"
-import { Footer } from "../Footer/Footer"
-import { Header } from "../Header/Header"
-import { BreadCrumb } from "../BreadCrumb/BreadCreumb"
-import styles from "./styles.module.scss"
-
-
-
-
-
-export const Layout = () => {
-
-    return (
-        <div className={styles.container}>
-            <Header />
-            <BreadCrumb />
-            <main className={styles.main}>
-                <Outlet />
-            </main>
-
-            <Footer />
-        </div >
-    )
-}
\ No newline at end of file
diff --git a/src/components/Main/Fom/ContactForm.tsx b/src/components/Main/Fom/ContactForm.tsx
deleted file mode 100644
index da1a62d..0000000
--- a/src/components/Main/Fom/ContactForm.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { Formik, Form, Field, ErrorMessage } from "formik";
-import contactFormSchema from "../../../schema/ContactFormSchema";
-import styleForm from "./ContactForm.module.scss";
-
-
-
-interface IFormikValues {
-    name: string;
-    email: string;
-    cpf: string;
-    dateBirth: string;
-    phone: string;
-    instagram?: string;
-    checkbox: boolean;
-}
-
-const initialValues = {
-    name: "",
-    email: "",
-    cpf: "",
-    dateBirth: "",
-    phone: "",
-    instagram: "",
-    checkbox: false,
-};
-
-const formSubmit = (values: IFormikValues) => {
-    console.log(values);
-};
-
-export const ContactForm = () => {
-    return (
-        <Formik
-            onSubmit={formSubmit}
-            initialValues={initialValues}
-            validationSchema={contactFormSchema}
-
-
-        >
-            {({ errors, touched }) => (
-                <Form className="formulario">
-                    <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="dateBirth"
-                        name="dateBirth"
-                        placeholder="00.00.0000"
-                        className={errors.dateBirth && touched.dateBirth && "invalid"}
-                    />
-                    <ErrorMessage name="dateBirth" className="form-ivalid-feedback" />
-
-                    <label htmlFor="phone">Telefone:</label>
-                    <Field
-                        id="phone"
-                        name="phone"
-                        type="tel"
-                        placeholder="(00) 00000-0000"
-                        className={errors.phone && touched.phone && "invalid"}
-                    />
-                    <ErrorMessage name="phone" className="form-ivalid-feedback" />
-
-                    <label htmlFor="instagram">Instagram</label>
-                    <Field id="instagram" name="instagram" placeholder="@seuuser" />
-                    <ErrorMessage name="instagram" className="form-ivalid-feedback" />
-                    <div>
-                        <label htmlFor="checkbox">Declaro que li e aceito</label>
-                        <Field
-                            type="checkbox"
-                            id="checkbox"
-                            name="checkbox"
-                            className={errors.checkbox && touched.checkbox && "invalid"}
-                        />
-                        <ErrorMessage name="checkbox" className="form-ivalid-feedback" />
-                    </div>
-
-                    <button type="submit">CADASTRE-SE</button>
-                </Form>
-            )}
-        </Formik>
-    );
-};
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
new file mode 100644
index 0000000..3331239
--- /dev/null
+++ b/src/pages/Home.tsx
@@ -0,0 +1,24 @@
+import { Outlet } from "react-router-dom"
+import { Footer } from "../components/Footer/Footer"
+import { Header } from "../components/Header/Header"
+import { BreadCrumb } from "../components/BreadCrumb/BreadCreumb"
+import styles from "./styles.module.scss"
+
+
+
+
+
+export const Home = () => {
+
+    return (
+        <div className={styles["container"]}>
+            <Header />
+            <BreadCrumb />
+            <main className={styles["main"]}>
+                <Outlet />
+            </main>
+
+            <Footer />
+        </div >
+    )
+}
\ No newline at end of file
diff --git a/src/pages/Intitucional/Institucional.module.scss b/src/pages/Intitucional/Institucional.module.scss
index 7da04fd..8b2d7a9 100644
--- a/src/pages/Intitucional/Institucional.module.scss
+++ b/src/pages/Intitucional/Institucional.module.scss
@@ -1,9 +1,18 @@
-.batata {
+.wrapper__sideBar {
     display: flex;
     gap: 30px;
-    height: 285px;
+    height: 100%;
+    max-height: 465px;
     margin: 80px 0 70px;
 
+    @media (max-width:1024px) {
+        flex-direction: column;
+        margin: 40px 0 80px;
+        max-height: none;
+
+
+    }
+
     h2 {
         margin: 0;
         font-family: 'Roboto';
@@ -11,6 +20,18 @@
         font-weight: 700;
         font-size: 24px;
         line-height: 28px;
+
+        @media (min-width:2500px) {
+            font-size: 48px;
+            line-height: 56px;
+        }
+    }
+
+    nav {
+        @media (min-width:2500px) {
+            max-width: 590px;
+            width: 100%;
+        }
     }
 
 
@@ -25,22 +46,38 @@
         padding: 0;
         margin: 0;
 
-        @media (min-width:2500px) {}
+
+        @media (min-width:2500px) {
+            min-width: 590px;
+
+        }
 
         @media (max-width:1024px) {
             min-width: none;
+            border-right: none;
+
+
         }
 
+
         &__item {
+            display: flex;
+
+            align-items: center;
             font-family: 'Roboto';
             font-style: normal;
             font-weight: 400;
             text-transform: inherit;
 
-
             padding: 10px 16px;
             color: #7D7D7D;
 
+            @media (min-width:2500px) {
+                height: 58px;
+                padding: 0 16px;
+
+            }
+
 
             &.ativo {
                 background-color: #000;
@@ -50,15 +87,23 @@
                 font-size: 16px;
                 line-height: 19px;
 
+                @media (min-width:2500px) {
+                    font-size: 28px;
+                    line-height: 33px;
+                }
+
+
+
+
             }
         }
     }
 
     .content-right {
-        background-color: aquamarine;
         width: 100%;
+        height: 100%;
+
 
-        h2 {}
 
         p {
             font-family: 'Roboto';
@@ -66,8 +111,18 @@
             font-weight: 400;
             font-size: 13px;
             line-height: 15px;
+            margin-bottom: 0;
 
             color: #7D7D7D;
+
+            @media (min-width:2500px) {
+                font-size: 26px;
+                line-height: 30px;
+            }
+
+            @media (max-width:1024px) {
+                text-align: justify;
+            }
         }
     }
 }
\ No newline at end of file
diff --git a/src/pages/Intitucional/Instituicional.tsx b/src/pages/Intitucional/Instituicional.tsx
index 067db7c..62f60d4 100644
--- a/src/pages/Intitucional/Instituicional.tsx
+++ b/src/pages/Intitucional/Instituicional.tsx
@@ -8,7 +8,7 @@ export const Instituicional = () => {
     return (
         <>
             <h1>Institucional</h1>
-            <div className={styleInstitucional["batata"]}>
+            <div className={styleInstitucional["wrapper__sideBar"]}>
                 <nav>
                     <ul className={styleInstitucional["sideBar"]}>
                         <NavLink
diff --git a/src/components/Layout/styles.module.scss b/src/pages/styles.module.scss
similarity index 65%
rename from src/components/Layout/styles.module.scss
rename to src/pages/styles.module.scss
index b59b717..eca1ca5 100644
--- a/src/components/Layout/styles.module.scss
+++ b/src/pages/styles.module.scss
@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: column;
 
-    height: 100vh;
+    height: 100%;
     overflow: hidden;
 }
 
@@ -10,11 +10,16 @@
     display: flex;
 
     height: auto;
-    margin: 0 7.8125%;
+    margin: 0 100px;
 
 
     flex-direction: column;
 
+    @media (max-width:1024px) {
+        margin: 0 16px;
+        z-index: -9;
+    }
+
     h1 {
         text-align: center;
         font-family: 'Roboto';
@@ -27,5 +32,10 @@
 
         color: #292929;
 
+        @media (min-width:2500px) {
+            font-size: 48px;
+            line-height: 56px;
+        }
+
     }
 }
\ No newline at end of file
diff --git a/src/routes.tsx b/src/routes.tsx
index 9c3fb0c..5b6134b 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -1,5 +1,5 @@
 import { Routes as ReactRouterRoutes, Route } from "react-router-dom"
-import { Layout } from "./components/Layout"
+import { Home } from "./pages/Home"
 import { Contato } from "./pages/Intitucional/Contato"
 import { Entrega } from "./pages/Intitucional/Entrega"
 import { FormaDePagamento } from "./pages/Intitucional/FormaDePagamento"
@@ -14,9 +14,9 @@ export const Routes = () => {
 
     return (
         <ReactRouterRoutes>
-            <Route path="/" element={<Layout />}>
-                <Route path="institucional" element={<Instituicional />}>
-                    <Route path="sobre" element={<Sobre />} index />
+            <Route path="/" element={< Home />}>
+                < Route path="institucional/sobre" element={<Instituicional />}>
+                    <Route path="sobre" element={<Sobre />} />
                     <Route path="forma-de-pagamento" element={<FormaDePagamento />} />
                     <Route path="entrega" element={<Entrega />} />
                     <Route path="troca-e-devolucao" element={<TrocaEDevolucao />} />
@@ -24,6 +24,6 @@ export const Routes = () => {
                     <Route path="contato" element={<Contato />} />
                 </Route>
             </Route>
-        </ReactRouterRoutes>
+        </ReactRouterRoutes >
     )
 }
\ No newline at end of file
diff --git a/variables.scss b/variables.scss
deleted file mode 100644
index ed9b4c0..0000000
--- a/variables.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-/* fonts */
-@import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");
-$font-family: "Open Sans", sans-serif;
-$font-family-secundary: "Tenor Sans", sans-serif;
-
-/* Colors */
-$color-black: #000000;
-$color-black2: #292929;
-$color-black3: #58595B;
-
-$color-white: #fff;
-
-$color-gray: #6c6c6c;
-$color-gray2: #7D7D7D;
-$color-gray3: #f0f0f0;
-$color-gray4: #8d8d8d;
-$color-gray5: #e5e5e5;
-$color-gray6: #C4C4C4;
-$color-gray7: #e0e0e0;
-
-$color-blue: #4267b2;
-$color-blue2: #00C8FF;
-
-
-$color-green: #4caf50;
-
-$color-orange: #f15a31;