diff --git a/package-lock.json b/package-lock.json
index 71cf6a0..60d207c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2070,9 +2070,9 @@
       }
     },
     "node_modules/@vitest/runner/node_modules/yocto-queue": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.1.0.tgz",
-      "integrity": "sha512-cMojmlnwkAgIXqga+2sXshlgrrcI0QEPJ5n58pEvtuFo4PaekfomlCudArDD7hj8Hkswjl0/x4eu4q+Xa0WFgQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.1.1.tgz",
+      "integrity": "sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2137,30 +2137,30 @@
       }
     },
     "node_modules/@volar/language-core": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.3.4.tgz",
-      "integrity": "sha512-wXBhY11qG6pCDAqDnbBRFIDSIwbqkWI7no+lj5+L7IlA7HRIjRP7YQLGzT0LF4lS6eHkMSsclXqy9DwYJasZTQ==",
+      "version": "2.4.0-alpha.3",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.0-alpha.3.tgz",
+      "integrity": "sha512-hLVn1t7dfvJcZgiXG/83fg6zvzigLYOVyCEG51uRGAnWV+kfPw2/v5iRKIStlcYb1MqCEZXDiLsIm3gWvN1JAQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@volar/source-map": "2.3.4"
+        "@volar/source-map": "2.4.0-alpha.3"
       }
     },
     "node_modules/@volar/source-map": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.3.4.tgz",
-      "integrity": "sha512-C+t63nwcblqLIVTYXaVi/+gC8NukDaDIQI72J3R7aXGvtgaVB16c+J8Iz7/VfOy7kjYv7lf5GhBny6ACw9fTGQ==",
+      "version": "2.4.0-alpha.3",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.0-alpha.3.tgz",
+      "integrity": "sha512-tqXfx43WvKvjatkoBKkMpLu5akV/p/hPf2MWdAHmK4W6cGDvNinmPlnp/nxIL0WZGvX76y4XhYb3LQQeN5/nIw==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@volar/typescript": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.3.4.tgz",
-      "integrity": "sha512-acCvt7dZECyKcvO5geNybmrqOsu9u8n5XP1rfiYsOLYGPxvHRav9BVmEdRyZ3vvY6mNyQ1wLL5Hday4IShe17w==",
+      "version": "2.4.0-alpha.3",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.0-alpha.3.tgz",
+      "integrity": "sha512-fjWaXUlPLedDCyTc4YpDN5c6T7JK/mA7tmSSSirpQOX5CW/gdy3vpC+XbQta/KjVrRRFNYC2pncTBPyethdyxA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@volar/language-core": "2.3.4",
+        "@volar/language-core": "2.4.0-alpha.3",
         "path-browserify": "^1.0.1",
         "vscode-uri": "^3.0.8"
       }
@@ -2384,13 +2384,13 @@
       }
     },
     "node_modules/@vue/language-core": {
-      "version": "2.0.22",
-      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.22.tgz",
-      "integrity": "sha512-dNTAAtEOuMiz7N1s5tKpypnVVCtawxVSF5BukD0ELcYSw+DSbrSlYYSw8GuwvurodCeYFSHsmslE+c2sYDNoiA==",
+      "version": "2.0.24",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.24.tgz",
+      "integrity": "sha512-997YD6Lq/66LXr3ZOLNxDCmyn13z9NP8LU1UZn9hGCDWhzlbXAIP0hOgL3w3x4RKEaWTaaRtsHP9DzHvmduruQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@volar/language-core": "~2.3.1",
+        "@volar/language-core": "~2.4.0-alpha.2",
         "@vue/compiler-dom": "^3.4.0",
         "@vue/shared": "^3.4.0",
         "computeds": "^0.0.1",
@@ -5518,15 +5518,15 @@
       }
     },
     "node_modules/phaser3-rex-plugins": {
-      "version": "1.80.4",
-      "resolved": "https://registry.npmjs.org/phaser3-rex-plugins/-/phaser3-rex-plugins-1.80.4.tgz",
-      "integrity": "sha512-6Pj2brWySF0mbf848gjqDpSaG5L7MX4Y1OgNOm2sj2cKizFXPHAigHmqhIelPH0jRXKCGoVAPMwGURoGRZq9lA==",
+      "version": "1.80.5",
+      "resolved": "https://registry.npmjs.org/phaser3-rex-plugins/-/phaser3-rex-plugins-1.80.5.tgz",
+      "integrity": "sha512-hdL3Cm6dK72w6phQdGnEiqqntlwT8SvjU0yit7DkdqiPy/Io1g3KnsRFqndtY+Hu69zaMEuckpIVeQK6yVwx4A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "eventemitter3": "^3.1.2",
         "i18next": "^22.5.1",
-        "i18next-http-backend": "^2.5.0",
+        "i18next-http-backend": "^2.5.2",
         "js-yaml": "^4.1.0",
         "mustache": "^4.2.0",
         "papaparse": "^5.4.1",
@@ -6984,9 +6984,9 @@
       }
     },
     "node_modules/vue-component-type-helpers": {
-      "version": "2.0.22",
-      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.22.tgz",
-      "integrity": "sha512-gPr2Ba7efUwy/Vfbuf735bHSVdN4ycoZUCHfypkI33M9DUH+ieRblLLVM2eImccFYaWNWwEzURx02EgoXDBmaQ==",
+      "version": "2.0.24",
+      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.24.tgz",
+      "integrity": "sha512-Jr5N8QVYEcbQuMN1LRgvg61758G8HTnzUlQsAFOxx6Y6X8kmhJ7C+jOvWsQruYxi3uHhhS6BghyRlyiwO99DBg==",
       "dev": true,
       "license": "MIT"
     },
