diff --git a/Gemfile b/Gemfile
index d5ac1fad..6d635877 100644
--- a/Gemfile
+++ b/Gemfile
@@ -28,6 +28,7 @@ gem 'devise'
 gem 'devise-async'
 gem 'bootstrap_form'
 gem 'font-kit-rails'
+gem 'nprogress-rails'
 gem 'font-awesome-rails', '~> 4.2.0.0'
 gem 'rails-assets-growl'
 gem "paperclip", "~> 4.2"
diff --git a/Gemfile.lock b/Gemfile.lock
index 2558c5a5..b76ce586 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -165,6 +165,7 @@ GEM
       mini_portile (~> 0.6.0)
     nokogumbo (1.2.0)
       nokogiri
+    nprogress-rails (0.1.6.3)
     oauth (0.4.7)
     omniauth (1.2.2)
       hashie (>= 1.2, < 4)
@@ -378,6 +379,7 @@ DEPENDENCIES
   jquery-rails
   jquery-turbolinks
   mysql2
+  nprogress-rails
   omniauth
   omniauth-tumblr
   omniauth-twitter
diff --git a/app/assets/javascripts/application.js.erb.coffee b/app/assets/javascripts/application.js.erb.coffee
index 608983d5..5842510d 100644
--- a/app/assets/javascripts/application.js.erb.coffee
+++ b/app/assets/javascripts/application.js.erb.coffee
@@ -3,13 +3,16 @@
 #= require jquery.turbolinks
 #= require turbolinks
 #= require bootstrap
+#= require nprogress
+#= require nprogress-turbolinks
 #= require growl
 #= require cheet
 #= require jquery.guillotine
 #= require sweet-alert
 #= require_tree .
 
-Turbolinks.enableProgressBar()
+NProgress.configure
+  showSpinner: false
 
 window.showNotification = (text, success=true) ->
   args =
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 06528d5e..515ab0cc 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -7,12 +7,11 @@
  */
 
 @import url(https://fonts.googleapis.com/css?family=Exo+2:400,700);
-@import "bootswatch/paper/variables";
 
 $font-family-sans-serif:  "Exo 2","Open Sans", "Helvetica Neue", Helvetica, "DejaVu Sans", Arial, sans-serif;
 $font-family-serif:       Georgia, "DejaVu Serif", "Times New Roman", Times, serif;
 //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
-$font-family-monospace:   Monaco, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace;
+$font-family-monospace:   "PragmataPro", Monaco, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace;
 $font-family-base:        $font-family-sans-serif;
 
 $font-size-base:          14px;
@@ -26,6 +25,24 @@ $font-size-h4:            ceil(($font-size-base * 1.25)); // ~18px
 $font-size-h5:            $font-size-base;
 $font-size-h6:            ceil(($font-size-base * 0.85)); // ~12px
 
+$brand-primary: #5e35b1;
+$navbar-inverse-bg: #5e35b1;
+$navbar-inverse-link-color: #ffffff;
+$navbar-inverse-link-hover-color: #bfbfbf;
+$navbar-inverse-link-hover-bg: transparent;
+$navbar-inverse-link-active-color: #bfbfbf;
+$navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 6.5%);
+$navbar-inverse-link-disabled-color: darken(#fff, 12.5%);
+$navbar-inverse-link-disabled-bg: transparent;
+$navbar-inverse-brand-color: $navbar-inverse-link-color;
+$navbar-inverse-brand-hover-color: darken($navbar-inverse-link-color, 10%);
+$navbar-inverse-brand-hover-bg: transparent;
+$navbar-inverse-toggle-hover-bg: #512da8;
+$navbar-inverse-toggle-icon-bar-bg: #7e57c2;
+$navbar-inverse-toggle-border-color: #512da8;
+
+@import "bootswatch/paper/variables";
+
 @import "bootstrap";
 body { padding-top: $navbar-height; }
 @import "bootswatch/paper/bootswatch";
@@ -34,8 +51,6 @@ body { padding-top: $navbar-height; }
 
 @import "font-awesome";
 
-html.turbolinks-progress-bar::before {
-  background-color: darken($navbar-inverse-bg, 15%) !important;
-  box-shadow: 0px 0px 10px darken($navbar-inverse-bg, 15%), 0px 0px 5px darken($navbar-inverse-bg, 15%);
-  height: 2px !important;
-}
+$nprogress-color: darken($navbar-inverse-bg, 15%);
+@import 'nprogress';
+@import 'nprogress-bootstrap';
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index b72d3d52..807074a4 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -4,7 +4,7 @@
     %meta{charset: 'utf-8'}
     %meta{'http-equiv' => 'X-UA-Compatible' ,content: 'IE=edge'}
     %meta{name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=no'}
-    %meta{name: 'theme-color', content: '#0C84E4'}
+    %meta{name: 'theme-color', content: '#5e35b1'}
     %meta{name: "mobile-web-app-capable", content: "yes"}
     %meta{name: "apple-mobile-web-app-capable", content: "yes"}
     %meta{name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent'}
diff --git a/app/views/services/index.html.haml b/app/views/services/index.html.haml
index ea762073..2ab23b45 100644
--- a/app/views/services/index.html.haml
+++ b/app/views/services/index.html.haml
@@ -6,15 +6,18 @@
       .panel-body
         - if @services.count > 0
           Sharing is enabled for the following services:
-          %ul
-          - @services.each do |service|
-            %li
-              %strong= service.provider.capitalize
-              (#{service.nickname})
-              = link_to 'Disconnect', service_path(service), data: { confirm: "Really disconnect service #{service.provider.capitalize}?" }, method: :delete
         - else
           You have not connected any services yet.
 
         - APP_CONFIG['sharing'].each do |service, service_options|
           - if service_options['enabled'] and !@services.any? { |x| x.provider == service.to_s }
-            %p=link_to "Connect to #{service.capitalize}", "/auth/#{service}"
\ No newline at end of file
+            %p=link_to "Connect to #{service.capitalize}", "/auth/#{service}"
+
+      - if @services.count > 0
+        %ul.list-group
+          - @services.each do |service|
+            %li.list-group-item
+              %i{class: "fa fa-#{service.provider}"}
+              %strong= service.provider.capitalize
+              (#{service.nickname})
+              = link_to 'Disconnect', service_path(service), data: { confirm: "Really disconnect service #{service.provider.capitalize}?" }, method: :delete
\ No newline at end of file