diff --git a/src/components/VaDeCaronae/VaDeCaronae.module.css b/src/components/VaDeCaronae/VaDeCaronae.module.css
new file mode 100644
index 0000000..f84fc2c
--- /dev/null
+++ b/src/components/VaDeCaronae/VaDeCaronae.module.css
@@ -0,0 +1,229 @@
+@media only screen and (max-width: 1500px) {
+    .vaDeCaronae { scale: 60%; }
+}
+
+.vaDeCaronae {
+    position: relative;
+    overflow: hidden;
+    margin-top: 100px;
+    margin-bottom: 100px;
+    width: 1370px;
+    height: 640px;
+    border-radius: 20px;
+    background-color: rgb(43, 56, 138);
+}
+
+.heading {
+    position: absolute;
+    top: 230px;
+    left: 65px;
+}
+
+.heading h1 {
+    font-family: Karla, sans-serif;
+    font-weight: 700;
+    color: rgb(254, 254, 254);
+    font-size: 60px;
+}
+
+.heading h2 {
+    font-family: Karla, sans-serif;
+    font-weight: 700;
+    color: rgb(254, 254, 254);
+    font-size: 32px;
+}
+
+.circleOuter {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: -30px;
+    left: 650px;
+    width: 700px;
+    height: 700px;
+    border-radius: 50%;
+    background-color: rgb(50, 64, 153);
+}
+
+.circleInner {
+    position: relative;
+    display: flex;
+    width: 560px;
+    height: 560px;
+    border-radius: 50%;
+    background-color: rgb(62, 75, 154);
+}
+
+.storeButton {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    justify-content: center;
+    align-items: center;
+    background-color: rgb(23, 23, 23);
+    width: 145px;
+    height: 50px;
+    border-radius: 5px;
+}
+
+.buttonSmallText {
+    margin: 0px;
+    padding: 0px;
+    line-height: 100%;
+    font-family: Karla, sans-serif;
+    font-size: 10px;
+    font-weight: 700;
+    color: rgb(254, 254, 254);
+}
+
+.buttonLargeText {
+    margin: 0px;
+    padding: 0px;
+    line-height: 100%;
+    letter-spacing: -0.5px;
+    font-family: Karla, sans-serif;
+    font-size: 16px;
+    font-weight: 700;
+    color: rgb(254, 254, 254);
+}
+
+.roads {
+    position: absolute;
+    top: 425px;
+    left: 60px;
+    border-radius: 5px;
+    display: flex;
+    flex-direction: row;
+}
+
+.verticalRoad {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 35px;
+    background-color: rgb(23, 23, 23);
+    width: 80px;
+    height: 250px;
+    border-radius: 20px 0 0 0;
+}
+
+.verticalDash {
+    position: relative;
+    background-color: rgb(255, 255, 255);
+    left: 17px;
+    top: 60px;
+    height: 50px;
+    width: 6px;
+    border-radius: 6px;
+}
+
+.verticalRoadBackground {
+    position: absolute;
+    background-color: rgb(43, 56, 138);
+    top: 50px;
+    left: 40px;
+    border-radius: 20px 0 0 0;
+    width: 40px;
+    height: 200px;
+}
+
+.horizontalRoad {
+    position: relative;
+    display: flex;
+    gap: 35px;
+    background-color: rgb(23, 23, 23);
+    height: 50px;
+    width: 350px;
+    border-radius: 0 20px 20px 0;
+}
+
+.horizontalDash {
+    position: relative;
+    background-color: rgb(255, 255, 255);
+    left: 17px;
+    top: 22px;
+    height: 6px;
+    width: 50px;
+    border-radius: 6px;
+}
+
+.iphoneFront {
+    position: absolute;
+    left: 825px;
+    top: 120px;
+}
+
+.iphoneSide {
+    position: absolute;
+    left: 1050px;
+    top: 160px;
+}
+
+.peopleIcon {
+    position: absolute;
+    top: 80px;
+    left: 750px;
+    display: flex;
+    background-color: rgb(235, 114, 172);
+    align-items: center;
+    justify-content: center;
+    height: 90px;
+    width: 140px;
+    min-width: 90px;
+    border-radius: 90px;
+}
+
+.peopleIcon img {
+    width: 40px;
+}
+
+.shieldIcon {
+    position: absolute;
+    top: 400px;
+    left: 760px;
+    display: flex;
+    background-color: rgb(110, 54, 31);
+    align-items: center;
+    justify-content: center;
+    height: 90px;
+    width: 90px;
+    min-width: 90px;
+    border-radius: 90px;
+}
+
+.shiledIcon img {
+    width: 27px;
+}
+
+.leafIcon {
+    position: absolute;
+    top: 110px;
+    left: 1180px;
+    display: flex;
+    background-color: rgb(23, 178, 112);
+    align-items: center;
+    justify-content: center;
+    height: 90px;
+    width: 90px;
+    min-width: 90px;
+    border-radius: 90px;
+}
+
+.leafIcon img {
+    width: 27px;
+}
+
+.carIcon {
+    position: absolute;
+    top: 460px;
+    left: 1080px;
+    display: flex;
+    background-color: rgb(237, 128, 36);
+    align-items: center;
+    justify-content: center;
+    height: 90px;
+    width: 180px;
+    min-width: 90px;
+    border-radius: 90px;
+}
diff --git a/src/components/VaDeCaronae/index.jsx b/src/components/VaDeCaronae/index.jsx
index e16c1ff..932069f 100644
--- a/src/components/VaDeCaronae/index.jsx
+++ b/src/components/VaDeCaronae/index.jsx
@@ -1,54 +1,38 @@
 import appleLogo from '../../assets/apple_logo.svg';
 import iphoneFront from '../../assets/iphone_front.png';
 import iphoneSide from '../../assets/iphone_side.png';
