diff --git a/src/case-study.js b/src/case-study.js
index 31a84a1..e398318 100644
--- a/src/case-study.js
+++ b/src/case-study.js
@@ -7,12 +7,12 @@ import {
   Heading,
   Section,
   Table,
-  Text
+  Text,
 } from "./components";
 
 const shadows = {
   white: "xl-white",
-  "dark-grey": "xl-black"
+  "dark-grey": "xl-black",
 };
 
 export default function CaseStudy({ data }) {
@@ -26,9 +26,9 @@ export default function CaseStudy({ data }) {
     price,
     time_taken,
     date,
-    content
+    content,
   } = data.caseStudy;
-  const images = data.images.nodes.map(node => node.childImageSharp);
+  const images = data.images.nodes.map((node) => node.childImageSharp);
   return (
     <Layout location={path} title={`${title} Case Study`}>
       <Header image={images[image].full}>
diff --git a/src/components/button.js b/src/components/button.js
index 696519a..6533cc9 100644
--- a/src/components/button.js
+++ b/src/components/button.js
@@ -13,7 +13,7 @@ const Container = styled.button`
   text-decoration: none;
   cursor: pointer;
 
-  ${props =>
+  ${(props) =>
     props.float &&
     css`
       float: ${props.float};
diff --git a/src/components/content.js b/src/components/content.js
index 841a562..5517b35 100644
--- a/src/components/content.js
+++ b/src/components/content.js
@@ -2,7 +2,7 @@ import React from "react";
 import styled from "@emotion/styled";
 
 const Container = styled.div`
-  transform: ${props =>
+  transform: ${(props) =>
     props.offset
       ? `perspective(500px) translate3d(-10%, 0, -200px)`
       : `translate3d(0, 0, 0)`};
diff --git a/src/components/custom-slick.js b/src/components/custom-slick.js
index 3fe2d24..63b4740 100644
--- a/src/components/custom-slick.js
+++ b/src/components/custom-slick.js
@@ -9,7 +9,7 @@ import "slick-carousel/slick/slick.css";
 const Button = styled.button`
   position: absolute;
   top: 50%;
-  ${props =>
+  ${(props) =>
     props.variant === "right" &&
     css`
       right: 0;
@@ -61,7 +61,7 @@ export default function CustomSlick({ children }) {
     speed: 500,
     autoplaySpeed: 10000,
     slidesToShow: 1,
-    slidesToScroll: 1
+    slidesToScroll: 1,
   };
   useEffect(() => {
     slick.current.slickPlay();
diff --git a/src/components/grid.js b/src/components/grid.js
index 4c9465b..b313876 100644
--- a/src/components/grid.js
+++ b/src/components/grid.js
@@ -5,7 +5,7 @@ import { css } from "@emotion/react";
 const Container = styled.div`
   display: grid;
   gap: var(--spacing-y-lg) var(--spacing-x-md);
-  ${props =>
+  ${(props) =>
     props.columns &&
     props.columns.map((column, i) =>
       i === 0 && column > 1
@@ -24,7 +24,7 @@ const Container = styled.div`
 `
     )}
 
-  ${props =>
+  ${(props) =>
     props.verticalSeparator &&
     css`
       @media (max-width: ${props.verticalSeparator}) {
@@ -43,7 +43,7 @@ export default function Grid({
   columns,
   breakpoints = ["30em"],
   verticalSeparator,
-  children
+  children,
 }) {
   return (
     <Container
diff --git a/src/components/header-logo.js b/src/components/header-logo.js
index 795ce70..5142e59 100644
--- a/src/components/header-logo.js
+++ b/src/components/header-logo.js
@@ -27,7 +27,7 @@ const Top = styled.div`
     fill: var(--color-secondary);
   }
 
-  ${props =>
+  ${(props) =>
     props.visible &&
     css`
       filter: none;
@@ -39,7 +39,7 @@ const Top = styled.div`
 const Middle = styled.div`
   opacity: 0;
   transition: opacity 0.5s ease-in 0.75s;
-  ${props =>
+  ${(props) =>
     props.visible &&
     css`
       opacity: 1;
@@ -63,7 +63,7 @@ const Bottom = styled.div`
     fill: var(--color-secondary);
   }
 
-  ${props =>
+  ${(props) =>
     props.visible &&
     css`
       filter: none;
diff --git a/src/components/header.js b/src/components/header.js
index b726b9e..91da0bd 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -7,34 +7,34 @@ const Container = styled.header`
   height: 50vh;
   min-height: 280px;
   color: var(--color-white);
-  ${props => props.avoidNav && `margin-top: 40px;`}
+  ${(props) => props.avoidNav && `margin-top: 40px;`}
 `;
 
 const Content = styled.div`
   position: absolute;
-  ${props =>
+  ${(props) =>
     props.posY !== "bottom" &&
     css`
       top: ${props.posY === "top" ? 0 : "50%"};
     `}
-  ${props =>
+  ${(props) =>
     props.posY === "bottom" &&
     css`
       bottom: 0;
     `}
-  ${props =>
+  ${(props) =>
     props.posX !== "right" &&
     css`
       left: ${props.posX === "left" ? 0 : "50%"};
     `}
-  ${props =>
+  ${(props) =>
     props.posX === "right" &&
     css`
       right: 0;
     `}
   transform: translate(
-    ${props => (props.posX === "middle" ? "-50%" : 0)},
-    ${props => (props.posY === "middle" ? "-50%" : 0)}
+    ${(props) => (props.posX === "middle" ? "-50%" : 0)},
+    ${(props) => (props.posY === "middle" ? "-50%" : 0)}
   );
   max-width: var(--page-max-width);
   padding: var(--spacing-y-sm) var(--spacing-x-sm);
@@ -50,7 +50,7 @@ export default function Header({
   avoidNav,
   variant,
   swap,
-  children
+  children,
 }) {
   const [posY, posX] = position.split(" ");
   return (
diff --git a/src/components/heading.js b/src/components/heading.js
index 6e306c5..7d6e8d8 100644
--- a/src/components/heading.js
+++ b/src/components/heading.js
@@ -3,20 +3,21 @@ import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 
 const Styles = styled.h1`
-  margin: ${props => (props.noMargin ? 0 : `0 0 var(--spacing-y-sm)`)};
-  font-size: ${props => `var(--font-size-${props.size})`};
-  text-shadow: 0 0 ${props => props.shadowSize} ${props => props.shadowColor};
-  ${props =>
+  margin: ${(props) => (props.noMargin ? 0 : `0 0 var(--spacing-y-sm)`)};
+  font-size: ${(props) => `var(--font-size-${props.size})`};
+  text-shadow: 0 0 ${(props) => props.shadowSize}
+    ${(props) => props.shadowColor};
+  ${(props) =>
     props.color &&
     css`
       color: var(--color-${props.color});
     `}
-  ${props =>
+  ${(props) =>
     props.noWrap &&
     css`
       white-space: nowrap;
     `}
-  ${props =>
+  ${(props) =>
     props.align &&
     css`
       text-align: ${props.align};
@@ -29,19 +30,19 @@ const sizes = {
   h3: "lg",
   h4: "lg",
   h5: "lg",
-  h6: "lg"
+  h6: "lg",
 };
 
 const shadowSizes = {
   sm: "2px",
   md: "5px",
   lg: "10px",
-  xl: "15px"
+  xl: "15px",
 };
 
 const shadowColors = {
   white: "rgba(255, 255, 255, 0.25)",
-  black: "rgba(0, 0, 0, 0.25)"
+  black: "rgba(0, 0, 0, 0.25)",
 };
 
 export default function Heading({
diff --git a/src/components/icon-with-content.js b/src/components/icon-with-content.js
index 91a0459..f04a761 100644
--- a/src/components/icon-with-content.js
+++ b/src/components/icon-with-content.js
@@ -21,7 +21,7 @@ const Content = styled.div`
 export default function IconWithContent({ children }) {
   return (
     <Container>
-      {children.map(child => {
+      {children.map((child) => {
         if (child.type === Icon) {
           return <IconWrapper key="icon">{child}</IconWrapper>;
         }
diff --git a/src/components/icon.js b/src/components/icon.js
index 2cf8308..60c3e1e 100644
--- a/src/components/icon.js
+++ b/src/components/icon.js
@@ -4,9 +4,9 @@ import { css } from "@emotion/react";
 
 const Container = styled.span`
   display: inline-flex;
-  width: ${props => `var(--icon-size-${props.size})`};
-  height: ${props => `var(--icon-size-${props.size})`};
-  ${props =>
+  width: ${(props) => `var(--icon-size-${props.size})`};
+  height: ${(props) => `var(--icon-size-${props.size})`};
+  ${(props) =>
     props.color &&
     css`
       color: var(--color-${props.color});
diff --git a/src/components/index.js b/src/components/index.js
index a229cef..92c0041 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -23,6 +23,6 @@ export { default as ReviewSummary } from "./review-summary";
 export { default as Section } from "./section";
 export { default as Select } from "./select";
 export { default as Table } from "./table";
-export { default as Team } from './team';
+export { default as Team } from "./team";
 export { default as Text } from "./text";
 export { default as Tile } from "./tile";
diff --git a/src/components/input-text.js b/src/components/input-text.js
index dd82063..5681c91 100644
--- a/src/components/input-text.js
+++ b/src/components/input-text.js
@@ -23,7 +23,7 @@ export default function InputText({
   value,
   onChange,
   required,
-  textArea
+  textArea,
 }) {
   return (
     <Input
diff --git a/src/components/link.js b/src/components/link.js
index 3cb8bfb..6f3fa1f 100644
--- a/src/components/link.js
+++ b/src/components/link.js
@@ -4,13 +4,13 @@ import { css } from "@emotion/react";
 import { Link as GatsbyLink } from "gatsby";
 
 const StyledLink = styled.a`
-  ${props =>
+  ${(props) =>
     props.size &&
     css`
       font-size: var(--font-size-${props.size});
     `}
   color: var(--color-dark);
-  ${props =>
+  ${(props) =>
     props.noDecoration
       ? css`
           text-decoration: none;
@@ -20,7 +20,7 @@ const StyledLink = styled.a`
           text-decoration-thickness: 2px;
           text-underline-offset: 3px;
         `}
-  ${props =>
+  ${(props) =>
     props.weight &&
     css`
       font-weight: ${props.weight};
diff --git a/src/components/map.js b/src/components/map.js
index 12ede31..8598206 100644
--- a/src/components/map.js
+++ b/src/components/map.js
@@ -27,7 +27,7 @@ export default function CustomMap({ ...other }) {
   `);
 
   const Wrapper = GoogleApiWrapper({
-    apiKey: data.site.siteMetadata.secrets.GMAPS_APIKEY
+    apiKey: data.site.siteMetadata.secrets.GMAPS_APIKEY,
   })(MapContainer);
   return <Wrapper {...other} />;
 }
diff --git a/src/components/menu-button.js b/src/components/menu-button.js
index d966e78..26325b7 100644
--- a/src/components/menu-button.js
+++ b/src/components/menu-button.js
@@ -35,7 +35,7 @@ const Bar = styled.span`
 
 const TopBar = styled(Bar)`
   top: 5px;
-  transform: ${props =>
+  transform: ${(props) =>
     props.open
       ? `translate3d(0, 10px, 0) rotate(50deg)`
       : `translate3d(0, 0, 0) rotate(0)`};
@@ -44,13 +44,13 @@ const TopBar = styled(Bar)`
 
 const MiddleBar = styled(Bar)`
   top: 15px;
-  opacity: ${props => (props.open ? 0 : 1)};
+  opacity: ${(props) => (props.open ? 0 : 1)};
   transition: opacity 1s ease-in;
 `;
 
 const BottomBar = styled(Bar)`
   top: 25px;
-  transform: ${props =>
+  transform: ${(props) =>
     props.open
       ? `translate3d(0, -10px, 0) rotate(-410deg)`
       : `translate3d(0, 0, 0) rotate(0)`};
diff --git a/src/components/nav-item.js b/src/components/nav-item.js
index 2ccb4a4..af53bac 100644
--- a/src/components/nav-item.js
+++ b/src/components/nav-item.js
@@ -28,10 +28,10 @@ const ListItem = styled.li`
   }
 
   @media (max-width: 30em) {
-    transform: ${props =>
+    transform: ${(props) =>
       props.open ? `translate3d(0, 0, 0)` : `translate3d(-100%, 0, 0)`};
     transition: transform 0.3s ease-in-out
-      calc(0.15s + (${props => props.index} * 0.1s));
+      calc(0.15s + (${(props) => props.index} * 0.1s));
   }
 `;
 
diff --git a/src/components/nav-link.js b/src/components/nav-link.js
index 5976b78..fc2d90c 100644
--- a/src/components/nav-link.js
+++ b/src/components/nav-link.js
@@ -25,7 +25,7 @@ const Link = styled(GatsbyLink)`
     margin: 0 var(--spacing-x-xs);
     padding: 9px 0;
     border-bottom: 2px solid
-      ${props =>
+      ${(props) =>
         props.active === "true" || props.partiallyActive
           ? `var(--color-white)`
           : `transparent`};
diff --git a/src/components/nav.js b/src/components/nav.js
index dd91d42..a89be98 100644
--- a/src/components/nav.js
+++ b/src/components/nav.js
@@ -11,10 +11,10 @@ const Container = styled.div`
   bottom: 0;
   left: 0;
   z-index: 6;
-  background-color: ${props =>
+  background-color: ${(props) =>
     props.open ? `rgba(0, 0, 0, 0.8)` : `rgba(0, 0, 0, 0.4)`};
   backdrop-filter: blur(2px);
-  transform: ${props =>
+  transform: ${(props) =>
     props.open
       ? `translate3d(0, 0, 0)`
       : `translate3d(0, calc(-100% + 40px), 0)`};
@@ -51,7 +51,7 @@ const Heading = styled(Link)`
   display: flex;
   flex-direction: column;
   justify-content: space-around;
-  opacity: ${props => (props.hidden ? 0 : 1)};
+  opacity: ${(props) => (props.hidden ? 0 : 1)};
   transform: opacity 0.3s ease-in;
 
   svg {
diff --git a/src/components/review-summary.js b/src/components/review-summary.js
index 9d72bbc..24a52e1 100644
--- a/src/components/review-summary.js
+++ b/src/components/review-summary.js
@@ -12,7 +12,7 @@ import Calendar from "../icons/calendar.svg";
 const ICONS = {
   Bark: <Bark />,
   Checkatrade: <Checkatrade />,
-  "Rated People": <RatedPeople />
+  "Rated People": <RatedPeople />,
 };
 
 const Container = styled.div`
diff --git a/src/components/section.js b/src/components/section.js
index 46bdaba..ece7954 100644
--- a/src/components/section.js
+++ b/src/components/section.js
@@ -4,10 +4,10 @@ import { Heading } from ".";
 
 const Container = styled.div`
   padding: var(--spacing-y-lg) var(--spacing-x-sm);
-  ${props => !props.variant && `background-color: var(--color-white);`}
-  ${props =>
+  ${(props) => !props.variant && `background-color: var(--color-white);`}
+  ${(props) =>
     props.variant === "primary" && `background-color: var(--color-light);`}
-  ${props =>
+  ${(props) =>
     props.variant === "transparent" &&
     `background-color: var(--color-semi-transparent);`}
 `;
@@ -25,7 +25,7 @@ export default function Section({
   heading,
   headingElement = "h2",
   children,
-  variant
+  variant,
 }) {
   return (
     <Container variant={variant}>
diff --git a/src/components/text.js b/src/components/text.js
index c4527c1..7962683 100644
--- a/src/components/text.js
+++ b/src/components/text.js
@@ -3,28 +3,28 @@ import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 
 const StyledText = styled.p`
-  margin: ${props => (props.noMargin ? 0 : `0 0 var(--spacing-y-md)`)};
-  ${props =>
+  margin: ${(props) => (props.noMargin ? 0 : `0 0 var(--spacing-y-md)`)};
+  ${(props) =>
     props.textStyle &&
     css`
       font-style: ${props.textStyle};
     `}
-  ${props =>
+  ${(props) =>
     props.align &&
     css`
       text-align: ${props.align};
     `}
-  ${props =>
+  ${(props) =>
     props.size &&
     css`
       font-size: var(--font-size-${props.size});
     `}
-  ${props =>
+  ${(props) =>
     props.color &&
     css`
       color: var(--color-${props.color});
     `}
-  ${props =>
+  ${(props) =>
     props.weight &&
     css`
       font-weight: ${props.weight};
diff --git a/src/layout.js b/src/layout.js
index 7b2ed84..dae22c2 100644
--- a/src/layout.js
+++ b/src/layout.js
@@ -119,10 +119,10 @@ export default function Layout({ location, title: pageTitle, children }) {
           title={pageTitle ? `${pageTitle} : ${title}` : title}
           meta={[
             { name: "description", content: description },
-            { name: "keywords", content: keywords }
+            { name: "keywords", content: keywords },
           ]}
           htmlAttributes={{
-            lang: "en"
+            lang: "en",
           }}
         />
         <Global styles={GlobalStyles} />
@@ -130,8 +130,8 @@ export default function Layout({ location, title: pageTitle, children }) {
           styles={
             navOpen && {
               body: {
-                overflowY: "hidden"
-              }
+                overflowY: "hidden",
+              },
             }
           }
         />
diff --git a/src/pages/area-covered.js b/src/pages/area-covered.js
index c682279..62f1c0a 100644
--- a/src/pages/area-covered.js
+++ b/src/pages/area-covered.js
@@ -17,7 +17,7 @@ const triangleCoords = [
   { lat: 51.611, lng: -0.45 }, // Northwood
   { lat: 51.737, lng: -0.399 }, // St Albans
   { lat: 51.992, lng: -0.281 }, // Letchworth
-  { lat: 52.253, lng: 0.109 } // Cambridge
+  { lat: 52.253, lng: 0.109 }, // Cambridge
 ];
 
 export default function Index() {
@@ -28,7 +28,7 @@ export default function Index() {
           <Map
             initialCenter={{
               lat: 51.765,
-              lng: 0.022
+              lng: 0.022,
             }}
             zoom={7}
             mapTypeContol={false}
diff --git a/src/pages/index.js b/src/pages/index.js
index 3a23f0a..0696756 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -15,7 +15,7 @@ import {
   ReviewSummary,
   Section,
   Text,
-  Tile
+  Tile,
 } from "../components";
 import Calendar from "../icons/calendar.svg";
 import CheckCircle from "../icons/check-circle.svg";