diff --git a/client/src/pages/learningPath/learningPathPage/LearningPathAppointmentsMock.vue b/client/src/components/dueDates/DueDateSingle.vue
similarity index 56%
rename from client/src/pages/learningPath/learningPathPage/LearningPathAppointmentsMock.vue
rename to client/src/components/dueDates/DueDateSingle.vue
index 22fb8516..68e6cc1c 100644
--- a/client/src/pages/learningPath/learningPathPage/LearningPathAppointmentsMock.vue
+++ b/client/src/components/dueDates/DueDateSingle.vue
@@ -1,26 +1,20 @@
 <template>
-  <div>
-    <ul>
-      <li v-for="dueDate in dueDates" :key="dueDate.id">
-        <div class="m-3 p-1">
-          <p class="text-bold">{{ dueDate.title }}</p>
-          <div>{{ formatDate(dueDate.start, dueDate.end) }}</div>
-          <a :href="dueDate.url" target="_blank">Details anschauen</a>
-        </div>
-      </li>
-    </ul>
+  <div class="p-1">
+    <p class="text-bold">{{ dueDate.title }}</p>
+    <div>{{ formatDate(dueDate.start, dueDate.end) }}</div>
+    <a :href="dueDate.url" target="_blank">Details anschauen</a>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { useCurrentCourseSession } from "@/composables";
+import type { DueDate } from "@/types";
+import { defineProps } from "vue";
 
-defineProps<{}>();
+const props = defineProps<{
+  dueDate: DueDate;
+}>();
 
-const courseSession = useCurrentCourseSession();
-console.log(courseSession.value);
-
-const dueDates = courseSession.value.duedates;
+console.log(props.dueDate);
 
 const formatDate = (start_str, end_str) => {
   const start = new Date(start_str);
@@ -43,6 +37,10 @@ const get_time_string = (date) => {
 };
 
 const get_date_string = (date) => {
-  return date.toLocaleDateString();
+  return date.toLocaleDateString([], {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+  });
 };
 </script>
diff --git a/client/src/components/dueDates/DueDatesShortList.vue b/client/src/components/dueDates/DueDatesShortList.vue
new file mode 100644
index 00000000..1b73f8f2
--- /dev/null
+++ b/client/src/components/dueDates/DueDatesShortList.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <ul>
+      <li v-for="dueDate in dueDates" :key="dueDate.id">
+        <SingleDueDate :due-date="dueDate"></SingleDueDate>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import SingleDueDate from "@/components/dueDates/DueDateSingle.vue";
+import { useCurrentCourseSession } from "@/composables";
+import { defineProps } from "vue";
+
+const props = defineProps<{
+  maxCount: {
+    type: number;
+    default: 3;
+  };
+}>();
+
+const courseSession = useCurrentCourseSession();
+console.log(props.maxCount);
+
+const dueDates = courseSession.value.duedates.slice(0, 3);
+console.log(courseSession.value.duedates);
+</script>
diff --git a/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue b/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue
index 4a854672..4fcb1fdc 100644
--- a/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue
+++ b/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import LearningPathAppointmentsMock from "@/pages/learningPath/learningPathPage/LearningPathAppointmentsMock.vue";
+import DueDatesShortList from "@/components/dueDates/DueDatesShortList.vue";
 import LearningPathListView from "@/pages/learningPath/learningPathPage/LearningPathListView.vue";
 import LearningPathPathView from "@/pages/learningPath/learningPathPage/LearningPathPathView.vue";
 import CircleProgress from "@/pages/learningPath/learningPathPage/LearningPathProgress.vue";
@@ -92,7 +92,7 @@ const changeViewType = (viewType: ViewType) => {
 
       <!-- Right -->
       <div v-if="!useMobileLayout" class="max-w-md">
-        <LearningPathAppointmentsMock></LearningPathAppointmentsMock>
+        <DueDatesShortList></DueDatesShortList>
       </div>
     </div>