diff --git a/public/js/plugin/FhcAlert.js b/public/js/plugin/FhcAlert.js
index 8ff45f717..6ff54061d 100644
--- a/public/js/plugin/FhcAlert.js
+++ b/public/js/plugin/FhcAlert.js
@@ -93,91 +93,12 @@
  * @return void
  */
 
-let toast_component = null;
-const toast_queue = [];
-
-function _add_to_toast(...args) {
-	toast_component.add.apply(toast_component, args);
-}
-let toast_add = function _add_to_toast_queue(...args) {
-	toast_queue.push(args);
-};
-
-let alert_component = null;
-const alert_queue = [];
-
-function _add_to_alert(...args) {
-	alert_component.add.apply(alert_component, args);
-}
-let alert_add = function _add_to_alert_queue(...args) {
-	alert_queue.push(args);
-};
-
-let confirm_component = null;
-const confirm_queue = [];
-
-function _require_confirm(...args) {
-	confirm_component.confirmListener.apply(confirm_component, args);
-}
-let confirm_require = function _add_to_confirm_queue(...args) {
-	confirm_queue.push(args);
-};
-
-
 const helperAppContainer = document.createElement('div');
 
 const helperApp = Vue.createApp({
-	setup() {
-		return self => {
-			return [
-				Vue.h(primevue.toast, {
-					ref: 'toast',
-					baseZIndex: 99999
-				}),
-				Vue.h(primevue.toast, {
-					ref: 'alert',
-					baseZIndex: 99999,
-					position: 'center',
-				}, {
-					message: slotProps => {
-						const messageCard = Vue.h('div', {
-							ref: 'messageCard',
-							id: 'collapseMessageCard',
-							class: 'collapse mt-3'
-						}, [
-							Vue.h('div', {class: 'card card-body text-body small', style: 'white-space: pre-wrap'}, slotProps.message.detail)
-						]);
-						return [
-							Vue.h('i', {class: 'fa fa-circle-exclamation fa-2xl mt-3'}),
-							Vue.h('div', {class: 'p-toast-message-text'}, [
-								Vue.h('span', {class: 'p-toast-summary'}, slotProps.message.summary),
-								Vue.h('div', {class: 'p-toast-detail my-3'}, 'Sorry! Ein interner technischer Fehler ist aufgetreten.'),
-								Vue.h('div', {class: 'd-flex justify-content-between align-items-center'}, [
-									Vue.h('a', {
-										class: 'align-bottom flex-fill me-2',
-										dataBsToggle: 'collapse',
-										href: '#collapseMessageCard',
-										role: 'button',
-										ariaExpanded: 'false',
-										ariaControls: 'collapseMessageCard',
-										onClick: () => { bootstrap.Collapse.getOrCreateInstance(messageCard.el).toggle(); }
-									}, 'Fehler anzeigen'),
-									Vue.h('a', {
-										class: 'btn btn-primary flex-fill',
-										target: '_blank',
-										href: self.mailToUrl(slotProps),
-									}, 'Fehler melden')
-								]),
-								messageCard,
-							]),
-						];
-					}
-				}),
-				Vue.h(primevue.confirmdialog, {
-					ref: 'confirm'
-				})
-			];
-		};
+	components: {
+		PvToast: primevue.toast,
+		PvConfirm: primevue.confirmdialog
 	},
 	methods: {
 		mailToUrl(slotProps) {
@@ -197,66 +118,83 @@ const helperApp = Vue.createApp({
 				Wir kümmern uns um eine rasche Behebung des Problems!`
 
 			return "mailto:" + mailTo + "?subject=" + subject + "&body=" + body;
+		},
+		openMessagecard() {
+			bootstrap.Collapse.getOrCreateInstance(this.$refs.messageCard).toggle();
 		}
 	},
-	mounted() {
-		toast_component = this.$refs.toast;
-		toast_add = _add_to_toast;
-		while (toast_queue.length)
-			_add_to_toast(toast_queue.unshift());
-
-		alert_component = this.$refs.alert;
-		alert_add = _add_to_alert;
-		while (alert_queue.length)
-			_add_to_alert(alert_queue.unshift());
-
-		confirm_component = this.$refs.confirm;
-		confirm_require = _require_confirm;
-		while (confirm_queue.length)
-			_require_confirm(confirm_queue.unshift());
-	},
-	beforeUnmount() {
-		toast_add = _add_to_toast_queue;
-		toast_component = null;
-
-		alert_add = _add_to_alert_queue;
-		alert_component = null;
-
-		confirm_require = _add_to_confirm_queue;
-		confirm_component = null;
-	},
 	unmounted() {
 		helperAppContainer.parentElement.removeChild(helperAppContainer);
-	}
+	},
+	template: `
+	<pv-toast ref="toast" base-z-index="99999"></pv-toast>
+	<pv-toast ref="alert" base-z-index="99999" position="center">
+		<template #message="slotProps">
+			<i class="fa fa-circle-exclamation fa-2xl mt-3"></i>
+			<div class="p-toast-message-text">
+				<span class="p-toast-summary">{{slotProps.message.summary}}</span>
+				<div class="p-toast-detail my-3">Sorry! Ein interner technischer Fehler ist aufgetreten.</div>
+				<div class="d-flex justify-content-between align-items-center">
+					<a
+						class="align-bottom flex-fill me-2"
+						data-bs-toggle="collapse"
+						href="#collapseMessageCard"
+						role="button"
+						aria-expanded="false"
+						aria-controls="collapseMessageCard"
+						@click="openMessagecard"
+						>
+						Fehler anzeigen
+					</a>
+					<a
+						class="btn btn-primary flex-fill"
+						target="_blank"
+						:href="mailToUrl(slotProps)"
+						>
+						Fehler melden
+					</a>
+				</div>
+				<div ref="messageCard" id="collapseMessageCard" class="collapse mt-3">
+					<div class="card card-body text-body small" style="white-space: pre-wrap">
+						{{slotProps.message.detail}}
+					</div>
+				</div>
+			</div>
+		</template>
+	</pv-toast>
+	<pv-confirm group="fhcAlertConfirm"></pv-confirm>`
 });
 
-helperApp
-	.use(primevue.config.default)
-	.mount(helperAppContainer);
+helperApp.use(primevue.config.default)
+helperApp.use(primevue.confirmationservice)
+
+const helperAppInstance = helperApp.mount(helperAppContainer);
 
 document.body.appendChild(helperAppContainer);
 
+
 export default {
 	install: (app, options) => {
 		const $fhcAlert = {
 			alertSuccess(message) {
-				toast_add({ severity: 'success', summary: 'Info', detail: message, life: 1000});
+				helperAppInstance.$refs.toast.add({ severity: 'success', summary: 'Info', detail: message, life: 1000});
 			},
 			alertInfo(message) {
-				toast_add({ severity: 'info', summary: 'Info', detail: message, life: 3000 });
+				helperAppInstance.$refs.toast.add({ severity: 'info', summary: 'Info', detail: message, life: 3000 });
 			},
 			alertWarning(message) {
-				toast_add({ severity: 'warn', summary: 'Achtung', detail: message});
+				helperAppInstance.$refs.toast.add({ severity: 'warn', summary: 'Achtung', detail: message});
 			},
 			alertError(message) {
-				toast_add({ severity: 'error', summary: 'Achtung', detail: message });
+				helperAppInstance.$refs.toast.add({ severity: 'error', summary: 'Achtung', detail: message });
 			},
 			alertSystemError(message) {
-				alert_add({ severity: 'error', summary: 'Systemfehler', detail: message});
+				helperAppInstance.$refs.alert.add({ severity: 'error', summary: 'Systemfehler', detail: message});
 			},
 			confirmDelete() {
 				return new Promise((resolve, reject) => {
-					confirm_require({
+					helperAppInstance.$confirm.require({
+						group: 'fhcAlertConfirm',
 						header: 'Achtung',
 						message: 'Möchten Sie sicher löschen?',
 						acceptLabel: 'Löschen',
@@ -278,7 +216,7 @@ export default {
 				if (!sticky)
 					options.life = 3000;
 
-				toast_add(options);
+				helperAppInstance.$refs.toast.add(options);
 			},
 			alertMultiple(messageArray, severity = 'info', title = 'Info', sticky = false){
 				// Check, if array has only string values