diff --git a/package-lock.json b/package-lock.json
index 64b6789..29cc4c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2475,15 +2475,15 @@
       "license": "MIT"
     },
     "node_modules/@vueuse/core": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.10.0.tgz",
-      "integrity": "sha512-vexJ/YXYs2S42B783rI95lMt3GzEwkxzC8Hb0Ndpd8rD+p+Lk/Za4bd797Ym7yq4jXqdSyj3JLChunF/vyYjUw==",
+      "version": "10.11.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.0.tgz",
+      "integrity": "sha512-x3sD4Mkm7PJ+pcq3HX8PLPBadXCAlSDR/waK87dz0gQE+qJnaaFhc/dZVfJz+IUYzTMVGum2QlR7ImiJQN4s6g==",
       "license": "MIT",
       "dependencies": {
         "@types/web-bluetooth": "^0.0.20",
-        "@vueuse/metadata": "10.10.0",
-        "@vueuse/shared": "10.10.0",
-        "vue-demi": ">=0.14.7"
+        "@vueuse/metadata": "10.11.0",
+        "@vueuse/shared": "10.11.0",
+        "vue-demi": ">=0.14.8"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
@@ -2516,31 +2516,31 @@
       }
     },
     "node_modules/@vueuse/integrations": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/integrations/-/integrations-10.10.0.tgz",
-      "integrity": "sha512-vHGeK7X6mkdkpcm1eE9t3Cpm21pNVfZRwrjwwbrEs9XftnSgszF4831G2rei8Dt9cIYJIfFV+iyx/29muimJPQ==",
+      "version": "10.11.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/integrations/-/integrations-10.11.0.tgz",
+      "integrity": "sha512-Pp6MtWEIr+NDOccWd8j59Kpjy5YDXogXI61Kb1JxvSfVBO8NzFQkmrKmSZz47i+ZqHnIzxaT38L358yDHTncZg==",
       "license": "MIT",
       "dependencies": {
-        "@vueuse/core": "10.10.0",
-        "@vueuse/shared": "10.10.0",
-        "vue-demi": ">=0.14.7"
+        "@vueuse/core": "10.11.0",
+        "@vueuse/shared": "10.11.0",
+        "vue-demi": ">=0.14.8"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       },
       "peerDependencies": {
-        "async-validator": "*",
-        "axios": "*",
-        "change-case": "*",
-        "drauu": "*",
-        "focus-trap": "*",
-        "fuse.js": "*",
-        "idb-keyval": "*",
-        "jwt-decode": "*",
-        "nprogress": "*",
-        "qrcode": "*",
-        "sortablejs": "*",
-        "universal-cookie": "*"
+        "async-validator": "^4",
+        "axios": "^1",
+        "change-case": "^4",
+        "drauu": "^0.3",
+        "focus-trap": "^7",
+        "fuse.js": "^6",
+        "idb-keyval": "^6",
+        "jwt-decode": "^3",
+        "nprogress": "^0.2",
+        "qrcode": "^1.5",
+        "sortablejs": "^1",
+        "universal-cookie": "^6"
       },
       "peerDependenciesMeta": {
         "async-validator": {
@@ -2608,21 +2608,21 @@
       }
     },
     "node_modules/@vueuse/metadata": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.10.0.tgz",
