diff --git a/src/components/donations/AddDonationModal.svelte b/src/components/donations/AddDonationModal.svelte
index 234b0f42..d574e243 100644
--- a/src/components/donations/AddDonationModal.svelte
+++ b/src/components/donations/AddDonationModal.svelte
@@ -227,17 +227,16 @@
                     <label
                       for="donor"
                       class="block text-sm font-medium text-gray-700">{$_('runner')}</label>
-                    <select
-                      bind:value={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 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={runners}
+                      showChevron={true}
+                      placeholder={$_('search-for-runner-by-name-or-id')}
+                      noOptionsMessage={$_('no-runners-found')}
+                      on:select={(selectedValue) => (runner = selectedValue.detail.id)} />
                   </div>
                 {/if}
                 <div class="col-span-6">