diff --git a/src/components/Tracks.svelte b/src/components/Tracks.svelte
index ccacf79b..ca09781c 100644
--- a/src/components/Tracks.svelte
+++ b/src/components/Tracks.svelte
@@ -23,8 +23,25 @@
         renderdatatable();
       }, 100);
     });
-    table_visible = true;
+    if (trackscache.length > 0) {
+      table_visible = true;
+    }
   });
+  window.track__delete_handler = () => {
+    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
+    // const track = trackscache.find((e) => e.id == trackid);
+    // console.log(track);
+    // -----
+    // TODO: modal or double click confirmation?
+    TrackService.trackControllerRemove(trackid)
+      .then((resp) => {
+        const newStoreVal = trackscache.filter((obj) => obj.id !== trackid);
+        tracksstore.set(newStoreVal);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
   function renderdatatable() {
     let tabledata = [];
     trackscache.forEach((track) => {
@@ -34,31 +51,33 @@
         track.minimumLapTime || 0,
         html(`
         <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white sm:w-auto sm:text-sm">Edit</button>
-        <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm">Delete</button>
+        <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__delete_handler()">Delete</button>
       `),
       ]);
     });
-    if (datatable_inited === false) {
-      datatable = new Grid({
-        columns: [
-          $_("track-name"),
-          $_("track-length-in-m"),
-          $_("minimum-lap-time-in-s"),
-          $_("action"),
-        ],
-        language: getlang($json("datatable")),
-        sort: true,
-        search: { enabled: true },
-        data: tabledata,
-        pagination: {
-          enabled: true,
-          limit: 25,
-          summary: false,
-        },
-      }).render(table);
-      datatable_inited = true;
-    } else {
-      datatable.updateConfig({ data: tabledata }).forceRender();
+    if (trackscache.length > 0) {
+      if (datatable_inited === false) {
+        datatable = new Grid({
+          columns: [
+            $_("track-name"),
+            $_("track-length-in-m"),
+            $_("minimum-lap-time-in-s"),
+            $_("action"),
+          ],
+          language: getlang($json("datatable")),
+          sort: true,
+          search: { enabled: true },
+          data: tabledata,
+          pagination: {
+            enabled: true,
+            limit: 25,
+            summary: false,
+          },
+        }).render(table);
+        datatable_inited = true;
+      } else {
+        datatable.updateConfig({ data: tabledata }).forceRender();
+      }
     }
   }
   let table_visible = false;