diff --git a/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.html b/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.html
index 96c7da76d..85d65a7fd 100644
--- a/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.html
+++ b/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.html
@@ -91,14 +91,30 @@
 												</div>
 
 												<div cdkDropList class="col-12 mt-3" (cdkDropListDropped)="dropFields($event, sectionIndex)">
-													<div *ngFor="let field of section.get('fields').controls; let fieldIndex=index;" cdkDrag class="d-flex align-items-center" [cdkDragDisabled]="formGroup.disabled">
-														<div class="section-fields-wrapper">
-															<div class="section-field-index">
-																<span style="font-size: 18px;">{{fieldIndex + 1}}</span>
-															</div>				
-															<div class="section-field-sortable"><mat-icon [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div>
-															<div class="section-field-category">
-																<mat-form-field class="w-100">
+													<ng-container *ngFor="let field of section.get('fields').controls; let fieldIndex=index;" cdkDrag class="" [cdkDragDisabled]="formGroup.disabled">
+														<div class="section-fields-wrapper row" (mouseenter)="onSectionHover(fieldIndex)" (mouseleave)="clearHoveredSection()">
+															
+															<div class="col-auto section-options-vertical">
+																<div class="row justify-content-center">
+																	<div class="col-auto">
+																		<span *ngIf="!isSectionSelected(fieldIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.42rem 0 0.45rem;">{{fieldIndex + 1}}</span>
+																		<mat-icon *ngIf="isSectionSelected(fieldIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle" style="margin-top: 0.9rem;">drag_indicator</mat-icon>
+																	</div>
+																	<div class="col-auto">
+																		<button mat-icon-button matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeField(sectionIndex, fieldIndex)" [disabled]="formGroup.disabled">
+																			<mat-icon>delete</mat-icon>
+																		</button>
+																	</div>
+																</div>
+															</div>
+															<div class="col-auto section-field section-options-horizontal">
+																<div class="w-1">
+																	<span *ngIf="!isSectionSelected(fieldIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.45rem;">{{fieldIndex + 1}}</span>
+																	<mat-icon *ngIf="isSectionSelected(fieldIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
+																</div>
+															</div>
+															<div class="col-auto section-field">
+																<mat-form-field class="mt-3 w-100">
 																	<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.CATEGORY' | translate}}</mat-label>
 																	<mat-select [formControl]="field.get('category')" [disabled]="field.disabled" (selectionChange)="fieldCategoryChanged(sectionIndex, fieldIndex)">
 																		<mat-option *ngFor="let fieldCategory of dmpBlueprintFieldCategoryEnum" [value]="fieldCategory">{{enumUtils.toDmpBlueprintFieldCategoryString(fieldCategory)}}</mat-option>
@@ -107,8 +123,8 @@
 																	<mat-error *ngIf="field.get('category').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 																</mat-form-field>
 															</div>
-															<div class="section-field-system-type" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.System">
-																<mat-form-field class="w-100">
+															<div class="col-auto section-field" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.System">
+																<mat-form-field class="mt-3 w-100">
 																	<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SYSTEM-FIELD-TYPE' | translate}}</mat-label>
 																	<mat-select [formControl]="field.get('systemFieldType')" [disabled]="field.disabled">
 																		<mat-option *ngFor="let systemFieldType of dmpBlueprintSystemFieldTypeEnum" [disabled]="systemFieldDisabled(systemFieldType)" [value]="systemFieldType">{{enumUtils.toDmpBlueprintSystemFieldTypeString(systemFieldType)}}</mat-option>
@@ -117,8 +133,8 @@
 																	<mat-error *ngIf="field.get('systemFieldType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 																</mat-form-field>
 															</div>
-															<div class="section-field-data-type" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.Extra">
-																<mat-form-field class="w-100">
+															<div class="col-auto section-field" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.Extra">
+																<mat-form-field class="mt-3 w-100">
 																	<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DATA-TYPE' | translate}}</mat-label>
 																	<mat-select [formControl]="field.get('dataType')">
 																		<mat-option *ngFor="let extraFieldDataType of dmpBlueprintExtraFieldDataTypeEnum" [value]="extraFieldDataType">
@@ -129,40 +145,40 @@
 																	<mat-error *ngIf="field.get('dataType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 																</mat-form-field>
 															</div>
-															<div class="section-field-reference-type" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.ReferenceType">
-																<mat-form-field class="w-100">
+															<div class="col-auto section-field" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.ReferenceType">
+																<mat-form-field class="mt-3 w-100">
 																	<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.REFERENCE-TYPE' | translate}}</mat-label>
 																	<app-single-auto-complete placeholder="{{'DMP-BLUEPRINT-EDITOR.FIELDS.REFERENCE-TYPE' | translate}}" [required]="true" [formControl]="field.get('referenceTypeId')" [configuration]="referenceTypeService.singleAutocompleteConfiguration"></app-single-auto-complete>
 																	<mat-error *ngIf="field.get('referenceTypeId').hasError('backendError')">{{field.get('referenceTypeId').getError('backendError').message}}</mat-error>
 																	<mat-error *ngIf="field.get('referenceTypeId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 																</mat-form-field>
 															</div>
-															<div class="section-field-label" *ngIf="field.get('category').value != null">
-																<mat-form-field class="w-100">
+															<div class="col-auto section-field" *ngIf="field.get('category').value != null">
+																<mat-form-field class="mt-3 w-100">
 																	<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-LABEL' | translate}}</mat-label>
 																	<input matInput type="text" name="label" [formControl]="field.get('label')">
 																	<mat-error *ngIf="field.get('label').hasError('backendError')">{{field.get('label').getError('backendError').message}}</mat-error>
 																	<mat-error *ngIf="field.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 																</mat-form-field>
 															</div>
-															<div class="section-field-placeholder" *ngIf="field.get('category').value != null">
-																<mat-form-field class="w-100">
+															<div class="col-auto  section-field" *ngIf="field.get('category').value != null">
+																<mat-form-field class="mt-3 w-100">
 																	<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-PLACEHOLDER' | translate}}</mat-label>
 																	<input matInput type="text" name="placeholder" [formControl]="field.get('placeholder')">
 																	<mat-error *ngIf="field.get('placeholder').hasError('backendError')">{{field.get('placeholder').getError('backendError').message}}</mat-error>
 																	<mat-error *ngIf="field.get('placeholder').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 																</mat-form-field>
 															</div>
-															<div class="section-field-description" *ngIf="field.get('category').value != null">
-																<mat-form-field class="w-100">
+															<div class="col-auto section-field" *ngIf="field.get('category').value != null">
+																<mat-form-field class="mt-3 w-100">
 																	<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-DESCRIPTION' | translate}}</mat-label>
 																	<input matInput type="text" name="description" [formControl]="field.get('description')">
 																	<mat-error *ngIf="field.get('description').hasError('backendError')">{{field.get('description').getError('backendError').message}}</mat-error>
 																	<mat-error *ngIf="field.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 																</mat-form-field>
 															</div>
-															<div class="section-field-semantics" *ngIf="field.get('category').value != null">
-																<mat-form-field class="w-100">
+															<div class="col section-field" *ngIf="field.get('category').value != null">
+																<mat-form-field class="mt-3 w-100">
 																	<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SEMANTICS' | translate}}</mat-label>
 																	<app-multiple-auto-complete placeholder="{{'DMP-BLUEPRINT-EDITOR.FIELDS.SEMANTICS' | translate}}" [hidePlaceholder]="true" [required]="false" [separatorKeysCodes]="separatorKeysCodes" [formControl]="field.get('semantics')" [configuration]="semanticsService.multipleAutocompleteConfiguration">
 																	</app-multiple-auto-complete>
@@ -170,18 +186,18 @@
 																	<mat-error *ngIf="field.get('semantics').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 																</mat-form-field>
 															</div>
-															<div class="section-field-required" *ngIf="field.get('category').value != null">
+															<div class="col-auto section-field" *ngIf="field.get('category').value != null">
 																<mat-checkbox [disabled]="field.get('systemFieldType')?.value === dmpBlueprintSystemFieldType.Title || field.get('systemFieldType')?.value === dmpBlueprintSystemFieldType.Description" [formControl]="field.get('required')"><span>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-REQUIRED' | translate}}</span></mat-checkbox>
 																<mat-error *ngIf="field.get('required').hasError('backendError')">{{field.get('required').getError('backendError').message}}</mat-error>
 																<mat-error *ngIf="field.get('required').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 															</div>
-															<div [hidden]="viewOnly" class="section-field-delete">
+															<div [hidden]="viewOnly" class="col-auto section-field section-options-horizontal">
 																<button mat-icon-button matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeField(sectionIndex, fieldIndex)" [disabled]="formGroup.disabled">
 																	<mat-icon>delete</mat-icon>
 																</button>
 															</div>
 														</div>
-													</div>
+													</ng-container>
 													<mat-error *ngIf="section.get('fields').dirty && section.get('fields').hasError('required')">{{'DMP-BLUEPRINT-EDITOR.FIELDS-REQUIRED' | translate}}</mat-error>
 													<mat-error *ngIf="section.get('fields').hasError('backendError')">{{section.get('fields').getError('backendError').message}}</mat-error>
 												</div>
diff --git a/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.scss b/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.scss
index e7a514041..625e43482 100644
--- a/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.scss
+++ b/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.scss
@@ -142,203 +142,72 @@
 	flex-wrap: wrap; // ??
 	align-items: center;
 	
-	@media (max-width: 1470px) {
+	.section-options-vertical {
+		display: none;
+	}
+	
+	.section-options-horizontal {
+		display: initial;
+	}
+	
+	@media (min-width: 2060px) and (max-width:2215px) {
+		.section-field {
+			padding-left: 0;
+		}
+	}
+	
+	@media (min-width: 2000px) and (max-width: 2060px) {
+		.section-field {
+			padding-left: 0;
+			padding-right: 0.6rem;
+		}
+	}
+	
+	@media (min-width: 1950px) and (max-width: 2000px) {
+		.section-field {
+			padding-left: 0;
+			padding-right: 0.3rem;
+		}
+	}
+	
+	// @media (min-width: 1900px) and (max-width: 1950px) {
+	// 	.section-field {
+	// 		padding-left: 0;
+	// 		padding-right: 0.05rem;
+	// 	}
+	// }
+
+
+	@media (max-width: 1900px) {
 		flex-direction: column;
 		align-items: flex-start;
-	}
+		
+		.section-options-horizontal {
+			display: none;
+		}
+		
+		.section-options-vertical {
+			width: 100%;
+			display: initial;
+		}
 
-	.section-field-index {
-		width: auto;
-		margin-top: 0.2rem;
-		
-		@media (max-width: 1470px) {
-			margin-left: 1.1rem;
-			// margin-left: 1.6rem;
-		}
-	}
-
-	.section-field-delete {
-		width: auto;
-		@media (max-width: 1470px) {
-			// margin-left: 0.5rem;
-		}
-	}
-	
-	.section-field-sortable {
-		width: auto;
-		margin-top: 0.5rem;
-		
-		@media (max-width: 1470px) {
-			margin-top: 0;
-			margin-left: 0.7rem;
-			// margin-left: 1.2rem;
-		}
-	}
-	
-	.section-field-category {
-		width: 10.0rem;
-		margin-left: 0.5rem;
-		margin-top: 1.4rem;
-		
-		@media (max-width: 1470px) {
-			margin-top: 0;
-			margin-left: 0;
-			width: 100%;
-		}
-	}
-	
-	.section-field-system-type {
-		width: 9.0rem;
-		margin-left: 0.5rem;
-		margin-top: 1.4rem;
-		@media (max-width: 1470px) {
-			margin-top: 0;
-			margin-left: 0;
-			width: 100%;
-		}
-	}
-	
-	.section-field-data-type {
-		width: 9.0rem;
-		margin-left: 0.5rem;
-		margin-top: 1.4rem;
-		@media (max-width: 1470px) {
-			margin-top: 0;
-			margin-left: 0;
-			width: 100%;
-		}
-	}
-	
-	.section-field-reference-type {
-		width: 9.0rem;
-		margin-left: 0.5rem;
-		margin-top: 1.4rem;
-		@media (max-width: 1470px) {
-			margin-top: 0;
-			margin-left: 0;
-			width: 100%;
-		}
-	}
-	
-	.section-field-label {
-		width: 10.0rem;
-		margin-left: 0.5rem;
-		margin-top: 1.4rem;
-		@media (max-width: 1470px) {
-			margin-top: 0;
-			margin-left: 0;
-			width: 100%;
-			width: 100%;
-		}
-	}
-	
-	.section-field-placeholder {
-		width: 10.0rem;
-		margin-left: 0.5rem;
-		margin-top: 1.4rem;
-		@media (max-width: 1470px) {
-			margin-top: 0;
-			margin-left: 0;
-			width: 100%;
-		}
-	}
-	
-	.section-field-description {
-		width: 10.0rem;
-		margin-left: 0.5rem;
-		margin-top: 1.4rem;
-		@media (max-width: 1470px) {
-			margin-top: 0;
-			margin-left: 0;
-			width: 100%;
-		}
-	}
-	
-	.section-field-semantics {
-		width: 12.0rem;
-		margin-left: 0.5rem;
-		margin-top: 1.4rem;
-		@media (max-width: 1470px) {
-			margin-top: 0;
-			margin-left: 0;
-			width: 100%;
-		}
-	}
-	
-	.section-field-required {
-		width: 10.0rem;
-		margin-left: 0.5rem;
-		@media (max-width: 1470px) {
-			margin-top: 0;
+		.section-field {
 			width: 100%;
+			max-width: initial;
 		}
 	}
 }
 
-
 .description-fields-wrapper {
 	width: 100%;
 	margin-top: 1.0rem;
 	display: flex;
 	flex-wrap: wrap; // ??
 	align-items: center;
-	
+
 	@media (max-width: 1470px) {
 		flex-direction: column;
 		align-items: flex-start;
 	}
-
-	.description-field-index {
-		width: auto;
-		margin-top: 0.2rem;
-		
-		@media (max-width: 1470px) {
-			margin-left: 1.1rem;
-			// margin-left: 1.6rem;
-		}
-	}
-
-	.description-field-delete {
-		width: auto;
-		@media (max-width: 1470px) {
-			// margin-left: 0.5rem;
-		}
-	}
-	
-	.description-field-sortable {
-		width: auto;
-		margin-top: 0.5rem;
-		
-		@media (max-width: 1470px) {
-			margin-top: 0;
-			margin-left: 0.7rem;
-			// margin-left: 1.2rem;
-		}
-	}
-	
-	.description-field-template {
-		width: 15rem;
-		margin-left: 0.5rem;
-		margin-top: 1.4rem;
-		
-		@media (max-width: 1470px) {
-			margin-top: 0;
-			margin-left: 0;
-			width: 100%;
-		}
-	}
-	
-	.description-field-template-label,
-	.description-field-template-min-multiplicity,
-	.description-field-template-max-multiplicity {
-		width: 11.0rem;
-		margin-left: 0.5rem;
-		margin-top: 1.4rem;
-		@media (max-width: 1470px) {
-			margin-top: 0;
-			margin-left: 0;
-			width: 100%;
-			width: 100%;
-		}
-	}
 }
+
diff --git a/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.ts b/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.ts
index d5b94b111..d6dc45662 100644
--- a/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.ts
+++ b/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.ts
@@ -60,6 +60,8 @@ export class DmpBlueprintEditorComponent extends BaseEditor<DmpBlueprintEditorMo
 	formGroup: UntypedFormGroup = null;
 	showInactiveDetails = false;
 
+	hoveredSectionIndex:number = -1;
+
 	dmpBlueprintSectionFieldCategory = DmpBlueprintFieldCategory;
 	dmpBlueprintSystemFieldType = DmpBlueprintSystemFieldType;
 	public dmpBlueprintSystemFieldTypeEnum = this.enumUtils.getEnumValues<DmpBlueprintSystemFieldType>(DmpBlueprintSystemFieldType);
@@ -268,6 +270,19 @@ export class DmpBlueprintEditorComponent extends BaseEditor<DmpBlueprintEditorMo
 	// Sections
 	//
 	//
+
+	isSectionSelected(sectionId: number): boolean {
+		return this.hoveredSectionIndex === sectionId;
+	}
+
+	onSectionHover(sectionId: any): void {
+		this.hoveredSectionIndex = sectionId;
+	}
+
+	clearHoveredSection(): void {
+		this.hoveredSectionIndex = -1;
+	}
+
 	addSection(): void {
 		const formArray = this.formGroup.get('definition').get('sections') as FormArray;
 		formArray.push(this.editorModel.createChildSection(formArray.length));