diff --git a/components/Metrics.js b/components/MetricsBox.js
similarity index 89%
rename from components/Metrics.js
rename to components/MetricsBox.js
index 45afe98..9b1a24c 100644
--- a/components/Metrics.js
+++ b/components/MetricsBox.js
@@ -5,11 +5,11 @@ import {
   getVisibility,
   getWindSpeed,
 } from "../services/utils";
-import MetricCard from "./MetricCard";
+import MetricCard from "./MetricsCard";
 
-import styles from "./Metrics.module.css";
+import styles from "./MetricsBox.module.css";
 
-const Metrics = ({ data, systemUsed }) => {
+const MetricsBox = ({ data, systemUsed }) => {
   return (
     <div className={styles.statsBox}>
       <MetricCard
@@ -56,4 +56,4 @@ const Metrics = ({ data, systemUsed }) => {
   );
 };
 
-export default Metrics;
+export default MetricsBox;
diff --git a/components/Metrics.module.css b/components/MetricsBox.module.css
similarity index 100%
rename from components/Metrics.module.css
rename to components/MetricsBox.module.css
diff --git a/components/MetricCard.js b/components/MetricsCard.js
similarity index 71%
rename from components/MetricCard.js
rename to components/MetricsCard.js
index 1ea1683..b0d9deb 100644
--- a/components/MetricCard.js
+++ b/components/MetricsCard.js
@@ -1,8 +1,8 @@
 import Image from "next/image";
 
-import styles from "./MetricCard.module.css";
+import styles from "./MetricsCard.module.css";
 
-const MetricCard = ({ title, iconSrc, metric, unit }) => {
+const MetricsCard = ({ title, iconSrc, metric, unit }) => {
   return (
     <div className={styles.statsCard}>
       <p>{title}</p>
@@ -17,4 +17,4 @@ const MetricCard = ({ title, iconSrc, metric, unit }) => {
   );
 };
 
-export default MetricCard;
+export default MetricsCard;
diff --git a/components/MetricCard.module.css b/components/MetricsCard.module.css
similarity index 100%
rename from components/MetricCard.module.css
rename to components/MetricsCard.module.css
diff --git a/pages/index.js b/pages/index.js
index 4d07568..2fb8c54 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -5,7 +5,9 @@ import ContentBox from "../components/ContentBox";
 import Header from "../components/Header";
 import DateAndTime from "../components/DateAndTime";
 import Search from "../components/Search";
-import Metrics from "../components/Metrics";
+
+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";
@@ -71,7 +73,7 @@ const App = () => {
             }}
           />
         </Header>
-        <Metrics data={weatherData} systemUsed={systemUsed} />
+        <MetricsBox data={weatherData} systemUsed={systemUsed} />
         <UnitSwitch onClick={changeSystem} systemUsed={systemUsed} />
       </ContentBox>
     </div>