diff --git a/public/js/components/Tempus/HistoryModal.js b/public/js/components/Tempus/HistoryModal.js
new file mode 100644
index 000000000..9716bc1f1
--- /dev/null
+++ b/public/js/components/Tempus/HistoryModal.js
@@ -0,0 +1,68 @@
+/**
+ * Copyright (C) 2024 fhcomplete.org
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+import BsModal from "../Bootstrap/Modal.js";
+
+export default {
+  name: "HistoryModal",
+  components: {
+    BsModal,
+  },
+  props: {
+    entries: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  methods: {
+    show() {
+      this.$refs.modal.show();
+    },
+    hide() {
+      this.$refs.modal.hide();
+    },
+  },
+  template: `
+    <bs-modal
+      ref="modal"
+      class="bootstrap-prompt"
+      dialog-class="modal-lg"
+      data-cy="historyModal"
+    >
+      <template #title>History</template>
+      <template #default>
+        <table v-if="entries.length" class="table table-bordered table-hover">
+          <thead class="table-light">
+            <tr>
+              <th>Von</th>
+              <th>Bis</th>
+              <th>Status</th>
+              <th>Ort</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="entry in entries" :key="entry.id">
+              <td>{{ entry.von }}</td>
+              <td>{{ entry.bis }}</td>
+              <td>{{ entry.status_kurzbz }}</td>
+              <td>{{ entry.ort }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </template>
+    </bs-modal>
+  `,
+};
diff --git a/public/js/components/Tempus/Tempus.js b/public/js/components/Tempus/Tempus.js
index a5f28ef73..af762c554 100644
--- a/public/js/components/Tempus/Tempus.js
+++ b/public/js/components/Tempus/Tempus.js
@@ -46,6 +46,7 @@ import { getTempusShortcuts } from "./shortcuts.js";
 import KeyboardShortcuts from "./KeyboardShortcuts.js";
 import { useContextMenuActions } from "../../composables/Tempus/ContextMenuActions.js";
 import MultiWeekPlanModal from "./MultiWeekPlanModal.js";
+import HistoryModal from "./HistoryModal.js";
 import { getTempusSearchbarOptions } from "./Filters/searchbarOptions.js";
 import CoreTag from '../Tag/Tag.js';
 
@@ -71,6 +72,7 @@ export default {
     Reservierung,
     KeyboardShortcuts,
     MultiWeekPlanModal,
+    HistoryModal,
     CoreTag,
   },
   props: {
@@ -310,7 +312,7 @@ export default {
         .call(ApiKalender.getHistory(orig.kalender_id))
         .then((result) => {
           this.historyEntries = result.data ?? [];
-          this.$refs.historyModel.show();
+          this.$refs.historyModal.show();
         });
     },
     syncToLecturer(orig) {
@@ -1569,29 +1571,7 @@ export default {
         </div>
 			</template>
 		</bs-modal>
-		<bs-modal ref="historyModel" class="bootstrap-prompt" dialogClass="modal-lg" data-cy="historyModal">
-			<template #title>History</template>
-			<template #default>
-				<table v-if="historyEntries.length" class="table table-bordered table-hover">
-					<thead class="table-light">
-						<tr>
-							<th>Von</th>
-							<th>Bis</th>
-							<th>Status</th>
-							<th>Ort</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr v-for="entry in historyEntries" :key="entry.id">
-							<td>{{ entry.von }}</td>
-							<td>{{ entry.bis }}</td>
-							<td>{{ entry.status_kurzbz }}</td>
-							<td>{{ entry.ort }}</td>
-						</tr>
-					</tbody>
-				</table>
-			</template>
-		</bs-modal>
+		<history-modal ref="historyModal" :entries="historyEntries" />
     <core-tag
         v-if="tagEndpoint && tagsAssignmentModal.calendar?.eindeutige_gruppen_id"
         ref="tagComponent"