diff --git a/console/src/app/app-routing.module.ts b/console/src/app/app-routing.module.ts
index 940f850d3..77b867b51 100644
--- a/console/src/app/app-routing.module.ts
+++ b/console/src/app/app-routing.module.ts
@@ -55,6 +55,11 @@ const routes: Routes = [
             roles: ['org.read'],
         },
     },
+    {
+        path: 'grant-create',
+        loadChildren: () => import('src/app/pages/user-grant-create/user-grant-create.module')
+            .then(m => m.UserGrantCreateModule),
+    },
     {
         path: 'signedout',
         loadChildren: () => import('./pages/signedout/signedout.module').then(m => m.SignedoutModule),
diff --git a/console/src/app/app.component.html b/console/src/app/app.component.html
index bc345db41..3d686a1ff 100644
--- a/console/src/app/app.component.html
+++ b/console/src/app/app.component.html
@@ -23,7 +23,6 @@
 
             <button [ngClass]="{'active': temporg.id === org?.id}" [disabled]="!temporg.id" *ngFor="let temporg of orgs"
                 mat-menu-item (click)="setActiveOrg(temporg)">
-                <mat-icon class="avatar">business</mat-icon>
                 {{temporg?.name ? temporg.name : 'NO NAME'}}
             </button>
 
diff --git a/console/src/app/app.component.scss b/console/src/app/app.component.scss
index 65e8dbe45..9cbfab785 100644
--- a/console/src/app/app.component.scss
+++ b/console/src/app/app.component.scss
@@ -68,6 +68,7 @@
     font-size: 12px;
     padding: 4px 2rem;
     position: relative;
+    overflow: hidden;
 }
 
 .main-container {
@@ -107,7 +108,6 @@
                     text-decoration: none;
                     cursor: pointer;
                     padding: 0.2rem 1rem;
-                    // color: inherit;
                     margin-right: 0.5rem;
                     padding-right: 2rem;
             
@@ -195,23 +195,6 @@
     }
 }
 
-.footer {
-    padding: 1rem;
-    a {
-        cursor: pointer;
-        text-decoration: none;
-        color: #81868a;
-        font-size: .8rem;
-        display: block;
-        margin-bottom: 1px;
-        font-weight: 300;
-
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-}
-
 .divider {
     display: block;
     background-color: #ffffff10;
diff --git a/console/src/app/app.module.ts b/console/src/app/app.module.ts
index 70032f44f..1d49a5a55 100644
--- a/console/src/app/app.module.ts
+++ b/console/src/app/app.module.ts
@@ -57,11 +57,10 @@ const stateHandlerFn = (stateHandler: StatehandlerService) => {
     };
 };
 
-export const authConfig: AuthConfig = {
+export let authConfig = {
     redirectUri: window.location.origin + '/auth/callback',
     scope: 'openid profile email', // offline_access
     responseType: 'code',
-    // showDebugInformation: true,
     oidc: true,
     postLogoutRedirectUri: window.location.origin + '/signedout',
 };
@@ -152,4 +151,9 @@ export const authConfig: AuthConfig = {
     ],
     bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {
+
+    constructor() {
+        console.log(window.location.href);
+    }
+}
diff --git a/console/src/app/modules/accounts-card/accounts-card.component.html b/console/src/app/modules/accounts-card/accounts-card.component.html
index ce8b18bb9..6d8b93598 100644
--- a/console/src/app/modules/accounts-card/accounts-card.component.html
+++ b/console/src/app/modules/accounts-card/accounts-card.component.html
@@ -7,11 +7,13 @@
     <span class="u-email">{{profile?.userName}}</span>
     <span class="iamuser" *ngIf="iamuser">IAM USER</span>
 
-    <button color="primary" (click)="editUserProfile()" mat-stroked-button>{{'USER.EDITACCOUNT' | translate}}</button>
+    <button (click)="editUserProfile()" mat-stroked-button>{{'USER.EDITACCOUNT' | translate}}</button>
     <div class="l-accounts">
         <mat-progress-bar *ngIf="loadingUsers" color="primary" mode="indeterminate"></mat-progress-bar>
         <a class="row" *ngFor="let user of users" (click)="selectAccount(user.userName)">
-            <i class="small-avatar las la-user-circle"></i>
+            <app-avatar *ngIf="user && (user.displayName || (user.firstName && user.lastName))" class="small-avatar"
+                [name]="user.displayName ? user.displayName : (user.firstName + ' '+ user.lastName)" [size]="32">
+            </app-avatar>
 
             <div class="col">
                 <span class="title">{{user.userName}}</span>
@@ -22,7 +24,7 @@
         </a>
         <a class="row" (click)="selectAccount()">
             <div class="icon-wrapper">
-                <mat-icon>add</mat-icon>
+                <i class="las la-user-plus"></i>
             </div>
             <span class="col">
                 <span class="title">{{'USER.ADDACCOUNT' | translate}}</span>
@@ -32,5 +34,5 @@
         </a>
     </div>
 
-    <button color="primary" (click)="logout()" mat-stroked-button>{{'MENU.LOGOUT' | translate}}</button>
+    <button (click)="logout()" mat-stroked-button>{{'MENU.LOGOUT' | translate}}</button>
 </div>
\ No newline at end of file
diff --git a/console/src/app/modules/accounts-card/accounts-card.component.scss b/console/src/app/modules/accounts-card/accounts-card.component.scss
index fc5fd1061..800fa6f38 100644
--- a/console/src/app/modules/accounts-card/accounts-card.component.scss
+++ b/console/src/app/modules/accounts-card/accounts-card.component.scss
@@ -73,7 +73,7 @@
                 margin: 0 1rem;
                 text-align: center;
 
-                mat-icon {
+                i {
                     margin: auto;
                     vertical-align: middle;
                 }
@@ -91,7 +91,7 @@
                 }
 
                 .email {
-                    color: #81868a;
+                    color: #8795a1;
                     font-size: .8rem;
                     line-height: 1rem;
                 }
diff --git a/console/src/app/modules/add-member-dialog/member-create-dialog.component.scss b/console/src/app/modules/add-member-dialog/member-create-dialog.component.scss
index fe02d28c4..c63cffb79 100644
--- a/console/src/app/modules/add-member-dialog/member-create-dialog.component.scss
+++ b/console/src/app/modules/add-member-dialog/member-create-dialog.component.scss
@@ -3,7 +3,7 @@
   }
   
   .desc {
-      color: #81868a;
+      color: #8795a1;
       font-size: .9rem;
   }
 
diff --git a/console/src/app/modules/avatar/avatar.component.html b/console/src/app/modules/avatar/avatar.component.html
index 4b1db087a..1121f8503 100644
--- a/console/src/app/modules/avatar/avatar.component.html
+++ b/console/src/app/modules/avatar/avatar.component.html
@@ -1,4 +1,5 @@
 <div class="avatar-circle dontcloseonclick"
-    [ngStyle]="{'height': size+'px', 'width': size+'px', 'fontSize': fontSize+'px'}" [ngClass]="{'active': active}">
+    [ngStyle]="{'height': size+'px', 'width': size+'px', 'fontSize': fontSize+'px', 'background-color': color}"
+    [ngClass]="{'active': active}">
     {{credentials}}
 </div>
\ No newline at end of file
diff --git a/console/src/app/modules/avatar/avatar.component.scss b/console/src/app/modules/avatar/avatar.component.scss
index 20cbe89ac..651e1a554 100644
--- a/console/src/app/modules/avatar/avatar.component.scss
+++ b/console/src/app/modules/avatar/avatar.component.scss
@@ -10,6 +10,6 @@
     text-transform: uppercase;
 
     &.active:hover  {
-        border: 2px solid #81868a;
+        border: 2px solid #8795a1;
     }
 }
\ No newline at end of file
diff --git a/console/src/app/modules/avatar/avatar.component.ts b/console/src/app/modules/avatar/avatar.component.ts
index 399b93793..a7cf45019 100644
--- a/console/src/app/modules/avatar/avatar.component.ts
+++ b/console/src/app/modules/avatar/avatar.component.ts
@@ -11,16 +11,54 @@ export class AvatarComponent implements OnInit {
     @Input() size: number = 24;
     @Input() fontSize: number = 16;
     @Input() active: boolean = false;
+    @Input() color: string = '';
     constructor() { }
 
     ngOnInit(): void {
         if (!this.credentials) {
             const split: string[] = this.name.split(' ');
             this.credentials = split[0].charAt(0) + (split[1] ? split[1].charAt(0) : '');
+            if (!this.color) {
+                this.color = this.getColor(this.name);
+            }
         }
 
         if (this.size > 50) {
             this.fontSize = 32;
         }
     }
+
+    getColor(userName: string): string {
+        const colors = [
+            '#e51c23',
+            '#e91e63',
+            '#9c27b0',
+            '#673ab7',
+            '#3f51b5',
+            '#5677fc',
+            '#03a9f4',
+            '#00bcd4',
+            '#009688',
+            '#259b24',
+            '#8bc34a',
+            '#afb42b',
+            '#ff9800',
+            '#ff5722',
+            '#795548',
+            '#607d8b',
+        ];
+
+        let hash = 0;
+        if (userName.length === 0) {
+            return colors[hash];
+        }
+        for (let i = 0; i < userName.length; i++) {
+            // tslint:disable-next-line: no-bitwise
+            hash = userName.charCodeAt(i) + ((hash << 5) - hash);
+            // tslint:disable-next-line: no-bitwise
+            hash = hash & hash;
+        }
+        hash = ((hash % colors.length) + colors.length) % colors.length;
+        return colors[hash];
+    }
 }
diff --git a/console/src/app/modules/card/card.component.scss b/console/src/app/modules/card/card.component.scss
index 6480961c5..a17554f50 100644
--- a/console/src/app/modules/card/card.component.scss
+++ b/console/src/app/modules/card/card.component.scss
@@ -34,7 +34,7 @@
         
         .desc {
             font-size: .9rem;
-            color: #81868a;
+            color: #8795a1;
         }
     }
 
diff --git a/console/src/app/modules/changes/changes.component.scss b/console/src/app/modules/changes/changes.component.scss
index adfb2dd9a..b8614b1af 100644
--- a/console/src/app/modules/changes/changes.component.scss
+++ b/console/src/app/modules/changes/changes.component.scss
@@ -17,12 +17,12 @@
         display: flex;
         flex-direction: column;
         .editor {
-            color: #81868a;
+            color: #8795a1;
             font-size: 12px;
             align-self: flex-end;
         }
         .seq {
-            color: #81868a;
+            color: #8795a1;
             font-size: 12px;
             align-self: flex-end;
         }
@@ -41,6 +41,6 @@
 
     .end-container {
         font-size: 12px;
-        color: #81868a;
+        color: #8795a1;
     }
 }
