diff --git a/console/angular.json b/console/angular.json
index cae11088b..624c36870 100644
--- a/console/angular.json
+++ b/console/angular.json
@@ -34,9 +34,7 @@
             "scripts": [],
             "allowedCommonJsDependencies": [
                 "@angular/common/locales/de",
-                "src/app/proto/generated/*.js",
-                "src/app/proto/generated/**/*.js",
-                "src/app/proto/generated/auth_pb",
+                "src/app/proto/generated/**",
                 "file-saver",
                 "qrcode"
              ]
diff --git a/console/src/app/animations.ts b/console/src/app/animations.ts
index ccbfadf2c..acb2ef4e9 100644
--- a/console/src/app/animations.ts
+++ b/console/src/app/animations.ts
@@ -77,6 +77,38 @@ export const navAnimations: Array<AnimationTriggerMetadata> = [
     ]),
 ];
 
+
+export const enterAnimations: Array<AnimationTriggerMetadata> = [
+    trigger('appearfade', [
+        transition(':enter', [
+            style({
+                transform: 'scale(.9) translateY(-10%)',
+                opacity: 0,
+            }),
+            animate(
+                '100ms ease-in-out',
+                style({
+                    transform: 'scale(1) translateY(0%)',
+                    opacity: 1,
+                }),
+            ),
+        ]),
+        transition(':leave', [
+            style({
+                transform: 'scale(1) translateY(0%)',
+                opacity: 1,
+            }),
+            animate(
+                '100ms ease-in-out',
+                style({
+                    transform: 'scale(.9) translateY(-10%)',
+                    opacity: 0,
+                }),
+            ),
+        ]),
+    ]),
+];
+
 export const routeAnimations: AnimationTriggerMetadata = trigger('routeAnimations', [
     transition('HomePage => AddPage', [
         style({ transform: 'translateX(100%)', opacity: 0.5 }),
diff --git a/console/src/app/app.component.html b/console/src/app/app.component.html
index be75b5629..36c104ab8 100644
--- a/console/src/app/app.component.html
+++ b/console/src/app/app.component.html
@@ -12,22 +12,31 @@
                 </ng-template>
             </a>
 
-            <button (click)="loadOrgs()" *ngIf="profile?.id && org" mat-button
-                [matMenuTriggerFor]="menu">{{org?.name ? org.name : 'NO NAME'}}
+            <button (click)="loadOrgs()" *ngIf="profile?.id && org" mat-button [matMenuTriggerFor]="menu"
+                (menuOpened)="focusFilter()">{{org?.name ? org.name : 'NO NAME'}}
                 <mat-icon>
                     arrow_drop_down</mat-icon>
             </button>
 
-            <mat-menu #menu="matMenu">
-                <mat-progress-bar *ngIf="orgLoading" color="accent" mode="indeterminate"></mat-progress-bar>
-                <button class="show-all" mat-menu-item
-                    [routerLink]="[ '/org/overview' ]">{{'MENU.SHOWORGS' | translate}}</button>
+            <mat-menu class="menu" #menu="matMenu">
+                <div class="spinner-w">
+                    <mat-spinner diameter="20" *ngIf="orgLoading" color="accent">
+                    </mat-spinner>
+                </div>
+
+                <mat-form-field class="filter-form" appearance="fill">
+                    <input autocomplete="off" matInput (click)="$event.stopPropagation()" (keyup)="applyFilter($event)"
+                        placeholder="{{'ORG.PAGES.FILTERPLACEHOLDER' | translate}}" #input>
+                </mat-form-field>
 
                 <button [ngClass]="{'active': temporg.id === org?.id}" [disabled]="!temporg.id"
                     *ngFor="let temporg of orgs" mat-menu-item (click)="setActiveOrg(temporg)">
                     {{temporg?.name ? temporg.name : 'NO NAME'}}
                 </button>
 
+                <button class="show-all" mat-menu-item
+                    [routerLink]="[ '/org/overview' ]">{{'MENU.SHOWORGS' | translate}}</button>
+
                 <ng-template appHasRole [appHasRole]="['org.create','iam.write']">
                     <button mat-menu-item [routerLink]="[ '/org/create' ]">
                         <mat-icon class="avatar">add</mat-icon>
diff --git a/console/src/app/app.component.scss b/console/src/app/app.component.scss
index a5b97c8c3..f5bf60738 100644
--- a/console/src/app/app.component.scss
+++ b/console/src/app/app.component.scss
@@ -1,3 +1,4 @@
+@import '~@angular/material/theming';
 
 .root-header {
   position: fixed;
@@ -159,13 +160,6 @@
         margin-bottom: 1rem;
       }
     }
-
-    .primary-button {
-      margin: 1rem;
-      border-radius: 1.5rem;
-      height: 2.5rem;
-      padding: 0 1rem;
-    }
   }
 
   .content {
@@ -229,3 +223,35 @@
     flex: 1;
   }
 }
+
+@mixin textvar($theme) {
+  .filter-form {
+    margin: 0 .5rem;
+    /* stylelint-disable */
+
+    $foreground: map-get($theme, foreground);
+    color: mat-color($foreground, text) !important;
+  }
+
+  .show-all {
+    $primary: map-get($theme, primary);
+    color: mat-color($primary, 300) !important;
+    border-bottom: 2px solid #8795a1;
+    margin-bottom: .5rem;
+  }
+  /* stylelint-enable */
+}
+
+.menu {
+  position: relative;
+
+  .spinner-w {
+    top: 1rem;
+    left: 0;
+    right: 0;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
diff --git a/console/src/app/app.component.ts b/console/src/app/app.component.ts
index 7c01f42b3..62b0f8e60 100644
--- a/console/src/app/app.component.ts
+++ b/console/src/app/app.component.ts
@@ -1,7 +1,7 @@
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { DOCUMENT, ViewportScroller } from '@angular/common';
-import { Component, HostBinding, Inject, OnDestroy, ViewChild } from '@angular/core';
+import { Component, ElementRef, HostBinding, Inject, OnDestroy, ViewChild } from '@angular/core';
 import { MatIconRegistry } from '@angular/material/icon';
 import { MatDrawer } from '@angular/material/sidenav';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -11,7 +11,13 @@ import { Observable, of, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { accountCard, navAnimations, routeAnimations, toolbarAnimation } from './animations';
-import { Org, UserProfileView } from './proto/generated/auth_pb';
+import {
+    MyProjectOrgSearchKey,
+    MyProjectOrgSearchQuery,
+    Org,
+    SearchMethod,
+    UserProfileView,
+} from './proto/generated/auth_pb';
 import { AuthenticationService } from './services/authentication.service';
 import { GrpcAuthService } from './services/grpc-auth.service';
 import { ManagementService } from './services/mgmt.service';
@@ -32,6 +38,7 @@ import { UpdateService } from './services/update.service';
 })
 export class AppComponent implements OnDestroy {
     @ViewChild('drawer') public drawer!: MatDrawer;
+    @ViewChild('input', { static: false }) input!: ElementRef;
     public isHandset$: Observable<boolean> = this.breakpointObserver
         .observe('(max-width: 599px)')
         .pipe(map(result => {
@@ -172,9 +179,17 @@ export class AppComponent implements OnDestroy {
         this.orgSub.unsubscribe();
     }
 
-    public loadOrgs(): void {
+    public loadOrgs(filter?: string): void {
+        let query;
+        if (filter) {
+            query = new MyProjectOrgSearchQuery();
+            query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS_IGNORE_CASE);
+            query.setKey(MyProjectOrgSearchKey.MYPROJECTORGSEARCHKEY_ORG_NAME);
+            query.setValue(filter);
+        }
+
         this.orgLoading = true;
-        this.authService.SearchMyProjectOrgs(10, 0).then(res => {
+        this.authService.SearchMyProjectOrgs(10, 0, query ? [query] : undefined).then(res => {
             this.orgs = res.toObject().resultList;
             this.orgLoading = false;
         }).catch(error => {
@@ -207,7 +222,6 @@ export class AppComponent implements OnDestroy {
             this.profile = userprofile;
             const lang = userprofile.preferredLanguage.match(/en|de/) ? userprofile.preferredLanguage : 'en';
             this.translate.use(lang);
-            console.log(this.document.documentElement.lang);
             this.document.documentElement.lang = lang;
         });
     }
@@ -231,5 +245,18 @@ export class AppComponent implements OnDestroy {
             }
         });
     }
+
+    public applyFilter(event: Event): void {
+        const filterValue = (event.target as HTMLInputElement).value;
+        this.loadOrgs(
+            filterValue.trim().toLowerCase(),
+        );
+    }
+
+    focusFilter(): void {
+        setTimeout(() => {
+            this.input.nativeElement.focus();
+        }, 0);
+    }
 }
 
diff --git a/console/src/app/app.module.ts b/console/src/app/app.module.ts
index 27d2d5a0b..b72fe3031 100644
--- a/console/src/app/app.module.ts
+++ b/console/src/app/app.module.ts
@@ -7,9 +7,12 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatNativeDateModule } from '@angular/material/core';
 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 { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -104,8 +107,11 @@ const authConfig: AuthConfig = {
         MatSidenavModule,
         MatCardModule,
         OutsideClickModule,
+        MatFormFieldModule,
+        MatInputModule,
         HasRolePipeModule,
         MatProgressBarModule,
+        MatProgressSpinnerModule,
         MatToolbarModule,
         MatMenuModule,
         MatSnackBarModule,
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 deaa9f79e..2ef92e72a 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
@@ -18,8 +18,4 @@
   .ok-button {
     margin-left: .5rem;
   }
-
-  button {
-    border-radius: .5rem;
-  }
 }
diff --git a/console/src/app/modules/changes/changes.component.ts b/console/src/app/modules/changes/changes.component.ts
index 88ffcc631..bfc57e76f 100644
--- a/console/src/app/modules/changes/changes.component.ts
+++ b/console/src/app/modules/changes/changes.component.ts
@@ -103,11 +103,9 @@ export class ChangesComponent implements OnInit {
             this._loading.next(true);
 
             return from(col).pipe(
+                take(1),
                 tap((res: Changes) => {
-                    let values = res.toObject().changesList;
-                    // If prepending, reverse the batch order
-                    values = false ? values.reverse() : values;
-
+                    const values = res.toObject().changesList;
                     // update source with new values, done loading
                     this._data.next(values);
 
@@ -118,12 +116,11 @@ export class ChangesComponent implements OnInit {
                         this._done.next(true);
                     }
                 }),
-                catchError(err => {
+                catchError(_ => {
                     this._loading.next(false);
                     this.bottom = true;
                     return of([]);
                 }),
-                take(1),
             ).subscribe();
         }
     }
diff --git a/console/src/app/modules/idp-create/idp-create.component.scss b/console/src/app/modules/idp-create/idp-create.component.scss
index 677989d7d..c13ab1c06 100644
--- a/console/src/app/modules/idp-create/idp-create.component.scss
+++ b/console/src/app/modules/idp-create/idp-create.component.scss
@@ -25,7 +25,6 @@
 
   .add-line-btn {
     margin-bottom: 1rem;
-    border-radius: .5rem;
   }
 }
 
@@ -55,7 +54,6 @@
   margin-top: 3rem;
   display: block;
   padding: .5rem 4rem;
-  border-radius: .5rem;
 
   @media only screen and (max-width: 450px) {
     margin-top: 1rem;
diff --git a/console/src/app/modules/idp-table/idp-table.component.html b/console/src/app/modules/idp-table/idp-table.component.html
index 6258aa6ee..0e1ec3ebf 100644
--- a/console/src/app/modules/idp-table/idp-table.component.html
+++ b/console/src/app/modules/idp-table/idp-table.component.html
@@ -16,7 +16,7 @@
             *ngIf="selection.hasValue() && serviceType!=PolicyComponentServiceType.MGMT" [disabled]="disabled">
             <i class="las la-trash"></i>
         </button>
-        <a class="add-button" [routerLink]="createRouterLink" color="primary" mat-raised-button [disabled]="disabled"
+        <a [routerLink]="createRouterLink" color="primary" mat-raised-button [disabled]="disabled"
             *ngIf="serviceType!=PolicyComponentServiceType.MGMT">
             <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
         </a>
@@ -85,14 +85,14 @@
 
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr class="data-row"
+            <tr class="highlight"
                 [ngClass]="{'disabled': serviceType==PolicyComponentServiceType.MGMT && row?.providerType == IdpProviderType.IDPPROVIDERTYPE_SYSTEM}"
                 mat-row *matRowDef="let row; columns: displayedColumns;"
                 [routerLink]="serviceType==PolicyComponentServiceType.ADMIN ? routerLinkForRow(row): null">
             </tr>
 
         </table>
-        <mat-paginator #paginator class="paginator" [length]="idpResult?.totalResult || 0" [pageSize]="10"
-            [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
     </div>
+    <mat-paginator #paginator class="paginator" [length]="idpResult?.totalResult || 0" [pageSize]="10"
+        [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
 </app-refresh-table>
\ No newline at end of file
diff --git a/console/src/app/modules/idp-table/idp-table.component.scss b/console/src/app/modules/idp-table/idp-table.component.scss
index b5f5c2ce7..f90b8aa3e 100644
--- a/console/src/app/modules/idp-table/idp-table.component.scss
+++ b/console/src/app/modules/idp-table/idp-table.component.scss
@@ -19,14 +19,6 @@
         padding-right: 0;
       }
     }
-
-    .data-row {
-      cursor: pointer;
-
-      &:hover {
-        background-color: #ffffff05;
-      }
-    }
   }
 }
 
@@ -38,10 +30,6 @@ tr {
   }
 }
 
-.add-button {
-  border-radius: .5rem;
-}
-
 .avatar {
   height: 30px;
   width: 30px;
diff --git a/console/src/app/modules/idp/idp.component.scss b/console/src/app/modules/idp/idp.component.scss
index 642e7535c..b09e93986 100644
--- a/console/src/app/modules/idp/idp.component.scss
+++ b/console/src/app/modules/idp/idp.component.scss
@@ -33,7 +33,6 @@
   margin-bottom: 4rem;
   display: block;
   padding: .5rem 4rem;
-  border-radius: .5rem;
 
   @media only screen and (max-width: 450px) {
     margin-top: 1rem;
diff --git a/console/src/app/modules/policies/login-policy/add-idp-dialog/add-idp-dialog.component.scss b/console/src/app/modules/policies/login-policy/add-idp-dialog/add-idp-dialog.component.scss
index deaa9f79e..2ef92e72a 100644
--- a/console/src/app/modules/policies/login-policy/add-idp-dialog/add-idp-dialog.component.scss
+++ b/console/src/app/modules/policies/login-policy/add-idp-dialog/add-idp-dialog.component.scss
@@ -18,8 +18,4 @@
   .ok-button {
     margin-left: .5rem;
   }
-
-  button {
-    border-radius: .5rem;
-  }
 }
diff --git a/console/src/app/modules/policies/login-policy/login-policy.component.html b/console/src/app/modules/policies/login-policy/login-policy.component.html
index da449627b..fc1a780ee 100644
--- a/console/src/app/modules/policies/login-policy/login-policy.component.html
+++ b/console/src/app/modules/policies/login-policy/login-policy.component.html
@@ -1,5 +1,5 @@
 <app-detail-layout [backRouterLink]="backroutes" [title]="'ORG.POLICY.LOGIN_POLICY.TITLECREATE' | translate"
-    [description]="serviceType==PolicyComponentServiceType.MGMT ? 'ORG.POLICY.LOGIN_POLICY.DESCRIPTIONCREATEMGMT' : PolicyComponentServiceType.ADMIN ? 'ORG.POLICY.LOGIN_POLICY.DESCRIPTIONCREATEADMIN' : '' | translate">
+    [description]="(serviceType==PolicyComponentServiceType.MGMT ? 'ORG.POLICY.LOGIN_POLICY.DESCRIPTIONCREATEMGMT' : PolicyComponentServiceType.ADMIN ? 'ORG.POLICY.LOGIN_POLICY.DESCRIPTIONCREATEADMIN' : '') | translate">
     <ng-container *ngIf="(['policy.delete'] | hasRole | async) && serviceType == PolicyComponentServiceType.MGMT">
         <!--<button matTooltip="{{'ORG.POLICY.DELETE' | translate}}" color="warn" (click)="deletePolicy()"
             mat-stroked-button>
diff --git a/console/src/app/modules/policies/login-policy/login-policy.component.scss b/console/src/app/modules/policies/login-policy/login-policy.component.scss
index fb9720797..0cfa35ea6 100644
--- a/console/src/app/modules/policies/login-policy/login-policy.component.scss
+++ b/console/src/app/modules/policies/login-policy/login-policy.component.scss
@@ -1,8 +1,3 @@
-
-button {
-  border-radius: .5rem;
-}
-
 .content {
   padding-top: 1rem;
   display: flex;
@@ -39,7 +34,6 @@ button {
     margin-top: 3rem;
     display: block;
     padding: .5rem 4rem;
-    border-radius: .5rem;
   }
 }
 
diff --git a/console/src/app/modules/policies/login-policy/login-policy.component.ts b/console/src/app/modules/policies/login-policy/login-policy.component.ts
index ffe5a6aec..6a35916f9 100644
--- a/console/src/app/modules/policies/login-policy/login-policy.component.ts
+++ b/console/src/app/modules/policies/login-policy/login-policy.component.ts
@@ -11,11 +11,11 @@ import {
     IdpView as AdminIdpView,
 } from 'src/app/proto/generated/admin_pb';
 import {
-  IdpProviderType,
-  IdpProviderView as MgmtIdpProviderView,
-  IdpView as MgmtIdpView,
-  LoginPolicy,
-  LoginPolicyView, OrgDomainView,
+    IdpProviderType,
+    IdpProviderView as MgmtIdpProviderView,
+    IdpView as MgmtIdpView,
+    LoginPolicy,
+    LoginPolicyView,
 } from 'src/app/proto/generated/management_pb';
 import { AdminService } from 'src/app/services/admin.service';
 import { ManagementService } from 'src/app/services/mgmt.service';
@@ -151,7 +151,9 @@ export class LoginPolicyComponent implements OnDestroy {
 
         dialogRef.afterClosed().subscribe(resp => {
             if (resp && resp.idp && resp.type) {
-                this.addIdp(resp.idp, resp.type);
+                this.addIdp(resp.idp, resp.type).then(() => {
+                    this.getData();
+                });
             }
         });
     }
@@ -177,15 +179,15 @@ export class LoginPolicyComponent implements OnDestroy {
         }
     }
 
-  public get backroutes(): string[] {
-    switch (this.serviceType) {
-      case PolicyComponentServiceType.MGMT:
-        return  ['/org'];
-      case PolicyComponentServiceType.ADMIN:
-        return  ['/iam'];
-        break;
+    public get backroutes(): string[] {
+        switch (this.serviceType) {
+            case PolicyComponentServiceType.MGMT:
+                return ['/org'];
+            case PolicyComponentServiceType.ADMIN:
+                return ['/iam'];
+                break;
+        }
+        return [];
     }
-    return [];
-  }
 
 }
diff --git a/console/src/app/modules/policies/password-age-policy/password-age-policy.component.scss b/console/src/app/modules/policies/password-age-policy/password-age-policy.component.scss
index 3884c0cd5..adba0f7ae 100644
--- a/console/src/app/modules/policies/password-age-policy/password-age-policy.component.scss
+++ b/console/src/app/modules/policies/password-age-policy/password-age-policy.component.scss
@@ -1,8 +1,3 @@
-
-button {
-  border-radius: .5rem;
-}
-
 .content {
   padding-top: 1rem;
   display: flex;
@@ -39,6 +34,5 @@ button {
     margin-top: 3rem;
     display: block;
     padding: .5rem 4rem;
-    border-radius: .5rem;
   }
 }
diff --git a/console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.component.scss b/console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.component.scss
index 3884c0cd5..adba0f7ae 100644
--- a/console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.component.scss
+++ b/console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.component.scss
@@ -1,8 +1,3 @@
-
-button {
-  border-radius: .5rem;
-}
-
 .content {
   padding-top: 1rem;
   display: flex;
@@ -39,6 +34,5 @@ button {
     margin-top: 3rem;
     display: block;
     padding: .5rem 4rem;
-    border-radius: .5rem;
   }
 }
diff --git a/console/src/app/modules/policies/password-iam-policy/password-iam-policy.component.scss b/console/src/app/modules/policies/password-iam-policy/password-iam-policy.component.scss
index 3884c0cd5..adba0f7ae 100644
--- a/console/src/app/modules/policies/password-iam-policy/password-iam-policy.component.scss
+++ b/console/src/app/modules/policies/password-iam-policy/password-iam-policy.component.scss
@@ -1,8 +1,3 @@
-
-button {
-  border-radius: .5rem;
-}
-
 .content {
   padding-top: 1rem;
   display: flex;
@@ -39,6 +34,5 @@ button {
     margin-top: 3rem;
     display: block;
     padding: .5rem 4rem;
-    border-radius: .5rem;
   }
 }
diff --git a/console/src/app/modules/policies/password-lockout-policy/password-lockout-policy.component.scss b/console/src/app/modules/policies/password-lockout-policy/password-lockout-policy.component.scss
index 3884c0cd5..c99cf37f2 100644
--- a/console/src/app/modules/policies/password-lockout-policy/password-lockout-policy.component.scss
+++ b/console/src/app/modules/policies/password-lockout-policy/password-lockout-policy.component.scss
@@ -1,8 +1,4 @@
 
-button {
-  border-radius: .5rem;
-}
-
 .content {
   padding-top: 1rem;
   display: flex;
@@ -39,6 +35,5 @@ button {
     margin-top: 3rem;
     display: block;
     padding: .5rem 4rem;
-    border-radius: .5rem;
   }
 }
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 742237293..65086ab28 100644
--- a/console/src/app/modules/project-members/project-members.component.html
+++ b/console/src/app/modules/project-members/project-members.component.html
@@ -13,8 +13,7 @@
         </ng-template>
         <ng-template appHasRole actions
             [appHasRole]="['project.member.write:'+project.projectId,'project.member.write']">
-            <a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()" color="primary"
-                mat-raised-button>
+            <a color="primary" [disabled]="disabled" (click)="openAddMember()" color="primary" mat-raised-button>
                 <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
             </a>
         </ng-template>
@@ -84,7 +83,7 @@
                 </ng-container>
 
                 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
+                <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
                 </tr>
             </table>
 
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 c87989891..6e1f1650b 100644
--- a/console/src/app/modules/project-members/project-members.component.scss
+++ b/console/src/app/modules/project-members/project-members.component.scss
@@ -2,10 +2,6 @@
   margin-right: .5rem;
 }
 
-.add-button {
-  border-radius: .5rem;
-}
-
 .table-wrapper {
   overflow-x: auto;
 
@@ -31,12 +27,6 @@
       width: 40px;
     }
 
-    .data-row {
-      &:hover {
-        background-color: #ffffff05;
-      }
-    }
-
     .selection {
       width: 50px;
       max-width: 50px;
diff --git a/console/src/app/modules/project-roles/project-role-detail/project-role-detail.component.scss b/console/src/app/modules/project-roles/project-role-detail/project-role-detail.component.scss
index c34bf0903..4200e417e 100644
--- a/console/src/app/modules/project-roles/project-role-detail/project-role-detail.component.scss
+++ b/console/src/app/modules/project-roles/project-role-detail/project-role-detail.component.scss
@@ -19,8 +19,4 @@
   .ok-button {
     margin-left: .5rem;
   }
-
-  button {
-    border-radius: .5rem;
-  }
 }
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 8fed3f14b..922aa5fc0 100644
--- a/console/src/app/modules/project-roles/project-roles.component.html
+++ b/console/src/app/modules/project-roles/project-roles.component.html
@@ -9,8 +9,8 @@
         </button>
     </ng-template>
     <ng-template appHasRole [appHasRole]="['project.role.write:' + projectId, 'project.role.write']" actions>
-        <a *ngIf="actionsVisible" [disabled]="disabled" class="rounded-button"
-            [routerLink]="[ '/projects', projectId, 'roles', 'create']" color="primary" mat-raised-button>
+        <a *ngIf="actionsVisible" [disabled]="disabled" [routerLink]="[ '/projects', projectId, 'roles', 'create']"
+            color="primary" mat-raised-button>
             <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
         </a>
     </ng-template>
@@ -57,7 +57,7 @@
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>
 
         <mat-paginator #paginator [length]="dataSource.totalResult" [pageSize]="50"
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 96a7e7c79..b843150b5 100644
--- a/console/src/app/modules/project-roles/project-roles.component.scss
+++ b/console/src/app/modules/project-roles/project-roles.component.scss
@@ -1,8 +1,3 @@
-
-.rounded-button {
-  border-radius: .5rem;
-}
-
 .icon-button {
   margin-right: .5rem;
 }
@@ -31,12 +26,6 @@
       width: 40px;
     }
 
-    .data-row {
-      &:hover {
-        background-color: #ffffff05;
-      }
-    }
-
     .selection {
       width: 50px;
       max-width: 50px;
diff --git a/console/src/app/modules/refresh-table/refresh-table.component.html b/console/src/app/modules/refresh-table/refresh-table.component.html
index ccc204e3a..8441bdac9 100644
--- a/console/src/app/modules/refresh-table/refresh-table.component.html
+++ b/console/src/app/modules/refresh-table/refresh-table.component.html
@@ -13,9 +13,12 @@
     </div>
     <span class="fill-space"></span>
     <mat-spinner class="spinner" *ngIf="loading" diameter="20"></mat-spinner>
+    <ng-content select="[actions]"></ng-content>
+
     <button mat-icon-button (click)="emitRefresh()" class="icon-button" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
         <mat-icon>refresh</mat-icon>
     </button>
-    <ng-content select="[actions]"></ng-content>
 </div>
-<ng-content></ng-content>
\ No newline at end of file
+<div class="table-wrapper">
+    <ng-content></ng-content>
+</div>
\ No newline at end of file
diff --git a/console/src/app/modules/refresh-table/refresh-table.component.scss b/console/src/app/modules/refresh-table/refresh-table.component.scss
index e15f27cf1..b54fb898a 100644
--- a/console/src/app/modules/refresh-table/refresh-table.component.scss
+++ b/console/src/app/modules/refresh-table/refresh-table.component.scss
@@ -30,3 +30,8 @@
     margin-right: .5rem;
   }
 }
