diff --git a/console/angular.json b/console/angular.json
index cae11088be..624c368700 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 ccbfadf2c6..acb2ef4e95 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 be75b56295..36c104ab87 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 a5b97c8c3e..f5bf60738c 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 7c01f42b38..62b0f8e60c 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 27d2d5a0b6..b72fe30318 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 deaa9f79e8..2ef92e72a4 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 88ffcc6317..bfc57e76ff 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 677989d7d5..c13ab1c069 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 6258aa6eef..0e1ec3ebf9 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 b5f5c2ce75..f90b8aa3ec 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 642e7535c2..b09e939862 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 deaa9f79e8..2ef92e72a4 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 da449627b8..fc1a780ee5 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 fb97207973..0cfa35ea61 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 ffe5a6aec1..6a35916f92 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 3884c0cd5c..adba0f7aeb 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 3884c0cd5c..adba0f7aeb 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 3884c0cd5c..adba0f7aeb 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 3884c0cd5c..c99cf37f26 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 742237293a..65086ab28f 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 c879898913..6e1f1650b6 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 c34bf09039..4200e417ec 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 8fed3f14b4..922aa5fc0c 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 96a7e7c799..b843150b5f 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 ccc204e3ab..8441bdac98 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 e15f27cf1d..b54fb898ae 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 15c0e1bf73..a300548a94 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 ce7533823b..6ac48cc4fc 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 378da3d6c4..19e5334cf2 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 fcb8c8ce26..73d4d7e648 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 5a2bc04204..fed66762df 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 3ce09d6056..90b2f56950 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 1535341168..aa860c5b2b 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 9c9bd23daf..485990d8c7 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 39a8f5e65b..2412226823 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 8a45da0af9..074e7be296 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 5a2bc04204..fed66762df 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 cf87295f90..66685a5cda 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 da2263578e..2a9613d1d0 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 1365af7071..a9eb778c33 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 91a03f5bc2..48211d84a2 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 7252acecc9..362a1a1b8b 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 9e12e893ed..e36dcd2c43 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 79b45464f0..b0208a2b29 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 d736852fb0..0000000000
--- 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 34c18e2eca..0000000000
--- 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 caa44bc419..0000000000
--- 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 0000000000..31f0b98707
--- /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 0000000000..2dd86decc9
--- /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 0000000000..1b52dcc57a
--- /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 ae133bdf84..9cec585122 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 0000000000..5b545c186e
--- /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 0000000000..b7fa9f12ba
--- /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 87f1d1e8af..5763e60d75 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 b6cb54e69f..0e632b6ce1 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 6e20e7a892..ac0bb1ebd0 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 f7b8a4484d..745c0abec8 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 39a8f5e65b..2412226823 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 a365fadb1d..8304447ced 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 dc7575441f..49645bbeef 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 5665936da3..e8ab3a3fbb 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 5484eab9c5..55d6b74cdb 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 2d30526f8f..92e8f886da 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 069b21ce12..a9b1a25369 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 ccdc523fee..9012cba3ad 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 1919104617..0db3803112 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 1627577384..6db3860602 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 f67ffcee15..72b6668863 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 34075312dd..72be797d2c 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 e0d85e61bd..bd754cd3d9 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 2c39ced120..6c6a4a9ac3 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 5752bf3738..241f4477a3 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 8a61f1ed0b..54bef81225 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 7af6c271d3..11c4bb63e8 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 ad7115290c..53919d7751 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 6d8705b2bb..f767ef9287 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 b9ea8393fd..12c28926cc 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 5b5ba1db07..9ff19a7094 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 e1025a41e0..937d7c4b5d 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 f94201e561..f9301eca51 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 102a272966..3070710ad0 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 86416617c9..70d8fd699d 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 b3ac0b0c95..ce0b8ed026 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 f84c139a62..9f2b0c7ecd 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 23d52737ed..711b44e18e 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 515ec220ba..bea3d95cce 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 95041c53bb..350dc49ff5 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 72a4884113..99a21fd279 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 71b02e2c66..acfbd1e1e2 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 1e3c555a16..4c5f5bbfab 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 1cdd1cec88..6d33551364 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 0731649888..bade0aa759 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 d64e1cd029..7aec1439f7 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 91a03f5bc2..48211d84a2 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 68f6d1b280..30ffa383ec 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 0731649888..bade0aa759 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 b3912e2019..f4ade90762 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 fd2bcf322c..38a6105208 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 348114fa84..6f3cf2fdc2 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 d55544ff7b..367b764660 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 806ffef0e4..a1deba12ec 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 0606ca3fa2..42288edd73 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 1b7ff8db4b..a055b5a220 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 f274b677c0..61c2b662c5 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 859dcbbaca..f9f3159c0a 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 f5ca7e97a8..366f0ebe23 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 0731649888..514a2294f7 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 39e8f86086..8c3cd7d000 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 d4b2925107..c4482f0030 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 29e96e8173..3b471e14ce 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 972591d54a..f609398421 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 3f72ae3c08..3eceaced66 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 55759e9140..3759fae0a4 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 2a544f28a7..7e588c49b4 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 11c9c9a644..e7611f44dd 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 fbea0a2f1e..cfae460d97 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 e47cbbc159..1bf23ab4f3 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 b6f14c8b0b..223ea5e572 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);
+        }
+      }
+    }
+  }
 }