diff --git a/src/components/coin-card.tsx b/src/components/coin-card.tsx
index e0884fc..f83750b 100644
--- a/src/components/coin-card.tsx
+++ b/src/components/coin-card.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { Link } from "react-router";
 import { nameShorten } from "../utils/string-helper";
 import { ICoinMarketData } from "../utils/interfaces";
@@ -6,7 +7,7 @@ interface ICoin {
     coin: ICoinMarketData;
 }
 
-const CoinCard = ({ coin }: ICoin) => {
+const CoinCard: React.FC<ICoin> = ({ coin }) => {
 
     return (
         <Link to={`/coin/${coin.id}`} >
diff --git a/src/components/coin-chart.tsx b/src/components/coin-chart.tsx
index ac3b12c..488ceba 100644
--- a/src/components/coin-chart.tsx
+++ b/src/components/coin-chart.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import { Line } from "react-chartjs-2";
 import {
     Chart as ChartJS,
@@ -24,7 +24,7 @@ ChartJS.register(
     TimeScale
 );
 
-interface IProp {
+interface ICoinChartProps {
     coinId: string;
 }
 
@@ -48,7 +48,7 @@ interface IChartData {
     datasets: IDataSet[],
 }
 
-const CoinChart = ({ coinId }: IProp) => {
+const CoinChart: React.FC<ICoinChartProps> = ({ coinId }) => {
 
     const [chartData, setChartData] = useState<IChartData | null>(null);
 
diff --git a/src/components/coin-info.tsx b/src/components/coin-info.tsx
index e2a08f3..d3daea9 100644
--- a/src/components/coin-info.tsx
+++ b/src/components/coin-info.tsx
@@ -1,10 +1,11 @@
+import React from "react";
 import { ICoinInfo } from "../utils/interfaces";
 
 interface ICoinInfoProps {
     coin: ICoinInfo;
 }
 
-const CoinInfo = ({ coin }: ICoinInfoProps) => {
+const CoinInfo: React.FC<ICoinInfoProps> = ({ coin }) => {
 
     return (
         <>
diff --git a/src/components/error-card.tsx b/src/components/error-card.tsx
index aebf12d..3b145bb 100644
--- a/src/components/error-card.tsx
+++ b/src/components/error-card.tsx
@@ -1,12 +1,13 @@
+import React from "react";
 import { messages } from "../utils/constants";
 import RefreshButton from "./refresh-button";
 
 
-export interface IErrorCardProp {
+export interface IErrorCardProps {
     message: string;
 }
 
-const ErrorCard = ({ message }: IErrorCardProp) => {
+const ErrorCard: React.FC<IErrorCardProps> = ({ message }) => {
 
     return (
         <>
diff --git a/src/components/filter-input.tsx b/src/components/filter-input.tsx
index 2908e77..9eeb35b 100644
--- a/src/components/filter-input.tsx
+++ b/src/components/filter-input.tsx
@@ -1,10 +1,11 @@
+import React from "react";
 import { useFilterStore } from "../store/controls";
 import { messages } from "../utils/constants";
 
-const FilterInput = () => {
+const FilterInput: React.FC = () => {
     const toggleFilter = useFilterStore(state => state.toggleFilter);
 
-    const onFilterChange = (e:React.ChangeEvent<HTMLInputElement>) => {
+    const onFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         toggleFilter(e.target.value);
     }
 
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index e2102fc..41c3474 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -1,6 +1,7 @@
+import React from "react";
 import { footerLinkUrl, footerLinkText } from "../utils/conf";
 
-const Footer = () => {
+const Footer: React.FC = () => {
     return (
         <footer>
             <p>&copy; {new Date().getFullYear()}</p>
diff --git a/src/components/header.tsx b/src/components/header.tsx
index a3deaa1..bbb1aee 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,6 +1,7 @@
+import React from "react";
 import { Link } from "react-router";
 
-const Header = () => {
+const Header: React.FC = () => {
     return (
         <div className="nav-box">
             <Link to="/">Home</Link>
diff --git a/src/components/limit-selector.tsx b/src/components/limit-selector.tsx
index 512da10..965010c 100644
--- a/src/components/limit-selector.tsx
+++ b/src/components/limit-selector.tsx
@@ -1,7 +1,8 @@
+import React from "react";
 import { useLimitStore } from "../store/controls";
 import { fetchCoins, getCoinsLength } from "../store/coins-market";
 
-const LimitSelector = () => {
+const LimitSelector: React.FC = () => {
 
     const limit = useLimitStore(state => state.limit);
     const toggleLimit = useLimitStore(state => state.toggleLimit);
diff --git a/src/components/refresh-button.tsx b/src/components/refresh-button.tsx
index bdae950..202ba34 100644
--- a/src/components/refresh-button.tsx
+++ b/src/components/refresh-button.tsx
@@ -1,12 +1,13 @@
+import React from "react";
 import { fetchCoins, getCoinsLength } from "../store/coins-market";
 import { getTimestampOfLastPersist } from "../store/coins-market";
 import toast, { Toaster } from "react-hot-toast";
 import { messages } from "../utils/constants";
 import { MdRefresh } from "react-icons/md";
 
-const notify = (text:string) => toast.error(text, { duration: 3000, id: "reloadRapidDisallowed", style: { textAlign: 'center' } });
+const notify = (text: string) => toast.error(text, { duration: 3000, id: "reloadRapidDisallowed", style: { textAlign: 'center' } });
 
-const RefreshButton = () => {
+const RefreshButton: React.FC = () => {
 
     const onButonClick = () => {
         if (Date.now() > getTimestampOfLastPersist() + 3000) fetchCoins(getCoinsLength() || 10);
@@ -17,8 +18,8 @@ const RefreshButton = () => {
         <>
             <button className="refresh-btn" onClick={(e) => onButonClick()} >
                 <span className="icon">
-                    <MdRefresh />        
-                </span> 
+                    <MdRefresh />
+                </span>
                 Reload
             </button>
             <Toaster />
diff --git a/src/components/sort-selector.tsx b/src/components/sort-selector.tsx
index e8ca889..828188e 100644
--- a/src/components/sort-selector.tsx
+++ b/src/components/sort-selector.tsx
@@ -1,7 +1,8 @@
+import React from "react";
 import { SortBy } from "../utils/enum";
 import { useSortByStore } from "../store/controls";
 
-const SortSelector = () => {
+const SortSelector: React.FC = () => {
     const sortBy = useSortByStore(state => state.sortBy);
     const toggleSortBy = useSortByStore(state => state.toggleSortBy);
 
diff --git a/src/components/spinner.tsx b/src/components/spinner.tsx
index 3c4b35b..9541ce7 100644
--- a/src/components/spinner.tsx
+++ b/src/components/spinner.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { BarLoader } from "react-spinners";
 
 const override = {
@@ -5,7 +6,12 @@ const override = {
     margin: "0 auto 50px auto",
 };
 
-const Spinner = ({ color = "blue", width = 200 }) => {
+interface ISpinnerProps {
+    color?: string;
+    width?: number;
+}
+
+const Spinner: React.FC<ISpinnerProps> = ({ color = "blue", width = 200 }) => {
     return (
         <div>
             <BarLoader color={color} width={width} cssOverride={override} aria-label="Loading..." />
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
index 58882bb..6b691d5 100644
--- a/src/pages/about.tsx
+++ b/src/pages/about.tsx
@@ -1,6 +1,7 @@
+import React from "react";
 import { messages } from "../utils/constants";
 
-const About = () => {
+const About: React.FC = () => {
     return (
         <div className="about">
             <h1>📈 Crypto Viewer</h1>
diff --git a/src/pages/coin-detail.tsx b/src/pages/coin-detail.tsx
index daaff8e..3af0586 100644
--- a/src/pages/coin-detail.tsx
+++ b/src/pages/coin-detail.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { Link, useParams } from "react-router";
 import CoinInfo from "../components/coin-info";
 import { useCoinInfoStore, reset, fetchCoinInfos } from "../store/coin-info";
@@ -5,7 +6,7 @@ import { useEffect } from "react";
 import CoinChart from "../components/coin-chart";
 import Spinner from "../components/spinner";
 
-const CoinDetail = () => {
+const CoinDetail: React.FC = () => {
 
     const { id } = useParams<string>();
 
@@ -19,7 +20,7 @@ const CoinDetail = () => {
 
     useEffect(() => {
         const fetch = async () => {
-            fetchCoinInfos( String(id));
+            fetchCoinInfos(String(id));
         }
         fetch();
     }, [id]);
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index a0ececa..a0f97c9 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { useEffect, useRef } from "react";
 import FilterInput from "../components/filter-input";
 import LimitSelector from "../components/limit-selector";
@@ -12,7 +13,7 @@ import ErrorCard from "../components/error-card";
 import { initialCoinsCoint } from "../utils/conf";
 import { ICoinMarketData } from "../utils/interfaces";
 
-const Home = () => {
+const Home: React.FC = () => {
 
     const coins = useCoinsMarketStore(state => state.coins);
     const loading = useCoinsMarketStore(state => state.loading);
@@ -27,7 +28,7 @@ const Home = () => {
         }
     }, []);
 
-    let filteredCoins:ICoinMarketData[] = [];
+    let filteredCoins: ICoinMarketData[] = [];
 
     if (coins) {
         filteredCoins = coinsFilter(coins, filter, sortBy);
diff --git a/src/pages/not-found.tsx b/src/pages/not-found.tsx
index d3988ad..593c9fd 100644
--- a/src/pages/not-found.tsx
+++ b/src/pages/not-found.tsx
@@ -1,6 +1,7 @@
+import React from "react";
 import { Link } from "react-router";
 
-const NotFound = () => {
+const NotFound: React.FC = () => {
     return (
         <div className="not-found-container">
             <h1 className="title">404</h1>