-import jeepIcon from '../../assets/jeep-icon.svg';
-import leafIcon from '../../assets/leaf_white.svg';
-import peopleIcon from '../../assets/people_blue.svg';
+import jeepIconImg from '../../assets/jeep-icon.svg';
+import leafIconImg from '../../assets/leaf_white.svg';
+import peopleIconImg from '../../assets/people_blue.svg';
 import playStoreLogo from '../../assets/play_store_logo.svg';
-import shieldIcon from '../../assets/shield_white.svg';
-import windIcon from '../../assets/wind-icon.svg';
-import { colors, styles } from './styles';
+import shieldIconImg from '../../assets/shield_white.svg';
+import windIconImg from '../../assets/wind-icon.svg';
+import styles from './VaDeCaronae.module.css';
 
 const URLCaronaeAppleAppStore = 'https://www.apple.com/app-store/';
 const URLCaronaeGooglePlayStore = 'https://play.google.com/';
 
 export default function VaDeCaronae () {
   return (
-    <div style={ styles.vaDeCaronae }>
+    <div className={ styles.vaDeCaronae }>
       <Headings />
       <BackgroundCircles />
       <Roads />
-      <Icon src={ peopleIcon }
-            backgroundColor={ colors.peopleIconBackground }
-            imgSize="40px"
-            width="140px"
-            top="80px"
-            left="750px" />
-      <Icon src={ shieldIcon }
-            backgroundColor={ colors.shieldIconBackground }
-            imgSize="27px"
-            top="400px"
-            left="760px" />
-      <Icon src={ leafIcon }
-            backgroundColor={ colors.leafIconBackground }
-            top="110px"
-            left="1180px" />
+      <PeopleIcon />
+      <ShieldIcon />
+      <LeafIcon />
       <IphoneFront />
       <IphoneSide />
-      <DoubleIcon src={ [windIcon, jeepIcon] }
-                  backgroundColor={ colors.jeepIconBackground }
-                  width="180px"
-                  top="460px"
-                  left="1080px" />
+      <CarIcon />
     </div>
   );
 }
 
 const Headings = () => {
   return (
-    <div style={ styles.heading }>
-      <h2 style={ styles.h2 }>Juntos vamos mais longe,</h2>
-      <h1 style={ styles.h1 }>Vá de Caronaê!</h1>
+    <div className={ styles.heading }>
+      <h2>Juntos vamos mais longe,</h2>
+      <h1>Vá de Caronaê!</h1>
     </div>
   );
 };
