diff --git a/package-lock.json b/package-lock.json
index 87e2589..f3b4a1c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1256,9 +1256,9 @@
       }
     },
     "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2171,9 +2171,9 @@
       }
     },
     "node_modules/@vue/devtools-api": {
-      "version": "6.6.3",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.3.tgz",
-      "integrity": "sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==",
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
       "license": "MIT"
     },
     "node_modules/@vue/devtools-core": {
@@ -2873,9 +2873,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001658",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001658.tgz",
-      "integrity": "sha512-N2YVqWbJELVdrnsW5p+apoQyYt51aBMSsBZki1XZEfeBCexcM/sf4xiAHcXQBkuOwJBXtWF7aW1sYX6tKebPHw==",
+      "version": "1.0.30001660",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001660.tgz",
+      "integrity": "sha512-GacvNTTuATm26qC74pt+ad1fW15mlQ/zuTzzY1ZoIzECTP8HURDfF43kNxPgf7H1jmelCBQTTbBNxdSXOA7Bqg==",
       "dev": true,
       "funding": [
         {
@@ -6333,9 +6333,9 @@
       "license": "MIT"
     },
     "node_modules/string-width/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -6612,9 +6612,9 @@
       }
     },
     "node_modules/tinyspy": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.0.tgz",
-      "integrity": "sha512-q5nmENpTHgiPVd1cJDDc9cVoYN5x4vCvwT3FMilvKPKneCBZAxn2YWQjDF0UMcE9k0Cay1gBiDfTMU0g+mPMQA==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.2.tgz",
+      "integrity": "sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -7333,9 +7333,9 @@
       }
     },
     "node_modules/wrap-ansi/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
       "dev": true,
       "license": "MIT",
       "engines": {
diff --git a/src/components/forms/ChipsInput.vue b/src/components/forms/ChipsInput.vue
index fd48ba7..61f435c 100644
--- a/src/components/forms/ChipsInput.vue
+++ b/src/components/forms/ChipsInput.vue
@@ -2,22 +2,9 @@
   <div class="flex flex-wrap items-center input-cyan gap-1">
     <div v-for="(chip, i) in internalValue" :key="i" class="flex gap-2.5 items-center bg-cyan rounded py-1 px-2">
       <span class="text-xs">{{ chip }}</span>
-      <button
-        type="button"
-        class="text-xs cursor-pointer text-white font-light font-default not-italic hover:text-gray-50"
-        @click="deleteChip(i)"
-        aria-label="Remove chip"
-      >
-        ×
-      </button>
+      <button type="button" class="text-xs cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)" aria-label="Remove chip">×</button>
     </div>
-    <input
-      class="outline-none border-none p-1"
-      placeholder="Tag name"
-      v-model="currentInput"
-      @keypress.enter.prevent="addChip"
-      @keydown.backspace="handleBackspace"
-    />
+    <input class="outline-none border-none p-1" placeholder="Tag name" v-model="currentInput" @keypress.enter.prevent="addChip" @keydown.backspace="handleBackspace" />
   </div>
 </template>
 
@@ -41,9 +28,13 @@ const currentInput: Ref<string> = ref('')
 const internalValue = ref<string[]>([])
 
 // Initialize internalValue with props.modelValue
-watch(() => props.modelValue, (newValue) => {
-  internalValue.value = newValue ? [...newValue] : []
-}, { immediate: true })
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    internalValue.value = newValue ? [...newValue] : []
+  },
+  { immediate: true }
+)
 
 const addChip = () => {
   const trimmedInput = currentInput.value.trim()
@@ -65,4 +56,4 @@ const handleBackspace = (event: KeyboardEvent) => {
     emit('update:modelValue', internalValue.value)
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/gameMaster/zoneEditor/ZoneEditor.vue b/src/components/gameMaster/zoneEditor/ZoneEditor.vue
index 507d586..c2196a2 100644
--- a/src/components/gameMaster/zoneEditor/ZoneEditor.vue
+++ b/src/components/gameMaster/zoneEditor/ZoneEditor.vue
@@ -231,32 +231,36 @@ onBeforeUnmount(() => {
 })
 
 // watch zoneEditorStore.objectList and update originX and originY of objects in zoneObjects
-watch(objectList, (newObjects) => {
-  zoneObjects.value = zoneObjects.value.map(zoneObject => {
-    const updatedObject = newObjects.find(obj => obj.id === zoneObject.objectId);
-    if (updatedObject) {
-      return {
-        ...zoneObject,
-        object: {
-          ...zoneObject.object,
+watch(
+  objectList,
+  (newObjects) => {
+    zoneObjects.value = zoneObjects.value.map((zoneObject) => {
+      const updatedObject = newObjects.find((obj) => obj.id === zoneObject.objectId)
+      if (updatedObject) {
+        return {
+          ...zoneObject,
+          object: {
+            ...zoneObject.object,
+            originX: updatedObject.originX,
+            originY: updatedObject.originY
+          }
+        }
+      }
+      return zoneObject
+    })
+
+    // Update selectedObject if it exists
+    if (zoneEditorStore.selectedObject) {
+      const updatedObject = newObjects.find((obj) => obj.id === zoneEditorStore.selectedObject?.id)
+      if (updatedObject) {
+        zoneEditorStore.setSelectedObject({
+          ...zoneEditorStore.selectedObject,
           originX: updatedObject.originX,
           originY: updatedObject.originY
-        }
-      };
+        })
+      }
     }
-    return zoneObject;
-  });
-
-  // Update selectedObject if it exists
-  if (zoneEditorStore.selectedObject) {
-    const updatedObject = newObjects.find(obj => obj.id === zoneEditorStore.selectedObject?.id);
-    if (updatedObject) {
-      zoneEditorStore.setSelectedObject({
-        ...zoneEditorStore.selectedObject,
-        originX: updatedObject.originX,
-        originY: updatedObject.originY
-      });
-    }
-  }
-}, { deep: true })
+  },
+  { deep: true }
+)
 </script>
diff --git a/src/components/gui/Chat.vue b/src/components/gui/Chat.vue
index 1698e1e..bb65ee1 100644
--- a/src/components/gui/Chat.vue
+++ b/src/components/gui/Chat.vue
@@ -33,7 +33,7 @@ const chatWindow = ref<HTMLElement | null>(null)
 
 const sendMessage = () => {
   if (!message.value.trim()) return
-  gameStore.connection?.emit('chat:send_message', { message: message.value }, (response: boolean) => {});
+  gameStore.connection?.emit('chat:send_message', { message: message.value }, (response: boolean) => {})
   message.value = ''
 }
 
diff --git a/src/components/gui/UserPanel.vue b/src/components/gui/UserPanel.vue
index 1e70f24..2a32f5f 100644
--- a/src/components/gui/UserPanel.vue
+++ b/src/components/gui/UserPanel.vue
@@ -4,10 +4,10 @@
       <div class="p-2.5 flex max-sm:flex-wrap justify-between items-center gap-5 border-solid border-0 border-b border-cyan-200">
         <h3 class="m-0 font-medium shrink-0">Game menu</h3>
         <div class="hidden sm:flex gap-1.5 flex-wrap">
-          <button @click.stop="userPanelScreen = 'inventory'" :class="{ 'active': userPanelScreen === 'inventory' }" class="btn-cyan py-1.5 px-4 min-w-24">Inventory</button>
-          <button @click.stop="userPanelScreen = 'equipment'" :class="{ 'active': userPanelScreen === 'equipment' }" class="btn-cyan py-1.5 px-4 min-w-24">Equipment</button>
-          <button @click.stop="userPanelScreen = 'characterScreen'" :class="{ 'active': userPanelScreen === 'characterScreen' }" class="btn-cyan py-1.5 px-4 min-w-24">Character</button>
-          <button @click.stop="userPanelScreen = 'settings'" :class="{ 'active': userPanelScreen === 'settings' }" class="btn-cyan py-1.5 px-4 min-w-24">Settings</button>
+          <button @click.stop="userPanelScreen = 'inventory'" :class="{ active: userPanelScreen === 'inventory' }" class="btn-cyan py-1.5 px-4 min-w-24">Inventory</button>
+          <button @click.stop="userPanelScreen = 'equipment'" :class="{ active: userPanelScreen === 'equipment' }" class="btn-cyan py-1.5 px-4 min-w-24">Equipment</button>
+          <button @click.stop="userPanelScreen = 'characterScreen'" :class="{ active: userPanelScreen === 'characterScreen' }" class="btn-cyan py-1.5 px-4 min-w-24">Character</button>
+          <button @click.stop="userPanelScreen = 'settings'" :class="{ active: userPanelScreen === 'settings' }" class="btn-cyan py-1.5 px-4 min-w-24">Settings</button>
         </div>
         <div class="flex gap-2.5">
           <button class="w-5 h-5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out" @click="gameStore.toggleUserPanel">
@@ -15,10 +15,10 @@
           </button>
         </div>
         <div class="flex sm:hidden gap-1.5 flex-wrap">
-          <button @click.stop="userPanelScreen = 'inventory'" :class="{ 'active': userPanelScreen === 'inventory' }" class="btn-cyan py-1.5 px-4 min-w-24">Inventory</button>
-          <button @click.stop="userPanelScreen = 'equipment'" :class="{ 'active': userPanelScreen === 'equipment' }" class="btn-cyan py-1.5 px-4 min-w-24">Equipment</button>
-          <button @click.stop="userPanelScreen = 'characterScreen'" :class="{ 'active': userPanelScreen === 'characterScreen' }" class="btn-cyan py-1.5 px-4 min-w-24">Character</button>
-          <button @click.stop="userPanelScreen = 'settings'" :class="{ 'active': userPanelScreen === 'settings' }" class="btn-cyan py-1.5 px-4 min-w-24">Settings</button>
+          <button @click.stop="userPanelScreen = 'inventory'" :class="{ active: userPanelScreen === 'inventory' }" class="btn-cyan py-1.5 px-4 min-w-24">Inventory</button>
+          <button @click.stop="userPanelScreen = 'equipment'" :class="{ active: userPanelScreen === 'equipment' }" class="btn-cyan py-1.5 px-4 min-w-24">Equipment</button>
+          <button @click.stop="userPanelScreen = 'characterScreen'" :class="{ active: userPanelScreen === 'characterScreen' }" class="btn-cyan py-1.5 px-4 min-w-24">Character</button>
+          <button @click.stop="userPanelScreen = 'settings'" :class="{ active: userPanelScreen === 'settings' }" class="btn-cyan py-1.5 px-4 min-w-24">Settings</button>
         </div>
       </div>
       <Inventory v-show="userPanelScreen === 'inventory'" />
@@ -30,14 +30,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { useGameStore } from '@/stores/game';
-import Inventory from '@/components/gui/partials/Inventory.vue';
-import Equipment from '@/components/gui/partials/Equipment.vue';
-import CharacterScreen from '@/components/gui/partials/CharacterScreen.vue';
-import Settings from '@/components/gui/partials/Settings.vue';
+import { ref } from 'vue'
+import { useGameStore } from '@/stores/game'
+import Inventory from '@/components/gui/partials/Inventory.vue'
+import Equipment from '@/components/gui/partials/Equipment.vue'
+import CharacterScreen from '@/components/gui/partials/CharacterScreen.vue'
+import Settings from '@/components/gui/partials/Settings.vue'
 
 const gameStore = useGameStore()
 let userPanelScreen = ref('inventory')
-
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/gui/partials/CharacterScreen.vue b/src/components/gui/partials/CharacterScreen.vue
index d8778d5..37963bb 100644
--- a/src/components/gui/partials/CharacterScreen.vue
+++ b/src/components/gui/partials/CharacterScreen.vue
@@ -1,69 +1,68 @@
 <template>
-    <div class="grow flex flex-col w-full h-full relative overflow-auto">
-        <div class="m-4 relative">
-            <h4 class="font-medium text-lg max-w-[375px]">Character</h4>
-            <div class="flex justify-center flex-wrap gap-20">
-                <div class="flex gap-3 mt-2 flex-wrap max-w-[375px]">
-                    <div class="h-full flex flex-col justify-center items-center">
-                        <img class="h-72 my-2 mx-auto" src="/assets/placeholders/inventory_player.png" />
-                    </div>
-                </div>
-                <div class="flex flex-col gap-4">
-                    <div class="flex flex-col gap-3 mx-5 mt-2">
-                        <h3>{{ gameStore.character?.name }}</h3>
-                        <div class="flex gap-4 flex-wrap max-w-[375px]">
-                            <ul class="p-0 m-0 list-none">
-                                <li class="leading-6 text-lg">Class:</li>
-                                <li class="leading-6 text-lg">Race:</li>
-                                <li class="leading-6 text-lg">Hit Points:</li>
-                                <li class="leading-6 text-lg">Mana Points:</li>
-                                <li class="leading-6 text-lg">Level:</li>
-                                <li class="leading-6 text-lg">Stat Points:</li>
-                            </ul>
-                            <ul class="p-0 m-0 list-none">
-                                <li class="leading-6 text-lg min-h-6">Knight</li>
-                                <li class="leading-6 text-lg min-h-6">{{ gameStore.character?.characterType?.race }}</li>
-                                <li class="leading-6 text-lg min-h-6">{{ gameStore.character?.hitpoints }} <span class="text-green">(+15)</span></li>
-                                <li class="leading-6 text-lg min-h-6">{{ gameStore.character?.mana }}</li>
-                                <li class="leading-6 text-lg min-h-6">{{ gameStore.character?.level }}</li>
-                                <li class="leading-6 text-lg min-h-6">3</li>
-                            </ul>
-                        </div>
-                    </div>
-                    <div class="flex flex-col gap-3 mx-5 mt-2">
-                        <h3>Alignment</h3>
-                        <div class="h-8 w-64 rounded border border-solid border-white bg-gradient-to-r from-red to-blue relative">
-                            <!-- TODO: Give slider left value based on alignment (0-100), new characters start with 50 -->
-                            <div class="rounded border-2 border-solid border-white h-10 w-2 absolute top-1/2 -translate-y-1/2 -translate-x-1/2" :style="{ left: gameStore.character?.alignment + '%'}"></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-cyan-200"></div>
+  <div class="grow flex flex-col w-full h-full relative overflow-auto">
+    <div class="m-4 relative">
+      <h4 class="font-medium text-lg max-w-[375px]">Character</h4>
+      <div class="flex justify-center flex-wrap gap-20">
+        <div class="flex gap-3 mt-2 flex-wrap max-w-[375px]">
+          <div class="h-full flex flex-col justify-center items-center">
+            <img class="h-72 my-2 mx-auto" src="/assets/placeholders/inventory_player.png" />
+          </div>
         </div>
-        <div class="m-4">
-            <h4 class="font-medium text-lg max-w-[375px]">Character stats</h4>
-            <div class="flex gap-3 mt-4 flex-wrap max-w-[375px]">
-                <ul class="p-0 m-0 list-none">
-                    <li class="leading-6">Health:</li>
-                    <li class="leading-6">Defense:</li>
-                    <li class="leading-6">More stats:</li>
-                    <li class="leading-6">Extra stats:</li>
-                </ul>
-                <ul class="p-0 m-0 list-none text-right">
-                    <li class="leading-6">100 <span class="text-green">(+15)</span></li>
-                    <li class="leading-6">1000 <span class="text-green">(+500)</span></li>
-                    <li class="leading-6"></li>
-                    <li class="leading-6"></li>
-                </ul>
+        <div class="flex flex-col gap-4">
+          <div class="flex flex-col gap-3 mx-5 mt-2">
+            <h3>{{ gameStore.character?.name }}</h3>
+            <div class="flex gap-4 flex-wrap max-w-[375px]">
+              <ul class="p-0 m-0 list-none">
+                <li class="leading-6 text-lg">Class:</li>
+                <li class="leading-6 text-lg">Race:</li>
+                <li class="leading-6 text-lg">Hit Points:</li>
+                <li class="leading-6 text-lg">Mana Points:</li>
+                <li class="leading-6 text-lg">Level:</li>
+                <li class="leading-6 text-lg">Stat Points:</li>
+              </ul>
+              <ul class="p-0 m-0 list-none">
+                <li class="leading-6 text-lg min-h-6">Knight</li>
+                <li class="leading-6 text-lg min-h-6">{{ gameStore.character?.characterType?.race }}</li>
+                <li class="leading-6 text-lg min-h-6">{{ gameStore.character?.hitpoints }} <span class="text-green">(+15)</span></li>
+                <li class="leading-6 text-lg min-h-6">{{ gameStore.character?.mana }}</li>
+                <li class="leading-6 text-lg min-h-6">{{ gameStore.character?.level }}</li>
+                <li class="leading-6 text-lg min-h-6">3</li>
+              </ul>
             </div>
+          </div>
+          <div class="flex flex-col gap-3 mx-5 mt-2">
+            <h3>Alignment</h3>
+            <div class="h-8 w-64 rounded border border-solid border-white bg-gradient-to-r from-red to-blue relative">
+              <!-- TODO: Give slider left value based on alignment (0-100), new characters start with 50 -->
+              <div class="rounded border-2 border-solid border-white h-10 w-2 absolute top-1/2 -translate-y-1/2 -translate-x-1/2" :style="{ left: gameStore.character?.alignment + '%' }"></div>
+            </div>
+          </div>
         </div>
+      </div>
+      <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-cyan-200"></div>
     </div>
+    <div class="m-4">
+      <h4 class="font-medium text-lg max-w-[375px]">Character stats</h4>
+      <div class="flex gap-3 mt-4 flex-wrap max-w-[375px]">
+        <ul class="p-0 m-0 list-none">
+          <li class="leading-6">Health:</li>
+          <li class="leading-6">Defense:</li>
+          <li class="leading-6">More stats:</li>
+          <li class="leading-6">Extra stats:</li>
+        </ul>
+        <ul class="p-0 m-0 list-none text-right">
+          <li class="leading-6">100 <span class="text-green">(+15)</span></li>
+          <li class="leading-6">1000 <span class="text-green">(+500)</span></li>
+          <li class="leading-6"></li>
+          <li class="leading-6"></li>
+        </ul>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { useGameStore } from '@/stores/game'
 
 const gameStore = useGameStore()
-
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/gui/partials/Equipment.vue b/src/components/gui/partials/Equipment.vue
index 90032e0..8110c18 100644
--- a/src/components/gui/partials/Equipment.vue
+++ b/src/components/gui/partials/Equipment.vue
@@ -1,90 +1,89 @@
 <template>
-    <div class="grow flex flex-col w-full h-full relative overflow-auto">
-        <div class="m-4 relative">
-            <h4 class="font-medium text-lg max-w-[375px]">Equipment</h4>
-            <div class="flex justify-center items-center flex-wrap gap-20">
-                <div class="flex gap-3 mt-2 flex-wrap max-w-[375px]">
-                    <div class="h-full flex flex-col justify-center items-center">
-                        <h3>{{ gameStore.character?.name }}</h3>
-                        <img class="h-60 my-2 mx-auto" src="/assets/placeholders/inventory_player.png" />
-                        <span class="block text-sm">Level {{ gameStore.character?.level }}</span>
-                    </div>
-                </div>
-                <div class="flex flex-col gap-3 mx-5 mt-2">
-                    <div class="flex gap-3 justify-center">
-                        <!-- Helmet -->
-                        <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
-                            <img src="/assets/icons/inventory/helmet.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
-                        </div>
-
-                        <!-- Head charm -->
-                        <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
-                            <img src="/assets/icons/inventory/head_charm.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
-                        </div>
-                    </div>
-
-                    <div class="flex gap-3 justify-center">
-                        <!-- Bracers -->
-                        <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] relative hover:bg-gray-200">
-                            <img src="/assets/icons/inventory/bracers.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
-                        </div>
-
-                        <!-- Chestplate -->
-                        <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square w-[104px] h-[104px] relative hover:bg-gray-200">
-                            <img src="/assets/icons/inventory/chestplate.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-10/12 opacity-20" />
-                        </div>
-
-                        <!-- Primary Weapon -->
-                        <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
-                            <img src="/assets/icons/inventory/primary_weapon.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
-                        </div>
-                    </div>
-
-                    <div class="flex gap-3 justify-center">
-                        <!-- Legs -->
-                        <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
-                            <img src="/assets/icons/inventory/legs.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
-                        </div>
-
-                        <div class="flex flex-col gap-3">
-                            <!-- Belt/pouch -->
-                            <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
-                                <img src="/assets/icons/inventory/pouch.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
-                            </div>
-
-                            <!-- Boots -->
-                            <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
-                                <img src="/assets/icons/inventory/boots.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-cyan-200"></div>
+  <div class="grow flex flex-col w-full h-full relative overflow-auto">
+    <div class="m-4 relative">
+      <h4 class="font-medium text-lg max-w-[375px]">Equipment</h4>
+      <div class="flex justify-center items-center flex-wrap gap-20">
+        <div class="flex gap-3 mt-2 flex-wrap max-w-[375px]">
+          <div class="h-full flex flex-col justify-center items-center">
+            <h3>{{ gameStore.character?.name }}</h3>
+            <img class="h-60 my-2 mx-auto" src="/assets/placeholders/inventory_player.png" />
+            <span class="block text-sm">Level {{ gameStore.character?.level }}</span>
+          </div>
         </div>
-        <div class="m-4">
-            <h4 class="font-medium text-lg max-w-[375px]">Equipment Bonus</h4>
-            <div class="flex gap-3 mt-4 flex-wrap max-w-[375px]">
-                <ul class="p-0 m-0 list-none">
-                    <li class="leading-6">Health:</li>
-                    <li class="leading-6">Defense:</li>
-                    <li class="leading-6">More stats:</li>
-                    <li class="leading-6">Extra stats:</li>
-                </ul>
-                <ul class="p-0 m-0 list-none text-right">
-                    <li class="leading-6">+15</li>
-                    <li class="leading-6">500</li>
-                    <li class="leading-6"></li>
-                    <li class="leading-6"></li>
-                </ul>
+        <div class="flex flex-col gap-3 mx-5 mt-2">
+          <div class="flex gap-3 justify-center">
+            <!-- Helmet -->
+            <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
+              <img src="/assets/icons/inventory/helmet.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
             </div>
+
+            <!-- Head charm -->
+            <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
+              <img src="/assets/icons/inventory/head_charm.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
+            </div>
+          </div>
+
+          <div class="flex gap-3 justify-center">
+            <!-- Bracers -->
+            <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] relative hover:bg-gray-200">
+              <img src="/assets/icons/inventory/bracers.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
+            </div>
+
+            <!-- Chestplate -->
+            <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square w-[104px] h-[104px] relative hover:bg-gray-200">
+              <img src="/assets/icons/inventory/chestplate.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-10/12 opacity-20" />
+            </div>
+
+            <!-- Primary Weapon -->
+            <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
+              <img src="/assets/icons/inventory/primary_weapon.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
+            </div>
+          </div>
+
+          <div class="flex gap-3 justify-center">
+            <!-- Legs -->
+            <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
+              <img src="/assets/icons/inventory/legs.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
+            </div>
+
+            <div class="flex flex-col gap-3">
+              <!-- Belt/pouch -->
+              <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
+                <img src="/assets/icons/inventory/pouch.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
+              </div>
+
+              <!-- Boots -->
+              <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
+                <img src="/assets/icons/inventory/boots.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
+              </div>
+            </div>
+          </div>
         </div>
+      </div>
+      <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-cyan-200"></div>
     </div>
+    <div class="m-4">
+      <h4 class="font-medium text-lg max-w-[375px]">Equipment Bonus</h4>
+      <div class="flex gap-3 mt-4 flex-wrap max-w-[375px]">
+        <ul class="p-0 m-0 list-none">
+          <li class="leading-6">Health:</li>
+          <li class="leading-6">Defense:</li>
+          <li class="leading-6">More stats:</li>
+          <li class="leading-6">Extra stats:</li>
+        </ul>
+        <ul class="p-0 m-0 list-none text-right">
+          <li class="leading-6">+15</li>
+          <li class="leading-6">500</li>
+          <li class="leading-6"></li>
+          <li class="leading-6"></li>
+        </ul>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { useGameStore } from '@/stores/game'
 
 const gameStore = useGameStore()
-
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/gui/partials/Inventory.vue b/src/components/gui/partials/Inventory.vue
index 21a809c..30c28c7 100644
--- a/src/components/gui/partials/Inventory.vue
+++ b/src/components/gui/partials/Inventory.vue
@@ -1,17 +1,17 @@
 <template>
-    <div class="grow flex flex-col w-full h-full relative overflow-auto">
-        <div class="m-4 relative">
-        <h4 class="m-auto font-medium text-lg max-w-[375px]">Inventory</h4>
-        <div class="flex gap-3 mt-4 mx-auto flex-wrap max-w-[375px]">
-            <div v-for="n in 24" class="bg-gray-300/80 border-solid border-2 border-cyan-200 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
-        </div>
-        <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-cyan-200"></div>
-        </div>
-        <div class="m-4">
-        <h4 class="m-auto font-medium text-lg max-w-[375px]">Chest items</h4>
-        <div class="flex gap-3 mt-4 mx-auto flex-wrap max-w-[375px]">
-            <div v-for="n in 12" class="bg-gray-300/80 border-solid border-2 border-cyan-200 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
-        </div>
-        </div>
+  <div class="grow flex flex-col w-full h-full relative overflow-auto">
+    <div class="m-4 relative">
+      <h4 class="m-auto font-medium text-lg max-w-[375px]">Inventory</h4>
+      <div class="flex gap-3 mt-4 mx-auto flex-wrap max-w-[375px]">
+        <div v-for="n in 24" class="bg-gray-300/80 border-solid border-2 border-cyan-200 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
+      </div>
+      <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-cyan-200"></div>
     </div>
-</template>
\ No newline at end of file
+    <div class="m-4">
+      <h4 class="m-auto font-medium text-lg max-w-[375px]">Chest items</h4>
+      <div class="flex gap-3 mt-4 mx-auto flex-wrap max-w-[375px]">
+        <div v-for="n in 12" class="bg-gray-300/80 border-solid border-2 border-cyan-200 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/gui/partials/Settings.vue b/src/components/gui/partials/Settings.vue
index 564c20c..500e884 100644
--- a/src/components/gui/partials/Settings.vue
+++ b/src/components/gui/partials/Settings.vue
@@ -1,40 +1,40 @@
 <template>
-    <div class="flex h-full w-full relative">
-        <div class="w-2/12 flex flex-col relative">
-            <!-- Settings Categories -->
-            <div class="relative p-2.5">
-                <h3>Settings</h3>
-                <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
-            </div>
-            <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'character' }" @click.stop="settingCategory = 'character'">
-                <span>Character</span>
-                <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
-            </a>
-            <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'account' }" @click.stop="settingCategory = 'account'">
-                <span>Account</span>
-                <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
-            </a>
-            <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'audio' }" @click.stop="settingCategory = 'audio'">
-                <span>Audio</span>
-                <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
-            </a>
-            <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'video' }" @click.stop="settingCategory = 'video'">
-                <span>Video</span>
-                <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
-            </a>
-        </div>
-        <div class="absolute w-px bg-cyan-200 h-full top-0 left-1/6"></div>
-
-        <!-- Assets list -->
-        <div class="overflow-auto h-full w-10/12 flex flex-col relative">
-            <CharacterSettings v-show="settingCategory == 'character'" />
-        </div>
+  <div class="flex h-full w-full relative">
+    <div class="w-2/12 flex flex-col relative">
+      <!-- Settings Categories -->
+      <div class="relative p-2.5">
+        <h3>Settings</h3>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+      </div>
+      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'character' }" @click.stop="settingCategory = 'character'">
+        <span>Character</span>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+      </a>
+      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'account' }" @click.stop="settingCategory = 'account'">
+        <span>Account</span>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+      </a>
+      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'audio' }" @click.stop="settingCategory = 'audio'">
+        <span>Audio</span>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+      </a>
+      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'video' }" @click.stop="settingCategory = 'video'">
+        <span>Video</span>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+      </a>
     </div>
