diff --git a/src/assets/styles/pages/About.styles.js b/src/assets/styles/pages/About.styles.js
new file mode 100644
index 0000000..9a191e9
--- /dev/null
+++ b/src/assets/styles/pages/About.styles.js
@@ -0,0 +1,97 @@
+import styled from 'styled-components'
+
+export const About = styled.div`
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+
+  @media (max-width: 899px) {
+    padding-top: 3rem;
+  }
+
+  header {
+    display: grid;
+    grid-template-columns: 425px 1fr;
+    gap: 100px;
+    align-items: center;
+    margin-bottom: 3rem;
+
+    @media (max-width: 899px) {
+      grid-template-columns: 1fr;
+      gap: 2rem;
+      margin-bottom: 0;
+    }
+
+    img {
+      border-radius: 40px 0 40px 0;
+    }
+  }
+
+  h1 {
+    margin-top: 0;
+
+    @media (max-width: 899px) {
+      font-size: var(--font-size__h3);
+    }
+  }
+
+  h2 {
+    font-size: var(--font-size__h4);
+  }
+
+  .blocks {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 30px;
+    margin: 4rem 0;
+
+    @media (max-width: 899px) {
+      grid-template-columns: 1fr;
+      gap: 1rem;
+    }
+
+    > div {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 2rem;
+      font-size: var(--font-size__base--sm);
+      gap: 30px;
+
+      @media (max-width: 899px) {
+        flex-direction: column;
+        gap: 1rem;
+
+        .button {
+          width: 100%;
+          box-sizing: border-box;
+          text-align: center;
+        }
+      }
+
+      &:nth-of-type(1) {
+        background: rgba(245, 45, 134, 0.1);
+        color: rgb(245, 45, 134);
+
+        span {
+          font-family: var(--font-family__code);
+          font-size: var(--font-size__h4);
+        }
+      }
+
+      &:nth-of-type(2) {
+        background: rgba(113, 28, 180, 0.1);
+        color: rgb(113, 28, 180);
+
+        a {
+          background: rgb(113, 28, 180);
+          font-family: var(--font-family__code);
+          color: #fff;
+        }
+      }
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+`
diff --git a/src/assets/styles/pages/Contact.styles.js b/src/assets/styles/pages/Contact.styles.js
new file mode 100644
index 0000000..1b01af2
--- /dev/null
+++ b/src/assets/styles/pages/Contact.styles.js
@@ -0,0 +1,107 @@
+import styled from 'styled-components'
+
+export const Contact = styled.div`
+  margin: 5rem 0;
+  display: grid;
+  grid-template-columns: 1.5fr 2fr;
+  gap: 70px;
+
+  @media (max-width: 1175px) {
+    display: block;
+  }
+
+  @media (max-width: 600px) {
+    margin: 3rem 0;
+  }
+
+  form {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 30px;
+
+    @media (max-width: 600px) {
+      grid-template-columns: 1fr;
+      gap: 20px;
+    }
+
+    > div:last-of-type {
+      grid-column: 1 / 3;
+
+      @media (max-width: 600px) {
+        grid-column: 1 / 2;
+      }
+    }
+  }
+
+  label {
+    font-weight: bold;
+    font-size: var(--font-size__base--sm);
+    color: var(--color__headline);
+  }
+
+  span {
+    background: #fff;
+    display: block;
+    position: relative;
+    background-color: #f5f8f9;
+    z-index: 1;
+    border-radius: 10px;
+  }
+
+  input,
+  textarea,
+  select {
+    display: block;
+    width: 100% !important;
+    border: none;
+    font-weight: normal;
+    padding: 1rem 20px;
+    outline: 0;
+    margin-top: 7px;
+    resize: none;
+    border-radius: 8px;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    background: none;
+  }
+
+  input,
+  select {
+    height: 3rem;
+    line-height: 3rem;
+    padding: 0 20px;
+  }
+
+  select + svg {
+    position: absolute;
+    right: 15px;
+    top: 16px;
+    width: 21px;
+    z-index: -1;
+
+    path {
+      fill: #53caee;
+    }
+  }
+
+  textarea {
+    min-height: 10rem;
+
+    @media (max-width: 600px) {
+      height: 100px;
+    }
+  }
+
+  button {
+    grid-column: 2 / 3;
+    margin: 1rem 0 0 auto;
+    cursor: pointer;
+
+    @media (max-width: 600px) {
+      grid-column: 1 / 2;
+      margin-left: 0;
+      display: block;
+    }
+  }
+`
diff --git a/src/assets/styles/pages/Thanks.styles.js b/src/assets/styles/pages/Thanks.styles.js
new file mode 100644
index 0000000..da7f33d
--- /dev/null
+++ b/src/assets/styles/pages/Thanks.styles.js
@@ -0,0 +1,16 @@
+import styled from 'styled-components'
+
+export const Thanks = styled.div`
+  text-align: center;
+
+  a {
+    color: var(--color_blue);
+    font-weight: bold;
+    text-decoration: underline;
+  }
+
+  img {
+    display: block;
+    margin: 50px auto 100px;
+  }
+`
diff --git a/src/pages/about.js b/src/pages/about.js
index 476ccc5..6f95d04 100644
--- a/src/pages/about.js
+++ b/src/pages/about.js
@@ -1,111 +1,15 @@
 import React from 'react'
 import { Link } from 'gatsby'
-import styled from 'styled-components'
 import { OutboundLink } from 'gatsby-plugin-google-analytics'
 import Seo from '../components/Seo'
 import Layout from '../components/Layout'
 import whoAreYou from '../assets/images/parks-and-rec-craig-who-even-are-you.gif'
