diff --git a/templates/hourly_forecast.html b/templates/hourly_forecast.html
new file mode 100644
index 0000000..dfcf175
--- /dev/null
+++ b/templates/hourly_forecast.html
@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html lang="pl">
+<head>
+    <meta charset="UTF-8">
+    <title>Prognoza godzinowa - {{ city }}</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.min.js"></script>
+    <style>
+        body {
+            font-family: 'Roboto', sans-serif;
+            background-color: #eef2f3;
+            color: #222;
+            padding: 30px;
+            transition: background 0.3s, color 0.3s;
+        }
+        body.dark {
+            background-color: #121212;
+            color: #f0f0f0;
+        }
+        h1 {
+            color: #2a2a72;
+            text-align: center;
+        }
+        .dark h1 {
+            color: #90caf9;
+        }
+        .controls {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        .controls input, .controls button {
+            margin: 0 5px;
+            padding: 5px 10px;
+        }
+        .error {
+            color: red;
+            font-weight: bold;
+            text-align: center;
+        }
+        table {
+            margin: 20px auto;
+            border-collapse: collapse;
+            width: 95%;
+        }
+        th, td {
+            border: 1px solid #aaa;
+            padding: 8px;
+            text-align: center;
+        }
+        th {
+            background-color: #2a6ebb;
+            color: #fff;
+        }
+        .dark table {
+            background-color: #1e1e1e;
+            color: #ddd;
+        }
+        .dark th {
+            background-color: #37474f;
+        }
+        canvas {
+            display: block;
+            margin: 40px auto;
+            max-width: 95%;
+        }
+    </style>
+</head>
+<body>
+    <h1>Prognoza godzinowa dla {{ city }}</h1>
+
+    <div class="controls">
+        <label>Od godziny: <input type="time" id="startHour"></label>
+        <label>Do godziny: <input type="time" id="endHour"></label>
+        <button onclick="filterByHour()">Filtruj</button>
+        <button onclick="toggleDarkMode()">🌜 Przełącz tryb nocny</button>
+    </div>
+
+    {% if error %}
+        <p class="error">{{ error }}</p>
+    {% elif hourly_forecast %}
+        <table id="hourlyTable">
+            <thead>
+                <tr>
+                    <th>Godzina</th><th>Temp. (°C)</th><th>Wiatr (km/h)</th><th>Opady (mm)</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for i in range(hourly_forecast["time"]|length) %}
+                <tr>
+                    <td>{{ hourly_forecast["time"][i] }}</td>
+                    <td>{{ hourly_forecast["temperature_2m"][i] }}</td>
+                    <td>{{ hourly_forecast["windspeed_10m"][i] }}</td>
+                    <td>{{ hourly_forecast["precipitation"][i] }}</td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+
+        <canvas id="hourlyChart" width="800" height="400"></canvas>
+
+        <script>
+            const originalData = {
+                labels: {{ hourly_forecast["time"]|tojson }},
+                temperature: {{ hourly_forecast["temperature_2m"]|tojson }},
+                wind: {{ hourly_forecast["windspeed_10m"]|tojson }},
+                precipitation: {{ hourly_forecast["precipitation"]|tojson }}
+            };
+
+            const ctx = document.getElementById('hourlyChart').getContext('2d');
+            let chart;
+
+            function renderChart(data) {
+                if (chart) chart.destroy();
+                chart = new Chart(ctx, {
+                    type: 'line',
+                    data: {
+                        labels: data.labels,
+                        datasets: [
+                            {
+                                label: 'Temperatura (°C)',
+                                data: data.temperature,
+                                borderColor: 'rgba(255,99,132,1)',
+                                backgroundColor: 'rgba(255,99,132,0.2)',
+                                tension: 0.3,
+                                yAxisID: 'y'
+                            },
+                            {
+                                label: 'Wiatr (km/h)',
+                                data: data.wind,
+                                borderColor: 'rgba(255,159,64,1)',
+                                backgroundColor: 'rgba(255,159,64,0.2)',
+                                tension: 0.3,
+                                yAxisID: 'y'
+                            },
+                            {
+                                label: 'Opady (mm)',
+                                data: data.precipitation,
+                                borderColor: 'rgba(75,192,192,1)',
+                                backgroundColor: 'rgba(75,192,192,0.2)',
+                                fill: true,
+                                yAxisID: 'y1',
+                                tension: 0.3
+                            }
+                        ]
+                    },
+                    options: {
+                        responsive: true,
+                        interaction: {
+                            mode: 'index',
+                            intersect: false
+                        },
+                        plugins: {
+                            legend: { position: 'top' },
+                            title: { display: true, text: 'Prognoza godzinowa' },
+                            zoom: {
+                                pan: {
+                                    enabled: true,
+                                    mode: 'x',
+                                },
+                                zoom: {
+                                    wheel: {
+                                        enabled: true,
+                                    },
+                                    pinch: {
+                                        enabled: true
+                                    },
+                                    mode: 'x'
+                                }
+                            }
+                        },
+                        scales: {
+                            y: {
+                                position: 'left',
+                                title: { display: true, text: 'Temperatura / Wiatr' }
+                            },
+                            y1: {
+                                position: 'right',
+                                title: { display: true, text: 'Opady (mm)' },
+                                grid: { drawOnChartArea: false }
+                            }
+                        }
+                    }
+                });
+            }
+
+            function filterByHour() {
+                const start = document.getElementById('startHour').value;
+                const end = document.getElementById('endHour').value;
+                if (!start || !end) return;
+
+                const filtered = {
+                    labels: [],
+                    temperature: [],
+                    wind: [],
+                    precipitation: []
+                };
+
+                originalData.labels.forEach((time, i) => {
+                    const hour = time.slice(11, 16);
+                    if (hour >= start && hour <= end) {
+                        filtered.labels.push(time);
+                        filtered.temperature.push(originalData.temperature[i]);
+                        filtered.wind.push(originalData.wind[i]);
+                        filtered.precipitation.push(originalData.precipitation[i]);
+                    }
+                });
+
+                renderChart(filtered);
+            }
+
+            function toggleDarkMode() {
+                document.body.classList.toggle('dark');
+                renderChart(chart.data);
+            }
+
+            renderChart(originalData);
+        </script>
+    {% endif %}
+</body>
+</html>
+
