diff --git a/src/components/donations/DonationsOverview.svelte b/src/components/donations/DonationsOverview.svelte
index c509f98f..c989a6d5 100644
--- a/src/components/donations/DonationsOverview.svelte
+++ b/src/components/donations/DonationsOverview.svelte
@@ -5,18 +5,16 @@
   import Toastify from "toastify-js";
   import DonationsEmptyState from "./DonationsEmptyState.svelte";
   import AddDonationPaymentModal from "./AddDonationPaymentModal.svelte";
+  import { onMount } from "svelte";
   $: searchvalue = "";
   $: active_deletes = [];
+  $: dataLoaded = false;
   export let current_donations = [];
   export let payment_modal_open = false;
   export let editable = {};
   export let original_data = {};
   export let paid_amount_input = 0;
-  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("*", ""));
@@ -26,210 +24,252 @@
   function open_payment_modal(donation) {
     editable = Object.assign({}, donation);
     original_data = Object.assign({}, donation);
-    paid_amount_input = (donation.paidAmount/100).toFixed(2);
+    paid_amount_input = (donation.paidAmount / 100).toFixed(2);
     payment_modal_open = true;
   }
+
+  onMount(async () => {
+    let page = 0;
+    while (page >= 0) {
+      const donations = await DonationService.donationControllerGetAll(
+        page,
+        500
+      );
+      if (donations.length == 0) {
+        page = -2;
+      }
+
+      current_donations = current_donations.concat(...donations);
+
+      if (page == 0) {
+        dataLoaded = true;
+      }
+      page++;
+    }
+    console.log("All donations loaded");
+  });
 </script>
 
