From 6ec3c568834c416e29a413fb44ed343d56b8d975 Mon Sep 17 00:00:00 2001
From: Max Peintner <max@caos.ch>
Date: Mon, 23 May 2022 08:43:03 +0200
Subject: [PATCH] fix(console-v2): app detail layout, create layout stepper
 (#3680)

* app detail

* app-detail layout

* app layout, create layout component, cleanup

* lint
---
 .../app-auth-method-radio.component.html      |  60 +-
 .../app-auth-method-radio.component.scss      |  18 +
 .../app-auth-method-radio.component.ts        |  11 +-
 .../create-layout.component.html              |  17 +
 .../create-layout.component.scss              |  23 +
 .../create-layout.component.spec.ts}          |  12 +-
 .../create-layout/create-layout.component.ts  |  18 +
 .../create-layout/create-layout.module.ts     |  15 +
 .../idp-create/idp-create.component.html      | 314 +++++----
 .../idp-create/idp-create.component.scss      |  99 ++-
 .../modules/idp-create/idp-create.module.ts   |   4 +-
 .../app/modules/links/links.component.html    |  36 -
 .../app/modules/links/links.component.scss    |  67 --
 .../src/app/modules/links/links.component.ts  |  20 -
 console/src/app/modules/links/links.module.ts |  24 -
 .../privacy-policy.component.ts               |   2 -
 .../private-labeling-policy.component.ts      |   8 +-
 .../org-create/org-create.component.html      | 383 ++++++-----
 .../org-create/org-create.component.scss      |  18 -
 .../app/pages/org-create/org-create.module.ts |   2 +
 .../apps/app-create/app-create.component.html | 629 +++++++++---------
 .../apps/app-create/app-create.component.scss | 185 +++---
 .../apps/app-detail/app-detail.component.html | 469 ++++++++-----
 .../apps/app-detail/app-detail.component.scss |  63 +-
 .../apps/app-detail/app-detail.component.ts   | 120 ++--
 .../auth-method-dialog.component.html         |  31 +
 .../auth-method-dialog.component.scss         |  25 +
 .../auth-method-dialog.component.spec.ts      |  24 +
 .../auth-method-dialog.component.ts           |  22 +
 .../app/pages/projects/apps/apps.module.ts    |   6 +-
 .../project-grant-create.component.html       | 104 ++-
 .../project-grant-create.component.scss       |  34 +-
 .../project-grant-create.component.ts         |   2 +-
 .../project-grant-create.module.ts            |   2 +
 .../project-role-create.component.html        |  42 +-
 .../project-role-create.component.scss        |  33 +-
 .../project-role-create.component.ts          |   2 -
 .../project-role-create.module.ts             |  28 +-
 .../project-create.component.html             |  53 +-
 .../project-create.component.scss             |  15 -
 .../project-create/project-create.module.ts   |  26 +-
 .../user-grant-create.component.html          | 147 ++--
 .../user-grant-create.component.scss          |  83 +--
 .../user-grant-create.component.ts            |   2 +-
 .../user-grant-create.module.ts               |   4 +-
 .../user-create-machine.component.html        |  88 +--
 .../user-create-machine.component.scss        |  18 -
 .../user-create-machine.component.ts          |   6 +
 .../user-create-machine.module.ts             |  40 +-
 .../user-create/user-create.component.html    | 308 +++++----
 .../user-create/user-create.component.scss    |  12 -
 .../user-create/user-create.component.ts      |   6 +
 .../users/user-create/user-create.module.ts   |   2 +
 console/src/assets/i18n/de.json               |   7 +-
 console/src/assets/i18n/en.json               |   7 +-
 console/src/assets/i18n/it.json               |   7 +-
 56 files changed, 1897 insertions(+), 1906 deletions(-)
 create mode 100644 console/src/app/modules/create-layout/create-layout.component.html
 create mode 100644 console/src/app/modules/create-layout/create-layout.component.scss
 rename console/src/app/modules/{links/links.component.spec.ts => create-layout/create-layout.component.spec.ts} (53%)
 create mode 100644 console/src/app/modules/create-layout/create-layout.component.ts
 create mode 100644 console/src/app/modules/create-layout/create-layout.module.ts
 delete mode 100644 console/src/app/modules/links/links.component.html
 delete mode 100644 console/src/app/modules/links/links.component.scss
 delete mode 100644 console/src/app/modules/links/links.component.ts
 delete mode 100644 console/src/app/modules/links/links.module.ts
 create mode 100644 console/src/app/pages/projects/apps/app-detail/auth-method-dialog/auth-method-dialog.component.html
 create mode 100644 console/src/app/pages/projects/apps/app-detail/auth-method-dialog/auth-method-dialog.component.scss
 create mode 100644 console/src/app/pages/projects/apps/app-detail/auth-method-dialog/auth-method-dialog.component.spec.ts
 create mode 100644 console/src/app/pages/projects/apps/app-detail/auth-method-dialog/auth-method-dialog.component.ts

diff --git a/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.html b/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.html
index ed5a5fa71..5ab289448 100644
--- a/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.html
+++ b/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.html
@@ -1,39 +1,51 @@
-<div class="auth-method-radio-button-wrapper">
+<div class="auth-method-radio-button-wrapper" [ngClass]="{ compact: compact }">
   <ng-container *ngFor="let method of authMethods; index as i">
-    <input type="radio" [disabled]="method.disabled" (change)="emitChange()" [value]="method.key" [id]="method.key"
-      [(ngModel)]="selected" />
-    <label class="cnsl-radio-button" [ngClass]="{'first': i === 0, 'last': i === authMethods.length - 1}"
-      [for]="method.key">
-      <div class="recommended" [ngClass]="{'not': method.notRecommended}"
-        *ngIf="method.recommended || method.notRecommended">
-        {{(method.recommended ?
-        'APP.OIDC.RECOMMENDED' : 'APP.OIDC.NOTRECOMMENDED') | translate }}</div>
-
-      <div class="cnsl-radio-header" [ngStyle]="{'background': method.background}">
-        <span>{{method.prefix}}</span>
-        <div class="current" *ngIf="current === method.key">{{'APP.OIDC.CURRENT' | translate}}</div>
+    <input
+      type="radio"
+      [disabled]="method.disabled"
+      (change)="emitChange()"
+      [value]="method.key"
+      [id]="method.key"
+      [(ngModel)]="selected"
+    />
+    <label
+      class="cnsl-radio-button"
+      [ngClass]="{ compact: compact, first: i === 0, last: i === authMethods.length - 1 }"
+      [for]="method.key"
+    >
+      <div
+        class="recommended"
+        [ngClass]="{ not: method.notRecommended }"
+        *ngIf="method.recommended || method.notRecommended"
+      >
+        {{ (method.recommended ? 'APP.OIDC.RECOMMENDED' : 'APP.OIDC.NOTRECOMMENDED') | translate }}
       </div>
-      <p>{{method.titleI18nKey | translate}}</p>
-      <p class="type-desc cnsl-secondary-text">{{method.descI18nKey | translate}}</p>
+
+      <div class="cnsl-radio-header" [ngStyle]="{ background: method.background }">
+        <span>{{ method.prefix }}</span>
+        <div class="current" *ngIf="current === method.key">{{ 'APP.OIDC.CURRENT' | translate }}</div>
+      </div>
+      <p>{{ method.titleI18nKey | translate }}</p>
+      <p class="type-desc cnsl-secondary-text">{{ method.descI18nKey | translate }}</p>
       <span class="fill-space"></span>
       <div class="app-specs cnsl-secondary-text">
         <div class="row" *ngIf="isOIDC && method && method.responseType !== undefined">
-          <span>{{'APP.OIDC.RESPONSETYPE' | translate}}</span>
-          <span>{{('APP.OIDC.RESPONSE.'+method.responseType.toString()) | translate}}</span>
+          <span>{{ 'APP.OIDC.RESPONSETYPE' | translate }}</span>
+          <span>{{ 'APP.OIDC.RESPONSE.' + method.responseType.toString() | translate }}</span>
         </div>
         <div class="row" *ngIf="isOIDC && method.grantType !== undefined">
-          <span>{{'APP.GRANT' | translate}}</span>
-          <span>{{('APP.OIDC.GRANT.'+method.grantType.toString()) | translate}}</span>
+          <span>{{ 'APP.GRANT' | translate }}</span>
+          <span>{{ 'APP.OIDC.GRANT.' + method.grantType.toString() | translate }}</span>
         </div>
         <div class="row" *ngIf="isOIDC && method.authMethod !== undefined">
-          <span>{{'APP.AUTHMETHOD' | translate}}</span>
-          <span>{{('APP.OIDC.AUTHMETHOD.'+method.authMethod.toString()) | translate}}</span>
+          <span>{{ 'APP.AUTHMETHOD' | translate }}</span>
+          <span>{{ 'APP.OIDC.AUTHMETHOD.' + method.authMethod.toString() | translate }}</span>
         </div>
         <div class="row" *ngIf="!isOIDC && method.apiAuthMethod !== undefined">
-          <span>{{'APP.AUTHMETHOD' | translate}}</span>
-          <span>{{('APP.API.AUTHMETHOD.'+method.apiAuthMethod.toString()) | translate}}</span>
+          <span>{{ 'APP.AUTHMETHOD' | translate }}</span>
+          <span>{{ 'APP.API.AUTHMETHOD.' + method.apiAuthMethod.toString() | translate }}</span>
         </div>
       </div>
     </label>
   </ng-container>
-</div>
\ No newline at end of file
+</div>
diff --git a/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.scss b/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.scss
index 6d6b4e520..f7ddc2d14 100644
--- a/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.scss
+++ b/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.scss
@@ -9,6 +9,13 @@
   margin: 0;
   padding-bottom: 0.5rem;
   padding-top: 1rem;
+
+  &.compact {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    column-gap: 1rem;
+    row-gap: 1rem;
+  }
 }
 
 @mixin app-auth-method-radio-theme($theme) {
@@ -108,6 +115,17 @@
       }
     }
 
