diff --git a/src/agenda_culturel/models.py b/src/agenda_culturel/models.py
index 51e405f..ef317ae 100644
--- a/src/agenda_culturel/models.py
+++ b/src/agenda_culturel/models.py
@@ -46,7 +46,7 @@ class Category(models.Model):
 
 
     def __str__(self):
-        return self.name + " (" + self.codename + ")"
+        return self.name
 
     class Meta:
         verbose_name = _('Category')
diff --git a/src/agenda_culturel/static/css/style.css b/src/agenda_culturel/static/css/style.css
index b460ec9..a3ff7c4 100644
--- a/src/agenda_culturel/static/css/style.css
+++ b/src/agenda_culturel/static/css/style.css
@@ -1,6 +1,38 @@
-.cat {
-    line-height: 1.5em;
-    padding: 0.3em 0.8em;
-    border-radius: 0.5em;
-    text-decoration: none;
+body {
+    font-family: 'Open Sans';font-size: 16px;
+}
+
+.nav-buttons {
+    padding: 1em;
+    font-weight: bold;
+}
+
+
+.cat, .mode {
+    line-height: 2.4em;
+    box-sizing: border-box;
+    height: 2.4em;
+    padding: 0 1.4em;
+    border-radius: 1.2em;
+    text-decoration: none;
+    display: inline-block;
+    color: #000;
+}
+
+.cat.selected, .mode.selected {
+    cursor: default;
+}
+
+.mode {
+    background-color: #999;
+}
+
+a.mode:hover {
+    background-color: #666;
+    color: #FFF;
+}
+
+.mode.selected {
+    background-color: #444;
+    color: #fff;
 }
diff --git a/src/agenda_culturel/templates/agenda_culturel/page-events.html b/src/agenda_culturel/templates/agenda_culturel/page-events.html
index 5a9a541..0a80023 100644
--- a/src/agenda_culturel/templates/agenda_culturel/page-events.html
+++ b/src/agenda_culturel/templates/agenda_culturel/page-events.html
@@ -8,13 +8,23 @@
 
  {% block content %}
     <header>
-        <div id="display-mode">
-            TODO
+        <div id="display-mode" class="nav-buttons">
+            {% for mode in modes %}
+                {% if selected_mode == mode.name %}
+                <span class="mode selected">{{ mode }}</span>
+                {% else %}
+                    {% if category %}
+                        <a href="{% url 'view_mode_cat' mode.name category.pk %}" class="mode">{{ mode }}</a>
+                    {% else %}
+                    <a href="{% url 'view_mode' mode.name %}" class="mode">{{ mode }}</a>
+                    {% endif %}
+                {% endif %}
+            {% endfor %}
         </div>
-        <div id="categories">
+        <div id="categories" class="nav-buttons">
             {% for cat in categories %}
                 {% if category == cat %}
-                <span class="cat {{ cat.css_class }}">{{ cat }}</span>
+                <span class="cat {{ cat.css_class }} selected">{{ cat }}</span>
                 {% else %}
                     <a href="{% url 'view_mode_cat' selected_mode cat.pk %}" class="cat {{ cat.css_class }}">{{ cat }}</a>
                 {% endif %}
diff --git a/src/agenda_culturel/templates/agenda_culturel/page.html b/src/agenda_culturel/templates/agenda_culturel/page.html
index f8f3d4d..dd127fe 100644
--- a/src/agenda_culturel/templates/agenda_culturel/page.html
+++ b/src/agenda_culturel/templates/agenda_culturel/page.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <title>{% block title %}{% endblock %}</title>
     
+    <!-- TODO: use a local installation -->
+    <link href='https://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet'>
+
     {% load static %}
     {% if debug %}
     <link rel="icon" type="image/svg+xml" href="{% static 'images/favicon-dev.svg' %}">
diff --git a/src/agenda_culturel/templatetags/cat_extra.py b/src/agenda_culturel/templatetags/cat_extra.py
index d41af3c..37c4492 100644
--- a/src/agenda_culturel/templatetags/cat_extra.py
+++ b/src/agenda_culturel/templatetags/cat_extra.py
@@ -2,18 +2,58 @@ from django import template
 from django.utils.safestring import mark_safe
 
 from agenda_culturel.models import Category
+import statistics
+import colorsys
 
 register = template.Library()
 
-def color_variant(hex_color, brightness_offset=1):
-    """ takes a color like #87c95f and produces a lighter or darker variant """
+
+def html_to_rgb(hex_color):
+    """ takes a color like #87c95f and produces a desaturate color """
     if len(hex_color) != 7:
         raise Exception("Passed %s into color_variant(), needs to be in #87c95f format." % hex_color)
+
     rgb_hex = [hex_color[x:x + 2] for x in [1, 3, 5]]
-    new_rgb_int = [int(hex_value, 16) + brightness_offset for hex_value in rgb_hex]
-    new_rgb_int = [min([255, max([0, i])]) for i in new_rgb_int] # make sure new values are between 0 and 255
+    rgb_in = [int(hex_value, 16) for hex_value in rgb_hex]
+
+    return [x / 255 for x in rgb_in]
+
+def rgb_to_html(rgb):
+    new_rgb_int = [min([255, max([0, int(i * 255)])]) for i in rgb] # make sure new values are between 0 and 255
+    
     # hex() produces "0x88", we want just "88"
-    return "#" + "".join([hex(i)[2:] for i in new_rgb_int])
+    return "#" + "".join([("0" + hex(i)[2:])[-2:] for i in new_rgb_int])
+
+
+def get_relative_luminance(hex_color):
+
+    rgb = html_to_rgb(hex_color)
+    R = rgb[0] / 12.92 if rgb[0] <= 0.04045 else ((rgb[0] + 0.055) / 1.055) ** 2.4
+    G = rgb[1] / 12.92 if rgb[1] <= 0.04045 else ((rgb[1] + 0.055) / 1.055) ** 2.4
+    B = rgb[2] / 12.92 if rgb[2] <= 0.04045 else ((rgb[2] + 0.055) / 1.055) ** 2.4
+
+    return 0.2126 * R + 0.7152 * G + 0.0722 * B
+
+def adjust_lightness_saturation(hex_color, shift_lightness = 0.0, scale_saturation=1):
+    rgb = html_to_rgb(hex_color)
+
+    h, l, s = colorsys.rgb_to_hls(*rgb)
+
+    l += shift_lightness
+    s *= scale_saturation
+
+    r, g, b =  colorsys.hls_to_rgb(h, l, s)
+
+    return rgb_to_html([r, g, b])
+
+
+def background_color_adjust_color(color, alpha = 1):
+    result = " background-color: " + color + ("0" + hex(int(alpha * 255))[2:])[-2:] + ";"
+    if get_relative_luminance(color) < .5:
+        result += " color: #fff;"
+    else:
+        result += " color: #000;"
+    return result
 
 
 @register.simple_tag
@@ -24,14 +64,17 @@ def css_categories():
 
     for c in cats:
         result += "." + c.css_class() + " {"
-        result += " background-color: " + c.color + ";"
-        result += " border: 2px solid " + color_variant(c.color, -20) + ";"
+        result += background_color_adjust_color(adjust_lightness_saturation(c.color, .2, 0.8), 0.8)
         result += "}"
 
-        result += "." + c.css_class() + ":hover {"
-        result += " background-color: " + color_variant(c.color, 20) + ";"
-        result += " border: 2px solid " + c.color + ";"
+        result += "a." + c.css_class() + ":hover {"
+        result += background_color_adjust_color(adjust_lightness_saturation(c.color, 0.1, 1.2))
         result += "}"
 
+        result += "." + c.css_class() + ".selected {"
+        result += background_color_adjust_color(c.color)
+        result += "}"
+
+
     result += '</style>'
     return mark_safe(result)