diff --git a/client/src/components/mediaLibrary/OverviewCard.vue b/client/src/components/mediaLibrary/OverviewCard.vue
index 1ef5aed7..45c3334e 100644
--- a/client/src/components/mediaLibrary/OverviewCard.vue
+++ b/client/src/components/mediaLibrary/OverviewCard.vue
@@ -13,8 +13,8 @@ const props = withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <div class="bg-white p-8 flex justify-between">
-    <div>
+  <div class="bg-white lg:pb-8 pb-4 p-8 flex justify-between flex-col lg:flex-row">
+    <div class="mb-4 lg:mb-0">
       <h3 class="mb-4">{{ title }}</h3>
       <p class="mb-4">{{ description }}</p>
       <router-link
@@ -29,7 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
     <div
       v-if="icon"
       :class="[`bg-${icon}`]"
-      class="hidden lg:block bg-contain bg-no-repeat bg-right w-2/6 -mr-8"
+      class="lg:block bg-contain bg-no-repeat bg-left lg:bg-right h-32 lg:w-2/6 -ml-8 lg:ml-0 lg:-mr-8"
     ></div>
   </div>
 </template>
diff --git a/client/src/pages/competence/CompetenceIndexPage.vue b/client/src/pages/competence/CompetenceIndexPage.vue
index fc5681de..8bdf595f 100644
--- a/client/src/pages/competence/CompetenceIndexPage.vue
+++ b/client/src/pages/competence/CompetenceIndexPage.vue
@@ -2,10 +2,10 @@
 import CompetenceProgress from "@/components/competences/CompetenceProgress.vue";
 import PerformanceCriteriaRow from "@/components/competences/PerformanceCriteriaRow.vue";
 import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
-import { useCompetenceStore } from "@/stores/competence";
+import {useCompetenceStore} from "@/stores/competence";
 import _ from "lodash";
 import * as log from "loglevel";
-import { computed } from "vue";
+import {computed} from "vue";
 
 log.debug("CompetenceIndexPage created");
 
@@ -60,7 +60,7 @@ const countStatus = computed(() => {
         :items="competenceStore.availableCircles"
       ></ItDropdownSelect>
     </div>
-    <div class="bg-white p-8 mb-8">
+    <div class="bg-white px-8 py-4 lg:py-8 l mb-4 lg:mb-8">
       <div>
         <h3 class="pb-4 border-b">Letzte verbesserte Kompetenzen</h3>
         <ul>
@@ -90,7 +90,7 @@ const countStatus = computed(() => {
         </router-link>
       </div>
     </div>
-    <div class="bg-white p-8 mb-8">
+    <div class="bg-white px-8 py-4 lg:py-8 l mb-4 lg:mb-8">
       <h3 class="pb-4 lg:pb-0 mb-4 border-b lg:border-0">Einschätzungen</h3>
       <ul
         class="flex flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-8 mb-6"
@@ -133,7 +133,7 @@ const countStatus = computed(() => {
         <it-icon-arrow-right></it-icon-arrow-right>
       </router-link>
     </div>
-    <div v-if="failedCriteria.length > 0" class="bg-white p-8">
+    <div v-if="failedCriteria.length > 0" class="bg-white px-8 py-4 lg:py-8 l mb-4 lg:mb-8">
       <div class="border-b flex flex-row items-center pb-4 mb-4">
         <it-icon-smiley-thinking class="w-11 h-11 mr-5"></it-icon-smiley-thinking>
         <h3>«Das muss ich nochmals anschauen»</h3>
diff --git a/client/src/pages/competence/PerformanceCriteriaPage.vue b/client/src/pages/competence/PerformanceCriteriaPage.vue
index b5bbe32c..f01c80be 100644
--- a/client/src/pages/competence/PerformanceCriteriaPage.vue
+++ b/client/src/pages/competence/PerformanceCriteriaPage.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { default as PerformanceCriteriaRow } from "@/components/competences/PerformanceCriteriaRow.vue";
+import {default as PerformanceCriteriaRow} from "@/components/competences/PerformanceCriteriaRow.vue";
 import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
-import { useCompetenceStore } from "@/stores/competence";
-import type { CourseCompletionStatus } from "@/types";
+import {useCompetenceStore} from "@/stores/competence";
+import type {CourseCompletionStatus} from "@/types";
 import * as log from "loglevel";
-import type { Ref } from "vue";
-import { computed, ref } from "vue";
+import type {Ref} from "vue";
+import {computed, ref} from "vue";
 
 log.debug("CompetencesMainView created");
 
@@ -27,11 +27,11 @@ const shownCriteria = computed(() => {
         class="btn-text inline-flex items-center pl-0"
         :to="`${competenceStore.competenceProfilePage?.frontend_url}`"
       >
-        <it-icon-arrow-left />
+        <it-icon-arrow-left/>
         <span>zurück</span>
       </router-link>
     </nav>
-    <div class="flex flex-col lg:flex-row items-center justify-between mb-10">
+    <div class="flex flex-col lg:flex-row items-center justify-between mb-4 lg:mb-10">
       <h1>Einschätzungen</h1>
       <ItDropdownSelect
         v-model="competenceStore.selectedCircle"