diff --git a/content/assets/scripts/search.coffee b/content/assets/scripts/search.coffee
index 12d6a4f..71acd1b 100644
--- a/content/assets/scripts/search.coffee
+++ b/content/assets/scripts/search.coffee
@@ -4,6 +4,6 @@ $('#tipue_search_input_field').on 'focusin', ->
 $('#tipue_search_input_field').on 'focusout', ->
   $('#tipue_search_input').removeClass("focused")
 
-$('.nav-toggle').on 'click', ->
-  $('.nav-menu').toggleClass('is-active')
-  $('.nav-toggle').toggleClass('is-active')
+$('.navbar-burger').on 'click', ->
+  $('.navbar-menu').toggleClass('is-active')
+  $('.navbar-burger').toggleClass('is-active')
diff --git a/content/assets/stylesheets/includes/cammie.scss b/content/assets/stylesheets/includes/cammie.scss
index 7505918..52703bb 100644
--- a/content/assets/stylesheets/includes/cammie.scss
+++ b/content/assets/stylesheets/includes/cammie.scss
@@ -50,20 +50,13 @@
   }
 }
 #cammie-section {
-
-  .nav-center{
-  width:100%;
-  }
   button{
     background-color: $orange;
     color: white;
     margin-top: 5px;
     border-radius: 0;
     border: none;
-    width: 33.333333333333333333333333333333333333333333333333333%;
-    &:not(:last-child){
-        margin-right: 5px;
-    }
+    width: 100%;
     &:hover{
       color: #363636;
     }
diff --git a/content/assets/stylesheets/includes/navbar.scss b/content/assets/stylesheets/includes/navbar.scss
index 7adfc9b..cf1c461 100644
--- a/content/assets/stylesheets/includes/navbar.scss
+++ b/content/assets/stylesheets/includes/navbar.scss
@@ -17,62 +17,39 @@
     }
   }
 
-  .nav-menu {
-    z-index: 20;
-
-    .nav-transparent {
-      background: none;
-    }
-  }
-
-  .actual-nav-bar {
-    padding: 0;
-    margin: 10px;
-    margin-bottom: 0;
-    border-bottom: 1px solid #eee;
-  }
-
-  #inline-logo {
-    min-width: 38.703px;
-  }
-
   #logo-link {
+    @include desktop {
+      width: 124px;
+      border-bottom: 2px solid $body-background;
+      margin-bottom: -2px;
+    }
     #logo {
-      padding-left: 10px;
-      width: 100px;
+      @include desktop {
+        max-width: none;
+        max-height: none;
+        left: 0;
+        bottom: 5px;
+        width: 100px;
+        position: absolute;
+      }
     }
   }
 
-  //Height of the line underneath when hovering over a menu item
-  $border-height: 3px;
+  .navbar-item {
+    font-variant: small-caps;
+    font-size: 1.15em; 
+  }
 
