From 0a488eb1fb424b641a2b7c3e9765bf1605f9b695 Mon Sep 17 00:00:00 2001
From: Max Peintner <max@caos.ch>
Date: Fri, 26 Jun 2020 14:15:05 +0200
Subject: [PATCH] feat(console): split granted from owned project modules,
 general ui ux fixes (#286)

* add iam label, user avatar

* avatar component

* split granted and owned modules

* move components to resp module

* refactor project contributors, g project nav

* rem console logs, add avatar for org members

* fix changes loading, auth user page

* refactor home, i18n

* fix changes side overflow

* lint
---
 console/angular.json                          |   7 +-
 console/src/app/app-routing.module.ts         |  10 +-
 console/src/app/app.component.html            | 192 ++++----
 console/src/app/app.component.scss            |  66 +--
 console/src/app/app.component.ts              |   1 -
 console/src/app/app.module.ts                 |   2 +
 .../directives/has-role/has-role.directive.ts |   1 -
 console/src/app/guards/auth.guard.ts          |   1 -
 .../accounts-card.component.html              |  11 +-
 .../accounts-card.component.scss              |   7 -
 .../accounts-card/accounts-card.component.ts  |   2 +-
 .../accounts-card/accounts-card.module.ts     |   2 +
 .../member-create-dialog.component.ts         |   2 -
 .../app/modules/avatar/avatar.component.html  |   4 +
 .../app/modules/avatar/avatar.component.scss  |  15 +
 .../modules/avatar/avatar.component.spec.ts   |  25 +
 .../app/modules/avatar/avatar.component.ts    |  26 ++
 .../src/app/modules/avatar/avatar.module.ts   |  18 +
 .../modules/changes/changes.component.scss    |   3 +-
 .../app/modules/changes/changes.component.ts  |  55 +--
 .../meta-layout/meta-layout.component.html    |   2 +-
 .../meta-layout/meta-layout.component.scss    |   1 -
 .../project-contributors.component.html       |   6 +-
 .../project-contributors.component.scss       |   0
 .../project-contributors.component.spec.ts    |   0
 .../project-contributors.component.ts         |   7 +-
 .../project-contributors.module.ts            |  30 ++
 .../project-members-datasource.ts             |   1 -
 .../project-members-routing.module.ts         |   0
 .../project-members.component.html            |   0
 .../project-members.component.scss            |   0
 .../project-members.component.spec.ts         |   0
 .../project-members.component.ts              |   1 -
 .../project-members/project-members.module.ts |   0
 .../project-roles/project-roles-datasource.ts |   1 -
 .../search-project-autocomplete.component.ts  |   1 -
 .../search-roles-autocomplete.component.ts    |   2 -
 .../apps/app-create/app-create.component.ts   |   3 -
 .../apps/app-detail/app-detail.component.ts   |   5 -
 .../granted-project-detail.component.html     |   0
 .../granted-project-detail.component.scss     |   0
 .../granted-project-detail.component.spec.ts  |   0
 .../granted-project-detail.component.ts       |   1 -
 .../granted-project-grid.component.html       |   0
 .../granted-project-grid.component.scss       |   0
 .../granted-project-grid.component.spec.ts    |   0
 .../granted-project-grid.component.ts         |   0
 .../granted-project-list.component.html       |   0
 .../granted-project-list.component.scss       |   0
 .../granted-project-list.component.spec.ts    |   0
 .../granted-project-list.component.ts         |   1 -
 .../granted-projects-routing.module.ts        |  48 ++
 .../granted-projects.component.html}          |   3 -
 .../granted-projects.component.scss}          |   0
 .../granted-projects.component.spec.ts        |  25 +
 .../granted-projects.component.ts             |  29 ++
 .../granted-projects.module.ts                |  91 ++++
 .../project-grant-members-datasource.ts       |   1 -
 .../project-grant-members.component.html      |   0
 .../project-grant-members.component.scss      |   0
 .../project-grant-members.component.spec.ts   |   0
 .../project-grant-members.component.ts        |   1 -
 .../src/app/pages/home/home.component.html    |   1 -
 .../src/app/pages/home/home.component.scss    |  12 +-
 .../iam-contributors.component.html           |   6 +-
 .../iam-contributors.component.ts             |   1 -
 .../iam-contributors.module.ts                |   2 +
 .../iam/iam-members/iam-members-datasource.ts |   1 -
 .../org-contributors.component.html           |   6 +-
 .../org-contributors.component.ts             |   1 -
 .../org-contributors.module.ts                |   2 +
 .../orgs/org-create/org-create.component.ts   |   1 -
 .../orgs/org-detail/org-detail.component.html |   2 +-
 .../orgs/org-detail/org-detail.component.ts   |   2 -
 .../pages/orgs/org-grid/org-grid.component.ts |   1 -
 ...org-member-roles-autocomplete.component.ts |   1 -
 .../org-members/org-members-datasource.ts     |   1 -
 .../orgs/org-members/org-members.component.ts |   1 -
 .../password-policy.component.ts              |   5 -
 .../owned-project-detail.component.html       |   0
 .../owned-project-detail.component.scss       |   0
 .../owned-project-detail.component.spec.ts    |   0
 .../owned-project-detail.component.ts         |   1 -
 .../owned-project-grid.component.html         |   0
 .../owned-project-grid.component.scss         |   0
 .../owned-project-grid.component.spec.ts      |   0
 .../owned-project-grid.component.ts           |   0
 .../owned-project-list.component.html         |   0
 .../owned-project-list.component.scss         |   0
 .../owned-project-list.component.spec.ts      |   0
 .../owned-project-list.component.ts           |   3 -
 .../owned-projects-routing.module.ts}         |  14 +-
 .../owned-projects.component.html             |   7 +
 .../owned-projects.component.scss             |  13 +
 .../owned-projects.component.spec.ts}         |   0
 .../owned-projects.component.ts}              |   8 +-
 .../owned-projects.module.ts}                 |  46 +-
 .../project-application-grid.component.html   |   0
 .../project-application-grid.component.scss   |   0
 ...project-application-grid.component.spec.ts |   0
 .../project-application-grid.component.ts     |   0
 .../project-applications-datasource.ts        |   0
 .../project-applications.component.html       |   0
 .../project-applications.component.scss       |   0
 .../project-applications.component.spec.ts    |   0
 .../project-applications.component.ts         |   0
 ...grant-members-create-dialog.component.html |   0
 ...grant-members-create-dialog.component.scss |   0
 ...nt-members-create-dialog.component.spec.ts |   0
 ...t-grant-members-create-dialog.component.ts |   0
 .../project-grants-datasource.ts              |   1 -
 .../project-grants.component.html             |   0
 .../project-grants.component.scss             |   0
 .../project-grants.component.spec.ts          |   0
 .../project-grants.component.ts               |   8 -
 .../project-create.component.ts               |   1 -
 .../project-grant-create.component.ts         |   4 -
 .../project-role-create.component.ts          |   2 -
 .../user-create/user-create.component.ts      |   2 -
 .../auth-user-detail.component.html           | 435 +++++++++---------
 .../auth-user-detail.component.scss           | 220 +++++++--
 .../auth-user-detail.component.ts             | 111 ++---
 .../auth-user-mfa/auth-user-mfa.component.ts  |   2 -
 .../theme-setting.component.html              |   2 +-
 .../theme-setting.component.scss              |  19 +-
 .../user-detail/user-detail.component.html    |   5 +-
 .../user-detail/user-detail.component.scss    |  19 +-
 .../user-detail/user-detail.component.ts      |  96 ++--
 .../user-grant-create.component.ts            |   4 -
 .../app/services/auth-interceptor.service.ts  |   2 -
 console/src/app/services/auth-user.service.ts |  10 +-
 console/src/app/services/auth.service.ts      |   2 -
 console/src/app/services/grpc.service.ts      |   1 -
 console/src/assets/i18n/de.json               |   6 +-
 console/src/assets/i18n/en.json               |   6 +-
 console/src/component-themes.scss             |  12 +-
 console/src/styles.scss                       |   2 +-
 console/src/styles/avatar.scss                |  19 +
 console/src/styles/card.scss                  |   5 +
 console/src/styles/changes.scss               |   4 +-
 console/src/styles/sidenav-list.scss          |  27 ++
 141 files changed, 1133 insertions(+), 742 deletions(-)
 create mode 100644 console/src/app/modules/avatar/avatar.component.html
 create mode 100644 console/src/app/modules/avatar/avatar.component.scss
 create mode 100644 console/src/app/modules/avatar/avatar.component.spec.ts
 create mode 100644 console/src/app/modules/avatar/avatar.component.ts
 create mode 100644 console/src/app/modules/avatar/avatar.module.ts
 rename console/src/app/{pages/projects => modules}/project-contributors/project-contributors.component.html (75%)
 rename console/src/app/{pages/projects => modules}/project-contributors/project-contributors.component.scss (100%)
 rename console/src/app/{pages/projects => modules}/project-contributors/project-contributors.component.spec.ts (100%)
 rename console/src/app/{pages/projects => modules}/project-contributors/project-contributors.component.ts (94%)
 create mode 100644 console/src/app/modules/project-contributors/project-contributors.module.ts
 rename console/src/app/{pages/projects => modules}/project-members/project-members-datasource.ts (98%)
 rename console/src/app/{pages/projects => modules}/project-members/project-members-routing.module.ts (100%)
 rename console/src/app/{pages/projects => modules}/project-members/project-members.component.html (100%)
 rename console/src/app/{pages/projects => modules}/project-members/project-members.component.scss (100%)
 rename console/src/app/{pages/projects => modules}/project-members/project-members.component.spec.ts (100%)
 rename console/src/app/{pages/projects => modules}/project-members/project-members.component.ts (99%)
 rename console/src/app/{pages/projects => modules}/project-members/project-members.module.ts (100%)
 rename console/src/app/pages/{projects => granted-projects}/granted-project-detail/granted-project-detail.component.html (100%)
 rename console/src/app/pages/{projects => granted-projects}/granted-project-detail/granted-project-detail.component.scss (100%)
 rename console/src/app/pages/{projects => granted-projects}/granted-project-detail/granted-project-detail.component.spec.ts (100%)
 rename console/src/app/pages/{projects => granted-projects}/granted-project-detail/granted-project-detail.component.ts (98%)
 rename console/src/app/pages/{projects => granted-projects}/granted-project-grid/granted-project-grid.component.html (100%)
 rename console/src/app/pages/{projects => granted-projects}/granted-project-grid/granted-project-grid.component.scss (100%)
 rename console/src/app/pages/{projects => granted-projects}/granted-project-grid/granted-project-grid.component.spec.ts (100%)
 rename console/src/app/pages/{projects => granted-projects}/granted-project-grid/granted-project-grid.component.ts (100%)
 rename console/src/app/pages/{projects => granted-projects}/granted-project-list/granted-project-list.component.html (100%)
 rename console/src/app/pages/{projects => granted-projects}/granted-project-list/granted-project-list.component.scss (100%)
 rename console/src/app/pages/{projects => granted-projects}/granted-project-list/granted-project-list.component.spec.ts (100%)
 rename console/src/app/pages/{projects => granted-projects}/granted-project-list/granted-project-list.component.ts (98%)
 create mode 100644 console/src/app/pages/granted-projects/granted-projects-routing.module.ts
 rename console/src/app/pages/{projects/projects.component.html => granted-projects/granted-projects.component.html} (75%)
 rename console/src/app/pages/{projects/projects.component.scss => granted-projects/granted-projects.component.scss} (100%)
 create mode 100644 console/src/app/pages/granted-projects/granted-projects.component.spec.ts
 create mode 100644 console/src/app/pages/granted-projects/granted-projects.component.ts
 create mode 100644 console/src/app/pages/granted-projects/granted-projects.module.ts
 rename console/src/app/pages/{projects => granted-projects}/project-grant-members/project-grant-members-datasource.ts (98%)
 rename console/src/app/pages/{projects => granted-projects}/project-grant-members/project-grant-members.component.html (100%)
 rename console/src/app/pages/{projects => granted-projects}/project-grant-members/project-grant-members.component.scss (100%)
 rename console/src/app/pages/{projects => granted-projects}/project-grant-members/project-grant-members.component.spec.ts (100%)
 rename console/src/app/pages/{projects => granted-projects}/project-grant-members/project-grant-members.component.ts (99%)
 rename console/src/app/pages/{projects => owned-projects}/owned-project-detail/owned-project-detail.component.html (100%)
 rename console/src/app/pages/{projects => owned-projects}/owned-project-detail/owned-project-detail.component.scss (100%)
 rename console/src/app/pages/{projects => owned-projects}/owned-project-detail/owned-project-detail.component.spec.ts (100%)
 rename console/src/app/pages/{projects => owned-projects}/owned-project-detail/owned-project-detail.component.ts (99%)
 rename console/src/app/pages/{projects => owned-projects}/owned-project-grid/owned-project-grid.component.html (100%)
 rename console/src/app/pages/{projects => owned-projects}/owned-project-grid/owned-project-grid.component.scss (100%)
 rename console/src/app/pages/{projects => owned-projects}/owned-project-grid/owned-project-grid.component.spec.ts (100%)
 rename console/src/app/pages/{projects => owned-projects}/owned-project-grid/owned-project-grid.component.ts (100%)
 rename console/src/app/pages/{projects => owned-projects}/owned-project-list/owned-project-list.component.html (100%)
 rename console/src/app/pages/{projects => owned-projects}/owned-project-list/owned-project-list.component.scss (100%)
 rename console/src/app/pages/{projects => owned-projects}/owned-project-list/owned-project-list.component.spec.ts (100%)
 rename console/src/app/pages/{projects => owned-projects}/owned-project-list/owned-project-list.component.ts (97%)
 rename console/src/app/pages/{projects/projects-routing.module.ts => owned-projects/owned-projects-routing.module.ts} (74%)
 create mode 100644 console/src/app/pages/owned-projects/owned-projects.component.html
 create mode 100644 console/src/app/pages/owned-projects/owned-projects.component.scss
 rename console/src/app/pages/{projects/projects.component.spec.ts => owned-projects/owned-projects.component.spec.ts} (100%)
 rename console/src/app/pages/{projects/projects.component.ts => owned-projects/owned-projects.component.ts} (75%)
 rename console/src/app/pages/{projects/projects.module.ts => owned-projects/owned-projects.module.ts} (69%)
 rename console/src/app/pages/{projects => owned-projects}/project-application-grid/project-application-grid.component.html (100%)
 rename console/src/app/pages/{projects => owned-projects}/project-application-grid/project-application-grid.component.scss (100%)
 rename console/src/app/pages/{projects => owned-projects}/project-application-grid/project-application-grid.component.spec.ts (100%)
 rename console/src/app/pages/{projects => owned-projects}/project-application-grid/project-application-grid.component.ts (100%)
 rename console/src/app/pages/{projects => owned-projects}/project-applications/project-applications-datasource.ts (100%)
 rename console/src/app/pages/{projects => owned-projects}/project-applications/project-applications.component.html (100%)
 rename console/src/app/pages/{projects => owned-projects}/project-applications/project-applications.component.scss (100%)
 rename console/src/app/pages/{projects => owned-projects}/project-applications/project-applications.component.spec.ts (100%)
 rename console/src/app/pages/{projects => owned-projects}/project-applications/project-applications.component.ts (100%)
 rename console/src/app/pages/{projects => owned-projects}/project-grant-members-create-dialog/project-grant-members-create-dialog.component.html (100%)
 rename console/src/app/pages/{projects => owned-projects}/project-grant-members-create-dialog/project-grant-members-create-dialog.component.scss (100%)
 rename console/src/app/pages/{projects => owned-projects}/project-grant-members-create-dialog/project-grant-members-create-dialog.component.spec.ts (100%)
 rename console/src/app/pages/{projects => owned-projects}/project-grant-members-create-dialog/project-grant-members-create-dialog.component.ts (100%)
 rename console/src/app/pages/{projects => owned-projects}/project-grants/project-grants-datasource.ts (98%)
 rename console/src/app/pages/{projects => owned-projects}/project-grants/project-grants.component.html (100%)
 rename console/src/app/pages/{projects => owned-projects}/project-grants/project-grants.component.scss (100%)
 rename console/src/app/pages/{projects => owned-projects}/project-grants/project-grants.component.spec.ts (100%)
 rename console/src/app/pages/{projects => owned-projects}/project-grants/project-grants.component.ts (95%)
 create mode 100644 console/src/styles/avatar.scss

