diff --git a/src/classes/BaseMapPickerControl.ts b/BaseMapPickerControl.ts
similarity index 100%
rename from src/classes/BaseMapPickerControl.ts
rename to BaseMapPickerControl.ts
diff --git a/package-lock.json b/package-lock.json
index 05bd3c5..cf4064b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,9 @@
       "dependencies": {
         "@formkit/tempo": "^0.0.12",
         "@types/geojson": "^7946.0.10",
+        "@vueform/slider": "^2.1.10",
         "@vuepic/vue-datepicker": "^4.3.0",
+        "chart.js": "^4.4.2",
         "core-js": "^3.30.1",
         "d3-array": "^3.2.3",
         "d3-brush": "^3.0.0",
@@ -2323,6 +2325,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
     "node_modules/@leichtgewicht/ip-codec": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
@@ -3907,6 +3914,11 @@
       "integrity": "sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==",
       "dev": true
     },
+    "node_modules/@vueform/slider": {
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/@vueform/slider/-/slider-2.1.10.tgz",
+      "integrity": "sha512-L2G3Ju51Yq6yWF2wzYYsicUUaH56kL1QKGVtimUVHT1K1ADcRT94xVyIeJpS0klliVEeF6iMZFbdXtHq8AsDHw=="
+    },
     "node_modules/@vuepic/vue-datepicker": {
       "version": "4.5.1",
       "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-4.5.1.tgz",
@@ -5052,6 +5064,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.2.tgz",
+      "integrity": "sha512-6GD7iKwFpP5kbSD4MeRRRlTnQvxfQREy36uEtm1hzHzcOqwWx0YEHuspuoNlslu+nciLIB7fjjsHkUv/FzFcOg==",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -8033,9 +8056,9 @@
       "dev": true
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.5",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
-      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "dev": true,
       "funding": [
         {
@@ -15625,9 +15648,9 @@
       }
     },
     "node_modules/webpack-dev-middleware": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz",
-      "integrity": "sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==",
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz",
+      "integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==",
       "dev": true,
       "dependencies": {
         "colorette": "^2.0.10",
diff --git a/package.json b/package.json
index c93ddcd..2f396d2 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,9 @@
   "dependencies": {
     "@formkit/tempo": "^0.0.12",
     "@types/geojson": "^7946.0.10",
+    "@vueform/slider": "^2.1.10",
     "@vuepic/vue-datepicker": "^4.3.0",
+    "chart.js": "^4.4.2",
     "core-js": "^3.30.1",
     "d3-array": "^3.2.3",
     "d3-brush": "^3.0.0",
diff --git a/src/App.vue b/src/App.vue
index 83e4fa2..8cac186 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,7 +8,7 @@
   <div class="absolute bottom-0 flex flex-col w-full items-center bg-white md:static md:block">
     <Stats/>
     <KeyNumbers/>
-    <HistogramSlider/>
+    <div class="hidden lg:block"><Chart/></div>
   </div>
   <AppLegend/>
   <VirtualVisit v-if="store.getState().virtualVisitAlreadyOpened"/>
@@ -24,11 +24,11 @@
 
 <script lang="ts" setup>
 import { store } from "./main"
-import { computed, onMounted, watch } from "vue"
+import { computed, onMounted } from "vue"
 import AppHeader from "./components/Header.vue"
 import AppLegend from "./components/MapLegend.vue"
 import BaseMap from "./components/BaseMap.vue"
-import HistogramSlider from "./components/HistogramSlider.vue"
+import Chart from "./components/Chart.vue"
 import KeyNumbers from "./components/KeyNumbers.vue"
 import PopUp from "./components/PopUp.vue"
 import Stats from "./components/Stats.vue"
diff --git a/src/Store.ts b/src/Store.ts
index 01b8c41..5e95b23 100644
--- a/src/Store.ts
+++ b/src/Store.ts
@@ -20,6 +20,8 @@ export class Store {
     virtualVisitAlreadyOpened: false,
     minDate: new Date(2016, 2, 7),
     maxDate: new Date(),
+    selectedMinDate: new Date(2016, 2, 7),
+    selectedMaxDate: new Date(),
     switch: {
       rescue: true,
       transfer: true,
@@ -96,6 +98,7 @@ export class Store {
 
   private dataState: DataState = reactive({
     OpsData: [],
+    filteredOpsData: [],
     otherData: {} as DataState["otherData"],
     harbors: {} as FeatureCollection,
     sar: {} as FeatureCollection,
@@ -114,6 +117,7 @@ export class Store {
     this.dataState.sarCenters = require("./assets/resources/SAR_centers.json")
     this.dataState.zones12Miles = require("./assets/resources/zones_12_miles.json")
     this.dataState.OpsData = await fetchOpsData()
+    this.dataState.filteredOpsData = [...this.dataState.OpsData]
     this.dataState.dataLoaded = true
     this.updateHistogramSlider()
     this.updateStats(this.dataState.OpsData)
@@ -124,9 +128,10 @@ export class Store {
   }
 
   public filterData (minDate: Date, maxDate: Date): void {
-    this.appState.minDate = new Date(minDate)
-    this.appState.maxDate = new Date(maxDate)
-    const timeFilteredData = this.dataState.OpsData.filter(currentOperation => this.appState.minDate <= currentOperation.date && currentOperation.date <= this.appState.maxDate)
+    this.appState.selectedMinDate = new Date(minDate)
+    this.appState.selectedMaxDate = new Date(maxDate)
+    const timeFilteredData = this.dataState.OpsData.filter(currentOperation => this.appState.selectedMinDate <= currentOperation.date && currentOperation.date <= this.appState.selectedMaxDate)
+    this.dataState.filteredOpsData = timeFilteredData
     this.baseMap.updateOperationsData(timeFilteredData)
     this.updateStats(timeFilteredData)
   }
@@ -159,7 +164,7 @@ export class Store {
   }
 
   updateStats (timeFilteredData: OpsData[]): void {
-    updateStats(this.appState.minDate, this.appState.maxDate, timeFilteredData)
+    updateStats(this.appState.selectedMinDate, this.appState.selectedMaxDate, timeFilteredData)
   }
 
   toggleSwitch (switchId: keyof typeof SwitchType): void {
diff --git a/src/classes/BaseMap.ts b/src/classes/BaseMap.ts
index 29c684c..09e10ce 100644
--- a/src/classes/BaseMap.ts
+++ b/src/classes/BaseMap.ts
@@ -4,7 +4,7 @@ import { MapboxGLButtonControl } from "./MapboxGLButtonControl"
 import { GeoJSONSource, LngLatBounds, LngLatBoundsLike, Map, MapMouseEvent, NavigationControl, Popup } from "mapbox-gl"
 import { FeatureCollection } from "geojson"
 import "mapbox-gl/dist/mapbox-gl.css"
-import { BaseMapPickerControl } from "./BaseMapPickerControl"
+import { BaseMapPickerControl } from "../../BaseMapPickerControl"
 import { opsDataToGeoJSON } from "@/utils/arrayToGeojson"
 import { ref, reactive } from "vue"
 import { Store } from "@/Store"
diff --git a/src/classes/PopUpAndStats.ts b/src/classes/PopUpAndStats.ts
index 7d03d95..3562444 100644
--- a/src/classes/PopUpAndStats.ts
+++ b/src/classes/PopUpAndStats.ts
@@ -17,8 +17,8 @@ const setInnerText = function (elemId: string, textToAdd: string) {
 }
 
 export const updateStats = function (minDate: Date, maxDate: Date, timeFilteredData: OpsData[]): void {
-  setInnerText("statsMinDate", getFormattedDate(minDate))
-  setInnerText("statsMaxDate", getFormattedDate(maxDate))
+  setInnerText("statsMinDate", minDate.toLocaleDateString())
+  setInnerText("statsMaxDate", maxDate.toLocaleDateString())
   let nbSurvivor = 0
   let female = 0
   let male = 0
diff --git a/src/classes/State.ts b/src/classes/State.ts
index 6fe04c1..39fe69a 100644
--- a/src/classes/State.ts
+++ b/src/classes/State.ts
@@ -30,6 +30,8 @@ export interface ApplicationState {
   virtualVisitAlreadyOpened: boolean;
   minDate: Date;
   maxDate: Date;
+  selectedMinDate: Date;
+  selectedMaxDate: Date;
   switch: { [key in SwitchType]: boolean };
   informationTooltip: {
     visible: boolean;
@@ -47,6 +49,7 @@ export interface ApplicationState {
 
 export interface DataState {
   OpsData: OpsData[]
+  filteredOpsData: OpsData[]
   otherData: {
     incidents: FeatureCollection
     deaths: FeatureCollection
diff --git a/src/components/Chart.vue b/src/components/Chart.vue
new file mode 100644
index 0000000..cdf0adc
--- /dev/null
+++ b/src/components/Chart.vue
@@ -0,0 +1,137 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<!-- eslint-disable object-shorthand -->
+<template>
+    <div class="chart-container">
+        <canvas id="myChart"></canvas>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { store } from "@/main"
+import { watch, computed } from "vue"
+import Chart from "chart.js/auto"
+import { useI18n } from "vue-i18n"
+
+const i18nLocale = useI18n()
+
+let mixedChart: Chart<"bar" | "line", any[], unknown> | null = null
+
+watch(() => store.getData().filteredOpsData, () => createChart())
+watch(() => i18nLocale.locale.value, () => createChart())
+
+function createChart () {
+  const dataset: Record<string, any> = {}
+  store.getData().filteredOpsData.forEach(x => {
+    const month = x.date.getMonth() + 1
+    const year = x.date.getFullYear()
+    if (dataset[month + "_" + year]) {
+      dataset[month + "_" + year].nbObs += x.nbOps
+      dataset[month + "_" + year].nbSurvivor += x.nbSurvivor
+    } else {
+      dataset[month + "_" + year] = {
+        unitTimeValue: (year * 1000) + month,
+        label: `${month}/${year}`,
+        nbObs: x.nbOps,
+        nbSurvivor: x.nbSurvivor
+      }
+    }
+  })
+  let datasetArray = []
+  for (const key in dataset) {
+    datasetArray.push(dataset[key])
+  }
+  datasetArray = datasetArray.sort((a, b) => a.unitTimeValue - b.unitTimeValue)
+  const labels = datasetArray.map(x => x.label)
+  const survivors = datasetArray.map(x => x.nbSurvivor)
+  const operations = datasetArray.map(x => x.nbObs)
+  const ctx = document.getElementById("myChart")
+  if (mixedChart) (mixedChart as any).destroy()
+
+  mixedChart = new Chart((ctx as ChartItem), {
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        x: {
+          stacked: true
+        },
+        y: {
+          type: "linear",
+          display: true,
+          position: "left"
+        },
+        y1: {
+          type: "linear",
+          display: true,
+          position: "right"
+        }
+      }
+    },
+    type: "bar",
+    data: {
+      labels,
+      datasets: [{
+        type: "bar",
+        label: opsText.value,
+        data: operations,
+        borderColor: "#F03E1B",
+        backgroundColor: "#F03E1B",
+        yAxisID: "y",
+        order: 2
+      },
+      {
+        type: "line",
+        label: survivorsText.value,
+        data: survivors,
+        backgroundColor: "#1A2747",
+        borderColor: "#1A2747",
+        yAxisID: "y1",
+        order: 1
+      }
+      ]
+    }
+  })
+}
+
+const opsText = computed(() => {
+  switch (i18nLocale.locale.value) {
+    case "en":
+      return "Number of operations per months"
+    case "fr":
+      return "Nombre d'opérations par mois"
+    case "it":
+      return "Numero di operazioni al mese"
+    case "de":
+      return "Anzahl der Operationen pro Monat"
+    default:
+      return "Number of operations per months"
+  }
+})
+const survivorsText = computed(() => {
+  switch (i18nLocale.locale.value) {
+    case "en":
+      return "Survivors per months"
+    case "fr":
+      return "Personnes rescapées par mois"
+    case "it":
+      return "Naufraghi al mese"
+    case "de":
+      return "Überlebende pro Monat"
+    default:
+      return "Survivors per months"
+  }
+})
+</script>
+
+<style>
+.chart-container{
+    position: absolute;
+    bottom: 15px;
+    left: 3%;
+    z-index: 10;
+    background-color: rgba(255, 255, 255, 0.7);
+    height: 25vh;
+    width: 70vw;
+    border-radius: 10px;
+}
+</style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index bc3eadd..5b1d2d5 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <header>
     <div class="lg:hidden">
@@ -20,13 +21,13 @@
         <nav class="text-lg text-main flex flex-col font-black">
           <ul class="list-disc pl-12 pt-6 pb-6 space-y-3">
             <li>
-              <span @click="setLocale('en')" :class="{activeLanguage: $i18n.locale === 'en'}">EN</span>
+              <span @click="$i18n.locale = 'en'" :class="{activeLanguage: $i18n.locale === 'en'}">EN</span>
               <span class="mr-2 ml-2">|</span>
-              <span @click="setLocale('fr')" :class="{activeLanguage: $i18n.locale === 'fr'}">FR</span>
+              <span @click="$i18n.locale = 'fr'" :class="{activeLanguage: $i18n.locale === 'fr'}">FR</span>
               <span class="mr-2 ml-2">|</span>
-              <span @click="setLocale('it')" :class="{activeLanguage: $i18n.locale === 'it'}">IT</span>
+              <span @click="$i18n.locale = 'it'" :class="{activeLanguage: $i18n.locale === 'it'}">IT</span>
               <span class="mr-2 ml-2">|</span>
-              <span @click="setLocale('de')" :class="{activeLanguage: $i18n.locale === 'de'}">DE</span>
+              <span @click="$i18n.locale = 'de'" :class="{activeLanguage: $i18n.locale === 'de'}">DE</span>
             </li>
             <li><a href="https://www.sosmediterranee.org/glossary/" target="_blank">{{ $t("header.glossary") }}</a></li>
             <li><a href="https://www.sosmediterranee.org/operations/" target="_blank">{{ $t("header.logBook") }}</a></li>
@@ -48,55 +49,54 @@
             {{ $t("header.logBook") }}
           </a>
         </div>
-        <div class="flex-grow"></div>
-        <span @click="setLocale('en')" :class="{activeLanguage: $i18n.locale === 'en'}" class="cursor-pointer text-sm">EN</span>
+        <div class="flex-grow header-middle">
+          <span class="text-xs mb-2">{{ $t("header.filterData") }}</span>
+          <div class="header-slider"><header-slider /></div>
+        </div>
+        <span @click="$i18n.locale = 'en'" :class="{activeLanguage: $i18n.locale === 'en'}" class="cursor-pointer text-sm">EN</span>
         <span class="mr-2 ml-2">|</span>
-        <span @click="setLocale('fr')" :class="{activeLanguage: $i18n.locale === 'fr'}" class="cursor-pointer text-sm">FR</span>
+        <span @click="$i18n.locale = 'fr'" :class="{activeLanguage: $i18n.locale === 'fr'}" class="cursor-pointer text-sm">FR</span>
         <span class="mr-2 ml-2">|</span>
-        <span @click="setLocale('it')" :class="{activeLanguage: $i18n.locale === 'it'}" class="cursor-pointer text-sm">IT</span>
+        <span @click="$i18n.locale = 'it'" :class="{activeLanguage: $i18n.locale === 'it'}" class="cursor-pointer text-sm">IT</span>
         <span class="mr-2 ml-2">|</span>
-        <span @click="setLocale('de')" :class="{activeLanguage: $i18n.locale === 'de'}" class="mr-4 cursor-pointer text-sm">DE</span>
+        <span @click="$i18n.locale = 'de'" :class="{activeLanguage: $i18n.locale === 'de'}" class="mr-4 cursor-pointer text-sm">DE</span>
         <HeaderContributors />
       </nav>
     </div>
   </header>
 </template>
 
-<script lang="ts">
-import { defineAsyncComponent, defineComponent } from "vue"
+<script setup lang="ts">
 import { store } from "@/main"
+import HeaderSlider from "@/components/HeaderSlider.vue"
 
-export default defineComponent({
-  components: {
-    BurgerMenu: defineAsyncComponent(() => import("./Mobile/BurgerMenu.vue")),
-    HeaderContributorsMobile: defineAsyncComponent(() => import("./Mobile/HeaderContributorsMobile.vue")),
-    HeaderContributors: defineAsyncComponent(() => import("./HeaderContributors.vue"))
-  },
-  data () {
-    return { store, showForm: false }
-  },
-  methods: {
-    maxHeightStyle (booleanValue: boolean): { "max-height": string | number } {
-      return { "max-height": (booleanValue ? "1000px" : 0) }
-    },
-    transitionClasses (): string[] {
-      return ["z-100", "absolute", "transition-[max-height]", "ease-in-out", "duration-500", "overflow-hidden"]
-    },
-    updateMenuVisibility () {
-      store.updateMenuVisibility()
-    },
-    setLocale (locale: string) {
-      this.$i18n.locale = locale
-    }
-  },
-  name: "Dashboard-Header"
-})
+function maxHeightStyle (booleanValue: boolean): { "max-height": string | number } {
+  return { "max-height": (booleanValue ? "1000px" : 0) }
+}
+function transitionClasses (): string[] {
+  return ["z-100", "absolute", "transition-[max-height]", "ease-in-out", "duration-500", "overflow-hidden"]
+}
+function updateMenuVisibility () {
+  store.updateMenuVisibility()
+}
 </script>
 
 <style scoped>
 .header-desktop{
   padding-left: 3%;
   padding-right: 3%;
+  height: 60px;
+}
+.header-middle{
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content:center;
+}
+.header-slider{
+  display: block;
+  width: 100%;
 }
 .up-arrow {
   transform: rotate(180deg);
diff --git a/src/components/HeaderSlider.vue b/src/components/HeaderSlider.vue
new file mode 100644
index 0000000..e0d7262
--- /dev/null
+++ b/src/components/HeaderSlider.vue
@@ -0,0 +1,77 @@
+<template>
+    <div class="slider-container">
+        <Slider
+            class="slider-red"
+            :classes="{
+            target: 'relative box-border select-none touch-none tap-highlight-transparent touch-callout-none disabled:cursor-not-allowed',
+            focused: 'slider-focused',
+            tooltipFocus: 'slider-tooltip-focus',
+            tooltipDrag: 'slider-tooltip-drag',
+            ltr: 'slider-ltr',
+            rtl: 'slider-rtl',
+            horizontal: 'slider-horizontal h-1.5',
+            vertical: 'slider-vertical w-1.5 h-80',
+            textDirectionRtl: 'slider-txt-rtl',
+            textDirectionLtr: 'slider-txt-ltr',
+            base: 'w-full h-full relative z-1 bg-gray-300 rounded',
+            connects: 'w-full h-full relative overflow-hidden z-0 rounded',
+            connect: 'absolute z-1 top-0 right-0 transform-origin-0 transform-style-flat h-full w-full bg-red-500 cursor-pointer tap:duration-300 tap:transition-transform disabled:bg-gray-400 disabled:cursor-not-allowed',
+            origin: 'slider-origin absolute z-1 top-0 right-0 transform-origin-0 transform-style-flat h-full w-full h:h-0 v:-top-full txt-rtl-h:left-0 txt-rtl-h:right-auto v:w-0 tap:duration-300 tap:transition-transform',
+            handle: 'absolute rounded-full bg-white border-0 shadow-slider cursor-grab focus:outline-none h:w-4 h:h-4 h:-top-1.5 h:-right-2 txt-rtl-h:-left-2 txt-rtl-h:right-auto v:w-4 v:h-4 v:-top-2 v:-right-1.25 disabled:cursor-not-allowed focus:ring focus:ring-green-500 focus:ring-opacity-30',
+            handleLower: 'slider-hande-lower',
+            handleUpper: 'slider-hande-upper',
+            touchArea: 'h-full w-full',
+            tooltip: 'absolute block text-sm font-semibold whitespace-nowrap py-1 px-1.5 min-w-5 text-center text-white rounded border border-red-500 bg-red-500 transform h:-translate-x-1/2 h:left-1/2 v:-translate-y-1/2 v:top-1/2 disabled:bg-gray-400 disabled:border-gray-400 merge-h:translate-x-1/2 merge-h:left-auto merge-v:-translate-x-4 merge-v:top-auto tt-focus:hidden tt-focused:block tt-drag:hidden tt-dragging:block',
+            tooltipTop: 'bottom-6 h:arrow-bottom merge-h:bottom-3.5',
+            tooltipBottom: 'top-6 h:arrow-top merge-h:top-5',
+            tooltipLeft: 'right-6 v:arrow-right merge-v:right-1',
+            tooltipRight: 'left-6 v:arrow-left merge-v:left-7',
+            tooltipHidden: 'slider-tooltip-hidden',
+            active: 'slider-active shadow-slider-active cursor-grabbing',
+            draggable: 'cursor-ew-resize v:cursor-ns-resize',
+            tap: 'slider-state-tap',
+            drag: 'slider-state-drag',
+            }"
+            tooltipPosition="bottom"
+            showTooltip="focus"
+            :lazy="false"
+            :min="0"
+            :max="daysCount"
+            v-model="startValues"
+            :format="formatTooltip"
+            @update="changeOnTooltip"
+        />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { store } from "@/main"
+import Slider from "@vueform/slider"
+
+const daysCount = Math.round((store.getState().maxDate.getTime() - store.getState().minDate.getTime()) / (1000 * 3600 * 24))
+const startValues = [0, daysCount]
+
+function formatTooltip (value: number) {
+  const date = new Date(store.getState().minDate)
+  date.setDate(date.getDate() + value)
+  return date.toLocaleDateString()
+}
+
+function changeOnTooltip (values: [number, number]) {
+  const minDate = new Date(store.getState().minDate)
+  minDate.setDate(minDate.getDate() + values[0])
+  const maxDate = new Date(store.getState().minDate)
+  maxDate.setDate(maxDate.getDate() + values[1])
+  store.filterData(minDate, maxDate)
+}
+</script>
+
+<style>
+.slider-container{
+    margin-left: 50px;
+    margin-right: 50px;
+}
+.bg-green-500{
+background-color: red !important;
+}
+</style>
diff --git a/src/components/KeyNumbers.vue b/src/components/KeyNumbers.vue
index 53d1c67..3a927e2 100644
--- a/src/components/KeyNumbers.vue
+++ b/src/components/KeyNumbers.vue
@@ -35,8 +35,8 @@ export default defineComponent({
 
 <style scoped>
 .position-desktop {
+  top: 75px;
   align-items: center;
-  top: 3rem;
   right: 20px;
   width: 22vw;
 }
diff --git a/src/components/Stats.vue b/src/components/Stats.vue
index c3f5f85..8b6403e 100644
--- a/src/components/Stats.vue
+++ b/src/components/Stats.vue
@@ -112,7 +112,7 @@ function removeInformationTooltip () {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .position-desktop {
-  top: 3rem;
+  top: 75px;
   margin-left: 3%;
   width: 23vw;
 }
diff --git a/src/locales/de.json b/src/locales/de.json
index 70608fc..f6bd949 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -11,7 +11,8 @@
             "subtitle": "Now",
             "button": "I donnate",
             "button2": "Make a donation"
-        }
+        },
+        "filterData": "Daten nach Datum filtern"
     },
     "contributors": {
         "contrib": "Mitwirkende",
diff --git a/src/locales/en.json b/src/locales/en.json
index 6e4cbd9..15e37bc 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -11,7 +11,8 @@
             "subtitle": "Now",
             "button": "I donnate",
             "button2": "Make a donation"
-        }
+        },
+        "filterData": "Filter data by date"
     },
     "contributors": {
         "contrib": "Contributors",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index e437861..c6dcceb 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -11,7 +11,8 @@
             "subtitle": "Maintenant",
             "button": "Je donne",
             "button2": "Faire un don"
-        }
+        },
+        "filterData": "Filtrer les données par date"
     },
     "contributors": {
         "contrib": "Contributeurs",
diff --git a/src/locales/it.json b/src/locales/it.json
index e8a7b90..a136ff5 100644
--- a/src/locales/it.json
+++ b/src/locales/it.json
@@ -11,7 +11,8 @@
             "subtitle": "Now",
             "button": "I donnate",
             "button2": "Make a donation"
-        }
+        },
+        "filterData": "Filtra i dati per data"
     },
     "contributors": {
         "contrib": "Autori",
diff --git a/src/main.ts b/src/main.ts
index 2cfba24..892d851 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,7 @@ import { loadLocaleMessages } from "@/i18n"
 import { Store } from "./Store"
 
 const i18n = createI18n({
+  legacy: false,
   locale: navigator.language.split("-")[0],
   fallbackLocale: "en",
   messages: loadLocaleMessages()
diff --git a/tailwind.config.js b/tailwind.config.js
index fe6f47a..fe02659 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -30,5 +30,5 @@ module.exports = {
   variants: {
     extend: {}
   },
-  plugins: []
+  plugins: [require("@vueform/slider/tailwind")]
 }
diff --git a/tsconfig.json b/tsconfig.json
index befe42e..354c7ce 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -34,7 +34,7 @@
     "src/**/*.vue",
     "tests/**/*.ts",
     "tests/**/*.tsx"
-  ],
+, "BaseMapPickerControl.ts"  ],
   "exclude": [
     "node_modules"
   ]