diff --git a/aleksis/apps/alsijil/frontend/components/Coursebook.vue b/aleksis/apps/alsijil/frontend/components/Coursebook.vue
index 5337b90dea41b1fdb710c0c011b6a9ab09a5190c..3ca0512bfaeb982c7bf248cd648260ce8846627f 100644
--- a/aleksis/apps/alsijil/frontend/components/Coursebook.vue
+++ b/aleksis/apps/alsijil/frontend/components/Coursebook.vue
@@ -18,8 +18,9 @@
               <!-- I know slice copies the array. But show me something better. -->
               <v-list-item v-for="doc in day.slice(1)">
                 <v-card class="my-2">
-                  <!-- Insert subcomponents here. -->
-                  <v-card-text>{{ doc.id }}</v-card-text>
+                  <documentation
+                    :documentation="doc"
+                  />
                 </v-card>
               </v-list-item>
             </v-list>
@@ -32,6 +33,7 @@
 
 <script>
 import CRUDIterator from "aleksis.core/components/generic/CRUDIterator.vue";
+import Documentation from "./documentation/Documentation.vue";
 import gqlDocumentationsForCoursebook from "./coursebook.graphql";
 import { DateTime } from "luxon";
 
@@ -39,6 +41,7 @@ export default {
   name: "Coursebook",
   components: {
     CRUDIterator,
+    Documentation,
   },
   props: {
     // Either as props OR route params
diff --git a/aleksis/apps/alsijil/frontend/components/documentation/Documentation.vue b/aleksis/apps/alsijil/frontend/components/documentation/Documentation.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ea6a840db2b787feff471029d8e2cc59f3d0b008
--- /dev/null
+++ b/aleksis/apps/alsijil/frontend/components/documentation/Documentation.vue
@@ -0,0 +1,24 @@
+<template>
+ <v-card-text>{{ documentation.id }}</v-card-text>
+</template>
+
+<script>
+import LessonInformation from "./documentation/LessonInformation.vue";
+import LessonSummary from "./documentation/LessonSummary.vue";
+import LessonNotes from "./documentation/LessonNotes.vue";
+
+export default {
+  name: "Documentation",
+  components: {
+    LessonInformation,
+    LessonSummary,
+    LessonNotes,
+  },
+  props: {
+    documentation: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
diff --git a/aleksis/apps/alsijil/frontend/components/documentation/LessonInformation.vue b/aleksis/apps/alsijil/frontend/components/documentation/LessonInformation.vue
new file mode 100644
index 0000000000000000000000000000000000000000..641e9ed34a2ab9c97dbae6bf3a6dd416e1a96748
--- /dev/null
+++ b/aleksis/apps/alsijil/frontend/components/documentation/LessonInformation.vue
@@ -0,0 +1,15 @@
+<template>
+  <v-card-text>{{ documentation.id }}</v-card-text>
+</template>
+
+<script>
+export default {
+  name: "LessonInformation",
+  props: {
+    documentation: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
diff --git a/aleksis/apps/alsijil/frontend/components/documentation/LessonNotes.vue b/aleksis/apps/alsijil/frontend/components/documentation/LessonNotes.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c6defd7ec92d1f6faaa4f616eef7b9d7d504eec7
--- /dev/null
+++ b/aleksis/apps/alsijil/frontend/components/documentation/LessonNotes.vue
@@ -0,0 +1,15 @@
+<template>
+  <v-card-text>{{ documentation.id }}</v-card-text>
+</template>
+
+<script>
+export default {
+  name: "LessonNotes",
+  props: {
+    documentation: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
diff --git a/aleksis/apps/alsijil/frontend/components/documentation/LessonSummary.vue b/aleksis/apps/alsijil/frontend/components/documentation/LessonSummary.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1e08666ea29588c2fc6e2749def8aab4e9ffeab4
--- /dev/null
+++ b/aleksis/apps/alsijil/frontend/components/documentation/LessonSummary.vue
@@ -0,0 +1,15 @@
+<template>
+  <v-card-text>{{ documentation.id }}</v-card-text>
+</template>
+
+<script>
+export default {
+  name: "LessonSummary",
+  props: {
+    documentation: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>