diff --git a/components/Dates.js b/components/DateAndTime.js
similarity index 86%
rename from components/Dates.js
rename to components/DateAndTime.js
index 56f354d..628ea91 100644
--- a/components/Dates.js
+++ b/components/DateAndTime.js
@@ -1,9 +1,9 @@
 import { convertTime, timeToAMPM } from "../services/converters";
 import { isPM } from "../services/utils";
 
-import styles from "./Dates.module.css";
+import styles from "./DateAndTime.module.css";
 
-const Dates = ({ weatherData, systemUsed }) => {
+const DateAndTime = ({ weatherData, systemUsed }) => {
   var weekday = [
     "Sunday",
     "Monday",
@@ -39,4 +39,4 @@ const Dates = ({ weatherData, systemUsed }) => {
   );
 };
 
-export default Dates;
+export default DateAndTime;
diff --git a/components/Dates.module.css b/components/DateAndTime.module.css
similarity index 100%
rename from components/Dates.module.css
rename to components/DateAndTime.module.css
diff --git a/components/SwitchBox.js b/components/UnitSwitch.js
similarity index 77%
rename from components/SwitchBox.js
rename to components/UnitSwitch.js
index a25f9a1..ccc12e0 100644
--- a/components/SwitchBox.js
+++ b/components/UnitSwitch.js
@@ -1,6 +1,6 @@
-import styles from "./SwitchBox.module.css";
+import styles from "./UnitSwitch.module.css";
 
-const SwitchBox = ({ onClick, systemUsed }) => {
+const UnitSwitch = ({ onClick, systemUsed }) => {
   return (
     <div className={styles.wrapper}>
       <p
@@ -21,4 +21,4 @@ const SwitchBox = ({ onClick, systemUsed }) => {
   );
 };
 
-export default SwitchBox;
+export default UnitSwitch;
diff --git a/components/SwitchBox.module.css b/components/UnitSwitch.module.css
similarity index 100%
rename from components/SwitchBox.module.css
rename to components/UnitSwitch.module.css
diff --git a/pages/index.js b/pages/index.js
index fd85a39..4d07568 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -3,10 +3,10 @@ import { useState, useEffect } from "react";
 import MainCard from "../components/MainCard";
 import ContentBox from "../components/ContentBox";
 import Header from "../components/Header";
-import Dates from "../components/Dates";
+import DateAndTime from "../components/DateAndTime";
 import Search from "../components/Search";
 import Metrics from "../components/Metrics";
-import SwitchBox from "../components/SwitchBox";
+import UnitSwitch from "../components/UnitSwitch";
 import LoadingScreen from "../components/LoadingScreen";
 import ErrorScreen from "../components/ErrorScreen";
 
@@ -56,7 +56,7 @@ const App = () => {
       />
       <ContentBox>
         <Header>
-          <Dates weatherData={weatherData} systemUsed={systemUsed} />
+          <DateAndTime weatherData={weatherData} systemUsed={systemUsed} />
           <Search
             placeHolder="Search a city..."
             value={input}
@@ -72,7 +72,7 @@ const App = () => {
           />
         </Header>
         <Metrics data={weatherData} systemUsed={systemUsed} />
-        <SwitchBox onClick={changeSystem} systemUsed={systemUsed} />
+        <UnitSwitch onClick={changeSystem} systemUsed={systemUsed} />
       </ContentBox>
     </div>
   ) : weatherData && weatherData.message ? (