diff --git a/src/app/workspace/resource/permission-info/permission-info.component.ts b/src/app/workspace/resource/permission-info/permission-info.component.ts
index e4ec72c09d..f54e04e2d7 100644
--- a/src/app/workspace/resource/permission-info/permission-info.component.ts
+++ b/src/app/workspace/resource/permission-info/permission-info.component.ts
@@ -15,7 +15,7 @@ export interface PermissionObj {
 }
 
 export interface PermissionGroup {
-    group: string;
+    group: string;              // e.g knora-admin:ProjectAdmin
     restriction: PermissionUtil.Permissions[];
 }
 
@@ -107,23 +107,29 @@ export class PermissionInfoComponent implements OnInit {
             // split by | to get each permission section
             const sections = this.hasPermissions.split('|');
 
-            sections.forEach(item => {
+            sections.forEach(section => {
                 // split by space
-                const unit = item.split(' ');
+                const unit = section.split(' ');
 
                 const allPermissions = PermissionUtil.allUserPermissions(
                     unit[0] as 'RV' | 'V' | 'M' | 'D' | 'CR'
                 );
 
-                const permission: PermissionGroup = {
-                    'group': unit[1],
-                    'restriction': allPermissions
-                };
-
-                this.listOfPermissions.push(permission);
+                // a section could look like CR knora-admin:Creator
+                // but also like CR knora-admin:Creator,knora-admin:ProjectAdmin --> in this case we have to split the section again
+                if (unit[1].indexOf(',') > -1) {
+                    unit[1].split(',').forEach(group => {
+                        // add to list of permissions
+                        this.pushToListOfPermissions(group, allPermissions);
+                    });
+                } else {
+                    // add to list of permissions
+                    this.pushToListOfPermissions(unit[1], allPermissions);
+                }
 
             });
 
+            // bring the list of group permissions into correct order: from high to low user group
             this.defaultGroups.forEach((group, i) => {
 
                 // current index
@@ -135,8 +141,10 @@ export class PermissionInfoComponent implements OnInit {
                 }
 
             });
+
         }
 
+        // display current user's permission
         if (this.userHasPermission) {
             this.userRestrictions = PermissionUtil.allUserPermissions(
                 this.userHasPermission as 'RV' | 'V' | 'M' | 'D' | 'CR'
@@ -145,6 +153,9 @@ export class PermissionInfoComponent implements OnInit {
 
     }
 
+    /**
+     * open or close permission info box
+     */
     toggleMenu() {
         this.isOpen = !this.isOpen;
         // console.log(this.infoButton)
@@ -158,15 +169,55 @@ export class PermissionInfoComponent implements OnInit {
         this.infoBoxPositions = [pos];
     }
 
+    /**
+     * returns status of a permission value if it's set or not
+     * @param restriction
+     * @param listOfRestrictions
+     * @returns true if permission value is set
+     */
     getStatus(restriction: string, listOfRestrictions: number[]): boolean {
         return (listOfRestrictions.indexOf(PermissionUtil.Permissions[restriction]) !== -1);
     }
 
+    /**
+     * sorts the array
+     * @param arr
+     * @param fromIndex
+     * @param toIndex
+     */
     arrayMove(arr: PermissionGroup[], fromIndex: number, toIndex: number) {
         const element = arr[fromIndex];
         arr.splice(fromIndex, 1);
         arr.splice(toIndex, 0, element);
     }
 
+    /**
+     * pushs user group's permission to list of permissions, if this group does not exist
+     * otherwise it compares the permission level and replaces it, if it's higher
+     * @param group
+     * @param restriction
+     */
+    pushToListOfPermissions(group: string, restriction: PermissionUtil.Permissions[]) {
+        // in API v17.5.1 (and all prev versions) the default string could look like:
+        // "CR knora-admin:ProjectAdmin|D knora-admin:ProjectAdmin|M knora-admin:ProjectAdmin|V knora-admin:ProjectAdmin|RV knora-admin:ProjectAdmin"
+        // in this case we should display this user group only once but with the highest permission only
+
+        const index = this.listOfPermissions.findIndex((object: PermissionGroup) => object.group === group);
+        const permission: PermissionGroup = {
+            'group': group,
+            'restriction': restriction
+        };
+
+        // add to list of Permissions if it does not exist yet
+        if (index === -1) {
+            this.listOfPermissions.push(permission);
+        } else {
+            // if it exists, compare the permission level and replace if it's higher
+            if (this.listOfPermissions[index].restriction.length < restriction.length) {
+                this.listOfPermissions[index] = permission;
+            }
+        }
+
+    }
 }