diff --git a/src/components/game/zone/Zone.vue b/src/components/game/zone/Zone.vue
index d7c3e59..e7462d5 100644
--- a/src/components/game/zone/Zone.vue
+++ b/src/components/game/zone/Zone.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onUnmounted } from 'vue'
+import { ref, onUnmounted, onMounted, onBeforeMount } from 'vue'
 import { useScene } from 'phavuer'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneStore } from '@/stores/zoneStore'
@@ -51,12 +51,11 @@ gameStore.connection!.on('character:move', (data: { id: number; positionX: numbe
   zoneStore.updateCharacterPosition(data)
 })
 
-// Emit zone:character:join event to server and wait for response, then set zone and characters
-gameStore!.connection!.emit('zone:character:join', async (response: zoneLoadData) => {
-  console.log(response)
-  await loadZoneTilesIntoScene(response.zone, scene)
-  zoneStore.setZone(response.zone)
-  zoneStore.setCharacters(response.characters)
+onBeforeMount(async () => {
+  console.log(gameStore.character!.zone!.id)
+  await loadZoneTilesIntoScene(gameStore.character!.zone!.id, scene)
+  zoneStore.setZone(gameStore.character!.zone!)
+  // zoneStore.setCharacters(response.characters)
 })
 
 onUnmounted(() => {
diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index 2413fc1..feb334e 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -122,19 +122,6 @@
       </div>
     </template>
   </Modal>
-
-  <!-- DELETE CHARACTER MODAL -->
-  <ConfirmationModal v-if="deletingCharacter != null" :confirm-function="deleteCharacter.bind(this, deletingCharacter.id)" :cancel-function="(() => (deletingCharacter = null)).bind(this)" confirm-button-text="Delete">
-    <template #modalHeader>
-      <h3 class="m-0 font-medium text-white">Delete character?</h3>
-    </template>
-    <template #modalBody>
-      <p class="mt-0 mb-5 text-white text-lg">
-        Do you want to permanently delete <span class="font-extrabold text-white">{{ deletingCharacter.name }}</span
-        >?
-      </p>
-    </template>
-  </ConfirmationModal>
 </template>
 
 <script setup lang="ts">
@@ -142,13 +129,11 @@ import config from '@/application/config'
 import { useGameStore } from '@/stores/gameStore'
 import { onBeforeUnmount, ref, watch } from 'vue'
 import Modal from '@/components/utilities/Modal.vue'
-import { type Character as CharacterT, type CharacterHair } from '@/application/types'
-import ConfirmationModal from '@/components/utilities/ConfirmationModal.vue'
+import { type Character as CharacterT, type CharacterHair, type Zone } from '@/application/types'
 
 const gameStore = useGameStore()
 const isLoading = ref<boolean>(true)
 const characters = ref<CharacterT[]>([])
-const deletingCharacter = ref(null as CharacterT | null)
 const selectedCharacterId = ref<number | null>(null)
 const isCreateNewCharacterModalOpen = ref<boolean>(false)
 const newCharacterName = ref<string>('')
@@ -178,18 +163,11 @@ function loginWithCharacter() {
   gameStore.connection?.emit('character:connect', {
     characterId: selectedCharacterId.value,
     characterHairId: selectedHairId.value
-  }, (response: { character: CharacterT }) => {
+  }, (response: { character: CharacterT, zone: Zone, characters: CharacterT[] }) => {
     gameStore.setCharacter(response.character)
   })
 }
 
-// Delete character logics
-function deleteCharacter(characterId: number) {
-  if (!characterId) return
-  deletingCharacter.value = null
-  gameStore.connection?.emit('character:delete', { characterId: characterId })
-}
-
 // Create character logics
 function createCharacter() {
   gameStore.connection?.on('character:create:success', (data: CharacterT) => {
diff --git a/src/composables/zoneComposable.ts b/src/composables/zoneComposable.ts
index 310bb45..afc7671 100644
--- a/src/composables/zoneComposable.ts
+++ b/src/composables/zoneComposable.ts
@@ -84,9 +84,9 @@ export function FlattenZoneArray(tiles: string[][]) {
   return normalArray
 }
 
-export async function loadZoneTilesIntoScene(zone: ZoneT, scene: Phaser.Scene) {
+export async function loadZoneTilesIntoScene(zone_id: number, scene: Phaser.Scene) {
   // Fetch the list of tiles from the server
-  const tileArray: HttpResponse<AssetDataT[]> = await fetch(config.server_endpoint + '/assets/list_tiles/' + zone.id).then((response) => response.json())
+  const tileArray: HttpResponse<AssetDataT[]> = await fetch(config.server_endpoint + '/assets/list_tiles/' + zone_id).then((response) => response.json())
 
   // Load each tile into the scene
   for (const tile of tileArray.data ?? []) {