diff --git a/package.json b/package.json
index fd39bdd..e52e788 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-headless-accordion": "^1.0.2",
+    "react-router-dom": "^6.6.2",
     "react-scripts": "5.0.1",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0",
diff --git a/src/components/BreadCrumb/BreadCreumb.tsx b/src/components/BreadCrumb/BreadCreumb.tsx
new file mode 100644
index 0000000..89903d4
--- /dev/null
+++ b/src/components/BreadCrumb/BreadCreumb.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { IconLink } from "../utils/IconLink";
+import { ListItem } from "../utils/ListItem";
+import homeIcon from "./assets/svgs/home.svg"
+import arrowRight from "./assets/svgs/arrow-right.svg"
+
+import { useLocation, Link } from "react-router-dom"
+import styles from "./BreadCrumb.module.scss"
+export const BreadCrumb = () => {
+
+    const { pathname } = useLocation()
+
+    const routeName = pathname.split("/")[1]
+
+
+    return (
+        <nav >
+            {pathname !== "/" && (
+                <ul className={styles.breadNav}>
+                    <li>
+                        <Link to="/">
+                            <img src={homeIcon} alt="Icone de home" />
+                        </Link>
+                    </li>
+
+                    <li className={styles.navItem}>
+                        <img src={arrowRight} alt="Icone de seta para a direita" />
+
+                        <span className={styles.routeName}>
+                            {routeName}
+                        </span>
+                    </li>
+
+                </ul>
+            )}
+
+        </nav>
+    );
+}
\ No newline at end of file
diff --git a/src/components/BreadCrumb/BreadCrumb.module.scss b/src/components/BreadCrumb/BreadCrumb.module.scss
new file mode 100644
index 0000000..b206042
--- /dev/null
+++ b/src/components/BreadCrumb/BreadCrumb.module.scss
@@ -0,0 +1,27 @@
+.breadNav {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    margin: 0 7.8125%;
+    padding: 30px 16px;
+}
+
+.navItem {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+
+}
+
+.routeName {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 14px;
+
+
+    color: #C4C4C4;
+
+    text-transform: uppercase;
+}
\ No newline at end of file
diff --git a/src/components/Main/BreadCrumb/assets/svgs/arrow-right.svg b/src/components/BreadCrumb/assets/svgs/arrow-right.svg
similarity index 100%
rename from src/components/Main/BreadCrumb/assets/svgs/arrow-right.svg
rename to src/components/BreadCrumb/assets/svgs/arrow-right.svg
diff --git a/src/components/Main/BreadCrumb/assets/svgs/home.svg b/src/components/BreadCrumb/assets/svgs/home.svg
similarity index 100%
rename from src/components/Main/BreadCrumb/assets/svgs/home.svg
rename to src/components/BreadCrumb/assets/svgs/home.svg
diff --git a/src/components/Footer/NewsLetter/Newsletter.module.scss b/src/components/Footer/NewsLetter/Newsletter.module.scss
index 24f71cb..eddc9c4 100644
--- a/src/components/Footer/NewsLetter/Newsletter.module.scss
+++ b/src/components/Footer/NewsLetter/Newsletter.module.scss
@@ -1,6 +1,8 @@
 .newsLetter {
     width: 100%;
     padding: 16px 0;
+    border-top: 1px solid;
+    border-bottom: 1px solid;
 
     &__wrapper {
         display: flex;
diff --git a/src/components/Footer/Rodape/Rodape.module.scss b/src/components/Footer/Rodape/Rodape.module.scss
index 9a6e575..e0ee5cd 100644
--- a/src/components/Footer/Rodape/Rodape.module.scss
+++ b/src/components/Footer/Rodape/Rodape.module.scss
@@ -22,21 +22,6 @@
             margin: 0 16px;
 
         }
-
-        // .container {
-        //     width: 94.9734%;
-
-        //     align-items: center;
-        //     display: flex;
-        //     justify-content: space-between;
-
-        //     @media (max-width: 1024px) {
-        //         flex-direction: column;
-        //         align-items: flex-start;
-        //         margin: 0 16px;
-
-        //     }
-        // }
     }
 
     &__address {
@@ -96,6 +81,7 @@
             img {
                 width: 36px;
                 height: 20.2px;
+
                 @media(min-width:2500px) {
                     width: 70px;
                     height: 39.27px;
@@ -109,13 +95,14 @@
                 @media (max-width: 490px) {
                     width: 30px;
                     height: 17px;
-                  
+
                 }
+
                 @media (max-width: 370px) {
-                  column-gap: 5.5px;
-                  width: 18px;
-                  width: 19px;
-                    
+                    column-gap: 5.5px;
+                    width: 18px;
+                    width: 19px;
+
                 }
 
 
diff --git a/src/components/Header/HeaderDesk/HeaderBottom.tsx b/src/components/Header/HeaderDesk/HeaderBottom.tsx
index da18f3b..c893593 100644
--- a/src/components/Header/HeaderDesk/HeaderBottom.tsx
+++ b/src/components/Header/HeaderDesk/HeaderBottom.tsx
@@ -1,19 +1,21 @@
 import React from "react";
 import styleHeader from '../styles/Header.module.scss';
+import { Link } from "react-router-dom"
 
 export const HeaderBottom = () => {
     return (
         <div className={styleHeader["header__bottom"]}>
             <nav className={styleHeader["navBar__items"]}>
-                <a className={styleHeader["list__items__link"]} href="/cursos">
+
+                <Link className={styleHeader["list__items__link"]} to="/cursos">
                     Cursos
-                </a>
-                <a className={styleHeader["list__items__link"]} href="/saiba-mais">
+                </Link>
+                <Link className={styleHeader["list__items__link"]} to="/saiba-mais">
                     Saiba Mais
-                </a>
-                <a className={styleHeader["list__items__link"]} href="/institucionais">
-                    Institucionais
-                </a>
+                </Link>
+                <Link className={styleHeader["list__items__link"]} to="/institucional">
+                    Institucional
+                </Link>
             </nav>
         </div>
     );
diff --git a/src/components/Header/styles/Header.module.scss b/src/components/Header/styles/Header.module.scss
index 310fcd7..9ecedfe 100644
--- a/src/components/Header/styles/Header.module.scss
+++ b/src/components/Header/styles/Header.module.scss
@@ -314,7 +314,7 @@ a {
         background: #FFFFFF;
         transition: all .45s;
 
-        
+
       }
 
       @media (max-width:1024px) {
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
new file mode 100644
index 0000000..6dd3e50
--- /dev/null
+++ b/src/components/Layout/index.tsx
@@ -0,0 +1,24 @@
+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/Layout/styles.module.scss b/src/components/Layout/styles.module.scss
new file mode 100644
index 0000000..26e74c0
--- /dev/null
+++ b/src/components/Layout/styles.module.scss
@@ -0,0 +1,19 @@
+.container {
+    display: flex;
+    flex-direction: column;
+
+    height: 100vh;
+    overflow: hidden;
+}
+
+.main {
+    display: flex;
+
+    height: auto;
+    margin: 0 7.8125%;
+
+
+    flex-direction: column;
+
+
+}
\ No newline at end of file
diff --git a/src/components/Main/BreadCrumb/BreadCreumb.tsx b/src/components/Main/BreadCrumb/BreadCreumb.tsx
deleted file mode 100644
index 51aff47..0000000
--- a/src/components/Main/BreadCrumb/BreadCreumb.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react";
-import { IconLink } from "../../utils/IconLink";
-import { ListItem } from "../../utils/ListItem";
-import homeIcon from "./assets/svgs/home.svg"
-import arrowRight from "./assets/svgs/arrow-right.svg"
-
-export const BreadCrumb = () => {
-    return (
-        <nav>
-            <ul>
-                <li>
-                    <a href="/">
-                        <img src={homeIcon} alt="Icone de home" />
-                    </a>
-                </li>
-                <li>
-                    <img src={homeIcon} alt="Icone de home" />
-                </li>
-                <li>
-                    <img src={homeIcon} alt="Icone de home" />
-                </li>
-
-            </ul>
-        </nav>
-    );
-}
\ No newline at end of file
diff --git a/src/components/Main/BreadCrumb/BreadCrumb.module.scss b/src/components/Main/BreadCrumb/BreadCrumb.module.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/Main/Main.module.scss b/src/components/Main/Main.module.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx
deleted file mode 100644
index 2599e83..0000000
--- a/src/components/Main/Main.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from "react";
-
-import "./Main.module.scss";
-
-export const Main = () => {
-    return (
-
-        <div></div>
-
-    );
-}
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index 9bcb06b..b3797f5 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,12 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { Home } from './pages/Home';
 import './index.css';
+import { BrowserRouter } from "react-router-dom"
+import { Routes } from './routes';
 
 
 function App() {
   return (
-    <Home />
+    <BrowserRouter>
+      <Routes />
+    </BrowserRouter>
+
   );
 }
 
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
deleted file mode 100644
index be34808..0000000
--- a/src/pages/Home.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import { Footer } from "../components/Footer/Footer";
-import { Header } from "../components/Header/Header";
-import { Main } from "../components/Main/Main";
-
-
-export const Home = () => {
-    return (
-        <>
-            <Header />
-            <Main />
-            <Footer />
-
-        </>
-    )
-}
\ No newline at end of file
diff --git a/src/pages/Intitucional/Institucional.module.scss b/src/pages/Intitucional/Institucional.module.scss
new file mode 100644
index 0000000..bfac74f
--- /dev/null
+++ b/src/pages/Intitucional/Institucional.module.scss
@@ -0,0 +1,46 @@
+.batata {
+    display: flex;
+    gap: 30px;
+
+    .sideBar {
+        display: flex;
+        flex-direction: column;
+        border-right: 1px solid #000;
+        width: 100%;
+        min-width: 302px;
+        padding: 0;
+
+        @media (min-width:2500px) {}
+
+        @media (max-width:1024px) {
+            min-width: none;
+        }
+
+        &__item {
+            font-family: 'Roboto';
+            font-style: normal;
+            font-weight: 400;
+            text-transform: inherit;
+
+
+            padding: 10px 16px;
+            color: #7D7D7D;
+
+
+            &.ativo {
+                background-color: #000;
+                color: #fff;
+
+                font-weight: 700;
+                font-size: 16px;
+                line-height: 19px;
+
+            }
+        }
+    }
+
+    .content-right {
+        background-color: aquamarine;
+        width: 100%;
+    }
+}
\ No newline at end of file
diff --git a/src/pages/Intitucional/Instituicional.tsx b/src/pages/Intitucional/Instituicional.tsx
new file mode 100644
index 0000000..067db7c
--- /dev/null
+++ b/src/pages/Intitucional/Instituicional.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+import { NavLink, Outlet } from "react-router-dom";
+
+import styleInstitucional from "./Institucional.module.scss"
+
+export const Instituicional = () => {
+
+    return (
+        <>
+            <h1>Institucional</h1>
+            <div className={styleInstitucional["batata"]}>
+                <nav>
+                    <ul className={styleInstitucional["sideBar"]}>
+                        <NavLink
+                            to="sobre"
+                            className={({ isActive }) =>
+                                isActive ? `${styleInstitucional["sideBar__item"]} ${styleInstitucional["ativo"]}` : styleInstitucional["sideBar__item"]
+                            }>
+                            Sobre
+                        </NavLink>
+
+                        <NavLink
+                            to="forma-de-pagamento"
+                            className={({ isActive }) =>
+                                isActive ? `${styleInstitucional["sideBar__item"]} ${styleInstitucional["ativo"]}` : styleInstitucional["sideBar__item"]
+                            }>
+                            Forma de Pagamento
+                        </NavLink>
+
+                        <NavLink
+                            to="entrega"
+                            className={({ isActive }) =>
+                                isActive ? `${styleInstitucional["sideBar__item"]} ${styleInstitucional["ativo"]}` : styleInstitucional["sideBar__item"]
+                            }>
+                            Entrega
+                        </NavLink>
+
+                        <NavLink
+                            to="troca-e-devolucao"
+                            className={({ isActive }) =>
+                                isActive ? `${styleInstitucional["sideBar__item"]} ${styleInstitucional["ativo"]}` : styleInstitucional["sideBar__item"]
+                            }>
+                            Troca e Devolução
+                        </NavLink>
+
+                        <NavLink
+                            to="seguranca-e-privacidade"
+                            className={({ isActive }) =>
+                                isActive ? `${styleInstitucional["sideBar__item"]} ${styleInstitucional["ativo"]}` : styleInstitucional["sideBar__item"]
+                            }>
+                            Segurança e Privacidade
+                        </NavLink>
+
+                        <NavLink
+                            to="contato"
+                            className={({ isActive }) =>
+                                isActive ? `${styleInstitucional["sideBar__item"]} ${styleInstitucional["ativo"]}` : styleInstitucional["sideBar__item"]
+                            }>
+                            Contato
+                        </NavLink>
+
+                    </ul>
+                </nav>
+                <div className={styleInstitucional["content-right"]} >
+                    <Outlet />
+                </div>
+            </div>
+
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/routes.tsx b/src/routes.tsx
new file mode 100644
index 0000000..18bd827
--- /dev/null
+++ b/src/routes.tsx
@@ -0,0 +1,23 @@
+import { Routes as ReactRouterRoutes, Route } from "react-router-dom"
+import { Layout } from "./components/Layout"
+import { Instituicional } from "./pages/Intitucional/Instituicional"
+
+
+
+export const Routes = () => {
+
+    return (
+        <ReactRouterRoutes>
+            <Route path="/" element={<Layout />}>
+                <Route path="institucional" element={<Instituicional />}>
+                    <Route path="sobre" element={<div>Red</div>} />
+                    <Route path="forma-de-pagamento" element={<div>batata2</div>} />
+                    <Route path="entrega" element={<div>batata3</div>} />
+                    <Route path="troca-e-devolucao" element={<div>batata4</div>} />
+                    <Route path="seguranca-e-privacidade" element={<div>batata5</div>} />
+                    <Route path="contato" element={<div>batata6</div>} />
+                </Route>
+            </Route>
+        </ReactRouterRoutes>
+    )
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 116c1af..1804d2d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1612,6 +1612,11 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
+"@remix-run/router@1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.2.1.tgz#812edd4104a15a493dda1ccac0b352270d7a188c"
+  integrity sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==
+
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
@@ -8136,6 +8141,21 @@ react-refresh@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
+react-router-dom@^6.6.2:
+  version "6.6.2"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.6.2.tgz#bbf1f9b45855b218d22fc2d294b79408a084740a"
+  integrity sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==
+  dependencies:
+    "@remix-run/router" "1.2.1"
+    react-router "6.6.2"
+
+react-router@6.6.2:
+  version "6.6.2"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.6.2.tgz#556f7b56cff7fe32c5c02429fef3fcb2ecd08111"
+  integrity sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==
+  dependencies:
+    "@remix-run/router" "1.2.1"
+
 react-scripts@5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003"