diff --git a/ui/app/components/keyboard-shortcuts-modal.js b/ui/app/components/keyboard-shortcuts-modal.js
index 117a8a668..a9b804666 100644
--- a/ui/app/components/keyboard-shortcuts-modal.js
+++ b/ui/app/components/keyboard-shortcuts-modal.js
@@ -1,3 +1,4 @@
+import { set } from '@ember/object';
 import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
 import { computed } from '@ember/object';
@@ -8,6 +9,13 @@ export default class KeyboardShortcutsModalComponent extends Component {
   @service keyboard;
   @service config;
 
+  constructor() {
+    super(...arguments);
+    window.addEventListener('blur', () => {
+      set(this, 'keyboard.displayHints', false);
+    });
+  }
+
   escapeCommand = {
     label: 'Hide Keyboard Shortcuts',
     pattern: ['Escape'],
diff --git a/ui/app/styles/components/keyboard-shortcuts-modal.scss b/ui/app/styles/components/keyboard-shortcuts-modal.scss
index ca71f7680..22d7ae36d 100644
--- a/ui/app/styles/components/keyboard-shortcuts-modal.scss
+++ b/ui/app/styles/components/keyboard-shortcuts-modal.scss
@@ -94,7 +94,6 @@
 
 // Global keyboard hint style
 
-// .display-hints {
 [data-shortcut] {
   background: lighten($nomad-green, 25%);
   border: 1px solid $nomad-green-dark;
@@ -113,7 +112,6 @@
     z-index: $z-tooltip;
   }
 }
-// }
 
 @keyframes slideIn {
   from {
diff --git a/ui/app/templates/csi/volumes/index.hbs b/ui/app/templates/csi/volumes/index.hbs
index 3ab6d5a02..f060825f7 100644
--- a/ui/app/templates/csi/volumes/index.hbs
+++ b/ui/app/templates/csi/volumes/index.hbs
@@ -38,7 +38,7 @@
         @source={{p.list}}
         @sortProperty={{this.sortProperty}}
         @sortDescending={{this.sortDescending}}
-        @class="with-foot {{if this.keyboard.displayHints "display-hints"}}" as |t|
+        @class="with-foot" as |t|
       >
         <t.head>
           <t.sort-by @prop="name">