diff --git a/.husky/pre-commit b/.husky/pre-commit
old mode 100755
new mode 100644
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..9bf4d12
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true
+}
diff --git a/src/App.js b/src/App.js
index 9809b32..6ac1c72 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,21 +5,19 @@ import AccessibleNavigationAnnouncer from "./components/AccessibleNavigationAnno
 
 const Layout = lazy(() => import("./containers/Layout"));
 
-function PublicRoute({ component: Component, ...rest }) {
+const PublicRoute = ({ component: Component, ...rest }) => {
   return <Route {...rest} render={(props) => <Component {...props} />} />;
-}
+};
 
-function App() {
+const App = () => {
   return (
-    <>
-      <Router>
-        <AccessibleNavigationAnnouncer />
-        <Switch>
-          <PublicRoute path="/" component={Layout} />
-        </Switch>
-      </Router>
-    </>
+    <Router>
+      <AccessibleNavigationAnnouncer />
+      <Switch>
+        <PublicRoute path="/" component={Layout} />
+      </Switch>
+    </Router>
   );
-}
+};
 
 export default App;
diff --git a/src/components/AccessibleNavigationAnnouncer.js b/src/components/AccessibleNavigationAnnouncer.js
index dc0b128..b1423f6 100644
--- a/src/components/AccessibleNavigationAnnouncer.js
+++ b/src/components/AccessibleNavigationAnnouncer.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 
-function AccessibleNavigationAnnouncer() {
+const AccessibleNavigationAnnouncer = () => {
   const [message, setMessage] = useState("");
   const location = useLocation();
 
@@ -26,6 +26,6 @@ function AccessibleNavigationAnnouncer() {
       {message}
     </span>
   );
-}
+};
 
 export default AccessibleNavigationAnnouncer;
diff --git a/src/components/Cards/CapacityCard.js b/src/components/Cards/CapacityCard.js
index 5e0c82e..fafd445 100644
--- a/src/components/Cards/CapacityCard.js
+++ b/src/components/Cards/CapacityCard.js
@@ -1,7 +1,7 @@
 import { Card } from "@windmill/react-ui";
 import React from "react";
 
