diff --git a/packages/engine/src/debug/systems/DebugRendererSystem.tsx b/packages/engine/src/debug/systems/DebugRendererSystem.tsx
index a69f3c8d8e..f321daa1c9 100644
--- a/packages/engine/src/debug/systems/DebugRendererSystem.tsx
+++ b/packages/engine/src/debug/systems/DebugRendererSystem.tsx
@@ -29,21 +29,23 @@ import { MeshBVHVisualizer } from 'three-mesh-bvh'
 
 import { getMutableState, getState, useHookstate } from '@etherealengine/hyperflux'
 
-import { Engine } from '../../ecs/classes/Engine'
-import { removeEntity } from '../../ecs/functions/EntityFunctions'
+import { getComponent } from '../../ecs/functions/ComponentFunctions'
+import { createEntity, removeEntity } from '../../ecs/functions/EntityFunctions'
 import { defineSystem } from '../../ecs/functions/SystemFunctions'
 import { PhysicsState } from '../../physics/state/PhysicsState'
 import { RendererState } from '../../renderer/RendererState'
 import { WebGLRendererSystem } from '../../renderer/WebGLRendererSystem'
 import { createInfiniteGridHelper } from '../../scene/classes/InfiniteGridHelper'
-import { GroupQueryReactor, GroupReactorProps } from '../../scene/components/GroupComponent'
+import {
+  GroupComponent,
+  GroupQueryReactor,
+  GroupReactorProps,
+  addObjectToGroup
+} from '../../scene/components/GroupComponent'
+import { setVisibleComponent } from '../../scene/components/VisibleComponent'
 import { ObjectLayers } from '../../scene/constants/ObjectLayers'
 import { setObjectLayers } from '../../scene/functions/setObjectLayers'
 
