diff --git a/app/components/CameraManager.vue b/app/components/CameraManager.vue
index 3c56ec4ef..15c191280 100644
--- a/app/components/CameraManager.vue
+++ b/app/components/CameraManager.vue
@@ -1,49 +1,64 @@
 <script setup>
-import GlassCard from "@ogw_front/components/GlassCard";
 import List from "@ogw_front/components/CameraManager/List";
 import Saver from "@ogw_front/components/CameraManager/Saver";
+import ToolPanel from "@ogw_front/components/ToolPanel";
 
 const emit = defineEmits(["close"]);
 
-const { showDialog, width } = defineProps({
+const { showDialog, width, escapeFunction } = defineProps({
   showDialog: { type: Boolean, required: true },
   width: { type: Number, required: false, default: 260 },
+  escapeFunction: { type: Function, default: undefined },
 });
+
+const show = computed({
+  get: () => showDialog,
+  set: (val) => {
+    if (!val) {
+      handleClose();
+    }
+  },
+});
+
+function handleClose() {
+  if (escapeFunction) {
+    escapeFunction();
+  } else {
+    emit("close");
+  }
+}
 </script>
 
 <template>
-  <GlassCard
-    v-if="showDialog"
-    @click.stop
+  <ToolPanel
+    v-model="show"
     title="Camera Positions"
     :width="width"
-    :ripple="false"
-    variant="panel"
-    padding="pa-0"
-    class="position-absolute elevation-24"
-    style="top: 90px; right: 55px; z-index: 1"
+    :escapeFunction="handleClose"
+    style="top: 90px; right: 55px"
+    z-index="1"
   >
     <v-card-text class="pa-0">
       <Saver />
-      <v-divider></v-divider>
+      <v-divider />
       <List />
     </v-card-text>
 
-    <v-divider></v-divider>
-
-    <v-card-actions class="pa-2">
-      <v-spacer></v-spacer>
-      <v-btn
-        variant="text"
-        size="small"
-        color="white"
-        class="text-caption text-none"
-        data-testid="closeCameraManagerButton"
-        @click="emit('close')"
-        >Close</v-btn
-      >
-    </v-card-actions>
-  </GlassCard>
+    <template #actions>
+      <v-card-actions class="justify-center pb-3 pt-0" style="gap: 8px">
+        <v-btn
+          variant="text"
+          size="small"
+          color="white"
+          class="text-caption text-none"
+          data-testid="closeCameraManagerButton"
+          @click="handleClose"
+        >
+          Close
+        </v-btn>
+      </v-card-actions>
+    </template>
+  </ToolPanel>
 </template>
 
 <style scoped>
diff --git a/app/components/CameraOrientation.vue b/app/components/CameraOrientation.vue
index c2b15698e..e3abe1853 100644
--- a/app/components/CameraOrientation.vue
+++ b/app/components/CameraOrientation.vue
@@ -5,9 +5,10 @@ import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { newInstance as vtkAnnotatedCubeActor } from "@kitware/vtk.js/Rendering/Core/AnnotatedCubeActor";
 import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
 
-const { panel, width } = defineProps({
+const { panel, width, escapeFunction } = defineProps({
   panel: { type: Boolean, default: false },
   width: { type: Number, default: 260 },
+  escapeFunction: { type: Function, default: undefined },
 });
 
 const show = defineModel("show", { type: Boolean, default: false });
@@ -172,6 +173,7 @@ watch(hoveredFace, (newFace, oldFace) => {
     v-model="show"
     title="Camera Orientations"
     :width="width"
+    :escapeFunction="escapeFunction"
     style="top: 90px; right: 55px"
     z-index="1"
   >
diff --git a/app/components/ClippingPlanes.vue b/app/components/ClippingPlanes.vue
index 6df2a006d..6f60e9c21 100644
--- a/app/components/ClippingPlanes.vue
+++ b/app/components/ClippingPlanes.vue
@@ -7,6 +7,10 @@ import { useDataStore } from "@ogw_front/stores/data";
 import { useDebounceFn } from "@vueuse/core";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
+const { escapeFunction } = defineProps({
+  escapeFunction: { type: Function, default: undefined },
+});
+
 const show = defineModel("show", { type: Boolean, default: false });
 const dataStore = useDataStore();
 const hybridViewerStore = useHybridViewerStore();
@@ -145,7 +149,13 @@ onBeforeUnmount(cleanupLocalWidget);
 </script>
 
 <template>
-  <ToolPanel v-model="show" title="Clipping Planes" :width="360" :click-outside="false">
+  <ToolPanel
+    v-model="show"
+    title="Clipping Planes"
+    :width="360"
+    :click-outside="false"
+    :escapeFunction="escapeFunction"
+  >
     <v-card-text class="pa-3 max-panel-height overflow-y-auto">
       <v-sheet
         ref="widgetContainer"
diff --git a/app/components/GlassCard.vue b/app/components/GlassCard.vue
index a035da434..1ffe9c78d 100644
--- a/app/components/GlassCard.vue
+++ b/app/components/GlassCard.vue
@@ -1,7 +1,8 @@
 <script setup>
 import { computed, useAttrs } from "vue";
+import { onKeyStroke } from "@vueuse/core";
 
-const { variant, rounded, padding, theme } = defineProps({
+const { variant, rounded, padding, theme, escapeFunction } = defineProps({
   variant: {
     type: String,
     default: "panel",
@@ -10,10 +11,17 @@ const { variant, rounded, padding, theme } = defineProps({
   rounded: { type: String, default: "xl" },
   padding: { type: String, default: "pa-6" },
   theme: { type: String, default: undefined },
+  escapeFunction: { type: Function, default: undefined },
 });
 
 const attrs = useAttrs();
 const isInteractive = computed(() => Boolean(attrs.onClick));
+
+onKeyStroke("Escape", () => {
+  if (escapeFunction) {
+    escapeFunction();
+  }
+});
 </script>
 
 <template>
diff --git a/app/components/Ruler.vue b/app/components/Ruler.vue
index 1501c4fb7..1d1100c6a 100644
--- a/app/components/Ruler.vue
+++ b/app/components/Ruler.vue
@@ -2,6 +2,10 @@
 import ToolPanel from "@ogw_front/components/ToolPanel";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
+const { escapeFunction } = defineProps({
+  escapeFunction: { type: Function, default: undefined },
+});
+
 const show = defineModel("show", { type: Boolean, default: false });
 const hybridViewerStore = useHybridViewerStore();
 
@@ -57,6 +61,7 @@ async function applyManualCoords() {
     :width="300"
     close-label="Stop ruler"
     :click-outside="false"
+    :escapeFunction="escapeFunction"
   >
     <v-card-text class="pa-3">
       <v-switch
diff --git a/app/components/Screenshot.vue b/app/components/Screenshot.vue
index 99ab888fc..9e9563270 100644
--- a/app/components/Screenshot.vue
+++ b/app/components/Screenshot.vue
@@ -8,8 +8,9 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 
 const show = defineModel({ type: Boolean, default: false });
 
-const { width } = defineProps({
+const { width, escapeFunction } = defineProps({
   width: { type: Number, default: 260 },
+  escapeFunction: { type: Function, default: undefined },
 });
 
 const output_extensions =
@@ -70,6 +71,13 @@ watch(screenshot_type, (value) => {
     output_extension.value = "png";
   }
 });
+
+function handleClose() {
+  if (escapeFunction) {
+    escapeFunction();
+  }
+  show.value = false;
+}
 </script>
 
 <template>
@@ -79,6 +87,7 @@ watch(screenshot_type, (value) => {
     :width="width"
     close-label="Cancel"
     action-label="Screenshot"
+    :escapeFunction="escapeFunction"
     @action="takeScreenshot"
   >
     <v-container class="pa-3 py-1">
@@ -165,7 +174,7 @@ watch(screenshot_type, (value) => {
           color="white"
           data-testid="screenshotCancelButton"
           class="text-caption text-none"
-          @click="show = false"
+          @click="handleClose"
         >
           Cancel
         </v-btn>
diff --git a/app/components/ShrinkFilter.vue b/app/components/ShrinkFilter.vue
index 8382f7414..42240b5e8 100644
--- a/app/components/ShrinkFilter.vue
+++ b/app/components/ShrinkFilter.vue
@@ -8,6 +8,10 @@ const DEFAULT_SHRINK_VALUE = 0.8;
 const MAX_SHRINK_VALUE = 1;
 const DEBOUNCE_DELAY = 100;
 
+const { escapeFunction } = defineProps({
+  escapeFunction: { type: Function, default: undefined },
+});
+
 const show = defineModel("show", { type: Boolean, default: false });
 const dataStore = useDataStore();
 const hybridViewerStore = useHybridViewerStore();
@@ -88,7 +92,13 @@ watch(
 </script>
 
 <template>
-  <ToolPanel v-model="show" title="Shrink Filter" :width="340" :click-outside="false">
+  <ToolPanel
+    v-model="show"
+    title="Shrink Filter"
+    :width="340"
+    :click-outside="false"
+    :escapeFunction="escapeFunction"
+  >
     <v-card-text class="pa-3 max-panel-height overflow-y-auto overflow-x-hidden">
       <v-switch
         v-model="targetAllVisible"
diff --git a/app/components/ToolPanel.vue b/app/components/ToolPanel.vue
index 93fef2b9c..b3893fe67 100644
--- a/app/components/ToolPanel.vue
+++ b/app/components/ToolPanel.vue
@@ -1,18 +1,22 @@
 <script setup>
 import GlassCard from "@ogw_front/components/GlassCard";
 
-const { title, width, closeLabel, actionLabel, clickOutside } = defineProps({
+const { title, width, closeLabel, actionLabel, clickOutside, escapeFunction } = defineProps({
   title: { type: String, default: "" },
   width: { type: Number, default: 260 },
   closeLabel: { type: String, default: "Close" },
   actionLabel: { type: String, default: undefined },
   clickOutside: { type: Boolean, default: true },
+  escapeFunction: { type: Function, default: undefined },
 });
 
 const model = defineModel({ type: Boolean, default: false });
 const emit = defineEmits(["action"]);
 
 function close() {
+  if (escapeFunction) {
+    escapeFunction();
+  }
   model.value = false;
 }
 </script>
@@ -27,6 +31,7 @@ function close() {
     variant="panel"
     padding="pa-0"
     class="position-absolute rounded-xl elevation-24 tool-panel"
+    :escapeFunction="close"
     v-bind="$attrs"
   >
     <v-card-text class="pa-0 overflow-hidden position-relative">
diff --git a/app/components/ViewToolbar.vue b/app/components/ViewToolbar.vue
index c8178901c..8056fa3d4 100644
--- a/app/components/ViewToolbar.vue
+++ b/app/components/ViewToolbar.vue
@@ -8,6 +8,7 @@ import Ruler from "@ogw_front/components/Ruler";
 import Screenshot from "@ogw_front/components/Screenshot";
 import ShrinkFilter from "@ogw_front/components/ShrinkFilter";
 import ZScaling from "@ogw_front/components/ZScaling";
+import { onKeyStroke } from "@vueuse/core";
 import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useViewerStore } from "@ogw_front/stores/viewer";
@@ -23,6 +24,7 @@ const showShrinkFilter = ref(false);
 const showRuler = ref(false);
 const grid_scale = ref(false);
 const zScale = ref(hybridViewerStore.zScale);
+const openSubMenus = ref({});
 
 watch(
   () => hybridViewerStore.zScale,
@@ -36,6 +38,15 @@ async function handleZScalingClose() {
   showZScaling.value = false;
 }
 
+onKeyStroke("Escape", () => {
+  const openMenuKeys = Object.keys(openSubMenus.value).filter((key) => openSubMenus.value[key]);
+  if (openMenuKeys.length > 0) {
+    for (const key of openMenuKeys) {
+      openSubMenus.value[key] = false;
+    }
+  }
+});
+
 const camera_options = computed(() => [
   {
     testId: "resetCameraButton",
@@ -193,6 +204,7 @@ const camera_options = computed(() => [
       <v-col>
         <v-menu
           v-if="camera_option.menu && !camera_option.action"
+          v-model="openSubMenus[camera_option.testId]"
           location="start"
           :close-on-content-click="false"
         >
@@ -248,17 +260,24 @@ const camera_options = computed(() => [
     panel
     @select="hybridViewerStore.setCameraOrientation"
   />
-  <Screenshot v-model="take_screenshot" />
+  <Screenshot v-model="take_screenshot" :escapeFunction="() => (take_screenshot = false)" />
   <CameraManager :showDialog="show_camera_manager" @close="show_camera_manager = false" />
   <ZScaling
     v-model:show="showZScaling"
     v-model="zScale"
     :width="260"
+    :escapeFunction="handleZScalingClose"
     @apply="handleZScalingClose"
   />
-  <ClippingPlanes v-model:show="showClippingPlanes" />
-  <ShrinkFilter v-model:show="showShrinkFilter" />
-  <Ruler v-model:show="showRuler" />
+  <ClippingPlanes
+    v-model:show="showClippingPlanes"
+    :escapeFunction="() => (showClippingPlanes = false)"
+  />
+  <ShrinkFilter
+    v-model:show="showShrinkFilter"
+    :escapeFunction="() => (showShrinkFilter = false)"
+  />
+  <Ruler v-model:show="showRuler" :escapeFunction="() => (showRuler = false)" />
 </template>
 
 <style module>
diff --git a/app/components/Viewer/ContextMenu/ContextMenu.vue b/app/components/Viewer/ContextMenu/ContextMenu.vue
index 9dd800576..55c00f49e 100644
--- a/app/components/Viewer/ContextMenu/ContextMenu.vue
+++ b/app/components/Viewer/ContextMenu/ContextMenu.vue
@@ -36,6 +36,12 @@ const dragStartY = ref(0);
 const menuX = ref(x);
 const menuY = ref(y);
 
+watch(show_menu, (newVal) => {
+  if (!newVal) {
+    menuStore.closeMenu();
+  }
+});
+
 watch(
   () => [x, y, containerWidth, containerHeight],
   ([newX, newY]) => {
diff --git a/app/components/Viewer/Options/ColormapQuickPicker.vue b/app/components/Viewer/Options/ColormapQuickPicker.vue
index d7f397a0f..a15bf1373 100644
--- a/app/components/Viewer/Options/ColormapQuickPicker.vue
+++ b/app/components/Viewer/Options/ColormapQuickPicker.vue
@@ -1,6 +1,7 @@
 <script setup>
 import ColorMapList from "@ogw_front/components/Viewer/Options/ColorMapList.vue";
 import { getPresetsWithCurrentAtTop } from "@ogw_front/utils/colormap";
+
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
diff --git a/app/components/Viewer/Ui.vue b/app/components/Viewer/Ui.vue
index fe53d187c..8ea49e78f 100644
--- a/app/components/Viewer/Ui.vue
+++ b/app/components/Viewer/Ui.vue
@@ -24,11 +24,23 @@ function stopHoverHighlight() {
   hybridViewerStore.clearHoverHighlight();
 }
 
-onKeyStroke("Escape", () => {
-  if (hybridViewerStore.is_ruler_active) {
+onKeyStroke("Escape", (event) => {
+  let consumed = false;
+  if (viewerStore.picking_mode) {
+    viewerStore.toggle_picking_mode(false);
+    consumed = true;
+  } else if (hybridViewerStore.is_picking) {
+    hybridViewerStore.is_picking = false;
+    consumed = true;
+  } else if (hybridViewerStore.is_ruler_active) {
     hybridViewerStore.deactivateRuler();
+    consumed = true;
   } else if (hybridViewerStore.is_hover_highlight) {
     stopHoverHighlight();
+    consumed = true;
+  }
+  if (consumed && event) {
+    event.stopImmediatePropagation();
   }
 });
 
diff --git a/app/components/ZScaling.vue b/app/components/ZScaling.vue
index bc1be3dc4..d4aaa1435 100644
--- a/app/components/ZScaling.vue
+++ b/app/components/ZScaling.vue
@@ -4,8 +4,9 @@ import ToolPanel from "@ogw_front/components/ToolPanel";
 const zScale = defineModel({ type: Number, default: 1 });
 const show = defineModel("show", { type: Boolean, default: false });
 
-const { width } = defineProps({
+const { width, escapeFunction } = defineProps({
   width: { type: Number, default: 260 },
+  escapeFunction: { type: Function, default: undefined },
 });
 
 const emit = defineEmits(["apply"]);
@@ -22,6 +23,7 @@ function apply() {
     title="Z Scaling Control"
     :width="width"
     action-label="Apply"
+    :escapeFunction="escapeFunction"
     @action="apply"
   >
     <v-container class="pa-3 py-1">
diff --git a/app/components/csv-preview/CsvPreviewer.vue b/app/components/csv-preview/CsvPreviewer.vue
index a35478045..2c309bb50 100644
--- a/app/components/csv-preview/CsvPreviewer.vue
+++ b/app/components/csv-preview/CsvPreviewer.vue
@@ -1,7 +1,8 @@
 <script setup>
+import { useToggle } from "@vueuse/core";
+
 import CsvSettings from "./CsvSettings.vue";
 import CsvTable from "./CsvTable.vue";
-import { useToggle } from "@vueuse/core";
 
 const { file, modelValue } = defineProps({
   file: { type: Object, required: true },
diff --git a/tests/unit/components/ToolPanel.nuxt.test.js b/tests/unit/components/ToolPanel.nuxt.test.js
new file mode 100644
index 000000000..6bcfac4f5
--- /dev/null
+++ b/tests/unit/components/ToolPanel.nuxt.test.js
@@ -0,0 +1,66 @@
+// Third party imports
+import { describe, expect, test, vi } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+
+// Local imports
+import ToolPanel from "@ogw_front/components/ToolPanel";
+import { vuetify } from "@ogw_tests/utils";
+
+const FIRST_INDEX = 0;
+
+describe("tool panel", () => {
+  test("renders title and slot content when open", async () => {
+    const wrapper = await mountSuspended(ToolPanel, {
+      global: {
+        plugins: [vuetify],
+      },
+      props: {
+        modelValue: true,
+        title: "Test Panel",
+      },
+      slots: {
+        default: () => "Panel Content",
+      },
+    });
+
+    expect(wrapper.text()).toContain("Test Panel");
+    expect(wrapper.text()).toContain("Panel Content");
+  });
+
+  test("triggers escape key binding to close panel", async () => {
+    const wrapper = await mountSuspended(ToolPanel, {
+      global: {
+        plugins: [vuetify],
+      },
+      props: {
+        modelValue: true,
+        title: "Test Panel",
+      },
+    });
+
+    globalThis.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted()).toHaveProperty("update:modelValue");
+    expect(wrapper.emitted("update:modelValue")[FIRST_INDEX]).toStrictEqual([false]);
+  });
+
+  test("calls escapeFunction prop when Escape key is pressed", async () => {
+    const escapeFunction = vi.fn();
+    const wrapper = await mountSuspended(ToolPanel, {
+      global: {
+        plugins: [vuetify],
+      },
+      props: {
+        escapeFunction,
+        modelValue: true,
+        title: "Test Panel",
+      },
+    });
+
+    globalThis.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
+    await wrapper.vm.$nextTick();
+
+    expect(escapeFunction).toHaveBeenCalledWith();
+  });
+});