diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..f656fe5
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,201 @@
+<html lang="en">
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Abfahrtsinformationen</title>
+        <style>
+            body {
+                font-family: Arial, sans-serif;
+                background-color: #f0f0f0; /* Hintergrundfarbe im Standardmodus */
+                color: #333; /* Textfarbe im Standardmodus */
+                position: relative;
+            }
+    
+            /* Dark-Mode-Stile */
+            body.dark-mode {
+                background-color: #333; /* Hintergrundfarbe im Dark-Mode */
+                color: #ffff; /* Textfarbe im Dark-Mode */
+            }
+            /* Dark-Mode-Stile für die Tabelle */
+            body.dark-mode table {
+                color: #fff; /* Textfarbe in der Tabelle im Dark-Mode */
+            }
+
+    
+            h1 {
+                text-align: center;
+            }
+            h2 {
+                text-align: center;
+            }
+    
+            form {
+                display: flex;
+                justify-content: center;
+                margin-top: 20px;
+            }
+    
+            label {
+                font-weight: bold;
+                margin-right: 10px;
+            }
+    
+            input[type="text"] {
+                padding: 5px;
+                border: 1px solid #ccc;
+                border-radius: 5px;
+            }
+    
+            button[type="submit"] {
+                background-color: #007bff;
+                color: white;
+                border: none;
+                border-radius: 5px;
+                padding: 5px 10px;
+                cursor: pointer;
+            }
+    
+            table {
+                width: 100%;
+                border-collapse: collapse;
+                margin-top: 20px;
+            }
+
+            table, th, td {
+                border: 1px solid #ccc;
+            }
+    
+            th, td {
+                padding: 10px;
+                text-align: left;
+            }
+    
+            th {
+                background-color: #007bff;
+                color: white;
+            }
+    
+            /* Dark-Mode-Schalter */
+            #dark-mode-toggle {
+                position: absolute;
+                top: 10px;
+                right: 10px;
+                background-color: transparent;
+                border: none;
+                cursor: pointer;
+                font-size: 20px;
+                color: #007bff;
+            }
+        </style>
+        <script>
+    
+    // Definiere die Variable delay_in_seconds  
+    function updateDepartures() {
+      // Hole die aktuellen Abfahrtsinformationen vom Server
+      fetch('/departures')
+        .then(response => response.json())
+        .then(departures => {
+          // Berechne die Verspätung in Minuten für jede Abfahrt
+          departures.forEach(leg => {
+            if (leg.delay) {
+              delay_in_seconds = leg.delay.total_seconds() / 60;
+            } else {
+              delay_in_seconds = 0;
+            }
+          });
+    
+          // Aktualisiere die HTML-Tabelle mit den neuen Daten
+          const tableBody = document.querySelector('table tbody');
+          tableBody.innerHTML = '';
+    
+          departures.forEach(leg => {
+            const row = document.createElement('tr');
+            row.innerHTML = `
+              <td><span class="math-inline">${leg.name}</td\>
+    <td\></span>${leg.direction}</td>
+              <td><span class="math-inline">${leg.dateTime}</td\>
+    <td\></span>${leg.delay}</td>
+              <td>${leg.platform}</td>
+            `;
+    
+            tableBody.appendChild(row);
+          });
+        });
+    }
+    
+    // Starte den Timer, um die Abfahrtsinformationen jede Minute zu aktualisieren
+    setInterval(updateDepartures, 10000); // 60000 Millisekunden = 1 Minute
+    
+        </script>
+    </head>
+<body class="a">
+    <button id="dark-mode-toggle">🌙</button> <!-- Mond-Emoji als Dark-Mode-Symbol -->
+    <h1>Abfahrten / Departures</h1>
+    <h2>Station: {{ station_name }}</h2>
+
+    <form method="POST">
+        <label for="station_name">Station:</label>
+        <input type="text" name="station_name" id="station_name" value="{{ station_name }}">
+        <button type="submit">Suchen</button>
+    </form>
+
+    {% if departures %}
+    <table class>
+        <thead>
+            <tr>
+                <th>Name</th>
+                <th>Richtung / Direction</th>
+                <th>Geplante Abfahrtszeit / Planned depature</th>
+                <th>Verspätung (Minuten) / Delay (minutes)</th>
+                <th>Bahnsteig / Platform</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for leg in departures %}
+            <tr>
+                <td>{{ leg.name }}</td>
+                <td>{{ leg.direction }}</td>
+                <td>{{ leg.dateTime.strftime('%Y-%m-%d %H:%M:%S') }}</td>
+                <td>{% if leg.delay %}{{ leg.delay.total_seconds() / 60 }}{% else %}0{% endif %}</td>
+                <td>{{ leg.platform }}</td>
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+    {% endif %}
+    
+    <script>
+        // JavaScript, um zwischen Dark-Mode und Standardmodus zu wechseln
+        const darkModeToggle = document.getElementById('dark-mode-toggle');
+        const body = document.body;
+
+        darkModeToggle.addEventListener('click', () => {
+            body.classList.toggle('dark-mode');
+        });
+    </script>
+    <script>
+        // JavaScript, um zwischen Dark-Mode und Standardmodus zu wechseln
+        const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
+
+        // Prüfe, ob der Browser im Dark-Mode geöffnet wurde
+        if (prefersDarkMode.matches) {
+        // Füge die CSS-Klasse `dark-mode` zum Body-Element hinzu
+        const body = document.body;
+        body.classList.add('dark-mode');
+        }
+
+        // Registriere den `change`-Ereignishandler
+        prefersDarkMode.addEventListener('change', () => {
+        const body = document.body;
+
+        if (prefersDarkMode.matches) {
+            body.classList.add('dark-mode');
+        } else {
+            body.classList.remove('dark-mode');
+        }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
