diff --git a/src/agenda_culturel/migrations/0006_alter_category_color.py b/src/agenda_culturel/migrations/0006_alter_category_color.py
new file mode 100644
index 0000000..5d8048b
--- /dev/null
+++ b/src/agenda_culturel/migrations/0006_alter_category_color.py
@@ -0,0 +1,19 @@
+# Generated by Django 4.2.1 on 2023-10-22 16:54
+
+import colorfield.fields
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('agenda_culturel', '0005_alter_category_options'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='category',
+            name='color',
+            field=colorfield.fields.ColorField(blank=True, default=None, help_text='Color used as background for the category', image_field=None, max_length=25, null=True, samples=None, verbose_name='Color'),
+        ),
+    ]
diff --git a/src/agenda_culturel/models.py b/src/agenda_culturel/models.py
index 049c9c9..51e405f 100644
--- a/src/agenda_culturel/models.py
+++ b/src/agenda_culturel/models.py
@@ -41,6 +41,9 @@ class Category(models.Model):
 
         super(Category, self).save(*args, **kwargs)
 
+    def css_class(self):
+        return "cat-" + str(self.id)
+
 
     def __str__(self):
         return self.name + " (" + self.codename + ")"
diff --git a/src/agenda_culturel/static/css/style.css b/src/agenda_culturel/static/css/style.css
index e69de29..b460ec9 100644
--- a/src/agenda_culturel/static/css/style.css
+++ b/src/agenda_culturel/static/css/style.css
@@ -0,0 +1,6 @@
+.cat {
+    line-height: 1.5em;
+    padding: 0.3em 0.8em;
+    border-radius: 0.5em;
+    text-decoration: none;
+}
diff --git a/src/agenda_culturel/templates/agenda_culturel/page-events.html b/src/agenda_culturel/templates/agenda_culturel/page-events.html
index 7f7ab46..5a9a541 100644
--- a/src/agenda_culturel/templates/agenda_culturel/page-events.html
+++ b/src/agenda_culturel/templates/agenda_culturel/page-events.html
@@ -1,5 +1,11 @@
 {% extends "agenda_culturel/page.html" %}
 
+{% load cat_extra %}
+
+{% block entete_header %}
+    {% css_categories %}
+{% endblock %}
+
  {% block content %}
     <header>
         <div id="display-mode">
@@ -8,9 +14,9 @@
         <div id="categories">
             {% for cat in categories %}
                 {% if category == cat %}
-                <span style="background: {{ cat.color }}">{{ cat }}</span>
+                <span class="cat {{ cat.css_class }}">{{ cat }}</span>
                 {% else %}
-                    <a href="{% url 'view_mode_cat' selected_mode cat.pk %}" style="background: {{ cat.color }}">{{ cat }}</a>
+                    <a href="{% url 'view_mode_cat' selected_mode cat.pk %}" class="cat {{ cat.css_class }}">{{ cat }}</a>
                 {% endif %}
             {% endfor %}
         </div>
diff --git a/src/agenda_culturel/templates/agenda_culturel/page.html b/src/agenda_culturel/templates/agenda_culturel/page.html
index 83da5b4..f8f3d4d 100644
--- a/src/agenda_culturel/templates/agenda_culturel/page.html
+++ b/src/agenda_culturel/templates/agenda_culturel/page.html
@@ -20,9 +20,6 @@
         <header>
 
         </header>
-        <aside>
-            <!-- -->
-        </aside>
         <section>
             {% block content %}{% endblock %}
         </section>
diff --git a/src/agenda_culturel/templatetags/cat_extra.py b/src/agenda_culturel/templatetags/cat_extra.py
new file mode 100644
index 0000000..d41af3c
--- /dev/null
+++ b/src/agenda_culturel/templatetags/cat_extra.py
@@ -0,0 +1,37 @@
+from django import template
+from django.utils.safestring import mark_safe
+
+from agenda_culturel.models import Category
+
+register = template.Library()
+
+def color_variant(hex_color, brightness_offset=1):
+    """ takes a color like #87c95f and produces a lighter or darker variant """
+    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
+    # hex() produces "0x88", we want just "88"
+    return "#" + "".join([hex(i)[2:] for i in new_rgb_int])
+
+
+@register.simple_tag
+def css_categories():
+    result = '<style type="text/css">'
+    
+    cats = Category.objects.all()
+
+    for c in cats:
+        result += "." + c.css_class() + " {"
+        result += " background-color: " + c.color + ";"
+        result += " border: 2px solid " + color_variant(c.color, -20) + ";"
+        result += "}"
+
+        result += "." + c.css_class() + ":hover {"
+        result += " background-color: " + color_variant(c.color, 20) + ";"
+        result += " border: 2px solid " + c.color + ";"
+        result += "}"
+
+    result += '</style>'
+    return mark_safe(result)
diff --git a/src/agenda_culturel/views.py b/src/agenda_culturel/views.py
index 807a8c2..182077c 100644
--- a/src/agenda_culturel/views.py
+++ b/src/agenda_culturel/views.py
@@ -23,7 +23,7 @@ def home(request):
     # TODO: si on est au début de la semaine, on affiche la semaine en entier
     # sinon, on affiche le week-end
     # sauf si on est dimanche après 23h, on affiche la semaine prochaine
-    return view_mode(request, DisplayMode.this_week)
+    return view_mode(request, DisplayMode.this_week.name)
 
 
 def view_mode(request, mode):