diff --git a/components/Footer.js b/components/Footer.js
new file mode 100644
index 0000000..67e3d42
--- /dev/null
+++ b/components/Footer.js
@@ -0,0 +1,20 @@
+import React from 'react'
+
+const Footer = (props) => (
+  <div className="footer">
+    <span>a project by <a href="https://twitter.com/dawn_labs">@dawn_labs ¬</a></span>
+    <style jsx>{`
+      div {
+        font-size: 14px;
+        margin: 32px 0;
+        color: #506874;
+      }
+      a {
+        color: #C694E8;
+        text-decoration: none;
+      }
+    `}</style>
+  </div>
+)
+
+export default Footer
diff --git a/components/Header.js b/components/Header.js
new file mode 100644
index 0000000..426a480
--- /dev/null
+++ b/components/Header.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import Logo from './svg/Logo'
+
+const Header = (props) => (
+  <div className="header">
+    <div className="header-content">
+      <Logo />
+      <h1>The easiest way to create images from source code. Start typing, or drag a file into the text area to get started.</h1>
+    </div>
+    <style jsx>{`
+      .header {
+        margin: 40px 0 48px;
+        width: 648px;
+      }
+
+      .header-content {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      h1 {
+        max-width: 472px;
+        font-size: 20px;
+        line-height: 1.5;
+        color: #fff;
+      }
+    `}</style>
+  </div>
+)
+
+export default Header
diff --git a/pages/index.js b/pages/index.js
index 7bc32b3..c06ba29 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -5,10 +5,11 @@ import Axios from 'axios'
 import domtoimage from 'dom-to-image'
 
 import ReadFileDropContainer from '../components/ReadFileDropContainer'
-import Logo from '../components/svg/Logo'
 import Meta from '../components/Meta'
 import Toolbar from '../components/Toolbar'
 import CodeImage from '../components/CodeImage'
+import Header from '../components/Header'
+import Footer from '../components/Footer'
 import api from '../lib/api'
 import { THEMES, LANGUAGES, PALETTE, DEFAULT_CODE } from '../lib/constants'
 
@@ -62,12 +63,8 @@ class Index extends React.Component {
     return (
         <div className="main">
           <Meta />
-          <div className="header">
-            <div className="header-content">
-              <Logo />
-              <h1>The easiest way to create images from source code. Start typing, or drag a file into the text area to get started.</h1>
-            </div>
-          </div>
+          <Header />
+          {/* TODO this doesn't update the render */}
           <ReadFileDropContainer
             onDrop={(droppedContent) => {
               console.log(droppedContent)
@@ -90,9 +87,7 @@ class Index extends React.Component {
               </CodeImage>
             </div>
           </ReadFileDropContainer>
-          <div className="footer">
-            <span>a project by <a href="https://twitter.com/dawn_labs">@dawn_labs ¬</a></span>
-          </div>
+          <Footer />
           <style jsx>{`
             .main {
               display: flex;
@@ -104,39 +99,10 @@ class Index extends React.Component {
               min-height: 704px;
             }
 
-            .header {
-              margin: 40px 0 48px;
-              width: 648px;
-            }
-
-            .header-content {
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-            }
-
-            .header-content h1 {
-              max-width: 472px;
-              font-size: 20px;
-              line-height: 1.5;
-              color: #fff;
-            }
-
             #editor {
               background: ${PALETTE.EDITOR_BG};
               padding: 16px;
             }
-
-            .footer {
-              font-size: 14px;
-              margin: 32px 0;
-              color: #506874;
-            }
-
-            .footer a {
-              color: #C694E8;
-              text-decoration: none;
-            }
           `}
           </style>
         </div>