diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..804ba4d
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,215 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Real-Time ETH/USDT Chart</title>
+    <script src="https://unpkg.com/lightweight-charts@4.1.3/dist/lightweight-charts.standalone.production.js"></script>
+    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
+    
+    <!-- Indicator & Aggregation Scripts -->
+    <script src="{{ url_for('static', filename='candle-aggregator.js') }}"></script>
+    <script src="{{ url_for('static', filename='sma.js') }}"></script>
+    <script src="{{ url_for('static', filename='ema.js') }}"></script>
+    <script src="{{ url_for('static', filename='bb.js') }}"></script> 
+    <script src="{{ url_for('static', filename='indicators.js') }}"></script>
+    <script src="{{ url_for('static', filename='indicator-manager.js') }}"></script>
+
+    <style>
+        :root {
+            --background-dark: #161A25; --container-dark: #1E222D; --border-color: #2A2E39;
+            --text-primary: #D1D4DC; --text-secondary: #8A91A0; --button-bg: #363A45;
+            --button-hover-bg: #434651; --accent-orange: #F0B90B; --green: #26a69a; --red: #ef5350;
+        }
+        body {
+            background-color: var(--background-dark); color: var(--text-primary);
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+            margin: 0; padding: 20px 0; display: flex; flex-direction: column; align-items: center;
+        }
+        .header {
+            width: 90%; max-width: 1400px; text-align: left; padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color); margin-bottom: 20px;
+        }
+        .header h1 { margin: 0; font-size: 24px; }
+        #chart { width: 90%; max-width: 1400px; height: 500px; }
+        .control-panel {
+            display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 15px; width: 90%; max-width: 1400px; padding: 20px 0;
+        }
+        .control-cell {
+            background-color: var(--container-dark); border: 1px solid var(--border-color);
+            border-radius: 8px; padding: 15px; display: flex; flex-direction: column;
+            justify-content: flex-start; align-items: center; min-height: 80px;
+        }
+        .indicator-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 10px; }
+        .action-button, .input-field, .control-cell select {
+            background-color: var(--button-bg); border: 1px solid var(--border-color);
+            color: var(--text-primary); padding: 8px 12px; text-align: center;
+            text-decoration: none; display: inline-block; font-size: 14px;
+            border-radius: 5px; cursor: pointer; transition: background-color 0.3s, color 0.3s;
+        }
+        .action-button:hover, .control-cell select:hover { background-color: var(--button-hover-bg); }
+        #analyzeButton:hover { color: var(--accent-orange); }
+        .input-field { width: 60px; }
+        .analysis-section {
+            width: 90%; max-width: 1400px; background-color: var(--container-dark);
+            border: 1px solid var(--border-color); border-radius: 8px; padding: 20px;
+            margin-top: 10px; text-align: center;
+        }
+        #analysisResult {
+            margin-top: 15px; font-size: 0.95rem; line-height: 1.6; text-align: left;
+            white-space: pre-wrap; color: var(--text-primary); background-color: var(--background-dark);
+            padding: 15px; border-radius: 5px; min-height: 50px;
+        }
+        #candle-timer { font-size: 2rem; font-weight: 500; color: var(--accent-orange); }
+        #timeframe-select { margin-top: 10px; }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1 id="chart-title">{{ symbol }} Chart</h1>
+    </div>
+
+    <div id="chart"></div>
+
+    <div class="control-panel">
+        <div class="control-cell">
+            <h3>Candle Closes In</h3>
+            <div id="candle-timer">--:--</div>
+            <select id="timeframe-select">
+                <option value="1">1m</option>
+                <option value="2">2m</option>
+                <option value="3">3m</option>
+                <option value="4">4m</option>
+                <option value="5">5m</option>
+                <option value="6">6m</option>
+                <option value="7">7m</option>
+                <option value="8">8m</option>
+                <option value="9">9m</option>
+                <option value="10">10m</option>
+            </select>
+        </div>
+        <div class="control-cell" id="indicator-cell-1"></div>
+        <div class="control-cell" id="indicator-cell-2"></div>
+        <div class="control-cell" id="indicator-cell-3"></div>
+        <div class="control-cell" id="indicator-cell-4"></div>
+    </div>
+
+    <div class="analysis-section">
+        <h3>Analysis ✨</h3>
+        <button id="analyzeButton" class="action-button">Analyze Recent Price Action</button>
+        <div id="analysisResult">Click the button for AI analysis.</div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', (event) => {
+            const chartElement = document.getElementById('chart');
+            const chart = LightweightCharts.createChart(chartElement, {
+                width: chartElement.clientWidth, height: 500,
+                layout: { background: { type: 'solid', color: '#1E222D' }, textColor: '#D1D4DC' },
+                grid: { vertLines: { color: '#2A2E39' }, horzLines: { color: '#2A2E39' } },
+                timeScale: { timeVisible: true, secondsVisible: true }
+            });
+            const candlestickSeries = chart.addCandlestickSeries({
+                upColor: '#26a69a', downColor: '#ef5350', borderDownColor: '#ef5350',
+                borderUpColor: '#26a69a', wickDownColor: '#ef5350', wickUpColor: '#26a69a',
+            });
+
+            let baseCandleData1m = [];
+            let displayedCandleData = [];
+            let currentCandle1m = null;
+            let manager;
+
+            const timeframeSelect = document.getElementById('timeframe-select');
+            const candleTimerDiv = document.getElementById('candle-timer');
+            const chartTitle = document.getElementById('chart-title');
+            const analyzeButton = document.getElementById('analyzeButton');
+            const analysisResultDiv = document.getElementById('analysisResult');
+
+            manager = createIndicatorManager(chart, baseCandleData1m);
+            manager.populateDropdowns();
+
+            const socket = io();
+            socket.on('connect', () => console.log('Socket.IO connected.'));
+
+            socket.on('history_finished', (data) => {
+                if (!data || !data.klines_1m) return;
+                
+                const mappedKlines = data.klines_1m.map(k => ({
+                    time: k[0] / 1000, open: parseFloat(k[1]), high: parseFloat(k[2]),
+                    low: parseFloat(k[3]), close: parseFloat(k[4])
+                }));
+                
+                baseCandleData1m.length = 0;
+                for (const kline of mappedKlines) {
+                    baseCandleData1m.push(kline);
+                }
+
+                updateChartForTimeframe();
+            });
+
+            socket.on('trade', (trade) => {
+                const price = parseFloat(trade.p);
+                const tradeTime = Math.floor(trade.T / 1000);
+                const candleTimestamp1m = tradeTime - (tradeTime % 60);
+
+                if (!currentCandle1m || candleTimestamp1m > currentCandle1m.time) {
+                    if (currentCandle1m) baseCandleData1m.push(currentCandle1m);
+                    currentCandle1m = { time: candleTimestamp1m, open: price, high: price, low: price, close: price };
+                } else {
+                    currentCandle1m.high = Math.max(currentCandle1m.high, price);
+                    currentCandle1m.low = Math.min(currentCandle1m.low, price);
+                    currentCandle1m.close = price;
+                }
+
+                const selectedInterval = parseInt(timeframeSelect.value, 10) * 60;
+                const displayedCandleTimestamp = tradeTime - (tradeTime % selectedInterval);
+                const lastDisplayedCandle = displayedCandleData[displayedCandleData.length - 1];
+
+                let candleForUpdate;
+                if (lastDisplayedCandle && displayedCandleTimestamp === lastDisplayedCandle.time) {
+                    candleForUpdate = { ...lastDisplayedCandle };
+                    candleForUpdate.high = Math.max(candleForUpdate.high, price);
+                    candleForUpdate.low = Math.min(candleForUpdate.low, price);
+                    candleForUpdate.close = price;
+                    displayedCandleData[displayedCandleData.length - 1] = candleForUpdate;
+                } else if (!lastDisplayedCandle || displayedCandleTimestamp > lastDisplayedCandle.time) {
+                    candleForUpdate = { time: displayedCandleTimestamp, open: price, high: price, low: price, close: price };
+                    displayedCandleData.push(candleForUpdate);
+                    
+                    // A new candle has started, so update the indicators.
+                    manager.updateIndicatorsOnNewCandle(displayedCandleData);
+                }
+                
+                if (candleForUpdate) candlestickSeries.update(candleForUpdate);
+            });
+            
+            function updateChartForTimeframe() {
+                const selectedIntervalMinutes = parseInt(timeframeSelect.value, 10);
+                if (baseCandleData1m.length === 0) return;
+
+                const newCandleData = aggregateCandles(baseCandleData1m, selectedIntervalMinutes);
+                
+                if (newCandleData.length > 0) {
+                    displayedCandleData = newCandleData;
+                    candlestickSeries.setData(displayedCandleData);
+                    chartTitle.textContent = `{{ symbol }} Chart (${selectedIntervalMinutes}m)`;
+                    manager.recalculateAllAfterHistory(displayedCandleData);
+                    chart.timeScale().fitContent();
+                }
+            }
+
+            timeframeSelect.addEventListener('change', updateChartForTimeframe);
+            
+            setInterval(() => {
+                const selectedIntervalSeconds = parseInt(timeframeSelect.value, 10) * 60;
+                const now = new Date().getTime() / 1000;
+                const secondsRemaining = Math.floor(selectedIntervalSeconds - (now % selectedIntervalSeconds));
+                const minutes = Math.floor(secondsRemaining / 60);
+                const seconds = secondsRemaining % 60;
+                candleTimerDiv.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+            }, 1000);
+
+            window.addEventListener('resize', () => chart.resize(chartElement.clientWidth, 500));
+        });
+    </script>
+</body>
+</html>
