🚀RELEASE v1.5.3

feat(dx): Yarn support
refactor(ci): Only build licences, don't export
2024-11-26 19:20:04 +01:00 · 2024-11-26 19:19:31 +01:00 · 2024-11-26 19:11:14 +01:00 · 2024-11-26 19:06:32 +01:00 · 2024-11-26 19:06:16 +01:00 · 2024-11-26 19:01:51 +01:00
78 changed files with 9623 additions and 6635 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,2 +1,4 @@
 public/env.sample.js
-.pnpm-store
+.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/.gitignore
+++ b/.gitignore
@@ -3,4 +3,6 @@ node_modules
 public/env.js
 public/index.html
 /dist
-.pnpm-store
+.pnpm-store
+.yarn
+.pnp.*
--- a/.woodpecker/build.yml
+++ b/.woodpecker/build.yml
@@ -0,0 +1,26 @@
+steps:
+  - name: run full license export
+    image: registry.odit.services/hub/library/node:19.7.0-alpine3.16
+    commands:
+      - npm i -g pnpm@8
+      - pnpm i
+      - pnpm licenses:export
+  - name: build dev
+    image: woodpeckerci/plugin-docker-buildx
+    settings:
+      repo: registry.odit.services/lfk/frontend
+      tags:
+        - dev
+        - latest
+      registry: registry.odit.services
+      platforms: linux/amd64,linux/arm64
+      cache_from: registry.odit.services/lfk/frontend:dev
+      username:
+        from_secret: odit-registry-builder-username
+      password:
+        from_secret: odit-registry-builder-password
+when:
+  event:
+    - push
+  branch:
+    - dev
--- a/.woodpecker/release.yml
+++ b/.woodpecker/release.yml
@@ -0,0 +1,17 @@
+steps:
+  - name: build tag
+    image: woodpeckerci/plugin-docker-buildx
+    settings:
+      repo: registry.odit.services/lfk/frontend
+      tags:
+        - "${CI_COMMIT_TAG}"
+      registry: registry.odit.services
+      platforms: linux/amd64,linux/arm64
+      cache_from: registry.odit.services/lfk/frontend:latest
+      username:
+        from_secret: odit-registry-builder-username
+      password:
+        from_secret: odit-registry-builder-password
+when:
+  event:
+    - tag
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,8 +2,212 @@

 All notable changes to this project will be documented in this file. Dates are displayed in UTC.

+#### [1.5.3](https://git.odit.services/lfk/frontend/compare/1.5.2...1.5.3)
+
+- 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)
+- 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:20.0.0-alpine3.17 as build
+FROM registry.odit.services/hub/library/node:23.2.0-alpine3.20 AS build
 ARG NPM_REGISTRY_URL=https://registry.npmjs.org
 WORKDIR /app

-COPY package.json pnpm-lock.yaml *.config.js *.config.cjs index.html ./
-RUN npm config set registry $NPM_REGISTRY_URL && npm i -g pnpm@8 && pnpm i
+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@9
+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/index.html
+++ b/index.html
@@ -13,7 +13,7 @@

  <body>
    <span style="display: none; visibility: hidden" id="buildinfo"
-      >RELEASE_INFO-1.3.4-RELEASE_INFO</span
+      >RELEASE_INFO-1.5.3-RELEASE_INFO</span
    >
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <script src="/env.js"></script>
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@odit/lfk-frontend",
-  "version": "1.3.4",
+  "version": "1.5.3",
  "type": "module",
  "scripts": {
    "i18n-order": "node order.js",
@@ -12,16 +12,16 @@
  },
  "license": "CC-BY-NC-SA-4.0",
  "devDependencies": {
-    "@odit/license-exporter": "0.0.12",
+    "@odit/license-exporter": "0.2.0",
    "@sveltejs/vite-plugin-svelte": "2.1.1",
-    "auto-changelog": "2.4.0",
-    "autoprefixer": "10.4.14",
-    "postcss": "8.4.23",
-    "prettier": "^2.8.8",
-    "prettier-plugin-svelte": "^2.10.0",
-    "release-it": "15.10.1",
+    "auto-changelog": "2.5.0",
+    "autoprefixer": "10.4.20",
+    "postcss": "8.4.49",
+    "prettier": "3.3.3",
+    "prettier-plugin-svelte": "3.2.8",
+    "release-it": "17.10.0",
    "svelte-select": "3.17.0",
-    "tailwindcss": "3.3.2",
+    "tailwindcss": "3.4.15",
    "vite": "4.3.3"
  },
  "release-it": {
@@ -42,20 +42,19 @@
    }
  },
  "dependencies": {
-    "@odit/lfk-client-js": "1.1.1",
-    "@paralleldrive/cuid2": "^2.2.0",
-    "@tanstack/svelte-table": "^8.8.6",
-    "bwip-js": "^3.4.0",
-    "check-password-strength": "2.0.7",
+    "@odit/lfk-client-js": "1.1.3",
+    "@paralleldrive/cuid2": "2.2.2",
+    "@tanstack/svelte-table": "8.9.1",
+    "bwip-js": "3.4.0",
+    "check-password-strength": "2.0.10",
    "csvtojson": "2.0.10",
-    "gridjs": "3.4.0",
    "localforage": "1.10.0",
    "marked": "4.3.0",
    "svelte": "3.58.0",
-    "svelte-french-toast": "1.0.4-beta.0",
+    "svelte-french-toast": "1.2.0",
    "svelte-i18n": "3.6.0",
    "tinro": "0.6.12",
-    "validator": "13.9.0",
+    "validator": "13.12.0",
    "xlsx": "0.18.5"
  },
  "volta": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/env.sample.js
+++ b/public/env.sample.js
@@ -1,10 +1,11 @@
 const config = {
-  baseurl: "http://localhost:4010",
-  baseurl_documentserver: "http://localhost:4010/documents",
-  documentserver_key:
-    "NqZSYTy5AFQ7MppbLW5moqpTk7u7YrNUHKYhKYuThnnya2WpCOIU694hIZT1FzYe",
-  // optional
-  default_username: "demo",
-  default_password: "demo",
-  prefersHashRouting: true,
+	baseurl: "http://localhost:4010",
+	baseurl_documentserver: "http://localhost:4010/documents",
+	documentserver_key:
+		"NqZSYTy5AFQ7MppbLW5moqpTk7u7YrNUHKYhKYuThnnya2WpCOIU694hIZT1FzYe",
+	// optional
+	default_username: "demo",
+	default_password: "demo",
+	prefersHashRouting: true,
 };
+window.config = config;
--- a/public/licenses.json
+++ b/public/licenses.json
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,5 +1,4 @@
 <script>
-  import "gridjs/dist/theme/mermaid.css";
  import { Route, router } from "tinro";
  router.subscribe((routeInfo) => {
    window.scrollTo(0, 0);
@@ -23,7 +22,7 @@
    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") {
--- a/src/components/auth/Login.svelte
+++ b/src/components/auth/Login.svelte
@@ -20,7 +20,6 @@
        OpenAPI.TOKEN = value.access_token;
        const jwtinfo = JSON.parse(atob(OpenAPI.TOKEN.split(".")[1]));
        store.login(value, jwtinfo);
-        toast($_("welcome_wavinghand"));
      }
    }
  });
@@ -50,7 +49,6 @@
          store.login(result.access_token, jwtinfo);
          location.replace("/");
          toast.dismiss();