diff --git a/console/angular.json b/console/angular.json
index 9847e4bd8..3a47200ba 100644
--- a/console/angular.json
+++ b/console/angular.json
@@ -32,7 +32,12 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "allowedCommonJsDependencies": [
+                "@angular/common/locales/de",
+                "src/app/proto/generated/*.js",
+                "src/app/proto/generated/**/*.js"
+             ]
           },
           "configurations": {
             "production": {
diff --git a/console/src/app/app-routing.module.ts b/console/src/app/app-routing.module.ts
index a80d8dcb8..940f850d3 100644
--- a/console/src/app/app-routing.module.ts
+++ b/console/src/app/app-routing.module.ts
@@ -10,9 +10,17 @@ const routes: Routes = [
         loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule),
         canActivate: [AuthGuard],
     },
+    {
+        path: 'granted-projects',
+        loadChildren: () => import('./pages/granted-projects/granted-projects.module').then(m => m.GrantedProjectsModule),
+        canActivate: [AuthGuard, RoleGuard],
+        data: {
+            roles: ['project.read'],
+        },
+    },
     {
         path: 'projects',
-        loadChildren: () => import('./pages/projects/projects.module').then(m => m.ProjectsModule),
+        loadChildren: () => import('./pages/owned-projects/owned-projects.module').then(m => m.OwnedProjectsModule),
         canActivate: [AuthGuard, RoleGuard],
         data: {
             roles: ['project.read'],
diff --git a/console/src/app/app.component.html b/console/src/app/app.component.html
index 8cdab376e..8440c1f7c 100644
--- a/console/src/app/app.component.html
+++ b/console/src/app/app.component.html
@@ -1,110 +1,116 @@
-<mat-toolbar class="root-header">
-    <button aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()">
-        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
-    </button>
-    <a *ngIf="(isHandset$ | async) == false" class="title ailerons" [routerLink]="['/']">
-        <img class="logo" *ngIf="componentCssClass == 'dark-theme'; else lighttheme"
-            src="../assets/images/zitadel-logo-oneline-darkdesign.svg" />
-        <ng-template #lighttheme>
-            <img class="logo" src="../assets/images/zitadel-logo-oneline-lightdesign.svg" />
-        </ng-template>
-    </a>
+<ng-container *ngIf="(authService.user | async) || {} as user">
+    <mat-toolbar class="root-header">
+        <button aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()">
+            <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
+        </button>
+        <a *ngIf="(isHandset$ | async) == false" class="title ailerons" [routerLink]="['/']">
+            <img class="logo" *ngIf="componentCssClass == 'dark-theme'; else lighttheme"
+                src="../assets/images/zitadel-logo-oneline-darkdesign.svg" />
+            <ng-template #lighttheme>
+                <img class="logo" src="../assets/images/zitadel-logo-oneline-lightdesign.svg" />
+            </ng-template>
+        </a>
 
-    <button (click)="loadOrgs()" *ngIf="profile?.id && org" mat-button
-        [matMenuTriggerFor]="menu">{{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' ]">Show all organizations</button>
-
-        <button [ngClass]="{'active': temporg.id === org?.id}" [disabled]="!temporg.id" *ngFor="let temporg of orgs"
-            mat-menu-item (click)="setActiveOrg(temporg)">
-            <mat-icon class="avatar">business</mat-icon>
-            {{temporg?.name ? temporg.name : 'NO NAME'}}
+        <button (click)="loadOrgs()" *ngIf="profile?.id && org" mat-button
+            [matMenuTriggerFor]="menu">{{org?.name ? org.name : 'NO NAME'}}
+            <mat-icon>
+                arrow_drop_down</mat-icon>
         </button>
 
-        <ng-template appHasRole [appHasRole]="['iam.write']">
-            <button mat-menu-item [routerLink]="[ '/org/create' ]">
-                <mat-icon class="avatar">add</mat-icon>
-                {{'MENU.NEWORG' | translate}}
+        <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' ]">Show all organizations</button>
+
+            <button [ngClass]="{'active': temporg.id === org?.id}" [disabled]="!temporg.id" *ngFor="let temporg of orgs"
+                mat-menu-item (click)="setActiveOrg(temporg)">
+                <mat-icon class="avatar">business</mat-icon>
+                {{temporg?.name ? temporg.name : 'NO NAME'}}
             </button>
-        </ng-template>
-    </mat-menu>
-    <span class="fill-space"></span>
 
-    <ng-template appHasRole [appHasRole]="['iam.write']">
-        <div matTooltip="IAM Administrator" class="iamreadwrite"></div>
-    </ng-template>
+            <ng-template appHasRole [appHasRole]="['iam.write']">
+                <button mat-menu-item [routerLink]="[ '/org/create' ]">
+                    <mat-icon class="avatar">add</mat-icon>
+                    {{'MENU.NEWORG' | translate}}
+                </button>
+            </ng-template>
+        </mat-menu>
+        <span class="fill-space"></span>
 
-    <div (clickOutside)="closeAccountCard()" class="icon-container">
-        <div class="avatar-wrapper dontcloseonclick" (click)="showAccount = !showAccount">
-            <div class="avatar-circle dontcloseonclick" [ngClass]="{'active': showAccount}">
-                <i *ngIf="componentCssClass == 'dark-theme'; else lighttheme"
-                    class="avatar dontcloseonclick las la-user-circle"></i>
-
-                <ng-template #lighttheme>
-                    <i class="avatar las la-user-circle"></i>
-                </ng-template>
-            </div>
+        <div (clickOutside)="closeAccountCard()" class="icon-container">
+            <app-avatar *ngIf="user && (user.displayName || (user.firstName && user.lastName))"
+                class="avatar dontcloseonclick" (click)="showAccount = !showAccount" [active]="showAccount"
+                [name]="user.displayName ? user.displayName : (user.firstName + ' '+ user.lastName)" [size]="38">
+            </app-avatar>
+            <app-accounts-card @accounts class="a_card  mat-elevation-z5" *ngIf="showAccount"
+                (close)="showAccount = false" [profile]="profile" [iamuser]="iamreadwrite">
+            </app-accounts-card>
         </div>
-        <app-accounts-card @accounts class="a_card  mat-elevation-z5" *ngIf="showAccount" (close)="showAccount = false"
-            [profile]="profile" [iamuser]="iamreadwrite">
-        </app-accounts-card>
-    </div>
-</mat-toolbar>
+    </mat-toolbar>
 
-<mat-drawer-container *ngIf="(authService.user | async) || {} as user" class="main-container">
-    <mat-drawer #drawer class="side" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)">
-        <div class="side-column">
-            <div class="list">
-                <a *ngIf="authService.authenticationChanged | async" class="nav-item" [routerLinkActive]="['active']"
-                    [routerLinkActiveOptions]="{ exact: true }" [routerLink]="['/user/me']">
-                    <i class="icon las la-user-circle"></i>
-                    <span class="label">{{ 'MENU.PERSONAL_INFO' | translate }}</span>
-                </a>
+    <mat-drawer-container class="main-container">
+        <mat-drawer #drawer class="side" [mode]="(isHandset$ | async) ? 'over' : 'side'"
+            [opened]="!(isHandset$ | async)">
+            <div class="side-column">
+                <div class="list">
+                    <a *ngIf="authService.authenticationChanged | async" class="nav-item"
+                        [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }"
+                        [routerLink]="['/user/me']">
+                        <i class="icon las la-user-circle"></i>
+                        <span class="label">{{ 'MENU.PERSONAL_INFO' | translate }}</span>
+                    </a>
 
-                <a *ngIf="iamreadwrite" class="nav-item" [routerLinkActive]="['active']" [routerLink]="[ '/iam']">
-                    <i class="icon las la-gem"></i>
-                    <span class="label">{{'MENU.IAM' | translate}}</span>
-                </a>
+                    <div class="divider"><span></span></div>
 
-                <a *ngIf="showOrgSection" class="nav-item" [routerLinkActive]="['active']" [routerLink]="[ '/org']">
-                    <i class="icon las la-archway"></i>
-                    <span class="label">{{org?.name ? org.name : 'MENU.ORGANIZATION' | translate}}</span>
-                </a>
+                    <a *ngIf="iamreadwrite" class="nav-item" [routerLinkActive]="['active']" [routerLink]="[ '/iam']">
+                        <i class="icon las la-gem"></i>
+                        <span class="label">{{'MENU.IAM' | translate}}</span>
+                    </a>
 
-                <a *ngIf="showProjectSection" class="nav-item" [routerLinkActive]="['active']"
-                    [routerLink]="[ '/projects']">
-                    <i class="icon las la-layer-group"></i>
-                    <span class="label">{{ 'MENU.PROJECT' | translate }}</span>
-                </a>
+                    <a *ngIf="showOrgSection" class="nav-item" [routerLinkActive]="['active']" [routerLink]="[ '/org']">
+                        <i class="icon las la-archway"></i>
+                        <span class="label">{{org?.name ? org.name : 'MENU.ORGANIZATION' | translate}}</span>
+                    </a>
 
-                <a *ngIf="showUserSection" class="nav-item" [routerLinkActive]="['active']" [routerLink]="[ '/users']"
-                    [routerLinkActiveOptions]="{ exact: true }">
-                    <i class="icon las la-users"></i>
-                    <span class="label">{{ 'MENU.USER' | translate }}</span>
-                </a>
+                    <div class="divider"><span></span></div>
 
+                    <a *ngIf="showProjectSection" class="nav-item" [routerLinkActive]="['active']"
+                        [routerLink]="[ '/projects']">
+                        <i class="icon las la-layer-group"></i>
+                        <span class="label">{{ 'MENU.PROJECT' | translate }}</span>
+                    </a>
+
+                    <a *ngIf="showProjectSection" class="nav-item" [routerLinkActive]="['active']"
+                        [routerLink]="[ '/granted-projects']">
+                        <i class="icon las la-layer-group"></i>
+                        <span class="label">{{ 'MENU.GRANTEDPROJECT' | translate }}</span>
+                    </a>
+
+                    <div class="divider"><span></span></div>
+
+                    <a *ngIf="showUserSection" class="nav-item" [routerLinkActive]="['active']"
+                        [routerLink]="[ '/users']" [routerLinkActiveOptions]="{ exact: true }">
+                        <i class="icon las la-users"></i>
+                        <span class="label">{{ 'MENU.USER' | translate }}</span>
+                    </a>
+
+                    <span class="fill-space"></span>
+                </div>
                 <span class="fill-space"></span>
-                <a class="nav-item" (click)="authService.signout()">
-                    <i class="icon las la-sign-out-alt"></i>
-                    <span class="label">{{ 'MENU.LOGOUT' | translate }}</span>
-                </a>
-
-            </div>
-            <span class="fill-space"></span>
-            <!-- <div class="footer">
+                <!-- <div class="footer">
                 <a href="https://caos.ch/impressum/" target="_blank" rel="noreferrer">AGB</a>
                 <a href="https://caos.ch/impressum/" target="_blank" rel="noreferrer">Impressum</a>
             </div> -->
-        </div>
-    </mat-drawer>
-    <mat-drawer-content class="content">
-        <div class="router" [@routeAnimations]="prepareRoute(outlet)">
-            <router-outlet #outlet="outlet"></router-outlet>
-        </div>
-    </mat-drawer-content>
-</mat-drawer-container>
\ No newline at end of file
+            </div>
+        </mat-drawer>
+        <mat-drawer-content class="content">
+            <ng-template appHasRole [appHasRole]="['iam.write']">
+                <div class="admin-line" matTooltip="IAM Administrator">
+                    <span>{{'MENU.IAMADMIN' | translate}}</span>
+                </div>
+            </ng-template>
+            <div class="router" [@routeAnimations]="prepareRoute(outlet)">
+                <router-outlet #outlet="outlet"></router-outlet>
+            </div>
+        </mat-drawer-content>
+    </mat-drawer-container>
+</ng-container>
\ No newline at end of file
diff --git a/console/src/app/app.component.scss b/console/src/app/app.component.scss
index 76b3065fc..65e8dbe45 100644
--- a/console/src/app/app.component.scss
+++ b/console/src/app/app.component.scss
@@ -31,13 +31,6 @@
 	.fill-space {
 		flex: 1;
     }
-    
-    .iamreadwrite {
-        height: 8px;
-        width: 8px;
-        border-radius: 50%;
-        background: linear-gradient(to bottom right, rgb(240,140,53), rgb(233, 60, 231));
-    }
 
 	.icon-container {
 		display: flex;
@@ -51,44 +44,16 @@
 			font-family: 'ailerons', sans-serif;
 		}
 
-		.avatar-wrapper {
-			display: flex;
-            align-items: center;
+        .avatar {
+            display: block;
+            margin: auto;
+            cursor: pointer;
+        }
 
-            .avatar-circle {
-                height: 30px;
-                width: 30px;
-                font-size: 30px;
-                background-color: transparent;
-                border-radius: 50%;
-                animation: background-color .2s ease-in;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                margin-left: .5rem;
-
-                .avatar {
-                    display: block;
-                    margin: auto auto;
-                    height: 30px;
-                    width: 30px;
-                    line-height: 30px;
-                    font-size: 30px;
-                    border-radius: 50%;
-                    text-align: center;
-                }
-                
-                &:hover, &.active {
-                    cursor: pointer;
-                    background-color: #ffffff20;
-                }
-            }
-
-			.name {
-				font-size: 1rem;
-				font-weight: 400;
-			}
-		}
+        .name {
+            font-size: 1rem;
+            font-weight: 400;
+        }
 
 		.a_card {
 			position: absolute;
@@ -99,6 +64,12 @@
 	}
 }
 
+.admin-line {
+    font-size: 12px;
+    padding: 4px 2rem;
+    position: relative;
+}
+
 .main-container {
 	display: flex;
 	flex-direction: column;
@@ -239,4 +210,11 @@
             text-decoration: underline;
         }
     }
+}
+
+.divider {
+    display: block;
+    background-color: #ffffff10;
+    height: 1px;
+    margin: .5rem 0;
 }
\ No newline at end of file
diff --git a/console/src/app/app.component.ts b/console/src/app/app.component.ts
index 76455c3a2..31bb7b9b2 100644
--- a/console/src/app/app.component.ts
+++ b/console/src/app/app.component.ts
@@ -274,7 +274,6 @@ export class AppComponent implements OnDestroy {
         this.translate.setDefaultLang('en');
 
         this.authService.user.subscribe(userprofile => {
-            console.log(userprofile);
             this.profile = userprofile;
             const lang = userprofile.preferredLanguage.match(/en|de/) ? userprofile.preferredLanguage : 'en';
             this.translate.use(lang);
diff --git a/console/src/app/app.module.ts b/console/src/app/app.module.ts
index d8ec50db2..70032f44f 100644
--- a/console/src/app/app.module.ts
+++ b/console/src/app/app.module.ts
@@ -25,6 +25,7 @@ import { AppComponent } from './app.component';
 import { HasRoleModule } from './directives/has-role/has-role.module';
 import { OutsideClickModule } from './directives/outside-click/outside-click.module';
 import { AccountsCardModule } from './modules/accounts-card/accounts-card.module';
+import { AvatarModule } from './modules/avatar/avatar.module';
 import { SignedoutComponent } from './pages/signedout/signedout.component';
 import { AuthUserService } from './services/auth-user.service';
 import { AuthService } from './services/auth.service';
@@ -102,6 +103,7 @@ export const authConfig: AuthConfig = {
         MatToolbarModule,
         MatMenuModule,
         MatSnackBarModule,
+        AvatarModule,
         ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
     ],
     providers: [
diff --git a/console/src/app/directives/has-role/has-role.directive.ts b/console/src/app/directives/has-role/has-role.directive.ts
index eb3360291..077e14466 100644
--- a/console/src/app/directives/has-role/has-role.directive.ts
+++ b/console/src/app/directives/has-role/has-role.directive.ts
@@ -15,7 +15,6 @@ export class HasRoleDirective {
                     this.viewContainerRef.clear();
                     this.viewContainerRef.createEmbeddedView(this.templateRef);
                 } else if (this.hasView) {
-                    console.log('User blocked!', roles, isAllowed);
                     this.viewContainerRef.clear();
                     this.hasView = false;
                 }
diff --git a/console/src/app/guards/auth.guard.ts b/console/src/app/guards/auth.guard.ts
index 867443bec..f95cd6a9c 100644
--- a/console/src/app/guards/auth.guard.ts
+++ b/console/src/app/guards/auth.guard.ts
@@ -16,7 +16,6 @@ export class AuthGuard implements CanActivate {
         state: RouterStateSnapshot,
     ): Observable<boolean> | Promise<boolean> | boolean {
         if (!this.auth.authenticated) {
-            console.log('authenticate');
             return this.auth.authenticate();
         }
         return this.auth.authenticated;
diff --git a/console/src/app/modules/accounts-card/accounts-card.component.html b/console/src/app/modules/accounts-card/accounts-card.component.html
index 3ce3cf4da..ce8b18bb9 100644
--- a/console/src/app/modules/accounts-card/accounts-card.component.html
+++ b/console/src/app/modules/accounts-card/accounts-card.component.html
@@ -1,12 +1,15 @@
 <div class="card" appOutsideClick (clickOutside)="closeCard($event)">
-    <mat-icon class="avatar">account_circle</mat-icon>
+    <app-avatar *ngIf="profile && (profile.displayName || (profile.firstName && profile.lastName))" class="avatar"
+        [name]="profile.displayName ? profile.displayName : (profile.firstName + ' '+ profile.lastName)" [size]="80">
+    </app-avatar>
+
     <span class="u-name">{{profile?.firstName}} {{profile?.lastName}}</span>
     <span class="u-email">{{profile?.userName}}</span>
     <span class="iamuser" *ngIf="iamuser">IAM USER</span>
 
-    <button color="accent" (click)="editUserProfile()" mat-stroked-button>{{'USER.EDITACCOUNT' | translate}}</button>
+    <button color="primary" (click)="editUserProfile()" mat-stroked-button>{{'USER.EDITACCOUNT' | translate}}</button>
     <div class="l-accounts">
-        <mat-progress-bar *ngIf="loadingUsers" color="accent" mode="indeterminate"></mat-progress-bar>
+        <mat-progress-bar *ngIf="loadingUsers" color="primary" mode="indeterminate"></mat-progress-bar>
         <a class="row" *ngFor="let user of users" (click)="selectAccount(user.userName)">
             <i class="small-avatar las la-user-circle"></i>
 
@@ -29,5 +32,5 @@
         </a>
     </div>
 
-    <button color="accent" (click)="logout()" mat-stroked-button>logout everywhere</button>
+    <button color="primary" (click)="logout()" mat-stroked-button>{{'MENU.LOGOUT' | translate}}</button>
 </div>
\ No newline at end of file
diff --git a/console/src/app/modules/accounts-card/accounts-card.component.scss b/console/src/app/modules/accounts-card/accounts-card.component.scss
index 7d26c48ad..fc5fd1061 100644
--- a/console/src/app/modules/accounts-card/accounts-card.component.scss
+++ b/console/src/app/modules/accounts-card/accounts-card.component.scss
@@ -10,10 +10,6 @@
     padding: 1rem 0;
 
     .avatar {
-        height: 80px;
-        width: 80px;
-        border-radius: 50%;
-        line-height: 80px;
         font-size: 80px;
         margin-bottom: 1rem;
     }
@@ -30,9 +26,6 @@
 
     .iamuser {
         font-size: 1rem;
-        background: -webkit-linear-gradient(rgb(240,140,53), rgb(233, 60, 231));
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
     }
 
     button {
diff --git a/console/src/app/modules/accounts-card/accounts-card.component.ts b/console/src/app/modules/accounts-card/accounts-card.component.ts
index 3cf387ae4..d7860efce 100644
--- a/console/src/app/modules/accounts-card/accounts-card.component.ts
+++ b/console/src/app/modules/accounts-card/accounts-card.component.ts
@@ -60,7 +60,7 @@ export class AccountsCardComponent implements OnInit {
     }
 
     public logout(): void {
-        this.router.navigate(['/']);
+        this.authService.signout();
         this.close.emit();
     }
 }
diff --git a/console/src/app/modules/accounts-card/accounts-card.module.ts b/console/src/app/modules/accounts-card/accounts-card.module.ts
index f0c607138..3d0c2a2a8 100644
--- a/console/src/app/modules/accounts-card/accounts-card.module.ts
+++ b/console/src/app/modules/accounts-card/accounts-card.module.ts
@@ -6,6 +6,7 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { TranslateModule } from '@ngx-translate/core';
 import { OutsideClickModule } from 'src/app/directives/outside-click/outside-click.module';
 
+import { AvatarModule } from '../avatar/avatar.module';
 import { AccountsCardComponent } from './accounts-card.component';
 
 @NgModule({
@@ -18,6 +19,7 @@ import { AccountsCardComponent } from './accounts-card.component';
         MatButtonModule,
         MatProgressBarModule,
         OutsideClickModule,
+        AvatarModule,
         TranslateModule,
     ],
     exports: [
diff --git a/console/src/app/modules/add-member-dialog/member-create-dialog.component.ts b/console/src/app/modules/add-member-dialog/member-create-dialog.component.ts
index 55b6b8d80..24fd098ca 100644
--- a/console/src/app/modules/add-member-dialog/member-create-dialog.component.ts
+++ b/console/src/app/modules/add-member-dialog/member-create-dialog.component.ts
@@ -42,14 +42,12 @@ export class MemberCreateDialogComponent {
         } else if (this.creationType === CreationType.PROJECT_OWNED) {
             this.projectService.GetProjectMemberRoles().then(resp => {
                 this.memberRoleOptions = resp.toObject().rolesList;
-                console.log(this.memberRoleOptions);
             }).catch(error => {
                 toastService.showError(error.message);
             });
         } else if (this.creationType === CreationType.IAM) {
             this.adminService.GetIamMemberRoles().then(resp => {
                 this.memberRoleOptions = resp.toObject().rolesList;
-                console.log(this.memberRoleOptions);
             }).catch(error => {
                 toastService.showError(error.message);
             });
diff --git a/console/src/app/modules/avatar/avatar.component.html b/console/src/app/modules/avatar/avatar.component.html
new file mode 100644
index 000000000..4b1db087a
--- /dev/null
+++ b/console/src/app/modules/avatar/avatar.component.html
@@ -0,0 +1,4 @@
+<div class="avatar-circle dontcloseonclick"
+    [ngStyle]="{'height': size+'px', 'width': size+'px', 'fontSize': fontSize+'px'}" [ngClass]="{'active': active}">
+    {{credentials}}
+</div>
\ No newline at end of file
diff --git a/console/src/app/modules/avatar/avatar.component.scss b/console/src/app/modules/avatar/avatar.component.scss
new file mode 100644
index 000000000..20cbe89ac
--- /dev/null
+++ b/console/src/app/modules/avatar/avatar.component.scss
@@ -0,0 +1,15 @@
+:host {
+    display: block;
+}
+
+.avatar-circle {
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-transform: uppercase;
+
+    &.active:hover  {
+        border: 2px solid #81868a;
+    }
+}
\ No newline at end of file
diff --git a/console/src/app/modules/avatar/avatar.component.spec.ts b/console/src/app/modules/avatar/avatar.component.spec.ts
new file mode 100644
index 000000000..b714f9346
--- /dev/null
+++ b/console/src/app/modules/avatar/avatar.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AvatarComponent } from './avatar.component';
+
+describe('AvatarComponent', () => {
+    let component: AvatarComponent;
+    let fixture: ComponentFixture<AvatarComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [AvatarComponent],
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(AvatarComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/console/src/app/modules/avatar/avatar.component.ts b/console/src/app/modules/avatar/avatar.component.ts
new file mode 100644
index 000000000..399b93793
--- /dev/null
+++ b/console/src/app/modules/avatar/avatar.component.ts
@@ -0,0 +1,26 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-avatar',
+    templateUrl: './avatar.component.html',
+    styleUrls: ['./avatar.component.scss'],
+})
+export class AvatarComponent implements OnInit {
+    @Input() name: string = '';
+    @Input() credentials: string = '';
+    @Input() size: number = 24;
+    @Input() fontSize: number = 16;
+    @Input() active: boolean = false;
+    constructor() { }
+
+    ngOnInit(): void {
+        if (!this.credentials) {
+            const split: string[] = this.name.split(' ');
+            this.credentials = split[0].charAt(0) + (split[1] ? split[1].charAt(0) : '');
+        }
+
+        if (this.size > 50) {
+            this.fontSize = 32;
+        }
+    }
+}
diff --git a/console/src/app/modules/avatar/avatar.module.ts b/console/src/app/modules/avatar/avatar.module.ts
new file mode 100644
index 000000000..bb98db527
--- /dev/null
+++ b/console/src/app/modules/avatar/avatar.module.ts
@@ -0,0 +1,18 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { AvatarComponent } from './avatar.component';
+
+
+
+@NgModule({
+    declarations: [AvatarComponent],
+    imports: [
+        CommonModule,
+    ],
+    exports: [
+        AvatarComponent,
+    ],
+})
+export class AvatarModule { }
+
diff --git a/console/src/app/modules/changes/changes.component.scss b/console/src/app/modules/changes/changes.component.scss
index b073eb1cb..7a6fd9773 100644
--- a/console/src/app/modules/changes/changes.component.scss
+++ b/console/src/app/modules/changes/changes.component.scss
@@ -6,12 +6,11 @@
 }
 
 .scroll-container {
-    max-height: 540px;
+    max-height: 60vh;
     overflow-y: scroll;
 
     .item {
         box-sizing: border-box;
-        height: 50px;
         padding: .5rem;
         margin: .25rem 0;
         border-radius: .5rem;
diff --git a/console/src/app/modules/changes/changes.component.ts b/console/src/app/modules/changes/changes.component.ts
index f3d160086..56a877c02 100644
--- a/console/src/app/modules/changes/changes.component.ts
+++ b/console/src/app/modules/changes/changes.component.ts
@@ -20,6 +20,7 @@ export class ChangesComponent implements OnInit {
     @Input() public id: string = '';
     @Input() public sortDirectionAsc: boolean = true;
     public errorMessage: string = '';
+    public bottom: boolean = false;
 
     // Source data
     private _done: BehaviorSubject<any> = new BehaviorSubject(false);
@@ -93,36 +94,36 @@ export class ChangesComponent implements OnInit {
     private mapAndUpdate(col: Promise<Changes>): any {
         if (this._done.value || this._loading.value) { return; }
 
-        // loading
-        this._loading.next(true);
-
         // Map snapshot with doc ref (needed for cursor)
-        return from(col).pipe(
-            tap((res: Changes) => {
-                console.log('more changes');
-                let values = res.toObject().changesList;
-                // If prepending, reverse the batch order
-                values = false ? values.reverse() : values;
+        if (!this.bottom) {
+            // loading
+            this._loading.next(true);
 
-                // update source with new values, done loading
-                this._data.next(values);
-                console.log(values);
+            return from(col).pipe(
+                tap((res: Changes) => {
+                    let values = res.toObject().changesList;
+                    // If prepending, reverse the batch order
+                    values = false ? values.reverse() : values;
 
-                // console.log(values);
-                this._loading.next(false);
+                    // update source with new values, done loading
+                    this._data.next(values);
 
-                // no more values, mark done
-                if (!values.length) {
-                    this._done.next(true);
-                }
-            }),
-            catchError(err => {
-                console.error(err);
-                this._loading.next(false);
-                this.errorMessage = err.message;
-                return of([]);
-            }),
-            take(1),
-        ).subscribe();
+                    this._loading.next(false);
+
+                    // no more values, mark done
+                    if (!values.length) {
+                        this._done.next(true);
+                    }
+                }),
+                catchError(err => {
+                    console.error(err);
+                    this._loading.next(false);
+                    this.errorMessage = decodeURI(err.message);
+                    this.bottom = true;
+                    return of([]);
+                }),
+                take(1),
+            ).subscribe();
+        }
     }
 }
diff --git a/console/src/app/modules/meta-layout/meta-layout.component.html b/console/src/app/modules/meta-layout/meta-layout.component.html
index c950d9f64..50f736c39 100644
--- a/console/src/app/modules/meta-layout/meta-layout.component.html
+++ b/console/src/app/modules/meta-layout/meta-layout.component.html
@@ -3,7 +3,7 @@
         <ng-content></ng-content>
     </div>
     <div class="meta" [ngClass]="{'hidden': hidden}">
-        <button (click)="hidden = !hidden" color="accent" class="hide" mat-icon-button><i
+        <button (click)="hidden = !hidden" color="primary" class="hide" mat-icon-button><i
                 class="las la-arrow-right"></i></button>
         <ng-content class="meta-content" select="metainfo"></ng-content>
     </div>
diff --git a/console/src/app/modules/meta-layout/meta-layout.component.scss b/console/src/app/modules/meta-layout/meta-layout.component.scss
index fb6d3a6a9..b7adc6c39 100644
--- a/console/src/app/modules/meta-layout/meta-layout.component.scss
+++ b/console/src/app/modules/meta-layout/meta-layout.component.scss
@@ -15,7 +15,6 @@
     }
 
     .meta {
-        overflow-y: hidden;
         position: relative;
         flex: 1 0 300px;
         background: linear-gradient(to bottom right, #4072b410 20%,transparent 50%);
diff --git a/console/src/app/pages/projects/project-contributors/project-contributors.component.html b/console/src/app/modules/project-contributors/project-contributors.component.html
similarity index 75%
rename from console/src/app/pages/projects/project-contributors/project-contributors.component.html
rename to console/src/app/modules/project-contributors/project-contributors.component.html
index 2e7f72d99..c9e572aa6 100644
--- a/console/src/app/pages/projects/project-contributors/project-contributors.component.html
+++ b/console/src/app/modules/project-contributors/project-contributors.component.html
@@ -7,7 +7,11 @@
                 <ng-container *ngFor="let member of membersSubject | async">
                     <div (click)="showDetail()" class="avatar-circle"
                         matTooltip="{{ member.email }} | {{member.rolesList?.join(' ')}}">
-                        <i class="avatar las la-user-circle"></i>
+                        <app-avatar *ngIf="member && (member.displayName || (member.firstName && member.lastName))"
+                            class="avatar dontcloseonclick"
+                            [name]="member.displayName ? member.displayName : (member.firstName + ' '+ member.lastName)"
+                            [size]="32">
+                        </app-avatar>
                     </div>
                 </ng-container>
             </ng-container>
diff --git a/console/src/app/pages/projects/project-contributors/project-contributors.component.scss b/console/src/app/modules/project-contributors/project-contributors.component.scss
similarity index 100%
rename from console/src/app/pages/projects/project-contributors/project-contributors.component.scss
rename to console/src/app/modules/project-contributors/project-contributors.component.scss
diff --git a/console/src/app/pages/projects/project-contributors/project-contributors.component.spec.ts b/console/src/app/modules/project-contributors/project-contributors.component.spec.ts
similarity index 100%
rename from console/src/app/pages/projects/project-contributors/project-contributors.component.spec.ts
rename to console/src/app/modules/project-contributors/project-contributors.component.spec.ts
diff --git a/console/src/app/pages/projects/project-contributors/project-contributors.component.ts b/console/src/app/modules/project-contributors/project-contributors.component.ts
similarity index 94%
rename from console/src/app/pages/projects/project-contributors/project-contributors.component.ts
rename to console/src/app/modules/project-contributors/project-contributors.component.ts
index bedf45f01..e81099a67 100644
--- a/console/src/app/pages/projects/project-contributors/project-contributors.component.ts
+++ b/console/src/app/modules/project-contributors/project-contributors.component.ts
@@ -15,10 +15,7 @@ import {
 import { ProjectService } from 'src/app/services/project.service';
 import { ToastService } from 'src/app/services/toast.service';
 
-import {
-    CreationType,
-    MemberCreateDialogComponent,
-} from '../../../modules/add-member-dialog/member-create-dialog.component';
+import { CreationType, MemberCreateDialogComponent } from '../../modules/add-member-dialog/member-create-dialog.component';
 
 @Component({
     selector: 'app-project-contributors',
@@ -43,7 +40,6 @@ export class ProjectContributorsComponent implements OnInit {
         private router: Router) { }
 
     public ngOnInit(): void {
-        console.log('project grant members');
         const promise: Promise<ProjectMemberSearchResponse> | undefined =
             this.projectType === ProjectType.PROJECTTYPE_OWNED ?
                 this.projectService.SearchProjectMembers(this.project.projectId, 100, 0) :
@@ -59,7 +55,6 @@ export class ProjectContributorsComponent implements OnInit {
                 catchError(() => of([])),
                 finalize(() => this.loadingSubject.next(false)),
             ).subscribe(members => {
-                console.log(members);
                 this.membersSubject.next(members);
             });
         }
diff --git a/console/src/app/modules/project-contributors/project-contributors.module.ts b/console/src/app/modules/project-contributors/project-contributors.module.ts
new file mode 100644
index 000000000..5a501d9f9
--- /dev/null
+++ b/console/src/app/modules/project-contributors/project-contributors.module.ts
@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { MemberCreateDialogModule } from '../add-member-dialog/member-create-dialog.module';
+import { AvatarModule } from '../avatar/avatar.module';
+import { ProjectContributorsComponent } from './project-contributors.component';
+
+
+
+@NgModule({
+    declarations: [ProjectContributorsComponent],
+    imports: [
+        MemberCreateDialogModule,
+        CommonModule,
+        TranslateModule,
+        MatTooltipModule,
+        MatIconModule,
+        MatButtonModule,
+        AvatarModule,
+    ],
+    exports: [
+        ProjectContributorsComponent,
+    ],
+})
+export class ProjectContributorsModule { }
+
diff --git a/console/src/app/pages/projects/project-members/project-members-datasource.ts b/console/src/app/modules/project-members/project-members-datasource.ts
similarity index 98%
rename from console/src/app/pages/projects/project-members/project-members-datasource.ts
rename to console/src/app/modules/project-members/project-members-datasource.ts
index 3c87e8e59..5d44939e8 100644
--- a/console/src/app/pages/projects/project-members/project-members-datasource.ts
+++ b/console/src/app/modules/project-members/project-members-datasource.ts
@@ -36,7 +36,6 @@ export class ProjectMembersDataSource extends DataSource<ProjectMember.AsObject>
             from(promise).pipe(
                 map(resp => {
                     this.totalResult = resp.toObject().totalResult;
-                    console.log(this.totalResult);
                     return resp.toObject().resultList;
                 }),
                 catchError(() => of([])),
diff --git a/console/src/app/pages/projects/project-members/project-members-routing.module.ts b/console/src/app/modules/project-members/project-members-routing.module.ts
similarity index 100%
rename from console/src/app/pages/projects/project-members/project-members-routing.module.ts
rename to console/src/app/modules/project-members/project-members-routing.module.ts
diff --git a/console/src/app/pages/projects/project-members/project-members.component.html b/console/src/app/modules/project-members/project-members.component.html
similarity index 100%
rename from console/src/app/pages/projects/project-members/project-members.component.html
rename to console/src/app/modules/project-members/project-members.component.html
diff --git a/console/src/app/pages/projects/project-members/project-members.component.scss b/console/src/app/modules/project-members/project-members.component.scss
similarity index 100%
rename from console/src/app/pages/projects/project-members/project-members.component.scss
rename to console/src/app/modules/project-members/project-members.component.scss
diff --git a/console/src/app/pages/projects/project-members/project-members.component.spec.ts b/console/src/app/modules/project-members/project-members.component.spec.ts
similarity index 100%
rename from console/src/app/pages/projects/project-members/project-members.component.spec.ts
rename to console/src/app/modules/project-members/project-members.component.spec.ts
diff --git a/console/src/app/pages/projects/project-members/project-members.component.ts b/console/src/app/modules/project-members/project-members.component.ts
similarity index 99%
rename from console/src/app/pages/projects/project-members/project-members.component.ts
rename to console/src/app/modules/project-members/project-members.component.ts
index f7dc123ac..2a6bb1664 100644
--- a/console/src/app/pages/projects/project-members/project-members.component.ts
+++ b/console/src/app/modules/project-members/project-members.component.ts
@@ -33,7 +33,6 @@ export class ProjectMembersComponent implements AfterViewInit {
         this.route.params.subscribe(params => {
             this.projectService.GetProjectById(params.projectid).then(project => {
                 this.project = project.toObject();
-                console.log(this.project);
                 this.dataSource = new ProjectMembersDataSource(this.projectService);
                 this.dataSource.loadMembers(this.project, this.projectType, 0, 25, 'asc');
             });
diff --git a/console/src/app/pages/projects/project-members/project-members.module.ts b/console/src/app/modules/project-members/project-members.module.ts
similarity index 100%
rename from console/src/app/pages/projects/project-members/project-members.module.ts
rename to console/src/app/modules/project-members/project-members.module.ts
diff --git a/console/src/app/modules/project-roles/project-roles-datasource.ts b/console/src/app/modules/project-roles/project-roles-datasource.ts
index ce4e18a8b..5abf5e154 100644
--- a/console/src/app/modules/project-roles/project-roles-datasource.ts
+++ b/console/src/app/modules/project-roles/project-roles-datasource.ts
@@ -31,7 +31,6 @@ export class ProjectRolesDataSource extends DataSource<ProjectRole.AsObject> {
             catchError(() => of([])),
             finalize(() => this.loadingSubject.next(false)),
         ).subscribe(roles => {
-            console.log(roles);
             this.rolesSubject.next(roles);
         });
     }
diff --git a/console/src/app/modules/search-project-autocomplete/search-project-autocomplete.component.ts b/console/src/app/modules/search-project-autocomplete/search-project-autocomplete.component.ts
index 28db3d83c..2b44d82ff 100644
--- a/console/src/app/modules/search-project-autocomplete/search-project-autocomplete.component.ts
+++ b/console/src/app/modules/search-project-autocomplete/search-project-autocomplete.component.ts
@@ -48,7 +48,6 @@ export class SearchProjectAutocompleteComponent {
                 }),
                 // finalize(() => this.isLoading = false),
             ).subscribe((projects) => {
-                console.log(projects.toObject().resultList);
                 this.isLoading = false;
                 this.filteredProjects = projects.toObject().resultList;
             });
diff --git a/console/src/app/modules/search-roles-autocomplete/search-roles-autocomplete.component.ts b/console/src/app/modules/search-roles-autocomplete/search-roles-autocomplete.component.ts
index 86f99add8..1f59c893a 100644
--- a/console/src/app/modules/search-roles-autocomplete/search-roles-autocomplete.component.ts
+++ b/console/src/app/modules/search-roles-autocomplete/search-roles-autocomplete.component.ts
@@ -48,11 +48,9 @@ export class SearchRolesAutocompleteComponent {
                     return from(this.projectService.SearchProjectRoles(this.projectId, 10, 0, [query]));
                 }),
             ).subscribe((roles) => {
-                console.log(roles.toObject().resultList);
                 this.isLoading = false;
                 this.filteredRoles = roles.toObject().resultList;
             }, error => {
-                console.log(error);
                 this.isLoading = false;
             });
     }
diff --git a/console/src/app/pages/apps/app-create/app-create.component.ts b/console/src/app/pages/apps/app-create/app-create.component.ts
index f507208b4..cb47807f3 100644
--- a/console/src/app/pages/apps/app-create/app-create.component.ts
+++ b/console/src/app/pages/apps/app-create/app-create.component.ts
@@ -99,8 +99,6 @@ export class AppCreateComponent implements OnInit, OnDestroy {
         this.oidcApp.responseTypesList = this.responseTypesList?.value;
         this.oidcApp.authMethodType = this.authMethodType?.value;
 
-        console.log(this.oidcApp);
-
         this.projectService
             .CreateOIDCApp(this.oidcApp)
             .then((data: Application) => {
@@ -119,7 +117,6 @@ export class AppCreateComponent implements OnInit, OnDestroy {
             });
 
             dialogRef.afterClosed().subscribe(result => {
-                console.log('The dialog was closed');
                 this.router.navigate(['projects', this.projectId, 'apps', app.id]);
             });
         } else {
diff --git a/console/src/app/pages/apps/app-detail/app-detail.component.ts b/console/src/app/pages/apps/app-detail/app-detail.component.ts
index 4955af7e0..6719bd935 100644
--- a/console/src/app/pages/apps/app-detail/app-detail.component.ts
+++ b/console/src/app/pages/apps/app-detail/app-detail.component.ts
@@ -118,7 +118,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
         this.projectService.GetApplicationById(projectid, id).then(app => {
             this.app = app.toObject();
             this.appNameForm.patchValue(this.app);
-            console.log(this.grpcService.clientid, this.app.oidcConfig?.clientId);
 
             if (this.app.state !== AppState.APPSTATE_ACTIVE) {
                 this.appNameForm.controls['name'].disable();
@@ -220,8 +219,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
                 this.app.oidcConfig.redirectUrisList = this.redirectUrisList;
                 this.app.oidcConfig.postLogoutRedirectUrisList = this.postLogoutRedirectUrisList;
 
-                console.log(this.app.oidcConfig);
-
                 this.projectService
                     .UpdateOIDCAppConfig(this.projectId, this.app.id, this.app.oidcConfig)
                     .then((data: OIDCConfig) => {
@@ -235,9 +232,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     }
 
     public regenerateOIDCClientSecret(): void {
-        console.log(this.app.id, this.projectId);
         this.projectService.RegenerateOIDCClientSecret(this.app.id, this.projectId).then((data: OIDCConfig) => {
-            console.log(data.toObject());
             this.toast.showInfo('OIDC Secret Regenerated');
             this.dialog.open(AppSecretDialogComponent, {
                 data: {
diff --git a/console/src/app/pages/projects/granted-project-detail/granted-project-detail.component.html b/console/src/app/pages/granted-projects/granted-project-detail/granted-project-detail.component.html
similarity index 100%
rename from console/src/app/pages/projects/granted-project-detail/granted-project-detail.component.html
rename to console/src/app/pages/granted-projects/granted-project-detail/granted-project-detail.component.html
diff --git a/console/src/app/pages/projects/granted-project-detail/granted-project-detail.component.scss b/console/src/app/pages/granted-projects/granted-project-detail/granted-project-detail.component.scss
similarity index 100%
rename from console/src/app/pages/projects/granted-project-detail/granted-project-detail.component.scss
rename to console/src/app/pages/granted-projects/granted-project-detail/granted-project-detail.component.scss
diff --git a/console/src/app/pages/projects/granted-project-detail/granted-project-detail.component.spec.ts b/console/src/app/pages/granted-projects/granted-project-detail/granted-project-detail.component.spec.ts
similarity index 100%
rename from console/src/app/pages/projects/granted-project-detail/granted-project-detail.component.spec.ts
rename to console/src/app/pages/granted-projects/granted-project-detail/granted-project-detail.component.spec.ts
diff --git a/console/src/app/pages/projects/granted-project-detail/granted-project-detail.component.ts b/console/src/app/pages/granted-projects/granted-project-detail/granted-project-detail.component.ts
similarity index 98%
rename from console/src/app/pages/projects/granted-project-detail/granted-project-detail.component.ts
rename to console/src/app/pages/granted-projects/granted-project-detail/granted-project-detail.component.ts
index 8adc33d3e..de8e5a4e8 100644
--- a/console/src/app/pages/projects/granted-project-detail/granted-project-detail.component.ts
+++ b/console/src/app/pages/granted-projects/granted-project-detail/granted-project-detail.component.ts
@@ -86,7 +86,6 @@ export class GrantedProjectDetailComponent implements OnInit, OnDestroy {
         if (this.projectId && this.grantId) {
             this.projectService.GetGrantedProjectByID(this.projectId, this.grantId).then(proj => {
                 this.project = proj.toObject();
-                console.log(this.project);
             }).catch(error => {
                 this.toast.showError(error.message);
             });
diff --git a/console/src/app/pages/projects/granted-project-grid/granted-project-grid.component.html b/console/src/app/pages/granted-projects/granted-project-grid/granted-project-grid.component.html
similarity index 100%
rename from console/src/app/pages/projects/granted-project-grid/granted-project-grid.component.html
rename to console/src/app/pages/granted-projects/granted-project-grid/granted-project-grid.component.html
diff --git a/console/src/app/pages/projects/granted-project-grid/granted-project-grid.component.scss b/console/src/app/pages/granted-projects/granted-project-grid/granted-project-grid.component.scss
similarity index 100%
rename from console/src/app/pages/projects/granted-project-grid/granted-project-grid.component.scss
rename to console/src/app/pages/granted-projects/granted-project-grid/granted-project-grid.component.scss
diff --git a/console/src/app/pages/projects/granted-project-grid/granted-project-grid.component.spec.ts b/console/src/app/pages/granted-projects/granted-project-grid/granted-project-grid.component.spec.ts
similarity index 100%
rename from console/src/app/pages/projects/granted-project-grid/granted-project-grid.component.spec.ts
rename to console/src/app/pages/granted-projects/granted-project-grid/granted-project-grid.component.spec.ts
diff --git a/console/src/app/pages/projects/granted-project-grid/granted-project-grid.component.ts b/console/src/app/pages/granted-projects/granted-project-grid/granted-project-grid.component.ts
similarity index 100%
rename from console/src/app/pages/projects/granted-project-grid/granted-project-grid.component.ts
rename to console/src/app/pages/granted-projects/granted-project-grid/granted-project-grid.component.ts
diff --git a/console/src/app/pages/projects/granted-project-list/granted-project-list.component.html b/console/src/app/pages/granted-projects/granted-project-list/granted-project-list.component.html
similarity index 100%
rename from console/src/app/pages/projects/granted-project-list/granted-project-list.component.html
rename to console/src/app/pages/granted-projects/granted-project-list/granted-project-list.component.html
diff --git a/console/src/app/pages/projects/granted-project-list/granted-project-list.component.scss b/console/src/app/pages/granted-projects/granted-project-list/granted-project-list.component.scss
similarity index 100%
rename from console/src/app/pages/projects/granted-project-list/granted-project-list.component.scss
rename to console/src/app/pages/granted-projects/granted-project-list/granted-project-list.component.scss
diff --git a/console/src/app/pages/projects/granted-project-list/granted-project-list.component.spec.ts b/console/src/app/pages/granted-projects/granted-project-list/granted-project-list.component.spec.ts
similarity index 100%
rename from console/src/app/pages/projects/granted-project-list/granted-project-list.component.spec.ts
rename to console/src/app/pages/granted-projects/granted-project-list/granted-project-list.component.spec.ts
diff --git a/console/src/app/pages/projects/granted-project-list/granted-project-list.component.ts b/console/src/app/pages/granted-projects/granted-project-list/granted-project-list.component.ts
similarity index 98%
rename from console/src/app/pages/projects/granted-project-list/granted-project-list.component.ts
rename to console/src/app/pages/granted-projects/granted-project-list/granted-project-list.component.ts
index fff86790b..6dd12c675 100644
--- a/console/src/app/pages/projects/granted-project-list/granted-project-list.component.ts
+++ b/console/src/app/pages/granted-projects/granted-project-list/granted-project-list.component.ts
@@ -90,7 +90,6 @@ export class GrantedProjectListComponent implements OnInit, OnDestroy {
             this.totalResult = res.toObject().totalResult;
             this.dataSource.data = this.grantedProjectList;
             this.loadingSubject.next(false);
-            console.log(this.grantedProjectList);
         }).catch(error => {
             console.error(error);
             this.toast.showError(error.message);
diff --git a/console/src/app/pages/granted-projects/granted-projects-routing.module.ts b/console/src/app/pages/granted-projects/granted-projects-routing.module.ts
new file mode 100644
index 000000000..8d31c2aec
--- /dev/null
+++ b/console/src/app/pages/granted-projects/granted-projects-routing.module.ts
@@ -0,0 +1,48 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard } from 'src/app/guards/auth.guard';
+import { RoleGuard } from 'src/app/guards/role.guard';
+
+import { GrantedProjectDetailComponent } from './granted-project-detail/granted-project-detail.component';
+import { GrantedProjectsComponent } from './granted-projects.component';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: GrantedProjectsComponent,
+        data: { animation: 'HomePage' },
+    },
+    {
+        path: 'create',
+        loadChildren: () => import('../project-create/project-create.module').then(m => m.ProjectCreateModule),
+        canActivate: [AuthGuard, RoleGuard],
+        data: {
+            roles: ['project.write'],
+        },
+    },
+    {
+        path: ':id/grant/:grantId',
+        component: GrantedProjectDetailComponent,
+        data: { animation: 'HomePage' },
+    },
+    {
+        path: ':projectid/members',
+        loadChildren: () => import('../../modules/project-members/project-members.module').then(m => m.ProjectMembersModule),
+    },
+    {
+        path: ':projectid/roles/create',
+        loadChildren: () => import('../project-role-create/project-role-create.module').then(m => m.ProjectRoleCreateModule),
+
+    },
+    {
+        path: ':projectid/grants/create',
+        loadChildren: () => import('../project-grant-create/project-grant-create.module')
+            .then(m => m.ProjectGrantCreateModule),
+    },
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule],
+})
+export class GrantedProjectsRoutingModule { }
diff --git a/console/src/app/pages/projects/projects.component.html b/console/src/app/pages/granted-projects/granted-projects.component.html
similarity index 75%
rename from console/src/app/pages/projects/projects.component.html
rename to console/src/app/pages/granted-projects/granted-projects.component.html
index 67e4a06fb..c6b4b857b 100644
--- a/console/src/app/pages/projects/projects.component.html
+++ b/console/src/app/pages/granted-projects/granted-projects.component.html
@@ -2,9 +2,6 @@
     <h1>{{ 'PROJECT.PAGES.LIST' | translate }}</h1>
     <p class="sub">{{ 'PROJECT.PAGES.LISTDESCRIPTION' | translate }}</p>
 
-    <h2>Owned Projects</h2>
-    <app-owned-project-list></app-owned-project-list>
-
     <h2>Granted Projects</h2>
     <app-granted-project-list>
     </app-granted-project-list>
diff --git a/console/src/app/pages/projects/projects.component.scss b/console/src/app/pages/granted-projects/granted-projects.component.scss
similarity index 100%
rename from console/src/app/pages/projects/projects.component.scss
rename to console/src/app/pages/granted-projects/granted-projects.component.scss
diff --git a/console/src/app/pages/granted-projects/granted-projects.component.spec.ts b/console/src/app/pages/granted-projects/granted-projects.component.spec.ts
new file mode 100644
index 000000000..adfbc0f8e
--- /dev/null
+++ b/console/src/app/pages/granted-projects/granted-projects.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GrantedProjectsComponent } from './granted-projects.component';
+
+describe('GrantedProjectsComponent', () => {
+    let component: GrantedProjectsComponent;
+    let fixture: ComponentFixture<GrantedProjectsComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [GrantedProjectsComponent],
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(GrantedProjectsComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/console/src/app/pages/granted-projects/granted-projects.component.ts b/console/src/app/pages/granted-projects/granted-projects.component.ts
new file mode 100644
index 000000000..544cc493d
--- /dev/null
+++ b/console/src/app/pages/granted-projects/granted-projects.component.ts
@@ -0,0 +1,29 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Subscription } from 'rxjs';
+
+@Component({
+    selector: 'app-granted-projects',
+    templateUrl: './granted-projects.component.html',
+    styleUrls: ['./granted-projects.component.scss'],
+})
+export class GrantedProjectsComponent implements OnInit, OnDestroy {
+    // public projectId: string = '';
+    // public grantId: string = '';
+    private sub: Subscription = new Subscription();
+    constructor(private route: ActivatedRoute,
+    ) {
+        // this.route.params.subscribe((params) => {
+        //     this.projectId = params.projectId;
+        //     this.grantId = params.grantId;
+        // });
+    }
+
+    ngOnInit(): void {
+    }
+
+
+    public ngOnDestroy(): void {
+        // this.sub.unsubscribe();
+    }
+}
diff --git a/console/src/app/pages/granted-projects/granted-projects.module.ts b/console/src/app/pages/granted-projects/granted-projects.module.ts
new file mode 100644
index 000000000..6012df3bb
--- /dev/null
+++ b/console/src/app/pages/granted-projects/granted-projects.module.ts
@@ -0,0 +1,91 @@
+import { CommonModule } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+
+import { HttpLoaderFactory } from '../../app.module';
+import { HasRoleModule } from '../../directives/has-role/has-role.module';
+import { CardModule } from '../../modules/card/card.module';
+import { ChangesModule } from '../../modules/changes/changes.module';
+import { MetaLayoutModule } from '../../modules/meta-layout/meta-layout.module';
+import { ProjectContributorsModule } from '../../modules/project-contributors/project-contributors.module';
+import { ProjectRolesModule } from '../../modules/project-roles/project-roles.module';
+import { SearchUserAutocompleteModule } from '../../modules/search-user-autocomplete/search-user-autocomplete.module';
+import { PipesModule } from '../../pipes/pipes.module';
+import { OrgContributorsModule } from '../orgs/org-contributors/org-contributors.module';
+import { UserListModule } from '../user-list/user-list.module';
+import { GrantedProjectDetailComponent } from './granted-project-detail/granted-project-detail.component';
+import { GrantedProjectGridComponent } from './granted-project-grid/granted-project-grid.component';
+import { GrantedProjectListComponent } from './granted-project-list/granted-project-list.component';
+import { GrantedProjectsRoutingModule } from './granted-projects-routing.module';
+import { GrantedProjectsComponent } from './granted-projects.component';
+
+@NgModule({
+    declarations: [
+        GrantedProjectsComponent,
+        GrantedProjectListComponent,
+        GrantedProjectGridComponent,
+        GrantedProjectDetailComponent,
+    ],
+    imports: [
+        CommonModule,
+        GrantedProjectsRoutingModule,
+        ProjectContributorsModule,
+        FormsModule,
+        TranslateModule,
+        ReactiveFormsModule,
+        HasRoleModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatFormFieldModule,
+        MatInputModule,
+        ChangesModule,
+        UserListModule,
+        MatMenuModule,
+        MatChipsModule,
+        MatIconModule,
+        MatSelectModule,
+        MatButtonModule,
+        MatProgressSpinnerModule,
+        MetaLayoutModule,
+        MatProgressBarModule,
+        MatDialogModule,
+        MatButtonToggleModule,
+        MatTabsModule,
+        ProjectRolesModule,
+        SearchUserAutocompleteModule,
+        MatCheckboxModule,
+        CardModule,
+        MatTooltipModule,
+        MatSortModule,
+        PipesModule,
+        OrgContributorsModule,
+        TranslateModule.forChild({
+            loader: {
+                provide: TranslateLoader,
+                useFactory: HttpLoaderFactory,
+                deps: [HttpClient],
+            },
+        }),
+    ],
+    schemas: [NO_ERRORS_SCHEMA],
+})
+export class GrantedProjectsModule { }
diff --git a/console/src/app/pages/projects/project-grant-members/project-grant-members-datasource.ts b/console/src/app/pages/granted-projects/project-grant-members/project-grant-members-datasource.ts
similarity index 98%
rename from console/src/app/pages/projects/project-grant-members/project-grant-members-datasource.ts
rename to console/src/app/pages/granted-projects/project-grant-members/project-grant-members-datasource.ts
index 7fc9ffda6..c9c8c6e37 100644
--- a/console/src/app/pages/projects/project-grant-members/project-grant-members-datasource.ts
+++ b/console/src/app/pages/granted-projects/project-grant-members/project-grant-members-datasource.ts
@@ -34,7 +34,6 @@ export class ProjectGrantMembersDataSource extends DataSource<ProjectMember.AsOb
                 catchError(() => of([])),
                 finalize(() => this.loadingSubject.next(false)),
             ).subscribe(members => {
-                console.log(members);
                 this.membersSubject.next(members);
             });
 
diff --git a/console/src/app/pages/projects/project-grant-members/project-grant-members.component.html b/console/src/app/pages/granted-projects/project-grant-members/project-grant-members.component.html
similarity index 100%
rename from console/src/app/pages/projects/project-grant-members/project-grant-members.component.html
rename to console/src/app/pages/granted-projects/project-grant-members/project-grant-members.component.html
diff --git a/console/src/app/pages/projects/project-grant-members/project-grant-members.component.scss b/console/src/app/pages/granted-projects/project-grant-members/project-grant-members.component.scss
similarity index 100%
rename from console/src/app/pages/projects/project-grant-members/project-grant-members.component.scss
rename to console/src/app/pages/granted-projects/project-grant-members/project-grant-members.component.scss
diff --git a/console/src/app/pages/projects/project-grant-members/project-grant-members.component.spec.ts b/console/src/app/pages/granted-projects/project-grant-members/project-grant-members.component.spec.ts
similarity index 100%
rename from console/src/app/pages/projects/project-grant-members/project-grant-members.component.spec.ts
rename to console/src/app/pages/granted-projects/project-grant-members/project-grant-members.component.spec.ts
diff --git a/console/src/app/pages/projects/project-grant-members/project-grant-members.component.ts b/console/src/app/pages/granted-projects/project-grant-members/project-grant-members.component.ts
similarity index 99%
rename from console/src/app/pages/projects/project-grant-members/project-grant-members.component.ts
rename to console/src/app/pages/granted-projects/project-grant-members/project-grant-members.component.ts
index bebd026ea..1a91af2cb 100644
--- a/console/src/app/pages/projects/project-grant-members/project-grant-members.component.ts
+++ b/console/src/app/pages/granted-projects/project-grant-members/project-grant-members.component.ts
@@ -101,7 +101,6 @@ export class ProjectGrantMembersComponent implements AfterViewInit, OnInit {
 
         dialogRef.afterClosed().subscribe(resp => {
             if (resp) {
-                console.log(resp);
                 const users: User.AsObject[] = resp.users;
                 const roles: string[] = resp.roles;
 
diff --git a/console/src/app/pages/home/home.component.html b/console/src/app/pages/home/home.component.html
index beb9c0242..fa420fdf6 100644
--- a/console/src/app/pages/home/home.component.html
+++ b/console/src/app/pages/home/home.component.html
@@ -4,7 +4,6 @@
         <ng-template #lighttheme>
             <img src="../assets/images/zitadel-logo-oneline-lightdesign.svg" />
         </ng-template>
-        <p>{{'HOME.DESCRIPTION' | translate}}</p>
     </div>
 
     <div class="container">
diff --git a/console/src/app/pages/home/home.component.scss b/console/src/app/pages/home/home.component.scss
index 0db52f18e..9a95cc959 100644
--- a/console/src/app/pages/home/home.component.scss
+++ b/console/src/app/pages/home/home.component.scss
@@ -53,8 +53,8 @@
         }
         
         img {
-            height: 90px;
-            margin-bottom: 2rem;
+            height: 60px;
+            align-self: flex-end;
         }
 	}
 
@@ -73,14 +73,6 @@
 			display: flex;
             flex-direction: column;
             transition: border-color .1s;
-            
-            &:hover {
-                i {
-                    color: #fe11e280;
-                }
-                // border-width: 2px;
-                border-color: #fe11e270;
-            }
 
 			.top {
 				padding: 1rem 2rem;
diff --git a/console/src/app/pages/iam/iam-contributors/iam-contributors.component.html b/console/src/app/pages/iam/iam-contributors/iam-contributors.component.html
index c279c8ab8..b56d0ed19 100644
--- a/console/src/app/pages/iam/iam-contributors/iam-contributors.component.html
+++ b/console/src/app/pages/iam/iam-contributors/iam-contributors.component.html
@@ -7,7 +7,11 @@
                 <ng-container *ngFor="let member of membersSubject | async">
                     <div (click)="showDetail()" class="avatar-circle"
                         matTooltip="{{ member.email }} | {{member.rolesList?.join(' ')}}">
-                        <i class="avatar las la-user-circle"></i>
+                        <app-avatar *ngIf="member && (member.displayName || (member.firstName && member.lastName))"
+                            class="avatar dontcloseonclick"
+                            [name]="member.displayName ? member.displayName : (member.firstName + ' '+ member.lastName)"
+                            [size]="32">
+                        </app-avatar>
                     </div>
                 </ng-container>
             </ng-container>
diff --git a/console/src/app/pages/iam/iam-contributors/iam-contributors.component.ts b/console/src/app/pages/iam/iam-contributors/iam-contributors.component.ts
index 9b1399bd3..a39f29e91 100644
--- a/console/src/app/pages/iam/iam-contributors/iam-contributors.component.ts
+++ b/console/src/app/pages/iam/iam-contributors/iam-contributors.component.ts
@@ -53,7 +53,6 @@ export class IamContributorsComponent implements OnInit {
             catchError(() => of([])),
             finalize(() => this.loadingSubject.next(false)),
         ).subscribe(members => {
-            console.log(members);
             this.membersSubject.next(members);
         });
     }
diff --git a/console/src/app/pages/iam/iam-contributors/iam-contributors.module.ts b/console/src/app/pages/iam/iam-contributors/iam-contributors.module.ts
index 0ef8819a5..f116ac83a 100644
--- a/console/src/app/pages/iam/iam-contributors/iam-contributors.module.ts
+++ b/console/src/app/pages/iam/iam-contributors/iam-contributors.module.ts
@@ -12,6 +12,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
+import { AvatarModule } from 'src/app/modules/avatar/avatar.module';
 
 import { MemberCreateDialogModule } from '../../../modules/add-member-dialog/member-create-dialog.module';
 import { IamContributorsComponent } from './iam-contributors.component';
@@ -30,6 +31,7 @@ import { IamContributorsComponent } from './iam-contributors.component';
         MatPaginatorModule,
         MatIconModule,
         RouterModule,
+        AvatarModule,
         MatProgressSpinnerModule,
         MatCheckboxModule,
         MatTooltipModule,
diff --git a/console/src/app/pages/iam/iam-members/iam-members-datasource.ts b/console/src/app/pages/iam/iam-members/iam-members-datasource.ts
index 8fcde2992..78029b9e1 100644
--- a/console/src/app/pages/iam/iam-members/iam-members-datasource.ts
+++ b/console/src/app/pages/iam/iam-members/iam-members-datasource.ts
@@ -32,7 +32,6 @@ export class IamMembersDataSource extends DataSource<ProjectMember.AsObject> {
             from(promise).pipe(
                 map(resp => {
                     this.totalResult = resp.toObject().totalResult;
-                    console.log(this.totalResult);
                     return resp.toObject().resultList;
                 }),
                 catchError(() => of([])),
diff --git a/console/src/app/pages/orgs/org-contributors/org-contributors.component.html b/console/src/app/pages/orgs/org-contributors/org-contributors.component.html
index 3a91696de..100b64eda 100644
--- a/console/src/app/pages/orgs/org-contributors/org-contributors.component.html
+++ b/console/src/app/pages/orgs/org-contributors/org-contributors.component.html
@@ -7,7 +7,11 @@
                 <ng-container *ngFor="let member of membersSubject | async">
                     <div (click)="showDetail()" class="avatar-circle"
                         matTooltip="{{ member.email }} | {{member.rolesList?.join(' ')}}">
-                        <i class="avatar las la-user-circle"></i>
+                        <app-avatar *ngIf="member && (member.displayName || (member.firstName && member.lastName))"
+                            class="avatar dontcloseonclick"
+                            [name]="member.displayName ? member.displayName : (member.firstName + ' '+ member.lastName)"
+                            [size]="32">
+                        </app-avatar>
                     </div>
                 </ng-container>
             </ng-container>
diff --git a/console/src/app/pages/orgs/org-contributors/org-contributors.component.ts b/console/src/app/pages/orgs/org-contributors/org-contributors.component.ts
index 1c5ff4870..15e528ef8 100644
--- a/console/src/app/pages/orgs/org-contributors/org-contributors.component.ts
+++ b/console/src/app/pages/orgs/org-contributors/org-contributors.component.ts
@@ -54,7 +54,6 @@ export class OrgContributorsComponent implements OnInit {
             catchError(() => of([])),
             finalize(() => this.loadingSubject.next(false)),
         ).subscribe(members => {
-            console.log(members);
             this.membersSubject.next(members);
         });
     }
diff --git a/console/src/app/pages/orgs/org-contributors/org-contributors.module.ts b/console/src/app/pages/orgs/org-contributors/org-contributors.module.ts
index 02bd6a2a0..54abc88f6 100644
--- a/console/src/app/pages/orgs/org-contributors/org-contributors.module.ts
+++ b/console/src/app/pages/orgs/org-contributors/org-contributors.module.ts
@@ -12,6 +12,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
+import { AvatarModule } from 'src/app/modules/avatar/avatar.module';
 
 import { MemberCreateDialogModule } from '../../../modules/add-member-dialog/member-create-dialog.module';
 import { OrgContributorsComponent } from './org-contributors.component';
@@ -34,6 +35,7 @@ import { OrgContributorsComponent } from './org-contributors.component';
         MatCheckboxModule,
         MatTooltipModule,
         TranslateModule,
+        AvatarModule,
     ],
     exports: [
         OrgContributorsComponent,
diff --git a/console/src/app/pages/orgs/org-create/org-create.component.ts b/console/src/app/pages/orgs/org-create/org-create.component.ts
index e358ffbe0..cf6dc1919 100644
--- a/console/src/app/pages/orgs/org-create/org-create.component.ts
+++ b/console/src/app/pages/orgs/org-create/org-create.component.ts
@@ -100,7 +100,6 @@ export class OrgCreateComponent {
                 confirmPassword: ['', [...validators, passwordConfirmValidator]],
             });
         }).catch(error => {
-            console.log('no password complexity policy defined!');
             console.error(error);
             this.userForm = this.fb.group({
                 userName: ['', [Validators.required]],
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 6b99f0c98..788916c2d 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
@@ -24,7 +24,7 @@
                     <input matInput [(ngModel)]="newDomain" />
                 </mat-form-field>
 
-                <button matTooltip="Add domain" mat-icon-button color="accent" (click)="saveNewOrgDomain()">
+                <button matTooltip="Add domain" mat-icon-button color="primary" (click)="saveNewOrgDomain()">
                     <mat-icon>check</mat-icon>
                 </button>
 
diff --git a/console/src/app/pages/orgs/org-detail/org-detail.component.ts b/console/src/app/pages/orgs/org-detail/org-detail.component.ts
index 3a49b50ed..ff83986f1 100644
--- a/console/src/app/pages/orgs/org-detail/org-detail.component.ts
+++ b/console/src/app/pages/orgs/org-detail/org-detail.component.ts
@@ -52,7 +52,6 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
         });
 
         this.orgService.SearchMyOrgDomains(0, 100).then(result => {
-            console.log(result.toObject().resultList);
             this.domains = result.toObject().resultList;
         });
     }
@@ -81,7 +80,6 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
     }
 
     public removeDomain(domain: string): void {
-        console.log(domain);
         this.orgService.RemoveMyOrgDomain(domain).then(() => {
             this.toast.showInfo('Removed');
             const index = this.domains.findIndex(d => d.domain === domain);
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
index f229cb962..3e36b3069 100644
--- a/console/src/app/pages/orgs/org-grid/org-grid.component.ts
+++ b/console/src/app/pages/orgs/org-grid/org-grid.component.ts
@@ -31,7 +31,6 @@ export class OrgGridComponent {
     private getData(limit: number, offset: number): void {
         this.userService.SearchMyProjectOrgs(limit, offset).then(res => {
             this.orgList = res.toObject().resultList;
-            console.log(this.orgList);
         }).catch(error => {
             console.error(error);
             this.toast.showError(error.message);
diff --git a/console/src/app/pages/orgs/org-member-roles-autocomplete/org-member-roles-autocomplete.component.ts b/console/src/app/pages/orgs/org-member-roles-autocomplete/org-member-roles-autocomplete.component.ts
index 427df4608..9fc361313 100644
--- a/console/src/app/pages/orgs/org-member-roles-autocomplete/org-member-roles-autocomplete.component.ts
+++ b/console/src/app/pages/orgs/org-member-roles-autocomplete/org-member-roles-autocomplete.component.ts
@@ -21,7 +21,6 @@ export class OrgMemberRolesAutocompleteComponent {
     constructor(private orgService: OrgService, private toast: ToastService) {
         this.orgService.GetOrgMemberRoles().then(resp => {
             this.allRoles = resp.toObject().rolesList;
-            console.log(this.allRoles);
         }).catch(error => {
             this.toast.showError(error.message);
         });
diff --git a/console/src/app/pages/orgs/org-members/org-members-datasource.ts b/console/src/app/pages/orgs/org-members/org-members-datasource.ts
index d533aad3f..8c3339ff2 100644
--- a/console/src/app/pages/orgs/org-members/org-members-datasource.ts
+++ b/console/src/app/pages/orgs/org-members/org-members-datasource.ts
@@ -31,7 +31,6 @@ export class ProjectMembersDataSource extends DataSource<ProjectMember.AsObject>
             from(promise).pipe(
                 map(resp => {
                     this.totalResult = resp.toObject().totalResult;
-                    console.log(this.totalResult);
                     return resp.toObject().resultList;
                 }),
                 catchError(() => of([])),
diff --git a/console/src/app/pages/orgs/org-members/org-members.component.ts b/console/src/app/pages/orgs/org-members/org-members.component.ts
index 914edbb1b..fd536d2ec 100644
--- a/console/src/app/pages/orgs/org-members/org-members.component.ts
+++ b/console/src/app/pages/orgs/org-members/org-members.component.ts
@@ -33,7 +33,6 @@ export class OrgMembersComponent implements AfterViewInit {
         private toast: ToastService) {
         this.orgService.GetMyOrg().then(org => {
             this.org = org.toObject();
-            console.log(this.org);
             this.dataSource = new ProjectMembersDataSource(this.orgService);
             this.dataSource.loadMembers(0, 25, 'asc');
         });
diff --git a/console/src/app/pages/orgs/password-policy/password-policy.component.ts b/console/src/app/pages/orgs/password-policy/password-policy.component.ts
index 43d756833..624c668ac 100644
--- a/console/src/app/pages/orgs/password-policy/password-policy.component.ts
+++ b/console/src/app/pages/orgs/password-policy/password-policy.component.ts
@@ -124,7 +124,6 @@ export class PasswordPolicyComponent implements OnInit, OnDestroy {
                             break;
                         case PolicyComponentType.IAM_POLICY:
                             this.iamData = data.toObject();
-                            console.log(this.iamData);
                             break;
                     }
                 });
@@ -236,7 +235,6 @@ export class PasswordPolicyComponent implements OnInit, OnDestroy {
 
                     break;
                 case PolicyComponentType.COMPLEXITY:
-                    console.log(this.complexityData);
                     this.orgService.CreatePasswordComplexityPolicy(
                         this.complexityData.description,
                         this.complexityData.hasLowercase,
@@ -252,7 +250,6 @@ export class PasswordPolicyComponent implements OnInit, OnDestroy {
                     break;
 
                 case PolicyComponentType.IAM_POLICY:
-                    console.log(this.complexityData);
                     const orgId = this.sessionStorage.getItem('organization');
                     if (orgId) {
                         this.adminService.CreateOrgIamPolicy(
@@ -294,7 +291,6 @@ export class PasswordPolicyComponent implements OnInit, OnDestroy {
 
                     break;
                 case PolicyComponentType.COMPLEXITY:
-                    console.log(this.complexityData);
                     this.orgService.UpdatePasswordComplexityPolicy(
                         this.complexityData.description,
                         this.complexityData.hasLowercase,
@@ -310,7 +306,6 @@ export class PasswordPolicyComponent implements OnInit, OnDestroy {
                     break;
 
                 case PolicyComponentType.IAM_POLICY:
-                    console.log(this.complexityData);
                     const orgId = this.sessionStorage.getItem('organization');
                     if (orgId) {
                         this.adminService.UpdateOrgIamPolicy(
diff --git a/console/src/app/pages/projects/owned-project-detail/owned-project-detail.component.html b/console/src/app/pages/owned-projects/owned-project-detail/owned-project-detail.component.html
similarity index 100%
rename from console/src/app/pages/projects/owned-project-detail/owned-project-detail.component.html
rename to console/src/app/pages/owned-projects/owned-project-detail/owned-project-detail.component.html
diff --git a/console/src/app/pages/projects/owned-project-detail/owned-project-detail.component.scss b/console/src/app/pages/owned-projects/owned-project-detail/owned-project-detail.component.scss
similarity index 100%
rename from console/src/app/pages/projects/owned-project-detail/owned-project-detail.component.scss
rename to console/src/app/pages/owned-projects/owned-project-detail/owned-project-detail.component.scss
diff --git a/console/src/app/pages/projects/owned-project-detail/owned-project-detail.component.spec.ts b/console/src/app/pages/owned-projects/owned-project-detail/owned-project-detail.component.spec.ts
similarity index 100%
rename from console/src/app/pages/projects/owned-project-detail/owned-project-detail.component.spec.ts
rename to console/src/app/pages/owned-projects/owned-project-detail/owned-project-detail.component.spec.ts
diff --git a/console/src/app/pages/projects/owned-project-detail/owned-project-detail.component.ts b/console/src/app/pages/owned-projects/owned-project-detail/owned-project-detail.component.ts
similarity index 99%
rename from console/src/app/pages/projects/owned-project-detail/owned-project-detail.component.ts
rename to console/src/app/pages/owned-projects/owned-project-detail/owned-project-detail.component.ts
index e8c4c0d10..031032970 100644
--- a/console/src/app/pages/projects/owned-project-detail/owned-project-detail.component.ts
+++ b/console/src/app/pages/owned-projects/owned-project-detail/owned-project-detail.component.ts
@@ -85,7 +85,6 @@ export class OwnedProjectDetailComponent implements OnInit, OnDestroy {
         if (this.projectId) {
             this.projectService.GetProjectById(id).then(proj => {
                 this.project = proj.toObject();
-                console.log(this.project);
             }).catch(error => {
                 this.toast.showError(error.message);
             });
diff --git a/console/src/app/pages/projects/owned-project-grid/owned-project-grid.component.html b/console/src/app/pages/owned-projects/owned-project-grid/owned-project-grid.component.html
similarity index 100%
rename from console/src/app/pages/projects/owned-project-grid/owned-project-grid.component.html
rename to console/src/app/pages/owned-projects/owned-project-grid/owned-project-grid.component.html
diff --git a/console/src/app/pages/projects/owned-project-grid/owned-project-grid.component.scss b/console/src/app/pages/owned-projects/owned-project-grid/owned-project-grid.component.scss
similarity index 100%
rename from console/src/app/pages/projects/owned-project-grid/owned-project-grid.component.scss
rename to console/src/app/pages/owned-projects/owned-project-grid/owned-project-grid.component.scss
diff --git a/console/src/app/pages/projects/owned-project-grid/owned-project-grid.component.spec.ts b/console/src/app/pages/owned-projects/owned-project-grid/owned-project-grid.component.spec.ts
similarity index 100%
rename from console/src/app/pages/projects/owned-project-grid/owned-project-grid.component.spec.ts
rename to console/src/app/pages/owned-projects/owned-project-grid/owned-project-grid.component.spec.ts
diff --git a/console/src/app/pages/projects/owned-project-grid/owned-project-grid.component.ts b/console/src/app/pages/owned-projects/owned-project-grid/owned-project-grid.component.ts
similarity index 100%
rename from console/src/app/pages/projects/owned-project-grid/owned-project-grid.component.ts
rename to console/src/app/pages/owned-projects/owned-project-grid/owned-project-grid.component.ts
diff --git a/console/src/app/pages/projects/owned-project-list/owned-project-list.component.html b/console/src/app/pages/owned-projects/owned-project-list/owned-project-list.component.html
similarity index 100%
rename from console/src/app/pages/projects/owned-project-list/owned-project-list.component.html
rename to console/src/app/pages/owned-projects/owned-project-list/owned-project-list.component.html
diff --git a/console/src/app/pages/projects/owned-project-list/owned-project-list.component.scss b/console/src/app/pages/owned-projects/owned-project-list/owned-project-list.component.scss
similarity index 100%
rename from console/src/app/pages/projects/owned-project-list/owned-project-list.component.scss
rename to console/src/app/pages/owned-projects/owned-project-list/owned-project-list.component.scss
diff --git a/console/src/app/pages/projects/owned-project-list/owned-project-list.component.spec.ts b/console/src/app/pages/owned-projects/owned-project-list/owned-project-list.component.spec.ts
similarity index 100%
rename from console/src/app/pages/projects/owned-project-list/owned-project-list.component.spec.ts
rename to console/src/app/pages/owned-projects/owned-project-list/owned-project-list.component.spec.ts
diff --git a/console/src/app/pages/projects/owned-project-list/owned-project-list.component.ts b/console/src/app/pages/owned-projects/owned-project-list/owned-project-list.component.ts
similarity index 97%
rename from console/src/app/pages/projects/owned-project-list/owned-project-list.component.ts
rename to console/src/app/pages/owned-projects/owned-project-list/owned-project-list.component.ts
index d5d83b7c0..6cbe4217b 100644
--- a/console/src/app/pages/projects/owned-project-list/owned-project-list.component.ts
+++ b/console/src/app/pages/owned-projects/owned-project-list/owned-project-list.component.ts
@@ -56,7 +56,6 @@ export class OwnedProjectListComponent implements OnInit, OnDestroy {
     ) { }
 
     public ngOnInit(): void {
-        console.log('asdf');
         this.getData(10, 0);
     }
 
@@ -85,14 +84,12 @@ export class OwnedProjectListComponent implements OnInit, OnDestroy {
     }
 
     private async getData(limit: number, offset: number): Promise<void> {
-        console.log('getprojects');
         this.loadingSubject.next(true);
         this.projectService.SearchProjects(limit, offset).then(res => {
             this.ownedProjectList = res.toObject().resultList;
             this.totalResult = res.toObject().totalResult;
             this.dataSource.data = this.ownedProjectList;
             this.loadingSubject.next(false);
-            console.log(this.ownedProjectList);
         }).catch(error => {
             console.error(error);
             this.toast.showError(error.message);
diff --git a/console/src/app/pages/projects/projects-routing.module.ts b/console/src/app/pages/owned-projects/owned-projects-routing.module.ts
similarity index 74%
rename from console/src/app/pages/projects/projects-routing.module.ts
rename to console/src/app/pages/owned-projects/owned-projects-routing.module.ts
index e8a105291..fc5d11f10 100644
--- a/console/src/app/pages/projects/projects-routing.module.ts
+++ b/console/src/app/pages/owned-projects/owned-projects-routing.module.ts
@@ -3,14 +3,13 @@ import { RouterModule, Routes } from '@angular/router';
 import { AuthGuard } from 'src/app/guards/auth.guard';
 import { RoleGuard } from 'src/app/guards/role.guard';
 
-import { GrantedProjectDetailComponent } from './granted-project-detail/granted-project-detail.component';
 import { OwnedProjectDetailComponent } from './owned-project-detail/owned-project-detail.component';
-import { ProjectsComponent } from './projects.component';
+import { OwnedProjectsComponent } from './owned-projects.component';
 
 const routes: Routes = [
     {
         path: '',
-        component: ProjectsComponent,
+        component: OwnedProjectsComponent,
         data: { animation: 'HomePage' },
     },
     {
@@ -21,11 +20,6 @@ const routes: Routes = [
             roles: ['project.write'],
         },
     },
-    {
-        path: ':id/grant/:grantId',
-        component: GrantedProjectDetailComponent,
-        data: { animation: 'HomePage' },
-    },
     {
         path: ':id',
         component: OwnedProjectDetailComponent,
@@ -33,7 +27,7 @@ const routes: Routes = [
     },
     {
         path: ':projectid/members',
-        loadChildren: () => import('./project-members/project-members.module').then(m => m.ProjectMembersModule),
+        loadChildren: () => import('../../modules/project-members/project-members.module').then(m => m.ProjectMembersModule),
     },
     {
         path: ':projectid/apps',
@@ -56,4 +50,4 @@ const routes: Routes = [
     imports: [RouterModule.forChild(routes)],
     exports: [RouterModule],
 })
-export class ProjectsRoutingModule { }
+export class OwnedProjectsRoutingModule { }
diff --git a/console/src/app/pages/owned-projects/owned-projects.component.html b/console/src/app/pages/owned-projects/owned-projects.component.html
new file mode 100644
index 000000000..ee602401e
--- /dev/null
+++ b/console/src/app/pages/owned-projects/owned-projects.component.html
@@ -0,0 +1,7 @@
+<div class="max-width-container">
+    <h1>{{ 'PROJECT.PAGES.LIST' | translate }}</h1>
+    <p class="sub">{{ 'PROJECT.PAGES.LISTDESCRIPTION' | translate }}</p>
+
+    <h2>Owned Projects</h2>
+    <app-owned-project-list></app-owned-project-list>
+</div>
\ No newline at end of file
diff --git a/console/src/app/pages/owned-projects/owned-projects.component.scss b/console/src/app/pages/owned-projects/owned-projects.component.scss
new file mode 100644
index 000000000..cd0c0ac06
--- /dev/null
+++ b/console/src/app/pages/owned-projects/owned-projects.component.scss
@@ -0,0 +1,13 @@
+h1 {
+    font-family: ailerons;
+    margin-top: 0;
+}
+
+.sub {
+    color: #81868a;
+    margin-bottom: 2rem;
+}
+
+.max-width-container {
+    padding-bottom: 3rem;
+}
\ No newline at end of file
diff --git a/console/src/app/pages/projects/projects.component.spec.ts b/console/src/app/pages/owned-projects/owned-projects.component.spec.ts
similarity index 100%
rename from console/src/app/pages/projects/projects.component.spec.ts
rename to console/src/app/pages/owned-projects/owned-projects.component.spec.ts
diff --git a/console/src/app/pages/projects/projects.component.ts b/console/src/app/pages/owned-projects/owned-projects.component.ts
similarity index 75%
rename from console/src/app/pages/projects/projects.component.ts
rename to console/src/app/pages/owned-projects/owned-projects.component.ts
index c2f236303..27ce71748 100644
--- a/console/src/app/pages/projects/projects.component.ts
+++ b/console/src/app/pages/owned-projects/owned-projects.component.ts
@@ -3,11 +3,11 @@ import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs';
 
 @Component({
-    selector: 'app-projects',
-    templateUrl: './projects.component.html',
-    styleUrls: ['./projects.component.scss'],
+    selector: 'app-owned-projects',
+    templateUrl: './owned-projects.component.html',
+    styleUrls: ['./owned-projects.component.scss'],
 })
-export class ProjectsComponent implements OnInit, OnDestroy {
+export class OwnedProjectsComponent implements OnInit, OnDestroy {
     // public projectId: string = '';
     // public grantId: string = '';
     private sub: Subscription = new Subscription();
diff --git a/console/src/app/pages/projects/projects.module.ts b/console/src/app/pages/owned-projects/owned-projects.module.ts
similarity index 69%
rename from console/src/app/pages/projects/projects.module.ts
rename to console/src/app/pages/owned-projects/owned-projects.module.ts
index 766f3de3a..22ea32d43 100644
--- a/console/src/app/pages/projects/projects.module.ts
+++ b/console/src/app/pages/owned-projects/owned-projects.module.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
@@ -20,55 +20,45 @@ import { MatTableModule } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { HttpLoaderFactory } from 'src/app/app.module';
-import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
-import { CardModule } from 'src/app/modules/card/card.module';
-import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
-import { SearchUserAutocompleteModule } from 'src/app/modules/search-user-autocomplete/search-user-autocomplete.module';
-import { PipesModule } from 'src/app/pipes/pipes.module';
 
+import { HttpLoaderFactory } from '../../app.module';
+import { HasRoleModule } from '../../directives/has-role/has-role.module';
+import { CardModule } from '../../modules/card/card.module';
 import { ChangesModule } from '../../modules/changes/changes.module';
+import { MetaLayoutModule } from '../../modules/meta-layout/meta-layout.module';
+import { ProjectContributorsModule } from '../../modules/project-contributors/project-contributors.module';
 import { ProjectRolesModule } from '../../modules/project-roles/project-roles.module';
+import { SearchUserAutocompleteModule } from '../../modules/search-user-autocomplete/search-user-autocomplete.module';
+import { PipesModule } from '../../pipes/pipes.module';
 import { OrgContributorsModule } from '../orgs/org-contributors/org-contributors.module';
 import { UserListModule } from '../user-list/user-list.module';
-import { GrantedProjectDetailComponent } from './granted-project-detail/granted-project-detail.component';
-import { GrantedProjectGridComponent } from './granted-project-grid/granted-project-grid.component';
-import { GrantedProjectListComponent } from './granted-project-list/granted-project-list.component';
 import { OwnedProjectDetailComponent } from './owned-project-detail/owned-project-detail.component';
 import { OwnedProjectGridComponent } from './owned-project-grid/owned-project-grid.component';
 import { OwnedProjectListComponent } from './owned-project-list/owned-project-list.component';
+import { OwnedProjectsRoutingModule } from './owned-projects-routing.module';
+import { OwnedProjectsComponent } from './owned-projects.component';
 import { ProjectApplicationGridComponent } from './project-application-grid/project-application-grid.component';
 import { ProjectApplicationsComponent } from './project-applications/project-applications.component';
-import { ProjectContributorsComponent } from './project-contributors/project-contributors.component';
 import {
     ProjectGrantMembersCreateDialogComponent,
 } from './project-grant-members-create-dialog/project-grant-members-create-dialog.component';
-import { ProjectGrantMembersComponent } from './project-grant-members/project-grant-members.component';
 import { ProjectGrantsComponent } from './project-grants/project-grants.component';
-import { ProjectsRoutingModule } from './projects-routing.module';
-import { ProjectsComponent } from './projects.component';
 
 @NgModule({
     declarations: [
-        GrantedProjectListComponent,
-        GrantedProjectGridComponent,
-        GrantedProjectDetailComponent,
-
+        OwnedProjectsComponent,
         OwnedProjectListComponent,
         OwnedProjectGridComponent,
         OwnedProjectDetailComponent,
-
-        ProjectApplicationsComponent,
         ProjectApplicationGridComponent,
+        ProjectApplicationsComponent,
         ProjectGrantsComponent,
-        ProjectGrantMembersComponent,
         ProjectGrantMembersCreateDialogComponent,
-        ProjectContributorsComponent,
-        ProjectsComponent,
     ],
     imports: [
-        ProjectsRoutingModule,
         CommonModule,
+        OwnedProjectsRoutingModule,
+        ProjectContributorsModule,
         FormsModule,
         TranslateModule,
         ReactiveFormsModule,
@@ -106,10 +96,6 @@ import { ProjectsComponent } from './projects.component';
             },
         }),
     ],
-    entryComponents: [
-        ProjectGrantMembersCreateDialogComponent,
-    ],
-    exports: [],
-    schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
+    schemas: [NO_ERRORS_SCHEMA],
 })
-export class ProjectsModule { }
+export class OwnedProjectsModule { }
diff --git a/console/src/app/pages/projects/project-application-grid/project-application-grid.component.html b/console/src/app/pages/owned-projects/project-application-grid/project-application-grid.component.html
similarity index 100%
rename from console/src/app/pages/projects/project-application-grid/project-application-grid.component.html
rename to console/src/app/pages/owned-projects/project-application-grid/project-application-grid.component.html
diff --git a/console/src/app/pages/projects/project-application-grid/project-application-grid.component.scss b/console/src/app/pages/owned-projects/project-application-grid/project-application-grid.component.scss
similarity index 100%
rename from console/src/app/pages/projects/project-application-grid/project-application-grid.component.scss
rename to console/src/app/pages/owned-projects/project-application-grid/project-application-grid.component.scss
diff --git a/console/src/app/pages/projects/project-application-grid/project-application-grid.component.spec.ts b/console/src/app/pages/owned-projects/project-application-grid/project-application-grid.component.spec.ts
similarity index 100%
rename from console/src/app/pages/projects/project-application-grid/project-application-grid.component.spec.ts
rename to console/src/app/pages/owned-projects/project-application-grid/project-application-grid.component.spec.ts
diff --git a/console/src/app/pages/projects/project-application-grid/project-application-grid.component.ts b/console/src/app/pages/owned-projects/project-application-grid/project-application-grid.component.ts
similarity index 100%
rename from console/src/app/pages/projects/project-application-grid/project-application-grid.component.ts
rename to console/src/app/pages/owned-projects/project-application-grid/project-application-grid.component.ts
diff --git a/console/src/app/pages/projects/project-applications/project-applications-datasource.ts b/console/src/app/pages/owned-projects/project-applications/project-applications-datasource.ts
similarity index 100%
rename from console/src/app/pages/projects/project-applications/project-applications-datasource.ts
rename to console/src/app/pages/owned-projects/project-applications/project-applications-datasource.ts
diff --git a/console/src/app/pages/projects/project-applications/project-applications.component.html b/console/src/app/pages/owned-projects/project-applications/project-applications.component.html
similarity index 100%
rename from console/src/app/pages/projects/project-applications/project-applications.component.html
rename to console/src/app/pages/owned-projects/project-applications/project-applications.component.html
diff --git a/console/src/app/pages/projects/project-applications/project-applications.component.scss b/console/src/app/pages/owned-projects/project-applications/project-applications.component.scss
similarity index 100%
rename from console/src/app/pages/projects/project-applications/project-applications.component.scss
rename to console/src/app/pages/owned-projects/project-applications/project-applications.component.scss
diff --git a/console/src/app/pages/projects/project-applications/project-applications.component.spec.ts b/console/src/app/pages/owned-projects/project-applications/project-applications.component.spec.ts
similarity index 100%
rename from console/src/app/pages/projects/project-applications/project-applications.component.spec.ts
rename to console/src/app/pages/owned-projects/project-applications/project-applications.component.spec.ts
diff --git a/console/src/app/pages/projects/project-applications/project-applications.component.ts b/console/src/app/pages/owned-projects/project-applications/project-applications.component.ts
similarity index 100%
rename from console/src/app/pages/projects/project-applications/project-applications.component.ts
rename to console/src/app/pages/owned-projects/project-applications/project-applications.component.ts
diff --git a/console/src/app/pages/projects/project-grant-members-create-dialog/project-grant-members-create-dialog.component.html b/console/src/app/pages/owned-projects/project-grant-members-create-dialog/project-grant-members-create-dialog.component.html
similarity index 100%
rename from console/src/app/pages/projects/project-grant-members-create-dialog/project-grant-members-create-dialog.component.html
rename to console/src/app/pages/owned-projects/project-grant-members-create-dialog/project-grant-members-create-dialog.component.html
diff --git a/console/src/app/pages/projects/project-grant-members-create-dialog/project-grant-members-create-dialog.component.scss b/console/src/app/pages/owned-projects/project-grant-members-create-dialog/project-grant-members-create-dialog.component.scss
similarity index 100%
rename from console/src/app/pages/projects/project-grant-members-create-dialog/project-grant-members-create-dialog.component.scss
rename to console/src/app/pages/owned-projects/project-grant-members-create-dialog/project-grant-members-create-dialog.component.scss
diff --git a/console/src/app/pages/projects/project-grant-members-create-dialog/project-grant-members-create-dialog.component.spec.ts b/console/src/app/pages/owned-projects/project-grant-members-create-dialog/project-grant-members-create-dialog.component.spec.ts
similarity index 100%
rename from console/src/app/pages/projects/project-grant-members-create-dialog/project-grant-members-create-dialog.component.spec.ts
rename to console/src/app/pages/owned-projects/project-grant-members-create-dialog/project-grant-members-create-dialog.component.spec.ts
diff --git a/console/src/app/pages/projects/project-grant-members-create-dialog/project-grant-members-create-dialog.component.ts b/console/src/app/pages/owned-projects/project-grant-members-create-dialog/project-grant-members-create-dialog.component.ts
similarity index 100%
rename from console/src/app/pages/projects/project-grant-members-create-dialog/project-grant-members-create-dialog.component.ts
rename to console/src/app/pages/owned-projects/project-grant-members-create-dialog/project-grant-members-create-dialog.component.ts
diff --git a/console/src/app/pages/projects/project-grants/project-grants-datasource.ts b/console/src/app/pages/owned-projects/project-grants/project-grants-datasource.ts
similarity index 98%
rename from console/src/app/pages/projects/project-grants/project-grants-datasource.ts
rename to console/src/app/pages/owned-projects/project-grants/project-grants-datasource.ts
index 2ddad1209..21bea8ee9 100644
--- a/console/src/app/pages/projects/project-grants/project-grants-datasource.ts
+++ b/console/src/app/pages/owned-projects/project-grants/project-grants-datasource.ts
@@ -29,7 +29,6 @@ export class ProjectGrantsDataSource extends DataSource<ProjectGrant.AsObject> {
             catchError(() => of([])),
             finalize(() => this.loadingSubject.next(false)),
         ).subscribe(grants => {
-            console.log(grants);
             this.grantsSubject.next(grants);
         });
     }
diff --git a/console/src/app/pages/projects/project-grants/project-grants.component.html b/console/src/app/pages/owned-projects/project-grants/project-grants.component.html
similarity index 100%
rename from console/src/app/pages/projects/project-grants/project-grants.component.html
rename to console/src/app/pages/owned-projects/project-grants/project-grants.component.html
diff --git a/console/src/app/pages/projects/project-grants/project-grants.component.scss b/console/src/app/pages/owned-projects/project-grants/project-grants.component.scss
similarity index 100%
rename from console/src/app/pages/projects/project-grants/project-grants.component.scss
rename to console/src/app/pages/owned-projects/project-grants/project-grants.component.scss
diff --git a/console/src/app/pages/projects/project-grants/project-grants.component.spec.ts b/console/src/app/pages/owned-projects/project-grants/project-grants.component.spec.ts
similarity index 100%
rename from console/src/app/pages/projects/project-grants/project-grants.component.spec.ts
rename to console/src/app/pages/owned-projects/project-grants/project-grants.component.spec.ts
diff --git a/console/src/app/pages/projects/project-grants/project-grants.component.ts b/console/src/app/pages/owned-projects/project-grants/project-grants.component.ts
similarity index 95%
rename from console/src/app/pages/projects/project-grants/project-grants.component.ts
rename to console/src/app/pages/owned-projects/project-grants/project-grants.component.ts
index 94a706db6..a74167bf9 100644
--- a/console/src/app/pages/projects/project-grants/project-grants.component.ts
+++ b/console/src/app/pages/owned-projects/project-grants/project-grants.component.ts
@@ -80,7 +80,6 @@ export class ProjectGrantsComponent implements OnInit, AfterViewInit {
         this.expandedElement = this.expandedElement === grant ? null : grant;
         this.projectService.SearchProjectGrantMembers(this.projectId, grant.id, 10, 0).then(ret => {
             this.selectedGrantMembers = ret.toObject().resultList;
-            console.log(this.selectedGrantMembers);
         });
     }
 
@@ -96,13 +95,6 @@ export class ProjectGrantsComponent implements OnInit, AfterViewInit {
             width: '400px',
         });
 
-        console.log({
-            orgId: grant.grantedOrgId,
-            grantId: grant.id,
-            projectId: grant.projectId,
-            roleKeysList: grant.roleKeysList,
-        });
-
         dialogRef.afterClosed().subscribe((dataToAdd: ProjectGrantMembersCreateDialogExportType) => {
             if (dataToAdd) {
                 dataToAdd.userIds.forEach(userid => {
diff --git a/console/src/app/pages/project-create/project-create.component.ts b/console/src/app/pages/project-create/project-create.component.ts
index d4fc529b6..f2224667a 100644
--- a/console/src/app/pages/project-create/project-create.component.ts
+++ b/console/src/app/pages/project-create/project-create.component.ts
@@ -25,7 +25,6 @@ export class ProjectCreateComponent implements OnInit {
     public ngOnInit(): void { }
 
     public saveProject(): void {
-        console.log(this.project);
         this.projectService
             .CreateProject(this.project)
             .then((data: Project) => {
diff --git a/console/src/app/pages/project-grant-create/project-grant-create.component.ts b/console/src/app/pages/project-grant-create/project-grant-create.component.ts
index 300d54c9a..5e1bcd383 100644
--- a/console/src/app/pages/project-grant-create/project-grant-create.component.ts
+++ b/console/src/app/pages/project-grant-create/project-grant-create.component.ts
@@ -35,7 +35,6 @@ export class ProjectGrantCreateComponent implements OnInit, OnDestroy {
     public ngOnInit(): void {
         this.routeSubscription = this.route.params.subscribe(params => {
             this.projectId = params.projectid;
-            console.log(params);
         });
     }
 
@@ -45,7 +44,6 @@ export class ProjectGrantCreateComponent implements OnInit, OnDestroy {
 
     public searchOrg(domain: any): void {
         this.orgService.getOrgByDomainGlobal(domain.value).then((ret) => {
-            console.log(ret.toObject());
             const tmp = ret.toObject();
             this.authService.GetActiveOrg().then((org) => {
                 if (tmp !== org) {
@@ -66,12 +64,10 @@ export class ProjectGrantCreateComponent implements OnInit, OnDestroy {
         this.projectService
             .CreateProjectGrant(this.org.id, this.projectId, this.rolesKeyList)
             .then((data) => {
-                console.log(data);
                 this.close();
             })
             .catch(error => {
                 this.toast.showError(error.message);
-                console.log(error);
             });
     }
 
diff --git a/console/src/app/pages/project-role-create/project-role-create.component.ts b/console/src/app/pages/project-role-create/project-role-create.component.ts
index 319d5d510..cbafe9b10 100644
--- a/console/src/app/pages/project-role-create/project-role-create.component.ts
+++ b/console/src/app/pages/project-role-create/project-role-create.component.ts
@@ -86,14 +86,12 @@ export class ProjectRoleCreateComponent implements OnInit, OnDestroy {
     public addRole(): void {
         const promises = this.formArray.value.map((role: ProjectRoleAdd.AsObject) => {
             role.id = this.projectId;
-            console.log(role);
             return this.projectService.AddProjectRole(role);
         });
 
         Promise.all(promises).then(() => {
             this.router.navigate(['projects', this.projectId]);
         }).catch(data => {
-            console.log(data);
             this.toast.showError(data.message);
         });
     }
diff --git a/console/src/app/pages/user-create/user-create.component.ts b/console/src/app/pages/user-create/user-create.component.ts
index 98c47ad78..1a52e1677 100644
--- a/console/src/app/pages/user-create/user-create.component.ts
+++ b/console/src/app/pages/user-create/user-create.component.ts
@@ -49,7 +49,6 @@ export class UserCreateComponent implements OnDestroy {
     ) {
         this.orgService.GetMyOrgIamPolicy().then((iampolicy) => {
             this.userLoginMustBeDomain = iampolicy.toObject().userLoginMustBeDomain;
-            console.log(this.userLoginMustBeDomain);
             this.initForm();
         }).catch(error => {
             console.error(error);
@@ -83,7 +82,6 @@ export class UserCreateComponent implements OnDestroy {
 
     public createUser(): void {
         this.user = this.userForm.value;
-        console.log(this.user);
 
         this.userService
             .CreateUser(this.user)
diff --git a/console/src/app/pages/user-detail/auth-user-detail/auth-user-detail.component.html b/console/src/app/pages/user-detail/auth-user-detail/auth-user-detail.component.html
index df117be68..468948059 100644
--- a/console/src/app/pages/user-detail/auth-user-detail/auth-user-detail.component.html
+++ b/console/src/app/pages/user-detail/auth-user-detail/auth-user-detail.component.html
@@ -1,222 +1,235 @@
-<div class="max-width-container">
-    <h1>{{ 'USER.TITLE' | translate }}</h1>
-    <p class="sub">{{'USER.DESCRIPTION' | translate}}</p>
+<app-meta-layout>
+    <div class="max-width-container">
+        <h1>{{ 'USER.TITLE' | translate }}</h1>
+        <p class="sub">{{'USER.DESCRIPTION' | translate}}</p>
 
-    <mat-progress-bar *ngIf="loading" color="accent" mode="indeterminate"></mat-progress-bar>
+        <mat-progress-bar *ngIf="loading" color="accent" mode="indeterminate"></mat-progress-bar>
 
-    <span *ngIf="!loading && !user">{{ 'USER.PAGES.NOUSER' | translate }}</span>
+        <span *ngIf="!loading && !user">{{ 'USER.PAGES.NOUSER' | translate }}</span>
 
-    <div class="col" *ngIf="user">
-        <app-card title="{{ 'USER.PROFILE.TITLE' | translate }}"
-            description="{{'USER.PROFILE.DESCRIPTION' | translate}}">
-            <app-detail-form [genders]="genders" [languages]="languages" [profile]="user"
-                (changedLanguage)="changedLanguage($event)" (submitData)="saveProfile($event)">
-            </app-detail-form>
+        <app-card title="{{ 'USER.PAGES.LOGINNAMES' | translate }}"
+            description="{{ 'USER.PAGES.LOGINNAMESDESC' | translate }}" *ngIf="user">
+            <div class="login-name-row" *ngFor="let login of user?.loginNamesList">
+                <span>{{login}}</span>
+                <button color="primary" [disabled]="copied == login"
+                    [matTooltip]="(copied != login ? 'USER.PAGES.COPY' : 'USER.PAGES.COPIED' ) | translate"
+                    (click)="copytoclipboard(login)" mat-icon-button>
+                    <i *ngIf="copied != login" class="las la-clipboard"></i>
+                    <i *ngIf="copied == login" class="las la-clipboard-check"></i>
+                </button>
+            </div>
         </app-card>
 
-        <app-card title="Theme" class="theme-card">
-            <app-theme-setting></app-theme-setting>
+        <div class="col" *ngIf="user">
+            <app-card title="{{ 'USER.PROFILE.TITLE' | translate }}"
+                description="{{'USER.PROFILE.DESCRIPTION' | translate}}">
+                <app-detail-form [genders]="genders" [languages]="languages" [profile]="user"
+                    (changedLanguage)="changedLanguage($event)" (submitData)="saveProfile($event)">
+                </app-detail-form>
+            </app-card>
+
+            <app-card title="Theme" class="theme-card">
+                <app-theme-setting></app-theme-setting>
+            </app-card>
+        </div>
+
+        <app-card *ngIf="user" title="{{'USER.PASSWORD.TITLE' | translate}}"
+            description="{{'USER.PASSWORD.DESCRIPTION' | translate}}">
+            <form *ngIf="passwordForm" [formGroup]="passwordForm" (ngSubmit)="setPassword()">
+                <div class="content">
+                    <mat-form-field class="formfield">
+                        <mat-label>{{ 'USER.PASSWORD.OLD' | translate }}</mat-label>
+                        <input autocomplete="off" name="password" type="password" matInput
+                            formControlName="currentPassword" />
+                        <mat-error *ngIf="currentPassword?.errors?.required">{{ 'USER.PASSWORD.REQUIRED' | translate }}
+                        </mat-error>
+                    </mat-form-field>
+                    <mat-form-field class="formfield">
+                        <mat-label>{{ 'USER.PASSWORD.NEW' | translate }}</mat-label>
+                        <input autocomplete="off" name="new password" type="password" matInput
+                            formControlName="newPassword" />
+
+                        <mat-error *ngIf="newPassword?.errors?.required">
+                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                        </mat-error>
+                        <mat-error *ngIf="newPassword?.errors?.symbolValidator">
+                            {{ 'USER.VALIDATION.SYMBOLERROR' | translate }}
+                        </mat-error>
+                        <mat-error *ngIf="newPassword?.errors?.numberValidator">
+                            {{ 'USER.VALIDATION.NUMBERERROR' | translate }}
+                        </mat-error>
+                        <mat-error *ngIf="newPassword?.errors?.upperCaseValidator">
+                            {{ 'USER.VALIDATION.UPPERCASEMISSING' | translate }}
+                        </mat-error>
+                        <mat-error *ngIf="newPassword?.errors?.lowerCaseValidator">
+                            {{ 'USER.VALIDATION.LOWERCASEMISSING' | translate }}
+                        </mat-error>
+                        <mat-error *ngIf="newPassword?.errors?.minlength">
+                            {{ 'USER.VALIDATION.MINLENGTH' | translate:newPassword?.errors?.minlength }}
+                        </mat-error>
+
+                    </mat-form-field>
+                    <mat-form-field class="formfield">
+                        <mat-label>{{ 'USER.PASSWORD.CONFIRM' | translate }}</mat-label>
+                        <input autocomplete="off" name="password repeating" type="password" matInput
+                            formControlName="confirmPassword" />
+
+                        <mat-error *ngIf="confirmPassword?.errors?.required">
+                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                        </mat-error>
+                        <mat-error *ngIf="confirmPassword?.errors?.symbolValidator">
+                            {{ 'USER.VALIDATION.SYMBOLERROR' | translate }}
+                        </mat-error>
+                        <mat-error *ngIf="confirmPassword?.errors?.numberValidator">
+                            {{ 'USER.VALIDATION.NUMBERERROR' | translate }}
+                        </mat-error>
+                        <mat-error *ngIf="confirmPassword?.errors?.notequal">
+                            {{ 'USER.PASSWORD.NOTEQUAL' | translate }}
+                        </mat-error>
+                        <mat-error *ngIf="confirmPassword?.errors?.upperCaseValidator">
+                            {{ 'USER.VALIDATION.UPPERCASEMISSING' | translate }}
+                        </mat-error>
+                        <mat-error *ngIf="confirmPassword?.errors?.lowerCaseValidator">
+                            {{ 'USER.VALIDATION.LOWERCASEMISSING' | translate }}
+                        </mat-error>
+                        <mat-error *ngIf="confirmPassword?.errors?.minlength">
+                            {{ 'USER.VALIDATION.MINLENGTH' | translate:confirmPassword?.errors?.minlength }}
+                        </mat-error>
+                    </mat-form-field>
+                </div>
+                <div class="btn-container">
+                    <button [disabled]="passwordForm.invalid" mat-raised-button
+                        color="primary">{{ 'USER.PASSWORD.RESET' | translate }}</button>
+                </div>
+            </form>
         </app-card>
+
+        <app-card *ngIf="user" title="{{ 'USER.LOGINMETHODS.TITLE' | translate }}"
+            description="{{ 'USER.LOGINMETHODS.DESCRIPTION' | translate }}">
+            <div class="method-col">
+                <div class="method-row">
+                    <span class="label">{{ 'USER.EMAIL' | translate }}</span>
+
+                    <ng-container *ngIf="!emailEditState; else emailEdit">
+                        <div class="actions">
+                            <span class="name">{{user?.email}}</span>
+                            <mat-icon *ngIf="user?.isEmailVerified" color="primary" aria-hidden="false"
+                                aria-label="verified icon">
+                                check_circle_outline</mat-icon>
+                            <ng-container *ngIf="user?.email && !user?.isEmailVerified">
+                                <mat-icon color="warn" aria-hidden="false" aria-label="not verified icon">highlight_off
+                                </mat-icon>
+                                <a class="verify" matTooltip="{{'USER.LOGINMETHODS.EMAIL.RESEND' | translate}}"
+                                    (click)="resendVerification()">{{'USER.LOGINMETHODS.RESENDCODE' | translate}}</a>
+                            </ng-container>
+                        </div>
+
+                        <div class="actions">
+                            <button (click)="emailEditState = true" mat-icon-button>
+                                <mat-icon>edit</mat-icon>
+                            </button>
+                        </div>
+                    </ng-container>
+                    <ng-template #emailEdit>
+                        <mat-form-field class="name">
+                            <mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>
+                            <input matInput [(ngModel)]="user.email" />
+                        </mat-form-field>
+                        <button (click)="emailEditState = false" mat-icon-button>
+                            <mat-icon>close</mat-icon>
+                        </button>
+                        <button [disabled]="!user.email" class="submit-button" type="button" color="primary"
+                            (click)="saveEmail()" mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
+                    </ng-template>
+                </div>
+
+                <div class="method-row">
+                    <span class="label">{{ 'USER.PHONE' | translate }}</span>
+
+                    <ng-container *ngIf="!phoneEditState; else phoneEdit">
+                        <div class="actions">
+                            <span class="name">{{user?.phone}}</span>
+                            <mat-icon *ngIf="user?.isPhoneVerified" color="primary" aria-hidden="false"
+                                aria-label="verified icon">
+                                check_circle_outline</mat-icon>
+                            <ng-container *ngIf="user?.phone && !user?.isPhoneVerified">
+                                <mat-icon color="warn" aria-hidden="false" aria-label="not verified icon">highlight_off
+                                </mat-icon>
+                                <a class="verify" matTooltip="{{'USER.LOGINMETHODS.ENTERCODE_DESC' | translate}}"
+                                    (click)="enterCode()">{{'USER.LOGINMETHODS.ENTERCODE' | translate}}</a>
+                                <a class="verify" matTooltip="{{'USER.LOGINMETHODS.PHONE.RESEND' | translate}}"
+                                    (click)="resendPhoneVerification()">{{'USER.LOGINMETHODS.RESENDCODE' | translate}}</a>
+                            </ng-container>
+                        </div>
+
+                        <div class="actions">
+                            <button (click)="phoneEditState = true" mat-icon-button>
+                                <mat-icon>edit</mat-icon>
+                            </button>
+                            <button color="warn" *ngIf="user?.phone" (click)="deletePhone()" mat-icon-button>
+                                <i class="las la-trash"></i>
+                            </button>
+                        </div>
+                    </ng-container>
+
+                    <ng-template #phoneEdit>
+                        <mat-form-field class="name">
+                            <mat-label>{{ 'USER.PHONE' | translate }}</mat-label>
+                            <input matInput [(ngModel)]="user.phone" />
+                        </mat-form-field>
+                        <button (click)="phoneEditState = false" mat-icon-button>
+                            <mat-icon>close</mat-icon>
+                        </button>
+                        <button [disabled]="!user.phone" type="button" color="primary" (click)="savePhone()"
+                            mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
+                    </ng-template>
+                </div>
+            </div>
+        </app-card>
+
+        <app-auth-user-mfa *ngIf="user"></app-auth-user-mfa>
+
+        <!-- <app-card title="{{ 'USER.ADDRESS.TITLE' | translate }}" *ngIf="user">
+            <form [formGroup]="addressForm" (ngSubmit)="saveAddress()">
+                <div class="content">
+                    <mat-form-field class="formfield">
+                        <mat-label>{{ 'USER.ADDRESS.STREET' | translate }}</mat-label>
+                        <input matInput formControlName="streetAddress" />
+                    </mat-form-field>
+                    <mat-form-field class="formfield">
+                        <mat-label>{{ 'USER.ADDRESS.POSTAL_CODE' | translate }}</mat-label>
+                        <input matInput formControlName="postalCode" />
+                    </mat-form-field>
+                    <mat-form-field class="formfield">
+                        <mat-label>{{ 'USER.ADDRESS.LOCALITY' | translate }}</mat-label>
+                        <input matInput formControlName="locality" />
+                    </mat-form-field>
+                    <mat-form-field class="formfield">
+                        <mat-label>{{ 'USER.ADDRESS.REGION' | translate }}</mat-label>
+                        <input matInput formControlName="region" />
+                    </mat-form-field>
+                    <mat-form-field class="formfield">
+                        <mat-label>{{ 'USER.ADDRESS.COUNTRY' | translate }}</mat-label>
+                        <input matInput formControlName="country" />
+                    </mat-form-field>
+                </div>
+                <div class="btn-container">
+                    <button type="submit" color="primary" mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
+                </div>
+            </form>
+        </app-card> -->
     </div>
 
-
-    <app-card title="{{ 'USER.PAGES.LOGINNAMES' | translate }}"
-        description="{{ 'USER.PAGES.LOGINNAMESDESC' | translate }}" *ngIf="user">
-        <div class="login-name-row" *ngFor="let login of user?.loginNamesList">
-            <span>{{login}}</span>
-            <button color="primary" [disabled]="copied == login"
-                [matTooltip]="(copied != login ? 'USER.PAGES.COPY' : 'USER.PAGES.COPIED' ) | translate"
-                (click)="copytoclipboard(login)" mat-icon-button>
-                <i *ngIf="copied != login" class="las la-clipboard"></i>
-                <i *ngIf="copied == login" class="las la-clipboard-check"></i>
-            </button>
-        </div>
-    </app-card>
-
-
-    <app-card *ngIf="user" title="{{'USER.PASSWORD.TITLE' | translate}}"
-        description="{{'USER.PASSWORD.DESCRIPTION' | translate}}">
-        <form *ngIf="passwordForm" [formGroup]="passwordForm" (ngSubmit)="setPassword()">
-            <div class="content">
-                <mat-form-field class="formfield">
-                    <mat-label>{{ 'USER.PASSWORD.OLD' | translate }}</mat-label>
-                    <input autocomplete="off" name="password" type="password" matInput
-                        formControlName="currentPassword" />
-                    <mat-error *ngIf="currentPassword?.errors?.required">{{ 'USER.PASSWORD.REQUIRED' | translate }}
-                    </mat-error>
-                </mat-form-field>
-                <mat-form-field class="formfield">
-                    <mat-label>{{ 'USER.PASSWORD.NEW' | translate }}</mat-label>
-                    <input autocomplete="off" name="new password" type="password" matInput
-                        formControlName="newPassword" />
-
-                    <mat-error *ngIf="newPassword?.errors?.required">
-                        {{ 'USER.VALIDATION.REQUIRED' | translate }}
-                    </mat-error>
-                    <mat-error *ngIf="newPassword?.errors?.symbolValidator">
-                        {{ 'USER.VALIDATION.SYMBOLERROR' | translate }}
-                    </mat-error>
-                    <mat-error *ngIf="newPassword?.errors?.numberValidator">
-                        {{ 'USER.VALIDATION.NUMBERERROR' | translate }}
-                    </mat-error>
-                    <mat-error *ngIf="newPassword?.errors?.upperCaseValidator">
-                        {{ 'USER.VALIDATION.UPPERCASEMISSING' | translate }}
-                    </mat-error>
-                    <mat-error *ngIf="newPassword?.errors?.lowerCaseValidator">
-                        {{ 'USER.VALIDATION.LOWERCASEMISSING' | translate }}
-                    </mat-error>
-                    <mat-error *ngIf="newPassword?.errors?.minlength">
-                        {{ 'USER.VALIDATION.MINLENGTH' | translate:newPassword?.errors?.minlength }}
-                    </mat-error>
-
-                </mat-form-field>
-                <mat-form-field class="formfield">
-                    <mat-label>{{ 'USER.PASSWORD.CONFIRM' | translate }}</mat-label>
-                    <input autocomplete="off" name="password repeating" type="password" matInput
-                        formControlName="confirmPassword" />
-
-                    <mat-error *ngIf="confirmPassword?.errors?.required">
-                        {{ 'USER.VALIDATION.REQUIRED' | translate }}
-                    </mat-error>
-                    <mat-error *ngIf="confirmPassword?.errors?.symbolValidator">
-                        {{ 'USER.VALIDATION.SYMBOLERROR' | translate }}
-                    </mat-error>
-                    <mat-error *ngIf="confirmPassword?.errors?.numberValidator">
-                        {{ 'USER.VALIDATION.NUMBERERROR' | translate }}
-                    </mat-error>
-                    <mat-error *ngIf="confirmPassword?.errors?.notequal">
-                        {{ 'USER.PASSWORD.NOTEQUAL' | translate }}
-                    </mat-error>
-                    <mat-error *ngIf="confirmPassword?.errors?.upperCaseValidator">
-                        {{ 'USER.VALIDATION.UPPERCASEMISSING' | translate }}
-                    </mat-error>
-                    <mat-error *ngIf="confirmPassword?.errors?.lowerCaseValidator">
-                        {{ 'USER.VALIDATION.LOWERCASEMISSING' | translate }}
-                    </mat-error>
-                    <mat-error *ngIf="confirmPassword?.errors?.minlength">
-                        {{ 'USER.VALIDATION.MINLENGTH' | translate:confirmPassword?.errors?.minlength }}
-                    </mat-error>
-                </mat-form-field>
-            </div>
-            <div class="btn-container">
-                <button [disabled]="passwordForm.invalid" mat-raised-button
-                    color="primary">{{ 'USER.PASSWORD.RESET' | translate }}</button>
-            </div>
-        </form>
-    </app-card>
-
-    <app-card *ngIf="user" title="{{ 'USER.LOGINMETHODS.TITLE' | translate }}"
-        description="{{ 'USER.LOGINMETHODS.DESCRIPTION' | translate }}">
-        <div class="method-col">
-            <div class="method-row">
-                <span class="label">{{ 'USER.EMAIL' | translate }}</span>
-
-                <ng-container *ngIf="!emailEditState; else emailEdit">
-                    <div class="actions">
-                        <span class="name">{{email?.email}}</span>
-                        <mat-icon *ngIf="email?.isemailverified" color="primary" aria-hidden="false"
-                            aria-label="verified icon">
-                            check_circle_outline</mat-icon>
-                        <ng-container *ngIf="email?.email && !email?.isemailverified">
-                            <mat-icon color="warn" aria-hidden="false" aria-label="not verified icon">highlight_off
-                            </mat-icon>
-                            <a class="verify" matTooltip="{{'USER.LOGINMETHODS.EMAIL.RESEND' | translate}}"
-                                (click)="resendVerification()">{{'USER.LOGINMETHODS.RESENDCODE' | translate}}</a>
-                        </ng-container>
-                    </div>
-
-                    <div class="actions">
-                        <button (click)="emailEditState = true" mat-icon-button>
-                            <mat-icon>edit</mat-icon>
-                        </button>
-                    </div>
-                </ng-container>
-                <ng-template #emailEdit>
-                    <mat-form-field class="name">
-                        <mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>
-                        <input matInput [(ngModel)]="email.email" />
-                    </mat-form-field>
-                    <button (click)="emailEditState = false" mat-icon-button>
-                        <mat-icon>close</mat-icon>
-                    </button>
-                    <button [disabled]="!email.email" class="submit-button" type="button" color="primary"
-                        (click)="saveEmail()" mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
-                </ng-template>
-            </div>
-
-            <div class="method-row">
-                <span class="label">{{ 'USER.PHONE' | translate }}</span>
-
-                <ng-container *ngIf="!phoneEditState; else phoneEdit">
-                    <div class="actions">
-                        <span class="name">{{phone?.phone}}</span>
-                        <mat-icon *ngIf="phone?.isPhoneVerified" color="primary" aria-hidden="false"
-                            aria-label="verified icon">
-                            check_circle_outline</mat-icon>
-                        <ng-container *ngIf="phone?.phone && !phone?.isPhoneVerified">
-                            <mat-icon color="warn" aria-hidden="false" aria-label="not verified icon">highlight_off
-                            </mat-icon>
-                            <a class="verify" matTooltip="{{'USER.LOGINMETHODS.ENTERCODE_DESC' | translate}}"
-                                (click)="enterCode()">{{'USER.LOGINMETHODS.ENTERCODE' | translate}}</a>
-                            <a class="verify" matTooltip="{{'USER.LOGINMETHODS.PHONE.RESEND' | translate}}"
-                                (click)="resendPhoneVerification()">{{'USER.LOGINMETHODS.RESENDCODE' | translate}}</a>
-                        </ng-container>
-                    </div>
-
-                    <div class="actions">
-                        <button (click)="phoneEditState = true" mat-icon-button>
-                            <mat-icon>edit</mat-icon>
-                        </button>
-                        <button color="warn" *ngIf="phone?.phone" (click)="deletePhone()" mat-icon-button>
-                            <i class="las la-trash"></i>
-                        </button>
-                    </div>
-                </ng-container>
-
-                <ng-template #phoneEdit>
-                    <mat-form-field class="name">
-                        <mat-label>{{ 'USER.PHONE' | translate }}</mat-label>
-                        <input matInput [(ngModel)]="phone.phone" />
-                    </mat-form-field>
-                    <button (click)="phoneEditState = false" mat-icon-button>
-                        <mat-icon>close</mat-icon>
-                    </button>
-                    <button [disabled]="!phone.phone" type="button" color="primary" (click)="savePhone()"
-                        mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
-                </ng-template>
+    <metainfo *ngIf="user" class="side">
+        <div class="details">
+            <div class="row" *ngIf="user?.loginNamesList">
+                <span class="first">Login Names:</span>
+                <span class="second"><span style="display: block;"
+                        *ngFor="let login of user?.loginNamesList">{{login}}</span></span>
             </div>
         </div>
-    </app-card>
 
-    <app-auth-user-mfa *ngIf="user"></app-auth-user-mfa>
-
-    <app-card title="{{ 'USER.ADDRESS.TITLE' | translate }}" *ngIf="user">
-        <form [formGroup]="addressForm" (ngSubmit)="saveAddress()">
-            <div class="content">
-                <mat-form-field class="formfield">
-                    <mat-label>{{ 'USER.ADDRESS.STREET' | translate }}</mat-label>
-                    <input matInput formControlName="streetAddress" />
-                </mat-form-field>
-                <mat-form-field class="formfield">
-                    <mat-label>{{ 'USER.ADDRESS.POSTAL_CODE' | translate }}</mat-label>
-                    <input matInput formControlName="postalCode" />
-                </mat-form-field>
-                <mat-form-field class="formfield">
-                    <mat-label>{{ 'USER.ADDRESS.LOCALITY' | translate }}</mat-label>
-                    <input matInput formControlName="locality" />
-                </mat-form-field>
-                <mat-form-field class="formfield">
-                    <mat-label>{{ 'USER.ADDRESS.REGION' | translate }}</mat-label>
-                    <input matInput formControlName="region" />
-                </mat-form-field>
-                <mat-form-field class="formfield">
-                    <mat-label>{{ 'USER.ADDRESS.COUNTRY' | translate }}</mat-label>
-                    <input matInput formControlName="country" />
-                </mat-form-field>
-            </div>
-            <div class="btn-container">
-                <button type="submit" color="primary" mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
-            </div>
-        </form>
-    </app-card>
-</div>
\ No newline at end of file
+        <p class="side-section">{{ 'CHANGES.USER.TITLE' | translate }}</p>
+        <app-changes [changeType]="ChangeType.USER" [id]="user.id"></app-changes>
+    </metainfo>
+</app-meta-layout>
\ No newline at end of file
diff --git a/console/src/app/pages/user-detail/auth-user-detail/auth-user-detail.component.scss b/console/src/app/pages/user-detail/auth-user-detail/auth-user-detail.component.scss
index 8d861c004..deeebb121 100644
--- a/console/src/app/pages/user-detail/auth-user-detail/auth-user-detail.component.scss
+++ b/console/src/app/pages/user-detail/auth-user-detail/auth-user-detail.component.scss
@@ -82,60 +82,59 @@ h1 {
   }
   
 .method-col {
-  display: flex;
-  flex-direction: column;
-  margin: -.5rem;
-
-  .method-row {
     display: flex;
-    align-items: center;
-    justify-content: space-evenly;
-    padding: .5rem;
-    border-bottom: 1px solid #ffffff20;
-    flex-wrap: wrap;
+    flex-direction: column;
+    margin: -.5rem;
 
-    .label, .name {
-      margin-right: 1rem;
+    .method-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-evenly;
+        padding: .5rem;
+        border-bottom: 1px solid #ffffff20;
+        flex-wrap: wrap;
+
+        .label, .name {
+        margin-right: 1rem;
+        }
+
+        .actions {
+            flex: 1;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        }
+
+        .label {
+            flex: 1;
+            font-size: .9rem;
+            color: #818a8a;
+        }
+
+        mat-icon {
+            margin-right: .5rem;
+        }
+
+        .submit-button {
+            border-radius: .5rem;
+        }
+
+        .verify {
+            text-decoration: none;
+            font-size: .8rem;
+            color: #81868a;
+            border-radius: .5rem;
+            cursor: pointer;
+            word-wrap: none;
+            white-space: nowrap;
+            margin-right: 1rem;
+
+            &:hover {
+                color: white;
+                text-decoration: underline;
+            }
+        }
     }
-
-    .actions {
-        flex: 1;
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-    }
-
-    .label {
-    flex: 1;
-      font-size: .9rem;
-      color: #818a8a;
-      text-transform: uppercase;
-    }
-
-    mat-icon {
-      margin-right: .5rem;
-    }
-
-    .submit-button {
-      border-radius: .5rem;
-    }
-
-    .verify {
-      text-decoration: none;
-      font-size: .8rem;
-      color: #81868a;
-      border-radius: .5rem;
-      cursor: pointer;
-      word-wrap: none;
-      white-space: nowrap;
-      margin-right: 1rem;
-
-      &:hover {
-          color: white;
-          text-decoration: underline;
-      }
-    }
-  }
 }
 
 .col {
@@ -153,3 +152,122 @@ h1 {
         max-width: 300px;
     }
 }
+
+.side {
+    .details {
+        margin-bottom: 1rem;
+        border-bottom: 1px solid #81868a40;
+        padding-bottom: 1rem;
+    
+        .row {
+            display: flex;
+            margin-bottom: 0.5rem;
+            align-items: center;
+    
+            button {
+                display: none;
+                visibility: hidden;
+            }
+    
+            &:hover {
+                button {
+                    display: inline-block;
+                    visibility: visible;
+                    mat-icon {
+                        font-size: 1.2rem;
+                    }
+                }
+            }
+    
+            .first {
+                flex: 1;
+                font-size: 0.8rem;
+                margin-right: 0.5rem;
+                white-space: nowrap;
+            }
+    
+            .fill-space {
+                flex: 1;
+            }
+    
+            .second {
+                font-size: 0.8rem;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                margin-left: 1rem;
+                text-align: right;
+            }
+
+            a {
+                &:hover {
+                    cursor: pointer;
+                    text-decoration: underline;
+                }
+            }
+        }
+
+        .side-section {
+            color: #81868a;
+        }
+    }  
+
+    .details {
+        margin-bottom: 1rem;
+        border-bottom: 1px solid #81868a40;
+        padding-bottom: 1rem;
+    
+        .row {
+            display: flex;
+            margin-bottom: 0.5rem;
+            align-items: center;
+    
+            button {
+                display: none;
+                visibility: hidden;
+            }
+    
+            &:hover {
+                button {
+                    display: inline-block;
+                    visibility: visible;
+                    mat-icon {
+                        font-size: 1.2rem;
+                    }
+                }
+            }
+    
+            .first {
+                flex: 1;
+                font-size: 0.8rem;
+                margin-right: 0.5rem;
+            }
+    
+            .fill-space {
+                flex: 1;
+            }
+    
+            .second {
+                font-size: 0.8rem;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                margin-left: 1rem;
+            }
+
+            a {
+                &:hover {
+                    cursor: pointer;
+                    text-decoration: underline;
+                }
+            }
+        }
+
+        .side-section {
+            color: #81868a;
+        }
+    }    
+
+    app-changes {
+        flex: 1;
+        min-height: 0;
+    }
+}
diff --git a/console/src/app/pages/user-detail/auth-user-detail/auth-user-detail.component.ts b/console/src/app/pages/user-detail/auth-user-detail/auth-user-detail.component.ts
index d826926a5..0bb4b7307 100644
--- a/console/src/app/pages/user-detail/auth-user-detail/auth-user-detail.component.ts
+++ b/console/src/app/pages/user-detail/auth-user-detail/auth-user-detail.component.ts
@@ -3,6 +3,7 @@ import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/fo
 import { MatDialog } from '@angular/material/dialog';
 import { TranslateService } from '@ngx-translate/core';
 import { Subscription } from 'rxjs';
+import { ChangeType } from 'src/app/modules/changes/changes.component';
 import { Gender, UserAddress, UserEmail, UserPhone, UserProfile, UserView } from 'src/app/proto/generated/auth_pb';
 import { PasswordComplexityPolicy } from 'src/app/proto/generated/management_pb';
 import { AuthUserService } from 'src/app/services/auth-user.service';
@@ -39,14 +40,12 @@ function passwordConfirmValidator(c: AbstractControl): any {
 })
 export class AuthUserDetailComponent implements OnDestroy {
     public user!: UserView.AsObject;
-    public email: UserEmail.AsObject = { email: '' } as any;
-    public phone: UserPhone.AsObject = { phone: '' } as any;
     public address: UserAddress.AsObject = { id: '' } as any;
     public genders: Gender[] = [Gender.GENDER_MALE, Gender.GENDER_FEMALE, Gender.GENDER_DIVERSE];
     public languages: string[] = ['de', 'en'];
 
     public passwordForm!: FormGroup;
-    public addressForm!: FormGroup;
+    // public addressForm!: FormGroup;
     private subscription: Subscription = new Subscription();
 
     public emailEditState: boolean = false;
@@ -57,6 +56,7 @@ export class AuthUserDetailComponent implements OnDestroy {
     public policy!: PasswordComplexityPolicy.AsObject;
     public copied: string = '';
 
+    public ChangeType: any = ChangeType;
     public userLoginMustBeDomain: boolean = false;
 
     constructor(
@@ -70,7 +70,6 @@ export class AuthUserDetailComponent implements OnDestroy {
         const validators: Validators[] = [Validators.required];
         this.orgService.GetPasswordComplexityPolicy().then(data => {
             this.policy = data.toObject();
-            console.log(this.policy);
             if (this.policy.minLength) {
                 validators.push(Validators.minLength(this.policy.minLength));
             }
@@ -92,11 +91,6 @@ export class AuthUserDetailComponent implements OnDestroy {
                 newPassword: ['', validators],
                 confirmPassword: ['', [...validators, passwordConfirmValidator]],
             });
-
-            this.passwordForm.controls['newPassword'].valueChanges.subscribe(() => {
-                console.log(this.passwordForm.controls['newPassword'].errors);
-            });
-
         }).catch(error => {
             this.toast.showError(error.message);
             console.error(error.message);
@@ -107,13 +101,13 @@ export class AuthUserDetailComponent implements OnDestroy {
             });
         });
 
-        this.addressForm = this.fb.group({
-            streetAddress: [''],
-            postalCode: [''],
-            locality: [''],
-            region: [''],
-            country: [''],
-        });
+        // this.addressForm = this.fb.group({
+        //     streetAddress: [''],
+        //     postalCode: [''],
+        //     locality: [''],
+        //     region: [''],
+        //     country: [''],
+        // });
 
         this.loading = true;
         this.getData().then(() => {
@@ -128,14 +122,12 @@ export class AuthUserDetailComponent implements OnDestroy {
     }
 
     public saveProfile(profileData: UserProfile.AsObject): void {
-        console.log(profileData);
         this.user.firstName = profileData.firstName;
         this.user.lastName = profileData.lastName;
         this.user.nickName = profileData.nickName;
         this.user.displayName = profileData.displayName;
         this.user.gender = profileData.gender;
         this.user.preferredLanguage = profileData.preferredLanguage;
-        console.log(this.user);
         this.userService
             .SaveMyUserProfile(
                 this.user.firstName,
@@ -160,7 +152,6 @@ export class AuthUserDetailComponent implements OnDestroy {
             this.userService
                 .ChangeMyPassword(this.currentPassword.value, this.newPassword.value).then((data: any) => {
                     this.toast.showInfo('Password Set');
-                    this.email = data.toObject();
                 }).catch(data => {
                     this.toast.showError(data.message);
                 });
@@ -171,9 +162,9 @@ export class AuthUserDetailComponent implements OnDestroy {
         this.emailEditState = false;
 
         this.userService
-            .SaveMyUserEmail(this.email).then((data: UserEmail) => {
+            .SaveMyUserEmail(this.user.email).then((data: UserEmail) => {
                 this.toast.showInfo('Saved Email');
-                this.email = data.toObject();
+                this.user.email = data.toObject().email;
                 this.emailEditState = false;
             }).catch(data => {
                 this.toast.showError(data.message);
@@ -182,21 +173,20 @@ export class AuthUserDetailComponent implements OnDestroy {
     }
 
     public deletePhone(): void {
-        this.phone.phone = '';
+        this.user.phone = '';
         this.savePhone();
     }
 
     public enterCode(): void {
         const dialogRef = this.dialog.open(CodeDialogComponent, {
             data: {
-                number: this.phone.phone,
+                number: this.user.phone,
             },
             width: '400px',
         });
 
         dialogRef.afterClosed().subscribe(code => {
             if (code) {
-                console.log(code);
                 this.userService.VerifyMyUserPhone(code).then(() => {
                     this.toast.showInfo('Verified Phone');
                 }).catch(error => {
@@ -211,20 +201,16 @@ export class AuthUserDetailComponent implements OnDestroy {
     }
 
     public resendVerification(): void {
-        this.userService.ResendEmailVerification().then((data: any) => {
+        this.userService.ResendEmailVerification().then(() => {
             this.toast.showInfo('Saved Email');
-            this.email = data.toObject();
         }).catch(data => {
             this.toast.showError(data.message);
         });
     }
 
     public resendPhoneVerification(): void {
-        console.log('resendverification');
-        this.userService.ResendPhoneVerification().then((data: any) => {
-            console.log(data);
+        this.userService.ResendPhoneVerification().then(() => {
             this.toast.showInfo('Phoneverification was successfully sent!');
-            this.email = data.toObject();
         }).catch(data => {
             this.toast.showError(data.message);
         });
@@ -232,13 +218,10 @@ export class AuthUserDetailComponent implements OnDestroy {
 
     public savePhone(): void {
         this.phoneEditState = false;
-        if (!this.phone.id) {
-            this.phone.id = this.user.id;
-        }
         this.userService
-            .SaveMyUserPhone(this.phone).then((data: UserPhone) => {
+            .SaveMyUserPhone(this.user.phone).then((data: UserPhone) => {
                 this.toast.showInfo('Saved Phone');
-                this.phone = data.toObject();
+                this.user.phone = data.toObject().phone;
                 this.phoneEditState = false;
             }).catch(data => {
                 this.toast.showError(data.message);
@@ -246,32 +229,32 @@ export class AuthUserDetailComponent implements OnDestroy {
             });
     }
 
-    public saveAddress(): void {
-        this.address = this.addressForm.value;
-        this.userService
-            .SaveMyUserAddress(this.address as UserAddress.AsObject).then((data: UserAddress) => {
-                this.toast.showInfo('Saved Address');
-                this.address = data.toObject();
-            }).catch(data => {
-                this.toast.showError(data.message);
-            });
-    }
+    // public saveAddress(): void {
+    //     this.address = this.addressForm.value;
+    //     this.userService
+    //         .SaveMyUserAddress(this.address as UserAddress.AsObject).then((data: UserAddress) => {
+    //             this.toast.showInfo('Saved Address');
+    //             this.address = data.toObject();
+    //         }).catch(data => {
+    //             this.toast.showError(data.message);
+    //         });
+    // }
 
-    public get streetAddress(): AbstractControl | null {
-        return this.addressForm.get('streetAddress');
-    }
-    public get postalCode(): AbstractControl | null {
-        return this.addressForm.get('postalCode');
-    }
-    public get locality(): AbstractControl | null {
-        return this.addressForm.get('locality');
-    }
-    public get region(): AbstractControl | null {
-        return this.addressForm.get('region');
-    }
-    public get country(): AbstractControl | null {
-        return this.addressForm.get('country');
-    }
+    // public get streetAddress(): AbstractControl | null {
+    //     return this.addressForm.get('streetAddress');
+    // }
+    // public get postalCode(): AbstractControl | null {
+    //     return this.addressForm.get('postalCode');
+    // }
+    // public get locality(): AbstractControl | null {
+    //     return this.addressForm.get('locality');
+    // }
+    // public get region(): AbstractControl | null {
+    //     return this.addressForm.get('region');
+    // }
+    // public get country(): AbstractControl | null {
+    //     return this.addressForm.get('country');
+    // }
 
     public get currentPassword(): AbstractControl | null {
         return this.passwordForm.get('currentPassword');
@@ -285,17 +268,13 @@ export class AuthUserDetailComponent implements OnDestroy {
 
     private async getData(): Promise<void> {
         this.userService.GetMyUser().then(user => {
-            console.log(user.toObject());
             this.user = user.toObject();
         }).catch(err => {
             console.error(err);
         });
 
-        this.email = (await this.userService.GetMyUserEmail()).toObject();
-        this.phone = (await this.userService.GetMyUserPhone()).toObject();
-        this.address = (await this.userService.GetMyUserAddress()).toObject();
-
-        this.addressForm.patchValue(this.address);
+        // this.address = (await this.userService.GetMyUserAddress()).toObject();
+        // this.addressForm.patchValue(this.address);
     }
 
     public copytoclipboard(value: string): void {
diff --git a/console/src/app/pages/user-detail/auth-user-mfa/auth-user-mfa.component.ts b/console/src/app/pages/user-detail/auth-user-mfa/auth-user-mfa.component.ts
index 0a11a2335..7a5c9515c 100644
--- a/console/src/app/pages/user-detail/auth-user-mfa/auth-user-mfa.component.ts
+++ b/console/src/app/pages/user-detail/auth-user-mfa/auth-user-mfa.component.ts
@@ -35,7 +35,6 @@ export class AuthUserMfaComponent implements OnInit, OnDestroy {
     public addOTP(): void {
         this.userService.AddMfaOTP().then((otpresp) => {
             const otp: MfaOtpResponse.AsObject = otpresp.toObject();
-            console.log(otp);
             const dialogRef = this.dialog.open(DialogOtpComponent, {
                 data: otp.url,
                 width: '400px',
@@ -44,7 +43,6 @@ export class AuthUserMfaComponent implements OnInit, OnDestroy {
             dialogRef.afterClosed().subscribe((code) => {
                 if (code) {
                     this.userService.VerifyMfaOTP(code).then((res) => {
-                        console.log(res.toObject());
                         // TODO: show state
                     });
                 }
diff --git a/console/src/app/pages/user-detail/theme-setting/theme-setting.component.html b/console/src/app/pages/user-detail/theme-setting/theme-setting.component.html
index da76fe1b1..c1af7eeb3 100644
--- a/console/src/app/pages/user-detail/theme-setting/theme-setting.component.html
+++ b/console/src/app/pages/user-detail/theme-setting/theme-setting.component.html
@@ -5,7 +5,7 @@
             <div class="crescent"></div>
         </div>
         <p class="heading">Choose a style</p>
-        <p>Pop or subtle. Day or night.<br>
+        <p class="desc">Pop or subtle. Day or night.<br>
             Customize your interface
         </p>
         <label for="switch">
diff --git a/console/src/app/pages/user-detail/theme-setting/theme-setting.component.scss b/console/src/app/pages/user-detail/theme-setting/theme-setting.component.scss
index 1bd3bae4a..02be8179a 100644
--- a/console/src/app/pages/user-detail/theme-setting/theme-setting.component.scss
+++ b/console/src/app/pages/user-detail/theme-setting/theme-setting.component.scss
@@ -13,8 +13,8 @@ $dark-background: #2d2e30;
 .circle {
   position: relative;
   border-radius: 100%;
-  width: 8rem;
-  height: 8rem;
+  width: 6rem;
+  height: 6rem;
   background: linear-gradient(40deg, #FF0080,#FF8C00 70%);
   margin: auto;
 }
@@ -22,8 +22,8 @@ $dark-background: #2d2e30;
   position: absolute;
   border-radius: 100%;
   right: 0;
-  width: 6rem;
-  height: 6rem;
+  width: 4rem;
+  height: 4rem;
   background: white;
   transform: scale(0);
   transform-origin: top right;
@@ -33,20 +33,27 @@ p {
   font-size: 90%;
 }
 .heading {
-  font-size: 140%;
+  font-size: 100%;
   font-weight: bolder;
   margin: 2rem 0 .2rem 0;
 }
+
+.desc {
+    font-size: 14px;
+    color: #81868a;
+}
+
 label, .toggle {
   height: 2.8rem;
   border-radius: 100px;
 }
+
 label {
   width: 100%;
   background-color: rgba(0,0,0,.1);
   border-radius: 100px;
   position: relative;
-  margin: 1.8rem 0 1rem 0; 
+  margin: 1rem 0 1rem 0; 
   cursor: pointer;
 }
 .toggle {
diff --git a/console/src/app/pages/user-detail/user-detail/user-detail.component.html b/console/src/app/pages/user-detail/user-detail/user-detail.component.html
index d835a17c6..7296e324f 100644
--- a/console/src/app/pages/user-detail/user-detail/user-detail.component.html
+++ b/console/src/app/pages/user-detail/user-detail/user-detail.component.html
@@ -1,5 +1,4 @@
 <app-meta-layout>
-
     <div *ngIf="user" class="max-width-container">
         <div class="head">
             <a (click)="navigateBack()" mat-icon-button>
@@ -176,7 +175,7 @@
 
         <app-user-mfa *ngIf="user" [user]="user"></app-user-mfa>
 
-        <app-card title="{{ 'USER.ADDRESS.TITLE' | translate }}">
+        <!-- <app-card title="{{ 'USER.ADDRESS.TITLE' | translate }}">
             <form [formGroup]="addressForm" (ngSubmit)="saveAddress()">
                 <div class="content">
                     <mat-form-field class="formfield">
@@ -204,7 +203,7 @@
                     <button type="submit" color="primary" mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
                 </div>
             </form>
-        </app-card>
+        </app-card> -->
 
         <app-card *ngIf="user?.id" title="{{ 'USER.GRANTS.TITLE' | translate }}"
             description="{{'USER.GRANTS.DESCRIPTION' | translate }}">
diff --git a/console/src/app/pages/user-detail/user-detail/user-detail.component.scss b/console/src/app/pages/user-detail/user-detail/user-detail.component.scss
index 0341e9528..24e5b3d20 100644
--- a/console/src/app/pages/user-detail/user-detail/user-detail.component.scss
+++ b/console/src/app/pages/user-detail/user-detail/user-detail.component.scss
@@ -74,21 +74,20 @@
         flex-wrap: wrap;
     
         .label, .name {
-          margin-right: 1rem;
+            margin-right: 1rem;
         }
     
         .actions {
             flex: 1;
-          display: flex;
-          justify-content: flex-end;
-          align-items: center;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
         }
     
         .label {
-        flex: 1;
-          font-size: .9rem;
-          color: #818a8a;
-          text-transform: uppercase;
+            flex: 1;
+            font-size: .9rem;
+            color: #818a8a;
         }
     
         mat-icon {
@@ -122,10 +121,6 @@
 }
 
 .side {
-    // height: calc(100vh - 60px - 2rem);
-    // display: flex;
-    // flex-direction: column;
-
     .details {
         margin-bottom: 1rem;
         border-bottom: 1px solid #81868a40;
diff --git a/console/src/app/pages/user-detail/user-detail/user-detail.component.ts b/console/src/app/pages/user-detail/user-detail/user-detail.component.ts
index 8680edd28..59eafaee1 100644
--- a/console/src/app/pages/user-detail/user-detail/user-detail.component.ts
+++ b/console/src/app/pages/user-detail/user-detail/user-detail.component.ts
@@ -10,7 +10,6 @@ import {
     Gender,
     NotificationType,
     PasswordComplexityPolicy,
-    UserAddress,
     UserEmail,
     UserPhone,
     UserProfile,
@@ -47,14 +46,12 @@ function passwordConfirmValidator(c: AbstractControl): any {
 })
 export class UserDetailComponent implements OnInit, OnDestroy {
     public user!: UserView.AsObject;
-    // public email: UserEmail.AsObject = { email: '' } as any;
-    // public phone: UserPhone.AsObject = { phone: '' } as any;
-    public address: UserAddress.AsObject = { id: '' } as any;
+    // public address: UserAddress.AsObject = { id: '' } as any;
     public genders: Gender[] = [Gender.GENDER_MALE, Gender.GENDER_FEMALE, Gender.GENDER_DIVERSE];
     public languages: string[] = ['de', 'en'];
 
     public passwordForm!: FormGroup;
-    public addressForm!: FormGroup;
+    // public addressForm!: FormGroup;
 
     public isMgmt: boolean = false;
     private subscription: Subscription = new Subscription();
@@ -102,20 +99,19 @@ export class UserDetailComponent implements OnInit, OnDestroy {
                 confirmPassword: ['', [...validators, passwordConfirmValidator]],
             });
         }).catch(error => {
-            console.log('no password complexity policy defined!');
             this.passwordForm = this.fb.group({
                 password: ['', []],
                 confirmPassword: ['', [passwordConfirmValidator]],
             });
         });
 
-        this.addressForm = this.fb.group({
-            streetAddress: [''],
-            postalCode: [''],
-            locality: [''],
-            region: [''],
-            country: [''],
-        });
+        // this.addressForm = this.fb.group({
+        //     streetAddress: [''],
+        //     postalCode: [''],
+        //     locality: [''],
+        //     region: [''],
+        //     country: [''],
+        // });
     }
 
     public ngOnInit(): void {
@@ -159,7 +155,6 @@ export class UserDetailComponent implements OnInit, OnDestroy {
         this.user.displayName = profileData.displayName;
         this.user.gender = profileData.gender;
         this.user.preferredLanguage = profileData.preferredLanguage;
-        console.log(this.user);
         this.mgmtUserService
             .SaveUserProfile(
                 this.user.id,
@@ -178,7 +173,6 @@ export class UserDetailComponent implements OnInit, OnDestroy {
     }
 
     public resendVerification(): void {
-        console.log('resendverification');
         this.mgmtUserService.ResendEmailVerification(this.user.id).then(() => {
             this.toast.showInfo('Email was successfully sent!');
         }).catch(data => {
@@ -237,45 +231,45 @@ export class UserDetailComponent implements OnInit, OnDestroy {
             });
     }
 
-    public saveAddress(): void {
-        if (!this.address.id) {
-            this.address.id = this.user.id;
-        }
+    // public saveAddress(): void {
+    //     if (!this.address.id) {
+    //         this.address.id = this.user.id;
+    //     }
 
-        this.address.streetAddress = this.streetAddress?.value;
-        this.address.postalCode = this.postalCode?.value;
-        this.address.locality = this.locality?.value;
-        this.address.region = this.region?.value;
-        this.address.country = this.country?.value;
+    //     this.address.streetAddress = this.streetAddress?.value;
+    //     this.address.postalCode = this.postalCode?.value;
+    //     this.address.locality = this.locality?.value;
+    //     this.address.region = this.region?.value;
+    //     this.address.country = this.country?.value;
 
-        this.mgmtUserService
-            .SaveUserAddress(this.address as UserAddress.AsObject).then((data: UserAddress) => {
-                this.toast.showInfo('Saved Address');
-                this.address = data.toObject();
-            }).catch(data => {
-                this.toast.showError(data.message);
-            });
-    }
+    //     this.mgmtUserService
+    //         .SaveUserAddress(this.address as UserAddress.AsObject).then((data: UserAddress) => {
+    //             this.toast.showInfo('Saved Address');
+    //             this.address = data.toObject();
+    //         }).catch(data => {
+    //             this.toast.showError(data.message);
+    //         });
+    // }
 
     public navigateBack(): void {
         this._location.back();
     }
 
-    public get streetAddress(): AbstractControl | null {
-        return this.addressForm.get('streetAddress');
-    }
-    public get postalCode(): AbstractControl | null {
-        return this.addressForm.get('postalCode');
-    }
-    public get locality(): AbstractControl | null {
-        return this.addressForm.get('locality');
-    }
-    public get region(): AbstractControl | null {
-        return this.addressForm.get('region');
-    }
-    public get country(): AbstractControl | null {
-        return this.addressForm.get('country');
-    }
+    // public get streetAddress(): AbstractControl | null {
+    //     return this.addressForm.get('streetAddress');
+    // }
+    // public get postalCode(): AbstractControl | null {
+    //     return this.addressForm.get('postalCode');
+    // }
+    // public get locality(): AbstractControl | null {
+    //     return this.addressForm.get('locality');
+    // }
+    // public get region(): AbstractControl | null {
+    //     return this.addressForm.get('region');
+    // }
+    // public get country(): AbstractControl | null {
+    //     return this.addressForm.get('country');
+    // }
 
     public get password(): AbstractControl | null {
         return this.passwordForm.get('password');
@@ -287,15 +281,11 @@ export class UserDetailComponent implements OnInit, OnDestroy {
     private async getData({ id }: Params): Promise<void> {
         this.isMgmt = true;
         this.mgmtUserService.GetUserByID(id).then(user => {
-            console.log(user.toObject());
             this.user = user.toObject();
         }).catch(err => {
             console.error(err);
         });
-        // this.profile = (await this.mgmtUserService.GetUserProfile(id)).toObject();
-        // this.email = (await this.mgmtUserService.GetUserEmail(id)).toObject();
-        // this.phone = (await this.mgmtUserService.GetUserPhone(id)).toObject();
-        this.address = (await this.mgmtUserService.GetUserAddress(id)).toObject();
-        this.addressForm.patchValue(this.address);
+        // this.address = (await this.mgmtUserService.GetUserAddress(id)).toObject();
+        // this.addressForm.patchValue(this.address);
     }
 }
diff --git a/console/src/app/pages/user-grant-create/user-grant-create.component.ts b/console/src/app/pages/user-grant-create/user-grant-create.component.ts
index c87c4d6c5..4305bd154 100644
--- a/console/src/app/pages/user-grant-create/user-grant-create.component.ts
+++ b/console/src/app/pages/user-grant-create/user-grant-create.component.ts
@@ -32,13 +32,11 @@ export class UserGrantCreateComponent implements OnDestroy {
         private route: ActivatedRoute,
     ) {
         this.subscription = this.route.params.subscribe(({ id }: Params) => {
-            console.log(id);
             this.userId = id;
         });
 
         this.authService.GetActiveOrg().then(org => {
             this.org = org;
-            console.log(org);
         });
     }
 
@@ -52,7 +50,6 @@ export class UserGrantCreateComponent implements OnDestroy {
             this.userId,
             this.rolesList,
         ).then((data: UserGrant) => {
-            console.log(data);
             this.close();
         }).catch(error => {
             this.toast.showError(error.message);
@@ -61,7 +58,6 @@ export class UserGrantCreateComponent implements OnDestroy {
 
     public selectProject(project: Project.AsObject): void {
         this.projectId = project.id;
-        console.log(project);
     }
 
     public selectRoles(roles: ProjectRole.AsObject[]): void {
diff --git a/console/src/app/services/auth-interceptor.service.ts b/console/src/app/services/auth-interceptor.service.ts
index 1826bf95a..5d3925b3c 100644
--- a/console/src/app/services/auth-interceptor.service.ts
+++ b/console/src/app/services/auth-interceptor.service.ts
@@ -10,8 +10,6 @@ export class AuthInterceptorService implements HttpInterceptor {
     constructor() { }
 
     public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-        console.log(req.url);
-
         return next.handle(req);
     }
 }
diff --git a/console/src/app/services/auth-user.service.ts b/console/src/app/services/auth-user.service.ts
index 06813ab50..fc8a6c246 100644
--- a/console/src/app/services/auth-user.service.ts
+++ b/console/src/app/services/auth-user.service.ts
@@ -121,7 +121,6 @@ export class AuthUserService {
         if (preferredLanguage) {
             req.setPreferredLanguage(preferredLanguage);
         }
-        console.log(req.toObject());
         return await this.request(
             c => c.updateMyUserProfile,
             req,
@@ -145,9 +144,9 @@ export class AuthUserService {
         );
     }
 
-    public async SaveMyUserEmail(email: UserEmail.AsObject): Promise<UserEmail> {
+    public async SaveMyUserEmail(email: string): Promise<UserEmail> {
         const req = new UpdateUserEmailRequest();
-        req.setEmail(email.email);
+        req.setEmail(email);
         return await this.request(
             c => c.changeMyUserEmail,
             req,
@@ -185,9 +184,9 @@ export class AuthUserService {
         );
     }
 
-    public async SaveMyUserPhone(phone: UserPhone.AsObject): Promise<UserPhone> {
+    public async SaveMyUserPhone(phone: string): Promise<UserPhone> {
         const req = new UpdateUserPhoneRequest();
-        req.setPhone(phone.phone);
+        req.setPhone(phone);
         return await this.request(
             c => c.changeMyUserPhone,
             req,
@@ -297,7 +296,6 @@ export class AuthUserService {
                         userRoles = ['user.resourceowner'];
                     }
                     this._roleCache = userRoles;
-                    console.log(roles);
                     return of(this.hasRoles(userRoles, roles, each));
                 }),
             );
diff --git a/console/src/app/services/auth.service.ts b/console/src/app/services/auth.service.ts
index fb81c98cc..9bd9556a7 100644
--- a/console/src/app/services/auth.service.ts
+++ b/console/src/app/services/auth.service.ts
@@ -65,8 +65,6 @@ export class AuthService {
         this.config.issuer = config?.issuer || this.grpcService.issuer;
         this.config.clientId = config?.clientId || this.grpcService.clientid;
         this.config.customQueryParams = config?.customQueryParams;
-        console.log(this.config);
-
         this.oauthService.configure(this.config);
         // this.oauthService.setupAutomaticSilentRefresh();
         this.oauthService.strictDiscoveryDocumentValidation = false;
diff --git a/console/src/app/services/grpc.service.ts b/console/src/app/services/grpc.service.ts
index d8cc82143..fb1842460 100644
--- a/console/src/app/services/grpc.service.ts
+++ b/console/src/app/services/grpc.service.ts
@@ -31,7 +31,6 @@ export class GrpcService {
 
                     this.issuer = data.issuer;
                     if (data.clientid) {
-                        console.log(data.clientid);
                         this.clientid = data.clientid;
                     }
                 }
diff --git a/console/src/assets/i18n/de.json b/console/src/assets/i18n/de.json
index 78fd3c723..f7338720d 100644
--- a/console/src/assets/i18n/de.json
+++ b/console/src/assets/i18n/de.json
@@ -2,7 +2,6 @@
     "APP_NAME": "zitadel",
     "HOME": {
         "TITLE": "zitadel",
-        "DESCRIPTION": "Hier können Sie Ihre Daten sowie die Datenschutz- und Sicherheitseinstellungen verwalten, um Caos optimal an Ihre Bedürfnisse anzupassen",
         "SECURITYANDPRIVACY": "Datenschutz und Personalisierung",
         "SECURITYANDPRIVACY_DESC": "Sie können die Daten in Ihrem Caos-Konto sehen und auswählen, welche Aktivitäten gespeichert werden, um Caos für sich zu personalisieren",
         "SECURITYANDPRIVACY_BUTTON": "Daten verwalten und personalisieren",
@@ -24,9 +23,11 @@
         "IAM":"IAM",
         "ORGANIZATION": "Organisation",
         "PROJECT": "Projekte",
+        "GRANTEDPROJECT":"Berechtigte Projekte",
         "USER": "Benutzer",
         "LOGOUT": "abmelden",
-        "NEWORG":"Neue Organisation"
+        "NEWORG":"Neue Organisation",
+        "IAMADMIN":"Sie sind ein IAM Administrator. Sie haben erweiterte Berechtigungen!"
     },
     "ACTIONS": {
         "SAVE": "speichern",
@@ -567,6 +568,7 @@
             "user.mfa.init.skipped":"MFA init übersprungen",
             "user.mfa.otp.added":"MFA OTP hinzugefügt",
             "user.mfa.otp.verified":"MFA OTP verifiziert",
+            "user.mfa.otp.removed":"MFA OTP entfernt",
             "user.selfregistered":"selbst registriert"
         }
     }
diff --git a/console/src/assets/i18n/en.json b/console/src/assets/i18n/en.json
index 1770a6215..9bb58ade3 100644
--- a/console/src/assets/i18n/en.json
+++ b/console/src/assets/i18n/en.json
@@ -2,7 +2,6 @@
     "APP_NAME": "zitadel",
     "HOME": {
         "TITLE": "zitadel",
-        "DESCRIPTION": "Here you can manage your data as well as data protection and security settings in order to optimally adapt Caos to your needs",
         "SECURITYANDPRIVACY": "Data protection and personalization",
         "SECURITYANDPRIVACY_DESC": "You can view the data in your Caos account and choose which activities are saved in order to personalize Caos for you",
         "SECURITYANDPRIVACY_BUTTON": "Personalize data",
@@ -24,9 +23,11 @@
         "IAM":"IAM",
         "ORGANIZATION": "Organization",
         "PROJECT": "Projects",
+        "GRANTEDPROJECT":"Granted Projects",
         "USER": "Users",
         "LOGOUT": "Log out",
-        "NEWORG":"New Organization"
+        "NEWORG":"New Organization",
+        "IAMADMIN":"You are an IAM Administrator. Note that you have enhanced permissions!"
     },
     "ACTIONS": {
         "SAVE": "Save",
@@ -568,6 +569,7 @@
             "user.mfa.init.skipped":"MFA init skipped",
             "user.mfa.otp.added":"MFA OTP added",
             "user.mfa.otp.verified":"MFA OTP verified",
+            "user.mfa.otp.removed":"MFA OTP removed",
             "user.selfregistered":"self registered"
         }
     }
diff --git a/console/src/component-themes.scss b/console/src/component-themes.scss
index 878716e83..1d706f5b9 100644
--- a/console/src/component-themes.scss
+++ b/console/src/component-themes.scss
@@ -3,12 +3,14 @@
 @import './styles/sidenav-list';
 @import './styles/morph-card';
 @import './styles/changes';
+@import './styles/avatar';
 
 
 @mixin component-themes($theme) {
-  @include card-theme($theme);
-  @include table-theme($theme);
-  @include sidenav-list-theme($theme);
-  @include morph-card-theme($theme);
-  @include changes-theme($theme);
+    @include avatar-theme($theme);
+    @include card-theme($theme);
+    @include table-theme($theme);
+    @include sidenav-list-theme($theme);
+    @include morph-card-theme($theme);
+    @include changes-theme($theme);
 }
\ No newline at end of file
diff --git a/console/src/styles.scss b/console/src/styles.scss
index 45f6d4136..4b3438b6b 100644
--- a/console/src/styles.scss
+++ b/console/src/styles.scss
@@ -122,7 +122,7 @@ $light-accent: mat-palette($mat-indigo);
 $light-warn: mat-palette($mat-red);
 
 $dark-primary: mat-palette($caos-dark-brand);
-$dark-accent: mat-palette($caos-dark-brand, 500, 700, A700);
+$dark-accent: mat-palette($mat-pink, 500, 700, A700);
 $dark-warn: mat-palette($mat-red);
 
 $light-theme: mat-light-theme($light-primary, $light-accent, $light-warn);
diff --git a/console/src/styles/avatar.scss b/console/src/styles/avatar.scss
new file mode 100644
index 000000000..530ce7c95
--- /dev/null
+++ b/console/src/styles/avatar.scss
@@ -0,0 +1,19 @@
+@import '~@angular/material/theming';
+
+@mixin avatar-theme($theme) {
+    $accent: map-get($theme, accent);
+    $background: map-get($theme, background);
+    $background-color: mat-color($background, card);
+    $primary: map-get($theme, primary);
+    $primary-color: mat-color($primary, 500);
+    $primary-dark: mat-color($primary, A800);
+    $border-color: mat-color($primary, A700);
+    $border-selected-color: mat-color($primary, A600);
+
+    .avatar-circle {
+        background-color: $primary-color;
+        box-sizing: border-box;
+        outline: none;
+        color: white;
+    }
+}
diff --git a/console/src/styles/card.scss b/console/src/styles/card.scss
index 1f5c80839..ac98a2ed9 100644
--- a/console/src/styles/card.scss
+++ b/console/src/styles/card.scss
@@ -5,6 +5,7 @@
     $background: map-get($theme, background);
     $background-color: mat-color($background, card);
     $primary: map-get($theme, primary);
+    $primary-color: mat-color($primary, 500);
     $primary-dark: mat-color($primary, A800);
     $border-color: mat-color($primary, A700);
     $border-selected-color: mat-color($primary, A600);
@@ -38,5 +39,9 @@
                 opacity: 1;
             }
         }
+
+        .iamuser {
+            color: $primary-color;
+        }
     }
 }
diff --git a/console/src/styles/changes.scss b/console/src/styles/changes.scss
index 18b14affc..436ae137f 100644
--- a/console/src/styles/changes.scss
+++ b/console/src/styles/changes.scss
@@ -2,9 +2,9 @@
 
 @mixin changes-theme($theme) {
     $primary: map-get($theme, primary);
-    $primary-dark: mat-color($primary, A900);
+    $primary-dark: mat-color($primary, A600);
     
     .change-item-back {
-        background-color: lighten($primary-dark, 5%);
+        background-color: rgba($primary-dark, 0.05);
     }
 }
diff --git a/console/src/styles/sidenav-list.scss b/console/src/styles/sidenav-list.scss
index 3b4a270ce..eaef5b9de 100644
--- a/console/src/styles/sidenav-list.scss
+++ b/console/src/styles/sidenav-list.scss
@@ -2,7 +2,9 @@
 
 @mixin sidenav-list-theme($theme) {
     $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
     $primary-color: mat-color($primary, 500);
+    $accent-color: mat-color($accent, 500);
     $primary-dark: mat-color($primary, A900);
 
     .mat-menu-item {
@@ -47,4 +49,29 @@
         @include mat-elevation(3);
         background: $primary-dark !important;
     }
+
+    .admin-line {
+        background: $accent-color;
+        color: white;
+
+        // &::after {
+        //     content: '';
+        //     position: absolute;
+        //     width: 0;
+        //     bottom: 0;
+        //     right: 0;
+        //     border-bottom: 20px solid $primary-dark;
+        //     border-left: 20px solid transparent;
+        // }
+
+        &::before {
+            content: '';
+            position: absolute;
+            width: 0;
+            bottom: 0;
+            left: 0;
+            border-bottom: 20px solid $primary-dark;
+            border-right: 20px solid transparent;
+        }
+    }
 }