diff --git a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss
index 633e9467d..0c67f1f8c 100644
--- a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss
+++ b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss
@@ -28,8 +28,7 @@
 	// text-overflow: ellipsis;
 	// white-space: nowrap;
 	// overflow: hidden;
-	// white-space: normal;
-	white-space: nowrap;
+	white-space: normal;
 	word-break: break-word;
 }
 
@@ -129,16 +128,3 @@
 		color: transparent;
 	}
 }
-
-:host ::ng-deep .mdc-evolution-chip-set__chips {
-  max-width: 100%;
-	text-overflow: ellipsis;
-	flex-flow: nowrap;
-	overflow-x: scroll;
-}
-
-:host ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,
-:host ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,
-:host ::ng-deep .mat-mdc-standard-chip .mat-mdc-chip-action-label {
-  overflow: hidden;
-}
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 90bd7d6f8..f6715e40b 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
@@ -15,7 +15,7 @@
 		</div>
 		<div class="col"></div>
 		<div class="col-auto" *ngIf="!isNew">
-			<button [disabled]="!isLockedByUser" mat-button class="action-btn" type="button" (click)="delete()">
+			<button [disabled]="isLocked" mat-button class="action-btn" type="button" (click)="delete()">
 				<mat-icon>delete</mat-icon>
 				{{'DMP-BLUEPRINT-EDITOR.ACTIONS.DELETE' | translate}}
 			</button>
@@ -92,7 +92,7 @@
 											</div>
 											<div class="row">
 												<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="section-fields-wrapper row" [cdkDragDisabled]="formGroup.disabled" (mouseenter)="onSectionHover(fieldIndex)" (mouseleave)="clearHoveredSection()">
+													<div *ngFor="let field of section.get('fields').controls; let fieldIndex=index;" cdkDrag class="section-fields-wrapper row align-items-center mt-1" [cdkDragDisabled]="formGroup.disabled" (mouseenter)="onSectionHover(fieldIndex)" (mouseleave)="clearHoveredSection()">
 															<div class="col-auto section-options-vertical">
 																<div class="row justify-content-center">
 																	<div class="col-auto">
@@ -106,14 +106,14 @@
 																	</div>
 																</div>
 															</div>
-															<div class="col-auto pr-0 section-field section-options-horizontal">
+															<div class="col-auto pr-0 section-options-horizontal">
 																	<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 class="col">
 																<div class="row">
 																	
-																	<div class="col-4 section-field">
+																	<div class="col-12 col-xl-4">
 																		<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)">
@@ -123,7 +123,7 @@
 																			<mat-error *ngIf="field.get('category').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 																		</mat-form-field>
 																	</div>
-																	<div class="col-4 section-field" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.System">
+																	<div class="col-12 col-xl-4" *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">
@@ -133,7 +133,7 @@
 																			<mat-error *ngIf="field.get('systemFieldType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 																		</mat-form-field>
 																	</div>
-																	<div class="col-4 section-field" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.Extra">
+																	<div class="col-12 col-xl-4" *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')">
@@ -145,7 +145,7 @@
 																			<mat-error *ngIf="field.get('dataType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 																		</mat-form-field>
 																	</div>
-																	<div class="col-4 section-field" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.ReferenceType">
+																	<div class="col-12 col-xl-4" *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>
@@ -153,7 +153,7 @@
 																			<mat-error *ngIf="field.get('referenceTypeId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 																		</mat-form-field>
 																	</div>
-																	<div class="col-4 section-field" *ngIf="field.get('category').value != null">
+																	<div class="col-12 col-xl-4" *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')">
@@ -161,7 +161,7 @@
 																			<mat-error *ngIf="field.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 																		</mat-form-field>
 																	</div>
-																	<div class="col-4 section-field" *ngIf="field.get('category').value != null">
+																	<div class="col-12 col-xl-4" *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')">
@@ -169,7 +169,7 @@
 																			<mat-error *ngIf="field.get('placeholder').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 																		</mat-form-field>
 																	</div>
-																	<div class="col-4 auto section-field" *ngIf="field.get('category').value != null">
+																	<div class="col-12 col-xl-4" *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')">
@@ -177,7 +177,7 @@
 																			<mat-error *ngIf="field.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 																		</mat-form-field>
 																	</div>
