diff --git a/src/components/Tracks.svelte b/src/components/Tracks.svelte
index 01045aef..ff36b814 100644
--- a/src/components/Tracks.svelte
+++ b/src/components/Tracks.svelte
@@ -4,14 +4,21 @@
   import { TrackService } from "@odit/lfk-client-js";
   const tracks_promise = TrackService.trackControllerGetAll();
   import { getlang } from "./datatable_i18n";
-  import { Grid } from "gridjs";
+  import { Grid, html } from "gridjs";
   import "gridjs/dist/theme/mermaid.css";
   //
   let table;
   tracks_promise.then((data) => {
     let tabledata = [];
     data.forEach((track) => {
-      tabledata.push([track.name, track.distance, "TODO: edit,delete"]);
+      tabledata.push([
+        track.name,
+        track.distance,
+        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>
+      `),
+      ]);
     });
     const datatable = new Grid({
       columns: [$_("track-name"), $_("track-length-in-m"), "Action"],