-  .nav {
-    height: 100%;
-    align-items: flex-end;
-    z-index: auto;
-
-    .nav-item {
-      transition: 0.2s;
-
-      font-variant: small-caps;
-      font-size: 1.15em;
-
-      &:not(.nav-search) {
-        border-bottom: $border-height solid transparent;
-        border-top: 3px solid transparent;
+  .navbar:not(.is-transparent) {
+    .navbar-item {
+      &:not(.is-active) {
+        color: #7a7a7a;
       }
 
-      &:hover {
-        transition: 0.2s;
-      }
-
-      &.social-icon {
-          padding-left: 5px;
-          padding-right: 5px;
-      }
-
-      &:not(.nav-search):hover, &.is-active {
-        border-bottom-color: $zeus-orange;
+      &.is-active {
+        color: $primary;
+        border-bottom: 2px solid;
+        margin-bottom: -2px;
       }
     }
   }
diff --git a/content/assets/stylesheets/includes/variables.scss b/content/assets/stylesheets/includes/variables.scss
index 7f2eeac..c025187 100644
--- a/content/assets/stylesheets/includes/variables.scss
+++ b/content/assets/stylesheets/includes/variables.scss
@@ -15,6 +15,7 @@ $turquoise: #30D1B2;
 
 $family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 
+$link: $orange;
 $link-visited: $orange;
 
 $border-hover: $blue;
diff --git a/content/cammie.erb b/content/cammie.erb
index ddea60b..de0dfe2 100644
--- a/content/cammie.erb
+++ b/content/cammie.erb
@@ -49,14 +49,18 @@ title: Cammie
       </div>
     </div>
   </div>
-  <nav class="nav">
-    <div class="nav-center">
+  <nav class="nav columns">
+    <div class="column">
       <button class="button ctrl" data-command="set_pos" data-x="16" data-y="16">
         Kleine tafel
       </button>
+    </div>
+    <div class="column">
       <button class="button ctrl" data-command="set_pos" data-x="50" data-y="10">
         Grote tafel
       </button>
+    </div>
+    <div class="column">
       <button class="ctrl button" data-command="set_pos" data-x="0" data-y="12">
         Zetel
       </button>
diff --git a/content/index.erb b/content/index.erb
index 8bbdf4f..7eb2bcd 100644
--- a/content/index.erb
+++ b/content/index.erb
@@ -35,11 +35,8 @@
       </div>
       <!-- latest blogpost -->
       <div class="tile is-6 is-parent">
-        <%= render '/partials/_tile.*',
-          article: sorted_articles.first,
-          small_text: "Latest blogpost",
-          htmlclass:"highlighted"%>
-      </div>
+        <%= render '/partials/_blog_preview.*', post: sorted_articles.first %>
+        </div>
     </div>
     <div class="tile">
       <div class="tile is-vertical">
@@ -52,9 +49,7 @@
       <div class="tile is-vertical">
       <% sorted_articles[1..3].each do |post| %>
         <div class="tile is-parent ">
-          <%= render '/partials/_tile.*',
-            article: post,
-            small_text: "Blogpost"%>
+          <%= render '/partials/_blog_preview.*', post: post %>
         </div>
       <%end%>
 
diff --git a/layouts/partials/_navbar.erb b/layouts/partials/_navbar.erb
index 4fe9ebc..888ccf8 100644
--- a/layouts/partials/_navbar.erb
+++ b/layouts/partials/_navbar.erb
@@ -1,72 +1,59 @@
 <div id="navbar">
-  <div class="columns">
-    <div class="logo-wrapper column is-narrow is-hidden-mobile">
-      <a id="logo-link" href="/">
+  <div class="navbar <%= 'is-transparent' if defined? @transparent_nav %>">
+    <div class="navbar-brand">
+      <a class="navbar-item" id="logo-link" href="/">
         <% if christmastime? %>
           <img id="santa" src="/assets/images/pusheen.png">
         <% end %>
         <img id="logo" src="<%= zeus_logo_url color: @zeus_logo_color %>" alt="" />
       </a>
+      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
     </div>
-    <div class="actual-nav-bar column">
-      <nav class="nav">
-          <a class="is-hidden-tablet nav-item" href="/">
-            <img id="inline-logo" src="<%= zeus_logo_url color: @zeus_logo_color %>" alt="" />
-          </a>
-          <div class="nav-menu nav-left <%= 'nav-transparent' if defined? @transparent_nav %>">
-            <% navigables.each do |i| %>
-            <a class="nav-item is-tab <%= 'is-active' if child_of(i) %>" href="<%= i.path %>">
-              <%= i[:title] %>
-            </a>
-            <% end %>
+    <div class="navbar-menu">
+      <div class="navbar-start">
+        <% navigables.each do |i| %>
+        <a class="navbar-item <%= 'is-active' if child_of(i) %>" href="<%= i.path %>">
+          <%= i[:title] %>
+        </a>
+        <% end %>
+      </div>
+      <!-- TODO: Remove this is-hidden-touch, it's just a convenience for now -->
+      <div class="navbar-end is-hidden-touch">
+        <form action="/search/?" method="get" class="navbar-item nav-search">
+          <div id="tipue_search_input">
+            <input type="text" name="q" id="tipue_search_input_field" autocomplete="off">
           </div>
-
-
-          <!-- Filler for when mobile -->
-          <div class="nav-left is-hidden-tablet"></div>
-
-          <div class="nav-right">
-            <form action="/search/?" method="get">
-              <div id="tipue_search_input" class="nav-item nav-search">
-                <input type="text" name="q" id="tipue_search_input_field" autocomplete="off">
-              </div>
-            </form>
-          </div>
-
-          <span class="nav-toggle">
-            <span></span>
-            <span></span>
-            <span></span>
+        </form>
+        <a class="navbar-item social-icon" href="https://github.com/ZeusWPI" target="_blank">
+          <span class="icon">
+            <%= fa :github %>
           </span>
-
-          <div class="nav-right is-hidden-mobile">
-              <a class="nav-item social-icon" href="https://github.com/ZeusWPI" target="_blank">
-                  <span class="icon">
-                    <%= fa :github %>
-                  </span>
-              </a>
-              <a class="nav-item social-icon" href="https://www.facebook.com/zeus.wpi/" target="_blank">
-                  <span class="icon">
-                    <%= fa :facebook %>
-                  </span>
-              </a>
-              <a class="nav-item social-icon" href="/feed.xml" target="_blank">
-                  <span class="icon">
-                    <%= fa :rss %>
-                  </span>
-              </a>
-              <a class="nav-item social-icon" href="/ical.ics">
-                  <span class="icon">
-                    <%= fa :calendar %>
-                  </span>
-              </a>
-              <a class="nav-item social-icon" href="//zeus.ugent.be/wiki">
-                  <span class="icon">
-                    <%= fa :'wikipedia-w' %>
-                  </span>
-              </a>
-          </div>
-      </nav>
+        </a>
+        <a class="navbar-item social-icon" href="https://www.facebook.com/zeus.wpi/" target="_blank">
+          <span class="icon">
+            <%= fa :facebook %>
+          </span>
+        </a>
+        <a class="navbar-item social-icon" href="/feed.xml" target="_blank">
+          <span class="icon">
+            <%= fa :rss %>
+          </span>
+        </a>
+        <a class="navbar-item social-icon" href="/ical.ics">
+          <span class="icon">
+            <%= fa :calendar %>
+          </span>
+        </a>
+        <a class="navbar-item social-icon" href="//zeus.ugent.be/wiki">
+          <span class="icon">
+            <%= fa :'wikipedia-w' %>
+          </span>
+        </a>
+      </div>
     </div>
   </div>
 </div>
diff --git a/package-lock.json b/package-lock.json
index eb81606..8f3b0bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,9 +5,9 @@
   "requires": true,
   "dependencies": {
     "bulma": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.5.1.tgz",
-      "integrity": "sha1-2ygxyUr+cyJQx7ElJ6e3kqTcnvg="
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.0.tgz",
+      "integrity": "sha1-1IAXDIdoy3dP9galqvXeqpLNpiI="
     },
     "bulma-divider": {
       "version": "0.0.1",
diff --git a/package.json b/package.json
index 6f8370f..1225212 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
   "license": "MIT",
   "repository": "https://github.com/ZeusWPI/zeus.ugent.be",
   "dependencies": {
-    "bulma": "0.5.1",
+    "bulma": "0.7.0",
     "bulma-divider": "~0.0.1"
   }
 }