@@ -7027,21 +7027,21 @@
       }
     },
     "node_modules/vue-tsc": {
-      "version": "2.0.22",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.22.tgz",
-      "integrity": "sha512-lMBIwPBO0sxCcmvu45yt1b035AaQ8/XSXQDk8m75y4j0jSXY/y/XzfEtssQ9JMS47lDaR10O3/926oCs8OeGUw==",
+      "version": "2.0.24",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.24.tgz",
+      "integrity": "sha512-1qi4P8L7yS78A7OJ7CDDxUIZPD6nVxoQEgX3DkRZNi1HI1qOfzOJwQlNpmwkogSVD6S/XcanbW9sktzpSxz6rA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@volar/typescript": "~2.3.1",
-        "@vue/language-core": "2.0.22",
+        "@volar/typescript": "~2.4.0-alpha.2",
+        "@vue/language-core": "2.0.24",
         "semver": "^7.5.4"
       },
       "bin": {
         "vue-tsc": "bin/vue-tsc.js"
       },
       "peerDependencies": {
-        "typescript": "*"
+        "typescript": ">=5.0.0"
       }
     },
     "node_modules/w3c-xmlserializer": {
diff --git a/src/components/utilities/zoneEditor/ZoneEditor.vue b/src/components/utilities/zoneEditor/ZoneEditor.vue
index 94584cd..c2bf6de 100644
--- a/src/components/utilities/zoneEditor/ZoneEditor.vue
+++ b/src/components/utilities/zoneEditor/ZoneEditor.vue
@@ -1,7 +1,7 @@
 <template>
-  <TilemapLayerC :tilemap="tileTilemap" :tileset="exampleTilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
+  <TilemapLayerC :tilemap="zone" :tileset="exampleTilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
 
-  <Controls :layer="exampleTiles" />
+  <Controls :layer="tiles" />
   <!--  @TODO: inside asset manager we need to be able to set the originX and originY per individial asset -->
   <Container>
     <Image :texture="'wall1'" :x="pos.position_x" :y="pos.position_y" :originY="1.13" :originX="1" />
@@ -9,7 +9,7 @@
     <Image :texture="'wall2'" :x="pos3.position_x" :y="pos3.position_y" :originY="1.255" :originX="1" />
   </Container>
 
-  <Toolbar :layer="exampleTiles" @eraser="eraser" @pencil="pencil" @save="save" />
+  <Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @save="save" />
   <Tiles v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile'" />
   <Decorations v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'decoration'" />
   <ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
@@ -31,14 +31,15 @@ import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
 import Decorations from '@/components/utilities/zoneEditor/Decorations.vue'
 import { tileToWorldXY } from '@/services/zone'
 import GmPanel from '@/components/utilities/GmPanel.vue'
+import { useAssetStore } from '@/stores/assets'
 
-// Phavuer logic
-let scene = useScene()
+const scene = useScene()
 const socket = useSocketStore()
 const zoneEditorStore = useZoneEditorStore()
+const assetStore = useAssetStore()
 
 // Tile tilemap
-const tileMapData = new Phaser.Tilemaps.MapData({
+const zoneData = new Phaser.Tilemaps.MapData({
   width: zoneEditorStore.width,
   height: zoneEditorStore.height,
   tileWidth: config.tile_size.x,
@@ -46,25 +47,40 @@ const tileMapData = new Phaser.Tilemaps.MapData({
   orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
   format: Phaser.Tilemaps.Formats.ARRAY_2D
 })
-let tileTilemap = new Phaser.Tilemaps.Tilemap(scene, tileMapData)
-let tilesImg = tileTilemap.addTilesetImage('default', 'tiles')
-let exampleTiles = tileTilemap.createBlankLayer('exampleTiles', tilesImg as Tileset, 0, config.tile_size.y) as TilemapLayer
 
-const exampleTilesArray = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 1))
+const zone = new Phaser.Tilemaps.Tilemap(scene, zoneData)
+
+let tilesetImages: Tileset[] = [];
+assetStore.assets.forEach((asset) => {
+  if (asset.group !== 'tiles') {
+    return
+  }
+  tilesetImages.push(zone.addTilesetImage(asset.key) as Tileset)
+})
+
+const tiles = zone.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as TilemapLayer
+
+const exampleTilesArray = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 'tile_0.png'))
 
 onMounted(() => {})
-const pos = tileToWorldXY(exampleTiles, 1, 1)
-const pos2 = tileToWorldXY(exampleTiles, 1, 2)
-const pos3 = tileToWorldXY(exampleTiles, 2, 1)
+const pos = tileToWorldXY(tiles, 1, 1)
+const pos2 = tileToWorldXY(tiles, 1, 2)
+const pos3 = tileToWorldXY(tiles, 2, 1)
 console.log(pos)
+
+
 // center camera
-const centerY = (tileTilemap.height * tileTilemap.tileHeight) / 2
-const centerX = (tileTilemap.width * tileTilemap.tileWidth) / 2
+const centerY = (zone.height * zone.tileHeight) / 2
+const centerX = (zone.width * zone.tileWidth) / 2
 scene.cameras.main.centerOn(centerX, centerY)
 
-onBeforeMount(() => {
-  exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => exampleTiles.putTileAt(tile, x, y)))
+function placeTile(x: number, y: number, tileType: string) {
+  const tileset = map.getTileset(tileType);
+  layer.putTileAt(tileset.firstgid, x, y);
+}
 
+onBeforeMount(() => {
+  exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => tiles.putTileAt(tile, x, y)))
   socket.connection.emit('gm:zone_editor:zone:request', { zoneId: socket.character.zoneId })
 })
 
