diff --git a/src/components/index.js b/src/components/index.js
new file mode 100644
index 0000000..ef60197
--- /dev/null
+++ b/src/components/index.js
@@ -0,0 +1,18 @@
+export { default as Button } from "./button";
+export { default as Card } from "./card";
+export { default as Content } from "./content";
+export { default as CustomSlick } from "./custom-slick";
+export { default as Footer } from "./footer";
+export { default as HeaderLogo } from "./header-logo";
+export { default as Header } from "./header";
+export { default as Icon } from "./icon";
+export { default as IconWithContent } from "./icon-with-content";
+export { default as InputText } from "./input-text";
+export { default as Link } from "./link";
+export { default as MenuButton } from "./menu-button";
+export { default as NavItem } from "./nav-item";
+export { default as NavLink } from "./nav-link";
+export { default as Nav } from "./nav";
+export { default as ReviewSummary } from "./review-summary";
+export { default as Section } from "./section";
+export { default as Text } from "./text";
diff --git a/src/layout.js b/src/layout.js
index 5d9c303..f244294 100644
--- a/src/layout.js
+++ b/src/layout.js
@@ -1,8 +1,7 @@
 import React, { useState } from "react";
 import { useStaticQuery, graphql } from "gatsby";
 import { Helmet } from "react-helmet";
-import Nav from "./components/nav";
-import Footer from "./components/footer";
+import { Footer, Nav } from "./components";
 import { createGlobalStyle } from "styled-components";
 import "@fontsource/cooper-hewitt/400.css";
 import "@fontsource/cooper-hewitt/400-italic.css";
@@ -26,6 +25,8 @@ const GlobalStyle = createGlobalStyle`
     --font-size-lg: 20px;
     --font-size-xl: 24px;
     --font-size-xxl: 32px;
+    --icon-size-md: 16px;
+    --icon-size-lg: 24px;
 
     --spacing-y-xs: 4px;
     --spacing-y-sm: 8px;
diff --git a/src/pages/404.js b/src/pages/404.js
index c591891..be30f67 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -1,9 +1,7 @@
 import React from "react";
-import { Link, graphql } from "gatsby";
+import { graphql } from "gatsby";
 import Layout from "../layout";
-import Header from "../components/header";
-import HeaderLogo from "../components/header-logo";
-import Section from "../components/section";
+import { Header, Link, Section } from "../components";
 
 export default function Index({ data }) {
   return (
diff --git a/src/pages/colours.js b/src/pages/colours.js
deleted file mode 100644
index 976bb73..0000000
--- a/src/pages/colours.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from "react";
-import { graphql } from "gatsby";
-import Layout from "../layout";
-import Header from "../components/header";
-import HeaderLogo from "../components/header-logo";
-import Section from "../components/section";
-import Text from "../components/text";
-
-export default function Index({ data }) {
-  return (
-    <Layout>
-      <Header image={data.headerImage.childImageSharp.fluid}>
-        <HeaderLogo>
-          <h1>ABC Project Design</h1>
-          <p>Easy as ABC</p>
-        </HeaderLogo>
-      </Header>
-      <Section>
-        <Text
-          style={{
-            "background-color": "var(--theme-color-primary)"
-          }}
-        >
-          --theme-color-primary: #9c0905;
-        </Text>
-        <Text
-          style={{
-            "background-color": "var(--theme-color-secondary)"
-          }}
-        >
-          --theme-color-secondary: #9590a8;
-        </Text>
-        <Text
-          style={{
-            "background-color": "var(--theme-color-tertiary)"
-          }}
-        >
-          --theme-color-tertiary: #bbcbcb;
-        </Text>
-        <Text
-          style={{
-            "background-color": "var(--theme-color-light)"
-          }}
-        >
-          --theme-color-light: #e5ffde;
-        </Text>
-        <Text
-          style={{
-            "background-color": "var(--theme-color-dark)",
-            color: "white"
-          }}
-        >
-          --theme-color-dark: #000a61;
-        </Text>
-      </Section>
-    </Layout>
-  );
-}
-
-export const query = graphql`
-  query {
-    headerImage: file(relativePath: { eq: "bathroom.png" }) {
-      childImageSharp {
-        fluid(maxWidth: 1920, quality: 100) {
-          ...GatsbyImageSharpFluid_withWebp
-        }
-      }
-    }
-  }
-`;
diff --git a/src/pages/index.js b/src/pages/index.js
index 19a7019..3275bdb 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,13 +1,15 @@
 import React from "react";
 import { graphql } from "gatsby";
 import Layout from "../layout";
-import Header from "../components/header";
-import HeaderLogo from "../components/header-logo";
-import Section from "../components/section";
-import Card from "../components/card";
-import ReviewSummary from "../components/review-summary";
-import CustomSlick from "../components/custom-slick";
-import Text from "../components/text";
+import {
+  Card,
+  CustomSlick,
+  Header,
+  HeaderLogo,
+  ReviewSummary,
+  Section,
+  Text
+} from "../components";
 
 export default function Index({ data }) {
   return (
diff --git a/src/pages/services/bathrooms.js b/src/pages/services/bathrooms.js
index 64e8442..e33a036 100644
--- a/src/pages/services/bathrooms.js
+++ b/src/pages/services/bathrooms.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { graphql } from "gatsby";
 import Layout from "../../layout";
-import Header from "../../components/header";
+import { Header } from "../../components";
 
 export default function Index({ data }) {
   return (
diff --git a/src/pages/services/index.js b/src/pages/services/index.js
index 9081348..dc3cdf6 100644
--- a/src/pages/services/index.js
+++ b/src/pages/services/index.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { graphql } from "gatsby";
 import Layout from "../../layout";
-import Header from "../../components/header";
+import { Header } from "../../components";
 
 export default function Index({ data }) {
   return (