-
-const Wrapper = styled.div`
-  padding-top: 5rem;
-  padding-bottom: 5rem;
-
-  @media (max-width: 899px) {
-    padding-top: 3rem;
-  }
-
-  header {
-    display: grid;
-    grid-template-columns: 425px 1fr;
-    gap: 100px;
-    align-items: center;
-    margin-bottom: 3rem;
-
-    @media (max-width: 899px) {
-      grid-template-columns: 1fr;
-      gap: 2rem;
-      margin-bottom: 0;
-    }
-
-    img {
-      border-radius: 40px 0 40px 0;
-    }
-  }
-
-  h1 {
-    margin-top: 0;
-
-    @media (max-width: 899px) {
-      font-size: var(--font-size__h3);
-    }
-  }
-
-  h2 {
-    font-size: var(--font-size__h4);
-  }
-
-  .blocks {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 30px;
-    margin: 4rem 0;
-
-    @media (max-width: 899px) {
-      grid-template-columns: 1fr;
-      gap: 1rem;
-    }
-
-    > div {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 2rem;
-      font-size: var(--font-size__base--sm);
-      gap: 30px;
-
-      @media (max-width: 899px) {
-        flex-direction: column;
-        gap: 1rem;
-
-        .button {
-          width: 100%;
-          box-sizing: border-box;
-          text-align: center;
-        }
-      }
-
-      &:nth-of-type(1) {
-        background: rgba(245, 45, 134, 0.1);
-        color: rgb(245, 45, 134);
-
-        span {
-          font-family: var(--font-family__code);
-          font-size: var(--font-size__h4);
-        }
-      }
-
-      &:nth-of-type(2) {
-        background: rgba(113, 28, 180, 0.1);
-        color: rgb(113, 28, 180);
-
-        a {
-          background: rgb(113, 28, 180);
-          font-family: var(--font-family__code);
-          color: #fff;
-        }
-      }
-    }
-
-    p {
-      margin: 0;
-    }
-  }
-`
+import { About } from '../assets/styles/pages/About.styles'
 
 const AboutPage = () => (
   <Layout>
     <Seo title="About Tom Gooden" />
-    <Wrapper className="container">
+    <About className="container">
       <header>
         <div>
           <img alt="Who even are you" src={whoAreYou} />
@@ -167,7 +71,7 @@ const AboutPage = () => (
           projects around the home.
         </p>
       </main>
-    </Wrapper>
+    </About>
   </Layout>
 )
 
diff --git a/src/pages/contact.js b/src/pages/contact.js
index 3c23418..8721759 100644
--- a/src/pages/contact.js
+++ b/src/pages/contact.js
@@ -1,114 +1,8 @@
 import React from 'react'
-import styled from 'styled-components'
 import Layout from '../components/Layout'
 import Seo from '../components/Seo'
 import { ProjectRoadmap } from '../components/ProjectRoadmap'
-
-const Contact = styled.div`
-  margin: 5rem 0;
-  display: grid;
-  grid-template-columns: 1.5fr 2fr;
-  gap: 70px;
-
-  @media (max-width: 1175px) {
-    display: block;
-  }
-
-  @media (max-width: 600px) {
-    margin: 3rem 0;
-  }
-
-  form {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 30px;
-
-    @media (max-width: 600px) {
-      grid-template-columns: 1fr;
-      gap: 20px;
-    }
-
-    > div:last-of-type {
-      grid-column: 1 / 3;
-
-      @media (max-width: 600px) {
-        grid-column: 1 / 2;
-      }
-    }
-  }
-
-  label {
-    font-weight: bold;
-    font-size: var(--font-size__base--sm);
-    color: var(--color__headline);
-  }
-
-  span {
-    background: #fff;
-    display: block;
-    position: relative;
-    background-color: #f5f8f9;
-    z-index: 1;
-    border-radius: 10px;
-  }
-
-  input,
-  textarea,
-  select {
-    display: block;
-    width: 100% !important;
-    border: none;
-    font-weight: normal;
-    padding: 1rem 20px;
-    outline: 0;
-    margin-top: 7px;
-    resize: none;
-    border-radius: 8px;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    appearance: none;
-    background: none;
-  }
-
-  input,
-  select {
-    height: 3rem;
-    line-height: 3rem;
-    padding: 0 20px;
-  }
-
-  select + svg {
-    position: absolute;
-    right: 15px;
-    top: 16px;
-    width: 21px;
-    z-index: -1;
-
-    path {
-      fill: #53caee;
-    }
-  }
-
-  textarea {
-    min-height: 10rem;
-
-    @media (max-width: 600px) {
-      height: 100px;
-    }
-  }
-
-  button {
-    grid-column: 2 / 3;
-    margin: 1rem 0 0 auto;
-    cursor: pointer;
-
-    @media (max-width: 600px) {
-      grid-column: 1 / 2;
-      margin-left: 0;
-      display: block;
-    }
-  }
-`
+import { Contact } from '../assets/styles/pages/Contact.styles'
 
 const ContactPage = () => {
   return (
diff --git a/src/pages/thanks.js b/src/pages/thanks.js
index 70904cb..5ecb52a 100644
--- a/src/pages/thanks.js
+++ b/src/pages/thanks.js
@@ -1,24 +1,9 @@
 import React from 'react'
 import { Link } from 'gatsby'
-import styled from 'styled-components'
 import Layout from '../components/Layout'
 import Seo from '../components/Seo'
 import cobraKai from '../assets/images/send-it-to-the-internet.gif'
-
-const Thanks = styled.div`
-  text-align: center;
-
-  a {
-    color: var(--color_blue);
-    font-weight: bold;
-    text-decoration: underline;
-  }
-
-  img {
-    display: block;
-    margin: 50px auto 100px;
-  }
-`
+import { Thanks } from '../assets/styles/pages/Thanks.styles'
 
 const ThanksPage = () => (
   <Layout>