diff --git a/app.py b/app.py
index ec5505b..5de9272 100644
--- a/app.py
+++ b/app.py
@@ -40,182 +40,200 @@ gpxHandler = GPXHandler(session)
 driverHandler = DriverHandler(session)
 vehicleHandler = VehicleHandler(session)
 
+
 @app.route('/')
 @cross_origin()
 def serve_vue_app():
     return send_from_directory(app.static_folder, 'index.html')
 
-@app.route("/track", methods=['GET'])
+
+@app.route("/track", methods=['GET', 'DELETE'])
 @cross_origin()
 def getTrack():
 
     app.logger.debug(f"found arguments {request.args}")
-    
-    if ("start" in request.args and "end" in request.args) or ("id" in request.args):
-        if "start" in request.args and "end" in request.args:
-            if "asMap" in request.args:
-                # get tracks by filter
-                start = request.args["start"]
-                end = request.args["end"]
-                
-                # Die GeoJSON-Daten aus der Datenbank abrufen
-                geojson_data = gpxHandler.getTracksInTimeWithGeoData(start, end)
-                app.logger.debug(f"returned track {geojson_data}")
 
-                # Die GeoJSON-Daten als JSON zurückgeben
-                return jsonify(geojson_data)
-                
-            # get tracks by filter
-            start = request.args["start"]
-            end = request.args["end"]
-            try:
-                return gpxHandler.getTracksInTime(start, request.args["end"]), 200
-            except Exception as e:
-                app.logger.debug(f"failed to search tracks error {e} values: start={start}, end={end}")
-                return f"error {e}", 500
+    match request.method:
+        case "GET":
+            if ("start" in request.args and "end" in request.args) or ("id" in request.args):
+                if "start" in request.args and "end" in request.args:
+                    if "asMap" in request.args:
+                        # get tracks by filter
+                        start = request.args["start"]
+                        end = request.args["end"]
 
-        elif "id" in request.args:
-            # get track by id
-            trackID = int(request.args["id"])
-            try:
-                app.logger.debug(f"Request args: {request.args}")
-                app.logger.debug(f"track id {trackID}")
-                track = gpxHandler.getTrack(trackID)
-                                
-                app.logger.debug(f"returned track {track}")
-                                
-                return jsonify(track), 200
-            except Exception as e:
-                app.logger.debug(f"fetching track failed with error {e}")
-                return f"error {e}", 500
-    else:
-        try:
-            tracks = gpxHandler.getTracks()
-            if len(tracks) > 0:
-                # gets all tracks as list
-                return tracks, 200
+                        # Die GeoJSON-Daten aus der Datenbank abrufen
+                        geojson_data = gpxHandler.getTracksInTimeWithGeoData(
+                            start, end)
+                        app.logger.debug(f"returned track {geojson_data}")
+
+                        # Die GeoJSON-Daten als JSON zurückgeben
+                        return jsonify(geojson_data)
+
+                    # get tracks by filter
+                    start = request.args["start"]
+                    end = request.args["end"]
+                    try:
+                        return gpxHandler.getTracksInTime(start, request.args["end"]), 200
+                    except Exception as e:
+                        app.logger.debug(f"failed to search tracks error {
+                                        e} values: start={start}, end={end}")
+                        return f"error {e}", 500
+
+                elif "id" in request.args:
+                    # get track by id
+                    trackID = int(request.args["id"])
+                    try:
+                        app.logger.debug(f"Request args: {request.args}")
+                        app.logger.debug(f"track id {trackID}")
+                        track = gpxHandler.getTrack(trackID)
+
+                        app.logger.debug(f"returned track {track}")
+
+                        return jsonify(track), 200
+                    except Exception as e:
+                        app.logger.debug(f"fetching track failed with error {e}")
+                        return f"error {e}", 500
             else:
-                return [], 200
-        except Exception as e:
-            app.logger.debug(f"fetching all tracks failed with error {e}")
-            return f"error {e}", 500
+                try:
+                    tracks = gpxHandler.getTracks()
+                    if len(tracks) > 0:
+                        # gets all tracks as list
+                        return tracks, 200
+                    else:
+                        return [], 200
+                except Exception as e:
+                    app.logger.debug(f"fetching all tracks failed with error {e}")
+                    return f"error {e}", 500
+        case "DELETE":
+            pass
+
 
 @app.route("/track/meta", methods=['GET'])
 @cross_origin()
 def getTrackMeta():
 
     app.logger.debug(f"found arguments {request.args}")
-    
-    if "id" in request.args:
-            # get track by id
-            trackID = int(request.args["id"])
-            try:
-                app.logger.debug(f"Request args: {request.args}")
-                app.logger.debug(f"track id {trackID}")
-                track = gpxHandler.getTrackMeta(trackID)
-                                
-                app.logger.debug(f"returned track {track}")
-                                
-                return jsonify(track), 200
-            except Exception as e:
-                app.logger.debug(f"fetching track failed with error {e}")
-                return f"error {e}", 500
 
-@app.route("/driver", methods=['GET', 'POST'])
+    if "id" in request.args:
+        # get track by id
+        trackID = int(request.args["id"])
+        try:
+            app.logger.debug(f"Request args: {request.args}")
+            app.logger.debug(f"track id {trackID}")
+            track = gpxHandler.getTrackMeta(trackID)
+
+            app.logger.debug(f"returned track {track}")
+
+            return jsonify(track), 200
+        except Exception as e:
+            app.logger.debug(f"fetching track failed with error {e}")
+            return f"error {e}", 500
+
+
+@app.route("/driver", methods=['GET', 'POST', 'PUT', 'DELETE'])
 @cross_origin()
 def handleDriverRoute():
 
-    if request.method == "GET":
-        if 'driver' in request.args:
+    match request.method:
+        case "GET":
+            if 'driver' in request.args:
 
+                try:
+                    driver = driverHandler.getDriver(int(request.args["driver"]))
+                    return driver, 200
+                except Exception as e:
+                    app.logger.debug(f"getting driver failed with error {e}")
+                    return "error" + " " + str(e), 500
+
+            else:
+
+                try:
+                    drivers = driverHandler.getDrivers()
+                    if len(drivers) > 0:
+                        return drivers, 200
+                except Exception as e:
+                    app.logger.debug(f"getting drivers failed with error {e}")
+                    return "error" + " " + str(e), 500
+        case "POST":
+            # grabbing json from request
+            data = request.get_json()
+            app.logger.debug(f"json request payload: {data}")
+
+            if "name" not in data:
+                app.logger.debug(f"no driver name was found in request")
+                return "missing name", 400
+
+            app.logger.debug(f"driver name has passed check {data["name"]}")
+
+            # handle creating vehicle
             try:
-                driver = driverHandler.getDriver(int(request.args["driver"]))
-                return driver, 200
+                app.logger.debug(f"json request name: {data["name"]}")
+                driver = driverHandler.createDriver(data["name"])
+                return jsonify({"name": driver.name, "id": driver.id}), 200
+
             except Exception as e:
-                app.logger.debug(f"getting driver failed with error {e}")
+                app.logger.debug(f"creating drivers failed with error {e}")
                 return "error" + " " + str(e), 500
