diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index a9a287a..6ef0ed4 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -18,7 +18,7 @@
   </div>
 </div>
 
-<Modal :isModalOpen="isModalOpen">
+<Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false">
   <template #modal-header>
     <h2 class="modal-title">Create your character</h2>
   </template>
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index b53b002..5c6198a 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -1,6 +1,6 @@
 <template>
-  <Teleport to="body" v-if="isModalOpen">
-  <div class="modal-container" :style="{ top: y + 'px', left: x + 'px' }">
+  <Teleport to="body">
+  <div class="modal-container" :style="{ top: y + 'px', left: x + 'px' }" v-if="isModalOpenRef">
     <div class="modal-header" @mousedown="startDrag">
       <slot name="modal-header"/>
       <button @click="close"><img src="/assets/icons/close-button-white.svg"></button>
@@ -23,10 +23,10 @@ const properties = defineProps({
 });
 
 watch(() => properties.isModalOpen, (value) => {
-  isModalOpen.value = value;
+  isModalOpenRef.value = value;
 });
 
-const isModalOpen = ref(properties.isModalOpen);
+const isModalOpenRef = ref(properties.isModalOpen);
 const emit = defineEmits(["modal:close", "character:create"]);
 
 function close () {