diff --git a/src/components/donations/DonationDetail.svelte b/src/components/donations/DonationDetail.svelte
new file mode 100644
index 00000000..e4102038
--- /dev/null
+++ b/src/components/donations/DonationDetail.svelte
@@ -0,0 +1,264 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import store from "../../store";
+  import {
+    DonationService,
+    DonorService,
+    RunnerService,
+  } from "@odit/lfk-client-js";
+  import Toastify from "toastify-js";
+  import PromiseError from "../base/PromiseError.svelte";
+  let data_loaded = false;
+  export let params;
+  $: delete_triggered = false;
+  $: original_data = {};
+  $: original_comparison_string = "";
+  $: editable = {};
+  $: current_donors = [];
+  $: current_runners = [];
+  $: amount_input = 0;
+  $: is_amount_valid = amount_input > 0;
+  $: changes_performed =
+    !(original_comparison_string === JSON.stringify(editable));
+  $: save_enabled = changes_performed && is_amount_valid;
+  const donor_promise = DonorService.donorControllerGetAll().then((val) => {
+    current_donors = val;
+  });
+  const runner_promise = RunnerService.runnerControllerGetAll().then((val) => {
+    current_runners = val;
+  });
+  const promise = DonationService.donationControllerGetOne(
+    params.donationid
+  ).then((data) => {
+    data_loaded = true;
+    original_data = Object.assign(original_data, data);
+    editable = Object.assign(editable, original_data);
+    editable.donor=data.donor.id;
+    if (data.responseType == "DISTANCEDONATION") {
+      editable.runner = data.runner.id;
+      amount_input = data.amountPerDistance / 100;
+    } else {
+      amount_input = data.amount / 100;
+    }
+    original_comparison_string = JSON.stringify(editable);
+  });
+
+  function submit() {
+    if (data_loaded === true && save_enabled) {
+      Toastify({
+        text: "Donation is being updated",
+        duration: 2500,
+      }).showToast();
+      if(original_data.responseType === "DISTANCEDONATION"){
+        editable.amountPerDistance = Math.floor(amount_input * 100);
+        DonationService.donationControllerPutDistance(original_data.id, editable)
+        .then((resp) => {
+          Object.assign(original_data, editable);
+          original_data=original_data;
+          Toastify({
+            text: "updated donation",
+            duration: 2500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+        })
+        .catch((err) => {});
+      }
+      else{
+        editable.amount = Math.floor(amount_input * 100);
+        DonationService.donationControllerPutFixed(original_data.id, editable)
+        .then((resp) => {
+          Object.assign(original_data, editable);
+          original_data=original_data;
+          Toastify({
+            text: "updated donation",
+            duration: 2500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+        })
+        .catch((err) => {});
+      }
+    } else {
+    }
+  }
+  function deleteDonation() {
+    DonationService.donationControllerRemove(
+      original_data.id,
+      false
+    )
+      .then((resp) => {
+        Toastify({
+          text: "Donation delete",
+          duration: 500,
+          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+        }).showToast();
+        location.replace("./");
+      })
+      .catch((err) => {
+        modal_open = true;
+        delete_donor = original_data;
+      });
+  }
+</script>
+
+{#await donor_promise && runner_promise && promise}
+  Loading donation 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="none" d="M0 0h24v24H0z" />
+                <path
+                  d="M9.33 11.5h2.17A4.5 4.5 0 0 1 16 16H8.999L9 17h8v-1a5.578 5.578 0 0 0-.886-3H19a5 5 0 0 1 4.516 2.851C21.151 18.972 17.322 21 13 21c-2.761 0-5.1-.59-7-1.625L6 10.071A6.967 6.967 0 0 1 9.33 11.5zM5 19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9zM18 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-7-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z" /></svg>
+            </li>
+            <li class="flex items-center ml-2">
+              <a class="mr-2" href="./">Donations</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.donor.firstname}
+      {original_data.donor.middlename || ''}
+      {original_data.donor.lastname}
+      &gt;
+      {#if original_data.responseType == 'DISTANCEDONATION'}
+        {original_data.runner.firstname}
+        {original_data.runner.middlename || ''}
+        {original_data.runner.lastname}
+      {:else}
+        Fixed:
+        {(amount_input)
+          .toFixed(2)
+          .toLocaleString('de-DE', { valute: 'EUR' })}€
+      {/if}
+      <span data-id="donation_actions_${original_data.id}">
+        {#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:DELETE')}
+          {#if delete_triggered}
+            <button
+              on:click={deleteDonation}
+              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:text-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:text-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:text-sm">{$_('delete-donor')}</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:text-sm">{$_('save-changes')}</button>
+        {/if}
+      </span>
+    </div>
+    <!--  -->
+    <div style="displ">
+      <span class="font-medium text-gray-700">Total amount:</span>
+      <span>{(editable.amount / 100)
+          .toFixed(2)
+          .toLocaleString('de-DE', { valute: 'EUR' })}€</span>
+    </div>
+    <div class="text-sm w-full">
+      <label
+        for="donor"
+        class="block text-sm font-medium text-gray-700">Donor</label>
+      <select
+        bind:value={editable.donor}
+        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">
+        {#each current_donors as d}
+          <option value={d.id}>
+            {d.firstname}
+            {d.middlename}
+            {d.lastname}
+          </option>
+        {/each}
+      </select>
+    </div>
+    {#if original_data.responseType == 'DISTANCEDONATION'}
+      <div class="text-sm w-full">
+        <label
+          for="donor"
+          class="block text-sm font-medium text-gray-700">Runner</label>
+        <select
+          bind:value={editable.runner}
+          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">
+          {#each current_runners as r}
+            <option value={r.id}>
+              {r.firstname}
+              {r.middlename}
+              {r.lastname}
+            </option>
+          {/each}
+        </select>
+      </div>
+    {/if}
+    <div class="text-sm w-full">
+      <label for="lastname" class="font-medium text-gray-700">
+        {#if original_data.responseType == 'DISTANCEDONATION'}
+          Amount per kilometer
+        {:else}Amount{/if}
+      </label>
+      <div class="mt-1 flex rounded-md shadow-sm">
+        <input
+          autocomplete="off"
+          class:border-red-500={is_amount_valid}
+          class:focus:border-red-500={is_amount_valid}
+          class:focus:ring-red-500={is_amount_valid}
+          bind:value={amount_input}
+          type="number"
+          step="0.01"
+          name="donation_amount_eur"
+          class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
+          placeholder="2.00" />
+        <span
+          class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">€</span>
+      </div>
+      {#if !is_amount_valid}
+        <span
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+          Donation amount must be greater that 0.00€
+        </span>
+      {/if}
+    </div>
+  </section>
+{:catch error}
+  <PromiseError {error} />
+{/await}