diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..c2658d7
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/models/gs/nebula_rnd1.splat b/models/gs/nebula_rnd1.splat
new file mode 100644
index 0000000..552dd51
Binary files /dev/null and b/models/gs/nebula_rnd1.splat differ
diff --git a/splat_viewer.html b/splat_viewer.html
new file mode 100644
index 0000000..7826dbd
--- /dev/null
+++ b/splat_viewer.html
@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Splat Viewer — Nebula</title>
+    <link rel="icon" href="favicon.ico" type="image/x-icon" />
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600&display=swap" rel="stylesheet">
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            background-color: #000;
+            color: #eee;
+            font-family: 'Space Grotesk', sans-serif;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+        }
+
+        header {
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            background-color: rgba(10, 10, 10, 0.8);
+            padding: 10px 20px;
+            text-align: center;
+            position: absolute;
+            top: 0;
+            width: 100%;
+            z-index: 10;
+            box-sizing: border-box;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        header h1 {
+            margin: 0;
+            font-size: 1.2rem;
+            letter-spacing: 0.1em;
+            text-transform: uppercase;
+        }
+
+        #container {
+            flex-grow: 1;
+            width: 100%;
+            height: 100%;
+        }
+
+        #loading {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            text-align: center;
+            z-index: 5;
+        }
+
+        .spinner {
+            width: 40px;
+            height: 40px;
+            border: 3px solid rgba(255, 255, 255, 0.1);
+            border-top: 3px solid #fff;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 15px;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .controls-hint {
+            position: absolute;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(0, 0, 0, 0.6);
+            padding: 8px 15px;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            color: #888;
+            pointer-events: none;
+            z-index: 10;
+        }
+
+        .back-link {
+            position: absolute;
+            top: 15px;
+            left: 20px;
+            z-index: 20;
+            color: #fff;
+            text-decoration: none;
+            font-size: 0.9rem;
+            opacity: 0.7;
+            transition: opacity 0.3s;
+        }
+
+        .back-link:hover {
+            opacity: 1;
+        }
+    </style>
+</head>
+<body>
+
+    <header>
+        <a href="index.html" class="back-link">&larr; Back</a>
+        <h1>Nebula Splat Viewer</h1>
+    </header>
+
+    <div id="loading">
+        <div class="spinner"></div>
+        <div id="status">Loading Gaussian Splat...</div>
+    </div>
+
+    <div id="container"></div>
+
+    <div class="controls-hint">
+        Left Click: Rotate | Right Click: Pan | Scroll: Zoom
+    </div>
+
+    <script type="module">
+        import * as GSPLAT from 'https://cdn.jsdelivr.net/npm/gsplat@latest/dist/index.js';
+
+        async function init() {
+            const container = document.getElementById('container');
+            const status = document.getElementById('status');
+            const loading = document.getElementById('loading');
+
+            try {
+                // Initialize Renderer
+                const renderer = new GSPLAT.WebGLRenderer();
+                container.appendChild(renderer.canvas);
+
+                // Initialize Scene
+                const scene = new GSPLAT.Scene();
+                const camera = new GSPLAT.Camera();
+                const controls = new GSPLAT.OrbitControls(camera, renderer.canvas);
+
+                // Adjust camera initial position
+                camera.position.set(0, 0, 5);
+
+                // Resize handler
+                const resize = () => {
+                    renderer.setSize(window.innerWidth, window.innerHeight);
+                };
+                window.addEventListener('resize', resize);
+                resize();
+
+                // Load the Splat file
+                status.innerText = "Downloading compressed Splat...";
+                
+                // Using the .splat file provided by user
+                await GSPLAT.loadAsync(
+                    "/models/gs/nebula_rnd1.splat", 
+                    scene,
+                    (progress) => {
+                        const percent = Math.round(progress * 100);
+                        status.innerText = `Loading: ${percent}%`;
+                    }
+                );
+
+                loading.style.display = 'none';
+
+                // Animation loop
+                const frame = () => {
+                    controls.update();
+                    renderer.render(scene, camera);
+                    requestAnimationFrame(frame);
+                };
+                requestAnimationFrame(frame);
+
+            } catch (error) {
+                console.error(error);
+                status.innerText = "Error loading splat: " + error.message;
+                status.style.color = "#ff4444";
+                document.querySelector('.spinner').style.display = 'none';
+            }
+        }
+
+        init();
+    </script>
+</body>
+</html>