-      "integrity": "sha512-UNAo2sTCAW5ge6OErPEHb5z7NEAg3XcO9Cj7OK45aZXfLLH1QkexDcZD77HBi5zvEiLOm1An+p/4b5K3Worpug==",
+      "version": "10.11.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.0.tgz",
+      "integrity": "sha512-kQX7l6l8dVWNqlqyN3ePW3KmjCQO3ZMgXuBMddIu83CmucrsBfXlH+JoviYyRBws/yLTQO8g3Pbw+bdIoVm4oQ==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@vueuse/shared": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.10.0.tgz",
-      "integrity": "sha512-2aW33Ac0Uk0U+9yo3Ypg9s5KcR42cuehRWl7vnUHadQyFvCktseyxxEPBi1Eiq4D2yBGACOnqLZpx1eMc7g5Og==",
+      "version": "10.11.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.0.tgz",
+      "integrity": "sha512-fyNoIXEq3PfX1L3NkNhtVQUSRtqYwJtJg+Bp9rIzculIZWHTkKSysujrOk2J+NrRulLTQH9+3gGSfYLWSEWU1A==",
       "license": "MIT",
       "dependencies": {
-        "vue-demi": ">=0.14.7"
+        "vue-demi": ">=0.14.8"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
@@ -3411,9 +3411,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.798",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.798.tgz",
-      "integrity": "sha512-by9J2CiM9KPGj9qfp5U4FcPSbXJG7FNzqnYaY4WLzX+v2PHieVGmnsA4dxfpGE3QEC7JofpPZmn7Vn1B9NR2+Q==",
+      "version": "1.4.799",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.799.tgz",
+      "integrity": "sha512-3D3DwWkRTzrdEpntY0hMLYwj7SeBk1138CkPE8sBDSj3WzrzOiG2rHm3luw8jucpf+WiyLBCZyU9lMHyQI9M9Q==",
       "dev": true,
       "license": "ISC"
     },
@@ -3982,9 +3982,9 @@
       }
     },
     "node_modules/foreground-child": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
-      "integrity": "sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.0.tgz",
+      "integrity": "sha512-CrWQNaEl1/6WeZoarcM9LHupTo3RpZO2Pdk1vktwzPiQTsJnAKJmm3TACKeG5UZbWDfaH2AbvYxzP96y0MT7fA==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -5809,9 +5809,9 @@
       }
     },
     "node_modules/rfdc": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.1.tgz",
-      "integrity": "sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg==",
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
       "dev": true,
       "license": "MIT"
     },
