diff --git a/src/components/UserDetail.svelte b/src/components/UserDetail.svelte
index 2dc3e7d7..502f4136 100644
--- a/src/components/UserDetail.svelte
+++ b/src/components/UserDetail.svelte
@@ -2,26 +2,56 @@
   import { _ } from "svelte-i18n";
   import lodashIsEqual from "lodash.isequal";
   import store from "../store";
-  import {
-    UserService,
-    UserGroupService,
-    PermissionService,
-  } from "@odit/lfk-client-js";
+  import { UserService, UserGroupService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
   import PromiseError from "./PromiseError.svelte";
   export let params;
   const user_promise = UserService.userControllerGetOne(params.userid);
   let data_loaded = false;
   let usergroups_array_original = [];
-  let vererbte = [];
+  const colors = [
+    "#f3558e",
+    "#17b978",
+    "#3498db",
+    "#3f3b3b",
+    "#775ada",
+    "#7ed6df_#000000",
+    "#000000",
+    "#21e6c1_#000000",
+    "#c0392b",
+    "#d35400",
+    "#7f8c8d",
+    "#6ab04c",
+    "#4834d4",
+    "#ff1f5a",
+    "#eac100",
+  ];
+  let matched_colors = [];
   $: delete_triggered = false;
   $: original_data = {};
   $: editable_userdata = {};
-  $: allpermissions = [];
   $: allgroups = [];
   $: allgroups_ids = [];
   $: usergroups_array = [];
+  $: search_permission = "";
   user_promise.then((data) => {
+    let current_target = "";
+    let colorindex = -1;
+    data.permissions.forEach((p) => {
+      const target = p.split(":")[0];
+      if (current_target !== p.split(":")[0]) {
+        colorindex++;
+        current_target = p.split(":")[0];
+      }
+      let background = colors[colorindex];
+      let foreground = "#fff";
+      if (background.includes("_")) {
+        foreground = background.split("_")[1];
+        background = background.split("_")[0];
+      }
+      matched_colors[target] = [background, foreground];
+    });
+    //
     data_loaded = true;
     original_data = Object.assign(original_data, data);
     editable_userdata = data;
@@ -36,35 +66,12 @@
   UserGroupService.userGroupControllerGetAll().then((data) => {
     allgroups = data;
   });
-  const permissions_promise = PermissionService.permissionControllerGetAll();
-  permissions_promise.then((data) => {
-    data.forEach((p) => {
-      allpermissions = allpermissions.concat([p.target + ":" + p.action]);
-    });
-  });
-  UserService.userControllerGetPermissions(params.userid).then((val) => {
-    console.log(val);
-    editable_userdata.permissions = [];
-    val.directlyGranted.forEach((p) => {
-      editable_userdata.permissions = editable_userdata.permissions.concat([
-        p.target + ":" + p.action,
-      ]);
-    });
-    val.inherited.forEach((p) => {
-      vererbte = vererbte.concat([p.target + ":" + p.action]);
-    });
-  });
   $: changes_performed = !lodashIsEqual(original_data, editable_userdata);
   $: groups_changed =
     JSON.stringify(usergroups_array) ===
     JSON.stringify(usergroups_array_original);
   $: save_enabled = changes_performed || !groups_changed;
   function submit() {
-    if (
-      !lodashIsEqual(original_data.permissions, editable_userdata.permissions)
-    ) {
-      // TODO: add+delete permissions
-    }
     if (data_loaded === true && save_enabled) {
       editable_userdata.groups = usergroups_array;
       Toastify({
@@ -84,7 +91,6 @@
           }).showToast();
         })
         .catch((err) => {});
-    } else {
     }
   }
   function deleteUser() {
@@ -142,7 +148,7 @@
         </nav>
       </div>
     </div>
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
+    <div class="mb-8 text-3xl font-extrabold">
       {original_data.firstname}
       {original_data.middlename || ''}
       {original_data.lastname}
@@ -284,75 +290,25 @@
       </select>
     </div>
     <div class="text-sm w-full">
-      <span class="font-medium">Permissions</span>
-      <div class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
-        <!--  -->
-        <div class="flex flex-wrap -mx-1 overflow-hidden">
-          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">
-            verfügbare
-          </div>
-          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">erteilte</div>
-          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">vererbte</div>
-        </div>
-        <!--  -->
-        <div class="flex flex-wrap -mx-1 overflow-hidden">
-          {#if allpermissions.length > 0}
-            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">
-              <div
-                class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
-                {#each allpermissions as p}
-                  {#if !editable_userdata.permissions.includes(p)}
-                    <div
-                      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 text-right">
-                      {p}
-                      <button
-                        on:click={() => {
-                          editable_userdata.permissions.push(p);
-                          editable_userdata.permissions = editable_userdata.permissions;
-                        }}
-                        type="button"
-                        class="w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-200 font-medium text-black hover:bg-green-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm">+</button>
-                    </div>
-                  {/if}
-                {/each}
-              </div>
-            </div>
-            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">
-              <div
-                class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
-                {#each allpermissions as p}
-                  {#if editable_userdata.permissions.includes(p)}
-                    <div
-                      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 text-left">
-                      <button
-                        on:click={() => {
-                          editable_userdata.permissions = editable_userdata.permissions.filter((obj) => obj !== p);
-                        }}
-                        type="button"
-                        class="w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-400 font-medium text-black hover:bg-red-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">-</button>
-                      {p}
-                    </div>
-                  {/if}
-                {/each}
-              </div>
-            </div>
-            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">
-              <div
-                class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
-                {#each vererbte as p}
-                  <div
-                    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 text-left">
-                    <button
-                      type="button"
-                      class="w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-400 font-medium text-black hover:bg-red-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">-</button>
-                    {p}
-                  </div>
-                {/each}
-              </div>
-            </div>
-          {/if}
-        </div>
-      </div>
+      <p class="font-medium mb-4">Permissions</p>
+      <a
+        href="/users/{params.userid}/permissions/"
+        class="rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 font-medium text-black hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm">Edit
+        Permissions</a>
+      <input
+        autocomplete="off"
+        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" />
+      {#each original_data.permissions as p}
+        {#if p.toLowerCase().includes(search_permission.toLowerCase())}
+          <span
+            style="background:{matched_colors[p.split(':')[0]][0]};color:{matched_colors[p.split(':')[0]][1]};"
+            class="mt-1 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-indigo-100 rounded">{p}</span>
+          <!--  -->
+        {/if}
+      {/each}
     </div>
   </section>
 {:catch error}