-
-        else:
-
-            try:
-                drivers = driverHandler.getDrivers()
-                if len(drivers) > 0:
-                    return drivers, 200
-            except Exception as e:
-                app.logger.debug(f"getting drivers failed with error {e}")
-                return "error" + " " + str(e), 500
-
-    elif request.method == "POST":
-
-        # grabbing json from request
-        data = request.get_json()
-        app.logger.debug(f"json request payload: {data}")
-
-        if "name" not in data:
-            app.logger.debug(f"no driver name was found in request")
-            return "missing name", 400
-
-        app.logger.debug(f"driver name has passed check {data["name"]}")
-
-        # handle creating vehicle
-        try:
-            app.logger.debug(f"json request name: {data["name"]}")
-            driver = driverHandler.createDriver(data["name"])
-            return jsonify({"name": driver.name, "id": driver.id}), 200
-
-        except Exception as e:
-            app.logger.debug(f"creating drivers failed with error {e}")
-            return "error" + " " + str(e), 500
+        case "PUT":
+            pass
+        case "DELETE":
+            pass
 
 
-@app.route("/vehicle", methods=['GET', 'POST'])
+@app.route("/vehicle", methods=['GET', 'POST', 'PUT', 'DELETE'])
 @cross_origin()
 def handleVehicleRoute():
 
-    if request.method == "GET":
-        if 'vehicle' in request.args:
-            app.logger.debug(f"no vehicle id was found in request")
-            vehicle = int(request.args["vehicle"])
+    match request.method:
+        case "GET":
+            if 'vehicle' in request.args:
+                app.logger.debug(f"no vehicle id was found in request")
+                vehicle = int(request.args["vehicle"])
 
+                try:
+                    foundVehicle = vehicleHandler.getVehicle(vehicle)
+                    return foundVehicle, 200
+                except Exception as e:
+                    app.logger.debug(f"getting vehicle {vehicle} failed with error {e}")
+                    return "error" + " " + str(e), 500
+
+            else:
+
+                try:
+                    foundVehicles = vehicleHandler.getVehicles()
+                    return foundVehicles, 200
+                except Exception as e:
+                    app.logger.debug(
+                        f"getting all vehicles failed with error {e}")
+                    return "error" + " " + str(e), 500
+        case "POST":
+            data = request.get_json()
+            app.logger.debug(f"json request payload: {data}")
+
+            if "name" not in data:
+                return "missing name", 400
+
+            licenseplate = ""
+
+            if "licensePlate" not in data:
+                licenseplate = "N/A"
+            else:
+                licenseplate = data["licensePlate"]
+            name = data["name"]
+
+            # handle creating vehicle
             try:
-                foundVehicle = vehicleHandler.getVehicle(vehicle)
-                return foundVehicle, 200
+                vehicle = vehicleHandler.createVehicle(name, licenseplate)
+                return jsonify({"id": vehicle.id, "name": vehicle.name}), 200
+
             except Exception as e:
-                app.logger.debug(f"getting vehicle {vehicle} failed with error {e}")
+                app.logger.debug(f"creating vehicle with name {name} failed with error {e}")
                 return "error" + " " + str(e), 500
-
-        else:
-
-            try:
-                foundVehicles = vehicleHandler.getVehicles()
-                return foundVehicles, 200
-            except Exception as e:
-                app.logger.debug(f"getting all vehicles failed with error {e}")
-                return "error" + " " + str(e), 500
-
-    elif request.method == "POST":
-        data = request.get_json()
-        app.logger.debug(f"json request payload: {data}")
-
-        if "name" not in data:
-            return "missing name", 400
-
-        licenseplate = ""
-        
-        if "licensePlate" not in data:
-            licenseplate = "N/A"
-        else:
-            licenseplate = data["licensePlate"]
-        name = data["name"]
-
-        # handle creating vehicle
-        try:
-            vehicle = vehicleHandler.createVehicle(name, licenseplate)
-            return jsonify({"id": vehicle.id, "name": vehicle.name}), 200
-
-        except Exception as e:
-            app.logger.debug(f"creating vehicle with name {name} failed with error {e}")
-            return "error" + " " + str(e), 500
+        case "PUT":
+            pass
+        case "DELETE":
+            pass
 
 
 @app.route('/upload', methods=['POST'])
@@ -231,29 +249,29 @@ def uploadFile():
         return "no file selected", 400
 
     try:
-
         app.logger.debug(f"Received file: {file.filename}, size: {len(file.read())} bytes")
-        file.seek(0)  # Setzt den Datei-Zeiger zurück, nachdem die Größe abgerufen wurde.
-        
+
+        file.seek(0)
+
         file_path = f'./uploads/{file.filename}'
         with open(file_path, 'wb') as f:
             f.write(file.read())
-                
+
         driverID = int(request.form.get('driverID'))
         vehicleID = int(request.form.get('vehicleID'))
-                
+
         driver = driverHandler.getDriver(driverID)
         vehicle = vehicleHandler.getVehicle(vehicleID)
-        
+
         app.logger.debug(f"driver {driver.id}")
         app.logger.debug(f"vehicle {vehicle.id}")
-        
+
         if not driver or not vehicle:
             raise ValueError("Driver or vehicle not found")
-        
+
         app.logger.debug(f"attempting to parse file: {file.filename}")
         gpxHandler.parse(file.filename, driver, vehicle)
-        
+
         return "file stored succesfull", 200
     except Exception as e:
         app.logger.debug(f"storing gpx file failed with error {e}")
diff --git a/web/src/components/fileUpload.vue b/web/src/components/fileUpload.vue
index f093a61..312bb92 100644
--- a/web/src/components/fileUpload.vue
+++ b/web/src/components/fileUpload.vue
@@ -1,214 +1,244 @@
 <script lang="ts">
 import { defineComponent, SetupContext, ref, Ref } from 'vue';
 import GetLocalizedText from "../classes/language";
