diff --git a/src/App.svelte b/src/App.svelte
index 0ec9b765..ff087e81 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -61,6 +61,7 @@
   import ResetPassword from "./components/auth/ResetPassword.svelte";
   import Contacts from "./components/contacts/Contacts.svelte";
   import ContactDetail from "./components/contacts/ContactDetail.svelte";
+import Donors from "./components/donors/Donors.svelte";
   store.init();
   registerSW();
 </script>
@@ -143,6 +144,11 @@
             <OrgDetail {params} />
           </Route>
         </Route>
+        <Route path="/donors/*">
+          <Route path="/">
+            <Donors />
+          </Route>
+        </Route>
         <Route path="/about">
           <About />
         </Route>
diff --git a/src/components/donors/Donors.svelte b/src/components/donors/Donors.svelte
new file mode 100644
index 00000000..70997331
--- /dev/null
+++ b/src/components/donors/Donors.svelte
@@ -0,0 +1,31 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import store from "../../store";
+  // import AddRunnerModal from "./AddRunnerModal.svelte";
+  // import ImportRunnerModal from "./ImportRunnerModal.svelte";
+  import DonorsOverview from "./DonorsOverview.svelte";
+  $: current_donors = [];
+  export let modal_open = false;
+  // export let import_modal_open = false;
+</script>
+
+<section class="container p-5">
+  <span class="mb-1 text-3xl font-extrabold leading-tight">
+    $_('donors')
+    {#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:CREATE')}
+      <button
+        on:click={() => {
+          modal_open = true;
+        }}
+        type="button"
+        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+        $_('add-donor')
+      </button>
+    {/if}
+  </span>
+  <DonorsOverview bind:current_donors />
+</section>
+
+<!-- {#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:CREATE')}
+  <AddRunnerModal bind:current_runners bind:modal_open />
+{/if} -->
diff --git a/src/components/donors/DonorsEmptyState.svelte b/src/components/donors/DonorsEmptyState.svelte
new file mode 100644
index 00000000..f0666ca3
--- /dev/null
+++ b/src/components/donors/DonorsEmptyState.svelte
@@ -0,0 +1,12 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import donors_empty from "./donors_empty.svg";
+</script>
+
+<div class="text-center items-center justify-center">
+  <p class="mb-16 text-lg text-gray-500">
+    <img class="w-full h-44" src={donors_empty} alt="" />
+    <span class="font-bold">there are no donors yet</span><br />
+    <span>add your first donor</span>
+  </p>
+</div>
diff --git a/src/components/donors/DonorsOverview.svelte b/src/components/donors/DonorsOverview.svelte
new file mode 100644
index 00000000..0b6b2610
--- /dev/null
+++ b/src/components/donors/DonorsOverview.svelte
@@ -0,0 +1,262 @@
+<script>
+  import { getLocaleFromNavigator, _ } from "svelte-i18n";
+  import {
+    DonorService,
+  } from "@odit/lfk-client-js";
+  import store from "../../store";
+  import DonorsEmptyState from "./DonorsEmptyState.svelte";
+  import Toastify from "toastify-js";
+  $: searchvalue = "";
+  $: active_deletes = [];
+  export let current_donors = [];
+  const donors_promise = DonorService.donorControllerGetAll().then((val) => {
+    current_donors = val;
+  });
+  function should_display_based_on_id(id) {
+    if (searchvalue.toString().slice(-1) === "*") {
+      return id.toString().startsWith(searchvalue.replace("*", ""));
+    }
+    return id.toString() === searchvalue;
+  }
+</script>
+
+{#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:GET')}
+  {#await donors_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="text-sm">{$_('this-might-take-a-moment')}</p>
+    </div>
+  {:then}
+    {#if current_donors.length === 0}
+      <DonorsEmptyState />
+    {:else}
+      <input
+        type="search"
+        bind:value={searchvalue}
+        placeholder={$_('datatable.search')}
+        aria-label={$_('datatable.search')}
+        class="gridjs-input gridjs-search-input mb-4" />
+      <!-- <div class="h-12">
+        {#if current_donors.some((d) => d.is_selected === true)}
+          <button
+            on:click={() => {
+              const locale = getLocaleFromNavigator();
+              const toast = Toastify({
+                text: $_('generating-pdf'),
+                duration: -1,
+              }).showToast();
+              fetch(
+                `https://dev.lauf-fuer-kaya.de/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
+                {
+                  method: 'POST',
+                  headers: {
+                    'Content-Type': 'application/json',
+                  },
+                  body: JSON.stringify(
+                    current_donors.filter((r) => r.is_selected === true)
+                  ),
+                }
+              )
+                .then((response) => {
+                  if (response.status != '200') {
+                    toast.hideToast();
+                    Toastify({
+                      text: $_('pdf-generation-failed'),
+                      duration: 3500,
+                      backgroundColor:
+                        'linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)',
+                    }).showToast();
+                  } else {
+                    return response.blob();
+                  }
+                })
+                .then((blob) => {
+                  const url = window.URL.createObjectURL(blob);
+                  let a = document.createElement('a');
+                  a.href = url;
+                  a.download = 'Sponsoring.pdf';
+                  document.body.appendChild(a);
+                  a.click();
+                  a.remove();
+                  toast.hideToast();
+                  Toastify({
+                    text: $_('pdf-successfully-generated'),
+                    duration: 3500,
+                    backgroundColor:
+                      'linear-gradient(to right, #00b09b, #96c93d)',
+                  }).showToast();
+                })
+                .catch((err) => {
+                  console.error(err);
+                });
+            }}
+            type="button"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:w-auto sm:text-sm">
+            {$_('generate-sponsoring-contracts')}
+          </button>
+        {/if}
+      </div> -->
+      <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">
+                <span
+                  on:click={() => {
+                    const newstate = !current_donors.some((d) => d.is_selected === true);
+                    current_donors = current_donors.map((r) => {
+                      r.is_selected = newstate;
+                      return r;
+                    });
+                  }}
+                  class="underline cursor-pointer select-none">{#if current_donors.some((d) => d.is_selected === true)}
+                    {$_('deselect-all')}
+                  {:else}{$_('select-all')}{/if}
+                </span>
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {$_('name')}
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {$_('contact-information')}
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                donations
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                total donation amount
+              </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_donors as donor}
+              {#if donor.firstname
+                .toLowerCase()
+                .includes(
+                  searchvalue.toLowerCase()
+                ) || donor.middlename
+                  .toLowerCase()
+                  .includes(
+                    searchvalue.toLowerCase()
+                  ) || donor.lastname
+                  .toLowerCase()
+                  .includes(
+                    searchvalue.toLowerCase()
+                  ) || should_display_based_on_id(donor.id)}
+                  <tr
+                    data-rowid="donor_{donor.id}">
+                    <td class="px-6 py-4 whitespace-nowrap">
+                      <input
+                        bind:checked={donor.is_selected}
+                        type="checkbox"
+                        class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+                    </td>
+                    <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>
+                      </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}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                      TODO
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                      {donor.donationAmount}
+                    </td>
+                    {#if active_deletes[donor.id] === true}
+                      <td
+                        class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                        <button
+                          on:click={() => {
+                            active_deletes[donor.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)
+                              .then((resp) => {
+                                current_donors = current_donors.filter((obj) => obj.id !== donor.id);
+                                Toastify({
+                                  text: 'Donor deleted',
+                                  duration: 500,
+                                  backgroundColor:
+                                    'linear-gradient(to right, #00b09b, #96c93d)',
+                                }).showToast();
+                              })
+                              // .catch((err) => {
+                              //   modal_open = true;
+                              //   delete_org = o;
+                              // });
+                          }}
+                          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">
+                        <a
+                          href="./{donor.id}"
+                          class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
+                        {#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:DELETE')}
+                          <button
+                            on:click={() => {
+                              active_deletes[donor.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>
+    {/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>
+    </div>
+  {/await}
+{/if}
diff --git a/src/components/donors/donors_empty.svg b/src/components/donors/donors_empty.svg
new file mode 100644
index 00000000..32053770
--- /dev/null
+++ b/src/components/donors/donors_empty.svg
@@ -0,0 +1 @@
+<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 854.63 686"><path fill="#3f3d56" d="M0 600h821v9.053H0zM0 676.947h821V686H0z"/><path d="M750.178 608.328c-.49-.802-12.06-20.12-16.071-60.234-3.68-36.802-1.313-98.836 30.858-185.367 60.947-163.928-14.046-296.194-14.812-297.512l3.7-2.146c.194.334 19.545 34.057 30.977 87.755a382.846 382.846 0 01-15.856 213.394c-60.844 163.648-15.61 241.118-15.146 241.882z" fill="#3f3d56"/><circle cx="726.346" cy="27.795" r="27.795" fill="#3f3d56"/><circle cx="814.007" cy="130.422" r="27.795" fill="#3f3d56"/><circle cx="754.141" cy="198.841" r="27.795" fill="#dfe5ee"/><circle cx="826.835" cy="256.569" r="27.795" fill="#dfe5ee"/><circle cx="732.76" cy="346.368" r="27.795" fill="#3f3d56"/><path d="M766.97 609.35s-27.796-68.418 55.59-119.731zM732.786 608.11s-12.65-72.758-110.557-72.134z" fill="#3f3d56"/><circle cx="136.5" cy="387.5" r="41" fill="#a0616a"/><path d="M143.928 336.504c-7.84-1.925-16.272-2.247-23.868.49-7.824 2.817-14.263 8.708-19 15.542s-7.918 14.613-10.767 22.425a78.442 78.442 0 00-3.845 13.14 44.992 44.992 0 008.167 34.325c-1.2-3.166 1.822-6.617 5.138-7.303s6.693.474 9.963 1.353a61.559 61.559 0 0017.68 2.078c2.284-.065 4.679-.295 6.578-1.565 5.952-3.98 2.802-14.263 7.754-19.434 1.767-1.845 4.29-2.708 6.567-3.865 8.2-4.167 13.604-12.576 16.156-21.413 1.599-5.54 5.567-21.45 2.185-26.598-3.057-4.653-17.516-7.9-22.708-9.175z" fill="#2f2e41"/><path d="M248.066 342.291a24.396 24.396 0 00-18.677 1.041c-10.695 5.016-29.608 17.167-28.889 40.168 1 32 12 53 12 53l-2 65-10 118s-49 40-30 50 51-48 51-48l25-67 9-65s15-68 0-98c0 0 17.328-40.17-7.434-49.209zM367.5 445.5s-17 72 43 92 139 54 139 54l10 17 23-31-4-24-39-11s-73-56-105-60l4-37zM527.307 387.717L548.5 422.5s70 40 88 67 61 56 61 56l-19 45s-54-63-77-69-125-88-125-88z" fill="#a0616a"/><path d="M338.568 265.819c-7.805 1.226-15.617 2.454-23.33 4.174-17.917 3.995-35.147 10.616-51.966 17.974a608.405 608.405 0 00-68.447 35.267 132.255 132.255 0 00-16.97 11.523c-3.559 2.964-6.91 6.363-8.82 10.584a33.406 33.406 0 00-2.33 9.221c-1.55 11.12-1.477 22.595 1.535 33.41s9.124 20.955 18.119 27.674a29.88 29.88 0 007.84 4.348 45.675 45.675 0 0011.675 1.957c12.617 1.003 25.798 1.923 37.474-2.964 7.42-3.105 13.701-8.354 20.528-12.607 28.913-18.008 65.646-17.241 97.26-29.92 3.074-1.233 6.204-2.67 8.354-5.189a22.578 22.578 0 003.62-7.187l11.99-33.188c2.533-7.01 5.067-14.023 7.193-21.167 2.224-7.472 3.996-15.07 5.766-22.661 1.524-6.534 3.093-13.376 2.507-20.13-.864-9.962-3.166-10.367-12.316-8.925q-24.839 3.915-49.682 7.806z" fill="#dfe5ee"/><path d="M218.066 342.291a24.396 24.396 0 00-18.677 1.041c-10.695 5.016-29.608 17.167-28.889 40.168 1 32 12 53 12 53l-2 65-10 118s-49 40-30 50 51-48 51-48l25-67 9-65s15-68 0-98c0 0 17.328-40.17-7.434-49.209z" fill="#a0616a"/><path d="M391.66 257.544S480.5 249.5 476.5 304.5s-34 150-34 150l-77 4s-10-65 4-87z" fill="#2f2e41"/><path d="M453.5 275.5s22 14 34 42 48 83 48 83l-59 42-44-45zM559.5 587.5s-19 7-6 21a126.61 126.61 0 0120 29s-4 26 13 25 24-36 20-48-9-69-9-69-35 3-34 8 6 30-4 34zM678.5 567.5s-18 9-13 17 21 31 21 31-6 30 11 33 27-36 24-44-3-39-3-39 1-31-9-31-27 4-27 4 4 28-4 29z" fill="#2f2e41"/><path fill="#dfe5ee" d="M96 617.871h29v50.612H96z"/></svg>
\ No newline at end of file