diff --git a/components/ryr-header.js b/components/ryr-header.js
new file mode 100644
index 0000000..19bcd9d
--- /dev/null
+++ b/components/ryr-header.js
@@ -0,0 +1,27 @@
+import propTypes from 'prop-types'
+
+const RyrHeader = props => {
+    const h1style = {
+            color: '#b35c22',
+            display: 'inline-block',
+            marginLeft: '0.5em',
+    };
+    return(
+        <div>
+            <img src="/static/images/logos/ryr_logo-64x64.png" alt="RYR logo" />
+            <h1 style={h1style}>Request Yo Racks</h1>
+            <style jsx>
+            {`
+                div > * {
+                    vertical-align: middle;
+                }
+            `}    
+            </style>
+        </div>
+    );
+};
+
+RyrHeader.propTypes = {
+
+};
+export default RyrHeader;
diff --git a/pages/index.js b/pages/index.js
index 12f4c32..38a4ab4 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -2,6 +2,7 @@ import Head from 'next/head';
 import React from 'react';
 
 import RyrFooter from '../components/ryr-footer';
+import RyrHeader from '../components/ryr-header';
 import RyrHowItWorks from '../components/ryr-how-it-works';
 import RyrSectionConnector from '../components/ryr-section-connector';
 
@@ -15,8 +16,7 @@ const Index = () => (
       <link rel="manifest" href="/static/manifest.json" />
     </Head>
     <nav>
-      <img src="/static/images/logos/ryr_logo-64x64.png" alt="RYR logo" />
-      <h1>Request Yo Racks</h1>
+      <RyrHeader />
     </nav>
     <section
       style={{
@@ -54,20 +54,11 @@ const Index = () => (
     </footer>
     <style jsx>
       {`
-        h1 {
-          color: #b35c22;
-          display: inline-block;
-          margin-left: 0.5em;
-        }
-
         nav {
           padding: 0.75em;
         }
 
-        nav > * {
-          vertical-align: middle;
-        }
-
+        
         section {
           width: 80%;
           margin: 0 auto;