diff --git a/components/LineChart.vue b/components/LineChart.vue
new file mode 100644
index 0000000..c42cf48
--- /dev/null
+++ b/components/LineChart.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="relative bg-slate-900 p-4 rounded-lg shadow-lg text-white">
+    <!-- Close button -->
+    <button
+      class="absolute top-2 right-2 text-white text-xl hover:text-red-400"
+      @click="emit('close')"
+    >
+      &times;
+    </button>
+
+    <div v-if="chartReady">
+      <Line :data="data" :options="options" />
+    </div>
+    <div v-else class="text-white text-center py-4">
+      {{ t('chartEmpty') }} <span class="font-semibold">{{ props.lakeName || 'this location' }}</span>.
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ChartOptions } from 'chart.js';
+import {
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Title,
+  Tooltip,
+} from 'chart.js';
+import { computed } from 'vue';
+import { Line } from 'vue-chartjs';
+
+const props = defineProps<{
+  chartData: { date: string, value: number }[]
+  lakeName?: string
+}>();
+const emit = defineEmits<{
+  (e: 'close'): void
+}>();
+const { t } = useI18n();
+ChartJS.register(Title, Tooltip, Legend, LineElement, PointElement, CategoryScale, LinearScale);
+
+const chartReady = computed(() => Array.isArray(props.chartData) && props.chartData.length > 0);
+const chartTitle = computed(() => props.lakeName ? `${t('chartTitle')} ${props.lakeName}` : `No recorded depth for ${props.lakeName}`);
+
+const labels = computed(() =>
+  props.chartData.map(d => d.date.split(' ')[0]),
+);
+
+const values = computed(() =>
+  props.chartData.map(d => Number(d.value)),
+);
+
+const data = computed(() => ({
+  labels: labels.value,
+  datasets: [
+    {
+      label: t('chartLegend'),
+      data: values.value,
+      backgroundColor: '#ffffff',
+      borderWidth: -0.5,
+      pointRadius: 2,
+    },
+  ],
+}));
+
+const options = computed(() => ({
+  responsive: true,
+  plugins: {
+    title: {
+      display: true,
+      text: chartTitle.value,
+      color: '#ffffff',
+      font: {
+        size: 18,
+        weight: 'bold' as const,
+      },
+    },
+  },
+  scales: {
+    y: {
+      title: {
+        display: true,
+        text: t('chartY'),
+        color: '#ffffff',
+      },
+      ticks: {
+        color: '#ffffff',
+      },
+    },
+    x: {
+      title: {
+        display: true,
+        text: t('chartX'),
+        color: '#ffffff',
+      },
+      ticks: {
+        color: '#ffffff',
+      },
+    },
+  },
+} as ChartOptions<'line'>));
+</script>
diff --git a/components/LoadingSpinner.vue b/components/LoadingSpinner.vue
new file mode 100644
index 0000000..b786162
--- /dev/null
+++ b/components/LoadingSpinner.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="flex flex-col items-center justify-center p-4 space-y-2">
+    <svg
+      class="animate-spin h-10 w-10 text-slate-900"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        class="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      />
+      <path
+        class="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8v8z"
+      />
+    </svg>
+    <span class="text-sm text-slate-900 font-medium">{{ t('loadingText') }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n();
+</script>
diff --git a/components/MyLeafletMap.vue b/components/MyLeafletMap.vue
index 8d99fca..bb21bba 100644
--- a/components/MyLeafletMap.vue
+++ b/components/MyLeafletMap.vue
@@ -3,276 +3,224 @@
 </template>
 
 <script setup lang="ts">
-import type { MergedData } from '~/composables/useFetchOpenData';
+import type { FeatureCollection } from 'geojson';
 import L, { Control } from 'leaflet';
 import { onMounted, ref, watch } from 'vue';
 import 'leaflet/dist/leaflet.css';
 import 'leaflet-defaulticon-compatibility';
 import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css';
-// light yellow to dark red
 
 const props = defineProps<{
-  waterBodies: MergedData[]
-  featureDisplay: 'bathing' | 'busStops' | 'lakeData' | null
-  busStops?: GeoJSON.Feature<GeoJSON.Point, unknown>[]
-  lakeData?: GeoJSON.Feature<GeoJSON.Geometry, { WK_NAME: string, lakeDepth: LakeDepth[] }>[]
-  selectedLakeDate?: string
+  fetchedData: FeatureCollection
 }>();
 const emit = defineEmits<{
-  (e: 'marker-click', data: MergedData): void
+  (e: 'marker-click', data: any): void
 }>();
-const markers: L.Layer[] = [];
-const busStopMarkers: L.Layer[] = [];
-const lakeMarkers: L.Layer[] = [];
-let selectedMarker: L.CircleMarker | null = null;
+let selectedMarker: L.Layer | null = null;
 let legendControl: L.Control | null = null;
+const geoJsonLayers: L.GeoJSON[] = [];
 
 const map = ref<HTMLDivElement | null>(null);
 
-const { t } = useI18n();
+// const { t } = useI18n();
 
 let leafletMap: L.Map | null = null;
 
-function getColorForDepth(depth: number | undefined, minDepth: number, maxDepth: number): string {
-  if (depth === undefined) {
-    return 'rgb(150, 150, 150)';
+function findValueByKey(obj: any, key: string): any {
+  if (typeof obj !== 'object' || obj === null) {
+    return undefined;
   }
-  if (minDepth === maxDepth)
-    return 'rgb(255,0,0)'; // fallback if all depths are same
-  const ratio = (depth - minDepth) / (maxDepth - minDepth);
-  const red = Math.floor(255 * ratio);
-  const blue = Math.floor(255 * (1 - ratio));
-  return `rgb(${red},0,${blue})`;
-}
-function getColorByFeature(value: string, feature: string): string {
-  const colorSets: Record<string, Record<string, string>> = {
-    bathing: {
-      'ausgezeichnet (Überprüfung nur bei Änderung der Einstufung)': '#4CAF50',
-      'gut (Überprüfung mindestens alle vier Jahre)': '#2196F3',
-      'ausreichend (Überprüfung mindestens alle 3 J)': '#FFEB3B',
-      'mangelhaft (Überprüfung mindestens alle 2 J)': '#F44336',
-      'changes': '#FF9800',
-      'neu': '#9C27B0',
-      'ohne Bewertung': '#9E9E9E',
-    },
-    traffic: {
-    },
-  };
-  return colorSets[feature]?.[value] || '#999999';
+  if (key in obj) {
+    return obj[key];
+  }
+  for (const value of Object.values(obj)) {
+    const result = findValueByKey(value, key);
+    if (result !== undefined)
+      return result;
+  }
+  return undefined;
 }
 
-function createLegend(values: string[], feature: string) {
+function generateLabels(data: typeof props.fetchedData) {
+  const colorMap = new Map<string, string>();
   const legend = new Control({ position: 'topleft' });
 
-  legend.onAdd = () => {
-    const div = L.DomUtil.create('div', 'info legend');
+  const legendDisplayOption = Array.from(
+    new Set(data.features.map((f: any) => f.properties.options.legend_option || 'default')),
+  );
 
-    values.forEach((val) => {
-      const color = getColorByFeature(val, feature);
-      div.innerHTML += `
-        <i style="background:${color}; width: 12px; height: 12px; display: inline-block; margin-right: 8px;"></i>
-        <span style="color: black;">${val}</span><br>`;
+  const labelKey = data.features[0]?.properties?.options?.label_option;
+  const rawValues = data.features.map((f: any) => findValueByKey(f, labelKey));
+  const uniqueValues = Array.from(new Set(rawValues.map(v => v ?? 'default')));
+
+  if (legendDisplayOption[0] === 'default') {
+    uniqueValues.forEach((value, i) => {
+      colorMap.set(value, generateColor(i, uniqueValues.length));
     });
 
-    return div;
-  };
+    legend.onAdd = function () {
+      const div = L.DomUtil.create('div', 'info legend');
+      div.setAttribute(
+        'style',
+        'background: white; padding: 8px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.2);',
+      );
+
+      uniqueValues.forEach((value) => {
+        const color = colorMap.get(value);
+        div.innerHTML += `
+      <div style="color:black; margin-bottom:4px;">
+        <i style="background:${color}; width:12px; height:12px; display:inline-block; margin-right:4px;"></i> ${value}
+      </div>`;
+      });
+
+      return div;
+    };
+  }
+  else if (legendDisplayOption[0] === 'colorVarient') {
+    const numericValues = uniqueValues
+      .map(v => +v)
+      .filter(v => !Number.isNaN(v));
 
-  return legend;
-}
+    if (numericValues.length === 0)
+      return colorMap;
 
-function renderMarkers(data: typeof props.waterBodies, feature: string) {
-  clearMarkers();
-  data.forEach((item) => {
-    const lat = Number.parseFloat(item.bathing.GEOGR_BREITE);
-    const lng = Number.parseFloat(item.bathing.GEOGR_LAENGE);
-
-    let value = '';
-    switch (feature) {
-      case 'bathing':
-        value = item.classification?.EINSTUFUNG_ODER_VORABBEWERTUNG || 'default';
-        break;
-      case 'traffic':
-        value = item.measurements?.GEWAESSERKATEGORIE || 'default';
-        break;
-      default:
-        value = 'default';
-    }
+    const min = Math.min(...numericValues);
+    const max = Math.max(...numericValues);
 
-    if (!Number.isNaN(lat) && !Number.isNaN(lng)) {
-      const marker = L.circleMarker([lat, lng], {
-        radius: 6,
-        color: getColorByFeature(value, feature),
-        fillColor: getColorByFeature(value, feature),
-        fillOpacity: 0.8,
-        weight: 1,
-      })
-        .addTo(leafletMap as L.Map)
-        .on('click', () => {
-          if (selectedMarker) {
-            selectedMarker.setStyle({
-              radius: 6,
-              weight: 1,
-              color: selectedMarker.options.fillColor ?? '#999999',
-            });
-          }
-          marker.setStyle({
-            radius: 10,
-            weight: 3,
-            color: '#0f172b',
-          });
+    const numBins = 5;
+    const step = (max - min) / numBins;
 
-          selectedMarker = marker;
-          // eslint-disable-next-line vue/custom-event-name-casing
-          emit('marker-click', item); // Emit full data for popup
-        });
+    const bins: [number, number][] = [];
+    for (let i = 0; i < numBins; i++) {
+      const start = min + i * step;
+      const end = i === numBins - 1 ? max : start + step;
+      bins.push([start, end]);
+    }
+
+    bins.forEach(([start, end], i) => {
+      const label = `${start.toFixed(1)} - ${end.toFixed(1)}`;
+      colorMap.set(label, generateColor(i, bins.length));
+    });
 
-      markers.push(marker);
+    function getBinLabel(value: number): string {
+      for (const [start, end] of bins) {
+        if (value >= start && value <= end) {
+          return `${start.toFixed(1)} - ${end.toFixed(1)}`;
+        }
+      }
+      return 'default';
     }
-  });
-}
-function renderBusStopMarkers(data: typeof props.busStops) {
-  if (!data) {
-    return;
+
+    legend.onAdd = function () {
+      const div = L.DomUtil.create('div', 'info legend');
+      div.setAttribute(
+        'style',
+        'background: white; padding: 8px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.2);',
+      );
+
+      bins.forEach(([start, end]) => {
+        const label = `${start.toFixed(1)} - ${end.toFixed(1)}`;
+        const color = colorMap.get(label);
+        div.innerHTML += `
+      <div style="color:black; margin-bottom:4px;">
+        <i style="background:${color}; width:12px; height:12px; display:inline-block; margin-right:4px;"></i> ${label}
+      </div>`;
+      });
+
+      return div;
+    };
+
+    data.features.forEach((f: any) => {
+      const val = +findValueByKey(f, labelKey);
+      const binLabel = getBinLabel(val);
+      f.__binLabel = binLabel;
+    });
   }
-  clearBusStopMarkers();
-
-  // data.forEach((feature) => {
-  //   const [minLng, minLat, maxLng, maxLat] = feature.bbox;
-
-  //   if (!Number.isNaN(minLat) && !Number.isNaN(minLng) && !Number.isNaN(maxLat) && !Number.isNaN(maxLng)) {
-  //     const rect = L.rectangle([[minLat, minLng], [maxLat, maxLng]], {
-  //       color: '#2196F3',
-  //       weight: 10,
-  //       fillOpacity: 0.1,
-  //     })
-  //       .addTo(leafletMap as L.Map);
-  //     busStopMarkers.push(rect);
-  //   }
-  // });
-  data.forEach((feature) => {
-    const [lat, lng] = feature.geometry.coordinates;
-    if (!Number.isNaN(lat) && !Number.isNaN(lng)) {
-      const marker = L.circleMarker([lng, lat], {
-        radius: 2,
-        color: '#2196F3',
-        fillColor: '#2196F3',
-      })
-        .addTo(leafletMap as L.Map);
-      busStopMarkers.push(marker);
-    }
-  });
+  if (leafletMap) {
+    legend.addTo(leafletMap);
+    legendControl = legend;
+  }
+  return colorMap;
+}
+
+function generateColor(index: number, total: number): string {
+  const hue = (index * (360 / total)) % 360;
+  return `hsl(${hue}, 70%, 50%)`;
 }
-function renderLakesMarkers(data: typeof props.lakeData, selectedDate?: string) {
-  if (!data) {
+
+function renderMarkers(data: typeof props.fetchedData) {
+  if (!data)
     return;
-  }
-  clearLakeMarkers();
-  const matchedDepth: number[] = [];
-
-  data.forEach((feature) => {
-    if (feature.properties.lakeDepth.length > 0 && selectedDate) {
-      const date = new Date(selectedDate);
-      const matched = feature.properties.lakeDepth.reduce<LakeDepth | undefined>((nearest, lakeDepth) => {
-        const [datePart] = lakeDepth.Zeit.split(' ');
-        const zeit = new Date(datePart);
-        if (zeit.getTime() <= date.getTime()) {
-          if (!nearest) {
-            return lakeDepth;
-          }
-          const [nearestDatePart] = lakeDepth.Zeit.split(' ');
-          const nearestZeit = new Date(nearestDatePart);
-          if (nearestZeit.getTime() > zeit.getTime()) {
-            return nearest;
-          }
-          return lakeDepth;
-        }
-        return nearest;
-      }, undefined);
-      if (matched) {
-        matchedDepth.push(Number.parseFloat(matched.wasserstand));
-      }
-    }
-  });
-  const minDepth = 0;
-  const maxDepth = Math.max(...matchedDepth, 0);
-
-  data.forEach((feature) => {
-    if (feature.properties.lakeDepth.length > 0 && selectedDate) {
-      const date = new Date(selectedDate);
-      const matched = feature.properties.lakeDepth.reduce<LakeDepth | undefined>((nearest, lakeDepth) => {
-        const [datePart] = lakeDepth.Zeit.split(' ');
-        const zeit = new Date(datePart);
-        if (zeit.getTime() <= date.getTime()) {
-          if (!nearest) {
-            return lakeDepth;
-          }
-          const [nearestDatePart] = lakeDepth.Zeit.split(' ');
-          const nearestZeit = new Date(nearestDatePart);
-          if (nearestZeit.getTime() > zeit.getTime()) {
-            return nearest;
-          }
-          return lakeDepth;
-        }
-        return nearest;
-      }, undefined);
 
-      const depth = matched ? Number.parseFloat(matched.wasserstand) : undefined;
-      const fillColor = getColorForDepth(depth, minDepth, maxDepth);
-      const depthLabel = `${t('waterLevel')}: ${depth !== undefined ? `${depth.toFixed(2)} cm` : t('notAvailable')}`;
+  clearMarkers();
+  clearLegend();
+
+  const colorMap = generateLabels(data);
+  const originalMarkerStyleMap = new Map<L.Layer, any>();
 
-      const geom = feature.geometry;
-      if (geom.type === 'Point' || geom.type === 'LineString' || geom.type === 'MultiPoint' || geom.type === 'GeometryCollection') {
-        return;
-      }
-      const latlngs: L.LatLngExpression[][] = geom.type === 'MultiPolygon'
-        ? geom.coordinates.map(polygon => polygon[0].map(([x, y]) => [y, x]))
-        : [geom.coordinates[0].map(([x, y]) => [y, x])];
+  data.features.forEach((feature: any) => {
+    const legendOption = feature.properties.options.legend_option;
+    const labelOption = feature.properties.options.label_option;
+    let key = feature.properties[labelOption];
+
+    if (legendOption === 'colorVarient') {
+      key = feature.__binLabel;
+    }
 
-      const polygon = L.polygon(latlngs, {
-        color: fillColor,
+    const color = colorMap.get(key) ?? '#999';
+
+    const geoJsonLayer = L.geoJSON(feature, {
+      style: () => ({
+        color,
         weight: 2,
-        fillOpacity: 0.5,
-      }).addTo(leafletMap as L.Map);
+        opacity: 1,
+        fillColor: color,
+        fillOpacity: 0.7,
+      }),
+      pointToLayer: (feature, latlng) => {
+        const style = {
+          radius: 6,
+          color,
+          fillColor: color,
+          fillOpacity: 0.8,
+          weight: 1,
+        };
+
+        const marker = L.circleMarker(latlng, style);
+        originalMarkerStyleMap.set(marker, style);
+        return marker;
+      },
+      onEachFeature: (feature, layer) => {
+        layer.on('click', () => {
+          if (selectedMarker instanceof L.CircleMarker && originalMarkerStyleMap.has(selectedMarker)) {
+            selectedMarker.setStyle(originalMarkerStyleMap.get(selectedMarker));
+          }
+          if (layer instanceof L.CircleMarker) {
+            layer.setStyle({
+              radius: 10,
+              weight: 3,
+              color: '#0f172b',
+              fillColor: '#0f172b',
+              fillOpacity: 1,
+            });
+          }
 
-      polygon.bindTooltip(L.tooltip({ content: `<b>${feature.properties.WK_NAME}</b><br />${depthLabel}` }));
-      lakeMarkers.push(polygon);
-    }
-  });
+          selectedMarker = layer;
+          // eslint-disable-next-line vue/custom-event-name-casing
+          emit('marker-click', feature);
+        });
+      },
+    });
 
-  // --- Gradient Legend ---
-  clearLegend();
-  legendControl = new L.Control({ position: 'topleft' });
-  legendControl.onAdd = () => {
-    const div = L.DomUtil.create('div', 'info legend');
-    div.innerHTML += `
-      <span style="color:black">${t('waterLevelOfLake')}</span>
-      <div style="background: linear-gradient(to right, rgb(0,0,255), rgb(255,0,0)); height: 10px; width: 250px; margin-bottom: 4px;"></div>
-      <div style="display: flex; justify-content: space-between; font-size: 12px;">
-        <span style="color:black">0 cm</span>
-        <span style="color:black">${maxDepth.toFixed(2)} cm</span>
-      </div>
-    `;
-    return div;
-  };
-  legendControl.addTo(leafletMap as L.Map);
+    geoJsonLayer.addTo(leafletMap as L.Map);
+    geoJsonLayers.push(geoJsonLayer);
+  });
 }
 
-function clearBusStopMarkers() {
-  if (leafletMap) {
-    busStopMarkers.forEach(m => leafletMap!.removeLayer(m));
-    busStopMarkers.length = 0;
-  }
-}
-function clearLakeMarkers() {
-  if (leafletMap) {
-    lakeMarkers.forEach(m => leafletMap!.removeLayer(m));
-    lakeMarkers.length = 0;
-  }
-}
 function clearMarkers() {
   if (leafletMap) {
-    markers.forEach(marker => leafletMap!.removeLayer(marker));
-    markers.length = 0;
+    geoJsonLayers.forEach(layer => leafletMap!.removeLayer(layer));
+    geoJsonLayers.length = 0;
   }
 }
 
@@ -293,95 +241,18 @@ onMounted(() => {
     attribution: '&copy; OpenStreetMap contributors',
   }).addTo(leafletMap);
 
-  clearBusStopMarkers();
   clearMarkers();
   clearLegend();
-  if (props.waterBodies.length > 0 && props.featureDisplay) {
-    renderMarkers(props.waterBodies, props.featureDisplay);
-
-    const legendValues = [
-      ...new Set(
-        props.waterBodies.map((item) => {
-          switch (props.featureDisplay) {
-            case 'bathing':
-              return item.classification?.EINSTUFUNG_ODER_VORABBEWERTUNG;
-            default:
-              return undefined;
-          }
-        }).filter((v): v is string => v !== undefined),
-      ),
-    ];
-
-    legendControl = createLegend(legendValues, props.featureDisplay);
-    legendControl.addTo(leafletMap);
-  }
-  if (props.busStops && Array.isArray(props.busStops)) {
-    renderBusStopMarkers(props.busStops);
-  }
-  if (props.lakeData && Array.isArray(props.lakeData)) {
-    renderLakesMarkers(props.lakeData, props.selectedLakeDate);
+  if (!props.fetchedData) {
+    renderMarkers(props.fetchedData);
   }
 });
 
-watch(
-  [() => props.waterBodies, () => props.featureDisplay],
-  ([newData, newFeature]) => {
-    if (leafletMap && Array.isArray(newData) && newData.length > 0 && newFeature) {
-      clearBusStopMarkers();
-      clearMarkers();
-      clearLakeMarkers();
-      renderMarkers(newData, newFeature);
-
-      clearLegend();
-
-      const legendValues = [
-        ...new Set(
-          newData.map((item) => {
-            switch (newFeature) {
-              case 'bathing': return item.classification?.EINSTUFUNG_ODER_VORABBEWERTUNG;
-              default: return undefined;
-            }
-          }).filter((v): v is string => v !== undefined),
-        ),
-      ];
-
-      legendControl = createLegend(legendValues, newFeature);
-      legendControl.addTo(leafletMap);
-    }
-  },
-  { immediate: true },
-);
-watch(() => props.busStops, (newStops) => {
-  if (newStops && Array.isArray(newStops)) {
-    clearLegend();
-    clearMarkers();
-    clearLakeMarkers();
-    renderBusStopMarkers(newStops);
-  }
-  else {
-    clearLegend();
-    clearMarkers();
-    clearLakeMarkers();
-    clearBusStopMarkers();
-  }
-});
-watch(() => props.lakeData, (lakes) => {
-  if (lakes && Array.isArray(lakes)) {
-    clearLegend();
+watch(() => props.fetchedData, (newData) => {
+  if (leafletMap && newData) {
     clearMarkers();
-    clearBusStopMarkers();
-    renderLakesMarkers(lakes, props.selectedLakeDate);
-  }
-  else {
     clearLegend();
-    clearMarkers();
-    clearBusStopMarkers();
-    clearLakeMarkers();
+    renderMarkers(newData);
   }
-});
-watch(() => props.selectedLakeDate, (newDate) => {
-  if (props.lakeData) {
-    renderLakesMarkers(props.lakeData, newDate);
-  }
-});
+}, { immediate: true });
 </script>
diff --git a/components/PopupInfo.vue b/components/PopupInfo.vue
new file mode 100644
index 0000000..ba8e234
--- /dev/null
+++ b/components/PopupInfo.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="absolute bottom-30 left-1/2 transform -translate-x-1/2 bg-white dark:bg-slate-900 text-black dark:text-white p-4 rounded-lg shadow-lg z-[101] w-[90%] max-w-xl">
+    <div class="flex justify-between items-center">
+      <h2 class="text-lg font-bold text-white">
+        {{ selectedItem.properties.BADEGEWAESSERNAME }}
+      </h2>
+      <button class="absolute top-2 right-2 text-white text-xl hover:text-red-400" @click="emit('close')">
+        &times;
+      </button>
+    </div>
+    <ul class="mt-2 space-y-1 text-sm text-white">
+      <li><strong>{{ t('quality') }}:</strong> {{ selectedItem.properties?.EINSTUFUNG_ODER_VORABBEWERTUNG || 'N/A' }}</li>
+      <li><strong>{{ t('category') }}:</strong> {{ selectedItem.properties?.GEWAESSERKATEGORIE || 'N/A' }}</li>
+      <li><strong>{{ t('depth') }}:</strong> {{ selectedItem.properties?.SICHTTIEFE || 'N/A' }} m</li>
+      <li><strong>{{ t('seasonal') }}:</strong> {{ selectedItem.properties?.SAISONBEGINN }} - {{ selectedItem.properties?.SAISONENDE }} {{ selectedItem.properties?.GESCHLOSSEN || 'N/A' }}</li>
+      <li><strong>{{ t('infrastructure') }}:</strong> {{ selectedItem.properties?.INFRASTRUKTUR || 'N/A' }}</li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
+defineProps(['selectedItem']);
+const emit = defineEmits<{
+  (e: 'close'): void
+}>();
+const { t } = useI18n();
+</script>
diff --git a/components/Slider.vue b/components/Slider.vue
new file mode 100644
index 0000000..6e65345
--- /dev/null
+++ b/components/Slider.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="absolute z-[100] bottom-0 left-1/2 transform -translate-x-1/2 w-full px-6 py-4 bg-slate-900 bg-opacity-80">
+    <div class="relative w-full h-2 rounded overflow-hidden">
+      <div
+        v-for="group in dateGroup"
+        :key="group.year"
+        class="absolute h-full"
+        :style="{
+          left: `${group.offset}%`,
+          width: `${group.width}%`,
+          backgroundColor: group.color,
+        }"
+      />
+    </div>
+    <input
+      :value="selectedIndex"
+      type="range"
+      :min="0"
+      :max="dateOptions.length - 1"
+      class="custom-slider w-full relative z-10"
+      @input="$emit('update:selectedIndex', +$event.target.value)"
+    >
+
+    <div class="relative w-full h-5">
+      <span
+        v-for="group in dateGroup"
+        :key="group.year"
+        class="absolute text-sm text-white"
+        :style="{
+          left: `${parseFloat(group.offset) + parseFloat(group.width) / 2}%`,
+          transform: 'translateX(-50%)',
+          fontSize: isSmallScreen ? '0.50rem' : '1rem',
+        }"
+      >
+        {{ group.year }}
+      </span>
+    </div>
+
+    <div class="mt-2 text-center text-white font-semibold">
+      {{ t('selectedDate') }}: {{ selectedDate }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
+defineProps([
+  'dateGroup',
+  'dateOptions',
+  'selectedIndex',
+  'selectedDate',
+  'isSmallScreen',
+]);
+
+defineEmits(['update:selectedIndex']);
+const { t } = useI18n();
+</script>
diff --git a/composables/useFetchOpenData.ts b/composables/useFetchOpenData.ts
deleted file mode 100644
index fac6911..0000000
--- a/composables/useFetchOpenData.ts
+++ /dev/null
@@ -1,440 +0,0 @@
-import proj4 from 'proj4';
-
-proj4.defs('EPSG:25832', '+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs');
-const fromProjection = 'EPSG:25832';
-const toProjection = 'WGS84';
-
-type bathingEntry = Record<string, string>;
-type classificationEntry = Record<string, string>;
-type measurementEntry = Record<string, string>;
-type seasonalEntry = Record<string, string>;
-type infrastructureEntry = Record<string, string>;
-export interface MergedData {
-  bathing: bathingEntry
-  classification: classificationEntry | null
-  measurements: measurementEntry | null
-  seasonal: seasonalEntry | null
-  infrastructure: infrastructureEntry | null
-}
-
-const headerMap = {
-  bathing: [
-    'BADEGEWAESSERID',
-    'BADEGEWAESSERNAME',
-    'KURZNAME',
-    'ALLGEMEIN_GEBRAEUCHL_NAME',
-    'GEWAESSERKATEGORIE',
-    'KUESTENGEWAESSER',
-    'BADEGEWAESSERTYP',
-    'WEITEREBESCHREIBUNG',
-    'BADESTELLENLAENGE',
-    'EUANMELDUNG',
-    'EUABMELDUNG',
-    'FLUSSGEBIETSEINHEITID',
-    'FLUSSGEBIETSEINHEITNAME',
-    'WASSERKOERPERID',
-    'WASSERKOERPERNAME',
-    'NATWASSERKOERPERID',
-    'NATWASSERKOERPERNAME',
-    'SCHLUESSELWOERTER',
-    'KREISNR',
-    'KREIS',
-    'GEMEINDENR',
-    'GEMEINDE',
-    'UTM_OST',
-    'UTM_NORD',
-    'GEOGR_LAENGE',
-    'GEOGR_BREITE',
-    'BADESTELLENINFORMATION',
-    'AUSWIRKUNGEN_AUF_BADEGEWAESSER',
-    'MOEGLICHEBELASTUNGEN',
-  ],
-  classification: [
-    'BADEGEWAESSERID',
-    'BEURTEILUNGSZEITRAUM_VON',
-    'BEURTEILUNGSZEITRAUM_BIS',
-    'EINSTUFUNG_ODER_VORABBEWERTUNG',
-  ],
-  measurement: [
-    'BADEGEWAESSERID',
-    'MESSSTELLENNAME',
-    'MESSSTELLENID',
-    'UEBERWACHUNGSARTID',
-    'UEBERWASCHUNGSARTTEXT',
-    'GEWAESSERKATEGORIE',
-    'KUESTENGEWAESSER',
-    'PROBEID',
-    'DATUMMESSUNG',
-    'PROBENART',
-    'ECOLI',
-    'INTEST_ENTEROKOKKEN',
-    'WASSERTEMP',
-    'LUFTTEMP',
-    'SICHTTIEFE',
-    'BEMERKUNG',
-  ],
-  seasonal: [
-    'BADEGEWAESSERID',
-    'SAISONBEGINN',
-    'SAISONENDE',
-    'GESCHLOSSEN',
-  ],
-  infrastructure: [
-    'BADEGEWAESSERID',
-    'INFRASTRUKTURID',
-    'INFRASTRUKTUR',
-  ],
-};
-
-const dataUrls = {
-  bathing: 'https://opendata.schleswig-holstein.de/api/action/package_show?id=badegewasser-stammdaten-',
-  classification: 'https://opendata.schleswig-holstein.de/api/action/package_show?id=badegewasser-einstufung',
-  measurement: 'https://opendata.schleswig-holstein.de/api/action/package_show?id=badegewasser-messungen',
-  seasonal: 'https://opendata.schleswig-holstein.de/api/action/package_show?id=badegewasser-saisondauer',
-  infrastructure: 'https://opendata.schleswig-holstein.de/api/action/package_show?id=badegewasser-infrastruktur-aktuell',
-  busStops: 'https://opendata.schleswig-holstein.de/api/action/package_show?id=bushaltestelle',
-  lake: 'https://opendata.schleswig-holstein.de/api/action/package_show?id=see-wasserkorper',
-};
-
-const lakeNames = [
-  'hemmelsdorfer',
-  'hemmelmarker',
-  'kellersee',
-  'postsee',
-  'Arenholzer',
-  'Barkauer',
-  'Behlendorfer',
-  'Behler',
-  'Belauer',
-  'Bistensee',
-  'Bordesholmer',
-  'Bornhöveder',
-  'Bottschloter',
-  'Brahmsee',
-  'Dieksee',
-  'Dobersdorfer',
-  'Drüsensee',
-  'Einfelder',
-  'Großensee',
-  'Plöner',
-  'Pönitzer',
-  'Ratzeburger',
-  'Segeberger',
-  'Gudower',
-  'Hohner',
-  'Süderfahrenstedt',
-  'Mözener',
-  'Neustadt',
-  'Neversdorfer',
-  'Passader',
-  'Rantumdammsiel',
-  'Schluensee',
-  'Schöhsee',
-  'Schwansener',
-  'Seedorfer',
-  'Sibbersdorfer',
-  'Stendorfer',
-  'Stocksee',
-  'Stolper',
-  'Südensee',
-  'Süseler',
-  'Suhrer',
-  'Trammer',
-  'Tresdorfer',
-  'Vierer',
-  'Westensee',
-  'Windebyer',
-  'Wittensee',
-  'Meldorf-Kronenloch',
-];
-
-export interface LakeDepth {
-  Zeit: string
-  wasserstand: string
-  wasserstand_status: string
-}
-
-const lakeUrls = [
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-hemmelsdorfer-see-hemmelsdorfer-see1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-hemmelmarker-see',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-kellersee-kellersee1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-postsee-postsee1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-arenholzer-see-arenholzer-see',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-barkauer-see-barkauer-see1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-behlendorfer-see-behlendorfer-see1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-behler-see-behler-see1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-belauer-see-belauer-see1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-bistensee-bistensee1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-bordesholmer-see-bordesholmer-see1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-bornhoveder-see-bornhoveder-see1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-bottschlotter-see',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-brahmsee',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-dieksee-dieksee1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-dobersdorfer-see-dobersdorfer-see1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-drusensee-drusensee1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-einfelder-see-einfelder-see1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-grossensee-grossensee1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-kl-ploner-see-kl-ploner-see1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-kl-ponitzer-see-kl-ponitzer-see',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-ratzeburger-see-ratzeburger-see1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-gr-segeberger-see-segeberger-see1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-gudower-see-gudower-see1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-hohner-see-hohner-see1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-langsee-suderfahrenstedt-langsee1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-mozener-see-mozener-see1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-neustadter-binnenwasser1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-neversdorfer-see-neversdorfer-see1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-passader-see-passader-see1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-rantumdammsiel-rantumbecken1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-schluensee-schluensee1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-schohsee1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-schwansener-see-fp-schopfwerk1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-seedorfer-see',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-sibbersdorfer-see-sibbersdorfer-see',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-stendorfer-see-stendorfer-see1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-stocksee-stocksee1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-stolper-see-stolper-see1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-sudensee-sudensee1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-suseler-see',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-suhrer-see1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-trammer-see1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-tresdorfer-see1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-vierer-see',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-westensee-westensee1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-windebyer-noor1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-wittensee-wittensee1',
-  'https://opendata.schleswig-holstein.de/api/action/package_show?id=wasserstand-pegel-meldorf-kronenloch',
-];
-
-async function getUrl(apiUrl: string, type: string): Promise<string> {
-  const response = await fetch(apiUrl);
-  const data = await response.json();
-  let rawUrl = '';
-  if (data.success) {
-    if (type === 'csv') {
-      rawUrl = data.result.resources.find(
-        (res: any) => res.format === 'CSV' || res.mimetype === 'text/csv',
-      )?.url;
-    }
-    else if (type === 'json') {
-      rawUrl = data.result.resources.find(
-        (res: any) => res.format === 'GeoJSON' || res.mimetype === 'json',
-      )?.url;
-    }
-    else if (type === 'shp') {
-      rawUrl = data.result.resources.find(
-        (res: any) => res.format === 'SHP' || res.mimetype === 'application/zip',
-      )?.url;
-    }
-    else {
-      console.error('unsupported file type');
-    }
-    if (rawUrl) {
-      return rawUrl.replace(/^http:/, 'https:');
-    }
-  }
-  console.error('Failed to get URL:', data.error);
-  throw new Error(`Failed to load Meta Information from ${apiUrl}`);
-}
-async function fetchAndParseCSV<D>(csvUrl: string, headers?: string[]): Promise<D[]> {
-  const proxyUrl = `/api/proxy-csv?url=${encodeURIComponent(csvUrl)}`;
-  const response = await fetch(proxyUrl);
-  const arrayBuffer = await response.arrayBuffer();
-  const decoder = new TextDecoder('iso-8859-1');
-  const csvText = decoder.decode(arrayBuffer);
-
-  const rows = csvText.trim().split('\n');
-  if (headers) {
-    return rows.map<D>((line) => {
-      const values = line.split('|').map(v => v.replace(/^"|"$/g, '').trim());
-      const entry: Record<string, any> = {};
-      headers.forEach((key, i) => {
-        entry[key] = values[i] ?? '';
-      });
-      return entry as D;
-    });
-  }
-  else {
-    const headerLine = rows.shift();
-    if (!headerLine)
-      return [];
-
-    const detectedHeaders = headerLine.split(';').map(v => v.replace(/^"|"$/g, '').trim());
-
-    return rows.map<D>((line) => {
-      const values = line.split(';').map(v => v.replace(/^"|"$/g, '').trim());
-      const entry: Record<string, any> = {};
-      detectedHeaders.forEach((key, i) => {
-        entry[key] = values[i] ?? '';
-      });
-      return entry as D;
-    });
-  }
-}
-async function fetchAndParseGeoJson<G extends GeoJSON.Geometry, P>(geoJsonUrl: string): Promise<GeoJSON.FeatureCollection<G, P>> {
-  const proxyUrl = `/api/proxy-csv?url=${encodeURIComponent(geoJsonUrl)}`;
-  const response = await fetch(proxyUrl).then(res => res.json());
-  if (geoJsonUrl.toLowerCase().endsWith('.zip')) {
-    return response as GeoJSON.FeatureCollection<G, P>;
-  }
-  const reprojectedCoordinatesData = reprojectGeoJSON<G, P>(response);
-  return reprojectedCoordinatesData;
-}
-
-function reprojectGeoJSON<G extends GeoJSON.Geometry, P>(geojson: GeoJSON.FeatureCollection<G, P>): GeoJSON.FeatureCollection<G, P> {
-  return {
-    ...geojson,
-    features: geojson.features.map((feature) => {
-      if (feature.geometry.type !== 'Point') {
-        return feature;
-      }
-      const [x, y] = feature.geometry.coordinates;
-      const [lon, lat] = proj4(fromProjection, toProjection, [x, y]);
-
-      let newBbox = feature.bbox;
-      if (feature.bbox && feature.bbox.length === 4) {
-        const [minX, minY, maxX, maxY] = feature.bbox;
-        const [minLon, minLat] = proj4(fromProjection, toProjection, [minX, minY]);
-        const [maxLon, maxLat] = proj4(fromProjection, toProjection, [maxX, maxY]);
-        newBbox = [minLon, minLat, maxLon, maxLat];
-      }
-
-      return {
-        ...feature,
-        geometry: {
-          ...feature.geometry,
-          coordinates: [lon, lat],
-        },
-        bbox: newBbox,
-      };
-    }),
-  };
-}
-
-export async function fetchBathData(selectedDate: string): Promise<MergedData[]> {
-  try {
-    dataUrls.bathing = `https://opendata.schleswig-holstein.de/api/action/package_show?id=badegewasser-stammdaten-${selectedDate}`;
-    const [bathingCsvUrl, classificationCsvUrl, measurementCsvUrl, seasonalCsvUrl, infrastructureCsvUrl] = await Promise.all([
-      getUrl(dataUrls.bathing, 'csv'),
-      getUrl(dataUrls.classification, 'csv'),
-      getUrl(dataUrls.measurement, 'csv'),
-      getUrl(dataUrls.seasonal, 'csv'),
-      getUrl(dataUrls.infrastructure, 'csv'),
-    ]);
-
-    const [bathingData, classificationData, measurementData, seasonalData, infrastructureData] = await Promise.all([
-      fetchAndParseCSV<bathingEntry>(bathingCsvUrl, headerMap.bathing),
-      fetchAndParseCSV<classificationEntry>(classificationCsvUrl, headerMap.classification),
-      fetchAndParseCSV<measurementEntry>(measurementCsvUrl, headerMap.measurement),
-      fetchAndParseCSV<seasonalEntry>(seasonalCsvUrl, headerMap.seasonal),
-      fetchAndParseCSV<infrastructureEntry>(infrastructureCsvUrl, headerMap.infrastructure),
-    ]);
-
-    const classificationMap = new Map<string, classificationEntry>();
-    classificationData.forEach((row) => {
-      if (row.EINSTUFUNG_ODER_VORABBEWERTUNG === '---') {
-        row.EINSTUFUNG_ODER_VORABBEWERTUNG = 'ohne Bewertung';
-      }
-      classificationMap.set(row.BADEGEWAESSERID, row as classificationEntry);
-    });
-
-    const measurementMap = new Map<string, measurementEntry>();
-    measurementData.forEach((row) => {
-      const id = row.BADEGEWAESSERID;
-      const currentDate = new Date(row.DATUMMESSUNG);
-      if (!measurementMap.has(id)) {
-        measurementMap.set(id, row);
-      }
-      else {
-        const existingEntry = measurementMap.get(id)!;
-        const existingDate = new Date(existingEntry.DATUM);
-        if (currentDate > existingDate) {
-          measurementMap.set(id, row);
-        }
-      }
-    });
-
-    const seasonalMap = new Map<string, seasonalEntry>();
-    seasonalData.forEach(row => seasonalMap.set(row.BADEGEWAESSERID, row as seasonalEntry));
-
-    const infrastructureMap = new Map<string, infrastructureEntry>();
-    infrastructureData.forEach(row => infrastructureMap.set(row.BADEGEWAESSERID, row as infrastructureEntry));
-
-    // Merge data
-    const merged: MergedData[] = bathingData.map((bathingRow) => {
-      const id = bathingRow.BADEGEWAESSERID;
-      return {
-        bathing: bathingRow,
-        classification: classificationMap.get(id) || null,
-        measurements: measurementMap.get(id) || null,
-        seasonal: seasonalMap.get(id) || null,
-        infrastructure: infrastructureMap.get(id) || null,
-      };
-    });
-    return merged;
-  }
-  catch (err) {
-    console.error('Failed to fetch and merge:', err);
-    return [];
-  }
-}
-
-export async function fetchBusStopData(): Promise<GeoJSON.Feature<GeoJSON.Point, unknown>[]> {
-  try {
-    const [busStopGeoJsonUrl] = await Promise.all([
-      getUrl(dataUrls.busStops, 'json'),
-    ]);
-
-    if (!busStopGeoJsonUrl)
-      throw new Error('Missing GEOJson URL');
-
-    const [busStopData] = await Promise.all([
-      fetchAndParseGeoJson<GeoJSON.Point, unknown>(busStopGeoJsonUrl),
-    ]);
-    return busStopData.features;
-  }
-  catch (err) {
-    console.error('Failed to fetch:', err);
-    return [];
-  }
-}
-
-export async function fetchLakesData(): Promise<GeoJSON.Feature<GeoJSON.Geometry, { WK_NAME: string, lakeDepth: LakeDepth[] }>[]> {
-  try {
-    const lakeWaterShpUrl = await getUrl(dataUrls.lake, 'shp');
-    if (!lakeWaterShpUrl)
-      throw new Error('Missing SHP URL');
-
-    const csvUrls = await Promise.all(
-      lakeUrls.map(url => getUrl(url, 'csv')),
-    );
-
-    const lakeData = await fetchAndParseGeoJson<GeoJSON.Geometry, { WK_NAME: string }>(lakeWaterShpUrl);
-
-    const lakeCsvData = await Promise.all(
-      csvUrls.map(url => fetchAndParseCSV<LakeDepth>(url)),
-    );
-
-    // Merge data
-    const merged = lakeData.features.map((feature) => {
-      const wkName = feature.properties.WK_NAME.toLowerCase();
-
-      const matchingIndex = lakeNames.findIndex(lakeName =>
-        wkName.includes(lakeName.toLowerCase()),
-      );
-
-      return {
-        ...feature,
-        properties: {
-          ...feature.properties,
-          lakeDepth: matchingIndex !== -1 ? lakeCsvData[matchingIndex] : [],
-        },
-      };
-    });
-    return merged;
-  }
-  catch (err) {
-    console.error('Failed to fetch and merge:', err);
-    return [];
-  }
-}
diff --git a/composables/useSliderDates.ts b/composables/useSliderDates.ts
new file mode 100644
index 0000000..b6f1660
--- /dev/null
+++ b/composables/useSliderDates.ts
@@ -0,0 +1,33 @@
+const yearColors = ['#3B82F6', '#10B981', '#8B5CF6', '#F59E0B', '#EF4444'];
+
+export function getDatesGroups(fetchedData: any) {
+  const groupedDates = computed(() => {
+    const yearGroups = new Map<string, string[]>();
+    fetchedData.forEach((date: any) => {
+      const year = date.date.slice(0, 4);
+      if (!yearGroups.has(year)) {
+        yearGroups.set(year, []);
+      }
+      yearGroups.get(year)!.push(date.date);
+    });
+    const total = fetchedData.length;
+    let offset = 0;
+    return Array.from(yearGroups.entries()).map(([year, dates], i) => {
+      const width = (dates.length / total) * 100;
+      const group = {
+        year,
+        width: width.toFixed(2),
+        offset: offset.toFixed(2),
+        color: yearColors[i % yearColors.length],
+      };
+      offset += width;
+      return group;
+    });
+  });
+  return groupedDates;
+}
+
+export function getDateOptions(fetchedData: any) {
+  const options = fetchedData.map((o: any) => o.date);
+  return options;
+}
diff --git a/data/bathingWaterInputLayer.json b/data/bathingWaterInputLayer.json
new file mode 100644
index 0000000..9d1bd69
--- /dev/null
+++ b/data/bathingWaterInputLayer.json
@@ -0,0 +1,108 @@
+{
+  "datasets": [
+    {
+      "host": "opendata.schleswig-holstein.de",
+      "id": "badegewasser-stammdaten",
+      "resource_id": "d4534d43-e378-40c8-9466-5bf1bff76794",
+      "title": "Badegewässer Stammdaten",
+      "headers": [
+        "BADEGEWAESSERID",
+        "BADEGEWAESSERNAME",
+        "KURZNAME",
+        "ALLGEMEIN_GEBRAEUCHL_NAME",
+        "GEWAESSERKATEGORIE",
+        "KUESTENGEWAESSER",
+        "BADEGEWAESSERTYP",
+        "WEITEREBESCHREIBUNG",
+        "BADESTELLENLAENGE",
+        "EUANMELDUNG",
+        "EUABMELDUNG",
+        "FLUSSGEBIETSEINHEITID",
+        "FLUSSGEBIETSEINHEITNAME",
+        "WASSERKOERPERID",
+        "WASSERKOERPERNAME",
+        "NATWASSERKOERPERID",
+        "NATWASSERKOERPERNAME",
+        "SCHLUESSELWOERTER",
+        "KREISNR",
+        "KREIS",
+        "GEMEINDENR",
+        "GEMEINDE",
+        "UTM_OST",
+        "UTM_NORD",
+        "GEOGR_LAENGE",
+        "GEOGR_BREITE",
+        "BADESTELLENINFORMATION",
+        "AUSWIRKUNGEN_AUF_BADEGEWAESSER",
+        "MOEGLICHEBELASTUNGEN"
+      ]
+    },
+    {
+      "host": "opendata.schleswig-holstein.de",
+      "id": "badegewasser-einstufung",
+      "resource_id": "bd51a0a3-ffb2-41a3-aa6c-a15df0cb64bd",
+      "title": "Badegewässer Einstufung",
+      "headers": [
+        "BADEGEWAESSERID",
+        "BEURTEILUNGSZEITRAUM_VON",
+        "BEURTEILUNGSZEITRAUM_BIS",
+        "EINSTUFUNG_ODER_VORABBEWERTUNG"
+      ]
+    },
+    {
+      "host": "opendata.schleswig-holstein.de",
+      "id": "badegewasser-messungen",
+      "resource_id": "a5fca440-849b-404d-a39e-fb87c48c692e",
+      "title": "Badegewässer Messungen",
+      "headers": [
+        "BADEGEWAESSERID",
+        "MESSSTELLENNAME",
+        "MESSSTELLENID",
+        "UEBERWACHUNGSARTID",
+        "UEBERWASCHUNGSARTTEXT",
+        "GEWAESSERKATEGORIE",
+        "KUESTENGEWAESSER",
+        "PROBEID",
+        "DATUMMESSUNG",
+        "PROBENART",
+        "ECOLI",
+        "INTEST_ENTEROKOKKEN",
+        "WASSERTEMP",
+        "LUFTTEMP",
+        "SICHTTIEFE",
+        "BEMERKUNG"
+      ]
+    },
+    {
+      "host": "opendata.schleswig-holstein.de",
+      "id": "badegewasser-saisondauer",
+      "resource_id": "a8a8ba9b-541b-4e14-b44c-eb771c61a2cf",
+      "title": "Badegewässer Saisondauer",
+      "headers": [
+        "BADEGEWAESSERID",
+        "SAISONBEGINN",
+        "SAISONENDE",
+        "GESCHLOSSEN"
+      ]
+    },
+    {
+      "host": "opendata.schleswig-holstein.de",
+      "id": "badegewasser-infrastruktur-aktuell",
+      "resource_id": "097e0aa7-c867-4897-a7d5-80332f5dfc76",
+      "title": "Badegewässer Infrastruktur",
+      "headers": [
+        "BADEGEWAESSERID",
+        "INFRASTRUKTURID",
+        "INFRASTRUKTUR"
+      ]
+    }
+  ],
+  "mappings": [
+    { "source_db_id": "badegewasser-stammdaten", "source_db_field": "BADEGEWAESSERID", "condition": "=", "target_db_id": "badegewasser-einstufung", "target_db_field": "BADEGEWAESSERID" },
+    { "source_db_id": "badegewasser-stammdaten", "source_db_field": "BADEGEWAESSERID", "condition": "=", "target_db_id": "badegewasser-messungen", "target_db_field": "BADEGEWAESSERID" },
+    { "source_db_id": "badegewasser-stammdaten", "source_db_field": "BADEGEWAESSERID", "condition": "=", "target_db_id": "badegewasser-saisondauer", "target_db_field": "BADEGEWAESSERID" },
+    { "source_db_id": "badegewasser-stammdaten", "source_db_field": "BADEGEWAESSERID", "condition": "=", "target_db_id": "badegewasser-infrastruktur-aktuell", "target_db_field": "BADEGEWAESSERID" }
+  ],
+  "options":
+    { "label_option": "EINSTUFUNG_ODER_VORABBEWERTUNG", "legend_option": "default" }
+}
diff --git a/data/lakesInputLayer.json b/data/lakesInputLayer.json
new file mode 100644
index 0000000..8d9e3d7
--- /dev/null
+++ b/data/lakesInputLayer.json
@@ -0,0 +1,105 @@
+{
+  "datasets": [
+    { "host": "opendata.schleswig-holstein.de", "id": "see-wasserkorper", "resource_id": "a0f4d2d4-5768-4b03-b92c-875cd349a775", "title": "See-Wasserkörper" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-hemmelsdorfer-see-hemmelsdorfer-see1", "resource_id": "304586f1-c51f-49e0-ba2a-ef449824d6e6", "title": "Wasserstand Pegel Hemmelsdorfer See - Hemmelsdorfer See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-hemmelmarker-see", "resource_id": "3fe50159-6c0a-4c5d-88a3-b43d56be01ee", "title": "Wasserstand Pegel Hemmelmarker See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-kellersee-kellersee1", "resource_id": "a5da2f8b-e192-4957-9821-5d4c4f35ba23", "title": "Wasserstand Pegel Kellersee - Kellersee" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-postsee-postsee1", "resource_id": "c22b636f-2b2c-4621-9f6a-6082e25c392a", "title": "Wasserstand Pegel Postsee - Postsee" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-arenholzer-see-arenholzer-see", "resource_id": "1d984bc3-e9fd-4199-aa99-7c5130d2c2ca", "title": "Wasserstand Pegel Arenholzer See - Arenholzer See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-barkauer-see-barkauer-see1", "resource_id": "77c978b2-63bc-483c-b2f4-af4689dc5258", "title": "Wasserstand Pegel Barkauer See - Barkauer See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-behlendorfer-see-behlendorfer-see1", "resource_id": "0301fa08-ebcf-49aa-80c0-778b6c2e18df", "title": "Wasserstand Pegel Behlendorfer See - Behlendorfer See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-behler-see-behler-see1", "resource_id": "1132ef82-401b-4013-b58d-771625f610ad", "title": "Wasserstand Pegel Behler See - Behler See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-belauer-see-belauer-see1", "resource_id": "a810983e-0530-4cad-83a7-97b252b1358f", "title": "Wasserstand Pegel Belauer See - Belauer See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-bistensee-bistensee1", "resource_id": "f9bfcbe9-8a4b-492b-b2c8-08f30851ace7", "title": "Wasserstand Pegel Bistensee - Bistensee" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-bordesholmer-see-bordesholmer-see1", "resource_id": "1f314490-77b9-4399-b37d-eb3e067aaeaf", "title": "Wasserstand Pegel Bordesholmer See - Bordesholmer See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-bornhoveder-see-bornhoveder-see1", "resource_id": "af33f464-7585-489c-be4d-82f525f644ed", "title": "Wasserstand Pegel Bornhöveder See - Bornhöveder See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-bottschlotter-see", "resource_id": "a1fe3fcc-ca08-467d-b4ce-85d13cb88b07", "title": "Wasserstand Pegel Bottschlotter See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-brahmsee", "resource_id": "758c147d-42d6-42e5-8805-59fc3d86bec2", "title": "Wasserstand Pegel Brahmsee" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-dieksee-dieksee1", "resource_id": "be59631a-aa88-4475-9ed3-50a13a680dd9", "title": "Wasserstand Pegel Dieksee - Dieksee" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-dobersdorfer-see-dobersdorfer-see1", "resource_id": "84d13768-4ad3-4ab2-abca-28033e4f2e28", "title": "Wasserstand Pegel Dobersdorfer See - Dobersdorfer See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-drusensee-drusensee1", "resource_id": "2ac64064-c517-4974-b7d6-c6b7b008ea16", "title": "Wasserstand Pegel Drüsensee - Drüsensee" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-einfelder-see-einfelder-see1", "resource_id": "f4f4f1dd-a404-4076-93bf-8238a9359870", "title": "Wasserstand Pegel Einfelder See - Einfelder See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-grossensee-grossensee1", "resource_id": "edb6ce71-2ed6-4187-b527-4681a29c4561", "title": "Wasserstand Pegel Großensee - Großensee" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-kl-ploner-see-kl-ploner-see1", "resource_id": "6f848e76-84df-4364-ab7c-ea6472bb3ce6", "title": "Wasserstand Pegel Kl.Plöner See - Kl.Plöner See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-kl-ponitzer-see-kl-ponitzer-see", "resource_id": "e317f2e0-075c-4fb0-8a01-4b5142854e3c", "title": "Wasserstand Pegel Kl.Pönitzer See - Kl.Pönitzer See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-ratzeburger-see-ratzeburger-see1", "resource_id": "60d78992-037b-4918-b4d1-0a9f1765f56f", "title": "Wasserstand Pegel Ratzeburger See - Ratzeburger See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-gr-segeberger-see-segeberger-see1", "resource_id": "17126965-8349-4ccc-ae76-86ca59cd7eec", "title": "Wasserstand Pegel Gr.Segeberger See - Segeberger See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-gudower-see-gudower-see1", "resource_id": "ae4a7fe2-deef-4bd0-90be-f8fce0122d4d", "title": "Wasserstand Pegel Gudower See - Gudower See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-hohner-see-hohner-see1", "resource_id": "3e0d38a4-4a9e-4f87-888e-97f11c036d16", "title": "Wasserstand Pegel Hohner See - Hohner See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-langsee-suderfahrenstedt-langsee1", "resource_id": "4910bd0b-8cae-42b1-8545-425e78f156a7", "title": "Wasserstand Pegel Langsee (Süderfahrenstedt) - Langsee" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-mozener-see-mozener-see1", "resource_id": "336803b8-07d2-4804-83e7-a33930ee27a0", "title": "Wasserstand Pegel Mözener See - Mözener See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-neustadter-binnenwasser1", "resource_id": "875a0110-b29e-4083-b4f9-a11f7d5df62e", "title": "Wasserstand Pegel Neustädter Binnenwasser" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-neversdorfer-see-neversdorfer-see1", "resource_id": "3023dd36-de72-4913-82f5-455ce0679a3a", "title": "Wasserstand Pegel Neversdorfer See - Neversdorfer See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-passader-see-passader-see1", "resource_id": "428ecb06-1093-458e-8bfe-017c8eac55ba", "title": "Wasserstand Pegel Passader See - Passader See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-rantumdammsiel-rantumbecken1", "resource_id": "a2760c42-24b9-4a22-adc6-ea442d397775", "title": "Wasserstand Pegel Rantumdammsiel - Rantumbecken" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-schluensee-schluensee1", "resource_id": "d3bfcae6-a844-403f-94f9-49f7a6eb2dc0", "title": "Wasserstand Pegel Schluensee - Schluensee" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-schohsee1", "resource_id": "b2b50d48-f94b-4703-bdfb-923963a67a12", "title": "Wasserstand Pegel Schöhsee" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-schwansener-see-fp-schopfwerk1", "resource_id": "36177bf0-5231-4c8c-b646-38860a516234", "title": "Wasserstand Pegel Schwansener See (FP) Schöpfwerk" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-seedorfer-see", "resource_id": "a20b8e5c-109a-40f4-9146-1080cd0bc97b", "title": "Wasserstand Pegel Seedorfer See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-sibbersdorfer-see-sibbersdorfer-see", "resource_id": "2a9097ee-f564-488c-ba01-e5ca4e65bd24", "title": "Wasserstand Pegel Sibbersdorfer See - Sibbersdorfer See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-stendorfer-see-stendorfer-see1", "resource_id": "14d872ab-35b8-42f4-a392-7695a33eb0e7", "title": "Wasserstand Pegel Stendorfer See - Stendorfer See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-stocksee-stocksee1", "resource_id": "233595ef-9a43-4891-924b-ab259a702be1", "title": "Wasserstand Pegel Stocksee - Stocksee" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-stolper-see-stolper-see1", "resource_id": "42b7ff56-947a-4870-a09f-1d6fcbbd2d27", "title": "Wasserstand Pegel Stolper See - Stolper See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-sudensee-sudensee1", "resource_id": "b08d106a-3bdd-4046-b592-317dc6335b7f", "title": "Wasserstand Pegel Südensee - Südensee" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-suseler-see", "resource_id": "8f4cb123-3773-421e-9c8b-371f3149fbaa", "title": "Wasserstand Pegel Süseler See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-suhrer-see1", "resource_id": "4107018b-c54e-4d25-81df-00fe3e060c30", "title": "Wasserstand Pegel Suhrer See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-trammer-see1", "resource_id": "5d155970-aeb3-4868-9864-5292bb77e24e", "title": "Wasserstand Pegel Trammer See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-tresdorfer-see1", "resource_id": "dc7cec9a-2d55-43af-a752-cae6a4c97edd", "title": "Wasserstand Pegel Tresdorfer See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-vierer-see", "resource_id": "f9a650ca-d81d-4273-a4d8-da58a655d6ec", "title": "Wasserstand Pegel Vierer See" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-westensee-westensee1", "resource_id": "63dedd32-0858-471a-9377-dc9e1fe743ff", "title": "Wasserstand Pegel Westensee - Westensee" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-windebyer-noor1", "resource_id": "c00f6db8-ccfb-4591-b5a5-e9d9f574be3c", "title": "Wasserstand Pegel Windebyer Noor" },
+    { "host": "opendata.schleswig-holstein.de", "id": "wasserstand-pegel-meldorf-kronenloch", "resource_id": "1dc05082-71a6-4408-a944-106683dff2d0", "title": "Wasserstand Pegel Meldorf-Kronenloch" }
+  ],
+  "mappings": [
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-hemmelsdorfer-see-hemmelsdorfer-see1", "target_db_field": "hemmelsdorfer" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-hemmelmarker-see", "target_db_field": "hemmelmarker" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-kellersee-kellersee1", "target_db_field": "kellersee" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-postsee-postsee1", "target_db_field": "postsee" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-arenholzer-see-arenholzer-see", "target_db_field": "Arenholzer" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-barkauer-see-barkauer-see1", "target_db_field": "Barkauer" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-behlendorfer-see-behlendorfer-see1", "target_db_field": "Behlendorfer" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-behler-see-behler-see1", "target_db_field": "Behler" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-belauer-see-belauer-see1", "target_db_field": "Belauer" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-bistensee-bistensee1", "target_db_field": "Bistensee" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-bordesholmer-see-bordesholmer-see1", "target_db_field": "Bordesholmer" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-bornhoveder-see-bornhoveder-see1", "target_db_field": "Bornhöveder" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-bottschlotter-see", "target_db_field": "Bottschloter" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-brahmsee", "target_db_field": "Brahmsee" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-dieksee-dieksee1", "target_db_field": "Dieksee" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-dobersdorfer-see-dobersdorfer-see1", "target_db_field": "Dobersdorfer" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-drusensee-drusensee1", "target_db_field": "Drüsensee" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-einfelder-see-einfelder-see1", "target_db_field": "Einfelder" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-grossensee-grossensee1", "target_db_field": "Großensee" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-kl-ploner-see-kl-ploner-see1", "target_db_field": "Plöner" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-kl-ponitzer-see-kl-ponitzer-see", "target_db_field": "Pönitzer" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-ratzeburger-see-ratzeburger-see1", "target_db_field": "Ratzeburger" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-gr-segeberger-see-segeberger-see1", "target_db_field": "Segeberger" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-gudower-see-gudower-see1", "target_db_field": "Gudower" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-hohner-see-hohner-see1", "target_db_field": "Hohner" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-langsee-suderfahrenstedt-langsee1", "target_db_field": "Süderfahrenstedt" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-mozener-see-mozener-see1", "target_db_field": "Mözener" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-neustadter-binnenwasser1", "target_db_field": "Neustadt" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-neversdorfer-see-neversdorfer-see1", "target_db_field": "Neversdorfer" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-passader-see-passader-see1", "target_db_field": "Passader" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-rantumdammsiel-rantumbecken1", "target_db_field": "Rantumdammsiel" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-schluensee-schluensee1", "target_db_field": "Schluensee" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-schohsee1", "target_db_field": "Schöhsee" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-schwansener-see-fp-schopfwerk1", "target_db_field": "Schwansener" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-seedorfer-see", "target_db_field": "Seedorfer" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-sibbersdorfer-see-sibbersdorfer-see", "target_db_field": "Sibbersdorfer" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-stendorfer-see-stendorfer-see1", "target_db_field": "Stendorfer" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-stocksee-stocksee1", "target_db_field": "Stocksee" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-stolper-see-stolper-see1", "target_db_field": "Stolper" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-sudensee-sudensee1", "target_db_field": "Südensee" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-suseler-see", "target_db_field": "Süseler" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-suhrer-see1", "target_db_field": "Suhrer" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-trammer-see1", "target_db_field": "Trammer" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-tresdorfer-see1", "target_db_field": "Tresdorfer" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-vierer-see", "target_db_field": "Vierer" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-westensee-westensee1", "target_db_field": "Westensee" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-windebyer-noor1", "target_db_field": "Windebyer" },
+    { "source_db_id": "see-wasserkorper", "source_db_field": "WK_NAME", "condition": "=", "target_db_id": "wasserstand-pegel-meldorf-kronenloch", "target_db_field": "Meldorf-Kronenloch" }
+  ],
+  "options":
+    { "label_option": "average_depth", "legend_option": "colorVarient" }
+}
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
index 4d4e8f3..01c0b77 100644
--- a/i18n/locales/de.json
+++ b/i18n/locales/de.json
@@ -12,5 +12,11 @@
   "selectedDate": "Gewähltes Datum",
   "waterLevelOfLake": "Wasserpegel des Sees",
   "waterLevel": "Wasserpegel",
-  "notAvailable": "Nicht verfügbar"
+  "notAvailable": "Nicht verfügbar",
+  "loadingText": "Laden der Daten, bitte warten...",
+  "chartX": "Datum",
+  "chartY": "Tiefe (m)",
+  "chartTitle": "Tiefe für",
+  "chartLegend": "Tiefe im Zeitverlauf",
+  "chartEmpty": "Es sind keine Tiefenangaben verfügbar für"
 }
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 27a6c23..d9bfb8e 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -12,5 +12,11 @@
   "selectedDate": "Selected Date",
   "waterLevelOfLake": "Water level of lake",
   "waterLevel": "Water level",
-  "notAvailable": "Not Available"
+  "notAvailable": "Not Available",
+  "loadingText": "Loading data, please wait...",
+  "chartX": "Date",
+  "chartY": "Depth (m)",
+  "chartTitle": "Depth for",
+  "chartLegend": "Depth Over Time",
+  "chartEmpty": "No recorded depths are available for"
 }
diff --git a/package.json b/package.json
index e60a32c..db87782 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@heroicons/vue": "^2.2.0",
     "@nuxt/ui": "3.1.0",
     "@nuxtjs/i18n": "9.5.4",
+    "chart.js": "^4.4.9",
     "chroma-js": "^3.1.2",
     "leaflet": "^1.9.4",
     "leaflet-defaulticon-compatibility": "^0.1.2",
@@ -27,12 +28,14 @@
     "proj4": "^2.15.0",
     "shpjs": "^6.1.0",
     "tailwindcss": "4.1.5",
+    "vue-chartjs": "^5.3.2",
     "zod": "^3.24.4"
   },
   "devDependencies": {
     "@antfu/eslint-config": "4.12.0",
     "@cspell/dict-de-de": "4.1.0",
     "@types/chroma-js": "^3.1.1",
+    "@types/geojson": "^7946.0.16",
     "@types/leaflet": "^1.9.17",
     "@types/proj4": "^2.5.6",
     "@types/shpjs": "^3.4.7",
diff --git a/pages/index.vue b/pages/index.vue
index 49732f1..7cb0065 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -52,13 +52,6 @@
           >
             {{ t('bathing') }}
           </li>
-          <li
-            class="cursor-pointer hover:text-blue-200"
-            :class="{ 'font-bold underline': feature === 'busStops' }"
-            @click="setFeature('busStops')"
-          >
-            {{ t('busStops') }}
-          </li>
           <li
             class="cursor-pointer hover:text-blue-200"
             :class="{ 'font-bold underline': feature === 'lakeData' }"
@@ -70,76 +63,33 @@
       </aside>
 
       <main class="flex-1 relative">
-        <MyLeafletMap :water-bodies="bathingWaterData" :bus-stops="busStopsData" :lake-data="lakeData" :feature-display="feature" :selected-lake-date="selectedLakeDate" @marker-click="selectedItem = $event" />
-        <div v-if="feature === 'bathing'" class="absolute z-[100] bottom-0 left-1/2 transform -translate-x-1/2 w-full px-6 py-4 bg-white dark:bg-slate-900 bg-opacity-80 dark:bg-opacity-80">
-          <div class="relative w-full h-2 rounded overflow-hidden">
-            <div
-              v-for="(group) in groupedDates"
-              :key="group.year"
-              class="absolute h-full"
-              :style="{
-                left: `${group.offset}%`,
-                width: `${group.width}%`,
-                backgroundColor: group.color,
-              }"
-            />
-          </div>
-          <input
-            v-model="selectedIndex"
-            type="range"
-            :min="0"
-            :max="dateOptions.length - 1"
-            class="custom-slider w-full relative z-10"
-          >
-          <div class="relative w-full h-5">
-            <span
-              v-for="group in groupedDates"
-              :key="group.year"
-              class="absolute text-sm text-white"
-              :style="{
-                left: `${parseFloat(group.offset) + parseFloat(group.width) / 2}%`,
-                transform: 'translateX(-50%)',
-                fontSize: isSmallScreen ? '0.50rem' : '1rem',
-              }"
-            >
-              {{ group.year }}
-            </span>
-          </div>
-          <div class="mt-2 text-center text-black dark:text-white font-semibold">
-            {{ t('selectedDate') }}: {{ selectedDate }}
-          </div>
-        </div>
-        <div v-if="feature === 'lakeData'" class="absolute z-[100] bottom-0 left-1/2 transform -translate-x-1/2 w-full px-6 py-4 bg-white dark:bg-slate-900 bg-opacity-80 dark:bg-opacity-80">
-          <input
-            v-model="selectedLakeDateIndex"
-            type="range"
-            :min="0"
-            :max="lakeDateOptions.length - 1"
-            class="w-full relative z-10"
-          >
-          <div class="mt-2 text-center text-black dark:text-white font-semibold">
-            {{ t('selectedDate') }}: {{ selectedLakeDate }}
-          </div>
+        <div
+          v-if="loading"
+          class="absolute inset-0 z-[9999] flex items-center justify-center bg-white/50 backdrop-blur-sm cursor-not-allowed"
+        >
+          <LoadingSpinner />
         </div>
+
+        <MyLeafletMap :fetched-data="fetchedData" @marker-click="selectedItem = $event" />
+        <Slider
+          v-if="feature === 'bathing' && dateOptions"
+          :date-group="dateGroup"
+          :date-options="dateOptions"
+          :selected-index="selectedIndex"
+          :selected-date="selectedDate"
+          :is-small-screen="isSmallScreen"
+          @update:selected-index="selectedIndex = $event"
+        />
+        <PopupInfo
+          v-if="selectedItem && feature === 'bathing'"
+          :selected-item="selectedItem"
+          @close="selectedItem = null"
+        />
         <div
-          v-if="selectedItem"
-          class="absolute bottom-30 left-1/2 transform -translate-x-1/2 bg-white dark:bg-slate-900 text-black dark:text-white p-4 rounded-lg shadow-lg z-[101] w-[90%] max-w-xl"
+          v-if="selectedItem && feature === 'lakeData'"
+          class="absolute bottom-40 left-1/2 transform -translate-x-1/2 bg-slate-900 text-black p-4 rounded-lg shadow-lg z-[101] w-[90%] max-w-2xl"
         >
-          <div class="flex justify-between items-center">
-            <h2 class="text-lg font-bold text-black dark:text-white">
-              {{ selectedItem.bathing.BADEGEWAESSERNAME }}
-            </h2>
-            <button class="text-black dark:text-white text-xl" @click="selectedItem = null">
-              &times;
-            </button>
-          </div>
-          <ul class="mt-2 space-y-1 text-sm text-black dark:text-white">
-            <li><strong>{{ t('quality') }}:</strong> {{ selectedItem.classification?.EINSTUFUNG_ODER_VORABBEWERTUNG || 'N/A' }}</li>
-            <li><strong>{{ t('category') }}:</strong> {{ selectedItem.measurements?.GEWAESSERKATEGORIE || 'N/A' }}</li>
-            <li><strong>{{ t('depth') }}:</strong> {{ selectedItem.measurements?.SICHTTIEFE || 'N/A' }}</li>
-            <li><strong>{{ t('seasonal') }}:</strong> {{ selectedItem.seasonal?.SAISONBEGINN }} - {{ selectedItem.seasonal?.SAISONENDE }} {{ selectedItem.seasonal?.GESCHLOSSEN || 'N/A' }} </li>
-            <li><strong>{{ t('infrastructure') }}:</strong> {{ selectedItem.infrastructure?.INFRASTRUKTUR || 'N/A' }}</li>
-          </ul>
+          <LineChart v-if="selectedItem" :chart-data="chartData" :lake-name="lakeName" class="mt-4" @close="selectedItem = null" />
         </div>
       </main>
     </div>
@@ -148,13 +98,22 @@
 
 <script setup lang="ts">
 import type { SelectItem } from '@nuxt/ui';
-import type { LakeDepth, MergedData } from '~/composables/useFetchOpenData';
+import LoadingSpinner from '@/components/LoadingSpinner.vue';
 import { computed, ref, watch } from 'vue';
+import LineChart from '~/components/LineChart.vue';
 import MyLeafletMap from '~/components/MyLeafletMap.vue';
-import { fetchBathData, fetchBusStopData, fetchLakesData } from '~/composables/useFetchOpenData';
-// import layout from '/layout.json';
+import PopupInfo from '~/components/PopupInfo.vue';
+import Slider from '~/components/Slider.vue';
+import { getDateOptions, getDatesGroups } from '~/composables/useSliderDates';
 
 const { t, locale, setLocale } = useI18n();
+const isSmallScreen = computed(() => {
+  return window.innerWidth < 768;
+});
+const sidebarOpen = ref(false);
+const fetchedData = ref();
+const seriesData = ref([]);
+type FeatureType = 'bathing' | 'lakeData';
 const colorMode = useColorMode();
 
 const isDark = computed({
@@ -169,165 +128,66 @@ const isDark = computed({
 const localeItems = ref([{ value: 'en', icon: 'i-emojione-v1-flag-for-united-kingdom' }, { value: 'de', icon: 'i-emojione-v1-flag-for-germany' }] satisfies SelectItem[]);
 const selectedLocaleIcon = computed(() => localeItems.value.find(item => item.value === locale.value)?.icon);
 
-const isSmallScreen = computed(() => {
-  return window.innerWidth < 768;
-});
-const sidebarOpen = ref(true);
-const bathingWaterData = ref<MergedData[]>([]);
-const busStopsData = ref<GeoJSON.Feature<GeoJSON.Point, unknown>[]>();
-const lakeData = ref<GeoJSON.Feature<GeoJSON.Geometry, { WK_NAME: string, lakeDepth: LakeDepth[] }>[]>();
-type FeatureType = 'bathing' | 'busStops' | 'lakeData';
 const feature = ref<FeatureType | null>(null);
-const dateOptions = [
-  '2021-02-10',
-  '2021-03-01',
-  '2021-04-24',
-  '2021-05-01',
-  '2021-05-05',
-  '2021-05-07',
-  '2021-05-18',
-  '2021-06-16',
-  '2021-07-01',
-  '2021-07-03',
-  '2021-07-17',
-  '2021-08-06',
-  '2021-08-14',
-  '2022-04-01',
-  '2022-05-01',
-  '2022-06-01',
-  '2022-07-01',
-  '2022-08-01',
-  '2022-09-01',
-  '2022-12-01',
-  '2023-03-01',
-  '2023-06-01',
-  '2023-07-01',
-  '2023-08-01',
-  '2023-10-01',
-  '2023-11-01',
-  '2024-05-01',
-  '2024-06-01',
-  '2024-11-01',
-  '2025-04-01',
-];
-
 const selectedIndex = ref(0);
-const selectedDate = ref(dateOptions[selectedIndex.value]);
-const selectedItem = ref<MergedData | null>(null);
-let globalMinDate: Date | null = null;
-let globalMaxDate: Date | null = null;
-const selectedLakeDateIndex = ref(0);
-const selectedLakeDate = ref('');
-const lakeDateOptions = ref<Date[]>([]);
-
-const yearColors = ['#3B82F6', '#10B981', '#8B5CF6', '#F59E0B', '#EF4444'];
-
-const groupedDates = computed(() => {
-  const yearGroups = new Map<string, string[]>();
-
-  dateOptions.forEach((date) => {
-    const year = date.slice(0, 4);
-    if (!yearGroups.has(year)) {
-      yearGroups.set(year, []);
-    }
-    yearGroups.get(year)!.push(date);
-  });
-
-  const total = dateOptions.length;
-  let offset = 0;
-
-  return Array.from(yearGroups.entries()).map(([year, dates], i) => {
-    const width = (dates.length / total) * 100;
-    const group = {
-      year,
-      width: width.toFixed(2),
-      offset: offset.toFixed(2),
-      color: yearColors[i % yearColors.length],
-    };
-    offset += width;
-    return group;
-  });
+const selectedItem = ref<any | null>(null);
+const selectedDate = ref();
+let dateOptions: any[];
+let dateGroup: any;
+let lakeName: string;
+const loading = ref(false);
+
+const chartData = computed(() => {
+  if (!selectedItem.value?.lakeDepth[0]) {
+    lakeName = selectedItem.value.properties.WK_NAME;
+    return [];
+  }
+  lakeName = selectedItem.value.properties.WK_NAME;
+  return selectedItem.value.lakeDepth[0].map((entry: any) => ({
+    date: entry.Zeit,
+    value: entry.wasserstand,
+  }));
 });
 
 function setFeature(f: FeatureType) {
   feature.value = f;
 }
 
-function setLakeDepth() {
-  if (!lakeData.value) {
-    return;
-  }
-  lakeData.value.forEach((feature) => {
-    if (Array.isArray(feature.properties.lakeDepth) && feature.properties.lakeDepth.length > 0) {
-      const dates = feature.properties.lakeDepth
-        .map((entry) => {
-          const [datePart] = entry.Zeit.split(' ');
-          const parsedDate = new Date(datePart);
-          return parsedDate.getTime();
-        });
-      if (dates.length > 0) {
-        const minDate = new Date(Math.min(...dates));
-        const maxDate = new Date(Math.max(...dates));
-        if (!globalMinDate || minDate < globalMinDate)
-          globalMinDate = minDate;
-        if (!globalMaxDate || maxDate > globalMaxDate)
-          globalMaxDate = maxDate;
-      }
-    }
-  });
-  // globalMinDate.setFullYear(globalMinDate.getFullYear() + 1);
-  // globalMinDate.setDate(globalMinDate.getDate() + 1);
-  // globalMaxDate.setDate(globalMaxDate.getDate() + 1);
-  // console.log(globalMinDate,globalMaxDate)
-  if (globalMinDate && globalMaxDate) {
-    const dates = [];
-    const min = new Date(
-      globalMinDate.getFullYear(),
-      globalMinDate.getMonth(),
-      globalMinDate.getDate(),
-    );
-
-    const max = new Date(
-      globalMaxDate.getFullYear(),
-      globalMaxDate.getMonth(),
-      globalMaxDate.getDate(),
-    );
-    const current = new Date(min);
-    // eslint-disable-next-line no-unmodified-loop-condition
-    while (current <= max) {
-      dates.push(new Date(current.getFullYear(), current.getMonth(), current.getDate()));
-      current.setDate(current.getDate() + 1);
-    }
-    lakeDateOptions.value = dates;
-    selectedLakeDateIndex.value = dates.length - 1;
-  }
-  else {
-    lakeDateOptions.value = [];
-    selectedLakeDateIndex.value = 0;
-  }
-  selectedLakeDate.value = lakeDateOptions.value[selectedLakeDateIndex.value]?.toLocaleDateString('en-CA') || '';
-}
 watch(selectedIndex, async (newIndex) => {
   selectedItem.value = null;
   selectedDate.value = dateOptions[newIndex];
-  bathingWaterData.value = await fetchBathData(selectedDate.value);
-});
-watch(selectedLakeDateIndex, async (newIndex) => {
-  selectedLakeDate.value = lakeDateOptions.value[newIndex]?.toISOString().split('T')[0] || '';
+  fetchedData.value = seriesData.value[newIndex];
 });
+
 watch(feature, async () => {
-  if (feature.value === 'bathing') {
-    selectedIndex.value = dateOptions.length - 1;
-    bathingWaterData.value = await fetchBathData(selectedDate.value);
-  }
-  else if (feature.value === 'busStops') {
-    busStopsData.value = await fetchBusStopData();
-  }
-  else if (feature.value === 'lakeData') {
-    lakeData.value = await fetchLakesData();
-    setLakeDepth();
+  loading.value = true;
+  if (feature.value) {
+    const { execute, data: response, status } = useLazyFetch(
+      `/api/fetchOpenData?feature=${encodeURIComponent(feature.value)}`,
+      { immediate: false },
+    );
+
+    await execute();
+
+    if (status.value !== 'pending') {
+      if (feature.value === 'bathing') {
+        fetchedData.value = [];
+        seriesData.value = [];
+        seriesData.value = response.value;
+        dateOptions = getDateOptions(seriesData.value);
+        dateGroup = getDatesGroups(seriesData.value);
+        selectedIndex.value = dateOptions.length - 1;
+        selectedDate.value = dateOptions[selectedIndex.value];
+      }
+      else if (feature.value === 'lakeData') {
+        fetchedData.value = [];
+        fetchedData.value = response.value;
+      }
+    }
   }
+  loading.value = false;
 });
+
 watch(locale, (newLocale) => {
   setLocale(newLocale);
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0a521cd..4bdbffb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       '@nuxtjs/i18n':
         specifier: 9.5.4
         version: 9.5.4(@vue/compiler-dom@3.5.13)(eslint@9.25.1(jiti@2.4.2))(magicast@0.3.5)(rollup@4.40.1)(vue@3.5.13(typescript@5.7.2))
+      chart.js:
+        specifier: ^4.4.9
+        version: 4.4.9
       chroma-js:
         specifier: ^3.1.2
         version: 3.1.2
@@ -38,6 +41,9 @@ importers:
       tailwindcss:
         specifier: 4.1.5
         version: 4.1.5
+      vue-chartjs:
+        specifier: ^5.3.2
+        version: 5.3.2(chart.js@4.4.9)(vue@3.5.13(typescript@5.7.2))
       zod:
         specifier: ^3.24.4
         version: 3.24.4
@@ -51,6 +57,9 @@ importers:
       '@types/chroma-js':
         specifier: ^3.1.1
         version: 3.1.1
+      '@types/geojson':
+        specifier: ^7946.0.16
+        version: 7946.0.16
       '@types/leaflet':
         specifier: ^1.9.17
         version: 1.9.17
@@ -1058,6 +1067,9 @@ packages:
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
+  '@kurkle/color@0.3.4':
+    resolution: {integrity: sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==}
+
   '@kwsites/file-exists@1.1.1':
     resolution: {integrity: sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==}
 
@@ -2581,6 +2593,10 @@ packages:
   character-entities@2.0.2:
     resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
 
+  chart.js@4.4.9:
+    resolution: {integrity: sha512-EyZ9wWKgpAU0fLJ43YAEIF8sr5F2W3LqbS40ZJyHIner2lY14ufqv2VMp69MAiZ2rpwxEUxEhIH/0U3xyRynxg==}
+    engines: {pnpm: '>=8'}
+
   chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
@@ -5869,6 +5885,12 @@ packages:
   vue-bundle-renderer@2.1.1:
     resolution: {integrity: sha512-+qALLI5cQncuetYOXp4yScwYvqh8c6SMXee3B+M7oTZxOgtESP0l4j/fXdEJoZ+EdMxkGWIj+aSEyjXkOdmd7g==}
 
+  vue-chartjs@5.3.2:
+    resolution: {integrity: sha512-NrkbRRoYshbXbWqJkTN6InoDVwVb90C0R7eAVgMWcB9dPikbruaOoTFjFYHE/+tNPdIe6qdLCDjfjPHQ0fw4jw==}
+    peerDependencies:
+      chart.js: ^4.1.1
+      vue: ^3.0.0-0 || ^2.7.0
+
   vue-demi@0.14.10:
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
     engines: {node: '>=12'}
@@ -6994,6 +7016,8 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  '@kurkle/color@0.3.4': {}
+
   '@kwsites/file-exists@1.1.1':
     dependencies:
       debug: 4.4.0
@@ -8805,6 +8829,10 @@ snapshots:
 
   character-entities@2.0.2: {}
 
+  chart.js@4.4.9:
+    dependencies:
+      '@kurkle/color': 0.3.4
+
   chokidar@3.6.0:
     dependencies:
       anymatch: 3.1.3
@@ -12631,6 +12659,11 @@ snapshots:
     dependencies:
       ufo: 1.6.1
 
+  vue-chartjs@5.3.2(chart.js@4.4.9)(vue@3.5.13(typescript@5.7.2)):
+    dependencies:
+      chart.js: 4.4.9
+      vue: 3.5.13(typescript@5.7.2)
+
   vue-demi@0.14.10(vue@3.5.13(typescript@5.7.2)):
     dependencies:
       vue: 3.5.13(typescript@5.7.2)
diff --git a/server/api/fetchOpenData/index.get.ts b/server/api/fetchOpenData/index.get.ts
new file mode 100644
index 0000000..647ef65
--- /dev/null
+++ b/server/api/fetchOpenData/index.get.ts
@@ -0,0 +1,12 @@
+import { getData } from '~/server/prepareInput';
+
+export default defineEventHandler(async (event) => {
+  const feature = getQuery(event).feature as string;
+  if (!feature) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Missing feature',
+    });
+  }
+  return await getData(feature);
+});
diff --git a/server/api/proxy-csv.ts b/server/api/proxy-csv.ts
deleted file mode 100644
index 3291456..0000000
--- a/server/api/proxy-csv.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { createError, getQuery } from 'h3';
-import shp from 'shpjs';
-
-const ALLOWED_HOSTS = [
-  'opendata.schleswig-holstein.de',
-  'efi2.schleswig-holstein.de',
-  'geoservice.norderstedt.de',
-  'hsi-sh.de',
-];
-
-export default defineEventHandler(async (event) => {
-  const url = getQuery(event).url as string;
-  if (!url) {
-    throw createError({
-      statusCode: 400,
-      statusMessage: 'Missing URL parameter',
-    });
-  }
-
-  if (!ALLOWED_HOSTS.includes(new URL(url).host)) {
-    throw createError({
-      statusCode: 403,
-      statusMessage: 'Access to this URL is not allowed',
-    });
-  }
-
-  const response = await fetch(url);
-  if (!response.ok) {
-    throw createError({
-      statusCode: response.status,
-      statusMessage: `Failed to fetch resource: ${response.statusText}`,
-    });
-  }
-
-  const lowerUrl = url.toLowerCase();
-
-  if (lowerUrl.endsWith('json')) {
-    return await response.json();
-  }
-
-  if (lowerUrl.endsWith('.csv') || response.headers.get('content-type')?.includes('text/csv')) {
-    const buffer = await response.arrayBuffer();
-
-    return new Uint8Array(buffer);
-  }
-
-  if (lowerUrl.endsWith('.zip')) {
-    const zipBuffer = await response.arrayBuffer();
-    try {
-      const geojson = await shp(zipBuffer);
-      return geojson;
-    }
-    catch (err) {
-      throw createError({
-        statusCode: 422,
-        statusMessage: `Failed to convert shapefile to GeoJSON.${err}`,
-      });
-    }
-  }
-
-  throw createError({
-    statusCode: 415,
-    statusMessage: 'Unsupported file format. Only JSON, CSV, and ZIP (SHP) are supported.',
-  });
-});
diff --git a/server/fetchData.ts b/server/fetchData.ts
new file mode 100644
index 0000000..cd226cb
--- /dev/null
+++ b/server/fetchData.ts
@@ -0,0 +1,295 @@
+import type { InputJSON } from '~/server/prepareInput';
+import proj4 from 'proj4';
+import { fetchCsvFromUrl } from '~/server/utils/fetch-csv';
+import { fetchJsonFromUrl } from '~/server/utils/fetch-json';
+import { fetchZipFromUrl } from '~/server/utils/fetch-zip';
+
+proj4.defs('EPSG:25832', '+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs');
+const fromProjection = 'EPSG:25832';
+const toProjection = 'WGS84';
+
+const ALLOWED_HOSTS = [
+  'opendata.schleswig-holstein.de',
+  'efi2.schleswig-holstein.de',
+  'geoservice.norderstedt.de',
+  'hsi-sh.de',
+];
+
+export async function fetchSeriesData(s: any, dataset: any) {
+  try {
+    const url = `https://${dataset.host}/api/action/package_show?id=${s.__extras.subject_package_id}`;
+    const response = await fetch(url);
+    const res = await response.json();
+    if (res.success) {
+      const resource = res.result.resources.find(
+        (res: any) => res.format === 'CSV' || res.mimetype === 'text/csv',
+      )?.url;
+      if (resource) {
+        const publishedDate = res.result.extras.find((m: any) => m.key === 'issued')?.value || '';
+        return { id: dataset.id, date: publishedDate, data: await fetchAndParseCsv(resource, dataset?.headers) };
+      }
+    }
+  }
+  catch (error) {
+    console.error(`Error fetching`, error);
+    throw error;
+  }
+}
+
+export async function fetchData(datasets: InputJSON) {
+  try {
+    const data = await Promise.all(
+      datasets.datasets.map(async (dataset: any) => {
+        if (!ALLOWED_HOSTS.includes(dataset.host)) {
+          throw createError({
+            statusCode: 403,
+            statusMessage: 'Access to this URL is not allowed',
+          });
+        }
+
+        const url = `https://${dataset.host}/api/action/package_show?id=${dataset.id}`;
+        const response = await fetch(url);
+        const res = await response.json();
+
+        if (res.result.relationships_as_object.length > 0) {
+          const series = await Promise.all(
+            res.result.relationships_as_object.map((s: any) => fetchSeriesData(s, dataset)),
+          );
+          return series;
+        }
+        if (res.success) {
+          const resource = res.result.resources.find(
+            (r: any) => r.id === dataset.resource_id,
+          );
+
+          if (resource) {
+            if (resource.url) {
+              resource.url = resource.url.replace(/^http:/, 'https:');
+            }
+            if (resource.format === 'CSV') {
+              return { id: dataset.id, data: await fetchAndParseCsv(resource.url, dataset?.headers) };
+            }
+            else if (['JSON', 'SHP'].includes(resource.format)) {
+              return { id: dataset.id, data: await fetchAndParseJson(resource.url) };
+            }
+          }
+        }
+      }),
+    );
+    return data;
+  }
+  catch (error) {
+    console.error(`Error fetching`, error);
+    throw error;
+  }
+}
+
+export async function fetchBathingMappings(data: any[], datasets: InputJSON) {
+  try {
+    const baseDatasetId = datasets.mappings[0].source_db_id;
+    const seriesDataMappings = data[0].map((source: any) => {
+      if (baseDatasetId === source.id) {
+        const merged = source.data.map((baseRow: any) => {
+          const mergedRow = { ...baseRow };
+          datasets.mappings.forEach((m: any) => {
+            const targetDataset = data.find((d: any) => d.id === m.target_db_id);
+            if (!targetDataset)
+              return;
+            const match = targetDataset.data.find((row: any) =>
+              row[m.target_db_field] === baseRow[m.source_db_field],
+            );
+            if (match) {
+              Object.entries(match).forEach(([key, value]) => {
+                mergedRow[`${key}`] = value;
+              });
+            }
+            mergedRow.options = datasets.options;
+          });
+          return mergedRow;
+        });
+        if (!merged.date) {
+          merged.date = [];
+        }
+        merged.date = source.date;
+        const geojson = csvToGeoJSONFromRows(merged, 'GEOGR_BREITE', 'GEOGR_LAENGE');
+        geojson.date = new Date(source.date).toISOString().split('T')[0];
+        return geojson;
+      }
+      else {
+        throw new Error('Base dataset not found');
+      }
+    });
+    const sorted = seriesDataMappings.sort((a: any, b: any) => a.date.localeCompare(b.date));
+    return sorted;
+  }
+  catch (error) {
+    console.error('Error fetching Bathing Mappings', error);
+    throw error;
+  }
+}
+
+export async function fetchLakesMappings(data: any, datasets: InputJSON) {
+  try {
+    const baseDatasetId = datasets.mappings[0].source_db_id;
+    const baseDataset = data.find((d: any) => d.id === baseDatasetId);
+
+    if (!baseDataset)
+      throw new Error('Base dataset not found');
+    const features = baseDataset.data.features.map((baseRow: any) => {
+      const mergedRow: any = { ...baseRow };
+
+      datasets.mappings.forEach((m: any) => {
+        const targetDataset = data.find((d: any) => d.id === m.target_db_id);
+        if (!targetDataset)
+          return;
+        if (!mergedRow.lakeDepth) {
+          mergedRow.lakeDepth = [];
+        }
+        if (!mergedRow.properties.average_depth) {
+          mergedRow.properties.average_depth = 0;
+        }
+        const baseValue = baseRow.properties.WK_NAME.toLowerCase();
+        if (baseValue.includes(m.target_db_field.toLowerCase())) {
+          const depths = targetDataset.data.map((d: any) => {
+            return d.wasserstand;
+          });
+          mergedRow.lakeDepth.push(targetDataset.data);
+          mergedRow.properties.average_depth = calculateMean(depths);
+        }
+        mergedRow.properties.options = datasets.options;
+      });
+      return mergedRow;
+    });
+    return {
+      type: 'FeatureCollection',
+      features,
+    };
+  }
+  catch (error) {
+    console.error('Error fetching Lakes Mappings', error);
+    throw error;
+  }
+}
+
+function calculateMean(values: number[]): number {
+  const numbers = values.map(v => typeof v === 'string' ? Number.parseFloat(v) : v).filter(v => typeof v === 'number' && !Number.isNaN(v));
+  if (numbers.length === 0) {
+    return 0;
+  }
+  const sum = numbers.reduce((acc, val) => acc + val, 0);
+  // console.warn('sum', sum);
+  return sum / numbers.length;
+}
+
+async function fetchAndParseCsv<D>(csvUrl: string, headers?: string[]): Promise<D[]> {
+  try {
+    const response = await fetchCsvFromUrl(csvUrl);
+    const decoder = new TextDecoder('iso-8859-1');
+    const csvText = decoder.decode(response);
+
+    const rows = csvText.trim().split('\n');
+    if (headers) {
+      return rows.map<D>((line) => {
+        const values = line.split('|').map(v => v.replace(/^"|"$/g, '').trim());
+        const entry: Record<string, any> = {};
+        headers.forEach((key, i) => {
+          entry[key] = values[i] ?? '';
+        });
+        return entry as D;
+      });
+    }
+    else {
+      const headerLine = rows.shift();
+      if (!headerLine)
+        return [];
+
+      const detectedHeaders = headerLine.split(';').map(v => v.replace(/^"|"$/g, '').trim());
+
+      return rows.map<D>((line) => {
+        const values = line.split(';').map(v => v.replace(/^"|"$/g, '').trim());
+        const entry: Record<string, any> = {};
+        detectedHeaders.forEach((key, i) => {
+          entry[key] = values[i] ?? '';
+        });
+        return entry as D;
+      });
+    }
+  }
+  catch (error) {
+    console.error('Error fetching CSV Files', error);
+    throw error;
+  }
+}
+
+async function fetchAndParseJson<G extends GeoJSON.Geometry, P>(geoJsonUrl: string): Promise<GeoJSON.FeatureCollection<G, P>> {
+  if (geoJsonUrl.toLowerCase().endsWith('.zip')) {
+    const response = await fetchZipFromUrl(geoJsonUrl);
+    const data = JSON.parse(new TextDecoder().decode(response));
+    return data as GeoJSON.FeatureCollection<G, P>;
+  }
+  const response = await fetchJsonFromUrl(geoJsonUrl);
+  const data = JSON.parse(new TextDecoder().decode(response));
+  const reprojectedCoordinatesData = reprojectGeoJSON<G, P>(data);
+  return reprojectedCoordinatesData;
+}
+
+function reprojectGeoJSON<G extends GeoJSON.Geometry, P>(geojson: GeoJSON.FeatureCollection<G, P>): GeoJSON.FeatureCollection<G, P> {
+  return {
+    ...geojson,
+    features: geojson.features.map((feature) => {
+      if (feature.geometry.type !== 'Point') {
+        return feature;
+      }
+      const [x, y] = feature.geometry.coordinates;
+      const [lon, lat] = proj4(fromProjection, toProjection, [x, y]);
+
+      let newBbox = feature.bbox;
+      if (feature.bbox && feature.bbox.length === 4) {
+        const [minX, minY, maxX, maxY] = feature.bbox;
+        const [minLon, minLat] = proj4(fromProjection, toProjection, [minX, minY]);
+        const [maxLon, maxLat] = proj4(fromProjection, toProjection, [maxX, maxY]);
+        newBbox = [minLon, minLat, maxLon, maxLat];
+      }
+
+      return {
+        ...feature,
+        geometry: {
+          ...feature.geometry,
+          coordinates: [lon, lat],
+        },
+        bbox: newBbox,
+      };
+    }),
+  };
+}
+
+function csvToGeoJSONFromRows(rows: Record<string, any>[], latKey = 'lat', lonKey = 'lon') {
+  const features = rows
+    .map((row) => {
+      const latitude = Number.parseFloat(row[latKey]);
+      const longitude = Number.parseFloat(row[lonKey]);
+
+      if (Number.isNaN(latitude) || Number.isNaN(longitude))
+        return null;
+
+      const properties = { ...row };
+      delete properties[latKey];
+      delete properties[lonKey];
+
+      return {
+        type: 'Feature',
+        geometry: {
+          type: 'Point',
+          coordinates: [longitude, latitude],
+        },
+        properties,
+      };
+    })
+    .filter(Boolean);
+
+  return {
+    type: 'FeatureCollection',
+    features,
+    date: '',
+  };
+}
diff --git a/server/prepareInput.ts b/server/prepareInput.ts
new file mode 100644
index 0000000..97c78f3
--- /dev/null
+++ b/server/prepareInput.ts
@@ -0,0 +1,42 @@
+import bathingJson from '~/data/bathingWaterInputLayer.json';
+import lakesJson from '~/data/lakesInputLayer.json';
+import { fetchBathingMappings, fetchData, fetchLakesMappings } from '~/server/fetchData';
+
+export interface Dataset {
+  host: string
+  id: string
+  resource_id: string
+  title: string
+}
+
+export interface Mappings {
+  source_db_id: string
+  source_db_field: string
+  condition: string
+  target_db_id: string
+  target_db_field: string
+}
+export interface Options {
+  label_option: string
+  legend_option: string
+}
+
+export interface InputJSON {
+  datasets: Dataset[]
+  mappings: Mappings[]
+  options: Options
+}
+
+export async function getData(feature: string) {
+  if (feature === 'bathing') {
+    const fetchedData = await fetchData(bathingJson as InputJSON);
+    return await fetchBathingMappings(fetchedData, bathingJson as InputJSON);
+  }
+  else if (feature === 'lakeData') {
+    const fetchedData = await fetchData(lakesJson as InputJSON);
+    return await fetchLakesMappings(fetchedData, lakesJson as InputJSON);
+  }
+  else {
+    return 'Unavailable Feature Requested!';
+  }
+}
diff --git a/server/utils/fetch-csv.ts b/server/utils/fetch-csv.ts
new file mode 100644
index 0000000..5225c90
--- /dev/null
+++ b/server/utils/fetch-csv.ts
@@ -0,0 +1,48 @@
+import { createError } from 'h3';
+
+function sleep(ms: number) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+export async function fetchCsvFromUrl(url: string, retries = 3, delay = 1000): Promise<Uint8Array> {
+  if (!url) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Missing URL parameter',
+    });
+  }
+
+  for (let attempt = 0; attempt <= retries; attempt++) {
+    const response = await fetch(url);
+
+    if (response.ok) {
+      const lowerUrl = url.toLowerCase();
+      if (lowerUrl.endsWith('.csv') || response.headers.get('content-type')?.includes('text/csv')) {
+        const buffer = await response.arrayBuffer();
+        return new Uint8Array(buffer);
+      }
+
+      throw createError({
+        statusCode: 415,
+        statusMessage: 'Unsupported file format.',
+      });
+    }
+
+    if (response.status === 429 && attempt < retries) {
+      await sleep(delay);
+      delay *= 2; // Exponential backoff
+    }
+    else {
+      throw createError({
+        statusCode: response.status,
+        statusMessage: `Failed to fetch resource: ${response.statusText}`,
+      });
+    }
+  }
+
+  // Should not reach here
+  throw createError({
+    statusCode: 500,
+    statusMessage: 'Exceeded retry limit.',
+  });
+}
diff --git a/server/utils/fetch-json.ts b/server/utils/fetch-json.ts
new file mode 100644
index 0000000..c7f10dc
--- /dev/null
+++ b/server/utils/fetch-json.ts
@@ -0,0 +1,28 @@
+import { createError } from 'h3';
+
+export async function fetchJsonFromUrl(url: string): Promise<Uint8Array> {
+  if (!url) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Missing URL parameter',
+    });
+  }
+
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw createError({
+      statusCode: response.status,
+      statusMessage: `Failed to fetch resource: ${response.statusText}`,
+    });
+  }
+
+  const lowerUrl = url.toLowerCase();
+  if (lowerUrl.endsWith('json')) {
+    return await response.json();
+  }
+
+  throw createError({
+    statusCode: 415,
+    statusMessage: 'Unsupported file format.',
+  });
+}
diff --git a/server/utils/fetch-zip.ts b/server/utils/fetch-zip.ts
new file mode 100644
index 0000000..a5ddeda
--- /dev/null
+++ b/server/utils/fetch-zip.ts
@@ -0,0 +1,41 @@
+import { createError } from 'h3';
+import shp from 'shpjs';
+
+export async function fetchZipFromUrl(url: string): Promise<Uint8Array> {
+  if (!url) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Missing URL parameter',
+    });
+  }
+
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw createError({
+      statusCode: response.status,
+      statusMessage: `Failed to fetch resource: ${response.statusText}`,
+    });
+  }
+
+  const lowerUrl = url.toLowerCase();
+  if (lowerUrl.endsWith('.zip')) {
+    const zipBuffer = await response.arrayBuffer();
+    try {
+      const geojson = await shp(zipBuffer);
+      const jsonString = JSON.stringify(geojson);
+      const uint8Array = new TextEncoder().encode(jsonString);
+      return uint8Array;
+    }
+    catch (err) {
+      throw createError({
+        statusCode: 422,
+        statusMessage: `Failed to convert shapefile to GeoJSON.${err}`,
+      });
+    }
+  }
+
+  throw createError({
+    statusCode: 415,
+    statusMessage: 'Unsupported file format.',
+  });
+}