diff --git a/components/MetricsBox.js b/components/MetricsBox.js
index cd3c920..f21c06b 100644
--- a/components/MetricsBox.js
+++ b/components/MetricsBox.js
@@ -9,48 +9,60 @@ import MetricCard from "./MetricsCard";
 
 import styles from "./MetricsBox.module.css";
 
-const MetricsBox = ({ data, systemUsed }) => {
+const MetricsBox = ({ weatherData, systemUsed }) => {
   return (
     <div className={styles.wrapper}>
       <MetricCard
         title={"Humidity"}
         iconSrc={"/icons/humidity.png"}
-        metric={data.main.humidity}
+        metric={weatherData.main.humidity}
         unit={"%"}
       />
 
       <MetricCard
         title={"Wind speed"}
         iconSrc={"/icons/wind.png"}
-        metric={getWindSpeed(systemUsed, data.wind.speed)}
+        metric={getWindSpeed(systemUsed, weatherData.wind.speed)}
         unit={systemUsed == "metric" ? "m/s" : "m/h"}
       />
 
       <MetricCard
         title={"Wind direction"}
         iconSrc={"/icons/compass.png"}
-        metric={degToCompass(data.wind.deg)}
+        metric={degToCompass(weatherData.wind.deg)}
       />
 
       <MetricCard
         title={"Visibility"}
         iconSrc={"/icons/binocular.png"}
-        metric={getVisibility(systemUsed, data.visibility)}
+        metric={getVisibility(systemUsed, weatherData.visibility)}
         unit={systemUsed == "metric" ? "km" : "miles"}
       />
 
       <MetricCard
         title={"Sunrise"}
         iconSrc={"/icons/sunrise.png"}
-        metric={getTime(systemUsed, data.sys.sunrise, data.timezone)}
-        unit={getAMPM(systemUsed, data.sys.sunrise, data.timezone)}
+        metric={getTime(
+          systemUsed,
+          weatherData.sys.sunrise,
+          weatherData.timezone
+        )}
+        unit={getAMPM(
+          systemUsed,
+          weatherData.sys.sunrise,
+          weatherData.timezone
+        )}
       />
 
       <MetricCard
         title={"Sunset"}
         iconSrc={"/icons/sunset.png"}
-        metric={getTime(systemUsed, data.sys.sunset, data.timezone)}
-        unit={getAMPM(systemUsed, data.sys.sunset, data.timezone)}
+        metric={getTime(
+          systemUsed,
+          weatherData.sys.sunset,
+          weatherData.timezone
+        )}
+        unit={getAMPM(systemUsed, weatherData.sys.sunset, weatherData.timezone)}
       />
     </div>
   );
diff --git a/pages/index.js b/pages/index.js
index b3433b2..11c90d0 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -6,7 +6,6 @@ import Header from "../components/Header";
 import DateAndTime from "../components/DateAndTime";
 import Search from "../components/Search";
 import MetricsBox from "../components/MetricsBox";
-import MetricsCard from "../components/MetricsCard";
 import UnitSwitch from "../components/UnitSwitch";
 import LoadingScreen from "../components/LoadingScreen";
 import ErrorScreen from "../components/ErrorScreen";
@@ -65,7 +64,7 @@ const App = () => {
             }}
           />
         </Header>
-        <MetricsBox data={weatherData} systemUsed={systemUsed} />
+        <MetricsBox weatherData={weatherData} systemUsed={systemUsed} />
         <UnitSwitch onClick={changeSystem} systemUsed={systemUsed} />
       </ContentBox>
     </div>