diff --git a/client/src/components/dashboard/AgentConnectionCount.vue b/client/src/components/dashboard/AgentConnectionCount.vue
index eca05793..68d36908 100644
--- a/client/src/components/dashboard/AgentConnectionCount.vue
+++ b/client/src/components/dashboard/AgentConnectionCount.vue
@@ -29,7 +29,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="w-[325px]">
+  <div class="w-60 sm:w-[325px]">
     <BaseBox
       :details-link="`/dashboard/persons?course=${props.courseId}`"
       data-cy="dashboard.mentor.menteeCount"
@@ -37,14 +37,16 @@ onMounted(async () => {
     >
       <template #title>{{ $t("a.Personen") }}</template>
       <template #content>
-        <div :class="['flex flex-row space-x-3 bg-white', slim ? '' : 'pb-6']">
+        <div
+          :class="['flex flex-row flex-wrap items-center bg-white', slim ? '' : 'pb-6']"
+        >
           <div
             class="flex h-[74px] items-center justify-center py-1 pr-3 text-3xl font-bold"
             data-cy="dashboard.mentor.menteeCountValue"
           >
             <span>{{ menteeCount }}</span>
           </div>
-          <p class="ml-3 mt-0 leading-[74px]">
+          <p class="mt-0">
             {{ $t("a.Personen, die du begleitest") }}
           </p>
         </div>
diff --git a/client/src/components/dashboard/AssignmentSummary.vue b/client/src/components/dashboard/AssignmentSummary.vue
index 0f77d478..ef8f426a 100644
--- a/client/src/components/dashboard/AssignmentSummary.vue
+++ b/client/src/components/dashboard/AssignmentSummary.vue
@@ -31,7 +31,7 @@ onMounted(async () => {
 
 <template>
   <div v-if="assignment">
-    <div class="w-[395px]">
+    <div class="sm:w-[395px]">
       <AssignmentProgressSummaryBox
         :total-assignments="assignment.total_count"
         :achieved-points-count="assignment.points_achieved_count"
diff --git a/client/src/components/dashboard/AttendancePerChosenProfileChart.vue b/client/src/components/dashboard/AttendancePerChosenProfileChart.vue
index a5a687af..40be2706 100644
--- a/client/src/components/dashboard/AttendancePerChosenProfileChart.vue
+++ b/client/src/components/dashboard/AttendancePerChosenProfileChart.vue
@@ -24,7 +24,7 @@ const data = computed(() => ({
 </script>
 w
 <template>
-  <div class="flex flex-row items-center space-x-8">
+  <div class="flex flex-row flex-wrap items-center gap-y-4 space-x-8 sm:gap-y-0">
     <div class="size-32">
       <Pie
         :data="data"
@@ -39,7 +39,7 @@ w
         }"
       />
     </div>
-    <div class="flex flex-col space-y-2">
+    <div class="flex flex-col items-start">
       <div
         v-for="(value, key) in props.data"
         :key="key"
diff --git a/client/src/components/dashboard/CompetenceSummary.vue b/client/src/components/dashboard/CompetenceSummary.vue
index f463d5a9..31faee03 100644
--- a/client/src/components/dashboard/CompetenceSummary.vue
+++ b/client/src/components/dashboard/CompetenceSummary.vue
@@ -25,7 +25,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div v-if="competence" class="w-[395px]">
+  <div v-if="competence" class="sm:w-[395px]">
     <CompetenceSummaryBox
       :fail-count="competence.fail_count"
       :success-count="competence.success_count"
diff --git a/client/src/components/dashboard/CoursePanel.vue b/client/src/components/dashboard/CoursePanel.vue
index f1025dc7..964e973b 100644
--- a/client/src/components/dashboard/CoursePanel.vue
+++ b/client/src/components/dashboard/CoursePanel.vue
@@ -9,6 +9,7 @@ import UkStatistics from "@/components/dashboard/UkStatistics.vue";
 import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
 import type { DashboardCourseConfigType, WidgetType } from "@/services/dashboard";
 import { getCockpitUrl, getLearningMentorUrl, getLearningPathUrl } from "@/utils/utils";
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
 import { computed } from "vue";
 import TrainingResponsibleStatistics from "./TrainingResponsibleStatistics.vue";
 
@@ -23,6 +24,9 @@ const props = defineProps<{
   courseConfig: DashboardCourseConfigType | undefined;
 }>();
 
+const breakpoints = useBreakpoints(breakpointsTailwind);
+const smAndLarger = breakpoints.greaterOrEqual("sm");
+
 const courseSlug = computed(() => props.courseConfig?.course_slug ?? "");
 const courseName = computed(() => props.courseConfig?.course_title ?? "");
 const numberOfMentorWidgets = computed(() => {
@@ -96,8 +100,10 @@ function hasActionButton(): boolean {
   >
     <div class="flex flex-col space-y-8 bg-white p-6">
       <div class="border-b border-gray-300 pb-8">
-        <div class="flex flex-row items-start justify-between">
-          <h3 class="mb-4 text-3xl" data-cy="db-course-title">{{ courseName }}</h3>
+        <div class="flex flex-row flex-wrap items-start justify-between pb-3 sm:pb-0">
+          <h3 class="mb-4 text-xl sm:text-3xl" data-cy="db-course-title">
+            {{ courseName }}
+          </h3>
           <a
             v-if="hasActionButton()"
             :href="actionButtonProps.href"
@@ -114,7 +120,7 @@ function hasActionButton(): boolean {
           <router-link
             v-if="courseConfig.has_preview"
             :to="getLearningPathUrl(courseConfig.course_slug)"
-            class="inline-block pl-6"
+            class="inline-block pt-3 sm:pl-6 sm:pt-0"
             target="_blank"
           >
             <div class="flex items-center">
@@ -137,7 +143,7 @@ function hasActionButton(): boolean {
           :key="courseSlug"
           :course-slug="courseSlug"
           :course-session-id="courseConfig.session_to_continue_id"
-          diagram-type="horizontal"
+          :diagram-type="smAndLarger ? 'horizontal' : 'horizontalSmall'"
         ></LearningPathDiagram>
       </div>
 
@@ -179,7 +185,7 @@ function hasActionButton(): boolean {
 
       <div
         v-if="numberOfMentorWidgets > 0"
-        class="flex flex-col flex-wrap items-stretch md:flex-row"
+        class="flex flex-col flex-wrap items-stretch space-y-4 sm:space-y-0 md:flex-row"
       >
         <AgentConnectionCount
           v-if="hasWidget('MentorPersonWidget')"
diff --git a/client/src/components/dashboard/MentorCompetenceSummary.vue b/client/src/components/dashboard/MentorCompetenceSummary.vue
index f689e087..c1b7cfce 100644
--- a/client/src/components/dashboard/MentorCompetenceSummary.vue
+++ b/client/src/components/dashboard/MentorCompetenceSummary.vue
@@ -29,7 +29,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div v-if="summary" class="w-[325px]">
+  <div v-if="summary" class="w-60 sm:w-[325px]">
     <BaseBox
       :details-link="`/statistic/${props.agentRole}/${courseSlug}/assignment`"
       data-cy="dashboard.mentor.competenceSummary"
diff --git a/client/src/components/dashboard/MentorOpenTasksCount.vue b/client/src/components/dashboard/MentorOpenTasksCount.vue
index efccbb48..390218b5 100644
--- a/client/src/components/dashboard/MentorOpenTasksCount.vue
+++ b/client/src/components/dashboard/MentorOpenTasksCount.vue
@@ -18,14 +18,14 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="w-[325px]">
+  <div class="w-60 sm:w-[325px]">
     <BaseBox
       :details-link="`/course/${props.courseSlug}/learning-mentor/tasks`"
       data-cy="dashboard.mentor.openTasksCount"
     >
       <template #title>{{ $t("a.Zu erledigen") }}</template>
       <template #content>
-        <div class="flex flex-row space-x-3 bg-white pb-6">
+        <div class="flex flex-row flex-wrap space-x-3 bg-white pb-6">
           <div
             class="flex h-[74px] w-[74px] items-center justify-center rounded-full border-2 border-green-500 px-3 py-1 text-3xl font-bold"
           >
diff --git a/client/src/components/dashboard/TrainingResponsibleStatistics.vue b/client/src/components/dashboard/TrainingResponsibleStatistics.vue
index d1484a48..cb383ebb 100644
--- a/client/src/components/dashboard/TrainingResponsibleStatistics.vue
+++ b/client/src/components/dashboard/TrainingResponsibleStatistics.vue
@@ -54,7 +54,7 @@ const attendanceCountPerChosenProfile = computed(() => {
 
 <template>
   <div class="flex flex-col">
-    <div class="flex flex-col flex-wrap items-stretch md:flex-row">
+    <div class="flex flex-col flex-wrap items-stretch gap-y-4 sm:gap-y-0 md:flex-row">
       <BaseBox
         :details-link="`/dashboard/cost/${courseSessionId}`"
         data-cy="dashboard.stats.trainingResponsible.cost"
diff --git a/client/src/components/dashboard/UkStatistics.vue b/client/src/components/dashboard/UkStatistics.vue
index 7f26191c..89581a60 100644
--- a/client/src/components/dashboard/UkStatistics.vue
+++ b/client/src/components/dashboard/UkStatistics.vue
@@ -64,7 +64,7 @@ onMounted(async () => {
 <template>
   <div v-if="statistics" class="space-y-8">
     <div
-      class="flex flex-col flex-wrap justify-between gap-x-5 border-b border-gray-300 pb-8 last:border-0 md:flex-row"
+      class="flex flex-col flex-wrap justify-between gap-x-5 gap-y-5 border-b border-gray-300 pb-8 last:border-0 md:flex-row"
     >
       <AttendanceSummaryBox
         class="flex-grow"
@@ -80,7 +80,7 @@ onMounted(async () => {
       />
     </div>
     <div
-      class="flex flex-col flex-wrap gap-x-5 border-b border-gray-300 align-top last:border-0 md:flex-row"
+      class="flex flex-col flex-wrap gap-x-5 gap-y-5 border-b border-gray-300 align-top last:border-0 md:flex-row"
     >
       <FeedbackSummaryBox
         :feedback-count="feebackSummary.total_responses"
diff --git a/client/src/components/header/CoursePreviewBar.vue b/client/src/components/header/CoursePreviewBar.vue
index 1e7bc3ba..07ba7543 100644
--- a/client/src/components/header/CoursePreviewBar.vue
+++ b/client/src/components/header/CoursePreviewBar.vue
@@ -15,7 +15,7 @@ const { t } = useTranslation();
     <nav class="bg-yellow-500">
       <div class="mx-auto px-4 lg:px-8">
         <div
-          class="relative flex h-16 w-full flex-col items-center justify-end space-x-8 lg:flex-row lg:items-stretch lg:justify-center"
+          class="relative flex h-auto min-h-16 w-full flex-col items-center justify-end space-x-8 lg:flex-row lg:items-stretch lg:justify-center"
         >
           <span class="flex items-center px-1 pt-1 font-bold text-black">
             {{ t("a.Vorschau Teilnehmer") }} ({{ courseSession.title }})
diff --git a/client/src/components/learningMentor/AssignmentItem.vue b/client/src/components/learningMentor/AssignmentItem.vue
index d2eb9d6e..4a7022b4 100644
--- a/client/src/components/learningMentor/AssignmentItem.vue
+++ b/client/src/components/learningMentor/AssignmentItem.vue
@@ -26,14 +26,18 @@ const hasPendingTasks = computed(() => props.pendingTasks > 0);
   <div
     class="flex flex-col items-start justify-between gap-4 border-b py-2 pl-5 pr-5 last:border-b-0 md:flex-row md:items-center md:justify-between md:gap-16"
   >
-    <div class="flex flex-grow flex-row items-center justify-start">
+    <div
+      class="flex flex-grow flex-row flex-wrap items-center justify-start space-y-4 sm:space-y-0"
+    >
       <div class="w-80">
         <div class="font-bold">{{ taskTitle }}</div>
         <div class="text-small text-gray-900">
           {{ $t("a.Circle") }} «{{ circleTitle }}»
         </div>
       </div>
-      <div class="flex flex-grow flex-row items-center justify-start space-x-2 pl-20">
+      <div
+        class="flex flex-grow flex-row items-center justify-start space-x-2 sm:pl-20"
+      >
         <template v-if="hasPendingTasks">
           <div
             class="flex h-7 w-7 items-center justify-center rounded-full border-2 border-green-500 px-3 py-1 text-sm font-bold"
diff --git a/client/src/components/learningPath/LearningPathDiagram.vue b/client/src/components/learningPath/LearningPathDiagram.vue
index 94ae34e3..8d848933 100644
--- a/client/src/components/learningPath/LearningPathDiagram.vue
+++ b/client/src/components/learningPath/LearningPathDiagram.vue
@@ -37,6 +37,7 @@ const circles = computed(() => {
       (c) => props.showCircleSlugs?.includes(c.slug) ?? true
     );
   }
+
   return lpQueryResult.circles.value ?? [];
 });
 
@@ -45,7 +46,10 @@ const wrapperClasses = computed(() => {
   if (props.diagramType === "horizontal") {
     classes += " flex-row h-8 space-x-2";
   } else if (props.diagramType === "horizontalSmall") {
-    classes += " flex-row h-5 space-x-1";
+    classes +=
+      filteredCircles.value.length > 15
+        ? " flex-row h-3 space-x-[1.1px]"
+        : " flex-row h-4 space-x-[1.8px]";
   } else if (props.diagramType === "singleSmall") {
     classes += " h-8";
   }
diff --git a/client/src/components/userProfile/UserProfileContent.vue b/client/src/components/userProfile/UserProfileContent.vue
index 77eb78d1..448e4f68 100644
--- a/client/src/components/userProfile/UserProfileContent.vue
+++ b/client/src/components/userProfile/UserProfileContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="flex flex-col sm:flex-row">
     <div class="flex-none border-r bg-white p-4 lg:p-8">
       <slot name="side"></slot>
     </div>
diff --git a/client/src/locales/de/translation.json b/client/src/locales/de/translation.json
index 3535cc53..727ac7da 100644
--- a/client/src/locales/de/translation.json
+++ b/client/src/locales/de/translation.json
@@ -208,6 +208,7 @@
   "a.Nicht bestanden": "Nicht bestanden",
   "a.Nicht bewertet": "Nicht bewertet",
   "a.Nichtleben": "Nichtleben",
+  "a.Noch nicht bestätigt": "Noch nicht bestätigt",
   "a.Note": "Note",
   "a.NUMBER Elemente abgeschlossen": "{NUMBER} Elemente abgeschlossen",
   "a.NUMBER Präsenztage abgeschlossen": "{NUMBER} Präsenztage abgeschlossen",
diff --git a/client/src/locales/fr/translation.json b/client/src/locales/fr/translation.json
index b98ed0fe..9891b2cd 100644
--- a/client/src/locales/fr/translation.json
+++ b/client/src/locales/fr/translation.json
@@ -208,6 +208,7 @@
   "a.Nicht bestanden": "Échoué",
   "a.Nicht bewertet": "Non évalué",
   "a.Nichtleben": "Non-vie",
+  "a.Noch nicht bestätigt": "Pas encore confirmé",
   "a.Note": "Note",
   "a.NUMBER Elemente abgeschlossen": "{NUMBER} éléments terminés",
   "a.NUMBER Präsenztage abgeschlossen": "{NUMBER} jours de présence complétés",
diff --git a/client/src/locales/it/translation.json b/client/src/locales/it/translation.json
index b8bc0049..83a9c46a 100644
--- a/client/src/locales/it/translation.json
+++ b/client/src/locales/it/translation.json
@@ -208,6 +208,7 @@
   "a.Nicht bestanden": "Non superato",
   "a.Nicht bewertet": "Non valutato",
   "a.Nichtleben": "Non vita",
+  "a.Noch nicht bestätigt": "Non ancora confermato",
   "a.Note": "Note",
   "a.NUMBER Elemente abgeschlossen": "{NUMBER} elementi completati",
   "a.NUMBER Präsenztage abgeschlossen": "{NUMBER} giorni di presenza completati",
diff --git a/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue b/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
index 09d2c144..616aafe7 100644
--- a/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
+++ b/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
@@ -177,12 +177,15 @@ watch(
         </button>
       </div>
       <section v-if="attendanceCourses.length && state.attendanceCourseSelected">
-        <div class="flex flex-row justify-between bg-white p-6">
+        <div class="flex flex-row flex-wrap justify-between bg-white p-6">
           <ItDropdownSelect
             v-model="state.attendanceCourseSelected"
             :items="presenceCoursesDropdownOptions ?? []"
           ></ItDropdownSelect>
-          <div v-if="!state.attendanceSaved" class="flex flex-row items-center">
+          <div
+            v-if="!state.attendanceSaved"
+            class="flex flex-row flex-wrap items-center space-y-2 md:space-y-0"
+          >
             <ItCheckbox
               :checkbox-item="{
                 value: true,
diff --git a/client/src/pages/dashboard/statistic/AssignmentList.vue b/client/src/pages/dashboard/statistic/AssignmentList.vue
index 0b8ac664..f997e2ac 100644
--- a/client/src/pages/dashboard/statistic/AssignmentList.vue
+++ b/client/src/pages/dashboard/statistic/AssignmentList.vue
@@ -63,9 +63,14 @@ const itemDetailUrl = (item: AssignmentStatisticsRecordType) => {
 
 <template>
   <main>
-    <div class="mb-10 flex items-center justify-between">
+    <div class="mb-10 flex flex-wrap items-center justify-between">
       <h3>{{ $t("a.Kompetenznachweis-Elemente") }}</h3>
-      <button v-if="true" class="flex" data-cy="export-button" @click="exportData">
+      <button
+        v-if="true"
+        class="flex pt-3 sm:pt-0"
+        data-cy="export-button"
+        @click="exportData"
+      >
         <it-icon-export></it-icon-export>
         <span class="ml inline-block">{{ $t("a.Als Excel exportieren") }}</span>
       </button>
@@ -78,7 +83,7 @@ const itemDetailUrl = (item: AssignmentStatisticsRecordType) => {
       >
         <template #default="{ item }">
           <div
-            class="flex justify-between"
+            class="flex flex-wrap justify-between"
             :data-cy="`${(item as AssignmentStatisticsRecordType).assignment_title}@${(item as AssignmentStatisticsRecordType).course_session_id}`"
           >
             <div>
@@ -109,7 +114,7 @@ const itemDetailUrl = (item: AssignmentStatisticsRecordType) => {
                 {{ total((item as AssignmentStatisticsRecordType).metrics) }}
                 bestanden
               </div>
-              <div v-else>Noch nicht bestätigt</div>
+              <div v-else>{{ $t("a.Noch nicht bestätigt") }}</div>
               <ItProgress
                 :status-count="
                   assignmentStats((item as AssignmentStatisticsRecordType).metrics)
diff --git a/client/src/pages/dashboard/statistic/AttendanceList.vue b/client/src/pages/dashboard/statistic/AttendanceList.vue
index 693049e5..5ec8b28d 100644
--- a/client/src/pages/dashboard/statistic/AttendanceList.vue
+++ b/client/src/pages/dashboard/statistic/AttendanceList.vue
@@ -64,7 +64,7 @@ async function exportData() {
         :items="courseStatistics.attendance_day_presences.records"
       >
         <template #default="{ item }">
-          <div class="flex justify-between">
+          <div class="flex flex-wrap justify-between">
             <div>
               <h4 class="font-bold">
                 {{ $t("a.Präsenztag") }}: Circle «{{
diff --git a/client/src/pages/dashboard/statistic/CompetenceList.vue b/client/src/pages/dashboard/statistic/CompetenceList.vue
index 9a8e2ceb..50e904de 100644
--- a/client/src/pages/dashboard/statistic/CompetenceList.vue
+++ b/client/src/pages/dashboard/statistic/CompetenceList.vue
@@ -25,7 +25,7 @@ const props = defineProps<{
         :items="courseStatistics.competences.records"
       >
         <template #default="{ item }">
-          <div class="flex justify-between">
+          <div class="flex flex-wrap justify-between space-y-2 md:space-y-0">
             <div>
               <h4 class="font-bold">
                 {{ $t("a.Selbsteinschätzung") }}:
diff --git a/client/src/pages/dashboard/statistic/FeedbackList.vue b/client/src/pages/dashboard/statistic/FeedbackList.vue
index 2988d7c4..bb5aeabb 100644
--- a/client/src/pages/dashboard/statistic/FeedbackList.vue
+++ b/client/src/pages/dashboard/statistic/FeedbackList.vue
@@ -52,7 +52,7 @@ async function exportData() {
         :items="courseStatistics.feedback_responses.records"
       >
         <template #default="{ item }">
-          <div class="flex justify-between">
+          <div class="flex flex-wrap justify-between space-y-2 md:space-y-0">
             <div>
               <h4 class="font-bold">
                 Feedback: Circle «{{ circleMeta(item.circle_id)?.name }}»
diff --git a/client/src/pages/learningPath/learningPathPage/LearningPathCircle.vue b/client/src/pages/learningPath/learningPathPage/LearningPathCircle.vue
index 7f497972..65c1726d 100644
--- a/client/src/pages/learningPath/learningPathPage/LearningPathCircle.vue
+++ b/client/src/pages/learningPath/learningPathPage/LearningPathCircle.vue
@@ -133,7 +133,7 @@ function render() {
   <div class="aspect-square content-center">
     <pre hidden>{{ pieData }}</pre>
     <pre hidden>{{ render() }}</pre>
-    <svg :id="svgId" class="h-full min-w-[20px]">
+    <svg :id="svgId" class="h-full">
       <circle :cx="width / 2" :cy="height / 2" :r="radius" :color="colors.gray[300]" />
       <circle :cx="width / 2" :cy="height / 2" :r="radius / 2.5" color="white" />
     </svg>
diff --git a/env_secrets/local_elia.env b/env_secrets/local_elia.env
index 2ea6b0a9..54bc2037 100644
Binary files a/env_secrets/local_elia.env and b/env_secrets/local_elia.env differ