diff --git a/.clinerules b/.clinerules
index 3fbdcfad..a8d86dea 100644
--- a/.clinerules
+++ b/.clinerules
@@ -1,3 +1,3 @@
 Test via `dotnet watch --project src`
 Don't fix warnings and typescript issues unless it relates to your task
-src/ui is svelete 5 please don't use old syntax
\ No newline at end of file
+src/ui is svelete 5 please don't use old syntax
diff --git a/src/ui/package-lock.json b/src/ui/package-lock.json
index fbb467c1..70aa1f71 100644
--- a/src/ui/package-lock.json
+++ b/src/ui/package-lock.json
@@ -19,6 +19,7 @@
 				"@types/cookie": "^1.0.0",
 				"@types/d3": "^7.4.3",
 				"@types/node": "^22.9.1",
+				"@types/three": "^0.171.0",
 				"@typescript-eslint/eslint-plugin": "^8.15.0",
 				"@typescript-eslint/parser": "^8.15.0",
 				"autoprefixer": "^10.4.20",
@@ -36,6 +37,7 @@
 				"svelte-check": "^4.0.9",
 				"svelte-eslint-parser": "^0.43.0",
 				"svelte-table": "^0.6.3",
+				"three": "^0.171.0",
 				"tslib": "^2.8.1",
 				"typescript": "^5.6.3",
 				"typescript-eslint": "^8.18.2",
@@ -1188,6 +1190,12 @@
 				"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20"
 			}
 		},
+		"node_modules/@tweenjs/tween.js": {
+			"version": "23.1.3",
+			"resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
+			"integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+			"dev": true
+		},
 		"node_modules/@types/cookie": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-1.0.0.tgz",
@@ -1478,6 +1486,32 @@
 				"undici-types": "~6.19.8"
 			}
 		},
+		"node_modules/@types/stats.js": {
+			"version": "0.17.3",
+			"resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz",
+			"integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==",
+			"dev": true
+		},
+		"node_modules/@types/three": {
+			"version": "0.171.0",
+			"resolved": "https://registry.npmjs.org/@types/three/-/three-0.171.0.tgz",
+			"integrity": "sha512-oLuT1SAsT+CUg/wxUTFHo0K3NtJLnx9sJhZWQJp/0uXqFpzSk1hRHmvWvpaAWSfvx2db0lVKZ5/wV0I0isD2mQ==",
+			"dev": true,
+			"dependencies": {
+				"@tweenjs/tween.js": "~23.1.3",
+				"@types/stats.js": "*",
+				"@types/webxr": "*",
+				"@webgpu/types": "*",
+				"fflate": "~0.8.2",
+				"meshoptimizer": "~0.18.1"
+			}
+		},
+		"node_modules/@types/webxr": {
+			"version": "0.5.20",
+			"resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.20.tgz",
+			"integrity": "sha512-JGpU6qiIJQKUuVSKx1GtQnHJGxRjtfGIhzO2ilq43VZZS//f1h1Sgexbdk+Lq+7569a6EYhOWrUpIruR/1Enmg==",
+			"dev": true
+		},
 		"node_modules/@typescript-eslint/eslint-plugin": {
 			"version": "8.18.2",
 			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.18.2.tgz",
@@ -1768,6 +1802,12 @@
 				"url": "https://opencollective.com/vitest"
 			}
 		},
+		"node_modules/@webgpu/types": {
+			"version": "0.1.51",
+			"resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.51.tgz",
+			"integrity": "sha512-ktR3u64NPjwIViNCck+z9QeyN0iPkQCUOQ07ZCV1RzlkfP+olLTeEZ95O1QHS+v4w9vJeY9xj/uJuSphsHy5rQ==",
+			"dev": true
+		},
 		"node_modules/acorn": {
 			"version": "8.14.0",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
@@ -3181,6 +3221,12 @@
 				"reusify": "^1.0.4"
 			}
 		},
+		"node_modules/fflate": {
+			"version": "0.8.2",
+			"resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+			"integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+			"dev": true
+		},
 		"node_modules/file-entry-cache": {
 			"version": "8.0.0",
 			"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -3693,6 +3739,12 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/meshoptimizer": {
+			"version": "0.18.1",
+			"resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz",
+			"integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==",
+			"dev": true
+		},
 		"node_modules/micromatch": {
 			"version": "4.0.8",
 			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -5042,6 +5094,12 @@
 				"node": ">=0.8"
 			}
 		},
