diff --git a/dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.component.html b/dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.component.html
index 8ce4a05d5..aa648dd24 100644
--- a/dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.component.html
+++ b/dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.component.html
@@ -34,10 +34,10 @@
 		<span *ngIf="!isUserSelected(userIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.435rem 0 0.435rem;">{{userIndex + 1}}</span>
 		<mat-icon *ngIf="isUserSelected(userIndex)" [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">
-				<mat-button-toggle class="lang-button" [value]="userType">{{enumUtils.toDmpUserTypeString(userType)}}</mat-button-toggle>
+	<div class="col-auto user-field">
+		<mat-button-toggle-group name="fontStyle" aria-label="Font Style" [formControl]="user.get('userType')" class="w-100">
+			<div *ngFor="let userType of dmpUserTypeEnumValues" class="col p-0">
+				<mat-button-toggle class="lang-button w-100" [value]="userType">{{enumUtils.toDmpUserTypeString(userType)}}</mat-button-toggle>
 			</div>
 		</mat-button-toggle-group>
 	</div>
diff --git a/dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.component.scss b/dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.component.scss
index 9d8a2e18c..a4808a077 100644
--- a/dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.component.scss
@@ -15,7 +15,7 @@
 }
 
 
-@media (max-width:1400px) {
+@media (max-width:1600px) {
 	
 	.user-fields {
 		flex-direction: column;
@@ -23,5 +23,6 @@
 		
 	.user-field {
 		align-self: flex-start;
+		width: 100%;
 	}
 }
\ No newline at end of file