diff --git a/pages/components/Metrics.jsx b/pages/components/Metrics.jsx
new file mode 100644
index 0000000..aede08b
--- /dev/null
+++ b/pages/components/Metrics.jsx
@@ -0,0 +1,85 @@
+import React from "react";
+import {
+  convertTime,
+  degToCompass,
+  kmToM,
+  mpsToMph,
+  timeToAMPM,
+} from "../services/converters";
+import MetricCard from "./MetricCard";
+
+const Metrics = ({ styles, data, systemUsed }) => {
+  return (
+    <div className={styles.statsBox}>
+      <MetricCard
+        title={"Humidity"}
+        iconSrc={"/icons/025-humidity.png"}
+        metric={data.main.humidity}
+        unit={"%"}
+        styles={styles}
+      />
+
+      <MetricCard
+        title={"Wind speed"}
+        iconSrc={"/icons/017-wind.png"}
+        metric={
+          systemUsed == "metric" ? data.wind.speed : mpsToMph(data.wind.speed)
+        }
+        unit={systemUsed == "metric" ? "m/s" : "m/h"}
+        styles={styles}
+      />
+
+      <MetricCard
+        title={"Wind direction"}
+        iconSrc={"/icons/014-compass.png"}
+        metric={degToCompass(data.wind.deg)}
+        styles={styles}
+      />
+
+      <MetricCard
+        title={"Visibility"}
+        iconSrc={"/icons/binocular.png"}
+        metric={
+          systemUsed == "metric"
+            ? (data.visibility / 1000).toPrecision(2)
+            : kmToM(data.visibility / 1000)
+        }
+        unit={systemUsed == "metric" ? "km" : "miles"}
+        styles={styles}
+      />
+
+      <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])
+        }
+        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"
+            ? isPMs(convertTime(data.sys.sunset, data.timezone)[0])
+            : ""
+        }
+        styles={styles}
+      />
+    </div>
+  );
+};
+
+export default Metrics;
diff --git a/pages/index.js b/pages/index.js
index fbf708e..a8fd78e 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,7 +1,8 @@
 import { useState, useEffect } from "react";
 import styles from "../styles/Home.module.css";
 import Image from "next/image";
-import MetricCard from "./components/MetricCard";
+import Metrics from "./components/Metrics";
+import { convertTime, ctoF, timeToAMPM } from "./services/converters";
 
 export default function Home() {
   const [input, setInput] = useState("Riga");
@@ -30,49 +31,6 @@ export default function Home() {
     getData();
   }, []);
 
