chore(release): 1.9.5

feat: modal improvements
chore(release): 1.9.4
2025-03-29 02:23:51 +01:00 · 2025-03-29 02:23:32 +01:00 · 2025-03-29 02:00:45 +01:00 · 2025-03-29 02:00:27 +01:00 · 2025-03-29 01:45:52 +01:00 · 2025-03-29 01:45:25 +01:00
166 changed files with 19030 additions and 15369 deletions
--- a/.devcontainer/Dockerfile
+++ b/.devcontainer/Dockerfile
@@ -1,6 +0,0 @@
 FROM mcr.microsoft.com/vscode/devcontainers/base:alpine-3.12
 RUN apk update
 RUN apk add --upgrade nodejs-current npm
 RUN npm i -g yarn rimraf
 RUN rimraf node_modules
 RUN yarn set version berry
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -1,20 +0,0 @@
 {
 	"name": "Node.js",
 	"build": {
 		"dockerfile": "Dockerfile"
 	},
 	"settings": {
 		"terminal.integrated.shell.linux": "/bin/sh"
 	},
 	"extensions": [
 		"dbaeumer.vscode-eslint",
 		"2gua.rainbow-brackets",
 		"christian-kohler.npm-intellisense",
 		"remimarsal.prettier-now",
 		"svelte.svelte-vscode",
 		"lokalise.i18n-ally",
 		"fivethree.vscode-svelte-snippets",
 		"voorjaar.windicss-intellisense"
 	],
 	"postCreateCommand": "yarn && yarn dev --open"
 }
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,2 +1,4 @@
 public/env.sample.js
 .pnpm-store
 .yarn
 .pnp.*
--- a/.drone.yml
+++ b/.drone.yml
@@ -1,101 +0,0 @@
 ---
 kind: secret
 name: docker_username
 get:
  path: odit-registry-builder
  name: username
 ---
 kind: secret
 name: docker_password
 get:
  path: odit-registry-builder
  name: password
 ---
 kind: secret
 name: git_ssh
 get:
  path: odit-git-bot
  name: sshkey
 ---
 kind: secret
 name: npm_url
 get:
  path: odit-npm-cache
  name: url
 ---
 kind: pipeline
 type: kubernetes
 name: build:dev
 steps:
  - name: run full license export
    depends_on: ["clone"]
    image: registry.odit.services/hub/library/node:19.7.0-alpine3.16
    commands:
      - npm config set registry $NPM_REGISTRY_URL && npm i -g pnpm@8
      - pnpm i
      - pnpm licenses:export
    environment:
      NPM_REGISTRY_URL:
        from_secret: npm_url
  - name: push new licenses file to repo
    depends_on: ["run full license export"]
    image: appleboy/drone-git-push
    settings:
      branch: dev
      commit: true
      commit_message: new license file version [CI SKIP]
      author_email: bot@odit.services
      remote: git@git.odit.services:lfk/frontend.git
      ssh_key:
        from_secret: git_ssh
  - name: build dev
    depends_on: ["clone"]
    image: registry.odit.services/library/drone-kaniko
    settings:
      username:
        from_secret: docker_username
      password:
        from_secret: docker_password
      build_args:
        - NPM_REGISTRY_URL:
          from_secret: npm_url
      repo: lfk/frontend
      tags:
        - dev
      cache: true
      registry: registry.odit.services
 trigger:
  branch:
    - dev
  event:
    - push
 ---
 kind: pipeline
 type: kubernetes
 name: build:tags
 steps:
  - name: build $DRONE_TAG
    depends_on: ["clone"]
    image: registry.odit.services/library/drone-kaniko
    settings:
      username:
        from_secret: docker_username
      password:
        from_secret: docker_password
      build_args:
        - NPM_REGISTRY_URL:
          from_secret: npm_url
      repo: lfk/frontend
      tags:
        - "${DRONE_TAG}"
      cache: true
      registry: registry.odit.services
 trigger:
  event:
  - tag
--- a/.gitea/workflows/release.yaml
+++ b/.gitea/workflows/release.yaml
@@ -0,0 +1,33 @@
 name: Build release images
 on:
  push:
    tags:
      - "*.*.*"
 jobs:
  build-container:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 19
      - run: npm i -g pnpm@10.7 && pnpm i
      - run: pnpm licenses:export
      - name: Login to registry
        uses: docker/login-action@v3
        with:
          registry: registry.odit.services
          username: ${{ vars.REGISTRY_USERNAME }}
          password: ${{ secrets.REGISTRY_PASSWORD }}
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3
      - name: Build and push
        uses: docker/build-push-action@v6
        with:
          push: true
          tags: |
            ${{ vars.REGISTRY }}/lfk/frontend:${{ github.ref_name }}
          platforms: linux/amd64,linux/arm64
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,5 @@ public/env.js
 public/index.html
 /dist
 .pnpm-store
 .yarn
 .pnp.*
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,14 +1,12 @@
 {
-    "recommendations": [
+  "recommendations": [
-        "2gua.rainbow-brackets",
+    "2gua.rainbow-brackets",
-        "christian-kohler.npm-intellisense",
+    "christian-kohler.npm-intellisense",
-        "remimarsal.prettier-now",
+    "remimarsal.prettier-now",
-        "svelte.svelte-vscode",
+    "svelte.svelte-vscode",
-        "lokalise.i18n-ally",
+    "lokalise.i18n-ally",
-        "fivethree.vscode-svelte-snippets",
+    "fivethree.vscode-svelte-snippets",
-        "voorjaar.windicss-intellisense"
+    "voorjaar.windicss-intellisense"
-    ],
+  ],
-    "unwantedRecommendations": [
+  "unwantedRecommendations": ["antfu.i18n-ally"]
        "antfu.i18n-ally"
    ]
 }
--- a/.vscode/i18n-ally-custom-framework.yml
+++ b/.vscode/i18n-ally-custom-framework.yml
@@ -1,7 +1,7 @@
 languageIds:
-    - javascript
+  - javascript
-    - svelte
+  - svelte
-    - html
+  - html
 monopoly: false
 refactorTemplates:
-    - "{$_('$1')}"
+  - "{$_('$1')}"
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,5 +1,5 @@
 {
-    "i18n-ally.localesPaths": "src/locales",
+  "i18n-ally.localesPaths": "src/locales",
-    "i18n-ally.keystyle": "nested",
+  "i18n-ally.keystyle": "nested",
-    "windicss.enableCodeFolding": false,
+  "windicss.enableCodeFolding": false
 }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,8 +2,332 @@
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 #### [1.9.5](https://git.odit.services/lfk/frontend/compare/1.9.4...1.9.5)
 - feat: modal improvements [`d7e84a7`](https://git.odit.services/lfk/frontend/commit/d7e84a79a892294d532cc93aa3391c14a7a5ce99)
 #### [1.9.4](https://git.odit.services/lfk/frontend/compare/1.9.3...1.9.4)
 > 29 March 2025
 - feat: improve modals [`90b0fec`](https://git.odit.services/lfk/frontend/commit/90b0fec2366b608d163decdcd8798e879cf8218d)
 - chore(release): 1.9.4 [`102471e`](https://git.odit.services/lfk/frontend/commit/102471eaaae390d3ef815afde9ac4081be7d5dbc)
 #### [1.9.3](https://git.odit.services/lfk/frontend/compare/1.9.2...1.9.3)
 > 29 March 2025
 - feat: modal improvements [`fbe38ee`](https://git.odit.services/lfk/frontend/commit/fbe38eede95813e163a390b693790d78ce75c215)
 - feat: modal improvements [`22551c3`](https://git.odit.services/lfk/frontend/commit/22551c379f704b0d9c28c499f7d3f5a37f1533ca)
 - ci: only tagged runs for now [`e9dffce`](https://git.odit.services/lfk/frontend/commit/e9dffcea835cbcd6b5eb4ed1cc3feb62a9e831db)
 - chore(release): 1.9.3 [`4883e17`](https://git.odit.services/lfk/frontend/commit/4883e179e7090cf90783dcdecd5df8a422880188)
 - feat: modal improvements [`13c6e96`](https://git.odit.services/lfk/frontend/commit/13c6e96292613d9619f779f2557201cf0b938753)
 - feat(OrgDetail): improve selfservice link copy [`f547c0c`](https://git.odit.services/lfk/frontend/commit/f547c0cc817d7db0c70df4059dad753e9b16c1c9)
 - chore(deps): pnpm@10.7 [`b9563d7`](https://git.odit.services/lfk/frontend/commit/b9563d75dd15519d9ec5d425d628d232e7609913)
 - fix: sidebar [`a102af5`](https://git.odit.services/lfk/frontend/commit/a102af5a78c83cd54b4981bff2f6c8d54cf8c74c)
 #### [1.9.2](https://git.odit.services/lfk/frontend/compare/1.9.1...1.9.2)
 > 28 March 2025
 - chore: update lfk client [`f4542ad`](https://git.odit.services/lfk/frontend/commit/f4542adf3b7c757d907c979b989450b64553d750)
 - feat(dashboard): show runners via selfservice count [`0ee43f8`](https://git.odit.services/lfk/frontend/commit/0ee43f80a65bb5b83d51d6c098bd203bc09e2f1f)
 - chore(release): 1.9.2 [`3a56942`](https://git.odit.services/lfk/frontend/commit/3a569422ad7d68d0009fa73229dd73ee00be87a9)
 - refactor: change release message [`9f0623d`](https://git.odit.services/lfk/frontend/commit/9f0623d194a7784d4ede3cb6a6cd10d0aea4a180)
 #### [1.9.1](https://git.odit.services/lfk/frontend/compare/1.9.0...1.9.1)
 > 28 March 2025
 - refactor: project cleanup [`04897c7`](https://git.odit.services/lfk/frontend/commit/04897c7d2e89cb7e834815907409698ad6758637)
 - 🚀RELEASE v1.9.1 [`5bab95a`](https://git.odit.services/lfk/frontend/commit/5bab95a9423d9da8c17165732b988ca868f950a5)
 - feat(RunnerDetail): show created_via [`a4fbaba`](https://git.odit.services/lfk/frontend/commit/a4fbabaf9a0a9a26b6c6782056f11b8a646b8f16)
 - feat(ConfirmTeamDeletionModal): success toast [`831f369`](https://git.odit.services/lfk/frontend/commit/831f36946d5db777ca77855161f653f861cbd56e)
 #### [1.9.0](https://git.odit.services/lfk/frontend/compare/1.8.2...1.9.0)
 > 28 March 2025
 - feat: improved ConfirmOrgDeletionModal [`fecf3b5`](https://git.odit.services/lfk/frontend/commit/fecf3b59a320afafee52c95b361edec644c5cbff)
 - feat: modal improvements [`f5a46aa`](https://git.odit.services/lfk/frontend/commit/f5a46aa203ca2adf2e4e6fe4863629ca80f1becb)
 - feat: improve ConfirmTeamDeletionModal [`a2cd54f`](https://git.odit.services/lfk/frontend/commit/a2cd54fba4a987f7f7dbab22cc958f9aea2817ff)
 - feat: improve modals [`443371e`](https://git.odit.services/lfk/frontend/commit/443371e2fdc42506e6e87379bd65facbd8f22d7d)
 - feat: improve toasts [`481f6b6`](https://git.odit.services/lfk/frontend/commit/481f6b686e77ffa36ee08b62f653d626dd9124c9)
 - feat: improve modals [`e7a69eb`](https://git.odit.services/lfk/frontend/commit/e7a69ebdca668a5d78b52d092aa1bca6259aa19b)
 - 🚀RELEASE v1.9.0 [`b7e6fda`](https://git.odit.services/lfk/frontend/commit/b7e6fdaeacf17a7cc77109460b5e2c6d3775ef7b)
 - feat: improve translations [`d7ab924`](https://git.odit.services/lfk/frontend/commit/d7ab9247cd2eab4f7269b23de5fada76a99ac8bc)
 - feat: improved translations [`18a4623`](https://git.odit.services/lfk/frontend/commit/18a4623e71dfd942f2268203ce713030acfb2d9d)
 - feat: improve translations [`9048f3d`](https://git.odit.services/lfk/frontend/commit/9048f3df774df233705a41b08012193447eab803)
 - feat: improved sidebar z-index [`968a7cc`](https://git.odit.services/lfk/frontend/commit/968a7ccc0e7917bf1a42ac8f85f358880951cc2a)
 - feat: improved track deletion ui feedback [`194c3c4`](https://git.odit.services/lfk/frontend/commit/194c3c4886e3f3206d76d8634be9d3dd2fa02d8d)
 #### [1.8.2](https://git.odit.services/lfk/frontend/compare/1.8.1...1.8.2)
 > 26 March 2025
 - feat: improvement of card,certificate,sponsoringcontract action buttons [`7633b7b`](https://git.odit.services/lfk/frontend/commit/7633b7b05671342bc30e0bbecbcd9450e06b5e4d)
 - 🚀RELEASE v1.8.2 [`6249502`](https://git.odit.services/lfk/frontend/commit/6249502a88ec5bfba6dfbc3ad5ede82d71d0d9e2)
 - feat(dashboard): active item for teams + runners [`8a78034`](https://git.odit.services/lfk/frontend/commit/8a780340792445fff1f78db994fb78acb5da8304)
 #### [1.8.1](https://git.odit.services/lfk/frontend/compare/1.8.0...1.8.1)
 > 26 March 2025
 - 🚀RELEASE v1.8.1 [`b8e6b24`](https://git.odit.services/lfk/frontend/commit/b8e6b24bf32379c3f4a1679d422e6fdcc45f7c99)
 - fix(pdf_generation): Only load direct runners for direct calls [`97b7ca9`](https://git.odit.services/lfk/frontend/commit/97b7ca931f607ee64509ad10c2269632fc691091)
 #### [1.8.0](https://git.odit.services/lfk/frontend/compare/1.7.0...1.8.0)
 > 26 March 2025
 - wip [`824ecfa`](https://git.odit.services/lfk/frontend/commit/824ecfab2e976cd7c6cd2851be8a9be5c6b686e1)
 - wip [`0a6cf61`](https://git.odit.services/lfk/frontend/commit/0a6cf619b09be837d5503f4695250c7edaeeaff5)
 - feat: improve fonts + button positions [`c37fb98`](https://git.odit.services/lfk/frontend/commit/c37fb98bed377744981e927ea8d22db9e20c55ca)
 - 🚀RELEASE v1.8.0 [`48dd9ac`](https://git.odit.services/lfk/frontend/commit/48dd9acde595b882630855d5e6af3cfa18fc9ecf)
 - wip [`1bc5314`](https://git.odit.services/lfk/frontend/commit/1bc53146b9f024f3cab613b227d29304d687c92b)
 - wip [`e82350d`](https://git.odit.services/lfk/frontend/commit/e82350df4af082d2bbb322658c6c022d83b819ae)
 - wip [`37cdbba`](https://git.odit.services/lfk/frontend/commit/37cdbba0a3563875e19bee560f2cd5c8fc2d7a6e)
 - feat: improve input readability [`79e6a42`](https://git.odit.services/lfk/frontend/commit/79e6a4212d06029766d0a853686ed97879ebd349)
 - wip [`5f5d827`](https://git.odit.services/lfk/frontend/commit/5f5d8277b98363ef15a92621fca0a209345aca95)
 - chore(deps): bump [`bb2319a`](https://git.odit.services/lfk/frontend/commit/bb2319a78d253a2d6239a0d3daedc90fd29abdd0)
 - feat: cleanup TeamDetail + OrgDetail [`f734d1e`](https://git.odit.services/lfk/frontend/commit/f734d1e3f643a500a6432a389c3103045cc51262)
 - refactor(ci): Switch to actions for dev [`847fa28`](https://git.odit.services/lfk/frontend/commit/847fa288f1b5bbc422cc2944bbe66e80c5a00407)
 - refactor(ci): Add Gitea workflow for building release images and remove Woodpecker configuration [`3ec18a6`](https://git.odit.services/lfk/frontend/commit/3ec18a696435ada26bf2de2220b190dc630a9759)
 - feat: athiti font [`391186d`](https://git.odit.services/lfk/frontend/commit/391186d01f3b96638a3569dc2843bf181dc3f02c)
 - fix(DonorDetail): donor deletion [`5147a20`](https://git.odit.services/lfk/frontend/commit/5147a20b3c4a46968482b1e3517047351c94f77e)
 - feat(dashboard): full width for sidebar items [`975f145`](https://git.odit.services/lfk/frontend/commit/975f145444e5a478524ea2cbbfb9059b93617185)
 - wip [`3d3ce29`](https://git.odit.services/lfk/frontend/commit/3d3ce2918bc20cf1080a2b5153ddd8aaf51374b4)
 - feat(RunnerOrganizationService.runnerOrganizationControllerGetRunners): load all runners in org [`7c10d95`](https://git.odit.services/lfk/frontend/commit/7c10d95c1c68f4842fd323698e004a5ebf2c96cf)
 - wip [`050a146`](https://git.odit.services/lfk/frontend/commit/050a146ae070d67d8308db4b9612fd6eacbb9923)
 - fix(ci): Correct tag pattern syntax in release workflow [`e567bb3`](https://git.odit.services/lfk/frontend/commit/e567bb35c3b3f6eb73a2f0bc72f601e70f881ac8)
 #### [1.7.0](https://git.odit.services/lfk/frontend/compare/1.6.0...1.7.0)
 > 17 December 2024
 - refactor(pdfgeneration): Switch cards over to new service [`e230984`](https://git.odit.services/lfk/frontend/commit/e23098410c7d0b326cdbbb3a4b63fed10611e252)
 - refactor(pdfgeneration): Switch to new document-server api [`878d971`](https://git.odit.services/lfk/frontend/commit/878d9714cbc0a60cfd96bd1faf8af6af46e6fb5e)
 - refactor(pdfgeneration): Switched contract generation over to new document-server [`f99b7f4`](https://git.odit.services/lfk/frontend/commit/f99b7f4bb8f166bb966022ddd10689c082d248f0)
 - refactor(cards): Switched over to new document-server api [`65ce02e`](https://git.odit.services/lfk/frontend/commit/65ce02e777e6e9b3cfed248de680e5f292b3a639)
 - 🚀RELEASE v1.7.0 [`ae056cd`](https://git.odit.services/lfk/frontend/commit/ae056cd88cb27f003845fa4534553cde841c7f99)
 - fix(pdfgeneration): Added parent_group [`7f989b2`](https://git.odit.services/lfk/frontend/commit/7f989b206b16e2687d01a38da8e3ea9be0a52ba5)
 #### [1.6.0](https://git.odit.services/lfk/frontend/compare/1.5.3...1.6.0)
 > 11 December 2024
 - refactor(orgs): Swtich to new selfservice baseurl [`e2d6fbb`](https://git.odit.services/lfk/frontend/commit/e2d6fbb513dc9fe7ce05855edb4b0b4b5daeb07a)
 - chore: bump [`04494d2`](https://git.odit.services/lfk/frontend/commit/04494d2a2a542f25f785f3bb23e49e5eb0691c0a)
 #### [1.5.3](https://git.odit.services/lfk/frontend/compare/1.5.2...1.5.3)
 > 26 November 2024
 - feat(dx): Yarn support [`fc15c68`](https://git.odit.services/lfk/frontend/commit/fc15c68cba0d1986563eaf63da3a68784a685a9e)
 - feat(about): cleanup ui [`84aa846`](https://git.odit.services/lfk/frontend/commit/84aa846b87186b52a2f8632724d4f2cb70af062b)
 - feat(dashboard): reorder menu items [`e967d8d`](https://git.odit.services/lfk/frontend/commit/e967d8d20c6972b64b0096594a09043553e9c7e5)
 - fix: unexpected/ missing props [`d803f3d`](https://git.odit.services/lfk/frontend/commit/d803f3d4905d6f792b77d17025467ac13c29068b)
 - chore(deps): bump some [`68b4309`](https://git.odit.services/lfk/frontend/commit/68b4309164eac40b6fda969b60a7e238985d49f8)
 - 🚀RELEASE v1.5.3 [`477c650`](https://git.odit.services/lfk/frontend/commit/477c650f3f6dd2eadf5f1cc404e8fc9b02a7841b)
 - fix(ci): Switch over to new woodpecker version [`7ba890d`](https://git.odit.services/lfk/frontend/commit/7ba890dfd7ba908ebef0338f6faa5e7d804cb5ef)
 - refactor(ci): Only build licences, don't export [`32b5f54`](https://git.odit.services/lfk/frontend/commit/32b5f5420bf9ff656b713d61b3a0113b9d6cb69f)
 - feat: cleanup random page toasts [`ad4db88`](https://git.odit.services/lfk/frontend/commit/ad4db882f0f4d00a80ae5e0072e09c071c07ffa2)
 - fix(ci): Update git pushb settings [`ee87f82`](https://git.odit.services/lfk/frontend/commit/ee87f82799ce559fd43d671ab412f2643eafeac6)
 - fix(ci): Update relase machanism [`7c08f52`](https://git.odit.services/lfk/frontend/commit/7c08f522aa4b2986544a4c0e5d3261c4c7296121)
 - fix(ci): Install pnpm [`e211554`](https://git.odit.services/lfk/frontend/commit/e211554579b1f27d13194eff4aad76f6f030141e)
 - fix(orgs): ImportRunnerModal props [`5468766`](https://git.odit.services/lfk/frontend/commit/5468766d875a6278f01ed1fd9573688374befdd5)
 #### [1.5.2](https://git.odit.services/lfk/frontend/compare/1.5.1...1.5.2)
 > 21 November 2024
 - feat: improved dashboard titles ui + a11y [`21453ef`](https://git.odit.services/lfk/frontend/commit/21453ef272665c0b7c7b04009b7b74e110fbd988)
 - feat: improved dashboard titles ui + a11y [`c883920`](https://git.odit.services/lfk/frontend/commit/c883920caaaaef30a8e54dd0e7eecd68943f3041)
 - feat(dashboard): improved a11y of active sidebar menu item [`a50447f`](https://git.odit.services/lfk/frontend/commit/a50447f457ecc045995efb7b952b07ea09c91373)
 - feat: improved mobile buttons + search ui [`38fb111`](https://git.odit.services/lfk/frontend/commit/38fb111f7a2b5a1a01b17b00e89ee081e4b91bd9)
 - feat(i18n/de): rename "Track" to "Laufstrecke" [`1018243`](https://git.odit.services/lfk/frontend/commit/10182433f825968ee55298399b231173698a795c)
 - 🚀RELEASE v1.5.2 [`3532968`](https://git.odit.services/lfk/frontend/commit/3532968b3399b985b1ed28ba6b89a13f35f9289b)
 - feat(dashboard): improved mobile ui hamburger button [`b338f33`](https://git.odit.services/lfk/frontend/commit/b338f33a63ad8e98ab44deff2f80dbd5fe2a0fc2)
 - feat(dashboard): match greeting style with rest of titles [`b1a2044`](https://git.odit.services/lfk/frontend/commit/b1a20446314d1b25e9f653bd2767b072fd629f97)
 - feat(dashboard): add lfk icon and app name to mobile nav bar [`6bb49db`](https://git.odit.services/lfk/frontend/commit/6bb49db4eee95486f5a947d708b80a7a94d36933)
 - feat(users/UsersOverview): improve ui by adding borders to badges [`cb82200`](https://git.odit.services/lfk/frontend/commit/cb82200481c629a0dd8b235821115ae4276948ca)
 #### [1.5.1](https://git.odit.services/lfk/frontend/compare/1.5.0...1.5.1)
 > 21 November 2024
 - chore(deps): pnpm@9 [`35bec9f`](https://git.odit.services/lfk/frontend/commit/35bec9fe584b93cd52e8bab4e469713468a67f70)
 - chore(deps): bump some [`8fae1fb`](https://git.odit.services/lfk/frontend/commit/8fae1fb6b3e033f789d2568cbd2640c0d163dc53)
 - fix(scanstations): CopyScanStationTokenModal open after create [`372fa11`](https://git.odit.services/lfk/frontend/commit/372fa110ec402dae166a302f2209c79353983148)
 - 🚀RELEASE v1.5.1 [`9abf74d`](https://git.odit.services/lfk/frontend/commit/9abf74d6d217e7745c1055bdbfbe97de7b14572f)
 - fix(config): add explicit window.config [`91d2f46`](https://git.odit.services/lfk/frontend/commit/91d2f46b934bcba1429bd1d96e772c25c42a3e28)
 - fix(dockerfile): AS casing [`50e81a6`](https://git.odit.services/lfk/frontend/commit/50e81a6cb5773381e153cbec3bed7db820ced84a)
 - refactor(scanstations/CopyScanStationTokenModal): drop dispatch [`a5e72a1`](https://git.odit.services/lfk/frontend/commit/a5e72a18e368b5a7ee7b4e1894de613ecb767f28)
 - chore(deps): node:23.2.0 [`93d67bd`](https://git.odit.services/lfk/frontend/commit/93d67bdba90a67b45d8895d9facaf66e908d53d6)
 - fix(tracks/AddTrackModal): i18n [`c60bae4`](https://git.odit.services/lfk/frontend/commit/c60bae45334c2aa90d8931da07691c196469da46)
 - fix: tailwind config [`43ac878`](https://git.odit.services/lfk/frontend/commit/43ac878d44b556c6d7811610f6fe0c9a5eff305f)
 #### [1.5.0](https://git.odit.services/lfk/frontend/compare/1.4.13...1.5.0)
 > 20 November 2024
 - feat(ci)!: Switch to woodpecker [`fb8206f`](https://git.odit.services/lfk/frontend/commit/fb8206ff130f4f65dcf619a2a786e7d5895b77a1)
 - 🚀RELEASE v1.5.0 [`ceabd06`](https://git.odit.services/lfk/frontend/commit/ceabd06a4319c3c9ffab680f909730d5bd789540)
 - fix(components): Add missing toast imports [`9bfc0c5`](https://git.odit.services/lfk/frontend/commit/9bfc0c5338933e832d5df50457c7978c026d8df6)
 #### [1.4.13](https://git.odit.services/lfk/frontend/compare/1.4.12...1.4.13)
 > 31 July 2023
 - 🚀RELEASE v1.4.13 [`dceb0ef`](https://git.odit.services/lfk/frontend/commit/dceb0ef46197dc56e29c5f52a5bd8f9fe9b70b27)
 - Show donations as euro in export [`88bc198`](https://git.odit.services/lfk/frontend/commit/88bc1982cab4481e2e9245f81eff27e095b66a0f)
 - new license file version [CI SKIP] [`6193eff`](https://git.odit.services/lfk/frontend/commit/6193eff38e1a9d5726bc7d572ab36b921de843d0)
 #### [1.4.12](https://git.odit.services/lfk/frontend/compare/1.4.11...1.4.12)
 > 18 May 2023
 - 🚀RELEASE v1.4.12 [`65f1d22`](https://git.odit.services/lfk/frontend/commit/65f1d222050b0dec81fc847c1921b6135a55ce50)
 - fix(donation/payment): Funny javascript number to float conversion where integers were needed [`d867c08`](https://git.odit.services/lfk/frontend/commit/d867c08aba234d3a7fe9e2311d37dc5e96fc2afc)
 - new license file version [CI SKIP] [`08642d7`](https://git.odit.services/lfk/frontend/commit/08642d7618faeae31f0acfe776642c9fa156e5ff)
 #### [1.4.11](https://git.odit.services/lfk/frontend/compare/1.4.10...1.4.11)
 > 10 May 2023
 - chore(deps): Lockfile [`f77460b`](https://git.odit.services/lfk/frontend/commit/f77460bb0c8ce6d0f3d83a077017d5fc7bf55af7)
 - 🚀RELEASE v1.4.11 [`373484c`](https://git.odit.services/lfk/frontend/commit/373484c2424bea7ae0d70d342e0ae2076aab1b6a)
 - feat(orgs): Show total distance [`574e0dc`](https://git.odit.services/lfk/frontend/commit/574e0dcb051305bde2fc76d8456a35baec0cf309)
 - chore(deps): More bumps [`7b19a0a`](https://git.odit.services/lfk/frontend/commit/7b19a0aa08bb6c89c51d27c0d05777e8fcfdad17)
 #### [1.4.10](https://git.odit.services/lfk/frontend/compare/1.4.9...1.4.10)
 > 10 May 2023
 - chore(deps): Bumped svelte-table [`29a2854`](https://git.odit.services/lfk/frontend/commit/29a2854671b3af5b85ea96d050a9076f47b6575d)
 - 🚀RELEASE v1.4.10 [`c3e9c27`](https://git.odit.services/lfk/frontend/commit/c3e9c27cd3d4b916f1661d4958cabab038918587)
 - chore(deps): Pin and bump [`8e6786e`](https://git.odit.services/lfk/frontend/commit/8e6786e72227b3f07cc805f0957d5b7fd123ec13)
 - chore(deps): Bumped scanclientjs [`6ad4056`](https://git.odit.services/lfk/frontend/commit/6ad40564e3e342046f6ee19fab9e455ec3bbff9b)
 #### [1.4.9](https://git.odit.services/lfk/frontend/compare/1.4.8...1.4.9)
 > 9 May 2023
 - 🚀RELEASE v1.4.9 [`776973b`](https://git.odit.services/lfk/frontend/commit/776973bfe9b34c26a1c80d5e458cc2644dd9036b)
 - Changed the in table replacement method [`d9a47f8`](https://git.odit.services/lfk/frontend/commit/d9a47f882c1c6bcf98ef85d50d70c010d54b326e)
 - Fixed empty return [`6025e43`](https://git.odit.services/lfk/frontend/commit/6025e43baa8516657a60a1de9a82c2189221c6ac)
 #### [1.4.8](https://git.odit.services/lfk/frontend/compare/1.4.7...1.4.8)
 > 9 May 2023
 - Switched donor loading to non-paginated [`59fe2df`](https://git.odit.services/lfk/frontend/commit/59fe2dfabb224863876c4db31a965c34a51a9369)
 - 🚀RELEASE v1.4.8 [`4235758`](https://git.odit.services/lfk/frontend/commit/4235758a6d1499715287d6ab193cc87c68d5742e)
 #### [1.4.7](https://git.odit.services/lfk/frontend/compare/1.4.6...1.4.7)
 > 4 May 2023
 - Paginated modal data loading [`a8a7711`](https://git.odit.services/lfk/frontend/commit/a8a771114df6eb57d5b1d5497a5be49e619d4102)
 - Moved loading to onmount [`4e0a2c8`](https://git.odit.services/lfk/frontend/commit/4e0a2c83015bde5e360c5fb2c0babbeaa03dc2b5)
 - 🚀RELEASE v1.4.7 [`6364536`](https://git.odit.services/lfk/frontend/commit/6364536dcd840c71f7cb6afb31bbc4f160ac4f73)
 #### [1.4.6](https://git.odit.services/lfk/frontend/compare/1.4.5...1.4.6)
 > 4 May 2023
 - 🚀RELEASE v1.4.6 [`b6fed92`](https://git.odit.services/lfk/frontend/commit/b6fed92a176af1c975484d9146ee5634e0031401)
 - fix(donor/details): don't load donations [`a2ff5b8`](https://git.odit.services/lfk/frontend/commit/a2ff5b8a142ce4e6b8876f64935f9787ec44a51e)
 - fix(donor/detail): Set email to null to avoid vaidation errors [`97b57ae`](https://git.odit.services/lfk/frontend/commit/97b57aeb0cc9058542a36dea9c8b2852169c250f)
 - fix(donor/detail): Set phone to null to avoid vaidation errors [`e25ed1f`](https://git.odit.services/lfk/frontend/commit/e25ed1fff9b200605d5d2b78238b774ec7289aaa)
 #### [1.4.5](https://git.odit.services/lfk/frontend/compare/1.4.4...1.4.5)
 > 4 May 2023
 - Revert "revert: buggy pagination" [`dacb2f8`](https://git.odit.services/lfk/frontend/commit/dacb2f8ace373f6594fc64af133971af053f00c0)
 - fix: Removed dynamic pagesize adjustments [`803d64c`](https://git.odit.services/lfk/frontend/commit/803d64c78caa570d31d6055e70e2d2af6834f04b)
 - 🚀RELEASE v1.4.5 [`0284f18`](https://git.odit.services/lfk/frontend/commit/0284f18beb8b24d4d4d071eca13bc5868666232c)
 #### [1.4.4](https://git.odit.services/lfk/frontend/compare/1.4.3...1.4.4)
 > 4 May 2023
 - 🚀RELEASE v1.4.4 [`b7a5396`](https://git.odit.services/lfk/frontend/commit/b7a53960e5f37ae089d77bc11668d917145e2abb)
 - fix(AddDonationModal): missing toast dismiss on success distance donation [`66f1e6b`](https://git.odit.services/lfk/frontend/commit/66f1e6b4fe1350ee79673a0aff97e36f44179c92)
 #### [1.4.3](https://git.odit.services/lfk/frontend/compare/1.4.2...1.4.3)
 > 4 May 2023
 - revert: buggy pagination [`b264864`](https://git.odit.services/lfk/frontend/commit/b2648645e8fc05f8742ecfc592557f954261671b)
 - 🚀RELEASE v1.4.3 [`33166bf`](https://git.odit.services/lfk/frontend/commit/33166bfafcffb9d86dfc7dfcd2cb8ba5c85da7e7)
 #### [1.4.2](https://git.odit.services/lfk/frontend/compare/1.4.1...1.4.2)
 > 4 May 2023
 - 🚀RELEASE v1.4.2 [`53e3ddb`](https://git.odit.services/lfk/frontend/commit/53e3ddb751c1150a4640ae6302e4df5b88cedc51)
 - fix(GenerateRunnerCertificates): missing toast import [`d49f545`](https://git.odit.services/lfk/frontend/commit/d49f545d94acabc0c96860f212466b7a4cbe7dab)
 - fix(DonorDetail): missing toast import [`edc2dca`](https://git.odit.services/lfk/frontend/commit/edc2dcab92c3cace05335a283a849c3c978ec8ec)
 #### [1.4.1](https://git.odit.services/lfk/frontend/compare/1.4.0...1.4.1)
 > 1 May 2023
 - 🚀RELEASE v1.4.1 [`3b98c99`](https://git.odit.services/lfk/frontend/commit/3b98c99b72f24b8552e2b2334f13622bdf6ef90d)
 - Fixed translation [`1da775a`](https://git.odit.services/lfk/frontend/commit/1da775a09b8be90a49e06aed16df917d221ee989)
 #### [1.4.0](https://git.odit.services/lfk/frontend/compare/1.3.4...1.4.0)
 > 1 May 2023
 - formatting, full migration to svelte-french-toast [`46d076a`](https://git.odit.services/lfk/frontend/commit/46d076af9d65ebb11504a7e6879753780b69db2c)
 - drop gridjs (TracksOverview Actions will need to be re-implemented) [`8b92230`](https://git.odit.services/lfk/frontend/commit/8b922309b990c42fcfd57b939abacf4d8c99e638)
 - 🚀RELEASE v1.4.0 [`f0475bd`](https://git.odit.services/lfk/frontend/commit/f0475bd9a08d99f58b4d3dce584cd6a3a8630e56)
 - Added track update toasts [`103ad57`](https://git.odit.services/lfk/frontend/commit/103ad57ddc8a35ff971bef44053a9e32a7b68233)
 - drop legacy ThFilter components [`bc4ac0f`](https://git.odit.services/lfk/frontend/commit/bc4ac0f3160571cd412361de82ef4555ee068677)
 - text cleanups, StatCard improvements [`a2f9dbb`](https://git.odit.services/lfk/frontend/commit/a2f9dbbe014b5ae9705e8e7b6944f7f7c576d22e)
 - Updated the track editing switch logic [`a953349`](https://git.odit.services/lfk/frontend/commit/a953349c1478b912e08f88c1fb70c74af0bc9bbb)
 - chore(deps): bump all [`6154ca7`](https://git.odit.services/lfk/frontend/commit/6154ca7ddfb8b6ad0e1644b8c6756d51f2fbb858)
 - svelte-french-toast + translations [`8fb1e0c`](https://git.odit.services/lfk/frontend/commit/8fb1e0ca0f51c90270fb5e1a05be5e8273238a2c)
 - Implemented delete for new track table [`081a141`](https://git.odit.services/lfk/frontend/commit/081a141218ab7de2620f7b06083697368d44bf6c)
 - striped tabled [`5e82638`](https://git.odit.services/lfk/frontend/commit/5e82638f3594298d0542cd03d5d6aa80aa383b9d)
 - add svelte-french-toast [`56c3365`](https://git.odit.services/lfk/frontend/commit/56c33656562079bb773491c8aecedea3f6acdb74)
 - Editing update logic [`2856c5c`](https://git.odit.services/lfk/frontend/commit/2856c5c1b786f732b0db80324ea74513e8be186d)
 - monospace fonts for IDs in overviews [`811f5d5`](https://git.odit.services/lfk/frontend/commit/811f5d575496be43e5e48197813112d35e79a81f)
 - Full track table editing [`e9cf2bc`](https://git.odit.services/lfk/frontend/commit/e9cf2bc8498fc02332059880d7a6994348165b76)
 - drop propfilepic [`6952b87`](https://git.odit.services/lfk/frontend/commit/6952b8727f06c520cb60a00acfde1dff52d4f345)
 - fix: scan laptime formatting [`01b415d`](https://git.odit.services/lfk/frontend/commit/01b415d4cb147879e959e86d053dc02cae8cfdc9)
 - Dynamicly adjust page size for large datasets [`064197d`](https://git.odit.services/lfk/frontend/commit/064197d2226da772907099ecf96c3ab984c9af59)
 - ScansOverview full month formatting [`69ec7fc`](https://git.odit.services/lfk/frontend/commit/69ec7fc1fecc67751643ce35f22925f3132b8792)
 - translations [`8be40e2`](https://git.odit.services/lfk/frontend/commit/8be40e2d80336f72989deb3e5e20a7cd8f7fb6f1)
 - drop middlename for admin users [`daeea24`](https://git.odit.services/lfk/frontend/commit/daeea24e0e99b8a95665167d62d0ee830bdea3de)
 - add missing striped tables [`8eaad82`](https://git.odit.services/lfk/frontend/commit/8eaad8219a109fa8b4bd1f719d7079bff8b7c041)
 - translation cleanups [`663cb29`](https://git.odit.services/lfk/frontend/commit/663cb29ccde4fa15317f764147187c5b82e748d5)
 - Added edit button for trackscans [`175d867`](https://git.odit.services/lfk/frontend/commit/175d86745fb9bfce03fe5f5c638b52467b688938)
 - a11y cleanup [`6bc92f4`](https://git.odit.services/lfk/frontend/commit/6bc92f4a080f0c506793866d99c97ccb87ba15b8)
 - a11y fix OrgOverview [`0fca035`](https://git.odit.services/lfk/frontend/commit/0fca0352c59cdccb99716355591f88ff573ac949)
 - README update [`d32eb82`](https://git.odit.services/lfk/frontend/commit/d32eb8266b0e9daec4b9ba52832d5e5118abec45)
 - a11y improvements [`4c81e3c`](https://git.odit.services/lfk/frontend/commit/4c81e3c43218be4b23d137b386520c71d19f5844)
 - cleanup legacy TeamsOverview text [`6c1a707`](https://git.odit.services/lfk/frontend/commit/6c1a70716665d57f1326c4475030ae15a7c459e0)
 - fix: a11y in About page [`e904ab0`](https://git.odit.services/lfk/frontend/commit/e904ab0b8494ff57579c8954a8eb713fc223a88f)
 - improved login [`dbaf857`](https://git.odit.services/lfk/frontend/commit/dbaf85799ac9e56d8760450cfe357df016f10da7)
 - chore(deps): node:20.0.0 [`81d4da6`](https://git.odit.services/lfk/frontend/commit/81d4da655099100c631d450caafbf7039fa20592)
 - cleanup MainDashContent [`763a01a`](https://git.odit.services/lfk/frontend/commit/763a01af09b36004ceccfa6b182b7dc5ea070128)
 - Updated store directory for dockerfil [`bbf8170`](https://git.odit.services/lfk/frontend/commit/bbf8170cb98410bbcd8dc51bb122beee615312ee)
 - Bump dockerfile node [`15d8afe`](https://git.odit.services/lfk/frontend/commit/15d8afefbb6b697a6cbdb2d803a7d8edcea4e650)
 - Pinned config files used [`f3bcc01`](https://git.odit.services/lfk/frontend/commit/f3bcc01685f3ea3ef6786a8e7d9a5b1a4f829d53)
 - Switched build image node version [`9523860`](https://git.odit.services/lfk/frontend/commit/95238606d52ca58985b91ea03f7e9f490fdf2310)
 - Merge pull request 'next' (#180) from next into dev [`8c628f2`](https://git.odit.services/lfk/frontend/commit/8c628f23dcfb1f6f120d19bb3ecdb422ca5093cd)
 - improved StatCard readability [`7d82536`](https://git.odit.services/lfk/frontend/commit/7d8253618b18719549824ed19e024b8828c9df06)
 - new license file version [CI SKIP] [`38a6650`](https://git.odit.services/lfk/frontend/commit/38a665024eb1df3eba66c61d8cb3199000b629e5)
 #### [1.3.4](https://git.odit.services/lfk/frontend/compare/1.3.3...1.3.4)
 > 19 April 2023
 - 🚀RELEASE v1.3.4 [`e7b2c64`](https://git.odit.services/lfk/frontend/commit/e7b2c647981111650b3e2e471f4b5195fa6b65b6)
 - Smaller sponsoring page size [`7cb6b63`](https://git.odit.services/lfk/frontend/commit/7cb6b63eb9596da4ee84369b220c3e680c607032)
 #### [1.3.3](https://git.odit.services/lfk/frontend/compare/1.3.2...1.3.3)
--- a/9
+++ b/9
@@ -1,15 +1,16 @@
-FROM registry.odit.services/hub/library/node:19.7.0-alpine3.16 as build
+FROM registry.odit.services/hub/library/node:23.10.0-alpine3.21 AS build
 ARG NPM_REGISTRY_URL=https://registry.npmjs.org
 WORKDIR /app
-COPY package.json pnpm-lock.yaml *.config.js *.config.cjs index.html ./
+COPY package.json pnpm-lock.yaml vite.config.js tailwind.config.cjs postcss.config.cjs index.html ./
-RUN npm config set registry $NPM_REGISTRY_URL && npm i -g pnpm@8 && pnpm i
+RUN npm config set registry $NPM_REGISTRY_URL && npm i -g pnpm@10.7
 RUN mkdir /pnpm && pnpm config set store-dir /pnpm && pnpm i
 COPY src ./src
 COPY public ./public
 RUN pnpm build
 # final image
-FROM registry.odit.services/library/nginx-brotli:3.15 as final
+FROM registry.odit.services/library/nginx-brotli:3.15 AS final
 COPY --from=build /app/dist /usr/share/nginx/html
 COPY ./nginx.conf /etc/nginx/nginx.conf
--- a/README.md
+++ b/README.md
@@ -1,22 +1,27 @@
 # @odit/lfk-frontend
 ## ✒️ Overview
 This is an API client for [https://git.odit.services/lfk/backend](@lfk/backend)
 - WebApp built with [Svelte](https://svelte.dev), [WindiCSS](https://windicss.org/) (to compile [TailwindCSS](https://tailwindcss.com/)) and [Vite](https://vitejs.dev).
 This application is intended for use by admin users/ members only.
 ## 🚀 Getting Started
 ```
-yarn
+pnpm i
 ```
 ## Development
 ```
-yarn dev
+pnpm dev
 /
-yarn dev --open
+pnpm dev --open
 ```
 ## Build
 ```
-yarn build
+pnpm build
 ```
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,8 +1,8 @@
 version: "3"
 services:
-    httpd:
+  httpd:
-        build: .
+    build: .
-        volumes:
+    volumes:
-            - ./public/env.sample.js:/usr/share/nginx/html/env.js
+      - ./public/env.sample.js:/usr/share/nginx/html/env.js
-        ports:
+    ports:
-            - 4050:80
+      - 4050:80
--- a/index.html
+++ b/index.html
@@ -1,22 +1,22 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.png" />
    <link rel="manifest" href="/manifest.webmanifest" />
    <link rel="apple-touch-icon" href="/lfk-logo.png" />
    <meta name="theme-color" content="#FFFFFF" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Lauf Für Kaya! - Admin" />
    <title>Lauf für Kaya! - Admin</title>
  </head>
-<head>
+  <body>
-  <meta charset="utf-8" />
+    <span style="display: none; visibility: hidden" id="buildinfo"
-  <link rel="icon" href="/favicon.png" />
+      >RELEASE_INFO-1.9.5-RELEASE_INFO</span
-  <link rel="manifest" href="/manifest.webmanifest">
+    >
-  <link rel="apple-touch-icon" href="/lfk-logo.png">
+    <noscript>You need to enable JavaScript to run this app.</noscript>
-  <meta name="theme-color" content="#FFFFFF">
+    <script src="/env.js"></script>
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script type="module" src="/src/main.js"></script>
-  <meta name="description" content="Lauf Für Kaya! - Admin" />
+  </body>
  <title>Lauf für Kaya! - Admin</title>
 </head>
 <body>
  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-1.3.4-RELEASE_INFO</span>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <script src="/env.js"></script>
  <script type="module" src="/src/main.js"></script>
 </body>
 </html>
--- a/order.js
+++ b/order.js
@@ -1,16 +1,18 @@
-import fs from 'fs'
+import fs from "fs";
 // get all language files
-const files = fs.readdirSync('./src/locales/');
+const files = fs.readdirSync("./src/locales/");
 files.forEach((f) => {
-	// read file as object
+  // read file as object
-	const unordered = JSON.parse(fs.readFileSync(`src/locales/${f}`));
+  const unordered = JSON.parse(fs.readFileSync(`src/locales/${f}`));
-	// order object by keys alpabetically A-Z
+  // order object by keys alpabetically A-Z
-	const ordered = Object.keys(unordered).sort().reduce((obj, key) => {
+  const ordered = Object.keys(unordered)
-		obj[key] = unordered[key];
+    .sort()
-		return obj;
+    .reduce((obj, key) => {
-	}, {});
+      obj[key] = unordered[key];
-	// format output as json for commit diff compatibility
+      return obj;
-	const out = JSON.stringify(ordered, 0, 4);
+    }, {});
-	// write output file
+  // format output as json for commit diff compatibility
-	fs.writeFileSync(`src/locales/${f}`, out);
+  const out = JSON.stringify(ordered, 0, 4);
  // write output file
  fs.writeFileSync(`src/locales/${f}`, out);
 });
--- a/package.json
+++ b/package.json
@@ -1,61 +1,64 @@
 {
-	"name": "@odit/lfk-frontend",
+  "name": "@odit/lfk-frontend",
-	"version": "1.3.4",
+  "version": "1.9.5",
-	"type": "module",
+  "type": "module",
-	"scripts": {
+  "scripts": {
-		"i18n-order": "node order.js",
+    "i18n-order": "node order.js",
-		"dev": "vite",
+    "dev": "vite",
-		"build": "vite build",
+    "format": "prettier --write --plugin-search-dir=. .",
-		"release": "release-it",
+    "build": "vite build",
-		"licenses:export": "license-exporter --json -o public"
+    "release": "release-it",
-	},
+    "licenses:export": "license-exporter --json -o public"
-	"license": "CC-BY-NC-SA-4.0",
+  },
-	"devDependencies": {
+  "license": "CC-BY-NC-SA-4.0",
-		"@odit/license-exporter": "0.0.12",
+  "devDependencies": {
-		"@sveltejs/vite-plugin-svelte": "2.0.4",
+    "@odit/license-exporter": "0.2.0",
-		"auto-changelog": "2.4.0",
+    "@sveltejs/vite-plugin-svelte": "2.1.1",
-		"autoprefixer": "10.4.14",
+    "auto-changelog": "2.5.0",
-		"postcss": "8.4.21",
+    "autoprefixer": "10.4.21",
-		"release-it": "15.10.1",
+    "postcss": "8.5.3",
-		"svelte-select": "3.17.0",
+    "prettier": "3.5.3",
-		"tailwindcss": "3.3.1",
+    "prettier-plugin-svelte": "3.3.3",
-		"vite": "4.2.1"
+    "release-it": "17.10.0",
-	},
+    "svelte-select": "3.17.0",
-	"release-it": {
+    "tailwindcss": "3.4.15",
-		"git": {
+    "vite": "4.3.3"
-			"commit": true,
+  },
-			"requireCleanWorkingDir": false,
+  "release-it": {
-			"commitMessage": "🚀RELEASE v${version}",
+    "git": {
-			"push": true,
+      "commit": true,
-			"tag": true,
+      "requireCleanWorkingDir": false,
-			"tagName": null,
+      "commitMessage": "chore(release): ${version}",
-			"tagAnnotation": "v${version}"
+      "push": true,
-		},
+      "tag": true,
-		"npm": {
+      "tagName": "${version}",
-			"publish": false
+      "tagAnnotation": "${version}"
-		},
+    },
-		"hooks": {
+    "npm": {
-			"after:bump": "npx auto-changelog --commit-limit false -p -u --hide-credit && git add CHANGELOG.md && node versionbuilder.js  && git add index.html && node order.js  && git add src/locales"
+      "publish": false
-		}
+    },
-	},
+    "hooks": {
-	"dependencies": {
+      "after:bump": "npx auto-changelog --commit-limit false -p -u --hide-credit && git add CHANGELOG.md && node versionbuilder.js  && git add index.html && node order.js  && git add src/locales"
-		"@odit/lfk-client-js": "1.1.1",
+    }
-		"@paralleldrive/cuid2": "^2.2.0",
+  },
-		"@tanstack/svelte-table": "^8.8.5",
+  "dependencies": {
-		"bwip-js": "^3.4.0",
+    "@fontsource/athiti": "^5.2.5",
-		"check-password-strength": "2.0.7",
+    "@odit/lfk-client-js": "1.2.0",
-		"csvtojson": "2.0.10",
+    "@paralleldrive/cuid2": "2.2.2",
-		"gridjs": "3.4.0",
+    "@tanstack/svelte-table": "8.9.1",
-		"localforage": "1.10.0",
+    "bwip-js": "3.4.0",
-		"marked": "2.0.3",
+    "check-password-strength": "2.0.10",
-		"svelte": "3.58.0",
+    "csvtojson": "2.0.10",
-		"svelte-i18n": "3.6.0",
+    "localforage": "1.10.0",
-		"tinro": "0.6.12",
+    "marked": "4.3.0",
-		"toastify-js": "1.12.0",
+    "svelte": "3.58.0",
-		"validator": "13.9.0",
+    "svelte-french-toast": "1.2.0",
-		"xlsx": "0.18.5"
+    "svelte-i18n": "3.6.0",
-	},
+    "tinro": "0.6.12",
-	"volta": {
+    "validator": "13.15.0",
-		"node": "19.7.0"
+    "xlsx": "0.18.5"
-	}
+  },
  "volta": {
    "node": "20.0.0"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -1,6 +1,6 @@
 module.exports = {
-	plugins: {
+  plugins: {
-		tailwindcss: {},
+    tailwindcss: {},
-		autoprefixer: {}
+    autoprefixer: {},
-	}
+  },
 };
--- a/public/env.sample.js
+++ b/public/env.sample.js
@@ -1,9 +1,12 @@
 const config = {
-	baseurl: 'http://localhost:4010',
+  baseurl: "http://localhost:4010",
-	baseurl_documentserver: 'http://localhost:4010/documents',
+  baseurl_selfservice: "http://localhost:5174",
-	documentserver_key: 'NqZSYTy5AFQ7MppbLW5moqpTk7u7YrNUHKYhKYuThnnya2WpCOIU694hIZT1FzYe',
+  baseurl_documentserver: "http://localhost:4010/documents",
-	// optional
+  documentserver_key:
-	default_username: 'demo',
+    "NqZSYTy5AFQ7MppbLW5moqpTk7u7YrNUHKYhKYuThnnya2WpCOIU694hIZT1FzYe",
-	default_password: 'demo',
+  // optional
-	prefersHashRouting: true
+  default_username: "demo",
  default_password: "demo",
  prefersHashRouting: true,
 };
 window.config = config;
--- a/public/licenses.json
+++ b/public/licenses.json
--- a/public/logo.svg
+++ b/public/logo.svg
@@ -1,4 +0,0 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98.1 118">
  <path fill="#ff3e00" d="M91.8 15.6C80.9-.1 59.2-4.7 43.6 5.2L16.1 22.8A31.25 31.25 0 001.9 43.9c-1.3 7.3-.2 14.8 3.3 21.3-2.4 3.6-4 7.6-4.7 11.8-1.6 8.9.5 18.1 5.7 25.4 11 15.7 32.6 20.3 48.2 10.4l27.5-17.5c7.5-4.7 12.7-12.4 14.2-21.1 1.3-7.3.2-14.8-3.3-21.3 2.4-3.6 4-7.6 4.7-11.8 1.7-9-.4-18.2-5.7-25.5"/>
  <path fill="#fff" d="M40.9 103.9a21.8 21.8 0 01-23.4-8.7c-3.2-4.4-4.4-9.9-3.5-15.3l.6-2.6.5-1.6 1.4 1c3.3 2.4 6.9 4.2 10.8 5.4l1 .3-.1 1c-.1 1.4.3 2.9 1.1 4.1a6.62 6.62 0 008.8 2L65.5 72c1.4-.9 2.3-2.2 2.6-3.8.3-1.6-.1-3.3-1-4.6a6.56 6.56 0 00-8.8-1.9l-10.5 6.7a18.6 18.6 0 01-5.6 2.4 21.8 21.8 0 01-23.4-8.7 20.2 20.2 0 01-3.4-15.3c.9-5.2 4.1-9.9 8.6-12.7l27.5-17.5c1.7-1.1 3.6-1.9 5.6-2.5a21.8 21.8 0 0123.4 8.7c3.2 4.4 4.4 9.9 3.5 15.3-.2.9-.4 1.7-.7 2.6l-.5 1.6-1.4-1c-3.3-2.4-6.9-4.2-10.8-5.4l-1-.3.1-1c.1-1.4-.3-2.9-1.1-4.1a6.56 6.56 0 00-8.8-1.9L32.4 46.1c-1.4.9-2.3 2.2-2.6 3.8s.1 3.3 1 4.6a6.56 6.56 0 008.8 1.9l10.5-6.7c1.7-1.1 3.6-1.9 5.6-2.5a21.8 21.8 0 0123.4 8.7c3.2 4.4 4.4 9.9 3.5 15.3-.9 5.2-4.1 9.9-8.6 12.7l-27.5 17.5c-1.7 1.1-3.6 1.9-5.6 2.5"/>
 </svg>
--- a/public/manifest.webmanifest
+++ b/public/manifest.webmanifest
@@ -1,34 +1,39 @@
 {
-	"name": "Lauf für Kaya! - Admin",
+  "name": "Lauf für Kaya! - Admin",
-	"short_name": "LfK!Admin",
+  "short_name": "LfK!Admin",
-	"start_url": "/?utm_source=pwa",
+  "start_url": "/?utm_source=pwa",
-	"orientation": "portrait-primary",
+  "orientation": "portrait-primary",
-	"display": "standalone",
+  "display": "standalone",
-	"background_color": "#fff",
+  "background_color": "#fff",
-	"theme_color": "#fff",
+  "theme_color": "#fff",
-	"description": "Lauf für Kaya! - Admin",
+  "description": "Lauf für Kaya! - Admin",
-	"shortcuts": [
+  "shortcuts": [
-		{
+    {
-			"name": "Users",
+      "name": "Users",
-			"url": "/users/?utm_source=pwa"
+      "url": "/users/?utm_source=pwa"
-		}
+    }
-	],
+  ],
-	"icons": [
+  "icons": [
-		{
+    {
-			"src": "/favicon.png",
+      "src": "/favicon.png",
-			"sizes": "48x48",
+      "sizes": "48x48",
-			"type": "image/png"
+      "type": "image/png"
-		},
+    },
-		{
+    {
-			"src": "/favicon.png",
+      "src": "/favicon.png",
-			"sizes": "144x144",
+      "sizes": "144x144",
-			"type": "image/png"
+      "type": "image/png"
-		},
+    },
-		{
+    {
-			"src": "/lfk-logo.png",
+      "src": "/lfk-logo.png",
-			"sizes": "1540x144",
+      "sizes": "1540x144",
-			"type": "image/png"
+      "type": "image/png"
-		},
+    },
-		{ "src": "/maskable_icon_x1.png", "sizes": "750x750", "type": "image/png", "purpose": "any maskable" }
+    {
-	]
+      "src": "/maskable_icon_x1.png",
      "sizes": "750x750",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
 }
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,6 +1,4 @@
 <script>
  import "toastify-js/src/toastify.css";
  import "gridjs/dist/theme/mermaid.css";
  import { Route, router } from "tinro";
  router.subscribe((routeInfo) => {
    window.scrollTo(0, 0);
@@ -24,11 +22,10 @@
    name: "lfk_admin",
    version: 1.0,
    storeName: "lfk_admin",
-    description: "LfK! admin dashbaord",
+    description: "LfK! admin dashboard",
  });
  window.onunhandledrejection = (event) => {
    if (event.reason.toString() == "Error: Unauthorized") {
      console.log("Found 1");
      localForage.clear();
      location.replace("/");
    }
@@ -72,29 +69,29 @@
  import Scans from "./components/scans/Scans.svelte";
  import ScanDetail from "./components/scans/ScanDetail.svelte";
  import Cards from "./components/cards/Cards.svelte";
-	import StatsClients from "./components/statsclients/StatsClients.svelte";
+  import StatsClients from "./components/statsclients/StatsClients.svelte";
-	import StatsClientDetail from "./components/statsclients/StatsClientDetail.svelte";
+  import StatsClientDetail from "./components/statsclients/StatsClientDetail.svelte";
  store.init();
 </script>
 <Route>
-  {#if $router.path === '/forgot_password'}
+  {#if $router.path === "/forgot_password"}
    <Route path="/forgot_password">
      <ForgotPassword />
    </Route>
-  {:else if $router.path.includes('/reset')}
+  {:else if $router.path.includes("/reset")}
    <Route path="/reset/:resetkey" let:params>
      <ResetPassword {params} />
    </Route>
-  {:else if $router.path === '/about'}
+  {:else if $router.path === "/about"}
    <Route path="/about">
      <About />
    </Route>
-  {:else if $router.path === '/imprint'}
+  {:else if $router.path === "/imprint"}
    <Route path="/imprint">
      <Imprint />
    </Route>
-  {:else if $router.path === '/privacy'}
+  {:else if $router.path === "/privacy"}
    <Route path="/privacy">
      <Privacy />
    </Route>
--- a/src/components/auth/ForgotPassword.svelte
+++ b/src/components/auth/ForgotPassword.svelte
@@ -1,28 +1,22 @@
 <script>
-  import { ApiError, AuthService } from "@odit/lfk-client-js";
+  import { AuthService } from "@odit/lfk-client-js";
  import toast from "svelte-french-toast";
  import { _ } from "svelte-i18n";
  import Toastify from "toastify-js";
  import "toastify-js/src/toastify.css";
  import isEmail from "validator/es/lib/isEmail";
  let reset_mail_sent = false;
  let usersEmail = "";
  function reset() {
    if (isEmail(usersEmail)) {
      toast.loading($_("mail-validation-in-progress"));
      AuthService.authControllerGetResetToken("de", { email: usersEmail })
        .then((resp) => {
-          Toastify({
+          toast.dismiss();
            text: $_("mail-validation-in-progress"),
            duration: 3500,
          }).showToast();
          reset_mail_sent = true;
        })
        .catch((err) => {});
    } else {
-      Toastify({
+      toast($_("invalid-mail-reset"));
        text: $_("invalid-mail-reset"),
        duration: 3500,
      }).showToast();
    }
  }
 </script>
@@ -32,17 +26,18 @@
    <div class="max-w-md w-full py-12 px-6">
      <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
      <p class="mt-6 text-lg text-center font-bold text-gray-900">
-        {$_('application_name')}
+        {$_("application_name")}
      </p>
      <p class="mt-2 mb-2 text-sm text-center text-gray-900">
-        {$_('password-reset-mail-sent', { values: { usersEmail: usersEmail } })}
+        {$_("password-reset-mail-sent", { values: { usersEmail: usersEmail } })}
      </p>
      <div class="mt-6">
        <div class="mt-6">
          <a
            href="/"
-            class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">
+            class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
-            {$_('goback')}
+          >
            {$_("goback")}
          </a>
        </div>
      </div>
@@ -53,25 +48,26 @@
    <div class="max-w-md w-full py-12 px-6">
      <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
      <p class="mt-6 text-lg text-center font-bold text-gray-900">
-        {$_('application_name')}
+        {$_("application_name")}
      </p>
      <p class="mt-6 text-sm text-center text-gray-900">
-        {$_('forgot_password')}
+        {$_("forgot_password")}
      </p>
      <p class="mt-2 mb-2 text-sm text-center text-gray-900">
-        {$_('dont-panic-were-resetting-it')}
+        {$_("dont-panic-were-resetting-it")}
      </p>
      <div>
        <div class="rounded-md shadow-sm">
          <div>
            <input
-              aria-label={$_('e-mail-adress')}
+              aria-label={$_("e-mail-adress")}
              name="email"
              type="email"
              required=""
              class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border text-gray-900 rounded-t-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
-              placeholder={$_('e-mail-adress')}
+              placeholder={$_("e-mail-adress")}
-              bind:value={usersEmail} />
+              bind:value={usersEmail}
            />
          </div>
        </div>
@@ -79,19 +75,22 @@
          <button
            on:click={reset}
            type="submit"
-            class="relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
+            class="relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm"
          >
            <span class="absolute left-0 inset-y pl-3">
              <svg
                class="h-5 w-5 text-gray-500"
                fill="currentColor"
-                viewBox="0 0 20 20">
+                viewBox="0 0 20 20"
              >
                <path
                  fill-rule="evenodd"
                  d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
-                  clip-rule="evenodd" />
+                  clip-rule="evenodd"
                />
              </svg>
            </span>
-            {$_('reset-my-password')}
+            {$_("reset-my-password")}
          </button>
        </div>
        <div class="mt-6">
@@ -100,24 +99,30 @@
              <div class="w-full border-t border-gray-300" />
            </div>
            <div class="relative flex justify-center text-sm">
-              <span
+              <span class="px-2 bg-gray-100 text-gray-500"
-                class="px-2 bg-gray-100 text-gray-500">{$_('dont-have-your-email-connected')}</span>
+                >{$_("dont-have-your-email-connected")}</span
              >
            </div>
          </div>
          <span
-            class="mt-2 text-sm px-2 bg-gray-100 text-gray-500 justify-center relative flex">{$_('cannot-reset-your-password-directly')}</span>
+            class="mt-2 text-sm px-2 bg-gray-100 text-gray-500 justify-center relative flex"
            >{$_("cannot-reset-your-password-directly")}</span
          >
          <div class="mt-6">
            <a
              href="mailto:lfk@odit.services"
-              class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">
+              class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
-              {$_('send-a-mail-to-lfk-odit-services')}
+            >
              {$_("send-a-mail-to-lfk-odit-services")}
            </a>
          </div>
          <div class="mt-6">
            <a
              href="/"
-              class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">{$_('goback')}</a>
+              class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
              >{$_("goback")}</a
            >
          </div>
        </div>
      </div>
--- a/src/components/auth/Login.svelte
+++ b/src/components/auth/Login.svelte
@@ -6,7 +6,7 @@
  import { OpenAPI, AuthService } from "@odit/lfk-client-js";
  import Footer from "../general/Footer.svelte";
  import isEmail from "validator/es/lib/isEmail";
-  import Toastify from "toastify-js";
+  import toast from "svelte-french-toast";
  // ------
  let username = config.default_username || "";
  let password = config.default_password || "";
@@ -20,11 +20,6 @@
        OpenAPI.TOKEN = value.access_token;
        const jwtinfo = JSON.parse(atob(OpenAPI.TOKEN.split(".")[1]));
        store.login(value, jwtinfo);
        Toastify({
          text: $_("welcome_wavinghand"),
          duration: 500,
          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
        }).showToast();
      }
    }
  });
@@ -33,10 +28,7 @@
    // prevent login button spamming
    if (last_loginclick_processed && is_blocked_by_autologin === false) {
      last_loginclick_processed = false;
-      Toastify({
+      toast.loading($_("login_is_checked"));
        text: $_("login_is_checked"),
        duration: 500,
      }).showToast();
      let postdata = {};
      if (isEmail(username)) {
        postdata = {
@@ -56,31 +48,18 @@
          const jwtinfo = JSON.parse(atob(OpenAPI.TOKEN.split(".")[1]));
          store.login(result.access_token, jwtinfo);
          location.replace("/");
-          Toastify({
+          toast.dismiss();
            text: $_("welcome_wavinghand"),
            duration: 500,
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          }).showToast();
        })
        .catch((err) => {
-          Toastify({
+          toast.dismiss();
-            text: $_("error_on_login"),
+          toast.error($_("error_on_login"));
            duration: 500,
            backgroundColor:
              "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
          }).showToast();
        })
        .finally(() => {
          last_loginclick_processed = true;
        });
      // last login was not processed yet
    } else {
-      Toastify({
+      toast($_("please-wait-a-moment-your-login-is-still-being-processed"));
        text: $_('please-wait-a-moment-your-login-is-still-being-processed'),
        duration: 1500,
        backgroundColor:
          "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
      }).showToast();
    }
  };
  function handleKeydown(e) {
@@ -91,34 +70,37 @@
 </script>
 <div
-  class="min-h-screen flex items-center justify-center bg-gray-100 text-gray-900">
+  class="min-h-screen flex items-center justify-center bg-gray-100 text-gray-900"
 >
  <div class="max-w-md w-full py-12 px-6" role="main">
    <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
-    <p class="mt-6 text-lg text-center font-bold">{$_('application_name')}</p>
+    <p class="mt-6 text-xl text-center font-bold">{$_("application_name")}</p>
-    <p class="mt-6 text-sm text-center">{$_('log_in_to_your_account')}</p>
+    <p class="mt-2 mb-6 text-sm text-center">{$_("log_in_to_your_account")}</p>
    <div>
      <div class="rounded-md shadow-sm">
        <div>
          <!-- svelte-ignore a11y-autofocus -->
          <input
            autofocus
-            aria-label={$_('email_address_or_username')}
+            aria-label={$_("email_address_or_username")}
            type="text"
            required=""
            class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border rounded-t-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
            on:keydown={handleKeydown}
-            placeholder={$_('email_address_or_username')}
+            placeholder={$_("email_address_or_username")}
-            bind:value={username} />
+            bind:value={username}
          />
        </div>
        <div class="-mt-px relative">
          <input
-            aria-label={$_('password')}
+            aria-label={$_("password")}
            type="password"
            required=""
            bind:value={password}
            class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border rounded-b-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
            on:keydown={handleKeydown}
-            placeholder={$_('password')} />
+            placeholder={$_("password")}
          />
        </div>
      </div>
@@ -126,29 +108,33 @@
        <button
          on:click={login}
          type="submit"
-          class="relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
+          class="relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm"
        >
          <span class="absolute left-0 inset-y pl-3">
            <svg
              class="h-5 w-5 text-gray-500"
              fill="currentColor"
-              viewBox="0 0 20 20">
+              viewBox="0 0 20 20"
            >
              <path
                fill-rule="evenodd"
                d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
-                clip-rule="evenodd" />
+                clip-rule="evenodd"
              />
            </svg>
          </span>
-          {$_('log_in')}
+          {$_("log_in")}
        </button>
      </div>
    </div>
-    <div class="mt-2">
+    <!-- <div class="mt-2">
      <a
        href="/forgot_password"
-        class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">
+        class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
-        {$_('forgot_password')}
+      >
        {$_("forgot_password")}
      </a>
-    </div>
+    </div> -->
  </div>
 </div>
 <Footer />
--- a/src/components/auth/PasswordStrength.svelte
+++ b/src/components/auth/PasswordStrength.svelte
@@ -1,52 +1,52 @@
 <script context="module">
-    import { passwordStrength } from "check-password-strength";
+  import { passwordStrength } from "check-password-strength";
-    export function password_strong_enough(password_change) {
+  export function password_strong_enough(password_change) {
-        let strength = passwordStrength(password_change);
+    let strength = passwordStrength(password_change);
-        return (
+    return (
-            strength?.contains.includes("lowercase") &&
+      strength?.contains.includes("lowercase") &&
-            strength?.contains.includes("uppercase") &&
+      strength?.contains.includes("uppercase") &&
-            strength?.contains.includes("number") &&
+      strength?.contains.includes("number") &&
-            strength?.length > 9
+      strength?.length > 9
-        );
+    );
-    }
+  }
-    export function password_strong_enough_and_equal(
+  export function password_strong_enough_and_equal(
-        password_change,
+    password_change,
-        password_confirm
+    password_confirm
-    ) {
+  ) {
-        return (
+    return (
-            password_strong_enough(password_change) &&
+      password_strong_enough(password_change) &&
-            password_change === password_confirm
+      password_change === password_confirm
-        );
+    );
-    }
+  }
 </script>
 <script>
-    import { getLocaleFromNavigator, _ } from "svelte-i18n";
+  import { getLocaleFromNavigator, _ } from "svelte-i18n";
-    import { passwordStrength as Strength } from "check-password-strength";
+  import { passwordStrength as Strength } from "check-password-strength";
-    export let password_change;
+  export let password_change;
-    export let password_confirm;
+  export let password_confirm;
-    $: strength = Strength(password_change);
+  $: strength = Strength(password_change);
-    $: passwords_match =
+  $: passwords_match =
-        !password_confirm || password_confirm === password_change;
+    !password_confirm || password_confirm === password_change;
 </script>
 <div class="ml-4">
-    <ul class="list-disc font-medium tracking-wide text-red-500 text-xs">
+  <ul class="list-disc font-medium tracking-wide text-red-500 text-xs">
-        {#if !strength.contains.includes('lowercase')}
+    {#if !strength.contains.includes("lowercase")}
-            <li>{$_('must-contain-a-lowercase-letter')}</li>
+      <li>{$_("must-contain-a-lowercase-letter")}</li>
-        {/if}
+    {/if}
-        {#if !strength.contains.includes('uppercase')}
+    {#if !strength.contains.includes("uppercase")}
-            <li>{$_('must-contain-a-uppercase-letter')}</li>
+      <li>{$_("must-contain-a-uppercase-letter")}</li>
-        {/if}
+    {/if}
-        {#if !strength.contains.includes('number')}
+    {#if !strength.contains.includes("number")}
-            <li>{$_('must-contain-a-number')}</li>
+      <li>{$_("must-contain-a-number")}</li>
-        {/if}
+    {/if}
-        {#if !(strength.length > 9)}
+    {#if !(strength.length > 9)}
-            <li>{$_('must-be-at-least-10-characters-long')}</li>
+      <li>{$_("must-be-at-least-10-characters-long")}</li>
-        {/if}
+    {/if}
-        {#if !(passwords_match == true)}
+    {#if !(passwords_match == true)}
-            <li>{$_('passwords-dont-match')}</li>
+      <li>{$_("passwords-dont-match")}</li>
-        {/if}
+    {/if}
-    </ul>
+  </ul>
 </div>
--- a/src/components/auth/ResetPassword.svelte
+++ b/src/components/auth/ResetPassword.svelte
@@ -1,8 +1,7 @@
 <script>
  import { AuthService } from "@odit/lfk-client-js";
  import { _ } from "svelte-i18n";
-  import Toastify from "toastify-js";
+  import toast from "svelte-french-toast";
  import "toastify-js/src/toastify.css";
  import PasswordStrength, {
    password_strong_enough,
  } from "../auth/PasswordStrength.svelte";
@@ -11,101 +10,97 @@
  export let params;
  function set_new_password() {
    if (password.trim() !== "") {
-      Toastify({
+      toast.loading($_("password-reset-in-progress"));
        text: $_("password-reset-in-progress"),
        duration: 3500,
      }).showToast();
      AuthService.authControllerResetPassword(atob(params.resetkey), {
        password,
      })
        .then((resp) => {
-          Toastify({
+          toast.dismiss();
-            text: $_("password-reset-successful"),
+          toast($_("password-reset-successful"));
            duration: 3500,
          }).showToast();
          state = "reset_success";
        })
        .catch((err) => {
          state = "reset_error";
        });
    } else {
-      Toastify({
+      toast.dismiss();
-        text: $_("please-provide-a-password"),
+      toast.error($_("please-provide-a-password"));
        duration: 3500,
      }).showToast();
    }
  }
 </script>
-{#if state === 'reset_success'}
+{#if state === "reset_success"}
  <div class="min-h-screen flex items-center justify-center bg-gray-100">
    <div class="max-w-md w-full py-12 px-6">
      <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
      <p class="mt-6 text-lg text-center font-bold text-gray-900">
-        {$_('application_name')}
+        {$_("application_name")}
      </p>
      <p class="mt-2 mb-2 text-sm text-center text-gray-900 font-bold">
-        {$_('successful-password-reset')}
+        {$_("successful-password-reset")}
      </p>
      <p class="mt-2 mb-2 text-sm text-center text-gray-900">
-        {$_('you-can-now-use-your-new-password-to-log-in-to-your-account')}
+        {$_("you-can-now-use-your-new-password-to-log-in-to-your-account")}
      </p>
      <div class="mt-6">
        <div class="mt-6">
          <a
            href="/login/"
-            class="text-center relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
+            class="text-center relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm"
-            {$_('go-to-login')}
+          >
            {$_("go-to-login")}
          </a>
        </div>
      </div>
    </div>
  </div>
-{:else if state === 'reset_error'}
+{:else if state === "reset_error"}
  <div class="min-h-screen flex items-center justify-center bg-gray-100">
    <div class="max-w-md w-full py-12 px-6">
      <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
      <p class="mt-6 text-lg text-center font-bold text-gray-900">
-        {$_('application_name')}
+        {$_("application_name")}
      </p>
      <p class="mt-2 mb-2 text-sm text-center text-gray-900 font-bold">
-        {$_('password-reset-failed')}
+        {$_("password-reset-failed")}
      </p>
      <p class="mt-2 mb-2 text-sm text-center text-gray-900">
-        {$_('please-request-a-new-reset-mail')}
+        {$_("please-request-a-new-reset-mail")}
      </p>
      <div class="mt-6">
        <div class="mt-6">
          <a
            href="/forgot_password/"
-            class="text-center relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
+            class="text-center relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm"
-            {$_('request-a-new-reset-mail')}
+          >
            {$_("request-a-new-reset-mail")}
          </a>
        </div>
      </div>
    </div>
  </div>
-{:else if state === 'reset_in_progress'}
+{:else if state === "reset_in_progress"}
  <div class="min-h-screen flex items-center justify-center bg-gray-100">
    <div class="max-w-md w-full py-12 px-6">
      <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
      <p class="mt-6 text-lg text-center font-bold text-gray-900">
-        {$_('application_name')}
+        {$_("application_name")}
      </p>
      <p class="mt-2 mb-4 text-md text-center text-gray-900">
-        {$_('reset-password')}
+        {$_("reset-password")}
      </p>
      <div>
        <div class="rounded-md shadow-sm">
          <div>
            <input
-              aria-label={$_('new-password')}
+              aria-label={$_("new-password")}
              name="password"
              type="password"
              required=""
              class="border-gray-300 placeholder-gray-500 appearance-none rounded-md relative block w-full px-3 py-2 border text-gray-900 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
-              placeholder={$_('new-password')}
+              placeholder={$_("new-password")}
-              bind:value={password} />
+              bind:value={password}
            />
          </div>
          <PasswordStrength bind:password_change={password} />
        </div>
@@ -116,19 +111,22 @@
            disabled={!password_strong_enough(password)}
            class:opacity-50={!password_strong_enough(password)}
            type="submit"
-            class="relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
+            class="relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm"
          >
            <span class="absolute left-0 inset-y pl-3">
              <svg
                class="h-5 w-5 text-gray-500"
                fill="currentColor"
-                viewBox="0 0 20 20">
+                viewBox="0 0 20 20"
              >
                <path
                  fill-rule="evenodd"
                  d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
-                  clip-rule="evenodd" />
+                  clip-rule="evenodd"
                />
              </svg>
            </span>
-            {$_('reset-my-password')}
+            {$_("reset-my-password")}
          </button>
        </div>
      </div>
--- a/src/components/base/FormLayout.svelte
+++ b/src/components/base/FormLayout.svelte
@@ -1,274 +0,0 @@
 <!--
  This example requires Tailwind CSS v2.0+ 
  This example requires some changes to your config:
  ```
  // tailwind.config.js
  module.exports = {
    // ...
    plugins: [
      // ...
      require('@tailwindcss/forms'),
    ]
  }
  ```
 -->
 <div>
  <div class="md:grid md:grid-cols-3 md:gap-6">
    <div class="md:col-span-1">
      <div class="px-4 sm:px-0">
        <h3 class="text-lg font-medium leading-6 text-gray-900">Profile</h3>
        <p class="mt-1 text-sm text-gray-600">
          This information will be displayed publicly so be careful what you share.
        </p>
      </div>
    </div>
    <div class="mt-5 md:mt-0 md:col-span-2">
      <form action="#" method="POST">
        <div class="shadow sm:rounded-md sm:overflow-hidden">
          <div class="px-4 py-5 bg-white space-y-6 sm:p-6">
            <div class="grid grid-cols-3 gap-6">
              <div class="col-span-3 sm:col-span-2">
                <label for="company_website" class="block text-sm font-medium text-gray-700">
                  Website
                </label>
                <div class="mt-1 flex rounded-md shadow-sm">
                  <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">
                    http://
                  </span>
                  <input type="text" name="company_website" id="company_website" class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300" placeholder="www.example.com">
                </div>
              </div>
            </div>
            <div>
              <label for="about" class="block text-sm font-medium text-gray-700">
                About
              </label>
              <div class="mt-1">
                <textarea id="about" name="about" rows="3" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="you@example.com"></textarea>
              </div>
              <p class="mt-2 text-sm text-gray-500">
                Brief description for your profile. URLs are hyperlinked.
              </p>
            </div>
            <div>
              <!-- svelte-ignore a11y-label-has-associated-control -->
              <label class="block text-sm font-medium text-gray-700">
                Photo
              </label>
              <div class="mt-2 flex items-center">
                <span class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                  <svg class="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
                  </svg>
                </span>
                <button type="button" class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                  Change
                </button>
              </div>
            </div>
            <div>
              <!-- svelte-ignore a11y-label-has-associated-control -->
              <label class="block text-sm font-medium text-gray-700">
                Cover photo
              </label>
              <div class="mt-2 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
                <div class="space-y-1 text-center">
                  <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
                    <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                  <div class="flex text-sm text-gray-600">
                    <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
                      <span>Upload a file</span>
                      <input id="file-upload" name="file-upload" type="file" class="sr-only">
                    </label>
                    <p class="pl-1">or drag and drop</p>
                  </div>
                  <p class="text-xs text-gray-500">
                    PNG, JPG, GIF up to 10MB
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
            <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
              Save
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
 </div>
 <div class="hidden sm:block" aria-hidden="true">
  <div class="py-5">
    <div class="border-t border-gray-200"></div>
  </div>
 </div>
 <div class="mt-10 sm:mt-0">
  <div class="md:grid md:grid-cols-3 md:gap-6">
    <div class="md:col-span-1">
      <div class="px-4 sm:px-0">
        <h3 class="text-lg font-medium leading-6 text-gray-900">Personal Information</h3>
        <p class="mt-1 text-sm text-gray-600">
          Use a permanent address where you can receive mail.
        </p>
      </div>
    </div>
    <div class="mt-5 md:mt-0 md:col-span-2">
      <form action="#" method="POST">
        <div class="shadow overflow-hidden sm:rounded-md">
          <div class="px-4 py-5 bg-white sm:p-6">
            <div class="grid grid-cols-6 gap-6">
              <div class="col-span-6 sm:col-span-3">
                <label for="first_name" class="block text-sm font-medium text-gray-700">First name</label>
                <input type="text" name="first_name" id="first_name" autocomplete="given-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
              </div>
              <div class="col-span-6 sm:col-span-3">
                <label for="last_name" class="block text-sm font-medium text-gray-700">Last name</label>
                <input type="text" name="last_name" id="last_name" autocomplete="family-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
              </div>
              <div class="col-span-6 sm:col-span-4">
                <label for="email_address" class="block text-sm font-medium text-gray-700">Email address</label>
                <input type="text" name="email_address" id="email_address" autocomplete="email" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
              </div>
              <div class="col-span-6 sm:col-span-3">
                <label for="country" class="block text-sm font-medium text-gray-700">Country / Region</label>
                <select id="country" name="country" autocomplete="country" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                  <option>United States</option>
                  <option>Canada</option>
                  <option>Mexico</option>
                </select>
              </div>
              <div class="col-span-6">
                <label for="street_address" class="block text-sm font-medium text-gray-700">Street address</label>
                <input type="text" name="street_address" id="street_address" autocomplete="street-address" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
              </div>
              <div class="col-span-6 sm:col-span-6 lg:col-span-2">
                <label for="city" class="block text-sm font-medium text-gray-700">City</label>
                <input type="text" name="city" id="city" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
              </div>
              <div class="col-span-6 sm:col-span-3 lg:col-span-2">
                <label for="state" class="block text-sm font-medium text-gray-700">State / Province</label>
                <input type="text" name="state" id="state" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
              </div>
              <div class="col-span-6 sm:col-span-3 lg:col-span-2">
                <label for="postal_code" class="block text-sm font-medium text-gray-700">ZIP / Postal</label>
                <input type="text" name="postal_code" id="postal_code" autocomplete="postal-code" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
              </div>
            </div>
          </div>
          <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
            <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
              Save
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
 </div>
 <div class="hidden sm:block" aria-hidden="true">
  <div class="py-5">
    <div class="border-t border-gray-200"></div>
  </div>
 </div>
 <div class="mt-10 sm:mt-0">
  <div class="md:grid md:grid-cols-3 md:gap-6">
    <div class="md:col-span-1">
      <div class="px-4 sm:px-0">
        <h3 class="text-lg font-medium leading-6 text-gray-900">Notifications</h3>
        <p class="mt-1 text-sm text-gray-600">
          Decide which communications you'd like to receive and how.
        </p>
      </div>
    </div>
    <div class="mt-5 md:mt-0 md:col-span-2">
      <form action="#" method="POST">
        <div class="shadow overflow-hidden sm:rounded-md">
          <div class="px-4 py-5 bg-white space-y-6 sm:p-6">
            <fieldset>
              <legend class="text-base font-medium text-gray-900">By Email</legend>
              <div class="mt-4 space-y-4">
                <div class="flex items-start">
                  <div class="flex items-center h-5">
                    <input id="comments" name="comments" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                  </div>
                  <div class="ml-3 text-sm">
                    <label for="comments" class="font-medium text-gray-700">Comments</label>
                    <p class="text-gray-500">Get notified when someones posts a comment on a posting.</p>
                  </div>
                </div>
                <div class="flex items-start">
                  <div class="flex items-center h-5">
                    <input id="candidates" name="candidates" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                  </div>
                  <div class="ml-3 text-sm">
                    <label for="candidates" class="font-medium text-gray-700">Candidates</label>
                    <p class="text-gray-500">Get notified when a candidate applies for a job.</p>
                  </div>
                </div>
                <div class="flex items-start">
                  <div class="flex items-center h-5">
                    <input id="offers" name="offers" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                  </div>
                  <div class="ml-3 text-sm">
                    <label for="offers" class="font-medium text-gray-700">Offers</label>
                    <p class="text-gray-500">Get notified when a candidate accepts or rejects an offer.</p>
                  </div>
                </div>
              </div>
            </fieldset>
            <fieldset>
              <div>
                <legend class="text-base font-medium text-gray-900">Push Notifications</legend>
                <p class="text-sm text-gray-500">These are delivered via SMS to your mobile phone.</p>
              </div>
              <div class="mt-4 space-y-4">
                <div class="flex items-center">
                  <input id="push_everything" name="push_notifications" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
                  <label for="push_everything" class="ml-3 block text-sm font-medium text-gray-700">
                    Everything
                  </label>
                </div>
                <div class="flex items-center">
                  <input id="push_email" name="push_notifications" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
                  <label for="push_email" class="ml-3 block text-sm font-medium text-gray-700">
                    Same as email
                  </label>
                </div>
                <div class="flex items-center">
                  <input id="push_nothing" name="push_notifications" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
                  <label for="push_nothing" class="ml-3 block text-sm font-medium text-gray-700">
                    No push notifications
                  </label>
                </div>
              </div>
            </fieldset>
          </div>
          <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
            <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
              Save
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
 </div>
--- a/src/components/base/NoComponentLoaded.svelte
+++ b/src/components/base/NoComponentLoaded.svelte
@@ -4,19 +4,22 @@
 <body class="antialiased font-sans">
  <div class="flex min-h-screen">
-    <div class="w-full bg-white flex items-center justify-center ">
+    <div class="w-full bg-white flex items-center justify-center">
      <div class="max-w-sm m-8">
        <div class="text-black text-5xl md:text-15xl font-black">
-          {$_('internal-error')}
+          {$_("internal-error")}
        </div>
        <div class="w-16 h-1 bg-purple-light my-3 md:my-6" />
        <p
-          class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal">
+          class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal"
-          {$_('generic-ui-logic-error')}
+        >
          {$_("generic-ui-logic-error")}
        </p>
        <a
          href="/"
-          class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg">{$_('goback')}</a>
+          class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg"
          >{$_("goback")}</a
        >
      </div>
    </div>
  </div>
--- a/src/components/base/PromiseError.svelte
+++ b/src/components/base/PromiseError.svelte
@@ -5,7 +5,7 @@
 <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>
+    <b class="capitalize">{$_("general_promise_error")}</b>
    {error}
  </span>
 </div>
--- a/src/components/base/datatable_i18n.js
+++ b/src/components/base/datatable_i18n.js
@@ -1,24 +1,25 @@
 export function getlang(langkeys) {
-	return {
+  return {
-		search: {
+    search: {
-			placeholder: langkeys.search
+      placeholder: langkeys.search,
-		},
+    },
-		sort: {
+    sort: {
-			sortAsc: langkeys.sort_column_ascending,
+      sortAsc: langkeys.sort_column_ascending,
-			sortDesc: langkeys.sort_column_descending
+      sortDesc: langkeys.sort_column_descending,
-		},
+    },
-		pagination: {
+    pagination: {
-			previous: langkeys.previous,
+      previous: langkeys.previous,
-			next: langkeys.next,
+      next: langkeys.next,
-			navigate: (page, pages) => `${langkeys.page} ${page} ${langkeys.of} ${pages}`,
+      navigate: (page, pages) =>
-			page: (page) => `${langkeys.page} ${page}`,
+        `${langkeys.page} ${page} ${langkeys.of} ${pages}`,
-			showing: langkeys.showing,
+      page: (page) => `${langkeys.page} ${page}`,
-			of: langkeys.of,
+      showing: langkeys.showing,
-			to: langkeys.to,
+      of: langkeys.of,
-			results: langkeys.records
+      to: langkeys.to,
-		},
+      results: langkeys.records,
-		loading: langkeys.loading,
+    },
-		noRecordsFound: langkeys.no_matching_records_found,
+    loading: langkeys.loading,
-		error: langkeys.an_error_happened_while_fetching_the_data
+    noRecordsFound: langkeys.no_matching_records_found,
-	};
+    error: langkeys.an_error_happened_while_fetching_the_data,
  };
 }
--- a/src/components/base/importfixes.svelte
+++ b/src/components/base/importfixes.svelte
@@ -3,4 +3,4 @@
    Or as others may call it: Real big bullshit time.
    Issue: https://git.odit.services/lfk/frontend/issues/136
 -->
-<div class="opacity-50"></div>
+<div class="opacity-50" />
--- a/src/components/base/outsideclick.js
+++ b/src/components/base/outsideclick.js
@@ -1,10 +1,10 @@
 /** Dispatch event on click outside of node */
 export function clickOutside(node) {
-	const handleClick = (event) => {
+  const handleClick = (event) => {
-		if (event.target.getAttribute('data-id') === 'modal_backdrop') {
+    if (event.target.getAttribute("data-id") === "modal_backdrop") {
-			node.dispatchEvent(new CustomEvent('click_outside', node));
+      node.dispatchEvent(new CustomEvent("click_outside", node));
-		}
+    }
-	};
+  };
-	document.removeEventListener('click', handleClick, true);
+  document.removeEventListener("click", handleClick, true);
-	document.addEventListener('click', handleClick, true);
+  document.addEventListener("click", handleClick, true);
 }
--- a/src/components/base/simple.css
+++ b/src/components/base/simple.css
--- a/src/components/cards/AddCardBulkModal.svelte
+++ b/src/components/cards/AddCardBulkModal.svelte
@@ -3,13 +3,13 @@
  import { clickOutside } from "../base/outsideclick";
  import { RunnerCardService } from "@odit/lfk-client-js";
  import Toastify from "toastify-js";
  import { createEventDispatcher } from "svelte";
  import toast from "svelte-french-toast";
  import DocumentServer from "../pdf_generation/DocumentServer";
  export let bulk_modal_open;
  function focus(el) {
    el.focus();
  }
  const dispatch = createEventDispatcher();
  const documentServer = new DocumentServer(config.baseurl_documentserver,config.documentserver_key);
  $: card_count = 0;
  $: is_card_count_valid = card_count > 0;
@@ -32,28 +32,20 @@
  function submit_without_print() {
    if (processed_last_submit === true) {
      processed_last_submit = false;
-      const toast = Toastify({
+      toast.loading($_("creating-blanco-cards"));
        text: $_("creating-blanco-cards"),
        duration: -1,
      }).showToast();
      RunnerCardService.runnerCardControllerPostBlancoBulk(card_count, true)
        .then((result) => {
          bulk_modal_open = false;
          //
-          Toastify({
+          toast.dismiss();
-            text: $_("created-blanco-cards"),
+          toast.success($_("created-blanco-cards"));
-            duration: 500,
+          dispatch("created", { cards: result });
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          }).showToast();
          dispatch("created", {cards: result})
        })
        .catch((err) => {
          //
        })
        .finally(() => {
          processed_last_submit = true;
          //
          toast.hideToast();
        });
    }
  }
@@ -61,47 +53,17 @@
  function submit_with_print() {
    if (processed_last_submit === true) {
      processed_last_submit = false;
-      const toast = Toastify({
+      toast.dismiss();
-        text: $_("creating-blanco-cards"),
+      toast.loading($_("creating-blanco-cards"));
        duration: -1,
      }).showToast();
      RunnerCardService.runnerCardControllerPostBlancoBulk(card_count, true)
        .then((result) => {
          bulk_modal_open = false;
          //
-          Toastify({
+          toast.dismiss();
-            text: $_("created-blanco-cards"),
+          toast.success($_("created-blanco-cards"));
-            duration: 500,
+          toast.loading($_("generating-pdf"));
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          dispatch("created", { cards: result });
-          }).showToast();
+          documentServer.generateCards(result, "de")
          const toast = Toastify({
            text: $_("generating-pdf"),
            duration: -1,
          }).showToast();
          dispatch("created", {cards: result})
          fetch(
            `${config.baseurl_documentserver}/cards?&download=true&key=${config.documentserver_key}`,
            {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
              },
              body: JSON.stringify(result),
            }
          )
            .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");
@@ -110,12 +72,8 @@
              document.body.appendChild(a);
              a.click();
              a.remove();
-              toast.hideToast();
+              toast.dismiss();
-              Toastify({
+              toast.success($_("pdf-successfully-generated"));
                text: $_("pdf-successfully-generated"),
                duration: 3500,
                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
              }).showToast();
            })
            .catch((err) => {
              console.error(err);
@@ -126,8 +84,6 @@
        })
        .finally(() => {
          processed_last_submit = true;
          //
          toast.hideToast();
        });
    }
  }
@@ -135,56 +91,68 @@
 {#if bulk_modal_open}
  <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
    use:clickOutside
    on:click_outside={() => {
      bulk_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">
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
    >
      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div
          class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
+          data-id="modal_backdrop"
        />
      </div>
      <span
        class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span>
+        aria-hidden="true">&#8203;</span
      >
      <div
        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full"
        role="dialog"
        aria-modal="true"
-        aria-labelledby="modal-headline">
+        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="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
          <div class="">
            <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w- rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+              class="flex-shrink-0 flex items-center justify-center size-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" />
+                height="24"
                ><path fill="none" d="M0 0h24v24H0z" />
                <path
                  fill="currentColor"
-                  d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z" /></svg>
+                  d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z"
                /></svg
              >
            </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:mt-0">
              <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_('create-bulk-blanco-cards')}
+                {$_("create-bulk-blanco-cards")}
              </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                <p class="text-sm text-gray-500">
-                  {$_('just-enter-how-many-you-want-and-the-system-will-create-them')}
+                  {$_(
                    "just-enter-how-many-you-want-and-the-system-will-create-them"
                  )}
                </p>
              </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                <div class="col-span-6">
                  <label
                    for="amount"
-                    class="block text-sm font-medium text-gray-700">{$_('amount')}</label>
+                    class="block text-sm font-medium text-gray-700"
                    >{$_("amount")}</label
                  >
                  <div class="mt-1 flex rounded-md shadow-sm">
                    <input
                      autocomplete="off"
@@ -195,15 +163,19 @@
                      type="number"
                      step="1"
                      name="amount"
-                      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"
+                      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-neutral-800 p-2"
-                      placeholder="400" />
+                      placeholder="400"
                    />
                    <span
-                      class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">{$_('cards')}</span>
+                      class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm"
                      >{$_("cards")}</span
                    >
                  </div>
                  {#if !is_card_count_valid}
                    <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                      {$_('you-must-create-at-least-one-card-or-cancel')}
+                    >
                      {$_("you-must-create-at-least-one-card-or-cancel")}
                    </span>
                  {/if}
                </div>
@@ -211,30 +183,33 @@
            </div>
          </div>
        </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
          <button
            disabled={!createbtnenabled}
            class:opacity-50={!createbtnenabled}
            on:click={submit_with_print}
            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">
+            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"
-            {$_('create-and-generate-pdf')}
+          >
            {$_("create-and-generate-pdf")}
          </button>
          <button
            disabled={!createbtnenabled}
            class:opacity-50={!createbtnenabled}
            on:click={submit_without_print}
            type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-            {$_('create-without-pdf')}
+          >
            {$_("create-without-pdf")}
          </button>
          <button
            on:click={() => {
              bulk_modal_open = false;
            }}
            type="button"
-            class="mr-auto 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">
+            class="mr-auto 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"
-            {$_('cancel')}
+          >
            {$_("cancel")}
          </button>
        </div>
      </div>
--- a/src/components/cards/AddCardModal.svelte
+++ b/src/components/cards/AddCardModal.svelte
@@ -2,14 +2,10 @@
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
-  import {
+  import { RunnerCardService, RunnerService } from "@odit/lfk-client-js";
    RunnerCardService,
    RunnerService,
    ScanService,
  } from "@odit/lfk-client-js";
  import Select from "svelte-select";
  import Toastify from "toastify-js";
  import { createEventDispatcher } from "svelte";
  import toast from "svelte-french-toast";
  export let modal_open;
  const dispatch = createEventDispatcher();
@@ -62,10 +58,7 @@
  function submit() {
    if (processed_last_submit === true) {
      processed_last_submit = false;
-      const toast = Toastify({
+      toast.loading($_("adding-card"));
        text: $_("adding-card"),
        duration: -1,
      }).showToast();
      let postdata = {
        runner,
        enabled,
@@ -75,11 +68,8 @@
          runner = 0;
          modal_open = false;
          //
-          Toastify({
+          toast.dismiss();
-            text: $_("card-added"),
+          toast.success($_("card-added"));
            duration: 500,
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          }).showToast();
          dispatch("created", { cards: [result] });
        })
        .catch((err) => {
@@ -87,8 +77,6 @@
        })
        .finally(() => {
          processed_last_submit = true;
          //
          toast.hideToast();
        });
    }
  }
@@ -96,14 +84,14 @@
 {#if modal_open}
  <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
    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"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
    >
      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div
@@ -116,15 +104,15 @@
        aria-hidden="true">&#8203;</span
      >
      <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
        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="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
            <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"
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
            >
              <svg
                class="h-6 w-6 text-blue-600"
@@ -140,11 +128,11 @@
                /></svg
              >
            </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:mt-0">
              <h3 class="text-lg leading-6 font-medium text-gray-900">
                {$_("create-a-new-card")}
              </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                <p class="text-sm text-gray-500">
                  {$_("you-can-provide-a-runner-but-you-dont-have-to")}
                  {$_(
@@ -152,7 +140,7 @@
                  )}
                </p>
              </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                <div class="col-span-6">
                  <label
                    for="donor"
@@ -160,7 +148,7 @@
                    >{$_("runner")}</label
                  >
                  <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"
+                    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-neutral-800 rounded-md p-2"
                    itemFilter={(label, filterText, option) =>
                      filterRunners(label, filterText, option)}
                    items={runners}
@@ -177,13 +165,13 @@
            </div>
          </div>
        </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
          <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"
+            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"
          >
            {$_("create")}
          </button>
@@ -192,7 +180,7 @@
              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"
+            class="w-full 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 hidden lg:block"
          >
            {$_("cancel")}
          </button>
--- a/src/components/cards/CardDetailModal.svelte
+++ b/src/components/cards/CardDetailModal.svelte
@@ -4,17 +4,17 @@
  import { RunnerCardService, RunnerService } from "@odit/lfk-client-js";
  import Select from "svelte-select";
  import Toastify from "toastify-js";
  import { createEventDispatcher } from "svelte";
  import toast from "svelte-french-toast";
  export let edit_modal_open;
  export let runner = {};
  export let editable = {};
  export let original_data = {};
  const getRunnerLabel = (option) =>
    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
-    const filterRunners = (label, filterText, option) => {
+  const filterRunners = (label, filterText, option) => {
    if (filterText.startsWith("#")) {
-      return option.value.id == parseInt(filterText.replace("#",""))
+      return option.value.id == parseInt(filterText.replace("#", ""));
    }
    return (
      label.toLowerCase().includes(filterText.toLowerCase()) ||
@@ -54,32 +54,23 @@
  function submit() {
    if (processed_last_submit === true) {
      processed_last_submit = false;
-      const toast = Toastify({
+      toast.loading($_("updating-card"));
        text: $_("updating-card"),
        duration: -1,
      }).showToast();
      RunnerCardService.runnerCardControllerPut(original_data.id, editable)
        .then((result) => {
          let id = original_data.id;
          runner = {};
          editable = {};
          original_data = {};
          edit_modal_open = false;
          //
-          Toastify({
+          toast.dismiss();
-            text: $_("card-updated"),
+          toast.success($_("card-updated"));
-            duration: 500,
+          dispatch("dataUpdated", { card: result });
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          }).showToast();
          dispatch('dataUpdated', {card: result});
        })
        .catch((err) => {
          //
        })
        .finally(() => {
          processed_last_submit = true;
          //
          toast.hideToast();
        });
    }
  }
@@ -87,66 +78,79 @@
 {#if edit_modal_open}
  <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
    use:clickOutside
    on:click_outside={() => {
      edit_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">
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
    >
      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div
          class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
+          data-id="modal_backdrop"
        />
      </div>
      <span
        class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span>
+        aria-hidden="true">&#8203;</span
      >
      <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
        role="dialog"
        aria-modal="true"
-        aria-labelledby="modal-headline">
+        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="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
          <div class="">
            <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">
+              class="flex-shrink-0 flex items-center justify-center size-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" />
+                height="24"
                ><path fill="none" d="M0 0h24v24H0z" />
                <path
                  fill="currentColor"
-                  d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z" /></svg>
+                  d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z"
                /></svg
              >
            </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
              <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_('edit-a-card')}
+                {$_("edit-a-card")}
              </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                <p class="text-sm text-gray-500">
-                  {$_('you-can-provide-a-runner-but-you-dont-have-to')}
+                  {$_("you-can-provide-a-runner-but-you-dont-have-to")}
                </p>
              </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                <div class="col-span-6">
                  <label
                    for="runner"
-                    class="block text-sm font-medium text-gray-700">{$_('runner')}</label>
+                    class="block text-sm font-medium text-gray-700"
                    >{$_("runner")}</label
                  >
                  <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"
+                    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-neutral-800 rounded-md p-2"
-                    itemFilter={(label, filterText, option) => filterRunners(label, filterText, option)}
+                    itemFilter={(label, filterText, option) =>
                      filterRunners(label, filterText, option)}
                    items={runners}
                    showChevron={true}
-                    placeholder={$_('search-for-runner-by-name-or-id')}
+                    placeholder={$_("search-for-runner-by-name-or-id")}
-                    noOptionsMessage={$_('no-runners-found')}
+                    noOptionsMessage={$_("no-runners-found")}
                    bind:selectedValue={runner}
-                    on:select={(selectedValue) => (editable.runner = selectedValue.detail.value.id)}
+                    on:select={(selectedValue) =>
-                    on:clear={() => (editable.runner = null)} />
+                      (editable.runner = selectedValue.detail.value.id)}
                    on:clear={() => (editable.runner = null)}
                  />
                </div>
                <div class="col-span-6">
                  <p class="text-gray-500">
@@ -158,33 +162,36 @@
                      name="enabled"
                      type="checkbox"
                      checked={editable.enabled}
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-                    {$_('this-card-is')}
+                    />
                    {$_("this-card-is")}
                    {#if editable.enabled}
-                      {$_('enabled')}
+                      {$_("enabled")}
-                    {:else}{$_('disabled')}{/if}
+                    {:else}{$_("disabled")}{/if}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
          <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">
+            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"
-            {$_('save-changes')}
+          >
            {$_("save-changes")}
          </button>
          <button
            on:click={() => {
              edit_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">
+            class="w-full 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 hidden lg:block"
-            {$_('cancel')}
+          >
            {$_("cancel")}
          </button>
        </div>
      </div>
--- a/src/components/cards/CardStatus.svelte
+++ b/src/components/cards/CardStatus.svelte
@@ -5,12 +5,12 @@
 {#if enabled}
  <span
-    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-100 text-green-800"
    >{$_("enabled")}</span
  >
 {:else}
  <span
-    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-red-100 text-red-800"
    >{$_("disabled")}</span
  >
 {/if}
--- a/src/components/cards/Cards.svelte
+++ b/src/components/cards/Cards.svelte
@@ -11,29 +11,29 @@
 </script>
 <section class="container p-5">
-  <span class="mb-1 text-3xl font-extrabold leading-tight">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
    {$_("cards")}
-    {#if store.state.jwtinfo.userdetails.permissions.includes("CARD:CREATE")}
+  </h4>
-      <button
+  {#if store.state.jwtinfo.userdetails.permissions.includes("CARD:CREATE")}
-        on:click={() => {
+    <button
-          modal_open = true;
+      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"
+      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:w-auto sm:text-sm  mb-1 lg:mb-0"
-        {$_("add-card")}
+    >
-      </button>
+      {$_("add-card")}
-      <button
+    </button>
-        on:click={() => {
+    <button
-          bulk_modal_open = true;
+      on:click={() => {
-        }}
+        bulk_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"
+      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:w-auto sm:text-sm  mb-1 lg:mb-0"
-        {$_("create-bulk-cards")}
+    >
-      </button>
+      {$_("create-bulk-cards")}
-    {/if}
+    </button>
-  </span>
+  {/if}
  <CardsOverview bind:current_cards bind:addCards />
 </section>
@@ -41,7 +41,6 @@
  <AddCardModal
    bind:modal_open
    on:created={(event) => {
      console.log(event)
      addCards(event.detail.cards);
    }}
  />
--- a/src/components/cards/CardsEmptyState.svelte
+++ b/src/components/cards/CardsEmptyState.svelte
@@ -5,8 +5,8 @@
 <div class="text-center items-center justify-center">
  <p class="mb-16 text-lg text-gray-500">
-    <img class="m-auto" style="height:15rem" src={cards_empty} alt="" />
+    <img class="m-auto mt-2" style="height:15rem" src={cards_empty} alt="" />
-    <span class="font-bold">{$_('there-are-no-cards-yet')}</span><br />
+    <span class="font-bold">{$_("there-are-no-cards-yet")}</span><br />
-    <span>{$_('add-your-first-card')}</span>
+    <span>{$_("add-your-first-card")}</span>
  </p>
 </div>
--- a/src/components/cards/CardsOverview.svelte
+++ b/src/components/cards/CardsOverview.svelte
@@ -2,7 +2,7 @@
  import { _ } from "svelte-i18n";
  import { RunnerCardService } from "@odit/lfk-client-js";
  import store from "../../store";
-  import Toastify from "toastify-js";
+  import toast from "svelte-french-toast";
  import CardsEmptyState from "./CardsEmptyState.svelte";
  import CardDetailModal from "./CardDetailModal.svelte";
  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
@@ -32,7 +32,6 @@
  export let original_data = {};
  export let current_cards = [];
  export const addCards = (cards) => {
    console.log(cards);
    current_cards = current_cards.concat(...cards);
    options.update((options) => ({
      ...options,
@@ -148,19 +147,16 @@
      ...options,
      data: current_cards,
    }));
-    Toastify({
+    toast.success($_("card-deleted"));
      text: $_("card-deleted"),
      duration: 3500,
      backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
    }).showToast();
  }
  onMount(async () => {
    let page = 0;
    let pagesize = 500;
    while (page >= 0) {
      const cards = await RunnerCardService.runnerCardControllerGetAll(
        page,
-        500
+        pagesize
      );
      if (cards.length == 0) {
        page = -2;
@@ -175,7 +171,6 @@
      dataLoaded = true;
      page++;
    }
    console.log("All cards loaded");
  });
 </script>
@@ -221,7 +216,7 @@
      {#if selected.length > 0}
        <button
          type="button"
-          class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
+          class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm inline-flex"
          id="options-menu"
          on:click={async () => {
            const prom = [];
@@ -268,7 +263,7 @@
    </div>
    <div class="overflow-x-auto">
      <table class="w-full">
-        <thead>
+        <thead class="border-b border-gray-400">
          {#each $table.getHeaderGroups() as headerGroup}
            <tr class="select-none">
              <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
@@ -287,7 +282,7 @@
        </thead>
        <tbody>
          {#each $table.getRowModel().rows as row}
-            <tr>
+            <tr class="odd:bg-white even:bg-gray-100">
              <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
                <InputElement
                  type="checkbox"
@@ -313,3 +308,9 @@
    <TableBottom {table} {selected} />
  {/if}
 {/if}
 <style>
  table tbody tr td:nth-child(2) {
    font-family: monospace;
  }
 </style>
--- a/src/components/cards/DeleteCardModal.svelte
+++ b/src/components/cards/DeleteCardModal.svelte
@@ -34,14 +34,14 @@
 {#if modal_open}
  <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
    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"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
    >
      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div
@@ -54,15 +54,15 @@
        aria-hidden="true">&#8203;</span
      >
      <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
        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="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
            <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"
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
            >
              <svg
                class="h-6 w-6 text-blue-600"
@@ -78,15 +78,10 @@
                /></svg
              >
            </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
              <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_("confirm-delete")}
+                {$_("please-confirm-the-deletion-of-card")}
              </h3>
              <div class="mt-2 mb-6">
                <p class="text-sm text-gray-500">
                  {$_("please-confirm-the-deletion-of-card")}
                </p>
              </div>
              <div class="w-full">
                {$_("card")} #{delete_card.code}<br />
                <span class="inline-block">
@@ -104,11 +99,11 @@
            </div>
          </div>
        </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
          <button
            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"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
          >
            {$_("delete")}
          </button>
@@ -117,7 +112,7 @@
              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"
+            class="w-full 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 hidden lg:block"
          >
            {$_("cancel")}
          </button>
--- a/src/components/cards/ThFilterRunner.svelte
+++ b/src/components/cards/ThFilterRunner.svelte
@@ -1,57 +0,0 @@
 <script>
  export let handler;
  let filterValue = "";
 </script>
 <th>
  <input
    on:input={() => {
      setTimeout(() => {
        const v = filterValue.toLowerCase();
        handler.filter(v, (c) => {
          // if (v === "") {
          //   return c;
          // }
          if (!c.runner && v === "blanko") {
            return "blanko";
          }
          if (v.startsWith("#")) {
            return `#${c.runner?.id}`;
          }
          if (c.runner) {
            let runnerName = `${c.runner.firstname} ${c.runner.lastname}`;
            if (c.runner.middlename) {
              runnerName = `${c.runner.firstname} ${c.runner.middlename} ${c.runner.lastname}`;
            }
            runnerName = runnerName.toLowerCase();
            return runnerName;
          }
          return "";
        });
      }, 150);
    }}
    bind:value={filterValue}
    type="text"
    name="runnerfilter"
    id="runnerfilter"
  />
 </th>
 <style>
  th {
    border-bottom: 1px solid #e0e0e0;
  }
  input {
    margin: -1px 0 0 0;
    padding: 0;
    width: 100%;
    height: 24px;
    border: none;
    text-align: left;
    background: inherit;
    outline: 0;
    font-size: 14px;
  }
 </style>
--- a/src/components/cards/ThFilterStatus.svelte
+++ b/src/components/cards/ThFilterStatus.svelte
@@ -1,45 +0,0 @@
 <script>
  import { _ } from "svelte-i18n";
  export let handler;
  let selected = "all";
 </script>
 <th>
  <select
    on:input={() => {
      setTimeout(() => {
        if (`${selected}`.trim()) {
          if (selected === "all") {
            handler.filter("", "enabled");
          } else {
            handler.filter(selected, "enabled");
          }
        }
      }, 50);
    }}
    bind:value={selected}
    name="statusfilter"
    id="statusfilter"
  >
    <option value="all">{$_("all")}</option>
    <option value="true">{$_("enabled")}</option>
    <option value="false">{$_("disabled")}</option>
  </select>
 </th>
 <style>
  th {
    border-bottom: 1px solid #e0e0e0;
  }
  select {
    margin: -1px 0 0 0;
    padding: 0;
    width: 100%;
    height: 24px;
    border: none;
    text-align: left;
    background: inherit;
    outline: 0;
    font-size: 14px;
  }
 </style>
--- a/src/components/contacts/AddContactModal.svelte
+++ b/src/components/contacts/AddContactModal.svelte
@@ -9,7 +9,7 @@
  } from "@odit/lfk-client-js";
  import isEmail from "validator/es/lib/isEmail";
  import isMobilePhone from "validator/es/lib/isMobilePhone";
-  import Toastify from "toastify-js";
+  import toast from "svelte-french-toast";
  export let modal_open;
  export let current_contacts;
  $: selected_team = [];
@@ -43,7 +43,7 @@
  $: address_zipcode_value = "";
  $: address_city_value = "";
  $: processed_last_submit = true;
-  $: address_checked = true;
+  $: address_checked = false;
  $: isPhoneValidOrEmpty =
    (phone_input_value.includes("+") &&
      isMobilePhone(
@@ -85,10 +85,7 @@
  function submit() {
    if (processed_last_submit === true) {
      processed_last_submit = false;
-      const toast = Toastify({
+      toast.loading($_("contact-is-being-added"));
        text: $_('contact-is-being-added'),
        duration: -1,
      }).showToast();
      let address = {};
      if (address_checked === true) {
        address = {
@@ -122,11 +119,8 @@
          email_input_value = "";
          modal_open = false;
          //
-          Toastify({
+          toast.dismiss();
-            text: $_('contact-added'),
+          toast.success($_("contact-added"));
            duration: 500,
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          }).showToast();
          current_contacts.push(result);
          current_contacts = current_contacts;
        })
@@ -135,8 +129,6 @@
        })
        .finally(() => {
          processed_last_submit = true;
          //
          toast.hideToast();
        });
    }
  }
@@ -144,59 +136,71 @@
 {#if modal_open}
  <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
    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">
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
    >
      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div
          class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
+          data-id="modal_backdrop"
        />
      </div>
      <span
        class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span>
+        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"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
        role="dialog"
        aria-modal="true"
-        aria-labelledby="modal-headline">
+        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="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
          <div class="">
            <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">
+              class="flex-shrink-0 flex items-center justify-center size-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" />
+                height="24"
                ><path fill="none" d="M0 0h24v24H0z" />
                <path
-                  d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z" /></svg>
+                  d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z"
                /></svg
              >
            </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
              <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_('create-a-new-contact')}
+                {$_("create-a-new-contact")}
              </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                <p class="text-sm text-gray-500">
-                  {$_('please-provide-the-required-information-to-add-a-new-contact')}
+                  {$_(
                    "please-provide-the-required-information-to-add-a-new-contact"
                  )}
                </p>
              </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                <div class="col-span-6">
                  <label
                    for="firstname"
-                    class="block text-sm font-medium text-gray-700">{$_('first-name')}</label>
+                    class="block text-sm font-medium text-gray-700"
                    >{$_("first-name")}</label
                  >
                  <input
                    use:focus
                    autocomplete="off"
-                    placeholder={$_('first-name')}
+                    placeholder={$_("first-name")}
                    class:border-red-500={!isFirstnameValid}
                    class:focus:border-red-500={!isFirstnameValid}
                    class:focus:ring-red-500={!isFirstnameValid}
@@ -204,34 +208,41 @@
                    bind:this={firstname_input}
                    type="text"
                    name="firstname"
-                    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" />
+                    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-neutral-800 rounded-md p-2"
                  />
                  {#if !isFirstnameValid}
                    <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                      {$_('first-name-is-required')}
+                    >
                      {$_("first-name-is-required")}
                    </span>
                  {/if}
                </div>
                <div class="col-span-6">
                  <label
                    for="trackname"
-                    class="block text-sm font-medium text-gray-700">{$_('middle-name')}</label>
+                    class="block text-sm font-medium text-gray-700"
                    >{$_("middle-name")}</label
                  >
                  <input
                    autocomplete="off"
-                    placeholder={$_('middle-name')}
+                    placeholder={$_("middle-name")}
                    bind:value={middlename_input_value}
                    bind:this={middlename_input}
                    type="text"
                    name="trackname"
-                    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" />
+                    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-neutral-800 rounded-md p-2"
                  />
                </div>
                <div class="col-span-6">
                  <label
                    for="lastname"
-                    class="block text-sm font-medium text-gray-700">{$_('last-name')}</label>
+                    class="block text-sm font-medium text-gray-700"
                    >{$_("last-name")}</label
                  >
                  <input
                    autocomplete="off"
-                    placeholder="{$_('last-name')}"
+                    placeholder={$_("last-name")}
                    class:border-red-500={!isLastnameValid}
                    class:focus:border-red-500={!isLastnameValid}
                    class:focus:ring-red-500={!isLastnameValid}
@@ -239,23 +250,28 @@
                    bind:this={lastname_input}
                    type="text"
                    name="lastname"
-                    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" />
+                    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-neutral-800 rounded-md p-2"
                  />
                  {#if !isLastnameValid}
                    <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                      {$_('last-name-is-required')}
+                    >
                      {$_("last-name-is-required")}
                    </span>
                  {/if}
                </div>
                <div class="col-span-6">
                  <label
                    for="team"
-                    class="block text-sm font-medium text-gray-700">{$_('teams')}</label>
+                    class="block text-sm font-medium text-gray-700"
                    >{$_("teams")}</label
                  >
                  <select
                    name="team"
                    multiple
                    bind:value={selected_team}
-                    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">
+                    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-neutral-800 rounded-md p-2"
                  >
                    {#each teams as team}
                      <option value={team.id}>
                        {team.parentGroup.name}
@@ -271,10 +287,12 @@
                <div class="col-span-6">
                  <label
                    for="phone"
-                    class="block text-sm font-medium text-gray-700">{$_('phone')}</label>
+                    class="block text-sm font-medium text-gray-700"
                    >{$_("phone")}</label
                  >
                  <input
                    autocomplete="off"
-                    placeholder={$_('phone')}
+                    placeholder={$_("phone")}
                    class:border-red-500={!isPhoneValidOrEmpty}
                    class:focus:border-red-500={!isPhoneValidOrEmpty}
                    class:focus:ring-red-500={!isPhoneValidOrEmpty}
@@ -282,21 +300,27 @@
                    bind:this={phone_input}
                    type="tel"
                    name="phone"
-                    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" />
+                    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-neutral-800 rounded-md p-2"
                  />
                  {#if !isPhoneValidOrEmpty}
                    <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                      {@html $_('the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number')}
+                    >
                      {@html $_(
                        "the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number"
                      )}
                    </span>
                  {/if}
                </div>
                <div class="col-span-6">
                  <label
                    for="email"
-                    class="block text-sm font-medium text-gray-700">{$_('e-mail-adress')}</label>
+                    class="block text-sm font-medium text-gray-700"
                    >{$_("e-mail-adress")}</label
                  >
                  <input
                    autocomplete="off"
-                    placeholder={$_('e-mail-adress')}
+                    placeholder={$_("e-mail-adress")}
                    class:border-red-500={!isEmailValidOrEmpty}
                    class:focus:border-red-500={!isEmailValidOrEmpty}
                    class:focus:ring-red-500={!isEmailValidOrEmpty}
@@ -304,11 +328,13 @@
                    bind:this={email_input}
                    type="email"
                    name="email"
-                    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" />
+                    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-neutral-800 rounded-md p-2"
                  />
                  {#if !isEmailValidOrEmpty}
                    <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                      {$_('valid-email-is-required')}
+                    >
                      {$_("valid-email-is-required")}
                    </span>
                  {/if}
                </div>
@@ -319,22 +345,25 @@
                      id="comments"
                      name="comments"
                      type="checkbox"
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
                    />
                  </div>
                  <div class="ml-3 text-sm">
-                    <label
+                    <label for="comments" class="font-semibold text-gray-700"
-                      for="comments"
+                      >{$_("address")}</label
-                      class="font-medium text-gray-700">{$_('address')}</label>
+                    >
                  </div>
                </div>
                {#if address_checked === true}
                  <div class="col-span-6">
                    <label
                      for="address1"
-                      class="block text-sm font-medium text-gray-700">{$_('address')}</label>
+                      class="block text-sm font-medium text-gray-700"
                      >{$_("address")}</label
                    >
                    <input
                      autocomplete="off"
-                      placeholder="{$_('address')}"
+                      placeholder={$_("address")}
                      class:border-red-500={!isAddress1Valid}
                      class:focus:border-red-500={!isAddress1Valid}
                      class:focus:ring-red-500={!isAddress1Valid}
@@ -342,34 +371,41 @@
                      bind:this={address_input1}
                      type="text"
                      name="address1"
-                      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" />
+                      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-neutral-800 rounded-md p-2"
                    />
                    {#if !isAddress1Valid}
                      <span
-                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                        {$_('address-is-required')}
+                      >
                        {$_("address-is-required")}
                      </span>
                    {/if}
                  </div>
                  <div class="col-span-6">
                    <label
                      for="address2"
-                      class="block text-sm font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
+                      class="block text-sm font-medium text-gray-700"
                      >{$_("apartment-suite-etc")}</label
                    >
                    <input
                      autocomplete="off"
-                      placeholder={$_('apartment-suite-etc')}
+                      placeholder={$_("apartment-suite-etc")}
                      bind:value={address_input2_value}
                      bind:this={address_input2}
                      type="text"
                      name="address2"
-                      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" />
+                      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-neutral-800 rounded-md p-2"
                    />
                  </div>
                  <div class="col-span-6">
                    <label
                      for="zipcode"
-                      class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
+                      class="block text-sm font-medium text-gray-700"
                      >{$_("zip-postal-code")}</label
                    >
                    <input
                      autocomplete="off"
-                      placeholder={$_('zip-postal-code')}
+                      placeholder={$_("zip-postal-code")}
                      class:border-red-500={!iszipcodevalid}
                      class:focus:border-red-500={!iszipcodevalid}
                      class:focus:ring-red-500={!iszipcodevalid}
@@ -377,21 +413,25 @@
                      bind:this={address_zipcode}
                      type="text"
                      name="zipcode"
-                      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" />
+                      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-neutral-800 rounded-md p-2"
                    />
                    {#if !iszipcodevalid}
                      <span
-                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                        {$_('valid-zipcode-postal-code-is-required')}
+                      >
                        {$_("valid-zipcode-postal-code-is-required")}
                      </span>
                    {/if}
                  </div>
                  <div class="col-span-6">
                    <label
                      for="city"
-                      class="block text-sm font-medium text-gray-700">{$_('city')}</label>
+                      class="block text-sm font-medium text-gray-700"
                      >{$_("city")}</label
                    >
                    <input
                      autocomplete="off"
-                      placeholder="{$_('city')}"
+                      placeholder={$_("city")}
                      class:border-red-500={!iscityvalid}
                      class:focus:border-red-500={!iscityvalid}
                      class:focus:ring-red-500={!iscityvalid}
@@ -399,11 +439,13 @@
                      bind:this={address_city}
                      type="text"
                      name="city"
-                      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" />
+                      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-neutral-800 rounded-md p-2"
                    />
                    {#if !iscityvalid}
                      <span
-                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                        {$_('valid-city-is-required')}
+                      >
                        {$_("valid-city-is-required")}
                      </span>
                    {/if}
                  </div>
@@ -412,22 +454,24 @@
            </div>
          </div>
        </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
          <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">
+            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"
-            {$_('create')}
+          >
            {$_("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">
+            class="w-full 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 hidden lg:block"
-            {$_('cancel')}
+          >
            {$_("cancel")}
          </button>
        </div>
      </div>
--- a/src/components/contacts/ContactDetail.svelte
+++ b/src/components/contacts/ContactDetail.svelte
@@ -1,394 +1,399 @@
 <script>
-  import { _ } from "svelte-i18n";
+	import { _ } from "svelte-i18n";
-  import store from "../../store";
+	import store from "../../store";
-  import {
+	import {
-    GroupContactService,
+		GroupContactService,
-    RunnerTeamService,
+		RunnerTeamService,
-    RunnerOrganizationService,
+		RunnerOrganizationService,
-  } from "@odit/lfk-client-js";
+	} from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+	import PromiseError from "../base/PromiseError.svelte";
-  import PromiseError from "../base/PromiseError.svelte";
+	import isEmail from "validator/es/lib/isEmail";
-  import isEmail from "validator/es/lib/isEmail";
+	import toast from "svelte-french-toast";
-  let data_loaded = false;
+	let data_loaded = false;
-  let orgs = [];
+	let orgs = [];
-  let teams = [];
+	let teams = [];
-  export let params;
+	export let params;
-  $: delete_triggered = false;
+	$: delete_triggered = false;
-  $: original_data = {};
+	$: original_data = {};
-  $: editable = {};
+	$: editable = {};
-  $: changes_performed = !(
+	$: changes_performed = !(
-    JSON.stringify(original_data) === JSON.stringify(editable)
+		JSON.stringify(original_data) === JSON.stringify(editable)
-  );
+	);
-  $: isEmailValid =
+	$: isEmailValid =
-    (editable.email || "") === "" ||
+		(editable.email || "") === "" ||
-    (editable.email && isEmail(editable.email || ""));
+		(editable.email && isEmail(editable.email || ""));
-  $: isFirstnameValid = editable.firstname !== "";
+	$: isFirstnameValid = editable.firstname !== "";
-  $: isLastnameValid = editable.lastname !== "";
+	$: isLastnameValid = editable.lastname !== "";
-  $: save_enabled =
+	$: save_enabled =
-    changes_performed &&
+		changes_performed &&
-    isFirstnameValid &&
+		isFirstnameValid &&
-    isLastnameValid &&
+		isLastnameValid &&
-    isEmailValid &&
+		isEmailValid &&
-    isPhoneValidOrEmpty &&
+		isPhoneValidOrEmpty &&
-    ((isAddress1Valid && iszipcodevalid && iscityvalid) ||
+		((isAddress1Valid && iszipcodevalid && iscityvalid) ||
-    editable.address_checked === false);
+			editable.address_checked === false);
-  const promise = GroupContactService.groupContactControllerGetOne(
+	const promise = GroupContactService.groupContactControllerGetOne(
-    params.contact
+		params.contact
-  ).then((data) => {
+	).then((data) => {
-    data_loaded = true;
+		data_loaded = true;
-    original_data = Object.assign(original_data, data);
+		original_data = Object.assign(original_data, data);
-    editable = Object.assign(editable, original_data);
+		editable = Object.assign(editable, original_data);
-    editable.groups = editable.groups.map((g) => g.id);
+		editable.groups = editable.groups.map((g) => g.id);
-    original_data.groups = original_data.groups.map((g) => g.id);
+		original_data.groups = original_data.groups.map((g) => g.id);
-    editable.address_checked = editable.address.address1 !== null;
+		editable.address_checked = editable.address.address1 !== null;
-    original_data.address_checked = editable.address.address1 !== null;
+		original_data.address_checked = editable.address.address1 !== null;
-    if(editable.address_checked===false){
+		if (editable.address_checked === false) {
-      editable.address = {
+			editable.address = {
-        address1: "",
+				address1: "",
-        address2: "",
+				address2: "",
-        city: "",
+				city: "",
-        postalcode: "",
+				postalcode: "",
-        country: ""
+				country: "",
-      }
+			};
-    }
+		}
-  });
+	});
-  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
+	RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
-    orgs = val;
+		orgs = val;
-  });
+	});
-  RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
+	RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
-    teams = val;
+		teams = val;
-  });
+	});
-  $: isPhoneValidOrEmpty =
+	$: isPhoneValidOrEmpty =
-    editable.phone?.includes("+") ||
+		editable.phone?.includes("+") ||
-    editable.phone === "" ||
+		editable.phone === "" ||
-    editable.phone === null;
+		editable.phone === null;
-  $: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
+	$: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
-  $: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
+	$: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
-  $: iscityvalid = editable.address?.city?.trim().length !== 0;
+	$: iscityvalid = editable.address?.city?.trim().length !== 0;
-  function submit() {
+	function submit() {
-    if (data_loaded === true && save_enabled) {
+		if (data_loaded === true && save_enabled) {
-      Toastify({
+			toast.loading($_("contact-is-being-updated"));
-        text: $_("contact-is-being-updated"),
+			editable.address.country = "DE";
-        duration: 2500,
+			if (editable.address_checked === false) {
-      }).showToast();
+				editable.address = null;
-      editable.address.country = "DE";
+			}
-      if (editable.address_checked === false) {
+			if (editable.email) editable.email = editable.email;
-        editable.address = null;
+			if (editable.phone) editable.phone = editable.phone;
-      }
+			if (editable.middlename) editable.middlename = editable.middlename;
-      if (editable.email) editable.email = editable.email;
+			GroupContactService.groupContactControllerPut(original_data.id, editable)
-      if (editable.phone) editable.phone = editable.phone;
+				.then((resp) => {
-      if (editable.middlename) editable.middlename = editable.middlename;
+					Object.assign(original_data, editable);
-      GroupContactService.groupContactControllerPut(original_data.id, editable)
+					original_data = original_data;
-        .then((resp) => {
+					toast.dismiss();
-          Object.assign(original_data, editable);
+					toast.success($_("updated-contact"));
-          original_data=original_data;
+				})
-          Toastify({
+				.catch((err) => {});
-            text: $_("updated-contact"),
+		} else {
-            duration: 2500,
+		}
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+	}
-          }).showToast();
+	function deleteContact() {
-        })
+		GroupContactService.groupContactControllerRemove(original_data.id, true)
-        .catch((err) => {});
+			.then((resp) => {
-    } else {
+				location.replace("./");
-    }
+			})
-  }
+			.catch((err) => {});
-  function deleteContact() {
+	}
    GroupContactService.groupContactControllerRemove(original_data.id, true)
      .then((resp) => {
        location.replace("./");
      })
      .catch((err) => {});
  }
 </script>
 {#await promise}
-  {$_('loading-contact-details')}
+	{$_("loading-contact-details")}
 {:then}
-  <section class="container p-5 select-none">
+	<section class="container p-5 select-none">
-    <div class="flex flex-row mb-4">
+		<div class="flex flex-row mb-4">
-      <div class="w-full">
+			<div class="w-full">
-        <nav class="w-full flex">
+				<nav class="w-full flex">
-          <ol class="list-none flex flex-row items-center justify-start">
+					<ol class="list-none flex flex-row items-center justify-start">
-            <li class="flex items-center">
+						<li class="flex items-center">
-              <svg
+							<a class="mr-2" href="./"
-                fill="currentColor"
+								><svg
-                xmlns="http://www.w3.org/2000/svg"
+									xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
+									width="24"
-                width="24"
+									height="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
+									viewBox="0 0 24 24"
-                <path
+									fill="none"
-                  d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z" /></svg>
+									stroke="currentColor"
-            </li>
+									stroke-width="2"
-            <li class="flex items-center ml-2">
+									stroke-linecap="round"
-              <a class="mr-2" href="./">{$_('contacts')}</a><svg
+									stroke-linejoin="round"
-                stroke="currentColor"
+									class="inline-block"
-                fill="none"
+									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
-                stroke-width="2"
+								>
-                viewBox="0 0 24 24"
+								{$_("contacts")}</a
-                stroke-linecap="round"
+							>
-                stroke-linejoin="round"
+						</li>
-                class="h-3 w-3 mr-2 stroke-current"
+					</ol>
-                height="1em"
+				</nav>
-                width="1em"
+			</div>
-                xmlns="http://www.w3.org/2000/svg"><line
+		</div>
-                  x1="5"
+		<div class="mb-4 text-3xl font-extrabold leading-tight">
-                  y1="12"
+			{original_data.firstname}
-                  x2="19"
+			{original_data.middlename || ""}
-                  y2="12" />
+			{original_data.lastname}
-                <polyline points="12 5 19 12 12 19" /></svg>
+			<div data-id="contact_actions_${editable.id}">
-            </li>
+				{#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:DELETE")}
-            <li class="flex items-center">
+					{#if delete_triggered}
-              <span class="mr-2">{original_data.firstname}
+						<button
-                {original_data.middlename || ''}
+							on:click={deleteContact}
-                {original_data.lastname}</span>
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-            </li>
+							>{$_("confirm-deletion")}</button
-          </ol>
+						>
-        </nav>
+						<button
-      </div>
+							on:click={() => {
-    </div>
+								delete_triggered = !delete_triggered;
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
+							}}
-      {original_data.firstname}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
-      {original_data.middlename || ''}
+							>{$_("cancel")}</button
-      {original_data.lastname}
+						>
-      <span data-id="contact_actions_${editable.id}">
+					{/if}
-        {#if store.state.jwtinfo.userdetails.permissions.includes('CONTACT:DELETE')}
+					{#if !delete_triggered}
-          {#if delete_triggered}
+						<button
-            <button
+							on:click={() => {
-              on:click={deleteContact}
+								delete_triggered = true;
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('confirm-deletion')}</button>
+							}}
-            <button
+							type="button"
-              on:click={() => {
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-                delete_triggered = !delete_triggered;
+							>{$_("delete-contact")}</button
-              }}
+						>
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
+					{/if}
-          {/if}
+				{/if}
-          {#if !delete_triggered}
+				{#if !delete_triggered}
-            <button
+					<button
-              on:click={() => {
+						disabled={!save_enabled}
-                delete_triggered = true;
+						class:opacity-50={!save_enabled}
-              }}
+						type="button"
-              type="button"
+						on:click={submit}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-contact')}</button>
+						class="w-full 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:w-auto sm:text-sm mb-1 lg:mb-0"
-          {/if}
+						>{$_("save-changes")}</button
-        {/if}
+					>
-        {#if !delete_triggered}
+				{/if}
-          <button
+			</div>
-            disabled={!save_enabled}
+		</div>
-            class:opacity-50={!save_enabled}
+		<!--  -->
-            type="button"
+		<div class="text-sm w-full mt-2">
-            on:click={submit}
+			<label for="firstname" class="font-semibold text-gray-700"
-            class="w-full 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">{$_('save-changes')}</button>
+				>{$_("first-name")}</label
-        {/if}
+			>
-      </span>
+			<input
-    </div>
+				autocomplete="off"
-    <!--  -->
+				placeholder={$_("first-name")}
-    <div class="text-sm w-full">
+				type="text"
-      <label
+				class:border-red-500={!isFirstnameValid}
-        for="firstname"
+				class:focus:border-red-500={!isFirstnameValid}
-        class="font-medium text-gray-700">{$_('first-name')}</label>
+				class:focus:ring-red-500={!isFirstnameValid}
-      <input
+				bind:value={editable.firstname}
-        autocomplete="off"
+				name="firstname"
-        placeholder={$_('first-name')}
+				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-neutral-800 rounded-md p-2"
-        type="text"
+			/>
-        class:border-red-500={!isFirstnameValid}
+			{#if !isFirstnameValid}
-        class:focus:border-red-500={!isFirstnameValid}
+				<span
-        class:focus:ring-red-500={!isFirstnameValid}
+					class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-        bind:value={editable.firstname}
+				>
-        name="firstname"
+					{$_("first-name-is-required")}
-        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" />
+				</span>
-      {#if !isFirstnameValid}
+			{/if}
-        <span
+		</div>
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+		<div class="text-sm w-full mt-2">
-          {$_('first-name-is-required')}
+			<label for="middlename" class="font-semibold text-gray-700"
-        </span>
+				>{$_("middle-name")}</label
-      {/if}
+			>
-    </div>
+			<input
-    <div class="text-sm w-full">
+				autocomplete="off"
-      <label
+				placeholder={$_("middle-name")}
-        for="middlename"
+				type="text"
-        class="font-medium text-gray-700">{$_('middle-name')}</label>
+				bind:value={editable.middlename}
-      <input
+				name="middlename"
-        autocomplete="off"
+				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-neutral-800 rounded-md p-2"
-        placeholder={$_('middle-name')}
+			/>
-        type="text"
+		</div>
-        bind:value={editable.middlename}
+		<div class="text-sm w-full mt-2">
-        name="middlename"
+			<label for="lastname" class="font-semibold text-gray-700"
-        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" />
+				>{$_("last-name")}</label
-    </div>
+			>
-    <div class="text-sm w-full">
+			<input
-      <label
+				autocomplete="off"
-        for="lastname"
+				placeholder={$_("last-name")}
-        class="font-medium text-gray-700">{$_('last-name')}</label>
+				type="text"
-      <input
+				bind:value={editable.lastname}
-        autocomplete="off"
+				class:border-red-500={!isLastnameValid}
-        placeholder={$_('last-name')}
+				class:focus:border-red-500={!isLastnameValid}
-        type="text"
+				class:focus:ring-red-500={!isLastnameValid}
-        bind:value={editable.lastname}
+				name="lastname"
-        class:border-red-500={!isLastnameValid}
+				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-neutral-800 rounded-md p-2"
-        class:focus:border-red-500={!isLastnameValid}
+			/>
-        class:focus:ring-red-500={!isLastnameValid}
+			{#if !isLastnameValid}
-        name="lastname"
+				<span
-        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" />
+					class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-      {#if !isLastnameValid}
+				>
-        <span
+					{$_("last-name-is-required")}
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+				</span>
-          {$_('last-name-is-required')}
+			{/if}
-        </span>
+		</div>
-      {/if}
+		<div class="text-sm w-full mt-2">
-    </div>
+			<label for="email" class="font-semibold text-gray-700"
-    <div class="text-sm w-full">
+				>{$_("e-mail-adress")}</label
-      <label
+			>
-        for="email"
+			<input
-        class="font-medium text-gray-700">{$_('e-mail-adress')}</label>
+				autocomplete="off"
-      <input
+				placeholder={$_("e-mail-adress")}
-        autocomplete="off"
+				type="email"
-        placeholder={$_('e-mail-adress')}
+				bind:value={editable.email}
-        type="email"
+				class:border-red-500={!isEmailValid}
-        bind:value={editable.email}
+				class:focus:border-red-500={!isEmailValid}
-        class:border-red-500={!isEmailValid}
+				class:focus:ring-red-500={!isEmailValid}
-        class:focus:border-red-500={!isEmailValid}
+				name="email"
-        class:focus:ring-red-500={!isEmailValid}
+				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-neutral-800 rounded-md p-2"
-        name="email"
+			/>
-        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" />
+			{#if !isEmailValid}
-      {#if !isEmailValid}
+				<span
-        <span
+					class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+				>
-          {$_('valid-email-is-required')}
+					{$_("valid-email-is-required")}
-        </span>
+				</span>
-      {/if}
+			{/if}
-    </div>
+		</div>
-    <div class="text-sm w-full">
+		<div class="text-sm w-full mt-2">
-      <label for="phone" class="font-medium text-gray-700">{$_('phone')}</label>
+			<label for="phone" class="font-semibold text-gray-700">{$_("phone")}</label>
-      <input
+			<input
-        autocomplete="off"
+				autocomplete="off"
-        placeholder={$_('phone')}
+				placeholder={$_("phone")}
-        type="tel"
+				type="tel"
-        class:border-red-500={!isPhoneValidOrEmpty}
+				class:border-red-500={!isPhoneValidOrEmpty}
-        class:focus:border-red-500={!isPhoneValidOrEmpty}
+				class:focus:border-red-500={!isPhoneValidOrEmpty}
-        class:focus:ring-red-500={!isPhoneValidOrEmpty}
+				class:focus:ring-red-500={!isPhoneValidOrEmpty}
-        bind:value={editable.phone}
+				bind:value={editable.phone}
-        name="phone"
+				name="phone"
-        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" />
+				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-neutral-800 rounded-md p-2"
-      {#if !isPhoneValidOrEmpty}
+			/>
-        <span
+			{#if !isPhoneValidOrEmpty}
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+				<span
-          {$_('valid-international-phone-number-is-required')}
+					class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-        </span>
+				>
-      {/if}
+					{$_("valid-international-phone-number-is-required")}
-    </div>
+				</span>
-    <div class="text-sm w-full">
+			{/if}
-      <span class="font-medium text-gray-700">{$_('groups')}</span>
+		</div>
-      <select
+		<div class="text-sm w-full mt-2">
-        bind:value={editable.groups}
+			<span class="font-semibold text-gray-700">{$_("groups")}</span>
-        name="team"
+			<select
-        multiple
+				bind:value={editable.groups}
-        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">
+				name="team"
-        {#each teams as team}
+				multiple
-          <option value={team.id}>
+				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-neutral-800 rounded-md p-2"
-            {team.parentGroup.name}
+			>
-            &gt;
+				{#each teams as team}
-            {team.name}
+					<option value={team.id}>
-          </option>
+						{team.parentGroup.name}
-        {/each}
+						&gt;
-        {#each orgs as org}
+						{team.name}
-          <option value={org.id}>{org.name}</option>
+					</option>
-        {/each}
+				{/each}
-      </select>
+				{#each orgs as org}
-    </div>
+					<option value={org.id}>{org.name}</option>
-    <!--  -->
+				{/each}
-    <div class="flex items-start mt-2">
+			</select>
-      <div class="flex items-center h-5">
+		</div>
-        <input
+		<!--  -->
-          bind:checked={editable.address_checked}
+		<div class="flex items-start mt-2">
-          id="comments"
+			<div class="flex items-center h-5">
-          name="comments"
+				<input
-          type="checkbox"
+					bind:checked={editable.address_checked}
-          class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+					id="comments"
-      </div>
+					name="comments"
-      <div class="ml-3 text-sm">
+					type="checkbox"
-        <label
+					class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-          for="comments"
+				/>
-          class="font-medium text-gray-700">{$_('address')}</label>
+			</div>
-      </div>
+			<div class="ml-3 text-sm">
-    </div>
+				<label for="comments" class="font-semibold text-gray-700"
-    {#if editable.address_checked === true}
+					>{$_("address")}</label
-      <div class="col-span-6">
+				>
-        <label
+			</div>
-          for="address1"
+		</div>
-          class="block text-sm font-medium text-gray-700">{$_('address')}</label>
+		{#if editable.address_checked === true}
-        <input
+			<div class="col-span-6">
-          autocomplete="off"
+				<label for="address1" class="block text-sm font-medium text-gray-700"
-          placeholder="Address"
+					>{$_("address")}</label
-          class:border-red-500={!isAddress1Valid}
+				>
-          class:focus:border-red-500={!isAddress1Valid}
+				<input
-          class:focus:ring-red-500={!isAddress1Valid}
+					autocomplete="off"
-          bind:value={editable.address.address1}
+					placeholder="Address"
-          type="text"
+					class:border-red-500={!isAddress1Valid}
-          name="address1"
+					class:focus:border-red-500={!isAddress1Valid}
-          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" />
+					class:focus:ring-red-500={!isAddress1Valid}
-        {#if !isAddress1Valid}
+					bind:value={editable.address.address1}
-          <span
+					type="text"
-            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+					name="address1"
-            {$_('address-is-required')}
+					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-neutral-800 rounded-md p-2"
-          </span>
+				/>
-        {/if}
+				{#if !isAddress1Valid}
-      </div>
+					<span
-      <div class="col-span-6">
+						class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-        <label
+					>
-          for="address2"
+						{$_("address-is-required")}
-          class="block text-sm font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
+					</span>
-        <input
+				{/if}
-          autocomplete="off"
+			</div>
-          placeholder={$_('apartment-suite-etc')}
+			<div class="col-span-6">
-          bind:value={editable.address.address2}
+				<label for="address2" class="block text-sm font-medium text-gray-700"
-          type="text"
+					>{$_("apartment-suite-etc")}</label
-          name="address2"
+				>
-          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" />
+				<input
-      </div>
+					autocomplete="off"
-      <div class="col-span-6">
+					placeholder={$_("apartment-suite-etc")}
-        <label
+					bind:value={editable.address.address2}
-          for="zipcode"
+					type="text"
-          class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
+					name="address2"
-        <input
+					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-neutral-800 rounded-md p-2"
-          autocomplete="off"
+				/>
-          placeholder={$_('zip-postal-code')}
+			</div>
-          class:border-red-500={!iszipcodevalid}
+			<div class="col-span-6">
-          class:focus:border-red-500={!iszipcodevalid}
+				<label for="zipcode" class="block text-sm font-medium text-gray-700"
-          class:focus:ring-red-500={!iszipcodevalid}
+					>{$_("zip-postal-code")}</label
-          bind:value={editable.address.postalcode}
+				>
-          type="text"
+				<input
-          name="zipcode"
+					autocomplete="off"
-          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" />
+					placeholder={$_("zip-postal-code")}
-        {#if !iszipcodevalid}
+					class:border-red-500={!iszipcodevalid}
-          <span
+					class:focus:border-red-500={!iszipcodevalid}
-            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+					class:focus:ring-red-500={!iszipcodevalid}
-            {$_('valid-zipcode-postal-code-is-required')}
+					bind:value={editable.address.postalcode}
-          </span>
+					type="text"
-        {/if}
+					name="zipcode"
-      </div>
+					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-neutral-800 rounded-md p-2"
-      <div class="col-span-6">
+				/>
-        <label
+				{#if !iszipcodevalid}
-          for="city"
+					<span
-          class="block text-sm font-medium text-gray-700">{$_('city')}</label>
+						class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-        <input
+					>
-          autocomplete="off"
+						{$_("valid-zipcode-postal-code-is-required")}
-          placeholder={$_('city')}
+					</span>
-          class:border-red-500={!iscityvalid}
+				{/if}
-          class:focus:border-red-500={!iscityvalid}
+			</div>
-          class:focus:ring-red-500={!iscityvalid}
+			<div class="col-span-6">
-          bind:value={editable.address.city}
+				<label for="city" class="block text-sm font-medium text-gray-700"
-          type="text"
+					>{$_("city")}</label
-          name="city"
+				>
-          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" />
+				<input
-        {#if !iscityvalid}
+					autocomplete="off"
-          <span
+					placeholder={$_("city")}
-            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+					class:border-red-500={!iscityvalid}
-            {$_('valid-city-is-required')}
+					class:focus:border-red-500={!iscityvalid}
-          </span>
+					class:focus:ring-red-500={!iscityvalid}
-        {/if}
+					bind:value={editable.address.city}
-      </div>
+					type="text"
-    {/if}
+					name="city"
-  </section>
+					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-neutral-800 rounded-md p-2"
 				/>
 				{#if !iscityvalid}
 					<span
 						class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
 					>
 						{$_("valid-city-is-required")}
 					</span>
 				{/if}
 			</div>
 		{/if}
 	</section>
 {:catch error}
-  <PromiseError {error} />
+	<PromiseError {error} />
 {/await}
--- a/src/components/contacts/Contacts.svelte
+++ b/src/components/contacts/Contacts.svelte
@@ -8,22 +8,23 @@
 </script>
 <section class="container p-5">
-  <span class="mb-1 text-3xl font-extrabold leading-tight">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
-    {$_('contacts')}
+    {$_("contacts")}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('CONTACT:CREATE')}
+  </h4>
-      <button
+  {#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:CREATE")}
-        on:click={() => {
+    <button
-          modal_open = true;
+      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">
+      type="button"
-        {$_('create-a-new-contact')}
+      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:w-auto sm:text-sm"
-      </button>
+    >
-    {/if}
+      {$_("create-a-new-contact")}
-  </span>
+    </button>
  {/if}
  <ContactsOverview bind:current_contacts />
 </section>
-{#if store.state.jwtinfo.userdetails.permissions.includes('CONTACT:CREATE')}
+{#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:CREATE")}
  <AddContactModal bind:current_contacts bind:modal_open />
 {/if}
--- a/src/components/contacts/ContactsEmptyState.svelte
+++ b/src/components/contacts/ContactsEmptyState.svelte
@@ -9,8 +9,8 @@
 <div class="text-center items-center justify-center">
  <p class="mb-16 text-lg text-gray-500">
    <img class="w-full h-44" src={team_empty} alt="" />
-    <span class="font-bold">{$_('there-are-no-contacts-added-yet')}</span><br />
+    <span class="font-bold">{$_("there-are-no-contacts-added-yet")}</span><br />
-    <span>{$_('add-your-first-contact')}</span>
+    <span>{$_("add-your-first-contact")}</span>
  </p>
 </div>
--- a/src/components/contacts/ContactsOverview.svelte
+++ b/src/components/contacts/ContactsOverview.svelte
@@ -1,177 +1,198 @@
 <script>
-  import { _ } from "svelte-i18n";
+	import { _ } from "svelte-i18n";
-  import Toastify from "toastify-js";
+	import { GroupContactService } from "@odit/lfk-client-js";
-  import { GroupContactService } from "@odit/lfk-client-js";
+	const promise = GroupContactService.groupContactControllerGetAll().then(
-  const promise = GroupContactService.groupContactControllerGetAll().then(
+		(result) => {
-    (result) => {
+			current_contacts = result;
-      current_contacts = result;
+		}
-    }
+	);
-  );
+	import store from "../../store";
-  import store from "../../store";
+	import ContactsEmptyState from "./ContactsEmptyState.svelte";
-  import ContactsEmptyState from "./ContactsEmptyState.svelte";
+	import toast from "svelte-french-toast";
-  $: searchvalue = "";
+	$: searchvalue = "";
-  $: active_deletes = [];
+	$: active_deletes = [];
-  export let current_contacts = [];
+	export let current_contacts = [];
 </script>
-{#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:GET')}
+{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:GET")}
-  {#await promise}
+	{#await promise}
-    <div
+		<div
-      class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
+			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">{$_('contacts-are-being-loaded')}</p>
+		>
-      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+			<p class="font-bold">{$_("contacts-are-being-loaded")}</p>
-    </div>
+			<p class="text-sm">{$_("this-might-take-a-moment")}</p>
-  {:then}
+		</div>
-    {#if current_contacts.length === 0}
+	{:then}
-      <ContactsEmptyState />
+		{#if current_contacts.length === 0}
-    {:else}
+			<ContactsEmptyState />
-      <input
+		{:else}
-        type="search"
+			<input
-        bind:value={searchvalue}
+				type="search"
-        placeholder={$_('datatable.search')}
+				bind:value={searchvalue}
-        aria-label={$_('datatable.search')}
+				placeholder={$_("datatable.search")}
-        class="mb-4" />
+				aria-label={$_("datatable.search")}
-      <div
+				class="mb-2 w-full sm:w-auto mt-1 sm:mt-0 p-2 rounded-md border"
-        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
+			/>
-        <table class="divide-y divide-gray-200 w-full">
+			<div
-          <thead class="bg-gray-50">
+				class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
-            <tr>
+			>
-              <th
+				<table class="divide-y divide-gray-200 w-full">
-                scope="col"
+					<thead class="bg-gray-50">
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+						<tr class="odd:bg-white even:bg-gray-100">
-                {$_('name')}
+							<th
-              </th>
+								scope="col"
-              <th
+								class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                scope="col"
+							>
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+								{$_("name")}
-                {$_('groups')}
+							</th>
-              </th>
+							<th
-              <th
+								scope="col"
-                scope="col"
+								class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+							>
-                {$_('address')}
+								{$_("groups")}
-              </th>
+							</th>
-              <th scope="col" class="relative px-6 py-3">
+							<th
-                <span class="sr-only">{$_('action')}</span>
+								scope="col"
-              </th>
+								class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-            </tr>
+							>
-          </thead>
+								{$_("address")}
-          <tbody class="divide-y divide-gray-200">
+							</th>
-            {#each current_contacts as t}
+							<th scope="col" class="relative px-6 py-3">
-              {#if Object.values(t)
+								<span class="sr-only">{$_("action")}</span>
-                .toString()
+							</th>
-                .toLowerCase()
+						</tr>
-                .includes(searchvalue)}
+					</thead>
-                <tr data-rowid="team_{t.id}">
+					<tbody class="divide-y divide-gray-200">
-                  <td class="px-6 py-4 whitespace-nowrap">
+						{#each current_contacts as t}
-                    <div class="flex items-center">
+							{#if Object.values(t)
-                      <div class="ml-4">
+								.toString()
-                        <div class="text-sm font-medium text-gray-900">
+								.toLowerCase()
-                          {t.firstname}
+								.includes(searchvalue)}
-                          {t.middlename || ''}
+								<tr
-                          {t.lastname}
+									class="odd:bg-white even:bg-gray-100"
-                        </div>
+									data-rowid="team_{t.id}"
-                      </div>
+								>
-                    </div>
+									<td class="px-6 py-4 whitespace-nowrap">
-                  </td>
+										<div class="flex items-center">
-                  <td class="px-6 py-4 whitespace-nowrap">
+											<div class="ml-4">
-                    <div class="flex items-center">
+												<div class="text-sm font-medium text-gray-900">
-                      <div class="ml-4">
+													{t.firstname}
-                        <div class="text-sm font-medium text-gray-900">
+													{t.middlename || ""}
-                          {#if t.groups.length > 0}
+													{t.lastname}
-                            {#each t.groups as g}
+												</div>
-                              {#if g.responseType === 'RUNNERORGANIZATION'}
+											</div>
-                                <a
+										</div>
-                                  href="../orgs/{g.id}"
+									</td>
-                                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{g.name}</a>
+									<td class="px-6 py-4 whitespace-nowrap">
-                              {:else}
+										<div class="flex items-center">
-                                <a
+											<div
-                                  href="../teams/{g.id}"
+												class="text-sm font-medium text-gray-900 gap-0.5 flex flex-wrap"
-                                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{g.parentGroup.name}
+											>
-                                  &gt;
+												{#if t.groups.length > 0}
-                                  {g.name}</a>
+													{#each t.groups as g}
-                              {/if}
+														{#if g.responseType === "RUNNERORGANIZATION"}
-                            {/each}
+															<a
-                          {:else}
+																href="../orgs/{g.id}"
-                            {$_('contact-is-not-a-member-in-any-group')}
+																class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
-                          {/if}
+																>{g.name}</a
-                        </div>
+															>
-                      </div>
+														{:else}
-                    </div>
+															<a
-                  </td>
+																href="../teams/{g.id}"
-                  <td class="px-6 py-4 whitespace-nowrap">
+																class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
-                    <div class="flex items-center">
+																>{g.parentGroup.name}
-                      <div class="ml-4">
+																&gt;
-                        <div class="text-sm font-medium text-gray-900">
+																{g.name}</a
-                          {#if t.address.address1 !== null}
+															>
-                            {t.address.address1}<br />
+														{/if}
-                            {t.address.address2 || ''}<br />
+													{/each}
-                            {t.address.postalcode}
+												{:else}
-                            {t.address.city}
+													{$_("contact-is-not-a-member-in-any-group")}
-                            {t.address.country}
+												{/if}
-                          {/if}
+											</div>
-                        </div>
+										</div>
-                      </div>
+									</td>
-                    </div>
+									<td class="px-6 py-4 whitespace-nowrap">
-                  </td>
+										<div class="flex items-center">
-                  {#if active_deletes[t.id] === true}
+											<div class="ml-4">
-                    <td
+												<div class="text-sm font-medium text-gray-900">
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+													{#if t.address.address1 !== null}
-                      <button
+														{t.address.address1}<br />
-                        on:click={() => {
+														{t.address.address2 || ""}<br />
-                          active_deletes[t.id] = false;
+														{t.address.postalcode}
-                        }}
+														{t.address.city}
-                        tabindex="0"
+														{t.address.country}
-                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
+													{/if}
-                      <button
+												</div>
-                        on:click={() => {
+											</div>
-                          GroupContactService.groupContactControllerRemove(t.id, false).then(
+										</div>
-                            (resp) => {
+									</td>
-                              current_contacts = current_contacts.filter(
+									{#if active_deletes[t.id] === true}
-                                (obj) => obj.id !== t.id
+										<td
-                              );
+											class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
-                              Toastify({
+										>
-                                text: $_('contact-deleted'),
+											<button
-                                duration: 500,
+												on:click={() => {
-                                backgroundColor:
+													active_deletes[t.id] = false;
-                                  'linear-gradient(to right, #00b09b, #96c93d)',
+												}}
-                              }).showToast();
+												tabindex="0"
-                            }
+												class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
-                          );
+												>{$_("cancel-delete")}</button
-                        }}
+											>
-                        tabindex="0"
+											<button
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
+												on:click={() => {
-                    </td>
+													toast.loading($_("deleting-contact"));
-                  {:else}
+													GroupContactService.groupContactControllerRemove(
-                    <td
+														t.id,
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+														false
-                      <a
+													).then((resp) => {
-                        href="./{t.id}"
+														current_contacts = current_contacts.filter(
-                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
+															(obj) => obj.id !== t.id
-                      {#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:DELETE')}
+														);
-                        <button
+														toast.dismiss();
-                          on:click={() => {
+														toast.success($_("contact-deleted"));
-                            active_deletes[t.id] = true;
+													});
-                          }}
+												}}
-                          tabindex="0"
+												tabindex="0"
-                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
+												class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-                      {/if}
+												>{$_("confirm-delete")}</button
-                    </td>
+											>
-                  {/if}
+										</td>
-                </tr>
+									{:else}
-              {/if}
+										<td
-            {/each}
+											class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
-          </tbody>
+										>
-        </table>
+											<a
-      </div>
+												href="./{t.id}"
-    {/if}
+												class="text-indigo-600 hover:text-indigo-900"
-  {:catch error}
+												>{$_("details")}</a
-    <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">
+											{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:DELETE")}
-        <b class="capitalize">{$_('general_promise_error')}</b>
+												<button
-        {error}
+													on:click={() => {
-      </span>
+														active_deletes[t.id] = true;
-    </div>
+													}}
-  {/await}
+													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}
--- a/src/components/dashboard/Dashboard.svelte
+++ b/src/components/dashboard/Dashboard.svelte
@@ -1,361 +1,439 @@
 <script>
-  import { _ } from "svelte-i18n";
+	import { _ } from "svelte-i18n";
-  import localForage from "localforage";
+	import localForage from "localforage";
-  import store from "../../store";
+	import store from "../../store";
-  import { router } from "tinro";
+	import { router } from "tinro";
-  import NoComponentLoaded from "../base/NoComponentLoaded.svelte";
+	import NoComponentLoaded from "../base/NoComponentLoaded.svelte";
-  import { AuthService } from "@odit/lfk-client-js";
+	import { AuthService } from "@odit/lfk-client-js";
-  $: navOpen = false;
+	import { Toaster } from "svelte-french-toast";
-  function logout() {
+	$: navOpen = false;
-    localForage.clear();
+	function logout() {
-    location.replace("/");
+		localForage.clear();
-  }
+		location.replace("/");
 	}
 </script>
 <style>
  .collapsed_navigation {
    transform: translateX(-100%);
  }
  @media (min-width: 768px) {
    .collapsed_navigation {
      transform: translateX(0px);
    }
  }
 </style>
 <section class="min-h-screen bg-gray-50">
-  <div
+	<div
-    class:collapsed_navigation={!navOpen}
+		class:collapsed_navigation={!navOpen}
-    class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 bg-gray-50">
+		style="z-index:11;"
-    <a href="/" class="flex items-center px-4 py-5">
+		class="select-none fixed top-0 left-0 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 bg-gray-50"
-      <img src="/lfk-logo.png" alt="Logo" class="h-10" />
+	>
-      <h3 class="text-lg">Lauf für Kaya! Admin</h3>
+		<a href="/" class="flex items-center px-4 py-5">
-    </a>
+			<img src="/lfk-logo.png" alt="Logo" class="h-10" />
-    <nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
+			<h3 class="text-lg font-bold">LfK!Admin</h3>
-      <a
+		</a>
-        class:bg-gray-100={$router.path === '/'}
+		<nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+			<a
-        href="/">
+				class:activenav={$router.path === "/"}
-        <svg
+				class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
-          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+				href="/"
-          xmlns="http://www.w3.org/2000/svg"
+			>
-          viewBox="0 0 20 20"
+				<svg
-          fill="currentColor">
+					class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-          <path
+					xmlns="http://www.w3.org/2000/svg"
-            d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
+					viewBox="0 0 20 20"
-        </svg>
+					fill="currentColor"
-        <span>{$_('dashboard-title')}</span>
+				>
-      </a>
+					<path
-      {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:GET')}
+						d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
-        <a
+					/>
-          class:bg-gray-100={$router.path.includes('/orgs/')}
+				</svg>
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+				<span>{$_("dashboard-title")}</span>
-          href="/orgs/">
+			</a>
-          <svg
+			{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+				<a
-            fill="currentColor"
+					class:activenav={$router.path.includes("/runners/")}
-            xmlns="http://www.w3.org/2000/svg"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
-            viewBox="0 0 24 24"
+					href="/runners/"
-            width="24"
+				>
-            height="24"><path fill="none" d="M0 0h24v24H0z" />
+					<svg
-            <path
+						xmlns="http://www.w3.org/2000/svg"
-              d="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z" /></svg>
+						viewBox="0 0 24 24"
-          <span>{$_('orgs')}</span>
+						class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-        </a>
+						fill="currentColor"
-      {/if}
+						width="24"
-      {#if store.state.jwtinfo.userdetails.permissions.includes('USER:GET')}
+						height="24"
-        <a
+						><path fill="none" d="M0 0h24v24H0z" />
-          class:bg-gray-100={$router.path === '/users/'}
+						<path
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+							d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
-          href="/users/">
+						/></svg
-          <svg
+					>
-            xmlns="http://www.w3.org/2000/svg"
+					<span>{$_("runners")}</span>
-            width="24"
+				</a>
-            height="24"
+			{/if}
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+			{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:GET")}
-            fill="currentColor"
+				<a
-            viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
+					class:activenav={$router.path.includes("/teams/")}
-            <path
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
-              d="M12 14v8H4a8 8 0 018-8zm0-1a6 6 0 110-12 6 6 0 010 12zm2.6 5.81a3.51 3.51 0 010-1.62l-1-.57 1-1.74 1 .58a3.5 3.5 0 011.4-.82V13.5h2v1.15a3.5 3.5 0 011.4.8l1-.57 1 1.74-1 .57a3.51 3.51 0 010 1.62l1 .57-1 1.74-1-.58a3.5 3.5 0 01-1.4.82v1.14h-2v-1.15a3.5 3.5 0 01-1.4-.8l-1 .57-1-1.74 1-.57zM18 17a1 1 0 100 2 1 1 0 000-2z" /></svg>
+					href="/teams/"
-          <span>{$_('users')}</span>
+				>
-        </a>
+					<svg
-      {/if}
+						class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-      {#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:GET')}
+						fill="currentColor"
-        <a
+						width="24"
-          class:bg-gray-100={$router.path === '/groups/'}
+						height="24"
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+						xmlns="http://www.w3.org/2000/svg"
-          href="/groups/">
+						viewBox="0 0 640 512"
-          <svg
+						><path
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+							fill="currentColor"
-            fill="currentColor"
+							d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
-            width="24"
+						/></svg
-            height="24"
+					>
-            xmlns="http://www.w3.org/2000/svg"
+					<span>{$_("teams")}</span>
-            viewBox="0 0 640 512"><path
+				</a>
-              fill="currentColor"
+			{/if}
-              d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
+			{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:GET")}
-          <span>{$_('user-groups')}</span>
+				<a
-        </a>
+					class:activenav={$router.path.includes("/orgs/")}
-      {/if}
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
-      {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:GET')}
+					href="/orgs/"
-        <a
+				>
-          class:bg-gray-100={$router.path === '/runners/'}
+					<svg
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+						class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-          href="/runners/">
+						fill="currentColor"
-          <svg
+						xmlns="http://www.w3.org/2000/svg"
-            xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
-            viewBox="0 0 24 24"
+						width="24"
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+						height="24"
-            fill="currentColor"
+						><path fill="none" d="M0 0h24v24H0z" />
-            width="24"
+						<path
-            height="24"><path fill="none" d="M0 0h24v24H0z" />
+							d="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z"
-            <path
+						/></svg
-              d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" /></svg>
+					>
-          <span>{$_('runners')}</span>
+					<span>{$_("orgs")}</span>
-        </a>
+				</a>
-      {/if}
+			{/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:GET')}
+			{#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:GET")}
-        <a
+				<a
-          class:bg-gray-100={$router.path === '/teams/'}
+					class:activenav={$router.path.includes("/donors/")}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
-          href="/teams/">
+					href="/donors/"
-          <svg
+				>
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+					<svg
-            fill="currentColor"
+						class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-            width="24"
+						fill="currentColor"
-            height="24"
+						xmlns="http://www.w3.org/2000/svg"
-            xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
-            viewBox="0 0 640 512"><path
+						width="24"
-              fill="currentColor"
+						height="24"
-              d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
+						><path fill="none" d="M0 0h24v24H0z" />
-          <span>{$_('teams')}</span>
+						<path
-        </a>
+							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"
-      {/if}
+						/></svg
-      {#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:GET')}
+					>
-        <a
+					<span>{$_("donors")}</span>
-          class:bg-gray-100={$router.path.includes('/donors/')}
+				</a>
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+			{/if}
-          href="/donors/">
+			{#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:GET")}
-          <svg
+				<a
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+					class:activenav={$router.path.includes("/donations/")}
-            fill="currentColor"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
-            xmlns="http://www.w3.org/2000/svg"
+					href="/donations/"
-            viewBox="0 0 24 24"
+				>
-            width="24"
+					<svg
-            height="24"><path fill="none" d="M0 0h24v24H0z" />
+						class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-            <path
+						fill="currentColor"
-              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>
+						xmlns="http://www.w3.org/2000/svg"
-          <span>{$_('donors')}</span>
+						viewBox="0 0 24 24"
-        </a>
+						width="24"
-      {/if}
+						height="24"
-      {#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:GET')}
+						><path fill="none" d="M0 0h24v24H0z" />
-        <a
+						<path
-          class:bg-gray-100={$router.path.includes('/donations/')}
+							d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z"
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+						/></svg
-          href="/donations/">
+					>
-          <svg
+					<span>{$_("donations")}</span>
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+				</a>
-            fill="currentColor"
+			{/if}
-            xmlns="http://www.w3.org/2000/svg"
+			{#if store.state.jwtinfo.userdetails.permissions.includes("TRACK:GET")}
-            viewBox="0 0 24 24"
+				<a
-            width="24"
+					class:activenav={$router.path === "/tracks/"}
-            height="24"><path fill="none" d="M0 0h24v24H0z" />
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
-            <path
+					href="/tracks/"
-              d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z" /></svg>
+				>
-          <span>{$_('donations')}</span>
+					<svg
-        </a>
+						class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-      {/if}
+						fill="currentColor"
-      {#if store.state.jwtinfo.userdetails.permissions.includes('TRACK:GET')}
+						width="24"
-        <a
+						height="24"
-          class:bg-gray-100={$router.path === '/tracks/'}
+						xmlns="http://www.w3.org/2000/svg"
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+						viewBox="0 0 640 512"
-          href="/tracks/">
+						><path
-          <svg
+							fill="currentColor"
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+							d="M635.7 167.2L556.1 31.7c-8.8-15-28.3-20.1-43.5-11.5l-69 39.1L503.3 161c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L416 75l-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L333.2 122 278 153.3 337.8 255c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-59.7-101.7-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-27.9-47.5-55.2 31.3 59.7 101.7c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L84.9 262.9l-69 39.1C.7 310.7-4.6 329.8 4.2 344.8l79.6 135.6c8.8 15 28.3 20.1 43.5 11.5L624.1 210c15.2-8.6 20.4-27.8 11.6-42.8z"
-            fill="currentColor"
+						/></svg
-            width="24"
+					>
-            height="24"
+					<span>{$_("tracks")}</span>
-            xmlns="http://www.w3.org/2000/svg"
+				</a>
-            viewBox="0 0 640 512"><path
+			{/if}
-              fill="currentColor"
+			{#if store.state.jwtinfo.userdetails.permissions.includes("CARD:GET")}
-              d="M635.7 167.2L556.1 31.7c-8.8-15-28.3-20.1-43.5-11.5l-69 39.1L503.3 161c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L416 75l-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L333.2 122 278 153.3 337.8 255c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-59.7-101.7-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-27.9-47.5-55.2 31.3 59.7 101.7c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L84.9 262.9l-69 39.1C.7 310.7-4.6 329.8 4.2 344.8l79.6 135.6c8.8 15 28.3 20.1 43.5 11.5L624.1 210c15.2-8.6 20.4-27.8 11.6-42.8z" /></svg>
+				<a
-          <span>{$_('tracks')}</span>
+					class:activenav={$router.path === "/cards/"}
-        </a>
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
-      {/if}
+					href="/cards/"
-      {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:GET')}
+				>
-        <a
+					<svg
-          class:bg-gray-100={$router.path === '/cards/'}
+						class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+						fill="currentColor"
-          href="/cards/">
+						width="24"
-          <svg
+						height="24"
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+						xmlns="http://www.w3.org/2000/svg"
-            fill="currentColor"
+						viewBox="0 0 24 24"
-            width="24"
+					>
-            height="24"
+						<path fill="none" d="M0 0h24v24H0z" />
-            xmlns="http://www.w3.org/2000/svg"
+						<path
-            viewBox="0 0 24 24">
+							fill="currentColor"
-            <path fill="none" d="M0 0h24v24H0z" />
+							d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z"
-            <path
+						/></svg
-              fill="currentColor"
+					>
-              d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z" /></svg>
+					<span>{$_("cards")}</span>
-          <span>{$_('cards')}</span>
+				</a>
-        </a>
+			{/if}
-      {/if}
+			{#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")}
-      {#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:GET')}
+				<a
-        <a
+					class:activenav={$router.path.includes("/scans/")}
-          class:bg-gray-100={$router.path === '/scans/'}
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+					href="/scans/"
-          href="/scans/">
+				>
-          <svg
+					<svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+						class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-            fill="currentColor"
+						fill="currentColor"
-            width="24"
+						width="24"
-            height="24"
+						height="24"
-            xmlns="http://www.w3.org/2000/svg"
+						xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
+						viewBox="0 0 24 24"
-            <path
+						><path fill="none" d="M0 0h24v24H0z" />
-              fill="currentColor"
+						<path
-              d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z" /></svg>
+							fill="currentColor"
-          <span>Scans</span>
+							d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z"
-        </a>
+						/></svg
-      {/if}
+					>
-      {#if store.state.jwtinfo.userdetails.permissions.includes('CONTACT:GET')}
+					<span>Scans</span>
-        <a
+				</a>
-          class:bg-gray-100={$router.path === '/contacts/'}
+			{/if}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+			{#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:GET")}
-          href="/contacts/">
+				<a
-          <svg
+					class:activenav={$router.path.includes("/contacts/")}
-            fill="currentColor"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+					href="/contacts/"
-            xmlns="http://www.w3.org/2000/svg"
+				>
-            viewBox="0 0 24 24"
+					<svg
-            width="24"
+						fill="currentColor"
-            height="24"><path fill="none" d="M0 0h24v24H0z" />
+						class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-            <path
+						xmlns="http://www.w3.org/2000/svg"
-              d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z" /></svg>
+						viewBox="0 0 24 24"
-          <span>{$_('contacts')}</span>
+						width="24"
-        </a>
+						height="24"
-      {/if}
+						><path fill="none" d="M0 0h24v24H0z" />
-      {#if store.state.jwtinfo.userdetails.permissions.includes('STATION:GET')}
+						<path
-        <a
+							d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z"
-          class:bg-gray-100={$router.path === '/scanstations/'}
+						/></svg
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+					>
-          href="/scanstations/">
+					<span>{$_("contacts")}</span>
-          <svg
+				</a>
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+			{/if}
-            fill="currentColor"
+			{#if store.state.jwtinfo.userdetails.permissions.includes("STATION:GET")}
-            width="24"
+				<a
-            height="24"
+					class:activenav={$router.path.includes("/scanstations/")}
-            viewBox="0 0 24 24"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
-            xmlns="http://www.w3.org/2000/svg"><path
+					href="/scanstations/"
-              fill="none"
+				>
-              d="M0 0h24v24H0z" />
+					<svg
-            <path
+						class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-              fill="currentColor"
+						fill="currentColor"
-              d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
+						width="24"
-          <span>{$_('scanstations')}</span>
+						height="24"
-        </a>
+						viewBox="0 0 24 24"
-      {/if}
+						xmlns="http://www.w3.org/2000/svg"
-      {#if store.state.jwtinfo.userdetails.permissions.includes('STATSCLIENT:GET')}
+						><path fill="none" d="M0 0h24v24H0z" />
-        <a
+						<path
-          class:bg-gray-100={$router.path === '/statsclients/'}
+							fill="currentColor"
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+							d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"
-          href="/statsclients/">
+						/></svg
-          <svg
+					>
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+					<span>{$_("scanstations")}</span>
-            fill="currentColor"
+				</a>
-            width="24"
+			{/if}
-            height="24"
+			{#if store.state.jwtinfo.userdetails.permissions.includes("STATSCLIENT:GET")}
-            viewBox="0 0 24 24"
+				<a
-            xmlns="http://www.w3.org/2000/svg"><path
+					class:activenav={$router.path.includes("/statsclients/")}
-              fill="none"
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
-              d="M0 0h24v24H0z" />
+					href="/statsclients/"
-            <path
+				>
-              fill="currentColor"
+					<svg
-              d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
+						class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-          <span>{$_('statsclients')}</span>
+						fill="currentColor"
-        </a>
+						width="24"
-      {/if}
+						height="24"
-      <a
+						viewBox="0 0 24 24"
-        class:bg-gray-100={$router.path === '/settings/'}
+						xmlns="http://www.w3.org/2000/svg"
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+						><path fill="none" d="M0 0h24v24H0z" />
-        href="/settings/">
+						<path
-        <svg
+							fill="currentColor"
-          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+							d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"
-          xmlns="http://www.w3.org/2000/svg"
+						/></svg
-          viewBox="0 0 20 20"
+					>
-          fill="currentColor">
+					<span>{$_("statsclients")}</span>
-          <path
+				</a>
-            fill-rule="evenodd"
+			{/if}
-            d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
+			{#if store.state.jwtinfo.userdetails.permissions.includes("USER:GET")}
-            clip-rule="evenodd" />
+				<a
-        </svg>
+					class:activenav={$router.path.includes("/users/")}
-        <span>{$_('settings')}</span>
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
-      </a>
+					href="/users/"
-      <a
+				>
-        class:bg-gray-100={$router.path === '/about/'}
+					<svg
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+						xmlns="http://www.w3.org/2000/svg"
-        href="/about/">
+						width="24"
-        <svg
+						height="24"
-          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+						class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-          xmlns="http://www.w3.org/2000/svg"
+						fill="currentColor"
-          fill="none"
+						viewBox="0 0 24 24"
-          stroke="currentColor"
+						><path fill="none" d="M0 0h24v24H0z" />
-          stroke-width="2"
+						<path
-          stroke-linecap="round"
+							d="M12 14v8H4a8 8 0 018-8zm0-1a6 6 0 110-12 6 6 0 010 12zm2.6 5.81a3.51 3.51 0 010-1.62l-1-.57 1-1.74 1 .58a3.5 3.5 0 011.4-.82V13.5h2v1.15a3.5 3.5 0 011.4.8l1-.57 1 1.74-1 .57a3.51 3.51 0 010 1.62l1 .57-1 1.74-1-.58a3.5 3.5 0 01-1.4.82v1.14h-2v-1.15a3.5 3.5 0 01-1.4-.8l-1 .57-1-1.74 1-.57zM18 17a1 1 0 100 2 1 1 0 000-2z"
-          stroke-linejoin="round"
+						/></svg
-          viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" />
+					>
-          <path d="M12 16v-4M12 8h.01" /></svg>
+					<span>{$_("users")}</span>
-        <span>{$_('about')}</span>
+				</a>
-      </a>
+			{/if}
-      <span
+			{#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:GET")}
-        tabindex="0"
+				<a
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+					class:activenav={$router.path.includes("/groups/")}
-        on:click={() => {
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
-          AuthService.authControllerLogout();
+					href="/groups/"
-          logout();
+				>
-        }}>
+					<svg
-        <svg
+						class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+						fill="currentColor"
-          fill="currentColor"
+						width="24"
-          width="24"
+						height="24"
-          height="24"
+						xmlns="http://www.w3.org/2000/svg"
-          xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 640 512"
-          viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
+						><path
-          <path
+							fill="currentColor"
-            d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2a9.985 9.985 0 0 1 8 4h-2.71a8 8 0 1 0 .001 12h2.71A9.985 9.985 0 0 1 12 22zm7-6v-3h-8v-2h8V8l5 4-5 4z" /></svg>
+							d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
-        <span>{$_('logout')}</span>
+						/></svg
-      </span>
+					>
-    </nav>
+					<span>{$_("user-groups")}</span>
-  </div>
+				</a>
-  <div class="ml-0 transition md:ml-60">
+			{/if}
-    <header
+			<a
-      class="flex items-center justify-between w-full px-4 bg-white border-b h-14 md:hidden">
+				class:activenav={$router.path === "/settings/"}
-      <button
+				class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
-        on:click={() => {
+				href="/settings/"
-          navOpen = true;
+			>
-        }}
+				<svg
-        class="block btn btn-light md:hidden">
+					class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-        <span class="sr-only">Menu</span><svg
+					xmlns="http://www.w3.org/2000/svg"
-          class="w-4 h-4"
+					viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
+					fill="currentColor"
-          viewBox="0 0 20 20"
+				>
-          fill="currentcolor"><path
+					<path
-            fill-rule="evenodd"
+						fill-rule="evenodd"
-            d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4A1 1 0 013 5zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+						d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
-            clip-rule="evenodd" /></svg></button>
+						clip-rule="evenodd"
-    </header>
+					/>
-    <slot>
+				</svg>
-      <NoComponentLoaded />
+				<span>{$_("settings")}</span>
-    </slot>
+			</a>
-  </div>
+			<a
-  {#if navOpen === true}
+				class:activenav={$router.path === "/about/"}
-    <div
+				class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
-      on:click={() => {
+				href="/about/"
-        navOpen = false;
+			>
-        console.log({ navOpen });
+				<svg
-      }}
+					class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-      class:hidden={!navOpen}
+					xmlns="http://www.w3.org/2000/svg"
-      class="fixed inset-0 z-10 w-screen h-screen bg-black bg-opacity-25 md:hidden" />
+					fill="none"
-  {/if}
+					stroke="currentColor"
 					stroke-width="2"
 					stroke-linecap="round"
 					stroke-linejoin="round"
 					viewBox="0 0 24 24"
 					><circle cx="12" cy="12" r="10" />
 					<path d="M12 16v-4M12 8h.01" /></svg
 				>
 				<span>{$_("about")}</span>
 			</a>
 			<button
 				tabindex="0"
 				class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
 				on:click={() => {
 					AuthService.authControllerLogout();
 					logout();
 				}}
 			>
 				<svg
 					class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
 					fill="currentColor"
 					width="24"
 					height="24"
 					xmlns="http://www.w3.org/2000/svg"
 					viewBox="0 0 24 24"
 					><path fill="none" d="M0 0h24v24H0z" />
 					<path
 						d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2a9.985 9.985 0 0 1 8 4h-2.71a8 8 0 1 0 .001 12h2.71A9.985 9.985 0 0 1 12 22zm7-6v-3h-8v-2h8V8l5 4-5 4z"
 					/></svg
 				>
 				<span>{$_("logout")}</span>
 			</button>
 		</nav>
 	</div>
 	<div class="ml-0 transition md:ml-60">
 		<header
 			class="flex items-center w-full px-4 bg-white border-b h-14 md:hidden"
 		>
 			<button
 				on:click={() => {
 					navOpen = true;
 				}}
 				class="block btn btn-light md:hidden"
 			>
 				<span class="sr-only">Menu</span><svg
 					xmlns="http://www.w3.org/2000/svg"
 					fill="none"
 					viewBox="0 0 24 24"
 					stroke-width="1.5"
 					stroke="currentColor"
 					class="size-6"
 				>
 					<path
 						stroke-linecap="round"
 						stroke-linejoin="round"
 						d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
 					/>
 				</svg>
 			</button>
 			<span class="inline-block">
 				<img src="/lfk-logo.png" alt="Logo" class="h-8 inline-block" />
 				<span class="text-lg font-bold">LfK!Admin</span>
 			</span>
 		</header>
 		<Toaster position="top-right" />
 		<slot>
 			<NoComponentLoaded />
 		</slot>
 	</div>
 	{#if navOpen === true}
 		<button
 			on:click={() => {
 				navOpen = false;
 			}}
 			class:hidden={!navOpen}
 			class="fixed inset-0 z-10 w-screen h-screen bg-black bg-opacity-25 md:hidden"
 		/>
 	{/if}
 </section>
 <style>
 	.collapsed_navigation {
 		transform: translateX(-100%);
 	}
 	@media (min-width: 768px) {
 		.collapsed_navigation {
 			transform: translateX(0px);
 		}
 	}
 </style>
--- a/src/components/dashboard/MainDashContent.svelte
+++ b/src/components/dashboard/MainDashContent.svelte
@@ -1,224 +1,246 @@
 <script>
-  import { _ } from "svelte-i18n";
+	import { _ } from "svelte-i18n";
-  import { StatsService } from "@odit/lfk-client-js";
+	import { StatsService } from "@odit/lfk-client-js";
-  import StatCards from "./StatCard.svelte";
+	import store from "../../store";
-  import store from "../../store";
+	import StatCard from "./StatCard.svelte";
-  import StatCard from "./StatCard.svelte";
+	const stats_promise = StatsService.statsControllerGet();
  let navOpen = false;
  const stats_promise = StatsService.statsControllerGet();
 </script>
-<div
+<div class="p-2 md:p-5 overflow-x-hidden">
-  class="p-5 overflow-x-hidden"
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
-  on:click={() => {
+		{$_("dashboard-greeting")}
-    navOpen = false;
+		<span class="text-blue-500"
-  }}
+			>{store.state.jwtinfo.userdetails.firstname}
->
+			{store.state.jwtinfo.userdetails.lastname}</span
-  <h1 class="text-3xl leading-tight">
+		>
-    <span class="font-extrabold">{$_("dashboard-title")}</span>
+	</h4>
-    <span>
+	{#await stats_promise}
-      -
+		<div
-      {$_("dashboard-greeting")},
+			class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
-      <span class="text-blue-500"
+			role="alert"
-        >{store.state.jwtinfo.userdetails.firstname}
+		>
-        {store.state.jwtinfo.userdetails.lastname}</span
+			<p class="font-bold">{$_("stats-are-being-loaded")}</p>
-      ></span
+			<p class="text-sm">{$_("this-might-take-a-moment")}</p>
-    >
+		</div>
-  </h1>
+	{:then stats}
-  <h1>{$_("general-stats")}</h1>
+		<div
-  {#await stats_promise}
+			class="grid gap-1 grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 2xl:grid-cols-6 sm:gap-4"
-    <div
+		>
-      class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
+			<StatCard
-      role="alert"
+				title={$_("runners")}
-    >
+				value={stats.total_runners}
-      <p class="font-bold">{$_("stats-are-being-loaded")}</p>
+				href="/runners/"
-      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
+			>
-    </div>
+				<svg
-  {:then stats}
+					height="24"
-    <div
+					width="24"
-      class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 2xl:grid-cols-6 gap-4"
+					fill="currentColor"
-    >
+					xmlns="http://www.w3.org/2000/svg"
-      <StatCard
+					viewBox="0 0 24 24"
-        title={$_("runners")}
+					><path d="M0 0h24v24H0z" fill="none" />
-        value={stats.total_runners}
+					<path
-        href="/runners/"
+						d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"
-      >
+					/></svg
-        <svg
+				>
-          height="24"
+			</StatCard>
-          width="24"
+			<StatCard
-          fill="currentColor"
+				title={$_("total-scans")}
-          xmlns="http://www.w3.org/2000/svg"
+				value={stats.total_scans}
-          viewBox="0 0 24 24"
+				href="/scans/"
-          ><path d="M0 0h24v24H0z" fill="none" />
+			>
-          <path
+				<svg
-            d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"
+					fill="currentColor"
-          /></svg
+					width="24"
-        >
+					height="24"
-      </StatCard>
+					xmlns="http://www.w3.org/2000/svg"
-      <StatCard
+					viewBox="0 0 24 24"
-        title={$_("total-scans")}
+					><path fill="none" d="M0 0h24v24H0z" />
-        value={stats.total_scans}
+					<path
-        href="/scans/"
+						fill="currentColor"
-      >
+						d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z"
-        <svg
+					/></svg
-          fill="currentColor"
+				>
-          width="24"
+			</StatCard>
-          height="24"
+			<StatCard
-          xmlns="http://www.w3.org/2000/svg"
+				title={$_("total-donors")}
-          viewBox="0 0 24 24"
+				value={stats.total_donors}
-          ><path fill="none" d="M0 0h24v24H0z" />
+				href="/donors/"
-          <path
+			>
-            fill="currentColor"
+				<svg
-            d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z"
+					fill="currentColor"
-          /></svg
+					xmlns="http://www.w3.org/2000/svg"
-        >
+					viewBox="0 0 24 24"
-      </StatCard>
+					width="24"
-      <StatCard
+					height="24"
-        title={$_("total-donors")}
+					><path fill="none" d="M0 0h24v24H0z" />
-        value={stats.total_donors}
+					<path
-        href="/donors/"
+						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
-        <svg
+				>
-          fill="currentColor"
+			</StatCard>
-          xmlns="http://www.w3.org/2000/svg"
+			<StatCard
-          viewBox="0 0 24 24"
+				title={$_("total-donation-count")}
-          width="24"
+				value={stats.total_donations}
-          height="24"
+				href="/donations/"
-          ><path fill="none" d="M0 0h24v24H0z" />
+			>
-          <path
+				<svg
-            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"
+					fill="currentColor"
-          /></svg
+					xmlns="http://www.w3.org/2000/svg"
-        >
+					viewBox="0 0 24 24"
-      </StatCard>
+					width="24"
-      <StatCard
+					height="24"
-        title={$_("total-donation-count")}
+					><path fill="none" d="M0 0h24v24H0z" />
-        value={stats.total_donations}
+					<path
-        href="/donations/"
+						d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z"
-      >
+					/></svg
-        <svg
+				>
-          fill="currentColor"
+			</StatCard>
-          xmlns="http://www.w3.org/2000/svg"
+			<StatCard
-          viewBox="0 0 24 24"
+				title={$_("average-donation")}
-          width="24"
+				value={`${parseFloat(stats.average_donation / 100).toLocaleString(
-          height="24"
+					undefined,
-          ><path fill="none" d="M0 0h24v24H0z" />
+					{
-          <path
+						minimumFractionDigits: 2,
-            d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z"
+						maximumFractionDigits: 2,
-          /></svg
+					}
-        >
+				)}`}
-      </StatCard>
+				href="/donations/"
-      <StatCard
+			>
-        title={$_("average-donation")}
+				<svg
-        value={`${(stats.average_donation / 100).toFixed(2)} €`}
+					xmlns="http://www.w3.org/2000/svg"
-        href="/donations/"
+					height="24"
-      >
+					fill="currentColor"
-        <svg
+					width="24"
-          fill="currentColor"
+					><path d="M0 0h24v24H0z" fill="none" />
-          xmlns="http://www.w3.org/2000/svg"
+					<path
-          viewBox="0 0 24 24"
+						d="M15 18.5A6.48 6.48 0 019.24 15H15v-2H8.58c-.05-.33-.08-.66-.08-1s.03-.67.08-1H15V9H9.24A6.491 6.491 0 0115 5.5c1.61 0 3.09.59 4.23 1.57L21 5.3A8.955 8.955 0 0015 3c-3.92 0-7.24 2.51-8.48 6H3v2h3.06a8.262 8.262 0 000 2H3v2h3.52c1.24 3.49 4.56 6 8.48 6 2.31 0 4.41-.87 6-2.3l-1.78-1.77c-1.13.98-2.6 1.57-4.22 1.57z"
-          width="24"
+					/></svg
-          height="24"
+				>
-          ><path fill="none" d="M0 0h24v24H0z" />
+			</StatCard>
-          <path
+			<StatCard
-            d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z"
+				title={$_("total-donations")}
-          /></svg
+				value={`${parseFloat(stats.total_donation / 100).toLocaleString(
-        >
+					undefined,
-      </StatCard>
+					{
-      <StatCard
+						minimumFractionDigits: 2,
-        title={$_("total-donations")}
+						maximumFractionDigits: 2,
-        value={`${(stats.total_donation / 100).toFixed(2)} €`}
+					}
-        href="/donations/"
+				)}`}
-      >
+				href="/donations/"
-        <svg
+			>
-          xmlns="http://www.w3.org/2000/svg"
+				<svg
-          height="24"
+					xmlns="http://www.w3.org/2000/svg"
-          fill="currentColor"
+					height="24"
-          width="24"
+					fill="currentColor"
-          ><path d="M0 0h24v24H0z" fill="none" />
+					width="24"
-          <path
+					><path d="M0 0h24v24H0z" fill="none" />
-            d="M15 18.5A6.48 6.48 0 019.24 15H15v-2H8.58c-.05-.33-.08-.66-.08-1s.03-.67.08-1H15V9H9.24A6.491 6.491 0 0115 5.5c1.61 0 3.09.59 4.23 1.57L21 5.3A8.955 8.955 0 0015 3c-3.92 0-7.24 2.51-8.48 6H3v2h3.06a8.262 8.262 0 000 2H3v2h3.52c1.24 3.49 4.56 6 8.48 6 2.31 0 4.41-.87 6-2.3l-1.78-1.77c-1.13.98-2.6 1.57-4.22 1.57z"
+					<path
-          /></svg
+						d="M15 18.5A6.48 6.48 0 019.24 15H15v-2H8.58c-.05-.33-.08-.66-.08-1s.03-.67.08-1H15V9H9.24A6.491 6.491 0 0115 5.5c1.61 0 3.09.59 4.23 1.57L21 5.3A8.955 8.955 0 0015 3c-3.92 0-7.24 2.51-8.48 6H3v2h3.06a8.262 8.262 0 000 2H3v2h3.52c1.24 3.49 4.56 6 8.48 6 2.31 0 4.41-.87 6-2.3l-1.78-1.77c-1.13.98-2.6 1.57-4.22 1.57z"
-        >
+					/></svg
-      </StatCard>
+				>
-      <StatCard
+			</StatCard>
-        title={$_("total-distance")}
+			<StatCard
-        value={`${stats.total_distance / 1000} km`}
+				title={$_("total-distance")}
-        href="#"
+				value={`${stats.total_distance / 1000}km`}
-      >
+				href="/scans/"
-        <svg
+			>
-          fill="currentColor"
+				<svg
-          xmlns="http://www.w3.org/2000/svg"
+					fill="currentColor"
-          height="24"
+					xmlns="http://www.w3.org/2000/svg"
-          width="24"
+					height="24"
-          ><path d="M0 0h24v24H0z" fill="none" />
+					width="24"
-          <path
+					><path d="M0 0h24v24H0z" fill="none" />
-            d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z"
+					<path
-          /></svg
+						d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z"
-        >
+					/></svg
-      </StatCard>
+				>
-      <StatCard
+			</StatCard>
-        title={$_("average-distance")}
+			<StatCard
-        value={`${(stats.average_distance / 1000).toFixed(2)} km`}
+				title={$_("average-distance")}
-        href="#"
+				value={`${parseFloat(stats.average_distance / 1000).toLocaleString(
-      >
+					undefined,
-        <svg
+					{
-          fill="currentColor"
+						minimumFractionDigits: 2,
-          xmlns="http://www.w3.org/2000/svg"
+						maximumFractionDigits: 2,
-          height="24"
+					}
-          width="24"
+				)}km`}
-          ><path d="M0 0h24v24H0z" fill="none" />
+				href="/scans/"
-          <path
+			>
-            d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z"
+				<svg
-          /></svg
+					fill="currentColor"
-        >
+					xmlns="http://www.w3.org/2000/svg"
-      </StatCard>
+					height="24"
-      <StatCard
+					width="24"
-        title={$_("count_teams")}
+					><path d="M0 0h24v24H0z" fill="none" />
-        value={stats.total_teams}
+					<path
-        href="/teams/"
+						d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z"
-      >
+					/></svg
-        <svg
+				>
-          stroke="currentColor"
+			</StatCard>
-          fill="none"
+			<StatCard
-          stroke-width="2"
+				title={$_("count_teams")}
-          viewBox="0 0 24 24"
+				value={stats.total_teams}
-          stroke-linecap="round"
+				href="/teams/"
-          stroke-linejoin="round"
+			>
-          size="24"
+				<svg
-          class="stroke-current text-grey-500"
+					stroke="currentColor"
-          height="24"
+					fill="none"
-          width="24"
+					stroke-width="2"
-          xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 24 24"
-          ><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+					stroke-linecap="round"
-          <circle cx="9" cy="7" r="4" />
+					stroke-linejoin="round"
-          <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+					size="24"
-          <path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg
+					class="stroke-current text-grey-500"
-        >
+					height="24"
-      </StatCard>
+					width="24"
-      <StatCard
+					xmlns="http://www.w3.org/2000/svg"
-        title={$_("count_organizations")}
+					><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
-        value={stats.total_orgs}
+					<circle cx="9" cy="7" r="4" />
-        href="/orgs/"
+					<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
-      >
+					<path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg
-        <svg
+				>
-          height="24"
+			</StatCard>
-          fill="currentColor"
+			<StatCard
-          width="24"
+				title={$_("count_organizations")}
-          xmlns="http://www.w3.org/2000/svg"
+				value={stats.total_orgs}
-          viewBox="0 0 24 24"
+				href="/orgs/"
-          ><path fill="none" d="M0 0h24v24H0z" />
+			>
-          <path
+				<svg
-            d="M17 11V3H7v4H3v14h8v-4h2v4h8V11h-4zM7 19H5v-2h2v2zm0-4H5v-2h2v2zm0-4H5V9h2v2zm4 4H9v-2h2v2zm0-4H9V9h2v2zm0-4H9V5h2v2zm4 8h-2v-2h2v2zm0-4h-2V9h2v2zm0-4h-2V5h2v2zm4 12h-2v-2h2v2zm0-4h-2v-2h2v2z"
+					height="24"
-          /></svg
+					fill="currentColor"
-        >
+					width="24"
-      </StatCard>
+					xmlns="http://www.w3.org/2000/svg"
-    </div>
+					viewBox="0 0 24 24"
-  {:catch error}
+					><path fill="none" d="M0 0h24v24H0z" />
-    <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+					<path
-      <span class="inline-block align-middle mr-8">
+						d="M17 11V3H7v4H3v14h8v-4h2v4h8V11h-4zM7 19H5v-2h2v2zm0-4H5v-2h2v2zm0-4H5V9h2v2zm4 4H9v-2h2v2zm0-4H9V9h2v2zm0-4H9V5h2v2zm4 8h-2v-2h2v2zm0-4h-2V9h2v2zm0-4h-2V5h2v2zm4 12h-2v-2h2v2zm0-4h-2v-2h2v2z"
-        <b class="capitalize">{$_("general_promise_error")}</b>
+					/></svg
-        {error}
+				>
-      </span>
+			</StatCard>
-    </div>
+			<StatCard
-  {/await}
+				title={$_("runner_via_selfservice")}
 				value={stats.runnersViaSelfservice}
 				href="/runners/"
 			>
 				<svg
 					height="24"
 					width="24"
 					fill="currentColor"
 					xmlns="http://www.w3.org/2000/svg"
 					viewBox="0 0 24 24"
 					><path d="M0 0h24v24H0z" fill="none" />
 					<path
 						d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"
 					/></svg
 				>
 			</StatCard>
 		</div>
 	{: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}
 </div>
--- a/src/components/dashboard/StatCard.svelte
+++ b/src/components/dashboard/StatCard.svelte
@@ -1,22 +1,21 @@
 <script>
  import { _ } from "svelte-i18n";
-  export let href = "#"
+  export let href = "#";
  export let title = "";
  export let value = "";
 </script>
-<a href={href}>
+<a {href}>
-  <div
+  <div class="p-3 py-4 sm:p-4 rounded-lg bg-white border border-grey-100">
    class="p-4 rounded-lg bg-white border border-grey-100">
    <div class="flex flex-row items-center justify-between">
      <div class="flex flex-col">
-        <div class="text-xs uppercase font-light text-grey-500">
+        <div class="text-md sm:text-xs uppercase font-normal text-grey-500">
          {title}
        </div>
-        <div class="text-xl font-bold">{value}</div>
+        <div class="text-2xl sm:text-xl font-bold font-mono">{value}</div>
      </div>
-      <slot></slot>
+      <slot />
    </div>
  </div>
 </a>
--- a/src/components/donations/AddDonationModal.svelte
+++ b/src/components/donations/AddDonationModal.svelte
@@ -8,9 +8,8 @@
    RunnerService,
  } from "@odit/lfk-client-js";
  import Select from "svelte-select";
-  import Toastify from "toastify-js";
+  import { createEventDispatcher, onMount } from "svelte";
-  import { is_promise } from "svelte/internal";
+  import toast from "svelte-french-toast";
  import { createEventDispatcher } from "svelte";
  export let modal_open;
  const dispatch = createEventDispatcher();
  const getDonorLabel = (option) =>
@@ -18,25 +17,12 @@
  const filterDonors = (label, filterText, option) =>
    label.toLowerCase().includes(filterText.toLowerCase()) ||
    option.value.id.toString().startsWith(filterText.toLowerCase());
  function focus(el) {
    el.focus();
  }
  $: donor = 0;
  $: runner = 0;
  $: donors = [];
  $: runners = [];
  $: is_fixed = false;
  $: is_paid = false;
  DonorService.donorControllerGetAll().then((val) => {
    donors = val.map((r) => {
      return { label: getDonorLabel(r), value: r };
    });
  });
  RunnerService.runnerControllerGetAll().then((val) => {
    runners = val.map((r) => {
      return { label: getDonorLabel(r), value: r };
    });
  });
  $: amount_input = 0;
  $: processed_last_submit = true;
  $: is_amount_valid = amount_input > 0;
@@ -59,10 +45,7 @@
    if (processed_last_submit === true) {
      let amount_cent = Math.floor(amount_input * 100);
      processed_last_submit = false;
-      const toast = Toastify({
+      toast.loading($_("adding-donation"));
        text: $_("adding-donation"),
        duration: -1,
      }).showToast();
      if (is_fixed) {
        let postdata = {
          donor,
@@ -79,11 +62,8 @@
            amount_input = 0;
            modal_open = false;
            //
-            Toastify({
+            toast.dismiss();
-              text: $_("donation_added"),
+            toast.success($_("donation_added"));
              duration: 500,
              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            }).showToast();
            dispatch("created", { donations: [result] });
          })
          .catch((err) => {
@@ -91,8 +71,6 @@
          })
          .finally(() => {
            processed_last_submit = true;
            //
            toast.hideToast();
          });
      } else {
        let postdata = {
@@ -107,11 +85,8 @@
            amount_input = 0;
            modal_open = false;
            //
-            Toastify({
+            toast.dismiss();
-              text: $_("donation_added"),
+            toast.success($_("donation_added"));
              duration: 500,
              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            }).showToast();
            dispatch("created", { donations: [result] });
          })
          .catch((err) => {
@@ -119,24 +94,35 @@
          })
          .finally(() => {
            processed_last_submit = true;
            //
            toast.hideToast();
          });
      }
    }
  }
  onMount(async () => {
    donors = (await DonorService.donorControllerGetAll()).map(
      (r) => {
        return { label: getDonorLabel(r), value: r };
      }
    );
    runners = (await RunnerService.runnerControllerGetAll()).map(
      (r) => {
        return { label: getDonorLabel(r), value: r };
      }
    );
  });
 </script>
 {#if modal_open}
  <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
    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"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
    >
      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div
@@ -149,15 +135,15 @@
        aria-hidden="true">&#8203;</span
      >
      <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
        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="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
            <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"
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
            >
              <svg
                class="h-6 w-6 text-blue-600"
@@ -172,14 +158,14 @@
                /></svg
              >
            </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3">
              <h3 class="text-lg leading-6 font-medium text-gray-900">
                {#if is_fixed}
                  {$_("create-a-new-fixed-donation")}
                {:else}{$_("create-a-new-distance-donation")}{/if}
              </h3>
              <label class="content-center align-middle object-center">
-                <span class="ml-2 text-base" class:text-gray-300={is_fixed}
+                <span class="text-base" class:text-gray-300={is_fixed}
                  >{$_("distance-donation")}</span
                >
                <input
@@ -191,14 +177,14 @@
                  >{$_("fixed-donation")}</span
                >
              </label>
-              <div class="mt-2 mb-6">
+              <div class="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="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                <div class="col-span-6">
                  <label
                    for="donor"
@@ -206,7 +192,7 @@
                    >{$_("donor")}</label
                  >
                  <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"
+                    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-neutral-800 rounded-md p-2"
                    itemFilter={(label, filterText, option) =>
                      filterDonors(label, filterText, option)}
                    items={donors}
@@ -226,7 +212,7 @@
                      >{$_("runner")}</label
                    >
                    <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"
+                      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-neutral-800 rounded-md p-2"
                      itemFilter={(label, filterText, option) =>
                        filterDonors(label, filterText, option)}
                      items={runners}
@@ -258,7 +244,7 @@
                      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"
+                      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-neutral-800 p-2"
                      placeholder="2.00"
                    />
                    <span
@@ -303,13 +289,13 @@
            </div>
          </div>
        </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
          <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"
+            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"
          >
            {$_("create")}
          </button>
@@ -318,7 +304,7 @@
              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"
+            class="w-full 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 hidden lg:block"
          >
            {$_("cancel")}
          </button>
--- a/src/components/donations/AddDonationPaymentModal.svelte
+++ b/src/components/donations/AddDonationPaymentModal.svelte
@@ -1,18 +1,14 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
  import { DonationService } from "@odit/lfk-client-js";
  import Toastify from "toastify-js";
  import { createEventDispatcher } from "svelte";
  import toast from "svelte-french-toast";
  export let payment_modal_open = false;
  export let original_data = {};
  export let paid_amount_input = 0;
  const dispatch = createEventDispatcher();
  $: processed_last_submit = true;
  function focus(el) {
    el.focus();
  }
  $: createbtnenabled =
    is_paid_amount_valid &&
    !(paid_amount_input * 100 == original_data.paidAmount);
@@ -34,13 +30,10 @@
  function submit() {
    if (processed_last_submit === true) {
      processed_last_submit = false;
-      const toast = Toastify({
+      toast.loading($_("updating-donation"));
        text: $_("updating-donation"),
        duration: -1,
      }).showToast();
      const editable = Object.assign({}, original_data);
      editable.donor = editable.donor.id;
-      editable.paidAmount = paid_amount_input * 100;
+      editable.paidAmount = Math.round(paid_amount_input * 100);
      if (editable.responseType == "DISTANCEDONATION" || editable.runner) {
        editable.runner = editable.runner.id;
        DonationService.donationControllerPutDistance(
@@ -50,40 +43,31 @@
          .then((result) => {
            payment_modal_open = false;
            //
-            Toastify({
+            toast.dismiss();
-              text: $_("donation-updated"),
+
-              duration: 500,
+            toast.success($_("donation-updated"));
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+            dispatch("created", { donation: result });
            }).showToast();
            dispatch("created", { donation: response });
          })
          .catch((err) => {
            //
          })
          .finally(() => {
            processed_last_submit = true;
            //
            toast.hideToast();
          });
      } else {
        DonationService.donationControllerPutFixed(original_data.id, editable)
          .then((result) => {
            payment_modal_open = false;
            //
-            Toastify({
+            toast.dismiss();
-              text: $_("donation-updated"),
+            toast.success($_("donation-updated"));
-              duration: 500,
+            dispatch("created", { donation: result });
              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            }).showToast();
            dispatch("created", { donation: response });
          })
          .catch((err) => {
            //
          })
          .finally(() => {
            processed_last_submit = true;
            //
            toast.hideToast();
          });
      }
    }
@@ -92,14 +76,14 @@
 {#if payment_modal_open}
  <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
    use:clickOutside
    on:click_outside={() => {
      payment_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"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
    >
      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div
@@ -112,15 +96,15 @@
        aria-hidden="true">&#8203;</span
      >
      <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
        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="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
            <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"
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
            >
              <svg
                class="h-6 w-6 text-blue-600"
@@ -136,18 +120,18 @@
                /></svg
              >
            </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 text-left">
              <h3 class="text-lg leading-6 font-medium text-gray-900">
                {$_("enter-payment")}
              </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                <p class="text-sm text-gray-500">
                  {$_(
                    "you-can-enter-the-donations-paid-amount-manually-or-use-the-max-button-to-use-the-donations-exact-amount"
                  )}
                </p>
              </div>
-              <div class="grid grid-cols gap-6">
+              <div class="grid grid-cols gap-2 lg:gap-6">
                <div class="w-full">
                  <label
                    for="token"
@@ -195,13 +179,13 @@
            </div>
          </div>
        </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
          <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"
+            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"
          >
            {$_("save-changes")}
          </button>
@@ -210,7 +194,7 @@
              payment_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"
+            class="w-full 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 hidden lg:block"
          >
            {$_("cancel")}
          </button>
--- a/src/components/donations/DeleteDonationModal.svelte
+++ b/src/components/donations/DeleteDonationModal.svelte
@@ -37,14 +37,14 @@
 {#if modal_open}
  <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
    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"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
    >
      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div
@@ -57,15 +57,15 @@
        aria-hidden="true">&#8203;</span
      >
      <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
        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="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
            <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"
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
            >
              <svg
                class="h-6 w-6 text-blue-600"
@@ -80,15 +80,10 @@
                /></svg
              >
            </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
              <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_("confirm-delete")}
+                {$_("please-confirm-the-deletion-of-donation")}
              </h3>
              <div class="mt-2 mb-6">
                <p class="text-sm text-gray-500">
                  {$_("please-confirm-the-deletion-of-donation")}
                </p>
              </div>
              <div class="w-full">
                <span class="inline-block"
                  ><b>{$_("donor")}</b>: {delete_donation.donor.firstname}
@@ -98,11 +93,11 @@
            </div>
          </div>
        </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
          <button
            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"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
          >
            {$_("delete")}
          </button>
@@ -111,7 +106,7 @@
              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"
+            class="w-full 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 hidden lg:block"
          >
            {$_("cancel")}
          </button>
--- a/src/components/donations/DonationDetail.svelte
+++ b/src/components/donations/DonationDetail.svelte
@@ -1,341 +1,352 @@
 <script>
-  import { _ } from "svelte-i18n";
+	import { _ } from "svelte-i18n";
-  import store from "../../store";
+	import store from "../../store";
-  import {
+	import {
-    DonationService,
+		DonationService,
-    DonorService,
+		DonorService,
-    RunnerService,
+		RunnerService,
-  } from "@odit/lfk-client-js";
+	} from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+	import toast from "svelte-french-toast";
  import PromiseError from "../base/PromiseError.svelte";
  import Select from "svelte-select";
  let data_loaded = false;
  export let params;
  $: delete_triggered = false;
  $: original_data = {};
  $: editable = {};
  $: donor = {};
  $: runner = {};
  $: current_donors = [];
  $: current_runners = [];
  $: amount_input = 0;
  $: is_amount_valid = amount_input > 0;
  $: paid_amount_input = 0;
  $: is_paid_amount_valid = paid_amount_input > 0;
  $: is_everything_set =
    editable.donor != null &&
    ((original_data.responseType == "DISTANCEDONATION" &&
      editable?.runner != null) ||
      original_data.responseType !== "DISTANCEDONATION");
  $: changes_performed =
    !(JSON.stringify(original_data) === JSON.stringify(editable)) ||
    (original_data.responseType == "DISTANCEDONATION" &&
      !(Math.floor(amount_input * 100) === original_data.amountPerDistance)) ||
    (original_data.responseType !== "DISTANCEDONATION" &&
      !(Math.floor(amount_input * 100) === original_data.amount)) ||
      !(Math.floor(paid_amount_input * 100) === original_data.paidAmount);
  $: save_enabled = changes_performed && is_amount_valid && is_everything_set;
-  const promise = DonationService.donationControllerGetOne(
+	import PromiseError from "../base/PromiseError.svelte";
-    params.donationid
+	import Select from "svelte-select";
-  ).then((data) => {
+	let data_loaded = false;
-    data_loaded = true;
+	export let params;
-    original_data = Object.assign({}, data);
+	$: delete_triggered = false;
-    editable = Object.assign({}, original_data);
+	$: original_data = {};
-    paid_amount_input = data.paidAmount / 100;
+	$: editable = {};
-    if (data.responseType == "DISTANCEDONATION") {
+	$: donor = {};
-      amount_input = data.amountPerDistance / 100;
+	$: runner = {};
-      RunnerService.runnerControllerGetAll().then((val) => {
+	$: current_donors = [];
-        current_runners = val.map((r) => {
+	$: current_runners = [];
-          return { label: getDonorLabel(r), value: r };
+	$: amount_input = 0;
-        });
+	$: is_amount_valid = amount_input > 0;
-        runner = current_runners.find((g) => g.value.id == editable.runner.id);
+	$: paid_amount_input = 0;
-      });
+	$: is_paid_amount_valid = paid_amount_input > 0;
-    } else {
+	$: is_everything_set =
-      amount_input = data.amount / 100;
+		editable.donor != null &&
-    }
+		((original_data.responseType == "DISTANCEDONATION" &&
-    DonorService.donorControllerGetAll().then((val) => {
+			editable?.runner != null) ||
-      current_donors = val.map((r) => {
+			original_data.responseType !== "DISTANCEDONATION");
-        return { label: getDonorLabel(r), value: r };
+	$: changes_performed =
-      });
+		!(JSON.stringify(original_data) === JSON.stringify(editable)) ||
-      donor = current_donors.find((g) => g.value.id == editable.donor.id);
+		(original_data.responseType == "DISTANCEDONATION" &&
-    });
+			!(Math.floor(amount_input * 100) === original_data.amountPerDistance)) ||
-  });
+		(original_data.responseType !== "DISTANCEDONATION" &&
-  const getDonorLabel = (option) =>
+			!(Math.floor(amount_input * 100) === original_data.amount)) ||
-    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
+		!(Math.floor(paid_amount_input * 100) === original_data.paidAmount);
-  const filterDonors = (label, filterText, option) =>
+	$: save_enabled = changes_performed && is_amount_valid && is_everything_set;
    label.toLowerCase().includes(filterText.toLowerCase()) ||
    option.value.id.toString().startsWith(filterText.toLowerCase());
-  function submit() {
+	const promise = DonationService.donationControllerGetOne(
-    if (data_loaded === true && save_enabled) {
+		params.donationid
-      Toastify({
+	).then((data) => {
-        text: $_('updating-donation'),
+		data_loaded = true;
-        duration: 2500,
+		original_data = Object.assign({}, data);
-      }).showToast();
+		editable = Object.assign({}, original_data);
-      let postdata = {};
+		paid_amount_input = data.paidAmount / 100;
-      editable.paidAmount = paid_amount_input*100;
+		if (data.responseType == "DISTANCEDONATION") {
-      if (original_data.responseType === "DISTANCEDONATION") {
+			amount_input = data.amountPerDistance / 100;
-        editable.amountPerDistance = Math.floor(amount_input * 100);
+			RunnerService.runnerControllerGetAll().then((val) => {
-        postdata = Object.assign(postdata, editable);
+				current_runners = val.map((r) => {
-        postdata.runner = postdata.runner.id;
+					return { label: getDonorLabel(r), value: r };
-        postdata.donor = postdata.donor.id;
+				});
-        DonationService.donationControllerPutDistance(
+				runner = current_runners.find((g) => g.value.id == editable.runner.id);
-          original_data.id,
+			});
-          postdata
+		} else {
-        )
+			amount_input = data.amount / 100;
-          .then((resp) => {
+		}
-            Object.assign(original_data, editable);
+		DonorService.donorControllerGetAll().then((val) => {
-            original_data = original_data;
+			current_donors = val.map((r) => {
-            Toastify({
+				return { label: getDonorLabel(r), value: r };
-              text: $_('donation-updated'),
+			});
-              duration: 2500,
+			donor = current_donors.find((g) => g.value.id == editable.donor.id);
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+		});
-            }).showToast();
+	});
-          })
+	const getDonorLabel = (option) =>
-          .catch((err) => {});
+		option.firstname + " " + (option.middlename || "") + " " + option.lastname;
-      } else {
+	const filterDonors = (label, filterText, option) =>
-        editable.amount = Math.floor(amount_input * 100);
+		label.toLowerCase().includes(filterText.toLowerCase()) ||
-        postdata = Object.assign(postdata, editable);
+		option.value.id.toString().startsWith(filterText.toLowerCase());
-        postdata.donor = postdata.donor.id;
+
-        DonationService.donationControllerPutFixed(original_data.id, postdata)
+	function submit() {
-          .then((resp) => {
+		if (data_loaded === true && save_enabled) {
-            Object.assign(original_data, editable);
+			toast($_("updating-donation"));
-            original_data = original_data;
+			let postdata = {};
-            Toastify({
+			editable.paidAmount = paid_amount_input * 100;
-              text: $_('donation-updated'),
+			if (original_data.responseType === "DISTANCEDONATION") {
-              duration: 2500,
+				editable.amountPerDistance = Math.floor(amount_input * 100);
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+				postdata = Object.assign(postdata, editable);
-            }).showToast();
+				postdata.runner = postdata.runner.id;
-          })
+				postdata.donor = postdata.donor.id;
-          .catch((err) => {});
+				DonationService.donationControllerPutDistance(
-      }
+					original_data.id,
-    } else {
+					postdata
-    }
+				)
-  }
+					.then((resp) => {
-  function deleteDonation() {
+						Object.assign(original_data, editable);
-    DonationService.donationControllerRemove(original_data.id, false)
+						original_data = original_data;
-      .then((resp) => {
+						toast.success($_("donation-updated"));
-        Toastify({
+					})
-          text: $_('donation-deleted'),
+					.catch((err) => {});
-          duration: 500,
+			} else {
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+				editable.amount = Math.floor(amount_input * 100);
-        }).showToast();
+				postdata = Object.assign(postdata, editable);
-        location.replace("./");
+				postdata.donor = postdata.donor.id;
-      })
+				DonationService.donationControllerPutFixed(original_data.id, postdata)
-      .catch((err) => {
+					.then((resp) => {
-        modal_open = true;
+						Object.assign(original_data, editable);
-        delete_donor = original_data;
+						original_data = original_data;
-      });
+						toast.success($_("donation-updated"));
-  }
+					})
 					.catch((err) => {});
 			}
 		} else {
 		}
 	}
 	function deleteDonation() {
 		DonationService.donationControllerRemove(original_data.id, false)
 			.then((resp) => {
 				toast.success($_("donation-deleted"));
 				location.replace("./");
 			})
 			.catch((err) => {
 				modal_open = true;
 				delete_donor = original_data;
 			});
 	}
 </script>
 {#await promise}
-  {$_('loading-donation-details')}
+	{$_("loading-donation-details")}
 {:then}
-  <section class="container p-5 select-none">
+	<section class="container p-5 select-none">
-    <div class="flex flex-row mb-4">
+		<div class="flex flex-row mb-4">
-      <div class="w-full">
+			<div class="mt-2 w-full">
-        <nav class="w-full flex">
+				<nav class="w-full flex">
-          <ol class="list-none flex flex-row items-center justify-start">
+					<ol class="list-none flex flex-row items-center justify-start">
-            <li class="flex items-center">
+						<li class="flex items-center">
-              <svg
+							<a class="mr-2" href="./"
-                fill="currentColor"
+								><svg
-                xmlns="http://www.w3.org/2000/svg"
+									xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
+									width="24"
-                width="24"
+									height="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
+									viewBox="0 0 24 24"
-                <path
+									fill="none"
-                  d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z" /></svg>
+									stroke="currentColor"
-            </li>
+									stroke-width="2"
-            <li class="flex items-center ml-2">
+									stroke-linecap="round"
-              <a class="mr-2" href="./">{$_('donations')}</a><svg
+									stroke-linejoin="round"
-                stroke="currentColor"
+									class="inline-block"
-                fill="none"
+									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
-                stroke-width="2"
+								>
-                viewBox="0 0 24 24"
+								{$_("donations")}</a
-                stroke-linecap="round"
+							>
-                stroke-linejoin="round"
+						</li>
-                class="h-3 w-3 mr-2 stroke-current"
+					</ol>
-                height="1em"
+				</nav>
-                width="1em"
+			</div>
-                xmlns="http://www.w3.org/2000/svg"><line
+		</div>
-                  x1="5"
+		<div class="mb-4 text-3xl font-extrabold leading-tight">
-                  y1="12"
+			{original_data.donor.firstname}
-                  x2="19"
+			{original_data.donor.middlename || ""}
-                  y2="12" />
+			{original_data.donor.lastname}
-                <polyline points="12 5 19 12 12 19" /></svg>
+			&gt;
-            </li>
+			{#if original_data.responseType == "DISTANCEDONATION"}
-            <li class="flex items-center">
+				{original_data.runner.firstname}
-              <span class="mr-2">{original_data.id}</span>
+				{original_data.runner.middlename || ""}
-            </li>
+				{original_data.runner.lastname}
-          </ol>
+			{:else}
-        </nav>
+				{$_("fixed-donation")}:
-      </div>
+				{amount_input.toFixed(2).toLocaleString("de-DE", { valute: "EUR" })}€
-    </div>
+			{/if}
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
+			[#{original_data.id}]
-      {original_data.donor.firstname}
+			<div data-id="donation_actions_${original_data.id}">
-      {original_data.donor.middlename || ''}
+				{#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:DELETE")}
-      {original_data.donor.lastname}
+					{#if delete_triggered}
-      &gt;
+						<button
-      {#if original_data.responseType == 'DISTANCEDONATION'}
+							on:click={deleteDonation}
-        {original_data.runner.firstname}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-        {original_data.runner.middlename || ''}
+							>{$_("confirm-deletion")}</button
-        {original_data.runner.lastname}
+						>
-      {:else}
+						<button
-        {$_('fixed-donation')}:
+							on:click={() => {
-        {amount_input.toFixed(2).toLocaleString('de-DE', { valute: 'EUR' })}€
+								delete_triggered = !delete_triggered;
-      {/if}
+							}}
-      <span data-id="donation_actions_${original_data.id}">
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
-        {#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:DELETE')}
+							>{$_("cancel")}</button
-          {#if delete_triggered}
+						>
-            <button
+					{/if}
-              on:click={deleteDonation}
+					{#if !delete_triggered}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:">{$_('confirm-deletion')}</button>
+						<button
-            <button
+							on:click={() => {
-              on:click={() => {
+								delete_triggered = true;
-                delete_triggered = !delete_triggered;
+							}}
-              }}
+							type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:">{$_('cancel')}</button>
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-          {/if}
+							>{$_("delete-donation")}</button
-          {#if !delete_triggered}
+						>
-            <button
+					{/if}
-              on:click={() => {
+				{/if}
-                delete_triggered = true;
+				{#if !delete_triggered}
-              }}
+					<button
-              type="button"
+						disabled={!save_enabled}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:">{$_('delete-donation')}</button>
+						class:opacity-50={!save_enabled}
-          {/if}
+						type="button"
-        {/if}
+						on:click={submit}
-        {#if !delete_triggered}
+						class="w-full 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:w-auto sm:text-sm mb-1 lg:mb-0"
-          <button
+						>{$_("save-changes")}</button
-            disabled={!save_enabled}
+					>
-            class:opacity-50={!save_enabled}
+				{/if}
-            type="button"
+			</div>
-            on:click={submit}
+		</div>
-            class="w-full 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:">{$_('save-changes')}</button>
+		<!--  -->
-        {/if}
+		<div>
-      </span>
+			<span class="font-semibold text-gray-700"
-    </div>
+				>{$_("total-donation-amount")}:</span
-    <!--  -->
+			>
-    <div>
+			<span
-      <span
+				>{(editable.amount / 100)
-        class="font-medium text-gray-700">{$_('total-donation-amount')}:</span>
+					.toFixed(2)
-      <span>{(editable.amount / 100)
+					.toLocaleString("de-DE", { valute: "EUR" })}€</span
-          .toFixed(2)
+			>
-          .toLocaleString('de-DE', { valute: 'EUR' })}€</span>
+			|
-      |
+			<span class="font-semibold text-gray-700">{$_("paid-amount")}:</span>
-      <span
+			<span
-        class="font-medium text-gray-700">{$_('paid-amount')}:</span>
+				>{(editable.paidAmount / 100)
-      <span>{(editable.paidAmount / 100)
+					.toFixed(2)
-          .toFixed(2)
+					.toLocaleString("de-DE", { valute: "EUR" })}€</span
-          .toLocaleString('de-DE', { valute: 'EUR' })}€</span>
+			>
-      |
+			|
-      <span
+			<span class="font-semibold text-gray-700">{$_("status")}:</span>
-        class="font-medium text-gray-700">{$_('status')}:</span>
+			{#if editable.status == "PAID"}
-        {#if editable.status =="PAID"}
+				<span
-          <span
+					class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-100 text-green-800"
-            class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('paid')}</span>
+					>{$_("paid")}</span
-        {:else}
+				>
-          <span
+			{:else}
-            class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('open')}</span>
+				<span
-        {/if}
+					class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-red-100 text-red-800"
-    </div>
+					>{$_("open")}</span
-    <br>
+				>
-    <div class=" w-full">
+			{/if}
-      <label
+		</div>
-        for="donor"
+		<br />
-        class="block  font-medium text-gray-700">{$_('donor')}</label>
+		<div class=" mt-2 w-full">
-      <Select
+			<label for="donor" class="block font-semibold text-gray-700"
-        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"
+				>{$_("donor")}</label
-        itemFilter={(label, filterText, option) => filterDonors(label, filterText, option)}
+			>
-        items={current_donors}
+			<Select
-        showChevron={true}
+				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-neutral-800 rounded-md p-2"
-        placeholder={$_('search-for-donor-name-or-id')}
+				itemFilter={(label, filterText, option) =>
-        noOptionsMessage={$_('no-donors-found')}
+					filterDonors(label, filterText, option)}
-        bind:selectedValue={donor}
+				items={current_donors}
-        on:select={(selectedValue) => {editable.donor = selectedValue.detail.value; editable.donor.donationAmount=original_data.donor.donationAmount; editable.donor.paidDonationAmount =original_data.donor.paidDonationAmount}}
+				showChevron={true}
-        on:clear={() => (editable.donor = null)} />
+				placeholder={$_("search-for-donor-name-or-id")}
-    </div>
+				noOptionsMessage={$_("no-donors-found")}
-    {#if original_data.responseType == 'DISTANCEDONATION'}
+				bind:selectedValue={donor}
-      <div class=" w-full">
+				on:select={(selectedValue) => {
-        <label
+					editable.donor = selectedValue.detail.value;
-          for="donor"
+					editable.donor.donationAmount = original_data.donor.donationAmount;
-          class="block  font-medium text-gray-700">{$_('runner')}</label>
+					editable.donor.paidDonationAmount =
-        <Select
+						original_data.donor.paidDonationAmount;
-          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"
+				}}
-          itemFilter={(label, filterText, option) => filterDonors(label, filterText, option)}
+				on:clear={() => (editable.donor = null)}
-          items={current_runners}
+			/>
-          showChevron={true}
+		</div>
-          placeholder={$_('search-for-runner-by-name-or-id')}
+		{#if original_data.responseType == "DISTANCEDONATION"}
-          noOptionsMessage={$_('no-runners-found')}
+			<div class=" mt-2 w-full">
-          bind:selectedValue={runner}
+				<label for="donor" class="block font-semibold text-gray-700"
-          on:select={(selectedValue) => (editable.runner = selectedValue.detail.value)}
+					>{$_("runner")}</label
-          on:clear={() => (editable.runner = null)} />
+				>
-      </div>
+				<Select
-    {/if}
+					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-neutral-800 rounded-md p-2"
-    <div class=" w-full">
+					itemFilter={(label, filterText, option) =>
-      <label for="lastname" class="font-medium text-gray-700">
+						filterDonors(label, filterText, option)}
-        {#if original_data.responseType == 'DISTANCEDONATION'}
+					items={current_runners}
-          {$_('amount-per-kilometer')}
+					showChevron={true}
-        {:else}{$_('donation-amount')}{/if}
+					placeholder={$_("search-for-runner-by-name-or-id")}
-      </label>
+					noOptionsMessage={$_("no-runners-found")}
-      <div class="mt-1 flex rounded-md shadow-sm">
+					bind:selectedValue={runner}
-        <input
+					on:select={(selectedValue) =>
-          autocomplete="off"
+						(editable.runner = selectedValue.detail.value)}
-          class:border-red-500={!is_amount_valid}
+					on:clear={() => (editable.runner = null)}
-          class:focus:border-red-500={!is_amount_valid}
+				/>
-          class:focus:ring-red-500={!is_amount_valid}
+			</div>
-          bind:value={amount_input}
+		{/if}
-          type="number"
+		<div class=" mt-2 w-full">
-          step="0.01"
+			<label for="lastname" class="font-semibold text-gray-700">
-          name="donation_amount_eur"
+				{#if original_data.responseType == "DISTANCEDONATION"}
-          class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 p-2"
+					{$_("amount-per-kilometer")}
-          placeholder="2.00" />
+				{:else}{$_("donation-amount")}{/if}
-        <span
+			</label>
-          class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 ">€</span>
+			<div class="mt-1 flex rounded-md shadow-sm">
-      </div>
+				<input
-      {#if !is_amount_valid}
+					autocomplete="off"
-        <span
+					class:border-red-500={!is_amount_valid}
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+					class:focus:border-red-500={!is_amount_valid}
-          {$_('donation-amount-must-be-greater-that-0-00eur')}
+					class:focus:ring-red-500={!is_amount_valid}
-        </span>
+					bind:value={amount_input}
-      {/if}
+					type="number"
-    </div>
+					step="0.01"
-    <div class="w-full">
+					name="donation_amount_eur"
-      <label
+					class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 p-2"
-        for="token"
+					placeholder="2.00"
-        class="block text-sm font-medium text-gray-700">{$_('paid-amount')}</label>
+				/>
-      <div class="inline-flex border-gray-300 border rounded-l-md rounded-r-md bg-gray-50 text-gray-500 w-full">
+				<span
-        <input
+					class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500"
-            autocomplete="off"
+					>€</span
-            class:border-red-500={!is_amount_valid}
+				>
-            class:focus:border-red-500={!is_amount_valid}
+			</div>
-            class:focus:ring-red-500={!is_amount_valid}
+			{#if !is_amount_valid}
-            bind:value={paid_amount_input}
+				<span
-            type="number"
+					class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-            step="0.01"
+				>
-            name="donation_amount_eur"
+					{$_("donation-amount-must-be-greater-that-0-00eur")}
-            class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm p-2"
+				</span>
-            placeholder="2.00" />
+			{/if}
-          <button
+		</div>
-            on:click={
+		<div class="mt-2 w-full">
-              ()=>{
+			<label for="token" class="block font-semibold text-gray-700"
-                paid_amount_input=paid_amount_input = (original_data.amount/100).toFixed(2);
+				>{$_("paid-amount")}</label
-              }
+			>
-            }
+			<div
-            class="inline-flex items-center p-r-2 text-indigo-300 hover:text-indigo-700 text-sm">MAX</button>
+				class="inline-flex border-gray-300 border rounded-l-md rounded-r-md bg-gray-50 text-gray-500 w-full"
-          <span
+			>
-            class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">€</span>
+				<input
-        </div>
+					autocomplete="off"
-        {#if !is_paid_amount_valid}
+					class:border-red-500={!is_amount_valid}
-          <span
+					class:focus:border-red-500={!is_amount_valid}
-            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+					class:focus:ring-red-500={!is_amount_valid}
-            {$_('payment-amount-must-be-greater-than-0-00eur')}
+					bind:value={paid_amount_input}
-          </span>
+					type="number"
-        {/if}
+					step="0.01"
-    </div>
+					name="donation_amount_eur"
-  </section>
+					class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm p-2"
 					placeholder="2.00"
 				/>
 				<button
 					on:click={() => {
 						paid_amount_input = paid_amount_input = (
 							original_data.amount / 100
 						).toFixed(2);
 					}}
 					class="inline-flex items-center p-r-2 text-indigo-300 hover:text-indigo-700 text-sm"
 					>MAX</button
 				>
 				<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_paid_amount_valid}
 				<span
 					class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
 				>
 					{$_("payment-amount-must-be-greater-than-0-00eur")}
 				</span>
 			{/if}
 		</div>
 	</section>
 {:catch error}
-  <PromiseError {error} />
+	<PromiseError {error} />
 {/await}
--- a/src/components/donations/DonationDonor.svelte
+++ b/src/components/donations/DonationDonor.svelte
@@ -9,7 +9,7 @@
  <div class="flex items-center">
    <a
      href="../donors/{donor.id}"
-      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
      >{donor.firstname}
      {#if donor.middlename}{donor.middlename}{/if}
      {donor.lastname}</a
--- a/src/components/donations/DonationRunner.svelte
+++ b/src/components/donations/DonationRunner.svelte
@@ -9,7 +9,7 @@
  <div class="text-sm font-medium text-gray-900">
    <a
      href="../runners/{runner.id}"
-      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
      >{runner.firstname}
      {#if runner.middlename}{runner.middlename}{/if}
      {runner.lastname}</a
--- a/src/components/donations/DonationStatus.svelte
+++ b/src/components/donations/DonationStatus.svelte
@@ -5,12 +5,12 @@
 {#if status == "PAID"}
  <span
-    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current 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"
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-red-100 text-red-800"
    >{$_("open")}</span
  >
 {/if}
--- a/src/components/donations/Donations.svelte
+++ b/src/components/donations/Donations.svelte
@@ -9,27 +9,26 @@
 </script>
 <section class="container p-5">
-  <span class="mb-1 text-3xl font-extrabold leading-tight">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
    {$_("donations")}
-    {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:CREATE")}
+  </h4>
-      <button
+  {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:CREATE")}
-        on:click={() => {
+    <button
-          modal_open = true;
+      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"
+      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:w-auto sm:text-sm"
-        {$_("add-donation")}
+    >
-      </button>
+      {$_("add-donation")}
-    {/if}
+    </button>
-  </span>
+  {/if}
  <DonationsOverview bind:current_donations bind:addDonations />
 </section>
 {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:CREATE")}
  <AddDonationModal
    on:created={(event) => {
      console.log(event)
      addDonations(event.detail.donations);
    }}
    bind:modal_open
--- a/src/components/donations/DonationsEmptyState.svelte
+++ b/src/components/donations/DonationsEmptyState.svelte
@@ -5,8 +5,8 @@
 <div class="text-center items-center justify-center">
  <p class="mb-16 text-lg text-gray-500">
-    <img class="m-auto" style="height:15rem" src={donations_empty} alt="" />
+    <img class="m-auto mt-2" style="height:15rem" src={donations_empty} alt="" />
-    <span class="font-bold">{$_('there-are-no-donations-yet')}</span><br />
+    <span class="font-bold">{$_("there-are-no-donations-yet")}</span><br />
-    <span>{$_('add-your-fist-donation')}</span>
+    <span>{$_("add-your-fist-donation")}</span>
  </p>
 </div>
--- a/src/components/donations/DonationsOverview.svelte
+++ b/src/components/donations/DonationsOverview.svelte
@@ -27,11 +27,10 @@
    donationDonorFilter,
    donationRunnerFilter,
  } from "../shared/tablefilters";
  import toast from "svelte-french-toast";
  $: searchvalue = "";
  $: active_deletes = [];
  $: active_edits = [];
  $: selectedDonations =
    $table?.getSelectedRowModel().rows.map((row) => row.original) || [];
  $: selected =
    $table?.getSelectedRowModel().rows.map((row) => row.index) || [];
  $: dataLoaded = false;
@@ -164,19 +163,16 @@
      ...options,
      data: current_donations,
    }));
-    Toastify({
+    toast.success($_("donation-deleted"));
      text: $_("donation-deleted"),
      duration: 3500,
      backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
    }).showToast();
  }
  onMount(async () => {
    let page = 0;
    let pagesize = 300;
    while (page >= 0) {
      const donations = await DonationService.donationControllerGetAll(
        page,
-        100
+        pagesize
      );
      if (donations.length == 0) {
        page = -2;
@@ -191,7 +187,6 @@
      dataLoaded = true;
      page++;
    }
    console.log("All donations loaded");
  });
 </script>
@@ -200,9 +195,12 @@
  payment_modal_open={active_edits.length > 0}
  paid_amount_input={(active_edits[0]?.paidAmount || 0) / 100}
  on:created={(event) => {
-    current_donations[
+    current_donations = current_donations.map((d)=>{
-      current_donations.findIndex((d) => d.id === event.detail.donation.id)
+      if(d.id === event.detail.donation.id){
-    ].paidAmount = event.detail.donation.paidAmount;
+        d.paidAmount = event.detail.donation.paidAmount;
      }
      return d;
    })
    options.update((options) => ({
      ...options,
      data: current_donations,
@@ -233,13 +231,13 @@
      bind:value={searchvalue}
      placeholder={$_("datatable.search")}
      aria-label={$_("datatable.search")}
-      class="mb-4"
+      class="mb-2 w-full sm:w-auto mt-1 sm:mt-0 p-2 rounded-md border"
    />
    <div
      class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
    >
      <table class="w-full">
-        <thead>
+        <thead class="border-b border-gray-400">
          {#each $table.getHeaderGroups() as headerGroup}
            <tr class="select-none">
              <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
@@ -258,7 +256,7 @@
        </thead>
        <tbody>
          {#each $table.getRowModel().rows as row}
-            <tr>
+            <tr class="odd:bg-white even:bg-gray-100">
              <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
                <InputElement
                  type="checkbox"
@@ -285,3 +283,9 @@
    <TableBottom {table} {selected} />
  {/if}
 {/if}
 <style>
  table tbody tr td:nth-child(2) {
    font-family: monospace;
  }
 </style>
--- a/src/components/donors/AddDonorModal.svelte
+++ b/src/components/donors/AddDonorModal.svelte
@@ -5,8 +5,9 @@
  import { DonorService } from "@odit/lfk-client-js";
  import isEmail from "validator/es/lib/isEmail";
  import isMobilePhone from "validator/es/lib/isMobilePhone";
-  import Toastify from "toastify-js";
+
  import { createEventDispatcher } from "svelte";
  import toast from "svelte-french-toast";
  export let modal_open;
  let firstname_input;
  let lastname_input;
@@ -73,10 +74,7 @@
  function submit() {
    if (processed_last_submit === true) {
      processed_last_submit = false;
-      const toast = Toastify({
+      toast.loading($_("donor-is-being-added"));
        text: $_("donor-is-being-added"),
        duration: -1,
      }).showToast();
      let address = {};
      if (address_checked === true) {
        address = {
@@ -110,11 +108,8 @@
          email_input_value = "";
          modal_open = false;
          //
-          Toastify({
+          toast.dismiss();
-            text: $_("donor-added"),
+          toast.success($_("donor-added"));
            duration: 500,
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          }).showToast();
          dispatch("created", { donors: [result] });
        })
        .catch((err) => {
@@ -122,8 +117,6 @@
        })
        .finally(() => {
          processed_last_submit = true;
          //
          toast.hideToast();
        });
    }
  }
@@ -131,14 +124,14 @@
 {#if modal_open}
  <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
    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"
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
    >
      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div
@@ -151,15 +144,15 @@
        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"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
        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="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
            <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"
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
            >
              <svg
                class="h-6 w-6 text-blue-600"
@@ -174,18 +167,18 @@
                /></svg
              >
            </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3">
              <h3 class="text-lg leading-6 font-medium text-gray-900">
                {$_("create-a-new-donor")}
              </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                <p class="text-sm text-gray-500">
                  {$_(
                    "please-provide-the-nessecary-information-to-add-a-new-donor"
                  )}
                </p>
              </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                <div class="col-span-6">
                  <label
                    for="firstname"
@@ -203,7 +196,7 @@
                    bind:this={firstname_input}
                    type="text"
                    name="firstname"
-                    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"
+                    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-neutral-800 rounded-md p-2"
                  />
                  {#if !isFirstnameValid}
                    <span
@@ -226,7 +219,7 @@
                    bind:this={middlename_input}
                    type="text"
                    name="trackname"
-                    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"
+                    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-neutral-800 rounded-md p-2"
                  />
                </div>
                <div class="col-span-6">
@@ -245,7 +238,7 @@
                    bind:this={lastname_input}
                    type="text"
                    name="lastname"
-                    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"
+                    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-neutral-800 rounded-md p-2"
                  />
                  {#if !isLastnameValid}
                    <span
@@ -271,7 +264,7 @@
                    bind:this={phone_input}
                    type="tel"
                    name="phone"
-                    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"
+                    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-neutral-800 rounded-md p-2"
                  />
                  {#if !isPhoneValidOrEmpty}
                    <span
@@ -299,7 +292,7 @@
                    bind:this={email_input}
                    type="email"
                    name="email"
-                    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"
+                    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-neutral-800 rounded-md p-2"
                  />
                  {#if !isEmailValidOrEmpty}
                    <span
@@ -320,7 +313,7 @@
                    />
                  </div>
                  <div class="ml-3 text-sm">
-                    <label for="comments" class="font-medium text-gray-700"
+                    <label for="comments" class="font-semibold text-gray-700"
                      >{$_("receipt-needed")}</label
                    >
                  </div>
@@ -342,7 +335,7 @@
                      bind:this={address_input1}
                      type="text"
                      name="address1"
-                      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"
+                      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-neutral-800 rounded-md p-2"
                    />
                    {#if !isAddress1Valid}
                      <span
@@ -365,7 +358,7 @@
                      bind:this={address_input2}
                      type="text"
                      name="address2"
-                      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"
+                      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-neutral-800 rounded-md p-2"
                    />
                  </div>
                  <div class="col-span-6">
@@ -384,7 +377,7 @@
                      bind:this={address_zipcode}
                      type="text"
                      name="zipcode"
-                      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"
+                      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-neutral-800 rounded-md p-2"
                    />
                    {#if !iszipcodevalid}
                      <span
@@ -410,7 +403,7 @@
                      bind:this={address_city}
                      type="text"
                      name="city"
-                      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"
+                      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-neutral-800 rounded-md p-2"
                    />
                    {#if !iscityvalid}
                      <span
@@ -425,13 +418,13 @@
            </div>
          </div>
        </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
          <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"
+            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"
          >
            {$_("create")}
          </button>
@@ -440,7 +433,7 @@
              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"
+            class="w-full 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 hidden lg:block"
          >
            {$_("cancel")}
          </button>
--- a/src/components/donors/ConfirmDonorDeletion.svelte
+++ b/src/components/donors/ConfirmDonorDeletion.svelte
@@ -1,95 +1,90 @@
 <script>
-  import { _ } from "svelte-i18n";
+	import { _ } from "svelte-i18n";
-  import { clickOutside } from "../base/outsideclick";
+	import { clickOutside } from "../base/outsideclick";
-
+	import { createEventDispatcher } from "svelte";
-  import { DonorService } from "@odit/lfk-client-js";
+	export let modal_open;
-  import Toastify from "toastify-js";
+	export let delete_donor;
-  import { createEventDispatcher } from "svelte";
+	const dispatch = createEventDispatcher();
-  export let modal_open;
+	function cancelDelete() {
-  export let delete_donor;
+		modal_open = false;
-  const dispatch = createEventDispatcher();
+		dispatch("cancelDelete", { id: delete_donor.id });
-  function cancelDelete() {
+	}
-    modal_open = false;
+	function deleteDonor() {
-    dispatch("cancelDelete", { id: delete_donor.id });
+		dispatch("delete", { id: delete_donor.id });
-  }
+	}
  function deleteDonor() {
    dispatch("delete", { id: delete_donor.id });
  }
 </script>
 {#if modal_open}
-  <div
+	<div
-    class="fixed z-10 inset-0 overflow-y-auto"
+		class="fixed z-10 inset-0 overflow-y-hidden"
-    use:clickOutside
+		use:clickOutside
-    on:click_outside={cancelDelete}
+		on:click_outside={cancelDelete}
-  >
+	>
-    <div
+		<div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+			class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
-    >
+		>
-      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+			<div class="fixed inset-0 transition-opacity" aria-hidden="true">
-        <div
+				<div
-          class="absolute inset-0 bg-gray-500 opacity-75"
+					class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop"
+					data-id="modal_backdrop"
-        />
+				/>
-      </div>
+			</div>
-      <span
+			<span
-        class="hidden sm:inline-block sm:align-middle sm:h-screen"
+				class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span
+				aria-hidden="true">&#8203;</span
-      >
+			>
-      <div
+			<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"
+				class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
-        role="dialog"
+				role="dialog"
-        aria-modal="true"
+				aria-modal="true"
-        aria-labelledby="modal-headline"
+				aria-labelledby="modal-headline"
-      >
+			>
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+					<div class="">
-            <div
+						<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"
+							class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
-            >
+						>
-              <svg
+							<svg
-                class="h-6 w-6 text-blue-600"
+								class="h-6 w-6 text-blue-600"
-                fill="currentColor"
+								fill="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
+								xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
+								viewBox="0 0 24 24"
-                ><path fill="none" d="M0 0h24v24H0z" /><path
+								><path fill="none" d="M0 0h24v24H0z" /><path
-                  d="M9.33 11.5h2.17A4.5 4.5 0 0116 16H9v1h8v-1a5.58 5.58 0 00-.89-3H19a5 5 0 014.52 2.85A13.15 13.15 0 0113 21c-2.76 0-5.1-.59-7-1.63v-9.3a6.97 6.97 0 013.33 1.43zM5 19a1 1 0 01-1 1H2a1 1 0 01-1-1v-9a1 1 0 011-1h2a1 1 0 011 1v9zM18 5a3 3 0 110 6 3 3 0 010-6zm-7-3a3 3 0 110 6 3 3 0 010-6z"
+									d="M9.33 11.5h2.17A4.5 4.5 0 0116 16H9v1h8v-1a5.58 5.58 0 00-.89-3H19a5 5 0 014.52 2.85A13.15 13.15 0 0113 21c-2.76 0-5.1-.59-7-1.63v-9.3a6.97 6.97 0 013.33 1.43zM5 19a1 1 0 01-1 1H2a1 1 0 01-1-1v-9a1 1 0 011-1h2a1 1 0 011 1v9zM18 5a3 3 0 110 6 3 3 0 010-6zm-7-3a3 3 0 110 6 3 3 0 010-6z"
-                /></svg
+								/></svg
-              >
+							>
-            </div>
+						</div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+						<div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
-              <h3 class="text-lg leading-6 font-medium text-gray-900">
+							<h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_("attention")}
+								{$_(
-              </h3>
+									"do-you-want-to-delete-this-donor-with-all-related-donations"
-              <div class="mt-2 mb-6">
+								)}
-                <p class="text-sm text-gray-500">
+							</h3>
-                  {$_(
+							<div class="mb-6">
-                    "do-you-want-to-delete-this-donor-with-all-related-donations"
+								<p class="text-sm text-gray-500">
-                  )}
+									{$_("all-associated-donations-will-get-deleted-as-well")}
-                  <br />
+								</p>
-                  {$_("all-associated-donations-will-get-deleted-as-well")}
+							</div>
-                </p>
+						</div>
-              </div>
+					</div>
-            </div>
+				</div>
-          </div>
+				<div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
-        </div>
+					<button
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+						on:click={deleteDonor}
-          <button
+						type="button"
-            on:click={deleteDonor}
+						class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
-            type="button"
+					>
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+						{$_("confirm-delete-donor-with-all-donations")}
-          >
+					</button>
-            {$_("confirm-delete-donor-with-all-donations")}
+					<button
-          </button>
+						on:click={cancelDelete}
-          <button
+						type="button"
-            on:click={cancelDelete}
+						class="w-full 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 hidden lg:block"
-            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-keep-donor")}
-          >
+					</button>
-            {$_("cancel-keep-donor")}
+				</div>
-          </button>
+			</div>
-        </div>
+		</div>
-      </div>
+	</div>
    </div>
  </div>
 {/if}
--- a/src/components/donors/DonorDetail.svelte
+++ b/src/components/donors/DonorDetail.svelte
@@ -1,412 +1,413 @@
 <script>
-  import { _ } from "svelte-i18n";
+	import { DonorService } from "@odit/lfk-client-js";
-  import store from "../../store";
+	import { _ } from "svelte-i18n";
-  import { DonorService, DonationService } from "@odit/lfk-client-js";
+	import store from "../../store";
-  import Toastify from "toastify-js";
+	import toast from "svelte-french-toast";
-  import PromiseError from "../base/PromiseError.svelte";
+	import isEmail from "validator/es/lib/isEmail";
-  import isEmail from "validator/es/lib/isEmail";
+	import PromiseError from "../base/PromiseError.svelte";
-  import ConfirmDonorDeletion from "./ConfirmDonorDeletion.svelte";
+	let data_loaded = false;
-  let data_loaded = false;
+	export let params;
-  export let params;
+	$: delete_triggered = false;
-  $: delete_triggered = false;
+	$: original_data = {};
-  $: original_data = {};
+	$: editable = {};
-  $: editable = {};
+	$: changes_performed = !(
-  $: current_donations = [];
+		JSON.stringify(original_data) === JSON.stringify(editable)
-  $: changes_performed = !(
+	);
-    JSON.stringify(original_data) === JSON.stringify(editable)
+	$: isEmailValid =
-  );
+		(editable.email || "") === "" ||
-  $: isEmailValid =
+		(editable.email && isEmail(editable.email || ""));
-    (editable.email || "") === "" ||
+	$: isFirstnameValid = editable.firstname !== "";
-    (editable.email && isEmail(editable.email || ""));
+	$: isLastnameValid = editable.lastname !== "";
-  $: isFirstnameValid = editable.firstname !== "";
+	$: save_enabled =
-  $: isLastnameValid = editable.lastname !== "";
+		changes_performed &&
-  $: save_enabled =
+		isFirstnameValid &&
-    changes_performed &&
+		isLastnameValid &&
-    isFirstnameValid &&
+		isEmailValid &&
-    isLastnameValid &&
+		isPhoneValidOrEmpty &&
-    isEmailValid &&
+		((isAddress1Valid && iszipcodevalid && iscityvalid) ||
-    isPhoneValidOrEmpty &&
+			editable.address_checked === false);
-    ((isAddress1Valid && iszipcodevalid && iscityvalid) ||
+	const promise = DonorService.donorControllerGetOne(params.donorid).then(
-      editable.address_checked === false);
+		(data) => {
-  const donation_promise = DonationService.donationControllerGetAll().then(
+			data_loaded = true;
-    (val) => {
+			original_data = Object.assign(original_data, data);
-      current_donations = val;
+			editable = Object.assign(editable, original_data);
-    }
+			editable.address_checked = editable.address.address1 !== null;
-  );
+			original_data.address_checked = editable.address.address1 !== null;
-  const promise = DonorService.donorControllerGetOne(params.donorid).then(
+			if (editable.address_checked === false) {
-    (data) => {
+				editable.address = {
-      data_loaded = true;
+					address1: "",
-      original_data = Object.assign(original_data, data);
+					address2: "",
-      editable = Object.assign(editable, original_data);
+					city: "",
-      editable.address_checked = editable.address.address1 !== null;
+					postalcode: "",
-      original_data.address_checked = editable.address.address1 !== null;
+					country: "",
-      if (editable.address_checked === false) {
+				};
-        editable.address = {
+			}
-          address1: "",
+		}
-          address2: "",
+	);
-          city: "",
+	$: isPhoneValidOrEmpty =
-          postalcode: "",
+		editable.phone?.includes("+") ||
-          country: "",
+		editable.phone === "" ||
-        };
+		editable.phone === null;
-      }
+	$: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
-    }
+	$: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
-  );
+	$: iscityvalid = editable.address?.city?.trim().length !== 0;
-  $: isPhoneValidOrEmpty =
+	function submit() {
-    editable.phone?.includes("+") ||
+		if (data_loaded === true && save_enabled) {
-    editable.phone === "" ||
+			toast($_("donor-is-being-updated"));
-    editable.phone === null;
+			editable.address.country = "DE";
-  $: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
+			if (editable.address_checked === false) {
-  $: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
+				editable.address = null;
-  $: iscityvalid = editable.address?.city?.trim().length !== 0;
+			}
-  let modal_open = false;
+			if (editable.email) editable.email = editable.email;
-  let delete_donor = {};
+			else editable.email = null;
-  function submit() {
+			if (editable.phone) editable.phone = editable.phone;
-    if (data_loaded === true && save_enabled) {
+			else editable.phone = null;
-      Toastify({
+			if (editable.middlename) editable.middlename = editable.middlename;
-        text: $_("donor-is-being-updated"),
+			editable.receiptNeeded = editable.address_checked;
-        duration: 2500,
+			DonorService.donorControllerPut(original_data.id, editable)
-      }).showToast();
+				.then((resp) => {
-      editable.address.country = "DE";
+					Object.assign(original_data, editable);
-      if (editable.address_checked === false) {
+					original_data = original_data;
-        editable.address = null;
+					toast.success($_("updated-donor"));
-      }
+				})
-      if (editable.email) editable.email = editable.email;
+				.catch((err) => {});
-      if (editable.phone) editable.phone = editable.phone;
+		} else {
-      if (editable.middlename) editable.middlename = editable.middlename;
+		}
-      editable.receiptNeeded = editable.address_checked;
+	}
-      DonorService.donorControllerPut(original_data.id, editable)
+	function deleteDonor() {
-        .then((resp) => {
+		DonorService.donorControllerRemove(original_data.id, true)
-          Object.assign(original_data, editable);
+			.then((resp) => {
-          original_data = original_data;
+				toast.success($_("donor-deleted"));
-          Toastify({
+				location.replace("./");
-            text: $_("updated-donor"),
+			})
-            duration: 2500,
+			.catch((err) => {
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+				console.log(err);
-          }).showToast();
+			});
-        })
+	}
        .catch((err) => {});
    } else {
    }
  }
  function deleteDonor() {
    DonorService.donorControllerRemove(original_data.id, false)
      .then((resp) => {
        Toastify({
          text: $_("donor-deleted"),
          duration: 500,
          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
        }).showToast();
        location.replace("./");
      })
      .catch((err) => {
        modal_open = true;
        delete_donor = original_data;
      });
  }
 </script>
-<ConfirmDonorDeletion bind:modal_open bind:delete_donor />
+{#await promise}
-{#await promise && donation_promise}
+	{$_("loading-donor-details")}
  {$_('loading-donor-details')}
 {:then}
-  <section class="container p-5 select-none">
+	<section class="container p-5 select-none">
-    <div class="flex flex-row mb-4">
+		<div class="flex flex-row mb-4">
-      <div class="w-full">
+			<div class="w-full">
-        <nav class="w-full flex">
+				<nav class="w-full flex">
-          <ol class="list-none flex flex-row items-center justify-start">
+					<ol class="list-none flex flex-row items-center justify-start">
-            <li class="flex items-center">
+						<li class="flex items-center">
-              <svg
+							<a class="mr-2" href="./"
-                fill="currentColor"
+								><svg
-                xmlns="http://www.w3.org/2000/svg"
+									xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
+									width="24"
-                width="24"
+									height="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
+									viewBox="0 0 24 24"
-                <path
+									fill="none"
-                  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>
+									stroke="currentColor"
-            </li>
+									stroke-width="2"
-            <li class="flex items-center ml-2">
+									stroke-linecap="round"
-              <a class="mr-2" href="./">{$_('donors')}</a><svg
+									stroke-linejoin="round"
-                stroke="currentColor"
+									class="inline-block"
-                fill="none"
+									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
-                stroke-width="2"
+								>
-                viewBox="0 0 24 24"
+								{$_("donors")}</a
-                stroke-linecap="round"
+							>
-                stroke-linejoin="round"
+						</li>
-                class="h-3 w-3 mr-2 stroke-current"
+					</ol>
-                height="1em"
+				</nav>
-                width="1em"
+			</div>
-                xmlns="http://www.w3.org/2000/svg"><line
+		</div>
-                  x1="5"
+		<div class="mb-4 text-3xl font-extrabold leading-tight">
-                  y1="12"
+			{original_data.firstname}
-                  x2="19"
+			{original_data.middlename || ""}
-                  y2="12" />
+			{original_data.lastname}
-                <polyline points="12 5 19 12 12 19" /></svg>
+			<div data-id="donor_actions_${editable.id}">
-            </li>
+				{#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:DELETE")}
-            <li class="flex items-center">
+					{#if delete_triggered}
-              <span class="mr-2">{original_data.firstname}
+						<button
-                {original_data.middlename || ''}
+							on:click={deleteDonor}
-                {original_data.lastname}</span>
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-            </li>
+							>{$_("confirm-deletion")}</button
-          </ol>
+						>
-        </nav>
+						<button
-      </div>
+							on:click={() => {
-    </div>
+								delete_triggered = !delete_triggered;
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
+							}}
-      {original_data.firstname}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
-      {original_data.middlename || ''}
+							>{$_("cancel")}</button
-      {original_data.lastname}
+						>
-      <span data-id="donor_actions_${editable.id}">
+					{/if}
-        {#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:DELETE')}
+					{#if !delete_triggered}
-          {#if delete_triggered}
+						<button
-            <button
+							on:click={() => {
-              on:click={deleteDonor}
+								delete_triggered = true;
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:">{$_('confirm-deletion')}</button>
+							}}
-            <button
+							type="button"
-              on:click={() => {
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-                delete_triggered = !delete_triggered;
+							>{$_("delete-donor")}</button
-              }}
+						>
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:">{$_('cancel')}</button>
+					{/if}
-          {/if}
+				{/if}
-          {#if !delete_triggered}
+				{#if !delete_triggered}
-            <button
+					<button
-              on:click={() => {
+						disabled={!save_enabled}
-                delete_triggered = true;
+						class:opacity-50={!save_enabled}
-              }}
+						type="button"
-              type="button"
+						on:click={submit}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:">{$_('delete-donor')}</button>
+						class="w-full 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:w-auto sm:text-sm mb-1 lg:mb-0"
-          {/if}
+						>{$_("save-changes")}</button
-        {/if}
+					>
-        {#if !delete_triggered}
+				{/if}
-          <button
+			</div>
-            disabled={!save_enabled}
+		</div>
-            class:opacity-50={!save_enabled}
+		<!--  -->
-            type="button"
+		<div>
-            on:click={submit}
+			<span class="font-semibold text-gray-700"
-            class="w-full 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:">{$_('save-changes')}</button>
+				>{$_("total-donation-amount")}:</span
-        {/if}
+			>
-      </span>
+			<span
-    </div>
+				>{(editable.donationAmount / 100)
-    <!--  -->
+					.toFixed(2)
-    <div>
+					.toLocaleString("de-DE", { valute: "EUR" })}€</span
-      <span
+			>
-        class="font-medium text-gray-700">{$_('total-donation-amount')}:</span>
+			|
-      <span>{(editable.donationAmount / 100)
+			<span class="font-semibold text-gray-700">{$_("total-paid-amount")}:</span
-          .toFixed(2)
+			>
-          .toLocaleString('de-DE', { valute: 'EUR' })}€</span>
+			<span
-      |
+				>{(editable.paidDonationAmount / 100)
-      <span
+					.toFixed(2)
-        class="font-medium text-gray-700">{$_('total-paid-amount')}:</span>
+					.toLocaleString("de-DE", { valute: "EUR" })}€</span
-      <span>{(editable.paidDonationAmount / 100)
+			>
-          .toFixed(2)
+			<br />
-          .toLocaleString('de-DE', { valute: 'EUR' })}€</span>
+			<span class="font-semibold text-gray-700">{$_("donations")}:</span>
-      <br />
+			{#if original_data.donations.length > 0}
-      <span class="font-medium text-gray-700">{$_('donations')}:</span>
+				{#each original_data.donations as d}
-      {#if current_donations.filter((d) => d.donor.id == editable.id).length > 0}
+					{#if d.responseType === "DISTANCEDONATION"}
-        {#each current_donations.filter((o) => o.donor.id == editable.id) as d}
+						<a
-          {#if d.responseType === 'DISTANCEDONATION'}
+							href="../donations/{d.id}"
-            <a
+							class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-600 text-white mr-1"
-              href="../donations/{d.id}"
+							>{d.runner.firstname}
-              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-600 text-white mr-1">{d.runner.firstname}
+							{d.runner.middlename || ""}
-              {d.runner.middlename || ""}
+							{d.runner.lastname}</a
-              {d.runner.lastname}</a>
+						>
-          {:else}
+					{:else}
-            <a
+						<a
-              href="../donations/{d.id}"
+							href="../donations/{d.id}"
-              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-700 text-white mr-1">{$_('fixed-donation')}:
+							class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-700 text-white mr-1"
-              {(d.amount / 100)
+							>{$_("fixed-donation")}:
-                .toFixed(2)
+							{(d.amount / 100)
-                .toLocaleString('de-DE', { valute: 'EUR' })}€</a>
+								.toFixed(2)
-          {/if}
+								.toLocaleString("de-DE", { valute: "EUR" })}€</a
-        {/each}
+						>
-      {:else}{$_('donor-has-no-associated-donations')}{/if}
+					{/if}
-    </div>
+				{/each}
-    <div class=" w-full">
+			{:else}{$_("donor-has-no-associated-donations")}{/if}
-      <label
+		</div>
-        for="firstname"
+		<div class="mt-2 w-full">
-        class="font-medium text-gray-700">{$_('first-name')}</label>
+			<label for="firstname" class="font-semibold text-gray-700"
-      <input
+				>{$_("first-name")}</label
-        autocomplete="off"
+			>
-        placeholder={$_('first-name')}
+			<input
-        type="text"
+				autocomplete="off"
-        class:border-red-500={!isFirstnameValid}
+				placeholder={$_("first-name")}
-        class:focus:border-red-500={!isFirstnameValid}
+				type="text"
-        class:focus:ring-red-500={!isFirstnameValid}
+				class:border-red-500={!isFirstnameValid}
-        bind:value={editable.firstname}
+				class:focus:border-red-500={!isFirstnameValid}
-        name="firstname"
+				class:focus:ring-red-500={!isFirstnameValid}
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+				bind:value={editable.firstname}
-      {#if !isFirstnameValid}
+				name="firstname"
-        <span
+				class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+			/>
-          {$_('first-name-is-required')}
+			{#if !isFirstnameValid}
-        </span>
+				<span
-      {/if}
+					class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-    </div>
+				>
-    <div class=" w-full">
+					{$_("first-name-is-required")}
-      <label
+				</span>
-        for="middlename"
+			{/if}
-        class="font-medium text-gray-700">{$_('middle-name')}</label>
+		</div>
-      <input
+		<div class="mt-2 w-full">
-        autocomplete="off"
+			<label for="middlename" class="font-semibold text-gray-700"
-        placeholder={$_('middle-name')}
+				>{$_("middle-name")}</label
-        type="text"
+			>
-        bind:value={editable.middlename}
+			<input
-        name="middlename"
+				autocomplete="off"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+				placeholder={$_("middle-name")}
-    </div>
+				type="text"
-    <div class=" w-full">
+				bind:value={editable.middlename}
-      <label
+				name="middlename"
-        for="lastname"
+				class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
-        class="font-medium text-gray-700">{$_('last-name')}</label>
+			/>
-      <input
+		</div>
-        autocomplete="off"
+		<div class="mt-2 w-full">
-        placeholder={$_('last-name')}
+			<label for="lastname" class="font-semibold text-gray-700"
-        type="text"
+				>{$_("last-name")}</label
-        bind:value={editable.lastname}
+			>
-        class:border-red-500={!isLastnameValid}
+			<input
-        class:focus:border-red-500={!isLastnameValid}
+				autocomplete="off"
-        class:focus:ring-red-500={!isLastnameValid}
+				placeholder={$_("last-name")}
-        name="lastname"
+				type="text"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+				bind:value={editable.lastname}
-      {#if !isLastnameValid}
+				class:border-red-500={!isLastnameValid}
-        <span
+				class:focus:border-red-500={!isLastnameValid}
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+				class:focus:ring-red-500={!isLastnameValid}
-          {$_('last-name-is-required')}
+				name="lastname"
-        </span>
+				class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
-      {/if}
+			/>
-    </div>
+			{#if !isLastnameValid}
-    <div class=" w-full">
+				<span
-      <label
+					class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-        for="email"
+				>
-        class="font-medium text-gray-700">{$_('e-mail-adress')}</label>
+					{$_("last-name-is-required")}
-      <input
+				</span>
-        autocomplete="off"
+			{/if}
-        placeholder={$_('e-mail-adress')}
+		</div>
-        type="email"
+		<div class="mt-2 w-full">
-        bind:value={editable.email}
+			<label for="email" class="font-semibold text-gray-700"
-        class:border-red-500={!isEmailValid}
+				>{$_("e-mail-adress")}</label
-        class:focus:border-red-500={!isEmailValid}
+			>
-        class:focus:ring-red-500={!isEmailValid}
+			<input
-        name="email"
+				autocomplete="off"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+				placeholder={$_("e-mail-adress")}
-      {#if !isEmailValid}
+				type="email"
-        <span
+				bind:value={editable.email}
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+				class:border-red-500={!isEmailValid}
-          {$_('valid-email-is-required')}
+				class:focus:border-red-500={!isEmailValid}
-        </span>
+				class:focus:ring-red-500={!isEmailValid}
-      {/if}
+				name="email"
-    </div>
+				class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
-    <div class=" w-full">
+			/>
-      <label for="phone" class="font-medium text-gray-700">{$_('phone')}</label>
+			{#if !isEmailValid}
-      <input
+				<span
-        autocomplete="off"
+					class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-        placeholder={$_('phone')}
+				>
-        type="tel"
+					{$_("valid-email-is-required")}
-        class:border-red-500={!isPhoneValidOrEmpty}
+				</span>
-        class:focus:border-red-500={!isPhoneValidOrEmpty}
+			{/if}
-        class:focus:ring-red-500={!isPhoneValidOrEmpty}
+		</div>
-        bind:value={editable.phone}
+		<div class="mt-2 w-full">
-        name="phone"
+			<label for="phone" class="font-semibold text-gray-700"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+				>{$_("phone")}</label
-      {#if !isPhoneValidOrEmpty}
+			>
-        <span
+			<input
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+				autocomplete="off"
-          {$_('valid-international-phone-number-is-required')}
+				placeholder={$_("phone")}
-        </span>
+				type="tel"
-      {/if}
+				class:border-red-500={!isPhoneValidOrEmpty}
-    </div>
+				class:focus:border-red-500={!isPhoneValidOrEmpty}
-    <div class="flex items-start mt-2">
+				class:focus:ring-red-500={!isPhoneValidOrEmpty}
-      <div class="flex items-center h-5">
+				bind:value={editable.phone}
-        <input
+				name="phone"
-          bind:checked={editable.address_checked}
+				class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
-          id="comments"
+			/>
-          name="comments"
+			{#if !isPhoneValidOrEmpty}
-          type="checkbox"
+				<span
-          class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+					class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-      </div>
+				>
-      <div class="ml-3 ">
+					{$_("valid-international-phone-number-is-required")}
-        <label
+				</span>
-          for="comments"
+			{/if}
-          class="font-medium text-gray-700">{$_('receipt-needed')}</label>
+		</div>
-      </div>
+		<div class="flex items-start mt-2">
-    </div>
+			<div class="flex items-center h-5">
-    {#if editable.address_checked === true}
+				<input
-      <div class="col-span-6">
+					bind:checked={editable.address_checked}
-        <label
+					id="comments"
-          for="address1"
+					name="comments"
-          class="block  font-medium text-gray-700">{$_('address')}</label>
+					type="checkbox"
-        <input
+					class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-          autocomplete="off"
+				/>
-          placeholder="Address"
+			</div>
-          class:border-red-500={!isAddress1Valid}
+			<div class="ml-3">
-          class:focus:border-red-500={!isAddress1Valid}
+				<label for="comments" class="font-semibold text-gray-700"
-          class:focus:ring-red-500={!isAddress1Valid}
+					>{$_("receipt-needed")}</label
-          bind:value={editable.address.address1}
+				>
-          type="text"
+			</div>
-          name="address1"
+		</div>
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+		{#if editable.address_checked === true}
-        {#if !isAddress1Valid}
+			<div class="col-span-6">
-          <span
+				<label for="address1" class="block font-medium text-gray-700"
-            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+					>{$_("address")}</label
-            {$_('address-is-required')}
+				>
-          </span>
+				<input
-        {/if}
+					autocomplete="off"
-      </div>
+					placeholder="Address"
-      <div class="col-span-6">
+					class:border-red-500={!isAddress1Valid}
-        <label
+					class:focus:border-red-500={!isAddress1Valid}
-          for="address2"
+					class:focus:ring-red-500={!isAddress1Valid}
-          class="block  font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
+					bind:value={editable.address.address1}
-        <input
+					type="text"
-          autocomplete="off"
+					name="address1"
-          placeholder={$_('apartment-suite-etc')}
+					class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
-          bind:value={editable.address.address2}
+				/>
-          type="text"
+				{#if !isAddress1Valid}
-          name="address2"
+					<span
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+						class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-      </div>
+					>
-      <div class="col-span-6">
+						{$_("address-is-required")}
-        <label
+					</span>
-          for="zipcode"
+				{/if}
-          class="block  font-medium text-gray-700">{$_('zip-postal-code')}</label>
+			</div>
-        <input
+			<div class="col-span-6">
-          autocomplete="off"
+				<label for="address2" class="block font-medium text-gray-700"
-          placeholder={$_('zip-postal-code')}
+					>{$_("apartment-suite-etc")}</label
-          class:border-red-500={!iszipcodevalid}
+				>
-          class:focus:border-red-500={!iszipcodevalid}
+				<input
-          class:focus:ring-red-500={!iszipcodevalid}
+					autocomplete="off"
-          bind:value={editable.address.postalcode}
+					placeholder={$_("apartment-suite-etc")}
-          type="text"
+					bind:value={editable.address.address2}
-          name="zipcode"
+					type="text"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+					name="address2"
-        {#if !iszipcodevalid}
+					class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
-          <span
+				/>
-            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+			</div>
-            {$_('valid-zipcode-postal-code-is-required')}
+			<div class="col-span-6">
-          </span>
+				<label for="zipcode" class="block font-medium text-gray-700"
-        {/if}
+					>{$_("zip-postal-code")}</label
-      </div>
+				>
-      <div class="col-span-6">
+				<input
-        <label
+					autocomplete="off"
-          for="city"
+					placeholder={$_("zip-postal-code")}
-          class="block  font-medium text-gray-700">{$_('city')}</label>
+					class:border-red-500={!iszipcodevalid}
-        <input
+					class:focus:border-red-500={!iszipcodevalid}
-          autocomplete="off"
+					class:focus:ring-red-500={!iszipcodevalid}
-          placeholder={$_('city')}
+					bind:value={editable.address.postalcode}
-          class:border-red-500={!iscityvalid}
+					type="text"
-          class:focus:border-red-500={!iscityvalid}
+					name="zipcode"
-          class:focus:ring-red-500={!iscityvalid}
+					class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
-          bind:value={editable.address.city}
+				/>
-          type="text"
+				{#if !iszipcodevalid}
-          name="city"
+					<span
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+						class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-        {#if !iscityvalid}
+					>
-          <span
+						{$_("valid-zipcode-postal-code-is-required")}
-            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+					</span>
-            {$_('valid-city-is-required')}
+				{/if}
-          </span>
+			</div>
-        {/if}
+			<div class="col-span-6">
-      </div>
+				<label for="city" class="block font-medium text-gray-700"
-    {/if}
+					>{$_("city")}</label
-  </section>
+				>
 				<input
 					autocomplete="off"
 					placeholder={$_("city")}
 					class:border-red-500={!iscityvalid}
 					class:focus:border-red-500={!iscityvalid}
 					class:focus:ring-red-500={!iscityvalid}
 					bind:value={editable.address.city}
 					type="text"
 					name="city"
 					class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
 				/>
 				{#if !iscityvalid}
 					<span
 						class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
 					>
 						{$_("valid-city-is-required")}
 					</span>
 				{/if}
 			</div>
 		{/if}
 	</section>
 {:catch error}
-  <PromiseError {error} />
+	<PromiseError {error} />
 {/await}
--- a/src/components/donors/DonorDonations.svelte
+++ b/src/components/donors/DonorDonations.svelte
@@ -4,7 +4,7 @@
 </script>
 {#if !donations || donations.length == 0}
-  {$_('donor-has-no-associated-donations')}
+  {$_("donor-has-no-associated-donations")}
 {:else}
  {#each donations as donation}
    {#if donation.responseType === "DISTANCEDONATION"}
@@ -18,7 +18,7 @@
    {:else}
      <a
        href="../donations/{donation.id}"
-        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-700 text-white mr-1"
+        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-700 text-white mr-1"
        >{$_("fixed-donation")}:
        {(donation.amount / 100)
          .toFixed(2)
--- a/src/components/donors/Donors.svelte
+++ b/src/components/donors/Donors.svelte
@@ -9,61 +9,61 @@
 </script>
 <section class="container p-5">
-  <span class="mb-1 text-3xl font-extrabold leading-tight">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
    {$_("donors")}
-    {#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:CREATE")}
+  </h4>
-      <button
+  {#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:CREATE")}
-        on:click={() => {
+    <button
-          modal_open = true;
+      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"
+      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:w-auto sm:text-sm  mb-1 lg:mb-0"
-        {$_("add-donor")}
+    >
-      </button>
+      {$_("add-donor")}
-    {/if}
+    </button>
-    {#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:GET")}
+  {/if}
-      <button
+  {#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:GET")}
-        on:click={() => {
+    <button
-          const data = current_donors
+      on:click={() => {
-            .filter((d) => d.receiptNeeded === true)
+        const data = current_donors
-            .map(function (d) {
+          .filter((d) => d.receiptNeeded === true)
-              d.address.address2 =
+          .map(function (d) {
-                d.address.address2 === "" ? "" : " " + d.address.address2;
+            d.address.address2 =
-              const address = `${d.address.address1}${d.address.address2}, ${d.address.postalcode} ${d.address.city}, ${d.address.country}`;
+              d.address.address2 === "" ? "" : " " + d.address.address2;
-              return [
+            const address = `${d.address.address1}${d.address.address2}, ${d.address.postalcode} ${d.address.city}, ${d.address.country}`;
-                d.firstname,
+            return [
-                d.middlename,
+              d.firstname,
-                d.lastname,
+              d.middlename,
-                d.paidDonationAmount,
+              d.lastname,
-                address,
+              (d.paidDonationAmount/100).toFixed(2),
-              ];
+              address,
-            });
+            ];
          let csv = `${$_("csv_import__firstname")};${$_(
            "csv_import__middlename"
          )};${$_("csv_import__lastname")};${$_(
            "total_donation_amount_in_eur"
          )};${$_("address")}\n`;
          data.forEach(function (row) {
            csv += row.join(";");
            csv += "\n";
          });
-          let hiddenElement = document.createElement("a");
+        let csv = `${$_("csv_import__firstname")};${$_(
-          hiddenElement.href = "data:text/csv;charset=utf-8," + encodeURI(csv);
+          "csv_import__middlename"
-          hiddenElement.target = "_blank";
+        )};${$_("csv_import__lastname")};${$_(
-          hiddenElement.download = `${$_(
+          "total_donation_amount_in_eur"
-            "filename_sponsoringquittungsliste"
+        )};${$_("address")}\n`;
-          )}.csv`;
+        data.forEach(function (row) {
-          hiddenElement.click();
+          csv += row.join(";");
-          hiddenElement.remove();
+          csv += "\n";
-        }}
+        });
-        type="button"
+        let hiddenElement = document.createElement("a");
-        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"
+        hiddenElement.href = "data:text/csv;charset=utf-8," + encodeURI(csv);
-      >
+        hiddenElement.target = "_blank";
-        {$_("sponsoring-quittungs-liste_herunterladen")}
+        hiddenElement.download = `${$_(
-      </button>
+          "filename_sponsoringquittungsliste"
-    {/if}
+        )}.csv`;
-  </span>
+        hiddenElement.click();
        hiddenElement.remove();
      }}
      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:w-auto sm:text-sm  mb-1 lg:mb-0"
    >
      {$_("sponsoring-quittungs-liste_herunterladen")}
    </button>
  {/if}
  <DonorsOverview bind:current_donors bind:addDonors />
 </section>
--- a/src/components/donors/DonorsEmptyState.svelte
+++ b/src/components/donors/DonorsEmptyState.svelte
@@ -6,7 +6,7 @@
 <div class="text-center items-center justify-center">
  <p class="mb-16 text-lg text-gray-500">
    <img class="w-full" style="height:15rem" src={donors_empty} alt="" />
-    <span class="font-bold">{$_('there-are-no-donors-yet')}</span><br />
+    <span class="font-bold">{$_("there-are-no-donors-yet")}</span><br />
-    <span>{$_('add-your-first-donor')}</span>
+    <span>{$_("add-your-first-donor")}</span>
  </p>
 </div>
--- a/src/components/donors/DonorsOverview.svelte
+++ b/src/components/donors/DonorsOverview.svelte
@@ -1,10 +1,9 @@
 <script>
  import { _ } from "svelte-i18n";
-  import { DonationService, DonorService } from "@odit/lfk-client-js";
+  import { 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 TableBottom from "../shared/TableBottom.svelte";
  import {
    createSvelteTable,
@@ -23,6 +22,7 @@
  import DonorAddress from "./DonorAddress.svelte";
  import DonorDonations from "./DonorDonations.svelte";
  import { filterAddress, filterName } from "../shared/tablefilters";
  import toast from "svelte-french-toast";
  $: searchvalue = "";
  $: active_deletes = [];
  $: selectedDonors =
@@ -147,8 +147,9 @@
  onMount(async () => {
    let page = 0;
    let pagesize = 300;
    while (page >= 0) {
-      const donors = await DonorService.donorControllerGetAll(page, 500);
+      const donors = await DonorService.donorControllerGetAll(page, pagesize);
      if (donors.length == 0) {
        page = -2;
      }
@@ -162,8 +163,6 @@
      dataLoaded = true;
      page++;
    }
    console.log("All donors loaded");
  });
 </script>
@@ -172,12 +171,10 @@
    active_deletes = active_deletes.filter((a) => a.id !== event.detail.id);
  }}
  on:delete={async (event) => {
    toast.loading($_("deleting-donor"));
    await DonorService.donorControllerRemove(event.detail.id, true);
-    Toastify({
+    toast.dismiss();
-      text: $_("donor-deleted"),
+    toast.success($_("donor-deleted"));
      duration: 500,
      backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
    }).showToast();
    current_donors = current_donors.filter((d) => d.id !== event.detail.id);
    active_deletes = active_deletes.filter((a) => a.id !== event.detail.id);
    options.update((options) => ({
@@ -205,13 +202,13 @@
      bind:value={searchvalue}
      placeholder={$_("datatable.search")}
      aria-label={$_("datatable.search")}
-      class="mb-4"
+      class="mb-2 w-full sm:w-auto mt-1 sm:mt-0 p-2 rounded-md border"
    />
    <div
      class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
    >
      <table class="w-full">
-        <thead>
+        <thead class="border-b border-gray-400">
          {#each $table.getHeaderGroups() as headerGroup}
            <tr class="select-none">
              <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
@@ -230,7 +227,7 @@
        </thead>
        <tbody>
          {#each $table.getRowModel().rows as row}
-            <tr>
+            <tr class="odd:bg-white even:bg-gray-100">
              <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
                <InputElement
                  type="checkbox"
@@ -257,3 +254,9 @@
    <TableBottom {table} {selected} />
  {/if}
 {/if}
 <style>
  table tbody tr td:nth-child(2) {
    font-family: monospace;
  }
 </style>
--- a/src/components/general/About.svelte
+++ b/src/components/general/About.svelte
@@ -1,193 +1,196 @@
 <script>
-  import { _ } from "svelte-i18n";
+	import { _ } from "svelte-i18n";
-  import { clickOutside } from "../base/outsideclick";
+	import { clickOutside } from "../base/outsideclick";
-  export let modal_open;
+	let modal_open = false;
-  (function () {
+	(function () {
-    document.onkeydown = function (e) {
+		document.onkeydown = function (e) {
-      e = e || window.event;
+			e = e || window.event;
-      if (e.key === "Escape") {
+			if (e.key === "Escape") {
-        modal_open = false;
+				modal_open = false;
-      }
+			}
-    };
+		};
-  })();
+	})();
-  const license_promise = fetch("/licenses.json");
+	const license_promise = fetch("/licenses.json");
-  let licenses = [];
+	let licenses = [];
-  $: currentlicense = "";
+	$: currentlicense = "";
-  $: licensetext = "";
+	$: licensetext = "";
-  license_promise
+	license_promise
-    .then((response) => response.json())
+		.then((response) => response.json())
-    .then((json) => {
+		.then((json) => {
-      licenses = json;
+			licenses = json;
-    });
+		});
 </script>
 {#if modal_open}
-  <div
+	<div
-    class="fixed z-10 inset-0 overflow-y-auto"
+		class="fixed z-10 inset-0 overflow-y-hidden"
-    
+		use:clickOutside
-    use:clickOutside
+		on:click_outside={() => {
-    on:click_outside={() => {
+			modal_open = false;
-      modal_open = false;
+		}}
-    }}>
+	>
-    <div
+		<div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+			class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 sm:block sm:p-0"
-      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+		>
-        <div
+			<div class="fixed inset-0 transition-opacity" aria-hidden="true">
-          class="absolute inset-0 bg-gray-500 opacity-75"
+				<div
-          data-id="modal_backdrop" />
+					class="absolute inset-0 bg-gray-500 opacity-75"
-      </div>
+					data-id="modal_backdrop"
-      <span
+				/>
-        class="hidden sm:inline-block sm:align-middle sm:h-screen"
+			</div>
-        aria-hidden="true">&#8203;</span>
+			<span
-      <div
+				class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        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"
+				aria-hidden="true">&#8203;</span
-        role="dialog"
+			>
-        aria-modal="true"
+			<div
-        aria-labelledby="modal-headline">
+				class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+				role="dialog"
-          <div class="sm:flex sm:items-start">
+				aria-modal="true"
-            <div
+				aria-labelledby="modal-headline"
-              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
+				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-                fill="currentColor"
+					<div class="">
-                class="h-6 w-6 text-blue-600"
+						<div
-                xmlns="http://www.w3.org/2000/svg"
+							class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
-                viewBox="0 0 24 24"
+						>
-                width="24"
+							<svg
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
+								fill="currentColor"
-                <path
+								class="h-6 w-6 text-blue-600"
-                  d="M14 20v2H2v-2h12zM14.586.686l7.778 7.778L20.95 9.88l-1.06-.354L17.413 12l5.657 5.657-1.414 1.414L16 13.414l-2.404 2.404.283 1.132-1.415 1.414-7.778-7.778 1.415-1.414 1.13.282 6.294-6.293-.353-1.06L14.586.686z" /></svg>
+								xmlns="http://www.w3.org/2000/svg"
-            </div>
+								viewBox="0 0 24 24"
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+								width="24"
-              <h3 class="text-lg leading-6 font-medium">
+								height="24"
-                {$_('read-license')}
+								><path fill="none" d="M0 0h24v24H0z" />
-              </h3>
+								<path
-              <div class="mt-2 mb-6">
+									d="M14 20v2H2v-2h12zM14.586.686l7.778 7.778L20.95 9.88l-1.06-.354L17.413 12l5.657 5.657-1.414 1.414L16 13.414l-2.404 2.404.283 1.132-1.415 1.414-7.778-7.778 1.415-1.414 1.13.282 6.294-6.293-.353-1.06L14.586.686z"
-                <p class="text-sm text-gray-500">{currentlicense}</p>
+								/></svg
-              </div>
+							>
-              <div class="mt-2 mb-6">
+						</div>
-                <p class="text-sm text-gray-500">{licensetext}</p>
+						<div class="mt-3 sm:mt-0 sm:ml-4 sm:text-left">
-              </div>
+							<h3 class="text-lg leading-6 font-medium">
-            </div>
+								{$_("read-license")}
-          </div>
+							</h3>
-        </div>
+							<div class="mb-6">
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+								<p class="text-sm text-gray-500">{currentlicense}</p>
-          <button
+							</div>
-            on:click={() => {
+							<div class="mb-6">
-              modal_open = false;
+								<p class="text-sm text-gray-500">{licensetext}</p>
-            }}
+							</div>
-            type="button"
+						</div>
-            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">
+					</div>
-            {$_('close')}
+				</div>
-          </button>
+				<div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
-        </div>
+					<button
-      </div>
+						on:click={() => {
-    </div>
+							modal_open = false;
-  </div>
+						}}
 						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:w-auto sm:text-sm"
 					>
 						{$_("close")}
 					</button>
 				</div>
 			</div>
 		</div>
 	</div>
 {/if}
 <!-- /// -->
-<div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
+<section class="container p-5">
-  <div class="text-center mb-8">
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
-    <h1
+		{$_("about")}
-      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl">
+	</h4>
-      {$_('about')}
+	<p class="mt-2 mb-2">
-      🧾
+		Lauf für Kaya!
-    </h1>
+		<strong class="font-medium">
-    <p
+			{$_("by")}
-      class="mt-2 max-w-xl mx-auto text-xl lg:max-w-3xl lg:text-2xl text-gray-300">
+			<a href="https://odit.services" class="underline">ODIT.Services</a>
-      Lauf für Kaya!
+		</strong>
-      <strong class="text-white font-medium">
+		<br />
-        {$_('by')}
+		<span>{$_("lfk-is-os")}</span>
-        <a href="https://odit.services" class="underline">ODIT.Services</a>
+	</p>
-      </strong>
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
-      <br />
+		{$_("credits")}
-      <span class="text-lg">{$_('lfk-is-os')}</span>
+	</h4>
-    </p>
+	<p class="text-left">{$_("oss_credit_description")}</p>
-  </div>
+	<div class="mt-5 overflow-x-auto">
-</div>
+		{#await license_promise}
-
+			<p>{$_("licenses-are-being-loaded")}</p>
-<div class="pt-0 pb-16 overflow-hidden lg:pt-12 lg:py-24">
+		{:then}
-  <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+			<table class="font-mono">
-    <h2 class="text-4xl font-display font-semibold md:text-5xl">
+				<thead class="border-b border-gray-400">
-      {$_('credits')}
+					<tr class="odd:bg-white even:bg-gray-100">
-    </h2>
+						<th>{$_("dependency_name")}</th>
-    <div class="max-w-3xl mx-auto text-xl leading-8 font-medium mt-8">
+						<th>{$_("license")}</th>
-      <p class="text-center">{$_('oss_credit_description')}</p>
+						<th>{$_("repo_link")}</th>
-    </div>
+						<th>{$_("installed-version")}</th>
-    <div class="w-screen leading-8 pl-5 mt-5">
+						<th>{$_("author")}</th>
-      {#await license_promise}
+					</tr>
-        <p class="text-center w-full">{$_('licenses-are-being-loaded')}</p>
+				</thead>
-      {:then}
+				<tbody>
-        <table>
+					{#each licenses as l}
-          <thead>
+						<tr class="odd:bg-white even:bg-gray-100 *:p-2">
-            <tr>
+							<td>{l.name}</td>
-              <th>{$_('dependency_name')}</th>
+							<td>
-              <th>{$_('license')}</th>
+								<button
-              <th>{$_('repo_link')}</th>
+									class="underline cursor-pointer"
-              <th>{$_('installed-version')}</th>
+									on:click={() => {
-              <th>{$_('author')}</th>
+										modal_open = true;
-            </tr>
+										currentlicense = l.name + "@" + l.version;
-          </thead>
+										licensetext =
-          <tbody>
+											l.licensetext || $_("no-license-text-could-be-found");
-            {#each licenses as l}
+									}}>{l.license || "?"}</button
-              <tr>
+								>
-                <td>{l.name}</td>
+							</td>
-                <td>
+							<td>
-                  {l.license || '?'}<br /><span
+								{(l.repo?.url || l.repo)
-                    class="underline cursor-pointer"
+									.replace("git+", "")
-                    on:click={() => {
+									.replace("git://", "")}
-                      modal_open = true;
+							</td>
-                      currentlicense = l.name + '@' + l.version;
+							<td>{l.version || "?"}</td>
-                      licensetext = l.licensetext || $_('no-license-text-could-be-found');
+							<td>{l.author?.name || l.author || "?"}</td>
-                    }}>{$_('read-license')}</span>
+						</tr>
-                </td>
+					{/each}
-                <td>
+				</tbody>
-                  {(l.repo?.url || l.repo)
+			</table>
-                    .replace('git+', '')
+		{:catch error}
-                    .replace('git://', '')}
+			<div
-                </td>
+				class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500"
-                <td>{l.version || '?'}</td>
+			>
-                <td>{l.author?.name || l.author || '?'}</td>
+				<span class="inline-block align-middle mr-8">
-              </tr>
+					<b class="capitalize">{$_("general_promise_error")}</b>
-            {/each}
+					{error}
-          </tbody>
+				</span>
-        </table>
+			</div>
-      {:catch error}
+		{/await}
-        <div
+	</div>
-          class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+	<div class="w-full mt-8">
-          <span class="inline-block align-middle mr-8">
+		<p class="font-medium">{$_("icon-image-credits")}</p>
-            <b class="capitalize">{$_('general_promise_error')}</b>
+		<ul class="list-disc ml-6">
-            {error}
+			<li>
-          </span>
+				<a
-        </div>
+					class="underline"
-      {/await}
+					target="_blank"
-    </div>
+					rel="noopener noreferrer"
-    <div class="w-full leading-8 mt-8">
+					href="https://storyset.com">https://storyset.com</a
-      <p class="text-xl font-medium">{$_('icon-image-credits')}</p>
+				>
-      <ul class="list-disc">
+			</li>
-        <li>
+			<li>
-          <a
+				<a
-            class="underline"
+					class="underline"
-            target="_blank"
+					target="_blank"
-            rel="noopener noreferrer"
+					rel="noopener noreferrer"
-            href="https://storyset.com">https://storyset.com</a>
+					href="https://undraw.co">https://undraw.co</a
-        </li>
+				>
-        <li>
+			</li>
-          <a
+			<li>
-            class="underline"
+				<a
-            target="_blank"
+					class="underline"
-            rel="noopener noreferrer"
+					target="_blank"
-            href="https://undraw.co">https://undraw.co</a>
+					rel="noopener noreferrer"
-        </li>
+					href="https://remixicon.com">https://remixicon.com</a
-        <li>
+				>
-          <a
+			</li>
-            class="underline"
+		</ul>
-            target="_blank"
+	</div>
-            rel="noopener noreferrer"
+</section>
            href="https://remixicon.com">https://remixicon.com</a>
        </li>
      </ul>
    </div>
  </div>
 </div>
--- a/src/components/general/Footer.svelte
+++ b/src/components/general/Footer.svelte
@@ -20,27 +20,32 @@
      class="underline"
      href="https://odit.services"
      rel="noopener,noreferrer"
-      target="_blank">ODIT.Services</a>
+      target="_blank">ODIT.Services</a
    >
  </p>
  <p class="text-sm text-gray-500 mt-4">
    <a
      class="underline"
      target="_blank"
      rel="noopener, noreferrer"
-      href="https://git.odit.services/lfk/frontend/">LfK!Frontend</a>@<a
+      href="https://git.odit.services/lfk/frontend/">LfK!Frontend</a
    >@<a
      class="underline"
      target="_blank"
      rel="noopener, noreferrer"
-      href="https://git.odit.services/lfk/frontend/src/tag/{releaseinfo}">{releaseinfo}</a>
+      href="https://git.odit.services/lfk/frontend/src/tag/{releaseinfo}"
      >{releaseinfo}</a
    >
    -
    <a
      rel="noopener, noreferrer"
      class="underline"
      href="https://docs.lauf-fuer-kaya.de"
-      target="_blank">{$_('documentation')}</a>
+      target="_blank">{$_("documentation")}</a
    >
    -
-    <a class="underline" href="/privacy">{$_('privacy')}</a>
+    <a class="underline" href="/privacy">{$_("privacy")}</a>
    -
-    <a class="underline" href="/imprint">{$_('imprint')}</a>
+    <a class="underline" href="/imprint">{$_("imprint")}</a>
  </p>
 </footer>
--- a/src/components/general/Imprint.svelte
+++ b/src/components/general/Imprint.svelte
@@ -1,20 +1,20 @@
 <script>
  import { _, getLocaleFromNavigator } from "svelte-i18n";
-  import marked from "marked";
+  import { parse } from "marked";
  import Footer from "./Footer.svelte";
-  import * as css from "../base/simple.css";
+  // import * as css from "../base/simple.css";
  let html = "";
  async function load() {
    let md = await fetch("/imprint_" + getLocaleFromNavigator() + ".md");
    let text = (await md.text()).toString();
-    if(text.includes("<meta")){
+    if (text.includes("<meta")) {
-      md.ok=false
+      md.ok = false;
    }
    if (!md.ok) {
      md = await fetch("/imprint_en.md");
      text = await md.text();
    }
-    html = marked(text);
+    html = parse(text);
  }
  const promise = load();
 </script>
@@ -22,8 +22,9 @@
 <div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
  <div class="text-center mb-8">
    <h1
-      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl">
+      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl"
-      {$_('imprint')}
+    >
      {$_("imprint")}
    </h1>
  </div>
 </div>
@@ -31,16 +32,17 @@
 <div class="pt-0 pb-16 overflow-hidden lg:pt-12 lg:py-24">
  <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
    {#await promise}
-      <p class="text-center w-full">{$_('imprint-loading')}</p>
+      <p class="text-center w-full">{$_("imprint-loading")}</p>
    {:then}
      <div class="simplecontent">
        {@html html}
      </div>
    {:catch error}
      <div
-        class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+        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>
+          <b class="capitalize">{$_("general_promise_error")}</b>
          {error}
        </span>
      </div>
--- a/src/components/general/NotFound.svelte
+++ b/src/components/general/NotFound.svelte
@@ -4,19 +4,22 @@
 <body class="antialiased font-sans">
  <div class="flex min-h-screen">
-    <div class="w-full bg-white flex items-center justify-center ">
+    <div class="w-full bg-white flex items-center justify-center">
      <div class="max-w-sm m-8">
        <div class="text-black text-5xl md:text-15xl font-black">
-          {$_('404title')}
+          {$_("404title")}
        </div>
        <div class="w-16 h-1 bg-purple-light my-3 md:my-6" />
        <p
-          class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal">
+          class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal"
-          {$_('404message')}
+        >
          {$_("404message")}
        </p>
        <a
          href="/"
-          class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg">{$_('goback')}</a>
+          class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg"
          >{$_("goback")}</a
        >
      </div>
    </div>
  </div>
--- a/src/components/general/Privacy.svelte
+++ b/src/components/general/Privacy.svelte
@@ -1,20 +1,20 @@
 <script>
  import { _, getLocaleFromNavigator } from "svelte-i18n";
-  import marked from "marked";
+  import { parse } from "marked";
  import Footer from "./Footer.svelte";
  // import * as css from "../base/simple.css?inline";
  let html = "";
  async function load() {
    let md = await fetch("/privacy_" + getLocaleFromNavigator() + ".md");
    let text = (await md.text()).toString();
-    if(text.includes("<meta")){
+    if (text.includes("<meta")) {
-      md.ok=false
+      md.ok = false;
    }
    if (!md.ok) {
      md = await fetch("/privacy_en.md");
      text = await md.text();
    }
-    html = marked(text);
+    html = parse(text);
  }
  const promise = load();
 </script>
@@ -22,8 +22,9 @@
 <div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
  <div class="text-center mb-8">
    <h1
-      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl">
+      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl"
-      {$_('privacy')}
+    >
      {$_("privacy")}
    </h1>
  </div>
 </div>
@@ -31,16 +32,17 @@
 <div class="pt-0 pb-16 overflow-hidden lg:pt-12 lg:py-24">
  <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
    {#await promise}
-      <p class="text-center w-full">{$_('privacy-loading')}</p>
+      <p class="text-center w-full">{$_("privacy-loading")}</p>
    {:then}
      <div class="simplecontent">
        {@html html}
      </div>
    {:catch error}
      <div
-        class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+        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>
+          <b class="capitalize">{$_("general_promise_error")}</b>
          {error}
        </span>
      </div>
--- a/src/components/general/Sidebar.svelte
+++ b/src/components/general/Sidebar.svelte
@@ -4,26 +4,33 @@
 <div class="md:flex flex-col md:flex-row h-screen w-full">
  <div
-    class="flex flex-col w-full md:w-64 text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800 flex-shrink-0">
+    class="flex flex-col w-full md:w-64 text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800 flex-shrink-0"
  >
    <div
-      class="flex-shrink-0 px-8 py-4 flex flex-row items-center justify-between">
+      class="flex-shrink-0 px-8 py-4 flex flex-row items-center justify-between"
    >
      <a
        href="/#/test"
-        class="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline">Sidebar</a>
+        class="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline"
        >Sidebar</a
      >
      <button
-        class="rounded-lg md:hidden focus:outline-none focus:shadow-outline">
+        class="rounded-lg md:hidden focus:outline-none focus:shadow-outline"
      >
        <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
          {#if open}
            <path
              fill-rule="evenodd"
              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-              clip-rule="evenodd" />
+              clip-rule="evenodd"
            />
          {/if}
          {#if !open}
            <path
              fill-rule="evenodd"
              d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z"
-              clip-rule="evenodd" />
+              clip-rule="evenodd"
            />
          {/if}
        </svg>
      </button>
@@ -31,49 +38,63 @@
    <nav
      :class:block={open}
      :class:hidden={!open}
-      class="flex-grow md:block px-4 pb-4 md:pb-0 md:overflow-y-auto">
+      class="flex-grow md:block px-4 pb-4 md:pb-0 md:overflow-y-auto"
    >
      <a
        class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-gray-200 rounded-lg dark-mode:bg-gray-700 dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-        href="#">Blog</a>
+        href="#">Blog</a
      >
      <a
        class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-        href="#">Portfolio</a>
+        href="#">Portfolio</a
      >
      <a
        class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-        href="#">About</a>
+        href="#">About</a
      >
      <a
        class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-        href="#">Contact</a>
+        href="#">Contact</a
      >
      <div class="relative">
        <button
          on:click={() => {
            open = !open;
          }}
-          class="flex flex-row items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:block hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
+          class="flex flex-row items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:block hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
        >
          <span>Dropdown</span>
          <svg
            fill="currentColor"
            viewBox="0 0 20 20"
-            class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"><path
+            class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
            ><path
              fill-rule="evenodd"
              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-              clip-rule="evenodd" /></svg>
+              clip-rule="evenodd"
            /></svg
          >
        </button>
        <div
          class:block={open}
          class:hidden={!open}
-          class="absolute right-0 w-full mt-2 origin-top-right rounded-md shadow-lg">
+          class="absolute right-0 w-full mt-2 origin-top-right rounded-md shadow-lg"
        >
          <div
-            class="px-2 py-2 bg-white rounded-md shadow dark-mode:bg-gray-800">
+            class="px-2 py-2 bg-white rounded-md shadow dark-mode:bg-gray-800"
          >
            <a
              class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-              href="#">Link #1</a>
+              href="#">Link #1</a
            >
            <a
              class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-              href="#">Link #2</a>
+              href="#">Link #2</a
            >
            <a
              class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-              href="#">Link #3</a>
+              href="#">Link #3</a
            >
          </div>
        </div>
      </div>
--- a/src/components/groups/AddGroupModal.svelte
+++ b/src/components/groups/AddGroupModal.svelte
@@ -1,9 +1,8 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
  import Toastify from "toastify-js";
  import { UserGroupService } from "@odit/lfk-client-js";
  import toast from "svelte-french-toast";
  export let modal_open;
  export let current_groups;
  let description_input_value;
@@ -32,10 +31,7 @@
  function submit() {
    if (processed_last_submit === true) {
      processed_last_submit = false;
-      const toast = Toastify({
+      toast.loading($_("group-is-being-added"));
        text: $_('group-is-being-added'),
        duration: -1,
      }).showToast();
      let postdata = {
        name: name_input_value,
        description: description_input_value,
@@ -46,11 +42,8 @@
          description_input_value = "";
          modal_open = false;
          //
-          Toastify({
+          toast.dismiss();
-            text: $_('group-added'),
+          toast.success($_("group-added"));
            duration: 500,
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          }).showToast();
          current_groups.push(result);
          current_groups = current_groups;
        })
@@ -59,8 +52,6 @@
        })
        .finally(() => {
          processed_last_submit = true;
          //
          toast.hideToast();
        });
    }
  }
@@ -68,105 +59,124 @@
 {#if modal_open}
  <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
    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">
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
    >
      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div
          class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
+          data-id="modal_backdrop"
        />
      </div>
      <span
        class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span>
+        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"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
        role="dialog"
        aria-modal="true"
-        aria-labelledby="modal-headline">
+        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="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
          <div class="">
            <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">
+              class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 640 512"
                class="h-6 w-6 text-blue-600"
                fill="currentColor"
                width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                height="24"
                ><path fill="none" d="M0 0h24v24H0z" />
                <path
-                  d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
+                  d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
                /></svg
              >
            </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
              <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_('create-a-new-user-group')}
+                {$_("create-a-new-user-group")}
              </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                <p class="text-sm text-gray-500">
-                  {$_('please-provide-the-required-information-for-creating-a-new-user-group')}
+                  {$_(
                    "please-provide-the-required-information-for-creating-a-new-user-group"
                  )}
                </p>
              </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                <div class="col-span-6">
                  <label
                    for="firstname"
-                    class="block text-sm font-medium text-gray-700">{$_('name')}</label>
+                    class="block text-sm font-medium text-gray-700"
                    >{$_("name")}</label
                  >
                  <input
                    use:focus
                    autocomplete="off"
-                    placeholder="{$_('name')}"
+                    placeholder={$_("name")}
                    class:border-red-500={!isNameValid}
                    class:focus:border-red-500={!isNameValid}
                    class:focus:ring-red-500={!isNameValid}
                    bind:value={name_input_value}
                    type="text"
                    name="firstname"
-                    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" />
+                    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-neutral-800 rounded-md p-2"
                  />
                  {#if !isNameValid}
                    <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                      {$_('name-is-required')}
+                    >
                      {$_("name-is-required")}
                    </span>
                  {/if}
                </div>
                <div class="col-span-6">
                  <label
                    for="trackname"
-                    class="block text-sm font-medium text-gray-700">{$_('description-optional')}</label>
+                    class="block text-sm font-medium text-gray-700"
                    >{$_("description-optional")}</label
                  >
                  <input
                    autocomplete="off"
-                    placeholder="{$_('something-about-the-group')}"
+                    placeholder={$_("something-about-the-group")}
                    bind:value={description_input_value}
                    type="text"
                    name="trackname"
-                    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" />
+                    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-neutral-800 rounded-md p-2"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
          <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">
+            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"
-            {$_('create')}
+          >
            {$_("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">
+            class="w-full 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 hidden lg:block"
-            {$_('cancel')}
+          >
            {$_("cancel")}
          </button>
        </div>
      </div>
--- a/src/components/groups/GroupDetail.svelte
+++ b/src/components/groups/GroupDetail.svelte
@@ -1,220 +1,227 @@
 <script>
-  import { _ } from "svelte-i18n";
+	import { _ } from "svelte-i18n";
-  import store from "../../store";
+	import store from "../../store";
-  import {
+	import { UserGroupService } from "@odit/lfk-client-js";
-    UserGroupService
+	import toast from "svelte-french-toast";
-  } from "@odit/lfk-client-js";
+
-  import Toastify from "toastify-js";
+	import PromiseError from "../base/PromiseError.svelte";
-  import PromiseError from "../base/PromiseError.svelte";
+	let data_loaded = false;
-  let data_loaded = false;
+	export let params;
-  export let params;
+	const promise = UserGroupService.userGroupControllerGetOne(params.groupid);
-  const promise = UserGroupService.userGroupControllerGetOne(params.groupid);
+	const colors = [
-  const colors = [
+		"#f3558e",
-    "#f3558e",
+		"#17b978",
-    "#17b978",
+		"#3498db",
-    "#3498db",
+		"#3f3b3b",
-    "#3f3b3b",
+		"#775ada",
-    "#775ada",
+		"#7ed6df_#000000",
-    "#7ed6df_#000000",
+		"#000000",
-    "#000000",
+		"#21e6c1_#000000",
-    "#21e6c1_#000000",
+		"#c0392b",
-    "#c0392b",
+		"#d35400",
-    "#d35400",
+		"#7f8c8d",
-    "#7f8c8d",
+		"#6ab04c",
-    "#6ab04c",
+		"#4834d4",
-    "#4834d4",
+		"#ff1f5a",
-    "#ff1f5a",
+		"#eac100",
-    "#eac100",
+	];
-  ];
+	let matched_colors = [];
-  let matched_colors = [];
+	$: delete_triggered = false;
-  $: delete_triggered = false;
+	$: search_permission = "";
-  $: search_permission = "";
+	$: original_data = {};
-  $: original_data = {};
+	$: editable = {};
-  $: editable = {};
+	$: changes_performed = !(
-  $: changes_performed = !(JSON.stringify(original_data) == JSON.stringify(editable));
+		JSON.stringify(original_data) == JSON.stringify(editable)
-  $: isGroupnameValid = editable.name !== "";
+	);
-  $: save_enabled =
+	$: isGroupnameValid = editable.name !== "";
-    changes_performed && isGroupnameValid 
+	$: save_enabled = changes_performed && isGroupnameValid;
-  promise.then((data) => {
+	promise.then((data) => {
-    let current_target = "";
+		let current_target = "";
-    let colorindex = -1;
+		let colorindex = -1;
-    data.permissions = data.permissions.sort();
+		data.permissions = data.permissions.sort();
-    data.permissions.forEach((p) => {
+		data.permissions.forEach((p) => {
-      const target = p.split(":")[0];
+			const target = p.split(":")[0];
-      if (current_target !== p.split(":")[0]) {
+			if (current_target !== p.split(":")[0]) {
-        colorindex++;
+				colorindex++;
-        current_target = p.split(":")[0];
+				current_target = p.split(":")[0];
-      }
+			}
-      let background = colors[colorindex];
+			let background = colors[colorindex];
-      let foreground = "#fff";
+			let foreground = "#fff";
-      if (background.includes("_")) {
+			if (background.includes("_")) {
-        foreground = background.split("_")[1];
+				foreground = background.split("_")[1];
-        background = background.split("_")[0];
+				background = background.split("_")[0];
-      }
+			}
-      matched_colors[target] = [background, foreground];
+			matched_colors[target] = [background, foreground];
-    });
+		});
-    data_loaded = true;
+		data_loaded = true;
-    original_data = Object.assign(original_data, data);
+		original_data = Object.assign(original_data, data);
-    editable = Object.assign(editable, original_data);
+		editable = Object.assign(editable, original_data);
-  });
+	});
-  function submit() {
+	function submit() {
-    if (data_loaded === true && save_enabled) {
+		if (data_loaded === true && save_enabled) {
-      Toastify({
+			toast($_("updating-group"));
-        text: $_('updateing-group'),
+			UserGroupService.userGroupControllerPut(original_data.id, editable)
-        duration: 2500,
+				.then((resp) => {
-      }).showToast();
+					Object.assign(original_data, editable);
-      UserGroupService.userGroupControllerPut(original_data.id, editable)
+					original_data = editable;
-        .then((resp) => {
+					Object.assign(original_data, editable);
-          Object.assign(original_data, editable);
+					toast.success($_("group-updated"));
-          original_data = editable;
+				})
-          Object.assign(original_data, editable);
+				.catch((err) => {});
-          Toastify({
+		} else {
-            text: $_('group-updated'),
+		}
-            duration: 2500,
+	}
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+	function deleteGroup() {
-          }).showToast();
+		UserGroupService.userGroupControllerRemove(original_data.id, true)
-        })
+			.then((resp) => {
-        .catch((err) => {});
+				location.replace("./");
-    } else {
+			})
-    }
+			.catch((err) => {});
-  }
+	}
  function deleteGroup() {
    UserGroupService.userGroupControllerRemove(original_data.id, true)
      .then((resp) => {
        location.replace("./");
      })
      .catch((err) => {});
  }
 </script>
 {#await promise}
-  {$_('loading-group-detail')}
+	{$_("loading-group-detail")}
 {:then}
-  <section class="container p-5 select-none">
+	<section class="container p-5 select-none">
-    <div class="flex flex-row mb-4">
+		<div class="flex flex-row mb-4">
-      <div class="w-full">
+			<div class="w-full">
-        <nav class="w-full flex">
+				<nav class="w-full flex">
-          <ol class="list-none flex flex-row items-center justify-start">
+					<ol class="list-none flex flex-row items-center justify-start">
-            <li class="flex items-center">
+						<li class="flex items-center"></li>
-              <svg class="flex-shrink-0 w-5 h-5 mr-2" fill="currentColor" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"></path></svg>
+						<li class="flex items-center">
-            </li>
+							<a class="mr-2" href="../"
-            <li class="flex items-center">
+								><svg
-              <a class="mr-2" href="../">{$_('groups')}</a><svg
+									xmlns="http://www.w3.org/2000/svg"
-                stroke="currentColor"
+									width="24"
-                fill="none"
+									height="24"
-                stroke-width="2"
+									viewBox="0 0 24 24"
-                viewBox="0 0 24 24"
+									fill="none"
-                stroke-linecap="round"
+									stroke="currentColor"
-                stroke-linejoin="round"
+									stroke-width="2"
-                class="h-3 w-3 mr-2 stroke-current"
+									stroke-linecap="round"
-                height="1em"
+									stroke-linejoin="round"
-                width="1em"
+									class="inline-block"
-                xmlns="http://www.w3.org/2000/svg"><line
+									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
-                  x1="5"
+								>
-                  y1="12"
+								{$_("groups")}</a
-                  x2="19"
+							>
-                  y2="12" />
+						</li>
-                <polyline points="12 5 19 12 12 19" /></svg>
+					</ol>
-            </li>
+				</nav>
-            <li class="flex items-center">
+			</div>
-              <span class="mr-2">{editable.name}</span>
+		</div>
-            </li>
+		<div class="mb-4 text-3xl font-extrabold leading-tight">
-          </ol>
+			{editable.name}
-        </nav>
+			<div data-id="group_actions_${editable.id}">
-      </div>
+				{#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:DELETE")}
-    </div>
+					{#if delete_triggered}
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
+						<button
-      {original_data.name}
+							on:click={deleteGroup}
-      <span data-id="group_actions_${editable.id}">
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-        {#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:DELETE')}
+							>{$_("confirm-deletion")}</button
-          {#if delete_triggered}
+						>
-            <button
+						<button
-              on:click={deleteGroup}
+							on:click={() => {
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('confirm-deletion')}</button>
+								delete_triggered = !delete_triggered;
-            <button
+							}}
-              on:click={() => {
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
-                delete_triggered = !delete_triggered;
+							>{$_("cancel")}</button
-              }}
+						>
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
+					{/if}
-          {/if}
+					{#if !delete_triggered}
-          {#if !delete_triggered}
+						<button
-            <button
+							on:click={() => {
-              on:click={() => {
+								delete_triggered = true;
-                delete_triggered = true;
+							}}
-              }}
+							type="button"
-              type="button"
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-group')}</button>
+							>{$_("delete-group")}</button
-          {/if}
+						>
-        {/if}
+					{/if}
-        {#if !delete_triggered}
+				{/if}
-          <button
+				{#if !delete_triggered}
-            disabled={!save_enabled}
+					<button
-            class:opacity-50={!save_enabled}
+						disabled={!save_enabled}
-            type="button"
+						class:opacity-50={!save_enabled}
-            on:click={submit}
+						type="button"
-            class="w-full 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">{$_('save-changes')}</button>
+						on:click={submit}
-        {/if}
+						class="w-full 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:w-auto sm:text-sm mb-1 lg:mb-0"
-      </span>
+						>{$_("save-changes")}</button
-    </div>
+					>
-    <!--  -->
+				{/if}
-    <div class="text-sm w-full">
+			</div>
-      <label
+		</div>
-        for="title"
+		<!--  -->
-        class="font-medium text-gray-700">{$_('name')}</label>
+		<div class="text-sm w-full mt-2">
-      <input
+			<label for="title" class="font-semibold text-gray-700">{$_("name")}</label
-        autocomplete="off"
+			>
-        placeholder={$_('name')}
+			<input
-        type="text"
+				autocomplete="off"
-        bind:value={editable.name}
+				placeholder={$_("name")}
-        class:border-red-500={!isGroupnameValid}
+				type="text"
-        class:focus:border-red-500={!isGroupnameValid}
+				bind:value={editable.name}
-        class:focus:ring-red-500={!isGroupnameValid}
+				class:border-red-500={!isGroupnameValid}
-        name="title"
+				class:focus:border-red-500={!isGroupnameValid}
-        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" />
+				class:focus:ring-red-500={!isGroupnameValid}
-      {#if !isGroupnameValid}
+				name="title"
-        <span
+				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-neutral-800 rounded-md p-2"
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+			/>
-          {$_('group-name-is-required')}
+			{#if !isGroupnameValid}
-        </span>
+				<span
-      {/if}
+					class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-    </div>
+				>
-    <div class="text-sm w-full">
+					{$_("group-name-is-required")}
-      <label
+				</span>
-        for="firstname"
+			{/if}
-        class="font-medium text-gray-700">{$_('description')}</label>
+		</div>
-      <input
+		<div class="text-sm w-full mt-2">
-        autocomplete="off"
+			<label for="groupdescription" class="font-semibold text-gray-700"
-        placeholder={$_('description')}
+				>{$_("description")}</label
-        type="text"
+			>
-        bind:value={editable.description}
+			<input
-        name="firstname"
+				autocomplete="off"
-        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" />
+				placeholder={$_("description")}
-    </div>
+				type="text"
-    <div class="text-sm w-full mt-8">
+				bind:value={editable.description}
-      <p class="font-medium mb-4">
+				name="groupdescription"
-        {$_('permissions')}
+				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-neutral-800 rounded-md p-2"
-        <a
+			/>
-          class="px-4 py-2 bg-gray-500 rounded-md text-white"
+		</div>
-          href="/groups/{params.groupid}/permissions/">{$_('edit-permissions')}</a>
+		<div class="text-sm w-full mt-2">
-      </p>
+			<p class="font-semibold mb-4">
-      <div class="w-full sm:my-px sm:px-px sm:w-1/2">
+				{$_("permissions")}
-        <input
+			</p>
-          autocomplete="off"
+			<div>
-          placeholder="{$_('search-for-permission')}"
+				<a
-          type="text"
+					class="px-4 py-2 bg-gray-500 rounded-md text-white"
-          bind:value={search_permission}
+					href="/groups/{params.groupid}/permissions/"
-          class="mt-4 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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
+					>{$_("edit-permissions")}</a
-      </div>
+				>
-      {#each original_data.permissions as p}
+			</div>
-        {#if p.toLowerCase().includes(search_permission.toLowerCase())}
+			<div class="w-full sm:my-px sm:px-px sm:w-1/2">
-          <span
+				<input
-            style="background:{matched_colors[p.split(':')[0]][0]};color:{matched_colors[p.split(':')[0]][1]};"
+					autocomplete="off"
-            class="mt-1 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-indigo-100 rounded">{p}</span>
+					placeholder={$_("search-for-permission")}
-          <!--  -->
+					type="text"
-        {/if}
+					bind:value={search_permission}
-      {/each}
+					class="mt-4 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-neutral-800 rounded-md p-2"
-    </div>
+				/>
-  </section>
+			</div>
 			{#each original_data.permissions as p}
 				{#if p.toLowerCase().includes(search_permission.toLowerCase())}
 					<span
 						style="background:{matched_colors[
 							p.split(':')[0]
 						][0]};color:{matched_colors[p.split(':')[0]][1]};"
 						class="mt-1 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-indigo-100 rounded"
 						>{p}</span
 					>
 					<!--  -->
 				{/if}
 			{/each}
 		</div>
 	</section>
 {:catch error}
-  <PromiseError {error} />
+	<PromiseError {error} />
 {/await}
--- a/src/components/groups/GroupPermissions.svelte
+++ b/src/components/groups/GroupPermissions.svelte
@@ -3,9 +3,10 @@
  import {
    PermissionService,
    CreatePermission,
-UserGroupService,
+    UserGroupService,
  } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+  import toast from 'svelte-french-toast'
  import PromiseError from "../base/PromiseError.svelte";
  export let params;
  let [
@@ -20,15 +21,14 @@ UserGroupService,
  $: save_enabled =
    JSON.stringify(grantedPermissions) ===
    JSON.stringify(grantedPermissions_initial);
-  const group_promise = UserGroupService.userGroupControllerGetOne(params.groupid);
+  const group_promise = UserGroupService.userGroupControllerGetOne(
    params.groupid
  );
  group_promise.then((data) => {
    original_data = Object.assign(original_data, data);
  });
  function submit() {
-    Toastify({
+    toast.loading($_("updating-permissions"));
      text: $_('updating-permissions'),
      duration: 2500,
    }).showToast();
    to_delete.forEach((d) => {
      promises = promises.concat([
        PermissionService.permissionControllerRemove(d, true),
@@ -50,11 +50,7 @@ UserGroupService,
        );
      });
      grantedPermissions_initial = grantedPermissions;
-      Toastify({
+      toast.success($_("permissions-updated"));
        text: $_("permissions-updated"),
        duration: 2500,
        backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
      }).showToast();
    });
  }
  Object.values(CreatePermission.target).forEach((t) => {
@@ -62,13 +58,15 @@ UserGroupService,
      allpermissions = allpermissions.concat([{ target: t, action: a }]);
    });
  });
-  UserGroupService.userGroupControllerGetPermissions(params.groupid).then((val) => {
+  UserGroupService.userGroupControllerGetPermissions(params.groupid).then(
-    val.directlyGranted.forEach((p) => {
+    (val) => {
-      delete p.responseType;
+      val.directlyGranted.forEach((p) => {
-      grantedPermissions = grantedPermissions.concat([p]);
+        delete p.responseType;
-    });
+        grantedPermissions = grantedPermissions.concat([p]);
-    grantedPermissions_initial = grantedPermissions;
+      });
-  });
+      grantedPermissions_initial = grantedPermissions;
    }
  );
 </script>
 {#await group_promise}
@@ -86,12 +84,15 @@ UserGroupService,
                width="24"
                height="24"
                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 640 512"><path
+                viewBox="0 0 640 512"
                ><path
                  fill="currentColor"
-                  d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
+                  d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
                /></svg
              >
            </li>
            <li class="flex items-center">
-              <a class="mr-2" href="../../">{$_('user-groups')}</a><svg
+              <a class="mr-2" href="../../">{$_("user-groups")}</a><svg
                stroke="currentColor"
                fill="none"
                stroke-width="2"
@@ -101,12 +102,10 @@ UserGroupService,
                class="h-3 w-3 mr-2 stroke-current"
                height="1em"
                width="1em"
-                xmlns="http://www.w3.org/2000/svg"><line
+                xmlns="http://www.w3.org/2000/svg"
-                  x1="5"
+                ><line x1="5" y1="12" x2="19" y2="12" />
-                  y1="12"
+                <polyline points="12 5 19 12 12 19" /></svg
-                  x2="19"
+              >
                  y2="12" />
                <polyline points="12 5 19 12 12 19" /></svg>
            </li>
            <li class="flex items-center">
              <span class="mr-2"><a href="../">{original_data.name}</a></span>
@@ -122,45 +121,45 @@ UserGroupService,
                class="h-3 w-3 mr-2 stroke-current"
                height="1em"
                width="1em"
-                xmlns="http://www.w3.org/2000/svg"><line
+                xmlns="http://www.w3.org/2000/svg"
-                  x1="5"
+                ><line x1="5" y1="12" x2="19" y2="12" />
-                  y1="12"
+                <polyline points="12 5 19 12 12 19" /></svg
-                  x2="19"
+              >
                  y2="12" />
                <polyline points="12 5 19 12 12 19" /></svg>
            </li>
            <li class="flex items-center">
-              <span class="mr-2">{$_('permissions')}</span>
+              <span class="mr-2">{$_("permissions")}</span>
            </li>
          </ol>
        </nav>
      </div>
    </div>
-    <div class="mb-8 text-3xl font-extrabold">
+    <div class="mb-4 text-3xl font-extrabold">
-      {$_('permissions')}:
+      <div>
      {original_data.name}
      <span>
        {#if promises.length === 0}
          <button
            disabled={save_enabled}
            class:opacity-50={save_enabled}
            type="button"
            on:click={submit}
-            class="w-full 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">{$_('save-changes')}</button>
+            class="w-full 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:w-auto sm:text-sm mb-1 lg:mb-0"
            >{$_("save-changes")}</button
          >
        {:else}
          <button
            type="button"
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-yellow-600 text-base font-medium text-white hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('applying-changes')}</button>
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-yellow-600 text-base font-medium text-white hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 sm:w-auto sm:text-sm"
            >{$_("applying-changes")}</button
          >
        {/if}
-      </span>
+      </div>
    </div>
    <!--  -->
    <div class="flex flex-wrap -mx-1 overflow-hidden">
      <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
-        {$_('verfuegbare')}
+        {$_("available-permissions")}
      </div>
      <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
-        {$_('granted')}
+        {$_("granted")}
      </div>
    </div>
    <!--  -->
@@ -168,12 +167,14 @@ UserGroupService,
      {#if allpermissions.length > 0}
        <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
          <div
-            class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
+            class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center"
          >
            {#each allpermissions as p}
-              {#if !(grantedPermissions.filter((o)=>p.target == o.target && p.action == o.action).length > 0)}
+              {#if !(grantedPermissions.filter((o) => p.target == o.target && p.action == o.action).length > 0)}
                <p
-                  class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
+                  class="block w-full mt-1 text-sm bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input"
-                  {p.target + ':' + p.action}
+                >
                  {p.target + ":" + p.action}
                  <button
                    on:click={() => {
                      grantedPermissions = grantedPermissions.concat([p]);
@@ -190,7 +191,9 @@ UserGroupService,
                      }
                    }}
                    type="button"
-                    class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-200 text-base font-medium text-black hover:bg-green-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm">+</button>
+                    class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-200 text-base font-medium text-black hover:bg-green-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:w-auto sm:text-sm"
                    >+</button
                  >
                </p>
              {/if}
            {/each}
@@ -198,22 +201,39 @@ UserGroupService,
        </div>
        <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
          <div
-            class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
+            class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center"
          >
            {#each grantedPermissions as p}
              <p
-                class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
+                class="block w-full mt-1 text-sm bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input"
-                {p.target + ':' + p.action}
+              >
                {p.target + ":" + p.action}
                <button
                  on:click={() => {
-                    grantedPermissions = grantedPermissions.filter((o) => o.target + ':' + o.action !== p.target + ':' + p.action);
+                    grantedPermissions = grantedPermissions.filter(
-                    if (to_add.some((o) => o.target + ':' + o.action === p.target + ':' + p.action)) {
+                      (o) =>
-                      to_add = to_add.filter((o) => o.target + ':' + o.action !== p.target + ':' + p.action);
+                        o.target + ":" + o.action !== p.target + ":" + p.action
                    );
                    if (
                      to_add.some(
                        (o) =>
                          o.target + ":" + o.action ===
                          p.target + ":" + p.action
                      )
                    ) {
                      to_add = to_add.filter(
                        (o) =>
                          o.target + ":" + o.action !==
                          p.target + ":" + p.action
                      );
                    } else {
                      to_delete = to_delete.concat([p.id]);
                    }
                  }}
                  type="button"
-                  class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-300 text-base font-medium text-black hover:bg-red-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">-</button>
+                  class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-300 text-base font-medium text-black hover:bg-red-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:w-auto sm:text-sm"
                  >-</button
                >
              </p>
            {/each}
          </div>
--- a/src/components/groups/Groups.svelte
+++ b/src/components/groups/Groups.svelte
@@ -8,22 +8,23 @@
 </script>
 <section class="container p-5">
-  <span class="mb-1 text-3xl font-extrabold leading-tight">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
-    {$_('user-groups')}
+    {$_("user-groups")}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:CREATE')}
+  </h4>
-      <button
+  {#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:CREATE")}
-        on:click={() => {
+    <button
-          modal_open = true;
+      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">
+      type="button"
-        {$_('add-user-group')}
+      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:w-auto sm:text-sm"
-      </button>
+    >
-    {/if}
+      {$_("add-user-group")}
-  </span>
+    </button>
  {/if}
  <UserGroupsOverview bind:current_groups />
 </section>
-{#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:CREATE')}
+{#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:CREATE")}
  <AddGroupModal bind:current_groups bind:modal_open />
 {/if}
--- a/src/components/groups/UserGroupsEmptyState.svelte
+++ b/src/components/groups/UserGroupsEmptyState.svelte
@@ -6,7 +6,7 @@
 <div class="text-center items-center justify-center">
  <p class="mb-16 text-lg text-gray-500">
    <img class="w-full h-44" src={groups_empty} alt="" />
-    <span class="font-bold">{$_('there-are-no-groups-yet')}.</span><br />
+    <span class="font-bold">{$_("there-are-no-groups-yet")}.</span><br />
-    <span>{$_('add-your-first-group')}</span>
+    <span>{$_("add-your-first-group")}</span>
  </p>
 </div>
--- a/src/components/groups/UserGroupsOverview.svelte
+++ b/src/components/groups/UserGroupsOverview.svelte
@@ -13,13 +13,14 @@
  );
 </script>
-{#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:GET')}
+{#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:GET")}
  {#await groups_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">
+      role="alert"
-      <p class="font-bold">{$_('groups-are-being-loaded')}</p>
+    >
-      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+      <p class="font-bold">{$_("groups-are-being-loaded")}</p>
      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
    </div>
  {:then}
    {#if current_groups.length === 0}
@@ -28,26 +29,30 @@
      <input
        type="search"
        bind:value={searchvalue}
-        placeholder={$_('datatable.search')}
+        placeholder={$_("datatable.search")}
-        aria-label={$_('datatable.search')}
+        aria-label={$_("datatable.search")}
-        class="mb-4" />
+        class="mb-2 w-full sm:w-auto mt-1 sm:mt-0 p-2 rounded-md border"
      />
      <div
-        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
+        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>
+            <tr class="odd:bg-white even:bg-gray-100">
              <th
                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                {$_('name')}
+              >
                {$_("name")}
              </th>
              <th
                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                {$_('description')}
+              >
                {$_("description")}
              </th>
              <th scope="col" class="relative px-6 py-3">
-                <span class="sr-only">{$_('action')}</span>
+                <span class="sr-only">{$_("action")}</span>
              </th>
            </tr>
          </thead>
@@ -57,7 +62,10 @@
                .toString()
                .toLowerCase()
                .includes(searchvalue)}
-                <tr data-rowid="user_{group.id}">
+                <tr
                  class="odd:bg-white even:bg-gray-100"
                  data-rowid="user_{group.id}"
                >
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="ml-4">
@@ -72,39 +80,53 @@
                  </td>
                  {#if active_deletes[group.id] === true}
                    <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
                    >
                      <button
                        on:click={() => {
                          active_deletes[group.id] = false;
                        }}
                        tabindex="0"
-                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
                        >{$_("cancel-delete")}</button
                      >
                      <button
                        on:click={() => {
-                          UserGroupService.userGroupControllerRemove(group.id, true)
+                          UserGroupService.userGroupControllerRemove(
                            group.id,
                            true
                          )
                            .then((resp) => {
-                              current_groups = current_groups.filter((obj) => obj.id !== group.id);
+                              current_groups = current_groups.filter(
                                (obj) => obj.id !== group.id
                              );
                            })
                            .catch((err) => {
                              // error deleting user
                            });
                        }}
                        tabindex="0"
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
+                        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">
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
                    >
                      <a
                        href="./{group.id}"
-                        class="text-indigo-600 hover:text-indigo-900">Details</a>
+                        class="text-indigo-600 hover:text-indigo-900">Details</a
-                      {#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:DELETE')}
+                      >
                      {#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:DELETE")}
                        <button
                          on:click={() => {
                            active_deletes[group.id] = true;
                          }}
                          tabindex="0"
-                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
                          >{$_("delete")}</button
                        >
                      {/if}
                    </td>
                  {/if}
@@ -118,7 +140,7 @@
  {: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>
+        <b class="capitalize">{$_("general_promise_error")}</b>
        {error}
      </span>
    </div>
--- a/src/components/orgs/AddOrgModal.svelte
+++ b/src/components/orgs/AddOrgModal.svelte
@@ -3,7 +3,8 @@
  import { clickOutside } from "../base/outsideclick";
  import { RunnerOrganizationService } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+
  import toast from "svelte-french-toast";
  export let modal_open;
  export let current_organizations;
  let name_input_dom;
@@ -24,7 +25,7 @@
  $: address_input2_value = "";
  $: address_zipcode_value = "";
  $: address_city_value = "";
-  $: address_checked = true;
+  $: address_checked = false;
  let address_input1;
  let address_input2;
@@ -48,10 +49,7 @@
  function submit() {
    if (processed_last_submit === true) {
      processed_last_submit = false;
-      const toast = Toastify({
+      toast.loading($_("organization-is-being-added"));
        text: $_("organization-is-being-added"),
        duration: -1,
      }).showToast();
      let address = {};
      if (address_checked === true) {
        address = {
@@ -70,17 +68,13 @@
        .then((result) => {
          name = "";
          modal_open = false;
-          Toastify({
+          toast.dismiss();
-            text: $_("organization-added"),
+          toast.success($_("organization-added"));
            duration: 500,
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          }).showToast();
          current_organizations = current_organizations.concat([result]);
        })
        .catch((err) => {})
        .finally(() => {
          processed_last_submit = true;
          toast.hideToast();
        });
    }
  }
@@ -88,58 +82,70 @@
 {#if modal_open}
  <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
    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">
+      class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
    >
      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div
          class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
+          data-id="modal_backdrop"
        />
      </div>
      <span
        class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span>
+        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"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
        role="dialog"
        aria-modal="true"
-        aria-labelledby="modal-headline">
+        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="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
          <div class="">
            <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">
+              class="flex-shrink-0 flex items-center justify-center size-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
+                height="24"
-                  d="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z" /></svg>
+                ><path
                  d="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z"
                /></svg
              >
            </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div class="mt-3 sm:text-left">
              <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_('create-a-new-organization')}
+                {$_("create-a-new-organization")}
              </h3>
-              <div class="mt-2 mb-6">
+              <div class="mb-6">
                <p class="text-sm text-gray-500">
-                  {$_('please-provide-the-required-information-to-add-a-new-organization')}
+                  {$_(
                    "please-provide-the-required-information-to-add-a-new-organization"
                  )}
                </p>
              </div>
-              <div class="grid grid-cols-6 gap-6">
+              <div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
                <div class="col-span-6">
                  <label
                    for="firstname"
-                    class="block text-sm font-medium text-gray-700">{$_('name')}</label>
+                    class="block text-sm font-medium text-gray-700"
                    >{$_("name")}</label
                  >
                  <input
                    use:focus
                    autocomplete="off"
-                    placeholder={$_('name')}
+                    placeholder={$_("name")}
                    class:border-red-500={!isOrgnameValid}
                    class:focus:border-red-500={!isOrgnameValid}
                    class:focus:ring-red-500={!isOrgnameValid}
@@ -147,11 +153,13 @@
                    bind:this={name_input_dom}
                    type="text"
                    name="firstname"
-                    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" />
+                    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-neutral-800 rounded-md p-2"
                  />
                  {#if !isOrgnameValid}
                    <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                      {$_('organization-name-is-required')}
+                    >
                      {$_("organization-name-is-required")}
                    </span>
                  {/if}
                </div>
@@ -162,115 +170,133 @@
                      id="comments"
                      name="comments"
                      type="checkbox"
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
                    />
                  </div>
                  <div class="ml-3 text-sm">
-                    <label
+                    <label for="comments" class="font-semibold text-gray-700"
-                      for="comments"
+                      >{$_("address")}</label
-                      class="font-medium text-gray-700">{$_('address')}</label>
+                    >
                  </div>
                </div>
-              {#if address_checked === true}
+                {#if address_checked === true}
-                <div class="col-span-6">
+                  <div class="col-span-6">
-                  <label
+                    <label
-                    for="address1"
+                      for="address1"
-                    class="block text-sm font-medium text-gray-700">{$_('address')}</label>
+                      class="block text-sm font-medium text-gray-700"
-                  <input
+                      >{$_("address")}</label
-                    autocomplete="off"
+                    >
-                    placeholder="{$_('address')}"
+                    <input
-                    class:border-red-500={!isAddress1Valid}
+                      autocomplete="off"
-                    class:focus:border-red-500={!isAddress1Valid}
+                      placeholder={$_("address")}
-                    class:focus:ring-red-500={!isAddress1Valid}
+                      class:border-red-500={!isAddress1Valid}
-                    bind:value={address_input1_value}
+                      class:focus:border-red-500={!isAddress1Valid}
-                    bind:this={address_input1}
+                      class:focus:ring-red-500={!isAddress1Valid}
-                    type="text"
+                      bind:value={address_input1_value}
-                    name="address1"
+                      bind:this={address_input1}
-                    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" />
+                      type="text"
-                  {#if !isAddress1Valid}
+                      name="address1"
-                    <span
+                      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-neutral-800 rounded-md p-2"
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                    />
-                      {$_('address-is-required')}
+                    {#if !isAddress1Valid}
-                    </span>
+                      <span
-                  {/if}
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                </div>
+                      >
-                <div class="col-span-6">
+                        {$_("address-is-required")}
-                  <label
+                      </span>
-                    for="address2"
+                    {/if}
-                    class="block text-sm font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
+                  </div>
-                  <input
+                  <div class="col-span-6">
-                    autocomplete="off"
+                    <label
-                    placeholder="{$_('apartment-suite-etc')}"
+                      for="address2"
-                    bind:value={address_input2_value}
+                      class="block text-sm font-medium text-gray-700"
-                    bind:this={address_input2}
+                      >{$_("apartment-suite-etc")}</label
-                    type="text"
+                    >
-                    name="address2"
+                    <input
-                    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" />
+                      autocomplete="off"
-                </div>
+                      placeholder={$_("apartment-suite-etc")}
-                <div class="col-span-6">
+                      bind:value={address_input2_value}
-                  <label
+                      bind:this={address_input2}
-                    for="zipcode"
+                      type="text"
-                    class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
+                      name="address2"
-                  <input
+                      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-neutral-800 rounded-md p-2"
-                    autocomplete="off"
+                    />
-                    placeholder="{$_('zip-postal-code')}"
+                  </div>
-                    class:border-red-500={!iszipcodevalid}
+                  <div class="col-span-2">
-                    class:focus:border-red-500={!iszipcodevalid}
+                    <label
-                    class:focus:ring-red-500={!iszipcodevalid}
+                      for="zipcode"
-                    bind:value={address_zipcode_value}
+                      class="block text-sm font-medium text-gray-700"
-                    bind:this={address_zipcode}
+                      >{$_("zip-postal-code")}</label
-                    type="text"
+                    >
-                    name="zipcode"
+                    <input
-                    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" />
+                      autocomplete="off"
-                  {#if !iszipcodevalid}
+                      placeholder={$_("zip-postal-code")}
-                    <span
+                      class:border-red-500={!iszipcodevalid}
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      class:focus:border-red-500={!iszipcodevalid}
-                      {$_('valid-zipcode-postal-code-is-required')}
+                      class:focus:ring-red-500={!iszipcodevalid}
-                    </span>
+                      bind:value={address_zipcode_value}
-                  {/if}
+                      bind:this={address_zipcode}
-                </div>
+                      type="text"
-                <div class="col-span-6">
+                      name="zipcode"
-                  <label
+                      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-neutral-800 rounded-md p-2"
-                    for="city"
+                    />
-                    class="block text-sm font-medium text-gray-700">{$_('city')}</label>
+                    {#if !iszipcodevalid}
-                  <input
+                      <span
-                    autocomplete="off"
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                    placeholder="{$_('city')}"
+                      >
-                    class:border-red-500={!iscityvalid}
+                        {$_("valid-zipcode-postal-code-is-required")}
-                    class:focus:border-red-500={!iscityvalid}
+                      </span>
-                    class:focus:ring-red-500={!iscityvalid}
+                    {/if}
-                    bind:value={address_city_value}
+                  </div>
-                    bind:this={address_city}
+                  <div class="col-span-4">
-                    type="text"
+                    <label
-                    name="city"
+                      for="city"
-                    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" />
+                      class="block text-sm font-medium text-gray-700"
-                  {#if !iscityvalid}
+                      >{$_("city")}</label
-                    <span
+                    >
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                    <input
-                      {$_('valid-city-is-required')}
+                      autocomplete="off"
-                    </span>
+                      placeholder={$_("city")}
-                  {/if}
+                      class:border-red-500={!iscityvalid}
-                </div>
+                      class:focus:border-red-500={!iscityvalid}
-              {/if}
+                      class:focus:ring-red-500={!iscityvalid}
-            </div>
+                      bind:value={address_city_value}
                      bind:this={address_city}
                      type="text"
                      name="city"
                      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-neutral-800 rounded-md p-2"
                    />
                    {#if !iscityvalid}
                      <span
                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
                      >
                        {$_("valid-city-is-required")}
                      </span>
                    {/if}
                  </div>
                {/if}
              </div>
            </div>
          </div>
        </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
          <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">
+            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"
-            {$_('create')}
+          >
            {$_("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">
+            class="w-full 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 hidden lg:block"
-            {$_('cancel')}
+          >
            {$_("cancel")}
          </button>
        </div>
      </div>
--- a/src/components/orgs/ConfirmOrgDeletion.svelte
+++ b/src/components/orgs/ConfirmOrgDeletion.svelte
@@ -1,102 +0,0 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
  import { RunnerOrganizationService } from "@odit/lfk-client-js";
  import Toastify from "toastify-js";
  import { createEventDispatcher } from "svelte";
  export let modal_open;
  export let delete_org;
  const dispatch = createEventDispatcher();
  function cancelDelete() {
    modal_open = false;
    dispatch("cancelDelete", { id: delete_org.id });
  }
  function deleteOrg() {
    RunnerOrganizationService.runnerOrganizationControllerRemove(
      delete_org.id,
      true
    )
      .then((resp) => {
        Toastify({
          text: $_('organization-deleted'),
          duration: 500,
          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
        }).showToast();
        location.replace("./");
      })
      .catch((err) => {});
  }
 </script>
 {#if modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
    use:clickOutside
    on:click_outside={cancelDelete}>
    <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"
                width="24"
                height="24"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 640 512"><path
                  fill="currentColor"
                  d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></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">
                {$_('attention')}
              </h3>
              <div class="mt-2 mb-6">
                <p class="text-sm text-gray-500">
                  {$_(
                    'do-you-want-to-delete-the-organization-delete_org-name',
                    {
                      values: { orgname: delete_org.name },
                    }
                  )}<br />
                  {$_('all-associated-teams-and-runners-will-be-deleted-too')}
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
          <button
            on:click={deleteOrg}
            type="button"
            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
            {$_('confirm-delete-organization-and-associated-teams-runners')}
          </button>
          <button
            on:click={cancelDelete}
            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-keep-organization')}
          </button>
        </div>
      </div>
    </div>
  </div>
 {/if}
--- a/src/components/orgs/ConfirmOrgDeletionModal.svelte
+++ b/src/components/orgs/ConfirmOrgDeletionModal.svelte
@@ -0,0 +1,104 @@
 <script>
 	import { _ } from "svelte-i18n";
 	import { clickOutside } from "../base/outsideclick";
 	import { RunnerOrganizationService } from "@odit/lfk-client-js";
 	import { createEventDispatcher } from "svelte";
 	export let modal_open;
 	export let delete_org;
 	const dispatch = createEventDispatcher();
 	function cancelDelete() {
 		modal_open = false;
 		dispatch("cancelDelete", { id: delete_org.id });
 	}
 	function deleteOrg() {
 		RunnerOrganizationService.runnerOrganizationControllerRemove(
 			delete_org.id,
 			true
 		)
 			.then((resp) => {
 				toast.success($_("organization-deleted"));
 				location.replace("./");
 			})
 			.catch((err) => {});
 	}
 </script>
 {#if modal_open}
 	<div
 		class="fixed z-10 inset-0 overflow-y-hidden"
 		use:clickOutside
 		on:click_outside={cancelDelete}
 	>
 		<div
 			class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
 		>
 			<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 text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
 				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 rounded-t-xl">
 					<div class="">
 						<div
 							class="flex-shrink-0 flex items-center justify-center size-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"
 								width="24"
 								height="24"
 								xmlns="http://www.w3.org/2000/svg"
 								viewBox="0 0 640 512"
 								><path
 									fill="currentColor"
 									d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
 								/></svg
 							>
 						</div>
 						<div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
 							<h3 class="text-lg leading-6 font-medium text-gray-900">
 								{$_("do-you-want-to-delete-the-organization-delete_org-name", {
 									values: { orgname: delete_org.name },
 								})}
 							</h3>
 							<div class="mb-6">
 								<p class="text-sm text-gray-500">
 									{$_("all-associated-teams-and-runners-will-be-deleted-too")}
 								</p>
 							</div>
 						</div>
 					</div>
 				</div>
 				<div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
 					<button
 						on:click={deleteOrg}
 						type="button"
 						class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
 					>
 						{$_("confirm-delete-organization-and-associated-teams-runners")}
 					</button>
 					<button
 						on:click={cancelDelete}
 						type="button"
 						class="w-full 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 hidden lg:block"
 					>
 						{$_("cancel-keep-organization")}
 					</button>
 				</div>
 			</div>
 		</div>
 	</div>
 {/if}
--- a/src/components/orgs/OrgDetail.svelte
+++ b/src/components/orgs/OrgDetail.svelte
@@ -1,507 +1,421 @@
 <script>
-  import {
+	import {
-    GroupContactService,
+		GroupContactService,
-    RunnerOrganizationService,
+		RunnerOrganizationService,
-  } from "@odit/lfk-client-js";
+	} from "@odit/lfk-client-js";
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
+	import toast from "svelte-french-toast";
-  import Toastify from "toastify-js";
+	import { _ } from "svelte-i18n";
-  import store from "../../store";
+	import { tick } from "svelte";
-  import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
+	import Select from "svelte-select";
-  import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
+	import store from "../../store";
-  import PromiseError from "../base/PromiseError.svelte";
+	import PromiseError from "../base/PromiseError.svelte";
-  import Select from "svelte-select";
+	import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
-  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+	import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
-  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
+	import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
-  import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
+	import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
-  import { tick } from "svelte";
+	import ConfirmOrgDeletionModal from "./ConfirmOrgDeletionModal.svelte";
-  $: delete_triggered = false;
+	$: address_valid_or_none =
-  $: address_valid_or_none =
+		(isAddress1Valid && iszipcodevalid && iscityvalid) ||
-    (isAddress1Valid && iszipcodevalid && iscityvalid) ||
+		editable.address_checked === false;
-    editable.address_checked === false;
+	$: save_enabled = data_changed && address_valid_or_none;
-  $: save_enabled = data_changed && address_valid_or_none;
+	let original = "";
-  let original = "";
+	let original_object = {};
-  let original_object = {};
+	let contacts = [];
-  let contacts = [];
+	let valueCopy = null;
-  let valueCopy = null;
+	let areaDom;
-  let areaDom;
+	export let params;
-  let copied = false;
+	$: editable = {};
-  export let params;
+	$: contact = {};
-  $: editable = {};
+	$: data_loaded = false;
-  $: contact = {};
+	$: data_changed = !(JSON.stringify(editable) === original);
-  $: data_loaded = false;
+	$: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
-  $: data_changed = !(JSON.stringify(editable) === original);
+	$: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
-  $: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
+	$: iscityvalid = editable.address?.city?.trim().length !== 0;
-  $: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
+	$: sponsoring_contracts_show = true;
-  $: iscityvalid = editable.address?.city?.trim().length !== 0;
+	$: cards_show = true;
-  $: sponsoring_contracts_show = true;
+	$: certificates_show = true;
-  $: cards_show = true;
+	$: generate_orgs = [original_object];
-  $: certificates_show = true;
+	$: registrationLink = `${config.baseurl_selfservice}/register/${editable.registrationKey}`;
-  $: generate_orgs = [original_object];
+	const getContactLabel = (option) =>
-  $: registrationLink = `${config.baseurl}/selfservice/register/${editable.registrationKey}`;
+		option.firstname + " " + (option.middlename || "") + " " + option.lastname;
-  const getContactLabel = (option) =>
+	const promise = RunnerOrganizationService.runnerOrganizationControllerGetOne(
-    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
+		params.orgid
-  const promise = RunnerOrganizationService.runnerOrganizationControllerGetOne(
+	).then((value) => {
-    params.orgid
+		data_loaded = true;
-  ).then((value) => {
+		value.address_checked = value.address.address1 !== null;
-    data_loaded = true;
+		if (value.address_checked === false) {
-    value.address_checked = value.address.address1 !== null;
+			value.address = {
-    if (value.address_checked === false) {
+				address1: "",
-      value.address = {
+				address2: "",
-        address1: "",
+				city: "",
-        address2: "",
+				postalcode: "",
-        city: "",
+				country: "",
-        postalcode: "",
+			};
-        country: "",
+		}
-      };
+		editable = Object.assign(editable, value);
-    }
+		editable = editable;
-    editable = Object.assign(editable, value);
+		original_object = Object.assign(editable, value);
-    editable = editable;
+		original = JSON.stringify(value);
-    original_object = Object.assign(editable, value);
+		GroupContactService.groupContactControllerGetAll().then((val) => {
-    original = JSON.stringify(value);
+			contacts = val.map((r) => {
-    GroupContactService.groupContactControllerGetAll().then((val) => {
+				return { label: getContactLabel(r), value: r };
-      contacts = val.map((r) => {
+			});
-        return { label: getContactLabel(r), value: r };
+			if (editable.contact) {
-      });
+				contact = contacts.find((g) => g.value.id == editable.contact.id);
-      if (editable.contact) {
+			} else {
-        contact = contacts.find((g) => g.value.id == editable.contact.id);
+				contact = null;
-      } else {
+			}
-        contact = null;
+		});
-      }
+	});
-    });
+	let modal_open = false;
-  });
+	let delete_org = {};
-  let modal_open = false;
+	function deleteOrganization() {
-  let delete_org = {};
+		RunnerOrganizationService.runnerOrganizationControllerRemove(
-  function deleteOrganization() {
+			original_object.id,
-    RunnerOrganizationService.runnerOrganizationControllerRemove(
+			false
-      original_object.id,
+		)
-      false
+			.then((resp) => {
-    )
+				toast.success($_("organization-deleted"));
-      .then((resp) => {
+				location.replace("./");
-        Toastify({
+			})
-          text: $_("organization-deleted"),
+			.catch((err) => {});
-          duration: 500,
+	}
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+	function submit() {
-        }).showToast();
+		if (data_loaded === true && save_enabled) {
-        location.replace("./");
+			toast($_("updating-organization"));
-      })
+			let postdata = Object.assign({}, editable);
-      .catch((err) => {
+			if (postdata.address_checked === false) {
-        modal_open = true;
+				postdata.address = null;
-        delete_org = original_object;
+			}
-      });
+			postdata.contact = postdata.contact?.id;
-  }
+			RunnerOrganizationService.runnerOrganizationControllerPut(
-  function submit() {
+				original_object.id,
-    if (data_loaded === true && save_enabled) {
+				postdata
-      Toastify({
+			)
-        text: $_("updating-organization"),
+				.then((resp) => {
-        duration: 2500,
+					editable.registrationKey = resp.registrationKey;
-      }).showToast();
+					original_object = Object.assign({}, editable);
-      let postdata = Object.assign({}, editable);
+					original = JSON.stringify(original_object);
-      if (postdata.address_checked === false) {
+					toast.success($_("updated-organization"));
-        postdata.address = null;
+				})
-      }
+				.catch((err) => {});
-      postdata.contact = postdata.contact?.id;
+		} else {
-      RunnerOrganizationService.runnerOrganizationControllerPut(
+		}
-        original_object.id,
+	}
-        postdata
+	async function copy() {
-      )
+		if (!editable.registrationKey) {
-        .then((resp) => {
+			toast.error($_("you-have-to-save-your-changes-to-generate-a-link"));
-          editable.registrationKey = resp.registrationKey;
+			return;
-          original_object = Object.assign({}, editable);
+		}
-          original = JSON.stringify(original_object);
+		valueCopy = registrationLink;
-          Toastify({
+		await tick();
-            text: $_("updated-organization"),
+		areaDom.focus();
-            duration: 2500,
+		areaDom.select();
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+		try {
-          }).showToast();
+			const successful = document.execCommand("copy");
-        })
+			if (!successful) {
-        .catch((err) => {});
+				throw new Error();
-    } else {
+			}
-    }
+			toast($_("copied-link-to-clipboard"));
-  }
+		} catch (err) {
-  async function copy() {
+			toast.error($_("error-whyile-copying-to-clipboard"));
-    if (!editable.registrationKey) {
+		}
-      Toastify({
+		// we can notifi by event or storage about copy status
-        text: $_("you-have-to-save-your-changes-to-generate-a-link"),
+		valueCopy = null;
-        duration: 500,
+	}
-        backgroundColor:
+	export let import_modal_open = false;
          "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
      }).showToast();
      return;
    }
    valueCopy = registrationLink;
    await tick();
    areaDom.focus();
    areaDom.select();
    try {
      const successful = document.execCommand("copy");
      if (!successful) {
        throw new Error();
      }
      Toastify({
        text: $_("copied-link-to-clipboard"),
        duration: 500,
        backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
      }).showToast();
      copied = true;
    } catch (err) {
      Toastify({
        text: $_("error-whyile-copying-to-clipboard"),
        duration: 500,
        backgroundColor:
          "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
      }).showToast();
    }
    // we can notifi by event or storage about copy status
    valueCopy = null;
  }
  export let import_modal_open = false;
 </script>
 {#if valueCopy != null}<textarea bind:this={areaDom}>{valueCopy}</textarea>{/if}
 <ImportRunnerModal
-  on:cancelDelete={(event) => {
+	on:cancelDelete={(event) => {
-    import_modal_open = false;
+		import_modal_open = false;
-  }}
+	}}
-  current_runners={[]}
+	current_runners={[]}
-  passed_team={{}}
+	passed_team={{}}
-  passed_orgs={[]}
+	passed_orgs={[]}
-  passed_org={editable}
+	passed_org={editable}
-  opened_from="OrgDetail"
+	opened_from="OrgDetail"
-  bind:import_modal_open
+	bind:import_modal_open
 />
-<ConfirmOrgDeletion bind:modal_open bind:delete_org />
+<ConfirmOrgDeletionModal bind:modal_open bind:delete_org />
 {#if data_loaded}
-  <section class="container p-5">
+	<section class="container p-5">
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
+		<div class="flex flex-row mb-4">
-      {original_object.name}
+			<div class="w-full">
-      <span data-id="org_actions_${editable.id}">
+				<nav class="w-full flex">
-        <GenerateSponsoringContracts
+					<ol class="list-none flex flex-row items-center justify-start">
-          bind:sponsoring_contracts_show
+						<li class="flex items-center">
-          bind:generate_orgs
+							<a class="mr-2" href="./"
-        />
+								><svg
-        <GenerateRunnerCards bind:cards_show bind:generate_orgs />
+									xmlns="http://www.w3.org/2000/svg"
-        <GenerateRunnerCertificates bind:certificates_show bind:generate_orgs />
+									width="24"
-        {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:IMPORT")}
+									height="24"
-          <button
+									viewBox="0 0 24 24"
-            on:click={() => {
+									fill="none"
-              import_modal_open = true;
+									stroke="currentColor"
-            }}
+									stroke-width="2"
-            type="button"
+									stroke-linecap="round"
-            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"
+									stroke-linejoin="round"
-          >
+									class="inline-block"
-            {$_("import-runners")}
+									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
-          </button>
+								>
-        {/if}
+								{$_("organizations")}</a
-        {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE")}
+							>
-          {#if delete_triggered}
+						</li>
-            <button
+					</ol>
-              on:click={deleteOrganization}
+				</nav>
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+			</div>
-              >{$_("confirm-delete")}</button
+		</div>
-            >
+		<div class="mb-4 text-3xl font-extrabold leading-tight">
-            <button
+			{original_object.name} [#{params.orgid}]
-              on:click={() => {
+			<div data-id="org_actions_${editable.id}">
-                delete_triggered = !delete_triggered;
+				<GenerateSponsoringContracts
-              }}
+					bind:sponsoring_contracts_show
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
+					bind:generate_orgs
-              >{$_("cancel")}</button
+				/>
-            >
+				<GenerateRunnerCards bind:cards_show bind:generate_orgs />
-          {/if}
+				<GenerateRunnerCertificates bind:certificates_show bind:generate_orgs />
-          {#if !delete_triggered}
+				{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:IMPORT")}
-            <button
+					<button
-              on:click={() => {
+						on:click={() => {
-                delete_triggered = true;
+							import_modal_open = true;
-              }}
+						}}
-              type="button"
+						type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+						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:w-auto sm:text-sm"
-              >{$_("delete-organization")}</button
+					>
-            >
+						{$_("import-runners")}
-          {/if}
+					</button>
-        {/if}
+				{/if}
-        {#if !delete_triggered}
+				{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE")}
-          <button
+					<button
-            on:click={submit}
+						on:click={() => {
-            disabled={!save_enabled}
+							modal_open = true;
-            class:opacity-50={!save_enabled}
+							delete_org = original_object;
-            type="button"
+						}}
-            class="w-full 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"
+						type="button"
-            >{$_("save-changes")}</button
+						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-          >
+						>{$_("delete-organization")}</button
-        {/if}
+					>
-      </span>
+				{/if}
-    </div>
+				<button
-    <div class="flex flex-row mb-4">
+					on:click={submit}
-      <div class="w-full">
+					disabled={!save_enabled}
-        <nav class="w-full flex">
+					class:opacity-50={!save_enabled}
-          <ol class="list-none flex flex-row items-center justify-start">
+					type="button"
-            <li class="mr-2 flex items-center">
+					class="w-full 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:w-auto sm:text-sm mb-1 lg:mb-0"
-              <svg
+					>{$_("save-changes")}</button
-                stroke="currentColor"
+				>
-                fill="none"
+			</div>
-                stroke-width="2"
+		</div>
-                viewBox="0 0 24 24"
+		<div class="text-sm w-full mt-2">
-                stroke-linecap="round"
+			<label for="name" class="font-semibold text-gray-700">{$_("name")}</label>
-                stroke-linejoin="round"
+			<input
-                class="h-3 w-3 stroke-current"
+				autocomplete="off"
-                height="1em"
+				placeholder={$_("name")}
-                width="1em"
+				type="text"
-                xmlns="http://www.w3.org/2000/svg"
+				bind:value={editable.name}
-                ><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+				name="name"
-                <polyline points="9 22 9 12 15 12 15 22" /></svg
+				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-neutral-800 rounded-md p-2"
-              >
+			/>
-            </li>
+		</div>
-            <li class="flex items-center">
+		<div class="text-sm w-full mt-2">
-              <a class="mr-2" href="/">{$_("home")}</a><svg
+			<label for="contact" class="font-semibold text-gray-700"
-                stroke="currentColor"
+				>{$_("contact")}</label
-                fill="none"
+			>
-                stroke-width="2"
+			<Select
-                viewBox="0 0 24 24"
+				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-neutral-800 rounded-md p-2"
-                stroke-linecap="round"
+				itemFilter={(label, filterText, option) =>
-                stroke-linejoin="round"
+					label.toLowerCase().includes(filterText.toLowerCase()) ||
-                class="h-3 w-3 mr-2 stroke-current"
+					option.value.id.toString().startsWith(filterText.toLowerCase())}
-                height="1em"
+				items={contacts}
-                width="1em"
+				showChevron={true}
-                xmlns="http://www.w3.org/2000/svg"
+				placeholder={$_("no-contact-selected")}
-                ><line x1="5" y1="12" x2="19" y2="12" />
+				noOptionsMessage={$_("no-contact-found")}
-                <polyline points="12 5 19 12 12 19" /></svg
+				bind:selectedValue={contact}
-              >
+				on:select={(selectedValue) =>
-            </li>
+					(editable.contact = selectedValue.detail.value)}
-            <li class="mr-2 flex items-center">
+				on:clear={() => (editable.contact = null)}
-              <svg
+			/>
-                xmlns="http://www.w3.org/2000/svg"
+		</div>
-                viewBox="0 0 24 24"
+		<div>
-                width="24"
+			<div class="flex items-start mt-2">
-                height="24"
+				<div class="flex items-center h-5">
-                ><path fill="none" d="M0 0h24v24H0z" />
+					<input
-                <path
+						bind:checked={editable.registrationEnabled}
-                  d="M21 20h2v2H1v-2h2V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v17zm-2 0V4H5v16h14zM8 11h3v2H8v-2zm0-4h3v2H8V7zm0 8h3v2H8v-2zm5 0h3v2h-3v-2zm0-4h3v2h-3v-2zm0-4h3v2h-3V7z"
+						id="toggle_selfservice_feature"
-                /></svg
+						name="toggle_selfservice_feature"
-              >
+						type="checkbox"
-            </li>
+						class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-            <li class="flex items-center">
+					/>
-              <a class="mr-2" href="./">{$_("organizations")}</a><svg
+				</div>
-                stroke="currentColor"
+				<div class="ml-3 text-sm">
-                fill="none"
+					<label
-                stroke-width="2"
+						for="toggle_selfservice_feature"
-                viewBox="0 0 24 24"
+						class="font-semibold text-gray-700"
-                stroke-linecap="round"
+						>{$_("selfservice-registration")}</label
-                stroke-linejoin="round"
+					>
-                class="h-3 w-3 mr-2 stroke-current"
+				</div>
-                height="1em"
+			</div>
-                width="1em"
+			<div>
-                xmlns="http://www.w3.org/2000/svg"
+				{#if editable.registrationEnabled}
-                ><line x1="5" y1="12" x2="19" y2="12" />
+					<div class="text-sm w-full mt-2">
-                <polyline points="12 5 19 12 12 19" /></svg
+						<button on:click={copy} class="inline-flex w-full">
-              >
+							<p
-            </li>
+								name="token"
-            <li class="flex items-center">
+								class="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-neutral-800 p-2 break-all font-mono text-left"
-              <span class="mr-2">Org-Details #{params.orgid}</span>
+							>
-            </li>
+								{#if editable.registrationKey}
-          </ol>
+									{registrationLink}
-        </nav>
+								{:else}
-      </div>
+									{$_("you-have-to-save-your-changes-to-generate-a-link")}
-    </div>
+								{/if}
-    <div class="text-sm w-full">
+							</p>
-      <label for="name" class="font-medium text-gray-700">{$_("name")}</label>
+							<div
-      <input
+								class="bg-gray-200 border-gray-300 border-t border-b border-r text-black rounded-r-md sm:text-sm p-2 cursor-pointer flex items-center justify-center"
-        autocomplete="off"
+							>
-        placeholder={$_("name")}
+								<svg
-        type="text"
+									xmlns="http://www.w3.org/2000/svg"
-        bind:value={editable.name}
+									viewBox="0 0 24 24"
-        name="name"
+									width="24"
-        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"
+									height="24"
-      />
+									><path fill="none" d="M0 0h24v24H0z" />
-    </div>
+									<path
-    <div class="text-sm w-full">
+										fill="currentColor"
-      <label for="contact" class="font-medium text-gray-700"
+										d="M7 4V2h10v2h3l1 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V5l1-1h3zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z"
-        >{$_("contact")}</label
+									/></svg
-      >
+								>
-      <Select
+							</div>
-        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"
+						</button>
-        itemFilter={(label, filterText, option) =>
+						{#if editable.registrationKey}
-          label.toLowerCase().includes(filterText.toLowerCase()) ||
+							<p class="text-gray-500 text-xs">
-          option.value.id.toString().startsWith(filterText.toLowerCase())}
+								{$_("click-to-copy-the-link-into-your-clipboard")}
-        items={contacts}
+							</p>
-        showChevron={true}
+						{/if}
-        placeholder={$_("no-contact-selected")}
+					</div>
-        noOptionsMessage={$_("no-contact-found")}
+				{/if}
-        bind:selectedValue={contact}
+				<!--  -->
-        on:select={(selectedValue) =>
+				<div>
-          (editable.contact = selectedValue.detail.value)}
+					<div class="flex items-start mt-2">
-        on:clear={() => (editable.contact = null)}
+						<div class="flex items-center h-5">
-      />
+							<input
-    </div>
+								bind:checked={editable.address_checked}
-    <div>
+								id="toggle_address_checkbox"
-      <div class="flex items-start mt-2">
+								name="toggle_address_checkbox"
-        <div class="flex items-center h-5">
+								type="checkbox"
-          <input
+								class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-            bind:checked={editable.registrationEnabled}
+							/>
-            id="toggle_selfservice_feature"
+						</div>
-            name="toggle_selfservice_feature"
+						<div class="ml-3 text-sm">
-            type="checkbox"
+							<label
-            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+								for="toggle_address_checkbox"
-          />
+								class="font-semibold text-gray-700">{$_("address")}</label
-        </div>
+							>
-        <div class="ml-3 text-sm">
+						</div>
-          <label
+					</div>
-            for="toggle_selfservice_feature"
+				</div>
-            class="font-medium text-gray-700"
+				{#if editable.address_checked === true}
-            >{$_("selfservice-registration")}</label
+					<div class="col-span-6">
-          >
+						<label
-        </div>
+							for="address1"
-      </div>
+							class="block text-sm font-medium text-gray-700"
-      <div>
+							>{$_("address")}</label
-        {#if editable.registrationEnabled}
+						>
-          <div class="text-sm w-full">
+						<input
-            <button on:click={copy} class="inline-flex w-full">
+							autocomplete="off"
-              <p
+							placeholder="Address"
-                name="token"
+							class:border-red-500={!isAddress1Valid}
-                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 p-2"
+							class:focus:border-red-500={!isAddress1Valid}
-              >
+							class:focus:ring-red-500={!isAddress1Valid}
-                {#if editable.registrationKey}
+							bind:value={editable.address.address1}
-                  {registrationLink}
+							type="text"
-                {:else}
+							name="address1"
-                  {$_("you-have-to-save-your-changes-to-generate-a-link")}
+							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-neutral-800 rounded-md p-2"
-                {/if}
+						/>
-              </p>
+						{#if !isAddress1Valid}
-              <div
+							<span
-                class="bg-gray-200 border-gray-300 border-t border-b border-r text-black rounded-r-md sm:text-sm p-2 mt-1 cursor-pointer"
+								class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-              >
+							>
-                <svg
+								{$_("address-is-required")}
-                  xmlns="http://www.w3.org/2000/svg"
+							</span>
-                  viewBox="0 0 24 24"
+						{/if}
-                  width="24"
+					</div>
-                  height="24"
+					<div class="col-span-6">
-                  ><path fill="none" d="M0 0h24v24H0z" />
+						<label
-                  <path
+							for="address2"
-                    fill="currentColor"
+							class="block text-sm font-medium text-gray-700"
-                    d="M7 4V2h10v2h3l1 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V5l1-1h3zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z"
+							>{$_("apartment-suite-etc")}</label
-                  /></svg
+						>
-                >
+						<input
-              </div>
+							autocomplete="off"
-            </button>
+							placeholder={$_("apartment-suite-etc")}
-            {#if editable.registrationKey}
+							bind:value={editable.address.address2}
-              <p class="text-gray-500 text-xs">
+							type="text"
-                {$_("click-to-copy-the-link-into-your-clipboard")}
+							name="address2"
-              </p>
+							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-neutral-800 rounded-md p-2"
-            {/if}
+						/>
-          </div>
+					</div>
-        {/if}
+					<div class="col-span-6">
-        <!--  -->
+						<label for="zipcode" class="block text-sm font-medium text-gray-700"
-        <div>
+							>{$_("zip-postal-code")}</label
-          <div class="flex items-start mt-2">
+						>
-            <div class="flex items-center h-5">
+						<input
-              <input
+							autocomplete="off"
-                bind:checked={editable.address_checked}
+							placeholder={$_("zip-postal-code")}
-                id="toggle_address_checkbox"
+							class:border-red-500={!iszipcodevalid}
-                name="toggle_address_checkbox"
+							class:focus:border-red-500={!iszipcodevalid}
-                type="checkbox"
+							class:focus:ring-red-500={!iszipcodevalid}
-                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+							bind:value={editable.address.postalcode}
-              />
+							type="text"
-            </div>
+							name="zipcode"
-            <div class="ml-3 text-sm">
+							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-neutral-800 rounded-md p-2"
-              <label
+						/>
-                for="toggle_address_checkbox"
+						{#if !iszipcodevalid}
-                class="font-medium text-gray-700">{$_("address")}</label
+							<span
-              >
+								class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-            </div>
+							>
-          </div>
+								{$_("valid-zipcode-postal-code-is-required")}
-        </div>
+							</span>
-        {#if editable.address_checked === true}
+						{/if}
-          <div class="col-span-6">
+					</div>
-            <label
+					<div class="col-span-6">
-              for="address1"
+						<label for="city" class="block text-sm font-medium text-gray-700"
-              class="block text-sm font-medium text-gray-700"
+							>{$_("city")}</label
-              >{$_("address")}</label
+						>
-            >
+						<input
-            <input
+							autocomplete="off"
-              autocomplete="off"
+							placeholder={$_("city")}
-              placeholder="Address"
+							class:border-red-500={!iscityvalid}
-              class:border-red-500={!isAddress1Valid}
+							class:focus:border-red-500={!iscityvalid}
-              class:focus:border-red-500={!isAddress1Valid}
+							class:focus:ring-red-500={!iscityvalid}
-              class:focus:ring-red-500={!isAddress1Valid}
+							bind:value={editable.address.city}
-              bind:value={editable.address.address1}
+							type="text"
-              type="text"
+							name="city"
-              name="address1"
+							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-neutral-800 rounded-md p-2"
-              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"
+						/>
-            />
+						{#if !iscityvalid}
-            {#if !isAddress1Valid}
+							<span
-              <span
+								class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+							>
-              >
+								{$_("valid-city-is-required")}
-                {$_("address-is-required")}
+							</span>
-              </span>
+						{/if}
-            {/if}
+					</div>
-          </div>
+				{/if}
-          <div class="col-span-6">
+				<div class="text-sm w-full mt-2">
-            <label
+					<span class="font-semibold text-gray-700">{$_("distance")}</span>
-              for="address2"
+					<br />
-              class="block text-sm font-medium text-gray-700"
+					<span class="text-gray-700"
-              >{$_("apartment-suite-etc")}</label
+						>{(original_object.total_distance / 1000).toFixed(2)} km</span
-            >
+					>
-            <input
+				</div>
-              autocomplete="off"
+			</div>
-              placeholder={$_("apartment-suite-etc")}
+		</div>
-              bind:value={editable.address.address2}
+	</section>
              type="text"
              name="address2"
              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"
            />
          </div>
          <div class="col-span-6">
            <label for="zipcode" class="block text-sm font-medium text-gray-700"
              >{$_("zip-postal-code")}</label
            >
            <input
              autocomplete="off"
              placeholder={$_("zip-postal-code")}
              class:border-red-500={!iszipcodevalid}
              class:focus:border-red-500={!iszipcodevalid}
              class:focus:ring-red-500={!iszipcodevalid}
              bind:value={editable.address.postalcode}
              type="text"
              name="zipcode"
              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"
            />
            {#if !iszipcodevalid}
              <span
                class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
              >
                {$_("valid-zipcode-postal-code-is-required")}
              </span>
            {/if}
          </div>
          <div class="col-span-6">
            <label for="city" class="block text-sm font-medium text-gray-700"
              >{$_("city")}</label
            >
            <input
              autocomplete="off"
              placeholder={$_("city")}
              class:border-red-500={!iscityvalid}
              class:focus:border-red-500={!iscityvalid}
              class:focus:ring-red-500={!iscityvalid}
              bind:value={editable.address.city}
              type="text"
              name="city"
              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"
            />
            {#if !iscityvalid}
              <span
                class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
              >
                {$_("valid-city-is-required")}
              </span>
            {/if}
          </div>
        {/if}
      </div>
    </div>
  </section>
 {:else}
-  {#await promise}
+	{#await promise}
-    {$_("organization-detail-is-being-loaded")}
+		{$_("organization-detail-is-being-loaded")}
-  {:catch error}
+	{:catch error}
-    <PromiseError />
+		<PromiseError />
-  {/await}
+	{/await}
 {/if}
--- a/src/components/orgs/OrgOverview.svelte
+++ b/src/components/orgs/OrgOverview.svelte
@@ -1,219 +0,0 @@
 <script>
  import { getLocaleFromNavigator, _ } from "svelte-i18n";
  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
  let modal_open = false;
  let delete_org = {};
  import { RunnerOrganizationService } from "@odit/lfk-client-js";
  import store from "../../store";
  import OrgsEmptyState from "./OrgsEmptyState.svelte";
  import Toastify from "toastify-js";
  import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
  import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
  $: searchvalue = "";
  $: active_deletes = [];
  $: sponsoring_contracts_show = current_organizations.some((r) => r.is_selected === true);
  $: cards_show = current_organizations.some((r) => r.is_selected === true);
  $: generate_orgs = current_organizations.filter((r) => r.is_selected === true);
  $: certificates_show = current_organizations.some(
    (r) => r.is_selected === true
  );
  export let current_organizations = [];
  const promise = RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
    (val) => {
      current_organizations = val;
    }
  );
 </script>
 <ConfirmOrgDeletion
  on:cancelDelete={(event) => {
    modal_open = false;
    active_deletes[event.detail.id] = false;
  }}
  bind:modal_open
  bind:delete_org />
 {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:GET')}
  {#await 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">{$_('organizations-are-being-loaded')}</p>
      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
    </div>
  {:then}
    {#if current_organizations.length === 0}
      <OrgsEmptyState />
    {:else}
      <input
        type="search"
        bind:value={searchvalue}
        placeholder={$_('datatable.search')}
        aria-label={$_('datatable.search')}
        class="mb-4" />
      <div class="h-12">
        <GenerateSponsoringContracts
            bind:sponsoring_contracts_show
            bind:generate_orgs />
        <GenerateRunnerCards
            bind:cards_show
            bind:generate_orgs />
        <GenerateRunnerCertificates
            bind:certificates_show
            bind:generate_orgs />
      </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_organizations.some((r) => r.is_selected === true);
                    current_organizations = current_organizations.map((r) => {
                      r.is_selected = newstate;
                      return r;
                    });
                  }}
                  class="underline cursor-pointer select-none">{#if current_organizations.some((r) => r.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">
                {$_('address')}
              </th>
              <th
                scope="col"
                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                {$_('contact')}
              </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_organizations as o}
              {#if Object.values(o)
                .toString()
                .toLowerCase()
                .includes(searchvalue)}
                <tr data-rowid="org_{o.id}">
                  <td class="px-6 py-4 whitespace-nowrap">
                    <input
                      bind:checked={o.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">
                          {o.name}
                        </div>
                      </div>
                    </div>
                  </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">
                          {#if o.address.address1 !== null}
                            {o.address.address1}<br />
                            <!-- {o.address.address2 || ''}<br /> -->
                            {o.address.postalcode}
                            {o.address.city}
                            {o.address.country}
                          {/if}
                        </div>
                      </div>
                    </div>
                  </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">
                          {#if o.contact}
                            <a
                              href="../contacts/{o.contact.id}"
                              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{o.contact.firstname}
                              {o.contact.middlename || ''}
                              {o.contact.lastname}</a>
                          {:else}{$_('no-contact-specified')}{/if}
                        </div>
                      </div>
                    </div>
                  </td>
                  {#if active_deletes[o.id] === true}
                    <td
                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                      <button
                        on:click={() => {
                          active_deletes[o.id] = false;
                        }}
                        tabindex="0"
                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
                      <button
                        on:click={() => {
                          RunnerOrganizationService.runnerOrganizationControllerRemove(o.id, false)
                            .then((resp) => {
                              current_organizations = current_organizations.filter((obj) => obj.id !== o.id);
                              Toastify({
                                text: 'Organization 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="./{o.id}"
                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
                      {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:DELETE')}
                        <button
                          on:click={() => {
                            active_deletes[o.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}
--- a/src/components/orgs/Orgs.svelte
+++ b/src/components/orgs/Orgs.svelte
@@ -1,51 +1,253 @@
 <script>
-  import { _ } from "svelte-i18n";
+	import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
-  import store from "../../store";
+	let delete_org = {};
-  import AddOrgModal from "./AddOrgModal.svelte";
+	import { RunnerOrganizationService } from "@odit/lfk-client-js";
-  export let modal_open = false;
+	import store from "../../store";
-  import OrgOverview from "./OrgOverview.svelte";
+	import OrgsEmptyState from "./OrgsEmptyState.svelte";
-  import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
+	import ConfirmOrgDeletionModal from "./ConfirmOrgDeletionModal.svelte";
-  let current_organizations = [];
+	import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
-  export let import_modal_open = false;
+	import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
 	import toast from "svelte-french-toast";
 	$: searchvalue = "";
 	$: active_deletes = [];
 	$: sponsoring_contracts_show = current_organizations.some(
 		(r) => r.is_selected === true
 	);
 	$: cards_show = current_organizations.some((r) => r.is_selected === true);
 	$: generate_orgs = current_organizations.filter(
 		(r) => r.is_selected === true
 	);
 	$: certificates_show = current_organizations.some(
 		(r) => r.is_selected === true
 	);
 	let current_organizations = [];
 	const promise =
 		RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
 			(val) => {
 				current_organizations = val;
 			}
 		);
 	import { _ } from "svelte-i18n";
 	import AddOrgModal from "./AddOrgModal.svelte";
 	let delete_modal_open = false;
 	let modal_open = false;
 	import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
 	let import_modal_open = false;
 </script>
 <section class="container p-5">
-  <span class="mb-1 text-3xl font-extrabold leading-tight">
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
-    {$_('organizations')}
+		{$_("organizations")}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:CREATE')}
+	</h4>
-      <button
+	{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:CREATE")}
-        on:click={() => {
+		<button
-          modal_open = true;
+			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">
+			type="button"
-        {$_('create-organization')}
+			class="w-full 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:w-auto sm:text-sm mb-1 lg:mb-0"
-      </button>
+		>
-    {/if}
+			{$_("create-organization")}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
+		</button>
-      <button
+	{/if}
-        on:click={() => {
+	{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:IMPORT")}
-          import_modal_open = true;
+		<button
-        }}
+			on:click={() => {
-        type="button"
+				import_modal_open = true;
-        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">
+			}}
-        {$_('import-runners')}
+			type="button"
-      </button>
+			class="w-full 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:w-auto sm:text-sm mb-1 lg:mb-0"
-    {/if}
+		>
-  </span>
+			{$_("import-runners")}
-  <OrgOverview bind:current_organizations />
+		</button>
 	{/if}
 	<ConfirmOrgDeletionModal
 		on:cancelDelete={(event) => {
 			delete_modal_open = false;
 			active_deletes[event.detail.id] = false;
 		}}
 		bind:modal_open={delete_modal_open}
 		bind:delete_org
 	/>
 	{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:GET")}
 		{#await 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">{$_("organizations-are-being-loaded")}</p>
 				<p class="text-sm">{$_("this-might-take-a-moment")}</p>
 			</div>
 		{:then}
 			{#if current_organizations.length === 0}
 				<OrgsEmptyState />
 			{:else}
 				<input
 					type="search"
 					bind:value={searchvalue}
 					placeholder={$_("datatable.search")}
 					aria-label={$_("datatable.search")}
 					class="w-full sm:w-auto sm:mt-0 p-2 rounded-md border mb-1 lg:mb-0"
 				/>
 				<GenerateSponsoringContracts
 					bind:sponsoring_contracts_show
 					bind:generate_orgs
 				/>
 				<GenerateRunnerCards bind:cards_show bind:generate_orgs />
 				<GenerateRunnerCertificates bind:certificates_show bind:generate_orgs />
 				<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 class="odd:bg-white even:bg-gray-100">
 								<th
 									scope="col"
 									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
 								>
 									<button
 										on:click={() => {
 											const newstate = !current_organizations.some(
 												(r) => r.is_selected === true
 											);
 											current_organizations = current_organizations.map((r) => {
 												r.is_selected = newstate;
 												return r;
 											});
 										}}
 										class="underline cursor-pointer select-none"
 										>{#if current_organizations.some((r) => r.is_selected === true)}
 											{$_("deselect-all")}
 										{:else}{$_("select-all")}{/if}
 									</button>
 								</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"
 								>
 									{$_("address")}
 								</th>
 								<th
 									scope="col"
 									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
 								>
 									{$_("contact")}
 								</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_organizations as o}
 								{#if Object.values(o)
 									.toString()
 									.toLowerCase()
 									.includes(searchvalue)}
 									<tr
 										class="odd:bg-white even:bg-gray-100"
 										data-rowid="org_{o.id}"
 									>
 										<td class="px-6 py-4 whitespace-nowrap">
 											<input
 												bind:checked={o.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="text-sm font-medium text-gray-900">
 													{o.name}
 												</div>
 											</div>
 										</td>
 										<td class="px-6 py-4 whitespace-nowrap">
 											<div class="flex items-center">
 												<div class="text-sm font-medium text-gray-900">
 													{#if o.address.address1 !== null}
 														{o.address.address1}<br />
 														<!-- {o.address.address2 || ''}<br /> -->
 														{o.address.postalcode}
 														{o.address.city}
 														{o.address.country}
 													{/if}
 												</div>
 											</div>
 										</td>
 										<td class="px-6 py-4 whitespace-nowrap">
 											<div class="flex items-center">
 												<div class="text-sm font-medium text-gray-900">
 													{#if o.contact}
 														<a
 															href="../contacts/{o.contact.id}"
 															class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
 															>{o.contact.firstname}
 															{o.contact.middlename || ""}
 															{o.contact.lastname}</a
 														>
 													{:else}{$_("no-contact-specified")}{/if}
 												</div>
 											</div>
 										</td>
 										<td
 											class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
 										>
 											<a
 												href="./{o.id}"
 												class="text-indigo-600 hover:text-indigo-900"
 												>{$_("details")}</a
 											>
 											{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:DELETE")}
 												<button
 													on:click={() => {
 														active_deletes[o.id] = true;
 														delete_modal_open = true;
 														delete_org = o;
 													}}
 													tabindex="0"
 													class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
 													>{$_("delete")}</button
 												>
 											{/if}
 										</td>
 									</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}
 </section>
-{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:CREATE')}
+{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:CREATE")}
-  <AddOrgModal bind:current_organizations bind:modal_open />
+	<AddOrgModal bind:current_organizations bind:modal_open />
-  <ImportRunnerModal
+	<ImportRunnerModal
-    on:cancelDelete={(event) => {
+		on:cancelDelete={(event) => {
-      import_modal_open = false;
+			import_modal_open = false;
-    }}
+		}}
-    passed_team={{}}
+		passed_team={{}}
-    passed_org={{}}
+		passed_org={{}}
-    passed_orgs={current_organizations}
+		passed_orgs={current_organizations}
-    opened_from="OrgOverview"
+		opened_from="OrgOverview"
-    current_runners={[]}
+		bind:import_modal_open
-    bind:import_modal_open />
+	/>
 {/if}
--- a/src/components/orgs/OrgsEmptyState.svelte
+++ b/src/components/orgs/OrgsEmptyState.svelte
@@ -9,9 +9,9 @@
 <div class="text-center items-center justify-center">
  <p class="mb-16 text-lg text-gray-500">
    <img class="w-full h-44" src={org_empty} alt="" />
-    <span
+    <span class="font-bold">{$_("there-are-no-organizations-added-yet")}</span
-      class="font-bold">{$_('there-are-no-organizations-added-yet')}</span><br />
+    ><br />
-    <span>{$_('add-your-first-organization')}</span>
+    <span>{$_("add-your-first-organization")}</span>
  </p>
 </div>
--- a/src/components/pdf_generation/DocumentServer.ts
+++ b/src/components/pdf_generation/DocumentServer.ts
@@ -0,0 +1,150 @@
 class DocumentServer {
  baseUrl: string;
  apiKey: string;
  constructor(baseUrl: string, apiKey: string) {
    this.baseUrl = baseUrl;
    this.apiKey = apiKey;
  }
  async generateCards(cards: any[], locale: string) {
    const generateCards = new Array<any>();
    for (let i = 0; i < cards.length; i++) {
      const card = {
        id: cards[i].id,
        enabled: cards[i].enabled,
        code: cards[i].code,
        runner: {
          id: cards[i]?.runner?.id,
          first_name: cards[i]?.runner?.firstname,
          middle_name: cards[i]?.runner?.middlename,
          last_name: cards[i]?.runner?.lastname,
          group: {
            id: cards[i]?.runner?.group.id,
            name: cards[i]?.runner?.group.name,
            parent_group: {
              id: cards[i]?.runner?.group?.parentGroup?.id,
              name: cards[i]?.runner?.group?.parentGroup?.name,
            },
          },
        },
      };
      generateCards.push(card);
    }
    const response = await fetch(
      `${this.baseUrl}/v1/pdfs/cards?key=${this.apiKey}`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          locale,
          cards: generateCards,
        }),
      },
    );
    const blob = await response.blob();
    return blob;
  }
  async generateContracts(runners: any[], locale: string) {
    const generateRunners = new Array<any>();
    for (let i = 0; i < runners.length; i++) {
      console.log(runners[i]);
      const card = {
        id: runners[i].id,
        first_name: runners[i].firstname,
        middle_name: runners[i].middlename,
        last_name: runners[i].lastname,
        group: {
          id: runners[i].group.id,
          name: runners[i].group.name,
          parent_group: {
            id: runners[i]?.group?.parentGroup?.id,
            name: runners[i]?.group?.parentGroup?.name,
          },
        },
      };
      generateRunners.push(card);
    }
    const response = await fetch(
      `${this.baseUrl}/v1/pdfs/contracts?key=${this.apiKey}`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          locale,
          runners: generateRunners,
        }),
      },
    );
    const blob = await response.blob();
    return blob;
  }
  async generateCertificates(runners: any[], locale: string) {
    const generateRunners = new Array<any>();
    for (let i = 0; i < runners.length; i++) {
      const certificate = {
        id: runners[i].id,
        first_name: runners[i].firstname,
        middle_name: runners[i].middlename,
        last_name: runners[i].lastname,
        group: {
          id: runners[i].group.id,
          name: runners[i].group.name,
          parent_group: {
            id: runners[i]?.group?.parentGroup?.id,
            name: runners[i]?.group?.parentGroup?.name,
          },
        },
        distance: runners[i].distance,
        distance_donations: runners[i].distanceDonations.map(
          (distanceDonation: any) => {
            return {
              id: distanceDonation.id,
              amount: distanceDonation.amount,
              amount_per_distance: distanceDonation.amountPerDistance,
              donor: {
                id: distanceDonation.donor.id,
                first_name: distanceDonation.donor.firstname,
                middle_name: distanceDonation.donor.middlename,
                last_name: distanceDonation.donor.lastname,
              },
            };
          },
        ),
      };
      generateRunners.push(certificate);
    }
    const response = await fetch(
      `${this.baseUrl}/v1/pdfs/certificates?key=${this.apiKey}`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          locale,
          runners: generateRunners,
        }),
      },
    );
    const blob = await response.blob();
    return blob;
  }
 }
 export default DocumentServer;
--- a/src/components/pdf_generation/GenerateRunnerCards.svelte
+++ b/src/components/pdf_generation/GenerateRunnerCards.svelte
@@ -1,418 +1,197 @@
 <script>
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
+	import { _ } from "svelte-i18n";
-  import {
+	import {
-    RunnerCardService,
+		RunnerCardService,
-    RunnerOrganizationService,
+		RunnerOrganizationService,
-    RunnerTeamService,
+		RunnerTeamService,
-  } from "@odit/lfk-client-js";
+	} from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+	import toast from "svelte-french-toast";
-  import { init } from "@paralleldrive/cuid2";
+	import DocumentServer from "./DocumentServer.ts";
  const createId = init({ length: 10, fingerprint: "lfk-frontend" });
-  export let cards_show = false;
+	import { init } from "@paralleldrive/cuid2";
-  export let generate_cards = [];
+	const createId = init({ length: 10, fingerprint: "lfk-frontend" });
-  export let generate_runners = [];
+	const documentServer = new DocumentServer(
-  export let generate_orgs = [];
+		config.baseurl_documentserver,
-  export let generate_teams = [];
+		config.documentserver_key
-  $: cards_dropdown_open = false;
+	);
  document.addEventListener("click", function (e) {
    if (
      e.target.parentNode?.parentNode?.id != "cards:dropdown" &&
      e.target.parentNode?.parentNode?.id != "cards:dropdown:menu"
    ) {
      cards_dropdown_open = false;
    }
  });
-  function generateRunnerCards(locale) {
+	export let cards_show = false;
-    cards_dropdown_open = false;
+	export let generate_cards = [];
 	export let generate_runners = [];
 	export let generate_orgs = [];
 	export let generate_teams = [];
-    if (generate_orgs.length > 0) {
+	function download(blob, fileName) {
-      generateOrgCards(locale);
+		const url = window.URL.createObjectURL(blob);
-    } else if (generate_teams.length > 0) {
+		let a = document.createElement("a");
-      generateTeamCards(locale);
+		a.href = url;
-    } else if (generate_runners.length > 0) {
+		a.download = fileName;
-      generateRunnersCards(locale);
+		document.body.appendChild(a);
-    } else {
+		a.click();
-      generateCards(locale);
+		a.remove();
-    }
+		toast.dismiss();
-  }
+		toast.success($_("pdf-successfully-generated"));
 	}
-  function generateCards(locale) {
+	function generateRunnerCards(locale) {
-    const toast = Toastify({
+		if (generate_orgs.length > 0) {
-      text: $_("generating-pdf"),
+			generateOrgCards(locale);
-      duration: -1,
+		} else if (generate_teams.length > 0) {
-    }).showToast();
+			generateTeamCards(locale);
-    fetch(
+		} else if (generate_runners.length > 0) {
-      `${config.baseurl_documentserver}/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
+			generateRunnersCards(locale);
-      {
+		} else {
-        method: "POST",
+			generateCards(locale);
-        headers: {
+		}
-          "Content-Type": "application/json",
+	}
        },
        body: JSON.stringify(generate_cards),
      }
    )
      .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 = `${$_("runnercards")}-${locale}-${createId()}.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);
      });
  }
-  async function generateRunnersCards(locale) {
+	function generateCards(locale) {
-    const toast = Toastify({
+		toast.loading($_("generating-pdf"));
-      text: $_("generating-pdf"),
+		documentServer
-      duration: -1,
+			.generateCards(generate_cards, locale)
-    }).showToast();
+			.then((blob) => {
-    const current_cards = await RunnerCardService.runnerCardControllerGetAll();
+				download(blob, `${$_("runnercards")}-${locale}-${createId()}.pdf`);
-    let cards = [];
+			})
-    for (let runner of generate_runners) {
+			.catch((err) => {
-      let card = current_cards.find((c) => c.runner?.id == runner.id);
+				console.error(err);
-      if (!card) {
+			});
-        card = await RunnerCardService.runnerCardControllerPost({
+	}
          runner: runner.id,
        });
      }
      cards.push(card);
    }
    fetch(
      `${config.baseurl_documentserver}/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(cards),
      }
    )
      .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;
        if (generate_runners.length == 1) {
          a.download = `${$_("runnercards")}_${generate_runners[0].firstname}_${
            generate_runners[0].lastname
          }-${locale}-${createId()}.pdf`;
        } else {
          a.download = `${$_("runnercards")}-${locale}-${createId()}.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) => {});
  }
-  async function generateTeamCards(locale) {
+	async function generateRunnersCards(locale) {
-    const toast = Toastify({
+		toast.loading($_("generating-pdf"));
-      text: $_("generating-pdfs"),
+		const current_cards = await RunnerCardService.runnerCardControllerGetAll();
-      duration: -1,
+		let cards = [];
-    }).showToast();
+		for (let runner of generate_runners) {
-    let count = 0;
+			let card = current_cards.find((c) => c.runner?.id == runner.id);
-    const current_cards = await RunnerCardService.runnerCardControllerGetAll();
+			if (!card) {
-    for (const t of generate_teams) {
+				card = await RunnerCardService.runnerCardControllerPost({
-      const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
+					runner: runner.id,
-        t.id
+				});
-      );
+			}
-      let cards = [];
+			cards.push(card);
-      for (let runner of runners) {
+		}
-        let card = current_cards.find((c) => c.runner?.id == runner.id);
+		documentServer
-        if (!card) {
+			.generateCards(cards, locale)
-          card = await RunnerCardService.runnerCardControllerPost({
+			.then((blob) => {
-            runner: runner.id,
+				let fileName = `${$_("runnercards")}-${locale}-${createId()}.pdf`;
-          });
+				if (generate_runners.length == 1) {
-        }
+					fileName = `${$_("runnercards")}_${generate_runners[0].firstname}_${
-        cards.push(card);
+						generate_runners[0].lastname
-      }
+					}-${locale}-${createId()}.pdf`;
-      fetch(
+				}
-        `${config.baseurl_documentserver}/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
+				download(blob, fileName);
-        {
+			})
-          method: "POST",
+			.catch((err) => {});
-          headers: {
+	}
            "Content-Type": "application/json",
          },
          body: JSON.stringify(cards),
        }
      )
        .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) => {
          count++;
          const url = window.URL.createObjectURL(blob);
          let a = document.createElement("a");
          a.href = url;
          a.download = `${$_("runnercards")}_${t.name}-${locale}-${createId()}.pdf`;
          document.body.appendChild(a);
          a.click();
          a.remove();
          if (count === generate_teams.length) {
            toast.hideToast();
            Toastify({
              text: $_("pdfs-successfully-generated"),
              duration: 3500,
              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            }).showToast();
          }
        })
        .catch((err) => {});
    }
  }
-  async function generateOrgCards(locale) {
+	async function generateTeamCards(locale) {
-    const toast = Toastify({
+		toast.loading($_("generating-pdfs"));
-      text: $_("generating-pdfs"),
+		let count = 0;
-      duration: -1,
+		const current_cards = await RunnerCardService.runnerCardControllerGetAll();
-    }).showToast();
+		for (const t of generate_teams) {
-    const current_cards = await RunnerCardService.runnerCardControllerGetAll();
+			const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
-    let count = 0;
+				t.id
-    let count_orgs = 0;
+			);
-    for (const o of generate_orgs) {
+			let cards = [];
-      count_orgs++;
+			for (let runner of runners) {
-      let count = 0;
+				let card = current_cards.find((c) => c.runner?.id == runner.id);
-      let runners =
+				if (!card) {
-        await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
+					card = await RunnerCardService.runnerCardControllerPost({
-          o.id,
+						runner: runner.id,
-          true
+					});
-        );
+				}
-      let cards = [];
+				cards.push(card);
-      for (let runner of runners) {
+			}
-        let card = current_cards.find((c) => c.runner?.id == runner.id);
+			documentServer
-        if (!card) {
+				.generateCards(cards, locale)
-          card = await RunnerCardService.runnerCardControllerPost({
+				.then((blob) => {
-            runner: runner.id,
+					download(
-          });
+						blob,
-        }
+						`${$_("runnercards")}_${t.name}-${locale}-${createId()}.pdf`
-        cards.push(card);
+					);
-      }
+				})
-      await fetch(
+				.catch((err) => {});
-        `${config.baseurl_documentserver}/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
+		}
-        {
+	}
-          method: "POST",
+
-          headers: {
+	async function generateOrgCards(locale) {
-            "Content-Type": "application/json",
+		toast.loading($_("generating-pdfs"));
-          },
+		const current_cards = await RunnerCardService.runnerCardControllerGetAll();
-          body: JSON.stringify(cards),
+		let count = 0;
-        }
+		let count_orgs = 0;
-      )
+		for (const o of generate_orgs) {
-        .then((response) => {
+			count_orgs++;
-          if (response.status != "200") {
+			let count = 0;
-            toast.hideToast();
+			let runners =
-            Toastify({
+				await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
-              text: $_("pdf-generation-failed"),
+					o.id,
-              duration: 3500,
+					true
-              backgroundColor:
+				);
-                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+			let cards = [];
-            }).showToast();
+			for (let runner of runners) {
-          } else {
+				let card = current_cards.find((c) => c.runner?.id == runner.id);
-            return response.blob();
+				if (!card) {
-          }
+					card = await RunnerCardService.runnerCardControllerPost({
-        })
+						runner: runner.id,
-        .then((blob) => {
+					});
-          const url = window.URL.createObjectURL(blob);
+				}
-          let a = document.createElement("a");
+				cards.push(card);
-          a.href = url;
+			}
-          a.download = `${$_("runnercards")}_${o.name}_direct-${locale}-${createId()}.pdf`;
+			await documentServer
-          document.body.appendChild(a);
+				.generateCards(cards, locale)
-          a.click();
+				.then((blob) => {
-          a.remove();
+					download(
-          if (count === o.teams.length && count_orgs === generate_orgs.length) {
+						blob,
-            toast.hideToast();
+						`${$_("runnercards")}_${o.name}_direct-${locale}-${createId()}.pdf`
-            console.log("here");
+					);
-            Toastify({
+				})
-              text: $_("pdfs-successfully-generated"),
+				.catch((err) => {});
-              duration: 3500,
+			for (const t of o.teams) {
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+				count++;
-            }).showToast();
+				let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
-          }
+					t.id
-        })
+				);
-        .catch((err) => {});
+				let cards = [];
-      for (const t of o.teams) {
+				for (let runner of runners) {
-        count++;
+					let card = current_cards.find((c) => c.runner?.id == runner.id);
-        let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
+					if (!card) {
-          t.id
+						card = await RunnerCardService.runnerCardControllerPost({
-        );
+							runner: runner.id,
-        let cards = [];
+						});
-        for (let runner of runners) {
+					}
-          let card = current_cards.find((c) => c.runner?.id == runner.id);
+					cards.push(card);
-          if (!card) {
+				}
-            card = await RunnerCardService.runnerCardControllerPost({
+				await documentServer
-              runner: runner.id,
+					.generateCards(cards, locale)
-            });
+					.then((blob) => {
-          }
+						download(
-          cards.push(card);
+							blob,
-        }
+							`${$_("runnercards")}_${o.name}_${
-        await fetch(
+								t.name
-          `${config.baseurl_documentserver}/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
+							}-${locale}-${createId()}.pdf`
-          {
+						);
-            method: "POST",
+					})
-            headers: {
+					.catch((err) => {});
-              "Content-Type": "application/json",
+			}
-            },
+		}
-            body: JSON.stringify(cards),
+	}
          }
        )
          .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 = `${$_("runnercards")}_${o.name}_${
              t.name
            }-${locale}-${createId()}.pdf`;
            document.body.appendChild(a);
            a.click();
            a.remove();
            if (
              count === o.teams.length &&
              count_orgs === generate_orgs.length
            ) {
              toast.hideToast();
              Toastify({
                text: $_("pdfs-successfully-generated"),
                duration: 3500,
                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
              }).showToast();
            }
          })
          .catch((err) => {});
      }
    }
  }
 </script>
 {#if cards_show}
-  <div id="cards:dropdown" class="relative inline-block">
+	<button
-    <div>
+		on:click={() => {
-      <button
+			generateRunnerCards("de");
-        on:click={() => {
+		}}
-          cards_dropdown_open = !cards_dropdown_open;
+		class="w-full 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:w-auto sm:text-sm mb-1 lg:mb-0"
-        }}
+	>
-        type="button"
+		{$_("generate-runnercards")}: DE
-        class="w-full 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:ml-3 sm:w-auto sm:text-sm inline-flex"
+	</button>
-        id="options-menu"
+	<button
-        aria-haspopup="true"
+		on:click={() => {
-        aria-expanded="true"
+			generateRunnerCards("en");
-      >
+		}}
-        {$_("generate-runnercards")}
+		class="w-full 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:w-auto sm:text-sm mb-1 lg:mb-0"
-        <svg
+	>
-          xmlns="http://www.w3.org/2000/svg"
+		{$_("generate-runnercards")}: EN
-          width="24"
+	</button>
          height="24"
          viewBox="0 0 24 24"
          class="-mr-1 ml-2 h-5 w-5"
          ><path fill="none" d="M0 0h24v24H0z" />
          <path
            fill="currentColor"
            d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"
          /></svg
        >
      </button>
    </div>
    {#if cards_dropdown_open}
      <div
        class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10"
        id="cards:dropdown:menu"
      >
        <div
          class="py-1"
          role="menu"
          aria-orientation="vertical"
          aria-labelledby="options-menu"
        >
          <span class="block w-full text-left px-4 py-2 text-sm text-gray-700"
            >{$_("select-language")}</span
          >
          <button
            on:click={() => {
              generateRunnerCards("de");
            }}
            type="submit"
            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
            role="menuitem"
          >
            {$_("german")}
          </button>
          <button
            on:click={() => {
              generateRunnerCards("en");
            }}
            type="submit"
            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
            role="menuitem"
          >
            {$_("english")}
          </button>
        </div>
      </div>
    {/if}
  </div>
 {/if}
--- a/src/components/pdf_generation/GenerateRunnerCertificates.svelte
+++ b/src/components/pdf_generation/GenerateRunnerCertificates.svelte
@@ -1,355 +1,175 @@
 <script>
-  import { _ } from "svelte-i18n";
+	import { _ } from "svelte-i18n";
-  import {
+	import {
-    DonationService,
+		DonationService,
-    RunnerTeamService,
+		RunnerTeamService,
-    RunnerOrganizationService,
+		RunnerOrganizationService,
-  } from "@odit/lfk-client-js";
+	} from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+	import { init } from "@paralleldrive/cuid2";
-  import { init } from "@paralleldrive/cuid2";
+	import toast from "svelte-french-toast";
-  const createId = init({ length: 10, fingerprint: "lfk-frontend" });
+	import DocumentServer from "./DocumentServer";
 	const createId = init({ length: 10, fingerprint: "lfk-frontend" });
 	const documentServer = new DocumentServer(
 		config.baseurl_documentserver,
 		config.documentserver_key
 	);
-  export let certificates_show = false;
+	export let certificates_show = false;
-  export let generate_runners = [];
+	export let generate_runners = [];
-  export let generate_orgs = [];
+	export let generate_orgs = [];
-  export let generate_teams = [];
+	export let generate_teams = [];
  $: certificates_dropdown_open = false;
  document.addEventListener("click", function (e) {
    if (
      e.target.parentNode?.parentNode?.id != "certificates:dropdown" &&
      e.target.parentNode?.parentNode?.id != "certificates:dropdown:menu"
    ) {
      certificates_dropdown_open = false;
    }
  });
-  function generateCertificates(locale) {
+	function generateCertificates(locale) {
-    certificates_dropdown_open = false;
+		if (generate_orgs.length > 0) {
 			generateOrgCertificates(locale);
 		} else if (generate_teams.length > 0) {
 			generateTeamCertificates(locale);
 		} else {
 			generateRunnerCertificates(locale);
 		}
 	}
 	function download(blob, fileName) {
 		const url = window.URL.createObjectURL(blob);
 		let a = document.createElement("a");
 		a.href = url;
 		a.download = fileName;
 		document.body.appendChild(a);
 		a.click();
 		a.remove();
 		toast.dismiss();
 		toast.success($_("pdf-successfully-generated"));
 	}
-    if (generate_orgs.length > 0) {
+	async function generateRunnerCertificates(locale) {
-      generateOrgCertificates(locale);
+		toast.loading($_("generating-pdf"));
-    } else if (generate_teams.length > 0) {
+		const current_donations =
-      generateTeamCertificates(locale);
+			(await DonationService.donationControllerGetAll()) || [];
-    } else {
+		let certificateRunners = [];
-      generateRunnerCertificates(locale);
+		for (let runner of generate_runners) {
-    }
+			runner.distanceDonations =
-  }
+				current_donations.filter((d) => d.runner?.id == runner.id) || [];
 			certificateRunners.push(runner);
 		}
 		documentServer
 			.generateCertificates(certificateRunners, locale)
 			.then((blob) => {
 				let fileName = `${$_("certificates")}-${locale}.pdf`;
 				if (generate_runners.length == 1) {
 					fileName = `${$_("certificates")}_${
 						generate_runners[0].firstname
 					}_${generate_runners[0].lastname}-${locale}-${createId()}.pdf`;
 				}
 				download(blob, fileName);
 			})
 			.catch((err) => {});
 	}
-  async function generateRunnerCertificates(locale) {
+	async function generateTeamCertificates(locale) {
-    const toast = Toastify({
+		toast.loading($_("generating-pdfs"));
-      text: $_("generating-pdf"),
+		let count = 0;
-      duration: -1,
+		const current_donations =
-    }).showToast();
+			(await DonationService.donationControllerGetAll()) || [];
-    const current_donations =
+		for (const t of generate_teams) {
-      (await DonationService.donationControllerGetAll()) || [];
+			const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
-    let certificateRunners = [];
+				t.id
-    for (let runner of generate_runners) {
+			);
-      runner.distanceDonations =
+			let certificateRunners = [];
-        current_donations.filter((d) => d.runner?.id == runner.id) || [];
+			for (let runner of runners) {
-      console.log(runner.distanceDonations);
+				runner.distanceDonations =
-      certificateRunners.push(runner);
+					current_donations.filter((d) => d.runner?.id == runner.id) || [];
-    }
+				certificateRunners.push(runner);
-    fetch(
+			}
-      `${config.baseurl_documentserver}/certificates?locale=${locale}&download=true&key=${config.documentserver_key}`,
+			documentServer
-      {
+				.generateCertificates(certificateRunners, locale)
-        method: "POST",
+				.then((blob) => {
-        headers: {
+					count++;
-          "Content-Type": "application/json",
+					download(
-        },
+						blob,
-        body: JSON.stringify(certificateRunners),
+						`${$_("certificates")}_${t.name}-${locale}-${createId()}.pdf`
-      }
+					);
-    )
+				})
-      .then((response) => {
+				.catch((err) => {});
-        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;
        if (generate_runners.length == 1) {
          a.download = `${$_("certificates")}_${
            generate_runners[0].firstname
          }_${generate_runners[0].lastname}-${locale}-${createId()}.pdf`;
        } else {
          a.download = `${$_("certificates")}-${locale}.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) => {});
  }
-  async function generateTeamCertificates(locale) {
+	async function generateOrgCertificates(locale) {
-    const toast = Toastify({
+		toast.loading($_("generating-pdfs"));
-      text: $_("generating-pdfs"),
+		const current_donations =
-      duration: -1,
+			(await DonationService.donationControllerGetAll()) || [];
-    }).showToast();
+		let count = 0;
-    let count = 0;
+		let count_orgs = 0;
-    const current_donations =
+		for (const o of generate_orgs) {
-      (await DonationService.donationControllerGetAll()) || [];
+			count_orgs++;
-    for (const t of generate_teams) {
+			let count = 0;
-      const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
+			let runners =
-        t.id
+				await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
-      );
+					o.id,
-      let certificateRunners = [];
+					true
-      for (let runner of runners) {
+				);
-        runner.distanceDonations =
+			let certificateRunners = [];
-          current_donations.filter((d) => d.runner?.id == runner.id) || [];
+			for (let runner of runners) {
-        certificateRunners.push(runner);
+				runner.distanceDonations =
-      }
+					current_donations.filter((d) => d.runner?.id == runner.id) || [];
-      fetch(
+				certificateRunners.push(runner);
-        `${config.baseurl_documentserver}/certificates?locale=${locale}&download=true&key=${config.documentserver_key}`,
+			}
-        {
+			await documentServer
-          method: "POST",
+				.generateCertificates(certificateRunners, locale)
-          headers: {
+				.then((blob) => {
-            "Content-Type": "application/json",
+					download(
-          },
+						blob,
-          body: JSON.stringify(certificateRunners),
+						`${$_("certificates")}_${o.name}-${locale}-${createId()}.pdf`
-        }
+					);
-      )
+				})
-        .then((response) => {
+				.catch((err) => {});
-          if (response.status != "200") {
+			for (const t of o.teams) {
-            toast.hideToast();
+				count++;
-            Toastify({
+				let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
-              text: $_("pdf-generation-failed"),
+					t.id
-              duration: 3500,
+				);
-              backgroundColor:
+				let certificateRunners = [];
-                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+				for (let runner of runners) {
-            }).showToast();
+					runner.distanceDonations =
-          } else {
+						current_donations.filter((d) => d.runner?.id == runner.id) || [];
-            return response.blob();
+					certificateRunners.push(runner);
-          }
+				}
-        })
+				await documentServer
-        .then((blob) => {
+					.generateCertificates(certificateRunners, locale)
-          count++;
+					.then((blob) => {
-          const url = window.URL.createObjectURL(blob);
+						download(
-          let a = document.createElement("a");
+							blob,
-          a.href = url;
+							`${$_("certificates")}_${o.name}_${
-          a.download = `${$_("certificates")}_${t.name}-${locale}-${createId()}.pdf`;
+								t.name
-          document.body.appendChild(a);
+							}-${locale}-${createId()}.pdf`
-          a.click();
+						);
-          a.remove();
+						if (
-          if (count === generate_teams.length) {
+							count === o.teams.length &&
-            toast.hideToast();
+							count_orgs === generate_orgs.length
-            Toastify({
+						) {
-              text: $_("pdfs-successfully-generated"),
+							toast.dismiss();
-              duration: 3500,
+							toast.success($_("pdfs-successfully-generated"));
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+						}
-            }).showToast();
+					})
-          }
+					.catch((err) => {});
-        })
+			}
-        .catch((err) => {});
+		}
-    }
+	}
  }
  async function generateOrgCertificates(locale) {
    const toast = Toastify({
      text: $_("generating-pdfs"),
      duration: -1,
    }).showToast();
    const current_donations =
      (await DonationService.donationControllerGetAll()) || [];
    let count = 0;
    let count_orgs = 0;
    for (const o of generate_orgs) {
      count_orgs++;
      let count = 0;
      let runners =
        await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
          o.id,
          true
        );
      let certificateRunners = [];
      for (let runner of runners) {
        runner.distanceDonations =
          current_donations.filter((d) => d.runner?.id == runner.id) || [];
        certificateRunners.push(runner);
      }
      await fetch(
        `${config.baseurl_documentserver}/certificates?locale=${locale}&download=true&key=${config.documentserver_key}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(certificateRunners),
        }
      )
        .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 = `${$_("certificates")}_${o.name}-${locale}-${createId()}.pdf`;
          document.body.appendChild(a);
          a.click();
          a.remove();
          if (count === o.teams.length && count_orgs === generate_orgs.length) {
            toast.hideToast();
            console.log("here");
            Toastify({
              text: $_("pdfs-successfully-generated"),
              duration: 3500,
              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            }).showToast();
          }
        })
        .catch((err) => {});
      for (const t of o.teams) {
        count++;
        let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
          t.id
        );
        let certificateRunners = [];
        for (let runner of runners) {
          runner.distanceDonations =
            current_donations.filter((d) => d.runner?.id == runner.id) || [];
          certificateRunners.push(runner);
        }
        await fetch(
          `${config.baseurl_documentserver}/certificates?locale=${locale}&download=true&key=${config.documentserver_key}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(certificateRunners),
          }
        )
          .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 = `${$_("certificates")}_${o.name}_${
              t.name
            }-${locale}-${createId()}.pdf`;
            document.body.appendChild(a);
            a.click();
            a.remove();
            if (
              count === o.teams.length &&
              count_orgs === generate_orgs.length
            ) {
              toast.hideToast();
              Toastify({
                text: $_("pdfs-successfully-generated"),
                duration: 3500,
                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
              }).showToast();
            }
          })
          .catch((err) => {});
      }
    }
  }
 </script>
 {#if certificates_show}
-  <div id="certificates:dropdown" class="relative inline-block">
+	<button
-    <div>
+		on:click={() => {
-      <button
+			generateCertificates("de");
-        on:click={() => {
+		}}
-          certificates_dropdown_open = !certificates_dropdown_open;
+		class="w-full 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:w-auto sm:text-sm mb-1 lg:mb-0"
-        }}
+	>
-        type="button"
+		{$_("generate-runner-certificates")}: DE
-        class="w-full 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:ml-3 sm:w-auto sm:text-sm inline-flex"
+	</button>
-        id="options-menu"
+	<button
-        aria-haspopup="true"
+		on:click={() => {
-        aria-expanded="true"
+			generateCertificates("en");
-      >
+		}}
-        {$_("generate-runner-certificates")}
+		class="w-full 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:w-auto sm:text-sm mb-1 lg:mb-0"
-        <svg
+	>
-          xmlns="http://www.w3.org/2000/svg"
+		{$_("generate-runner-certificates")}: EN
-          width="24"
+	</button>
          height="24"
          viewBox="0 0 24 24"
          class="-mr-1 ml-2 h-5 w-5"
          ><path fill="none" d="M0 0h24v24H0z" />
          <path
            fill="currentColor"
            d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"
          /></svg
        >
      </button>
    </div>
    {#if certificates_dropdown_open}
      <div
        class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10"
        id="certificates:dropdown:menu"
      >
        <div
          class="py-1"
          role="menu"
          aria-orientation="vertical"
          aria-labelledby="options-menu"
        >
          <span class="block w-full text-left px-4 py-2 text-sm text-gray-700"
            >{$_("select-language")}</span
          >
          <button
            on:click={() => {
              generateCertificates("de");
            }}
            type="submit"
            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
            role="menuitem"
          >
            {$_("german")}
          </button>
          <button
            on:click={() => {
              generateCertificates("en");
            }}
            type="submit"
            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
            role="menuitem"
          >
            {$_("english")}
          </button>
        </div>
      </div>
    {/if}
  </div>
 {/if}
--- a/src/components/pdf_generation/GenerateSponsoringContracts.svelte
+++ b/src/components/pdf_generation/GenerateSponsoringContracts.svelte
@@ -1,324 +1,138 @@
 <script>
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
+	import { _ } from "svelte-i18n";
-  import {
+	import {
-    RunnerOrganizationService,
+		RunnerOrganizationService,
-    RunnerTeamService,
+		RunnerTeamService,
-  } from "@odit/lfk-client-js";
+	} from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+	import DocumentServer from "./DocumentServer";
-  import { init } from "@paralleldrive/cuid2";
+	import { init } from "@paralleldrive/cuid2";
-  const createId = init({ length: 10, fingerprint: "lfk-frontend" });
+	import toast from "svelte-french-toast";
 	const createId = init({ length: 10, fingerprint: "lfk-frontend" });
 	const documentServer = new DocumentServer(
 		config.baseurl_documentserver,
 		config.documentserver_key
 	);
-  export let sponsoring_contracts_show = false;
+	export let sponsoring_contracts_show = false;
-  export let generate_runners = [];
+	export let generate_runners = [];
-  export let generate_orgs = [];
+	export let generate_orgs = [];
-  export let generate_teams = [];
+	export let generate_teams = [];
  $: sponsoring_contracts_download_open = false;
  document.addEventListener("click", function (e) {
    if (
      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
    ) {
      sponsoring_contracts_download_open = false;
    }
  });
-  function generateSponsoringContract(locale) {
+	function generateSponsoringContract(locale) {
-    sponsoring_contracts_download_open = false;
+		if (generate_orgs.length > 0) {
 			generateOrgContracts(locale);
 		} else if (generate_teams.length > 0) {
 			generateTeamContracts(locale);
 		} else {
 			generateRunnerContracts(locale);
 		}
 	}
 	function download(blob, fileName) {
 		const url = window.URL.createObjectURL(blob);
 		let a = document.createElement("a");
 		a.href = url;
 		a.download = fileName;
 		document.body.appendChild(a);
 		a.click();
 		a.remove();
 		toast.dismiss();
 		toast.success($_("pdf-successfully-generated"));
 	}
-    if (generate_orgs.length > 0) {
+	async function generateTeamContracts(locale) {
-      generateOrgContracts(locale);
+		toast.loading($_("generating-pdfs"));
-    } else if (generate_teams.length > 0) {
+		let count = 0;
-      generateTeamContracts(locale);
+		for (const t of generate_teams) {
-    } else {
+			count++;
-      generateRunnerContracts(locale);
+			const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
-    }
+				t.id
-  }
+			);
 			documentServer
 				.generateContracts(runners, locale)
 				.then((blob) => {
 					download(
 						blob,
 						`${$_("sponsorings")}_${t.name}-${locale}-${createId()}.pdf`
 					);
 				})
 				.catch((err) => {});
 		}
 	}
-  async function generateTeamContracts(locale) {
+	async function generateOrgContracts(locale) {
-    const toast = Toastify({
+		toast.loading($_("generating-pdf"));
-      text: $_("generating-pdfs"),
+		let count_orgs = 0;
-      duration: -1,
+		for (const o of generate_orgs) {
-    }).showToast();
+			count_orgs++;
-    let count = 0;
+			let count = 0;
-    for (const t of generate_teams) {
+			let runners =
-      count++;
+				await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
-      const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
+					o.id,
-        t.id
+					true
-      );
+				);
-      fetch(
+			await documentServer
-        `${config.baseurl_documentserver}/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
+				.generateContracts(runners, locale)
-        {
+				.then((blob) => {
-          method: "POST",
+					download(
-          headers: {
+						blob,
-            "Content-Type": "application/json",
+						`${$_("sponsorings")}_${o.name}_direct-${locale}-${createId()}.pdf`
-          },
+					);
-          body: JSON.stringify(runners),
+				})
-        }
+				.catch((err) => {});
-      )
+			for (const t of o.teams) {
-        .then((response) => {
+				count++;
-          if (response.status != "200") {
+				let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
-            toast.hideToast();
+					t.id
-            Toastify({
+				);
-              text: $_("pdf-generation-failed"),
+				await documentServer
-              duration: 3500,
+					.generateContracts(runners, locale)
-              backgroundColor:
+					.then((blob) => {
-                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+						download(
-            }).showToast();
+							blob,
-          } else {
+							`${$_("sponsorings")}_${o.name}_${
-            return response.blob();
+								t.name
-          }
+							}-${locale}-${createId()}.pdf`
-        })
+						);
-        .then((blob) => {
+					})
-          const url = window.URL.createObjectURL(blob);
+					.catch((err) => {});
-          let a = document.createElement("a");
+			}
-          a.href = url;
+		}
-          a.download = `${$_("sponsorings")}_${t.name}-${locale}-${createId()}.pdf`;
+	}
          document.body.appendChild(a);
          a.click();
          a.remove();
          if (count === generate_teams.length) {
            toast.hideToast();
            Toastify({
              text: $_("pdfs-successfully-generated"),
              duration: 3500,
              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            }).showToast();
          }
        })
        .catch((err) => {});
    }
  }
-  async function generateOrgContracts(locale) {
+	function generateRunnerContracts(locale) {
-    const toast = Toastify({
+		toast.loading($_("generating-pdf"));
-      text: $_("generating-pdf"),
+		documentServer
-      duration: -1,
+			.generateContracts(generate_runners, locale)
-    }).showToast();
+			.then((blob) => {
-    let count_orgs = 0;
+				let fileName = `${$_("sponsorings")}-${locale}-${createId()}.pdf`;
-    for (const o of generate_orgs) {
+				if (generate_runners.length == 1) {
-      count_orgs++;
+					fileName = `${$_("sponsorings")}_${generate_runners[0].firstname}_${
-      let count = 0;
+						generate_runners[0].lastname
-      let runners =
+					}-${locale}-${createId()}.pdf`;
-        await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
+				}
-          o.id,
+				download(blob, fileName);
-          true
+			})
-        );
+			.catch((err) => {
-      await fetch(
+				console.error(err);
-        `${config.baseurl_documentserver}/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
+			});
-        {
+	}
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(runners),
        }
      )
        .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 = `${$_("sponsorings")}_${o.name}_direct-${locale}-${createId()}.pdf`;
          document.body.appendChild(a);
          a.click();
          a.remove();
          if (count === o.teams.length && count_orgs === generate_orgs.length) {
            toast.hideToast();
            console.log("here");
            Toastify({
              text: $_("pdfs-successfully-generated"),
              duration: 3500,
              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            }).showToast();
          }
        })
        .catch((err) => {});
      for (const t of o.teams) {
        count++;
        let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
          t.id
        );
        await fetch(
          `${config.baseurl_documentserver}/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(runners),
          }
        )
          .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 = `${$_("sponsorings")}_${o.name}_${
              t.name
            }-${locale}-${createId()}.pdf`;
            document.body.appendChild(a);
            a.click();
            a.remove();
            if (
              count === o.teams.length &&
              count_orgs === generate_orgs.length
            ) {
              toast.hideToast();
              Toastify({
                text: $_("pdfs-successfully-generated"),
                duration: 3500,
                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
              }).showToast();
            }
          })
          .catch((err) => {});
      }
    }
  }
  function generateRunnerContracts(locale) {
    const toast = Toastify({
      text: $_("generating-pdf"),
      duration: -1,
    }).showToast();
    fetch(
      `${config.baseurl_documentserver}/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(generate_runners),
      }
    )
      .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;
        if (generate_runners.length == 1) {
          a.download = `${$_("sponsorings")}_${generate_runners[0].firstname}_${
            generate_runners[0].lastname
          }-${locale}-${createId()}.pdf`;
        }
        a.download = `${$_("sponsorings")}-${locale}-${createId()}.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);
      });
  }
 </script>
 {#if sponsoring_contracts_show}
-  <div id="sponsoring:dropdown" class="relative inline-block">
+	<button
-    <div>
+		on:click={() => {
-      <button
+			generateSponsoringContract("de");
-        on:click={() => {
+		}}
-          sponsoring_contracts_download_open =
+		class="w-full 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:w-auto sm:text-sm mb-1 lg:mb-0"
-            !sponsoring_contracts_download_open;
+	>
-        }}
+		{$_("generate-sponsoring-contracts")}: DE
-        type="button"
+	</button>
-        class="w-full 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:ml-3 sm:w-auto sm:text-sm inline-flex"
+	<button
-        id="options-menu"
+		on:click={() => {
-        aria-haspopup="true"
+			generateSponsoringContract("en");
-        aria-expanded="true"
+		}}
-      >
+		class="w-full 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:w-auto sm:text-sm mb-1 lg:mb-0"
-        {$_("generate-sponsoring-contracts")}
+	>
-        <svg
+		{$_("generate-sponsoring-contracts")}: EN
-          xmlns="http://www.w3.org/2000/svg"
+	</button>
          width="24"
          height="24"
          viewBox="0 0 24 24"
          class="-mr-1 ml-2 h-5 w-5"
          ><path fill="none" d="M0 0h24v24H0z" />
          <path
            fill="currentColor"
            d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"
          /></svg
        >
      </button>
    </div>
    {#if sponsoring_contracts_download_open}
      <div
        class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10"
        id="sponsoring:dropdown:menu"
      >
        <div
          class="py-1"
          role="menu"
          aria-orientation="vertical"
          aria-labelledby="options-menu"
        >
          <span class="block w-full text-left px-4 py-2 text-sm text-gray-700"
            >{$_("select-language")}</span
          >
          <button
            on:click={() => {
              generateSponsoringContract("de");
            }}
            type="submit"
            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
            role="menuitem"
          >
            {$_("german")}
          </button>
          <button
            on:click={() => {
              generateSponsoringContract("en");
            }}
            type="submit"
            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
            role="menuitem"
          >
            {$_("english")}
          </button>
        </div>
      </div>
    {/if}
  </div>
 {/if}
--- a/src/components/presets/Avatars.svelte
+++ b/src/components/presets/Avatars.svelte
@@ -1,80 +0,0 @@
 <h3 class="text-lg">Standard Avatars</h3>
 <div class="relative rounded-full w-4 h-4">
  <img
    alt=""
    src="https://gustui.s3.amazonaws.com/avatar.png"
    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
 </div>
 <div class="relative rounded-full w-8 h-8">
  <img
    alt=""
    src="https://gustui.s3.amazonaws.com/avatar.png"
    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
 </div>
 <div class="relative rounded-full w-12 h-12">
  <img
    alt=""
    src="https://gustui.s3.amazonaws.com/avatar.png"
    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
 </div>
 <div class="relative rounded-full w-16 h-16">
  <img
    alt=""
    src="https://gustui.s3.amazonaws.com/avatar.png"
    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
 </div>
 <div class="relative rounded-full w-20 h-20">
  <img
    alt=""
    src="https://gustui.s3.amazonaws.com/avatar.png"
    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
 </div>
 <div class="relative rounded-full w-24 h-24">
  <img
    alt=""
    src="https://gustui.s3.amazonaws.com/avatar.png"
    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
 </div>
 <h3 class="text-lg">Status Avatars</h3>
 <div class="relative rounded-full w-4 h-4">
  <img
    alt=""
    src="https://gustui.s3.amazonaws.com/avatar.png"
    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
  <div class="absolute rounded-full right-0 bottom-0 w-1 h-1 bg-gray-200" />
 </div>
 <div class="relative rounded-full w-8 h-8">
  <img
    alt=""
    src="https://gustui.s3.amazonaws.com/avatar.png"
    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
  <div class="absolute rounded-full right-0 bottom-0 w-2 h-2 bg-green-400" />
 </div>
 <div class="relative rounded-full w-12 h-12">
  <img
    alt=""
    src="https://gustui.s3.amazonaws.com/avatar.png"
    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
  <div class="absolute rounded-full right-0 bottom-0 w-4 h-4 bg-red-600" />
 </div>
 <div class="relative rounded-full w-16 h-16">
  <img
    alt=""
    src="https://gustui.s3.amazonaws.com/avatar.png"
    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
  <div class="absolute rounded-full right-0 bottom-0 w-5 h-5 bg-gray-200" />
 </div>
 <div class="relative rounded-full w-20 h-20">
  <img
    alt=""
    src="https://gustui.s3.amazonaws.com/avatar.png"
    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
  <div class="absolute rounded-full right-0 bottom-0 w-6 h-6 bg-green-400" />
 </div>
 <div class="relative rounded-full w-24 h-24">
  <img
    alt=""
    src="https://gustui.s3.amazonaws.com/avatar.png"
    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
  <div class="absolute rounded-full right-0 bottom-0 w-6 h-6 bg-red-600" />
 </div>
--- a/src/components/presets/Badges.svelte
+++ b/src/components/presets/Badges.svelte
@@ -1,53 +0,0 @@
 <h3 class="text-lg">badges</h3>
 <span
  class="text-sm font-medium bg-green-100 py-1 px-2 rounded text-green-500 align-middle">Paid</span>
 <span
  class="text-sm font-medium bg-red-100 py-1 px-2 rounded text-red-500 align-middle">Overdue</span>
 <span
  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-blue-600">Primary</span>
 <span
  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-600">Secondary</span>
 <span
  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-green-600">Success</span>
 <span
  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-red-600">Danger</span>
 <span
  class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-yellow-400">Warning</span>
 <span
  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-indigo-300">Info</span>
 <span
  class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-gray-200">Light</span>
 <span
  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-900">Dark</span>
 <h3 class="text-lg">closable badges</h3>
 <span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-blue-600">
  Primary
  <span class="ml-2 text-base cursor-pointer">×</span>
 </span>
 <span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-600">
  Secondary
  <span class="ml-2 text-base cursor-pointer">×</span>
 </span>
 <span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-green-600">
  Success
  <span class="ml-2 text-base cursor-pointer">×</span>
 </span>
 <span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-red-600">
  Danger
  <span class="ml-2 text-base cursor-pointer">×</span>
 </span>
 <span class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-yellow-400">
  Warning
  <span class="ml-2 text-base cursor-pointer">×</span>
 </span>
 <span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-indigo-300">
  Info
  <span class="ml-2 text-base cursor-pointer">×</span>
 </span>
 <span class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-gray-200">
  Light<span class="ml-2 text-base cursor-pointer">×</span>
 </span>
 <span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-900">
  Dark
  <span class="ml-2 text-base cursor-pointer">×</span>
 </span>
--- a/src/components/presets/BreadcrumbNav.svelte
+++ b/src/components/presets/BreadcrumbNav.svelte
@@ -1,62 +0,0 @@
 <div class="flex flex-row mb-4">
  <div class="w-full">
    <nav class="w-full flex">
      <ol class="list-none flex flex-row items-center justify-start">
        <li class="mr-2 flex items-center">
          <svg
            stroke="currentColor"
            fill="none"
            stroke-width="2"
            viewBox="0 0 24 24"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="h-3 w-3 stroke-current"
            height="1em"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"><path
              d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
            <polyline points="9 22 9 12 15 12 15 22" /></svg>
        </li>
        <li class="flex items-center">
          <a class="mr-2" href="/">Home</a><svg
            stroke="currentColor"
            fill="none"
            stroke-width="2"
            viewBox="0 0 24 24"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="h-3 w-3 mr-2 stroke-current"
            height="1em"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"><line
              x1="5"
              y1="12"
              x2="19"
              y2="12" />
            <polyline points="12 5 19 12 12 19" /></svg>
        </li>
        <li class="flex items-center">
          <a class="mr-2" href="/">Second level</a><svg
            stroke="currentColor"
            fill="none"
            stroke-width="2"
            viewBox="0 0 24 24"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="h-3 w-3 mr-2 stroke-current"
            height="1em"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"><line
              x1="5"
              y1="12"
              x2="19"
              y2="12" />
            <polyline points="12 5 19 12 12 19" /></svg>
        </li>
        <li class="flex items-center">
          <a class="mr-2" href="/">Third level</a>
        </li>
      </ol>
    </nav>
  </div>
 </div>
--- a/src/components/presets/ComponentDump.svelte
+++ b/src/components/presets/ComponentDump.svelte
@@ -1,75 +0,0 @@
 <script>
  import Avatars from "./Avatars.svelte";
  import Badges from "./Badges.svelte";
  import BreadcrumbNav from "./BreadcrumbNav.svelte";
  import FileUpload from "./FileUpload.svelte";
  import Pagination from "./Pagination.svelte";
  import Table from "./Table.svelte";
  import Tabs from "./Tabs.svelte";
  import Tags from "./Tags.svelte";
 </script>
 <div class="border-4 border-dashed rounded h-96 mb-4" />
 <div class="mb-8">
  <FileUpload />
 </div>
 <div class="mb-8">
  <Tabs />
 </div>
 <div class="mb-8">
  <Tags />
 </div>
 <div class="mb-8">
  <Badges />
 </div>
 <div class="mb-8">
  <Avatars />
 </div>
 <Pagination />
 <div class="mb-8">
  <Table />
 </div>
 <div
  class="widget w-full p-4 mb-4 rounded-lg bg-white border border-grey-100">
  <div class="flex flex-row items-center justify-between mb-6">
    <div class="flex flex-col">
      <div class="text-sm font-light text-grey-500">Regular</div>
      <div class="text-sm font-bold"><span>Text inputs</span></div>
    </div>
  </div>
  <div class="flex flex-col lg:flex-row lg:flex-wrap w-full lg:space-x-4">
    <div class="w-full lg:w-1/4">
      <div class="form-element ">
        <div class="form-label">Label</div><input
          name="name"
          type="text"
          class="form-input"
          placeholder="Enter something..." />
        <div class="form-hint">This is a hint</div>
      </div>
    </div>
    <div class="w-full lg:w-1/4">
      <div class="form-element ">
        <div class="form-label">First name</div><input
          name="name"
          type="text"
          class="form-input form-input-invalid"
          placeholder="john@example.com" />
        <div class="form-error">First name is required</div>
      </div>
    </div>
    <div class="w-full lg:w-1/4">
      <div class="form-element ">
        <div class="form-label">First name</div><input
          name="name"
          type="text"
          class="form-input form-input-valid"
          placeholder="john@example.com" />
        <div class="form-success">First name is valid</div>
      </div>
    </div>
  </div>
 </div>
 <div class="mb-8">
  <BreadcrumbNav />
 </div>
--- a/src/components/presets/ConversionsChart.svelte
+++ b/src/components/presets/ConversionsChart.svelte
@@ -1,281 +0,0 @@
 <div class="w-full p-4 rounded-lg bg-white border border-grey-100">
  <div class="flex flex-row items-center justify-between mb-6">
    <div class="flex flex-col">
      <div class="text-sm font-light text-grey-500">Conversions</div>
      <div class="text-sm font-bold"><span>This year</span></div>
    </div>
    <div class="relative"><button
        class="btn btn-default btn-circle btn-icon bg-transparent hover:bg-transparent active:bg-transparent relative"><svg
          stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
          stroke-linejoin="round" class="stroke-current stroke-1" size="18" height="18" width="18"
          xmlns="http://www.w3.org/2000/svg">
          <circle cx="12" cy="12" r="1"></circle>
          <circle cx="12" cy="5" r="1"></circle>
          <circle cx="12" cy="19" r="1"></circle>
        </svg></button>
      <div class="dropdown absolute top-0 right-0 mt-8 ">
        <div class="dropdown-content w-48 bottom-start">
          <div class="flex flex-col w-full">
            <ul class="list-none">
              <li><a
                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                  href="/">Today</a></li>
              <li><a
                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                  href="/">This week</a></li>
              <li><a
                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                  href="/">This month</a></li>
              <li><a
                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                  href="/">This year</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="flex flex-row w-full">
    <div style="width:100%;height:240px">
      <div class="recharts-responsive-container" style="width:100%;height:100%">
        <div class="recharts-wrapper"
          style="position: relative; cursor: default; width: 704px; height: 240px;"><svg
            class="recharts-surface" width="704" height="240" viewBox="0 0 704 240" version="1.1">
            <defs>
              <clipPath id="recharts3-clip">
                <rect x="40" y="10" height="190" width="654"></rect>
              </clipPath>
            </defs>
            <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
              <g class="recharts-cartesian-axis-ticks">
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30" x="67.25"
                    y="208" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
                    text-anchor="middle">
                    <tspan x="67.25" dy="0.71em">Jan</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
                    x="121.75" y="208" stroke="none" fill="#666"
                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
                    <tspan x="121.75" dy="0.71em">Feb</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
                    x="176.25" y="208" stroke="none" fill="#666"
                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
                    <tspan x="176.25" dy="0.71em">Mar</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
                    x="230.75" y="208" stroke="none" fill="#666"
                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
                    <tspan x="230.75" dy="0.71em">Apr</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
                    x="285.25" y="208" stroke="none" fill="#666"
                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
                    <tspan x="285.25" dy="0.71em">May</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
                    x="339.75" y="208" stroke="none" fill="#666"
                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
                    <tspan x="339.75" dy="0.71em">Jun</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
                    x="394.25" y="208" stroke="none" fill="#666"
                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
                    <tspan x="394.25" dy="0.71em">Jul</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
                    x="448.75" y="208" stroke="none" fill="#666"
                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
                    <tspan x="448.75" dy="0.71em">Aug</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
                    x="503.25" y="208" stroke="none" fill="#666"
                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
                    <tspan x="503.25" dy="0.71em">Sep</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
                    x="557.75" y="208" stroke="none" fill="#666"
                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
                    <tspan x="557.75" dy="0.71em">Oct</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
                    x="612.25" y="208" stroke="none" fill="#666"
                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
                    <tspan x="612.25" dy="0.71em">Nov</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
                    x="666.75" y="208" stroke="none" fill="#666"
                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
                    <tspan x="666.75" dy="0.71em">Dec</tspan>
                  </text></g>
              </g>
            </g>
            <g class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis">
              <g class="recharts-cartesian-axis-ticks">
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
                    y="200" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
                    text-anchor="end">
                    <tspan x="32" dy="0.355em">0</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
                    y="152.5" stroke="none" fill="#666"
                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
                    <tspan x="32" dy="0.355em">65</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
                    y="105" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
                    text-anchor="end">
                    <tspan x="32" dy="0.355em">130</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
                    y="57.5" stroke="none" fill="#666"
                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
                    <tspan x="32" dy="0.355em">195</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
                    y="10" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
                    text-anchor="end">
                    <tspan x="32" dy="0.355em">260</tspan>
                  </text></g>
              </g>
            </g>
            <g class="recharts-layer recharts-bar">
              <g class="recharts-layer recharts-bar-rectangles">
                <g class="recharts-layer">
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#90caf9" width="10" height="119.11538461538461" x="55" y="80.88461538461539"
                      radius="0" class="recharts-rectangle"
                      d="M 55,80.88461538461539 h 10 v 119.11538461538461 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#90caf9" width="10" height="95" x="109.5" y="105" radius="0"
                      class="recharts-rectangle" d="M 109.5,105 h 10 v 95 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#90caf9" width="10" height="122.03846153846155" x="164" y="77.96153846153845"
                      radius="0" class="recharts-rectangle"
                      d="M 164,77.96153846153845 h 10 v 122.03846153846155 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#90caf9" width="10" height="81.11538461538461" x="218.5"
                      y="118.88461538461539" radius="0" class="recharts-rectangle"
                      d="M 218.5,118.88461538461539 h 10 v 81.11538461538461 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#90caf9" width="10" height="114" x="273" y="86" radius="0"
                      class="recharts-rectangle" d="M 273,86 h 10 v 114 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#90caf9" width="10" height="117.65384615384616" x="327.5"
                      y="82.34615384615384" radius="0" class="recharts-rectangle"
                      d="M 327.5,82.34615384615384 h 10 v 117.65384615384616 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#90caf9" width="10" height="103.76923076923076" x="382" y="96.23076923076924"
                      radius="0" class="recharts-rectangle"
                      d="M 382,96.23076923076924 h 10 v 103.76923076923076 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#90caf9" width="10" height="92.80769230769232" x="436.5"
                      y="107.19230769230768" radius="0" class="recharts-rectangle"
                      d="M 436.5,107.19230769230768 h 10 v 92.80769230769232 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#90caf9" width="10" height="92.80769230769232" x="491" y="107.19230769230768"
                      radius="0" class="recharts-rectangle"
                      d="M 491,107.19230769230768 h 10 v 92.80769230769232 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#90caf9" width="10" height="127.8846153846154" x="545.5" y="72.1153846153846"
                      radius="0" class="recharts-rectangle"
                      d="M 545.5,72.1153846153846 h 10 v 127.8846153846154 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#90caf9" width="10" height="105.23076923076924" x="600" y="94.76923076923076"
                      radius="0" class="recharts-rectangle"
                      d="M 600,94.76923076923076 h 10 v 105.23076923076924 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#90caf9" width="10" height="115.46153846153845" x="654.5"
                      y="84.53846153846155" radius="0" class="recharts-rectangle"
                      d="M 654.5,84.53846153846155 h 10 v 115.46153846153845 h -10 Z"></path>
                  </g>
                </g>
              </g>
            </g>
            <g class="recharts-layer recharts-bar">
              <g class="recharts-layer recharts-bar-rectangles">
                <g class="recharts-layer">
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#1e88e5" width="10" height="112.53846153846155" x="69" y="87.46153846153845"
                      radius="0" class="recharts-rectangle"
                      d="M 69,87.46153846153845 h 10 v 112.53846153846155 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#1e88e5" width="10" height="151.26923076923077" x="123.5"
                      y="48.730769230769226" radius="0" class="recharts-rectangle"
                      d="M 123.5,48.730769230769226 h 10 v 151.26923076923077 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#1e88e5" width="10" height="181.23076923076923" x="178" y="18.769230769230774"
                      radius="0" class="recharts-rectangle"
                      d="M 178,18.769230769230774 h 10 v 181.23076923076923 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#1e88e5" width="10" height="165.8846153846154" x="232.5" y="34.11538461538461"
                      radius="0" class="recharts-rectangle"
                      d="M 232.5,34.11538461538461 h 10 v 165.8846153846154 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#1e88e5" width="10" height="156.38461538461536" x="287" y="43.61538461538464"
                      radius="0" class="recharts-rectangle"
                      d="M 287,43.61538461538464 h 10 v 156.38461538461536 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#1e88e5" width="10" height="118.38461538461539" x="341.5"
                      y="81.61538461538461" radius="0" class="recharts-rectangle"
                      d="M 341.5,81.61538461538461 h 10 v 118.38461538461539 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#1e88e5" width="10" height="138.84615384615384" x="396" y="61.15384615384616"
                      radius="0" class="recharts-rectangle"
                      d="M 396,61.15384615384616 h 10 v 138.84615384615384 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#1e88e5" width="10" height="175.3846153846154" x="450.5"
                      y="24.615384615384613" radius="0" class="recharts-rectangle"
                      d="M 450.5,24.615384615384613 h 10 v 175.3846153846154 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#1e88e5" width="10" height="155.65384615384613" x="505" y="44.34615384615387"
                      radius="0" class="recharts-rectangle"
                      d="M 505,44.34615384615387 h 10 v 155.65384615384613 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#1e88e5" width="10" height="179.76923076923077" x="559.5"
                      y="20.230769230769226" radius="0" class="recharts-rectangle"
                      d="M 559.5,20.230769230769226 h 10 v 179.76923076923077 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#1e88e5" width="10" height="173.19230769230768" x="614" y="26.80769230769232"
                      radius="0" class="recharts-rectangle"
                      d="M 614,26.80769230769232 h 10 v 173.19230769230768 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#1e88e5" width="10" height="146.15384615384616" x="668.5"
                      y="53.84615384615384" radius="0" class="recharts-rectangle"
                      d="M 668.5,53.84615384615384 h 10 v 146.15384615384616 h -10 Z"></path>
                  </g>
                </g>
              </g>
            </g>
          </svg>
          <div class="recharts-tooltip-wrapper"
            style="pointer-events: none; visibility: hidden; position: absolute; top: 0px; transform: translate(538.875px, 126px);">
          </div>
        </div>
        <div style="position:absolute;width:0;height:0;visibility:hidden;display:none"></div>
      </div>
    </div>
  </div>
 </div>
--- a/src/components/presets/Pagination.svelte
+++ b/src/components/presets/Pagination.svelte
@@ -1,103 +0,0 @@
 <!-- This example requires Tailwind CSS v2.0+ -->
 <div
  class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
  <div class="flex-1 flex justify-between sm:hidden">
    <a
      href="#"
      class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500">
      Previous
    </a>
    <a
      href="#"
      class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500">
      Next
    </a>
  </div>
  <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
    <div>
      <p class="text-sm text-gray-700">
        Showing
        <span class="font-medium">1</span>
        to
        <span class="font-medium">10</span>
        of
        <span class="font-medium">97</span>
        results
      </p>
    </div>
    <div>
      <nav
        class="relative z-0 inline-flex shadow-sm -space-x-px"
        aria-label="Pagination">
        <a
          href="#"
          class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
          <span class="sr-only">Previous</span>
          <!-- Heroicon name: chevron-left -->
          <svg
            class="h-5 w-5"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true">
            <path
              fill-rule="evenodd"
              d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
              clip-rule="evenodd" />
          </svg>
        </a>
        <a
          href="#"
          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
          1
        </a>
        <a
          href="#"
          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
          2
        </a>
        <a
          href="#"
          class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
          3
        </a>
        <span
          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
          ...
        </span>
        <a
          href="#"
          class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
          8
        </a>
        <a
          href="#"
          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
          9
        </a>
        <a
          href="#"
          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
          10
        </a>
        <a
          href="#"
          class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
          <span class="sr-only">Next</span>
          <!-- Heroicon name: chevron-right -->
          <svg
            class="h-5 w-5"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true">
            <path
              fill-rule="evenodd"
              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
              clip-rule="evenodd" />
          </svg>
        </a>
      </nav>
    </div>
  </div>
 </div>
--- a/src/components/presets/Profile.svelte
+++ b/src/components/presets/Profile.svelte
@@ -1,242 +0,0 @@
 <div class="min-h-screen w-full p-4">
  <div class="section-title w-full mb-6 pt-3">
    <div class="flex flex-row items-center justify-between mb-4">
      <div class="flex flex-col">
        <div class="text-xs uppercase font-light text-grey-500">Pages</div>
        <div class="text-xl font-bold">User profile</div>
      </div>
    </div>
  </div>
  <div
    class="w-full p-4 mb-4 rounded-lg bg-white border border-grey-100">
    <div class="flex flex-row items-center justify-start p-4">
      <div class="flex-shrink-0 w-24">
        <img
          src="/images/faces/m1.png"
          alt="media"
          class="shadow rounded-full h-20 w-20 shadow-outline mb-2" />
      </div>
      <div class="py-2 px-2">
        <p class="text-base font-bold whitespace-no-wrap">Lucas Smith</p>
        <p class="text-sm text-grey-500 whitespace-no-wrap">
          Vital Database Dude
        </p>
        <div
          class="flex flex-row items-center justify-start w-full py-1 space-x-2">
          <svg
            stroke="currentColor"
            fill="none"
            stroke-width="2"
            viewBox="0 0 24 24"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="stroke-current text-xl text-twitter"
            height="1em"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"><path
              d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" /></svg><svg
            stroke="currentColor"
            fill="none"
            stroke-width="2"
            viewBox="0 0 24 24"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="stroke-current text-xl text-facebook"
            height="1em"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"><path
              d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" /></svg><svg
            stroke="currentColor"
            fill="none"
            stroke-width="2"
            viewBox="0 0 24 24"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="stroke-current text-xl text-instagram"
            height="1em"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"><rect
              x="2"
              y="2"
              width="20"
              height="20"
              rx="5"
              ry="5" />
            <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
            <line x1="17.5" y1="6.5" x2="17.5" y2="6.5" /></svg>
        </div>
      </div>
      <div class="ml-auto flex-shrink-0 space-x-2 hidden lg:flex">
        <button
          class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white">Subscribe</button><button
          class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white">Follow</button>
      </div>
    </div>
    <div class="flex flex-wrap">
      <div class="w-full p-4">
        <div class="flex flex-wrap flex-col w-full tabs">
          <div class="flex lg:flex-wrap flex-row lg:space-x-2">
            <div class="flex-none">
              <button class="tab tab-underline tab-active" type="button">Account
                settings</button>
            </div>
            <div class="flex-none">
              <button class="tab tab-underline" type="button">Email preferences</button>
            </div>
            <div class="flex-none">
              <button class="tab tab-underline" type="button">Security settings</button>
            </div>
          </div>
          <div class="tab-content block">
            <div class="py-4 w-full lg:w-1/2">
              <div class="flex flex-col">
                <form class="form flex flex-wrap w-full">
                  <div class="w-full">
                    <div class="form-element">
                      <div class="form-label">First name</div><input
                        name="first-name"
                        type="text"
                        class="form-input "
                        placeholder="Enter you first name" />
                    </div>
                    <div class="form-element">
                      <div class="form-label">Last name</div><input
                        name="last-name"
                        type="text"
                        class="form-input "
                        placeholder="Enter you last name" />
                    </div>
                    <div class="form-element">
                      <div class="form-label">Email address</div><input
                        name="email"
                        type="email"
                        class="form-input "
                        placeholder="Enter you email address" />
                    </div>
                    <div class="form-element">
                      <div class="form-label">Company</div><input
                        name="company"
                        type="text"
                        class="form-input "
                        placeholder="Enter you company" />
                    </div>
                    <div class="form-element">
                      <div class="form-label">Position</div><input
                        name="position"
                        type="text"
                        class="form-input "
                        placeholder="Enter you position" />
                    </div>
                    <div class="form-element">
                      <div class="form-label">Language</div><select
                        name="language"
                        class="form-select "><option>Select language</option>
                        <option value="english">English</option>
                        <option value="spanish">Spanish</option>
                        <option value="portuguese">Portuguese</option></select>
                    </div>
                  </div><input
                    type="submit"
                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded" />
                </form>
              </div>
            </div>
          </div>
          <div class="tab-content hidden">
            <div class="py-4 w-full lg:w-1/2">
              <div class="flex flex-col">
                <form class="form flex flex-wrap w-full">
                  <div class="w-full">
                    <div class="form-element">
                      <div class="form-label">Current email</div><input
                        name="email"
                        type="email"
                        class="form-input "
                        placeholder="Enter you current email address" />
                    </div>
                    <div class="form-element">
                      <div class="form-label">New email</div><input
                        name="email"
                        type="email"
                        class="form-input "
                        placeholder="Enter you new email address" />
                    </div>
                    <div class="form-element">
                      <div class="form-label">Daily updates</div>
                      <div class="flex items-center justify-start space-x-2">
                        <label
                          class="flex items-center justify-start space-x-2"><input
                            type="radio"
                            name="daily-updates"
                            class="form-radio h-4 w-4 "
                            value="yes" /><span
                            class="">Yes</span></label><label
                          class="flex items-center justify-start space-x-2"><input
                            type="radio"
                            name="daily-updates"
                            class="form-radio h-4 w-4 "
                            value="no" /><span class="">No</span></label>
                      </div>
                    </div>
                    <div class="form-element">
                      <div class="form-label">Weekly updates</div>
                      <div class="flex items-center justify-start space-x-2">
                        <label
                          class="flex items-center justify-start space-x-2"><input
                            type="radio"
                            name="weekle-updates"
                            class="form-radio h-4 w-4 "
                            value="yes" /><span
                            class="">Yes</span></label><label
                          class="flex items-center justify-start space-x-2"><input
                            type="radio"
                            name="weekle-updates"
                            class="form-radio h-4 w-4 "
                            value="no" /><span class="">No</span></label>
                      </div>
                    </div>
                  </div><input
                    type="submit"
                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded" />
                </form>
              </div>
            </div>
          </div>
          <div class="tab-content hidden">
            <div class="py-4 w-full lg:w-1/2">
              <div class="flex flex-col">
                <form class="form flex flex-wrap w-full">
                  <div class="w-full">
                    <div class="form-element">
                      <div class="form-label">Current password</div><input
                        name="current-password"
                        type="password"
                        class="form-input "
                        placeholder="Enter your current password" />
                    </div>
                    <div class="form-element">
                      <div class="form-label">New password</div><input
                        name="new-password"
                        type="password"
                        class="form-input "
                        placeholder="Enter your new password" />
                    </div>
                    <div class="form-element">
                      <div class="form-label">Confirm new password</div><input
                        name="confirm-new-password"
                        type="password"
                        class="form-input "
                        placeholder="Enter your new password confirmation" />
                    </div>
                  </div><input
                    type="submit"
                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded" />
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
 </div>
--- a/src/components/presets/Table.svelte
+++ b/src/components/presets/Table.svelte
@@ -1,84 +0,0 @@
 <!-- This example requires Tailwind CSS v2.0+ -->
 <div class="flex flex-col">
  <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
    <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
      <div
        class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
        <table class="min-w-full divide-y divide-gray-200">
          <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">
                Name
              </th>
              <th
                scope="col"
                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Title
              </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="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Role
              </th>
              <th scope="col" class="relative px-6 py-3">
                <span class="sr-only">{$_('edit')}</span>
              </th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-200">
            <tr>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div class="flex-shrink-0 h-10 w-10">
                    <img
                      class="h-10 w-10 rounded-full"
                      src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=60"
                      alt="" />
                  </div>
                  <div class="ml-4">
                    <div class="text-sm font-medium text-gray-900">
                      Jane Cooper
                    </div>
                    <div class="text-sm text-gray-500">
                      jane.cooper@example.com
                    </div>
                  </div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-900">
                  Regional Paradigm Technician
                </div>
                <div class="text-sm text-gray-500">Optimization</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span
                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                  Active
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                Admin
              </td>
              <td
                class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                <a
                  href="#"
                  class="text-indigo-600 hover:text-indigo-900">{$_('edit')}</a>
              </td>
            </tr>
            <!-- More rows... -->
          </tbody>
        </table>
      </div>
    </div>
  </div>
 </div>
--- a/Show More
+++ b/Show More