-export function CapacityCard({ data }) {
+const CapacityCard = ({ data }) => {
   const showBedInfo = (bedData, category) => (
     <div className="grid row-span-2 grid-cols-9 mt-2 h-12">
       <div className="col-span-1 pl-3 pt-3 dark:text-gray-200 text-sm font-medium">
@@ -113,4 +113,6 @@ export function CapacityCard({ data }) {
       </div>
     </Card>
   );
-}
+};
+
+export default CapacityCard;
diff --git a/src/components/Cards/InfoCard.js b/src/components/Cards/InfoCard.js
index da154d1..529e292 100644
--- a/src/components/Cards/InfoCard.js
+++ b/src/components/Cards/InfoCard.js
@@ -3,7 +3,7 @@ import clsx from "clsx";
 import React from "react";
 import { animated, config, useSpring } from "react-spring";
 
-export function InfoCard({ title, value, delta = null, small = false }) {
+const InfoCard = ({ title, value, delta = null, small = false }) => {
   const { _value, _delta } = useSpring({
     from: { _value: 0, _delta: 0 },
     to: {
@@ -18,28 +18,28 @@ export function InfoCard({ title, value, delta = null, small = false }) {
       <CardBody className="flex flex-col">
         <div>
           <p
-            className={clsx(
-              small ? "mb-1 text-xs" : "mb-2 text-sm",
-              "dark:text-gray-400 text-gray-600 font-medium"
-            )}
+            className={clsx("dark:text-gray-400 text-gray-600 font-medium", {
+              "mb-1 text-xs": small,
+              "mb-2 text-sm": !small,
+            })}
           >
             {title}
           </p>
           <div className="flex">
             <animated.p
               className={clsx(
-                small ? "text-base" : "text-lg",
-                "dark:text-gray-200 text-gray-700 font-semibold"
+                "dark:text-gray-200 text-gray-700 font-semibold",
+                { "text-base": small, "text-lg": !small }
               )}
             >
               {_value.interpolate((x) => Math.round(x))}
             </animated.p>
             {delta !== null && (
               <animated.span
-                className={clsx(
-                  small ? "text-xs" : "text-sm",
-                  "ml-2 dark:text-gray-400 text-gray-600"
-                )}
+                className={clsx("ml-2 dark:text-gray-400 text-gray-600", {
+                  "text-xs": small,
+                  "text-sm": !small,
+                })}
               >
                 {_delta.interpolate((y) => {
                   const x = Math.round(y);
@@ -52,4 +52,6 @@ export function InfoCard({ title, value, delta = null, small = false }) {
       </CardBody>
     </Card>
   );
-}
+};
+
+export default InfoCard;
diff --git a/src/components/Cards/OxygenCard.js b/src/components/Cards/OxygenCard.js
index 44332fb..b17985f 100644
--- a/src/components/Cards/OxygenCard.js
+++ b/src/components/Cards/OxygenCard.js
@@ -1,8 +1,9 @@
 import { Card } from "@windmill/react-ui";
 import React from "react";
 import { OXYGEN_TYPES } from "../../utils/constants";
+import clsx from "clsx";
 
-export function OxygenCard({ data }) {
+const OxygenCard = ({ data }) => {
   const getSVG = (parameter) => {
     if (parameter === "Quantity") {
       return (
@@ -94,9 +95,12 @@ export function OxygenCard({ data }) {
           >
             <div className="flex flex-row justify-center">
               <div
-                className={`text-gray-800 dark:text-gray-200 text-lg font-semibold ${
-                  data.is_low[idx] ? "text-red-500 dark:text-red-500" : ""
-                }`}
+                className={clsx(
+                  "dark:text-gray-200 text-gray-800 text-lg font-semibold",
+                  {
+                    "text-red-500 dark:text-red-500": data.is_low[idx],
+                  }
+                )}
               >
                 {val}
               </div>
@@ -183,4 +187,6 @@ export function OxygenCard({ data }) {
       </div>
     </Card>
   );
-}
+};
+
+export default OxygenCard;
diff --git a/src/components/Chart/RadialCard.js b/src/components/Chart/RadialCard.js
index f991287..dcbe890 100644
--- a/src/components/Chart/RadialCard.js
+++ b/src/components/Chart/RadialCard.js
@@ -3,7 +3,7 @@ import React from "react";
 import { ChevronsDown, ChevronsUp } from "react-feather";
 import { animated, config, useSpring } from "react-spring";
 
-function RadialCard({ label, count, current, previous, col = "" }) {
+const RadialCard = ({ label, count, current, previous, col = "" }) => {
   const current_used = Math.round((current.used / current.total) * 100);
   const previous_used = Math.round((previous.used / previous.total) * 100);
   const diff = current_used - previous_used;
@@ -88,6 +88,6 @@ function RadialCard({ label, count, current, previous, col = "" }) {
       </div>
     </Card>
   );
-}
+};
 
 export default RadialCard;
diff --git a/src/components/Chart/TimeseriesBarChart.js b/src/components/Chart/TimeseriesBarChart.js
index 736056b..18adff9 100644
--- a/src/components/Chart/TimeseriesBarChart.js
+++ b/src/components/Chart/TimeseriesBarChart.js
@@ -13,7 +13,7 @@ import {
 
 import { SectionTitle } from "../Typography/Title";
 
-function TimeseriesBarChart({ name, data, dataKeys, colors }) {
+const TimeseriesBarChart = ({ name, data, dataKeys, colors }) => {
   const { mode } = useContext(WindmillContext);
 
   return (
@@ -66,6 +66,6 @@ function TimeseriesBarChart({ name, data, dataKeys, colors }) {
       </Card>
     </div>
   );
-}
+};
 
 export default TimeseriesBarChart;
diff --git a/src/components/Chart/TimeseriesLineChart.js b/src/components/Chart/TimeseriesLineChart.js
index 9ce2b73..77235ae 100644
--- a/src/components/Chart/TimeseriesLineChart.js
+++ b/src/components/Chart/TimeseriesLineChart.js
@@ -13,7 +13,7 @@ import {
 
 import { SectionTitle } from "../Typography/Title";
 
-function TimeseriesLineChart({ name, data, dataKeys, colors }) {
+const TimeseriesLineChart = ({ name, data, dataKeys, colors }) => {
   const { mode } = useContext(WindmillContext);
 
   return (
@@ -72,6 +72,6 @@ function TimeseriesLineChart({ name, data, dataKeys, colors }) {
       </Card>
     </div>
   );
-}
+};
 
 export default TimeseriesLineChart;
diff --git a/src/components/DistrictDashboard/Capacity.js b/src/components/DistrictDashboard/Capacity.js
index 27a4c74..0087b82 100644
--- a/src/components/DistrictDashboard/Capacity.js
+++ b/src/components/DistrictDashboard/Capacity.js
@@ -1,6 +1,5 @@
 import { Button, Input } from "@windmill/react-ui";
 import Pagination from "../Pagination";
-import clsx from "clsx";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import fuzzysort from "fuzzysort";
@@ -24,10 +23,10 @@ import {
   getNDateBefore,
   processFacilities,
 } from "../../utils/utils";
-import { CapacityCard } from "../Cards/CapacityCard";
+import CapacityCard from "../Cards/CapacityCard";
 import RadialCard from "../Chart/RadialCard";
-import { Pill } from "../Pill/Pill";
-import { ValuePill } from "../Pill/ValuePill";
+import Pill from "../Pill/Pill";
+import ValuePill from "../Pill/ValuePill";
 import ThemedSuspense from "../ThemedSuspense";
 import { SectionTitle } from "../Typography/Title";
 
@@ -84,7 +83,7 @@ const initialFacilitiesTrivia = {
   oxygen: 0,
 };
 
-function Capacity({ filterDistrict, filterFacilityTypes, date }) {
+const Capacity = ({ filterDistrict, filterFacilityTypes, date }) => {
   const [forecast, setForecast] = useState(false);
   const { data } = useSWR(
     ["Capacity", date, filterDistrict.id],
@@ -336,6 +335,6 @@ function Capacity({ filterDistrict, filterFacilityTypes, date }) {
       </animated.div>
     )
   );
-}
+};
 
 export default Capacity;
diff --git a/src/components/DistrictDashboard/CapacityForecast.js b/src/components/DistrictDashboard/CapacityForecast.js
index 4064d4c..ea30f01 100644
--- a/src/components/DistrictDashboard/CapacityForecast.js
+++ b/src/components/DistrictDashboard/CapacityForecast.js
@@ -26,16 +26,16 @@ import {
   processFacilities,
 } from "../../utils/utils";
 import NoData from "../NoData";
-import { Pill } from "../Pill/Pill";
+import Pill from "../Pill/Pill";
 
 const arima = wrap(new Worker("../../utils/arima.worker", { type: "module" }));
 
-function CapacityForecast({
+const CapacityForecast = ({
   filterDistrict,
   filterFacilityTypes,
   date,
   setForecast,
-}) {
+}) => {
   const [timespan, setTimespan] = useState({ past: 14, forecast: 14 });
   const { data } = useSWR(
     ["CapacityForecast", date, filterDistrict.id, timespan.past],
@@ -209,9 +209,9 @@ function CapacityForecast({
   ) : (
     <NoData />
   );
-}
+};
 
-function SingleCapacityForecast({ title, past, forecasted }) {
+const SingleCapacityForecast = ({ title, past, forecasted }) => {
   const { mode } = useContext(WindmillContext);
   const { a, mx, mn, fa, fmx, fmn } = useSpring({
     from: { a: 0, mx: 0, mn: 0 },
@@ -360,6 +360,6 @@ function SingleCapacityForecast({ title, past, forecasted }) {
       </div>
     </div>
   );
-}
+};
 
 export default CapacityForecast;
diff --git a/src/components/DistrictDashboard/CapacityTimeseries.js b/src/components/DistrictDashboard/CapacityTimeseries.js
index f5a8631..21f9cb0 100644
--- a/src/components/DistrictDashboard/CapacityTimeseries.js
+++ b/src/components/DistrictDashboard/CapacityTimeseries.js
@@ -15,7 +15,7 @@ import TimeseriesBarChart from "../Chart/TimeseriesBarChart";
 import TimeseriesLineChart from "../Chart/TimeseriesLineChart";
 import NoData from "../NoData";
 
-function CapacityTimeseries({ filterDistrict, filterFacilityTypes, dates }) {
+const CapacityTimeseries = ({ filterDistrict, filterFacilityTypes, dates }) => {
   const { data } = useSWR(
     ["CapacityTimeseries", dates, filterDistrict.id],
     (url, dates, district) =>
@@ -136,6 +136,6 @@ function CapacityTimeseries({ filterDistrict, filterFacilityTypes, dates }) {
       )}
     </div>
   );
-}
+};
 
 export default CapacityTimeseries;
diff --git a/src/components/DistrictDashboard/DistrictMap.js b/src/components/DistrictDashboard/DistrictMap.js
index f476324..6d1fc14 100644
--- a/src/components/DistrictDashboard/DistrictMap.js
+++ b/src/components/DistrictDashboard/DistrictMap.js
@@ -17,7 +17,7 @@ import { SectionTitle } from "../Typography/Title";
 const GMap = lazy(() => import("../DistrictDashboard/GMap"));
 dayjs.extend(relativeTime);
 
-function DistrictMap({ filterDistrict, filterFacilityTypes, date }) {
+const DistrictMap = ({ filterDistrict, filterFacilityTypes, date }) => {
   const { data } = useSWR(
     ["Capacity", date, filterDistrict.id],
     (url, date, district) =>
@@ -54,6 +54,6 @@ function DistrictMap({ filterDistrict, filterFacilityTypes, date }) {
       </Suspense>
     </animated.div>
   ));
-}
+};
 
 export default DistrictMap;
diff --git a/src/components/DistrictDashboard/FacilityTable.js b/src/components/DistrictDashboard/FacilityTable.js
index 8ef881a..a5a71f4 100644
--- a/src/components/DistrictDashboard/FacilityTable.js
+++ b/src/components/DistrictDashboard/FacilityTable.js
@@ -14,13 +14,13 @@ import fuzzysort from "fuzzysort";
 import React, { useEffect, useState } from "react";
 import { CSVLink } from "react-csv";
 
-function FacilityTable({
+const FacilityTable = ({
   columns = [],
   data,
   className,
   exported = null,
   title = "Facilities",
-}) {
+}) => {
   const resultsPerPage = 25;
   const [filteredData, setFilteredData] = useState(data);
   const [page, setPage] = useState(1);
@@ -122,6 +122,6 @@ function FacilityTable({
       </TableContainer>
     </div>
   );
-}
+};
 
 export default FacilityTable;
diff --git a/src/components/DistrictDashboard/Filter.js b/src/components/DistrictDashboard/Filter.js
index da9fcb2..9445d9b 100644
--- a/src/components/DistrictDashboard/Filter.js
+++ b/src/components/DistrictDashboard/Filter.js
@@ -19,7 +19,7 @@ import {
   GOVT_FACILITY_TYPES,
 } from "../../utils/constants";
 
-function Filter({
+const Filter = ({
   timeseries,
   setTimeseries,
   date,
@@ -31,7 +31,7 @@ function Filter({
   filterFacilityTypes,
   setFilterFacilityTypes,
   content,
-}) {
+}) => {
   const [facilityTypesFilterOptions, setFacilityTypesFilterOptions] =
     useState(FACILITY_TYPES);
   const [_filterFacilityTypes, _setFilterFacilityTypes] =
@@ -45,8 +45,8 @@ function Filter({
   return (
     <div
       className={clsx(
-        floating ? " mt-10 flex-shrink-0 " : "mb-8 rounded-lg",
-        "flex flex-col items-center justify-between px-1 py-1 dark:bg-gray-800 bg-white shadow-md sm:px-4 sm:py-2 md:flex-row"
+        "flex flex-col items-center justify-between px-1 py-1 dark:bg-gray-800 bg-white shadow-md sm:px-4 sm:py-2 md:flex-row",
+        { "mt-10 flex-shrink-0": floating, "mb-8 rounded-lg": !floating }
       )}
     >
       <p className="inline-flex dark:text-gray-400">Filters</p>
@@ -203,6 +203,6 @@ function Filter({
       </div>
     </div>
   );
-}
+};
 
 export default Filter;
diff --git a/src/components/DistrictDashboard/GMap.js b/src/components/DistrictDashboard/GMap.js
index 474c443..0f212f6 100644
--- a/src/components/DistrictDashboard/GMap.js
+++ b/src/components/DistrictDashboard/GMap.js
@@ -9,18 +9,17 @@ import {
   GMAP_KEY,
 } from "../../utils/constants";
 import Marker from "../Marker";
+import clsx from "clsx";
 
-const selectedButtonClasses = (bool) => {
-  const d = " px-4 py-2 font-bold rounded-lg shadow ";
-  return (
-    d +
-    (bool
-      ? "bg-primary-500 text-white"
-      : "dark:hover:bg-primary-500 hover:text-white hover:bg-primary-500 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-white")
-  );
+const selectedButtonClasses = (isWhite) => {
+  return clsx("px-4 py-2 font-bold rounded-lg shadow", {
+    "bg-primary-500 text-white": isWhite,
+    "dark:hover:bg-primary-500 hover:text-white hover:bg-primary-500 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-white":
+      !isWhite,
+  });
 };
 
-function GMap({ district, facilities, className }) {
+const GMap = ({ district, facilities, className }) => {
   const [selectedBedType, setSelectedBedType] = useState("All");
   const { mode } = useContext(WindmillContext);
 
@@ -477,6 +476,6 @@ function GMap({ district, facilities, className }) {
       </CardBody>
     </Card>
   );
-}
+};
 
 export default GMap;
diff --git a/src/components/DistrictDashboard/GenericTable.js b/src/components/DistrictDashboard/GenericTable.js
index d7e35c2..86e57e1 100644
--- a/src/components/DistrictDashboard/GenericTable.js
+++ b/src/components/DistrictDashboard/GenericTable.js
@@ -14,14 +14,14 @@ import fuzzysort from "fuzzysort";
 import React, { useEffect, useState } from "react";
 import { CSVLink } from "react-csv";
 
-function GenericTable({
+const GenericTable = ({
   columns = [],
   setOrderBy,
   data,
   className,
   exported = null,
   title = "Facilities",
-}) {
+}) => {
   const resultsPerPage = 25;
   const [filteredData, setFilteredData] = useState(data);
   const [page, setPage] = useState(0);
@@ -140,6 +140,6 @@ function GenericTable({
       </TableContainer>
     </div>
   );
-}
+};
 
 export default GenericTable;
diff --git a/src/components/DistrictDashboard/Lsg.js b/src/components/DistrictDashboard/Lsg.js
index b8e0fd9..a089285 100644
--- a/src/components/DistrictDashboard/Lsg.js
+++ b/src/components/DistrictDashboard/Lsg.js
@@ -7,8 +7,8 @@ import useSWR from "swr";
 import { careSummary } from "../../utils/api";
 import { PATIENT_TYPES } from "../../utils/constants";
 import { dateString, getNDateAfter, getNDateBefore } from "../../utils/utils";
-import { InfoCard } from "../Cards/InfoCard";
-import { ValuePill } from "../Pill/ValuePill";
+import InfoCard from "../Cards/InfoCard";
+import ValuePill from "../Pill/ValuePill";
 import ThemedSuspense from "../ThemedSuspense";
 import GenericTable from "./GenericTable";
 
@@ -29,7 +29,7 @@ const initiallsgTrivia = {
   icu_with_non_invasive_ventilator: { total: 0, today: 0 },
 };
 
-function Lsg({ filterDistrict, date }) {
+const Lsg = ({ filterDistrict, date }) => {
   const { data } = useSWR(
     ["Patient", date, filterDistrict.id],
     (url, date, district) =>
@@ -168,6 +168,6 @@ function Lsg({ filterDistrict, date }) {
       </Suspense>
     </>
   );
-}
+};
 
 export default Lsg;
diff --git a/src/components/DistrictDashboard/OxygenMonitor.js b/src/components/DistrictDashboard/OxygenMonitor.js
index 91be099..fe0aa85 100644
--- a/src/components/DistrictDashboard/OxygenMonitor.js
+++ b/src/components/DistrictDashboard/OxygenMonitor.js
@@ -17,7 +17,7 @@ import {
   getNDateBefore,
   processFacilities,
 } from "../../utils/utils";
-import { OxygenCard } from "../Cards/OxygenCard";
+import OxygenCard from "../Cards/OxygenCard";
 import { SectionTitle } from "../Typography/Title";
 import { CSVLink } from "react-csv";
 import Pagination from "../Pagination";
@@ -248,7 +248,7 @@ const selectorToText = (selector) => {
   }
 };
 
-function OxygenMonitor({ filterDistrict, filterFacilityTypes, date }) {
+const OxygenMonitor = ({ filterDistrict, filterFacilityTypes, date }) => {
   const [orderBy, setOrderBy] = useState({
     selector: "inventoryModifiedDate",
     order: 1,
@@ -487,6 +487,6 @@ function OxygenMonitor({ filterDistrict, filterFacilityTypes, date }) {
       </div>
     </>
   );
-}
+};
 
 export default OxygenMonitor;
diff --git a/src/components/DistrictDashboard/Patient.js b/src/components/DistrictDashboard/Patient.js
index 21c84ad..a9c7caf 100644
--- a/src/components/DistrictDashboard/Patient.js
+++ b/src/components/DistrictDashboard/Patient.js
@@ -12,8 +12,8 @@ import {
   getNDateBefore,
   processFacilities,
 } from "../../utils/utils";
-import { InfoCard } from "../Cards/InfoCard";
-import { ValuePill } from "../Pill/ValuePill";
+import InfoCard from "../Cards/InfoCard";
+import ValuePill from "../Pill/ValuePill";
 import ThemedSuspense from "../ThemedSuspense";
 import GenericTable from "./GenericTable";
 
@@ -36,7 +36,7 @@ const initialFacilitiesTrivia = {
   icu_with_non_invasive_ventilator: { total: 0, today: 0 },
 };
 
-function Patient({ filterDistrict, filterFacilityTypes, date }) {
+const Patient = ({ filterDistrict, filterFacilityTypes, date }) => {
   const { data } = useSWR(
     ["Patient", date, filterDistrict.id],
     (url, date, district) =>
@@ -148,6 +148,6 @@ function Patient({ filterDistrict, filterFacilityTypes, date }) {
       </Suspense>
     </>
   );
-}
+};
 
 export default Patient;
diff --git a/src/components/DistrictDashboard/PatientTimeseries.js b/src/components/DistrictDashboard/PatientTimeseries.js
index c0c2f9e..ab1f8d7 100644
--- a/src/components/DistrictDashboard/PatientTimeseries.js
+++ b/src/components/DistrictDashboard/PatientTimeseries.js
@@ -11,7 +11,7 @@ import {
 import TimeseriesBarChart from "../Chart/TimeseriesBarChart";
 import NoData from "../NoData";
 
-function PatientTimeseries({ filterDistrict, filterFacilityTypes, dates }) {
+const PatientTimeseries = ({ filterDistrict, filterFacilityTypes, dates }) => {
   const { data } = useSWR(
     ["PatientTimeseries", dates, filterDistrict.id],
     (url, dates, district) =>
@@ -84,6 +84,6 @@ function PatientTimeseries({ filterDistrict, filterFacilityTypes, dates }) {
       )}
     </div>
   );
-}
+};
 
 export default PatientTimeseries;
diff --git a/src/components/DistrictDashboard/Tests.js b/src/components/DistrictDashboard/Tests.js
index 704eb5b..364de06 100644
--- a/src/components/DistrictDashboard/Tests.js
+++ b/src/components/DistrictDashboard/Tests.js
@@ -12,8 +12,8 @@ import {
   getNDateBefore,
   processFacilities,
 } from "../../utils/utils";
-import { InfoCard } from "../Cards/InfoCard";
-import { ValuePill } from "../Pill/ValuePill";
+import InfoCard from "../Cards/InfoCard";
+import ValuePill from "../Pill/ValuePill";
 import ThemedSuspense from "../ThemedSuspense";
 import GenericTable from "./GenericTable";
 
@@ -29,7 +29,7 @@ const initialFacilitiesTrivia = {
   result_positive: 0,
 };
 
-function Tests({ filterDistrict, filterFacilityTypes, date }) {
+const Tests = ({ filterDistrict, filterFacilityTypes, date }) => {
   const { data } = useSWR(
     ["Tests", date, filterDistrict.id],
     (url, date, district) =>
@@ -137,6 +137,6 @@ function Tests({ filterDistrict, filterFacilityTypes, date }) {
       </Suspense>
     </>
   );
-}
+};
 
 export default Tests;
diff --git a/src/components/DistrictDashboard/TestsTimeseries.js b/src/components/DistrictDashboard/TestsTimeseries.js
index 32b818e..b9ceff1 100644
--- a/src/components/DistrictDashboard/TestsTimeseries.js
+++ b/src/components/DistrictDashboard/TestsTimeseries.js
@@ -11,7 +11,7 @@ import {
 import TimeseriesLineChart from "../Chart/TimeseriesLineChart";
 import NoData from "../NoData";
 
-function TestsTimeseries({ filterDistrict, filterFacilityTypes, dates }) {
+const TestsTimeseries = ({ filterDistrict, filterFacilityTypes, dates }) => {
   const { data } = useSWR(
     ["TestsTimeseries", dates, filterDistrict.id],
     (url, dates, district) =>
@@ -87,6 +87,6 @@ function TestsTimeseries({ filterDistrict, filterFacilityTypes, dates }) {
       )}
     </div>
   );
-}
+};
 
 export default TestsTimeseries;
diff --git a/src/components/DistrictDashboard/Triage.js b/src/components/DistrictDashboard/Triage.js
index 0a4bcec..1ccb9b7 100644
--- a/src/components/DistrictDashboard/Triage.js
+++ b/src/components/DistrictDashboard/Triage.js
@@ -12,8 +12,8 @@ import {
   getNDateBefore,
   processFacilities,
 } from "../../utils/utils";
-import { InfoCard } from "../Cards/InfoCard";
-import { ValuePill } from "../Pill/ValuePill";
+import InfoCard from "../Cards/InfoCard";
+import ValuePill from "../Pill/ValuePill";
 import ThemedSuspense from "../ThemedSuspense";
 import GenericTable from "./GenericTable";
 
@@ -32,7 +32,7 @@ const initialFacilitiesTrivia = {
   total_patients_home_quarantine: 0,
 };
 
-function Triage({ filterDistrict, filterFacilityTypes, date }) {
+const Triage = ({ filterDistrict, filterFacilityTypes, date }) => {
   const { data } = useSWR(
     ["Triage", date, filterDistrict.id],
     (url, date, district) =>
@@ -149,6 +149,6 @@ function Triage({ filterDistrict, filterFacilityTypes, date }) {
       </Suspense>
     </>
   );
-}
+};
 
 export default Triage;
diff --git a/src/components/DistrictDashboard/TriageTimeseries.js b/src/components/DistrictDashboard/TriageTimeseries.js
index a08af03..c1ebe10 100644
--- a/src/components/DistrictDashboard/TriageTimeseries.js
+++ b/src/components/DistrictDashboard/TriageTimeseries.js
@@ -11,7 +11,7 @@ import {
 import TimeseriesLineChart from "../Chart/TimeseriesLineChart";
 import NoData from "../NoData";
 
-function TriageTimeseries({ filterDistrict, filterFacilityTypes, dates }) {
+const TriageTimeseries = ({ filterDistrict, filterFacilityTypes, dates }) => {
   const { data } = useSWR(
     ["TriageTimeseries", dates, filterDistrict.id],
     (url, dates, district) =>
@@ -93,6 +93,6 @@ function TriageTimeseries({ filterDistrict, filterFacilityTypes, dates }) {
       )}
     </div>
   );
-}
+};
 
 export default TriageTimeseries;
diff --git a/src/components/Header.js b/src/components/Header.js
index 2e03c97..29f25c4 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -5,7 +5,7 @@ import { useHistory } from "react-router-dom";
 
 import { SidebarContext } from "../context/SidebarContext";
 
-function Header() {
+const Header = () => {
   const { mode, toggleMode } = useContext(WindmillContext);
   const { toggleSidebar } = useContext(SidebarContext);
   const history = useHistory();
@@ -79,6 +79,6 @@ function Header() {
       </div>
     </header>
   );
-}
+};
 
 export default Header;
diff --git a/src/components/NoData.js b/src/components/NoData.js
index d3232c3..9a78cd1 100644
--- a/src/components/NoData.js
+++ b/src/components/NoData.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-function NoData() {
+const NoData = () => {
   return (
     <div className="flex justify-center p-6 w-full dark:bg-gray-900 overflow-hidden">
       <div className="self-center dark:text-gray-400 text-gray-600 text-6xl font-semibold">
@@ -8,6 +8,6 @@ function NoData() {
       </div>
     </div>
   );
-}
+};
 
 export default NoData;
diff --git a/src/components/Pill/Pill.js b/src/components/Pill/Pill.js
index 88769b3..fa5175f 100644
--- a/src/components/Pill/Pill.js
+++ b/src/components/Pill/Pill.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-export function Pill({ title, children }) {
+const Pill = ({ title, children }) => {
   return (
     <div className="flex items-center justify-between h-6 dark:text-gray-200 dark:bg-gray-800 rounded-lg shadow-xs">
       <span className="mx-2 text-xxs font-medium leading-none xl:text-sm">
@@ -11,4 +11,6 @@ export function Pill({ title, children }) {
       </div>
     </div>
   );
-}
+};
+
+export default Pill;
diff --git a/src/components/Pill/ValuePill.js b/src/components/Pill/ValuePill.js
index 40685ed..cb7c8da 100644
--- a/src/components/Pill/ValuePill.js
+++ b/src/components/Pill/ValuePill.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { animated, config, useSpring } from "react-spring";
 
-export function ValuePill({ title, value = 0 }) {
+const ValuePill = ({ title, value = 0 }) => {
   const { v } = useSpring({
     from: {
       v: 0,
@@ -25,4 +25,6 @@ export function ValuePill({ title, value = 0 }) {
       </div>
     </div>
   );
-}
+};
+
+export default ValuePill;
diff --git a/src/components/Sidebar/SidebarContent.js b/src/components/Sidebar/SidebarContent.js
index 6fbae67..462fbb3 100644
--- a/src/components/Sidebar/SidebarContent.js
+++ b/src/components/Sidebar/SidebarContent.js
@@ -5,7 +5,7 @@ import { ReactComponent as CoronaSafeLogo } from "../../assets/icons/coronaSafeL
 import routes from "../../routes/sidebar";
 import SidebarSubmenu from "./SidebarSubmenu";
 
-function SidebarContent() {
+const SidebarContent = () => {
   return (
     <div className="flex flex-col justify-between py-4 min-h-full dark:text-gray-400 text-gray-500">
       <ul className="mt-2">
@@ -74,6 +74,6 @@ function SidebarContent() {
       </ul>
     </div>
   );
-}
+};
 
 export default SidebarContent;
diff --git a/src/components/Sidebar/SidebarSubmenu.js b/src/components/Sidebar/SidebarSubmenu.js
index 1cb271f..0acdd5d 100644
--- a/src/components/Sidebar/SidebarSubmenu.js
+++ b/src/components/Sidebar/SidebarSubmenu.js
@@ -3,12 +3,12 @@ import React, { useState } from "react";
 import { ChevronDown } from "react-feather";
 import { NavLink, Route } from "react-router-dom";
 
-function SidebarSubmenu({ route }) {
+const SidebarSubmenu = ({ route }) => {
   const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState(false);
 
-  function handleDropdownMenuClick() {
+  const handleDropdownMenuClick = () => {
     setIsDropdownMenuOpen(!isDropdownMenuOpen);
-  }
+  };
 
   return (
     <li className="relative px-6 py-3" key={route.name}>
@@ -60,6 +60,6 @@ function SidebarSubmenu({ route }) {
       </Transition>
     </li>
   );
-}
+};
 
 export default SidebarSubmenu;
diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js
index 884827b..de271f6 100644
--- a/src/components/Sidebar/index.js
+++ b/src/components/Sidebar/index.js
@@ -4,7 +4,7 @@ import React, { useContext } from "react";
 import { SidebarContext } from "../../context/SidebarContext";
 import SidebarContent from "./SidebarContent";
 
-function Sidebar() {
+const Sidebar = () => {
   const { isSidebarOpen, closeSidebar } = useContext(SidebarContext);
 
   return (
@@ -36,6 +36,6 @@ function Sidebar() {
       </>
     </Transition>
   );
-}
+};
 
 export default Sidebar;
diff --git a/src/components/ThemedSuspense.js b/src/components/ThemedSuspense.js
index 92dafca..a84baef 100644
--- a/src/components/ThemedSuspense.js
+++ b/src/components/ThemedSuspense.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-function ThemedSuspense({ className }) {
+const ThemedSuspense = ({ className }) => {
   return (
     <div className={`flex justify-center p-6 overflow-hidden ${className}`}>
       <div className="lds-ripple flex self-center">
@@ -9,6 +9,6 @@ function ThemedSuspense({ className }) {
       </div>
     </div>
   );
-}
+};
 
 export default ThemedSuspense;
diff --git a/src/components/Typography/Title.js b/src/components/Typography/Title.js
index 4cef18a..709e742 100644
--- a/src/components/Typography/Title.js
+++ b/src/components/Typography/Title.js
@@ -1,17 +1,19 @@
 import React from "react";
 
-export function PageTitle({ children }) {
+const PageTitle = ({ children }) => {
   return (
     <h1 className="my-6 dark:text-gray-200 text-gray-700 text-2xl font-semibold">
       {children}
     </h1>
   );
-}
+};
 
-export function SectionTitle({ children }) {
+const SectionTitle = ({ children }) => {
   return (
     <h2 className="mb-4 dark:text-gray-300 text-gray-600 text-lg font-semibold">
       {children}
     </h2>
   );
-}
+};
+
+export { PageTitle, SectionTitle };
diff --git a/src/containers/Layout.js b/src/containers/Layout.js
index 2368ac1..4d0cfa0 100644
--- a/src/containers/Layout.js
+++ b/src/containers/Layout.js
@@ -12,7 +12,7 @@ import Main from "./Main";
 
 const Page404 = lazy(() => import("../pages/404"));
 
-function Layout() {
+const Layout = () => {
   const { isSidebarOpen, closeSidebar } = useContext(SidebarContext);
   const location = useLocation();
 
@@ -23,7 +23,7 @@ function Layout() {
   return (
     <div
       className={clsx(
-        "flex h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-200 ease-linear",
+        "bg-gray-50 flex h-screen dark:bg-gray-900 transition-colors duration-200 ease-linear",
         isSidebarOpen && "overflow-hidden"
       )}
     >
@@ -53,6 +53,6 @@ function Layout() {
       </div>
     </div>
   );
-}
+};
 
 export default Layout;
diff --git a/src/containers/Main.js b/src/containers/Main.js
index bd87b47..033b876 100644
--- a/src/containers/Main.js
+++ b/src/containers/Main.js
@@ -1,11 +1,11 @@
 import React from "react";
 
-function Main({ children }) {
+const Main = ({ children }) => {
   return (
     <main className="h-full overflow-y-auto">
       <div className="container grid mx-auto px-6">{children}</div>
     </main>
   );
-}
+};
 
 export default Main;
diff --git a/src/context/SidebarContext.js b/src/context/SidebarContext.js
index bd42c90..e36bf9f 100644
--- a/src/context/SidebarContext.js
+++ b/src/context/SidebarContext.js
@@ -2,16 +2,11 @@ import React, { useMemo, useState } from "react";
 
 export const SidebarContext = React.createContext();
 
-export function SidebarProvider({ children }) {
+const SidebarProvider = ({ children }) => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 
-  function toggleSidebar() {
-    setIsSidebarOpen(!isSidebarOpen);
-  }
-
-  function closeSidebar() {
-    setIsSidebarOpen(false);
-  }
+  const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);
+  const closeSidebar = () => setIsSidebarOpen(false);
 
   const value = useMemo(
     () => ({
@@ -25,4 +20,6 @@ export function SidebarProvider({ children }) {
   return (
     <SidebarContext.Provider value={value}>{children}</SidebarContext.Provider>
   );
-}
+};
+
+export default SidebarProvider;
diff --git a/src/index.js b/src/index.js
index 3695294..47bd92a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -7,7 +7,7 @@ import { register } from "register-service-worker";
 import App from "./App";
 import "./assets/css/tailwind.css";
 import ThemedSuspense from "./components/ThemedSuspense";
-import { SidebarProvider } from "./context/SidebarContext";
+import SidebarProvider from "./context/SidebarContext";
 import myTheme from "./utils/theme";
 
 ReactDOM.render(
diff --git a/src/pages/404.js b/src/pages/404.js
index 64b5e11..0c3aeeb 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -2,7 +2,7 @@ import React from "react";
 import { XOctagon } from "react-feather";
 import { useHistory } from "react-router-dom";
 
-function Page404() {
+const Page404 = () => {
   const history = useHistory();
 
   return (
@@ -27,6 +27,6 @@ function Page404() {
       </p>
     </div>
   );
-}
+};
 
 export default Page404;
diff --git a/src/pages/DistrictDashboard.js b/src/pages/DistrictDashboard.js
index 970ed64..376ced4 100644
--- a/src/pages/DistrictDashboard.js
+++ b/src/pages/DistrictDashboard.js
@@ -41,7 +41,7 @@ const OxygenMonitor = lazy(() =>
   import("../components/DistrictDashboard/OxygenMonitor")
 );
 
-function DistrictDashboard() {
+const DistrictDashboard = () => {
   const todayDate = new Date();
   const params = useParams();
   const [isOpen, setIsOpen] = useState(false);
@@ -176,7 +176,7 @@ function DistrictDashboard() {
     }
   };
 
-  function ConditionalFilter({ floating }) {
+  const ConditionalFilter = ({ floating }) => {
     return (
       <Filter
         floating={floating}
@@ -192,7 +192,7 @@ function DistrictDashboard() {
         content={content}
       />
     );
-  }
+  };
   const transitions = useTransition(content, null, {
     from: { opacity: 0 },
     enter: { opacity: 1 },
@@ -285,6 +285,6 @@ function DistrictDashboard() {
       </Suspense>
     </div>
   );
-}
+};
 
 export default DistrictDashboard;
diff --git a/src/pages/Facility.js b/src/pages/Facility.js
index e4003ed..1e6836f 100644
--- a/src/pages/Facility.js
+++ b/src/pages/Facility.js
@@ -17,7 +17,7 @@ import Oxygen from "../components/Facility/Oxygen";
 import ExpectedBurnRate from "../components/Facility/ExpectedBurnRate";
 import FacilityInfo from "../components/Facility/FacilityInfo";
 
-function Facility() {
+const Facility = () => {
   const params = useParams();
   const facility = params.facilityId;
   // const date = Date.parse(query.get("date"));
@@ -80,6 +80,6 @@ function Facility() {
       </div>
     )
   );
-}
+};
 
 export default Facility;
diff --git a/src/utils/api.js b/src/utils/api.js
index e5a6c61..71e43a0 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -1,12 +1,12 @@
 import fetch from "unfetch";
 
-export function careSummary(
+const careSummary = async (
   type,
   start_date,
   end_date,
   district,
   limit = 2000
-) {
+) => {
   return fetch(
     `/api/v1/${type}_summary/?` +
       new URLSearchParams({
@@ -16,9 +16,9 @@ export function careSummary(
         limit,
       })
   ).then((r) => r.json());
-}
+};
 
-export function individualCareSummary(type, start_date, end_date, facility) {
+const individualCareSummary = async (type, start_date, end_date, facility) => {
   return fetch(
     `/api/v1/${type}_summary/?` +
       new URLSearchParams({
@@ -27,4 +27,6 @@ export function individualCareSummary(type, start_date, end_date, facility) {
         facility,
       })
   ).then((r) => r.json());
-}
+};
+
+export { careSummary, individualCareSummary };