diff --git a/webclient/src/components/DetailsImageSlideshowModal.vue b/webclient/src/components/DetailsImageSlideshowModal.vue
index e23328c40..670b2925e 100644
--- a/webclient/src/components/DetailsImageSlideshowModal.vue
+++ b/webclient/src/components/DetailsImageSlideshowModal.vue
@@ -10,7 +10,7 @@ const appURL = import.meta.env.VITE_APP_URL;
 </script>
 
 <template>
-  <Modal v-if="state.data?.imgs" v-model:open="state.image.slideshow_open" :title="t('header')">
+  <Modal v-if="state.data?.imgs" v-model="state.image.slideshow_open" :title="t('header')">
     <div class="carousel">
       <template v-for="(_, i) in state.data.imgs" :key="i">
         <input
diff --git a/webclient/src/components/DetailsRoomfinderMap.vue b/webclient/src/components/DetailsRoomfinderMap.vue
index 058c8a28f..3e58f86cd 100644
--- a/webclient/src/components/DetailsRoomfinderMap.vue
+++ b/webclient/src/components/DetailsRoomfinderMap.vue
@@ -76,7 +76,7 @@ const modalOpen = ref(false);
       </div>
     </div>
 
-    <Modal v-model:open="modalOpen" :title="t('roomfinder.modal.header')" :classes="{ modal: 'items-baseline' }">
+    <Modal v-model="modalOpen" :title="t('roomfinder.modal.header')" :classes="{ modal: 'items-baseline' }">
       <RoomfinderImageLocation id="rf_modal_image" :map="state.selectedRoomfinderMap()" /> </Modal
   ></template>
 </template>
diff --git a/webclient/src/components/Modal.vue b/webclient/src/components/Modal.vue
index fd2fb02b2..783cd86d9 100644
--- a/webclient/src/components/Modal.vue
+++ b/webclient/src/components/Modal.vue
@@ -5,7 +5,6 @@ import { useI18n } from "vue-i18n";
 
 export interface Props {
   title: string;
-  open: boolean;
   disableClose?: boolean;
   classes?: {
     background?: string;
@@ -21,11 +20,12 @@ const props = withDefaults(defineProps<Props>(), {
     modal: "",
   }),
 });
