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/button.sass
deleted file mode 100644
index 20416969..00000000
--- a/app/styles/app/button.sass
+++ /dev/null
@@ -1,46 +0,0 @@
-
-.button
-  position: relative
-  overflow: visible
-  display: inline-block
-  padding: 5px 10px
-  border: 1px solid #d4d4d4
-  margin: 0
-  background-color: #E9E9E7
-  background-clip: padding-box
-  cursor: pointer
-  outline: none
-  text-decoration: none
-  text-align: center
-  font: 11px/normal "Source Sans Pro", Helvetica, sans-serif
-  color: $gray-dark-3
-  white-space: nowrap
-
-.button:hover,
-.button:focus,
-.button:active,
-.button.active
-  border-color: #d4d4d4
-  border-bottom-color: #2a65a0
-  background-color: #40454f
-  text-decoration: none
-  color: #fff
-
-.button:active,
-.button.active
-  border-color: #2a65a0
-  border-bottom-color: #2356c4
-  background-color: #40454f
-
-.show-more
-  background-color: #F2F2EB
-  display: inline-block
-  color: #666
-  padding: 6px 15px
-  text-decoration: none
-  border: 1px solid #DDD
-.show-more:hover
-  background-color: #40454F
-  color: #FFF
-  border: 1px solid #40454F
-  cursor: pointer
diff --git a/app/styles/app/components/buttons.sass b/app/styles/app/components/buttons.sass
new file mode 100644
index 00000000..cf9682d1
--- /dev/null
+++ b/app/styles/app/components/buttons.sass
@@ -0,0 +1,81 @@
+/*
+ * 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 $button-border-color
+  margin: 0
+  background-color: #E9E9E7
+  background-clip: padding-box
+  cursor: pointer
+  outline: none
+  text-decoration: none
+  text-align: center
+  color: $gray-dark-3
+  white-space: nowrap
+
+.button:hover,
+.button:focus,
+.button:active,
+.button.active
+  border-color: $button-border-color
+  border-bottom-color: #2a65a0
+  background-color: #40454f
+  text-decoration: none
+  color: #fff
+
+.button:active,
+.button.active
+  border-color: #2a65a0
+  border-bottom-color: #2356c4
+  background-color: #40454f
+
+.show-more
+  background-color: #F2F2EB
+  display: inline-block
+  color: #666
+  padding: 6px 15px
+  text-decoration: none
+  border: 1px solid #DDD
+.show-more:hover
+  background-color: #40454F
+  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.7em 2em 0.65em 0.6em
+    color: $white
+    font-size: $font-size-small
+    line-height: 1
+    text-decoration: none
+    border-radius: 4px
+    border: none
+    vertical-align: middle
+    cursor: pointer
+    background:
+      color: #39a85b
+      image: inline-image('ui/github-signin.svg')
+      repeat: no-repeat
+      position: 95.5% 45%
+    &:hover
+      background-color: #73c78d
+      text-decoration: none
+    &.signing-in
+      background-image: inline-image('ui/spinner.svg')
+      background-position: 92% 47%
+      &:hover
+        background-color: #39a85b
+
diff --git a/app/styles/app/top.sass b/app/styles/app/top.sass
index 3904a624..d320186d 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,8 +126,11 @@
     text-align: right
 
   .menu.profile
-    .signing-in
-      background: inline-image('ui/spinner.svg') no-repeat 110px 22px
+    padding: 0.2em 0px 0.5em
+    @media #{$medium-up}
+      padding: 0
+      &.signed-in
+        top: 2px
 
     img
       width: 30px
@@ -190,7 +193,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..46848fbf 100644
--- a/app/templates/top.hbs
+++ b/app/templates/top.hbs
@@ -68,13 +68,13 @@
   <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}}
       {{/if}}
       {{#if auth.signingIn}}
-        <span class="signing-in">Signing In</span>
+        <button class="signing-in button--signin">Signing In</button>
       {{/if}}
     </p>
     <ul>
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>