+    &.compact {
+      margin: 0;
+      width: 230px;
+
+      .cnsl-radio-header {
+        span {
+          margin: 1rem 0 1.5rem 0;
+        }
+      }
+    }
+
     p {
       text-align: center;
       padding: 0 1rem;
diff --git a/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.ts b/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.ts
index b719116c5..08a4f49d9 100644
--- a/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.ts
+++ b/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.ts
@@ -1,9 +1,9 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import {
-  APIAuthMethodType,
-  OIDCAuthMethodType,
-  OIDCGrantType,
-  OIDCResponseType,
+    APIAuthMethodType,
+    OIDCAuthMethodType,
+    OIDCGrantType,
+    OIDCResponseType,
 } from 'src/app/proto/generated/zitadel/app_pb';
 
 export interface RadioItemAuthType {
@@ -16,7 +16,7 @@ export interface RadioItemAuthType {
   responseType?: OIDCResponseType;
   grantType?: OIDCGrantType;
   authMethod?: OIDCAuthMethodType;
-  apiAuthMethod?: | APIAuthMethodType;
+  apiAuthMethod?: APIAuthMethodType;
   recommended?: boolean;
   notRecommended?: boolean;
 }
@@ -31,6 +31,7 @@ export class AppAuthMethodRadioComponent {
   @Input() selected: string = '';
   @Input() authMethods!: RadioItemAuthType[];
   @Input() isOIDC: boolean = false;
+  @Input() compact: boolean = false;
   @Output() selectedMethod: EventEmitter<string> = new EventEmitter();
 
   public emitChange(): void {
diff --git a/console/src/app/modules/create-layout/create-layout.component.html b/console/src/app/modules/create-layout/create-layout.component.html
new file mode 100644
index 000000000..958578f3f
--- /dev/null
+++ b/console/src/app/modules/create-layout/create-layout.component.html
@@ -0,0 +1,17 @@
+<div class="max-width-container">
+  <div class="enlarged-container">
+    <div class="create-layout-container">
+      <button (click)="close()" mat-icon-button matTooltip="{{ 'ACTIONS.CLOSE' | translate }}">
+        <mat-icon>close</mat-icon>
+      </button>
+      <span class="abort">{{ title }}</span
+      ><span class="abort-2" *ngIf="createSteps > 1"
+        >{{ 'ACTIONS.STEP' | translate }} {{ currentCreateStep }} {{ 'ACTIONS.OF' | translate }} {{ createSteps }}</span
+      >
+    </div>
+
+    <div class="create-layout-content">
+      <ng-content></ng-content>
+    </div>
+  </div>
+</div>
diff --git a/console/src/app/modules/create-layout/create-layout.component.scss b/console/src/app/modules/create-layout/create-layout.component.scss
new file mode 100644
index 000000000..63696fcb2
--- /dev/null
+++ b/console/src/app/modules/create-layout/create-layout.component.scss
@@ -0,0 +1,23 @@
+.create-layout-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 2rem;
+
+  .abort {
+    font-size: 1.2rem;
+    margin-left: 2rem;
+  }
+
+  .abort-2 {
+    margin-left: 2rem;
+    white-space: nowrap;
+    font-size: 12px;
+    padding: 0.25rem 1rem;
+    border: 1px solid rgba(#8795a1, 0.2);
+    border-radius: 50vw;
+  }
+}
+
+.create-layout-content {
+  padding-left: 4.5rem;
+}
diff --git a/console/src/app/modules/links/links.component.spec.ts b/console/src/app/modules/create-layout/create-layout.component.spec.ts
similarity index 53%
rename from console/src/app/modules/links/links.component.spec.ts
rename to console/src/app/modules/create-layout/create-layout.component.spec.ts
index 6de4124c1..5352745c4 100644
--- a/console/src/app/modules/links/links.component.spec.ts
+++ b/console/src/app/modules/create-layout/create-layout.component.spec.ts
@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { LinksComponent } from './links.component';
+import { CreateLayoutComponent } from './create-layout.component';
 
-describe('LinksComponent', () => {
-  let component: LinksComponent;
-  let fixture: ComponentFixture<LinksComponent>;
+describe('CreateLayoutComponent', () => {
+  let component: CreateLayoutComponent;
+  let fixture: ComponentFixture<CreateLayoutComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ LinksComponent ],
+      declarations: [ CreateLayoutComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(LinksComponent);
+    fixture = TestBed.createComponent(CreateLayoutComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/console/src/app/modules/create-layout/create-layout.component.ts b/console/src/app/modules/create-layout/create-layout.component.ts
new file mode 100644
index 000000000..f9494a9eb
--- /dev/null
+++ b/console/src/app/modules/create-layout/create-layout.component.ts
@@ -0,0 +1,18 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'cnsl-create-layout',
+  templateUrl: './create-layout.component.html',
+  styleUrls: ['./create-layout.component.scss'],
+})
+export class CreateLayoutComponent {
+  @Input() currentCreateStep: number = 1;
+  @Input() createSteps: number = 1;
+  @Input() title: string = '';
+  @Output() closed: EventEmitter<void> = new EventEmitter();
+  constructor() {}
+
+  close() {
+    this.closed.emit();
+  }
+}
diff --git a/console/src/app/modules/create-layout/create-layout.module.ts b/console/src/app/modules/create-layout/create-layout.module.ts
new file mode 100644
index 000000000..346ae7157
--- /dev/null
+++ b/console/src/app/modules/create-layout/create-layout.module.ts
@@ -0,0 +1,15 @@
+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 { CreateLayoutComponent } from './create-layout.component';
+
+@NgModule({
+  declarations: [CreateLayoutComponent],
+  imports: [CommonModule, MatIconModule, MatButtonModule, TranslateModule, MatTooltipModule],
+  exports: [CreateLayoutComponent],
+})
+export class CreateLayoutModule {}
diff --git a/console/src/app/modules/idp-create/idp-create.component.html b/console/src/app/modules/idp-create/idp-create.component.html
index 7b3eee5af..341b1a4b7 100644
--- a/console/src/app/modules/idp-create/idp-create.component.html
+++ b/console/src/app/modules/idp-create/idp-create.component.html
@@ -1,179 +1,161 @@
-<div class="max-width-container">
-  <div class="enlarged-container">
-    <div class="abort-container">
-      <button (click)="close()" mat-icon-button>
-        <mat-icon>close</mat-icon>
-      </button>
-      <span class="abort">{{ 'IDP.CREATE.TITLE' | translate }}</span
-      ><span class="abort-2">Step {{ currentCreateStep }} of {{ createSteps }}</span>
-    </div>
+<cnsl-create-layout
+  title="{{ 'IDP.CREATE.TITLE' | translate }}"
+  [createSteps]="createSteps"
+  [currentCreateStep]="currentCreateStep"
+  (closed)="close()"
+>
+  <div class="idp-create-content">
+    <h1>{{ 'IDP.CREATE.TITLE' | translate }}</h1>
 
-    <div class="idp-create-content">
-      <h1>{{ 'IDP.CREATE.TITLE' | translate }}</h1>
+    <mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
 
-      <mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
+    <ng-container *ngIf="currentCreateStep === 1">
+      <p class="desc cnsl-secondary-text">{{ 'IDP.CREATE.DESCRIPTION' | translate }}</p>
 
-      <ng-container *ngIf="currentCreateStep === 1">
-        <p class="desc cnsl-secondary-text">{{ 'IDP.CREATE.DESCRIPTION' | translate }}</p>
+      <cnsl-idp-type-radio [types]="idpTypes" (selectedType)="idpType = $event" [selected]="idpType"> </cnsl-idp-type-radio>
 
-        <cnsl-idp-type-radio [types]="idpTypes" (selectedType)="idpType = $event" [selected]="idpType">
-        </cnsl-idp-type-radio>
+      <div class="first-step-actions">
+        <button mat-raised-button [disabled]="!idpType" color="primary" (click)="currentCreateStep = 2">
+          {{ 'ACTIONS.CONTINUE' | translate }}
+        </button>
+      </div>
+    </ng-container>
 
-        <div class="first-step-actions">
-          <button mat-raised-button [disabled]="!idpType" color="primary" (click)="currentCreateStep = 2">
-            {{ 'ACTIONS.CONTINUE' | translate }}
+    <ng-container *ngIf="currentCreateStep === 2 && idpType === OIDC">
+      <p class="desc cnsl-secondary-text">{{ 'IDP.OIDC.DESCRIPTION' | translate }}</p>
+
+      <form [formGroup]="oidcFormGroup" (ngSubmit)="addOIDCIdp()">
+        <div class="idp-content">
+          <cnsl-form-field appearance="outline" class="formfield">
+            <cnsl-label>{{ 'IDP.NAME' | translate }}</cnsl-label>
+            <input cnslInput formControlName="name" />
+          </cnsl-form-field>
+          <cnsl-form-field appearance="outline" class="formfield">
+            <cnsl-label>{{ 'IDP.ISSUER' | translate }}</cnsl-label>
+            <input cnslInput formControlName="issuer" />
+          </cnsl-form-field>
+        </div>
+
+        <cnsl-info-section class="auto-reg-info">
+          <div>
+            <p class="auto-reg-desc">{{ 'IDP.AUTOREGISTER_DESC' | translate }}</p>
+            <mat-checkbox formControlName="autoRegister">
+              {{ 'IDP.AUTOREGISTER' | translate }}
+            </mat-checkbox>
+          </div>
+        </cnsl-info-section>
+
+        <div class="idp-content">
+          <cnsl-form-field appearance="outline" class="formfield">
+            <cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
+            <input cnslInput formControlName="clientId" />
+          </cnsl-form-field>
+          <cnsl-form-field appearance="outline" class="formfield">
+            <cnsl-label>{{ 'IDP.CLIENTSECRET' | translate }}</cnsl-label>
+            <input cnslInput formControlName="clientSecret" />
+          </cnsl-form-field>
+        </div>
+        <div class="idp-content">
+          <cnsl-form-field appearance="outline" class="formfield">
+            <cnsl-label>{{ 'IDP.SCOPESLIST' | translate }}</cnsl-label>
+            <mat-chip-list #chipScopesList aria-label="scope selection" *ngIf="scopesList">
+              <mat-chip
+                class="chip"
+                *ngFor="let scope of scopesList.value"
+                selectable="false"
+                removable
+                (removed)="removeScope(scope)"
+              >
+                {{ scope }} <mat-icon matChipRemove>cancel</mat-icon>
+              </mat-chip>
+              <input
+                cnslInput
+                [matChipInputFor]="chipScopesList"
+                [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                [matChipInputAddOnBlur]="true"
+                (matChipInputTokenEnd)="addScope($event)"
+              />
+            </mat-chip-list>
+          </cnsl-form-field>
+        </div>
+        <div class="idp-content">
+          <cnsl-form-field class="formfield" appearance="outline">
+            <cnsl-label>{{ 'IDP.IDPDISPLAYNAMMAPPING' | translate }}</cnsl-label>
+            <mat-select formControlName="idpDisplayNameMapping">
+              <mat-option *ngFor="let field of mappingFields" [value]="field">
+                {{ 'IDP.MAPPINGFIELD.' + field | translate }}
+              </mat-option>
+            </mat-select>
+          </cnsl-form-field>
+          <cnsl-form-field class="formfield" appearance="outline">
+            <cnsl-label>{{ 'IDP.USERNAMEMAPPING' | translate }}</cnsl-label>
+            <mat-select formControlName="usernameMapping">
+              <mat-option *ngFor="let field of mappingFields" [value]="field">
+                {{ 'IDP.MAPPINGFIELD.' + field | translate }}
+              </mat-option>
+            </mat-select>
+          </cnsl-form-field>
+        </div>
+
+        <div class="idp-create-actions">
+          <button color="primary" (click)="currentCreateStep = 1" mat-stroked-button class="back-button" type="button">
+            {{ 'ACTIONS.BACK' | translate }}
+          </button>
+          <button color="primary" mat-raised-button class="continue-button" [disabled]="oidcFormGroup.invalid" type="submit">
+            {{ 'ACTIONS.SAVE' | translate }}
           </button>
         </div>
-      </ng-container>
+      </form>
+    </ng-container>
 
-      <ng-container *ngIf="currentCreateStep === 2 && idpType === OIDC">
-        <p class="desc cnsl-secondary-text">{{ 'IDP.OIDC.DESCRIPTION' | translate }}</p>
+    <ng-container *ngIf="currentCreateStep === 2 && idpType === JWT">
+      <p class="desc cnsl-secondary-text">{{ 'IDP.JWT.DESCRIPTION' | translate }}</p>
 
-        <form [formGroup]="oidcFormGroup" (ngSubmit)="addOIDCIdp()">
-          <div class="idp-content">
-            <cnsl-form-field appearance="outline" class="formfield">
-              <cnsl-label>{{ 'IDP.NAME' | translate }}</cnsl-label>
-              <input cnslInput formControlName="name" />
-            </cnsl-form-field>
-            <cnsl-form-field appearance="outline" class="formfield">
-              <cnsl-label>{{ 'IDP.ISSUER' | translate }}</cnsl-label>
-              <input cnslInput formControlName="issuer" />
-            </cnsl-form-field>
+      <form [formGroup]="jwtFormGroup" (ngSubmit)="addJWTIdp()">
+        <div class="idp-content">
+          <cnsl-form-field appearance="outline" class="formfield">
+            <cnsl-label>{{ 'IDP.NAME' | translate }}</cnsl-label>
+            <input cnslInput formControlName="jwtName" />
+          </cnsl-form-field>
+          <cnsl-form-field appearance="outline" class="formfield">
+            <cnsl-label>{{ 'IDP.JWT.HEADERNAME' | translate }}</cnsl-label>
+            <input cnslInput formControlName="jwtHeaderName" />
+          </cnsl-form-field>
+          <cnsl-form-field appearance="outline" class="formfield">
+            <cnsl-label>{{ 'IDP.ISSUER' | translate }}</cnsl-label>
+            <input cnslInput formControlName="jwtIssuer" />
+          </cnsl-form-field>
+        </div>
+
+        <cnsl-info-section class="auto-reg-info">
+          <div>
+            <p class="auto-reg-desc">{{ 'IDP.AUTOREGISTER_DESC' | translate }}</p>
+            <mat-checkbox formControlName="jwtAutoRegister">
+              {{ 'IDP.AUTOREGISTER' | translate }}
+            </mat-checkbox>
           </div>
+        </cnsl-info-section>
 
-          <cnsl-info-section class="auto-reg-info">
-            <div>
-              <p class="auto-reg-desc">{{ 'IDP.AUTOREGISTER_DESC' | translate }}</p>
-              <mat-checkbox formControlName="autoRegister">
-                {{ 'IDP.AUTOREGISTER' | translate }}
-              </mat-checkbox>
-            </div>
-          </cnsl-info-section>
+        <div class="idp-content">
+          <cnsl-form-field appearance="outline" class="formfield">
+            <cnsl-label>{{ 'IDP.JWT.JWTENDPOINT' | translate }}</cnsl-label>
+            <input cnslInput formControlName="jwtEndpoint" />
+          </cnsl-form-field>
+          <cnsl-form-field appearance="outline" class="formfield">
+            <cnsl-label>{{ 'IDP.JWT.JWTKEYSENDPOINT' | translate }}</cnsl-label>
+            <input cnslInput formControlName="jwtKeysEndpoint" />
+          </cnsl-form-field>
+        </div>
 
-          <div class="idp-content">
-            <cnsl-form-field appearance="outline" class="formfield">
-              <cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
-              <input cnslInput formControlName="clientId" />
-            </cnsl-form-field>
-            <cnsl-form-field appearance="outline" class="formfield">
-              <cnsl-label>{{ 'IDP.CLIENTSECRET' | translate }}</cnsl-label>
-              <input cnslInput formControlName="clientSecret" />
-            </cnsl-form-field>
-          </div>
-          <div class="idp-content">
-            <cnsl-form-field appearance="outline" class="formfield">
-              <cnsl-label>{{ 'IDP.SCOPESLIST' | translate }}</cnsl-label>
-              <mat-chip-list #chipScopesList aria-label="scope selection" *ngIf="scopesList">
-                <mat-chip
-                  class="chip"
-                  *ngFor="let scope of scopesList.value"
-                  selectable="false"
-                  removable
-                  (removed)="removeScope(scope)"
-                >
-                  {{ scope }} <mat-icon matChipRemove>cancel</mat-icon>
-                </mat-chip>
-                <input
-                  cnslInput
-                  [matChipInputFor]="chipScopesList"
-                  [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-                  [matChipInputAddOnBlur]="true"
-                  (matChipInputTokenEnd)="addScope($event)"
-                />
-              </mat-chip-list>
-            </cnsl-form-field>
-          </div>
-          <div class="idp-content">
-            <cnsl-form-field class="formfield" appearance="outline">
-              <cnsl-label>{{ 'IDP.IDPDISPLAYNAMMAPPING' | translate }}</cnsl-label>
-              <mat-select formControlName="idpDisplayNameMapping">
-                <mat-option *ngFor="let field of mappingFields" [value]="field">
-                  {{ 'IDP.MAPPINGFIELD.' + field | translate }}
-                </mat-option>
-              </mat-select>
-            </cnsl-form-field>
-            <cnsl-form-field class="formfield" appearance="outline">
-              <cnsl-label>{{ 'IDP.USERNAMEMAPPING' | translate }}</cnsl-label>
-              <mat-select formControlName="usernameMapping">
-                <mat-option *ngFor="let field of mappingFields" [value]="field">
-                  {{ 'IDP.MAPPINGFIELD.' + field | translate }}
-                </mat-option>
-              </mat-select>
-            </cnsl-form-field>
-          </div>
-
-          <div class="idp-create-actions">
-            <button color="primary" (click)="currentCreateStep = 1" mat-stroked-button class="back-button" type="button">
-              {{ 'ACTIONS.BACK' | translate }}
-            </button>
-            <button
-              color="primary"
-              mat-raised-button
-              class="continue-button"
-              [disabled]="oidcFormGroup.invalid"
-              type="submit"
-            >
-              {{ 'ACTIONS.SAVE' | translate }}
-            </button>
-          </div>
-        </form>
-      </ng-container>
-
-      <ng-container *ngIf="currentCreateStep === 2 && idpType === JWT">
-        <p class="desc cnsl-secondary-text">{{ 'IDP.JWT.DESCRIPTION' | translate }}</p>
-
-        <form [formGroup]="jwtFormGroup" (ngSubmit)="addJWTIdp()">
-          <div class="idp-content">
-            <cnsl-form-field appearance="outline" class="formfield">
-              <cnsl-label>{{ 'IDP.NAME' | translate }}</cnsl-label>
-              <input cnslInput formControlName="jwtName" />
-            </cnsl-form-field>
-            <cnsl-form-field appearance="outline" class="formfield">
-              <cnsl-label>{{ 'IDP.JWT.HEADERNAME' | translate }}</cnsl-label>
-              <input cnslInput formControlName="jwtHeaderName" />
-            </cnsl-form-field>
-            <cnsl-form-field appearance="outline" class="formfield">
-              <cnsl-label>{{ 'IDP.ISSUER' | translate }}</cnsl-label>
-              <input cnslInput formControlName="jwtIssuer" />
-            </cnsl-form-field>
-          </div>
-
-          <cnsl-info-section class="auto-reg-info">
-            <div>
-              <p class="auto-reg-desc">{{ 'IDP.AUTOREGISTER_DESC' | translate }}</p>
-              <mat-checkbox formControlName="jwtAutoRegister">
-                {{ 'IDP.AUTOREGISTER' | translate }}
-              </mat-checkbox>
-            </div>
-          </cnsl-info-section>
-
-          <div class="idp-content">
-            <cnsl-form-field appearance="outline" class="formfield">
-              <cnsl-label>{{ 'IDP.JWT.JWTENDPOINT' | translate }}</cnsl-label>
-              <input cnslInput formControlName="jwtEndpoint" />
-            </cnsl-form-field>
-            <cnsl-form-field appearance="outline" class="formfield">
-              <cnsl-label>{{ 'IDP.JWT.JWTKEYSENDPOINT' | translate }}</cnsl-label>
-              <input cnslInput formControlName="jwtKeysEndpoint" />
-            </cnsl-form-field>
-          </div>
-
-          <div class="idp-create-actions">
-            <button color="primary" (click)="currentCreateStep = 1" mat-stroked-button class="back-button" type="button">
-              {{ 'ACTIONS.BACK' | translate }}
-            </button>
-            <button
-              color="primary"
-              mat-raised-button
-              class="continue-button"
-              [disabled]="jwtFormGroup.invalid"
-              type="submit"
-            >
-              {{ 'ACTIONS.SAVE' | translate }}
-            </button>
-          </div>
-        </form>
-      </ng-container>
-    </div>
+        <div class="idp-create-actions">
+          <button color="primary" (click)="currentCreateStep = 1" mat-stroked-button class="back-button" type="button">
+            {{ 'ACTIONS.BACK' | translate }}
+          </button>
+          <button color="primary" mat-raised-button class="continue-button" [disabled]="jwtFormGroup.invalid" type="submit">
+            {{ 'ACTIONS.SAVE' | translate }}
+          </button>
+        </div>
+      </form>
+    </ng-container>
   </div>
-</div>
+</cnsl-create-layout>
diff --git a/console/src/app/modules/idp-create/idp-create.component.scss b/console/src/app/modules/idp-create/idp-create.component.scss
index d60eec788..bfa2b64f2 100644
--- a/console/src/app/modules/idp-create/idp-create.component.scss
+++ b/console/src/app/modules/idp-create/idp-create.component.scss
@@ -2,75 +2,54 @@
   font-size: 14px;
 }
 
-.abort-container {
-  display: flex;
-  align-items: center;
-  margin-bottom: 2rem;
-
-  .abort {
-    font-size: 1.2rem;
-    margin-left: 2rem;
-  }
-
-  .abort-2 {
-    font-size: 1.2rem;
-    margin-left: 2rem;
-    white-space: nowrap;
-  }
-}
-
 .add-line-btn {
   margin-bottom: 1rem;
 }
 
-.idp-create-content {
-  padding: 0 0 0 72px;
+.first-step-actions {
+  margin-top: 1rem;
+}
 
-  .first-step-actions {
-    margin-top: 1rem;
+.auto-reg-info {
+  display: block;
+  width: 100%;
+
+  .auto-reg-desc {
+    margin: 0 0 1rem 0;
+  }
+}
+
+.idp-content {
+  display: flex;
+  margin: 0 -0.5rem;
+  flex-wrap: wrap;
+
+  .desc {
+    flex-basis: 100%;
+    margin: 0 0.5rem;
+    margin-bottom: 1rem;
   }
 
-  .auto-reg-info {
-    display: block;
-    width: 100%;
+  .formfield {
+    flex: 1;
+    margin: 0 0.5rem;
 
-    .auto-reg-desc {
-      margin: 0 0 1rem 0;
-    }
-  }
-
-  .idp-content {
-    display: flex;
-    margin: 0 -0.5rem;
-    flex-wrap: wrap;
-
-    .desc {
+    @media only screen and (max-width: 450px) {
       flex-basis: 100%;
-      margin: 0 0.5rem;
-      margin-bottom: 1rem;
-    }
-
-    .formfield {
-      flex: 1;
-      margin: 0 0.5rem;
-
-      @media only screen and (max-width: 450px) {
-        flex-basis: 100%;
-      }
-    }
-  }
-
-  .idp-create-actions {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 1rem;
-
-    button[mat-stroked-button] {
-      border-radius: 0.5rem;
-    }
-
-    button[mat-raised-button] {
-      border-radius: 0.5rem;
     }
   }
 }
+
+.idp-create-actions {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 1rem;
+
+  button[mat-stroked-button] {
+    border-radius: 0.5rem;
+  }
+
+  button[mat-raised-button] {
+    border-radius: 0.5rem;
+  }
+}
diff --git a/console/src/app/modules/idp-create/idp-create.module.ts b/console/src/app/modules/idp-create/idp-create.module.ts
index 315975a16..075fd858f 100644
--- a/console/src/app/modules/idp-create/idp-create.module.ts
+++ b/console/src/app/modules/idp-create/idp-create.module.ts
@@ -11,6 +11,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { InputModule } from 'src/app/modules/input/input.module';
 
+import { CreateLayoutModule } from '../create-layout/create-layout.module';
 import { InfoSectionModule } from '../info-section/info-section.module';
 import { IdpCreateRoutingModule } from './idp-create-routing.module';
 import { IdpCreateComponent } from './idp-create.component';
@@ -23,6 +24,7 @@ import { IdpTypeRadioComponent } from './idp-type-radio/idp-type-radio.component
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
+    CreateLayoutModule,
     InfoSectionModule,
     InputModule,
     MatButtonModule,
@@ -35,4 +37,4 @@ import { IdpTypeRadioComponent } from './idp-type-radio/idp-type-radio.component
     MatProgressBarModule,
   ],
 })
-export class IdpCreateModule { }
+export class IdpCreateModule {}
diff --git a/console/src/app/modules/links/links.component.html b/console/src/app/modules/links/links.component.html
deleted file mode 100644
index f67fc38c2..000000000
--- a/console/src/app/modules/links/links.component.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<div class="next-steps">
-  <div class="title-row">
-    <h5>{{'NEXTSTEPS.TITLE' | translate}}</h5>
-    <i class="las la-shoe-prints"></i>
-  </div>
-  <div class="row">
-    <ng-container *ngFor="let link of links">
-      <ng-template *ngIf="link.withRole" cnslHasRole [hasRole]="link.withRole">
-        <div class="step card">
-          <ng-content select="[icon]"></ng-content>
-          <h6>{{ link.i18nTitle | translate }}</h6>
-          <p class="cnsl-secondary-text">{{link.i18nDesc | translate}}</p>
-          <span class="fill-space"></span>
-          <a *ngIf="link.routerLink" [routerLink]="link.routerLink" color="primary" mat-stroked-button>
-            {{'ACTIONS.CONTINUE' | translate}}
-          </a>
-          <a *ngIf="link.href" [href]="link.href" target="_blank" color="primary" mat-stroked-button>
-            {{'ACTIONS.CONTINUE' | translate}}
-          </a>
-        </div>
-      </ng-template>
-      <div class="step card" *ngIf="!link.withRole">
-        <i *ngIf="link.iconClasses" class="{{link.iconClasses}}"></i>
-        <h6>{{ link.i18nTitle | translate }}</h6>
-        <p class="cnsl-secondary-text">{{link.i18nDesc | translate}}</p>
-        <span class="fill-space"></span>
-        <a *ngIf="link.routerLink" [routerLink]="link.routerLink" mat-stroked-button>
-          {{'ACTIONS.CONTINUE' | translate}}
-        </a>
-        <a *ngIf="link.href" [href]="link.href" target="_blank" mat-stroked-button>
-          {{'ACTIONS.CONTINUE' | translate}}
-        </a>
-      </div>
-    </ng-container>
-  </div>
-</div>
\ No newline at end of file
diff --git a/console/src/app/modules/links/links.component.scss b/console/src/app/modules/links/links.component.scss
deleted file mode 100644
index 6c8c7f466..000000000
--- a/console/src/app/modules/links/links.component.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-.next-steps {
-  margin-top: 4rem;
-
-  .title-row {
-    display: flex;
-    align-items: center;
-
-    h5 {
-      text-transform: uppercase;
-      font-size: 14px;
-      letter-spacing: 0.05em;
-      font-weight: 400;
-      margin-right: 1rem;
-    }
-  }
-
-  .row {
-    display: grid;
-    row-gap: 1rem;
-    column-gap: 1rem;
-    grid-template-columns: 1fr 1fr 1fr;
-    padding-bottom: 0.5rem;
-
-    @media only screen and (max-width: 1300px) {
-      grid-template-columns: 1fr 1fr;
-    }
-
-    @media only screen and (max-width: 500px) {
-      grid-template-columns: 1fr;
-    }
-
-    .step {
-      padding: 1rem;
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      box-sizing: border-box;
-      align-items: flex-start;
-
-      i {
-        font-size: 2.5rem;
-        margin-bottom: 1rem;
-      }
-
-      h6 {
-        font-size: 1.1rem;
-        text-align: center;
-        font-weight: 400;
-        margin: 0;
-      }
-
-      p {
-        font-size: 14px;
-        margin: 1rem 0;
-      }
-
-      .fill-space {
-        flex: 1;
-      }
-
-      button {
-        display: block;
-        margin: auto;
-      }
-    }
-  }
-}
diff --git a/console/src/app/modules/links/links.component.ts b/console/src/app/modules/links/links.component.ts
deleted file mode 100644
index 2592e1e6b..000000000
--- a/console/src/app/modules/links/links.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-
-export interface CnslLinks {
-  i18nTitle: string;
-  i18nDesc: string;
-  routerLink?: any;
-  href?: string;
-  iconClasses?: string;
-  withRole?: string[] | RegExp[];
-}
-
-@Component({
-  selector: 'cnsl-links',
-  templateUrl: './links.component.html',
-  styleUrls: ['./links.component.scss'],
-})
-export class LinksComponent {
-  @Input() links: Array<CnslLinks> = [];
-}
diff --git a/console/src/app/modules/links/links.module.ts b/console/src/app/modules/links/links.module.ts
deleted file mode 100644
index f38c867b9..000000000
--- a/console/src/app/modules/links/links.module.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { LinksComponent } from './links.component';
-import { TranslateModule } from '@ngx-translate/core';
-import { RouterModule } from '@angular/router';
-import { MatButton, MatButtonModule } from '@angular/material/button';
-import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
-
-
-
-@NgModule({
-    declarations: [LinksComponent],
-    imports: [
-        CommonModule,
-        TranslateModule,
-        RouterModule,
-        MatButtonModule,
-        HasRoleModule,
-    ],
-    exports: [
-        LinksComponent,
-    ],
-})
-export class LinksModule { }
diff --git a/console/src/app/modules/policies/privacy-policy/privacy-policy.component.ts b/console/src/app/modules/policies/privacy-policy/privacy-policy.component.ts
index 6b474cd35..ceecf4775 100644
--- a/console/src/app/modules/policies/privacy-policy/privacy-policy.component.ts
+++ b/console/src/app/modules/policies/privacy-policy/privacy-policy.component.ts
@@ -19,7 +19,6 @@ import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
 
 import { InfoSectionType } from '../../info-section/info-section.component';
-import { CnslLinks } from '../../links/links.component';
 import { WarnDialogComponent } from '../../warn-dialog/warn-dialog.component';
 import { PolicyComponentServiceType } from '../policy-component-types.enum';
 
@@ -33,7 +32,6 @@ export class PrivacyPolicyComponent implements OnInit, OnDestroy {
   public PolicyComponentServiceType: any = PolicyComponentServiceType;
   @Input() public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
 
-  public nextLinks: CnslLinks[] = [];
   private sub: Subscription = new Subscription();
 
   public privacyPolicy: PrivacyPolicy.AsObject | undefined = undefined;
diff --git a/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts b/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts
index fd68aa25c..866884d5a 100644
--- a/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts
+++ b/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts
@@ -118,7 +118,7 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
             case PolicyComponentServiceType.MGMT:
               return this.handleUploadPromise(this.assetService.upload(AssetEndpoint.MGMTDARKLOGO, formData, this.org.id));
             case PolicyComponentServiceType.ADMIN:
-              return this.handleUploadPromise(this.assetService.upload(AssetEndpoint.IAMDARKLOGO, formData, this.org.id));
+              return this.handleUploadPromise(this.assetService.upload(AssetEndpoint.IAMDARKLOGO, formData));
           }
         }
         if (theme === Theme.LIGHT) {
@@ -126,7 +126,7 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
             case PolicyComponentServiceType.MGMT:
               return this.handleUploadPromise(this.assetService.upload(AssetEndpoint.MGMTLOGO, formData, this.org.id));
             case PolicyComponentServiceType.ADMIN:
-              return this.handleUploadPromise(this.assetService.upload(AssetEndpoint.IAMLOGO, formData, this.org.id));
+              return this.handleUploadPromise(this.assetService.upload(AssetEndpoint.IAMLOGO, formData));
           }
         }
       }
@@ -273,7 +273,7 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
               this.handleUploadPromise(this.assetService.upload(AssetEndpoint.MGMTDARKICON, formData, this.org.id));
               break;
             case PolicyComponentServiceType.ADMIN:
-              this.handleUploadPromise(this.assetService.upload(AssetEndpoint.IAMDARKICON, formData, this.org.id));
+              this.handleUploadPromise(this.assetService.upload(AssetEndpoint.IAMDARKICON, formData));
               break;
           }
         }
@@ -283,7 +283,7 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
               this.handleUploadPromise(this.assetService.upload(AssetEndpoint.MGMTICON, formData, this.org.id));
               break;
             case PolicyComponentServiceType.ADMIN:
-              this.handleUploadPromise(this.assetService.upload(AssetEndpoint.IAMICON, formData, this.org.id));
+              this.handleUploadPromise(this.assetService.upload(AssetEndpoint.IAMICON, formData));
               break;
           }
         }
diff --git a/console/src/app/pages/org-create/org-create.component.html b/console/src/app/pages/org-create/org-create.component.html
index f86a163c7..c7f3d4bcc 100644
--- a/console/src/app/pages/org-create/org-create.component.html
+++ b/console/src/app/pages/org-create/org-create.component.html
@@ -1,225 +1,214 @@
-<div class="max-width-container">
-  <div class="enlarged-container">
-    <div class="abort-container">
-      <button (click)="close()" mat-icon-button>
-        <mat-icon>close</mat-icon>
-      </button>
-      <span class="abort">{{ 'ORG.PAGES.CREATE' | translate }}</span>
-      <span class="abort-2">Step {{ currentCreateStep }} of {{ createSteps }}</span>
-    </div>
+<cnsl-create-layout
+  title="{{ 'ORG.PAGES.CREATE' | translate }}"
+  [createSteps]="createSteps"
+  [currentCreateStep]="currentCreateStep"
+  (closed)="close()"
+>
+  <div class="org-create-main-content">
+    <ng-template cnslHasRole [hasRole]="['iam.write']">
+      <mat-slide-toggle
+        [disabled]="currentCreateStep !== 1"
+        class="example-margin"
+        color="primary"
+        (change)="changeSelf($event)"
+        [(ngModel)]="forSelf"
+      >
+        {{ 'ORG.PAGES.USERSELFACCOUNT' | translate }}
+      </mat-slide-toggle>
 
-    <div class="org-create-main-content">
-      <ng-template cnslHasRole [hasRole]="['iam.write']">
-        <mat-slide-toggle
-          [disabled]="currentCreateStep !== 1"
-          class="example-margin"
-          color="primary"
-          (change)="changeSelf($event)"
-          [(ngModel)]="forSelf"
-        >
-          {{ 'ORG.PAGES.USERSELFACCOUNT' | translate }}
-        </mat-slide-toggle>
+      <ng-container *ngIf="!forSelf">
+        <ng-container *ngIf="currentCreateStep === 1">
+          <h1>{{ 'ORG.PAGES.ORGDETAIL_TITLE' | translate }}</h1>
 
-        <ng-container *ngIf="!forSelf">
-          <ng-container *ngIf="currentCreateStep === 1">
-            <h1>{{ 'ORG.PAGES.ORGDETAIL_TITLE' | translate }}</h1>
+          <form [formGroup]="orgForm" (ngSubmit)="next()">
+            <div class="content">
+              <cnsl-form-field class="formfield" appearance="outline">
+                <cnsl-label>{{ 'ORG_DETAIL.DETAIL.NAME' | translate }}</cnsl-label>
+                <input cnslInput formControlName="name" />
+              </cnsl-form-field>
+              <cnsl-form-field class="formfield" appearance="outline">
+                <cnsl-label>{{ 'ORG_DETAIL.DETAIL.DOMAIN' | translate }}</cnsl-label>
+                <input cnslInput formControlName="domain" />
+              </cnsl-form-field>
+            </div>
 
-            <form [formGroup]="orgForm" (ngSubmit)="next()">
+            <div class="btn-container">
+              <span class="fill-space"></span>
+              <button
+                [disabled]="orgForm.invalid"
+                color="primary"
+                mat-raised-button
+                class="big-button"
+                cdkFocusInitial
+                type="submit"
+              >
+                {{ 'ACTIONS.CONTINUE' | translate }}
+              </button>
+            </div>
+          </form>
+        </ng-container>
+
+        <ng-container *ngIf="currentCreateStep === createSteps">
+          <h1>{{ 'ORG.PAGES.ORGDETAILUSER_TITLE' | translate }}</h1>
+
+          <div class="user">
+            <form [formGroup]="userForm" class="form">
               <div class="content">
+                <p class="section cnsl-secondary-text">{{ 'USER.CREATE.NAMEANDEMAILSECTION' | translate }}</p>
                 <cnsl-form-field class="formfield" appearance="outline">
-                  <cnsl-label>{{ 'ORG_DETAIL.DETAIL.NAME' | translate }}</cnsl-label>
-                  <input cnslInput formControlName="name" />
+                  <cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}</cnsl-label>
+                  <input cnslInput formControlName="userName" required />
+                  <span cnslError *ngIf="userName?.invalid && userName?.errors?.required">
+                    {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                  </span>
                 </cnsl-form-field>
                 <cnsl-form-field class="formfield" appearance="outline">
-                  <cnsl-label>{{ 'ORG_DETAIL.DETAIL.DOMAIN' | translate }}</cnsl-label>
-                  <input cnslInput formControlName="domain" />
+                  <cnsl-label>{{ 'USER.PROFILE.EMAIL' | translate }}</cnsl-label>
+                  <input cnslInput formControlName="email" required />
+                  <span cnslError *ngIf="email?.invalid && email?.errors?.required">
+                    {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                  </span>
+                </cnsl-form-field>
+                <cnsl-form-field class="formfield" appearance="outline">
+                  <cnsl-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}</cnsl-label>
+                  <input cnslInput formControlName="firstName" required />
+                  <span cnslError *ngIf="firstName?.invalid && firstName?.errors?.required">
+                    {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                  </span>
+                </cnsl-form-field>
+                <cnsl-form-field class="formfield" appearance="outline">
+                  <cnsl-label>{{ 'USER.PROFILE.LASTNAME' | translate }}</cnsl-label>
+                  <input cnslInput formControlName="lastName" required />
+                  <span cnslError *ngIf="lastName?.invalid && lastName?.errors?.required">
+                    {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                  </span>
+                </cnsl-form-field>
+                <cnsl-form-field class="formfield" appearance="outline">
+                  <cnsl-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</cnsl-label>
+                  <input cnslInput formControlName="nickName" />
+                  <span cnslError *ngIf="nickName?.invalid && nickName?.errors?.required">
+                    {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                  </span>
                 </cnsl-form-field>
-              </div>
 
-              <div class="btn-container">
-                <span class="fill-space"></span>
-                <button
-                  [disabled]="orgForm.invalid"
-                  color="primary"
-                  mat-raised-button
-                  class="big-button"
-                  cdkFocusInitial
-                  type="submit"
+                <p class="section cnsl-secondary-text">{{ 'USER.CREATE.GENDERLANGSECTION' | translate }}</p>
+
+                <cnsl-form-field class="formfield" appearance="outline">
+                  <cnsl-label>{{ 'USER.PROFILE.GENDER' | translate }}</cnsl-label>
+                  <mat-select formControlName="gender">
+                    <mat-option *ngFor="let gender of genders" [value]="gender">
+                      {{ 'GENDERS.' + gender | translate }}
+                    </mat-option>
+                  </mat-select>
+                  <span cnslError *ngIf="gender?.invalid && gender?.errors?.required">
+                    {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                  </span>
+                </cnsl-form-field>
+                <cnsl-form-field class="formfield" appearance="outline">
+                  <cnsl-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</cnsl-label>
+                  <mat-select formControlName="preferredLanguage">
+                    <mat-option *ngFor="let language of languages" [value]="language">
+                      {{ 'LANGUAGES.' + language | translate }}
+                    </mat-option>
+                    <span cnslError *ngIf="preferredLanguage?.invalid && preferredLanguage?.errors?.required">
+                      {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                    </span>
+                  </mat-select>
+                </cnsl-form-field>
+
+                <mat-checkbox
+                  class="checkbox"
+                  [(ngModel)]="usePassword"
+                  [ngModelOptions]="{ standalone: true }"
+                  (change)="initPwdValidators()"
+                >
+                  {{ 'ORG.PAGES.USEPASSWORD' | translate }}</mat-checkbox
                 >
-                  {{ 'ACTIONS.CONTINUE' | translate }}
-                </button>
-              </div>
-            </form>
-          </ng-container>
 
-          <ng-container *ngIf="currentCreateStep === createSteps">
-            <h1>{{ 'ORG.PAGES.ORGDETAILUSER_TITLE' | translate }}</h1>
+                <ng-container *ngIf="usePassword && pwdForm">
+                  <p class="section cnsl-secondary-text">{{ 'USER.CREATE.PASSWORDSECTION' | translate }}</p>
 
-            <div class="user">
-              <form [formGroup]="userForm" class="form">
-                <div class="content">
-                  <p class="section cnsl-secondary-text">{{ 'USER.CREATE.NAMEANDEMAILSECTION' | translate }}</p>
-                  <cnsl-form-field class="formfield" appearance="outline">
-                    <cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}</cnsl-label>
-                    <input cnslInput formControlName="userName" required />
-                    <span cnslError *ngIf="userName?.invalid && userName?.errors?.required">
-                      {{ 'USER.VALIDATION.REQUIRED' | translate }}
-                    </span>
-                  </cnsl-form-field>
-                  <cnsl-form-field class="formfield" appearance="outline">
-                    <cnsl-label>{{ 'USER.PROFILE.EMAIL' | translate }}</cnsl-label>
-                    <input cnslInput formControlName="email" required />
-                    <span cnslError *ngIf="email?.invalid && email?.errors?.required">
-                      {{ 'USER.VALIDATION.REQUIRED' | translate }}
-                    </span>
-                  </cnsl-form-field>
-                  <cnsl-form-field class="formfield" appearance="outline">
-                    <cnsl-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}</cnsl-label>
-                    <input cnslInput formControlName="firstName" required />
-                    <span cnslError *ngIf="firstName?.invalid && firstName?.errors?.required">
-                      {{ 'USER.VALIDATION.REQUIRED' | translate }}
-                    </span>
-                  </cnsl-form-field>
-                  <cnsl-form-field class="formfield" appearance="outline">
-                    <cnsl-label>{{ 'USER.PROFILE.LASTNAME' | translate }}</cnsl-label>
-                    <input cnslInput formControlName="lastName" required />
-                    <span cnslError *ngIf="lastName?.invalid && lastName?.errors?.required">
-                      {{ 'USER.VALIDATION.REQUIRED' | translate }}
-                    </span>
-                  </cnsl-form-field>
-                  <cnsl-form-field class="formfield" appearance="outline">
-                    <cnsl-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</cnsl-label>
-                    <input cnslInput formControlName="nickName" />
-                    <span cnslError *ngIf="nickName?.invalid && nickName?.errors?.required">
-                      {{ 'USER.VALIDATION.REQUIRED' | translate }}
-                    </span>
-                  </cnsl-form-field>
+                  <cnsl-password-complexity-view class="complexity-view" [policy]="this.policy" [password]="password">
+                  </cnsl-password-complexity-view>
 
-                  <p class="section cnsl-secondary-text">{{ 'USER.CREATE.GENDERLANGSECTION' | translate }}</p>
+                  <form [formGroup]="pwdForm" class="pwd-form">
+                    <cnsl-form-field class="pwd" *ngIf="password" appearance="outline">
+                      <cnsl-label>{{ 'USER.PASSWORD.NEW' | translate }}</cnsl-label>
+                      <input cnslInput autocomplete="off" name="firstpassword" formControlName="password" type="password" />
 
-                  <cnsl-form-field class="formfield" appearance="outline">
-                    <cnsl-label>{{ 'USER.PROFILE.GENDER' | translate }}</cnsl-label>
-                    <mat-select formControlName="gender">
-                      <mat-option *ngFor="let gender of genders" [value]="gender">
-                        {{ 'GENDERS.' + gender | translate }}
-                      </mat-option>
-                    </mat-select>
-                    <span cnslError *ngIf="gender?.invalid && gender?.errors?.required">
-                      {{ 'USER.VALIDATION.REQUIRED' | translate }}
-                    </span>
-                  </cnsl-form-field>
-                  <cnsl-form-field class="formfield" appearance="outline">
-                    <cnsl-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</cnsl-label>
-                    <mat-select formControlName="preferredLanguage">
-                      <mat-option *ngFor="let language of languages" [value]="language">
-                        {{ 'LANGUAGES.' + language | translate }}
-                      </mat-option>
-                      <span cnslError *ngIf="preferredLanguage?.invalid && preferredLanguage?.errors?.required">
+                      <span cnslError *ngIf="password?.errors?.required">
                         {{ 'USER.VALIDATION.REQUIRED' | translate }}
                       </span>
-                    </mat-select>
-                  </cnsl-form-field>
+                    </cnsl-form-field>
+                    <cnsl-form-field class="pwd" *ngIf="confirmPassword" appearance="outline">
+                      <cnsl-label>{{ 'USER.PASSWORD.CONFIRM' | translate }}</cnsl-label>
+                      <input
+                        cnslInput
+                        autocomplete="off"
+                        name="confirmPassword"
+                        formControlName="confirmPassword"
+                        type="password"
+                      />
 
-                  <mat-checkbox
-                    class="checkbox"
-                    [(ngModel)]="usePassword"
-                    [ngModelOptions]="{ standalone: true }"
-                    (change)="initPwdValidators()"
-                  >
-                    {{ 'ORG.PAGES.USEPASSWORD' | translate }}</mat-checkbox
-                  >
-
-                  <ng-container *ngIf="usePassword && pwdForm">
-                    <p class="section cnsl-secondary-text">{{ 'USER.CREATE.PASSWORDSECTION' | translate }}</p>
-
-                    <cnsl-password-complexity-view class="complexity-view" [policy]="this.policy" [password]="password">
-                    </cnsl-password-complexity-view>
-
-                    <form [formGroup]="pwdForm" class="pwd-form">
-                      <cnsl-form-field class="pwd" *ngIf="password" appearance="outline">
-                        <cnsl-label>{{ 'USER.PASSWORD.NEW' | translate }}</cnsl-label>
-                        <input
-                          cnslInput
-                          autocomplete="off"
-                          name="firstpassword"
-                          formControlName="password"
-                          type="password"
-                        />
-
-                        <span cnslError *ngIf="password?.errors?.required">
-                          {{ 'USER.VALIDATION.REQUIRED' | translate }}
-                        </span>
-                      </cnsl-form-field>
-                      <cnsl-form-field class="pwd" *ngIf="confirmPassword" appearance="outline">
-                        <cnsl-label>{{ 'USER.PASSWORD.CONFIRM' | translate }}</cnsl-label>
-                        <input
-                          cnslInput
-                          autocomplete="off"
-                          name="confirmPassword"
-                          formControlName="confirmPassword"
-                          type="password"
-                        />
-
-                        <span cnslError *ngIf="confirmPassword?.errors?.required">
-                          {{ 'USER.VALIDATION.REQUIRED' | translate }}
-                        </span>
-                        <span cnslError *ngIf="confirmPassword?.errors?.notequal">
-                          {{ 'USER.PASSWORD.NOTEQUAL' | translate }}
-                        </span>
-                      </cnsl-form-field>
-                    </form>
-                  </ng-container>
-                </div>
-                <div class="btn-container">
-                  <button color="primary" class="small-button" type="button" (click)="previous()" mat-stroked-button>
-                    {{ 'ACTIONS.BACK' | translate }}
-                  </button>
-                  <span class="fill-space"></span>
-                  <button
-                    color="primary"
-                    class="big-button"
-                    (click)="finish()"
-                    [disabled]="orgForm.invalid || userForm.invalid || (usePassword && pwdForm ? pwdForm?.invalid : false)"
-                    mat-raised-button
-                  >
-                    {{ 'ACTIONS.FINISH' | translate }}
-                  </button>
-                </div>
-              </form>
-            </div>
-          </ng-container>
-        </ng-container>
-      </ng-template>
-      <ng-template cnslHasRole [hasRole]="['org.create']">
-        <div *ngIf="forSelf">
-          <ng-container *ngIf="currentCreateStep === 1">
-            <h1>{{ 'ORG.PAGES.ORGDETAIL_TITLE_WITHOUT_DOMAIN' | translate }}</h1>
-
-            <form [formGroup]="orgForm" (ngSubmit)="createOrgForSelf()">
-              <div class="content">
-                <cnsl-form-field class="formfield" appearance="outline">
-                  <cnsl-label>{{ 'ORG_DETAIL.DETAIL.NAME' | translate }}</cnsl-label>
-                  <input cnslInput formControlName="name" />
-                </cnsl-form-field>
+                      <span cnslError *ngIf="confirmPassword?.errors?.required">
+                        {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                      </span>
+                      <span cnslError *ngIf="confirmPassword?.errors?.notequal">
+                        {{ 'USER.PASSWORD.NOTEQUAL' | translate }}
+                      </span>
+                    </cnsl-form-field>
+                  </form>
+                </ng-container>
               </div>
-
               <div class="btn-container">
+                <button color="primary" class="small-button" type="button" (click)="previous()" mat-stroked-button>
+                  {{ 'ACTIONS.BACK' | translate }}
+                </button>
                 <span class="fill-space"></span>
                 <button
-                  [disabled]="orgForm.invalid"
                   color="primary"
-                  mat-raised-button
                   class="big-button"
-                  cdkFocusInitial
-                  type="submit"
+                  (click)="finish()"
+                  [disabled]="orgForm.invalid || userForm.invalid || (usePassword && pwdForm ? pwdForm?.invalid : false)"
+                  mat-raised-button
                 >
-                  {{ 'ACTIONS.CREATE' | translate }}
+                  {{ 'ACTIONS.FINISH' | translate }}
                 </button>
               </div>
             </form>
-          </ng-container>
-        </div>
-      </ng-template>
-    </div>
+          </div>
+        </ng-container>
+      </ng-container>
+    </ng-template>
+    <ng-template cnslHasRole [hasRole]="['org.create']">
+      <div *ngIf="forSelf">
+        <ng-container *ngIf="currentCreateStep === 1">
+          <h1>{{ 'ORG.PAGES.ORGDETAIL_TITLE_WITHOUT_DOMAIN' | translate }}</h1>
+
+          <form [formGroup]="orgForm" (ngSubmit)="createOrgForSelf()">
+            <div class="content">
+              <cnsl-form-field class="formfield" appearance="outline">
+                <cnsl-label>{{ 'ORG_DETAIL.DETAIL.NAME' | translate }}</cnsl-label>
+                <input cnslInput formControlName="name" />
+              </cnsl-form-field>
+            </div>
+
+            <div class="btn-container">
+              <span class="fill-space"></span>
+              <button
+                [disabled]="orgForm.invalid"
+                color="primary"
+                mat-raised-button
+                class="big-button"
+                cdkFocusInitial
+                type="submit"
+              >
+                {{ 'ACTIONS.CREATE' | translate }}
+              </button>
+            </div>
+          </form>
+        </ng-container>
+      </div>
+    </ng-template>
   </div>
-</div>
+</cnsl-create-layout>
diff --git a/console/src/app/pages/org-create/org-create.component.scss b/console/src/app/pages/org-create/org-create.component.scss
index 67eeda3fc..6c1b3e686 100644
--- a/console/src/app/pages/org-create/org-create.component.scss
+++ b/console/src/app/pages/org-create/org-create.component.scss
@@ -2,25 +2,7 @@ h1 {
   font-weight: 500;
 }
 
-.abort-container {
-  display: flex;
-  align-items: center;
-  margin-bottom: 2rem;
-
-  .abort {
-    font-size: 1.2rem;
-    margin-left: 2rem;
-  }
-
-  .abort-2 {
-    font-size: 1.2rem;
-    margin-left: 2rem;
-    white-space: nowrap;
-  }
-}
-
 .org-create-main-content {
-  padding-left: 4.5rem;
   max-width: 35rem;
 
   .content {
diff --git a/console/src/app/pages/org-create/org-create.module.ts b/console/src/app/pages/org-create/org-create.module.ts
index 411aec252..d007e0fb8 100644
--- a/console/src/app/pages/org-create/org-create.module.ts
+++ b/console/src/app/pages/org-create/org-create.module.ts
@@ -8,6 +8,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
+import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
 import { InputModule } from 'src/app/modules/input/input.module';
 import { PasswordComplexityViewModule } from 'src/app/modules/password-complexity-view/password-complexity-view.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
@@ -26,6 +27,7 @@ import { OrgCreateComponent } from './org-create.component';
     MatButtonModule,
     MatIconModule,
     MatSelectModule,
+    CreateLayoutModule,
     HasRolePipeModule,
     TranslateModule,
     HasRoleModule,
diff --git a/console/src/app/pages/projects/apps/app-create/app-create.component.html b/console/src/app/pages/projects/apps/app-create/app-create.component.html
index 1c367ee4e..7453cc972 100644
--- a/console/src/app/pages/projects/apps/app-create/app-create.component.html
+++ b/console/src/app/pages/projects/apps/app-create/app-create.component.html
@@ -1,133 +1,313 @@
-<div class="max-width-container">
-  <div class="enlarged-container">
-    <div class="abort-container">
-      <button (click)="close()" mat-icon-button>
-        <mat-icon>close</mat-icon>
-      </button>
-      <span class="abort">{{ 'APP.PAGES.CREATE_OIDC' | translate }}</span
-      ><span class="abort-2">Step {{ currentCreateStep }} of {{ createSteps }}</span>
-    </div>
+<cnsl-create-layout
+  title="{{ 'APP.PAGES.CREATE_OIDC' | translate }}"
+  [createSteps]="createSteps"
+  [currentCreateStep]="currentCreateStep"
+  (closed)="close()"
+>
+  <h1>{{ 'APP.PAGES.CREATE_OIDC_DESC_TITLE' | translate }}</h1>
+  <mat-progress-bar class="progress-bar" color="primary" *ngIf="loading" mode="indeterminate"></mat-progress-bar>
 
-    <div class="app-create-content">
-      <h1>{{ 'APP.PAGES.CREATE_OIDC_DESC_TITLE' | translate }}</h1>
-      <mat-progress-bar class="progress-bar" color="primary" *ngIf="loading" mode="indeterminate"></mat-progress-bar>
+  <mat-checkbox class="proswitch" color="primary" [(ngModel)]="devmode">
+    {{ 'APP.OIDC.PROSWITCH' | translate }}
+  </mat-checkbox>
 
-      <mat-checkbox class="proswitch" color="primary" [(ngModel)]="devmode">
-        {{ 'APP.OIDC.PROSWITCH' | translate }}
-      </mat-checkbox>
+  <mat-horizontal-stepper
+    class="stepper"
+    *ngIf="!devmode"
+    linear
+    #stepper
+    labelPosition="bottom"
+    (selectionChange)="changeStep($event)"
+  >
+    <mat-step [stepControl]="firstFormGroup" [editable]="true">
+      <form [formGroup]="firstFormGroup">
+        <ng-template matStepLabel>{{ 'APP.OIDC.NAMEANDTYPESECTION' | translate }}</ng-template>
 
-      <mat-horizontal-stepper
-        class="stepper"
-        *ngIf="!devmode"
-        linear
-        #stepper
-        labelPosition="bottom"
-        (selectionChange)="changeStep($event)"
-      >
-        <mat-step [stepControl]="firstFormGroup" [editable]="true">
-          <form [formGroup]="firstFormGroup">
-            <ng-template matStepLabel>{{ 'APP.OIDC.NAMEANDTYPESECTION' | translate }}</ng-template>
+        <p class="step-title">{{ 'APP.OIDC.TITLEFIRST' | translate }}</p>
+        <cnsl-form-field appearance="outline" class="name-formfield">
+          <cnsl-label>{{ 'APP.NAME' | translate }}</cnsl-label>
+          <input cnslInput cdkFocusInitial formControlName="name" />
+          <span cnslError *ngIf="name?.errors?.required">{{ 'PROJECT.APP.NAMEREQUIRED' | translate }}</span>
+        </cnsl-form-field>
 
-            <p class="step-title">{{ 'APP.OIDC.TITLEFIRST' | translate }}</p>
-            <cnsl-form-field appearance="outline" class="name-formfield">
-              <cnsl-label>{{ 'APP.NAME' | translate }}</cnsl-label>
-              <input cnslInput cdkFocusInitial formControlName="name" />
-              <span cnslError *ngIf="name?.errors?.required">{{ 'PROJECT.APP.NAMEREQUIRED' | translate }}</span>
-            </cnsl-form-field>
+        <p class="step-title">{{ 'APP.OIDC.TYPETITLE' | translate }}</p>
 
-            <p class="step-title">{{ 'APP.OIDC.TYPETITLE' | translate }}</p>
-
-            <cnsl-type-radio [types]="appTypes" (selectedType)="appType?.setValue($event)" [selected]="appType?.value">
-            </cnsl-type-radio>
-            <div class="app-create-actions">
-              <button
-                mat-raised-button
-                [disabled]="firstFormGroup.invalid"
-                color="primary"
-                matStepperNext
-                [attr.data-e2e]="'continue-button-nameandtype'"
-              >
-                {{ 'ACTIONS.CONTINUE' | translate }}
-              </button>
-            </div>
-          </form>
-        </mat-step>
-
-        <!-- skip for native applications -->
-        <mat-step
-          *ngIf="oidcAppRequest.appType !== OIDCAppType.OIDC_APP_TYPE_NATIVE"
-          [stepControl]="secondFormGroup"
-          [editable]="true"
-        >
-          <form [formGroup]="secondFormGroup">
-            <ng-template matStepLabel>{{ 'APP.AUTHMETHODSECTION' | translate }}</ng-template>
-
-            <cnsl-auth-method-radio
-              [authMethods]="authMethods"
-              [selected]="authMethod?.value"
-              [isOIDC]="appType?.value?.createType === AppCreateType.OIDC"
-              (selectedMethod)="authMethod?.setValue($event)"
-            >
-            </cnsl-auth-method-radio>
-
-            <div class="app-create-actions">
-              <button class="bck-button" mat-stroked-button matStepperPrevious>{{ 'ACTIONS.BACK' | translate }}</button>
-              <button
-                mat-raised-button
-                color="primary"
-                [disabled]="secondFormGroup.invalid"
-                matStepperNext
-                [attr.data-e2e]="'continue-button-authmethod'"
-              >
-                {{ 'ACTIONS.CONTINUE' | translate }}
-              </button>
-            </div>
-          </form>
-        </mat-step>
-
-        <!-- show redirect step only for OIDC apps -->
-        <mat-step *ngIf="appType?.value?.createType === AppCreateType.OIDC" [editable]="true">
-          <ng-template matStepLabel>{{ 'APP.OIDC.REDIRECTSECTION' | translate }}</ng-template>
-
-          <p class="step-title">{{ 'APP.OIDC.REDIRECTTITLE' | translate }}</p>
-          <p
-            class="step-description cnsl-secondary-text"
-            *ngIf="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE"
+        <cnsl-type-radio [types]="appTypes" (selectedType)="appType?.setValue($event)" [selected]="appType?.value">
+        </cnsl-type-radio>
+        <div class="app-create-actions">
+          <button
+            mat-raised-button
+            [disabled]="firstFormGroup.invalid"
+            color="primary"
+            matStepperNext
+            [attr.data-e2e]="'continue-button-nameandtype'"
           >
-            {{ 'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate }}
-          </p>
-          <p class="step-description cnsl-secondary-text" *ngIf="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_WEB">
-            {{ 'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate }}
-          </p>
+            {{ 'ACTIONS.CONTINUE' | translate }}
+          </button>
+        </div>
+      </form>
+    </mat-step>
 
+    <!-- skip for native applications -->
+    <mat-step
+      *ngIf="oidcAppRequest.appType !== OIDCAppType.OIDC_APP_TYPE_NATIVE"
+      [stepControl]="secondFormGroup"
+      [editable]="true"
+    >
+      <form [formGroup]="secondFormGroup">
+        <ng-template matStepLabel>{{ 'APP.AUTHMETHODSECTION' | translate }}</ng-template>
+
+        <cnsl-auth-method-radio
+          [authMethods]="authMethods"
+          [selected]="authMethod?.value"
+          [isOIDC]="appType?.value?.createType === AppCreateType.OIDC"
+          (selectedMethod)="authMethod?.setValue($event)"
+        >
+        </cnsl-auth-method-radio>
+
+        <div class="app-create-actions">
+          <button class="bck-button" mat-stroked-button matStepperPrevious>{{ 'ACTIONS.BACK' | translate }}</button>
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="secondFormGroup.invalid"
+            matStepperNext
+            [attr.data-e2e]="'continue-button-authmethod'"
+          >
+            {{ 'ACTIONS.CONTINUE' | translate }}
+          </button>
+        </div>
+      </form>
+    </mat-step>
+
+    <!-- show redirect step only for OIDC apps -->
+    <mat-step *ngIf="appType?.value?.createType === AppCreateType.OIDC" [editable]="true">
+      <ng-template matStepLabel>{{ 'APP.OIDC.REDIRECTSECTION' | translate }}</ng-template>
+
+      <p class="step-title">{{ 'APP.OIDC.REDIRECTTITLE' | translate }}</p>
+      <p class="step-description cnsl-secondary-text" *ngIf="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE">
+        {{ 'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate }}
+      </p>
+      <p class="step-description cnsl-secondary-text" *ngIf="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_WEB">
+        {{ 'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate }}
+      </p>
+
+      <cnsl-redirect-uris
+        class="redirect-section"
+        [canWrite]="true"
+        [isNative]="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE"
+        (changedUris)="oidcAppRequest.redirectUrisList = $any($event)"
+        [urisList]="oidcAppRequest.redirectUrisList"
+        [getValues]="requestRedirectValuesSubject$"
+        title="{{ 'APP.OIDC.REDIRECT' | translate }}"
+      >
+      </cnsl-redirect-uris>
+
+      <p class="step-title">{{ 'APP.OIDC.POSTREDIRECTTITLE' | translate }}</p>
+      <p class="step-description cnsl-secondary-text" *ngIf="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE">
+        {{ 'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate }}
+      </p>
+      <p
+        class="step-description cnsl-secondary-text"
+        *ngIf="
+          oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_WEB ||
+          oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_USER_AGENT
+        "
+      >
+        {{ 'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate }}
+      </p>
+
+      <cnsl-redirect-uris
+        class="redirect-section"
+        [canWrite]="true"
+        (changedUris)="oidcAppRequest.postLogoutRedirectUrisList = $any($event)"
+        [urisList]="oidcAppRequest.postLogoutRedirectUrisList"
+        title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}"
+        [getValues]="requestRedirectValuesSubject$"
+        [isNative]="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE"
+      >
+      </cnsl-redirect-uris>
+
+      <div class="app-create-actions">
+        <button mat-stroked-button class="bck-button" matStepperPrevious>{{ 'ACTIONS.BACK' | translate }}</button>
+        <button mat-raised-button color="primary" matStepperNext [attr.data-e2e]="'continue-button-redirecturis'">
+          {{ 'ACTIONS.CONTINUE' | translate }}
+        </button>
+      </div>
+    </mat-step>
+
+    <mat-step>
+      <ng-template matStepLabel>{{ 'APP.OIDC.OVERVIEWSECTION' | translate }}</ng-template>
+      <p class="step-title">{{ 'APP.OIDC.OVERVIEWTITLE' | translate }}</p>
+      <div class="row cnsl-secondary-text">
+        <span class="left">
+          {{ 'APP.NAME' | translate }}
+        </span>
+        <span class="right">
+          {{ oidcAppRequest.name }}
+        </span>
+      </div>
+
+      <ng-container *ngIf="appType?.value?.createType === AppCreateType.OIDC">
+        <div class="row cnsl-secondary-text">
+          <span class="left">
+            {{ 'APP.TYPE' | translate }}
+          </span>
+          <span class="right">
+            {{ 'APP.OIDC.APPTYPE.' + oidcAppRequest.appType | translate }}
+          </span>
+        </div>
+        <div class="row cnsl-secondary-text">
+          <span class="left">
+            {{ 'APP.GRANT' | translate }}
+          </span>
+          <span class="right" *ngIf="oidcAppRequest.grantTypesList && oidcAppRequest.grantTypesList.length > 0">
+            [<span *ngFor="let element of oidcAppRequest.grantTypesList; index as i">
+              {{ 'APP.OIDC.GRANT.' + element | translate }}
+              {{ i < oidcAppRequest.grantTypesList.length - 1 ? ', ' : '' }} </span
+            >]
+          </span>
+        </div>
+        <div class="row cnsl-secondary-text">
+          <span class="left">
+            {{ 'APP.OIDC.RESPONSETYPE' | translate }}
+          </span>
+          <span class="right" *ngIf="oidcAppRequest.responseTypesList && oidcAppRequest.responseTypesList.length > 0">
+            [<span *ngFor="let element of oidcAppRequest.responseTypesList; index as i">
+              {{ 'APP.OIDC.RESPONSE.' + element | translate }}
+              {{ i < oidcAppRequest.responseTypesList.length - 1 ? ', ' : '' }} </span
+            >]
+          </span>
+        </div>
+
+        <div class="row cnsl-secondary-text">
+          <span class="left">
+            {{ 'APP.AUTHMETHOD' | translate }}
+          </span>
+          <span class="right">
+            <span>
+              {{ 'APP.OIDC.AUTHMETHOD.' + oidcAppRequest?.authMethodType | translate }}
+            </span>
+          </span>
+        </div>
+
+        <div class="row cnsl-secondary-text">
+          <span class="left">
+            {{ 'APP.OIDC.REDIRECT' | translate }}
+          </span>
+          <span class="right" *ngIf="oidcAppRequest.redirectUrisList && oidcAppRequest.redirectUrisList.length > 0">
+            [<span *ngFor="let redirect of oidcAppRequest.redirectUrisList; index as i">
+              {{ redirect }}
+              {{ i < oidcAppRequest.redirectUrisList.length - 1 ? ', ' : '' }} </span
+            >]
+          </span>
+        </div>
+
+        <div class="row cnsl-secondary-text">
+          <span class="left">
+            {{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}
+          </span>
+          <span
+            class="right"
+            *ngIf="oidcAppRequest.postLogoutRedirectUrisList && oidcAppRequest.postLogoutRedirectUrisList.length > 0"
+          >
+            [<span *ngFor="let redirect of oidcAppRequest.postLogoutRedirectUrisList; index as i">
+              {{ redirect }}
+              {{ i < oidcAppRequest.postLogoutRedirectUrisList.length - 1 ? ', ' : '' }} </span
+            >]
+          </span>
+        </div>
+      </ng-container>
+
+      <ng-container *ngIf="appType?.value?.createType === AppCreateType.API">
+        <div class="row cnsl-secondary-text">
+          <span class="left">
+            {{ 'APP.AUTHMETHOD' | translate }}
+          </span>
+          <span class="right">
+            <span>
+              {{ 'APP.API.AUTHMETHOD.' + apiAppRequest?.authMethodType | translate }}
+            </span>
+          </span>
+        </div>
+      </ng-container>
+
+      <div class="app-create-actions">
+        <button mat-stroked-button matStepperPrevious class="bck-button">{{ 'ACTIONS.BACK' | translate }}</button>
+        <button
+          mat-raised-button
+          class="create-button"
+          color="primary"
+          (click)="createApp()"
+          [attr.data-e2e]="'create-button'"
+        >
+          {{ 'ACTIONS.CREATE' | translate }}
+        </button>
+      </div>
+    </mat-step>
+  </mat-horizontal-stepper>
+
+  <div *ngIf="devmode" class="dev">
+    <form [formGroup]="form" (ngSubmit)="createApp()" [attr.data-e2e]="'create-app-wizzard-3'">
+      <div class="content">
+        <cnsl-form-field appearance="outline" class="formfield">
+          <cnsl-label>{{ 'APP.NAME' | translate }}</cnsl-label>
+          <input cnslInput formControlName="name" />
+        </cnsl-form-field>
+
+        <cnsl-form-field appearance="outline" class="formfield">
+          <cnsl-label>{{ 'APP.TYPE' | translate }}</cnsl-label>
+          <mat-select formControlName="appType">
+            <mat-option *ngFor="let appType of appTypes" [value]="appType">
+              {{ appType.titleI18nKey | translate }}
+            </mat-option>
+          </mat-select>
+        </cnsl-form-field>
+
+        <ng-container *ngIf="formappType?.value?.createType === AppCreateType.OIDC">
+          <cnsl-form-field appearance="outline" class="formfield">
+            <cnsl-label>{{ 'APP.OIDC.GRANTTYPE' | translate }}</cnsl-label>
+            <mat-select formControlName="grantTypesList" multiple>
+              <mat-option *ngFor="let grant of oidcGrantTypes" [value]="grant.type">
+                {{ 'APP.OIDC.GRANT.' + grant.type | translate }}
+              </mat-option>
+            </mat-select>
+          </cnsl-form-field>
+
+          <cnsl-form-field appearance="outline" class="formfield">
+            <cnsl-label>{{ 'APP.OIDC.RESPONSETYPE' | translate }}</cnsl-label>
+            <mat-select formControlName="responseTypesList" multiple>
+              <mat-option *ngFor="let type of oidcResponseTypes" [value]="type.type">
+                {{ 'APP.OIDC.RESPONSE.' + type.type | translate }}
+              </mat-option>
+            </mat-select>
+          </cnsl-form-field>
+        </ng-container>
+
+        <cnsl-form-field appearance="outline" class="formfield">
+          <cnsl-label>{{ 'APP.AUTHMETHOD' | translate }}</cnsl-label>
+          <mat-select formControlName="authMethodType">
+            <mat-option *ngFor="let type of authMethodTypes" [value]="type.type">
+              <span *ngIf="type.oidc">{{ 'APP.OIDC.AUTHMETHOD.' + type.type | translate }}</span>
+              <span *ngIf="type.api">{{ 'APP.API.AUTHMETHOD.' + type.type | translate }}</span>
+            </mat-option>
+          </mat-select>
+        </cnsl-form-field>
+      </div>
+
+      <div class="content" *ngIf="formappType?.value?.createType === AppCreateType.OIDC">
+        <div class="formfield full-width">
           <cnsl-redirect-uris
             class="redirect-section"
             [canWrite]="true"
-            [isNative]="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE"
             (changedUris)="oidcAppRequest.redirectUrisList = $any($event)"
             [urisList]="oidcAppRequest.redirectUrisList"
-            [getValues]="requestRedirectValuesSubject$"
             title="{{ 'APP.OIDC.REDIRECT' | translate }}"
+            [getValues]="requestRedirectValuesSubject$"
+            [isNative]="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE"
           >
           </cnsl-redirect-uris>
 
-          <p class="step-title">{{ 'APP.OIDC.POSTREDIRECTTITLE' | translate }}</p>
-          <p
-            class="step-description cnsl-secondary-text"
-            *ngIf="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE"
-          >
-            {{ 'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate }}
-          </p>
-          <p
-            class="step-description cnsl-secondary-text"
-            *ngIf="
-              oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_WEB ||
-              oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_USER_AGENT
-            "
-          >
-            {{ 'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate }}
-          </p>
-
           <cnsl-redirect-uris
             class="redirect-section"
             [canWrite]="true"
@@ -138,212 +318,19 @@
             [isNative]="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE"
           >
           </cnsl-redirect-uris>
-
-          <div class="app-create-actions">
-            <button mat-stroked-button class="bck-button" matStepperPrevious>{{ 'ACTIONS.BACK' | translate }}</button>
-            <button mat-raised-button color="primary" matStepperNext [attr.data-e2e]="'continue-button-redirecturis'">
-              {{ 'ACTIONS.CONTINUE' | translate }}
-            </button>
-          </div>
-        </mat-step>
-
-        <mat-step>
-          <ng-template matStepLabel>{{ 'APP.OIDC.OVERVIEWSECTION' | translate }}</ng-template>
-          <p class="step-title">{{ 'APP.OIDC.OVERVIEWTITLE' | translate }}</p>
-          <div class="row cnsl-secondary-text">
-            <span class="left">
-              {{ 'APP.NAME' | translate }}
-            </span>
-            <span class="right">
-              {{ oidcAppRequest.name }}
-            </span>
-          </div>
-
-          <ng-container *ngIf="appType?.value?.createType === AppCreateType.OIDC">
-            <div class="row cnsl-secondary-text">
-              <span class="left">
-                {{ 'APP.TYPE' | translate }}
-              </span>
-              <span class="right">
-                {{ 'APP.OIDC.APPTYPE.' + oidcAppRequest.appType | translate }}
-              </span>
-            </div>
-            <div class="row cnsl-secondary-text">
-              <span class="left">
-                {{ 'APP.GRANT' | translate }}
-              </span>
-              <span class="right" *ngIf="oidcAppRequest.grantTypesList && oidcAppRequest.grantTypesList.length > 0">
-                [<span *ngFor="let element of oidcAppRequest.grantTypesList; index as i">
-                  {{ 'APP.OIDC.GRANT.' + element | translate }}
-                  {{ i < oidcAppRequest.grantTypesList.length - 1 ? ', ' : '' }} </span
-                >]
-              </span>
-            </div>
-            <div class="row cnsl-secondary-text">
-              <span class="left">
-                {{ 'APP.OIDC.RESPONSETYPE' | translate }}
-              </span>
-              <span class="right" *ngIf="oidcAppRequest.responseTypesList && oidcAppRequest.responseTypesList.length > 0">
-                [<span *ngFor="let element of oidcAppRequest.responseTypesList; index as i">
-                  {{ 'APP.OIDC.RESPONSE.' + element | translate }}
-                  {{ i < oidcAppRequest.responseTypesList.length - 1 ? ', ' : '' }} </span
-                >]
-              </span>
-            </div>
-
-            <div class="row cnsl-secondary-text">
-              <span class="left">
-                {{ 'APP.AUTHMETHOD' | translate }}
-              </span>
-              <span class="right">
-                <span>
-                  {{ 'APP.OIDC.AUTHMETHOD.' + oidcAppRequest?.authMethodType | translate }}
-                </span>
-              </span>
-            </div>
-
-            <div class="row cnsl-secondary-text">
-              <span class="left">
-                {{ 'APP.OIDC.REDIRECT' | translate }}
-              </span>
-              <span class="right" *ngIf="oidcAppRequest.redirectUrisList && oidcAppRequest.redirectUrisList.length > 0">
-                [<span *ngFor="let redirect of oidcAppRequest.redirectUrisList; index as i">
-                  {{ redirect }}
-                  {{ i < oidcAppRequest.redirectUrisList.length - 1 ? ', ' : '' }} </span
-                >]
-              </span>
-            </div>
-
-            <div class="row cnsl-secondary-text">
-              <span class="left">
-                {{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}
-              </span>
-              <span
-                class="right"
-                *ngIf="oidcAppRequest.postLogoutRedirectUrisList && oidcAppRequest.postLogoutRedirectUrisList.length > 0"
-              >
-                [<span *ngFor="let redirect of oidcAppRequest.postLogoutRedirectUrisList; index as i">
-                  {{ redirect }}
-                  {{ i < oidcAppRequest.postLogoutRedirectUrisList.length - 1 ? ', ' : '' }} </span
-                >]
-              </span>
-            </div>
-          </ng-container>
-
-          <ng-container *ngIf="appType?.value?.createType === AppCreateType.API">
-            <div class="row cnsl-secondary-text">
-              <span class="left">
-                {{ 'APP.AUTHMETHOD' | translate }}
-              </span>
-              <span class="right">
-                <span>
-                  {{ 'APP.API.AUTHMETHOD.' + apiAppRequest?.authMethodType | translate }}
-                </span>
-              </span>
-            </div>
-          </ng-container>
-
-          <div class="app-create-actions">
-            <button mat-stroked-button matStepperPrevious class="bck-button">{{ 'ACTIONS.BACK' | translate }}</button>
-            <button
-              mat-raised-button
-              class="create-button"
-              color="primary"
-              (click)="createApp()"
-              [attr.data-e2e]="'create-button'"
-            >
-              {{ 'ACTIONS.CREATE' | translate }}
-            </button>
-          </div>
-        </mat-step>
-      </mat-horizontal-stepper>
-
-      <div *ngIf="devmode" class="dev">
-        <form [formGroup]="form" (ngSubmit)="createApp()" [attr.data-e2e]="'create-app-wizzard-3'">
-          <div class="content">
-            <cnsl-form-field appearance="outline" class="formfield">
-              <cnsl-label>{{ 'APP.NAME' | translate }}</cnsl-label>
-              <input cnslInput formControlName="name" />
-            </cnsl-form-field>
-
-            <cnsl-form-field appearance="outline" class="formfield">
-              <cnsl-label>{{ 'APP.TYPE' | translate }}</cnsl-label>
-              <mat-select formControlName="appType">
-                <mat-option *ngFor="let appType of appTypes" [value]="appType">
-                  {{ appType.titleI18nKey | translate }}
-                </mat-option>
-              </mat-select>
-            </cnsl-form-field>
-
-            <ng-container *ngIf="formappType?.value?.createType === AppCreateType.OIDC">
-              <cnsl-form-field appearance="outline" class="formfield">
-                <cnsl-label>{{ 'APP.OIDC.GRANTTYPE' | translate }}</cnsl-label>
-                <mat-select formControlName="grantTypesList" multiple>
-                  <mat-option *ngFor="let grant of oidcGrantTypes" [value]="grant.type">
-                    {{ 'APP.OIDC.GRANT.' + grant.type | translate }}
-                  </mat-option>
-                </mat-select>
-              </cnsl-form-field>
-
-              <cnsl-form-field appearance="outline" class="formfield">
-                <cnsl-label>{{ 'APP.OIDC.RESPONSETYPE' | translate }}</cnsl-label>
-                <mat-select formControlName="responseTypesList" multiple>
-                  <mat-option *ngFor="let type of oidcResponseTypes" [value]="type.type">
-                    {{ 'APP.OIDC.RESPONSE.' + type.type | translate }}
-                  </mat-option>
-                </mat-select>
-              </cnsl-form-field>
-            </ng-container>
-
-            <cnsl-form-field appearance="outline" class="formfield">
-              <cnsl-label>{{ 'APP.AUTHMETHOD' | translate }}</cnsl-label>
-              <mat-select formControlName="authMethodType">
-                <mat-option *ngFor="let type of authMethodTypes" [value]="type.type">
-                  <span *ngIf="type.oidc">{{ 'APP.OIDC.AUTHMETHOD.' + type.type | translate }}</span>
-                  <span *ngIf="type.api">{{ 'APP.API.AUTHMETHOD.' + type.type | translate }}</span>
-                </mat-option>
-              </mat-select>
-            </cnsl-form-field>
-          </div>
-
-          <div class="content" *ngIf="formappType?.value?.createType === AppCreateType.OIDC">
-            <div class="formfield full-width">
-              <cnsl-redirect-uris
-                class="redirect-section"
-                [canWrite]="true"
-                (changedUris)="oidcAppRequest.redirectUrisList = $any($event)"
-                [urisList]="oidcAppRequest.redirectUrisList"
-                title="{{ 'APP.OIDC.REDIRECT' | translate }}"
-                [getValues]="requestRedirectValuesSubject$"
-                [isNative]="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE"
-              >
-              </cnsl-redirect-uris>
-
-              <cnsl-redirect-uris
-                class="redirect-section"
-                [canWrite]="true"
-                (changedUris)="oidcAppRequest.postLogoutRedirectUrisList = $any($event)"
-                [urisList]="oidcAppRequest.postLogoutRedirectUrisList"
-                title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}"
-                [getValues]="requestRedirectValuesSubject$"
-                [isNative]="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE"
-              >
-              </cnsl-redirect-uris>
-            </div>
-          </div>
-
-          <button
-            color="primary"
-            mat-raised-button
-            class="continue-button"
-            [disabled]="form.invalid"
-            cdkFocusInitial
-            type="submit"
-          >
-            {{ 'ACTIONS.CREATE' | translate }}
-          </button>
-        </form>
+        </div>
       </div>
-    </div>
+
+      <button
+        color="primary"
+        mat-raised-button
+        class="continue-button"
+        [disabled]="form.invalid"
+        cdkFocusInitial
+        type="submit"
+      >
+        {{ 'ACTIONS.CREATE' | translate }}
+      </button>
+    </form>
   </div>
-</div>
+</cnsl-create-layout>
diff --git a/console/src/app/pages/projects/apps/app-create/app-create.component.scss b/console/src/app/pages/projects/apps/app-create/app-create.component.scss
index 07a7a1ec5..a040ea3e5 100644
--- a/console/src/app/pages/projects/apps/app-create/app-create.component.scss
+++ b/console/src/app/pages/projects/apps/app-create/app-create.component.scss
@@ -12,122 +12,101 @@ p.desc {
   display: block;
 }
 
-.abort-container {
+.name-formfield {
+  max-width: 400px;
+  display: block;
+}
+
+.app-create-container {
+  padding-top: 2rem;
+
+  .progress-bar {
+    margin-bottom: 1rem;
+  }
+}
+
+.margin-right {
+  margin-right: 0.5rem;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.stepper {
+  background: inherit !important;
+  margin: 0 -1.5rem;
+
+  .formfield {
+    max-width: 400px;
+  }
+
+  .step-title {
+    font-size: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .step-description {
+    font-size: 0.9rem;
+  }
+}
+
+.checkbox-container {
+  display: flex;
+  flex-direction: column;
+
+  .checkbox {
+    margin: 0.5rem 0;
+  }
+}
+
+.row {
+  display: flex;
+  justify-content: space-between;
+
+  .left,
+  .right {
+    margin-bottom: 0.5rem;
+    font-size: 14px;
+  }
+}
+
+.app-create-actions {
+  margin-top: 1rem;
   display: flex;
   align-items: center;
-  margin-bottom: 2rem;
 
-  .abort {
-    font-size: 1.2rem;
-    margin-left: 2rem;
+  .bck-button {
+    margin-right: 1rem;
   }
 
-  .abort-2 {
-    font-size: 1.2rem;
-    margin-left: 2rem;
-    white-space: nowrap;
+  .create-button {
+    padding: 0.5rem 4rem;
   }
 }
 
-.app-create-content {
-  padding-left: 4.5rem;
-
-  .name-formfield {
-    max-width: 400px;
-    display: block;
-  }
-
-  .app-create-container {
-    padding-top: 2rem;
-
-    .progress-bar {
-      margin-bottom: 1rem;
-    }
-  }
-
-  .margin-right {
-    margin-right: 0.5rem;
-  }
-
-  .full-width {
-    width: 100%;
-  }
-
-  .stepper {
-    background: inherit !important;
-    margin: 0 -1.5rem;
+.dev {
+  .content {
+    display: flex;
+    margin: 0 -0.5rem;
+    flex-wrap: wrap;
+    flex-direction: row;
 
     .formfield {
-      max-width: 400px;
-    }
+      flex: 1;
+      box-sizing: border-box;
+      margin: 0 0.5rem;
 
-    .step-title {
-      font-size: 1rem;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-    }
-
-    .step-description {
-      font-size: 0.9rem;
-    }
-  }
-
-  .checkbox-container {
-    display: flex;
-    flex-direction: column;
-
-    .checkbox {
-      margin: 0.5rem 0;
-    }
-  }
-
-  .row {
-    display: flex;
-    justify-content: space-between;
-
-    .left,
-    .right {
-      margin-bottom: 0.5rem;
-      font-size: 14px;
-    }
-  }
-
-  .app-create-actions {
-    margin-top: 1rem;
-    display: flex;
-    align-items: center;
-
-    .bck-button {
-      margin-right: 1rem;
-    }
-
-    .create-button {
-      padding: 0.5rem 4rem;
-    }
-  }
-
-  .dev {
-    .content {
-      display: flex;
-      margin: 0 -0.5rem;
-      flex-wrap: wrap;
-      flex-direction: row;
-
-      .formfield {
-        flex: 1;
-        box-sizing: border-box;
-        margin: 0 0.5rem;
-
-        &.full-width {
-          flex-basis: 80%;
-        }
+      &.full-width {
+        flex-basis: 80%;
       }
     }
+  }
 
-    .continue-button {
-      margin-top: 3rem;
-      display: block;
-      padding: 0.5rem 4rem;
-    }
+  .continue-button {
+    margin-top: 3rem;
+    display: block;
+    padding: 0.5rem 4rem;
   }
 }
diff --git a/console/src/app/pages/projects/apps/app-detail/app-detail.component.html b/console/src/app/pages/projects/apps/app-detail/app-detail.component.html
index ea153af43..5848f103b 100644
--- a/console/src/app/pages/projects/apps/app-detail/app-detail.component.html
+++ b/console/src/app/pages/projects/apps/app-detail/app-detail.component.html
@@ -1,150 +1,90 @@
-<cnsl-top-view title="{{app?.name}}"
-  [hasActions]="isZitadel === false && (['project.app.write:'+projectId, 'project.app.write'] | hasRole | async)"
-  docLink="https://docs.zitadel.com/docs/guides/basics/projects"
-  [sub]="app?.oidcConfig ? ('APP.OIDC.APPTYPE.'+app?.oidcConfig?.appType | translate): 'API'"
-  [isActive]="app?.state === AppState.APP_STATE_ACTIVE" [isInactive]="app?.state === AppState.APP_STATE_INACTIVE"
-  stateTooltip="{{('APP.PAGES.DETAIL.STATE.'+app?.state) | translate}}">
-  <ng-template topActions cnslHasRole [hasRole]="['project.app.write:'+projectId, 'project.app.write']">
-    <div class="regen-secret"
-      *ngIf="isZitadel === false && this.app?.oidcConfig && (currentAuthMethod === 'CODE' || currentAuthMethod === 'POST')">
-      <button type="button" [disabled]="!canWrite" mat-menu-item
-        (click)="regenerateOIDCClientSecret()">{{'APP.OIDC.REGENERATESECRET' | translate}}</button>
+<cnsl-top-view
+  title="{{ app?.name }}"
+  [hasActions]="isZitadel === false && (['project.app.write:' + projectId, 'project.app.write'] | hasRole | async)"
+  docLink="https://docs.zitadel.ch/docs/guides/basics/projects"
+  [sub]="app?.oidcConfig ? ('APP.OIDC.APPTYPE.' + app?.oidcConfig?.appType | translate) : 'API'"
+  [isActive]="app?.state === AppState.APP_STATE_ACTIVE"
+  [isInactive]="app?.state === AppState.APP_STATE_INACTIVE"
+  stateTooltip="{{ 'APP.PAGES.DETAIL.STATE.' + app?.state | translate }}"
+>
+  <ng-template topActions cnslHasRole [hasRole]="['project.app.write:' + projectId, 'project.app.write']">
+    <div
+      class="regen-secret"
+      *ngIf="isZitadel === false && this.app?.oidcConfig && (currentAuthMethod === 'CODE' || currentAuthMethod === 'POST')"
+    >
+      <button type="button" [disabled]="!canWrite" mat-menu-item (click)="regenerateOIDCClientSecret()">
+        {{ 'APP.OIDC.REGENERATESECRET' | translate }}
+      </button>
     </div>
 
     <div class="regen-secret" *ngIf="isZitadel === false && this.app?.apiConfig && currentAuthMethod === 'BASIC'">
-      <button [disabled]="!canWrite" mat-menu-item (click)="regenerateAPIClientSecret()">{{'APP.API.REGENERATESECRET' |
-        translate}}</button>
+      <button [disabled]="!canWrite" mat-menu-item (click)="regenerateAPIClientSecret()">
+        {{ 'APP.API.REGENERATESECRET' | translate }}
+      </button>
     </div>
 
     <button *ngIf="isZitadel === false" mat-menu-item (click)="openNameDialog()" aria-label="Edit project name">
-      {{'ACTIONS.RENAME' | translate}}
+      {{ 'ACTIONS.RENAME' | translate }}
     </button>
-    <button mat-menu-item *ngIf="isZitadel === false && app?.state !== AppState.APP_STATE_INACTIVE"
-      (click)="changeState(AppState.APP_STATE_INACTIVE)">
-      {{'ACTIONS.DEACTIVATE' | translate}}
+    <button
+      mat-menu-item
+      *ngIf="isZitadel === false && app?.state !== AppState.APP_STATE_INACTIVE"
+      (click)="changeState(AppState.APP_STATE_INACTIVE)"
+    >
+      {{ 'ACTIONS.DEACTIVATE' | translate }}
     </button>
-    <button mat-menu-item *ngIf="isZitadel === false && app?.state === AppState.APP_STATE_INACTIVE"
-      (click)="changeState(AppState.APP_STATE_ACTIVE)">
-      {{'ACTIONS.REACTIVATE' | translate}}
+    <button
+      mat-menu-item
+      *ngIf="isZitadel === false && app?.state === AppState.APP_STATE_INACTIVE"
+      (click)="changeState(AppState.APP_STATE_ACTIVE)"
+    >
+      {{ 'ACTIONS.REACTIVATE' | translate }}
     </button>
-    <ng-template cnslHasRole [hasRole]="['project.app.delete:'+projectId, 'project.app.delete']">
-      <button *ngIf="isZitadel === false" mat-menu-item matTooltip="{{'APP.PAGES.DELETE' | translate}}"
-        (click)="deleteApp()">
-        <span [style.color]="'var(--warn)'">{{'APP.PAGES.DELETE' | translate}}</span>
+    <ng-template cnslHasRole [hasRole]="['project.app.delete:' + projectId, 'project.app.delete']">
+      <button
+        *ngIf="isZitadel === false"
+        mat-menu-item
+        matTooltip="{{ 'APP.PAGES.DELETE' | translate }}"
+        (click)="deleteApp()"
+      >
+        <span [style.color]="'var(--warn)'">{{ 'APP.PAGES.DELETE' | translate }}</span>
       </button>
     </ng-template>
   </ng-template>
-  <span *ngIf="errorMessage" class="app-err-container">{{errorMessage}}</span>
+  <span *ngIf="errorMessage" class="app-err-container">{{ errorMessage }}</span>
 
   <cnsl-info-row topContent *ngIf="app" [app]="app"></cnsl-info-row>
 </cnsl-top-view>
 
 <div class="max-width-container">
-  <cnsl-auth-method-radio *ngIf="authMethods && initialAuthMethod && (app?.oidcConfig || app?.apiConfig)"
-    [authMethods]="authMethods" [selected]="initialAuthMethod" [current]="currentAuthMethod"
-    [isOIDC]="app?.oidcConfig !== undefined" (selectedMethod)="setPartialConfigFromAuthMethod($event)">
-  </cnsl-auth-method-radio>
+  <div class="compliance" *ngIf="app?.oidcConfig?.complianceProblemsList && app.oidcConfig?.complianceProblemsList?.length">
+    <h2 class="compliance-title">{{ 'APP.COMPLIANCE' | translate }}</h2>
+    <cnsl-info-section class="problem" [type]="InfoSectionType.ALERT">
+      <ul style="margin: 0">
+        <li style="margin: 0 0 0.5rem 0" *ngFor="let problem of app.oidcConfig?.complianceProblemsList || []">
+          {{ problem.localizedMessage }}
+        </li>
+      </ul>
+    </cnsl-info-section>
+  </div>
 
   <div class="app-main-content">
     <cnsl-meta-layout>
       <cnsl-sidenav [(ngModel)]="currentSetting" [settingsList]="settingsList">
-        <ng-container *ngIf="currentSetting === 'redirect-uris'">
-          <cnsl-card title=" {{ 'APP.OIDC.REDIRECTSECTIONTITLE' | translate }}">
-            <cnsl-info-section *ngIf="appType?.value === OIDCAppType.OIDC_APP_TYPE_NATIVE">
-              <div class="dev-col">
-                <span>{{'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate}}</span>
-                <mat-slide-toggle *ngIf="devMode" color="primary" class="devmode" [formControl]="devMode" name="devMode"
-                  matTooltip="{{'APP.OIDC.DEVMODEDESC' | translate}}">
-                  {{ 'APP.OIDC.DEVMODE' | translate }}
-                </mat-slide-toggle>
-              </div>
-            </cnsl-info-section>
-            <cnsl-info-section
-              *ngIf="appType?.value === OIDCAppType.OIDC_APP_TYPE_WEB || appType?.value === OIDCAppType.OIDC_APP_TYPE_USER_AGENT">
-              <div class="dev-col">
-                <span>{{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}</span>
-                <mat-slide-toggle *ngIf="devMode" color="primary" class="devmode" [formControl]="devMode" name="devMode"
-                  matTooltip="{{'APP.OIDC.DEVMODEDESC' | translate}}">
-                  {{ 'APP.OIDC.DEVMODE' | translate }}
-                </mat-slide-toggle>
-              </div>
-            </cnsl-info-section>
-
-            <cnsl-redirect-uris *ngIf="appType?.value !== undefined" class="redirect-section" [canWrite]="canWrite"
-              [devMode]="devMode?.value" [getValues]="requestRedirectValuesSubject$"
-              (changedUris)="redirectUrisList = $any($event)" [urisList]="redirectUrisList"
-              title="{{ 'APP.OIDC.REDIRECT' | translate }}"
-              [isNative]="appType?.value === OIDCAppType.OIDC_APP_TYPE_NATIVE">
-            </cnsl-redirect-uris>
-
-            <cnsl-redirect-uris *ngIf="appType?.value !== undefined" class="redirect-section" [canWrite]="canWrite"
-              [devMode]="devMode?.value" (changedUris)="postLogoutRedirectUrisList = $any($event)"
-              [urisList]="postLogoutRedirectUrisList" [getValues]="requestRedirectValuesSubject$"
-              title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}"
-              [isNative]="appType?.value === OIDCAppType.OIDC_APP_TYPE_NATIVE">
-            </cnsl-redirect-uris>
-
-            <div class="btn-container">
-              <button class="submit-button" color="primary" (click)="saveOIDCApp()" [disabled]="!canWrite"
-                mat-raised-button>
-                {{ 'ACTIONS.SAVE' | translate }}
-              </button>
-            </div>
-          </cnsl-card>
-        </ng-container>
-
-        <ng-container *ngIf="currentSetting === 'additional-origins'">
-          <cnsl-card title=" {{ 'APP.ADDITIONALORIGINS' | translate }}">
-            <p class="app-desc cnsl-secondary-text">{{'APP.ADDITIONALORIGINSDESC' | translate}}</p>
-            <cnsl-additional-origins *ngIf="additionalOriginsList && appType && appType?.value !== undefined"
-              class="app-input" [canWrite]="canWrite" [getValues]="requestRedirectValuesSubject$"
-              (changedUris)="additionalOriginsListChanged($event)" [urisList]="additionalOriginsList"
-              title="{{ 'APP.ORIGINS' | translate }}">
-            </cnsl-additional-origins>
-
-            <div class="btn-container">
-              <button class="submit-button" (click)="saveOIDCApp()" color="primary" [disabled]="!canWrite"
-                mat-raised-button>
-                {{ 'ACTIONS.SAVE' | translate }}
-              </button>
-            </div>
-          </cnsl-card>
-        </ng-container>
-
-        <ng-container *ngIf="currentSetting === 'urls'">
-          <cnsl-card title=" {{ 'APP.URLS' | translate }}">
-            <div class="app-info-row">
-              <div class="app-info-wrapper" *ngFor="let environmentV of (environmentMap | keyvalue)">
-                <p class="app-info-row-title cnsl-secondary-text">{{environmentV.key}}</p>
-                <div class="app-copy-row">
-                  <div *ngIf="environmentV.value" class="environment">
-                    <button [disabled]="copied === environmentV.value"
-                      [matTooltip]="(copied !== environmentV.value ? 'ACTIONS.COPY' : 'ACTIONS.COPIED' ) | translate"
-                      cnslCopyToClipboard [valueToCopy]="environmentV.value" (copiedValue)="copied = environmentV.key">
-                      {{environmentV.value}}
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </cnsl-card>
-        </ng-container>
-
         <ng-container *ngIf="currentSetting === 'configuration'">
           <cnsl-card *ngIf="oidcForm && app?.oidcConfig" title=" {{ 'APP.OIDC.TITLE' | translate }}">
-            <form [formGroup]="oidcForm" (ngSubmit)="saveOIDCApp()">
-              <div class="compliance"
-                *ngIf="app?.oidcConfig?.complianceProblemsList && app.oidcConfig?.complianceProblemsList?.length">
-                <h2 class="compliance-title">{{'APP.COMPLIANCE' | translate}}</h2>
-                <cnsl-info-section class="problem" [type]="InfoSectionType.WARN">
-                  <ul style="margin: 0;">
-                    <li style="margin: 0 0 .5rem 0;"
-                      *ngFor="let problem of app.oidcConfig?.complianceProblemsList || []">
-                      {{problem.localizedMessage}}</li>
-                  </ul>
-                </cnsl-info-section>
-              </div>
+            <div
+              class="current-auth-method"
+              *ngIf="currentRadioItemAuthType"
+              [ngStyle]="{ background: currentRadioItemAuthType.background }"
+            >
+              <h3>{{ currentRadioItemAuthType.titleI18nKey | translate }}</h3>
+              <p>{{ currentRadioItemAuthType.descI18nKey | translate }}</p>
+              <span class="fill-space"></span>
+              <button mat-icon-button (click)="changeAuthMethod()"><i class="las la-pen"></i></button>
+            </div>
 
+            <form [formGroup]="oidcForm" (ngSubmit)="saveOIDCApp()">
               <div class="app-oidc-content">
                 <div class="app-oidc-grid">
                   <cnsl-form-field class="app-formfield" appearance="outline">
@@ -156,7 +96,7 @@
                     <cnsl-label>{{ 'APP.TYPE' | translate }}</cnsl-label>
                     <mat-select formControlName="appType">
                       <mat-option *ngFor="let type of oidcAppTypes" [value]="type">
-                        {{ 'APP.OIDC.APPTYPE.'+type | translate }}
+                        {{ 'APP.OIDC.APPTYPE.' + type | translate }}
                       </mat-option>
                     </mat-select>
                   </cnsl-form-field>
@@ -165,7 +105,7 @@
                     <cnsl-label>{{ 'APP.OIDC.RESPONSETYPE' | translate }}</cnsl-label>
                     <mat-select formControlName="responseTypesList" multiple>
                       <mat-option *ngFor="let type of oidcResponseTypes" [value]="type">
-                        {{ 'APP.OIDC.RESPONSE.'+type | translate }}
+                        {{ 'APP.OIDC.RESPONSE.' + type | translate }}
                       </mat-option>
                     </mat-select>
                   </cnsl-form-field>
@@ -174,7 +114,7 @@
                     <cnsl-label>{{ 'APP.AUTHMETHOD' | translate }}</cnsl-label>
                     <mat-select formControlName="authMethodType">
                       <mat-option *ngFor="let type of oidcAuthMethodType" [value]="type">
-                        {{ 'APP.OIDC.AUTHMETHOD.'+type | translate }}
+                        {{ 'APP.OIDC.AUTHMETHOD.' + type | translate }}
                       </mat-option>
                     </mat-select>
                   </cnsl-form-field>
@@ -183,62 +123,31 @@
                     <cnsl-label>{{ 'APP.OIDC.GRANTTYPE' | translate }}</cnsl-label>
                     <mat-select formControlName="grantTypesList" multiple>
                       <mat-option *ngFor="let grant of oidcGrantTypes" [value]="grant">
-                        {{ 'APP.OIDC.GRANT.'+grant | translate }}
+                        {{ 'APP.OIDC.GRANT.' + grant | translate }}
                       </mat-option>
                     </mat-select>
                   </cnsl-form-field>
 
-                  <mat-checkbox color="primary" class="rt" (change)="toggleRefreshToken($event)"
+                  <mat-checkbox
+                    color="primary"
+                    class="rt"
+                    (change)="toggleRefreshToken($event)"
                     [disabled]="!this.grantTypesList?.value.includes(OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE)"
-                    [checked]="this.grantTypesList?.value.includes(OIDCGrantType.OIDC_GRANT_TYPE_REFRESH_TOKEN)">
+                    [checked]="this.grantTypesList?.value.includes(OIDCGrantType.OIDC_GRANT_TYPE_REFRESH_TOKEN)"
+                  >
                     {{ 'APP.OIDC.REFRESHTOKEN' | translate }}
                   </mat-checkbox>
                 </div>
-
-                <p class="app-full-width app-section-title">{{'APP.OIDC.TOKENSECTIONTITLE' | translate}}</p>
-
-                <cnsl-form-field appearance="outline" class="app-formfield">
-                  <cnsl-label>{{ 'APP.OIDC.TOKENTYPE' | translate }}</cnsl-label>
-                  <mat-select formControlName="accessTokenType">
-                    <mat-option *ngFor="let type of oidcTokenTypes" [value]="type">
-                      {{ 'APP.OIDC.TOKENTYPE'+type | translate }}
-                    </mat-option>
-                  </mat-select>
-                </cnsl-form-field>
-
-                <mat-checkbox *ngIf="accessTokenType?.value === OIDCTokenType.OIDC_TOKEN_TYPE_JWT" class="full-width"
-                  formControlName="accessTokenRoleAssertion" color="primary">
-                  {{'APP.OIDC.ACCESSTOKENROLEASSERTION' | translate}}</mat-checkbox>
-
-                <cnsl-info-section class="app-full-width app-desc">
-                  <span>{{'APP.OIDC.ACCESSTOKENROLEASSERTION_DESCRIPTION' | translate}}</span>
-                </cnsl-info-section>
-                <mat-checkbox class="app-full-width" style="margin-top: 1.5rem" formControlName="idTokenRoleAssertion"
-                  color="primary">
-                  {{'APP.OIDC.IDTOKENROLEASSERTION' | translate}}</mat-checkbox>
-                <cnsl-info-section class="full-width app-desc">
-                  <span>{{'APP.OIDC.IDTOKENROLEASSERTION_DESCRIPTION' | translate}}</span>
-                </cnsl-info-section>
-
-                <mat-checkbox class="app-full-width" style="margin-top: 1.5rem"
-                  formControlName="idTokenUserinfoAssertion" color="primary">
-                  {{'APP.OIDC.IDTOKENUSERINFOASSERTION' | translate}}</mat-checkbox>
-                <cnsl-info-section class="app-full-width app-desc">
-                  <span>{{'APP.OIDC.IDTOKENUSERINFOASSERTION_DESCRIPTION' | translate}}</span>
-                </cnsl-info-section>
-
-                <p class="clockskew-title cnsl-secondary-text">ClockSkew</p>
-                <mat-slider color="primary" formControlName="clockSkewSeconds" class="clockskew-slider" thumbLabel
-                  [displayWith]="formatClockSkewLabel" tickInterval=".1" min="0" [step]="1" max="5">
-                </mat-slider>
-                <cnsl-info-section class="app-full-width app-desc">
-                  <span>{{'APP.OIDC.CLOCKSKEW' | translate}}</span>
-                </cnsl-info-section>
               </div>
 
               <div class="btn-container">
-                <button class="submit-button" type="submit" color="primary" [disabled]="oidcForm.invalid || !canWrite"
-                  mat-raised-button>
+                <button
+                  class="submit-button"
+                  type="submit"
+                  color="primary"
+                  [disabled]="oidcForm.invalid || !canWrite"
+                  mat-raised-button
+                >
                   {{ 'ACTIONS.SAVE' | translate }}
                 </button>
               </div>
@@ -246,14 +155,220 @@
           </cnsl-card>
         </ng-container>
 
+        <ng-container *ngIf="currentSetting === 'token'">
+          <cnsl-card *ngIf="oidcTokenForm && app?.oidcConfig" title=" {{ 'APP.OIDC.TOKENSECTIONTITLE' | translate }}">
+            <form [formGroup]="oidcTokenForm" (ngSubmit)="saveOIDCApp()">
+              <cnsl-form-field appearance="outline" class="app-formfield">
+                <cnsl-label>{{ 'APP.OIDC.TOKENTYPE' | translate }}</cnsl-label>
+                <mat-select formControlName="accessTokenType">
+                  <mat-option *ngFor="let type of oidcTokenTypes" [value]="type">
+                    {{ 'APP.OIDC.TOKENTYPE' + type | translate }}
+                  </mat-option>
+                </mat-select>
+              </cnsl-form-field>
+
+              <mat-checkbox
+                *ngIf="accessTokenType?.value === OIDCTokenType.OIDC_TOKEN_TYPE_JWT"
+                class="full-width"
+                style="margin-top: 1.5rem"
+                formControlName="accessTokenRoleAssertion"
+                color="primary"
+              >
+                {{ 'APP.OIDC.ACCESSTOKENROLEASSERTION' | translate }}</mat-checkbox
+              >
+
+              <cnsl-info-section class="full-width app-desc">
+                <span>{{ 'APP.OIDC.ACCESSTOKENROLEASSERTION_DESCRIPTION' | translate }}</span>
+              </cnsl-info-section>
+
+              <mat-checkbox
+                class="full-width"
+                style="margin-top: 1.5rem"
+                formControlName="idTokenRoleAssertion"
+                color="primary"
+              >
+                {{ 'APP.OIDC.IDTOKENROLEASSERTION' | translate }}</mat-checkbox
+              >
+              <cnsl-info-section class="full-width app-desc">
+                <span>{{ 'APP.OIDC.IDTOKENROLEASSERTION_DESCRIPTION' | translate }}</span>
+              </cnsl-info-section>
+
+              <mat-checkbox
+                class="full-width"
+                style="margin-top: 1.5rem"
+                formControlName="idTokenUserinfoAssertion"
+                color="primary"
+              >
+                {{ 'APP.OIDC.IDTOKENUSERINFOASSERTION' | translate }}</mat-checkbox
+              >
+              <cnsl-info-section class="full-width app-desc">
+                <span>{{ 'APP.OIDC.IDTOKENUSERINFOASSERTION_DESCRIPTION' | translate }}</span>
+              </cnsl-info-section>
+
+              <p class="clockskew-title cnsl-secondary-text">ClockSkew</p>
+              <mat-slider
+                color="primary"
+                formControlName="clockSkewSeconds"
+                class="clockskew-slider"
+                thumbLabel
+                [displayWith]="formatClockSkewLabel"
+                tickInterval=".1"
+                min="0"
+                [step]="1"
+                max="5"
+              >
+              </mat-slider>
+              <cnsl-info-section class="full-width app-desc">
+                <span>{{ 'APP.OIDC.CLOCKSKEW' | translate }}</span>
+              </cnsl-info-section>
+
+              <div class="btn-container">
+                <button
+                  class="submit-button"
+                  type="submit"
+                  color="primary"
+                  [disabled]="oidcTokenForm.invalid || !canWrite"
+                  mat-raised-button
+                >
+                  {{ 'ACTIONS.SAVE' | translate }}
+                </button>
+              </div>
+            </form>
+          </cnsl-card>
+        </ng-container>
+
+        <ng-container *ngIf="currentSetting === 'redirect-uris'">
+          <cnsl-card title=" {{ 'APP.OIDC.REDIRECTSECTIONTITLE' | translate }}">
+            <cnsl-info-section *ngIf="appType?.value === OIDCAppType.OIDC_APP_TYPE_NATIVE">
+              <div class="dev-col">
+                <span>{{ 'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate }}</span>
+                <mat-slide-toggle
+                  *ngIf="devMode"
+                  color="primary"
+                  class="devmode"
+                  [formControl]="devMode"
+                  name="devMode"
+                  matTooltip="{{ 'APP.OIDC.DEVMODEDESC' | translate }}"
+                >
+                  {{ 'APP.OIDC.DEVMODE' | translate }}
+                </mat-slide-toggle>
+              </div>
+            </cnsl-info-section>
+            <cnsl-info-section
+              *ngIf="
+                appType?.value === OIDCAppType.OIDC_APP_TYPE_WEB || appType?.value === OIDCAppType.OIDC_APP_TYPE_USER_AGENT
+              "
+            >
+              <div class="dev-col">
+                <span>{{ 'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate }}</span>
+                <mat-slide-toggle
+                  *ngIf="devMode"
+                  color="primary"
+                  class="devmode"
+                  [formControl]="devMode"
+                  name="devMode"
+                  matTooltip="{{ 'APP.OIDC.DEVMODEDESC' | translate }}"
+                >
+                  {{ 'APP.OIDC.DEVMODE' | translate }}
+                </mat-slide-toggle>
+              </div>
+            </cnsl-info-section>
+
+            <cnsl-redirect-uris
+              *ngIf="appType?.value !== undefined"
+              class="redirect-section"
+              [canWrite]="canWrite"
+              [devMode]="devMode?.value"
+              [getValues]="requestRedirectValuesSubject$"
+              (changedUris)="redirectUrisList = $any($event)"
+              [urisList]="redirectUrisList"
+              title="{{ 'APP.OIDC.REDIRECT' | translate }}"
+              [isNative]="appType?.value === OIDCAppType.OIDC_APP_TYPE_NATIVE"
+            >
+            </cnsl-redirect-uris>
+
+            <cnsl-redirect-uris
+              *ngIf="appType?.value !== undefined"
+              class="redirect-section"
+              [canWrite]="canWrite"
+              [devMode]="devMode?.value"
+              (changedUris)="postLogoutRedirectUrisList = $any($event)"
+              [urisList]="postLogoutRedirectUrisList"
+              [getValues]="requestRedirectValuesSubject$"
+              title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}"
+              [isNative]="appType?.value === OIDCAppType.OIDC_APP_TYPE_NATIVE"
+            >
+            </cnsl-redirect-uris>
+
+            <div class="btn-container">
+              <button class="submit-button" color="primary" (click)="saveOIDCApp()" [disabled]="!canWrite" mat-raised-button>
+                {{ 'ACTIONS.SAVE' | translate }}
+              </button>
+            </div>
+          </cnsl-card>
+        </ng-container>
+
+        <ng-container *ngIf="currentSetting === 'additional-origins'">
+          <cnsl-card title=" {{ 'APP.ADDITIONALORIGINS' | translate }}">
+            <p class="app-desc cnsl-secondary-text">{{ 'APP.ADDITIONALORIGINSDESC' | translate }}</p>
+            <cnsl-additional-origins
+              *ngIf="additionalOriginsList && appType && appType?.value !== undefined"
+              class="app-input"
+              [canWrite]="canWrite"
+              [getValues]="requestRedirectValuesSubject$"
+              (changedUris)="additionalOriginsListChanged($event)"
+              [urisList]="additionalOriginsList"
+              title="{{ 'APP.ORIGINS' | translate }}"
+            >
+            </cnsl-additional-origins>
+
+            <div class="btn-container">
+              <button class="submit-button" (click)="saveOIDCApp()" color="primary" [disabled]="!canWrite" mat-raised-button>
+                {{ 'ACTIONS.SAVE' | translate }}
+              </button>
+            </div>
+          </cnsl-card>
+        </ng-container>
+
+        <ng-container *ngIf="currentSetting === 'urls'">
+          <cnsl-card title=" {{ 'APP.URLS' | translate }}">
+            <div class="app-info-row">
+              <div class="app-info-wrapper" *ngFor="let environmentV of environmentMap | keyvalue">
+                <p class="app-info-row-title cnsl-secondary-text">{{ environmentV.key }}</p>
+                <div class="app-copy-row">
+                  <div *ngIf="environmentV.value" class="environment">
+                    <button
+                      [disabled]="copied === environmentV.value"
+                      [matTooltip]="(copied !== environmentV.value ? 'ACTIONS.COPY' : 'ACTIONS.COPIED') | translate"
+                      cnslCopyToClipboard
+                      [valueToCopy]="environmentV.value"
+                      (copiedValue)="copied = environmentV.key"
+                    >
+                      {{ environmentV.value }}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </cnsl-card>
+        </ng-container>
+
         <ng-container *ngIf="currentSetting === 'configuration'">
-          <cnsl-card *ngIf="currentAuthMethod === 'PK_JWT' && projectId && app?.id"
-            title="{{ 'USER.MACHINE.KEYSTITLE' | translate }}" description="{{ 'USER.MACHINE.KEYSDESC' | translate }}">
+          <cnsl-card
+            *ngIf="initialAuthMethod === 'PK_JWT' && projectId && app?.id"
+            title="{{ 'USER.MACHINE.KEYSTITLE' | translate }}"
+            description="{{ 'USER.MACHINE.KEYSDESC' | translate }}"
+          >
             <cnsl-client-keys [projectId]="projectId" [appId]="app.id"></cnsl-client-keys>
 
             <div *ngIf="apiForm && app?.apiConfig" class="btn-container">
-              <button class="submit-button" (click)="saveAPIApp()" color="primary"
-                [disabled]="apiForm.invalid || !canWrite" mat-raised-button>
+              <button
+                class="submit-button"
+                (click)="saveAPIApp()"
+                color="primary"
+                [disabled]="apiForm.invalid || !canWrite"
+                mat-raised-button
+              >
                 {{ 'ACTIONS.SAVE' | translate }}
               </button>
             </div>
@@ -261,11 +376,9 @@
         </ng-container>
       </cnsl-sidenav>
 
-      <!-- <cnsl-links [links]="nextLinks"></cnsl-links> -->
-
       <div metainfo>
         <cnsl-changes *ngIf="app" [changeType]="ChangeType.APP" [id]="app.id" [secId]="projectId"></cnsl-changes>
       </div>
     </cnsl-meta-layout>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/console/src/app/pages/projects/apps/app-detail/app-detail.component.scss b/console/src/app/pages/projects/apps/app-detail/app-detail.component.scss
index 040e16236..e2926272a 100644
--- a/console/src/app/pages/projects/apps/app-detail/app-detail.component.scss
+++ b/console/src/app/pages/projects/apps/app-detail/app-detail.component.scss
@@ -44,11 +44,6 @@
     flex-direction: column;
     margin: 0 -0.5rem;
 
-    @media only screen and (min-width: 500px) {
-      flex-direction: row;
-      flex-wrap: wrap;
-    }
-
     .app-info-wrapper {
       display: flex;
       flex-direction: column;
@@ -77,6 +72,7 @@
         flex-direction: column;
         width: 100%;
         align-items: stretch;
+        margin-bottom: 0.5rem;
 
         button {
           transition: opacity 0.15s ease-in-out;
@@ -109,22 +105,53 @@
     }
   }
 
+  .compliance {
+    padding-bottom: 1rem;
+    padding-top: 0.5rem;
+    border-bottom: 1px solid $divider-color;
+
+    .compliance-title {
+      margin: 1rem 0 1rem 0;
+      font-size: 16px;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .problem {
+      font-size: 14px;
+      margin: 0 0 0.5rem 0;
+      display: block;
+    }
+  }
+
   .app-main-content {
-    border-top: 1px solid $divider-color;
-    margin-top: 1.5rem;
-  }
-}
+    margin-top: 0.5rem;
 
-.compliance {
-  .compliance-title {
-    margin: 1rem 0 1rem 0;
-    font-size: 16px;
-  }
+    .current-auth-method {
+      display: flex;
+      align-items: center;
+      border: 1px solid if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2));
+      border-radius: 0.5rem;
+      padding: 0.5rem 1rem;
+      margin-bottom: 1rem;
 
-  .problem {
-    font-size: 14px;
-    margin: 0 0 0.5rem 0;
-    display: block;
+      h3 {
+        margin: 0 1rem 0 0;
+      }
+
+      p {
+        font-size: 14px;
+        margin: 0;
+      }
+
+      .fill-space {
+        flex: 1;
+      }
+
+      button {
+        margin-left: 1rem;
+      }
+    }
   }
 }
 
diff --git a/console/src/app/pages/projects/apps/app-detail/app-detail.component.ts b/console/src/app/pages/projects/apps/app-detail/app-detail.component.ts
index 5851f3dad..6a1761313 100644
--- a/console/src/app/pages/projects/apps/app-detail/app-detail.component.ts
+++ b/console/src/app/pages/projects/apps/app-detail/app-detail.component.ts
@@ -5,7 +5,6 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { AbstractControl, FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
-import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { Duration } from 'google-protobuf/google/protobuf/duration_pb';
@@ -14,7 +13,6 @@ import { take } from 'rxjs/operators';
 import { RadioItemAuthType } from 'src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component';
 import { ChangeType } from 'src/app/modules/changes/changes.component';
 import { InfoSectionType } from 'src/app/modules/info-section/info-section.component';
-import { CnslLinks } from 'src/app/modules/links/links.component';
 import { NameDialogComponent } from 'src/app/modules/name-dialog/name-dialog.component';
 import { SidenavSetting } from 'src/app/modules/sidenav/sidenav.component';
 import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
@@ -52,6 +50,7 @@ import {
     PKCE_METHOD,
     POST_METHOD,
 } from '../authmethods';
+import { AuthMethodDialogComponent } from './auth-method-dialog/auth-method-dialog.component';
 
 @Component({
   selector: 'cnsl-app-detail',
@@ -103,6 +102,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
 
   public AppState: any = AppState;
   public oidcForm!: FormGroup;
+  public oidcTokenForm!: FormGroup;
   public apiForm!: FormGroup;
 
   public redirectUrisList: string[] = [];
@@ -122,7 +122,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
 
   public requestRedirectValuesSubject$: Subject<void> = new Subject();
   public copiedKey: any = '';
-  public nextLinks: Array<CnslLinks> = [];
   public InfoSectionType: any = InfoSectionType;
   public copied: string = '';
 
@@ -139,7 +138,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     private mgmtService: ManagementService,
     private authService: GrpcAuthService,
     private router: Router,
-    private snackbar: MatSnackBar,
     private breadcrumbService: BreadcrumbService,
     private http: HttpClient,
   ) {
@@ -150,6 +148,9 @@ export class AppDetailComponent implements OnInit, OnDestroy {
       grantTypesList: [{ value: [], disabled: true }],
       appType: [{ value: '', disabled: true }],
       authMethodType: [{ value: '', disabled: true }],
+    });
+
+    this.oidcTokenForm = this.fb.group({
       accessTokenType: [{ value: '', disabled: true }],
       accessTokenRoleAssertion: [{ value: false, disabled: true }],
       idTokenRoleAssertion: [{ value: false, disabled: true }],
@@ -212,32 +213,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     this.subscription?.unsubscribe();
   }
 
-  private initLinks(): void {
-    this.nextLinks = [
-      {
-        i18nTitle: 'APP.PAGES.NEXTSTEPS.0.TITLE',
-        i18nDesc: 'APP.PAGES.NEXTSTEPS.0.DESC',
-        routerLink: ['/projects', this.projectId, 'roles'],
-        iconClasses: 'las la-user-tag',
-      },
-      {
-        i18nTitle: 'APP.PAGES.NEXTSTEPS.1.TITLE',
-        i18nDesc: 'APP.PAGES.NEXTSTEPS.1.DESC',
-        routerLink: ['/users', 'create'],
-        iconClasses: 'las la-user-plus',
-      },
-      {
-        i18nTitle: 'APP.PAGES.NEXTSTEPS.2.TITLE',
-        i18nDesc: 'APP.PAGES.NEXTSTEPS.2.DESC',
-        href: 'https://docs.zitadel.comm',
-        iconClasses: 'las la-people-carry',
-      },
-    ];
-  }
-
   private async getData(projectId: string, appId: string): Promise<void> {
-    this.initLinks();
-
     this.mgmtService.getIAM().then((iam) => {
       this.isZitadel = iam.iamProjectId === this.projectId;
     });
@@ -277,6 +253,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
 
                 this.settingsList = [
                   { id: 'configuration', i18nKey: 'APP.CONFIGURATION' },
+                  { id: 'token', i18nKey: 'APP.TOKEN' },
                   { id: 'redirect-uris', i18nKey: 'APP.OIDC.REDIRECTSECTIONTITLE' },
                   { id: 'additional-origins', i18nKey: 'APP.ADDITIONALORIGINS' },
                   { id: 'urls', i18nKey: 'APP.URLS' },
@@ -317,6 +294,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
 
               if (allowed) {
                 this.oidcForm.enable();
+                this.oidcTokenForm.enable();
                 this.apiForm.enable();
               }
 
@@ -332,10 +310,11 @@ export class AppDetailComponent implements OnInit, OnDestroy {
 
               if (this.app.oidcConfig?.clockSkew) {
                 const inSecs = this.app.oidcConfig?.clockSkew.seconds + this.app.oidcConfig?.clockSkew.nanos / 100000;
-                this.oidcForm.controls['clockSkewSeconds'].setValue(inSecs);
+                this.oidcTokenForm.controls['clockSkewSeconds'].setValue(inSecs);
               }
               if (this.app.oidcConfig) {
                 this.oidcForm.patchValue(this.app.oidcConfig);
+                this.oidcTokenForm.patchValue(this.app.oidcConfig);
               }
               if (this.app.apiConfig) {
                 this.apiForm.patchValue(this.app.apiConfig);
@@ -350,8 +329,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
                 } else {
                   this.authMethods = this.authMethods.filter((element) => element !== CUSTOM_METHOD);
                 }
-
-                this.showSaveSnack();
               });
 
               this.apiForm.valueChanges.subscribe((apiConfig) => {
@@ -363,8 +340,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
                 } else {
                   this.authMethods = this.authMethods.filter((element) => element !== CUSTOM_METHOD);
                 }
-
-                this.showSaveSnack();
               });
             }
           })
@@ -377,20 +352,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     this.docs = await this.mgmtService.getOIDCInformation();
   }
 
-  private async showSaveSnack(): Promise<void> {
-    const message = await this.translate.get('APP.TOAST.CONFIGCHANGED').toPromise();
-    const action = await this.translate.get('ACTIONS.SAVENOW').toPromise();
-
-    const snackRef = this.snackbar.open(message, action, { duration: 5000, verticalPosition: 'top' });
-    snackRef.onAction().subscribe(() => {
-      if (this.app.oidcConfig) {
-        this.saveOIDCApp();
-      } else if (this.app.apiConfig) {
-        this.saveAPIApp();
-      }
-    });
-  }
-
   private getAuthMethodOptions(type: string): void {
     if (type === 'OIDC') {
       switch (this.app.oidcConfig?.appType) {
@@ -426,6 +387,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
         (partialConfig.oidc as Partial<OIDCConfig.AsObject>).authMethodType ?? OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE;
 
       this.oidcForm.patchValue(this.app.oidcConfig);
+      this.oidcTokenForm.patchValue(this.app.oidcConfig);
     } else if (partialConfig && partialConfig.api && this.app.apiConfig) {
       this.app.apiConfig.authMethodType =
         (partialConfig.api as Partial<APIConfig.AsObject>).authMethodType ?? APIAuthMethodType.API_AUTH_METHOD_TYPE_BASIC;
@@ -444,6 +406,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
       },
       width: '400px',
     });
+
     dialogRef.afterClosed().subscribe((resp) => {
       if (resp && this.projectId && this.app.id) {
         this.mgmtService
@@ -519,40 +482,53 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     this.requestRedirectValuesSubject$.next();
     if (this.oidcForm.valid) {
       if (this.app.oidcConfig) {
+        //   configuration
         this.app.oidcConfig.responseTypesList = this.responseTypesList?.value;
         this.app.oidcConfig.grantTypesList = this.grantTypesList?.value;
         this.app.oidcConfig.appType = this.appType?.value;
         this.app.oidcConfig.authMethodType = this.authMethodType?.value;
-        this.app.oidcConfig.redirectUrisList = this.redirectUrisList;
-        this.app.oidcConfig.postLogoutRedirectUrisList = this.postLogoutRedirectUrisList;
-        this.app.oidcConfig.additionalOriginsList = this.additionalOriginsList;
-        this.app.oidcConfig.devMode = this.devMode?.value;
+
+        // token
         this.app.oidcConfig.accessTokenType = this.accessTokenType?.value;
         this.app.oidcConfig.accessTokenRoleAssertion = this.accessTokenRoleAssertion?.value;
         this.app.oidcConfig.idTokenRoleAssertion = this.idTokenRoleAssertion?.value;
         this.app.oidcConfig.idTokenUserinfoAssertion = this.idTokenUserinfoAssertion?.value;
 
+        // redirects
+        this.app.oidcConfig.redirectUrisList = this.redirectUrisList;
+        this.app.oidcConfig.postLogoutRedirectUrisList = this.postLogoutRedirectUrisList;
+        this.app.oidcConfig.additionalOriginsList = this.additionalOriginsList;
+        this.app.oidcConfig.devMode = this.devMode?.value;
+
         const req = new UpdateOIDCAppConfigRequest();
         req.setProjectId(this.projectId);
         req.setAppId(this.app.id);
-        req.setRedirectUrisList(this.app.oidcConfig.redirectUrisList);
+
+        // configuration
         req.setResponseTypesList(this.app.oidcConfig.responseTypesList);
-        req.setAdditionalOriginsList(this.app.oidcConfig.additionalOriginsList);
         req.setAuthMethodType(this.app.oidcConfig.authMethodType);
-        req.setPostLogoutRedirectUrisList(this.app.oidcConfig.postLogoutRedirectUrisList);
         req.setGrantTypesList(this.app.oidcConfig.grantTypesList);
         req.setAppType(this.app.oidcConfig.appType);
-        req.setDevMode(this.app.oidcConfig.devMode);
+
+        // token
         req.setAccessTokenType(this.app.oidcConfig.accessTokenType);
         req.setAccessTokenRoleAssertion(this.app.oidcConfig.accessTokenRoleAssertion);
         req.setIdTokenRoleAssertion(this.app.oidcConfig.idTokenRoleAssertion);
         req.setIdTokenUserinfoAssertion(this.app.oidcConfig.idTokenUserinfoAssertion);
+
+        // redirects
+        req.setRedirectUrisList(this.app.oidcConfig.redirectUrisList);
+        req.setAdditionalOriginsList(this.app.oidcConfig.additionalOriginsList);
+        req.setPostLogoutRedirectUrisList(this.app.oidcConfig.postLogoutRedirectUrisList);
+        req.setDevMode(this.app.oidcConfig.devMode);
+
         if (this.clockSkewSeconds?.value) {
           const dur = new Duration();
           dur.setSeconds(Math.floor(this.clockSkewSeconds?.value));
           dur.setNanos(Math.floor(this.clockSkewSeconds?.value % 1) * 10000);
           req.setClockSkew(dur);
         }
+
         this.mgmtService
           .updateOIDCAppConfig(req)
           .then(() => {
@@ -622,6 +598,24 @@ export class AppDetailComponent implements OnInit, OnDestroy {
       });
   }
 
+  public changeAuthMethod(): void {
+    const ref = this.dialog.open(AuthMethodDialogComponent, {
+      data: {
+        radioItemAuthType: this.currentRadioItemAuthType,
+        initialAuthMethod: this.initialAuthMethod,
+        currentAuthMethod: this.currentAuthMethod,
+        authMethods: this.authMethods,
+        isOIDC: this.app?.oidcConfig !== undefined,
+      },
+    });
+
+    ref.afterClosed().subscribe((authMethod: string) => {
+      if (authMethod) {
+        this.setPartialConfigFromAuthMethod(authMethod);
+      }
+    });
+  }
+
   public regenerateAPIClientSecret(): void {
     this.mgmtService
       .regenerateAPIClientSecret(this.app.id, this.projectId)
@@ -639,6 +633,10 @@ export class AppDetailComponent implements OnInit, OnDestroy {
       });
   }
 
+  public get currentRadioItemAuthType(): RadioItemAuthType | undefined {
+    return this.authMethods.find((i) => i.key === this.initialAuthMethod);
+  }
+
   public navigateBack(): void {
     this._location.back();
   }
@@ -672,22 +670,22 @@ export class AppDetailComponent implements OnInit, OnDestroy {
   }
 
   public get accessTokenType(): AbstractControl | null {
-    return this.oidcForm.get('accessTokenType');
+    return this.oidcTokenForm.get('accessTokenType');
   }
 
   public get idTokenRoleAssertion(): AbstractControl | null {
-    return this.oidcForm.get('idTokenRoleAssertion');
+    return this.oidcTokenForm.get('idTokenRoleAssertion');
   }
 
   public get accessTokenRoleAssertion(): AbstractControl | null {
-    return this.oidcForm.get('accessTokenRoleAssertion');
+    return this.oidcTokenForm.get('accessTokenRoleAssertion');
   }
 
   public get idTokenUserinfoAssertion(): AbstractControl | null {
-    return this.oidcForm.get('idTokenUserinfoAssertion');
+    return this.oidcTokenForm.get('idTokenUserinfoAssertion');
   }
 
   public get clockSkewSeconds(): AbstractControl | null {
-    return this.oidcForm.get('clockSkewSeconds');
+    return this.oidcTokenForm.get('clockSkewSeconds');
   }
 }
diff --git a/console/src/app/pages/projects/apps/app-detail/auth-method-dialog/auth-method-dialog.component.html b/console/src/app/pages/projects/apps/app-detail/auth-method-dialog/auth-method-dialog.component.html
new file mode 100644
index 000000000..7e1d1ce84
--- /dev/null
+++ b/console/src/app/pages/projects/apps/app-detail/auth-method-dialog/auth-method-dialog.component.html
@@ -0,0 +1,31 @@
+<h1 mat-dialog-title>
+  <span>{{ 'USER.CODEDIALOG.TITLE' | translate }} {{ data?.number }}</span>
+</h1>
+<p class="desc cnsl-secondary-text">{{ 'USER.CODEDIALOG.DESCRIPTION' | translate }}</p>
+<div mat-dialog-content>
+  <cnsl-auth-method-radio
+    [authMethods]="data.authMethods"
+    [selected]="data.initialAuthMethod"
+    [current]="data.currentAuthMethod"
+    [isOIDC]="data.isOIDC"
+    (selectedMethod)="authmethod = $event"
+    [compact]="true"
+  >
+  </cnsl-auth-method-radio>
+</div>
+<div mat-dialog-actions class="action">
+  <button color="primary" mat-stroked-button class="ok-button" (click)="closeDialog()">
+    {{ 'ACTIONS.CLOSE' | translate }}
+  </button>
+
+  <button
+    [disabled]="!authmethod"
+    cdkFocusInitial
+    color="primary"
+    mat-raised-button
+    class="ok-button"
+    (click)="closeDialogWithMethod()"
+  >
+    {{ 'ACTIONS.SELECT' | translate }}
+  </button>
+</div>
diff --git a/console/src/app/pages/projects/apps/app-detail/auth-method-dialog/auth-method-dialog.component.scss b/console/src/app/pages/projects/apps/app-detail/auth-method-dialog/auth-method-dialog.component.scss
new file mode 100644
index 000000000..e5b1b3b77
--- /dev/null
+++ b/console/src/app/pages/projects/apps/app-detail/auth-method-dialog/auth-method-dialog.component.scss
@@ -0,0 +1,25 @@
+h1 {
+  font-size: 1.5rem;
+  margin: 0;
+}
+
+.desc {
+  font-size: 14px;
+}
+
+.formfield {
+  width: 100%;
+}
+
+.action {
+  display: flex;
+  justify-content: flex-end;
+
+  .ok-button {
+    margin-left: 0.5rem;
+  }
+
+  button {
+    border-radius: 0.5rem;
+  }
+}
diff --git a/console/src/app/pages/projects/apps/app-detail/auth-method-dialog/auth-method-dialog.component.spec.ts b/console/src/app/pages/projects/apps/app-detail/auth-method-dialog/auth-method-dialog.component.spec.ts
new file mode 100644
index 000000000..ac6c6cf97
--- /dev/null
+++ b/console/src/app/pages/projects/apps/app-detail/auth-method-dialog/auth-method-dialog.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { AuthMethodDialogComponent } from './auth-method-dialog.component';
+
+describe('AuthMethodDialogComponent', () => {
+  let component: AuthMethodDialogComponent;
+  let fixture: ComponentFixture<AuthMethodDialogComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [AuthMethodDialogComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AuthMethodDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/console/src/app/pages/projects/apps/app-detail/auth-method-dialog/auth-method-dialog.component.ts b/console/src/app/pages/projects/apps/app-detail/auth-method-dialog/auth-method-dialog.component.ts
new file mode 100644
index 000000000..2199b298d
--- /dev/null
+++ b/console/src/app/pages/projects/apps/app-detail/auth-method-dialog/auth-method-dialog.component.ts
@@ -0,0 +1,22 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'cnsl-auth-method-dialog',
+  templateUrl: './auth-method-dialog.component.html',
+  styleUrls: ['./auth-method-dialog.component.scss'],
+})
+export class AuthMethodDialogComponent {
+  public authmethod: string = '';
+  constructor(public dialogRef: MatDialogRef<AuthMethodDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {
+    this.authmethod = data.initialAuthMethod;
+  }
+
+  public closeDialog(): void {
+    this.dialogRef.close();
+  }
+
+  public closeDialogWithMethod(): void {
+    this.dialogRef.close(this.authmethod);
+  }
+}
diff --git a/console/src/app/pages/projects/apps/apps.module.ts b/console/src/app/pages/projects/apps/apps.module.ts
index 08becc22b..f89102160 100644
--- a/console/src/app/pages/projects/apps/apps.module.ts
+++ b/console/src/app/pages/projects/apps/apps.module.ts
@@ -23,10 +23,10 @@ import { AppRadioModule } from 'src/app/modules/app-radio/app-radio.module';
 import { CardModule } from 'src/app/modules/card/card.module';
 import { ChangesModule } from 'src/app/modules/changes/changes.module';
 import { ClientKeysModule } from 'src/app/modules/client-keys/client-keys.module';
+import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
 import { InfoRowModule } from 'src/app/modules/info-row/info-row.module';
 import { InfoSectionModule } from 'src/app/modules/info-section/info-section.module';
 import { InputModule } from 'src/app/modules/input/input.module';
-import { LinksModule } from 'src/app/modules/links/links.module';
 import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
 import { NameDialogModule } from 'src/app/modules/name-dialog/name-dialog.module';
 import { SidenavModule } from 'src/app/modules/sidenav/sidenav.module';
@@ -38,6 +38,7 @@ import { RedirectPipeModule } from 'src/app/pipes/redirect-pipe/redirect-pipe.mo
 import { AdditionalOriginsComponent } from './additional-origins/additional-origins.component';
 import { AppCreateComponent } from './app-create/app-create.component';
 import { AppDetailComponent } from './app-detail/app-detail.component';
+import { AuthMethodDialogComponent } from './app-detail/auth-method-dialog/auth-method-dialog.component';
 import { AppSecretDialogComponent } from './app-secret-dialog/app-secret-dialog.component';
 import { AppsRoutingModule } from './apps-routing.module';
 import { RedirectUrisComponent } from './redirect-uris/redirect-uris.component';
@@ -49,12 +50,12 @@ import { RedirectUrisComponent } from './redirect-uris/redirect-uris.component';
     AppSecretDialogComponent,
     RedirectUrisComponent,
     AdditionalOriginsComponent,
+    AuthMethodDialogComponent,
   ],
   imports: [
     CommonModule,
     A11yModule,
     RedirectPipeModule,
-    LinksModule,
     NameDialogModule,
     AppRadioModule,
     AppsRoutingModule,
@@ -66,6 +67,7 @@ import { RedirectUrisComponent } from './redirect-uris/redirect-uris.component';
     HasRoleModule,
     SidenavModule,
     MatChipsModule,
+    CreateLayoutModule,
     ClientKeysModule,
     HasRolePipeModule,
     MatIconModule,
diff --git a/console/src/app/pages/projects/owned-projects/project-grant-create/project-grant-create.component.html b/console/src/app/pages/projects/owned-projects/project-grant-create/project-grant-create.component.html
index 22c6f5445..192c44bec 100644
--- a/console/src/app/pages/projects/owned-projects/project-grant-create/project-grant-create.component.html
+++ b/console/src/app/pages/projects/owned-projects/project-grant-create/project-grant-create.component.html
@@ -1,62 +1,54 @@
-<div class="max-width-container container">
-  <div class="abort-container">
-    <button (click)="close()" mat-icon-button>
-      <mat-icon>close</mat-icon>
-    </button>
-    <span class="abort">{{ 'PROJECT.GRANT.CREATE.TITLE' | translate }}</span><span class="abort-2">Step
-      {{ currentCreateStep }} of
-      {{ STEPS }}</span>
-  </div>
+<cnsl-create-layout
+  title="{{ 'PROJECT.GRANT.CREATE.TITLE' | translate }}"
+  [createSteps]="createSteps"
+  [currentCreateStep]="currentCreateStep"
+  (closed)="close()"
+>
+  <ng-container *ngIf="currentCreateStep === 1">
+    <h1>{{ 'PROJECT.GRANT.CREATE.SEL_ORG' | translate }}</h1>
+    <p>{{ 'PROJECT.GRANT.CREATE.SEL_ORG_DESC' | translate }}</p>
 
-  <div class="create-content">
+    <form (ngSubmit)="searchOrg(domain.value)">
+      <cnsl-form-field class="org-domain">
+        <cnsl-label>{{ 'PROJECT.GRANT.CREATE.SEL_ORG_FORMFIELD' | translate }}</cnsl-label>
+        <input cnslInput #domain />
+      </cnsl-form-field>
+
+      <button [disabled]="domain.value.length === 0" color="primary" type="submit" class="domain-button" mat-raised-button>
+        {{ 'PROJECT.GRANT.CREATE.SEL_ORG_BUTTON' | translate }}
+      </button>
+    </form>
+
+    <span *ngIf="org"> {{ 'PROJECT.GRANT.CREATE.FOR_ORG' | translate }} {{ org?.name }} </span>
+  </ng-container>
+
+  <ng-container *ngIf="currentCreateStep === 2">
+    <h1>{{ 'PROJECT.GRANT.CREATE.SEL_ROLES' | translate }}</h1>
+
+    <cnsl-card *ngIf="projectId">
+      <cnsl-project-roles-table
+        [displayedColumns]="['select', 'key', 'displayname', 'group', 'creationDate', 'changeDate']"
+        (changedSelection)="selectRoles($event)"
+        [projectId]="projectId"
+      >
+      </cnsl-project-roles-table>
+    </cnsl-card>
+  </ng-container>
+
+  <div class="btn-container">
     <ng-container *ngIf="currentCreateStep === 1">
-      <h1>{{'PROJECT.GRANT.CREATE.SEL_ORG' | translate}}</h1>
-      <p>{{'PROJECT.GRANT.CREATE.SEL_ORG_DESC' | translate}}</p>
-
-      <form (ngSubmit)="searchOrg(domain.value)">
-        <cnsl-form-field class="org-domain">
-          <cnsl-label>{{'PROJECT.GRANT.CREATE.SEL_ORG_FORMFIELD' | translate}}</cnsl-label>
-          <input cnslInput #domain />
-        </cnsl-form-field>
-
-        <button [disabled]="domain.value.length === 0" color="primary" type="submit" class="domain-button"
-          mat-raised-button>
-          {{'PROJECT.GRANT.CREATE.SEL_ORG_BUTTON' | translate}}
-        </button>
-      </form>
-
-      <span *ngIf="org">
-        {{'PROJECT.GRANT.CREATE.FOR_ORG' | translate}} {{org?.name}}
-      </span>
+      <button [disabled]="!org" (click)="next()" color="primary" mat-raised-button class="big-button" cdkFocusInitial>
+        {{ 'ACTIONS.CONTINUE' | translate }}
+      </button>
     </ng-container>
 
-    <ng-container *ngIf="currentCreateStep === 2">
-      <h1>{{'PROJECT.GRANT.CREATE.SEL_ROLES' | translate}}</h1>
-
-      <cnsl-card *ngIf="projectId">
-        <cnsl-project-roles-table
-          [displayedColumns]="['select', 'key', 'displayname', 'group', 'creationDate', 'changeDate']"
-          (changedSelection)="selectRoles($event)" [projectId]="projectId">
-        </cnsl-project-roles-table>
-      </cnsl-card>
+    <ng-container *ngIf="currentCreateStep === createSteps">
+      <button (click)="previous()" mat-stroked-button class="small-button">
+        {{ 'ACTIONS.BACK' | translate }}
+      </button>
+      <button color="primary" [disabled]="!org" (click)="addGrant()" mat-raised-button class="big-button" cdkFocusInitial>
+        {{ 'ACTIONS.SAVE' | translate }}
+      </button>
     </ng-container>
-
-    <div class="btn-container">
-      <ng-container *ngIf="currentCreateStep === 1">
-        <button [disabled]="!org" (click)="next()" color="primary" mat-raised-button class="big-button" cdkFocusInitial>
-          {{ 'ACTIONS.CONTINUE' | translate }}
-        </button>
-      </ng-container>
-
-      <ng-container *ngIf="currentCreateStep === STEPS">
-        <button (click)="previous()" mat-stroked-button class="small-button">
-          {{ 'ACTIONS.BACK' | translate }}
-        </button>
-        <button color="primary" [disabled]="!org" (click)="addGrant()" mat-raised-button class="big-button"
-          cdkFocusInitial>
-          {{ 'ACTIONS.SAVE' | translate }}
-        </button>
-      </ng-container>
-    </div>
   </div>
-</div>
\ No newline at end of file
+</cnsl-create-layout>
diff --git a/console/src/app/pages/projects/owned-projects/project-grant-create/project-grant-create.component.scss b/console/src/app/pages/projects/owned-projects/project-grant-create/project-grant-create.component.scss
index f2fd39dd0..6b1695f95 100644
--- a/console/src/app/pages/projects/owned-projects/project-grant-create/project-grant-create.component.scss
+++ b/console/src/app/pages/projects/owned-projects/project-grant-create/project-grant-create.component.scss
@@ -1,34 +1,8 @@
-.container {
-  padding: 4rem 0 2rem 0;
+form {
+  max-width: 35rem;
 
-  .abort-container {
-    display: flex;
-    align-items: center;
-    margin-bottom: 2rem;
-    white-space: nowrap;
-
-    .abort {
-      font-size: 1.2rem;
-      margin-left: 2rem;
-    }
-
-    .abort-2 {
-      font-size: 1.2rem;
-      margin-left: 2rem;
-      white-space: nowrap;
-    }
-  }
-
-  .create-content {
-    padding-left: 4.5rem;
-
-    form {
-      max-width: 35rem;
-
-      .org-domain {
-        margin-right: 1rem;
-      }
-    }
+  .org-domain {
+    margin-right: 1rem;
   }
 }
 
diff --git a/console/src/app/pages/projects/owned-projects/project-grant-create/project-grant-create.component.ts b/console/src/app/pages/projects/owned-projects/project-grant-create/project-grant-create.component.ts
index 99ac5e3e3..533cec389 100644
--- a/console/src/app/pages/projects/owned-projects/project-grant-create/project-grant-create.component.ts
+++ b/console/src/app/pages/projects/owned-projects/project-grant-create/project-grant-create.component.ts
@@ -21,7 +21,7 @@ export class ProjectGrantCreateComponent implements OnInit, OnDestroy {
   public grantId: string = '';
   public rolesKeyList: string[] = [];
 
-  public STEPS: number = 2;
+  public createSteps: number = 2;
   public currentCreateStep: number = 1;
 
   private destroy$: Subject<void> = new Subject();
diff --git a/console/src/app/pages/projects/owned-projects/project-grant-create/project-grant-create.module.ts b/console/src/app/pages/projects/owned-projects/project-grant-create/project-grant-create.module.ts
index e6ac1b04d..4a6151e7d 100644
--- a/console/src/app/pages/projects/owned-projects/project-grant-create/project-grant-create.module.ts
+++ b/console/src/app/pages/projects/owned-projects/project-grant-create/project-grant-create.module.ts
@@ -10,6 +10,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { CardModule } from 'src/app/modules/card/card.module';
+import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
 import { InputModule } from 'src/app/modules/input/input.module';
 import { ProjectRolesTableModule } from 'src/app/modules/project-roles-table/project-roles-table.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
@@ -25,6 +26,7 @@ import { ProjectGrantCreateComponent } from './project-grant-create.component';
     MatAutocompleteModule,
     MatChipsModule,
     MatButtonModule,
+    CreateLayoutModule,
     InputModule,
     CardModule,
     MatCheckboxModule,
diff --git a/console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.component.html b/console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.component.html
index 4b4bdc93a..851741cd7 100644
--- a/console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.component.html
+++ b/console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.component.html
@@ -1,14 +1,10 @@
-<div class="container">
-  <div class="abort-container">
-    <button (click)="close()" mat-icon-button>
-      <mat-icon>close</mat-icon>
-    </button>
-    <span class="abort">{{ 'PROJECT.ROLE.ADDTITLE' | translate }}</span><span class="abort-2">Step
-      {{ currentCreateStep }} of
-      {{ createSteps }}</span>
-  </div>
-
-  <h1>{{'PROJECT.ROLE.ADDDESCRIPTION' | translate}}</h1>
+<cnsl-create-layout
+  title="{{ 'PROJECT.ROLE.ADDTITLE' | translate }}"
+  [createSteps]="1"
+  [currentCreateStep]="1"
+  (closed)="close()"
+>
+  <h1>{{ 'PROJECT.ROLE.ADDDESCRIPTION' | translate }}</h1>
 
   <form @list (ngSubmit)="addRole()">
     <div @animate *ngFor="let formGroup of formArray.controls; index as i" class="newrole-content">
@@ -27,20 +23,32 @@
             <input cnslInput formControlName="group" />
           </cnsl-form-field>
         </div>
-        <button *ngIf="i !== 0" mat-icon-button (click)="removeEntry(i)" type="button" color="warn"
-          matTooltip="{{ 'ACTIONS.REMOVE' | translate }}">
+        <button
+          *ngIf="i !== 0"
+          mat-icon-button
+          (click)="removeEntry(i)"
+          type="button"
+          color="warn"
+          matTooltip="{{ 'ACTIONS.REMOVE' | translate }}"
+        >
           <i class="las la-trash"></i>
         </button>
       </ng-container>
     </div>
 
     <button class="add-line-btn" color="primary" type="button" mat-stroked-button (click)="addEntry()">
-      {{'PROJECT.ROLE.ADDNEWLINE' | translate}}
+      {{ 'PROJECT.ROLE.ADDNEWLINE' | translate }}
     </button>
 
-    <button color="primary" mat-raised-button class="continue-button" [disabled]="formArray.invalid" type="submit"
-      [attr.data-e2e]="'save-button'">
+    <button
+      color="primary"
+      mat-raised-button
+      class="continue-button"
+      [disabled]="formArray.invalid"
+      type="submit"
+      [attr.data-e2e]="'save-button'"
+    >
       {{ 'ACTIONS.SAVE' | translate }}
     </button>
   </form>
-</div>
\ No newline at end of file
+</cnsl-create-layout>
diff --git a/console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.component.scss b/console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.component.scss
index 260b3e182..73be4c4a2 100644
--- a/console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.component.scss
+++ b/console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.component.scss
@@ -1,31 +1,6 @@
-.container {
-  padding: 4rem 4rem 2rem 4rem;
-
-  @media only screen and (max-width: 450px) {
-    padding: 4rem 1rem 2rem 1rem;
-  }
-
-  .abort-container {
-    display: flex;
-    align-items: center;
-    margin-bottom: 2rem;
-
-    .abort {
-      font-size: 1.2rem;
-      margin-left: 2rem;
-    }
-
-    .abort-2 {
-      font-size: 1.2rem;
-      margin-left: 2rem;
-      white-space: nowrap;
-    }
-  }
-
-  .add-line-btn {
-    margin-bottom: 1rem;
-    border-radius: .5rem;
-  }
+.add-line-btn {
+  margin-bottom: 1rem;
+  border-radius: 0.5rem;
 }
 
 .newrole-content {
@@ -55,7 +30,7 @@
 .continue-button {
   margin-top: 3rem;
   display: block;
-  padding: .5rem 4rem;
+  padding: 0.5rem 4rem;
 
   @media only screen and (max-width: 450px) {
     margin-top: 1rem;
diff --git a/console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.component.ts b/console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.component.ts
index a30f36163..5a44e6be8 100644
--- a/console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.component.ts
+++ b/console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.component.ts
@@ -36,8 +36,6 @@ export class ProjectRoleCreateComponent implements OnInit, OnDestroy {
     displayName: new FormControl(''),
     group: new FormControl(''),
   });
-  public createSteps: number = 1;
-  public currentCreateStep: number = 1;
 
   constructor(
     private router: Router,
diff --git a/console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.module.ts b/console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.module.ts
index 15eb125fc..bff31e17a 100644
--- a/console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.module.ts
+++ b/console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.module.ts
@@ -5,23 +5,25 @@ 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 { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
 import { InputModule } from 'src/app/modules/input/input.module';
 
 import { ProjectRoleCreateRoutingModule } from './project-role-create-routing.module';
 import { ProjectRoleCreateComponent } from './project-role-create.component';
 
 @NgModule({
-    declarations: [ProjectRoleCreateComponent],
-    imports: [
-        ProjectRoleCreateRoutingModule,
-        CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        InputModule,
-        MatButtonModule,
-        MatIconModule,
-        MatTooltipModule,
-        TranslateModule,
-    ],
+  declarations: [ProjectRoleCreateComponent],
+  imports: [
+    ProjectRoleCreateRoutingModule,
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    InputModule,
+    CreateLayoutModule,
+    MatButtonModule,
+    MatIconModule,
+    MatTooltipModule,
+    TranslateModule,
+  ],
 })
-export class ProjectRoleCreateModule { }
+export class ProjectRoleCreateModule {}
diff --git a/console/src/app/pages/projects/project-create/project-create.component.html b/console/src/app/pages/projects/project-create/project-create.component.html
index f2882d3a3..a96ec233a 100644
--- a/console/src/app/pages/projects/project-create/project-create.component.html
+++ b/console/src/app/pages/projects/project-create/project-create.component.html
@@ -1,34 +1,23 @@
-<div class="max-width-container">
-  <div class="enlarged-container">
-    <div class="abort-container">
-      <button (click)="close()" mat-icon-button>
-        <mat-icon>close</mat-icon>
-      </button>
-      <span class="abort">{{ 'PROJECT.PAGES.CREATE' | translate }}</span>
+<cnsl-create-layout title="{{ 'PROJECT.PAGES.CREATE' | translate }}" [createSteps]="1" [currentCreateStep]="1">
+  <h1>{{ 'PROJECT.PAGES.CREATE_DESC' | translate }}</h1>
+  <form cdkFocusRegionStart (ngSubmit)="saveProject()">
+    <div class="column">
+      <cnsl-form-field class="formfield" hintLabel="The name is required!">
+        <cnsl-label>{{ 'PROJECT.NAME' | translate }}</cnsl-label>
+        <input cnslInput cdkFocusInitial autofocus [(ngModel)]="project.name" [ngModelOptions]="{ standalone: true }" />
+      </cnsl-form-field>
     </div>
 
-    <div class="project-create-content">
-      <h1>{{ 'PROJECT.PAGES.CREATE_DESC' | translate }}</h1>
-      <form cdkFocusRegionStart (ngSubmit)="saveProject()">
-        <div class="column">
-          <cnsl-form-field class="formfield" hintLabel="The name is required!">
-            <cnsl-label>{{ 'PROJECT.NAME' | translate }}</cnsl-label>
-            <input cnslInput cdkFocusInitial autofocus [(ngModel)]="project.name" [ngModelOptions]="{ standalone: true }" />
-          </cnsl-form-field>
-        </div>
-
-        <button
-          color="primary"
-          mat-raised-button
-          class="continue-button"
-          [disabled]="!project.name"
-          cdkFocusInitial
-          type="submit"
-          [attr.data-e2e]="'continue-button'"
-        >
-          {{ 'ACTIONS.CONTINUE' | translate }}
-        </button>
-      </form>
-    </div>
-  </div>
-</div>
+    <button
+      color="primary"
+      mat-raised-button
+      class="continue-button"
+      [disabled]="!project.name"
+      cdkFocusInitial
+      type="submit"
+      [attr.data-e2e]="'continue-button'"
+    >
+      {{ 'ACTIONS.CONTINUE' | translate }}
+    </button>
+  </form></cnsl-create-layout
+>
diff --git a/console/src/app/pages/projects/project-create/project-create.component.scss b/console/src/app/pages/projects/project-create/project-create.component.scss
index 07df0ea65..a50162196 100644
--- a/console/src/app/pages/projects/project-create/project-create.component.scss
+++ b/console/src/app/pages/projects/project-create/project-create.component.scss
@@ -2,21 +2,6 @@ h1 {
   font-weight: 500;
 }
 
-.abort-container {
-  display: flex;
-  align-items: center;
-  margin-bottom: 2rem;
-
-  .abort {
-    font-size: 1.2rem;
-    margin-left: 2rem;
-  }
-}
-
-.project-create-content {
-  padding-left: 4.5rem;
-}
-
 .margin-right {
   margin-right: 0.5rem;
 }
diff --git a/console/src/app/pages/projects/project-create/project-create.module.ts b/console/src/app/pages/projects/project-create/project-create.module.ts
index 8c5f47b24..9456c547a 100644
--- a/console/src/app/pages/projects/project-create/project-create.module.ts
+++ b/console/src/app/pages/projects/project-create/project-create.module.ts
@@ -5,22 +5,24 @@ import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { TranslateModule } from '@ngx-translate/core';
+import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
 import { InputModule } from 'src/app/modules/input/input.module';
 
 import { ProjectCreateRoutingModule } from './project-create-routing.module';
 import { ProjectCreateComponent } from './project-create.component';
 
 @NgModule({
-    declarations: [ProjectCreateComponent],
-    imports: [
-        A11yModule,
-        ProjectCreateRoutingModule,
-        CommonModule,
-        FormsModule,
-        InputModule,
-        MatButtonModule,
-        MatIconModule,
-        TranslateModule,
-    ],
+  declarations: [ProjectCreateComponent],
+  imports: [
+    A11yModule,
+    ProjectCreateRoutingModule,
+    CommonModule,
+    FormsModule,
+    CreateLayoutModule,
+    InputModule,
+    MatButtonModule,
+    MatIconModule,
+    TranslateModule,
+  ],
 })
-export class ProjectCreateModule { }
+export class ProjectCreateModule {}
diff --git a/console/src/app/pages/user-grant-create/user-grant-create.component.html b/console/src/app/pages/user-grant-create/user-grant-create.component.html
index 4df3f75af..f7dfb67e7 100644
--- a/console/src/app/pages/user-grant-create/user-grant-create.component.html
+++ b/console/src/app/pages/user-grant-create/user-grant-create.component.html
@@ -1,80 +1,73 @@
-<div class="max-width-container">
-  <div class="enlarged-container">
-    <div class="abort-container">
-      <button (click)="close()" mat-icon-button>
-        <mat-icon>close</mat-icon>
+<cnsl-create-layout
+  title="{{ 'GRANTS.CREATE.TITLE' | translate }}"
+  [createSteps]="createSteps"
+  [currentCreateStep]="currentCreateStep"
+  (closed)="close()"
+>
+  <ng-container *ngIf="currentCreateStep === 1">
+    <p class="user-grant-create-desc cnsl-secondary-text">
+      {{ 'PROJECT.GRANT.CREATE.ORG_DESCRIPTION' | translate: org }}
+      <br />
+      {{ 'PROJECT.GRANT.CREATE.ORG_DESCRIPTION_DESC' | translate }}
+    </p>
+
+    <ng-container>
+      <h2>{{ 'PROJECT.GRANT.CREATE.SEL_USER' | translate }}</h2>
+
+      <cnsl-search-user-autocomplete
+        [editState]="context !== UserGrantContext.USER"
+        class="block"
+        [users]="user ? [user] : []"
+        (selectionChanged)="selectUsers($event)"
+        [target]="UserTarget.SELF"
+      >
+      </cnsl-search-user-autocomplete>
+    </ng-container>
+
+    <ng-container *ngIf="context && (context === UserGrantContext.USER || context === UserGrantContext.NONE)">
+      <h2 class="project-search">{{ 'PROJECT.GRANT.CREATE.SEL_PROJECT' | translate }}</h2>
+
+      <cnsl-search-project-autocomplete class="block" (selectionChanged)="selectProject($event.project, $event.type)">
+      </cnsl-search-project-autocomplete>
+    </ng-container>
+  </ng-container>
+
+  <ng-container *ngIf="currentCreateStep === createSteps">
+    <h1>{{ 'PROJECT.GRANT.CREATE.SEL_ROLES' | translate }}</h1>
+
+    <cnsl-card>
+      {{ $any(project)?.grantId }}
+      <cnsl-project-roles-table
+        [displayedColumns]="['select', 'key', 'displayname', 'group', 'creationDate', 'changeDate']"
+        (changedSelection)="selectRoles($event)"
+        [projectId]="project?.id ? project.id : grantedProject?.projectId ? grantedProject.projectId : ''"
+        [grantId]="$any(grantedProject)?.grantId ? $any(grantedProject)?.grantId : ''"
+      >
+      </cnsl-project-roles-table>
+    </cnsl-card>
+  </ng-container>
+
+  <div class="btn-container">
+    <ng-container *ngIf="currentCreateStep === 1">
+      <button
+        [disabled]="!org || !(project?.id || grantedProject?.projectId) || userIds.length < 1"
+        (click)="next()"
+        color="primary"
+        mat-raised-button
+        class="big-button"
+        cdkFocusInitial
+      >
+        {{ 'ACTIONS.CONTINUE' | translate }}
       </button>
-      <h1 class="abort">{{ 'GRANTS.CREATE.TITLE' | translate }}</h1>
-      <span class="abort-2">Step {{ currentCreateStep }} of {{ STEPS }}</span>
-    </div>
+    </ng-container>
 
-    <div class="user-grant-create-content">
-      <ng-container *ngIf="currentCreateStep === 1">
-        <p class="user-grant-create-desc cnsl-secondary-text">
-          {{ 'PROJECT.GRANT.CREATE.ORG_DESCRIPTION' | translate: org }}
-          <br />
-          {{ 'PROJECT.GRANT.CREATE.ORG_DESCRIPTION_DESC' | translate }}
-        </p>
-
-        <ng-container>
-          <h2>{{ 'PROJECT.GRANT.CREATE.SEL_USER' | translate }}</h2>
-
-          <cnsl-search-user-autocomplete
-            [editState]="context !== UserGrantContext.USER"
-            class="block"
-            [users]="user ? [user] : []"
-            (selectionChanged)="selectUsers($event)"
-            [target]="UserTarget.SELF"
-          >
-          </cnsl-search-user-autocomplete>
-        </ng-container>
-
-        <ng-container *ngIf="context && (context === UserGrantContext.USER || context === UserGrantContext.NONE)">
-          <h2 class="project-search">{{ 'PROJECT.GRANT.CREATE.SEL_PROJECT' | translate }}</h2>
-
-          <cnsl-search-project-autocomplete class="block" (selectionChanged)="selectProject($event.project, $event.type)">
-          </cnsl-search-project-autocomplete>
-        </ng-container>
-      </ng-container>
-
-      <ng-container *ngIf="currentCreateStep === STEPS">
-        <h1>{{ 'PROJECT.GRANT.CREATE.SEL_ROLES' | translate }}</h1>
-
-        <cnsl-card>
-          {{ $any(project)?.grantId }}
-          <cnsl-project-roles-table
-            [displayedColumns]="['select', 'key', 'displayname', 'group', 'creationDate', 'changeDate']"
-            (changedSelection)="selectRoles($event)"
-            [projectId]="project?.id ? project.id : grantedProject?.projectId ? grantedProject.projectId : ''"
-            [grantId]="$any(grantedProject)?.grantId ? $any(grantedProject)?.grantId : ''"
-          >
-          </cnsl-project-roles-table>
-        </cnsl-card>
-      </ng-container>
-
-      <div class="btn-container">
-        <ng-container *ngIf="currentCreateStep === 1">
-          <button
-            [disabled]="!org || !(project?.id || grantedProject?.projectId) || userIds.length < 1"
-            (click)="next()"
-            color="primary"
-            mat-raised-button
-            class="big-button"
-            cdkFocusInitial
-          >
-            {{ 'ACTIONS.CONTINUE' | translate }}
-          </button>
-        </ng-container>
-
-        <ng-container *ngIf="currentCreateStep === STEPS">
-          <button (click)="previous()" mat-stroked-button class="small-button">
-            {{ 'ACTIONS.BACK' | translate }}
-          </button>
-          <button color="primary" (click)="addGrant()" mat-raised-button class="big-button" cdkFocusInitial>
-            {{ 'ACTIONS.SAVE' | translate }}
-          </button>
-        </ng-container>
-      </div>
-    </div>
+    <ng-container *ngIf="currentCreateStep === createSteps">
+      <button (click)="previous()" mat-stroked-button class="small-button">
+        {{ 'ACTIONS.BACK' | translate }}
+      </button>
+      <button color="primary" (click)="addGrant()" mat-raised-button class="big-button" cdkFocusInitial>
+        {{ 'ACTIONS.SAVE' | translate }}
+      </button>
+    </ng-container>
   </div>
-</div>
+</cnsl-create-layout>
diff --git a/console/src/app/pages/user-grant-create/user-grant-create.component.scss b/console/src/app/pages/user-grant-create/user-grant-create.component.scss
index e49012a09..fdbe80243 100644
--- a/console/src/app/pages/user-grant-create/user-grant-create.component.scss
+++ b/console/src/app/pages/user-grant-create/user-grant-create.component.scss
@@ -1,65 +1,44 @@
-.abort-container {
+.user-grant-create-desc {
+  max-width: 500px;
+  font-size: 14px;
+}
+
+.block {
+  display: block;
+}
+
+.btn-container {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  margin-bottom: 2rem;
+  margin-top: 3rem;
 
-  .abort {
-    font-size: 1.2rem;
-    margin-left: 2rem;
-  }
-
-  .abort-2 {
-    font-size: 1.2rem;
-    margin-left: 2rem;
-    white-space: nowrap;
-  }
-}
-
-.user-grant-create-content {
-  padding-left: 4.5rem;
-
-  .user-grant-create-desc {
-    max-width: 500px;
-    font-size: 14px;
-  }
-
-  .block {
+  .small-button {
     display: block;
   }
 
-  .btn-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 3rem;
-
-    .small-button {
-      display: block;
-    }
-
-    .big-button {
-      display: block;
-      padding: 0.5rem 4rem;
-    }
-  }
-
-  .sa-icon {
+  .big-button {
     display: block;
-    width: 32px;
-    margin: 0 0.5rem;
+    padding: 0.5rem 4rem;
+  }
+}
+
+.sa-icon {
+  display: block;
+  width: 32px;
+  margin: 0 0.5rem;
 
-    i {
-      margin: auto;
-    }
+  i {
+    margin: auto;
   }
+}
 
-  h2 {
-    margin-top: 2.5rem;
-    margin-bottom: 1rem;
-    font-size: 2rem;
+h2 {
+  margin-top: 2.5rem;
+  margin-bottom: 1rem;
+  font-size: 2rem;
 
-    &.project-search {
-      margin-bottom: 1.5rem;
-    }
+  &.project-search {
+    margin-bottom: 1.5rem;
   }
 }
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 a2e9e16f4..1ac1fd2cb 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
@@ -29,7 +29,7 @@ export class UserGrantCreateComponent implements OnDestroy {
 
   public rolesList: string[] = [];
 
-  public STEPS: number = 2; // project, roles
+  public createSteps: number = 2;
   public currentCreateStep: number = 1;
 
   public UserGrantContext: any = UserGrantContext;
diff --git a/console/src/app/pages/user-grant-create/user-grant-create.module.ts b/console/src/app/pages/user-grant-create/user-grant-create.module.ts
index 7d02d9636..1ba458143 100644
--- a/console/src/app/pages/user-grant-create/user-grant-create.module.ts
+++ b/console/src/app/pages/user-grant-create/user-grant-create.module.ts
@@ -5,10 +5,11 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatSelectModule } from '@angular/material/select';
 import { TranslateModule } from '@ngx-translate/core';
 import { CardModule } from 'src/app/modules/card/card.module';
+import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
 import { InputModule } from 'src/app/modules/input/input.module';
 import { ProjectRolesTableModule } from 'src/app/modules/project-roles-table/project-roles-table.module';
 import {
-  SearchProjectAutocompleteModule,
+    SearchProjectAutocompleteModule,
 } from 'src/app/modules/search-project-autocomplete/search-project-autocomplete.module';
 import { SearchUserAutocompleteModule } from 'src/app/modules/search-user-autocomplete/search-user-autocomplete.module';
 import { SharedModule } from 'src/app/modules/shared/shared.module';
@@ -23,6 +24,7 @@ import { UserGrantCreateComponent } from './user-grant-create.component';
     CommonModule,
     MatButtonModule,
     MatIconModule,
+    CreateLayoutModule,
     TranslateModule,
     CardModule,
     InputModule,
diff --git a/console/src/app/pages/users/user-create-machine/user-create-machine.component.html b/console/src/app/pages/users/user-create-machine/user-create-machine.component.html
index 1766873bd..46a29181f 100644
--- a/console/src/app/pages/users/user-create-machine/user-create-machine.component.html
+++ b/console/src/app/pages/users/user-create-machine/user-create-machine.component.html
@@ -1,45 +1,47 @@
-<div class="max-width-container">
-  <div class="enlarged-container">
-    <div class="abort-container">
-      <a [routerLink]="[ '/users']" mat-icon-button>
-        <mat-icon>close</mat-icon>
-      </a>
-      <h1 class="abort">{{ 'USER.CREATE.TITLE' | translate }}</h1><span class="abort-2">Step
-        1 of 1</span>
-    </div>
-    <mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
+<cnsl-create-layout
+  title="{{ 'USER.CREATE.TITLE' | translate }}"
+  [createSteps]="1"
+  [currentCreateStep]="1"
+  (closed)="close()"
+>
+  <mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
 
-    <div class="machine-create-main-content">
-      <form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" class="machine-create-form">
-        <div class="machine-create-content">
-          <cnsl-form-field class="formfield">
-            <cnsl-label>{{ 'USER.MACHINE.USERNAME' | translate }}*</cnsl-label>
-            <input cnslInput formControlName="userName" required />
-            <span cnslError *ngIf="userName?.invalid && userName?.errors?.required">
-              {{ 'USER.VALIDATION.REQUIRED' | translate }}
-            </span>
-            <span cnslError *ngIf="userName?.invalid && userName?.errors?.noEmailValidator">
-              {{ 'USER.VALIDATION.NOEMAIL' | translate }}
-            </span>
-          </cnsl-form-field>
-          <cnsl-form-field class="formfield">
-            <cnsl-label>{{ 'USER.MACHINE.NAME' | translate }}*</cnsl-label>
-            <input cnslInput formControlName="name" required />
-            <span cnslError *ngIf="name?.invalid && name?.errors?.required">
-              {{ 'USER.VALIDATION.REQUIRED' | translate }}
-            </span>
-          </cnsl-form-field>
-          <cnsl-form-field class="formfield">
-            <cnsl-label>{{ 'USER.MACHINE.DESCRIPTION' | translate }}</cnsl-label>
-            <input cnslInput formControlName="description" />
-          </cnsl-form-field>
-        </div>
-        <div class="machine-btn-container">
-          <button color="primary" [attr.data-e2e]="'create-button'" [disabled]="userForm.invalid" type="submit"
-            mat-raised-button>{{ 'ACTIONS.CREATE' |
-            translate }}</button>
-        </div>
-      </form>
-    </div>
+  <div class="machine-create-main-content">
+    <form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" class="machine-create-form">
+      <div class="machine-create-content">
+        <cnsl-form-field class="formfield">
+          <cnsl-label>{{ 'USER.MACHINE.USERNAME' | translate }}*</cnsl-label>
+          <input cnslInput formControlName="userName" required />
+          <span cnslError *ngIf="userName?.invalid && userName?.errors?.required">
+            {{ 'USER.VALIDATION.REQUIRED' | translate }}
+          </span>
+          <span cnslError *ngIf="userName?.invalid && userName?.errors?.noEmailValidator">
+            {{ 'USER.VALIDATION.NOEMAIL' | translate }}
+          </span>
+        </cnsl-form-field>
+        <cnsl-form-field class="formfield">
+          <cnsl-label>{{ 'USER.MACHINE.NAME' | translate }}*</cnsl-label>
+          <input cnslInput formControlName="name" required />
+          <span cnslError *ngIf="name?.invalid && name?.errors?.required">
+            {{ 'USER.VALIDATION.REQUIRED' | translate }}
+          </span>
+        </cnsl-form-field>
+        <cnsl-form-field class="formfield">
+          <cnsl-label>{{ 'USER.MACHINE.DESCRIPTION' | translate }}</cnsl-label>
+          <input cnslInput formControlName="description" />
+        </cnsl-form-field>
+      </div>
+      <div class="machine-btn-container">
+        <button
+          color="primary"
+          [attr.data-e2e]="'create-button'"
+          [disabled]="userForm.invalid"
+          type="submit"
+          mat-raised-button
+        >
+          {{ 'ACTIONS.CREATE' | translate }}
+        </button>
+      </div>
+    </form>
   </div>
-</div>
\ No newline at end of file
+</cnsl-create-layout>
diff --git a/console/src/app/pages/users/user-create-machine/user-create-machine.component.scss b/console/src/app/pages/users/user-create-machine/user-create-machine.component.scss
index 60bb0fbcb..9b39299d3 100644
--- a/console/src/app/pages/users/user-create-machine/user-create-machine.component.scss
+++ b/console/src/app/pages/users/user-create-machine/user-create-machine.component.scss
@@ -1,22 +1,4 @@
-.abort-container {
-  display: flex;
-  align-items: center;
-  margin-bottom: 2rem;
-
-  .abort {
-    font-size: 1.2rem;
-    margin-left: 2rem;
-  }
-
-  .abort-2 {
-    font-size: 1.2rem;
-    margin-left: 2rem;
-    white-space: nowrap;
-  }
-}
-
 .machine-create-main-content {
-  padding-left: 4.5rem;
   max-width: 35rem;
 
   .machine-create-form {
diff --git a/console/src/app/pages/users/user-create-machine/user-create-machine.component.ts b/console/src/app/pages/users/user-create-machine/user-create-machine.component.ts
index f14eac765..301364e13 100644
--- a/console/src/app/pages/users/user-create-machine/user-create-machine.component.ts
+++ b/console/src/app/pages/users/user-create-machine/user-create-machine.component.ts
@@ -1,3 +1,4 @@
+import { Location } from '@angular/common';
 import { Component, OnDestroy } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
@@ -24,6 +25,7 @@ export class UserCreateMachineComponent implements OnDestroy {
     private toast: ToastService,
     public userService: ManagementService,
     private fb: FormBuilder,
+    private _location: Location,
     breadcrumbService: BreadcrumbService,
   ) {
     breadcrumbService.setBreadcrumb([
@@ -73,6 +75,10 @@ export class UserCreateMachineComponent implements OnDestroy {
     this.sub.unsubscribe();
   }
 
+  public close(): void {
+    this._location.back();
+  }
+
   public get name(): AbstractControl | null {
     return this.userForm.get('name');
   }
diff --git a/console/src/app/pages/users/user-create-machine/user-create-machine.module.ts b/console/src/app/pages/users/user-create-machine/user-create-machine.module.ts
index bcdfdbba7..38ba2624b 100644
--- a/console/src/app/pages/users/user-create-machine/user-create-machine.module.ts
+++ b/console/src/app/pages/users/user-create-machine/user-create-machine.module.ts
@@ -9,31 +9,31 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
+import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
 import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
 import { InputModule } from 'src/app/modules/input/input.module';
 
 import { UserCreateMachineRoutingModule } from './user-create-machine-routing.module';
 import { UserCreateMachineComponent } from './user-create-machine.component';
 
-
-
 @NgModule({
-    declarations: [UserCreateMachineComponent],
-    imports: [
-        UserCreateMachineRoutingModule,
-        CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MatSelectModule,
-        MatButtonModule,
-        MatIconModule,
-        MatProgressSpinnerModule,
-        MatProgressBarModule,
-        MatCheckboxModule,
-        MatTooltipModule,
-        TranslateModule,
-        DetailLayoutModule,
-        InputModule,
-    ],
+  declarations: [UserCreateMachineComponent],
+  imports: [
+    UserCreateMachineRoutingModule,
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    CreateLayoutModule,
+    MatSelectModule,
+    MatButtonModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    MatProgressBarModule,
+    MatCheckboxModule,
+    MatTooltipModule,
+    TranslateModule,
+    DetailLayoutModule,
+    InputModule,
+  ],
 })
-export class UserCreateMachineModule { }
+export class UserCreateMachineModule {}
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 dd7f23276..7887ef49b 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
@@ -1,167 +1,163 @@
-<div class="max-width-container">
-  <div class="enlarged-container">
-    <div class="abort-container">
-      <a [routerLink]="['/users']" mat-icon-button>
-        <mat-icon>close</mat-icon>
-      </a>
-      <h1 class="abort">{{ 'USER.CREATE.TITLE' | translate }}</h1>
-    </div>
+<cnsl-create-layout
+  title="{{ 'USER.CREATE.TITLE' | translate }}"
+  [createSteps]="1"
+  [currentCreateStep]="1"
+  (closed)="close()"
+>
+  <div class="user-create-main-content">
+    <mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
 
-    <div class="user-create-main-content">
-      <mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
+    <form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" class="user-create-form">
+      <div class="user-create-content">
+        <p class="user-create-section">{{ 'USER.CREATE.NAMEANDEMAILSECTION' | translate }}</p>
 
-      <form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" class="user-create-form">
-        <div class="user-create-content">
-          <p class="user-create-section">{{ 'USER.CREATE.NAMEANDEMAILSECTION' | translate }}</p>
+        <div class="user-create-grid">
+          <cnsl-form-field>
+            <cnsl-label>{{ 'USER.PROFILE.EMAIL' | translate }}*</cnsl-label>
+            <input cnslInput matRipple formControlName="email" required />
+            <span cnslError *ngIf="email?.invalid && !email?.errors?.required">
+              {{ 'USER.VALIDATION.NOTANEMAIL' | translate }}
+            </span>
+            <span cnslError *ngIf="email?.invalid && email?.errors?.required">
+              {{ 'USER.VALIDATION.REQUIRED' | translate }}
+            </span>
+          </cnsl-form-field>
+          <cnsl-form-field>
+            <cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}*</cnsl-label>
+            <input
+              cnslInput
+              formControlName="userName"
+              required
+              [ngStyle]="{ 'padding-right': suffixPadding ? suffixPadding : '10px' }"
+            />
+            <span #suffix *ngIf="envSuffixLabel" cnslSuffix>{{ envSuffixLabel }}</span>
 
-          <div class="user-create-grid">
-            <cnsl-form-field>
-              <cnsl-label>{{ 'USER.PROFILE.EMAIL' | translate }}*</cnsl-label>
-              <input cnslInput matRipple formControlName="email" required />
-              <span cnslError *ngIf="email?.invalid && !email?.errors?.required">
-                {{ 'USER.VALIDATION.NOTANEMAIL' | translate }}
-              </span>
-              <span cnslError *ngIf="email?.invalid && email?.errors?.required">
-                {{ 'USER.VALIDATION.REQUIRED' | translate }}
-              </span>
-            </cnsl-form-field>
-            <cnsl-form-field>
-              <cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}*</cnsl-label>
-              <input
-                cnslInput
-                formControlName="userName"
-                required
-                [ngStyle]="{ 'padding-right': suffixPadding ? suffixPadding : '10px' }"
-              />
-              <span #suffix *ngIf="envSuffixLabel" cnslSuffix>{{ envSuffixLabel }}</span>
-
-              <span cnslError *ngIf="userName?.invalid && userName?.errors?.required">
-                {{ 'USER.VALIDATION.REQUIRED' | translate }}
-              </span>
-              <span cnslError *ngIf="userName?.invalid && userName?.errors?.noEmailValidator">
-                {{ 'USER.VALIDATION.NOEMAIL' | translate }}
-              </span>
-            </cnsl-form-field>
-
-            <cnsl-form-field>
-              <cnsl-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}*</cnsl-label>
-              <input cnslInput formControlName="firstName" required />
-              <span cnslError *ngIf="firstName?.invalid && firstName?.errors?.required">
-                {{ 'USER.VALIDATION.REQUIRED' | translate }}
-              </span>
-            </cnsl-form-field>
-            <cnsl-form-field>
-              <cnsl-label>{{ 'USER.PROFILE.LASTNAME' | translate }}*</cnsl-label>
-              <input cnslInput formControlName="lastName" required />
-              <span cnslError *ngIf="lastName?.invalid && lastName?.errors?.required">
-                {{ 'USER.VALIDATION.REQUIRED' | translate }}
-              </span>
-            </cnsl-form-field>
-            <cnsl-form-field>
-              <cnsl-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</cnsl-label>
-              <input cnslInput formControlName="nickName" />
-              <span cnslError *ngIf="nickName?.invalid && nickName?.errors?.required">
-                {{ 'USER.VALIDATION.REQUIRED' | translate }}
-              </span>
-            </cnsl-form-field>
-          </div>
-
-          <div class="email-is-verified">
-            <mat-checkbox class="block-checkbox" formControlName="isVerified">
-              {{ 'USER.LOGINMETHODS.EMAIL.ISVERIFIED' | translate }}
-            </mat-checkbox>
-            <mat-checkbox class="block-checkbox" [(ngModel)]="usePassword" [ngModelOptions]="{ standalone: true }">
-              {{ 'ORG.PAGES.USEPASSWORD' | translate }}
-            </mat-checkbox>
-            <cnsl-info-section class="full-width desc">
-              <span>{{ 'USER.CREATE.INITMAILDESCRIPTION' | translate }}</span>
-            </cnsl-info-section>
-          </div>
-
-          <div class="pwd-section" *ngIf="usePassword && pwdForm">
-            <cnsl-password-complexity-view class="complexity-view" [policy]="this.policy" [password]="password">
-            </cnsl-password-complexity-view>
-
-            <form [formGroup]="pwdForm">
-              <div class="user-create-grid">
-                <cnsl-form-field *ngIf="password">
-                  <cnsl-label>{{ 'USER.PASSWORD.NEWINITIAL' | translate }}</cnsl-label>
-                  <input cnslInput autocomplete="off" name="firstpassword" formControlName="password" type="password" />
-
-                  <span cnslError *ngIf="password?.errors?.required">
-                    {{ 'USER.VALIDATION.REQUIRED' | translate }}
-                  </span>
-                </cnsl-form-field>
-                <cnsl-form-field *ngIf="confirmPassword">
-                  <cnsl-label>{{ 'USER.PASSWORD.CONFIRMINITIAL' | translate }}</cnsl-label>
-                  <input
-                    cnslInput
-                    autocomplete="off"
-                    name="confirmPassword"
-                    formControlName="confirmPassword"
-                    type="password"
-                  />
-
-                  <span cnslError *ngIf="confirmPassword?.errors?.required">
-                    {{ 'USER.VALIDATION.REQUIRED' | translate }}
-                  </span>
-                  <span cnslError *ngIf="confirmPassword?.errors?.notequal">
-                    {{ 'USER.PASSWORD.NOTEQUAL' | translate }}
-                  </span>
-                </cnsl-form-field>
-              </div>
-            </form>
-          </div>
-
-          <p class="user-create-section">{{ 'USER.CREATE.GENDERLANGSECTION' | translate }}</p>
-
-          <div class="user-create-grid">
-            <cnsl-form-field>
-              <cnsl-label>{{ 'USER.PROFILE.GENDER' | translate }}</cnsl-label>
-              <mat-select formControlName="gender">
-                <mat-option *ngFor="let gender of genders" [value]="gender">
-                  {{ 'GENDERS.' + gender | translate }}
-                </mat-option>
-              </mat-select>
-              <span cnslError *ngIf="gender?.invalid && gender?.errors?.required">
-                {{ 'USER.VALIDATION.REQUIRED' | translate }}
-              </span>
-            </cnsl-form-field>
-            <cnsl-form-field>
-              <cnsl-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</cnsl-label>
-              <mat-select formControlName="preferredLanguage">
-                <mat-option *ngFor="let language of languages" [value]="language">
-                  {{ 'LANGUAGES.' + language | translate }}
-                </mat-option>
-                <span cnslError *ngIf="preferredLanguage?.invalid && preferredLanguage?.errors?.required">
-                  {{ 'USER.VALIDATION.REQUIRED' | translate }}
-                </span>
-              </mat-select>
-            </cnsl-form-field>
-          </div>
-
-          <p class="user-create-section">{{ 'USER.CREATE.ADDRESSANDPHONESECTION' | translate }}</p>
+            <span cnslError *ngIf="userName?.invalid && userName?.errors?.required">
+              {{ 'USER.VALIDATION.REQUIRED' | translate }}
+            </span>
+            <span cnslError *ngIf="userName?.invalid && userName?.errors?.noEmailValidator">
+              {{ 'USER.VALIDATION.NOEMAIL' | translate }}
+            </span>
+          </cnsl-form-field>
 
           <cnsl-form-field>
-            <cnsl-label>{{ 'USER.PROFILE.PHONE' | translate }}</cnsl-label>
-            <input cnslInput formControlName="phone" />
-            <span cnslError *ngIf="phone?.invalid && phone?.errors?.required">
+            <cnsl-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}*</cnsl-label>
+            <input cnslInput formControlName="firstName" required />
+            <span cnslError *ngIf="firstName?.invalid && firstName?.errors?.required">
+              {{ 'USER.VALIDATION.REQUIRED' | translate }}
+            </span>
+          </cnsl-form-field>
+          <cnsl-form-field>
+            <cnsl-label>{{ 'USER.PROFILE.LASTNAME' | translate }}*</cnsl-label>
+            <input cnslInput formControlName="lastName" required />
+            <span cnslError *ngIf="lastName?.invalid && lastName?.errors?.required">
+              {{ 'USER.VALIDATION.REQUIRED' | translate }}
+            </span>
+          </cnsl-form-field>
+          <cnsl-form-field>
+            <cnsl-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</cnsl-label>
+            <input cnslInput formControlName="nickName" />
+            <span cnslError *ngIf="nickName?.invalid && nickName?.errors?.required">
               {{ 'USER.VALIDATION.REQUIRED' | translate }}
             </span>
           </cnsl-form-field>
         </div>
-        <div class="user-create-btn-container">
-          <button
-            [attr.data-e2e]="'create-button'"
-            color="primary"
-            [disabled]="userForm.invalid || (this.usePassword && this.pwdForm.invalid)"
-            type="submit"
-            mat-raised-button
-          >
-            {{ 'ACTIONS.CREATE' | translate }}
-          </button>
+
+        <div class="email-is-verified">
+          <mat-checkbox class="block-checkbox" formControlName="isVerified">
+            {{ 'USER.LOGINMETHODS.EMAIL.ISVERIFIED' | translate }}
+          </mat-checkbox>
+          <mat-checkbox class="block-checkbox" [(ngModel)]="usePassword" [ngModelOptions]="{ standalone: true }">
+            {{ 'ORG.PAGES.USEPASSWORD' | translate }}
+          </mat-checkbox>
+          <cnsl-info-section class="full-width desc">
+            <span>{{ 'USER.CREATE.INITMAILDESCRIPTION' | translate }}</span>
+          </cnsl-info-section>
         </div>
-      </form>
-    </div>
+
+        <div class="pwd-section" *ngIf="usePassword && pwdForm">
+          <cnsl-password-complexity-view class="complexity-view" [policy]="this.policy" [password]="password">
+          </cnsl-password-complexity-view>
+
+          <form [formGroup]="pwdForm">
+            <div class="user-create-grid">
+              <cnsl-form-field *ngIf="password">
+                <cnsl-label>{{ 'USER.PASSWORD.NEWINITIAL' | translate }}</cnsl-label>
+                <input cnslInput autocomplete="off" name="firstpassword" formControlName="password" type="password" />
+
+                <span cnslError *ngIf="password?.errors?.required">
+                  {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                </span>
+              </cnsl-form-field>
+              <cnsl-form-field *ngIf="confirmPassword">
+                <cnsl-label>{{ 'USER.PASSWORD.CONFIRMINITIAL' | translate }}</cnsl-label>
+                <input
+                  cnslInput
+                  autocomplete="off"
+                  name="confirmPassword"
+                  formControlName="confirmPassword"
+                  type="password"
+                />
+
+                <span cnslError *ngIf="confirmPassword?.errors?.required">
+                  {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                </span>
+                <span cnslError *ngIf="confirmPassword?.errors?.notequal">
+                  {{ 'USER.PASSWORD.NOTEQUAL' | translate }}
+                </span>
+              </cnsl-form-field>
+            </div>
+          </form>
+        </div>
+
+        <p class="user-create-section">{{ 'USER.CREATE.GENDERLANGSECTION' | translate }}</p>
+
+        <div class="user-create-grid">
+          <cnsl-form-field>
+            <cnsl-label>{{ 'USER.PROFILE.GENDER' | translate }}</cnsl-label>
+            <mat-select formControlName="gender">
+              <mat-option *ngFor="let gender of genders" [value]="gender">
+                {{ 'GENDERS.' + gender | translate }}
+              </mat-option>
+            </mat-select>
+            <span cnslError *ngIf="gender?.invalid && gender?.errors?.required">
+              {{ 'USER.VALIDATION.REQUIRED' | translate }}
+            </span>
+          </cnsl-form-field>
+          <cnsl-form-field>
+            <cnsl-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</cnsl-label>
+            <mat-select formControlName="preferredLanguage">
+              <mat-option *ngFor="let language of languages" [value]="language">
+                {{ 'LANGUAGES.' + language | translate }}
+              </mat-option>
+              <span cnslError *ngIf="preferredLanguage?.invalid && preferredLanguage?.errors?.required">
+                {{ 'USER.VALIDATION.REQUIRED' | translate }}
+              </span>
+            </mat-select>
+          </cnsl-form-field>
+        </div>
+
+        <p class="user-create-section">{{ 'USER.CREATE.ADDRESSANDPHONESECTION' | translate }}</p>
+
+        <cnsl-form-field>
+          <cnsl-label>{{ 'USER.PROFILE.PHONE' | translate }}</cnsl-label>
+          <input cnslInput formControlName="phone" />
+          <span cnslError *ngIf="phone?.invalid && phone?.errors?.required">
+            {{ 'USER.VALIDATION.REQUIRED' | translate }}
+          </span>
+        </cnsl-form-field>
+      </div>
+      <div class="user-create-btn-container">
+        <button
+          [attr.data-e2e]="'create-button'"
+          color="primary"
+          [disabled]="userForm.invalid || (this.usePassword && this.pwdForm.invalid)"
+          type="submit"
+          mat-raised-button
+        >
+          {{ 'ACTIONS.CREATE' | translate }}
+        </button>
+      </div>
+    </form>
   </div>
-</div>
+</cnsl-create-layout>
diff --git a/console/src/app/pages/users/user-create/user-create.component.scss b/console/src/app/pages/users/user-create/user-create.component.scss
index e3206b2f9..5cbf979da 100644
--- a/console/src/app/pages/users/user-create/user-create.component.scss
+++ b/console/src/app/pages/users/user-create/user-create.component.scss
@@ -1,16 +1,4 @@
-.abort-container {
-  display: flex;
-  align-items: center;
-  margin-bottom: 2rem;
-
-  .abort {
-    font-size: 1.2rem;
-    margin-left: 2rem;
-  }
-}
-
 .user-create-main-content {
-  padding-left: 4.5rem;
   max-width: 35rem;
 
   @media only screen and (max-width: 500px) {
diff --git a/console/src/app/pages/users/user-create/user-create.component.ts b/console/src/app/pages/users/user-create/user-create.component.ts
index 5e5b1d2e2..9137f058f 100644
--- a/console/src/app/pages/users/user-create/user-create.component.ts
+++ b/console/src/app/pages/users/user-create/user-create.component.ts
@@ -1,3 +1,4 @@
+import { Location } from '@angular/common';
 import { ChangeDetectorRef, Component, OnDestroy, ViewChild } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
@@ -63,6 +64,7 @@ export class UserCreateComponent implements OnDestroy {
     private fb: FormBuilder,
     private mgmtService: ManagementService,
     private changeDetRef: ChangeDetectorRef,
+    private _location: Location,
     breadcrumbService: BreadcrumbService,
   ) {
     breadcrumbService.setBreadcrumb([
@@ -94,6 +96,10 @@ export class UserCreateComponent implements OnDestroy {
       });
   }
 
+  public close(): void {
+    this._location.back();
+  }
+
   private async loadOrg(): Promise<void> {
     const domains = await this.mgmtService.listOrgDomains();
     const found = domains.resultList.find((resp) => resp.isPrimary);
diff --git a/console/src/app/pages/users/user-create/user-create.module.ts b/console/src/app/pages/users/user-create/user-create.module.ts
index 4af4988cd..45fcd57b8 100644
--- a/console/src/app/pages/users/user-create/user-create.module.ts
+++ b/console/src/app/pages/users/user-create/user-create.module.ts
@@ -10,6 +10,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
+import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
 import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
 import { InfoSectionModule } from 'src/app/modules/info-section/info-section.module';
 import { InputModule } from 'src/app/modules/input/input.module';
@@ -26,6 +27,7 @@ import { UserCreateComponent } from './user-create.component';
     FormsModule,
     ReactiveFormsModule,
     MatSelectModule,
+    CreateLayoutModule,
     MatButtonModule,
     MatIconModule,
     MatProgressSpinnerModule,
diff --git a/console/src/assets/i18n/de.json b/console/src/assets/i18n/de.json
index eab5c5467..81a5e17d7 100644
--- a/console/src/assets/i18n/de.json
+++ b/console/src/assets/i18n/de.json
@@ -95,6 +95,7 @@
     "CANCEL": "Abbrechen",
     "INFO": "Info",
     "OK": "OK",
+    "SELECT": "Auswählen",
     "VIEW": "Öffnen",
     "SELECTIONDELETE": "Ausgewählte löschen",
     "DELETE": "Löschen",
@@ -118,6 +119,7 @@
     "PREVIOUS": "Zurück",
     "NEXT": "Weiter",
     "MORE": "mehr",
+    "STEP": "Schritt",
     "TABLE": {
       "SHOWUSER": "Zeige Benutzer {{value}}"
     }
@@ -1525,6 +1527,7 @@
     "COMPLIANCE": "OIDC Einhaltung",
     "URLS": "Urls",
     "CONFIGURATION": "Konfiguration",
+    "TOKEN": "Token Einstellungen",
     "PAGES": {
       "TITLE": "Anwendung",
       "ID": "ID",
@@ -1717,8 +1720,8 @@
     "TOAST": {
       "REACTIVATED": "Anwendung reaktiviert.",
       "DEACTIVATED": "Anwendung deaktiviert.",
-      "OIDCUPDATED": "OIDC-Konfiguration geändert.",
-      "APIUPDATED": "API Konfiguration geändert.",
+      "OIDCUPDATED": "App gespeichert",
+      "APIUPDATED": "App gespeichert",
       "UPDATED": "App geändert.",
       "CREATED": "App erstellt.",
       "CLIENTSECRETREGENERATED": "Client Secret generiert.",
diff --git a/console/src/assets/i18n/en.json b/console/src/assets/i18n/en.json
index 534dfdc7a..4bf390738 100644
--- a/console/src/assets/i18n/en.json
+++ b/console/src/assets/i18n/en.json
@@ -95,6 +95,7 @@
     "CANCEL": "Cancel",
     "INFO": "Info",
     "OK": "OK",
+    "SELECT": "Select",
     "VIEW": "Show",
     "SELECTIONDELETE": "Delete selection",
     "DELETE": "Delete",
@@ -118,6 +119,7 @@
     "PREVIOUS": "Previous",
     "NEXT": "Next",
     "MORE": "more",
+    "STEP": "Step",
     "TABLE": {
       "SHOWUSER": "Show user {{value}}"
     }
@@ -1525,6 +1527,7 @@
     "COMPLIANCE": "OIDC Compliance",
     "URLS": "Urls",
     "CONFIGURATION": "Configuration",
+    "TOKEN": "Token Settings",
     "PAGES": {
       "TITLE": "Application",
       "ID": "ID",
@@ -1717,8 +1720,8 @@
     "TOAST": {
       "REACTIVATED": "Application reactivated.",
       "DEACTIVATED": "Application deactivated.",
-      "OIDCUPDATED": "OIDC configuration updated.",
-      "APIUPDATED": "API configuration updated",
+      "OIDCUPDATED": "App updated.",
+      "APIUPDATED": "App updated",
       "UPDATED": "App updated.",
       "CREATED": "App created.",
       "CLIENTSECRETREGENERATED": "client secret generated.",
diff --git a/console/src/assets/i18n/it.json b/console/src/assets/i18n/it.json
index 8f286c345..b114a84bd 100644
--- a/console/src/assets/i18n/it.json
+++ b/console/src/assets/i18n/it.json
@@ -95,6 +95,7 @@
     "CANCEL": "cancella",
     "INFO": "Info",
     "OK": "OK",
+    "SELECT": "Seleziona",
     "VIEW": "Mostra",
     "SELECTIONDELETE": "Elimina selezione",
     "DELETE": "Elimina",
@@ -118,6 +119,7 @@
     "PREVIOUS": "Precedente",
     "NEXT": "Avanti",
     "MORE": "azioni",
+    "STEP": "Passo",
     "TABLE": {
       "SHOWUSER": "Mostra utente {{value}}"
     }
@@ -1525,6 +1527,7 @@
     "COMPLIANCE": "Conformità con OIDC",
     "URLS": "Urls",
     "CONFIGURATION": "Configurazione",
+    "TOKEN": "Impostazioni Token",
     "PAGES": {
       "TITLE": "Applicazione",
       "ID": "ID",
@@ -1717,8 +1720,8 @@
     "TOAST": {
       "REACTIVATED": "Applicazione riattivata.",
       "DEACTIVATED": "Applicazione disattivata.",
-      "OIDCUPDATED": "Configurazione OIDC aggiornata.",
-      "APIUPDATED": "Configurazione API aggiornata",
+      "OIDCUPDATED": "Applicazione aggiornata",
+      "APIUPDATED": "Applicazione aggiornata",
       "UPDATED": "App aggiornata.",
       "CREATED": "App creata.",
       "CLIENTSECRETREGENERATED": "Client secret generato.",