diff --git a/apps/editor/components/editor.tsx b/apps/editor/components/editor.tsx
index 0aeccdce..1fd5a8cf 100644
--- a/apps/editor/components/editor.tsx
+++ b/apps/editor/components/editor.tsx
@@ -4,8 +4,8 @@ import { Environment, OrbitControls } from "@react-three/drei";
 import { Canvas, ThreeToJSXElements } from "@react-three/fiber";
 
 import { extend } from "@react-three/fiber";
-import { color, sin, time } from "three/tsl";
 import * as THREE from "three/webgpu";
+import { SceneRenderer } from "./renderers/scene-renderer";
 
 declare module "@react-three/fiber" {
   interface ThreeElements extends ThreeToJSXElements<typeof THREE> {}
@@ -26,10 +26,7 @@ export default function Editor() {
     >
       <OrbitControls />
       <Environment preset="sunset" />
-      <mesh>
-        <boxGeometry args={[1, 1, 1]} />
-        <meshStandardNodeMaterial colorNode={color("pink").mul(sin(time))} />
-      </mesh>
+      <SceneRenderer />
     </Canvas>
   );
 }
diff --git a/apps/editor/components/renderers/scene-renderer.tsx b/apps/editor/components/renderers/scene-renderer.tsx
new file mode 100644
index 00000000..c789dd2d
--- /dev/null
+++ b/apps/editor/components/renderers/scene-renderer.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { AnyNode, LevelNode, useScene, WallNode } from "@pascal-app/core";
+import { useRef } from "react";
+import * as THREE from "three/webgpu";
+
+export const SceneRenderer = () => {
+  const rootNodes = useScene((state) => state.rootNodeIds);
+
+  return rootNodes.map((nodeId) => (
+    <NodeRenderer key={nodeId} nodeId={nodeId} />
+  ));
+};
+
+const NodeRenderer = ({ nodeId }: { nodeId: AnyNode["id"] }) => {
+  const node = useScene((state) => state.nodes[nodeId]);
+
+  if (!node) return null;
+
+  return (
+    <>
+      {node.type === "level" && <LevelRenderer node={node} />}
+      {/* {node.type === "item" && <ItemRenderer node={node} />} */}
+      {node.type === "wall" && <WallRenderer node={node} />}
+    </>
+  );
+};
+
+const LevelRenderer = ({ node }: { node: LevelNode }) => {
+  const ref = useRef<THREE.Group>(null!);
+
+  // useRegistry(node.id, node.type, ref);
+  return (
+    <group ref={ref}>
+      <mesh receiveShadow>
+        <boxGeometry args={[10, 0.1, 10]} />
+        <meshStandardMaterial color="orange" />
+      </mesh>
+      {node.children.map((childId) => (
+        <NodeRenderer key={childId} nodeId={childId} />
+      ))}
+    </group>
+  );
+};
+
+const WallRenderer = ({ node }: { node: WallNode }) => {
+  const ref = useRef<THREE.Mesh>(null!);
+  console.log("node", node);
+
+  // useRegistry(node.id, "wall", ref);
+
+  return (
+    <mesh ref={ref} castShadow receiveShadow>
+      {/* WallSystem will replace this geometry in the next frame */}
+      <boxGeometry args={[1, 2, 0.1]} />
+      <meshStandardMaterial color="lightgray" />
+
+      {/* If you want windows to be inside the wall's local coordinate system:
+         render children here. 
+      */}
+      {/* {node.children.map((childId) => (
+        <NodeRenderer key={childId} nodeId={childId} />
+      ))} */}
+    </mesh>
+  );
+};