diff --git a/package-lock.json b/package-lock.json
index 0ffb734..1715833 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1765,9 +1765,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "20.12.13",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.13.tgz",
-      "integrity": "sha512-gBGeanV41c1L171rR7wjbMiEpEI/l5XFQdLLfhr/REwpgDy/4U8y89+i8kRiLzDyZdOkXh+cRaTetUnCYutoXA==",
+      "version": "20.13.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.13.0.tgz",
+      "integrity": "sha512-FM6AOb3khNkNIXPnHFDYaHerSv8uN22C91z098AnGccVu+Pcdhi+pNUFDi0iLmPIsVE0JBD0KVS7mzUYt4nRzQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3401,9 +3401,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.787",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.787.tgz",
-      "integrity": "sha512-d0EFmtLPjctczO3LogReyM2pbBiiZbnsKnGF+cdZhsYzHm/A0GV7W94kqzLD8SN4O3f3iHlgLUChqghgyznvCQ==",
+      "version": "1.4.788",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.788.tgz",
+      "integrity": "sha512-ubp5+Ev/VV8KuRoWnfP2QF2Bg+O2ZFdb49DiiNbz2VmgkIqrnyYaqIOqj8A6K/3p1xV0QcU5hBQ1+BmB6ot1OA==",
       "dev": true,
       "license": "ISC"
     },
@@ -6845,9 +6845,9 @@
       "license": "MIT"
     },
     "node_modules/vue-eslint-parser": {
-      "version": "9.4.2",
-      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.2.tgz",
-      "integrity": "sha512-Ry9oiGmCAK91HrKMtCrKFWmSFWvYkpGglCeFAIqDdr9zdXmMMpJOmUJS7WWsW7fX81h6mwHmUZCQQ1E0PkSwYQ==",
+      "version": "9.4.3",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz",
+      "integrity": "sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/src/components/World.vue b/src/components/World.vue
index 17e1056..304dd6d 100644
--- a/src/components/World.vue
+++ b/src/components/World.vue
@@ -3,13 +3,13 @@
   <Controls :layer="layer" />
   <Player :layer="layer" />
   <Container v-if="zoneStore.isLoaded && zoneStore.getPlayers.length > 0">
-    <Player :layer="layer" v-for="player in zoneStore.getPlayers" :key="player.id" :player="player" />
+    <Character :layer="layer" v-for="player in zoneStore.getPlayers" :key="player.id" :player="player" />
   </Container>
 </template>
 
 <script setup lang="ts">
 import { Container, refObj, TilemapLayer, useScene } from 'phavuer'
-import Player from '@/components/sprites/player/Player.vue'
+import Character from '@/components/sprites/Character.vue'
 import config from '@/config'
 import { onBeforeMount, onMounted, reactive, ref, type Ref, toRaw, watch } from 'vue'
 import Tileset = Phaser.Tilemaps.Tileset
diff --git a/src/components/sprites/player/Player.vue b/src/components/sprites/Character.vue
similarity index 82%
rename from src/components/sprites/player/Player.vue
rename to src/components/sprites/Character.vue
index 46f3044..428a210 100644
--- a/src/components/sprites/player/Player.vue
+++ b/src/components/sprites/Character.vue
@@ -1,9 +1,22 @@
 <template>
-  <Sprite ref="sprite" texture="player" :x="position.x" :y="position.y" />
+
+  <Container>
+    <Text
+      :text="'Hello world'"
+      :style="{
+        fontFamily: 'Helvetica, Arial',
+        color: '#42B883',
+        fontSize: '26px',
+        fontStyle: 'bold',
+        strokeThickness: 8,
+        stroke: '#213547'
+      }" />
+    <Sprite ref="sprite" texture="player" :x="position.x" :y="position.y" />
+  </Container>
 </template>
 
 <script lang="ts" setup>
-import { onPostUpdate, onPreUpdate, Sprite, useScene } from 'phavuer'
+import { Container, onPostUpdate, onPreUpdate, Sprite, Text, useScene } from 'phavuer'
 import { reactive, type Ref, ref } from 'vue'
 import config from '@/config'
 import { useSocketStore } from '@/stores/socket'
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index 2aa21f9..b53b002 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineEmits, onMounted, onUnmounted, ref } from 'vue'
+import { defineEmits, onMounted, onUnmounted, ref, watch } from 'vue'
 
 const properties = defineProps({
   isModalOpen: {
@@ -22,6 +22,10 @@ const properties = defineProps({
   }
 });
 
+watch(() => properties.isModalOpen, (value) => {
+  isModalOpen.value = value;
+});
+
 const isModalOpen = ref(properties.isModalOpen);
 const emit = defineEmits(["modal:close", "character:create"]);