diff --git a/app/src/modules/scene/helpers/StatsHelper.tsx b/app/src/modules/scene/helpers/StatsHelper.tsx
new file mode 100644
index 0000000..486488b
--- /dev/null
+++ b/app/src/modules/scene/helpers/StatsHelper.tsx
@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+import { Stats } from "@react-three/drei";
+import { detectModifierKeys } from "../../../utils/shortcutkeys/detectModifierKeys";
+
+export default function StatsHelper() {
+ const [visible, setVisible] = useState(false);
+
+ useEffect(() => {
+ const handleKeyDown = (event: KeyboardEvent) => {
+ const keyCombination = detectModifierKeys(event);
+ if (keyCombination === "F1") {
+ event.preventDefault();
+ setVisible(prev => !prev);
+ }
+ };
+
+ window.addEventListener("keydown", handleKeyDown);
+ return () => window.removeEventListener("keydown", handleKeyDown);
+ }, []);
+
+ return visible ? : null;
+}
diff --git a/app/src/modules/scene/scene.tsx b/app/src/modules/scene/scene.tsx
index 0f08a2d..0e7a277 100644
--- a/app/src/modules/scene/scene.tsx
+++ b/app/src/modules/scene/scene.tsx
@@ -1,6 +1,6 @@
import { useEffect, useMemo } from "react";
import { Canvas } from "@react-three/fiber";
-import { KeyboardControls, Stats } from "@react-three/drei";
+import { KeyboardControls } from "@react-three/drei";
import { useSceneContext } from "./sceneContext";
import Builder from "../builder/builder";
@@ -14,6 +14,7 @@ import { getAllProjects } from "../../services/dashboard/getAllProjects";
import { getUserData } from "../../functions/getUserData";
import { useLoadingProgress, useSocketStore } from "../../store/builder/store";
import { Color, SRGBColorSpace } from "three";
+import StatsHelper from "./helpers/StatsHelper";
export default function Scene({ layout }: { readonly layout: 'Main Layout' | 'Comparison Layout' }) {
const map = useMemo(() => [
@@ -76,7 +77,7 @@ export default function Scene({ layout }: { readonly layout: 'Main Layout' | 'Co
-
+
);