+    <div class="absolute w-px bg-cyan-200 h-full top-0 left-1/6"></div>
+
+    <!-- Assets list -->
+    <div class="overflow-auto h-full w-10/12 flex flex-col relative">
+      <CharacterSettings v-show="settingCategory == 'character'" />
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref } from 'vue'
 import CharacterSettings from '@/components/gui/partials/settings/CharacterSettings.vue'
 
 let settingCategory = ref('character')
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/gui/partials/settings/CharacterSettings.vue b/src/components/gui/partials/settings/CharacterSettings.vue
index bca082a..13ff820 100644
--- a/src/components/gui/partials/settings/CharacterSettings.vue
+++ b/src/components/gui/partials/settings/CharacterSettings.vue
@@ -1,25 +1,25 @@
 <template>
-    <div class="h-full overflow-auto">
-        <div class="relative p-2.5 flex flex-col gap-5 h-72">
-            <h3>Character details</h3>
-            <button @click="toggle" class="btn-cyan px-4 py-1.5 w-24">Edit</button>
-            <form class="flex gap-2.5 flex-wrap">
-                <div class="form-field-half max-w-[300px]">
-                    <label for="name">Name</label>
-                    <input class="input-cyan" :class="{'inactive': !editCharacter}" type="text" name="name" placeholder="Ethereal" :disabled="!editCharacter" />
-                </div>
-                <div class="form-field-half max-w-[300px] relative">
-                    <label for="class">Class</label>
-                    <select class="input-cyan" v-model="characterClass" :class="{'inactive': !editCharacter}" name="class" :disabled="!editCharacter">
-                        <option value="Knight" :selected="characterClass == 'Knight'" :disabled="characterClass == 'Knight'">Knight</option>
-                        <option value="Paladin" :selected="characterClass == 'Paladin'" :disabled="characterClass == 'Paladin'">Paladin</option>
-                    </select>
-                    <span v-if="!editCharacter" class="absolute bottom-[9px] left-[14px] text-sm text-gray-300/50">{{characterClass}}</span>
-                </div>
-                <button v-if="editCharacter" @click="toggle" class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
-            </form>
+  <div class="h-full overflow-auto">
+    <div class="relative p-2.5 flex flex-col gap-5 h-72">
+      <h3>Character details</h3>
+      <button @click="toggle" class="btn-cyan px-4 py-1.5 w-24">Edit</button>
+      <form class="flex gap-2.5 flex-wrap">
+        <div class="form-field-half max-w-[300px]">
+          <label for="name">Name</label>
+          <input class="input-cyan" :class="{ inactive: !editCharacter }" type="text" name="name" placeholder="Ethereal" :disabled="!editCharacter" />
         </div>
