diff --git a/src/images/bathroom.png b/src/images/bathroom.png
index 62eada4..cb19cfa 100644
Binary files a/src/images/bathroom.png and b/src/images/bathroom.png differ
diff --git a/src/images/bathroom2.png b/src/images/bathroom2.png
index 5566608..c355e71 100644
Binary files a/src/images/bathroom2.png and b/src/images/bathroom2.png differ
diff --git a/src/images/bathroom3.png b/src/images/bathroom3.png
new file mode 100644
index 0000000..540b6a8
Binary files /dev/null and b/src/images/bathroom3.png differ
diff --git a/src/images/bathroom4.png b/src/images/bathroom4.png
new file mode 100644
index 0000000..06a4358
Binary files /dev/null and b/src/images/bathroom4.png differ
diff --git a/src/images/floor_tiles.png b/src/images/floor_tiles.png
new file mode 100644
index 0000000..8ba913b
Binary files /dev/null and b/src/images/floor_tiles.png differ
diff --git a/src/pages/about.js b/src/pages/about.js
index ab91993..44c92ba 100644
--- a/src/pages/about.js
+++ b/src/pages/about.js
@@ -50,7 +50,7 @@ export default function Index({ data }) {
 
 export const query = graphql`
   query {
-    headerImage: file(relativePath: { eq: "bathroom.png" }) {
+    headerImage: file(relativePath: { eq: "bathroom3.png" }) {
       childImageSharp {
         fluid(maxWidth: 1920, quality: 100) {
           ...GatsbyImageSharpFluid_withWebp
diff --git a/src/pages/contact.js b/src/pages/contact.js
index fd4fedb..bb5bd57 100644
--- a/src/pages/contact.js
+++ b/src/pages/contact.js
@@ -53,7 +53,7 @@ export default function Index({ data }) {
     <Layout location="/contact">
       <Header
         image={data.headerImage.childImageSharp.fluid}
-        position="bottom right"
+        position="middle right"
       >
         <h1>Get in touch</h1>
       </Header>
@@ -163,7 +163,7 @@ export default function Index({ data }) {
 
 export const query = graphql`
   query {
-    headerImage: file(relativePath: { eq: "bathroom.png" }) {
+    headerImage: file(relativePath: { eq: "bathroom4.png" }) {
       childImageSharp {
         fluid(maxWidth: 1920, quality: 100) {
           ...GatsbyImageSharpFluid_withWebp
diff --git a/src/pages/services/index.js b/src/pages/services/index.js
index e274968..e71ad21 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";
+import { Card, Grid, Header, Heading, Section } from "../../components";
 
 export default function Index({ data }) {
   return (
@@ -9,18 +9,78 @@ export default function Index({ data }) {
       <Header image={data.headerImage.childImageSharp.fluid}>
         <h1>Services</h1>
       </Header>
+      <Section>
+        <Grid columns={[1, 2]}>
+          <Card
+            to="/services/bathrooms"
+            image={data.bathroomImage.childImageSharp.fluid}
+            heading={<Heading el="h3">Bathrooms</Heading>}
+          >
+            Fully accredited bathroom refurbishment service
+          </Card>
+          <Card
+            to="/services/tiling"
+            image={data.tilingImage.childImageSharp.fluid}
+            heading={<Heading el="h3">Tiling</Heading>}
+          >
+            Our tiling is primo!
+          </Card>
+          <Card
+            to="/services/electrics"
+            image={data.electricsImage.childImageSharp.fluid}
+            heading={<Heading el="h3">Electrics</Heading>}
+          >
+            Bring some light to your next project
+          </Card>
+          <Card
+            to="/services/carpentry"
+            image={data.carpentryImage.childImageSharp.fluid}
+            heading={<Heading el="h3">Carpentry</Heading>}
+          >
+            Our woodworking is sharp!
+          </Card>
+        </Grid>
+      </Section>
     </Layout>
   );
 }
 
 export const query = graphql`
   query {
-    headerImage: file(relativePath: { eq: "bathroom2.png" }) {
+    headerImage: file(relativePath: { eq: "floor_tiles.png" }) {
       childImageSharp {
         fluid(maxWidth: 1920, quality: 100) {
           ...GatsbyImageSharpFluid_withWebp
         }
       }
     }
+    bathroomImage: file(relativePath: { eq: "service_bathroom.png" }) {
+      childImageSharp {
+        fluid(maxWidth: 480, quality: 100) {
+          ...GatsbyImageSharpFluid_withWebp
+        }
+      }
+    }
+    tilingImage: file(relativePath: { eq: "service_tiling.png" }) {
+      childImageSharp {
+        fluid(maxWidth: 480, quality: 100) {
+          ...GatsbyImageSharpFluid_withWebp
+        }
+      }
+    }
+    electricsImage: file(relativePath: { eq: "service_electrics.png" }) {
+      childImageSharp {
+        fluid(maxWidth: 480, quality: 100) {
+          ...GatsbyImageSharpFluid_withWebp
+        }
+      }
+    }
+    carpentryImage: file(relativePath: { eq: "service_carpentry.png" }) {
+      childImageSharp {
+        fluid(maxWidth: 480, quality: 100) {
+          ...GatsbyImageSharpFluid_withWebp
+        }
+      }
+    }
   }
 `;