+import Message from "./message.vue";
 
 type driver = {
-  id: number
-  name: string
+	id: number
+	name: string
 }
 
 type vehicle = {
-  id: number
-  name: string
+	id: number
+	name: string
 }
 
 
 export default defineComponent({
-  emits: ['close', 'response'],
-  name: 'settings',
-  props: ["drivers"],
-  setup(props, { emit }: SetupContext) {
+	emits: ['close', 'response'],
+	components: { Message },
+	name: 'settings',
+	props: ["drivers"],
+	setup(props, { emit }: SetupContext) {
 
-    const file = ref<File | null>();
-    const form = ref<HTMLFormElement>();
-    const drivers: Ref<driver[]> = ref([])
-    const vehicles: Ref<vehicle[]> = ref([])
-    const selectedDriverID: Ref<number> = ref(0);
-    const selectedVehicleID: Ref<number> = ref(0);
-    const selectedDriverName: Ref<String> = ref("N/A");
-    const selectedVehicleName: Ref<String> = ref("N/A");
+		const file = ref<File | null>();
+		const form = ref<HTMLFormElement>();
+		const drivers: Ref<driver[]> = ref([])
+		const vehicles: Ref<vehicle[]> = ref([])
+		const selectedDriverID: Ref<number> = ref(0);
+		const selectedVehicleID: Ref<number> = ref(0);
+		const selectedDriverName: Ref<String> = ref("N/A");
+		const selectedVehicleName: Ref<String> = ref("N/A");
 
-    props.drivers.forEach((d: driver) => {
-      drivers.value.push({ id: d.id, name: d.name })
-    });
+		// button text
+		const buttonText: Ref<string> = ref('Upload');
 
-    // localized text
-    // if there is time left this gets moved out to its own class
-    var localizedUploadHeader: Ref<string> = ref("")
-    async function getLocalization() {
-      localizedUploadHeader.value = await GetLocalizedText("localizedUploadHeader")
-    }
+		// values for UI Information distribution
+		const messageType: Ref<string> = ref("None ");
+		const message:Ref<string> = ref("");
 
-    var fileInputChange = async ($event: Event) => {
-      const target = $event.target as HTMLInputElement;
-      if (target && target.files) {
-        file.value = target.files[0];
-        console.log(`selected file: ${file.value}`);
-      }
-    }
+		props.drivers.forEach((d: driver) => {
+			drivers.value.push({ id: d.id, name: d.name })
+		});
 
-    // handles sending webrequests to the backend
-    const getDrivers = async () => {
+		// localized text
+		// if there is time left this gets moved out to its own class
+		var localizedUploadHeader: Ref<string> = ref("")
+		async function getLocalization() {
+			localizedUploadHeader.value = await GetLocalizedText("localizedUploadHeader")
+		}
 
-      const headers: Headers = new Headers()
+		var fileInputChange = async ($event: Event) => {
+			const target = $event.target as HTMLInputElement;
+			if (target && target.files) {
+				file.value = target.files[0];
+				console.log(`selected file: ${file.value}`);
+			}
+		}
 
-      headers.set('Content-Type', 'application/json')
-      headers.set('Accept', 'application/json')
+		// handles sending webrequests to the backend
+		const getDrivers = async () => {
 
-      const request: RequestInfo = new Request("http://localhost:5000/driver", {
-        method: "GET",
-        headers: headers
-      })
+			const headers: Headers = new Headers()
 
-      var response = await fetch(request)
+			headers.set('Content-Type', 'application/json')
+			headers.set('Accept', 'application/json')
 
-      // make sure the request was successfull
-      if (response.ok) {
+			const request: RequestInfo = new Request("http://localhost:5000/driver", {
+				method: "GET",
+				headers: headers
+			})
 
-        var jsonBody = await response.json()
+			var response = await fetch(request)
 
-        // convert vehicles from json response to processable data
-        for (let i = 0; i < jsonBody.length; i++) {
-          drivers.value.push({ id: jsonBody[i]["id"], name: jsonBody[i]["name"] })
-        }
-      } else {
-        console.log(await response.text())
-      }
-    }
+			// make sure the request was successfull
+			if (response.ok) {
 
-    // handles getting all existing drivers
-    const getVehicles = async () => {
-      const headers: Headers = new Headers()
-      headers.set('Content-Type', 'application/json')
-      headers.set('Accept', 'application/json')
+				var jsonBody = await response.json()
 
-      const request: RequestInfo = new Request("http://localhost:5000/vehicle", {
-        method: "GET",
-        headers: headers
-      })
+				// convert vehicles from json response to processable data
+				for (let i = 0; i < jsonBody.length; i++) {
+					drivers.value.push({ id: jsonBody[i]["id"], name: jsonBody[i]["name"] })
+				}
+			} else {
+				console.log(await response.text())
+				messageType.value = "error";
+				message.value = `upload failed: ${await response.statusText}`;
+			}
+		}
 
-      var response = await fetch(request)
-      // make sure the request was successfull
-      if (response.ok) {
-        var jsonBody = await response.json()
+		// handles getting all existing drivers
+		const getVehicles = async () => {
+			const headers: Headers = new Headers()
+			headers.set('Content-Type', 'application/json')
+			headers.set('Accept', 'application/json')
 
-        // convert vehicles from json response to processable data
-        for (let i = 0; i < jsonBody.length; i++) {
-          vehicles.value.push({ id: jsonBody[i]["id"], name: jsonBody[i]["name"] })
-        }
-      } else {
-        console.log(await response.text())
-      }
-    }
+			const request: RequestInfo = new Request("http://localhost:5000/vehicle", {
+				method: "GET",
+				headers: headers
+			})
 
-    var save = async () => {
+			var response = await fetch(request)
+			// make sure the request was successfull
+			if (response.ok) {
+				var jsonBody = await response.json()
 
-      if (!file.value) {
-        alert("Bitte wählen Sie eine Datei aus, bevor Sie sie hochladen.");
-        return;
-      }
+				// convert vehicles from json response to processable data
+				for (let i = 0; i < jsonBody.length; i++) {
+					vehicles.value.push({ id: jsonBody[i]["id"], name: jsonBody[i]["name"] })
+				}
+			} else {
+				console.log(await response.text())
+				messageType.value = "error";
+				message.value = `upload failed: ${await response.text()}`;
+				buttonText.value = "Upload";
+			}
+		}
 
-      const formData = new FormData();
-      formData.append("file", file.value);
-      formData.append("driverID", selectedDriverID.value.toString());
-      formData.append("vehicleID", selectedVehicleID.value.toString());
+		var save = async () => {
 
-      try {
+			if (!file.value) {
+				messageType.value = "warning";
+				message.value = "please fill all values";
+				return;
+			}
 
-        console.log('Request Body:', formData);
+			const formData = new FormData();
+			formData.append("file", file.value);
+			formData.append("driverID", selectedDriverID.value.toString());
+			formData.append("vehicleID", selectedVehicleID.value.toString());
 
-        const response = await fetch('http://localhost:5000/upload', {
-          method: 'POST',
-          body: formData,
-        });
+			buttonText.value = 'Loading <span class="loading loading-spinner loading-xs"></span>';
 
-        if (response.ok) {
-          const result = await response.json();
-          emit("response", result);
-          alert("Datei erfolgreich hochgeladen!");
-        } else {
-          console.error('Fehler beim Hochladen:', response.statusText);
-          alert("Fehler beim Hochladen der Datei.");
-        }
+			try {
 
-      } catch (error) {
-        console.error("upload failed:", error);
-        alert("failed to upload file.");
-      }
+				console.log('Request Body:', formData);
 
-    }
+				const response = await fetch('http://localhost:5000/upload', {
+					method: 'POST',
+					body: formData,
+				});
 
-    getVehicles()
-    getDrivers()
-    getLocalization()
-    const close = () => {
-      emit("close");
-    };
+				if (response.ok) {
+					const result = await response.json();
+					emit("response", result);
+					messageType.value = "success";
+					message.value = `upload successfull`;
+					buttonText.value = "Upload";
+				} else {
+					console.error('upload failed: ', await response.statusText);
+					messageType.value = "error";
+					message.value = `upload failed: ${await response.statusText}`;
+					buttonText.value = "Upload";
+				}
+			} catch (error) {
+				messageType.value = "error";
+				message.value = `upload failed: ${error}`;
+				buttonText.value = "Upload";
+			}
 
-    return {
-      close,
-      fileInputChange,
-      selectedDriverID,
-      selectedVehicleID,
-      selectedDriverName,
-      selectedVehicleName,
-      save,
-      drivers,
-      vehicles,
-      localizedUploadHeader
-    };
-  },
+		}
+
+		getVehicles()
+		getDrivers()
+		getLocalization()
+		const close = () => {
+			emit("close");
+		};
+
+		return {
+			close,
+			fileInputChange,
+			selectedDriverID,
+			selectedVehicleID,
+			selectedDriverName,
+			selectedVehicleName,
+			save,
+			drivers,
+			vehicles,
+			localizedUploadHeader,
+			buttonText,
+			messageType,
+			message
+		};
+	},
 });
 </script>
 
 
 <template>
-  <div class="card bg-base-100 w-full shadow-xl" style="">
-    <div class="card-body">
+	<div class="card bg-base-100 w-full shadow-xl" style="">
+		<div class="card-body">
 
