diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
index 21b6078..65b4b14 100644
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.jsx
@@ -7,6 +7,7 @@ import Head from './atoms/Head'
 import Header from './organisms/Header'
 import Footer from './organisms/Footer'
 import { FadeIn } from './atoms/Animations'
+import styles from './Layout.module.scss'
 
 class TransitionHandler extends Component {
   shouldComponentUpdate() {
@@ -15,11 +16,11 @@ class TransitionHandler extends Component {
 
   render() {
     const { children } = this.props
-    return <div className="transition-container">{children}</div>
+    return <div className={styles.transitionContainer}>{children}</div>
   }
 }
 
-const Main = ({ children }) => <main className="screen">{children}</main>
+const Main = ({ children }) => <main className={styles.screen}>{children}</main>
 
 const TemplateWrapper = ({ children, location }) => {
   const isHomepage = location.pathname === '/'
@@ -84,7 +85,11 @@ const TemplateWrapper = ({ children, location }) => {
             <Head meta={meta} />
             <Header meta={meta} isHomepage={isHomepage} />
 
-            <TransitionGroup component={Main} appear={true}>
+            <TransitionGroup
+              className={styles.TransitionGroup}
+              component={Main}
+              appear={true}
+            >
               <FadeIn
                 key={location.pathname}
                 timeout={{ enter: 200, exit: 150, appear: 200 }}
diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss
new file mode 100644
index 0000000..e565493
--- /dev/null
+++ b/src/components/Layout.module.scss
@@ -0,0 +1,15 @@
+@import 'variables';
+
+.screen {
+    flex: 1;
+    padding: $spacer;
+}
+
+.transitionGroup {
+    position: relative;
+}
+
+.transitionContainer {
+    position: relative;
+    width: 100%;
+}
diff --git a/src/components/atoms/ProjectImage.jsx b/src/components/atoms/ProjectImage.jsx
index efbe500..4d467c7 100644
--- a/src/components/atoms/ProjectImage.jsx
+++ b/src/components/atoms/ProjectImage.jsx
@@ -2,15 +2,15 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { graphql } from 'gatsby'
 import Img from 'gatsby-image'
-import './ProjectImage.scss'
+import styles from './ProjectImage.module.scss'
 
-const ProjectImage = ({ fluid, alt }) => (
+const ProjectImage = props => (
   <Img
-    className="project__image"
-    outerWrapperClassName="project__image-wrap"
+    className={styles.project__image}
+    outerWrapperClassName={styles.project__imagewrap}
     backgroundColor="#6b7f88"
-    fluid={fluid}
-    alt={alt}
+    fluid={props.fluid}
+    alt={props.alt}
   />
 )
 
diff --git a/src/components/atoms/ProjectImage.scss b/src/components/atoms/ProjectImage.module.scss
similarity index 96%
rename from src/components/atoms/ProjectImage.scss
rename to src/components/atoms/ProjectImage.module.scss
index c3da7e7..2f20f38 100644
--- a/src/components/atoms/ProjectImage.scss
+++ b/src/components/atoms/ProjectImage.module.scss
@@ -1,6 +1,6 @@
 @import 'variables';
 
-.project__image-wrap {
+.project__imagewrap {
     max-height: 100vh;
     margin-left: auto;
     margin-right: auto;
diff --git a/src/styles/base.scss b/src/styles/base.scss
index 8744b64..aa91c5f 100644
--- a/src/styles/base.scss
+++ b/src/styles/base.scss
@@ -18,7 +18,6 @@ html {
 }
 
 body {
-    background: $body-background-color;
     font-family: $font-family-base;
     font-weight: $font-weight-base;
     font-size: $font-size-base;
@@ -28,6 +27,14 @@ body {
     font-feature-settings: 'liga', 'kern';
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    min-height: 100vh;
+    background-color: $body-background-color;
+    transition: background .6s $easing;
+
+    &.dark {
+        background-color: $body-background-color--dark;
+        color: $text-color--dark;
+    }
 }
 
 p,
@@ -110,25 +117,4 @@ svg {
     display: flex;
     min-height: 100vh;
     flex-direction: column;
-    background-color: $body-background-color;
-    transition: background .6s $easing;
-
-    .dark & {
-        background-color: $body-background-color--dark;
-        color: $text-color--dark;
-    }
-}
-
-.screen {
-    flex: 1;
-    padding: $spacer;
-}
-
-.transition-group {
-    position: relative;
-}
-
-.transition-container {
-    position: relative;
-    width: 100%;
 }
diff --git a/src/templates/Project.jsx b/src/templates/Project.jsx
index d8846aa..9e92079 100644
--- a/src/templates/Project.jsx
+++ b/src/templates/Project.jsx
@@ -11,13 +11,14 @@ import ProjectTechstack from '../components/molecules/ProjectTechstack'
 import ProjectLinks from '../components/molecules/ProjectLinks'
 import ProjectNav from '../components/molecules/ProjectNav'
 import SEO from '../components/atoms/SEO'
-import './Project.scss'
+
+import styles from './Project.module.scss'
 
 const ProjectMeta = props => {
   const { links, techstack } = props
 
   return (
-    <footer className="project__meta">
+    <footer className={styles.project__meta}>
       {!!links && <ProjectLinks links={links} />}
       {!!techstack && <ProjectTechstack techstack={techstack} />}
     </footer>
@@ -27,7 +28,9 @@ const ProjectMeta = props => {
 const ProjectImages = props => (
   <FullWidth>
     {props.projectImages.map(({ node }) => (
-      <ProjectImage key={node.id} fluid={node.fluid} alt={props.title} />
+      <div className={styles.spacer} key={node.id}>
+        <ProjectImage fluid={node.fluid} alt={props.title} />
+      </div>
     ))}
   </FullWidth>
 )
@@ -55,12 +58,12 @@ class Project extends Component {
 
         <SEO project={project} meta={meta} />
 
-        <article className="project">
+        <article className={styles.project}>
           <Content>
-            <h1 className="project__title">{title}</h1>
+            <h1 className={styles.project__title}>{title}</h1>
             <ReactMarkdown
               source={this.state.descriptionWithLineBreaks}
-              className="project__description"
+              className={styles.project__description}
             />
             <ProjectImages projectImages={projectImages} title={title} />
             <ProjectMeta links={links} techstack={techstack} />
diff --git a/src/templates/Project.scss b/src/templates/Project.module.scss
similarity index 73%
rename from src/templates/Project.scss
rename to src/templates/Project.module.scss
index a284ae4..9ce93e5 100644
--- a/src/templates/Project.scss
+++ b/src/templates/Project.module.scss
@@ -1,12 +1,13 @@
 @import 'variables';
+@import '../components/atoms/ProjectImage.module';
 
-.project {
-    .project__image-wrap {
-        margin-bottom: $spacer * 3;
+// .project__imagewrap {
+.spacer {
+    //composes: project__imagewrap from '../components/atoms/ProjectImage.module';
+    margin-bottom: $spacer * 3;
 
-        @media (min-width: 30rem) {
-            margin-bottom: $spacer * 6;
-        }
+    @media (min-width: 30rem) {
+        margin-bottom: $spacer * 6;
     }
 }
 
