diff --git a/packages/overlay/src/App.vue b/packages/overlay/src/App.vue
index 433b7efc..980af8b6 100644
--- a/packages/overlay/src/App.vue
+++ b/packages/overlay/src/App.vue
@@ -81,9 +81,26 @@ const vueInspector = ref()
 onDevToolsConnected(() => {
   devtools.api.getVueInspector().then((inspector) => {
     vueInspector.value = inspector
+
+    let previousPanelVisible = panelVisible.value
+
+    vueInspector.value.onEnabled = () => {
+      previousPanelVisible = panelVisible.value
+      togglePanelVisible(undefined, false)
+    }
+
+    vueInspector.value.onDisabled = () => {
+      togglePanelVisible(undefined, previousPanelVisible)
+    }
   })
 })
 
+addEventListener('keyup', (e) => {
+  if (e.key.toLowerCase() === 'escape' && vueInspector.value?.enabled) {
+    vueInspector.value?.disable()
+  }
+})
+
 const vueInspectorEnabled = computed(() => {
   return !!vueInspector.value
 })
diff --git a/packages/overlay/src/composables/panel.ts b/packages/overlay/src/composables/panel.ts
index c315d3a8..a99f23d9 100644
--- a/packages/overlay/src/composables/panel.ts
+++ b/packages/overlay/src/composables/panel.ts
@@ -15,7 +15,7 @@ export function usePanelVisible() {
     },
   })
 
-  const toggleVisible = (_: unknown, state?: boolean) => {
+  const toggleVisible = (_?: unknown, state?: boolean) => {
     visible.value = state ?? !visible.value
   }