diff --git a/src/screens/Game.vue b/src/screens/Game.vue
index 5e41009..a8ed1ea 100644
--- a/src/screens/Game.vue
+++ b/src/screens/Game.vue
@@ -36,9 +36,12 @@ import GmTools from '@/components/utilities/GmTools.vue'
 import { useSocketStore } from '@/stores/socket'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import ZoneEditor from '@/components/utilities/zoneEditor/ZoneEditor.vue'
+import { useAssetStore } from '@/stores/assets'
+import type { Asset } from '@/types'
 
 const socket = useSocketStore()
 const zoneEditorStore = useZoneEditorStore()
+const assetStore = useAssetStore()
 
 onUnmounted(() => {
   socket.disconnectSocket()
@@ -64,23 +67,24 @@ const createGame = (game: Phaser.Game) => {
 }
 
 const preloadScene = (scene: Phaser.Scene) => {
-  type Asset = {
-    key: string
-    value: string
-    type: 'base64' | 'link'
-  }
+
 
   socket.connection.emit('assets:download', {}, (response: Asset[]) => {
     console.log(response);
     response.forEach((asset) => {
-      if (asset.type === 'base64') {
-        scene.textures.addBase64(asset.key, asset.value)
-      }
-      if (asset.type === 'link') {
-        scene.load.image(asset.key, config.server_endpoint + '/assets' + asset.value)
-      }
+      assetStore.addAsset(asset)
     })
   })
+
+  assetStore.assets.forEach((asset) => {
+    if (asset.type === 'link') {
+      scene.load.image(asset.key, asset.value)
+    }
+    if (asset.type === 'base64') {
+      scene.textures.addBase64(asset.key, asset.value)
+    }
+  })
+
   scene.load.image('tiles', '/assets/zone/tiles.png')
   scene.load.image('walls', '/assets/zone/walls.png')
   scene.load.image('wall1', '/assets/zone/wall1.png')
diff --git a/src/stores/assets.ts b/src/stores/assets.ts
new file mode 100644
index 0000000..a0aeea3
--- /dev/null
+++ b/src/stores/assets.ts
@@ -0,0 +1,16 @@
+import { defineStore } from 'pinia'
+import { type Asset } from '@/types'
+
+export const useAssetStore = defineStore('assets', {
+  state: () => ({
+    assets: [] as Asset[]
+  }),
+  actions: {
+    setAssets(assets: Asset[]) {
+      this.assets = assets
+    },
+    addAsset(asset: Asset) {
+      this.assets.push(asset)
+    }
+  }
+})
diff --git a/src/types.ts b/src/types.ts
index 93e8fef..6c50c91 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -64,3 +64,10 @@ export type Chat = {
   message: string
   createdAt: Date
 }
+
+export type Asset = {
+  key: string
+  value: string
+  group: 'tiles' | 'objects' | 'sound' | 'music' | 'ui' | 'font' | 'other'
+  type: 'base64' | 'link'
+}