diff --git a/codex-ui/src/vue/components/popup/Popup.vue b/codex-ui/src/vue/components/popup/Popup.vue
index 00d12901..4d76e166 100644
--- a/codex-ui/src/vue/components/popup/Popup.vue
+++ b/codex-ui/src/vue/components/popup/Popup.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import Icon from '../icon/Icon.vue';
 import { usePopup } from './usePopup';
 import { onClickOutside } from '@vueuse/core';
@@ -45,6 +45,18 @@ const {
  */
 onClickOutside(popupEl, hidePopup);
 
+/**
+ * Close the popup when esc was pressed
+ *
+ * @param event - the event object representing the keyboard event
+ * @param event.key - the property of the event object that holds the value of the pressed key
+ */
+const closeOnEsc = (event: { key: string }) => {
+  if (event.key === 'Escape') {
+    hidePopup();
+  }
+};
+
 withDefaults(
   defineProps<{
     /**
@@ -57,6 +69,14 @@ withDefaults(
   }
 );
 
+onMounted(() => {
+  document.addEventListener('keydown', closeOnEsc);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', closeOnEsc);
+});
+
 </script>
 
 <style module>