diff --git a/dmp-frontend/src/app/app.component.scss b/dmp-frontend/src/app/app.component.scss
index ddc6df33c..26f07d9f5 100644
--- a/dmp-frontend/src/app/app.component.scss
+++ b/dmp-frontend/src/app/app.component.scss
@@ -21,7 +21,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	width: 260px;
+	width: 270px;
 	background: #ffffff 0% 0% no-repeat padding-box;
 	box-shadow: 0px 0px 16px 2px #00000029;
 	border-right-width: 0px;
diff --git a/dmp-frontend/src/app/ui/dmp/invitation/dialog/dmp-invitation-dialog.component.html b/dmp-frontend/src/app/ui/dmp/invitation/dialog/dmp-invitation-dialog.component.html
index 8dcfc23ab..475d3e46b 100644
--- a/dmp-frontend/src/app/ui/dmp/invitation/dialog/dmp-invitation-dialog.component.html
+++ b/dmp-frontend/src/app/ui/dmp/invitation/dialog/dmp-invitation-dialog.component.html
@@ -7,9 +7,9 @@
 			<mat-icon class="close-icon">close</mat-icon>
 		</div>
 	</div>
-	<div mat-dialog-content class="row content">
+	<div mat-dialog-content class="row">
 		<div>
-			<app-user-field-component [form]="formGroup" [validationErrorModel]="editorModel.validationErrorModel" [sections]="selectedBlueprint.definition.sections"></app-user-field-component>
+			<app-user-field-component [form]="formGroup" [validationErrorModel]="editorModel.validationErrorModel" [sections]="selectedBlueprint.definition.sections" [initializeUsers]="'true'" [enableSorting]="'false'"></app-user-field-component>
 		</div>
 		<div class="col mt-2">
 			<button mat-raised-button *ngIf="hasValue()" (click)="send()" type="button" class="invite-btn">{{'DMP-USER-INVITATION-DIALOG.ACTIONS.INVITE' | translate}}</button>
diff --git a/dmp-frontend/src/app/ui/dmp/user-field/user-field.component.html b/dmp-frontend/src/app/ui/dmp/user-field/user-field.component.html
index eb2f1d7ab..8da4e4d27 100644
--- a/dmp-frontend/src/app/ui/dmp/user-field/user-field.component.html
+++ b/dmp-frontend/src/app/ui/dmp/user-field/user-field.component.html
@@ -1,9 +1,26 @@
-<div cdkDropList class="col-12" (cdkDropListDropped)="dropUsers($event)">
-	<div *ngFor="let user of form.get('users').controls; let userIndex=index;" cdkDrag class="row align-items-center" [cdkDragDisabled]="form.disabled">
-		<div class="col-auto">
+<div *ngIf="enableSorting==true; else sortingDisabled" class="col-12" cdkDropList (cdkDropListDropped)="dropUsers($event)">
+	hello!
+	<ng-container *ngTemplateOutlet="userForm"></ng-container>	
+</div>
+	
+<ng-template class="col-12" #sortingDisabled>
+	<ng-container *ngTemplateOutlet="userForm"></ng-container>	
+</ng-template>
+
+<div class="row">
+	<div class="col">
+		<button mat-icon-button (click)="addUser()" [disabled]="form.disabled">
+			<mat-icon>add</mat-icon>
+		</button>
+	</div>
+</div>
+
+<ng-template #userForm>
+	<div *ngFor="let user of form.get('users').controls; let userIndex=index;" cdkDrag class="user-fields-wrapper" [cdkDragDisabled]="form.disabled">
+		<div class="">
 			<span style="font-size: 15px;">{{userIndex + 1}}</span>
 		</div>
-		<div class="col-auto d-flex"><mat-icon [ngClass]="{'drag-handle-disabled': form.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div>
+		<div *ngIf="enableSorting==true" class="col-auto d-flex"><mat-icon [ngClass]="{'drag-handle-disabled': form.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div>
 		<div class="col-auto">
 			<mat-button-toggle-group name="fontStyle" aria-label="Font Style" [formControl]="user.get('userType')">
 				<div *ngFor="let userType of dmpUserTypeEnumValues">
