diff --git a/src/components/lesson-card.vue b/src/components/lesson-card.vue
new file mode 100644
index 0000000..2db16be
--- /dev/null
+++ b/src/components/lesson-card.vue
@@ -0,0 +1,122 @@
+<script setup>
+import { getSubstitutionColor } from "@/util";
+import { times } from "@/store";
+
+defineProps(["lesson", "index"]);
+
+function isChanged(lesson, key) {
+  const substitution = lesson.substitution;
+  if (!(substitution && substitution.change)) return false;
+  const changedKeys = Object.keys(substitution.change);
+  if (!changedKeys.includes(key)) return false;
+  return lesson[key] != substitution.change[key];
+}
+
+function getNotes(substitution) {
+  if (!(substitution && substitution.notes)) return;
+  return substitution.notes;
+}
+
+function isCancelled(substitution) {
+  if (!substitution) return false;
+  return substitution.type == "cancellation";
+}
+
+function getTime(index) {
+  const lessonTimes = {
+    ...(times.value.find((e) => e.lesson == index + 1) || {}),
+  };
+  Object.keys(lessonTimes).forEach((e) => {
+    if (e == "lesson") return;
+    const date = new Date(lessonTimes[e]);
+    const hours = date.getHours().toString().padStart(2, "0");
+    const minutes = date.getMinutes().toString().padStart(2, "0");
+    lessonTimes[e] = `${hours}:${minutes}`;
+  });
+  return lessonTimes;
+}
+</script>
+
+<template>
+  <div class="lesson" :style="getSubstitutionColor(lesson.substitution)">
+    <span class="hour">{{ index + 1 }}</span>
+    <div class="infos">
+      <!-- Subject changed -->
+      <span class="subject" v-if="isChanged(lesson, 'subject')">
+        <s>{{ lesson.subject }}</s> {{ lesson.substitution.change.subject }}
+      </span>
+      <!-- Cancellation -->
+      <span class="subject" v-else-if="isCancelled(lesson.substitution)">
+        <s>{{ lesson.subject }}</s>
+      </span>
+      <span class="subject" v-else>
+        {{ lesson.subject }}
+      </span>
+      <div class="info">
+        <!-- Teacher changed -->
+        <span class="info" v-if="isChanged(lesson, 'teacher')">
+          <s>{{ lesson.teacher }}</s>
+          {{ lesson.substitution.change.teacher }}</span
+        >
+        <span class="info" v-else> {{ lesson.teacher }}</span>
+        <!-- Room changed -->
+        <span class="info" v-if="isChanged(lesson, 'room')"
+          >, <s>{{ lesson.room }}</s> {{ lesson.substitution.change.room }}
+        </span>
+        <span class="info" v-else-if="lesson.room">, {{ lesson.room }}</span>
+        <!-- Show notes if available -->
+        <span class="info" v-if="getNotes(lesson.substitution)"
+          >, {{ $t("timetable.notes") }} {{ getNotes(lesson.substitution) }}
+        </span>
+      </div>
+    </div>
+    <div class="times" v-if="getTime(index).start">
+      <span>{{ getTime(index).start }} -</span>
+      <span>{{ getTime(index).end }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.lesson {
+  display: grid;
+  background-color: var(--substitution-background-unchanged);
+  min-height: 50px;
+  border-radius: 11px;
+  padding: 15px;
+  grid-template-columns: max-content auto auto;
+  gap: 15px;
+}
+
+.hour {
+  font-size: 30px;
+  display: flex;
+  align-items: center;
+}
+
+.infos {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.infos .subject {
+  font-weight: bold;
+  font-size: 18px;
+}
+
+.infos .info {
+  font-weight: 200;
+  font-size: 14px;
+}
+
+.times {
+  margin-left: auto;
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  align-items: center;
+  color: var(--text-color);
+  opacity: 0.5;
+  font-weight: 300;
+}
+</style>
diff --git a/src/components/timetable-list.vue b/src/components/timetable-list.vue
index 19ebf64..b2db22c 100644
--- a/src/components/timetable-list.vue
+++ b/src/components/timetable-list.vue
@@ -1,7 +1,7 @@
 <script setup>
-import { timetable, times, parsedTimetable, substitutions } from "@/store";
-import { getSubstitutionColor } from "@/util";
+import { timetable, parsedTimetable, substitutions } from "@/store";
 import { computed } from "vue";
+import LessonCard from "./lesson-card.vue";
 
 const props = defineProps({
   date: {
@@ -32,38 +32,6 @@ const linkedTimetable = computed(() => {
   });
   return newDay;
 });
-
-function isChanged(lesson, key) {
-  const substitution = lesson.substitution;
-  if (!(substitution && substitution.change)) return false;
-  const changedKeys = Object.keys(substitution.change);
-  if (!changedKeys.includes(key)) return false;
-  return lesson[key] != substitution.change[key];
-}
-
-function getNotes(substitution) {
-  if (!(substitution && substitution.notes)) return;
-  return substitution.notes;
-}
-
-function isCancelled(substitution) {
-  if (!substitution) return false;
-  return substitution.type == "cancellation";
-}
-
-function getTime(index) {
-  const lessonTimes = {
-    ...(times.value.find((e) => e.lesson == index + 1) || {}),
-  };
-  Object.keys(lessonTimes).forEach((e) => {
-    if (e == "lesson") return;
-    const date = new Date(lessonTimes[e]);
-    const hours = date.getHours().toString().padStart(2, "0");
-    const minutes = date.getMinutes().toString().padStart(2, "0");
-    lessonTimes[e] = `${hours}:${minutes}`;
-  });
-  return lessonTimes;
-}
 </script>
 <template>
   <div class="container">
@@ -74,45 +42,7 @@ function getTime(index) {
   </div>
   <div class="listContainer">
     <template v-for="(lesson, index) in linkedTimetable" :key="index">
-      <div class="lesson" :style="getSubstitutionColor(lesson.substitution)">
-        <span class="hour">{{ index + 1 }}</span>
-        <div class="infos">
-          <!-- Subject changed -->
-          <span class="subject" v-if="isChanged(lesson, 'subject')">
-            <s>{{ lesson.subject }}</s> {{ lesson.substitution.change.subject }}
-          </span>
-          <!-- Cancellation -->
-          <span class="subject" v-else-if="isCancelled(lesson.substitution)">
-            <s>{{ lesson.subject }}</s>
-          </span>
-          <span class="subject" v-else>
-            {{ lesson.subject }}
-          </span>
-          <div class="info">
-            <!-- Teacher changed -->
-            <span class="info" v-if="isChanged(lesson, 'teacher')">
-              <s>{{ lesson.teacher }}</s>
-              {{ lesson.substitution.change.teacher }}</span
-            >
-            <span class="info" v-else> {{ lesson.teacher }}</span>
-            <!-- Room changed -->
-            <span class="info" v-if="isChanged(lesson, 'room')"
-              >, <s>{{ lesson.room }}</s> {{ lesson.substitution.change.room }}
-            </span>
-            <span class="info" v-else-if="lesson.room"
-              >, {{ lesson.room }}</span
-            >
-            <!-- Show notes if available -->
-            <span class="info" v-if="getNotes(lesson.substitution)"
-              >, {{ $t("timetable.notes") }} {{ getNotes(lesson.substitution) }}
-            </span>
-          </div>
-        </div>
-        <div class="times" v-if="getTime(index).start">
-          <span>{{ getTime(index).start }} -</span>
-          <span>{{ getTime(index).end }}</span>
-        </div>
-      </div>
+      <LessonCard :lesson="lesson" :index="index" />
     </template>
   </div>
 </template>
@@ -139,46 +69,4 @@ function getTime(index) {
   gap: 10px;
   width: 100%;
 }
-
-.lesson {
-  display: grid;
-  background-color: var(--substitution-background-unchanged);
-  min-height: 50px;
-  border-radius: 11px;
-  padding: 15px;
-  grid-template-columns: max-content auto auto;
-  gap: 15px;
-}
-
-.hour {
-  font-size: 30px;
-  display: flex;
-  align-items: center;
-}
-
-.infos {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-}
-
-.infos .subject {
-  font-weight: bold;
-  font-size: 18px;
-}
-
-.infos .info {
-  font-weight: 200;
-  font-size: 14px;
-}
-
-.times {
-  margin-left: auto;
-  display: grid;
-  grid-template-rows: 1fr 1fr;
-  align-items: center;
-  color: var(--text-color);
-  opacity: 0.5;
-  font-weight: 300;
-}
 </style>