diff --git a/karma.conf.js b/karma.conf.js
index 4040183..c1718c4 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -1,9 +1,10 @@
 // Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
+// https://karma-runner.github.io/6.4/config/configuration-file.html
+// process.env.CHROME_BIN = require('puppeteer').executablePath()
 
 module.exports = function (config) {
   config.set({
-    basePath: '.',
+    basePath: '',
     logLevel: config.LOG_INFO,
     frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
@@ -14,18 +15,34 @@ module.exports = function (config) {
       require('karma-sonarqube-unit-reporter'),
       require('@angular-devkit/build-angular/plugins/karma')
     ],
+    port: 9876,
+    colors: true,
+    autoWatch: true,
+    singleRun: false,
+    restartOnFileChange: true,
+    browserConsoleLogOptions: { level: 'debug', format: '%b %T: %m', terminal: true },
+    // export CHROME_BIN=<path to binary>
+    browsers: ['Chrome'],
+    customLaunchers: {
+      Chrome: { base: 'ChromeHeadless', flags: ['--no-sandbox', '--disable-web-security'] }
+    },
     client: {
-      jasmine: {
-        // you can add configuration options for Jasmine here
-        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
-        // for example, you can disable the random execution with `random: false`
-        // or set a specific seed with `seed: 4321`
-        random: false
-      },
+      // https://jasmine.github.io/api/edge/Configuration.html
+      jasmine: { random: false },
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
+    reporters: ['progress', 'kjhtml', 'coverage', 'sonarqubeUnit'],
+    preprocessors: { 'src/**/*.js': ['coverage'] },
     jasmineHtmlReporter: {
-      suppressAll: true // removes the duplicated traces
+      suppressAll: true // remove duplicated traces
+    },
+    sonarqubeReporter: {
+      basePath: 'src/app', // test files folder
+      filePattern: '**/*.spec.ts', // test files glob pattern
+      encoding: 'utf-8', // test files encoding
+      outputFolder: 'sonar', // report destination
+      legacyMode: false, // report for Sonarqube < 6.2 (disabled)
+      reportName: 'sonarqube_report.xml'
     },
     sonarQubeUnitReporter: {
       sonarQubeVersion: 'LATEST',
@@ -39,20 +56,6 @@ module.exports = function (config) {
       dir: 'reports',
       subdir: 'coverage', // common name instaed browser-specific
       reporters: [{ type: 'text-summary' }, { type: 'lcov' }]
-    },
-    reporters: ['progress', 'kjhtml', 'coverage', 'sonarqubeUnit'],
-    preprocessors: { 'src/**/*.js': ['coverage'] },
-    port: 9876,
-    colors: true,
-    autoWatch: true,
-    singleRun: false,
-    restartOnFileChange: true,
-    browsers: ['HeadlessChrome'],
-    customLaunchers: {
-      HeadlessChrome: {
-        base: 'ChromeHeadless',
-        flags: ['--no-sandbox']
-      }
     }
   })
 }
diff --git a/src/app/permission/app-detail/app-detail.component.html b/src/app/permission/app-detail/app-detail.component.html
index fcb2a31..03ce3e3 100644
--- a/src/app/permission/app-detail/app-detail.component.html
+++ b/src/app/permission/app-detail/app-detail.component.html
@@ -21,11 +21,12 @@
       *ngIf="!loadingExceptionKey"
       #permissionTable
       id="apm_app_detail_permission_table"
-      styleClass="px-3"
-      [columns]="roles"
+      styleClass="px-3 p-datatable-striped"
+      [columns]="rolesFiltered"
       [value]="permissionRows"
       [globalFilterFields]="filterBy"
       [scrollable]="true"
+      scrollHeight="590px"
       [paginator]="true"
       [alwaysShowPaginator]="true"
       [rows]="10"
@@ -132,25 +133,32 @@
       </ng-template>
 
       <ng-template pTemplate="header" let-columns>
-        <!-- 1. header row -->
+        <!-- 1. HEADER ROW -->
         <tr>
           <th
             pFrozenColumn
             id="apm_app_detail_permission_table_header_permissions"
-            [attr.colspan]="!showPermissionTools ? 3 : protectedAssignments.length === 0 ? 4 : 5"
-            class="text-center border-right-primary"
+            [attr.colspan]="(currentApp.appType === 'PRODUCT' ? 2 : 3) + (showPermissionTools ? 2 : 0)"
+            class="py-2 border-right-primary"
             [ngClass]="
               myPermissions.includes('PERMISSION#EDIT') || myPermissions.includes('PERMISSION#DELETE') ? 'py-0' : 'py-1'
             "
           >
-            <div class="flex justify-content-evenly align-items-center">
-              <div class="flex justify-content-center align-items-center column-gap-2 opacity-80">
-                <span class="p-2 inline-block font-bold">{{ 'PERMISSION.LABEL' | translate }} </span>
+            <div class="flex flex-row justify-content-evenly">
+              <div class="flex flex-row align-items-center column-gap-2">
+                <span
+                  class="p-2 inline-block font-bold text-xl"
+                  [attr.aria-label]="'PERMISSION.LABEL' | translate"
+                  [pTooltip]="'PERMISSION.TOOLTIP' | translate"
+                  tooltipPosition="top"
+                  tooltipEvent="hover"
+                  >{{ 'PERMISSION.LABEL' | translate }}</span
+                >
                 <button
                   pbutton
                   type="button"
                   *ngIf="myPermissions.includes('PERMISSION#MANAGE')"
-                  [id]="'apm_application_detail_permission_table_header_permission_tools'"
+                  id="apm_app_detail_permission_table_header_permission_tools"
                   class="p-1 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
                   (click)="showPermissionTools = !showPermissionTools"
                   [ariaLabel]="'ACTIONS.VIEW.PERMISSION.TOOLS' | translate"
@@ -160,117 +168,140 @@
                 >
                   <span class="text-primary font-medium p-button-icon pi pi-cog" aria-hidden="true"></span>
                 </button>
-                <button
-                  pbutton
-                  type="button"
-                  *ngIf="showPermissionTools"
-                  [id]="'apm_application_detail_permission_table_header_permission_create'"
-                  class="p-1 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
-                  (click)="onCreatePermission()"
-                  [ariaLabel]="'ACTIONS.CREATE.PERMISSION' | translate"
-                  [pTooltip]="'ACTIONS.CREATE.PERMISSION' | translate"
-                  tooltipPosition="top"
-                  tooltipEvent="hover"
-                >
-                  <span class="text-primary font-medium p-button-icon pi pi-plus-circle" aria-hidden="true"></span>
-                </button>
+                <ng-container *ngIf="showPermissionTools">
+                  <button
+                    pbutton
+                    type="button"
+                    id="apm_app_detail_permission_table_header_permission_create"
+                    class="p-1 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
+                    (click)="onCreatePermission()"
+                    [ariaLabel]="'ACTIONS.CREATE.PERMISSION' | translate"
+                    [pTooltip]="'ACTIONS.CREATE.PERMISSION' | translate"
+                    tooltipPosition="top"
+                    tooltipEvent="hover"
+                  >
+                    <span class="text-primary font-medium p-button-icon pi pi-plus-circle" aria-hidden="true"></span>
+                  </button>
+                  <p-checkbox
+                    type="text"
+                    inputId="apm_app_detail_permission_table_header_display_additional_row_data"
+                    styleClass="ml-2 cursor-auto shadow-none"
+                    [(ngModel)]="displayAdditionalRowData"
+                    [binary]="true"
+                    [label]="'DIALOG.DETAIL.ADDITIONAL_INFO' | translate"
+                    [ariaLabel]="'DIALOG.DETAIL.ADDITIONAL_INFO' | translate"
+                    [pTooltip]="'DIALOG.DETAIL.ADDITIONAL_INFO.TOOLTIP' | translate"
+                    tooltipPosition="top"
+                    tooltipEvent="hover"
+                  ></p-checkbox>
+                </ng-container>
               </div>
             </div>
           </th>
-          <th
-            id="apm_app_detail_permission_table_header_roles"
-            [attr.colspan]="roles ? roles.length : 0"
-            class="py-0 text-center"
-          >
-            <div class="flex justify-content-center align-items-center column-gap-2 opacity-80">
-              <span
-                class="p-2 inline-block font-bold"
-                [attr.aria-label]="'ROLE.LABEL' | translate"
-                [pTooltip]="'ROLE.TOOLTIP' | translate"
-                tooltipPosition="top"
-                tooltipEvent="hover"
-                >{{ 'ROLE.LABEL' | translate }}</span
-              >
-              <button
-                pbutton
-                type="button"
-                *ngIf="myPermissions.includes('ROLE#MANAGE')"
-                [id]="'pm_application_detail_permission_table_header_permission_tools'"
-                class="p-1 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
-                (click)="showRoleTools = !showRoleTools"
-                [ariaLabel]="'ACTIONS.VIEW.ROLE.TOOLS' | translate"
-                [pTooltip]="'ACTIONS.VIEW.ROLE.TOOLS' | translate"
-                tooltipPosition="top"
-                tooltipEvent="hover"
-              >
-                <span class="text-primary font-medium p-button-icon pi pi-cog" aria-hidden="true"></span>
-              </button>
-              <button
-                pbutton
-                type="button"
-                *ngIf="myPermissions.includes('ROLE#CREATE') && showRoleTools"
-                [id]="'pm_app_detail_permission_table_header_add_role_action'"
-                class="p-1 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
-                (click)="onCreateRole($event)"
-                [ariaLabel]="'ACTIONS.CREATE.ROLE' | translate"
-                [pTooltip]="'ACTIONS.CREATE.ROLE.TOOLTIP' | translate"
-                tooltipPosition="top"
-                tooltipEvent="hover"
-              >
-                <span class="text-primary font-medium p-button-icon pi pi-plus-circle" aria-hidden="true"></span>
-              </button>
-              <button
-                pbutton
-                type="button"
-                *ngIf="myPermissions.includes('ROLE#CREATE') && showRoleTools"
-                [id]="'pm_app_detail_permission_table_header_add_iam_roles_action'"
-                class="p-1 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
-                (click)="onAddIAMRoles($event)"
-                [ariaLabel]="'ACTIONS.CREATE.IAM_ROLES' | translate"
-                [pTooltip]="'ACTIONS.CREATE.IAM_ROLES.TOOLTIP' | translate"
-                tooltipPosition="top"
-                tooltipEvent="hover"
-              >
-                <span class="text-primary font-medium p-button-icon pi pi-bolt" aria-hidden="true"></span>
-              </button>
-              <div *ngIf="missingWorkspaceRoles">
-                <button
-                  pbutton
-                  type="button"
-                  *ngIf="myPermissions.includes('ROLE#CREATE') && showRoleTools"
-                  [id]="'pm_app_detail_permission_table_header_add_workspace_roles_action'"
-                  class="p-1 p-button-rounded p-button p-component p-button-icon-only button-letter-icon"
-                  (click)="onCreateWorkspaceRoles($event)"
-                  [ariaLabel]="'ACTIONS.CREATE.WORKSPACE_ROLES.TOOLTIP' | translate"
-                  [pTooltip]="'ACTIONS.CREATE.WORKSPACE_ROLES.TOOLTIP' | translate"
+          <!-- 1. HEADER ROW - ROLES -->
+          <th id="apm_app_detail_permission_table_header_roles" class="py-2" [attr.colspan]="roles ? roles.length : 0">
+            <div class="flex flex-row justify-content-evenly">
+              <div class="flex flex-row align-items-center column-gap-2">
+                <span
+                  class="p-2 inline-block font-bold text-xl"
+                  [attr.aria-label]="'ROLE.LABEL' | translate"
+                  [pTooltip]="'ROLE.TOOLTIP' | translate"
                   tooltipPosition="top"
                   tooltipEvent="hover"
+                  >{{ 'ROLE.LABEL' | translate }}</span
                 >
-                  <span class="text-sm p-button-icon letter-icon" aria-hidden="true">w</span>
-                </button>
+                <div class="flex flex-row column-gap-2">
+                  <button
+                    *ngIf="myPermissions.includes('ROLE#MANAGE')"
+                    pbutton
+                    type="button"
+                    id="apm_app_detail_permission_table_header_permission_tools"
+                    class="p-1 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
+                    (click)="showRoleTools = !showRoleTools"
+                    [ariaLabel]="'ACTIONS.VIEW.ROLE.TOOLS' | translate"
+                    [pTooltip]="'ACTIONS.VIEW.ROLE.TOOLS' | translate"
+                    tooltipPosition="top"
+                    tooltipEvent="hover"
+                  >
+                    <span class="text-primary font-medium p-button-icon pi pi-cog" aria-hidden="true"></span>
+                  </button>
+                  <ng-container *ngIf="showRoleTools && myPermissions.includes('ROLE#CREATE')">
+                    <button
+                      pbutton
+                      type="button"
+                      id="apm_app_detail_permission_table_header_add_role_action"
+                      class="p-1 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
+                      (click)="onCreateRole($event)"
+                      [ariaLabel]="'ACTIONS.CREATE.ROLE' | translate"
+                      [pTooltip]="'ACTIONS.CREATE.ROLE.TOOLTIP' | translate"
+                      tooltipPosition="top"
+                      tooltipEvent="hover"
+                    >
+                      <span class="text-primary font-medium p-button-icon pi pi-plus-circle" aria-hidden="true"></span>
+                    </button>
+                    <button
+                      pbutton
+                      type="button"
+                      id="am_app_detail_permission_table_header_action_add_iam_roles"
+                      class="p-1 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
+                      (click)="onAddIAMRoles($event)"
+                      [ariaLabel]="'ACTIONS.CREATE.IAM_ROLES' | translate"
+                      [pTooltip]="'ACTIONS.CREATE.IAM_ROLES.TOOLTIP' | translate"
+                      tooltipPosition="top"
+                      tooltipEvent="hover"
+                    >
+                      <span class="text-primary font-medium p-button-icon pi pi-bolt" aria-hidden="true"></span>
+                    </button>
+                    <button
+                      *ngIf="missingWorkspaceRoles"
+                      pbutton
+                      type="button"
+                      id="apm_app_detail_permission_table_header_action_add_workspace_roles"
+                      class="p-1 p-button-rounded p-button p-component p-button-icon-only button-letter-icon"
+                      (click)="onCreateWorkspaceRoles($event)"
+                      [ariaLabel]="'ACTIONS.CREATE.WORKSPACE_ROLES.TOOLTIP' | translate"
+                      [pTooltip]="'ACTIONS.CREATE.WORKSPACE_ROLES.TOOLTIP' | translate"
+                      tooltipPosition="top"
+                      tooltipEvent="hover"
+                    >
+                      <span class="text-sm p-button-icon letter-icon" aria-hidden="true">w</span>
+                    </button>
+                  </ng-container>
+                </div>
+                <div *ngIf="roles.length > 3" class="ml-2 p-inputgroup h-2rem">
+                  <span class="p-inputgroup-addon pi pi-filter p-2 text-sm min-w-min"> </span>
+                  <input
+                    #roleFilter
+                    pInputText
+                    type="search"
+                    id="apm_app_detail_permission_table_header_role_filter"
+                    class="py-0 px-2 max-w-20rem h-2rem text-responsive"
+                    (input)="onRoleFilterChange(roleFilter.value)"
+                    [placeholder]="'DIALOG.DETAIL.ROLES.FILTER' | translate"
+                    [pTooltip]="'DIALOG.DETAIL.ROLES.FILTER.TOOLTIP' | translate"
+                    tooltipPosition="top"
+                    tooltipEvent="hover"
+                  />
+                </div>
               </div>
             </div>
           </th>
         </tr>
 
-        <!-- 2. header row: permission filter and role management -->
+        <!-- 2. HEADER ROW - permission filter and role management-->
         <tr>
           <ng-container *ngIf="showPermissionTools">
             <th
               pFrozenColumn
               id="apm_app_detail_permission_table_header_actions"
-              class="pt-2 pb-1 vertical-align-bottom border-bottom-primary text-center"
+              class="py-2 vertical-align-bottom border-bottom-primary text-center"
             >
               {{ 'PERMISSION.ACTIONS' | translate }}
             </th>
-            <th
-              pFrozenColumn
-              *ngIf="protectedAssignments.length > 0"
-              class="pt-2 pb-1 vertical-align-bottom border-bottom-primary"
-            >
+            <th pFrozenColumn class="py-2 vertical-align-bottom border-bottom-primary">
               <span
                 class="pi pi-exclamation-circle"
-                aria-hidden="true"
+                [attr.aria-label]="'PERMISSION.MANDATORY.COLUMN' | translate"
                 [pTooltip]="'PERMISSION.MANDATORY.COLUMN' | translate"
                 tooltipPosition="top"
                 tooltipEvent="hover"
@@ -281,15 +312,16 @@
             pFrozenColumn
             pSortableColumn="key"
             id="apm_app_detail_permission_table_header_permission_key"
-            class="pt-2 pb-1 px-2 vertical-align-bottom border-bottom-primary sm:white-space-nowrap"
+            class="p-2 vertical-align-bottom border-bottom-primary sm:white-space-nowrap"
           >
             {{ 'PERMISSION.KEY' | translate }}
             <p-sortIcon field="key"></p-sortIcon>
           </th>
           <th
             pFrozenColumn
+            *ngIf="currentApp.appType === 'WORKSPACE'"
             id="apm_app_detail_permission_table_header_permission_filter_product"
-            class="pt-2 pb-1 px-2 vertical-align-bottom border-bottom-primary white-space-nowrap"
+            class="p-2 vertical-align-bottom border-bottom-primary white-space-nowrap"
           >
             <div *ngIf="currentApp.isProduct">{{ 'DIALOG.DETAIL.FILTER.PRODUCT' | translate }}</div>
             <div *ngIf="!currentApp.isProduct" class="flex">
@@ -314,7 +346,7 @@
               <button
                 pbutton
                 type="button"
-                [id]="'app_detail_permission_table_sort_product_name'"
+                id="app_detail_permission_table_sort_product_name"
                 class="p-2 mr-0 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
                 (click)="onFilterItemSortIcon($event, sortIconProduct, 'product')"
                 [pTooltip]="'PERMISSION.SORT.PRODUCT' | translate"
@@ -328,7 +360,7 @@
           <th
             pFrozenColumn
             id="apm_app_detail_permission_table_header_permission_filter_app_id"
-            class="pt-2 pb-1 px-2 vertical-align-bottom border-bottom-primary white-space-nowrap border-right-primary"
+            class="p-2 vertical-align-bottom border-bottom-primary white-space-nowrap border-right-primary"
           >
             <div class="flex">
               <span #filterApp class="p-float-label inline-block">
@@ -353,7 +385,7 @@
               <button
                 pbutton
                 type="button"
-                [id]="'app_detail_permission_table_sort_app_id'"
+                id="app_detail_permission_table_sort_app_id"
                 class="p-2 mr-0 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
                 (click)="onFilterItemSortIcon($event, sortIconAppId, 'appId')"
                 [ariaLabel]="'PERMISSION.SORT.APP_ID' | translate"
@@ -366,11 +398,11 @@
             </div>
           </th>
 
-          <!-- ROLES (actually managed by IDM, duplicated to manage permission assignments) -->
+          <!-- 2. HEADER ROW - ROLES -->
           <th
             id="apm_app_detail_permission_table_header_roles"
             *ngFor="let role of columns"
-            class="pt-2 pb-1 px-2 text-center border-bottom-primary vertical-align-top"
+            class="p-2 text-center border-bottom-primary border-right-1 vertical-align-top"
           >
             <div class="flex flex-row gap-1 justify-content-center align-items-center white-space-nowrap">
               <ng-container *ngIf="showRoleTools">
@@ -452,19 +484,20 @@
         </tr>
       </ng-template>
 
+      <!-- TABLE BODY -->
       <ng-template pTemplate="body" let-row="rowIndex" let-rowData let-columns="columns">
         <tr [id]="'app_detail_permission_table_row_' + row">
           <ng-container *ngIf="showPermissionTools">
             <td
               pFrozenColumn
-              id="apm_app_detail_permission_table_header_actions"
+              [id]="'app_detail_permission_table_row_' + row + '_actions'"
               class="pt-2 pb-1 px-2 white-space-nowrap text-center"
             >
               <button
                 pbutton
                 type="button"
                 *ngIf="myPermissions.includes('PERMISSION#EDIT')"
-                [id]="'app_detail_permission_table_row_' + row + '_edit_action'"
+                [id]="'app_detail_permission_table_row_' + row + '_action_edit'"
                 class="mr-1 my-0 p-1 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
                 (click)="onDetailPermission($event, rowData)"
                 [ariaLabel]="(rowData.mandatory ? 'ACTIONS.VIEW' : 'ACTIONS.EDIT') + '.PERMISSION' | translate"
@@ -480,10 +513,10 @@
                 ></span>
               </button>
               <button
+                *ngIf="myPermissions.includes('PERMISSION#EDIT')"
                 pbutton
                 type="button"
-                *ngIf="myPermissions.includes('PERMISSION#EDIT')"
-                [id]="'app_detail_permission_table_row_' + row + '_copy_action'"
+                [id]="'app_detail_permission_table_row_' + row + '_action_copy'"
                 class="mr-1 my-0 p-1 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
                 (click)="onCopyPermission($event, rowData)"
                 [ariaLabel]="'ACTIONS.COPY.PERMISSION' | translate"
@@ -494,10 +527,10 @@
                 <span class="text-primary font-medium p-button-icon pi pi-copy" aria-hidden="true"></span>
               </button>
               <button
+                *ngIf="myPermissions.includes('PERMISSION#DELETE')"
                 pbutton
                 type="button"
-                *ngIf="myPermissions.includes('PERMISSION#DELETE')"
-                [id]="'app_detail_permission_table_row_' + row + '_delete_action'"
+                [id]="'app_detail_permission_table_row_' + row + '_action_delete'"
                 class="my-0 p-1 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
                 (click)="onDeletePermission($event, rowData)"
                 [disabled]="rowData.mandatory"
@@ -509,40 +542,48 @@
                 <span class="danger-action-text font-medium p-button-icon pi pi-trash" aria-hidden="true"></span>
               </button>
             </td>
-            <td pFrozenColumn *ngIf="protectedAssignments.length > 0">
+            <td pFrozenColumn>
               <span
                 *ngIf="rowData.mandatory"
                 class="pi pi-lock"
-                aria-hidden="true"
+                [attr.aria-label]="'PERMISSION.MANDATORY.COLUMN' | translate"
                 [pTooltip]="'PERMISSION.MANDATORY.COLUMN.TOOLTIP' | translate"
                 tooltipPosition="top"
                 tooltipEvent="hover"
               ></span>
             </td>
           </ng-container>
-          <td pFrozenColumn id="apm_app_detail_permission_table_data_permission_key" class="p-2">
+          <td pFrozenColumn [id]="'app_detail_permission_table_row_' + row + '_permission_key'" class="p-2">
             <div class="font-bold text-sm sm:text-base">{{ rowData.resource }} # {{ rowData.action }}</div>
-            <div class="mt-1 text-xs hidden lg:block">{{ rowData.description }}</div>
+            <div *ngIf="displayAdditionalRowData" class="mt-1 text-xs hidden lg:block">{{ rowData.description }}</div>
           </td>
-          <td pFrozenColumn id="apm_app_detail_permission_table_data_product_name" class="p-2">
+          <td
+            *ngIf="currentApp.appType === 'WORKSPACE'"
+            pFrozenColumn
+            [id]="'app_detail_permission_table_row_' + row + '_product_name'"
+            class="p-2"
+          >
             <div class="text-sm sm:text-base">{{ rowData.productDisplayName }}</div>
-            <div class="mt-1 text-xs hidden lg:block">{{ rowData.productName }}</div>
+            <div *ngIf="displayAdditionalRowData" class="mt-1 text-xs hidden lg:block">{{ rowData.productName }}</div>
           </td>
           <td pFrozenColumn id="apm_app_detail_permission_table_data_app_id" class="p-2 border-right-primary">
             <div class="text-sm sm:text-base">{{ rowData.appDisplayName }}</div>
-            <div class="mt-1 text-xs hidden lg:block">{{ rowData.appId }}</div>
+            <div *ngIf="displayAdditionalRowData" class="mt-1 text-xs hidden lg:block">{{ rowData.appId }}</div>
           </td>
+
           <!-- ASSIGNMENTS -->
           <td
             *ngFor="let role of columns"
-            class="text-center p-2"
-            [id]="'app_detail_permission_table_data_' + role.name + '_' + rowData.key"
+            class="p-2 text-center border-right-1"
+            [id]="'apm_app_detail_permission_table_' + row + '_' + role.name + '_' + rowData.key"
           >
             <!-- mandatory = display only -->
             <div *ngIf="protectedAssignments.includes(rowData.roles[role.id])">
               <span
                 *ngIf="rowData.roles[role.id]"
+                [id]="'apm_app_detail_permission_table_' + row + '_' + role.name + '_' + rowData.key + '_lock'"
                 class="text-primary pi pi-lock"
+                [attr.aria-label]="'PERMISSION.ASSIGNMENTS.ROLE_IS_ASSIGNED_1.MANDATORY' | translate"
                 [pTooltip]="'PERMISSION.ASSIGNMENTS.ROLE_IS_ASSIGNED_1.MANDATORY' | translate"
                 tooltipPosition="top"
                 tooltipEvent="hover"
@@ -555,6 +596,8 @@
                 <span
                   *ngIf="rowData.roles[role.id]"
                   class="text-primary text-lg pi pi-circle-fill"
+                  [id]="'apm_app_detail_permission_table_' + row + '_' + role.name + '_' + rowData.key + '_assigned'"
+                  [attr.aria-label]="'PERMISSION.ASSIGNMENTS.ROLE_IS_ASSIGNED_1' | translate"
                   [pTooltip]="'PERMISSION.ASSIGNMENTS.ROLE_IS_ASSIGNED_1' | translate"
                   tooltipPosition="top"
                   tooltipEvent="hover"
@@ -563,6 +606,10 @@
                 <span
                   *ngIf="!rowData.roles[role.id]"
                   class="text-primary text-lg pi pi-circle"
+                  [id]="
+                    'apm_app_detail_permission_table_' + row + '_' + role.name + '_' + rowData.key + '_not_assigned'
+                  "
+                  [attr.aria-label]="'PERMISSION.ASSIGNMENTS.ROLE_IS_ASSIGNED_0' | translate"
                   [pTooltip]="'PERMISSION.ASSIGNMENTS.ROLE_IS_ASSIGNED_0' | translate"
                   tooltipPosition="top"
                   tooltipEvent="hover"
@@ -572,11 +619,14 @@
               <div *ngIf="myPermissions.includes('PERMISSION#GRANT')">
                 <!-- not assigned -->
                 <button
+                  *ngIf="!rowData.roles[role.id]"
                   pbutton
                   type="button"
-                  *ngIf="!rowData.roles[role.id]"
                   class="my-0 p-1 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
                   (click)="onAssignPermission($event, rowData, role)"
+                  [id]="
+                    'apm_app_detail_permission_table_' + row + '_' + role.name + '_' + rowData.key + '_not_assigned'
+                  "
                   [ariaLabel]="'PERMISSION.ASSIGNMENTS.ROLE_ASSIGNEMENT_CHANGEABLE' | translate"
                   [pTooltip]="'PERMISSION.ASSIGNMENTS.ROLE_ASSIGNEMENT_CHANGEABLE' | translate"
                   tooltipPosition="top"
@@ -587,11 +637,12 @@
 
                 <!-- assigned -->
                 <button
+                  *ngIf="rowData.roles[role.id]"
                   pbutton
                   type="button"
-                  *ngIf="rowData.roles[role.id]"
                   class="my-0 p-1 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
                   (click)="onRemovePermission($event, rowData, role)"
+                  [id]="'apm_app_detail_permission_table_' + row + '_' + role.name + '_' + rowData.key + '_assigned'"
                   [ariaLabel]="'PERMISSION.ASSIGNMENTS.ROLE_ASSIGNEMENT_CHANGEABLE' | translate"
                   [pTooltip]="'PERMISSION.ASSIGNMENTS.ROLE_ASSIGNEMENT_CHANGEABLE' | translate"
                   tooltipPosition="top"
@@ -627,13 +678,13 @@
   [permissions]="permissions"
   [permission]="permission"
   [changeMode]="changeMode"
-  [displayDetailDialog]="showPermissionDetailDialog"
-  [displayDeleteDialog]="showPermissionDeleteDialog"
+  [displayDetailDialog]="displayPermissionDetailDialog"
+  [displayDeleteDialog]="displayPermissionDeleteDialog"
   (dataChanged)="onDetailChanged($event)"
 ></app-permission-detail>
 
 <app-permission-export
   [products]="productNames"
   [listedProductsHeader]="listedProductsHeader"
-  [(displayExportDialog)]="displayExportDialog"
+  [(displayExportDialog)]="displayPermissionExportDialog"
 ></app-permission-export>
diff --git a/src/app/permission/app-detail/app-detail.component.scss b/src/app/permission/app-detail/app-detail.component.scss
index afb9b00..bad55cd 100644
--- a/src/app/permission/app-detail/app-detail.component.scss
+++ b/src/app/permission/app-detail/app-detail.component.scss
@@ -15,18 +15,20 @@
   .word-break-all {
     word-break: break-all;
   }
-  .p-datatable .p-datatable-header {
-    padding-left: 0;
-    padding-right: 0;
-    border: unset;
+  .p-datatable {
+    .p-datatable-wrapper {
+      margin-top: 0.5rem;
+    }
+    .p-datatable-thead > tr:first-of-type > th {
+      border-bottom: unset;
+    }
   }
   .button-letter-icon {
     padding: 1px 4px !important;
   }
   .border-right-primary {
     border-right-color: var(--primary-color) !important;
-    border-right-width: 4px !important;
-    border-right-style: double !important;
+    border-right-width: 2px !important;
   }
   .border-bottom-primary {
     border-bottom-color: var(--primary-color) !important;
diff --git a/src/app/permission/app-detail/app-detail.component.spec.ts b/src/app/permission/app-detail/app-detail.component.spec.ts
index f548138..ff5653d 100644
--- a/src/app/permission/app-detail/app-detail.component.spec.ts
+++ b/src/app/permission/app-detail/app-detail.component.spec.ts
@@ -30,57 +30,39 @@ import { HttpErrorResponse, provideHttpClient } from '@angular/common/http'
 import { Table } from 'primeng/table'
 import { FilterMatchMode } from 'primeng/api'
 
-const app: Application = {
-  name: 'appName',
-  appId: 'appId',
-  productName: 'product'
+// this application can be a workspace or product: set appType on your tests
+const app1: Application = {
+  name: 'appName1',
+  appId: 'appId1',
+  productName: 'prodName1'
 }
 
 const app2: Application = {
   name: 'appName2',
   appId: 'appId2',
-  productName: 'product2'
+  productName: 'prodName1'
 }
 
 const appPageRes: ApplicationPageResult = {
-  stream: [app, app2]
+  stream: [app1, app2]
 }
 
-const prodDetails: ProductDetails = {
-  productName: 'prodName',
-  displayName: 'displayName',
-  mfe: [
-    {
-      appId: 'prodDetailMfeAppId',
-      appName: 'prodDetailMfeAppName'
-    }
-  ],
-  ms: [
-    {
-      appId: 'prodDetailMsAppId',
-      appName: 'prodDetailMsAppName'
-    }
-  ]
+const prodDetails1: ProductDetails = {
+  productName: 'prodName1',
+  displayName: 'prodDisplayName1',
+  mfe: [{ appId: 'prodDetailMfeAppId', appName: 'prodDetailMfeAppName' }],
+  ms: [{ appId: 'prodDetailMsAppId', appName: 'prodDetailMsAppName' }]
 }
 const prodDetails2: ProductDetails = {
   productName: 'prodName2',
-  displayName: 'displayName2',
-  mfe: [
-    {
-      appId: 'prodDetailMfeAppId',
-      appName: 'prodDetailMfeAppName'
-    }
-  ],
-  ms: [
-    {
-      appId: 'prodDetailMsAppId',
-      appName: 'prodDetailMsAppName'
-    }
-  ]
+  displayName: 'prodDisplayName2',
+  mfe: [{ appId: 'prodDetailMfeAppId', appName: 'prodDetailMfeAppName' }],
+  ms: [{ appId: 'prodDetailMsAppId', appName: 'prodDetailMsAppName' }]
 }
+
 const wsDetails: WorkspaceDetails = {
   workspaceRoles: ['role1', 'role2'],
-  products: [prodDetails, prodDetails2]
+  products: [prodDetails1, prodDetails2]
 }
 
 const role1: Role = {
@@ -88,8 +70,8 @@ const role1: Role = {
   name: 'roleName1'
 }
 const role2: Role = {
-  id: 'roleId1',
-  name: 'roleName1'
+  id: 'roleId2',
+  name: 'roleName2'
 }
 const rolePageRes: RolePageResult = {
   stream: [role1, role2]
@@ -98,12 +80,13 @@ const rolePageRes: RolePageResult = {
 const perm1: Permission = {
   id: 'permId1',
   appId: 'appId1',
-  productName: 'prodName1'
+  productName: 'prodName1',
+  mandatory: false
 }
 const perm2: Permission = {
-  id: 'permId1',
-  appId: 'appId1',
-  productName: 'prodName1'
+  id: 'permId2',
+  appId: 'appId2',
+  productName: 'prodName2'
 }
 const permPageRes: PermissionPageResult = {
   stream: [perm1, perm2]
@@ -114,8 +97,8 @@ const permRow: PermissionViewRow = {
   key: 'key',
   roles: { undefined },
   appType: 'MFE',
-  appDisplayName: 'appName',
-  productDisplayName: 'prodName',
+  appDisplayName: 'appName1',
+  productDisplayName: 'prodName1',
   operator: false
 }
 const permRow2: PermissionViewRow = {
@@ -123,8 +106,8 @@ const permRow2: PermissionViewRow = {
   key: 'key',
   roles: { undefined },
   appType: 'MFE',
-  appDisplayName: 'appName',
-  productDisplayName: 'prodName'
+  appDisplayName: 'appName1',
+  productDisplayName: 'prodName1'
 }
 
 const assgmt1: Assignment = {
@@ -145,7 +128,7 @@ describe('AppDetailComponent', () => {
   const mockActivatedRoute: ActivatedRoute = {
     snapshot: {
       paramMap: {
-        get: (key: string) => 'product'
+        get: (key: string) => 'prodName1'
       } as ParamMap
     } as ActivatedRouteSnapshot
   } as ActivatedRoute
@@ -289,7 +272,7 @@ describe('AppDetailComponent', () => {
 
       expect(component.productNames).toEqual(['Product A', 'Product B'])
       expect(component.listedProductsHeader).toBe('ACTIONS.EXPORT.WS_APPLICATION_LIST')
-      expect(component.displayExportDialog).toBe(true)
+      expect(component.displayPermissionExportDialog).toBe(true)
     })
 
     it('should set up export for PRODUCT app type', () => {
@@ -303,7 +286,7 @@ describe('AppDetailComponent', () => {
 
       expect(component.productNames).toEqual(['Test Product'])
       expect(component.listedProductsHeader).toBe('ACTIONS.EXPORT.OF_APPLICATION')
-      expect(component.displayExportDialog).toBe(true)
+      expect(component.displayPermissionExportDialog).toBe(true)
     })
   })
 
@@ -322,8 +305,10 @@ describe('AppDetailComponent', () => {
     })
 
     it('should loadProductDetails successfully', () => {
-      const loadedApp: App = { ...app, appType: 'PRODUCT', isProduct: true }
-      loadedApp.name = loadedApp.productName
+      const loadedApp: App = { ...app1, appType: 'PRODUCT', isProduct: true }
+      loadedApp.name = loadedApp.productName // is a product
+      component.urlParamAppId = app1.name!
+      component.urlParamAppType = loadedApp.appType
       component.myPermissions = ['ROLE#CREATE']
 
       component.ngOnInit()
@@ -427,6 +412,16 @@ describe('AppDetailComponent', () => {
       expect(component.permissions.length).toBe(2)
     })
 
+    it('should filter roles', () => {
+      component.urlParamAppType = 'WORKSPACE'
+
+      component.ngOnInit()
+      component.onRoleFilterChange('roleName1')
+
+      expect(component.roles.length).toBe(2)
+      expect(component.rolesFiltered.length).toBe(1)
+    })
+
     it('should display error when loading roles fails', () => {
       const err = { status: '404' }
       roleApiSpy.searchRoles.and.returnValue(throwError(() => err))
@@ -451,45 +446,47 @@ describe('AppDetailComponent', () => {
   /**
    * CREATE
    */
-  it('should do something onAddIAMRoles', () => {
-    component.onAddIAMRoles(new MouseEvent('click'))
+  describe('create', () => {
+    it('should do something onAddIAMRoles', () => {
+      component.onAddIAMRoles(new MouseEvent('click'))
 
-    expect(component.showIamRolesDialog).toBeTrue()
-  })
+      expect(component.showIamRolesDialog).toBeTrue()
+    })
 
-  it('should return if there are no missing ws roles', () => {
-    const ev = new MouseEvent('click')
-    spyOn(ev, 'stopPropagation')
-    component.missingWorkspaceRoles = false
+    it('should return if there are no missing ws roles', () => {
+      const ev = new MouseEvent('click')
+      spyOn(ev, 'stopPropagation')
+      component.missingWorkspaceRoles = false
 
-    component.onCreateWorkspaceRoles(ev)
+      component.onCreateWorkspaceRoles(ev)
 
-    expect(ev.stopPropagation).toHaveBeenCalled()
-  })
+      expect(ev.stopPropagation).toHaveBeenCalled()
+    })
 
-  it('should create a role', () => {
-    const ev = new MouseEvent('click')
-    spyOn(ev, 'stopPropagation')
-    component.missingWorkspaceRoles = true
-    component.currentApp.workspaceDetails = wsDetails
+    it('should create a role', () => {
+      const ev = new MouseEvent('click')
+      spyOn(ev, 'stopPropagation')
+      component.missingWorkspaceRoles = true
+      component.currentApp.workspaceDetails = wsDetails
 
-    component.onCreateWorkspaceRoles(ev)
+      component.onCreateWorkspaceRoles(ev)
 
-    expect(ev.stopPropagation).toHaveBeenCalled()
-    expect(msgServiceSpy.success).toHaveBeenCalledWith({ summaryKey: 'ACTIONS.ROLE.MESSAGE.WORKSPACE_ROLES_OK' })
-  })
+      expect(ev.stopPropagation).toHaveBeenCalled()
+      expect(msgServiceSpy.success).toHaveBeenCalledWith({ summaryKey: 'ACTIONS.ROLE.MESSAGE.WORKSPACE_ROLES_OK' })
+    })
 
-  it('should display error msg if create role fails', () => {
-    roleApiSpy.createRole.and.returnValue(throwError(() => new Error()))
-    const ev = new MouseEvent('click')
-    spyOn(ev, 'stopPropagation')
-    component.missingWorkspaceRoles = true
-    component.currentApp.workspaceDetails = wsDetails
+    it('should display error msg if create role fails', () => {
+      roleApiSpy.createRole.and.returnValue(throwError(() => new Error()))
+      const ev = new MouseEvent('click')
+      spyOn(ev, 'stopPropagation')
+      component.missingWorkspaceRoles = true
+      component.currentApp.workspaceDetails = wsDetails
 
-    component.onCreateWorkspaceRoles(ev)
+      component.onCreateWorkspaceRoles(ev)
 
-    expect(ev.stopPropagation).toHaveBeenCalled()
-    expect(msgServiceSpy.error).toHaveBeenCalledWith({ summaryKey: 'ACTIONS.ROLE.MESSAGE.WORKSPACE_ROLES_NOK' })
+      expect(ev.stopPropagation).toHaveBeenCalled()
+      expect(msgServiceSpy.error).toHaveBeenCalledWith({ summaryKey: 'ACTIONS.ROLE.MESSAGE.WORKSPACE_ROLES_NOK' })
+    })
   })
 
   /**
@@ -498,7 +495,7 @@ describe('AppDetailComponent', () => {
   it('should handle loading role assignments without apps', () => {
     component.urlParamAppType = 'WORKSPACE'
     spyOn(console, 'warn')
-    component['productApps'] = []
+    component.productApps = []
 
     component['loadRoleAssignments'](true)
 
@@ -506,7 +503,7 @@ describe('AppDetailComponent', () => {
   })
 
   it('should search assigments', () => {
-    component['searchAssignments'](true, ['appId'])
+    component['searchAssignments'](true, ['appId1'])
 
     expect(component.protectedAssignments.length).toBe(1)
   })
@@ -519,7 +516,7 @@ describe('AppDetailComponent', () => {
     })
     assApiSpy.searchAssignments.and.returnValue(throwError(() => err))
 
-    component['searchAssignments'](true, ['appId'])
+    component['searchAssignments'](true, ['appId1'])
 
     expect(component.loadingExceptionKey).toBe('EXCEPTIONS.HTTP_STATUS_' + err.status + '.ASSIGNMENTS')
   })
@@ -536,243 +533,305 @@ describe('AppDetailComponent', () => {
   /*
    * Table Filter
    */
-  it('should set filterMode to CONTAINS when mode is "="', () => {
-    component.onFilterModeChange('=')
+  describe('table global filter', () => {
+    it('should set filterMode to CONTAINS when mode is "="', () => {
+      component.onFilterModeChange('=')
 
-    expect(component.filterMode).toBe(FilterMatchMode.CONTAINS)
-  })
+      expect(component.filterMode).toBe(FilterMatchMode.CONTAINS)
+    })
 
-  it('should set filterMode to NOT_CONTAINS when mode is "!="', () => {
-    component.onFilterModeChange('!=')
+    it('should set filterMode to NOT_CONTAINS when mode is "!="', () => {
+      component.onFilterModeChange('!=')
 
-    expect(component.filterMode).toBe(FilterMatchMode.NOT_CONTAINS)
-  })
+      expect(component.filterMode).toBe(FilterMatchMode.NOT_CONTAINS)
+    })
 
-  it('should not change filterMode when mode is undefined', () => {
-    component.filterMode = FilterMatchMode.CONTAINS
+    it('should not change filterMode when mode is undefined', () => {
+      component.filterMode = FilterMatchMode.CONTAINS
 
-    component.onFilterModeChange(undefined)
+      component.onFilterModeChange(undefined)
 
-    expect(component.filterMode).toBe(FilterMatchMode.CONTAINS)
-  })
+      expect(component.filterMode).toBe(FilterMatchMode.CONTAINS)
+    })
 
-  it('should call tableFilter with the input value', () => {
-    spyOn(component, 'tableFilter')
-    component.permissionTableFilterInput = { nativeElement: { value: 'test' } }
-    component.permissionTable = { filterGlobal: jasmine.createSpy() } as unknown as Table
+    it('should call tableFilter with the input value', () => {
+      spyOn(component, 'tableFilter')
+      component.permissionTableFilterInput = { nativeElement: { value: 'test' } }
+      component.permissionTable = { filterGlobal: jasmine.createSpy() } as unknown as Table
 
-    component.onFilterModeChange('=')
+      component.onFilterModeChange('=')
 
-    expect(component.filterValue).toBe('test')
-    expect(component.tableFilter).toHaveBeenCalledWith('test')
-  })
+      expect(component.filterValue).toBe('test')
+      expect(component.tableFilter).toHaveBeenCalledWith('test')
+    })
 
-  it('should not call tableFilter when permissionTableFilterInput is not present', () => {
-    spyOn(component, 'tableFilter')
-    component.permissionTable = { filterGlobal: jasmine.createSpy() } as unknown as Table
+    it('should not call tableFilter when permissionTableFilterInput is not present', () => {
+      spyOn(component, 'tableFilter')
+      component.permissionTable = { filterGlobal: jasmine.createSpy() } as unknown as Table
 
-    component.onFilterModeChange('=')
+      component.onFilterModeChange('=')
 
-    expect(component.tableFilter).not.toHaveBeenCalled()
-  })
+      expect(component.tableFilter).not.toHaveBeenCalled()
+    })
 
-  it('should set filterBy correctly and filterValue to an empty string when "ALL" is selected', () => {
-    component.onQuickFilterChange({ value: 'ALL' })
+    it('should set filterBy correctly and filterValue to an empty string when "ALL" is selected', () => {
+      component.onQuickFilterChange({ value: 'ALL' })
 
-    expect(component.filterBy).toEqual(['action', 'resource'])
-    expect(component.filterValue).toBe('')
-  })
+      expect(component.filterBy).toEqual(['action', 'resource'])
+      expect(component.filterValue).toBe('')
+    })
 
-  it('should set filterBy correctly and filterValue to quick filter value ', () => {
-    component.onQuickFilterChange({ value: 'VIEW' })
+    it('should set filterBy correctly and filterValue to quick filter value ', () => {
+      component.onQuickFilterChange({ value: 'VIEW' })
 
-    expect(component.filterBy).toEqual(['action'])
-    expect(component.filterValue).toBe('VIEW')
-  })
+      expect(component.filterBy).toEqual(['action'])
+      expect(component.filterValue).toBe('VIEW')
+    })
 
-  it('should set the permissionTableFilterInput value and call tableFilter', () => {
-    spyOn(component, 'tableFilter')
-    component.permissionTableFilterInput = { nativeElement: { value: '' } }
-    component.permissionTable = { filterGlobal: jasmine.createSpy() } as unknown as Table
+    it('should set the permissionTableFilterInput value and call tableFilter', () => {
+      spyOn(component, 'tableFilter')
+      component.permissionTableFilterInput = { nativeElement: { value: '' } }
+      component.permissionTable = { filterGlobal: jasmine.createSpy() } as unknown as Table
 
-    component.onQuickFilterChange({ value: 'ALL' })
+      component.onQuickFilterChange({ value: 'ALL' })
 
-    expect(component.permissionTableFilterInput.nativeElement.value).toBe('')
-    expect(component.tableFilter).toHaveBeenCalledWith('')
-  })
+      expect(component.permissionTableFilterInput.nativeElement.value).toBe('')
+      expect(component.tableFilter).toHaveBeenCalledWith('')
+    })
 
-  it('should call filterGlobal on permissionTable with the provided value and filterMode', () => {
-    component.permissionTable = { filterGlobal: jasmine.createSpy() } as unknown as Table
-    component.filterMode = 'mode'
+    it('should call filterGlobal on permissionTable with the provided value and filterMode', () => {
+      component.permissionTable = { filterGlobal: jasmine.createSpy() } as unknown as Table
+      component.filterMode = 'mode'
 
-    component.tableFilter('testValue')
+      component.tableFilter('testValue')
 
-    expect(component.permissionTable.filterGlobal).toHaveBeenCalledWith('testValue', 'mode')
-  })
+      expect(component.permissionTable.filterGlobal).toHaveBeenCalledWith('testValue', 'mode')
+    })
 
-  it('should clear all clear all values onClearTableFilter', () => {
-    component.permissionTableFilterInput = { nativeElement: { value: 'value' } }
-    component.quickFilterValue = 'ALL'
-    component.filterAppValue = 'value'
-    component.permissionTable = { clear: jasmine.createSpy() } as unknown as Table
-    spyOn(component, 'onSortPermissionTable')
+    it('should clear all clear all values onClearTableFilter', () => {
+      component.permissionTableFilterInput = { nativeElement: { value: 'value' } }
+      component.quickFilterValue = 'ALL'
+      component.filterAppValue = 'value'
+      component.permissionTable = { clear: jasmine.createSpy() } as unknown as Table
+      spyOn(component, 'onSortPermissionTable')
 
-    component.onClearTableFilter()
+      component.onClearTableFilter()
 
-    expect(component.permissionTableFilterInput.nativeElement.value).toBe('')
-    expect(component.quickFilterValue).toBe('ALL')
-    expect(component.filterAppValue).toBeUndefined()
-    expect(component.onSortPermissionTable).toHaveBeenCalled()
-    expect(component.permissionTable.clear).toHaveBeenCalled()
-  })
+      expect(component.permissionTableFilterInput.nativeElement.value).toBe('')
+      expect(component.quickFilterValue).toBe('ALL')
+      expect(component.filterAppValue).toBeUndefined()
+      expect(component.onSortPermissionTable).toHaveBeenCalled()
+      expect(component.permissionTable.clear).toHaveBeenCalled()
+    })
 
-  it('should reset icons onSortPermissionTables', () => {
-    component.sortIconAppId = { nativeElement: { className: 'oldClassName' } }
-    component.sortIconProduct = { nativeElement: { className: 'oldClassName' } }
+    it('should reset icons onSortPermissionTables', () => {
+      component.sortIconAppId = { nativeElement: { className: 'oldClassName' } }
+      component.sortIconProduct = { nativeElement: { className: 'oldClassName' } }
 
-    component.onSortPermissionTable()
+      component.onSortPermissionTable()
 
-    expect(component.sortIconAppId.nativeElement.className).toBe('pi pi-fw pi-sort-alt')
-    expect(component.sortIconProduct.nativeElement.className).toBe('pi pi-fw pi-sort-alt')
+      expect(component.sortIconAppId.nativeElement.className).toBe('pi pi-fw pi-sort-alt')
+      expect(component.sortIconProduct.nativeElement.className).toBe('pi pi-fw pi-sort-alt')
+    })
   })
 
   /**
    * Filter: Product, AppId
    */
-  it('should set icon class and sort by descending when icon class is "sort-alt"', () => {
-    const event = new MouseEvent('click')
-    const icon = document.createElement('span')
-    icon.className = 'pi pi-fw pi-sort-alt'
+  describe('table column sorting', () => {
+    it('should set icon class and sort by descending when icon class is "sort-alt"', () => {
+      const event = new MouseEvent('click')
+      const icon = document.createElement('span')
+      icon.className = 'pi pi-fw pi-sort-alt'
+
+      spyOn(event, 'stopPropagation')
+      component.permissionTable = {
+        clear: jasmine.createSpy(),
+        _value: [permRow, permRow2],
+        filterGlobal: jasmine.createSpy()
+      } as unknown as Table
+
+      component.onFilterItemSortIcon(event, icon, 'appId')
+
+      expect(event.stopPropagation).toHaveBeenCalled()
+      expect(component.permissionTable.clear).toHaveBeenCalled()
+      expect(icon.className).toBe('pi pi-fw pi-sort-amount-down')
+    })
 
-    spyOn(event, 'stopPropagation')
-    component.permissionTable = {
-      clear: jasmine.createSpy(),
-      _value: [permRow, permRow2],
-      filterGlobal: jasmine.createSpy()
-    } as unknown as Table
+    it('should set icon class sort by ascending when icon class is "sort-amount-down"', () => {
+      const event = new MouseEvent('click')
+      const icon = document.createElement('span')
+      icon.className = 'pi pi-fw pi-sort-amount-down'
 
-    component.onFilterItemSortIcon(event, icon, 'appId')
+      spyOn(event, 'stopPropagation')
+      component.permissionTable = {
+        clear: jasmine.createSpy(),
+        _value: [permRow, permRow2],
+        filterGlobal: jasmine.createSpy()
+      } as unknown as Table
 
-    expect(event.stopPropagation).toHaveBeenCalled()
-    expect(component.permissionTable.clear).toHaveBeenCalled()
-    expect(icon.className).toBe('pi pi-fw pi-sort-amount-down')
-  })
+      component.onFilterItemSortIcon(event, icon, 'appId')
 
-  it('should set icon class sort by ascending when icon class is "sort-amount-down"', () => {
-    const event = new MouseEvent('click')
-    const icon = document.createElement('span')
-    icon.className = 'pi pi-fw pi-sort-amount-down'
+      expect(event.stopPropagation).toHaveBeenCalled()
+      expect(component.permissionTable.clear).toHaveBeenCalled()
+      expect(icon.className).toBe('pi pi-fw pi-sort-amount-up-alt')
+    })
 
-    spyOn(event, 'stopPropagation')
-    component.permissionTable = {
-      clear: jasmine.createSpy(),
-      _value: [permRow, permRow2],
-      filterGlobal: jasmine.createSpy()
-    } as unknown as Table
+    it('should set icon class and sort by descending when icon class is "sort-amount-up-alt"', () => {
+      const event = new MouseEvent('click')
+      const icon = document.createElement('span')
+      icon.className = 'pi pi-fw pi-sort-amount-up-alt'
 
-    component.onFilterItemSortIcon(event, icon, 'appId')
+      spyOn(event, 'stopPropagation')
+      component.permissionTable = {
+        clear: jasmine.createSpy(),
+        _value: [permRow, permRow2],
+        filterGlobal: jasmine.createSpy()
+      } as unknown as Table
 
-    expect(event.stopPropagation).toHaveBeenCalled()
-    expect(component.permissionTable.clear).toHaveBeenCalled()
-    expect(icon.className).toBe('pi pi-fw pi-sort-amount-up-alt')
-  })
+      component.onFilterItemSortIcon(event, icon, 'appId')
 
-  it('should set icon class and sort by descending when icon class is "sort-amount-up-alt"', () => {
-    const event = new MouseEvent('click')
-    const icon = document.createElement('span')
-    icon.className = 'pi pi-fw pi-sort-amount-up-alt'
+      expect(event.stopPropagation).toHaveBeenCalled()
+      expect(component.permissionTable.clear).toHaveBeenCalled()
+      expect(icon.className).toBe('pi pi-fw pi-sort-amount-down')
+    })
 
-    spyOn(event, 'stopPropagation')
-    component.permissionTable = {
-      clear: jasmine.createSpy(),
-      _value: [permRow, permRow2],
-      filterGlobal: jasmine.createSpy()
-    } as unknown as Table
+    /* same tests for sortByProduct */
+    it('should set icon class and sort by descending when icon class is "sort-alt"', () => {
+      const event = new MouseEvent('click')
+      const icon = document.createElement('span')
+      icon.className = 'pi pi-fw pi-sort-alt'
 
-    component.onFilterItemSortIcon(event, icon, 'appId')
+      spyOn(event, 'stopPropagation')
+      component.permissionTable = {
+        clear: jasmine.createSpy(),
+        _value: [permRow, permRow2],
+        filterGlobal: jasmine.createSpy()
+      } as unknown as Table
 
-    expect(event.stopPropagation).toHaveBeenCalled()
-    expect(component.permissionTable.clear).toHaveBeenCalled()
-    expect(icon.className).toBe('pi pi-fw pi-sort-amount-down')
-  })
+      component.onFilterItemSortIcon(event, icon, 'prodName')
 
-  /* same tests for sortByProduct */
-  it('should set icon class and sort by descending when icon class is "sort-alt"', () => {
-    const event = new MouseEvent('click')
-    const icon = document.createElement('span')
-    icon.className = 'pi pi-fw pi-sort-alt'
+      expect(event.stopPropagation).toHaveBeenCalled()
+      expect(component.permissionTable.clear).toHaveBeenCalled()
+      expect(icon.className).toBe('pi pi-fw pi-sort-amount-down')
+    })
 
-    spyOn(event, 'stopPropagation')
-    component.permissionTable = {
-      clear: jasmine.createSpy(),
-      _value: [permRow, permRow2],
-      filterGlobal: jasmine.createSpy()
-    } as unknown as Table
+    it('should set icon class sort by ascending when icon class is "sort-amount-down"', () => {
+      const event = new MouseEvent('click')
+      const icon = document.createElement('span')
+      icon.className = 'pi pi-fw pi-sort-amount-down'
 
-    component.onFilterItemSortIcon(event, icon, 'product')
+      spyOn(event, 'stopPropagation')
+      component.permissionTable = {
+        clear: jasmine.createSpy(),
+        _value: [permRow, permRow2],
+        filterGlobal: jasmine.createSpy()
+      } as unknown as Table
 
-    expect(event.stopPropagation).toHaveBeenCalled()
-    expect(component.permissionTable.clear).toHaveBeenCalled()
-    expect(icon.className).toBe('pi pi-fw pi-sort-amount-down')
-  })
+      component.onFilterItemSortIcon(event, icon, 'prodName')
 
-  it('should set icon class sort by ascending when icon class is "sort-amount-down"', () => {
-    const event = new MouseEvent('click')
-    const icon = document.createElement('span')
-    icon.className = 'pi pi-fw pi-sort-amount-down'
+      expect(event.stopPropagation).toHaveBeenCalled()
+      expect(component.permissionTable.clear).toHaveBeenCalled()
+      expect(icon.className).toBe('pi pi-fw pi-sort-amount-up-alt')
+    })
 
-    spyOn(event, 'stopPropagation')
-    component.permissionTable = {
-      clear: jasmine.createSpy(),
-      _value: [permRow, permRow2],
-      filterGlobal: jasmine.createSpy()
-    } as unknown as Table
+    it('should set icon class and sort by descending when icon class is "sort-amount-up-alt"', () => {
+      const event = new MouseEvent('click')
+      const icon = document.createElement('span')
+      icon.className = 'pi pi-fw pi-sort-amount-up-alt'
 
-    component.onFilterItemSortIcon(event, icon, 'product')
+      spyOn(event, 'stopPropagation')
+      component.permissionTable = {
+        clear: jasmine.createSpy(),
+        _value: [permRow, permRow2],
+        filterGlobal: jasmine.createSpy()
+      } as unknown as Table
 
-    expect(event.stopPropagation).toHaveBeenCalled()
-    expect(component.permissionTable.clear).toHaveBeenCalled()
-    expect(icon.className).toBe('pi pi-fw pi-sort-amount-up-alt')
+      component.onFilterItemSortIcon(event, icon, 'prodName')
+
+      expect(event.stopPropagation).toHaveBeenCalled()
+      expect(component.permissionTable.clear).toHaveBeenCalled()
+      expect(icon.className).toBe('pi pi-fw pi-sort-amount-down')
+    })
   })
 
-  it('should set icon class and sort by descending when icon class is "sort-amount-up-alt"', () => {
-    const event = new MouseEvent('click')
-    const icon = document.createElement('span')
-    icon.className = 'pi pi-fw pi-sort-amount-up-alt'
+  describe('table column filtering', () => {
+    it('should clear filter', () => {
+      component.permissionTable = { filter: jasmine.createSpy() } as unknown as Table
 
-    spyOn(event, 'stopPropagation')
-    component.permissionTable = {
-      clear: jasmine.createSpy(),
-      _value: [permRow, permRow2],
-      filterGlobal: jasmine.createSpy()
-    } as unknown as Table
+      component.onFilterItemClearAppId()
 
-    component.onFilterItemSortIcon(event, icon, 'product')
+      expect(component.filterAppValue).toBeUndefined()
+      expect(component.permissionTable.filter).toHaveBeenCalledWith(undefined, 'appId', 'notEquals')
+    })
 
-    expect(event.stopPropagation).toHaveBeenCalled()
-    expect(component.permissionTable.clear).toHaveBeenCalled()
-    expect(icon.className).toBe('pi pi-fw pi-sort-amount-down')
-  })
+    it('should set filterProductValue and filterAppValue, call filter on permissionTable with "notEquals" and "equals", and call prepareFilterApps', () => {
+      const event = { value: 'prodName1' }
 
-  it('should clear filter', () => {
-    component.permissionTable = { filter: jasmine.createSpy() } as unknown as Table
+      component.ngOnInit()
+      expect(component.roles.length).toBe(2)
+      expect(component.permissions.length).toBe(2)
+      expect(component.permissionRows.length).toBe(2)
+      // component.permissionRows => permPageRes
 
-    component.onFilterItemClearAppId()
+      component.permissionTable = { filter: jasmine.createSpy(), value: component.permissionRows } as unknown as Table
 
-    expect(component.filterAppValue).toBeUndefined()
-    expect(component.permissionTable.filter).toHaveBeenCalledWith(undefined, 'appId', 'notEquals')
-  })
+      component.onFilterItemChangeProduct(event)
 
-  it('should set filterProductValue and filterAppValue, call filter on permissionTable with "notEquals" and "equals", and call prepareFilterApps', () => {
-    const event = { value: 'someProduct' }
-    component.permissionTable = { filter: jasmine.createSpy() } as unknown as Table
+      expect(component.filterProductValue).toBe(event.value)
+      expect(component.filterAppValue).toBeUndefined()
+      expect(component.permissionTable.filter).toHaveBeenCalledWith(undefined, 'appId', 'notEquals')
+      expect(component.permissionTable.filter).toHaveBeenCalledWith(event.value, 'productName', 'equals')
+    })
+
+    it('should reset filterProductValue and filterAppValue, call filter on permissionTable with "notEquals" and "equals", and call prepareFilterApps', () => {
+      const event = { value: '' }
+      component.permissionTable = { filter: jasmine.createSpy() } as unknown as Table
 
-    component.onFilterItemChangeProduct(event)
+      component.ngOnInit()
+      component.onFilterItemChangeProduct(event)
 
-    expect(component.filterProductValue).toBe('someProduct')
-    expect(component.filterAppValue).toBeUndefined()
-    expect(component.permissionTable.filter).toHaveBeenCalledWith(undefined, 'appId', 'notEquals')
-    expect(component.permissionTable.filter).toHaveBeenCalledWith('someProduct', 'productName', 'equals')
+      expect(component.filterProductValue).toBe(event.value)
+      expect(component.filterAppValue).toBeUndefined()
+      expect(component.permissionTable.filter).toHaveBeenCalledWith(undefined, 'appId', 'notEquals')
+      expect(component.permissionTable.filter).toHaveBeenCalledWith(event.value, 'productName', 'equals')
+    })
+
+    it('should filter apps from permissions for the selected product', () => {
+      const loadedApp: App = { ...app1, appType: 'PRODUCT', isProduct: true }
+      loadedApp.name = loadedApp.productName // is a product
+      component.urlParamAppId = app1.name!
+      component.urlParamAppType = loadedApp.appType
+
+      component.ngOnInit()
+      expect(component.currentApp).toEqual(loadedApp)
+
+      expect(component.roles.length).toBe(2)
+      expect(component.permissions.length).toBe(2)
+      expect(component.permissions).toEqual([
+        { id: 'permId1', appId: 'appId1', productName: 'prodName1', mandatory: false },
+        { id: 'permId2', appId: 'appId2', productName: 'prodName2' }
+      ])
+      // component.permissionRows => permPageRes
+      expect(component.permissionRows.length).toBe(2)
+
+      expect(component.productApps.length).toBe(2)
+      expect(component.productApps).toEqual([
+        { name: 'appName1', appId: 'appId1', productName: 'prodName1' } as App,
+        { name: 'appName2', appId: 'appId2', productName: 'prodName1' } as App
+      ])
+      expect(loadedApp.productName).toEqual('prodName1')
+
+      component.prepareFilterApps()
+      expect(component.filterAppItems.length).toBe(2)
+      expect(component.filterAppItems).toEqual([
+        { label: 'appId2', value: 'appId2' },
+        { label: 'appName1', value: 'appId1' }
+      ])
+
+      component.prepareFilterApps('prodName2')
+      expect(component.filterAppItems.length).toBe(1)
+    })
   })
 
   /*
@@ -820,8 +879,8 @@ describe('AppDetailComponent', () => {
     expect(component.role).toBeUndefined()
     expect(component.permission).toBeUndefined()
     expect(component.changeMode).toBe('VIEW')
-    expect(component.showPermissionDetailDialog).toBeFalse()
-    expect(component.showPermissionDeleteDialog).toBeFalse()
+    expect(component.displayPermissionDetailDialog).toBeFalse()
+    expect(component.displayPermissionDeleteDialog).toBeFalse()
     expect(component.showRoleDetailDialog).toBeFalse()
     expect(component.showRoleDeleteDialog).toBeFalse()
   })
@@ -849,7 +908,7 @@ describe('AppDetailComponent', () => {
     expect(event.stopPropagation).toHaveBeenCalled()
     expect(component.role).toBeUndefined()
     expect(component.changeMode).toBe('CREATE')
-    expect(component.showPermissionDetailDialog).toBeTrue()
+    expect(component.displayPermissionDetailDialog).toBeTrue()
   })
 
   it('should call stopPropagation and set permission onDetailPermission', () => {
@@ -861,7 +920,7 @@ describe('AppDetailComponent', () => {
     expect(event.stopPropagation).toHaveBeenCalled()
     expect(component.permission).toBe(permRow)
     expect(component.changeMode).toBe('EDIT')
-    expect(component.showPermissionDetailDialog).toBeTrue()
+    expect(component.displayPermissionDetailDialog).toBeTrue()
   })
 
   it('should set changeMode according to operator onDetailPermission', () => {
@@ -872,8 +931,11 @@ describe('AppDetailComponent', () => {
 
     expect(event.stopPropagation).toHaveBeenCalled()
     expect(component.permission).toBe(permRow)
-    expect(component.changeMode).toBe('EDIT')
-    expect(component.showPermissionDetailDialog).toBeTrue()
+    expect(component.changeMode).toBe('EDIT') //   mandatory: false
+    expect(component.displayPermissionDetailDialog).toBeTrue()
+
+    component.onDetailPermission(event, { ...permRow, mandatory: true })
+    expect(component.changeMode).toBe('VIEW')
   })
 
   it('should call stopPropagation and set permission in onDeletePermission', () => {
@@ -885,7 +947,7 @@ describe('AppDetailComponent', () => {
     expect(event.stopPropagation).toHaveBeenCalled()
     expect(component.permission).toBe(permRow)
     expect(component.changeMode).toBe('DELETE')
-    expect(component.showPermissionDeleteDialog).toBeTrue()
+    expect(component.displayPermissionDeleteDialog).toBeTrue()
   })
 
   /****************************************************************************
@@ -928,7 +990,7 @@ describe('AppDetailComponent', () => {
 
   it('should grant all permissions: assign all perms of an app to a role', () => {
     const ev = new MouseEvent('click')
-    component.filterAppValue = 'appId'
+    component.filterAppValue = 'appId1'
 
     component.ngOnInit()
     component.onGrantAllPermissions(ev, role1)
@@ -939,7 +1001,7 @@ describe('AppDetailComponent', () => {
   it('should display error when trying to grant all permissions: assign all perms of an app to a role', () => {
     assApiSpy.grantRoleApplicationAssignments.and.returnValue(throwError(() => new Error()))
     const ev = new MouseEvent('click')
-    component.filterAppValue = 'appId'
+    component.filterAppValue = 'appId1'
 
     component.ngOnInit()
     component.onGrantAllPermissions(ev, role1)
@@ -979,7 +1041,7 @@ describe('AppDetailComponent', () => {
 
   it('should revoke all permissions: remove all perms of an app to a role', () => {
     const ev = new MouseEvent('click')
-    component.filterAppValue = 'appId'
+    component.filterAppValue = 'appId1'
 
     component.ngOnInit()
     component.onRevokeAllPermissions(ev, role1)
@@ -990,7 +1052,7 @@ describe('AppDetailComponent', () => {
   it('should display error when trying to revoke all permissions: remove all perms of an app to a role', () => {
     assApiSpy.revokeRoleApplicationAssignments.and.returnValue(throwError(() => new Error()))
     const ev = new MouseEvent('click')
-    component.filterAppValue = 'appId'
+    component.filterAppValue = 'appId1'
 
     component.ngOnInit()
     component.onRevokeAllPermissions(ev, role1)
@@ -1021,7 +1083,7 @@ describe('AppDetailComponent', () => {
 
   it('should revoke all permissions: remove all assgnmts of all apps of a product to a role - case 2b) in a workspace for all products', () => {
     component.filterProductItems = [
-      { label: 'prodName', value: 'prodName' },
+      { label: 'prodName1', value: 'prodName1' },
       { label: 'prodName2', value: 'prodName2' }
     ]
     component.filterProductValue = undefined
@@ -1029,7 +1091,7 @@ describe('AppDetailComponent', () => {
 
     const res = component['prepareProductListForBulkOperation']()
 
-    expect(res).toEqual(['prodName', 'prodName2'])
+    expect(res).toEqual(['prodName1', 'prodName2'])
   })
 
   it('should display error when trying to revoke all permissions: remove all assgmts of all apps of a product to a role', () => {
@@ -1064,16 +1126,16 @@ describe('AppDetailComponent', () => {
       key: 'key',
       roles: { undefined },
       appType: 'MFE',
-      appDisplayName: 'appName',
-      productDisplayName: 'prodName'
+      appDisplayName: 'appName1',
+      productDisplayName: 'prodName1'
     }
     const permRow4: PermissionViewRow = {
       ...perm3,
       key: 'key',
       roles: { undefined },
       appType: 'MFE',
-      appDisplayName: 'appName',
-      productDisplayName: 'prodName'
+      appDisplayName: 'appName1',
+      productDisplayName: 'prodName1'
     }
     const resultAppAsc = (component as any).sortPermissionRowByAppIdAsc(permRow3, permRow4)
     expect(resultAppAsc).toBe(0)
@@ -1109,14 +1171,6 @@ describe('AppDetailComponent', () => {
     expect(component.dateFormat).toEqual('dd.MM.yyyy HH:mm')
   })
 
-  xit('should call this.user.lang$ from the constructor and set this.dateFormat to the correct format if user.lang$ de', () => {
-    const perm = mockUserService.hasPermission.and.returnValue(true)
-    fixture = TestBed.createComponent(AppDetailComponent)
-    component = fixture.componentInstance
-    fixture.detectChanges()
-    expect(perm).toBeTrue()
-  })
-
   describe('Test translations', () => {
     it('should translate quick filter items', () => {
       component.prepareQuickFilterItems()
diff --git a/src/app/permission/app-detail/app-detail.component.ts b/src/app/permission/app-detail/app-detail.component.ts
index dda4412..d3352e4 100644
--- a/src/app/permission/app-detail/app-detail.component.ts
+++ b/src/app/permission/app-detail/app-detail.component.ts
@@ -92,7 +92,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
   public filterProductValue: string | undefined = undefined
   public filterAppItems!: SelectItem[]
   public filterAppValue: string | undefined = undefined
-  private productApps: App[] = []
+  public productApps: App[] = []
   public productNames: string[] = []
   public listedProductsHeader: string = ''
 
@@ -103,16 +103,18 @@ export class AppDetailComponent implements OnInit, OnDestroy {
   public permissionRows!: PermissionViewRow[]
   public permissionRow: PermissionViewRow | undefined // working row
   public permissionDefaultRoles: RoleAssignments = {} // used initially on row creation
-  public showPermissionDetailDialog = false
-  public showPermissionDeleteDialog = false
-  public displayExportDialog = false
+  public displayPermissionDetailDialog = false
+  public displayPermissionDeleteDialog = false
+  public displayPermissionExportDialog = false
+  public displayAdditionalRowData = false
   public showPermissionTools = false
   public protectedAssignments: Array<string> = []
 
   // role management
   private roles$!: Observable<RolePageResult>
-  public roles!: PermissionRole[]
+  public roles: PermissionRole[] = []
   public role: Role | undefined
+  public rolesFiltered: PermissionRole[] = []
   public missingWorkspaceRoles = false
   public showRoleDetailDialog = false
   public showRoleDeleteDialog = false
@@ -261,7 +263,11 @@ export class AppDetailComponent implements OnInit, OnDestroy {
       this.productNames = [this.currentApp.name!]
       this.listedProductsHeader = 'ACTIONS.EXPORT.OF_APPLICATION'
     }
-    this.displayExportDialog = true
+    this.displayPermissionExportDialog = true
+  }
+  public onRoleFilterChange(val: string): void {
+    if (this.rolesFiltered && this.roles.length > 0)
+      this.rolesFiltered = this.roles.filter((r) => r.name!.indexOf(val) >= 0)
   }
 
   private loadData(): void {
@@ -343,7 +349,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
   /**
    * COLUMNS => Roles, ROWS => Permissions
    */
-  private searchRoles(): Observable<Role[]> {
+  private searchRoles(): Observable<PermissionRole[]> {
     this.roles$ = this.roleApi.searchRoles({ roleSearchCriteria: {} }).pipe(
       catchError((err) => {
         this.loadingExceptionKey = 'EXCEPTIONS.HTTP_STATUS_' + err.status + '.ROLES'
@@ -354,22 +360,17 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     )
     return this.roles$.pipe(
       map((result: any) => {
-        return result.stream
-          ? result.stream?.map((role: PermissionRole) => {
-              this.roles.push(role)
-              return role
-            })
-          : []
+        return result.stream ? result.stream?.map((role: PermissionRole) => role) : []
       })
     )
   }
   private searchPermissions(): Observable<Permission[]> {
     const productNames: string[] = []
     if (this.currentApp.isProduct) {
-      productNames.push(this.currentApp.productName ?? '')
+      productNames.push(this.currentApp.productName!)
     } else
       this.currentApp.workspaceDetails?.products?.map((p) => {
-        productNames.push(p.productName ?? '')
+        productNames.push(p.productName!)
       })
     this.permissions$ = this.permApi
       .searchPermissions({
@@ -387,39 +388,36 @@ export class AppDetailComponent implements OnInit, OnDestroy {
       )
     return this.permissions$.pipe(
       map((result: any) => {
-        return result.stream
-          ? result.stream?.map((perm: Permission) => {
-              this.permissions.push(perm)
-              return perm
-            })
-          : []
+        return result.stream ?? []
       })
     )
   }
+
   private loadRolesAndPermissions(): void {
     this.roles = []
     this.permissions = []
-    combineLatest([this.searchRoles(), this.searchPermissions()]).subscribe(
-      () => {}, // next
-      () => {}, // error
-      () => {
-        this.checkWorkspaceRoles()
-        this.roles.sort(this.sortRoleByName)
-        this.prepareFilterProducts()
-        this.prepareFilterApps()
-        this.preparePermissionTable()
-      }
-    )
+    combineLatest([this.searchRoles(), this.searchPermissions()]).subscribe(([roles, permissions]) => {
+      // filter
+      this.prepareFilterProducts()
+      this.prepareFilterApps()
+      // roles
+      this.roles = roles
+      this.roles.sort(this.sortRoleByName)
+      this.rolesFiltered = this.roles
+      this.checkWorkspaceRoles(roles)
+      // permissions
+      this.permissions = permissions
+      this.preparePermissionTable(permissions) // including sort
+    })
   }
+
   // does the workspace have roles which are not exist in permission product?
-  private checkWorkspaceRoles() {
+  private checkWorkspaceRoles(roles: PermissionRole[]) {
     if (this.currentApp.isProduct) return
     if (this.currentApp.workspaceDetails?.workspaceRoles) {
-      this.roles.forEach(
-        (r) => (r.isWorkspaceRole = this.currentApp.workspaceDetails?.workspaceRoles?.includes(r.name!))
-      )
+      roles.forEach((r) => (r.isWorkspaceRole = this.currentApp.workspaceDetails?.workspaceRoles?.includes(r.name!)))
       this.missingWorkspaceRoles =
-        this.roles.filter((r) => r.isWorkspaceRole === true).length !==
+        roles.filter((r) => r.isWorkspaceRole === true).length !==
         this.currentApp.workspaceDetails?.workspaceRoles.length
     }
   }
@@ -464,10 +462,11 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     }
   }
 
-  private prepareFilterApps(selectedProductName?: string) {
+  public prepareFilterApps(selectedProductName?: string) {
     this.filterAppItems = []
     // 1. load from permisions
     this.permissions
+      // if no product is selected then exclude filtering
       .filter((p) => p.productName === (selectedProductName ?? p.productName))
       .forEach((p) => {
         if (this.filterAppItems.filter((item) => item.value === p.appId).length === 0) {
@@ -492,13 +491,13 @@ export class AppDetailComponent implements OnInit, OnDestroy {
    *    key (resource#action):   'PERMISSION#READ'
    *    value: {resource: 'PERMISSION', action: 'READ', key: 'PERMISSION#READ', name: 'View permission matrix'
    */
-  private preparePermissionTable(): void {
-    if (this.permissions.length === 0) {
+  private preparePermissionTable(permissions: Permission[]): void {
+    if (permissions.length === 0) {
       console.warn('No permissions found for the apps - stop processing')
       return
     }
     this.permissionRows = []
-    for (const perm of this.permissions) {
+    for (const perm of permissions) {
       const products = this.filterProductItems.filter((p) => p.value === perm.productName)
       const label = products.length > 0 ? products[0].label : perm.productName
       const apps = this.filterAppItems.filter((p) => p.value === perm.appId)
@@ -673,8 +672,8 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     this.role = undefined
     this.permission = undefined
     this.changeMode = 'VIEW'
-    this.showPermissionDetailDialog = false
-    this.showPermissionDeleteDialog = false
+    this.displayPermissionDetailDialog = false
+    this.displayPermissionDeleteDialog = false
     this.showRoleDetailDialog = false
     this.showRoleDeleteDialog = false
     this.showIamRolesDialog = false
@@ -696,19 +695,19 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     ev?.stopPropagation()
     this.role = undefined
     this.changeMode = 'CREATE'
-    this.showPermissionDetailDialog = true
+    this.displayPermissionDetailDialog = true
   }
   public onDetailPermission(ev: MouseEvent, perm: PermissionViewRow): void {
     ev.stopPropagation()
     this.permission = perm
     this.changeMode = this.permission.mandatory ? 'VIEW' : 'EDIT'
-    this.showPermissionDetailDialog = true
+    this.displayPermissionDetailDialog = true
   }
   public onDeletePermission(ev: MouseEvent, perm: PermissionViewRow): void {
     ev.stopPropagation()
     this.permission = perm
     this.changeMode = 'DELETE'
-    this.showPermissionDeleteDialog = true
+    this.displayPermissionDeleteDialog = true
   }
 
   /****************************************************************************
@@ -828,9 +827,9 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     // case 1: APP filter value =>
     if (this.filterAppValue) {
       const apps = this.productApps.filter((p) => p.appId === this.filterAppValue)
-      if (apps.length === 1) pList.push(apps[0].productName ?? '')
+      if (apps.length === 1) pList.push(apps[0].productName!)
       // case 2: PRODUCT
-    } else if (this.currentApp.isProduct) pList.push(this.currentApp.productName ?? '')
+    } else if (this.currentApp.isProduct) pList.push(this.currentApp.productName!)
     // case 3: WORKSPACE
     //      a) selected product
     else if (this.filterProductValue) pList.push(this.filterProductValue)
@@ -876,7 +875,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     )
   }
 
-  private sortRoleByName(a: Role, b: Role): number {
+  private sortRoleByName(a: PermissionRole, b: PermissionRole): number {
     return (a.name ? a.name.toUpperCase() : '').localeCompare(b.name ? b.name.toUpperCase() : '')
   }
 }
diff --git a/src/app/permission/permission-detail/permission-detail.component.html b/src/app/permission/permission-detail/permission-detail.component.html
index f61ac4f..2853282 100644
--- a/src/app/permission/permission-detail/permission-detail.component.html
+++ b/src/app/permission/permission-detail/permission-detail.component.html
@@ -189,13 +189,15 @@
 >
   <div class="mr-2 flex column-gap-4 row-gap-1 justify-content-start align-items-center">
     <div class="pi pi-question-circle text-3xl danger-action-text"></div>
-    <div>
+    <div class="flex flex-column row-gap-2">
       <div id="apm_permission_delete_message" class="font-bold">
-        {{ ('ACTIONS.DELETE.MESSAGE.TEXT' | translate).replace('{{ITEM}}', permission?.resource + '#' +
-        permission?.action) }}
+        {{ 'ACTIONS.DELETE.MESSAGE.PERMISSION' | translate }}
       </div>
-      <div *ngIf="permission?.operator" class="mt-3">{{ 'ACTIONS.DELETE.MESSAGE.OPERATOR_TEXT' | translate }}</div>
-      <div class="mt-3">{{ 'ACTIONS.DELETE.MESSAGE.INFO' | translate }}</div>
+      <div id="apm_permission_delete_role_name" class="font-bold text-center danger-action-text">
+        {{ permission?.resource }} # {{ permission?.action }}
+      </div>
+      <div *ngIf="permission?.operator">{{ 'ACTIONS.DELETE.MESSAGE.OPERATOR_TEXT' | translate }}</div>
+      <div>{{ 'ACTIONS.DELETE.MESSAGE.INFO' | translate }}</div>
     </div>
   </div>
   <ng-template pTemplate="footer">
diff --git a/src/app/permission/role-detail/role-detail.component.html b/src/app/permission/role-detail/role-detail.component.html
index 94c7576..5f51b25 100644
--- a/src/app/permission/role-detail/role-detail.component.html
+++ b/src/app/permission/role-detail/role-detail.component.html
@@ -86,11 +86,10 @@
 >
   <div class="mr-2 flex column-gap-4 row-gap-1 justify-content-start align-items-center">
     <div class="pi pi-question-circle text-3xl danger-action-text"></div>
-    <div>
-      <div id="apm_role_delete_message" class="font-bold">
-        {{ ('ACTIONS.DELETE.MESSAGE.TEXT' | translate).replace('{{ITEM}}', role?.name) }}
-      </div>
-      <div class="mt-3">{{ 'ACTIONS.DELETE.MESSAGE.INFO' | translate }}</div>
+    <div class="flex flex-column row-gap-2">
+      <div id="apm_role_delete_message" class="font-bold">{{ 'ACTIONS.DELETE.MESSAGE.ROLE' | translate }}</div>
+      <div id="apm_role_delete_role_name" class="font-bold text-center danger-action-text">{{ role?.name }}</div>
+      <div>{{ 'ACTIONS.DELETE.MESSAGE.INFO' | translate }}</div>
     </div>
   </div>
   <ng-template pTemplate="footer">
diff --git a/src/app/remotes/user-roles-permissions/user-roles-permissions.component.html b/src/app/remotes/user-roles-permissions/user-roles-permissions.component.html
index 32f6b0b..2acc53a 100644
--- a/src/app/remotes/user-roles-permissions/user-roles-permissions.component.html
+++ b/src/app/remotes/user-roles-permissions/user-roles-permissions.component.html
@@ -19,23 +19,20 @@
         {{ 'USER_ROLE_PERMISSIONS.TABS.PERMISSIONS' | translate }}
       </span>
     </ng-template>
-    <p-message
-      *ngIf="searchInProgress"
-      severity="info"
-      styleClass="m-3"
-      [text]="'ACTIONS.LOADING' | translate"
-    ></p-message>
+    <p-message *ngIf="loading" severity="info" styleClass="m-3" [text]="'ACTIONS.LOADING' | translate"></p-message>
     <p-table
-      *ngIf="!searchInProgress"
+      *ngIf="!loading"
       #permissionTable
       [columns]="columns"
       [value]="items"
       [styleClass]="'p-datatable-striped' + (!userId ? ' px-2 sm:px-3' : '')"
+      [scrollable]="true"
+      scrollHeight="590px"
       [autoLayout]="true"
       [globalFilterFields]="['productName', 'role', 'resource', 'action']"
-      [paginator]="true"
       [rows]="10"
       [rowsPerPageOptions]="[10, 25, 100, 1000]"
+      [paginator]="true"
       [alwaysShowPaginator]="true"
       paginatorPosition="bottom"
       [showCurrentPageReport]="true"
@@ -178,12 +175,7 @@
     <div class="m-3 flex flex-row flex-wrap justify-content-start align-items-start column-gap-5 row-gap-4">
       <!-- ROLES -->
       <ng-container *ngIf="extractFilterItems(items, 'roleName') as roles">
-        <div *ngIf="roles.length === 1">
-          <div id="apm_user_roles_one" class="font-bold">
-            {{ 'USER_ROLE_PERMISSIONS.TABS.ROLE.TITLE' | translate }} {{ roles[0] }}
-          </div>
-        </div>
-        <div *ngIf="roles.length > 1" class="flex flex-column row-gap-2">
+        <div class="flex flex-column row-gap-2">
           <div
             class="font-bold"
             [pTooltip]="'USER_ROLE_PERMISSIONS.TABS.ROLES.TOOLTIP' | translate"
diff --git a/src/app/remotes/user-roles-permissions/user-roles-permissions.component.spec.ts b/src/app/remotes/user-roles-permissions/user-roles-permissions.component.spec.ts
index ab8afc0..a5fdcb5 100644
--- a/src/app/remotes/user-roles-permissions/user-roles-permissions.component.spec.ts
+++ b/src/app/remotes/user-roles-permissions/user-roles-permissions.component.spec.ts
@@ -222,6 +222,13 @@ describe('OneCXUserRolesPermissionsComponent', () => {
       expect(component['sortUserAssignments'](a, b)).toBe(0)
     })
 
+    it('should sort by app id when productName is the same', () => {
+      const a = { productName: 'Apple', resource: 'R1', action: 'A1', applicationId: 'id1' }
+      const b = { productName: 'Apple', resource: 'R2', action: 'A2', applicationId: 'id2' }
+      expect(component['sortUserAssignments'](a, b)).toBeLessThan(0)
+      expect(component['sortUserAssignments'](b, a)).toBeGreaterThan(0)
+    })
+
     it('should sort by resource when productName is the same', () => {
       const a = { productName: 'Apple', resource: 'R1', action: 'A1' }
       const b = { productName: 'Apple', resource: 'R2', action: 'A1' }
diff --git a/src/app/remotes/user-roles-permissions/user-roles-permissions.component.ts b/src/app/remotes/user-roles-permissions/user-roles-permissions.component.ts
index a03ca34..ea4911e 100644
--- a/src/app/remotes/user-roles-permissions/user-roles-permissions.component.ts
+++ b/src/app/remotes/user-roles-permissions/user-roles-permissions.component.ts
@@ -64,7 +64,7 @@ export class OneCXUserRolesPermissionsComponent implements ocxRemoteComponent, o
   public columns
   public environment = environment
   public loadingExceptionKey = ''
-  public searchInProgress = false
+  public loading = false
 
   constructor(
     @Inject(BASE_URL) private readonly baseUrl: ReplaySubject<string>,
@@ -107,7 +107,7 @@ export class OneCXUserRolesPermissionsComponent implements ocxRemoteComponent, o
   }
 
   public ocxInitRemoteComponent(remoteComponentConfig: RemoteComponentConfig) {
-    this.searchInProgress = true
+    this.loading = true
     this.baseUrl.next(remoteComponentConfig.baseUrl)
     this.userApi.configuration = new Configuration({
       basePath: Location.joinWithSlash(remoteComponentConfig.baseUrl, environment.apiPrefix)
@@ -126,7 +126,7 @@ export class OneCXUserRolesPermissionsComponent implements ocxRemoteComponent, o
   }
 
   public searchUserAssignments(): Observable<UserAssignment[]> {
-    this.searchInProgress = true
+    this.loading = true
     // on admin view the userId is set, otherwise the me services are used
     if (this.userId) {
       return this.assgnmtApi
@@ -140,7 +140,7 @@ export class OneCXUserRolesPermissionsComponent implements ocxRemoteComponent, o
             console.error('searchUserAssignments():', err)
             return of([])
           }),
-          finalize(() => (this.searchInProgress = false))
+          finalize(() => (this.loading = false))
         )
     } else {
       return this.userApi.getUserAssignments({ userCriteria: { pageSize: 1000 } }).pipe(
@@ -152,7 +152,7 @@ export class OneCXUserRolesPermissionsComponent implements ocxRemoteComponent, o
           console.error('getUserAssignments():', err)
           return of([])
         }),
-        finalize(() => (this.searchInProgress = false))
+        finalize(() => (this.loading = false))
       )
     }
   }
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
index feb9f19..afa6574 100644
--- a/src/assets/i18n/de.json
+++ b/src/assets/i18n/de.json
@@ -42,8 +42,10 @@
         "INFO": "Diese Aktion kann nicht rückgängig gemacht werden!",
         "APPLICATION_OK": "Die App wurde erfolgreich gelöscht",
         "APPLICATION_NOK": "Ein Fehler ist aufgetreten. Die App wurde nicht gelöscht.",
+        "PERMISSION": "Möchten Sie diese Berechtigung löschen?",
         "PERMISSION_OK": "Die Berechtigung wurde erfolgreich gelöscht",
         "PERMISSION_NOK": "Ein Fehler ist aufgetreten. Die Berechtigung wurde nicht gelöscht.",
+        "ROLE": "Möchten Sie diese Rolle löschen?",
         "ROLE_OK": "Die Rolle wurde erfolgreich gelöscht.",
         "ROLE_NOK": "Ein Fehler ist aufgetreten. Die Rolle wurde nicht gelöscht."
       }
@@ -171,6 +173,8 @@
       "SUBHEADER_WORKSPACE": "Verwalten von Berechtigungen für den Workspace und den Apps der registrierten Applikationen",
       "SUBHEADER_PRODUCT": "Verwalten von Berechtigungen für die Applikation und deren Apps",
       "SUBHEADER_APP": "Verwalten von Berechtigungen für die App",
+      "ADDITIONAL_INFO": "Mehr Daten...",
+      "ADDITIONAL_INFO.TOOLTIP": "Zusätzliche Information pro Berechtigung anzeigen",
       "QUICK_FILTER": {
         "LABEL": "Action",
         "TOOLTIP": "Quick Filter for Action",
@@ -191,6 +195,10 @@
         "PRODUCT.TOOLTIP": "Registrierte Applikationen im Workspace",
         "WORKSPACE": "Workspace",
         "TOOLTIP": "Set filter value"
+      },
+      "ROLES": {
+        "FILTER": "Rollenfilter",
+        "FILTER.TOOLTIP": "Filter für Rollenname"
       }
     }
   },
@@ -214,6 +222,7 @@
   },
   "PERMISSION": {
     "LABEL": "Berechtigungen",
+    "TOOLTIP": "Liste der Berechtigungen",
     "APP_ID": "App ID",
     "APP_ID.TOOLTIP": "ID einer App (Frontend/Backend der Applikation)",
     "PRODUCT_NAME": "Applikationsname",
@@ -225,7 +234,7 @@
     "ACTION.TOOLTIP": "Aktion auf der Ressource",
     "KEY": "Ressource # Aktion",
     "ACTIONS": "Aktionen",
-    "MANDATORY": "Unbedingt erforderlich",
+    "MANDATORY": "Erforderlich",
     "MANDATORY.COLUMN": "Ist die Berechtigung für den Betrieb unbedingt erforderlich?",
     "MANDATORY.COLUMN.TOOLTIP": "Diese Berechtigung ist für den Betrieb unbedingt erforderlich und kann deshalb nicht bearbeitet oder gelöscht werden.",
     "MANDATORY.TOOLTIP": "Wenn gesetzt, dann ist diese Berechtigung unbedingt erforderlich für den Betrieb und kann deshalb nicht bearbeitet oder gelöscht werden.",
@@ -288,7 +297,7 @@
       "ROLE.TITLE": "Rolle: ",
       "ROLES.TITLE": "Rollen: ",
       "ROLES.FILTER": "Rollenname",
-      "ROLES.TOOLTIP": "Liste von Rollen die im IAM  (Identity Access Management) zugeordnet wurden",
+      "ROLES.TOOLTIP": "Liste von Rollen zu denen Berechtigungen erteilt sind.",
       "PRODUCTS.TITLE": "Applikationen: ",
       "PRODUCTS.FILTER": "Applikationsname",
       "PRODUCTS.TOOLTIP": "Liste von Applikationen zu denen Berechtigungen erteilt sind",
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index a050f03..76a5e63 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -42,8 +42,10 @@
         "OPERATOR_TEXT": "This Permission was created automatically. If the application continues to offer this Permission, it will be restored during the next deployment.",
         "APPLICATION_OK": "The App was deleted successfully",
         "APPLICATION_NOK": "An error has occurred. The App was not deleted.",
+        "PERMISSION": "Do you want to delete this Permission?",
         "PERMISSION_OK": "The Permission was deleted successfully",
         "PERMISSION_NOK": "An error has occurred. The Permission was not deleted.",
+        "ROLE": "Do you want to delete this Role?",
         "ROLE_OK": "The Role was deleted successfully",
         "ROLE_NOK": "An error has occurred. The Role was not deleted."
       }
@@ -171,6 +173,8 @@
       "SUBHEADER_WORKSPACE": "Managing Business Roles and Permissions of Workspace and all Apps of the registered Applications",
       "SUBHEADER_PRODUCT": "Managing Business Roles and Permissions of the Application including all of its Apps",
       "SUBHEADER_APP": "Managing Business Roles and Permissions of the App",
+      "ADDITIONAL_INFO": "More data...",
+      "ADDITIONAL_INFO.TOOLTIP": "Show additional information per permission",
       "QUICK_FILTER": {
         "LABEL": "Type",
         "TOOLTIP": "Quick Filter for Action",
@@ -191,6 +195,10 @@
         "PRODUCT.TOOLTIP": "The Applications registered in the workspace",
         "WORKSPACE": "Workspace",
         "TOOLTIP": "Set filter value"
+      },
+      "ROLES": {
+        "FILTER": "Role filter",
+        "FILTER.TOOLTIP": "Filter for Role name"
       }
     }
   },
@@ -214,6 +222,7 @@
   },
   "PERMISSION": {
     "LABEL": "Permissions",
+    "TOOLTIP": "List of Permissions",
     "APP_ID": "App ID",
     "APP_ID.TOOLTIP": "ID of the App (frontend/backend of an Application)",
     "PRODUCT_NAME": "Application Name",
@@ -225,8 +234,8 @@
     "ACTION.TOOLTIP": "Action on the Resource",
     "KEY": "Resource # Action",
     "ACTIONS": "Actions",
-    "MANDATORY": "Mandatory required",
-    "MANDATORY.COLUMN": "Can the Permission be edited?",
+    "MANDATORY": "Required",
+    "MANDATORY.COLUMN": "Required?",
     "MANDATORY.COLUMN.TOOLTIP": "This Permission is absolutely necessary for operation and therefore cannot be edited or deleted.",
     "MANDATORY.TOOLTIP": "If set then this Permission is necessary for operation and cannot therefore be changed or deleted.",
     "OPERATOR": "Automated created",
@@ -288,7 +297,7 @@
       "ROLE.TITLE": "Role: ",
       "ROLES.TITLE": "Roles: ",
       "ROLES.FILTER": "Role Name",
-      "ROLES.TOOLTIP": "List of Roles which are assigned in the IAM (Identity Access Management)",
+      "ROLES.TOOLTIP": "List of Roles to which Permissions are granted",
       "PRODUCTS.TITLE": "Applications: ",
       "PRODUCTS.FILTER": "Applikation Name",
       "PRODUCTS.TOOLTIP": "List of Applications to which Permissions are granted",