-const lineMaterial = new LineBasicMaterial({ vertexColors: true })
-const _lineSegments = new LineSegments(new BufferGeometry(), lineMaterial)
-_lineSegments.frustumCulled = false
-
 const visualizers = [] as MeshBVHVisualizer[]
 
 const DebugGroupChildReactor = (props: GroupReactorProps) => {
@@ -84,16 +86,16 @@ const DebugGroupChildReactor = (props: GroupReactorProps) => {
 }
 
 const execute = () => {
-  const enabled = getState(RendererState).physicsDebug
-
-  _lineSegments.visible = enabled
-
-  const physicsWorld = getState(PhysicsState).physicsWorld
-
-  if (enabled && physicsWorld) {
-    const debugRenderBuffer = physicsWorld.debugRender()
-    _lineSegments.geometry.setAttribute('position', new BufferAttribute(debugRenderBuffer.vertices, 3))
-    _lineSegments.geometry.setAttribute('color', new BufferAttribute(debugRenderBuffer.colors, 4))
+  const physicsDebugEntity = getState(RendererState).physicsDebugEntity
+
+  if (physicsDebugEntity) {
+    const lineSegments = getComponent(physicsDebugEntity, GroupComponent)[0] as any as LineSegments
+    const physicsWorld = getState(PhysicsState).physicsWorld
+    if (physicsWorld) {
+      const debugRenderBuffer = physicsWorld.debugRender()
+      lineSegments.geometry.setAttribute('position', new BufferAttribute(debugRenderBuffer.vertices, 3))
+      lineSegments.geometry.setAttribute('color', new BufferAttribute(debugRenderBuffer.colors, 4))
+    }
   }
 
   for (const visualizer of visualizers) {
@@ -103,13 +105,23 @@ const execute = () => {
 
 const reactor = () => {
   const engineRendererSettings = useHookstate(getMutableState(RendererState))
+
   useEffect(() => {
-    setObjectLayers(_lineSegments, ObjectLayers.PhysicsHelper)
-    Engine.instance.scene.add(_lineSegments)
+    const lineMaterial = new LineBasicMaterial({ vertexColors: true })
+    const lineSegments = new LineSegments(new BufferGeometry(), lineMaterial)
+    lineSegments.frustumCulled = false
+    setObjectLayers(lineSegments, ObjectLayers.PhysicsHelper)
+
+    const lineSegmentsEntity = createEntity()
+    setVisibleComponent(lineSegmentsEntity, true)
+    addObjectToGroup(lineSegmentsEntity, lineSegments)
+    engineRendererSettings.physicsDebugEntity.set(lineSegmentsEntity)
+
     return () => {
-      _lineSegments.removeFromParent()
+      removeEntity(lineSegmentsEntity)
+      engineRendererSettings.physicsDebugEntity.set(null)
     }
-  }, [])
+  }, [engineRendererSettings.physicsDebug])
 
   useEffect(() => {
     if (!engineRendererSettings.gridVisibility.value) return
diff --git a/packages/engine/src/renderer/RendererState.ts b/packages/engine/src/renderer/RendererState.ts
index 23982e28ed..2d7a017c34 100644
--- a/packages/engine/src/renderer/RendererState.ts
+++ b/packages/engine/src/renderer/RendererState.ts
@@ -47,7 +47,8 @@ export const RendererState = defineState({
     gridHeight: 0,
     forceBasicMaterials: false,
     shadowMapResolution: isMobile ? 256 : 2048,
-    infiniteGridHelperEntity: null as Entity | null
+    infiniteGridHelperEntity: null as Entity | null,
+    physicsDebugEntity: null as Entity | null
   }),
   onCreate: (store, state) => {
     syncStateWithLocalStorage(RendererState, [
diff --git a/packages/engine/src/scene/systems/ShadowSystem.tsx b/packages/engine/src/scene/systems/ShadowSystem.tsx
index 8612e104a4..cc2da07d9c 100644
--- a/packages/engine/src/scene/systems/ShadowSystem.tsx
+++ b/packages/engine/src/scene/systems/ShadowSystem.tsx
@@ -100,15 +100,6 @@ const raycaster = new Raycaster()
 raycaster.firstHitOnly = true
 const raycasterPosition = new Vector3()
 
-const useCSMEffects = () => {
-  const rendererState = useHookstate(getMutableState(RendererState))
-  useEffect(() => {
-    if (!rendererState.csm.value) return
-    rendererState.csm.value.helper.paused = !rendererState.nodeHelperVisibility.value
-    rendererState.csm.value.helper.updateVisibility()
-  }, [rendererState.csm, rendererState.nodeHelperVisibility])
-}
-
 /** @deprecated @todo replace this whith EntityCSM when WebXR Light Estimation is entity driven */
 const SimpleCSM = (props: { light: DirectionalLight }) => {
   useEffect(() => {
@@ -118,9 +109,6 @@ const SimpleCSM = (props: { light: DirectionalLight }) => {
       getMutableState(RendererState).csm.set(null)
     }
   }, [])
-
-  useCSMEffects()
-
   return null
 }
 
@@ -165,8 +153,6 @@ const EntityCSMReactor = (props: { entity: Entity }) => {
     directionalLightComponent?.cameraFar
   ])
 
-  useCSMEffects()
-
   return null
 }
 
@@ -198,8 +184,6 @@ const PlainCSMReactor = () => {
     }
   }, [shadowMapResolution])
 
-  useCSMEffects()
-
   return null
 }
 
@@ -210,8 +194,14 @@ function CSMReactor() {
   const isEstimatingLight = useHookstate(xrState.isEstimatingLight)
   const directionalLights = useQuery([VisibleComponent, DirectionalLightComponent])
 
-  const csmEnabled = useHookstate(getMutableState(RenderSettingsState))?.csm?.value
+  const rendererState = useHookstate(getMutableState(RendererState))
+  useEffect(() => {
+    if (!rendererState.csm.value) return
+    rendererState.csm.value.helper.paused = !rendererState.nodeHelperVisibility.value
+    rendererState.csm.value.helper.updateVisibility()
+  }, [rendererState.csm, rendererState.nodeHelperVisibility])
 
+  const csmEnabled = useHookstate(getMutableState(RenderSettingsState))?.csm?.value
   if (!csmEnabled) return null
 
   if (isEstimatingLight.value)