diff --git a/console/src/app/modules/avatar/avatar.component.scss b/console/src/app/modules/avatar/avatar.component.scss
index 651e1a5544..97e512e6c8 100644
--- a/console/src/app/modules/avatar/avatar.component.scss
+++ b/console/src/app/modules/avatar/avatar.component.scss
@@ -1,15 +1,23 @@
-:host {
-    display: block;
-}
 
-.avatar-circle {
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-transform: uppercase;
+@import '~@angular/material/theming';
 
-    &.active:hover  {
-        border: 2px solid #8795a1;
+@mixin avatar-theme($theme) {
+    $primary: map-get($theme, primary);
+    $primary-color: mat-color($primary, 500);
+
+    .avatar-circle {
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-transform: uppercase;
+        background-color: $primary-color;
+        box-sizing: border-box;
+        outline: none;
+        color: white;
+
+        &.active:hover  {
+            border: 2px solid #8795a1;
+        }
     }
 }
\ No newline at end of file
diff --git a/console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.html b/console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.html
index 8087dcb2bc..f5c9ff7994 100644
--- a/console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.html
+++ b/console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.html
@@ -1,4 +1,4 @@
-<div class="header">
+<div class="app-grid-header">
     <h3>{{'APP.LIST' | translate}}</h3>
     <span class="fill-space"></span>
     <button mat-icon-button (click)="closeView()">
diff --git a/console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.scss b/console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.scss
index 93a1a03a20..8d917c85e2 100644
--- a/console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.scss
+++ b/console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.scss
@@ -1,35 +1,57 @@
-.header {
-    display: flex;
-    align-items: center;
+@import '~@angular/material/theming';
 
-    .fill-space {
-        flex: 1;
-    }
-}
+@mixin application-grid-theme($theme) {
+    $primary: map-get($theme, primary);
+    $primary-dark: mat-color($primary, A900);
+    $accent: map-get($theme, accent);
+    $accent-color: mat-color($accent, 500);
 
-.app-container {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0 -1rem;
-    padding-bottom: 2rem;
-
-    .app-wrap {
-        outline: none;
+    .app-grid-header {
         display: flex;
-        flex-direction: column;
         align-items: center;
-        max-width: 150px;
 
-        .morph-card {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            font-size: 2rem;
+        .fill-space {
+            flex: 1;
         }
+    }
 
-        .name {
-            font-size: .8rem;
-            color: #8a868a;
+    .app-container {
+        display: flex;
+        flex-wrap: wrap;
+        margin: 0 -1rem;
+        padding-bottom: 2rem;
+
+        .app-wrap {
+            outline: none;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            max-width: 150px;
+
+            .morph-card {
+                cursor: pointer;
+                animation: all .2s;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                font-size: 2rem;
+                height: 80px;
+                width: 80px;
+                margin: 1rem;
+                border-radius: .5rem;
+                border: 1px solid $accent-color;
+                background-color: $primary-dark;
+                transition: background-color .4s ease-in-out;
+
+                &.add {
+                    background: $accent-color;
+                }
+            }
+
+            .name {
+                font-size: .8rem;
+                color: #8a868a;
+            }
         }
     }
 }
\ No newline at end of file
diff --git a/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.html b/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.html
index b9b3673819..be6eac0cf2 100644
--- a/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.html
+++ b/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.html
@@ -15,10 +15,10 @@
 
             <span class="fill-space"></span>
 
-            <button mat-stroked-button color="accent" [disabled]="isZitadel"
+            <button mat-stroked-button color="warn" [disabled]="isZitadel"
                 *ngIf="project?.state === ProjectState.PROJECTSTATE_ACTIVE" class="state-button"
                 (click)="changeState(ProjectState.PROJECTSTATE_INACTIVE)">{{'PROJECT.TABLE.DEACTIVATE' | translate}}</button>
-            <button mat-stroked-button color="accent" [disabled]="isZitadel"
+            <button mat-stroked-button color="warn" [disabled]="isZitadel"
                 *ngIf="project?.state === ProjectState.PROJECTSTATE_INACTIVE" class="state-button"
                 (click)="changeState(ProjectState.PROJECTSTATE_ACTIVE)">{{'PROJECT.TABLE.ACTIVATE' | translate}}</button>
 
diff --git a/console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.component.html b/console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.component.html
index 64b9e2b67e..c08dad2335 100644
--- a/console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.component.html
+++ b/console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.component.html
@@ -27,10 +27,10 @@
                 <span class="fill-space"></span>
 
                 <div>
-                    <button mat-stroked-button color="accent"
+                    <button mat-stroked-button color="warn"
                         *ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_ACTIVE" class="state-button"
                         (click)="changeState(ProjectGrantState.PROJECTGRANTSTATE_INACTIVE)">{{'USER.PAGES.DEACTIVATE' | translate}}</button>
-                    <button mat-stroked-button color="accent"
+                    <button mat-stroked-button color="warn"
                         *ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_INACTIVE" class="state-button"
                         (click)="changeState(ProjectGrantState.PROJECTGRANTSTATE_ACTIVE)">{{'USER.PAGES.REACTIVATE' | translate}}</button>
                 </div>
diff --git a/console/src/app/pages/users/user-create/user-create.component.html b/console/src/app/pages/users/user-create/user-create.component.html
index 9d641f14b4..62e87bab43 100644
--- a/console/src/app/pages/users/user-create/user-create.component.html
+++ b/console/src/app/pages/users/user-create/user-create.component.html
@@ -90,44 +90,9 @@
                             {{ 'USER.VALIDATION.REQUIRED' | translate }}
                         </mat-error>
                     </mat-form-field>
-                    <!-- <mat-form-field class="formfield">
-                        <mat-label>{{ 'USER.ADDRESS.STREET' | translate }}</mat-label>
-                        <input matInput formControlName="streetAddress" />
-                        <mat-error *ngIf="streetAddress?.invalid && streetAddress?.errors?.required">
-                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
-                        </mat-error>
-                    </mat-form-field>
-                    <mat-form-field class="formfield">
-                        <mat-label>{{ 'USER.ADDRESS.POSTAL_CODE' | translate }}</mat-label>
-                        <input matInput formControlName="postalCode" />
-                        <mat-error *ngIf="postalCode?.invalid && postalCode?.errors?.required">
-                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
-                        </mat-error>
-                    </mat-form-field>
-                    <mat-form-field class="formfield">
-                        <mat-label>{{ 'USER.ADDRESS.LOCALITY' | translate }}</mat-label>
-                        <input matInput formControlName="locality" />
-                        <mat-error *ngIf="locality?.invalid && locality?.errors?.required">
-                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
-                        </mat-error>
-                    </mat-form-field>
-                    <mat-form-field class="formfield">
-                        <mat-label>{{ 'USER.ADDRESS.REGION' | translate }}</mat-label>
-                        <input matInput formControlName="region" />
-                        <mat-error *ngIf="region?.invalid && region?.errors?.required">
-                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
-                        </mat-error>
-                    </mat-form-field>
-                    <mat-form-field class="formfield">
-                        <mat-label>{{ 'USER.ADDRESS.COUNTRY' | translate }}</mat-label>
-                        <input matInput formControlName="country" />
-                        <mat-error *ngIf="country?.invalid && country?.errors?.required">
-                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
-                        </mat-error>
-                    </mat-form-field> -->
                 </div>
                 <div class="btn-container">
-                    <button color="accent" [disabled]="userForm.invalid" type="submit"
+                    <button color="primary" [disabled]="userForm.invalid" type="submit"
                         mat-raised-button>{{ 'ACTIONS.CREATE' | translate }}</button>
                 </div>
             </form>
diff --git a/console/src/app/pages/users/user-detail/user-detail-routing.module.ts b/console/src/app/pages/users/user-detail/user-detail-routing.module.ts
index 02469dc87e..7f0ab3c323 100644
--- a/console/src/app/pages/users/user-detail/user-detail-routing.module.ts
+++ b/console/src/app/pages/users/user-detail/user-detail-routing.module.ts
@@ -8,6 +8,14 @@ import { PasswordComponent } from './password/password.component';
 import { UserDetailComponent } from './user-detail/user-detail.component';
 
 const routes: Routes = [
+    {
+        path: 'create',
+        loadChildren: () => import('../user-create/user-create.module').then(m => m.UserCreateModule),
+        canActivate: [AuthGuard, RoleGuard],
+        data: {
+            roles: ['user.write'],
+        },
+    },
     {
         path: 'me',
         component: AuthUserDetailComponent,
diff --git a/console/src/app/pages/users/user-detail/user-detail/user-detail.component.html b/console/src/app/pages/users/user-detail/user-detail/user-detail.component.html
index 0732c932e5..2c7d23abde 100644
--- a/console/src/app/pages/users/user-detail/user-detail/user-detail.component.html
+++ b/console/src/app/pages/users/user-detail/user-detail/user-detail.component.html
@@ -9,10 +9,10 @@
             <span class="fill-space"></span>
 
             <ng-template appHasRole [appHasRole]="['user.write', 'user.write:'+user?.id]">
-                <button mat-stroked-button color="accent" *ngIf="user?.state === UserState.USERSTATE_ACTIVE"
+                <button mat-stroked-button color="warn" *ngIf="user?.state === UserState.USERSTATE_ACTIVE"
                     class="state-button"
                     (click)="changeState(UserState.USERSTATE_INACTIVE)">{{'USER.PAGES.DEACTIVATE' | translate}}</button>
-                <button mat-stroked-button color="accent" *ngIf="user?.state === UserState.USERSTATE_INACTIVE"
+                <button mat-stroked-button color="warn" *ngIf="user?.state === UserState.USERSTATE_INACTIVE"
                     class="state-button"
                     (click)="changeState(UserState.USERSTATE_ACTIVE)">{{'USER.PAGES.REACTIVATE' | translate}}</button>
             </ng-template>
diff --git a/console/src/app/pages/users/user-list/user-list-routing.module.ts b/console/src/app/pages/users/user-list/user-list-routing.module.ts
index 467f65f02b..552596a07e 100644
--- a/console/src/app/pages/users/user-list/user-list-routing.module.ts
+++ b/console/src/app/pages/users/user-list/user-list-routing.module.ts
@@ -1,7 +1,5 @@
 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 { UserListComponent } from './user-list.component';
 
@@ -12,14 +10,6 @@ const routes: Routes = [
         component: UserListComponent,
         data: { animation: 'HomePage' },
     },
-    {
-        path: 'create',
-        loadChildren: () => import('../user-create/user-create.module').then(m => m.UserCreateModule),
-        canActivate: [AuthGuard, RoleGuard],
-        data: {
-            roles: ['user.write'],
-        },
-    },
 ];
 
 @NgModule({
diff --git a/console/src/component-themes.scss b/console/src/component-themes.scss
index 8d312fb415..0c8dbdef52 100644
--- a/console/src/component-themes.scss
+++ b/console/src/component-themes.scss
@@ -1,9 +1,9 @@
 @import './styles/card';
 @import './styles/table';
 @import './styles/sidenav-list';
-@import './styles/morph-card';
+@import 'src/app/modules/avatar/avatar.component';
 @import './styles/changes';
-@import './styles/avatar';
+@import 'src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component';
 @import './styles/meta';
 @import './styles/theme-card';
 
@@ -12,7 +12,7 @@
     @include card-theme($theme);
     @include table-theme($theme);
     @include sidenav-list-theme($theme);
-    @include morph-card-theme($theme);
+    @include application-grid-theme($theme);
     @include changes-theme($theme);
     @include meta-theme($theme);
     @include theme-card($theme);
diff --git a/console/src/styles/avatar.scss b/console/src/styles/avatar.scss
deleted file mode 100644
index 530ce7c95f..0000000000
--- a/console/src/styles/avatar.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@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/morph-card.scss b/console/src/styles/morph-card.scss
deleted file mode 100644
index 402a7ec682..0000000000
--- a/console/src/styles/morph-card.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@import '~@angular/material/theming';
-
-@mixin morph-card-theme($theme) {
-    $accent: map-get($theme, accent);
-    $background: map-get($theme, background);
-    $background-color: mat-color($background, card);
-    $primary: map-get($theme, primary);
-    $primary-dark: mat-color($primary, A900);
-    $secondary-dark: mat-color($primary, A800);
-    $accent: map-get($theme, accent);
-    $accent-color: mat-color($accent, 500);
-
-    .morph-card {
-        cursor: pointer;
-        animation: all .2s;
-        height: 80px;
-        width: 80px;
-        margin: 1rem;
-        border-radius: 16px;
-        border: 1px solid $accent-color;
-        background-color: $primary-dark;
-        transition: background-color .4s ease-in-out;
-
-
-        &.add {
-            background: $accent-color;
-        }
-    }
-}