diff --git a/src/layout.js b/src/layout.js
index 294de6f..1fe232c 100644
--- a/src/layout.js
+++ b/src/layout.js
@@ -89,7 +89,7 @@ const GlobalStyles = css`
   }
 `;
 
-export default function Layout({ location, children }) {
+export default function Layout({ location, title: pageTitle, children }) {
   const data = useStaticQuery(graphql`
     query HeaderQuery {
       site {
@@ -115,7 +115,7 @@ export default function Layout({ location, children }) {
     <>
       <main>
         <Helmet
-          title={title}
+          title={pageTitle ? `${pageTitle} : ${title}` : title}
           meta={[
             { name: "description", content: description },
             { name: "keywords", content: keywords }
diff --git a/src/pages/404.js b/src/pages/404.js
index fff4199..072cada 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -5,7 +5,7 @@ import { Header, Link, Section } from "../components";
 
 export default function Index({ data }) {
   return (
-    <Layout>
+    <Layout title="Page not found">
       <Header image={data.headerImage.childImageSharp.fluid}>
         <h2>404</h2>
       </Header>
diff --git a/src/pages/about.js b/src/pages/about.js
index 28fb9f3..21c5426 100644
--- a/src/pages/about.js
+++ b/src/pages/about.js
@@ -5,7 +5,7 @@ import { Header, Heading, Section, Text } from "../components";
 
 export default function Index({ data }) {
   return (
-    <Layout location="/about">
+    <Layout location="/about" title="About">
       <Header
         image={data.headerImage.childImageSharp.fluid}
         position="bottom right"
diff --git a/src/pages/area-covered.js b/src/pages/area-covered.js
index a83680f..c682279 100644
--- a/src/pages/area-covered.js
+++ b/src/pages/area-covered.js
@@ -22,7 +22,7 @@ const triangleCoords = [
 
 export default function Index() {
   return (
-    <Layout location="/area-covered">
+    <Layout location="/area-covered" title="Area Covered">
       <Header
         map={
           <Map
diff --git a/src/pages/contact.js b/src/pages/contact.js
index 7a618a3..d5ea4e0 100644
--- a/src/pages/contact.js
+++ b/src/pages/contact.js
@@ -52,7 +52,7 @@ export default function Index({ data }) {
       .catch(error => console.log(error));
   };
   return (
-    <Layout location="/contact">
+    <Layout location="/contact" title="Contact us">
       <Header
         image={data.headerImage.childImageSharp.fluid}
         position="bottom right"
diff --git a/src/pages/services/bathrooms/case-study-1.js b/src/pages/services/bathrooms/case-study-1.js
index 7bd1cbb..d1e3555 100644
--- a/src/pages/services/bathrooms/case-study-1.js
+++ b/src/pages/services/bathrooms/case-study-1.js
@@ -13,7 +13,7 @@ import {
 export default function Index({ data }) {
   const images = data.images.nodes.map(node => node.childImageSharp);
   return (
-    <Layout location="/services/bathrooms/case-study-1">
+    <Layout location="/services/bathrooms/case-study-1" title="Modern Bathroom Case Study">
       <Header image={images[0].full}>
         <Heading shadow="xl-black">Modern Bathroom</Heading>
         <Text size="lg">Maldon, Essex</Text>
diff --git a/src/pages/services/bathrooms/case-study-2.js b/src/pages/services/bathrooms/case-study-2.js
index 4e26261..b4352f2 100644
--- a/src/pages/services/bathrooms/case-study-2.js
+++ b/src/pages/services/bathrooms/case-study-2.js
@@ -13,7 +13,7 @@ import {
 export default function Index({ data }) {
   const images = data.images.nodes.map(node => node.childImageSharp);
   return (
-    <Layout location="/services/bathrooms/case-study-2">
+    <Layout location="/services/bathrooms/case-study-2" title="Compact Bathroom Case Study">
       <Header image={images[0].full}>
         <Heading shadow="xl-black">Compact Bathroom</Heading>
         <Text size="lg">Hackney, London</Text>
diff --git a/src/pages/services/bathrooms/case-study-3.js b/src/pages/services/bathrooms/case-study-3.js
index aa63aab..a0200cd 100644
--- a/src/pages/services/bathrooms/case-study-3.js
+++ b/src/pages/services/bathrooms/case-study-3.js
@@ -13,7 +13,7 @@ import {
 export default function Index({ data }) {
   const images = data.images.nodes.map(node => node.childImageSharp);
   return (
-    <Layout location="/services/bathrooms/case-study-3">
+    <Layout location="/services/bathrooms/case-study-3" title="Modest Shower Room Case Study">
       <Header image={images[0].full}>
         <Heading shadow="xl-black">Modest Shower Room</Heading>
         <Text size="lg">Location unknown</Text>
diff --git a/src/pages/services/bathrooms/case-study-4.js b/src/pages/services/bathrooms/case-study-4.js
index 8f04555..3e64656 100644
--- a/src/pages/services/bathrooms/case-study-4.js
+++ b/src/pages/services/bathrooms/case-study-4.js
@@ -13,7 +13,7 @@ import {
 export default function Index({ data }) {
   const images = data.images.nodes.map(node => node.childImageSharp);
   return (
-    <Layout location="/services/bathrooms/case-study-4">
+    <Layout location="/services/bathrooms/case-study-4" title="Period with a Modern Twist Case Study">
       <Header image={images[0].full}>
         <Heading shadow="xl-black">Period with a Modern Twist</Heading>
         <Text size="lg">Hampstead, London</Text>
diff --git a/src/pages/services/bathrooms/case-study-5.js b/src/pages/services/bathrooms/case-study-5.js
index ba330ec..ce141d8 100644
--- a/src/pages/services/bathrooms/case-study-5.js
+++ b/src/pages/services/bathrooms/case-study-5.js
@@ -13,7 +13,7 @@ import {
 export default function Index({ data }) {
   const images = data.images.nodes.map(node => node.childImageSharp);
   return (
-    <Layout location="/services/bathrooms/case-study-5">
+    <Layout location="/services/bathrooms/case-study-5" title="En-suite Case Study">
       <Header image={images[0].full}>
         <Heading shadow="xl-black">En-suite</Heading>
         <Text size="lg">Chelmsford, Essex</Text>
diff --git a/src/pages/services/bathrooms/index.js b/src/pages/services/bathrooms/index.js
index 5e2206e..8c01317 100644
--- a/src/pages/services/bathrooms/index.js
+++ b/src/pages/services/bathrooms/index.js
@@ -12,7 +12,7 @@ import {
 
 export default function Index({ data }) {
   return (
-    <Layout location="/services/bathrooms">
+    <Layout location="/services/bathrooms" title="Bathrooms">
       <Header image={data.headerImage.childImageSharp.fluid}>
         <Heading shadow="xl-white">Bathrooms</Heading>
       </Header>
diff --git a/src/pages/services/index.js b/src/pages/services/index.js
index 837df96..dfe631d 100644
--- a/src/pages/services/index.js
+++ b/src/pages/services/index.js
@@ -5,7 +5,7 @@ import { Card, Grid, Header, Heading, Section } from "../../components";
 
 export default function Index({ data }) {
   return (
-    <Layout location="/services">
+    <Layout location="/services" title="Services">
       <Header image={data.headerImage.childImageSharp.fluid}>
         <Heading shadow="xl-white">Services</Heading>
       </Header>
diff --git a/src/pages/services/tiling/case-study-1.js b/src/pages/services/tiling/case-study-1.js
index 2fea760..8681080 100644
--- a/src/pages/services/tiling/case-study-1.js
+++ b/src/pages/services/tiling/case-study-1.js
@@ -13,7 +13,10 @@ import {
 export default function Index({ data }) {
   const images = data.images.nodes.map(node => node.childImageSharp);
   return (
-    <Layout location="/services/tiling/case-study-1">
+    <Layout
+      location="/services/tiling/case-study-1"
+      title="New Extension Case Study"
+    >
       <Header image={images[3].full}>
         <Heading shadow="xl-black">New Extension</Heading>
         <Text size="lg">Eltham, London</Text>
diff --git a/src/pages/services/tiling/case-study-2.js b/src/pages/services/tiling/case-study-2.js
index beeb04c..ccd2817 100644
--- a/src/pages/services/tiling/case-study-2.js
+++ b/src/pages/services/tiling/case-study-2.js
@@ -13,7 +13,10 @@ import {
 export default function Index({ data }) {
   const images = data.images.nodes.map(node => node.childImageSharp);
   return (
-    <Layout location="/services/tiling/case-study-2">
+    <Layout
+      location="/services/tiling/case-study-2"
+      title="Ceramic Floor Tiles Case Study"
+    >
       <Header image={images[3].full}>
         <Heading shadow="xl-black">Ceramic Floor Tiles</Heading>
         <Text size="lg">Brentwood, Essex</Text>
diff --git a/src/pages/services/tiling/case-study-3.js b/src/pages/services/tiling/case-study-3.js
index 36753f4..3b9c214 100644
--- a/src/pages/services/tiling/case-study-3.js
+++ b/src/pages/services/tiling/case-study-3.js
@@ -13,7 +13,10 @@ import {
 export default function Index({ data }) {
   const images = data.images.nodes.map(node => node.childImageSharp);
   return (
-    <Layout location="/services/tiling/case-study-3">
+    <Layout
+      location="/services/tiling/case-study-3"
+      title="Period Floor Tiles Case Study"
+    >
       <Header image={images[0].full}>
         <Heading shadow="xl-black">Period Floor Tiles</Heading>
         <Text size="lg">Barnes, London</Text>
diff --git a/src/pages/services/tiling/case-study-4.js b/src/pages/services/tiling/case-study-4.js
index 5c60e6c..105dd5e 100644
--- a/src/pages/services/tiling/case-study-4.js
+++ b/src/pages/services/tiling/case-study-4.js
@@ -13,7 +13,7 @@ import {
 export default function Index({ data }) {
   const images = data.images.nodes.map(node => node.childImageSharp);
   return (
-    <Layout location="/services/tiling/case-study-4">
+    <Layout location="/services/tiling/case-study-4" title="Wood Effect Porcelain Case Study">
       <Header image={images[0].full}>
         <Heading shadow="xl-black">Wood Effect Porcelain</Heading>
         <Text size="lg">Charlton, London</Text>
diff --git a/src/pages/services/tiling/case-study-5.js b/src/pages/services/tiling/case-study-5.js
index f9ae8dc..b7856c8 100644
--- a/src/pages/services/tiling/case-study-5.js
+++ b/src/pages/services/tiling/case-study-5.js
@@ -13,7 +13,7 @@ import {
 export default function Index({ data }) {
   const images = data.images.nodes.map(node => node.childImageSharp);
   return (
-    <Layout location="/services/tiling/case-study-5">
+    <Layout location="/services/tiling/case-study-5" title="Period Floor Tiles Case Study">
       <Header image={images[0].full}>
         <Heading shadow="xl-black">Period Floor Tiles</Heading>
         <Text size="lg">Chelsea, London</Text>
diff --git a/src/pages/services/tiling/index.js b/src/pages/services/tiling/index.js
index 870d0c7..51efb30 100644
--- a/src/pages/services/tiling/index.js
+++ b/src/pages/services/tiling/index.js
@@ -12,7 +12,7 @@ import {
 
 export default function Index({ data }) {
   return (
-    <Layout location="/services/tiling">
+    <Layout location="/services/tiling" title="Tiling">
       <Header image={data.headerImage.childImageSharp.fluid}>
         <Heading shadow="xl-white">Tiling</Heading>
       </Header>