diff --git a/src/components/donations/DonationsOverview.svelte b/src/components/donations/DonationsOverview.svelte
index dd43f7ca..85120751 100644
--- a/src/components/donations/DonationsOverview.svelte
+++ b/src/components/donations/DonationsOverview.svelte
@@ -1,18 +1,17 @@
 <script>
   import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  import { DonorService } from "@odit/lfk-client-js";
+  import { DonationService, DonorService } from "@odit/lfk-client-js";
   import store from "../../store";
-  import DonorsEmptyState from "./DonorsEmptyState.svelte";
-  import ConfirmDonorDeletion from "./ConfirmDonorDeletion.svelte";
   import Toastify from "toastify-js";
+  import DonationsEmptyState from "./DonationsEmptyState.svelte";
   $: searchvalue = "";
   $: active_deletes = [];
-  let modal_open = false;
-  let delete_donor = {};
-  export let current_donors = [];
-  const donors_promise = DonorService.donorControllerGetAll().then((val) => {
-    current_donors = val;
-  });
+  export let current_donations = [];
+  const donations_promise = DonationService.donationControllerGetAll().then(
+    (val) => {
+      current_donations = val;
+    }
+  );
   function should_display_based_on_id(id) {
     if (searchvalue.toString().slice(-1) === "*") {
       return id.toString().startsWith(searchvalue.replace("*", ""));
@@ -21,24 +20,17 @@
   }
 </script>
 
-<ConfirmDonorDeletion
-  on:cancelDelete={(event) => {
-    modal_open = false;
-    active_deletes[event.detail.id] = false;
-  }}
-  bind:modal_open
-  bind:delete_donor />
-{#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:GET')}
-  {#await donors_promise}
+{#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:GET')}
+  {#await donations_promise}
     <div
       class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
       role="alert">
-      <p class="font-bold">{$_('donors-are-being-loaded')}</p>
+      <p class="font-bold">donations are being loaded</p>
       <p class="text-sm">{$_('this-might-take-a-moment')}</p>
     </div>
   {:then}
-    {#if current_donors.length === 0}
-      <DonorsEmptyState />
+    {#if current_donations.length === 0}
+      <DonationsEmptyState />
     {:else}
       <input
         type="search"
@@ -54,17 +46,17 @@
               <th
                 scope="col"
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('name')}
+                Donor
               </th>
               <th
                 scope="col"
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('contact-information')}
+                Target
               </th>
               <th
                 scope="col"
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('donations')}
+                Amount per Distance
               </th>
               <th
                 scope="col"
@@ -77,76 +69,98 @@
             </tr>
           </thead>
           <tbody class="divide-y divide-gray-200">
-            {#each current_donors as donor}
-              {#if donor.firstname
+            {#each current_donations as donation}
+              {#if donation.donor.firstname
                 .toLowerCase()
                 .includes(
                   searchvalue.toLowerCase()
-                ) || donor.middlename
+                ) || donation.donor.middlename
                   .toLowerCase()
                   .includes(
                     searchvalue.toLowerCase()
-                  ) || donor.lastname
+                  ) || donation.donor.lastname
                   .toLowerCase()
                   .includes(
                     searchvalue.toLowerCase()
-                  ) || should_display_based_on_id(donor.id)}
-                <tr data-rowid="donor_{donor.id}">
+                  ) || donation.runner?.firstname
+                  .toLowerCase()
+                  .includes(
+                    searchvalue.toLowerCase()
+                  ) || donation.runner?.middlename
+                  .toLowerCase()
+                  .includes(
+                    searchvalue.toLowerCase()
+                  ) || donation.runner?.lastname
+                  .toLowerCase()
+                  .includes(
+                    searchvalue.toLowerCase()
+                  ) || should_display_based_on_id(donation.id)}
+                <tr data-rowid="donation_{donation.id}">
                   <td class="px-6 py-4 whitespace-nowrap">
                     <div class="flex items-center">
-                      <div class="ml-4">
-                        <div class="text-sm font-medium text-gray-900">
-                          {donor.firstname}
-                          {donor.middlename || ''}
-                          {donor.lastname}
-                        </div>
-                      </div>
+                      <a
+                        href="../donors/{donation.donor.id}"
+                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{donation.donor.firstname}
+                        {donation.donor.middlename || ''}
+                        {donation.donor.lastname}</a>
                     </div>
                   </td>
                   <td class="px-6 py-4 whitespace-nowrap">
-                    {#if donor.email}
-                      <div class="text-sm text-gray-500">{donor.email}</div>
-                    {/if}
-                    {#if donor.phone}
-                      <div class="text-sm text-gray-500">{donor.phone}</div>
-                    {/if}
-                    {#if donor.address.address1 !== null}
-                      {donor.address.address1}<br />
-                      {donor.address.address2 || ''}<br />
-                      {donor.address.postalcode}
-                      {donor.address.city}
-                      {donor.address.country}
+                    {#if donation.runner}
+                      <div class="text-sm font-medium text-gray-900">
+                        <a
+                          href="../runners/{donation.runner.id}"
+                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{donation.runner.firstname}
+                          {donation.runner.middlename || ''}
+                          {donation.runner.lastname}</a>
+                      </div>
+                    {:else}
+                      <div class="text-sm font-medium text-gray-900">
+                        Fixed Donation
+                      </div>
                     {/if}
                   </td>
-                  <td class="px-6 py-4 whitespace-nowrap">TODO</td>
                   <td class="px-6 py-4 whitespace-nowrap">
-                    {(donor.donationAmount/100).toFixed(2).toLocaleString("de-DE", {valute: "EUR"})}€
+                    {#if donation.amountPerDistance}
+                      <div class="text-sm font-medium text-gray-900">
+                        {(donation.amountPerDistance / 100)
+                          .toFixed(2)
+                          .toLocaleString('de-DE', { valute: 'EUR' })}€
+                      </div>
+                    {:else}
+                      <div class="text-sm font-medium text-gray-900">
+                        Fixed Donation
+                      </div>
+                    {/if}
                   </td>
-                  {#if active_deletes[donor.id] === true}
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="text-sm font-medium text-gray-900">
+                      {(donation.amount / 100)
+                        .toFixed(2)
+                        .toLocaleString('de-DE', { valute: 'EUR' })}€
+                    </div>
+                  </td>
+                  {#if active_deletes[donation.id] === true}
                     <td
                       class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                       <button
                         on:click={() => {
-                          active_deletes[donor.id] = false;
+                          active_deletes[donation.id] = false;
                         }}
                         tabindex="0"
                         class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
                       <button
                         on:click={() => {
-                          DonorService.donorControllerRemove(donor.id, false)
+                          DonationService.donationControllerRemove(donation.id, false)
                             .then((resp) => {
-                              current_donors = current_donors.filter((obj) => obj.id !== donor.id);
+                              current_donations = current_donations.filter((obj) => obj.id !== donation.id);
                               Toastify({
-                                text: 'Donor deleted',
+                                text: 'Donation deleted',
                                 duration: 500,
                                 backgroundColor:
                                   'linear-gradient(to right, #00b09b, #96c93d)',
                               }).showToast();
                             })
-                            .catch((err) => {
-                              modal_open = true;
-                              delete_donor = donor;
-                            });
                         }}
                         tabindex="0"
                         class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
@@ -155,12 +169,12 @@
                     <td
                       class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                       <a
-                        href="./{donor.id}"
+                        href="./{donation.id}"
                         class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
-                      {#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:DELETE')}
+                      {#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:DELETE')}
                         <button
                           on:click={() => {
-                            active_deletes[donor.id] = true;
+                            active_deletes[donation.id] = true;
                           }}
                           tabindex="0"
                           class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>