-      <h2 class="card-title">File Upload</h2>
-
-      <button class="btn btn-error close round" @click="close()">
-        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed">
-          <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
-        </svg>
-      </button>
-      <label class="form-control w-full max-w-xs">
-        <div class="label">
-          <span class="label-text">Upload a GPX File</span>
-        </div>
-        <input type="file" ref="file" v-on:change="fileInputChange($event)"
-          class="file-input file-input-bordered w-full max-w-xs" />
-      </label>
-      <div class="dropdown dropdown-bottom">
-        select Driver: <div tabindex="0" role="button" class="btn m-1"> {{ selectedDriverName }}</div>
-        <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
-          <li v-for="driver in drivers"><a v-on:click="selectedDriverID = driver.id; selectedDriverName=driver.name">{{ driver.name }}</a></li>
-        </ul>
-      </div>
-      <div class="dropdown dropdown-bottom">
-        select Vehicle: <div tabindex="0" role="button" class="btn m-1"> {{ selectedVehicleName }}</div>
-        <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
-          <li v-for="vehicle in vehicles"><a v-on:click="selectedVehicleID = vehicle.id; selectedVehicleName=vehicle.name">{{ vehicle.name }}</a></li>
-        </ul>
-      </div>
-      <button class="btn btn-success" v-on:click="save">Upload</button>
-    </div>
-  </div>
+			<h2 class="card-title">File Upload</h2>
+			<Message v-if="type=='none'" :type="messageType" :message="message" @close="message=''; messageType='None'"></Message>
+			<button class="btn btn-error close round" @click="close()">
+				<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"
+					fill="#e8eaed">
+					<path
+						d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
+				</svg>
+			</button>
+			<label class="form-control w-full max-w-xs">
+				<div class="label">
+					<span class="label-text">Upload a GPX File</span>
+				</div>
+				<input type="file" ref="file" v-on:change="fileInputChange($event)"
+					class="file-input file-input-bordered w-full max-w-xs" />
+			</label>
+			<div class="dropdown dropdown-bottom">
+				select Driver: <div tabindex="0" role="button" class="btn m-1"> {{ selectedDriverName }}</div>
+				<ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
+					<li v-for="driver in drivers"><a
+							v-on:click="selectedDriverID = driver.id; selectedDriverName = driver.name">{{ driver.name
+							}}</a></li>
+				</ul>
+			</div>
+			<div class="dropdown dropdown-bottom">
+				select Vehicle: <div tabindex="0" role="button" class="btn m-1"> {{ selectedVehicleName }}</div>
+				<ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
+					<li v-for="vehicle in vehicles"><a
+							v-on:click="selectedVehicleID = vehicle.id; selectedVehicleName = vehicle.name">{{
+								vehicle.name }}</a></li>
+				</ul>
+			</div>
+			<button class="btn btn-success" v-on:click="save" v-html="buttonText"></button>
+		</div>
+	</div>
 </template>
 
 <style scoped>
 .settingsBody {
-  position: absolute;
-  margin: 10% 10% 0 10%;
-  width: 80%;
-  z-index: 10;
+	position: absolute;
+	margin: 10% 10% 0 10%;
+	width: 80%;
+	z-index: 10;
 }
 
 .btn.close {
-  position: absolute;
-  right: 30px;
-  top: 30px;
-  margin: 0;
+	position: absolute;
+	right: 30px;
+	top: 30px;
+	margin: 0;
 }
 </style>
\ No newline at end of file
diff --git a/web/src/components/map.vue b/web/src/components/map.vue
index d808b5c..2504dc2 100644
--- a/web/src/components/map.vue
+++ b/web/src/components/map.vue
@@ -4,174 +4,203 @@ import "leaflet/dist/leaflet.css";
 import L from "leaflet";
 
 type Track = {
-  id: number
-  name: string
-  driver: string
-  vehicle: {
-    name: string
-    licenseplate: string
-  }
-  distance: number
+	id: number
+	name: string
+	driver: string
+	vehicle: {
+		name: string
+		licenseplate: string
+	}
+	distance: number
 }
 
 export default defineComponent({
-  name: 'Map',
-  props: {
-    track: {
-      type: Number,
-      default: 0,
-      require: true,
-    },
-    geoJsonData: {
-      type: Object as PropType<any>,
-      required: true
-    },
-    multiple: {
-      type: Boolean,
-      required: true,
-    },
+	name: 'Map',
+	props: {
+		track: {
+			type: Number,
+			default: 0,
+			require: true,
+		},
+		geoJsonData: {
+			type: Object as PropType<any>,
+			required: true
+		},
+		multiple: {
+			type: Boolean,
+			required: true,
+		},
 
-  },
-  setup(props) {
-    const mapDiv = ref<HTMLElement | null>(null); // ref to map container element
-    const mapInstance = ref<any>(null); // reference for the Leaflet map
-    const track: Ref<Track> = ref({ id: 0, name: "N/A", driver: "N/A", vehicle: { name: "N/A", licenseplate: "N/A" }, distance: 0.0 })
-    const multiple:Ref<boolean> = ref(props.multiple);
+	},
+	setup(props) {
+		const mapDiv = ref<HTMLElement | null>(null); // ref to map container element
+		const mapInstance = ref<any>(null); // reference for the Leaflet map
+		const track: Ref<Track> = ref({ id: 0, name: "N/A", driver: "N/A", vehicle: { name: "N/A", licenseplate: "N/A" }, distance: 0.0 })
+		const multiple: Ref<boolean> = ref(props.multiple);
 
-    const initializeMap = () => {
-      if (mapDiv.value) {
-        mapInstance.value = L.map(mapDiv.value, {
-          center: [51.4819, 7.2162],
-          zoom: 13,
-        });
+		// values for UI Information distribution
+		const messageType: Ref<string> = ref("None");
+		const message: Ref<string> = ref("");
 
-        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {}).addTo(mapInstance.value);
-      }
-    };
+		const initializeMap = () => {
+			if (mapDiv.value) {
+				mapInstance.value = L.map(mapDiv.value, {
+					center: [51.4819, 7.2162],
+					zoom: 13,
+				});
 
-    onMounted(() => {
-      console.log(props.geoJsonData)
-      initializeMap();
-    });
+				L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {}).addTo(mapInstance.value);
+			}
+		};
 
-    const clearMap = () => {
-      if (mapInstance.value) {
-        mapInstance.value.eachLayer((layer: any) => {
-          if (!(layer instanceof L.TileLayer)) {
-            mapInstance.value.removeLayer(layer);
-          }
-        });
-      }
-    };
+		onMounted(() => {
+			console.log(props.geoJsonData)
+			initializeMap();
+		});
 
-    const getTrackMeta = async (id: number) => {
+		const clearMap = () => {
+			if (mapInstance.value) {
+				mapInstance.value.eachLayer((layer: any) => {
+					if (!(layer instanceof L.TileLayer)) {
+						mapInstance.value.removeLayer(layer);
+					}
+				});
+			}
+		};
 
-      const headers: Headers = new Headers()
-      headers.set('Content-Type', 'application/json')
-      headers.set('Accept', 'application/json')
+		const getTrackMeta = async (id: number) => {
 
-      const request: RequestInfo = new Request(`http://localhost:5000/track/meta?id=${id}`, {
-        method: "GET",
-        headers: headers
-      })
+			const headers: Headers = new Headers()
+			headers.set('Content-Type', 'application/json')
+			headers.set('Accept', 'application/json')
 
-      var response = await fetch(request)
-      // make sure the request was successfull
-      if (response.ok) {
-        var jsonBody = await response.json()
-        console.log(jsonBody)
-        track.value = {
-          id: jsonBody["id"],
-          name: jsonBody["name"],
-          driver: jsonBody["driver"]["name"],
-          vehicle: {
-            name: jsonBody["vehicle"]["name"],
-            licenseplate: jsonBody["vehicle"]["licenseplate"] ?? "N/A"
-          },
-          distance: jsonBody["distance"]
-        }
-        console.log(track.value)
-      }
-    }
+			const request: RequestInfo = new Request(`http://localhost:5000/track/meta?id=${id}`, {
+				method: "GET",
+				headers: headers
+			})
 
-    watch(() => props.geoJsonData, (newData) => {
-      if (newData) {
-        console.log("loading GeoJSON:", newData);
+			var response = await fetch(request)
+			// make sure the request was successfull
+			if (response.ok) {
+				var jsonBody = await response.json()
+				console.log(jsonBody)
+				track.value = {
+					id: jsonBody["id"],
+					name: jsonBody["name"],
+					driver: jsonBody["driver"]["name"],
+					vehicle: {
+						name: jsonBody["vehicle"]["name"],
+						licenseplate: jsonBody["vehicle"]["licenseplate"] ?? "N/A"
+					},
+					distance: jsonBody["distance"]
+				}
+				console.log(track.value)
+			} else {
+				messageType.value = "error";
+				message.value = `"failed to load track meta with error: ${await response.statusText}`;
+			}
+		}
 
-        if (mapInstance.value) {
-          if (!props.multiple){
-            clearMap();
-          }
+		watch(() => props.geoJsonData, (newData) => {
+			if (newData) {
+				console.log("loading GeoJSON:", newData);
 
-          var geoJsonLayer = L.geoJSON(newData).addTo(mapInstance.value);
+				if (mapInstance.value) {
+					if (!props.multiple) {
+						clearMap();
+					}
 
-          // pull meta data for for a single track 
-          // function wont be called if multiple tracks are loaded
-          if (!props.multiple) {
-            getTrackMeta(props.track);
-          }
+					var geoJsonLayer = L.geoJSON(newData).addTo(mapInstance.value);
 
-          // move camera view according to loaded track
-          const bounds = geoJsonLayer.getBounds();
-          mapInstance.value.fitBounds(bounds);
-        } else {
-          console.error("Map or GeoJSON data not available.");
-        }
-      }
-    });
+					// pull meta data for for a single track 
+					// function wont be called if multiple tracks are loaded
+					if (!props.multiple) {
+						getTrackMeta(props.track);
+					}
 
-    return {
-      mapDiv,
-      multiple,
-      track
-    };
-  },
+					// move camera view according to loaded track
+					const bounds = geoJsonLayer.getBounds();
+					mapInstance.value.fitBounds(bounds);
+				} else {
+					console.error("Map or GeoJSON data not available.");
+					messageType.value = "error";
+					message.value = `"Map or GeoJSON data not available.`;
+				}
+			}
+		});
+
+		return {
+			mapDiv,
+			multiple,
+			track,
+			message,
+			messageType
+		};
+	},
 });
 </script>
 
