diff --git a/content/events.erb b/content/events.erb
index 699ea84..7dd7cda 100644
--- a/content/events.erb
+++ b/content/events.erb
@@ -3,35 +3,32 @@ navigable: true
 title: Events
 order: 20
 ---
-
-<div>
+<div class="container">
   <div class="content">
     <h1>Upcoming events</h1>
   </div>
-
-  <% upcoming_events.each do |event| %>
-    <!-- <hr class="divider"> -->
-    <% if (sub_events(event)).empty? %>
-      <%= render '/partials/_event_preview.*', event: event %>
-    <% else %>
-      <% sub_events(event).each do |sub_event| %>
-        <%= render '/partials/_event_preview.*', event: sub_event, main_event: event %>
-      <% end %>
+  <% upcoming_events.each_slice(2) do |slice| %>
+  <div class="columns">
+    <% slice.each do |event| %>
+    <div class="tile is-parent ">
+      <%= render '/partials/_events_tile.*', event: event %>
+    </div>
     <% end %>
+  </div>
   <% end %>
+</div>
 
+<div class="container">
   <div class="content">
     <h1>Past events</h1>
   </div>
-
-  <% past_events.each do |event| %>
-    <!-- <hr class="divider"> -->
-    <% if (sub_events(event)).empty? %>
-      <%= render '/partials/_event_preview.*', event: event %>
-    <% else %>
-      <% sub_events(event).each do |sub_event| %>
-        <%= render '/partials/_event_preview.*', event: sub_event, main_event: event %>
-      <% end %>
+  <% past_events.each_slice(2) do |slice| %>
+  <div class="columns">
+    <% slice.each do |event| %>
+    <div class="tile is-parent ">
+      <%= render '/partials/_events_tile.*', event: event %>
+    </div>
     <% end %>
+  </div>
   <% end %>
 </div>
diff --git a/content/events/16-17/25codenight.md b/content/events/16-17/25codenight.md
index 1d30222..2b0f6b8 100644
--- a/content/events/16-17/25codenight.md
+++ b/content/events/16-17/25codenight.md
@@ -5,6 +5,7 @@ description: 1 uur voor elk levensjaar van Zeus!
 created_at: 11-10-2016
 time: 1-11-2016
 location: Therminal
+banner: https://zeus.ugent.be/zeuswpi/vRX2hOYZ.png
 locationlink: Hoveniersberg, Gent
 ---
 
diff --git a/content/events/16-17/Rust.md b/content/events/16-17/Rust.md
index 9eaf356..367589c 100644
--- a/content/events/16-17/Rust.md
+++ b/content/events/16-17/Rust.md
@@ -6,6 +6,7 @@ created_at: 11-10-2016
 time: 26-10-2016 19:00
 location: PC lokaal Turing (1e verdiep) , S9
 locationlink: Sterre,Ghent Belgium
+color: "#003398"
 ---
 
 He!
diff --git a/content/events/16-17/datacenter.md b/content/events/16-17/datacenter.md
index 6539365..1f16a61 100644
--- a/content/events/16-17/datacenter.md
+++ b/content/events/16-17/datacenter.md
@@ -1,6 +1,6 @@
 ---
 title: Bezoek datacenter
-image: https://zeus.ugent.be/zeuswpi/_Lv_m5Ng.jpeg
+banner: http://www.foneo-datacenter.eu/images/banner_ownership_eyecatcher.jpg
 description: Zeus bezoekt het datacenter en de supercomputer in S10!
 created_at: 3-10-2016
 time: 10-10-2016 17:45
diff --git a/content/events/16-17/fosdem.md b/content/events/16-17/fosdem.md
index bc46f68..a941eef 100644
--- a/content/events/16-17/fosdem.md
+++ b/content/events/16-17/fosdem.md
@@ -5,7 +5,7 @@ created_at: 27-12-2016
 time: 04-02-2017
 location: ULB Campus Solbosch
 locationlink: 50.813014, 4.381760
-banner: //fosdem.org/2017/assets/style/fosdem-home-visual-a4f55964bc6492855a435b88874f4a7dddac0ea3c2927e64e0608adc18e24dd2.jpg
+banner: https://fosdem.org/2017/assets/style/fosdem-home-visual-e16e61f851e13e834abcc31fddc09ddbc7a63a5b29147ae506e9c954e0173089.jpg
 image: //fosdem.org/2017/assets/style/logo-gear-7204a6874eb0128932db10ff4030910401ac06f4e907f8b4a40da24ba592b252.png
 ---
 Het is weer bijna zo ver: op 4 en 5 februari gaat FOSDEM door aan de ULB Solbosch campus in Brussel. Voor zij die het nog niet weten: FOSDEM staat voor Free and Open source Software Developers' European Meeting en is één van de grootste gelijkaardige evenementen in Europa. Naast honderden interessante talks in tientallen devrooms en auditoria, krijg je de kans om soortgenoten te ontmoeten en ideeën uit te wisselen. Een echte topper dus in het boekje van de Zeus'er!
diff --git a/content/events/16-17/latex.md b/content/events/16-17/latex.md
index eb0a0af..8373c70 100644
--- a/content/events/16-17/latex.md
+++ b/content/events/16-17/latex.md
@@ -1,6 +1,7 @@
 ---
 title: Latex les
 image: https://zeus.ugent.be/zeuswpi/47J781xu.png
+banner: http://www.senzokuike-eye.net/images/skins/bg-banner-royal-blue.png
 description: Introductie tot LaTeX
 created_at: 11-10-2016
 time: 25-10-2016 19:00
