diff --git a/src/components/runners/RunnerDetail.svelte b/src/components/runners/RunnerDetail.svelte
index 780727dc..c842a2e6 100644
--- a/src/components/runners/RunnerDetail.svelte
+++ b/src/components/runners/RunnerDetail.svelte
@@ -10,6 +10,7 @@
   import Toastify from "toastify-js";
   import PromiseError from "../base/PromiseError.svelte";
   import isEmail from "validator/es/lib/isEmail";
+  import Select from "svelte-select";
   let data_loaded = false;
   export let params;
   const runner_promise = RunnerService.runnerControllerGetOne(params.runnerid);
@@ -30,7 +31,6 @@
     data_loaded = true;
     original_data_pdf = Object.assign(original_data_pdf, data);
     original_data = Object.assign(original_data, data);
-    original_data.group = original_data.group.id;
     editable = Object.assign(editable, original_data);
   });
   document.addEventListener("click", function (e) {
@@ -55,11 +55,13 @@
         text: $_("updating-runner"),
         duration: 2500,
       }).showToast();
-      RunnerService.runnerControllerPut(original_data.id, editable)
+      let postdata = {};
+      postdata = Object.assign(postdata, editable);
+      postdata.group = postdata.group.id;
+      RunnerService.runnerControllerPut(original_data.id, postdata)
         .then((resp) => {
           Object.assign(original_data, editable);
-          original_data = editable;
-          Object.assign(original_data, editable);
+          original_data = original_data;
           Toastify({
             text: $_("runner-updated"),
             duration: 2500,
@@ -206,7 +208,17 @@
                 aria-haspopup="true"
                 aria-expanded="true">
                 {$_('generate-sponsoring-contract')}
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="-mr-1 ml-2 h-5 w-5"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"/></svg>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  class="-mr-1 ml-2 h-5 w-5"><path
+                    fill="none"
+                    d="M0 0h24v24H0z" />
+                  <path
+                    fill="currentColor"
+                    d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z" /></svg>
               </button>
             </div>
             {#if sponsoring_contracts_download_open}
@@ -349,21 +361,31 @@
     </div>
     <div class="text-sm w-full">
       <span class="font-medium text-gray-700">{$_('group')}</span>
-      <select
-        bind:value={editable.group}
-        name="team"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
-        {#each teams as team}
-          <option value={team.id}>
-            {team.parentGroup.name}
-            &gt;
-            {team.name}
-          </option>
-        {/each}
-        {#each orgs as org}
-          <option value={org.id}>{org.name}</option>
-        {/each}
-      </select>
+      <Select
+        containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+        getSelectionLabel={(option) => {
+          if (option.responseType == 'RUNNERORGANIZATION') {
+            return option.name;
+          }
+          return `${option.parentGroup.name} &gt; ${option.name}`;
+        }}
+        getOptionLabel={(option) => {
+          if (option.responseType == 'RUNNERORGANIZATION') {
+            return option.name;
+          }
+          return `${option.parentGroup.name} &gt; ${option.name}`;
+        }}
+        itemFilter={(label, filterText, option) => label
+            .toLowerCase()
+            .includes(
+              filterText.toLowerCase()
+            ) || option.id.toString().startsWith(filterText.toLowerCase())}
+        items={orgs.concat(orgs, teams)}
+        showChevron={true}
+        placeholder={$_('search-for-an-organization-or-team-by-name-or-id')}
+        noOptionsMessage={$_('no-organization-or-team-found')}
+        bind:selectedValue={editable.group}
+        on:clear={() => (editable.group = null)} />
     </div>
     <div class="text-sm w-full">
       <span class="font-medium text-gray-700">{$_('distance')}</span>