+
 <template>
-  <div ref="mapDiv" style="width: 70vw; height: 75vh; overflow: hidden;"></div>
-  <br>
-  <div class="overflow-x-auto" style="width: 70vw;" v-if="!multiple">
-    <table class="table">
-      <!-- head -->
-      <thead>
-        <tr>
-          <th>track name</th>
-          <th>driver</th>
-          <th>vehicle</th>
-          <th>License Plate</th>
-          <th>distance</th>
-        </tr>
-      </thead>
-      <tbody>
-        <!-- row 1 -->
-        <tr class="bg-base-200">
-          <th>{{ track.name }}</th>
-          <td>{{ track.driver }}</td>
-          <td>{{ track.vehicle.name }}</td>
-          <td>{{ track.vehicle.licenseplate }}</td>
-          <td>{{ Math.round((track.distance / 1000) * 100) / 100 }}KM</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+	<Message v-if="type == 'none'" :type="messageType" :message="message" @close="message = ''; messageType = 'None'"></Message>
+	<div ref="mapDiv" style="width: 70vw; height: 75vh; overflow: hidden;"></div>
+	<br>
+	<div class="overflow-x-auto" style="width: 70vw;" v-if="!multiple">
+		<table class="table">
+			<!-- head -->
+			<thead>
+				<tr>
+					<th>track name</th>
+					<th>driver</th>
+					<th>vehicle</th>
+					<th>License Plate</th>
+					<th>distance</th>
+				</tr>
+			</thead>
+			<tbody>
+				<!-- row 1 -->
+				<tr v-if="track.id == 0" class="bg-base-200">
+					<th>{{ track.name }}</th>
+					<td>
+						<div class="skeleton h-4 w-full"></div>
+					</td>
+					<td>
+						<div class="skeleton h-4 w-full"></div>
+					</td>
+					<td>
+						<div class="skeleton h-4 w-full"></div>
+					</td>
+					<td>
+						<div class="skeleton h-4 w-full"></div>
+					</td>
+				</tr>
+
+				<tr v-if="track.id != 0" class="bg-base-200">
+					<th>{{ track.name }}</th>
+					<td>{{ track.driver }}</td>
+					<td>{{ track.vehicle.name }}</td>
+					<td>{{ track.vehicle.licenseplate }}</td>
+					<td>{{ Math.round((track.distance / 1000) * 100) / 100 }}KM</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
 </template>
 
 <style scoped>
 #mapDiv {
-  width: 100vw;
-  height: 70vh;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
+	width: 100vw;
+	height: 70vh;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
 }
 
 html,
 body {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  width: 100%;
+	margin: 0;
+	padding: 0;
+	height: 100%;
+	width: 100%;
 }
 </style>
diff --git a/web/src/components/message.vue b/web/src/components/message.vue
new file mode 100644
index 0000000..7d0230d
--- /dev/null
+++ b/web/src/components/message.vue
@@ -0,0 +1,46 @@
+<script lang="ts">
+import { defineComponent, SetupContext, Ref, ref } from 'vue';
+
+export default defineComponent({
+    name: 'Navbar',
+    emits: ['close'],
+    props:["type", "message"],
+    setup(props, { emit }: SetupContext) {
+
+        const type:Ref<string> = ref(props.type);
+        const message:Ref<string> = ref(props.message);
+
+        const close = () => {
+            emit("close");
+        };
+
+        return {
+            close,
+            type,
+            message,
+        };
+    },
+});
+</script>
+
+
+<template>
+    <div v-if="type==='info'" role="alert" class="alert alert-info alert-soft">
+        <span>{{ message }}</span>
+        <button class="btn btn-soft btn-info" v-on:click="close">Close</button>
+    </div>
+    <div v-if="type==='success'" role="alert" class="alert alert-success alert-soft">
+        <span>{{ message }}</span>
+        <button class="btn btn-soft btn-success" v-on:click="close">Close</button>
+    </div>
+    <div v-if="type==='warning'" role="alert" class="alert alert-warning alert-soft">
+        <span>{{ message }}</span>
+        <button class="btn btn-soft btn-warning" v-on:click="close">Close</button>
+    </div>
+    <div v-if="type==='error'" role="alert" class="alert error alert-soft">
+        <span>{{ message }}</span>
+        <button class="btn btn-soft btn-error" v-on:click="close">Close</button>
+    </div>
+</template>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/web/src/components/pointcloud.vue b/web/src/components/pointcloud.vue
index 9d4fdbc..b3f1c5a 100644
--- a/web/src/components/pointcloud.vue
+++ b/web/src/components/pointcloud.vue
@@ -13,7 +13,7 @@ type Route = {
   name: string;
   id: number;
   time: Date;
-  driver: {id:number, name:string}
+  driver: { id: number, name: string }
 };
 
 