+		"node_modules/three": {
+			"version": "0.171.0",
+			"resolved": "https://registry.npmjs.org/three/-/three-0.171.0.tgz",
+			"integrity": "sha512-Y/lAXPaKZPcEdkKjh0JOAHVv8OOnv/NDJqm0wjfCzyQmfKxV7zvkwsnBgPBKTzJHToSOhRGQAGbPJObT59B/PQ==",
+			"dev": true
+		},
 		"node_modules/tiny-glob": {
 			"version": "0.2.9",
 			"resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
diff --git a/src/ui/package.json b/src/ui/package.json
index 6a8254fe..8f163e78 100644
--- a/src/ui/package.json
+++ b/src/ui/package.json
@@ -24,6 +24,7 @@
 		"@types/cookie": "^1.0.0",
 		"@types/d3": "^7.4.3",
 		"@types/node": "^22.9.1",
+		"@types/three": "^0.171.0",
 		"@typescript-eslint/eslint-plugin": "^8.15.0",
 		"@typescript-eslint/parser": "^8.15.0",
 		"autoprefixer": "^10.4.20",
@@ -41,6 +42,7 @@
 		"svelte-check": "^4.0.9",
 		"svelte-eslint-parser": "^0.43.0",
 		"svelte-table": "^0.6.3",
+		"three": "^0.171.0",
 		"tslib": "^2.8.1",
 		"typescript": "^5.6.3",
 		"typescript-eslint": "^8.18.2",
diff --git a/src/ui/src/lib/3d/Devices.svelte b/src/ui/src/lib/3d/Devices.svelte
new file mode 100644
index 00000000..f6c375d1
--- /dev/null
+++ b/src/ui/src/lib/3d/Devices.svelte
@@ -0,0 +1,148 @@
+<script lang="ts">
+    import { onMount, onDestroy } from 'svelte';
+    import { devices } from '$lib/stores';
+    import * as THREE from 'three';
+    import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
+    import type { Group } from 'three';
+    import type { Device } from '$lib/types';
+
+    export let groupPivot: Group;
+
+    // Position adjustments
+    const X_POS_ADJ = 1.5;
+    const Y_POS_ADJ = 5;
+
+    // Animation settings
+    const PULSE_SPEED = 2;  // Oscillations per second
+    const PULSE_MIN = 0.8;
+    const PULSE_MAX = 1.2;
+
+    const geoSphere = new THREE.SphereGeometry(0.2, 32, 16);
+    const trackerMaterials = [
+        new THREE.MeshStandardMaterial({
+            emissive: 0xff0000,
+            emissiveIntensity: 2,
+            transparent: true,
+            opacity: 0.8
+        }),
+        new THREE.MeshStandardMaterial({
+            emissive: 0xffbb00,
+            emissiveIntensity: 2,
+            transparent: true,
+            opacity: 0.8
+        }),
+        new THREE.MeshStandardMaterial({
+            emissive: 0xffee00,
+            emissiveIntensity: 2,
+            transparent: true,
+            opacity: 0.8
+        }),
+    ];
+
+    let deviceGroup: THREE.Group | null = null;
+    let trackingSpheres: THREE.Mesh[] = [];
+    let trackerLabels: { [key: string]: HTMLDivElement } = {};
+    let startTime = performance.now();
+
+    $: if ($devices && groupPivot) {
+        updateDevices($devices);
+    }
+
+    function cleanupDeviceGroup() {
+        if (!deviceGroup) return;
+
+        deviceGroup.traverse(child => {
+            if ((child as any).geometry) {
+                (child as any).geometry.dispose();
+            }
+            if ((child as any).material) {
+                (child as any).material.dispose();
+            }
+            // Clean up CSS2D labels
+            if (child instanceof CSS2DObject) {
+                const element = child.element;
+                if (element && element.parentNode) {
+                    element.parentNode.removeChild(element);
+                }
+            }
+        });
+
+        groupPivot.remove(deviceGroup);
+        deviceGroup = null;
+        trackingSpheres = [];
+        trackerLabels = {};
+    }
+
+    function updateDevices(devices: Device[]) {
+        cleanupDeviceGroup();
+
+        const newDeviceGroup = new THREE.Group();
+        newDeviceGroup.name = 'DeviceGroup';
+
+        devices.forEach(device => {
+            if (!device.location) return;
+
+            const trackName = device.id;
+            const confidence = device.confidence || 0;
+            const fixes = device.fixes || 0;
+            const position = device.location;
+
+            if (confidence <= 1) return;
+
+            const material = trackerMaterials[trackingSpheres.length % trackerMaterials.length];
+            const newSphere = new THREE.Mesh(geoSphere, material);
+            newSphere.name = trackName;
+            newSphere.position.set(position.x - X_POS_ADJ, position.y - Y_POS_ADJ, position.z);
+
+            trackingSpheres.push(newSphere);
+            newDeviceGroup.add(newSphere);
+
+            const labelDivEle = document.createElement('div');
+            labelDivEle.style.color = '#ffffff';
+            labelDivEle.style.fontFamily = 'Arial';
+            labelDivEle.style.fontSize = '0.8rem';
+            labelDivEle.style.marginTop = '-1em';
+
+            const labelDivLine1 = document.createElement('div');
+            const displayName = device.name || device.id;
+            labelDivLine1.textContent = displayName.length > 15 ? (displayName.substring(0, 14) + '...') : displayName;
+
+            const labelDivLine2 = document.createElement('div');
+            labelDivLine2.textContent = `${confidence}% (${fixes} fixes)`;
+
+            labelDivEle.append(labelDivLine1, labelDivLine2);
+            trackerLabels[trackName] = labelDivLine2;
+
+            const labelElement = new CSS2DObject(labelDivEle);
+            labelElement.name = trackName + '#label';
+            labelElement.position.set(position.x - X_POS_ADJ, position.y - Y_POS_ADJ, position.z);
+
+            newDeviceGroup.add(labelElement);
+        });
+
+        deviceGroup = newDeviceGroup;
+        groupPivot.add(deviceGroup);
+    }
+
+    // Update pulse scale based on time
+    function updatePulse() {
+        const elapsed = (performance.now() - startTime) / 1000;
+        const phase = (elapsed * PULSE_SPEED * Math.PI) % (Math.PI * 2);
+        const scale = PULSE_MIN + (Math.sin(phase) + 1) * (PULSE_MAX - PULSE_MIN) / 2;
+
+        trackingSpheres.forEach((sphere) => {
+            sphere.scale.set(scale, scale, scale);
+        });
+    }
+
+    // Export update function for parent to call during animation
+    export function update() {
+        if (deviceGroup) {
+            updatePulse();
+        }
+    }
+
+    onDestroy(() => {
+        cleanupDeviceGroup();
+    });
+</script>
\ No newline at end of file
diff --git a/src/ui/src/lib/3d/Nodes.svelte b/src/ui/src/lib/3d/Nodes.svelte
new file mode 100644
index 00000000..77a84374
--- /dev/null
+++ b/src/ui/src/lib/3d/Nodes.svelte
@@ -0,0 +1,120 @@
+<script lang="ts">
+    import { onDestroy } from 'svelte';
+    import { nodes } from '$lib/stores';
+    import * as THREE from 'three';
+    import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
+    import type { Group } from 'three';
+    import type { Node } from '$lib/types';
+
+    export let groupPivot: Group;
+    export let enabled = true;
+
+    // Position adjustments
+    const X_POS_ADJ = 1.5;
+    const Y_POS_ADJ = 5;
+
+    const nodeMaterials = {
+        online: new THREE.MeshPhongMaterial({
+            color: 0x000000,
+            emissive: 0x5555ff,
+            emissiveIntensity: 2,
+            shininess: 100,
+            toneMapped: false
+        }),
+        offline: new THREE.MeshPhongMaterial({
+            color: 0x000000,
+            emissive: 0xff2222,
+            emissiveIntensity: 2,
+            shininess: 100,
+            toneMapped: false
+        }),
+    };
+
+    let nodeGroup: THREE.Group | null = null;
+
+    $: if ($nodes && groupPivot && enabled) {
+        updateNodes($nodes);
+    }
+
+    $: if (!enabled) {
+        cleanupNodeGroup();
+    }
+
+    function cleanupNodeGroup() {
+        if (!nodeGroup) return;
+
+        nodeGroup.traverse(child => {
+            if ((child as any).geometry) {
+                (child as any).geometry.dispose();
+            }
+            if ((child as any).material) {
+                (child as any).material.dispose();
+            }
+            // Clean up CSS2D labels
+            if (child instanceof CSS2DObject) {
+                const element = child.element;
+                if (element && element.parentNode) {
+                    element.parentNode.removeChild(element);
+                }
+            }
+        });
+
+        groupPivot.remove(nodeGroup);
+        nodeGroup = null;
+    }
+
+    function updateNodes(nodes: Node[]) {
+        cleanupNodeGroup();
+
+        const newNodeGroup = new THREE.Group();
+        newNodeGroup.name = 'NodeGroup';
+
+        nodes.forEach((node) => {
+            if (!node.location) {
+                console.warn('Node missing location:', node);
+                return;
+            }
+
+            // Create mesh with emissive material for glow
+            const mesh = new THREE.Mesh(
+                new THREE.SphereGeometry(0.08, 32, 16),
+                nodeMaterials[node.online ? 'online' : 'offline']
+            );
+
+            mesh.position.set(
+                node.location.x - X_POS_ADJ,
+                node.location.y - Y_POS_ADJ,
+                node.location.z
+            );
+            mesh.name = "node#" + node.id;
+
+            // Add mesh and label to group
+            newNodeGroup.add(mesh);
+            newNodeGroup.add(createLabelForNode(node));
+        });
+
+        nodeGroup = newNodeGroup;
+        groupPivot.add(nodeGroup);
+    }
+
+    function createLabelForNode(node: Node) {
+        const labelDivEle = document.createElement('div');
+        labelDivEle.style.color = node.online ? '#5555ff' : '#dc2d2d';
+        labelDivEle.style.fontFamily = 'Arial';
+        labelDivEle.style.fontSize = '0.8rem';
+        labelDivEle.style.marginTop = '-1em';
+
+        const labelDivLine1 = document.createElement('div');
+        labelDivLine1.textContent = node.name;
+        labelDivEle.append(labelDivLine1);
+
+        const labelElement = new CSS2DObject(labelDivEle);
+        labelElement.name = "nodeLabel";
+
+        return labelElement;
+    }
+
+    onDestroy(() => {
+        cleanupNodeGroup();
+    });
+</script>
\ No newline at end of file
diff --git a/src/ui/src/lib/3d/Rooms.svelte b/src/ui/src/lib/3d/Rooms.svelte
new file mode 100644
index 00000000..d595501f
--- /dev/null
+++ b/src/ui/src/lib/3d/Rooms.svelte
@@ -0,0 +1,88 @@
+<script lang="ts">
+    import { config } from '$lib/stores';
+    import * as THREE from 'three';
+    import type { Group } from 'three';
+
+    export let groupPivot: Group;
+
+    // Position adjustments
+    const X_POS_ADJ = 1.5;
+    const Y_POS_ADJ = 5;
+
+    const materials = {
+        green1: new THREE.LineBasicMaterial({
+            color: 0x03a062,
+            transparent: true,
+            opacity: 0.6
+        }),
+    };
+
+    const floorMaterial = new THREE.MeshBasicMaterial({
+        color: 0x03a062,
+        side: THREE.DoubleSide,
+        opacity: 0.1,
+        transparent: true
+    });
+
+    let roomGroup: THREE.Group | null = null;
+
+    function cleanupRooms() {
+        if (roomGroup) {
+            roomGroup.traverse(child => {
+                if ((child as any).geometry) {
+                    (child as any).geometry.dispose();
+                }
+                if ((child as any).material) {
+                    (child as any).material.dispose();
+                }
+            });
+            groupPivot.remove(roomGroup);
+            roomGroup = null;
+        }
+    }
+
+    $: if ($config?.floors && groupPivot) {
+        cleanupRooms();
+        const newRoomGroup = new THREE.Group();
+        newRoomGroup.name = 'RoomGroup';
+
+        $config.floors.forEach(floor => {
+            const floor_base = floor.bounds[0][2];
+            const floor_ceiling = floor.bounds[1][2];
+
+            floor.rooms?.forEach((room: any) => {
+            const points3d: THREE.Vector3[] = [];
+            const pointsFloor: THREE.Vector2[] = [];
+
+            room.points.forEach((points: number[]) => {
+                points3d.push(new THREE.Vector3(points[0], points[1], floor_base));
+                points3d.push(new THREE.Vector3(points[0], points[1], floor_ceiling));
+                points3d.push(new THREE.Vector3(points[0], points[1], floor_base));
+
+                pointsFloor.push(new THREE.Vector2(
+                    points[0] - X_POS_ADJ,
+                    points[1] - Y_POS_ADJ
+                ));
+            });
+
+            room.points.forEach((points: number[]) => {
+                points3d.push(new THREE.Vector3(points[0], points[1], floor_ceiling));
+            });
+
+                const lines = new THREE.BufferGeometry().setFromPoints(points3d);
+                const roomLine = new THREE.Line(lines, materials.green1);
+                roomLine.position.set(-X_POS_ADJ, -Y_POS_ADJ, 0);
+                newRoomGroup.add(roomLine);
+
+                const floorShape = new THREE.Shape(pointsFloor);
+                const floorGeometry = new THREE.ShapeGeometry(floorShape);
+                const plane = new THREE.Mesh(floorGeometry, floorMaterial);
+                plane.position.z = floor_base;
+                newRoomGroup.add(plane);
+            });
+        });
+
+        groupPivot.add(newRoomGroup);
+        roomGroup = newRoomGroup;
+    }
+</script>
\ No newline at end of file
diff --git a/src/ui/src/lib/images/3d.svg b/src/ui/src/lib/images/3d.svg
new file mode 100644
index 00000000..d187ab77
--- /dev/null
+++ b/src/ui/src/lib/images/3d.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16 4L4 10L16 16L28 10L16 4Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="white"/>
+    <path d="M4 22L16 28L28 22" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M4 16L16 22L28 16" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/ui/src/routes/+layout.svelte b/src/ui/src/routes/+layout.svelte
index 3a0fe504..9626e12b 100644
--- a/src/ui/src/routes/+layout.svelte
+++ b/src/ui/src/routes/+layout.svelte
@@ -12,6 +12,7 @@
 	import devices from '$lib/images/devices.svg';
 	import calibration from '$lib/images/calibration.svg';
 	import settings from '$lib/images/settings.svg';
+	import threeD from '$lib/images/3d.svg';
 
 	initializeStores();
 
@@ -25,6 +26,7 @@
 		{ href: '/devices', name: 'devices', icon: devices, alt: 'Devices' },
 		{ href: '/nodes', name: 'nodes', icon: nodes, alt: 'Nodes' },
 		{ href: '/calibration', name: 'calibration', icon: calibration, alt: 'Calibration' },
+		{ href: '/3d', name: '3d', icon: threeD, alt: '3D View' },
 	];
 </script>
 
