diff --git a/colloscope/models.py b/colloscope/models.py
index dfa58b2..d59492e 100644
--- a/colloscope/models.py
+++ b/colloscope/models.py
@@ -149,7 +149,7 @@ class Term(models.Model):
                 .annotate(swap_plus=Count("swap", filter=Q(swap__enroll=1), distinct=True))
                 .annotate(swap_minus=Count("swap", filter=Q(swap__enroll=0), distinct=True))
                 .annotate(volume=F("base_vol") + F("swap_plus") - F("swap_minus"))
-                .order_by())
+                .order_by("date", "slot__time"))
 
     def query_colles_of_student(self, student) -> QuerySet:
         has_student = ((Q(groups__student=student)
@@ -224,7 +224,7 @@ class Group(models.Model):
 
         return [
             (sem, lundi,
-             colles_flat.filter(date__gte=lundi, date__lt=lundi + timedelta(weeks=1)))
+             colles_fla.filter(date__gte=lundi, date__lt=lundi + timedelta(weeks=1)))
             for sem, lundi in semaines
         ]"""
 
diff --git a/colloscope/templates/dashboard.html b/colloscope/templates/dashboard.html
index 8b6c39b..0a0a61b 100644
--- a/colloscope/templates/dashboard.html
+++ b/colloscope/templates/dashboard.html
@@ -1,5 +1,8 @@
 {% extends "base.html" %}
 
+{% load static %}
+{% load extras %}
+
 {% block title %}Tableau de bord{% endblock title %}
 
 {% block main %}
@@ -14,38 +17,38 @@ Bienvenue {{ student }}. Votre lycée est {{ term.cls.school.description }}, et
 
 <h2>Mes colles</h2>
     
-    <p><a href="{{ calendar_link }}">Exporter en .ics (ceci est un permalien public)</a></p>
+    <p><a href="{{ calendar_link }}"><i class="fa-regular fa-calendar"></i> Exporter en .ics (ceci est un permalien public)</a></p>
     
     <p><a href="{% url "colloscope.marketplace" %}">Accéder au marketplace</a></p>
-<ul>
+
+
 {% for n, lundi, colles in colles_per_sem %}
-    <li>Semaine {{n}} ({{lundi}})</li>
-    <ul>
-        {% if colles %}
-            {% for colle in colles %}
-                <li>{{ colle.slot.subject }} ({{ colle.slot.colleur }})</li>
-                <ul>
-                    <li>Le {{ colle.date }} à {{ colle.slot.time }}</li>
-                    <li>Groupes&nbsp;: {{ colle.groups.all | join:"+" }}</li>
-                    <li>Salle&nbsp;: {{ colle.slot.room }}</li>
-                    <li>Capacité : {{ colle.volume }} / {{ colle.slot.capacity }}</li>
-                    <li>Absent ?
-                        <form
-                                action="{% url "colloscope.withdraw" %}"
-                                method="POST"
-                                onsubmit="return confirm('Êtes-vous sûr de vouloir vous désinscrire de la colle {{ colle }} ');">
-                            {% csrf_token %}
-                            <input type="hidden" name="colle_id" value="{{ colle.id }}">
-                            <input type="submit" value="Rendre disponible">
-                        </form>
-                    </li>
-                </ul>
-            {% endfor %}
-        {% else %}
-            Pas de colles à venir cette semaine.
-        {% endif %}
-    </ul>
+
+{% if colles %}
+<h3 class="week">Semaine {{n}} ({{lundi}})</h3>
+    <div class="colle-wrapper">
+    {% for colle in colles %}
+        <div class="colle">
+        <span class="summary">{{ colle.slot.subject }} ({{ colle.slot.colleur }})</span>
+        <ul>
+            <li><i class="fa-solid fa-clock"></i> Le {{ colle.date }} à {{ colle.slot.time }}</li>
+            <li><i class="fa-solid fa-users"></i> {{ colle.groups.all | print_manager | safe }} ({{ colle.volume }} / {{ colle.slot.capacity }})</li>
+            <li><i class="fa-solid fa-earth-americas"></i> {{ colle.slot.room }}</li>
+            <li><i class="fa-solid fa-circle-exclamation"></i>
+                <form
+                        action="{% url "colloscope.withdraw" %}"
+                        method="POST"
+                        onsubmit="return confirm('Êtes-vous sûr de vouloir vous désinscrire de la colle {{ colle }} ');">
+                    {% csrf_token %}
+                    <input type="hidden" name="colle_id" value="{{ colle.id }}">
+                    <button type="submit">Rendre disponible</button>
+                </form>
+            </li>
+        </ul>
+        </div>
+    {% endfor %}
+    </div>
+{% endif %}
 {% endfor %}
-</ul>
 
 {% endblock main %}
diff --git a/colloscope/templates/marketplace.html b/colloscope/templates/marketplace.html
index e65e8e6..82446f9 100644
--- a/colloscope/templates/marketplace.html
+++ b/colloscope/templates/marketplace.html
@@ -1,5 +1,8 @@
 {% extends "base.html" %}
 
+{% load static %}
+{% load extras %}
+
 {% block title %}Marketplace{% endblock title %}
 
 {% block main %}
@@ -10,25 +13,28 @@
     Bienvenue sur le marketplace.
     
     {% if colles %}
-        <ul>
         Les colles libres sont&nbsp;:
+        <div class="colle-wrapper">
         {% for colle in colles %}
-            <li>Colle !</li>
-            <ul>
-                <li>{{ colle }}</li>
-                <li>Places occupées&nbsp;: {{ colle.volume }} / {{ colle.slot.capacity }}</li>
-                <li>
-                    <form action="{% url "colloscope.enroll" %}"
-                          method="POST"
-                          onsubmit="return confirm('Êtes-vous sûr de vouloir vous inscrire à la colle {{ colle }} ');">
-                        {% csrf_token %}
-                        <input type="hidden" name="colle_id" value="{{ colle.id }}">
-                        <input type="submit" value="Réserver">
-                    </form>
-                </li>
-            </ul>
+            <div class="colle">
+                <span class="summary">{{ colle.slot.subject }} ({{ colle.slot.colleur }})</span>
+                <ul>
+                    <li><i class="fa-solid fa-clock"></i> Le {{ colle.date }} à {{ colle.slot.time }}</li>
+                    <li><i class="fa-solid fa-users"></i> {{ colle.groups.all | print_manager | safe }} ({{ colle.volume }} / {{ colle.slot.capacity }})</li>
+                    <li><i class="fa-solid fa-earth-americas"></i> {{ colle.slot.room }}</li>
+                    <li><i class="fa-solid fa-circle-exclamation"></i>
+                        <form action="{% url "colloscope.enroll" %}"
+                              method="POST"
+                              onsubmit="return confirm('Êtes-vous sûr de vouloir vous inscrire à la colle {{ colle }} ');">
+                            {% csrf_token %}
+                            <input type="hidden" name="colle_id" value="{{ colle.id }}">
+                            <button type="submit">Réserver</button>
+                        </form>
+                    </li>
+                </ul>
+            </div>
         {% endfor %}
-        </ul>
+        </div>
     {% else %}
         Aucune colle n'est disponible
     {% endif %}
diff --git a/colloscope/templatetags/extras.py b/colloscope/templatetags/extras.py
index 6a32f20..de6ff3e 100644
--- a/colloscope/templatetags/extras.py
+++ b/colloscope/templatetags/extras.py
@@ -4,14 +4,25 @@ from colloscope.models import *
 
 register = template.Library()
 
+
 @register.filter(name="strftime")
 def strftime(value, arg):
     return value.strftime(arg)
 
+
 @register.filter(name="getitem")
 def getitem(indexable, i):
     return indexable[i]
 
+
+@register.filter(name="print_manager")
+def print_manager(value):
+    if value.exists():
+        return "+".join(str(v) for v in value)
+    else:
+        return "&empty;"
+
+
 """
 @register.filter(name="exists")
 def exists(queryset):
diff --git a/static/main.css b/static/main.css
index dba5bf7..e0a11d4 100644
--- a/static/main.css
+++ b/static/main.css
@@ -75,3 +75,63 @@ p.programme {
 footer {
     text-align: center;
 }
+
+
+.week {
+    background-color: dodgerblue;
+    color: white;
+    padding: 5px;
+}
+
+.week.empty {
+    background-color: gray;
+}
+
+.colle-wrapper {
+    display: grid;
+    gap: 10px;
+}
+
+@media screen and (min-width: 400px)
+{
+    .colle-wrapper {
+        grid-template-columns: repeat(3, minmax(100px, 1fr));
+    }
+}
+
+.colle {
+    border: 1px solid black;
+    padding: 10px;
+}
+
+.colle span {
+    text-align: center;
+}
+
+.colle ul {
+    padding: 0;
+}
+
+.colle li {
+    list-style-type: none;
+}
+
+.colle form {
+    display: inline;
+}
+
+.colle button {
+    padding: 5px;
+    border: none;
+    background-color: #c0392b;
+    color: white;
+    border-radius: 5px;
+}
+
+.colle button:hover {
+    background-color: #a93226;
+}
+
+.colle button:active {
+    background-color: #922b21;
+}
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index cb737e2..7a5df84 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -6,6 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>{% block title %}{% endblock title %}</title>
         <link href="{% static 'main.css' %}" rel="stylesheet" type="text/css">
+        <script src="https://kit.fontawesome.com/0fd87250ec.js" crossorigin="anonymous"></script>
         {% block head %}{% endblock head %}
     </head>
     <body>