diff --git a/Rules b/Rules
index 2bc8e54..61df37f 100644
--- a/Rules
+++ b/Rules
@@ -14,6 +14,8 @@ require 'socket'
 #
 
 preprocess do
+  `npm install`
+
   @items.find_all('/posts/**/*').each do |i|
     year_str = %r{/(\d\d)-\d\d/}.match(i.identifier).captures[0]
     academic_year = year_str.to_i
diff --git a/content/assets/images/hydra-logo.png b/content/assets/images/hydra-logo.png
new file mode 100644
index 0000000..c1b7ecd
Binary files /dev/null and b/content/assets/images/hydra-logo.png differ
diff --git a/content/assets/stylesheets/includes/general.scss b/content/assets/stylesheets/includes/general.scss
index 4691d8b..dc89cd9 100644
--- a/content/assets/stylesheets/includes/general.scss
+++ b/content/assets/stylesheets/includes/general.scss
@@ -10,6 +10,14 @@
   text-align: justify;
 }
 
+header.section {
+  padding-bottom: 10px;
+}
+
+main.section {
+  padding-top: 20px;
+}
+
 
 #navbar {
   align-items: flex-end;
@@ -68,6 +76,10 @@ footer.footer {
   background-color: $tile-orange;
 }
 
+.project-tile {
+  background-color: $turquoise;
+}
+
 #tipue_search_input {
   background: none;
   padding: 12px;
diff --git a/content/assets/stylesheets/includes/projects.scss b/content/assets/stylesheets/includes/projects.scss
index c3f591f..c441143 100644
--- a/content/assets/stylesheets/includes/projects.scss
+++ b/content/assets/stylesheets/includes/projects.scss
@@ -38,3 +38,8 @@
   font-size: 6vw;
   font-family: $family-sans-serif;
 }
+
+.logo-index {
+  font-size: 4vw;
+  color: white;
+}
diff --git a/content/assets/stylesheets/includes/variables.scss b/content/assets/stylesheets/includes/variables.scss
index 37675ec..b8f8258 100644
--- a/content/assets/stylesheets/includes/variables.scss
+++ b/content/assets/stylesheets/includes/variables.scss
@@ -6,8 +6,11 @@ $tile-orange: #ff9f1a;
 
 $navbar-border-color: #CCC;
 $event-border-color: #DDD;
+
 $orange: $zeus-orange;
 $blue: $zeus-blue;
+$turquoise: #30D1B2;
+
 $primary: $orange;
 
 $family-sans-serif: 'Lato', sans-serif;
diff --git a/content/index.erb b/content/index.erb
index da6f9d2..e19eb57 100644
--- a/content/index.erb
+++ b/content/index.erb
@@ -22,24 +22,15 @@
           </div>
         </div>
       </div>
-      <div class="tile is-vertical is-2">
-        <div class="tile is-parent">
-          <a class="tile box " href="https://zeus.ugent.be/wiki">
-            <div class="tile is-child imgcenter icon" >
-              <%= fa 'wikipedia-w' %>
-            </div>
-          </a>
-        </div>
-        <div class="tile is-parent">
-          <a class="tile box" href="/cammie">
-            <div class="tile is-child imgcenter icon">
-              <%= fa 'video-camera' %>
-            </div>
-          </a>
-        </div>
+      <div class="tile is-parent is-2">
+        <a class="tile box is-child imgcenter project-tile" href="/projects/#12urenloop">
+          <div class="logo-index has-text-centered">
+            12UL
+          </div>
+        </a>
       </div>
       <div class="tile is-parent is-2">
-        <a class="tile is-child imgcenter box hydra-tile" href="//student.ugent.be/hydra">
+        <a class="tile is-child imgcenter box hydra-tile" href="/projects/#hydra">
           <%= asset :img, 'hydra-logo.png' %>
         </a>
       </div>
diff --git a/content/projects.erb b/content/projects.erb
index 52216b0..3a43a15 100644
--- a/content/projects.erb
+++ b/content/projects.erb
@@ -4,7 +4,7 @@ title: Projecten
 order: 30
 ---
 <div class="container project content">
-  <article class="columns">
+  <article id="hydra" class="columns">
     <div class="column is-one-quarter" id="logo-column">
       <div class="hydra-scrot">
         <img src="/assets/images/hydra.png">
diff --git a/content/projects/badass_bottle_bats.md b/content/projects/badass_bottle_bats.md
index fe4d168..b2d2cbb 100644
--- a/content/projects/badass_bottle_bats.md
+++ b/content/projects/badass_bottle_bats.md
@@ -1,5 +1,5 @@
 ---
-title: Badass Battle Bots
+title: Badass Bottle Bats
 description: A bot writing contest. <a href="https://zeus.ugent.be/bottlebats">https://zeus.ugent.be/bottlebats</a>
 github: https://github.com/ZeusWPI/aichallenge
 logo_letter: B
diff --git a/layouts/partials/_navbar.erb b/layouts/partials/_navbar.erb
index d54a058..0851fe1 100644
--- a/layouts/partials/_navbar.erb
+++ b/layouts/partials/_navbar.erb
@@ -27,22 +27,27 @@
           <div class="nav-right is-hidden-mobile">
               <a class="nav-item" href="https://github.com/ZeusWPI" target="_blank">
                   <span class="icon">
-                      <i class="fa fa-github"></i>
+                    <%= fa :github %>
                   </span>
               </a>
               <a class="nav-item" href="https://www.facebook.com/zeus.wpi/" target="_blank">
                   <span class="icon">
-                      <i class="fa fa-facebook"></i>
+                    <%= fa :facebook %>
                   </span>
               </a>
               <a class="nav-item" href="/feed.xml" target="_blank">
                   <span class="icon">
-                      <i class="fa fa-rss"></i>
+                    <%= fa :rss %>
                   </span>
               </a>
               <a class="nav-item" href="/ical.ics">
                   <span class="icon">
-                      <i class="fa fa-calendar"></i>
+                    <%= fa :calendar %>
+                  </span>
+              </a>
+              <a class="nav-item" href="//zeus.ugent.be/wiki">
+                  <span class="icon">
+                    <%= fa :'wikipedia-w' %>
                   </span>
               </a>
           </div>
diff --git a/layouts/partials/_project.erb b/layouts/partials/_project.erb
index 7fe00de..80362c6 100644
--- a/layouts/partials/_project.erb
+++ b/layouts/partials/_project.erb
@@ -1,8 +1,8 @@
-<div class="container project content">
+<div id="<%= project.identifier.without_ext.split('/')[-1] %>" class="container project content">
   <article class="columns is-mobile">
     <div class="column is-one-quarter" id="logo-column">
-      <div class="logo" style="background-color: <%=project[:logo_color]%>">
-        <div class="logo-initial has-text-centered"><%=project[:logo_letter]%></div>
+      <div class="logo" style="background-color: <%= project[:logo_color]%>">
+        <div class="logo-initial has-text-centered"><%= project[:logo_letter]%></div>
       </div>
     </div>
     <div class="column">