-																	<div class="col-4 section-field" *ngIf="field.get('category').value != null">
+																	<div class="col-12 col-xl-4" *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">
@@ -188,14 +188,14 @@
 																	</div>
 																</div>
 															</div>
-															<div class="col-auto">
+															<div class="col-12 col-xl-auto">
 																<div class="row">
 																	<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="col-auto section-field section-options-horizontal">
+																	<div [hidden]="viewOnly" class="col-auto 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>
@@ -225,62 +225,88 @@
 												</div>
 											</div>
 
-											<div cdkDropList class="col-12" (cdkDropListDropped)="dropDescriptionTemplates($event, sectionIndex)">
-												<div *ngFor="let descriptionTemplate of section.get('descriptionTemplates').controls; let descriptionTemplateIndex=index;" cdkDrag class="row align-items-center" [cdkDragDisabled]="formGroup.disabled">
-													<div class="description-fields-wrapper">
-														<div class="description-field-index">
-															<span style="font-size: 18px;">{{descriptionTemplateIndex + 1}}</span>
+											<div class="row">
+												<div cdkDropList class="col-12 mt-3" (cdkDropListDropped)="dropDescriptionTemplates($event, sectionIndex)">
+													<div *ngFor="let descriptionTemplate of section.get('descriptionTemplates').controls; let descriptionTemplateIndex=index;" cdkDrag class="description-fields-wrapper row align-items-center mt-1" [cdkDragDisabled]="formGroup.disabled" (mouseenter)="onDescriptionTemplateHover(descriptionTemplateIndex)" (mouseleave)="clearHoveredDescriptionTemplate()">
+
+														<div class="col-auto section-options-vertical">
+															<div class="row justify-content-center">
+																<div class="col-auto">
+																	<span *ngIf="!isDescriptionTemplateSelected(descriptionTemplateIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.42rem 0 0.45rem;">{{descriptionTemplateIndex + 1}}</span>
+																	<mat-icon *ngIf="isDescriptionTemplateSelected(descriptionTemplateIndex)" [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 class="action-list-icon" matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-DESCRIPTION-TEMPLATE' | translate}}" (click)="removeDescriptionTemplate(sectionIndex, descriptionTemplateIndex)" [disabled]="formGroup.disabled">
+																		<mat-icon>delete</mat-icon>
+																	</button>
+																</div>
+															</div>
 														</div>
-														<div class="description-field-sortable"><mat-icon [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div>
-														<div class="description-field-template">
-															<mat-form-field class="w-100">
-																<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE' | translate}}</mat-label>
-																<app-single-auto-complete [formControl]="descriptionTemplate.get('descriptionTemplateGroupId')" [hidePlaceholder]="true" [configuration]="descriptionTempalteGroupSingleAutocompleteConfiguration" (optionActionClicked)="onPreviewDescriptionTemplate($event, i)"></app-single-auto-complete>
-																<mat-error *ngIf="descriptionTemplate.get('descriptionTemplateGroupId').hasError('backendError')">{{descriptionTemplate.get('descriptionTemplateGroupId').getError('backendError').message}}</mat-error>
-																<mat-error *ngIf="descriptionTemplate.get('descriptionTemplateGroupId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-															</mat-form-field>
-														</div>
-														<div class="description-field-template-label">
-															<mat-form-field class="w-100">
-																<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-LABEL' | translate}}</mat-label>
-																<input matInput type="text" name="label" [formControl]="descriptionTemplate.get('label')">
-																<mat-error *ngIf="descriptionTemplate.get('label').hasError('backendError')">{{descriptionTemplate.get('label').getError('backendError').message}}</mat-error>
-																<mat-error *ngIf="descriptionTemplate.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-															</mat-form-field>
-														</div>
-														<div class="description-field-template-min-multiplicity">
-															<mat-form-field class="w-100">
-																<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-MIN-MULTIPLICITY' | translate}}</mat-label>
-																<input matInput type="number" min="0" name="minMultiplicity" [formControl]="descriptionTemplate.get('minMultiplicity')">
-																<mat-error *ngIf="descriptionTemplate.get('minMultiplicity').hasError('backendError')">{{descriptionTemplate.get('minMultiplicity').getError('backendError').message}}</mat-error>
-																<mat-error *ngIf="descriptionTemplate.get('minMultiplicity').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-															</mat-form-field>
-														</div>
-														<div class="description-field-template-max-multiplicity">
-															<mat-form-field class="w-100">
-																<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-MAX-MULTIPLICITY' | translate}}</mat-label>
-																<input matInput type="number" min="1" name="maxMultiplicity" [formControl]="descriptionTemplate.get('maxMultiplicity')">
-																<mat-error *ngIf="descriptionTemplate.get('maxMultiplicity').hasError('backendError')">{{descriptionTemplate.get('maxMultiplicity').getError('backendError').message}}</mat-error>
-																<mat-error *ngIf="descriptionTemplate.get('maxMultiplicity').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-															</mat-form-field>
-														</div>
-														<div class="description-field-delete">
-															<button mat-icon-button class="action-list-icon" matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-DESCRIPTION-TEMPLATE' | translate}}" (click)="removeDescriptionTemplate(sectionIndex, descriptionTemplateIndex)" [disabled]="formGroup.disabled">
-																<mat-icon>delete</mat-icon>
-															</button>
+														<div class="col-auto pr-0 section-options-horizontal">
+																<span *ngIf="!isDescriptionTemplateSelected(descriptionTemplateIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.45rem;">{{descriptionTemplateIndex + 1}}</span>
+																<mat-icon *ngIf="isDescriptionTemplateSelected(descriptionTemplateIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
+														</div>	
+														
+														<div class="col">
+															<div class="row">
+																<div class="col-12 col-lg-6 col-xl-3">
+																	<mat-form-field class="w-100">
+																		<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE' | translate}}</mat-label>
+																		<app-single-auto-complete [formControl]="descriptionTemplate.get('descriptionTemplateGroupId')" [hidePlaceholder]="true" [configuration]="descriptionTempalteGroupSingleAutocompleteConfiguration" (optionActionClicked)="onPreviewDescriptionTemplate($event, i)"></app-single-auto-complete>
+																		<mat-error *ngIf="descriptionTemplate.get('descriptionTemplateGroupId').hasError('backendError')">{{descriptionTemplate.get('descriptionTemplateGroupId').getError('backendError').message}}</mat-error>
+																		<mat-error *ngIf="descriptionTemplate.get('descriptionTemplateGroupId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+																	</mat-form-field>
+																</div>
+																<div class="col-12 col-lg-6 col-xl-3">
+																	<mat-form-field class="w-100">
+																		<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-LABEL' | translate}}</mat-label>
+																		<input matInput type="text" name="label" [formControl]="descriptionTemplate.get('label')">
+																		<mat-error *ngIf="descriptionTemplate.get('label').hasError('backendError')">{{descriptionTemplate.get('label').getError('backendError').message}}</mat-error>
+																		<mat-error *ngIf="descriptionTemplate.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+																	</mat-form-field>
+																</div>
+																<div class="col-12 col-lg-6 col-xl-3">
+																	<mat-form-field class="w-100">
+																		<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-MIN-MULTIPLICITY' | translate}}</mat-label>
+																		<input matInput type="number" min="0" name="minMultiplicity" [formControl]="descriptionTemplate.get('minMultiplicity')">
+																		<mat-error *ngIf="descriptionTemplate.get('minMultiplicity').hasError('backendError')">{{descriptionTemplate.get('minMultiplicity').getError('backendError').message}}</mat-error>
+																		<mat-error *ngIf="descriptionTemplate.get('minMultiplicity').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+																	</mat-form-field>
+																</div>
+																<div class="col-12 col-lg-6 col-xl-3">
+																	<mat-form-field class="w-100">
+																		<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-MAX-MULTIPLICITY' | translate}}</mat-label>
+																		<input matInput type="number" min="1" name="maxMultiplicity" [formControl]="descriptionTemplate.get('maxMultiplicity')">
+																		<mat-error *ngIf="descriptionTemplate.get('maxMultiplicity').hasError('backendError')">{{descriptionTemplate.get('maxMultiplicity').getError('backendError').message}}</mat-error>
+																		<mat-error *ngIf="descriptionTemplate.get('maxMultiplicity').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+																	</mat-form-field>
+																</div>
+															</div>
 														</div>
+														<div class="col-12 col-xl-auto section-options-horizontal">
+															<div class="row">
+																<div class="col-auto">
+																	<button mat-icon-button class="action-list-icon" matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-DESCRIPTION-TEMPLATE' | translate}}" (click)="removeDescriptionTemplate(sectionIndex, descriptionTemplateIndex)" [disabled]="formGroup.disabled">
+																		<mat-icon>delete</mat-icon>
+																	</button>
+																</div>
+															</div>
+														</div>	
 													</div>
+													<mat-error *ngIf="section.get('descriptionTemplates').hasError('backendError')">{{section.get('descriptionTemplates').getError('backendError').message}}</mat-error>
 												</div>
-												<mat-error *ngIf="section.get('descriptionTemplates').hasError('backendError')">{{section.get('descriptionTemplates').getError('backendError').message}}</mat-error>
 											</div>
-											<div *ngIf="section.get('hasTemplates').value == true">
-												<mat-form-field class="col-6 mt-3">
-													<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.PREFILLING-SOURCES' | translate}}</mat-label>
-													<app-multiple-auto-complete [formControl]="section.get('prefillingSourcesIds')" [configuration]="prefillingSourceService.multipleAutocompleteConfiguration"></app-multiple-auto-complete>
-													<mat-error *ngIf="section.get('prefillingSourcesIds').hasError('backendError')">{{section.get('prefillingSourcesIds').getError('backendError').message}}</mat-error>
-												</mat-form-field>
+											<div class="row">
+												<div *ngIf="section.get('hasTemplates').value == true" class="col-lg-6 col-12">
+													<mat-form-field class="w-100 mt-3">
+														<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.PREFILLING-SOURCES' | translate}}</mat-label>
+														<app-multiple-auto-complete [formControl]="section.get('prefillingSourcesIds')" [configuration]="prefillingSourceService.multipleAutocompleteConfiguration"></app-multiple-auto-complete>
+														<mat-error *ngIf="section.get('prefillingSourcesIds').hasError('backendError')">{{section.get('prefillingSourcesIds').getError('backendError').message}}</mat-error>
+													</mat-form-field>
+												</div>
 											</div>
 
+
 										</mat-card-content>
 
 
@@ -291,7 +317,6 @@
 							</div>
 						</div>
 
-
 						<div class="col-12">
 							<div class="row">
 								<div class="col-auto">
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 c3fcf299d..ebd157447 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
@@ -135,12 +135,9 @@
 	}
 }
 
