diff --git a/src/csui/PlayerOverlay.vue b/src/csui/PlayerOverlay.vue
index 27b6704..af0c98c 100644
--- a/src/csui/PlayerOverlay.vue
+++ b/src/csui/PlayerOverlay.vue
@@ -1,12 +1,12 @@
 <template>
   <div
-    class="context-spawn uw-ui-trigger"
-    style="z-index: 1000"
+    class="context-spawn debug-1"
+    style="z-index: 1000;"
+    v-if="!triggerZoneEditorVisible"
   >
     <div
-      class="spawn-container uw-trigger"
+      class="spawn-container uw-ui-trigger debug-2"
       :style="triggerZoneStyles"
-      @mouseenter="(ev) => setTriggerZoneActive(true, ev)"
     >
       &nbsp;
     </div>
@@ -167,8 +167,9 @@
   </div>
 
   <div
-    class="context-spawn uw-ui-trigger"
-    style="z-index: 1000;"
+    v-if="triggerZoneEditorVisible"
+    class="context-spawn"
+    style="z-index: 1000; border: 2px dashed red"
   >
     <TriggerZoneEditor
       class="uw-clickable"
@@ -228,6 +229,7 @@ export default {
       uwWindowFadeOut: false,
       uwWindowCloseTimeout: undefined,
       uwWindowVisible: false,
+      triggerZoneEditorVisible: false,
 
       // component properties
       settings: {},
@@ -387,6 +389,17 @@ export default {
       }
     });
 
+    this.eventBus.subscribe(
+      'start-trigger-zone-edit',
+      {
+        function: () => {
+          console.log('Showing trigger zone editor!');
+          this.triggerZoneEditorVisible = true;
+          this.uwWindowVisible = false;
+        }
+      }
+    );
+
     this.sendToParentLowLevel('uwui-get-role', null);
     this.sendToParentLowLevel('uwui-get-theme', null);
 
diff --git a/src/csui/src/PlayerUiPanels/PlayerUiSettings.vue b/src/csui/src/PlayerUiPanels/PlayerUiSettings.vue
index 2d43189..0001a48 100644
--- a/src/csui/src/PlayerUiPanels/PlayerUiSettings.vue
+++ b/src/csui/src/PlayerUiPanels/PlayerUiSettings.vue
@@ -55,7 +55,7 @@
 
         <div class="field">
           <div class="label">Edit trigger zone:</div>
-          <button>Edit</button>
+          <button @click="startTriggerZoneEdit()">Edit</button>
         </div>
 
         <div v-if="settings.active.ui.inPlayer.activation === 'trigger-zone'">
@@ -195,8 +195,9 @@ export default {
       this.settings.active.ui.inPlayer.triggerZoneDimensions[key] = size;
       this.settings.saveWithoutReload();
     },
-
-
+    startTriggerZoneEdit() {
+      this.eventBus.send('start-trigger-zone-edit');
+    },
     async openOptionsPage() {
       BrowserDetect.runtime.openOptionsPage();
     },
diff --git a/src/csui/src/components/TriggerZoneEditor.vue b/src/csui/src/components/TriggerZoneEditor.vue
index 33b9cf5..a6d2a87 100644
--- a/src/csui/src/components/TriggerZoneEditor.vue
+++ b/src/csui/src/components/TriggerZoneEditor.vue
@@ -39,7 +39,6 @@ export default {
   ],
   watch: {
     playerDimensions(newVal, oldVal) {
-      console.log('triggerzone -- dimensions changed!', this.playerDimensions, newVal, oldVal);
       this.updateTriggerZones();
     }
   },
@@ -54,7 +53,7 @@ export default {
   created() {
     document.addEventListener("mouseup", this.handleMouseUp);
     document.addEventListener("mousemove", this.handleMouseMove);
-    updateTriggerZones();
+    this.updateTriggerZones();
   },
   methods: {
     updateTriggerZones() {