diff --git a/console/src/app/modules/meta-layout/meta-layout.component.scss b/console/src/app/modules/meta-layout/meta-layout.component.scss
index b7adc6c39..c98a4728e 100644
--- a/console/src/app/modules/meta-layout/meta-layout.component.scss
+++ b/console/src/app/modules/meta-layout/meta-layout.component.scss
@@ -17,7 +17,6 @@
     .meta {
         position: relative;
         flex: 1 0 300px;
-        background: linear-gradient(to bottom right, #4072b410 20%,transparent 50%);
 
 		@media only screen and (min-width: 1500px) {
 			flex-basis: 400px;
@@ -33,7 +32,6 @@
         &.hidden {
             flex: 0 0 0 !important;
             width: 0;
-            background: linear-gradient(to bottom right, #4072b450,transparent 50%);
 
             .hide {
                 transform: rotate(180deg);
@@ -48,9 +46,6 @@
             top: 0;
             left: 0;
             height: 50%;
-            border-left: 2px solid #4072b4;
-            -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#4072b4), to(#212224), color-stop(01, #212224)) 50 21;
-            border-image: -webkit-gradient(linear, left top, left bottom, from(#4072b4), to(#212224), color-stop(01, #212224)) 50 21;
         }
 
         .hide {
@@ -75,12 +70,4 @@
             }
         }
     }
-    
-
-	// @media only screen and (max-width: 700px) {
-    //     flex-direction: column;
-    //     .main-content, .meta {
-    //         overflow-y: visible;
-    //     }
-    // }
 }
\ No newline at end of file
diff --git a/console/src/app/modules/project-contributors/project-contributors.component.scss b/console/src/app/modules/project-contributors/project-contributors.component.scss
index 9585a8cd4..79b450fb8 100644
--- a/console/src/app/modules/project-contributors/project-contributors.component.scss
+++ b/console/src/app/modules/project-contributors/project-contributors.component.scss
@@ -9,7 +9,7 @@
 
     .sub-header {
         font-size: .8rem;
-        color: #81868a;
+        color: #8795a1;
     }
   
     .people {
@@ -29,13 +29,12 @@
         display: flex;
         align-items: center;
   
-        .avatar-img, .avatar-circle {
+        .avatar-circle {
           float: left;
           margin: 0 8px 0 -15px;
           height: 32px;
           width: 32px;
           border-radius: 50%;
-          box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0, 0, 0, 0.5);
         }
 
         .add-img {
@@ -43,18 +42,6 @@
             margin: 0 8px 0 -15px;
         }
 
-        .avatar-img {
-            &:before {
-                content: '';
-                display: block;
-                position: absolute;
-                top: 0;
-                bottom: 0;
-                height: 32px;
-                width: 32px;
-            }
-        }
-
         .avatar-circle {
             cursor: pointer;
             display: flex;
diff --git a/console/src/app/modules/project-contributors/project-contributors.component.ts b/console/src/app/modules/project-contributors/project-contributors.component.ts
index 97513f460..634ded9d8 100644
--- a/console/src/app/modules/project-contributors/project-contributors.component.ts
+++ b/console/src/app/modules/project-contributors/project-contributors.component.ts
@@ -34,6 +34,8 @@ export class ProjectContributorsComponent implements OnInit {
     public ProjectState: any = ProjectState;
     private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
 
+    public ProjectType: any = ProjectType;
+
     constructor(private projectService: ProjectService,
         private dialog: MatDialog,
         private toast: ToastService,
@@ -90,7 +92,11 @@ export class ProjectContributorsComponent implements OnInit {
 
     public showDetail(): void {
         if (this.project?.state === ProjectState.PROJECTSTATE_ACTIVE) {
-            this.router.navigate(['projects', this.project.projectId, 'members']);
+            if (this.projectType === ProjectType.PROJECTTYPE_GRANTED) {
+                this.router.navigate(['granted-projects', this.project.projectId, 'members']);
+            } else if (this.projectType === ProjectType.PROJECTTYPE_OWNED) {
+                this.router.navigate(['projects', this.project.projectId, 'members']);
+            }
         }
     }
 }
diff --git a/console/src/app/pages/owned-projects/project-grant-members-create-dialog/project-grant-members-create-dialog.component.html b/console/src/app/modules/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component.html
similarity index 93%
rename from console/src/app/pages/owned-projects/project-grant-members-create-dialog/project-grant-members-create-dialog.component.html
rename to console/src/app/modules/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component.html
index 7df6ea9f3..90d58baa8 100644
--- a/console/src/app/pages/owned-projects/project-grant-members-create-dialog/project-grant-members-create-dialog.component.html
+++ b/console/src/app/modules/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component.html
@@ -6,7 +6,7 @@
     <app-search-user-autocomplete (selectionChanged)="selectUsers($event)">
     </app-search-user-autocomplete>
 
-    <mat-form-field class="full-width">
+    <mat-form-field class="full-width" appearance="outline">
         <mat-label>{{ 'PROJECT.MEMBER.ROLES' | translate }}</mat-label>
         <mat-select [(ngModel)]="roleKeyList" multiple>
             <mat-option *ngFor="let key of data.roleKeysList" [value]="key">
diff --git a/console/src/app/modules/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component.scss b/console/src/app/modules/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component.scss
new file mode 100644
index 000000000..619e000df
--- /dev/null
+++ b/console/src/app/modules/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component.scss
@@ -0,0 +1,16 @@
+.full-width {
+    width: 100%;
+}
+  
+.action {
+    display: flex;
+    justify-content: flex-end;
+  
+    .ok-button {
+      margin-left: 0.5rem;
+    }
+  
+    button {
+      border-radius: 0.5rem;
+    }
+}
diff --git a/console/src/app/pages/owned-projects/project-grant-members-create-dialog/project-grant-members-create-dialog.component.spec.ts b/console/src/app/modules/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component.spec.ts
similarity index 100%
rename from console/src/app/pages/owned-projects/project-grant-members-create-dialog/project-grant-members-create-dialog.component.spec.ts
rename to console/src/app/modules/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component.spec.ts
diff --git a/console/src/app/pages/owned-projects/project-grant-members-create-dialog/project-grant-members-create-dialog.component.ts b/console/src/app/modules/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component.ts
similarity index 100%
rename from console/src/app/pages/owned-projects/project-grant-members-create-dialog/project-grant-members-create-dialog.component.ts
rename to console/src/app/modules/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component.ts
diff --git a/console/src/app/pages/granted-projects/project-grant-members/project-grant-members-datasource.ts b/console/src/app/modules/project-grant-members/project-grant-members-datasource.ts
similarity index 98%
rename from console/src/app/pages/granted-projects/project-grant-members/project-grant-members-datasource.ts
rename to console/src/app/modules/project-grant-members/project-grant-members-datasource.ts
index c9c8c6e37..926826b9d 100644
--- a/console/src/app/pages/granted-projects/project-grant-members/project-grant-members-datasource.ts
+++ b/console/src/app/modules/project-grant-members/project-grant-members-datasource.ts
@@ -25,6 +25,8 @@ export class ProjectGrantMembersDataSource extends DataSource<ProjectMember.AsOb
 
         this.loadingSubject.next(true);
 
+        console.log(projectId, grantId);
+
         from(this.projectService.SearchProjectGrantMembers(projectId,
             grantId, pageSize, offset)).pipe(
                 map(resp => {
diff --git a/console/src/app/pages/granted-projects/project-grant-members/project-grant-members.component.html b/console/src/app/modules/project-grant-members/project-grant-members.component.html
similarity index 86%
rename from console/src/app/pages/granted-projects/project-grant-members/project-grant-members.component.html
rename to console/src/app/modules/project-grant-members/project-grant-members.component.html
index e40e5bc50..78951902f 100644
--- a/console/src/app/pages/granted-projects/project-grant-members/project-grant-members.component.html
+++ b/console/src/app/modules/project-grant-members/project-grant-members.component.html
@@ -1,6 +1,3 @@
-<h1>{{ 'PROJECT.MEMBER.TITLE' | translate }}</h1>
-<p class="desc">{{ 'PROJECT.MEMBER.DESCRIPTION' | translate }}</p>
-
 <div class="table-header-row">
     <div class="col">
         <ng-container *ngIf="!selection.hasValue()">
@@ -27,17 +24,18 @@
     <div class="spinner-container" *ngIf="dataSource?.loading$ | async">
         <mat-spinner diameter="50"></mat-spinner>
     </div>
-    <table mat-table class="full-width-table" aria-label="Elements" [dataSource]="dataSource">
+    <table mat-table class="full-width-table" aria-label="Elements"
+        [ngClass]="{'background-style': type == ProjectType.PROJECTTYPE_OWNED}" [dataSource]="dataSource">
         <ng-container matColumnDef="select">
             <th class="selection" mat-header-cell *matHeaderCellDef>
-                <mat-checkbox (change)="$event ? masterToggle() : null"
+                <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
                     [checked]="selection.hasValue() && isAllSelected()"
                     [indeterminate]="selection.hasValue() && !isAllSelected()">
                 </mat-checkbox>
             </th>
             <td class="selection" mat-cell *matCellDef="let row">
-                <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
-                    [checked]="selection.isSelected(row)">
+                <mat-checkbox color="primary" (click)="$event.stopPropagation()"
+                    (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
                 </mat-checkbox>
             </td>
         </ng-container>
@@ -70,7 +68,7 @@
         <ng-container matColumnDef="roles">
             <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.ROLES' | translate }} </th>
             <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
-                <span class="role" *ngFor="let role of member.rolesList; index as i">
+                <span class="role app-label" *ngFor="let role of member.rolesList; index as i">
                     {{ 'ROLES.'+role | translate }}</span>
             </td>
         </ng-container>
@@ -95,6 +93,7 @@
         </tr>
     </table>
 
-    <mat-paginator #paginator [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
+    <mat-paginator [ngClass]="{'background-style': type == ProjectType.PROJECTTYPE_OWNED}" #paginator [pageSize]="50"
+        [pageSizeOptions]="[25, 50, 100, 250]">
     </mat-paginator>
 </div>
\ No newline at end of file
diff --git a/console/src/app/pages/granted-projects/project-grant-members/project-grant-members.component.scss b/console/src/app/modules/project-grant-members/project-grant-members.component.scss
similarity index 74%
rename from console/src/app/pages/granted-projects/project-grant-members/project-grant-members.component.scss
rename to console/src/app/modules/project-grant-members/project-grant-members.component.scss
index ba20f9512..65f6a6b90 100644
--- a/console/src/app/pages/granted-projects/project-grant-members/project-grant-members.component.scss
+++ b/console/src/app/modules/project-grant-members/project-grant-members.component.scss
@@ -1,15 +1,4 @@
-
-h1 {
-    font-size: 1.2rem;
-}
-
-.desc {
-    width: 100%;
-    display: block;
-    font-size: .9rem;
-    color: #81868a;
-}
-     
+    
 .table-header-row {
   display: flex;
   align-items: center;
@@ -19,7 +8,7 @@ h1 {
       flex-direction: column;
       .desc {
           font-size: .8rem;
-          color: #81868a;
+          color: #8795a1;
       }
       .count {
           font-size: 2rem;
@@ -80,14 +69,8 @@ h1 {
 
         .role {
             display: inline-block;
-            border-radius: .5rem;
-            border: 1px solid #ffffff30;
-            padding: .5rem 1rem;
-            margin-top: .25rem;
-            margin-bottom: .25rem;
-            margin-left: 0;
-            margin-right: .5rem;
-          }
+            margin: .25rem;
+        }
     }
 }
 
diff --git a/console/src/app/pages/granted-projects/project-grant-members/project-grant-members.component.spec.ts b/console/src/app/modules/project-grant-members/project-grant-members.component.spec.ts
similarity index 100%
rename from console/src/app/pages/granted-projects/project-grant-members/project-grant-members.component.spec.ts
rename to console/src/app/modules/project-grant-members/project-grant-members.component.spec.ts
diff --git a/console/src/app/pages/granted-projects/project-grant-members/project-grant-members.component.ts b/console/src/app/modules/project-grant-members/project-grant-members.component.ts
similarity index 58%
rename from console/src/app/pages/granted-projects/project-grant-members/project-grant-members.component.ts
rename to console/src/app/modules/project-grant-members/project-grant-members.component.ts
index 1a91af2cb..9b30e170e 100644
--- a/console/src/app/pages/granted-projects/project-grant-members/project-grant-members.component.ts
+++ b/console/src/app/modules/project-grant-members/project-grant-members.component.ts
@@ -4,14 +4,14 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTable } from '@angular/material/table';
 import { tap } from 'rxjs/operators';
-import { ProjectMember, User } from 'src/app/proto/generated/management_pb';
+import { ProjectMember, ProjectType } from 'src/app/proto/generated/management_pb';
 import { ProjectService } from 'src/app/services/project.service';
 import { ToastService } from 'src/app/services/toast.service';
 
 import {
-    CreationType,
-    MemberCreateDialogComponent,
-} from '../../../modules/add-member-dialog/member-create-dialog.component';
+    ProjectGrantMembersCreateDialogComponent,
+    ProjectGrantMembersCreateDialogExportType,
+} from './project-grant-members-create-dialog/project-grant-members-create-dialog.component';
 import { ProjectGrantMembersDataSource } from './project-grant-members-datasource';
 
 @Component({
@@ -23,6 +23,8 @@ export class ProjectGrantMembersComponent implements AfterViewInit, OnInit {
     @Input() public projectId!: string;
     @Input() public grantId!: string;
 
+    @Input() public type: ProjectType = ProjectType.PROJECTTYPE_GRANTED;
+
     @Input() public disabled: boolean = false;
     @ViewChild(MatPaginator) public paginator!: MatPaginator;
     @ViewChild(MatTable) public table!: MatTable<ProjectMember.AsObject>;
@@ -32,14 +34,17 @@ export class ProjectGrantMembersComponent implements AfterViewInit, OnInit {
     /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
     public displayedColumns: string[] = ['select', 'firstname', 'lastname', 'username', 'email', 'roles'];
 
-    constructor(private projectService: ProjectService,
+    public ProjectType: any = ProjectType;
+
+    constructor(
+        private projectService: ProjectService,
         private dialog: MatDialog,
         private toast: ToastService,
-    ) {
-    }
+    ) { }
 
     public ngOnInit(): void {
         this.dataSource = new ProjectGrantMembersDataSource(this.projectService);
+        console.log(this.projectId);
         this.dataSource.loadMembers(this.projectId, this.grantId, 0, 25, 'asc');
     }
 
@@ -59,23 +64,22 @@ export class ProjectGrantMembersComponent implements AfterViewInit, OnInit {
             this.paginator.pageSize,
         );
     }
-
     public removeProjectMemberSelection(): void {
-        // Promise.all(this.selection.selected.map(member => {
-        //     return this.projectService.RemoveProjectMember(this.projectId, this.grantId, member.userId).then(() => {
-        //         this.toast.showInfo('Removed successfully');
-        //     }).catch(error => {
-        //         this.toast.showError(error.message);
-        //     });
-        // }));
+        Promise.all(this.selection.selected.map(member => {
+            return this.projectService.RemoveProjectGrantMember(this.projectId, this.grantId, member.userId).then(() => {
+                this.toast.showInfo('Removed successfully');
+            }).catch(error => {
+                this.toast.showError(error.message);
+            });
+        }));
     }
 
     public removeMember(member: ProjectMember.AsObject): void {
-        // this.projectService.RemoveProjectMember(this.grantedProject.id, member.userId).then(() => {
-        //     this.toast.showInfo('Member removed successfully');
-        // }).catch(error => {
-        //     this.toast.showError(error.message);
-        // });
+        this.projectService.RemoveProjectGrantMember(this.projectId, this.grantId, member.userId).then(() => {
+            this.toast.showInfo('Member removed successfully');
+        }).catch(error => {
+            this.toast.showError(error.message);
+        });
     }
 
     public isAllSelected(): boolean {
@@ -90,30 +94,33 @@ export class ProjectGrantMembersComponent implements AfterViewInit, OnInit {
             this.dataSource.membersSubject.value.forEach(row => this.selection.select(row));
     }
 
-    public openAddMember(): void {
-        const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
+    public async openAddMember(): Promise<any> {
+        const keysList = (await this.projectService.GetProjectGrantMemberRoles()).toObject();
+        console.log(keysList);
+
+        const dialogRef = this.dialog.open(ProjectGrantMembersCreateDialogComponent, {
             data: {
-                creationType: CreationType.PROJECT_GRANTED,
-                projectId: this.projectId,
+                roleKeysList: keysList.rolesList,
             },
             width: '400px',
         });
 
-        dialogRef.afterClosed().subscribe(resp => {
-            if (resp) {
-                const users: User.AsObject[] = resp.users;
-                const roles: string[] = resp.roles;
-
-                if (users && users.length && roles && roles.length) {
-                    Promise.all(users.map(user => {
-                        return this.projectService.AddProjectGrantMember(this.projectId,
-                            this.grantId, user.id, roles);
-                    })).then(() => {
-                        this.toast.showError('members added');
+        dialogRef.afterClosed().subscribe((dataToAdd: ProjectGrantMembersCreateDialogExportType) => {
+            console.log(dataToAdd);
+            if (dataToAdd) {
+                dataToAdd.userIds.forEach((userid: string) => {
+                    this.projectService.AddProjectGrantMember(
+                        this.projectId,
+                        this.grantId,
+                        userid,
+                        dataToAdd.rolesKeyList,
+                    ).then(() => {
+                        this.toast.showInfo('Project Grant Member successfully added!');
                     }).catch(error => {
                         this.toast.showError(error.message);
                     });
-                }
+                });
+
             }
         });
     }
diff --git a/console/src/app/modules/project-grant-members/project-grant-members.module.ts b/console/src/app/modules/project-grant-members/project-grant-members.module.ts
new file mode 100644
index 000000000..6d1675d82
--- /dev/null
+++ b/console/src/app/modules/project-grant-members/project-grant-members.module.ts
@@ -0,0 +1,59 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
+
+import { SearchUserAutocompleteModule } from '../search-user-autocomplete/search-user-autocomplete.module';
+import {
+    ProjectGrantMembersCreateDialogComponent,
+} from './project-grant-members-create-dialog/project-grant-members-create-dialog.component';
+import { ProjectGrantMembersComponent } from './project-grant-members.component';
+
+@NgModule({
+    declarations: [ProjectGrantMembersComponent, ProjectGrantMembersCreateDialogComponent],
+    imports: [
+        CommonModule,
+        MatAutocompleteModule,
+        HasRoleModule,
+        RouterModule,
+        MatChipsModule,
+        MatMenuModule,
+        MatButtonModule,
+        MatCheckboxModule,
+        MatIconModule,
+        MatInputModule,
+        MatFormFieldModule,
+        MatSelectModule,
+        MatTableModule,
+        SearchUserAutocompleteModule,
+        MatPaginatorModule,
+        MatSortModule,
+        MatTooltipModule,
+        MatDialogModule,
+        ReactiveFormsModule,
+        MatProgressSpinnerModule,
+        FormsModule,
+        TranslateModule,
+    ],
+    exports: [
+        ProjectGrantMembersComponent,
+    ],
+})
+export class ProjectGrantMembersModule { }
diff --git a/console/src/app/modules/project-members/project-members.component.html b/console/src/app/modules/project-members/project-members.component.html
index 84a3f2cb5..722dfc823 100644
--- a/console/src/app/modules/project-members/project-members.component.html
+++ b/console/src/app/modules/project-members/project-members.component.html
@@ -48,13 +48,13 @@
                     [dataSource]="dataSource">
                     <ng-container matColumnDef="select">
                         <th class="selection" mat-header-cell *matHeaderCellDef>
-                            <mat-checkbox (change)="$event ? masterToggle() : null"
+                            <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
                                 [checked]="selection.hasValue() && isAllSelected()"
                                 [indeterminate]="selection.hasValue() && !isAllSelected()">
                             </mat-checkbox>
                         </th>
                         <td class="selection" mat-cell *matCellDef="let row">
-                            <mat-checkbox (click)="$event.stopPropagation()"
+                            <mat-checkbox color="primary" (click)="$event.stopPropagation()"
                                 (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
                             </mat-checkbox>
                         </td>
@@ -94,9 +94,17 @@
 
                     <ng-container matColumnDef="roles">
                         <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.ROLES' | translate }} </th>
-                        <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
-                            <span class="role app-label" *ngFor="let role of member.rolesList; index as i">
-                                {{ 'ROLES.'+role | translate }}</span>
+                        <td mat-cell *matCellDef="let member">
+                            <mat-form-field class="form-field" appearance="outline" *ngIf="project">
+                                <mat-label>{{ 'PROJECT.GRANT.TITLE' | translate }}</mat-label>
+                                <mat-select [(ngModel)]="member.rolesList" multiple
+                                    [disabled]="(['project.member.write:'+project.projectId] | hasRole) == false"
+                                    (selectionChange)="updateRoles(member, $event)">
+                                    <mat-option *ngFor="let role of memberRoleOptions" [value]="role">
+                                        {{ 'ROLES.'+role | translate }}
+                                    </mat-option>
+                                </mat-select>
+                            </mat-form-field>
                         </td>
                     </ng-container>
 
diff --git a/console/src/app/modules/project-members/project-members.component.scss b/console/src/app/modules/project-members/project-members.component.scss
index 1bd190f18..822552566 100644
--- a/console/src/app/modules/project-members/project-members.component.scss
+++ b/console/src/app/modules/project-members/project-members.component.scss
@@ -36,7 +36,7 @@
                 width: 100%;
                 display: block;
                 font-size: .9rem;
-                color: #81868a;
+                color: #8795a1;
             }
         }
     }
@@ -51,7 +51,7 @@
       flex-direction: column;
       .desc {
           font-size: .8rem;
-          color: #81868a;
+          color: #8795a1;
       }
       .count {
           font-size: 2rem;
@@ -109,15 +109,10 @@
             width: 50px;
             max-width: 50px;
         }
-
-        .role {
-            display: inline-block;
-            margin: .25rem;
-        }
     }
 }
 
 .pointer {
     outline: none;
     cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/console/src/app/modules/project-members/project-members.component.ts b/console/src/app/modules/project-members/project-members.component.ts
index fd6a1d196..55cb6a9d2 100644
--- a/console/src/app/modules/project-members/project-members.component.ts
+++ b/console/src/app/modules/project-members/project-members.component.ts
@@ -2,9 +2,10 @@ import { SelectionModel } from '@angular/cdk/collections';
 import { AfterViewInit, Component, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
+import { MatSelectChange } from '@angular/material/select';
 import { MatTable } from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
-import { tap } from 'rxjs/operators';
+import { take, tap } from 'rxjs/operators';
 import { ProjectMember, ProjectType, ProjectView, User } from 'src/app/proto/generated/management_pb';
 import { ProjectService } from 'src/app/services/project.service';
 import { ToastService } from 'src/app/services/toast.service';
@@ -25,6 +26,7 @@ export class ProjectMembersComponent implements AfterViewInit {
     @ViewChild(MatTable) public table!: MatTable<ProjectMember.AsObject>;
     public dataSource!: ProjectMembersDataSource;
     public selection: SelectionModel<ProjectMember.AsObject> = new SelectionModel<ProjectMember.AsObject>(true, []);
+    public memberRoleOptions: string[] = [];
 
     /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
     public displayedColumns: string[] = ['select', 'userId', 'firstname', 'lastname', 'username', 'email', 'roles'];
@@ -34,13 +36,24 @@ export class ProjectMembersComponent implements AfterViewInit {
         private dialog: MatDialog,
         private toast: ToastService,
         private route: ActivatedRoute) {
-        this.route.params.subscribe(params => {
-            this.projectService.GetProjectById(params.projectid).then(project => {
-                this.project = project.toObject();
-                this.dataSource = new ProjectMembersDataSource(this.projectService);
-                this.dataSource.loadMembers(this.project, this.projectType, 0, 25, 'asc');
+        this.route.data.pipe(take(1)).subscribe(data => {
+            this.projectType = data.type;
+            console.log(data);
+
+            this.getRoleOptions();
+
+            this.route.params.subscribe(params => {
+                console.log(params);
+
+                console.log(this.projectType);
+                this.projectService.GetProjectById(params.projectid).then(project => {
+                    this.project = project.toObject();
+                    this.dataSource = new ProjectMembersDataSource(this.projectService);
+                    this.dataSource.loadMembers(this.project, this.projectType, 0, 25, 'asc');
+                });
             });
         });
+
     }
 
     public ngAfterViewInit(): void {
@@ -52,6 +65,22 @@ export class ProjectMembersComponent implements AfterViewInit {
 
     }
 
+    public getRoleOptions(): void {
+        if (this.projectType === ProjectType.PROJECTTYPE_GRANTED) {
+            this.projectService.GetProjectGrantMemberRoles().then(resp => {
+                this.memberRoleOptions = resp.toObject().rolesList;
+            }).catch(error => {
+                this.toast.showError(error.message);
+            });
+        } else if (this.projectType === ProjectType.PROJECTTYPE_OWNED) {
+            this.projectService.GetProjectMemberRoles().then(resp => {
+                this.memberRoleOptions = resp.toObject().rolesList;
+            }).catch(error => {
+                this.toast.showError(error.message);
+            });
+        }
+    }
+
     private loadMembersPage(): void {
         this.dataSource.loadMembers(
             this.project,
@@ -117,4 +146,16 @@ export class ProjectMembersComponent implements AfterViewInit {
             }
         });
     }
+
+    updateRoles(member: ProjectMember.AsObject, selectionChange: MatSelectChange): void {
+        console.log(member, selectionChange.value);
+        this.projectService.ChangeProjectMember(this.project.projectId, member.userId, selectionChange.value)
+            .then((newmember: ProjectMember) => {
+                console.log(newmember.toObject());
+                this.toast.showInfo('Member updated!');
+            }).catch(error => {
+                this.toast.showError(error.message);
+            });
+
+    }
 }
diff --git a/console/src/app/modules/project-members/project-members.module.ts b/console/src/app/modules/project-members/project-members.module.ts
index e5dec2564..24d996ac5 100644
--- a/console/src/app/modules/project-members/project-members.module.ts
+++ b/console/src/app/modules/project-members/project-members.module.ts
@@ -5,14 +5,17 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatChipsModule } from '@angular/material/chips';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
+import { PipesModule } from 'src/app/pipes/pipes.module';
 
 import { ProjectMembersRoutingModule } from './project-members-routing.module';
 import { ProjectMembersComponent } from './project-members.component';
@@ -27,6 +30,8 @@ import { ProjectMembersComponent } from './project-members.component';
         HasRoleModule,
         MatChipsModule,
         MatButtonModule,
+        MatFormFieldModule,
+        MatSelectModule,
         MatCheckboxModule,
         MatIconModule,
         MatTableModule,
@@ -37,6 +42,7 @@ import { ProjectMembersComponent } from './project-members.component';
         MatProgressSpinnerModule,
         FormsModule,
         TranslateModule,
+        PipesModule,
     ],
 })
 export class ProjectMembersModule { }
diff --git a/console/src/app/modules/project-roles/project-roles.component.html b/console/src/app/modules/project-roles/project-roles.component.html
index 4ee9faa84..e57502464 100644
--- a/console/src/app/modules/project-roles/project-roles.component.html
+++ b/console/src/app/modules/project-roles/project-roles.component.html
@@ -33,14 +33,14 @@
     <table [dataSource]="dataSource" mat-table class="full-width-table" matSort aria-label="Elements">
         <ng-container matColumnDef="select">
             <th class="selection" mat-header-cell *matHeaderCellDef>
-                <mat-checkbox (change)="$event ? masterToggle() : null"
+                <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
                     [checked]="selection.hasValue() && isAllSelected()"
                     [indeterminate]="selection.hasValue() && !isAllSelected()">
                 </mat-checkbox>
             </th>
             <td class="selection" mat-cell *matCellDef="let row">
-                <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
-                    [checked]="selection.isSelected(row)">
+                <mat-checkbox color="primary" (click)="$event.stopPropagation()"
+                    (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
                 </mat-checkbox>
             </td>
         </ng-container>
diff --git a/console/src/app/modules/project-roles/project-roles.component.scss b/console/src/app/modules/project-roles/project-roles.component.scss
index b83d1f8e9..8a117e1a3 100644
--- a/console/src/app/modules/project-roles/project-roles.component.scss
+++ b/console/src/app/modules/project-roles/project-roles.component.scss
@@ -8,7 +8,7 @@
       flex-direction: column;
       .desc {
           font-size: .8rem;
-          color: #81868a;
+          color: #8795a1;
       }
       .count {
           font-size: 2rem;
diff --git a/console/src/app/modules/project-roles/project-roles.component.ts b/console/src/app/modules/project-roles/project-roles.component.ts
index c14075bc8..765710b45 100644
--- a/console/src/app/modules/project-roles/project-roles.component.ts
+++ b/console/src/app/modules/project-roles/project-roles.component.ts
@@ -31,6 +31,7 @@ export class ProjectRolesComponent implements AfterViewInit, OnInit {
     constructor(private projectService: ProjectService, private toast: ToastService) { }
 
     public ngOnInit(): void {
+        console.log(this.projectId);
         this.dataSource = new ProjectRolesDataSource(this.projectService);
         this.dataSource.loadRoles(this.projectId, 0, 25, 'asc');
 
diff --git a/console/src/app/modules/search-project-autocomplete/search-project-autocomplete.component.ts b/console/src/app/modules/search-project-autocomplete/search-project-autocomplete.component.ts
index c1ac7997a..cf25f9f14 100644
--- a/console/src/app/modules/search-project-autocomplete/search-project-autocomplete.component.ts
+++ b/console/src/app/modules/search-project-autocomplete/search-project-autocomplete.component.ts
@@ -3,7 +3,7 @@ import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@
 import { FormControl } from '@angular/forms';
 import { MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatChipInputEvent } from '@angular/material/chips';
-import { from, merge } from 'rxjs';
+import { forkJoin, from } from 'rxjs';
 import { debounceTime, switchMap, tap } from 'rxjs/operators';
 import {
     ProjectGrantView,
@@ -47,16 +47,15 @@ export class SearchProjectAutocompleteComponent {
                     const query = new ProjectSearchQuery();
                     query.setKey(ProjectSearchKey.PROJECTSEARCHKEY_PROJECT_NAME);
                     query.setValue(value);
-                    query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS);
-                    return merge(
+                    query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS_IGNORE_CASE);
+                    return forkJoin([
                         from(this.projectService.SearchGrantedProjects(10, 0, [query])),
                         from(this.projectService.SearchProjects(10, 0, [query])),
-                    );
+                    ]);
                 }),
-                // finalize(() => this.isLoading = false),
-            ).subscribe((projects) => {
+            ).subscribe(([granted, owned]) => {
                 this.isLoading = false;
-                this.filteredProjects = projects.toObject().resultList;
+                this.filteredProjects = [...owned.toObject().resultList, ...granted.toObject().resultList];
                 console.log(this.filteredProjects);
             });
     }
diff --git a/console/src/app/modules/search-roles-autocomplete/search-roles-autocomplete.component.ts b/console/src/app/modules/search-roles-autocomplete/search-roles-autocomplete.component.ts
index 1f59c893a..7a6fe9ec6 100644
--- a/console/src/app/modules/search-roles-autocomplete/search-roles-autocomplete.component.ts
+++ b/console/src/app/modules/search-roles-autocomplete/search-roles-autocomplete.component.ts
@@ -43,7 +43,7 @@ export class SearchRolesAutocompleteComponent {
                 switchMap(value => {
                     const query = new ProjectRoleSearchQuery();
                     query.setKey(ProjectRoleSearchKey.PROJECTROLESEARCHKEY_DISPLAY_NAME);
-                    query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS);
+                    query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS_IGNORE_CASE);
                     query.setValue(value);
                     return from(this.projectService.SearchProjectRoles(this.projectId, 10, 0, [query]));
                 }),
diff --git a/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.html b/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.html
index 214432e5b..d525436c3 100644
--- a/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.html
+++ b/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.html
@@ -17,11 +17,6 @@
                 (matChipInputTokenEnd)="add($event)" />
         </mat-chip-list>
 
-        <!-- <mat-hint *ngIf="hint">
-            {{hint}}
-            <a (click)=" changeTarget()">{{'USER.TARGET.CLICKHERE' | translate}}</a>
-        </mat-hint> -->
-
         <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" [displayWith]="displayFn">
             <mat-option *ngIf="isLoading" class="is-loading">
                 <mat-spinner diameter="30"></mat-spinner>
diff --git a/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.scss b/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.scss
index 900f76bea..b72c6d160 100644
--- a/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.scss
+++ b/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.scss
@@ -3,7 +3,7 @@
 }
 
 .target-desc {
-    color: #81868a;
+    color: #8795a1;
     font-size: .8rem;
     margin: 0;
     margin-bottom: 1rem;
@@ -42,5 +42,5 @@
 
 .found-label {
     font-size: .9rem;
-    color: #81868a;
+    color: #8795a1;
 }
\ No newline at end of file
diff --git a/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.ts b/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.ts
index d852d14fc..9b4877ad1 100644
--- a/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.ts
+++ b/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.ts
@@ -52,7 +52,7 @@ export class SearchUserAutocompleteComponent {
                 const query = new UserSearchQuery();
                 query.setKey(UserSearchKey.USERSEARCHKEY_EMAIL);
                 query.setValue(value);
-                query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS);
+                query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS_IGNORE_CASE);
                 if (this.target === UserTarget.SELF) {
                     return from(this.userService.SearchUsers(10, 0, [query]));
                 } else {
@@ -117,11 +117,11 @@ export class SearchUserAutocompleteComponent {
                     this.users = [this.filteredUsers[index]];
                 }
                 this.selectionChanged.emit(this.users);
+
+                this.usernameInput.nativeElement.value = '';
+                this.myControl.setValue(null);
             }
         }
-
-        this.usernameInput.nativeElement.value = '';
-        this.myControl.setValue(null);
     }
 
     public changeTarget(): void {
diff --git a/console/src/app/modules/user-grant/user-grant-routing.module.ts b/console/src/app/modules/user-grant/user-grant-routing.module.ts
new file mode 100644
index 000000000..1214c52fb
--- /dev/null
+++ b/console/src/app/modules/user-grant/user-grant-routing.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { UserGrantComponent } from './user-grant.component';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: UserGrantComponent,
+        data: { animation: 'AddPage' },
+    },
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule],
+})
+export class UserGrantRoutingModule { }
diff --git a/console/src/app/modules/user-grant/user-grant.component.html b/console/src/app/modules/user-grant/user-grant.component.html
new file mode 100644
index 000000000..0eb54548d
--- /dev/null
+++ b/console/src/app/modules/user-grant/user-grant.component.html
@@ -0,0 +1,15 @@
+<div class="max-width-container">
+    <div class="container">
+        <div class="left">
+            <a *ngIf="userid" [routerLink]="[ '/users', userid]" mat-icon-button>
+                <mat-icon class="icon">arrow_back</mat-icon>
+            </a>
+        </div>
+        <div class="right">
+            <div class="head">
+                <h1>{{ 'GRANTS.DETAIL.TITLE' | translate }}</h1>
+                <p class="desc">{{ 'GRANTS.DETAIL.DESCRIPTION' | translate }}</p>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/console/src/app/modules/user-grant/user-grant.component.scss b/console/src/app/modules/user-grant/user-grant.component.scss
new file mode 100644
index 000000000..17fa11bf7
--- /dev/null
+++ b/console/src/app/modules/user-grant/user-grant.component.scss
@@ -0,0 +1,43 @@
+.container {
+    display: flex;
+    padding-bottom: 3rem;
+
+    .left {
+        width: 100px;
+        display: flex;
+        padding: 1rem;
+        justify-content: center;
+
+        a {
+            margin-top: .2rem;
+        }
+    }
+
+    .right {
+        flex: 1;
+        padding-top: 1rem;
+
+        .head {
+            display: flex;
+            align-items: center;
+            border-bottom: 1px solid #ffffff20;
+            margin-bottom: 2rem;
+            flex-wrap: wrap;
+          
+            a {
+                display: block;
+            }
+          
+            h1 {
+                font-size: 1.2rem;
+            }
+          
+            .desc {
+                width: 100%;
+                display: block;
+                font-size: .9rem;
+                color: #8795a1;
+            }
+        }
+    }
+}
diff --git a/console/src/app/modules/user-grant/user-grant.component.spec.ts b/console/src/app/modules/user-grant/user-grant.component.spec.ts
new file mode 100644
index 000000000..ee7c889c0
--- /dev/null
+++ b/console/src/app/modules/user-grant/user-grant.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserGrantComponent } from './user-grant.component';
+
+describe('UserGrantComponent', () => {
+    let component: UserGrantComponent;
+    let fixture: ComponentFixture<UserGrantComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [UserGrantComponent],
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(UserGrantComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/console/src/app/modules/user-grant/user-grant.component.ts b/console/src/app/modules/user-grant/user-grant.component.ts
new file mode 100644
index 000000000..a3da815de
--- /dev/null
+++ b/console/src/app/modules/user-grant/user-grant.component.ts
@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { UserGrantView } from 'src/app/proto/generated/management_pb';
+import { MgmtUserService } from 'src/app/services/mgmt-user.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+@Component({
+    selector: 'app-user-grant',
+    templateUrl: './user-grant.component.html',
+    styleUrls: ['./user-grant.component.scss'],
+})
+export class UserGrantComponent implements OnInit {
+    public userid: string = '';
+    public grantid: string = '';
+
+    public grantView!: UserGrantView.AsObject;
+    constructor(
+        private mgmtUserService: MgmtUserService,
+        private route: ActivatedRoute,
+        private toast: ToastService,
+    ) {
+        this.route.params.subscribe(params => {
+            this.userid = params.projectid;
+            this.grantid = params.grantid;
+
+            this.mgmtUserService.UserGrantByID(this.grantid, this.userid).then(resp => {
+                this.grantView = resp.toObject();
+                console.log(this.grantView);
+            });
+        });
+    }
+
+    ngOnInit(): void {
+    }
+
+    updateGrant(): void {
+        this.mgmtUserService.UpdateUserGrant(this.grantid, this.userid, this.grantView.roleKeysList).then(() => {
+            this.toast.showInfo('Roles updated');
+        }).catch(error => {
+            this.toast.showError(error.message);
+        });
+    }
+
+}
diff --git a/console/src/app/modules/user-grant/user-grant.module.ts b/console/src/app/modules/user-grant/user-grant.module.ts
new file mode 100644
index 000000000..bbcb0095e
--- /dev/null
+++ b/console/src/app/modules/user-grant/user-grant.module.ts
@@ -0,0 +1,29 @@
+import { CommonModule } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { HttpLoaderFactory } from 'src/app/app.module';
+
+import { UserGrantRoutingModule } from './user-grant-routing.module';
+import { UserGrantComponent } from './user-grant.component';
+
+@NgModule({
+    declarations: [UserGrantComponent],
+    imports: [
+        CommonModule,
+        UserGrantRoutingModule,
+        MatIconModule,
+        MatButtonModule,
+        TranslateModule.forChild({
+            loader: {
+                provide: TranslateLoader,
+                useFactory: HttpLoaderFactory,
+                deps: [HttpClient],
+            },
+        }),
+    ],
+    schemas: [],
+})
+export class UserGrantModule { }
diff --git a/console/src/app/pages/user-detail/user-grants/user-grants-datasource.ts b/console/src/app/modules/user-grants/user-grants-datasource.ts
similarity index 91%
rename from console/src/app/pages/user-detail/user-grants/user-grants-datasource.ts
rename to console/src/app/modules/user-grants/user-grants-datasource.ts
index a78355816..3cea1f8e7 100644
--- a/console/src/app/pages/user-detail/user-grants/user-grants-datasource.ts
+++ b/console/src/app/modules/user-grants/user-grants-datasource.ts
@@ -14,17 +14,20 @@ export class UserGrantsDataSource extends DataSource<UserGrant.AsObject> {
         super();
     }
 
-    public loadGrants(userId: string, pageIndex: number, pageSize: number): void {
+    public loadGrants(filter: UserGrantSearchKey, userId: string, pageIndex: number, pageSize: number): void {
         const offset = pageIndex * pageSize;
 
         this.loadingSubject.next(true);
+
         const query = new UserGrantSearchQuery();
-        query.setKey(UserGrantSearchKey.USERGRANTSEARCHKEY_USER_ID);
+        query.setKey(filter);
         query.setValue(userId);
+
         const queries: UserGrantSearchQuery[] = [query];
         from(this.userService.SearchUserGrants(10, 0, queries)).pipe(
             map(resp => {
                 this.totalResult = resp.toObject().totalResult;
+                console.log(resp.toObject().resultList);
                 return resp.toObject().resultList;
             }),
             catchError(() => of([])),
diff --git a/console/src/app/pages/user-detail/user-grants/user-grants.component.html b/console/src/app/modules/user-grants/user-grants.component.html
similarity index 51%
rename from console/src/app/pages/user-detail/user-grants/user-grants.component.html
rename to console/src/app/modules/user-grants/user-grants.component.html
index 782f1ba06..6aefd7006 100644
--- a/console/src/app/pages/user-detail/user-grants/user-grants.component.html
+++ b/console/src/app/modules/user-grants/user-grants.component.html
@@ -10,18 +10,14 @@
         </ng-container>
     </div>
     <span class="fill-space"></span>
-    <ng-template appHasRole [appHasRole]="['user.grant.delete:'+userId,'user.grant.delete']">
-        <button color="warn" matTooltip="{{'GRANTS.DELETE' | translate}}" class="icon-button" mat-icon-button
-            *ngIf="selection.hasValue()">
-            <i class="las la-trash"></i>
-        </button>
-    </ng-template>
-    <ng-template appHasRole [appHasRole]="['user.grant.write:'+userId,'user.grant.write']">
-        <a matTooltip="{{'GRANTS.ADD' | translate}}" color="primary" class="add-button" color="primary"
-            mat-raised-button [routerLink]="['grant-create']">
-            <mat-icon class="icon">add</mat-icon>{{ 'GRANTS.ADD_BTN' | translate }}
-        </a>
-    </ng-template>
+    <button color="warn" matTooltip="{{'GRANTS.DELETE' | translate}}" class="icon-button" mat-icon-button
+        *ngIf="selection.hasValue() && allowDelete">
+        <i class="las la-trash"></i>
+    </button>
+    <a *ngIf="allowCreate" matTooltip="{{'GRANTS.ADD' | translate}}" color="primary" class="add-button" color="primary"
+        mat-raised-button [routerLink]="['/grant-create', {filter: filter, filterValue: filterValue}]">
+        <mat-icon class="icon">add</mat-icon>{{ 'GRANTS.ADD_BTN' | translate }}
+    </a>
 </div>
 
 <div class="table-wrapper">
@@ -32,22 +28,32 @@
 
         <ng-container matColumnDef="select">
             <th class="selection" mat-header-cell *matHeaderCellDef>
-                <mat-checkbox (change)="$event ? masterToggle() : null"
+                <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
                     [checked]="selection.hasValue() && isAllSelected()"
                     [indeterminate]="selection.hasValue() && !isAllSelected()">
                 </mat-checkbox>
             </th>
             <td class="selection" mat-cell *matCellDef="let row">
-                <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
-                    [checked]="selection.isSelected(row)">
+                <mat-checkbox color="primary" (click)="$event.stopPropagation()"
+                    (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
+                    <app-avatar *ngIf="row && (row?.displayName || (row.firstName && row.lastName))" class="avatar"
+                        [name]="row.displayName ? row.displayName : (row.firstName + ' '+ row.lastName)" [size]="32">
+                    </app-avatar>
                 </mat-checkbox>
             </td>
         </ng-container>
 
-        <ng-container matColumnDef="orgId">
+
+        <ng-container matColumnDef="user">
+            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.USER' | translate }} </th>
+            <td class="pointer" mat-cell *matCellDef="let grant">
+                {{grant?.firstName}} {{grant?.lastName}}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="org">
             <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.GRANTEDORGDOMAIN' | translate }} </th>
             <td class="pointer" mat-cell *matCellDef="let grant">
-                {{grant.orgDomain}} </td>
+                {{grant.orgDomain}} {{grant.orgName}} </td>
         </ng-container>
 
         <ng-container matColumnDef="projectId">
@@ -71,12 +77,30 @@
 
         <ng-container matColumnDef="roleNamesList">
             <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }} </th>
-            <td class="pointer" mat-cell *matCellDef="let grant">
-                <span class="role" *ngFor="let role of grant.roleNamesList">{{role}}</span> </td>
+            <td mat-cell *matCellDef="let grant">
+                <!-- TODO check behaviour for empty role projects -->
+                <ng-container *ngIf="roleOptions.length === 0; else showOptions">
+                    <span class="role app-label" *ngFor="let role of grant.roleKeysList">{{role}}</span>
+                    <button mat-icon-button (click)="loadRoleOptions(grant.projectId)">
+                        <mat-icon>edit</mat-icon>
+                    </button>
+                </ng-container>
+                <ng-template #showOptions>
+                    <mat-form-field class="form-field" appearance="outline" *ngIf="filterValue">
+                        <mat-label>{{ 'PROJECT.GRANT.TITLE' | translate }}</mat-label>
+                        <mat-select [(ngModel)]="grant.roleKeysList" multiple [disabled]="allowCreate == false"
+                            (selectionChange)="updateRoles(grant, $event)">
+                            <mat-option *ngFor="let role of roleOptions" [value]="role.key">
+                                {{ role.displayName }} {{role.key}}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                </ng-template>
+            </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr mat-row *matRowDef="let element; columns: displayedColumns;" class="element-row">
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="element-row">
         </tr>
     </table>
 
diff --git a/console/src/app/pages/user-detail/user-grants/user-grants.component.scss b/console/src/app/modules/user-grants/user-grants.component.scss
similarity index 75%
rename from console/src/app/pages/user-detail/user-grants/user-grants.component.scss
rename to console/src/app/modules/user-grants/user-grants.component.scss
index bfc69b6a2..8b2bab25b 100644
--- a/console/src/app/pages/user-detail/user-grants/user-grants.component.scss
+++ b/console/src/app/modules/user-grants/user-grants.component.scss
@@ -8,7 +8,7 @@
       flex-direction: column;
       .desc {
           font-size: .8rem;
-          color: #81868a;
+          color: #8795a1;
       }
       .count {
           font-size: 2rem;
@@ -42,9 +42,12 @@
         background-color: #2d2e30;
 
         td, th {
+            padding-left: .5rem;
+            padding-right: .5rem;
+
             &:first-child {
                 padding-left: 0;
-                padding-right: 1rem;
+                padding-right: .5rem;
             }
 
             &:last-child {
@@ -59,14 +62,8 @@
 
         .role {
             display: inline-block;
-            border-radius: .5rem;
-            border: 1px solid #ffffff30;
-            padding: .5rem 1rem;
-            margin-top: .25rem;
-            margin-bottom: .25rem;
-            margin-left: 0;
-            margin-right: .5rem;
-          }
+            margin: .25rem;
+        }
     }
 }
 
diff --git a/console/src/app/pages/user-detail/user-grants/user-grants.component.spec.ts b/console/src/app/modules/user-grants/user-grants.component.spec.ts
similarity index 100%
rename from console/src/app/pages/user-detail/user-grants/user-grants.component.spec.ts
rename to console/src/app/modules/user-grants/user-grants.component.spec.ts
diff --git a/console/src/app/modules/user-grants/user-grants.component.ts b/console/src/app/modules/user-grants/user-grants.component.ts
new file mode 100644
index 000000000..02b933a30
--- /dev/null
+++ b/console/src/app/modules/user-grants/user-grants.component.ts
@@ -0,0 +1,106 @@
+import { SelectionModel } from '@angular/cdk/collections';
+import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSelectChange } from '@angular/material/select';
+import { MatTable } from '@angular/material/table';
+import { tap } from 'rxjs/operators';
+import { ProjectGrant, ProjectRoleView, UserGrant, UserGrantSearchKey } from 'src/app/proto/generated/management_pb';
+import { MgmtUserService } from 'src/app/services/mgmt-user.service';
+import { ProjectService } from 'src/app/services/project.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+import { UserGrantsDataSource } from './user-grants-datasource';
+
+@Component({
+    selector: 'app-user-grants',
+    templateUrl: './user-grants.component.html',
+    styleUrls: ['./user-grants.component.scss'],
+})
+export class UserGrantsComponent implements OnInit, AfterViewInit {
+    @Input() filterValue: string = '';
+    @Input() filter: UserGrantSearchKey = UserGrantSearchKey.USERGRANTSEARCHKEY_USER_ID;
+    public grants: UserGrant.AsObject[] = [];
+
+    public dataSource!: UserGrantsDataSource;
+    public selection: SelectionModel<UserGrant.AsObject> = new SelectionModel<UserGrant.AsObject>(true, []);
+    @ViewChild(MatPaginator) public paginator!: MatPaginator;
+    @ViewChild(MatTable) public table!: MatTable<ProjectGrant.AsObject>;
+
+    @Input() allowCreate: boolean = false;
+    @Input() allowDelete: boolean = false;
+
+    public roleOptions: ProjectRoleView.AsObject[] = [];
+
+    constructor(
+        private userService: MgmtUserService,
+        private projectService: ProjectService,
+        private toast: ToastService,
+    ) { }
+
+    public displayedColumns: string[] = ['select',
+        'user',
+        'org',
+        'projectId', 'creationDate', 'changeDate', 'roleNamesList'];
+
+    public ngOnInit(): void {
+        this.dataSource = new UserGrantsDataSource(this.userService);
+        this.dataSource.loadGrants(this.filter, this.filterValue, 0, 25);
+
+        if (this.filter === UserGrantSearchKey.USERGRANTSEARCHKEY_PROJECT_ID) {
+            this.getRoleOptions(this.filterValue);
+        }
+    }
+
+    public ngAfterViewInit(): void {
+        this.paginator.page
+            .pipe(
+                tap(() => this.loadGrantsPage()),
+            )
+            .subscribe();
+    }
+
+    private loadGrantsPage(): void {
+        this.dataSource.loadGrants(
+            this.filter,
+            this.filterValue,
+            this.paginator.pageIndex,
+            this.paginator.pageSize,
+        );
+    }
+
+    public isAllSelected(): boolean {
+        const numSelected = this.selection.selected.length;
+        const numRows = this.dataSource.grantsSubject.value.length;
+        return numSelected === numRows;
+    }
+
+    public masterToggle(): void {
+        this.isAllSelected() ?
+            this.selection.clear() :
+            this.dataSource.grantsSubject.value.forEach(row => this.selection.select(row));
+    }
+
+    public loadRoleOptions(projectId: string): void {
+        if (this.filter === UserGrantSearchKey.USERGRANTSEARCHKEY_USER_ID) {
+            this.getRoleOptions(projectId);
+        }
+    }
+
+    public getRoleOptions(projectId: string): void {
+        this.projectService.SearchProjectRoles(projectId, 100, 0).then(resp => {
+            this.roleOptions = resp.toObject().resultList;
+            console.log(this.roleOptions);
+        });
+    }
+
+    updateRoles(grant: UserGrant.AsObject, selectionChange: MatSelectChange): void {
+        console.log(grant, selectionChange.value);
+        this.userService.UpdateUserGrant(grant.id, grant.userId, selectionChange.value)
+            .then((newmember: UserGrant) => {
+                console.log(newmember.toObject());
+                this.toast.showInfo('Grant updated!');
+            }).catch(error => {
+                this.toast.showError(error.message);
+            });
+    }
+}
diff --git a/console/src/app/pages/user-detail/user-grants/user-grants.module.ts b/console/src/app/modules/user-grants/user-grants.module.ts
similarity index 84%
rename from console/src/app/pages/user-detail/user-grants/user-grants.module.ts
rename to console/src/app/modules/user-grants/user-grants.module.ts
index 218a02420..48a96d2c3 100644
--- a/console/src/app/pages/user-detail/user-grants/user-grants.module.ts
+++ b/console/src/app/modules/user-grants/user-grants.module.ts
@@ -3,9 +3,11 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
 import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
@@ -13,6 +15,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { PipesModule } from 'src/app/pipes/pipes.module';
 
+import { AvatarModule } from '../avatar/avatar.module';
 import { UserGrantsComponent } from './user-grants.component';
 
 
@@ -22,6 +25,7 @@ import { UserGrantsComponent } from './user-grants.component';
     imports: [
         CommonModule,
         FormsModule,
+        AvatarModule,
         MatButtonModule,
         HasRoleModule,
         MatTableModule,
@@ -31,6 +35,8 @@ import { UserGrantsComponent } from './user-grants.component';
         MatProgressSpinnerModule,
         MatCheckboxModule,
         MatTooltipModule,
+        MatSelectModule,
+        MatFormFieldModule,
         TranslateModule,
         PipesModule,
     ],
diff --git a/console/src/app/pages/apps/app-detail/app-detail.component.scss b/console/src/app/pages/apps/app-detail/app-detail.component.scss
index 7fa5a94d6..a83a7d3cb 100644
--- a/console/src/app/pages/apps/app-detail/app-detail.component.scss
+++ b/console/src/app/pages/apps/app-detail/app-detail.component.scss
@@ -19,7 +19,7 @@
         width: 100%;
         display: block;
         font-size: .9rem;
-        color: #81868a;
+        color: #8795a1;
     }
 
     .zitadel-warning {
diff --git a/console/src/app/pages/apps/app-secret-dialog/app-secret-dialog.component.scss b/console/src/app/pages/apps/app-secret-dialog/app-secret-dialog.component.scss
index a1ecbe391..c0114c013 100644
--- a/console/src/app/pages/apps/app-secret-dialog/app-secret-dialog.component.scss
+++ b/console/src/app/pages/apps/app-secret-dialog/app-secret-dialog.component.scss
@@ -3,7 +3,7 @@
   }
   
   .desc {
-      color: #81868a;
+      color: #8795a1;
       font-size: .9rem;
   }
 
diff --git a/console/src/app/pages/granted-projects/granted-project-detail/granted-project-detail.component.html b/console/src/app/pages/granted-projects/granted-project-detail/granted-project-detail.component.html
index c600389d7..d3b415705 100644
--- a/console/src/app/pages/granted-projects/granted-project-detail/granted-project-detail.component.html
+++ b/console/src/app/pages/granted-projects/granted-project-detail/granted-project-detail.component.html
@@ -12,11 +12,15 @@
             </div>
         </div>
 
-        <app-card>
-            <app-project-grant-members *ngIf="project && project.projectId && project.id"
-                [disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE || isZitadel" [project]="project">
-            </app-project-grant-members>
+        <!-- <ng-template appHasRole [appHasRole]="['project.grant.user.grant.read']"> -->
+        <app-card *ngIf="project?.projectId" title="{{ 'GRANTS.PROJECT.TITLE' | translate }}"
+            description="{{'GRANTS.PROJECT.DESCRIPTION' | translate }}">
+            <app-user-grants [filter]="userGrantSearchKey" [filterValue]="project.projectId"
+                [allowCreate]="['project.grant.user.grant.write'] | hasRole"
+                [allowDelete]="['project.grant.user.grant.delete'] | hasRole">
+            </app-user-grants>
         </app-card>
+        <!-- </ng-template> -->
     </div>
     <metainfo class="side">
         <div class="details">
diff --git a/console/src/app/pages/granted-projects/granted-project-detail/granted-project-detail.component.scss b/console/src/app/pages/granted-projects/granted-project-detail/granted-project-detail.component.scss
index 9b5efd6a5..a7c919086 100644
--- a/console/src/app/pages/granted-projects/granted-project-detail/granted-project-detail.component.scss
+++ b/console/src/app/pages/granted-projects/granted-project-detail/granted-project-detail.component.scss
@@ -31,7 +31,7 @@
 
         .desc {
             font-size: .9rem;
-            color: #81868a;
+            color: #8795a1;
         }
 
         .zitadel-warning {
@@ -53,7 +53,16 @@
     }
 }
 
+h1 {
+    font-size: 1.2rem;
+}
 
+.desc {
+    width: 100%;
+    display: block;
+    font-size: .9rem;
+    color: #8795a1;
+}
 
 .side {
     .details {
@@ -107,7 +116,7 @@
         }
 
         .side-section {
-            color: #81868a;
+            color: #8795a1;
         }
     } 
 
diff --git a/console/src/app/pages/granted-projects/granted-project-detail/granted-project-detail.component.ts b/console/src/app/pages/granted-projects/granted-project-detail/granted-project-detail.component.ts
index de8e5a4e8..64135bff1 100644
--- a/console/src/app/pages/granted-projects/granted-project-detail/granted-project-detail.component.ts
+++ b/console/src/app/pages/granted-projects/granted-project-detail/granted-project-detail.component.ts
@@ -16,6 +16,7 @@ import {
     ProjectRoleSearchResponse,
     ProjectState,
     ProjectType,
+    UserGrantSearchKey,
 } from 'src/app/proto/generated/management_pb';
 import { OrgService } from 'src/app/services/org.service';
 import { ProjectService } from 'src/app/services/project.service';
@@ -57,6 +58,8 @@ export class GrantedProjectDetailComponent implements OnInit, OnDestroy {
 
     public isZitadel: boolean = false;
 
+    public userGrantSearchKey: UserGrantSearchKey = UserGrantSearchKey.USERGRANTSEARCHKEY_PROJECT_ID;
+
     constructor(
         public translate: TranslateService,
         private route: ActivatedRoute,
@@ -86,6 +89,7 @@ export class GrantedProjectDetailComponent implements OnInit, OnDestroy {
         if (this.projectId && this.grantId) {
             this.projectService.GetGrantedProjectByID(this.projectId, this.grantId).then(proj => {
                 this.project = proj.toObject();
+                console.log(this.project);
             }).catch(error => {
                 this.toast.showError(error.message);
             });
diff --git a/console/src/app/pages/granted-projects/granted-project-grid/granted-project-grid.component.scss b/console/src/app/pages/granted-projects/granted-project-grid/granted-project-grid.component.scss
index fe0ce491b..18de27eee 100644
--- a/console/src/app/pages/granted-projects/granted-project-grid/granted-project-grid.component.scss
+++ b/console/src/app/pages/granted-projects/granted-project-grid/granted-project-grid.component.scss
@@ -49,7 +49,7 @@
         min-height: 166px;
 
         &.inactive {
-            color: #81868a;
+            color: #8795a1;
         }
 
         .selection-icon {
@@ -81,7 +81,7 @@
                 font-size: 0.8rem;
                 margin-bottom: 0;
                 margin-top: .5rem;
-                color: #81868a;
+                color: #8795a1;
             }
 
             .name {
@@ -97,7 +97,7 @@
 
             .created {
                 font-size: 0.8rem;
-                color: #81868a;
+                color: #8795a1;
             }
 
             .organization {
@@ -127,7 +127,7 @@
                     margin-right: 3px;
                     font-size: 1.3rem;
                     height: 1.4rem;
-                    color: #81868a;
+                    color: #8795a1;
                 }
             }
 
@@ -215,5 +215,5 @@
     flex-basis: 100%;
     padding: 0 1rem;
     font-size: .8rem;
-    color: #81868a;
+    color: #8795a1;
 }
diff --git a/console/src/app/pages/granted-projects/granted-project-grid/granted-project-grid.component.ts b/console/src/app/pages/granted-projects/granted-project-grid/granted-project-grid.component.ts
index 59711bf64..9674bbf4e 100644
--- a/console/src/app/pages/granted-projects/granted-project-grid/granted-project-grid.component.ts
+++ b/console/src/app/pages/granted-projects/granted-project-grid/granted-project-grid.component.ts
@@ -47,9 +47,9 @@ export class GrantedProjectGridComponent {
 
     public selectItem(item: ProjectGrantView.AsObject, event?: any): void {
         if (event && !event.target.classList.contains('mat-icon')) {
-            this.router.navigate(['projects', item.projectId, 'grant', `${item.id}`]);
+            this.router.navigate(['granted-projects', item.projectId, 'grant', `${item.id}`]);
         } else if (!event) {
-            this.router.navigate(['projects', item.projectId, 'grant', `${item.id}`]);
+            this.router.navigate(['granted-projects', item.projectId, 'grant', `${item.id}`]);
         }
     }
 
diff --git a/console/src/app/pages/granted-projects/granted-project-list/granted-project-list.component.html b/console/src/app/pages/granted-projects/granted-project-list/granted-project-list.component.html
index 4a8bdbd7e..eb043daae 100644
--- a/console/src/app/pages/granted-projects/granted-project-list/granted-project-list.component.html
+++ b/console/src/app/pages/granted-projects/granted-project-list/granted-project-list.component.html
@@ -39,14 +39,14 @@
         <table class="background-style" mat-table [dataSource]="dataSource">
             <ng-container matColumnDef="select">
                 <th class="selection" mat-header-cell *matHeaderCellDef>
-                    <mat-checkbox (change)="$event ? masterToggle() : null"
+                    <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
                         [checked]="selection.hasValue() && isAllSelected()"
                         [indeterminate]="selection.hasValue() && !isAllSelected()">
                     </mat-checkbox>
                 </th>
                 <td class="selection" mat-cell *matCellDef="let row">
-                    <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
-                        [checked]="selection.isSelected(row)">
+                    <mat-checkbox color="primary" (click)="$event.stopPropagation()"
+                        (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
                     </mat-checkbox>
                 </td>
             </ng-container>
@@ -93,7 +93,7 @@
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
-                [routerLink]="['/projects', row.id]"></tr>
+                [routerLink]="['/granted-projects', row.id]"></tr>
 
         </table>
         <mat-paginator class="background-style" [length]="totalResult" [pageSize]="10" [pageSizeOptions]="[5, 10, 20]"
diff --git a/console/src/app/pages/granted-projects/granted-project-list/granted-project-list.component.scss b/console/src/app/pages/granted-projects/granted-project-list/granted-project-list.component.scss
index d83781840..149669419 100644
--- a/console/src/app/pages/granted-projects/granted-project-list/granted-project-list.component.scss
+++ b/console/src/app/pages/granted-projects/granted-project-list/granted-project-list.component.scss
@@ -31,7 +31,7 @@
         flex-direction: column;
         .desc {
             font-size: .8rem;
-            color: #81868a;
+            color: #8795a1;
         }
         .count {
             font-size: 2rem;
diff --git a/console/src/app/pages/granted-projects/granted-projects-routing.module.ts b/console/src/app/pages/granted-projects/granted-projects-routing.module.ts
index 8d31c2aec..be129a9ec 100644
--- a/console/src/app/pages/granted-projects/granted-projects-routing.module.ts
+++ b/console/src/app/pages/granted-projects/granted-projects-routing.module.ts
@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { AuthGuard } from 'src/app/guards/auth.guard';
 import { RoleGuard } from 'src/app/guards/role.guard';
+import { ProjectType } from 'src/app/proto/generated/management_pb';
 
 import { GrantedProjectDetailComponent } from './granted-project-detail/granted-project-detail.component';
 import { GrantedProjectsComponent } from './granted-projects.component';
@@ -20,15 +21,18 @@ const routes: Routes = [
             roles: ['project.write'],
         },
     },
+    {
+        path: ':projectid/members',
+        data: {
+            type: ProjectType.PROJECTTYPE_GRANTED,
+        },
+        loadChildren: () => import('../../modules/project-members/project-members.module').then(m => m.ProjectMembersModule),
+    },
     {
         path: ':id/grant/:grantId',
         component: GrantedProjectDetailComponent,
         data: { animation: 'HomePage' },
     },
-    {
-        path: ':projectid/members',
-        loadChildren: () => import('../../modules/project-members/project-members.module').then(m => m.ProjectMembersModule),
-    },
     {
         path: ':projectid/roles/create',
         loadChildren: () => import('../project-role-create/project-role-create.module').then(m => m.ProjectRoleCreateModule),
diff --git a/console/src/app/pages/granted-projects/granted-projects.component.html b/console/src/app/pages/granted-projects/granted-projects.component.html
index c6b4b857b..2abb92c15 100644
--- a/console/src/app/pages/granted-projects/granted-projects.component.html
+++ b/console/src/app/pages/granted-projects/granted-projects.component.html
@@ -2,7 +2,7 @@
     <h1>{{ 'PROJECT.PAGES.LIST' | translate }}</h1>
     <p class="sub">{{ 'PROJECT.PAGES.LISTDESCRIPTION' | translate }}</p>
 
-    <h2>Granted Projects</h2>
+    <h2>{{'PROJECT.PAGES.TYPE.GRANTED' | translate}}</h2>
     <app-granted-project-list>
     </app-granted-project-list>
 </div>
\ No newline at end of file
diff --git a/console/src/app/pages/granted-projects/granted-projects.component.scss b/console/src/app/pages/granted-projects/granted-projects.component.scss
index cd0c0ac06..137328cfe 100644
--- a/console/src/app/pages/granted-projects/granted-projects.component.scss
+++ b/console/src/app/pages/granted-projects/granted-projects.component.scss
@@ -4,7 +4,7 @@ h1 {
 }
 
 .sub {
-    color: #81868a;
+    color: #8795a1;
     margin-bottom: 2rem;
 }
 
diff --git a/console/src/app/pages/granted-projects/granted-projects.module.ts b/console/src/app/pages/granted-projects/granted-projects.module.ts
index 6012df3bb..89feee4bc 100644
--- a/console/src/app/pages/granted-projects/granted-projects.module.ts
+++ b/console/src/app/pages/granted-projects/granted-projects.module.ts
@@ -20,6 +20,7 @@ import { MatTableModule } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { UserGrantsModule } from 'src/app/modules/user-grants/user-grants.module';
 
 import { HttpLoaderFactory } from '../../app.module';
 import { HasRoleModule } from '../../directives/has-role/has-role.module';
@@ -47,6 +48,7 @@ import { GrantedProjectsComponent } from './granted-projects.component';
     ],
     imports: [
         CommonModule,
+        UserGrantsModule,
         GrantedProjectsRoutingModule,
         ProjectContributorsModule,
         FormsModule,
diff --git a/console/src/app/pages/home/home.component.html b/console/src/app/pages/home/home.component.html
index fa420fdf6..91c6a931b 100644
--- a/console/src/app/pages/home/home.component.html
+++ b/console/src/app/pages/home/home.component.html
@@ -8,7 +8,7 @@
 
     <div class="container">
         <ng-template appHasRole [appHasRole]="['iam.write']">
-            <div class="item">
+            <div class="item card">
                 <div class="top">
                     <h2>
                         <i class="icon las la-gem"></i>
@@ -22,7 +22,7 @@
             </div>
         </ng-template>
 
-        <div class="item">
+        <div class="item card">
             <div class="top">
                 <h2> <i class="icon las la-user-circle"></i>
                     {{'HOME.SECURITYANDPRIVACY'| translate}}</h2>
@@ -36,7 +36,7 @@
         </div>
 
         <ng-template appHasRole [appHasRole]="['project.read']">
-            <div class="item">
+            <div class="item card">
                 <div class="top">
                     <h2>
                         <i class="icon las la-layer-group"></i>
@@ -51,7 +51,7 @@
         </ng-template>
 
         <ng-template appHasRole [appHasRole]="['org.read']">
-            <div class="item">
+            <div class="item card">
                 <div class="top">
                     <h2> <i class="icon las la-archway"></i>
                         {{'HOME.PROTECTION'| translate}}</h2>
@@ -66,7 +66,7 @@
         </ng-template>
 
         <ng-template appHasRole [appHasRole]="['user.read']">
-            <div class="item">
+            <div class="item card">
                 <div class="top">
                     <h2>
                         <i class="las la-crosshairs"></i>
diff --git a/console/src/app/pages/home/home.component.scss b/console/src/app/pages/home/home.component.scss
index 9a95cc959..5e560041e 100644
--- a/console/src/app/pages/home/home.component.scss
+++ b/console/src/app/pages/home/home.component.scss
@@ -46,7 +46,7 @@
 			font-family: ailerons;
 		}
 		p {
-			color: #81868a;
+			color: #8795a1;
 			text-align: center;
             font-size: 1rem;
             margin: 0;
@@ -85,7 +85,7 @@
 
 				p {
 					display: block;
-					color: #81868a;
+					color: #8795a1;
 					font-size: .9rem;
                 }
                 
@@ -105,7 +105,11 @@
 				display: flex;
 				align-items: center;
 				padding: 0 1rem;
-				border-top: 1px solid #ffffff20;
+                border-top: 1px solid #ffffff20;
+                
+                a {
+                    border-radius: .5rem;
+                }
 			}
 		}
 	}
diff --git a/console/src/app/pages/iam/iam-contributors/iam-contributors.component.scss b/console/src/app/pages/iam/iam-contributors/iam-contributors.component.scss
index 9585a8cd4..1d9b82ea2 100644
--- a/console/src/app/pages/iam/iam-contributors/iam-contributors.component.scss
+++ b/console/src/app/pages/iam/iam-contributors/iam-contributors.component.scss
@@ -9,7 +9,7 @@
 
     .sub-header {
         font-size: .8rem;
-        color: #81868a;
+        color: #8795a1;
     }
   
     .people {
@@ -35,7 +35,6 @@
           height: 32px;
           width: 32px;
           border-radius: 50%;
-          box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0, 0, 0, 0.5);
         }
 
         .add-img {
diff --git a/console/src/app/pages/iam/iam-members/iam-members.component.html b/console/src/app/pages/iam/iam-members/iam-members.component.html
index 2153ef5b6..f57343fe8 100644
--- a/console/src/app/pages/iam/iam-members/iam-members.component.html
+++ b/console/src/app/pages/iam/iam-members/iam-members.component.html
@@ -38,13 +38,13 @@
             <table mat-table class="background-style full-width-table" aria-label="Elements" [dataSource]="dataSource">
                 <ng-container matColumnDef="select">
                     <th class="selection" mat-header-cell *matHeaderCellDef>
-                        <mat-checkbox (change)="$event ? masterToggle() : null"
+                        <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
                             [checked]="selection.hasValue() && isAllSelected()"
                             [indeterminate]="selection.hasValue() && !isAllSelected()">
                         </mat-checkbox>
                     </th>
                     <td class="selection" mat-cell *matCellDef="let row">
-                        <mat-checkbox (click)="$event.stopPropagation()"
+                        <mat-checkbox color="primary" (click)="$event.stopPropagation()"
                             (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
                         </mat-checkbox>
                     </td>
diff --git a/console/src/app/pages/iam/iam-members/iam-members.component.scss b/console/src/app/pages/iam/iam-members/iam-members.component.scss
index 2d707d205..b66a6f7b3 100644
--- a/console/src/app/pages/iam/iam-members/iam-members.component.scss
+++ b/console/src/app/pages/iam/iam-members/iam-members.component.scss
@@ -20,7 +20,7 @@
             width: 100%;
             display: block;
             font-size: .9rem;
-            color: #81868a;
+            color: #8795a1;
         }
     }
 }
@@ -34,7 +34,7 @@
       flex-direction: column;
       .desc {
           font-size: .8rem;
-          color: #81868a;
+          color: #8795a1;
       }
       .count {
           font-size: 2rem;
diff --git a/console/src/app/pages/iam/iam.component.scss b/console/src/app/pages/iam/iam.component.scss
index 7164e8d7a..0d6fd6ed2 100644
--- a/console/src/app/pages/iam/iam.component.scss
+++ b/console/src/app/pages/iam/iam.component.scss
@@ -4,13 +4,13 @@ h1 {
 }
 
 .sub {
-    color: #81868a;
+    color: #8795a1;
     margin-bottom: 2rem;
 }
 
 .state-label {
     font-size: .9rem;
-    color: #81868a;
+    color: #8795a1;
     margin-bottom: .5rem;
 }
   
@@ -35,7 +35,7 @@ h1 {
         flex-direction: column;
         .desc {
             font-size: .8rem;
-            color: #81868a;
+            color: #8795a1;
         }
         .count {
             font-size: 2rem;
@@ -145,7 +145,7 @@ h1 {
         }
 
         .side-section {
-            color: #81868a;
+            color: #8795a1;
         }
     }    
 }
diff --git a/console/src/app/pages/orgs/org-contributors/org-contributors.component.scss b/console/src/app/pages/orgs/org-contributors/org-contributors.component.scss
index 9585a8cd4..1d9b82ea2 100644
--- a/console/src/app/pages/orgs/org-contributors/org-contributors.component.scss
+++ b/console/src/app/pages/orgs/org-contributors/org-contributors.component.scss
@@ -9,7 +9,7 @@
 
     .sub-header {
         font-size: .8rem;
-        color: #81868a;
+        color: #8795a1;
     }
   
     .people {
@@ -35,7 +35,6 @@
           height: 32px;
           width: 32px;
           border-radius: 50%;
-          box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0, 0, 0, 0.5);
         }
 
         .add-img {
diff --git a/console/src/app/pages/orgs/org-create/org-create.component.scss b/console/src/app/pages/orgs/org-create/org-create.component.scss
index 48ae50e75..2ddf729d9 100644
--- a/console/src/app/pages/orgs/org-create/org-create.component.scss
+++ b/console/src/app/pages/orgs/org-create/org-create.component.scss
@@ -35,7 +35,7 @@ h1 {
     }
 
     .desc {
-        color: #81868a;
+        color: #8795a1;
         font-size: .9rem;
         margin: 1rem 0;
     }
@@ -65,7 +65,7 @@ h1 {
             width: 100%;
             display: block;
             font-size: .9rem;
-            color: #81868a;
+            color: #8795a1;
         }
     }
     .form {
@@ -91,7 +91,7 @@ h1 {
             .section {
                 padding: .5rem;
                 flex-basis: 100%;
-                color: #81868a;
+                color: #8795a1;
                 font-size: .9rem;
             }
         
diff --git a/console/src/app/pages/orgs/org-detail/org-detail.component.scss b/console/src/app/pages/orgs/org-detail/org-detail.component.scss
index c1fc0e0c4..d2b3e5eed 100644
--- a/console/src/app/pages/orgs/org-detail/org-detail.component.scss
+++ b/console/src/app/pages/orgs/org-detail/org-detail.component.scss
@@ -4,13 +4,13 @@ h1 {
 }
 
 .sub {
-    color: #81868a;
+    color: #8795a1;
     margin-bottom: 2rem;
 }
 
 .state-label {
     font-size: .9rem;
-    color: #81868a;
+    color: #8795a1;
     margin-bottom: .5rem;
 }
   
@@ -35,7 +35,7 @@ h1 {
         flex-direction: column;
         .desc {
             font-size: .8rem;
-            color: #81868a;
+            color: #8795a1;
         }
         .count {
             font-size: 2rem;
@@ -145,7 +145,7 @@ h1 {
         }
 
         .side-section {
-            color: #81868a;
+            color: #8795a1;
         }
     }    
 }
\ No newline at end of file
diff --git a/console/src/app/pages/orgs/org-grid/org-grid.component.scss b/console/src/app/pages/orgs/org-grid/org-grid.component.scss
index 7ef9fc710..8b19a6a58 100644
--- a/console/src/app/pages/orgs/org-grid/org-grid.component.scss
+++ b/console/src/app/pages/orgs/org-grid/org-grid.component.scss
@@ -4,7 +4,7 @@ h1 {
 }
 
 .top-desc {
-    color: #81868a;
+    color: #8795a1;
 }
 
 .view-toggle {
@@ -147,7 +147,7 @@ h1 {
                     margin-right: 3px;
                     font-size: 1.3rem;
                     height: 1.4rem;
-                    color: #81868a;
+                    color: #8795a1;
                 }
             }
         }
diff --git a/console/src/app/pages/orgs/org-members/org-members.component.html b/console/src/app/pages/orgs/org-members/org-members.component.html
index 0903459d6..67fe4ade3 100644
--- a/console/src/app/pages/orgs/org-members/org-members.component.html
+++ b/console/src/app/pages/orgs/org-members/org-members.component.html
@@ -46,13 +46,13 @@
                     [dataSource]="dataSource">
                     <ng-container matColumnDef="select">
                         <th class="selection" mat-header-cell *matHeaderCellDef>
-                            <mat-checkbox (change)="$event ? masterToggle() : null"
+                            <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
                                 [checked]="selection.hasValue() && isAllSelected()"
                                 [indeterminate]="selection.hasValue() && !isAllSelected()">
                             </mat-checkbox>
                         </th>
                         <td class="selection" mat-cell *matCellDef="let row">
-                            <mat-checkbox (click)="$event.stopPropagation()"
+                            <mat-checkbox color="primary" (click)="$event.stopPropagation()"
                                 (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
                             </mat-checkbox>
                         </td>
diff --git a/console/src/app/pages/orgs/org-members/org-members.component.scss b/console/src/app/pages/orgs/org-members/org-members.component.scss
index 1bd190f18..281b9526e 100644
--- a/console/src/app/pages/orgs/org-members/org-members.component.scss
+++ b/console/src/app/pages/orgs/org-members/org-members.component.scss
@@ -36,7 +36,7 @@
                 width: 100%;
                 display: block;
                 font-size: .9rem;
-                color: #81868a;
+                color: #8795a1;
             }
         }
     }
@@ -51,7 +51,7 @@
       flex-direction: column;
       .desc {
           font-size: .8rem;
-          color: #81868a;
+          color: #8795a1;
       }
       .count {
           font-size: 2rem;
diff --git a/console/src/app/pages/orgs/password-policy/password-policy.component.scss b/console/src/app/pages/orgs/password-policy/password-policy.component.scss
index 0af023f5e..12d5cbedd 100644
--- a/console/src/app/pages/orgs/password-policy/password-policy.component.scss
+++ b/console/src/app/pages/orgs/password-policy/password-policy.component.scss
@@ -34,7 +34,7 @@
                 width: 100%;
                 display: block;
                 font-size: .9rem;
-                color: #81868a;
+                color: #8795a1;
             }
         }
 
@@ -50,7 +50,7 @@
 
                 .left-desc {
                     text-transform: uppercase;
-                    color: #81868a;
+                    color: #8795a1;
                     font-size: .9rem;
                 }
 
diff --git a/console/src/app/pages/orgs/policy-grid/policy-grid.component.scss b/console/src/app/pages/orgs/policy-grid/policy-grid.component.scss
index 0a8d9698b..4662607ab 100644
--- a/console/src/app/pages/orgs/policy-grid/policy-grid.component.scss
+++ b/console/src/app/pages/orgs/policy-grid/policy-grid.component.scss
@@ -3,7 +3,7 @@ h1 {
 }
 
 .top-desc {
-    color: #81868a;
+    color: #8795a1;
 } 
 
 .row-lyt {
diff --git a/console/src/app/pages/owned-projects/owned-project-detail/owned-project-detail.component.html b/console/src/app/pages/owned-projects/owned-project-detail/owned-project-detail.component.html
index a3d4cac6b..ed4cfab06 100644
--- a/console/src/app/pages/owned-projects/owned-project-detail/owned-project-detail.component.html
+++ b/console/src/app/pages/owned-projects/owned-project-detail/owned-project-detail.component.html
@@ -74,6 +74,16 @@
                         </app-project-roles>
                     </app-card>
                 </ng-template>
+
+                <ng-template appHasRole [appHasRole]="['user.grant.read']">
+                    <app-card *ngIf="project?.projectId" title="{{ 'GRANTS.PROJECT.TITLE' | translate }}"
+                        description="{{'GRANTS.PROJECT.DESCRIPTION' | translate }}">
+                        <app-user-grants [filter]="userGrantSearchKey" [filterValue]="project.projectId"
+                            [allowCreate]="['user.grant.write'] | hasRole"
+                            [allowDelete]="['user.grant.delete'] | hasRole">
+                        </app-user-grants>
+                    </app-card>
+                </ng-template>
             </ng-container>
         </ng-container>
     </div>
diff --git a/console/src/app/pages/owned-projects/owned-project-detail/owned-project-detail.component.scss b/console/src/app/pages/owned-projects/owned-project-detail/owned-project-detail.component.scss
index 9b5efd6a5..f4225e27f 100644
--- a/console/src/app/pages/owned-projects/owned-project-detail/owned-project-detail.component.scss
+++ b/console/src/app/pages/owned-projects/owned-project-detail/owned-project-detail.component.scss
@@ -31,7 +31,7 @@
 
         .desc {
             font-size: .9rem;
-            color: #81868a;
+            color: #8795a1;
         }
 
         .zitadel-warning {
@@ -107,7 +107,7 @@
         }
 
         .side-section {
-            color: #81868a;
+            color: #8795a1;
         }
     } 
 
diff --git a/console/src/app/pages/owned-projects/owned-project-detail/owned-project-detail.component.ts b/console/src/app/pages/owned-projects/owned-project-detail/owned-project-detail.component.ts
index 031032970..6cc617aed 100644
--- a/console/src/app/pages/owned-projects/owned-project-detail/owned-project-detail.component.ts
+++ b/console/src/app/pages/owned-projects/owned-project-detail/owned-project-detail.component.ts
@@ -16,6 +16,7 @@ import {
     ProjectState,
     ProjectType,
     ProjectView,
+    UserGrantSearchKey,
 } from 'src/app/proto/generated/management_pb';
 import { OrgService } from 'src/app/services/org.service';
 import { ProjectService } from 'src/app/services/project.service';
@@ -57,6 +58,8 @@ export class OwnedProjectDetailComponent implements OnInit, OnDestroy {
 
     public isZitadel: boolean = false;
 
+    public userGrantSearchKey: UserGrantSearchKey = UserGrantSearchKey.USERGRANTSEARCHKEY_PROJECT_ID;
+
     constructor(
         public translate: TranslateService,
         private route: ActivatedRoute,
diff --git a/console/src/app/pages/owned-projects/owned-project-grid/owned-project-grid.component.scss b/console/src/app/pages/owned-projects/owned-project-grid/owned-project-grid.component.scss
index 1f0d023f1..1b8ace379 100644
--- a/console/src/app/pages/owned-projects/owned-project-grid/owned-project-grid.component.scss
+++ b/console/src/app/pages/owned-projects/owned-project-grid/owned-project-grid.component.scss
@@ -49,7 +49,7 @@
         min-height: 166px;
 
         &.inactive {
-            color: #81868a;
+            color: #8795a1;
         }
 
         .selection-icon {
@@ -58,10 +58,6 @@
             top: -12px;
             left: -12px;
             user-select: none;
-
-            &:hover {
-                color: white;
-            }
         }
 
         img {
@@ -81,7 +77,7 @@
                 font-size: 0.8rem;
                 margin-bottom: 0;
                 margin-top: .5rem;
-                color: #81868a;
+                color: #8795a1;
             }
 
             .name {
@@ -97,7 +93,7 @@
 
             .created {
                 font-size: 0.8rem;
-                color: #81868a;
+                color: #8795a1;
             }
 
             .organization {
@@ -127,7 +123,7 @@
                     margin-right: 3px;
                     font-size: 1.3rem;
                     height: 1.4rem;
-                    color: #81868a;
+                    color: #8795a1;
                 }
             }
 
@@ -214,6 +210,6 @@
 .n-items {
     padding: 0 1rem;
     font-size: .8rem;
-    color: #81868a;
+    color: #8795a1;
     flex-basis: 100%;
 }
\ No newline at end of file
diff --git a/console/src/app/pages/owned-projects/owned-project-list/owned-project-list.component.html b/console/src/app/pages/owned-projects/owned-project-list/owned-project-list.component.html
index bdf4537b6..d15df3c47 100644
--- a/console/src/app/pages/owned-projects/owned-project-list/owned-project-list.component.html
+++ b/console/src/app/pages/owned-projects/owned-project-list/owned-project-list.component.html
@@ -43,14 +43,14 @@
         <table class="background-style" mat-table [dataSource]="dataSource">
             <ng-container matColumnDef="select">
                 <th class="selection" mat-header-cell *matHeaderCellDef>
-                    <mat-checkbox (change)="$event ? masterToggle() : null"
+                    <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
                         [checked]="selection.hasValue() && isAllSelected()"
                         [indeterminate]="selection.hasValue() && !isAllSelected()">
                     </mat-checkbox>
                 </th>
                 <td class="selection" mat-cell *matCellDef="let row">
-                    <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
-                        [checked]="selection.isSelected(row)">
+                    <mat-checkbox color="primary" (click)="$event.stopPropagation()"
+                        (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
                     </mat-checkbox>
                 </td>
             </ng-container>
diff --git a/console/src/app/pages/owned-projects/owned-project-list/owned-project-list.component.scss b/console/src/app/pages/owned-projects/owned-project-list/owned-project-list.component.scss
index f53b83098..aa17b2169 100644
--- a/console/src/app/pages/owned-projects/owned-project-list/owned-project-list.component.scss
+++ b/console/src/app/pages/owned-projects/owned-project-list/owned-project-list.component.scss
@@ -4,7 +4,7 @@ h1 {
 }
 
 .sub {
-    color: #81868a;
+    color: #8795a1;
     margin-bottom: 2rem;
 }
 
@@ -40,7 +40,7 @@ h1 {
         flex-direction: column;
         .desc {
             font-size: .8rem;
-            color: #81868a;
+            color: #8795a1;
         }
         .count {
             font-size: 2rem;
diff --git a/console/src/app/pages/owned-projects/owned-projects-routing.module.ts b/console/src/app/pages/owned-projects/owned-projects-routing.module.ts
index fc5d11f10..5f58c884a 100644
--- a/console/src/app/pages/owned-projects/owned-projects-routing.module.ts
+++ b/console/src/app/pages/owned-projects/owned-projects-routing.module.ts
@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { AuthGuard } from 'src/app/guards/auth.guard';
 import { RoleGuard } from 'src/app/guards/role.guard';
+import { ProjectType } from 'src/app/proto/generated/management_pb';
 
 import { OwnedProjectDetailComponent } from './owned-project-detail/owned-project-detail.component';
 import { OwnedProjectsComponent } from './owned-projects.component';
@@ -27,6 +28,9 @@ const routes: Routes = [
     },
     {
         path: ':projectid/members',
+        data: {
+            type: ProjectType.PROJECTTYPE_OWNED,
+        },
         loadChildren: () => import('../../modules/project-members/project-members.module').then(m => m.ProjectMembersModule),
     },
     {
@@ -44,6 +48,11 @@ const routes: Routes = [
         loadChildren: () => import('../project-grant-create/project-grant-create.module')
             .then(m => m.ProjectGrantCreateModule),
     },
+    {
+        path: ':projectid/grant/:grantid',
+        loadChildren: () => import('./project-grant-detail/project-grant-detail.module')
+            .then(m => m.ProjectGrantDetailModule),
+    },
 ];
 
 @NgModule({
diff --git a/console/src/app/pages/owned-projects/owned-projects.component.html b/console/src/app/pages/owned-projects/owned-projects.component.html
index ee602401e..49a19d65e 100644
--- a/console/src/app/pages/owned-projects/owned-projects.component.html
+++ b/console/src/app/pages/owned-projects/owned-projects.component.html
@@ -2,6 +2,6 @@
     <h1>{{ 'PROJECT.PAGES.LIST' | translate }}</h1>
     <p class="sub">{{ 'PROJECT.PAGES.LISTDESCRIPTION' | translate }}</p>
 
-    <h2>Owned Projects</h2>
+    <h2>{{'PROJECT.PAGES.TYPE.OWNED' | translate}}</h2>
     <app-owned-project-list></app-owned-project-list>
 </div>
\ No newline at end of file
diff --git a/console/src/app/pages/owned-projects/owned-projects.component.scss b/console/src/app/pages/owned-projects/owned-projects.component.scss
index cd0c0ac06..137328cfe 100644
--- a/console/src/app/pages/owned-projects/owned-projects.component.scss
+++ b/console/src/app/pages/owned-projects/owned-projects.component.scss
@@ -4,7 +4,7 @@ h1 {
 }
 
 .sub {
-    color: #81868a;
+    color: #8795a1;
     margin-bottom: 2rem;
 }
 
diff --git a/console/src/app/pages/owned-projects/owned-projects.module.ts b/console/src/app/pages/owned-projects/owned-projects.module.ts
index 22ea32d43..c658f1b14 100644
--- a/console/src/app/pages/owned-projects/owned-projects.module.ts
+++ b/console/src/app/pages/owned-projects/owned-projects.module.ts
@@ -20,6 +20,9 @@ import { MatTableModule } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { AvatarModule } from 'src/app/modules/avatar/avatar.module';
+import { ProjectGrantMembersModule } from 'src/app/modules/project-grant-members/project-grant-members.module';
+import { UserGrantsModule } from 'src/app/modules/user-grants/user-grants.module';
 
 import { HttpLoaderFactory } from '../../app.module';
 import { HasRoleModule } from '../../directives/has-role/has-role.module';
@@ -39,9 +42,6 @@ import { OwnedProjectsRoutingModule } from './owned-projects-routing.module';
 import { OwnedProjectsComponent } from './owned-projects.component';
 import { ProjectApplicationGridComponent } from './project-application-grid/project-application-grid.component';
 import { ProjectApplicationsComponent } from './project-applications/project-applications.component';
-import {
-    ProjectGrantMembersCreateDialogComponent,
-} from './project-grant-members-create-dialog/project-grant-members-create-dialog.component';
 import { ProjectGrantsComponent } from './project-grants/project-grants.component';
 
 @NgModule({
@@ -53,14 +53,16 @@ import { ProjectGrantsComponent } from './project-grants/project-grants.componen
         ProjectApplicationGridComponent,
         ProjectApplicationsComponent,
         ProjectGrantsComponent,
-        ProjectGrantMembersCreateDialogComponent,
     ],
     imports: [
         CommonModule,
         OwnedProjectsRoutingModule,
+        UserGrantsModule,
         ProjectContributorsModule,
+        ProjectGrantMembersModule,
         FormsModule,
         TranslateModule,
+        AvatarModule,
         ReactiveFormsModule,
         HasRoleModule,
         MatTableModule,
diff --git a/console/src/app/pages/owned-projects/project-applications/project-applications.component.html b/console/src/app/pages/owned-projects/project-applications/project-applications.component.html
index 2fae5594d..9c8516eda 100644
--- a/console/src/app/pages/owned-projects/project-applications/project-applications.component.html
+++ b/console/src/app/pages/owned-projects/project-applications/project-applications.component.html
@@ -30,14 +30,14 @@
     <table [dataSource]="dataSource" mat-table class="full-width-table" matSort aria-label="Elements">
         <ng-container matColumnDef="select">
             <th class="selection" mat-header-cell *matHeaderCellDef>
-                <mat-checkbox (change)="$event ? masterToggle() : null"
+                <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
                     [checked]="selection.hasValue() && isAllSelected()"
                     [indeterminate]="selection.hasValue() && !isAllSelected()">
                 </mat-checkbox>
             </th>
             <td class="selection" mat-cell *matCellDef="let row">
-                <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
-                    [checked]="selection.isSelected(row)">
+                <mat-checkbox color="primary" (click)="$event.stopPropagation()"
+                    (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
                 </mat-checkbox>
             </td>
         </ng-container>
diff --git a/console/src/app/pages/owned-projects/project-applications/project-applications.component.scss b/console/src/app/pages/owned-projects/project-applications/project-applications.component.scss
index 383dbd4cb..779bd1fdd 100644
--- a/console/src/app/pages/owned-projects/project-applications/project-applications.component.scss
+++ b/console/src/app/pages/owned-projects/project-applications/project-applications.component.scss
@@ -8,7 +8,7 @@
       flex-direction: column;
       .desc {
           font-size: .8rem;
-          color: #81868a;
+          color: #8795a1;
       }
       .count {
           font-size: 2rem;
diff --git a/console/src/app/pages/owned-projects/project-applications/project-applications.component.ts b/console/src/app/pages/owned-projects/project-applications/project-applications.component.ts
index 0d2ae4ede..c1397bf40 100644
--- a/console/src/app/pages/owned-projects/project-applications/project-applications.component.ts
+++ b/console/src/app/pages/owned-projects/project-applications/project-applications.component.ts
@@ -38,7 +38,6 @@ export class ProjectApplicationsComponent implements AfterViewInit, OnInit {
 
     public ngAfterViewInit(): void {
         this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
-
         merge(this.sort.sortChange, this.paginator.page)
             .pipe(
                 tap(() => this.loadRolesPage()),
diff --git a/console/src/app/pages/owned-projects/project-grant-detail/project-grant-detail-datasource.ts b/console/src/app/pages/owned-projects/project-grant-detail/project-grant-detail-datasource.ts
new file mode 100644
index 000000000..83b868a2f
--- /dev/null
+++ b/console/src/app/pages/owned-projects/project-grant-detail/project-grant-detail-datasource.ts
@@ -0,0 +1,60 @@
+import { DataSource } from '@angular/cdk/collections';
+import { BehaviorSubject, from, Observable, of } from 'rxjs';
+import { catchError, finalize, map } from 'rxjs/operators';
+import { ProjectMemberView } from 'src/app/proto/generated/management_pb';
+import { ProjectService } from 'src/app/services/project.service';
+
+/**
+ * Data source for the ProjectMembers view. This class should
+ * encapsulate all logic for fetching and manipulating the displayed data
+ * (including sorting, pagination, and filtering).
+ */
+export class ProjectGrantDetailDataSource extends DataSource<ProjectMemberView.AsObject> {
+    public totalResult: number = 0;
+    public membersSubject: BehaviorSubject<ProjectMemberView.AsObject[]>
+        = new BehaviorSubject<ProjectMemberView.AsObject[]>([]);
+    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+    public loading$: Observable<boolean> = this.loadingSubject.asObservable();
+
+    constructor(private projectService: ProjectService) {
+        super();
+    }
+
+    public loadMembers(projectId: string, grantId: string,
+        pageIndex: number, pageSize: number, sortDirection?: string): void {
+        const offset = pageIndex * pageSize;
+
+        this.loadingSubject.next(true);
+
+        from(this.projectService.SearchProjectGrantMembers(projectId, grantId, pageSize, offset)).pipe(
+            map(resp => {
+                this.totalResult = resp.toObject().totalResult;
+                return resp.toObject().resultList;
+            }),
+            catchError(() => of([])),
+            finalize(() => this.loadingSubject.next(false)),
+        ).subscribe(members => {
+            this.membersSubject.next(members);
+            console.log(members);
+        });
+    }
+
+
+    /**
+     * Connect this data source to the table. The table will only update when
+     * the returned stream emits new items.
+     * @returns A stream of the items to be rendered.
+     */
+    public connect(): Observable<ProjectMemberView.AsObject[]> {
+        return this.membersSubject.asObservable();
+    };
+
+    /**
+     *  Called when the table is being destroyed. Use this function, to clean up
+     * any open connections or free any held resources that were set up during connect.
+     */
+    public disconnect(): void {
+        this.membersSubject.complete();
+        this.loadingSubject.complete();
+    }
+}
diff --git a/console/src/app/pages/owned-projects/project-grant-detail/project-grant-detail-routing.module.ts b/console/src/app/pages/owned-projects/project-grant-detail/project-grant-detail-routing.module.ts
new file mode 100644
index 000000000..1ab5f3366
--- /dev/null
+++ b/console/src/app/pages/owned-projects/project-grant-detail/project-grant-detail-routing.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { ProjectGrantDetailComponent } from './project-grant-detail.component';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: ProjectGrantDetailComponent,
+        data: { animation: 'AddPage' },
+    },
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule],
+})
+export class ProjectGrantDetailRoutingModule { }
diff --git a/console/src/app/pages/owned-projects/project-grant-detail/project-grant-detail.component.html b/console/src/app/pages/owned-projects/project-grant-detail/project-grant-detail.component.html
new file mode 100644
index 000000000..93c949861
--- /dev/null
+++ b/console/src/app/pages/owned-projects/project-grant-detail/project-grant-detail.component.html
@@ -0,0 +1,19 @@
+<div class="max-width-container">
+    <div class="container">
+        <div class="left">
+            <a *ngIf="projectid" [routerLink]="[ '/projects', projectid]" mat-icon-button>
+                <mat-icon class="icon">arrow_back</mat-icon>
+            </a>
+        </div>
+        <div class="right">
+            <div class="head">
+                <h1>{{ 'PROJECT.GRANT.DETAIL.TITLE' | translate }}</h1>
+                <p class="desc">{{ 'PROJECT.GRANT.DETAIL.DESC' | translate }}</p>
+            </div>
+
+            <app-project-grant-members *ngIf="this.projectid && this.grantid" [disabled]="isZitadel"
+                [projectId]="projectid" [grantId]="grantid" [type]="projectType">
+            </app-project-grant-members>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/console/src/app/pages/owned-projects/project-grant-detail/project-grant-detail.component.scss b/console/src/app/pages/owned-projects/project-grant-detail/project-grant-detail.component.scss
new file mode 100644
index 000000000..17fa11bf7
--- /dev/null
+++ b/console/src/app/pages/owned-projects/project-grant-detail/project-grant-detail.component.scss
@@ -0,0 +1,43 @@
+.container {
+    display: flex;
+    padding-bottom: 3rem;
+
+    .left {
+        width: 100px;
+        display: flex;
+        padding: 1rem;
+        justify-content: center;
+
+        a {
+            margin-top: .2rem;
+        }
+    }
+
+    .right {
+        flex: 1;
+        padding-top: 1rem;
+
+        .head {
+            display: flex;
+            align-items: center;
+            border-bottom: 1px solid #ffffff20;
+            margin-bottom: 2rem;
+            flex-wrap: wrap;
+          
+            a {
+                display: block;
+            }
+          
+            h1 {
+                font-size: 1.2rem;
+            }
+          
+            .desc {
+                width: 100%;
+                display: block;
+                font-size: .9rem;
+                color: #8795a1;
+            }
+        }
+    }
+}
diff --git a/console/src/app/pages/owned-projects/project-grant-detail/project-grant-detail.component.spec.ts b/console/src/app/pages/owned-projects/project-grant-detail/project-grant-detail.component.spec.ts
new file mode 100644
index 000000000..274cff897
--- /dev/null
+++ b/console/src/app/pages/owned-projects/project-grant-detail/project-grant-detail.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProjectGrantDetailComponent } from './project-grant-detail.component';
+
+describe('GrantComponent', () => {
+    let component: ProjectGrantDetailComponent;
+    let fixture: ComponentFixture<ProjectGrantDetailComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [ProjectGrantDetailComponent],
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ProjectGrantDetailComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/console/src/app/pages/owned-projects/project-grant-detail/project-grant-detail.component.ts b/console/src/app/pages/owned-projects/project-grant-detail/project-grant-detail.component.ts
new file mode 100644
index 000000000..e14498a06
--- /dev/null
+++ b/console/src/app/pages/owned-projects/project-grant-detail/project-grant-detail.component.ts
@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { ProjectType } from 'src/app/proto/generated/management_pb';
+import { OrgService } from 'src/app/services/org.service';
+
+@Component({
+    selector: 'app-project-grant-detail',
+    templateUrl: './project-grant-detail.component.html',
+    styleUrls: ['./project-grant-detail.component.scss'],
+})
+export class ProjectGrantDetailComponent {
+    public projectid: string = '';
+    public grantid: string = '';
+
+    public projectType: ProjectType = ProjectType.PROJECTTYPE_OWNED;
+    public disabled: boolean = false;
+
+    public isZitadel: boolean = false;
+
+    constructor(
+        private orgService: OrgService,
+        private route: ActivatedRoute) {
+        this.route.params.subscribe(params => {
+            this.projectid = params.projectid;
+            this.grantid = params.grantid;
+
+            this.orgService.GetIam().then(iam => {
+                this.isZitadel = iam.toObject().iamProjectId === this.projectid;
+            });
+        });
+    }
+}
diff --git a/console/src/app/pages/owned-projects/project-grant-detail/project-grant-detail.module.ts b/console/src/app/pages/owned-projects/project-grant-detail/project-grant-detail.module.ts
new file mode 100644
index 000000000..ac10171f1
--- /dev/null
+++ b/console/src/app/pages/owned-projects/project-grant-detail/project-grant-detail.module.ts
@@ -0,0 +1,44 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
+import { ProjectGrantMembersModule } from 'src/app/modules/project-grant-members/project-grant-members.module';
+
+import { ProjectGrantDetailRoutingModule } from './project-grant-detail-routing.module';
+import { ProjectGrantDetailComponent } from './project-grant-detail.component';
+
+
+@NgModule({
+    declarations: [ProjectGrantDetailComponent],
+    imports: [
+        CommonModule,
+        ProjectGrantDetailRoutingModule,
+        ProjectGrantMembersModule,
+        MatAutocompleteModule,
+        HasRoleModule,
+        MatChipsModule,
+        MatButtonModule,
+        MatCheckboxModule,
+        MatIconModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatSortModule,
+        MatTooltipModule,
+        ReactiveFormsModule,
+        MatProgressSpinnerModule,
+        FormsModule,
+        TranslateModule,
+    ],
+})
+export class ProjectGrantDetailModule { }
diff --git a/console/src/app/pages/owned-projects/project-grant-members-create-dialog/project-grant-members-create-dialog.component.scss b/console/src/app/pages/owned-projects/project-grant-members-create-dialog/project-grant-members-create-dialog.component.scss
deleted file mode 100644
index 8286984b7..000000000
--- a/console/src/app/pages/owned-projects/project-grant-members-create-dialog/project-grant-members-create-dialog.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.full-width {
-    width: 100%;
-}
\ No newline at end of file
diff --git a/console/src/app/pages/owned-projects/project-grants/project-grants.component.html b/console/src/app/pages/owned-projects/project-grants/project-grants.component.html
index a7d4abaf1..c153d5f4a 100644
--- a/console/src/app/pages/owned-projects/project-grants/project-grants.component.html
+++ b/console/src/app/pages/owned-projects/project-grants/project-grants.component.html
@@ -32,14 +32,14 @@
 
         <ng-container matColumnDef="select">
             <th class="selection" mat-header-cell *matHeaderCellDef>
-                <mat-checkbox (change)="$event ? masterToggle() : null"
+                <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
                     [checked]="selection.hasValue() && isAllSelected()"
                     [indeterminate]="selection.hasValue() && !isAllSelected()">
                 </mat-checkbox>
             </th>
             <td class="selection" mat-cell *matCellDef="let row">
-                <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
-                    [checked]="selection.isSelected(row)">
+                <mat-checkbox color="primary" (click)="$event.stopPropagation()"
+                    (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
                 </mat-checkbox>
             </td>
         </ng-container>
@@ -75,42 +75,10 @@
                 <span class="role" *ngFor="let role of grant.roleNamesList">{{role}}</span> </td>
         </ng-container>
 
-        <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
-        <ng-container matColumnDef="expandedDetail">
-            <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
-                <div *ngIf="projectId" class="element-detail"
-                    [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
-                    <ng-template appHasRole
-                        [appHasRole]="['project.grant.member.read:' + projectId,'project.grant.member.read']">
-                        <div class="right">
-                            <div class="title-row">
-                                <span class="mem-title">Members</span>
-                                <ng-template appHasRole
-                                    [appHasRole]="['project.grant.member.write:' + projectId, 'project.grant.member.write']">
-                                    <button [disabled]="disabled || element?.roleKeysList?.length === 0"
-                                        matTooltip="disabled or no roles defined" mat-icon-button
-                                        (click)="addProjectGrantMember(element)">
-                                        <mat-icon>add</mat-icon>
-                                    </button>
-                                </ng-template>
-                            </div>
-                            <div class="mem-description"
-                                *ngIf="selectedGrantMembers && selectedGrantMembers.length > 0">
-                                <span *ngFor="let mem of selectedGrantMembers">{{mem.firstName}} {{mem.lastName}}
-                                    {{mem.email}} |
-                                    <span *ngFor="let role of mem.rolesList">{{role}} </span></span>
-                            </div>
-                        </div>
-                    </ng-template>
-                </div>
-            </td>
-        </ng-container>
-
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr class="data-row" mat-row *matRowDef="let element; columns: displayedColumns;" class="element-row"
-            [class.expanded-row]="expandedElement === element" (click)="setExpandableRow(element)">
+        <tr class="data-row" [routerLink]="['/projects',grant.projectId,'grant', grant.id]" mat-row
+            *matRowDef="let grant; columns: displayedColumns;" class="element-row">
         </tr>
-        <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row"></tr>
     </table>
 
     <mat-paginator #paginator [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
diff --git a/console/src/app/pages/owned-projects/project-grants/project-grants.component.scss b/console/src/app/pages/owned-projects/project-grants/project-grants.component.scss
index 7091a86b9..401ceee49 100644
--- a/console/src/app/pages/owned-projects/project-grants/project-grants.component.scss
+++ b/console/src/app/pages/owned-projects/project-grants/project-grants.component.scss
@@ -7,7 +7,7 @@
       flex-direction: column;
       .desc {
           font-size: .8rem;
-          color: #81868a;
+          color: #8795a1;
       }
       .count {
           font-size: 2rem;
@@ -65,68 +65,12 @@
             }
         }
 
+        tr {
+            outline: none;
+        }
+
         tr.detail-row {
             height: 0;
-
-        }
-
-        tr {
-            .element-row:not(.expanded-row):hover {
-                background: whitesmoke;
-            }
-            
-            .element-row:not(.expanded-row):active {
-                background: #efefef;
-            }
-        }
-        
-        .element-row td {
-            border-bottom-width: 0;
-        }
-        
-        .element-detail {
-            overflow: hidden;
-            display: flex;
-           
-            .right {
-                display: flex;
-                flex-direction: column;
-
-                .title-row {
-                    display: flex;
-                    align-items: center;
-
-                    .mem-title {
-                        font-size: .8rem;
-                        color: #81868a;
-                    }
-                }
-
-                .mem-description {
-                    border: 2px solid #81868a;
-                    background-color: #212224;
-                    border-radius: .5rem;
-                    padding: 1rem;
-                    margin: .5rem 0;
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                }
-            }
-        }
-        
-        .element-symbol {
-            font-weight: bold;
-            font-size: 40px;
-            line-height: normal;
-        }
-        
-        .element-description {
-            padding: 16px;
-        }
-        
-        .element-description-attribution {
-            opacity: 0.5;
         }
 
         .selection {
diff --git a/console/src/app/pages/owned-projects/project-grants/project-grants.component.ts b/console/src/app/pages/owned-projects/project-grants/project-grants.component.ts
index a74167bf9..4211413a9 100644
--- a/console/src/app/pages/owned-projects/project-grants/project-grants.component.ts
+++ b/console/src/app/pages/owned-projects/project-grants/project-grants.component.ts
@@ -5,14 +5,14 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTable } from '@angular/material/table';
 import { tap } from 'rxjs/operators';
+import {
+    ProjectGrantMembersCreateDialogComponent,
+    ProjectGrantMembersCreateDialogExportType,
+} from 'src/app/modules/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component';
 import { ProjectGrant, ProjectMemberView } from 'src/app/proto/generated/management_pb';
 import { ProjectService } from 'src/app/services/project.service';
 import { ToastService } from 'src/app/services/toast.service';
 
-import {
-    ProjectGrantMembersCreateDialogComponent,
-    ProjectGrantMembersCreateDialogExportType,
-} from '../project-grant-members-create-dialog/project-grant-members-create-dialog.component';
 import { ProjectGrantsDataSource } from './project-grants-datasource';
 
 @Component({
@@ -76,28 +76,21 @@ export class ProjectGrantsComponent implements OnInit, AfterViewInit {
             this.dataSource.grantsSubject.value.forEach(row => this.selection.select(row));
     }
 
-    public setExpandableRow(grant: ProjectGrant.AsObject): void {
-        this.expandedElement = this.expandedElement === grant ? null : grant;
-        this.projectService.SearchProjectGrantMembers(this.projectId, grant.id, 10, 0).then(ret => {
-            this.selectedGrantMembers = ret.toObject().resultList;
-        });
-    }
+    public async addProjectGrantMember(grant: ProjectGrant.AsObject): Promise<void> {
+        const keysList = (await this.projectService.GetProjectGrantMemberRoles()).toObject();
+        console.log(keysList);
 
-    // TODO
-    public addProjectGrantMember(grant: ProjectGrant.AsObject): void {
         const dialogRef = this.dialog.open(ProjectGrantMembersCreateDialogComponent, {
             data: {
-                orgId: grant.grantedOrgId,
-                grantId: grant.id,
-                projectId: grant.projectId,
-                roleKeysList: grant.roleKeysList,
+                roleKeysList: keysList.rolesList,
             },
             width: '400px',
         });
 
         dialogRef.afterClosed().subscribe((dataToAdd: ProjectGrantMembersCreateDialogExportType) => {
+            console.log(dataToAdd);
             if (dataToAdd) {
-                dataToAdd.userIds.forEach(userid => {
+                dataToAdd.userIds.forEach((userid: string) => {
                     this.projectService.AddProjectGrantMember(
                         this.projectId,
                         grant.id,
@@ -113,13 +106,4 @@ export class ProjectGrantsComponent implements OnInit, AfterViewInit {
             }
         });
     }
-
-    // TODO
-    public removeProjectGrantMember(grantId: string, userId: string): void {
-        this.projectService.RemoveProjectGrantMember(this.projectId, grantId, userId).then(() => {
-            this.toast.showInfo('Project Grant Member successfully removed');
-        }).catch(error => {
-            this.toast.showInfo(error.message);
-        });
-    }
 }
diff --git a/console/src/app/pages/project-grant-create/project-grant-create.component.html b/console/src/app/pages/project-grant-create/project-grant-create.component.html
index 195ef8b65..ed294edf6 100644
--- a/console/src/app/pages/project-grant-create/project-grant-create.component.html
+++ b/console/src/app/pages/project-grant-create/project-grant-create.component.html
@@ -23,11 +23,9 @@
             </button>
         </form>
 
-        <div class="card org" *ngIf="org">
-            <p>{{org?.name}}</p>
-            <span *ngIf="org.creationDate">created:
-                {{org.creationDate | timestampToDate | date: 'EEE dd. MMM, HH:mm'}}</span>
-        </div>
+        <span *ngIf="org">
+            {{'PROJECT.GRANT.CREATE.FOR_ORG' | translate}} {{org?.name}}
+        </span>
     </ng-container>
 
     <ng-container *ngIf="currentCreateStep === 2">
@@ -50,8 +48,8 @@
             <button (click)="previous()" color="primary" mat-button class="small-button">
                 {{ 'ACTIONS.BACK' | translate }}
             </button>
-            <button color="primary" [disabled]="!org || rolesKeyList.length == 0" (click)="addGrant()" mat-raised-button
-                class="big-button" cdkFocusInitial>
+            <button color="primary" [disabled]="!org" (click)="addGrant()" mat-raised-button class="big-button"
+                cdkFocusInitial>
                 {{ 'ACTIONS.SAVE' | translate }}
             </button>
         </ng-container>
diff --git a/console/src/app/pages/project-grant-create/project-grant-create.component.scss b/console/src/app/pages/project-grant-create/project-grant-create.component.scss
index 1b5d9cbda..154812521 100644
--- a/console/src/app/pages/project-grant-create/project-grant-create.component.scss
+++ b/console/src/app/pages/project-grant-create/project-grant-create.component.scss
@@ -36,16 +36,15 @@ h1 {
 
 .org {
     height: 120px;
-    // width: 120px;
     padding: 1rem;
     display: flex;
     justify-content: center;
     flex-direction: column;
-    align-items: center;
 
-    .title {
+    .name {
         margin-top: 0;
         font-size: 1rem;
+        margin-bottom: 1rem;
     }
 
     span {
diff --git a/console/src/app/pages/signedout/signedout.component.scss b/console/src/app/pages/signedout/signedout.component.scss
index 23b598eb6..ed2984af3 100644
--- a/console/src/app/pages/signedout/signedout.component.scss
+++ b/console/src/app/pages/signedout/signedout.component.scss
@@ -15,7 +15,7 @@
             font-family: ailerons;
         }
         p {
-            color: #81868a;
+            color: #8795a1;
             text-align: center;
             font-size: 1rem;
             margin: 0;
diff --git a/console/src/app/pages/user-create/user-create.component.scss b/console/src/app/pages/user-create/user-create.component.scss
index f13115e48..323218fbd 100644
--- a/console/src/app/pages/user-create/user-create.component.scss
+++ b/console/src/app/pages/user-create/user-create.component.scss
@@ -34,7 +34,7 @@
                 width: 100%;
                 display: block;
                 font-size: .9rem;
-                color: #81868a;
+                color: #8795a1;
             }
         }
 
@@ -62,7 +62,7 @@
             .section {
                 padding: .5rem;
                 flex-basis: 100%;
-                color: #81868a;
+                color: #8795a1;
                 font-size: .9rem;
             }
         
diff --git a/console/src/app/pages/user-detail/auth-user-detail/auth-user-detail.component.html b/console/src/app/pages/user-detail/auth-user-detail/auth-user-detail.component.html
index 468948059..50a5b76d7 100644
--- a/console/src/app/pages/user-detail/auth-user-detail/auth-user-detail.component.html
+++ b/console/src/app/pages/user-detail/auth-user-detail/auth-user-detail.component.html
@@ -229,7 +229,7 @@
             </div>
         </div>
 
-        <p class="side-section">{{ 'CHANGES.USER.TITLE' | translate }}</p>
+        <!-- <p class="side-section">{{ 'CHANGES.USER.TITLE' | translate }}</p> -->
         <app-changes [changeType]="ChangeType.USER" [id]="user.id"></app-changes>
     </metainfo>
 </app-meta-layout>
\ No newline at end of file
diff --git a/console/src/app/pages/user-detail/auth-user-detail/auth-user-detail.component.scss b/console/src/app/pages/user-detail/auth-user-detail/auth-user-detail.component.scss
index deeebb121..c26eac181 100644
--- a/console/src/app/pages/user-detail/auth-user-detail/auth-user-detail.component.scss
+++ b/console/src/app/pages/user-detail/auth-user-detail/auth-user-detail.component.scss
@@ -8,7 +8,7 @@ h1 {
   align-items: center;
 
   span {
-    color: #81868a;
+    color: #8795a1;
     text-transform: uppercase;
     margin-right: 3rem;
     font-size: .9rem;
@@ -21,12 +21,12 @@ h1 {
     background-repeat: no-repeat;
     border-radius: 50%;
     margin: .5rem;
-    border: 2px solid #81868a;
+    border: 2px solid #8795a1;
   }
 }
   
   .sub {
-    color: #81868a;
+    color: #8795a1;
     margin-bottom: 2rem;
   }
 
@@ -122,7 +122,7 @@ h1 {
         .verify {
             text-decoration: none;
             font-size: .8rem;
-            color: #81868a;
+            color: #8795a1;
             border-radius: .5rem;
             cursor: pointer;
             word-wrap: none;
@@ -207,7 +207,7 @@ h1 {
         }
 
         .side-section {
-            color: #81868a;
+            color: #8795a1;
         }
     }  
 
@@ -262,7 +262,7 @@ h1 {
         }
 
         .side-section {
-            color: #81868a;
+            color: #8795a1;
         }
     }    
 
diff --git a/console/src/app/pages/user-detail/theme-setting/theme-setting.component.scss b/console/src/app/pages/user-detail/theme-setting/theme-setting.component.scss
index 02be8179a..76bfe61bd 100644
--- a/console/src/app/pages/user-detail/theme-setting/theme-setting.component.scss
+++ b/console/src/app/pages/user-detail/theme-setting/theme-setting.component.scss
@@ -40,7 +40,7 @@ p {
 
 .desc {
     font-size: 14px;
-    color: #81868a;
+    color: #8795a1;
 }
 
 label, .toggle {
diff --git a/console/src/app/pages/user-detail/user-detail-routing.module.ts b/console/src/app/pages/user-detail/user-detail-routing.module.ts
index 7b4aa3d07..4afe73a96 100644
--- a/console/src/app/pages/user-detail/user-detail-routing.module.ts
+++ b/console/src/app/pages/user-detail/user-detail-routing.module.ts
@@ -19,8 +19,8 @@ const routes: Routes = [
         },
     },
     {
-        path: ':id/grant-create',
-        loadChildren: () => import('../user-grant-create/user-grant-create.module').then(m => m.UserGrantCreateModule),
+        path: ':id/grant/:grantid',
+        loadChildren: () => import('src/app/modules/user-grant/user-grant.module').then(m => m.UserGrantModule),
     },
 ];
 
diff --git a/console/src/app/pages/user-detail/user-detail.module.ts b/console/src/app/pages/user-detail/user-detail.module.ts
index 3b1b4a3ab..272757bf9 100644
--- a/console/src/app/pages/user-detail/user-detail.module.ts
+++ b/console/src/app/pages/user-detail/user-detail.module.ts
@@ -16,6 +16,7 @@ import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { CardModule } from 'src/app/modules/card/card.module';
 import { ChangesModule } from 'src/app/modules/changes/changes.module';
 import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
+import { UserGrantsModule } from 'src/app/modules/user-grants/user-grants.module';
 import { PipesModule } from 'src/app/pipes/pipes.module';
 
 import { AuthUserDetailComponent } from './auth-user-detail/auth-user-detail.component';
@@ -26,7 +27,6 @@ import { DialogOtpComponent } from './dialog-otp/dialog-otp.component';
 import { ThemeSettingComponent } from './theme-setting/theme-setting.component';
 import { UserDetailRoutingModule } from './user-detail-routing.module';
 import { UserDetailComponent } from './user-detail/user-detail.component';
-import { UserGrantsModule } from './user-grants/user-grants.module';
 import { UserMfaComponent } from './user-mfa/user-mfa.component';
 
 @NgModule({
diff --git a/console/src/app/pages/user-detail/user-detail/user-detail.component.html b/console/src/app/pages/user-detail/user-detail/user-detail.component.html
index 7296e324f..8ff653d7e 100644
--- a/console/src/app/pages/user-detail/user-detail/user-detail.component.html
+++ b/console/src/app/pages/user-detail/user-detail/user-detail.component.html
@@ -205,9 +205,10 @@
             </form>
         </app-card> -->
 
-        <app-card *ngIf="user?.id" title="{{ 'USER.GRANTS.TITLE' | translate }}"
-            description="{{'USER.GRANTS.DESCRIPTION' | translate }}">
-            <app-user-grants [userId]="user?.id"></app-user-grants>
+        <app-card *ngIf="user?.id" title="{{ 'GRANTS.USER.TITLE' | translate }}"
+            description="{{'GRANTS.USER.DESCRIPTION' | translate }}">
+            <app-user-grants [filterValue]="user?.id" [allowCreate]="['user.grant.write'] | hasRole"
+                [allowDelete]="['user.grant.delete'] | hasRole"></app-user-grants>
         </app-card>
     </div>
 
diff --git a/console/src/app/pages/user-detail/user-detail/user-detail.component.scss b/console/src/app/pages/user-detail/user-detail/user-detail.component.scss
index 24e5b3d20..e8d806905 100644
--- a/console/src/app/pages/user-detail/user-detail/user-detail.component.scss
+++ b/console/src/app/pages/user-detail/user-detail/user-detail.component.scss
@@ -19,7 +19,7 @@
       width: 100%;
       display: block;
       font-size: .9rem;
-      color: #81868a;
+      color: #8795a1;
   }
 }
 
@@ -101,7 +101,7 @@
         .verify {
           text-decoration: none;
           font-size: .8rem;
-          color: #81868a;
+          color: #8795a1;
           border-radius: .5rem;
           cursor: pointer;
           word-wrap: none;
@@ -174,7 +174,7 @@
         }
 
         .side-section {
-            color: #81868a;
+            color: #8795a1;
         }
     }  
 
@@ -229,7 +229,7 @@
         }
 
         .side-section {
-            color: #81868a;
+            color: #8795a1;
         }
     }    
 
diff --git a/console/src/app/pages/user-detail/user-grants/user-grants.component.ts b/console/src/app/pages/user-detail/user-grants/user-grants.component.ts
deleted file mode 100644
index 1ef5dad5b..000000000
--- a/console/src/app/pages/user-detail/user-grants/user-grants.component.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { SelectionModel } from '@angular/cdk/collections';
-import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatTable } from '@angular/material/table';
-import { tap } from 'rxjs/operators';
-import { ProjectGrant, UserGrant } from 'src/app/proto/generated/management_pb';
-import { MgmtUserService } from 'src/app/services/mgmt-user.service';
-
-import { UserGrantsDataSource } from './user-grants-datasource';
-
-@Component({
-    selector: 'app-user-grants',
-    templateUrl: './user-grants.component.html',
-    styleUrls: ['./user-grants.component.scss'],
-})
-export class UserGrantsComponent implements OnInit, AfterViewInit {
-    @Input() userId: string = '';
-    public grants: UserGrant.AsObject[] = [];
-
-    public dataSource!: UserGrantsDataSource;
-    public selection: SelectionModel<UserGrant.AsObject> = new SelectionModel<UserGrant.AsObject>(true, []);
-    @ViewChild(MatPaginator) public paginator!: MatPaginator;
-    @ViewChild(MatTable) public table!: MatTable<ProjectGrant.AsObject>;
-    constructor(private userService: MgmtUserService) { }
-
-    public displayedColumns: string[] = ['select', 'orgId', 'projectId', 'creationDate', 'changeDate', 'roleNamesList'];
-
-    public ngOnInit(): void {
-        this.dataSource = new UserGrantsDataSource(this.userService);
-        this.dataSource.loadGrants(this.userId, 0, 25);
-    }
-
-    public ngAfterViewInit(): void {
-        this.paginator.page
-            .pipe(
-                tap(() => this.loadGrantsPage()),
-            )
-            .subscribe();
-
-    }
-
-    private loadGrantsPage(): void {
-        this.dataSource.loadGrants(
-            this.userId,
-            this.paginator.pageIndex,
-            this.paginator.pageSize,
-        );
-    }
-
-    public isAllSelected(): boolean {
-        const numSelected = this.selection.selected.length;
-        const numRows = this.dataSource.grantsSubject.value.length;
-        return numSelected === numRows;
-    }
-
-    public masterToggle(): void {
-        this.isAllSelected() ?
-            this.selection.clear() :
-            this.dataSource.grantsSubject.value.forEach(row => this.selection.select(row));
-    }
-}
diff --git a/console/src/app/pages/user-grant-create/user-grant-create.component.html b/console/src/app/pages/user-grant-create/user-grant-create.component.html
index 673499545..a01f5525b 100644
--- a/console/src/app/pages/user-grant-create/user-grant-create.component.html
+++ b/console/src/app/pages/user-grant-create/user-grant-create.component.html
@@ -3,28 +3,33 @@
         <button (click)="close()" mat-icon-button>
             <mat-icon>close</mat-icon>
         </button>
-        <span class="abort">{{ 'USER.GRANTS.CREATE.TITLE' | translate }}</span><span class="abort-2">Step
+        <span class="abort">{{ 'GRANTS.CREATE.TITLE' | translate }}</span><span class="abort-2">Step
             {{ currentCreateStep }} of
             {{ STEPS }}</span>
     </div>
 
 
     <ng-container *ngIf="currentCreateStep === 1">
-        <h1>{{'PROJECT.GRANT.CREATE.ORG_TITLE' | translate}}</h1>
+        <p class="desc">
+            {{'PROJECT.GRANT.CREATE.ORG_DESCRIPTION' | translate: org}}
+            <br>
+            {{'PROJECT.GRANT.CREATE.ORG_DESCRIPTION_DESC' | translate}}
+        </p>
 
-        <p class="desc">{{'PROJECT.GRANT.CREATE.ORG_DESCRIPTION' | translate: org}}</p>
-        <p class="org" *ngIf="org">{{org?.name}}</p>
+        <ng-container *ngIf="filter && filter == UserGrantSearchKey.USERGRANTSEARCHKEY_USER_ID">
+            <h1>{{'PROJECT.GRANT.CREATE.SEL_PROJECT' | translate}}</h1>
 
-        <p class="desc">{{'PROJECT.GRANT.CREATE.ORG_DESCRIPTION_DESC' | translate}}</p>
-        <!-- <app-search-org-autocomplete class="block" singleOutput="true" (selectionChanged)="selectOrg($event)">
-        </app-search-org-autocomplete> -->
-    </ng-container>
+            <app-search-project-autocomplete class="block" singleOutput="true"
+                (selectionChanged)="selectProject($event)">
+            </app-search-project-autocomplete>
+        </ng-container>
 
-    <ng-container *ngIf="currentCreateStep === 2">
-        <h1>{{'PROJECT.GRANT.CREATE.SEL_PROJECT' | translate}}</h1>
+        <ng-container *ngIf="filter && filter == UserGrantSearchKey.USERGRANTSEARCHKEY_PROJECT_ID">
+            <h1>{{'PROJECT.GRANT.CREATE.SEL_PROJECT' | translate}}</h1>
 
-        <app-search-project-autocomplete class="block" singleOutput="true" (selectionChanged)="selectProject($event)">
-        </app-search-project-autocomplete>
+            <app-search-user-autocomplete class="block" singleOutput="true" (selectionChanged)="selectUser($event)">
+            </app-search-user-autocomplete>
+        </ng-container>
     </ng-container>
 
     <ng-container *ngIf="currentCreateStep === STEPS">
@@ -37,24 +42,13 @@
 
     <div class="btn-container">
         <ng-container *ngIf="currentCreateStep === 1">
-            <!-- <span></span> -->
-            <button [disabled]="!org || !userId" (click)="next()" color="primary" mat-raised-button class="big-button"
-                cdkFocusInitial>
+            <button
+                [disabled]="!org || (filter == UserGrantSearchKey.USERGRANTSEARCHKEY_PROJECT_ID && !projectId) || (filter == UserGrantSearchKey.USERGRANTSEARCHKEY_USER_ID && !userId)"
+                (click)="next()" color="primary" mat-raised-button class="big-button" cdkFocusInitial>
                 {{ 'ACTIONS.CONTINUE' | translate }}
             </button>
         </ng-container>
 
-        <ng-container *ngIf="currentCreateStep === 2">
-            <button (click)="previous()" color="primary" mat-button class="small-button" cdkFocusInitial>
-                {{ 'ACTIONS.BACK' | translate }}
-            </button>
-            <button [disabled]="!org || !userId" (click)="next()" color="primary" mat-raised-button class="big-button"
-                cdkFocusInitial>
-                {{ 'ACTIONS.CONTINUE' | translate }}
-            </button>
-        </ng-container>
-
-
         <ng-container *ngIf="currentCreateStep === STEPS">
             <button (click)="previous()" color="primary" mat-button class="small-button" cdkFocusInitial>
                 {{ 'ACTIONS.BACK' | translate }}
diff --git a/console/src/app/pages/user-grant-create/user-grant-create.component.scss b/console/src/app/pages/user-grant-create/user-grant-create.component.scss
index cd6ffcaea..ae76744cd 100644
--- a/console/src/app/pages/user-grant-create/user-grant-create.component.scss
+++ b/console/src/app/pages/user-grant-create/user-grant-create.component.scss
@@ -19,12 +19,7 @@
     }
 
     .desc {
-        color: #81868a;
-    }
-    
-    .org {
-        padding: 1rem 0;
-        font-size: 1.2rem;
+        color: #8795a1;
     }
 }
 
diff --git a/console/src/app/pages/user-grant-create/user-grant-create.component.ts b/console/src/app/pages/user-grant-create/user-grant-create.component.ts
index 2b0e1e70d..f2626bcac 100644
--- a/console/src/app/pages/user-grant-create/user-grant-create.component.ts
+++ b/console/src/app/pages/user-grant-create/user-grant-create.component.ts
@@ -3,7 +3,14 @@ import { Component, OnDestroy } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { Org } from 'src/app/proto/generated/auth_pb';
-import { ProjectGrantView, ProjectRole, ProjectView, UserGrant } from 'src/app/proto/generated/management_pb';
+import {
+    ProjectGrantView,
+    ProjectRole,
+    ProjectView,
+    User,
+    UserGrant,
+    UserGrantSearchKey,
+} from 'src/app/proto/generated/management_pb';
 import { AuthService } from 'src/app/services/auth.service';
 import { MgmtUserService } from 'src/app/services/mgmt-user.service';
 import { ToastService } from 'src/app/services/toast.service';
@@ -20,10 +27,15 @@ export class UserGrantCreateComponent implements OnDestroy {
     public grantId: string = '';
     public rolesList: string[] = [];
 
-    public STEPS: number = 3; // org, project, roles
+    public STEPS: number = 2; // project, roles
     public currentCreateStep: number = 1;
 
+    public filter!: UserGrantSearchKey;
+    public filterValue: string = '';
+
     private subscription: Subscription = new Subscription();
+
+    public UserGrantSearchKey: any = UserGrantSearchKey;
     constructor(
         private authService: AuthService,
         private userService: MgmtUserService,
@@ -31,8 +43,20 @@ export class UserGrantCreateComponent implements OnDestroy {
         private _location: Location,
         private route: ActivatedRoute,
     ) {
-        this.subscription = this.route.params.subscribe(({ id }: Params) => {
-            this.userId = id;
+        this.subscription = this.route.params.subscribe((params: Params) => {
+            console.log(params);
+            const { filter, filterValue } = params;
+            this.filter = filter;
+            switch (filter) {
+                case (`${UserGrantSearchKey.USERGRANTSEARCHKEY_PROJECT_ID}`):
+                    this.projectId = filterValue;
+                    break;
+                case (`${UserGrantSearchKey.USERGRANTSEARCHKEY_USER_ID}`):
+                    this.userId = filterValue;
+                    break;
+            }
+
+            console.log(this.projectId, this.userId);
         });
 
         this.authService.GetActiveOrg().then(org => {
@@ -57,7 +81,13 @@ export class UserGrantCreateComponent implements OnDestroy {
     }
 
     public selectProject(project: ProjectView.AsObject | ProjectGrantView.AsObject | any): void {
-        this.projectId = project.id ? project.id : project.projectId ? project.projectId : undefined;
+        console.log(project);
+        this.projectId = project.projectId;
+    }
+
+    public selectUser(user: User.AsObject): void {
+        console.log(user);
+        this.userId = user.id;
     }
 
     public selectRoles(roles: ProjectRole.AsObject[]): void {
diff --git a/console/src/app/pages/user-grant-create/user-grant-create.module.ts b/console/src/app/pages/user-grant-create/user-grant-create.module.ts
index 778cb1020..9bc57c1d4 100644
--- a/console/src/app/pages/user-grant-create/user-grant-create.module.ts
+++ b/console/src/app/pages/user-grant-create/user-grant-create.module.ts
@@ -7,6 +7,7 @@ import { CardModule } from 'src/app/modules/card/card.module';
 import {
     SearchProjectAutocompleteModule,
 } from 'src/app/modules/search-project-autocomplete/search-project-autocomplete.module';
+import { SearchUserAutocompleteModule } from 'src/app/modules/search-user-autocomplete/search-user-autocomplete.module';
 
 import { ProjectRolesModule } from '../../modules/project-roles/project-roles.module';
 import { UserGrantCreateRoutingModule } from './user-grant-create-routing.module';
@@ -24,6 +25,7 @@ import { UserGrantCreateComponent } from './user-grant-create.component';
         TranslateModule,
         CardModule,
         SearchProjectAutocompleteModule,
+        SearchUserAutocompleteModule,
         ProjectRolesModule,
     ],
     schemas: [
diff --git a/console/src/app/pages/user-list/user-list.component.html b/console/src/app/pages/user-list/user-list.component.html
index 0f50a9d1b..5d25d3653 100644
--- a/console/src/app/pages/user-list/user-list.component.html
+++ b/console/src/app/pages/user-list/user-list.component.html
@@ -35,14 +35,19 @@
         <table class="background-style" mat-table [dataSource]="dataSource">
             <ng-container matColumnDef="select">
                 <th mat-header-cell *matHeaderCellDef>
-                    <mat-checkbox (change)="$event ? masterToggle() : null"
+                    <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
                         [checked]="selection.hasValue() && isAllSelected()"
                         [indeterminate]="selection.hasValue() && !isAllSelected()">
                     </mat-checkbox>
                 </th>
-                <td mat-cell *matCellDef="let row">
-                    <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
-                        [checked]="selection.isSelected(row)">
+                <td mat-cell *matCellDef="let user">
+                    <mat-checkbox color="primary" (click)="$event.stopPropagation()"
+                        (change)="$event ? selection.toggle(user) : null" [checked]="selection.isSelected(user)">
+                        <app-avatar *ngIf="user && (user.displayName || (user.firstName && user.lastName))"
+                            class="avatar"
+                            [name]="user.displayName ? user.displayName : (user.firstName + ' '+ user.lastName)"
+                            [size]="32">
+                        </app-avatar>
                     </mat-checkbox>
                 </td>
             </ng-container>
diff --git a/console/src/app/pages/user-list/user-list.component.scss b/console/src/app/pages/user-list/user-list.component.scss
index 9bbe7ac01..c87795e32 100644
--- a/console/src/app/pages/user-list/user-list.component.scss
+++ b/console/src/app/pages/user-list/user-list.component.scss
@@ -4,7 +4,7 @@ h1 {
 }
 
 .sub {
-    color: #81868a;
+    color: #8795a1;
     margin-bottom: 2rem;
 }
 
@@ -18,7 +18,7 @@ h1 {
 
         .desc {
             font-size: .8rem;
-            color: #81868a;
+            color: #8795a1;
         }
         .count {
             font-size: 2rem;
@@ -61,6 +61,19 @@ h1 {
             }
         }
 
+        // tr {
+        //     .avatar {
+        //         filter: grayscale(100%);
+        //         transition: filter .1s ease-in-out;
+        //     }
+    
+        //     &:hover {
+        //         .avatar {
+        //             filter: none;
+        //         }
+        //     }
+        // }
+
         .data-row {
             cursor: pointer;
             &:hover {
diff --git a/console/src/app/pages/user-list/user-list.module.ts b/console/src/app/pages/user-list/user-list.module.ts
index b85509cc8..923dfe4a0 100644
--- a/console/src/app/pages/user-list/user-list.module.ts
+++ b/console/src/app/pages/user-list/user-list.module.ts
@@ -13,6 +13,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { HttpLoaderFactory } from 'src/app/app.module';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
+import { AvatarModule } from 'src/app/modules/avatar/avatar.module';
 import { CardModule } from 'src/app/modules/card/card.module';
 
 import { UserListRoutingModule } from './user-list-routing.module';
@@ -25,6 +26,7 @@ import { UserListComponent } from './user-list.component';
         UserListComponent,
     ],
     imports: [
+        AvatarModule,
         UserListRoutingModule,
         CommonModule,
         FormsModule,
diff --git a/console/src/app/pipes/has-role.pipe.ts b/console/src/app/pipes/has-role.pipe.ts
new file mode 100644
index 000000000..a684b7124
--- /dev/null
+++ b/console/src/app/pipes/has-role.pipe.ts
@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+import { AuthUserService } from '../services/auth-user.service';
+
+@Pipe({
+    name: 'hasRole',
+    pure: false,
+})
+export class HasRolePipe implements PipeTransform {
+
+    constructor(private authUserService: AuthUserService) { }
+
+    public transform(values: string[], each: boolean = false): any {
+        return this.authUserService.isAllowed(values, each);
+    }
+}
diff --git a/console/src/app/pipes/pipes.module.ts b/console/src/app/pipes/pipes.module.ts
index 4a724a773..30e205d37 100644
--- a/console/src/app/pipes/pipes.module.ts
+++ b/console/src/app/pipes/pipes.module.ts
@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MomentModule } from 'ngx-moment';
 
+import { HasRolePipe } from './has-role.pipe';
 import { LocalizedDatePipe } from './localized-date.pipe';
 import { TimestampToDatePipe } from './timestamp-to-date.pipe';
 
@@ -10,6 +11,7 @@ import { TimestampToDatePipe } from './timestamp-to-date.pipe';
     declarations: [
         LocalizedDatePipe,
         TimestampToDatePipe,
+        HasRolePipe,
     ],
     imports: [
         CommonModule,
@@ -18,6 +20,7 @@ import { TimestampToDatePipe } from './timestamp-to-date.pipe';
     exports: [
         LocalizedDatePipe,
         TimestampToDatePipe,
+        HasRolePipe,
     ],
 })
 export class PipesModule { }
diff --git a/console/src/app/proto/generated/management_pb.d.ts b/console/src/app/proto/generated/management_pb.d.ts
index db2e26c94..109ace340 100644
--- a/console/src/app/proto/generated/management_pb.d.ts
+++ b/console/src/app/proto/generated/management_pb.d.ts
@@ -113,6 +113,9 @@ export class Change extends jspb.Message {
   getSequence(): number;
   setSequence(value: number): void;
 
+  getEditorId(): string;
+  setEditorId(value: string): void;
+
   getEditor(): string;
   setEditor(value: string): void;
 
@@ -134,6 +137,7 @@ export namespace Change {
     changeDate?: google_protobuf_timestamp_pb.Timestamp.AsObject,
     eventType: string,
     sequence: number,
+    editorId: string,
     editor: string,
     data?: google_protobuf_struct_pb.Struct.AsObject,
   }
diff --git a/console/src/app/proto/generated/management_pb.js b/console/src/app/proto/generated/management_pb.js
index dd846e1d8..1d605f4d8 100644
--- a/console/src/app/proto/generated/management_pb.js
+++ b/console/src/app/proto/generated/management_pb.js
@@ -3820,7 +3820,8 @@ proto.caos.zitadel.management.api.v1.Change.toObject = function(includeInstance,
     changeDate: (f = msg.getChangeDate()) && google_protobuf_timestamp_pb.Timestamp.toObject(includeInstance, f),
     eventType: jspb.Message.getFieldWithDefault(msg, 2, ""),
     sequence: jspb.Message.getFieldWithDefault(msg, 3, 0),
-    editor: jspb.Message.getFieldWithDefault(msg, 4, ""),
+    editorId: jspb.Message.getFieldWithDefault(msg, 4, ""),
+    editor: jspb.Message.getFieldWithDefault(msg, 5, ""),
     data: (f = msg.getData()) && google_protobuf_struct_pb.Struct.toObject(includeInstance, f)
   };
 
@@ -3873,9 +3874,13 @@ proto.caos.zitadel.management.api.v1.Change.deserializeBinaryFromReader = functi
       break;
     case 4:
       var value = /** @type {string} */ (reader.readString());
-      msg.setEditor(value);
+      msg.setEditorId(value);
       break;
     case 5:
+      var value = /** @type {string} */ (reader.readString());
+      msg.setEditor(value);
+      break;
+    case 6:
       var value = new google_protobuf_struct_pb.Struct;
       reader.readMessage(value,google_protobuf_struct_pb.Struct.deserializeBinaryFromReader);
       msg.setData(value);
@@ -3931,17 +3936,24 @@ proto.caos.zitadel.management.api.v1.Change.serializeBinaryToWriter = function(m
       f
     );
   }
-  f = message.getEditor();
+  f = message.getEditorId();
   if (f.length > 0) {
     writer.writeString(
       4,
       f
     );
   }
+  f = message.getEditor();
+  if (f.length > 0) {
+    writer.writeString(
+      5,
+      f
+    );
+  }
   f = message.getData();
   if (f != null) {
     writer.writeMessage(
-      5,
+      6,
       f,
       google_protobuf_struct_pb.Struct.serializeBinaryToWriter
     );
@@ -4013,33 +4025,48 @@ proto.caos.zitadel.management.api.v1.Change.prototype.setSequence = function(val
 
 
 /**
- * optional string editor = 4;
+ * optional string editor_id = 4;
  * @return {string}
  */
-proto.caos.zitadel.management.api.v1.Change.prototype.getEditor = function() {
+proto.caos.zitadel.management.api.v1.Change.prototype.getEditorId = function() {
   return /** @type {string} */ (jspb.Message.getFieldWithDefault(this, 4, ""));
 };
 
 
 /** @param {string} value */
-proto.caos.zitadel.management.api.v1.Change.prototype.setEditor = function(value) {
+proto.caos.zitadel.management.api.v1.Change.prototype.setEditorId = function(value) {
   jspb.Message.setProto3StringField(this, 4, value);
 };
 
 
 /**
- * optional google.protobuf.Struct data = 5;
+ * optional string editor = 5;
+ * @return {string}
+ */
+proto.caos.zitadel.management.api.v1.Change.prototype.getEditor = function() {
+  return /** @type {string} */ (jspb.Message.getFieldWithDefault(this, 5, ""));
+};
+
+
+/** @param {string} value */
+proto.caos.zitadel.management.api.v1.Change.prototype.setEditor = function(value) {
+  jspb.Message.setProto3StringField(this, 5, value);
+};
+
+
+/**
+ * optional google.protobuf.Struct data = 6;
  * @return {?proto.google.protobuf.Struct}
  */
 proto.caos.zitadel.management.api.v1.Change.prototype.getData = function() {
   return /** @type{?proto.google.protobuf.Struct} */ (
-    jspb.Message.getWrapperField(this, google_protobuf_struct_pb.Struct, 5));
+    jspb.Message.getWrapperField(this, google_protobuf_struct_pb.Struct, 6));
 };
 
 
 /** @param {?proto.google.protobuf.Struct|undefined} value */
 proto.caos.zitadel.management.api.v1.Change.prototype.setData = function(value) {
-  jspb.Message.setWrapperField(this, 5, value);
+  jspb.Message.setWrapperField(this, 6, value);
 };
 
 
@@ -4056,7 +4083,7 @@ proto.caos.zitadel.management.api.v1.Change.prototype.clearData = function() {
  * @return {boolean}
  */
 proto.caos.zitadel.management.api.v1.Change.prototype.hasData = function() {
-  return jspb.Message.getField(this, 5) != null;
+  return jspb.Message.getField(this, 6) != null;
 };
 
 
diff --git a/console/src/app/services/mgmt-user.service.ts b/console/src/app/services/mgmt-user.service.ts
index af5bb0255..c9d48b2a1 100644
--- a/console/src/app/services/mgmt-user.service.ts
+++ b/console/src/app/services/mgmt-user.service.ts
@@ -15,6 +15,9 @@ import {
     ProjectGrantMemberSearchQuery,
     ProjectGrantMemberSearchRequest,
     ProjectGrantMemberSearchResponse,
+    ProjectGrantUserGrantID,
+    ProjectGrantUserGrantSearchRequest,
+    ProjectGrantUserGrantUpdate,
     ProjectRoleAdd,
     SetPasswordNotificationRequest,
     UpdateUserAddressRequest,
@@ -26,9 +29,12 @@ import {
     UserEmail,
     UserGrant,
     UserGrantCreate,
+    UserGrantID,
     UserGrantSearchQuery,
     UserGrantSearchRequest,
     UserGrantSearchResponse,
+    UserGrantUpdate,
+    UserGrantView,
     UserID,
     UserPhone,
     UserProfile,
@@ -367,6 +373,93 @@ export class MgmtUserService {
         );
     }
 
+
+    public async searchProjectGrantUserGrants(
+        limit: number,
+        offset: number,
+        queryList?: UserGrantSearchQuery[],
+    ): Promise<UserGrantSearchResponse> {
+        const req = new ProjectGrantUserGrantSearchRequest();
+        req.setLimit(limit);
+        req.setOffset(offset);
+        if (queryList) {
+            req.setQueriesList(queryList);
+        }
+        return await this.request(
+            c => c.searchProjectGrantUserGrants,
+            req,
+            f => f,
+        );
+    }
+
+    public async projectGrantUserGrantByID(
+        id: string,
+        userId: string,
+        projectGrantId: string,
+    ): Promise<UserGrant> {
+        const req = new ProjectGrantUserGrantID();
+        req.setId(id);
+        req.setUserId(userId);
+        req.setProjectGrantId(projectGrantId);
+
+        return await this.request(
+            c => c.projectGrantUserGrantByID,
+            req,
+            f => f,
+        );
+    }
+
+    public async UserGrantByID(
+        id: string,
+        userId: string,
+    ): Promise<UserGrantView> {
+        const req = new UserGrantID();
+        req.setId(id);
+        req.setUserId(userId);
+
+        return await this.request(
+            c => c.userGrantByID,
+            req,
+            f => f,
+        );
+    }
+
+    public async UpdateUserGrant(
+        id: string,
+        userId: string,
+        roleKeysList: string[],
+    ): Promise<UserGrant> {
+        const req = new UserGrantUpdate();
+        req.setId(id);
+        req.setRoleKeysList(roleKeysList);
+        req.setUserId(userId);
+
+        return await this.request(
+            c => c.updateUserGrant,
+            req,
+            f => f,
+        );
+    }
+
+    public async updateProjectGrantUserGrant(
+        id: string,
+        roleKeysList: string[],
+        userId: string,
+        projectGrantId: string,
+    ): Promise<UserGrant> {
+        const req = new ProjectGrantUserGrantUpdate();
+        req.setId(id);
+        req.setRoleKeysList(roleKeysList);
+        req.setUserId(userId);
+        req.setProjectGrantId(projectGrantId);
+
+        return await this.request(
+            c => c.updateProjectGrantUserGrant,
+            req,
+            f => f,
+        );
+    }
+
     public async ApplicationChanges(id: string, limit: number, offset: number): Promise<Changes> {
         const req = new ChangeRequest();
         req.setId(id);
diff --git a/console/src/app/services/project.service.ts b/console/src/app/services/project.service.ts
index 430afecc8..38dff3211 100644
--- a/console/src/app/services/project.service.ts
+++ b/console/src/app/services/project.service.ts
@@ -29,6 +29,7 @@ import {
     ProjectGrantUpdate,
     ProjectGrantView,
     ProjectID,
+    ProjectMember,
     ProjectMemberAdd,
     ProjectMemberChange,
     ProjectMemberRemove,
@@ -36,6 +37,7 @@ import {
     ProjectMemberSearchRequest,
     ProjectMemberSearchResponse,
     ProjectRoleAdd,
+    ProjectRoleAddBulk,
     ProjectRoleRemove,
     ProjectRoleSearchQuery,
     ProjectRoleSearchRequest,
@@ -159,18 +161,6 @@ export class ProjectService {
         );
     }
 
-    public async ChangeProjectMember(id: string, userId: string, rolesList: string[]): Promise<Empty> {
-        const req = new ProjectMemberChange();
-        req.setId(id);
-        req.setUserId(userId);
-        req.setRolesList(rolesList);
-        return await this.request(
-            c => c.changeProjectMember,
-            req,
-            f => f,
-        );
-    }
-
     public async DeactivateProject(projectId: string): Promise<Project> {
         const req = new ProjectID();
         req.setId(projectId);
@@ -212,9 +202,9 @@ export class ProjectService {
         );
     }
 
-    public async AddProjectMember(projectId: string, userId: string, rolesList: string[]): Promise<Empty> {
+    public async AddProjectMember(id: string, userId: string, rolesList: string[]): Promise<Empty> {
         const req = new ProjectMemberAdd();
-        req.setId(projectId);
+        req.setId(id);
         req.setUserId(userId);
         req.setRolesList(rolesList);
         return await this.request(
@@ -224,6 +214,18 @@ export class ProjectService {
         );
     }
 
+    public async ChangeProjectMember(id: string, userId: string, rolesList: string[]): Promise<ProjectMember> {
+        const req = new ProjectMemberChange();
+        req.setId(id);
+        req.setUserId(userId);
+        req.setRolesList(rolesList);
+        return await this.request(
+            c => c.changeProjectMember,
+            req,
+            f => f,
+        );
+    }
+
     public async AddProjectGrantMember(
         projectId: string,
         grantId: string,
@@ -359,6 +361,20 @@ export class ProjectService {
         );
     }
 
+    public async BulkAddProjectRole(
+        id: string,
+        rolesList: ProjectRoleAdd[],
+    ): Promise<Empty> {
+        const req = new ProjectRoleAddBulk();
+        req.setId(id);
+        req.setProjectRolesList(rolesList);
+        return await this.request(
+            c => c.bulkAddProjectRole,
+            req,
+            f => f,
+        );
+    }
+
     public async RemoveProjectRole(projectId: string, key: string): Promise<Empty> {
         const req = new ProjectRoleRemove();
         req.setId(projectId);
diff --git a/console/src/assets/i18n/de.json b/console/src/assets/i18n/de.json
index a47d867bb..8a1d8aaab 100644
--- a/console/src/assets/i18n/de.json
+++ b/console/src/assets/i18n/de.json
@@ -158,14 +158,6 @@
             "REGION": "Kanton",
             "COUNTRY": "Land"
         },
-        "GRANTS": {
-            "TITLE": "Grants",
-            "DESCRIPTION": "Definieren Sie die Operationen und Rechte die dem User zur Verfügung gestellt werden.",
-            "CREATE": {
-                "TITLE": "User Grant erstellen",
-                "DESCRIPTION": "Suchen Sie nach der Organisation, dem Project und den verfügbaren Rollen!"
-            }
-        },
         "VALIDATION": {
             "INVALIDPATTERN": "Das Password muss aus mindestens 8 Zeichen bestehen und einen Grossbuchstaben, ein Sonderzeichen und eine Zahl enthalten. Die maximale Anzahl an Zeichen ist 72!",
             "REQUIRED": "Das Feld ist leer",
@@ -192,7 +184,7 @@
         "SIGNEDOUT":"Du bist abgemeldet. Klicke den Button um dich wieder anzumelden!",
         "SIGNEDOUT_BTN":"Anmelden",
         "EDITACCOUNT":"Account bearbeiten",
-        "ADDACCOUNT":"mit einem anderen Account anmelden"
+        "ADDACCOUNT":"Account hinzufügen"
     },
     "IAM": {
         "DETAIL": {
@@ -321,7 +313,11 @@
             "CREATE_DESC": "Geben Sie den Namen ein",
             "ROLE": "Rolle",
             "NOITEMS": "Keine Projekte",
-            "ZITADELPROJECT":"Diese Einstellungen gehören zum Zitadel-Projekt. Wenn Sie etwas ändern, verhält sich Zitadel möglicherweise nicht wie beabsichtigt!"
+            "ZITADELPROJECT":"Diese Einstellungen gehören zum Zitadel-Projekt. Wenn Sie etwas ändern, verhält sich Zitadel möglicherweise nicht wie beabsichtigt!",
+            "TYPE":{
+                "OWNED":"Eigene Projekte",
+                "GRANTED":"Berechtigte Projekte"
+            }
         },
         "STATE": {
             "TITLE":"Status",
@@ -359,11 +355,20 @@
                 "ORG_TITLE":"Organisation",
                 "ORG_DESCRIPTION":"Sie sind im Begriff einen Nutzer für die Organisation {{name}} zu berechtigen",
                 "ORG_DESCRIPTION_DESC":"Wechseln Sie den Context um die Organisation zu wechseln!",
-                "SEL_ORG_BUTTON": "Suche Organisation"
+                "SEL_ORG_BUTTON": "Suche Organisation",
+                "FOR_ORG":"The grant wird erstellt für:"
             },
+            "DETAIL": {
+                "TITLE":"Berechtigte Manager der Organisation",
+                "DESC":"Dies sind die Manager der berechtigten Organisation. Wählen Sie die Benutzer, die Zugriff zum editieren der jeweiligen Zugänge erhalten."
+            },
+            "SHOWDETAIL":"Zeige Details",
+            "USER":"Benutzer",
+            "MEMBERS":"Managers",
             "PROJECTNAME":"Projekt Name",
             "GRANTEDORG": "Granted Organization",
             "GRANTEDORGDOMAIN": "Domain",
+            "GRANTEDORGNAME":"Org Name",
             "CREATIONDATE": "Erstelldatum",
             "CHANGEDATE": "Letzte Änderung",
             "ROLENAMESLIST": "Rollen"
@@ -500,7 +505,23 @@
     "GRANTS": {
         "DELETE":"Grant löschen",
         "ADD":"Grant erstellen",
-        "ADD_BTN":"Neu"
+        "ADD_BTN":"Neu",
+        "PROJECT": {
+            "TITLE": "Authorisierung",
+            "DESCRIPTION": "Definieren Sie die Operationen und Rechte die dem User zur Verfügung gestellt werden. Achtung: Sie können nur Einträge von Projekten sehen bei denen Sie eine Authorisierung besitzen!"
+        },
+        "USER": {
+            "TITLE": "Authorisierung",
+            "DESCRIPTION": "Definieren Sie die Operationen und Rechte die dem User zur Verfügung gestellt werden. Achtung: Sie können nur Einträge von Projekten sehen bei denen Sie eine Authorisierung besitzen!"
+        },
+        "CREATE": {
+            "TITLE": "Authorisierung erstellen",
+            "DESCRIPTION": "Suchen Sie nach der Organisation, dem Project und den verfügbaren Rollen!"
+        },
+        "DETAIL": {
+            "TITLE":"Authorisierung Detail",
+            "DESCRIPTION":""
+        }
     },
     "CHANGES": {
         "LISTTITLE":"Letzte Änderungen",
diff --git a/console/src/assets/i18n/en.json b/console/src/assets/i18n/en.json
index 8fa2f2ffe..97202774f 100644
--- a/console/src/assets/i18n/en.json
+++ b/console/src/assets/i18n/en.json
@@ -158,14 +158,6 @@
             "REGION": "Region",
             "COUNTRY": "Country"
         },
-        "GRANTS": {
-            "TITLE": "Grants",
-            "DESCRIPTION": "Define the operations and rights that are made available to the user",
-            "CREATE": {
-                "TITLE": "Create User Grant",
-                "DESCRIPTION": "Search for the organization, the project and the corresponding project roles!"
-            }
-        },
         "VALIDATION": {
             "INVALIDPATTERN": "The password must consist of at least 8 characters and contain a capital letter, a special character and a number. The maximum length is 72.",
             "REQUIRED": "The input field is empty",
@@ -322,7 +314,11 @@
             "CREATE_DESC": "Insert your projects name",
             "ROLE": "Role",
             "NOITEMS": "No projects",
-            "ZITADELPROJECT":"This belongs to Zitadel project. If you change something, Zitadel may not behave as intended!"
+            "ZITADELPROJECT":"This belongs to Zitadel project. If you change something, Zitadel may not behave as intended!",
+            "TYPE":{
+                "OWNED":"Owned Projects",
+                "GRANTED":"Granted Projects"
+            }
         },
         "STATE": {
             "TITLE":"State",
@@ -355,16 +351,25 @@
                 "TITLE": "Create Member Grant",
                 "SEL_USERS": "Select the users you wish to grant",
                 "SEL_PROJECT": "Search for a project",
-                "SEL_ROLES": "Select the roles you want be be added to the grant",
+                "SEL_ROLES": "Select the roles you want to be added to the grant",
                 "SEL_ORG": "Search for the domain",
                 "ORG_TITLE":"Organization",
-                "ORG_DESCRIPTION":"You are about to grant a user on the organization {{name}}",
-                "ORG_DESCRIPTION_DESC":"Switch the context in the header above to grant a user of another organization",
-                "SEL_ORG_BUTTON": "Search Organization"
+                "ORG_DESCRIPTION":"You are about to grant a user for the organization {{name}}",
+                "ORG_DESCRIPTION_DESC":"Switch the context in the header above to grant a user for another organization",
+                "SEL_ORG_BUTTON": "Search Organization",
+                "FOR_ORG":"The grant is created for:"
             },
+            "DETAIL": {
+                "TITLE":"Managers of the granted organization",
+                "DESC":"These are the Managers of the granted organization. You can select which users are allowed to maintain control of the project."
+            },
+            "SHOWDETAIL":"Show Details",
+            "USER":"User",
+            "MEMBERS":"Managers",
             "PROJECTNAME":"Project Name",
             "GRANTEDORG": "Granted Organization",
             "GRANTEDORGDOMAIN": "Domain",
+            "GRANTEDORGNAME":"Org Name",
             "CREATIONDATE": "Creation Date",
             "CHANGEDATE": "Last Modified",
             "ROLENAMESLIST": "Roles"
@@ -499,9 +504,25 @@
         "PROJECT_GRANT_USER_GRANT_VIEWER":"Project Grant User Grant Viewer"
     },
     "GRANTS": {
-        "DELETE":"Delete grant",
-        "ADD":"Create grant",
-        "ADD_BTN":"New"
+        "DELETE":"delete authorization",
+        "ADD":"create authorization",
+        "ADD_BTN":"new",
+        "PROJECT": {
+            "TITLE": "Authorizations",
+            "DESCRIPTION": "Define Authorizations for the specified project. Note that you can only see entries from projects and users where you are permitted to."
+        },
+        "USER": {
+            "TITLE": "Authorizations",
+            "DESCRIPTION": "Define Authorizations for the specified user. Note that you can only see entries from projects and users where you are permitted to."
+        },
+        "CREATE": {
+            "TITLE": "Create authorization",
+            "DESCRIPTION": "Search for the orgnanization, the project and the corresponding roles."
+        },
+        "DETAIL": {
+            "TITLE":"Authorization Detail",
+            "DESCRIPTION":""
+        }
     },
     "CHANGES": {
         "LISTTITLE":"Last Changes",
diff --git a/console/src/component-themes.scss b/console/src/component-themes.scss
index 1d706f5b9..64c3ad4d0 100644
--- a/console/src/component-themes.scss
+++ b/console/src/component-themes.scss
@@ -4,6 +4,7 @@
 @import './styles/morph-card';
 @import './styles/changes';
 @import './styles/avatar';
+@import './styles/meta';
 
 
 @mixin component-themes($theme) {
@@ -13,4 +14,5 @@
     @include sidenav-list-theme($theme);
     @include morph-card-theme($theme);
     @include changes-theme($theme);
+    @include meta-theme($theme);
 }
\ No newline at end of file
diff --git a/console/src/styles.scss b/console/src/styles.scss
index de49613dd..a4df39f39 100644
--- a/console/src/styles.scss
+++ b/console/src/styles.scss
@@ -33,7 +33,7 @@ $caos-dark-brand: (
     A400: #38649d,
     A500: #666666,
     A600: #ffffff,
-    A700: #81868a,
+    A700: #8795a1,
     A800: #2d2e30,
     A900: #212224,
     contrast: (
@@ -55,61 +55,39 @@ $caos-dark-brand: (
 );
 
 $caos-light-brand: (
-    50: mat-color($mat-indigo, 50),
-    100:  mat-color($mat-indigo, 100),
-    200:  mat-color($mat-indigo, 200),
-    300:  mat-color($mat-indigo, 300),
-    400:  mat-color($mat-indigo, 400),
-    500: mat-color($mat-indigo, 500),
-    600:  mat-color($mat-indigo, 600),
-    700:  mat-color($mat-indigo, 700),
-    800:  mat-color($mat-indigo, 800),
-    900:  mat-color($mat-indigo, 900),
-    A100: mat-color($mat-indigo, A100),
-    A200: mat-color($mat-indigo, A200),
-    A300: mat-color($mat-indigo, A300),
-    A400: mat-color($mat-indigo, A400),
+    50: mat-color($mat-grey, 50),
+    100:  mat-color($mat-grey, 100),
+    200:  mat-color($mat-grey, 200),
+    300:  mat-color($mat-grey, 300),
+    400:  mat-color($mat-grey, 400),
+    500: mat-color($mat-grey, 500),
+    600:  mat-color($mat-grey, 600),
+    700:  mat-color($mat-grey, 700),
+    800:  mat-color($mat-grey, 800),
+    900:  mat-color($mat-grey, 900),
+    A100: mat-color($mat-grey, A100),
+    A200: mat-color($mat-grey, A200),
+    A300: mat-color($mat-grey, A300),
+    A400: mat-color($mat-grey, A400),
     A500:#333333,
     A600: #000000,
-    A700: #dadce0,
-    A800: #ffffff,
-    A900: #ffffff,
+    A700: #8795a1,
+    A800: #fafafa,
+    A900: #fafafa,
     contrast: (
-        50: $black-87-opacity,
-        100: $black-87-opacity,
-        200: $black-87-opacity,
-        300: $black-87-opacity,
-        400: $black-87-opacity,
+        50: #3d4852,
+        100: #3d4852,
+        200: #3d4852,
+        300: #3d4852,
+        400: #3d4852,
         500: white,
         600: white,
         700: white,
         800: white,
         900: white,
-        A100: $black-87-opacity,
-        A200: $black-87-opacity,
-        A400: $black-87-opacity,
-        A700: white,
-    )
-);
-
-$caos-custom: (
-    500:  rgb(144,212,210),
-    700: rgb(176, 241, 239),
-    A700: rgb(96, 139, 138),
-    contrast: (
-        50: $black-87-opacity,
-        100: $black-87-opacity,
-        200: $black-87-opacity,
-        300: $black-87-opacity,
-        400: $black-87-opacity,
-        500: #000000,
-        600: white,
-        700: white,
-        800: white,
-        900: white,
-        A100: $black-87-opacity,
-        A200: $black-87-opacity,
-        A400: $black-87-opacity,
+        A100: #3d4852,
+        A200: #3d4852,
+        A400: #3d4852,
         A700: white,
     )
 );
@@ -118,7 +96,7 @@ $caos-custom: (
 // hue. Available color palettes: https://material.io/design/color/
 
 $light-primary: mat-palette($caos-light-brand);
-$light-accent: mat-palette($mat-indigo);
+$light-accent: mat-palette($mat-pink);
 $light-warn: mat-palette($mat-red);
 
 $dark-primary: mat-palette($caos-dark-brand);
@@ -143,11 +121,7 @@ $custom-typography: mat-typography-config(
     @include angular-material-theme($light-theme);
     color: #202124;
 
-    .crescent {
-        background-color:white !important;
-    }
-
-	mat-card, .side, .main-container {
+	.crescent, .side, .main-container {
 		background-color: white;
     }
 }
@@ -156,11 +130,7 @@ $custom-typography: mat-typography-config(
     @include component-themes($dark-theme);
     @include angular-material-theme($dark-theme);
 
-    .crescent {
-        background-color: #212224;
-    }
-
-	mat-card, .side, .main-container {
+	.crescent, .side, .main-container {
 		background-color: #212224;
     }
     
diff --git a/console/src/styles/card.scss b/console/src/styles/card.scss
index ac98a2ed9..bc981acd4 100644
--- a/console/src/styles/card.scss
+++ b/console/src/styles/card.scss
@@ -12,7 +12,7 @@
 
     .card {
         background-color: $primary-dark;
-        border: 1px solid $border-color;
+        border: 1px solid rgba($border-color, .2);
         box-sizing: border-box;
         border-radius: .5rem;
         outline: none;
diff --git a/console/src/styles/changes.scss b/console/src/styles/changes.scss
index 436ae137f..1347c54c1 100644
--- a/console/src/styles/changes.scss
+++ b/console/src/styles/changes.scss
@@ -5,6 +5,6 @@
     $primary-dark: mat-color($primary, A600);
     
     .change-item-back {
-        background-color: rgba($primary-dark, 0.05);
+        background-color: rgba($primary-dark, 0.03);
     }
 }
diff --git a/console/src/styles/meta.scss b/console/src/styles/meta.scss
new file mode 100644
index 000000000..37ad5553f
--- /dev/null
+++ b/console/src/styles/meta.scss
@@ -0,0 +1,27 @@
+@import '~@angular/material/theming';
+
+@mixin meta-theme($theme) {
+    $primary: map-get($theme, primary);
+    $primary-color: mat-color($primary, 500);
+    $primary-dark: mat-color($primary, A800);
+
+    $lighter-color: mat-color($primary, 300);
+
+    .meta-wrapper {
+        .meta {
+            position: relative;
+            flex: 1 0 300px;
+            background: linear-gradient(to bottom right,rgba($lighter-color, .05) 20%,transparent 50%);
+
+            &.hidden {
+                background: linear-gradient(to bottom right, rgba($lighter-color, .05),transparent 50%);
+            }
+    
+            &:after {
+                border-left: 2px solid $primary-color;
+                -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from($primary-color), to($primary-dark), color-stop(01, $primary-dark)) 50 21;
+                border-image: -webkit-gradient(linear, left top, left bottom, from($primary-color), to($primary-dark), color-stop(01, $primary-dark)) 50 21;
+            }
+        }
+    }
+}
diff --git a/console/src/styles/morph-card.scss b/console/src/styles/morph-card.scss
index 29cf391e3..ee56ae2ca 100644
--- a/console/src/styles/morph-card.scss
+++ b/console/src/styles/morph-card.scss
@@ -17,16 +17,11 @@
         width: 80px;
         margin: 1rem;
         border-radius: 16px;
+        border: 1px solid $accent-color;
         background: $primary-dark;
-        box-shadow:  5px 5px 20px rgba($color: black, $alpha: 0.5), -5px -5px 20px rgba($color: $secondary-dark, $alpha: 1);
 
         &.add {
             background: $accent-color;
-            box-shadow:  5px 5px 20px rgba($color: black, $alpha: 0.5), -5px -5px 20px rgba($color: $secondary-dark, $alpha: 1);
         }
-
-        // &:hover {
-        //     @include mat-elevation(5);
-        // }
     }
 }
diff --git a/console/src/styles/sidenav-list.scss b/console/src/styles/sidenav-list.scss
index eaef5b9de..8f23c2b49 100644
--- a/console/src/styles/sidenav-list.scss
+++ b/console/src/styles/sidenav-list.scss
@@ -6,6 +6,8 @@
     $primary-color: mat-color($primary, 500);
     $accent-color: mat-color($accent, 500);
     $primary-dark: mat-color($primary, A900);
+    $sec-dark: mat-color($primary, A800);
+
 
     .mat-menu-item {
         &.show-all {
@@ -19,7 +21,7 @@
         color: inherit;
 
         &:hover {
-            background-color: #00000020;
+            background-color: $sec-dark;
             border-top-right-radius: 1.5rem;
             border-bottom-right-radius: 1.5rem;
         }
diff --git a/console/src/styles/table.scss b/console/src/styles/table.scss
index f314f5677..601dc6518 100644
--- a/console/src/styles/table.scss
+++ b/console/src/styles/table.scss
@@ -20,7 +20,13 @@
         border-radius: 1rem;
         color: mat-color($foreground, text);
         white-space: nowrap;
-        background-color: #81868a;
+        background-color: #8795a1;
         padding: .5rem 1rem;
     }
+
+    td {
+        .mat-form-field-wrapper {
+            padding-bottom: 0;
+        }
+    }
 }
\ No newline at end of file