+
+.table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+}
diff --git a/console/src/app/modules/user-grants/user-grants.component.html b/console/src/app/modules/user-grants/user-grants.component.html
index 15c0e1bf7..a300548a9 100644
--- a/console/src/app/modules/user-grants/user-grants.component.html
+++ b/console/src/app/modules/user-grants/user-grants.component.html
@@ -6,7 +6,7 @@
         <i class="las la-trash"></i>
     </button>
     <a *ngIf="allowCreate && context !== UserGrantContext.USER" matTooltip="{{'GRANTS.ADD' | translate}}" actions
-        color="primary" class="add-button" color="primary" mat-raised-button [routerLink]="routerLink">
+        color="primary" color="primary" mat-raised-button [routerLink]="routerLink">
         <mat-icon class="icon">add</mat-icon>{{ 'GRANTS.ADD_BTN' | translate }}
     </a>
 
@@ -106,7 +106,7 @@
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="element-row">
+            <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
             </tr>
         </table>
 
diff --git a/console/src/app/modules/user-grants/user-grants.component.scss b/console/src/app/modules/user-grants/user-grants.component.scss
index ce7533823..6ac48cc4f 100644
--- a/console/src/app/modules/user-grants/user-grants.component.scss
+++ b/console/src/app/modules/user-grants/user-grants.component.scss
@@ -1,8 +1,3 @@
-
-.add-button {
-  border-radius: .5rem;
-}
-
 .table-wrapper {
   overflow: auto;
 
diff --git a/console/src/app/modules/warn-dialog/warn-dialog.component.scss b/console/src/app/modules/warn-dialog/warn-dialog.component.scss
index 378da3d6c..19e5334cf 100644
--- a/console/src/app/modules/warn-dialog/warn-dialog.component.scss
+++ b/console/src/app/modules/warn-dialog/warn-dialog.component.scss
@@ -18,8 +18,4 @@
   .fill-space {
     flex: 1;
   }
-
-  button {
-    border-radius: .5rem;
-  }
 }
diff --git a/console/src/app/pages/iam/failed-events/failed-events.component.html b/console/src/app/pages/iam/failed-events/failed-events.component.html
index fcb8c8ce2..73d4d7e64 100644
--- a/console/src/app/pages/iam/failed-events/failed-events.component.html
+++ b/console/src/app/pages/iam/failed-events/failed-events.component.html
@@ -34,9 +34,9 @@
                 </td>
             </ng-container>
 
-            <ng-container matColumnDef="actions">
-                <th mat-header-cell *matHeaderCellDef> {{ 'IAM.FAILEDEVENTS.ACTIONS' | translate }} </th>
-                <td mat-cell *matCellDef="let event">
+            <ng-container matColumnDef="actions" stickyEnd>
+                <th mat-header-cell *matHeaderCellDef></th>
+                <td class="back" mat-cell *matCellDef="let event">
                     <button color="warn" mat-icon-button matTooltip="{{'IAM.FAILEDEVENTS.DELETE' | translate}}"
                         (click)="cancelEvent(event.viewName, event.database, event.failedSequence)">
                         <i class="las la-minus-circle"></i>
@@ -45,7 +45,7 @@
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="eventDisplayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: eventDisplayedColumns;"></tr>
+            <tr class="highlight" mat-row *matRowDef="let row; columns: eventDisplayedColumns;"></tr>
         </table>
         <mat-paginator class="paginator" [pageSize]="10" #paginator [pageSizeOptions]="[10, 20, 100, 250]">
         </mat-paginator>
diff --git a/console/src/app/pages/iam/failed-events/failed-events.component.scss b/console/src/app/pages/iam/failed-events/failed-events.component.scss
index 5a2bc0420..fed66762d 100644
--- a/console/src/app/pages/iam/failed-events/failed-events.component.scss
+++ b/console/src/app/pages/iam/failed-events/failed-events.component.scss
@@ -27,6 +27,18 @@
   }
 }
 
+tr {
+  button {
+    visibility: hidden;
+  }
+
+  &:hover {
+    button {
+      visibility: visible;
+    }
+  }
+}
+
 .pointer {
   outline: none;
   cursor: pointer;
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 3ce09d605..90b2f5695 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
@@ -12,8 +12,7 @@
             </button>
         </ng-template>
         <ng-template appHasRole actions [appHasRole]="['iam.member.write']">
-            <a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()" color="primary"
-                mat-raised-button>
+            <a color="primary" [disabled]="disabled" (click)="openAddMember()" color="primary" mat-raised-button>
                 <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
             </a>
         </ng-template>
@@ -76,7 +75,7 @@
                 </ng-container>
 
                 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
+                <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
                 </tr>
             </table>
 
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 153534116..aa860c5b2 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
@@ -1,7 +1,3 @@
-.add-button {
-  border-radius: .5rem;
-}
-
 .table-wrapper {
   overflow: auto;
   width: 100%;
@@ -28,12 +24,6 @@
       width: 40px;
     }
 
-    .data-row {
-      &:hover {
-        background-color: #ffffff05;
-      }
-    }
-
     .selection {
       width: 50px;
       max-width: 50px;
diff --git a/console/src/app/pages/iam/iam-policy-grid/iam-policy-grid.component.html b/console/src/app/pages/iam/iam-policy-grid/iam-policy-grid.component.html
index 9c9bd23da..485990d8c 100644
--- a/console/src/app/pages/iam/iam-policy-grid/iam-policy-grid.component.html
+++ b/console/src/app/pages/iam/iam-policy-grid/iam-policy-grid.component.html
@@ -1,6 +1,6 @@
-<h1>{{'ORG.POLICY.TITLE' | translate}}</h1>
+<h1>{{'IAM.POLICY.TITLE' | translate}}</h1>
 
-<p class="top-desc">{{'ORG.POLICY.DESCRIPTION' | translate}}</p>
+<p class="top-desc">{{'IAM.POLICY.DESCRIPTION' | translate}}</p>
 
 <div class="row-lyt">
     <ng-template appHasRole [appHasRole]="['policy.read']">
diff --git a/console/src/app/pages/iam/iam-policy-grid/iam-policy-grid.component.scss b/console/src/app/pages/iam/iam-policy-grid/iam-policy-grid.component.scss
index 39a8f5e65..241222682 100644
--- a/console/src/app/pages/iam/iam-policy-grid/iam-policy-grid.component.scss
+++ b/console/src/app/pages/iam/iam-policy-grid/iam-policy-grid.component.scss
@@ -70,7 +70,6 @@ h1 {
 
     button {
       margin-right: 1rem;
-      border-radius: .5rem;
     }
   }
 }
diff --git a/console/src/app/pages/iam/iam-views/iam-views.component.html b/console/src/app/pages/iam/iam-views/iam-views.component.html
index 8a45da0af..074e7be29 100644
--- a/console/src/app/pages/iam/iam-views/iam-views.component.html
+++ b/console/src/app/pages/iam/iam-views/iam-views.component.html
@@ -2,22 +2,20 @@
     <app-refresh-table *ngIf="dataSource" (refreshed)="loadViews()" [dataSize]="dataSource.data.length"
         [loading]="loading$ | async">
 
-        <table [dataSource]="dataSource" mat-table class="table" aria-label="Elements">
+        <table [dataSource]="dataSource" mat-table class="table" aria-label="Elements" matSort>
             <ng-container matColumnDef="viewName">
-                <th mat-header-cell *matHeaderCellDef> {{ 'IAM.VIEWS.VIEWNAME' | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'IAM.VIEWS.VIEWNAME' | translate }} </th>
                 <td mat-cell *matCellDef="let view"> {{view.viewName}} </td>
             </ng-container>
 
             <ng-container matColumnDef="database">
-                <th mat-header-cell *matHeaderCellDef> {{ 'IAM.VIEWS.DATABASE' | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'IAM.VIEWS.DATABASE' | translate }} </th>
                 <td mat-cell *matCellDef="let view"> {{view.database}} </td>
             </ng-container>
 
             <ng-container matColumnDef="sequence">
                 <th mat-header-cell *matHeaderCellDef> {{ 'IAM.VIEWS.SEQUENCE' | translate }} </th>
-                <td mat-cell *matCellDef="let view">
-                    <span>{{view?.processedSequence}}</span>
-                </td>
+                <td mat-cell *matCellDef="let view"> {{view.processedSequence}} </td>
             </ng-container>
 
             <ng-container matColumnDef="timestamp">
@@ -27,8 +25,8 @@
                 </td>
             </ng-container>
 
-            <ng-container matColumnDef="actions">
-                <th mat-header-cell *matHeaderCellDef> {{ 'IAM.VIEWS.ACTIONS' | translate }} </th>
+            <ng-container matColumnDef="actions" stickyEnd>
+                <th mat-header-cell *matHeaderCellDef></th>
                 <td mat-cell *matCellDef="let view">
                     <button mat-icon-button matTooltip="{{'IAM.VIEWS.CLEAR' | translate}}"
                         (click)="cancelView(view.viewName, view.database)">
@@ -38,7 +36,7 @@
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>
         <mat-paginator class="paginator" [pageSize]="10" #paginator [pageSizeOptions]="[10, 20, 100, 250]">
         </mat-paginator>
diff --git a/console/src/app/pages/iam/iam-views/iam-views.component.scss b/console/src/app/pages/iam/iam-views/iam-views.component.scss
index 5a2bc0420..fed66762d 100644
--- a/console/src/app/pages/iam/iam-views/iam-views.component.scss
+++ b/console/src/app/pages/iam/iam-views/iam-views.component.scss
@@ -27,6 +27,18 @@
   }
 }
 
+tr {
+  button {
+    visibility: hidden;
+  }
+
+  &:hover {
+    button {
+      visibility: visible;
+    }
+  }
+}
+
 .pointer {
   outline: none;
   cursor: pointer;
diff --git a/console/src/app/pages/iam/iam-views/iam-views.component.ts b/console/src/app/pages/iam/iam-views/iam-views.component.ts
index cf87295f9..66685a5cd 100644
--- a/console/src/app/pages/iam/iam-views/iam-views.component.ts
+++ b/console/src/app/pages/iam/iam-views/iam-views.component.ts
@@ -1,10 +1,14 @@
 import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { BehaviorSubject, from, Observable, of } from 'rxjs';
 import { catchError, finalize, map } from 'rxjs/operators';
+import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
 import { View } from 'src/app/proto/generated/admin_pb';
 import { AdminService } from 'src/app/services/admin.service';
+import { ToastService } from 'src/app/services/toast.service';
 
 @Component({
     selector: 'app-iam-views',
@@ -12,6 +16,8 @@ import { AdminService } from 'src/app/services/admin.service';
     styleUrls: ['./iam-views.component.scss'],
 })
 export class IamViewsComponent implements AfterViewInit {
+    @ViewChild(MatSort) sort!: MatSort;
+
     @ViewChild(MatPaginator) public paginator!: MatPaginator;
     public dataSource!: MatTableDataSource<View.AsObject>;
 
@@ -19,7 +25,7 @@ export class IamViewsComponent implements AfterViewInit {
 
     private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
     public loading$: Observable<boolean> = this.loadingSubject.asObservable();
-    constructor(private adminService: AdminService) {
+    constructor(private adminService: AdminService, private dialog: MatDialog, private toast: ToastService) {
         this.loadViews();
     }
 
@@ -38,10 +44,31 @@ export class IamViewsComponent implements AfterViewInit {
         ).subscribe(views => {
             this.dataSource = new MatTableDataSource(views);
             this.dataSource.paginator = this.paginator;
+            this.dataSource.sort = this.sort;
         });
     }
 
     public cancelView(viewname: string, db: string): void {
-        this.adminService.ClearView(viewname, db);
+
+        const dialogRef = this.dialog.open(WarnDialogComponent, {
+            data: {
+                confirmKey: 'ACTIONS.CLEAR',
+                cancelKey: 'ACTIONS.CANCEL',
+                titleKey: 'IAM.VIEWS.DIALOG.VIEW_CLEAR_TITLE',
+                descriptionKey: 'IAM.VIEWS.DIALOG.VIEW_CLEAR_DESCRIPTION',
+            },
+            width: '400px',
+        });
+
+        dialogRef.afterClosed().subscribe(resp => {
+            if (resp) {
+                this.adminService.ClearView(viewname, db).then(() => {
+                    this.toast.showInfo('IAM.VIEWS.CLEARED', true);
+                    this.loadViews();
+                }).catch(error => {
+                    this.toast.showError(error);
+                });
+            }
+        });
     }
 }
diff --git a/console/src/app/pages/iam/iam.module.ts b/console/src/app/pages/iam/iam.module.ts
index da2263578..2a9613d1d 100644
--- a/console/src/app/pages/iam/iam.module.ts
+++ b/console/src/app/pages/iam/iam.module.ts
@@ -63,6 +63,7 @@ import { IamComponent } from './iam.component';
         SharedModule,
         RefreshTableModule,
         HasRolePipeModule,
+        MatSortModule,
     ],
 })
 export class IamModule { }
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 1365af707..a9eb778c3 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
@@ -85,7 +85,6 @@ h1 {
         margin-top: 3rem;
         display: block;
         padding: .5rem 4rem;
-        border-radius: .5rem;
       }
     }
 
@@ -138,7 +137,6 @@ h1 {
 
   .small-button {
     display: block;
-    border-radius: .5rem;
   }
 
   .fill-space {
@@ -148,7 +146,6 @@ h1 {
   .big-button {
     display: block;
     padding: .5rem 4rem;
-    border-radius: .5rem;
   }
 }
 
diff --git a/console/src/app/pages/orgs/org-detail/add-domain-dialog/add-domain-dialog.component.scss b/console/src/app/pages/orgs/org-detail/add-domain-dialog/add-domain-dialog.component.scss
index 91a03f5bc..48211d84a 100644
--- a/console/src/app/pages/orgs/org-detail/add-domain-dialog/add-domain-dialog.component.scss
+++ b/console/src/app/pages/orgs/org-detail/add-domain-dialog/add-domain-dialog.component.scss
@@ -19,8 +19,4 @@
   .ok-button {
     margin-left: .5rem;
   }
-
-  button {
-    border-radius: .5rem;
-  }
 }
diff --git a/console/src/app/pages/orgs/org-detail/domain-verification/domain-verification.component.scss b/console/src/app/pages/orgs/org-detail/domain-verification/domain-verification.component.scss
index 7252acecc..362a1a1b8 100644
--- a/console/src/app/pages/orgs/org-detail/domain-verification/domain-verification.component.scss
+++ b/console/src/app/pages/orgs/org-detail/domain-verification/domain-verification.component.scss
@@ -4,7 +4,6 @@
 
   button {
     margin: 1rem .5rem;
-    border-radius: .5rem;
     display: block;
   }
 }
@@ -34,8 +33,4 @@
   .ok-button {
     margin-left: .5rem;
   }
-
-  button {
-    border-radius: .5rem;
-  }
 }
diff --git a/console/src/app/pages/orgs/org-detail/org-detail.component.html b/console/src/app/pages/orgs/org-detail/org-detail.component.html
index 9e12e893e..e36dcd2c4 100644
--- a/console/src/app/pages/orgs/org-detail/org-detail.component.html
+++ b/console/src/app/pages/orgs/org-detail/org-detail.component.html
@@ -21,8 +21,8 @@
                         mat-icon-button (click)="removeDomain(domain.domain)"><i class="las la-trash"></i></button>
                 </div>
                 <p class="new-desc">{{'ORG.PAGES.ORGDOMAIN_VERIFICATION' | translate}}</p>
-                <button [disabled]="(canwrite$ | async) == false" class="add-button" matTooltip="Add domain"
-                    mat-raised-button color="primary" (click)="addNewDomain()">{{'ORG.DOMAINS.NEW' | translate}}
+                <button [disabled]="(canwrite$ | async) == false" matTooltip="Add domain" mat-raised-button
+                    color="primary" (click)="addNewDomain()">{{'ORG.DOMAINS.NEW' | translate}}
                 </button>
             </app-card>
         </ng-container>
@@ -58,4 +58,4 @@
             </mat-tab>
         </mat-tab-group>
     </div>
-</app-meta-layout>
+</app-meta-layout>
\ No newline at end of file
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 79b45464f..b0208a2b2 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
@@ -41,7 +41,6 @@
   }
 
   .verify-btn {
-    border-radius: .5rem;
     font-size: 13px;
   }
 
@@ -50,10 +49,6 @@
   }
 }
 
-.add-button {
-  border-radius: .5rem;
-}
-
 .new-desc {
   font-size: 14px;
   color: #818a8a;
diff --git a/console/src/app/pages/orgs/org-grid/org-grid.component.html b/console/src/app/pages/orgs/org-grid/org-grid.component.html
deleted file mode 100644
index d736852fb..000000000
--- a/console/src/app/pages/orgs/org-grid/org-grid.component.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<div class="max-width-container">
-    <h1>{{ 'ORG.PAGES.LIST' | translate }}</h1>
-    <p class="top-desc">{{'ORG.PAGES.LISTDESCRIPTION' | translate}}</p>
-
-    <div class="view-toggle">
-        <div class="anim-list" *ngIf="selection.selected.length > 0">
-        </div>
-        <button disabled mat-icon-button>
-            <mat-icon></mat-icon>
-        </button>
-    </div>
-
-    <div class="container">
-        <p class="n-items" *ngIf="!loading && selection.selected.length > 0">{{'PROJECT.PAGES.PINNED' | translate}}</p>
-
-        <div matTooltip="{{'ORG.PAGES.SELECTORGTOOLTIP' | translate}}" class="item card"
-            *ngFor="let org of selection.selected; index as i" (click)="selectOrg(org, $event)"
-            [ngClass]="{ active: activeOrg?.id === org?.id }">
-            <div class="text-part">
-                <span class="description">{{org.id}}</span>
-
-                <span class="name" *ngIf="org.name">{{ org.name }}</span>
-                <span class="name" *ngIf="!org.name">No Name</span>
-                <span class="fill-space"></span>
-                <div class="icons">
-                </div>
-            </div>
-            <button [ngClass]="{ selected: selection.isSelected(org)}" (click)="selection.toggle(org)"
-                class="edit-button" mat-icon-button>
-                <mat-icon>push_pin_outline</mat-icon>
-            </button>
-        </div>
-    </div>
-    <div class="container">
-        <p class="n-items" *ngIf="!loading && notPinned.length > 0">{{'PROJECT.PAGES.ALL' | translate}}</p>
-
-        <div matTooltip="{{'ORG.PAGES.SELECTORGTOOLTIP' | translate}}" class="item card"
-            *ngFor="let org of notPinned; index as i" (click)="selectOrg(org, $event)"
-            [ngClass]="{ active: activeOrg?.id === org?.id }">
-            <div class="text-part">
-                <span class="description">{{org.id}}</span>
-
-                <span class="name" *ngIf="org.name">{{ org.name }}</span>
-                <span class="name" *ngIf="!org.name">No Name</span>
-                <span class="fill-space"></span>
-                <div class="icons">
-                </div>
-            </div>
-            <button [ngClass]="{ selected: selection.isSelected(org)}" (click)="selection.toggle(org)"
-                class="edit-button" mat-icon-button>
-                <mat-icon>push_pin_outline</mat-icon>
-            </button>
-        </div>
-
-        <ng-template appHasRole [appHasRole]="['iam.write']">
-            <div class="card add-org-button" [routerLink]="[ '/org/create' ]">
-                <mat-icon class="icon">add</mat-icon>
-                <span>Add new organization</span>
-            </div>
-        </ng-template>
-    </div>
-</div>
\ 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
deleted file mode 100644
index 34c18e2ec..000000000
--- a/console/src/app/pages/orgs/org-grid/org-grid.component.scss
+++ /dev/null
@@ -1,251 +0,0 @@
-h1 {
-  margin-top: 0;
-}
-
-.top-desc {
-  color: #8795a1;
-}
-
-.view-toggle {
-  width: 100%;
-  display: flex;
-  justify-content: flex-end;
-  padding-bottom: .5rem;
-  border-bottom: 1px solid #2d2e30;
-
-  .anim-list {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
-
-  button {
-    &.left-button {
-      margin-right: 1rem;
-    }
-  }
-}
-
-.container {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0 -1rem;
-  box-sizing: border-box;
-
-  .item {
-    position: relative;
-    z-index: 100;
-    margin: 1rem;
-    flex-basis: 230px;
-    display: flex;
-    text-decoration: none;
-    overflow: hidden;
-    cursor: pointer;
-    padding-top: 0;
-    padding-right: 0;
-    padding-bottom: 0;
-    padding-left: 1rem;
-    border-radius: .5rem;
-    box-sizing: border-box;
-    min-height: 130px;
-
-    * {
-      box-sizing: border-box;
-    }
-
-    &.active {
-      border: 2px solid #38649d;
-    }
-
-    .selection-icon {
-      opacity: 0;
-      position: absolute;
-      top: -12px;
-      left: -12px;
-    }
-
-    img {
-      height: 50px;
-      width: 50px;
-      margin: 1rem;
-    }
-
-    .text-part {
-      position: relative;
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      // justify-content: center;
-      min-height: 70px;
-      padding: .5rem 0;
-
-      .top {
-        font-size: .8rem;
-        margin-bottom: 0;
-        margin-top: .5rem;
-      }
-
-      .name {
-        margin-top: 1rem;
-        font-size: 1.2rem;
-        margin-bottom: .5rem;
-      }
-
-      .description {
-        font-size: .8rem;
-        margin-top: .5rem;
-      }
-
-      .created {
-        font-size: .8rem;
-      }
-
-      .organization {
-        display: flex;
-        align-items: center;
-        margin-top: 1rem;
-
-        .org_avatar {
-          height: 25px;
-          width: 25px;
-          border-radius: 50%;
-          margin: 0;
-          margin-right: 1rem;
-        }
-      }
-
-      .fill-space {
-        flex: 1;
-      }
-
-      .icons {
-        margin-top: 1rem;
-        transition: all .3s;
-        display: flex;
-        align-items: center;
-
-        .current {
-          height: 10px;
-          font-size: 14px;
-          width: 10px;
-          border-radius: 50%;
-          background-color: rgb(144, 212, 210);
-          display: flex;
-          margin: .5rem 0;
-          align-items: center;
-          box-sizing: border-box;
-
-          span {
-            margin-left: 1.5rem;
-            text-transform: uppercase;
-            color: rgb(144, 212, 210);
-          }
-        }
-
-        .icon {
-          opacity: 0;
-          margin-right: 3px;
-          font-size: 1.3rem;
-          height: 1.4rem;
-          color: #8795a1;
-        }
-      }
-    }
-
-    .edit-button {
-      opacity: 0;
-      user-select: none;
-      position: absolute;
-      bottom: 0;
-      right: 0;
-      margin: 0;
-      margin-bottom: .25rem;
-      color: #8795a1;
-
-      &:hover {
-        opacity: 1;
-        color: white;
-      }
-
-      &.selected {
-        opacity: 1;
-      }
-    }
-
-    &:hover {
-      .edit-button {
-        opacity: 1;
-      }
-
-      .text-part {
-        .icons {
-          .icon {
-            opacity: 1;
-          }
-        }
-      }
-    }
-
-    &.selected {
-      .text-part {
-        .icons {
-          opacity: 1;
-        }
-      }
-
-      .edit-button {
-        opacity: 1;
-      }
-    }
-
-    @media only screen and (max-width: 450px) {
-      flex-basis: 100%;
-    }
-  }
-
-  .add-org-button {
-    z-index: 100;
-    flex-basis: 230px;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    min-height: 130px;
-    border-radius: .5rem;
-    margin: 1rem;
-    box-sizing: border-box;
-
-    .icon {
-      display: flex;
-      justify-content: center;
-      align-self: center;
-      margin-bottom: 1rem;
-      height: 2.5rem;
-      line-height: 2.5rem;
-      font-size: 2.5rem;
-    }
-
-    &:hover {
-      background-color: #ffffff25;
-
-      .icon,
-      span {
-        &.disabled {
-          color: gray;
-        }
-      }
-    }
-
-    @media only screen and (max-width: 450px) {
-      flex-basis: 100%;
-    }
-  }
-}
-
-.n-items {
-  padding: 0 1rem;
-  font-size: .8rem;
-  color: #8795a1;
-  flex-basis: 100%;
-}
diff --git a/console/src/app/pages/orgs/org-grid/org-grid.component.ts b/console/src/app/pages/orgs/org-grid/org-grid.component.ts
deleted file mode 100644
index caa44bc41..000000000
--- a/console/src/app/pages/orgs/org-grid/org-grid.component.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import { SelectionModel } from '@angular/cdk/collections';
-import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-import { Observable, of } from 'rxjs';
-import { switchMap, take } from 'rxjs/operators';
-import { Org } from 'src/app/proto/generated/auth_pb';
-import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
-import { ToastService } from 'src/app/services/toast.service';
-
-@Component({
-    selector: 'app-org-grid',
-    templateUrl: './org-grid.component.html',
-    styleUrls: ['./org-grid.component.scss'],
-})
-export class OrgGridComponent {
-    public activeOrg!: Org.AsObject;
-    public orgList: Org.AsObject[] = [];
-
-    public selection: SelectionModel<Org.AsObject> = new SelectionModel<Org.AsObject>(true, []);
-    public selectedIndex: number = -1;
-    public loading: boolean = false;
-
-    public notPinned: Array<Org.AsObject> = [];
-
-    constructor(
-        private userService: GrpcAuthService,
-        private toast: ToastService,
-        private router: Router,
-    ) {
-        this.loading = true;
-        this.getData(10, 0);
-
-        this.userService.GetActiveOrg().then(org => this.activeOrg = org);
-
-        this.selection.changed.subscribe(selection => {
-            this.setPrefixedItem('pinned-orgs', JSON.stringify(
-                this.selection.selected.map(item => item.id),
-            )).pipe(take(1)).subscribe(() => {
-                selection.added.forEach(element => {
-                    const index = this.notPinned.findIndex(item => item.id === element.id);
-                    this.notPinned.splice(index, 1);
-                });
-
-                this.notPinned.push(...selection.removed);
-            });
-        });
-    }
-
-    public reorganizeItems(): void {
-        this.getPrefixedItem('pinned-orgs').pipe(take(1)).subscribe(storageEntry => {
-            if (storageEntry) {
-                const array: string[] = JSON.parse(storageEntry);
-                const toSelect: Org.AsObject[] = this.orgList.filter((item, index) => {
-                    if (array.includes(item.id)) {
-                        // this.notPinned.splice(index, 1);
-                        return true;
-                    }
-                });
-                this.selection.select(...toSelect);
-
-                const toNotPinned: Org.AsObject[] = this.orgList.filter((item, index) => {
-                    if (!array.includes(item.id)) {
-                        return true;
-                    }
-                });
-                this.notPinned = toNotPinned;
-            }
-        });
-    }
-
-    private getPrefixedItem(key: string): Observable<string | null> {
-        return this.userService.user.pipe(
-            take(1),
-            switchMap(user => {
-                return of(localStorage.getItem(`${user.id}:${key}`));
-            }),
-        );
-    }
-
-    private setPrefixedItem(key: string, value: any): Observable<void> {
-        return this.userService.user.pipe(
-            take(1),
-            switchMap(user => {
-                return of(localStorage.setItem(`${user.id}:${key}`, value));
-            }),
-        );
-    }
-
-    private getData(limit: number, offset: number): void {
-        this.userService.SearchMyProjectOrgs(limit, offset).then(res => {
-            this.orgList = res.toObject().resultList;
-
-            this.notPinned = Object.assign([], this.orgList);
-            this.reorganizeItems();
-            this.loading = false;
-        }).catch(error => {
-            this.toast.showError(error);
-            this.loading = false;
-        });
-    }
-
-    public selectOrg(item: Org.AsObject, event?: any): void {
-        if (event && !event.target.classList.contains('mat-icon')) {
-            this.userService.setActiveOrg(item);
-            this.routeToOrg(item);
-        }
-    }
-
-    public routeToOrg(item: Org.AsObject): void {
-        this.router.navigate(['/orgs', item.id]);
-    }
-}
diff --git a/console/src/app/pages/orgs/org-list/org-list-routing.module.ts b/console/src/app/pages/orgs/org-list/org-list-routing.module.ts
new file mode 100644
index 000000000..31f0b9870
--- /dev/null
+++ b/console/src/app/pages/orgs/org-list/org-list-routing.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { OrgListComponent } from './org-list.component';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: OrgListComponent,
+    },
+
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule],
+})
+export class OrgListRoutingModule { }
diff --git a/console/src/app/pages/orgs/org-list/org-list.component.html b/console/src/app/pages/orgs/org-list/org-list.component.html
new file mode 100644
index 000000000..2dd86decc
--- /dev/null
+++ b/console/src/app/pages/orgs/org-list/org-list.component.html
@@ -0,0 +1,56 @@
+<div class="max-width-container">
+    <h1>{{ 'ORG.PAGES.LIST' | translate }}</h1>
+    <p class="top-desc">{{'ORG.PAGES.LISTDESCRIPTION' | translate}}</p>
+
+    <app-refresh-table *ngIf="dataSource" (refreshed)="refresh()" [dataSize]="dataSource.data.length"
+        [loading]="loading$ | async">
+
+        <mat-form-field @appearfade *ngIf="orgSearchKey != undefined" actions class="filter">
+            <mat-label>{{'ORG.PAGES.FILTER' | translate}}</mat-label>
+            <input matInput (keyup)="applyFilter($event)" placeholder="{{'ORG.PAGES.FILTERPLACEHOLDER' | translate}}"
+                #input>
+        </mat-form-field>
+
+        <table [dataSource]="dataSource" mat-table class="table" matSort aria-label="Elements">
+
+            <ng-container matColumnDef="select">
+                <th class="selection" mat-header-cell *matHeaderCellDef>
+                    {{'ORG.PAGES.ACTIVE' | translate}}
+                </th>
+                <td class="selection" mat-cell *matCellDef="let row">
+                    <mat-radio-button (change)="selectOrg(row)" color="primary" (click)="$event.stopPropagation()"
+                        [checked]="row.id == activeOrg.id">
+                    </mat-radio-button>
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="id">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'ORG.PAGES.ID' | translate }} </th>
+                <td mat-cell *matCellDef="let org"> {{org.id}} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="name">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header
+                    [ngClass]="{'search-active': this.orgSearchKey == MyProjectOrgSearchKey.MYPROJECTORGSEARCHKEY_ORG_NAME}">
+                    {{ 'ORG.PAGES.NAME' | translate }}
+                    <template [ngTemplateOutlet]="templateRef"
+                        [ngTemplateOutletContext]="{key: MyProjectOrgSearchKey.MYPROJECTORGSEARCHKEY_ORG_NAME}"></template>
+                </th>
+                <td mat-cell *matCellDef="let org"> {{org.name}} </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+        </table>
+        <mat-paginator class="paginator" [pageSize]="10" #paginator [pageSizeOptions]="[10, 20, 100, 250]">
+        </mat-paginator>
+    </app-refresh-table>
+</div>
+
+<ng-template #templateRef let-key="key">
+    <button class="search-button" mat-icon-button
+        (click)="this.orgSearchKey != key ? this.orgSearchKey = key : this.orgSearchKey = undefined">
+        <mat-icon *ngIf="this.orgSearchKey != key">search</mat-icon>
+        <mat-icon *ngIf="this.orgSearchKey == key">search_off</mat-icon>
+    </button>
+</ng-template>
\ No newline at end of file
diff --git a/console/src/app/pages/orgs/org-list/org-list.component.scss b/console/src/app/pages/orgs/org-list/org-list.component.scss
new file mode 100644
index 000000000..1b52dcc57
--- /dev/null
+++ b/console/src/app/pages/orgs/org-list/org-list.component.scss
@@ -0,0 +1,53 @@
+h1 {
+  margin-top: 0;
+}
+
+.top-desc {
+  color: #8795a1;
+}
+
+.table,
+.paginator {
+  width: 100%;
+
+  td,
+  th {
+    padding: 0 1rem;
+
+    &:first-child {
+      padding-left: 0;
+      padding-right: 1rem;
+    }
+
+    &:last-child {
+      padding-right: 0;
+    }
+  }
+
+  .selection {
+    width: 50px;
+    max-width: 50px;
+  }
+}
+
+.pointer {
+  outline: none;
+  cursor: pointer;
+}
+
+.filter {
+  margin-left: 1rem;
+}
+
+th {
+  .search-button {
+    visibility: hidden;
+  }
+
+  &:hover,
+  &.search-active {
+    .search-button {
+      visibility: visible;
+    }
+  }
+}
diff --git a/console/src/app/pages/orgs/org-grid/org-grid.component.spec.ts b/console/src/app/pages/orgs/org-list/org-list.component.spec.ts
similarity index 57%
rename from console/src/app/pages/orgs/org-grid/org-grid.component.spec.ts
rename to console/src/app/pages/orgs/org-list/org-list.component.spec.ts
index ae133bdf8..9cec58512 100644
--- a/console/src/app/pages/orgs/org-grid/org-grid.component.spec.ts
+++ b/console/src/app/pages/orgs/org-list/org-list.component.spec.ts
@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { OrgGridComponent } from './org-grid.component';
+import { OrgListComponent } from './org-list.component';
 
