diff --git a/Hafas_Main_web.py b/Hafas_Main_web.py
index 11c3c47..c284060 100644
--- a/Hafas_Main_web.py
+++ b/Hafas_Main_web.py
@@ -1,111 +1,51 @@
-import datetime
-from typing import List
-from flask import Flask, render_template, request, make_response
-import json
-
-# Part 1: Importieren der erforderlichen Module und Erstellen des Hafas-Clients
-from pyhafas import HafasClient
-from pyhafas.profile import DBProfile
-from pyhafas.types.fptf import Leg
+from flask import Flask, render_template, request, make_response, jsonify
+import requests
 
 app = Flask(__name__)
-client = HafasClient(DBProfile())
-
-# Part 2: Suchen Sie nach der Haltestelle basierend auf der Benutzereingabe
-def get_departures(station_name):
-    locations = client.locations(station_name)
-    if locations:
-        best_found_location = locations[0]
-        return best_found_location
-    else:
-        return None
-
-def station_board_leg_to_dict(leg):
-  delay_in_seconds = 0
-  if leg.delay is not None:
-      delay_in_seconds = leg.delay.total_seconds() // 60
-  return {
-    "name": leg.name,
-    "direction": leg.direction,
-    "dateTime": leg.dateTime.strftime("%Y-%m-%d %H:%M:%S"),
-    "delay": delay_in_seconds,
-    "platform": leg.platform,
-  }
-
-
-# Part 3: Rufen Sie Abfahrtsinformationen für die gefundene Haltestelle ab
-def get_departure_info(station_name):
-    best_found_location = get_departures(station_name)
-    if best_found_location:
-        departures: List[Leg] = client.departures(
-            station=best_found_location,
-            date=datetime.datetime.now(),
-            max_trips=15,
-            products={
-                'long_distance_express': True,
-                'regional_express': True,
-                'regional': True,
-                'suburban': True,
-                'bus': True,
-                'ferry': True,
-                'subway': True,
-                'tram': True,
-                'taxi': True
-            }
-        )
-        return departures
-    else:
-        return []
 
 @app.route('/', methods=['GET', 'POST'])
 def index():
+    station_name = request.cookies.get('station_name', '')  # Versuche, den Stationsnamen aus dem Cookie zu lesen
     departures = []
-    station_name = ""
-
-    # Get the station name from the cookie, if it exists
-    if request.cookies.get('station_name'):
-        station_name = request.cookies.get('station_name')
 
     if request.method == 'POST':
-        station_name = request.form['station_name']
-        departures = get_departure_info(station_name)
+        station_name = request.form.get('station_name', '')
+        if station_name:
+            # Speichere den Stationsnamen im Cookie
+            url = f"https://dbf.finalrewind.org/{station_name}.json?version=3"
+            response = requests.get(url)
 
-        # Set the station name cookie
-        response = make_response(render_template('index.html', departures=departures, station_name=station_name))
-        response.set_cookie('station_name', station_name)
-        return response
+            if response.status_code == 200:
+                data = response.json()
+                departures = data.get("departures", [])
+                resp = make_response(render_template('index.html', station_name=station_name, departures=departures))
+                resp.set_cookie('station_name', station_name)
+                return resp
 
-    return render_template('index.html', departures=departures, station_name=station_name)
+    if station_name:  # Überprüfe, ob ein Stationsname aus dem Cookie gelesen wurde
+        url = f"https://dbf.finalrewind.org/{station_name}.json?version=3"
+        response = requests.get(url)
 
-@app.route('/departures', methods=['GET'])
-def departures():
-  """
-  Gibt die aktuellen Abfahrtsinformationen zurück.
+        if response.status_code == 200:
+            data = response.json()
+            departures = data.get("departures", [])
 
-  Returns:
-    JSON-Objekt mit den Abfahrtsinformationen.
-  """
-  station_name=request.cookies.get('station_name')
-  departures = client.departures(
-    station=get_departures(station_name),
-    date=datetime.datetime.now(),
-    max_trips=15,
-    products={
-        'long_distance_express': True,
-        'regional_express': True,
-        'regional': True,
-        'suburban': True,
-        'bus': True,
-        'ferry': True,
-        'subway': True,
-        'tram': True,
-        'taxi': True
-    }
-  )
+    return render_template('index.html', station_name=station_name, departures=departures)
 
-  # Konvertiere die Abfahrtsinformationen in ein JSON-Objekt
-  departures_json = json.dumps([station_board_leg_to_dict(leg) for leg in departures])
-  return departures_json
+@app.route('/update_departures', methods=['GET'])
+def update_departures():
+    station_name = request.cookies.get('station_name', '')
+    departures = []
+
+    if station_name:
+        url = f"https://dbf.finalrewind.org/{station_name}.json?version=3"
+        response = requests.get(url)
+
+        if response.status_code == 200:
+            data = response.json()
+            departures = data.get("departures", [])
+
+    return jsonify({'departures': departures})
 
 if __name__ == '__main__':