diff --git a/content/events/16-17/lip.md b/content/events/16-17/lip.md
index 4b239eb..0794f02 100644
--- a/content/events/16-17/lip.md
+++ b/content/events/16-17/lip.md
@@ -1,11 +1,13 @@
 ---
 title: Linux Install Party
 image: https://zeus.ugent.be/zeuswpi/9vRI2xW9.jpg
+banner: https://www.bleepstatic.com/images/news/deals/misc/june-2016/sale_4504_special_sale_banner_background[1].jpg
 description: Hulp nodig met het installeren van Linux op je laptop? Zeus helpt je graag!
 created_at: 3-10-2016
 time: 5-10-2016 17:00
 location: Zeus kelder, S9
 locationlink: Sterre,Ghent Belgium
+
 ---
 
 Zeus helpt elk jaar de eerstejaartjes (en anderen) met het installeren van Linux op hun maagdelijke laptops.
diff --git a/content/events/16-17/spelavondI.md b/content/events/16-17/spelavondI.md
index 04a26b8..0f40a9a 100644
--- a/content/events/16-17/spelavondI.md
+++ b/content/events/16-17/spelavondI.md
@@ -1,6 +1,7 @@
 ---
 title: Spelletjesavond I
 image: https://zeus.ugent.be/zeuswpi/fSIklQoj.jpg
+banner: http://assets.inhabitat.com/wp-content/blogs.dir/1/files/2012/03/board-games.jpg
 description: De eerste spelletjesavond van het academiejaar!
 created_at: 11-10-2016
 time: 19-10-2016 18:00
diff --git a/content/index.erb b/content/index.erb
index 53b5593..a50da53 100644
--- a/content/index.erb
+++ b/content/index.erb
@@ -24,10 +24,8 @@
           </div>
         </div>
         <!--next event -->
-        <div class="tile is-parent is-4"  >
-          <%= render '/partials/_tile.*',
-            article: upcoming_events[0] || all_events[-1],
-            small_text: if upcoming_events[0] then "Upcoming event" else "Past event" end%>
+        <div class="tile is-parent is-4">
+          <%= render '/partials/_events_tile.*', event: upcoming_events[0] || all_events[-1] %>
         </div>
 
         <!-- latest blogpost -->
@@ -41,13 +39,10 @@
       <div class="tile">
         <div class="tile is-vertical">
           <% all_events.reject { |x| x == upcoming_events[0] }.reverse[0..2].each do |event| %>
-            <div class="tile is-parent ">
-              <%= render '/partials/_tile.*',
-                article: event,
-                small_text: upcoming_events.include?(event) ? "Upcoming event" : "Past event",
-                htmlclass:"highlighted" %>
+          <div class="tile is-parent ">
+            <%= render '/partials/_events_tile.*', event: event %>
           </div>
-        <%end%>
+          <%end%>
         </div>
         <div class="tile is-vertical">
         <% sorted_articles[1..3].each do |post| %>
diff --git a/layouts/eventpost.erb b/layouts/eventpost.erb
index bdcf33a..4e8d490 100644
--- a/layouts/eventpost.erb
+++ b/layouts/eventpost.erb
@@ -14,6 +14,8 @@
 
 <% if item[:banner] %>
 <section class="hero is-medium is-primary is-bold" style="background-image:url('<%= item[:banner] %>');background-position:center;">
+<% elsif item[:color] %>
+<section class="hero is-medium is-primary is-bold" style="background-image: linear-gradient(to top right,rgba(255,255,255,0),rgba(0,0,0,.60)); background-color:<%= item[:color] %>;">
 <% else %>
 <section class="hero is-medium is-primary is-bold">
 <% end %>
diff --git a/layouts/partials/_events_tile.erb b/layouts/partials/_events_tile.erb
new file mode 100644
index 0000000..e19d22c
--- /dev/null
+++ b/layouts/partials/_events_tile.erb
@@ -0,0 +1,32 @@
+<% if @event[:banner] %>
+  <a href="<%= @event.path %>" class="tile is-child box backgroundimg highlighted"
+    style="background-image:url('<%= @event[:banner] %>');">
+<% elsif @event[:color] %>
+  <a href="<%= @event.path %>" class="tile is-child box backgroundimg highlighted"
+    style="background-image: linear-gradient(to top right,rgba(255,255,255,0),rgba(0,0,0,.60)); background-color:<%= @event[:color] %>;">
+<% else %>
+  <a href="<%= @event.path %>" class="tile is-child box backgroundimg">
+<% end %>
+  <div class="content">
+    <div class="columns">
+      <div class="column">
+        <h2>
+          <%= @event[:title] %>
+        </h2>
+      </div>
+      <div class="column is-narrow">
+        <small>
+          <%= @event[:time].strftime('%A %d %B %Y %H:%M') %>
+          <br>
+          <%= @event[:location] %>
+        </small>
+      </div>
+    </div>
+    <div class="description">
+      <%= @event[:description] %>
+    </div>
+    <div class="teaser">
+      <%= get_teaser(@event) %>
+    </div>
+  </div>
+</a>
diff --git a/layouts/partials/_tile.erb b/layouts/partials/_tile.erb
index 75ba5ae..f247753 100644
--- a/layouts/partials/_tile.erb
+++ b/layouts/partials/_tile.erb
@@ -1,5 +1,5 @@
 <a href="<%= @article.path %>" class="tile is-child box backgroundimg <%= @htmlclass %>"
-  style="background-image:url('<%= @article[:banner] %>');">
+  style="background-image:url('<%= @article[:banner] %>') ;">
   <div class="content" >
     <div class="columns">
       <div class="column">