diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonSummary.vue b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonSummary.vue
index 6c6ed32cbe8328e266512086d578912a0acbb75a..ae068774ca59b27f532eb3382e070791997387b1 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonSummary.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonSummary.vue
@@ -18,37 +18,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 -->