diff --git a/app/javascript/controllers/hotkey_controller.js b/app/javascript/controllers/hotkey_controller.js
new file mode 100644
index 000000000..7f6e5f3bf
--- /dev/null
+++ b/app/javascript/controllers/hotkey_controller.js
@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  click(event) {
+    if (this.#isClickable && !this.#shouldIgnore(event)) {
+      this.element.click()
+    }
+  }
+
+  #shouldIgnore(event) {
+    return event.defaultPrevented || event.target.closest("input, textarea")
+  }
+
+  get #isClickable() {
+    return getComputedStyle(this.element).pointerEvents !== "none"
+  }
+}
diff --git a/app/views/bubbles/show.html.erb b/app/views/bubbles/show.html.erb
index bb628b25b..00cd19766 100644
--- a/app/views/bubbles/show.html.erb
+++ b/app/views/bubbles/show.html.erb
@@ -2,7 +2,7 @@
 
 <% content_for :header do %>
   <nav>
-    <%= link_to "#", class: "btn flex-item-justify-start", data: { controller: "back-navigation", back_navigation_fallback_destination_value: bubbles_path(bucket_id: @bubble.bucket) } do %>
+    <%= link_to "#", class: "btn flex-item-justify-start", data: { controller: "hotkey back-navigation", action: "keydown.esc@document->hotkey#click", back_navigation_fallback_destination_value: bubbles_path(bucket_id: @bubble.bucket) } do %>
       <%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
       <span class="for-screen-reader">Back</span>
     <% end %>