diff --git a/src/App.svelte b/src/App.svelte
index 77561f97..586d88b4 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,5 +1,6 @@
 <script>
   import "toastify-js/src/toastify.css";
+  import "gridjs/dist/theme/mermaid.css";
   import { Route, router } from "tinro";
   router.subscribe((routeInfo) => {
     window.scrollTo(0, 0);
diff --git a/src/components/tracks/Tracks.svelte b/src/components/tracks/Tracks.svelte
index ec87e0ef..4dcabb1c 100644
--- a/src/components/tracks/Tracks.svelte
+++ b/src/components/tracks/Tracks.svelte
@@ -57,9 +57,9 @@
             .querySelector(`[data-id="triggered_table_actions_${trackid}"]`)
             .classList.add("hidden");
           //
-          elem.childNodes[0].innerHTML = `<td data-column-id="trackName">${elem.childNodes[0].childNodes[0].value}</td>`;
-          elem.childNodes[1].innerHTML = `<td data-column-id="trackName">${elem.childNodes[1].childNodes[0].value}</td>`;
-          elem.childNodes[2].innerHTML = `<td data-column-id="trackName">${elem.childNodes[2].childNodes[0].value}</td>`;
+          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>`;
         })
         .catch((err) => {});
     }
diff --git a/src/main.js b/src/main.js
index 26111a91..51f1c65b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,6 @@
 import './style.css';
 import "toastify-js/src/toastify.css";
+import "gridjs/dist/theme/mermaid.css";
 import App from './App.svelte';
 
 const app = new App({