diff --git a/components/ContentBox.js b/components/ContentBox.js
index 1692ebd..63d91da 100644
--- a/components/ContentBox.js
+++ b/components/ContentBox.js
@@ -1,7 +1,5 @@
 import styles from "./ContentBox.module.css";
 
-const ContentBox = ({ children }) => {
+export const ContentBox = ({ children }) => {
   return <div className={styles.wrapper}>{children}</div>;
 };
-
-export default ContentBox;
diff --git a/components/DateAndTime.js b/components/DateAndTime.js
index 62b689e..5afd5bc 100644
--- a/components/DateAndTime.js
+++ b/components/DateAndTime.js
@@ -1,7 +1,7 @@
 import { getWeekDay, getTime, getAMPM } from "../services/utils";
 import styles from "./DateAndTime.module.css";
 
-const DateAndTime = ({ weatherData, systemUsed }) => {
+export const DateAndTime = ({ weatherData, systemUsed }) => {
   return (
     <h2 className={styles.title}>
       {`${getWeekDay(weatherData)}, ${getTime(
@@ -11,6 +11,4 @@ const DateAndTime = ({ weatherData, systemUsed }) => {
       )} ${getAMPM(systemUsed, weatherData.dt, weatherData.timezone)}`}
     </h2>
   );
-};
-
-export default DateAndTime;
+};
\ No newline at end of file
diff --git a/components/ErrorScreen.js b/components/ErrorScreen.js
index b6b4653..014690d 100644
--- a/components/ErrorScreen.js
+++ b/components/ErrorScreen.js
@@ -1,6 +1,6 @@
 import styles from "./ErrorScreen.module.css";
 
-const ErrorScreen = ({ errorMessage, children }) => {
+export const ErrorScreen = ({ errorMessage, children }) => {
   return (
     <div className={styles.wrapper}>
       <h1 className={styles.message}>{errorMessage}</h1>
@@ -8,5 +8,3 @@ const ErrorScreen = ({ errorMessage, children }) => {
     </div>
   );
 };
-
-export default ErrorScreen;
diff --git a/components/Header.js b/components/Header.js
index 499e126..3aba22b 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -1,7 +1,5 @@
 import styles from "./Header.module.css";
 
-const Header = ({ children }) => {
+export const Header = ({ children }) => {
   return <div className={styles.wrapper}>{children}</div>;
 };
-
-export default Header;
diff --git a/components/LoadingScreen.js b/components/LoadingScreen.js
index fe7b771..ed80ef1 100644
--- a/components/LoadingScreen.js
+++ b/components/LoadingScreen.js
@@ -1,11 +1,9 @@
 import styles from "./LoadingScreen.module.css";
 
-const LoadingScreen = ({ loadingMessage }) => {
+export const LoadingScreen = ({ loadingMessage }) => {
   return (
     <div className={styles.wrapper}>
       <h1>{loadingMessage}</h1>
     </div>
   );
 };
-
-export default LoadingScreen;
diff --git a/components/MainCard.js b/components/MainCard.js
index dc1d26f..f22a42c 100644
--- a/components/MainCard.js
+++ b/components/MainCard.js
@@ -2,7 +2,7 @@ import Image from "next/image";
 import { ctoF } from "../services/converters";
 import styles from "./MainCard.module.css";
 
-const MainCard = ({
+export const MainCard = ({
   city,
   country,
   description,
@@ -37,6 +37,4 @@ const MainCard = ({
       </p>
     </div>
   );
-};
-
-export default MainCard;
+};
\ No newline at end of file
diff --git a/components/MetricsBox.js b/components/MetricsBox.js
index aff7175..5b7587c 100644
--- a/components/MetricsBox.js
+++ b/components/MetricsBox.js
@@ -5,36 +5,36 @@ import {
   getVisibility,
   getWindSpeed,
 } from "../services/utils";
-import MetricCard from "./MetricsCard";
+import {MetricsCard} from "./MetricsCard";
 import styles from "./MetricsBox.module.css";
 
-const MetricsBox = ({ weatherData, systemUsed }) => {
+export const MetricsBox = ({ weatherData, systemUsed }) => {
   return (
     <div className={styles.wrapper}>
-      <MetricCard
+      <MetricsCard
         title={"Humidity"}
         iconSrc={"/icons/humidity.png"}
         metric={weatherData.main.humidity}
         unit={"%"}
       />
-      <MetricCard
+      <MetricsCard
         title={"Wind speed"}
         iconSrc={"/icons/wind.png"}
         metric={getWindSpeed(systemUsed, weatherData.wind.speed)}
         unit={systemUsed == "metric" ? "m/s" : "m/h"}
       />
-      <MetricCard
+      <MetricsCard
         title={"Wind direction"}
         iconSrc={"/icons/compass.png"}
         metric={degToCompass(weatherData.wind.deg)}
       />
-      <MetricCard
+      <MetricsCard
         title={"Visibility"}
         iconSrc={"/icons/binocular.png"}
         metric={getVisibility(systemUsed, weatherData.visibility)}
         unit={systemUsed == "metric" ? "km" : "miles"}
       />
-      <MetricCard
+      <MetricsCard
         title={"Sunrise"}
         iconSrc={"/icons/sunrise.png"}
         metric={getTime(
@@ -48,7 +48,7 @@ const MetricsBox = ({ weatherData, systemUsed }) => {
           weatherData.timezone
         )}
       />
-      <MetricCard
+      <MetricsCard
         title={"Sunset"}
         iconSrc={"/icons/sunset.png"}
         metric={getTime(
@@ -60,6 +60,4 @@ const MetricsBox = ({ weatherData, systemUsed }) => {
       />
     </div>
   );
-};
-
-export default MetricsBox;
+};
\ No newline at end of file
diff --git a/components/MetricsCard.js b/components/MetricsCard.js
index c8a1e12..e55804a 100644
--- a/components/MetricsCard.js
+++ b/components/MetricsCard.js
@@ -1,7 +1,7 @@
 import Image from "next/image";
 import styles from "./MetricsCard.module.css";
 
-const MetricsCard = ({ title, iconSrc, metric, unit }) => {
+export const MetricsCard = ({ title, iconSrc, metric, unit }) => {
   return (
     <div className={styles.wrapper}>
       <p>{title}</p>
@@ -15,5 +15,3 @@ const MetricsCard = ({ title, iconSrc, metric, unit }) => {
     </div>
   );
 };
-
-export default MetricsCard;
diff --git a/components/Search.js b/components/Search.js
index a1497a7..6d9b3b2 100644
--- a/components/Search.js
+++ b/components/Search.js
@@ -1,6 +1,6 @@
 import styles from "./Search.module.css";
 
-const Search = ({ placeHolder, value, onFocus, onChange, onKeyDown }) => {
+export const Search = ({ placeHolder, value, onFocus, onChange, onKeyDown }) => {
   return (
     <input
       className={styles.search}
@@ -13,5 +13,3 @@ const Search = ({ placeHolder, value, onFocus, onChange, onKeyDown }) => {
     />
   );
 };
-
-export default Search;
diff --git a/components/UnitSwitch.js b/components/UnitSwitch.js
index ccc12e0..bcb74d4 100644
--- a/components/UnitSwitch.js
+++ b/components/UnitSwitch.js
@@ -1,6 +1,6 @@
 import styles from "./UnitSwitch.module.css";
 
-const UnitSwitch = ({ onClick, systemUsed }) => {
+export const UnitSwitch = ({ onClick, systemUsed }) => {
   return (
     <div className={styles.wrapper}>
       <p
@@ -20,5 +20,3 @@ const UnitSwitch = ({ onClick, systemUsed }) => {
     </div>
   );
 };
-
-export default UnitSwitch;
diff --git a/pages/index.js b/pages/index.js
index 145e9a4..9fa1ab2 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,18 +1,18 @@
 import { useState, useEffect } from "react";
 
-import MainCard from "../components/MainCard";
-import ContentBox from "../components/ContentBox";
-import Header from "../components/Header";
-import DateAndTime from "../components/DateAndTime";
-import Search from "../components/Search";
-import MetricsBox from "../components/MetricsBox";
-import UnitSwitch from "../components/UnitSwitch";
-import LoadingScreen from "../components/LoadingScreen";
-import ErrorScreen from "../components/ErrorScreen";
+import {MainCard} from "../components/MainCard";
+import {ContentBox} from "../components/ContentBox";
+import {Header} from "../components/Header";
+import {DateAndTime} from "../components/DateAndTime";
+import {Search} from "../components/Search";
+import {MetricsBox} from "../components/MetricsBox";
+import {UnitSwitch} from "../components/UnitSwitch";
+import {LoadingScreen} from "../components/LoadingScreen";
+import {ErrorScreen} from "../components/ErrorScreen";
 
 import styles from "../styles/Home.module.css";
 
-const App = () => {
+export const App = () => {
   const [input, setInput] = useState("Riga");
   const [execute, setExecute] = useState(true);
   const [weatherData, setWeatherData] = useState();