diff --git a/aleksis/apps/alsijil/frontend/components/documentation/LessonNotes.vue b/aleksis/apps/alsijil/frontend/components/documentation/LessonNotes.vue
index c6defd7ec92d1f6faaa4f616eef7b9d7d504eec7..a9bada95050916847473f8d411299dc61efd11c8 100644
--- a/aleksis/apps/alsijil/frontend/components/documentation/LessonNotes.vue
+++ b/aleksis/apps/alsijil/frontend/components/documentation/LessonNotes.vue
@@ -1,5 +1,22 @@
 <template>
-  <v-card-text>{{ documentation.id }}</v-card-text>
+  <v-card-text class="d-flex align-center justify-space-between justify-md-end flex-wrap gap">
+    <v-chip dense color="success">
+      <v-chip small dense class="mr-2" color="green darken-3 white--text">26</v-chip>
+      von 30 anwesend
+    </v-chip>
+    <v-chip dense color="warning">
+      <v-chip small dense class="mr-2" color="orange darken-3 white--text">3</v-chip>
+      entschuldigt
+    </v-chip>
+    <v-chip dense color="error">
+      <v-chip small dense class="mr-2" color="red darken-3 white--text">1</v-chip>
+      unentschuldigt
+    </v-chip>
+    <v-chip dense color="grey lighten-1">
+      <v-chip small dense class="mr-2" color="grey darken-1 white--text">4</v-chip>
+      Hausaufgaben vergessen
+    </v-chip>
+  </v-card-text>
 </template>
 
 <script>
@@ -13,3 +30,9 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.gap {
+  gap: 0.25em
+}
+</style>