diff --git a/src/components/Tracks.svelte b/src/components/Tracks.svelte
index 46d549b3..34014f33 100644
--- a/src/components/Tracks.svelte
+++ b/src/components/Tracks.svelte
@@ -22,6 +22,34 @@
   tracks_promise.then((data) => {
     tracksstore.set(data);
   });
+  window.track__edit_cancel = () => {
+    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
+    //
+    const elem = document.querySelector(
+      `[data-id="triggered_table_actions_${trackid}"]`
+    ).parentNode.parentNode.parentNode;
+    console.log(elem.childNodes[1].childNodes[0].value);
+    //
+    elem.childNodes[0].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[0].childNodes[0].value}</td>`;
+    elem.childNodes[1].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[1].childNodes[0].value}</td>`;
+    elem.childNodes[2].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[2].childNodes[0].value}</td>`;
+    //
+    document
+      .querySelector(`[data-id="default_table_actions_${trackid}"]`)
+      .classList.remove("hidden");
+    document
+      .querySelector(`[data-id="triggered_table_actions_${trackid}"]`)
+      .classList.add("hidden");
+  };
+  window.track__edit_save = () => {
+    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
+    document
+      .querySelector(`[data-id="default_table_actions_${trackid}"]`)
+      .classList.remove("hidden");
+    document
+      .querySelector(`[data-id="triggered_table_actions_${trackid}"]`)
+      .classList.add("hidden");
+  };
   window.track__delete_handler = () => {
     const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
     // TODO: modal or double click confirmation?
@@ -35,6 +63,25 @@
         console.log(err);
       });
   };
+  window.track__edit_handler = () => {
+    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
+    document
+      .querySelector(`[data-id="default_table_actions_${trackid}"]`)
+      .classList.add("hidden");
+    document
+      .querySelector(`[data-id="triggered_table_actions_${trackid}"]`)
+      .classList.remove("hidden");
+    const elem = document.querySelector(
+      `[data-id="triggered_table_actions_${trackid}"]`
+    ).parentNode.parentNode.parentNode;
+    const trackname = elem.childNodes[0].textContent;
+    const tracklength = parseInt(elem.childNodes[1].textContent);
+    const trackmintime = parseInt(elem.childNodes[2].textContent);
+    elem.childNodes[0].innerHTML = `<input type="text" value="${trackname}" name="trackname" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">`;
+    elem.childNodes[1].innerHTML = `<input type="text" value="${tracklength}" name="tracklength" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">`;
+    elem.childNodes[2].innerHTML = `<input type="text" value="${trackmintime}" name="trackmintime" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">`;
+  };
+  //
   function renderdatatable() {
     let tabledata = [];
     trackscache.forEach((track) => {
@@ -43,8 +90,14 @@
         track.distance,
         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" data-trackid="${track.id}" onclick="track__delete_handler()">Delete</button>
+        <div class="hidden" data-id="triggered_table_actions_${track.id}">
+          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-400 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__edit_save()">Save</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__edit_cancel()">Cancel</button>
+        </div>
+        <div data-id="default_table_actions_${track.id}">
+          <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" data-trackid="${track.id}" onclick="track__edit_handler()">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" data-trackid="${track.id}" onclick="track__delete_handler()">Delete</button>
+        </div>
       `),
       ]);
     });