diff --git a/docs/docs/user/projects/models/create.md b/docs/docs/user/projects/models/create.md
index e22951323..d550c5743 100644
--- a/docs/docs/user/projects/models/create.md
+++ b/docs/docs/user/projects/models/create.md
@@ -99,12 +99,7 @@ the TeamForCapella instance and the TeamForCapella repository. With `project`,
 you can specify the name of the model in Capella. We recommend using the same
 name for the repository and project.
 
-## Step 4: Choose Initialisation
-
-Please choose `Create empty model`. This has no effect on the existing
-TeamForCapella content. More options will follow in the future.
-
-## Step 5: Metadata
+## Step 4: Metadata
 
 This is an important step. Here, you can select the version and the model
 nature of your tool. If you don't select any version, the functionality will be
diff --git a/frontend/src/app/projects/create-project/create-project.component.html b/frontend/src/app/projects/create-project/create-project.component.html
index ef1056727..35c7f6466 100644
--- a/frontend/src/app/projects/create-project/create-project.component.html
+++ b/frontend/src/app/projects/create-project/create-project.component.html
@@ -3,14 +3,22 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<div class="wrapper">
-  <mat-horizontal-stepper linear #stepper>
-    <mat-step completed="false" label="General information">
-      <div class="flex-center">
-        <mat-card class="section-card">
+<div class="wrapper flex justify-center">
+  <mat-horizontal-stepper
+    class="flex max-w-[360px] rounded-md shadow-md sm:max-w-[710px]"
+    linear
+    #stepper
+  >
+    <mat-step completed="false">
+      <ng-template matStepLabel>
+        <div class="hidden sm:inline">Create new project</div>
+      </ng-template>
+      <h3 class="flex justify-center sm:hidden">Create new project</h3>
+      <div class="flex justify-center">
+        <mat-card class="w-[350px] sm:min-w-[420px]">
           <form [formGroup]="form">
-            <fieldset>
-              <mat-form-field appearance="fill">
+            <div>
+              <mat-form-field appearance="fill" class="form-field-default">
                 <mat-label>Name</mat-label>
                 <input
                   matInput
@@ -26,9 +34,9 @@
                   A project name is required.
                 </mat-error>
               </mat-form-field>
-            </fieldset>
-            <fieldset>
-              <mat-form-field appearance="fill">
+            </div>
+            <div>
+              <mat-form-field appearance="fill" class="form-field-default">
                 <mat-label>Description</mat-label>
                 <textarea
                   matInput
@@ -36,67 +44,65 @@
                   data-testId="textarea-description"
                 ></textarea>
               </mat-form-field>
-            </fieldset>
+            </div>
             <fieldset>
-              <fieldset>
-                <div class="flex flex-col">
-                  <h3>Project visibility</h3>
-                  <mat-radio-group
-                    formControlName="visibility"
-                    class="flex flex-col"
+              <div class="flex flex-col">
+                <legend>Project visibility</legend>
+                <mat-radio-group
+                  formControlName="visibility"
+                  class="flex flex-col"
+                >
+                  <mat-radio-button
+                    *ngFor="
+                      let visibility of projectService.getAvailableVisibilities()
+                    "
+                    [value]="visibility"
                   >
-                    <mat-radio-button
-                      *ngFor="
-                        let visibility of projectService.getAvailableVisibilities()
-                      "
-                      [value]="visibility"
-                    >
-                      {{
-                        projectService.getProjectVisibilityDescription(
-                          visibility
-                        )
-                      }}
-                    </mat-radio-button>
-                  </mat-radio-group>
-                </div>
-              </fieldset>
+                    {{
+                      projectService.getProjectVisibilityDescription(visibility)
+                    }}
+                  </mat-radio-button>
+                </mat-radio-group>
+              </div>
             </fieldset>
-            <div class="flex justify-between">
-              <a
-                routerLink="/projects"
-                mat-button
-                matStepperPrevious
-                data-testId="a-cancel"
-              >
-                <mat-icon class="mat-icon-position left">arrow_back</mat-icon
-                >Cancel</a
-              >
-              <button
-                mat-flat-button
-                color="primary"
-                [disabled]="!form.valid"
-                (click)="createProject(stepper)"
-                data-testId="button-create-project"
-              >
-                Create project
-                <mat-icon class="mat-icon-position right"
-                  >arrow_forward</mat-icon
+            <div></div>
+            <div class="mt-[10px] flex justify-between">
+              <div></div>
+              <div>
+                <button
+                  mat-flat-button
+                  color="primary"
+                  [disabled]="!form.valid"
+                  (click)="createProject(stepper)"
+                  data-testId="button-create-project"
                 >
-              </button>
+                  Create project
+                  <mat-icon class="mat-icon-position right"
+                    >navigate_next</mat-icon
+                  >
+                </button>
+              </div>
             </div>
           </form>
         </mat-card>
       </div>
     </mat-step>
 
-    <mat-step label="Add team members">
-      <div *ngIf="projectService.project$ | async" class="flex-center">
-        <div>
-          <app-project-user-settings></app-project-user-settings>
-          <mat-card>
-            <div class="flex justify-between">
-              <button
-                mat-flat-button
+    <mat-step>
+      <ng-template matStepLabel>
+        <div class="hidden sm:inline">(Optional) Add team members</div>
+      </ng-template>
+      <h3 class="flex justify-center sm:hidden">(Optional) Add team members</h3>
+      <div *ngIf="projectService.project$ | async" class="flex justify-center">
+        <app-project-user-settings></app-project-user-settings>
+      </div>
+      <div *ngIf="projectService.project$ | async">
+        <div class="flex justify-between">
+          <div></div>
+          <div>
+            <div class="flex w-[312px] justify-end sm:w-[420px]">
+              <a
+                mat-button
                 color="primary"
                 (click)="stepper.next()"
                 data-testId="button-skipAddMembers"
@@ -106,28 +112,41 @@ <h3>Project visibility</h3>
                     projectUserService.nonAdminProjectUsers$ | async as users
                   "
                 >
