diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsAbsencesCard.vue b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsAbsencesCard.vue
index 1874929f2069823033725c9b85cb5c8842cad0cf..780a3b7325f43f04517231e28cd92eec836a05e4 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsAbsencesCard.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsAbsencesCard.vue
@@ -1,10 +1,12 @@
 <template>
   <v-card>
-    <absence-reason-chip
-      v-for="absenceReason in absenceReasons"
-      :absenceReason="absenceReason.absenceReason"
-      :count="absenceReason.count"
-    />
+    <v-card-text class="d-flex flex-column" style="gap: .5em">
+      <absence-reason-chip
+        v-for="absenceReason in absenceReasons"
+        :absenceReason="absenceReason.absenceReason"
+        :count="absenceReason.count"
+      />
+    </v-card-text>
   </v-card>
 </template>
 
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsExtraMarksCard.vue b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsExtraMarksCard.vue
index b9182bf84afa141005442352f7af33748bbafead..dba9b73e26ccb95547421a13ae4e29dab37b08c4 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsExtraMarksCard.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsExtraMarksCard.vue
@@ -1,14 +1,16 @@
 <template>
   <v-card>
-    <counter-chip
-      v-for="extraMark in extraMarks"
-      :value="extraMark.extraMark.id"
-      :color="extraMark.extraMark.colourBg"
-      :text-color="extraMark.extraMark.colourFg"
-      :count="extraMark.count"
-    >
-      {{ extraMark.extraMark.name }}
-    </counter-chip>
+    <v-card-text class="d-flex flex-column" style="gap: .5em">
+      <counter-chip
+        v-for="extraMark in extraMarks"
+        :value="extraMark.extraMark.id"
+        :color="extraMark.extraMark.colourBg"
+        :text-color="extraMark.extraMark.colourFg"
+        :count="extraMark.count"
+      >
+        {{ extraMark.extraMark.name }}
+      </counter-chip>
+    </v-card-text>
   </v-card>
 </template>
 
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue
index b34401b9e9827929b1945bed3f03a84672e18cc8..7450f2bd3887762bc4494f3dbe047ff8b6ac1b41 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue
@@ -17,29 +17,38 @@
       {{ $t("alsijil.coursebook.statistics.person_page.title") }}
     </v-card-title>
 
-    <v-skeleton-loader v-if="$apollo.loading"
-      type="card"
-    />
-    <statistics-absences-card v-else
-      :absence-reasons="statistics.absenceReasons"
-    />
-    <v-skeleton-loader v-if="$apollo.loading"
-      type="card"
-    />
-    <statistics-tardiness-card v-else
-      :tardiness-sum="statistics.tardinessSum"
-      :tardiness-count="statistics.tardinessCount"
-    />
-    <v-skeleton-loader v-if="$apollo.loading"
-      type="card"
-    />
-    <statistics-extra-marks-card v-else
-      :extra-marks="statistics.extraMarks"
-    />
-    <v-skeleton-loader v-if="compact && $apollo.loading"
-      type="card"
-    />
-    <statistics-personal-notes-list v-else-if="compact" />
+    <v-card-text>
+      <div class="d-flex mb-4" style="gap: 1em">
+        <v-skeleton-loader v-if="$apollo.loading"
+          type="card"
+        />
+        <statistics-absences-card v-else
+          class="flex-grow-1"
+          :absence-reasons="statistics.absenceReasons"
+        />
+        <v-skeleton-loader v-if="$apollo.loading"
+          type="card"
+        />
+        <statistics-tardiness-card v-else
+          class="flex-grow-1"
+          :tardiness-sum="statistics.tardinessSum"
+          :tardiness-count="statistics.tardinessCount"
+        />
+        <v-skeleton-loader v-if="$apollo.loading"
+          type="card"
+        />
+        <statistics-extra-marks-card v-else
+          class="flex-grow-1"
+          :extra-marks="statistics.extraMarks"
+        />
+      </div>
+      <v-skeleton-loader v-if="compact && $apollo.loading"
+        type="card"
+      />
+      <statistics-personal-notes-list v-else-if="compact"
+        class="flex-grow-1"
+      />
+    </v-card-text>
   </v-card>
 </template>
 
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsTardinessCard.vue b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsTardinessCard.vue
index fc9428de26a6bb9225b2557fcda6abec9da91bcf..39ad5e9374832d420e95fcefdaebc8615b329585 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsTardinessCard.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsTardinessCard.vue
@@ -1,9 +1,17 @@
 <template>
-<v-card>
-  {{ tardinessCount }}
-  {{ $t("alsijil.tardiness.plural") }}
-  <!-- TODO: Show average tardiness instead of sum like mock-up? -->
-  {{ tardinessSum }}
+  <v-card class="text-center">
+    <v-card-text>
+      <div class="text-h2">
+        {{ tardinessCount }}
+      </div>
+      <div class="text-subtitle-2">
+        {{ $t("alsijil.tardiness.plural") }}
+      </div>
+      <div class="text-subtitle-2">
+        <!-- TODO: Show average tardiness instead of sum like mock-up? -->
+        {{ tardinessSum }}
+      </div>
+    </v-card-text>
   </v-card>
 </template>