diff --git a/src/components/donations/DonationDetail.svelte b/src/components/donations/DonationDetail.svelte
index 3c770589..7dea62de 100644
--- a/src/components/donations/DonationDetail.svelte
+++ b/src/components/donations/DonationDetail.svelte
@@ -8,6 +8,7 @@
   } 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;
@@ -46,6 +47,11 @@
     }
     original_comparison_string = JSON.stringify(editable);
   });
+  const getDonorLabel = (option) =>
+    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
+  const filterDonors = (label, filterText, option) =>
+    label.toLowerCase().includes(filterText.toLowerCase()) ||
+    option.id.toString().startsWith(filterText.toLowerCase());
 
   function submit() {
     if (data_loaded === true && save_enabled) {
@@ -62,6 +68,7 @@
           .then((resp) => {
             Object.assign(original_data, resp);
             original_data = original_data;
+            original_comparison_string = JSON.stringify(editable);
             Toastify({
               text: "updated donation",
               duration: 2500,
@@ -192,7 +199,8 @@
     </div>
     <!--  -->
     <div>
-      <span class="font-medium text-gray-700">{$_('total-donation-amount')}:</span>
+      <span
+        class="font-medium text-gray-700">{$_('total-donation-amount')}:</span>
       <span>{(editable.amount / 100)
           .toFixed(2)
           .toLocaleString('de-DE', { valute: 'EUR' })}€</span>
@@ -201,34 +209,34 @@
       <label
         for="donor"
         class="block  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: 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>
+      <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) => getDonorLabel(option)}
+        getOptionLabel={(option) => getDonorLabel(option)}
+        itemFilter={(label, filterText, option) => filterDonors(label, filterText, option)}
+        items={current_donors}
+        showChevron={true}
+        placeholder={$_('search-for-donor-name-or-id')}
+        noOptionsMessage={$_('no-donors-found')}
+        selectedValue={current_donors.find((d) => (d.id == editable.donor))}
+        on:select={(selectedValue) => (editable.donor = selectedValue.detail.id)} />
     </div>
     {#if original_data.responseType == 'DISTANCEDONATION'}
       <div class=" w-full">
         <label
           for="donor"
           class="block  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: 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>
+        <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) => getDonorLabel(option)}
+          getOptionLabel={(option) => getDonorLabel(option)}
+          itemFilter={(label, filterText, option) => filterDonors(label, filterText, option)}
+          items={current_runners}
+          showChevron={true}
+          placeholder={$_('search-for-runner-by-name-or-id')}
+          noOptionsMessage={$_('no-runners-found')}
+          selectedValue={undefined || current_runners.find((r) => (r.id = original_data.runner.id))}
+          on:select={(selectedValue) => (editable.runner == selectedValue.detail.id)} />
       </div>
     {/if}
     <div class=" w-full">