diff --git a/src/components/UserDetail.svelte b/src/components/UserDetail.svelte
index eb1e9a6d..77c0928d 100644
--- a/src/components/UserDetail.svelte
+++ b/src/components/UserDetail.svelte
@@ -37,6 +37,8 @@
   user_promise.then((data) => {
     let current_target = "";
     let colorindex = -1;
+    // alphabetically sort permissions for color compatibility for target
+    data.permissions = data.permissions.sort();
     data.permissions.forEach((p) => {
       const target = p.split(":")[0];
       if (current_target !== p.split(":")[0]) {