diff --git a/app/assets/javascripts/preferences/PreferencesView.tsx b/app/assets/javascripts/preferences/PreferencesView.tsx
index 402a6fb84..fc5c328a2 100644
--- a/app/assets/javascripts/preferences/PreferencesView.tsx
+++ b/app/assets/javascripts/preferences/PreferencesView.tsx
@@ -8,6 +8,7 @@ import { PreferencesMenuView } from './PreferencesMenuView';
 import { WebApplication } from '@/ui_models/application';
 import { MfaProps } from './panes/two-factor-auth/MfaProps';
 import { AppState } from '@/ui_models/app_state';
+import { useCallback, useEffect } from 'preact/hooks';
 
 interface PreferencesProps extends MfaProps {
   application: WebApplication;
@@ -63,6 +64,19 @@ const PreferencesCanvas: FunctionComponent<
 
 export const PreferencesView: FunctionComponent<PreferencesProps> = observer(
   (props) => {
+
+    useEffect(() => {
+      const removeEscKeyObserver = props.application.io.addKeyObserver({
+        key: 'Escape',
+        onKeyDown: (event) => {
+          event.preventDefault();
+          props.closePreferences();
+        }
+      });
+      return () => {
+        removeEscKeyObserver();
+      };
+    }, [props]);
     const menu = new PreferencesMenu();
     return (
       <div className="h-full w-full absolute top-left-0 flex flex-col bg-contrast z-index-preferences">