diff --git a/package-lock.json b/package-lock.json
index 75d3cda..208cbef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2633,9 +2633,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001615",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001615.tgz",
-      "integrity": "sha512-1IpazM5G3r38meiae0bHRnPhz+CBQ3ZLqbQMtrg+AsTPKAXgW38JNsXkyZ+v8waCsDmPq87lmfun5Q2AGysNEQ==",
+      "version": "1.0.30001616",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001616.tgz",
+      "integrity": "sha512-RHVYKov7IcdNjVHJFNY/78RdG4oGVjbayxv8u5IO74Wv7Hlq4PnJE6mo/OjFijjVFNy5ijnCt6H3IIo4t+wfEw==",
       "dev": true,
       "funding": [
         {
diff --git a/src/components/World.vue b/src/components/World.vue
index 62ccccf..731a01b 100644
--- a/src/components/World.vue
+++ b/src/components/World.vue
@@ -1,67 +1,51 @@
 <template>
-  <TilemapLayer  ref="tilemapLayer" :tilemap="map" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" :tileset="mapTiles" />
+  <TilemapLayer v-if="isMapLoaded"  ref="tilemapLayer" :tilemap="map" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" :tileset="serverMapData.tiles" />
 <!--  <Controls :layer="layer" />-->
 </template>
 
 <script setup lang="ts">
-import { refObj, TilemapLayer, useScene } from 'phavuer'
-import Player from '@/components/sprites/player/Player.vue'
-import config from '@/config'
-import { reactive, ref, type Ref } from 'vue'
-import Tileset = Phaser.Tilemaps.Tileset
-import Controls from '@/components/Controls.vue'
-import { useSocketStore } from '@/stores/socket'
-import Map from '@/engine/Map/Map'
-
-const isMapLoaded = ref(false);
-const socket = useSocketStore();
-const serverMapData = ref([]);
-const mapTiles = ref([]);
-
-const mapData = new Phaser.Tilemaps.MapData({
-  width: 10,
-  height: 10,
-  tileWidth: config.tile_size.x,
-  tileHeight: config.tile_size.y,
-  orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
-  format: Phaser.Tilemaps.Formats.ARRAY_2D,
-});
-
-socket.socket?.emit('get_map');
-socket.socket?.on('map', (map) => {
-  // Get map from server
-  mapTiles.value = map.data;
-  map.data.forEach((row, y) => {
-    row.forEach((tile, x) => {
-      layer.putTileAt(tile, x, y);
-    });
-  });
-
-  isMapLoaded.value = true;
-  console.log('map', map);
-});
-
-
-const scene = useScene()
-
-const { width: tileSizeWidth } = mapData;
-const { width, height } = scene.cameras.main;
-const map = new Phaser.Tilemaps.Tilemap(scene, mapData);
-
 /**
  * 1 tile is 64x32
  * the map is 10x10
  * so the map is 640x320
  */
+
+import { refObj, TilemapLayer, useScene } from 'phavuer'
+import Player from '@/components/sprites/player/Player.vue'
+import config from '@/config'
+import { onBeforeMount, onMounted, reactive, ref, type Ref, toRaw, watch } from 'vue'
+import Tileset = Phaser.Tilemaps.Tileset
+import Controls from '@/components/Controls.vue'
+import { useSocketStore } from '@/stores/socket'
+
+onBeforeMount(() => {
+  socket.socket?.emit('get_map');
+  socket.socket?.on('map', (map) => {
+    // Get map from server
+    serverMapData.value = map;
+    isMapLoaded.value = true;
+
+    map.tiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)));
+  });
+});
+
+const map = ref();
+const mapData = ();
+
+
+function loadMap() {
+
+}
+
+const isMapLoaded = ref(false);
+const socket = useSocketStore();
+const serverMapData = ref([]);
+const scene = useScene()
+const tilemapLayer = ref();
+
+const map = new Phaser.Tilemaps.Tilemap(scene, mapData);
 const tileset: (Tileset|null) = map.addTilesetImage('default', 'tiles');
-// const layer: (Layer|null) = map.createBlankLayer('layer', tileset);
-
 const layer:TilemapLayer = map.createBlankLayer('layer', tileset, 0, config.tile_size.y);
-const tilemapLayer= ref();
-
-// const mapp = new Map('default', 10, 10, config.tile_size.x, config.tile_size.y, data, []);
-
-
 
 // center camera
 const centerY = (map.height * map.tileHeight) / 2
diff --git a/src/components/sprites/player/Player.vue b/src/components/sprites/player/Player.vue
index b6a74b7..ea804d0 100644
--- a/src/components/sprites/player/Player.vue
+++ b/src/components/sprites/player/Player.vue
@@ -24,7 +24,6 @@ const scene = useScene()
 //   console.log(time, delta);
 // })
 
-const pointer_tile = ref(undefined);
 const position = reactive({ x: 0, y: 0 });
 
 if (props.player !== undefined) {