-<AddDonationPaymentModal bind:current_donations bind:original_data bind:editable bind:paid_amount_input bind:payment_modal_open />
-{#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:GET')}
-  {#await donations_promise}
+<AddDonationPaymentModal
+  bind:current_donations
+  bind:original_data
+  bind:editable
+  bind:paid_amount_input
+  bind:payment_modal_open
+/>
+{#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:GET")}
+  {#if !dataLoaded}
     <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">
+      role="alert"
+    >
       <p class="font-bold">donations are being loaded</p>
-      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
     </div>
-  {:then}
-    {#if current_donations.length === 0}
-      <DonationsEmptyState />
-    {:else}
-      <input
-        type="search"
-        bind:value={searchvalue}
-        placeholder={$_('datatable.search')}
-        aria-label={$_('datatable.search')}
-        class="mb-4" />
-      <div
-        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
-        <table class="divide-y divide-gray-200 w-full">
-          <thead class="bg-gray-50">
-            <tr>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('donor')}
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('runner')}
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('amount-per-kilometer')}
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('donation-amount')}
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('paid-amount')}
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('status')}
-              </th>
-              <th scope="col" class="relative px-6 py-3">
-                <span class="sr-only">{$_('action')}</span>
-              </th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-gray-200">
-            {#each current_donations as donation}
-              {#if donation.donor.firstname
+  {:else if current_donations.length === 0}
+    <DonationsEmptyState />
+  {:else}
+    <input
+      type="search"
+      bind:value={searchvalue}
+      placeholder={$_("datatable.search")}
+      aria-label={$_("datatable.search")}
+      class="mb-4"
+    />
+    <div
+      class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
+    >
+      <table class="divide-y divide-gray-200 w-full">
+        <thead class="bg-gray-50">
+          <tr>
+            <th
+              scope="col"
+              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+            >
+              {$_("donor")}
+            </th>
+            <th
+              scope="col"
+              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+            >
+              {$_("runner")}
+            </th>
+            <th
+              scope="col"
+              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+            >
+              {$_("amount-per-kilometer")}
+            </th>
+            <th
+              scope="col"
+              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+            >
+              {$_("donation-amount")}
+            </th>
+            <th
+              scope="col"
+              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+            >
+              {$_("paid-amount")}
+            </th>
+            <th
+              scope="col"
+              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+            >
+              {$_("status")}
+            </th>
+            <th scope="col" class="relative px-6 py-3">
+              <span class="sr-only">{$_("action")}</span>
+            </th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-200">
+          {#each current_donations as donation}
+            {#if donation.donor.firstname
+              .toLowerCase()
+              .includes(searchvalue.toLowerCase()) || donation.donor.lastname
                 .toLowerCase()
-                .includes(
-                  searchvalue.toLowerCase()
-                ) ||  donation.donor.lastname
-                  .toLowerCase()
-                  .includes(
-                    searchvalue.toLowerCase()
-                  ) || donation.runner?.firstname
-                  .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">
+                .includes(searchvalue.toLowerCase()) || donation.runner?.firstname
+                .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">
+                    <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 donation.runner}
+                    <div class="text-sm font-medium text-gray-900">
                       <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>
+                        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>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    {#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">
-                    {#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>
-                  <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>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="text-sm font-medium text-gray-900">
-                      {(donation.paidAmount / 100)
-                        .toFixed(2)
-                        .toLocaleString('de-DE', { valute: 'EUR' })}€
-                    </div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    {#if donation.status =="PAID"}
-                      <span
-                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('paid')}</span>
-                    {:else}
-                      <span
-                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('open')}</span>
-                    {/if}
-                  </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[donation.id] = false;
-                        }}
-                        tabindex="0"
-                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
-                      <button
-                        on:click={() => {
-                          DonationService.donationControllerRemove(donation.id, false).then(
-                            (resp) => {
-                              current_donations = current_donations.filter(
-                                (obj) => obj.id !== donation.id
-                              );
-                              Toastify({
-                                text: $_('donation-deleted'),
-                                duration: 500,
-                                backgroundColor:
-                                  'linear-gradient(to right, #00b09b, #96c93d)',
-                              }).showToast();
-                            }
-                          );
-                        }}
-                        tabindex="0"
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
-                    </td>
                   {:else}
-                    <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                      <button
-                        on:click={() => {open_payment_modal(donation);}}
-                        class="text-[#025a21] hover:text-green-900 mr-4">{$_('enter-payment')}</button>
-                      <a
-                        href="./{donation.id}"
-                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
-                      {#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:DELETE')}
-                        <button
-                          on:click={() => {
-                            active_deletes[donation.id] = true;
-                          }}
-                          tabindex="0"
-                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
-                      {/if}
-                    </td>
+                    <div class="text-sm font-medium text-gray-900">
+                      {$_("fixed-donation")}
+                    </div>
                   {/if}
-                </tr>
-              {/if}
-            {/each}
-          </tbody>
-        </table>
-      </div>
-    {/if}
-  {:catch error}
-    <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
-      <span class="inline-block align-middle mr-8">
-        <b class="capitalize">{$_('general_promise_error')}</b>
-        {error}
-      </span>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  {#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>
+                <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>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="text-sm font-medium text-gray-900">
+                    {(donation.paidAmount / 100)
+                      .toFixed(2)
+                      .toLocaleString("de-DE", { valute: "EUR" })}€
+                  </div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  {#if donation.status == "PAID"}
+                    <span
+                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
+                      >{$_("paid")}</span
+                    >
+                  {:else}
+                    <span
+                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
+                      >{$_("open")}</span
+                    >
+                  {/if}
+                </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[donation.id] = false;
+                      }}
+                      tabindex="0"
+                      class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
+                      >{$_("cancel-delete")}</button
+                    >
+                    <button
+                      on:click={() => {
+                        DonationService.donationControllerRemove(
+                          donation.id,
+                          false
+                        ).then((resp) => {
+                          current_donations = current_donations.filter(
+                            (obj) => obj.id !== donation.id
+                          );
+                          Toastify({
+                            text: $_("donation-deleted"),
+                            duration: 500,
+                            backgroundColor:
+                              "linear-gradient(to right, #00b09b, #96c93d)",
+                          }).showToast();
+                        });
+                      }}
+                      tabindex="0"
+                      class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+                      >{$_("confirm-delete")}</button
+                    >
+                  </td>
+                {:else}
+                  <td
+                    class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+                  >
+                    <button
+                      on:click={() => {
+                        open_payment_modal(donation);
+                      }}
+                      class="text-[#025a21] hover:text-green-900 mr-4"
+                      >{$_("enter-payment")}</button
+                    >
+                    <a
+                      href="./{donation.id}"
+                      class="text-indigo-600 hover:text-indigo-900"
+                      >{$_("details")}</a
+                    >
+                    {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:DELETE")}
+                      <button
+                        on:click={() => {
+                          active_deletes[donation.id] = true;
+                        }}
+                        tabindex="0"
+                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+                        >{$_("delete")}</button
+                      >
+                    {/if}
+                  </td>
+                {/if}
+              </tr>
+            {/if}
+          {/each}
+        </tbody>
+      </table>
     </div>
-  {/await}
+  {/if}
 {/if}