diff --git a/package-lock.json b/package-lock.json
index d5ccded..ffab0d0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2535,9 +2535,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.87",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.87.tgz",
-      "integrity": "sha512-mPFwmEWmRivw2F8x3w3l2m6htAUN97Gy0kwpO++2m9iT1Gt8RCFVUfv9U/sIbHJ6rY4P6/ooqFL/eL7ock+pPg==",
+      "version": "1.5.88",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.88.tgz",
+      "integrity": "sha512-K3C2qf1o+bGzbilTDCTBhTQcMS9KW60yTAaTeeXsfvQuTDDwlokLam/AdqlqcSy9u4UainDgsHV23ksXAOgamw==",
       "dev": true,
       "license": "ISC"
     },
diff --git a/src/application/utilities.ts b/src/application/utilities.ts
index 5f4f9fc..55e5ed4 100644
--- a/src/application/utilities.ts
+++ b/src/application/utilities.ts
@@ -1,6 +1,6 @@
-import type { BaseStorage } from '@/storage/baseStorage'
 import config from '@/application/config'
 import type { HttpResponse } from '@/application/types'
+import type { BaseStorage } from '@/storage/baseStorage'
 
 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))
@@ -49,4 +49,4 @@ export async function downloadCache<T extends { id: string; updatedAt: Date }>(e
 
     await storage.add(item, overwrite)
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue b/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue
index 00c5d9b..14c4799 100644
--- a/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue
@@ -33,7 +33,6 @@ import { computed, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
 
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
-const mapEditorStore = useMapEditorStore()
 
 const selectedTile = computed(() => assetManagerStore.selectedTile)
 
@@ -72,10 +71,6 @@ function refreshTileList(unsetSelectedTile = true) {
     if (unsetSelectedTile) {
       assetManagerStore.setSelectedTile(null)
     }
-
-    if (mapEditorStore.active) {
-      mapEditorStore.setTileList(response)
-    }
   })
 }
 
diff --git a/src/components/gameMaster/mapEditor/Map.vue b/src/components/gameMaster/mapEditor/Map.vue
index d600ccb..7a2af2a 100644
--- a/src/components/gameMaster/mapEditor/Map.vue
+++ b/src/components/gameMaster/mapEditor/Map.vue
@@ -9,7 +9,7 @@ import MapEventTiles from '@/components/gameMaster/mapEditor/mapPartials/MapEven
 import MapTiles from '@/components/gameMaster/mapEditor/mapPartials/MapTiles.vue'
 import PlacedMapObjects from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
-import { onUnmounted, shallowRef } from 'vue'
+import { onMounted, onUnmounted, shallowRef } from 'vue'
 
 const mapEditorStore = useMapEditorStore()
 const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
diff --git a/src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue b/src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue
index 4b55b04..cbf80e6 100644
--- a/src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue
+++ b/src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue
@@ -5,17 +5,19 @@
 <script setup lang="ts">
 import config from '@/application/config'
 import Controls from '@/components/utilities/Controls.vue'
-import { createTileArray, getTile, loadAllTilesIntoScene, placeTile, setLayerTiles } from '@/composables/mapComposable'
+import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/mapComposable'
+import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { TileStorage } from '@/storage/storages'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { useScene } from 'phavuer'
-import { onBeforeMount, onMounted, onUnmounted, shallowRef, watch } from 'vue'
+import { onMounted, onUnmounted, shallowRef, watch } from 'vue'
 
 import Tileset = Phaser.Tilemaps.Tileset
 
 const emit = defineEmits(['tileMap:create'])
 
 const scene = useScene()
+const mapEditor = useMapEditorComposable()
 const mapEditorStore = useMapEditorStore()
 const tileStorage = new TileStorage()
 
