diff --git a/src/components/donations/AddDonationModal.svelte b/src/components/donations/AddDonationModal.svelte
new file mode 100644
index 00000000..ae7624d4
--- /dev/null
+++ b/src/components/donations/AddDonationModal.svelte
@@ -0,0 +1,289 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "../base/outsideclick";
+  import { focusTrap } from "svelte-focus-trap";
+  import {
+    DonationService,
+    DonorService,
+    RunnerService,
+  } from "@odit/lfk-client-js";
+  import Toastify from "toastify-js";
+  export let modal_open;
+  export let current_donations;
+  function focus(el) {
+    el.focus();
+  }
+  $: donor = 0;
+  $: runner = 0;
+  $: donors = [];
+  $: runners = [];
+  $: is_fixed = false;
+  DonorService.donorControllerGetAll().then((val) => {
+    donors = val;
+    donor = donors[0].id || 0;
+  });
+  RunnerService.runnerControllerGetAll().then((val) => {
+    runners = val;
+    runner = runners[0].id || 0;
+  });
+  $: amount_input = 0;
+  $: processed_last_submit = true;
+  $: is_amount_valid = amount_input > 0;
+  $: createbtnenabled = is_amount_valid;
+  (() => {
+    document.onkeydown = (e) => {
+      e = e || window.event;
+      if (e.key === "Escape") {
+        modal_open = false;
+      }
+      if (e.keyCode === 13) {
+        if (createbtnenabled === true) {
+          createbtnenabled = false;
+          submit();
+        }
+      }
+    };
+  })();
+  function submit() {
+    if (processed_last_submit === true) {
+      let amount_cent = Math.floor(amount_input * 100);
+      processed_last_submit = false;
+      const toast = Toastify({
+        text: "adding donation",
+        duration: -1,
+      }).showToast();
+      if (is_fixed) {
+        let postdata = {
+          donor,
+          amount: amount_cent,
+        };
+        DonationService.donationControllerPostFixed(postdata)
+          .then((result) => {
+            donor = donors[0].id || 0;
+            runner = runners[0].id || 0;
+            modal_open = false;
+            //
+            Toastify({
+              text: "donation_added",
+              duration: 500,
+              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+            }).showToast();
+            current_donations.push(result);
+            current_donations = current_donations;
+          })
+          .catch((err) => {
+            //
+          })
+          .finally(() => {
+            processed_last_submit = true;
+            //
+            toast.hideToast();
+          });
+      } else {
+        let postdata = {
+          donor,
+          runner,
+          amountPerDistance: amount_cent,
+        };
+        DonationService.donationControllerPostDistance(postdata)
+          .then((result) => {
+            donor = donors[0].id || 0;
+            runner = runners[0].id || 0;
+            modal_open = false;
+            //
+            Toastify({
+              text: "donation_added",
+              duration: 500,
+              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+            }).showToast();
+            current_donations.push(result);
+            current_donations = current_donations;
+          })
+          .catch((err) => {
+            //
+          })
+          .finally(() => {
+            processed_last_submit = true;
+            //
+            toast.hideToast();
+          });
+      }
+    }
+  }
+</script>
+
+<style>
+  input:before {
+    content: "";
+    position: absolute;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 50%;
+    top: 0;
+    left: 0;
+    transform: scale(1.1);
+    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.2);
+    background-color: white;
+    transition: 0.2s ease-in-out;
+  }
+
+  input:checked {
+    /* @apply: bg-indigo-400; */
+    background-color: #7f9cf5;
+  }
+
+  input:checked:before {
+    left: 1.25rem;
+  }
+</style>
+
+{#if modal_open}
+  <div
+    class="fixed z-10 inset-0 overflow-y-auto"
+    use:focusTrap
+    use:clickOutside
+    on:click_outside={() => {
+      modal_open = false;
+    }}>
+    <div
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+        <div
+          class="absolute inset-0 bg-gray-500 opacity-75"
+          data-id="modal_backdrop" />
+      </div>
+      <span
+        class="hidden sm:inline-block sm:align-middle sm:h-screen"
+        aria-hidden="true">&#8203;</span>
+      <div
+        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-headline">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+          <div class="sm:flex sm:items-start">
+            <div
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+              <svg
+                class="h-6 w-6 text-blue-600"
+                fill="currentColor"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                width="24"
+                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                <path
+                  d="M9.33 11.5h2.17A4.5 4.5 0 0 1 16 16H8.999L9 17h8v-1a5.578 5.578 0 0 0-.886-3H19a5 5 0 0 1 4.516 2.851C21.151 18.972 17.322 21 13 21c-2.761 0-5.1-.59-7-1.625L6 10.071A6.967 6.967 0 0 1 9.33 11.5zM5 19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9zM18 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-7-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z" /></svg>
+            </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">
+                Create a new
+                {#if is_fixed}fixed{:else}distance{/if}
+                donation
+              </h3>
+              <label class="content-center align-middle object-center">
+                <span
+                  class="ml-2"
+                  class:text-gray-300={is_fixed}>Distance</span>
+                <input
+                  class="relative w-10 h-5 transition-all duration-200 ease-in-out bg-gray-400 rounded-full shadow-inner outline-none appearance-none "
+                  type="checkbox"
+                  bind:checked={is_fixed} />
+                <span
+                  class="ml-2"
+                  class:text-gray-300={!is_fixed}>Fixed</span>
+              </label>
+              <div class="mt-2 mb-6">
+                <p class="text-sm text-gray-500">
+                  Please provide the nessecary information to create a new
+                  donation
+                </p>
+              </div>
+              <div class="grid grid-cols-6 gap-6">
+                <div class="col-span-6">
+                  <label
+                    for="donor"
+                    class="block text-sm font-medium text-gray-700">Donor</label>
+                  <select
+                    bind:value={donor}
+                    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 donors as d}
+                      <option value={d.id}>
+                        {d.firstname}
+                        {d.middlename}
+                        {d.lastname}
+                      </option>
+                    {/each}
+                  </select>
+                </div>
+                {#if !is_fixed}
+                  <div class="col-span-6">
+                    <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>
+                  </div>
+                {/if}
+                <div class="col-span-6">
+                  <label
+                    for="donation_amount_eur"
+                    class="block text-sm font-medium text-gray-700">Donation
+                    amount
+                    {#if !is_fixed}per Kilometer{/if}</label>
+                  <div class="mt-1 flex rounded-md shadow-sm">
+                    <input
+                      autocomplete="off"
+                      class:border-red-500={is_amount_valid}
+                      class:focus:border-red-500={is_amount_valid}
+                      class:focus:ring-red-500={is_amount_valid}
+                      bind:value={amount_input}
+                      type="number"
+                      step="0.01"
+                      name="donation_amount_eur"
+                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
+                      placeholder="2.00" />
+                    <span
+                      class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">€</span>
+                  </div>
+                  {#if !is_amount_valid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Donation amount must be greater that 0.00€
+                    </span>
+                  {/if}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+          <button
+            disabled={!createbtnenabled}
+            class:opacity-50={!createbtnenabled}
+            on:click={submit}
+            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">
+            {$_('create')}
+          </button>
+          <button
+            on:click={() => {
+              modal_open = false;
+            }}
+            type="button"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+            {$_('cancel')}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}