diff --git a/src/app/main/main-layout-header.js b/src/app/main/main-layout-header.js
index e69de29b..b5028d41 100644
--- a/src/app/main/main-layout-header.js
+++ b/src/app/main/main-layout-header.js
@@ -0,0 +1,17 @@
+import React              from 'react/addons';
+import Button             from 'core-components/button';
+
+var MainLayoutHeader = React.createClass({
+
+    render() {
+        return (
+            <div className="main-layout-header">
+                <div className="main-layout-header--login-links">
+                   <Button type="light">Sign up</Button>
+                </div>
+            </div>
+        );
+    }
+});
+
+export default MainLayoutHeader;
\ No newline at end of file
diff --git a/src/app/main/main-layout-header.scss b/src/app/main/main-layout-header.scss
new file mode 100644
index 00000000..599b57a5
--- /dev/null
+++ b/src/app/main/main-layout-header.scss
@@ -0,0 +1,16 @@
+@import "../../scss/vars";
+
+.main-layout-header {
+  background-color: $primary-blue;
+  border-radius: 4px 4px 0 0;
+  height: 32px;
+  width: 100%;
+
+  &--login-links {
+    border-top-left-radius: 4px;
+    color: white;
+    display: inline-block;
+    height: 32px;
+    padding: 5px 20px 0 10px;
+  }
+}
\ No newline at end of file
diff --git a/src/app/main/main-layout.js b/src/app/main/main-layout.js
index 0864b3ba..6071dfcc 100644
--- a/src/app/main/main-layout.js
+++ b/src/app/main/main-layout.js
@@ -1,23 +1,24 @@
 import React              from 'react/addons';
-import {ListenerMixin}    from 'reflux';
 import {RouteHandler}     from 'react-router';
 
+import MainHeader         from 'app/main/main-layout-header';
+
 var MainLayout = React.createClass({
 
-	render() {
-		return (
-			<div className="main-layout">
+    render() {
+        return (
+            <div className="main-layout">
 
-				MainHeader
+                <MainHeader />
 
-				<RouteHandler params={this.props.params}
-					query={this.props.query} />
+                <RouteHandler params={this.props.params}
+                    query={this.props.query} />
 
-				MainFooter
+                MainFooter
 
-			</div>
-		);
-	}
+            </div>
+        );
+    }
 });
 
 export default MainLayout;
\ No newline at end of file
diff --git a/src/core-components/button.js b/src/core-components/button.js
index a5b5af0f..3b24686c 100644
--- a/src/core-components/button.js
+++ b/src/core-components/button.js
@@ -11,7 +11,8 @@ var Button = React.createClass({
     propTypes: {
         children: React.PropTypes.node,
         type: React.PropTypes.oneOf([
-            'primary'
+            'primary',
+            'light'
         ])
     },
 
diff --git a/src/core-components/button.scss b/src/core-components/button.scss
index 85ae2088..1c8f3a6b 100644
--- a/src/core-components/button.scss
+++ b/src/core-components/button.scss
@@ -15,4 +15,9 @@
     text-transform: uppercase;
     width: 239px;
   }
+
+  &-light {
+    background: none;
+    border: none;
+  }
 }
\ No newline at end of file
diff --git a/src/main.scss b/src/main.scss
index 392a9ef6..c80e5910 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -4,4 +4,4 @@
 @import 'scss/base';
 
 @import 'core-components/*';
-@import 'app/*';
\ No newline at end of file
+@import 'app/main/*';
\ No newline at end of file
diff --git a/src/scss/_vars.scss b/src/scss/_vars.scss
index 937b25bb..2f669156 100644
--- a/src/scss/_vars.scss
+++ b/src/scss/_vars.scss
@@ -8,6 +8,12 @@ $green: #1fe27b;
 $red: #e21f3f;
 
 $primary-red: #DD5555;
+$secondary-red: #FB6362;
+
+$primary-blue: #414A59;
+
+$grey: #F4F4F4;
+$dark-grey: #D9D9D9;
 
 // spacing
 $full-space: 40px;