diff --git a/packages/dashboard/src/components/three-fiber/camera-control.tsx b/packages/dashboard/src/components/three-fiber/camera-control.tsx
index 5ac09ad5e..e65229a9d 100644
--- a/packages/dashboard/src/components/three-fiber/camera-control.tsx
+++ b/packages/dashboard/src/components/three-fiber/camera-control.tsx
@@ -18,21 +18,40 @@ export const CameraControl: React.FC<CameraControlProps> = ({ zoom }) => {
   const controlsRef = useRef<OrbitControls | null>(null);
 
   useEffect(() => {
+    const controls = new OrbitControls(camera, gl.domElement);
+    controls.target = new Vector3(0, 0, -Number.MAX_SAFE_INTEGER);
+    controls.enableRotate = false;
+    controls.enableDamping = false;
+    controls.enableZoom = true;
+    controls.mouseButtons = {
+      LEFT: MOUSE.PAN,
+      MIDDLE: undefined,
+      RIGHT: undefined,
+    };
+    controlsRef.current = controls;
+
     const subs: Subscription[] = [];
     subs.push(
       AppEvents.zoomIn.subscribe(() => {
-        AppEvents.zoom.next(camera.zoom * DEFAULT_ZOOM_IN_CONSTANT);
+        const newZoom = camera.zoom * DEFAULT_ZOOM_IN_CONSTANT;
+        camera.zoom = newZoom;
+        AppEvents.zoom.next(newZoom);
+        camera.updateProjectionMatrix();
       }),
     );
     subs.push(
       AppEvents.zoomOut.subscribe(() => {
-        AppEvents.zoom.next(camera.zoom * DEFAULT_ZOOM_OUT_CONSTANT);
+        const newZoom = camera.zoom * DEFAULT_ZOOM_OUT_CONSTANT;
+        camera.zoom = newZoom;
+        AppEvents.zoom.next(newZoom);
+        camera.updateProjectionMatrix();
       }),
     );
     subs.push(
       AppEvents.resetCamera.subscribe((data) => {
         camera.position.set(data[0], data[1], data[2]);
         camera.zoom = data[3];
+        AppEvents.zoom.next(data[3]);
         camera.updateProjectionMatrix();
       }),
     );
@@ -58,22 +77,12 @@ export const CameraControl: React.FC<CameraControlProps> = ({ zoom }) => {
         sub.unsubscribe();
       }
       gl.domElement.removeEventListener('wheel', handleScroll);
+      controls.dispose();
     };
   }, [camera, gl.domElement]);
 
   useEffect(() => {
-    const controls = new OrbitControls(camera, gl.domElement);
-    controls.target = new Vector3(0, 0, -1000);
-    controls.enableRotate = false;
-    controls.enableDamping = false;
-    controls.enableZoom = true;
     camera.zoom = zoom;
-    controls.mouseButtons = {
-      LEFT: MOUSE.PAN,
-      MIDDLE: undefined,
-      RIGHT: undefined,
-    };
-
     if (AppEvents.cameraPosition.value) {
       camera.position.set(
         AppEvents.cameraPosition.value.x,
@@ -81,13 +90,7 @@ export const CameraControl: React.FC<CameraControlProps> = ({ zoom }) => {
         AppEvents.cameraPosition.value.z,
       );
     }
-
-    controlsRef.current = controls;
-
-    return () => {
-      controls.dispose();
-    };
-  }, [camera, gl.domElement, zoom]);
+  }, [camera, zoom]);
 
   useFrame(() => {
     if (controlsRef.current) {