-          toast($_("welcome_wavinghand"));
        })
        .catch((err) => {
          toast.dismiss();
@@ -76,8 +74,8 @@
 >
  <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-sm text-center">{$_("log_in_to_your_account")}</p>
+    <p class="mt-6 text-xl text-center font-bold">{$_("application_name")}</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>
@@ -129,14 +127,14 @@
        </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"
      >
        {$_("forgot_password")}
      </a>
-    </div>
+    </div> -->
  </div>
 </div>
 <Footer />
--- 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 font-mono">
    {$_("cards")}
-    {#if store.state.jwtinfo.userdetails.permissions.includes("CARD:CREATE")}
-      <button
-        on:click={() => {
-          modal_open = true;
-        }}
-        type="button"
-        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-      >
-        {$_("add-card")}
-      </button>
-      <button
-        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"
-      >
-        {$_("create-bulk-cards")}
-      </button>
-    {/if}
-  </span>
+  </h4>
+  {#if store.state.jwtinfo.userdetails.permissions.includes("CARD:CREATE")}
+    <button
+      on:click={() => {
+        modal_open = true;
+      }}
+      type="button"
+      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mt-1 sm:mt-0"
+    >
+      {$_("add-card")}
+    </button>
+    <button
+      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:w-auto sm:text-sm mt-1 sm:mt-0"
+    >
+      {$_("create-bulk-cards")}
+    </button>
+  {/if}
  <CardsOverview bind:current_cards bind:addCards />
 </section>

--- a/src/components/cards/CardsEmptyState.svelte
+++ b/src/components/cards/CardsEmptyState.svelte
@@ -5,7 +5,7 @@

 <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>{$_("add-your-first-card")}</span>
  </p>
--- a/src/components/cards/CardsOverview.svelte
+++ b/src/components/cards/CardsOverview.svelte
@@ -151,12 +151,12 @@
  }

  onMount(async () => {
-    toast.loading($_("loading-cards"));
    let page = 0;
+    let pagesize = 500;
    while (page >= 0) {
      const cards = await RunnerCardService.runnerCardControllerGetAll(
        page,
-        150
+        pagesize
      );
      if (cards.length == 0) {
        page = -2;
@@ -171,8 +171,6 @@
      dataLoaded = true;
      page++;
    }
-    toast.dismiss();
-    toast.success($_("all-cards-loaded"));
  });
 </script>

@@ -218,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 = [];
@@ -310,3 +308,9 @@
    <TableBottom {table} {selected} />
  {/if}
 {/if}
+
+<style>
+  table tbody tr td:nth-child(2) {
+    font-family: monospace;
+  }
+</style>
--- a/src/components/contacts/ContactDetail.svelte
+++ b/src/components/contacts/ContactDetail.svelte
@@ -152,7 +152,7 @@
          {#if delete_triggered}
            <button
              on:click={deleteContact}
-              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 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"
              >{$_("confirm-deletion")}</button
            >
            <button
@@ -169,7 +169,7 @@
                delete_triggered = true;
              }}
              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 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-contact")}</button
            >
          {/if}
@@ -180,7 +180,7 @@
            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"
+            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"
            >{$_("save-changes")}</button
          >
        {/if}
--- a/src/components/contacts/Contacts.svelte
+++ b/src/components/contacts/Contacts.svelte
@@ -8,20 +8,20 @@
 </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 font-mono">
    {$_("contacts")}
-    {#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:CREATE")}
-      <button
-        on:click={() => {
-          modal_open = true;
-        }}
-        type="button"
-        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-      >
-        {$_("create-a-new-contact")}
-      </button>
-    {/if}
-  </span>
+  </h4>
+  {#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:CREATE")}
+    <button
+      on:click={() => {
+        modal_open = true;
+      }}
+      type="button"
+      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+    >
+      {$_("create-a-new-contact")}
+    </button>
+  {/if}
  <ContactsOverview bind:current_contacts />
 </section>

--- a/src/components/contacts/ContactsOverview.svelte
+++ b/src/components/contacts/ContactsOverview.svelte
@@ -32,7 +32,7 @@
        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"
@@ -69,7 +69,10 @@
                .toString()
                .toLowerCase()
                .includes(searchvalue)}
-                <tr data-rowid="team_{t.id}">
+                <tr
+                  class="odd:bg-white even:bg-gray-100"
+                  data-rowid="team_{t.id}"
+                >
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="ml-4">
--- a/src/components/dashboard/Dashboard.svelte
+++ b/src/components/dashboard/Dashboard.svelte
@@ -20,16 +20,16 @@
  >
    <a href="/" class="flex items-center px-4 py-5">
      <img src="/lfk-logo.png" alt="Logo" class="h-10" />
-      <h3 class="text-lg">Lauf für Kaya! Admin</h3>
+      <h3 class="text-lg font-bold">LfK!Admin</h3>
    </a>
    <nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
      <a
-        class:bg-gray-100={$router.path === "/"}
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        class:activenav={$router.path === "/"}
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
        href="/"
      >
        <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"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
@@ -40,79 +40,16 @@
        </svg>
        <span>{$_("dashboard-title")}</span>
      </a>
-      {#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:GET")}
-        <a
-          class:bg-gray-100={$router.path.includes("/orgs/")}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/orgs/"
-        >
-          <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-            fill="currentColor"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            width="24"
-            height="24"
-            ><path fill="none" d="M0 0h24v24H0z" />
-            <path
-              d="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
-          >
-          <span>{$_("orgs")}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes("USER:GET")}
-        <a
-          class:bg-gray-100={$router.path === "/users/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/users/"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-            fill="currentColor"
-            viewBox="0 0 24 24"
-            ><path fill="none" d="M0 0h24v24H0z" />
-            <path
-              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
-          >
-          <span>{$_("users")}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:GET")}
-        <a
-          class:bg-gray-100={$router.path === "/groups/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/groups/"
-        >
-          <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-            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"
-            /></svg
-          >
-          <span>{$_("user-groups")}</span>
-        </a>
-      {/if}
      {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
        <a
-          class:bg-gray-100={$router.path === "/runners/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          class:activenav={$router.path === "/runners/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
          href="/runners/"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 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"
            fill="currentColor"
            width="24"
            height="24"
@@ -126,12 +63,12 @@
      {/if}
      {#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:GET")}
        <a
-          class:bg-gray-100={$router.path === "/teams/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          class:activenav={$router.path === "/teams/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
          href="/teams/"
        >
          <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"
            width="24"
            height="24"
@@ -145,14 +82,35 @@
          <span>{$_("teams")}</span>
        </a>
      {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:GET")}
+        <a
+          class:activenav={$router.path.includes("/orgs/")}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+          href="/orgs/"
+        >
+          <svg
+            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"
+            ><path fill="none" d="M0 0h24v24H0z" />
+            <path
+              d="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
+          >
+          <span>{$_("orgs")}</span>
+        </a>
+      {/if}
      {#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:GET")}
        <a
-          class:bg-gray-100={$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:activenav={$router.path.includes("/donors/")}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
          href="/donors/"
        >
          <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"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
@@ -168,12 +126,12 @@
      {/if}
      {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:GET")}
        <a
-          class:bg-gray-100={$router.path.includes("/donations/")}
-          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("/donations/")}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
          href="/donations/"
        >
          <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"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
@@ -189,12 +147,12 @@
      {/if}
      {#if store.state.jwtinfo.userdetails.permissions.includes("TRACK:GET")}
        <a
-          class:bg-gray-100={$router.path === "/tracks/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          class:activenav={$router.path === "/tracks/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
          href="/tracks/"
        >
          <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"
            width="24"
            height="24"
@@ -210,12 +168,12 @@
      {/if}
      {#if store.state.jwtinfo.userdetails.permissions.includes("CARD:GET")}
        <a
-          class:bg-gray-100={$router.path === "/cards/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          class:activenav={$router.path === "/cards/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
          href="/cards/"
        >
          <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"
            width="24"
            height="24"
@@ -233,12 +191,12 @@
      {/if}
      {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")}
        <a
-          class:bg-gray-100={$router.path === "/scans/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          class:activenav={$router.path === "/scans/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
          href="/scans/"
        >
          <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"
            width="24"
            height="24"
@@ -255,13 +213,13 @@
      {/if}
      {#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:GET")}
        <a
-          class:bg-gray-100={$router.path === "/contacts/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          class:activenav={$router.path === "/contacts/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
          href="/contacts/"
        >
          <svg
            fill="currentColor"
-            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"
            viewBox="0 0 24 24"
            width="24"
@@ -276,12 +234,12 @@
      {/if}
      {#if store.state.jwtinfo.userdetails.permissions.includes("STATION:GET")}
        <a
-          class:bg-gray-100={$router.path === "/scanstations/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          class:activenav={$router.path === "/scanstations/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
          href="/scanstations/"
        >
          <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"
            width="24"
            height="24"
@@ -298,12 +256,12 @@
      {/if}
      {#if store.state.jwtinfo.userdetails.permissions.includes("STATSCLIENT:GET")}
        <a
-          class:bg-gray-100={$router.path === "/statsclients/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          class:activenav={$router.path === "/statsclients/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
          href="/statsclients/"
        >
          <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"
            width="24"
            height="24"
@@ -318,13 +276,55 @@
          <span>{$_("statsclients")}</span>
        </a>
      {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes("USER:GET")}
+        <a
+          class:activenav={$router.path === "/users/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+          href="/users/"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+            ><path fill="none" d="M0 0h24v24H0z" />
+            <path
+              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
+          >
+          <span>{$_("users")}</span>
+        </a>
+      {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:GET")}
+        <a
+          class:activenav={$router.path === "/groups/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+          href="/groups/"
+        >
+          <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 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
+          >
+          <span>{$_("user-groups")}</span>
+        </a>
+      {/if}
      <a
-        class:bg-gray-100={$router.path === "/settings/"}
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        class:activenav={$router.path === "/settings/"}
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
        href="/settings/"
      >
        <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"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
@@ -338,12 +338,12 @@
        <span>{$_("settings")}</span>
      </a>
      <a
-        class:bg-gray-100={$router.path === "/about/"}
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        class:activenav={$router.path === "/about/"}
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
        href="/about/"
      >
        <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"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          stroke="currentColor"
@@ -356,16 +356,16 @@
        >
        <span>{$_("about")}</span>
      </a>
-      <span
+      <button
        tabindex="0"
-        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"
        on:click={() => {
          AuthService.authControllerLogout();
          logout();
        }}
      >
        <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"
          width="24"
          height="24"
@@ -377,12 +377,12 @@
          /></svg
        >
        <span>{$_("logout")}</span>
-      </span>
+      </button>
    </nav>
  </div>
  <div class="ml-0 transition md:ml-60">
    <header
-      class="flex items-center justify-between w-full px-4 bg-white border-b h-14 md:hidden"
+      class="flex items-center w-full px-4 bg-white border-b h-14 md:hidden"
    >
      <button
        on:click={() => {
@@ -390,18 +390,15 @@
        }}
        class="block btn btn-light md:hidden"
      >
-        <span class="sr-only">Menu</span><svg
-          class="w-4 h-4"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentcolor"
-          ><path
-            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"
-            clip-rule="evenodd"
-          /></svg
-        ></button
+        <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>
@@ -409,7 +406,7 @@
    </slot>
  </div>
  {#if navOpen === true}
-    <div
+    <button
      on:click={() => {
        navOpen = false;
      }}
--- a/src/components/dashboard/MainDashContent.svelte
+++ b/src/components/dashboard/MainDashContent.svelte
@@ -1,31 +1,18 @@
 <script>
  import { _ } from "svelte-i18n";
  import { StatsService } from "@odit/lfk-client-js";
-  import StatCards from "./StatCard.svelte";
  import store from "../../store";
  import StatCard from "./StatCard.svelte";
-  let navOpen = false;
  const stats_promise = StatsService.statsControllerGet();
 </script>

-<div
-  class="p-5 overflow-x-hidden"
-  on:click={() => {
-    navOpen = false;
-  }}
->
-  <h1 class="text-3xl leading-tight">
-    <span class="font-extrabold">{$_("dashboard-title")}</span>
-    <span>
-      -
-      {$_("dashboard-greeting")},
-      <span class="text-blue-500"
-        >{store.state.jwtinfo.userdetails.firstname}
-        {store.state.jwtinfo.userdetails.lastname}</span
-      ></span
+<div class="p-2 md:p-5 overflow-x-hidden">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+    {$_("dashboard-greeting")} <span class="text-blue-500"
+      >{store.state.jwtinfo.userdetails.firstname}
+      {store.state.jwtinfo.userdetails.lastname}</span
    >
-  </h1>
-  <h1>{$_("general-stats")}</h1>
+  </h4>
  {#await stats_promise}
    <div
      class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
@@ -36,7 +23,7 @@
    </div>
  {:then stats}
    <div
-      class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 2xl:grid-cols-6 gap-4"
+      class="grid gap-1 grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 2xl:grid-cols-6 sm:gap-4"
    >
      <StatCard
        title={$_("runners")}
@@ -109,24 +96,35 @@
      </StatCard>
      <StatCard
        title={$_("average-donation")}
-        value={`${(stats.average_donation / 100).toFixed(2)} €`}
+        value={`${parseFloat(stats.average_donation / 100).toLocaleString(
+          undefined,
+          {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          }
+        )}`}
        href="/donations/"
      >
        <svg
-          fill="currentColor"
          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          width="24"
          height="24"
-          ><path fill="none" d="M0 0h24v24H0z" />
+          fill="currentColor"
+          width="24"
+          ><path d="M0 0h24v24H0z" fill="none" />
          <path
-            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"
+            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
        title={$_("total-donations")}
-        value={`${(stats.total_donation / 100).toFixed(2)} €`}
+        value={`${parseFloat(stats.total_donation / 100).toLocaleString(
+          undefined,
+          {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          }
+        )}`}
        href="/donations/"
      >
        <svg
@@ -142,7 +140,7 @@
      </StatCard>
      <StatCard
        title={$_("total-distance")}
-        value={`${stats.total_distance / 1000} km`}
+        value={`${stats.total_distance / 1000}km`}
        href="/scans/"
      >
        <svg
@@ -158,7 +156,13 @@
      </StatCard>
      <StatCard
        title={$_("average-distance")}
-        value={`${(stats.average_distance / 1000).toFixed(2)} km`}
+        value={`${parseFloat(stats.average_distance / 1000).toLocaleString(
+          undefined,
+          {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          }
+        )}km`}
        href="/scans/"
      >
        <svg
--- a/src/components/dashboard/StatCard.svelte
+++ b/src/components/dashboard/StatCard.svelte
@@ -7,13 +7,13 @@
 </script>

 <a {href}>
-  <div class="p-4 rounded-lg bg-white border border-grey-100">
+  <div class="p-3 py-4 sm: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 />
    </div>
--- a/src/components/donations/AddDonationModal.svelte
+++ b/src/components/donations/AddDonationModal.svelte
@@ -8,7 +8,7 @@
    RunnerService,
  } from "@odit/lfk-client-js";
  import Select from "svelte-select";
-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher, onMount } from "svelte";
  import toast from "svelte-french-toast";
  export let modal_open;
  const dispatch = createEventDispatcher();
@@ -23,16 +23,6 @@
  $: 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;
@@ -95,6 +85,7 @@
            amount_input = 0;
            modal_open = false;
            //
+            toast.dismiss();
            toast.success($_("donation_added"));
            dispatch("created", { donations: [result] });
          })
@@ -107,6 +98,19 @@
      }
    }
  }
+
+  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}
--- a/src/components/donations/AddDonationPaymentModal.svelte
+++ b/src/components/donations/AddDonationPaymentModal.svelte
@@ -33,7 +33,7 @@
      toast.loading($_("updating-donation"));
      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(
@@ -46,7 +46,7 @@
            toast.dismiss();

            toast.success($_("donation-updated"));
-            dispatch("created", { donation: response });
+            dispatch("created", { donation: result });
          })
          .catch((err) => {
            //
@@ -61,7 +61,7 @@
            //
            toast.dismiss();
            toast.success($_("donation-updated"));
-            dispatch("created", { donation: response });
+            dispatch("created", { donation: result });
          })
          .catch((err) => {
            //
--- a/src/components/donations/DonationDetail.svelte
+++ b/src/components/donations/DonationDetail.svelte
@@ -6,7 +6,8 @@
    DonorService,
    RunnerService,
  } from "@odit/lfk-client-js";
-  
+  import toast from 'svelte-french-toast'
+
  import PromiseError from "../base/PromiseError.svelte";
  import Select from "svelte-select";
  let data_loaded = false;
--- a/src/components/donations/Donations.svelte
+++ b/src/components/donations/Donations.svelte
@@ -9,20 +9,20 @@
 </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 font-mono">
    {$_("donations")}
-    {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:CREATE")}
-      <button
-        on:click={() => {
-          modal_open = true;
-        }}
-        type="button"
-        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-      >
-        {$_("add-donation")}
-      </button>
-    {/if}
-  </span>
+  </h4>
+  {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:CREATE")}
+    <button
+      on:click={() => {
+        modal_open = true;
+      }}
+      type="button"
+      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+    >
+      {$_("add-donation")}
+    </button>
+  {/if}
  <DonationsOverview bind:current_donations bind:addDonations />
 </section>

--- a/src/components/donations/DonationsEmptyState.svelte
+++ b/src/components/donations/DonationsEmptyState.svelte
@@ -5,7 +5,7 @@

 <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>{$_("add-your-fist-donation")}</span>
  </p>
--- a/src/components/donations/DonationsOverview.svelte
+++ b/src/components/donations/DonationsOverview.svelte
@@ -168,10 +168,11 @@

  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;
@@ -194,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.findIndex((d) => d.id === event.detail.donation.id)
-    ].paidAmount = event.detail.donation.paidAmount;
+    current_donations = current_donations.map((d)=>{
+      if(d.id === event.detail.donation.id){
+        d.paidAmount = event.detail.donation.paidAmount;
+      }
+      return d;
+    })
    options.update((options) => ({
      ...options,
      data: current_donations,
@@ -227,7 +231,7 @@
      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"
@@ -279,3 +283,9 @@
    <TableBottom {table} {selected} />
  {/if}
 {/if}
+
+<style>
+  table tbody tr td:nth-child(2) {
+    font-family: monospace;
+  }
+</style>
--- a/src/components/donors/DonorDetail.svelte
+++ b/src/components/donors/DonorDetail.svelte
@@ -2,16 +2,16 @@
  import { _ } from "svelte-i18n";
  import store from "../../store";
  import { DonorService, DonationService } from "@odit/lfk-client-js";
-  
+
  import PromiseError from "../base/PromiseError.svelte";
  import isEmail from "validator/es/lib/isEmail";
  import ConfirmDonorDeletion from "./ConfirmDonorDeletion.svelte";
+  import toast from "svelte-french-toast";
  let data_loaded = false;
  export let params;
  $: delete_triggered = false;
  $: original_data = {};
  $: editable = {};
-  $: current_donations = [];
  $: changes_performed = !(
    JSON.stringify(original_data) === JSON.stringify(editable)
  );
@@ -28,11 +28,6 @@
    isPhoneValidOrEmpty &&
    ((isAddress1Valid && iszipcodevalid && iscityvalid) ||
      editable.address_checked === false);
-  const donation_promise = DonationService.donationControllerGetAll().then(
-    (val) => {
-      current_donations = val;
-    }
-  );
  const promise = DonorService.donorControllerGetOne(params.donorid).then(
    (data) => {
      data_loaded = true;
@@ -68,7 +63,9 @@
        editable.address = null;
      }
      if (editable.email) editable.email = editable.email;
+      else editable.email = null;
      if (editable.phone) editable.phone = editable.phone;
+      else editable.phone = null;
      if (editable.middlename) editable.middlename = editable.middlename;
      editable.receiptNeeded = editable.address_checked;
      DonorService.donorControllerPut(original_data.id, editable)
@@ -95,7 +92,7 @@
 </script>

 <ConfirmDonorDeletion bind:modal_open bind:delete_donor />
-{#await promise && donation_promise}
+{#await promise}
  {$_("loading-donor-details")}
 {:then}
  <section class="container p-5 select-none">
@@ -205,8 +202,8 @@
      >
      <br />
      <span class="font-medium text-gray-700">{$_("donations")}:</span>
-      {#if current_donations.filter((d) => d.donor.id == editable.id).length > 0}
-        {#each current_donations.filter((o) => o.donor.id == editable.id) as d}
+      {#if original_data.donations.length > 0}
+        {#each original_data.donations as d}
          {#if d.responseType === "DISTANCEDONATION"}
            <a
              href="../donations/{d.id}"
--- 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 font-mono">
    {$_("donors")}
-    {#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:CREATE")}
-      <button
-        on:click={() => {
-          modal_open = true;
-        }}
-        type="button"
-        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-      >
-        {$_("add-donor")}
-      </button>
-    {/if}
-    {#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:GET")}
-      <button
-        on:click={() => {
-          const data = current_donors
-            .filter((d) => d.receiptNeeded === true)
-            .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}`;
-              return [
-                d.firstname,
-                d.middlename,
-                d.lastname,
-                d.paidDonationAmount,
-                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";
+  </h4>
+  {#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:CREATE")}
+    <button
+      on:click={() => {
+        modal_open = true;
+      }}
+      type="button"
+      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mt-1 sm:mt-0"
+    >
+      {$_("add-donor")}
+    </button>
+  {/if}
+  {#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:GET")}
+    <button
+      on:click={() => {
+        const data = current_donors
+          .filter((d) => d.receiptNeeded === true)
+          .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}`;
+            return [
+              d.firstname,
+              d.middlename,
+              d.lastname,
+              (d.paidDonationAmount/100).toFixed(2),
+              address,
+            ];
          });
-          let hiddenElement = document.createElement("a");
-          hiddenElement.href = "data:text/csv;charset=utf-8," + encodeURI(csv);
-          hiddenElement.target = "_blank";
-          hiddenElement.download = `${$_(
-            "filename_sponsoringquittungsliste"
-          )}.csv`;
-          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:ml-3 sm:w-auto sm:text-sm"
-      >
-        {$_("sponsoring-quittungs-liste_herunterladen")}
-      </button>
-    {/if}
-  </span>
+        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");
+        hiddenElement.href = "data:text/csv;charset=utf-8," + encodeURI(csv);
+        hiddenElement.target = "_blank";
+        hiddenElement.download = `${$_(
+          "filename_sponsoringquittungsliste"
+        )}.csv`;
+        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 mt-1 sm:mt-0"
+    >
+      {$_("sponsoring-quittungs-liste_herunterladen")}
+    </button>
+  {/if}
  <DonorsOverview bind:current_donors bind:addDonors />
 </section>

--- a/src/components/donors/DonorsOverview.svelte
+++ b/src/components/donors/DonorsOverview.svelte
@@ -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;
      }
@@ -201,7 +202,7 @@
      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"
@@ -253,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,210 +1,196 @@
 <script>
-  import { _ } from "svelte-i18n";
-  import { clickOutside } from "../base/outsideclick";
+	import { _ } from "svelte-i18n";
+	import { clickOutside } from "../base/outsideclick";

-  export let modal_open;
-  (function () {
-    document.onkeydown = function (e) {
-      e = e || window.event;
-      if (e.key === "Escape") {
-        modal_open = false;
-      }
-    };
-  })();
-  const license_promise = fetch("/licenses.json");
-  let licenses = [];
-  $: currentlicense = "";
-  $: licensetext = "";
-  license_promise
-    .then((response) => response.json())
-    .then((json) => {
-      licenses = json;
-    });
+	let modal_open = false;
+	(function () {
+		document.onkeydown = function (e) {
+			e = e || window.event;
+			if (e.key === "Escape") {
+				modal_open = false;
+			}
+		};
+	})();
+	const license_promise = fetch("/licenses.json");
+	let licenses = [];
+	$: currentlicense = "";
+	$: licensetext = "";
+	license_promise
+		.then((response) => response.json())
+		.then((json) => {
+			licenses = json;
+		});
 </script>

 {#if modal_open}
-  <div
-    class="fixed z-10 inset-0 overflow-y-auto"
-    use:clickOutside
-    on:click_outside={() => {
-      modal_open = false;
-    }}
-  >
-    <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
-    >
-      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
-        <div
-          class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop"
-        />
-      </div>
-      <span
-        class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span
-      >
-      <div
-        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="modal-headline"
-      >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-          <div class="sm:flex sm:items-start">
-            <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
-            >
-              <svg
-                fill="currentColor"
-                class="h-6 w-6 text-blue-600"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                width="24"
-                height="24"
-                ><path fill="none" d="M0 0h24v24H0z" />
-                <path
-                  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
-              >
-            </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-              <h3 class="text-lg leading-6 font-medium">
-                {$_("read-license")}
-              </h3>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">{currentlicense}</p>
-              </div>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">{licensetext}</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={() => {
-              modal_open = false;
-            }}
-            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"
-          >
-            {$_("close")}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
+	<div
+		class="fixed z-10 inset-0 overflow-y-auto"
+		use:clickOutside
+		on:click_outside={() => {
+			modal_open = false;
+		}}
+	>
+		<div
+			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
+					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
+								fill="currentColor"
+								class="h-6 w-6 text-blue-600"
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 24 24"
+								width="24"
+								height="24"
+								><path fill="none" d="M0 0h24v24H0z" />
+								<path
+									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
+							>
+						</div>
+						<div class="mt-3 sm:mt-0 sm:ml-4 sm:text-left">
+							<h3 class="text-lg leading-6 font-medium">
+								{$_("read-license")}
+							</h3>
+							<div class="mt-2 mb-6">
+								<p class="text-sm text-gray-500">{currentlicense}</p>
+							</div>
+							<div class="mt-2 mb-6">
+								<p class="text-sm text-gray-500">{licensetext}</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={() => {
+							modal_open = false;
+						}}
+						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">
-  <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"
-    >
-      {$_("about")}
-      🧾
-    </h1>
-    <p
-      class="mt-2 max-w-xl mx-auto text-xl lg:max-w-3xl lg:text-2xl text-gray-300"
-    >
-      Lauf für Kaya!
-      <strong class="text-white font-medium">
-        {$_("by")}
-        <a href="https://odit.services" class="underline">ODIT.Services</a>
-      </strong>
-      <br />
-      <span class="text-lg">{$_("lfk-is-os")}</span>
-    </p>
-  </div>
-</div>
-
-<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">
-    <h2 class="text-4xl font-display font-semibold md:text-5xl">
-      {$_("credits")}
-    </h2>
-    <div class="max-w-3xl mx-auto text-xl leading-8 font-medium mt-8">
-      <p class="text-center">{$_("oss_credit_description")}</p>
-    </div>
-    <div class="w-screen leading-8 pl-5 mt-5">
-      {#await license_promise}
-        <p class="text-center w-full">{$_("licenses-are-being-loaded")}</p>
-      {:then}
-        <table>
-          <thead class="border-b border-gray-400">
-            <tr class="odd:bg-white even:bg-gray-100">
-              <th>{$_("dependency_name")}</th>
-              <th>{$_("license")}</th>
-              <th>{$_("repo_link")}</th>
-              <th>{$_("installed-version")}</th>
-              <th>{$_("author")}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {#each licenses as l}
-              <tr class="odd:bg-white even:bg-gray-100">
-                <td>{l.name}</td>
-                <td>
-                  {l.license || "?"}<br /><span
-                    class="underline cursor-pointer"
-                    on:click={() => {
-                      modal_open = true;
-                      currentlicense = l.name + "@" + l.version;
-                      licensetext =
-                        l.licensetext || $_("no-license-text-could-be-found");
-                    }}>{$_("read-license")}</span
-                  >
-                </td>
-                <td>
-                  {(l.repo?.url || l.repo)
-                    .replace("git+", "")
-                    .replace("git://", "")}
-                </td>
-                <td>{l.version || "?"}</td>
-                <td>{l.author?.name || l.author || "?"}</td>
-              </tr>
-            {/each}
-          </tbody>
-        </table>
-      {: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>
-    <div class="w-full leading-8 mt-8">
-      <p class="text-xl font-medium">{$_("icon-image-credits")}</p>
-      <ul class="list-disc">
-        <li>
-          <a
-            class="underline"
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://storyset.com">https://storyset.com</a
-          >
-        </li>
-        <li>
-          <a
-            class="underline"
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://undraw.co">https://undraw.co</a
-          >
-        </li>
-        <li>
-          <a
-            class="underline"
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://remixicon.com">https://remixicon.com</a
-          >
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
+<section class="container p-5">
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+		{$_("about")}
+	</h4>
+	<p class="mt-2 mb-2">
+		Lauf für Kaya!
+		<strong class="font-medium">
+			{$_("by")}
+			<a href="https://odit.services" class="underline">ODIT.Services</a>
+		</strong>
+		<br />
+		<span>{$_("lfk-is-os")}</span>
+	</p>
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+		{$_("credits")}
+	</h4>
+	<p class="text-left">{$_("oss_credit_description")}</p>
+	<div class="mt-5 overflow-x-auto">
+		{#await license_promise}
+			<p>{$_("licenses-are-being-loaded")}</p>
+		{:then}
+			<table class="font-mono">
+				<thead class="border-b border-gray-400">
+					<tr class="odd:bg-white even:bg-gray-100">
+						<th>{$_("dependency_name")}</th>
+						<th>{$_("license")}</th>
+						<th>{$_("repo_link")}</th>
+						<th>{$_("installed-version")}</th>
+						<th>{$_("author")}</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each licenses as l}
+						<tr class="odd:bg-white even:bg-gray-100 *:p-2">
+							<td>{l.name}</td>
+							<td>
+								<button
+									class="underline cursor-pointer"
+									on:click={() => {
+										modal_open = true;
+										currentlicense = l.name + "@" + l.version;
+										licensetext =
+											l.licensetext || $_("no-license-text-could-be-found");
+									}}>{l.license || "?"}</button
+								>
+							</td>
+							<td>
+								{(l.repo?.url || l.repo)
+									.replace("git+", "")
+									.replace("git://", "")}
+							</td>
+							<td>{l.version || "?"}</td>
+							<td>{l.author?.name || l.author || "?"}</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		{: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>
+	<div class="w-full mt-8">
+		<p class="font-medium">{$_("icon-image-credits")}</p>
+		<ul class="list-disc ml-6">
+			<li>
+				<a
+					class="underline"
+					target="_blank"
+					rel="noopener noreferrer"
+					href="https://storyset.com">https://storyset.com</a
+				>
+			</li>
+			<li>
+				<a
+					class="underline"
+					target="_blank"
+					rel="noopener noreferrer"
+					href="https://undraw.co">https://undraw.co</a
+				>
+			</li>
+			<li>
+				<a
+					class="underline"
+					target="_blank"
+					rel="noopener noreferrer"
+					href="https://remixicon.com">https://remixicon.com</a
+				>
+			</li>
+		</ul>
+	</div>
+</section>
--- a/src/components/groups/GroupDetail.svelte
+++ b/src/components/groups/GroupDetail.svelte
@@ -2,7 +2,8 @@
  import { _ } from "svelte-i18n";
  import store from "../../store";
  import { UserGroupService } from "@odit/lfk-client-js";
-  
+  import toast from 'svelte-french-toast'
+
  import PromiseError from "../base/PromiseError.svelte";
  let data_loaded = false;
  export let params;
@@ -131,7 +132,7 @@
          {#if delete_triggered}
            <button
              on:click={deleteGroup}
-              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 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"
              >{$_("confirm-deletion")}</button
            >
            <button
@@ -148,7 +149,7 @@
                delete_triggered = true;
              }}
              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 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-group")}</button
            >
          {/if}
@@ -159,7 +160,7 @@
            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"
+            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"
            >{$_("save-changes")}</button
          >
        {/if}
@@ -215,7 +216,7 @@
          placeholder={$_("search-for-permission")}
          type="text"
          bind:value={search_permission}
-          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"
+          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 rounded-md p-2"
        />
      </div>
      {#each original_data.permissions as p}
--- a/src/components/groups/GroupPermissions.svelte
+++ b/src/components/groups/GroupPermissions.svelte
@@ -5,6 +5,7 @@
    CreatePermission,
    UserGroupService,
  } from "@odit/lfk-client-js";
+  import toast from 'svelte-french-toast'

  import PromiseError from "../base/PromiseError.svelte";
  export let params;
@@ -142,13 +143,13 @@
            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"
+            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"
            >{$_("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"
+            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}
@@ -173,7 +174,7 @@
            {#each allpermissions as p}
              {#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}
                  <button
@@ -192,7 +193,7 @@
                      }
                    }}
                    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"
+                    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>
@@ -206,7 +207,7 @@
          >
            {#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}
                <button
@@ -232,7 +233,7 @@
                    }
                  }}
                  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"
+                  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>
--- a/src/components/groups/Groups.svelte
+++ b/src/components/groups/Groups.svelte
@@ -8,20 +8,20 @@
 </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 font-mono">
    {$_("user-groups")}
-    {#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:CREATE")}
-      <button
-        on:click={() => {
-          modal_open = true;
-        }}
-        type="button"
-        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-      >
-        {$_("add-user-group")}
-      </button>
-    {/if}
-  </span>
+  </h4>
+  {#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:CREATE")}
+    <button
+      on:click={() => {
+        modal_open = true;
+      }}
+      type="button"
+      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+    >
+      {$_("add-user-group")}
+    </button>
+  {/if}
  <UserGroupsOverview bind:current_groups />
 </section>

--- a/src/components/groups/UserGroupsOverview.svelte
+++ b/src/components/groups/UserGroupsOverview.svelte
@@ -31,7 +31,7 @@
        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"
@@ -62,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">
--- a/src/components/orgs/OrgDetail.svelte
+++ b/src/components/orgs/OrgDetail.svelte
@@ -4,7 +4,8 @@
    RunnerOrganizationService,
  } from "@odit/lfk-client-js";
  import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  
+  import toast from 'svelte-french-toast'
+
  import store from "../../store";
  import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
  import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
@@ -109,7 +110,7 @@
  }
  async function copy() {
    if (!editable.registrationKey) {
-      toast.error($_("you-have-to-save-your-changes-to-generate-a-link"))
+      toast.error($_("you-have-to-save-your-changes-to-generate-a-link"));
      return;
    }
    valueCopy = registrationLink;
@@ -124,7 +125,7 @@
      toast($_("copied-link-to-clipboard"));
      copied = true;
    } catch (err) {
-      toast.error($_("error-whyile-copying-to-clipboard"))
+      toast.error($_("error-whyile-copying-to-clipboard"));
    }
    // we can notifi by event or storage about copy status
    valueCopy = null;
@@ -162,7 +163,7 @@
              import_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"
+            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"
          >
            {$_("import-runners")}
          </button>
@@ -171,7 +172,7 @@
          {#if delete_triggered}
            <button
              on:click={deleteOrganization}
-              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 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"
              >{$_("confirm-delete")}</button
            >
            <button
@@ -188,7 +189,7 @@
                delete_triggered = true;
              }}
              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 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}
@@ -199,7 +200,7 @@
            disabled={!save_enabled}
            class:opacity-50={!save_enabled}
            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"
+            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"
            >{$_("save-changes")}</button
          >
        {/if}
@@ -470,6 +471,11 @@
            {/if}
          </div>
        {/if}
+        <div class="text-sm w-full">
+          <span class="font-medium text-gray-700">{$_("distance")}</span>
+          <br />
+          <span class="text-gray-700">{(original_object.total_distance / 1000).toFixed(2)} km</span>
+        </div>
      </div>
    </div>
  </section>
--- a/src/components/orgs/OrgOverview.svelte
+++ b/src/components/orgs/OrgOverview.svelte
@@ -58,7 +58,7 @@
        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="h-12">
        <GenerateSponsoringContracts
@@ -78,7 +78,7 @@
                scope="col"
                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
              >
-                <span
+                <button
                  on:click={() => {
                    const newstate = !current_organizations.some(
                      (r) => r.is_selected === true
@@ -92,7 +92,7 @@
                  >{#if current_organizations.some((r) => r.is_selected === true)}
                    {$_("deselect-all")}
                  {:else}{$_("select-all")}{/if}
-                </span>
+                </button>
              </th>
              <th
                scope="col"
@@ -123,7 +123,10 @@
                .toString()
                .toLowerCase()
                .includes(searchvalue)}
-                <tr data-rowid="org_{o.id}">
+                <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}
--- a/src/components/orgs/Orgs.svelte
+++ b/src/components/orgs/Orgs.svelte
@@ -10,31 +10,31 @@
 </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 font-mono">
    {$_("organizations")}
-    {#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:CREATE")}
-      <button
-        on:click={() => {
-          modal_open = true;
-        }}
-        type="button"
-        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-      >
-        {$_("create-organization")}
-      </button>
-    {/if}
-    {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:IMPORT")}
-      <button
-        on:click={() => {
-          import_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"
-      >
-        {$_("import-runners")}
-      </button>
-    {/if}
-  </span>
+  </h4>
+  {#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:CREATE")}
+    <button
+      on:click={() => {
+        modal_open = true;
+      }}
+      type="button"
+      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mt-1 sm:mt-0"
+    >
+      {$_("create-organization")}
+    </button>
+  {/if}
+  {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:IMPORT")}
+    <button
+      on:click={() => {
+        import_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:w-auto sm:text-sm mt-1 sm:mt-0"
+    >
+      {$_("import-runners")}
+    </button>
+  {/if}
  <OrgOverview bind:current_organizations />
 </section>

@@ -48,7 +48,6 @@
    passed_org={{}}
    passed_orgs={current_organizations}
    opened_from="OrgOverview"
-    current_runners={[]}
    bind:import_modal_open
  />
 {/if}
--- a/src/components/pdf_generation/GenerateRunnerCards.svelte
+++ b/src/components/pdf_generation/GenerateRunnerCards.svelte
@@ -5,6 +5,7 @@
    RunnerOrganizationService,
    RunnerTeamService,
  } from "@odit/lfk-client-js";
+  import toast from 'svelte-french-toast'

  import { init } from "@paralleldrive/cuid2";
  const createId = init({ length: 10, fingerprint: "lfk-frontend" });
--- a/src/components/pdf_generation/GenerateRunnerCertificates.svelte
+++ b/src/components/pdf_generation/GenerateRunnerCertificates.svelte
@@ -5,8 +5,8 @@
    RunnerTeamService,
    RunnerOrganizationService,
  } from "@odit/lfk-client-js";
-
  import { init } from "@paralleldrive/cuid2";
+  import toast from "svelte-french-toast";
  const createId = init({ length: 10, fingerprint: "lfk-frontend" });

  export let certificates_show = false;
--- a/src/components/runners/AddRunnerModal.svelte
+++ b/src/components/runners/AddRunnerModal.svelte
@@ -12,6 +12,7 @@
  import Select from "svelte-select";
  import { createEventDispatcher } from "svelte";
  const dispatch = createEventDispatcher();
+  import toast from 'svelte-french-toast'

  export let modal_open;
  $: selected_team = undefined;
--- a/src/components/runners/RunnerDetail.svelte
+++ b/src/components/runners/RunnerDetail.svelte
@@ -149,7 +149,7 @@
          {#if delete_triggered}
            <button
              on:click={deleteRunner}
-              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 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"
              >{$_("confirm-deletion")}</button
            >
            <button
@@ -175,7 +175,7 @@
                delete_triggered = true;
              }}
              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 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-runner")}</button
            >
          {/if}
@@ -186,7 +186,7 @@
            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"
+            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"
            >{$_("save-changes")}</button
          >
        {/if}
--- a/src/components/runners/Runners.svelte
+++ b/src/components/runners/Runners.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 font-mono">
    {$_("runners")}
-    {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:CREATE")}
-      <button
-        on:click={() => {
-          modal_open = true;
-        }}
-        type="button"
-        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-      >
-        {$_("laeufer-hinzufuegen")}
-      </button>
-      <button
-        on:click={() => {
-          import_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"
-      >
-        {$_("import-runners")}
-      </button>
-    {/if}
-  </span>
+  </h4>
+  {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:CREATE")}
+    <button
+      on:click={() => {
+        modal_open = true;
+      }}
+      type="button"
+      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mt-1 sm:mt-0"
+    >
+      {$_("laeufer-hinzufuegen")}
+    </button>
+    <button
+      on:click={() => {
+        import_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:w-auto sm:text-sm mt-1 sm:mt-0"
+    >
+      {$_("import-runners")}
+    </button>
+  {/if}
  <RunnersOverview bind:current_runners bind:addRunners />
 </section>

--- a/src/components/runners/RunnersOverview.svelte
+++ b/src/components/runners/RunnersOverview.svelte
@@ -163,7 +163,7 @@

    let page = 0;
    while (page >= 0) {
-      const runners = await RunnerService.runnerControllerGetAll(page, 1000);
+      const runners = await RunnerService.runnerControllerGetAll(page, 500);
      if (runners.length == 0) {
        page = -2;
      }
@@ -259,3 +259,9 @@
  {/if}
 {/if}
 <TableBottom {table} {selected} />
+
+<style>
+  table tbody tr td:nth-child(2) {
+    font-family: monospace;
+  }
+</style>
--- a/src/components/scans/ScanDetail.svelte
+++ b/src/components/scans/ScanDetail.svelte
@@ -2,7 +2,7 @@
  import { _ } from "svelte-i18n";
  import store from "../../store";
  import { RunnerService, ScanService } from "@odit/lfk-client-js";
-  
+
  import PromiseError from "../base/PromiseError.svelte";
  import Select from "svelte-select";
  let data_loaded = false;
--- a/src/components/scans/Scans.svelte
+++ b/src/components/scans/Scans.svelte
@@ -9,20 +9,20 @@
 </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 font-mono">
    {$_("scans")}
-    {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:CREATE")}
-      <button
-        on:click={() => {
-          modal_open = true;
-        }}
-        type="button"
-        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-      >
-        {$_("add-scan")}
-      </button>
-    {/if}
-  </span>
+  </h4>
+  {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:CREATE")}
+    <button
+      on:click={() => {
+        modal_open = true;
+      }}
+      type="button"
+      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+    >
+      {$_("add-scan")}
+    </button>
+  {/if}
  <ScansOverview bind:current_scans bind:addScans />
 </section>

--- a/src/components/scans/ScansEmptyState.svelte
+++ b/src/components/scans/ScansEmptyState.svelte
@@ -5,7 +5,7 @@

 <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={scans_empty} alt="" />
+    <img class="m-auto mt-2" style="height:15rem" src={scans_empty} alt="" />
    <span class="font-bold">{$_("there-are-no-scans-yet")}</span><br />
    <span>{$_("add-your-fist-scan")}</span>
  </p>
--- a/src/components/scans/ScansOverview.svelte
+++ b/src/components/scans/ScansOverview.svelte
@@ -86,7 +86,17 @@
      accessorKey: "timestamp",
      header: () => $_("timestamp"),
      cell: (info) => {
-        return new Date(parseInt(info.getValue()) * 1000).toLocaleString();
+        return new Date(parseInt(info.getValue()) * 1000).toLocaleString(
+          { language: "de-DE" },
+          {
+            day: "2-digit",
+            month: "2-digit",
+            year: "numeric",
+            hour: "2-digit",
+            minute: "2-digit",
+            second: "2-digit",
+          }
+        );
      },
      enableColumnFilter: false,
    },
@@ -169,8 +179,9 @@

  onMount(async () => {
    let page = 0;
+    let pagesize = 500;
    while (page >= 0) {
-      const scans = await ScanService.scanControllerGetAll(page, 500);
+      const scans = await ScanService.scanControllerGetAll(page, pagesize);
      if (scans.length == 0) {
        page = -2;
      }
@@ -209,7 +220,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 = [];
@@ -292,3 +303,9 @@
    <TableBottom {table} {selected} />
  {/if}
 {/if}
+
+<style>
+  table tbody tr td:nth-child(2) {
+    font-family: monospace;
+  }
+</style>
--- a/src/components/scanstations/CopyScanStationTokenModal.svelte
+++ b/src/components/scanstations/CopyScanStationTokenModal.svelte
@@ -1,200 +1,199 @@
 <script>
-  import { _ } from "svelte-i18n";
+	import { _ } from "svelte-i18n";
+	import { tick } from "svelte";
+	import bwipjs from "bwip-js";
+	import toast from "svelte-french-toast";

-  import { tick, createEventDispatcher } from "svelte";
-  import bwipjs from "bwip-js";
+	export let copy_modal_open;
+	export let new_station;
+	let valueCopy = null;
+	let areaDom;
+	let copied = false;
+	$: is_qrcode = false;
+	$: barcode = textToBase64Barcode(new_station.key, is_qrcode);

-  export let copy_modal_open;
-  export let new_station;
-  const dispatch = createEventDispatcher();
-  let valueCopy = null;
-  let areaDom;
-  let copied = false;
-  $: is_qrcode = false;
-  $: barcode = textToBase64Barcode(new_station.key, is_qrcode);
+	function close() {
+		copy_modal_open = false;
+	}
+	async function copy() {
+		valueCopy = new_station.key;
+		await tick();
+		areaDom.focus();
+		areaDom.select();
+		try {
+			const successful = document.execCommand("copy");
+			if (!successful) {
+				throw new Error();
+			}
+			toast($_("copied-token-to-clipboard"));
+			copied = true;
+		} catch (err) {
+			toast.Error($_("error-whyile-copying-to-clipboard"));
+		}
+		// we can notify by event or storage about copy status
+		valueCopy = null;
+	}

-  function close() {
-    copy_modal_open = false;
-  }
-  async function copy() {
-    valueCopy = new_station.key;
-    await tick();
-    areaDom.focus();
-    areaDom.select();
-    try {
-      const successful = document.execCommand("copy");
-      if (!successful) {
-        throw new Error();
-      }
-      toast($_("copied-token-to-clipboard"));
-      copied = true;
-    } catch (err) {
-      toast.Error($_("error-whyile-copying-to-clipboard"));
-    }
-    // we can notify by event or storage about copy status
-    valueCopy = null;
-  }
-
-  function textToBase64Barcode(text, is_qrcode) {
-    const canvas = document.createElement("canvas");
-    let bcid = "code128";
-    if (is_qrcode) {
-      bcid = "qrcode";
-    }
-    let codeconfig = {
-      bcid,
-      text: `${text}`,
-      scale: 4,
-      includetext: true,
-      textxalign: "center",
-      backgroundcolor: "ffffff",
-    };
-    if (bcid == "code128") {
-      codeconfig.height = 10;
-    }
-    bwipjs.toCanvas(canvas, codeconfig);
-    return canvas.toDataURL("image/png");
-  }
+	function textToBase64Barcode(text, is_qrcode) {
+		const canvas = document.createElement("canvas");
+		let bcid = "code128";
+		if (is_qrcode) {
+			bcid = "qrcode";
+		}
+		let codeconfig = {
+			bcid,
+			text: `${text}`,
+			scale: 4,
+			includetext: true,
+			textxalign: "center",
+			backgroundcolor: "ffffff",
+		};
+		if (bcid == "code128") {
+			codeconfig.height = 10;
+		}
+		bwipjs.toCanvas(canvas, codeconfig);
+		return canvas.toDataURL("image/png");
+	}
 </script>

 {#if copy_modal_open}
-  {#if valueCopy != null}
-    <textarea bind:this={areaDom}>{valueCopy}</textarea>
-  {/if}
-  <div class="fixed z-10 inset-0 overflow-y-auto">
-    <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
-    >
-      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
-        <div
-          class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop"
-        />
-      </div>
-      <span
-        class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span
-      >
-      <div
-        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="modal-headline"
-      >
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-          <div class="sm:flex sm:items-start">
-            <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
-            >
-              <svg
-                class="h-6 w-6 text-blue-600"
-                fill="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                ><path fill="none" d="M0 0h24v24H0z" />
-                <path
-                  d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"
-                /></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">
-                {$_("token")}
-              </h3>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">
-                  {$_(
-                    "the-scanstations-api-token-will-only-get-displayed-once-you-wont-be-able-to-change-or-view-it-again"
-                  )}
-                  <br />
-                  {$_("please-copy-the-token-and-store-it-somewhere-save")}
-                </p>
-              </div>
-              <div class="mt-2 mb-6">
-                <label
-                  for="token"
-                  class="block text-sm font-medium text-gray-700"
-                  >{$_("token")}</label
-                >
-                <button on:click={copy} class="inline-flex">
-                  <p
-                    name="token"
-                    class:bg-green-200={copied}
-                    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"
-                  >
-                    {new_station.key}
-                  </p>
-                  <div
-                    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"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      height="24"
-                      ><path fill="none" d="M0 0h24v24H0z" />
-                      <path
-                        fill="currentColor"
-                        d="M7 4V2h10v2h3l1 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V5l1-1h3zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z"
-                      /></svg
-                    >
-                  </div>
-                </button>
-                <p class="text-gray-500 text-xs">
-                  {$_("click-to-copy-token-to-clipboard")}
-                </p>
-              </div>
-            </div>
-          </div>
-          <div class="mx-auto text-center items-center">
-            <h2 class="text-lg leading-6 font-medium text-gray-900">
-              {$_("config-codes")}
-            </h2>
-            <span class="flex items-center text-center">
-              <p class="text-md text-gray-900 mr-3">Format:</p>
-              <label for="codeswitch" class="text-md text-gray-900 mr-3"
-                >Code128</label
-              >
-              <input
-                id="codeswitch"
-                type="checkbox"
-                bind:checked={is_qrcode}
-                class="relative shrink-0 w-[3.25rem] h-7 bg-gray-100 checked:bg-none checked:bg-blue-600 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 border border-transparent ring-1 ring-transparent focus:border-blue-600 focus:ring-blue-600 ring-offset-white focus:outline-none appearance-none before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-gray-400 dark:checked:before:bg-blue-200"
-              />
-              <label for="codeswitch" class="text-md text-gray-900 ml-3"
-                >QR-Code</label
-              >
-            </span>
-            <h3 class="leading-6 font-medium text-gray-900">
-              {$_("api-endpoint")}
-            </h3>
-            <img
-              class:w-[50%]={is_qrcode}
-              class:w-full={!is_qrcode}
-              class="md:w-auto mb-2 mx-auto"
-              alt="Registrierungscode"
-              src={textToBase64Barcode(window.config.baseurl, is_qrcode)}
-            />
-            <h3 class="leading-6 font-medium text-gray-900">{$_("token")}</h3>
-            <img
-              class:w-[50%]={is_qrcode}
-              class:w-full={!is_qrcode}
-              class="md:w-auto mb-2 mx-auto"
-              alt="Registrierungscode"
-              src={barcode}
-            />
-          </div>
-        </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-          <button
-            on:click={close}
-            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-green-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
-          >
-            {$_("yes-i-copied-the-token")}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
+	{#if valueCopy != null}
+		<textarea bind:this={areaDom}>{valueCopy}</textarea>
+	{/if}
+	<div class="fixed z-10 inset-0 overflow-y-auto">
+		<div
+			class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+		>
+			<div class="fixed inset-0 transition-opacity" aria-hidden="true">
+				<div
+					class="absolute inset-0 bg-gray-500 opacity-75"
+					data-id="modal_backdrop"
+				/>
+			</div>
+			<span
+				class="hidden sm:inline-block sm:align-middle sm:h-screen"
+				aria-hidden="true">&#8203;</span
+			>
+			<div
+				class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+				role="dialog"
+				aria-modal="true"
+				aria-labelledby="modal-headline"
+			>
+				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+					<div class="sm:flex sm:items-start">
+						<div
+							class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+						>
+							<svg
+								class="h-6 w-6 text-blue-600"
+								fill="currentColor"
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 24 24"
+								><path fill="none" d="M0 0h24v24H0z" />
+								<path
+									d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"
+								/></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">
+								{$_("token")}
+							</h3>
+							<div class="mt-2 mb-6">
+								<p class="text-sm text-gray-500">
+									{$_(
+										"the-scanstations-api-token-will-only-get-displayed-once-you-wont-be-able-to-change-or-view-it-again"
+									)}
+									<br />
+									{$_("please-copy-the-token-and-store-it-somewhere-save")}
+								</p>
+							</div>
+							<div class="mt-2 mb-6">
+								<label
+									for="token"
+									class="block text-sm font-medium text-gray-700"
+									>{$_("token")}</label
+								>
+								<button on:click={copy} class="inline-flex">
+									<p
+										name="token"
+										class:bg-green-200={copied}
+										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"
+									>
+										{new_station.key}
+									</p>
+									<div
+										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"
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											viewBox="0 0 24 24"
+											width="24"
+											height="24"
+											><path fill="none" d="M0 0h24v24H0z" />
+											<path
+												fill="currentColor"
+												d="M7 4V2h10v2h3l1 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V5l1-1h3zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z"
+											/></svg
+										>
+									</div>
+								</button>
+								<p class="text-gray-500 text-xs">
+									{$_("click-to-copy-token-to-clipboard")}
+								</p>
+							</div>
+						</div>
+					</div>
+					<div class="mx-auto text-center items-center">
+						<h2 class="text-lg leading-6 font-medium text-gray-900">
+							{$_("config-codes")}
+						</h2>
+						<span class="flex items-center text-center">
+							<p class="text-md text-gray-900 mr-3">Format:</p>
+							<label for="codeswitch" class="text-md text-gray-900 mr-3"
+								>Code128</label
+							>
+							<input
+								id="codeswitch"
+								type="checkbox"
+								bind:checked={is_qrcode}
+								class="relative shrink-0 w-[3.25rem] h-7 bg-gray-100 checked:bg-none checked:bg-blue-600 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 ring-1 ring-transparent focus:border-blue-600 focus:ring-blue-600 ring-offset-white focus:outline-none appearance-none before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200"
+							/>
+							<label for="codeswitch" class="text-md text-gray-900 ml-3"
+								>QR-Code</label
+							>
+						</span>
+						<h3 class="leading-6 font-medium text-gray-900">
+							{$_("api-endpoint")}
+						</h3>
+						<img
+							class:w-[50%]={is_qrcode}
+							class:w-full={!is_qrcode}
+							class="md:w-auto mb-2 mx-auto"
+							alt="Registrierungscode"
+							src={textToBase64Barcode(window.config.baseurl, is_qrcode)}
+						/>
+						<h3 class="leading-6 font-medium text-gray-900">{$_("token")}</h3>
+						<img
+							class:w-[50%]={is_qrcode}
+							class:w-full={!is_qrcode}
+							class="md:w-auto mb-2 mx-auto"
+							alt="Registrierungscode"
+							src={barcode}
+						/>
+					</div>
+				</div>
+				<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+					<button
+						on:click={close}
+						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-green-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+					>
+						{$_("yes-i-copied-the-token")}
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
 {/if}
--- a/src/components/scanstations/ScanStationDetail.svelte
+++ b/src/components/scanstations/ScanStationDetail.svelte
@@ -2,7 +2,7 @@
  import { t, _ } from "svelte-i18n";
  import store from "../../store";
  import { ScanStationService, TrackService } from "@odit/lfk-client-js";
-  
+
  import PromiseError from "../base/PromiseError.svelte";
  import ConfirmScanStationDeletion from "./ConfirmScanStationDeletion.svelte";
  import Select from "svelte-select";
@@ -111,7 +111,7 @@
          {#if delete_triggered}
            <button
              on:click={deleteStation}
-              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 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"
              >{$_("confirm-deletion")}</button
            >
            <button
@@ -128,7 +128,7 @@
                delete_triggered = true;
              }}
              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 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-station")}</button
            >
          {/if}
@@ -139,7 +139,7 @@
            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"
+            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"
            >{$_("save-changes")}</button
          >
        {/if}
--- a/src/components/scanstations/ScanStations.svelte
+++ b/src/components/scanstations/ScanStations.svelte
@@ -1,44 +1,229 @@
 <script>
-  import { _ } from "svelte-i18n";
-  import store from "../../store";
-  import AddScanStationModal from "./AddScanStationModal.svelte";
-  import CopyScanStationTokenModal from "./CopyScanStationTokenModal.svelte";
-  import ScanStationsOverview from "./ScanStationsOverview.svelte";
-  export let modal_open = false;
-  export let copy_modal_open = false;
-  export let new_station = {};
-  let current_stations = [];
+	import { _ } from "svelte-i18n";
+	import store from "../../store";
+	import { ScanStationService } from "@odit/lfk-client-js";
+	import AddScanStationModal from "./AddScanStationModal.svelte";
+	import CopyScanStationTokenModal from "./CopyScanStationTokenModal.svelte";
+	import ScanStationsEmptyState from "./ScanStationsEmptyState.svelte";
+	import ConfirmScanStationDeletion from "./ConfirmScanStationDeletion.svelte";
+	import toast from "svelte-french-toast";
+	//
+	export let modal_open = false;
+	export let copy_modal_open = false;
+	export let new_station = {};
+	//
+	const promise = ScanStationService.scanStationControllerGetAll().then(
+		(result) => {
+			current_stations = result;
+		}
+	);
+	$: searchvalue = "";
+	$: active_deletes = [];
+	let delete_station = {};
+	let current_stations = [];
 </script>

 <section class="container p-5">
-  <span class="mb-1 text-3xl font-extrabold leading-tight">
-    {$_("scanstations")}
-    {#if store.state.jwtinfo.userdetails.permissions.includes("STATION:CREATE")}
-      <button
-        on:click={() => {
-          modal_open = true;
-        }}
-        type="button"
-        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-      >
-        {$_("create-a-new-scanstation")}
-      </button>
-    {/if}
-  </span>
-  <ScanStationsOverview
-    bind:current_stations
-    bind:modal_open
-    bind:new_station
-    bind:copy_modal_open
-  />
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+		{$_("scanstations")}
+	</h4>
+	{#if store.state.jwtinfo.userdetails.permissions.includes("STATION:CREATE")}
+		<button
+			on:click={() => {
+				modal_open = true;
+			}}
+			type="button"
+			class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+		>
+			{$_("create-a-new-scanstation")}
+		</button>
+	{/if}
+	<ConfirmScanStationDeletion
+		on:cancelDelete={(event) => {
+			modal_open = false;
+			active_deletes[event.detail.id] = false;
+		}}
+		bind:modal_open
+		bind:delete_station
+	/>
+	{#if store.state.jwtinfo.userdetails.permissions.includes("STATION: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">{$_("scanstations-are-being-loaded")}</p>
+				<p class="text-sm">{$_("this-might-take-a-moment")}</p>
+			</div>
+		{:then}
+			{#if current_stations.length === 0}
+				<ScanStationsEmptyState />
+			{:else}
+				<input
+					type="search"
+					bind:value={searchvalue}
+					placeholder={$_("datatable.search")}
+					aria-label={$_("datatable.search")}
+					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="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"
+								>
+									{$_("track")}
+								</th>
+								<th
+									scope="col"
+									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+								>
+									{$_("description")}
+								</th>
+								<th
+									scope="col"
+									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+								>
+									{$_("status")}
+								</th>
+								<th scope="col" class="relative px-6 py-3">
+									<span class="sr-only">{$_("action")}</span>
+								</th>
+							</tr>
+						</thead>
+						<tbody class="divide-y divide-gray-200">
+							{#each current_stations as s}
+								{#if Object.values(s)
+									.toString()
+									.toLowerCase()
+									.includes(searchvalue)}
+									<tr
+										class="odd:bg-white even:bg-gray-100"
+										data-rowid="station_{s.id}"
+									>
+										<td class="px-6 py-4 whitespace-nowrap">
+											<div class="flex items-center">
+												<div class="ml-4">
+													<div class="text-sm font-medium text-gray-900">
+														<a
+															href="../tracks"
+															class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+														>
+															{s.track.name || s.track.distance + "m"}</a
+														>
+													</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">
+														{s.description}
+													</div>
+												</div>
+											</div>
+										</td>
+										<td class="px-6 py-4 whitespace-nowrap">
+											<div class="flex items-center">
+												{#if s.enabled}
+													<span
+														class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
+														>{$_("active")}</span
+													>
+												{:else}
+													<span
+														class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
+														>{$_("inactive")}</span
+													>
+												{/if}
+											</div>
+										</td>
+										{#if active_deletes[s.id] === true}
+											<td
+												class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+											>
+												<button
+													on:click={() => {
+														active_deletes[s.id] = false;
+													}}
+													tabindex="0"
+													class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
+													>{$_("cancel-delete")}</button
+												>
+												<button
+													on:click={() => {
+														ScanStationService.scanStationControllerRemove(
+															s.id,
+															false
+														)
+															.then((resp) => {
+																current_stations = current_stations.filter(
+																	(obj) => obj.id !== s.id
+																);
+																toast($_("station-deleted"));
+															})
+															.catch((err) => {
+																modal_open = true;
+																delete_station = s;
+															});
+													}}
+													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="/scanstations/{s.id}"
+													class="text-indigo-600 hover:text-indigo-900"
+													>{$_("details")}</a
+												>
+												{#if store.state.jwtinfo.userdetails.permissions.includes("STATION:DELETE")}
+													<button
+														on:click={() => {
+															active_deletes[s.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}
 </section>

 {#if store.state.jwtinfo.userdetails.permissions.includes("STATION:CREATE")}
-  <AddScanStationModal
-    bind:modal_open
-    bind:current_stations
-    bind:new_station
-    bind:copy_modal_open
-  />
-  <CopyScanStationTokenModal bind:copy_modal_open bind:new_station />
+	<AddScanStationModal
+		bind:modal_open
+		bind:current_stations
+		bind:new_station
+		bind:copy_modal_open
+	/>
+	<CopyScanStationTokenModal bind:copy_modal_open bind:new_station />
 {/if}
--- a/src/components/scanstations/ScanStationsOverview.svelte
+++ b/src/components/scanstations/ScanStationsOverview.svelte
@@ -1,192 +0,0 @@
-<script>
-  import { _ } from "svelte-i18n";
-  import { ScanStationService } from "@odit/lfk-client-js";
-  const promise = ScanStationService.scanStationControllerGetAll().then(
-    (result) => {
-      current_stations = result;
-    }
-  );
-  import store from "../../store";
-  import ScanStationsEmptyState from "./ScanStationsEmptyState.svelte";
-  import ConfirmScanStationDeletion from "./ConfirmScanStationDeletion.svelte";
-  import toast from "svelte-french-toast";
-  $: searchvalue = "";
-  $: active_deletes = [];
-  let delete_station = {};
-  let modal_open = false;
-  export let current_stations = [];
-</script>
-
-<ConfirmScanStationDeletion
-  on:cancelDelete={(event) => {
-    modal_open = false;
-    active_deletes[event.detail.id] = false;
-  }}
-  bind:modal_open
-  bind:delete_station
-/>
-{#if store.state.jwtinfo.userdetails.permissions.includes("STATION: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">{$_("scanstations-are-being-loaded")}</p>
-      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
-    </div>
-  {:then}
-    {#if current_stations.length === 0}
-      <ScanStationsEmptyState />
-    {:else}
-      <input
-        type="search"
-        bind:value={searchvalue}
-        placeholder={$_("datatable.search")}
-        aria-label={$_("datatable.search")}
-        class="mb-4"
-      />
-      <div
-        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
-      >
-        <table class="divide-y divide-gray-200 w-full">
-          <thead class="bg-gray-50">
-            <tr 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"
-              >
-                {$_("track")}
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-              >
-                {$_("description")}
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-              >
-                {$_("status")}
-              </th>
-              <th scope="col" class="relative px-6 py-3">
-                <span class="sr-only">{$_("action")}</span>
-              </th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-gray-200">
-            {#each current_stations as s}
-              {#if Object.values(s)
-                .toString()
-                .toLowerCase()
-                .includes(searchvalue)}
-                <tr data-rowid="station_{s.id}">
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">
-                      <div class="ml-4">
-                        <div class="text-sm font-medium text-gray-900">
-                          <a
-                            href="../tracks"
-                            class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
-                          >
-                            {s.track.name || s.track.distance + "m"}</a
-                          >
-                        </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">
-                          {s.description}
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">
-                      {#if s.enabled}
-                        <span
-                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
-                          >{$_("active")}</span
-                        >
-                      {:else}
-                        <span
-                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
-                          >{$_("inactive")}</span
-                        >
-                      {/if}
-                    </div>
-                  </td>
-                  {#if active_deletes[s.id] === true}
-                    <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
-                    >
-                      <button
-                        on:click={() => {
-                          active_deletes[s.id] = false;
-                        }}
-                        tabindex="0"
-                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
-                        >{$_("cancel-delete")}</button
-                      >
-                      <button
-                        on:click={() => {
-                          ScanStationService.scanStationControllerRemove(
-                            s.id,
-                            false
-                          )
-                            .then((resp) => {
-                              current_stations = current_stations.filter(
-                                (obj) => obj.id !== s.id
-                              );
-                              toast($_("station-deleted"));
-                            })
-                            .catch((err) => {
-                              modal_open = true;
-                              delete_station = s;
-                            });
-                        }}
-                        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="/scanstations/{s.id}"
-                        class="text-indigo-600 hover:text-indigo-900"
-                        >{$_("details")}</a
-                      >
-                      {#if store.state.jwtinfo.userdetails.permissions.includes("STATION:DELETE")}
-                        <button
-                          on:click={() => {
-                            active_deletes[s.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/settings/Settings.svelte
+++ b/src/components/settings/Settings.svelte
@@ -2,7 +2,8 @@
  import { _ } from "svelte-i18n";
  import isEmail from "validator/es/lib/isEmail";
  import { MeService } from "@odit/lfk-client-js";
-  
+  import toast from 'svelte-french-toast'
+
  import ConfirmProfileDeletion from "./ConfirmProfileDeletion.svelte";
  import PasswordStrength, {
    password_strong_enough_and_equal,
@@ -100,7 +101,7 @@
                    type="text"
                    bind:value={editable.username}
                    name="username"
-                    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 dark:bg-gray-900 dark:text-gray-100 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"
                  />
                </div>
                <div class="text-sm w-full">
@@ -113,7 +114,7 @@
                    type="email"
                    bind:value={editable.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 dark:bg-gray-900 dark:text-gray-100 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"
                  />
                </div>
                {#if !isEmail(editable.email)}
@@ -132,10 +133,10 @@
                    type="text"
                    bind:value={editable.firstname}
                    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 dark:bg-gray-900 dark:text-gray-100 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"
                  />
                </div>
-                <div class="text-sm w-full">
+                <!-- <div class="text-sm w-full">
                  <label for="middlename" class="font-medium text-gray-700"
                    >{$_("middle-name")}</label
                  >
@@ -145,9 +146,9 @@
                    type="text"
                    bind:value={editable.middlename}
                    name="middlename"
-                    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 dark:bg-gray-900 dark:text-gray-100 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"
                  />
-                </div>
+                </div> -->
                <div class="text-sm w-full">
                  <label for="lastname" class="font-medium text-gray-700"
                    >{$_("last-name")}</label
@@ -158,7 +159,7 @@
                    type="text"
                    bind:value={editable.lastname}
                    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 dark:bg-gray-900 dark:text-gray-100 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"
                  />
                </div>
              </div>
@@ -168,7 +169,7 @@
                  disabled={!save_enabled}
                  class:opacity-50={!save_enabled}
                  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"
+                  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"
                >
                  {$_("save-changes")}
                </button>
@@ -232,7 +233,7 @@
                  disabled={!update_password_enabled}
                  class:opacity-50={!update_password_enabled}
                  on:click={changePassword}
-                  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"
+                  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"
                >
                  {$_("update-password")}
                </button>
--- a/src/components/shared/TableActions.svelte
+++ b/src/components/shared/TableActions.svelte
@@ -1,26 +1,26 @@
 <script>
-  import { _ } from "svelte-i18n";
+	import { _ } from "svelte-i18n";

-  export let detailsLink;
-  export let detailsAction;
-  export let deleteEnabled;
-  export let deleteAction;
+	export let detailsLink = null;
+	export let detailsAction = null;
+	export let deleteEnabled;
+	export let deleteAction;
 </script>

 {#if detailsLink}
-  <a href={detailsLink} class="text-indigo-600 hover:text-indigo-900"
-    >{$_("details")}</a
-  >
+	<a href={detailsLink} class="text-indigo-600 hover:text-indigo-900"
+		>{$_("details")}</a
+	>
 {:else if detailsAction}
-  <button on:click={detailsAction} class="text-indigo-600 hover:text-indigo-900"
-    >{$_("details")}</button
-  >
+	<button on:click={detailsAction} class="text-indigo-600 hover:text-indigo-900"
+		>{$_("details")}</button
+	>
 {/if}
 {#if deleteEnabled}
-  <button
-    tabindex="0"
-    on:click={deleteAction}
-    class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-    >{$_("delete")}</button
-  >
+	<button
+		tabindex="0"
+		on:click={deleteAction}
+		class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+		>{$_("delete")}</button
+	>
 {/if}
--- a/src/components/statsclients/ConfirmStatsClientDeletion.svelte
+++ b/src/components/statsclients/ConfirmStatsClientDeletion.svelte
@@ -5,14 +5,14 @@
  import { createEventDispatcher } from "svelte";
  import toast from "svelte-french-toast";
  export let modal_open;
-  export let delete_station;
+  export let delete_client;
  const dispatch = createEventDispatcher();
  function cancelDelete() {
    modal_open = false;
-    dispatch("cancelDelete", { id: delete_station.id });
+    dispatch("cancelDelete", { id: delete_client.id });
  }
  function deleteClient() {
-    StatsClientService.statsClientControllerRemove(delete_station.id, true)
+    StatsClientService.statsClientControllerRemove(delete_client.id, true)
      .then((resp) => {
        toast($_("statsclient-deleted"));
        location.replace("./");
--- a/src/components/statsclients/CopyStatsClientTokenModal.svelte
+++ b/src/components/statsclients/CopyStatsClientTokenModal.svelte
@@ -4,6 +4,7 @@
  import { tick, createEventDispatcher } from "svelte";
  export let copy_modal_open;
  export let new_client;
+  import toast from 'svelte-french-toast'
  const dispatch = createEventDispatcher();
  let valueCopy = null;
  let areaDom;
--- a/src/components/statsclients/StatsClientDetail.svelte
+++ b/src/components/statsclients/StatsClientDetail.svelte
@@ -82,7 +82,7 @@
          {#if delete_triggered}
            <button
              on:click={deleteClient}
-              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 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"
              >{$_("confirm-deletion")}</button
            >
            <button
@@ -99,7 +99,7 @@
                delete_triggered = true;
              }}
              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 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-statsclient")}</button
            >
          {/if}
--- a/src/components/statsclients/StatsClients.svelte
+++ b/src/components/statsclients/StatsClients.svelte
@@ -1,44 +1,39 @@
 <script>
-  import { _ } from "svelte-i18n";
-  import store from "../../store";
-  import AddStatsClientModal from "./AddStatsClientModal.svelte";
-  import CopyStatsClientTokenModal from "./CopyStatsClientTokenModal.svelte";
-  import StatsClientsOverview from "./StatsClientsOverview.svelte";
-  export let modal_open = false;
-  export let copy_modal_open = false;
-  export let new_client = {};
-  let current_clients = [];
+	import { _ } from "svelte-i18n";
+	import store from "../../store";
+	import AddStatsClientModal from "./AddStatsClientModal.svelte";
+	import CopyStatsClientTokenModal from "./CopyStatsClientTokenModal.svelte";
+	import StatsClientsOverview from "./StatsClientsOverview.svelte";
+	export let modal_open = false;
+	export let copy_modal_open = false;
+	export let new_client = {};
+	let current_clients = [];
 </script>

 <section class="container p-5">
-  <span class="mb-1 text-3xl font-extrabold leading-tight">
-    {$_("statsclients")}
-    {#if store.state.jwtinfo.userdetails.permissions.includes("STATSCLIENT:CREATE")}
-      <button
-        on:click={() => {
-          modal_open = true;
-        }}
-        type="button"
-        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-      >
-        {$_("create-a-new-statsclient")}
-      </button>
-    {/if}
-  </span>
-  <StatsClientsOverview
-    bind:current_clients
-    bind:modal_open
-    bind:new_client
-    bind:copy_modal_open
-  />
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+		{$_("statsclients")}
+	</h4>
+	{#if store.state.jwtinfo.userdetails.permissions.includes("STATSCLIENT:CREATE")}
+		<button
+			on:click={() => {
+				modal_open = true;
+			}}
+			type="button"
+			class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+		>
+			{$_("create-a-new-statsclient")}
+		</button>
+	{/if}
+	<StatsClientsOverview bind:current_clients />
 </section>

 {#if store.state.jwtinfo.userdetails.permissions.includes("STATSCLIENT:CREATE")}
-  <AddStatsClientModal
-    bind:modal_open
-    bind:current_clients
-    bind:new_client
-    bind:copy_modal_open
-  />
-  <CopyStatsClientTokenModal bind:copy_modal_open bind:new_client />
+	<AddStatsClientModal
+		bind:modal_open
+		bind:current_clients
+		bind:new_client
+		bind:copy_modal_open
+	/>
+	<CopyStatsClientTokenModal bind:copy_modal_open bind:new_client />
 {/if}
--- a/src/components/statsclients/StatsClientsOverview.svelte
+++ b/src/components/statsclients/StatsClientsOverview.svelte
@@ -43,7 +43,7 @@
        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"
@@ -74,7 +74,10 @@
                .toString()
                .toLowerCase()
                .includes(searchvalue)}
-                <tr data-rowid="station_{c.id}">
+                <tr
+                  class="odd:bg-white even:bg-gray-100"
+                  data-rowid="station_{c.id}"
+                >
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="ml-4">
--- a/src/components/teams/TeamDetail.svelte
+++ b/src/components/teams/TeamDetail.svelte
@@ -5,7 +5,8 @@
    RunnerTeamService,
  } from "@odit/lfk-client-js";
  import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  
+  import toast from 'svelte-french-toast'
+
  import store from "../../store";
  import Select from "svelte-select";
  import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
@@ -125,7 +126,7 @@
              import_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"
+            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"
          >
            {$_("import-runners")}
          </button>
@@ -134,7 +135,7 @@
          {#if delete_triggered}
            <button
              on:click={deleteTeam}
-              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 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"
              >{$_("confirm-delete")}</button
            >
            <button
@@ -151,7 +152,7 @@
                delete_triggered = true;
              }}
              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 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-team")}</button
            >
          {/if}
@@ -162,7 +163,7 @@
            disabled={!save_enabled}
            class:opacity-50={!save_enabled}
            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"
+            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"
            >{$_("save-changes")}</button
          >
        {/if}
@@ -290,6 +291,13 @@
        on:clear={() => (teamdata.parentGroup = null)}
      />
    </div>
+    <div class="text-sm w-full">
+      <span class="font-medium text-gray-700">{$_("distance")}</span>
+      <br />
+      <span class="text-gray-700"
+        >{(original.total_distance / 1000).toFixed(2)} km</span
+      >
+    </div>
  </section>
 {:else}
  {#await promise}
--- a/src/components/teams/Teams.svelte
+++ b/src/components/teams/Teams.svelte
@@ -8,23 +8,20 @@
 </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 font-mono">
    {$_("teams")}
-    {#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:CREATE")}
-      <button
-        on:click={() => {
-          modal_open = true;
-        }}
-        type="button"
-        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-      >
-        {$_("create-team")}
-      </button>
-    {/if}
-  </span>
-  <p class="mb-8 text-lg text-gray-500">
-    {$_("everything-is-more-fun-together")}
-  </p>
+  </h4>
+  {#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:CREATE")}
+    <button
+      on:click={() => {
+        modal_open = true;
+      }}
+      type="button"
+      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+    >
+      {$_("create-team")}
+    </button>
+  {/if}
  <TeamsOverview bind:current_teams />
 </section>

--- a/src/components/teams/TeamsOverview.svelte
+++ b/src/components/teams/TeamsOverview.svelte
@@ -54,7 +54,7 @@
        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="h-12">
        <GenerateSponsoringContracts
@@ -77,7 +77,7 @@
                scope="col"
                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
              >
-                <span
+                <button
                  on:click={() => {
                    const newstate = !current_teams.some(
                      (r) => r.is_selected === true
@@ -91,7 +91,7 @@
                  >{#if current_teams.some((r) => r.is_selected === true)}
                    {$_("deselect-all")}
                  {:else}{$_("select-all")}{/if}
-                </span>
+                </button>
              </th>
              <th
                scope="col"
@@ -122,7 +122,10 @@
                .toString()
                .toLowerCase()
                .includes(searchvalue)}
-                <tr data-rowid="team_{t.id}">
+                <tr
+                  class="odd:bg-white even:bg-gray-100"
+                  data-rowid="team_{t.id}"
+                >
                  <td class="px-6 py-4 whitespace-nowrap">
                    <input
                      bind:checked={t.is_selected}
--- a/src/components/tracks/AddTrackModal.svelte
+++ b/src/components/tracks/AddTrackModal.svelte
@@ -223,7 +223,7 @@
            type="button"
            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
          >
-            Create
+            {$_("create")}
          </button>
          <button
            on:click={() => {
--- a/src/components/tracks/Tracks.svelte
+++ b/src/components/tracks/Tracks.svelte
@@ -1,193 +0,0 @@
-<script>
-  import { _, json } from "svelte-i18n";
-  import TracksEmptyState from "./TracksEmptyState.svelte";
-  import { TrackService } from "@odit/lfk-client-js";
-  const tracks_promise = TrackService.trackControllerGetAll();
-  import { getlang } from "../base/datatable_i18n";
-  import { Grid, html } from "gridjs";
-  import { tracks as tracksstore } from "../../store.js";
-  import toast from "svelte-french-toast";
-  $: trackscache = [];
-  $: blocked = [];
-  let table;
-  let datatable;
-  let datatable_inited = false;
-  tracksstore.subscribe((val) => {
-    trackscache = val;
-    setTimeout(() => {
-      if (val.length > 0) {
-        renderdatatable();
-      }
-    }, 100);
-  });
-  tracks_promise.then((data) => {
-    tracksstore.set(data);
-  });
-  window.track__edit_cancel = () => renderdatatable();
-  window.track__edit_save = () => {
-    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
-    if (blocked.includes(trackid)) {
-      //
-    } else {
-      blocked.push(trackid);
-      const elem = document.querySelector(
-        `[data-id="triggered_table_actions_${trackid}"]`
-      ).parentNode.parentNode.parentNode;
-      toast.loading($_("track-is-being-updated"));
-      TrackService.trackControllerPut(trackid, {
-        id: trackid,
-        name: elem.childNodes[0].childNodes[0].value,
-        distance: parseInt(elem.childNodes[1].childNodes[0].value),
-        minimumLapTime: parseInt(elem.childNodes[2].childNodes[0].value),
-      })
-        .then((r) => {
-          toast.dismiss();
-          toast.success($_("track-was-updated"));
-          blocked = blocked.filter((e) => e !== trackid);
-          document
-            .querySelector(`[data-id="default_table_actions_${trackid}"]`)
-            .classList.remove("hidden");
-          document
-            .querySelector(`[data-id="triggered_table_actions_${trackid}"]`)
-            .classList.add("hidden");
-          //
-          elem.childNodes[0].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[0].childNodes[0].value}</td>`;
-          elem.childNodes[1].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[1].childNodes[0].value}</td>`;
-          elem.childNodes[2].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[2].childNodes[0].value}</td>`;
-        })
-        .catch((err) => {});
-    }
-  };
-  window.track__delete_handler = () => {
-    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
-    document
-      .querySelector(`[data-id="default_table_actions_${trackid}"]`)
-      .classList.add("hidden");
-    document
-      .querySelector(`[data-id="deleteconfirmation_table_actions_${trackid}"]`)
-      .classList.remove("hidden");
-  };
-  window.track__delete_cancel = () => {
-    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
-    document
-      .querySelector(`[data-id="default_table_actions_${trackid}"]`)
-      .classList.remove("hidden");
-    document
-      .querySelector(`[data-id="deleteconfirmation_table_actions_${trackid}"]`)
-      .classList.add("hidden");
-  };
-  window.track__delete_confirm = () => {
-    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
-    TrackService.trackControllerRemove(trackid)
-      .then(() => {
-        const newStoreVal = trackscache.filter((obj) => obj.id !== trackid);
-        tracksstore.set(newStoreVal);
-        renderdatatable();
-      })
-      .catch((err) => {});
-  };
-  window.track__edit_handler = () => {
-    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
-    document
-      .querySelector(`[data-id="default_table_actions_${trackid}"]`)
-      .classList.add("hidden");
-    document
-      .querySelector(`[data-id="triggered_table_actions_${trackid}"]`)
-      .classList.remove("hidden");
-    const elem = document.querySelector(
-      `[data-id="triggered_table_actions_${trackid}"]`
-    ).parentNode.parentNode.parentNode;
-    const trackname = elem.childNodes[0].textContent;
-    const tracklength = parseInt(elem.childNodes[1].textContent);
-    const trackmintime = parseInt(elem.childNodes[2].textContent);
-    elem.childNodes[0].innerHTML = `<input type="text" value="${trackname}" 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">`;
-    elem.childNodes[1].innerHTML = `<input type="text" value="${tracklength}" name="tracklength" 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">`;
-    elem.childNodes[2].innerHTML = `<input type="text" value="${trackmintime}" name="trackmintime" 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">`;
-  };
-  //
-  function renderdatatable() {
-    let tabledata = [];
-    trackscache.forEach((track) => {
-      tabledata.push([
-        track.name,
-        track.distance,
-        track.minimumLapTime || 0,
-        html(`
-        <div class="hidden" data-id="triggered_table_actions_${track.id}">
-          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-400 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${
-            track.id
-          }" onclick="track__edit_save()">${$_("save")}</button>
-          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${
-            track.id
-          }" onclick="track__edit_cancel()">${$_("cancel")}</button>
-        </div>
-        <div data-id="default_table_actions_${track.id}">
-          <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 sm:w-auto sm:text-sm" data-trackid="${
-            track.id
-          }" onclick="track__edit_handler()">${$_("edit")}</button>
-          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${
-            track.id
-          }" onclick="track__delete_handler()">${$_("delete")}</button>
-        </div>
-        <div class="hidden" data-id="deleteconfirmation_table_actions_${
-          track.id
-        }">
-          <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 sm:w-auto sm:text-sm" data-trackid="${
-            track.id
-          }" onclick="track__delete_cancel()">${$_("cancel")}</button>
-          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${
-            track.id
-          }" onclick="track__delete_confirm()">${$_("confirm")}</button>
-        </div>
-      `),
-      ]);
-    });
-
-    if (datatable_inited === false) {
-      datatable = new Grid({
-        columns: [
-          $_("track-name"),
-          $_("track-length-in-m"),
-          $_("minimum-lap-time-in-s"),
-          $_("action"),
-        ],
-        language: getlang($json("datatable")),
-        sort: true,
-        search: { enabled: true },
-        data: tabledata,
-        pagination: {
-          enabled: true,
-          limit: 25,
-          summary: false,
-        },
-      }).render(table);
-      datatable_inited = true;
-    } else {
-      datatable.updateConfig({ data: tabledata }).forceRender();
-    }
-  }
-</script>
-
-{#if trackscache.length > 0}
-  <div bind:this={table} />
-{/if}
-{#await tracks_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">{$_("track-data-is-being-loaded")}</p>
-    <p class="text-sm">{$_("this-might-take-a-moment")}</p>
-  </div>
-{:then}
-  {#if trackscache.length === 0}
-    <TracksEmptyState />
-  {/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}
--- a/src/components/tracks/TracksOverview.svelte
+++ b/src/components/tracks/TracksOverview.svelte
@@ -2,25 +2,267 @@
  import { _ } from "svelte-i18n";
  import AddTrackModal from "./AddTrackModal.svelte";
  let modal_open = false;
-  import Tracks from "./Tracks.svelte";
+  import TracksEmptyState from "./TracksEmptyState.svelte";
+  import { TrackService } from "@odit/lfk-client-js";
+  const tracks_promise = TrackService.trackControllerGetAll();
+  import { tracks as tracksstore } from "../../store.js";
+  import toast from "svelte-french-toast";
+  $: trackscache = [];
+  $: deleteTracks = [];
+  $: editTracks = [];
+  tracksstore.subscribe((val) => {
+    trackscache = val;
+  });
+  tracks_promise.then((data) => {
+    tracksstore.set(data);
+  });
 </script>

 <section class="container p-5">
-  <span class="mb-1 text-3xl font-extrabold leading-tight">
-    Tracks
-    <button
-      on:click={() => {
-        modal_open = true;
-      }}
-      type="button"
-      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+    {$_("tracks")}
+  </h4>
+  <button
+    on:click={() => {
+      modal_open = true;
+    }}
+    type="button"
+    class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+  >
+    {$_("create-track")}
+  </button>
+  {#await tracks_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"
    >
-      {$_("create-track")}
-    </button>
-  </span>
-  <p class="mb-8 text-lg text-gray-500">
-    {$_("configure-the-tracks-and-minimum-lap-times")}
-  </p>
-  <Tracks />
+      <p class="font-bold">{$_("track-data-is-being-loaded")}</p>
+      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
+    </div>
+  {:then}
+    {#if trackscache.length === 0}
+      <TracksEmptyState />
+    {:else}
+      <div
+        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll mt-4"
+      >
+        <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"
+              >
+                ID
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+              >
+                {$_("track-name")}
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+              >
+                {$_("distance")}
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+              >
+                {$_("minimum-lap-time-in-s")}
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+              >
+                {$_("action")}
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200">
+            {#each trackscache as t}
+              <tr
+                class="odd:bg-white even:bg-gray-100"
+                data-rowid="station_{t.id}"
+              >
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="flex items-center">
+                    <div class="ml-4">
+                      <div class="text-sm font-medium text-gray-900">
+                        #{t.id}
+                      </div>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="flex items-center">
+                    <div class="ml-4">
+                      {#if editTracks.findIndex((tr) => tr.id === t.id) !== -1}
+                        <input
+                          class="shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-0.5"
+                          type="text"
+                          value={t.name}
+                          on:input={(e) => {
+                            const i = editTracks.findIndex(
+                              (tr) => tr.id === t.id
+                            );
+                            editTracks[i].name = e.target.value;
+                          }}
+                        />
+                      {:else}
+                        <div class="text-sm font-medium text-gray-900">
+                          {t.name}
+                        </div>
+                      {/if}
+                    </div>
+                  </div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="flex items-center">
+                    <div class="ml-4">
+                      {#if editTracks.findIndex((tr) => tr.id === t.id) !== -1}
+                      <input
+                          class="shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-0.5"
+                          type="number"
+                          value={t.distance}
+                          on:input={(e) => {
+                            const i = editTracks.findIndex(
+                              (tr) => tr.id === t.id
+                            );
+                            editTracks[i].distance = parseInt(e.target.value);
+                          }}
+                        />
+                      {:else}
+                      <div class="text-sm font-medium text-gray-900">
+                        {t.distance}
+                      </div>
+                      {/if}
+                    </div>
+                  </div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="flex items-center">
+                    <div class="ml-4">
+                      {#if editTracks.findIndex((tr) => tr.id === t.id) !== -1}
+                      <input
+                          class="shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-0.5"
+                          type="number"
+                          value={t.minimumLapTime}
+                          on:input={(e) => {
+                            const i = editTracks.findIndex(
+                              (tr) => tr.id === t.id
+                            );
+                            editTracks[i].minimumLapTime = parseInt(e.target.value);
+                          }}
+                        />
+                      {:else}
+                      <div class="text-sm font-medium text-gray-900">
+                        {t.minimumLapTime}
+                      </div>
+                      {/if}
+                    </div>
+                  </div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="flex items-center">
+                    {#if deleteTracks.includes(t.id)}
+                      <button
+                        tabindex="0"
+                        on:click={() => {
+                          deleteTracks = deleteTracks.filter((tr) => {
+                            tr.id !== t.id;
+                          });
+                        }}
+                        class="ml-4 text-gray-600 hover:text-gray-900 cursor-pointer"
+                        >{$_("cancel")}</button
+                      >
+                      <button
+                        tabindex="0"
+                        on:click={async () => {
+                          TrackService.trackControllerRemove(t.id);
+                          deleteTracks = deleteTracks.filter((tr) => {
+                            tr.id !== t.id;
+                          });
+                          tracksstore.set(
+                            $tracksstore.filter((tr) => tr.id !== t.id)
+                          );
+                          toast($_("track-deleted"));
+                        }}
+                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+                        >{$_("confirm-delete")}</button
+                      >
+                    {:else if editTracks.findIndex((tr) => tr.id === t.id) !== -1}
+                      <button
+                        tabindex="0"
+                        on:click={() => {
+                          editTracks = editTracks.filter((tr) => {
+                            tr.id !== t.id;
+                          });
+                        }}
+                        class="ml-4 text-gray-600 hover:text-gray-900 cursor-pointer"
+                        >{$_("cancel")}</button
+                      >
+                      <button
+                        tabindex="0"
+                        on:click={async () => {
+                          toast.loading($_("track-is-being-updated"));
+                          const i = editTracks.findIndex(
+                            (tr) => tr.id === t.id
+                          );
+                          const res = await TrackService.trackControllerPut(
+                            t.id,
+                            editTracks[i]
+                          );
+                          tracksstore.set(
+                            $tracksstore.filter((tr) => tr.id !== t.id)
+                          );
+                          $tracksstore.push(res)
+                          editTracks = editTracks.filter((tr) => {
+                            tr.id !== t.id;
+                          });
+                          toast.dismiss();
+                          toast.success($_("track-updated"));
+                        }}
+                        class="ml-4 text-green-600 hover:text-green-900 cursor-pointer"
+                        >{$_("save")}</button
+                      >
+                    {:else}
+                      <button
+                        tabindex="0"
+                        on:click={() => {
+                          editTracks.push(t);
+                          editTracks = editTracks;
+                        }}
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
+                        >{$_("edit")}</button
+                      >
+                      <button
+                        tabindex="0"
+                        on:click={() => {
+                          deleteTracks.push(t.id);
+                          deleteTracks = deleteTracks;
+                        }}
+                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+                        >{$_("delete")}</button
+                      >
+                    {/if}
+                  </div>
+                </td>
+              </tr>
+            {/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}
 </section>
 <AddTrackModal bind:modal_open />
--- a/src/components/users/AddUserModal.svelte
+++ b/src/components/users/AddUserModal.svelte
@@ -166,7 +166,7 @@
                    </span>
                  {/if}
                </div>
-                <div class="col-span-6">
+                <!-- <div class="col-span-6">
                  <label
                    for="trackname"
                    class="block text-sm font-medium text-gray-700"
@@ -181,7 +181,7 @@
                    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"
                  />
-                </div>
+                </div> -->
                <div class="col-span-6">
                  <label
                    for="lastname"
--- a/src/components/users/UserDetail.svelte
+++ b/src/components/users/UserDetail.svelte
@@ -147,7 +147,6 @@
            <li class="flex items-center">
              <span class="mr-2"
                >{original_data.firstname}
-                {original_data.middlename || ""}
                {original_data.lastname}</span
              >
            </li>
@@ -157,14 +156,13 @@
    </div>
    <div class="mb-8 text-3xl font-extrabold">
      {original_data.firstname}
-      {original_data.middlename || ""}
      {original_data.lastname}
      <span data-id="user_actions_${editable_userdata.id}">
        {#if store.state.jwtinfo.userdetails.permissions.includes("USER:DELETE")}
          {#if delete_triggered}
            <button
              on:click={deleteUser}
-              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 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"
              >{$_("confirm-delete")}</button
            >
            <button
@@ -181,7 +179,7 @@
                delete_triggered = true;
              }}
              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 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-user")}</button
            >
          {/if}
@@ -192,7 +190,7 @@
            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"
+            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"
            >{$_("save-changes")}</button
          >
        {/if}
@@ -227,10 +225,10 @@
        type="text"
        bind:value={editable_userdata.firstname}
        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 dark:bg-gray-900 dark:text-gray-100 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"
      />
    </div>
-    <div class="text-sm w-full">
+    <!-- <div class="text-sm w-full">
      <label for="middlename" class="font-medium text-gray-700"
        >{$_("middle-name")}</label
      >
@@ -240,9 +238,9 @@
        type="text"
        bind:value={editable_userdata.middlename}
        name="middlename"
-        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 dark:bg-gray-900 dark:text-gray-100 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"
      />
-    </div>
+    </div> -->
    <div class="text-sm w-full">
      <label for="lastname" class="font-medium text-gray-700"
        >{$_("last-name")}</label
@@ -253,7 +251,7 @@
        type="text"
        bind:value={editable_userdata.lastname}
        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 dark:bg-gray-900 dark:text-gray-100 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"
      />
    </div>
    <div class="text-sm w-full">
@@ -266,7 +264,7 @@
        type="email"
        bind:value={editable_userdata.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 dark:bg-gray-900 dark:text-gray-100 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"
      />
    </div>
    {#if !isEmail(editable_userdata.email)}
@@ -285,7 +283,7 @@
        type="text"
        bind:value={editable_userdata.username}
        name="username"
-        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 dark:bg-gray-900 dark:text-gray-100 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"
      />
    </div>
    <div class="text-sm w-full">
@@ -293,7 +291,7 @@
      <!-- svelte-ignore a11y-no-onchange -->
      <select
        bind:value={usergroups_array}
-        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 dark:bg-gray-900 dark:text-gray-100 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"
        multiple
      >
        {#each allgroups as g}
@@ -319,7 +317,7 @@
          placeholder={$_("search-for-permission")}
          type="text"
          bind:value={search_permission}
-          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"
+          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 rounded-md p-2"
        />
      </div>
      {#each original_data.permissions as p}
--- a/src/components/users/UserPermissions.svelte
+++ b/src/components/users/UserPermissions.svelte
@@ -150,13 +150,13 @@
            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"
+            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"
            >{$_("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"
+            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}
@@ -184,7 +184,7 @@
            {#each allpermissions as p}
              {#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}
                  <button
@@ -203,7 +203,7 @@
                      }
                    }}
                    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"
+                    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>
@@ -217,7 +217,7 @@
          >
            {#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}
                <button
@@ -243,7 +243,7 @@
                    }
                  }}
                  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"
+                  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>
@@ -256,7 +256,7 @@
          >
            {#each inheritedPermissions 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>
--- a/src/components/users/Users.svelte
+++ b/src/components/users/Users.svelte
@@ -8,21 +8,20 @@
 </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 font-mono">
    {$_("users")}
-    {#if store.state.jwtinfo.userdetails.permissions.includes("USER:CREATE")}
-      <button
-        on:click={() => {
-          modal_open = true;
-        }}
-        type="button"
-        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-      >
-        {$_("create-user")}
-      </button>
-    {/if}
-  </span>
-  <p class="mb-8 text-lg text-gray-500">{$_("manage-admin-users")}</p>
+  </h4>
+  {#if store.state.jwtinfo.userdetails.permissions.includes("USER:CREATE")}
+    <button
+      on:click={() => {
+        modal_open = true;
+      }}
+      type="button"
+      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+    >
+      {$_("create-user")}
+    </button>
+  {/if}
  <UsersOverview bind:current_users />
 </section>

--- a/src/components/users/UsersOverview.svelte
+++ b/src/components/users/UsersOverview.svelte
@@ -37,7 +37,7 @@
        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"
      />
      <!-- {/if} -->
      <!-- <button
@@ -45,7 +45,7 @@
          advanced_search = !advanced_search;
        }}
        type="button"
-        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm: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-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:w-auto sm:text-sm">
        {#if advanced_search}
          toggle simple search
        {:else}toggle advanced search{/if}
@@ -85,13 +85,15 @@
                .toString()
                .toLowerCase()
                .includes(searchvalue)}
-                <tr data-rowid="user_{u.id}">
+                <tr
+                  class="odd:bg-white even:bg-gray-100"
+                  data-rowid="user_{u.id}"
+                >
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="ml-4">
                        <div class="text-sm font-medium text-gray-900">
                          {u.firstname}
-                          {u.middlename || ""}
                          {u.lastname}
                        </div>
                        <div class="text-sm text-gray-500">
@@ -103,12 +105,12 @@
                  <td class="px-6 py-4 whitespace-nowrap">
                    {#if u.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 bg-green-100 text-green-800"
                        >{$_("active")}</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 bg-red-100 text-red-800"
                        >{$_("inactive")}</span
                      >
                    {/if}
@@ -117,7 +119,7 @@
                    {#each u.groups as g}
                      <a
                        href="../groups/{g.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 border bg-gray-100 text-gray-800"
                        >{g.name}</a
                      >
                    {/each}
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -37,6 +37,7 @@
    "all-associated-scans-will-get-deleted-as-well": "Alle Scans dieser Station werden ebenfalls gelöscht",
    "all-associated-teams-and-runners-will-be-deleted-too": "Alle assoziierten Teams und Läufer werden auch gelöscht!",
    "all-cards-loaded": "Alle Karten geladen",
+    "all-donors-loaded": "Alle Sponsoren geladen",
    "already-paid": "Bereits bezahlt",
    "amount": "Anzahl",
    "amount-per-kilometer": "Betrag pro Kilometer",
@@ -74,7 +75,6 @@
    "close": "Schließen",
    "code": "Code",
    "config-codes": "Konfigurations-Codes",
-    "configure-the-tracks-and-minimum-lap-times": "Bearbeite die Tracks und ihre minimale Rundenzeit",
    "confirm": "Bestätigen",
    "confirm-delete": "Löschung Bestätigen",
    "confirm-delete-donor-with-all-donations": "Bestätigen, Sponsor mit allen Sponsorings löschen",
@@ -112,7 +112,7 @@
    "create-a-new-scanstation": "Neue Station erstellen",
    "create-a-new-statsclient": "Neuen Statsclient erstellen",
    "create-a-new-team": "Erstelle ein neues Team",
-    "create-a-new-track": "Neuen Track erstellen",
+    "create-a-new-track": "Neue Laufstrecke erstellen",
    "create-a-new-user": "Neuen Benutzer anlegen",
    "create-a-new-user-group": "Erstelle eine neue Gruppe",
    "create-and-generate-pdf": "Erstellen und PDF herunterladen",
@@ -120,7 +120,7 @@
    "create-bulk-cards": "Blankokarten erstellen",
    "create-organization": "Organisation erstellen",
    "create-team": "Team erstellen",
-    "create-track": "Track erstellen",
+    "create-track": "Laufstrecke erstellen",
    "create-user": "Benutzer anlegen",
    "create-without-pdf": "Ohne PDF erstellen",
    "created-blanco-cards": "Blankokarten wurden erstellt",
@@ -206,7 +206,7 @@
    "edit": "Bearbeiten",
    "edit-a-card": "Läuferkarte bearbeiten",
    "edit-permissions": "Berechtigungen bearbeiten",
-    "email_address_or_username": "E-Mail-Adresse/ Benutzername",
+    "email_address_or_username": "E-Mail-Adresse",
    "enabled": "aktiviert",
    "enabled_large": "Aktiviert",
    "english": "Englisch",
@@ -215,7 +215,6 @@
    "error-whyile-copying-to-clipboard": "Fehler beim Kopieren in die Zwischenablage",
    "error_on_login": "😢Fehler beim Login",
    "everything-concerning-your-profile": "Alles zu deinem Profil",
-    "everything-is-more-fun-together": "Im Team macht's mehr Spaß 🏃‍♂️🏃‍♀️🏃‍♂️",
    "faq": "FAQ",
    "filename_sponsoringquittungsliste": "SponsoringQuittungsListe",
    "filter-by-organization-team": "Filtern nach Organisation / Team",
@@ -272,6 +271,7 @@
    "loading-contact-details": "Kontaktdaten werden geladen ...",
    "loading-donation-details": "Lade Sponsoringdetails",
    "loading-donor-details": "Lade Details",
+    "loading-donors": "Sponsoren werden geladen",
    "loading-group-detail": "Lade Gruppendetails...",
    "loading-profile-data": "Lade Profildaten",
    "loading-runners": "Läufer werden geladen...",
@@ -390,7 +390,7 @@
    "scanstation": "Scanner Station",
    "scanstation-added": "Station wurde erstellt",
    "scanstation-is-being-added": "Scannerstation wird angelegt...",
-    "scanstations": "Scanner Stationen",
+    "scanstations": "Scanner",
    "scanstations-are-being-loaded": "Scannerstationen werden geladen...",
    "search-for-an-organization-by-name-or-id": "Suche eine Organisation (via Name oder #ID)",
    "search-for-an-organization-or-team-by-name-or-id": "Suche eine Organisation oder ein Team (via Name oder #ID)",
@@ -413,7 +413,7 @@
    "statsclient": "StatsClient",
    "statsclient-deleted": "Statsclient wurde gelöscht",
    "statsclient-is-being-added": "Statsclient wird angelegt...",
-    "statsclients": "Statsclient (aka Beamershow)",
+    "statsclients": "StatsClients",
    "statsclients-are-being-loaded": "Statsclients werden geladen",
    "status": "Status",
    "stuff-that-could-harm-your-profile": "Einstellungen, die deinem Profil nachhaltig schaden können",
@@ -454,17 +454,20 @@
    "total-paid-amount": "Gezahlt",
    "total-scans": "Scans",
    "total_donation_amount_in_eur": "Gesamtbetrag in €",
-    "track": "Track",
-    "track-added": "Track hinzugefügt",
-    "track-data-is-being-loaded": "Trackdaten werden geladen",
-    "track-is-being-added": "Track wird hinzugefügt...",
-    "track-is-being-updated": "Track wird aktualisiert...",
-    "track-length-in-m": "Tracklänge (in Metern)",
+    "track": "Laufstrecke",
+    "track-added": "Laufstrecke hinzugefügt",
+    "track-data-is-being-loaded": "Laufstrecke wird geladen",
+    "track-deleted": "Laufstrecke gelöscht",
+    "track-is-being-added": "Laufstrecke wird hinzugefügt...",
+    "track-is-being-deleted": "Laufstrecke wird gelöscht",
+    "track-is-being-updated": "Laufstrecke wird aktualisiert...",
+    "track-length-in-m": "Laufstrecke in Metern",
    "track-length-must-be-greater-than-0": "Die Länge muss größer als 0 (Meter) sein",
-    "track-name": "Trackname",
+    "track-name": "Name der Laufstrecke",
    "track-name-must-not-be-empty": "Der Name muss angegeben werden",
-    "track-was-updated": "Track wurde aktualisiert",
-    "tracks": "Tracks",
+    "track-updated": "Laufstrecke aktualisiert",
+    "track-was-updated": "Laufstrecke wurde aktualisiert",
+    "tracks": "Laufstrecken",
    "unpaid": "Offen",
    "update-card": "Karte aktualisieren",
    "update-password": "Passwort ändern",
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -37,6 +37,7 @@
    "all-associated-scans-will-get-deleted-as-well": "All associated scans will get deleted as well",
    "all-associated-teams-and-runners-will-be-deleted-too": "All associated teams and runners will be deleted too!",
    "all-cards-loaded": "All cards loaded",
+    "all-donors-loaded": "All donors loaded",
    "already-paid": "Already paid",
    "amount": "Amount",
    "amount-per-kilometer": "Amount per kilometer",
@@ -74,7 +75,6 @@
    "close": "Close",
    "code": "Code",
    "config-codes": "Config codes",
-    "configure-the-tracks-and-minimum-lap-times": "configure the tracks & minimum lap times",
    "confirm": "Confirm",
    "confirm-delete": "Confirm Delete",
    "confirm-delete-donor-with-all-donations": "Confirm, delete donor with all donations",
@@ -206,7 +206,7 @@
    "edit": "Edit",
    "edit-a-card": "Edit a card",
    "edit-permissions": "edit permissions",
-    "email_address_or_username": "Email / username",
+    "email_address_or_username": "Email",
    "enabled": "enabled",
    "enabled_large": "Enabled",
    "english": "English",
@@ -215,7 +215,6 @@
    "error-whyile-copying-to-clipboard": "Error while copying to clipboard",
    "error_on_login": "Error on login",
    "everything-concerning-your-profile": "Everything concerning your profile",
-    "everything-is-more-fun-together": "everything is more fun together 🏃‍♂️🏃‍♀️🏃‍♂️",
    "faq": "FAQ",
    "filename_sponsoringquittungsliste": "DonorReceiptList",
    "filter-by-organization-team": "Filter by Organization/ Team",
@@ -272,6 +271,7 @@
    "loading-contact-details": "Loading contact details...",
    "loading-donation-details": "Loading donation details",
    "loading-donor-details": "Loading donor details",
+    "loading-donors": "Loading donors",
    "loading-group-detail": "Loading group detail...",
    "loading-profile-data": "Loading profile data",
    "loading-runners": "loading runners...",
@@ -413,7 +413,7 @@
    "statsclient": "statsclient",
    "statsclient-deleted": "Deleted statsclient",
    "statsclient-is-being-added": "Statsclient is being added...",
-    "statsclients": "Statsclients (aka Beamershow)",
+    "statsclients": "Statsclients",
    "statsclients-are-being-loaded": "Loading statsclients",
    "status": "Status",
    "stuff-that-could-harm-your-profile": "Stuff that could harm your profile",
@@ -457,12 +457,15 @@
    "track": "Track",
    "track-added": "Track added",
    "track-data-is-being-loaded": "Track data is being loaded",
+    "track-deleted": "Track deleted",
    "track-is-being-added": "Track is being added...",
+    "track-is-being-deleted": "Track is being deleted",
    "track-is-being-updated": "Track is being updated...",
    "track-length-in-m": "Track Length in m",
    "track-length-must-be-greater-than-0": "Track length must be greater than 0",
    "track-name": "Track name",
    "track-name-must-not-be-empty": "Track name must not be empty",
+    "track-updated": "Track deleted",
    "track-was-updated": "Track was updated!",
    "tracks": "Tracks",
    "unpaid": "Unpaid",
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,4 @@
 import "./style.css";
-import "gridjs/dist/theme/mermaid.css";
 import App from "./App.svelte";

 const app = new App({
--- a/src/style.css
+++ b/src/style.css
@@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
+.activenav {
+    @apply bg-gray-300;
+    @apply text-black;
+}
@tailwind utilities;
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Nicolai Ort	477c650f3f	🚀RELEASE v1.5.3 All checks were successful ci/woodpecker/tag/release Pipeline was successful Details ci/woodpecker/push/build Pipeline was successful Details	2024-11-26 19:20:04 +01:00
Nicolai Ort	fc15c68cba	feat(dx): Yarn support Some checks failed ci/woodpecker/push/build Pipeline failed Details	2024-11-26 19:19:31 +01:00
Nicolai Ort	32b5f5420b	refactor(ci): Only build licences, don't export All checks were successful ci/woodpecker/push/build Pipeline was successful Details	2024-11-26 19:11:14 +01:00
Nicolai Ort	ee87f82799	fix(ci): Update git pushb settings Some checks failed ci/woodpecker/push/build Pipeline failed Details	2024-11-26 19:06:32 +01:00
Nicolai Ort	7c08f522aa	fix(ci): Update relase machanism	2024-11-26 19:06:16 +01:00
Nicolai Ort	e211554579	fix(ci): Install pnpm Some checks failed ci/woodpecker/push/build Pipeline failed Details	2024-11-26 19:01:51 +01:00
Nicolai Ort	7ba890dfd7	fix(ci): Switch over to new woodpecker version Some checks failed ci/woodpecker/push/build Pipeline failed Details	2024-11-26 18:59:42 +01:00
Philipp Dormann	68b4309164	chore(deps): bump some	2024-11-21 18:05:11 +01:00
Philipp Dormann	d803f3d490	fix: unexpected/ missing props	2024-11-21 17:05:06 +01:00
Philipp Dormann	5468766d87	fix(orgs): ImportRunnerModal props	2024-11-21 17:00:03 +01:00
Philipp Dormann	e967d8d20c	feat(dashboard): reorder menu items	2024-11-21 16:59:48 +01:00
Philipp Dormann	ad4db882f0	feat: cleanup random page toasts	2024-11-21 16:56:10 +01:00
Philipp Dormann	84aa846b87	feat(about): cleanup ui	2024-11-21 16:55:58 +01:00
Philipp Dormann	3532968b33	🚀RELEASE v1.5.2	2024-11-21 10:33:56 +01:00
Philipp Dormann	6bb49db4ee	feat(dashboard): add lfk icon and app name to mobile nav bar	2024-11-21 10:24:23 +01:00
Philipp Dormann	38fb111f7a	feat: improved mobile buttons + search ui	2024-11-21 10:22:06 +01:00
Philipp Dormann	a50447f457	feat(dashboard): improved a11y of active sidebar menu item	2024-11-21 10:14:22 +01:00
Philipp Dormann	b1a2044631	feat(dashboard): match greeting style with rest of titles	2024-11-21 10:11:03 +01:00
Philipp Dormann	c883920caa	feat: improved dashboard titles ui + a11y	2024-11-21 10:09:14 +01:00
Philipp Dormann	21453ef272	feat: improved dashboard titles ui + a11y	2024-11-21 10:07:20 +01:00
Philipp Dormann	10182433f8	feat(i18n/de): rename "Track" to "Laufstrecke"	2024-11-21 10:04:38 +01:00
Philipp Dormann	b338f33a63	feat(dashboard): improved mobile ui hamburger button	2024-11-21 09:58:15 +01:00
Philipp Dormann	cb82200481	feat(users/UsersOverview): improve ui by adding borders to badges	2024-11-21 09:57:50 +01:00
Philipp Dormann	9abf74d6d2	🚀RELEASE v1.5.1	2024-11-21 09:46:27 +01:00
Philipp Dormann	50e81a6cb5	fix(dockerfile): AS casing	2024-11-21 09:45:51 +01:00
Philipp Dormann	8fae1fb6b3	chore(deps): bump some	2024-11-21 09:45:39 +01:00
Philipp Dormann	372fa110ec	fix(scanstations): CopyScanStationTokenModal open after create	2024-11-21 09:40:32 +01:00
Philipp Dormann	35bec9fe58	chore(deps): pnpm@9	2024-11-21 09:33:22 +01:00
Philipp Dormann	93d67bdba9	chore(deps): node:23.2.0	2024-11-21 09:32:58 +01:00
Philipp Dormann	a5e72a18e3	refactor(scanstations/CopyScanStationTokenModal): drop dispatch	2024-11-21 09:31:45 +01:00
Philipp Dormann	91d2f46b93	fix(config): add explicit window.config	2024-11-21 09:31:09 +01:00
Philipp Dormann	c60bae4533	fix(tracks/AddTrackModal): i18n	2024-11-21 09:30:52 +01:00
Philipp Dormann	43ac878d44	fix: tailwind config	2024-11-21 09:30:24 +01:00
Nicolai Ort	ceabd06a43	🚀RELEASE v1.5.0	2024-11-20 19:29:18 +01:00
Nicolai Ort	9bfc0c5338	fix(components): Add missing toast imports	2024-11-20 19:28:07 +01:00
Nicolai Ort	fb8206ff13	feat(ci)!: Switch to woodpecker All checks were successful ci/woodpecker/push/build Pipeline was successful Details	2023-11-06 19:51:01 +01:00
Nicolai Ort	dceb0ef461	🚀RELEASE v1.4.13 Some checks failed continuous-integration/drone/push Build encountered an error Details	2023-07-31 18:55:53 +02:00
Nicolai Ort	88bc1982ca	Show donations as euro in export	2023-07-31 18:55:09 +02:00
Nicolai Ort	e741a9d7e7	Merge branch 'dev' of git.odit.services:lfk/frontend into dev All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-18 21:35:28 +02:00
Nicolai Ort	65f1d22205	🚀RELEASE v1.4.12	2023-05-18 21:35:16 +02:00
Nicolai Ort	d867c08aba	fix(donation/payment): Funny javascript number to float conversion where integers were needed	2023-05-18 21:34:41 +02:00
Nicolai Ort	6193eff38e	new license file version [CI SKIP]	2023-05-10 11:29:03 +00:00
Nicolai Ort	f1929e7cf9	Merge branch 'dev' of git.odit.services:lfk/frontend into dev All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-10 13:28:43 +02:00
Nicolai Ort	373484c242	🚀RELEASE v1.4.11	2023-05-10 13:28:34 +02:00
Nicolai Ort	f77460bb0c	chore(deps): Lockfile	2023-05-10 13:28:21 +02:00
Nicolai Ort	574e0dcb05	feat(orgs): Show total distance	2023-05-10 13:27:47 +02:00
Nicolai Ort	7b19a0aa08	chore(deps): More bumps	2023-05-10 13:22:11 +02:00
Nicolai Ort	08642d7618	new license file version [CI SKIP]	2023-05-10 11:21:43 +00:00
Nicolai Ort	c3e9c27cd3	🚀RELEASE v1.4.10 All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-10 13:21:10 +02:00
Nicolai Ort	29a2854671	chore(deps): Bumped svelte-table	2023-05-10 13:20:44 +02:00
Nicolai Ort	8e6786e722	chore(deps): Pin and bump	2023-05-10 13:19:25 +02:00
Nicolai Ort	6ad40564e3	chore(deps): Bumped scanclientjs	2023-05-10 13:18:44 +02:00
Nicolai Ort	776973bfe9	🚀RELEASE v1.4.9 All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-09 16:32:00 +02:00
Nicolai Ort	6025e43baa	Fixed empty return	2023-05-09 16:29:41 +02:00
Nicolai Ort	d9a47f882c	Changed the in table replacement method	2023-05-09 16:29:25 +02:00
Nicolai Ort	4235758a6d	🚀RELEASE v1.4.8 All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-09 10:44:04 +02:00
Nicolai Ort	59fe2dfabb	Switched donor loading to non-paginated	2023-05-09 10:43:33 +02:00
Nicolai Ort	6364536dcd	🚀RELEASE v1.4.7 All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-04 20:30:20 +02:00
Nicolai Ort	a8a771114d	Paginated modal data loading	2023-05-04 20:28:21 +02:00
Nicolai Ort	4e0a2c8301	Moved loading to onmount	2023-05-04 20:17:29 +02:00
Nicolai Ort	b6fed92a17	🚀RELEASE v1.4.6 All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-04 20:10:57 +02:00
Nicolai Ort	97b57aeb0c	fix(donor/detail): Set email to null to avoid vaidation errors	2023-05-04 20:10:21 +02:00
Nicolai Ort	e25ed1fff9	fix(donor/detail): Set phone to null to avoid vaidation errors	2023-05-04 20:09:43 +02:00
Nicolai Ort	a2ff5b8a14	fix(donor/details): don't load donations	2023-05-04 20:07:54 +02:00
Nicolai Ort	0284f18beb	🚀RELEASE v1.4.5 All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-04 20:04:02 +02:00
Nicolai Ort	803d64c78c	fix: Removed dynamic pagesize adjustments All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-04 20:03:23 +02:00
Nicolai Ort	dacb2f8ace	Revert "revert: buggy pagination" This reverts commit `b2648645e8`.	2023-05-04 19:57:46 +02:00
Philipp Dormann	b7a53960e5	🚀RELEASE v1.4.4 All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-04 14:44:31 +02:00
Philipp Dormann	66f1e6b4fe	fix(AddDonationModal): missing toast dismiss on success distance donation Some checks failed continuous-integration/drone/push Build is failing Details	2023-05-04 14:44:17 +02:00
Philipp Dormann	33166bfafc	🚀RELEASE v1.4.3 All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-04 14:32:56 +02:00
Philipp Dormann	b2648645e8	revert: buggy pagination Some checks failed continuous-integration/drone/push Build is failing Details	2023-05-04 14:32:37 +02:00
Philipp Dormann	53e3ddb751	🚀RELEASE v1.4.2 All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-04 13:55:14 +02:00
Philipp Dormann	edc2dcab92	fix(DonorDetail): missing toast import All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-04 13:53:59 +02:00
Philipp Dormann	d49f545d94	fix(GenerateRunnerCertificates): missing toast import Some checks failed continuous-integration/drone/push Build is failing Details	2023-05-04 13:53:42 +02:00
Nicolai Ort	3b98c99b72	🚀RELEASE v1.4.1 All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-01 15:10:55 +02:00
Nicolai Ort	1da775a09b	Fixed translation	2023-05-01 15:10:18 +02:00
Nicolai Ort	f0475bd9a0	🚀RELEASE v1.4.0 All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-01 15:08:03 +02:00
Nicolai Ort	15d8afefbb	Bump dockerfile node All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-01 15:06:15 +02:00
Nicolai Ort	f3bcc01685	Pinned config files used All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-01 15:04:58 +02:00
Nicolai Ort	95238606d5	Switched build image node version Some checks failed continuous-integration/drone/push Build is failing Details	2023-05-01 15:01:49 +02:00
Nicolai Ort	bbf8170cb9	Updated store directory for dockerfil Some checks failed continuous-integration/drone/push Build is failing Details	2023-05-01 14:59:36 +02:00
Nicolai Ort	8c628f23dc	Merge pull request 'next' (#180 ) from next into dev Some checks failed continuous-integration/drone/push Build is failing Details Reviewed-on: #180	2023-05-01 12:55:19 +00:00
Philipp Dormann	811f5d5754	monospace fonts for IDs in overviews	2023-05-01 14:53:34 +02:00
Philipp Dormann	69ec7fc1fe	ScansOverview full month formatting	2023-05-01 14:42:56 +02:00
Nicolai Ort	064197d222	Dynamicly adjust page size for large datasets	2023-05-01 14:35:46 +02:00
Nicolai Ort	e9cf2bc849	Full track table editing	2023-05-01 14:27:56 +02:00
Nicolai Ort	103ad57ddc	Added track update toasts	2023-05-01 14:25:22 +02:00
Nicolai Ort	2856c5c1b7	Editing update logic	2023-05-01 14:23:25 +02:00
Nicolai Ort	a953349c14	Updated the track editing switch logic	2023-05-01 14:13:40 +02:00
Nicolai Ort	175d86745f	Added edit button for trackscans	2023-05-01 14:05:44 +02:00
Nicolai Ort	081a141218	Implemented delete for new track table	2023-05-01 14:03:46 +02:00
Philipp Dormann	e904ab0b84	fix: a11y in About page	2023-04-27 08:30:12 +02:00
Philipp Dormann	a2f9dbbe01	text cleanups, StatCard improvements	2023-04-27 08:29:07 +02:00
Philipp Dormann	8b922309b9	drop gridjs (TracksOverview Actions will need to be re-implemented)	2023-04-26 23:26:07 +02:00
Philipp Dormann	4c81e3c432	a11y improvements	2023-04-26 23:14:15 +02:00
Philipp Dormann	6c1a707166	cleanup legacy TeamsOverview text	2023-04-26 23:12:03 +02:00
Philipp Dormann	7d8253618b	improved StatCard readability	2023-04-26 23:11:01 +02:00
Philipp Dormann	dbaf85799a	improved login	2023-04-26 23:09:47 +02:00
Philipp Dormann	daeea24e0e	drop middlename for admin users	2023-04-26 23:08:25 +02:00
Philipp Dormann	0fca0352c5	a11y fix OrgOverview	2023-04-26 23:03:53 +02:00
Philipp Dormann	8eaad8219a	add missing striped tables	2023-04-26 23:02:13 +02:00
Philipp Dormann	6bc92f4a08	a11y cleanup	2023-04-26 23:02:06 +02:00