diff --git a/frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.html b/frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.html
index d77b9c90b..5ef64bc13 100644
--- a/frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.html
+++ b/frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.html
@@ -35,10 +35,10 @@
 		<mat-icon *ngIf="isUserSelected(userIndex)" [ngClass]="{'drag-handle-disabled': viewOnly}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
 	</div>
 	<div class="col-12 col-xl-auto">
-		<mat-button-toggle-group name="fontStyle" aria-label="{{'ALT-TEXT.INTERNAL-EXTERNAL-USER' | translate}}" [formControl]="user.get('userType')" (change)="userTypeChange($event, userIndex)" class="w-100">
-			<div *ngFor="let userType of planUserTypeEnumValues" class="col p-0">
-				<mat-button-toggle class="lang-button w-100" [value]="userType">{{enumUtils.toPlanUserTypeString(userType)}}</mat-button-toggle>
-			</div>
+		<mat-button-toggle-group name="fontStyle" aria-label="{{'ALT-TEXT.INTERNAL-EXTERNAL-USER' | translate}}" [formControl]="user.get('userType')" (change)="userTypeChange($event, userIndex)" >
+			@for(userType of planUserTypeEnumValues; track userType){
+				<mat-button-toggle  [value]="userType">{{enumUtils.toPlanUserTypeString(userType)}}</mat-button-toggle>
+            }
 		</mat-button-toggle-group>
 	</div>
 	<div class="col-12 col-xl mt-3" *ngIf="user.get('userType').value == planUserTypeEnum.Internal">