app/src/components/footer/Footer.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import { HelpIcon } from "../icons/DashboardIcon";
 import { useLogger } from "../ui/log/LoggerContext";
 import { GetLogIcon } from "./getLogIcons";
@@ -10,15 +10,41 @@ import {
 import ShortcutHelper from "./shortcutHelper";
 import { useShortcutStore } from "../../store/builder/store";
 import { usePlayButtonStore } from "../../store/usePlayButtonStore";
+import OuterClick from "../../utils/outerClick";
 
 const Footer: React.FC = () => {
   const { logs, setIsLogListVisible } = useLogger();
   const lastLog = logs.length > 0 ? logs[logs.length - 1] : null;
 
-  const { showShortcuts } = useShortcutStore();
+
   const { isPlaying } = usePlayButtonStore();
+  const { showShortcuts, setShowShortcuts } = useShortcutStore();
 
+  // Listen for Ctrl + Shift + ?
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (
+        e.ctrlKey &&
+        e.shiftKey &&
+        (e.key === "?" || e.key === "/") // for some keyboards ? and / share the same key
+      ) {
+        e.preventDefault();
+        setShowShortcuts(!showShortcuts); // toggle visibility directly
+      }
 
+      if (e.key === "Escape") {
+        setShowShortcuts(false);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [showShortcuts, setShowShortcuts]);
+
+  OuterClick({
+    contextClassName: ["shortcut-helper-overlay"],
+    setMenuVisible: () => setShowShortcuts(false),
+  });
   return (
     <div className="footer-container">
       <div className="footer-wrapper">

app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx

@@ -10,6 +10,7 @@ import RenameInput from "../../../ui/inputs/RenameInput";
 
 const VersionHistory = () => {
   const userName = localStorage.getItem("userName") ?? "Anonymous";
+
   const initialVersions = [
     {
       versionName: "v1.0",