diff --git a/console/src/app/modules/paginator/paginator.component.html b/console/src/app/modules/paginator/paginator.component.html
index 913803843..e74a3e388 100644
--- a/console/src/app/modules/paginator/paginator.component.html
+++ b/console/src/app/modules/paginator/paginator.component.html
@@ -8,12 +8,10 @@
     </p>
   </div>
   <span class="fill-space"></span>
-  <span class="pos cnsl-secondary-text" *ngIf="!hidePagination"
-    >{{ pageIndex * pageSize }} - {{ pageIndex * pageSize + pageSize }}
-  </span>
+  <span class="pos cnsl-secondary-text" *ngIf="!hidePagination">{{ startIndex }} - {{ endIndex }} </span>
   <div class="row" *ngIf="!hidePagination">
     <cnsl-form-field class="size">
-      <mat-select class="paginator-select" [(ngModel)]="pageSize" (selectionChange)="emitChange()">
+      <mat-select class="paginator-select" [value]="pageSize" (selectionChange)="updatePageSize($event.value)">
         <mat-option *ngFor="let sizeOption of pageSizeOptions" [value]="sizeOption">
           {{ sizeOption }}
         </mat-option>
diff --git a/console/src/app/modules/paginator/paginator.component.ts b/console/src/app/modules/paginator/paginator.component.ts
index b4b406acd..4fd62fb56 100644
--- a/console/src/app/modules/paginator/paginator.component.ts
+++ b/console/src/app/modules/paginator/paginator.component.ts
@@ -50,6 +50,15 @@ export class PaginatorComponent {
     return temp <= this.length / this.pageSize;
   }
 
+  get startIndex(): number {
+    return this.pageIndex * this.pageSize;
+  }
+
+  get endIndex(): number {
+    const max = this.startIndex + this.pageSize;
+    return this.length < max ? this.length : max;
+  }
+
   public emitChange(): void {
     this.page.emit({
       length: this.length,
@@ -58,4 +67,10 @@ export class PaginatorComponent {
       pageSizeOptions: this.pageSizeOptions,
     });
   }
+
+  public updatePageSize(newSize: number): void {
+    this.pageSize = newSize;
+    this.pageIndex = 0;
+    this.emitChange();
+  }
 }