-const emit = defineEmits(["close", "update:open"]);
+const emit = defineEmits(["close"]);
+const isOpen = defineModel<boolean>({ required: true });
 
 const { t } = useI18n({ useScope: "local" });
 watch(props, () => {
-  if (props.open) {
+  if (isOpen) {
     return document.querySelector("body")?.classList.add("overflow-hidden");
   } else {
     return document.querySelector("body")?.classList.remove("overflow-hidden");
@@ -45,7 +45,7 @@ onBeforeUnmount(() => document.querySelector("body")?.classList.remove("overflow
 function close() {
   document.querySelector("body")?.classList.remove("overflow-hidden");
   emit("close");
-  emit("update:open", false);
+  isOpen.value = false;
 }
 
 function closeIfShown() {
@@ -63,7 +63,7 @@ function closeIfShown() {
       leave-active-class="transition duration-75"
     >
       <div
-        v-if="props.open"
+        v-if="isOpen"
         class="bg-smoke-800 fixed inset-0 z-50 m-5 flex h-screen w-full items-center justify-center"
         :class="props.classes.background"
         @click.self="closeIfShown"
diff --git a/webclient/src/components/PreferencesPopup.vue b/webclient/src/components/PreferencesPopup.vue
index b5ccb5345..1e44581ef 100644
--- a/webclient/src/components/PreferencesPopup.vue
+++ b/webclient/src/components/PreferencesPopup.vue
@@ -56,11 +56,11 @@ function setLang(lang: string) {
         class="absolute -right-2 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
       >
         <MenuItem as="div" class="block px-4 py-2 text-xs font-semibold text-slate-500">
-          <SelectionSwitch v-model:selected="theme" label="Theme" :values="['dark', 'light']">
+          <SelectionSwitch v-model="theme" label="Theme" :values="['dark', 'light']">
             <template #option1><MoonIcon class="h-3 w-3" /></template>
             <template #option2><SunIcon class="h-3 w-3" /></template>
           </SelectionSwitch>
-          <SelectionSwitch v-model:selected="locale" label="Language" :values="['de', 'en']">
+          <SelectionSwitch v-model="locale" label="Language" :values="['de', 'en']">
             <template #option1>de</template>
             <template #option2>en</template>
           </SelectionSwitch>
diff --git a/webclient/src/components/SelectionSwitch.vue b/webclient/src/components/SelectionSwitch.vue
index 5adb876e0..3e1b09cfc 100644
--- a/webclient/src/components/SelectionSwitch.vue
+++ b/webclient/src/components/SelectionSwitch.vue
@@ -4,13 +4,12 @@ import { computed } from "vue";
 
 interface Props {
   label?: string;
-  selected: string;
   values: [string, string];
 }
-
 const props = withDefaults(defineProps<Props>(), { label: "" });
-const emit = defineEmits(["update:selected"]);
-const firstValueSelected = computed(() => props.selected === props.values[0]);
+const selected = defineModel<string>({ required: true });
+
+const firstValueSelected = computed(() => selected.value === props.values[0]);
 </script>
 
 <template>
@@ -20,7 +19,7 @@ const firstValueSelected = computed(() => props.selected === props.values[0]);
       <Switch
         class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent text-slate-400 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-tumBlue-500 focus:ring-offset-2"
         :class="[firstValueSelected ? 'bg-tumBlue-500' : 'bg-slate-200']"
-        @update:model-value="(value: boolean) => emit('update:selected', value ? props.values[0] : props.values[1])"
+        @update:model-value="(value: boolean) => (selected = props.values[value ? 0 : 1])"
       >
         <span class="sr-only">Use setting</span>
         <span
diff --git a/webclient/src/components/ShareButton.vue b/webclient/src/components/ShareButton.vue
index ca3cce253..4d2f07611 100644
--- a/webclient/src/components/ShareButton.vue
+++ b/webclient/src/components/ShareButton.vue
@@ -29,7 +29,7 @@ const shareOptions = computed<UseShareOptions>(() => ({
 
 <template>
   <a type="button" :title="t('external_link')" @click="modalOpen = true"><ShareIcon class="h-4 w-4" /></a>
-  <Modal v-model:open="modalOpen" :title="t('share')">
+  <Modal v-model="modalOpen" :title="t('share')">
     <div class="flex flex-col gap-5">
       <div class="flex flex-col gap-2">
         <strong>{{ t("open_in") }}</strong>
diff --git a/webclient/src/components/TinyModal.vue b/webclient/src/components/TinyModal.vue
index 6beb25236..085f6edf4 100644
--- a/webclient/src/components/TinyModal.vue
+++ b/webclient/src/components/TinyModal.vue
@@ -38,7 +38,7 @@ const modalOpen = ref(false);
     <a class="cursor-pointer" :aria-label="t('show_more_information')" @click="() => (modalOpen = true)">
       <slot name="icon" />
     </a>
-    <Modal v-model:open="modalOpen" :title="props.content.title">
+    <Modal v-model="modalOpen" :title="props.content.title">
       <p v-if="props.content.body">{{ props.content.body }}</p>
       <p v-if="props.content.footer">{{ props.content.footer }}</p>
     </Modal>
diff --git a/webclient/src/components/feedback/TokenBasedModal.vue b/webclient/src/components/feedback/TokenBasedModal.vue
index 2fb0a05c1..77499247c 100644
--- a/webclient/src/components/feedback/TokenBasedModal.vue
+++ b/webclient/src/components/feedback/TokenBasedModal.vue
@@ -102,7 +102,7 @@ function sendForm() {
 <template>
   <Modal
     v-if="!successUrl"
-    v-model:open="global.feedback.open"
+    v-model="global.feedback.open"
     data-cy="feedback-modal"
     :title="t('title')"
     @close="closeForm"
@@ -170,7 +170,7 @@ function sendForm() {
   </Modal>
   <Modal
     v-if="successUrl"
-    v-model:open="global.feedback.open"
+    v-model="global.feedback.open"
     data-cy="feedback-success-modal"
     :title="t('thank_you')"
     @close="closeForm"