diff --git a/aleksis/apps/chronos/templates/chronos/partials/lesson.html b/aleksis/apps/chronos/templates/chronos/partials/lesson.html
index 66da0b6295322292e5c491f13e54dc7c2c28a8f9..bc3e8a984220605b7a6acfffe54ec6a713421d34 100644
--- a/aleksis/apps/chronos/templates/chronos/partials/lesson.html
+++ b/aleksis/apps/chronos/templates/chronos/partials/lesson.html
@@ -45,14 +45,14 @@
           {% endif %}
 
           {# Display teacher with tooltip #}
-          {% include "chronos/partials/subs/teachers.html" %}
+          {% include "chronos/partials/subs/teachers.html" with type="substitution" el=sub %}
 
           {# Display subject #}
-          {% include "chronos/partials/subs/subject.html" %}
+          {% include "chronos/partials/subs/subject.html" with type="substitution" el=sub %}
 
           {# Teacher or class > display room #}
           {% if type == "teacher" or type == "group" %}
-            {% include "chronos/partials/subs/room.html" %}
+            {% include "chronos/partials/subs/room.html" with type="substitution" el=sub %}
           {% endif %}
         {% endif %}
 
diff --git a/aleksis/apps/chronos/templates/chronos/partials/subs/colour.html b/aleksis/apps/chronos/templates/chronos/partials/subs/colour.html
new file mode 100644
index 0000000000000000000000000000000000000000..61979467194ad62262a9c639d414db0dadefe260
--- /dev/null
+++ b/aleksis/apps/chronos/templates/chronos/partials/subs/colour.html
@@ -0,0 +1,9 @@
+{% if item.type == "substitution" %}
+  {% if item.el.cancelled or item.el.cancelled_for_teachers %}
+    green-text
+  {% else %}
+    black-text
+  {% endif %}
+{% elif item.type == "supervision_substitution" %}
+  blue-text
+{% endif %}
diff --git a/aleksis/apps/chronos/templates/chronos/partials/subs/period.html b/aleksis/apps/chronos/templates/chronos/partials/subs/period.html
new file mode 100644
index 0000000000000000000000000000000000000000..8e8d31bd2c48e14cc28330cc948e3d43882d6f2f
--- /dev/null
+++ b/aleksis/apps/chronos/templates/chronos/partials/subs/period.html
@@ -0,0 +1,9 @@
+<strong>
+  {% if type == "substitution" %}
+    {{ el.lesson_period.period.period }}.
+  {% elif type == "supervision_substitution" %}
+    {% with break=el.supervision.break_item %}
+      {{ break.after_period_number }}./{{ break.before_period_number }}.
+    {% endwith %}
+  {% endif %}
+</strong>
diff --git a/aleksis/apps/chronos/templates/chronos/partials/subs/room.html b/aleksis/apps/chronos/templates/chronos/partials/subs/room.html
index e7535af9d0a5e98e566c1e463ad924150b4dc278..49010706ce2a67d2ca37e3e0752261398090525d 100644
--- a/aleksis/apps/chronos/templates/chronos/partials/subs/room.html
+++ b/aleksis/apps/chronos/templates/chronos/partials/subs/room.html
@@ -1,36 +1,45 @@
-{% if sub.cancelled or sub.cancelled_for_teachers %}
-  {# Canceled lesson: no room #}
-{% elif sub.room and sub.lesson_period.room %}
-  {# New and old room available #}
-  <span class="tooltipped" data-position="bottom"
-        data-tooltip="{{ sub.lesson_period.room.name }} → {{ sub.lesson_period.room.name }}"
-        title="{{ sub.lesson_period.room.name }} → {{ sub.lesson_period.room.name }}">
-    <a href="{% url "timetable" "room" sub.lesson_period.room.pk %}">
-        <s>{{ sub.lesson_period.room.short_name }}</s>
-    </a>
-    →
-    <a href="{% url "timetable" "room" sub.room.pk %}">
-        <strong>{{ sub.room.short_name }}</strong>
-    </a>
-  </span>
-{% elif sub.room and not sub.lesson_period.room %}
-  {# Only new room available #}
-  <span class="tooltipped" data-position="bottom"
-        data-tooltip="{{ sub.room.name }}"
-        title="{{ sub.room.name }}">
-    <a href="{% url "timetable" "room" sub.room.pk %}">
-        {{ sub.room.short_name }}
-    </a>
-  </span>
-{% elif not sub.room and not sub.lesson_period.room %}
-  {# Nothing to view #}
-{% else %}
-  {# Only old room available #}
-  <span class="tooltipped" data-position="bottom"
-        data-tooltip="{{ sub.lesson_period.room.name }}"
-        title="{{ sub.lesson_period.room.name }}">
-    <a href="{% url "timetable" "room" sub.lesson_period.room.pk %}">
-        {{ sub.lesson_period.room.short_name }}
-    </a>
-  </span>
+{% if type == "substitution" %}
+  {% if el.cancelled or el.cancelled_for_teachers %}
+    {# Canceled lesson: no room #}
+  {% elif el.room and el.lesson_period.room %}
+    {# New and old room available #}
+    <span class="tooltipped" data-position="bottom"
+          data-tooltip="{{ el.lesson_period.room.name }} → {{ el.lesson_period.room.name }}"
+          title="{{ el.lesson_period.room.name }} → {{ el.lesson_period.room.name }}">
+      <a href="{% url "timetable" "room" el.lesson_period.room.pk %}">
+          <s>{{ el.lesson_period.room.short_name }}</s>
+      </a>
+      →
+      <a href="{% url "timetable" "room" el.room.pk %}">
+          <strong>{{ el.room.short_name }}</strong>
+      </a>
+    </span>
+  {% elif el.room and not el.lesson_period.room %}
+    {# Only new room available #}
+    <span class="tooltipped" data-position="bottom"
+          data-tooltip="{{ el.room.name }}"
+          title="{{ el.room.name }}">
+      <a href="{% url "timetable" "room" el.room.pk %}">
+          {{ el.room.short_name }}
+      </a>
+    </span>
+  {% elif not el.room and not el.lesson_period.room %}
+    {# Nothing to view #}
+  {% else %}
+    {# Only old room available #}
+    <span class="tooltipped" data-position="bottom"
+          data-tooltip="{{ el.lesson_period.room.name }}"
+          title="{{ el.lesson_period.room.name }}">
+      <a href="{% url "timetable" "room" el.lesson_period.room.pk %}">
+          {{ el.lesson_period.room.short_name }}
+      </a>
+    </span>
+  {% endif %}
+{% elif type == "supervision_substitution" %}
+  {% with supervision=el.supervision %}
+    <span data-position="bottom" class="tooltipped"
+          data-tooltip="{{ supervision.area.name }}" title="{{ supervision.area.name }}">
+      {{ supervision.area.short_name }}
+    </span>
+  {% endwith %}
 {% endif %}
diff --git a/aleksis/apps/chronos/templates/chronos/partials/subs/subject.html b/aleksis/apps/chronos/templates/chronos/partials/subs/subject.html
index 2e61d4158cbd22fbeba05a1416defa6c8e7c047e..e6c9e86d016237276a2d5c894addba10c8a5942f 100644
--- a/aleksis/apps/chronos/templates/chronos/partials/subs/subject.html
+++ b/aleksis/apps/chronos/templates/chronos/partials/subs/subject.html
@@ -1,24 +1,28 @@
 {% load i18n %}
 
-{% if not sub.lesson_period.lesson.subject and not sub.subject %}
-{% elif sub.cancelled or sub.cancelled_for_teachers %}
-  <span data-position="bottom" class="tooltipped" data-tooltip="{{ sub.lesson_period.lesson.subject.name }}">
-    <s>{{ sub.lesson_period.lesson.subject.abbrev }}</s>
+{% if type == "substitution" %}
+  {% if not el.lesson_period.lesson.subject and not el.subject %}
+  {% elif el.cancelled or el.cancelled_for_teachers %}
+    <span data-position="bottom" class="tooltipped" data-tooltip="{{ el.lesson_period.lesson.subject.name }}">
+    <s>{{ el.lesson_period.lesson.subject.abbrev }}</s>
   </span>
-{% elif sub.subject and sub.lesson_period.lesson.subject %}
-  <span data-position="bottom" class="tooltipped" data-tooltip="{{ sub.lesson_period.lesson.subject.name }}">
-    <s>{{ sub.lesson_period.lesson.subject.abbrev }}</s>
+  {% elif el.subject and el.lesson_period.lesson.subject %}
+    <span data-position="bottom" class="tooltipped" data-tooltip="{{ el.lesson_period.lesson.subject.name }}">
+    <s>{{ el.lesson_period.lesson.subject.abbrev }}</s>
   </span>
-  →
-  <span data-position="bottom" class="tooltipped" data-tooltip="{{ sub.subject.name }}">
-    <strong>{{ sub.subject.abbrev }}</strong>
+    →
+    <span data-position="bottom" class="tooltipped" data-tooltip="{{ el.subject.name }}">
+    <strong>{{ el.subject.abbrev }}</strong>
   </span>
-{% elif sub.subject and not sub.lesson_period.lesson.subject %}
-  <span data-position="bottom" class="tooltipped" data-tooltip="{{ sub.subject.name }}">
-    <strong>{{ sub.subject.abbrev }}</strong>
+  {% elif el.subject and not el.lesson_period.lesson.subject %}
+    <span data-position="bottom" class="tooltipped" data-tooltip="{{ el.subject.name }}">
+    <strong>{{ el.subject.abbrev }}</strong>
   </span>
-{% else %}
-  <span data-position="bottom" class="tooltipped" data-tooltip="{{ sub.lesson_period.lesson.subject.name }}">
-    <strong>{{ sub.lesson_period.lesson.subject.abbrev }}</strong>
+  {% else %}
+    <span data-position="bottom" class="tooltipped" data-tooltip="{{ el.lesson_period.lesson.subject.name }}">
+    <strong>{{ el.lesson_period.lesson.subject.abbrev }}</strong>
   </span>
+  {% endif %}
+{% elif type == "supervision_substitution" %}
+  {% trans "Supervision" %}
 {% endif %}
diff --git a/aleksis/apps/chronos/templates/chronos/partials/subs/teachers.html b/aleksis/apps/chronos/templates/chronos/partials/subs/teachers.html
index 69002c5dcc9720d179fa89ec6099eb1268704439..4fbd63fea66282e17f77870ea3d16ec47fb31da4 100644
--- a/aleksis/apps/chronos/templates/chronos/partials/subs/teachers.html
+++ b/aleksis/apps/chronos/templates/chronos/partials/subs/teachers.html
@@ -1,16 +1,25 @@
-{% if sub.cancelled and sub.lesson_period.lesson.teachers.all %}
-  {% include "chronos/partials/teachers.html" with teachers=sub.lesson_period.lesson.teachers.all %}
-{% elif sub.teachers.all and sub.lesson_period.lesson.teachers.all %}
+{% if type == "substitution" %}
+  {% if el.cancelled and el.lesson_period.lesson.teachers.all %}
+    {% include "chronos/partials/teachers.html" with teachers=el.lesson_period.lesson.teachers.all %}
+  {% elif el.teachers.all and el.lesson_period.lesson.teachers.all %}
+    <s>
+      {% include "chronos/partials/teachers.html" with teachers=el.lesson_period.lesson.teachers.all %}
+    </s>
+    →
+    <strong>
+      {% include "chronos/partials/teachers.html" with teachers=el.teachers.all %}
+    </strong>
+  {% elif el.teachers.all and not el.lesson_period.lesson.teachers.all %}
+    {% include "chronos/partials/teachers.html" with teachers=el.teachers.all %}
+  {% elif el.lesson_period.lesson.teachers.all %}
+    {% include "chronos/partials/teachers.html" with teachers=el.lesson_period.lesson.teachers.all %}
+  {% endif %}
+{% elif type == "supervision_substitution" %}
   <s>
-    {% include "chronos/partials/teachers.html" with teachers=sub.lesson_period.lesson.teachers.all %}
+    {% include "chronos/partials/teachers.html" with teachers=el.supervision.teachers %}
   </s>
   →
   <strong>
-    {% include "chronos/partials/teachers.html" with teachers=sub.teachers.all %}
+    {% include "chronos/partials/teachers.html" with teachers=el.teachers %}
   </strong>
-{% elif sub.teachers.all and not sub.lesson_period.lesson.teachers.all %}
-  {% include "chronos/partials/teachers.html" with teachers=sub.teachers.all %}
-{% elif sub.lesson_period.lesson.teachers.all %}
-  {% include "chronos/partials/teachers.html" with teachers=sub.lesson_period.lesson.teachers.all %}
 {% endif %}
-
diff --git a/aleksis/apps/chronos/templates/chronos/partials/supervision.html b/aleksis/apps/chronos/templates/chronos/partials/supervision.html
index 46a3823d9098f48c411d1ff67bbd6a6b1a573841..10ff51888939929b2bb3183c254b5a7838b91a12 100644
--- a/aleksis/apps/chronos/templates/chronos/partials/supervision.html
+++ b/aleksis/apps/chronos/templates/chronos/partials/supervision.html
@@ -18,13 +18,7 @@
             {{ supervision.area.short_name }}
           </span>
           {% if supervision.get_substitution and smart %}
-            <s>
-              {% include "chronos/partials/teachers.html" with teachers=supervision.teachers %}
-            </s>
-            →
-            <strong>
-              {% include "chronos/partials/teachers.html" with teachers=supervision.get_substitution.teachers %}
-            </strong>
+            {% include "chronos/partials/subs/teachers.html" with type="supervision_substitution" el=supervision.get_substitution %}
           {% elif type == "supervision_area" %}
             {% include "chronos/partials/teachers.html" with teachers=supervision.teachers %}
           {% endif %}
diff --git a/aleksis/apps/chronos/templates/chronos/substitutions.html b/aleksis/apps/chronos/templates/chronos/substitutions.html
index 931eac1d72367f2bbd1cd7471ff63d9c5ca2fe01..eff5da58288939ad8906126ae80666b903f75074 100644
--- a/aleksis/apps/chronos/templates/chronos/substitutions.html
+++ b/aleksis/apps/chronos/templates/chronos/substitutions.html
@@ -58,28 +58,24 @@
       </td>
     {% endif %}
     {% for item in substitutions %}
-      <tr class="
-      {% if item.type == "substitution" %}
-        {% if item.el.cancelled or item.el.cancelled_for_teachers %}green-text{% else %}black-text{% endif %}
-      {% endif %}
-      ">
-        {# TODO: Extend support for blue and purple (supervisions and events) #}
+      <tr class="{% include "chronos/partials/subs/colour.html" with item=item %}">
+        {# TODO: Extend support for purple (events) #}
         <td>
-          {% include "chronos/partials/groups.html" with groups=item.el.lesson_period.lesson.groups.all %}
+          {% if item.type == "substitution" %}
+            {% include "chronos/partials/groups.html" with groups=item.el.lesson_period.lesson.groups.all %}
+          {% endif %}
         </td>
         <td>
-          <strong>
-            {{ item.el.lesson_period.period.period }}.
-          </strong>
+         {% include "chronos/partials/subs/period.html" with type=item.type el=item.el %}
         </td>
         <td>
-          {% include "chronos/partials/subs/teachers.html" with sub=item.el %}
+          {% include "chronos/partials/subs/teachers.html" with type=item.type el=item.el %}
         </td>
         <td>
-          {% include "chronos/partials/subs/subject.html" with sub=item.el %}
+          {% include "chronos/partials/subs/subject.html" with type=item.type el=item.el %}
         </td>
         <td>
-          {% include "chronos/partials/subs/room.html" with sub=item.el %}
+          {% include "chronos/partials/subs/room.html" with type=item.type el=item.el %}
         </td>
         <td>
           <span class="hide-on-med-and-up">
diff --git a/aleksis/apps/chronos/templates/chronos/substitutions_print.html b/aleksis/apps/chronos/templates/chronos/substitutions_print.html
index 1692efe75166c0dc2e6ec5e63f9171f480cea93f..14ecd637f2ba24a2916921ab955e2942b366780b 100644
--- a/aleksis/apps/chronos/templates/chronos/substitutions_print.html
+++ b/aleksis/apps/chronos/templates/chronos/substitutions_print.html
@@ -52,27 +52,23 @@
           <tbody class="{% cycle "striped" "not-striped" %}">
         {% endifchanged %}
 
-        <tr class="
-        {% if item.type == "substitution" %}
-          {% if item.el.cancelled or item.el.cancelled_for_teachers %}green-text{% else %}black-text{% endif %}
-        {% endif %}
-        ">
+        <tr class="{% include "chronos/partials/subs/colour.html" with item=item %}">
           <td>
-            {% include "chronos/partials/groups.html" with groups=item.el.lesson_period.lesson.groups.all %}
+            {% if item.type == "substitution" %}
+              {% include "chronos/partials/groups.html" with groups=item.el.lesson_period.lesson.groups.all %}
+            {% endif %}
           </td>
           <td>
-            <strong>
-              {{ item.el.lesson_period.period.period }}.
-            </strong>
+            {% include "chronos/partials/subs/period.html" with type=item.type el=item.el %}
           </td>
           <td>
-            {% include "chronos/partials/subs/teachers.html" with sub=item.el %}
+            {% include "chronos/partials/subs/teachers.html" with type=item.type el=item.el %}
           </td>
           <td>
-            {% include "chronos/partials/subs/subject.html" with sub=item.el %}
+            {% include "chronos/partials/subs/subject.html" with type=item.type el=item.el %}
           </td>
           <td>
-            {% include "chronos/partials/subs/room.html" with sub=item.el %}
+            {% include "chronos/partials/subs/room.html" with type=item.type el=item.el %}
           </td>
           <td>
             {% include "chronos/partials/subs/badge.html" with sub=item.el %}
diff --git a/aleksis/apps/chronos/util/build.py b/aleksis/apps/chronos/util/build.py
index 57cd470767d6e685952d7f5bed3061a6cdaf65c5..5e9f7cefdd04cbfe31fff69786d639afaddaf0d1 100644
--- a/aleksis/apps/chronos/util/build.py
+++ b/aleksis/apps/chronos/util/build.py
@@ -12,6 +12,7 @@ TimePeriod = apps.get_model("chronos", "TimePeriod")
 Break = apps.get_model("chronos", "Break")
 Supervision = apps.get_model("chronos", "Supervision")
 LessonSubstitution = apps.get_model("chronos", "LessonSubstitution")
+SupervisionSubstitution = apps.get_model("chronos", "SupervisionSubstitution")
 
 
 def build_timetable(
@@ -180,4 +181,22 @@ def build_substitutions_list(wanted_day: date) -> List[dict]:
 
         rows.append(row)
 
+    # Get supervision substitutions
+    super_subs = SupervisionSubstitution.objects.filter(date=wanted_day)
+
+    for super_sub in super_subs:
+        row = {
+            "type": "supervision_substitution",
+            "sort_a": "Z.{}".format(super_sub.teacher),
+            "sort_b": "{}".format(super_sub.supervision.break_item.after_period_number),
+            "el": super_sub
+        }
+        rows.append(row)
+
+    # Sort all items
+    def sorter(row: dict):
+        return row["sort_a"] + row["sort_b"]
+
+    rows.sort(key=sorter)
+
     return rows