diff --git a/src/components/cards/Cards.svelte b/src/components/cards/Cards.svelte
index 8ea03d65..8d9b1695 100644
--- a/src/components/cards/Cards.svelte
+++ b/src/components/cards/Cards.svelte
@@ -20,7 +20,7 @@
         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"
+      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm  mb-1 lg:mb-0"
     >
       {$_("add-card")}
     </button>
@@ -29,7 +29,7 @@
         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"
+      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm  mb-1 lg:mb-0"
     >
       {$_("create-bulk-cards")}
     </button>
diff --git a/src/components/contacts/ContactDetail.svelte b/src/components/contacts/ContactDetail.svelte
index a47fe149..6194f270 100644
--- a/src/components/contacts/ContactDetail.svelte
+++ b/src/components/contacts/ContactDetail.svelte
@@ -162,7 +162,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: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 mb-1 lg:mb-0"
 						>{$_("save-changes")}</button
 					>
 				{/if}
diff --git a/src/components/donations/DonationDetail.svelte b/src/components/donations/DonationDetail.svelte
index 570635e9..e499fa45 100644
--- a/src/components/donations/DonationDetail.svelte
+++ b/src/components/donations/DonationDetail.svelte
@@ -193,7 +193,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: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 mb-1 lg:mb-0"
 						>{$_("save-changes")}</button
 					>
 				{/if}
diff --git a/src/components/donors/DonorDetail.svelte b/src/components/donors/DonorDetail.svelte
index b14a997b..671c2f5e 100644
--- a/src/components/donors/DonorDetail.svelte
+++ b/src/components/donors/DonorDetail.svelte
@@ -153,7 +153,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: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 mb-1 lg:mb-0"
 						>{$_("save-changes")}</button
 					>
 				{/if}
diff --git a/src/components/donors/Donors.svelte b/src/components/donors/Donors.svelte
index 9442c46e..d8d27fee 100644
--- a/src/components/donors/Donors.svelte
+++ b/src/components/donors/Donors.svelte
@@ -18,7 +18,7 @@
         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"
+      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm  mb-1 lg:mb-0"
     >
       {$_("add-donor")}
     </button>
@@ -59,7 +59,7 @@
         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"
+      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm  mb-1 lg:mb-0"
     >
       {$_("sponsoring-quittungs-liste_herunterladen")}
     </button>
diff --git a/src/components/groups/GroupDetail.svelte b/src/components/groups/GroupDetail.svelte
index 79cfe1d3..45322631 100644
--- a/src/components/groups/GroupDetail.svelte
+++ b/src/components/groups/GroupDetail.svelte
@@ -146,7 +146,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: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 mb-1 lg:mb-0"
 						>{$_("save-changes")}</button
 					>
 				{/if}
diff --git a/src/components/groups/GroupPermissions.svelte b/src/components/groups/GroupPermissions.svelte
index 429c5f3a..5ed14d88 100644
--- a/src/components/groups/GroupPermissions.svelte
+++ b/src/components/groups/GroupPermissions.svelte
@@ -141,7 +141,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: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 mb-1 lg:mb-0"
             >{$_("save-changes")}</button
           >
         {:else}
