diff --git a/pages/components/Metrics.jsx b/pages/components/Metrics.jsx
index 2e127b9..bb9d442 100644
--- a/pages/components/Metrics.jsx
+++ b/pages/components/Metrics.jsx
@@ -1,12 +1,11 @@
 import React from "react";
+import { degToCompass } from "../services/converters";
 import {
-  convertTime,
-  degToCompass,
-  kmToM,
-  mpsToMph,
-  timeToAMPM,
-} from "../services/converters";
-import { isPM } from "../services/utils";
+  getTime,
+  getAMPM,
+  getVisibility,
+  getWindSpeed,
+} from "../services/utils";
 import MetricCard from "./MetricCard";
 
 const Metrics = ({ styles, data, systemUsed }) => {
@@ -23,9 +22,7 @@ const Metrics = ({ styles, data, systemUsed }) => {
       <MetricCard
         title={"Wind speed"}
         iconSrc={"/icons/017-wind.png"}
-        metric={
-          systemUsed == "metric" ? data.wind.speed : mpsToMph(data.wind.speed)
-        }
+        metric={getWindSpeed(systemUsed, data.wind.speed)}
         unit={systemUsed == "metric" ? "m/s" : "m/h"}
         styles={styles}
       />
@@ -40,11 +37,7 @@ const Metrics = ({ styles, data, systemUsed }) => {
       <MetricCard
         title={"Visibility"}
         iconSrc={"/icons/binocular.png"}
-        metric={
-          systemUsed == "metric"
-            ? (data.visibility / 1000).toPrecision(2)
-            : kmToM(data.visibility / 1000)
-        }
+        metric={getVisibility(systemUsed, data.visibility)}
         unit={systemUsed == "metric" ? "km" : "miles"}
         styles={styles}
       />
@@ -52,31 +45,16 @@ const Metrics = ({ styles, data, systemUsed }) => {
       <MetricCard
         title={"Sunrise"}
         iconSrc={"/icons/040-sunrise.png"}
-        metric={
-          systemUsed == "metric"
-            ? `${parseInt(
-                convertTime(data.sys.sunrise, data.timezone)[0].split(":")[0]
-              )}:${
-                convertTime(data.sys.sunrise, data.timezone)[0].split(":")[1]
-              }`
-            : timeToAMPM(convertTime(data.sys.sunrise, data.timezone)[0])
-        }
+        metric={getTime(systemUsed, data.sys.sunrise, data.timezone)}
+        unit={getAMPM(systemUsed, data.sys.sunset, data.timezone)}
         styles={styles}
       />
 
       <MetricCard
         title={"Sunset"}
         iconSrc={"/icons/041-sunset.png"}
-        metric={
-          systemUsed == "metric"
-            ? convertTime(data.sys.sunset, data.timezone)[0]
-            : timeToAMPM(convertTime(data.sys.sunset, data.timezone)[0])
-        }
-        unit={
-          systemUsed == "imperial"
-            ? isPM(convertTime(data.sys.sunset, data.timezone)[0])
-            : ""
-        }
+        metric={getTime(systemUsed, data.sys.sunset, data.timezone)}
+        unit={getAMPM(systemUsed, data.sys.sunset, data.timezone)}
         styles={styles}
       />
     </div>
diff --git a/pages/services/utils.js b/pages/services/utils.js
index c7277bf..6d28533 100644
--- a/pages/services/utils.js
+++ b/pages/services/utils.js
@@ -1,3 +1,5 @@
+import { convertTime, kmToM, mpsToMph, timeToAMPM } from "./converters";
+
 export const isPM = (time) => {
   let hours = time.split(":")[0];
   if (hours >= 12) {
@@ -6,3 +8,21 @@ export const isPM = (time) => {
     return "AM";
   }
 };
+
+export const getWindSpeed = (systemUsed, windInMph) =>
+  systemUsed == "metric" ? windInMph : mpsToMph(windInMph);
+
+export const getVisibility = (systemUsed, visibilityInKm) =>
+  systemUsed == "metric"
+    ? (visibilityInKm / 1000).toPrecision(2)
+    : kmToM(visibilityInKm / 1000);
+
+export const getTime = (systemUsed, currentTime, timezone) =>
+  systemUsed == "metric"
+    ? `${parseInt(convertTime(currentTime, timezone)[0].split(":")[0])}:${
+        convertTime(currentTime, timezone)[0].split(":")[1]
+      }`
+    : timeToAMPM(convertTime(currentTime, timezone)[0]);
+
+export const getAMPM = (systemUsed, currentTime, timezone) =>
+  systemUsed == "imperial" ? isPM(convertTime(currentTime, timezone)[0]) : "";