diff --git a/components/MetricCard.js b/components/MetricCard.js
index 04a4869..be92797 100644
--- a/components/MetricCard.js
+++ b/components/MetricCard.js
@@ -1,6 +1,8 @@
 import Image from "next/image";
 
-const MetricCard = ({ title, iconSrc, metric, unit = "", styles }) => {
+import styles from "./MetricCard.module.css";
+
+const MetricCard = ({ title, iconSrc, metric, unit = "" }) => {
   return (
     <div className={styles.statsCard}>
       <p>{title}</p>
diff --git a/components/MetricCard.module.css b/components/MetricCard.module.css
new file mode 100644
index 0000000..fca344a
--- /dev/null
+++ b/components/MetricCard.module.css
@@ -0,0 +1,16 @@
+.statsCard {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 20px;
+  padding: 20px;
+}
+
+.statsCardContent {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+@media only screen and (max-width: 475px) {
+  .statsCardContent {
+    grid-template-columns: 1fr 2fr;
+  }
+}
diff --git a/components/Metrics.jsx b/components/Metrics.js
similarity index 88%
rename from components/Metrics.jsx
rename to components/Metrics.js
index 2996cdd..45afe98 100644
--- a/components/Metrics.jsx
+++ b/components/Metrics.js
@@ -7,7 +7,9 @@ import {
 } from "../services/utils";
 import MetricCard from "./MetricCard";
 
-const Metrics = ({ styles, data, systemUsed }) => {
+import styles from "./Metrics.module.css";
+
+const Metrics = ({ data, systemUsed }) => {
   return (
     <div className={styles.statsBox}>
       <MetricCard
@@ -15,7 +17,6 @@ const Metrics = ({ styles, data, systemUsed }) => {
         iconSrc={"/icons/humidity.png"}
         metric={data.main.humidity}
         unit={"%"}
-        styles={styles}
       />
 
       <MetricCard
@@ -23,14 +24,12 @@ const Metrics = ({ styles, data, systemUsed }) => {
         iconSrc={"/icons/wind.png"}
         metric={getWindSpeed(systemUsed, data.wind.speed)}
         unit={systemUsed == "metric" ? "m/s" : "m/h"}
-        styles={styles}
       />
 
       <MetricCard
         title={"Wind direction"}
         iconSrc={"/icons/compass.png"}
         metric={degToCompass(data.wind.deg)}
-        styles={styles}
       />
 
       <MetricCard
@@ -38,7 +37,6 @@ const Metrics = ({ styles, data, systemUsed }) => {
         iconSrc={"/icons/binocular.png"}
         metric={getVisibility(systemUsed, data.visibility)}
         unit={systemUsed == "metric" ? "km" : "miles"}
-        styles={styles}
       />
 
       <MetricCard
@@ -46,7 +44,6 @@ const Metrics = ({ styles, data, systemUsed }) => {
         iconSrc={"/icons/sunrise.png"}
         metric={getTime(systemUsed, data.sys.sunrise, data.timezone)}
         unit={getAMPM(systemUsed, data.sys.sunrise, data.timezone)}
-        styles={styles}
       />
 
       <MetricCard
@@ -54,7 +51,6 @@ const Metrics = ({ styles, data, systemUsed }) => {
         iconSrc={"/icons/sunset.png"}
         metric={getTime(systemUsed, data.sys.sunset, data.timezone)}
         unit={getAMPM(systemUsed, data.sys.sunset, data.timezone)}
-        styles={styles}
       />
     </div>
   );
diff --git a/components/Metrics.module.css b/components/Metrics.module.css
new file mode 100644
index 0000000..c5d405e
--- /dev/null
+++ b/components/Metrics.module.css
@@ -0,0 +1,19 @@
+.statsBox {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 20px;
+  border-radius: 20px;
+  margin-bottom: 20px;
+}
+
+@media only screen and (max-width: 600px) {
+  .statsBox {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media only screen and (max-width: 475px) {
+  .statsBox {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/pages/index.js b/pages/index.js
index 4e1ec48..f7a5165 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -129,7 +129,7 @@ const App = () => {
           />
         </div>
 
-        <Metrics styles={styles} data={weatherData} systemUsed={systemUsed} />
+        <Metrics data={weatherData} systemUsed={systemUsed} />
         <SwitchBox onClick={changeSystem} systemUsed={systemUsed} />
       </div>
     </div>
diff --git a/styles/Home.module.css b/styles/Home.module.css
index 50e965f..6b94ff0 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -42,25 +42,6 @@
   gap: 20px;
 }
 
-.statsBox {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 20px;
-  border-radius: 20px;
-  margin-bottom: 20px;
-}
-
-.statsCard {
-  background: rgba(255, 255, 255, 0.95);
-  border-radius: 20px;
-  padding: 20px;
-}
-
-.statsCardContent {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
-
 .mainTemp {
   font-size: 84px;
 }
@@ -96,10 +77,6 @@
     margin: 0 auto;
     border-radius: 0;
   }
-
-  .statsBox {
-    grid-template-columns: 1fr 1fr;
-  }
 }
 
 @media only screen and (max-width: 520px) {
@@ -112,13 +89,3 @@
     width: 100%;
   }
 }
-
-@media only screen and (max-width: 475px) {
-  .statsBox {
-    grid-template-columns: 1fr;
-  }
-
-  .statsCardContent {
-    grid-template-columns: 1fr 2fr;
-  }
-}