-                  {{ !users || users.length === 0 ? "skip" : "continue" }}
+                  {{
+                    !users || users.length === 0 ? "Skip for now" : "Continue"
+                  }}
                 </ng-container>
                 <mat-icon class="mat-icon-position right"
-                  >arrow_forward</mat-icon
+                  >navigate_next</mat-icon
                 >
-              </button>
+              </a>
             </div>
-          </mat-card>
+          </div>
+          <div></div>
         </div>
       </div>
     </mat-step>
-    <mat-step label="Add models">
-      <app-create-model
-        (currentStep)="modelCreationStep = $event"
-        [redirectAfterCompletion]="false"
-        #model_creator
-      ></app-create-model>
-      <div class="flex-center">
-        <mat-card class="section-card">
-          <div class="flex-center">
+
+    <mat-step>
+      <ng-template matStepLabel>
+        <div class="hidden sm:inline">(Optional) Add model</div>
+      </ng-template>
+      <h3 class="flex justify-center pb-[5px] sm:hidden sm:pb-0">
+        (Optional) Add model
+      </h3>
+      <div class="flex justify-center">
+        <app-create-model
+          (currentStep)="modelCreationStep = $event"
+          [redirectAfterCompletion]="false"
+          #model_creator
+        ></app-create-model>
+      </div>
+      <div class="flex justify-between">
+        <div class="flex"></div>
+        <div class="flex">
+          <div class="mt-[-23px] flex w-[295px] justify-end sm:w-[420px]">
             <a
-              mat-flat-button
+              mat-button
               [routerLink]="[
                 '/project',
                 (projectService.project$ | async)?.slug
@@ -136,7 +155,7 @@ <h3>Project visibility</h3>
               data-testId="a-skipModelAndFinishProjectCreation"
             >
               <span *ngIf="modelCreationStep === 'create-model'">
-                Skip model creation and finish project creation
+                Abort model creation and finish
               </span>
               <span
                 *ngIf="
@@ -144,7 +163,7 @@ <h3>Project visibility</h3>
                   modelCreationStep !== 'complete'
                 "
               >
-                Abort model initialization and finish project creation
+                Abort model creation and finish
               </span>
               <span *ngIf="modelCreationStep === 'complete'">
                 Finish project creation
@@ -152,7 +171,8 @@ <h3>Project visibility</h3>
               <mat-icon class="mat-icon-position right">check</mat-icon>
             </a>
           </div>
-        </mat-card>
+        </div>
+        <div class="flex"></div>
       </div>
     </mat-step>
   </mat-horizontal-stepper>
diff --git a/frontend/src/app/projects/create-project/create-project.component.spec.ts b/frontend/src/app/projects/create-project/create-project.component.spec.ts
index 6cc9964b3..83b95974a 100644
--- a/frontend/src/app/projects/create-project/create-project.component.spec.ts
+++ b/frontend/src/app/projects/create-project/create-project.component.spec.ts
@@ -29,6 +29,7 @@ import {
 } from 'src/../tests/spec-helper/element.spec-helper';
 
 import { ToastService } from '../../helpers/toast/toast.service';