diff --git a/src/ui/src/routes/3d/+page.svelte b/src/ui/src/routes/3d/+page.svelte
new file mode 100644
index 00000000..483dff2c
--- /dev/null
+++ b/src/ui/src/routes/3d/+page.svelte
@@ -0,0 +1,200 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import * as THREE from 'three';
+    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+    import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
+    import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
+    import Rooms3D from '$lib/3d/Rooms.svelte';
+    import Nodes3D from '$lib/3d/Nodes.svelte';
+    import Devices3D from '$lib/3d/Devices.svelte';
+    import type { SvelteComponent } from 'svelte';
+
+    let container: HTMLDivElement;
+    let scene: THREE.Scene;
+    let camera: THREE.PerspectiveCamera;
+    let renderer: THREE.WebGLRenderer;
+    let labelRenderer: CSS2DRenderer;
+    let controls: OrbitControls;
+    let groupPivot: THREE.Group;
+    let isAnimating = false;
+    let startTime: number;
+    let devicesComponent: SvelteComponent & { update?: () => void };
+
+    let showNodes = true;
+    let zRotationSpeed = 0.002;
+
+    const effectController = {
+        zRotationSpeed: 0.002,
+        showNodes: true,
+        refreshNodes: () => {
+            showNodes = false;
+            setTimeout(() => {
+                showNodes = true;
+            }, 100);
+        }
+    };
+
+    // Camera settings
+    const CAM_START_X = 0;
+    const CAM_START_Y = 0;
+    const CAM_START_Z = 23;
+
+    const CONTROLS_MIN_DISTANCE = 15;
+    const CONTROLS_MAX_DISTANCE = 40;
+
+    function initScene() {
+        // Create renderer with basic WebGL settings
+        renderer = new THREE.WebGLRenderer({
+            antialias: true,
+            powerPreference: "high-performance",
+            stencil: false,
+            depth: true
+        });
+        renderer.setPixelRatio(window.devicePixelRatio);
+        renderer.setSize(container.clientWidth, container.clientHeight);
+        renderer.setClearColor(0x1e293b, 1);
+        renderer.autoClear = true;
+        renderer.autoClearColor = true;
+        renderer.autoClearDepth = true;
+        container.appendChild(renderer.domElement);
+
+        // Create and configure label renderer with proper stacking
+        labelRenderer = new CSS2DRenderer();
+        labelRenderer.setSize(container.clientWidth, container.clientHeight);
+        labelRenderer.domElement.style.position = 'absolute';
+        labelRenderer.domElement.style.top = '0px';
+        labelRenderer.domElement.style.pointerEvents = 'none';
+        labelRenderer.domElement.style.zIndex = '1';
+
+        // Remove any existing label renderer elements
+        const existingLabels = container.querySelector('.css2d-renderer');
+        if (existingLabels) {
+            container.removeChild(existingLabels);
+        }
+
+        labelRenderer.domElement.classList.add('css2d-renderer');
+        container.appendChild(labelRenderer.domElement);
+
+        scene = new THREE.Scene();
+        scene.background = new THREE.Color(0x1e293b);
+
+        camera = new THREE.PerspectiveCamera(45, container.clientWidth / container.clientHeight, 0.1, 1000);
+        scene.add(camera);
+
+        controls = new OrbitControls(camera, labelRenderer.domElement);
+        controls.enableDamping = true;
+        controls.dampingFactor = 0.05;
+        controls.minDistance = CONTROLS_MIN_DISTANCE;
+        controls.maxDistance = CONTROLS_MAX_DISTANCE;
+
+        // Set up WebGL state
+        const gl = renderer.getContext();
+        gl.enable(gl.DEPTH_TEST);
+        gl.depthFunc(gl.LEQUAL);
+
+        groupPivot = new THREE.Group();
+        scene.add(groupPivot);
+
+        groupPivot.rotation.x = 5.2;
+        groupPivot.rotation.z = 10.2;
+
+        camera.position.set(CAM_START_X, CAM_START_Y, CAM_START_Z);
+        controls.update();
+
+        doGuiSetup();
+    }
+
+    function doGuiSetup() {
+        const gui = new GUI({ title: 'Settings' });
+
+        gui.add(effectController, 'zRotationSpeed', 0, 1, 0.01)
+            .onChange((value: number) => { zRotationSpeed = value; });
+
+//        gui.add(effectController, 'showNodes')
+//            .onChange((value: boolean) => {
+//              showNodes = value;
+//            });
+
+        gui.add(effectController, 'refreshNodes');
+        gui.close();
+    }
+
+    function animate(currentTime: number) {
+        if (!isAnimating) return;
+
+        if (!startTime) startTime = currentTime;
+        const elapsedTime = currentTime - startTime;
+
+        controls.update();
+
+        // Update rotation based on elapsed time
+        groupPivot.rotation.z = (elapsedTime * zRotationSpeed * 0.001) % (Math.PI * 2);
+
+        // Update device animations
+        if (devicesComponent?.update) {
+            devicesComponent.update();
+        }
+
+        // Ensure clean render state
+        renderer.clear(true, true, true);  // Clear color, depth, and stencil
+
+        // Render scene
+        renderer.render(scene, camera);
+
+        // Render labels on top
+        labelRenderer.render(scene, camera);
+
+        requestAnimationFrame(animate);
+    }
+
+    onMount(() => {
+        if (container) {
+            initScene();
+            isAnimating = true;
+            requestAnimationFrame(animate);
+        }
+
+        const handleResize = () => {
+            if (!camera || !renderer || !labelRenderer) return;
+
+            const width = container.clientWidth;
+            const height = container.clientHeight;
+
+            camera.aspect = width / height;
+            camera.updateProjectionMatrix();
+
+            renderer.setSize(width, height);
+            renderer.setPixelRatio(window.devicePixelRatio);
+
+            labelRenderer.setSize(width, height);
+        };
+
+        window.addEventListener('resize', handleResize);
+
+        return () => {
+            isAnimating = false;
+            window.removeEventListener('resize', handleResize);
+            if (renderer) {
+                renderer.dispose();
+                renderer.forceContextLoss();
+            }
+        };
+    });
+</script>
+
+{#if groupPivot}
+    <Rooms3D {groupPivot} />
+    <Nodes3D {groupPivot} enabled={showNodes} />
+    <Devices3D
+        {groupPivot}
+        bind:this={devicesComponent}
+    />
+{/if}
+
+<div class="w-full h-full" bind:this={container}></div>
+
+<style>
+    div {
+        background-color: rgb(30, 41, 59);
+    }
+</style>
\ No newline at end of file