@@ -56,8 +40,8 @@ const Headings = () => {
 const BackgroundCircles = () => {
   return (
     <>
-      <div style={ styles.circleOuter }>
-        <div style={ styles.circleInner } />
+      <div className={ styles.circleOuter }>
+        <div className={ styles.circleInner } />
       </div>
     </>
   );
@@ -65,11 +49,11 @@ const BackgroundCircles = () => {
 
 const StoreButton = (props) => {
   return (
-    <a style={ styles.storeButton } href={ props.href }>
+    <a className={ styles.storeButton } href={ props.href }>
       <img src={ props.storeLogo } />
       <div>
-        <p style={ styles.buttonSmallText }>Disponível na</p>
-        <p style={ styles.buttonLargeText }>{ props.storeName }</p>
+        <p className={ styles.buttonSmallText }>Disponível na</p>
+        <p className={ styles.buttonLargeText }>{ props.storeName }</p>
       </div>
     </a>
   );
@@ -77,7 +61,7 @@ const StoreButton = (props) => {
 
 const Roads = () => {
   return (
-    <div style={ styles.roads }>
+    <div className={ styles.roads }>
       <VerticalRoad />
       <div style={{ display: 'flex', gap: '40px', position: 'relative', left: '-60px' }} >
         <StoreButton storeName="App Store" storeLogo={ appleLogo }
@@ -94,66 +78,61 @@ const Roads = () => {
 
 const VerticalRoad = () => {
   return (
-    <div style={ styles.verticalRoad } >
-      <div style={ styles.verticalDash } />
-      <div style={ styles.verticalDash } />
-      <div style={ styles.verticalRoadBackground } />
+    <div className={ styles.verticalRoad } >
+      <div className={ styles.verticalDash } />
+      <div className={ styles.verticalDash } />
+      <div className={ styles.verticalRoadBackground } />
     </div>
   );
 };
 
 const HorizontalRoad = () => {
   return (
-    <div style={ styles.horizontalRoad } >
-      <div style={ styles.horizontalDash } />
-      <div style={ styles.horizontalDash } />
-      <div style={ styles.horizontalDash } />
-      <div style={ styles.horizontalDash } />
+    <div className={ styles.horizontalRoad } >
+      <div className={ styles.horizontalDash } />
+      <div className={ styles.horizontalDash } />
+      <div className={ styles.horizontalDash } />
+      <div className={ styles.horizontalDash } />
     </div>
   );
 };
 
-const Icon = (props) => {
+const PeopleIcon = () => {
   return (
-    <div style={{ position: 'absolute',
-                  top: props.top,
-                  left: props.left,
-                  display: 'flex',
-                  backgroundColor: props.backgroundColor,
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  height: '90px',
-                  width: props.width,
-                  minWidth: '90px',
-                  borderRadius: '90px' }} >
-      <img style={{ width: props.imgSize }} src={ props.src } />
+    <div className={ styles.peopleIcon }>
+      <img src={ peopleIconImg } />
     </div>
   );
 };
 
-const DoubleIcon = (props) => {
+const ShieldIcon = () => {
   return (
-    <div style={{ position: 'absolute',
-                  display: 'flex',
-                  top: props.top,
-                  left: props.left,
-                  backgroundColor: props.backgroundColor,
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  height: '90px',
-                  width: 'fit-content',
-                  minWidth: props.width,
-                  padding: '0 40px',
-                  borderRadius: '90px' }} >
-      <img style={{ width: props.imgSize }} src={ props.src[0] } />
-      <img style={{ width: props.imgSize }} src={ props.src[1] } />
+    <div className={ styles.shieldIcon }>
+      <img src={ shieldIconImg } />
+    </div>
+  );
+};
+
+const LeafIcon = () => {
+  return (
+    <div className={ styles.leafIcon }>
+      <img src={ leafIconImg } />
+    </div>
+  );
+};
+
+const CarIcon = () => {
+  return (
+    <div className={ styles.carIcon }>
+      <img src={ windIconImg } />
+      <img src={ jeepIconImg } />
     </div>
   );
 };
 
 const IphoneFront = () => {
   return (
-    <div style={ styles.iphoneFront } >
+    <div className={ styles.iphoneFront } >
       <img src={ iphoneFront } />
     </div>
   );
@@ -161,7 +140,7 @@ const IphoneFront = () => {
 
 const IphoneSide = () => {
   return (
-    <div style={ styles.iphoneSide } >
+    <div className={ styles.iphoneSide } >
       <img src={ iphoneSide } />
     </div>
   );
diff --git a/src/components/VaDeCaronae/styles.jsx b/src/components/VaDeCaronae/styles.jsx
deleted file mode 100644
index 3bb7601..0000000
--- a/src/components/VaDeCaronae/styles.jsx
+++ /dev/null
@@ -1,175 +0,0 @@
-const colors = {
-  background1: 'rgb(43, 56, 138)',
-  background2: 'rgb(50, 64, 153)',
-  background3: 'rgb(62, 75, 154',
-  text: 'rgb(254, 254, 254)',
-  highlight: 'rgb(255, 255, 255)',
-  shadow: 'rgb(23, 23, 23)',
-  peopleIconBackground: 'rgb(235, 114, 172)',
-  shieldIconBackground: 'rgb(110, 54, 31)',
-  leafIconBackground: 'rgb(23, 178, 112)',
-  jeepIconBackground: 'rgb(237, 128, 36)'
-};
-
-const styles = {
-
-  vaDeCaronae: {
-    position: 'relative',
-    overflow: 'hidden',
-    marginTop: '100px',
-    marginBottom: '100px',
-    width: '1370px',
-    height: '640px',
-    borderRadius: '20px',
-    backgroundColor: colors.background1
-  },
-
-  heading: {
-    position: 'absolute',
-    top: '230px',
-    left: '65px'
-  },
-
-  h1: {
-    fontFamily: 'Karla, sans-serif',
-    fontWeight: '700',
-    color: colors.text,
-    fontSize: '60px'
-  },
-
-  h2: {
-    fontFamily: 'Karla, sans-serif',
-    fontWeight: '700',
-    color: colors.text,
-    fontSize: '32px'
-  },
-
-  circleOuter: {
-    position: 'absolute',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    top: '-30px',
-    left: '650px',
-    width: '700px',
-    height: '700px',
-    borderRadius: '50%',
-    backgroundColor: colors.background2
-  },
-
-  circleInner: {
-    position: 'relative',
-    display: 'flex',
-    width: '560px',
-    height: '560px',
-    borderRadius: '50%',
-    backgroundColor: colors.background3
-  },
-
-  storeButton: {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: '10px',
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: colors.shadow,
-    width: '145px',
-    height: '50px',
-    borderRadius: '5px'
-  },
-
-  buttonSmallText: {
-    margin: '0px',
-    padding: '0px',
-    lineHeight: '100%',
-    fontFamily: 'Karla, sans-serif',
-    fontSize: '10px',
-    fontWeight: '700',
-    color: colors.text
-  },
-
-  buttonLargeText: {
-    margin: '0px',
-    padding: '0px',
-    lineHeight: '100%',
-    letterSpacing: '-0.5px',
-    fontFamily: 'Karla, sans-serif',
-    fontSize: '16px',
-    fontWeight: '700',
-    color: colors.text
-  },
-
-  roads: {
-    position: 'absolute',
-    top: '425px',
-    left: '60px',
-    borderRadius: '5px',
-    display: 'flex',
-    flexDirection: 'row'
-  },
-
-  verticalRoad: {
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '35px',
-    backgroundColor: colors.shadow,
-    width: '80px',
-    height: '250px',
-    borderRadius: '20px 0 0 0'
-  },
-
-  verticalDash: {
-    position: 'relative',
-    backgroundColor: colors.highlight,
-    left: '17px',
-    top: '60px',
-    height: '50px',
-    width: '6px',
-    borderRadius: '6px'
-  },
-
-  verticalRoadBackground: {
-    position: 'absolute',
-    backgroundColor: colors.background1,
-    top: '50px',
-    left: '40px',
-    borderRadius: '20px 0 0 0',
-    width: '40px',
-    height: '200px'
-  },
-
-  horizontalRoad: {
-    position: 'relative',
-    display: 'flex',
-    gap: '35px',
-    backgroundColor: colors.shadow,
-    height: '50px',
-    width: '350px',
-    borderRadius: '0 20px 20px 0'
-  },
-
-  horizontalDash: {
-    position: 'relative',
-    backgroundColor: colors.highlight,
-    left: '17px',
-    top: '22px',
-    height: '6px',
-    width: '50px',
-    borderRadius: '6px'
-  },
-
-  iphoneFront: {
-    position: 'absolute',
-    left: '825px',
-    top: '120px'
-  },
-
-  iphoneSide: {
-    position: 'absolute',
-    left: '1050px',
-    top: '160px'
-  }
-};
-
-export { colors, styles };