+import { ProjectUserService } from '../project-detail/project-users/service/project-user.service';
 import {
   PatchProject,
   Project,
@@ -36,7 +37,6 @@ import {
   ProjectVisibility,
 } from '../service/project.service';
 import { CreateProjectComponent } from './create-project.component';
-import { ProjectUserService } from '../project-detail/project-users/service/project-user.service';
 
 const mockProjects: Project[] = [
   {
@@ -237,15 +237,6 @@ describe('CreateProjectComponent', () => {
     expect(appCreateModelComponent).toBeTruthy();
   });
 
-  it('renders routerLink to /projects', () => {
-    const cancelEl: HTMLElement = findElByTestId(
-      fixture,
-      'a-cancel',
-    ).nativeElement;
-
-    expect(cancelEl.getAttribute('href')).toEqual('/projects');
-  });
-
   it('gets redirected to project/:projectName after clicking on finish', () => {
     setFieldValue(fixture, 'input-name', testProjectName);
     click(fixture, 'button-create-project');
diff --git a/frontend/src/app/projects/create-project/create-project.component.ts b/frontend/src/app/projects/create-project/create-project.component.ts
index 0d29fdd1a..deb20f02c 100644
--- a/frontend/src/app/projects/create-project/create-project.component.ts
+++ b/frontend/src/app/projects/create-project/create-project.component.ts
@@ -69,7 +69,6 @@ export class CreateProjectComponent implements OnInit, OnDestroy {
 
   getColorByModelCreationStep(): string {
     switch (this.modelCreationStep) {
-      case 'create-model':
       case 'complete':
         return 'primary';
       default:
diff --git a/frontend/src/app/projects/models/create-model-base/create-model-base.component.html b/frontend/src/app/projects/models/create-model-base/create-model-base.component.html
index f4a0b889d..8ef9895c1 100644
--- a/frontend/src/app/projects/models/create-model-base/create-model-base.component.html
+++ b/frontend/src/app/projects/models/create-model-base/create-model-base.component.html
@@ -3,11 +3,14 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<div class="flex-center">
-  <mat-card *ngIf="projectService.project$ | async">
+<div class="flex justify-center">
+  <mat-card
+    class="w-[350px] md:min-w-[420px]"
+    *ngIf="projectService.project$ | async"
+  >
     <form [formGroup]="form" (ngSubmit)="onSubmit()">
-      <fieldset class="flex flex-wrap">
-        <mat-form-field appearance="fill">
+      <div class="m-0 flex w-auto items-center px-0">
+        <mat-form-field class="w-full" appearance="fill">
           <mat-label>Model name</mat-label>
           <input matInput formControlName="name" />
           <mat-error *ngIf="form.controls.name.errors?.required">
@@ -19,15 +22,15 @@
             }}” already exists.
           </mat-error>
         </mat-form-field>
-      </fieldset>
-      <fieldset>
-        <mat-form-field appearance="fill">
+      </div>
+      <div class="m-0 flex w-auto items-center px-0">
+        <mat-form-field class="w-full" appearance="fill">
           <mat-label>Model description</mat-label>
           <textarea rows="3" matInput formControlName="description"> </textarea>
         </mat-form-field>
-      </fieldset>
-      <fieldset>
-        <mat-form-field appearance="fill">
+      </div>
+      <div class="m-0 flex w-auto items-center px-0">
+        <mat-form-field class="w-full" appearance="fill">
           <mat-label>Model tool</mat-label>
           <mat-select matInput formControlName="toolID">
             <mat-option
@@ -44,8 +47,8 @@
             Please select a valid tool.
           </mat-error>
         </mat-form-field>
-      </fieldset>
-      <div class="flex justify-between">
+      </div>
+      <div class="flex justify-end">
         <button
           mat-raised-button
           color="primary"
@@ -53,7 +56,7 @@
           [disabled]="!form.valid"
         >
           Create model
-          <mat-icon class="mat-icon-position right">arrow_forward</mat-icon>
+          <mat-icon class="mat-icon-position right">navigate_next</mat-icon>
         </button>
       </div>
     </form>
diff --git a/frontend/src/app/projects/models/create-model/create-model.component.html b/frontend/src/app/projects/models/create-model/create-model.component.html
index a73a67a49..30f9a24c8 100644
--- a/frontend/src/app/projects/models/create-model/create-model.component.html
+++ b/frontend/src/app/projects/models/create-model/create-model.component.html
@@ -3,56 +3,74 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<div class="wrapper">
+<div class="wrapper flex justify-center">
   <mat-horizontal-stepper
+    class="flex max-w-[360px] sm:max-w-[710px]"
+    [ngClass]="hasRoute('models/create') ? 'rounded-md shadow-md' : ''"
     (selectionChange)="onStepChange($event)"
     linear
     #stepper
   >
-    <mat-step completed="false" label="Create model">
-      <app-create-model-base
-        [asStepper]="asStepper"
-        (create)="afterModelCreated()"
-      ></app-create-model-base>
-    </mat-step>
-
-    <mat-step completed="false" label="Choose primary source">
-      <app-choose-source
-        (modelSourceSelection)="onSourceClick($event)"
-      ></app-choose-source>
-    </mat-step>
-
-    <mat-step label="Add source">
-      <div [ngSwitch]="source">
-        <app-manage-git-model
-          *ngSwitchCase="'git-add'"
-          [asStepper]="true"
-          (create)="afterSourceCreated($event)"
-        ></app-manage-git-model>
-        <app-manage-t4c-model
-          *ngSwitchCase="'t4c-existing'"
-          [asStepper]="true"
-          (create)="afterSourceCreated($event)"
-        ></app-manage-t4c-model>
-        <app-create-t4c-model-new-repository
-          *ngSwitchCase="'t4c-new'"
-          [asStepper]="true"
-          (create)="afterSourceCreated($event)"
-        ></app-create-t4c-model-new-repository>
-      </div>
-    </mat-step>
-
-    <mat-step label="Choose initialization">
-      <app-choose-init
-        (modelInitSelection)="onInitClick($event)"
-      ></app-choose-init>
-    </mat-step>
-
-    <mat-step label="Metadata">
-      <app-init-model
-        [asStepper]="asStepper"
-        (create)="afterModelInitialized($event)"
-      ></app-init-model>
-    </mat-step>
+    <div class="flex justify-center">
+      <mat-step completed="false">
+        <ng-template matStepLabel>
+          <div class="hidden sm:inline">Create model</div>
+        </ng-template>
+        <h3 class="flex justify-center sm:hidden">Create model</h3>
+
+        <app-create-model-base
+          [asStepper]="asStepper"
+          (create)="afterModelCreated()"
+        ></app-create-model-base>
+      </mat-step>
+
+      <mat-step completed="false">
+        <ng-template matStepLabel>
+          <div class="hidden sm:inline">Choose source</div>
+        </ng-template>
+        <h3 class="flex justify-center sm:hidden">Choose source</h3>
+
+        <app-choose-source
+          (modelSourceSelection)="onSourceClick($event)"
+        ></app-choose-source>
+      </mat-step>
+
+      <mat-step>
+        <ng-template matStepLabel>
+          <div class="hidden sm:inline">Link source</div>
+        </ng-template>
+        <h3 class="flex justify-center sm:hidden">Link source</h3>
+
+        <div [ngSwitch]="source">
+          <app-manage-git-model
+            *ngSwitchCase="'git-add'"
+            [asStepper]="true"
+            (create)="afterSourceCreated($event)"
+          ></app-manage-git-model>
+          <app-manage-t4c-model
+            *ngSwitchCase="'t4c-existing'"
+            [asStepper]="true"
+            (create)="afterSourceCreated($event)"
+          ></app-manage-t4c-model>
+          <app-create-t4c-model-new-repository
+            *ngSwitchCase="'t4c-new'"
+            [asStepper]="true"
+            (create)="afterSourceCreated($event)"
+          ></app-create-t4c-model-new-repository>
+        </div>
+      </mat-step>
+
+      <mat-step>
+        <ng-template matStepLabel>
+          <div class="hidden sm:inline">Configure model</div>
+        </ng-template>
+        <h3 class="flex justify-center sm:hidden">Configure model</h3>
+
+        <app-init-model
+          [asStepper]="asStepper"
+          (create)="afterModelInitialized($event)"
+        ></app-init-model>
+      </mat-step>
+    </div>
   </mat-horizontal-stepper>
 </div>
diff --git a/frontend/src/app/projects/models/create-model/create-model.component.ts b/frontend/src/app/projects/models/create-model/create-model.component.ts
index 55e006af5..cca3f048e 100644
--- a/frontend/src/app/projects/models/create-model/create-model.component.ts
+++ b/frontend/src/app/projects/models/create-model/create-model.component.ts
@@ -103,6 +103,10 @@ export class CreateModelComponent implements OnInit {
       this.stepper.previous();
     }
   }
+
+  hasRoute(route: string) {
+    return this.router.url.includes(route);
+  }
 }
 
 export type CreateModelStep =
diff --git a/frontend/src/app/projects/models/init-model/init-model.component.html b/frontend/src/app/projects/models/init-model/init-model.component.html
index a69c095ef..d27a325c5 100644
--- a/frontend/src/app/projects/models/init-model/init-model.component.html
+++ b/frontend/src/app/projects/models/init-model/init-model.component.html
@@ -3,59 +3,53 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<div class="wrapper flex-center flex">
-  <mat-card *ngIf="modelService.model$ | async">
+<div class="wrapper flex justify-center">
+  <mat-card
+    class="w-[350px] sm:min-w-[420px]"
+    *ngIf="modelService.model$ | async"
+  >
     <form [formGroup]="form">
-      <fieldset class="flex flex-wrap gap-2">
-        <mat-form-field appearance="fill">
-          <mat-label>Modelling tool</mat-label>
-          <input
-            matInput
-            [value]="(modelService.model$ | async)!.tool.name"
-            disabled
-          />
-        </mat-form-field>
-        <mat-form-field appearance="fill">
-          <mat-label>Version</mat-label>
-          <mat-select formControlName="version" id="version-selector">
-            <mat-option
-              *ngFor="let version of this.toolVersions"
-              [value]="version.id"
-            >
-              {{ version.name }}
-              <span *ngIf="version.is_recommended"> (recommended)</span>
-              <span *ngIf="version.is_deprecated"> (deprecated)</span>
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-      </fieldset>
-      <fieldset>
-        <mat-form-field appearance="fill">
-          <mat-label>Model nature</mat-label>
-          <mat-select formControlName="nature">
-            <mat-option
-              *ngFor="let nature of this.toolNatures"
-              [value]="nature.id"
-            >
-              {{ nature.name }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-      </fieldset>
+      <mat-form-field class="w-full" appearance="fill">
+        <mat-label>Modelling tool</mat-label>
+        <input
+          matInput
+          [value]="(modelService.model$ | async)!.tool.name"
+          disabled
+        />
+      </mat-form-field>
+      <mat-form-field class="w-full" appearance="fill">
+        <mat-label>Version</mat-label>
+        <mat-select formControlName="version" id="version-selector">
+          <mat-option
+            *ngFor="let version of this.toolVersions"
+            [value]="version.id"
+          >
+            {{ version.name }}
+            <span *ngIf="version.is_recommended"> (recommended)</span>
+            <span *ngIf="version.is_deprecated"> (deprecated)</span>
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+      <mat-form-field class="w-full" appearance="fill">
+        <mat-label>Model nature</mat-label>
+        <mat-select formControlName="nature">
+          <mat-option
+            *ngFor="let nature of this.toolNatures"
+            [value]="nature.id"
+          >
+            {{ nature.name }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
     </form>
-    <div class="flex justify-between">
-      <button mat-button (click)="create.emit({ created: false })">
-        <mat-icon class="mat-icon-position left">arrow_back</mat-icon>
-        Choose initialization
-      </button>
+    <div class="flex justify-end">
       <button
         mat-raised-button
         color="primary"
         [disabled]="!form.valid || buttonDisabled"
         (click)="onSubmit()"
       >
-        Finish
-        <mat-icon class="mat-icon-position right">arrow_forward</mat-icon>
+        Save model
       </button>
     </div>
   </mat-card>
diff --git a/frontend/src/app/projects/models/model-source/choose-source.component.html b/frontend/src/app/projects/models/model-source/choose-source.component.html
index 5cb741c8b..b4773d349 100644
--- a/frontend/src/app/projects/models/model-source/choose-source.component.html
+++ b/frontend/src/app/projects/models/model-source/choose-source.component.html
@@ -2,48 +2,57 @@
  ~ SPDX-FileCopyrightText: Copyright DB Netz AG and the capella-collab-manager contributors
  ~ SPDX-License-Identifier: Apache-2.0
  -->
+<!-- New -->
 
-<div *ngIf="(projectService.project$ | async) && (modelService.model$ | async)">
-  <h2 class="title text-center">Git sources</h2>
-  <div class="flex flex-wrap justify-center">
-    <a (click)="modelSourceSelection.emit('git-add')">
-      <mat-card class="option-card">
-        <p>Use existing repository</p>
-        <app-mat-icon size="50px">link</app-mat-icon>
-      </mat-card>
-    </a>
-  </div>
-
-  <div
-    *ngIf="
-      (modelService.model$ | async)!.tool?.integrations?.t4c &&
-      userService.user?.role === 'administrator'
-    "
+<div class="flex justify-center">
+  <mat-card
+    class="w-[350px] sm:min-w-[420px]"
+    *ngIf="projectService.project$ | async"
   >
-    <h2 class="title text-center">Team4Capella sources</h2>
-    <div class="flex flex-wrap justify-center">
-      <a (click)="modelSourceSelection.emit('t4c-existing')">
-        <mat-card class="option-card">
-          <p>Use existing repository</p>
-          <app-mat-icon size="50px">link</app-mat-icon>
-        </mat-card>
-      </a>
-      <a (click)="modelSourceSelection.emit('t4c-new')">
-        <mat-card class="option-card">
-          <p>Create new repository</p>
-          <app-mat-icon size="50px">add_circle_outline</app-mat-icon>
-        </mat-card>
-      </a>
-    </div>
-  </div>
+    <div
+      *ngIf="(projectService.project$ | async) && (modelService.model$ | async)"
+    >
+      <div>
+        <h3>Git sources</h3>
+        <mat-divider></mat-divider>
+        <div class="my-[10px]">
+          <a mat-button (click)="modelSourceSelection.emit('git-add')">
+            <span> Use existing repository </span>
+            <mat-icon class="mat-icon-position right">navigate_next</mat-icon>
+          </a>
+        </div>
+      </div>
 
-  <h2 class="title text-center">Other</h2>
-  <div class="flex flex-wrap justify-center">
-    <a (click)="modelSourceSelection.emit('skip')">
-      <mat-card class="option-card">
-        <p>Skip this step</p>
-        <app-mat-icon size="50px">skip_next</app-mat-icon>
-      </mat-card>
-    </a>
-  </div>
+      <div
+        *ngIf="
+          (modelService.model$ | async)!.tool?.integrations?.t4c &&
+          userService.user?.role === 'administrator'
+        "
+      >
+        <h3>Team4Capella sources</h3>
+        <mat-divider></mat-divider>
+        <div class="my-[10px]">
+          <a mat-button (click)="modelSourceSelection.emit('t4c-existing')">
+            <span> Use existing repository </span>
+            <mat-icon class="mat-icon-position right">navigate_next</mat-icon>
+          </a>
+        </div>
+        <div class="my-[10px]">
+          <a mat-button (click)="modelSourceSelection.emit('t4c-new')">
+            <span> Create new repository </span>
+            <mat-icon class="mat-icon-position right">navigate_next</mat-icon>
+          </a>
+        </div>
+      </div>
+
+      <h3>Other</h3>
+      <mat-divider></mat-divider>
+      <div class="my-[10px]">
+        <a mat-button (click)="modelSourceSelection.emit('skip')">
+          <span> Add model source later </span>
+          <mat-icon class="mat-icon-position right">navigate_next</mat-icon>
+        </a>
+      </div>
+    </div>
+  </mat-card>
 </div>
diff --git a/frontend/src/app/projects/models/model-source/git/manage-git-model/manage-git-model.component.html b/frontend/src/app/projects/models/model-source/git/manage-git-model/manage-git-model.component.html
index 881137ed4..a547185c2 100644
--- a/frontend/src/app/projects/models/model-source/git/manage-git-model/manage-git-model.component.html
+++ b/frontend/src/app/projects/models/model-source/git/manage-git-model/manage-git-model.component.html
@@ -3,11 +3,14 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<div *ngIf="(projectService.project$ | async) && (modelService.model$ | async)">
-  <mat-card class="w-fit">
+<div
+  class="flex justify-center"
+  *ngIf="(projectService.project$ | async) && (modelService.model$ | async)"
+>
+  <mat-card class="w-[350px] sm:min-w-[420px]">
     <form [formGroup]="form">
       <div formGroupName="urls">
-        <fieldset *ngIf="availableGitInstances?.length">
+        <div *ngIf="availableGitInstances?.length">
           <mat-form-field appearance="fill">
             <mat-label>Base integration URL</mat-label>
             <mat-select
@@ -26,9 +29,9 @@
               A base integration URL is required
             </mat-error>
           </mat-form-field>
-        </fieldset>
-        <fieldset>
-          <mat-form-field appearance="fill">
+        </div>
+        <div>
+          <mat-form-field class="w-full" appearance="fill">
             <mat-label
               >Absolute URL
               {{
@@ -48,7 +51,7 @@
               {{ urls.inputUrl.errors?.urlSchemeError }}
             </mat-error>
           </mat-form-field>
-        </fieldset>
+        </div>
         <div>
           <mat-card>
             <mat-card-subtitle>Resulting URL*</mat-card-subtitle>
@@ -75,22 +78,22 @@
         </div>
       </div>
       <div formGroupName="credentials">
-        <fieldset class="flex flex-wrap gap-2">
-          <mat-form-field appearance="fill">
+        <div class="flex flex-wrap justify-between">
+          <mat-form-field class="w-full" appearance="fill">
             <mat-label>Git username</mat-label>
             <input matInput formControlName="username" />
           </mat-form-field>
-          <mat-form-field appearance="fill">
+          <mat-form-field class="w-full" appearance="fill">
             <mat-label>Git password or token</mat-label>
             <input matInput formControlName="password" type="password" />
             <mat-hint *ngIf="isEditMode">
               If empty password gets not updated
             </mat-hint>
           </mat-form-field>
-        </fieldset>
+        </div>
       </div>
-      <fieldset>
-        <mat-form-field appearance="fill">
+      <div>
+        <mat-form-field class="w-full" appearance="fill">
           <mat-label>Branch, tag or revision</mat-label>
           <input
             (ngModelChange)="filteredRevisionsByPrefix($event)"
@@ -129,9 +132,9 @@
             </mat-option>
           </mat-optgroup>
         </mat-autocomplete>
-      </fieldset>
-      <fieldset>
-        <mat-form-field appearance="fill">
+      </div>
+      <div>
+        <mat-form-field class="w-full" appearance="fill">
           <mat-label>Entry point</mat-label>
           <input type="text" matInput formControlName="entrypoint" />
           <mat-error *ngIf="form.controls.entrypoint.errors?.required">
@@ -141,33 +144,31 @@
             Entrypoint must end with ".aird" in case of a capella model
           </mat-error>
         </mat-form-field>
-      </fieldset>
-      <fieldset class="mb-5" *ngIf="!asStepper && isEditMode">
+      </div>
+      <div class="mb-5" *ngIf="!asStepper && isEditMode">
         <mat-slide-toggle formControlName="primary">
           Primary Git repository</mat-slide-toggle
         >
-      </fieldset>
-    </form>
-    <div *ngIf="asStepper; else notFromStepper" class="flex justify-between">
-      <button
-        mat-raised-button
-        color="primary"
-        [disabled]="!form.valid"
-        type="submit"
-        (click)="onCreateSubmit()"
-      >
-        Add source
-        <mat-icon class="mat-icon-position">arrow_forward</mat-icon>
-      </button>
-    </div>
-    <ng-template #notFromStepper>
-      <ng-container *ngIf="!isEditMode; else editGitModel">
-        <div class="flex justify-between">
-          <a mat-button [routerLink]="['../../modelsources']">
-            <mat-icon class="mat-icon-position">arrow_back</mat-icon>
-            Cancel
-          </a>
-
+      </div>
+      <div *ngIf="asStepper; else notFromStepper" class="flex justify-between">
+        <div></div>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!form.valid"
+          type="submit"
+          (click)="onCreateSubmit()"
+        >
+          Add source
+          <mat-icon class="mat-icon-position right">navigate_next</mat-icon>
+        </button>
+      </div>
+      <ng-template #notFromStepper>
+        <ng-container
+          class="flex justify-between"
+          *ngIf="!isEditMode; else editGitModel"
+        >
+          <div></div>
           <button
             mat-raised-button
             color="primary"
@@ -178,12 +179,10 @@
             Add source
             <mat-icon class="mat-icon-position">arrow_forward</mat-icon>
           </button>
-        </div>
-      </ng-container>
-    </ng-template>
-    <ng-template #editGitModel>
-      <div *ngIf="editing">
-        <div class="flex justify-between">
+        </ng-container>
+      </ng-template>
+      <ng-template #editGitModel>
+        <div class="flex justify-between" *ngIf="editing">
           <button mat-raised-button (click)="cancelEditing()">Cancel</button>
 
           <button
@@ -196,18 +195,25 @@
             Apply changes
           </button>
         </div>
-      </div>
-      <div *ngIf="!editing">
-        <div class="flex flex-wrap justify-between">
-          <button mat-raised-button color="warn" (click)="unlinkGitModel()">
-            Unlink
-          </button>
-
-          <button mat-raised-button color="primary" (click)="enableEditing()">
-            Edit
-          </button>
+        <div *ngIf="!editing">
+          <div class="flex justify-between">
+            <div></div>
+            <div>
+              <button mat-raised-button color="warn" (click)="unlinkGitModel()">
+                Unlink
+              </button>
+              &nbsp;&nbsp;
+              <button
+                mat-raised-button
+                color="primary"
+                (click)="enableEditing()"
+              >
+                Edit
+              </button>
+            </div>
+          </div>
         </div>
-      </div>
-    </ng-template>
+      </ng-template>
+    </form>
   </mat-card>
 </div>
diff --git a/frontend/src/app/projects/models/model-source/t4c/create-t4c-model-new-repository/create-t4c-model-new-repository.component.html b/frontend/src/app/projects/models/model-source/t4c/create-t4c-model-new-repository/create-t4c-model-new-repository.component.html
index a1841659d..7249ff4ec 100644
--- a/frontend/src/app/projects/models/model-source/t4c/create-t4c-model-new-repository/create-t4c-model-new-repository.component.html
+++ b/frontend/src/app/projects/models/model-source/t4c/create-t4c-model-new-repository/create-t4c-model-new-repository.component.html
@@ -5,9 +5,9 @@
 
 <div
   *ngIf="(projectService.project$ | async) && (modelService.model$ | async)"
-  class="wrapper flex-center"
+  class="wrapper flex justify-center"
 >
-  <mat-card class="section-card">
+  <mat-card class="w-[350px] sm:min-w-[420px]">
     <form [formGroup]="form" (ngSubmit)="onSubmit()">
       <app-form-field-skeleton-loader
         *ngIf="(t4cInstanceService.t4cInstances$ | async) === undefined"
@@ -48,14 +48,17 @@
         </mat-form-field>
       </fieldset>
 
-      <button
-        mat-flat-button
-        [disabled]="!form.valid"
-        type="submit"
-        color="primary"
-      >
-        Save reference
-      </button>
+      <div class="flex justify-end">
+        <button
+          mat-flat-button
+          [disabled]="!form.valid"
+          type="submit"
+          color="primary"
+        >
+          Save reference
+          <mat-icon class="mat-icon-position right">navigate_next</mat-icon>
+        </button>
+      </div>
     </form>
   </mat-card>
 </div>
diff --git a/frontend/src/app/projects/models/model-source/t4c/manage-t4c-model/manage-t4c-model.component.html b/frontend/src/app/projects/models/model-source/t4c/manage-t4c-model/manage-t4c-model.component.html
index 7a4d27a24..1aa73fd17 100644
--- a/frontend/src/app/projects/models/model-source/t4c/manage-t4c-model/manage-t4c-model.component.html
+++ b/frontend/src/app/projects/models/model-source/t4c/manage-t4c-model/manage-t4c-model.component.html
@@ -5,9 +5,9 @@
 
 <div
   *ngIf="(projectService.project$ | async) && (modelService.model$ | async)"
-  class="wrapper flex-center"
+  class="wrapper flex justify-center"
 >
-  <mat-card class="section-card">
+  <mat-card class="w-[350px] sm:min-w-[420px]">
     <form [formGroup]="form" (ngSubmit)="onSubmit()">
       <fieldset>
         <app-form-field-skeleton-loader
@@ -82,11 +82,7 @@
         </mat-autocomplete>
       </fieldset>
 
-      <div class="flex justify-between">
-        <button *ngIf="asStepper" mat-button (click)="create.emit(false)">
-          <mat-icon class="mat-icon-position">arrow_back</mat-icon>
-          Choose primary source
-        </button>
+      <div class="flex justify-end">
         <button
           *ngIf="t4cModel !== undefined"
           (click)="unlinkT4CModel()"
@@ -107,6 +103,7 @@
           color="primary"
         >
           Save reference
+          <mat-icon class="mat-icon-position right">navigate_next</mat-icon>
         </button>
       </div>
     </form>
diff --git a/frontend/src/app/projects/project-detail/project-users/add-user-to-project/add-user-to-project.component.html b/frontend/src/app/projects/project-detail/project-users/add-user-to-project/add-user-to-project.component.html
index b5c3c7bbc..5698d81f7 100644
--- a/frontend/src/app/projects/project-detail/project-users/add-user-to-project/add-user-to-project.component.html
+++ b/frontend/src/app/projects/project-detail/project-users/add-user-to-project/add-user-to-project.component.html
@@ -56,7 +56,7 @@ <h2>Add user</h2>
     </mat-form-field>
     <div class="flex justify-between">
       <button (click)="addUser()" mat-flat-button color="primary">
-        Add user <mat-icon>keyboard_arrow_right</mat-icon>
+        Add user <mat-icon>navigate_next</mat-icon>
       </button>
     </div>
   </form>
diff --git a/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.html b/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.html
index 2e6fc39a5..060cfbb56 100644
--- a/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.html
+++ b/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.html
@@ -3,132 +3,143 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<div>
-  <div class="mr-2.5">
-    <div class="flex justify-between">
+<div *ngIf="!hasRoute('projects/create')" class="mr-2.5">
+  <div class="ml-[20px] flex justify-between">
+    <div>
       <h2>Project members</h2>
-      <div class="flex flex-wrap gap-2">
-        <button
-          (click)="openAuditLogDialog()"
-          mat-stroked-button
-          matTooltip="Auditing and access log"
-        >
-          <mat-icon>assignment</mat-icon>
-        </button>
-        <button
-          (click)="openAddUserDialog()"
-          mat-stroked-button
-          matTooltip="Add a new user"
-        >
-          <mat-icon>add</mat-icon>
-        </button>
-      </div>
     </div>
+    <div class="flex flex-wrap gap-2"></div>
   </div>
-  <mat-card class="w-[400px] max-w-[85vw] !pb-0.5 pr-0">
-    <mat-form-field class="mb-[-20px] w-full pr-4" appearance="outline">
-      <mat-label>Search</mat-label>
-      <input
-        [(ngModel)]="search"
-        autocomplete="off"
-        matInput
-        placeholder="Username"
-      />
-      <mat-icon matSuffix>search</mat-icon>
-    </mat-form-field>
-    <div class="max-h-[50vh] overflow-y-scroll">
-      <div *ngFor="let role of ['manager', 'user', 'administrator']">
-        <div class="mt-2.5 text-lg font-bold text-gray-400">
-          {{ capitalizeFirstLetter(role) }}
-        </div>
-        <div
-          class="mx-1.5 my-2.5 flex justify-between"
-          *ngFor="
-            let user of getProjectUsersByRole(
-              projectUserService.projectUsers$ | async,
-              role
-            )
-          "
-        >
-          <div class="flex">
-            <div class="ml-0 mr-4 flex items-center">
-              <mat-icon class="my-auto !h-8 !w-8 text-3xl" mat-list-icon
-                >account_circle</mat-icon
-              >
-            </div>
-            <div>
-              <div class="break-all text-[1.25em]">{{ user.user.name }}</div>
-              <div class="text-gray-500">
-                {{ projectUserService.ADVANCED_ROLES[user.role] }},
-                {{ projectUserService.PERMISSIONS[user.permission] }}
-              </div>
+</div>
+<mat-card class="w-[312px] max-w-[350px] sm:min-w-[420px]">
+  <div class="my-[10px]" *ngIf="!hasRoute('projects/create')">
+    <button
+      class="flex items-center justify-between"
+      (click)="openAuditLogDialog()"
+      mat-stroked-button
+    >
+      <mat-icon>assignment</mat-icon>
+      <span> Review access changes </span>
+    </button>
+  </div>
+
+  <h3>New members</h3>
+  <mat-divider [inset]="true"></mat-divider>
+  <div class="my-[10px]">
+    <button
+      class="flex items-center justify-between"
+      (click)="openAddUserDialog()"
+      mat-stroked-button
+    >
+      <mat-icon>add</mat-icon>
+      <span> Add user </span>
+    </button>
+  </div>
+
+  <h3>Current members</h3>
+  <mat-divider [inset]="true"></mat-divider>
+  <mat-form-field class="mb-[-20px] mt-[10px] w-full pr-4" appearance="outline">
+    <mat-label>Search</mat-label>
+    <input
+      [(ngModel)]="search"
+      autocomplete="off"
+      matInput
+      placeholder="Username"
+    />
+    <mat-icon matSuffix>search</mat-icon>
+  </mat-form-field>
+  <div class="max-h-[50vh] overflow-y-scroll">
+    <div *ngFor="let role of ['manager', 'user', 'administrator']">
+      <div class="mt-2.5 text-lg font-bold text-gray-400">
+        {{ capitalizeFirstLetter(role) }}
+      </div>
+      <div
+        class="mx-1.5 my-2.5 flex justify-between"
+        *ngFor="
+          let user of getProjectUsersByRole(
+            projectUserService.projectUsers$ | async,
+            role
+          )
+        "
+      >
+        <div class="flex">
+          <div class="ml-0 mr-4 flex items-center">
+            <mat-icon class="my-auto !h-8 !w-8 text-3xl" mat-list-icon
+              >account_circle</mat-icon
+            >
+          </div>
+          <div>
+            <div class="break-all text-[1.25em]">{{ user.user.name }}</div>
+            <div class="text-gray-500">
+              {{ projectUserService.ADVANCED_ROLES[user.role] }},
+              {{ projectUserService.PERMISSIONS[user.permission] }}
             </div>
           </div>
-          <div class="ml-1 mr-0 flex items-center">
-            <button
-              mat-icon-button
-              color="error"
-              *ngIf="['user', 'manager'].includes(user.role)"
-              (click)="removeUserFromProject(user.user)"
-              matTooltip="Remove user from project"
-            >
-              <mat-icon>delete</mat-icon>
-            </button>
+        </div>
+        <div class="ml-1 mr-0 flex items-center">
+          <button
+            mat-icon-button
+            color="error"
+            *ngIf="['user', 'manager'].includes(user.role)"
+            (click)="removeUserFromProject(user.user)"
+            matTooltip="Remove user from project"
+          >
+            <mat-icon>delete</mat-icon>
+          </button>
 
+          <button
+            mat-icon-button
+            color="primary"
+            *ngIf="'user' === user.role"
+            (click)="upgradeUserToProjectManager(user.user)"
+            matTooltip="Upgrade user to project manager"
+          >
+            <mat-icon>arrow_upward</mat-icon>
+          </button>
+          <button
+            mat-icon-button
+            color="primary"
+            *ngIf="'manager' === user.role"
+            (click)="downgradeUserToUserRole(user.user)"
+            matTooltip="Downgrade user to simple user"
+          >
+            <mat-icon>arrow_downward</mat-icon>
+          </button>
+          <div *ngIf="'manager' !== user.role">
             <button
               mat-icon-button
               color="primary"
-              *ngIf="'user' === user.role"
-              (click)="upgradeUserToProjectManager(user.user)"
-              matTooltip="Upgrade user to project manager"
+              *ngIf="'read' === user.permission"
+              (click)="setUserPermission(user.user, 'write')"
+              matTooltip="Set permission of user to read/write"
             >
-              <mat-icon>arrow_upward</mat-icon>
+              <mat-icon>folder_shared</mat-icon>
             </button>
             <button
               mat-icon-button
               color="primary"
-              *ngIf="'manager' === user.role"
-              (click)="downgradeUserToUserRole(user.user)"
-              matTooltip="Downgrade user to simple user"
+              *ngIf="
+                'write' === user.permission && user.role !== 'administrator'
+              "
+              (click)="setUserPermission(user.user, 'read')"
+              matTooltip="Set permission of user to read only"
             >
-              <mat-icon>arrow_downward</mat-icon>
+              <mat-icon>folder_open</mat-icon>
             </button>
-            <div *ngIf="'manager' !== user.role">
-              <button
-                mat-icon-button
-                color="primary"
-                *ngIf="'read' === user.permission"
-                (click)="setUserPermission(user.user, 'write')"
-                matTooltip="Set permission of user to read/write"
-              >
-                <mat-icon>folder_shared</mat-icon>
-              </button>
-              <button
-                mat-icon-button
-                color="primary"
-                *ngIf="
-                  'write' === user.permission && user.role !== 'administrator'
-                "
-                (click)="setUserPermission(user.user, 'read')"
-                matTooltip="Set permission of user to read only"
-              >
-                <mat-icon>folder_open</mat-icon>
-              </button>
-            </div>
           </div>
         </div>
-        <div *ngIf="(projectUserService.projectUsers$ | async) === undefined">
-          <ngx-skeleton-loader
-            appearance="circle"
-            [theme]="{
-              'border-radius': '5px',
-              height: '125px',
-              width: 'calc(100% - 12px)',
-              border: '1px solid white'
-            }"
-          ></ngx-skeleton-loader>
-        </div>
+      </div>
+      <div *ngIf="(projectUserService.projectUsers$ | async) === undefined">
+        <ngx-skeleton-loader
+          appearance="circle"
+          [theme]="{
+            'border-radius': '5px',
+            height: '125px',
+            width: 'calc(100% - 12px)',
+            border: '1px solid white'
+          }"
+        ></ngx-skeleton-loader>
       </div>
     </div>
-  </mat-card>
-</div>
+  </div>
+</mat-card>
diff --git a/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.ts b/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.ts
index 085094f05..ae85adb26 100644
--- a/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.ts
+++ b/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.ts
@@ -5,6 +5,7 @@
 
 import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { Router } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { filter, take } from 'rxjs';
 import {
@@ -38,6 +39,7 @@ export class ProjectUserSettingsComponent implements OnInit {
     private toastService: ToastService,
     private projectService: ProjectService,
     private dialog: MatDialog,
+    private router: Router,
   ) {}
 
   ngOnInit(): void {
@@ -210,4 +212,8 @@ export class ProjectUserSettingsComponent implements OnInit {
       });
     });
   }
+
+  hasRoute(route: string) {
+    return this.router.url.includes(route);
+  }
 }
diff --git a/frontend/src/app/projects/service/project.service.ts b/frontend/src/app/projects/service/project.service.ts
index f642f298d..54abdca57 100644
--- a/frontend/src/app/projects/service/project.service.ts
+++ b/frontend/src/app/projects/service/project.service.ts
@@ -146,8 +146,6 @@ export type Project = Required<PatchProject> & {
 };
 
 export const ProjectVisibility = {
-  internal:
-    'Internal - all logged in users can see the project and have read access on its models.',
-  private:
-    'Private - users need to be explicitly granted access to see the project.',
+  internal: 'Internal (viewable by all logged in users)',
+  private: 'Private (only viewable by project members)',
 };
diff --git a/frontend/src/app/settings/integrations/pure-variants/pure-variants.component.html b/frontend/src/app/settings/integrations/pure-variants/pure-variants.component.html
index 31de9df5d..77d3c03db 100644
--- a/frontend/src/app/settings/integrations/pure-variants/pure-variants.component.html
+++ b/frontend/src/app/settings/integrations/pure-variants/pure-variants.component.html
@@ -4,7 +4,7 @@
  -->
 
 <div class="flex flex-wrap justify-center">
-  <mat-card class="section-card">
+  <mat-card class="w-[350px] sm:min-w-[420px]">
     <h2>pure::variants configuration</h2>
     <form
       (submit)="onLicenseConfigurationSubmit()"
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 4fcc1767c..0c3e40df9 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -115,11 +115,6 @@ button.success {
   color: white;
 }
 
-mat-card {
-  width: fit-content;
-  margin: 10px;
-}
-
 h1 {
   margin: 10px;
 }
@@ -172,22 +167,10 @@ fieldset > :not(.field-separator) {
   flex-grow: 1;
 }
 
-.text-center {
-  text-align: center;
-}
-
-mat-card.default {
-  width: 400px;
-}
-
 .margin.default {
   margin: 10px;
 }
 
-.section-card {
-  width: var(--section-card-width);
-}
-
 .version-selector {
   flex-shrink: 0.5;
 }
@@ -258,7 +241,7 @@ Angular Material Card Styles
 }
 
 .form-field-default {
-  width: 405px;
+  width: 100%;
   max-width: 85vw;
 }
 
@@ -292,3 +275,12 @@ Option cards
   height: 2.4rem;
   width: 20ch;
 }
+
+@media (max-width: 640px) {
+  .mat-stepper-horizontal-line {
+    width: 100%;
+  }
+  .mat-horizontal-stepper-header-container {
+    height: 50px;
+  }
+}