@@ -11,47 +28,43 @@
 				</div>
 			</mat-button-toggle-group>
 		</div>
-		<div class="col pt-4">
-			<div class="row">
-				<div class="col" *ngIf="user.get('userType').value == dmpUserTypeEnum.Internal">
-					<mat-form-field class="w-100">
-						<mat-label>{{'DMP-EDITOR.FIELDS1.USER' | translate}}*</mat-label>
-						<app-single-auto-complete [formControl]="user.get('user')" [hidePlaceholder]="true" [configuration]="userService.singleAutoCompleteDmpAssociatedUserConfiguration"></app-single-auto-complete>
-						<mat-error *ngIf="user.get('user').hasError('backendError')">{{user.get('user').getError('backendError').message}}</mat-error>
-						<mat-error *ngIf="user.get('user').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-					</mat-form-field>
-				</div>
-				<div class="col" *ngIf="user.get('userType').value == dmpUserTypeEnum.External">
-					<mat-form-field class="w-100">
-						<mat-label>{{'DMP-EDITOR.FIELDS1.EMAIL' | translate}}*</mat-label>
-						<input matInput type="text" name="email" [formControl]="user.get('email')">
-						<mat-error *ngIf="user.get('email').hasError('backendError')">{{user.get('email').getError('backendError').message}}</mat-error>
-						<mat-error *ngIf="user.get('email').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-					</mat-form-field>
-				</div>
-				<div class="col">
-					<mat-form-field class="w-100">
-						<mat-label>{{'DMP-EDITOR.FIELDS1.USER-ROLE' | translate}}</mat-label>
-						<mat-select [formControl]="user.get('role')">
-							<mat-option *ngFor="let userRole of dmpUserRoleEnumValues" [value]="userRole">{{enumUtils.toDmpUserRoleString(userRole)}}</mat-option>
-						</mat-select>
-						<mat-error *ngIf="user.get('role').hasError('backendError')">{{user.get('role').getError('backendError').message}}</mat-error>
-						<mat-error *ngIf="user.get('role').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-					</mat-form-field>
-				</div>
-				<div class="col" *ngIf="sections">
-					<mat-form-field class="w-100">
-						<mat-label>{{'DMP-EDITOR.FIELDS1.SECTION' | translate}}</mat-label>
-						<mat-select [formControl]="user.get('sectionId')">
-							<mat-option *ngFor="let section of sections" [value]="section.id">
-								{{ section.label }}
-							</mat-option>
-						</mat-select>
-						<mat-error *ngIf="user.get('sectionId').hasError('backendError')">{{user.get('sectionId').getError('backendError').message}}</mat-error>
-						<mat-error *ngIf="user.get('sectionId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |translate}}</mat-error>
-					</mat-form-field>
-				</div>
-			</div>
+		<div class="col-auto" *ngIf="user.get('userType').value == dmpUserTypeEnum.Internal">
+			<mat-form-field class="w-100">
+				<mat-label>{{'DMP-EDITOR.FIELDS1.USER' | translate}}*</mat-label>
+				<app-single-auto-complete [formControl]="user.get('user')" [hidePlaceholder]="true" [configuration]="userService.singleAutoCompleteDmpAssociatedUserConfiguration"></app-single-auto-complete>
+				<mat-error *ngIf="user.get('user').hasError('backendError')">{{user.get('user').getError('backendError').message}}</mat-error>
+				<mat-error *ngIf="user.get('user').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+			</mat-form-field>
+		</div>
+		<div class="col-auto" *ngIf="user.get('userType').value == dmpUserTypeEnum.External">
+			<mat-form-field class="w-100">
+				<mat-label>{{'DMP-EDITOR.FIELDS1.EMAIL' | translate}}*</mat-label>
+				<input matInput type="text" name="email" [formControl]="user.get('email')">
+				<mat-error *ngIf="user.get('email').hasError('backendError')">{{user.get('email').getError('backendError').message}}</mat-error>
+				<mat-error *ngIf="user.get('email').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+			</mat-form-field>
+		</div>
+		<div class="col-auto">
+			<mat-form-field class="w-100">
+				<mat-label>{{'DMP-EDITOR.FIELDS1.USER-ROLE' | translate}}</mat-label>
+				<mat-select [formControl]="user.get('role')">
+					<mat-option *ngFor="let userRole of dmpUserRoleEnumValues" [value]="userRole">{{enumUtils.toDmpUserRoleString(userRole)}}</mat-option>
+				</mat-select>
+				<mat-error *ngIf="user.get('role').hasError('backendError')">{{user.get('role').getError('backendError').message}}</mat-error>
+				<mat-error *ngIf="user.get('role').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+			</mat-form-field>
+		</div>
+		<div class="col-auto" *ngIf="sections">
+			<mat-form-field class="w-100">
+				<mat-label>{{'DMP-EDITOR.FIELDS1.SECTION' | translate}}</mat-label>
+				<mat-select [formControl]="user.get('sectionId')">
+					<mat-option *ngFor="let section of sections" [value]="section.id">
+						{{ section.label }}
+					</mat-option>
+				</mat-select>
+				<mat-error *ngIf="user.get('sectionId').hasError('backendError')">{{user.get('sectionId').getError('backendError').message}}</mat-error>
+				<mat-error *ngIf="user.get('sectionId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |translate}}</mat-error>
+			</mat-form-field>
 		</div>
 		<div class="col-auto">
 			<button mat-icon-button class="action-list-icon" matTooltip="{{'DMP-EDITOR.ACTIONS1.REMOVE-USER' | translate}}" (click)="removeUser(userIndex)" [disabled]="form.disabled">
