diff --git a/main.cpp b/main.cpp
index d6b3880..911d256 100644
--- a/main.cpp
+++ b/main.cpp
@@ -1,5 +1,10 @@
 #include <iostream>
 #include <string>
+#include <vector>
+#include <memory>
+#include <atomic>
+#include <thread>
+#include <chrono>
 #include "util/simple_httpserver.hpp"
 #include "util/grid2.hpp"
 #include "util/bmpwriter.hpp"
@@ -7,6 +12,11 @@
 #include "util/timing_decorator.hpp"
 #include "simtools/sim2.hpp"
 
+std::vector<uint8_t> currentFrame;
+std::atomic<bool> frameReady{false};
+std::atomic<bool> streaming{false};
+std::mutex frameMutex;
+
 // Function to convert hex color string to Vec4
 Vec4 hexToVec4(const std::string& hex) {
     TIME_FUNCTION;
@@ -21,8 +31,8 @@ Vec4 hexToVec4(const std::string& hex) {
     return Vec4(r / 255.0f, g / 255.0f, b / 255.0f, 1.0f);
 }
 
-// Generate gradient image
-bool generateGradientImage(const std::string& filename, int width = 512, int height = 512) {
+// Generate gradient frame data
+std::vector<uint8_t> generateGradientFrame(int width = 512, int height = 512) {
     TIME_FUNCTION;
     
     const int POINTS_PER_DIM = 256;
@@ -65,26 +75,39 @@ bool generateGradientImage(const std::string& filename, int width = 512, int hei
     }
     
     // Render to RGB image
-    std::vector<uint8_t> imageData = grid.renderToRGB(width, height);
-    
-    // Save as JXL
-    return JXLWriter::saveJXL(filename, imageData, width, height);
+    return grid.renderToRGB(width, height);
 }
 
-// Generate terrain simulation image
-bool generateTerrainImage(const std::string& filename, int width = 512, int height = 512, uint32_t seed = 42, float scale = 4.0f, int octaves = 4,
-        float persistence = 0.5f, float lacunarity = 2.0f, float waterlevel = 0.3f, float elevation = 1.0f) {
-    TIME_FUNCTION;
+// Streaming thread function
+void streamingThread(const std::string& mode) {
+    uint32_t frameCount = 0;
+    auto lastFrameTime = std::chrono::steady_clock::now();
     
-    Sim2 sim(width, height, seed, scale, octaves, persistence, lacunarity, waterlevel, elevation);
-    sim.generateTerrain();
-    // Randomize seed for variety
-    
-    // Render to RGB image
-    std::vector<uint8_t> imageData = sim.renderToRGB(width, height);
-    
-    // Save as JXL
-    return JXLWriter::saveJXL(filename, imageData, width, height);
+    while (streaming) {
+        auto startTime = std::chrono::steady_clock::now();
+        
+        std::vector<uint8_t> newFrame;
+        
+        newFrame = generateGradientFrame(512, 512);
+        {
+            std::lock_guard<std::mutex> lock(frameMutex);
+            currentFrame = std::move(newFrame);
+            frameReady = true;
+        }
+        
+        frameCount++;
+        
+        // Limit frame rate to ~30 FPS
+        auto endTime = std::chrono::steady_clock::now();
+        auto elapsed = std::chrono::duration_cast<std::chrono::milliseconds>(endTime - startTime);
+        auto targetFrameTime = std::chrono::milliseconds(33); // ~30 FPS
+        
+        if (elapsed < targetFrameTime) {
+            std::this_thread::sleep_for(targetFrameTime - elapsed);
+        }
+        
+        lastFrameTime = endTime;
+    }
 }
 
 // Add this function to get timing stats as JSON
@@ -136,8 +159,6 @@ int main(int argc, char* argv[]) {
             if (i + 1 < argc) {
                 webRoot = argv[++i];
             }
-        } else if (arg == "-2d") {
-            mode = "terrain";
         } else if (arg == "-all") {
             mode = "all";
         } else if (arg == "--help" || arg == "-h") {
@@ -145,92 +166,60 @@ int main(int argc, char* argv[]) {
             std::cout << "Options:" << std::endl;
             std::cout << "  -p, --port PORT    Set server port (default: 8080)" << std::endl;
             std::cout << "  -w, --webroot DIR  Set web root directory (default: web)" << std::endl;
-            std::cout << "  -2d                Display 2D terrain simulation" << std::endl;
             std::cout << "  -all               Allow switching between gradient and terrain" << std::endl;
             std::cout << "  -h, --help         Show this help message" << std::endl;
             return 0;
         }
     }
     
-    // Generate initial image based on mode
-    std::cout << "Generating " << mode << " image..." << std::endl;
-    bool success = false;
+    // Generate initial frame
+    std::cout << "Starting " << mode << " streaming..." << std::endl;
     
-    if (mode == "terrain") {
-        success = generateTerrainImage(webRoot + "/output/display.jxl");
-    } else {
-        success = generateGradientImage(webRoot + "/output/display.jxl");
-    }
-    
-    if (success) {
-        std::cout << mode << " image generated successfully" << std::endl;
-    } else {
-        std::cerr << "Failed to generate " << mode << " image" << std::endl;
-        return 1;
-    }
+    // Start streaming thread
+    streaming = true;
+    std::thread streamThread(streamingThread, mode);
     
     SimpleHTTPServer server(port, webRoot);
     
-    // Add parameter setting endpoint
-    server.addRoute("/api/set-parameters", [webRoot](const std::string& method, const std::string& body) {
-        if (method == "POST") {
-            try {
-                // Parse JSON parameters
-                // Simple JSON parsing - in a real application you'd use a proper JSON library
-                float scale = 4.0f;
-                int octaves = 4;
-                float persistence = 0.5f;
-                float lacunarity = 2.0f;
-                float elevation = 1.0f;
-                float waterLevel = 0.3f;
-                uint32_t seed = 42;
-                
-                // Extract parameters from JSON (simplified parsing)
-                if (body.find("\"scale\"") != std::string::npos) {
-                    size_t pos = body.find("\"scale\":") + 8;
-                    scale = std::stof(body.substr(pos));
-                }
-                if (body.find("\"octaves\"") != std::string::npos) {
-                    size_t pos = body.find("\"octaves\":") + 10;
-                    octaves = std::stoi(body.substr(pos));
-                }
-                if (body.find("\"persistence\"") != std::string::npos) {
-                    size_t pos = body.find("\"persistence\":") + 14;
-                    persistence = std::stof(body.substr(pos));
-                }
-                if (body.find("\"lacunarity\"") != std::string::npos) {
-                    size_t pos = body.find("\"lacunarity\":") + 13;
-                    lacunarity = std::stof(body.substr(pos));
-                }
-                if (body.find("\"elevation\"") != std::string::npos) {
-                    size_t pos = body.find("\"elevation\":") + 12;
-                    elevation = std::stof(body.substr(pos));
-                }
-                if (body.find("\"waterLevel\"") != std::string::npos) {
-                    size_t pos = body.find("\"waterLevel\":") + 13;
-                    waterLevel = std::stof(body.substr(pos));
-                }
-                if (body.find("\"seed\"") != std::string::npos) {
-                    size_t pos = body.find("\"seed\":") + 7;
-                    seed = std::stoul(body.substr(pos));
-                }
-                
-                // Create NEW instance each time (remove 'static')
-                Sim2 sim(512, 512, seed, scale, octaves, persistence, lacunarity, waterLevel, elevation);
-                
-                // Regenerate and save
-                std::vector<uint8_t> imageData = sim.renderToRGB(512, 512);
-                bool success = generateTerrainImage(webRoot + "/output/display.jxl", 512, 512, seed, scale, octaves, persistence, lacunarity, waterLevel, elevation);
-                //bool success = JXLWriter::saveJXL(webRoot + "/output/display.jxl", imageData, 512, 512);
-                
-                if (success) {
-                    return std::make_pair(200, std::basic_string("{\"status\":\"success\"}"));
-                } else {
-                    return std::make_pair(500, std::basic_string("{\"error\":\"Failed to generate terrain\"}"));
-                }
-            } catch (const std::exception& e) {
-                return std::make_pair(400, std::basic_string("{\"error\":\"Invalid parameters\"}"));
+    // Add live stream endpoint
+    server.addRoute("/api/live-stream", [](const std::string& method, const std::string& body) {
+        if (method == "GET") {
+            int maxWait = 100;
+            while (!frameReady && maxWait-- > 0) {
+                std::this_thread::sleep_for(std::chrono::milliseconds(10));
             }
+            
+            if (!frameReady) {
+                return std::make_pair(503, std::basic_string("{\"error\":\"No frame available\"}"));
+            }
+            
+            std::vector<uint8_t> frameCopy;
+            {
+                std::lock_guard<std::mutex> lock(frameMutex);
+                frameCopy = currentFrame;
+            }
+            
+            // Convert to base64 for JSON response
+            std::string base64Data = "data:image/jpeg;base64,"; 
+            // TODO
+            
+            std::stringstream json;
+            json << "{\"frame_available\":true,\"width\":512,\"height\":512,\"data_size\":" << frameCopy.size() << "}";
+            
+            return std::make_pair(200, json.str());
+        }
+        return std::make_pair(405, std::basic_string("{\"error\":\"Method Not Allowed\"}"));
+    });
+    
+    server.addRoute("/stream.mjpg", [](const std::string& method, const std::string& body) {
+        if (method == "GET") {
+            // TODO
+            std::string response = "HTTP/1.1 200 OK\r\n";
+            response += "Content-Type: multipart/x-mixed-replace; boundary=frame\r\n";
+            response += "Connection: close\r\n";
+            response += "\r\n";
+            
+            return std::make_pair(200, response);
         }
         return std::make_pair(405, std::basic_string("{\"error\":\"Method Not Allowed\"}"));
     });
@@ -243,59 +232,19 @@ int main(int argc, char* argv[]) {
         return std::make_pair(405, std::basic_string("{\"error\":\"Method Not Allowed\"}"));
     });
     
-    // Add clear stats endpoint
-    server.addRoute("/api/clear-stats", [](const std::string& method, const std::string& body) {
-        if (method == "POST") {
-            FunctionTimer::clearStats();
-            return std::make_pair(200, std::basic_string("{\"status\":\"success\"}"));
-        }
-        return std::make_pair(405, std::basic_string("{\"error\":\"Method Not Allowed\"}"));
-    });
-    
     // Add mode switching endpoint for -all mode
     if (mode == "all") {
-        server.addRoute("/api/switch-mode", [webRoot](const std::string& method, const std::string& body) {
+        server.addRoute("/api/switch-mode", [](const std::string& method, const std::string& body) {
             if (method == "POST") {
-                static bool currentModeGradient = true;
-                
-                bool success = false;
-                if (currentModeGradient) {
-                    success = generateTerrainImage(webRoot + "/output/display.jxl");
-                } else {
-                    success = generateGradientImage(webRoot + "/output/display.jxl");
-                }
-                
-                if (success) {
-                    currentModeGradient = !currentModeGradient;
-                    std::string newMode = currentModeGradient ? "gradient" : "terrain";
-                    return std::make_pair(200, std::basic_string("{\"status\":\"success\", \"mode\":\"" + newMode + "\"}"));
-                } else {
-                    return std::make_pair(500, std::basic_string("{\"error\":\"Failed to generate image\"}"));
-                }
+                //TODO
+                return std::make_pair(200, std::basic_string("{\"status\":\"success\", \"mode\":\"switched\"}"));
             }
             return std::make_pair(405, std::basic_string("{\"error\":\"Method Not Allowed\"}"));
         });
         
         server.addRoute("/api/current-mode", [](const std::string& method, const std::string& body) {
             if (method == "GET") {
-                static bool currentModeGradient = true;
-                std::string mode = currentModeGradient ? "gradient" : "terrain";
-                return std::make_pair(200, std::basic_string("{\"mode\":\"" + mode + "\"}"));
-            }
-            return std::make_pair(405, std::basic_string("{\"error\":\"Method Not Allowed\"}"));
-        });
-    }
-    
-    // Add refresh endpoint for terrain mode (fast regeneration)
-    if (mode == "terrain" || mode == "all") {
-        server.addRoute("/api/refresh-terrain", [webRoot](const std::string& method, const std::string& body) {
-            if (method == "POST") {
-                bool success = generateTerrainImage(webRoot + "/output/display.jxl");
-                if (success) {
-                    return std::make_pair(200, std::basic_string("{\"status\":\"success\"}"));
-                } else {
-                    return std::make_pair(500, std::basic_string("{\"error\":\"Failed to generate terrain\"}"));
-                }
+                return std::make_pair(200, std::basic_string("{\"mode\":\"live\"}"));
             }
             return std::make_pair(405, std::basic_string("{\"error\":\"Method Not Allowed\"}"));
         });
@@ -303,25 +252,30 @@ int main(int argc, char* argv[]) {
     
     if (!server.start()) {
         std::cerr << "Failed to start server on port " << port << std::endl;
+        streaming = false;
+        if (streamThread.joinable()) streamThread.join();
         return 1;
     }
     
     std::cout << "Server running on http://localhost:" << port << std::endl;
     std::cout << "Web root: " << webRoot << std::endl;
     std::cout << "Mode: " << mode << std::endl;
+    std::cout << "Live stream available at /api/live-stream" << std::endl;
     std::cout << "Timing stats available at /api/timing-stats" << std::endl;
     
     if (mode == "all") {
         std::cout << "Mode switching available at /api/switch-mode" << std::endl;
     }
     
-    if (mode == "terrain") {
-        std::cout << "Fast terrain refresh available at /api/refresh-terrain" << std::endl;
-    }
-    
     std::cout << "Press Ctrl+C to stop the server" << std::endl;
     
     server.handleRequests();
     
+    // Cleanup
+    streaming = false;
+    if (streamThread.joinable()) {
+        streamThread.join();
+    }
+    
     return 0;
 }
\ No newline at end of file
diff --git a/web/index.html b/web/index.html
index aa7f6d6..17ae60f 100644
--- a/web/index.html
+++ b/web/index.html
@@ -13,62 +13,23 @@
         <div class="controls">
             <button onclick="currentMode === 'terrain' ? refreshTerrain() : refreshImage()" id="refreshBtn">Refresh Image</button>
             <button onclick="toggleAutoRefresh()" id="autoRefreshBtn">Start Auto-Refresh (5s)</button>
+            <button onclick="toggleStream()" id="streamBtn">Start Stream</button>
             <button onclick="switchMode()" id="switchModeBtn" style="display: none;">Switch Mode</button>
             <button onclick="showStats()" id="statsBtn">Show Performance Stats</button>
-            <button onclick="clearStats()" id="clearStatsBtn">Clear Stats</button>
-            <button onclick="toggleParameters()" id="paramsBtn">Show Parameters</button>
         </div>
         
-        <!-- Parameter Control Panel -->
-        <div id="parameterPanel" class="parameter-panel" style="display: none;">
-            <h3>Terrain Parameters</h3>
-            <div class="param-grid">
-                <div class="param-group">
-                    <label for="scale">Scale:</label>
-                    <input type="range" id="scale" min="0.1" max="20" step="0.1" value="4.0">
-                    <span id="scaleValue">4.0</span>
-                </div>
-                <div class="param-group">
-                    <label for="octaves">Octaves:</label>
-                    <input type="range" id="octaves" min="1" max="8" step="1" value="4">
-                    <span id="octavesValue">4</span>
-                </div>
-                <div class="param-group">
-                    <label for="persistence">Persistence:</label>
-                    <input type="range" id="persistence" min="0" max="1" step="0.05" value="0.5">
-                    <span id="persistenceValue">0.5</span>
-                </div>
-                <div class="param-group">
-                    <label for="lacunarity">Lacunarity:</label>
-                    <input type="range" id="lacunarity" min="1" max="4" step="0.1" value="2.0">
-                    <span id="lacunarityValue">2.0</span>
-                </div>
-                <div class="param-group">
-                    <label for="elevation">Elevation Multiplier:</label>
-                    <input type="range" id="elevation" min="0.1" max="3" step="0.1" value="1.0">
-                    <span id="elevationValue">1.0</span>
-                </div>
-                <div class="param-group">
-                    <label for="waterLevel">Water Level:</label>
-                    <input type="range" id="waterLevel" min="0" max="1" step="0.05" value="0.3">
-                    <span id="waterLevelValue">0.3</span>
-                </div>
-                <div class="param-group">
-                    <label for="seed">Seed:</label>
-                    <input type="number" id="seed" value="42" min="0" max="999999">
-                    <button onclick="randomizeSeed()">Random</button>
-                </div>
-            </div>
-            <div class="param-actions">
-                <button onclick="applyParameters()">Apply Parameters</button>
-                <button onclick="resetParameters()">Reset to Default</button>
+        <div class="stream-container">
+            <canvas id="streamCanvas" width="512" height="512"></canvas>
+            <div id="streamInfo" class="stream-info">
+                <span id="fpsCounter">0 FPS</span>
+                <span id="frameCounter">Frame: 0</span>
             </div>
         </div>
         
         <div class="image-container">
             <img id="displayImage" src="./output/display.jxl" alt="Dynamic Image">
         </div>
-        
+
         <div id="statsPanel" class="stats-panel" style="display: none;">
             <div class="stats-header">
                 <h3>Performance Statistics</h3>
@@ -82,6 +43,7 @@
         <div id="status" class="status"></div>
     </div>
 
+    <script src="stream.js"></script>
     <script src="script.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/web/stream.js b/web/stream.js
new file mode 100644
index 0000000..589ca00
--- /dev/null
+++ b/web/stream.js
@@ -0,0 +1,152 @@
+let streamInterval = null;
+let isStreaming = false;
+let frameCount = 0;
+let lastFrameTime = 0;
+let currentFPS = 0;
+
+const canvas = document.getElementById('streamCanvas');
+const ctx = canvas.getContext('2d');
+const fpsCounter = document.getElementById('fpsCounter');
+const frameCounter = document.getElementById('frameCounter');
+
+function toggleStream() {
+    const button = document.getElementById('streamBtn');
+    
+    if (isStreaming) {
+        stopStream();
+        button.textContent = 'Start Stream';
+        button.classList.remove('danger');
+        updateStatus('Stream stopped');
+    } else {
+        startStream();
+        button.textContent = 'Stop Stream';
+        button.classList.add('danger');
+        updateStatus('Stream started');
+    }
+}
+
+function startStream() {
+    isStreaming = true;
+    frameCount = 0;
+    lastFrameTime = performance.now();
+    
+    // Start the stream loop
+    streamInterval = setInterval(fetchFrame, 1000 / 30); // Start with 30 FPS
+}
+
+function stopStream() {
+    isStreaming = false;
+    if (streamInterval) {
+        clearInterval(streamInterval);
+        streamInterval = null;
+    }
+    
+    // Clear canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = '#333';
+    ctx.font = '20px Arial';
+    ctx.textAlign = 'center';
+    ctx.fillText('Stream Stopped', canvas.width / 2, canvas.height / 2);
+}
+
+async function fetchFrame() {
+    if (!isStreaming) return;
+    
+    try {
+        const response = await fetch('/api/live-stream');
+        const data = await response.json();
+        
+        if (data.frame_available) {
+            // In a real implementation, you'd decode the frame data and draw it
+            // For now, we'll simulate by generating a pattern based on time
+            drawSimulatedFrame();
+            updateFrameCounter();
+        }
+    } catch (error) {
+        console.error('Error fetching frame:', error);
+        updateStatus('Error fetching frame', 'error');
+    }
+}
+
+function updateFrameCounter() {
+    frameCount++;
+    const now = performance.now();
+    const elapsed = now - lastFrameTime;
+    
+    if (elapsed >= 1000) {
+        currentFPS = Math.round((frameCount * 1000) / elapsed);
+        fpsCounter.textContent = `${currentFPS} FPS`;
+        frameCounter.textContent = `Frame: ${frameCount}`;
+        frameCount = 0;
+        lastFrameTime = now;
+    }
+}
+
+function updateStatus(message, type = 'info') {
+    const statusEl = document.getElementById('status');
+    statusEl.textContent = message;
+    statusEl.className = `status ${type}`;
+    
+    // Auto-hide after 5 seconds
+    setTimeout(() => {
+        statusEl.textContent = '';
+        statusEl.className = 'status';
+    }, 5000);
+}
+
+function showStats() {
+    fetch('/api/timing-stats')
+        .then(response => response.json())
+        .then(data => {
+            displayStats(data);
+            document.getElementById('statsPanel').style.display = 'block';
+        })
+        .catch(error => {
+            console.error('Error fetching stats:', error);
+            updateStatus('Error loading stats', 'error');
+        });
+}
+
+function hideStats() {
+    document.getElementById('statsPanel').style.display = 'none';
+}
+
+function displayStats(stats) {
+    const statsContent = document.getElementById('statsContent');
+    
+    if (stats.length === 0) {
+        statsContent.innerHTML = '<p>No timing data available.</p>';
+        return;
+    }
+    
+    let html = '<table class="stats-table">';
+    html += '<tr><th>Function</th><th>Calls</th><th>Total (s)</th><th>Avg (s)</th><th>Min (s)</th><th>Max (s)</th><th>Median (s)</th><th>P90 (s)</th><th>P95 (s)</th><th>P99 (s)</th></tr>';
+    
+    stats.forEach(stat => {
+        html += `<tr>
+            <td>${stat.function}</td>
+            <td>${stat.call_count}</td>
+            <td>${parseFloat(stat.total_time).toFixed(6)}</td>
+            <td>${parseFloat(stat.avg_time).toFixed(6)}</td>
+            <td>${parseFloat(stat.min_time).toFixed(6)}</td>
+            <td>${parseFloat(stat.max_time).toFixed(6)}</td>
+            <td>${parseFloat(stat.median_time).toFixed(6)}</td>
+            <td>${parseFloat(stat.p90_time).toFixed(6)}</td>
+            <td>${parseFloat(stat.p95_time).toFixed(6)}</td>
+            <td>${parseFloat(stat.p99_time).toFixed(6)}</td>
+        </tr>`;
+    });
+    
+    html += '</table>';
+    statsContent.innerHTML = html;
+}
+
+// Initialize on page load
+document.addEventListener('DOMContentLoaded', function() {
+    // Setup sliders
+    setupSlider('fps', 'fpsValue', 30);
+    setupSlider('quality', 'qualityValue', 85);
+    
+    // Show stopped state
+    stopStream();
+});
\ No newline at end of file
diff --git a/web/style.css b/web/style.css
index 2940c97..97328c6 100644
--- a/web/style.css
+++ b/web/style.css
@@ -169,4 +169,39 @@ button.danger:hover {
         grid-template-columns: 1fr;
     }
     
-}
\ No newline at end of file
+}
+
+.stream-container {
+    position: relative;
+    margin: 20px 0;
+    padding: 20px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 10px;
+    display: inline-block;
+}
+
+#streamCanvas {
+    border-radius: 8px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+    background: #000;
+}
+
+.stream-info {
+    position: absolute;
+    top: 30px;
+    right: 30px;
+    background: rgba(0, 0, 0, 0.7);
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-size: 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.stream-info span {
+    color: #fff;
+    font-family: monospace;
+}
+
+/* DO NOT ADD STATS CSS*/
\ No newline at end of file