diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonInformation.vue b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonInformation.vue
index aae88b5ddc5a765f08c04e1a0685b7e32361ff81..7f2d5c36ab3e7ac95ee7c4003e9fe586bc66eb90 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonInformation.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonInformation.vue
@@ -1,7 +1,14 @@
 <template>
-  <v-card-text class="d-flex align-center flex-wrap">
-    {{ $d(toDateTime(documentation.datetimeStart), "shortTime") }} –
-    {{ $d(toDateTime(documentation.datetimeEnd), "shortTime") }}
+  <v-card-text class="d-flex align-center flex-wrap gap">
+    <div>
+      <time :datetime="documentation.datetimeStart" :class="{ 'd-block': compact }">
+        {{ $d(toDateTime(documentation.datetimeStart), "shortTime") }}
+      </time>
+      <span v-if="!compact">–</span>
+      <time :datetime="documentation.datetimeEnd" :class="{ 'd-block': compact }">
+        {{ $d(toDateTime(documentation.datetimeEnd), "shortTime") }}
+      </time>
+    </div>
     {{ documentation.course?.name }}
     <subject-chip
       v-if="documentation.subject"
@@ -30,3 +37,9 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.gap {
+  gap: 1em;
+}
+</style>