-describe('OrgGridComponent', () => {
-    let component: OrgGridComponent;
-    let fixture: ComponentFixture<OrgGridComponent>;
+describe('OrgListComponent', () => {
+    let component: OrgListComponent;
+    let fixture: ComponentFixture<OrgListComponent>;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            declarations: [OrgGridComponent],
+            declarations: [OrgListComponent],
         })
             .compileComponents();
     }));
 
     beforeEach(() => {
-        fixture = TestBed.createComponent(OrgGridComponent);
+        fixture = TestBed.createComponent(OrgListComponent);
         component = fixture.componentInstance;
         fixture.detectChanges();
     });
diff --git a/console/src/app/pages/orgs/org-list/org-list.component.ts b/console/src/app/pages/orgs/org-list/org-list.component.ts
new file mode 100644
index 000000000..5b545c186
--- /dev/null
+++ b/console/src/app/pages/orgs/org-list/org-list.component.ts
@@ -0,0 +1,83 @@
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
+import { BehaviorSubject, from, Observable, of } from 'rxjs';
+import { catchError, finalize, map } from 'rxjs/operators';
+import { enterAnimations } from 'src/app/animations';
+import { MyProjectOrgSearchKey, MyProjectOrgSearchQuery, Org, SearchMethod } from 'src/app/proto/generated/auth_pb';
+import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
+
+@Component({
+    selector: 'app-org-list',
+    templateUrl: './org-list.component.html',
+    styleUrls: ['./org-list.component.scss'],
+    animations: [
+        enterAnimations,
+    ],
+})
+export class OrgListComponent implements AfterViewInit {
+    public orgSearchKey: MyProjectOrgSearchKey | undefined = undefined;
+
+    @ViewChild(MatPaginator) public paginator!: MatPaginator;
+    @ViewChild(MatSort) sort!: MatSort;
+
+    public dataSource!: MatTableDataSource<Org.AsObject>;
+    public displayedColumns: string[] = ['select', 'id', 'name'];
+    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+    public loading$: Observable<boolean> = this.loadingSubject.asObservable();
+    public activeOrg!: Org.AsObject;
+    public MyProjectOrgSearchKey: any = MyProjectOrgSearchKey;
+
+    constructor(
+        private authService: GrpcAuthService,
+    ) {
+        this.loadOrgs(10, 0);
+
+        this.authService.GetActiveOrg().then(org => this.activeOrg = org);
+    }
+
+    public ngAfterViewInit(): void {
+        this.loadOrgs(10, 0);
+    }
+
+    public loadOrgs(limit: number, offset: number, filter?: string): void {
+        this.loadingSubject.next(true);
+        let query;
+        if (filter) {
+            query = new MyProjectOrgSearchQuery();
+            query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS_IGNORE_CASE);
+            query.setKey(MyProjectOrgSearchKey.MYPROJECTORGSEARCHKEY_ORG_NAME);
+            query.setValue(filter);
+        }
+
+        from(this.authService.SearchMyProjectOrgs(limit, offset, query ? [query] : undefined)).pipe(
+            map(resp => {
+                return resp.toObject().resultList;
+            }),
+            catchError(() => of([])),
+            finalize(() => this.loadingSubject.next(false)),
+        ).subscribe(views => {
+            this.dataSource = new MatTableDataSource(views);
+            this.dataSource.paginator = this.paginator;
+            this.dataSource.sort = this.sort;
+        });
+    }
+
+    public selectOrg(item: Org.AsObject, event?: any): void {
+        this.authService.setActiveOrg(item);
+    }
+
+    public refresh(): void {
+        this.loadOrgs(this.paginator.length, this.paginator.pageSize * this.paginator.pageIndex);
+    }
+
+    public applyFilter(event: Event): void {
+        const filterValue = (event.target as HTMLInputElement).value;
+        this.loadOrgs(
+            this.paginator.pageSize,
+            this.paginator.pageIndex * this.paginator.pageSize,
+            filterValue.trim().toLowerCase(),
+        );
+    }
+}
diff --git a/console/src/app/pages/orgs/org-list/org-list.module.ts b/console/src/app/pages/orgs/org-list/org-list.module.ts
new file mode 100644
index 000000000..b7fa9f12b
--- /dev/null
+++ b/console/src/app/pages/orgs/org-list/org-list.module.ts
@@ -0,0 +1,42 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatRadioModule } from '@angular/material/radio';
+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 { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
+import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
+import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
+
+import { OrgListRoutingModule } from './org-list-routing.module';
+import { OrgListComponent } from './org-list.component';
+
+@NgModule({
+    declarations: [OrgListComponent],
+    imports: [
+        CommonModule,
+        OrgListRoutingModule,
+        MatTableModule,
+        TranslateModule,
+        RefreshTableModule,
+        TimestampToDatePipeModule,
+        LocalizedDatePipeModule,
+        MatPaginatorModule,
+        MatSortModule,
+        MatIconModule,
+        MatButtonModule,
+        MatTooltipModule,
+        MatRadioModule,
+        MatFormFieldModule,
+        MatInputModule,
+        FormsModule,
+    ],
+})
+export class OrgListModule { }
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 87f1d1e8a..5763e60d7 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
@@ -9,8 +9,7 @@
             </button>
         </ng-template>
         <ng-template appHasRole actions [appHasRole]="['org.member.write:'+org?.id,'org.member.write']">
-            <a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()" color="primary"
-                mat-raised-button>
+            <a color="primary" [disabled]="disabled" (click)="openAddMember()" color="primary" mat-raised-button>
                 <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
             </a>
         </ng-template>
@@ -73,7 +72,7 @@
                 </ng-container>
 
                 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
+                <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
                 </tr>
             </table>
 
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 b6cb54e69..0e632b6ce 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
@@ -24,12 +24,6 @@
       width: 40px;
     }
 
-    .data-row {
-      &:hover {
-        background-color: #ffffff05;
-      }
-    }
-
     .selection {
       width: 50px;
       max-width: 50px;
@@ -37,10 +31,6 @@
   }
 }
 
-.add-button {
-  border-radius: .5rem;
-}
-
 .pointer {
   outline: none;
   cursor: pointer;
diff --git a/console/src/app/pages/orgs/orgs-routing.module.ts b/console/src/app/pages/orgs/orgs-routing.module.ts
index 6e20e7a89..ac0bb1ebd 100644
--- a/console/src/app/pages/orgs/orgs-routing.module.ts
+++ b/console/src/app/pages/orgs/orgs-routing.module.ts
@@ -5,7 +5,6 @@ import { PolicyComponentServiceType, PolicyComponentType } from 'src/app/modules
 
 import { OrgCreateComponent } from './org-create/org-create.component';
 import { OrgDetailComponent } from './org-detail/org-detail.component';
-import { OrgGridComponent } from './org-grid/org-grid.component';
 
 const routes: Routes = [
     {
@@ -82,7 +81,7 @@ const routes: Routes = [
     },
     {
         path: 'overview',
-        component: OrgGridComponent,
+        loadChildren: () => import('./org-list/org-list.module').then(m => m.OrgListModule),
     },
 ];
 
diff --git a/console/src/app/pages/orgs/orgs.module.ts b/console/src/app/pages/orgs/orgs.module.ts
index f7b8a4484..745c0abec 100644
--- a/console/src/app/pages/orgs/orgs.module.ts
+++ b/console/src/app/pages/orgs/orgs.module.ts
@@ -25,12 +25,11 @@ import { ChangesModule } from '../../modules/changes/changes.module';
 import { AddDomainDialogModule } from './org-detail/add-domain-dialog/add-domain-dialog.module';
 import { DomainVerificationComponent } from './org-detail/domain-verification/domain-verification.component';
 import { OrgDetailComponent } from './org-detail/org-detail.component';
-import { OrgGridComponent } from './org-grid/org-grid.component';
 import { OrgsRoutingModule } from './orgs-routing.module';
 import { PolicyGridComponent } from './policy-grid/policy-grid.component';
 
 @NgModule({
-    declarations: [OrgDetailComponent, OrgGridComponent, PolicyGridComponent, DomainVerificationComponent],
+    declarations: [OrgDetailComponent, PolicyGridComponent, DomainVerificationComponent],
     imports: [
         CommonModule,
         HasRolePipeModule,
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 39a8f5e65..241222682 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
@@ -70,7 +70,6 @@ h1 {
 
     button {
       margin-right: 1rem;
-      border-radius: .5rem;
     }
   }
 }
diff --git a/console/src/app/pages/projects/apps/app-create/app-create.component.scss b/console/src/app/pages/projects/apps/app-create/app-create.component.scss
index a365fadb1..8304447ce 100644
--- a/console/src/app/pages/projects/apps/app-create/app-create.component.scss
+++ b/console/src/app/pages/projects/apps/app-create/app-create.component.scss
@@ -142,7 +142,6 @@ p.desc {
     margin-top: 3rem;
     display: block;
     padding: .5rem 4rem;
-    border-radius: .5rem;
     float: right;
   }
 }
diff --git a/console/src/app/pages/projects/apps/app-detail/app-detail.component.html b/console/src/app/pages/projects/apps/app-detail/app-detail.component.html
index dc7575441..49645bbee 100644
--- a/console/src/app/pages/projects/apps/app-detail/app-detail.component.html
+++ b/console/src/app/pages/projects/apps/app-detail/app-detail.component.html
@@ -42,8 +42,7 @@
     </app-card>
 
     <app-card title="{{ 'APP.OIDC.TITLE' | translate }}" *ngIf="app && app.oidcConfig">
-        <div class="card-actions" card-actions
-            *ngIf="app?.oidcConfig?.authMethodType !== OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE">
+        <div card-actions *ngIf="app?.oidcConfig?.authMethodType !== OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE">
             <button mat-stroked-button
                 (click)="regenerateOIDCClientSecret()">{{'APP.OIDC.REGENERATESECRET' | translate}}</button>
         </div>
diff --git a/console/src/app/pages/projects/apps/app-detail/app-detail.component.scss b/console/src/app/pages/projects/apps/app-detail/app-detail.component.scss
index 5665936da..e8ab3a3fb 100644
--- a/console/src/app/pages/projects/apps/app-detail/app-detail.component.scss
+++ b/console/src/app/pages/projects/apps/app-detail/app-detail.component.scss
@@ -33,12 +33,6 @@
   font-size: 14px;
 }
 
-.card-actions {
-  button {
-    border-radius: .5rem;
-  }
-}
-
 .compliance .problem {
   font-size: 14px;
 }
@@ -109,7 +103,6 @@
   margin: 0 -.5rem;
 
   .submit-button {
-    border-radius: .5rem;
     margin: 0 .5rem;
   }
 }
diff --git a/console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.scss b/console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.scss
index 5484eab9c..55d6b74cd 100644
--- a/console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.scss
+++ b/console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.scss
@@ -18,10 +18,6 @@
   .ok-button {
     margin-left: .5rem;
   }
-
-  button {
-    border-radius: .5rem;
-  }
 }
 
 .flex {
diff --git a/console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-list.component.html b/console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-list.component.html
index 2d30526f8..92e8f886d 100644
--- a/console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-list.component.html
+++ b/console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-list.component.html
@@ -63,7 +63,7 @@
                 </ng-container>
 
                 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
+                <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"
                     [routerLink]="['/granted-projects', row.projectId, 'grant', row.id]"></tr>
 
             </table>
diff --git a/console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-list.component.scss b/console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-list.component.scss
index 069b21ce1..a9b1a2536 100644
--- a/console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-list.component.scss
+++ b/console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-list.component.scss
@@ -6,7 +6,6 @@
 
   .icon-button {
     display: block;
-    border-radius: .5rem;
   }
 }
 
@@ -33,14 +32,6 @@
       }
     }
 
-    .data-row {
-      cursor: pointer;
-
-      &:hover {
-        background-color: #ffffff05;
-      }
-    }
-
     .selection {
       width: 50px;
       max-width: 50px;
diff --git a/console/src/app/pages/projects/owned-projects/owned-project-detail/applications/applications.component.html b/console/src/app/pages/projects/owned-projects/owned-project-detail/applications/applications.component.html
index ccdc523fe..9012cba3a 100644
--- a/console/src/app/pages/projects/owned-projects/owned-project-detail/applications/applications.component.html
+++ b/console/src/app/pages/projects/owned-projects/owned-project-detail/applications/applications.component.html
@@ -1,8 +1,8 @@
 <app-refresh-table [loading]="dataSource.loading$ | async" [selection]="selection" (refreshed)="refreshPage()"
     [dataSize]="dataSource.totalResult" [timestamp]="dataSource?.viewTimestamp">
     <ng-template appHasRole [appHasRole]="['project.app.write']" actions>
-        <a [disabled]="disabled" class="add-button" [routerLink]="[ '/projects', projectId, 'apps', 'create']"
-            color="primary" mat-raised-button>
+        <a [disabled]="disabled" [routerLink]="[ '/projects', projectId, 'apps', 'create']" color="primary"
+            mat-raised-button>
             <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
         </a>
     </ng-template>
@@ -31,7 +31,7 @@
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>
 
         <mat-paginator class="paginator" #paginator [length]="dataSource.totalResult" [pageSize]="25"
diff --git a/console/src/app/pages/projects/owned-projects/owned-project-detail/applications/applications.component.scss b/console/src/app/pages/projects/owned-projects/owned-project-detail/applications/applications.component.scss
index 191910461..0db380311 100644
--- a/console/src/app/pages/projects/owned-projects/owned-project-detail/applications/applications.component.scss
+++ b/console/src/app/pages/projects/owned-projects/owned-project-detail/applications/applications.component.scss
@@ -19,14 +19,6 @@
       }
     }
 
-    .data-row {
-      cursor: pointer;
-
-      &:hover {
-        background-color: #ffffff05;
-      }
-    }
-
     .selection {
       width: 50px;
       max-width: 50px;
diff --git a/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.html b/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.html
index 162757738..6db386060 100644
--- a/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.html
+++ b/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.html
@@ -23,11 +23,11 @@
 
             <button mat-stroked-button color="warn"
                 [disabled]="isZitadel || (['project.write', 'project.write:'+ project.projectId]| hasRole | async) == false"
-                *ngIf="project?.state === ProjectState.PROJECTSTATE_ACTIVE" class="state-button"
+                *ngIf="project?.state === ProjectState.PROJECTSTATE_ACTIVE"
                 (click)="changeState(ProjectState.PROJECTSTATE_INACTIVE)">{{'PROJECT.TABLE.DEACTIVATE' | translate}}</button>
             <button mat-stroked-button color="warn"
                 [disabled]="isZitadel || (['project.write', 'project.write:'+ project.projectId]| hasRole | async) == false"
-                *ngIf="project?.state === ProjectState.PROJECTSTATE_INACTIVE" class="state-button"
+                *ngIf="project?.state === ProjectState.PROJECTSTATE_INACTIVE"
                 (click)="changeState(ProjectState.PROJECTSTATE_ACTIVE)">{{'PROJECT.TABLE.ACTIVATE' | translate}}</button>
 
             <div class="full-width">
diff --git a/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.scss b/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.scss
index f67ffcee1..72b666886 100644
--- a/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.scss
+++ b/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.scss
@@ -9,10 +9,6 @@
     flex: 1;
   }
 
-  .state-button {
-    border-radius: .5rem;
-  }
-
   a {
     display: block;
   }
diff --git a/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.html b/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.html
index 34075312d..72be797d2 100644
--- a/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.html
+++ b/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.html
@@ -10,7 +10,7 @@
     </ng-template>
     <ng-template appHasRole [appHasRole]="['project.grant.member.write:'+projectId,'project.grant.member.write']"
         actions>
-        <a [disabled]="disabled" color="primary" class="rounded-button" color="primary" mat-raised-button
+        <a [disabled]="disabled" color="primary" color="primary" mat-raised-button
             [routerLink]="[ '/projects', projectId, 'grants', 'create']">
             <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
         </a>
@@ -71,7 +71,7 @@
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr class="data-row" mat-row *matRowDef="let grant; columns: displayedColumns;" class="element-row">
+            <tr class="highlight" mat-row *matRowDef="let grant; columns: displayedColumns;" class="element-row">
             </tr>
         </table>
 
diff --git a/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.scss b/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.scss
index e0d85e61b..bd754cd3d 100644
--- a/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.scss
+++ b/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.scss
@@ -1,7 +1,3 @@
-.rounded-button {
-  border-radius: .5rem;
-}
-
 .table-wrapper {
   overflow: auto;
 
diff --git a/console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-list.component.html b/console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-list.component.html
index 2c39ced12..6c6a4a9ac 100644
--- a/console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-list.component.html
+++ b/console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-list.component.html
@@ -12,7 +12,7 @@
         [selection]="selection" [loading]="loading$ | async">
 
         <ng-template actions appHasRole [appHasRole]="['project.create']">
-            <a class="add-button" [routerLink]="[ '/projects', 'create']" color="primary" mat-raised-button>
+            <a [routerLink]="[ '/projects', 'create']" color="primary" mat-raised-button>
                 <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
             </a>
         </ng-template>
@@ -62,7 +62,7 @@
                 </ng-container>
 
                 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
+                <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"
                     [routerLink]="['/projects', row.projectId]"></tr>
 
             </table>
diff --git a/console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-list.component.scss b/console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-list.component.scss
index 5752bf373..241f4477a 100644
--- a/console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-list.component.scss
+++ b/console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-list.component.scss
@@ -41,14 +41,6 @@ h1 {
       }
     }
 
-    .data-row {
-      cursor: pointer;
-
-      &:hover {
-        background-color: #ffffff05;
-      }
-    }
-
     .selection {
       width: 50px;
       max-width: 50px;
diff --git a/console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.component.html b/console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.component.html
index 8a61f1ed0..54bef8122 100644
--- a/console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.component.html
+++ b/console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.component.html
@@ -18,10 +18,9 @@
 
         <div>
             <button mat-stroked-button color="warn" *ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_ACTIVE"
-                class="state-button"
                 (click)="changeState(ProjectGrantState.PROJECTGRANTSTATE_INACTIVE)">{{'USER.PAGES.DEACTIVATE' | translate}}</button>
             <button mat-stroked-button color="warn"
-                *ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_INACTIVE" class="state-button"
+                *ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_INACTIVE"
                 (click)="changeState(ProjectGrantState.PROJECTGRANTSTATE_ACTIVE)">{{'USER.PAGES.REACTIVATE' | translate}}</button>
         </div>
     </div>
diff --git a/console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.component.scss b/console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.component.scss
index 7af6c271d..11c4bb63e 100644
--- a/console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.component.scss
+++ b/console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.component.scss
@@ -29,10 +29,6 @@
   .fill-space {
     flex: 1;
   }
-
-  .state-button {
-    border-radius: .5rem;
-  }
 }
 
 .formfield {
diff --git a/console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component.scss b/console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component.scss
index ad7115290..53919d775 100644
--- a/console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component.scss
+++ b/console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component.scss
@@ -9,8 +9,4 @@
   .ok-button {
     margin-left: .5rem;
   }
-
-  button {
-    border-radius: .5rem;
-  }
 }
diff --git a/console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members.component.html b/console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members.component.html
index 6d8705b2b..f767ef928 100644
--- a/console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members.component.html
+++ b/console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members.component.html
@@ -8,7 +8,7 @@
     </button>
     <a color="primary"
         [disabled]="(['project.grant.member.write','project.grant.member.write:' + grantId] | hasRole | async) == false"