@@ -59,13 +72,7 @@
 			</button>
 		</div>
 	</div>
+
 	<mat-error *ngIf="form.get('users').dirty && form.get('users').hasError('required')">{{'DMP-EDITOR.USERS-REQUIRED' | translate}}</mat-error>
 	<mat-error *ngIf="form.get('users').hasError('backendError')">{{form.get('users').getError('backendError').message}}</mat-error>
-</div>
-<div class="row">
-	<div class="col">
-		<button mat-icon-button (click)="addUser()" [disabled]="form.disabled">
-			<mat-icon>add</mat-icon>
-		</button>
-	</div>
-</div>
\ No newline at end of file
+</ng-template>
diff --git a/dmp-frontend/src/app/ui/dmp/user-field/user-field.component.scss b/dmp-frontend/src/app/ui/dmp/user-field/user-field.component.scss
index dbaf6e932..8274928d1 100644
--- a/dmp-frontend/src/app/ui/dmp/user-field/user-field.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/user-field/user-field.component.scss
@@ -6,4 +6,15 @@
 .drag-handle-disabled {
 	cursor: auto; 
 	color: rgba(0, 0, 0, 0.38);;
-}
\ No newline at end of file
+}
+
+.user-fields-wrapper {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-around;
+	align-items: baseline;
+	
+	@media (width <= 1350px) {
+		flex-direction: column;
+	}	
+}
diff --git a/dmp-frontend/src/app/ui/dmp/user-field/user-field.component.ts b/dmp-frontend/src/app/ui/dmp/user-field/user-field.component.ts
index 1bd5b72f6..0df0b0e9b 100644
--- a/dmp-frontend/src/app/ui/dmp/user-field/user-field.component.ts
+++ b/dmp-frontend/src/app/ui/dmp/user-field/user-field.component.ts
@@ -24,6 +24,8 @@ export class UserFieldComponent extends BaseComponent implements OnInit {
 	@Input() required: boolean = false;
 	@Input() placeholder: string;
 	@Input() sections: DmpBlueprintDefinitionSection[] = null;
+	@Input() initializeUsers: boolean = false;
+	@Input() enableSorting: boolean = true;
 
 	dmpUserTypeEnum = DmpUserType;
 	dmpUserTypeEnumValues = this.enumUtils.getEnumValues<DmpUserType>(DmpUserType);
@@ -37,6 +39,10 @@ export class UserFieldComponent extends BaseComponent implements OnInit {
 	) { super(); }
 
 	ngOnInit() {
+		console.log('sorting mode: ', this.enableSorting);
+		if(this.initializeUsers) {
+			this.addUser();
+		}
 	}
 
 	addUser(): void {