diff --git a/src/components/gameMaster/zoneEditor/partials/Toolbar.vue b/src/components/gameMaster/zoneEditor/partials/Toolbar.vue
index 806abb1..e7cbc24 100644
--- a/src/components/gameMaster/zoneEditor/partials/Toolbar.vue
+++ b/src/components/gameMaster/zoneEditor/partials/Toolbar.vue
@@ -2,13 +2,13 @@
   <div class="flex justify-center p-5">
     <div class="toolbar fixed bottom-0 m-3 rounded left-0 right-0 flex bg-gray-300/80 solid border-solid border-2 border-cyan ext-gray-50 p-1.5 px-3 p min-w-11/12 h-10">
       <div class="tools flex gap-2.5" v-if="zoneEditorStore.zone">
-        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')">
+        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'move' }" @click="handleMoveClick">
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'move' }">(M)</span>
         </button>
 
         <div class="w-px bg-cyan"></div>
 
-        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'pencil' }" @click="handlePencilClick">
+        <button ref="clickOutsideElement" class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'pencil' }" @click="handlePencilClick">
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'pencil' }">(P)</span>
           <div class="select" v-if="zoneEditorStore.tool === 'pencil'">
             <div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectPencilOpen }">
@@ -35,7 +35,7 @@
 
         <div class="w-px bg-cyan"></div>
 
-        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'eraser' }" @click="handleEraserClick">
+        <button ref="clickOutsideElement" class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'eraser' }" @click="handleEraserClick">
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'eraser' }">(E)</span>
           <div class="select" v-if="zoneEditorStore.tool === 'eraser'">
             <div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectEraserOpen }">
@@ -62,14 +62,14 @@
 
         <div class="w-px bg-cyan"></div>
 
-        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'paint' }" @click="zoneEditorStore.setTool('paint')">
+        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'paint' }" @click="handlePaintClick">
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/paint.svg" alt="Paint bucket" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'paint' }">(B)</span>
         </button>
 
         <div class="w-px bg-cyan"></div>
 
-        <button class="flex justify-center items-center min-w-10 p-0 relative" @click="() => zoneEditorStore.toggleSettingsModal()" v-if="zoneEditorStore.zone">
-          <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'settings' }">(Z)</span>
+        <button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleSettingsClick" v-if="zoneEditorStore.zone">
+          <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" /> <span class="ml-2.5">(Z)</span>
         </button>
       </div>
 
@@ -88,6 +88,7 @@ import { onBeforeUnmount, onMounted, ref } from 'vue'
 import { useScene } from 'phavuer'
 import { getTile } from '@/composables/zoneComposable'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
+import { onClickOutside } from '@vueuse/core'
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 
 const zoneEditorStore = useZoneEditorStore()
@@ -98,6 +99,8 @@ const props = defineProps({
 const scene = useScene()
 const emit = defineEmits(['move', 'eraser', 'pencil', 'paint', 'save', 'clear'])
 
+const clickOutsideElement = ref(null)
+
 // track select state
 let selectPencilOpen = ref(false)
 let selectEraserOpen = ref(false)
@@ -168,14 +171,34 @@ onBeforeUnmount(() => {
   removeEventListener('keydown', initKeyShortcuts)
 })
 
+function handleMoveClick() {
+  zoneEditorStore.setTool('move')
+  selectEraserOpen.value = false
+  selectPencilOpen.value = false
+}
+
 function handlePencilClick() {
   zoneEditorStore.setTool('pencil')
   selectPencilOpen.value = !selectPencilOpen.value
+  selectEraserOpen.value = false
 }
 
 function handleEraserClick() {
   zoneEditorStore.setTool('eraser')
   selectEraserOpen.value = !selectEraserOpen.value
+  selectPencilOpen.value = false
+}
+
+function handlePaintClick() {
+  zoneEditorStore.setTool('paint')
+  selectEraserOpen.value = false
+  selectPencilOpen.value = false
+}
+
+function handleSettingsClick() {
+  zoneEditorStore.toggleSettingsModal()
+  selectEraserOpen.value = false
+  selectPencilOpen.value = false
 }
 
 // Key bindings
@@ -186,24 +209,36 @@ function initKeyShortcuts(event: KeyboardEvent) {
   if (document.activeElement?.tagName === 'INPUT') return
 
   if (event.key === 'm') {
-    zoneEditorStore.setTool('move')
+    handleMoveClick()
   }
 
   if (event.key === 'p') {
-    zoneEditorStore.setTool('pencil')
+    handlePencilClick()
   }
 
   if (event.key === 'e') {
-    zoneEditorStore.setTool('eraser')
+    handleEraserClick()
   }
 
   if (event.key === 'b') {
-    zoneEditorStore.setTool('paint')
+    handlePaintClick()
   }
 
   if (event.key === 'z') {
-    console.log('settings')
-    zoneEditorStore.toggleSettingsModal()
+    handleSettingsClick()
+  }
+}
+
+onClickOutside(clickOutsideElement, event => handleClickOutside())
+
+
+function handleClickOutside() {
+  if (selectPencilOpen.value) {
+    selectPencilOpen.value = false
+  } 
+  
+  if(selectEraserOpen.value) {
+    selectEraserOpen.value = false
   }
 }
 </script>