diff --git a/src/components/orgs/OrgDetail.svelte b/src/components/orgs/OrgDetail.svelte
index b6634d71..0501718d 100644
--- a/src/components/orgs/OrgDetail.svelte
+++ b/src/components/orgs/OrgDetail.svelte
@@ -173,7 +173,7 @@
 		</div>
 		<div class="mb-4 text-3xl font-extrabold leading-tight">
 			{original_object.name} [#{params.orgid}]
-			<span data-id="org_actions_${editable.id}">
+			<div data-id="org_actions_${editable.id}">
 				<GenerateSponsoringContracts
 					bind:sponsoring_contracts_show
 					bind:generate_orgs
@@ -223,11 +223,11 @@
 						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: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 mb-1 lg:mb-0"
 						>{$_("save-changes")}</button
 					>
 				{/if}
-			</span>
+			</div>
 		</div>
 		<div class="text-sm w-full mt-2">
 			<label for="name" class="font-semibold text-gray-700">{$_("name")}</label>
diff --git a/src/components/orgs/OrgOverview.svelte b/src/components/orgs/OrgOverview.svelte
deleted file mode 100644
index 5faa16f2..00000000
--- a/src/components/orgs/OrgOverview.svelte
+++ /dev/null
@@ -1,244 +0,0 @@
-<script>
-	import { _ } from "svelte-i18n";
-	import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
-	let modal_open = false;
-	let delete_org = {};
-	import { RunnerOrganizationService } from "@odit/lfk-client-js";
-	import store from "../../store";
-	import OrgsEmptyState from "./OrgsEmptyState.svelte";
-	import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
-	import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
-	import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
-	import toast from "svelte-french-toast";
-	$: searchvalue = "";
-	$: active_deletes = [];
-	$: sponsoring_contracts_show = current_organizations.some(
-		(r) => r.is_selected === true
-	);
-	$: cards_show = current_organizations.some((r) => r.is_selected === true);
-	$: generate_orgs = current_organizations.filter(
-		(r) => r.is_selected === true
-	);
-	$: certificates_show = current_organizations.some(
-		(r) => r.is_selected === true
-	);
-	export let current_organizations = [];
-
-	const promise =
-		RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
-			(val) => {
-				current_organizations = val;
-			}
-		);
-</script>
-
-<ConfirmOrgDeletion
-	on:cancelDelete={(event) => {
-		modal_open = false;
-		active_deletes[event.detail.id] = false;
-	}}
-	bind:modal_open
-	bind:delete_org
-/>
-{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:GET")}
-	{#await promise}
-		<div
-			class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
-			role="alert"
-		>
-			<p class="font-bold">{$_("organizations-are-being-loaded")}</p>
-			<p class="text-sm">{$_("this-might-take-a-moment")}</p>
-		</div>
-	{:then}
-		{#if current_organizations.length === 0}
-			<OrgsEmptyState />
-		{:else}
-			<input
-				type="search"
-				bind:value={searchvalue}
-				placeholder={$_("datatable.search")}
-				aria-label={$_("datatable.search")}
-				class="mb-2 w-full sm:w-auto mt-1 sm:mt-0 p-2 rounded-md border"
-			/>
-			<div class="h-12">
-				<GenerateSponsoringContracts
-					bind:sponsoring_contracts_show
-					bind:generate_orgs
-				/>
-				<GenerateRunnerCards bind:cards_show bind:generate_orgs />
-				<GenerateRunnerCertificates bind:certificates_show bind:generate_orgs />
-			</div>
-			<div
-				class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
-			>
-				<table class="divide-y divide-gray-200 w-full">
-					<thead class="bg-gray-50">
-						<tr class="odd:bg-white even:bg-gray-100">
-							<th
-								scope="col"
-								class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-							>
-								<button
-									on:click={() => {
-										const newstate = !current_organizations.some(
-											(r) => r.is_selected === true
-										);
-										current_organizations = current_organizations.map((r) => {
-											r.is_selected = newstate;
-											return r;
-										});
-									}}
-									class="underline cursor-pointer select-none"
-									>{#if current_organizations.some((r) => r.is_selected === true)}
-										{$_("deselect-all")}
-									{:else}{$_("select-all")}{/if}
-								</button>
-							</th>
-							<th
-								scope="col"
-								class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-							>
-								{$_("name")}
-							</th>
-							<th
-								scope="col"
-								class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-							>
-								{$_("address")}
-							</th>
-							<th
-								scope="col"
-								class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-							>
-								{$_("contact")}
-							</th>
-							<th scope="col" class="relative px-6 py-3">
-								<span class="sr-only">{$_("action")}</span>
-							</th>
-						</tr>
-					</thead>
-					<tbody class="divide-y divide-gray-200">
-						{#each current_organizations as o}
-							{#if Object.values(o)
-								.toString()
-								.toLowerCase()
-								.includes(searchvalue)}
-								<tr
-									class="odd:bg-white even:bg-gray-100"
-									data-rowid="org_{o.id}"
-								>
-									<td class="px-6 py-4 whitespace-nowrap">
-										<input
-											bind:checked={o.is_selected}
-											type="checkbox"
-											class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-										/>
-									</td>
-									<td class="px-6 py-4 whitespace-nowrap">
-										<div class="flex items-center">
-											<div class="text-sm font-medium text-gray-900">
-												{o.name}
-											</div>
-										</div>
-									</td>
-									<td class="px-6 py-4 whitespace-nowrap">
-										<div class="flex items-center">
-											<div class="text-sm font-medium text-gray-900">
-												{#if o.address.address1 !== null}
-													{o.address.address1}<br />
-													<!-- {o.address.address2 || ''}<br /> -->
-													{o.address.postalcode}
-													{o.address.city}
-													{o.address.country}
-												{/if}
-											</div>
-										</div>
-									</td>
-									<td class="px-6 py-4 whitespace-nowrap">
-										<div class="flex items-center">
-											<div class="text-sm font-medium text-gray-900">
-												{#if o.contact}
-													<a
-														href="../contacts/{o.contact.id}"
-														class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
-														>{o.contact.firstname}
-														{o.contact.middlename || ""}
-														{o.contact.lastname}</a
-													>
-												{:else}{$_("no-contact-specified")}{/if}
-											</div>
-										</div>
-									</td>
-									{#if active_deletes[o.id] === true}
-										<td
-											class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
-										>
-											<button
-												on:click={() => {
-													active_deletes[o.id] = false;
-												}}
-												tabindex="0"
-												class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
-												>{$_("cancel-delete")}</button
-											>
-											<button
-												on:click={() => {
-													toast.loading($_("deleting-organization"));
-													RunnerOrganizationService.runnerOrganizationControllerRemove(
-														o.id,
-														false
-													)
-														.then((resp) => {
-															current_organizations =
-																current_organizations.filter(
-																	(obj) => obj.id !== o.id
-																);
-															toast($_("organization-deleted"));
-														})
-														.catch((err) => {
-															modal_open = true;
-															delete_org = o;
-														});
-												}}
-												tabindex="0"
-												class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-												>{$_("confirm-delete")}</button
-											>
-										</td>
-									{:else}
-										<td
-											class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
-										>
-											<a
-												href="./{o.id}"
-												class="text-indigo-600 hover:text-indigo-900"
-												>{$_("details")}</a
-											>
-											{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:DELETE")}
-												<button
-													on:click={() => {
-														active_deletes[o.id] = true;
-													}}
-													tabindex="0"
-													class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-													>{$_("delete")}</button
-												>
-											{/if}
-										</td>
-									{/if}
-								</tr>
-							{/if}
-						{/each}
-					</tbody>
-				</table>
-			</div>
-		{/if}
-	{:catch error}
-		<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
-			<span class="inline-block align-middle mr-8">
-				<b class="capitalize">{$_("general_promise_error")}</b>
-				{error}
-			</span>
-		</div>
-	{/await}
-{/if}
diff --git a/src/components/orgs/Orgs.svelte b/src/components/orgs/Orgs.svelte
index 374c7132..655c043d 100644
--- a/src/components/orgs/Orgs.svelte
+++ b/src/components/orgs/Orgs.svelte
@@ -1,53 +1,288 @@
 <script>
-  import { _ } from "svelte-i18n";
-  import store from "../../store";
-  import AddOrgModal from "./AddOrgModal.svelte";
-  export let modal_open = false;
-  import OrgOverview from "./OrgOverview.svelte";
-  import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
-  let current_organizations = [];
-  export let import_modal_open = false;
+	import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+	let delete_org = {};
+	import { RunnerOrganizationService } from "@odit/lfk-client-js";
+	import store from "../../store";
+	import OrgsEmptyState from "./OrgsEmptyState.svelte";
+	import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
+	import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
+	import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
+	import toast from "svelte-french-toast";
+	$: searchvalue = "";
+	$: active_deletes = [];
+	$: sponsoring_contracts_show = current_organizations.some(
+		(r) => r.is_selected === true
+	);
+	$: cards_show = current_organizations.some((r) => r.is_selected === true);
+	$: generate_orgs = current_organizations.filter(
+		(r) => r.is_selected === true
+	);
+	$: certificates_show = current_organizations.some(
+		(r) => r.is_selected === true
+	);
+	let current_organizations = [];
+
+	const promise =
+		RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
+			(val) => {
+				current_organizations = val;
+			}
+		);
+	import { _ } from "svelte-i18n";
+	import AddOrgModal from "./AddOrgModal.svelte";
+	let modal_open = false;
+	import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
+	let import_modal_open = false;
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
-    {$_("organizations")}
-  </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 />
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
+		{$_("organizations")}
+	</h4>
+	{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:CREATE")}
+		<button
+			on:click={() => {
+				modal_open = true;
+			}}
+			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:w-auto sm:text-sm mb-1 lg:mb-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 justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
+		>
+			{$_("import-runners")}
+		</button>
+	{/if}
+	<ConfirmOrgDeletion
+		on:cancelDelete={(event) => {
+			modal_open = false;
+			active_deletes[event.detail.id] = false;
+		}}
+		bind:modal_open
+		bind:delete_org
+	/>
+	{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:GET")}
+		{#await promise}
+			<div
+				class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
+				role="alert"
+			>
+				<p class="font-bold">{$_("organizations-are-being-loaded")}</p>
+				<p class="text-sm">{$_("this-might-take-a-moment")}</p>
+			</div>
+		{:then}
+			{#if current_organizations.length === 0}
+				<OrgsEmptyState />
+			{:else}
+				<input
+					type="search"
+					bind:value={searchvalue}
+					placeholder={$_("datatable.search")}
+					aria-label={$_("datatable.search")}
+					class="w-full sm:w-auto sm:mt-0 p-2 rounded-md border mb-1 lg:mb-0"
+				/>
+				<GenerateSponsoringContracts
+					bind:sponsoring_contracts_show
+					bind:generate_orgs
+				/>
+				<GenerateRunnerCards bind:cards_show bind:generate_orgs />
+				<GenerateRunnerCertificates bind:certificates_show bind:generate_orgs />
+				<div
+					class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
+				>
+					<table class="divide-y divide-gray-200 w-full">
+						<thead class="bg-gray-50">
+							<tr class="odd:bg-white even:bg-gray-100">
+								<th
+									scope="col"
+									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+								>
+									<button
+										on:click={() => {
+											const newstate = !current_organizations.some(
+												(r) => r.is_selected === true
+											);
+											current_organizations = current_organizations.map((r) => {
+												r.is_selected = newstate;
+												return r;
+											});
+										}}
+										class="underline cursor-pointer select-none"
+										>{#if current_organizations.some((r) => r.is_selected === true)}
+											{$_("deselect-all")}
+										{:else}{$_("select-all")}{/if}
+									</button>
+								</th>
+								<th
+									scope="col"
+									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+								>
+									{$_("name")}
+								</th>
+								<th
+									scope="col"
+									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+								>
+									{$_("address")}
+								</th>
+								<th
+									scope="col"
+									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+								>
+									{$_("contact")}
+								</th>
+								<th scope="col" class="relative px-6 py-3">
+									<span class="sr-only">{$_("action")}</span>
+								</th>
+							</tr>
+						</thead>
+						<tbody class="divide-y divide-gray-200">
+							{#each current_organizations as o}
+								{#if Object.values(o)
+									.toString()
+									.toLowerCase()
+									.includes(searchvalue)}
+									<tr
+										class="odd:bg-white even:bg-gray-100"
+										data-rowid="org_{o.id}"
+									>
+										<td class="px-6 py-4 whitespace-nowrap">
+											<input
+												bind:checked={o.is_selected}
+												type="checkbox"
+												class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+											/>
+										</td>
+										<td class="px-6 py-4 whitespace-nowrap">
+											<div class="flex items-center">
+												<div class="text-sm font-medium text-gray-900">
+													{o.name}
+												</div>
+											</div>
+										</td>
+										<td class="px-6 py-4 whitespace-nowrap">
+											<div class="flex items-center">
+												<div class="text-sm font-medium text-gray-900">
+													{#if o.address.address1 !== null}
+														{o.address.address1}<br />
+														<!-- {o.address.address2 || ''}<br /> -->
+														{o.address.postalcode}
+														{o.address.city}
+														{o.address.country}
+													{/if}
+												</div>
+											</div>
+										</td>
+										<td class="px-6 py-4 whitespace-nowrap">
+											<div class="flex items-center">
+												<div class="text-sm font-medium text-gray-900">
+													{#if o.contact}
+														<a
+															href="../contacts/{o.contact.id}"
+															class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
+															>{o.contact.firstname}
+															{o.contact.middlename || ""}
+															{o.contact.lastname}</a
+														>
+													{:else}{$_("no-contact-specified")}{/if}
+												</div>
+											</div>
+										</td>
+										{#if active_deletes[o.id] === true}
+											<td
+												class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+											>
+												<button
+													on:click={() => {
+														active_deletes[o.id] = false;
+													}}
+													tabindex="0"
+													class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
+													>{$_("cancel-delete")}</button
+												>
+												<button
+													on:click={() => {
+														toast.loading($_("deleting-organization"));
+														RunnerOrganizationService.runnerOrganizationControllerRemove(
+															o.id,
+															false
+														)
+															.then((resp) => {
+																current_organizations =
+																	current_organizations.filter(
+																		(obj) => obj.id !== o.id
+																	);
+																toast($_("organization-deleted"));
+															})
+															.catch((err) => {
+																modal_open = true;
+																delete_org = o;
+															});
+													}}
+													tabindex="0"
+													class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+													>{$_("confirm-delete")}</button
+												>
+											</td>
+										{:else}
+											<td
+												class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+											>
+												<a
+													href="./{o.id}"
+													class="text-indigo-600 hover:text-indigo-900"
+													>{$_("details")}</a
+												>
+												{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:DELETE")}
+													<button
+														on:click={() => {
+															active_deletes[o.id] = true;
+														}}
+														tabindex="0"
+														class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+														>{$_("delete")}</button
+													>
+												{/if}
+											</td>
+										{/if}
+									</tr>
+								{/if}
+							{/each}
+						</tbody>
+					</table>
+				</div>
+			{/if}
+		{:catch error}
+			<div
+				class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500"
+			>
+				<span class="inline-block align-middle mr-8">
+					<b class="capitalize">{$_("general_promise_error")}</b>
+					{error}
+				</span>
+			</div>
+		{/await}
+	{/if}
 </section>
 
 {#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:CREATE")}
-  <AddOrgModal bind:current_organizations bind:modal_open />
-  <ImportRunnerModal
-    on:cancelDelete={(event) => {
-      import_modal_open = false;
-    }}
-    passed_team={{}}
-    passed_org={{}}
-    passed_orgs={current_organizations}
-    opened_from="OrgOverview"
-    bind:import_modal_open
-  />
+	<AddOrgModal bind:current_organizations bind:modal_open />
+	<ImportRunnerModal
+		on:cancelDelete={(event) => {
+			import_modal_open = false;
+		}}
+		passed_team={{}}
+		passed_org={{}}
+		passed_orgs={current_organizations}
+		opened_from="OrgOverview"
+		bind:import_modal_open
+	/>
 {/if}
diff --git a/src/components/pdf_generation/GenerateRunnerCards.svelte b/src/components/pdf_generation/GenerateRunnerCards.svelte
index 8deb31a5..35ca4d0a 100644
--- a/src/components/pdf_generation/GenerateRunnerCards.svelte
+++ b/src/components/pdf_generation/GenerateRunnerCards.svelte
@@ -178,25 +178,20 @@
 </script>
 
 {#if cards_show}
-	<div>
-		<p class="text-base">{$_("generate-runnercards")}</p>
-		<div class="inline-flex rounded-lg shadow-2xs">
-			<button
-				on:click={() => {
-					generateRunnerCards("de");
-				}}
-				class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
-			>
-				DE
-			</button>
-			<button
-				on:click={() => {
-					generateRunnerCards("en");
-				}}
-				class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
-			>
-				EN
-			</button>
-		</div>
-	</div>
+	<button
+		on:click={() => {
+			generateRunnerCards("de");
+		}}
+		class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
+	>
+		{$_("generate-runnercards")}: DE
+	</button>
+	<button
+		on:click={() => {
+			generateRunnerCards("en");
+		}}
+		class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
+	>
+		{$_("generate-runnercards")}: EN
+	</button>
 {/if}
diff --git a/src/components/pdf_generation/GenerateRunnerCertificates.svelte b/src/components/pdf_generation/GenerateRunnerCertificates.svelte
index 78b1f6d0..551fcd96 100644
--- a/src/components/pdf_generation/GenerateRunnerCertificates.svelte
+++ b/src/components/pdf_generation/GenerateRunnerCertificates.svelte
@@ -156,25 +156,20 @@
 </script>
 
 {#if certificates_show}
-	<div>
-		<p class="text-base">{$_("generate-runner-certificates")}</p>
-		<div class="inline-flex rounded-lg shadow-2xs">
-			<button
-				on:click={() => {
-					generateCertificates("de");
-				}}
-				class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
-			>
-				DE
-			</button>
-			<button
-				on:click={() => {
-					generateCertificates("en");
-				}}
-				class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
-			>
-				EN
-			</button>
-		</div>
-	</div>
+	<button
+		on:click={() => {
+			generateCertificates("de");
+		}}
+		class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
+	>
+		{$_("generate-runner-certificates")}: DE
+	</button>
+	<button
+		on:click={() => {
+			generateCertificates("en");
+		}}
+		class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
+	>
+		{$_("generate-runner-certificates")}: EN
+	</button>
 {/if}
diff --git a/src/components/pdf_generation/GenerateSponsoringContracts.svelte b/src/components/pdf_generation/GenerateSponsoringContracts.svelte
index fa204a52..31569542 100644
--- a/src/components/pdf_generation/GenerateSponsoringContracts.svelte
+++ b/src/components/pdf_generation/GenerateSponsoringContracts.svelte
@@ -119,25 +119,20 @@
 </script>
 
 {#if sponsoring_contracts_show}
-	<div>
-		<p class="text-base">{$_("generate-sponsoring-contracts")}</p>
-		<div class="inline-flex rounded-lg shadow-2xs">
-			<button
-				on:click={() => {
-					generateSponsoringContract("de");
-				}}
-				class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
-			>
-				DE
-			</button>
-			<button
-				on:click={() => {
-					generateSponsoringContract("en");
-				}}
-				class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
-			>
-				EN
-			</button>
-		</div>
-	</div>
+	<button
+		on:click={() => {
+			generateSponsoringContract("de");
+		}}
+		class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
+	>
+		{$_("generate-sponsoring-contracts")}: DE
+	</button>
+	<button
+		on:click={() => {
+			generateSponsoringContract("en");
+		}}
+		class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
+	>
+		{$_("generate-sponsoring-contracts")}: EN
+	</button>
 {/if}
diff --git a/src/components/runners/RunnerDetail.svelte b/src/components/runners/RunnerDetail.svelte
index 5c73ac16..ef59795c 100644
--- a/src/components/runners/RunnerDetail.svelte
+++ b/src/components/runners/RunnerDetail.svelte
@@ -125,20 +125,8 @@
 			{original_data.firstname}
 			{original_data.middlename || ""}
 			{original_data.lastname} [#{params.runnerid}]
-			<span
-				class="grid md:grid-cols-3 gap-1 md:gap-2"
-				data-id="runner_actions_${editable.id}"
-			>
+			<span data-id="runner_actions_${editable.id}">
 				{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE")}
-					<GenerateSponsoringContracts
-						bind:sponsoring_contracts_show
-						bind:generate_runners
-					/>
-					<GenerateRunnerCards bind:cards_show bind:generate_runners />
-					<GenerateRunnerCertificates
-						bind:certificates_show
-						bind:generate_runners
-					/>
 					<div>
 						{#if delete_triggered}
 							<button
@@ -167,10 +155,19 @@
 								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: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 mb-1 lg:mb-0"
 								>{$_("save-changes")}</button
 							>
 						{/if}
+						<GenerateSponsoringContracts
+							bind:sponsoring_contracts_show
+							bind:generate_runners
+						/>
+						<GenerateRunnerCards bind:cards_show bind:generate_runners />
+						<GenerateRunnerCertificates
+							bind:certificates_show
+							bind:generate_runners
+						/>
 					</div>
 				{/if}
 			</span>
@@ -259,7 +256,9 @@
 			{/if}
 		</div>
 		<div class="text-sm w-full mt-2">
-			<label for="phone" class="font-semibold text-gray-700">{$_("phone")}</label>
+			<label for="phone" class="font-semibold text-gray-700"
+				>{$_("phone")}</label
+			>
 			<input
 				autocomplete="off"
 				placeholder={$_("phone")}
diff --git a/src/components/runners/Runners.svelte b/src/components/runners/Runners.svelte
index cb58582f..c4ae7337 100644
--- a/src/components/runners/Runners.svelte
+++ b/src/components/runners/Runners.svelte
@@ -1,60 +1,317 @@
 <script>
-  import { _ } from "svelte-i18n";
-  import store from "../../store";
-  import AddRunnerModal from "./AddRunnerModal.svelte";
-  import ImportRunnerModal from "./ImportRunnerModal.svelte";
-  import RunnersOverview from "./RunnersOverview.svelte";
-  $: current_runners = [];
-  export let modal_open = false;
-  export let import_modal_open = false;
-  let addRunners;
+	import {
+		RunnerOrganizationService,
+		RunnerService,
+		RunnerTeamService,
+	} from "@odit/lfk-client-js";
+	import {
+		createSvelteTable,
+		flexRender,
+		getCoreRowModel,
+		getFilteredRowModel,
+		getPaginationRowModel,
+		getSortedRowModel,
+		renderComponent,
+	} from "@tanstack/svelte-table";
+	import { onMount } from "svelte";
+	import { writable } from "svelte/store";
+	import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
+	import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
+	import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+	import InputElement from "../shared/InputElement.svelte";
+	import TableActions from "../shared/TableActions.svelte";
+	import { groupFilter } from "../shared/tablefilters";
+	import DeleteRunnerModal from "./DeleteRunnerModal.svelte";
+	import TableBottom from "../shared/TableBottom.svelte";
+	import TableHeader from "../shared/TableHeader.svelte";
+
+	$: selectedRunners =
+		$table?.getSelectedRowModel().rows.map((row) => row.original) || [];
+	$: selected =
+		$table?.getSelectedRowModel().rows.map((row) => row.index) || [];
+
+	$: active_delete = undefined;
+	let dataLoaded = false;
+	export let current_runners = [];
+	$: sponsoring_contracts_show = selected.length > 0;
+	$: cards_show = selected.length > 0;
+	$: certificates_show = selected.length > 0;
+	$: teams = [];
+	$: orgs = [];
+
+	export const addRunners = (runners) => {
+		current_runners = current_runners.concat(...runners);
+		options.update((options) => ({
+			...options,
+			data: current_runners,
+		}));
+	};
+
+	//Section table
+	const columns = [
+		{
+			accessorKey: "id",
+			header: () => "id",
+			filterFn: `equalsString`,
+		},
+		{
+			accessorKey: "firstname",
+			header: () => $_("first-name"),
+			filterFn: `includesString`,
+		},
+		{
+			accessorKey: "middlename",
+			header: () => $_("middle-name"),
+			cell: (info) => {
+				if (!info || !info.getValue()) {
+					return "";
+				}
+				return info.getValue();
+			},
+			filterFn: `includesString`,
+		},
+		{
+			accessorKey: "lastname",
+			header: () => $_("last-name"),
+			filterFn: `includesString`,
+		},
+		{
+			accessorKey: "group",
+			header: () => $_("group"),
+			cell: (info) => {
+				const group = info.getValue();
+				if (group.responseType === "RUNNERORGANIZATION") {
+					return group.name;
+				}
+				return `${group.parentGroup.name} > ${group.name}`;
+			},
+			filterFn: `group`,
+		},
+		{
+			accessorKey: "distance",
+			header: () => $_("distance"),
+			cell: (info) => {
+				if (info.getValue() < 1000) {
+					return `${info.getValue()} m`;
+				}
+				return `${(info.getValue() / 1000).toFixed(1)} km`;
+			},
+			enableColumnFilter: false,
+		},
+		{
+			accessorKey: "actions",
+			header: () => $_("action"),
+			cell: (info) => {
+				return renderComponent(TableActions, {
+					detailsLink: `./${info.row.original.id}`,
+					deleteAction: () => {
+						active_delete =
+							current_runners[
+								current_runners.findIndex((r) => r.id == info.row.original.id)
+							];
+					},
+					deleteEnabled:
+						store.state.jwtinfo.userdetails.permissions.includes(
+							"RUNNER:DELETE"
+						),
+				});
+			},
+			enableColumnFilter: false,
+			enableSorting: false,
+		},
+	];
+	const options = writable({
+		data: [],
+		columns: columns,
+		filterFns: {
+			group: groupFilter,
+		},
+		initialState: {
+			pagination: {
+				pageSize: 50,
+			},
+		},
+		enableRowSelection: true,
+		getCoreRowModel: getCoreRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+	});
+	const table = createSvelteTable(options);
+
+	async function deleteRunner(delete_runner_id) {
+		await RunnerService.runnerControllerRemove(delete_runner_id, true);
+		current_runners = current_runners.filter((r) => r.id !== delete_runner_id);
+		options.update((options) => ({
+			...options,
+			data: current_runners,
+		}));
+		toast($_("runner-deleted"));
+	}
+
+	onMount(async () => {
+		RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
+			teams = val;
+		});
+		RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
+			(val) => {
+				orgs = val;
+			}
+		);
+
+		let page = 0;
+		while (page >= 0) {
+			const runners = await RunnerService.runnerControllerGetAll(page, 500);
+			if (runners.length == 0) {
+				page = -2;
+			}
+
+			current_runners = current_runners.concat(...runners);
+			options.update((options) => ({
+				...options,
+				data: current_runners,
+			}));
+
+			dataLoaded = true;
+			page++;
+		}
+	});
+	import { _ } from "svelte-i18n";
+	import store from "../../store";
+	import AddRunnerModal from "./AddRunnerModal.svelte";
+	import ImportRunnerModal from "./ImportRunnerModal.svelte";
+	$: current_runners = [];
+	export let modal_open = false;
+	export let import_modal_open = false;
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
-    {$_("runners")}
-  </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 />
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
+		{$_("runners")}
+	</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 mb-1 lg:mb-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 mb-1 lg:mb-0"
+		>
+			{$_("import-runners")}
+		</button>
+	{/if}
+	<DeleteRunnerModal
+		delete_runner={active_delete}
+		modal_open={active_delete != undefined}
+		on:delete={(event) => {
+			deleteRunner(event.detail.id);
+		}}
+	/>
+	{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
+		{#if !dataLoaded}
+			<div
+				class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
+				role="alert"
+			>
+				<p class="font-bold">{$_("runners-are-being-loaded")}</p>
+				<p class="text-sm">{$_("this-might-take-a-moment")}</p>
+			</div>
+		{:else}
+			<GenerateSponsoringContracts
+				bind:sponsoring_contracts_show
+				bind:generate_runners={selectedRunners}
+			/>
+			<GenerateRunnerCards
+				bind:cards_show
+				bind:generate_runners={selectedRunners}
+			/>
+			<GenerateRunnerCertificates
+				bind:certificates_show
+				bind:generate_runners={selectedRunners}
+			/>
+			<div class="overflow-x-auto">
+				<table class="w-full">
+					<thead class="border-b border-gray-400">
+						{#each $table.getHeaderGroups() as headerGroup}
+							<tr class="select-none">
+								<th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
+									<InputElement
+										type="checkbox"
+										checked={$table.getIsAllRowsSelected()}
+										indeterminate={$table.getIsSomeRowsSelected()}
+										on:change={() => $table.toggleAllRowsSelected()}
+									/>
+								</th>
+								{#each headerGroup.headers as header}
+									<TableHeader {header} />
+								{/each}
+							</tr>
+						{/each}
+					</thead>
+					<tbody>
+						{#each $table.getRowModel().rows as row}
+							<tr class="odd:bg-white even:bg-gray-100">
+								<td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
+									<InputElement
+										type="checkbox"
+										checked={row.getIsSelected()}
+										on:change={() => row.toggleSelected()}
+									/>
+								</td>
+								{#each row.getVisibleCells() as cell}
+									<td>
+										<svelte:component
+											this={flexRender(
+												cell.column.columnDef.cell,
+												cell.getContext()
+											)}
+										/>
+									</td>
+								{/each}
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+			<div class="h-2" />
+		{/if}
+	{/if}
+	<TableBottom {table} {selected} />
 </section>
 
 {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:CREATE")}
-  <AddRunnerModal
-    bind:modal_open
-    on:created={(event) => {
-      addRunners(event.detail.runners);
-    }}
-  />
-  <ImportRunnerModal
-    on:cancelDelete={(event) => {
-      import_modal_open = false;
-    }}
-    passed_team={{}}
-    passed_orgs={[]}
-    passed_org={{}}
-    opened_from="RunnerOverview"
-    bind:import_modal_open
-    on:created={(event) => {
-      addRunners(event.detail.runners);
-    }}
-  />
+	<AddRunnerModal
+		bind:modal_open
+		on:created={(event) => {
+			addRunners(event.detail.runners);
+		}}
+	/>
+	<ImportRunnerModal
+		on:cancelDelete={(event) => {
+			import_modal_open = false;
+		}}
+		passed_team={{}}
+		passed_orgs={[]}
+		passed_org={{}}
+		opened_from="RunnerOverview"
+		bind:import_modal_open
+		on:created={(event) => {
+			addRunners(event.detail.runners);
+		}}
+	/>
 {/if}
+
+<style>
+	table tbody tr td:nth-child(2) {
+		font-family: monospace;
+	}
+</style>
diff --git a/src/components/runners/RunnersOverview.svelte b/src/components/runners/RunnersOverview.svelte
deleted file mode 100644
index 731cb2f5..00000000
--- a/src/components/runners/RunnersOverview.svelte
+++ /dev/null
@@ -1,267 +0,0 @@
-<script>
-  import {
-    RunnerOrganizationService,
-    RunnerService,
-    RunnerTeamService,
-  } from "@odit/lfk-client-js";
-  import {
-    createSvelteTable,
-    flexRender,
-    getCoreRowModel,
-    getFilteredRowModel,
-    getPaginationRowModel,
-    getSortedRowModel,
-    renderComponent,
-  } from "@tanstack/svelte-table";
-  import { onMount } from "svelte";
-  import { _ } from "svelte-i18n";
-  import { writable } from "svelte/store";
-  import store from "../../store";
-  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
-  import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
-  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
-  import InputElement from "../shared/InputElement.svelte";
-  import TableActions from "../shared/TableActions.svelte";
-  import { groupFilter } from "../shared/tablefilters";
-  import DeleteRunnerModal from "./DeleteRunnerModal.svelte";
-  import TableBottom from "../shared/TableBottom.svelte";
-  import TableHeader from "../shared/TableHeader.svelte";
-
-  $: selectedRunners =
-    $table?.getSelectedRowModel().rows.map((row) => row.original) || [];
-  $: selected =
-    $table?.getSelectedRowModel().rows.map((row) => row.index) || [];
-
-  $: active_delete = undefined;
-  let dataLoaded = false;
-  export let current_runners = [];
-  $: sponsoring_contracts_show = selected.length > 0;
-  $: cards_show = selected.length > 0;
-  $: certificates_show = selected.length > 0;
-  $: teams = [];
-  $: orgs = [];
-
-  export const addRunners = (runners) => {
-    current_runners = current_runners.concat(...runners);
-    options.update((options) => ({
-      ...options,
-      data: current_runners,
-    }));
-  };
-
-  //Section table
-  const columns = [
-    {
-      accessorKey: "id",
-      header: () => "id",
-      filterFn: `equalsString`,
-    },
-    {
-      accessorKey: "firstname",
-      header: () => $_("first-name"),
-      filterFn: `includesString`,
-    },
-    {
-      accessorKey: "middlename",
-      header: () => $_("middle-name"),
-      cell: (info) => {
-        if (!info || !info.getValue()) {
-          return "";
-        }
-        return info.getValue();
-      },
-      filterFn: `includesString`,
-    },
-    {
-      accessorKey: "lastname",
-      header: () => $_("last-name"),
-      filterFn: `includesString`,
-    },
-    {
-      accessorKey: "group",
-      header: () => $_("group"),
-      cell: (info) => {
-        const group = info.getValue();
-        if (group.responseType === "RUNNERORGANIZATION") {
-          return group.name;
-        }
-        return `${group.parentGroup.name} > ${group.name}`;
-      },
-      filterFn: `group`,
-    },
-    {
-      accessorKey: "distance",
-      header: () => $_("distance"),
-      cell: (info) => {
-        if (info.getValue() < 1000) {
-          return `${info.getValue()} m`;
-        }
-        return `${(info.getValue() / 1000).toFixed(1)} km`;
-      },
-      enableColumnFilter: false,
-    },
-    {
-      accessorKey: "actions",
-      header: () => $_("action"),
-      cell: (info) => {
-        return renderComponent(TableActions, {
-          detailsLink: `./${info.row.original.id}`,
-          deleteAction: () => {
-            active_delete =
-              current_runners[
-                current_runners.findIndex((r) => r.id == info.row.original.id)
-              ];
-          },
-          deleteEnabled:
-            store.state.jwtinfo.userdetails.permissions.includes(
-              "RUNNER:DELETE"
-            ),
-        });
-      },
-      enableColumnFilter: false,
-      enableSorting: false,
-    },
-  ];
-  const options = writable({
-    data: [],
-    columns: columns,
-    filterFns: {
-      group: groupFilter,
-    },
-    initialState: {
-      pagination: {
-        pageSize: 50,
-      },
-    },
-    enableRowSelection: true,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-  });
-  const table = createSvelteTable(options);
-
-  async function deleteRunner(delete_runner_id) {
-    await RunnerService.runnerControllerRemove(delete_runner_id, true);
-    current_runners = current_runners.filter((r) => r.id !== delete_runner_id);
-    options.update((options) => ({
-      ...options,
-      data: current_runners,
-    }));
-    toast($_("runner-deleted"));
-  }
-
-  onMount(async () => {
-    RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
-      teams = val;
-    });
-    RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
-      (val) => {
-        orgs = val;
-      }
-    );
-
-    let page = 0;
-    while (page >= 0) {
-      const runners = await RunnerService.runnerControllerGetAll(page, 500);
-      if (runners.length == 0) {
-        page = -2;
-      }
-
-      current_runners = current_runners.concat(...runners);
-      options.update((options) => ({
-        ...options,
-        data: current_runners,
-      }));
-
-      dataLoaded = true;
-      page++;
-    }
-  });
-</script>
-
-<DeleteRunnerModal
-  delete_runner={active_delete}
-  modal_open={active_delete != undefined}
-  on:delete={(event) => {
-    deleteRunner(event.detail.id);
-  }}
-/>
-{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
-  {#if !dataLoaded}
-    <div
-      class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
-      role="alert"
-    >
-      <p class="font-bold">{$_("runners-are-being-loaded")}</p>
-      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
-    </div>
-  {:else}
-    <div class="h-12 mt-2">
-      <GenerateSponsoringContracts
-        bind:sponsoring_contracts_show
-        bind:generate_runners={selectedRunners}
-      />
-      <GenerateRunnerCards
-        bind:cards_show
-        bind:generate_runners={selectedRunners}
-      />
-      <GenerateRunnerCertificates
-        bind:certificates_show
-        bind:generate_runners={selectedRunners}
-      />
-    </div>
-    <div class="overflow-x-auto">
-      <table class="w-full">
-        <thead class="border-b border-gray-400">
-          {#each $table.getHeaderGroups() as headerGroup}
-            <tr class="select-none">
-              <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
-                <InputElement
-                  type="checkbox"
-                  checked={$table.getIsAllRowsSelected()}
-                  indeterminate={$table.getIsSomeRowsSelected()}
-                  on:change={() => $table.toggleAllRowsSelected()}
-                />
-              </th>
-              {#each headerGroup.headers as header}
-                <TableHeader {header} />
-              {/each}
-            </tr>
-          {/each}
-        </thead>
-        <tbody>
-          {#each $table.getRowModel().rows as row}
-            <tr class="odd:bg-white even:bg-gray-100">
-              <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
-                <InputElement
-                  type="checkbox"
-                  checked={row.getIsSelected()}
-                  on:change={() => row.toggleSelected()}
-                />
-              </td>
-              {#each row.getVisibleCells() as cell}
-                <td>
-                  <svelte:component
-                    this={flexRender(
-                      cell.column.columnDef.cell,
-                      cell.getContext()
-                    )}
-                  />
-                </td>
-              {/each}
-            </tr>
-          {/each}
-        </tbody>
-      </table>
-    </div>
-    <div class="h-2" />
-  {/if}
-{/if}
-<TableBottom {table} {selected} />
-
-<style>
-  table tbody tr td:nth-child(2) {
-    font-family: monospace;
-  }
-</style>
diff --git a/src/components/scans/ScanDetail.svelte b/src/components/scans/ScanDetail.svelte
index 2e26adfc..dd9b97ac 100644
--- a/src/components/scans/ScanDetail.svelte
+++ b/src/components/scans/ScanDetail.svelte
@@ -169,7 +169,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: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 mb-1 lg:mb-0"
 						>{$_("save-changes")}</button
 					>
 				{/if}
diff --git a/src/components/scanstations/ScanStationDetail.svelte b/src/components/scanstations/ScanStationDetail.svelte
index 476a5181..5ec00b7a 100644
--- a/src/components/scanstations/ScanStationDetail.svelte
+++ b/src/components/scanstations/ScanStationDetail.svelte
@@ -125,7 +125,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: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 mb-1 lg:mb-0"
 						>{$_("save-changes")}</button
 					>
 				{/if}
diff --git a/src/components/settings/Settings.svelte b/src/components/settings/Settings.svelte
index bb5d0a6e..507e12c5 100644
--- a/src/components/settings/Settings.svelte
+++ b/src/components/settings/Settings.svelte
@@ -161,7 +161,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: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 mb-1 lg:mb-0"
                 >
                   {$_("save-changes")}
                 </button>
@@ -225,7 +225,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: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 mb-1 lg:mb-0"
                 >
                   {$_("update-password")}
                 </button>
diff --git a/src/components/teams/TeamDetail.svelte b/src/components/teams/TeamDetail.svelte
index 3b9a9b87..90201041 100644
--- a/src/components/teams/TeamDetail.svelte
+++ b/src/components/teams/TeamDetail.svelte
@@ -139,7 +139,7 @@
 				{group.label}{" > "}
 			{/if}
 			{original.name} [#{params.teamid}]
-			<span data-id="org_actions_${teamdata.id}">
+			<div data-id="org_actions_${teamdata.id}">
 				<GenerateSponsoringContracts
 					bind:sponsoring_contracts_show
 					bind:generate_teams
@@ -192,11 +192,11 @@
 						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: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 mb-1 lg:mb-0"
 						>{$_("save-changes")}</button
 					>
 				{/if}
-			</span>
+			</div>
 		</div>
 		<div class="text-sm w-full mt-2">
 			<label for="name" class="font-semibold text-gray-700">Name</label>
diff --git a/src/components/teams/Teams.svelte b/src/components/teams/Teams.svelte
index 2edeecf1..81d0a508 100644
--- a/src/components/teams/Teams.svelte
+++ b/src/components/teams/Teams.svelte
@@ -1,30 +1,262 @@
 <script>
-  import { _ } from "svelte-i18n";
-  import store from "../../store";
-  import AddTeamModal from "./AddTeamModal.svelte";
-  export let modal_open = false;
-  import TeamsOverview from "./TeamsOverview.svelte";
-  let current_teams = [];
+	import AddTeamModal from "./AddTeamModal.svelte";
+	let current_teams = [];
+	import { _ } from "svelte-i18n";
+	import { RunnerTeamService } from "@odit/lfk-client-js";
+	const teams_promise = RunnerTeamService.runnerTeamControllerGetAll();
+	import store, { users as usersstore } from "../../store.js";
+	import TeamsEmptyState from "./TeamsEmptyState.svelte";
+	import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
+	import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+	import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
+	import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
+	import toast from "svelte-french-toast";
+	$: searchvalue = "";
+	$: active_deletes = [];
+	$: sponsoring_contracts_show = current_teams.some(
+		(r) => r.is_selected === true
+	);
+	$: cards_show = current_teams.some((r) => r.is_selected === true);
+	$: certificates_show = current_teams.some((r) => r.is_selected === true);
+	$: generate_teams = current_teams.filter((r) => r.is_selected === true);
+	let modal_open = false;
+	let delete_team = {};
+	usersstore.subscribe((val) => {
+		current_teams = val;
+	});
+	teams_promise.then((data) => {
+		usersstore.set(data);
+	});
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
-    {$_("teams")}
-  </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 />
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
+		{$_("teams")}
+	</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}
+	<ConfirmTeamDeletion
+		on:cancelDelete={(event) => {
+			modal_open = false;
+			active_deletes[event.detail.id] = false;
+		}}
+		bind:modal_open
+		bind:delete_team
+	/>
+	{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:GET")}
+		{#await teams_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">{$_("teams-are-being-loaded")}</p>
+				<p class="text-sm">{$_("this-might-take-a-moment")}</p>
+			</div>
+		{:then}
+			{#if current_teams.length === 0}
+				<TeamsEmptyState />
+			{: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"
+				/>
+				<GenerateSponsoringContracts
+					bind:sponsoring_contracts_show
+					bind:generate_teams
+				/>
+				<GenerateRunnerCards bind:cards_show bind:generate_teams />
+				<GenerateRunnerCertificates
+					bind:certificates_show
+					bind:generate_teams
+				/>
+				<div
+					class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
+				>
+					<table class="divide-y divide-gray-200 w-full">
+						<thead class="bg-gray-50">
+							<tr class="odd:bg-white even:bg-gray-100">
+								<th
+									scope="col"
+									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+								>
+									<button
+										on:click={() => {
+											const newstate = !current_teams.some(
+												(r) => r.is_selected === true
+											);
+											current_teams = current_teams.map((r) => {
+												r.is_selected = newstate;
+												return r;
+											});
+										}}
+										class="underline cursor-pointer select-none"
+										>{#if current_teams.some((r) => r.is_selected === true)}
+											{$_("deselect-all")}
+										{:else}{$_("select-all")}{/if}
+									</button>
+								</th>
+								<th
+									scope="col"
+									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+								>
+									{$_("name")}
+								</th>
+								<th
+									scope="col"
+									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+								>
+									{$_("organization")}
+								</th>
+								<th
+									scope="col"
+									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+								>
+									{$_("contact")}
+								</th>
+								<th scope="col" class="relative px-6 py-3">
+									<span class="sr-only">{$_("action")}</span>
+								</th>
+							</tr>
+						</thead>
+						<tbody class="divide-y divide-gray-200">
+							{#each current_teams as t}
+								{#if Object.values(t)
+									.toString()
+									.toLowerCase()
+									.includes(searchvalue)}
+									<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}
+												type="checkbox"
+												class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+											/>
+										</td>
+										<td class="px-6 py-4 whitespace-nowrap">
+											<div class="flex items-center">
+												<div class="text-sm font-medium text-gray-900">
+													{t.name}
+												</div>
+											</div>
+										</td>
+										<td class="px-6 py-4 whitespace-nowrap">
+											<div class="flex items-center">
+												<div class="text-sm font-medium text-gray-900">
+													{#if t.parentGroup}
+														<a
+															href="../orgs/{t.parentGroup.id}"
+															class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
+															>{t.parentGroup.name}</a
+														>
+													{:else}{$_("no-organization-specified")}{/if}
+												</div>
+											</div>
+										</td>
+										<td class="px-6 py-4 whitespace-nowrap">
+											<div class="flex items-center">
+												<div class="text-sm font-medium text-gray-900">
+													{#if t.contact}
+														<a
+															href="../contacts/{t.contact.id}"
+															class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
+															>{t.contact.firstname}
+															{t.contact.middlename || ""}
+															{t.contact.lastname}</a
+														>
+													{:else}{$_("no-contact-specified")}{/if}
+												</div>
+											</div>
+										</td>
+										{#if active_deletes[t.id] === true}
+											<td
+												class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+											>
+												<button
+													on:click={() => {
+														active_deletes[t.id] = false;
+													}}
+													tabindex="0"
+													class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
+													>{$_("cancel-delete")}</button
+												>
+												<button
+													on:click={() => {
+														RunnerTeamService.runnerTeamControllerRemove(
+															t.id,
+															false
+														)
+															.then((resp) => {
+																current_teams = current_teams.filter(
+																	(obj) => obj.id !== t.id
+																);
+																toast($_("team-deleted"));
+															})
+															.catch((err) => {
+																modal_open = true;
+																delete_team = t;
+															});
+													}}
+													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="./{t.id}"
+													class="text-indigo-600 hover:text-indigo-900"
+													>{$_("details")}</a
+												>
+												{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:DELETE")}
+													<button
+														on:click={() => {
+															active_deletes[t.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("TEAM:CREATE")}
-  <AddTeamModal bind:current_teams bind:modal_open />
+	<AddTeamModal bind:current_teams bind:modal_open />
 {/if}
diff --git a/src/components/teams/TeamsOverview.svelte b/src/components/teams/TeamsOverview.svelte
deleted file mode 100644
index 8b7368b7..00000000
--- a/src/components/teams/TeamsOverview.svelte
+++ /dev/null
@@ -1,241 +0,0 @@
-<script>
-	import { _ } from "svelte-i18n";
-	import { RunnerTeamService } from "@odit/lfk-client-js";
-	const teams_promise = RunnerTeamService.runnerTeamControllerGetAll();
-	import store, { users as usersstore } from "../../store.js";
-	import TeamsEmptyState from "./TeamsEmptyState.svelte";
-	import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
-	import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
-	import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
-	import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
-	import toast from "svelte-french-toast";
-	$: searchvalue = "";
-	$: active_deletes = [];
-	$: sponsoring_contracts_show = current_teams.some(
-		(r) => r.is_selected === true
-	);
-	$: cards_show = current_teams.some((r) => r.is_selected === true);
-	$: certificates_show = current_teams.some((r) => r.is_selected === true);
-	$: generate_teams = current_teams.filter((r) => r.is_selected === true);
-	export let current_teams = [];
-	let modal_open = false;
-	let delete_team = {};
-	usersstore.subscribe((val) => {
-		current_teams = val;
-	});
-	teams_promise.then((data) => {
-		usersstore.set(data);
-	});
-</script>
-
-<ConfirmTeamDeletion
-	on:cancelDelete={(event) => {
-		modal_open = false;
-		active_deletes[event.detail.id] = false;
-	}}
-	bind:modal_open
-	bind:delete_team
-/>
-{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:GET")}
-	{#await teams_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">{$_("teams-are-being-loaded")}</p>
-			<p class="text-sm">{$_("this-might-take-a-moment")}</p>
-		</div>
-	{:then}
-		{#if current_teams.length === 0}
-			<TeamsEmptyState />
-		{: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="h-12">
-				<GenerateSponsoringContracts
-					bind:sponsoring_contracts_show
-					bind:generate_teams
-				/>
-				<GenerateRunnerCards bind:cards_show bind:generate_teams />
-				<GenerateRunnerCertificates
-					bind:certificates_show
-					bind:generate_teams
-				/>
-			</div>
-			<div
-				class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
-			>
-				<table class="divide-y divide-gray-200 w-full">
-					<thead class="bg-gray-50">
-						<tr class="odd:bg-white even:bg-gray-100">
-							<th
-								scope="col"
-								class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-							>
-								<button
-									on:click={() => {
-										const newstate = !current_teams.some(
-											(r) => r.is_selected === true
-										);
-										current_teams = current_teams.map((r) => {
-											r.is_selected = newstate;
-											return r;
-										});
-									}}
-									class="underline cursor-pointer select-none"
-									>{#if current_teams.some((r) => r.is_selected === true)}
-										{$_("deselect-all")}
-									{:else}{$_("select-all")}{/if}
-								</button>
-							</th>
-							<th
-								scope="col"
-								class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-							>
-								{$_("name")}
-							</th>
-							<th
-								scope="col"
-								class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-							>
-								{$_("organization")}
-							</th>
-							<th
-								scope="col"
-								class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-							>
-								{$_("contact")}
-							</th>
-							<th scope="col" class="relative px-6 py-3">
-								<span class="sr-only">{$_("action")}</span>
-							</th>
-						</tr>
-					</thead>
-					<tbody class="divide-y divide-gray-200">
-						{#each current_teams as t}
-							{#if Object.values(t)
-								.toString()
-								.toLowerCase()
-								.includes(searchvalue)}
-								<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}
-											type="checkbox"
-											class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-										/>
-									</td>
-									<td class="px-6 py-4 whitespace-nowrap">
-										<div class="flex items-center">
-											<div class="text-sm font-medium text-gray-900">
-												{t.name}
-											</div>
-										</div>
-									</td>
-									<td class="px-6 py-4 whitespace-nowrap">
-										<div class="flex items-center">
-											<div class="text-sm font-medium text-gray-900">
-												{#if t.parentGroup}
-													<a
-														href="../orgs/{t.parentGroup.id}"
-														class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
-														>{t.parentGroup.name}</a
-													>
-												{:else}{$_("no-organization-specified")}{/if}
-											</div>
-										</div>
-									</td>
-									<td class="px-6 py-4 whitespace-nowrap">
-										<div class="flex items-center">
-											<div class="text-sm font-medium text-gray-900">
-												{#if t.contact}
-													<a
-														href="../contacts/{t.contact.id}"
-														class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
-														>{t.contact.firstname}
-														{t.contact.middlename || ""}
-														{t.contact.lastname}</a
-													>
-												{:else}{$_("no-contact-specified")}{/if}
-											</div>
-										</div>
-									</td>
-									{#if active_deletes[t.id] === true}
-										<td
-											class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
-										>
-											<button
-												on:click={() => {
-													active_deletes[t.id] = false;
-												}}
-												tabindex="0"
-												class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
-												>{$_("cancel-delete")}</button
-											>
-											<button
-												on:click={() => {
-													RunnerTeamService.runnerTeamControllerRemove(
-														t.id,
-														false
-													)
-														.then((resp) => {
-															current_teams = current_teams.filter(
-																(obj) => obj.id !== t.id
-															);
-															toast($_("team-deleted"));
-														})
-														.catch((err) => {
-															modal_open = true;
-															delete_team = t;
-														});
-												}}
-												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="./{t.id}"
-												class="text-indigo-600 hover:text-indigo-900"
-												>{$_("details")}</a
-											>
-											{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:DELETE")}
-												<button
-													on:click={() => {
-														active_deletes[t.id] = true;
-													}}
-													tabindex="0"
-													class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-													>{$_("delete")}</button
-												>
-											{/if}
-										</td>
-									{/if}
-								</tr>
-							{/if}
-						{/each}
-					</tbody>
-				</table>
-			</div>
-		{/if}
-	{:catch error}
-		<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
-			<span class="inline-block align-middle mr-8">
-				<b class="capitalize">{$_("general_promise_error")}</b>
-				{error}
-			</span>
-		</div>
-	{/await}
-{/if}
diff --git a/src/components/users/UserDetail.svelte b/src/components/users/UserDetail.svelte
index e7e45ce3..0734206c 100644
--- a/src/components/users/UserDetail.svelte
+++ b/src/components/users/UserDetail.svelte
@@ -172,7 +172,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: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 mb-1 lg:mb-0"
 						>{$_("save-changes")}</button
 					>
 				{/if}
diff --git a/src/components/users/UserPermissions.svelte b/src/components/users/UserPermissions.svelte
index f029445b..b16d4144 100644
--- a/src/components/users/UserPermissions.svelte
+++ b/src/components/users/UserPermissions.svelte
@@ -150,7 +150,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: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 mb-1 lg:mb-0"
             >{$_("save-changes")}</button
           >
         {:else}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 3902210c..4849256e 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,4 +1,5 @@
 module.exports = {
+  darkMode: 'selector',
   mode: "jit",
   content: ["./src/**/*.svelte"],
   theme: {