diff --git a/src/assets/hamburger-menu.png b/src/assets/hamburger-menu.png
new file mode 100644
index 0000000..3c5ab1b
Binary files /dev/null and b/src/assets/hamburger-menu.png differ
diff --git a/src/components/Apoiadores/style.css b/src/components/Apoiadores/style.css
index 1791fa6..e535d64 100644
--- a/src/components/Apoiadores/style.css
+++ b/src/components/Apoiadores/style.css
@@ -23,7 +23,8 @@
   font-weight: 400;
   margin-top: 20px;
 }
-.logosLinha1 {
+.logosLinha1,
+.logosLinha2 {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -33,12 +34,38 @@
   margin-top: 25px;
 }
 
-.logosLinha2 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .logosLinha2 > img {
   padding: 0vw 4vw 0vw 4vw;
 }
+
+@media (max-width: 1100px) {
+  .apoiadores {
+    max-width: 50%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .apoiadoresTitulo {
+    font-size: 24px;
+  }
+
+  .apoiadoresParagrafo {
+    max-width: 50%;
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  .logosLinha1,
+  .logosLinha2 {
+    flex-direction: column;
+  }
+
+  .logosLinha1 > img,
+  .logosLinha2 > img {
+    padding: 2vw 4vw 5px 4vw;
+    margin-top: 25px;
+  }
+}
\ No newline at end of file
diff --git a/src/components/Buttons/Button/index.jsx b/src/components/Buttons/Button/index.jsx
index 6d23df2..28884a6 100644
--- a/src/components/Buttons/Button/index.jsx
+++ b/src/components/Buttons/Button/index.jsx
@@ -6,7 +6,7 @@ const Button = props => {
     <div>
       <BasicButton
         textContent={props.textContent}
-        fontSize="25px"
+        fontSize={props.fontSize ?? '25px'}
         backgroundColor={props.backgroundColor}
         lineHeigth="30px"
         color={props.color}
diff --git a/src/components/Falae/index.jsx b/src/components/Falae/index.jsx
index 01d832f..6866c37 100644
--- a/src/components/Falae/index.jsx
+++ b/src/components/Falae/index.jsx
@@ -1,10 +1,15 @@
 import './styles.css';
 import { Link } from 'react-router-dom';
 import falaeImg from '../../assets/falae-img.jpg';
+import useWindowDimensions from '../../hooks/UseWindowDimensions';
 import ImagePill from './../ImagePill';
 import MailIcon from './../MailIcon';
 
 const Falae = () => {
+
+  const { width } = useWindowDimensions();
+  const isGreatSize = (width >= 1100);
+
   return (
     <div className="falae-container">
       <div className="texts">
@@ -33,8 +38,8 @@ const Falae = () => {
       <div className="images">
         <div className="falae-rectangle"></div>
         <div className="falae-icon-img">
-          <MailIcon backgroundColor="#17b270" size="160px" />
-          <ImagePill width="345px" height="160px" src={falaeImg} />
+          <MailIcon backgroundColor="#17b270" size={isGreatSize ? '160px' : '105px'} />
+          <ImagePill width={isGreatSize ? '345px' : '230px'} height={isGreatSize ? '160px' : '100px'} src={falaeImg} />
         </div>
       </div>
     </div>
diff --git a/src/components/Falae/styles.css b/src/components/Falae/styles.css
index ef40dcb..dc673d5 100644
--- a/src/components/Falae/styles.css
+++ b/src/components/Falae/styles.css
@@ -93,3 +93,71 @@
 .texts {
   margin-right: 10vw;
 }
+
+@media (max-width: 1100px) {
+  .falae-container {
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    margin-top: 150px;
+    margin-bottom: 100px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .texts {
+    margin-right: 0px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .falae-heading {
+    font-size: 32px;
+  }
+  
+  .falae-text {
+    font-size: 14px;
+    font-weight: 600;
+    max-width: 320px;
+  }
+  
+  .falae-links {
+    max-width: 320px;
+    margin-bottom: 50px;
+  }
+  
+  .falae-duvida {
+    width: 200px;
+    height: 45px;
+    font-size: 14px;
+  }
+  
+  .falae-contato {
+    text-align: center;
+    font-size: 14px;
+  }
+
+  .images {
+    margin: 0 auto;
+    max-width: 320px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .falae-rectangle {
+    width: 95%;
+    height: 100px;
+  }
+
+  .falae-icon-img {
+    align-items: center;
+  }
+
+  .falae-icon-img div {
+    margin-right: 10px;
+  }
+}
\ No newline at end of file
diff --git a/src/components/HeroSection/index.jsx b/src/components/HeroSection/index.jsx
index 835d2b3..8505223 100644
--- a/src/components/HeroSection/index.jsx
+++ b/src/components/HeroSection/index.jsx
@@ -1,39 +1,47 @@
 import './styles.css';
 import criancasCarro from '../../assets/criancas-carro.png';
-import estradaEsq from '../../assets/estrada-1.png';
-import estradaDir from '../../assets/estrada-2.png';
+import estradaDir from '../../assets/estrada-1.png';
+import estradaEsq from '../../assets/estrada-2.png';
 import carro from '../../assets/Jeep.png';
 import naturalPeople from '../../assets/nature-people.png';
 import Button from '../Buttons/Button';
 import IconForm from '../IconForm';
 
 const HeroSection = () => {
+
+  const screenSize = window.screen.width;
+
   return (
     <div className="hero-section">
-      <div id="street1" className="street">
-        {' '}
-        <img alt="estrada" src={estradaDir} />
+      <div className="street">
+        <img alt="estrada" src={estradaEsq} />
       </div>
       <div className="main">
-        <div className="text">
+        <div>
           <div className="row">
-            <span className="main-text">Faça da sua</span>
-            <IconForm src={criancasCarro} margin="10px" image />
-            <span className="main-text">carona</span>
+            <span className="main-text">Faça da sua carona</span>
+            <IconForm
+              src={criancasCarro}
+              width={screenSize > 600 ? '' : '200px'}
+              height={screenSize > 600 ? '74px' : '80px'}
+            />
           </div>
           <div className="row">
             <span className="main-text">uma ação</span>
             <IconForm
               src={carro}
-              widht="153px"
-              height="74px"
-              margin="10px"
+              width={screenSize > 600 ? '' : '120px'}
+              height={screenSize > 600 ? '74px' : '50px'}
+              margin="15px"
+              className="car-icon"
               backgroundColor="#ED8024"
               wide
             />
             <span className="main-text">sustentável</span>
             <IconForm
               src={naturalPeople}
+              width={screenSize > 600 ? '' : '50px'}
+              height={screenSize > 600 ? '' : '50px'}
               margin="10px"
               backgroundColor="#17B270"
               shadow="#6E361F"
@@ -53,9 +61,8 @@ const HeroSection = () => {
           />
         </div>
       </div>
-      <div id="street2" className="street">
-        {' '}
-        <img alt="estrada" src={estradaEsq} />
+      <div className="street">
+        <img alt="estrada" src={estradaDir} />
       </div>
     </div>
   );
diff --git a/src/components/HeroSection/styles.css b/src/components/HeroSection/styles.css
index bd4ef3c..0f0d5e6 100644
--- a/src/components/HeroSection/styles.css
+++ b/src/components/HeroSection/styles.css
@@ -7,37 +7,37 @@
   color: #000000;
 }
 
-body {
-  overflow-x: hidden;
-}
-
 .hero-section {
+  width: 100vw;
   display: flex;
   margin-top: 100px;
   flex-direction: row;
   justify-content: space-between;
+  align-items: center;
 }
-.main {
-  translate: 0 2rem;
-  align-self: flex-end;
-  flex-direction: column;
-  width: 100%;
-  overflow-x: auto;
+
+.street {
+  max-width: 70%;
 }
 
-.div text {
-  padding: 0px 0px 0px 0px;
+.main {
+  text-align: center;
+  max-width: 80%;
 }
 
 .row {
-  margin-top: 0.5rem;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
+  flex-wrap: wrap;
 }
-.street {
-  align-self: center;
+
+.row
+.main-text {
+  font-size: 64px;
+  font-weight: 700;
+  line-height: 74.82px;
 }
 
 .subtext {
@@ -56,3 +56,29 @@ body {
   margin-top: 40px;
   margin-bottom: 80px;
 }
+
+@media (max-width: 1100px) {
+  .street {
+    display: none;
+  }
+
+  .hero-section {
+    margin: 0 auto;
+    width: 100vw;
+    display: block;
+    margin-top: 50px;
+  }
+
+  .row
+  .main-text {
+    font-size: 30px;
+  }
+
+  .main {
+    margin: 0 auto;
+  }
+
+  .subtext {
+    font-size: 16px;
+  }
+}
diff --git a/src/components/NossoFoco/index.jsx b/src/components/NossoFoco/index.jsx
index 3fac0a4..bba5358 100644
--- a/src/components/NossoFoco/index.jsx
+++ b/src/components/NossoFoco/index.jsx
@@ -4,9 +4,13 @@ import integracao from '../../assets/svg_integracao.svg';
 import seguranca from '../../assets/svg_seguranca.svg';
 import sustentabilidade from '../../assets/svg_sustentabilidade.svg';
 import tempo from '../../assets/svg_tempo.svg';
+import useWindowDimensions from '../../hooks/UseWindowDimensions';
 import Chip from '../Chip';
 
 const NossoFoco = () => {
+  const { width } = useWindowDimensions();
+  const isGreatSize = (width >= 1200);
+
   return (
     <div className="container">
       <div className="textArea">
@@ -14,10 +18,12 @@ const NossoFoco = () => {
       </div>
       <div className="chipArea">
         <div className="firstLine">
-          <Chip
-            width="250px"
-            background="linear-gradient(268.85deg, #DFDFDF 5.64%, rgba(223, 223, 223, 0) 99.02%)"
-          />
+          {isGreatSize ?
+            <Chip
+              width="250px"
+              background="linear-gradient(268.85deg, #DFDFDF 5.64%, rgba(223, 223, 223, 0) 99.02%)"
+            />
+          : null}
           <Chip
             textContent="Sustentabilidade"
             backgroundColor="#17B270"
@@ -41,21 +47,29 @@ const NossoFoco = () => {
             imgSrc={tempo}
             imgSize="35px"
           />
-          <Chip width="250px" background="#DFDFDF" />
-          <Chip
-            width="30px"
-            background="linear-gradient(270deg, rgba(223, 223, 223, 0) 46.98%, #DFDFDF 100%)"
-            borderRadius="200px 0 0 200px"
-          />
+          {isGreatSize ?
+            <>
+              <Chip width="250px" background="#DFDFDF" />
+              <Chip
+                width="30px"
+                background="linear-gradient(270deg, rgba(223, 223, 223, 0) 46.98%, #DFDFDF 100%)"
+                borderRadius="200px 0 0 200px"
+              />
+            </>
+          : null}
         </div>
 
         <div className="secondLine">
-          <Chip
-            width="50px"
-            background="linear-gradient(268.85deg, #DFDFDF 5.64%, rgba(223, 223, 223, 0) 99.02%)"
-            borderRadius="0 200px 200px 0"
-          />
-          <Chip width="230px" background="#DFDFDF" />
+        {isGreatSize ?
+          <>
+            <Chip
+              width="50px"
+              background="linear-gradient(268.85deg, #DFDFDF 5.64%, rgba(223, 223, 223, 0) 99.02%)"
+              borderRadius="0 200px 200px 0"
+            />
+            <Chip width="230px" background="#DFDFDF" />
+          </>
+        : null}
           <Chip
             textContent="Centralização"
             backgroundColor="#EB72AC"
@@ -70,12 +84,16 @@ const NossoFoco = () => {
             imgSrc={integracao}
             imgSize="25px"
           />
-          <Chip width="185px" background="#DFDFDF" />
-          <Chip
-            width="70px"
-            background="linear-gradient(270deg, rgba(223, 223, 223, 0) 46.98%, #DFDFDF 100%)"
-            borderRadius="200px 0 0 200px"
-          />
+          {isGreatSize ?
+            <>
+              <Chip width="185px" background="#DFDFDF" />
+              <Chip
+                width="70px"
+                background="linear-gradient(270deg, rgba(223, 223, 223, 0) 46.98%, #DFDFDF 100%)"
+                borderRadius="200px 0 0 200px"
+              />
+            </>
+          : null}
         </div>
       </div>
     </div>
diff --git a/src/components/NossoFoco/styles.css b/src/components/NossoFoco/styles.css
index 63fcaf1..a68422a 100644
--- a/src/components/NossoFoco/styles.css
+++ b/src/components/NossoFoco/styles.css
@@ -10,7 +10,6 @@ body {
 }
 
 .container {
-  width: 100vw;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -19,7 +18,6 @@ body {
 }
 
 .chipArea {
-  width: 100vw;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -69,3 +67,35 @@ body {
   align-items: center;
   justify-content: center;
 }
+
+@media (max-width: 1100px) {
+  .container {
+    margin-top: 100px !important;
+  }
+
+  .textArea {
+    margin-left: 100px;
+  }
+
+  .text {
+    font-weight: 700;
+    font-size: 42px;
+  }
+
+  .firstLine,
+  .secondLine {
+    width: 100%;
+    gap: 15px;
+    margin-bottom: 15px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .chip {
+    width: 95%;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
\ No newline at end of file
diff --git a/src/components/Projeto/style.css b/src/components/Projeto/style.css
index 4fd336f..527fb56 100644
--- a/src/components/Projeto/style.css
+++ b/src/components/Projeto/style.css
@@ -67,3 +67,63 @@
   text-decoration: none;
   font-weight: 800;
 }
+
+@media (max-width: 1200px) {
+  .projeto {
+    margin: 0 auto;
+    flex-direction: column;
+  }
+
+  .projeto
+  .photo
+  img {
+    width: 65%;
+  }
+
+  .photo {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .numbers {
+    justify-content: center;
+  }
+
+  .numbers > p {
+    font-family: 'Lato', sans-serif;
+    text-align: center;
+    font-size: 16px;
+    font-weight: 700;
+    padding: 15px 20px;
+  }
+  
+  .numbers > p > h1 {
+    font-family: 'Lato', sans-serif;
+    font-size: 18px;
+    font-weight: 800;
+  }
+
+  .text {
+    padding-left: 0px;
+    width: 320px;
+  }
+
+  .text > h3 {
+    font-size: 32px;
+    text-align: center;
+  }
+
+  .btn-carona {
+    margin-left: 12px;
+  }
+  
+  .textButton {
+    font-size: 16px;
+    color: #2b388a;
+    padding-left: 60px;
+    text-decoration: none;
+    font-weight: 800;
+  }
+}
diff --git a/src/components/SolucoesDoCaronae/index.jsx b/src/components/SolucoesDoCaronae/index.jsx
index 8982dd7..0252c58 100644
--- a/src/components/SolucoesDoCaronae/index.jsx
+++ b/src/components/SolucoesDoCaronae/index.jsx
@@ -1,6 +1,7 @@
 import './styles.css';
 import { Link } from 'react-router-dom';
 import pontoImg from '../../assets/ponto-caronae.png';
+import useWindowDimensions from '../../hooks/UseWindowDimensions';
 
 export default function SolucoesDoCaronae() {
   return (
@@ -51,11 +52,14 @@ const PontoImg = () => {
 };
 
 const VideoEmbutido = ({ videoURL }) => {
+  const { width } = useWindowDimensions();
+  const isGreatSize = (width >= 1100);
+
   return (
     <div className="video-embutido">
       <iframe
         className="video"
-        width="560"
+        width={isGreatSize ? '560' : '300'}
         height="315"
         src={`${videoURL}?rel=0&modestbranding=1&controls=0`}
         title="Caronaê"
diff --git a/src/components/SolucoesDoCaronae/styles.css b/src/components/SolucoesDoCaronae/styles.css
index f097680..a562b0d 100644
--- a/src/components/SolucoesDoCaronae/styles.css
+++ b/src/components/SolucoesDoCaronae/styles.css
@@ -122,3 +122,44 @@ p {
   font-weight: 600;
   line-height: 140%; /* 22.4px */
 }
+
+@media (max-width: 1100px) {
+  .solucoes-do-caronae {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    max-width: 30%;
+    margin-top: 200px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .linha-1,
+  .linha-2 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 30px;
+  }
+
+  .titulo, 
+  .pontos-de-carona, 
+  .ponto-img, 
+  .video-embutido,
+  .info-app {
+    margin-bottom: 32px;
+    max-width: 300px;
+  }
+
+  .titulo { 
+    margin-left: 32px;
+  }
+
+  .titulo h1 {
+    font-size: 24px;
+  }
+
+  .video-embutido {
+    min-width: 0px;
+  }
+}
\ No newline at end of file
diff --git a/src/hooks/UseWindowDimensions.jsx b/src/hooks/UseWindowDimensions.jsx
new file mode 100644
index 0000000..d5fe79b
--- /dev/null
+++ b/src/hooks/UseWindowDimensions.jsx
@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+
+export default function useWindowDimensions() {
+    const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+
+    useEffect(() => {
+        function handleResize() {
+        setWindowDimensions(getWindowDimensions());
+        }
+
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    return windowDimensions;
+}
+
+function getWindowDimensions() {
+    const { innerWidth: width, innerHeight: height } = window;
+    return {
+        width,
+        height
+    };
+}
\ No newline at end of file