diff --git a/src/components/UserDetail.svelte b/src/components/UserDetail.svelte
index c6642ed4..43197b5e 100644
--- a/src/components/UserDetail.svelte
+++ b/src/components/UserDetail.svelte
@@ -2,7 +2,7 @@
   import { _ } from "svelte-i18n";
   import lodashIsEqual from "lodash.isequal";
   import store from "../store";
-  import { UserService } from "@odit/lfk-client-js";
+  import { UserService, UserGroupService } from "@odit/lfk-client-js";
   import "gridjs/dist/theme/mermaid.css";
   import Toastify from "toastify-js";
   import PromiseError from "./PromiseError.svelte";
@@ -12,12 +12,46 @@
   $: delete_triggered = false;
   $: original_data = {};
   $: editable_userdata = undefined;
+  $: allgroups = [];
+  $: allgroups_ids = [];
+  $: usergroups_array = [];
   user_promise.then((data) => {
+    console.log(data);
     data_loaded = true;
     original_data = Object.assign(original_data, data);
     editable_userdata = data;
+    usergroups_array = [];
+    allgroups.forEach((g) => {
+      allgroups_ids.push(g.id);
+    });
+  });
+  UserGroupService.userGroupControllerGetAll().then((data) => {
+    console.log(data);
+    allgroups = data;
   });
   $: changes_performed = !lodashIsEqual(original_data, editable_userdata);
+  function updateGroups() {
+    console.log("updating groups...");
+    console.log(editable_userdata.groups);
+    allgroups.forEach((g) => {
+      const exists_in_currentstate = editable_userdata.groups.some(
+        (obj) => obj.id === g.id
+      );
+      console.log("exists:" + exists_in_currentstate);
+      if (exists_in_currentstate === true) {
+        editable_userdata.groups = editable_userdata.groups.filter(function (
+          obj
+        ) {
+          return obj.id !== g.id;
+        });
+      } else {
+        console.log("add to arr:" + g.id);
+        editable_userdata.groups.push(g);
+      }
+    });
+    console.log("new groups:");
+    console.log(editable_userdata.groups);
+  }
   function submit() {
     if (data_loaded === true && changes_performed === true) {
       console.log("ok, submitting...");
@@ -235,12 +269,19 @@
     </div>
     <div class="text-sm w-full">
       <span class="font-medium">{$_('groups')}</span>
+      <!-- svelte-ignore a11y-no-onchange -->
       <select
+        on:change={updateGroups}
+        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"
         multiple>
-        <option>Admins</option>
-        <option>Finanzen</option>
-        <option>...</option>
+        {#each allgroups as g}
+          {#if editable_userdata.groups.some((obj) => obj.id === g.id)}
+            <option selected value={g.id}>{g.name}</option>
+          {:else}
+            <option value={g.id}>{g.name}</option>
+          {/if}
+        {/each}
       </select>
     </div>
     <div class="text-sm w-full">