diff --git a/src/components/scans/ScanDetail.svelte b/src/components/scans/ScanDetail.svelte
new file mode 100644
index 00000000..4a7edca6
--- /dev/null
+++ b/src/components/scans/ScanDetail.svelte
@@ -0,0 +1,222 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import store from "../../store";
+  import {
+    DonationService,
+    DonorService,
+    RunnerService,
+    ScanService,
+  } from "@odit/lfk-client-js";
+  import Toastify from "toastify-js";
+  import PromiseError from "../base/PromiseError.svelte";
+  import Select from "svelte-select";
+  let data_loaded = false;
+  export let params;
+  $: delete_triggered = false;
+  $: original_data = {};
+  $: editable = {};
+  $: current_runners = [];
+  $: is_everything_set =
+    editable.donor != null &&
+    ((original_data.responseType == "TRACKSCAN" && editable?.runner != null) ||
+      original_data.responseType !== "TRACKSCAN");
+  $: changes_performed = !(
+    JSON.stringify(original_data) === JSON.stringify(editable)
+  );
+  $: save_enabled = changes_performed && is_everything_set;
+  const runner_promise = RunnerService.runnerControllerGetAll().then((val) => {
+    current_runners = val;
+  });
+  const promise = ScanService.scanControllerGetOne(params.scanid).then(
+    (data) => {
+      data_loaded = true;
+      original_data = Object.assign(original_data, data);
+      editable = Object.assign(editable, original_data);
+    }
+  );
+  const getRunnerLabel = (option) =>
+    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
+  const filterRunners = (label, filterText, option) =>
+    label.toLowerCase().includes(filterText.toLowerCase()) ||
+    option.id.toString().startsWith(filterText.toLowerCase());
+
+  function submit() {
+    if (data_loaded === true && save_enabled) {
+      Toastify({
+        text: "Scan is being updated",
+        duration: 2500,
+      }).showToast();
+      let postdata = {};
+      if (original_data.responseType === "TRACKSCAN") {
+        postdata = Object.assign(postdata, editable);
+        postdata.runner = postdata.runner.id;
+        postdata.track = postdata.track.id;
+        postdata.station = postdata.station.id;
+        postdata.card = postdata.card.id;
+        ScanService.scanControllerPutTrackScan(original_data.id, postdata)
+          .then((resp) => {
+            Object.assign(original_data, editable);
+            original_data = original_data;
+            Toastify({
+              text: "updated scan",
+              duration: 2500,
+              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+            }).showToast();
+          })
+          .catch((err) => {});
+      } else {
+        postdata = Object.assign(postdata, editable);
+        postdata.runner = postdata.runner.id;
+        ScanService.scanControllerPut(original_data.id, postdata)
+          .then((resp) => {
+            Object.assign(original_data, editable);
+            original_data = original_data;
+            Toastify({
+              text: "updated scan",
+              duration: 2500,
+              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+            }).showToast();
+          })
+          .catch((err) => {});
+      }
+    } else {
+    }
+  }
+  function deleteScan() {
+    ScanService.scanControllerRemove(original_data.id, false)
+      .then((resp) => {
+        Toastify({
+          text: "Deleded Scan",
+          duration: 500,
+          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+        }).showToast();
+        location.replace("./");
+      })
+      .catch((err) => {
+        modal_open = true;
+        delete_scan = original_data;
+      });
+  }
+</script>
+
+{#await donor_promise && runner_promise && promise}
+  Loading scan details
+{:then}
+  <section class="container p-5 select-none">
+    <div class="flex flex-row mb-4">
+      <div class="w-full">
+        <nav class="w-full flex">
+          <ol class="list-none flex flex-row items-center justify-start">
+            <li class="flex items-center">
+              <svg
+                fill="currentColor"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                width="24"
+                height="24"><path
+                  fill="currentColor"
+                  d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z" /></svg>
+            </li>
+            <li class="flex items-center ml-2">
+              <a class="mr-2" href="./">Scans</a><svg
+                stroke="currentColor"
+                fill="none"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-3 w-3 mr-2 stroke-current"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"><line
+                  x1="5"
+                  y1="12"
+                  x2="19"
+                  y2="12" />
+                <polyline points="12 5 19 12 12 19" /></svg>
+            </li>
+            <li class="flex items-center">
+              <span class="mr-2">{original_data.id}</span>
+            </li>
+          </ol>
+        </nav>
+      </div>
+    </div>
+    <div class="mb-8 text-3xl font-extrabold leading-tight">
+      {original_data.runner.firstname}
+      {original_data.runner.middlename || ''}
+      {original_data.runner.lastname}
+      #{original_data.id}
+      <span data-id="donation_actions_${original_data.id}">
+        {#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:DELETE')}
+          {#if delete_triggered}
+            <button
+              on:click={deleteScan}
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:">{$_('confirm-deletion')}</button>
+            <button
+              on:click={() => {
+                delete_triggered = !delete_triggered;
+              }}
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:">{$_('cancel')}</button>
+          {/if}
+          {#if !delete_triggered}
+            <button
+              on:click={() => {
+                delete_triggered = true;
+              }}
+              type="button"
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:">Delete
+              scan</button>
+          {/if}
+        {/if}
+        {#if !delete_triggered}
+          <button
+            disabled={!save_enabled}
+            class:opacity-50={!save_enabled}
+            type="button"
+            on:click={submit}
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:">{$_('save-changes')}</button>
+        {/if}
+      </span>
+    </div>
+    <!--  -->
+    <div class="w-full">
+      <label for="valid" class="block font-medium text-gray-700">Status</label>
+      <input
+        id="valid"
+        on:change={() => {
+          editable.valid = !editable.valid;
+        }}
+        name="valid"
+        type="checkbox"
+        checked={editable.valid}
+        class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+      {#if editable.valid}
+        <span
+          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Invalid</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>
+    <div class=" w-full">
+      <label
+        for="runner"
+        class="block font-medium text-gray-700">{$_('runner')}</label>
+      <Select
+        containerClasses="rounded-l-md 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"
+        getSelectionLabel={(option) => getRunnerLabel(option)}
+        getOptionLabel={(option) => getRunnerLabel(option)}
+        itemFilter={(label, filterText, option) => filterRunners(label, filterText, option)}
+        items={current_runners}
+        showChevron={true}
+        isDisabled={(editable.responseType === "TRACKSCAN")}
+        placeholder={$_('search-for-runner-by-name-or-id')}
+        noOptionsMessage={$_('no-runners-found')}
+        bind:selectedValue={editable.runner}
+        on:clear={() => (editable.runner = null)} />
+    </div>
+  </section>
+{:catch error}
+  <PromiseError {error} />
+{/await}