-    app.run(host="0.0.0.0", debug=False)
+    app.run(debug=True)
diff --git a/Hafas_Main_web_old.py b/Hafas_Main_web_old.py
new file mode 100644
index 0000000..4594ffe
--- /dev/null
+++ b/Hafas_Main_web_old.py
@@ -0,0 +1,41 @@
+import datetime
+from typing import List
+from flask import Flask, render_template, request, make_response
+import json
+import requests
+
+app = Flask(__name__)
+
+def get_departure_info(station_name):
+    url = f"https://dbf.finalrewind.org/{station_name}.json?version=3"
+    response = requests.get(url)
+    if response.status_code == 200:
+        departures_data = response.json().get("departures", [])
+        departures = [station_board_leg_to_dict(leg) for leg in departures_data]
+        return departures
+    else:
+        return []
+
+def station_board_leg_to_dict(leg):
+    return {
+        "name": leg["train"],
+        "direction": leg["destination"],
+        "dateTime": leg["scheduledDeparture"],
+        "delay": leg["delayDeparture"],
+        "platform": leg["scheduledPlatform"],
+    }
+
+@app.route('/', methods=['GET', 'POST'])
+def index():
+    departures = []
+    station_name = ""
+
+    # Get the station name from the form input
+    if request.method == 'POST':
+        station_name = request.form['station_name']
+        departures = get_departure_info(station_name)
+    
+    return render_template('index.html', departures=departures, station_name=station_name)
+
+if __name__ == '__main__':
+    app.run(host="0.0.0.0", debug=False)
diff --git a/templates/index.html b/templates/index.html
index f656fe5..c154626 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,136 +1,123 @@
+<!DOCTYPE html>
 <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 */
-            }
+<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;
+        }
 
-    
-            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;
-            }
+        /* 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 */
+        }
 
-            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">
+        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>
+        function updateDepartures() {
+            // Hier setzen Sie den Namen Ihrer Flask-Route, die die Abfahrtsdaten zurückgibt.
+            const apiUrl = "/update_departures";
+            fetch(apiUrl)
+                .then(response => response.json())
+                .then(data => {
+                    // Aktualisieren Sie die Tabelle mit den neuen Daten
+                    const tableBody = document.querySelector('table tbody');
+                    tableBody.innerHTML = '';
+
+                    data.departures.forEach(leg => {
+                        const row = document.createElement('tr');
+                        row.innerHTML = `
+                            <td>${leg.train}<br>(${leg.trainNumber})</td>
+                            <td>${leg.destination}</td>
+                            <td>${leg.via.join(', ')}</td>
+                            <td>${leg.scheduledDeparture}</td>
+                            <td>${leg.delayDeparture}</td>
+                            <td>${leg.scheduledPlatform}</td>
+                        `;
+                        tableBody.appendChild(row);
+                    });
+                });
+        }
+
+        // Führen Sie die Aktualisierungsfunktion alle 10 Sekunden aus
+        setInterval(updateDepartures, 10000);
+    </script>
+</head>
+<body class="{{ station_name }}">
     <button id="dark-mode-toggle">🌙</button> <!-- Mond-Emoji als Dark-Mode-Symbol -->
     <h1>Abfahrten / Departures</h1>
     <h2>Station: {{ station_name }}</h2>
@@ -142,12 +129,13 @@
     </form>
 
     {% if departures %}
-    <table class>
+    <table>
         <thead>
             <tr>
                 <th>Name</th>
                 <th>Richtung / Direction</th>
-                <th>Geplante Abfahrtszeit / Planned depature</th>
+                <th>Über/ via</th>
+                <th>Geplante Abfahrtszeit / Planned departure</th>
                 <th>Verspätung (Minuten) / Delay (minutes)</th>
                 <th>Bahnsteig / Platform</th>
             </tr>
@@ -155,11 +143,12 @@
         <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>
+                <td>{{ leg.train }}<br>({{leg.trainNumber}})</td>
+                <td>{{ leg.destination }}</td>
+                <td>{{ leg.via | join(', ') }}</td>
+                <td>{{ leg.scheduledDeparture }}</td>
+                <td>{{ leg.delayDeparture }}</td>
+                <td>{{ leg.scheduledPlatform }}</td>
             </tr>
             {% endfor %}
         </tbody>
@@ -198,4 +187,4 @@
         });
     </script>
 </body>
-</html>
\ No newline at end of file
+</html>