diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 38aec34..dcea524 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onMounted } from 'vue'
+import { onBeforeUnmount, onMounted } from 'vue'
 import { changeLocale } from '@i18n'
 
 import { 
@@ -13,18 +13,47 @@ import {
 } from '@components'
 
 import { useAppStore } from '@stores'
+import { getOpenDialogs } from '@composables'
 
 const appStore = useAppStore()
 const {
     setMaxThreads
 } = appStore
 
+//const settingsDialog = useDialog('settings')
+
+// Keydown event listener
+const onKeydown = (event: KeyboardEvent) => {
+    console.log('Keydown fired!\n', event.key)
+
+    const openDialogs = getOpenDialogs()
+    if (openDialogs.length > 0) {
+        for (const dialog of openDialogs) {
+            dialog.visible.value = false
+        }
+
+        return
+    }
+
+    // No dialogs open + pressing ESC -> open settings overlay.
+    // if (event.key == 'Escape') {
+    //     settingsDialog.setVisible(!settingsDialog.visible.value)
+    // }
+}
+
 onMounted(async () => {
     const settings = await GetSettings()
     changeLocale(settings.general.locale)
 
     // We don't use `navigator.hardwareConcurrency` as it is known to be unreliable.
     setMaxThreads(await NumCPU())
+
+    // Add keydown event listener when the app mounts
+    window.addEventListener('keydown', onKeydown)
+})
+
+onBeforeUnmount(() => {
+    window.removeEventListener('keydown', onKeydown)
 })
 </script>
 
diff --git a/frontend/src/components/general/AppInfoOverlay.vue b/frontend/src/components/general/AppInfoOverlay.vue
index a405767..a2c2841 100644
--- a/frontend/src/components/general/AppInfoOverlay.vue
+++ b/frontend/src/components/general/AppInfoOverlay.vue
@@ -3,27 +3,11 @@ import { version } from "@frontend/package.json" with { type: "json" }
 
 import { CardOverlay } from "@components"
 import { useDialog } from "@composables"
-import { onMounted, onUnmounted } from "vue"
 
 const { 
     setVisible,
     visible, closable, draggable
 } = useDialog('app-info')
-
-const onEscape = (e: KeyboardEvent) => {
-    if (!visible.value) return
-    if (e.key == "Escape") setVisible(false)
-
-    console.log(e)
-}
-
-onMounted(() => {
-    window.addEventListener("keydown", onEscape)
-})
-
-onUnmounted(() => {
-    window.removeEventListener("keydown", onEscape)
-})
 </script>
 
 <template>
diff --git a/frontend/src/composables/dialog.ts b/frontend/src/composables/dialog.ts
index 80eba34..09b8bde 100644
--- a/frontend/src/composables/dialog.ts
+++ b/frontend/src/composables/dialog.ts
@@ -14,7 +14,10 @@ export interface DialogState {
 
 const dialogs: Record<string, DialogState> = {}
 
+export const closeAllDialogs = () => Object.values(dialogs).forEach(d => d.visible.value = false)
 export const openDialogCount = () => Object.keys(dialogs).reduce((amt, key) => amt + (dialogs[key].visible.value ? 1 : 0), 0)
+export const getOpenDialogs = () => Object.values(dialogs).filter(d => d.visible.value)
+
 export const useDialog = (id: string): Dialog => {
     // Initialize the dialog state if it doesn't exist.
     if (!dialogs[id]) {
@@ -25,17 +28,9 @@ export const useDialog = (id: string): Dialog => {
         }
     }
 
-    const setVisible = (val = true) => {
-        dialogs[id].visible.value = val
-    }
-    
-    const setDraggable = (val = true) => {
-        dialogs[id].draggable.value = val
-    }
-    
-    const setClosable = (val = true) => {
-        dialogs[id].closable.value = val
-    }
+    const setVisible = (val = true) => dialogs[id].visible.value = val
+    const setDraggable = (val = true) => dialogs[id].draggable.value = val
+    const setClosable = (val = true) => dialogs[id].closable.value = val
     
     return {
         visible: dialogs[id].visible,
diff --git a/frontend/src/types/primevue.ts b/frontend/src/types/primevue.ts
index c965e29..d5cb835 100644
--- a/frontend/src/types/primevue.ts
+++ b/frontend/src/types/primevue.ts
@@ -2,11 +2,6 @@ export type Layout = 'grid' | 'list'
 
 export type Alignment = "center" | "left" | "right"
 
-export interface ChangeEvent<V> {
-    originalEvent: Event
-    value: V
-}
-
 export interface OptionItem<T> {
     index: number
     option: T
@@ -26,6 +21,11 @@ export interface ItemProps<V> {
     items: V[]
 }
 
+export interface ChangeEvent<V> {
+    originalEvent: Event
+    value: V
+}
+
 export interface BreadcrumbPage {
     route: string
     home?: boolean