@@ -5966,9 +5966,9 @@
       "license": "MIT"
     },
     "node_modules/sass": {
-      "version": "1.77.4",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.4.tgz",
-      "integrity": "sha512-vcF3Ckow6g939GMA4PeU7b2K/9FALXk2KF9J87txdHzXbUF9XRQRwSxcAs/fGaTnJeBFd7UoV22j3lzMLdM0Pw==",
+      "version": "1.77.5",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.5.tgz",
+      "integrity": "sha512-oDfX1mukIlxacPdQqNb6mV2tVCrnE+P3nVYioy72V5tlk56CPNcO4TCuFcaCRKKfJ1M3lH95CleRS+dVKL2qMg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/public/assets/icons/zoneEditor/cart.svg b/public/assets/icons/zoneEditor/cart.svg
new file mode 100644
index 0000000..cf179c5
--- /dev/null
+++ b/public/assets/icons/zoneEditor/cart.svg
@@ -0,0 +1 @@
+<svg height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m1 1c-.55228475 0-1 .44771525-1 1s.44771525 1 1 1h1.7792969a.69367162.69367162 35.784145 0 1 .65808707.47435058l3.2969911 9.8928369c.14641172.43923517.16502704.91215746.05273437 1.3613281l-.27148437 1.0878906c-.39834445 1.5933778.84195876 3.1835938 2.484375 3.1835938h12c.55228475 0 1-.44771525 1-1s-.44771525-1-1-1h-12c-.38938619 0-.6393619-.31950554-.54492188-.69726562l.20473297-.81770594a.64062109.64062109 142.02823 0 1 .6214389-.48502844h10.71875c.43057012.00022511.81295428-.27515444.94921875-.68359375l2.6660156-8c.21596464-.64778704-.26638007-1.3167178-.94921876-1.3164062h-16.111328a.69371294.69371294 35.782526 0 1 -.65811388-.47434165l-.94735487-2.8420646c-.13626447-.40843931-.51864863-.68381886-.94921875-.68359375zm7 19c-1.1045695 0-2 .8954305-2 2s.8954305 2 2 2 2-.8954305 2-2-.8954305-2-2-2zm12 0c-1.1045695 0-2 .8954305-2 2s.8954305 2 2 2 2-.8954305 2-2-.8954305-2-2-2z" solid-color="rgb(0,0,0)" font-feature-settings="normal" font-variant-alternates="normal" font-variant-caps="normal" font-variant-east-asian="normal" font-variant-ligatures="normal" font-variant-numeric="normal" font-variant-position="normal" font-variation-settings="normal" inline-size="0" isolation="auto" mix-blend-mode="normal" paint-order="fill markers stroke" shape-margin="0" shape-padding="0" text-decoration-color="rgb(0,0,0)" text-decoration-line="none" text-decoration-style="solid" text-indent="0" text-orientation="mixed" text-transform="none" white-space="normal"/></svg>
\ No newline at end of file
diff --git a/public/assets/icons/zoneEditor/gear.svg b/public/assets/icons/zoneEditor/gear.svg
new file mode 100644
index 0000000..1c3cf83
--- /dev/null
+++ b/public/assets/icons/zoneEditor/gear.svg
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M500.633,211.454l-58.729-14.443c-3.53-11.133-8.071-21.929-13.55-32.256c8.818-14.678,27.349-45.571,27.349-45.571
+			c3.545-5.903,2.607-13.462-2.256-18.325l-42.422-42.422c-4.863-4.878-12.407-5.815-18.325-2.256L347.055,83.53
+			c-10.269-5.435-21.006-9.932-32.065-13.433l-14.443-58.729C298.876,4.688,292.885,0,286,0h-60
+			c-6.885,0-12.891,4.688-14.546,11.367c0,0-10.005,40.99-14.429,58.715c-11.792,3.735-23.188,8.584-34.043,14.502l-47.329-28.403
+			c-5.918-3.516-13.447-2.607-18.325,2.256l-42.422,42.422c-4.863,4.863-5.801,12.422-2.256,18.325l29.268,48.882
+			c-4.717,9.302-8.672,18.984-11.821,28.901l-58.729,14.487C4.688,213.124,0,219.115,0,226v60c0,6.885,4.688,12.891,11.367,14.546
+			l58.744,14.443c3.56,11.294,8.188,22.266,13.799,32.798l-26.191,43.652c-3.545,5.903-2.607,13.462,2.256,18.325l42.422,42.422
+			c4.849,4.849,12.407,5.771,18.325,2.256c0,0,29.37-17.607,43.755-26.221c10.415,5.552,21.313,10.137,32.549,13.696l14.429,58.715
+			C213.109,507.313,219.115,512,226,512h60c6.885,0,12.876-4.688,14.546-11.367l14.429-58.715
+			c11.558-3.662,22.69-8.394,33.281-14.136c14.78,8.862,44.443,26.66,44.443,26.66c5.903,3.53,13.462,2.622,18.325-2.256
+			l42.422-42.422c4.863-4.863,5.801-12.422,2.256-18.325l-26.968-44.927c5.317-10.093,9.727-20.654,13.169-31.523l58.729-14.443
+			C507.313,298.876,512,292.885,512,286v-60C512,219.115,507.313,213.124,500.633,211.454z M256,361c-57.891,0-105-47.109-105-105
+			s47.109-105,105-105s105,47.109,105,105S313.891,361,256,361z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/public/assets/icons/zoneEditor/monster.svg b/public/assets/icons/zoneEditor/monster.svg
new file mode 100644
index 0000000..85d828f
--- /dev/null
+++ b/public/assets/icons/zoneEditor/monster.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 511.062 511.062" height="512" viewBox="0 0 511.062 511.062" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m255.531 93.443c-36.025 0-65.333 29.309-65.333 65.333 3.589 86.674 127.091 86.649 130.667-.001-.001-36.024-29.309-65.332-65.334-65.332zm0 80.333c-8.25 0-15-6.72-15-15 .841-19.901 29.162-19.895 30 0 0 8.28-6.75 15-15 15z"/><path d="m458.701 390.499c-28.097-28.119-43.57-65.477-43.57-105.19v-126.533c-8.791-211.783-310.487-211.619-319.199 0v126.533c0 39.714-15.474 77.071-43.57 105.19-13.354 13.335-20.717 31.092-20.717 49.988-.001 18.897 7.361 36.655 20.729 50.003 30.731 31.053 77.989 23.527 99.886.066 13.383-13.383 33.925-13.197 47.06-1.533 29.577 29.34 82.846 29.339 112.422 0 13.135-11.664 33.677-11.85 47.06 1.533 21.976 23.524 69.208 30.934 99.886-.066 13.368-13.348 20.73-31.105 20.729-50.003.001-18.896-7.361-36.653-20.716-49.988zm-203.17-136.389c-52.567 0-95.333-42.767-95.333-95.334 5.237-126.472 185.449-126.436 190.667.001-.001 52.566-42.767 95.333-95.334 95.333z"/></g></svg>
\ No newline at end of file
diff --git a/src/components/utilities/zoneEditor/Toolbar.vue b/src/components/utilities/zoneEditor/Toolbar.vue
index cb23caa..fde8feb 100644
--- a/src/components/utilities/zoneEditor/Toolbar.vue
+++ b/src/components/utilities/zoneEditor/Toolbar.vue
@@ -13,8 +13,21 @@
         <button :class="{ active: zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')">
           <img src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" />
         </button>
+        <div class="divider"></div>
+        <button>
+          <img src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" />
+        </button>
+        <div class="divider"></div>
+        <button>
+          <img src="/assets/icons/zoneEditor/monster.svg" alt="Zone settings" />
+        </button>
+        <div class="divider"></div>
+        <button>
+          <img src="/assets/icons/zoneEditor/cart.svg" alt="Zone settings" />
+        </button>
       </div>
       <div class="buttons">
+        <button class="btn-cyan">Save as new</button>
         <button class="btn-cyan">Save</button>
         <button class="btn-cyan">Load</button>
         <button class="btn-cyan">Clear</button>
diff --git a/src/components/utilities/zoneEditor/ZoneEditor.vue b/src/components/utilities/zoneEditor/ZoneEditor.vue
index b3a11b2..7cd641e 100644
--- a/src/components/utilities/zoneEditor/ZoneEditor.vue
+++ b/src/components/utilities/zoneEditor/ZoneEditor.vue
@@ -3,6 +3,7 @@
   <Controls :layer="layer" />
   <Toolbar :layer="layer" @erase="erase" @tile="tile" />
   <Tiles />
+  <ZoneSettings />
 </template>
 
 <script setup lang="ts">
@@ -17,6 +18,7 @@ import { useZoneStore } from '@/stores/zone'
 import Toolbar from '@/components/utilities/zoneEditor/Toolbar.vue'
 import Tiles from '@/components/utilities/zoneEditor/Tiles.vue'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
+import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
 
 // Phavuer logic
 let scene = useScene()
diff --git a/src/components/utilities/zoneEditor/ZoneSettings.vue b/src/components/utilities/zoneEditor/ZoneSettings.vue
new file mode 100644
index 0000000..48a5584
--- /dev/null
+++ b/src/components/utilities/zoneEditor/ZoneSettings.vue
@@ -0,0 +1,42 @@
+<template>
+  <Modal :isModalOpen="properties.isModalOpen" @modal:close="() => console.log(1)">
+    <template #modalHeader>
+      <h3 class="modal-title">Zone settings</h3>
+    </template>
+
+    <template #modalBody>
+      <form method="post" @submit.prevent="" class="modal-form">
+        <div class="form-fields">
+          <div>
+            <label for="name">Name</label>
+            <input v-model="name" name="name" id="name" />
+          </div>
+          <div>
+            <label for="name">Width</label>
+            <input v-model="name" name="name" id="name" />
+
+            <label for="name">Height</label>
+            <input v-model="name" name="name" id="name" />
+          </div>
+          <div>
+            <label for="name">PVP enabled</label>
+            <input v-model="name" name="name" id="name" />
+          </div>
+        </div>
+        <div class="submit">
+          <button class="btn-cyan" type="submit">Save</button>
+        </div>
+      </form>
+      <button class="btn-cyan" @click="() => console.log(1)">Cancel</button>
+    </template>
+  </Modal>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Modal from '@/components/utilities/Modal.vue'
+
+const properties = ref({
+  isModalOpen: true
+})
+</script>
\ No newline at end of file