+        <div class="form-field-half max-w-[300px] relative">
+          <label for="class">Class</label>
+          <select class="input-cyan" v-model="characterClass" :class="{ inactive: !editCharacter }" name="class" :disabled="!editCharacter">
+            <option value="Knight" :selected="characterClass == 'Knight'" :disabled="characterClass == 'Knight'">Knight</option>
+            <option value="Paladin" :selected="characterClass == 'Paladin'" :disabled="characterClass == 'Paladin'">Paladin</option>
+          </select>
+          <span v-if="!editCharacter" class="absolute bottom-[9px] left-[14px] text-sm text-gray-300/50">{{ characterClass }}</span>
+        </div>
+        <button v-if="editCharacter" @click="toggle" class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
+      </form>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -29,6 +29,6 @@ const editCharacter = ref(false)
 const characterClass = ref('')
 
 const toggle = () => {
-    editCharacter.value = !editCharacter.value
+  editCharacter.value = !editCharacter.value
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/utilities/ConfirmationModal.vue b/src/components/utilities/ConfirmationModal.vue
index 771a76c..e8715af 100644
--- a/src/components/utilities/ConfirmationModal.vue
+++ b/src/components/utilities/ConfirmationModal.vue
@@ -30,15 +30,15 @@ const props = defineProps({
 watch(
   () => props.modalOpened,
   (val) => {
-    modalOpened.value = val;
+    modalOpened.value = val
   }
 )
 
-const modalOpened = ref(props.modalOpened);
+const modalOpened = ref(props.modalOpened)
 </script>
 
 <template>
-  <Modal :closable="false" :is-resizable="false" :isModalOpen="true" @modal:close="() => modalOpened = !modalOpened" :modal-width="300" :modal-height="190">
+  <Modal :closable="false" :is-resizable="false" :isModalOpen="true" @modal:close="() => (modalOpened = !modalOpened)" :modal-width="300" :modal-height="190">
     <template #modalHeader>
       <div class="text-white">
         <slot name="modalHeader"></slot>
@@ -51,17 +51,16 @@ const modalOpened = ref(props.modalOpened);
             <slot name="modalBody"></slot>
           </span>
           <div class="flex justify-between p-2">
-
             <button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" @click="props.cancelFunction()">
-              {{props.cancelButtonText}}
+              {{ props.cancelButtonText }}
             </button>
 
             <button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" type="submit" @click="props.confirmFunction()">
-              {{props.confirmButtonText}}
+              {{ props.confirmButtonText }}
             </button>
           </div>
         </div>
       </div>
     </template>
   </Modal>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/zone/Objects.vue b/src/components/zone/Objects.vue
index d0e7cdb..a79b335 100644
--- a/src/components/zone/Objects.vue
+++ b/src/components/zone/Objects.vue
@@ -1,7 +1,3 @@
-<template>
+<template></template>
 
-</template>
-
-<script setup lang="ts">
-
-</script>
\ No newline at end of file
+<script setup lang="ts"></script>
diff --git a/src/components/zone/Tiles.vue b/src/components/zone/Tiles.vue
index 1a0973d..b1290d4 100644
--- a/src/components/zone/Tiles.vue
+++ b/src/components/zone/Tiles.vue
@@ -53,21 +53,15 @@ function createTileLayer() {
 }
 
 function createTileArray() {
-  return Array.from({ length: zone.value?.width ?? 0 }, () =>
-    Array.from({ length: zone.value?.height ?? 0 }, () => 'blank_tile')
-  )
+  return Array.from({ length: zone.value?.width ?? 0 }, () => Array.from({ length: zone.value?.height ?? 0 }, () => 'blank_tile'))
 }
 
 onBeforeMount(() => {
   if (zone.value?.tiles) {
     setAllTiles(zoneTilemap.value, tiles.value, zone.value.tiles)
-    tileArray.value = zone.value.tiles.map(row =>
-      row.map(tileId => tileId || 'blank_tile')
-    )
+    tileArray.value = zone.value.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile'))
   } else {
-    tileArray.value.forEach((row, y) =>
-      row.forEach((_, x) => placeTile(zoneTilemap.value, tiles.value, x, y, 'blank_tile'))
-    )
+    tileArray.value.forEach((row, y) => row.forEach((_, x) => placeTile(zoneTilemap.value, tiles.value, x, y, 'blank_tile')))
   }
 })
 
@@ -76,4 +70,4 @@ onBeforeUnmount(() => {
   zoneTilemap.value.removeAllLayers()
   zoneTilemap.value.destroy()
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/zone/Zone.vue b/src/components/zone/Zone.vue
index df2c9ce..6a5bf4f 100644
--- a/src/components/zone/Zone.vue
+++ b/src/components/zone/Zone.vue
@@ -1,6 +1,6 @@
 <template>
   <Tiles :key="zoneStore.zone?.id ?? 0" @tilemap:create="tileMap = $event" />
-  <Objects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap"  />
+  <Objects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
   <Characters v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
 </template>
 
@@ -48,18 +48,20 @@ gameStore.connection?.on('character:move', (data: ExtendedCharacterT) => {
   zoneStore.updateCharacter(data)
 })
 
-watch(() => zoneStore.zone, (newZone) => {
-  console.log('Zone changed:', newZone)
-}, { deep: true })
+watch(
+  () => zoneStore.zone,
+  (newZone) => {
+    console.log('Zone changed:', newZone)
+  },
+  { deep: true }
+)
 
-onBeforeMount(() => {
-
-});
+onBeforeMount(() => {})
 
 onBeforeUnmount(() => {
   gameStore.connection?.off('zone:teleport')
   gameStore.connection?.off('zone:character:join')
   gameStore.connection?.off('zone:character:leave')
   gameStore.connection?.off('character:move')
-});
+})
 </script>
diff --git a/src/composables/usePointerHandlers.ts b/src/composables/usePointerHandlers.ts
index 1efeb52..1edda26 100644
--- a/src/composables/usePointerHandlers.ts
+++ b/src/composables/usePointerHandlers.ts
@@ -11,7 +11,7 @@ export function usePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.T
   const gameHandlers = useGamePointerHandlers(scene, layer, waypoint, camera, isDragging)
   const zoneEditorHandlers = useZoneEditorPointerHandlers(scene, layer, waypoint, camera, isDragging)
 
-  let currentHandlers = computed(() => zoneEditorStore.active ? zoneEditorHandlers : gameHandlers)
+  let currentHandlers = computed(() => (zoneEditorStore.active ? zoneEditorHandlers : gameHandlers))
 
   const setupPointerHandlers = () => {
     currentHandlers.value.setupPointerHandlers()
@@ -21,12 +21,15 @@ export function usePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.T
     currentHandlers.value.cleanupPointerHandlers()
   }
 
-  watch(() => zoneEditorStore.active, (newValue, oldValue) => {
-    if (newValue !== oldValue) {
-      cleanupPointerHandlers()
-      setupPointerHandlers()
+  watch(
+    () => zoneEditorStore.active,
+    (newValue, oldValue) => {
+      if (newValue !== oldValue) {
+        cleanupPointerHandlers()
+        setupPointerHandlers()
+      }
     }
-  })
+  )
 
   return { setupPointerHandlers, cleanupPointerHandlers }
-}
\ No newline at end of file
+}
diff --git a/src/screens/Characters.vue b/src/screens/Characters.vue
index 04a80e5..7b52e02 100644
--- a/src/screens/Characters.vue
+++ b/src/screens/Characters.vue
@@ -3,17 +3,13 @@
     <div class="absolute bg-[url('/assets/shapes/select-screen-bg-shape.svg')] bg-no-repeat bg-center w-full h-full"></div>
     <div class="ui-wrapper h-dvh flex flex-col justify-center items-center gap-20 px-10 sm:px-20">
       <div class="filler"></div>
-      <ConfirmationModal
-        v-if="deletingCharacter != null"
-        :confirm-function="delete_character.bind(this, deletingCharacter.id)"
-        :cancel-function="(() => deletingCharacter = null).bind(this)"
-        confirm-button-text="Delete"
-      >
+      <ConfirmationModal v-if="deletingCharacter != null" :confirm-function="delete_character.bind(this, deletingCharacter.id)" :cancel-function="(() => (deletingCharacter = null)).bind(this)" confirm-button-text="Delete">
         <template #modalHeader>
           <h3 class="m-0 font-medium">Deleting character</h3>
         </template>
         <template #modalBody>
-          You are about to delete <span class="font-extrabold">{{deletingCharacter.name}}</span>, are you sure about that?
+          You are about to delete <span class="font-extrabold">{{ deletingCharacter.name }}</span
+          >, are you sure about that?
         </template>
       </ConfirmationModal>
       <div class="flex gap-14 w-full max-h-[650px] overflow-x-auto" v-if="!isLoading">
@@ -26,7 +22,14 @@
           <input class="opacity-0 h-full w-full absolute m-0 z-10" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
           <label class="font-bold absolute left-1/2 top-5 max-w-32 -translate-x-1/2 -translate-y-1/2 text-center text-ellipsis overflow-hidden whitespace-nowrap drop-shadow-text" :for="character.id">{{ character.name }}</label>
 
-          <button class="delete bg-red w-8 h-8 p-[3px] rounded-full absolute -right-4 top-0 -translate-y-1/2 z-10 border-2 border-solid border-white hover:bg-red-100" @click="() => { deletingCharacter = character }">
+          <button
+            class="delete bg-red w-8 h-8 p-[3px] rounded-full absolute -right-4 top-0 -translate-y-1/2 z-10 border-2 border-solid border-white hover:bg-red-100"
+            @click="
+              () => {
+                deletingCharacter = character
+              }
+            "
+          >
             <img draggable="false" src="/assets/icons/trashcan.svg" />
           </button>
 
@@ -50,7 +53,10 @@
       </div>
 
       <div class="button-wrapper flex gap-8" v-if="!isLoading">
-        <button class="btn-bordeaux py-2 pr-2.5 pl-8 min-w-24 relative rounded text-xl flex gap-4 items-center transition-all ease-in-out duration-200 hover:gap-5 disabled:bg-cyan/50 disabled:hover:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]" @click="gameStore.disconnectSocket()">
+        <button
+          class="btn-bordeaux py-2 pr-2.5 pl-8 min-w-24 relative rounded text-xl flex gap-4 items-center transition-all ease-in-out duration-200 hover:gap-5 disabled:bg-cyan/50 disabled:hover:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]"
+          @click="gameStore.disconnectSocket()"
+        >
           <img class="h-8 drop-shadow-20 rotate-180" draggable="false" src="/assets/icons/arrow.svg" />
         </button>
         <button
@@ -97,7 +103,7 @@ import ConfirmationModal from '@/components/utilities/ConfirmationModal.vue'
 const isLoading = ref(true)
 const characters = ref([])
 const gameStore = useGameStore()
-const deletingCharacter = ref(null);
+const deletingCharacter = ref(null)
 
 // Fetch characters
 gameStore.connection?.on('character:list', (data: any) => {
@@ -116,7 +122,7 @@ onMounted(() => {
 const selected_character = ref(null)
 function select_character() {
   if (!selected_character.value) return
-  deletingCharacter.value = null;
+  deletingCharacter.value = null
   console.log('selected_character', selected_character.value)
   gameStore.connection?.emit('character:connect', { character_id: selected_character.value })
   gameStore.connection?.on('character:connect', (data: CharacterT) => gameStore.setCharacter(data))
@@ -125,7 +131,7 @@ function select_character() {
 // Delete character logics
 function delete_character(character_id: number) {
   if (!character_id) return
-  deletingCharacter.value = null;
+  deletingCharacter.value = null
   gameStore.connection?.emit('character:delete', { character_id: character_id })
 }
 
diff --git a/src/screens/Login.vue b/src/screens/Login.vue
index f1c51dd..c0fa9c5 100644
--- a/src/screens/Login.vue
+++ b/src/screens/Login.vue
@@ -47,9 +47,9 @@ onMounted(async () => {
    * Fetch assets from the server
    */
 
-  const token = useCookies().get('token');
-  if(token) {
-    gameStore.setToken(token);
+  const token = useCookies().get('token')
+  if (token) {
+    gameStore.setToken(token)
     gameStore.initConnection()
   }