diff --git a/app/styles/app.scss b/app/styles/app.scss
index 0fe06a53..f425fc0f 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -8,12 +8,8 @@
 
 @import "app/ansi";
 @import "app/auth";
-@import "app/button";
 @import "app/caches";
 @import "app/charm";
-@import "app/components/loader";
-@import "app/components/tiles";
-@import "app/components/travis-switch";
 @import "app/flash";
 @import "app/forms";
 @import "app/getting_started";
@@ -46,6 +42,11 @@
 @import "app/tabs";
 @import "app/tipsy";
 
+@import "app/components/loader";
+@import "app/components/tiles";
+@import "app/components/travis-switch";
+@import "app/components/buttons";
+
 @import "app/layout";
 @import "app/layouts/dashboard";
 @import "app/layouts/error";
diff --git a/app/styles/app/button.sass b/app/styles/app/components/buttons.sass
similarity index 50%
rename from app/styles/app/button.sass
rename to app/styles/app/components/buttons.sass
index 20416969..0418567b 100644
--- a/app/styles/app/button.sass
+++ b/app/styles/app/components/buttons.sass
@@ -1,10 +1,18 @@
+/*
+ * Buttons
+ */
+
+$button-border-color: #d4d4d4
 
 .button
+  font-family: $font-family-sans-serif
+  font-size: $font-size-tiny
+  font-weight: normal
   position: relative
   overflow: visible
   display: inline-block
   padding: 5px 10px
-  border: 1px solid #d4d4d4
+  border: 1px solid $button-border-color
   margin: 0
   background-color: #E9E9E7
   background-clip: padding-box
@@ -12,7 +20,6 @@
   outline: none
   text-decoration: none
   text-align: center
-  font: 11px/normal "Source Sans Pro", Helvetica, sans-serif
   color: $gray-dark-3
   white-space: nowrap
 
@@ -20,7 +27,7 @@
 .button:focus,
 .button:active,
 .button.active
-  border-color: #d4d4d4
+  border-color: $button-border-color
   border-bottom-color: #2a65a0
   background-color: #40454f
   text-decoration: none
@@ -41,6 +48,28 @@
   border: 1px solid #DDD
 .show-more:hover
   background-color: #40454F
-  color: #FFF
+  color: $white
   border: 1px solid #40454F
   cursor: pointer
+
+
+#top #navigation // bad style, we really need to get rid of the ids in the styles
+  .button--signin
+    display: inline-block
+    padding: 0.5em 1.9em 0.45em 0.6em
+    background: #39a85b
+    color: $white
+    font-size: $font-size-small
+    line-height: 1
+    text-decoration: none
+    border-radius: 4px
+    border: none
+    vertical-align: middle
+    cursor: pointer
+    background: 
+      image: url(../images/ui/github-signin.svg)
+      repeat: no-repeat
+      position: 95.5% 44%
+    &:hover
+      background-color: #73c78d
+      text-decoration: none
diff --git a/app/styles/app/top.sass b/app/styles/app/top.sass
index 3904a624..4e9d9ef8 100644
--- a/app/styles/app/top.sass
+++ b/app/styles/app/top.sass
@@ -33,7 +33,7 @@
     border-top: 1px solid $topbar-bg-darker
     a, span
       display: block
-      padding: 0 12px
+      padding: 2px 12px 0
       &:hover
         color: $color-link-top-highlight
 
@@ -59,7 +59,6 @@
     ul
       line-height: 55px
       position: relative
-      top: 3px
     li
       display: inline-block
       border: none
@@ -70,6 +69,7 @@
 
   .nav-burger
     overflow: auto
+    height: 55px
     @media #{$medium-up}
       display: none
 
@@ -126,6 +126,11 @@
     text-align: right
 
   .menu.profile
+    padding: 0.2em 0px 0.5em
+    @media #{$medium-up}
+      padding: 0
+      &:not(.signed-out)
+        top: 2px
     .signing-in
       background: inline-image('ui/spinner.svg') no-repeat 110px 22px
 
@@ -190,7 +195,7 @@
   border-radius: 100px
   @media #{$medium-up}
     float  : right
-    margin : 10px 0 0 10px
+    margin : 12px 0 0 10px
 
 // #user ul
 //   text-align : left
diff --git a/app/templates/top.hbs b/app/templates/top.hbs
index dcd73aa1..644b6061 100644
--- a/app/templates/top.hbs
+++ b/app/templates/top.hbs
@@ -68,7 +68,7 @@
   <li {{bind-attr class="view.classProfile"}}>
     <p class="handle">
       {{#if auth.signedOut}}
-        <a class="signed-out" href="#" {{action "signIn" target="auth"}}>Sign in with GitHub</a>
+        <button class="signed-out button--signin" {{action "signIn" target="auth"}}>Sign in with GitHub</button>
       {{/if}}
       {{#if auth.signedIn}}
         {{#link-to "profile" class="signed-in"}}<img {{bind-attr src="gravatarUrl"}}/>{{userName}}{{/link-to}}
diff --git a/public/images/ui/github-signin.svg b/public/images/ui/github-signin.svg
new file mode 100644
index 00000000..7c2ccc05
--- /dev/null
+++ b/public/images/ui/github-signin.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#D7E7D6" d="M7.999,0.25c-4.278,0-7.749,3.558-7.749,7.947
+	c0,3.51,2.218,6.489,5.302,7.54c0.384,0.072,0.528-0.172,0.528-0.383c0-0.188-0.009-0.689-0.009-1.352
+	c-2.157,0.479-2.612-1.066-2.612-1.066c-0.354-0.918-0.861-1.162-0.861-1.162c-0.705-0.492,0.052-0.482,0.052-0.482
+	c0.779,0.057,1.189,0.82,1.189,0.82c0.688,1.211,1.812,0.861,2.255,0.66c0.067-0.514,0.269-0.865,0.491-1.064
+	c-1.722-0.199-3.529-0.881-3.529-3.926c0-0.868,0.303-1.576,0.796-2.133C3.771,5.447,3.508,4.639,3.929,3.544
+	c0,0,0.65-0.212,2.129,0.815C6.676,4.184,7.342,4.096,8,4.094c0.658,0.002,1.322,0.09,1.941,0.266
+	c1.479-1.027,2.127-0.815,2.127-0.815c0.424,1.094,0.159,1.902,0.078,2.103c0.495,0.558,0.796,1.266,0.796,2.133
+	c0,3.051-1.812,3.725-3.538,3.92c0.279,0.248,0.524,0.73,0.524,1.473c0,1.062-0.007,1.918-0.007,2.18
+	c0,0.211,0.141,0.459,0.533,0.383c3.076-1.055,5.295-4.029,5.295-7.54C15.75,3.808,12.278,0.25,7.999,0.25"/>
+</svg>