diff --git a/modules/gpxInterpreter.py b/modules/gpxInterpreter.py
index a7dcef0..e131614 100644
--- a/modules/gpxInterpreter.py
+++ b/modules/gpxInterpreter.py
@@ -119,7 +119,7 @@ class GPXHandler:
 
     
     def getTracksInTime(self, start, end):
-        tracks = self.__dbSession.query(Track).filter(Track.start.between(start, end)).all()
+        tracks = self.__dbSession.query(Track).filter(Track.date.between(start, end)).all()
         
         track_list = [
             {
diff --git a/web/src/components/map.vue b/web/src/components/map.vue
index 65774b2..1c9b97e 100644
--- a/web/src/components/map.vue
+++ b/web/src/components/map.vue
@@ -58,14 +58,37 @@ export default defineComponent({
 
 <template>
   <!-- Das ref-Attribut gibt den Container für die Karte an -->
-  <div ref="mapDiv" style="width: 100vw; height: 80vh; overflow: hidden;"></div>
+  <div ref="mapDiv" style="width: 70vw; height: 75vh; overflow: hidden;"></div>
+  <br>
+  <div class="overflow-x-auto" style="width: 70vw;">
+  <table class="table">
+    <!-- head -->
+    <thead>
+      <tr>
+        <th>track name</th>
+        <th>driver</th>
+        <th>vehicle</th>
+        <th>distance Color</th>
+      </tr>
+    </thead>
+    <tbody>
+      <!-- row 1 -->
+      <tr class="bg-base-200">
+        <th>1</th>
+        <td>Cy Ganderton</td>
+        <td>Quality Control Specialist</td>
+        <td>Blue</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 </template>
 
 <style scoped>
 /* Verhindert, dass die Karte über den Bildschirm hinausgeht */
 #mapDiv {
   width: 100vw; /* Volle Breite des Viewports */
-  height: 80vh; /* Volle Höhe des Viewports */
+  height: 70vh; /* Volle Höhe des Viewports */
   margin: 0;     /* Keine Margen */
   padding: 0;    /* Keine Auffüllung */
   overflow: hidden; /* Verhindert ungewolltes Überlaufen */
diff --git a/web/src/views/route.vue b/web/src/views/route.vue
index e1c4abb..df56db5 100644
--- a/web/src/views/route.vue
+++ b/web/src/views/route.vue
@@ -68,13 +68,7 @@ export default defineComponent({
         if (response.ok) {
           // Wenn die Antwort OK ist, die Daten verarbeiten
           mapData.value = await response.json();
-
-          // Überprüfe, ob die Antwort die richtigen Daten enthält
-          if (mapData.value && mapData.value.features && mapData.value.features.length > 0) {
-            console.log("GeoJSON-Daten erfolgreich geladen", mapData.value);
-          } else {
-            console.log("Keine GeoJSON-Daten in der Antwort.");
-          }
+          console.log("GeoJSON-Daten erfolgreich geladen", mapData.value);
         } else {
           console.log(await response.text());
         }
@@ -113,6 +107,11 @@ export default defineComponent({
       headers.set('Content-Type', 'application/json')
       headers.set('Accept', 'application/json')
 
+      showMap.value = false;
+      showCloud.value = true;
+      search.value = false;
+      showUpload.value = false;
+
       const request: RequestInfo = new Request("http://localhost:5000/track?start=" + startSearchDate.value + "&end=" + endSearchDate.value, {
         method: "GET",
         headers: headers
@@ -176,19 +175,19 @@ export default defineComponent({
         <li v-for="track in tracks"> <a v-on:click="loadTrack(track.id)"> {{ track.name }} </a> </li>
       </ul>
     </div>
-    <div style="width: 62%; margin-left: 30%;">
-      <PointCloud v-if="showCloud && !search"></PointCloud>
+    <div style="width: 70%; margin-left: 5%;">
+      <PointCloud style="border-radius: 10px;" v-if="showCloud && !search"></PointCloud>
     </div>
     <div v-if="!showMap && !showCloud && search" style="margin-left: 20%; display:flex;">
       <div>
         start time
-        <VueDatePicker v-model="startSearchDate"> Search From </VueDatePicker>
+        <input class="datepicker" type="date" id="birthday" name="birthday" v-model="startSearchDate">
       </div>
       <div style="margin-left: 5%;">
         end time
-        <VueDatePicker v-model="endSearchDate"> Search To </VueDatePicker>
+        <input class="datepicker" type="date" id="birthday" name="birthday" v-model="endSearchDate">
       </div>
-      <button class="btn btn-success" v-on:click="" style="margin-left: 5%; height:60px; width:120px;">Search</button>
+      <button v-on:click="searchTracks" class="btn btn-success" style="margin-left: 5%; height:60px; width:120px;">Search</button>
     </div>
     <div v-if="showMap && !search && !showCloud">
       <Map :geoJsonData="mapData"
@@ -197,4 +196,9 @@ export default defineComponent({
   </div>
 </template>
 
-<style scoped></style>
\ No newline at end of file
+<style scoped>
+  input.datePicker {
+    padding: 5px;
+    border-radius: 5px;;
+  }
+</style>
\ No newline at end of file