diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/Documentation.vue b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/Documentation.vue
index 93ebd0a024facdace0665c6636945a9875a613e2..382f10e5d987e7c4ed30f1c56a093cfc10641469 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/Documentation.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/Documentation.vue
@@ -1,19 +1,16 @@
 <template>
-  <v-card class="my-1 full-width">
+  <v-card :class="{'my-1 full-width': true, 'd-flex flex-column': !compact }">
     <v-card-title v-if="!compact">
       <lesson-information v-bind="documentationPartProps" />
     </v-card-title>
 
-    <!-- flex-md-row zeile ab medium -->
-    <!-- align-stretch - stretch full-width -->
     <v-card-text
-      class="full-width d-flex flex-column align-stretch pa-2"
-      :class="{ 'flex-md-row': compact }"
+      class="full-width main-body"
+      :class="{ 'vertical': !compact || $vuetify.breakpoint.mobile, 'pa-2': compact }"
     >
       <documentation-status v-if="compact" v-bind="documentationPartProps" />
-      <lesson-information v-if="compact" :class="{ 'flex-110': !$vuetify.breakpoint.mobile }" v-bind="documentationPartProps" />
+      <lesson-information v-if="compact" v-bind="documentationPartProps" />
       <lesson-summary
-        :class="{ 'flex-110': compact && !$vuetify.breakpoint.mobile }"
         ref="summary"
         v-bind="{ ...$attrs, ...documentationPartProps }"
         :is-create="false"
@@ -22,8 +19,9 @@
         @loading="loading = $event"
         @save="$emit('close')"
       />
-      <lesson-notes :class="{ 'flex-110': compact && !$vuetify.breakpoint.mobile }" v-bind="documentationPartProps" />
+      <lesson-notes v-bind="documentationPartProps" />
     </v-card-text>
+    <v-spacer />
     <v-divider />
     <v-card-actions v-if="!compact">
       <v-spacer />
@@ -75,8 +73,12 @@ export default {
 </script>
 
 <style scoped>
-.flex-110 {
-  flex: 1 1 0;
-  width: 0;
+.main-body {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1em;
+}
+.vertical {
+  grid-template-columns: 1fr;
 }
 </style>
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonInformation.vue b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonInformation.vue
index 172ab1549d37838e8831761029cc859a1d12c5c0..80804cf81d2668876a49e9def27796e1eb5b9271 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonInformation.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonInformation.vue
@@ -3,7 +3,7 @@ import PersonChip from "aleksis.core/components/person/PersonChip.vue";
 </script>
 
 <template>
-  <div :class="{ 'full-width grid mr-0 mb-2': true, 'mr-md-4 mb-0': compact, 'large-grid': largeGrid }">
+  <div :class="{ 'full-width grid': true, 'large-grid': largeGrid }">
     <div>
       <div :class="{ 'text-right d-flex flex-column fit-content': largeGrid }">
         <time :datetime="documentation.datetimeStart" class="text-no-wrap">
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonSummary.vue b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonSummary.vue
index 6c6ed32cbe8328e266512086d578912a0acbb75a..ad9a626490f3c6fe8dc39342f21222dee70cc9ab 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonSummary.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonSummary.vue
@@ -2,14 +2,13 @@
   <div>
     <!-- compact -->
     <div
-      class="d-flex flex-column flex-md-row align-stretch align-md-center gap justify-start"
+      class="d-flex flex-column flex-md-row align-stretch align-md-center gap justify-start fill-height"
       v-if="compact"
     >
       <v-text-field
-        class="flex-grow-1 min-width"
-        dense
+        :class="{ 'flex-grow-1 min-width': true, 'full-width': $vuetify.breakpoint.mobile }"
         hide-details
-        filled
+        outlined
         :label="$t('alsijil.coursebook.summary.topic')"
         :value="documentation.topic"
         @input="topic = $event"
@@ -18,37 +17,29 @@
         :loading="loading"
         :readonly="!documentation.canEdit"
       />
-      <div class="d-flex flex-column align-start flex-grow-1">
-        <v-chip
+      <div :class="{ 'flex-grow-1 max-width': true, 'full-width': $vuetify.breakpoint.mobile }">
+        <v-card
           v-bind="dialogActivator.attrs"
           v-on="dialogActivator.on"
-          :outlined="!documentation.homework"
+          outlined
           @click="$emit('open')"
-          class="mb-2 max-width"
+          class="max-width grid-layout pa-1"
           dense
+          rounded="lg"
         >
           <span class="max-width text-truncate">{{
             documentation.homework
               ? $t("alsijil.coursebook.summary.homework.value", documentation)
               : $t("alsijil.coursebook.summary.homework.empty")
           }}</span>
-          <v-icon right>{{ homeworkIcon }}</v-icon>
-        </v-chip>
-        <v-chip
-          v-bind="dialogActivator.attrs"
-          v-on="dialogActivator.on"
-          :outlined="!documentation.groupNote"
-          @click="$emit('open')"
-          class="max-width"
-          dense
-        >
+          <v-icon right class="float-right">{{ homeworkIcon }}</v-icon>
           <span class="max-width text-truncate">{{
             documentation.groupNote
               ? $t("alsijil.coursebook.summary.group_note.value", documentation)
               : $t("alsijil.coursebook.summary.group_note.empty")
           }}</span>
-          <v-icon right>{{ groupNoteIcon }}</v-icon>
-        </v-chip>
+          <v-icon right class="float-right">{{ groupNoteIcon }}</v-icon>
+        </v-card>
       </div>
     </div>
     <!-- not compact -->
@@ -184,4 +175,9 @@ export default {
 .gap {
   gap: 1em;
 }
+
+.grid-layout {
+  display: grid;
+  grid-template-columns: auto min-content;
+}
 </style>
diff --git a/aleksis/apps/alsijil/schema/documentation.py b/aleksis/apps/alsijil/schema/documentation.py
index 9389755f923f43dac882498e6f1ec72ad98a9039..43e958e910194be5a5b9adff9727c933093591b1 100644
--- a/aleksis/apps/alsijil/schema/documentation.py
+++ b/aleksis/apps/alsijil/schema/documentation.py
@@ -182,7 +182,7 @@ class DocumentationBatchCreateOrUpdateMutation(graphene.Mutation):
             if doc.teachers is not None:
                 obj.teachers.add(*doc.teachers)
             else:
-                obj.teachers.set(lesson_event.teachers)
+                obj.teachers.set(lesson_event.teachers.all())
             obj.save()
             return obj
         else: