diff --git a/index.html b/index.html
index 4f33f8f..654a579 100644
--- a/index.html
+++ b/index.html
@@ -6,43 +6,80 @@
     <title>DWS Intelligence</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.1/dist/chartjs-adapter-moment.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@400;700&display=swap" rel="stylesheet">
     <style>
         body {
-            font-family: Arial, sans-serif;
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
+            font-family: 'Noto Sans Mono', monospace;
+            background-color: #000;
+            color: #fff;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            overflow: hidden;
         }
         #chat-container {
-            border: 1px solid #ccc;
-            height: 400px;
+            border: 2px solid #444;
+            flex: 1;
             overflow-y: auto;
             padding: 10px;
-            margin-bottom: 10px;
+            background-color: #111;
+            box-sizing: border-box;
+        }
+        #input-container {
+            display: flex;
+            flex-direction: column;
+            padding: 10px;
+            background-color: #222;
+            box-sizing: border-box;
         }
         #user-input {
             width: 100%;
             padding: 10px;
+            background-color: #000;
+            color: #fff;
+            border: 1px solid #444;
+            font-family: 'Noto Sans Mono', monospace;
+            font-size: 16px;
             margin-bottom: 10px;
+            box-sizing: border-box;
         }
         #send-button {
             width: 100%;
             padding: 10px;
-            background-color: #4CAF50;
-            color: white;
+            background-color: #444;
+            color: #fff;
             border: none;
             cursor: pointer;
+            font-family: 'Noto Sans Mono', monospace;
+            font-size: 16px;
+            box-sizing: border-box;
         }
         .message {
             margin-bottom: 10px;
+            font-size: 16px;
         }
         .user-message {
             text-align: right;
-            color: blue;
+            color: #0ff;
         }
         .bot-message {
             text-align: left;
-            color: green;
+            color: #fff;
+        }
+        .bot-message pre {
+            background-color: #222;
+            padding: 10px;
+            border-radius: 5px;
+            overflow-x: auto;
+        }
+        .bot-message code {
+            font-family: 'Noto Sans Mono', monospace;
+            font-size: 14px;
         }
         .thinking {
             font-style: italic;
@@ -50,19 +87,21 @@
         }
         .thought-summary {
             cursor: pointer;
-            color: #888;
+            color: #fff;
             margin-bottom: 5px;
             font-weight: bold;
+            display: flex;
+            align-items: center;
         }
         .thought-details {
             display: none;
             margin-left: 20px;
-            border-left: 2px solid #ccc;
+            border-left: 2px solid #444;
             padding-left: 10px;
             margin-bottom: 10px;
             white-space: pre-wrap;
-            font-family: monospace;
-            background-color: #f0f0f0;
+            font-family: 'Noto Sans Mono', monospace;
+            background-color: #222;
         }
         .collapsible::before {
             content: '▶ ';
@@ -72,13 +111,169 @@
         .collapsible.open::before {
             transform: rotate(90deg);
         }
+        .led {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background-color: #f00;
+            margin-right: 10px;
+            position: relative;
+        }
+        .led::after {
+            content: '';
+            position: absolute;
+            top: -5px;
+            left: -5px;
+            right: -5px;
+            bottom: -5px;
+            background-color: #f00;
+            border-radius: 50%;
+            filter: blur(5px);
+            opacity: 0;
+            transition: opacity 0.5s ease-in-out;
+        }
+        .led.blinking {
+            animation: blink 1s step-start infinite;
+        }
+        .led.blinking::after {
+            animation: glow 1s ease-in-out infinite alternate;
+        }
+        @keyframes blink {
+            50% {
+                opacity: 0;
+            }
+        }
+        @keyframes glow {
+            0% {
+                opacity: 0;
+            }
+            100% {
+                opacity: 0.5;
+            }
+        }
+        /* PDP-11 inspired styles */
+        #chat-container::-webkit-scrollbar {
+            width: 12px;
+        }
+        #chat-container::-webkit-scrollbar-track {
+            background: #222;
+        }
+        #chat-container::-webkit-scrollbar-thumb {
+            background-color: #444;
+            border-radius: 6px;
+            border: 3px solid #222;
+        }
+        .pdp-panel {
+            background-color: #333;
+            border: 2px solid #555;
+            border-radius: 5px;
+            padding: 10px;
+            margin-bottom: 10px;
+        }
+        .pdp-label {
+            font-size: 14px;
+            color: #888;
+            margin-bottom: 5px;
+        }
+        
+        #main-container {
+            display: flex;
+            height: 100vh;
+        }
+        
+        #chat-area {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        #sidebar {
+            width: 300px;
+            background-color: #222;
+            padding: 10px;
+            box-sizing: border-box;
+            overflow-y: auto;
+            transition: transform 0.3s ease-in-out;
+        }
+        
+        #sidebar.collapsed {
+            transform: translateX(100%);
+        }
+        
+        #sidebar-toggle {
+            position: fixed;
+            top: 10px;
+            right: 10px;
+            z-index: 1000;
+            background-color: #444;
+            color: #fff;
+            border: none;
+            padding: 5px 10px;
+            cursor: pointer;
+        }
+        
+        .graph-container {
+            margin-bottom: 20px;
+            height: 150px;
+        }
+        
+        .graph-title {
+            color: #888;
+            font-size: 14px;
+            margin-bottom: 5px;
+        }
+        
+        @media (max-width: 768px) {
+            #sidebar {
+                position: fixed;
+                right: 0;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+                max-width: 300px;
+                transform: translateX(100%);
+            }
+            
+            #sidebar.collapsed {
+                transform: translateX(0);
+            }
+        }
     </style>
 </head>
 <body>
-    <h1>DWS Intelligence</h1>
-    <div id="chat-container"></div>
-    <textarea id="user-input" placeholder="Type your message here..." rows="3"></textarea>
-    <button id="send-button">Send</button>
+    <div id="main-container">
+        <div id="chat-area">
+            <div id="chat-container"></div>
+            <div id="input-container" class="pdp-panel">
+                <div class="pdp-label">INPUT:</div>
+                <textarea id="user-input" placeholder="Type your message here..." rows="3"></textarea>
+                <button id="send-button">EXECUTE</button>
+            </div>
+        </div>
+        <button id="sidebar-toggle">Toggle Charts</button>
+        <div id="sidebar" class="collapsed">
+            <div class="graph-container">
+                <div class="graph-title">CPU Load</div>
+                <canvas id="cpuChart"></canvas>
+            </div>
+            <div class="graph-container">
+                <div class="graph-title">Memory Usage</div>
+                <canvas id="memoryChart"></canvas>
+            </div>
+            <div class="graph-container">
+                <div class="graph-title">Disk I/O</div>
+                <canvas id="diskChart"></canvas>
+            </div>
+            <div class="graph-container">
+                <div class="graph-title">GPU Load</div>
+                <canvas id="gpuChart"></canvas>
+            </div>
+            <div class="graph-container">
+                <div class="graph-title">GPU Memory</div>
+                <canvas id="gpuMemoryChart"></canvas>
+            </div>
+        </div>
+    </div>
 
     <script>
         const socket = io();
@@ -102,7 +297,14 @@
         function startThinking() {
             thinkingElement = document.createElement('div');
             thinkingElement.classList.add('thought-summary', 'collapsible');
-            thinkingElement.textContent = 'Thinking...';
+            
+            const led = document.createElement('div');
+            led.classList.add('led', 'blinking');
+            
+            const textNode = document.createTextNode('Thinking...');
+            
+            thinkingElement.appendChild(led);
+            thinkingElement.appendChild(textNode);
             thinkingElement.onclick = toggleThinkingDetails;
             
             thinkingDetails = document.createElement('div');
@@ -134,7 +336,12 @@
 
         function endThinking(thinkingTime) {
             if (thinkingElement) {
-                thinkingElement.textContent = `Thinking... (${thinkingTime}s)`;
+                const textNode = thinkingElement.childNodes[1];
+                textNode.nodeValue = `Thinking... (${thinkingTime}s)`;
+                const led = thinkingElement.querySelector('.led');
+                led.classList.remove('blinking');
+                led.style.backgroundColor = '#0f0';
+                led.style.boxShadow = '0 0 10px #0f0';
                 thinkingStartTime = null;
             }
         }
@@ -190,6 +397,179 @@
                 sendMessage();
             }
         });
+
+        const chartOptions = {
+            type: 'line',
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                animation: false,
+                elements: {
+                    line: {
+                        tension: 0
+                    },
+                    point: {
+                        radius: 0
+                    }
+                },
+                scales: {
+                    x: {
+                        type: 'time',
+                        time: {
+                            unit: 'second',
+                            displayFormats: {
+                                second: 'HH:mm:ss'
+                            }
+                        },
+                        ticks: {
+                            display: false
+                        }
+                    },
+                    y: {
+                        beginAtZero: true,
+                        max: 100,
+                        ticks: {
+                            callback: function(value) {
+                                return value + '%';
+                            }
+                        }
+                    }
+                },
+                plugins: {
+                    legend: {
+                        display: false
+                    }
+                }
+            }
+        };
+
+        const cpuChart = new Chart(document.getElementById('cpuChart').getContext('2d'), {
+            ...chartOptions,
+            data: {
+                datasets: [{
+                    label: 'CPU Load',
+                    data: [],
+                    borderColor: 'rgb(75, 192, 192)',
+                    fill: false
+                }]
+            }
+        });
+
+        const memoryChart = new Chart(document.getElementById('memoryChart').getContext('2d'), {
+            ...chartOptions,
+            data: {
+                datasets: [{
+                    label: 'Memory Usage',
+                    data: [],
+                    borderColor: 'rgb(255, 159, 64)',
+                    fill: false
+                }]
+            }
+        });
+
+        const diskChart = new Chart(document.getElementById('diskChart').getContext('2d'), {
+            ...chartOptions,
+            options: {
+                ...chartOptions.options,
+                scales: {
+                    ...chartOptions.options.scales,
+                    y: {
+                        beginAtZero: true,
+                        ticks: {
+                            callback: function(value) {
+                                return (value / 1024 / 1024).toFixed(2) + ' MB/s';
+                            }
+                        }
+                    }
+                }
+            },
+            data: {
+                datasets: [{
+                    label: 'Disk Read',
+                    data: [],
+                    borderColor: 'rgb(54, 162, 235)',
+                    fill: false
+                },
+                {
+                    label: 'Disk Write',
+                    data: [],
+                    borderColor: 'rgb(255, 99, 132)',
+                    fill: false
+                }]
+            }
+        });
+
+        const gpuChart = new Chart(document.getElementById('gpuChart').getContext('2d'), {
+            ...chartOptions,
+            data: {
+                datasets: [{
+                    label: 'GPU Load',
+                    data: [],
+                    borderColor: 'rgb(153, 102, 255)',
+                    fill: false
+                }]
+            }
+        });
+
+        const gpuMemoryChart = new Chart(document.getElementById('gpuMemoryChart').getContext('2d'), {
+            ...chartOptions,
+            data: {
+                datasets: [{
+                    label: 'GPU Memory',
+                    data: [],
+                    borderColor: 'rgb(255, 206, 86)',
+                    fill: false
+                }]
+            }
+        });
+
+        function updateCharts(data) {
+            if (sidebar.classList.contains('collapsed')) return;
+
+            const now = Date.now();
+            const thirtySecondsAgo = now - 30000;
+
+            function updateChart(chart, value) {
+                chart.data.datasets[0].data.push({x: now, y: value});
+                chart.data.datasets[0].data = chart.data.datasets[0].data.filter(point => point.x > thirtySecondsAgo);
+                chart.update('none');
+            }
+
+            updateChart(cpuChart, data.cpu_load);
+            updateChart(memoryChart, data.memory_usage);
+            updateChart(gpuChart, data.gpu_load);
+            updateChart(gpuMemoryChart, data.gpu_memory);
+
+            // Update disk chart (it has two datasets)
+            diskChart.data.datasets[0].data.push({x: now, y: data.disk_read_rate});
+            diskChart.data.datasets[1].data.push({x: now, y: data.disk_write_rate});
+            diskChart.data.datasets[0].data = diskChart.data.datasets[0].data.filter(point => point.x > thirtySecondsAgo);
+            diskChart.data.datasets[1].data = diskChart.data.datasets[1].data.filter(point => point.x > thirtySecondsAgo);
+            diskChart.update('none');
+        }
+
+        // Listen for system resource updates
+        socket.on('system_resources', (data) => {
+            updateCharts(data);
+        });
+
+        const sidebar = document.getElementById('sidebar');
+        const sidebarToggle = document.getElementById('sidebar-toggle');
+
+        sidebarToggle.addEventListener('click', () => {
+            sidebar.classList.toggle('collapsed');
+        });
+
+        function checkWindowSize() {
+            if (window.innerWidth <= 768) {
+                sidebar.classList.add('collapsed');
+            } else {
+                sidebar.classList.remove('collapsed');
+            }
+        }
+
+        window.addEventListener('resize', checkWindowSize);
+        checkWindowSize(); // Initial check
     </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/main.py b/main.py
index ba6df8b..176661e 100644
--- a/main.py
+++ b/main.py
@@ -6,6 +6,10 @@ from typing import List
 from models import model_manager
 import structlog
 import time
+import psutil
+import GPUtil
+import threading
+import os
 
 
 
@@ -231,6 +235,53 @@ def generate_final_response(user_input: str, plan: List[str], step_results: List
     response = model_manager.generate_text("qwen2.5:7b", prompt, max_length=500)
     return response, response
 
+UPDATE_INTERVAL = 0.1  # 100ms, configurable
+
+def get_system_resources():
+    cpu_load = psutil.cpu_percent()
+    memory = psutil.virtual_memory()
+    memory_usage = memory.percent
+    disk_io = psutil.disk_io_counters()
+    disk_read = disk_io.read_bytes
+    disk_write = disk_io.write_bytes
+    
+    gpus = GPUtil.getGPUs()
+    gpu_load = gpus[0].load * 100 if gpus else 0
+    gpu_memory = gpus[0].memoryUtil * 100 if gpus else 0
+    
+    return {
+        'cpu_load': cpu_load,
+        'memory_usage': memory_usage,
+        'disk_read': disk_read,
+        'disk_write': disk_write,
+        'gpu_load': gpu_load,
+        'gpu_memory': gpu_memory
+    }
+
+def send_system_resources():
+    last_disk_read = 0
+    last_disk_write = 0
+    while True:
+        resources = get_system_resources()
+        
+        # Calculate disk I/O rates
+        disk_read_rate = (resources['disk_read'] - last_disk_read) / UPDATE_INTERVAL
+        disk_write_rate = (resources['disk_write'] - last_disk_write) / UPDATE_INTERVAL
+        
+        socketio.emit('system_resources', {
+            'cpu_load': resources['cpu_load'],
+            'memory_usage': resources['memory_usage'],
+            'disk_read_rate': disk_read_rate,
+            'disk_write_rate': disk_write_rate,
+            'gpu_load': resources['gpu_load'],
+            'gpu_memory': resources['gpu_memory']
+        })
+        
+        last_disk_read = resources['disk_read']
+        last_disk_write = resources['disk_write']
+        time.sleep(UPDATE_INTERVAL)
+
 if __name__ == "__main__":
     logger.info("Starting LLM Chat Server")
-    socketio.run(app, debug=True)
+    threading.Thread(target=send_system_resources, daemon=True).start()
+    socketio.run(app, debug=True, host="0.0.0.0", port=5000)
\ No newline at end of file