-  function degToCompass(num) {
-    var val = Math.floor(num / 22.5 + 0.5);
-    var arr = [
-      "N",
-      "NNE",
-      "NE",
-      "ENE",
-      "E",
-      "ESE",
-      "SE",
-      "S/SE",
-      "S",
-      "SSW",
-      "SW",
-      "WSW",
-      "W",
-      "WNW",
-      "NW",
-      "NNW",
-    ];
-    return arr[val % 16];
-  }
-
-  const convertTime = (unixSeconds, timezone) => {
-    const time = new Date((unixSeconds + timezone) * 1000)
-      .toISOString()
-      .match(/(\d{2}:\d{2})/);
-
-    return time;
-  };
-
-  const ctoF = (c) => (c * 9) / 5 + 32;
-  const mpsToMph = (mps) => (mps * 2.236936).toFixed(2);
-  const kmToM = (km) => (km / 1.609).toFixed(1);
-
-  const timeToAMPM = (time) => {
-    let hours = time.split(":")[0];
-    let minutes = time.split(":")[1];
-    hours = hours % 12;
-    hours = hours ? hours : 12;
-    return hours + ":" + minutes;
-  };
-
   const isPM = (time) => {
     let hours = time.split(":")[0];
     if (hours >= 12) {
@@ -172,92 +130,7 @@ export default function Home() {
           />
         </div>
 
-        <div className={styles.statsBox}>
-          <MetricCard
-            title={"Humidity"}
-            iconSrc={"/icons/025-humidity.png"}
-            metric={weatherData.main.humidity}
-            unit={"%"}
-            styles={styles}
-          />
-
-          <MetricCard
-            title={"Wind speed"}
-            iconSrc={"/icons/017-wind.png"}
-            metric={
-              systemUsed == "metric"
-                ? weatherData.wind.speed
-                : mpsToMph(weatherData.wind.speed)
-            }
-            unit={systemUsed == "metric" ? "m/s" : "m/h"}
-            styles={styles}
-          />
-
-          <MetricCard
-            title={"Wind direction"}
-            iconSrc={"/icons/014-compass.png"}
-            metric={degToCompass(weatherData.wind.deg)}
-            styles={styles}
-          />
-
-          <MetricCard
-            title={"Visibility"}
-            iconSrc={"/icons/binocular.png"}
-            metric={
-              systemUsed == "metric"
-                ? (weatherData.visibility / 1000).toPrecision(2)
-                : kmToM(weatherData.visibility / 1000)
-            }
-            unit={systemUsed == "metric" ? "km" : "miles"}
-            styles={styles}
-          />
-
-          <MetricCard
-            title={"Sunrise"}
-            iconSrc={"/icons/040-sunrise.png"}
-            metric={
-              systemUsed == "metric"
-                ? `${parseInt(
-                    convertTime(
-                      weatherData.sys.sunrise,
-                      weatherData.timezone
-                    )[0].split(":")[0]
-                  )}:${
-                    convertTime(
-                      weatherData.sys.sunrise,
-                      weatherData.timezone
-                    )[0].split(":")[1]
-                  }`
-                : timeToAMPM(
-                    convertTime(
-                      weatherData.sys.sunrise,
-                      weatherData.timezone
-                    )[0]
-                  )
-            }
-            styles={styles}
-          />
-
-          <MetricCard
-            title={"Sunset"}
-            iconSrc={"/icons/041-sunset.png"}
-            metric={
-              systemUsed == "metric"
-                ? convertTime(weatherData.sys.sunset, weatherData.timezone)[0]
-                : timeToAMPM(
-                    convertTime(weatherData.sys.sunset, weatherData.timezone)[0]
-                  )
-            }
-            unit={
-              systemUsed == "imperial"
-                ? isPM(
-                    convertTime(weatherData.sys.sunset, weatherData.timezone)[0]
-                  )
-                : ""
-            }
-            styles={styles}
-          />
-        </div>
+        <Metrics styles={styles} data={weatherData} systemUsed={systemUsed} />
         <div className={styles.switchBox}>
           <p
             className={styles.switch}
diff --git a/pages/services/converters.js b/pages/services/converters.js
new file mode 100644
index 0000000..84ae7d4
--- /dev/null
+++ b/pages/services/converters.js
@@ -0,0 +1,44 @@
+export const ctoF = (c) => (c * 9) / 5 + 32;
+
+export const mpsToMph = (mps) => (mps * 2.236936).toFixed(2);
+
+export const kmToM = (km) => (km / 1.609).toFixed(1);
+
+export const timeToAMPM = (time) => {
+  let hours = time.split(":")[0];
+  let minutes = time.split(":")[1];
+  hours = hours % 12;
+  hours = hours ? hours : 12;
+  return hours + ":" + minutes;
+};
+
+export const degToCompass = (num) => {
+  var val = Math.floor(num / 22.5 + 0.5);
+  var arr = [
+    "N",
+    "NNE",
+    "NE",
+    "ENE",
+    "E",
+    "ESE",
+    "SE",
+    "S/SE",
+    "S",
+    "SSW",
+    "SW",
+    "WSW",
+    "W",
+    "WNW",
+    "NW",
+    "NNW",
+  ];
+  return arr[val % 16];
+};
+
+export const convertTime = (unixSeconds, timezone) => {
+  const time = new Date((unixSeconds + timezone) * 1000)
+    .toISOString()
+    .match(/(\d{2}:\d{2})/);
+
+  return time;
+};