-        class="add-button" (click)="openAddMember()" color="primary" mat-raised-button>
+        (click)="openAddMember()" color="primary" mat-raised-button>
         <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
     </a>
 
@@ -73,7 +73,7 @@
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
+            <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
             </tr>
         </table>
 
diff --git a/console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members.component.scss b/console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members.component.scss
index b9ea8393f..12c28926c 100644
--- a/console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members.component.scss
+++ b/console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members.component.scss
@@ -22,12 +22,6 @@
       width: 40px;
     }
 
-    .data-row {
-      &:hover {
-        background-color: #ffffff05;
-      }
-    }
-
     .selection {
       width: 50px;
       max-width: 50px;
diff --git a/console/src/app/pages/projects/project-grant-create/project-grant-create.component.scss b/console/src/app/pages/projects/project-grant-create/project-grant-create.component.scss
index 5b5ba1db0..9ff19a709 100644
--- a/console/src/app/pages/projects/project-grant-create/project-grant-create.component.scss
+++ b/console/src/app/pages/projects/project-grant-create/project-grant-create.component.scss
@@ -32,7 +32,6 @@
 .domain-button {
   margin-right: 1rem;
   margin-bottom: 1rem;
-  border-radius: .5rem;
 }
 
 .btn-container {
@@ -43,12 +42,10 @@
 
   .small-button {
     display: block;
-    border-radius: .5rem;
   }
 
   .big-button {
     display: block;
     padding: .5rem 4rem;
-    border-radius: .5rem;
   }
 }
diff --git a/console/src/app/pages/projects/project-role-create/project-role-create.component.scss b/console/src/app/pages/projects/project-role-create/project-role-create.component.scss
index e1025a41e..937d7c4b5 100644
--- a/console/src/app/pages/projects/project-role-create/project-role-create.component.scss
+++ b/console/src/app/pages/projects/project-role-create/project-role-create.component.scss
@@ -50,7 +50,6 @@
   margin-top: 3rem;
   display: block;
   padding: .5rem 4rem;
-  border-radius: .5rem;
 
   @media only screen and (max-width: 450px) {
     margin-top: 1rem;
diff --git a/console/src/app/pages/signedout/signedout.component.scss b/console/src/app/pages/signedout/signedout.component.scss
index f94201e56..f9301eca5 100644
--- a/console/src/app/pages/signedout/signedout.component.scss
+++ b/console/src/app/pages/signedout/signedout.component.scss
@@ -28,7 +28,6 @@
     }
 
     button {
-      border-radius: .5rem;
       display: block;
       padding: .5rem 4rem;
     }
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 102a27296..3070710ad 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
@@ -57,12 +57,10 @@
 
   .small-button {
     display: block;
-    border-radius: .5rem;
   }
 
   .big-button {
     display: block;
     padding: .5rem 4rem;
-    border-radius: .5rem;
   }
 }
diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.html b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.html
index 86416617c..70d8fd699 100644
--- a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.html
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.html
@@ -1,8 +1,15 @@
 <app-meta-layout>
     <div class="max-width-container">
-        <h1 class="h1">{{ 'USER.TITLE' | translate }}</h1>
-        <p class="sub">{{'USER.DESCRIPTION' | translate}}</p>
+        <div class="header-row">
+            <div>
+                <h1 class="h1">{{ 'USER.TITLE' | translate }}</h1>
+                <p class="sub">{{'USER.DESCRIPTION' | translate}}</p>
+            </div>
 
+            <div class="theme">
+                <app-theme-setting></app-theme-setting>
+            </div>
+        </div>
         <mat-progress-bar *ngIf="loading" color="accent" mode="indeterminate"></mat-progress-bar>
 
         <span *ngIf="!loading && !user">{{ 'USER.PAGES.NOUSER' | translate }}</span>
@@ -20,21 +27,21 @@
             </div>
         </app-card>
 
-        <div class="col" *ngIf="user">
-            <app-card class="app-card" title="{{ 'USER.PROFILE.TITLE' | translate }}">
-                <app-detail-form [genders]="genders" [languages]="languages" [username]="user.userName"
-                    [user]="user.human" (changedLanguage)="changedLanguage($event)" (submitData)="saveProfile($event)">
-                </app-detail-form>
-            </app-card>
+        <!-- <div class="col" *ngIf="user"> -->
+        <app-card *ngIf="user" class="app-card" title="{{ 'USER.PROFILE.TITLE' | translate }}">
+            <app-detail-form [genders]="genders" [languages]="languages" [username]="user.userName" [user]="user.human"
+                (changedLanguage)="changedLanguage($event)" (submitData)="saveProfile($event)">
+            </app-detail-form>
+        </app-card>
 
-            <app-card title="Theme" class="app-card theme-card">
+        <!-- <app-card title="Theme" class="app-card theme-card">
                 <app-theme-setting></app-theme-setting>
-            </app-card>
-        </div>
+            </app-card> -->
+        <!-- </div> -->
 
         <app-card *ngIf="user && user.human && user.id" title="{{ 'USER.EXTERNALIDP.TITLE' | translate }}"
-                  description="{{ 'USER.EXTERNALIDP.DESC' | translate }}">
-          <app-external-idps [userId]="user.id" [service]="userService"></app-external-idps>
+            description="{{ 'USER.EXTERNALIDP.DESC' | translate }}">
+            <app-external-idps [userId]="user.id" [service]="userService"></app-external-idps>
         </app-card>
 
         <app-card *ngIf="user" title="{{ 'USER.LOGINMETHODS.TITLE' | translate }}"
@@ -44,7 +51,7 @@
                     <span class="label">{{ 'USER.PROFILE.PASSWORD' | translate }}</span>
 
                     <span>*********</span>
-                    <div class="actions">
+                    <div>
                         <a [routerLink]="['password']" mat-icon-button>
                             <mat-icon class="icon">chevron_right</mat-icon>
                         </a>
@@ -69,7 +76,7 @@
                             </ng-container>
                         </div>
 
-                        <div class="actions">
+                        <div>
                             <button (click)="emailEditState = true" mat-icon-button>
                                 <mat-icon class="icon">edit</mat-icon>
                             </button>
@@ -84,9 +91,8 @@
                         <button (click)="emailEditState = false" mat-icon-button>
                             <mat-icon class="icon">close</mat-icon>
                         </button>
-                        <button *ngIf="user.human" [disabled]="!user.human.email" class="submit-button" type="button"
-                            color="primary" (click)="saveEmail()"
-                            mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
+                        <button *ngIf="user.human" [disabled]="!user.human.email" type="button" color="primary"
+                            (click)="saveEmail()" mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
                     </ng-template>
                 </div>
 
@@ -110,7 +116,7 @@
                             </ng-container>
                         </div>
 
-                        <div class="actions">
+                        <div>
                             <button (click)="phoneEditState = true" mat-icon-button>
                                 <mat-icon class="icon">edit</mat-icon>
                             </button>
@@ -153,4 +159,4 @@
 
         <app-changes class="changes" [changeType]="ChangeType.MYUSER" [id]="user.id"></app-changes>
     </div>
-</app-meta-layout>
+</app-meta-layout>
\ No newline at end of file
diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.scss b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.scss
index b3ac0b0c9..ce0b8ed02 100644
--- a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.scss
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.scss
@@ -1,10 +1,21 @@
-.h1 {
-  margin-top: 0;
-}
-
-.sub {
-  color: #8795a1;
+.header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: 2rem;
+  flex-wrap: wrap;
+
+  .h1 {
+    margin-top: 0;
+  }
+
+  .sub {
+    color: #8795a1;
+  }
+
+  .theme {
+    min-width: 250px;
+  }
 }
 
 .login-name-row {
@@ -50,7 +61,7 @@
   .method-row {
     display: flex;
     align-items: center;
-    justify-content: space-evenly;
+    justify-content: space-between;
     padding: .5rem;
     border-bottom: 1px solid #ffffff20;
     flex-wrap: wrap;
@@ -65,20 +76,16 @@
       display: flex;
       justify-content: flex-end;
       align-items: center;
+      flex-direction: column;
     }
 
     .label {
-      flex: 1;
       font-size: .9rem;
       color: #8795a1;
     }
 
     .icon {
-      margin-right: .5rem;
-    }
-
-    .submit-button {
-      border-radius: .5rem;
+      margin: .5rem;
     }
 
     .verify {
@@ -110,13 +117,13 @@
     margin: .5rem;
   }
 
-  .theme-card {
-    max-width: 300px;
+  //   .theme-card {
+  //     max-width: 300px;
 
-    @media only screen and (max-width: 450px) {
-      max-width: none;
-    }
-  }
+  //     @media only screen and (max-width: 450px) {
+  //       max-width: none;
+  //     }
+  //   }
 }
 
 .side {
diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.html b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.html
index f84c139a6..9f2b0c7ec 100644
--- a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.html
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.html
@@ -27,7 +27,7 @@
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>
     </app-refresh-table>
     <div class="add-row">
diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.scss b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.scss
index 23d52737e..711b44e18 100644
--- a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.scss
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.scss
@@ -4,7 +4,6 @@
   margin: -.5rem;
 
   .button {
-    border-radius: .5rem;
     margin: .5rem;
     margin-top: 1rem;
 
diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-card.scss b/console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-card.scss
index 515ec220b..bea3d95cc 100644
--- a/console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-card.scss
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-card.scss
@@ -3,7 +3,7 @@
 @mixin theme-card($theme) {
   /* stylelint-disable */
   $primary: map-get($theme, primary);
-  $primary-dark: mat-color($primary, A800);
+  $primary-dark: mat-color($primary, A900);
   /* stylelint-enable */
 
   .theme-conent,
diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-setting.component.html b/console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-setting.component.html
index 95041c53b..350dc49ff 100644
--- a/console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-setting.component.html
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-setting.component.html
@@ -1,17 +1,13 @@
 <input type="checkbox" id="switch" (change)="change($event.target.checked)" [(checked)]="isDarkTheme">
 <div class="theme-app">
     <div class="theme-content">
-        <div class="circle">
-            <div class="crescent"></div>
-        </div>
-        <p class="heading">Choose a style</p>
-        <p class="desc">Pop or subtle. Day or night.<br>
-            Customize your interface
-        </p>
         <label for="switch">
             <div class="toggle"></div>
             <div class="names">
                 <p class="light">Light</p>
+                <div class="circle">
+                    <div class="crescent"></div>
+                </div>
                 <p class="dark">Dark</p>
             </div>
         </label>
diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-setting.component.scss b/console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-setting.component.scss
index 72a488411..99a21fd27 100644
--- a/console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-setting.component.scss
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-setting.component.scss
@@ -1,5 +1,5 @@
-$dark-background: #2d2e30;
-$light-background: #fafafa;
+$dark-background: #212224;
+$light-background: rgb(220, 220, 220);
 
 :root {
   transition: none;
@@ -16,12 +16,12 @@ $light-background: #fafafa;
 }
 
 .circle {
+  z-index: 1;
   position: relative;
   border-radius: 100%;
-  width: 6rem;
-  height: 6rem;
+  width: 60px;
+  height: 60px;
   background: linear-gradient(40deg, #ff0080, #ff8c00 70%);
-  margin: auto;
   box-shadow: 0 30px 60px rgba(0, 0, 0, .12);
 }
 
@@ -29,8 +29,8 @@ $light-background: #fafafa;
   position: absolute;
   border-radius: 100%;
   right: 0;
-  width: 4rem;
-  height: 4rem;
+  width: 40px;
+  height: 40px;
   background: $light-background;
   transform: scale(0);
   transform-origin: top right;
@@ -41,20 +41,9 @@ p {
   font-size: 90%;
 }
 
-.heading {
-  font-size: 100%;
-  font-weight: bolder;
-  margin: 2rem 0 .2rem 0;
-}
-
-.desc {
-  font-size: 14px;
-  color: #8795a1;
-}
-
 label,
 .toggle {
-  height: 2.8rem;
+  height: 45px;
   border-radius: 100px;
 }
 
@@ -63,7 +52,6 @@ label {
   background-color: rgba(0, 0, 0, .1);
   border-radius: 100px;
   position: relative;
-  margin: 1rem 0 1rem 0;
   cursor: pointer;
 }
 
@@ -78,33 +66,37 @@ label {
   font-weight: bolder;
   width: 65%;
   margin-left: 17.5%;
-  margin-top: .5%;
   position: absolute;
   display: flex;
   justify-content: space-between;
+  align-items: center;
   user-select: none;
+  height: 60px;
+  transform: translateY(-7.5px);
 }
 
 [type="checkbox"] {
   display: none;
 }
 
-[type="checkbox"]:checked + .theme-app .toggle {
-  transform: translateX(100%);
-  background-color: $dark-background;
-}
+[type="checkbox"]:checked {
+  .toggle {
+    transform: translateX(100%);
+    background-color: $dark-background;
+  }
 
-[type="checkbox"]:checked + .theme-app .dark {
-  opacity: 1;
-}
+  .light {
+    opacity: .5;
+  }
 
-[type="checkbox"]:checked + .theme-app .light {
-  opacity: .5;
-}
+  .dark {
+    opacity: 1;
+  }
 
-[type="checkbox"]:checked + .theme-app {
-  background-color: inherit;
-  color: inherit;
+  .theme-app {
+    background-color: inherit;
+    color: inherit;
+  }
 }
 
 [type="checkbox"]:checked + .theme-app .crescent {
@@ -119,3 +111,8 @@ label {
 [type="checkbox"]:checked + .theme-app .main-circle {
   background: linear-gradient(40deg, #8983f7, #a3dafb 70%);
 }
+
+[type="checkbox"]:checked + .app .toggle {
+  transform: translateX(100%);
+  background-color: #34323d;
+}
diff --git a/console/src/app/pages/users/user-detail/detail-form-machine/detail-form-machine.component.html b/console/src/app/pages/users/user-detail/detail-form-machine/detail-form-machine.component.html
index 71b02e2c6..acfbd1e1e 100644
--- a/console/src/app/pages/users/user-detail/detail-form-machine/detail-form-machine.component.html
+++ b/console/src/app/pages/users/user-detail/detail-form-machine/detail-form-machine.component.html
@@ -23,7 +23,6 @@
         </mat-form-field>
     </div>
     <div class="btn-container">
-        <button class="submit-button" type="submit" color="primary"
-            mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
+        <button type="submit" color="primary" mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
     </div>
 </form>
\ No newline at end of file
diff --git a/console/src/app/pages/users/user-detail/detail-form-machine/detail-form-machine.component.scss b/console/src/app/pages/users/user-detail/detail-form-machine/detail-form-machine.component.scss
index 1e3c555a1..4c5f5bbfa 100644
--- a/console/src/app/pages/users/user-detail/detail-form-machine/detail-form-machine.component.scss
+++ b/console/src/app/pages/users/user-detail/detail-form-machine/detail-form-machine.component.scss
@@ -14,8 +14,4 @@
 .btn-container {
   display: flex;
   justify-content: flex-end;
-
-  .submit-button {
-    border-radius: .5rem;
-  }
 }
diff --git a/console/src/app/pages/users/user-detail/external-idps/external-idps.component.html b/console/src/app/pages/users/user-detail/external-idps/external-idps.component.html
index 1cdd1cec8..6d3355136 100644
--- a/console/src/app/pages/users/user-detail/external-idps/external-idps.component.html
+++ b/console/src/app/pages/users/user-detail/external-idps/external-idps.component.html
@@ -1,49 +1,49 @@
 <app-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource.data.length"
-                   [timestamp]="externalIdpResult?.viewTimestamp" [selection]="selection">
+    [timestamp]="externalIdpResult?.viewTimestamp" [selection]="selection">
 
-  <div class="table-wrapper">
-    <table class="table" mat-table [dataSource]="dataSource">
-      <ng-container matColumnDef="select">
-        <th mat-header-cell *matHeaderCellDef>
-          <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
+    <div class="table-wrapper">
+        <table class="table" mat-table [dataSource]="dataSource">
+            <ng-container matColumnDef="select">
+                <th mat-header-cell *matHeaderCellDef>
+                    <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
                         [checked]="selection.hasValue() && isAllSelected()"
                         [indeterminate]="selection.hasValue() && !isAllSelected()">
-          </mat-checkbox>
-        </th>
-        <td mat-cell *matCellDef="let idp">
-          <mat-checkbox color="primary" (click)="$event.stopPropagation()"
+                    </mat-checkbox>
+                </th>
+                <td mat-cell *matCellDef="let idp">
+                    <mat-checkbox color="primary" (click)="$event.stopPropagation()"
                         (change)="$event ? selection.toggle(idp) : null" [checked]="selection.isSelected(idp)">
-          </mat-checkbox>
-        </td>
-      </ng-container>
+                    </mat-checkbox>
+                </td>
+            </ng-container>
 
-      <ng-container matColumnDef="idpConfigId">
-        <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.IDPCONFIGID' | translate }} </th>
-        <td mat-cell *matCellDef="let idp"> {{idp?.idpConfigId}} </td>
-      </ng-container>
+            <ng-container matColumnDef="idpConfigId">
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.IDPCONFIGID' | translate }} </th>
+                <td mat-cell *matCellDef="let idp"> {{idp?.idpConfigId}} </td>
+            </ng-container>
 
-      <ng-container matColumnDef="idpName">
-        <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.IDPNAME' | translate }} </th>
-        <td mat-cell *matCellDef="let idp"> {{idp?.idpName}} </td>
-      </ng-container>
+            <ng-container matColumnDef="idpName">
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.IDPNAME' | translate }} </th>
+                <td mat-cell *matCellDef="let idp"> {{idp?.idpName}} </td>
+            </ng-container>
 
-      <ng-container matColumnDef="externalUserDisplayName">
-        <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.USERDISPLAYNAME' | translate }} </th>
-        <td mat-cell *matCellDef="let idp"> {{idp?.externalUserDisplayName}} </td>
-      </ng-container>
+            <ng-container matColumnDef="externalUserDisplayName">
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.USERDISPLAYNAME' | translate }} </th>
+                <td mat-cell *matCellDef="let idp"> {{idp?.externalUserDisplayName}} </td>
+            </ng-container>
 
-      <ng-container matColumnDef="externalUserId">
-        <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.EXTERNALUSERID' | translate }} </th>
-        <td mat-cell *matCellDef="let idp"> {{idp?.externalUserId}} </td>
-      </ng-container>
+            <ng-container matColumnDef="externalUserId">
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.EXTERNALUSERID' | translate }} </th>
+                <td mat-cell *matCellDef="let idp"> {{idp?.externalUserId}} </td>
+            </ng-container>
 
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
-      </tr>
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
+            </tr>
 
-    </table>
-    <mat-paginator #paginator class="paginator" [length]="externalIdpResult?.totalResult || 0" [pageSize]="10"
-                   [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
-  </div>
+        </table>
+        <mat-paginator #paginator class="paginator" [length]="externalIdpResult?.totalResult || 0" [pageSize]="10"
+            [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
+    </div>
 
-</app-refresh-table>
+</app-refresh-table>
\ No newline at end of file
diff --git a/console/src/app/pages/users/user-detail/external-idps/external-idps.component.scss b/console/src/app/pages/users/user-detail/external-idps/external-idps.component.scss
index 073164988..bade0aa75 100644
--- a/console/src/app/pages/users/user-detail/external-idps/external-idps.component.scss
+++ b/console/src/app/pages/users/user-detail/external-idps/external-idps.component.scss
@@ -19,21 +19,9 @@
         padding-right: 0;
       }
     }
-
-    .data-row {
-      cursor: pointer;
-
-      &:hover {
-        background-color: #ffffff05;
-      }
-    }
   }
 }
 
 tr {
   outline: none;
 }
-
-.add-button {
-  border-radius: .5rem;
-}
diff --git a/console/src/app/pages/users/user-detail/external-idps/external-idps.component.ts b/console/src/app/pages/users/user-detail/external-idps/external-idps.component.ts
index d64e1cd02..7aec1439f 100644
--- a/console/src/app/pages/users/user-detail/external-idps/external-idps.component.ts
+++ b/console/src/app/pages/users/user-detail/external-idps/external-idps.component.ts
@@ -1,75 +1,99 @@
-import {Component, Input, OnInit, ViewChild} from '@angular/core';
-import {MatPaginator, PageEvent} from '@angular/material/paginator';
-import {MatTableDataSource} from '@angular/material/table';
+import { SelectionModel } from '@angular/cdk/collections';
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+import { ExternalIDPView as AuthExternalIDPView } from '../../../../proto/generated/auth_pb';
 import {
-  ExternalIDPSearchResponse,
-  ExternalIDPView as MgmtExternalIDPView,
-  IdpView as MgmtIdpView,
+    ExternalIDPSearchResponse,
+    ExternalIDPView as MgmtExternalIDPView,
 } from '../../../../proto/generated/management_pb';
-import {
-  ExternalIDPView as AuthExternalIDPView,
-} from '../../../../proto/generated/auth_pb';
-import {BehaviorSubject, Observable} from 'rxjs';
-import {ManagementService} from '../../../../services/mgmt.service';
-import {ToastService} from '../../../../services/toast.service';
-import {SelectionModel} from '@angular/cdk/collections';
-import {GrpcAuthService} from '../../../../services/grpc-auth.service';
+import { GrpcAuthService } from '../../../../services/grpc-auth.service';
+import { ManagementService } from '../../../../services/mgmt.service';
+import { ToastService } from '../../../../services/toast.service';
 
 @Component({
-  selector: 'app-external-idps',
-  templateUrl: './external-idps.component.html',
-  styleUrls: ['./external-idps.component.scss'],
+    selector: 'app-external-idps',
+    templateUrl: './external-idps.component.html',
+    styleUrls: ['./external-idps.component.scss'],
 })
 export class ExternalIdpsComponent implements OnInit {
-  @Input() service!: GrpcAuthService | ManagementService;
-  @Input() userId!: string;
-  @ViewChild(MatPaginator) public paginator!: MatPaginator;
-  public externalIdpResult!: ExternalIDPSearchResponse.AsObject;
-  public dataSource: MatTableDataSource<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>
-    = new MatTableDataSource<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>();
-  public selection: SelectionModel<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>
-    = new SelectionModel<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>(true, []);
-  private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
-  public loading$: Observable<boolean> = this.loadingSubject.asObservable();
-  @Input() public displayedColumns: string[] = [ 'idpConfigId', 'idpName', 'externalUserId', 'externalUserDisplayName'];
+    @Input() service!: GrpcAuthService | ManagementService;
+    @Input() userId!: string;
+    @ViewChild(MatPaginator) public paginator!: MatPaginator;
+    public externalIdpResult!: ExternalIDPSearchResponse.AsObject;
+    public dataSource: MatTableDataSource<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>
+        = new MatTableDataSource<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>();
+    public selection: SelectionModel<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>
+        = new SelectionModel<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>(true, []);
+    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+    public loading$: Observable<boolean> = this.loadingSubject.asObservable();
+    @Input() public displayedColumns: string[] = ['idpConfigId', 'idpName', 'externalUserId', 'externalUserDisplayName'];
 
-  constructor(private toast: ToastService) { }
+    constructor(private toast: ToastService) { }
 
-  ngOnInit(): void {
-    this.getData(10, 0);
-  }
+    ngOnInit(): void {
+        this.getData(10, 0);
+    }
 
-  public isAllSelected(): boolean {
-    const numSelected = this.selection.selected.length;
-    const numRows = this.dataSource.data.length;
-    return numSelected === numRows;
-  }
+    public isAllSelected(): boolean {
+        const numSelected = this.selection.selected.length;
+        const numRows = this.dataSource.data.length;
+        return numSelected === numRows;
+    }
 
-  public masterToggle(): void {
-    this.isAllSelected() ?
-      this.selection.clear() :
-      this.dataSource.data.forEach(row => this.selection.select(row));
-  }
+    public masterToggle(): void {
+        this.isAllSelected() ?
+            this.selection.clear() :
+            this.dataSource.data.forEach(row => this.selection.select(row));
+    }
 
-  public changePage(event: PageEvent): void {
-    this.getData(event.pageSize, event.pageIndex * event.pageSize);
-  }
+    public changePage(event: PageEvent): void {
+        this.getData(event.pageSize, event.pageIndex * event.pageSize);
+    }
 
-  private async getData(limit: number, offset: number): Promise<void> {
-    this.loadingSubject.next(true);
+    private async getData(limit: number, offset: number): Promise<void> {
+        this.loadingSubject.next(true);
 
-    this.service.SearchExternalIdps(this.userId, limit, offset).then(resp => {
-      this.externalIdpResult = resp.toObject();
-      this.dataSource.data = this.externalIdpResult.resultList;
-      console.log(this.externalIdpResult.resultList);
-      this.loadingSubject.next(false);
-    }).catch((error: any) => {
-      this.toast.showError(error);
-      this.loadingSubject.next(false);
-    });
-  }
+        let promise;
+        if (this.service instanceof ManagementService) {
+            promise = (this.service as ManagementService).SearchUserExternalIDPs(limit, offset, this.userId);
+        } else if (this.service instanceof GrpcAuthService) {
+            promise = (this.service as GrpcAuthService).SearchMyExternalIdps(limit, offset);
+        }
 
-  public refreshPage(): void {
-    this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
-  }
+        if (promise) {
+            promise.then(resp => {
+                this.externalIdpResult = resp.toObject();
+                this.dataSource.data = this.externalIdpResult.resultList;
+                console.log(this.externalIdpResult.resultList);
+                this.loadingSubject.next(false);
+            }).catch((error: any) => {
+                this.toast.showError(error);
+                this.loadingSubject.next(false);
+            });
+        }
+    }
+
+    public refreshPage(): void {
+        this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
+    }
+
+    public removeExternalIdp(idp: AuthExternalIDPView.AsObject | MgmtExternalIDPView.AsObject): void {
+        let promise;
+        if (this.service instanceof ManagementService) {
+            promise = (this.service as ManagementService).RemoveExternalIDP(idp.externalUserId, idp.idpConfigId, idp.userId);
+        } else if (this.service instanceof GrpcAuthService) {
+            promise = (this.service as GrpcAuthService).RemoveExternalIDP(idp.externalUserId, idp.idpConfigId);
+        }
+
+        if (promise) {
+            promise.then(_ => {
+                this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
+            }).catch((error: any) => {
+                this.toast.showError(error);
+            });
+        }
+    }
 }
diff --git a/console/src/app/pages/users/user-detail/machine-keys/add-key-dialog/add-key-dialog.component.scss b/console/src/app/pages/users/user-detail/machine-keys/add-key-dialog/add-key-dialog.component.scss
index 91a03f5bc..48211d84a 100644
--- a/console/src/app/pages/users/user-detail/machine-keys/add-key-dialog/add-key-dialog.component.scss
+++ b/console/src/app/pages/users/user-detail/machine-keys/add-key-dialog/add-key-dialog.component.scss
@@ -19,8 +19,4 @@
   .ok-button {
     margin-left: .5rem;
   }
-
-  button {
-    border-radius: .5rem;
-  }
 }
diff --git a/console/src/app/pages/users/user-detail/machine-keys/machine-keys.component.html b/console/src/app/pages/users/user-detail/machine-keys/machine-keys.component.html
index 68f6d1b28..30ffa383e 100644
--- a/console/src/app/pages/users/user-detail/machine-keys/machine-keys.component.html
+++ b/console/src/app/pages/users/user-detail/machine-keys/machine-keys.component.html
@@ -6,8 +6,8 @@
             mat-icon-button *ngIf="selection.hasValue()">
             <i class="las la-trash"></i>
         </button>
-        <a class="add-button" [disabled]="([('user.write:' + userId), 'user.write'] | hasRole | async) == false"
-            color="primary" mat-raised-button (click)="openAddKey()">
+        <a [disabled]="([('user.write:' + userId), 'user.write'] | hasRole | async) == false" color="primary"
+            mat-raised-button (click)="openAddKey()">
             <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
         </a>
     </ng-template>
@@ -54,7 +54,7 @@
 
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
+            <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"
                 [routerLink]="row.id ? ['/users', row.id ]: null">
             </tr>
 
diff --git a/console/src/app/pages/users/user-detail/machine-keys/machine-keys.component.scss b/console/src/app/pages/users/user-detail/machine-keys/machine-keys.component.scss
index 073164988..bade0aa75 100644
--- a/console/src/app/pages/users/user-detail/machine-keys/machine-keys.component.scss
+++ b/console/src/app/pages/users/user-detail/machine-keys/machine-keys.component.scss
@@ -19,21 +19,9 @@
         padding-right: 0;
       }
     }
-
-    .data-row {
-      cursor: pointer;
-
-      &:hover {
-        background-color: #ffffff05;
-      }
-    }
   }
 }
 
 tr {
   outline: none;
 }
-
-.add-button {
-  border-radius: .5rem;
-}
diff --git a/console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.component.scss b/console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.component.scss
index b3912e201..f4ade9076 100644
--- a/console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.component.scss
+++ b/console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.component.scss
@@ -19,10 +19,6 @@
   .ok-button {
     margin-left: .5rem;
   }
-
-  button {
-    border-radius: .5rem;
-  }
 }
 
 .row {
@@ -52,5 +48,4 @@
 
 .download-button {
   margin-bottom: 1rem;
-  border-radius: .5rem;
 }
diff --git a/console/src/app/pages/users/user-detail/membership-detail/membership-detail.component.html b/console/src/app/pages/users/user-detail/membership-detail/membership-detail.component.html
index fd2bcf322..38a610520 100644
--- a/console/src/app/pages/users/user-detail/membership-detail/membership-detail.component.html
+++ b/console/src/app/pages/users/user-detail/membership-detail/membership-detail.component.html
@@ -4,7 +4,7 @@
     <app-refresh-table class="refresh-table" (refreshed)="refreshPage()" [dataSize]="dataSource?.totalResult"
         [timestamp]="dataSource?.viewTimestamp" [selection]="selection" [loading]="dataSource?.loading$ | async">
 
-        <a actions color="primary" class="add-button" (click)="addMember()" color="primary" mat-raised-button>
+        <a actions color="primary" (click)="addMember()" color="primary" mat-raised-button>
             <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
         </a>
 
@@ -57,7 +57,7 @@
                 </ng-container>
 
                 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
+                <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
                 </tr>
             </table>
 
diff --git a/console/src/app/pages/users/user-detail/membership-detail/membership-detail.component.scss b/console/src/app/pages/users/user-detail/membership-detail/membership-detail.component.scss
index 348114fa8..6f3cf2fdc 100644
--- a/console/src/app/pages/users/user-detail/membership-detail/membership-detail.component.scss
+++ b/console/src/app/pages/users/user-detail/membership-detail/membership-detail.component.scss
@@ -1,7 +1,3 @@
-.add-button {
-  border-radius: .5rem;
-}
-
 .refresh-table {
   width: 100%;
 }
@@ -32,12 +28,6 @@
       width: 40px;
     }
 