diff --git a/console/src/app/modules/project-role-detail-dialog/project-role-detail-dialog.component.ts b/console/src/app/modules/project-role-detail-dialog/project-role-detail-dialog.component.ts
index 24c700277..f62ccc54a 100644
--- a/console/src/app/modules/project-role-detail-dialog/project-role-detail-dialog.component.ts
+++ b/console/src/app/modules/project-role-detail-dialog/project-role-detail-dialog.component.ts
@@ -31,9 +31,9 @@ export class ProjectRoleDetailDialogComponent {
   }
 
   submitForm(): void {
-    if (this.formGroup.valid && this.key?.value && this.group?.value && this.displayName?.value) {
+    if (this.formGroup.valid && this.key?.value && this.displayName?.value) {
       this.mgmtService
-        .updateProjectRole(this.projectId, this.key.value, this.displayName.value, this.group.value)
+        .updateProjectRole(this.projectId, this.key.value, this.displayName.value, this.group?.value)
         .then(() => {
           this.toast.showInfo('PROJECT.TOAST.ROLECHANGED', true);
           this.dialogRef.close(true);
diff --git a/console/src/app/modules/project-roles-table/project-roles-table.component.html b/console/src/app/modules/project-roles-table/project-roles-table.component.html
index 851e6848a..48ad2851b 100644
--- a/console/src/app/modules/project-roles-table/project-roles-table.component.html
+++ b/console/src/app/modules/project-roles-table/project-roles-table.component.html
@@ -35,8 +35,8 @@
               [disabled]="disabled"
               color="primary"
               (change)="$event ? masterToggle() : null"
-              [checked]="selection.hasValue() && isAllSelected()"
-              [indeterminate]="selection.hasValue() && !isAllSelected()"
+              [checked]="isAnySelected() && isAllSelected()"
+              [indeterminate]="isAnySelected() && !isAllSelected()"
             >
             </mat-checkbox>
           </div>
@@ -76,7 +76,7 @@
             class="role state"
             [ngClass]="{ 'no-selection': !selectionAllowed }"
             *ngIf="role.group"
-            (click)="selectionAllowed ? selectAllOfGroup(role.group) : openDetailDialog(role)"
+            (click)="selectionAllowed ? groupMasterToggle(role.group) : openDetailDialog(role)"
             [matTooltip]="selectionAllowed ? ('PROJECT.ROLE.SELECTGROUPTOOLTIP' | translate: role) : null"
             >{{ role.group }}</span
           >
@@ -135,7 +135,7 @@
     #paginator
     [timestamp]="dataSource.viewTimestamp"
     [length]="dataSource.totalResult"
-    [pageSize]="50"
+    [pageSize]="INITIAL_PAGE_SIZE"
     (page)="changePage()"
     [pageSizeOptions]="[25, 50, 100, 250]"
   >
diff --git a/console/src/app/modules/project-roles-table/project-roles-table.component.ts b/console/src/app/modules/project-roles-table/project-roles-table.component.ts
index ae8633d15..215978241 100644
--- a/console/src/app/modules/project-roles-table/project-roles-table.component.ts
+++ b/console/src/app/modules/project-roles-table/project-roles-table.component.ts
@@ -18,6 +18,7 @@ import { ProjectRolesDataSource } from './project-roles-table-datasource';
   styleUrls: ['./project-roles-table.component.scss'],
 })
 export class ProjectRolesTableComponent implements OnInit {
+  public INITIAL_PAGE_SIZE: number = 50;
   @Input() public projectId: string = '';
   @Input() public grantId: string = '';
   @Input() public disabled: boolean = false;
@@ -43,41 +44,58 @@ export class ProjectRolesTableComponent implements OnInit {
   }
 
   public ngOnInit(): void {
-    this.dataSource.loadRoles(this.projectId, this.grantId, 0, 25, 'asc');
-
-    this.dataSource.rolesSubject.subscribe((roles) => {
-      const selectedRoles: Role.AsObject[] = roles.filter((role) => this.selectedKeys.includes(role.key));
-      this.selection.select(...selectedRoles.map((r) => r.key));
-    });
+    this.loadRolesPage();
+    this.selection.select(...this.selectedKeys);
 
     this.selection.changed.subscribe(() => {
       this.changedSelection.emit(this.selection.selected);
     });
   }
 
-  public selectAllOfGroup(group: string): void {
-    const groupRoles: Role.AsObject[] = this.dataSource.rolesSubject.getValue().filter((role) => role.group === group);
-    this.selection.select(...groupRoles.map((r) => r.key));
-  }
-
   private loadRolesPage(): void {
-    this.dataSource.loadRoles(this.projectId, this.grantId, this.paginator?.pageIndex ?? 0, this.paginator?.pageSize ?? 25);
+    this.dataSource.loadRoles(
+      this.projectId,
+      this.grantId,
+      this.paginator?.pageIndex ?? 0,
+      this.paginator?.pageSize ?? this.INITIAL_PAGE_SIZE,
+    );
   }
 
   public changePage(): void {
     this.loadRolesPage();
   }
 
-  public isAllSelected(): boolean {
-    const numSelected = this.selection.selected.length;
-    const numRows = this.dataSource.totalResult;
-    return numSelected === numRows;
+  private listIsAllSelected(list: string[]): boolean {
+    return list.findIndex((key) => !this.selection.isSelected(key)) == -1;
+  }
+
+  private listIsAnySelected(list: string[]): boolean {
+    return list.findIndex((key) => this.selection.isSelected(key)) != -1;
+  }
+
+  private listMasterToggle(list: string[]): void {
+    if (this.listIsAllSelected(list)) this.selection.deselect(...list);
+    else this.selection.select(...list);
+  }
+
+  private compilePageKeys(): string[] {
+    return this.dataSource.rolesSubject.value.map((role) => role.key);
   }
 
   public masterToggle(): void {
-    this.isAllSelected()
-      ? this.selection.clear()
-      : this.dataSource.rolesSubject.value.forEach((row: Role.AsObject) => this.selection.select(row.key));
+    this.listMasterToggle(this.compilePageKeys());
+  }
+
+  public isAllSelected(): boolean {
+    return this.listIsAllSelected(this.compilePageKeys());
+  }
+
+  public isAnySelected(): boolean {
+    return this.listIsAnySelected(this.compilePageKeys());
+  }
+
+  public groupMasterToggle(group: string): void {
+    this.listMasterToggle(this.dataSource.rolesSubject.value.filter((role) => role.group == group).map((role) => role.key));
   }
 
   public deleteRole(role: Role.AsObject): void {
@@ -93,45 +111,28 @@ export class ProjectRolesTableComponent implements OnInit {
 
     dialogRef.afterClosed().subscribe((resp) => {
       if (resp) {
-        const index = this.dataSource.rolesSubject.value.findIndex((iter) => iter.key === role.key);
-
         this.mgmtService.removeProjectRole(this.projectId, role.key).then(() => {
           this.toast.showInfo('PROJECT.TOAST.ROLEREMOVED', true);
-
-          if (index > -1) {
-            this.dataSource.rolesSubject.value.splice(index, 1);
-            this.dataSource.rolesSubject.next(this.dataSource.rolesSubject.value);
-          }
+          this.loadRolesPage();
         });
       }
     });
   }
 
-  public removeRole(role: Role.AsObject, index: number): void {
-    this.mgmtService
-      .removeProjectRole(this.projectId, role.key)
-      .then(() => {
-        this.toast.showInfo('PROJECT.TOAST.ROLEREMOVED', true);
-        this.dataSource.rolesSubject.value.splice(index, 1);
-        this.dataSource.rolesSubject.next(this.dataSource.rolesSubject.value);
-      })
-      .catch((error) => {
-        this.toast.showError(error);
-      });
-  }
-
   public openDetailDialog(role: Role.AsObject): void {
-    this.dialog.open(ProjectRoleDetailDialogComponent, {
+    const dialogRef = this.dialog.open(ProjectRoleDetailDialogComponent, {
       data: {
         role,
         projectId: this.projectId,
       },
       width: '400px',
     });
+
+    dialogRef.afterClosed().subscribe(() => this.loadRolesPage());
   }
 
   public refreshPage(): void {
-    this.dataSource.loadRoles(this.projectId, this.grantId, this.paginator?.pageIndex ?? 0, this.paginator?.pageSize ?? 25);
+    this.loadRolesPage();
   }
 
   public get selectionAllowed(): boolean {