@@ -24,8 +26,8 @@ const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
 
 function createTileMap() {
   const mapData = new Phaser.Tilemaps.MapData({
-    width: mapEditorStore.map?.width,
-    height: mapEditorStore.map?.height,
+    width: mapEditor.currentMap.value?.width,
+    height: mapEditor.currentMap.value?.height,
     tileWidth: config.tile_size.width,
     tileHeight: config.tile_size.height,
     orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
@@ -59,7 +61,7 @@ function pencil(pointer: Phaser.Input.Pointer) {
   if (!tileMap.value || !tileLayer.value) return
 
   // Check if map is set
-  if (!mapEditorStore.map) return
+  if (!mapEditor.currentMap.value) return
 
   // Check if tool is pencil
   if (mapEditorStore.tool !== 'pencil') return
@@ -84,14 +86,14 @@ function pencil(pointer: Phaser.Input.Pointer) {
   placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, mapEditorStore.selectedTile)
 
   // Adjust mapEditorStore.map.tiles
-  mapEditorStore.map.tiles[tile.y][tile.x] = mapEditorStore.selectedTile
+  mapEditor.currentMap.value.tiles[tile.y][tile.x] = mapEditor.currentMap.value.tiles[tile.y][tile.x]
 }
 
 function eraser(pointer: Phaser.Input.Pointer) {
   if (!tileMap.value || !tileLayer.value) return
 
   // Check if map is set
-  if (!mapEditorStore.map) return
+  if (!mapEditor.currentMap.value) return
 
   // Check if tool is pencil
   if (mapEditorStore.tool !== 'eraser') return
@@ -116,14 +118,14 @@ function eraser(pointer: Phaser.Input.Pointer) {
   placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, 'blank_tile')
 
   // Adjust mapEditorStore.map.tiles
-  mapEditorStore.map.tiles[tile.y][tile.x] = 'blank_tile'
+  mapEditor.currentMap.value.tiles[tile.y][tile.x] = 'blank_tile'
 }
 
 function paint(pointer: Phaser.Input.Pointer) {
   if (!tileMap.value || !tileLayer.value) return
 
   // Check if map is set
-  if (!mapEditorStore.map) return
+  if (!mapEditor.currentMap.value) return
 
   // Check if tool is pencil
   if (mapEditorStore.tool !== 'paint') return
@@ -144,7 +146,7 @@ function paint(pointer: Phaser.Input.Pointer) {
   setLayerTiles(tileMap.value, tileLayer.value, createTileArray(tileMap.value.width, tileMap.value.height, mapEditorStore.selectedTile))
 
   // Adjust mapEditorStore.map.tiles
-  mapEditorStore.map.tiles = createTileArray(tileMap.value.width, tileMap.value.height, mapEditorStore.selectedTile)
+  mapEditor.currentMap.value.tiles = createTileArray(tileMap.value.width, tileMap.value.height, mapEditor.currentMap.value.tiles)
 }
 
 // When alt is pressed, and the pointer is down, select the tile that the pointer is over
@@ -152,7 +154,7 @@ function tilePicker(pointer: Phaser.Input.Pointer) {
   if (!tileMap.value || !tileLayer.value) return
 
   // Check if map is set
-  if (!mapEditorStore.map) return
+  if (!mapEditor.currentMap.value) return
 
   // Check if tool is pencil
   if (mapEditorStore.tool !== 'pencil') return
@@ -174,34 +176,35 @@ function tilePicker(pointer: Phaser.Input.Pointer) {
   if (!tile) return
 
   // Select the tile
-  mapEditorStore.setSelectedTile(mapEditorStore.map.tiles[tile.y][tile.x])
+  mapEditorStore.setSelectedMapObject(mapEditor.currentMap.value.tiles[tile.y][tile.x])
 }
 
 watch(
   () => mapEditorStore.shouldClearTiles,
   (shouldClear) => {
-    if (shouldClear && mapEditorStore.map && tileMap.value && tileLayer.value) {
+    if (shouldClear && mapEditor.currentMap.value && tileMap.value && tileLayer.value) {
       const blankTiles = createTileArray(tileMap.value.width, tileMap.value.height, 'blank_tile')
       setLayerTiles(tileMap.value, tileLayer.value, blankTiles)
-      mapEditorStore.map.tiles = blankTiles
+      mapEditor.currentMap.value.tiles = blankTiles
       mapEditorStore.resetClearTilesFlag()
     }
   }
 )
 
 onMounted(async () => {
-  if (!mapEditorStore.map?.tiles) return
+  if (!mapEditor.currentMap.value?.tiles) return
+  console.log(mapEditor.currentMap.value)
 
   tileMap.value = createTileMap()
   tileLayer.value = await createTileLayer(tileMap.value)
 
   // First fill the entire map with blank tiles using current map dimensions
-  const blankTiles = createTileArray(mapEditorStore.map.width, mapEditorStore.map.height, 'blank_tile')
+  const blankTiles = createTileArray(mapEditor.currentMap.value.width, mapEditor.currentMap.value.height, 'blank_tile')
 
   // Then overlay the map tiles, but only within the current map dimensions
-  const mapTiles = mapEditorStore.map.tiles
-  for (let y = 0; y < mapEditorStore.map.height; y++) {
-    for (let x = 0; x < mapEditorStore.map.width; x++) {
+  const mapTiles = mapEditor.currentMap.value.tiles
+  for (let y = 0; y < mapEditor.currentMap.value.height; y++) {
+    for (let x = 0; x < mapEditor.currentMap.value.width; x++) {
       if (mapTiles[y] && mapTiles[y][x] !== undefined) {
         blankTiles[y][x] = mapTiles[y][x]
       }
diff --git a/src/components/gameMaster/mapEditor/partials/MapList.vue b/src/components/gameMaster/mapEditor/partials/MapList.vue
index bbb3621..2542e2d 100644
--- a/src/components/gameMaster/mapEditor/partials/MapList.vue
+++ b/src/components/gameMaster/mapEditor/partials/MapList.vue
@@ -32,6 +32,7 @@
 import type { Map, UUID } from '@/application/types'
 import CreateMap from '@/components/gameMaster/mapEditor/partials/CreateMap.vue'
 import Modal from '@/components/utilities/Modal.vue'
+import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { MapStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
@@ -40,6 +41,7 @@ import { onMounted, ref } from 'vue'
 const gameStore = useGameStore()
 const mapEditorStore = useMapEditorStore()
 
+const mapEditor = useMapEditorComposable()
 const mapStorage = new MapStorage()
 const mapList = ref<Map[]>([])
 
@@ -52,8 +54,8 @@ async function fetchMaps() {
 }
 
 function loadMap(id: UUID) {
-  gameStore.connection?.emit('gm:map:request', { mapId: id }, (response: UUID) => {
-    mapEditorStore.setMapId(response)
+  gameStore.connection?.emit('gm:map:request', { mapId: id }, (response: Map) => {
+    mapEditor.loadMap(response)
   })
   mapEditorStore.toggleMapListModal()
 }
diff --git a/src/components/gameMaster/mapEditor/partials/MapSettings.vue b/src/components/gameMaster/mapEditor/partials/MapSettings.vue
index a39ed32..d256ced 100644
--- a/src/components/gameMaster/mapEditor/partials/MapSettings.vue
+++ b/src/components/gameMaster/mapEditor/partials/MapSettings.vue
@@ -47,60 +47,53 @@
 </template>
 
 <script setup lang="ts">
+import type { UUID } from '@/application/types'
+import { uuidv4 } from '@/application/utilities'
 import Modal from '@/components/utilities/Modal.vue'
+import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { ref, watch } from 'vue'
 
+const mapEditor = useMapEditorComposable()
 const mapEditorStore = useMapEditorStore()
 const screen = ref('settings')
 
-mapEditorStore.setMapName(mapEditorStore.map?.name)
-mapEditorStore.setMapWidth(mapEditorStore.map?.width)
-mapEditorStore.setMapHeight(mapEditorStore.map?.height)
-mapEditorStore.setMapPvp(mapEditorStore.map?.pvp)
-mapEditorStore.setMapEffects(mapEditorStore.map?.mapEffects)
-
-const name = ref(mapEditorStore.mapSettings?.name)
-const width = ref(mapEditorStore.mapSettings?.width)
-const height = ref(mapEditorStore.mapSettings?.height)
-const pvp = ref(mapEditorStore.mapSettings?.pvp)
-const mapEffects = ref(mapEditorStore.mapSettings?.mapEffects || [])
+const name = ref(mapEditor.currentMap.value?.name)
+const width = ref(mapEditor.currentMap.value?.width)
+const height = ref(mapEditor.currentMap.value?.height)
+const pvp = ref(mapEditor.currentMap.value?.pvp)
+const mapEffects = ref(mapEditor.currentMap.value?.mapEffects || [])
 
 watch(name, (value) => {
-  mapEditorStore.setMapName(value)
+  mapEditor.updateProperty('name', value!)
 })
 
 watch(width, (value) => {
-  mapEditorStore.setMapWidth(value)
+  mapEditor.updateProperty('width', value!)
 })
 
 watch(height, (value) => {
-  mapEditorStore.setMapHeight(value)
+  mapEditor.updateProperty('height', value!)
 })
 
 watch(pvp, (value) => {
-  mapEditorStore.setMapPvp(value)
+  mapEditor.updateProperty('pvp', value!)
 })
 
-watch(
-  mapEffects,
-  (value) => {
-    mapEditorStore.setMapEffects(value)
-  },
-  { deep: true }
-)
+watch(mapEffects, (value) => {
+  mapEditor.updateProperty('mapEffects', value!)
+})
 
 const addEffect = () => {
   mapEffects.value.push({
-    id: Date.now().toString(), // Simple unique id generation
-    mapId: mapEditorStore.map?.id,
-    map: mapEditorStore.map,
+    id: uuidv4() as UUID, // Simple unique id generation
+    map: mapEditor.currentMap.value!,
     effect: '',
     strength: 1
   })
 }
 
-const removeEffect = (index) => {
+const removeEffect = (index: number) => {
   mapEffects.value.splice(index, 1)
 }
 </script>
diff --git a/src/components/gameMaster/mapEditor/partials/TileList.vue b/src/components/gameMaster/mapEditor/partials/TileList.vue
index 6728bd7..b4e025b 100644
--- a/src/components/gameMaster/mapEditor/partials/TileList.vue
+++ b/src/components/gameMaster/mapEditor/partials/TileList.vue
@@ -228,9 +228,5 @@ function isActiveTile(tile: Tile): boolean {
 
 onMounted(async () => {
   isModalOpen.value = true
-  gameStore.connection?.emit('gm:tile:list', {}, (response: Tile[]) => {
-    mapEditorStore.setTileList(response)
-    response.forEach((tile) => processTile(tile))
-  })
 })
 </script>
diff --git a/src/components/gameMaster/mapEditor/partials/Toolbar.vue b/src/components/gameMaster/mapEditor/partials/Toolbar.vue
index b5c2d1e..97cb68c 100644
--- a/src/components/gameMaster/mapEditor/partials/Toolbar.vue
+++ b/src/components/gameMaster/mapEditor/partials/Toolbar.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex justify-center p-5">
     <div class="toolbar fixed bottom-0 left-0 m-3 rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10">
-      <div ref="toolbar" class="tools flex gap-2.5" v-if="mapEditorStore.map">
+      <div ref="toolbar" class="tools flex gap-2.5" v-if="mapEditor.currentMap.value">
         <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan gap-2.5': mapEditorStore.tool === 'move' }" @click="handleClick('move')">
           <img class="invert w-5 h-5" src="/assets/icons/mapEditor/move.svg" alt="Move camera" /> <span class="h-5" :class="{ 'ml-2.5': mapEditorStore.tool !== 'move' }">(M)</span>
         </button>
@@ -68,13 +68,13 @@
 
         <div class="w-px bg-cyan"></div>
 
-        <button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleClick('settings')" v-if="mapEditorStore.map"><img class="invert w-5 h-5" src="/assets/icons/mapEditor/gear.svg" alt="Map settings" /> <span class="h-5 ml-2.5">(Z)</span></button>
+        <button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleClick('settings')"><img class="invert w-5 h-5" src="/assets/icons/mapEditor/gear.svg" alt="Map settings" /> <span class="h-5 ml-2.5">(Z)</span></button>
       </div>
 
       <div class="toolbar fixed bottom-0 right-0 m-3 rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10 space-x-2">
         <button class="btn-cyan px-3.5" @click="() => mapEditorStore.toggleMapListModal()">Load</button>
-        <button class="btn-cyan px-3.5" @click="() => emit('save')" v-if="mapEditorStore.map">Save</button>
-        <button class="btn-cyan px-3.5" @click="() => emit('clear')" v-if="mapEditorStore.map">Clear</button>
+        <button class="btn-cyan px-3.5" @click="() => emit('save')" v-if="mapEditor.currentMap.value">Save</button>
+        <button class="btn-cyan px-3.5" @click="() => emit('clear')" v-if="mapEditor.currentMap.value">Clear</button>
         <button class="btn-cyan px-3.5" @click="() => mapEditorStore.toggleActive()">Exit</button>
       </div>
     </div>
@@ -82,10 +82,12 @@
 </template>
 
 <script setup lang="ts">
+import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { onClickOutside } from '@vueuse/core'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 
+const mapEditor = useMapEditorComposable()
 const mapEditorStore = useMapEditorStore()
 
 const emit = defineEmits(['save', 'clear'])
diff --git a/src/components/screens/Loading.vue b/src/components/screens/Loading.vue
index e943041..08e1b93 100644
--- a/src/components/screens/Loading.vue
+++ b/src/components/screens/Loading.vue
@@ -15,10 +15,10 @@
 </template>
 
 <script setup lang="ts" async>
+import { downloadCache } from '@/application/utilities'
 import { CharacterHairStorage, CharacterTypeStorage, MapObjectStorage, MapStorage, SpriteStorage, TileStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { ref } from 'vue'
-import { downloadCache } from '@/application/utilities'
 
 const gameStore = useGameStore()
 
diff --git a/src/components/screens/MapEditor.vue b/src/components/screens/MapEditor.vue
index 04db6f5..b599e41 100644
--- a/src/components/screens/MapEditor.vue
+++ b/src/components/screens/MapEditor.vue
@@ -4,7 +4,7 @@
       <Scene name="main" @preload="preloadScene">
         <div v-if="!isLoaded" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-3xl font-ui">Loading...</div>
         <div v-else>
-          <Map :key="mapEditorStore.mapId" />
+          <Map :key="mapEditor.currentMap.value?.id" />
           <Toolbar @save="save" @clear="clear" />
           <MapList />
           <TileList />
@@ -29,16 +29,19 @@ import TeleportModal from '@/components/gameMaster/mapEditor/partials/TeleportMo
 import TileList from '@/components/gameMaster/mapEditor/partials/TileList.vue'
 import Toolbar from '@/components/gameMaster/mapEditor/partials/Toolbar.vue'
 import { loadAllTilesIntoScene } from '@/composables/mapComposable'
+import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
+import { MapStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { Game, Scene } from 'phavuer'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
+const mapStorage = new MapStorage()
+const mapEditor = useMapEditorComposable()
 const gameStore = useGameStore()
 const mapEditorStore = useMapEditorStore()
 
 const isLoaded = ref(false)
-const currentMap = ref<MapT | null>(null)
 
 const gameConfig = {
   name: config.name,
@@ -75,18 +78,18 @@ const preloadScene = async (scene: Phaser.Scene) => {
 }
 
 function save() {
-  if (!mapEditorStore.map) return
+  if (!mapEditor.currentMap.value) return
 
   const data = {
-    mapId: mapEditorStore.map.id,
-    name: mapEditorStore.mapSettings.name,
-    width: mapEditorStore.mapSettings.width,
-    height: mapEditorStore.mapSettings.height,
-    tiles: mapEditorStore.map.tiles,
-    pvp: mapEditorStore.map.pvp,
-    mapEffects: mapEditorStore.map.mapEffects?.map(({ id, effect, strength }) => ({ id, effect, strength })) ?? [],
-    mapEventTiles: mapEditorStore.map.mapEventTiles?.map(({ id, type, positionX, positionY, teleport }) => ({ id, type, positionX, positionY, teleport })) ?? [],
-    placedMapObjects: mapEditorStore.map.placedMapObjects?.map(({ id, mapObject, depth, isRotated, positionX, positionY }) => ({ id, mapObject, depth, isRotated, positionX, positionY })) ?? []
+    mapId: mapEditor.currentMap.value.id,
+    name: mapEditor.currentMap.value.name,
+    width: mapEditor.currentMap.value.width,
+    height: mapEditor.currentMap.value.height,
+    tiles: mapEditor.currentMap.value.tiles,
+    pvp: mapEditor.currentMap.value.pvp,
+    mapEffects: mapEditor.currentMap.value.mapEffects?.map(({ id, effect, strength }) => ({ id, effect, strength })) ?? [],
+    mapEventTiles: mapEditor.currentMap.value.mapEventTiles?.map(({ id, type, positionX, positionY, teleport }) => ({ id, type, positionX, positionY, teleport })) ?? [],
+    placedMapObjects: mapEditor.currentMap.value.placedMapObjects?.map(({ id, mapObject, depth, isRotated, positionX, positionY }) => ({ id, mapObject, depth, isRotated, positionX, positionY })) ?? []
   }
 
   if (mapEditorStore.isSettingsModalShown) {
@@ -94,16 +97,15 @@ function save() {
   }
 
   gameStore.connection?.emit('gm:map:update', data, (response: MapT) => {
-    mapEditorStore.setMap(response)
+    mapStorage.update(response.id, response)
   })
 }
 
 function clear() {
-  if (!mapEditorStore.map) return
+  if (!mapEditor.currentMap.value) return
 
-  // Clear objects, event tiles and tiles
-  mapEditorStore.map.placedMapObjects = []
-  mapEditorStore.map.mapEventTiles = []
+  // Clear placed objects, event tiles and tiles
+  mapEditor.clearMap()
   mapEditorStore.triggerClearTiles()
 }
 </script>
diff --git a/src/composables/useMapEditorComposable.ts b/src/composables/useMapEditorComposable.ts
index e69de29..af344b4 100644
--- a/src/composables/useMapEditorComposable.ts
+++ b/src/composables/useMapEditorComposable.ts
@@ -0,0 +1,31 @@
+import type { Map } from '@/application/types'
+import { ref } from 'vue'
+
+const currentMap = ref<Map | null>(null)
+
+export function useMapEditorComposable() {
+  const loadMap = (map: Map) => {
+    currentMap.value = map
+  }
+
+  const updateProperty = <K extends keyof Map>(property: K, value: Map[K]) => {
+    if (currentMap.value) {
+      currentMap.value[property] = value
+    }
+  }
+
+  const clearMap = () => {
+    if (!currentMap.value) return
+
+    currentMap.value.placedMapObjects = []
+    currentMap.value.mapEventTiles = []
+    currentMap.value.tiles = []
+  }
+
+  return {
+    currentMap,
+    loadMap,
+    updateProperty,
+    clearMap
+  }
+}
diff --git a/src/storage/baseStorage.ts b/src/storage/baseStorage.ts
index 479e264..457c975 100644
--- a/src/storage/baseStorage.ts
+++ b/src/storage/baseStorage.ts
@@ -23,6 +23,14 @@ export class BaseStorage<T extends { id: string }> {
     }
   }
 
+  async update(id: string, item: Partial<T>) {
+    try {
+      await this.dexie.table(this.tableName).update(id, item)
+    } catch (error) {
+      console.error(`Failed to update ${this.tableName} ${id}:`, error)
+    }
+  }
+
   async delete(id: string) {
     try {
       await this.dexie.table(this.tableName).delete(id)
diff --git a/src/stores/mapEditorStore.ts b/src/stores/mapEditorStore.ts
index fd25d5a..8c7906b 100644
--- a/src/stores/mapEditorStore.ts
+++ b/src/stores/mapEditorStore.ts
@@ -1,8 +1,8 @@
-import type { Map, MapEffect, MapObject, Tile, UUID } from '@/application/types'
+import type { MapObject } from '@/application/types'
 import { defineStore } from 'pinia'
 
 export type TeleportSettings = {
-  toMap: Map | null
+  toMapId: string
   toPositionX: number
   toPositionY: number
   toRotation: number
@@ -12,12 +12,9 @@ export const useMapEditorStore = defineStore('mapEditor', {
   state: () => {
     return {
       active: false,
-      mapId: '',
       tool: 'move',
       drawMode: 'tile',
       eraserMode: 'tile',
-      tileList: [] as Tile[],
-      mapObjectList: [] as MapObject[],
       selectedTile: '',
       selectedMapObject: null as MapObject | null,
       isTileListModalShown: false,
@@ -26,15 +23,8 @@ export const useMapEditorStore = defineStore('mapEditor', {
       isCreateMapModalShown: false,
       isSettingsModalShown: false,
       shouldClearTiles: false,
-      mapSettings: {
-        name: '',
-        width: 0,
-        height: 0,
-        pvp: false,
-        mapEffects: [] as MapEffect[]
-      },
       teleportSettings: {
-        toMap: null,
+        toMapId: '',
         toPositionX: 0,
         toPositionY: 0,
         toRotation: 0
@@ -46,24 +36,6 @@ export const useMapEditorStore = defineStore('mapEditor', {
       if (this.active) this.reset()
       this.active = !this.active
     },
-    setMapId(mapId: UUID) {
-      this.mapId = mapId
-    },
-    setMapName(name: string) {
-      this.mapSettings.name = name
-    },
-    setMapWidth(width: number) {
-      this.mapSettings.width = width
-    },
-    setMapHeight(height: number) {
-      this.mapSettings.height = height
-    },
-    setMapPvp(pvp: boolean) {
-      this.mapSettings.pvp = pvp
-    },
-    setMapEffects(mapEffects: MapEffect[]) {
-      this.mapSettings.mapEffects = mapEffects
-    },
     setTool(tool: string) {
       this.tool = tool
     },
@@ -73,12 +45,6 @@ export const useMapEditorStore = defineStore('mapEditor', {
     setEraserMode(mode: string) {
       this.eraserMode = mode
     },
-    setTileList(tiles: Tile[]) {
-      this.tileList = tiles
-    },
-    setMapObjectList(objects: MapObject[]) {
-      this.mapObjectList = objects
-    },
     setSelectedTile(tile: string) {
       this.selectedTile = tile
     },
@@ -105,9 +71,6 @@ export const useMapEditorStore = defineStore('mapEditor', {
       this.shouldClearTiles = false
     },
     reset() {
-      this.mapId = ''
-      this.tileList = []
-      this.mapObjectList = []
       this.tool = 'move'
       this.drawMode = 'tile'
       this.selectedTile = ''