diff --git a/src/components/donations/AddDonationModal.svelte b/src/components/donations/AddDonationModal.svelte
index ab9dd2a2..63e781e3 100644
--- a/src/components/donations/AddDonationModal.svelte
+++ b/src/components/donations/AddDonationModal.svelte
@@ -15,7 +15,7 @@
     option.firstname + " " + (option.middlename || "") + " " + option.lastname;
   const filterDonors = (label, filterText, option) =>
     label.toLowerCase().includes(filterText.toLowerCase()) ||
-    option.id.toString().startsWith(filterText.toLowerCase());
+    option.value.id.toString().startsWith(filterText.toLowerCase());
   function focus(el) {
     el.focus();
   }
@@ -25,12 +25,14 @@
   $: runners = [];
   $: is_fixed = false;
   DonorService.donorControllerGetAll().then((val) => {
-    donors = val;
-    donor = donors[0].id || 0;
+    donors = val.map((r) => {
+      return { label: getDonorLabel(r), value: r };
+    });
   });
   RunnerService.runnerControllerGetAll().then((val) => {
-    runners = val;
-    runner = runners[0].id || 0;
+    runners = val.map((r) => {
+      return { label: getDonorLabel(r), value: r };
+    });
   });
   $: amount_input = 0;
   $: processed_last_submit = true;
@@ -184,7 +186,6 @@
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                <!-- TODO: -->
                 {#if is_fixed}
                   {$_('create-a-new-fixed-donation')}
                 {:else}{$_('create-a-new-distance-donation')}{/if}
@@ -213,15 +214,13 @@
                     class="block text-sm font-medium text-gray-700">{$_('donor')}</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) => getDonorLabel(option)}
-                    getOptionLabel={(option) => getDonorLabel(option)}
                     itemFilter={(label, filterText, option) => filterDonors(label, filterText, option)}
                     items={donors}
                     showChevron={true}
                     placeholder={$_('search-for-donor-name-or-id')}
                     noOptionsMessage={$_('no-donors-found')}
-                    on:select={(selectedValue) => (donor = selectedValue.detail.id)}
-                    on:clear={()=>(donors = null)} />
+                    on:select={(selectedValue) => (donor = selectedValue.detail.value.id)}
+                    on:clear={() => (donors = null)} />
                 </div>
                 {#if !is_fixed}
                   <div class="col-span-6">
@@ -230,15 +229,13 @@
                       class="block text-sm 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) => getDonorLabel(option)}
-                      getOptionLabel={(option) => getDonorLabel(option)}
                       itemFilter={(label, filterText, option) => filterDonors(label, filterText, option)}
                       items={runners}
                       showChevron={true}
                       placeholder={$_('search-for-runner-by-name-or-id')}
                       noOptionsMessage={$_('no-runners-found')}
-                      on:select={(selectedValue) => (runner = selectedValue.detail.id)}
-                      on:clear={()=>(runner = null)} />
+                      on:select={(selectedValue) => (runner = selectedValue.detail.value.id)}
+                      on:clear={() => (runner = null)} />
                   </div>
                 {/if}
                 <div class="col-span-6">