diff --git a/apps/editor/components/editor/index.tsx b/apps/editor/components/editor/index.tsx
index 6c62fb23..9a1caf4e 100644
--- a/apps/editor/components/editor/index.tsx
+++ b/apps/editor/components/editor/index.tsx
@@ -10,6 +10,7 @@ import { MathUtils, type Mesh } from 'three'
 import { color, float, fract, fwidth, mix, positionLocal } from 'three/tsl'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { useKeyboard } from '@/hooks/use-keyboard'
+import { ZoneSystem } from '../systems/zone/zone-system'
 import { ToolManager } from '../tools/tool-manager'
 import { ActionMenu } from '../ui/action-menu'
 import { SidebarProvider } from '../ui/primitives/sidebar'
@@ -36,6 +37,8 @@ export default function Editor() {
       </SidebarProvider>
       <Viewer>
         <SelectionManager />
+        {/* Editor only system to toggle zone visibility */}
+        <ZoneSystem />
         {/* <Stats /> */}
         <Grid cellColor="#666" sectionColor="#999" fadeDistance={30} />
         <ToolManager />
diff --git a/apps/editor/components/systems/zone/zone-system.tsx b/apps/editor/components/systems/zone/zone-system.tsx
new file mode 100644
index 00000000..ecb60d16
--- /dev/null
+++ b/apps/editor/components/systems/zone/zone-system.tsx
@@ -0,0 +1,19 @@
+import { sceneRegistry } from '@pascal-app/core'
+import { useEffect } from 'react'
+import useEditor from '@/store/use-editor'
+
+export const ZoneSystem = () => {
+  const structureLayer = useEditor((state) => state.structureLayer)
+
+  useEffect(() => {
+    const visible = structureLayer === 'zones'
+    const zones = sceneRegistry.byType.zone || new Set()
+    zones.forEach((zoneId) => {
+      const node = sceneRegistry.nodes.get(zoneId)
+      if (node) {
+        node.visible = visible
+      }
+    })
+  }, [structureLayer])
+  return null;
+}