diff --git a/client/components/forms/components/VSwitch.vue b/client/components/forms/components/VSwitch.vue
index 719aef8..28d2945 100644
--- a/client/components/forms/components/VSwitch.vue
+++ b/client/components/forms/components/VSwitch.vue
@@ -1,7 +1,7 @@
 <template>
-  <div role="button" @click="onClick">
-    <div class="inline-flex items-center h-6 w-12 p-1 bg-gray-300 border rounded-full cursor-pointer focus:outline-none transition-all transform ease-in-out duration-100" :class="{'bg-nt-blue': modelValue}">
-      <div class="inline-block h-4 w-4 rounded-full bg-white shadow transition-all transform ease-in-out duration-150 rounded-2xl scale-100" :class="{'translate-x-5.5': modelValue}" />
+  <div role="button" @click.stop="onClick">
+    <div class="inline-flex items-center h-6 w-12 p-1 bg-gray-300 border rounded-full cursor-pointer focus:outline-none transition-all transform ease-in-out duration-100" :class="{'bg-nt-blue': props.modelValue}">
+      <div class="inline-block h-4 w-4 rounded-full bg-white shadow transition-all transform ease-in-out duration-150 rounded-2xl scale-100" :class="{'translate-x-5.5': props.modelValue}" />
     </div>
   </div>
 </template>
@@ -9,14 +9,14 @@
 <script setup>
 import { defineProps, defineEmits } from 'vue'
 
-const { modelValue, disabled } = defineProps({
+const props = defineProps({
   modelValue: { type: Boolean, default: false },
   disabled: { type: Boolean, default: false }
 })
 const emits = defineEmits(['update:modelValue'])
 
 const onClick = () => {
-  if (disabled) return
-  emits('update:modelValue', !modelValue)
+  if (props.disabled) return
+  emits('update:modelValue', !props.modelValue)
 }
 </script>