diff --git a/.gitignore b/.gitignore
index 0b796dc..dc1c3a1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,3 +11,5 @@ tmp/
 crash.log
 
 .idea/
+
+.sass-cache/
diff --git a/Gemfile b/Gemfile
index 426f9b4..12ef8d2 100644
--- a/Gemfile
+++ b/Gemfile
@@ -7,6 +7,7 @@ ruby '2.3.1'
 gem 'nanoc'
 gem 'kramdown'
 gem 'coffee-script'
+gem 'sass'
 
 group :development do
   gem 'adsf'
diff --git a/Gemfile.lock b/Gemfile.lock
index 905f3f8..ba4381b 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -50,6 +50,7 @@ GEM
     rb-inotify (0.9.7)
       ffi (>= 0.5.0)
     ruby_dep (1.3.1)
+    sass (3.4.22)
     shellany (0.0.1)
     slop (3.6.0)
     thor (0.19.1)
@@ -63,6 +64,7 @@ DEPENDENCIES
   guard-nanoc
   kramdown
   nanoc
+  sass
 
 RUBY VERSION
    ruby 2.3.1p112
diff --git a/Rules b/Rules
index 8408a3f..1917f81 100644
--- a/Rules
+++ b/Rules
@@ -15,6 +15,11 @@ compile '/**/*.coffee' do
   write "#{item.identifier.without_ext}.js"
 end
 
+compile '/**/*.scss' do
+  filter :sass, syntax: :scss
+  write "#{item.identifier.without_ext}.css"
+end
+
 # Markdown
 compile '/**/*.md' do
   filter :kramdown
diff --git a/content/index.coffee b/content/index.coffee
index 5085fc2..1421978 100644
--- a/content/index.coffee
+++ b/content/index.coffee
@@ -1,6 +1,8 @@
+$.getJSON 'http://cors.io/?u=https://zeus.ugent.be/game/top4/show.json', (data) ->
+  $('#top-coder-name').text(data[0].github_name)
+
 $.get 'https://api.github.com/orgs/ZeusWPI/events', (data) ->
   for e in data
-    console.log e
     $('#github-feed ul').append(
       $('<li />').append(
         $('<img />',
diff --git a/content/index.erb b/content/index.erb
index 2f8d0e4..ac4b337 100644
--- a/content/index.erb
+++ b/content/index.erb
@@ -2,8 +2,8 @@
   <img id="logo" src="http://i.imgur.com/W5d4B8E.png" alt="" />
   <div class="pure-u-3-4">
   </div>
-  <div class="pure-u-1-4">
-    #1 CODER ON GAMIFICATION
+  <div id="top-coder" class="pure-u-1-4">
+    <span id="top-coder-name"></span> is awesome!
   </div>
 </header>
 
diff --git a/content/stylesheet.css b/content/stylesheet.scss
similarity index 95%
rename from content/stylesheet.css
rename to content/stylesheet.scss
index ccf46ae..4aef85f 100644
--- a/content/stylesheet.css
+++ b/content/stylesheet.scss
@@ -1,10 +1,12 @@
+$zeus_orange: rgb(255, 109, 0);
+
 header {
     position: absolute;
     top: 0;
     height: 75px;
     line-height: 75px;
 
-    background-color: rgb(255, 109, 0);
+    background-color: $zeus_orange;
     color: white;
 
     width: 100%;