diff --git a/src/components/gui/Chat.vue b/src/components/gui/Chat.vue
index db0b2fc..9f7bffd 100644
--- a/src/components/gui/Chat.vue
+++ b/src/components/gui/Chat.vue
@@ -79,4 +79,4 @@ onMounted(() => {
 onBeforeUnmount(() => {
   gameStore.connection?.off('chat:message')
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/gui/Menu.vue b/src/components/gui/Menu.vue
index 6ae002f..d4e62b5 100644
--- a/src/components/gui/Menu.vue
+++ b/src/components/gui/Menu.vue
@@ -1,6 +1,6 @@
 <template>
   <ul class="list-none flex gap-2.5 items-center">
-    <li class="menu-item group relative">
+    <li class="menu-item group relative" @click="gameStore.toggleChat">
       <div class="group-hover:block absolute bottom-16 left-1/2 -translate-x-1/2 w-20 h-6 text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
         <p class="absolute w-full bottom-0 m-0 text-xs leading-6">Chat</p>
         <div class="group-hover:block absolute -bottom-2.5 bg-cyan h-2 w-3.5 [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 -translate-x-1/2 hidden"></div>
@@ -38,3 +38,9 @@
     </li>
   </ul>
 </template>
+
+<script setup lang="ts">
+import { useGameStore } from '@/stores/game'
+
+const gameStore = useGameStore()
+</script>
diff --git a/src/components/sprites/Character.vue b/src/components/sprites/Character.vue
index 2d69bea..eaff3ea 100644
--- a/src/components/sprites/Character.vue
+++ b/src/components/sprites/Character.vue
@@ -1,26 +1,10 @@
 <template>
-  <Container
-    v-if="props.character"
-    :x="currentX"
-    :y="currentY"
-  >
-    <Text
-      @create="createText"
-      :text="props.character.name"
-      :origin-x="0.5"
-      :origin-y="9"
-    />
+  <Container v-if="props.character" :x="currentX" :y="currentY">
+    <Text @create="createText" :text="props.character.name" :origin-x="0.5" :origin-y="9" />
     <RoundRectangle :origin-x="0.5" :origin-y="18.5" :fillColor="0xffffff" :width="74" :height="6" :radius="5" />
-    <RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x09ad19" :width="70" :height="3" :radius="5" />
+    <RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" />
     <Image v-if="!props.character.characterType" texture="character" :origin-y="1" />
-    <Sprite
-      v-else
-      :texture="charTexture"
-      :play="props.character.isMoving ? charTexture : undefined"
-      :origin-y="1"
-      :flipX="props.character.rotation === 6 || props.character.rotation === 4"
-      :flipY="false"
-    />
+    <Sprite v-else :texture="charTexture" :play="props.character.isMoving ? charTexture : undefined" :origin-y="1" :flipX="props.character.rotation === 6 || props.character.rotation === 4" :flipY="false" />
   </Container>
 </template>
 
@@ -71,17 +55,21 @@ const updatePosition = (x: number, y: number) => {
     onUpdate: (tween) => {
       currentX.value = tween.targets[0].x ?? 0
       currentY.value = tween.targets[0].y ?? 0
-    },
+    }
   })
 }
 
-watch(() => props.character, (newChar, oldChar) => {
-  if (newChar) {
-    if (!oldChar || newChar.position_x !== oldChar.position_x || newChar.position_y !== oldChar.position_y) {
-      updatePosition(newChar.position_x, newChar.position_y)
+watch(
+  () => props.character,
+  (newChar, oldChar) => {
+    if (newChar) {
+      if (!oldChar || newChar.position_x !== oldChar.position_x || newChar.position_y !== oldChar.position_y) {
+        updatePosition(newChar.position_x, newChar.position_y)
+      }
     }
-  }
-}, { immediate: true, deep: true })
+  },
+  { immediate: true, deep: true }
+)
 
 const charTexture = computed(() => {
   if (!props.character?.characterType?.sprite) {
@@ -102,6 +90,7 @@ const charTexture = computed(() => {
 })
 
 const createText = (text: Phaser.GameObjects.Text) => {
+  text.setColor('#ffffff')
   text.setFontSize(13)
   text.setFontFamily('Arial')
 }
@@ -117,4 +106,4 @@ onUnmounted(() => {
     tween.value.stop()
   }
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/utilities/inventory/Inventory.vue b/src/components/utilities/inventory/Inventory.vue
index 63bafdb..b6553ec 100644
--- a/src/components/utilities/inventory/Inventory.vue
+++ b/src/components/utilities/inventory/Inventory.vue
@@ -1,152 +1,150 @@
 <template>
-    <div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60">
-        <div class="flex flex-col gap-8 m-10 h-[calc(100%_-_5rem)]">
-            <div class="flex gap-8 items-stretch justify-center grow max-h-[650px]">
-                <div class="md:block hidden w-[30%] max-w-[350px] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg backdrop-blur-sm shadow-lg">
-                    <div class="h-full flex flex-col justify-center items-center">
-                        <h3 class="mt-4">Ethereal</h3>
-                        <img class="h-96 my-6 mx-auto" src="/assets/placeholders/inventory_player.png" />
-                        <span class="block mb-4">Level 69</span>
-                    </div>
-                </div>
-                <div class="max-w-[875px] w-[65%] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg z-50 flex flex-col backdrop-blur-sm shadow-lg">
-                    <div class="p-2.5 flex justify-between items-center border-solid border-0 border-b border-cyan-200">
-                        <h3 class="m-0 font-medium shrink-0">Inventory</h3>
-                        <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">
-                                <img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" />
-                            </button>
-                        </div>
-                    </div>
-                    <div class="grow flex flex-col">
-                        <div class="w-full h-[70%] max-h-[375px] relative flex flex-col md:flex-row justify-between overflow-auto">
-                            <div class="flex flex-col gap-3 m-5">
-                                <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 class="flex gap-3 m-5 flex-wrap justify-end max-lg:justify-center lg:max-w-[50%]">
-                                <div v-for="n in 25" 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="w-full h-[30%] flex flex-wrap relative overflow-auto xl:grow">
-                            <div class="absolute left-0 top-0 w-full h-px bg-cyan-200"></div>
-                            <div class="w-full xl:w-1/2 h-full">
-                                <div class="m-4 h-[calc(100%_-_32px)] flex flex-col gap-4 mr-8">
-                                    <div class="flex gap-2">
-                                        <h4>Armor piece name</h4>
-                                        <span class="rounded-sm px-2.5 content-center bg-purple text-white text-xs">RARE</span>
-                                    </div>
-                                    <div class="flex gap-8 xl:justify-between items-center grow">
-                                        <img src="/assets/placeholders/chestplate.png" class="max-w-36"/>
-                                        <ul class="p-0 m-0 list-none">
-                                            <li class="flex gap-8 justify-between">
-                                                <span>Health:</span>
-                                                <span>+15</span>
-                                            </li>
-                                            <li class="flex gap-8 justify-between">
-                                                <span>Defense:</span>
-                                                <span>500</span>
-                                            </li>
-                                            <li class="flex gap-8 justify-between">
-                                                <span>Stats:</span>
-                                                <span></span>
-                                            </li>
-                                            <li class="flex gap-8 justify-between">
-                                                <span>More stats:</span>
-                                                <span></span>
-                                            </li>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="absolute left-1/2 -translate-x-1/2 bottom-0 w-px h-full bg-cyan-200 xl:block hidden"></div>
-                            <div class="w-full xl:w-1/2 h-full">
-                                <div class="m-4 h-[calc(100%_-_32px)] flex flex-col gap-4 ml-8">
-                                    <h4>Character stats</h4>
-                                    <div class="flex justify-between items-center grow">
-                                        <ul class="p-0 m-0 list-none">
-                                            <li class="flex gap-8 justify-between">
-                                                <span>Health:</span>
-                                                <p class="m-0 relative">100 <span class="text-green absolute left-full ml-2">+15</span></p>
-                                            </li>
-                                            <li class="flex gap-8 justify-between">
-                                                <span>Defense:</span>
-                                                <p class="m-0 relative">1000 <span class="text-green absolute left-full ml-2">+500</span></p>
-                                            </li>
-                                            <li class="flex gap-8 justify-between">
-                                                <span>Stats:</span>
-                                                <p class="m-0 relative"></p>
-                                            </li>
-                                            <li class="flex gap-8 justify-between">
-                                                <span>More stats:</span>
-                                                <p class="m-0 relative"></p>
-                                            </li>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            
-            <div class="flex justify-center">
-                <div class="overflow-auto w-[calc(90%_+_32px)] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg flex flex-col backdrop-blur-sm shadow-lg">
-                    <div class="h-full flex flex-col items-center">
-                        <h3 class="mt-4">Chest</h3>
-                        <div class="flex flex-wrap gap-4 m-4 justify-center max-w-[500px] overflow-auto">
-                            <div v-for="n in 15" class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-11 hover:bg-gray-200"></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            
+  <div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60">
+    <div class="flex flex-col gap-8 m-10 h-[calc(100%_-_5rem)]">
+      <div class="flex gap-8 items-stretch justify-center grow max-h-[650px]">
+        <div class="md:block hidden w-[30%] max-w-[350px] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg backdrop-blur-sm shadow-lg">
+          <div class="h-full flex flex-col justify-center items-center">
+            <h3 class="mt-4">Ethereal</h3>
+            <img class="h-96 my-6 mx-auto" src="/assets/placeholders/inventory_player.png" />
+            <span class="block mb-4">Level 69</span>
+          </div>
         </div>
+        <div class="max-w-[875px] w-[65%] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg z-50 flex flex-col backdrop-blur-sm shadow-lg">
+          <div class="p-2.5 flex justify-between items-center border-solid border-0 border-b border-cyan-200">
+            <h3 class="m-0 font-medium shrink-0">Inventory</h3>
+            <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">
+                <img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" />
+              </button>
+            </div>
+          </div>
+          <div class="grow flex flex-col">
+            <div class="w-full h-[70%] max-h-[375px] relative flex flex-col md:flex-row justify-between overflow-auto">
+              <div class="flex flex-col gap-3 m-5">
+                <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 class="flex gap-3 m-5 flex-wrap justify-end max-lg:justify-center lg:max-w-[50%]">
+                <div v-for="n in 25" 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="w-full h-[30%] flex flex-wrap relative overflow-auto xl:grow">
+              <div class="absolute left-0 top-0 w-full h-px bg-cyan-200"></div>
+              <div class="w-full xl:w-1/2 h-full">
+                <div class="m-4 h-[calc(100%_-_32px)] flex flex-col gap-4 mr-8">
+                  <div class="flex gap-2">
+                    <h4>Armor piece name</h4>
+                    <span class="rounded-sm px-2.5 content-center bg-purple text-white text-xs">RARE</span>
+                  </div>
+                  <div class="flex gap-8 xl:justify-between items-center grow">
+                    <img src="/assets/placeholders/chestplate.png" class="max-w-36" />
+                    <ul class="p-0 m-0 list-none">
+                      <li class="flex gap-8 justify-between">
+                        <span>Health:</span>
+                        <span>+15</span>
+                      </li>
+                      <li class="flex gap-8 justify-between">
+                        <span>Defense:</span>
+                        <span>500</span>
+                      </li>
+                      <li class="flex gap-8 justify-between">
+                        <span>Stats:</span>
+                        <span></span>
+                      </li>
+                      <li class="flex gap-8 justify-between">
+                        <span>More stats:</span>
+                        <span></span>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+              <div class="absolute left-1/2 -translate-x-1/2 bottom-0 w-px h-full bg-cyan-200 xl:block hidden"></div>
+              <div class="w-full xl:w-1/2 h-full">
+                <div class="m-4 h-[calc(100%_-_32px)] flex flex-col gap-4 ml-8">
+                  <h4>Character stats</h4>
+                  <div class="flex justify-between items-center grow">
+                    <ul class="p-0 m-0 list-none">
+                      <li class="flex gap-8 justify-between">
+                        <span>Health:</span>
+                        <p class="m-0 relative">100 <span class="text-green absolute left-full ml-2">+15</span></p>
+                      </li>
+                      <li class="flex gap-8 justify-between">
+                        <span>Defense:</span>
+                        <p class="m-0 relative">1000 <span class="text-green absolute left-full ml-2">+500</span></p>
+                      </li>
+                      <li class="flex gap-8 justify-between">
+                        <span>Stats:</span>
+                        <p class="m-0 relative"></p>
+                      </li>
+                      <li class="flex gap-8 justify-between">
+                        <span>More stats:</span>
+                        <p class="m-0 relative"></p>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex justify-center">
+        <div class="overflow-auto w-[calc(90%_+_32px)] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg flex flex-col backdrop-blur-sm shadow-lg">
+          <div class="h-full flex flex-col items-center">
+            <h3 class="mt-4">Chest</h3>
+            <div class="flex flex-wrap gap-4 m-4 justify-center max-w-[500px] overflow-auto">
+              <div v-for="n in 15" class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-11 hover:bg-gray-200"></div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
-</template>
\ No newline at end of file
+  </div>
+</template>
diff --git a/src/config.ts b/src/config.ts
index 4a929c1..763f5d6 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,4 +1,4 @@
-const dev: boolean = false
+const dev: boolean = true
 
 export default {
   name: 'New Quest',
diff --git a/src/screens/Characters.vue b/src/screens/Characters.vue
index 1cdfb06..228eb19 100644
--- a/src/screens/Characters.vue
+++ b/src/screens/Characters.vue
@@ -4,7 +4,12 @@
     <div class="ui-wrapper h-dvh flex flex-col justify-center items-center gap-20 px-10 sm:px-20">
       <div class="filler"></div>
       <div class="flex gap-14 w-full max-h-[650px] overflow-x-auto" v-if="!isLoading">
-        <div v-for="character in characters" :key="character.id" class="group first:ml-auto last:mr-auto m-4 w-[170px] h-[275px] flex flex-col shrink-0 rounded-2xl relative bg-[url('/assets/shapes/character-select-shape.svg')] bg-no-repeat shadow-character" :class="{ active: selected_character == character.id }">
+        <div
+          v-for="character in characters"
+          :key="character.id"
+          class="group first:ml-auto last:mr-auto m-4 w-[170px] h-[275px] flex flex-col shrink-0 rounded-2xl relative bg-[url('/assets/shapes/character-select-shape.svg')] bg-no-repeat shadow-character"
+          :class="{ active: selected_character == character.id }"
+        >
           <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>
           <!-- @TODO : Add a confirmation dialog -->
diff --git a/src/screens/Game.vue b/src/screens/Game.vue
index 4f2ea00..897e512 100644
--- a/src/screens/Game.vue
+++ b/src/screens/Game.vue
@@ -1,18 +1,20 @@
 <template>
-  <GmTools v-if="isLoaded && gameStore.character?.role === 'gm'" />
-  <GmPanel v-if="isLoaded && gameStore.character?.role === 'gm'" />
-
   <div class="flex justify-center items-center h-dvh p-8 relative">
+    <GmTools v-if="isLoaded && gameStore.character?.role === 'gm'" />
+    <GmPanel v-if="isLoaded && gameStore.character?.role === 'gm'" />
+
     <div v-if="!zoneEditorStore.active">
       <Game :config="gameConfig" @create="createGame">
         <Scene name="main" @preload="preloadScene" @create="createScene">
           <div class="flex absolute justify-between left-0 right-0 top-12 mx-12 my-0">
             <Hud />
           </div>
-<!--          <Inventory />-->
+          <!--          <Inventory />-->
           <World v-if="isLoaded" :key="gameStore.character?.zoneId" />
           <div class="flex absolute justify-between left-0 right-0 bottom-24 h-24 mx-12 my-0">
-            <Chat />
+            <div class="w-full">
+              <Chat v-show="gameStore.isChatOpen" />
+            </div>
             <Menubar />
           </div>
         </Scene>
@@ -62,13 +64,7 @@ const gameConfig = {
   height: window.innerHeight,
   type: Phaser.AUTO,
   resolution: 5,
-  pixelArt: true,
-  scale: {
-    mode: Phaser.Scale.RESIZE,
-    autoCenter: Phaser.Scale.CENTER_BOTH,
-    width: window.innerWidth,
-    height: window.innerHeight
-  }
+  pixelArt: true
 }
 
 const createGame = (game: Phaser.Game) => {
diff --git a/src/stores/assets.ts b/src/stores/assets.ts
index 141fb7b..287c943 100644
--- a/src/stores/assets.ts
+++ b/src/stores/assets.ts
@@ -4,7 +4,7 @@ import config from '@/config'
 
 export const useAssetStore = defineStore('assets', {
   state: () => ({
-    assets: [] as Asset[],
+    assets: [] as Asset[]
   }),
   actions: {
     setAssets(assets: Asset[]) {
diff --git a/src/stores/game.ts b/src/stores/game.ts
index c44d8e1..0b96d95 100644
--- a/src/stores/game.ts
+++ b/src/stores/game.ts
@@ -12,7 +12,8 @@ export const useGameStore = defineStore('game', {
     user: null as User | null,
     character: null as Character | null,
     isGmPanelOpen: false,
-    isMovingCamera: false
+    isMovingCamera: false,
+    isChatOpen: false
   }),
   actions: {
     setScreen(screen: string) {
@@ -36,6 +37,9 @@ export const useGameStore = defineStore('game', {
     setMovingCamera(moving: boolean) {
       this.isMovingCamera = moving
     },
+    toggleChat() {
+      this.isChatOpen = !this.isChatOpen
+    },
     initConnection() {
       this.connection = io(config.server_endpoint, {
         secure: !config.development,
diff --git a/src/stores/zone.ts b/src/stores/zone.ts
index 46ea903..db56041 100644
--- a/src/stores/zone.ts
+++ b/src/stores/zone.ts
@@ -8,7 +8,7 @@ export const useZoneStore = defineStore('zone', {
   }),
   getters: {
     getCharacterById: (state) => {
-      return (id: number) => state.characters.find(char => char.id === id)
+      return (id: number) => state.characters.find((char) => char.id === id)
     },
     getCharacterCount: (state) => {
       return state.characters.length
@@ -28,17 +28,17 @@ export const useZoneStore = defineStore('zone', {
       this.characters.push(character)
     },
     updateCharacter(updatedCharacter: ExtendedCharacter) {
-      const index = this.characters.findIndex(char => char.id === updatedCharacter.id)
+      const index = this.characters.findIndex((char) => char.id === updatedCharacter.id)
       if (index !== -1) {
         this.characters[index] = { ...this.characters[index], ...updatedCharacter }
       }
     },
     removeCharacter(character_id: number) {
-      this.characters = this.characters.filter(char => char.id !== character_id)
+      this.characters = this.characters.filter((char) => char.id !== character_id)
     },
     reset() {
       this.zone = null
       this.characters = []
     }
   }
-})
\ No newline at end of file
+})
diff --git a/src/utilities.ts b/src/utilities.ts
index d2afc12..f584d74 100644
--- a/src/utilities.ts
+++ b/src/utilities.ts
@@ -1,3 +1,3 @@
 export function uuidv4() {
   return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) => (+c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))).toString(16))
-}
\ No newline at end of file
+}