+.description-fields-wrapper,
 .section-fields-wrapper {
 	width: 100%;
-	margin-top: 1.0rem;
-	display: flex;
-	flex-wrap: wrap; // ??
-	align-items: center;
 	
 	.section-options-vertical {
 		display: none;
@@ -159,27 +156,8 @@
 		}
 		
 		.section-options-vertical {
-			width: 100%;
 			display: initial;
 		}
-
-		.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;
 	}
 }
 
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 6e50e95b8..d9ee7ef17 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
@@ -64,6 +64,7 @@ export class DmpBlueprintEditorComponent extends BaseEditor<DmpBlueprintEditorMo
 	showInactiveDetails = false;
 
 	hoveredSectionIndex:number = -1;
+	hoveredDescriptionTemplateIndex:number = -1;
 
 	dmpBlueprintSectionFieldCategory = DmpBlueprintFieldCategory;
 	dmpBlueprintSystemFieldType = DmpBlueprintSystemFieldType;
@@ -395,6 +396,18 @@ export class DmpBlueprintEditorComponent extends BaseEditor<DmpBlueprintEditorMo
 
 	//Description Templates
 
+	isDescriptionTemplateSelected(descriptionTemplateId: number): boolean {
+		return this.hoveredDescriptionTemplateIndex === descriptionTemplateId;
+	}
+
+	onDescriptionTemplateHover(descriptionTemplateId: any): void {
+		this.hoveredDescriptionTemplateIndex = descriptionTemplateId;
+	}
+
+	clearHoveredDescriptionTemplate(): void {
+		this.hoveredDescriptionTemplateIndex = -1;
+	}
+
 	removeAllDescriptionTemplates(matCheckBox: MatCheckboxChange, sectionIndex: number) {
 		if (matCheckBox.checked == false) {
 			const descriptionTemplateSize = ((this.formGroup.get('definition').get('sections') as FormArray).at(sectionIndex).get('descriptionTemplates') as FormArray).length;
diff --git a/dmp-frontend/src/app/ui/description/editor/description-editor.component.html b/dmp-frontend/src/app/ui/description/editor/description-editor.component.html
index 6f721cb22..702dbe110 100644
--- a/dmp-frontend/src/app/ui/description/editor/description-editor.component.html
+++ b/dmp-frontend/src/app/ui/description/editor/description-editor.component.html
@@ -47,7 +47,7 @@
 									</mat-menu>
 								</div>
 
-								<mat-divider *ngIf="formGroup.get('id').value && (!viewOnly || (isLockedByUser && !viewOnly) || !isLockedByUser || (hasReversableStatus() && isLockedByUser))" [vertical]="true" class="ml-2 mr-2"></mat-divider>
+								<mat-divider *ngIf="formGroup.get('id').value && (!viewOnly || (!isLocked && !viewOnly) || isLocked || (hasReversableStatus() && !isLocked))" [vertical]="true" class="ml-2 mr-2"></mat-divider>
 
 								<div *ngIf="isDirty() && !viewOnly" class="col-auto d-flex align-items-center pr-0">
 									<button [disabled]="saving" type="button" mat-raised-button class="description-discard-btn" (click)="discardChanges()">
@@ -55,7 +55,7 @@
 									</button>
 								</div>
 								<div class="col-auto d-flex align-items-center">
-									<button [disabled]="saving" *ngIf="isLockedByUser && !viewOnly && hasReversableStatus() == false" mat-raised-button class="description-save-btn mr-2" type="button">
+									<button [disabled]="saving" *ngIf="!isLocked && !viewOnly && hasReversableStatus() == false" mat-raised-button class="description-save-btn mr-2" type="button">
 										<span class="d-flex flex-row row">
 											<span (click)="!saving?formSubmit():null" class="col">{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE' | translate }}</span>
 											<mat-divider [vertical]="true"></mat-divider>
@@ -73,9 +73,9 @@
 										<button [disabled]="saving" mat-menu-item (click)="save()" type="button">{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CONTINUE' | translate }}</button>
 									</mat-menu>
 
-									<button [disabled]="saving" *ngIf="isLockedByUser && !viewOnly && hasReversableStatus() == false" mat-raised-button class="description-save-btn mr-2" type="button" (click)="finalize()">{{ 'DESCRIPTION-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
-									<button [disabled]="saving" *ngIf="!isLockedByUser" mat-raised-button disabled class="description-save-btn cursor-default" type="button">{{ 'DMP-OVERVIEW.LOCKED' | translate}}</button>
-									<button [disabled]="saving" *ngIf="hasReversableStatus() && isLockedByUser" mat-raised-button class="description-save-btn mr-2" (click)="reverse()" type="button">{{ 'DESCRIPTION-EDITOR.ACTIONS.REVERSE' | translate }}</button>
+									<button [disabled]="saving" *ngIf="!isLocked && !viewOnly && hasReversableStatus() == false" mat-raised-button class="description-save-btn mr-2" type="button" (click)="finalize()">{{ 'DESCRIPTION-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
+									<button [disabled]="saving" *ngIf="isLocked" mat-raised-button disabled class="description-save-btn cursor-default" type="button">{{ 'DMP-OVERVIEW.LOCKED' | translate}}</button>
+									<button [disabled]="saving" *ngIf="hasReversableStatus() && !isLocked" mat-raised-button class="description-save-btn mr-2" (click)="reverse()" type="button">{{ 'DESCRIPTION-EDITOR.ACTIONS.REVERSE' | translate }}</button>
 								</div>
 							</div>
 						</div>
@@ -116,7 +116,7 @@
 							<div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div>
 							<span class="material-icons">chevron_right</span>
 						</div>
-						<button [disabled]="saving" (click)="save(saveAnd.addNew)" *ngIf="(step === maxStep) && isLockedByUser && formGroup.get('descriptionTemplateId').value && !viewOnly" mat-raised-button type="button" class="col-auto stepper-btn add-description-btn ml-auto">
+						<button [disabled]="saving" (click)="save(saveAnd.addNew)" *ngIf="(step === maxStep) && !isLocked && formGroup.get('descriptionTemplateId').value && !viewOnly" mat-raised-button type="button" class="col-auto stepper-btn add-description-btn ml-auto">
 							{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-ADD-NEW' | translate }}
 						</button>
 					</div>
diff --git a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.html b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.html
index bd01cfe40..912cd2d99 100644
--- a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.html
+++ b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.html
@@ -13,12 +13,12 @@
 
 <div *ngIf="fieldSet.extendedDescription  && !isChild" class="col-12 mt-3 mb-3">
 	<div *ngIf="!showExtendedDescription" (click)="showExtendedDescription = !showExtendedDescription">
-		<span class="more d-flex justify-content-center">{{'DATASET-EDITOR.QUESTION.EXTENDED-DESCRIPTION.VIEW-MORE' | translate}}</span>
+		<span class="more d-flex justify-content-center">{{'DESCRIPTION-EDITOR.ACTIONS.VIEW-MORE' | translate}}</span>
 	</div>
 	<div *ngIf="showExtendedDescription">
 		<h6 [innerHTML]="fieldSet.extendedDescription"></h6>
 		<span class="more d-flex justify-content-center" (click)="showExtendedDescription = !showExtendedDescription">
-			{{'DATASET-EDITOR.QUESTION.EXTENDED-DESCRIPTION.VIEW-LESS' | translate}}
+			{{'DESCRIPTION-EDITOR.ACTIONS.VIEW-LESS' | translate}}
 		</span>
 	</div>
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.html b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.html
index a81d198b5..e8f96ed06 100644
--- a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.html
+++ b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.html
@@ -37,7 +37,7 @@
 					<mat-icon>add_circle</mat-icon>
 				</button>
 				<span class="mt-1" *ngIf="fieldSet?.multiplicity?.placeholder">{{fieldSet.multiplicity.placeholder}}</span>
-				<span class="mt-1" *ngIf="!fieldSet?.multiplicity?.placeholder">{{('DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' + (fieldSet.multiplicity.tableView?'-TABLEVIEW':'')) | translate}}</span>
+				<span class="mt-1" *ngIf="!fieldSet?.multiplicity?.placeholder">{{('DESCRIPTION-EDITOR.ACTIONS.MULTIPLICITY-ADD-ONE-FIELD' + (fieldSet.multiplicity.tableView?'-TABLEVIEW':'')) | translate}}</span>
 			</span>
 		</div>
 	</div>
@@ -65,7 +65,7 @@
 							<mat-icon>add_circle</mat-icon>
 						</button>
 						<span class="mt-1" *ngIf="fieldSet.multiplicity.placeholder">{{fieldSet.multiplicity.placeholder}}</span>
-						<span class="mt-1" *ngIf="!fieldSet.multiplicity.placeholder">{{('DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' + (fieldSet.multiplicity.tableView?'-TABLEVIEW':'')) | translate}}</span>
+						<span class="mt-1" *ngIf="!fieldSet.multiplicity.placeholder">{{('DESCRIPTION-EDITOR.ACTIONS.MULTIPLICITY-ADD-ONE-FIELD' + (fieldSet.multiplicity.tableView?'-TABLEVIEW':'')) | translate}}</span>
 					</span>
 				</td>
 			</tr>
@@ -75,6 +75,6 @@
 <!-- comment only on top level fieldset -->
 <div class="row">
 	<div *ngIf="fieldSet.hasCommentField && propertiesFormGroup?.get('items')?.at(0)?.get('comment')" class="col-12">
-		<rich-text-editor-component [form]="propertiesFormGroup?.get('items')?.at(0)?.get('comment')" [id]="'editor1'" [placeholder]="'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate" [wrapperClasses]="'mb-2'" [editable]="!propertiesFormGroup?.get('items')?.at(0)?.get('comment').disabled"></rich-text-editor-component>
+		<rich-text-editor-component [form]="propertiesFormGroup?.get('items')?.at(0)?.get('comment')" [id]="'editor1'" [placeholder]="'DESCRIPTION-EDITOR.FIELDS.COMMENT-PLACEHOLDER' | translate" [wrapperClasses]="'mb-2'" [editable]="!propertiesFormGroup?.get('items')?.at(0)?.get('comment').disabled"></rich-text-editor-component>
 	</div>
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/description/overview/description-overview.component.html b/dmp-frontend/src/app/ui/description/overview/description-overview.component.html
index ae046ae48..f022a76d2 100644
--- a/dmp-frontend/src/app/ui/description/overview/description-overview.component.html
+++ b/dmp-frontend/src/app/ui/description/overview/description-overview.component.html
@@ -12,7 +12,7 @@
 						<p class="col description-label p-0 ml-3 mb-0">{{ description.label }}</p>
 					</div>
 					<div class="row d-flex align-items-center mt-3 mb-4 label-txt">
-						<div *ngIf="canEdit" class="d-flex">
+						<div *ngIf="!isPublicView" class="d-flex">
 							<p class="ml-0 mb-0 label2-txt">
 								{{ enumUtils.toDmpUserRolesString(dmpService.getCurrentUserRolesInDmp(description?.dmp?.dmpUsers)) }}
 							</p>
diff --git a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html
index 05862add9..fb0859a81 100644
--- a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html
+++ b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html
@@ -90,7 +90,7 @@
 										<li *ngFor="let description of descriptionsInSection(section.id); let descriptionIndex = index" (click)="editDescription(description.id, false)" class="active-description">
 											<div class="d-flex flex-direction-row">
 												<div class="label" matTooltip="{{description.label}}">{{'DMP-EDITOR.DESCRIPTION' | translate}}: {{ description.label }}</div>
-												<mat-icon *ngIf="description.status !== descriptionStatusEnum.Finalized && canDeleteSection(section.id)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" class="ml-2 mr-2 remove-description size-16" matTooltip="{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}" (click)="$event.stopPropagation(); removeDescription(description.id)">close</mat-icon>
+												<mat-icon *ngIf="description.status !== descriptionStatusEnum.Finalized && canDeleteSection(section.id) && !formGroup.disabled" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" class="ml-2 mr-2 remove-description size-16" matTooltip="{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}" (click)="$event.stopPropagation(); removeDescription(description.id)">close</mat-icon>
 												<mat-icon *ngIf="description.status === descriptionStatusEnum.Finalized" class="ml-2 mr-2 status-icon check-icon size-16" matTooltip="{{'TYPES.DESCRIPTION-STATUS.FINALISED' | translate}}">check</mat-icon>
 											</div>
 										</li>
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 aa648dd24..1b86486fd 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
@@ -30,18 +30,18 @@
 <ng-template #userForm let-user let-userIndex="index">
 
 
-	<div class="col-auto pb-1">
+	<div class="col-12 col-xl-auto pb-1">
 		<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 user-field">
+	<div class="col-12 col-xl-auto">
 		<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>
-	<div class="col-auto mt-3 user-field" *ngIf="user.get('userType').value == dmpUserTypeEnum.Internal">
+	<div class="col-12 col-xl mt-3" *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>
@@ -49,7 +49,7 @@
 			<mat-error *ngIf="user.get('user').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 		</mat-form-field>
 	</div>
-	<div class="col-auto mt-3 user-field" *ngIf="user.get('userType').value == dmpUserTypeEnum.External">
+	<div class="col-12 col-xl mt-3" *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')">
@@ -57,7 +57,7 @@
 			<mat-error *ngIf="user.get('email').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 		</mat-form-field>
 	</div>
-	<div class="col-auto mt-3 user-field">
+	<div class="col-12 col-xl mt-3">
 		<mat-form-field class="w-100">
 			<mat-label>{{'DMP-EDITOR.FIELDS1.USER-ROLE' | translate}}</mat-label>
 			<mat-select [formControl]="user.get('role')">
@@ -67,7 +67,7 @@
 			<mat-error *ngIf="user.get('role').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 		</mat-form-field>
 	</div>
-	<div class="col-auto mt-3 user-field" *ngIf="sections">
+	<div class="col-12 col-xl mt-3" *ngIf="sections">
 		<mat-form-field class="w-100">
 			<mat-label>{{'DMP-EDITOR.FIELDS1.SECTION' | translate}}</mat-label>
 			<mat-select [formControl]="user.get('sectionId')">
@@ -79,7 +79,7 @@
 			<mat-error *ngIf="user.get('sectionId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |translate}}</mat-error>
 		</mat-form-field>
 	</div>
-	<div class="col-auto user-field">
+	<div class="col-12 col-xl-auto">
 		<button mat-icon-button class="action-list-icon" matTooltip="{{'DMP-EDITOR.ACTIONS1.REMOVE-USER' | translate}}" (click)="removeUser(userIndex)" [disabled]="form.disabled">
 			<mat-icon>delete</mat-icon>
 		</button>
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 a4808a077..a47f72664 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
@@ -13,16 +13,3 @@
 	cursor: auto; 
 	color: rgba(0, 0, 0, 0.38);;
 }
-
-
-@media (max-width:1600px) {
-	
-	.user-fields {
-		flex-direction: column;
-	}
-		
-	.user-field {
-		align-self: flex-start;
-		width: 100%;
-	}
-}
\ No newline at end of file
diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json
index 168636ec9..05c32f3af 100644
--- a/dmp-frontend/src/assets/i18n/en.json
+++ b/dmp-frontend/src/assets/i18n/en.json
@@ -383,7 +383,6 @@
 						"MULTIPLICITY-ADD-ONE-FIELD": "Add more",
 						"MULTIPLICITY-ADD-ONE-FIELD-TABLEVIEW": "Add row",
 						"ORDER": "Order",
-						"COMMENT-PLACEHOLDER": "Please Specify",
 						"COMMENT-HINT": "Provide additional information or justification about your selection",
 						"SEMANTICS": "Semantics",
 						"EXPORT": "Include in Export"
@@ -859,6 +858,9 @@
 				"DESCRIPTION-TEMPLATE-VERSION": "Version"
 			}
 		},
+		"FIELDS": {
+			"COMMENT-PLACEHOLDER": "Please Specify"
+		},
 		"ACTIONS": {
 			"BACK-TO": "Back to",
 			"EXPORT": "Export",
@@ -871,9 +873,13 @@
 			"REVERSE": "Undo Finalization",
 			"UNDO-FINALIZATION-QUESTION": "Undo finalization?",
 			"CONFIRM": "Yes",
-			"REJECT": "No"
+			"REJECT": "No",
+			"MULTIPLICITY-ADD-ONE-FIELD": "Add more",
+			"MULTIPLICITY-ADD-ONE-FIELD-TABLEVIEW": "Add row",
+			"VIEW-MORE": "View more",
+			"VIEW-LESS": "View less"
 		},
-		"MESSAGES":{
+		"MESSAGES": {
 			"MISSING-FIELDS": "There are some required fields left unfilled. Please check the Plan and make sure that all required questions are answered and URLs are provided with valid input. (Missing fields are marked in red color)"
 		},
 		"LOCKED-DIALOG": {
diff --git a/dmp-frontend/src/common/base/base-editor.ts b/dmp-frontend/src/common/base/base-editor.ts
index af4b6d933..60ea6f7be 100644
--- a/dmp-frontend/src/common/base/base-editor.ts
+++ b/dmp-frontend/src/common/base/base-editor.ts
@@ -186,14 +186,12 @@ export abstract class BaseEditor<EditorModelType extends BaseEditorModel, Entity
 							message: this.language.instant(message)
 						}, maxWidth: '30em'
 					});
-				} else{
-					this.isLockedByUser = true;
 				}
 
 				if (!this.isLocked && !isNullOrUndefined(this.authService.currentAccountIsAuthenticated())) {
 					// lock it.
 					this.lockService.lock(itemId, targetType).pipe(takeUntil(this._destroyed)).subscribe(async result => {
-						this.isLocked = true;
+						this.isLockedByUser = true;
 						interval(this.configurationService.lockInterval).pipe(takeUntil(this._destroyed)).subscribe(() => this.touchLock(itemId));
 					});
 				}
@@ -211,6 +209,6 @@ export abstract class BaseEditor<EditorModelType extends BaseEditorModel, Entity
 
 	ngOnDestroy(): void {
 		super.ngOnDestroy();
-		if(this.isLocked) this.unlockTarget(this.editorModel.id);
+		if(this.isLockedByUser) this.unlockTarget(this.editorModel.id);
 	}
 }