-    .data-row {
-      &:hover {
-        background-color: #ffffff05;
-      }
-    }
-
     .selection {
       width: 50px;
       max-width: 50px;
diff --git a/console/src/app/pages/users/user-detail/password/password.component.scss b/console/src/app/pages/users/user-detail/password/password.component.scss
index d55544ff7..367b76466 100644
--- a/console/src/app/pages/users/user-detail/password/password.component.scss
+++ b/console/src/app/pages/users/user-detail/password/password.component.scss
@@ -26,7 +26,6 @@
   margin-top: 100px;
   display: block;
   padding: .5rem 4rem;
-  border-radius: .5rem;
 }
 
 .mat-error {
diff --git a/console/src/app/pages/users/user-detail/user-detail/user-detail.component.html b/console/src/app/pages/users/user-detail/user-detail/user-detail.component.html
index 806ffef0e..a1deba12e 100644
--- a/console/src/app/pages/users/user-detail/user-detail/user-detail.component.html
+++ b/console/src/app/pages/users/user-detail/user-detail/user-detail.component.html
@@ -10,10 +10,8 @@
 
             <ng-template appHasRole [appHasRole]="['user.write', 'user.write:'+user?.id]">
                 <button mat-stroked-button color="warn" *ngIf="user?.state === UserState.USERSTATE_ACTIVE"
-                    class="state-button"
                     (click)="changeState(UserState.USERSTATE_INACTIVE)">{{'USER.PAGES.DEACTIVATE' | translate}}</button>
                 <button mat-stroked-button color="warn" *ngIf="user?.state === UserState.USERSTATE_INACTIVE"
-                    class="state-button"
                     (click)="changeState(UserState.USERSTATE_ACTIVE)">{{'USER.PAGES.REACTIVATE' | translate}}</button>
             </ng-template>
         </div>
@@ -43,10 +41,10 @@
                 </app-detail-form>
             </app-card>
 
-          <app-card *ngIf="user && user.human && user.id" title="{{ 'USER.EXTERNALIDP.TITLE' | translate }}"
-                    description="{{ 'USER.EXTERNALIDP.DESC' | translate }}">
-            <app-external-idps [userId]="user.id" [service]="mgmtService" ></app-external-idps>
-          </app-card>
+            <app-card *ngIf="user && user.human && user.id" title="{{ 'USER.EXTERNALIDP.TITLE' | translate }}"
+                description="{{ 'USER.EXTERNALIDP.DESC' | translate }}">
+                <app-external-idps [userId]="user.id" [service]="mgmtUserService"></app-external-idps>
+            </app-card>
 
             <app-card *ngIf="user.machine" title="{{ 'USER.MACHINE.TITLE' | translate }}">
                 <app-detail-form-machine
@@ -67,9 +65,9 @@
                 <div class="method-row">
                     <span class="label">{{ 'USER.PROFILE.PASSWORD' | translate }}</span>
                     <span>******</span>
-                    <div class="actions">
-                        <button [disabled]="(canWrite$ | async) == false" class="notify-change-pwd"
-                            (click)="sendSetPasswordNotification()" mat-stroked-button color="primary"
+                    <div>
+                        <button [disabled]="(canWrite$ | async) == false" (click)="sendSetPasswordNotification()"
+                            mat-stroked-button color="primary"
                             *ngIf="user.state === UserState.USERSTATE_INITIAL">{{ 'USER.PASSWORD.RESENDNOTIFICATION' | translate }}</button>
                         <a [disabled]="(canWrite$ | async) == false" [routerLink]="['password']" mat-icon-button>
                             <mat-icon class="icon">chevron_right</mat-icon>
@@ -96,7 +94,7 @@
                             </ng-container>
                         </div>
 
-                        <div class="actions">
+                        <div>
                             <button [disabled]="(canWrite$ | async) == false" (click)="emailEditState = true"
                                 mat-icon-button>
                                 <mat-icon class="icon">edit</mat-icon>
@@ -114,7 +112,7 @@
                             <mat-icon class="icon">close</mat-icon>
                         </button>
                         <button *ngIf="user.human" [disabled]="!user.human.email || (canWrite$ | async) == false"
-                            class="submit-button" type="button" color="primary" (click)="saveEmail()"
+                            type="button" color="primary" (click)="saveEmail()"
                             mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
                     </ng-template>
                 </div>
@@ -139,7 +137,7 @@
                             </ng-container>
                         </div>
 
-                        <div class="actions">
+                        <div>
                             <button [disabled]="(canWrite$ | async) == false" (click)="phoneEditState = true"
                                 mat-icon-button>
                                 <mat-icon class="icon">edit</mat-icon>
@@ -196,4 +194,4 @@
 
         <app-changes class="changes" [changeType]="ChangeType.USER" [id]="user.id"></app-changes>
     </div>
-</app-meta-layout>
+</app-meta-layout>
\ No newline at end of file
diff --git a/console/src/app/pages/users/user-detail/user-detail/user-detail.component.scss b/console/src/app/pages/users/user-detail/user-detail/user-detail.component.scss
index 0606ca3fa..42288edd7 100644
--- a/console/src/app/pages/users/user-detail/user-detail/user-detail.component.scss
+++ b/console/src/app/pages/users/user-detail/user-detail/user-detail.component.scss
@@ -17,16 +17,6 @@
   .fill-space {
     flex: 1;
   }
-
-  .state-button {
-    border-radius: .5rem;
-  }
-}
-
-.card-actions {
-  button {
-    border-radius: .5rem;
-  }
 }
 
 .method-col {
@@ -37,7 +27,7 @@
   .method-row {
     display: flex;
     align-items: center;
-    justify-content: space-evenly;
+    justify-content: space-between;
     padding: .5rem;
     border-bottom: 1px solid #ffffff20;
     flex-wrap: wrap;
@@ -52,24 +42,16 @@
       display: flex;
       justify-content: flex-end;
       align-items: center;
-
-      .notify-change-pwd {
-        border-radius: .5rem;
-      }
+      flex-direction: column;
     }
 
     .label {
-      flex: 1;
       font-size: .9rem;
       color: #818a8a;
     }
 
     .icon {
-      margin-right: .5rem;
-    }
-
-    .submit-button {
-      border-radius: .5rem;
+      margin: .5rem;
     }
 
     .verify {
diff --git a/console/src/app/pages/users/user-detail/user-detail/user-detail.component.ts b/console/src/app/pages/users/user-detail/user-detail/user-detail.component.ts
index 1b7ff8db4..a055b5a22 100644
--- a/console/src/app/pages/users/user-detail/user-detail/user-detail.component.ts
+++ b/console/src/app/pages/users/user-detail/user-detail/user-detail.component.ts
@@ -1,22 +1,22 @@
-import {Location} from '@angular/common';
-import {Component, OnDestroy, OnInit} from '@angular/core';
-import {ActivatedRoute} from '@angular/router';
-import {TranslateService} from '@ngx-translate/core';
-import {Subscription} from 'rxjs';
-import {ChangeType} from 'src/app/modules/changes/changes.component';
+import { Location } from '@angular/common';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { Subscription } from 'rxjs';
+import { ChangeType } from 'src/app/modules/changes/changes.component';
 import {
-  Gender,
-  MachineResponse,
-  MachineView,
-  NotificationType,
-  UserEmail,
-  UserPhone,
-  UserProfile,
-  UserState,
-  UserView,
+    Gender,
+    MachineResponse,
+    MachineView,
+    NotificationType,
+    UserEmail,
+    UserPhone,
+    UserProfile,
+    UserState,
+    UserView,
 } from 'src/app/proto/generated/management_pb';
-import {ManagementService} from 'src/app/services/mgmt.service';
-import {ToastService} from 'src/app/services/toast.service';
+import { ManagementService } from 'src/app/services/mgmt.service';
+import { ToastService } from 'src/app/services/toast.service';
 
 @Component({
     selector: 'app-user-detail',
@@ -42,9 +42,8 @@ export class UserDetailComponent implements OnInit, OnDestroy {
         public translate: TranslateService,
         private route: ActivatedRoute,
         private toast: ToastService,
-        private mgmtUserService: ManagementService,
+        public mgmtUserService: ManagementService,
         private _location: Location,
-        public mgmtService: ManagementService,
     ) { }
 
     public ngOnInit(): void {
diff --git a/console/src/app/pages/users/user-detail/user-detail/user-mfa/user-mfa.component.html b/console/src/app/pages/users/user-detail/user-detail/user-mfa/user-mfa.component.html
index f274b677c..61c2b662c 100644
--- a/console/src/app/pages/users/user-detail/user-detail/user-mfa/user-mfa.component.html
+++ b/console/src/app/pages/users/user-detail/user-detail/user-mfa/user-mfa.component.html
@@ -18,7 +18,7 @@
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
+            <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
             </tr>
         </table>
     </app-refresh-table>
diff --git a/console/src/app/pages/users/user-list/user-list.module.ts b/console/src/app/pages/users/user-list/user-list.module.ts
index 859dcbbac..f9f3159c0 100644
--- a/console/src/app/pages/users/user-list/user-list.module.ts
+++ b/console/src/app/pages/users/user-list/user-list.module.ts
@@ -4,7 +4,9 @@ import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 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 { MatPaginatorModule } from '@angular/material/paginator';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatTableModule } from '@angular/material/table';
@@ -46,6 +48,8 @@ import { UserTableComponent } from './user-table/user-table.component';
         TranslateModule,
         SharedModule,
         RefreshTableModule,
+        MatFormFieldModule,
+        MatInputModule,
     ],
     exports: [
         UserListComponent,
diff --git a/console/src/app/pages/users/user-list/user-table/user-table.component.html b/console/src/app/pages/users/user-list/user-table/user-table.component.html
index f5ca7e97a..366f0ebe2 100644
--- a/console/src/app/pages/users/user-list/user-table/user-table.component.html
+++ b/console/src/app/pages/users/user-list/user-table/user-table.component.html
@@ -2,16 +2,22 @@
     [timestamp]="userResult?.viewTimestamp" [selection]="selection"
     [emitRefreshOnPreviousRoute]="refreshOnPreviousRoute">
     <ng-template appHasRole [appHasRole]="['user.write']" actions>
-        <button (click)="deactivateSelectedUsers()" matTooltip="{{'ORG_DETAIL.TABLE.DEACTIVATE' | translate}}"
+        <mat-form-field @appearfade *ngIf="userSearchKey != undefined" actions class="filtername">
+            <mat-label>{{'USER.PAGES.FILTER' | translate}}</mat-label>
+            <input matInput (keyup)="applyFilter($event)"
+                [placeholder]="('USER.TABLE.FILTER.' + userSearchKey.toString()) | translate" #input>
+        </mat-form-field>
+
+        <button (click)="deactivateSelectedUsers()" matTooltip="{{'USER.TABLE.DEACTIVATE' | translate}}"
             class="icon-button" mat-icon-button *ngIf="selection.hasValue()" [disabled]="disabled">
             <mat-icon svgIcon="mdi_account_cancel"></mat-icon>
         </button>
-        <button (click)="reactivateSelectedUsers()" matTooltip="{{'ORG_DETAIL.TABLE.ACTIVATE' | translate}}"
+        <button (click)="reactivateSelectedUsers()" matTooltip="{{'USER.TABLE.ACTIVATE' | translate}}"
             class="icon-button" mat-icon-button *ngIf="selection.hasValue()" [disabled]="disabled">
             <mat-icon svgIcon="mdi_account_check_outline"></mat-icon>
         </button>
-        <a class="add-button" [routerLink]="[ '/users',userType == UserType.HUMAN ? 'create' : 'create-machine']"
-            color="primary" mat-raised-button [disabled]="disabled">
+        <a [routerLink]="[ '/users',userType == UserType.HUMAN ? 'create' : 'create-machine']" color="primary"
+            mat-raised-button [disabled]="disabled">
             <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
         </a>
     </ng-template>
@@ -36,17 +42,39 @@
             </ng-container>
 
             <ng-container matColumnDef="firstname">
-                <th mat-header-cell *matHeaderCellDef> {{ 'USER.PROFILE.FIRSTNAME' | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef
+                    [ngClass]="{'search-active': this.userSearchKey == UserSearchKey.USERSEARCHKEY_FIRST_NAME}">
+                    {{ 'USER.PROFILE.FIRSTNAME' | translate }}
+                    <template [ngTemplateOutlet]="templateRef"
+                        [ngTemplateOutletContext]="{key: UserSearchKey.USERSEARCHKEY_FIRST_NAME}"></template>
+                </th>
                 <td mat-cell *matCellDef="let user"> {{user[userType]?.firstName}} </td>
             </ng-container>
 
             <ng-container matColumnDef="lastname">
-                <th mat-header-cell *matHeaderCellDef> {{ 'USER.PROFILE.LASTNAME' | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef
+                    [ngClass]="{'search-active': this.userSearchKey == UserSearchKey.USERSEARCHKEY_LAST_NAME}">
+                    {{ 'USER.PROFILE.LASTNAME' | translate }}
+                    <template [ngTemplateOutlet]="templateRef"
+                        [ngTemplateOutletContext]="{key: UserSearchKey.USERSEARCHKEY_LAST_NAME}"></template>
+                </th>
                 <td mat-cell *matCellDef="let user"> {{user[userType]?.lastName}} </td>
             </ng-container>
 
+            <ng-container matColumnDef="displayName">
+                <th mat-header-cell *matHeaderCellDef
+                    [ngClass]="{'search-active': this.userSearchKey == UserSearchKey.USERSEARCHKEY_DISPLAY_NAME}">
+                    {{ 'USER.PROFILE.DISPLAYNAME' | translate }}
+                    <template [ngTemplateOutlet]="templateRef"
+                        [ngTemplateOutletContext]="{key: UserSearchKey.USERSEARCHKEY_DISPLAY_NAME}"></template>
+                </th>
+                <td mat-cell *matCellDef="let user"> {{user[userType]?.displayName}} </td>
+            </ng-container>
+
             <ng-container matColumnDef="name">
-                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.NAME' | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef>
+                    {{ 'USER.MACHINE.NAME' | translate }}
+                </th>
                 <td mat-cell *matCellDef="let user"> {{user[userType]?.name}} </td>
             </ng-container>
 
@@ -56,12 +84,22 @@
             </ng-container>
 
             <ng-container matColumnDef="username">
-                <th mat-header-cell *matHeaderCellDef> {{ 'USER.PROFILE.USERNAME' | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef
+                    [ngClass]="{'search-active': this.userSearchKey == UserSearchKey.USERSEARCHKEY_USER_NAME}">
+                    {{ 'USER.PROFILE.USERNAME' | translate }}
+                    <template [ngTemplateOutlet]="templateRef"
+                        [ngTemplateOutletContext]="{key: UserSearchKey.USERSEARCHKEY_USER_NAME}"></template>
+                </th>
                 <td mat-cell *matCellDef="let user"> {{user.userName}} </td>
             </ng-container>
 
             <ng-container matColumnDef="email">
-                <th mat-header-cell *matHeaderCellDef> {{ 'USER.EMAIL' | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef
+                    [ngClass]="{'search-active': this.userSearchKey == UserSearchKey.USERSEARCHKEY_EMAIL}">
+                    {{ 'USER.EMAIL' | translate }}
+                    <template [ngTemplateOutlet]="templateRef"
+                        [ngTemplateOutletContext]="{key: UserSearchKey.USERSEARCHKEY_EMAIL}"></template>
+                </th>
                 <td mat-cell *matCellDef="let user"> {{user[userType]?.email}} </td>
             </ng-container>
             <ng-container matColumnDef="state">
@@ -70,7 +108,7 @@
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
+            <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"
                 [routerLink]="row.id ? ['/users', row.id ]: null">
             </tr>
 
@@ -78,4 +116,11 @@
         <mat-paginator #paginator class="paginator" [length]="userResult?.totalResult || 0" [pageSize]="10"
             [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
     </div>
-</app-refresh-table>
\ No newline at end of file
+</app-refresh-table>
+
+<ng-template #templateRef let-key="key">
+    <button class="search-button" mat-icon-button (click)="setFilter(key)">
+        <mat-icon *ngIf="this.userSearchKey != key">search</mat-icon>
+        <mat-icon *ngIf="this.userSearchKey == key">search_off</mat-icon>
+    </button>
+</ng-template>
\ No newline at end of file
diff --git a/console/src/app/pages/users/user-list/user-table/user-table.component.scss b/console/src/app/pages/users/user-list/user-table/user-table.component.scss
index 073164988..514a2294f 100644
--- a/console/src/app/pages/users/user-list/user-table/user-table.component.scss
+++ b/console/src/app/pages/users/user-list/user-table/user-table.component.scss
@@ -19,14 +19,6 @@
         padding-right: 0;
       }
     }
-
-    .data-row {
-      cursor: pointer;
-
-      &:hover {
-        background-color: #ffffff05;
-      }
-    }
   }
 }
 
@@ -34,6 +26,19 @@ tr {
   outline: none;
 }
 
-.add-button {
-  border-radius: .5rem;
+th {
+  .search-button {
+    visibility: hidden;
+  }
+
+  &:hover,
+  &.search-active {
+    .search-button {
+      visibility: visible;
+    }
+  }
+}
+
+.filtername {
+  margin: 0 1rem;
 }
diff --git a/console/src/app/pages/users/user-list/user-table/user-table.component.ts b/console/src/app/pages/users/user-list/user-table/user-table.component.ts
index 39e8f8608..8c3cd7d00 100644
--- a/console/src/app/pages/users/user-list/user-table/user-table.component.ts
+++ b/console/src/app/pages/users/user-list/user-table/user-table.component.ts
@@ -4,6 +4,7 @@ import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
 import { TranslateService } from '@ngx-translate/core';
 import { BehaviorSubject, Observable } from 'rxjs';
+import { enterAnimations } from 'src/app/animations';
 import { UserView } from 'src/app/proto/generated/auth_pb';
 import { SearchMethod, UserSearchKey, UserSearchQuery, UserSearchResponse } from 'src/app/proto/generated/management_pb';
 import { ManagementService } from 'src/app/services/mgmt.service';
@@ -15,8 +16,12 @@ import { UserType } from '../user-list.component';
     selector: 'app-user-table',
     templateUrl: './user-table.component.html',
     styleUrls: ['./user-table.component.scss'],
+    animations: [
+        enterAnimations,
+    ],
 })
 export class UserTableComponent implements OnInit {
+    public userSearchKey: UserSearchKey | undefined = undefined;
     public UserType: any = UserType;
     @Input() userType: UserType = UserType.HUMAN;
     @Input() refreshOnPreviousRoute: string = '';
@@ -27,10 +32,10 @@ export class UserTableComponent implements OnInit {
     public userResult!: UserSearchResponse.AsObject;
     private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
     public loading$: Observable<boolean> = this.loadingSubject.asObservable();
-    @Input() public displayedColumns: string[] = ['select', 'firstname', 'lastname', 'username', 'email', 'state'];
+    @Input() public displayedColumns: string[] = ['select', /*'firstname', 'lastname' ,*/ 'displayName', 'username', 'email', 'state'];
 
     @Output() public changedSelection: EventEmitter<Array<UserView.AsObject>> = new EventEmitter();
-
+    UserSearchKey: any = UserSearchKey;
     constructor(public translate: TranslateService, private userService: ManagementService,
         private toast: ToastService) {
         this.selection.changed.subscribe(() => {
@@ -77,14 +82,22 @@ export class UserTableComponent implements OnInit {
         });
     }
 
-    private async getData(limit: number, offset: number, filterTypeValue: UserType): Promise<void> {
+    private async getData(limit: number, offset: number, filterTypeValue: UserType, filterName?: string): Promise<void> {
         this.loadingSubject.next(true);
         const query = new UserSearchQuery();
         query.setKey(UserSearchKey.USERSEARCHKEY_TYPE);
         query.setMethod(SearchMethod.SEARCHMETHOD_EQUALS);
         query.setValue(filterTypeValue);
 
-        this.userService.SearchUsers(limit, offset, [query]).then(resp => {
+        let namequery;
+        if (filterName && this.userSearchKey !== undefined) {
+            namequery = new UserSearchQuery();
+            namequery.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS_IGNORE_CASE);
+            namequery.setKey(this.userSearchKey);
+            namequery.setValue(filterName.toLowerCase());
+        }
+
+        this.userService.SearchUsers(limit, offset, namequery ? [query, namequery] : [query]).then(resp => {
             this.userResult = resp.toObject();
             this.dataSource.data = this.userResult.resultList;
             this.loadingSubject.next(false);
@@ -97,4 +110,23 @@ export class UserTableComponent implements OnInit {
     public refreshPage(): void {
         this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize, this.userType);
     }
+
+    public applyFilter(event: Event): void {
+        const filterValue = (event.target as HTMLInputElement).value;
+        this.getData(
+            this.paginator.pageSize,
+            this.paginator.pageIndex * this.paginator.pageSize,
+            this.userType,
+            filterValue,
+        );
+    }
+
+    public setFilter(key: UserSearchKey): void {
+        if (this.userSearchKey !== key) {
+            this.userSearchKey = key;
+        } else {
+            this.userSearchKey = undefined;
+            this.refreshPage();
+        }
+    }
 }
diff --git a/console/src/app/services/admin.service.ts b/console/src/app/services/admin.service.ts
index d4b292510..c4482f003 100644
--- a/console/src/app/services/admin.service.ts
+++ b/console/src/app/services/admin.service.ts
@@ -37,8 +37,8 @@ import {
     ViewID,
     Views,
 } from '../proto/generated/admin_pb';
+import { IdpUpdate } from '../proto/generated/management_pb';
 import { GrpcService } from './grpc.service';
-import {IdpUpdate} from '../proto/generated/management_pb';
 
 @Injectable({
     providedIn: 'root',
@@ -46,7 +46,7 @@ import {IdpUpdate} from '../proto/generated/management_pb';
 export class AdminService {
     constructor(private readonly grpcService: GrpcService) { }
 
-    public async SetUpOrg(
+    public SetUpOrg(
         createOrgRequest: CreateOrgRequest,
         humanRequest: CreateHumanRequest,
     ): Promise<OrgSetUpResponse> {
@@ -61,29 +61,29 @@ export class AdminService {
         return this.grpcService.admin.setUpOrg(req);
     }
 
-    public async GetIamMemberRoles(): Promise<IamMemberRoles> {
+    public GetIamMemberRoles(): Promise<IamMemberRoles> {
         const req = new Empty();
         return this.grpcService.admin.getIamMemberRoles(req);
     }
 
-    public async GetViews(): Promise<Views> {
+    public GetViews(): Promise<Views> {
         const req = new Empty();
         return this.grpcService.admin.getViews(req);
     }
 
-    public async GetFailedEvents(): Promise<FailedEvents> {
+    public GetFailedEvents(): Promise<FailedEvents> {
         const req = new Empty();
         return this.grpcService.admin.getFailedEvents(req);
     }
 
-    public async ClearView(viewname: string, db: string): Promise<Empty> {
+    public ClearView(viewname: string, db: string): Promise<Empty> {
         const req: ViewID = new ViewID();
         req.setDatabase(db);
         req.setViewName(viewname);
         return this.grpcService.admin.clearView(req);
     }
 
-    public async RemoveFailedEvent(viewname: string, db: string, sequence: number): Promise<Empty> {
+    public RemoveFailedEvent(viewname: string, db: string, sequence: number): Promise<Empty> {
         const req: FailedEventID = new FailedEventID();
         req.setDatabase(db);
         req.setViewName(viewname);
@@ -91,29 +91,29 @@ export class AdminService {
         return this.grpcService.admin.removeFailedEvent(req);
     }
 
-    public async GetDefaultLoginPolicy(
+    public GetDefaultLoginPolicy(
     ): Promise<DefaultLoginPolicyView> {
         const req = new Empty();
         return this.grpcService.admin.getDefaultLoginPolicy(req);
     }
 
-    public async UpdateDefaultLoginPolicy(req: DefaultLoginPolicy): Promise<DefaultLoginPolicy> {
+    public UpdateDefaultLoginPolicy(req: DefaultLoginPolicy): Promise<DefaultLoginPolicy> {
         return this.grpcService.admin.updateDefaultLoginPolicy(req);
     }
 
-    public async AddIdpProviderToDefaultLoginPolicy(configId: string): Promise<IdpProviderID> {
+    public AddIdpProviderToDefaultLoginPolicy(configId: string): Promise<IdpProviderID> {
         const req = new IdpProviderID();
         req.setIdpConfigId(configId);
         return this.grpcService.admin.addIdpProviderToDefaultLoginPolicy(req);
     }
 
-    public async RemoveIdpProviderFromDefaultLoginPolicy(configId: string): Promise<Empty> {
+    public RemoveIdpProviderFromDefaultLoginPolicy(configId: string): Promise<Empty> {
         const req = new IdpProviderID();
         req.setIdpConfigId(configId);
         return this.grpcService.admin.removeIdpProviderFromDefaultLoginPolicy(req);
     }
 
-    public async GetDefaultLoginPolicyIdpProviders(limit?: number, offset?: number): Promise<IdpProviderSearchResponse> {
+    public GetDefaultLoginPolicyIdpProviders(limit?: number, offset?: number): Promise<IdpProviderSearchResponse> {
         const req = new IdpProviderSearchRequest();
         if (limit) {
             req.setLimit(limit);
@@ -124,7 +124,7 @@ export class AdminService {
         return this.grpcService.admin.getDefaultLoginPolicyIdpProviders(req);
     }
 
-    public async SearchIdps(
+    public SearchIdps(
         limit?: number,
         offset?: number,
         queryList?: IdpSearchQuery[],
@@ -142,7 +142,7 @@ export class AdminService {
         return this.grpcService.admin.searchIdps(req);
     }
 
-    public async IdpByID(
+    public IdpByID(
         id: string,
     ): Promise<IdpView> {
         const req = new IdpID();
@@ -150,25 +150,25 @@ export class AdminService {
         return this.grpcService.admin.idpByID(req);
     }
 
-    public async UpdateIdp(
-      req: IdpUpdate,
+    public UpdateIdp(
+        req: IdpUpdate,
     ): Promise<Idp> {
-      return this.grpcService.admin.updateIdpConfig(req);
+        return this.grpcService.admin.updateIdpConfig(req);
     }
 
-    public async CreateOidcIdp(
+    public CreateOidcIdp(
         req: OidcIdpConfigCreate,
     ): Promise<Idp> {
         return this.grpcService.admin.createOidcIdp(req);
     }
 
-    public async UpdateOidcIdpConfig(
+    public UpdateOidcIdpConfig(
         req: OidcIdpConfigUpdate,
     ): Promise<OidcIdpConfig> {
         return this.grpcService.admin.updateOidcIdpConfig(req);
     }
 
-    public async RemoveIdpConfig(
+    public RemoveIdpConfig(
         id: string,
     ): Promise<Empty> {
         const req = new IdpID;
@@ -176,7 +176,7 @@ export class AdminService {
         return this.grpcService.admin.removeIdpConfig(req);
     }
 
-    public async DeactivateIdpConfig(
+    public DeactivateIdpConfig(
         id: string,
     ): Promise<Empty> {
         const req = new IdpID;
@@ -184,7 +184,7 @@ export class AdminService {
         return this.grpcService.admin.deactivateIdpConfig(req);
     }
 
-    public async ReactivateIdpConfig(
+    public ReactivateIdpConfig(
         id: string,
     ): Promise<Empty> {
         const req = new IdpID;
@@ -192,7 +192,7 @@ export class AdminService {
         return this.grpcService.admin.reactivateIdpConfig(req);
     }
 
-    public async SearchIamMembers(
+    public SearchIamMembers(
         limit: number,
         offset: number,
         queryList?: IamMemberSearchQuery[],
@@ -206,7 +206,7 @@ export class AdminService {
         return this.grpcService.admin.searchIamMembers(req);
     }
 
-    public async RemoveIamMember(
+    public RemoveIamMember(
         userId: string,
     ): Promise<Empty> {
         const req = new RemoveIamMemberRequest();
@@ -215,7 +215,7 @@ export class AdminService {
         return this.grpcService.admin.removeIamMember(req);
     }
 
-    public async AddIamMember(
+    public AddIamMember(
         userId: string,
         rolesList: string[],
     ): Promise<IamMember> {
@@ -226,7 +226,7 @@ export class AdminService {
         return this.grpcService.admin.addIamMember(req);
     }
 
-    public async ChangeIamMember(
+    public ChangeIamMember(
         userId: string,
         rolesList: string[],
     ): Promise<IamMember> {
@@ -237,14 +237,14 @@ export class AdminService {
         return this.grpcService.admin.changeIamMember(req);
     }
 
-    public async GetOrgIamPolicy(orgId: string): Promise<OrgIamPolicy> {
+    public GetOrgIamPolicy(orgId: string): Promise<OrgIamPolicy> {
         const req = new OrgIamPolicyID();
         req.setOrgId(orgId);
 
         return this.grpcService.admin.getOrgIamPolicy(req);
     }
 
-    public async CreateOrgIamPolicy(
+    public CreateOrgIamPolicy(
         orgId: string,
         description: string,
         userLoginMustBeDomain: boolean): Promise<OrgIamPolicy> {
@@ -256,7 +256,7 @@ export class AdminService {
         return this.grpcService.admin.createOrgIamPolicy(req);
     }
 
-    public async UpdateOrgIamPolicy(
+    public UpdateOrgIamPolicy(
         orgId: string,
         description: string,
         userLoginMustBeDomain: boolean): Promise<OrgIamPolicy> {
@@ -267,7 +267,7 @@ export class AdminService {
         return this.grpcService.admin.updateOrgIamPolicy(req);
     }
 
-    public async deleteOrgIamPolicy(
+    public deleteOrgIamPolicy(
         orgId: string,
     ): Promise<Empty> {
         const req = new OrgIamPolicyID();
diff --git a/console/src/app/services/grpc-auth.service.ts b/console/src/app/services/grpc-auth.service.ts
index 29e96e817..3b471e14c 100644
--- a/console/src/app/services/grpc-auth.service.ts
+++ b/console/src/app/services/grpc-auth.service.ts
@@ -7,6 +7,7 @@ import { catchError, filter, finalize, first, map, mergeMap, switchMap, take, ti
 import {
     Changes,
     ChangesRequest,
+    ExternalIDPRemoveRequest,
     ExternalIDPSearchRequest,
     ExternalIDPSearchResponse,
     Gender,
@@ -163,29 +164,29 @@ export class GrpcAuthService {
         }) > -1;
     }
 
-    public async GetMyUserProfile(): Promise<UserProfileView> {
+    public GetMyUserProfile(): Promise<UserProfileView> {
         return this.grpcService.auth.getMyUserProfile(new Empty());
     }
 
-    public async GetMyPasswordComplexityPolicy(): Promise<PasswordComplexityPolicy> {
+    public GetMyPasswordComplexityPolicy(): Promise<PasswordComplexityPolicy> {
         return this.grpcService.auth.getMyPasswordComplexityPolicy(
             new Empty(),
         );
     }
 
-    public async GetMyUser(): Promise<UserView> {
+    public GetMyUser(): Promise<UserView> {
         return this.grpcService.auth.getMyUser(
             new Empty(),
         );
     }
 
-    public async GetMyMfas(): Promise<MultiFactors> {
+    public GetMyMfas(): Promise<MultiFactors> {
         return this.grpcService.auth.getMyMfas(
             new Empty(),
         );
     }
 
-    public async SearchMyProjectOrgs(
+    public SearchMyProjectOrgs(
         limit: number,
         offset: number,
         queryList?: MyProjectOrgSearchQuery[],
@@ -200,7 +201,7 @@ export class GrpcAuthService {
         return this.grpcService.auth.searchMyProjectOrgs(req);
     }
 
-    public async SaveMyUserProfile(
+    public SaveMyUserProfile(
         firstName?: string,
         lastName?: string,
         nickName?: string,
@@ -230,76 +231,84 @@ export class GrpcAuthService {
         return this.zitadelPermissions;
     }
 
-    public async getMyUserSessions(): Promise<UserSessionViews> {
+    public getMyUserSessions(): Promise<UserSessionViews> {
         return this.grpcService.auth.getMyUserSessions(
             new Empty(),
         );
     }
 
-    public async GetMyUserEmail(): Promise<UserEmail> {
+    public GetMyUserEmail(): Promise<UserEmail> {
         return this.grpcService.auth.getMyUserEmail(
             new Empty(),
         );
     }
 
-    public async SaveMyUserEmail(email: string): Promise<UserEmail> {
+    public SaveMyUserEmail(email: string): Promise<UserEmail> {
         const req = new UpdateUserEmailRequest();
         req.setEmail(email);
         return this.grpcService.auth.changeMyUserEmail(req);
     }
 
-    public async RemoveMyUserPhone(): Promise<Empty> {
+    public RemoveMyUserPhone(): Promise<Empty> {
         return this.grpcService.auth.removeMyUserPhone(
             new Empty(),
         );
     }
 
-    public async GetMyzitadelPermissions(): Promise<MyPermissions> {
+    public GetMyzitadelPermissions(): Promise<MyPermissions> {
         return this.grpcService.auth.getMyZitadelPermissions(
             new Empty(),
         );
     }
 
-    public async GetMyUserPhone(): Promise<UserPhone> {
+    public GetMyUserPhone(): Promise<UserPhone> {
         return this.grpcService.auth.getMyUserPhone(
             new Empty(),
         );
     }
 
-    public async SaveMyUserPhone(phone: string): Promise<UserPhone> {
+    public SaveMyUserPhone(phone: string): Promise<UserPhone> {
         const req = new UpdateUserPhoneRequest();
         req.setPhone(phone);
         return this.grpcService.auth.changeMyUserPhone(req);
     }
 
-    public async GetMyUserAddress(): Promise<UserAddress> {
+    public GetMyUserAddress(): Promise<UserAddress> {
         return this.grpcService.auth.getMyUserAddress(
             new Empty(),
         );
     }
 
-    public async ResendEmailVerification(): Promise<Empty> {
+    public ResendEmailVerification(): Promise<Empty> {
         const req = new Empty();
         return this.grpcService.auth.resendMyEmailVerificationMail(req);
     }
 
-    public async ResendPhoneVerification(): Promise<Empty> {
+    public ResendPhoneVerification(): Promise<Empty> {
         const req = new Empty();
         return this.grpcService.auth.resendMyPhoneVerificationCode(req);
     }
 
-    public async ChangeMyPassword(oldPassword: string, newPassword: string): Promise<Empty> {
+    public ChangeMyPassword(oldPassword: string, newPassword: string): Promise<Empty> {
         const req = new PasswordChange();
         req.setOldPassword(oldPassword);
         req.setNewPassword(newPassword);
         return this.grpcService.auth.changeMyPassword(req);
     }
 
-    public async SearchExternalIdps(
-        userId: string,
+    public RemoveExternalIDP(
+        externalUserId: string,
+        idpConfigId: string,
+    ): Promise<Empty> {
+        const req = new ExternalIDPRemoveRequest();
+        req.setExternalUserId(externalUserId);
+        req.setIdpConfigId(idpConfigId);
+        return this.grpcService.auth.removeMyExternalIDP(req);
+    }
+
+    public SearchMyExternalIdps(
         limit: number,
         offset: number,
-        asc?: boolean,
     ): Promise<ExternalIDPSearchResponse> {
         const req = new ExternalIDPSearchRequest();
         req.setLimit(limit);
@@ -307,31 +316,31 @@ export class GrpcAuthService {
         return this.grpcService.auth.searchMyExternalIDPs(req);
     }
 
-    public async AddMfaOTP(): Promise<MfaOtpResponse> {
+    public AddMfaOTP(): Promise<MfaOtpResponse> {
         return this.grpcService.auth.addMfaOTP(
             new Empty(),
         );
     }
 
-    public async RemoveMfaOTP(): Promise<Empty> {
+    public RemoveMfaOTP(): Promise<Empty> {
         return this.grpcService.auth.removeMfaOTP(
             new Empty(),
         );
     }
 
-    public async VerifyMfaOTP(code: string): Promise<Empty> {
+    public VerifyMfaOTP(code: string): Promise<Empty> {
         const req = new VerifyMfaOtp();
         req.setCode(code);
         return this.grpcService.auth.verifyMfaOTP(req);
     }
 
-    public async VerifyMyUserPhone(code: string): Promise<Empty> {
+    public VerifyMyUserPhone(code: string): Promise<Empty> {
         const req = new VerifyUserPhoneRequest();
         req.setCode(code);
         return this.grpcService.auth.verifyMyUserPhone(req);
     }
 
-    public async SaveMyUserAddress(address: UserAddress.AsObject): Promise<UserAddress> {
+    public SaveMyUserAddress(address: UserAddress.AsObject): Promise<UserAddress> {
         const req = new UpdateUserAddressRequest();
         req.setStreetAddress(address.streetAddress);
         req.setPostalCode(address.postalCode);
@@ -341,7 +350,7 @@ export class GrpcAuthService {
         return this.grpcService.auth.updateMyUserAddress(req);
     }
 
-    public async GetMyUserChanges(limit: number, sequenceoffset: number): Promise<Changes> {
+    public GetMyUserChanges(limit: number, sequenceoffset: number): Promise<Changes> {
         const req = new ChangesRequest();
         req.setLimit(limit);
         req.setSequenceOffset(sequenceoffset);
diff --git a/console/src/app/services/interceptors/auth.interceptor.ts b/console/src/app/services/interceptors/auth.interceptor.ts
index 972591d54..f60939842 100644
--- a/console/src/app/services/interceptors/auth.interceptor.ts
+++ b/console/src/app/services/interceptors/auth.interceptor.ts
@@ -1,57 +1,57 @@
-import { Injectable } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
-import { Request, UnaryInterceptor, UnaryResponse } from 'grpc-web';
-import { filter, first, take } from 'rxjs/operators';
-import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
-
-import { AuthenticationService } from '../authentication.service';
-import { StorageService } from '../storage.service';
-
-
-const authorizationKey = 'Authorization';
-const bearerPrefix = 'Bearer';
-const accessTokenStorageKey = 'access_token';
-@Injectable({ providedIn: 'root' })
-/**
- * Set the authentication token
- */
-export class AuthInterceptor<TReq = unknown, TResp = unknown> implements UnaryInterceptor<TReq, TResp> {
-    constructor(
-        private authenticationService: AuthenticationService,
-        private storageService: StorageService,
-        private dialog: MatDialog,
-    ) { }
-
-    public async intercept(request: Request<TReq, TResp>, invoker: any): Promise<UnaryResponse<TReq, TResp>> {
-        await this.authenticationService.authenticationChanged.pipe(
-            filter((authed) => !!authed),
-            first(),
-        ).toPromise();
-
-        const metadata = request.getMetadata();
-        const accessToken = this.storageService.getItem(accessTokenStorageKey);
-        metadata[authorizationKey] = `${bearerPrefix} ${accessToken}`;
-
-        return invoker(request).then((response: any) => {
-            return response;
-        }).catch((error: any) => {
-            console.error('error: ', error);
-            if (error.code === 16) {
-                const dialogRef = this.dialog.open(WarnDialogComponent, {
-                    data: {
-                        confirmKey: 'ACTIONS.LOGIN',
-                        titleKey: 'ERRORS.TOKENINVALID.TITLE',
-                        descriptionKey: 'ERRORS.TOKENINVALID.DESCRIPTION',
-                    },
-                    width: '400px',
-                });
-
-                dialogRef.afterClosed().pipe(take(1)).subscribe(resp => {
-                    if (resp) {
-                        this.authenticationService.authenticate(undefined, true, true);
-                    }
-                });
-            }
-        });
-    }
-}
+import { Injectable } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { Request, UnaryInterceptor, UnaryResponse } from 'grpc-web';
+import { filter, first, take } from 'rxjs/operators';
+import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
+
+import { AuthenticationService } from '../authentication.service';
+import { StorageService } from '../storage.service';
+
+
+const authorizationKey = 'Authorization';
+const bearerPrefix = 'Bearer';
+const accessTokenStorageKey = 'access_token';
+@Injectable({ providedIn: 'root' })
+/**
+ * Set the authentication token
+ */
+export class AuthInterceptor<TReq = unknown, TResp = unknown> implements UnaryInterceptor<TReq, TResp> {
+    constructor(
+        private authenticationService: AuthenticationService,
+        private storageService: StorageService,
+        private dialog: MatDialog,
+    ) { }
+
+    public async intercept(request: Request<TReq, TResp>, invoker: any): Promise<UnaryResponse<TReq, TResp>> {
+        await this.authenticationService.authenticationChanged.pipe(
+            filter((authed) => !!authed),
+            first(),
+        ).toPromise();
+
+        const metadata = request.getMetadata();
+        const accessToken = this.storageService.getItem(accessTokenStorageKey);
+        metadata[authorizationKey] = `${bearerPrefix} ${accessToken}`;
+
+        return invoker(request).then((response: any) => {
+            return response;
+        }).catch((error: any) => {
+            if (error.code === 16) {
+                const dialogRef = this.dialog.open(WarnDialogComponent, {
+                    data: {
+                        confirmKey: 'ACTIONS.LOGIN',
+                        titleKey: 'ERRORS.TOKENINVALID.TITLE',
+                        descriptionKey: 'ERRORS.TOKENINVALID.DESCRIPTION',
+                    },
+                    width: '400px',
+                });
+
+                dialogRef.afterClosed().pipe(take(1)).subscribe(resp => {
+                    if (resp) {
+                        this.authenticationService.authenticate(undefined, true, true);
+                    }
+                });
+            }
+            return Promise.reject(error);
+        });
+    }
+}
diff --git a/console/src/app/services/mgmt.service.ts b/console/src/app/services/mgmt.service.ts
index 3f72ae3c0..3eceaced6 100644
--- a/console/src/app/services/mgmt.service.ts
+++ b/console/src/app/services/mgmt.service.ts
@@ -3,154 +3,157 @@ import { Empty } from 'google-protobuf/google/protobuf/empty_pb';
 import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
 
 import {
-  AddMachineKeyRequest,
-  AddMachineKeyResponse,
-  AddOrgDomainRequest,
-  AddOrgMemberRequest,
-  Application,
-  ApplicationID,
-  ApplicationSearchQuery,
-  ApplicationSearchRequest,
-  ApplicationSearchResponse,
-  ApplicationUpdate,
-  ApplicationView,
-  ChangeOrgMemberRequest,
-  ChangeRequest,
-  Changes,
-  CreateHumanRequest,
-  CreateMachineRequest,
-  CreateUserRequest,
-  Domain, ExternalIDPSearchRequest, ExternalIDPSearchResponse,
-  Gender,
-  GrantedProjectSearchRequest,
-  Iam,
-  Idp,
-  IdpID,
-  IdpUpdate,
-  IdpProviderAdd,
-  IdpProviderID,
-  IdpProviderSearchRequest,
-  IdpProviderSearchResponse,
-  IdpProviderType,
-  IdpSearchQuery,
-  IdpSearchRequest,
-  IdpSearchResponse,
-  IdpView,
-  LoginName,
-  LoginPolicy,
-  LoginPolicyView,
-  MachineKeyIDRequest,
-  MachineKeySearchRequest,
-  MachineKeySearchResponse,
-  MachineKeyType,
-  MachineResponse,
-  MultiFactors,
-  NotificationType,
-  OIDCApplicationCreate,
-  OIDCConfig,
-  OIDCConfigUpdate,
-  OidcIdpConfig,
-  OidcIdpConfigCreate,
-  OidcIdpConfigUpdate,
-  Org,
-  OrgCreateRequest,
-  OrgDomain,
-  OrgDomainSearchQuery,
-  OrgDomainSearchRequest,
-  OrgDomainSearchResponse,
-  OrgDomainValidationRequest,
-  OrgDomainValidationResponse,
-  OrgDomainValidationType,
-  OrgIamPolicy,
-  OrgMember,
-  OrgMemberRoles,
-  OrgMemberSearchRequest,
-  OrgMemberSearchResponse,
-  OrgView,
-  PasswordAgePolicy,
-  PasswordAgePolicyCreate,
-  PasswordAgePolicyID,
-  PasswordAgePolicyUpdate,
-  PasswordComplexityPolicy,
-  PasswordComplexityPolicyCreate,
-  PasswordComplexityPolicyID,
-  PasswordComplexityPolicyUpdate,
-  PasswordLockoutPolicy,
-  PasswordLockoutPolicyCreate,
-  PasswordLockoutPolicyID,
-  PasswordLockoutPolicyUpdate,
-  PasswordRequest,
-  PrimaryOrgDomainRequest,
-  Project,
-  ProjectCreateRequest,
-  ProjectGrant,
-  ProjectGrantCreate,
-  ProjectGrantID,
-  ProjectGrantMember,
-  ProjectGrantMemberAdd,
-  ProjectGrantMemberChange,
-  ProjectGrantMemberRemove,
-  ProjectGrantMemberRoles,
-  ProjectGrantMemberSearchQuery,
-  ProjectGrantMemberSearchRequest,
-  ProjectGrantSearchRequest,
-  ProjectGrantSearchResponse,
-  ProjectGrantUpdate,
-  ProjectGrantView,
-  ProjectID,
-  ProjectMember,
-  ProjectMemberAdd,
-  ProjectMemberChange,
-  ProjectMemberRemove,
-  ProjectMemberRoles,
-  ProjectMemberSearchQuery,
-  ProjectMemberSearchRequest,
-  ProjectMemberSearchResponse,
-  ProjectRole,
-  ProjectRoleAdd,
-  ProjectRoleAddBulk,
-  ProjectRoleChange,
-  ProjectRoleRemove,
-  ProjectRoleSearchQuery,
-  ProjectRoleSearchRequest,
-  ProjectRoleSearchResponse,
-  ProjectSearchQuery,
-  ProjectSearchRequest,
-  ProjectSearchResponse,
-  ProjectUpdateRequest,
-  ProjectView,
-  RemoveOrgDomainRequest,
-  RemoveOrgMemberRequest,
-  SetPasswordNotificationRequest,
-  UpdateMachineRequest,
-  UpdateUserAddressRequest,
-  UpdateUserEmailRequest,
-  UpdateUserPhoneRequest,
-  UpdateUserProfileRequest,
-  UserAddress,
-  UserEmail,
-  UserGrant,
-  UserGrantCreate,
-  UserGrantID,
-  UserGrantRemoveBulk,
-  UserGrantSearchQuery,
-  UserGrantSearchRequest,
-  UserGrantSearchResponse,
-  UserGrantUpdate,
-  UserGrantView,
-  UserID,
-  UserMembershipSearchQuery,
-  UserMembershipSearchRequest,
-  UserMembershipSearchResponse,
-  UserPhone,
-  UserProfile,
-  UserResponse,
-  UserSearchQuery,
-  UserSearchRequest,
-  UserSearchResponse,
-  UserView,
-  ValidateOrgDomainRequest,
-  ZitadelDocs,
+    AddMachineKeyRequest,
+    AddMachineKeyResponse,
+    AddOrgDomainRequest,
+    AddOrgMemberRequest,
+    Application,
+    ApplicationID,
+    ApplicationSearchQuery,
+    ApplicationSearchRequest,
+    ApplicationSearchResponse,
+    ApplicationUpdate,
+    ApplicationView,
+    ChangeOrgMemberRequest,
+    ChangeRequest,
+    Changes,
+    CreateHumanRequest,
+    CreateMachineRequest,
+    CreateUserRequest,
+    Domain,
+    ExternalIDPRemoveRequest,
+    ExternalIDPSearchRequest,
+    ExternalIDPSearchResponse,
+    Gender,
+    GrantedProjectSearchRequest,
+    Iam,
+    Idp,
+    IdpID,
+    IdpProviderAdd,
+    IdpProviderID,
+    IdpProviderSearchRequest,
+    IdpProviderSearchResponse,
+    IdpProviderType,
+    IdpSearchQuery,
+    IdpSearchRequest,
+    IdpSearchResponse,
+    IdpUpdate,
+    IdpView,
+    LoginName,
+    LoginPolicy,
+    LoginPolicyView,
+    MachineKeyIDRequest,
+    MachineKeySearchRequest,
+    MachineKeySearchResponse,
+    MachineKeyType,
+    MachineResponse,
+    MultiFactors,
+    NotificationType,
+    OIDCApplicationCreate,
+    OIDCConfig,
+    OIDCConfigUpdate,
+    OidcIdpConfig,
+    OidcIdpConfigCreate,
+    OidcIdpConfigUpdate,
+    Org,
+    OrgCreateRequest,
+    OrgDomain,
+    OrgDomainSearchQuery,
+    OrgDomainSearchRequest,
+    OrgDomainSearchResponse,
+    OrgDomainValidationRequest,
+    OrgDomainValidationResponse,
+    OrgDomainValidationType,
+    OrgIamPolicy,
+    OrgMember,
+    OrgMemberRoles,
+    OrgMemberSearchRequest,
+    OrgMemberSearchResponse,
+    OrgView,
+    PasswordAgePolicy,
+    PasswordAgePolicyCreate,
+    PasswordAgePolicyID,
+    PasswordAgePolicyUpdate,
+    PasswordComplexityPolicy,
+    PasswordComplexityPolicyCreate,
+    PasswordComplexityPolicyID,
+    PasswordComplexityPolicyUpdate,
+    PasswordLockoutPolicy,
+    PasswordLockoutPolicyCreate,
+    PasswordLockoutPolicyID,
+    PasswordLockoutPolicyUpdate,
+    PasswordRequest,
+    PrimaryOrgDomainRequest,
+    Project,
+    ProjectCreateRequest,
+    ProjectGrant,
+    ProjectGrantCreate,
+    ProjectGrantID,
+    ProjectGrantMember,
+    ProjectGrantMemberAdd,
+    ProjectGrantMemberChange,
+    ProjectGrantMemberRemove,
+    ProjectGrantMemberRoles,
+    ProjectGrantMemberSearchQuery,
+    ProjectGrantMemberSearchRequest,
+    ProjectGrantSearchRequest,
+    ProjectGrantSearchResponse,
+    ProjectGrantUpdate,
+    ProjectGrantView,
+    ProjectID,
+    ProjectMember,
+    ProjectMemberAdd,
+    ProjectMemberChange,
+    ProjectMemberRemove,
+    ProjectMemberRoles,
+    ProjectMemberSearchQuery,
+    ProjectMemberSearchRequest,
+    ProjectMemberSearchResponse,
+    ProjectRole,
+    ProjectRoleAdd,
+    ProjectRoleAddBulk,
+    ProjectRoleChange,
+    ProjectRoleRemove,
+    ProjectRoleSearchQuery,
+    ProjectRoleSearchRequest,
+    ProjectRoleSearchResponse,
+    ProjectSearchQuery,
+    ProjectSearchRequest,
+    ProjectSearchResponse,
+    ProjectUpdateRequest,
+    ProjectView,
+    RemoveOrgDomainRequest,
+    RemoveOrgMemberRequest,
+    SetPasswordNotificationRequest,
+    UpdateMachineRequest,
+    UpdateUserAddressRequest,
+    UpdateUserEmailRequest,
+    UpdateUserPhoneRequest,
+    UpdateUserProfileRequest,
+    UserAddress,
+    UserEmail,
+    UserGrant,
+    UserGrantCreate,
+    UserGrantID,
+    UserGrantRemoveBulk,
+    UserGrantSearchQuery,
+    UserGrantSearchRequest,
+    UserGrantSearchResponse,
+    UserGrantUpdate,
+    UserGrantView,
+    UserID,
+    UserMembershipSearchQuery,
+    UserMembershipSearchRequest,
+    UserMembershipSearchResponse,
+    UserPhone,
+    UserProfile,
+    UserResponse,
+    UserSearchQuery,
+    UserSearchRequest,
+    UserSearchResponse,
+    UserView,
+    ValidateOrgDomainRequest,
+    ZitadelDocs,
 } from '../proto/generated/management_pb';
 import { GrpcService } from './grpc.service';
 
@@ -162,7 +165,7 @@ export type ResponseMapper<TResp, TMappedResp> = (resp: TResp) => TMappedResp;
 export class ManagementService {
     constructor(private readonly grpcService: GrpcService) { }
 
-    public async SearchIdps(
+    public SearchIdps(
         limit?: number,
         offset?: number,
         queryList?: IdpSearchQuery[],
@@ -180,33 +183,33 @@ export class ManagementService {
         return this.grpcService.mgmt.searchIdps(req);
     }
 
-    public async GetLoginPolicy(): Promise<LoginPolicyView> {
+    public GetLoginPolicy(): Promise<LoginPolicyView> {
         const req = new Empty();
         return this.grpcService.mgmt.getLoginPolicy(req);
     }
 
-    public async UpdateLoginPolicy(req: LoginPolicy): Promise<LoginPolicy> {
+    public UpdateLoginPolicy(req: LoginPolicy): Promise<LoginPolicy> {
         return this.grpcService.mgmt.updateLoginPolicy(req);
     }
 
-    public async RemoveLoginPolicy(): Promise<Empty> {
+    public RemoveLoginPolicy(): Promise<Empty> {
         return this.grpcService.mgmt.removeLoginPolicy(new Empty());
     }
 
-    public async addIdpProviderToLoginPolicy(configId: string, idpType: IdpProviderType): Promise<IdpProviderID> {
+    public addIdpProviderToLoginPolicy(configId: string, idpType: IdpProviderType): Promise<IdpProviderID> {
         const req = new IdpProviderAdd();
         req.setIdpProviderType(idpType);
         req.setIdpConfigId(configId);
         return this.grpcService.mgmt.addIdpProviderToLoginPolicy(req);
     }
 
-    public async RemoveIdpProviderFromLoginPolicy(configId: string): Promise<Empty> {
+    public RemoveIdpProviderFromLoginPolicy(configId: string): Promise<Empty> {
         const req = new IdpProviderID();
         req.setIdpConfigId(configId);
         return this.grpcService.mgmt.removeIdpProviderFromLoginPolicy(req);
     }
 
-    public async GetLoginPolicyIdpProviders(limit?: number, offset?: number): Promise<IdpProviderSearchResponse> {
+    public GetLoginPolicyIdpProviders(limit?: number, offset?: number): Promise<IdpProviderSearchResponse> {
         const req = new IdpProviderSearchRequest();
         if (limit) {
             req.setLimit(limit);
@@ -217,7 +220,7 @@ export class ManagementService {
         return this.grpcService.mgmt.getLoginPolicyIdpProviders(req);
     }
 
-    public async IdpByID(
+    public IdpByID(
         id: string,
     ): Promise<IdpView> {
         const req = new IdpID();
@@ -225,25 +228,25 @@ export class ManagementService {
         return this.grpcService.mgmt.idpByID(req);
     }
 
-    public async UpdateIdp(
-      req: IdpUpdate,
+    public UpdateIdp(
+        req: IdpUpdate,
     ): Promise<Idp> {
-      return this.grpcService.mgmt.updateIdpConfig(req);
+        return this.grpcService.mgmt.updateIdpConfig(req);
     }
 
-    public async CreateOidcIdp(
+    public CreateOidcIdp(
         req: OidcIdpConfigCreate,
     ): Promise<Idp> {
         return this.grpcService.mgmt.createOidcIdp(req);
     }
 
-    public async UpdateOidcIdpConfig(
+    public UpdateOidcIdpConfig(
         req: OidcIdpConfigUpdate,
     ): Promise<OidcIdpConfig> {
         return this.grpcService.mgmt.updateOidcIdpConfig(req);
     }
 
-    public async RemoveIdpConfig(
+    public RemoveIdpConfig(
         id: string,
     ): Promise<Empty> {
         const req = new IdpID;
@@ -251,7 +254,7 @@ export class ManagementService {
         return this.grpcService.mgmt.removeIdpConfig(req);
     }
 
-    public async DeactivateIdpConfig(
+    public DeactivateIdpConfig(
         id: string,
     ): Promise<Empty> {
         const req = new IdpID;
@@ -259,7 +262,7 @@ export class ManagementService {
         return this.grpcService.mgmt.deactivateIdpConfig(req);
     }
 
-    public async ReactivateIdpConfig(
+    public ReactivateIdpConfig(
         id: string,
     ): Promise<Empty> {
         const req = new IdpID;
@@ -267,7 +270,7 @@ export class ManagementService {
         return this.grpcService.mgmt.reactivateIdpConfig(req);
     }
 
-    public async CreateUserHuman(username: string, user: CreateHumanRequest): Promise<UserResponse> {
+    public CreateUserHuman(username: string, user: CreateHumanRequest): Promise<UserResponse> {
         const req = new CreateUserRequest();
 
         req.setUserName(username);
@@ -276,7 +279,7 @@ export class ManagementService {
         return this.grpcService.mgmt.createUser(req);
     }
 
-    public async CreateUserMachine(username: string, user: CreateMachineRequest): Promise<UserResponse> {
+    public CreateUserMachine(username: string, user: CreateMachineRequest): Promise<UserResponse> {
         const req = new CreateUserRequest();
 
         req.setUserName(username);
@@ -285,7 +288,7 @@ export class ManagementService {
         return this.grpcService.mgmt.createUser(req);
     }
 
-    public async UpdateUserMachine(
+    public UpdateUserMachine(
         id: string,
         description?: string,
     ): Promise<MachineResponse> {
@@ -297,7 +300,7 @@ export class ManagementService {
         return this.grpcService.mgmt.updateUserMachine(req);
     }
 
-    public async AddMachineKey(
+    public AddMachineKey(
         userId: string,
         type: MachineKeyType,
         date?: Timestamp,
@@ -311,7 +314,7 @@ export class ManagementService {
         return this.grpcService.mgmt.addMachineKey(req);
     }
 
-    public async DeleteMachineKey(
+    public DeleteMachineKey(
         keyId: string,
         userId: string,
     ): Promise<Empty> {
@@ -322,7 +325,7 @@ export class ManagementService {
         return this.grpcService.mgmt.deleteMachineKey(req);
     }
 
-    public async SearchMachineKeys(
+    public SearchMachineKeys(
         userId: string,
         limit: number,
         offset: number,
@@ -338,46 +341,58 @@ export class ManagementService {
         return this.grpcService.mgmt.searchMachineKeys(req);
     }
 
-    public async SearchExternalIdps(
-      userId: string,
-      limit: number,
-      offset: number,
-      asc?: boolean,
-    ): Promise<ExternalIDPSearchResponse> {
-      const req = new ExternalIDPSearchRequest();
-      req.setUserId(userId);
-      req.setLimit(limit);
-      req.setOffset(offset);
-      return this.grpcService.mgmt.searchUserExternalIDPs(req);
+    public RemoveExternalIDP(
+        externalUserId: string,
+        idpConfigId: string,
+        userId: string,
+    ): Promise<Empty> {
+        const req = new ExternalIDPRemoveRequest();
+        req.setUserId(userId);
+        req.setExternalUserId(externalUserId);
+        req.setIdpConfigId(idpConfigId);
+        return this.grpcService.mgmt.removeExternalIDP(req);
     }
-    public async GetIam(): Promise<Iam> {
+
+    public SearchUserExternalIDPs(
+        limit: number,
+        offset: number,
+        userId: string,
+    ): Promise<ExternalIDPSearchResponse> {
+        const req = new ExternalIDPSearchRequest();
+        req.setUserId(userId);
+        req.setLimit(limit);
+        req.setOffset(offset);
+        return this.grpcService.mgmt.searchUserExternalIDPs(req);
+    }
+
+    public GetIam(): Promise<Iam> {
         const req = new Empty();
         return this.grpcService.mgmt.getIam(req);
     }
 
-    public async GetDefaultPasswordComplexityPolicy(): Promise<PasswordComplexityPolicy> {
+    public GetDefaultPasswordComplexityPolicy(): Promise<PasswordComplexityPolicy> {
         const req = new Empty();
         return this.grpcService.mgmt.getDefaultPasswordComplexityPolicy(req);
     }
 
-    public async GetMyOrg(): Promise<OrgView> {
+    public GetMyOrg(): Promise<OrgView> {
         const req = new Empty();
         return this.grpcService.mgmt.getMyOrg(req);
     }
 
-    public async AddMyOrgDomain(domain: string): Promise<OrgDomain> {
+    public AddMyOrgDomain(domain: string): Promise<OrgDomain> {
         const req: AddOrgDomainRequest = new AddOrgDomainRequest();
         req.setDomain(domain);
         return this.grpcService.mgmt.addMyOrgDomain(req);
     }
 
-    public async RemoveMyOrgDomain(domain: string): Promise<Empty> {
+    public RemoveMyOrgDomain(domain: string): Promise<Empty> {
         const req: RemoveOrgDomainRequest = new AddOrgDomainRequest();
         req.setDomain(domain);
         return this.grpcService.mgmt.removeMyOrgDomain(req);
     }
 
-    public async SearchMyOrgDomains(offset: number, limit: number, queryList?: OrgDomainSearchQuery[]):
+    public SearchMyOrgDomains(offset: number, limit: number, queryList?: OrgDomainSearchQuery[]):
         Promise<OrgDomainSearchResponse> {
         const req: OrgDomainSearchRequest = new OrgDomainSearchRequest();
         req.setLimit(limit);
@@ -389,13 +404,13 @@ export class ManagementService {
         return this.grpcService.mgmt.searchMyOrgDomains(req);
     }
 
-    public async setMyPrimaryOrgDomain(domain: string): Promise<Empty> {
+    public setMyPrimaryOrgDomain(domain: string): Promise<Empty> {
         const req: PrimaryOrgDomainRequest = new PrimaryOrgDomainRequest();
         req.setDomain(domain);
         return this.grpcService.mgmt.setMyPrimaryOrgDomain(req);
     }
 
-    public async GenerateMyOrgDomainValidation(domain: string, type: OrgDomainValidationType):
+    public GenerateMyOrgDomainValidation(domain: string, type: OrgDomainValidationType):
         Promise<OrgDomainValidationResponse> {
         const req: OrgDomainValidationRequest = new OrgDomainValidationRequest();
         req.setDomain(domain);
@@ -404,7 +419,7 @@ export class ManagementService {
         return this.grpcService.mgmt.generateMyOrgDomainValidation(req);
     }
 
-    public async ValidateMyOrgDomain(domain: string):
+    public ValidateMyOrgDomain(domain: string):
         Promise<Empty> {
         const req: ValidateOrgDomainRequest = new ValidateOrgDomainRequest();
         req.setDomain(domain);
@@ -412,26 +427,26 @@ export class ManagementService {
         return this.grpcService.mgmt.validateMyOrgDomain(req);
     }
 
-    public async SearchMyOrgMembers(limit: number, offset: number): Promise<OrgMemberSearchResponse> {
+    public SearchMyOrgMembers(limit: number, offset: number): Promise<OrgMemberSearchResponse> {
         const req = new OrgMemberSearchRequest();
         req.setLimit(limit);
         req.setOffset(offset);
         return this.grpcService.mgmt.searchMyOrgMembers(req);
     }
 
-    public async getOrgByDomainGlobal(domain: string): Promise<Org> {
+    public getOrgByDomainGlobal(domain: string): Promise<Org> {
         const req = new Domain();
         req.setDomain(domain);
         return this.grpcService.mgmt.getOrgByDomainGlobal(req);
     }
 
-    public async CreateOrg(name: string): Promise<Org> {
+    public CreateOrg(name: string): Promise<Org> {
         const req = new OrgCreateRequest();
         req.setName(name);
         return this.grpcService.mgmt.createOrg(req);
     }
 
-    public async AddMyOrgMember(userId: string, rolesList: string[]): Promise<Empty> {
+    public AddMyOrgMember(userId: string, rolesList: string[]): Promise<Empty> {
         const req = new AddOrgMemberRequest();
         req.setUserId(userId);
         if (rolesList) {
@@ -440,7 +455,7 @@ export class ManagementService {
         return this.grpcService.mgmt.addMyOrgMember(req);
     }
 
-    public async ChangeMyOrgMember(userId: string, rolesList: string[]): Promise<OrgMember> {
+    public ChangeMyOrgMember(userId: string, rolesList: string[]): Promise<OrgMember> {
         const req = new ChangeOrgMemberRequest();
         req.setUserId(userId);
         req.setRolesList(rolesList);
@@ -448,23 +463,23 @@ export class ManagementService {
     }
 
 
-    public async RemoveMyOrgMember(userId: string): Promise<Empty> {
+    public RemoveMyOrgMember(userId: string): Promise<Empty> {
         const req = new RemoveOrgMemberRequest();
         req.setUserId(userId);
         return this.grpcService.mgmt.removeMyOrgMember(req);
     }
 
-    public async DeactivateMyOrg(): Promise<Org> {
+    public DeactivateMyOrg(): Promise<Org> {
         const req = new Empty();
         return this.grpcService.mgmt.deactivateMyOrg(req);
     }
 
-    public async ReactivateMyOrg(): Promise<Org> {
+    public ReactivateMyOrg(): Promise<Org> {
         const req = new Empty();
         return this.grpcService.mgmt.reactivateMyOrg(req);
     }
 
-    public async CreateProjectGrant(
+    public CreateProjectGrant(
         orgId: string,
         projectId: string,
         roleKeysList: string[],
@@ -476,25 +491,25 @@ export class ManagementService {
         return this.grpcService.mgmt.createProjectGrant(req);
     }
 
-    public async GetOrgMemberRoles(): Promise<OrgMemberRoles> {
+    public GetOrgMemberRoles(): Promise<OrgMemberRoles> {
         const req = new Empty();
         return this.grpcService.mgmt.getOrgMemberRoles(req);
     }
 
     // Policy
 
-    public async GetMyOrgIamPolicy(): Promise<OrgIamPolicy> {
+    public GetMyOrgIamPolicy(): Promise<OrgIamPolicy> {
         const req = new Empty();
         return this.grpcService.mgmt.getMyOrgIamPolicy(req);
     }
 
-    public async GetPasswordAgePolicy(): Promise<PasswordAgePolicy> {
+    public GetPasswordAgePolicy(): Promise<PasswordAgePolicy> {
         const req = new Empty();
 
         return this.grpcService.mgmt.getPasswordAgePolicy(req);
     }
 
-    public async CreatePasswordAgePolicy(
+    public CreatePasswordAgePolicy(
         description: string,
         maxAgeDays: number,
         expireWarnDays: number,
@@ -507,13 +522,13 @@ export class ManagementService {
         return this.grpcService.mgmt.createPasswordAgePolicy(req);
     }
 
-    public async DeletePasswordAgePolicy(id: string): Promise<Empty> {
+    public DeletePasswordAgePolicy(id: string): Promise<Empty> {
         const req = new PasswordAgePolicyID();
         req.setId(id);
         return this.grpcService.mgmt.deletePasswordAgePolicy(req);
     }
 
-    public async UpdatePasswordAgePolicy(
+    public UpdatePasswordAgePolicy(
         description: string,
         maxAgeDays: number,
         expireWarnDays: number,
@@ -525,12 +540,12 @@ export class ManagementService {
         return this.grpcService.mgmt.updatePasswordAgePolicy(req);
     }
 
-    public async GetPasswordComplexityPolicy(): Promise<PasswordComplexityPolicy> {
+    public GetPasswordComplexityPolicy(): Promise<PasswordComplexityPolicy> {
         const req = new Empty();
         return this.grpcService.mgmt.getPasswordComplexityPolicy(req);
     }
 
-    public async CreatePasswordComplexityPolicy(
+    public CreatePasswordComplexityPolicy(
         description: string,
         hasLowerCase: boolean,
         hasUpperCase: boolean,
@@ -548,13 +563,13 @@ export class ManagementService {
         return this.grpcService.mgmt.createPasswordComplexityPolicy(req);
     }
 
-    public async DeletePasswordComplexityPolicy(id: string): Promise<Empty> {
+    public DeletePasswordComplexityPolicy(id: string): Promise<Empty> {
         const req = new PasswordComplexityPolicyID();
         req.setId(id);
         return this.grpcService.mgmt.deletePasswordComplexityPolicy(req);
     }
 
-    public async UpdatePasswordComplexityPolicy(
+    public UpdatePasswordComplexityPolicy(
         description: string,
         hasLowerCase: boolean,
         hasUpperCase: boolean,
@@ -572,13 +587,13 @@ export class ManagementService {
         return this.grpcService.mgmt.updatePasswordComplexityPolicy(req);
     }
 
-    public async GetPasswordLockoutPolicy(): Promise<PasswordLockoutPolicy> {
+    public GetPasswordLockoutPolicy(): Promise<PasswordLockoutPolicy> {
         const req = new Empty();
 
         return this.grpcService.mgmt.getPasswordLockoutPolicy(req);
     }
 
-    public async CreatePasswordLockoutPolicy(
+    public CreatePasswordLockoutPolicy(
         description: string,
         maxAttempts: number,
         showLockoutFailures: boolean,
@@ -591,14 +606,14 @@ export class ManagementService {
         return this.grpcService.mgmt.createPasswordLockoutPolicy(req);
     }
 
-    public async DeletePasswordLockoutPolicy(id: string): Promise<Empty> {
+    public DeletePasswordLockoutPolicy(id: string): Promise<Empty> {
         const req = new PasswordLockoutPolicyID();
         req.setId(id);
 
         return this.grpcService.mgmt.deletePasswordLockoutPolicy(req);
     }
 
-    public async UpdatePasswordLockoutPolicy(
+    public UpdatePasswordLockoutPolicy(
         description: string,
         maxAttempts: number,
         showLockoutFailures: boolean,
@@ -622,13 +637,13 @@ export class ManagementService {
         }
     }
 
-    public async GetUserByID(id: string): Promise<UserView> {
+    public GetUserByID(id: string): Promise<UserView> {
         const req = new UserID();
         req.setId(id);
         return this.grpcService.mgmt.getUserByID(req);
     }
 
-    public async SearchProjectMembers(
+    public SearchProjectMembers(
         projectId: string,
         limit: number,
         offset: number,
@@ -644,7 +659,7 @@ export class ManagementService {
         return this.grpcService.mgmt.searchProjectMembers(req);
     }
 
-    public async SearchUserMemberships(userId: string,
+    public SearchUserMemberships(userId: string,
         limit: number, offset: number, queryList?: UserMembershipSearchQuery[]): Promise<UserMembershipSearchResponse> {
         const req = new UserMembershipSearchRequest();
         req.setLimit(limit);
@@ -656,19 +671,19 @@ export class ManagementService {
         return this.grpcService.mgmt.searchUserMemberships(req);
     }
 
-    public async GetUserProfile(id: string): Promise<UserProfile> {
+    public GetUserProfile(id: string): Promise<UserProfile> {
         const req = new UserID();
         req.setId(id);
         return this.grpcService.mgmt.getUserProfile(req);
     }
 
-    public async getUserMfas(id: string): Promise<MultiFactors> {
+    public getUserMfas(id: string): Promise<MultiFactors> {
         const req = new UserID();
         req.setId(id);
         return this.grpcService.mgmt.getUserMfas(req);
     }
 
-    public async SaveUserProfile(
+    public SaveUserProfile(
         id: string,
         firstName?: string,
         lastName?: string,
@@ -696,45 +711,45 @@ export class ManagementService {
         return this.grpcService.mgmt.updateUserProfile(req);
     }
 
-    public async GetUserEmail(id: string): Promise<UserEmail> {
+    public GetUserEmail(id: string): Promise<UserEmail> {
         const req = new UserID();
         req.setId(id);
         return this.grpcService.mgmt.getUserEmail(req);
     }
 
-    public async SaveUserEmail(id: string, email: string): Promise<UserEmail> {
+    public SaveUserEmail(id: string, email: string): Promise<UserEmail> {
         const req = new UpdateUserEmailRequest();
         req.setId(id);
         req.setEmail(email);
         return this.grpcService.mgmt.changeUserEmail(req);
     }
 
-    public async GetUserPhone(id: string): Promise<UserPhone> {
+    public GetUserPhone(id: string): Promise<UserPhone> {
         const req = new UserID();
         req.setId(id);
         return this.grpcService.mgmt.getUserPhone(req);
     }
 
-    public async SaveUserPhone(id: string, phone: string): Promise<UserPhone> {
+    public SaveUserPhone(id: string, phone: string): Promise<UserPhone> {
         const req = new UpdateUserPhoneRequest();
         req.setId(id);
         req.setPhone(phone);
         return this.grpcService.mgmt.changeUserPhone(req);
     }
 
-    public async RemoveUserPhone(id: string): Promise<Empty> {
+    public RemoveUserPhone(id: string): Promise<Empty> {
         const req = new UserID();
         req.setId(id);
         return this.grpcService.mgmt.removeUserPhone(req);
     }
 
-    public async DeactivateUser(id: string): Promise<UserResponse> {
+    public DeactivateUser(id: string): Promise<UserResponse> {
         const req = new UserID();
         req.setId(id);
         return this.grpcService.mgmt.deactivateUser(req);
     }
 
-    public async CreateUserGrant(
+    public CreateUserGrant(
         userId: string,
         roleNamesList: string[],
         projectId?: string,
@@ -749,13 +764,13 @@ export class ManagementService {
         return this.grpcService.mgmt.createUserGrant(req);
     }
 
-    public async ReactivateUser(id: string): Promise<UserResponse> {
+    public ReactivateUser(id: string): Promise<UserResponse> {
         const req = new UserID();
         req.setId(id);
         return this.grpcService.mgmt.reactivateUser(req);
     }
 
-    public async AddRole(id: string, key: string, displayName: string, group: string): Promise<Empty> {
+    public AddRole(id: string, key: string, displayName: string, group: string): Promise<Empty> {
         const req = new ProjectRoleAdd();
         req.setId(id);
         req.setKey(key);
@@ -766,39 +781,39 @@ export class ManagementService {
         return this.grpcService.mgmt.addProjectRole(req);
     }
 
-    public async GetUserAddress(id: string): Promise<UserAddress> {
+    public GetUserAddress(id: string): Promise<UserAddress> {
         const req = new UserID();
         req.setId(id);
         return this.grpcService.mgmt.getUserAddress(req);
     }
 
-    public async ResendEmailVerification(id: string): Promise<any> {
+    public ResendEmailVerification(id: string): Promise<any> {
         const req = new UserID();
         req.setId(id);
         return this.grpcService.mgmt.resendEmailVerificationMail(req);
     }
 
-    public async ResendPhoneVerification(id: string): Promise<any> {
+    public ResendPhoneVerification(id: string): Promise<any> {
         const req = new UserID();
         req.setId(id);
         return this.grpcService.mgmt.resendPhoneVerificationCode(req);
     }
 
-    public async SetInitialPassword(id: string, password: string): Promise<any> {
+    public SetInitialPassword(id: string, password: string): Promise<any> {
         const req = new PasswordRequest();
         req.setId(id);
         req.setPassword(password);
         return this.grpcService.mgmt.setInitialPassword(req);
     }
 
-    public async SendSetPasswordNotification(id: string, type: NotificationType): Promise<any> {
+    public SendSetPasswordNotification(id: string, type: NotificationType): Promise<any> {
         const req = new SetPasswordNotificationRequest();
         req.setId(id);
         req.setType(type);
         return this.grpcService.mgmt.sendSetPasswordNotification(req);
     }
 
-    public async SaveUserAddress(address: UserAddress.AsObject): Promise<UserAddress> {
+    public SaveUserAddress(address: UserAddress.AsObject): Promise<UserAddress> {
         const req = new UpdateUserAddressRequest();
         req.setId(address.id);
         req.setStreetAddress(address.streetAddress);
@@ -809,7 +824,7 @@ export class ManagementService {
         return this.grpcService.mgmt.updateUserAddress(req);
     }
 
-    public async SearchUsers(limit: number, offset: number, queryList?: UserSearchQuery[]): Promise<UserSearchResponse> {
+    public SearchUsers(limit: number, offset: number, queryList?: UserSearchQuery[]): Promise<UserSearchResponse> {
         const req = new UserSearchRequest();
         req.setLimit(limit);
         req.setOffset(offset);
@@ -819,7 +834,7 @@ export class ManagementService {
         return this.grpcService.mgmt.searchUsers(req);
     }
 
-    public async GetUserByLoginNameGlobal(loginname: string): Promise<UserView> {
+    public GetUserByLoginNameGlobal(loginname: string): Promise<UserView> {
         const req = new LoginName();
         req.setLoginName(loginname);
         return this.grpcService.mgmt.getUserByLoginNameGlobal(req);
@@ -827,7 +842,7 @@ export class ManagementService {
 
     // USER GRANTS
 
-    public async SearchUserGrants(
+    public SearchUserGrants(
         limit: number,
         offset: number,
         queryList?: UserGrantSearchQuery[],
@@ -842,7 +857,7 @@ export class ManagementService {
     }
 
 
-    public async UserGrantByID(
+    public UserGrantByID(
         id: string,
         userId: string,
     ): Promise<UserGrantView> {
@@ -853,7 +868,7 @@ export class ManagementService {
         return this.grpcService.mgmt.userGrantByID(req);
     }
 
-    public async UpdateUserGrant(
+    public UpdateUserGrant(
         id: string,
         userId: string,
         roleKeysList: string[],
@@ -866,7 +881,7 @@ export class ManagementService {
         return this.grpcService.mgmt.updateUserGrant(req);
     }
 
-    public async RemoveUserGrant(
+    public RemoveUserGrant(
         id: string,
         userId: string,
     ): Promise<Empty> {
@@ -877,7 +892,7 @@ export class ManagementService {
         return this.grpcService.mgmt.removeUserGrant(req);
     }
 
-    public async BulkRemoveUserGrant(
+    public BulkRemoveUserGrant(
         idsList: string[],
     ): Promise<Empty> {
         const req = new UserGrantRemoveBulk();
@@ -888,7 +903,7 @@ export class ManagementService {
 
     //
 
-    public async ApplicationChanges(id: string, limit: number, offset: number): Promise<Changes> {
+    public ApplicationChanges(id: string, limit: number, offset: number): Promise<Changes> {
         const req = new ChangeRequest();
         req.setId(id);
         req.setLimit(limit);
@@ -896,7 +911,7 @@ export class ManagementService {
         return this.grpcService.mgmt.applicationChanges(req);
     }
 
-    public async OrgChanges(id: string, limit: number, offset: number): Promise<Changes> {
+    public OrgChanges(id: string, limit: number, offset: number): Promise<Changes> {
         const req = new ChangeRequest();
         req.setId(id);
         req.setLimit(limit);
@@ -904,7 +919,7 @@ export class ManagementService {
         return this.grpcService.mgmt.orgChanges(req);
     }
 
-    public async ProjectChanges(id: string, limit: number, offset: number): Promise<Changes> {
+    public ProjectChanges(id: string, limit: number, offset: number): Promise<Changes> {
         const req = new ChangeRequest();
         req.setId(id);
         req.setLimit(limit);
@@ -912,7 +927,7 @@ export class ManagementService {
         return this.grpcService.mgmt.projectChanges(req);
     }
 
-    public async UserChanges(id: string, limit: number, sequenceoffset: number): Promise<Changes> {
+    public UserChanges(id: string, limit: number, sequenceoffset: number): Promise<Changes> {
         const req = new ChangeRequest();
         req.setId(id);
         req.setLimit(limit);
@@ -922,7 +937,7 @@ export class ManagementService {
 
     // project
 
-    public async SearchProjects(
+    public SearchProjects(
         limit: number, offset: number, queryList?: ProjectSearchQuery[]): Promise<ProjectSearchResponse> {
         const req = new ProjectSearchRequest();
         req.setLimit(limit);
@@ -933,7 +948,7 @@ export class ManagementService {
         return this.grpcService.mgmt.searchProjects(req);
     }
 
-    public async SearchGrantedProjects(
+    public SearchGrantedProjects(
         limit: number, offset: number, queryList?: ProjectSearchQuery[]): Promise<ProjectGrantSearchResponse> {
         const req = new GrantedProjectSearchRequest();
         req.setLimit(limit);
@@ -945,38 +960,38 @@ export class ManagementService {
     }
 
 
-    public async GetZitadelDocs(): Promise<ZitadelDocs> {
+    public GetZitadelDocs(): Promise<ZitadelDocs> {
         const req = new Empty();
         return this.grpcService.mgmt.getZitadelDocs(req);
     }
 
-    public async GetProjectById(projectId: string): Promise<ProjectView> {
+    public GetProjectById(projectId: string): Promise<ProjectView> {
         const req = new ProjectID();
         req.setId(projectId);
         return this.grpcService.mgmt.projectByID(req);
     }
 
-    public async GetGrantedProjectByID(projectId: string, id: string): Promise<ProjectGrantView> {
+    public GetGrantedProjectByID(projectId: string, id: string): Promise<ProjectGrantView> {
         const req = new ProjectGrantID();
         req.setId(id);
         req.setProjectId(projectId);
         return this.grpcService.mgmt.getGrantedProjectByID(req);
     }
 
-    public async CreateProject(project: ProjectCreateRequest.AsObject): Promise<Project> {
+    public CreateProject(project: ProjectCreateRequest.AsObject): Promise<Project> {
         const req = new ProjectCreateRequest();
         req.setName(project.name);
         return this.grpcService.mgmt.createProject(req);
     }
 
-    public async UpdateProject(id: string, name: string): Promise<Project> {
+    public UpdateProject(id: string, name: string): Promise<Project> {
         const req = new ProjectUpdateRequest();
         req.setName(name);
         req.setId(id);
         return this.grpcService.mgmt.updateProject(req);
     }
 
-    public async UpdateProjectGrant(id: string, projectId: string, rolesList: string[]): Promise<ProjectGrant> {
+    public UpdateProjectGrant(id: string, projectId: string, rolesList: string[]): Promise<ProjectGrant> {
         const req = new ProjectGrantUpdate();
         req.setRoleKeysList(rolesList);
         req.setId(id);
@@ -984,26 +999,26 @@ export class ManagementService {
         return this.grpcService.mgmt.updateProjectGrant(req);
     }
 
-    public async RemoveProjectGrant(id: string, projectId: string): Promise<Empty> {
+    public RemoveProjectGrant(id: string, projectId: string): Promise<Empty> {
         const req = new ProjectGrantID();
         req.setId(id);
         req.setProjectId(projectId);
         return this.grpcService.mgmt.removeProjectGrant(req);
     }
 
-    public async DeactivateProject(projectId: string): Promise<Project> {
+    public DeactivateProject(projectId: string): Promise<Project> {
         const req = new ProjectID();
         req.setId(projectId);
         return this.grpcService.mgmt.deactivateProject(req);
     }
 
-    public async ReactivateProject(projectId: string): Promise<Project> {
+    public ReactivateProject(projectId: string): Promise<Project> {
         const req = new ProjectID();
         req.setId(projectId);
         return this.grpcService.mgmt.reactivateProject(req);
     }
 
-    public async SearchProjectGrants(projectId: string, limit: number, offset: number): Promise<ProjectGrantSearchResponse> {
+    public SearchProjectGrants(projectId: string, limit: number, offset: number): Promise<ProjectGrantSearchResponse> {
         const req = new ProjectGrantSearchRequest();
         req.setProjectId(projectId);
         req.setLimit(limit);
@@ -1011,12 +1026,12 @@ export class ManagementService {
         return this.grpcService.mgmt.searchProjectGrants(req);
     }
 
-    public async GetProjectGrantMemberRoles(): Promise<ProjectGrantMemberRoles> {
+    public GetProjectGrantMemberRoles(): Promise<ProjectGrantMemberRoles> {
         const req = new Empty();
         return this.grpcService.mgmt.getProjectGrantMemberRoles(req);
     }
 
-    public async AddProjectMember(id: string, userId: string, rolesList: string[]): Promise<Empty> {
+    public AddProjectMember(id: string, userId: string, rolesList: string[]): Promise<Empty> {
         const req = new ProjectMemberAdd();
         req.setId(id);
         req.setUserId(userId);
@@ -1024,7 +1039,7 @@ export class ManagementService {
         return this.grpcService.mgmt.addProjectMember(req);
     }
 
-    public async ChangeProjectMember(id: string, userId: string, rolesList: string[]): Promise<ProjectMember> {
+    public ChangeProjectMember(id: string, userId: string, rolesList: string[]): Promise<ProjectMember> {
         const req = new ProjectMemberChange();
         req.setId(id);
         req.setUserId(userId);
@@ -1032,7 +1047,7 @@ export class ManagementService {
         return this.grpcService.mgmt.changeProjectMember(req);
     }
 
-    public async AddProjectGrantMember(
+    public AddProjectGrantMember(
         projectId: string,
         grantId: string,
         userId: string,
@@ -1046,7 +1061,7 @@ export class ManagementService {
         return this.grpcService.mgmt.addProjectGrantMember(req);
     }
 
-    public async ChangeProjectGrantMember(
+    public ChangeProjectGrantMember(
         projectId: string,
         grantId: string,
         userId: string,
@@ -1060,7 +1075,7 @@ export class ManagementService {
         return this.grpcService.mgmt.changeProjectGrantMember(req);
     }
 
-    public async SearchProjectGrantMembers(
+    public SearchProjectGrantMembers(
         projectId: string,
         grantId: string,
         limit: number,
@@ -1078,7 +1093,7 @@ export class ManagementService {
         return this.grpcService.mgmt.searchProjectGrantMembers(req);
     }
 
-    public async RemoveProjectGrantMember(
+    public RemoveProjectGrantMember(
         projectId: string,
         grantId: string,
         userId: string,
@@ -1090,7 +1105,7 @@ export class ManagementService {
         return this.grpcService.mgmt.removeProjectGrantMember(req);
     }
 
-    public async ReactivateApplication(projectId: string, appId: string): Promise<Application> {
+    public ReactivateApplication(projectId: string, appId: string): Promise<Application> {
         const req = new ApplicationID();
         req.setId(appId);
         req.setProjectId(projectId);
@@ -1098,7 +1113,7 @@ export class ManagementService {
         return this.grpcService.mgmt.reactivateApplication(req);
     }
 
-    public async DeactivateApplication(projectId: string, appId: string): Promise<Application> {
+    public DeactivateApplication(projectId: string, appId: string): Promise<Application> {
         const req = new ApplicationID();
         req.setId(appId);
         req.setProjectId(projectId);
@@ -1106,14 +1121,14 @@ export class ManagementService {
         return this.grpcService.mgmt.deactivateApplication(req);
     }
 
-    public async RegenerateOIDCClientSecret(id: string, projectId: string): Promise<any> {
+    public RegenerateOIDCClientSecret(id: string, projectId: string): Promise<any> {
         const req = new ApplicationID();
         req.setId(id);
         req.setProjectId(projectId);
         return this.grpcService.mgmt.regenerateOIDCClientSecret(req);
     }
 
-    public async SearchProjectRoles(
+    public SearchProjectRoles(
         projectId: string,
         limit: number,
         offset: number,
@@ -1129,7 +1144,7 @@ export class ManagementService {
         return this.grpcService.mgmt.searchProjectRoles(req);
     }
 
-    public async AddProjectRole(role: ProjectRoleAdd.AsObject): Promise<Empty> {
+    public AddProjectRole(role: ProjectRoleAdd.AsObject): Promise<Empty> {
         const req = new ProjectRoleAdd();
         req.setId(role.id);
         if (role.displayName) {
@@ -1140,7 +1155,7 @@ export class ManagementService {
         return this.grpcService.mgmt.addProjectRole(req);
     }
 
-    public async BulkAddProjectRole(
+    public BulkAddProjectRole(
         id: string,
         rolesList: ProjectRoleAdd[],
     ): Promise<Empty> {
@@ -1150,7 +1165,7 @@ export class ManagementService {
         return this.grpcService.mgmt.bulkAddProjectRole(req);
     }
 
-    public async RemoveProjectRole(projectId: string, key: string): Promise<Empty> {
+    public RemoveProjectRole(projectId: string, key: string): Promise<Empty> {
         const req = new ProjectRoleRemove();
         req.setId(projectId);
         req.setKey(key);
@@ -1158,7 +1173,7 @@ export class ManagementService {
     }
 
 
-    public async ChangeProjectRole(projectId: string, key: string, displayName: string, group: string):
+    public ChangeProjectRole(projectId: string, key: string, displayName: string, group: string):
         Promise<ProjectRole> {
         const req = new ProjectRoleChange();
         req.setId(projectId);
@@ -1169,14 +1184,14 @@ export class ManagementService {
     }
 
 
-    public async RemoveProjectMember(id: string, userId: string): Promise<Empty> {
+    public RemoveProjectMember(id: string, userId: string): Promise<Empty> {
         const req = new ProjectMemberRemove();
         req.setId(id);
         req.setUserId(userId);
         return this.grpcService.mgmt.removeProjectMember(req);
     }
 
-    public async SearchApplications(
+    public SearchApplications(
         projectId: string,
         limit: number,
         offset: number,
@@ -1191,47 +1206,47 @@ export class ManagementService {
         return this.grpcService.mgmt.searchApplications(req);
     }
 
-    public async GetApplicationById(projectId: string, applicationId: string): Promise<ApplicationView> {
+    public GetApplicationById(projectId: string, applicationId: string): Promise<ApplicationView> {
         const req = new ApplicationID();
         req.setProjectId(projectId);
         req.setId(applicationId);
         return this.grpcService.mgmt.applicationByID(req);
     }
 
-    public async GetProjectMemberRoles(): Promise<ProjectMemberRoles> {
+    public GetProjectMemberRoles(): Promise<ProjectMemberRoles> {
         const req = new Empty();
         return this.grpcService.mgmt.getProjectMemberRoles(req);
     }
 
-    public async ProjectGrantByID(id: string, projectId: string): Promise<ProjectGrantView> {
+    public ProjectGrantByID(id: string, projectId: string): Promise<ProjectGrantView> {
         const req = new ProjectGrantID();
         req.setId(id);
         req.setProjectId(projectId);
         return this.grpcService.mgmt.projectGrantByID(req);
     }
 
-    public async RemoveProject(id: string): Promise<Empty> {
+    public RemoveProject(id: string): Promise<Empty> {
         const req = new ProjectID();
         req.setId(id);
         return this.grpcService.mgmt.removeProject(req);
     }
 
 
-    public async DeactivateProjectGrant(id: string, projectId: string): Promise<ProjectGrant> {
+    public DeactivateProjectGrant(id: string, projectId: string): Promise<ProjectGrant> {
         const req = new ProjectGrantID();
         req.setId(id);
         req.setProjectId(projectId);
         return this.grpcService.mgmt.deactivateProjectGrant(req);
     }
 
-    public async ReactivateProjectGrant(id: string, projectId: string): Promise<ProjectGrant> {
+    public ReactivateProjectGrant(id: string, projectId: string): Promise<ProjectGrant> {
         const req = new ProjectGrantID();
         req.setId(id);
         req.setProjectId(projectId);
         return this.grpcService.mgmt.reactivateProjectGrant(req);
     }
 
-    public async CreateOIDCApp(app: OIDCApplicationCreate.AsObject): Promise<Application> {
+    public CreateOIDCApp(app: OIDCApplicationCreate.AsObject): Promise<Application> {
         const req = new OIDCApplicationCreate();
         req.setProjectId(app.projectId);
         req.setName(app.name);
@@ -1245,7 +1260,7 @@ export class ManagementService {
         return this.grpcService.mgmt.createOIDCApplication(req);
     }
 
-    public async UpdateApplication(projectId: string, appId: string, name: string): Promise<Application> {
+    public UpdateApplication(projectId: string, appId: string, name: string): Promise<Application> {
         const req = new ApplicationUpdate();
         req.setId(appId);
         req.setName(name);
@@ -1253,7 +1268,7 @@ export class ManagementService {
         return this.grpcService.mgmt.updateApplication(req);
     }
 
-    public async UpdateOIDCAppConfig(projectId: string,
+    public UpdateOIDCAppConfig(projectId: string,
         appId: string, oidcConfig: OIDCConfig.AsObject): Promise<OIDCConfig> {
         const req = new OIDCConfigUpdate();
         req.setProjectId(projectId);
diff --git a/console/src/assets/i18n/de.json b/console/src/assets/i18n/de.json
index 55759e914..3759fae0a 100644
--- a/console/src/assets/i18n/de.json
+++ b/console/src/assets/i18n/de.json
@@ -86,7 +86,19 @@
             "COPIED":"In die Zwischenablage kopiert.",
             "NOUSER":"Kein Benutzer",
             "REACTIVATE":"Reaktivieren",
-            "DEACTIVATE":"Deaktivieren"
+            "DEACTIVATE":"Deaktivieren",
+            "FILTER":"Filter"
+        },
+        "TABLE":{
+            "DEACTIVATE":"Deaktivieren",
+            "ACTIVATE":"Aktivieren",
+            "FILTER": {
+                "1":"Nach Username filtern",
+                "2":"Nach Vornamen filtern",
+                "3":"Nach Nachnamen filtern",
+                "5":"Nach Display Namen filtern",
+                "6":"Nach Email filtern"
+            }
         },
         "MFA": {
             "TABLETYPE":"Typ",
@@ -305,7 +317,12 @@
             "SEQUENCE":"Sequenz",
             "TIMESTAMP":"Zeitstempel",
             "ACTIONS":"Aktionen",
-            "CLEAR":"Aufräumen"
+            "CLEAR":"Aufräumen",
+            "CLEARED":"View wurde erfolgreich zurückgesetzt!",
+            "DIALOG": {
+                "VIEW_CLEAR_TITLE": "View zurücksetzen?",
+                "VIEW_CLEAR_DESCRIPTION":"Sie sind im Begriff eine View zu löschen. Durch das Löschen einer View wird ein Prozess gestartet, bei dem Daten für Endbenutzer möglicherweise nicht oder verzügert verfügbar sind. Sind Sie sicher?"
+            }
         },
         "FAILEDEVENTS": {
             "TITLE":"Gescheiterte Events",
@@ -319,6 +336,10 @@
             "DELETE":"Entfernen",
             "DELETESUCCESS":"Gescheiterte Events entfernt."
         },
+        "POLICY": {
+            "TITLE":"Standardrichtlinien für ihre Organisationen",
+            "DESCRIPTION":"Diese Einstellungen können von Organisationen erweitert und/oder verändert werden."
+        },
         "TOAST":{
             "MEMBERREMOVED":"Manager entfernt.",
             "MEMBERSADDED": "Manager hinzugefügt.",
@@ -332,6 +353,10 @@
     },
     "ORG": {
         "PAGES": {
+            "NAME":"Name",
+            "ID":"ID",
+            "FILTER":"Filter",
+            "FILTERPLACEHOLDER":"Filtern Sie nach dem Namen",
             "LIST": "Organisationen",
             "LISTDESCRIPTION":"Wähle eine Organisation aus.",
             "ACTIVE":"Aktiv",
diff --git a/console/src/assets/i18n/en.json b/console/src/assets/i18n/en.json
index 2a544f28a..7e588c49b 100644
--- a/console/src/assets/i18n/en.json
+++ b/console/src/assets/i18n/en.json
@@ -86,7 +86,19 @@
             "COPIED":"Copied to clipboard.",
             "NOUSER":"No associated users.",
             "REACTIVATE":"Reactivate",
-            "DEACTIVATE":"Deactivate"
+            "DEACTIVATE":"Deactivate",
+            "FILTER":"Filter"
+        },
+        "TABLE":{
+            "DEACTIVATE":"Deactivate",
+            "ACTIVATE":"Activate",
+            "FILTER": {
+                "1":"Filter for Username",
+                "2":"filter for Firstname",
+                "3":"filter for Lastname",
+                "5":"filter for DisplayName",
+                "6":"filter for email"
+            }
         },
         "MFA": {
             "TABLETYPE":"Type",
@@ -305,7 +317,12 @@
             "SEQUENCE":"Sequence",
             "TIMESTAMP":"Timestamp",
             "ACTIONS":"Actions",
-            "CLEAR":"Clear"
+            "CLEAR":"Clear",
+            "CLEARED":"View was successfully cleared!",
+            "DIALOG": {
+                "VIEW_CLEAR_TITLE": "Clear View",
+                "VIEW_CLEAR_DESCRIPTION":"You are about to clear a view. Clearing a view creates a process during which data is possibly not available for endusers. Are you really sure?"
+            }
         },
         "FAILEDEVENTS": {
             "TITLE":"Failed Events",
@@ -319,6 +336,10 @@
             "DELETE":"Remove",
             "DELETESUCCESS":"Failed events removed."
         },
+        "POLICY": {
+            "TITLE":"Default policies for organisations",
+            "DESCRIPTION":"These settings can be enhanced and/or customized by registered organisations."
+        },
         "TOAST":{
             "MEMBERREMOVED":"Manager removed.",
             "MEMBERSADDED": "Managers added.",
@@ -332,6 +353,10 @@
     },
     "ORG": {
         "PAGES": {
+            "NAME":"Name",
+            "ID":"ID",
+            "FILTER":"Filter",
+            "FILTERPLACEHOLDER":"Filter for the name",
             "LIST": "Organisations",
             "LISTDESCRIPTION":"Choose an organisation.",
             "ACTIVE":"Active",
diff --git a/console/src/component-themes.scss b/console/src/component-themes.scss
index 11c9c9a64..e7611f44d 100644
--- a/console/src/component-themes.scss
+++ b/console/src/component-themes.scss
@@ -8,6 +8,7 @@
 @import 'src/app/modules/meta-layout/meta';
 @import 'src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-card';
 @import 'src/app/pages/users/user-detail/memberships/memberships.component';
+@import 'src/app/app.component.scss';
 
 @mixin component-themes($theme) {
   @include avatar-theme($theme);
@@ -20,4 +21,5 @@
   @include changes-theme($theme);
   @include meta-theme($theme);
   @include theme-card($theme);
+  @include textvar($theme);
 }
diff --git a/console/src/styles.scss b/console/src/styles.scss
index fbea0a2f1..cfae460d9 100644
--- a/console/src/styles.scss
+++ b/console/src/styles.scss
@@ -152,7 +152,9 @@ $custom-typography:
 @include component-themes($dark-theme);
 @include angular-material-theme($dark-theme);
 
-.mat-dialog-container {
+.mat-dialog-container,
+.mat-raised-button,
+.mat-stroked-button {
   border-radius: .5rem !important;
 }
 
@@ -160,8 +162,6 @@ $custom-typography:
   @include component-themes($light-theme);
   @include angular-material-theme($light-theme);
 
-  color: #202124;
-
   .sidenav,
   .main-container,
   .mat-dialog-container {
diff --git a/console/src/styles/sidenav-list.scss b/console/src/styles/sidenav-list.scss
index e47cbbc15..1bf23ab4f 100644
--- a/console/src/styles/sidenav-list.scss
+++ b/console/src/styles/sidenav-list.scss
@@ -7,18 +7,9 @@
   $primary-color: mat-color($primary, 500);
   $accent-color: mat-color($accent, 500);
   $primary-dark: mat-color($primary, A900);
-  $inverse-color: mat-color($primary, A600);
   $sec-dark: mat-color($primary, A800);
   /* stylelint-enable */
 
-  .mat-menu-item {
-    &.show-all {
-      height: 2rem;
-      line-height: 2rem;
-      color: mat-color($primary, a700);
-    }
-  }
-
   .nav-item {
     color: inherit;
 
diff --git a/console/src/styles/table.scss b/console/src/styles/table.scss
index b6f14c8b0..223ea5e57 100644
--- a/console/src/styles/table.scss
+++ b/console/src/styles/table.scss
@@ -5,6 +5,7 @@
   $primary: map-get($theme, primary);
   $primary-dark: mat-color($primary, A900);
   $secondary-dark: mat-color($primary, A800);
+  $inv-color: mat-color($primary, A600);
   $foreground: map-get($theme, foreground);
 
   .mat-table,
@@ -28,4 +29,17 @@
       padding-bottom: 0;
     }
   }
+
+  tr {
+    cursor: pointer;
+
+    &.highlight {
+      &:hover {
+        td {
+          // TODO: replace with non transparent color so that columns are not getting overlayed colorwise twice
+          background-color: rgba($inv-color, .05);
+        }
+      }
+    }
+  }
 }