@@ -21,12 +21,12 @@ export default defineComponent({
   emits: ['close', 'response'],
   name: 'settings',
   props: {
-  routes: {
-    type: Array as () => Route[],
-    default: () => [], // Standard: leeres Array
-    required: true,
+    routes: {
+      type: Array as () => Route[],
+      default: () => [], // Standard: leeres Array
+      required: true,
+    },
   },
-},
   setup(props, { emit }: SetupContext) {
     console.log(props)
     if (!props.routes || props.routes.length <= 0) alert("no points to show");
@@ -37,8 +37,12 @@ export default defineComponent({
     const router = useRouter();
     const legend = ref<Record<string, string>>({});
     const driverColors = ref<Record<string, string>>({});
-    var drivers:driver[] = [];
-    const points:Route[] = props.routes;
+    var drivers: driver[] = [];
+    const points: Route[] = props.routes;
+
+    // values for UI Information distribution
+    const messageType: Ref<string> = ref("None");
+    const message: Ref<string> = ref("");
 
     // handles sending webrequests to the backend
     const getDrivers = async () => {
@@ -72,18 +76,20 @@ export default defineComponent({
         }
       } else {
         console.log(await response.text())
+        messageType.value = "error";
+        message.value = `failed to get drivers with error: ${await response.statusText}`;
       }
     }
 
     // assigns a driver to a point based on the points driver id
-    const assignDriverToPoint = (points:Route[]) => {
+    const assignDriverToPoint = (points: Route[]) => {
       return points.reduce((acc, point) => {
-        
-          const driverId = point.driver.id;
-          console.log(`driverid: ${driverId}`)
-          acc[driverId] = acc[driverId] || [];
-          acc[driverId].push(point);
-          return acc;
+
+        const driverId = point.driver.id;
+        console.log(`driverid: ${driverId}`)
+        acc[driverId] = acc[driverId] || [];
+        acc[driverId].push(point);
+        return acc;
       }, {} as Record<number, Route[]>);
     }
 
@@ -97,13 +103,13 @@ export default defineComponent({
       console.log(`routes: ${props.routes}`)
 
       const scene = new THREE.Scene();
-      const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
+      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
       const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.value, antialias: true, });
 
       renderer.setSize(window.innerWidth, window.innerHeight);
       const controls = new OrbitControls(camera, renderer.domElement);
       const raycaster = new THREE.Raycaster();
-      const mouse = new THREE.Vector2();      
+      const mouse = new THREE.Vector2();
 
       const groupedPoints = assignDriverToPoint(points)
 
@@ -112,11 +118,9 @@ export default defineComponent({
       const colors: number[] = [];
 
       const totalPoints = points.length;
-      const offsetXStep = 2; // Wir setzen den Abstand pro Gruppe
+      const offsetXStep = 2;
 
       let offsetX = 0;
-
-      // Berechnungen für den Mittelpunkt der Punktwolke
       let sumX = 0, sumY = 0, sumZ = 0;
 
       const getColorForDriver = (driverId: number) => {
@@ -128,7 +132,12 @@ export default defineComponent({
         return color;
       };
 
-      // complicated math things
+      /**
+       * complicated math things (i am scared of this part)
+       * 
+       * calculates a points position and ensures that all points grouped by the same driver are placed together
+       * a point is a uploaded track and during this step it gets applied its color material which was generated whiles getting drivers
+       */
       Object.entries(groupedPoints).forEach(([driverIdStr, driverPoints], index) => {
         const driverId = parseInt(driverIdStr, 10);
         console.log("Driver Colors:", driverColors.value[driverIdStr]);
@@ -137,7 +146,7 @@ export default defineComponent({
           console.error(`Missing color for Driver ID: ${driverId}`);
         }
 
-        const color =  new THREE.Color(driverColors.value[driverId]);
+        const color = new THREE.Color(driverColors.value[driverId]);
         console.log(`Color for Driver ${driverId}:`, driverColors.value[driverId]);
 
         // calculate offset base on driverid
@@ -158,8 +167,8 @@ export default defineComponent({
           colors.push(color.r, color.g, color.b);
         });
       });
-      
-      // Mittelpunkt der Punktwolke berechnen
+
+      // calculate clouds centerpoint
       const centerX = sumX / totalPoints;
       const centerY = sumY / totalPoints;
       const centerZ = sumZ / totalPoints;
@@ -194,7 +203,10 @@ export default defineComponent({
       }
       animate();
 
-      // handles mouse actions
+      /**
+       * handles mouse events and moves 3D space
+       * @param event the event triggered when the mouse is moved inside the canvas
+       */
       const onMouseMove = (event: MouseEvent) => {
         if (!canvasRef.value || !tooltipRef.value) return;
 
@@ -211,22 +223,24 @@ export default defineComponent({
 
           tooltipRef.value.style.display = "block";
 
-          // 3D-Koordinaten des Punktes holen
+
+          /**
+           * getting coordinates and calculating 2D coordinates from them
+           * this is done for the tooltip to be positions at the cursor
+           */
           const positionArray = pointCloud.geometry.attributes.position.array;
           const x = positionArray[intersectIndex * 3];
           const y = positionArray[intersectIndex * 3 + 1];
           const z = positionArray[intersectIndex * 3 + 2];
 
-          // 3D-Koordinaten in 2D Bildschirmkoordinaten umrechnen
           const screenPosition = new THREE.Vector3(x, y, z);
           screenPosition.project(camera);
 
-          // Umrechnung von NDC (Normalized Device Coordinates) zu Pixeln
           const tooltipX = (screenPosition.x * 0.5 + 0.5) * window.innerWidth;
           const tooltipY = (screenPosition.y * -0.5 + 0.5) * window.innerHeight;
 
-          tooltipRef.value.style.left = `${tooltipX + 10}px`; // 10px Abstand zum Punkt
-          tooltipRef.value.style.top = `${tooltipY + 10}px`;  // 10px Abstand zum Punkt
+          tooltipRef.value.style.left = `${tooltipX + 10}px`;
+          tooltipRef.value.style.top = `${tooltipY + 10}px`;
 
           tooltipText.value = `${point.driver.name}: ${point.name} (${point.time.toLocaleString()})`;
         } else {
@@ -250,6 +264,8 @@ export default defineComponent({
       tooltipText,
       legend,
       driverColors,
+      message,
+      messageType
     };
   },
 });
@@ -257,6 +273,7 @@ export default defineComponent({
 
 
 <template>
+  <Message v-if="type == 'none'" :type="messageType" :message="message" @close="message = ''; messageType = 'None'"></Message>
   <div class="pointcloud-container relative">
     <canvas ref="canvasRef"></canvas>
     <div ref="tooltipRef" class="tooltip hidden fixed z-50 px-2 py-1 bg-base-200 text-base-content rounded">
@@ -264,7 +281,7 @@ export default defineComponent({
     </div>
     <!-- Legende -->
     <div class="legend absolute top-10 left-10 bg-base-200 p-4 rounded shadow-lg z-50">
-      <h3 class="font-bold mb-2">Fahrer Legende</h3>
+      <h3 class="font-bold mb-2">Drivers</h3>
       <ul>
         <li v-for="(driverName, driverId) in legend" :key="driverId" class="flex items-center mb-1">
           <div class="w-4 h-4" :style="{ backgroundColor: driverColors[driverId] }"></div>
@@ -276,52 +293,52 @@ export default defineComponent({
 </template>
 
 <style scoped>
-  .pointcloud-container {
-    width: 100%;
-    height: calc(90vh);
-    overflow: hidden;
-  }
+.pointcloud-container {
+  width: 100%;
+  height: calc(90vh);
+  overflow: hidden;
+}
 
-  canvas {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
+canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
 
-  .tooltip {
-    display: none;
-    position: absolute;
-    z-index: 50;
-    padding: 2px 8px;
-    background-color: rgba(0, 0, 0, 0.7);
-    color: white;
-    border-radius: 4px;
-    pointer-events: none;
-  }
+.tooltip {
+  display: none;
+  position: absolute;
+  z-index: 50;
+  padding: 2px 8px;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+  border-radius: 4px;
+  pointer-events: none;
+}
 
-  .legend {
-    width: auto;
-    max-width: 250px;
-    background-color: rgba(0, 0, 0, 0.7);
-    color: white;
-    padding: 10px;
-    border-radius: 8px;
-    font-size: 14px;
-  }
+.legend {
+  width: auto;
+  max-width: 250px;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 10px;
+  border-radius: 8px;
+  font-size: 14px;
+}
 
-  .legend ul {
-    padding: 0;
-    list-style-type: none;
-  }
+.legend ul {
+  padding: 0;
+  list-style-type: none;
+}
 
-  .legend li {
-    display: flex;
-    align-items: center;
-  }
+.legend li {
+  display: flex;
+  align-items: center;
+}
 
-  .legend .color-box {
-    width: 15px;
-    height: 15px;
-    margin-right: 10px;
-  }
+.legend .color-box {
+  width: 15px;
+  height: 15px;
+  margin-right: 10px;
+}
 </style>
\ No newline at end of file
diff --git a/web/src/views/driver.vue b/web/src/views/driver.vue
index 0e06653..f146a83 100644
--- a/web/src/views/driver.vue
+++ b/web/src/views/driver.vue
@@ -13,6 +13,11 @@ export default defineComponent({
     const driverName: Ref<string> = ref("")
     const driverList: Ref<driver[]> = ref([])
 
+    // values for UI Information distribution
+    const messageType: Ref<string> = ref("");
+    const message: Ref<string> = ref("");
+
+
     // handles sending webrequests to the backend
     const getDrivers = async () => {
 
@@ -39,6 +44,8 @@ export default defineComponent({
         }
       } else {
         console.log(await response.text())
+        messageType.value = "error";
+				message.value = `upload failed: ${response.text()}`;
       }
     }
 
@@ -64,6 +71,8 @@ export default defineComponent({
         driverList.value.push({ id: jsonBody["body"], name: driverName.value })
       } else {
         console.log(await response.text())
+        messageType.value = "error";
+				message.value = `upload failed: ${response.text()}`;
       }
     }
 
@@ -71,7 +80,9 @@ export default defineComponent({
     return {
       createDriver,
       driverName,
-      driverList
+      driverList,
+      message,
+      messageType
     };
   },
 });
@@ -79,6 +90,7 @@ export default defineComponent({
 
 
 <template>
+  <Message v-if="type == 'none'" :type="messageType" :message="message" @close="message = ''; messageType = 'None'"></Message>
   <div class="overflow-x-auto">
     <table class="table">
       <!-- head -->
@@ -92,9 +104,18 @@ export default defineComponent({
       <tbody>
         <tr>
           <td></td>
-          <td><input type="text" placeholder="Driver Name" class="input input-bordered w-full max-w-xs"
-              v-model="driverName" /></td>
-          <td><a class="btn btn-success" v-on:click="createDriver">Create Driver</a></td>
+          <td><input type="text" placeholder="Driver Name" class="input input-bordered w-full" v-model="driverName" />
+          </td>
+          <td><a class="btn btn-success w-full" v-on:click="createDriver">Create Driver</a></td>
+        </tr>
+        <tr v-if="driverList.length == 0">
+          <th>
+            <div class="skeleton h-4 w-full"></div>
+          </th>
+          <td>
+            <div class="skeleton h-4 w-full"></div>
+          </td>
+          <td><a class="btn btn-error w-full" v-on:click="createVehicle">Delete Vehicle</a></td>
         </tr>
         <tr v-for="driver in driverList">
           <th>{{ driver.id }}</th>
diff --git a/web/src/views/route.vue b/web/src/views/route.vue
index e457eee..2b9dbf0 100644
--- a/web/src/views/route.vue
+++ b/web/src/views/route.vue
@@ -5,6 +5,7 @@ import VueDatePicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css'
 import Map from '../components/map.vue';
 import FileUpload from '../components/fileUpload.vue';
+import Message from '../components/message.vue';
 
 type DriverType = {
   id: number
@@ -37,7 +38,7 @@ type GeoJSON = {
 
 export default defineComponent({
   name: 'map',
-  components: { PointCloud, VueDatePicker, Map, FileUpload },
+  components: { PointCloud, VueDatePicker, Map, FileUpload, Message },
   setup(_, { emit }: SetupContext) {
     const showMap: Ref<boolean> = ref(false);
     const showCloud: Ref<boolean> = ref(false);
@@ -52,6 +53,10 @@ export default defineComponent({
     const multipleTracks: Ref<Boolean> = ref(false);
     const trackid: Ref<number> = ref(0)
 
+    // values for UI Information distribution
+    const messageType: Ref<string> = ref("");
+    const message: Ref<string> = ref("");
+
     const loadTrack = async (id: number) => {
       showMap.value = true;
       showCloud.value = false;
@@ -75,12 +80,15 @@ export default defineComponent({
         if (response.ok) {
           // Wenn die Antwort OK ist, die Daten verarbeiten
           mapData.value = await response.json();
-          console.log("GeoJSON-Daten erfolgreich geladen", mapData.value);
         } else {
           console.log(await response.text());
+          messageType.value = "error";
+          message.value = `loading tracks failed: ${await response.text()}`;
         }
       } catch (error) {
-        console.error("Fehler beim Laden der Track-Daten:", error);
+        console.error("loading tracks failed with error:", error);
+        messageType.value = "error";
+				message.value = `loading tracks failed with error: ${error}`;
       }
     };
 
@@ -106,6 +114,8 @@ export default defineComponent({
         }
       } else {
         console.log(await response.text())
+        messageType.value = "error";
+				message.value = `loading track list failed with error: ${error}`;
       }
     }
 
@@ -121,7 +131,8 @@ export default defineComponent({
       multipleTracks.value = false;
 
       if (startSearchDate.value == null || endSearchDate.value == null) {
-        alert("please give all required infos")
+        messageType.value = "error";
+				message.value = "please give all required infos";
         return;
       }
 
@@ -155,6 +166,8 @@ export default defineComponent({
 
       } else {
         console.log(await response.text())
+        messageType.value = "error";
+				message.value = `searching tracks failed: ${await response.text()}`;
       }
 
       if (renderSearchOnMap.value) {
@@ -188,6 +201,8 @@ export default defineComponent({
       showUpload,
       multipleTracks,
       trackid,
+      message,
+      messageType
     };
   },
 });
@@ -195,6 +210,7 @@ export default defineComponent({
 
 
 <template>
+  <Message v-if="type == 'none'" :type="messageType" :message="message" @close="message = ''; messageType = 'None'"></Message>
   <FileUpload v-if="showUpload" @close="showUpload = false;" :drivers="[]"
     style="position:absolute; top: 30VH; width: 80%;"></FileUpload>
   <div class="grid grid-flow-col auto-cols-max gap-4">
@@ -207,6 +223,9 @@ export default defineComponent({
         <li>
           <div class="divider"></div>
         </li>
+        <li v-if="tracks.length == 0">
+          <div class="skeleton h-4 w-full"></div>
+        </li>
         <li v-for="track in tracks"> <a v-on:click="loadTrack(track.id); multipleTracks = false;"> {{ track.name }} </a>
         </li>
       </ul>
@@ -217,11 +236,11 @@ export default defineComponent({
     <div v-if="!showMap && !showCloud && search" style="margin-left: 20%; display:flex;">
       <div>
         start time
-        <input class="datepicker" type="date" id="birthday" name="birthday" v-model="startSearchDate">
+        <input class="datepicker" type="date" id="startdate" name="startdate" v-model="startSearchDate">
       </div>
       <div style="margin-left: 5%;">
         end time
-        <input class="datepicker" type="date" id="birthday" name="birthday" v-model="endSearchDate">
+        <input class="datepicker" type="date" id="enddate" name="enddate" v-model="endSearchDate">
       </div>
       <div style="margin-left: 5%;">
         show on map:
diff --git a/web/src/views/vehicle.vue b/web/src/views/vehicle.vue
index 5ba82d2..9700326 100644
--- a/web/src/views/vehicle.vue
+++ b/web/src/views/vehicle.vue
@@ -1,9 +1,9 @@
 <script lang="ts">
-import {defineComponent, Ref, ref, SetupContext} from 'vue';
+import { defineComponent, Ref, ref, SetupContext } from 'vue';
 
 type vehicle = {
-  id:number
-  name:string
+  id: number
+  name: string
   licenseplate: string
 }
 
@@ -11,9 +11,13 @@ export default defineComponent({
   name: 'map',
   setup(_, { emit }: SetupContext) {
 
-    const vehicleName:Ref<string> = ref("")
-    const licensePlate:Ref<string> = ref("")
-    const vehicleList:Ref<vehicle[]> = ref([])
+    const vehicleName: Ref<string> = ref("")
+    const licensePlate: Ref<string> = ref("")
+    const vehicleList: Ref<vehicle[]> = ref([])
+
+    // values for UI Information distribution
+    const messageType: Ref<string> = ref("");
+    const message: Ref<string> = ref("");
 
     // handles getting all existing drivers
     const getVehicles = async () => {
@@ -22,27 +26,29 @@ export default defineComponent({
       headers.set('Accept', 'application/json')
 
       const request: RequestInfo = new Request("http://localhost:5000/vehicle", {
-        method:"GET", 
-        headers:headers
+        method: "GET",
+        headers: headers
       })
 
       var response = await fetch(request)
       // make sure the request was successfull
-      if (response.ok){
+      if (response.ok) {
         var jsonBody = await response.json()
 
         // convert vehicles from json response to processable data
-        for(let i = 0; i < jsonBody.length; i++) {
+        for (let i = 0; i < jsonBody.length; i++) {
           let plate = "N/A"
           let vehicle = jsonBody[i]
           if (vehicle["licensePlate"] != undefined) {
             plate = vehicle["licensePlate"];
           }
 
-          vehicleList.value.push({id: vehicle["id"], name: vehicle["name"], licenseplate: plate})
+          vehicleList.value.push({ id: vehicle["id"], name: vehicle["name"], licenseplate: plate })
         }
       } else {
         console.log(await response.text())
+        messageType.value = "error";
+				message.value = `loading vehicles failed with error: ${await response.text()}`;
       }
     }
 
@@ -56,27 +62,31 @@ export default defineComponent({
       const requestBody = JSON.stringify({ name: vehicleName.value, licensePlate: licensePlate.value });
 
       const request: RequestInfo = new Request("http://localhost:5000/vehicle", {
-        method:"POST", 
-        headers:headers,
+        method: "POST",
+        headers: headers,
         body: requestBody
       })
 
       var response = await fetch(request)
       // make sure the request was successfull
-      if (response.ok){
+      if (response.ok) {
         var jsonBody = await response.json()
-        vehicleList.value.push({id: jsonBody["body"], name: vehicleName.value, licenseplate: "N/A"})
+        vehicleList.value.push({ id: jsonBody["body"], name: vehicleName.value, licenseplate: "N/A" })
       } else {
         console.log(await response.text())
+        messageType.value = "error";
+				message.value = `creating vehicle failed with error: ${error}`;
       }
     }
 
     getVehicles()
-    return { 
+    return {
       createVehicle,
       vehicleName,
       licensePlate,
-      vehicleList
+      vehicleList,
+      message,
+      messageType
     };
   },
 });
@@ -84,6 +94,7 @@ export default defineComponent({
 
 
 <template>
+  <Message v-if="type == 'none'" :type="messageType" :message="message" @close="message = ''; messageType = 'None'"></Message>
   <div class="overflow-x-auto">
     <table class="table">
       <!-- head -->
@@ -97,20 +108,34 @@ export default defineComponent({
       <tbody>
         <tr>
           <td></td>
-          <td><input type="text" placeholder="Vehicle Name" class="input input-bordered w-full max-w-xs" v-model="vehicleName"/></td>
-          <td><input type="text" placeholder="License Plate" class="input input-bordered w-full max-w-xs" v-model="licensePlate"/></td>
-          <td><a class="btn btn-success" v-on:click="createVehicle">Create Vehicle</a></td>
+          <td><input type="text" placeholder="Vehicle Name" class="input input-bordered w-full "
+              v-model="vehicleName" /></td>
+          <td><input type="text" placeholder="License Plate" class="input input-bordered w-full "
+              v-model="licensePlate" /></td>
+          <td><a class="btn btn-success w-full" v-on:click="createVehicle">Create Vehicle</a></td>
+        </tr>
+        <tr v-if="vehicleList.length == 0">
+          <th>
+            <div class="skeleton h-4 w-full"></div>
+          </th>
+          <td>
+            <div class="skeleton h-4 w-full"></div>
+          </td>
+          <td>
+            <div class="skeleton h-4 w-full"></div>
+          </td>
+          <td><a class="btn btn-error w-full" v-on:click="createVehicle">Delete Vehicle</a></td>
+          <td></td>
         </tr>
         <tr v-for="vehicle in vehicleList">
           <th>{{ vehicle.id }}</th>
           <td>{{ vehicle.name }}</td>
           <td>{{ vehicle.licenseplate }}</td>
-          <td></td>
+          <td><a class="btn btn-error w-full" v-on:click="createVehicle">Delete Vehicle</a></td>
         </tr>
       </tbody>
     </table>
   </div>
 </template>
 
-<style scoped>
-</style>
\ No newline at end of file
+<style scoped></style>
\ No newline at end of file
diff --git a/web/tsconfig.tsbuildinfo b/web/tsconfig.tsbuildinfo
index 27d4e45..cc9cf46 100644
--- a/web/tsconfig.tsbuildinfo
+++ b/web/tsconfig.tsbuildinfo
@@ -1 +1 @@
-{"root":["./theme-manager.config.ts","./vite.config.ts","./src/app.vue","./src/leatflet.d.ts","./src/main.ts","./src/vite-env.d.ts","./src/classes/debugger.ts","./src/classes/language.ts","./src/components/settings.vue","./src/components/cookieprompt.vue","./src/components/fileupload.vue","./src/components/map.vue","./src/components/navbar.vue","./src/components/pointcloud.vue","./src/views/driver.vue","./src/views/home.vue","./src/views/login.vue","./src/views/register.vue","./src/views/route.vue","./src/views/settings.vue","./src/views/vehicle.vue"],"version":"5.6.2"}
\ No newline at end of file
+{"root":["./theme-manager.config.ts","./vite.config.ts","./src/app.vue","./src/leatflet.d.ts","./src/main.ts","./src/vite-env.d.ts","./src/classes/debugger.ts","./src/classes/language.ts","./src/components/settings.vue","./src/components/cookieprompt.vue","./src/components/fileupload.vue","./src/components/map.vue","./src/components/navbar.vue","./src/components/pointcloud.vue","./src/views/driver.vue","./src/views/home.vue","./src/views/login.vue","./src/views/register.vue","./src/views/route.vue","./src/views/settings.vue","./src/views/vehicle.vue"],"errors":true,"version":"5.6.2"}
\ No newline at end of file