diff --git a/src/components/runners/RunnersOverview.svelte b/src/components/runners/RunnersOverview.svelte
index edd3832f..d4a3bf36 100644
--- a/src/components/runners/RunnersOverview.svelte
+++ b/src/components/runners/RunnersOverview.svelte
@@ -214,7 +214,7 @@
                 />
               </th>
               {#each headerGroup.headers as header}
-                <TableHeader {header}></TableHeader>
+                <TableHeader {header} />
               {/each}
             </tr>
           {/each}
@@ -245,7 +245,6 @@
       </table>
     </div>
     <div class="h-2" />
-
   {/if}
 {/if}
-<TableBottom {table} {selected}></TableBottom>
\ No newline at end of file
+<TableBottom {table} {selected} />
diff --git a/src/components/scans/ScansOverview.svelte b/src/components/scans/ScansOverview.svelte
index 96fa9ba7..dd2d004a 100644
--- a/src/components/scans/ScansOverview.svelte
+++ b/src/components/scans/ScansOverview.svelte
@@ -2,19 +2,42 @@
   import { _ } from "svelte-i18n";
   import { ScanService, TrackService } from "@odit/lfk-client-js";
   import store from "../../store";
+  import {
+    createSvelteTable,
+    flexRender,
+    getCoreRowModel,
+    getFilteredRowModel,
+    getPaginationRowModel,
+    getSortedRowModel,
+    renderComponent,
+  } from "@tanstack/svelte-table";
+  import { onMount } from "svelte";
+  import { writable } from "svelte/store";
   import Toastify from "toastify-js";
+  import TableBottom from "../shared/TableBottom.svelte";
+  import TableHeader from "../shared/TableHeader.svelte";
   import ScansEmptyState from "./ScansEmptyState.svelte";
-  import ThFilterRunner from "./ThFilterRunner.svelte";
-  import ThFilterTrack from "./ThFilterTrack.svelte";
+  import InputElement from "../shared/InputElement.svelte";
+  import TableActions from "../shared/TableActions.svelte";
+
+  $: selectedScans =
+    $table?.getSelectedRowModel().rows.map((row) => row.original) || [];
+  $: selected =
+    $table?.getSelectedRowModel().rows.map((row) => row.index) || [];
+
+  $: active_delete = undefined;
   $: active_deletes = [];
   export let current_scans = [];
-  const handler = new DataHandler(current_scans, { rowsPerPage: 20 });
-  const rows = handler.getRows();
   const scans_promise = ScanService.scanControllerGetAll().then((val) => {
     current_scans = val;
-    handler.setRows(val);
+    // handler.setRows(val);
+    current_scans = val;
+    options.update((options) => ({
+      ...options,
+      data: current_scans,
+    }));
   });
-  $: allTracks = [];
+  let allTracks = [];
   TrackService.trackControllerGetAll().then((val) => {
     allTracks = val;
   });
@@ -38,6 +61,85 @@
       Math.floor(laptime / 60) * 60
     }`;
   }
+
+  const columns = [
+    {
+      accessorKey: "id",
+      header: () => "id",
+      filterFn: `equalsString`,
+    },
+    {
+      accessorKey: "runner",
+      header: () => $_("runner"),
+      cell: (info) => {
+        const runner = info.getValue();
+        return `#${runner.id} - ${runner.firstname} ${runner.lastname}`;
+      },
+      enableColumnFilter: true,
+    },
+    {
+      accessorKey: "lapTime",
+      header: () => $_("laptime"),
+      cell: (info) => {
+        return format_laptime(info.getValue());
+      },
+      enableColumnFilter: false,
+    },
+    {
+      accessorKey: "distance",
+      header: () => $_("distance"),
+      cell: (info) => {
+        if (info.getValue() < 1000) {
+          return `${info.getValue()}m`;
+        }
+        return `${(info.getValue() / 1000).toFixed(1)}km`;
+      },
+      enableColumnFilter: false,
+    },
+    {
+      accessorKey: "track",
+      header: () => $_("track"),
+      cell: (info) => {
+        const track = info.getValue();
+        return track.name;
+      },
+      enableColumnFilter: true,
+    },
+    {
+      accessorKey: "actions",
+      header: () => $_("action"),
+      cell: (info) => {
+        return renderComponent(TableActions, {
+          detailsLink: `./${info.row.original.id}`,
+          deleteAction: () => {
+            active_delete =
+              current_scans[
+                current_scans.findIndex((r) => r.id == info.row.original.id)
+              ];
+          },
+          deleteEnabled:
+            store.state.jwtinfo.userdetails.permissions.includes("SCAN:DELETE"),
+        });
+      },
+      enableColumnFilter: false,
+      enableSorting: false,
+    },
+  ];
+  const options = writable({
+    data: [],
+    columns: columns,
+    initialState: {
+      pagination: {
+        pageSize: 50,
+      },
+    },
+    enableRowSelection: true,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+  const table = createSvelteTable(options);
 </script>
 
 {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")}
@@ -53,171 +155,51 @@
     {#if current_scans.length === 0}
       <ScansEmptyState />
     {:else}
-      <div
-        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
-      >
-        <table class="divide-y divide-gray-200 w-full">
-          <thead class="bg-gray-50">
-            <tr>
-              <Th {handler} orderBy="id">ID</Th>
-              <Th {handler}>
-                {$_("runner")}
-              </Th>
-              <Th {handler}>
-                {$_("distance")}
-              </Th>
-              <Th {handler}>
-                {$_("track")}
-              </Th>
-              <Th {handler}>
-                {$_("laptime")}
-              </Th>
-              <Th {handler}>
-                {$_("status")}
-              </Th>
-              <th
-                scope="col"
-                class="relative px-6 py-3"
-                style="border-bottom: 1px solid #ddd;"
-              >
-                {$_("action")}
-              </th>
-            </tr>
-            <tr>
-              <ThFilter {handler} filterBy="id" />
-              <ThFilterRunner {handler} />
-              <th style="border-bottom: 1px solid #ddd;" />
-              <ThFilterTrack tracks={allTracks} {handler} />
-              <!-- <th style="border-bottom: 1px solid #ddd;" /> -->
-              <th style="border-bottom: 1px solid #ddd;" />
-              <th style="border-bottom: 1px solid #ddd;" />
-              <!-- TODO: filter status -->
-              <th style="border-bottom: 1px solid #ddd;" />
-            </tr>
+      <div class="overflow-x-auto">
+        <table class="w-full">
+          <thead>
+            {#each $table.getHeaderGroups() as headerGroup}
+              <tr class="select-none">
+                <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
+                  <InputElement
+                    type="checkbox"
+                    checked={$table.getIsAllRowsSelected()}
+                    indeterminate={$table.getIsSomeRowsSelected()}
+                    on:change={() => $table.toggleAllRowsSelected()}
+                  />
+                </th>
+                {#each headerGroup.headers as header}
+                  <TableHeader {header} />
+                {/each}
+              </tr>
+            {/each}
           </thead>
-          <tbody class="divide-y divide-gray-200">
-            {#each $rows as scan}
-              <tr data-rowid="scan_{scan.id}">
-                <td class="px-6 py-4 whitespace-nowrap text-left">
-                  <div class="text-sm font-medium text-gray-900">
-                    {scan.id}
-                  </div>
+          <tbody>
+            {#each $table.getRowModel().rows as row}
+              <tr>
+                <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
+                  <InputElement
+                    type="checkbox"
+                    checked={row.getIsSelected()}
+                    on:change={() => row.toggleSelected()}
+                  />
                 </td>
-                <td class="px-6 py-4 whitespace-nowrap">
-                  <div class="flex items-center">
-                    <a
-                      href="../runners/{scan.runner.id}"
-                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
-                      >{scan.runner.firstname}
-                      {scan.runner.middlename || ""}
-                      {scan.runner.lastname}</a
-                    >
-                  </div>
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap text-left">
-                  <div class="text-sm font-medium text-gray-900">
-                    {#if scan.distance < 1000}
-                      {scan.distance}m
-                    {:else}{scan.distance / 1000}km{/if}
-                  </div>
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap text-left">
-                  <div class="text-sm font-medium text-gray-900">
-                    {#if scan.track}
-                      <a
-                        href="../tracks"
-                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
-                        >{scan.track.name}
-                      </a>
-                    {/if}
-                  </div>
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap text-left">
-                  {#if scan.responseType === "TRACKSCAN"}
-                    <div class="text-sm font-medium text-gray-900">
-                      {format_laptime(scan.lapTime)}
-                    </div>
-                  {:else}
-                    <div class="text-sm font-medium text-gray-900">
-                      {$_("scan-with-fixed-distance")}
-                    </div>
-                  {/if}
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap">
-                  <div class="flex items-center">
-                    {#if scan.valid}
-                      <span
-                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
-                        >{$_("valid")}</span
-                      >
-                    {:else}
-                      <span
-                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
-                        >{$_("invalid")}</span
-                      >
-                    {/if}
-                  </div>
-                </td>
-
-                {#if active_deletes[scan.id] === true}
-                  <td
-                    class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
-                  >
-                    <button
-                      on:click={() => {
-                        active_deletes[scan.id] = false;
-                      }}
-                      tabindex="0"
-                      class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
-                      >{$_("cancel-delete")}</button
-                    >
-                    <button
-                      on:click={() => {
-                        ScanService.scanControllerRemove(scan.id, false).then(
-                          (resp) => {
-                            current_scans = current_scans.filter(
-                              (obj) => obj.id !== scan.id
-                            );
-                            Toastify({
-                              text: "Scan deleted",
-                              duration: 500,
-                              backgroundColor:
-                                "linear-gradient(to right, #00b09b, #96c93d)",
-                            }).showToast();
-                          }
-                        );
-                      }}
-                      tabindex="0"
-                      class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-                      >{$_("confirm-delete")}</button
-                    >
+                {#each row.getVisibleCells() as cell}
+                  <td>
+                    <svelte:component
+                      this={flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    />
                   </td>
-                {:else}
-                  <td
-                    class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
-                  >
-                    <a
-                      href="./{scan.id}"
-                      class="text-indigo-600 hover:text-indigo-900"
-                      >{$_("details")}</a
-                    >
-                    {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:DELETE")}
-                      <button
-                        on:click={() => {
-                          active_deletes[scan.id] = true;
-                        }}
-                        tabindex="0"
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-                        >{$_("delete")}</button
-                      >
-                    {/if}
-                  </td>
-                {/if}
+                {/each}
               </tr>
             {/each}
           </tbody>
         </table>
       </div>
+      <TableBottom {table} {selected} />
     {/if}
   {:catch error}
     <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
diff --git a/src/components/shared/TableBottom.svelte b/src/components/shared/TableBottom.svelte
index 33eb8ddf..1d6194fb 100644
--- a/src/components/shared/TableBottom.svelte
+++ b/src/components/shared/TableBottom.svelte
@@ -1,71 +1,71 @@
 <script>
-
-    export let table;
-    export let selected;
+  export let table;
+  export let selected;
 </script>
+
 <div class="flex items-center gap-2">
-    <button
-      class="border rounded p-1"
-      on:click={() => $table.setPageIndex(0)}
-      disabled={!$table.getCanPreviousPage()}
-    >
-      {"<<"}
-    </button>
-    <button
-      class="border rounded p-1"
-      on:click={() => $table.previousPage()}
-      disabled={!$table.getCanPreviousPage()}
-    >
-      {"<"}
-    </button>
-    <button
-      class="border rounded p-1"
-      on:click={() => $table.nextPage()}
-      disabled={!$table.getCanNextPage()}
-    >
-      {">"}
-    </button>
-    <button
-      class="border rounded p-1"
-      on:click={() => $table.setPageIndex($table.getPageCount() - 1)}
-      disabled={!$table.getCanNextPage()}
-    >
-      {">>"}
-    </button>
-    <span class="flex items-center gap-1">
-      <div>Page</div>
-      <strong>
-        {$table.getState().pagination.pageIndex + 1} of{" "}
-        {$table.getPageCount()}
-      </strong>
-    </span>
-    <span class="flex items-center gap-1">
-      | Go to page:
-      <input
-        type="number"
-        defaultValue={$table.getState().pagination.pageIndex + 1}
-        on:change={(e) => {
-          const page = e.target.value ? Number(e.target.value) - 1 : 0;
-          $table.setPageIndex(page);
-        }}
-        class="border p-1 rounded w-16"
-      />
-    </span>
-    <select
-      value={$table.getState().pagination.pageSize}
-      on:input={(e) => {
-        const ps = Number(e.target.value);
-        console.log({ ps });
-        $table.setPageSize(Number(e.target.value));
+  <button
+    class="border rounded p-1"
+    on:click={() => $table.setPageIndex(0)}
+    disabled={!$table.getCanPreviousPage()}
+  >
+    {"<<"}
+  </button>
+  <button
+    class="border rounded p-1"
+    on:click={() => $table.previousPage()}
+    disabled={!$table.getCanPreviousPage()}
+  >
+    {"<"}
+  </button>
+  <button
+    class="border rounded p-1"
+    on:click={() => $table.nextPage()}
+    disabled={!$table.getCanNextPage()}
+  >
+    {">"}
+  </button>
+  <button
+    class="border rounded p-1"
+    on:click={() => $table.setPageIndex($table.getPageCount() - 1)}
+    disabled={!$table.getCanNextPage()}
+  >
+    {">>"}
+  </button>
+  <span class="flex items-center gap-1">
+    <div>Page</div>
+    <strong>
+      {$table.getState().pagination.pageIndex + 1} of{" "}
+      {$table.getPageCount()}
+    </strong>
+  </span>
+  <span class="flex items-center gap-1">
+    | Go to page:
+    <input
+      type="number"
+      defaultValue={$table.getState().pagination.pageIndex + 1}
+      on:change={(e) => {
+        const page = e.target.value ? Number(e.target.value) - 1 : 0;
+        $table.setPageIndex(page);
       }}
-    >
-      {#each [25, 50, 100, 250, 500] as pageSize}
-        <option value={pageSize}>{pageSize}</option>
-      {/each}
-    </select>
-  </div>
-  <!-- <pre>{JSON.stringify($table.getState(), null, 2)}</pre> -->
-  <div>
-    {Object.keys(selected).length} of{" "}
-    {$table.getPreFilteredRowModel().rows.length} Total Rows Selected
-  </div>
\ No newline at end of file
+      class="border p-1 rounded w-16"
+    />
+  </span>
+  <select
+    value={$table.getState().pagination.pageSize}
+    on:input={(e) => {
+      const ps = Number(e.target.value);
+      console.log({ ps });
+      $table.setPageSize(Number(e.target.value));
+    }}
+  >
+    {#each [25, 50, 100, 250, 500] as pageSize}
+      <option value={pageSize}>{pageSize}</option>
+    {/each}
+  </select>
+</div>
+<!-- <pre>{JSON.stringify($table.getState(), null, 2)}</pre> -->
+<div>
+  {Object.keys(selected).length} of{" "}
+  {$table.getPreFilteredRowModel().rows.length} Total Rows Selected
+</div>