diff --git a/aleksis/apps/alsijil/frontend/components/coursebook.graphql b/aleksis/apps/alsijil/frontend/components/coursebook.graphql
index 025019ebeacdb8b094ce5cc5a38816b2e79abefc..a53fca9acaff6e451d335eb71f944878ba112431 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook.graphql
+++ b/aleksis/apps/alsijil/frontend/components/coursebook.graphql
@@ -21,6 +21,8 @@ query gqlDocumentationsForCoursebook(
       id
       name
       shortName
+      colourFg
+      colourBg
     }
     topic
     homework
diff --git a/aleksis/apps/alsijil/frontend/components/documentation/LessonInformation.vue b/aleksis/apps/alsijil/frontend/components/documentation/LessonInformation.vue
index 641e9ed34a2ab9c97dbae6bf3a6dd416e1a96748..1c5be2c0113b4922870c3d0960a1269c5aa74bad 100644
--- a/aleksis/apps/alsijil/frontend/components/documentation/LessonInformation.vue
+++ b/aleksis/apps/alsijil/frontend/components/documentation/LessonInformation.vue
@@ -1,10 +1,19 @@
 <template>
-  <v-card-text>{{ documentation.id }}</v-card-text>
+  <v-card-text>
+    {{ $d(documentation.dateTimeStart, "shortTime") }} –
+    {{ $d(documentation.dateTimeEnd, "shortTime") }}
+    <subject-chip :subject="documentation.subject" />
+  </v-card-text>
 </template>
 
 <script>
+import SubjectChip from "aleksis.apps.cursus/components/SubjectChip.vue";
+
 export default {
   name: "LessonInformation",
+  components: {
+    SubjectChip,
+  },
   props: {
     documentation: {
       type: Object,