diff --git a/dmp-frontend/package.json b/dmp-frontend/package.json
index 2f48fb926..ed4ad77f2 100644
--- a/dmp-frontend/package.json
+++ b/dmp-frontend/package.json
@@ -31,6 +31,7 @@
     "moment": "^2.24.0",
     "moment-timezone": "^0.5.26",
     "ng-dialog-animation": "^9.0.3",
+    "ng2-dragula": "^2.1.1",
     "ngx-cookie-service": "^2.2.0",
     "ngx-cookieconsent": "^2.2.3",
     "ngx-dropzone": "^2.2.2",
diff --git a/dmp-frontend/src/app/app.component.ts b/dmp-frontend/src/app/app.component.ts
index fb6133528..1d17cb1ae 100644
--- a/dmp-frontend/src/app/app.component.ts
+++ b/dmp-frontend/src/app/app.component.ts
@@ -2,7 +2,7 @@
 import { of as observableOf, Subscription } from 'rxjs';
 
 import { switchMap, filter, map, takeUntil } from 'rxjs/operators';
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { environment } from '../environments/environment';
@@ -18,6 +18,8 @@ import { ConfigurationService } from './core/services/configuration/configuratio
 import { Location } from '@angular/common';
 import { MatomoInjector } from 'ngx-matomo';
 import { MatomoService } from './core/services/matomo/matomo-service';
+import { SideNavService } from './core/services/sidenav/side-nav.sevice';
+import { MatSidenav } from '@angular/material';
 
 
 declare const gapi: any;
@@ -28,14 +30,17 @@ declare var $: any;
 	templateUrl: './app.component.html',
 	styleUrls: ['./app.component.scss']
 })
-export class AppComponent implements OnInit {
+export class AppComponent implements OnInit, AfterViewInit {
 
 	hasBreadCrumb = observableOf(false);
-	sideNavOpen = false;
+	// sideNavOpen = false;
+	private sideNavSubscription: Subscription;
 	helpContentEnabled: boolean;
 	private statusChangeSubscription: Subscription;
 	onlySplash = true;
 
+	@ViewChild('sidenav', {static:false}) sidenav:MatSidenav;
+
 	constructor(
 		private router: Router,
 		private route: ActivatedRoute,
@@ -49,12 +54,47 @@ export class AppComponent implements OnInit {
 		private language: LanguageService,
 		private configurationService: ConfigurationService,
 		private location: Location,
-		private matomoService: MatomoService
+		private matomoService: MatomoService,
+		private sidenavService: SideNavService
 	) {
 		this.initializeServices();
 		this.matomoService.init();
 		this.helpContentEnabled = configurationService.helpService.enabled;
 	}
+	ngAfterViewInit(): void {
+		setTimeout(() => {
+			this.sideNavSubscription = this.sidenavService.status().subscribe(isopen=>{
+				const hamburger = document.getElementById('hamburger');
+				if(isopen){
+					//update value of hamburfer
+					if(!hamburger){//try later
+						setTimeout(() => {
+							const hamburger  = document.getElementById('hamburger');
+							if(hamburger){
+								hamburger.classList.add('change');		
+							}
+						}, 300);
+					}else{
+						hamburger.classList.add('change');
+					}
+					this.sidenav.open()
+				}else{//closed
+					if(!hamburger){//try later
+						setTimeout(() => {
+							const hamburger  = document.getElementById('hamburger');
+							if(hamburger){
+								hamburger.classList.remove('change');
+							}
+						}, 300);
+					}else{
+						hamburger.classList.remove('change');
+					}
+					this.sidenav.close();
+	
+				}
+			});
+		});
+	}
 
 	onActivate(event: any) {
 		this.breadCrumbResolverService.push(event);
@@ -79,7 +119,9 @@ export class AppComponent implements OnInit {
 			this.onlySplash = false;
 		}
 		if (!this.cookieService.check("cookiesConsent")) {
-			this.cookieService.set("cookiesConsent", "false", 356);
+			// this.cookieService.set("cookiesConsent", "false", 356);
+			this.cookieService.set("cookiesConsent", "false", 356,null,null,false, 'Lax');
+			
 		}
 
 		this.hasBreadCrumb = this.router.events.pipe(
@@ -112,7 +154,8 @@ export class AppComponent implements OnInit {
 
 		this.statusChangeSubscription = this.ccService.statusChange$.subscribe((event: NgcStatusChangeEvent) => {
 			if (event.status == "dismiss") {
-				this.cookieService.set("cookiesConsent", "true", 365);
+				// this.cookieService.set("cookiesConsent", "true", 365);
+				this.cookieService.set("cookiesConsent", "true", 356,null,null,false, 'Lax');
 			}
 		});
 
@@ -134,7 +177,7 @@ export class AppComponent implements OnInit {
 				}
 				this.ccService.destroy();
 				this.ccService.init(this.ccService.getConfig());
-			})
+		});
 	}
 
 	translateTitle(ttl: string) {
@@ -153,6 +196,9 @@ export class AppComponent implements OnInit {
 
 	ngOnDestroy() {
 		this.statusChangeSubscription.unsubscribe();
+		if(this.sideNavSubscription){
+			this.sideNavSubscription.unsubscribe();
+		}
 	}
 
 	login() {
diff --git a/dmp-frontend/src/app/app.module.ts b/dmp-frontend/src/app/app.module.ts
index 3582aa783..d5ad06c43 100644
--- a/dmp-frontend/src/app/app.module.ts
+++ b/dmp-frontend/src/app/app.module.ts
@@ -32,6 +32,7 @@ import { TranslateServerLoader } from './core/services/language/server.loader';
 import { MatomoService } from './core/services/matomo/matomo-service';
 import { GuidedTourModule } from './library/guided-tour/guided-tour.module';
 import { Oauth2DialogModule } from './ui/misc/oauth2-dialog/oauth2-dialog.module';
+import { DragulaModule } from 'ng2-dragula';
 
 // AoT requires an exported function for factories
 export function HttpLoaderFactory(http: HttpClient, appConfig: ConfigurationService) {
@@ -107,7 +108,8 @@ const appearance: MatFormFieldDefaultOptions = {
 		SidebarModule,
 		NgcCookieConsentModule.forRoot(cookieConfig),
 		Oauth2DialogModule,
-		GuidedTourModule.forRoot()
+		GuidedTourModule.forRoot(),
+		DragulaModule.forRoot()
 	],
 	declarations: [
 		AppComponent,
diff --git a/dmp-frontend/src/app/core/model/dataset-profile-definition/field-data/field-data.ts b/dmp-frontend/src/app/core/model/dataset-profile-definition/field-data/field-data.ts
index 2a2e953f8..47adf26c8 100644
--- a/dmp-frontend/src/app/core/model/dataset-profile-definition/field-data/field-data.ts
+++ b/dmp-frontend/src/app/core/model/dataset-profile-definition/field-data/field-data.ts
@@ -94,7 +94,7 @@ export interface ResearchersFieldData extends FieldData {
 
 }
 
-export interface OrganizationsFieldData extends FieldData {
+export interface OrganizationsFieldData extends AutoCompleteFieldData {
 
 }
 
diff --git a/dmp-frontend/src/app/core/model/dataset/dataset-id.model.ts b/dmp-frontend/src/app/core/model/dataset/dataset-id.model.ts
index 5020bbbcb..1063a3cbf 100644
--- a/dmp-frontend/src/app/core/model/dataset/dataset-id.model.ts
+++ b/dmp-frontend/src/app/core/model/dataset/dataset-id.model.ts
@@ -6,11 +6,16 @@ export class DatasetIdModel {
 	type: string;
 
 	constructor(data: any) {
+		try{
 		const parsed = JSON.parse(data);
 		if (!isNullOrUndefined(parsed)) {
 			this.identifier = parsed.identifier;
 			this.type = parsed.type;
 		}
+		}
+		catch(error){
+			console.warn('Could not parse DatasetIdModel');
+		}
 	}
 
 	buildForm(): FormGroup {
diff --git a/dmp-frontend/src/app/core/query/dataset/daatset-external-autocomplete-criteria.ts b/dmp-frontend/src/app/core/query/dataset/daatset-external-autocomplete-criteria.ts
index 9351b8ed1..d511e9432 100644
--- a/dmp-frontend/src/app/core/query/dataset/daatset-external-autocomplete-criteria.ts
+++ b/dmp-frontend/src/app/core/query/dataset/daatset-external-autocomplete-criteria.ts
@@ -1,6 +1,8 @@
+import { AutoCompleteSingleData } from "@app/core/model/dataset-profile-definition/field-data/field-data";
 import { BaseCriteria } from "../base-criteria";
 
 export class DatasetExternalAutocompleteCriteria extends BaseCriteria {
 	public profileID: String;
 	public fieldID: String;
+	public autocompleteOptions: AutoCompleteSingleData;
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/core/services/auth/auth.service.ts b/dmp-frontend/src/app/core/services/auth/auth.service.ts
index 4217d66e5..e3fb7875e 100644
--- a/dmp-frontend/src/app/core/services/auth/auth.service.ts
+++ b/dmp-frontend/src/app/core/services/auth/auth.service.ts
@@ -81,7 +81,8 @@ export class AuthService extends BaseService {
 		return this.http.post(url, loginInfo, { headers: this.headers }).pipe(
 			map((res: any) => {
 				const principal = this.current(res.payload);
-				this.cookieService.set('cookiesConsent', 'true', 356);
+				// this.cookieService.set('cookiesConsent', 'true', 356);
+				this.cookieService.set("cookiesConsent", "true", 356,null,null,false, 'Lax');
 				//this.loginContextSubject.next(true);
 				return principal;
 			}),
@@ -105,7 +106,8 @@ export class AuthService extends BaseService {
 		return this.http.post(url, credentials, { headers: this.headers }).pipe(
 			map((res: any) => {
 				const principal = this.current(res.payload);
-				this.cookieService.set('cookiesConsent', 'true', 356);
+				// this.cookieService.set('cookiesConsent', 'true', 356);
+				this.cookieService.set("cookiesConsent", "true", 356,null,null,false, 'Lax');
 				//this.loginContextSubject.next(true);
 				return principal;
 			}),
diff --git a/dmp-frontend/src/app/core/services/dataset/dataset-external-autocomplete.service.ts b/dmp-frontend/src/app/core/services/dataset/dataset-external-autocomplete.service.ts
index 35ee12a6f..bcbfd2630 100644
--- a/dmp-frontend/src/app/core/services/dataset/dataset-external-autocomplete.service.ts
+++ b/dmp-frontend/src/app/core/services/dataset/dataset-external-autocomplete.service.ts
@@ -1,11 +1,12 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
 import { environment } from '../../../../environments/environment';
 import { DatasetExternalAutocompleteCriteria } from '../../query/dataset/daatset-external-autocomplete-criteria';
 import { RequestItem } from '../../query/request-item';
 import { DatasetProfileService } from '../dataset-profile/dataset-profile.service';
 import { ConfigurationService } from '../configuration/configuration.service';
+import { map } from 'rxjs/operators';
 
 @Injectable()
 export class DatasetExternalAutocompleteService {
@@ -27,4 +28,14 @@ export class DatasetExternalAutocompleteService {
 		return this.httpClient.post(this.configurationService.server + 'search/autocomplete', lookUpItem);
 	}
 
-}
+	queryApi(requestItem: RequestItem<DatasetExternalAutocompleteCriteria>):Observable<any>{ //TODO
+
+		return of([
+			{
+				label:'Preview not supported yet',
+				source:''
+			}
+		]);
+	}
+
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/core/services/sidenav/side-nav.sevice.ts b/dmp-frontend/src/app/core/services/sidenav/side-nav.sevice.ts
new file mode 100644
index 000000000..4fe163777
--- /dev/null
+++ b/dmp-frontend/src/app/core/services/sidenav/side-nav.sevice.ts
@@ -0,0 +1,24 @@
+import { Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+import { BehaviorSubject } from "rxjs";
+
+@Injectable({
+    providedIn:'root'
+})
+export class SideNavService {
+
+    private sidebar$:BehaviorSubject<boolean> =  new BehaviorSubject<boolean>(true);
+
+    public status():Observable<boolean>{
+        return this.sidebar$.asObservable();
+    }
+
+    public setStatus(isOpen: boolean){
+        this.sidebar$.next(isOpen);
+    }
+
+    public toggle(){
+        this.sidebar$.next(!this.sidebar$.getValue());
+    }
+
+}
diff --git a/dmp-frontend/src/app/core/services/utilities/enum-utils.service.ts b/dmp-frontend/src/app/core/services/utilities/enum-utils.service.ts
index ddf120849..7edcb5100 100644
--- a/dmp-frontend/src/app/core/services/utilities/enum-utils.service.ts
+++ b/dmp-frontend/src/app/core/services/utilities/enum-utils.service.ts
@@ -12,6 +12,7 @@ import { DatasetProfileInternalDmpEntitiesType } from '../../common/enum/dataset
 import { RecentActivityOrder } from '@app/core/common/enum/recent-activity-order';
 import { Role } from '@app/core/common/enum/role';
 import { RoleOrganizationType } from '@app/core/common/enum/role-organization-type';
+import { ViewStyleType } from '@app/ui/admin/dataset-profile/editor/components/field/view-style-enum';
 
 @Injectable()
 export class EnumUtils {
@@ -90,6 +91,30 @@ export class EnumUtils {
 			case DatasetProfileFieldViewStyle.Validation: return this.language.instant('TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.VALIDATION');
 		}
 	}
+	toDatasetProfileViewTypeString(status: ViewStyleType) :string{
+		switch (status) {
+			case ViewStyleType.BooleanDecision: return this.language.instant('TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.BOOLEAN-DECISION');
+			case ViewStyleType.CheckBox: return this.language.instant('TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.CHECKBOX');
+			case ViewStyleType.Select: return this.language.instant('TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.SELECT');
+			case ViewStyleType.InternalDmpEntities: return this.language.instant('TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.INTERNAL-DMP-ENTITIES');
+			case ViewStyleType.FreeText: return this.language.instant('TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.FREE-TEXT');
+			case ViewStyleType.RadioBox: return this.language.instant('TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.RADIO-BOX');
+			case ViewStyleType.TextArea: return this.language.instant('TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.TEXT-AREA');
+			case ViewStyleType.DatePicker: return this.language.instant('TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.DATE-PICKER');
+			case ViewStyleType.ExternalDatasets: return this.language.instant('TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.EXTERNAL-DATASETS');
+			case ViewStyleType.DataRepositories: return this.language.instant('TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.DATA-REPOSITORIES');
+			case ViewStyleType.Registries: return this.language.instant('TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.REGISTRIES');
+			case ViewStyleType.Services: return this.language.instant('TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.SERVICES');
+			case ViewStyleType.Tags: return this.language.instant('TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.TAGS');
+			case ViewStyleType.Researchers: return this.language.instant('TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.RESEARCHERS');
+			case ViewStyleType.Organizations: return this.language.instant('TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.ORGANIZATIONS');
+			case ViewStyleType.DatasetIdentifier: return this.language.instant('TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.DATASET-IDENTIFIER');
+			case ViewStyleType.Currency: return this.language.instant('TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.CURRENCY');
+			case ViewStyleType.Validation: return this.language.instant('TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.VALIDATION');
+			case ViewStyleType.Other: return this.language.instant('TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.OTHER');
+		}
+		
+	}
 
 	toDatasetProfileComboBoxTypeString(status: DatasetProfileComboBoxType): string {
 		switch (status) {
diff --git a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
index 83b01d997..3c89cd3ff 100644
--- a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
+++ b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
@@ -10,7 +10,7 @@
 			</mat-chip>
 		</ng-container>
 	</mat-chip-list>
-	<input matInput #autocompleteInput class="col" [name]="id" autocomplete="off" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" (keydown)="onKeyDown($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)">
+	<input matInput #autocompleteInput class="col" [class.hide-placeholder]="hidePlaceholder" [name]="id" autocomplete="off" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" (keydown)="onKeyDown($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)">
 	<!-- The attribute autocomplete="nope", set by downshift, is ignored in Chrome 67 and Opera 54 (latest at the time of writing)
 	<input matInput #autocompleteInput class="col" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" (keydown)="onKeyDown($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)"> -->
 	<mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>arrow_drop_down</mat-icon>
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 1230c73a7..76cfcb18e 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
@@ -44,3 +44,24 @@
 	max-height: 4.8em !important;
 	overflow: auto !important;
 }
+.hide-placeholder{
+	&::-webkit-input-placeholder {
+	  /* WebKit browsers */
+	   color: transparent;
+	}
+	&:-moz-placeholder {
+	  /* Mozilla Firefox 4 to 18 */
+	   color: transparent;
+	}
+	&::-moz-placeholder {
+	  /* Mozilla Firefox 19+ */
+	   color: transparent;
+	}
+	&:-ms-input-placeholder {
+	  /* Internet Explorer 10+ */
+	   color: transparent;
+	}
+	&::placeholder {
+	   color: transparent;
+	}
+  }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts
index 89470bca2..fd9854690 100644
--- a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts
+++ b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts
@@ -66,6 +66,7 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 
 	get shouldLabelFloat() { return this.focused || !this.empty; }
 
+	@Input() hidePlaceholder: boolean = false;
 	@Input()
 	get placeholder() { return this._placeholder; }
 	set placeholder(placeholder) {
diff --git a/dmp-frontend/src/app/library/guided-tour/guided-tour.component.ts b/dmp-frontend/src/app/library/guided-tour/guided-tour.component.ts
index 913ab6d1b..e093b543b 100644
--- a/dmp-frontend/src/app/library/guided-tour/guided-tour.component.ts
+++ b/dmp-frontend/src/app/library/guided-tour/guided-tour.component.ts
@@ -388,7 +388,10 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy {
         }
 
         const scrollAdjustment = this.currentTourStep.scrollAdjustment ? this.currentTourStep.scrollAdjustment : 0;
-        const tourStepHeight = typeof this.tourStep.nativeElement.getBoundingClientRect === 'function' ? this.tourStep.nativeElement.getBoundingClientRect().height : 0;
+        let tourStepHeight = 0;
+        if (this.tourStep != null && this.tourStep.nativeElement != null && typeof this.tourStep.nativeElement.getBoundingClientRect === 'function') {
+            tourStepHeight = this.tourStep.nativeElement.getBoundingClientRect().height;
+        }
         const elementHeight = this.selectedElementRect.height + scrollAdjustment + tourStepHeight;
 
         if ((this.windowRef.nativeWindow.innerHeight - this.topOfPageAdjustment) < elementHeight) {
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/admin/field-data/auto-complete-single-data.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/admin/field-data/auto-complete-single-data.ts
index 929edc891..3bffd86d1 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/admin/field-data/auto-complete-single-data.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/admin/field-data/auto-complete-single-data.ts
@@ -1,7 +1,7 @@
 import { FieldDataEditorModel } from './field-data-editor-model';
 import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profile-combo-box-type';
 import { FieldDataOptionEditorModel } from './field-data-option-editor-model';
-import { FormGroup } from '@angular/forms';
+import { FormGroup, Validators } from '@angular/forms';
 import { AutoCompleteFieldData, AutoCompleteSingleData } from '@app/core/model/dataset-profile-definition/field-data/field-data';
 
 export class AutoCompleteSingleDataEditorModel extends FieldDataEditorModel<AutoCompleteSingleDataEditorModel> {
@@ -16,8 +16,8 @@ export class AutoCompleteSingleDataEditorModel extends FieldDataEditorModel<Auto
 	buildForm(disabled: boolean = false, skipDisable: Array<String> = []): FormGroup {
 		const formGroup = this.formBuilder.group({
 			label: [{ value: this.label, disabled: (disabled && !skipDisable.includes('AutoCompleteSingleDataEditorModel.label')) }],
-			url: [{ value: this.url, disabled: (disabled && !skipDisable.includes('AutoCompleteSingleDataEditorModel.url')) }],
-			optionsRoot: [{ value: this.optionsRoot, disabled: (disabled && !skipDisable.includes('AutoCompleteSingleDataEditorModel.optionsRoot')) }],
+			url: [{ value: this.url, disabled: (disabled && !skipDisable.includes('AutoCompleteSingleDataEditorModel.url')) },[Validators.required]],
+			optionsRoot: [{ value: this.optionsRoot, disabled: (disabled && !skipDisable.includes('AutoCompleteSingleDataEditorModel.optionsRoot')) }, [Validators.required]],
 			autoCompleteType: [{ value: this.autoCompleteType, disabled: (disabled && !skipDisable.includes('AutoCompleteSingleDataEditorModel.autoCompleteType')) }]
 		});
 		formGroup.addControl('autoCompleteOptions', this.autoCompleteOptions.buildForm(disabled, skipDisable));
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/admin/field-data/field-data-option-editor-model.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/admin/field-data/field-data-option-editor-model.ts
index 5b0067954..d13491cd1 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/admin/field-data/field-data-option-editor-model.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/admin/field-data/field-data-option-editor-model.ts
@@ -1,4 +1,4 @@
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { FieldDataOption } from '../../../../../core/model/dataset-profile-definition/field-data/field-data';
 import { FieldDataEditorModel } from './field-data-editor-model';
 
@@ -9,8 +9,8 @@ export class FieldDataOptionEditorModel extends FieldDataEditorModel<FieldDataOp
 
 	buildForm(disabled: boolean = false, skipDisable: Array<String> = []): FormGroup {
 		return new FormBuilder().group({
-			label: [{ value: this.label, disabled: (disabled && !skipDisable.includes('FieldDataOptionEditorModel.label')) }],
-			value: [{ value: this.value, disabled: (disabled && !skipDisable.includes('FieldDataOptionEditorModel.value')) }],
+			label: [{ value: this.label, disabled: (disabled && !skipDisable.includes('FieldDataOptionEditorModel.label')) },[Validators.required]],
+			value: [{ value: this.value, disabled: (disabled && !skipDisable.includes('FieldDataOptionEditorModel.value')) },[Validators.required]],
 			source: [{ value: this.source, disabled: (disabled && !skipDisable.includes('FieldDataOptionEditorModel.source')) }]
 		});
 	}
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/admin/field-data/organizations-data-editor-models.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/admin/field-data/organizations-data-editor-models.ts
index 975abbe0b..92090f3fd 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/admin/field-data/organizations-data-editor-models.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/admin/field-data/organizations-data-editor-models.ts
@@ -4,16 +4,19 @@ import { OrganizationsFieldData } from '../../../../../core/model/dataset-profil
 
 export class OrganizationsDataEditorModel extends FieldDataEditorModel<OrganizationsDataEditorModel> {
 	public label: string;
+	public multiAutoComplete: boolean = false;
 
 	buildForm(disabled: boolean = false, skipDisable: Array<String> = []): FormGroup {
 		const formGroup = this.formBuilder.group({
-			label: [{ value: this.label, disabled: (disabled && !skipDisable.includes('OrganizationsDataEditorModel.label')) }]
+			label: [{ value: this.label, disabled: (disabled && !skipDisable.includes('OrganizationsDataEditorModel.label')) }],
+			multiAutoComplete: [{ value: this.multiAutoComplete, disabled: (disabled && !skipDisable.includes('OrganizationsDataEditorModel.multiAutoComplete')) }]
 		});
 		return formGroup;
 	}
 
 	fromModel(item: OrganizationsFieldData): OrganizationsDataEditorModel {
 		this.label = item.label;
+		this.multiAutoComplete = item.multiAutoComplete;
 		return this;
 	}
 }
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/admin/field-editor-model.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/admin/field-editor-model.ts
index fcaf00324..66dd8928d 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/admin/field-editor-model.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/admin/field-editor-model.ts
@@ -27,6 +27,9 @@ import { ResearchersDataEditorModel } from './field-data/researchers-data-editor
 import { OrganizationsDataEditorModel } from './field-data/organizations-data-editor-models';
 import { DatasetIdentifierDataEditorModel } from './field-data/dataset-identifier-data-editor-models';
 import { CurrencyDataEditorModel } from './field-data/currency-data-editor-models';
+import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profile-combo-box-type';
+import { EditorCustomValidators } from '../editor/custom-validators/editor-custom-validators';
+import { ValidationDataEditorModel } from './field-data/validation-data-editor-models';
 
 export class FieldEditorModel extends BaseFormModel {
 
@@ -68,13 +71,14 @@ export class FieldEditorModel extends BaseFormModel {
 				if (this.viewStyle.renderStyle === 'datePicker') { this.data = new DatePickerDataEditorModel().fromModel(item.data); }
 				if (this.viewStyle.renderStyle === 'externalDatasets') { this.data = new ExternalDatasetsDataEditorModel().fromModel(item.data); }
 				if (this.viewStyle.renderStyle === 'dataRepositories') { this.data = new DataRepositoriesDataEditorModel().fromModel(item.data); }
-				if (this.viewStyle.renderStyle === 'registeries') { this.data = new RegistriesDataEditorModel().fromModel(item.data); }
+				if (this.viewStyle.renderStyle === 'registries') { this.data = new RegistriesDataEditorModel().fromModel(item.data); }
 				if (this.viewStyle.renderStyle === 'services') { this.data = new ServicesDataEditorModel().fromModel(item.data); }
 				if (this.viewStyle.renderStyle === 'tags') { this.data = new TagsDataEditorModel().fromModel(item.data); }
 				if (this.viewStyle.renderStyle === 'researchers') { this.data = new ResearchersDataEditorModel().fromModel(item.data); }
 				if (this.viewStyle.renderStyle === 'organizations') { this.data = new OrganizationsDataEditorModel().fromModel(item.data); }
 				if (this.viewStyle.renderStyle === 'datasetIdentifier') { this.data = new DatasetIdentifierDataEditorModel().fromModel(item.data); }
 				if (this.viewStyle.renderStyle === 'currency') { this.data = new CurrencyDataEditorModel().fromModel(item.data); }
+				if (this.viewStyle.renderStyle === 'validation') { this.data = new ValidationDataEditorModel().fromModel(item.data); }
 			}
 		}
 		return this;
@@ -96,6 +100,57 @@ export class FieldEditorModel extends BaseFormModel {
 		if (this.data) { formGroup.addControl('data', this.data.buildForm(disabled, skipDisable)); }
 		else { formGroup.addControl('data', new WordListFieldDataEditorModel().buildForm(disabled, skipDisable)); }
 
+
+		// //append validators
+
+		this._appendCustomValidators(formGroup);
+
+
+		// //setting up listeners
+		// formGroup.get('viewStyle').valueChanges.subscribe(changes=>{
+		// 	// const viewStyleChanges:{cssClass:string, renderStyle: string} = changes;
+		
+		// 	this._removeCustomValidators(formGroup);
+		// 	this._appendCustomValidators(formGroup);
+
+		// })
+
 		return formGroup;
 	}
+
+
+	private _appendCustomValidators(formGroup: FormGroup){
+		const renderStyleValue = formGroup.get('viewStyle').get('renderStyle').value;
+		if(renderStyleValue === 'checkBox'){
+			formGroup.get('defaultValue').get('value').setValidators(Validators.required);
+			formGroup.get('defaultValue').get('value').updateValueAndValidity();
+		}else if(renderStyleValue === 'combobox'){
+			try{
+				const comboType = formGroup.get('data').get('type').value;
+				if(comboType === DatasetProfileComboBoxType.Autocomplete){//As 'Other' in UI
+					formGroup.get('data').setValidators(EditorCustomValidators.atLeastOneElementListValidator('autoCompleteSingleDataList'));
+				}else if(comboType === DatasetProfileComboBoxType.WordList){
+					formGroup.get('data').setValidators(EditorCustomValidators.atLeastOneElementListValidator('options'));
+				}
+			}catch(e){
+				console.error('Error setting validators.');
+				console.error(e);
+			}
+		}else if(renderStyleValue === 'radiobox'){
+			formGroup.get('data').setValidators(EditorCustomValidators.atLeastOneElementListValidator('options'));
+		}
+		formGroup.get('data').updateValueAndValidity();
+	}
+
+	// private _removeCustomValidators(formGroup:FormGroup){
+	// 	const renderStyleValue = formGroup.get('viewStyle').get('renderStyle').value;
+	// 	if(renderStyleValue != 'checkBox'){
+	// 		formGroup.get('defaultValue').get('value').clearValidators();
+	// 	}else if(renderStyleValue === 'combobox'){
+	// 		formGroup.get('data').clearValidators();
+	// 	}
+	// }
+	// private _buildData(formGroup: FormGroup){
+
+	// }
 }
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/admin/field-set-editor-model.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/admin/field-set-editor-model.ts
index 37e9f1fe4..052bd353b 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/admin/field-set-editor-model.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/admin/field-set-editor-model.ts
@@ -35,7 +35,7 @@ export class FieldSetEditorModel extends BaseFormModel {
 		const formGroup = this.formBuilder.group({
 			id: [{ value: this.id, disabled: (disabled && !skipDisable.includes('FieldSetEditorModel.id')) }, [Validators.required, Validators.pattern('^[^<_>]+$')]],
 			ordinal: [{ value: this.ordinal, disabled: (disabled && !skipDisable.includes('FieldSetEditorModel.ordinal')) }],
-			title: [{ value: this.title, disabled: (disabled && !skipDisable.includes('FieldSetEditorModel.title')) }],
+			title: [{ value: this.title, disabled: (disabled && !skipDisable.includes('FieldSetEditorModel.title')) }, [Validators.required]],
 			description: [{ value: this.description, disabled: (disabled && !skipDisable.includes('FieldSetEditorModel.description')) }],
 			extendedDescription: [{ value: this.extendedDescription, disabled: (disabled && !skipDisable.includes('FieldSetEditorModel.extendedDescription')) }],
 			additionalInformation: [{ value: this.additionalInformation, disabled: (disabled && !skipDisable.includes('FieldSetEditorModel.additionalInformation')) }],
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/admin/rule-editor-model.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/admin/rule-editor-model.ts
index 6d029f80e..6e878666c 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/admin/rule-editor-model.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/admin/rule-editor-model.ts
@@ -1,4 +1,4 @@
-import { FormGroup } from "@angular/forms";
+import { FormGroup, Validators } from "@angular/forms";
 import { Rule } from "../../../../core/model/admin/dataset-profile/dataset-profile";
 import { BaseFormModel } from "../../../../core/model/base-form-model";
 
@@ -21,9 +21,9 @@ export class RuleEditorModel extends BaseFormModel {
 	buildForm(disabled: boolean = false, skipDisable: Array<String> = []): FormGroup {
 		const formGroup = this.formBuilder.group({
 			// sourceField: [this.sourceField],
-			target: [{ value: this.target, disabled: (disabled && !skipDisable.includes('RuleEditorModel.target')) }],
+			target: [{ value: this.target, disabled: (disabled && !skipDisable.includes('RuleEditorModel.target')) }, [Validators.required]],
 			ruleStyle: [{ value: this.ruleStyle, disabled: (disabled && !skipDisable.includes('RuleEditorModel.ruleStyle')) }],
-			value: [{ value: this.value, disabled: (disabled && !skipDisable.includes('RuleEditorModel.value')) }],
+			value: [{ value: this.value, disabled: (disabled && !skipDisable.includes('RuleEditorModel.value')) }, [Validators.required]],
 			ruleType: [{ value: this.ruleType, disabled: (disabled && !skipDisable.includes('RuleEditorModel.ruleType')) }],
 			valueType: [{ value: this.valueType, disabled: (disabled && !skipDisable.includes('RuleEditorModel.valueType')) }]
 		});
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/admin/section-editor-model.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/admin/section-editor-model.ts
index 8edc81899..9d7c7825b 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/admin/section-editor-model.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/admin/section-editor-model.ts
@@ -1,6 +1,7 @@
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { Section } from '../../../../core/model/admin/dataset-profile/dataset-profile';
 import { BaseFormModel } from '../../../../core/model/base-form-model';
+import { EditorCustomValidators } from '../editor/custom-validators/editor-custom-validators';
 import { FieldSetEditorModel } from './field-set-editor-model';
 
 export class SectionEditorModel extends BaseFormModel {
@@ -29,7 +30,7 @@ export class SectionEditorModel extends BaseFormModel {
 		const formGroup: FormGroup = new FormBuilder().group({
 			id: [{ value: this.id, disabled: (disabled && !skipDisable.includes('SectionEditorModel.id')) }, [Validators.required, Validators.pattern('^[^<_>]+$')]],
 			page: [{ value: this.page, disabled: (disabled && !skipDisable.includes('SectionEditorModel.page')) }, [Validators.required]],
-			title: [{ value: this.title, disabled: (disabled && !skipDisable.includes('SectionEditorModel.title')) }],
+			title: [{ value: this.title, disabled: (disabled && !skipDisable.includes('SectionEditorModel.title')) } , [Validators.required]],
 			description: [{ value: this.description, disabled: (disabled && !skipDisable.includes('SectionEditorModel.description')) }],
 			ordinal: [{ value: this.ordinal, disabled: (disabled && !skipDisable.includes('SectionEditorModel.ordinal')) }, [Validators.required]],
 			defaultVisibility: [{ value: this.defaultVisibility, disabled: (disabled && !skipDisable.includes('SectionEditorModel.defaultVisibility')) }]
@@ -53,6 +54,8 @@ export class SectionEditorModel extends BaseFormModel {
 
 		if (!formGroup.controls['defaultVisibility'].value) { formGroup.controls['defaultVisibility'].setValue(true); }
 
+		formGroup.setValidators(EditorCustomValidators.sectionHasAtLeastOneChildOf('fieldSets','sections'));
+		formGroup.updateValueAndValidity();
 		return formGroup;
 	}
 }
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/admin/view-style-editor-model.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/admin/view-style-editor-model.ts
index de61824a9..586d603f8 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/admin/view-style-editor-model.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/admin/view-style-editor-model.ts
@@ -1,4 +1,4 @@
-import { FormGroup } from "@angular/forms";
+import { FormGroup, Validators } from "@angular/forms";
 import { ViewStyle } from "../../../../core/model/admin/dataset-profile/dataset-profile";
 import { BaseFormModel } from "../../../../core/model/base-form-model";
 
@@ -15,7 +15,7 @@ export class ViewStyleEditorModel extends BaseFormModel {
 	buildForm(disabled: boolean = false, skipDisable: Array<String> = []): FormGroup {
 		const formGroup = this.formBuilder.group({
 			cssClass: [{ value: this.cssClass, disabled: (disabled && !skipDisable.includes('ViewStyleEditorModel.cssClass')) }],
-			renderStyle: [{ value: this.renderStyle, disabled: (disabled && !skipDisable.includes('ViewStyleEditorModel.renderStyle')) }]
+			renderStyle: [{ value: this.renderStyle, disabled: (disabled && !skipDisable.includes('ViewStyleEditorModel.renderStyle')) }, Validators.required]
 		});
 		return formGroup;
 	}
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts
index e79d5176d..6a20faad6 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { FormattingModule } from '@app/core/formatting.module';
-import { ConfirmationDialogModule } from '@common/modules/confirmation-dialog/confirmation-dialog.module';
 import { DatasetProfileRoutingModule } from '@app/ui/admin/dataset-profile/dataset-profile.routing';
 import { DatasetProfileEditorCompositeFieldComponent } from '@app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component';
 import { DatasetProfileEditorDefaultValueComponent } from '@app/ui/admin/dataset-profile/editor/components/composite-profile-editor-default-value/component-profile-editor-default-value.component';
@@ -23,21 +22,38 @@ import { DatasetProfileEditorRuleComponent } from '@app/ui/admin/dataset-profile
 import { DatasetProfileEditorSectionComponent } from '@app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component';
 import { DatasetProfileEditorComponent } from '@app/ui/admin/dataset-profile/editor/dataset-profile-editor.component';
 import { DatasetProfileCriteriaComponent } from '@app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component';
-import { DialodConfirmationUploadDatasetProfiles } from '@app/ui/admin/dataset-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component';
+import { DialogConfirmationUploadDatasetProfiles } from '@app/ui/admin/dataset-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component';
 import { DatasetProfileListingComponent } from '@app/ui/admin/dataset-profile/listing/dataset-profile-listing.component';
+import { DatasetModule } from '@app/ui/dataset/dataset.module';
+import { FormProgressIndicationModule } from '@app/ui/misc/dataset-description-form/components/form-progress-indication/form-progress-indication.module';
+import { TableOfContentsModule } from '@app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.module';
 import { CommonFormsModule } from '@common/forms/common-forms.module';
+import { ConfirmationDialogModule } from '@common/modules/confirmation-dialog/confirmation-dialog.module';
 import { CommonUiModule } from '@common/ui/common-ui.module';
-import { ParseStatus } from './listing/pipe/parse-status.pipe';
-import { DatasetProfileEditorExternalDatasetsFieldComponent } from './editor/components/field-type/external-datasets/dataset-profile-editor-external-datasets-field.component';
+import { AngularStickyThingsModule } from '@w11k/angular-sticky-things';
+import { DatasetProfileEditorCurrencyFieldComponent } from './editor/components/field-type/currency/dataset-profile-editor-currency-field.component';
 import { DatasetProfileEditorDataRepositoriesFieldComponent } from './editor/components/field-type/data-repositories/dataset-profile-editor-data-repositories-field.component';
+import { DatasetProfileEditorDatasetIdentifierFieldComponent } from './editor/components/field-type/dataset-identifier/dataset-profile-editor-dataset-identifier-field.component';
+import { DatasetProfileEditorExternalDatasetsFieldComponent } from './editor/components/field-type/external-datasets/dataset-profile-editor-external-datasets-field.component';
+import { DatasetProfileEditorOrganizationsFieldComponent } from './editor/components/field-type/organizations/dataset-profile-editor-organizations-field.component';
 import { DatasetProfileEditorRegistriesFieldComponent } from './editor/components/field-type/registries/dataset-profile-editor-registries-field.component';
+import { DatasetProfileEditorResearchersFieldComponent } from './editor/components/field-type/researchers/dataset-profile-editor-researchers-field.component';
 import { DatasetProfileEditorServicesFieldComponent } from './editor/components/field-type/services/dataset-profile-editor-services-field.component';
 import { DatasetProfileEditorTagsFieldComponent } from './editor/components/field-type/tags/dataset-profile-editor-tags-field.component';
-import { DatasetProfileEditorResearchersFieldComponent } from './editor/components/field-type/researchers/dataset-profile-editor-researchers-field.component';
-import { DatasetProfileEditorOrganizationsFieldComponent } from './editor/components/field-type/organizations/dataset-profile-editor-organizations-field.component';
-import { DatasetProfileEditorDatasetIdentifierFieldComponent } from './editor/components/field-type/dataset-identifier/dataset-profile-editor-dataset-identifier-field.component';
-import { DatasetProfileEditorCurrencyFieldComponent } from './editor/components/field-type/currency/dataset-profile-editor-currency-field.component';
 import { DatasetProfileEditorValidatorFieldComponent } from './editor/components/field-type/validator/dataset-profile-editor-validator-field.component';
+import { NgxDropzoneModule } from 'ngx-dropzone';
+import { ParseStatus } from './listing/pipe/parse-status.pipe';
+import { DatasetProfileTableOfContents } from './table-of-contents/table-of-contents';
+import { DatasetProfileTableOfContentsInternalSection } from './table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section';
+import { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service';
+import {DragDropModule} from '@angular/cdk/drag-drop';
+import {DragulaModule} from 'ng2-dragula';
+
+
+//matrial
+import {MatBadgeModule} from '@angular/material/badge';
+import { DatasetProfileEditorSectionFieldSetComponent } from './editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component';
+import { FinalPreviewComponent } from './editor/components/final-preview/final-preview.component';
 
 @NgModule({
 	imports: [
@@ -45,7 +61,14 @@ import { DatasetProfileEditorValidatorFieldComponent } from './editor/components
 		CommonFormsModule,
 		FormattingModule,
 		DatasetProfileRoutingModule,
-		ConfirmationDialogModule
+		ConfirmationDialogModule,
+		NgxDropzoneModule,
+		FormProgressIndicationModule,
+		DatasetModule,
+		AngularStickyThingsModule,
+		DragDropModule,
+		MatBadgeModule,
+		DragulaModule
 	],
 	declarations: [
 		DatasetProfileListingComponent,
@@ -66,7 +89,7 @@ import { DatasetProfileEditorValidatorFieldComponent } from './editor/components
 		DatasetProfileEditorDatePickerFieldComponent,
 		DatasetProfileEditorWordListFieldComponent,
 		DatasetProfileEditorDefaultValueComponent,
-		DialodConfirmationUploadDatasetProfiles,
+		DialogConfirmationUploadDatasetProfiles,
 		DatasetProfileEditorInternalDmpEntitiesFieldComponent,
 		DatasetProfileEditorResearchersAutoCompleteFieldComponent,
 		DatasetProfileEditorDatasetsAutoCompleteFieldComponent,
@@ -81,10 +104,14 @@ import { DatasetProfileEditorValidatorFieldComponent } from './editor/components
 		DatasetProfileEditorOrganizationsFieldComponent,
 		DatasetProfileEditorDatasetIdentifierFieldComponent,
 		DatasetProfileEditorCurrencyFieldComponent,
-		DatasetProfileEditorValidatorFieldComponent
+		DatasetProfileEditorValidatorFieldComponent,
+		DatasetProfileTableOfContents,
+		DatasetProfileTableOfContentsInternalSection,
+		DatasetProfileEditorSectionFieldSetComponent,
+		FinalPreviewComponent
 	],
 	entryComponents: [
-		DialodConfirmationUploadDatasetProfiles
+		DialogConfirmationUploadDatasetProfiles
 	]
 })
 export class DatasetProfileModule { }
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/animations/animations.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/animations/animations.ts
new file mode 100644
index 000000000..c62b30393
--- /dev/null
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/animations/animations.ts
@@ -0,0 +1,64 @@
+import { animate, keyframes, state, style, transition, trigger } from "@angular/animations";
+
+export const STEPPER_ANIMATIONS  = [
+    trigger('previous_btn',[
+        transition(':enter',[
+            style({'transform': 'translateX(100%)', 'z-index':'9999', 'opacity':0.4}),
+            animate('600ms ease-out', style({
+                'transform': 'translateX(0)',
+                'opacity':1
+            }))
+        ]),
+        transition(':leave',[
+            style({
+                'transform': 'translateX(0)',
+                'opacity':'1',
+                'z-index':'9999'
+            }),
+            animate('800ms ease-out', keyframes([
+                style({'transform': 'translateX(120%)', offset:0.8}),
+                style({'opacity': '0.2', offset:0.96})
+            ]))
+        ])
+    ]),
+    trigger('next_btn', [
+        transition(':leave',[
+            style({opacity:1, position:'absolute', 'z-index':'9999'}),
+            animate('700ms ease-out', keyframes( [
+                style({ transform:'translateX(-100%)', offset:0.6}),
+                style({ opacity:'0.2', offset:0.87})
+        ]))
+        ]),
+        transition(':enter',[
+            style({opacity:0.3, 'z-index':'9999', transform:'translateX(-100%)'}),
+            animate('600ms ease-out', style({ opacity:'1', transform:'translateX(0)' }))
+        ])
+    ]),
+    trigger('finalize_btn',[
+        transition(':enter',[
+            style({opacity:0.3}),
+            animate('400ms ease-in', style({opacity:1}))
+        ]),
+        transition(':leave',[
+            style({opacity:1, position:'absolute'}),
+            animate('600ms ease-in', style({opacity:0.3}))
+        ])
+    ])
+];
+export const GENERAL_ANIMATIONS = [
+    trigger('enterIn',[
+        transition(':enter',[
+            style({
+                transform:'scale(0)',
+                'transform-origin':'50% 0',
+                opacity:0
+            }),
+            animate('800ms ease', style({transform:'scale(1)', opacity:1}))
+        ])
+    ]),
+    trigger('fadeElement',[
+      state('updated',style({opacity:0})),
+      transition("*=>updated",
+        animate('2s 1s ease-out'))
+    ])
+]
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html
index 6de806122..687a3b1ad 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html
@@ -1,11 +1,17 @@
-<div class="row">
+
+<!-- TO LINK -->
+<!-- <div class="row">
 	<h4 *ngIf="isComposite" class="col-auto titleStile">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.TITLE' | translate}}</h4>
 	<h4 *ngIf="!isComposite" class="col-auto titleStile">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.SIMPLE-FIELD-TITLE' | translate}}</h4>
 	<mat-checkbox class="col-auto" [(ngModel)]="isComposite" (ngModelChange)="onIsCompositeChange(isComposite)" [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMPOSITE-CHECKBOX' | translate}}</mat-checkbox>
 	<mat-checkbox class="col-auto" [(ngModel)]="isMultiplicityEnabled" (ngModelChange)="onIsMultiplicityEnabledChange(isMultiplicityEnabled)"
 	 [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-CHECKBOX' | translate}}</mat-checkbox>
 	<mat-checkbox class="col" [formControl]="this.form.get('hasCommentField')">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-CHECKBOX' | translate}}</mat-checkbox>
-</div>
+</div> -->
+
+<!-- TO LINK -->
+
+<!-- 
 <div class="row">
 	<mat-form-field *ngIf="isComposite" class="col">
 		<input matInput type="string" placeholder="Id" [formControl]="form.get('id')" required>
@@ -36,48 +42,378 @@
 		<input matInput type="number" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.ORDER' | translate}}"
 		 [formControl]="this.form.get('ordinal')" required>
 	</mat-form-field>
-</div>
-<div class="row">
-	<mat-form-field class="col">
-		<textarea matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}"
-		 [formControl]="this.form.get('description')"></textarea>
-	</mat-form-field>
-</div>
-<div class="row">
-	<mat-form-field class="col">
-		<textarea matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}"
-		 [formControl]="this.form.get('extendedDescription')"></textarea>
-	</mat-form-field>
-</div>
-<div class="row">
-	<mat-form-field class="col">
-		<textarea matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.ADDITIONAL-INFORMATION' | translate}}"
-		 [formControl]="this.form.get('additionalInformation')"></textarea>
-	</mat-form-field>
-</div>
-<div class="row">
-	<app-dataset-profile-editor-field-component class="col-12" *ngIf="!isComposite" [form]="form.get('fields').get(''+0)" [showOrdinal]="false"
-	 [indexPath]="indexPath + 'f' + 0" [viewOnly]="viewOnly"></app-dataset-profile-editor-field-component>
-</div>
-<div *ngIf="isComposite" class="row">
-	<h4 class="col-12 titleStile">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.SUB-FIELDS-TITLE' | translate}}
-	</h4>
+</div> -->
+
+
+<!-- ID TOP RIGHT CORNER -->
+<!-- <div class="field-id-container">
+	{{this.form.get('id').value}}
+	<button mat-mini-fab class="field-id-container-icon">
+		<mat-icon>delete</mat-icon>
+	</button>
+</div> -->
+
+
+
+
+<!-- MAIN CONTENT -->
+<div class="main-content-page" [ngClass]="{'pb-2': !hasFocus}">
+	<!-- TITLE -->
 	<div class="col-12">
-		<mat-expansion-panel *ngFor="let field of form.get('fields')['controls'] let i=index;" #panel>
-			<mat-expansion-panel-header>
-				<mat-panel-title class="cardTitle">{{i + 1}}. {{getFieldTile(field, i)}}</mat-panel-title>
-				<div class="row">
-					<button mat-icon-button type="button" class="deleteBtn col-auto" (click)="DeleteField(i);" [disabled]="viewOnly">
-						<mat-icon>delete</mat-icon>
-					</button>
+		<div class="row fielset-header">
+			<!-- <div class="col-auto d-flex">
+				<div class="align-self-center">
+					{{numbering}}
 				</div>
-			</mat-expansion-panel-header>
-			<div id="{{indexPath + 'f' + i}}" *ngIf="panel.expanded">
-				<app-dataset-profile-editor-field-component [form]="form.get('fields').get(''+i)" [indexPath]="indexPath + 'f' + i" [viewOnly]="viewOnly"></app-dataset-profile-editor-field-component>
+			</div> -->
+			<mat-form-field appearance="none" class="numbering-label" [ngStyle]="calculateLabelWidth(numbering)">
+				<input [ngClass]="{'text-danger':form.get('title').invalid &&form.get('title').touched}" matInput type="text" [value]="numbering" disabled>
+			</mat-form-field>
+			<!-- [appearance]="titleControl.focused? 'legacy':'none'" floatLabel="never" -->
+			<mat-form-field class="col field-title" [appearance]="'none'" floatLabel="never">
+				<input matInput type="text" [placeholder]="('DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' |translate)+' '+('DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.QUESTION'| translate)" #titleControl="matInput"
+				[formControl]="this.form.get('title')">
+			</mat-form-field>
+		</div>
+	</div>
+	<div style="position: relative;" class="col-8">
+		
+
+		<ng-container *ngIf="hasFocus">
+
+			<div class="row" *ngIf="showDescription">
+				<mat-form-field class="col p-0 underline-line-field" appearance="legacy">
+					<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}"
+					[formControl]="this.form.get('description')">
+				</mat-form-field>
 			</div>
-		</mat-expansion-panel>
+			<div class="row" *ngIf="showExtendedDescription">
+				<mat-form-field class="col p-0 underline-line-field" appearance="legacy">
+					<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}"
+					[formControl]="this.form.get('extendedDescription')"/>
+				</mat-form-field>
+			</div>
+			<div class="row" *ngIf="showAdditionalInfo">
+				<mat-form-field class="col p-0 underline-line-field" appearance="legacy">
+					<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.ADDITIONAL-INFORMATION' | translate}}"
+					[formControl]="this.form.get('additionalInformation')"/>
+				</mat-form-field>
+			</div>
+	
+			<div class="row">
+				<mat-form-field *ngIf="isMultiplicityEnabled" class="col pl-0 underline-line-field" appearance="legacy">
+					<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MIN' | translate}}"
+					type="number" [formControl]="form.get('multiplicity').get('min')" required>
+					<mat-error *ngIf="form.get('multiplicity').get('min').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+					</mat-error>
+				</mat-form-field>
+				<mat-form-field *ngIf="isMultiplicityEnabled" class="col pr-0 underline-line-field" appearance="legacy">
+					<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MAX' | translate}}"
+					type="number" [formControl]="this.form.get('multiplicity').get('max')" required>
+					<mat-error *ngIf="form.get('multiplicity').get('max').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+					</mat-error>
+				</mat-form-field>
+			</div>
+		</ng-container>
+
+
+
+		
 	</div>
-	<div class="col-12">
-		<button mat-button class="full-width" (click)="addNewField()" [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.ACTIONS.ADD-CHILD-FIELD' | translate}}</button>
+
+
+	<!-- FIELDS DETAILS AND ACTIONS -->
+	<div class="row">
+
+		<!-- FIELDS -->
+		<div class="col">
+
+			<div class="">
+				<ng-container *ngFor="let field of form.get('fields')['controls']; let i=index" >
+					<div class="row bg-white" style="position: relative;" (click)="setTargetField(field)"
+						>
+						<!-- field-container -->
+						<!-- [ngClass]="{'field-container-active': (field.get('id').value === targetField?.get('id').value) && hasFocus}" -->
+						<!-- <div class="field-id-container">
+							{{form.get('fields').get(''+i).get('id').value}} -->
+							<!-- <button mat-mini-fab class="field-id-container-icon" (click)="DeleteField(i)">
+								<mat-icon>delete</mat-icon>
+							</button> -->
+						<!-- </div> -->
+						<!-- *ngIf="!isComposite" -->
+						<app-dataset-profile-editor-field-component class="col-12" 
+							[form]="form.get('fields').get(''+i)" [showOrdinal]="false"
+							[indexPath]="indexPath + 'f' + i" [viewOnly]="viewOnly"
+							[expandView]="hasFocus"
+							[canBeDeleted]="form.get('fields')['controls'].length !=1"
+							(delete)="deleteField(i)">
+						</app-dataset-profile-editor-field-component>
+					</div>
+					<hr *ngIf="hasFocus">
+				</ng-container>
+	<!-- 			
+				<div *ngIf="isComposite" class="row">
+					<h4 class="col-12 titleStile">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.SUB-FIELDS-TITLE' | translate}}
+					</h4>
+					<div class="col-12">
+						<mat-expansion-panel *ngFor="let field of form.get('fields')['controls'] let i=index;" #panel class="field-container">
+							<div class="field-id-container">
+								random id
+							</div>
+							<mat-expansion-panel-header>
+								<mat-panel-title class="cardTitle">{{i + 1}}. {{getFieldTile(field, i)}}</mat-panel-title>
+								<div class="row">
+									<button mat-icon-button type="button" class="deleteBtn col-auto" (click)="DeleteField(i);" [disabled]="viewOnly">
+										<mat-icon>delete</mat-icon>
+									</button>
+								</div>
+							</mat-expansion-panel-header>
+							<div id="{{indexPath + 'f' + i}}" *ngIf="panel.expanded">
+								<app-dataset-profile-editor-field-component [form]="form.get('fields').get(''+i)" [indexPath]="indexPath + 'f' + i" [viewOnly]="viewOnly"></app-dataset-profile-editor-field-component>
+							</div>
+						</mat-expansion-panel>
+					</div>
+					<div class="col-12">
+						<button mat-button class="full-width" (click)="addNewField()" [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.ACTIONS.ADD-CHILD-FIELD' | translate}}</button>
+					</div>
+				</div> -->
+
+			</div>
+		</div>
+
+		<!-- PREVIEW -->
+
+		<div class="col-12" >
+			<div class="mb-1" *ngIf="hasFocus" class="d-flex" style="justify-content: space-between;">
+				<span style="font-weight: bold;">{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.PREVIEW' | translate}}</span>
+				<span [@fadeElement]="updatedClass" *ngIf="firstField?.get('viewStyle').get('renderStyle').value">
+					<ng-container *ngIf="!previewDirty">
+						Preview updated!
+					</ng-container>
+					<ng-container *ngIf="previewDirty">
+						... caculating preview
+					</ng-container>
+				</span>
+			</div>
+			<div  [id]="'preview_container'+ form.get('id').value" class="w-100" style="margin-right: -15px; margin-left: -15px;" >
+				<div *ngIf="previewForm && showPreview && firstField?.get('viewStyle').get('renderStyle').value">
+					<app-form-section-inner  [form]="previewForm">
+					</app-form-section-inner>
+				</div>
+			</div>
+			
+			<div class="w-100" *ngIf="!firstField?.get('viewStyle').get('renderStyle').value">
+				<em>
+					{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.NOT-INITIALIZED' | translate}}
+				</em>
+			</div>
+			
+			<hr *ngIf="hasFocus">
+		</div>
 	</div>
+
+
+	<ng-container *ngIf="hasFocus">
+		<div class="row justify-content-end pt-2" >
+			<div class="col-auto">
+				<ul class="list-unstyled list-inline fieldset-actions-list d-flex align-items-center text-primary-blue">
+					<!-- <li class="list-inline-item" (click)="addNewField()"><mat-icon>folder</mat-icon> <small>Add input</small></li> -->
+
+
+					
+					<li class="list-inline-item"  *ngIf="!viewOnly">
+						<img src="/assets/images/editor/icons/add_input_set.svg" [matMenuTriggerFor]="inputmenu" style="width: 18px;transform: translateY(-1px);" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate" class="input_icon" alt="Add Input icon">
+
+						<!-- <mat-icon [matMenuTriggerFor]="inputmenu" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate">folder</mat-icon> -->
+						<mat-menu #inputmenu="matMenu" [class]="'add_input_menu'">
+							
+							<!-- <button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.TextArea)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.TextArea)}}</button>
+							<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.FreeText)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.FreeText)}}</button>
+							<mat-divider></mat-divider>
+							<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.BooleanDecision)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.BooleanDecision)}}</button>
+							<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.RadioBox)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.RadioBox)}}</button>
+							<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Select)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Select)}}</button>
+							<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.CheckBox)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.CheckBox)}}</button>
+							
+							<mat-divider></mat-divider>
+							
+							<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.DatePicker)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DatePicker)}}</button>
+							<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Currency)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Currency)}}</button>
+
+							<mat-divider></mat-divider>
+							
+
+								<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Registries)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Registries)}}</button>
+								<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Services)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Services)}}</button>
+								<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Researchers)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Researchers)}}</button>
+								<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Organizations)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Organizations)}}</button>
+								<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.ExternalDatasets)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.ExternalDatasets)}}</button>
+								<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.DataRepositories)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DataRepositories)}}</button>
+								<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Other)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Other)}}</button>
+
+							
+							<mat-divider></mat-divider>
+							
+								<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.InternalDmpEntities)">Internal DMPs</button>
+								<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Tags)">Tags</button>
+								<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.DatasetIdentifier)">Dataset Identifier</button>
+								<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Validation)">Validation</button>
+							 -->
+						
+							<mat-action-list>
+
+								<button mat-list-item (click)="addNewInput(viewTypeEnum.TextArea)">
+									
+									<img src="/assets/images/editor/icons/text_area.svg" class="input_icon" alt="Text Area icon">
+									
+									{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.TextArea)}}
+								</button>
+								<button mat-list-item (click)="addNewInput(viewTypeEnum.FreeText)">
+									<img src="/assets/images/editor/icons/free_text.svg" class="input_icon" alt="Free Text icon">
+									{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.FreeText)}}
+								</button>
+								<mat-divider></mat-divider>
+								<button mat-list-item (click)="addNewInput(viewTypeEnum.BooleanDecision)">
+									<img src="/assets/images/editor/icons/boolean.svg" class="input_icon" alt="Boolean icon">
+									{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.BooleanDecision)}}
+								</button>
+								<button mat-list-item (click)="addNewInput(viewTypeEnum.RadioBox)">
+									<img src="/assets/images/editor/icons/radio_box.svg" class="input_icon" alt="RadioBox icon">
+									{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.RadioBox)}}
+								</button>
+								<button mat-list-item (click)="addNewInput(viewTypeEnum.Select)">
+									<span class="input_icon">
+										<img src="/assets/images/editor/icons/select.svg" alt="Select icon">
+									</span>
+									{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Select)}}
+								</button>
+								<button mat-list-item (click)="addNewInput(viewTypeEnum.CheckBox)">
+									<img src="/assets/images/editor/icons/checkbox.svg" class="input_icon" alt="CheckBox Icon">
+									{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.CheckBox)}}
+								</button>
+								
+								<mat-divider></mat-divider>
+								
+								<button mat-list-item (click)="addNewInput(viewTypeEnum.DatePicker)">
+									<img src="/assets/images/editor/icons/date_picker.svg" class="input_icon" alt="DatePicker Icon">
+									{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DatePicker)}}
+								</button>
+								<button mat-list-item (click)="addNewInput(viewTypeEnum.Currency)">
+									<img src="/assets/images/editor/icons/currency.svg" class="input_icon" alt="Currency Icon">
+									{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Currency)}}
+								</button>
+
+								<mat-divider></mat-divider>
+								
+								<button mat-list-item (click)="$event.stopPropagation();" style="font-style: italic;">
+									<img src="/assets/images/editor/icons/api.svg" class="input_icon" alt="APIs icon">
+
+									APIs
+								</button>
+								<mat-action-list class="ml-4">
+									<button mat-list-item (click)="addNewInput(viewTypeEnum.Registries)">
+										<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Registries icon">
+										{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Registries)}}
+									</button>
+									<button mat-list-item (click)="addNewInput(viewTypeEnum.Services)">
+										<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Services icon">
+										{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Services)}}
+									</button>
+									<button mat-list-item (click)="addNewInput(viewTypeEnum.Researchers)">
+										<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Researchers icon">
+										{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Researchers)}}
+									</button>
+									<button mat-list-item (click)="addNewInput(viewTypeEnum.Organizations)">
+										<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Organizations icon">
+										{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Organizations)}}
+									</button>
+									<button mat-list-item (click)="addNewInput(viewTypeEnum.ExternalDatasets)">
+										<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="External Datasets icon">
+										{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.ExternalDatasets)}}
+									</button>
+									<button mat-list-item (click)="addNewInput(viewTypeEnum.DataRepositories)">
+										<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="DataRepositories icon">
+										{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DataRepositories)}}
+									</button>
+									<button mat-list-item (click)="addNewInput(viewTypeEnum.Other)">
+										<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Other icon">
+										{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Other)}}
+									</button>
+								</mat-action-list>
+								
+								<mat-divider></mat-divider>
+								<button mat-list-item (click)="$event.stopPropagation();" style="font-style: italic;">
+									<img src="/assets/images/editor/icons/argos_entities.svg" class="input_icon" alt="Argos Entities icon">
+									Argos Entities
+								</button>
+								<mat-action-list class="ml-4">
+									<button mat-list-item (click)="addNewInput(viewTypeEnum.InternalDmpEntities)">
+										<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Internal Dmp icon">
+										{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.InternalDmpEntities)}}
+									</button>
+									<button mat-list-item (click)="addNewInput(viewTypeEnum.Tags)">
+										<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Tags icon">
+										{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Tags)}}
+									</button>
+									<button mat-list-item (click)="addNewInput(viewTypeEnum.DatasetIdentifier)">
+										<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Datset Identifier icon">
+										{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DatasetIdentifier)}}
+									</button>
+									<button mat-list-item (click)="addNewInput(viewTypeEnum.Validation)">
+										<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Validation icon">
+										{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Validation)}}
+									</button>
+								</mat-action-list>
+								
+
+
+								
+							</mat-action-list>
+
+						</mat-menu>
+					</li>
+
+
+					<!-- <li class="list-inline-item"><mat-icon>folder</mat-icon><small>CommentField</small></li> -->
+					<li class="list-inline-item">
+						<mat-checkbox class="fieldset-checkbox-action-dataset-profile-editor" [formControl]="this.form.get('hasCommentField')" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.INCLUDE-COMMENT-FIELD' | translate">{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.COMMENT-FIELD' | translate}}</mat-checkbox>
+					</li>
+					<li class="list-inline-item">
+						<mat-checkbox class="fieldset-checkbox-action-dataset-profile-editor" [checked]="isMultiplicityEnabled" (change)="onIsMultiplicityEnabledChange($event)" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.ENABLE-MULTIPLICITY' | translate" [disabled]="viewOnly">
+							{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.MULTIPLICITY' | translate}}
+						</mat-checkbox>
+					</li>
+					<li class="list-inline-item">
+						<!-- <mat-icon>more_vert</mat-icon> -->
+						<mat-icon [matMenuTriggerFor]="menu" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.MORE' | translate" style="transform: translateY(-1px);">more_vert</mat-icon>
+						<mat-menu #menu="matMenu">
+							<!-- TODO to check -->
+							<mat-checkbox class="mat-menu-item" (click)="$event.stopPropagation()" [(ngModel)]="showDescription">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}</mat-checkbox>  
+							<mat-checkbox class="mat-menu-item" (click)="$event.stopPropagation()" [(ngModel)]="showExtendedDescription">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}</mat-checkbox>  
+							<mat-checkbox class="mat-menu-item" (click)="$event.stopPropagation()" [(ngModel)]="showAdditionalInfo">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.ADDITIONAL-INFORMATION' | translate}}</mat-checkbox>  
+						</mat-menu>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</ng-container>
+
+		
 </div>
+<!-- 
+<span>Preview</span>
+<app-form-composite-field [form]="previewForm" *ngIf="previewForm">
+
+</app-form-composite-field> -->
+<!-- 
+Current FORM: {{this.form.value |json}}
+<br>
+Target: {{this.targetField?.value |json}} -->
+
+
+
+<!-- 
+<button (click)="generatePreview()">Generate preview</button>
+
+ -->
+
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.scss
index 046126ff9..94cebbcc9 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.scss
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.scss
@@ -8,4 +8,106 @@
 
 .titleStile{
     font-weight: bold;
-}
\ No newline at end of file
+}
+
+//REFACTOR SECTION
+
+
+//Palete
+
+$blue-color : #129D99;
+$blue-color-light: #5cf7f2;
+
+.actions-list{
+    border-radius: 7px;
+    box-shadow: 0 1px 0.8em $blue-color;
+    padding: 1em 0em;
+    font-size: small;
+}
+
+.field-container{
+    box-shadow: 0px 1px 2px rgb(173, 173, 173) ;
+    padding: 3em;
+    border-radius: .3em;
+    // border-left: 0.3em solid yellow;
+    padding-bottom: 2em;
+    margin-bottom: 2em;
+
+}
+.field-container-active{
+    box-shadow: 0px 1px 2px rgb(173, 173, 173) ;
+    padding: 3em;
+    border-radius: .3em;
+    border-left: 0.3em solid $blue-color;
+    padding-bottom: 2em;
+    margin-bottom: 2em;
+
+}
+.field-id-container{
+    background-color: $blue-color-light;
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: .6em 1.2em;
+    overflow: visible;
+    .field-id-container-icon{
+        position: absolute;
+        top: -50%;
+        
+    }
+}
+
+.main-content-page{
+	padding: 0em 1.5em;
+}
+
+.fielset-header{
+    font-size: 1.5em;
+    font-weight: bold;
+    
+    // .numbering{
+    //     padding: 0.5em 0em;
+    // }
+}
+
+.fieldset-actions-list{
+    margin: 0;
+    cursor: pointer;
+}
+
+// ::ng-deep .main-content-page .fieldset-header .field-title .mat-form-field-infix{
+//     border-top: 0px;
+// }
+
+
+.numbering-label .mat-input-element:disabled{
+    color: #212121;
+}
+
+:host ::ng-deep .fieldset-checkbox-action-dataset-profile-editor 
+{
+  .mat-checkbox-label{
+    font-size: 0.8em;
+    color: #212121;
+    transform: translateY(3px);
+  }
+}
+
+
+.input_icon{
+    width: 14px;
+    margin-right: 0.5em;
+    // display: flex;
+    // align-items: center;
+}
+
+::ng-deep .mat-menu-panel{
+    max-height: 32em;
+}
+:host ::ng-deep  .fielset-header .mat-form-field-wrapper{
+    padding-bottom: 0px;
+}
+
+// ::ng-deep .underline-line-field .mat-form-field-appearance-legacy .mat-form-field-wapper{
+//     padding-bottom: 1.25em !important;
+// }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts
index e4fd16dfa..6744cd340 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts
@@ -1,38 +1,291 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { FormArray, FormControl, FormGroup } from '@angular/forms';
+import { ChangeDetectorRef, Component, Input, OnChanges, OnInit } from '@angular/core';
+import { AbstractControl, FormArray, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
 import { FieldEditorModel } from '../../../admin/field-editor-model';
 import { Guid } from '@common/types/guid';
+import { RuleEditorModel } from '../../../admin/rule-editor-model';
+import { ValidationType } from '@app/core/common/enum/validation-type';
+import { MatCheckboxChange } from '@angular/material/checkbox';
+import { DatasetDescriptionCompositeFieldEditorModel, DatasetDescriptionFieldEditorModel, DatasetDescriptionFormEditorModel, DatasetDescriptionSectionEditorModel } from '@app/ui/misc/dataset-description-form/dataset-description-form.model';
+import { DatasetProfileFieldViewStyle } from '@app/core/common/enum/dataset-profile-field-view-style';
+import { MatDialog } from '@angular/material';
+import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
+import { TranslateService } from '@ngx-translate/core';
+import { ViewStyleType } from '../field/view-style-enum';
+import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
+import { BooleanDecisionFieldDataEditorModel } from '../../../admin/field-data/boolean-decision-field-data-editor-model';
+import { CheckBoxFieldDataEditorModel } from '../../../admin/field-data/check-box-field-data-editor-model';
+import { WordListFieldDataEditorModel } from '../../../admin/field-data/word-list-field-data-editor-model';
+import { AutoCompleteFieldDataEditorModel } from '../../../admin/field-data/auto-complete-field-data-editor-model';
+import { ResearchersAutoCompleteFieldDataEditorModel } from '../../../admin/field-data/researchers-auto-complete-field-data-editor-model';
+import { FreeTextFieldDataEditorModel } from '../../../admin/field-data/free-text-field-data-editor-model';
+import { RadioBoxFieldDataEditorModel } from '../../../admin/field-data/radio-box-field-data-editor-model';
+import { TextAreaFieldDataEditorModel } from '../../../admin/field-data/text-area-field-data-editor-model';
+import { DatePickerDataEditorModel } from '../../../admin/field-data/date-picker-data-editor-models';
+import { ExternalDatasetsDataEditorModel } from '../../../admin/field-data/external-datasets-data-editor-models';
+import { DataRepositoriesDataEditorModel } from '../../../admin/field-data/data-repositories-data-editor-models';
+import { RegistriesDataEditorModel } from '../../../admin/field-data/registries-data-editor-models';
+import { ServicesDataEditorModel } from '../../../admin/field-data/services-data-editor-models';
+import { TagsDataEditorModel } from '../../../admin/field-data/tags-data-editor-models';
+import { DatasetsAutoCompleteFieldDataEditorModel } from '../../../admin/field-data/datasets-autocomplete-field-data-editor-mode';
+import { DatasetIdentifierDataEditorModel } from '../../../admin/field-data/dataset-identifier-data-editor-models';
+import { CurrencyDataEditorModel } from '../../../admin/field-data/currency-data-editor-models';
+import { ValidationDataEditorModel } from '../../../admin/field-data/validation-data-editor-models';
+import { DatasetProfileService } from '@app/core/services/dataset-profile/dataset-profile.service';
+import { OrganizationsDataEditorModel } from '../../../admin/field-data/organizations-data-editor-models';
+import { EditorCustomValidators } from '../../custom-validators/editor-custom-validators';
+import { Field, FieldSet } from '@app/core/model/admin/dataset-profile/dataset-profile';
+import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profile-combo-box-type';
+import { DatasetProfileInternalDmpEntitiesType } from '@app/core/common/enum/dataset-profile-internal-dmp-entities-type';
+import { AutoCompleteFieldData, BooleanDecisionFieldData, CheckBoxFieldData, CurrencyFieldData, DataRepositoriesFieldData, DatasetIdentifierFieldData, DatePickerFieldData, DmpsAutoCompleteFieldData, ExternalDatasetsFieldData, FieldDataOption, FreeTextFieldData, OrganizationsFieldData, RadioBoxFieldData, RegistriesFieldData, ResearchersAutoCompleteFieldData, ServicesFieldData, TagsFieldData, TextAreaFieldData, ValidationFieldData, WordListFieldData } from '@app/core/model/dataset-profile-definition/field-data/field-data';
+import { CompositeField } from '@app/core/model/dataset-profile-definition/composite-field';
+import {Field as FieldDefinition} from '@app/core/model/dataset-profile-definition/field';
+import { Subject } from 'rxjs';
+import { debounce, debounceTime } from 'rxjs/operators';
+import { setUncaughtExceptionCaptureCallback } from 'process';
+import { GENERAL_ANIMATIONS } from '../../animations/animations';
 
 @Component({
 	selector: 'app-dataset-profile-editor-composite-field-component',
 	templateUrl: './dataset-profile-editor-composite-field.component.html',
-	styleUrls: ['./dataset-profile-editor-composite-field.component.scss']
+	styleUrls: ['./dataset-profile-editor-composite-field.component.scss'],
+	animations:[GENERAL_ANIMATIONS]
 })
-export class DatasetProfileEditorCompositeFieldComponent implements OnInit {
+export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnChanges {
 
 	@Input() form: FormGroup;
 	@Input() indexPath: string;
 	@Input() viewOnly: boolean;
 
-	isComposite = false;
-	isMultiplicityEnabled = false;
+	@Input() numbering: string;
+	@Input() hasFocus: boolean = false;
+	
+	showPreview: boolean  = true;
+	previewDirty: boolean = false;
+
+
+	showDescription: boolean = true;
+	showAdditionalInfo: boolean = false;
+	showExtendedDescription: boolean = false;
+
+	previewForm: FormGroup = null;
+	// isComposite = false;
+	// isMultiplicityEnabled = false;
+	viewStyleEnum = DatasetProfileFieldViewStyle;
+
+	viewTypeEnum =  ViewStyleType;
+
+	private myCustomValidators:EditorCustomValidators = new EditorCustomValidators();
+
+	constructor(
+		private dialog: MatDialog,
+		private language: TranslateService,
+		public enumUtils: EnumUtils,
+		public datasetProfileService: DatasetProfileService
+		) { }
+
+	ngOnChanges(){
+		// this.setTargetField(null);
+		// this.showExtendedDescription = !!this.form.get('extendedDescription').value;
+		// this.showAdditionalInfo = !!this.form.get('additionalInformation').value;
+	}
+
+	get firstField(){
+		try{
+			return (this.form.get('fields') as FormArray).at(0);
+		}catch{
+			return null;
+		}
+	}
+
+	get isMultiplicityEnabled(){
+		if(!this.form.get('multiplicity')){
+			return false;
+		}
+
+		if (this.form.get('multiplicity').value.min > 0 || this.form.get('multiplicity').value.max > 0) {
+			return true;
+		}
+
+		return false;
+	}
 
-	constructor() { }
 
 	ngOnInit() {
 		//this.addNewField();
-		if (this.form.get('multiplicity')) {
-			if (this.form.get('multiplicity').value.min > 1 || this.form.get('multiplicity').value.max > 1) {
-				this.isMultiplicityEnabled = true;
-			}
-		}
-		this.isComposite = (this.form.get('fields') as FormArray).length > 1;
+		// if (this.form.get('multiplicity')) {
+		// 	if (this.form.get('multiplicity').value.min > 1 || this.form.get('multiplicity').value.max > 1) {
+		// 		this.isMultiplicityEnabled = true;
+		// 	}
+		// }
+		// this.isComposite = (this.form.get('fields') as FormArray).length > 1;
 
 		if (this.viewOnly) {
 			this.form.get('hasCommentField').disable();
 		}
+
+		//SET UP TARGET FIELD
+		// if((this.form.get('fields') as FormArray).length>0){
+		// 	//get the first field in list
+		// 	this.targetField = (this.form.get('fields') as FormArray).at(0) as FormGroup;
+		// }
+
+		this.showExtendedDescription = !!this.form.get('extendedDescription').value;
+		this.showAdditionalInfo = !!this.form.get('additionalInformation').value;
+
+		this.form.valueChanges.subscribe(changes=>{
+			// this.previewForm = null;
+			this.previewDirty = true;
+			this.generatePreviewForm();
+			
+		});
+		this.previewSubject$.pipe(debounceTime(600)).subscribe(model=>{
+			const updatedForm = model.buildForm();
+			this.reloadPreview(updatedForm)
+		})
+
+
+		this.generatePreviewForm();
 	}
 
+
+	get updatedClass(){
+		if(this.previewDirty) return '';
+		else return 'updated';
+	}
+	private reloadPreview(updatedForm: FormGroup){
+		setTimeout(() => {
+			
+			const previewContainer = document.getElementById('preview_container'+ this.form.get('id').value);
+			// let clientHeight = -1;
+			if(previewContainer){
+				// console.log(previewContainer);
+				const clientHeight = previewContainer.clientHeight;
+				// console.log(clientHeight);
+
+				if(clientHeight){
+					previewContainer.style.height = clientHeight.toString() + 'px';
+
+					// console.log('height:' ,previewContainer.style.height);
+				}
+			}
+			this.showPreview = false;
+			this.previewDirty = true;
+			this.previewForm = updatedForm;
+
+			setTimeout(() => {
+
+				
+				this.showPreview = true;
+				this.previewDirty = false;
+
+				if(previewContainer){
+					setTimeout(() => {
+						if(previewContainer){
+							previewContainer.style.height = 'auto';
+						}
+					});
+				}
+			});	
+		});
+	}
+
+	previewSubject$: Subject<DatasetDescriptionSectionEditorModel> = new Subject<DatasetDescriptionSectionEditorModel>();
+
+	private generatePreviewForm(){
+		const formValue:FieldSet = this.form.getRawValue();
+			const fields:FieldDefinition[] = formValue.fields.map(editorField=>this._fieldToFieldDefinition(editorField));
+			
+
+			const compositeField: CompositeField = {
+				id: formValue.id,
+				additionalInformation: formValue.additionalInformation,
+				extendedDescription: formValue.extendedDescription,
+				numbering:'',
+				title: formValue.title,
+				ordinal: formValue.ordinal,
+				description: formValue.description,
+				hasCommentField: formValue.hasCommentField,
+				commentFieldValue: '',
+				multiplicity: {max:formValue.multiplicity.max, min : formValue.multiplicity.min},
+				multiplicityItems:null,
+				fields: fields.map(editorField=>{
+					const model = new DatasetDescriptionFieldEditorModel().fromModel(editorField);
+					if(model.viewStyle.renderStyle === this.viewStyleEnum.CheckBox){
+						model.value  = model.value?"true":"false";//patch
+					}
+					return  model;
+				})
+			}	
+
+
+			const section = new  DatasetDescriptionSectionEditorModel();
+			section.title = '';
+			section.numbering = '';
+
+			const compositeForm = new DatasetDescriptionCompositeFieldEditorModel().fromModel(compositeField)
+			section.compositeFields = [compositeForm];
+
+			this.previewSubject$.next(section);
+	}
+
+
+	private _fieldToFieldDefinition(editorField: Field): FieldDefinition{
+		const field = {
+			id: editorField.id,
+			title: '',
+			page: editorField.page,
+			numbering:'',
+			multiplicity:null,
+			multiplicityItems: null,
+			viewStyle: editorField.viewStyle,
+			defaultValue:editorField.defaultValue,
+			value: null,
+			validations: editorField.validations,
+		} as FieldDefinition;
+
+		field.data = editorField.data;
+
+		// return new DatasetDescriptionFieldEditorModel().fromModel(field);
+		return field;
+	}
+
+
+	// generatePreview(){
+	// 	const editorModel = new DatasetDescriptionCompositeFieldEditorModel();
+	// 	editorModel.title = this.form.get('title').value;
+	// 	editorModel.description = this.form.get('description').value;
+	// 	editorModel.extendedDescription = this.form.get('extendedDescription').value;
+	// 	editorModel.additionalInformation = this.form.get('additionalInformation').value;
+	// 	editorModel.hasCommentField = this.form.get('hasCommentField').value;
+	// 	editorModel.fields = [];
+
+	// 	(this.form.get('fields') as FormArray).controls.forEach(field=>{
+	// 		const fieldEditorModel = new DatasetDescriptionFieldEditorModel();
+			
+	// 		fieldEditorModel.viewStyle= {
+	// 				renderStyle: field.get('viewStyle').get('renderStyle').value,
+	// 				cssClass: null
+	// 			};
+	// 		fieldEditorModel.defaultValue = field.get('defaultValue').value;
+	// 		switch (field.get('viewStyle').get('renderStyle').value) {
+	// 			case DatasetProfileFieldViewStyle.TextArea:
+	// 				fieldEditorModel.data = { 
+	// 					label: field.get('data').get('label').value
+	// 				};
+	// 				break;
+			
+	// 			default:
+	// 				break;
+	// 		}
+			
+
+	// 		editorModel.fields.push(fieldEditorModel);
+	// 	});
+
+
+	// 	this.previewForm = editorModel.buildForm();
+	// }
+
 	onIsCompositeChange(isComposite: boolean) {
 		if (!isComposite && (<FormArray>this.form.get('fields')).length > 1) {
 			for (let i = 0; i < (<FormArray>this.form.get('fields')).length - 1; i++) {
@@ -46,25 +299,594 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit {
 		}
 	}
 
-	onIsMultiplicityEnabledChange(isMultiplicityEnabled: boolean) {
-		if (!isMultiplicityEnabled) {
-			(<FormControl>this.form.get('multiplicity').get('min')).setValue(0);
-			(<FormControl>this.form.get('multiplicity').get('max')).setValue(0);
+	onIsMultiplicityEnabledChange(isMultiplicityEnabled: MatCheckboxChange) {
+
+		const multiplicity = this.form.get('multiplicity') as FormGroup;
+
+		const minControl = multiplicity.get('min');
+		const maxControl = multiplicity.get('max');
+
+		if (isMultiplicityEnabled.checked) {
+			minControl.setValue(0);
+			maxControl.setValue(1);
+		}else{
+			minControl.setValue(0);
+			maxControl.setValue(0);
 		}
+
+		minControl.updateValueAndValidity();
+		maxControl.updateValueAndValidity();
+		
 	}
 
 	addNewField() {
 		const field: FieldEditorModel = new FieldEditorModel();
 		field.id=Guid.create().toString();
-		(<FormArray>this.form.get('fields')).push(field.buildForm());
+
+		field.ordinal = (this.form.get('fields') as FormArray).length;
+
+		const fieldForm = field.buildForm();
+		// fieldForm.setValidators(this.customFieldValidator());
+		
+		// fieldForm.get('viewStyle').get('renderStyle').setValidators(Validators.required);
+
+		(<FormArray>this.form.get('fields')).push(fieldForm);
+		
+		this.setTargetField(fieldForm);
+		fieldForm.updateValueAndValidity();
 	}
 
 	DeleteField(index) {
-		(<FormArray>this.form.get('fields')).removeAt(index);
+
+		const fieldsForm = <FormArray>this.form.get('fields');
+		fieldsForm.removeAt(index);
+
+		// calculate ordinals
+		fieldsForm.controls.forEach((field, idx)=>{
+			field.get('ordinal').setValue(idx);
+			field.updateValueAndValidity();
+		})
 	}
 
 	getFieldTile(formGroup: FormGroup, index: number) {
 		if (formGroup.get('title') && formGroup.get('title').value && formGroup.get('title').value.length > 0) { return formGroup.get('title').value; }
 		return "Field " + (index + 1);
 	}
+
+
+	targetField:FormGroup;
+	validationTypeEnum = ValidationType;
+
+
+	addVisibilityRule(targetField: FormGroup){
+		const rule: RuleEditorModel = new RuleEditorModel();
+		(<FormArray>targetField.get('visible').get('rules')).push(rule.buildForm());
+	}
+	toggleRequired(targetField: FormGroup, event:MatCheckboxChange){
+		
+		let validationsControl = targetField.get('validations') as FormControl;
+		let validations: Array<ValidationType> = validationsControl.value;
+
+		if(event.checked){
+			if(!validations.includes(ValidationType.Required)){//IS ALREADY REQUIRED
+				// validationsControl.setValue(validations.filter(validator=> validator != ValidationType.Required));
+				// validationsControl.updateValueAndValidity();
+				validations.push(ValidationType.Required);
+				// validationsControl.setValue(validations);
+				validationsControl.updateValueAndValidity();
+			}
+		}else{
+			validationsControl.setValue(validations.filter(validator=> validator != ValidationType.Required));
+			validationsControl.updateValueAndValidity();
+		}
+		
+		
+		// if(validations.includes(ValidationType.Required)){//IS ALREADY REQUIRED
+		// 	validationsControl.setValue(validations.filter(validator=> validator != ValidationType.Required));
+		// 	validationsControl.updateValueAndValidity();
+		// }else{ 
+		// 	//SET REQUIRED VALIDATOR
+		// 	console.log('setting required validator');
+		// 	validations.push(ValidationType.Required);
+		// 	validationsControl.setValue(validations);
+		// 	validationsControl.updateValueAndValidity();
+		// }
+	}
+	setTargetField(field:FormGroup){
+		this.targetField = field;
+	}
+
+
+	
+
+
+
+	deleteTargetField(){
+		
+		const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+			restoreFocus: false,
+			data: {
+				message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
+				confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'),
+				cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL'),
+				isDeleteConfirmation: true
+			}
+		});
+		dialogRef.afterClosed().subscribe(result => {
+			if (result) {
+				this._deleteTargetField();
+			}
+		});
+	
+	}
+
+
+	private _deleteTargetField(){
+		if(!this.targetField) return;
+
+		let index = -1;
+
+		const fields = this.form.get('fields') as FormArray;
+
+		for(let i=0;i< fields.length; i++){
+			let field = fields.at(i);
+			if(field.get('id').value === this.targetField.get('id').value){//index found
+				index = i;
+				break;
+			}
+		}
+
+		if(index>=0){//target found in fields
+			this.DeleteField(index);
+			this.targetField = null;
+		}
+
+	}
+
+	deleteField(index: number){
+		
+		const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+			restoreFocus: false,
+			data: {
+				message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
+				confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'),
+				cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL'),
+				isDeleteConfirmation: true
+			}
+		});
+		dialogRef.afterClosed().subscribe(result => {
+			if (result) {
+				this.DeleteField(index);
+			}
+		});
+	
+	}
+
+
+
+
+	addNewInput(type: ViewStyleType){
+		
+		const fieldsArray = this.form.get('fields') as FormArray;
+		
+		let targetOrdinal = fieldsArray.length;
+		try{
+			targetOrdinal = fieldsArray.controls.map(control=> control.get('ordinal').value).reduce((a,b)=>Math.max(a,b)) +1;
+		}catch{
+			
+		}
+
+
+
+		const field = {
+			id: Guid.create().toString(),
+			ordinal: targetOrdinal,
+			visible:{rules:[],style:null},
+			validations:[],
+			viewStyle:{}
+
+		} as Field;
+
+
+		// const field: FieldEditorModel = new FieldEditorModel();
+		// field.id=Guid.create().toString();
+
+		// field.ordinal = (this.form.get('fields') as FormArray).length;
+
+		// const fieldForm = field.buildForm();
+		// fieldForm.setValidators(this.customFieldValidator());
+		// fieldForm.get('viewStyle').get('renderStyle').setValidators(Validators.required);
+		
+		
+
+		// if (fieldForm.get('data')) {
+		// 	fieldForm.removeControl('data');
+		// }
+
+		switch (type) {
+			case this.viewTypeEnum.BooleanDecision:{
+				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.BooleanDecision)
+				// fieldForm.addControl('data', new BooleanDecisionFieldDataEditorModel().buildForm());
+
+				const data: BooleanDecisionFieldData = {
+					label:''
+				}
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.BooleanDecision;
+				field.data = data;
+
+				break;
+			}
+			case this.viewTypeEnum.CheckBox:{
+
+			
+				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.CheckBox)
+				// fieldForm.addControl('data', new CheckBoxFieldDataEditorModel().buildForm());
+				const data: CheckBoxFieldData = {
+					label:''
+				}
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.CheckBox;
+				field.data = data;
+				
+				break;
+			}
+			case this.viewTypeEnum.Select:{
+
+			
+				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
+				// fieldForm.addControl('data', new WordListFieldDataEditorModel().buildForm());
+
+				// fieldForm.get('data').setValidators(EditorCustomValidators.atLeastOneElementListValidator('options'));
+				// fieldForm.get('data').updateValueAndValidity();
+
+				const firstOption = {label:'', value:''} as FieldDataOption;
+
+				const data:WordListFieldData = {
+					label:'',
+					multiList:false,
+					options:[firstOption],
+					type:DatasetProfileComboBoxType.WordList
+				}
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.ComboBox;
+				field.data = data;
+
+				break;
+			}
+			case this.viewTypeEnum.Other:{
+
+			
+				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
+				// fieldForm.addControl('data', new AutoCompleteFieldDataEditorModel().buildForm()); //TODO SEE
+
+				// fieldForm.get('data').setValidators(EditorCustomValidators.atLeastOneElementListValidator('autoCompleteSingleDataList'));
+				// fieldForm.get('data').updateValueAndValidity();
+
+				const data: AutoCompleteFieldData = {
+					autoCompleteSingleDataList:[],
+					multiAutoComplete: false,
+					label:'',
+					type: DatasetProfileComboBoxType.Autocomplete
+				}
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.ComboBox;
+				field.data = data;
+
+				break;
+			}case this.viewTypeEnum.InternalDmpEntities:{
+
+			
+				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.InternalDmpEntities)
+				// fieldForm.addControl('data', new ResearchersAutoCompleteFieldDataEditorModel().buildForm());//TODO TO SEE
+			
+				const data: DmpsAutoCompleteFieldData = {
+					label:'',
+					multiAutoComplete: false,
+					type: DatasetProfileInternalDmpEntitiesType.Dmps
+				}
+
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.InternalDmpEntities;
+				field.data = data;
+
+				break;
+			}
+			case this.viewTypeEnum.FreeText:{
+
+			
+				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.FreeText)
+				// fieldForm.addControl('data', new FreeTextFieldDataEditorModel().buildForm());
+
+				const data: FreeTextFieldData = {
+					label:''
+				}
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.FreeText;
+				field.data = data;
+				break;
+			}
+			case this.viewTypeEnum.RadioBox:{
+
+			
+				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.RadioBox)
+				// fieldForm.addControl('data', new RadioBoxFieldDataEditorModel().buildForm());
+				// fieldForm.get('data').setValidators(EditorCustomValidators.atLeastOneElementListValidator('options'));
+				// fieldForm.get('data').updateValueAndValidity();
+				const data: RadioBoxFieldData= {
+					label:'',
+					options: []
+				}
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.RadioBox;
+				field.data = data;
+
+				break;
+			}
+			case this.viewTypeEnum.TextArea:{
+
+			
+				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.TextArea)
+				// fieldForm.addControl('data', new TextAreaFieldDataEditorModel().buildForm());
+
+				const data: TextAreaFieldData = {
+					label:''
+				}
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.TextArea;
+				field.data = data;
+
+				break;
+			}
+			case this.viewTypeEnum.DatePicker:{
+
+			
+				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DatePicker)
+				// fieldForm.addControl('data', new DatePickerDataEditorModel().buildForm());
+				const data: DatePickerFieldData = {
+					label:''
+				}
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.DatePicker;
+
+				break;
+			}
+			case this.viewTypeEnum.ExternalDatasets:{
+
+			
+				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ExternalDatasets)
+				// fieldForm.addControl('data', new ExternalDatasetsDataEditorModel().buildForm());
+				const data: ExternalDatasetsFieldData = {
+					label:'',
+					multiAutoComplete: false
+				}
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.ExternalDatasets;
+				field.data = data;
+				break;
+			}
+			case this.viewTypeEnum.DataRepositories:{
+
+			
+				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DataRepositories)
+				// fieldForm.addControl('data', new DataRepositoriesDataEditorModel().buildForm());
+
+				const data: DataRepositoriesFieldData = {
+					label: '',
+					multiAutoComplete: false
+				}
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.DataRepositories;
+				field.data = data;
+
+				break;
+			}
+			case this.viewTypeEnum.Registries:{
+
+			
+				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Registries)
+				// fieldForm.addControl('data', new RegistriesDataEditorModel().buildForm());
+				
+				const data:RegistriesFieldData = {
+					label: '',
+					multiAutoComplete: false
+				}
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Registries;
+				field.data = data;
+
+				break;
+			}
+			case this.viewTypeEnum.Services:{
+
+			
+				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Services)
+				// fieldForm.addControl('data', new ServicesDataEditorModel().buildForm());
+
+				const data:ServicesFieldData = {
+					label:'',
+					multiAutoComplete: false
+				}
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Services;
+				field.data = data;
+
+				break;
+			}
+			case this.viewTypeEnum.Tags:{
+
+			
+				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Tags)
+				// fieldForm.addControl('data', new TagsDataEditorModel().buildForm());
+
+				const data: TagsFieldData = {
+					label:''
+				}
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Tags;
+				field.data = data;
+
+				break;
+			}
+			case this.viewTypeEnum.Researchers:{
+
+			
+				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Researchers)
+				// this.form.addControl('data', new ResearchersDataEditorModel().buildForm()); //TODO TO ASK
+				// fieldForm.addControl('data', new ResearchersAutoCompleteFieldDataEditorModel().buildForm());
+
+				// field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Researchers;
+				const data : ResearchersAutoCompleteFieldData = {
+					label:'',
+					multiAutoComplete: false,
+					type: DatasetProfileInternalDmpEntitiesType.Researchers
+				}
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.InternalDmpEntities;
+				field.data  = data;
+
+				break;
+			}
+			case this.viewTypeEnum.Organizations:{
+
+			
+				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Organizations)
+				// fieldForm.addControl('data', new OrganizationsDataEditorModel().buildForm());
+				// this.form.addControl('data', new OrganizationsDataEditorModel().buildForm())
+				// fieldForm.addControl('data', new DatasetsAutoCompleteFieldDataEditorModel().buildForm());  //TODO
+
+				const data = {
+					autoCompleteSingleDataList:[],
+					label:'',
+					multiAutoComplete: false,
+					
+				} as OrganizationsFieldData; //TODO 
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Organizations;
+				field.data = data;
+
+				break;
+			}
+			case this.viewTypeEnum.DatasetIdentifier:{
+
+			
+				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DatasetIdentifier)
+				// fieldForm.addControl('data', new DatasetIdentifierDataEditorModel().buildForm());
+
+				const data : DatasetIdentifierFieldData = {
+					label:''
+				}
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.DatasetIdentifier;
+				field.data = data;
+				
+				break;
+			}
+			case this.viewTypeEnum.Currency:{
+
+			
+				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Currency)
+				// fieldForm.addControl('data', new CurrencyDataEditorModel().buildForm());
+
+				const data: CurrencyFieldData = {
+					label:''
+				}
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Currency;
+				field.data = data;
+
+				break;
+			}
+			case this.viewTypeEnum.Validation:{
+
+			
+				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Validation)
+				// fieldForm.addControl('data', new ValidationDataEditorModel().buildForm());
+
+				const data:ValidationFieldData = {
+					label:''
+				}
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Validation;
+				field.data = data;
+
+				break;
+			}
+		}
+
+		(<FormArray>this.form.get('fields')).push(new FieldEditorModel().fromModel(field).buildForm());
+		// fieldForm.get('viewStyle').get('renderStyle').updateValueAndValidity();
+		// fieldForm.get('data').updateValueAndValidity();
+		
+
+	}
+
+	// private customFieldValidator(): ValidatorFn{
+	// 	return (control):ValidationErrors | null=>{
+	// 		DatasetProfileFieldViewStyle
+	// 		switch(control.get('viewStyle').get('renderStyle').value){
+
+	// 			case DatasetProfileFieldViewStyle.TextArea:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.BooleanDecision:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.ComboBox:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.CheckBox:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.FreeText:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.RadioBox:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.DatePicker:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.InternalDmpEntities:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.ExternalDatasets:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.DataRepositories:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.Registries:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.Services:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.Tags:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.Researchers:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.Organizations:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.DatasetIdentifier:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.Currency:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.Validation:
+	// 				return null;
+	// 			default:
+	// 				return {inputTypeNotValid: true}
+	// 		}
+	// 	}
+	// }
+
+
+	// private _atLeastOneElementListValidator(arrayToCheck): ValidatorFn{
+	// 	return (control: AbstractControl): ValidationErrors | null=>{
+			
+	// 		const fa = control.get(arrayToCheck) as FormArray;
+
+	// 		if(fa.length  === 0){
+	// 			return {emptyArray: true};
+	// 		}
+	// 		return null;
+	// 	}
+	// }
+
+
+	calculateLabelWidth(numbering: string){
+
+		const width = numbering.split('.').reduce((acc,item)=> item+acc,'').length;
+
+
+		return {'width':width+'em'}
+	}
 }
+
+
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-profile-editor-default-value/component-profile-editor-default-value.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-profile-editor-default-value/component-profile-editor-default-value.component.html
index b9c42bc35..31648ff9a 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-profile-editor-default-value/component-profile-editor-default-value.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-profile-editor-default-value/component-profile-editor-default-value.component.html
@@ -1,7 +1,8 @@
 <div class="row">
 	<!-- BooleanDecision -->
 	<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.BooleanDecision">
-		<mat-select [formControl]="form" [placeholder]="placeHolder" [required]="required">
+		<mat-label>{{placeHolder}}</mat-label>
+		<mat-select [formControl]="form" [placeholder]="placeHolder">
 			<mat-option [value]="null">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.NONE' |
                 translate}}</mat-option>
 			<mat-option [value]="'true'">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.BOOLEAN-DECISION.YES'
@@ -16,7 +17,8 @@
 
 	<!-- CheckBox -->
 	<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.CheckBox">
-		<mat-select [formControl]="form" [placeholder]="placeHolder" [required]="required">
+		<mat-label>{{placeHolder}}</mat-label>
+		<mat-select [formControl]="form" [placeholder]="placeHolder" >
 			<mat-option [value]="'true'">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.CHECK-BOX.CHECKED' | translate}}</mat-option>
 			<mat-option [value]="'false'">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.CHECK-BOX.UNCHECKED' | translate}}</mat-option>
 		</mat-select>
@@ -24,11 +26,13 @@
 	</mat-form-field>
 
 	<!-- ComboBox -->
-	<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.ComboBox && comboBoxType === comboBoxTypeEnum.Autocomplete">
+	<!-- <mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.ComboBox && comboBoxType === comboBoxTypeEnum.Autocomplete">
+		<mat-label>{{placeHolder}}</mat-label>
 		<input matInput type="text" [placeholder]="placeHolder" [formControl]="form" [required]="required">
-	</mat-form-field>
+	</mat-form-field> -->
 	<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.ComboBox && comboBoxType === comboBoxTypeEnum.WordList">
-		<mat-select [formControl]="form" [placeholder]="placeHolder" [required]="required">
+		<mat-label>{{placeHolder}}</mat-label>
+		<mat-select [formControl]="form" [placeholder]="placeHolder" >
 			<mat-option [value]="null">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.NONE' | translate }}</mat-option>
 			<mat-option *ngFor="let opt of formArrayOptions['controls']" [value]="opt.get('value').value">{{opt.get('label').value}}</mat-option>
 		</mat-select>
@@ -36,25 +40,30 @@
 	</mat-form-field>
 
 	<!-- InternalDmpEntities -->
-	<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.InternalDmpEntities && internalDmpEntitiesType === internalDmpEntitiesTypeEnum.Researchers">
+	<!-- <mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.InternalDmpEntities && internalDmpEntitiesType === internalDmpEntitiesTypeEnum.Researchers">
+		<mat-label>{{placeHolder}}</mat-label>
 		<input matInput type="text" [placeholder]="placeHolder" [formControl]="form" [required]="required">
 	</mat-form-field>
 	<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.InternalDmpEntities && internalDmpEntitiesType === internalDmpEntitiesTypeEnum.Datasets">
+		<mat-label>{{placeHolder}}</mat-label>
 		<input matInput type="text" [placeholder]="placeHolder" [formControl]="form" [required]="required">
 	</mat-form-field>
 	<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.InternalDmpEntities && internalDmpEntitiesType === internalDmpEntitiesTypeEnum.Dmps">
+		<mat-label>{{placeHolder}}</mat-label>
 		<input matInput type="text" [placeholder]="placeHolder" [formControl]="form" [required]="required">
-	</mat-form-field>
+	</mat-form-field> -->
 
 	<!-- FreeText -->
 	<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.FreeText">
-		<input matInput type="text" [placeholder]="placeHolder" [formControl]="form" [required]="required">
+		<mat-label>{{placeHolder}}</mat-label>
+		<input matInput type="text" [placeholder]="placeHolder" [formControl]="form" >
 		<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 	</mat-form-field>
 
 	<!-- RadioBox -->
 	<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.RadioBox">
-		<mat-select [formControl]="form" [placeholder]="placeHolder" [required]="required">
+		<mat-label>{{placeHolder}}</mat-label>
+		<mat-select [formControl]="form" [placeholder]="placeHolder" >
 			<mat-option [value]="null">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.NONE' | translate}}</mat-option>
 			<mat-option *ngFor="let opt of formArrayOptions['controls']" [value]="opt.get('value').value">{{opt.get('label').value}}</mat-option>
 		</mat-select>
@@ -63,14 +72,16 @@
 
 	<!-- TextArea -->
 	<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.TextArea">
-		<input matInput type="text" [placeholder]="placeHolder" [formControl]="form" [required]="required">
+		<mat-label>{{placeHolder}}</mat-label>
+		<input matInput type="text" [placeholder]="placeHolder" [formControl]="form">
 		<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 	</mat-form-field>
 
 	<!-- DatePicker -->
 	<mat-form-field class="col-12" *ngIf="viewStyle === viewStyleEnum.DatePicker">
 		<!--(focus)="date.open()" (click)="date.open()"-->
-		<input matInput [placeholder]="placeHolder" class="table-input" [matDatepicker]="date" [formControl]="form" [required]="required">
+		<mat-label>{{placeHolder}}</mat-label>
+		<input matInput [placeholder]="placeHolder" class="table-input" [matDatepicker]="date" [formControl]="form" >
 		<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
 		<mat-datepicker #date></mat-datepicker>
 		<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-profile-editor-default-value/component-profile-editor-default-value.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-profile-editor-default-value/component-profile-editor-default-value.component.ts
index aedb1fa72..a62bc0cb4 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-profile-editor-default-value/component-profile-editor-default-value.component.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-profile-editor-default-value/component-profile-editor-default-value.component.ts
@@ -17,7 +17,7 @@ export class DatasetProfileEditorDefaultValueComponent implements OnInit {
 	@Input() comboBoxType: DatasetProfileComboBoxType;
 	@Input() internalDmpEntitiesType: DatasetProfileInternalDmpEntitiesType;
 	@Input() placeHolder: String;
-	@Input() required: Boolean;
+	// @Input() required: Boolean;
 
 	comboBoxTypeEnum = DatasetProfileComboBoxType;
 	internalDmpEntitiesTypeEnum = DatasetProfileInternalDmpEntitiesType;
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/auto-complete/dataset-profile-editor-auto-complete-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/auto-complete/dataset-profile-editor-auto-complete-field.component.html
index 0b7c98d87..6037dbc05 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/auto-complete/dataset-profile-editor-auto-complete-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/auto-complete/dataset-profile-editor-auto-complete-field.component.html
@@ -6,14 +6,36 @@
 	</mat-checkbox>
 
 	<mat-form-field class="col-12">
-		<input matInput type="string" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-PLACEHOLDER' | translate}}"
+		<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-PLACEHOLDER' | translate}}</mat-label>
+		<input matInput type="string"
 		 [formControl]="form.get('data').get('label')">
 	</mat-form-field>
 
-	<h6 style="font-weight: bold" class="col-auto">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-SOURCE-TITLE' | translate}}</h6>
-	<button mat-raised-button type="button" class="col-auto" (click)="addSource()">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-ADD_SOURCE' | translate}}</button>
+	
+	<h6 class="col-12" style="font-weight: bold">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-SOURCE-TITLE' | translate}}</h6>
+	<div class="col-12 d-flex align-items-center" style="margin-bottom: 1em;">
+		<button mat-raised-button 
+			type="button" 
+			(click)="addSource()"
+			style="margin-right: 2em;"
+			>
+			<!-- [ngClass]="{'text-danger':form.get('data').errors?.emptyArray && form.touched}" -->
+			{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-ADD_SOURCE' | translate}}
+			
+		</button>
+		
+		<!-- *ngIf="form.get('data').errors?.emptyArray && form.get('data').touched" -->
+		<div class="d-flex" *ngIf="form.get('data').errors?.emptyArray && form.get('data').touched">
+			<mat-icon 
+			class="text-danger"
+			matTooltip="At least one source must be provided."
+			>warning_amber</mat-icon>
+			<small class="text-danger">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-OTHER-SOURCES-REQUIRED'| translate}}</small>
+		</div>
+		
 	</div>
-
+</div>
+	
 	<div *ngFor="let singleForm of multiForm.controls; let i = index" class="row">
 		<mat-form-field class="col-12">
 			<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-TYPE' | translate}}</mat-label>
@@ -24,20 +46,29 @@
 		</mat-form-field>
 
 		<mat-form-field class="col-md-12">
-			<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-URL' | translate}}" [formControl]="this.singleForm.get('url')">
+			<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-URL' | translate}}</mat-label>
+			<input matInput [formControl]="singleForm.get('url')">
+			<mat-error *ngIf="singleForm.get('url').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 		</mat-form-field>
 		<mat-form-field class="col-md-3">
-			<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-OPTIONS-ROOT' | translate}}"
-			[formControl]="this.singleForm.get('optionsRoot')">
+			<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-OPTIONS-ROOT' | translate}}</mat-label>
+			<input matInput
+			[formControl]="singleForm.get('optionsRoot')">
+			<mat-error *ngIf="singleForm.get('optionsRoot').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 		</mat-form-field>
 		<mat-form-field class="col-md-3">
-			<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-LABEL' | translate}}" [formControl]="this.singleForm.get('autoCompleteOptions').get('label')">
+			<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-LABEL' | translate}}</mat-label>
+			<input matInput [formControl]="singleForm.get('autoCompleteOptions').get('label')">
+			<mat-error *ngIf="singleForm.get('autoCompleteOptions').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 		</mat-form-field>
 		<mat-form-field class="col-md-3">
-			<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-VALUE' | translate}}" [formControl]="this.singleForm.get('autoCompleteOptions').get('value')">
+			<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-VALUE' | translate}}</mat-label>
+			<input matInput [formControl]="singleForm.get('autoCompleteOptions').get('value')">
 		</mat-form-field>
 		<mat-form-field class="col-md-3">
-			<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-SOURCE' | translate}}" [formControl]="this.singleForm.get('autoCompleteOptions').get('source')">
+			<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-SOURCE' | translate}}</mat-label>
+			<input matInput [formControl]="singleForm.get('autoCompleteOptions').get('source')">
+			<mat-error *ngIf="singleForm.get('autoCompleteOptions').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 		</mat-form-field>
 		<button mat-button type="button" (click)="removeSource(i)"><mat-icon>delete</mat-icon></button>
 	</div>
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/boolean-decision/dataset-profile-editor-boolean-decision-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/boolean-decision/dataset-profile-editor-boolean-decision-field.component.html
index 66105b839..e1f96a2e1 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/boolean-decision/dataset-profile-editor-boolean-decision-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/boolean-decision/dataset-profile-editor-boolean-decision-field.component.html
@@ -1,8 +1,9 @@
-<div class="row" *ngIf="form.get('data')">
+<!-- <div class="row" *ngIf="form.get('data')">
 
 	<h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-BOOLEAN-DECISION-TITLE' | translate}}</h5>
 
 	<mat-form-field class="col-12">
-		<input matInput type="string" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-BOOLEAN-DECISION-PLACEHOLDER' | translate}}" [formControl]="form.get('data').get('label')">
+		<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-BOOLEAN-DECISION-PLACEHOLDER' | translate}}</mat-label>
+		<input matInput type="string" [formControl]="form.get('data').get('label')">
 	</mat-form-field>
-</div>
+</div> -->
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/checkbox/dataset-profile-editor-checkbox-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/checkbox/dataset-profile-editor-checkbox-field.component.html
index cb2d82d7f..56ae77ff2 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/checkbox/dataset-profile-editor-checkbox-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/checkbox/dataset-profile-editor-checkbox-field.component.html
@@ -3,6 +3,7 @@
 	<h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-CHECKBOX-TITLE' | translate}}</h5>
 
 	<mat-form-field class="col-12">
-		<input matInput type="string" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-CHECKBOX-PLACEHOLDER' | translate}}" [formControl]="form.get('data').get('label')">
+		<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-CHECKBOX-PLACEHOLDER' | translate}}</mat-label>
+		<input matInput type="string" [formControl]="form.get('data').get('label')">
 	</mat-form-field>
 </div>
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/combo-box/dataset-profile-editor-combo-box-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/combo-box/dataset-profile-editor-combo-box-field.component.html
index 014c776f1..9f4e545ab 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/combo-box/dataset-profile-editor-combo-box-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/combo-box/dataset-profile-editor-combo-box-field.component.html
@@ -1,10 +1,10 @@
 <div class="row">
-	<mat-form-field class="col-12">
+	<!-- <mat-form-field class="col-12">
 		<mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-COMBO-BOX-TYPE' | translate}}" [formControl]="this.form.get('data').get('type')">
 			<mat-option [value]="options.Autocomplete">{{enumUtils.toDatasetProfileComboBoxTypeString(options.Autocomplete)}}</mat-option>
 			<mat-option [value]="options.WordList">{{enumUtils.toDatasetProfileComboBoxTypeString(options.WordList)}}</mat-option>
 		</mat-select>
-	</mat-form-field>
+	</mat-form-field> -->
 	<app-dataset-profile-editor-auto-complete-field-component *ngIf="this.form.get('data').get('type').value === options.Autocomplete" class="col-12" [form]="form"></app-dataset-profile-editor-auto-complete-field-component>
 	<app-dataset-profile-editor-word-list-field-component *ngIf="this.form.get('data').get('type').value === options.WordList" class="col-12" [form]="form"></app-dataset-profile-editor-word-list-field-component>
 </div>
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/combo-box/dataset-profile-editor-combo-box-field.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/combo-box/dataset-profile-editor-combo-box-field.component.ts
index 86cc30d8d..862cb61f9 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/combo-box/dataset-profile-editor-combo-box-field.component.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/combo-box/dataset-profile-editor-combo-box-field.component.ts
@@ -22,7 +22,7 @@ export class DatasetProfileEditorComboBoxFieldComponent extends BaseComponent im
 	) { super(); }
 
 	ngOnInit() {
-		this.setupListeners();
+		// this.setupListeners();
 	}
 
 	setupListeners() {
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/currency/dataset-profile-editor-currency-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/currency/dataset-profile-editor-currency-field.component.html
index aeb72f4ed..da6e65ae7 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/currency/dataset-profile-editor-currency-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/currency/dataset-profile-editor-currency-field.component.html
@@ -1,9 +1,9 @@
 <div class="row" *ngIf="form.get('data')">
-    <h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-DATE-PICKER-TITLE'
+    <h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-CURRENCY-TITLE'
 		| translate}}</h5>
     <mat-form-field class="col-12">
+      <mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-CURRENCY-PLACEHOLDER' | translate}}</mat-label>
         <input matInput type="string"
-            placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-CHECKBOX-PLACEHOLDER' | translate}}"
             [formControl]="form.get('data').get('label')">
     </mat-form-field>
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/data-repositories/dataset-profile-editor-data-repositories-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/data-repositories/dataset-profile-editor-data-repositories-field.component.html
index 95cf28e76..641c26ce1 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/data-repositories/dataset-profile-editor-data-repositories-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/data-repositories/dataset-profile-editor-data-repositories-field.component.html
@@ -1,12 +1,12 @@
 <div class="row" *ngIf="form.get('data')">
-    <h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-DATE-PICKER-TITLE'
+    <h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-DATA-REPOSITORIES-TITLE'
 		| translate}}</h5>
 	<mat-checkbox class="col-auto" [formControl]="this.form.get('data').get('multiAutoComplete')">
 		{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-MULTIPLE-AUTOCOMPLETE' | translate}}
 	</mat-checkbox>
     <mat-form-field class="col-12">
+        <mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-DATA-REPOSITORIES-PLACEHOLDER' | translate}}</mat-label>
         <input matInput type="string"
-            placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-CHECKBOX-PLACEHOLDER' | translate}}"
             [formControl]="form.get('data').get('label')">
     </mat-form-field>
 </div>
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/dataset-identifier/dataset-profile-editor-dataset-identifier-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/dataset-identifier/dataset-profile-editor-dataset-identifier-field.component.html
index aeb72f4ed..263601838 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/dataset-identifier/dataset-profile-editor-dataset-identifier-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/dataset-identifier/dataset-profile-editor-dataset-identifier-field.component.html
@@ -1,9 +1,9 @@
 <div class="row" *ngIf="form.get('data')">
-    <h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-DATE-PICKER-TITLE'
+    <h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-DATASET-IDENTIFIER-TITLE'
 		| translate}}</h5>
     <mat-form-field class="col-12">
+      <mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-DATASET-IDENTIFIER-PLACEHOLDER' | translate}}</mat-label>
         <input matInput type="string"
-            placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-CHECKBOX-PLACEHOLDER' | translate}}"
             [formControl]="form.get('data').get('label')">
     </mat-form-field>
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/datasets-auto-complete/dataset-profile-editor-datasets-autocomplete-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/datasets-auto-complete/dataset-profile-editor-datasets-autocomplete-field.component.html
index 85de8192e..e7c6d01dc 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/datasets-auto-complete/dataset-profile-editor-datasets-autocomplete-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/datasets-auto-complete/dataset-profile-editor-datasets-autocomplete-field.component.html
@@ -6,7 +6,8 @@
 	</mat-checkbox>
 
 	<mat-form-field class="col-12">
-		<input matInput type="string" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-DATASETS-PLACEHOLDER' | translate}}"
+		<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-DATASETS-PLACEHOLDER' | translate}}</mat-label>
+		<input matInput type="string"
 		 [formControl]="form.get('data').get('label')">
 	</mat-form-field>
 </div>
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/datepicker/dataset-profile-editor-date-picker-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/datepicker/dataset-profile-editor-date-picker-field.component.html
index aeb72f4ed..bf505dbea 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/datepicker/dataset-profile-editor-date-picker-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/datepicker/dataset-profile-editor-date-picker-field.component.html
@@ -2,8 +2,8 @@
     <h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-DATE-PICKER-TITLE'
 		| translate}}</h5>
     <mat-form-field class="col-12">
+      <mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-CHECKBOX-PLACEHOLDER' | translate}}</mat-label>
         <input matInput type="string"
-            placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-CHECKBOX-PLACEHOLDER' | translate}}"
             [formControl]="form.get('data').get('label')">
     </mat-form-field>
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/dmps-auto-complete/dataset-profile-editor-dmps-autocomplete-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/dmps-auto-complete/dataset-profile-editor-dmps-autocomplete-field.component.html
index 70d5106e7..2109b436b 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/dmps-auto-complete/dataset-profile-editor-dmps-autocomplete-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/dmps-auto-complete/dataset-profile-editor-dmps-autocomplete-field.component.html
@@ -6,7 +6,8 @@
 	</mat-checkbox>
 
 	<mat-form-field class="col-12">
-		<input matInput type="string" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-DMPS-PLACEHOLDER' | translate}}"
+		<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-DMPS-PLACEHOLDER' | translate}}</mat-label>
+		<input matInput type="string" 
 		 [formControl]="form.get('data').get('label')">
 	</mat-form-field>
 </div>
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/external-datasets/dataset-profile-editor-external-datasets-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/external-datasets/dataset-profile-editor-external-datasets-field.component.html
index 96016ab7c..a5c074147 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/external-datasets/dataset-profile-editor-external-datasets-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/external-datasets/dataset-profile-editor-external-datasets-field.component.html
@@ -1,13 +1,13 @@
 <div class="row" *ngIf="form.get('data')">
-    <h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-DATE-PICKER-TITLE'
+    <h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-EXTERNAL-DATASETS-TITLE'
 		| translate}}</h5>
 	<mat-checkbox class="col-auto" [formControl]="this.form.get('data').get('multiAutoComplete')">
 		{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-MULTIPLE-AUTOCOMPLETE' | translate}}
 	</mat-checkbox>
 
     <mat-form-field class="col-12">
+        <mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-EXTERNAL-DATASETS-PLACEHOLDER' | translate}}</mat-label>
         <input matInput type="string"
-            placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-CHECKBOX-PLACEHOLDER' | translate}}"
             [formControl]="form.get('data').get('label')">
     </mat-form-field>
 </div>
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/free-text/dataset-profile-editor-free-text-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/free-text/dataset-profile-editor-free-text-field.component.html
index 9509b5a57..cc1248c46 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/free-text/dataset-profile-editor-free-text-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/free-text/dataset-profile-editor-free-text-field.component.html
@@ -4,8 +4,8 @@
 		{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-FREE-TEXT-TITLE' | translate}}</h5>
 
 	<mat-form-field class="col-12">
+		<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-FREE-TEXT-PLACEHOLDER' | translate}}</mat-label>
 		<input matInput type="string"
-			placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-FREE-TEXT-PLACEHOLDER' | translate}}"
 			[formControl]="form.get('data').get('label')">
 	</mat-form-field>
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/organizations/dataset-profile-editor-organizations-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/organizations/dataset-profile-editor-organizations-field.component.html
index 96016ab7c..303388518 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/organizations/dataset-profile-editor-organizations-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/organizations/dataset-profile-editor-organizations-field.component.html
@@ -1,13 +1,13 @@
 <div class="row" *ngIf="form.get('data')">
-    <h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-DATE-PICKER-TITLE'
+    <h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-ORGANIZATIONS-TITLE'
 		| translate}}</h5>
 	<mat-checkbox class="col-auto" [formControl]="this.form.get('data').get('multiAutoComplete')">
 		{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-MULTIPLE-AUTOCOMPLETE' | translate}}
 	</mat-checkbox>
 
     <mat-form-field class="col-12">
+        <mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-ORGANIZATIONS-PLACEHOLDER' | translate}}</mat-label>
         <input matInput type="string"
-            placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-CHECKBOX-PLACEHOLDER' | translate}}"
             [formControl]="form.get('data').get('label')">
     </mat-form-field>
 </div>
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/radio-box/dataset-profile-editor-radio-box-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/radio-box/dataset-profile-editor-radio-box-field.component.html
index 612a43bc4..944b3e3a9 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/radio-box/dataset-profile-editor-radio-box-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/radio-box/dataset-profile-editor-radio-box-field.component.html
@@ -1,24 +1,29 @@
 <div class="row" *ngIf="form.get('data')">
+	<div class="col-12">
+		<h5 style="font-weight: bold; display: inline-block; margin-right: 2em;">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-TITLE'
+			| translate}}</h5>
+			<ng-container *ngIf="form.get('data').errors?.emptyArray && form.get('data').touched">
+				<mat-icon class="text-danger translateY-3">warning_amber</mat-icon>
+				<small class="text-danger">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-RADIO-AT-LEAST-ONE-REQUIRED'| translate}}</small>
+			</ng-container>
+	</div>
 
-	<h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-TITLE'
-		| translate}}</h5>
-
-	<mat-form-field class="col-12">
+	<!-- <mat-form-field class="col-12">
+		<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-PLACEHOLDER' | translate}}</mat-label>
 		<input matInput type="string"
-			placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-PLACEHOLDER' | translate}}"
 			[formControl]="form.get('data').get('label')">
-	</mat-form-field>
+	</mat-form-field> -->
 
 	<div class="col-12">
 		<div *ngFor="let option of form.get('data').get('options')['controls'] index as i" class="row">
 			<mat-form-field class="col">
+				<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-LABEL' | translate}}</mat-label>
 				<input matInput type="string"
-					placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-LABEL' | translate}}"
 					[formControl]="this.form.get('data').get('options').get(''+i).get('label')">
 			</mat-form-field>
 			<mat-form-field class="col">
+				<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-VALUE' | translate}}</mat-label>
 				<input matInput type="string"
-					placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-VALUE' | translate}}"
 					[formControl]="this.form.get('data').get('options').get(''+i).get('value')">
 			</mat-form-field>
 			<button mat-icon-button class="col-auto" (click)="deleteRow(i)" type="button"
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/radio-box/dataset-profile-editor-radio-box-field.component.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/radio-box/dataset-profile-editor-radio-box-field.component.scss
index 3db0dee74..8bec9923c 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/radio-box/dataset-profile-editor-radio-box-field.component.scss
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/radio-box/dataset-profile-editor-radio-box-field.component.scss
@@ -1,3 +1,4 @@
 .full-width {
   width: 100%;
 }
+
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/registries/dataset-profile-editor-registries-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/registries/dataset-profile-editor-registries-field.component.html
index 95cf28e76..7aad9fc38 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/registries/dataset-profile-editor-registries-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/registries/dataset-profile-editor-registries-field.component.html
@@ -1,12 +1,12 @@
 <div class="row" *ngIf="form.get('data')">
-    <h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-DATE-PICKER-TITLE'
+    <h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-REGISTRIES-TITLE'
 		| translate}}</h5>
 	<mat-checkbox class="col-auto" [formControl]="this.form.get('data').get('multiAutoComplete')">
 		{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-MULTIPLE-AUTOCOMPLETE' | translate}}
 	</mat-checkbox>
     <mat-form-field class="col-12">
+        <mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-REGISTRIES-PLACEHOLDER' | translate}}</mat-label>
         <input matInput type="string"
-            placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-CHECKBOX-PLACEHOLDER' | translate}}"
             [formControl]="form.get('data').get('label')">
     </mat-form-field>
 </div>
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/researchers-auto-complete/dataset-profile-editor-researchers-auto-complete-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/researchers-auto-complete/dataset-profile-editor-researchers-auto-complete-field.component.html
index 7de5c855f..94260ad5a 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/researchers-auto-complete/dataset-profile-editor-researchers-auto-complete-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/researchers-auto-complete/dataset-profile-editor-researchers-auto-complete-field.component.html
@@ -6,7 +6,8 @@
 	</mat-checkbox>
 
 	<mat-form-field class="col-12">
-		<input matInput type="string" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RESEARCHERS-PLACEHOLDER' | translate}}"
+		<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RESEARCHERS-PLACEHOLDER' | translate}}</mat-label>
+		<input matInput type="string"
 		 [formControl]="form.get('data').get('label')">
 	</mat-form-field>
 </div>
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/researchers/dataset-profile-editor-researchers-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/researchers/dataset-profile-editor-researchers-field.component.html
index 95cf28e76..bc1c84e39 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/researchers/dataset-profile-editor-researchers-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/researchers/dataset-profile-editor-researchers-field.component.html
@@ -1,12 +1,12 @@
 <div class="row" *ngIf="form.get('data')">
-    <h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-DATE-PICKER-TITLE'
+    <h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RESEARCHERS-TITLE'
 		| translate}}</h5>
 	<mat-checkbox class="col-auto" [formControl]="this.form.get('data').get('multiAutoComplete')">
 		{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-MULTIPLE-AUTOCOMPLETE' | translate}}
 	</mat-checkbox>
     <mat-form-field class="col-12">
+        <mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RESEARCHERS-PLACEHOLDER' | translate}}</mat-label>
         <input matInput type="string"
-            placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-CHECKBOX-PLACEHOLDER' | translate}}"
             [formControl]="form.get('data').get('label')">
     </mat-form-field>
 </div>
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/services/dataset-profile-editor-services-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/services/dataset-profile-editor-services-field.component.html
index 95cf28e76..9f0991328 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/services/dataset-profile-editor-services-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/services/dataset-profile-editor-services-field.component.html
@@ -1,12 +1,12 @@
 <div class="row" *ngIf="form.get('data')">
-    <h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-DATE-PICKER-TITLE'
+    <h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-SERVICES-TITLE'
 		| translate}}</h5>
 	<mat-checkbox class="col-auto" [formControl]="this.form.get('data').get('multiAutoComplete')">
 		{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-MULTIPLE-AUTOCOMPLETE' | translate}}
 	</mat-checkbox>
     <mat-form-field class="col-12">
+        <mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-SERVICES-PLACEHOLDER' | translate}}</mat-label>
         <input matInput type="string"
-            placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-CHECKBOX-PLACEHOLDER' | translate}}"
             [formControl]="form.get('data').get('label')">
     </mat-form-field>
 </div>
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/tags/dataset-profile-editor-tags-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/tags/dataset-profile-editor-tags-field.component.html
index aeb72f4ed..bab2b500f 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/tags/dataset-profile-editor-tags-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/tags/dataset-profile-editor-tags-field.component.html
@@ -1,9 +1,9 @@
 <div class="row" *ngIf="form.get('data')">
-    <h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-DATE-PICKER-TITLE'
+    <h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-TAGS-TITLE'
 		| translate}}</h5>
     <mat-form-field class="col-12">
+        <mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-TAGS-PLACEHOLDER' | translate}}</mat-label>
         <input matInput type="string"
-            placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-CHECKBOX-PLACEHOLDER' | translate}}"
             [formControl]="form.get('data').get('label')">
     </mat-form-field>
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/textarea/dataset-profile-editor-text-area-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/textarea/dataset-profile-editor-text-area-field.component.html
index bb2b107c7..f3fe6ee4a 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/textarea/dataset-profile-editor-text-area-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/textarea/dataset-profile-editor-text-area-field.component.html
@@ -4,7 +4,10 @@
 		| translate}}</h5>
 
 	<mat-form-field class="col-12">
-		<input matInput type="string" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-TEXT-AREA-PLACEHOLDER' | translate}}"
+		<mat-label>
+			{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-TEXT-AREA-PLACEHOLDER' | translate}}
+		</mat-label>
+		<input matInput type="string"
 		 [formControl]="form.get('data').get('label')">
 	</mat-form-field>
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/validator/dataset-profile-editor-validator-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/validator/dataset-profile-editor-validator-field.component.html
index 78920fe77..8b28d4c4e 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/validator/dataset-profile-editor-validator-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/validator/dataset-profile-editor-validator-field.component.html
@@ -1,9 +1,9 @@
 <div class="row" *ngIf="form.get('data')">
-    <h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-DATE-PICKER-TITLE'
+    <h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-VALIDATOR-TITLE'
 		| translate}}</h5>
     <mat-form-field class="col-12">
-        <input matInput type="string"
-            placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-CHECKBOX-PLACEHOLDER' | translate}}"
-            [formControl]="form.get('data').get('label')">
+      <mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-VALIDATOR-PLACEHOLDER' | translate}}</mat-label>
+      <input matInput type="string"
+          [formControl]="form.get('data').get('label')">
     </mat-form-field>
 </div>
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/word-list/dataset-profile-editor-word-list-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/word-list/dataset-profile-editor-word-list-field.component.html
index 493b890b6..12d82cae4 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/word-list/dataset-profile-editor-word-list-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/word-list/dataset-profile-editor-word-list-field.component.html
@@ -1,28 +1,33 @@
 <div class="row" *ngIf="form.get('data')">
+	<div class="col-12">
 
-	<h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-WORD-LIST-TITLE'
-		| translate}}</h5>
+		<h5 style="font-weight: bold; display: inline-block; margin-right: 2em;">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-WORD-LIST-TITLE'
+			| translate}}</h5>
+			
+		<ng-container *ngIf="form.get('data').errors?.emptyArray && form.get('data').touched">
+			<mat-icon class="text-danger translateY-3">warning_amber</mat-icon>
+			<small class="text-danger">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-SELECT-AT-LEAST-ONE-REQUIRED' |translate}}</small>
+		</ng-container>
+	</div>
 		<mat-checkbox class="col-auto" [formControl]="this.form.get('data').get('multiList')">
 			{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-MULTIPLE-WORDLIST' | translate}}
 			</mat-checkbox>
 
 	<mat-form-field class="col-12">
+		<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-WORD-LIST-PLACEHOLDER' | translate}}</mat-label>
 		<input matInput type="string"
-			placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-WORD-LIST-PLACEHOLDER' | translate}}"
 			[formControl]="form.get('data').get('label')">
 	</mat-form-field>
 
 	<div class="col-12">
 		<div *ngFor="let option of form.get('data').get('options')['controls'] index as i" class="row">
 			<mat-form-field class="col">
-				<input matInput
-					placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-WORD-LIST-LABEL' | translate}}"
-					type="text" [formControl]="form.get('data').get('options').get(''+i).get('label')">
+				<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-WORD-LIST-LABEL' | translate}}</mat-label>
+				<input matInput type="text" [formControl]="form.get('data').get('options').get(''+i).get('label')">
 			</mat-form-field>
 			<mat-form-field class="col">
-				<input matInput
-					placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-WORD-LIST-VALUE' | translate}}"
-					[formControl]="form.get('data').get('options').get(''+i).get('value')">
+				<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-WORD-LIST-VALUE' | translate}}</mat-label>
+				<input matInput [formControl]="form.get('data').get('options').get(''+i).get('value')">
 			</mat-form-field>
 			<button mat-icon-button class="col-auto" (click)="deleteRow(i)" type="button"
 				[disabled]="this.form.disabled">
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.html
index 5dda9d7bc..8d5a351b8 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.html
@@ -1,97 +1,287 @@
-<div class="row">
-	<mat-form-field class="col">
-		<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.ID' | translate}}" type="text" [formControl]="this.form.get('id')"
-		 required>
-		<mat-error *ngIf="this.form.get('id').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-		<mat-error *ngIf="this.form.get('id').hasError('pattern')">{{'GENERAL.VALIDATION.PATTERN-_' | translate}}</mat-error>
-	</mat-form-field>
+<ng-container *ngIf="expandView">
 
-	<mat-form-field class="col">
-		<mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.VIEW-STYLE' | translate}}" [formControl]="this.form.get('viewStyle').get('renderStyle')"
-		 required>
-			<mat-option [value]="viewStyleEnum.BooleanDecision">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.BooleanDecision)}}</mat-option>
-			<mat-option [value]="viewStyleEnum.CheckBox">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.CheckBox)}}</mat-option>
-			<mat-option [value]="viewStyleEnum.TextArea">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.TextArea)}}</mat-option>
-			<mat-option [value]="viewStyleEnum.FreeText">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.FreeText)}}</mat-option>
-			<mat-option [value]="viewStyleEnum.ComboBox">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.ComboBox)}}</mat-option>
-			<mat-option [value]="viewStyleEnum.InternalDmpEntities">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.InternalDmpEntities)}}</mat-option>
-			<mat-option [value]="viewStyleEnum.RadioBox">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.RadioBox)}}</mat-option>
-			<mat-option [value]="viewStyleEnum.DatePicker">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.DatePicker)}}</mat-option>
-			<mat-option [value]="viewStyleEnum.ExternalDatasets">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.ExternalDatasets)}}</mat-option>
-			<mat-option [value]="viewStyleEnum.DataRepositories">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.DataRepositories)}}</mat-option>
-			<mat-option [value]="viewStyleEnum.Registries">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Registries)}}</mat-option>
-			<mat-option [value]="viewStyleEnum.Services">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Services)}}</mat-option>
-			<mat-option [value]="viewStyleEnum.Tags">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Tags)}}</mat-option>
-			<mat-option [value]="viewStyleEnum.Researchers">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Researchers)}}</mat-option>
-			<mat-option [value]="viewStyleEnum.Organizations">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Organizations)}}</mat-option>
-			<mat-option [value]="viewStyleEnum.DatasetIdentifier">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.DatasetIdentifier)}}</mat-option>
-			<mat-option [value]="viewStyleEnum.Currency">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Currency)}}</mat-option>
-			<mat-option [value]="viewStyleEnum.Validation">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Validation)}}</mat-option>
-		</mat-select>
-		<mat-error *ngIf="this.form.get('viewStyle').get('renderStyle').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-	</mat-form-field>
-
-	<!-- Combo Box -->
-	<mat-form-field *ngIf="showOrdinal" class="col">
-		<input matInput type="number" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.ORDER' | translate}}" [formControl]="this.form.get('ordinal')" required>
-	</mat-form-field>
-
-	<!-- Default Value -->
-	<app-component-profile-editor-default-value-component *ngIf="form.get('viewStyle').get('renderStyle').value" class="col"
-	 [viewStyle]="form.get('viewStyle').get('renderStyle').value" [form]="this.form.get('defaultValue').get('value')" [formArrayOptions]="form.get('data')?.get('options')"
-	 [comboBoxType]="this.form.get('data')?.get('type')?.value" [internalDmpEntitiesType]="this.form.get('data')?.get('type')?.value"
-	 placeHolder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.DEFAULT-VALUE' | translate}}" [required]="defaulValueRequired(form.get('viewStyle').get('renderStyle').value)">
-	</app-component-profile-editor-default-value-component>
-
-	<!-- Validation -->
-	<mat-form-field class="col" *ngIf="!(defaulValueRequired(form.get('viewStyle').get('renderStyle').value))">
-		<mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.VALIDATION' | translate}}" [formControl]="this.form.get('validations')"
-		 multiple>
-			<mat-option [value]="validationTypeEnum.Required">{{enumUtils.toDatasetProfileFieldValidationTypeString(validationTypeEnum.Required)}}</mat-option>
-		</mat-select>
-	</mat-form-field>
-
-	<mat-form-field class="col">
-		<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.RDA-COMMON-STANDARDS' | translate}}</mat-label>
-		<mat-select [formControl]="this.form.get('rdaCommonStandard')">
-			<mat-option>--</mat-option>
-			<mat-option *ngFor="let property of datasetProfileService.getRDACommonStandards()" [value]="property">
-				{{property}}
-			</mat-option>
-		</mat-select>
-	</mat-form-field>
-
-</div>
-<div class="row" [ngSwitch]="form.get('viewStyle').get('renderStyle').value">
-	<app-dataset-profile-editor-combo-box-field-component *ngSwitchCase="viewStyleEnum.ComboBox" class="col-12" [form]="form"></app-dataset-profile-editor-combo-box-field-component>
-	<app-dataset-profile-internal-dmp-entities-field-component *ngSwitchCase="viewStyleEnum.InternalDmpEntities" class="col-12" [form]="form"></app-dataset-profile-internal-dmp-entities-field-component>
-	<app-dataset-profile-editor-radio-box-field-component *ngSwitchCase="viewStyleEnum.RadioBox" class="col-12" [form]="form"></app-dataset-profile-editor-radio-box-field-component>
-	<app-dataset-profile-editor-free-text-field-component *ngSwitchCase="viewStyleEnum.FreeText" class="col-12" [form]="form"></app-dataset-profile-editor-free-text-field-component>
-	<app-dataset-profile-editor-text-area-field-component *ngSwitchCase="viewStyleEnum.TextArea" class="col-12" [form]="form"></app-dataset-profile-editor-text-area-field-component>
-	<app-dataset-profile-editor-date-picker-field-component *ngSwitchCase="viewStyleEnum.DatePicker" class="col-12" [form]="form"></app-dataset-profile-editor-date-picker-field-component>
-
-	<app-dataset-profile-editor-boolean-decision-field-component *ngSwitchCase="viewStyleEnum.BooleanDecision" class="col-12"
-	 [form]="form"></app-dataset-profile-editor-boolean-decision-field-component>
-	<app-dataset-profile-editor-checkbox-field-component *ngSwitchCase="viewStyleEnum.CheckBox" class="col-12" [form]="form"></app-dataset-profile-editor-checkbox-field-component>
-
-	<app-dataset-profile-editor-external-datasets-field-component *ngSwitchCase="viewStyleEnum.ExternalDatasets" class="col-12" [form]="form"></app-dataset-profile-editor-external-datasets-field-component>
-	<app-dataset-profile-editor-data-repositories-field-component *ngSwitchCase="viewStyleEnum.DataRepositories" class="col-12" [form]="form"></app-dataset-profile-editor-data-repositories-field-component>
-	<app-dataset-profile-editor-registries-field-component *ngSwitchCase="viewStyleEnum.Registries" class="col-12" [form]="form"></app-dataset-profile-editor-registries-field-component>
-	<app-dataset-profile-editor-services-field-component *ngSwitchCase="viewStyleEnum.Services" class="col-12" [form]="form"></app-dataset-profile-editor-services-field-component>
-	<app-dataset-profile-editor-tags-field-component *ngSwitchCase="viewStyleEnum.Tags" class="col-12" [form]="form"></app-dataset-profile-editor-tags-field-component>
-	<app-dataset-profile-editor-researchers-field-component *ngSwitchCase="viewStyleEnum.Researchers" class="col-12" [form]="form"></app-dataset-profile-editor-researchers-field-component>
-	<app-dataset-profile-editor-organizations-field-component *ngSwitchCase="viewStyleEnum.Organizations" class="col-12" [form]="form"></app-dataset-profile-editor-organizations-field-component>
-	<app-dataset-profile-editor-dataset-identifier-field-component *ngSwitchCase="viewStyleEnum.DatasetIdentifier" class="col-12" [form]="form"></app-dataset-profile-editor-dataset-identifier-field-component>
-	<app-dataset-profile-editor-currency-field-component *ngSwitchCase="viewStyleEnum.Currency" class="col-12" [form]="form"></app-dataset-profile-editor-currency-field-component>
-	<app-dataset-profile-editor-validator-field-component *ngSwitchCase="viewStyleEnum.Validation" class="col-12" [form]="form"></app-dataset-profile-editor-validator-field-component>
-</div>
-<div class="row">
-	<h4 class="col-12" style="font-weight: bold">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.RULES-TITLE' | translate}}
-	</h4>
-	<app-dataset-profile-editor-rule-component class="col-12" [form]="form.get('visible').get('rules')" [viewStyleForCheck]="form.get('viewStyle').get('renderStyle').value"
-	 [formArrayOptionsForCheck]="this.form.get('data')?.get('options')" [comboBoxTypeForCheck]="this.form.get('data')?.get('type')?.value"
-	 [viewOnly]="viewOnly"></app-dataset-profile-editor-rule-component>
-	<div class="col-12" *ngIf="!viewOnly">
-		<button mat-button class="full-width" (click)="addNewRule()" [disabled]="!form.get('viewStyle').get('renderStyle').value">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.ACTIONS.ADD-RULE' | translate}}</button>
+	<!-- ACTIONS PER FIELD -->
+	<div class="row justify-content-end mb-1 mt-1">
+		<div class="col-auto">
+			<ul class="list-unstyled list-inline d-flex align-items-center">
+				<li class="list-inline-item"  >
+					<mat-slide-toggle class="field-toggler" [checked]="isRequired" (change)="toggleRequired($event)" labelPosition="before" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.MAKE-IT-REQUIRED' | translate" [disabled]="!viewType">
+						{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+					</mat-slide-toggle>
+				</li>
+				<li class="list-inline-item" *ngIf="!viewOnly && viewType && canApplyVisibility">
+					<mat-icon style="cursor: pointer;" (click)="addNewRule()" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.ADD-VISIBILITY-RULE' | translate">visibility</mat-icon>
+				</li>
+				<li class="list-inline-item" *ngIf="!viewOnly && viewType && canBeDeleted">
+					<mat-icon style="cursor: pointer;" (click)="onDelete()" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.DELETE-INPUT' | translate">delete</mat-icon>
+				</li>
+				
+			</ul>
+		</div>
 	</div>
-</div>
+
+
+	<div class="row">
+		<!-- <mat-form-field class="col">
+			<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.ID' | translate}}" type="text" [formControl]="this.form.get('id')"
+			required>
+			<mat-error *ngIf="this.form.get('id').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+			<mat-error *ngIf="this.form.get('id').hasError('pattern')">{{'GENERAL.VALIDATION.PATTERN-_' | translate}}</mat-error>
+		</mat-form-field> -->
+
+		<mat-form-field class="col">
+			<!-- <mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.VIEW-STYLE' | translate}}" [formControl]="this.form.get('viewStyle').get('renderStyle')"
+			required>
+				<mat-option [value]="viewStyleEnum.TextArea">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.TextArea)}}</mat-option>
+				<mat-option [value]="viewStyleEnum.FreeText">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.FreeText)}}</mat-option>
+				<mat-divider></mat-divider>
+				<mat-option [value]="viewStyleEnum.BooleanDecision">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.BooleanDecision)}}</mat-option>
+				<mat-option [value]="viewStyleEnum.RadioBox">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.RadioBox)}}</mat-option>
+				<mat-option [value]="viewStyleEnum.CheckBox">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.CheckBox)}}</mat-option>
+				
+				<mat-option [value]="viewStyleEnum.ComboBox">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.ComboBox)}}</mat-option>
+				<mat-divider></mat-divider>
+				
+				<mat-option [value]="viewStyleEnum.DatePicker">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.DatePicker)}}</mat-option>
+				<mat-option [value]="viewStyleEnum.Currency">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Currency)}}</mat-option>
+
+				<mat-divider></mat-divider>
+				
+
+				<mat-optgroup label="APIs">
+					<mat-option [value]="viewStyleEnum.Registries">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Registries)}}</mat-option>
+					<mat-option [value]="viewStyleEnum.Services">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Services)}}</mat-option>
+					<mat-option [value]="viewStyleEnum.Researchers">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Researchers)}}</mat-option>
+					<mat-option [value]="viewStyleEnum.Organizations">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Organizations)}}</mat-option>
+					<mat-option [value]="viewStyleEnum.ExternalDatasets">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.ExternalDatasets)}}</mat-option>
+					<mat-option [value]="viewStyleEnum.DataRepositories">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.DataRepositories)}}</mat-option>
+				</mat-optgroup>
+				
+				<mat-divider></mat-divider>
+				<mat-optgroup label="Argos Entities">
+					<mat-option [value]="viewStyleEnum.InternalDmpEntities">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.InternalDmpEntities)}}</mat-option>
+					<mat-option [value]="viewStyleEnum.Tags">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Tags)}}</mat-option>
+					<mat-option [value]="viewStyleEnum.DatasetIdentifier">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.DatasetIdentifier)}}</mat-option>
+					<mat-option [value]="viewStyleEnum.Validation">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Validation)}}</mat-option>
+				</mat-optgroup>
+
+			</mat-select> -->
+
+			<!-- NEW VERSION -->
+			<mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.VIEW-STYLE' | translate}}" [(ngModel)]="viewType" (selectionChange)="onInputTypeChange()"
+			[disabled]="viewOnly"
+			[errorStateMatcher]="this"
+			>
+				<mat-option [value]="viewTypeEnum.TextArea">
+					<img src="/assets/images/editor/icons/text_area.svg" class="input_icon" alt="TextArea icon">
+					{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.TextArea)}}
+				</mat-option>
+				<mat-option [value]="viewTypeEnum.FreeText">
+					<img src="/assets/images/editor/icons/free_text.svg" class="input_icon" alt="FreeText icon">
+					{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.FreeText)}}
+				</mat-option>
+				<mat-divider></mat-divider>
+				<mat-option [value]="viewTypeEnum.BooleanDecision">
+					<img src="/assets/images/editor/icons/boolean.svg" class="input_icon" alt="Boolean icon">
+					{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.BooleanDecision)}}
+				</mat-option>
+				<mat-option [value]="viewTypeEnum.RadioBox">
+					<img src="/assets/images/editor/icons/radio_box.svg" class="input_icon" alt="RadioBox icon">
+					{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.RadioBox)}}
+				</mat-option>
+				<mat-option [value]="viewTypeEnum.Select">
+					<span class="input_icon">
+						<img src="/assets/images/editor/icons/select.svg" style="padding-right: 7px;" alt="Select icon">
+					</span>
+					{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Select)}}
+				</mat-option>
+				<mat-option [value]="viewTypeEnum.CheckBox">
+					<img src="/assets/images/editor/icons/checkbox.svg" class="input_icon" alt="CheckBox icon">
+					{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.CheckBox)}}
+				</mat-option>
+				<!-- TODO -->
+				<mat-divider></mat-divider>
+				
+				<mat-option [value]="viewTypeEnum.DatePicker">
+					<img src="/assets/images/editor/icons/date_picker.svg" class="input_icon" alt="DatePicker icon">
+					{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DatePicker)}}
+				</mat-option>
+				<mat-option [value]="viewTypeEnum.Currency">
+					<img src="/assets/images/editor/icons/currency.svg" class="input_icon" alt="Current icon">
+					{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Currency)}}
+				</mat-option>
+
+				<mat-divider></mat-divider>
+				<!-- APIS -->
+
+				<mat-optgroup label="APIs">
+					<mat-option [value]="viewTypeEnum.Registries">
+						<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Registries icon">
+						{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Registries)}}
+					</mat-option>
+					<mat-option [value]="viewTypeEnum.Services">
+						<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Services icon">
+						{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Services)}}
+					</mat-option>
+					<mat-option [value]="viewTypeEnum.Researchers">
+						<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Researchers icon">
+						{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Researchers)}}
+					</mat-option>
+					<mat-option [value]="viewTypeEnum.Organizations">
+						<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Organizations icon">
+						{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Organizations)}}
+					</mat-option>
+					<mat-option [value]="viewTypeEnum.ExternalDatasets">
+						<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="ExternalDatasets icon">
+						{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.ExternalDatasets)}}
+					</mat-option>
+					<mat-option [value]="viewTypeEnum.DataRepositories">
+						<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="DataRepositories icon">
+						{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DataRepositories)}}
+					</mat-option>
+					<mat-option [value]="viewTypeEnum.Other">
+						<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Other icon">
+						{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Other)}}
+					</mat-option>
+				</mat-optgroup>
+				<!-- TODO -->
+				<mat-divider></mat-divider>
+				<mat-optgroup label="Argos Entities">
+					<mat-option [value]="viewTypeEnum.InternalDmpEntities">
+						<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="InternalDmpEntities icon">
+						{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.InternalDmpEntities)}}
+					</mat-option>
+					<mat-option [value]="viewTypeEnum.Tags">
+						<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Tags icon">
+						{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Tags)}}
+					</mat-option>
+					<mat-option [value]="viewTypeEnum.DatasetIdentifier">
+						<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="DatasetIdentifier icon">
+						{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DatasetIdentifier)}}
+					</mat-option>
+					<mat-option [value]="viewTypeEnum.Validation">
+						<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Validation icon">
+						{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Validation)}}
+					</mat-option>
+				</mat-optgroup>
+
+			</mat-select>
+			<!-- <mat-error *ngIf="this.form.get('viewStyle').get('renderStyle').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> -->
+			<mat-error >{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+			<!-- <mat-error *ngIf="this.form.hasError('inputTypeNotValid')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> -->
+			
+		</mat-form-field>
+
+		<!-- Combo Box -->
+		<mat-form-field *ngIf="showOrdinal" class="col">
+			<input matInput type="number" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.ORDER' | translate}}" [formControl]="this.form.get('ordinal')" required>
+		</mat-form-field>
+
+		<!-- Validation -->
+		<!-- <mat-form-field class="col" *ngIf="!(defaulValueRequired(form.get('viewStyle').get('renderStyle').value))">
+			<mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.VALIDATION' | translate}}" [formControl]="this.form.get('validations')"
+			multiple>
+				<mat-option [value]="validationTypeEnum.Required">{{enumUtils.toDatasetProfileFieldValidationTypeString(validationTypeEnum.Required)}}</mat-option>
+			</mat-select>
+		</mat-form-field> -->
+
+		<mat-form-field class="col">
+			<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.RDA-COMMON-STANDARDS' | translate}}</mat-label>
+			<mat-select [formControl]="this.form.get('rdaCommonStandard')">
+				<mat-option>--</mat-option>
+				<mat-option *ngFor="let property of datasetProfileService.getRDACommonStandards()" [value]="property">
+					{{property}}
+				</mat-option>
+			</mat-select>
+		</mat-form-field>
+
+		<!-- Default Value -->
+		<app-component-profile-editor-default-value-component *ngIf="form.get('viewStyle').get('renderStyle').value" class="col-12"
+		[viewStyle]="form.get('viewStyle').get('renderStyle').value" [form]="this.form.get('defaultValue').get('value')" [formArrayOptions]="form.get('data')?.get('options')"
+		[comboBoxType]="this.form.get('data')?.get('type')?.value" [internalDmpEntitiesType]="this.form.get('data')?.get('type')?.value"
+		placeHolder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.DEFAULT-VALUE' | translate}}">
+		</app-component-profile-editor-default-value-component>
+
+	</div>
+	<div class="row" [ngSwitch]="form.get('viewStyle').get('renderStyle').value" *ngIf="expandView">
+		<app-dataset-profile-editor-combo-box-field-component *ngSwitchCase="viewStyleEnum.ComboBox" class="col-12" [form]="form"></app-dataset-profile-editor-combo-box-field-component>
+		<app-dataset-profile-internal-dmp-entities-field-component *ngSwitchCase="viewStyleEnum.InternalDmpEntities" class="col-12" [form]="form"></app-dataset-profile-internal-dmp-entities-field-component>
+		<app-dataset-profile-editor-radio-box-field-component *ngSwitchCase="viewStyleEnum.RadioBox" class="col-12" [form]="form"></app-dataset-profile-editor-radio-box-field-component>
+		<app-dataset-profile-editor-free-text-field-component *ngSwitchCase="viewStyleEnum.FreeText" class="col-12" [form]="form"></app-dataset-profile-editor-free-text-field-component>
+		<app-dataset-profile-editor-text-area-field-component *ngSwitchCase="viewStyleEnum.TextArea" class="col-12" [form]="form"></app-dataset-profile-editor-text-area-field-component>
+		<app-dataset-profile-editor-date-picker-field-component *ngSwitchCase="viewStyleEnum.DatePicker" class="col-12" [form]="form"></app-dataset-profile-editor-date-picker-field-component>
+
+		<app-dataset-profile-editor-boolean-decision-field-component *ngSwitchCase="viewStyleEnum.BooleanDecision" class="col-12"
+		[form]="form"></app-dataset-profile-editor-boolean-decision-field-component>
+		<app-dataset-profile-editor-checkbox-field-component *ngSwitchCase="viewStyleEnum.CheckBox" class="col-12" [form]="form"></app-dataset-profile-editor-checkbox-field-component>
+
+		<app-dataset-profile-editor-external-datasets-field-component *ngSwitchCase="viewStyleEnum.ExternalDatasets" class="col-12" [form]="form"></app-dataset-profile-editor-external-datasets-field-component>
+		<app-dataset-profile-editor-data-repositories-field-component *ngSwitchCase="viewStyleEnum.DataRepositories" class="col-12" [form]="form"></app-dataset-profile-editor-data-repositories-field-component>
+		<app-dataset-profile-editor-registries-field-component *ngSwitchCase="viewStyleEnum.Registries" class="col-12" [form]="form"></app-dataset-profile-editor-registries-field-component>
+		<app-dataset-profile-editor-services-field-component *ngSwitchCase="viewStyleEnum.Services" class="col-12" [form]="form"></app-dataset-profile-editor-services-field-component>
+		<app-dataset-profile-editor-tags-field-component *ngSwitchCase="viewStyleEnum.Tags" class="col-12" [form]="form"></app-dataset-profile-editor-tags-field-component>
+		<app-dataset-profile-editor-researchers-field-component *ngSwitchCase="viewStyleEnum.Researchers" class="col-12" [form]="form"></app-dataset-profile-editor-researchers-field-component>
+		<app-dataset-profile-editor-organizations-field-component *ngSwitchCase="viewStyleEnum.Organizations" class="col-12" [form]="form"></app-dataset-profile-editor-organizations-field-component>
+		<app-dataset-profile-editor-dataset-identifier-field-component *ngSwitchCase="viewStyleEnum.DatasetIdentifier" class="col-12" [form]="form"></app-dataset-profile-editor-dataset-identifier-field-component>
+		<app-dataset-profile-editor-currency-field-component *ngSwitchCase="viewStyleEnum.Currency" class="col-12" [form]="form"></app-dataset-profile-editor-currency-field-component>
+		<app-dataset-profile-editor-validator-field-component *ngSwitchCase="viewStyleEnum.Validation" class="col-12" [form]="form"></app-dataset-profile-editor-validator-field-component>
+	</div>
+	<div class="row" *ngIf="this.form.get('viewStyle').get('renderStyle').value">
+
+
+
+		<ng-container *ngIf="form.get('visible').get('rules')?.value.length">
+			<h4 class="col-12" style="font-weight: bold">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.RULES-TITLE' | translate}}
+			</h4>
+			<app-dataset-profile-editor-rule-component class="col-12" [form]="form.get('visible').get('rules')" [viewStyleForCheck]="form.get('viewStyle').get('renderStyle').value"
+			[formArrayOptionsForCheck]="this.form.get('data')?.get('options')" [comboBoxTypeForCheck]="this.form.get('data')?.get('type')?.value"
+			[viewOnly]="viewOnly"
+			[formControlForCheck]="form"></app-dataset-profile-editor-rule-component>
+			<!-- <div class="col-12" *ngIf="!viewOnly">
+				<button mat-button class="full-width" (click)="addNewRule()" [disabled]="!form.get('viewStyle').get('renderStyle').value">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.ACTIONS.ADD-RULE' | translate}}</button>
+			</div> -->
+		</ng-container>
+
+		
+		<!-- <div class="row">
+			<button (click)="generatePreview()">Generate Preview</button>
+		</div> -->
+	</div>
+</ng-container>
+
+
+<!-- PREVIEW -->
+<!-- <ng-container *ngIf="false">
+	<div class="row">
+		<div class="col-12" *ngIf="expandView && previewForm">
+			<span style="font-weight: bold">{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.PREVIEW' | translate}}</span>
+		</div> -->
+		<!-- <div class="col-12"> 
+			<mat-radio-group [(ngModel)]="showPreview">
+				<mat-radio-button [value]="true">Yes</mat-radio-button>
+				<mat-radio-button [value]="false">No</mat-radio-button>
+			</mat-radio-group>
+		</div> -->
+
+<!-- 
+		<div class="col-12" *ngIf="showPreview">
+			<ng-container *ngIf="viewType === viewTypeEnum.Other else regularField">
+				<app-form-field [form]="previewForm" *ngIf="previewForm" [autocompleteOptions]="form.get('data').get('autoCompleteSingleDataList').getRawValue()">
+			
+				</app-form-field>
+			</ng-container>
+
+			<ng-template #regularField>
+				<app-form-field [form]="previewForm" *ngIf="previewForm">
+			
+				</app-form-field>
+			</ng-template>
+		</div>
+		<div class="col-12" *ngIf="!this.form.get('viewStyle').get('renderStyle').value">	
+			<em>
+				{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.NOT-INITIALIZED' | translate}}
+			</em>
+		</div>
+	</div>
+</ng-container> -->
+<!-- {{form.touched|json}} -->
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.scss
index 3db0dee74..1c94581a8 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.scss
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.scss
@@ -1,3 +1,38 @@
 .full-width {
   width: 100%;
 }
+
+
+.preview-box{
+  padding: 1em;
+  border: 1px solid #e8dcdc;
+  border-radius: 0.3em;
+}
+
+mat-radio-button{
+  padding-right: 1em;
+}
+
+li.list-inline-item{
+  color: #129D99;
+  .mat-icon{
+    vertical-align: bottom;
+  }
+}
+
+:host   ::ng-deep .field-toggler 
+{
+  .mat-slide-toggle-content{
+    font-size: 0.8em;
+    color: #212121;
+  }
+  .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
+    background-color:#129D99 ;
+  }
+}
+  
+
+.input_icon{
+  width: 14px;
+  margin-right: 0.5em;
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.ts
index d96993846..751c0af04 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.ts
@@ -1,6 +1,6 @@
 
-import { Component, Input, OnInit } from '@angular/core';
-import { FormArray, FormControl, FormGroup } from '@angular/forms';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { AbstractControl, AbstractControlOptions, FormArray, FormControl, FormGroup, FormGroupDirective, NgForm, ValidationErrors, ValidatorFn } from '@angular/forms';
 import { DatasetProfileFieldViewStyle } from '@app/core/common/enum/dataset-profile-field-view-style';
 import { ValidationType } from '@app/core/common/enum/validation-type';
 import { DatasetProfileService } from '@app/core/services/dataset-profile/dataset-profile.service';
@@ -15,7 +15,7 @@ import { TextAreaFieldDataEditorModel } from '@app/ui/admin/dataset-profile/admi
 import { WordListFieldDataEditorModel } from '@app/ui/admin/dataset-profile/admin/field-data/word-list-field-data-editor-model';
 import { RuleEditorModel } from '@app/ui/admin/dataset-profile/admin/rule-editor-model';
 import { BaseComponent } from '@common/base/base.component';
-import { takeUntil } from 'rxjs/operators';
+import { debounce, debounceTime, takeUntil } from 'rxjs/operators';
 import { ExternalDatasetEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model';
 import { DataRepositoriesDataEditorModel } from '../../../admin/field-data/data-repositories-data-editor-models';
 import { RegistriesDataEditorModel } from '../../../admin/field-data/registries-data-editor-models';
@@ -27,139 +27,810 @@ import { DatasetIdentifierDataEditorModel } from '../../../admin/field-data/data
 import { ExternalDatasetsDataEditorModel } from '../../../admin/field-data/external-datasets-data-editor-models';
 import { CurrencyDataEditorModel } from '../../../admin/field-data/currency-data-editor-models';
 import { ValidationDataEditorModel } from '../../../admin/field-data/validation-data-editor-models';
+import { DatasetDescriptionFieldEditorModel } from '@app/ui/misc/dataset-description-form/dataset-description-form.model';
+import { Subject, Subscription } from 'rxjs';
+import { ViewStyleType } from './view-style-enum';
+import { AutoCompleteFieldDataEditorModel } from '../../../admin/field-data/auto-complete-field-data-editor-model';
+import { DatasetsAutoCompleteFieldDataEditorModel } from '../../../admin/field-data/datasets-autocomplete-field-data-editor-mode';
+import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profile-combo-box-type';
+import { Guid } from '@common/types/guid';
+import { ErrorStateMatcher, MatSlideToggleChange } from '@angular/material';
+import { DefaultValueEditorModel } from '../../../admin/default-value-editor-model';
+import { EditorCustomValidators } from '../../custom-validators/editor-custom-validators';
+import { Field } from '@app/core/model/admin/dataset-profile/dataset-profile';
+import { DatasetProfileInternalDmpEntitiesType } from '@app/core/common/enum/dataset-profile-internal-dmp-entities-type';
+import { FieldEditorModel } from '../../../admin/field-editor-model';
+import { AutoCompleteFieldData, BooleanDecisionFieldData, CheckBoxFieldData, CurrencyFieldData, DataRepositoriesFieldData, DatasetIdentifierFieldData, DatePickerFieldData, DmpsAutoCompleteFieldData, ExternalDatasetsFieldData, FieldDataOption, FreeTextFieldData, OrganizationsFieldData, RadioBoxFieldData, RegistriesFieldData, ResearchersAutoCompleteFieldData, ServicesFieldData, TagsFieldData, TextAreaFieldData, ValidationFieldData, WordListFieldData } from '@app/core/model/dataset-profile-definition/field-data/field-data';
 
 @Component({
 	selector: 'app-dataset-profile-editor-field-component',
 	templateUrl: './dataset-profile-editor-field.component.html',
 	styleUrls: ['./dataset-profile-editor-field.component.scss']
 })
-export class DatasetProfileEditorFieldComponent extends BaseComponent implements OnInit {
+export class DatasetProfileEditorFieldComponent extends BaseComponent implements OnInit, ErrorStateMatcher {
 	@Input() viewOnly: boolean;
 	@Input() form: FormGroup;
 	@Input() showOrdinal = true;
 	@Input() indexPath: string;
 	validationTypeEnum = ValidationType;
 	viewStyleEnum = DatasetProfileFieldViewStyle;
-	isFieldMultiplicityEnabled = false;
+	// isFieldMultiplicityEnabled = false;
 
+	viewType: ViewStyleType;
+	viewTypeEnum =  ViewStyleType;
+	// private subject$:Subject<DatasetDescriptionFieldEditorModel> = new Subject<DatasetDescriptionFieldEditorModel>();
+	
+
+
+	@Input() expandView: boolean = true;
+	@Input() canBeDeleted:boolean = true;
+
+	@Output() delete = new EventEmitter<void>();
 
 	constructor(
 		public enumUtils: EnumUtils,
 		public datasetProfileService: DatasetProfileService
-	) { super(); }
+	) { super(); 
+	
+	}
+
+
+	isErrorState(control: FormControl, form: FormGroupDirective | NgForm): boolean {
+
+		if(this.form.get('viewStyle').untouched) return false;
+		
+		return this.form.get('viewStyle').invalid;
+	}
 
 	ngOnInit() {
-		if (this.form.get('multiplicity')) {
-			if (this.form.get('multiplicity').value.min > 1 && this.form.get('multiplicity').value.max > 1) {
-				this.isFieldMultiplicityEnabled = true;
+
+		// this.subject$.pipe(takeUntil(this._destroyed)).pipe(debounceTime(600)).subscribe(model=>{
+		// 	this.previewForm = model.buildForm();
+		// });
+
+
+
+		
+		// if (this.form.get('multiplicity')) {
+		// 	if (this.form.get('multiplicity').value.min > 1 && this.form.get('multiplicity').value.max > 1) {
+		// 		this.isFieldMultiplicityEnabled = true;
+		// 	}
+		// }
+
+		if(this.form.get('viewStyle').get('renderStyle').value){
+
+			// this.matcher.setReference(this.form);
+			const type = this.form.get('viewStyle').get('renderStyle').value;
+			
+			switch(type){
+				case DatasetProfileFieldViewStyle.BooleanDecision:
+					this.viewType = this.viewTypeEnum.BooleanDecision;
+					break;
+				case DatasetProfileFieldViewStyle.CheckBox:
+					this.viewType = this.viewTypeEnum.CheckBox;
+					break;
+				case DatasetProfileFieldViewStyle.ComboBox:
+
+					const comboType = this.form.get('data').get('type').value;
+					if(comboType === DatasetProfileComboBoxType.Autocomplete){
+						this.viewType = this.viewTypeEnum.Other;
+					}else if(comboType === DatasetProfileComboBoxType.WordList){
+						this.viewType = this.viewTypeEnum.Select;
+					}
+					break;
+				case DatasetProfileFieldViewStyle.InternalDmpEntities:
+					this.viewType = this.viewTypeEnum.InternalDmpEntities;
+					break;
+				case DatasetProfileFieldViewStyle.FreeText:
+					this.viewType = this.viewTypeEnum.FreeText;
+					break;
+				case DatasetProfileFieldViewStyle.RadioBox:
+					this.viewType = this.viewTypeEnum.RadioBox;
+					break;
+				case DatasetProfileFieldViewStyle.TextArea:
+					this.viewType = this.viewTypeEnum.TextArea;
+					break;
+				case DatasetProfileFieldViewStyle.DatePicker:
+					this.viewType = this.viewTypeEnum.DatePicker;
+					break;
+				case DatasetProfileFieldViewStyle.ExternalDatasets:
+					this.viewType = this.viewTypeEnum.ExternalDatasets;
+					break;
+				case DatasetProfileFieldViewStyle.DataRepositories:
+					this.viewType = this.viewTypeEnum.DataRepositories;
+					break;
+				case DatasetProfileFieldViewStyle.Registries:
+					this.viewType = this.viewTypeEnum.Registries;
+					break;
+				case DatasetProfileFieldViewStyle.Services:
+					this.viewType = this.viewTypeEnum.Services;
+					break;
+				case DatasetProfileFieldViewStyle.Tags:
+					this.viewType = this.viewTypeEnum.Tags;
+					break;
+				case DatasetProfileFieldViewStyle.Researchers:
+					this.viewType = this.viewTypeEnum.Researchers; //TODO RESEARCHERS
+					break;
+				case DatasetProfileFieldViewStyle.Organizations:
+					this.viewType = this.viewTypeEnum.Organizations;
+					break;
+				case DatasetProfileFieldViewStyle.DatasetIdentifier:
+					this.viewType = this.viewTypeEnum.DatasetIdentifier;
+					break;
+				case DatasetProfileFieldViewStyle.Currency:
+					this.viewType = this.viewTypeEnum.Currency;
+					break;
+				case DatasetProfileFieldViewStyle.Validation:
+					this.viewType = this.viewTypeEnum.Validation;
+					break;
 			}
+
 		}
+
+		// this.showPreview = true;
+
+
+
+
 		// this.addNewRule();
 
-		this.form.get('viewStyle').get('renderStyle').valueChanges
-			.pipe(takeUntil(this._destroyed))
-			.subscribe(x => {
-				if (this.form.get('data')) {
-					this.form.removeControl('data');
+		// this.form.get('viewStyle').get('renderStyle').valueChanges
+		// 	.pipe(takeUntil(this._destroyed))
+		// 	.subscribe(x => {
 
-					switch (x) {
-						case DatasetProfileFieldViewStyle.BooleanDecision:
-							this.form.addControl('data', new BooleanDecisionFieldDataEditorModel().buildForm());
-							break;
-						case DatasetProfileFieldViewStyle.CheckBox:
-							this.form.addControl('data', new CheckBoxFieldDataEditorModel().buildForm());
-							break;
-						case DatasetProfileFieldViewStyle.ComboBox:
-							this.form.addControl('data', new WordListFieldDataEditorModel().buildForm());
-							break;
-						case DatasetProfileFieldViewStyle.InternalDmpEntities:
-							this.form.addControl('data', new ResearchersAutoCompleteFieldDataEditorModel().buildForm());
-							break;
-						case DatasetProfileFieldViewStyle.FreeText:
-							this.form.addControl('data', new FreeTextFieldDataEditorModel().buildForm());
-							break;
-						case DatasetProfileFieldViewStyle.RadioBox:
-							this.form.addControl('data', new RadioBoxFieldDataEditorModel().buildForm());
-							break;
-						case DatasetProfileFieldViewStyle.TextArea:
-							this.form.addControl('data', new TextAreaFieldDataEditorModel().buildForm());
-							break;
-						case DatasetProfileFieldViewStyle.DatePicker:
-							this.form.addControl('data', new DatePickerDataEditorModel().buildForm());
-							break;
-						case DatasetProfileFieldViewStyle.ExternalDatasets:
-							this.form.addControl('data', new ExternalDatasetsDataEditorModel().buildForm());
-							break;
-						case DatasetProfileFieldViewStyle.DataRepositories:
-							this.form.addControl('data', new DataRepositoriesDataEditorModel().buildForm());
-							break;
-						case DatasetProfileFieldViewStyle.Registries:
-							this.form.addControl('data', new RegistriesDataEditorModel().buildForm());
-							break;
-						case DatasetProfileFieldViewStyle.Services:
-							this.form.addControl('data', new ServicesDataEditorModel().buildForm());
-							break;
-						case DatasetProfileFieldViewStyle.Tags:
-							this.form.addControl('data', new TagsDataEditorModel().buildForm());
-							break;
-						case DatasetProfileFieldViewStyle.Researchers:
-							this.form.addControl('data', new ResearchersDataEditorModel().buildForm());
-							break;
-						case DatasetProfileFieldViewStyle.Organizations:
-							this.form.addControl('data', new OrganizationsDataEditorModel().buildForm());
-							break;
-						case DatasetProfileFieldViewStyle.DatasetIdentifier:
-							this.form.addControl('data', new DatasetIdentifierDataEditorModel().buildForm());
-							break;
-						case DatasetProfileFieldViewStyle.Currency:
-							this.form.addControl('data', new CurrencyDataEditorModel().buildForm());
-							break;
-						case DatasetProfileFieldViewStyle.Validation:
-							this.form.addControl('data', new ValidationDataEditorModel().buildForm());
-							break;
-					}
-				}
-			});
+
+		// 		// const previewStatus = this.showPreview;
+		// 		//!! Important to be before the if statement
+		// 		this.showPreview = false;
+
+		// 		if (this.form.get('data')) {
+		// 			this.form.removeControl('data');
+
+		// 			switch (x) {
+		// 				case DatasetProfileFieldViewStyle.BooleanDecision:
+		// 					this.form.addControl('data', new BooleanDecisionFieldDataEditorModel().buildForm());
+		// 					break;
+		// 				case DatasetProfileFieldViewStyle.CheckBox:
+		// 					this.form.addControl('data', new CheckBoxFieldDataEditorModel().buildForm());
+		// 					break;
+		// 				case DatasetProfileFieldViewStyle.ComboBox:
+		// 					this.form.addControl('data', new WordListFieldDataEditorModel().buildForm());
+		// 					break;
+		// 				case DatasetProfileFieldViewStyle.InternalDmpEntities:
+		// 					this.form.addControl('data', new ResearchersAutoCompleteFieldDataEditorModel().buildForm());
+		// 					break;
+		// 				case DatasetProfileFieldViewStyle.FreeText:
+		// 					this.form.addControl('data', new FreeTextFieldDataEditorModel().buildForm());
+		// 					break;
+		// 				case DatasetProfileFieldViewStyle.RadioBox:
+		// 					this.form.addControl('data', new RadioBoxFieldDataEditorModel().buildForm());
+		// 					break;
+		// 				case DatasetProfileFieldViewStyle.TextArea:
+		// 					this.form.addControl('data', new TextAreaFieldDataEditorModel().buildForm());
+		// 					break;
+		// 				case DatasetProfileFieldViewStyle.DatePicker:
+		// 					this.form.addControl('data', new DatePickerDataEditorModel().buildForm());
+		// 					break;
+		// 				case DatasetProfileFieldViewStyle.ExternalDatasets:
+		// 					this.form.addControl('data', new ExternalDatasetsDataEditorModel().buildForm());
+		// 					break;
+		// 				case DatasetProfileFieldViewStyle.DataRepositories:
+		// 					this.form.addControl('data', new DataRepositoriesDataEditorModel().buildForm());
+		// 					break;
+		// 				case DatasetProfileFieldViewStyle.Registries:
+		// 					this.form.addControl('data', new RegistriesDataEditorModel().buildForm());
+		// 					break;
+		// 				case DatasetProfileFieldViewStyle.Services:
+		// 					this.form.addControl('data', new ServicesDataEditorModel().buildForm());
+		// 					break;
+		// 				case DatasetProfileFieldViewStyle.Tags:
+		// 					this.form.addControl('data', new TagsDataEditorModel().buildForm());
+		// 					break;
+		// 				case DatasetProfileFieldViewStyle.Researchers:
+		// 					this.form.addControl('data', new ResearchersDataEditorModel().buildForm());
+		// 					break;
+		// 				case DatasetProfileFieldViewStyle.Organizations:
+		// 					this.form.addControl('data', new OrganizationsDataEditorModel().buildForm());
+		// 					break;
+		// 				case DatasetProfileFieldViewStyle.DatasetIdentifier:
+		// 					this.form.addControl('data', new DatasetIdentifierDataEditorModel().buildForm());
+		// 					break;
+		// 				case DatasetProfileFieldViewStyle.Currency:
+		// 					this.form.addControl('data', new CurrencyDataEditorModel().buildForm());
+		// 					break;
+		// 				case DatasetProfileFieldViewStyle.Validation:
+		// 					this.form.addControl('data', new ValidationDataEditorModel().buildForm());
+		// 					break;
+		// 			}
+		// 		}
+
+
+		// 		//reset the preview status
+		// 		// this.showPreview = previewStatus;
+		// 		this.showPreview = true;
+		// 	});
 	}
 
-	defaulValueRequired(viewStile: DatasetProfileFieldViewStyle): boolean {
-		switch (viewStile) {
-			case DatasetProfileFieldViewStyle.CheckBox:
-				return true;
-			case DatasetProfileFieldViewStyle.RadioBox:
-			case DatasetProfileFieldViewStyle.TextArea:
-			case DatasetProfileFieldViewStyle.FreeText:
-			case DatasetProfileFieldViewStyle.ComboBox:
-			case DatasetProfileFieldViewStyle.InternalDmpEntities:
-			case DatasetProfileFieldViewStyle.BooleanDecision:
-			case DatasetProfileFieldViewStyle.DatePicker:
-			case DatasetProfileFieldViewStyle.ExternalDatasets:
-			case DatasetProfileFieldViewStyle.DataRepositories:
-			case DatasetProfileFieldViewStyle.Registries:
-			case DatasetProfileFieldViewStyle.Services:
-			case DatasetProfileFieldViewStyle.Tags:
-			case DatasetProfileFieldViewStyle.Registries:
-			case DatasetProfileFieldViewStyle.Organizations:
-			case DatasetProfileFieldViewStyle.DatasetIdentifier:
-			case DatasetProfileFieldViewStyle.Currency:
-			case DatasetProfileFieldViewStyle.Validation:
-				return false;
-			default:
-				return false;
-		}
-	}
+	// defaulValueRequired(viewStile: DatasetProfileFieldViewStyle): boolean {
+	// 	switch (viewStile) {
+	// 		case DatasetProfileFieldViewStyle.CheckBox:
+	// 			return true;
+	// 		case DatasetProfileFieldViewStyle.RadioBox:
+	// 		case DatasetProfileFieldViewStyle.TextArea:
+	// 		case DatasetProfileFieldViewStyle.FreeText:
+	// 		case DatasetProfileFieldViewStyle.ComboBox:
+	// 		case DatasetProfileFieldViewStyle.InternalDmpEntities:
+	// 		case DatasetProfileFieldViewStyle.BooleanDecision:
+	// 		case DatasetProfileFieldViewStyle.DatePicker:
+	// 		case DatasetProfileFieldViewStyle.ExternalDatasets:
+	// 		case DatasetProfileFieldViewStyle.DataRepositories:
+	// 		case DatasetProfileFieldViewStyle.Registries:
+	// 		case DatasetProfileFieldViewStyle.Services:
+	// 		case DatasetProfileFieldViewStyle.Tags:
+	// 		case DatasetProfileFieldViewStyle.Registries:
+	// 		case DatasetProfileFieldViewStyle.Organizations:
+	// 		case DatasetProfileFieldViewStyle.DatasetIdentifier:
+	// 		case DatasetProfileFieldViewStyle.Currency:
+	// 		case DatasetProfileFieldViewStyle.Validation:
+	// 			return false;
+	// 		default:
+	// 			return false;
+	// 	}
+	// }
 
 
 
-	onIsFieldMultiplicityEnabledChange(isFieldMultiplicityEnabled: boolean) {
-		if (!isFieldMultiplicityEnabled) {
-			(<FormControl>this.form.get('multiplicity').get('min')).setValue(0);
-			(<FormControl>this.form.get('multiplicity').get('max')).setValue(0);
-		}
-	}
+	// onIsFieldMultiplicityEnabledChange(isFieldMultiplicityEnabled: boolean) {
+	// 	if (!isFieldMultiplicityEnabled) {
+	// 		(<FormControl>this.form.get('multiplicity').get('min')).setValue(0);
+	// 		(<FormControl>this.form.get('multiplicity').get('max')).setValue(0);
+	// 	}
+	// }
 
 	addNewRule() {
 		const rule: RuleEditorModel = new RuleEditorModel();
 		(<FormArray>this.form.get('visible').get('rules')).push(rule.buildForm());
 	}
-}
+
+
+	private _formChangesSubscription:Subscription;
+	private _showPreview: boolean = false;;
+
+	//  get showPreview(): boolean{
+
+	// 	return this._showPreview;
+	//  }
+
+	//  set showPreview(value:boolean){
+	// 	if(value == false){//hide preview
+	// 		//close subsciption
+	// 		if(this._formChangesSubscription){
+	// 			this._formChangesSubscription.unsubscribe();
+	// 			this._formChangesSubscription = null;
+	// 		}
+	// 	}
+
+	// 	if(value == true){
+	// 		//value is already true
+	// 		if(this._showPreview){
+	// 			if(this._formChangesSubscription){
+	// 				this._formChangesSubscription.unsubscribe();
+	// 				this._formChangesSubscription = null;
+	// 			}
+	// 		}
+
+	// 		//initialize
+	// 		if(this.form.get('viewStyle').get('renderStyle').value){
+	// 			this._generatePreviewForm();
+	// 		}
+	// 		this._formChangesSubscription = this.form.valueChanges.subscribe(()=>{
+	// 			this._generatePreviewForm();
+	// 		});
+	// 	}
+	// 	this._showPreview = value;
+		
+	//  }
+
+	// previewForm: FormGroup;
+
+	// private _generatePreviewForm(){
+
+	// 	if(!this.form.get('data')){
+	// 		return;
+	// 	}
+	// 	this.previewForm = null;
+	// 	const fieldEditorModel = new DatasetDescriptionFieldEditorModel();
+		
+	// 	fieldEditorModel.viewStyle= {
+	// 			renderStyle: this.form.get('viewStyle').get('renderStyle').value,
+	// 			cssClass: null
+	// 		};
+		
+	// 	fieldEditorModel.data = (this.form.get('data') as FormGroup).getRawValue();		
+	// 	fieldEditorModel.value = this.form.get('defaultValue').get('value').value;
+	// 	fieldEditorModel.validationRequired = (this.form.get('validations').value as Array<ValidationType>).includes(ValidationType.Required);
+
+	// 	if(this.form.get('viewStyle').get('renderStyle').value == DatasetProfileFieldViewStyle.CheckBox){
+	// 		fieldEditorModel.value = this.form.get('defaultValue').get('value').value === 'true';	
+	// 	}
+	// 	// if(this.form.get('viewStyle').get('renderStyle').value == DatasetProfileFieldViewStyle.Researchers){
+	// 	// 	fieldEditorModel.data = new ResearchersAutoCompleteFieldDataEditorModel().buildForm().getRawValue();
+	// 	// }
+	// 	if(fieldEditorModel.viewStyle.renderStyle ===  DatasetProfileFieldViewStyle.Validation || (fieldEditorModel.viewStyle.renderStyle ===  DatasetProfileFieldViewStyle.DatasetIdentifier)
+	// 		|| (fieldEditorModel.viewStyle.renderStyle === DatasetProfileFieldViewStyle.Tags)
+	// 	){
+	// 		fieldEditorModel.value = null;
+	// 	}
+
+	// 	// const myTicket = Guid.create().toString();
+	// 	// this.validTicket = myTicket;
+	// 	// setTimeout(() => { //TODO
+	// 	// 	//user hasnt make any new change to inputs /show preview
+	// 	// 	if(myTicket === this.validTicket){
+	// 	// 		this.previewForm = fieldEditorModel.buildForm();
+	// 	// 	}
+	// 	// }, 600);
+
+	// 	this.subject$.next(fieldEditorModel);
+
+
+	// 	// setTimeout(() => {
+	// 	// 	this.previewForm = fieldEditorModel.buildForm();
+	// 	// });
+	// };
+
+	get canApplyVisibility():boolean{
+
+		
+		switch(this.viewType){
+			case this.viewTypeEnum.TextArea:
+			case this.viewTypeEnum.FreeText:
+			case this.viewTypeEnum.BooleanDecision:
+			case this.viewTypeEnum.RadioBox:
+			case this.viewTypeEnum.Select:
+			case this.viewTypeEnum.CheckBox:
+			case this.viewTypeEnum.DatePicker:
+				return true;
+
+		}
+
+
+		return false;
+
+	}
+
+	// validTicket:string;
+	// generatePreview(){
+	// 	const fieldEditorModel = new DatasetDescriptionFieldEditorModel();
+			
+	// 	fieldEditorModel.viewStyle= {
+	// 			renderStyle: this.form.get('viewStyle').get('renderStyle').value,
+	// 			cssClass: null
+	// 		};
+	// 	fieldEditorModel.defaultValue = this.form.get('defaultValue').value;
+	// 	switch (this.form.get('viewStyle').get('renderStyle').value) {
+	// 		case DatasetProfileFieldViewStyle.TextArea:
+	// 			fieldEditorModel.data = { 
+	// 				label: this.form.get('data').get('label').value
+	// 			};
+	// 			break;
+		
+	// 		default:
+	// 			break;
+	// 	}
+
+	// 		// this.previewForm = fieldEditorModel.buildForm();
+
+
+	// }
+	onInputTypeChange(){
+		
+
+		const x = this.viewType;
+
+		// this.showPreview = false;
+
+		
+
+		const field: Field = this.form.getRawValue();
+		// field.defaultValue = {type:null, value: null};
+		field.defaultValue = undefined;
+		if(!this.canApplyVisibility){
+			field.visible.rules = [];
+		}
+
+
+
+		// if (this.form.get('data')) {
+		// 	this.form.removeControl('data');
+		// }
+		
+		// this.form.removeControl('defaultValue');
+		// const defaultValueModel = new DefaultValueEditorModel();
+		// this.form.addControl('defaultValue',defaultValueModel.buildForm());
+
+		switch (x) {
+			case this.viewTypeEnum.BooleanDecision:{
+
+			
+				// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.BooleanDecision)
+				// this.form.addControl('data', new BooleanDecisionFieldDataEditorModel().buildForm());
+
+				const data: BooleanDecisionFieldData = {
+					label:""
+				}
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.BooleanDecision;		
+				field.data = data;		
+
+				break;
+			}
+			case this.viewTypeEnum.CheckBox:{
+
+			
+				// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.CheckBox)
+				// this.form.addControl('data', new CheckBoxFieldDataEditorModel().buildForm());
+
+				const data: CheckBoxFieldData = {
+					label:''
+				}
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.CheckBox;				
+				field.data = data;
+
+				break;
+			}
+			case this.viewTypeEnum.Select:{
+
+			
+				// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
+				// this.form.addControl('data', new WordListFieldDataEditorModel().buildForm());
+
+				// this.form.get('data').setValidators(EditorCustomValidators.atLeastOneElementListValidator('options'));
+				// this.form.get('data').updateValueAndValidity();
+				const option1 = {label:'', value:''} as FieldDataOption;
+				
+				const data:WordListFieldData = {
+					label:'',
+					multiList:false,
+					options:[option1],
+					type:DatasetProfileComboBoxType.WordList
+				}
+
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.ComboBox;				
+				field.data = data;
+
+				break;
+			}
+			case this.viewTypeEnum.Other:{
+
+			
+				// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
+				// this.form.addControl('data', new AutoCompleteFieldDataEditorModel().buildForm()); //TODO SEE
+
+				// this.form.get('data').setValidators(EditorCustomValidators.atLeastOneElementListValidator('autoCompleteSingleDataList'));
+				// this.form.get('data').updateValueAndValidity();
+
+				const data: AutoCompleteFieldData = {
+					autoCompleteSingleDataList:[],
+					multiAutoComplete: false,
+					label:'',
+					type: DatasetProfileComboBoxType.Autocomplete
+				}
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.ComboBox;				
+				field.data = data;
+
+				break;
+			}
+			case this.viewTypeEnum.InternalDmpEntities:{
+
+			
+				// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.InternalDmpEntities)
+				// this.form.addControl('data', new ResearchersAutoCompleteFieldDataEditorModel().buildForm());//TODO TO SEE
+
+				const data: DmpsAutoCompleteFieldData = {
+					label:'',
+					multiAutoComplete: false,
+					type: DatasetProfileInternalDmpEntitiesType.Dmps
+				}
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.InternalDmpEntities;				
+				field.data = data;
+
+				break;
+			}
+			case this.viewTypeEnum.FreeText:{
+
+			
+				// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.FreeText)
+				// this.form.addControl('data', new FreeTextFieldDataEditorModel().buildForm());
+
+				const data: FreeTextFieldData = {
+					label:''
+				}
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.FreeText;				
+				field.data = data;
+
+				break;
+			}
+			case this.viewTypeEnum.RadioBox:{
+
+			
+				// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.RadioBox)
+				// this.form.addControl('data', new RadioBoxFieldDataEditorModel().buildForm());
+
+				// this.form.get('data').setValidators(EditorCustomValidators.atLeastOneElementListValidator('options'));
+				// this.form.get('data').updateValueAndValidity();
+
+				const data: RadioBoxFieldData= {
+					label:'',
+					options: []
+				}
+
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.RadioBox;				
+				field.data = data;
+
+				break;
+			}
+			case this.viewTypeEnum.TextArea:{
+
+			
+				// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.TextArea)
+				// this.form.addControl('data', new TextAreaFieldDataEditorModel().buildForm());
+
+				const data: TextAreaFieldData = {
+					label:''
+				}
+
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.TextArea;				
+				field.data = data;
+				break;
+			}
+			case this.viewTypeEnum.DatePicker:{
+
+			
+				// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DatePicker)
+				// this.form.addControl('data', new DatePickerDataEditorModel().buildForm());
+
+				const data: DatePickerFieldData = {
+					label:''
+				} 
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.DatePicker;				
+				field.data = data;
+
+				break;
+			}
+			case this.viewTypeEnum.ExternalDatasets:{
+				// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ExternalDatasets)
+				// this.form.addControl('data', new ExternalDatasetsDataEditorModel().buildForm());
+
+				const data: ExternalDatasetsFieldData = {
+					label:'',
+					multiAutoComplete: false
+				}
+
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.ExternalDatasets;				
+				field.data = data;
+
+				break;
+			}
+			case this.viewTypeEnum.DataRepositories:{
+
+			
+				// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DataRepositories)
+				// this.form.addControl('data', new DataRepositoriesDataEditorModel().buildForm());
+
+				const data: DataRepositoriesFieldData = {
+					label: '',
+					multiAutoComplete: false
+				}
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.DataRepositories;				
+				field.data = data;
+
+				break;
+			}
+			case this.viewTypeEnum.Registries:{
+
+			
+				// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Registries)
+				// this.form.addControl('data', new RegistriesDataEditorModel().buildForm());
+
+				const data:RegistriesFieldData = {
+					label: '',
+					multiAutoComplete: false
+				}
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Registries;				
+				field.data = data;
+
+				break;
+			}
+			case this.viewTypeEnum.Services:{
+
+			
+				// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Services)
+				// this.form.addControl('data', new ServicesDataEditorModel().buildForm());
+
+				const data:ServicesFieldData = {
+					label:'',
+					multiAutoComplete: false
+				}
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Services;				
+				field.data = data;
+
+				break;
+			}
+			case this.viewTypeEnum.Tags:{
+				// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Tags)
+				// this.form.addControl('data', new TagsDataEditorModel().buildForm());
+
+				const data: TagsFieldData = {
+					label:''
+				}
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Tags;	
+				field.data = data;			
+				
+
+				break;
+			}
+			case this.viewTypeEnum.Researchers:{
+			
+				// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Researchers)
+				// // this.form.addControl('data', new ResearchersDataEditorModel().buildForm()); //TODO TO ASK
+				// this.form.addControl('data', new ResearchersAutoCompleteFieldDataEditorModel().buildForm());
+
+				// field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Researchers;			
+				
+				const data : ResearchersAutoCompleteFieldData = {
+					label:'',
+					multiAutoComplete: false,
+					type: DatasetProfileInternalDmpEntitiesType.Researchers
+				}
+
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.InternalDmpEntities;
+				field.data = data;
+
+
+				break;
+			}
+			case this.viewTypeEnum.Organizations:{
+
+			
+				// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Organizations)
+				// this.form.addControl('data', new OrganizationsDataEditorModel().buildForm());
+
+				const data = {
+					autoCompleteSingleDataList:[],
+					label:'',
+					multiAutoComplete: false,
+					
+				} as OrganizationsFieldData; //TODO 
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Organizations;				
+				field.data = data;
+
+				break;
+			}
+			case this.viewTypeEnum.DatasetIdentifier:{
+
+			
+				// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DatasetIdentifier)
+				// this.form.addControl('data', new DatasetIdentifierDataEditorModel().buildForm());
+
+				const data : DatasetIdentifierFieldData = {
+					label:''
+				}
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.DatasetIdentifier;				
+				field.data = data;	
+
+				break;
+			}
+			case this.viewTypeEnum.Currency:{
+
+			
+				// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Currency)
+				// this.form.addControl('data', new CurrencyDataEditorModel().buildForm());
+
+				const data: CurrencyFieldData = {
+					label:''
+				}
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Currency;				
+				field.data = data;
+				break;
+			}
+			case this.viewTypeEnum.Validation:{
+
+			
+				// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Validation)
+				// this.form.addControl('data', new ValidationDataEditorModel().buildForm());
+
+				const data:ValidationFieldData = {
+					label:''
+				}
+
+				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Validation;
+				field.data = data;
+
+				break;
+			}
+		}
+
+		// this.form.get('data').updateValueAndValidity();
+		// this.form.get('viewStyle').get('renderStyle').updateValueAndValidity();
+		// this.form.updateValueAndValidity();
+
+		
+		const form = (new FieldEditorModel).fromModel(field).buildForm();
+
+
+		const fields = this.form.parent as FormArray;
+		let index = -1;
+
+		fields.controls.forEach((control,i)=>{
+			if(this.form.get('id').value === control.get('id').value){
+				index = i
+			}
+		});
+		if(index>=0){
+			fields.removeAt(index);
+			fields.insert(index, form);
+			this.form = form;
+
+			
+		}
+
+		// setTimeout(() => { //TODO
+		// 	this.showPreview = true;
+		// });
+	}
+
+
+	toggleRequired(event:MatSlideToggleChange){
+		
+		let validationsControl = this.form.get('validations') as FormControl;
+		let validations: Array<ValidationType> = validationsControl.value;
+
+		if(event.checked){
+			if(!validations.includes(ValidationType.Required)){//IS ALREADY REQUIRED
+				// validationsControl.setValue(validations.filter(validator=> validator != ValidationType.Required));
+				// validationsControl.updateValueAndValidity();
+				validations.push(ValidationType.Required);
+				// validationsControl.setValue(validations);
+				validationsControl.updateValueAndValidity();
+			}
+		}else{
+			validationsControl.setValue(validations.filter(validator=> validator != ValidationType.Required));
+			validationsControl.updateValueAndValidity();
+		}
+		
+	}
+
+	get isRequired(){
+		let validationsControl = this.form.get('validations') as FormControl;
+		let validations: Array<ValidationType> = validationsControl.value;
+	
+		if(validations.includes(ValidationType.Required)){
+			return true;
+		}
+		return false;
+		
+	}
+
+
+	onDelete(){
+		this.delete.emit();
+	}
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/view-style-enum.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/view-style-enum.ts
new file mode 100644
index 000000000..f1da6d5cd
--- /dev/null
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/view-style-enum.ts
@@ -0,0 +1,21 @@
+export enum ViewStyleType{
+    TextArea = "textarea",
+	BooleanDecision = "booleanDecision",
+	CheckBox = "checkBox",
+	FreeText = "freetext",
+	RadioBox = "radiobox",
+	DatePicker = "datePicker",
+	InternalDmpEntities = "internalDmpEntities",
+	ExternalDatasets = "externalDatasets",
+	DataRepositories = "dataRepositories",
+	Registries = "registries",
+	Services = "services",
+	Tags = "tags",
+	Researchers = "researchers",
+	Organizations = "organizations",
+	DatasetIdentifier = "datasetIdentifier",
+	Currency = "currency",
+	Validation = 'validation',
+    Select ="selection",
+    Other ="other"
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/final-preview/final-preview.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/final-preview/final-preview.component.html
new file mode 100644
index 000000000..39882e08c
--- /dev/null
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/final-preview/final-preview.component.html
@@ -0,0 +1,3 @@
+<app-dataset-description [form]="formGroup" [visibilityRules]="visibilityRules" *ngIf="formGroup">
+	
+</app-dataset-description>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/final-preview/final-preview.component.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/final-preview/final-preview.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/final-preview/final-preview.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/final-preview/final-preview.component.ts
new file mode 100644
index 000000000..25afc4373
--- /dev/null
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/final-preview/final-preview.component.ts
@@ -0,0 +1,28 @@
+import { Component, Input, OnInit} from '@angular/core';
+import { Rule } from '@app/core/model/dataset-profile-definition/rule';
+import { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service';
+
+
+@Component({
+	selector: 'app-final-preview-component',
+	templateUrl: './final-preview.component.html',
+	styleUrls: ['./final-preview.component.scss'],
+	providers:[VisibilityRulesService]
+})
+
+export class FinalPreviewComponent  implements OnInit {
+
+	
+	@Input() formGroup = null;
+	@Input() visibilityRules:Rule[] = [];
+	constructor(private visibilityRulesService: VisibilityRulesService){
+		
+	}
+
+	
+
+	ngOnInit(): void {
+		this.visibilityRulesService.buildVisibilityRules(this.visibilityRules, this.formGroup);
+	}
+	
+}
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/rule/dataset-profile-editor-rule.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/rule/dataset-profile-editor-rule.component.html
index b92190104..dd2a26762 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/rule/dataset-profile-editor-rule.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/rule/dataset-profile-editor-rule.component.html
@@ -1,24 +1,99 @@
 <div class="row" *ngFor="let ruleFormGroup of form['controls'] let i=index;" [formGroup]="ruleFormGroup">
-	<span class="col-auto">{{i + 1}}</span>
+	<span class="col-auto align-self-center">{{i + 1}}</span>
 
-	<span class="col-auto">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-IF'| translate}}</span>
+	<!-- <span class="col-auto">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-IF'| translate}}</span> -->
 	<!-- Value -->
-	<app-component-profile-editor-default-value-component class="col" [viewStyle]="viewStyleForCheck" [form]="ruleFormGroup.get('value')"
+	<!-- <app-component-profile-editor-default-value-component class="col" [viewStyle]="viewStyleForCheck" [form]="ruleFormGroup.get('value')"
 	 [formArrayOptions]="formArrayOptionsForCheck" [comboBoxType]="comboBoxTypeForCheck" placeHolder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RULES-VALUE' | translate}}"
+	 required="true"></app-component-profile-editor-default-value-component> -->
+
+
+	<app-component-profile-editor-default-value-component class="col align-self-center" [viewStyle]="viewStyleForCheck" [form]="ruleFormGroup.get('value')"
+	 [formArrayOptions]="formArrayOptionsForCheck" [comboBoxType]="comboBoxTypeForCheck" placeHolder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-IF'| translate}}"
 	 required="true"></app-component-profile-editor-default-value-component>
 
-	<span class="col-auto">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-THEN'| translate}}</span>
+	<!-- <span class="col-auto">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-THEN'| translate}}</span> -->
 
 	<!-- Field Or Section ID -->
-	<mat-form-field class="col-auto">
+	<!-- <mat-form-field class="col-auto">
 		<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.TARGET' | translate}}"
 		 formControlName="target" (change)="targetValidation()" required>
 		<mat-error>{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 	</mat-form-field>
+	 -->
+	
+	<!-- SELECTION -->
+	<mat-form-field class="col align-self-center">
+		<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-THEN'| translate}}</mat-label>
+		<mat-select formControlName="target" (openedChange)="computeOptions($event)">
+			<!-- SHOW SECTIONS -->
+			<!-- <mat-optgroup label="Sections" *ngIf="false">
+				<mat-option *ngFor="let option of sectionOptions" [value]="option.id" style="line-height: normal;"
+				[disabled]="parentIds.includes(option.id)">
+					
+					<span>
+						{{option.label? option.label:'<'+ ('DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate) + '>'}}
+					</span> <br>
+					<small>
+						{{option.id}} 
+					</small>
+					
+				</mat-option>
+			</mat-optgroup> -->
+			<!-- SHOW FIELDSETS -->
+			<mat-optgroup [label]="'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.FIELDSETS' | translate">
+				<mat-option *ngFor="let option of fieldSetOptions" [value]="option.id" style="line-height: normal;"
+				[disabled]="parentIds.includes(option.id) || hiddenBy.includes(option.id)"
+				[matTooltip]="getToolTipMessage(option.id)"
+				[matTooltipShowDelay]="700"
+				>
+					<span>
+						{{option.label? option.label:'<'+ ('DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate) + '>'}}
+					</span> <br>
+					<small>
+						{{option.id}} 
+					</small>
+				</mat-option>
+			</mat-optgroup>
+			<!-- SHOW FIELDS -->
+			<mat-optgroup [label]="'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.FIELDS' | translate">
+				<mat-option *ngFor="let option of fieldOptions" [value]="option.id" style="line-height: normal;"
+				[disabled]="parentIds.includes(option.id) ||hiddenBy.includes(option.id)"
+				[matTooltip]="getToolTipMessage(option.id)"
+				[matTooltipShowDelay]="700"
+				>
+					<span>
+						{{option.label? option.label:'<'+ ('DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate) + '>'}}
+					</span> <br>
+					<small>
+						{{option.id}} 
+					</small>
+				</mat-option>
+			</mat-optgroup>
 
 
-	<div class="col-auto"><button mat-icon-button type="button" (click)="deleteRule(i);" [disabled]="viewOnly">
+		</mat-select>
+		<mat-error>{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+	</mat-form-field>
+
+	<div class="col-auto align-self-center"><button mat-icon-button type="button" (click)="deleteRule(i);" [disabled]="viewOnly">
 			<mat-icon>delete</mat-icon>
 		</button>
 	</div>
 </div>
+
+
+
+<!-- 
+{{parentIds |json}}
+<br>
+{{this.formControlForCheck.value | json}} -->
+<!-- 
+<ng-template #optionTemplate>
+	<span>
+		{{option.label? option.label: '< Not Set> '}}
+	</span> <br>
+	<small>
+		{{option.id}} 
+	</small>
+</ng-template> -->
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/rule/dataset-profile-editor-rule.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/rule/dataset-profile-editor-rule.component.ts
index 37e753353..14963db30 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/rule/dataset-profile-editor-rule.component.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/rule/dataset-profile-editor-rule.component.ts
@@ -1,7 +1,10 @@
-import { Component, Input } from '@angular/core';
-import { FormArray, FormControl } from '@angular/forms';
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { FormArray, FormControl, FormGroup } from '@angular/forms';
 import { DatasetProfileFieldViewStyle } from '../../../../../../core/common/enum/dataset-profile-field-view-style';
 import { DatasetProfileComboBoxType } from '../../../../../../core/common/enum/dataset-profile-combo-box-type';
+import { ToCEntryType } from '../../../table-of-contents/table-of-contents-entry';
+import { Rule } from '@app/core/model/admin/dataset-profile/dataset-profile';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
 	selector: 'app-dataset-profile-editor-rule-component',
@@ -9,21 +12,198 @@ import { DatasetProfileComboBoxType } from '../../../../../../core/common/enum/d
 	styleUrls: ['./dataset-profile-editor-rule.component.scss']
 })
 
-export class DatasetProfileEditorRuleComponent {
-
+export class DatasetProfileEditorRuleComponent implements OnInit{
+	
+	
 	@Input() form: FormArray;
-
+	
 	@Input() viewStyleForCheck: DatasetProfileFieldViewStyle;
 	@Input() formControlForCheck: FormControl;
 	@Input() formArrayOptionsForCheck: FormArray;
 	@Input() comboBoxTypeForCheck: DatasetProfileComboBoxType;
 	@Input() viewOnly: boolean;
+	
+
+	options: OptionItem[];
+	sectionOptions: OptionItem[];
+	fieldSetOptions: OptionItem[];
+	fieldOptions: OptionItem[];
+
+	constructor(private language: TranslateService){
+
+	}
 
 	targetValidation() {
 		//TODO
 	}
-
+	
 	deleteRule(index) {
 		this.form.removeAt(index);
 	}
+
+	ngOnInit(): void {
+		this._computeOptions();
+	}
+
+	private _computeOptions(){
+		this.options = this.getOptions();
+
+		this.sectionOptions = [];
+		this.fieldOptions = [];
+		this.fieldSetOptions = [];
+		this.options.forEach(option=>{
+			switch (option.type) {
+				case ToCEntryType.Field:
+					this.fieldOptions.push(option);
+					break;
+				case ToCEntryType.FieldSet:
+					this.fieldSetOptions.push(option);
+					break;
+				case ToCEntryType.Section:
+					this.sectionOptions.push(option);
+					break;
+				default:
+					break;
+			}
+		});
+		//remove options to hide if given fieldset is already hidden by option
+
+		this.fieldOptions.forEach(e=>this._buildHiddenBy(e));
+		this.fieldSetOptions.forEach(e=>this._buildHiddenBy(e));
+	}
+
+
+
+	computeOptions(isOpened: boolean){
+		if(isOpened){
+			this._computeOptions();
+		}
+	}
+
+	private _buildHiddenBy(fo:OptionItem){
+		try{
+			this.fieldOptions.forEach(foption=>{
+				const rules = (foption.form.get('visible').get('rules') as FormArray).controls.map(c=>(c as FormGroup).getRawValue()) as Rule[]
+				const targets = rules.map(rule=>rule.target);
+				targets.forEach(target=>{
+					if(fo.parentsIds.includes(target) && !fo.hiddenBy.includes(foption.id)){
+						fo.hiddenBy.push(...foption.parentsIds);
+					}
+				})
+
+			});
+		}catch{
+			console.log('error');
+		}
+	}
+
+
+
+
+
+	getOptions():OptionItem[]{
+		const rootForm = this.form.root;
+		if(rootForm){
+			// const parentSections = rootForm.get('sections') as FormArray;
+
+			const result:OptionItem[] =[];
+
+			const sections = rootForm.get('sections') as FormArray;
+
+			if(sections){
+				sections.controls.forEach(section=>{
+					const subResult = this.buildOptions(section as FormGroup, ToCEntryType.Section,[]);
+					result.push(...subResult);
+				});
+			}
+
+			//return options
+			return result;
+
+		}
+		//nothing found
+		return [];
+	}
+
+	private buildOptions(form: FormGroup, type: ToCEntryType, parentIds:string[]):OptionItem[]{
+		
+		const sections = form.get('sections') as FormArray;
+		const fieldSets =  form.get('fieldSets') as FormArray;
+		const fields = form.get('fields') as FormArray;
+
+		const result:OptionItem[] = []; 
+
+		// parentIds.push(form.get('id').value);
+		const currentOptionItem:OptionItem = {
+			id: form.get('id').value,
+			type: type,
+			label: type ===ToCEntryType.Field? form.get('data').get('label').value :form.get('title').value,
+			// parentsIds: [form.get('id').value]
+			parentsIds: [...parentIds, form.get('id').value],
+			form: form,
+			hiddenBy:[]
+		}
+		result.push(currentOptionItem);
+
+		if(sections){
+			sections.controls.forEach(section=>{
+				result.push( ...this.buildOptions(section as FormGroup, ToCEntryType.Section, currentOptionItem.parentsIds) );
+			});
+		}
+		if(fieldSets){
+			fieldSets.controls.forEach(fieldset=>{
+				result.push( ...this.buildOptions(fieldset as FormGroup, ToCEntryType.FieldSet, currentOptionItem.parentsIds) );
+			});
+		}
+		if(fields){
+			fields.controls.forEach(field=>{
+				result.push( ...this.buildOptions(field as FormGroup, ToCEntryType.Field, currentOptionItem.parentsIds) ); //TODO NA TO DOUME
+			});
+		}
+
+		return result;
+	}
+
+	get parentIds(): string[]{
+
+		if(!this.formControlForCheck.get('id')) return [];
+
+		const current = this.options.find(opt=> opt.id === this.formControlForCheck.get('id').value);
+
+		if(current){
+			return current.parentsIds;
+		}
+		return [];
+	}
+	get hiddenBy(): string[]{
+		if(!this.formControlForCheck.get('id')) return [];
+	
+		const current = this.options.find(opt=> opt.id === this.formControlForCheck.get('id').value);
+	
+		if(current){
+			return current.hiddenBy;
+		}
+		return [];
+	}
+
+	getToolTipMessage(id: string){
+		if(this.parentIds.includes(id)){
+			// return 'Cannot hide element that contain the field';
+			return  this.language.instant('DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.HINTS.ELEMENT-CHILD-OF-TARGET');
+		}else if(this.hiddenBy.includes(id)){
+			return  this.language.instant('DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.HINTS.ELEMENT-HIDDEN-FROM-ELEMENT');
+		}
+		return '';
+	}
+
 }
+
+
+interface OptionItem{
+	id: string,
+	label: string,
+	type: ToCEntryType,
+	parentsIds: string[],
+	form:FormGroup,
+	hiddenBy:string[]
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.html
new file mode 100644
index 000000000..ee9cacacd
--- /dev/null
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.html
@@ -0,0 +1,154 @@
+<div id="topofcontainer"></div>
+<div class="row" [id]="idprefix+form.get('id').value">
+
+
+    <div class="col-12" >
+        <div class="row">
+            <!-- SECTION INFO -->
+            <mat-card style="margin-bottom: 2em; padding: 2em;" class="col-9">
+                <mat-card-content>
+                    <app-dataset-profile-editor-section-component 
+                        [form]="form"
+                        [viewOnly]="viewOnly"
+                        >
+                    </app-dataset-profile-editor-section-component>
+                </mat-card-content>
+            </mat-card>
+            <div class="col-2 col-xl-auto ml-4" *ngIf="!selectedFieldSetId && !viewOnly">
+
+                <div class="row bg-white actions-list">
+                    <nav>
+                        <label class="action-list-label">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.GENERAL-TOOLS' | translate}}</label>
+                        <ul class="list-unstyled">
+                            <li class="mli">
+                                <div class="action-list-item" (click)="onAddFieldSet()">
+                                    <!-- <mat-icon class="action-list-icon">folder</mat-icon> -->
+                                    <img src="/assets/images/editor/icons/add_input_set.svg" class="input_icon" alt="Add Question icon">
+                                    <span class="action-list-text" >{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
+                                </div>
+                            </li>
+                        </ul>
+                    </nav>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+    <!-- FIELDSET INFO -->
+    <div class="col-12" dragula="FIELDSETS" [(dragulaModel)]="form.get('fieldSets').controls">
+
+        <div style="margin-bottom: 2em;" class="row"
+            *ngFor="let fieldset of form.get('fieldSets')?.controls ; let i=index"[id]="idprefix+fieldset.get('id').value"
+            >
+            <!-- <h4 style="font-weight: bold" class="col-12">
+            {{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.FIELDS-TITLE' |
+            translate}}</h4> -->
+                <!-- <div class="col-12"> -->
+
+                <!-- <mat-card-title class="col">{{i + 1}}. {{getFieldTile(fieldControl, i)}}
+            </mat-card-title> -->
+                <!-- <button mat-icon-button type="button" class="deleteBtn col-auto"
+                (click)="deleteFieldSet(selectedTocEntry.form, i);" [disabled]="viewOnly">
+                <mat-icon>delete</mat-icon>
+            </button> -->
+
+            <mat-card class="col-9"
+                (click)="selectedFieldSetId = fieldset.get('id').value"
+                [ngClass]="{'field-container-active': fieldset.get('id').value === selectedFieldSetId}">
+                    <mat-card-content>
+
+                        <mat-card-header *ngIf="(fieldset.get('id').value === selectedFieldSetId) && !viewOnly">
+                            <mat-icon class="handle" style="display:inline-block; margin: 0px auto; cursor: grab;transform: rotate(90deg);" cdkDragHandle>drag_indicator</mat-icon>
+                        </mat-card-header>
+                        <app-dataset-profile-editor-composite-field-component [form]="fieldset"
+                            [viewOnly]="viewOnly"
+                            [numbering]="numbering + '.'+ (i+1)"
+                            [hasFocus]="fieldset.get('id').value === selectedFieldSetId">
+                        </app-dataset-profile-editor-composite-field-component>
+                    </mat-card-content>
+            </mat-card>
+
+            <div class="col-2 col-xl-auto ml-4" *ngIf="selectedFieldSetId === fieldset.get('id').value &&(!viewOnly)">
+
+                <div class="row bg-white actions-list">
+                    <nav *ngIf="!viewOnly">
+                        <label class="action-list-label">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.GENERAL-TOOLS' | translate}}</label>
+                        <ul class="list-unstyled">
+                            <li class="mli">
+                                <div class="action-list-item" (click)="onAddFieldSet()">
+                                    <!-- <mat-icon class="action-list-icon">folder</mat-icon> -->
+                                    <img src="/assets/images/editor/icons/add_input_set.svg" class="input_icon" alt="Add Question icon">
+                                    <span class="action-list-text" >{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
+                                </div>
+                            </li>
+        
+        
+                            <li class="mli">
+                                <div class="action-list-item" (click)="onCloneFieldSet(fieldset)">
+                                    <!-- <mat-icon class="action-list-icon">file_copy</mat-icon> -->
+                                    <img src="/assets/images/editor/icons/clone.svg" class="input_icon" alt="Clone icon">
+                                    <span class="action-list-text">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.CLONE' | translate}}</span>
+                                </div>
+                            </li>
+                            
+                            <li class="mli">
+                                <div class="action-list-item" (click)="onRemoveFieldSet(selectedFieldSetId)">
+                                    <mat-icon class="action-list-icon">delete</mat-icon>
+                                    <span class="action-list-text">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.DELETE' | translate}}</span>
+                                </div>
+                            </li>
+                        </ul>
+                    </nav>
+                </div>
+            </div>
+
+            <!-- </div> -->
+
+            <!-- <div class="col-12"><button mat-button class="full-width" (click)="addField()"
+            [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.ACTIONS.ADD-FIELD'
+            | translate}}</button></div> -->
+        </div>
+
+
+    </div>
+    
+</div>
+
+
+<!-- COPIA -->
+<!-- <div class="row"> -->
+
+    <!-- SECTION INFO -->
+    <!-- <app-dataset-profile-editor-section-component class="col-12 content-displayer p-2" style="margin-bottom: 2em;"
+        [form]="selectedTocEntry.form"
+        [viewOnly]="viewOnly"
+        (fieldsetAdded)="displayItem(_findTocEntryById($event, getTocEntries())); onDataNeedsRefresh();">
+    </app-dataset-profile-editor-section-component> -->
+
+    <!-- FIELDSET INFO -->
+    <!-- <div class="col-12 content-displayer p-2" style="margin-bottom: 2em;"
+        *ngFor="let fieldset of selectedTocEntry.form.get('fieldSets')?.controls ; let i=index"> -->
+        <!-- <h4 style="font-weight: bold" class="col-12">
+    {{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.FIELDS-TITLE' |
+    translate}}</h4> -->
+        <!-- <div class="col-12"> -->
+
+        <!-- <mat-card-title class="col">{{i + 1}}. {{getFieldTile(fieldControl, i)}}
+    </mat-card-title> -->
+        <!-- <button mat-icon-button type="button" class="deleteBtn col-auto"
+        (click)="deleteFieldSet(selectedTocEntry.form, i);" [disabled]="viewOnly">
+        <mat-icon>delete</mat-icon>
+    </button> -->
+
+        <!-- <app-dataset-profile-editor-composite-field-component class="p-0" [form]="fieldset"
+            [indexPath]="'indexPath' + 'cf' + 'i'" [viewOnly]="viewOnly"
+            [numbering]="selectedTocEntry.numbering + '.'+ (i+1)">
+        </app-dataset-profile-editor-composite-field-component> -->
+        <!-- </div> -->
+
+        <!-- <div class="col-12"><button mat-button class="full-width" (click)="addField()"
+        [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.ACTIONS.ADD-FIELD'
+        | translate}}</button></div> -->
+    <!-- </div> -->
+<!-- </div> -->
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.scss
new file mode 100644
index 000000000..bb5162e77
--- /dev/null
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.scss
@@ -0,0 +1,60 @@
+$blue-color : #129D99;
+$blue-color-light: #5cf7f2;
+
+
+.field-container-active{
+    border-radius: .3em;
+    border-left: 0.3em solid $blue-color;
+}
+.fieldset-actions-list li{
+    cursor: pointer;
+}
+  
+  
+
+.actions-list{
+  //   border: 1px solid $blue-color;
+  // box-shadow: 0px 3px 12px #129D9999;
+  border-radius: 4px;
+  // padding-top: 1rem;
+  padding: 1em 0.9em;
+  padding-bottom: 3em;
+  min-width: 166px;
+
+  .mat-list-item-content{
+    padding: 0px;
+  }
+  
+  
+  .action-list-item{
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  
+  
+    .action-list-icon{
+      font-size: 1.2em;
+      // padding-right: 1em;
+      width: 14px;
+      margin-right: 0.5em;
+      margin-left: -.09em;
+      height: auto;
+      color: #129D99;;
+    }
+    .input_icon{
+      width: 14px;
+      margin-right: .5em;
+    }
+    .action-list-text{
+      font-size: 0.9em;
+    }
+  }
+  .action-list-label{
+    color: #212121;
+    font-size: small;
+    opacity: 0.6;
+  }
+  .list-unstyled{
+    margin-bottom: 0.2rem;
+  }
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.ts
new file mode 100644
index 000000000..ea6b8089f
--- /dev/null
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.ts
@@ -0,0 +1,307 @@
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { ChangeDetectorRef, Inject, OnDestroy } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { FormArray, FormGroup } from '@angular/forms';
+import { FieldEditorModel } from '@app/ui/admin/dataset-profile/admin/field-editor-model';
+import { FieldSetEditorModel } from '@app/ui/admin/dataset-profile/admin/field-set-editor-model';
+import { SectionEditorModel } from '@app/ui/admin/dataset-profile/admin/section-editor-model';
+import { BaseComponent } from '@common/base/base.component';
+import { Guid } from '@common/types/guid';
+import { DragulaService } from 'ng2-dragula';
+import { Subscription } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { ToCEntry, ToCEntryType } from '../../../table-of-contents/table-of-contents-entry';
+
+@Component({
+	selector: 'app-dataset-profile-editor-section-fieldset-component',
+	templateUrl: './dataset-profile-editor-section-fieldset.component.html',
+	styleUrls: ['./dataset-profile-editor-section-fieldset.component.scss']
+})
+
+export class DatasetProfileEditorSectionFieldSetComponent implements OnInit, OnChanges, OnDestroy {
+	// @Input() form: FormGroup;
+	//@Input() dataModel: SectionEditorModel;
+	// @Input() indexPath: string;
+	@Input() viewOnly: boolean;
+	// @Input() numbering: string;
+	@Input() tocentry: ToCEntry;
+
+	@Output() selectedEntryId = new EventEmitter<string>();
+	@Output() dataNeedsRefresh = new EventEmitter<void> ();
+	@Output() removeFieldSet = new EventEmitter<string>();
+	@Output() addNewFieldSet = new EventEmitter<FormGroup>();
+	@Output() cloneFieldSet = new EventEmitter<FormGroup>();
+
+
+	// FIELDSET_PREFIX_ID="FIELDSET_PREFIX_ID";
+
+	// @Output() fieldsetAdded = new EventEmitter<String>(); //returns the id of the fieldset added
+	idprefix = "id";
+	private subs = new Subscription();
+	private FIELDSETS = 'FIELDSETS';
+	constructor(
+		private dragulaService: DragulaService,
+		private myElement: ElementRef
+	) 
+	{ 
+		if(this.dragulaService.find(this.FIELDSETS)){
+			this.dragulaService.destroy(this.FIELDSETS);	
+		}
+
+
+		this.dragulaService.createGroup(this.FIELDSETS,{
+			moves:(el, container, handle)=>{
+				// if(this.viewOnly) return false; //uncomment if want to unable drag n drop in viewonly mode
+				if(el.id != (this.idprefix+this.tocentry.id)) return false;
+				if(handle.className && handle.classList.contains('handle')) return true;
+				return false;
+			}
+		});
+		this.subs.add(this.dragulaService.drop(this.FIELDSETS).subscribe(obs=>{
+
+
+			(this.form.get('fieldSets') as FormArray).controls.forEach((e,i)=>{
+				e.get('ordinal').setValue(i);
+			});
+
+
+			// obs.
+			this.dataNeedsRefresh.emit();
+			return ;
+		}));
+	
+	}
+	ngOnDestroy(){
+		// console.log('elemement destroyed -->');
+		
+		this.subs.unsubscribe();
+	}
+	ngOnChanges(changes: SimpleChanges): void {
+		// console.log('---------element updated-------');
+		// console.log('numbering before:', this.numbering);
+		
+		
+		this.initialize();
+		// console.log('----post update----');
+		// console.log('numbering now', this.numbering, ' changes detected:', changes);
+		
+		
+	}
+
+
+	form;
+	numbering;
+
+
+
+	private _selectedFieldSetId: string = null;
+	get selectedFieldSetId(){
+		return this._selectedFieldSetId;
+	}
+	set selectedFieldSetId(id: string){
+
+		if(id === this._selectedFieldSetId) return;
+		this._selectedFieldSetId = id;
+		this.selectedEntryId.emit(this._selectedFieldSetId);
+	}
+
+	private _findParentSection():FormGroup{
+		const parent = this.form.parent;
+
+		return parent;
+	}
+
+
+	private initialize(){
+		if(this.tocentry.type === ToCEntryType.Section){
+			this.form = this.tocentry.form;
+			this.numbering = this.tocentry.numbering;
+			this._selectedFieldSetId = null;
+
+			// this._scrollToElement(this.tocentry.id);
+			this._scrollOnTop();
+		}else if(this.tocentry.type === ToCEntryType.FieldSet){
+			this.form = this.tocentry.form.parent.parent;
+			const numberingArray = this.tocentry.numbering.split('.');
+			if(numberingArray.length){
+				numberingArray.splice(numberingArray.length-1);
+				this.numbering = numberingArray.join('.');
+			}else{
+				// console.warn('!not found numbering');
+			}
+			this.selectedFieldSetId = this.tocentry.id;
+
+			this._scrollToElement(this.selectedFieldSetId);
+		}else{//scroll on top
+			this._scrollOnTop();
+		}
+	}
+
+	private _scrollToElement(id: string){
+		let el = this.myElement.nativeElement.querySelector("#"+this.idprefix+id);
+			// let el = this.myElement.nativeElement.getElementbyId (this.selectedFieldSetId);
+			
+		if(el){
+
+			/*
+				Give time to template to build itself (extending and collapsing).
+				In case we are dragging from one container to another, then  the ui takes around 600ms to build 
+				individual previews (dataset-profile-editor-field.component.ts);
+
+			*/
+			setTimeout(() => {
+				const el = this.myElement.nativeElement.querySelector("#"+this.idprefix+id);
+				if(el){
+					el.scrollIntoView({behavior: "smooth"});
+				}
+			}, 700);
+		}
+
+	}
+	private _scrollOnTop(){
+		setTimeout(() => {
+			const el = this.myElement.nativeElement.querySelector('#topofcontainer');
+			if(el){
+				el.scrollIntoView({behavior:'smooth'})
+			}
+		},200);
+
+	}
+	ngOnInit() {
+
+		// console.log('<-- element created');
+		// this.initialize();
+		
+
+
+		//TODO 
+		// this.form.root.get('pages').valueChanges
+		// 	.pipe(takeUntil(this._destroyed))
+		// 	.subscribe(x =>
+		// 		this.keepPageSelectionValid(x)
+		// 	);
+	}
+
+	drop(event: CdkDragDrop<string[]>) {
+		// if(!this.links || !this.links.length) return;
+
+		if(event.container === event.previousContainer){
+			// moveItemInArray(this.links, event.previousIndex, event.currentIndex);
+	
+			let arrayToUpdate: FormArray = this.form.get('fieldSets') as FormArray;
+			// if(this.parentLink && this.parentLink.form){
+			// 	switch(this.parentLink.subEntriesType){
+			// 		case this.tocEntryType.Field: 
+			// 			arrayToUpdate = (this.parentLink.form.get('fields') as FormArray);
+			// 			break;
+			// 		case this.tocEntryType.FieldSet: 
+			// 			arrayToUpdate = (this.parentLink.form.get('fieldSets') as FormArray);
+			// 			break;
+			// 		case this.tocEntryType.Section: 
+			// 			arrayToUpdate = (this.parentLink.form.get('sections') as FormArray);
+			// 			break
+			// 	}
+				
+			// }
+			if(arrayToUpdate.controls){
+				moveItemInArray(arrayToUpdate.controls, event.previousIndex, event.currentIndex);
+				//update ordinality
+				arrayToUpdate.controls.forEach((element,idx ) => {
+					element.get('ordinal').setValue(idx);
+					element.updateValueAndValidity();
+				});
+			}
+	
+			this.dataNeedsRefresh.emit();
+		}else{
+			console.log('not same container');
+		}
+
+	}
+
+
+	onRemoveFieldSet(fieldsetId: string){
+		this.removeFieldSet.emit(fieldsetId);
+	}
+
+	onCloneFieldSet(fieldset: FormGroup){
+		this.cloneFieldSet.emit(fieldset);
+	}
+	onAddFieldSet(){
+		this.addNewFieldSet.emit(this.form);
+	}
+
+
+	// addField() {
+	// 	const fieldSet: FieldSetEditorModel = new FieldSetEditorModel();
+	// 	fieldSet.ordinal = (this.form.get('fieldSets') as FormArray).length;
+
+	// 	const field: FieldEditorModel = new FieldEditorModel();
+	// 	field.id = Guid.create().toString();
+	// 	field.ordinal = 0;//first field in fields
+	// 	fieldSet.fields.push(field);
+	// //	if (this.dataModel.fieldSets) {
+	// 		fieldSet.id = Guid.create().toString();
+	// 		//this.dataModel.fieldSets.push(fieldSet);
+	// 	//}
+	// 	const fieldsetsArray = this.form.get('fieldSets') as FormArray;
+	// 	fieldsetsArray.push(fieldSet.buildForm());
+
+	// 	const fieldSetForm = fieldsetsArray.at(fieldsetsArray.length-1);
+	// 	//emit id inserted
+	// 	if(fieldSetForm){
+	// 		const id: string = fieldSetForm.get('id').value;
+	// 		this.fieldsetAdded.emit(id);
+	// 	}
+	// }
+
+	// addSectioninSection() {
+	// 	const section: SectionEditorModel = new SectionEditorModel();
+	// 	//this.dataModel.sections.push(section);
+	// 	(<FormArray>this.form.get('sections')).push(section.buildForm());
+	// }
+
+	// DeleteSectionInSection(index) {
+	// 	//this.dataModel.sections.splice(index, 1);
+	// 	(<FormArray>this.form.get('sections')).removeAt(index);
+	// }
+
+	// deleteFieldSet(index) {
+	// 	//this.dataModel.fieldSets.splice(index, 1);
+	// 	(<FormArray>this.form.get('fieldSets')).removeAt(index);
+	// }
+
+	// keepPageSelectionValid(pagesJson: Array<any>) {
+	// 	const selectedPage = this.form.get('page').value as String;
+	// 	// const pages: Array<PageEditorModel> = JsonSerializer.fromJSONArray(pagesJson, Page);
+	// 	if (pagesJson.find(elem => elem.id === selectedPage) === undefined) {
+	// 		this.form.get('page').reset();
+	// 	}
+	// }
+
+	// getFieldTile(formGroup: FormGroup, index: number) {
+	// 	if (formGroup.get('title') && formGroup.get('title').value && formGroup.get('title').value.length > 0) { return formGroup.get('title').value; }
+	// 	return "Field " + (index + 1);
+	// }
+	private _findTocEntryById(id: string, tocentries: ToCEntry[]): ToCEntry{
+		if(!tocentries){
+			return null;
+		}
+
+		let tocEntryFound = tocentries.find(entry=>entry.id === id);
+
+		if(tocEntryFound){
+			return tocEntryFound;
+		}	
+
+		for(let entry of tocentries){
+			const result = this._findTocEntryById(id, entry.subEntries);
+			if(result){
+				tocEntryFound = result;
+				break;
+			}
+		}
+		
+		return tocEntryFound? tocEntryFound: null;
+	}
+}
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.html
index c1f35e67a..2b799f3f6 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.html
@@ -1,31 +1,42 @@
 <div [formGroup]="form" class="row dataset-profile-editor">
-	<h4 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.TITLE' | translate}}</h4>
+	<!-- <h4 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.TITLE' | translate}}</h4> -->
+	<!-- <div class="heading col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.TITLE' | translate}}</div> -->
 
-	<mat-form-field class="col-md-3">
+	<!-- <mat-form-field class="col-md-3">
 		<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.ID' | translate}}"
-		 formControlName="id" required>
+		formControlName="id" required>
 		<mat-error *ngIf="form.get('id').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 		<mat-error *ngIf="form.get('id').hasError('pattern')">{{'GENERAL.VALIDATION.PATTERN-_' | translate}}</mat-error>
-	</mat-form-field>
-	<mat-form-field class="col-md-3">
-		<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.TITLE' | translate}}"
+	</mat-form-field> -->
+	
+	<div class="heading col-12">{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-NAME' | translate}} *</div>
+	<div class="hint col-12">{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-NAME-HINT' | translate}}</div>
+	<mat-form-field class="col-12">
+		<input matInput type="text" [placeholder]="('DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate)+ ' '+ ('DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION' | translate)"
 		 formControlName="title">
+		 <mat-error >{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 	</mat-form-field>
-	<mat-form-field class="col-md-3">
+	<!-- <mat-form-field class="col-md-3">
 		<mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.PAGE' | translate}}" formControlName="page"
 		 required>
 			<mat-option *ngFor="let pageGroup of form.root.get('pages')['controls'];" [value]="pageGroup.get('id').value">{{pageGroup.get('title').value}}</mat-option>
 		</mat-select>
 		<mat-error *ngIf="form.get('page').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-	</mat-form-field>
-	<mat-form-field class="col-md-3">
+	</mat-form-field> -->
+	<!-- <mat-form-field class="col-md-3">
 		<input matInput type="number" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.ORDER' | translate}}"
 		 formControlName="ordinal">
-	</mat-form-field>
-	<mat-form-field class="col-md-12">
+	</mat-form-field> -->
+	<div class="heading col-12">{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION' | translate}} </div>
+	<div class="hint col-12">{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION-HINT' | translate}}</div>
+	<mat-form-field class="col-12">
 		<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.DESCRIPTION' | translate}}"
 		formControlName="description">
+		<!-- <mat-error >{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> -->
 	</mat-form-field>
+
+
+	
 	<!-- <div class="col-md-6">
 		<label>Default Visibility</label>
 		<mat-radio-group formControlName="defaultVisibility" class="full-width">
@@ -33,7 +44,8 @@
 			<mat-radio-button [value]="false">false</mat-radio-button>
 		</mat-radio-group>
 	</div> -->
-	<h4 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.FIELDS-TITLE' |
+
+	<!-- <h4 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.FIELDS-TITLE' |
 		translate}}</h4>
 	<div class="col-12">
 		<mat-card class="field-card" *ngFor="let fieldControl of form.get('fieldSets')['controls'] let i=index;">
@@ -46,28 +58,40 @@
 			</div>
 		</mat-card>
 	</div>
-	<div class="col-12"><button mat-button class="full-width" (click)="addField()" [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.ACTIONS.ADD-FIELD'
-			| translate}}</button></div>
-	<h4 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.SUB-SECTIONS-TITLE' |
+
+	-->
+	<!-- Able to add fieldsets if only the sections has no subsections -->
+	<!-- <ng-container *ngIf="form.get('sections').controls?.length == 0">
+		<div class="col-12"><button mat-button class="full-width" (click)="addField()" [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.ACTIONS.ADD-FIELD'
+				| translate}}</button>
+		</div>
+	</ng-container> -->
+
+
+
+
+			<!-- SUBSECTIONS -->
+			
+	<!-- <h4 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.SUB-SECTIONS-TITLE' |
 		translate}}</h4>
-	<div *ngIf="dataModel.sections.length > 0" class="col-12">
-		<mat-expansion-panel *ngFor="let section of dataModel.sections; let i=index;" #panel>
+	<div *ngIf="form.get('sections')['controls'].length > 0" class="col-12">
+		<mat-expansion-panel *ngFor="let sectionFormGroup of form.get('sections')['controls']; let i=index;" #panel>
 			<mat-expansion-panel-header>
 				<mat-panel-title>{{i + 1}}. {{form.get('sections').get(''+i).get('title').value}}</mat-panel-title>
-				<div class="row deleteBtn">
+				<div class="row deleteBtn"> -->
 					<!-- <span class="col">{{i + 1}}. {{form.get('sections').get(''+i).get('title').value}}</span> -->
-					<button mat-icon-button type="button" class="deleteBtn col-auto" (click)="DeleteSectionInSection(i);" [disabled]="viewOnly">
+					<!-- <button mat-icon-button type="button" class="deleteBtn col-auto" (click)="DeleteSectionInSection(i);" [disabled]="viewOnly">
 						<mat-icon>delete</mat-icon>
 					</button>
 				</div>
 			</mat-expansion-panel-header>
 			<div id="{{indexPath + 's' + i}}" *ngIf="panel.expanded" class="row">
-				<app-dataset-profile-editor-section-component class="col-12" [form]="form.get('sections').get(''+i)" [dataModel]="section"
+				<app-dataset-profile-editor-section-component class="col-12" [form]="form.get('sections').get(''+i)"
 				 [indexPath]="indexPath + 's' + i" [viewOnly]="viewOnly"></app-dataset-profile-editor-section-component>
 			</div>
 		</mat-expansion-panel>
 	</div>
 	<div class="col-12"><button mat-button class="full-width" (click)="addSectioninSection()" [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.ACTIONS.ADD-SUB-SECTION'
-			| translate}}</button></div>
+			| translate}}</button></div> -->
 
 </div>
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.scss
index 02d304fc1..7645fb831 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.scss
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.scss
@@ -1,4 +1,6 @@
 .dataset-profile-editor {
+
+
 	.field-card {
 		margin-bottom: 1em;
 	}
@@ -6,3 +8,24 @@
 .deleteBtn{
 	margin-right:2em;
 }
+
+.heading {
+	text-align: left;
+	font-weight: 700;
+	font-size: 18px;
+	letter-spacing: 0px;
+	color: #212121;
+	opacity: 0.81;
+	// margin-top: 1.625rem;
+	margin-bottom: 0.625rem;
+}
+
+.hint {
+	text-align: left;
+	font-weight: 400;
+	font-size: 16px;
+	letter-spacing: 0px;
+	color: #212121;
+	opacity: 0.81;
+	margin-bottom: 0.125rem;
+}
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.ts
index 9f54487c6..4e6fac781 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormArray, FormGroup } from '@angular/forms';
 import { FieldEditorModel } from '@app/ui/admin/dataset-profile/admin/field-editor-model';
 import { FieldSetEditorModel } from '@app/ui/admin/dataset-profile/admin/field-set-editor-model';
@@ -15,45 +15,59 @@ import { takeUntil } from 'rxjs/operators';
 
 export class DatasetProfileEditorSectionComponent extends BaseComponent implements OnInit {
 	@Input() form: FormGroup;
-	@Input() dataModel: SectionEditorModel;
+	//@Input() dataModel: SectionEditorModel;
 	@Input() indexPath: string;
 	@Input() viewOnly: boolean;
+	@Output() fieldsetAdded = new EventEmitter<String>(); //returns the id of the fieldset added
 
 	constructor() { super(); }
 
 	ngOnInit() {
-		this.form.root.get('pages').valueChanges
-			.pipe(takeUntil(this._destroyed))
-			.subscribe(x =>
-				this.keepPageSelectionValid(x)
-			);
+
+		//TODO 
+		// this.form.root.get('pages').valueChanges
+		// 	.pipe(takeUntil(this._destroyed))
+		// 	.subscribe(x =>
+		// 		this.keepPageSelectionValid(x)
+		// 	);
 	}
 
 	addField() {
 		const fieldSet: FieldSetEditorModel = new FieldSetEditorModel();
+		fieldSet.ordinal = (this.form.get('fieldSets') as FormArray).length;
+
 		const field: FieldEditorModel = new FieldEditorModel();
 		field.id = Guid.create().toString();
+		field.ordinal = 0;//first field in fields
 		fieldSet.fields.push(field);
-		if (this.dataModel.fieldSets) {
+	//	if (this.dataModel.fieldSets) {
 			fieldSet.id = Guid.create().toString();
-			this.dataModel.fieldSets.push(fieldSet);
+			//this.dataModel.fieldSets.push(fieldSet);
+		//}
+		const fieldsetsArray = this.form.get('fieldSets') as FormArray;
+		fieldsetsArray.push(fieldSet.buildForm());
+
+		const fieldSetForm = fieldsetsArray.at(fieldsetsArray.length-1);
+		//emit id inserted
+		if(fieldSetForm){
+			const id: string = fieldSetForm.get('id').value;
+			this.fieldsetAdded.emit(id);
 		}
-		(<FormArray>this.form.get('fieldSets')).push(fieldSet.buildForm());
 	}
 
 	addSectioninSection() {
 		const section: SectionEditorModel = new SectionEditorModel();
-		this.dataModel.sections.push(section);
+		//this.dataModel.sections.push(section);
 		(<FormArray>this.form.get('sections')).push(section.buildForm());
 	}
 
 	DeleteSectionInSection(index) {
-		this.dataModel.sections.splice(index, 1);
+		//this.dataModel.sections.splice(index, 1);
 		(<FormArray>this.form.get('sections')).removeAt(index);
 	}
 
 	deleteFieldSet(index) {
-		this.dataModel.fieldSets.splice(index, 1);
+		//this.dataModel.fieldSets.splice(index, 1);
 		(<FormArray>this.form.get('fieldSets')).removeAt(index);
 	}
 
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/custom-validators/editor-custom-validators.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/custom-validators/editor-custom-validators.ts
new file mode 100644
index 000000000..f23d30d9f
--- /dev/null
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/custom-validators/editor-custom-validators.ts
@@ -0,0 +1,67 @@
+import { Inject, Injectable } from "@angular/core";
+import { AbstractControl, FormArray, ValidationErrors, ValidatorFn } from "@angular/forms";
+
+
+export class EditorCustomValidators{
+
+    static  atLeastOneElementListValidator(arrayToCheck): ValidatorFn{
+		return (control: AbstractControl): ValidationErrors | null=>{
+			
+			const fa = control.get(arrayToCheck) as FormArray;
+
+			if(!fa || fa.length  === 0){
+				return {[EditorCustomValidatorsEnum.emptyArray]: true};
+			}
+			return null;
+		}
+	}
+    static pagesHaveAtLeastOneSection(pagesArrayName:string,sectionsArrayName:string ): ValidatorFn{
+
+		return (control: AbstractControl): ValidationErrors | null=>{
+			
+			const pages = control.get(pagesArrayName) as FormArray;
+			const sections = control.get(sectionsArrayName) as FormArray;
+			
+
+			const pageIdsArray = pages.controls.map(page=>page.get('id').value);
+			const sectionsPageIds = sections.controls.map(section=> section.get('page').value);
+
+			let invalidMessage = null;
+
+			pageIdsArray.forEach(pageId=>{
+				if(!sectionsPageIds.includes(pageId)){
+					invalidMessage = {[EditorCustomValidatorsEnum.atLeastOneSectionInPage]:true};
+				}
+			})
+			
+			return invalidMessage;
+		}
+	}
+
+    static sectionHasAtLeastOneChildOf(fieldsetsArrayName, sectionsArrayName): ValidatorFn{
+
+		return (control: AbstractControl): ValidationErrors | null=>{
+			
+			const fieldsets = control.get(fieldsetsArrayName) as FormArray;
+			const sections = control.get(sectionsArrayName) as FormArray;
+			
+
+			if((fieldsets && fieldsets.length) || (sections && sections.length)){
+				return null;
+			}
+
+			return {[EditorCustomValidatorsEnum.sectionMustHaveOneChild] : true};
+		}
+	}
+
+	
+
+}
+
+
+
+export enum EditorCustomValidatorsEnum{
+	sectionMustHaveOneChild = "sectionMustHaveOneChild",
+	atLeastOneSectionInPage = 'atLeastOneSectionInPage',
+	emptyArray="emptyArray"
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor-model.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor-model.ts
index 700dd4ae7..f99b16318 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor-model.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor-model.ts
@@ -3,6 +3,7 @@ import { DatasetProfile } from '../../../../core/model/admin/dataset-profile/dat
 import { BaseFormModel } from '../../../../core/model/base-form-model';
 import { PageEditorModel } from '../admin/page-editor-model';
 import { SectionEditorModel } from '../admin/section-editor-model';
+import { EditorCustomValidators } from './custom-validators/editor-custom-validators';
 
 
 export class DatasetProfileEditorModel extends BaseFormModel {
@@ -48,6 +49,10 @@ export class DatasetProfileEditorModel extends BaseFormModel {
 			pagesFormArray.push(form);
 		});
 		formGroup.addControl('pages', this.formBuilder.array(pagesFormArray));
+
+		formGroup.setValidators([EditorCustomValidators.atLeastOneElementListValidator('pages'), EditorCustomValidators.pagesHaveAtLeastOneSection('pages','sections')]);
+		formGroup.updateValueAndValidity();
+
 		return formGroup;
 	}
 }
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
index c6d9198aa..52eeb2322 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
@@ -1,106 +1,487 @@
-<div class="main-content">
+<!-- View Only : {{viewOnly}} -->
+
+<div class="main-content">
 	<div class="container-fluid dataset-profile-editor" *ngIf="form" [formGroup]='form'>
-		<h3 *ngIf="isNew && !isClone && !isNewVersion">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE' | translate}}</h3>
-		<h3 *ngIf="isNew && isClone">
-			<span *ngIf="isClone">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-CLONE' | translate}}</span>
-			{{form.get('label').value}}
-		</h3>
-		<h3 *ngIf="isNew && isNewVersion">
-			<span *ngIf="isNewVersion">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-VERSION' | translate}}</span>
-			{{form.get('label').value}}
-		</h3>
 
-		<h3 *ngIf="!isNew">{{form.get('label').value}}</h3>
-		<mat-form-field class="full-width">
-			<input matInput formControlName="label" placeholder="{{'DATASET-PROFILE-EDITOR.FIELDS.DATASET-TITLE' | translate}}" required>
-			<mat-error *ngIf="form.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
-			</mat-error>
-		</mat-form-field>
+		
 
-		<mat-form-field class="full-width">
-			<input matInput formControlName="description" placeholder="{{'DATASET-PROFILE-EDITOR.FIELDS.DATASET-DESCRIPTION' | translate}}" required>
-			<mat-error *ngIf="form.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
-			</mat-error>
-		</mat-form-field>
 
-		<mat-form-field class="full-width">
-			<!-- <input matInput formControlName="description" placeholder="{{'DATASET-PROFILE-EDITOR.FIELDS.DATASET-DESCRIPTION' | translate}}" required> -->
-			<mat-select formControlName="language">
-				<mat-option *ngFor="let lang of getLanguageInfos()" [value]="lang.code">
-					{{ lang.name }}
-				</mat-option>
-			</mat-select>
-			<mat-error *ngIf="form.get('language').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
-			</mat-error>
-		</mat-form-field>
+		<!-- Total steps: {{stepper.steps.length}} -->
 
-		<div class="d-flex justify-content-end pb-3" *ngIf="form.get('status').value==1">
-			<button mat-raised-button color="primary" (click)="downloadXML();" type="button">{{ 'DATASET-WIZARD.ACTIONS.DOWNLOAD-XML' | translate }}</button>
-		</div>
-		<mat-horizontal-stepper [linear]="true" #stepper>
-			<mat-step>
-				<ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.PAGES.TITLE' | translate}}</ng-template>
-				<div class="row">
-					<app-dataset-profile-editor-page-component class="col-12" [form]="form.get('pages')" [viewOnly]="viewOnly"></app-dataset-profile-editor-page-component>
-					<div class="col-12">
-						<button mat-button class="full-width" (click)="addPage()" [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.ACTIONS.ADD-PAGE' | translate}}</button>
+		
+		<div class="row" style="padding: 2em; margin-bottom: 1em; background: #F5F5F5 0% 0% no-repeat padding-box;" >
+
+			<div class="col-12" style="margin-bottom: 2em;">
+				<h3 *ngIf="isNew && !isClone && !isNewVersion">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE' | translate}}</h3>
+				<h3 *ngIf="isNew && isClone">
+					<span *ngIf="isClone">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-CLONE' | translate}}</span>
+					{{form.get('label').value}}
+				</h3>
+				<h3 *ngIf="isNew && isNewVersion">
+					<span *ngIf="isNewVersion">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-VERSION' | translate}}</span>
+					{{form.get('label').value}}
+				</h3>
+
+				<h3 *ngIf="!isNew">{{form.get('label').value}}</h3>
+
+				<div class="d-flex justify-content-end pb-3" *ngIf="form.get('status').value==1">
+					<button mat-raised-button color="primary" (click)="downloadXML();" type="button">{{
+						'DATASET-WIZARD.ACTIONS.DOWNLOAD-XML' | translate }}</button>
+				</div>
+			</div>
+
+			<!-- Steps Navigation -->
+			<div class="col-12 d-flex" *ngIf="steps">
+				<div class="col-7 bg-white" style="overflow: hidden; padding: 0px" id="progress-container">
+					<div id="progress" [ngStyle]="progressStyle"></div>
+					<div class="row h-100">
+						<div class="col text-center align-self-center" *ngFor="let step of steps; index as idx">
+							<span (click)="stepper.selectedIndex=idx"
+							class="stepper-title-label"
+							[ngClass]="{'stepper-title-label-locked': !isStepUnlocked(idx),'stepper-title-label-completed':idx < stepper.selectedIndex} ">
+								<ng-container *ngIf="(step.completed &&(idx!=steps.length-1)) else numberLabel">
+									<mat-icon style="font-size:0.7em; height: 0px;">done</mat-icon>
+								</ng-container>
+								<ng-template #numberLabel>
+									{{idx+1}} 
+								</ng-template>
+								{{step.label}}
+							</span>
+						</div>
 					</div>
 				</div>
-			</mat-step>
-			<mat-step>
-				<ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.TITLE' | translate}}</ng-template>
+	
+				<div class="col d-flex justify-content-end">
+					<button [@previous_btn] mat-button class="navigate-btn" (click)="stepper.previous()" *ngIf="stepper.selectedIndex !=0">
+						<!-- <mat-icon>navigate_before</mat-icon>  -->
+						{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}} 
+					</button>
+					<button mat-button class="navigate-btn ml-3" 
+					[@next_btn]
+					(click)="validateStep(stepper.selectedIndex);stepper.next();" 
+					*ngIf="stepper.selectedIndex != (steps.length-1)"
+					[ngClass]="{'navigate-btn-disabled': !isStepCompleted(stepper.selectedIndex)}">
+	
+						<mat-icon style="font-size: 1.66em;">navigate_next</mat-icon>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}
+					</button>
+	
+	
+					<ng-container *ngIf="steps.length-1 === stepper.selectedIndex">
+					<!-- <ng-container *ngIf="stepper.selectedIndex === (steps.length-1)"> -->
+						<ng-container *ngIf="!viewOnly">
+							
+							<!-- <button mat-button class="navigate-btn ml-2"
+								(click)='onSubmit()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.SAVE' |
+								translate}}</button> -->
+							<!-- <button mat-button class="finalize-btn ml-2"
+								(click)='finalize()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |
+								translate}}</button> -->
+						</ng-container>
+	
+						<!-- //TODO -->
+						<ng-container *ngIf="true">
+							
+							<!-- <button mat-button class="navigate-btn ml-2"
+								(click)='onSubmit()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.SAVE' |
+								translate}}</button> -->
+							<!-- <button mat-button class="finalize-btn ml-2"
+								(click)='finalize()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |
+								translate}}</button> -->
+							<button [@finalize_btn] mat-button class="finalize-btn ml-3"
+								[disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |
+								translate}}</button>
+						
+						</ng-container>
+						<!-- SAVE BUTTON  WHEN FINALIZED-->
+	
+						<ng-container *ngIf="false">
+							<ng-container *ngIf="showUpdateButton()">
+								
+								<!-- <button mat-button class="navigate-btn ml-2"
+									(click)='checkFormValidation()'
+									[disabled]="form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.VALIDATE' | translate}}</button> -->
+								<button mat-button class="navigate-btn ml-2"
+									(click)='updateFinalized()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.UPDATE' |
+									translate}}</button>
+							</ng-container>
+						</ng-container>
+					</ng-container>
+	
+	
+				</div>
+
+			</div>
+		</div>
+
+		
+
+		
+		<mat-horizontal-stepper [linear]="true" #stepper class="stepper" (selectionChange)="onMatStepperSelectionChange($event)" style="padding-left: 8px; padding-right: 15px;">
+
+			<!-- IMPORTANT TO BE !INVALID (WHEN THE TEMPLATE IS FINALIZED THE CONTORLS ARE DISABLED) -->
+			<mat-step [label]="'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TITLE' | translate" [completed]="(!form.get('label').invalid && !form.get('description').invalid && !form.get('language').invalid)" >
+				<!-- <ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TITLE' | translate}}
+				</ng-template> -->
 				<div class="row">
-					<mat-accordion class="col-12" [multi]="true">
-						<mat-expansion-panel *ngFor="let section of dataModel.sections; let i=index;" #panel>
-							<mat-expansion-panel-header>
-								<mat-panel-title>{{i + 1}}. {{form.get('sections').get(''+i).get('title').value}}
-								</mat-panel-title>
-								<button mat-icon-button type="button" class="deleteBtn" (click)="DeleteSection(i);" [disabled]="viewOnly">
-									<mat-icon>delete</mat-icon>
-								</button>
-							</mat-expansion-panel-header>
-							<div id="{{'s' + i}}" class="row" *ngIf="panel.expanded">
-								<app-dataset-profile-editor-section-component class="col-12" [form]="form.get('sections').get(''+i)" [dataModel]="section" [indexPath]="'s' + i" [viewOnly]="viewOnly">
-								</app-dataset-profile-editor-section-component>
-							</div>
-						</mat-expansion-panel>
-					</mat-accordion>
 					<div class="col-12">
-						<button mat-button (click)="addSection()" class="full-width" [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.ACTIONS.ADD-SECTION' | translate}}</button>
+						<div class="heading">1.1 {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-NAME'| translate}} *</div>
+						<div class="hint">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-NAME-HINT'| translate}}</div>
+						<mat-form-field class="full-width basic-info-input">
+							<input matInput [formControl]="form.get('label')"
+								placeholder="{{'DATASET-PROFILE-EDITOR.FIELDS.DATASET-TITLE' | translate}}">
+							<mat-error *ngIf="form.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |
+								translate}}
+							</mat-error>
+						</mat-form-field>
 					</div>
+					<div class="col-12">
+						<div class="heading">1.2 {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION'| translate}} *</div>
+						<!-- <div class="hint">{{'DMP-EDITOR.MAIN-INFO.HINT' | translate}}</div> -->
+						<div class="hint">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-HINT'| translate}}</div>
+						<mat-form-field class="full-width basic-info-input">
+							<textarea matInput [formControl]="form.get('description')" cdkTextareaAutosize cdkAutosizeMinRows="4" cdkAutosizeMaxRows="5"
+								placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER'| translate}}">
+							</textarea>
+							<mat-error *ngIf="form.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED'
+								| translate}}
+							</mat-error>
+						</mat-form-field>
+					</div>
+
+					<div class="col-12">
+						<!-- <div class="heading">1.3 {{'DMP-EDITOR.FIELDS.LANGUAGE' | translate}}</div> -->
+						<div class="heading">1.3 {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-LANGUAGE'| translate}} *</div>
+						<mat-form-field class="full-width basic-info-input">
+							<!-- <input matInput formControlName="description" placeholder="{{'DATASET-PROFILE-EDITOR.FIELDS.DATASET-DESCRIPTION' | translate}}" required> -->
+							<mat-select [formControl]="form.get('language')" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-SELECT-LANGUAGE'| translate}}">
+								<mat-option *ngFor="let lang of getLanguageInfos()" [value]="lang.code">
+									{{ lang.name }}
+								</mat-option>
+							</mat-select>
+							<mat-error *ngIf="form.get('language').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |
+								translate}}
+							</mat-error>
+						</mat-form-field>
+					</div>
+
+					<!-- <div class="col-12">
+						<button mat-button class="full-width" (click)="addPage()"
+							[disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.ACTIONS.NEXT' | translate}}</button>
+					</div> -->
 				</div>
 			</mat-step>
 			<!-- <mat-step>
-				<ng-template matStepLabel>{{'DATASET-PROFILE.PREVIEW' | translate}}</ng-template>
-				<div *ngIf='this.isStepActive(2)'>
-					<app-dynamic-form *ngIf="dataWizardModel && previewerFormGroup" [form]="this.previewerFormGroup" [dataModel]="dataWizardModel"></app-dynamic-form>
+				<ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.PAGES.TITLE' | translate}}</ng-template>
+				<div class="row">
+					<app-dataset-profile-editor-page-component class="col-12" [form]="form.get('pages')"
+						[viewOnly]="viewOnly"></app-dataset-profile-editor-page-component>
+					<div class="col-12">
+						<button mat-button class="full-width" (click)="addPage()"
+							[disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.ACTIONS.ADD-PAGE' | translate}}</button>
+					</div>
 				</div>
 			</mat-step> -->
+			<mat-step [label]="'DATASET-PROFILE-EDITOR.STEPS.FORM.TITLE' | translate" [completed]="form.valid">
+				<!-- <ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.TITLE' | translate}}</ng-template> -->
+				<div class="row">
+
+					<!-- TABLE -->
+					<div class="col-3">
+
+
+						<div class="row sticky-top" style="top : 2em;">
+							<dataset-profile-table-of-contents class="toc-pane-container col" 
+								[links]="toCEntries"
+								(itemClick)="displayItem($event)"
+								(createEntry) = "addNewEntry($event)"
+								(removeEntry)="onRemoveEntry($event)"
+								[itemSelected]="selectedTocEntry"
+								[viewOnly]="viewOnly"
+								(dataNeedsRefresh)="onDataNeedsRefresh($event)"
+								[colorizeInvalid]="colorizeInvalid">
+							</dataset-profile-table-of-contents>
+
+						</div>
+					</div>
+
+
+					<!-- DISPLAYER -->
+					<div class="col ml-3">
+
+					<div class="row">
+
+						<div class="col">
+							<div class="row" *ngIf="selectedTocEntry">
+							
+								<!-- PAGE INFO -->
+								<div class="col-12 content-displayer" *ngIf="selectedTocEntry.type === tocEntryEnumValues.Page">
+									<form [formGroup]="selectedTocEntry.form" class="page-infos">
+										<div class="row">
+											<!-- PAGE NAME -->
+											<div class="col-12">
+												<div class="heading">{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME' | translate}} *</div>
+												<div class="hint">{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME-HINT' | translate}}</div>
+												<mat-form-field>
+													<input type="text" matInput formControlName="title" [placeholder]="('DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate) +' '+ ('DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.PAGE' |translate)">
+													<mat-error >{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+												</mat-form-field>
+											</div>
+											
+											<div class="col-12" *ngIf="!viewOnly && (!selectedTocEntry?.subEntries?.length)">
+												<button class="create-section-btn" (click)="addNewEntry({parent:selectedTocEntry, childType: tocEntryEnumValues.Section})">Create section</button>
+											</div>
+											<!-- PAGE ID -->
+											<!-- <div class="col">
+												<div class="heading">Page id *</div>
+												<mat-form-field>
+													<input type="text" matInput formControlName="id">
+												</mat-form-field>
+											</div> -->
+										</div>
+										<!-- <div class="row">
+											<div class="col">
+												<div class="heading">Ordinal *</div>
+												<mat-form-field>
+													<input type="text" matInput formControlName="ordinal">
+												</mat-form-field>
+											</div>
+										</div> -->
+									</form>
+								</div>
+	
+								<div class="col-12" *ngIf="(selectedTocEntry.type === tocEntryEnumValues.Section) || (selectedTocEntry.type === tocEntryEnumValues.FieldSet)" >
+									<app-dataset-profile-editor-section-fieldset-component
+										[tocentry]="selectedTocEntry"
+										[viewOnly]="viewOnly"
+										(addNewFieldSet)="addNewEntry({childType: tocEntryEnumValues.FieldSet,parent: {form: $event}})"
+										(removeFieldSet)="onRemoveEntry(_findTocEntryById($event, toCEntries))"
+										(cloneFieldSet)="cloneFieldSet($event)"
+										(selectedEntryId)="displayItem(_findTocEntryById($event, getTocEntries()))"
+										(dataNeedsRefresh)="onDataNeedsRefresh()"
+									>
+
+									</app-dataset-profile-editor-section-fieldset-component>
+								</div>
+								
+								
+							</div>
+	
+							<div class="content-displayer row justify-content-center" *ngIf="!numOfPages" style="min-height: 30em;">
+								<div class="col-auto align-self-center">
+									<div class="row w-100 justify-content-center">
+										<div class="col-auto">
+											{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.NOTHING-HERE-HINT'| translate}}
+										</div>
+									</div>
+									<div class="row justify-content-center">
+										<div class="col-auto d-flex aling-contents-center">
+											{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.START-CREATING-PAGE-START'| translate}}
+											
+											<mat-icon color="accent" style="font-size: 1.5em; text-align: center; width: 1.5em;">add</mat-icon>
+											<strong style="cursor: pointer;" (click)="addNewEntry({childType: tocEntryEnumValues.Page,parent: null})">
+													{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.START-CREATING-PAGE-END'| translate}}
+											</strong>
+										</div>
+									</div>
+								</div>
+							</div>
+	
+						</div>
+	
+	
+						<!-- TOOLBAR -->
+						<!-- <div class="col-auto" 
+						*ngIf="((selectedTocEntry?.type == tocEntryEnumValues.Section)||(selectedTocEntry?.type == tocEntryEnumValues.FieldSet) )&&(selectedTocEntry?.subEntriesType != tocEntryEnumValues.Section) && !viewOnly">
+							<div class="row" class="actions-list bg-white sticky-top" style="top: 2em;">
+								<nav *ngIf="!viewOnly">
+									<label class="action-list-label">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.GENERAL-TOOLS' | translate}}</label>
+									<ul class="list-unstyled">
+										<li *ngIf="selectedTocEntry.type === tocEntryEnumValues.FieldSet" class="mli">
+											<div class="action-list-item" (click)="addNewEntry({childType: tocEntryEnumValues.FieldSet,parent: {form: selectedTocEntry.form.parent.parent}})">
+												<img src="/assets/images/editor/icons/add_input_set.svg" class="input_icon" alt="Add Question icon">
+												<mat-icon class="action-list-icon">folder</mat-icon>
+												<span class="action-list-text" >{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
+											</div>
+										</li>
+										<li *ngIf="selectedTocEntry.type === tocEntryEnumValues.Section" class="mli">
+											<div class="action-list-item" (click)="addNewEntry({childType: tocEntryEnumValues.FieldSet,parent: selectedTocEntry})">
+												<mat-icon class="action-list-icon">folder</mat-icon>
+												<img src="/assets/images/editor/icons/add_input_set.svg" class="input_icon" alt="Add Question icon">
+												<span class="action-list-text" >{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
+											</div>
+										</li>
+
+
+										<li *ngIf="selectedTocEntry.type === tocEntryEnumValues.FieldSet" class="mli">
+											<div class="action-list-item" (click)="cloneFieldSet(selectedTocEntry.form)">
+												<mat-icon class="action-list-icon">file_copy</mat-icon>
+												<img src="/assets/images/editor/icons/clone.svg" class="input_icon" alt="Clone icon">
+												<span class="action-list-text">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.CLONE' | translate}}</span>
+											</div>
+										</li>
+										
+										<li *ngIf="selectedTocEntry.type === tocEntryEnumValues.FieldSet" class="mli">
+											<div class="action-list-item" (click)="onRemoveEntry(selectedTocEntry)">
+												<mat-icon class="action-list-icon">delete</mat-icon>
+												<span class="action-list-text">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.DELETE' | translate}}</span>
+											</div>
+										</li>
+									</ul>
+								</nav> -->
+									
+									<!-- <ng-container *ngIf="!viewOnly">
+										<h3 matSubheader>{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.GENERAL-TOOLS' | translate}}</h3>
+										<mat-list-item *ngIf="selectedTocEntry.type === tocEntryEnumValues.FieldSet" class="mli">
+											<div class="action-list-item">
+												<mat-icon class="action-list-icon">folder</mat-icon>
+												<span class="action-list-text" (click)="addNewEntry({childType: tocEntryEnumValues.FieldSet,parent: {form: selectedTocEntry.form.parent.parent}})" >{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
+											</div>
+										</mat-list-item>
+										<mat-list-item *ngIf="selectedTocEntry.type === tocEntryEnumValues.Section" class="mli">
+											<div class="action-list-item">
+												<mat-icon class="action-list-icon">folder</mat-icon>
+												<span class="action-list-text" (click)="addNewEntry({childType: tocEntryEnumValues.FieldSet,parent: selectedTocEntry})" >{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
+											</div>
+										</mat-list-item>
+
+
+										<mat-list-item *ngIf="selectedTocEntry.type === tocEntryEnumValues.FieldSet" class="mli">
+											<div class="action-list-item">
+												<mat-icon class="action-list-icon">file_copy</mat-icon>
+												<span class="action-list-text" (click)="cloneFieldSet(selectedTocEntry.form)">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.CLONE' | translate}}</span>
+											</div>
+										</mat-list-item>
+										
+										<mat-list-item *ngIf="selectedTocEntry.type === tocEntryEnumValues.FieldSet" class="mli">
+											<div class="action-list-item">
+												<mat-icon class="action-list-icon">delete</mat-icon>
+												<span class="action-list-text" (click)="onRemoveEntry(selectedTocEntry)">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.DELETE' | translate}}</span>
+											</div>
+										</mat-list-item>
+									</ng-container> -->
+								
+							<!-- </div>
+						</div> -->
+					</div>						
+
+						<!-- 
+						<mat-accordion class="col-12" [multi]="true">
+							<mat-expansion-panel *ngFor="let section of dataModel.sections; let i=index;" #panel>
+								<mat-expansion-panel-header>
+									<mat-panel-title class="toc-page-header">{{i + 1}}. {{form.get('sections').get(''+i).get('title').value}}
+									</mat-panel-title>
+									<button mat-icon-button type="button" class="deleteBtn" (click)="DeleteSection(i);"
+										[disabled]="viewOnly">
+										<mat-icon>delete</mat-icon>
+									</button>
+								</mat-expansion-panel-header>
+								<div id="{{'s' + i}}" class="row" *ngIf="panel.expanded">
+									<app-dataset-profile-editor-section-component class="col-12"
+										[form]="form.get('sections').get(''+i)" [dataModel]="section"
+										[indexPath]="'s' + i" [viewOnly]="viewOnly">
+									</app-dataset-profile-editor-section-component>
+								</div>
+							</mat-expansion-panel>
+						</mat-accordion> -->
+					</div>
+
+					<!-- <div class="col-12">
+						<button mat-button (click)="addSection()" class="full-width"
+							[disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.ACTIONS.ADD-SECTION' | translate}}</button>
+					</div> -->
+				</div>
+			</mat-step>
+			<mat-step [label]="'DATASET-PROFILE-EDITOR.ACTIONS.PREVIEW-AND-FINALIZE' | translate">
+				<!-- {{'DATASET-PROFILE-EDITOR.ACTIONS.PREVIEW-AND-FINALIZE' | translate}} -->
+				<!-- <button (click)="generatePreviewForm()">foo</button> -->
+				<ng-container *ngIf="formGroup">
+
+					<app-final-preview-component [formGroup]="formGroup" [visibilityRules]="visibilityRules">
+
+					</app-final-preview-component>
+
+<!-- 
+
+					<app-dataset-description [form]="formGroup" [visibilityRules]="visibilityRules" *ngIf="formGroup">
+	
+					</app-dataset-description> -->
+				</ng-container>
+			</mat-step>
+
 		</mat-horizontal-stepper>
-		<div class="d-flex">
-			<!-- SAVE BUTTON -->
-			<div class="col-6 d-flex" *ngIf="!viewOnly">
-				<div class="row mt-4">
-					<button mat-raised-button class="col-auto mr-2" color="primary" type="button col-auto" (click)='checkFormValidation()' [disabled]="form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.VALIDATE' | translate}}</button>
-					<button mat-raised-button class="col-auto mr-2" color="primary" type="button col-auto" (click)='onSubmit()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.SAVE' | translate}}</button>
-					<button mat-raised-button class="col-auto" color="primary" type="button col-auto" (click)='finalize()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' | translate}}</button>
+		
+
+
+		<ng-container *ngIf="true">
+
+			<div class="d-flex">
+				<!-- SAVE BUTTON -->
+				<div class="col-6 d-flex" *ngIf="!viewOnly">
+					<div class="row mt-4">
+						<ng-container *ngIf="false">
+							<button mat-raised-button class="col-auto mr-2" color="primary" type="button col-auto"
+								(click)='checkFormValidation()'
+								[disabled]="form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.VALIDATE' | translate}}</button>
+						</ng-container>
+
+
+						
+						<button mat-raised-button class="col-auto mr-2" color="primary" type="button col-auto"
+							(click)='onSubmit()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.SAVE' |
+							translate}}</button>
+						<button mat-raised-button class="col-auto" color="primary" type="button col-auto"
+							(click)='finalize()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |
+							translate}}</button>
+					</div>
+				</div>
+				<!-- SAVE BUTTON  WHEN FINALIZED-->
+				<div class="col-6 d-flex" *ngIf="showUpdateButton()">
+					<div class="row mt-4">
+						<ng-container *ngIf="false">
+							<button mat-raised-button class="col-auto mr-2" color="primary" type="button col-auto"
+								(click)='checkFormValidation()'
+								[disabled]="form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.VALIDATE' | translate}}</button>
+						</ng-container>
+						<button mat-raised-button class="col-auto mr-2" color="primary" type="button col-auto"
+							(click)='updateFinalized()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.UPDATE' |
+							translate}}</button>
+					</div>
+				</div>
+				<!-- DELETE BUTTON -->
+				<div class="col-6 d-flex justify-content-end" *ngIf="!isNew">
+					<div class="row mt-4">
+						<button mat-raised-button color="primary" (click)="delete()">
+							<mat-icon>delete</mat-icon>{{'DATASET-PROFILE-EDITOR.ACTIONS.DELETE' | translate}}
+						</button>
+					</div>
 				</div>
 			</div>
-			<!-- SAVE BUTTON  WHEN FINALIZED-->
-			<div class="col-6 d-flex" *ngIf="showUpdateButton()">
-				<div class="row mt-4">
-					<button mat-raised-button class="col-auto mr-2" color="primary" type="button col-auto" (click)='checkFormValidation()' [disabled]="form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.VALIDATE' | translate}}</button>
-					<button mat-raised-button class="col-auto mr-2" color="primary" type="button col-auto" (click)='updateFinalized()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.UPDATE' | translate}}</button>
-				</div>
-			</div>
-			<!-- DELETE BUTTON -->
-			<div class="col-6 d-flex justify-content-end" *ngIf="!isNew">
-				<div class="row mt-4">
-					<button mat-raised-button color="primary" (click)="delete()">
-						<mat-icon>delete</mat-icon>{{'DATASET-PROFILE-EDITOR.ACTIONS.DELETE' | translate}}
-					</button>
-				</div>
-			</div>
-		</div>
+
+		</ng-container>
+
+		<!-- <div class="row">
+			<button (click)="printForm()">
+				console form
+			</button>
+		</div> -->
+
+		<!-- <div *ngIf="form">{{form.value | json}}</div>
+
+		<br> -->
+		<!-- <br>
+		<div class="row">
+			{{form.controls?.sections.value |json}}
+		</div> -->
+
+		<!-- {{form.value | json}} -->
+		<!-- <div class="row">
+
+			<button (click)="printMyErrors()">
+				print errors
+			</button>
+		</div> -->
+		<!-- <div class="row"> 
+			<button (click)="foo()">foo</button>
+		</div> -->
 	</div>
-</div>
+</div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss
index 5121e378f..c66aa6f9e 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss
@@ -9,3 +9,222 @@
 .deleteBtn{
 	margin-right:2em;
 }
+
+
+
+// REFACTORED CSS
+
+.stepper{
+	background-color: transparent;
+	min-height: 500px;
+}
+.content-displayer{
+	background-color: #fff;
+	border-radius: 7px;
+	box-shadow: 0px 1px 2px #bfbfbf;
+	padding: 0em;
+	// padding-top: 0em;
+	overflow: visible;
+	// min-height: 30em;
+}
+
+.heading {
+	text-align: left;
+	font-weight: 700;
+	font-size: 18px;
+	letter-spacing: 0px;
+	color: #212121;
+	opacity: 0.81;
+	// margin-top: 1.625rem;
+	margin-bottom: 0.625rem;
+}
+
+.hint {
+	text-align: left;
+	font-weight: 400;
+	font-size: 16px;
+	letter-spacing: 0px;
+	color: #212121;
+	opacity: 0.81;
+	margin-bottom: 0.125rem;
+}
+
+//TO CHECK
+:host ::ng-deep .mat-horizontal-content-container {
+    overflow: visible;
+	// padding: 0px;
+}
+:host ::ng-deep .mat-form-field-outline{
+    background-color: #ffffff4f;
+}
+
+:host ::ng-deep .mat-horizontal-stepper-header-container {
+	display: none !important;
+}
+
+#progress{
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	clip-path: polygon(0 0, 0 0, 0 0, 0 0);
+	transition-property: clip-path;
+	transition-duration: 600ms;
+	transition-timing-function: ease-out;
+	transition-delay: 50ms;
+	box-shadow: 0px 1px 2px #bfbfbf;
+	background-color: #F7DD72;
+}
+#progress-container{
+	box-shadow: 1px 1px 6px #00000029;;
+	// border-radius: .3em;
+}
+// .import-btn {
+// 	background: #ffffff 0% 0% no-repeat padding-box;
+// 	border-radius: 30px;
+// 	// color: #129d99;
+// 	// border: 1px solid #129d99;
+// 	padding-left: 2em;
+// 	padding-right: 2em;
+// 	color: #000;
+// 	border: 1px solid #000;
+//   }
+.navigate-btn {
+	border-radius: 30px;
+	background-color: #f7dd72;
+	border: 1px solid transparent;
+	padding-left: 2em;
+	padding-right: 2em;
+	box-shadow: 0px 3px 6px #1E202029;
+
+	transition-property: background-color, color;
+	transition-duration: 200ms;
+	transition-delay: 50ms;
+	transition-timing-function: ease-in-out;
+}
+.navigate-btn-disabled{
+background-color: #CBCBCB;
+color: #FFF;
+}
+
+.create-section-btn {
+	border-radius: 30px;
+	background-color: #f7dd72;
+	border: 1px solid transparent;
+	padding-left: 1em;
+	padding-right: 1em;
+	box-shadow: 0px 3px 6px #1E202029;
+	line-height: 1.7em;
+}
+
+
+$blue-color : #129D99;
+$blue-color-light: #5cf7f2;
+
+.finalize-btn {
+	border-radius: 30px;
+	border: 1px solid #129D99;
+	background: transparent;
+	padding-left: 2em;
+	padding-right: 2em;
+	box-shadow: 0px 3px 6px #1E202029;
+	color: #129D99;
+}
+
+
+
+
+.stepper-title-label{
+	cursor: pointer;
+	transition-property: color, opacity;
+	transition-duration: 200ms;
+	transition-delay: 50ms;
+	transition-timing-function: ease-in-out;
+	color: #212121;
+	font-size: 0.9em;
+}
+
+.stepper-title-label-locked{
+	color: #DEDEDE;
+}
+
+.stepper-title-label-completed{
+	opacity: 0.5;
+}
+.page-infos{
+	padding: 2em;
+}
+.mat-subheader{
+	padding: 0px;
+}
+
+//for the acitons list toolbar
+// .mat-list-item.mat-list-item-with-avatar{
+// 	padding-left: 0em;
+// }
+
+
+.actions-list{
+	//   border: 1px solid $blue-color;
+	box-shadow: 0px 3px 12px #129D9999;
+	border-radius: 4px;
+	// padding-top: 1rem;
+	padding: 1em 0.9em;
+	min-width: 166px;
+
+	.mat-list-item-content{
+		padding: 0px;
+	}
+	
+	
+	.action-list-item{
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+	
+	
+		.action-list-icon{
+			font-size: 1.2em;
+			// padding-right: 1em;
+			width: 14px;
+			margin-right: 0.5em;
+			margin-left: -.09em;
+			height: auto;
+			color: #129D99;;
+		}
+		.input_icon{
+			width: 14px;
+			margin-right: .5em;
+		}
+		.action-list-text{
+			font-size: 0.9em;
+		}
+	}
+	.action-list-label{
+	 color: #212121;
+	 font-size: small;
+	 opacity: 0.6;
+	}
+	.list-unstyled{
+		margin-bottom: 0.2rem;
+	}
+}
+
+
+// .mli{
+// 	height: auto;
+// }
+
+
+:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
+	background: #fafafa !important;
+}
+
+:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
+	font-size: 1rem;
+	padding: 0.6em 0 1em 0 !important;
+}
+
+.basic-info-input{
+	margin-top: 2em;
+	margin-bottom: 2em;
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts
index d30180f76..29a0917c8 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts
@@ -1,10 +1,10 @@
 
 import { of as observableOf, Observable } from 'rxjs';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { FormArray, FormControl, FormGroup } from '@angular/forms';
+import { AfterViewInit, Component, OnChanges, OnInit, QueryList, SimpleChanges, ViewChild } from '@angular/core';
+import { AbstractControl, Form, FormArray, FormBuilder, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
-import { MatHorizontalStepper } from '@angular/material/stepper';
+import { MatHorizontalStepper, MatStep } from '@angular/material/stepper';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { map, takeUntil } from 'rxjs/operators';
@@ -26,13 +26,35 @@ import { LanguageInfo } from '@app/core/model/language-info';
 import { LanguageInfoService } from '@app/core/services/culture/language-info-service';
 import { FormValidationErrorsDialogComponent } from '@common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component';
 import { MatomoService } from '@app/core/services/matomo/matomo-service';
+import { Link, LinkToScroll } from '@app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents';
+import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service';
+import { DatasetWizardEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model';
+import { NewEntryType, ToCEntry, ToCEntryType } from '../table-of-contents/table-of-contents-entry';
+import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
+import { FieldSetEditorModel } from '../admin/field-set-editor-model';
+import { Guid } from '@common/types/guid';
+import { FieldEditorModel } from '../admin/field-editor-model';
+import { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service';
+import { CdkStep, StepperSelectionEvent } from '@angular/cdk/stepper';
+import { DatasetDescriptionCompositeFieldEditorModel, DatasetDescriptionFieldEditorModel, DatasetDescriptionFormEditorModel, DatasetDescriptionPageEditorModel, DatasetDescriptionSectionEditorModel } from '@app/ui/misc/dataset-description-form/dataset-description-form.model';
+import { Rule } from '@app/core/model/dataset-profile-definition/rule';
+import { DatasetProfileFieldViewStyle } from '@app/core/common/enum/dataset-profile-field-view-style';
+import { invalid } from '@angular/compiler/src/render3/view/util';
+import { SideNavService } from '@app/core/services/sidenav/side-nav.sevice';
+import { EditorCustomValidators, EditorCustomValidatorsEnum } from './custom-validators/editor-custom-validators';
+import { CustomErrorValidator } from '@common/forms/validation/custom-validator';
+import { STEPPER_ANIMATIONS } from './animations/animations';
+import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profile-combo-box-type';
+
 
 const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.json');
 
 @Component({
 	selector: 'app-dataset-profile-editor-component',
 	templateUrl: './dataset-profile-editor.component.html',
-	styleUrls: ['./dataset-profile-editor.component.scss']
+	styleUrls: ['./dataset-profile-editor.component.scss'],
+	animations:[...STEPPER_ANIMATIONS],
+	providers:[VisibilityRulesService]
 })
 export class DatasetProfileEditorComponent extends BaseComponent implements OnInit {
 
@@ -52,6 +74,17 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 	nestedCount: number[] = [];
 	nestedIndex: number = 0;
 	errorMessages: string[] = [];
+	tocEntryEnumValues = ToCEntryType;
+
+	colorizeInvalid:boolean = false;
+
+
+	// customEditorValidators = new EditorCustomValidators();
+
+	// sectionIdPreviewed:string = null;
+	// currentSubForm:FormGroup = null;
+	// currentSectionIndex: number = null;
+	// currentSectionEditorModel: SectionEditorModel = null;
 
 	constructor(
 		private datasetProfileService: DatasetProfileService,
@@ -63,14 +96,24 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 		private dialog: MatDialog,
 		private languageInfoService: LanguageInfoService,
 		private httpClient: HttpClient,
-		private matomoService: MatomoService
+		private matomoService: MatomoService,
+		private enumUtils: EnumUtils,
+		private datasetWizardService: DatasetWizardService,
+		private visibilityRulesService: VisibilityRulesService,
+		private fb: FormBuilder,
+		private sidenavService: SideNavService
 	) {
 		super();
 		// this.profileID = route.snapshot.params['id'];
 		// this.cloneId = route.snapshot.params['cloneid'];
 	}
 
+	ngOnDestroy(){
+		this.sidenavService.setStatus(true);
+	}
+
 	ngOnInit() {
+		this.sidenavService.setStatus(false);
 		this.matomoService.trackPageView('Admin: Dataset Profile Edit');
 		this.route.paramMap.pipe(takeUntil(this._destroyed)).subscribe((paramMap: ParamMap) => {
 			this.datasetProfileId = paramMap.get('id');
@@ -150,20 +193,48 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 			} else {
 				this.dataModel = new DatasetProfileEditorModel();
 				this.form = this.dataModel.buildForm();
+				// this.form.setValidators([EditorCustomValidators.atLeastOneElementListValidator('pages'), EditorCustomValidators.pagesHaveAtLeastOneSection('pages', 'sections')]);
+				
 				if (this.dataModel.status === DatasetProfileEnum.FINALIZED) {
 					this.form.disable();
 					this.viewOnly = true;
 				}
-				this.addSection();
-				this.addPage();
+				// this.addSection();
+				// this.addPage();
+				this.visibilityRulesService.buildVisibilityRules([],this.form);
+				setTimeout(() => {
+					this.steps = this.stepper.steps;	
+				});
+				this._initializeToCEntries();				
+
 			}
 		});
+		
+
 	}
 
+	private _initializeToCEntries(){
+		const tocentries = this.refreshToCEntries();//tocentries are sorted based on their ordinal value
+
+		this._updateOrdinals(tocentries);
+
+		if(tocentries && tocentries.length){
+			this.selectedTocEntry = tocentries[0];
+		}
+		// this._initializeFormValidity(tocentries);
+
+
+	}
+	
+
 	prepareForm() {
+		this.visibilityRulesService.buildVisibilityRules([],this.form);
+		// this.form.setValidators([EditorCustomValidators.atLeastOneElementListValidator('pages'),EditorCustomValidators.pagesHaveAtLeastOneSection('pages', 'sections')]);
+		// this.form.updateValueAndValidity();
 		this.form.valueChanges
 			.pipe(takeUntil(this._destroyed))
 			.subscribe(change => {
+
 				// this.datasetProfileService.preview(this.form.value)
 				// 	.pipe(takeUntil(this._destroyed))
 				// 	.subscribe(dataset => {
@@ -173,7 +244,11 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 				// 		this.previewerFormGroup = <FormGroup>this.dataWizardModel.buildForm().get('datasetProfileDefinition');
 				// 	});
 			});
-		this.form.updateValueAndValidity();
+		setTimeout(() => {
+			this.steps = this.stepper.steps;	
+		});
+		this._initializeToCEntries();
+
 	}
 
 	onIsMultiplicityEnabledChange(isMultiplicityEnabled: boolean) {
@@ -183,31 +258,33 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 		}
 	}
 
-	addSection() {
-		const section: SectionEditorModel = new SectionEditorModel();
-		this.dataModel.sections.push(section);
-		(<FormArray>this.form.get('sections')).push(section.buildForm());
-	}
+	// addSection() {
+	// 	const section: SectionEditorModel = new SectionEditorModel();
+	// 	this.dataModel.sections.push(section);
+	// 	(<FormArray>this.form.get('sections')).push(section.buildForm());
+	// }
 
-	addPage() {
-		const page: PageEditorModel = new PageEditorModel(this.dataModel.pages.length);
-		this.dataModel.pages.push(page);
-		(<FormArray>this.form.get('pages')).push(page.buildForm());
-	}
+	// addPage() {
+	// 	const page: PageEditorModel = new PageEditorModel(this.dataModel.pages.length);
+	// 	this.dataModel.pages.push(page);
+	// 	(<FormArray>this.form.get('pages')).push(page.buildForm());
+	// }
 
-	DeleteSection(index) {
-		this.dataModel.sections.splice(index, 1);
-		(<FormArray>this.form.get('sections')).removeAt(index);
-	}
+	// DeleteSection(index) {
+	// 	this.dataModel.sections.splice(index, 1);
+	// 	(<FormArray>this.form.get('sections')).removeAt(index);
+	// }
 
 	onSubmit() {
 		let data = this.form.value;
+
 		if (this.datasetProfileId) {
 			this.datasetProfileService.updateForm(this.datasetProfileId, data)
 				.pipe(takeUntil(this._destroyed))
 				.subscribe(() => {
 					this.router.navigate(['/dataset-profiles']);
-				});
+					this.uiNotificationService.snackBarNotification(this.language.instant('DATASET-PROFILE-EDITOR.FEEDBACK-MESSAGES.SAVE-SUCCESS'), SnackBarNotificationLevel.Success);
+				},error=> this.onCallbackError(error));
 		} else if (this.newVersionId) {
 			data.label = this.form.get('label').value;
 			data.description = this.form.get('description').value;
@@ -215,17 +292,21 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 				.pipe(takeUntil(this._destroyed))
 				.subscribe(() => {
 					this.router.navigate(['/dataset-profiles']);
+					this.uiNotificationService.snackBarNotification(this.language.instant('DATASET-PROFILE-EDITOR.FEEDBACK-MESSAGES.SAVE-SUCCESS'), SnackBarNotificationLevel.Success);
 				},
 					error => this.onCallbackErrorNewVersion(error)
 				);
 		} else {
-			this.form.get('status').setValue(DatasetStatus.Draft);
+			if(this.form.get('status').value != DatasetStatus.Finalized){// forn created and finalized instantly
+				this.form.get('status').setValue(DatasetStatus.Draft);
+			}
 			data = this.form.value;
 			this.datasetProfileService.createForm(data)
 				.pipe(takeUntil(this._destroyed))
 				.subscribe(() => {
 					this.router.navigate(['/dataset-profiles']);
-				});
+					this.uiNotificationService.snackBarNotification(this.language.instant('DATASET-PROFILE-EDITOR.FEEDBACK-MESSAGES.SAVE-SUCCESS'), SnackBarNotificationLevel.Success);
+				}, error=> this.onCallbackError(error));
 		}
 	}
 
@@ -241,21 +322,22 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 			.pipe(takeUntil(this._destroyed))
 			.subscribe(() => {
 				this.router.navigate(['/dataset-profiles']);
-			});
+				this.uiNotificationService.snackBarNotification(this.language.instant('DATASET-PROFILE-EDITOR.FEEDBACK-MESSAGES.SAVE-SUCCESS'), SnackBarNotificationLevel.Success)
+			},error=>this.onCallbackError(error));
 	}
 
 	showUpdateButton() {
 		return !this.isNew && this.dataModel.status === DatasetProfileEnum.FINALIZED;
 	}
 
-	isStepActive(step: number) {
-		return this.stepper && this.stepper.selectedIndex === step;
-	}
+	// isStepActive(step: number) {
+	// 	return this.stepper && this.stepper.selectedIndex === step;
+	// }
 
-	onCallbackSuccess(): void {
-		this.uiNotificationService.snackBarNotification(this.isNew ? this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-CREATION') : this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
-		this.router.navigate(['/master-items']);
-	}
+	// onCallbackSuccess(): void {
+	// 	this.uiNotificationService.snackBarNotification(this.isNew ? this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-CREATION') : this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
+	// 	this.router.navigate(['/master-items']);
+	// }
 
 	onCallbackErrorNewVersion(errorResponse: HttpErrorResponse) {
 		this.uiNotificationService.snackBarNotification(errorResponse.error.message, SnackBarNotificationLevel.Error);
@@ -341,66 +423,1412 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 	}
 
 	checkFormValidation() {
-		if (!this.form.valid) {
-			this.nestedIndex = -1;
-			this.form.markAllAsTouched();
-			this.printErrors(this.form);
-			this.showValidationErrorsDialog();
-			this.nestedCount = [];
-			this.nestedIndex = 0;
-			this.errorMessages = [];
-		}
+		this.colorizeInvalid = true;
+		this.printMyErrors(this.form);
+
+
+		// if (!this.form.valid) {
+		// 	this.nestedIndex = -1;
+		// 	this.form.markAllAsTouched();
+		// 	this.printErrors(this.form);
+		// 	this.showValidationErrorsDialog();
+		// 	this.nestedCount = [];
+		// 	this.nestedIndex = 0;
+		// 	this.errorMessages = [];
+		// }
 	}
 
-	printErrors(rootform: FormGroup) {
-		if (!rootform.valid) {
-			Object.keys(rootform.controls).forEach(key => {
-				const errors = rootform.get(key).errors;
-				if (errors !== null) {
-					let numbering: string = '';
-					for (let j = 0; j < this.nestedCount.length; j++) {
-						numbering += this.nestedCount[j];
-						if (j < this.nestedIndex) {
-							numbering += '.';
-						} else {
+
+	//BEFORE REDESIGN
+	// printErrors(rootform: FormGroup) {
+	// 	if (!rootform.valid) {
+	// 		Object.keys(rootform.controls).forEach(key => {
+	// 			const errors = rootform.get(key).errors;
+	// 			if (errors !== null) {
+	// 				let numbering: string = '';
+	// 				for (let j = 0; j < this.nestedCount.length; j++) {
+	// 					numbering += this.nestedCount[j];
+	// 					if (j < this.nestedIndex) {
+	// 						numbering += '.';
+	// 					} else {
+	// 						break;
+	// 					}
+	// 				}
+	// 				Object.keys(errors).forEach(keyError => {
+	// 					if (typeof errors[keyError] === 'boolean') {
+	// 						this.errorMessages.push(numbering + ' ' + key + ' is ' + keyError);
+	// 					} else {
+	// 						this.errorMessages.push(numbering + ' ' + key + ': ' + keyError + ': ' + JSON.stringify(errors[keyError]));
+	// 					}
+	// 				});
+	// 			} else {
+	// 				if (rootform.get(key) instanceof FormGroup) {
+	// 					this.printErrors(<FormGroup>rootform.get(key));
+	// 				} else if (rootform.get(key) instanceof FormArray) {
+	// 					this.nestedIndex++;
+	// 					this.nestedCount[this.nestedIndex] = 0;
+	// 					for (let childForm of (<FormArray>rootform.get(key)).controls) {
+	// 						this.nestedCount[this.nestedIndex]++;
+	// 						this.printErrors(<any>childForm);
+	// 					}
+	// 					this.nestedCount[this.nestedIndex] = 0;
+	// 					this.nestedIndex--;
+
+	// 				}
+	// 			}
+	// 		});
+	// 	}
+	// }
+
+	// private showValidationErrorsDialog(projectOnly?: boolean) {
+	// 	const dialogRef = this.dialog.open(FormValidationErrorsDialogComponent, {
+	// 		disableClose: true,
+	// 		autoFocus: false,
+	// 		restoreFocus: false,
+	// 		data: {
+	// 			errorMessages: this.errorMessages,
+	// 			projectOnly: projectOnly
+	// 		},
+	// 	});
+	// }
+
+
+
+
+
+
+	// links: Link[] = [];
+
+	// getLinks(currentLinks: Link[]) {
+	// 	this.links = currentLinks;
+	// }
+
+
+	datasetWizardModel: DatasetWizardEditorModel;
+	formGroup: FormGroup;
+	getPreview() {
+		let data = this.form.getRawValue();
+		this.datasetProfileService.preview(data).subscribe(x => {
+			this.datasetWizardModel = new DatasetWizardEditorModel().fromModel({
+				datasetProfileDefinition: x
+			});
+			this.updateVisibilityRules();
+			this.formGroup = <FormGroup>this.datasetWizardModel.buildForm().get('datasetProfileDefinition');
+		});
+		//this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
+
+		//this.editMode = this.datasetWizardModel.status === DatasetStatus.Draft;
+		// if (this.datasetWizardModel.status === DatasetStatus.Finalized) {
+		// 	this.formGroup.disable();
+		// 	this.viewOnly = true;
+		// }
+		//if (this.viewOnly) { this.formGroup.disable(); } // For future use, to make Dataset edit like DMP.
+		// this.registerFormListeners();
+		// this.dmpValueChanged(null);
+		// this.breadCrumbs = observableOf([
+		// 	{
+		// 		parentComponentName: null,
+		// 		label: this.language.instant('DATASET-LISTING.ACTIONS.CREATE-NEW').toUpperCase(),
+		// 		url: '/datasets/new/'
+		// 	}]);
+
+
+
+		// this.datasetWizardService.updateDatasetProfile(this.profileUpdateId)
+		// 		.pipe(takeUntil(this._destroyed))
+		// 		.subscribe(data => {
+		// 			this.datasetWizardModel = new DatasetWizardEditorModel().fromModel(data);
+		// 			this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
+
+		// 			this.needsUpdate();
+		// 			this.breadCrumbs = observableOf([
+		// 				{
+		// 					parentComponentName: null,
+		// 					label: this.language.instant('NAV-BAR.MY-DATASET-DESCRIPTIONS'),
+		// 					url: '/datasets',
+		// 					notFoundResolver: [
+		// 						// {
+		// 						// 	parentComponentName: null,
+		// 						// 	label: this.datasetWizardModel.dmp.grant.label,
+		// 						// 	url: '/grants/edit/' + this.datasetWizardModel.dmp.grant.id
+		// 						// },
+		// 						{
+		// 							parentComponentName: null,
+		// 							label: this.datasetWizardModel.dmp.label,
+		// 							url: '/plans/edit/' + this.datasetWizardModel.dmp.id,
+		// 						},
+		// 					]
+		// 				}]);
+		// 			this.formGroup = this.datasetWizardModel.buildForm();
+		// 			this.editMode = this.datasetWizardModel.status === DatasetStatus.Draft;
+		// 			if (this.datasetWizardModel.status === DatasetStatus.Finalized) {
+		// 				this.formGroup.disable();
+		// 				this.viewOnly = true;
+		// 			}
+		// 			// if (this.viewOnly) { this.formGroup.disable(); } // For future use, to make Dataset edit like DMP.
+		// 			this.loadDatasetProfiles();
+		// 		});
+	}
+
+	private refreshToCEntries(): ToCEntry[]{
+		this.toCEntries = this.getTocEntries();
+		//update selected tocentry
+		if(this.selectedTocEntry){
+			this.selectedTocEntry = this._findTocEntryById(this.selectedTocEntry.id, this.toCEntries);
+		}
+		// this.updateOrdinals(this.toCEntries);
+		// this._updateNumbering(this.toCEntries);
+		return this.toCEntries;
+	}
+
+	/**
+	 * 	Updates entries ordinal form value 
+	 * based on the index they have on the tocentry array.
+	 * Tocentries that are on the same level have distinct ordinal value
+	 * 
+	 * @param tocentries 
+	 * 
+	 */
+	private _updateOrdinals(tocentries: ToCEntry[]){
+
+		if(!tocentries || !tocentries.length) return;
+		tocentries.forEach((e,idx)=>{
+			const ordinalControl = e.form.get('ordinal');
+			if(ordinalControl){
+				ordinalControl.setValue(idx);
+				ordinalControl.updateValueAndValidity();
+			}
+			this._updateOrdinals(e.subEntries);
+		});
+	}
+
+	//sort tocentries based on their ordinality
+	private _sortToCentries(entries: ToCEntry[]){
+		if(!entries || !entries.length) return;
+		entries.sort(this._compareOrdinals);
+		entries.forEach(e=>{
+			this._sortToCentries(e.subEntries)
+		});
+	}
+	private _compareOrdinals(a, b){
+
+		const aValue = a.form.get('ordinal').value as number;
+		const bValue = b.form.get('ordinal').value as number;
+
+		// if(!aValue || !bValue) return 0;
+		return aValue - bValue;
+	}
+	private _updateNumbering(entries:ToCEntry[], parentNumbering:string){
+		if(!entries || !entries.length) return;
+		let prefix ='';
+		if(parentNumbering.length){
+			prefix = parentNumbering + '.';
+		}
+		entries.forEach((entry,index)=>{
+			const numbering = prefix + (index+1);
+			entry.numbering = numbering;
+			this._updateNumbering(entry.subEntries, numbering);
+		})
+	}
+
+	toCEntries:ToCEntry[];
+
+	getTocEntries(): ToCEntry[] {
+		if (this.form == null) { return []; }
+		const result: ToCEntry[] = [];
+
+		//build parent pages
+		(this.form.get('pages') as FormArray).controls.forEach((pageElement, i) => {
+			result.push({
+				id: pageElement.get('id').value,
+				label: pageElement.get('title').value,
+				type: ToCEntryType.Page,
+				form: pageElement,
+				numbering: (i + 1).toString(),
+				subEntriesType: ToCEntryType.Section
+			} as ToCEntry)
+		});
+
+		// build first level sections
+		(this.form.get('sections') as FormArray).controls.forEach((sectionElement, i) => {
+			const currentSectionPageId = sectionElement.get('page').value;
+			const pageToAdd = result.filter(x => x.id == currentSectionPageId)[0];
+			if (pageToAdd.subEntries == null) pageToAdd.subEntries = [];
+
+			const item = {
+				id: sectionElement.get('id').value,
+				label: sectionElement.get('title').value,
+				type: ToCEntryType.Section,
+				form: sectionElement,
+				numbering: pageToAdd.numbering + '.' + (pageToAdd.subEntries.length +1)
+			} as ToCEntry;
+			const sectionItems = this.populateSections(sectionElement.get('sections') as FormArray, item.numbering);
+			const fieldSetItems = this.populateFieldSets(sectionElement.get('fieldSets') as FormArray, item.numbering);
+			if (sectionItems != null) {
+				item.subEntries = sectionItems;
+				item.subEntriesType = ToCEntryType.Section;
+			}
+			if (fieldSetItems != null) {
+				if (item.subEntries == null) {
+					item.subEntries = fieldSetItems;
+				} else {
+					item.subEntries.push(...fieldSetItems);
+				}
+				item.subEntriesType = ToCEntryType.FieldSet;
+
+			}
+			pageToAdd.subEntries.push(item);
+
+		});
+		this._sortToCentries(result);//ordeby ordinal
+		this._updateNumbering(result, '');//update nubering if needed
+		return result;
+	}
+
+	private populateSections(sections: FormArray, existingNumbering: string): ToCEntry[] {
+		if (sections == null || sections.controls == null || sections.controls.length == 0) { return null; }
+
+		const result: ToCEntry[] = [];
+		sections.controls.forEach((sectionElement, i) => {
+
+			const item = {
+				id: sectionElement.get('id').value,
+				label: sectionElement.get('title').value,
+				type: ToCEntryType.Section,
+				form: sectionElement,
+				numbering: existingNumbering + '.' + (i + 1)
+			} as ToCEntry;
+			const sectionItems = this.populateSections(sectionElement.get('sections') as FormArray, item.numbering);
+			const fieldSetItems = this.populateFieldSets(sectionElement.get('fieldSets') as FormArray, item.numbering);
+			if (sectionItems != null) {
+				item.subEntries = sectionItems;
+				item.subEntriesType = ToCEntryType.Section;
+			}
+			if (fieldSetItems != null) {
+				if (item.subEntries == null) {
+					item.subEntries = fieldSetItems;
+				} else {
+					item.subEntries.push(...fieldSetItems);
+				}
+				item.subEntriesType = ToCEntryType.FieldSet;
+			}
+			result.push(item);
+		});
+
+		return result;
+	}
+
+	private populateFieldSets(fieldSets: FormArray, existingNumbering: string): ToCEntry[] {
+		if (fieldSets == null || fieldSets.controls == null || fieldSets.controls.length == 0) { return null; }
+
+		const result: ToCEntry[] = [];
+		fieldSets.controls.forEach((fieldSetElement, i) => {
+
+			result.push({
+				id: fieldSetElement.get('id').value,
+				label: fieldSetElement.get('title').value,
+				type: ToCEntryType.FieldSet,
+				//subEntries: this.populateSections((fieldSetElement.get('fieldSets') as FormArray), existingNumbering + '.' + i),
+				form: fieldSetElement,
+				numbering: existingNumbering + '.' + (i + 1)
+			} as ToCEntry)
+
+		});
+
+		return result;
+	}
+
+
+
+	private _findTocEntryById(id: string, tocentries: ToCEntry[]): ToCEntry{
+		if(!tocentries || !tocentries.length){
+			return null;
+		}
+
+		let tocEntryFound = tocentries.find(entry=>entry.id === id);
+
+		if(tocEntryFound){
+			return tocEntryFound;
+		}	
+
+		for(let entry of tocentries){
+			const result = this._findTocEntryById(id, entry.subEntries);
+			if(result){
+				tocEntryFound = result;
+				break;
+			}
+		}
+		
+		return tocEntryFound? tocEntryFound: null;
+	}
+	addNewEntry(tce: NewEntryType) {
+
+		const parent = tce.parent;
+
+		//define entry type
+		switch (tce.childType) {
+			case ToCEntryType.Page:
+				const pagesArray = (this.form.get('pages') as FormArray);
+
+				const page: PageEditorModel = new PageEditorModel(pagesArray.length);
+				const pageForm = page.buildForm();
+				// this.dataModel.pages.push(page);
+
+				pagesArray.push(pageForm);
+				// this.form.updateValueAndValidity();
+				this.refreshToCEntries();
+				this.selectedTocEntry = this._findTocEntryById(pageForm.get('id').value, this.toCEntries);
+
+				break;
+			case ToCEntryType.Section:
+
+				const section: SectionEditorModel = new SectionEditorModel();
+				section.id = Guid.create().toString();
+				let sectionsArray:FormArray;
+
+				if (parent.type === ToCEntryType.Page) {//FIRST LEVEL SECTION
+					sectionsArray = this.form.get('sections') as FormArray;
+
+					section.page = parent.id;
+
+					try{
+						const max = sectionsArray.controls.filter(control=>control.get('page').value === parent.id)
+							.map(control=>control.get('ordinal').value)
+							.reduce((a,b)=>Math.max(a,b));
+	
+						section.ordinal =  max + 1;
+					}catch{
+						section.ordinal =  sectionsArray.length;
+
+					}
+					sectionsArray.push(section.buildForm());
+					// this.form.updateValueAndValidity();
+
+				} else if( parent.type == ToCEntryType.Section) { //SUBSECTION OF SECTION
+					sectionsArray = parent.form.get('sections') as FormArray;
+
+					//adding page parent MAYBE NOT NEEDED
+					section.page = parent.form.get('page').value;
+					try{
+						const maxOrdinal = sectionsArray.controls.map(control=>control.get('ordinal').value).reduce((a,b)=>Math.max(a, b));
+						section.ordinal = maxOrdinal+1;
+					}catch{
+						section.ordinal = sectionsArray.length;
+					}
+
+					sectionsArray.push(section.buildForm());
+					// (child.form.parent as FormArray).push(section.buildForm());
+
+				}else{
+					console.error('Section can only be child of a page or another section');
+				}
+
+				
+				const sectionAdded = sectionsArray.at(sectionsArray.length -1) as FormGroup;
+				// sectionAdded.setValidators(this.customEditorValidators.sectionHasAtLeastOneChildOf('fieldSets','sections'));
+				// sectionAdded.updateValueAndValidity();
+
+
+				this.refreshToCEntries();
+				this.selectedTocEntry = this._findTocEntryById(sectionAdded.get('id').value, this.toCEntries);
+
+				break;
+			case ToCEntryType.FieldSet:
+				
+				//create one field form fieldset
+				const field: FieldEditorModel = new FieldEditorModel();
+				field.id = Guid.create().toString();
+				field.ordinal = 0;//first filed in the fields list
+				const fieldForm =  field.buildForm();
+				// fieldForm.setValidators(this.customFieldValidator());
+				// fieldForm.get('viewStyle').get('renderStyle').setValidators(Validators.required);
+				
+				// fieldSet.fields.push(field);
+				// field.ordinal = fieldSet.fields.length-1;
+				
+				const fieldSetsArray = parent.form.get('fieldSets') as FormArray
+				
+				//give fieldset id and ordinal
+				const fieldSet: FieldSetEditorModel = new FieldSetEditorModel();
+				const fieldSetId = Guid.create().toString();
+				fieldSet.id = fieldSetId;
+
+				try{
+					const maxOrdinal = fieldSetsArray.controls.map(control=>control.get('ordinal').value).reduce((a,b)=>Math.max(a, b));
+					fieldSet.ordinal = maxOrdinal+1;
+				}catch{
+					fieldSet.ordinal = fieldSetsArray.length;
+				}
+				const fieldsetForm = fieldSet.buildForm();
+				
+
+
+				(fieldsetForm.get('fields') as FormArray).push(fieldForm);
+				fieldSetsArray.push(fieldsetForm);
+
+				this.refreshToCEntries();
+				this.selectedTocEntry = this._findTocEntryById(fieldSetId, this.toCEntries);
+				// fieldForm.updateValueAndValidity();
+
+				break;
+
+			default:
+				break;
+		}
+
+		this.form.updateValueAndValidity();
+	}
+
+
+	onRemoveEntry(tce: ToCEntry){
+		
+		const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+			restoreFocus: false,
+			data: {
+				message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
+				confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'),
+				cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL'),
+				isDeleteConfirmation: true
+			}
+		});
+		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
+			if (result) {
+				this._deleteEntry(tce);
+			}
+		});
+	
+	}
+
+
+	private _deleteEntry(tce: ToCEntry) {
+		//define entry type
+		switch (tce.type) {
+			case ToCEntryType.Page:
+				const pages = this.form.get('pages') as FormArray;
+
+				let pageIndex = -1;
+				//get the index
+				for (let i = 0; i < pages.length; i++) {
+					let page = pages.at(i) as FormGroup;
+
+					if (page.controls.id.value === tce.id) {
+						pageIndex = i;
+						break;
+					}
+				}
+
+				if (pageIndex >= 0) {
+					//remove page
+					this._updateSelectedItem(tce);
+					pages.removeAt(pageIndex);
+					//clean up sections of removed page
+
+					const sections = (this.form.get('sections') as FormArray);
+
+					const sectionsIndexToBeRemoved = [];
+
+					sections.controls.forEach((section,idx)=>{
+						if(section.get('page').value === tce.id){
+							sectionsIndexToBeRemoved.push(idx);
+						}
+					});
+
+					if(sectionsIndexToBeRemoved.length){
+						sectionsIndexToBeRemoved.reverse().forEach(index=>{
+							sections.removeAt(index);
+						});
+					}
+
+					//update page ordinals 
+					for(let i=0; i<pages.length; i++){
+						pages.at(i).get('ordinal').patchValue(i);
+					}
+
+					//update validity
+					// this.form.controls.sections.updateValueAndValidity();
+				}
+				break;
+
+			case ToCEntryType.Section:
+
+				//FIRST LEVEL SECTION CASE
+				let index = -1;
+
+
+				const sections = (this.form.get('sections') as FormArray);
+
+				for (let i = 0; i < sections.length; i++) {
+
+					let section = sections.at(i);
+
+					let sectionId = section.get('id').value;
+					if (sectionId == tce.id) {
+						index = i;
+						break;
+					}
+				}
+
+
+				if (index >= 0) { //section found
+
+					const sections = (this.form.get('sections') as FormArray);
+
+					//remove section
+					this._updateSelectedItem(tce);
+					sections.removeAt(index);
+
+					//update ordinal
+					for(let i=0; i< sections.length; i++){
+						sections.at(i).get('ordinal').patchValue(i);
+					}
+				} else {//NOT FOUND IN FIRST LEVEL CASE
+
+					//LOOK FOR SUBSECTION CASE	
+					let parentFormArray = tce.form.parent as FormArray;
+
+					for (let i = 0; i < parentFormArray.length; i++) {
+						let section = parentFormArray.at(i);
+
+						if (section.get('id').value == tce.id) {
+							index = i;
 							break;
 						}
 					}
-					Object.keys(errors).forEach(keyError => {
-						if (typeof errors[keyError] === 'boolean') {
-							this.errorMessages.push(numbering + ' ' + key + ' is ' + keyError);
-						} else {
-							this.errorMessages.push(numbering + ' ' + key + ': ' + keyError + ': ' + JSON.stringify(errors[keyError]));
-						}
-					});
-				} else {
-					if (rootform.get(key) instanceof FormGroup) {
-						this.printErrors(<FormGroup>rootform.get(key));
-					} else if (rootform.get(key) instanceof FormArray) {
-						this.nestedIndex++;
-						this.nestedCount[this.nestedIndex] = 0;
-						for (let childForm of (<FormArray>rootform.get(key)).controls) {
-							this.nestedCount[this.nestedIndex]++;
-							this.printErrors(<any>childForm);
-						}
-						this.nestedCount[this.nestedIndex] = 0;
-						this.nestedIndex--;
+					if (index >= 0) {
+						this._updateSelectedItem(tce);
+						parentFormArray.removeAt(index);
 
+						//update odrinal
+
+						for(let i=0; i<parentFormArray.length; i++){
+							parentFormArray.at(i).get('ordinal').patchValue(i);
+						}
+					}
+
+				}
+
+				break;
+			case ToCEntryType.FieldSet:
+				const parentFormArray =  tce.form.parent as FormArray;
+				
+
+				let idx = -1;
+				
+				for(let i =0; i< parentFormArray.length; i++){
+					let inspectingField = parentFormArray.at(i);
+
+					if(inspectingField.get('id').value === tce.id){
+						//fieldset found
+						idx = i;
+						break;
 					}
 				}
+
+				if(idx>=0){//fieldset found
+					this._updateSelectedItem(tce);
+					parentFormArray.removeAt(idx);
+
+					//patching order
+					for(let i=0; i<parentFormArray.length;i++){
+						parentFormArray.at(i).get('ordinal').patchValue(i);
+					}
+				}
+				break;
+			default:
+				break;
+		}
+
+		//in case selectedtocentrhy is child of the removed element
+
+		this.refreshToCEntries();
+		this.form.updateValueAndValidity();
+
+	}
+
+
+	private _updateSelectedItem(tce: ToCEntry){
+
+		if(this.selectedTocEntry ){
+
+			if(this.tocEntryIsChildOf(this.selectedTocEntry,tce)){
+				if(this.selectedTocEntry.type ==  ToCEntryType.Page){
+					this.selectedTocEntry = null;
+				}else{
+
+					//if first level section
+					const firstLevelSections = (this.form.get('sections') as FormArray);
+					let isFirstLevel: boolean = false;
+					firstLevelSections.controls.forEach(section=>{
+						if(section.get('id').value === tce.id){
+							isFirstLevel = true;
+						}
+					});
+
+					let parentId = null;
+					if(isFirstLevel){
+						parentId = tce.form.get('page').value;
+					}else{
+						parentId = tce.form.parent.parent.get('id').value
+					}
+
+					// const parentId = tce.form.parent.parent.get('id').value;
+					if(parentId){
+						const tocentries = this.getTocEntries();
+						const parent = this._findTocEntryById(parentId, tocentries);
+	
+						if(parent){
+							this.selectedTocEntry = parent;
+						}else{
+							this.selectedTocEntry = null;
+						}
+					}else{
+						this.selectedTocEntry = null;
+					}
+				}
+			}
+		}
+	}
+
+	tocEntryIsChildOf(testingChild: ToCEntry,parent: ToCEntry): boolean{
+
+		if(!testingChild || !parent) return false;
+
+		if(testingChild.id == parent.id){return true;}
+
+		if(parent.subEntries){
+			let childFound:boolean = false;
+
+			parent.subEntries.forEach(subEntry=>{
+				if(this.tocEntryIsChildOf(testingChild, subEntry)){
+					childFound = true;
+					return true;
+				}
+			})
+
+			return childFound;
+		}
+		return false;
+	}
+
+	selectedTocEntry: ToCEntry
+	displayItem(entry: ToCEntry): void {
+		this.selectedTocEntry = entry;
+	}
+
+	get numOfPages(){
+		return (<FormArray>this.form.get('pages')).length;
+	}
+
+	// getSectionIndex(): number{
+	// 	// if(this.sectionIdPreviewed == null) return;
+	// 	const valuesArray = this.form.get('sections').value;
+	// 	let currentVal = this.sectionIdPreviewed;
+	// 	let indexArray:string[] = valuesArray.map(element=> element.page);
+	// 	let index = indexArray.indexOf(currentVal);
+	// 	console.log(index);
+	// 	return index ? index :-1;
+	// }
+
+	// getCurrentEditorModel(): SectionEditorModel{
+	// 	let currentEditor = this.dataModel.sections.filter(section=> section.page == this.sectionIdPreviewed)[0];
+	// 	return currentEditor;
+
+	// }
+
+
+	// subForm(){
+	// 	const valuesArray = this.form.get('sections').value;
+	// 	let currentVal = this.sectionIdPreviewed;
+	// 	let indexArray:string[] = valuesArray.map(element=> element.page);
+	// 	let index = indexArray.indexOf(currentVal);
+	// 	let subForm = (this.form.get('sections') as FormArray).controls[index];
+	// 	console.log(subForm);
+	// 	return subForm;
+	// }
+
+	getFieldTile(formGroup: FormGroup, index: number) {
+		if (formGroup.get('title') && formGroup.get('title').value && formGroup.get('title').value.length > 0) { return formGroup.get('title').value; }
+		return "Field " + (index + 1);
+	}
+
+	deleteFieldSet(formArray: FormArray, index: number) {
+		formArray.removeAt(index);
+	}
+
+
+
+	printForm(){
+		// console.log(this.form.value);
+		console.log(this.form);
+	}
+
+	get barPercentage(){
+		if(!this.stepper || !this.steps){
+			return 0;
+		}
+		const selectedIndex = this.stepper.selectedIndex + 1;
+		return (selectedIndex / this.stepper.steps.length) * 100;
+	}
+
+
+	get progressStyle(){
+		// return {'transform': 'translateX('+this.barPercentage+'%) skewX(-25deg)'}
+		const diff = 3;
+
+		return {
+			'clip-path': `polygon(0 0, ${Math.round(this.barPercentage + diff)}% 0, ${Math.round(this.barPercentage)}% 100%, 0 100%)`
+		}
+	}
+
+	steps:QueryList<CdkStep>;
+	// get steps(){
+	// 	if(!this.stepper){
+	// 		return [];
+	// 	}
+
+	// 	return this.stepper.steps;
+	// }
+
+
+	// generatePreviewForm(){
+		
+
+	// 	const model =  new DatasetDescriptionFormEditorModel();
+
+	// 	const toCentries = this.getTocEntries();
+
+
+	// 	//first level is always pages
+	// 	model.pages = toCentries.map((entry,idx)=>{
+	// 		if( !(entry.type == ToCEntryType.Page)){
+	// 			return null;
+	// 		}
+	// 		const pageModel = new DatasetDescriptionPageEditorModel();
+
+	// 		pageModel.ordinal = entry.form.get('ordinal').value;
+	// 		pageModel.title = entry.label;
+			
+	// 		if(entry.subEntries){
+	// 			pageModel.sections = entry.subEntries.map(section=>{
+	// 				const sectionModel = new DatasetDescriptionSectionEditorModel();
+
+	// 				sectionModel.id = section.id;
+	// 				sectionModel.ordinal = section.form.get('ordinal').value;
+	// 				sectionModel.description = section.form.get('description').value; 
+	// 				sectionModel.page = entry.form.get('ordinal').value;
+	// 				sectionModel.title = section.label;
+	// 				sectionModel.numbering = (idx+1).toString();
+
+
+	// 				if(section.subEntriesType == ToCEntryType.Section){
+	// 					sectionModel.sections = this._buildSectionsRecursively(section.subEntries, sectionModel.numbering);
+	// 				}else{
+	// 					sectionModel.compositeFields = this._buildFormFields(section.subEntries, sectionModel.numbering)
+	// 				}
+
+	// 				return sectionModel;
+	// 			});
+	// 		};
+	// 		return pageModel;
+
+	// 	});
+
+
+	// 	//populate rules
+	// 	const rules:Rule[] =[];
+	// 	const fieldSets = this._getFieldSets(toCentries);
+
+	// 	fieldSets.forEach(fs=>{
+	// 		const fields = fs.form.get('fields') as FormArray;
+	// 		if(fields){
+	// 			fields.controls.forEach(field=>{
+	// 				const rulesArray = field.get('visible').get('rules').value;
+	// 				if(rulesArray){
+	// 					rulesArray.forEach(ruleElement => {
+	// 						const rule: Rule = new Rule();
+	// 						rule.targetField = ruleElement.target;
+	// 						rule.sourceField = field.get('id').value;
+	// 						rule.requiredValue = ruleElement.value;
+	// 						rules.push(rule);
+	// 					});
+	// 				}
+	// 			});
+	// 		}
+	// 	});
+		 
+	// 	model.rules = rules;
+	// 	this.visibilityRules = rules;
+		
+	// 	this.previewForm = model.buildForm();
+	// }
+
+
+	updateVisibilityRules(){
+		const rules:Rule[] =[];
+		const fieldSets = this._getFieldSets(this.getTocEntries());
+
+		fieldSets.forEach(fs=>{
+			const fields = fs.form.get('fields') as FormArray;
+			if(fields){
+				fields.controls.forEach(field=>{
+					const rulesArray = field.get('visible').get('rules').value;
+					if(rulesArray){
+						rulesArray.forEach(ruleElement => {
+							const rule: Rule = new Rule();
+							rule.targetField = ruleElement.target;
+							rule.sourceField = field.get('id').value;
+							rule.requiredValue = ruleElement.value;
+							rules.push(rule);
+						});
+					}
+				});
+			}
+		});
+		 
+		this.visibilityRules = rules;
+
+	}
+
+	visibilityRules:Rule[];
+	private _buildSectionsRecursively( tocentries: ToCEntry[], parentNumbering:string): DatasetDescriptionSectionEditorModel[]{
+		
+
+		if(!tocentries) return null;
+
+
+		const result: Array<DatasetDescriptionSectionEditorModel> = [];
+
+		tocentries.forEach((tocentry, idx)=>{
+
+			const sectionModel = new DatasetDescriptionSectionEditorModel();
+			sectionModel.id = tocentry.id;
+			sectionModel.ordinal = tocentry.form.get('ordinal').value;
+			sectionModel.description = tocentry.form.get('description').value; 
+			// sectionModel.page = entry.form.get('ordinal').value;
+			sectionModel.title = tocentry.label;
+			// sectionModel.numbering = tocentry.numbering;
+			sectionModel.numbering = parentNumbering+"."+(idx+1);;
+	
+			if(tocentry.subEntriesType == ToCEntryType.Section){
+				sectionModel.sections = this._buildSectionsRecursively(tocentry.subEntries, sectionModel.numbering);
+		
+			}else{
+				sectionModel.compositeFields = this._buildFormFields(tocentry.subEntries, sectionModel.numbering);
+			}
+
+			result.push(sectionModel);
+		})
+
+		return result;
+	}
+
+	private _buildFormFields(tocentries: ToCEntry[], parentNumbering: string):DatasetDescriptionCompositeFieldEditorModel[]{
+		if(!tocentries) return null;
+
+		const fieldsets:DatasetDescriptionCompositeFieldEditorModel[] = [];
+		
+		tocentries.forEach((fs, idx)=>{
+
+			const fieldset = new DatasetDescriptionCompositeFieldEditorModel();
+
+			fieldset.description = fs.form.get('description').value;
+			fieldset.extendedDescription = fs.form.get('extendedDescription').value;
+			fieldset.id = fs.form.get('id').value;
+			fieldset.multiplicity = fs.form.get('multiplicity').value;
+			fieldset.additionalInformation = fs.form.get('additionalInformation').value;
+			fieldset.ordinal = fs.form.get('ordinal').value;
+			// fieldset.numbering = fs.numbering;
+			fieldset.numbering = parentNumbering+"."+(idx+1);
+			fieldset.hasCommentField = fs.form.get('hasCommentField').value;
+			fieldset.title = fs.label;
+			// fieldset.fields = (fs.form.get('fields') as FormArray).getRawValue();
+			fieldset.fields = (fs.form.get('fields') as FormArray).controls.map(field=>{
+
+				const fieldModel = new DatasetDescriptionFieldEditorModel();
+
+				fieldModel.data = (field.get('data') as FormGroup).getRawValue();
+				fieldModel.id = field.get('id').value;
+				fieldModel.viewStyle = (field.get('viewStyle') as FormGroup).getRawValue();
+				// fieldModel.defaultValue = (field.get('defaultValue') as FormGroup).getRawValue();
+				fieldModel.value = (field.get('defaultValue') as FormGroup).get('value').value;
+				fieldModel.defaultValue = fieldModel.value;
+				fieldModel.page = field.get('page').value;
+				fieldModel.validations = field.get('validations').value;
+
+				return fieldModel;
+			});
+
+
+
+			fieldsets.push(fieldset);
+		});
+
+		return fieldsets;
+	}
+
+	private _getFieldSets(tocentries: ToCEntry[]):ToCEntry[]{
+
+		const fieldsets:ToCEntry[] = [];
+
+		if(!tocentries) return fieldsets;
+
+		tocentries.forEach(entry=>{
+			if(entry.type == ToCEntryType.FieldSet){
+				fieldsets.push(entry);
+			}else{
+				fieldsets.push(...this._getFieldSets(entry.subEntries));
+			}
+		});
+
+		return fieldsets;
+	}
+
+
+
+	// get basicInfo(){
+
+	// 	const label = this.form.get('label');
+	// 	const description = this.form.get('description');
+	// 	const language = this.form.get('language');
+
+
+
+	// 	const fg = new FormGroup({
+	// 		label: label,
+	// 		description: description,
+	// 		language: language
+	// 	})
+
+	// 	return fg;
+	// }
+
+
+
+
+
+	onMatStepperSelectionChange(event: StepperSelectionEvent){	
+
+		if(event.selectedIndex === (this.steps.length -1)){//preview selected
+			// this.generatePreviewForm();//TODO LAZY LOADING IN THE TEMPLATE
+			this.getPreview();
+		}else{
+			// this.previewForm = null;
+			this.formGroup = null;
+		}
+		this.form.markAsUntouched();
+
+	}
+
+	// previewForm:FormGroup;
+	onDataNeedsRefresh(params?){
+
+		const tocentries = this.refreshToCEntries();
+
+		if(params && params.draggedItemId){
+			if(params.draggedItemId){
+				this.displayItem(this._findTocEntryById(params.draggedItemId, tocentries));
+			}
+		}
+	}
+
+	cloneFieldSet(fieldset: FormGroup){
+		const values = fieldset.getRawValue();
+		const parentArray = fieldset.parent as FormArray;
+
+		values.id = Guid.create().toString();
+		values.ordinal = parentArray.length;
+
+		values.fields.forEach(element => {
+			element.id = Guid.create().toString()
+		});
+
+
+		const clonedModel = new FieldSetEditorModel().fromModel(values);
+		const clonedForm = clonedModel.buildForm();
+		parentArray.push(clonedForm);
+
+		//update tocentries and make selected tocentry the cloedn
+		let entries = this.refreshToCEntries();
+
+		const entryfound = this._findTocEntryById(clonedForm.get('id').value, entries);
+		if(entryfound){
+			this.selectedTocEntry = entryfound;
+		}
+
+		// 		//create one field form fieldset
+		// const field: FieldEditorModel = new FieldEditorModel(); //to ask
+		// field.id = Guid.create().toString();
+		// field.ordinal = 0;//first filed in the fields list
+		// fieldSet.fields.push(field);
+		// // field.ordinal = fieldSet.fields.length-1;
+
+		// //give fieldset id and ordinal
+		// fieldSet.id = Guid.create().toString();
+		// fieldSet.ordinal = (parent.form.get('fieldSets') as FormArray).length;
+
+		// (<FormArray>parent.form.get('fieldSets')).push(fieldSet.buildForm());
+
+		// // const parentArray = parent.form.get('fieldSets') as FormArray;
+		// const addedFieldSet = parentArray.at(parentArray.length - 1);
+
+
+
+		
+	}
+
+	isStepCompleted(stepIndex: number){
+		
+		let stepCompleted = false;
+		this.steps.forEach((step,index)=>{
+			if(stepIndex === index){
+				stepCompleted = step.completed;
+			}
+		});
+
+		return stepCompleted;
+	}
+
+	isStepUnlocked(stepIndex: number): boolean{
+		if(stepIndex === 0) return true;
+		if(stepIndex <0 ) return false;
+		//if previous step is valid then unlock
+		let stepUnlocked: boolean = false;
+
+		if(!this.isStepUnlocked(stepIndex -1)) return false;
+
+		this.steps.forEach((step,index)=>{
+
+			if(index+1 == stepIndex){//previous step
+				
+				if(step.completed){
+					stepUnlocked = true;
+				}
+			}
+		});
+
+		return stepUnlocked;
+	}
+
+	validateStep(selectedIndex){
+
+		if(selectedIndex === 1){//form description
+			if(this.form.invalid){
+				this.checkFormValidation();
+			}
+		}
+
+
+		// if(step.hasError){
+		// 	this.printMyErrors(this.form);
+		// }
+	}
+
+	// getFormValidationErrors() {
+	// 	Object.keys(this.form.controls).forEach(key => {
+		
+	// 		const controlErrors: ValidationErrors = this.form.get(key).errors;
+	// 		if (controlErrors != null) {
+	// 				Object.keys(controlErrors).forEach(keyError => {
+	// 				console.log('Key control: ' + key + ', keyError: ' + keyError + ', err value: ', controlErrors[keyError]);
+	// 				});
+	// 			}
+	// 	});
+
+	// 	if(this.form.invalid){
+	// 		console.log('this form is invalid!');
+	// 		console.log(this.form.errors);
+	// 	}
+	// }
+
+
+
+	private _buildErrorMessage(errors, numbering, key):string[]{
+		const errmess: string[] = [];
+
+		Object.keys(errors).forEach(keyError => {
+
+			switch(keyError){
+				case EditorCustomValidatorsEnum.atLeastOneSectionInPage:
+					errmess.push( this.language.instant('DATASET-PROFILE-EDITOR.STEPS.FORM.FORM-VALIDATION.ERROR-MESSAGES.PAGE-MUST-HAVE-SECTION'));
+					break;
+				case EditorCustomValidatorsEnum.emptyArray:
+					errmess.push(numbering+this.language.instant('DATASET-PROFILE-EDITOR.STEPS.FORM.FORM-VALIDATION.ERROR-MESSAGES.NEEDS-MORE-INFORMATION'))
+					break;
+				case EditorCustomValidatorsEnum.sectionMustHaveOneChild:
+					errmess.push(numbering+this.language.instant('DATASET-PROFILE-EDITOR.STEPS.FORM.FORM-VALIDATION.ERROR-MESSAGES.MUST-HAVE-SECTION-OR-FIELDSET'))
+					break;
+				default:
+				if (typeof errors[keyError] === 'boolean') {
+					errmess.push(numbering + ' ' + key + ' is ' + keyError);
+				} else {
+					errmess.push(numbering + ' ' + key + ': ' + keyError + ': ' + JSON.stringify(errors[keyError]));
+				}
+
+			}
+			
+		});
+
+		return errmess;
+	}
+
+
+	printMyErrors(form: AbstractControl){
+		// this._printToCentriesErrrors(this.toCEntries);
+		const result = this._getErrors(form);
+
+		// console.log('got errors ');
+		// console.log(result);
+
+		if(result && form.invalid){
+			const errmess:string[] = [];
+			if(result.length){
+				form.markAllAsTouched();
+	
+				let indexes:number[] = [];
+				///search in pages,sections and fieldsets  for the id 
+				result.forEach((err,i)=>{
+					const entry = this._findTocEntryById(err.id, this.toCEntries);
+					if(entry){
+	
+						// errmess.push(`Error on ${entry.numbering} ${entry.label} . ${err.key}`);
+						errmess.push(...this._buildErrorMessage(err.errors, entry.numbering, err.key));
+						indexes.push(i);
+					}
+				});
+				indexes.reverse().forEach(index=>{
+					result.splice(index,1);
+				});
+	
+				indexes = [];
+				//searching in fields
+				const fieldsets = this._getAllFieldSets(this.toCEntries);
+				result.forEach((err,i)=>{
+					fieldsets.filter(fs=>{
+						let fieldFound = false;
+						(fs.form.get('fields') as FormArray).controls.forEach(field=>{
+							if(field.get('id').value === err.id){
+								fieldFound = true;
+								indexes.push(i);
+							}
+						});
+						return fieldFound;
+					})
+					//printing fieldsets that the field missing
+					.forEach(fs=>{
+						// errmess.push(`Missing input in ${fs.numbering} ${fs.label} . ${err.key}`);
+						errmess.push(...this._buildErrorMessage(err.errors, fs.numbering, err.key));
+					});
+				});
+	
+				indexes.reverse().forEach(index=>{
+					result.splice(index,1);
+				});
+	
+				result.forEach(err=>{
+					// console.log(err);
+					if(err.key){
+						errmess.push(`${this.language.instant('DATASET-PROFILE-EDITOR.STEPS.FORM.FORM-VALIDATION.ERROR-MESSAGES.MISSING')} ${err.key}` );
+					}else{
+
+						errmess.push(this.language.instant('DATASET-PROFILE-EDITOR.STEPS.FORM.FORM-VALIDATION.ERROR-MESSAGES.PROVIDE-PAGE-AND-SECTION'));
+					}
+					// errmess.push(...this._buildErrorMessage(err.errors,"", err.key) );
+
+				})
+			}
+
+			const dialogRef = this.dialog.open(FormValidationErrorsDialogComponent, {
+				disableClose: true,
+				autoFocus: false,
+				restoreFocus: false,
+				data: {
+					errorMessages: errmess,
+					projectOnly: false
+				},
 			});
 		}
 	}
 
-	private showValidationErrorsDialog(projectOnly?: boolean) {
-		const dialogRef = this.dialog.open(FormValidationErrorsDialogComponent, {
-			disableClose: true,
-			autoFocus: false,
-			restoreFocus: false,
-			data: {
-				errorMessages: this.errorMessages,
-				projectOnly: projectOnly
-			},
+	/**
+	 * Get all filedsets in a tocentry array;
+	 * @param entries Tocentries to search in
+	 * @returns The tocentries that are Fieldsets provided in the entries
+	 */
+	private _getAllFieldSets(entries: ToCEntry[]):ToCEntry[]{
+		
+		const fieldsets:ToCEntry[] = [];
+		if(!entries || !entries.length) return fieldsets;
+
+
+		entries.forEach(e=>{
+			if(e.type === ToCEntryType.FieldSet){
+				fieldsets.push(e);
+			}else{
+				fieldsets.push(...this._getAllFieldSets(e.subEntries));
+			}
 		});
+		return fieldsets;
 	}
+
+
+	private _getErrors(aControl: AbstractControl):InvalidControl[]{
+
+
+		if(aControl.valid) return;
+
+		let controlType = 'control';
+		
+		if(aControl instanceof FormGroup) controlType="fg"
+		if(aControl instanceof FormControl) controlType="fc";
+		if(aControl instanceof FormArray) controlType="fa";
+		
+
+		const invalidControls:InvalidControl[] = [];
+		//invalid
+		switch (controlType){
+			case 'fg':
+				
+				const controls = (aControl as FormGroup).controls;
+				const keys = Object.keys(controls); 
+				keys.forEach(key=>{
+					const control = controls[key];		
+					if(!control.invalid) return; //// !!!!! Important to be !invalid. (In case the template is finalized)
+
+					if(control instanceof FormControl){
+						const ctrl = control as FormControl;
+
+						invalidControls.push({
+							errors:ctrl.errors,
+							id: ctrl.get('id')? ctrl.get('id').value: null,
+							invalidSubControls: [],
+							key: key
+						});
+						
+					}else{
+						// if(aControl.errors){
+						// 	invalidControls.push({
+						// 		id: aControl.get('id')? aControl.get('id').value: null,
+						// 		errors:aControl.errors,
+						// 		key: aControl.get('title')? aControl.get('title').value: 'unspecified',
+						// 		invalidSubControls:[]//TODO TO CHECK
+						// 	});
+						// }
+
+
+						//THE ONE WE REMOVED
+						// if(control.errors){
+						// 	// invalidControls.push({
+						// 	// 	id: aControl.get('id')? aControl.get('id').value: null,
+						// 	// 	errors:aControl.errors,
+						// 	// 	key: aControl.get('title')? aControl.get('title').value: 'unspecified',
+						// 	// 	invalidSubControls:[]//TODO TO CHECK
+						// 	// });
+
+						// 	invalidControls.push({
+						// 		errors:control.errors,
+						// 		id: control.get('id')? control.get('id').value: null,
+						// 		invalidSubControls: [],
+						// 		key: key
+						// 	});
+						// }
+						invalidControls.push(...this._getErrors(control)) ;
+						
+					}
+				});
+
+				/**In case there is an error in a formgroup then the validator probably is custom */
+				if(aControl.errors){
+					invalidControls.push({
+						errors:aControl.errors,
+						id: aControl.get('id')? aControl.get('id').value: null,
+						invalidSubControls: [],
+						key: aControl.get('title')?aControl.get('title').value: null
+					});
+				}
+				
+				break;
+			case 'fa':
+				// const fa = (aControl as FormArray);
+				const ctrls = (aControl as FormArray).controls;
+				const keys_ = Object.keys(ctrls); 
+				keys_.forEach(key=>{
+					const control = ctrls[key];
+					if(control.valid) return;
+
+
+					if(control instanceof FormControl){ //for completion purposes. should never run this case
+						const ctrl = control as FormControl;
+						invalidControls.push({
+							errors:ctrl.errors,
+							id: ctrl.get('id')? ctrl.get('id').value: null,
+							invalidSubControls: [],
+							key: key
+						});
+
+					}else{
+						invalidControls.push(... this._getErrors(control));
+					}
+				});
+
+				break;
+		}
+
+		invalidControls.forEach(e=>{
+			if(!e.id){
+				e.id = aControl.get('id')? aControl.get('id').value : null;
+			}
+		})
+		return invalidControls;
+		
+	}
+
+
+	//Temporary patch
+	/**
+	 * Append custom validators to fields. Some validators are applied on template. In case they are never rendereed,
+	 * he form might be valid when it shouldnt.
+	 * @param
+	 */
+	private _initializeFormValidity(tocentries: ToCEntry[]) {
+		const fieldsets = this._getAllFieldSets(tocentries);
+
+		try{
+			fieldsets.forEach(fs=>{
+				fs.form.get('title').setValidators(Validators.required);
+				const fieldsF = fs.form.get('fields') as FormArray;
+				if(fieldsF){
+					fieldsF.controls.forEach(field=>{
+						const renderStyleValue = field.get('viewStyle').get('renderStyle').value;
+	
+						if(renderStyleValue === DatasetProfileFieldViewStyle.CheckBox){
+							field.get('defaultValue').get('value').setValidators(Validators.required);	
+						}else if(renderStyleValue === 'combobox'){
+							
+							const comboType = field.get('data').get('type').value;
+							if(comboType === DatasetProfileComboBoxType.Autocomplete){//As 'Other' in UI
+								field.get('data').setValidators(EditorCustomValidators.atLeastOneElementListValidator('autoCompleteSingleDataList'));
+							}else if(comboType === DatasetProfileComboBoxType.WordList){
+								field.get('data').setValidators(EditorCustomValidators.atLeastOneElementListValidator('options'));
+							}
+							
+						}else if(renderStyleValue === DatasetProfileFieldViewStyle.RadioBox){
+							field.get('data').setValidators(EditorCustomValidators.atLeastOneElementListValidator('options'));
+						}
+					});
+				}
+			});
+		}catch(e){
+			console.error('Error initializing validators.');
+			console.error(e);
+		}
+
+	}
+
 }
+
+interface InvalidControl{
+	key: string,
+	errors: any,
+	id: string,
+	invalidSubControls: InvalidControl[]
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.html
index c303267ef..45a016601 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.html
@@ -1,23 +1,23 @@
-<div class="dmp-criteria">
-	<mat-card class="mat-card">
-		<div class="row">
-			<mat-form-field class="col-md-6">
-				<input matInput placeholder=" {{'CRITERIA.DATASET-PROFILE.LIKE'| translate}}" name="datasetProfileLike"
-					[(ngModel)]="criteria.like" (ngModelChange)="controlModified()">
-			</mat-form-field>
-			<mat-form-field class="col-md-6">
-				<mat-select [(ngModel)]="criteria.status" (ngModelChange)="controlModified()" placeholder=" {{'CRITERIA.DATASET-PROFILE.STATUS' | translate}}">
-					<mat-option [value]="null">{{'DATASET-PROFILE-STATUS.NONE' | translate}}</mat-option>
-					<mat-option [value]="0">{{'DATASET-PROFILE-STATUS.DRAFT' | translate}}</mat-option>
-					<mat-option [value]="1">{{'DATASET-PROFILE-STATUS.FINALIZED' | translate}}</mat-option>
-				</mat-select>
-			</mat-form-field>
-			<div class="col"></div>
-			<div class="col-auto">
-				<!--  imgFileInput.click() && -->
-				<button mat-raised-button class="col-auto" color="primary" (click)="openDialog()"
-					type="button">{{ 'DATASET-WIZARD.UPLOAD.UPLOAD-XML' | translate }}</button>
-			</div>
+<div class="row align-items-end">
+	<div class="col-auto">
+		<div class="d-lg-inline-block pr-2 text-muted">
+			<span>{{'CRITERIA.USERS.SHOW' | translate}}:</span>
 		</div>
-	</mat-card>
+
+		<mat-form-field class="status-form-field">
+			<mat-select [(ngModel)]="criteria.status" (ngModelChange)="controlModified()" placeholder=" {{'CRITERIA.DATASET-PROFILE.STATUS' | translate}}">
+				<mat-option [value]="null">{{'DATASET-PROFILE-STATUS.NONE' | translate}}</mat-option>
+				<mat-option [value]="0">{{'DATASET-PROFILE-STATUS.DRAFT' | translate}}</mat-option>
+				<mat-option [value]="1">{{'DATASET-PROFILE-STATUS.FINALIZED' | translate}}</mat-option>
+			</mat-select>
+		</mat-form-field>
+
+	</div>
+	<div class="col-auto ml-lg-auto">
+		<mat-form-field class="search-form-field">
+			<input matInput placeholder=" {{'CRITERIA.DATASET-PROFILE.LIKE'| translate}}" name="datasetProfileLike"
+				[(ngModel)]="criteria.like" (ngModelChange)="controlModified()">
+				<mat-icon matPrefix>search</mat-icon>
+		</mat-form-field>
+	</div>
 </div>
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.scss
index e69de29bb..9b64c055a 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.scss
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.scss
@@ -0,0 +1,17 @@
+.mat-form-field{
+    display: inline-block !important;
+}
+
+:host ::ng-deep .status-form-field .mat-form-field-wrapper {
+	background-color: white !important;
+	padding-bottom: 0 !important;
+}
+
+:host ::ng-deep .search-form-field .mat-form-field-wrapper {
+	background-color: white !important;
+	padding-bottom: 0 !important;
+}
+
+:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
+	padding: 0.3rem 0rem 0.6rem 0rem !important;
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.ts
index f0b1b3e17..7cf625f1f 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { DatasetProfileCriteria } from '@app/core/query/dataset-profile/dataset-profile-criteria';
 import { DatasetProfileService } from '@app/core/services/dataset-profile/dataset-profile.service';
-import { DialodConfirmationUploadDatasetProfiles } from '@app/ui/admin/dataset-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component';
+import { DialogConfirmationUploadDatasetProfiles } from '@app/ui/admin/dataset-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component';
 import { BaseCriteriaComponent } from '@app/ui/misc/criteria/base-criteria.component';
 import { ValidationErrorModel } from '@common/forms/validation/error-model/validation-error-model';
 import { TranslateService } from '@ngx-translate/core';
@@ -11,7 +11,7 @@ import { takeUntil } from 'rxjs/operators';
 @Component({
 	selector: 'app-dataset-profile-criteria-component',
 	templateUrl: './dataset-profile.component.html',
-	styleUrls: ['./dataset-profile.component.scss'],
+	styleUrls: ['./dataset-profile.component.scss']
 })
 export class DatasetProfileCriteriaComponent extends BaseCriteriaComponent implements OnInit {
 
@@ -47,26 +47,4 @@ export class DatasetProfileCriteriaComponent extends BaseCriteriaComponent imple
 		}
 	}
 
-	openDialog(): void {
-		const dialogRef = this.dialog.open(DialodConfirmationUploadDatasetProfiles, {
-			width: '500px',
-			restoreFocus: false,
-			data: {
-				message: this.language.instant('DATASET-WIZARD.UPLOAD.UPLOAD-XML-FILE-TITLE'),
-				confirmButton: this.language.instant('DATASET-WIZARD.UPLOAD.UPLOAD-XML'),
-				cancelButton: this.language.instant('DATASET-WIZARD.UPLOAD.UPLOAD-XML-FILE-CANCEL'),
-				name: "",
-				file: FileList,
-				sucsess: false
-			}
-		});
-		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(data => {
-			if (data && data.sucsess && data.name != null && data.file != null) {
-				this.datasetService.uploadFile(data.file, data.name)
-					.pipe(takeUntil(this._destroyed))
-					.subscribe();
-			}
-		});
-	}
-
 }
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component.html
index dec3649ac..d071e4cb2 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component.html
@@ -4,22 +4,41 @@
 			<h4>{{ data.message }}</h4>
 		</div>
 		<div class="col-auto ml-auto">
-			<input class="hidden" type="file" #imgFileInput (change)="selectXML($event)" accept="text/xml" />
-			<button class="col-auto attach-file"  (click)="imgFileInput.click()" type="button">
-				<mat-icon color="{{btnColore}}">attach_file</mat-icon>
-			</button>
+			<mat-icon class="close-btn" (click)="cancel()">close</mat-icon>
 		</div>
 	</div>
+
+	<div class="row">
+		<div class="col-12">
+			<ngx-dropzone class="drop-file" (change)="selectXML($event)" [accept]="'text/xml'" [multiple]="false">
+				<ngx-dropzone-preview class="file-preview" [removable]="true" *ngIf="hasProfile()" (removed)="onRemove()">
+					<ngx-dropzone-label class="file-label">{{ selectedFileName }}</ngx-dropzone-label>
+				</ngx-dropzone-preview>
+			</ngx-dropzone>
+		</div>
+	</div>
+
+	<div class="row">
+		<div class="col-12 d-flex justify-content-center attach-btn">
+			<button mat-button type="button" class="col-auto attach-file" (click)="imgFileInput.click()">
+				<mat-icon class="mr-2">input</mat-icon>
+				<span *ngIf="!hasProfile()">{{'GENERAL.START-NEW-DMP-DIALOG.UPLOAD-FILE' | translate}}</span>
+				<span *ngIf="hasProfile()">{{'GENERAL.START-NEW-DMP-DIALOG.REPLACE-FILE' | translate}}</span>
+			</button>
+			<input class="hidden" type="file" #imgFileInput (change)="selectXML($event)" accept="text/xml" />
+		</div>
+	</div>
+
 	<div class="row">
 		<mat-form-field class="col-12">
 			<input matInput placeholder="{{'DATASET-WIZARD.UPLOAD.UPLOAD-XML-NAME'| translate}}" name="datasetProfileName" [(ngModel)]="data.name">
 		</mat-form-field>
 		<div class="col-auto">
-			<button mat-raised-button type="button" (click)="cancel()">{{ data.cancelButton }}</button>
+			<button mat-button type="button" class="cancel-btn" (click)="cancel()">{{ data.cancelButton }}</button>
 		</div>
 		<div class="col"></div>
 		<div class="col-auto">
-			<button mat-raised-button color="primary" type="button" (click)="confirm()" [disabled]="!hasProfile()">{{ data.confirmButton }}</button>
+			<button mat-button color="primary" class="next-btn" type="button" (click)="confirm()" [disabled]="!hasProfile()">{{ data.confirmButton }}</button>
 		</div>
 	</div>
 </div>
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component.scss
index 226db6ce8..63c42f81e 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component.scss
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component.scss
@@ -1,3 +1,102 @@
 .hidden {
     display: none;
+}
+
+
+.cancel-btn {
+	background: #ffffff 0% 0% no-repeat padding-box;
+	border: 1px solid #b5b5b5;
+	border-radius: 30px;
+	width: 101px;
+	height: 43px;
+	color: #212121;
+	font-weight: 500;
+}
+
+.next-btn {
+	background: #ffffff 0% 0% no-repeat padding-box;
+	border: 1px solid #129d99;
+	border-radius: 30px;
+	opacity: 1;
+	width: 101px;
+	height: 43px;
+	color: #129d99;
+	font-weight: 500;
+}
+
+.next-btn[disabled] {
+	width: 100px;
+	height: 43px;
+	background: #ffffff 0% 0% no-repeat padding-box;
+	border: 1px solid #b5b5b5;
+	border-radius: 30px;
+	opacity: 1;
+}
+
+.next-btn:not([disabled]):hover {
+	background-color: #129d99;
+	color: #ffffff;
+}
+
+//ngx dropzone
+.drop-file {
+	background-color: #fafafa;
+	border: 1px dashed #d1d1d1;
+	border-radius: 4px;
+	max-width: 480px;
+	height: 98px;
+	margin-top: 0.5rem;
+}
+
+.file-preview {
+	height: auto !important;
+	width: auto !important;
+	max-width: 500px !important;
+	min-height: 1rem !important;
+
+	background-color: #e0e0e0 !important;
+	background-image: none !important;
+	color: rgba(0, 0, 0, 0.87) !important;
+	font-weight: 500 !important;
+	border-radius: 24px !important;
+	line-height: 1.25 !important;
+}
+
+.file-label {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-size: 14px !important;
+}
+
+::ng-deep ngx-dropzone-remove-badge {
+	opacity: 1 !important;
+	margin-left: .5rem !important;
+	position: initial !important;
+}
+
+
+//attach file
+
+.attach-btn {
+	top: -20px;
+}
+
+.attach-file {
+	width: 156px;
+	height: 44px;
+	color: #ffffff;
+	background: #129d99 0% 0% no-repeat padding-box;
+	box-shadow: 0px 3px 6px #1e202029;
+	border-radius: 30px;
+}
+
+.attach-file:hover {
+	background-color: #ffffff;
+	border: 1px solid #129d99;
+	color: #129d99;
+}
+
+.close-btn:hover{
+    cursor: pointer;
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component.ts
index 8db9791c4..2fe4b0343 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component.ts
@@ -7,30 +7,35 @@ import { Inject, Component } from '@angular/core';
 	templateUrl: './dialog-confirmation-upload-profiles.component.html',
 	styleUrls: ['./dialog-confirmation-upload-profiles.component.scss']
 })
-export class DialodConfirmationUploadDatasetProfiles {
+export class DialogConfirmationUploadDatasetProfiles {
 
 	sizeError = false;
-	btnColore:String="primary";
+	selectedFileName= "";
 	selectFile =false;
 	maxFileSize: number = 1048576;
 
 	constructor(
-		public dialogRef: MatDialogRef<DialodConfirmationUploadDatasetProfiles>,
+		public dialogRef: MatDialogRef<DialogConfirmationUploadDatasetProfiles>,
 		@Inject(MAT_DIALOG_DATA) public data: any
 	) { }
 
 
 	selectXML(event) {
-		const file: FileList = event.target.files;
+		let file: FileList = null;
+
+		if(event.target && event.target.files){
+			file = event.target.files;
+		}else if(event.addedFiles && event.addedFiles.length){
+			file = event.addedFiles;
+		}
+		if(!file) return;//no select closed with cancel . no file selected
 		const size: number = file[0].size;  // Get file size.
 		this.sizeError = size > this.maxFileSize;  // Checks if file size is valid.
 		const formdata: FormData = new FormData();
 		if (!this.sizeError) {
 			this.data.file = file;
 			this.selectFile=true;
-			this.btnColore="primary";
-		}else{
-			this.btnColore="warn";
+			this.selectedFileName = file[0].name;
 		}
 		this.data.name = file[0].name;
 	}
@@ -41,7 +46,6 @@ export class DialodConfirmationUploadDatasetProfiles {
 	}
 
 	confirm() {
-		this.data.name = this.data.name;
 		this.data.sucsess = true;
 		this.dialogRef.close(this.data);
 	}
@@ -50,4 +54,10 @@ export class DialodConfirmationUploadDatasetProfiles {
 		return (this.selectFile && !this.sizeError);
 	}
 
+	//remove selected file
+	onRemove(){
+		this.data.name="";
+		this.selectFile = false;
+		this.selectedFileName = "";
+	}
 }
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.html
index bd754914e..6414e32fb 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.html
@@ -1,9 +1,26 @@
 <div class="main-content dataset-profile-listing">
 	<div class="container-fluid">
-		<h3>{{titlePrefix}} {{'DATASET-PROFILE-LISTING.TITLE' | translate}}</h3>
 
-		<app-dataset-profile-criteria-component></app-dataset-profile-criteria-component>
-		<mat-card class="row mat-card">
+		<div class="row">
+			<div class="col-auto">
+				<h3>{{titlePrefix}} {{'DATASET-PROFILE-LISTING.TITLE' | translate}}</h3>
+			</div>
+			<div class="col-12 col-lg d-flex justify-content-lg-end">
+				<div class="align-self-center">
+					<button mat-raised-button class="import-btn" (click)="openDialog()">{{ 'DATASET-WIZARD.UPLOAD.UPLOAD-XML' | translate }}</button>
+					<button mat-raised-button class="create-btn ml-md-3" [routerLink]="['./new']">Create Dataset Template</button>
+				</div>
+			</div>
+		</div>
+		<div class="row">
+			<div class="col-12 mt-5">
+				<app-dataset-profile-criteria-component></app-dataset-profile-criteria-component>
+			</div>
+		</div>
+
+		<div class="mat-elevation-z6">
+
+		<!-- <mat-card class="row mat-card"> -->
 			<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
 
 				<!-- Column Definition: Name -->
@@ -31,12 +48,12 @@
 				<ng-container cdkColumnDef="status">
 					<mat-header-cell *matHeaderCellDef mat-sort-header="status">{{'DATASET-PROFILE-LISTING.COLUMNS.STATUS' |
 						translate}}</mat-header-cell>
-					<mat-cell *matCellDef="let row">{{ (row.status | parseStatus) | translate}}</mat-cell>
+					<mat-cell *matCellDef="let row"> <div [ngClass]="['status-chip',getStatusClass(row.status)]">{{ (row.status | parseStatus) | translate}}</div></mat-cell>
 				</ng-container>
 
 				<!-- Column Definition: Submission Time -->
 				<ng-container cdkColumnDef="actions">
-					<mat-header-cell *matHeaderCellDef>{{'DATASET-PROFILE-LISTING.COLUMNS.ACTIONS' | translate}}
+					<mat-header-cell *matHeaderCellDef><!-- {{'DATASET-PROFILE-LISTING.COLUMNS.ACTIONS' | translate}} -->
 					</mat-header-cell>
 					<mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
 						<mat-menu #actionsMenu="matMenu">
@@ -50,10 +67,18 @@
 								<mat-icon>library_books</mat-icon>
 								{{'DATASET-PROFILE-LISTING.ACTIONS.VIEW-VERSIONS' | translate}}
 							</button>
+							<button mat-menu-item (click)="downloadXML(row.id)" *ngIf="row.status === datasetStatusEnum.Finalized">
+								<mat-icon>download</mat-icon>
+								{{'DMP-PROFILE-EDITOR.ACTIONS.DOWNLOAD-XML' | translate}}
+							</button>
+							<button mat-menu-item (click)="deleteTemplate(row.id)">
+								<mat-icon>delete</mat-icon>
+								{{'DATASET-PROFILE-LISTING.ACTIONS.DELETE' | translate}}
+							</button>
 							<!--<button *ngIf="row.status==1" mat-menu-item (click)="makeItPublic(row.id)"><mat-icon>people_outline</mat-icon>{{'DATASET-LISTING.ACTIONS.MAKE-IT-PUBLIC' | translate}}</button> -->
 						</mat-menu>
 						<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
-							<mat-icon>more_vert</mat-icon>
+							<mat-icon>more_horiz</mat-icon>
 						</button>
 					</mat-cell>
 				</ng-container>
@@ -63,14 +88,10 @@
 				<!-- (click)="rowClick(row.id)" -->
 
 			</mat-table>
+
 			<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
 			</mat-paginator>
-		</mat-card>
-
-		<div class="row justify-content-end pr-2">
-			<button mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]="['./new']">
-				<mat-icon class="mat-24">add</mat-icon>
-			</button>
+		<!-- </mat-card> -->
 		</div>
 	</div>
 </div>
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.scss
index b2318bf16..456be7372 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.scss
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.scss
@@ -1,9 +1,14 @@
 .dataset-profile-listing {
   margin-top: 1rem;
+  margin-left: 1rem;
+	margin-right: 2rem;
 }
 
 .mat-table {
-  margin: 24px;
+	margin-top: 47px;
+  // margin-bottom: 20px;
+  border-radius: 4px;
+
 }
 
 .mat-fab-bottom-right {
@@ -16,6 +21,10 @@
   z-index: 5;
 }
 
+.mat-header-row{
+  background: #f3f5f8;
+}
+
 .full-width {
   width: 100%;
 }
@@ -26,48 +35,85 @@
 
 .mat-row {
   cursor: pointer;
+  min-height: 4.5em;
 }
 
 mat-row:hover {
-  background-color: lightgray;
+  background-color: #eef5f6;
 }
 
+.status-chip{
+  
+  border-radius: 20px;
+  padding-left: 1em;
+  padding-right: 1em;
+  padding-top: 0.2em;
+  font-size: .8em;
+}
+
+.status-chip-finalized{
+  color: #568b5a;
+  background: #9dd1a1 0% 0% no-repeat padding-box;
+}
+
+.status-chip-draft{
+  color: #00c4ff;
+  background: #d3f5ff 0% 0% no-repeat padding-box;
+}
 // mat-row:nth-child(even){
 //     background-color:red;
 //     }
 
-mat-row:nth-child(odd) {
-  background-color: #0c748914;
-  //   background-color: #eef0fb;
-}
+// mat-row:nth-child(odd) {
+//   background-color: #0c748914;
+//   //   background-color: #eef0fb;
+// }
 
-::ng-deep .mat-paginator-container {
+:host ::ng-deep .mat-paginator-container {
   flex-direction: row-reverse !important;
   justify-content: space-between !important;
   background-color: #f6f6f6;
-  height: 30px;
-  min-height: 30px !important;
+  align-items: center;
+  // height: 30px;
+  // min-height: 30px !important;
 }
 
-::ng-deep .mat-paginator-page-size {
-  height: 43px;
-}
+// ::ng-deep .mat-paginator-page-size {
+//   height: 43px;
+// }
 
-::ng-deep .mat-paginator-range-label {
-  margin: 15px 32px 0 24px !important;
-}
+// ::ng-deep .mat-paginator-range-label {
+//   margin: 15px 32px 0 24px !important;
+// }
 
-::ng-deep .mat-paginator-range-actions {
-  width: 55% !important;
-  min-height: 43px !important;
-  justify-content: space-between;
-}
+// ::ng-deep .mat-paginator-range-actions {
+//   width: 55% !important;
+//   min-height: 43px !important;
+//   justify-content: space-between;
+// }
 
-::ng-deep .mat-paginator-navigation-previous {
-  margin-left: auto !important;
-}
+// ::ng-deep .mat-paginator-navigation-previous {
+//   margin-left: auto !important;
+// }
 
-::ng-deep .mat-icon-button {
-  height: 30px !important;
-  font-size: 12px !important;
+// ::ng-deep .mat-icon-button {
+//   height: 30px !important;
+//   font-size: 12px !important;
+// }
+
+.import-btn {
+  background: #ffffff 0% 0% no-repeat padding-box;
+  border-radius: 30px;
+  // color: #129d99;
+  // border: 1px solid #129d99;
+  padding-left: 2em;
+  padding-right: 2em;
+  color: #000;
+  border: 1px solid #000;
 }
+.create-btn {
+  border-radius: 30px;
+  background-color: #f7dd72;
+  padding-left: 2em;
+  padding-right: 2em;
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.ts
index 0b17a2951..fafcd4f0f 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.ts
@@ -1,9 +1,11 @@
 import { DataSource } from '@angular/cdk/table';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute, Params, Router } from '@angular/router';
+import { DatasetStatus } from '@app/core/common/enum/dataset-status';
 import { DataTableRequest } from '@app/core/model/data-table/data-table-request';
 import { DatasetListingModel } from '@app/core/model/dataset/dataset-listing';
 import { DmpModel } from '@app/core/model/dmp/dmp';
@@ -11,13 +13,17 @@ import { DatasetProfileCriteria } from '@app/core/query/dataset-profile/dataset-
 import { DatasetProfileService } from '@app/core/services/dataset-profile/dataset-profile.service';
 import { DmpService } from '@app/core/services/dmp/dmp.service';
 import { MatomoService } from '@app/core/services/matomo/matomo-service';
-import { UiNotificationService } from '@app/core/services/notification/ui-notification-service';
+import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service';
 import { DatasetProfileCriteriaComponent } from '@app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component';
 import { BreadcrumbItem } from '@app/ui/misc/breadcrumb/definition/breadcrumb-item';
 import { BaseComponent } from '@common/base/base.component';
+import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
 import { TranslateService } from '@ngx-translate/core';
+import * as FileSaver from 'file-saver';
 import { merge as observableMerge, Observable, of as observableOf } from 'rxjs';
 import { map, startWith, switchMap, takeUntil } from 'rxjs/operators';
+import { DialogConfirmationUploadDatasetProfiles } from './criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component';
+import { ParseStatus } from './pipe/parse-status.pipe';
 
 @Component({
 	selector: 'app-dataset-profile-listing-component',
@@ -37,6 +43,7 @@ export class DatasetProfileListingComponent extends BaseComponent implements OnI
 	titlePrefix: String;
 	dmpId: String;
 	itemId: string;
+	datasetStatusEnum = DatasetStatus;
 
 	constructor(
 		private datasetService: DatasetProfileService,
@@ -46,7 +53,9 @@ export class DatasetProfileListingComponent extends BaseComponent implements OnI
 		private language: TranslateService,
 		private uiNotificationService: UiNotificationService,
 		private httpClient: HttpClient,
-		private matomoService: MatomoService
+		private matomoService: MatomoService,
+		private dialog: MatDialog,
+		private datasetProfileService: DatasetProfileService,
 	) {
 		super();
 	}
@@ -117,11 +126,121 @@ export class DatasetProfileListingComponent extends BaseComponent implements OnI
 	viewVersions(rowId, rowLabel) {
 		this.router.navigate(['/dataset-profiles/versions/' + rowId], { queryParams: { groupLabel: rowLabel } });
 	}
+	downloadXML(datasetProfileId: string): void {
+		this.datasetProfileService.downloadXML(datasetProfileId)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(response => {
+				const blob = new Blob([response.body], { type: 'application/xml' });
+				const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
 
+				FileSaver.saveAs(blob, filename);
+			});
+	}
+	getFilenameFromContentDispositionHeader(header: string): string {
+		const regex: RegExp = new RegExp(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/g);
+
+		const matches = header.match(regex);
+		let filename: string;
+		for (let i = 0; i < matches.length; i++) {
+			const match = matches[i];
+			if (match.includes('filename="')) {
+				filename = match.substring(10, match.length - 1);
+				break;
+			} else if (match.includes('filename=')) {
+				filename = match.substring(9);
+				break;
+			}
+		}
+		return filename;
+	}
+
+	deleteTemplate(id: string){
+		if(id){
+			const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+				restoreFocus: false,
+				data: {
+					message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
+					confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'),
+					cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL'),
+					isDeleteConfirmation: true
+				}
+			});
+
+			dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
+				if (result) {
+					//this.form.get('status').setValue(DatasetProfileEnum.DELETED);
+					this.datasetProfileService.delete(id, null)
+						.pipe(takeUntil(this._destroyed))
+						.subscribe(
+							complete => {
+								this.uiNotificationService.snackBarNotification(this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-DATASET-PROFILE-DELETE'), SnackBarNotificationLevel.Success);
+								this.refresh();
+							},
+							error => {
+								this.onCallbackError(error);
+								if (error.error.statusCode == 674) {
+									this.uiNotificationService.snackBarNotification(this.language.instant('GENERAL.SNACK-BAR.UNSUCCESSFUL-DATASET-PROFILE-DELETE'), SnackBarNotificationLevel.Error);
+								} else {
+									this.uiNotificationService.snackBarNotification(this.language.instant(error.message), SnackBarNotificationLevel.Error);
+								}
+							}
+						);
+				}
+			});
+
+
+		}
+	}
+
+	onCallbackError(errorResponse: HttpErrorResponse) {
+		this.uiNotificationService.snackBarNotification(errorResponse.message, SnackBarNotificationLevel.Warning);
+	}
 	// makeItPublic(id: String) {
 	//   debugger;
 	//   this.datasetService.makeDatasetPublic(id).pipe(takeUntil(this._destroyed)).subscribe();
 	// }
+
+	openDialog(): void {
+		const dialogRef = this.dialog.open(DialogConfirmationUploadDatasetProfiles, {
+			width: '500px',
+			restoreFocus: false,
+			data: {
+				message: this.language.instant('DATASET-WIZARD.UPLOAD.UPLOAD-XML-FILE-TITLE'),
+				confirmButton: this.language.instant('DATASET-WIZARD.UPLOAD.UPLOAD-XML'),
+				cancelButton: this.language.instant('DATASET-WIZARD.UPLOAD.UPLOAD-XML-FILE-CANCEL'),
+				name: "",
+				file: FileList,
+				sucsess: false
+			}
+		});
+		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(data => {
+			if (data && data.sucsess && data.name != null && data.file != null) {
+				this.datasetService.uploadFile(data.file, data.name)
+					.pipe(takeUntil(this._destroyed))
+					.subscribe(_=>{
+						this.uiNotificationService.snackBarNotification('Template successfully uploaded', SnackBarNotificationLevel.Success);
+						this.refresh();
+					},
+					error=>{
+						this.uiNotificationService.snackBarNotification(error.message, SnackBarNotificationLevel.Error);
+					}
+					);
+			}
+		});
+	}
+
+	/**
+	 * gets as a a pameter a number representing the status and returns the class that is applied
+	 * to status-chip */
+	getStatusClass(status: DatasetStatus):string{
+		
+		if(status == DatasetStatus.Finalized){
+			return 'status-chip-finalized'
+		}
+
+		return 'status-chip-draft';
+	}
+
 }
 
 export class DatasetDataSource extends DataSource<DatasetListingModel> {
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/pipe/parse-status.pipe.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/pipe/parse-status.pipe.ts
index 33cbd4b8c..82b75d2ab 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/pipe/parse-status.pipe.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/pipe/parse-status.pipe.ts
@@ -1,4 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core';
+import { DatasetStatus } from '@app/core/common/enum/dataset-status';
 
 @Pipe({
 	name: 'parseStatus',
@@ -10,7 +11,17 @@ export class ParseStatus implements PipeTransform {
 	}
 
 
-	parseStatus(status: number): string {
-		return status != 0 ? 'DATASET-PROFILE-STATUS.FINALIZED' : 'DATASET-PROFILE-STATUS.DRAFT';
+	parseStatus(status: DatasetStatus): string {
+
+		switch (status) {
+			case DatasetStatus.Finalized:
+				return 'DATASET-PROFILE-STATUS.FINALIZED';
+			case DatasetStatus.Draft: 
+				return	'DATASET-PROFILE-STATUS.DRAFT';
+			case DatasetStatus.Deleted:
+				return	'DATASET-PROFILE-STATUS.DRAFT.DELETED';
+			default:
+				return 'DATASET-PROFILE-STATUS.DRAFT.NONE';
+		}
 	}
 }
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-entry.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-entry.ts
new file mode 100644
index 000000000..b1ddf7e9a
--- /dev/null
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-entry.ts
@@ -0,0 +1,29 @@
+import { AbstractControl } from "@angular/forms";
+
+export interface ToCEntry {
+	id: string;
+	label: string;
+	subEntriesType: ToCEntryType;
+	subEntries: ToCEntry[];
+	type: ToCEntryType;
+	form: AbstractControl;
+	numbering: string;
+}
+
+
+export enum ToCEntryType {
+	Page = 0,
+	Section = 1,
+	FieldSet = 2,
+	Field = 3
+}
+
+export interface NewEntryType {
+	childType: ToCEntryType,
+	parent: ToCEntry
+}
+
+export interface TableUpdateInfo{
+	draggedItemId?: string;
+	data?:any;
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.html b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.html
new file mode 100644
index 000000000..72a3d7179
--- /dev/null
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.html
@@ -0,0 +1,249 @@
+<!-- <span style="cursor: pointer;" [ngClass]="{'active': itemSelected?.id == parentLink?.id}" (click)="itemClicked(parentLink)" *ngIf="!(parentLink.type == undefined)" >
+	{{parentLink?.numbering}} {{parentLink?.label? parentLink?.label : 'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}}
+	<span class="mat-button" (click)="deleteEntry(parentLink)" *ngIf="itemSelected?.id == parentLink?.id"><mat-icon>delete</mat-icon></span>
+</span> -->
+
+<div class="table-item row align-items-center" *ngIf="!(parentLink.type == undefined)">	
+	<div class="col link-info" 
+	>
+	<!-- [ngStyle]="{'padding-top': (!((parentLink?.subEntriesType == tocEntryType.FieldSet) && !selectedItemInLinks) || itemSelected?.id == parentLink.id)? '0em': '.6em'}" -->
+
+		<!-- <span style="cursor: pointer;" [ngClass]="{'active': itemSelected?.id == parentLink?.id}" (click)="itemClicked(parentLink)" >
+			{{parentLink?.numbering}} {{parentLink?.label? parentLink?.label : 'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}}
+		</span> -->
+
+		<!-- <span style="cursor: pointer;" [ngClass]="{'active': itemSelected?.id == parentLink?.id}" (click)="itemClicked(parentLink)" 
+		 [matBadge]="parentLink.subEntries?.length"
+		 matBadgeOverlap="false"
+		 [matBadgeHidden]="!((parentLink?.subEntriesType == tocEntryType.FieldSet) && !selectedItemInLinks) || itemSelected?.id == parentLink.id"
+		 matBadgePosition="before"
+		 matBadgeColor="accent"
+		 matBadgeSize="small"
+
+		 [ngStyle]="{'font-size' : (parentLink.type == tocEntryType.FieldSet? '.9rem':'1rem')}"
+		 > -->
+		<span class="table-label-element" 
+		 [ngClass]="{'table-label-element-active': itemSelected?.id == parentLink?.id, 'text-danger': colorError() ||( (parentLink?.subEntriesType === tocEntryType.FieldSet )&& !colorError() && !selectedItemInLinks && parentLink?.form.invalid && colorizeInvalid && (itemSelected?.id != parentLink?.id) && !_findTocEntryById(itemSelected?.id, parentLink?.subEntries))}"
+		 (click)="itemClicked(parentLink)" 
+		 [ngStyle]="{'font-size' : (parentLink.type == tocEntryType.FieldSet? '.9rem':'1rem')}"
+		 [id]="'TABLE_ENTRY'+parentLink.id"
+		 >
+			<!-- {{parentLink?.numbering}} {{parentLink?.label? parentLink?.label : 'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}} -->
+			<!-- {{parentLink?.numbering}} {{parentLink?.form.get('title').value? parentLink?.form.get('title').value : ('DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate) + ' '+ ( (parentLink.type ===tocEntryType.Page? ('DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.PAGE' | translate) : (parentLink.type === tocEntryType.Section? ('DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION' | translate) : '') ) | lowercase )}} -->
+			{{parentLink?.numbering}} {{parentLink?.form.get('title').value? parentLink?.form.get('title').value : 'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}}
+			<ng-container *ngIf="!parentLink.form.get('title').value" [ngSwitch]="parentLink.type">
+				<ng-container *ngSwitchCase="tocEntryType.FieldSet">
+					{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.QUESTION' | translate |lowercase}}
+				</ng-container>
+				<ng-container *ngSwitchCase="tocEntryType.Section">
+					{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION' | translate |lowercase}}
+				</ng-container>
+				<ng-container *ngSwitchCase="tocEntryType.Page">
+					{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.PAGE' | translate | lowercase}}
+				</ng-container>
+
+			</ng-container>
+			<!-- {{parentLink?.numbering}} {{parentLink?.form.get('title').value? parentLink?.form.get('title').value : parentLink.id}} -->
+		</span>
+
+
+	</div>
+	<div class="col-auto d-flex align-items-center" >
+
+		<ng-container *ngIf="!(!((parentLink?.subEntriesType == tocEntryType.FieldSet) && !selectedItemInLinks) || itemSelected?.id == parentLink.id ||isDragging)">
+			<!-- <mat-icon class="text-danger" style="font-size: 1.4em;" *ngIf="!colorError() && parentLink?.form.invalid && colorizeInvalid && allFieldsAreTouched(parentLink?.form)">priority_high</mat-icon> -->
+			<span class="badge-ball"
+			>
+				{{parentLink.subEntries?.length}}
+			</span>
+		</ng-container>
+
+
+		<span style="cursor: pointer;" (click)="deleteEntry(parentLink)"
+		[hidden]="!(!viewOnly && (itemSelected?.id == parentLink?.id) && (parentLink?.type != tocEntryType.FieldSet))"
+		>
+			<mat-icon style="font-size: 1.4em;">delete</mat-icon>
+		</span>
+	</div>
+</div>
+
+<!-- When item is not selected then show only the pages (first level) -->
+<!-- <ng-container *ngIf="tocEntryIsChildOf(itemSelected,parentLink) || (!itemSelected && parentLink?.subEntriesType == tocEntryType.Page)"> -->
+	<!-- [ngClass]="{'border-left-active':itemSelected?.id == parentLink?.id, 'pl-1':itemSelected?.id == parentLink?.id, 'pb-4': isDragging && (parentLink?.type!= tocEntryType.FieldSet) && (parentLink?.id != draggingItemId) }" -->
+	<div dragula="TABLEDRAG" class="ml-2"  
+	[ngClass]="{'border-left-active':itemSelected?.id == parentLink?.id, 'ml-1':itemSelected?.id == parentLink?.id, 'pb-4': isDragging && (parentLink?.type!= tocEntryType.FieldSet) && (parentLink?.id != draggingItemId) }"
+	[hidden]="!((parentLink?.subEntriesType!= tocEntryType.FieldSet) || selectedItemInLinks || parentLink?.id === itemSelected?.id ||isDragging)"
+	class="cdk-link-list"
+	[id]="parentLink.id"
+	[ngStyle]="{'border': overContainerId === parentLink?.id? '1px solid #129D99': '', 'min-height': ((!links?.length||(links.length ==1) ) && (parentLink?.type != tocEntryType.FieldSet) && (isDragging) && (draggingItemId != parentLink?.id)) ? '3em':'inherit'}"
+	>
+		<ng-container *ngIf="draggingItemId != parentLink?.id">
+		
+			<div *ngFor="let link of links; last as isLast"
+				[ngClass]="{'mb-3': link.type === tocEntryType.Page}"
+				[id]="DRAGULA_ITEM_ID_PREFIX + link.id"
+			>
+				<div  class="docs-link mt-0">
+					<!-- <div  class="link-name"> -->
+				
+						<!-- <div class="table-item row">	
+							<div class="col link-info">
+								<span style="cursor: pointer;" [ngClass]="{'active': itemSelected?.id == link.id}" (click)="itemClicked(link)" >
+									{{link.numbering}} {{link.label? link.label : 'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}}
+								</span>
+							</div>
+							<div class="table-item-actions col-auto" *ngIf="!viewOnly">
+								<button class="mat-button" (click)="deleteEntry(link)"><mat-icon>delete</mat-icon></button>
+							</div>
+						</div> -->
+				
+				
+						<!-- For dev purposes -->
+						<!-- <ng-container [ngSwitch]="link.type">
+							<div *ngSwitchCase="tocEntryType.FieldSet">
+								<span style="background-color: yellow;"> Fieldset</span>
+							</div>
+							<div *ngSwitchCase="tocEntryType.Page">
+								<span style="background-color: lightblue;"> Page</span>
+							</div>
+							<div *ngSwitchCase="tocEntryType.Section">
+								<span style="background-color: lightgreen;"> Section</span>
+							</div>
+						</ng-container> -->
+					<!-- </div> -->
+					<!-- <button cdkDragHandle>drab</button> -->
+					<div [ngClass]="{'ml-3': link.type != tocEntryType.Page }">
+						<app-dataset-profile-table-of-contents-internal-section 
+							[links]="link.subEntries"
+							(itemClick)="itemClicked($event)"
+							(removeEntry)="deleteEntry($event)"
+							[parentLink]="link"
+							[itemSelected] = "itemSelected"
+							(createFooEntry)="createNewEntry($event)"
+							[viewOnly]="viewOnly"
+							(dataNeedsRefresh)="onDataNeedsRefresh()"
+							[DRAGULA_ITEM_ID_PREFIX]="DRAGULA_ITEM_ID_PREFIX"
+							[overContainerId]="overContainerId"
+							[isDragging]="isDragging"
+							[draggingItemId]="draggingItemId"
+							[parentRootId]="parentRootId"
+							[colorizeInvalid]="colorizeInvalid">
+						</app-dataset-profile-table-of-contents-internal-section>
+
+
+
+						<ng-container *ngIf="!isDragging">
+
+							<!-- <div *ngIf="links && !viewOnly && !(parentLink?.subEntriesType == tocEntryType.Page) " > -->
+								<ng-container *ngIf="selectedItemInLinks && (link.type != tocEntryType.Page) && isLast  && (!viewOnly) &&(link.type != tocEntryType.FieldSet)">
+									<button class="mat-button add-new-entry" style="padding-left: 0px;" (click)="createNewEntry({childType:link.type,parent:parentLink})">
+										<!-- <mat-icon>add</mat-icon>  -->
+										<ng-container [ngSwitch]="link.type">
+											<ng-container *ngSwitchCase="tocEntryType.Section">
+												<div class="d-flex" style="align-items: center;" >
+													<mat-icon color="accent" style="font-size: 1.6em;margin-left: -0.3em;">add</mat-icon>
+														<!-- Create new subsection -->
+														{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-NEW-SUBSECTION' |translate}}
+												</div>
+
+
+												<!-- Subsection + -->
+											</ng-container>
+											<!-- <ng-container *ngSwitchCase="tocEntryType.Page">
+												Section
+											</ng-container> -->
+											<ng-container *ngSwitchCase="tocEntryType.FieldSet">
+												Field +
+											</ng-container>
+								
+										</ng-container>
+									</button>
+								</ng-container>
+							<!-- </div> -->
+						</ng-container>
+					</div>
+				</div>
+
+			</div>	<!-- END OF LOOP-->
+
+		</ng-container>
+		
+	</div>
+
+
+	<ng-container *ngIf="!isDragging">
+
+	
+
+	<!-- BUILD SUBENTRIES IF THEY DONT EXIST -- CURRENT ITEM DOES HAVE CHILDREN -->
+	<div *ngIf="(!links && parentLink.type!= tocEntryType.FieldSet) && !viewOnly &&parentLink?.id == itemSelected?.id" class="docs-link mt-0">
+		<div class="ml-3">
+	
+			<!-- Give option to generate section -->
+			<button class="mat-button" style="padding-left: 0px; display: block;" (click)="createNewEntry({childType:tocEntryType.Section,parent:parentLink})">
+				<!-- <mat-icon>add</mat-icon> -->
+				<!-- Subsection + -->
+
+				<div class="d-flex" style="align-items: center;" >
+					<mat-icon color="accent" style="font-size: 1.6em;margin-left: -0.3em;">add</mat-icon>
+						<!-- Create new subsection -->
+						{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-NEW-SUBSECTION' |translate}}
+				</div>
+
+			</button>
+	
+	
+			<!-- Give option to generate fieldset (only if parent is section) -->
+			<!-- <button *ngIf="parentLink.type == tocEntryType.Section" class="mat-button" style="padding-left: 0px;" (click)="createNewEntry({childType:tocEntryType.FieldSet,parent:parentLink})">
+				
+				Field +
+			</button> -->
+	
+	
+		</div>
+	</div>
+
+	<!-- BUILD TYPE OF SAME LEVEL AS LINK OF  LINKS -->
+	<!-- <div *ngIf="links && !viewOnly && !(parentLink?.subEntriesType == tocEntryType.Page) " >
+		<ng-container >
+			<button class="mat-button" style="padding-left: 0px;" (click)="createNewEntry({childType:parentLink.subEntriesType,parent:parentLink})">
+				<mat-icon>add</mat-icon> 
+				<ng-container [ngSwitch]="parentLink?.subEntriesType">
+					<ng-container *ngSwitchCase="tocEntryType.Section">
+						Subsection
+					</ng-container>
+					<ng-container *ngSwitchCase="tocEntryType.Page">
+						Section
+					</ng-container>
+					<ng-container *ngSwitchCase="tocEntryType.FieldSet">
+						Fieldset
+					</ng-container>
+		
+				</ng-container>
+			</button>
+		</ng-container>
+	</div> -->
+	<!-- </ng-container> -->
+
+	<!-- Only for the page -->
+	<!-- style="margin-left: -0.5em;" -->
+	<div *ngIf="parentLink?.subEntriesType == tocEntryType.Page && !viewOnly" >
+		<button class="mat-button mt-2" (click)="createNewEntry({childType:parentLink.subEntriesType,parent:parentLink})" style="padding-left:0px">
+			<!-- <mat-icon>add</mat-icon>  -->
+			<div class="d-flex" style="align-items: center;" >
+				<mat-icon color="accent" style="font-size: 1.6em;margin-left: -0.3em;">add</mat-icon>
+				<ng-container *ngIf="!links?.length else createsection">
+					{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-FIRST-SECTION'| translate}}
+					<!-- Create the first section -->
+				</ng-container>
+				<ng-template #createsection>
+					{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-NEW-SECTION'| translate}}
+					<!-- Create new section -->
+				</ng-template>
+			</div>
+		</button>
+		<!-- <button (click)="showDroplists()">show droplist</button>
+		<button (click)="showStructs()">structs</button> -->
+	</div>
+
+</ng-container>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.scss
new file mode 100644
index 000000000..03cd37891
--- /dev/null
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.scss
@@ -0,0 +1,113 @@
+// .docs-toc-container {
+//   width: 100%;
+//   padding: 5px 0 10px 0px;
+//   // cursor: pointer;
+//   // border-left: solid 4px #0c7489;
+
+//   .scroll-container {
+//     overflow-y: auto;
+//     // calc(100vh - 250px)
+//     // height: calc(100vh - 250px);
+//   }
+
+//   .docs-link {
+//     color: rgba(0, 0, 0, 0.54);
+//     //   color: mat-color($app-blue-theme-foreground, secondary-text);
+//     transition: color 100ms;
+
+//     &:hover,
+//     &.docs-active {
+//       .link-name {
+// 		background-color: #ececec;
+//     border-radius: 6px;
+//         cursor: pointer;;
+//         // color: #0c7489;
+//       }
+//       // color: mat-color($primary, if($is-dark-theme, 200, default));
+//     }
+//   }
+// }
+
+// .docs-toc-heading {
+//   margin: 0;
+//   padding: 0;
+//   font-size: 13px;
+//   font-weight: bold;
+// }
+
+// .table-item-actions{
+//   // display: none;
+//   display: inline-block;
+//   visibility: hidden;
+// }
+
+// .table-item:hover {
+//   .table-item-actions{
+//     // display: inline-block;
+//     visibility: visible;
+//   }
+// }
+
+// .table-item col{
+//   text-overflow: ellipsis;
+//   overflow: hidden;
+//   white-space: nowrap;
+// }
+
+.link-info{
+ // display: inline-block; cursor: pointer;
+  // padding-top: .6em;
+  // padding-left: .6em;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+
+.border-left-active{
+  border-left: 1px solid #000;
+}
+
+
+.side-bolder{
+  border-left: 1px solid red;
+}
+
+
+.cdk-link-list {
+
+  display: block;
+  // background: white;
+  overflow: hidden;
+}
+
+
+
+$blue-color : #129D99;
+$blue-color-light: #5cf7f2;
+$yellow: #f7dd72;
+.badge-ball{
+  display: inline-block;
+  border-radius: 50%;
+  background-color: #FFF;
+  font-size: small;
+  font-weight: bold;
+  min-width: 2em;
+  text-align: center;
+}
+
+.table-label-element{
+  cursor: pointer;
+  // font-weight: normal;
+  
+  // transition-property: font-weight;
+  // transition-duration: 160ms;
+  // transition-delay: 50ms;
+  // transition-timing-function: ease-in-out;
+}
+
+
+.table-label-element-active{
+  font-weight: bold;
+  // color: red;
+}
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.ts
new file mode 100644
index 000000000..922f1d050
--- /dev/null
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.ts
@@ -0,0 +1,281 @@
+import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
+import { DOCUMENT } from '@angular/common';
+import { Component, EventEmitter, Inject, Input, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
+import { BaseComponent } from '@common/base/base.component';
+import { NewEntryType, ToCEntry, ToCEntryType } from '../table-of-contents-entry';
+
+@Component({
+	selector: 'app-dataset-profile-table-of-contents-internal-section',
+	styleUrls: ['./table-of-contents-internal-section.scss'],
+	templateUrl: './table-of-contents-internal-section.html'
+})
+export class DatasetProfileTableOfContentsInternalSection extends BaseComponent implements OnInit {
+
+	@Input() links: ToCEntry[];
+	@Output() itemClick = new EventEmitter<ToCEntry>();
+	@Output() removeEntry = new EventEmitter<ToCEntry>();
+
+	@Output() createFooEntry = new EventEmitter<NewEntryType>();
+
+	@Output() dataNeedsRefresh = new EventEmitter<void>();
+
+
+
+	@Input() parentLink: ToCEntry;
+	@Input() itemSelected: ToCEntry;
+	@Input() DRAGULA_ITEM_ID_PREFIX;
+	@Input() overContainerId: string;
+	@Input() isDragging;
+	@Input() draggingItemId: string;
+	@Input() parentRootId: string;
+
+	@Input() colorizeInvalid:boolean = false;
+
+	@Input() viewOnly: boolean;
+	// @Input() dropListGroup: Set<string> = new Set<string>();
+	// @Input() dropListGroup: string[];
+
+	// @Input() dragHoveringOver: boolean = false;
+	// @Input() depth: number = 0;
+
+	// @Input() dropListStruct: { id: string, depth: number}[] = [];
+
+	constructor(
+		@Inject(DOCUMENT) private _document: Document) {
+		super();
+	}
+
+	tocEntryType = ToCEntryType;
+
+
+	// compareFn(a, b){
+	// 	if(a.depth> b.depth) return -1;
+	// 	if(a.depth< b.depth) return 1;
+
+	// 	return 0;
+	// }
+
+	ngOnInit(): void {
+	}
+
+	// hoveroverEnter(){
+	// 	// console.log('user hovering drag over', this.parentLink.id, this.parentLink.label);
+	// 	this.dragHoveringOver = true;
+	// }
+	// hoveroverLeft(){
+	// 	this.dragHoveringOver = false;
+	// }
+
+	ngOnChanges(changes: SimpleChanges) {
+
+	}
+
+	// get grouListIds(){
+	// 	return Array.from(this.dropListGroup);
+	// }
+	itemClicked(item: ToCEntry) {
+		//leaf node
+		this.itemClick.emit(item);
+	}
+
+	deleteEntry(currentLink: ToCEntry){
+		this.removeEntry.emit(currentLink);
+	}
+
+	createNewEntry(foo: NewEntryType){
+		this.createFooEntry.emit(foo);
+	}
+
+	// tocEntryIsChildOf(testingChild: ToCEntry,parent: ToCEntry): boolean{
+
+	// 	if(!testingChild || !parent) return false;
+
+	// 	if(testingChild.id == parent.id){return true;}
+
+	// 	if(parent.subEntries){
+	// 		let childFound:boolean = false;
+
+	// 		parent.subEntries.forEach(subEntry=>{
+	// 			if(this.tocEntryIsChildOf(testingChild, subEntry)){
+	// 				childFound = true;
+	// 				return true;
+	// 			}
+	// 		})
+
+	// 		return childFound;
+	// 	}
+	// 	return false;
+	// }
+
+	get selectedItemInLinks(){
+		if(!this.links || !this.itemSelected) return false;
+
+		const link = this.links.find(l=>l.id === this.itemSelected.id);
+
+		if(link) return true;
+		return false;
+	}
+
+	// appendAndGetDroplists(dropList: CdkDropList){
+	// 	this.dropListGroup.push(dropList);
+	// 	return this.dropListGroup;
+	// }
+
+	// drop(event: CdkDragDrop<string[]>) {
+	// 	// if(!this.links || !this.links.length) return;
+
+	// 	if(event.container === event.previousContainer){
+	// 		moveItemInArray(this.links, event.previousIndex, event.currentIndex);
+	
+	// 		let arrayToUpdate: FormArray = this.links[0].form.parent as FormArray;
+	// 		// if(this.parentLink && this.parentLink.form){
+	// 		// 	switch(this.parentLink.subEntriesType){
+	// 		// 		case this.tocEntryType.Field: 
+	// 		// 			arrayToUpdate = (this.parentLink.form.get('fields') as FormArray);
+	// 		// 			break;
+	// 		// 		case this.tocEntryType.FieldSet: 
+	// 		// 			arrayToUpdate = (this.parentLink.form.get('fieldSets') as FormArray);
+	// 		// 			break;
+	// 		// 		case this.tocEntryType.Section: 
+	// 		// 			arrayToUpdate = (this.parentLink.form.get('sections') as FormArray);
+	// 		// 			break
+	// 		// 	}
+				
+	// 		// }
+	// 		if(arrayToUpdate.controls){
+	// 			moveItemInArray(arrayToUpdate.controls, event.previousIndex, event.currentIndex);
+	// 			//update ordinality
+	// 			arrayToUpdate.controls.forEach((element,idx ) => {
+	// 				element.get('ordinal').setValue(idx);
+	// 				element.updateValueAndValidity();
+	// 			});
+	// 		}
+	
+	// 		this.dataNeedsRefresh.emit();
+	// 	}else{
+	// 		console.log('not same container');
+	// 	}
+
+	// 	console.log(event.container.id);
+
+	// }
+
+	onDataNeedsRefresh(){
+		this.dataNeedsRefresh.emit();
+	}
+
+
+	// get hoveringOverParent(){
+	// 	if(!this.overContainerId) return false;
+	// 	const child = this._findTocEntryById(this.overContainerId, this.parentLink.subEntries);
+	// 	if(!child) return false;
+	// 	return true;
+	// }
+
+
+	public _findTocEntryById(id: string, tocentries: ToCEntry[]): ToCEntry{
+		if(!tocentries){
+			return null;
+		}
+
+		let tocEntryFound = tocentries.find(entry=>entry.id === id);
+
+		if(tocEntryFound){
+			return tocEntryFound;
+		}	
+
+		for(let entry of tocentries){
+			const result = this._findTocEntryById(id, entry.subEntries);
+			if(result){
+				tocEntryFound = result;
+				break;
+			}
+		}
+		
+		return tocEntryFound? tocEntryFound: null;
+	}
+
+
+
+	colorError():boolean{
+
+		if(!this.colorizeInvalid) return false;
+		
+		const form = this.parentLink.form;
+		if((!form || form.valid || !form.touched) && this.parentLink.type !== this.tocEntryType.Page) return false;
+
+		const allFieldsAreTouched = this.allFieldsAreTouched(form);
+
+		//fieldset may have errros that are inside its controls and not in the fieldsetFormGroup
+		if(this.parentLink.type === this.tocEntryType.FieldSet && allFieldsAreTouched) return true;
+
+		if(form.errors && allFieldsAreTouched) return true;
+
+		//check if page has sections
+		if(this.parentLink.type === this.tocEntryType.Page && allFieldsAreTouched){
+			const rootForm = form.root;
+			if(rootForm){
+				const sections = rootForm.get('sections') as FormArray;
+				if(!sections.controls.find(section=>section.get('page').value === this.parentLink.id)){
+					return true;
+				}
+			}
+		}
+
+	
+		//checking first child form controls if have errors
+		let hasErrors = false;
+		if(allFieldsAreTouched){
+			if(form instanceof FormGroup){
+				const formGroup = form as FormGroup;
+	
+				const controls = Object.keys(formGroup.controls);
+	
+				controls.forEach(control=>{
+					if(formGroup.get(control).errors){
+						hasErrors = true;
+					}
+				})
+	
+			}
+		}
+
+		return hasErrors;
+	}
+
+
+	allFieldsAreTouched(aControl:AbstractControl){//auto na testaroume
+
+		if(!aControl|| aControl.untouched) return false;
+
+		if(aControl instanceof FormControl){
+			return aControl.touched;
+		}else if(aControl instanceof FormGroup){
+			const controlKeys = Object.keys((aControl as FormGroup).controls);
+			let areAllTouched = true;
+			controlKeys.forEach(key=>{
+				if(!this.allFieldsAreTouched(aControl.get(key))){
+					areAllTouched = false;
+				}
+			})
+			// const areAllTouched = controlKeys.reduce((acc, key)=>acc && this._allFieldsAreTouched(aControl.get(key)), true);
+			return areAllTouched;
+
+		}else if(aControl instanceof FormArray){
+			const controls = (aControl as FormArray).controls;
+			// const areAllTouched = controls.reduce((acc, control)=>acc && this._allFieldsAreTouched(control), true);
+			let areAllTouched = true;
+			// controls.reduce((acc, control)=>acc && this._allFieldsAreTouched(control), true);
+			controls.forEach(control=>{
+				if(!this.allFieldsAreTouched(control)){
+					areAllTouched = false;
+				}
+			});
+			return areAllTouched;
+		}
+
+
+		return false;
+	}
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.html b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.html
new file mode 100644
index 000000000..c88f0a71b
--- /dev/null
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.html
@@ -0,0 +1,23 @@
+<div>
+	<h3 id="guide-steps">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TEMPLATE-OUTLINE' | translate}}</h3>
+	<div class="scroll-container" id="tocentrytable">
+		
+		<app-dataset-profile-table-of-contents-internal-section [links]="links" (itemClick)="itemClicked($event)"
+			(removeEntry)="deleteEntry($event)"
+			(createFooEntry)="createNewEntry($event)"
+			[parentLink]="{ subEntriesType: tocEntryType.Page, subEntries : links , id: ROOT_ID}"
+			[itemSelected]="itemSelected"
+			[viewOnly]="viewOnly"
+			(dataNeedsRefresh)="onDataNeedsRefresh()"
+			[DRAGULA_ITEM_ID_PREFIX]="DRAGULA_ITEM_ID_PREFIX"
+			[overContainerId]="overcontainer"
+			[isDragging]="isDragging"
+			[draggingItemId]="draggingItemId"
+			[parentRootId]="ROOT_ID"
+			style="padding-right: 1em;"
+			[colorizeInvalid]="colorizeInvalid"
+			>
+		</app-dataset-profile-table-of-contents-internal-section>
+
+	</div>
+</div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.scss
new file mode 100644
index 000000000..ebd142270
--- /dev/null
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.scss
@@ -0,0 +1,62 @@
+
+.scroll-container {
+  // overflow-y: auto;
+  max-height: 60vh; 
+  overflow-y: scroll;
+  padding-left: .2em;
+  padding-right: 1em;
+}
+
+// #style-6::-webkit-scrollbar-track
+// {
+//   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+//   background-color: #F5F5F5;
+// }
+
+// #style-6::-webkit-scrollbar
+// {
+//   width: 6px;
+//   background-color: #F5F5F5;
+// }
+
+// #style-6::-webkit-scrollbar-thumb
+// {
+//   background-color: rgb(162, 163, 163); 
+//   background-image: -webkit-linear-gradient(45deg,
+//                                             rgba(255, 255, 255, .2) 25%,
+//                         transparent 25%,
+//                         transparent 50%,
+//                         rgba(255, 255, 255, .2) 50%,
+//                         rgba(255, 255, 255, .2) 75%,
+//                         transparent 75%,
+//                         transparent)
+// }
+
+
+#tocentrytable::-webkit-scrollbar-track
+{
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+  border-radius: 10px;
+  background-color: #F5F5F5;
+}
+
+#tocentrytable::-webkit-scrollbar
+{
+  width: 4px;
+  background-color: #F5F5F5;
+}
+
+#tocentrytable::-webkit-scrollbar-thumb
+{
+  border-radius: 2px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+  background-color: rgb(158, 158, 158);// #FFF;//$blue-color-light;// rgb(162, 163, 163);// #D62929;
+}
+
+
+#guide-steps{
+  color: #212121;
+  opacity: 0.6;
+  font-size: 1.6em;
+  margin-top: 0px;
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.ts
new file mode 100644
index 000000000..69717e782
--- /dev/null
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.ts
@@ -0,0 +1,559 @@
+import { DOCUMENT } from '@angular/common';
+import { Component, EventEmitter, Inject, OnInit, Output, Input } from '@angular/core';
+import { BaseComponent } from '@common/base/base.component';
+import { interval, Subject, Subscription } from 'rxjs';
+import { distinctUntilChanged } from 'rxjs/operators';
+import { type } from 'os';
+import { SimpleChanges } from '@angular/core';
+import { NewEntryType, TableUpdateInfo, ToCEntry, ToCEntryType } from './table-of-contents-entry';
+import { DragulaService } from 'ng2-dragula';
+import { FormArray } from '@angular/forms';
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material';
+import { TranslateService } from '@ngx-translate/core';
+import { ContentObserver } from '@angular/cdk/observers';
+
+
+@Component({
+	selector: 'dataset-profile-table-of-contents',
+	styleUrls: ['./table-of-contents.scss'],
+	templateUrl: './table-of-contents.html'
+})
+export class DatasetProfileTableOfContents extends BaseComponent implements OnInit {
+
+	@Input() links: ToCEntry[];
+	@Input() itemSelected: ToCEntry;
+	@Input() colorizeInvalid: boolean = false;
+	@Input() viewOnly: boolean;
+
+
+	@Output() itemClick = new EventEmitter<ToCEntry>();
+	// @Output() newEntry = new EventEmitter<ToCEntry>();
+	@Output() removeEntry = new EventEmitter<ToCEntry>();
+	@Output() createEntry = new EventEmitter<NewEntryType>();
+	@Output() dataNeedsRefresh = new EventEmitter<TableUpdateInfo>();
+
+	isDragging: boolean = false;
+	draggingItemId: string = null;
+	tocEntryType = ToCEntryType;
+
+	DRAGULA_ITEM_ID_PREFIX="table_item_id_";
+	ROOT_ID: string = "ROOT_ID";//no special meaning
+	private _dragStartedAt;
+	private VALID_DROP_TIME = 500;//ms
+	overcontainer: string = null;
+
+	constructor(
+		@Inject(DOCUMENT) private _document: Document,
+		private dragulaService: DragulaService,
+		private snackbar: MatSnackBar,
+		private language: TranslateService
+		) {
+		super();
+		
+		if(this.dragulaService.find('TABLEDRAG')){
+			this.dragulaService.destroy('TABLEDRAG');
+		}
+
+		const dragula = this.dragulaService.createGroup('TABLEDRAG', {});
+
+		const drake = dragula.drake;
+
+		drake.on('drop', (el, target, source,sibling)=>{
+
+			if(this._dragStartedAt){
+				const timeNow = new Date().getTime();
+
+				if(timeNow - this._dragStartedAt> this.VALID_DROP_TIME){
+					// console.log('timenow: ', timeNow);
+					// console.log('timestarted', this._dragStartedAt);
+					this._dragStartedAt = null;
+					
+				}else{
+					this.dataNeedsRefresh.emit();// even though the data is not changed the TABLE DRAG may has changed
+					return;
+				}
+			}else{
+				this.dataNeedsRefresh.emit();// even though the data is not changed the TABLE DRAG may has changed
+				return;
+				
+			}
+
+			const elementId = (el.id as string).replace(this.DRAGULA_ITEM_ID_PREFIX,'');
+			const targetId = target.id as string;
+			const sourceId = source.id as string;
+
+
+			if(!(elementId && targetId && sourceId)){
+				console.info('Elements do not have an id');
+				this.dataNeedsRefresh.emit();
+				return;
+			}
+
+
+			const element:ToCEntry = this._findTocEntryById(elementId, this.links);
+			const targetContainer:ToCEntry = this._findTocEntryById(targetId , this.links);
+			const sourceContainer:ToCEntry = this._findTocEntryById(sourceId, this.links);
+
+			if(!(element && (targetContainer ||((element.type===ToCEntryType.Page) && (targetId === this.ROOT_ID))) && (sourceContainer||((element.type===ToCEntryType.Page) && (sourceId === this.ROOT_ID))))){
+				// console.info('Could not find elements');
+				this.dataNeedsRefresh.emit();
+				drake.cancel(true);
+				return;
+			}
+
+
+			switch(element.type){
+				case ToCEntryType.FieldSet:{
+					if(targetContainer.type != this.tocEntryType.Section){
+						// const message = 'Fieldset can only be child of Subsections';
+						const message = this.language.instant('DATASET-PROFILE-EDITOR.STEPS.FORM.TABLE-OF-CONTENTS.ERROR-MESSAGES.FIELDSET-MUST-HAVE-PARENT-SECTION');
+						// console.error(message);
+						this.notifyUser(message)
+						this.dataNeedsRefresh.emit();
+						return;
+					}
+
+					//check if target container has no sections
+					if((targetContainer.form.get('sections') as FormArray).length){
+						// const message = 'Cannot have inputs and sections on the same level';
+						const message = this.language.instant('DATASET-PROFILE-EDITOR.STEPS.FORM.TABLE-OF-CONTENTS.ERROR-MESSAGES.INPUT-SECTION-SAME-LEVEL');
+						this.notifyUser(message);
+						// console.error(message);
+						this.dataNeedsRefresh.emit();
+						return;
+					}
+
+					const fieldsetForm = element.form;
+					const targetFieldsets = targetContainer.form.get('fieldSets') as FormArray;
+					const sourceFieldsets = sourceContainer.form.get('fieldSets') as FormArray;
+
+					if(!targetFieldsets){
+						console.info('Not target fieldsets container found');
+						this.dataNeedsRefresh.emit();
+						return;
+					}
+
+					let sourceOrdinal=-1;
+					let idx = -1;
+					sourceFieldsets.controls.forEach((elem,index)=>{
+						if(elem.get('id').value === elementId){
+							sourceOrdinal = elem.get('ordinal').value;
+							idx = index
+						}
+					});
+
+					if(sourceOrdinal>=0  && idx>=0){
+						sourceFieldsets.removeAt(idx);
+
+						sourceFieldsets.controls.forEach(control=>{
+							const ordinal = control.get('ordinal');
+							if((ordinal.value>= sourceOrdinal) && sourceOrdinal>0){
+								const updatedOrdinalVal = ordinal.value -1;
+								ordinal.setValue(updatedOrdinalVal);
+							}
+						});
+						sourceFieldsets.controls.sort(this._compareOrdinals);
+					}
+
+					let position:number = targetFieldsets.length;
+
+					if(!sibling ||!sibling.id){
+						console.info('No sibling Id found');
+					}else{
+						const siblingId = (sibling.id as string).replace(this.DRAGULA_ITEM_ID_PREFIX,'');
+						let siblingIndex = -1;
+						targetFieldsets.controls.forEach((e,idx)=>{
+							if(e.get('id').value === siblingId){
+								siblingIndex = idx;
+								position = e.get('ordinal').value;
+							}
+							
+						});
+
+						if(siblingIndex>=0){ //sibling found
+							
+							targetFieldsets.controls.filter(control=> control.get('ordinal').value >= position).forEach(control=>{
+								const ordinal = control.get('ordinal');
+								const updatedOrdinalVal = ordinal.value +1;
+								ordinal.setValue(updatedOrdinalVal);
+							})
+						}
+						
+					}
+
+
+					fieldsetForm.get('ordinal').setValue(position);
+					targetFieldsets.insert(position,fieldsetForm);
+					targetFieldsets.controls.sort(this._compareOrdinals);
+					this.dataNeedsRefresh.emit({draggedItemId: elementId});
+
+					break;
+				}
+				case ToCEntryType.Section:{
+
+					if(targetContainer.type == ToCEntryType.Section){
+						if((targetContainer.form.get('fieldSets')as FormArray).length){
+							// const message = 'Cannot have inputs and sections on the same level';
+							const message = this.language.instant('DATASET-PROFILE-EDITOR.STEPS.FORM.TABLE-OF-CONTENTS.ERROR-MESSAGES.INPUT-SECTION-SAME-LEVEL');;
+							this.notifyUser(message);
+							// console.info(message);
+							this.dataNeedsRefresh.emit();
+							return;
+						}
+
+						const targetSections = targetContainer.form.get('sections') as FormArray;
+						const elementSectionForm = element.form;
+						const sourceSections = elementSectionForm.parent as FormArray;
+
+						if(!(targetSections && sourceSections && elementSectionForm)){
+							console.info('Could not load sections');
+							this.dataNeedsRefresh.emit();
+							return;
+						}
+
+						let idx = -1;
+						sourceSections.controls.forEach((section,i)=>{
+							if(section.get('id').value === elementId){
+								idx = i;
+							}
+						});
+
+						if(!(idx>=0)){
+							console.info('Could not find element in Parent container');
+							this.dataNeedsRefresh.emit();
+							return;
+						}
+
+						sourceSections.controls.filter(control=>control.get('ordinal').value >= elementSectionForm.get('ordinal').value).forEach(control=>{
+							const ordinal = control.get('ordinal');
+							const updatedOrdinalVal = ordinal.value? ordinal.value -1: 0;
+							ordinal.setValue(updatedOrdinalVal);
+						});
+						
+
+						sourceSections.removeAt(idx);
+
+						let targetOrdinal = targetSections.length;
+
+						if(sibling && sibling.id){
+							const siblingId = sibling.id.replace(this.DRAGULA_ITEM_ID_PREFIX,'');
+
+							targetSections.controls.forEach((section,i)=>{
+								if(section.get('id').value === siblingId){
+									targetOrdinal = section.get('ordinal').value;
+								}
+							})
+
+							// if(targetOrdinal!=targetSections.length){//mporei na einai idio
+								// section.get('ordinal').setValue(i+1);
+								targetSections.controls.filter(control=> control.get('ordinal').value>=targetOrdinal).forEach(control=>{
+									const ordinal = control.get('ordinal');
+									const updatedOrdinalVal = ordinal.value+1;
+									ordinal.setValue(updatedOrdinalVal);
+								});
+							// }
+
+						}else{
+							console.info('no siblings found');
+						}
+						elementSectionForm.get('ordinal').setValue(targetOrdinal);
+						targetSections.insert(targetOrdinal, elementSectionForm);
+
+					}else if(targetContainer.type === ToCEntryType.Page){
+						// const pageId = targetContainer.form.get('id').value;
+
+						const rootform = targetContainer.form.root;
+						const sectionForm = element.form;
+						const parentSections = sectionForm.parent as FormArray;
+
+						let parentIndex = -1;
+						parentSections.controls.forEach((section,i )=>{
+							if(section.get('id').value === elementId){
+								parentIndex = i
+							}
+						})
+						
+
+						if(parentIndex<0){
+							console.info('could not locate section in parents array');
+							this.dataNeedsRefresh.emit();
+							return;
+						}
+
+						//update parent sections ordinal
+						parentSections.controls.filter(section=>section.get('ordinal').value >= sectionForm.get('ordinal').value).forEach(section=>{
+							const ordinal = section.get('ordinal');
+							const updatedOrdinalVal = ordinal.value?ordinal.value -1: 0;
+							ordinal.setValue(updatedOrdinalVal);
+						})
+
+						parentSections.removeAt(parentIndex);
+
+
+
+						let position = 0;
+						if(targetContainer.subEntries){
+							position = targetContainer.subEntries.length;
+						}
+						//populate sections
+						const targetSectionsArray = rootform.get('sections') as FormArray;
+
+
+						if(sibling && sibling.id){
+							const siblingId= sibling.id.replace(this.DRAGULA_ITEM_ID_PREFIX, '');
+							let indx = -1;
+
+							targetContainer.subEntries.forEach((e,i)=>{
+								if(e.form.get('id').value === siblingId){
+									indx = i;
+									position = e.form.get('ordinal').value;
+								}
+							});
+							if(indx>=0) {
+								
+								// e.form.get('ordinal').setValue(i+1);
+								targetContainer.subEntries.filter(e=>e.form.get('ordinal').value >= position).forEach(e=>{
+									const ordinal = e.form.get('ordinal');
+									const updatedOrdinalVal = ordinal.value +1;
+									ordinal.setValue(updatedOrdinalVal);
+								});
+							}
+
+						}else{	
+							console.info('No sibling found');
+						}
+
+						sectionForm.get('ordinal').setValue(position);
+						sectionForm.get('page').setValue(targetContainer.id);
+						targetSectionsArray.push(sectionForm);
+
+					}else{
+						// const message = 'Drag not support to specific container';
+						const message = this.language.instant('DATASET-PROFILE-EDITOR.STEPS.FORM.TABLE-OF-CONTENTS.ERROR-MESSAGES.DRAG-NOT-SUPPORTED');
+						this.notifyUser(message);
+						// console.info(message);
+						this.dataNeedsRefresh.emit();
+						return;
+					}
+
+
+
+					this.dataNeedsRefresh.emit({draggedItemId: elementId});
+					break;
+				}
+				case ToCEntryType.Page:{
+					if(targetId != this.ROOT_ID){
+						// const message = 'A page element can only be at top level';
+						const message = this.language.instant('DATASET-PROFILE-EDITOR.STEPS.FORM.TABLE-OF-CONTENTS.ERROR-MESSAGES.PAGE-ELEMENT-ONLY-TOP-LEVEL');
+						this.notifyUser(message);
+						// console.info(message);
+						this.dataNeedsRefresh.emit();
+						return;
+					}
+
+					const rootForm = element.form.root;
+					if(!rootForm){
+						console.info('Could not find root!')
+						this.dataNeedsRefresh.emit();
+						return;
+					}
+
+
+					const pages = rootForm.get('pages') as FormArray;
+					const pageForm = element.form;
+
+					let index = -1;
+
+					pages.controls.forEach((page,i)=>{
+						if(page.get('id').value === elementId){
+							index =i;
+						}
+					});
+
+					if(index<0){
+						console.info('Could not locate page on pages');
+						this.dataNeedsRefresh.emit();
+						return;
+					}
+
+
+					//ordinality
+					pages.controls.filter(page=> page.get('ordinal').value>= pageForm.get('ordinal').value).forEach(page=>{
+						const ordinal = page.get('ordinal');
+						const ordinalVal = ordinal.value? ordinal.value - 1: 0;
+						ordinal.setValue(ordinalVal);						
+					});
+
+					pages.removeAt(index);
+
+					let targetPosition = pages.length;
+
+					if(sibling){
+						const siblingId = sibling.id.replace(this.DRAGULA_ITEM_ID_PREFIX, '');
+
+						pages.controls.forEach((page,i)=>{
+							if(page.get('id').value === siblingId){
+								targetPosition = page.get('ordinal').value;
+							}
+						});
+					}
+					pageForm.get('ordinal').setValue(targetPosition);
+
+					//update ordinality
+					pages.controls.filter(page=> page.get('ordinal').value>= targetPosition).forEach(page=>{
+						const ordinal = page.get('ordinal');
+						const ordinalVal = ordinal.value +1;
+						ordinal.setValue(ordinalVal);						
+					});
+
+
+					pages.insert(targetPosition, pageForm);
+					this.dataNeedsRefresh.emit({draggedItemId:elementId});
+					break;
+				}
+				default:
+
+					console.info('Could not support moving objects for specific type of element');
+					this.dataNeedsRefresh.emit();
+					return;
+
+			}
+		});
+
+
+		drake.on('drag',(el,source)=>{
+			this._dragStartedAt =  new Date().getTime();
+			// console.log('drag fired');
+			this.isDragging = true;
+			this.draggingItemId = (el.id as string).replace(this.DRAGULA_ITEM_ID_PREFIX, '');
+
+			// setTimeout(() => {
+			// 	if(this.isDragging){
+			// 		this._scrollIntoDragginItem(this.draggingItemId);
+			// 	}
+			// }, this.VALID_DROP_TIME);
+		});
+		drake.on('over',(el, container, source)=>{
+			try {
+				this.overcontainer = container.id;
+			} catch (error) {
+				this.overcontainer = null;
+			}
+		});
+		drake.on('dragend',(el)=>{
+			this.isDragging = false;
+			this.draggingItemId = null;
+			this.overcontainer = null;
+		});
+
+		
+
+
+	}
+
+	private _scrollIntoDragginItem(id: string){
+
+		// const table = document.getElementById('tocentrytable');
+		// if(table){
+		// 	// const element = document.getElementById('TABLE_ENTRY'+id);
+		// 	console.log('Table found!');
+		// 	const element = document.getElementById('TABLE_ENTRY' + id);
+		// 	const elementFromTable = table.closest('#TABLE_ENTRY'+ id);
+
+
+		// 	if(elementFromTable){
+		// 		console.log('found from table:', elementFromTable);
+		// 	}
+		// 	if(element){
+		// 		console.log('Element found!');
+		// 		// element.classList.add('text-danger');
+		// 		// console.log(element);
+
+		// 		const tableRect = table.getBoundingClientRect();
+		// 		const elementRect = element.getBoundingClientRect();
+				
+
+		// 		console.log('tablerect :',tableRect);
+		// 		console.log('elementRect :',elementRect);
+
+		// 			const dY = elementRect.top - tableRect.top;
+		// 			console.log('Distance from table is ', dY);
+		// 			// table.scroll({top:dY,behavior:'smooth'});
+		// 			console.log('found from document ', element);
+
+		// 			// element.scrollIntoView();
+		// 	}
+		// 	// element.scrollIntoView();
+		// }
+	}
+
+	private _findTocEntryById(id: string, tocentries: ToCEntry[]): ToCEntry{
+		if(!tocentries){
+			return null;
+		}
+
+		let tocEntryFound = tocentries.find(entry=>entry.id === id);
+
+		if(tocEntryFound){
+			return tocEntryFound;
+		}	
+
+		for(let entry of tocentries){
+			const result = this._findTocEntryById(id, entry.subEntries);
+			if(result){
+				tocEntryFound = result;
+				break;
+			}
+		}
+		
+		return tocEntryFound? tocEntryFound: null;
+	}
+
+	ngOnInit(): void {
+		
+
+	}
+
+	ngOnChanges(changes: SimpleChanges) {
+		
+	}
+
+
+	itemClicked(item: ToCEntry){
+		//leaf node
+		this.itemClick.emit(item);
+	}
+	
+	// addNewEntry(tce: ToCEntry){
+	// 	this.newEntry.emit(tce);
+	// }
+	deleteEntry(currentLink: ToCEntry){
+		this.removeEntry.emit(currentLink);
+	}
+
+	createNewEntry(newEntry: NewEntryType){
+		this.createEntry.emit(newEntry);
+	}
+	onDataNeedsRefresh(){
+		this.dataNeedsRefresh.emit();
+	}
+
+	notifyUser(message:string){
+		this.snackbar.open(message, null, this._snackBarConfig);
+	}
+
+	private _snackBarConfig: MatSnackBarConfig = {
+		duration:2000
+	}
+
+	private _compareOrdinals(a, b){
+
+		const aValue = a.get('ordinal').value as number;
+		const bValue = b.get('ordinal').value as number;
+
+		// if(!aValue || !bValue) return 0;
+		return aValue - bValue;
+	}
+
+
+}
diff --git a/dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.scss b/dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.scss
index ca94110d8..7720847f5 100644
--- a/dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.scss
+++ b/dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.scss
@@ -33,7 +33,7 @@
   }
 }
 
-::ng-deep .mat-paginator-container {
+:host ::ng-deep .mat-paginator-container {
   flex-direction: row-reverse !important;
   justify-content: space-between !important;
   background-color: #f6f6f6;
@@ -41,25 +41,25 @@
   min-height: 30px !important;
 }
 
-::ng-deep .mat-paginator-page-size {
+:host ::ng-deep .mat-paginator-page-size {
   height: 43px;
 }
 
-::ng-deep .mat-paginator-range-label {
+:host ::ng-deep .mat-paginator-range-label {
   margin: 15px 32px 0 24px !important;
 }
 
-::ng-deep .mat-paginator-range-actions {
+:host ::ng-deep .mat-paginator-range-actions {
   width: 55% !important;
   min-height: 43px !important;
   justify-content: space-between;
 }
 
-::ng-deep .mat-paginator-navigation-previous {
+:host ::ng-deep .mat-paginator-navigation-previous {
   margin-left: auto !important;
 }
 
-::ng-deep .mat-icon-button {
+:host ::ng-deep .mat-icon-button {
   height: 30px !important;
   font-size: 12px !important;
 }
diff --git a/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.scss b/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.scss
index 54a7a60bf..0691742c2 100644
--- a/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.scss
+++ b/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.scss
@@ -76,11 +76,11 @@
 	}
 }
 
-::ng-deep .mat-form-field-wrapper {
+:host ::ng-deep .mat-form-field-wrapper {
 	background-color: white !important;
 	padding-bottom: 0 !important;
 }
 
-::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
+:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
 	padding: 0.3rem 0rem 0.6rem 0rem !important;
 }
diff --git a/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.scss b/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.scss
index e44188b1d..f9e30031c 100644
--- a/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.scss
+++ b/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.scss
@@ -59,7 +59,7 @@
 	}
 }
 
-::ng-deep .mat-paginator-container {
+:host ::ng-deep .mat-paginator-container {
 	// flex-direction: row-reverse !important;
 	// justify-content: space-between !important;
 	// height: 30px;
diff --git a/dmp-frontend/src/app/ui/dashboard/dashboard.component.scss b/dmp-frontend/src/app/ui/dashboard/dashboard.component.scss
index b58c0a435..92724be2b 100644
--- a/dmp-frontend/src/app/ui/dashboard/dashboard.component.scss
+++ b/dmp-frontend/src/app/ui/dashboard/dashboard.component.scss
@@ -399,24 +399,24 @@ input[type="text"] {
     margin-left: 40px;
 }
 
-::ng-deep .mat-tab-group.mat-primary .mat-ink-bar,
+:host ::ng-deep .mat-tab-group.mat-primary .mat-ink-bar,
 .mat-tab-nav-bar.mat-primary .mat-ink-bar {
 	background: #129d99;
 	height: 5px;
 }
 
-::ng-deep .mat-tab-label {
+:host ::ng-deep .mat-tab-label {
 	min-width: auto !important;
 	background-color: transparent;
 }
 
-::ng-deep .mat-tab-label.mat-tab-label-active {
+:host ::ng-deep .mat-tab-label.mat-tab-label-active {
 	min-width: auto !important;
 	background-color: transparent;
 	font-weight: 700;
 }
 
-::ng-deep .mat-form-field-wrapper {
+:host ::ng-deep .mat-form-field-wrapper {
 	background-color: white !important;
 	padding-bottom: 0 !important;
 }
diff --git a/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html b/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html
index 19dc7757f..a3479015f 100644
--- a/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html
+++ b/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html
@@ -165,7 +165,7 @@
 			</div>
 		</div>
 	</div>
-	<div *ngIf="allRecentActivities && allRecentActivities.length > 0 && allRecentActivities.length >= startIndex + pageSize" class="d-flex justify-content-center">
+	<div *ngIf="allRecentActivities && allRecentActivities.length > 0 && (allRecentActivities.length >= startIndex + pageSize) && hasMoreActivity" class="d-flex justify-content-center">
 		<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
 	</div>
 </div>
diff --git a/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts b/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts
index ddd660f57..d004c57bb 100644
--- a/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts
+++ b/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts
@@ -62,6 +62,7 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 	datasetOffset: number = 0;
 	pageSize: number = 5;
 	dmpFormGroup: FormGroup;
+	hasMoreActivity:boolean = true;
 	public formGroup = new FormBuilder().group({
 		like: new FormControl(),
 		order: new FormControl()
@@ -605,6 +606,10 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 	}
 
 	refresh(): void {
+		this.hasMoreActivity = true;
+		this.datasetOffset = 0;
+		this.dmpOffset = 0;
+
 		const fields: Array<string> = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value];
 		// const fields: Array<string> = ["-modified"];
 		this.startIndex = 0;
@@ -623,6 +628,8 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 						this.dmpOffset = this.dmpOffset + 1;
 					}
 				});
+
+				if(response.length< this.pageSize) {this.hasMoreActivity = false;}
 				this.totalCountRecentEdited.emit(this.allRecentActivities.length);
 			});
 	}
@@ -636,7 +643,7 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 		request.criteria.order = this.formGroup.get("order").value;
 
 		this.dashboardService.getRecentActivity(request).pipe(takeUntil(this._destroyed)).subscribe(result => {
-			if (!result) { return []; }
+			if (!result) { this.hasMoreActivity = false; return []; }
 			result.forEach(recentActivity => {
 				if (recentActivity.type === RecentActivityType.Dataset) {
 					this.datasetOffset = this.datasetOffset + 1;
@@ -644,6 +651,8 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 					this.dmpOffset = this.dmpOffset + 1;
 				}
 			});
+			if(result.length<this.pageSize) this.hasMoreActivity = false;
+
 			// this.allRecentActivities = this.allRecentActivities.concat(result);
 			this.allRecentActivities = this.allRecentActivities.length > 0 ? this.mergeTwoSortedLists(this.allRecentActivities, result, this.formGroup.get('order').value) : result;
 			this.totalCountRecentEdited.emit(this.allRecentActivities.length);
diff --git a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.html b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.html
index a0f15db1b..aa72179ba 100644
--- a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.html
+++ b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.html
@@ -50,11 +50,11 @@
 					<div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
 					<div class="stepper-options" id="stepper-options">
 						<div class="col stepper-list">
-							<div (click)="changeStep(0)" *ngIf="!datasetInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (2)</div>
+							<div (click)="changeStep(0)" *ngIf="!datasetInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0, 'text-danger':hintErrors}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (2)</div>
 							<div (click)="changeStep(0)" *ngIf="datasetInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div>
 							<div class="row toc-pane-container" #boundary (click)="changeStep(1)">
 								<div #spacer></div>
-								<table-of-contents class="toc-pane-container" [links]="links" [boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0" stickyThing (stepFound)="onStepFound($event)" (currentLinks)="getLinks($event)"></table-of-contents>
+								<table-of-contents [selectedFieldsetId]="fieldsetIdWithFocus" #table0fContents [showErrors]="showtocentriesErrors" [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" [hasFocus]="step === 1" [formGroup]="formGroup" *ngIf="formGroup && formGroup.get('datasetProfileDefinition')" [links]="links" [boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0" stickyThing (stepFound)="onStepFound($event)" (currentLinks)="getLinks($event)" [visibilityRules]="formGroup.get('datasetProfileDefinition').get('rules').value"></table-of-contents>
 							</div>
 						</div>
 					</div>
@@ -81,14 +81,25 @@
 				</div>
 				<div class="col-auto form" id="dataset-editor-form">
 					<app-dataset-editor-component [hidden]="this.step !== 0" [formGroup]="formGroup" [dmpId]="formGroup.get('dmp').value.id" [availableProfiles]="formGroup.get('dmp').value.profiles" (formChanged)="formChanged()"></app-dataset-editor-component>
-					<app-dataset-description [hidden]="this.step === 0" *ngIf="formGroup && formGroup.get('datasetProfileDefinition')" [form]="this.formGroup.get('datasetProfileDefinition')" [visibilityRules]="formGroup.get('datasetProfileDefinition').get('rules').value" [datasetProfileId]="formGroup.get('profile').value" [linkToScroll]="linkToScroll"></app-dataset-description>
+					<app-dataset-description [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" [hidden]="this.step === 0" *ngIf="formGroup && formGroup.get('datasetProfileDefinition')" [form]="this.formGroup.get('datasetProfileDefinition')" [visibilityRules]="formGroup.get('datasetProfileDefinition').get('rules').value" [datasetProfileId]="formGroup.get('profile').value" [linkToScroll]="linkToScroll" (fieldsetFocusChange)="fieldsetIdWithFocus = $event"></app-dataset-description>
 				</div>
 			</div>
 		</form>
 	</div>
 </div>
 
+<!-- <mat-slide-toggle [(ngModel)]="showtocentriesErrors">
+	
+</mat-slide-toggle> -->
 
+<!-- <div class="row">
+	<div class="col-12">
+		<button (click)="printForm()">Print form</button>
+	</div>
+	<div class="col-12">
+		<button (click)="printFormValue()">Print form value</button>
+	</div>
+</div> -->
 
 <!-- <div class="main-content">
 	<div class="container-fluid">
diff --git a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.scss b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.scss
index ec93c30a3..fc32448f5 100644
--- a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.scss
+++ b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.scss
@@ -277,6 +277,7 @@
     display: flex;
 	flex-direction: column;
 	height: calc(100vh - 246px);
+  // max-width: 366px;
   }
 
   .stepper-options {
@@ -316,6 +317,8 @@
 
   .stepper-list {
     .toc-pane-container {
+      // padding-left: 0.2rem;
+      // overflow-x: hidden;
       span {
         text-align: left;
         font-weight: 400;
diff --git a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.ts b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.ts
index 1b2d4994c..8514fc27e 100644
--- a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.ts
+++ b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.ts
@@ -1,5 +1,5 @@
-import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -23,7 +23,7 @@ import { DatasetWizardEditorModel } from '@app/ui/dataset/dataset-wizard/dataset
 import { BreadcrumbItem } from '@app/ui/misc/breadcrumb/definition/breadcrumb-item';
 import { IBreadCrumbComponent } from '@app/ui/misc/breadcrumb/definition/IBreadCrumbComponent';
 import { DatasetDescriptionFormEditorModel } from '@app/ui/misc/dataset-description-form/dataset-description-form.model';
-import { Link, LinkToScroll } from '@app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents';
+import { Link, LinkToScroll, TableOfContents } from '@app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents';
 import { BaseComponent } from '@common/base/base.component';
 import { FormService } from '@common/forms/form-service';
 import { FormValidationErrorsDialogComponent } from '@common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component';
@@ -45,6 +45,7 @@ import { SaveType } from '@app/core/common/enum/save-type';
 import { DatasetWizardModel } from '@app/core/model/dataset/dataset-wizard';
 import { MatomoService } from '@app/core/services/matomo/matomo-service';
 import { HttpClient } from '@angular/common/http';
+import { ToCEntry, ToCEntryType } from '@app/ui/misc/dataset-description-form/dataset-description.component';
 
 @Component({
 	selector: 'app-dataset-wizard-component',
@@ -89,6 +90,13 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
 	scrollTop: number;
 	tocScrollTop: number;
 	links: Link[] = [];
+	//the table seraches for elements to scroll on page with id (TOCENTRY_ID_PREFIX+fieldsetId<Tocentry>)
+	TOCENTRY_ID_PREFIX="TocEntRy";
+	showtocentriesErrors = false;
+	@ViewChild('table0fContents', {static: false}) table0fContents: TableOfContents;
+	hintErrors: boolean = false;
+
+	fieldsetIdWithFocus:string;
 
 	constructor(
 		private datasetWizardService: DatasetWizardService,
@@ -565,25 +573,135 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
 				error => this.onCallbackError(error));
 	}
 
+
+
+
+	private _getErrorMessage(formControl: AbstractControl, name: string): string[] {
+		const errors: string[] = [];
+		Object.keys(formControl.errors).forEach(key => {
+			if (key === 'required') { errors.push(this.language.instant(name + ": " + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.REQUIRED'))); }
+			// if (key === 'required') { errors.push(this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.THIS-FIELD') + ' "' + this.getPlaceHolder(formControl) + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.REQUIRED')); }
+			else if (key === 'email') { errors.push(this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.THIS-FIELD') + ' "' + name + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.EMAIL')); }
+			else if (key === 'min') { errors.push(this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.THIS-FIELD') + ' "' + name + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.MIN-VALUE', { 'min': formControl.getError('min').min })); }
+			else if (key === 'max') { errors.push(this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.THIS-FIELD') + ' "' + name + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.MAX-VALUE', { 'max': formControl.getError('max').max })); }
+			else { errors.push(this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.THIS-FIELD') + ' "' + name + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + formControl.errors[key].message); }
+		});
+		return errors;
+	}
+
+	private _getPlaceHolder(formControl: any): string {
+		if (formControl.nativeElement.localName === 'input' || formControl.nativeElement.localName === 'textarea') {
+			return formControl.nativeElement.getAttribute('placeholder');
+		} else if (formControl.nativeElement.localName === 'mat-select') {
+			return formControl.nativeElement.getAttribute('aria-label');
+		} else if (formControl.nativeElement.localName === 'app-single-auto-complete') {
+			return (Array.from(formControl.nativeElement.firstChild.children).filter((x: any) => x.localName === 'input')[0] as any).getAttribute('placeholder');
+		} else if (formControl.nativeElement.localName === 'app-multiple-auto-complete') {
+			return (Array.from(formControl.nativeElement.firstChild.children).filter((x: any) => x.localName === 'input')[0] as any).getAttribute('placeholder');
+		}
+	}
+
+
+
+	private _buildSemiFormErrorMessages(): string[]{//not including datasetProfileDefinition
+		const errmess: string[] = [];
+		Object.keys(this.formGroup.controls).forEach(controlName=>{
+			if(controlName != 'datasetProfileDefinition' && this.formGroup.get(controlName).invalid){
+				errmess.push(...this._buildErrorMessagesForAbstractControl(this.formGroup.get(controlName), controlName));
+			}
+		})
+
+		return errmess;
+	}
+
+	// takes as an input an abstract control and gets its error messages[]
+	private _buildErrorMessagesForAbstractControl(aControl: AbstractControl, controlName: string):string[]{
+		const errmess:string[] = [];
+
+		if(aControl.invalid){
+
+			if(aControl.errors){
+				//check if has placeholder
+				if( (<any>aControl).nativeElement !== undefined && (<any>aControl).nativeElement !== null){
+					const placeholder = this._getPlaceHolder(aControl);
+					if(placeholder){
+						controlName = placeholder;
+					}
+				}
+				const errorMessage = this._getErrorMessage(aControl, controlName);
+				
+				errmess.push(...errorMessage);
+			}
+
+			/*in case the aControl is FormControl then the it should have provided its error messages above.
+			No need to check case of FormControl below*/
+
+			if(aControl instanceof FormGroup){
+				
+				const fg = aControl as FormGroup;
+				//check children
+				Object.keys(fg.controls).forEach(controlName=>{
+					errmess.push(...this._buildErrorMessagesForAbstractControl(fg.get(controlName), controlName));
+				});
+			}else if(aControl instanceof FormArray){
+
+				const fa = aControl as FormArray;
+
+				fa.controls.forEach((control,index)=>{
+					errmess.push(... this._buildErrorMessagesForAbstractControl(control, `${controlName} --> ${index+1}`));
+				});
+				
+			}
+		}
+
+		return errmess;
+	}
+
 	save(saveType?: SaveType) {
-		this.formService.touchAllFormFields(this.formGroup);
+
+		Object.keys(this.formGroup.controls).forEach(controlName=>{
+			if(controlName == 'datasetProfileDefinition'){
+				return;
+			}
+			this.formService.touchAllFormFields(this.formGroup.get(controlName));
+		})
+
+
+		// this.formService.touchAllFormFields(this.formGroup);
 		if (!this.isSemiFormValid(this.formGroup)) {
-			this.showValidationErrorsDialog();
+			//build messages
+			const errorMessages = this._buildSemiFormErrorMessages();
+			this.showValidationErrorsDialog(undefined, errorMessages); 
+			this.hintErrors = true;
 			return;
 		}
 		this.submit(saveType);
 	}
 
-	private showValidationErrorsDialog(projectOnly?: boolean) {
-		const dialogRef = this.dialog.open(FormValidationErrorsDialogComponent, {
-			disableClose: true,
-			autoFocus: false,
-			restoreFocus: false,
-			data: {
-				formGroup: this.formGroup,
-				projectOnly: projectOnly
-			},
-		});
+	private showValidationErrorsDialog(projectOnly?: boolean, errmess?: string[]) {
+		if(errmess){
+			const dialogRef = this.dialog.open(FormValidationErrorsDialogComponent, {
+				disableClose: true,
+				autoFocus: false,
+				restoreFocus: false,
+				data: {
+					errorMessages:errmess,
+					projectOnly: projectOnly
+				},
+			});
+		}else{
+
+			const dialogRef = this.dialog.open(FormValidationErrorsDialogComponent, {
+				disableClose: true,
+				autoFocus: false,
+				restoreFocus: false,
+				data: {
+					formGroup: this.formGroup,
+					projectOnly: projectOnly
+				},
+			});
+		}
+
 	}
 
 	hasReversableStatus(): boolean {
@@ -886,18 +1004,30 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
 	}
 
 	public changeStep(index: number, dataset?: FormControl) {
+		if(this.step != index){ //view is changing
+			this.resetScroll();
+		}
 		this.step = index;
-		this.resetScroll();
 	}
 
 	public nextStep() {
-		this.step = this.step < this.maxStep ? this.step + 1 : this.step;
-		this.resetScroll();
+		if(this.step < this.maxStep){//view is changing
+			if(this.step === 0  && this.table0fContents){
+				this.table0fContents.seekToFirstElement();
+			}
+			this.step++;
+			this.resetScroll();
+		}
+		// this.step = this.step < this.maxStep ? this.step + 1 : this.step;
 	}
 
 	public previousStep() {
-		this.step = this.step !== 0 ? this.step - 1 : this.step;
-		this.resetScroll();
+		if(this.step > 0){
+			this.resetScroll();
+			this.step--;
+		}
+
+		// this.step = this.step !== 0 ? this.step - 1 : this.step;
 	}
 
 	private resetScroll() {
@@ -911,10 +1041,16 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
 	discardChanges() {
 		this.isDiscarded = true;
 		this.hasChanges = false;
+		this.hintErrors = false;
 		if (this.isNew) {
 			Object.keys(this.formGroup['controls']).forEach((key: string) => {
-				if (key !== 'dmp') {
-					this.formGroup.get(key).reset();
+				if (key !== 'dmp' && (key!== 'profile')) {
+					if(key === 'datasetProfileDefinition'){
+						this.formGroup.get(key).patchValue(this.datasetProfileDefinitionModel.buildForm().getRawValue);
+					}else{
+						this.formGroup.get(key).reset();
+					}
+					
 				}
 			});
 		} else {
@@ -938,4 +1074,140 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
 	getLinks(currentLinks: Link[]) {
 		this.links = currentLinks;
 	}
+
+	printForm(){
+		console.log(this.formGroup);
+	}
+	printFormValue(){
+		console.log(this.formGroup.value);
+	}
+
+	// tocentries;
+	// this.tocentries = this.getTocEntries(this.formGroup.get('datasetProfileDefinition')); //TODO
+
+
+
+	// get tocentries(){
+	// 	const form =  this.formGroup.get('datasetProfileDefinition')
+	// 	if(!form) return null;
+
+	// 	return this.getTocEntries(this.formGroup.get('datasetProfileDefinition'));
+	// }
+
+
+	// private _buildRecursively(form: FormGroup,whatAmI:ToCEntryType):ToCEntry{
+	// 	if(!form) return null;
+
+	// 	switch(whatAmI){
+	// 		case ToCEntryType.Section:
+	// 			const sections = form.get('sections') as FormArray;
+	// 			const fieldsets = form.get('compositeFields') as FormArray;
+
+
+	// 			const tempResult:ToCEntry[] = [];
+				
+	// 			if(sections &&sections.length){
+	// 				sections.controls.forEach(section=>{
+	// 					tempResult.push(this._buildRecursively(section as FormGroup, ToCEntryType.Section));
+	// 				});
+
+	// 			}else if(fieldsets && fieldsets.length){
+	// 				fieldsets.controls.forEach(fieldset=>{
+	// 					tempResult.push(this._buildRecursively(fieldset as FormGroup, ToCEntryType.FieldSet));
+	// 				});
+	// 			}
+	// 			return {
+	// 				form: form,
+	// 				id: form.get('id').value,
+	// 				label: form.get('title').value,
+	// 				numbering: '',
+	// 				subEntries:tempResult,
+	// 				subEntriesType: sections &&sections.length? ToCEntryType.Section: ToCEntryType.FieldSet,
+	// 				type: ToCEntryType.Section,
+	// 				ordinal: form.get('ordinal').value
+	// 			}
+	// 		case ToCEntryType.FieldSet:
+	// 			return {
+	// 				form: form,
+	// 				label:form.get('title').value,
+	// 				id: form.get('id').value,
+	// 				numbering:'s',
+	// 				subEntries:[],
+	// 				subEntriesType: ToCEntryType.Field,
+	// 				type: ToCEntryType.FieldSet,
+	// 				ordinal: form.get('ordinal').value
+	// 			}
+	// 	}
+	// }
+
+	// private _sortByOrdinal(tocentries: ToCEntry[]){
+		
+	// 	if(!tocentries || !tocentries.length) return;
+		
+	// 	tocentries.sort(this._customCompare);
+	// 	tocentries.forEach(entry=>{
+	// 		this._sortByOrdinal(entry.subEntries);
+	// 	});
+	// }
+
+	// private _customCompare(a,b){
+	// 	return a.ordinal - b.ordinal;
+	// }
+
+	// private _calculateNumbering(tocentries: ToCEntry[], depth:number[] = []){
+	// 	if(!tocentries || !tocentries.length){
+	// 		return;
+	// 	}
+
+	// 	let  prefixNumbering = depth.length? depth.join('.'): '';
+
+	// 	if(depth.length) prefixNumbering = prefixNumbering+".";
+	// 	tocentries.forEach((entry,i)=>{
+	// 		entry.numbering = prefixNumbering + (i+1);
+	// 		this._calculateNumbering(entry.subEntries, [...depth, i+1])
+	// 	});
+	// }
+
+	
+	// getTocEntries(form): ToCEntry[] {
+	// 	if (form == null) { return []; }
+	// 	const result: ToCEntry[] = [];
+
+	// 	//build parent pages
+	// 	(form.get('pages') as FormArray).controls.forEach((pageElement, i) => {
+	// 		result.push({
+	// 			id: i+'id',
+	// 			label: pageElement.get('title').value,
+	// 			type: ToCEntryType.Page,
+	// 			form: pageElement,
+	// 			numbering: (i + 1).toString(),
+	// 			subEntriesType: ToCEntryType.Section,
+	// 			subEntries:[],
+	// 			ordinal: pageElement.get('ordinal').value
+	// 		} as ToCEntry)
+	// 	});
+
+
+
+	// 	result.forEach((entry,i)=>{
+
+	// 		const sections = entry.form.get('sections') as FormArray;
+
+	// 		sections.controls.forEach(section=>{
+	// 			const tempResults = this._buildRecursively(section as FormGroup,ToCEntryType.Section);
+	// 			entry.subEntries.push(tempResults);
+	// 		});
+
+	// 	});
+
+	// 	this._sortByOrdinal(result);
+	// 	//calculate numbering
+	// 	this._calculateNumbering(result);
+	// 	return result;
+
+	// }
+
+
+	
+
 }
diff --git a/dmp-frontend/src/app/ui/dataset/dataset.module.ts b/dmp-frontend/src/app/ui/dataset/dataset.module.ts
index 720e27218..ec553bef5 100644
--- a/dmp-frontend/src/app/ui/dataset/dataset.module.ts
+++ b/dmp-frontend/src/app/ui/dataset/dataset.module.ts
@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
+import { FormattingModule } from '@app/core/formatting.module';
 import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module';
 import { ExportMethodDialogModule } from '@app/library/export-method-dialog/export-method-dialog.module';
 import { UrlListingModule } from '@app/library/url-listing/url-listing.module';
@@ -22,14 +23,10 @@ import { FormValidationErrorsDialogModule } from '@common/forms/form-validation-
 import { ConfirmationDialogModule } from '@common/modules/confirmation-dialog/confirmation-dialog.module';
 import { CommonUiModule } from '@common/ui/common-ui.module';
 import { AngularStickyThingsModule } from '@w11k/angular-sticky-things';
-import { DatasetCopyDialogModule } from './dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.module';
-import { DatasetOverviewModule } from './overview/dataset-overview.module';
-import { DatasetCriteriaDialogComponent } from './listing/criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component';
-import { DmpEditorComponent } from '../dmp/editor/dmp-editor.component';
-import { DatasetEditorDetailsComponent } from '../dmp/editor/dataset-editor-details/dataset-editor-details.component';
-import { DatasetEditorDetailsModule } from '../dmp/editor/dataset-editor-details/dataset-editor-details.module';
 import { FormProgressIndicationModule } from '../misc/dataset-description-form/components/form-progress-indication/form-progress-indication.module';
-import { FormattingModule } from '@app/core/formatting.module';
+import { DatasetCopyDialogModule } from './dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.module';
+import { DatasetCriteriaDialogComponent } from './listing/criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component';
+import { DatasetOverviewModule } from './overview/dataset-overview.module';
 
 @NgModule({
 	imports: [
@@ -77,7 +74,10 @@ import { FormattingModule } from '@app/core/formatting.module';
 		DatasetExternalDataRepositoryDialogEditorComponent,
 		DatasetExternalDatasetDialogEditorComponent,
 		DatasetExternalRegistryDialogEditorComponent,
-		DatasetExternalServiceDialogEditorComponent
+		DatasetExternalServiceDialogEditorComponent,
+
+		DatasetEditorComponent,
+		DatasetDescriptionFormModule
 	]
 })
 export class DatasetModule { }
diff --git a/dmp-frontend/src/app/ui/dataset/dataset.routing.ts b/dmp-frontend/src/app/ui/dataset/dataset.routing.ts
index 7d54ef8b6..b024aa044 100644
--- a/dmp-frontend/src/app/ui/dataset/dataset.routing.ts
+++ b/dmp-frontend/src/app/ui/dataset/dataset.routing.ts
@@ -4,7 +4,6 @@ import { AuthGuard } from '../../core/auth-guard.service';
 import { DatasetWizardComponent } from './dataset-wizard/dataset-wizard.component';
 import { DatasetListingComponent } from './listing/dataset-listing.component';
 import { DatasetOverviewComponent } from './overview/dataset-overview.component';
-import { DmpEditorComponent } from '../dmp/editor/dmp-editor.component';
 
 const routes: Routes = [
 	{
diff --git a/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component.scss b/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component.scss
index 362c44bc3..6ad258085 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component.scss
+++ b/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component.scss
@@ -10,11 +10,11 @@
 	padding: 0.4rem;
 }
 
-::ng-deep .mat-form-field-wrapper {
+:host ::ng-deep .mat-form-field-wrapper {
 	background-color: white !important;
 	padding-bottom: 0 !important;
 }
 
-::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
+:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
 	padding: 0.3rem 0rem 0.6rem 0rem !important;
 }
diff --git a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss
index c0077a83d..e50263a3e 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss
+++ b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss
@@ -199,11 +199,11 @@
   padding-bottom: 0 !important;
 }
 
-::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
+:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
   padding: 0.3rem 0rem 0.6rem 0rem !important;
 }
 
-::ng-deep .mat-paginator-container {
+:host ::ng-deep .mat-paginator-container {
   flex-direction: row-reverse !important;
   justify-content: space-between !important;
   background-color: #f6f6f6;
@@ -211,27 +211,27 @@
   min-height: 30px !important;
 }
 
-::ng-deep .mat-paginator-page-size {
+:host ::ng-deep .mat-paginator-page-size {
   height: 43px;
 }
 
-::ng-deep .mat-icon-button {
+:host ::ng-deep .mat-icon-button {
   height: 30px !important;
   font-size: 12px !important;
 }
 
-::ng-deep .mat-paginator-range-label {
+:host ::ng-deep .mat-paginator-range-label {
   margin: 15px 32px 0 24px !important;
 }
 
-::ng-deep .mat-paginator-range-actions {
+:host ::ng-deep .mat-paginator-range-actions {
   width: auto !important;
   min-width: 55% !important;
   min-height: 43px !important;
   justify-content: space-between;
 }
 
-::ng-deep .mat-paginator-navigation-previous {
+:host ::ng-deep .mat-paginator-navigation-previous {
   margin-left: auto !important;
 }
 
diff --git a/dmp-frontend/src/app/ui/dmp/editor/dataset-info/dataset-info.component.html b/dmp-frontend/src/app/ui/dmp/editor/dataset-info/dataset-info.component.html
index 79a8c1464..b46adb5fc 100644
--- a/dmp-frontend/src/app/ui/dmp/editor/dataset-info/dataset-info.component.html
+++ b/dmp-frontend/src/app/ui/dmp/editor/dataset-info/dataset-info.component.html
@@ -14,7 +14,7 @@
 				<div class="profile-form">
 					<mat-form-field>
 						<mat-label>{{'DMP-EDITOR.FIELDS.SELECT-TEMPLATE' | translate}}</mat-label>
-						<app-multiple-auto-complete required='true' [formControl]="formGroup.get('profiles')" [configuration]="profilesAutoCompleteConfiguration" (optionRemoved)="onRemoveTemplate($event)" (optionActionClicked)="onPreviewTemplate($event)">
+						<app-multiple-auto-complete placeholder="{{'DMP-EDITOR.FIELDS.SELECT-TEMPLATE' | translate}}" [hidePlaceholder]="true" required='true' [formControl]="formGroup.get('profiles')" [configuration]="profilesAutoCompleteConfiguration" (optionRemoved)="onRemoveTemplate($event)" (optionActionClicked)="onPreviewTemplate($event)">
 						</app-multiple-auto-complete>
 						<mat-error *ngIf="formGroup.get('profiles').hasError('backendError')">
 							{{formGroup.get('profiles').getError('backendError').message}}</mat-error>
diff --git a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html
index ea6fc8b49..7c979743a 100644
--- a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html
+++ b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html
@@ -33,17 +33,17 @@
 					<div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
 					<div class="stepper-options" id="stepper-options">
 						<ol class="stepper-list">
-							<li (click)="changeStep(0)" *ngIf="!formGroup.get('extraProperties').get('visible').value && !mainInfoValid()" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (1)</li>
+							<li (click)="changeStep(0)" *ngIf="!formGroup.get('extraProperties').get('visible').value && !mainInfoValid()" [ngClass]="{'active': this.step === 0, 'text-danger':hintErrors}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (1)</li>
 							<li (click)="changeStep(0)" *ngIf="!formGroup.get('extraProperties').get('visible').value && mainInfoValid()" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</li>
-							<li (click)="changeStep(0)" *ngIf="formGroup.get('extraProperties').get('visible').value && !mainInfoValid()" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (2)</li>
+							<li (click)="changeStep(0)" *ngIf="formGroup.get('extraProperties').get('visible').value && !mainInfoValid()" [ngClass]="{'active': this.step === 0, 'text-danger':hintErrors}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (2)</li>
 							<li (click)="changeStep(0)" *ngIf="formGroup.get('extraProperties').get('visible').value && mainInfoValid()" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</li>
 
-							<li (click)="changeStep(1)" *ngIf="!fundingInfoValid()" [ngClass]="{'active': this.step === 1}">{{'DMP-EDITOR.STEPPER.FUNDING-INFO' | translate}} (2)</li>
+							<li (click)="changeStep(1)" *ngIf="!fundingInfoValid()" [ngClass]="{'active': this.step === 1, 'text-danger':hintErrors}">{{'DMP-EDITOR.STEPPER.FUNDING-INFO' | translate}} (2)</li>
 							<li (click)="changeStep(1)" *ngIf="fundingInfoValid()" [ngClass]="{'active': this.step === 1}">{{'DMP-EDITOR.STEPPER.FUNDING-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</li>
 
 							<li (click)="changeStep(2)" [ngClass]="{'active': this.step === 2}">{{'DMP-EDITOR.STEPPER.LICENSE-INFO' | translate}}</li>
 
-							<li (click)="changeStep(3)" *ngIf="!datasetInfoValid()" [ngClass]="{'active': this.step === 3}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}} (1)</li>
+							<li (click)="changeStep(3)" *ngIf="!datasetInfoValid()" [ngClass]="{'active': this.step === 3, 'text-danger':hintErrors}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}} (1)</li>
 							<li (click)="changeStep(3)" *ngIf="datasetInfoValid()" [ngClass]="{'active': this.step === 3}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</li>
 
 							<!-- <li *ngFor="let dataset of datasets.controls; let i = index" (click)="changeStep(i + stepsBeforeDatasets, dataset)" [ngClass]="{'active-dataset': this.step === i + stepsBeforeDatasets}"> -->
diff --git a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts
index 2566c390e..e6aef200c 100644
--- a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts
+++ b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts
@@ -99,6 +99,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 	maxStep: number = 4;
 
 	scrollTop: number;
+	hintErrors:boolean = false;
 
 	constructor(
 		private dmpProfileService: DmpProfileService,
@@ -412,6 +413,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 		// console.log("update ", this.formGroup);
 		if (!this.isFormValid()) {
 			this.showValidationErrorsDialog();
+			this.hintErrors = true;
 			return;
 		}
 		this.onSubmit(addNew, showAddDatasetDialog);
@@ -429,16 +431,31 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 		return this.formGroup.get('datasets')['controls'][0].valid;
 	}
 
-	private showValidationErrorsDialog(projectOnly?: boolean) {
-		const dialogRef = this.dialog.open(FormValidationErrorsDialogComponent, {
-			disableClose: true,
-			autoFocus: false,
-			restoreFocus: false,
-			data: {
-				formGroup: this.formGroup,
-				projectOnly: projectOnly
-			},
-		});
+	private showValidationErrorsDialog(projectOnly?: boolean, errmess?: string[]) {
+
+		if(errmess){
+
+			const dialogRef = this.dialog.open(FormValidationErrorsDialogComponent, {
+				disableClose: true,
+				autoFocus: false,
+				restoreFocus: false,
+				data: {
+					errorMessages:errmess,
+					projectOnly: projectOnly
+				},
+			});
+		}else{
+			const dialogRef = this.dialog.open(FormValidationErrorsDialogComponent, {
+				disableClose: true,
+				autoFocus: false,
+				restoreFocus: false,
+				data: {
+					formGroup: this.formGroup,
+					projectOnly: projectOnly
+				},
+			});
+		}
+
 	}
 
 	onSubmit(addNew?: boolean, showAddDatasetDialog?: boolean): void {
@@ -734,8 +751,128 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 		this.formSubmit(true);
 	}
 
+	//checks if the dpm is valid not taking into account the datasets validity
+	private _isDMPDescriptionValid():boolean{
+
+		const form: FormGroup = this.formGroup;
+		if(form.controls){
+			return Object.keys(form.controls)
+					.map(controlName=>{//get validity of each control
+						if(controlName === 'datasets'){//we dont care if datasets are valid
+							return true;
+						}
+						return !form.get(controlName).invalid;//!! in case the control is disabled, we consider it valid
+					})
+					.reduce((isFormValid,isControlValid)=>{//aggregate validities
+						return isControlValid && isFormValid;
+					}, true);
+		}
+		return true;
+	}
+
+	private _getErrorMessage(formControl: AbstractControl, name: string): string[] {
+		const errors: string[] = [];
+		Object.keys(formControl.errors).forEach(key => {
+			if (key === 'required') { errors.push(this.language.instant(name + ": " + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.REQUIRED'))); }
+			// if (key === 'required') { errors.push(this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.THIS-FIELD') + ' "' + this.getPlaceHolder(formControl) + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.REQUIRED')); }
+			else if (key === 'email') { errors.push(this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.THIS-FIELD') + ' "' + name + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.EMAIL')); }
+			else if (key === 'min') { errors.push(this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.THIS-FIELD') + ' "' + name + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.MIN-VALUE', { 'min': formControl.getError('min').min })); }
+			else if (key === 'max') { errors.push(this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.THIS-FIELD') + ' "' + name + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.MAX-VALUE', { 'max': formControl.getError('max').max })); }
+			else { errors.push(this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.THIS-FIELD') + ' "' + name + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + formControl.errors[key].message); }
+		});
+		return errors;
+	}
+
+	private _getPlaceHolder(formControl: any): string {
+		if (formControl.nativeElement.localName === 'input' || formControl.nativeElement.localName === 'textarea') {
+			return formControl.nativeElement.getAttribute('placeholder');
+		} else if (formControl.nativeElement.localName === 'mat-select') {
+			return formControl.nativeElement.getAttribute('aria-label');
+		} else if (formControl.nativeElement.localName === 'app-single-auto-complete') {
+			return (Array.from(formControl.nativeElement.firstChild.children).filter((x: any) => x.localName === 'input')[0] as any).getAttribute('placeholder');
+		} else if (formControl.nativeElement.localName === 'app-multiple-auto-complete') {
+			return (Array.from(formControl.nativeElement.firstChild.children).filter((x: any) => x.localName === 'input')[0] as any).getAttribute('placeholder');
+		}
+	}
+
+
+
+	private _buildDMPDescriptionErrorMessages(): string[]{//not including datasets
+		const errmess: string[] = [];
+		Object.keys(this.formGroup.controls).forEach(controlName=>{
+			if(controlName != 'datasets' && this.formGroup.get(controlName).invalid){
+				errmess.push(...this._buildErrorMessagesForAbstractControl(this.formGroup.get(controlName), controlName));
+			}
+		})
+
+		return errmess;
+	}
+
+	// takes as an input an abstract control and gets its error messages[]
+	private _buildErrorMessagesForAbstractControl(aControl: AbstractControl, controlName: string):string[]{
+		const errmess:string[] = [];
+
+		if(aControl.invalid){
+
+			if(aControl.errors){
+				//check if has placeholder
+				if( (<any>aControl).nativeElement !== undefined && (<any>aControl).nativeElement !== null){
+					const placeholder = this._getPlaceHolder(aControl);
+					if(placeholder){
+						controlName = placeholder;
+					}
+				}
+				const errorMessage = this._getErrorMessage(aControl, controlName);
+				
+				errmess.push(...errorMessage);
+			}
+			/*in case the aControl is FormControl then the it should have provided its error messages above.
+			No need to check case of FormControl below*/
+
+			if(aControl instanceof FormGroup){
+				
+				const fg = aControl as FormGroup;
+				//check children
+				Object.keys(fg.controls).forEach(controlName=>{
+					errmess.push(...this._buildErrorMessagesForAbstractControl(fg.get(controlName), controlName));
+				});
+			}else if(aControl instanceof FormArray){
+
+				const fa = aControl as FormArray;
+
+				fa.controls.forEach((control,index)=>{
+					errmess.push(... this._buildErrorMessagesForAbstractControl(control, `${controlName} --> ${index+1}`));
+				});
+				
+			}
+			
+		}
+
+		return errmess;
+	}
+
+
+
+
+
 	addDataset() {
-		this.formSubmit(true, false);
+
+
+		if(!this._isDMPDescriptionValid()){
+			const errmess = this._buildDMPDescriptionErrorMessages();
+			this.showValidationErrorsDialog(undefined, errmess);
+			this.hintErrors = true;
+			return;
+		}
+
+
+
+		this.onSubmit(true, false);
+		// this.formSubmit(true, false);
+
+
+
+
 		// Add dataset to list
 		// if (!this.formGroup.get('datasets')) {
 		// 	this.formGroup.addControl('datasets', new FormBuilder().array(new Array<FormControl>()));
diff --git a/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.scss b/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.scss
index 41829afd6..002c554f8 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.scss
@@ -122,7 +122,7 @@
   background-color: #2e74b649;
 }
 
-::ng-deep .mat-form-field-wrapper {
+:host ::ng-deep .mat-form-field-wrapper {
 	background-color: white !important;
 	padding-bottom: 0 !important;
 }
diff --git a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
index 234707e72..d3b0ddec5 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
@@ -6,12 +6,12 @@
   .lightblue-btn {
     font-size: 12px;
   }
-  ::ng-deep .mat-paginator-container {
+  :host ::ng-deep .mat-paginator-container {
     height: auto !important;
   }
 }
 
-::ng-deep .mat-paginator-container {
+:host ::ng-deep .mat-paginator-container {
   flex-direction: row-reverse !important;
   justify-content: space-between !important;
   background-color: #f6f6f6;
@@ -19,7 +19,7 @@
   min-height: 30px !important;
 }
 
-::ng-deep .mat-paginator-page-size {
+:host ::ng-deep .mat-paginator-page-size {
   height: 43px;
 }
 
@@ -28,18 +28,18 @@
   font-size: 12px !important;
 }
 
-::ng-deep .mat-paginator-range-label {
+:host ::ng-deep .mat-paginator-range-label {
   margin: 15px 32px 0 24px !important;
 }
 
-::ng-deep .mat-paginator-range-actions {
+:host ::ng-deep .mat-paginator-range-actions {
   width: auto !important;
   min-width: 55% !important;
   min-height: 43px !important;
   justify-content: space-between;
 }
 
-::ng-deep .mat-paginator-navigation-previous {
+:host ::ng-deep .mat-paginator-navigation-previous {
   margin-left: auto !important;
 }
 
@@ -256,7 +256,7 @@
   padding-bottom: 0 !important;
 }
 
-::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
+:host::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
   padding: 0.3rem 0rem 0.6rem 0rem !important;
 }
 
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.html
index 0a6d80018..a158ea875 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.html
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.html
@@ -4,7 +4,7 @@
 	<div *ngIf="form.get('fields').length === 1 && this.visibilityRulesService.checkElementVisibility(form.get('fields')['controls'][0].get('id').value)" class="col-12">
 		<div class="row">
 			<div class="col-12">
-				<app-form-composite-title class="row" [form]="form" [isChild]="isChild"></app-form-composite-title>
+				<app-form-composite-title [tocentry]="tocentry" class="row" [form]="form" [isChild]="isChild"></app-form-composite-title>
 			</div>
 			<div class="col-12">
 				<div class="row">
@@ -27,7 +27,7 @@
 	<div *ngIf="form.get('fields').length > 1" class="col-12">
 		<div class="row">
 			<div class="col-12">
-				<app-form-composite-title class="row" [form]="form" [isChild]="isChild"></app-form-composite-title>
+				<app-form-composite-title [tocentry]="tocentry" class="row" [form]="form" [isChild]="isChild"></app-form-composite-title>
 			</div>
 			<div class="col align-self-center">
 				<div *ngFor="let fieldFormGroup of form.get('fields')['controls']; let i = index;" class="col-12 compositeField">
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.ts
index 08a261e48..9776cf201 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.ts
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { FormArray, FormGroup, AbstractControl } from '@angular/forms';
 import { DatasetDescriptionCompositeFieldEditorModel, DatasetDescriptionFieldEditorModel } from '../../dataset-description-form.model';
+import { ToCEntry } from '../../dataset-description.component';
 import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
 
 @Component({
@@ -14,6 +15,7 @@ export class FormCompositeFieldComponent {
 	@Input() form: FormGroup;
 	@Input() isChild: Boolean = false;
 	@Input() showDelete: Boolean = false;
+	@Input() tocentry: ToCEntry;
 
 	constructor(
 		public visibilityRulesService: VisibilityRulesService,
@@ -22,6 +24,10 @@ export class FormCompositeFieldComponent {
 	}
 
 	ngOnInit() {
+
+		if(this.tocentry){
+			this.form = this.tocentry.form as FormGroup;
+		}
 	}
 
 	// addMultipleField(fieldIndex: number) {
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.html
index 374519f49..747b63432 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.html
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.html
@@ -1,7 +1,7 @@
 <div class="col-12">
 	<div class="row">
 		<h5 *ngIf="form.get('title').value && !isChild" class="col-auto compositeField toc-compositeField-header" [id]="this.form.get('id').value">
-			{{form.get('numbering').value}}
+			{{tocentry? tocentry.numbering :form.get('numbering').value}}
 			{{form.get('title').value}}
 			<!-- <a *ngIf="this.markForConsiderationService.exists(compositeField)" (click)="markForConsideration()" style="cursor: pointer">
 							Mark For Consideration
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.ts
index e11249667..4a9776b5b 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.ts
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { FormGroup } from '@angular/forms';
+import { ToCEntry } from '../../dataset-description.component';
 
 @Component({
   selector: 'app-form-composite-title',
@@ -10,10 +11,14 @@ export class FormCompositeTitleComponent implements OnInit {
 
 	@Input() form: FormGroup;
 	@Input() isChild: Boolean = false;
+  @Input() tocentry:ToCEntry;
 
   constructor() { }
 
   ngOnInit() {
+    if(this.tocentry){
+      this.form = this.tocentry.form as FormGroup;
+    }
   }
 
 }
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html
index d55354672..90fc3ddbc 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html
@@ -226,9 +226,24 @@
 	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Researchers" class="col-12">
 		<div class="row">
 			<mat-form-field class="col-md-12">
-				<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
+				<!-- <app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
 					[configuration]="researchersAutoCompleteConfiguration">
-				</app-multiple-auto-complete>
+				</app-multiple-auto-complete> -->
+
+				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
+					<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
+					 [configuration]="researchersAutoCompleteConfiguration">
+					</app-multiple-auto-complete>
+				</ng-container>
+				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
+					<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
+					 [configuration]="researchersAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
+					</app-single-auto-complete>
+					<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+					</mat-error>
+				</ng-container>
+
+
 				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
 			</mat-form-field>
 		</div>
@@ -237,9 +252,24 @@
 	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Organizations" class="col-12">
 		<div class="row">
 			<mat-form-field class="col-md-12">
-				<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
+				<!-- <app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
 					[configuration]="organisationsAutoCompleteConfiguration">
 				</app-multiple-auto-complete>
+				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint> -->
+
+				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
+					<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
+					 [configuration]="organisationsAutoCompleteConfiguration">
+					</app-multiple-auto-complete>
+				</ng-container>
+				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
+					<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
+					 [configuration]="organisationsAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
+					</app-single-auto-complete>
+					<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+					</mat-error>
+				</ng-container>
+
 				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
 			</mat-form-field>
 		</div>
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.ts
index 3a7b4171e..a76cfcae8 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.ts
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.ts
@@ -34,6 +34,7 @@ import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import { DatasetIdModel } from '@app/core/model/dataset/dataset-id.model';
 import { LocalFetchModel } from '@app/core/model/local-fetch/local-fetch.model';
 import { CurrencyService } from '@app/core/services/currency/currency.service';
+import { AutoCompleteSingleData } from '@app/core/model/dataset-profile-definition/field-data/field-data';
 
 @Component({
 	selector: 'app-form-field',
@@ -46,6 +47,7 @@ export class FormFieldComponent extends BaseComponent implements OnInit {
 	@Input() form: FormGroup;
 	@Input() datasetProfileId: any;
 	@Input() isChild: Boolean = false;
+	@Input() autocompleteOptions: AutoCompleteSingleData;
 
 	// change: Subscription;
 	// trackByFn = (index, item) => item ? item['id'] : null;
@@ -123,20 +125,20 @@ export class FormFieldComponent extends BaseComponent implements OnInit {
 				this.singleAutoCompleteConfiguration = {
 					filterFn: this.searchFromAutocomplete.bind(this),
 					initialItems: () => this.searchFromAutocomplete(''),
-					displayFn: (item) => (item != null && item.length > 1) ? JSON.parse(item).label : item['label'],
-					titleFn: (item) => item['label'],
-					valueAssign: (item) => JSON.stringify(item),
-					subtitleFn: (item) => item['source'] ? this.language.instant('DATASET-WIZARD.EDITOR.FIELDS.EXTERNAL-AUTOCOMPLETE-SUBTITLE') + item['source'] : this.language.instant('DATASET-WIZARD.EDITOR.FIELDS.EXTERNAL-AUTOCOMPLETE-NO-SOURCE')
+					displayFn: (item) => {try{return (item != null && item.length > 1) ? JSON.parse(item).label : item['label']}catch{return ''}},
+					titleFn: (item) => {try{return item['label'] }catch{return''}},
+					valueAssign: (item) => {try{return JSON.stringify(item)}catch{return''}},
+					subtitleFn: (item) => {try{return item['source'] ? this.language.instant('DATASET-WIZARD.EDITOR.FIELDS.EXTERNAL-AUTOCOMPLETE-SUBTITLE') + item['source'] : this.language.instant('DATASET-WIZARD.EDITOR.FIELDS.EXTERNAL-AUTOCOMPLETE-NO-SOURCE')}catch{return''}}
 				};
 			}
 			else {
 				this.multipleAutoCompleteConfiguration = {
 					filterFn: this.searchFromAutocomplete.bind(this),
 					initialItems: () => this.searchFromAutocomplete(''),
-					displayFn: (item) => typeof (item) == 'string' ? JSON.parse(item)['label'] : item['label'],
-					titleFn: (item) => typeof (item) == 'string' ? JSON.parse(item)['label'] : item['label'],
-					valueAssign: (item) => typeof (item) == 'string' ? item : JSON.stringify(item),
-					subtitleFn: (item) => item['source'] ? this.language.instant('DATASET-WIZARD.EDITOR.FIELDS.EXTERNAL-AUTOCOMPLETE-SUBTITLE') + item['source'] : this.language.instant('DATASET-WIZARD.EDITOR.FIELDS.EXTERNAL-AUTOCOMPLETE-NO-SOURCE')
+					displayFn: (item) =>{try{return typeof (item) == 'string' ? JSON.parse(item)['label'] : item['label']}catch{return''}},
+					titleFn: (item) =>{ try{return typeof (item) == 'string' ? JSON.parse(item)['label'] : item['label']}catch{return''}},
+					valueAssign: (item) =>{ try{return typeof (item) == 'string' ? item : JSON.stringify(item)}catch{return''}},
+					subtitleFn: (item) => { try{return item['source'] ? this.language.instant('DATASET-WIZARD.EDITOR.FIELDS.EXTERNAL-AUTOCOMPLETE-SUBTITLE') + item['source'] : this.language.instant('DATASET-WIZARD.EDITOR.FIELDS.EXTERNAL-AUTOCOMPLETE-NO-SOURCE')}catch{return''}}
 				}
 			}
 		}
@@ -146,49 +148,49 @@ export class FormFieldComponent extends BaseComponent implements OnInit {
 				this.externalDatasetAutoCompleteConfiguration = {
 					filterFn: this.searchDatasetExternalDatasets.bind(this),
 					initialItems: () => this.searchDatasetExternalDatasets(''),//.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1),
-					displayFn: (item) => typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name,
-					titleFn: (item) => typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name,
-					subtitleFn: (item) => item.source ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.source : item.tag ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.tag : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE'),
-					valueAssign: (item) => typeof (item) == 'string' ? item : JSON.stringify(item)
+					displayFn: (item) => { try{return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name}catch{return''}},
+					titleFn: (item) => { try{return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name}catch{return''}},
+					subtitleFn: (item) => { try{return item.source ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.source : item.tag ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.tag : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE')}catch{return''}},
+					valueAssign: (item) => { try{return typeof (item) == 'string' ? item : JSON.stringify(item)}catch{return''}}
 				};
 				break;
 			case DatasetProfileFieldViewStyle.DataRepositories:
 				this.dataRepositoriesAutoCompleteConfiguration = {
 					filterFn: this.searchDatasetExternalDataRepositories.bind(this),
 					initialItems: () => this.searchDatasetExternalDataRepositories(''),
-					displayFn: (item) => typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name,
-					titleFn: (item) => typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name,
-					subtitleFn: (item) => item.source ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.source : item.tag ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.tag : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE'),
-					valueAssign: (item) => typeof (item) == 'string' ? item : JSON.stringify(item)
+					displayFn: (item) => { try{return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name}catch{return''}},
+					titleFn: (item) => { try{return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name}catch{return''}},
+					subtitleFn: (item) => { try{return item.source ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.source : item.tag ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.tag : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE')}catch{return''}},
+					valueAssign: (item) => { try{return typeof (item) == 'string' ? item : JSON.stringify(item)}catch{return''}}
 				};
 				break;
 			case DatasetProfileFieldViewStyle.Registries:
 				this.registriesAutoCompleteConfiguration = {
 					filterFn: this.searchDatasetExternalRegistries.bind(this),
 					initialItems: () => this.searchDatasetExternalRegistries(''),
-					displayFn: (item) => typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name,
-					titleFn: (item) => typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name,
-					subtitleFn: (item) => item.source ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.source : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE'),
-					valueAssign: (item) => typeof (item) == 'string' ? item : JSON.stringify(item)
+					displayFn: (item) => { try{return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name}catch{return''}},
+					titleFn: (item) => { try{return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name}catch{return''}},
+					subtitleFn: (item) => { try{return item.source ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.source : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE')}catch{return''}},
+					valueAssign: (item) => { try{return typeof (item) == 'string' ? item : JSON.stringify(item)}catch{return''}}
 				};
 				break;
 			case DatasetProfileFieldViewStyle.Services:
 				this.servicesAutoCompleteConfiguration = {
 					filterFn: this.searchDatasetExternalServices.bind(this),
 					initialItems: () => this.searchDatasetExternalServices(''),
-					displayFn: (item) => typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name,
-					titleFn: (item) => typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name,
-					subtitleFn: (item) => item.source ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.source : item.tag ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.tag : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE'),
-					valueAssign: (item) => typeof (item) == 'string' ? item : JSON.stringify(item)
+					displayFn: (item) => { try{return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name}catch{return ''}},
+					titleFn: (item) => { try{return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name}catch{return''}},
+					subtitleFn: (item) => { try{return item.source ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.source : item.tag ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.tag : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE')}catch{return''}},
+					valueAssign: (item) => { try{return typeof (item) == 'string' ? item : JSON.stringify(item)}catch{return''}}
 				};
 				break;
 			case DatasetProfileFieldViewStyle.Tags:
 				this.tagsAutoCompleteConfiguration = {
 					filterFn: this.filterTags.bind(this),
 					initialItems: (excludedItems: any[]) => this.filterTags('').pipe(map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
-					displayFn: (item) => this.showTag(item),
-					titleFn: (item) => item['name'],
-					valueAssign: (item) => this.addTag(item)
+					displayFn: (item) => { try{return this.showTag(item)}catch{return''}},
+					titleFn: (item) => { try{return item['name']}catch{return''}},
+					valueAssign: (item) => { try{return this.addTag(item)}catch{return''}}
 				};
 				this.parseTags();
 				break;
@@ -196,20 +198,20 @@ export class FormFieldComponent extends BaseComponent implements OnInit {
 				this.researchersAutoCompleteConfiguration = {
 					filterFn: this.filterResearchers.bind(this),
 					initialItems: (excludedItems: any[]) => this.filterResearchers('').pipe(map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
-					displayFn: (item) => typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name,
-					titleFn: (item) => typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name,
-					subtitleFn: (item) => item['tag'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['tag'] : (item['key'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['key'] : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE')),
-					valueAssign: (item) => typeof (item) == 'string' ? item : JSON.stringify(item)
+					displayFn: (item) => { try{return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name}catch{return''}},
+					titleFn: (item) =>{ try{return  typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name}catch{return''}},
+					subtitleFn: (item) => { try{return item['tag'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['tag'] : (item['key'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['key'] : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE'))}catch{return''}},
+					valueAssign: (item) => { try{return typeof (item) == 'string' ? item : JSON.stringify(item)}catch{return''}}
 				};
 				break;
 			case DatasetProfileFieldViewStyle.Organizations:
 				this.organisationsAutoCompleteConfiguration = {
 					filterFn: this.filterOrganisations.bind(this),
 					initialItems: (excludedItems: any[]) => this.filterOrganisations('').pipe(map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
-					displayFn: (item) => typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name,
-					titleFn: (item) => typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name,
-					subtitleFn: (item) => item['tag'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['tag'] : (item['key'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['key'] : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE')),
-					valueAssign: (item) => typeof (item) == 'string' ? item : JSON.stringify(item)
+					displayFn:(item) => { try{return  typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name}catch{return''}},
+					titleFn: (item) =>{ try{return  typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name}catch{return''}},
+					subtitleFn: (item) =>{ try{return  item['tag'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['tag'] : (item['key'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['key'] : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE'))}catch{return''}},
+					valueAssign: (item) =>{ try{return  typeof (item) == 'string' ? item : JSON.stringify(item)}catch{return''}}
 				};
 				break;
 			case DatasetProfileFieldViewStyle.DatasetIdentifier:
@@ -222,9 +224,9 @@ export class FormFieldComponent extends BaseComponent implements OnInit {
 				this.currencyAutoCompleteConfiguration = {
 					filterFn: this.searchCurrency.bind(this),
 					initialItems: () => this.searchCurrency(''),
-					displayFn: (item) => typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name,
-					titleFn: (item) => typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name,
-					valueAssign: (item) => typeof (item) == 'string' ? item : JSON.stringify(item)
+					displayFn: (item) => { try{return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name}catch{return''}},
+					titleFn: (item) => { try{return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name}catch{return''}},
+					valueAssign: (item) => { try{return typeof (item) == 'string' ? item : JSON.stringify(item)}catch{return''}}
 				};
 				break;
 			case DatasetProfileFieldViewStyle.Validation:
@@ -251,14 +253,14 @@ export class FormFieldComponent extends BaseComponent implements OnInit {
 		this.form.get('value').valueChanges
 			.pipe(takeUntil(this._destroyed))
 			.subscribe(item => {
-				if (this.form.get('viewStyle').value.renderStyle === DatasetProfileFieldViewStyle.ComboBox && this.form.get('data').value.type === DatasetProfileComboBoxType.WordList && this.form.get('data').value.multiList) {
-						item.forEach(element => {
-							this.visibilityRulesService.updateValueAndVisibility(this.form.get('id').value, element);
-						});
+				// if (this.form.get('viewStyle').value.renderStyle === DatasetProfileFieldViewStyle.ComboBox && this.form.get('data').value.type === DatasetProfileComboBoxType.WordList && this.form.get('data').value.multiList) {
+				// 		item.forEach(element => {
+				// 			this.visibilityRulesService.updateValueAndVisibility(this.form.get('id').value, element);
+				// 		});
 
-				} else {
+				// } else {
 					this.visibilityRulesService.updateValueAndVisibility(this.form.get('id').value, item);
-				}
+				// }
 			});
 	}
 
@@ -280,10 +282,18 @@ export class FormFieldComponent extends BaseComponent implements OnInit {
 		autocompleteRequestItem.criteria.fieldID = this.form.get('id').value;
 		if (typeof this.datasetProfileId === 'string') {
 			autocompleteRequestItem.criteria.profileID = this.datasetProfileId;
-		} else {
+		} else if (this.datasetProfileId != null) {
 			autocompleteRequestItem.criteria.profileID = this.datasetProfileId.id;
+		} else if (this.autocompleteOptions != null) {
+			autocompleteRequestItem.criteria.autocompleteOptions = this.autocompleteOptions;
+		} else {
+			throw "Could not load autocomplete options.";
 		}
 		autocompleteRequestItem.criteria.like = query;
+
+		if(this.autocompleteOptions){
+			return this.datasetExternalAutocompleteService.queryApi(autocompleteRequestItem);
+		}
 		return this.datasetExternalAutocompleteService.queryAutocomplete(autocompleteRequestItem);
 	}
 
@@ -315,20 +325,20 @@ export class FormFieldComponent extends BaseComponent implements OnInit {
 			this.singleAutoCompleteConfiguration = {
 				filterFn: myfunc.bind(this),
 				initialItems: (extraData) => myfunc(''),
-				displayFn: (item) => (item != null && item.length > 1) ? JSON.parse(item)[title] : item[title],
-				titleFn: (item) => item[title],
+				displayFn: (item) => { try{return (item != null && item.length > 1) ? JSON.parse(item)[title] : item[title]}catch{return''}},
+				titleFn: (item) => { try{return item[title]}catch{return''}},
 				valueAssign: (item) => JSON.stringify(item),
-				subtitleFn: (item) => item[subtitle]
+				subtitleFn: (item) => { try{return item[subtitle]}catch{return''}}
 			};
 		}
 		else {
 			this.multipleAutoCompleteConfiguration = {
 				filterFn: myfunc.bind(this),
 				initialItems: (extraData) => myfunc(''),
-				displayFn: (item) => typeof (item) == 'string' ? JSON.parse(item)['label'] : item['label'],
-				titleFn: (item) => typeof (item) == 'string' ? JSON.parse(item)['label'] : item['label'],
-				valueAssign: (item) => typeof (item) == 'string' ? item : JSON.stringify(item),
-				subtitleFn: (item) => item[subtitle]
+				displayFn: (item) => { try{return typeof (item) == 'string' ? JSON.parse(item)[title] : item[title]}catch{return''}},
+				titleFn: (item) => { try{return typeof (item) == 'string' ? JSON.parse(item)[title] : item[title]}catch{return''}},
+				valueAssign: (item) => { try{return typeof (item) == 'string' ? item : JSON.stringify(item)}catch{return''}},
+				subtitleFn: (item) => { try{return item[subtitle]}catch{return''}}
 			}
 		}
 	}
@@ -374,6 +384,9 @@ export class FormFieldComponent extends BaseComponent implements OnInit {
 	}
 
 	parseTags() {
+		try{
+			
+		
 		let stringValue = this.form.get('value').value;
 		if (typeof stringValue === 'string') {
 			stringValue = (<string>stringValue).replace(new RegExp('{', 'g'), '{"').replace(new RegExp('=', 'g'), '":"').replace(new RegExp(',', 'g'), '",').replace(new RegExp(', ', 'g'), ', "').replace(new RegExp('}', 'g'), '"}');
@@ -387,6 +400,9 @@ export class FormFieldComponent extends BaseComponent implements OnInit {
 		}
 		const tagArray = JSON.parse(stringValue);
 		this.form.patchValue({'value': tagArray});
+		}catch(e){
+			console.warn('Could not parse tags');
+		}
 	}
 
 	filterTags(value: string): Observable<ExternalSourceItemModel[]> {
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section-inner/form-section-inner.component.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section-inner/form-section-inner.component.html
new file mode 100644
index 000000000..391794eaf
--- /dev/null
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section-inner/form-section-inner.component.html
@@ -0,0 +1,39 @@
+<ng-container *ngIf="form">
+	<div *ngFor="let compositeFieldFormGroup of form.get('compositeFields')['controls']; let i = index;" class="col-12">
+	
+		<div class="row" *ngIf="this.visibilityRulesService.checkElementVisibility(compositeFieldFormGroup.get('id').value) && this.visibilityRulesService.scanIfChildsOfCompositeFieldHasVisibleItems(compositeFieldFormGroup)">
+		
+			<div class="col-12">
+				<div class="row">
+					<app-form-composite-field class="align-self-center col" [form]="compositeFieldFormGroup" [datasetProfileId]="datasetProfileId"
+						[isChild]="false" [showDelete]="(compositeFieldFormGroup.get('multiplicityItems').length) > 0"></app-form-composite-field>
+				</div>
+			</div>
+		
+			<div *ngIf="compositeFieldFormGroup" class="col-12">
+				<div class="row">
+					<div class="col-12" *ngFor="let multipleCompositeFieldFormGroup of compositeFieldFormGroup.get('multiplicityItems')['controls']; let j = index">
+						<div class="row">
+							<app-form-composite-field class=" align-self-center col" [form]="multipleCompositeFieldFormGroup" [datasetProfileId]="datasetProfileId"
+								[isChild]="true" [showDelete]="true"></app-form-composite-field>
+						</div>
+					</div>
+					<div *ngIf="(compositeFieldFormGroup.get('multiplicity').value.max - 1) > (compositeFieldFormGroup.get('multiplicityItems').length)"
+						class="col-12 ml-0 mr-0 addOneFieldButton">
+						<button mat-icon-button color="primary" (click)="addMultipleField(i)" [disabled]="compositeFieldFormGroup.disabled" matTooltip="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' | translate}}">
+							<mat-icon>add_circle</mat-icon>
+						</button>
+					</div>
+					<mat-form-field *ngIf="compositeFieldFormGroup.get('hasCommentField').value" class="col-12 mb-2" [formGroup]="compositeFieldFormGroup">
+						<input matInput formControlName="commentFieldValue" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate}}">
+						<mat-hint>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-HINT' | translate}}</mat-hint>
+					</mat-form-field>
+					<!-- <div class="col"></div>
+					<button class="col-auto" mat-icon-button type="button" (click)="next(compositeField)">
+						<mat-icon>expand_more</mat-icon>
+					</button> -->
+				</div>
+			</div>
+		</div>
+	</div>
+</ng-container>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section-inner/form-section-inner.component.scss b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section-inner/form-section-inner.component.scss
new file mode 100644
index 000000000..e4523fbf3
--- /dev/null
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section-inner/form-section-inner.component.scss
@@ -0,0 +1,45 @@
+.dynamic-form-section {
+	.expansion-panel {
+		// background-color: #eeeeee54;
+		background-color: white;
+		margin-top: 1em;
+		margin-bottom: 1em;
+		// margin-bottom: 1em;
+	}
+	.addOneFieldButton {
+		margin-top: -15px;
+		margin-left: -11px;
+		color: #129d99;
+	}
+	.panel-title,
+	.panel-desc {
+		text-align: left;
+		font-weight: 700;
+		font-size: 1rem;
+		letter-spacing: 0px;
+		color: #212121;
+		opacity: 0.81;
+		margin-top: 1.625rem;
+		margin-bottom: 0.625rem;
+	}
+
+	.panel-desc {
+		text-transform: capitalize;
+		font-weight: 400;
+		margin-top: .5rem;
+	}
+}
+.styleBorder {
+	border: 0.2em solid lightgray;
+	border-radius: 0.5em;
+	margin-bottom: 0.5em;
+}
+.mat-expansion-panel-header-description {
+	padding-bottom: 18px;
+	color: black;
+}
+
+::ng-deep .mat-expansion-panel-header {
+	height: auto !important;
+	min-height: 48px;
+}
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section-inner/form-section-inner.component.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section-inner/form-section-inner.component.ts
new file mode 100644
index 000000000..b6298840a
--- /dev/null
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section-inner/form-section-inner.component.ts
@@ -0,0 +1,85 @@
+import { AfterViewInit, Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { FormGroup, FormArray, AbstractControl } from '@angular/forms';
+import { FormFocusService } from '../../../form-focus/form-focus.service';
+import { VisibilityRulesService } from '../../../visibility-rules/visibility-rules.service';
+import { DatasetDescriptionSectionEditorModel, DatasetDescriptionCompositeFieldEditorModel } from '../../../dataset-description-form.model';
+import { FormCompositeFieldComponent } from '../../form-composite-field/form-composite-field.component';
+import { LinkToScroll } from '../../../tableOfContentsMaterial/table-of-contents';
+
+@Component({
+	selector: 'app-form-section-inner',
+	templateUrl: './form-section-inner.component.html',
+	styleUrls: ['./form-section-inner.component.scss']
+})
+export class FormSectionInnerComponent implements OnInit, OnChanges {
+
+	//@Input() section: DatasetDescriptionSectionEditorModel;
+	@Input() datasetProfileId: String;
+	// @Input() compositeFieldFormGroup: FormGroup;
+	@Input() form:FormGroup;
+	@Input() pathName: string;
+	@Input() path: string;
+	// @Input() i: number;
+	@Input() linkToScroll: LinkToScroll;
+	//trackByFn = (index, item) => item ? item['id'] : null;
+	panelExpanded = true;
+	// sub = true;
+	subsectionLinkToScroll: LinkToScroll;
+
+	constructor(
+		public visibilityRulesService: VisibilityRulesService,
+		private formFocusService: FormFocusService
+	) { }
+
+	ngOnInit() {
+		// if (this.section) {
+		// 	this.form = this.visibilityRulesService.getFormGroup(this.section.id);
+		// }
+	}
+
+	ngOnChanges(changes: SimpleChanges) {
+
+		// if (changes['linkToScroll']) {
+		// 	if (changes['linkToScroll'].currentValue && changes['linkToScroll'].currentValue.section) {
+
+		// 		if (this.pathName === changes['linkToScroll'].currentValue.section) {
+		// 			this.panelExpanded = true;
+		// 		} else if (changes['linkToScroll'].currentValue.section.includes(this.pathName)) {
+		// 			this.subsectionLinkToScroll = changes['linkToScroll'].currentValue;
+		// 			this.panelExpanded = true;
+		// 		}
+		// 	}
+		// }
+	}
+
+	// ngAfterViewInit() {
+	// 	this.visibilityRulesService.triggerVisibilityEvaluation();
+	// }
+
+	addMultipleField(fieldsetIndex: number) {
+		const compositeFieldToBeCloned = (this.form.get('compositeFields').get('' + fieldsetIndex) as FormGroup).getRawValue();
+		const compositeField: DatasetDescriptionCompositeFieldEditorModel = new DatasetDescriptionCompositeFieldEditorModel().cloneForMultiplicity(compositeFieldToBeCloned);
+		(<FormArray>(this.form.get('compositeFields').get('' + fieldsetIndex).get('multiplicityItems'))).push(compositeField.buildForm());
+	}
+
+	deleteCompositeFieldFormGroup(compositeFildIndex: number) {
+		const numberOfItems = this.form.get('compositeFields').get('' + compositeFildIndex).get('multiplicityItems').get('' + 0).get('fields').value.length;
+		for (let i = 0; i < numberOfItems; i++) {
+			const multiplicityItem = this.form.get('compositeFields').get('' + compositeFildIndex).get('multiplicityItems').get('' + 0).get('fields').get('' + i).value;
+			this.form.get('compositeFields').get('' + compositeFildIndex).get('fields').get('' + i).patchValue(multiplicityItem);
+		}
+		(<FormArray>(this.form.get('compositeFields').get('' + compositeFildIndex).get('multiplicityItems'))).removeAt(0);
+	}
+
+	deleteMultipeFieldFromCompositeFormGroup(compositeFildIndex: number, fildIndex: number) {
+		(<FormArray>(this.form.get('compositeFields').get('' + compositeFildIndex).get('multiplicityItems'))).removeAt(fildIndex);
+	}
+
+	// isElementVisible(fieldSet: CompositeField): boolean {
+	// 	return fieldSet && fieldSet.fields && fieldSet.fields.length > 0
+	// }
+
+	// next(compositeField: CompositeField) {
+	// 	this.formFocusService.focusNext(compositeField);
+	// }
+}
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html
index ee2dbc193..0290daa88 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html
@@ -3,12 +3,13 @@
 		<mat-expansion-panel class="row expansion-panel toc-section-header" [id]="pathName" [(expanded)]="panelExpanded">
 			<mat-expansion-panel-header>
 				<mat-panel-title>
-					<h6 class='panel-title'>{{form.get('numbering').value}}. {{form.get('title').value}}</h6>
+					<h6 class='panel-title'>{{tocentry? tocentry.numbering :form.get('numbering').value}}. {{form.get('title').value}}</h6>
 				</mat-panel-title>
 			</mat-expansion-panel-header>
 			<mat-panel-description class="col-12">
 				<h6 class='panel-desc' *ngIf="form.get('description').value">{{form.get('description').value}}</h6>
 			</mat-panel-description>
+			<ng-container *ngIf="!tocentry else tocentryCase">
 			<div *ngFor="let compositeFieldFormGroup of form.get('compositeFields')['controls']; let i = index;" class="col-12">
 				<!-- <div *ngIf="isElementVisible(compositeField)" class="row"> -->
 				<!-- *ngIf="this.visibilityRulesService.checkElementVisibility(compositeFieldFormGroup.get('id').value)" -->
@@ -54,6 +55,81 @@
 					 [datasetProfileId]="datasetProfileId"></app-form-section>
 				</div>
 			</div>
+			</ng-container>
 		</mat-expansion-panel>
 	</mat-accordion>
 </div>
+
+
+
+
+
+
+
+
+<!-- WORKING WITH TOCENTRIES -->
+
+<ng-template #tocentryCase>
+
+	<ng-container [ngSwitch]="tocentry.subEntriesType">
+		<ng-container *ngSwitchCase="tocentriesType.FieldSet">
+
+			<!-- FIELDSET CASE -->
+			<div *ngFor="let fieldsetEntry of tocentry.subEntries; let i = index;" class="col-12" [id]="TOCENTRY_ID_PREFIX+fieldsetEntry.id" (click)="onAskedToScroll(fieldsetEntry.id)">
+				<!-- <div *ngIf="isElementVisible(compositeField)" class="row"> -->
+				<!-- *ngIf="this.visibilityRulesService.checkElementVisibility(compositeFieldFormGroup.get('id').value)" -->
+				<div class="row" *ngIf="this.visibilityRulesService.checkElementVisibility(fieldsetEntry.form.get('id').value) && this.visibilityRulesService.scanIfChildsOfCompositeFieldHasVisibleItems(fieldsetEntry.form)">
+		
+					<div class="col-12">
+						<div class="row">
+							<app-form-composite-field [tocentry]="fieldsetEntry" class="align-self-center col" [form]="fieldsetEntry.form" [datasetProfileId]="datasetProfileId"
+								[isChild]="false" [showDelete]="(fieldsetEntry.form.get('multiplicityItems').length) > 0"></app-form-composite-field>
+						</div>
+					</div>
+		
+					<div *ngIf="fieldsetEntry.form" class="col-12">
+						<div class="row">
+							<div class="col-12" *ngFor="let multipleCompositeFieldFormGroup of fieldsetEntry.form.get('multiplicityItems')['controls']; let j = index">
+								<div class="row">
+									<app-form-composite-field class=" align-self-center col" [form]="multipleCompositeFieldFormGroup" [datasetProfileId]="datasetProfileId"
+									 [isChild]="true" [showDelete]="true"></app-form-composite-field>
+								</div>
+							</div>
+							<div *ngIf="(fieldsetEntry.form.get('multiplicity').value.max - 1) > (fieldsetEntry.form.get('multiplicityItems').length)"
+							 class="col-12 addOneFieldButton">
+								<button mat-icon-button color="primary" (click)="addMultipleField(i)" [disabled]="fieldsetEntry.form.disabled" matTooltip="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' | translate}}">
+									<mat-icon>add_circle</mat-icon>
+								</button>
+							</div>
+							<mat-form-field *ngIf="fieldsetEntry.form.get('hasCommentField').value" class="col-12 mb-2" [formGroup]="fieldsetEntry.form">
+								<input matInput formControlName="commentFieldValue" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate}}">
+								<mat-hint>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-HINT' | translate}}</mat-hint>
+							</mat-form-field>
+							<!-- <div class="col"></div>
+							<button class="col-auto" mat-icon-button type="button" (click)="next(compositeField)">
+								<mat-icon>expand_more</mat-icon>
+							</button> -->
+						</div>
+					</div>
+		
+				</div>
+			</div>
+
+		</ng-container>
+		
+		<ng-container *ngSwitchCase="tocentriesType.Section">
+			<!-- SECTION CASE -->
+
+			<div *ngIf="form.get('sections')" class="col-12"><!-- MAYBEE NOT NEEDED-->
+				<div *ngFor="let sectionEntry of tocentry.subEntries; let j = index;" class="row">
+					<app-form-section [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" class="col-12" [tocentry]="sectionEntry" [form]="sectionEntry.form" [path]="path+'.'+(j+1)" [pathName]="pathName+'.sections.'+j" [linkToScroll]="subsectionLinkToScroll"
+					 [datasetProfileId]="datasetProfileId"
+					 (askedToScroll)="onAskedToScroll($event)"
+					 ></app-form-section>
+				</div>
+			</div>
+		</ng-container>
+		
+	</ng-container>
+
+</ng-template>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.ts
index 123801f1a..9862c2690 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.ts
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.ts
@@ -1,10 +1,12 @@
-import { AfterViewInit, Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { AfterViewInit, Component, Input, OnInit, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core';
 import { FormGroup, FormArray, AbstractControl } from '@angular/forms';
 import { FormFocusService } from '../../form-focus/form-focus.service';
 import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
 import { DatasetDescriptionSectionEditorModel, DatasetDescriptionCompositeFieldEditorModel } from '../../dataset-description-form.model';
 import { FormCompositeFieldComponent } from '../form-composite-field/form-composite-field.component';
 import { LinkToScroll } from '../../tableOfContentsMaterial/table-of-contents';
+import { ToCEntry, ToCEntryType } from '../../dataset-description.component';
+
 
 @Component({
 	selector: 'app-form-section',
@@ -16,6 +18,7 @@ export class FormSectionComponent implements OnInit, OnChanges {
 	//@Input() section: DatasetDescriptionSectionEditorModel;
 	@Input() datasetProfileId: String;
 	@Input() form: FormGroup;
+	@Input() tocentry: ToCEntry;
 	@Input() pathName: string;
 	@Input() path: string;
 	@Input() linkToScroll: LinkToScroll;
@@ -24,6 +27,12 @@ export class FormSectionComponent implements OnInit, OnChanges {
 	// sub = true;
 	subsectionLinkToScroll: LinkToScroll;
 
+
+	@Output() askedToScroll = new EventEmitter<string>();
+	
+	tocentriesType = ToCEntryType;
+	@Input() TOCENTRY_ID_PREFIX="";
+
 	constructor(
 		public visibilityRulesService: VisibilityRulesService,
 		private formFocusService: FormFocusService
@@ -33,6 +42,10 @@ export class FormSectionComponent implements OnInit, OnChanges {
 		// if (this.section) {
 		// 	this.form = this.visibilityRulesService.getFormGroup(this.section.id);
 		// }
+
+		if(this.tocentry){//maybe not needed as well
+			this.form = this.tocentry.form as FormGroup;
+		}
 	}
 
 	ngOnChanges(changes: SimpleChanges) {
@@ -80,4 +93,11 @@ export class FormSectionComponent implements OnInit, OnChanges {
 	// next(compositeField: CompositeField) {
 	// 	this.formFocusService.focusNext(compositeField);
 	// }
+
+
+
+	onAskedToScroll(id:string){
+		this.panelExpanded = true;
+		this.askedToScroll.emit(id);
+	}
 }
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.model.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.model.ts
index 1dc2c0923..c76550e26 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.model.ts
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.model.ts
@@ -64,6 +64,7 @@ export class DatasetDescriptionPageEditorModel extends BaseFormModel {
 		});
 		formGroup.addControl('sections', this.formBuilder.array(sectionsFormArray));
 		formGroup.addControl('title', new FormControl({ value: this.title, disabled: true }));
+		formGroup.addControl('ordinal', new FormControl({value:this.ordinal, disabled:true}));
 		return formGroup;
 	}
 }
@@ -115,6 +116,7 @@ export class DatasetDescriptionSectionEditorModel extends BaseFormModel {
 		formGroup.addControl('numbering', new FormControl({ value: this.numbering, disabled: true }));
 		formGroup.addControl('title', new FormControl({ value: this.title, disabled: true }));
 		formGroup.addControl('id', new FormControl({ value: this.title, disabled: false }));
+		formGroup.addControl('ordinal', new FormControl({ value: this.ordinal, disabled: true }));
 		return formGroup;
 	}
 }
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.module.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.module.ts
index 6dbc01fa1..cfc3ef0db 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.module.ts
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.module.ts
@@ -13,6 +13,8 @@ import { FormCompositeTitleComponent } from './components/form-composite-title/f
 import { ExternalSourcesModule } from '../external-sources/external-sources.module';
 import { DatasetDescriptionComponent } from './dataset-description.component';
 import { FormProgressIndicationModule } from './components/form-progress-indication/form-progress-indication.module';
+import { FormSectionInnerComponent } from './components/form-section/form-section-inner/form-section-inner.component';
+
 
 @NgModule({
 	imports: [
@@ -26,13 +28,17 @@ import { FormProgressIndicationModule } from './components/form-progress-indicat
 		DatasetDescriptionFormComponent,
 		DatasetDescriptionComponent,
 		FormSectionComponent,
+		FormSectionInnerComponent,
 		FormCompositeFieldComponent,
 		FormFieldComponent,
 		FormCompositeTitleComponent
 	],
 	exports: [
 		DatasetDescriptionFormComponent,
-		DatasetDescriptionComponent
+		DatasetDescriptionComponent,
+		FormCompositeFieldComponent,
+		FormFieldComponent,
+		FormSectionInnerComponent
 	],
 	providers: [
 		VisibilityRulesService,
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.html
index 9c7cbeeb1..9b163a65f 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.html
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.html
@@ -5,15 +5,49 @@
 	<div class="row">
 		<div class="dynamic-form-editor p-0 col-md-12">
 			<div id="form-container">
-				<div *ngFor="let pageFormGroup of form.get('pages')['controls']; let z = index;">
-					<div *ngFor="let sectionFormGroup of pageFormGroup.get('sections')['controls']; let i = index;">
-						<div class="row">
-							<app-form-section class="col-12" [form]="sectionFormGroup" [path]="z+1"
-								[pathName]="'pages.'+z+'.sections.'+i" [datasetProfileId]="datasetProfileId"
-								[linkToScroll]="linkToScroll"></app-form-section>
+				<ng-container *ngIf="!tocentries else toctemplate">
+					<div *ngFor="let pageFormGroup of form.get('pages')['controls']; let z = index;">
+						<div *ngFor="let sectionFormGroup of pageFormGroup.get('sections')['controls']; let i = index;">
+							<div class="row">
+								<app-form-section class="col-12" [form]="sectionFormGroup" [path]="z+1"
+									[pathName]="'pages.'+z+'.sections.'+i" [datasetProfileId]="datasetProfileId"
+									[linkToScroll]="linkToScroll"></app-form-section>
+							</div>
 						</div>
 					</div>
-				</div>
+				</ng-container>
+				<!-- TOCENTRIES -->
+				<ng-template #toctemplate>
+					<!--FIRST LEVEL ALWAYS PAGE-->
+					<mat-accordion [multi]="true">
+						
+						<div *ngFor="let pageEntry of tocentries; let z = index;">
+							<mat-expansion-panel [expanded]="true" #expansionPanel>
+
+								<mat-expansion-panel-header>
+									<mat-panel-title>
+										<h4 class="panel-title toc-page-header">
+											{{pageEntry.numbering}}. {{pageEntry.label |uppercase}}
+										</h4>
+									</mat-panel-title>
+								</mat-expansion-panel-header>
+<!-- 
+								<h4  class="toc-page-header"> 
+								</h4> -->
+								<div *ngFor="let sectionEntry of pageEntry.subEntries; let i = index;">
+									<div class="row">
+										<app-form-section [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" class="col-12" [tocentry]="sectionEntry" [path]="z+1"
+											[pathName]="'pages.'+z+'.sections.'+i" [datasetProfileId]="datasetProfileId"
+											[linkToScroll]="linkToScroll"
+											(askedToScroll)="onAskedToScroll(expansionPanel, $event)"
+											></app-form-section>
+									</div>
+								</div>
+							</mat-expansion-panel>
+						</div>
+					</mat-accordion>
+				</ng-template>
+
 			</div>
 		</div>
 	</div>
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.ts
index 5ca786b8e..2a826fda5 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.ts
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.ts
@@ -1,7 +1,9 @@
 import { AfterViewInit, Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild, Output, EventEmitter } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { AbstractControl, AbstractControlOptions, FormArray, FormGroup } from '@angular/forms';
+import { MatExpansionPanel } from '@angular/material';
 import { MatHorizontalStepper } from '@angular/material/stepper';
 import { Rule } from '@app/core/model/dataset-profile-definition/rule';
+import { DatasetProfileTableOfContentsInternalSection } from '@app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section';
 import { LinkToScroll } from '@app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents';
 import { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service';
 import { BaseComponent } from '@common/base/base.component';
@@ -16,16 +18,25 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
 
 	// @ViewChild('stepper', { static: false }) stepper: MatHorizontalStepper;
 	@Input() path: string;
-	@Input() form: FormGroup;
 	@Input() visibilityRules: Rule[] = [];
 	@Input() datasetProfileId: String;
 	@Input() linkToScroll: LinkToScroll;
 	@Output() formChanged: EventEmitter<any> = new EventEmitter();
+	@Output() fieldsetFocusChange: EventEmitter<string> = new EventEmitter<string>();
+
+	tocentries: ToCEntry[];
+	@Input() form: FormGroup;
+
+	@Input() TOCENTRY_ID_PREFIX="";
+
+
+	private _form: FormGroup;
 
 	constructor(
 		private visibilityRulesService: VisibilityRulesService,
 	) {
 		super();
+		
 	}
 
 	ngOnInit() {
@@ -37,6 +48,8 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
 		// 			this.formChanged.emit(val);
 		// 		});
 		// }
+		
+		this.tocentries = this.getTocEntries();
 	}
 
 	ngOnChanges(changes: SimpleChanges) {
@@ -54,4 +67,143 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
 	ngAfterViewInit() {
 
 	}
+
+
+
+	onAskedToScroll(panel: MatExpansionPanel, id?:string){
+		panel.open();
+		this.fieldsetFocusChange.emit(id);
+	}
+
+
+
+
+	private _buildRecursively(form: FormGroup,whatAmI:ToCEntryType):ToCEntry{
+		if(!form) return null;
+
+		switch(whatAmI){
+			case ToCEntryType.Section:
+				const sections = form.get('sections') as FormArray;
+				const fieldsets = form.get('compositeFields') as FormArray;
+
+
+				const tempResult:ToCEntry[] = [];
+				
+				if(sections &&sections.length){
+					sections.controls.forEach(section=>{
+						tempResult.push(this._buildRecursively(section as FormGroup, ToCEntryType.Section));
+					});
+
+				}else if(fieldsets && fieldsets.length){
+					fieldsets.controls.forEach(fieldset=>{
+						tempResult.push(this._buildRecursively(fieldset as FormGroup, ToCEntryType.FieldSet));
+					});
+				}
+				return {
+					form: form,
+					id: form.get('id').value,
+					label: form.get('title').value,
+					numbering: '',
+					subEntries:tempResult,
+					subEntriesType: sections &&sections.length? ToCEntryType.Section: ToCEntryType.FieldSet,
+					type: ToCEntryType.Section,
+					ordinal: form.get('ordinal').value
+				}
+			case ToCEntryType.FieldSet:
+				return {
+					form: form,
+					label:form.get('title').value,
+					id: form.get('id').value,
+					numbering:'s',
+					subEntries:[],
+					subEntriesType: ToCEntryType.Field,
+					type: ToCEntryType.FieldSet,
+					ordinal: form.get('ordinal').value
+				}
+		}
+	}
+
+	private _sortByOrdinal(tocentries: ToCEntry[]){
+		
+		if(!tocentries || !tocentries.length) return;
+		
+		tocentries.sort(this._customCompare);
+		tocentries.forEach(entry=>{
+			this._sortByOrdinal(entry.subEntries);
+		});
+	}
+
+	private _customCompare(a,b){
+		return a.ordinal - b.ordinal;
+	}
+
+	private _calculateNumbering(tocentries: ToCEntry[], depth:number[] = []){
+		if(!tocentries || !tocentries.length){
+			return;
+		}
+
+		let  prefixNumbering = depth.length? depth.join('.'): '';
+
+		if(depth.length) prefixNumbering = prefixNumbering+".";
+		tocentries.forEach((entry,i)=>{
+			entry.numbering = prefixNumbering + (i+1);
+			this._calculateNumbering(entry.subEntries, [...depth, i+1])
+		});
+	}
+
+	
+	getTocEntries(): ToCEntry[] {
+		if (this.form == null) { return []; }
+		const result: ToCEntry[] = [];
+
+		//build parent pages
+		(this.form.get('pages') as FormArray).controls.forEach((pageElement, i) => {
+			result.push({
+				id: i+'id',
+				label: pageElement.get('title').value,
+				type: ToCEntryType.Page,
+				form: pageElement,
+				numbering: (i + 1).toString(),
+				subEntriesType: ToCEntryType.Section,
+				subEntries:[],
+				ordinal: pageElement.get('ordinal').value
+			} as ToCEntry)
+		});
+
+
+
+		result.forEach((entry,i)=>{
+
+			const sections = entry.form.get('sections') as FormArray;
+
+			sections.controls.forEach(section=>{
+				const tempResults = this._buildRecursively(section as FormGroup,ToCEntryType.Section);
+				entry.subEntries.push(tempResults);
+			});
+
+		});
+
+		this._sortByOrdinal(result);
+		//calculate numbering
+		this._calculateNumbering(result);
+		return result;
+
+	}
+
 }
+export interface ToCEntry {
+	id: string;
+	label: string;
+	subEntriesType: ToCEntryType;
+	subEntries: ToCEntry[];
+	type: ToCEntryType;
+	form: AbstractControl;
+	numbering: string;
+	ordinal: number;
+}
+export enum ToCEntryType {
+	Page = 0,
+	Section = 1,
+	FieldSet = 2,
+	Field = 3
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.html
new file mode 100644
index 000000000..ea3a5c7ad
--- /dev/null
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.html
@@ -0,0 +1,46 @@
+<div *ngFor="let entry of tocentries; index as idx">
+	<!-- check if is visible -->
+	<ng-container *ngIf="visibilityRulesService.checkElementVisibility(entry.id)">
+
+		<!-- Is fieldset and has no visible inputs -->
+		<ng-container *ngIf="!(entry.type === tocEntryTypeEnum.FieldSet && !visibilityRulesService.scanIfChildsOfCompositeFieldHasVisibleItems(entry.form))">
+
+			<span class="table-entry" 
+			(click)="toggleExpand(idx);navigateToFieldSet(entry, $event); onEntrySelected(entry)"
+			[ngStyle]="calculateStyle(entry)"
+			[ngClass]="calculateClass(entry)"
+			>
+				<span [class.text-danger]="showErrors && entry.form.invalid && entry.type === tocEntryTypeEnum.FieldSet">
+					{{entry.numbering}}. {{entry.label}} 
+				</span>
+				<mat-icon style="transform: translateY(3px);" class="text-danger"
+				*ngIf="showErrors && entry.form.invalid && entry.type !== tocEntryTypeEnum.FieldSet && !expandChildren[idx]">
+					priority_high
+				</mat-icon>
+				<!-- <ng-container *ngIf="entry.subEntries && entry.subEntries.length && !expandChildren[idx]"> 
+					<small>
+						({{entry.subEntries.length}})
+					</small>	
+					
+				</ng-container> -->
+			</span>
+			<!-- <div class="table-entry-container">
+			</div> -->
+			<div class="internal-table">
+				<table-of-contents-internal 
+				[tocentries]="entry.subEntries" 
+				*ngIf="entry.subEntries && entry.subEntries.length && expandChildren[idx]"
+				(entrySelected)="onEntrySelected($event)"
+				[selected]="selected"
+				[TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX"
+				[showErrors]="showErrors">
+		
+				</table-of-contents-internal>
+			</div>
+		</ng-container>
+
+
+
+	</ng-container>
+
+</div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.scss b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.scss
new file mode 100644
index 000000000..91152786d
--- /dev/null
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.scss
@@ -0,0 +1,33 @@
+
+.internal-table{
+  margin-left: 1em;
+  padding-left: 0.2rem;
+  
+}
+.table-entry{
+
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding-left: 0.2rem;
+  color: rgba(0, 0, 0, 0.54);
+  transition: color 100ms;
+
+  display: block;
+  span{
+    white-space: nowrap;
+  }
+}
+
+.table-entry:hover{
+  background-color: #ececec;
+  border-radius: 6px;
+}
+.selected {
+  color: #212121 !important;
+  font-weight: 700 !important;
+  opacity: 1 !important;
+}
+
+.section{
+  line-height: 1.7em;
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.ts
new file mode 100644
index 000000000..0e57e3849
--- /dev/null
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.ts
@@ -0,0 +1,142 @@
+import { DOCUMENT } from '@angular/common';
+import { Component, EventEmitter, Inject, OnInit, Output, Input } from '@angular/core';
+import { BaseComponent } from '@common/base/base.component';
+import { interval, Subject, Subscription } from 'rxjs';
+import { distinctUntilChanged } from 'rxjs/operators';
+import { type } from 'os';
+import { SimpleChanges } from '@angular/core';
+import { ToCEntry, ToCEntryType } from '../../dataset-description.component';
+import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
+import { Rule } from '@app/core/model/dataset-profile-definition/rule';
+
+@Component({
+	selector: 'table-of-contents-internal',
+	styleUrls: ['./table-of-contents-internal.scss'],
+	templateUrl: './table-of-contents-internal.html'
+})
+export class TableOfContentsInternal implements OnInit {
+
+	@Input() tocentries: ToCEntry[] = null;
+	@Input() selected: ToCEntry = null;
+	// @Input() visibilityRules:Rule[] = [];
+	@Output() entrySelected = new EventEmitter<ToCEntry>();
+
+	expandChildren:boolean[];
+	tocEntryTypeEnum = ToCEntryType;
+	@Input() TOCENTRY_ID_PREFIX="";
+	@Input() showErrors: boolean = false;
+
+
+	constructor(public visibilityRulesService: VisibilityRulesService){
+		
+	
+	}
+	ngOnInit(): void {
+		// console.log('component created');
+		if(this.tocentries){
+			this.expandChildren = this.tocentries.map(()=>false);
+			if(this.selected){
+				for(let i=0; i<this.tocentries.length;i++ ){
+					if(this._findTocEntryById(this.selected.id, this.tocentries[i].subEntries)){
+						if(this.expandChildren){
+							this.expandChildren[i] = true;
+						}
+						break;
+					}
+				}	
+			}
+		}
+	}
+
+	ngOnChanges(changes: SimpleChanges) {
+		if(changes.selected && this.selected){
+			for(let i=0; i<this.tocentries.length;i++ ){
+				if(this._findTocEntryById(this.selected.id, this.tocentries[i].subEntries)){
+					if(this.expandChildren){
+						this.expandChildren[i] = true;
+					}
+					break;
+				}
+			}	
+		}
+		// if (!this.isActive && this.links && this.links.length > 0) {
+		// 	this.links.forEach(link => {
+		// 		link.selected = false;
+		// 	})
+		// 	this.links[0].selected = true;
+		// }
+	}
+
+	toggleExpand(index){
+		this.expandChildren[index] = !this.expandChildren[index];
+		// console.log(this.expandChildren);
+	}
+
+	navigateToFieldSet(entry:ToCEntry, event){
+		if(entry.type === ToCEntryType.FieldSet){
+			
+			const fieldSetId = entry.id;
+			const element = document.getElementById(this.TOCENTRY_ID_PREFIX+fieldSetId);
+			if(element){
+				element.click();//open mat expansion panel
+				
+				//scroll asyn in 200 ms so the expansion panel is expanded and the element coordinates are updated
+				setTimeout(() => {
+					const element = document.getElementById(this.TOCENTRY_ID_PREFIX+fieldSetId);
+					if(element){
+						element.scrollIntoView({behavior:'smooth'});
+					}
+				}, 300);
+			}
+
+		}
+	}
+
+
+	onEntrySelected(entry:ToCEntry){
+		this.entrySelected.emit(entry);
+	}
+
+
+	calculateStyle(entry: ToCEntry){
+		const style = {};
+		style['font-size'] = entry.type ===this.tocEntryTypeEnum.FieldSet? '.9em': '1em';
+		return style;
+	}
+
+	calculateClass(entry:ToCEntry){
+		const myClass= {};
+
+		if(this.selected && entry.id === this.selected.id){
+			myClass['selected'] = true;
+		}
+
+		if(entry.type != this.tocEntryTypeEnum.FieldSet){
+			myClass['section'] = true;
+		}
+
+		return myClass;
+	}
+
+	private _findTocEntryById(id: string, tocentries: ToCEntry[]): ToCEntry{
+		if(!tocentries || !tocentries.length){
+			return null;
+		}
+
+		let tocEntryFound = tocentries.find(entry=>entry.id === id);
+
+		if(tocEntryFound){
+			return tocEntryFound;
+		}	
+
+		for(let entry of tocentries){
+			const result = this._findTocEntryById(id, entry.subEntries);
+			if(result){
+				tocEntryFound = result;
+				break;
+			}
+		}
+		
+		return tocEntryFound? tocEntryFound: null;
+	}
+}
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.html
index b91593ca0..75ae05935 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.html
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.html
@@ -9,3 +9,31 @@
 		<!-- </nav> -->
 	</div>
 </div>
+
+<!-- 
+<ng-container *ngIf="tocentries">
+	
+	<div class="internal-table-outer col-12">
+		<table-of-contents-internal [tocentries]="tocentries"
+		(entrySelected)="onToCentrySelected($event)"
+		[selected]="tocentrySelected"
+		
+		>
+	
+		</table-of-contents-internal>
+	</div>
+</ng-container> -->
+
+<div *ngIf="tocentries" class="docs-toc-container">
+	
+	<div class="scroll-container col-12 internal-table">
+		<table-of-contents-internal [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" [tocentries]="tocentries"
+		[showErrors]="showErrors"
+		(entrySelected)="onToCentrySelected($event)"
+		[selected]="tocentrySelected"
+		
+		>
+	
+		</table-of-contents-internal>
+	</div>
+</div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.module.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.module.ts
index b28ec7804..69a648f1a 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.module.ts
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.module.ts
@@ -2,11 +2,15 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {TableOfContents} from './table-of-contents';
 import {RouterModule} from '@angular/router';
+import { TableOfContentsInternal } from './table-of-contents-internal/table-of-contents-internal';
+import { VisibilityRulesService } from '../visibility-rules/visibility-rules.service';
+import { MatIconModule } from '@angular/material';
 
 @NgModule({
-  imports: [CommonModule, RouterModule],
-  declarations: [TableOfContents],
+  imports: [CommonModule, RouterModule, MatIconModule],
+  declarations: [TableOfContents, TableOfContentsInternal],
   exports: [TableOfContents],
   entryComponents: [TableOfContents],
+  providers:[VisibilityRulesService]
 })
 export class TableOfContentsModule { }
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.scss b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.scss
index b346518fa..7dbc877af 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.scss
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.scss
@@ -68,3 +68,13 @@ span {
 .docs-level-h5 {
   margin-left: 24px;
 }
+
+// .internal-table-outer{
+//   padding-left: 1.1em;
+//   width: 100%;
+// }
+
+.internal-table{
+  max-width: 320px;
+  min-width: 320px;
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.ts
index 917a80f55..ce1616a93 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.ts
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.ts
@@ -1,10 +1,14 @@
 import { DOCUMENT } from '@angular/common';
-import { Component, EventEmitter, Inject, OnInit, Output, Input } from '@angular/core';
+import { Component, EventEmitter, Inject, OnInit, Output, Input, OnChanges } from '@angular/core';
 import { BaseComponent } from '@common/base/base.component';
 import { interval, Subject, Subscription } from 'rxjs';
 import { distinctUntilChanged } from 'rxjs/operators';
 import { type } from 'os';
 import { SimpleChanges } from '@angular/core';
+import { ToCEntry, ToCEntryType } from '../dataset-description.component';
+import { FormArray, FormGroup } from '@angular/forms';
+import { VisibilityRulesService } from '../visibility-rules/visibility-rules.service';
+import { Rule } from '@app/core/model/dataset-profile-definition/rule';
 
 export interface Link {
 	/* id of the section*/
@@ -28,7 +32,7 @@ export interface Link {
 	styleUrls: ['./table-of-contents.scss'],
 	templateUrl: './table-of-contents.html'
 })
-export class TableOfContents extends BaseComponent implements OnInit {
+export class TableOfContents extends BaseComponent implements OnInit, OnChanges {
 
 	@Input() links: Link[];
 	container: string;
@@ -39,77 +43,112 @@ export class TableOfContents extends BaseComponent implements OnInit {
 	linksSubject: Subject<HTMLElement[]> = new Subject<HTMLElement[]>();
 
 	@Input() isActive: boolean;
+
+	tocentries: ToCEntry[] = null;
+	@Input() TOCENTRY_ID_PREFIX = '';
+	// visibilityRules:Rule[] = [];
+	@Input() visibilityRules:Rule[] = [];
+	@Input() showErrors: boolean = false;
+	@Input() selectedFieldsetId:string;
+
+	private _tocentrySelected:ToCEntry = null;
+	get tocentrySelected(){
+	
+		return this.hasFocus?this._tocentrySelected: null;
+	}
+	set tocentrySelected(value){
+		this._tocentrySelected = value;
+	}
+
+	@Input() formGroup: FormGroup;
+	@Input() hasFocus: boolean = false;
 	show: boolean = false;
 
 	constructor(
-		@Inject(DOCUMENT) private _document: Document) {
+		@Inject(DOCUMENT) private _document: Document,
+		public visibilityRulesService: VisibilityRulesService
+		) {
 		super();
 	}
 
 
 	ngOnInit(): void {
-		//emit value every 500ms
-		const source = interval(500);
-		this.subscription = source.subscribe(val => {
-			const headers = Array.from(this._document.querySelectorAll(this.headerSelectors)) as HTMLElement[];
-			this.linksSubject.next(headers);
-		});
+		
+		if(this.formGroup){
+			this.tocentries = this.getTocEntries(this.formGroup.get('datasetProfileDefinition'));
+			const fg = this.formGroup.get('datasetProfileDefinition');
+			this.visibilityRulesService.buildVisibilityRules(this.visibilityRules, fg);
+			
+		}else{
+			
+			//emit value every 500ms
+			const source = interval(500);
+			this.subscription = source.subscribe(val => {
+				const headers = Array.from(this._document.querySelectorAll(this.headerSelectors)) as HTMLElement[];
+				this.linksSubject.next(headers);
+			});
 
-		if (!this.links || this.links.length === 0) {
-			this.linksSubject.asObservable()
-				.pipe(distinctUntilChanged((p: HTMLElement[], q: HTMLElement[]) => JSON.stringify(p) == JSON.stringify(q)))
-				.subscribe(headers => {
-					const links: Array<Link> = [];
+			if (!this.links || this.links.length === 0) {
+				this.linksSubject.asObservable()
+					.pipe(distinctUntilChanged((p: HTMLElement[], q: HTMLElement[]) => JSON.stringify(p) == JSON.stringify(q)))
+					.subscribe(headers => {
+						const links: Array<Link> = [];
 
-					if (headers.length) {
-						let page;
-						let section;
-						let show
-						for (const header of headers) {
-							let name;
-							let id;
-							if (header.classList.contains('toc-page-header')) {  // deprecated after removing stepper
-								name = header.innerText.trim().replace(/^link/, '');
-								id = header.id;
-								page = header.id.split('_')[1];
-								section = undefined;
-								show = true;
-							} else if (header.classList.contains('toc-section-header')) {
-								name = header.childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].nodeValue.trim().replace(/^link/, '');
-								id = header.id;
-								page = header.id.split('.')[1];
-								section = header.id;
-								if (header.id.split('.')[4]) { show = false; }
-								else { show = true; }
-							} else if (header.classList.contains('toc-compositeField-header')) {
-								name = (header.childNodes[0]).nodeValue.trim().replace(/^link/, '');
-								id = header.id;
-								// id = header.parentElement.parentElement.parentElement.id;
-								show = false;
+						if (headers.length) {
+							let page;
+							let section;
+							let show
+							for (const header of headers) {
+								let name;
+								let id;
+								if (header.classList.contains('toc-page-header')) {  // deprecated after removing stepper
+									name = header.innerText.trim().replace(/^link/, '');
+									id = header.id;
+									page = header.id.split('_')[1];
+									section = undefined;
+									show = true;
+								} else if (header.classList.contains('toc-section-header')) {
+									name = header.childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].nodeValue.trim().replace(/^link/, '');
+									id = header.id;
+									page = header.id.split('.')[1];
+									section = header.id;
+									if (header.id.split('.')[4]) { show = false; }
+									else { show = true; }
+								} else if (header.classList.contains('toc-compositeField-header')) {
+									name = (header.childNodes[0]).nodeValue.trim().replace(/^link/, '');
+									id = header.id;
+									// id = header.parentElement.parentElement.parentElement.id;
+									show = false;
+								}
+								const { top } = header.getBoundingClientRect();
+								links.push({
+									name,
+									id,
+									type: header.tagName.toLowerCase(),
+									top: top,
+									active: false,
+									page: page,
+									section: section,
+									show: show,
+									selected: false
+								});
 							}
-							const { top } = header.getBoundingClientRect();
-							links.push({
-								name,
-								id,
-								type: header.tagName.toLowerCase(),
-								top: top,
-								active: false,
-								page: page,
-								section: section,
-								show: show,
-								selected: false
-							});
 						}
-					}
-					this.links = links;
-					// Initialize selected for button next on dataset wizard component editor
-					this.links.length > 0 ? this.links[0].selected = true : null;
-				})
+						this.links = links;
+						// Initialize selected for button next on dataset wizard component editor
+						this.links.length > 0 ? this.links[0].selected = true : null;
+					})
+			}
 		}
 
 	}
 
 	ngOnChanges(changes: SimpleChanges) {
+		
+		if(this.selectedFieldsetId){
+			this.tocentrySelected = this._findTocEntryById(this.selectedFieldsetId,this.tocentries);
+		}
+
 		// if (!this.isActive && this.links && this.links.length > 0) {
 		// 	this.links.forEach(link => {
 		// 		link.selected = false;
@@ -158,6 +197,153 @@ export class TableOfContents extends BaseComponent implements OnInit {
 	// 	return +link.id.split("_", 2)[1];
 	// }
 
+
+	private _buildRecursively(form: FormGroup,whatAmI:ToCEntryType):ToCEntry{
+		if(!form) return null;
+
+		switch(whatAmI){
+			case ToCEntryType.Section:
+				const sections = form.get('sections') as FormArray;
+				const fieldsets = form.get('compositeFields') as FormArray;
+
+
+				const tempResult:ToCEntry[] = [];
+				
+				if(sections &&sections.length){
+					sections.controls.forEach(section=>{
+						tempResult.push(this._buildRecursively(section as FormGroup, ToCEntryType.Section));
+					});
+
+				}else if(fieldsets && fieldsets.length){
+					fieldsets.controls.forEach(fieldset=>{
+						tempResult.push(this._buildRecursively(fieldset as FormGroup, ToCEntryType.FieldSet));
+					});
+				}
+				return {
+					form: form,
+					id: form.get('id').value,
+					label: form.get('title').value,
+					numbering: '',
+					subEntries:tempResult,
+					subEntriesType: sections &&sections.length? ToCEntryType.Section: ToCEntryType.FieldSet,
+					type: ToCEntryType.Section,
+					ordinal: form.get('ordinal').value
+				}
+			case ToCEntryType.FieldSet:
+				return {
+					form: form,
+					label:form.get('title').value,
+					id: form.get('id').value,
+					numbering:'s',
+					subEntries:[],
+					subEntriesType: ToCEntryType.Field,
+					type: ToCEntryType.FieldSet,
+					ordinal: form.get('ordinal').value
+				}
+		}
+	}
+
+	private _sortByOrdinal(tocentries: ToCEntry[]){
+		
+		if(!tocentries || !tocentries.length) return;
+		
+		tocentries.sort(this._customCompare);
+		tocentries.forEach(entry=>{
+			this._sortByOrdinal(entry.subEntries);
+		});
+	}
+
+	private _customCompare(a,b){
+		return a.ordinal - b.ordinal;
+	}
+
+	private _calculateNumbering(tocentries: ToCEntry[], depth:number[] = []){
+		if(!tocentries || !tocentries.length){
+			return;
+		}
+
+		let  prefixNumbering = depth.length? depth.join('.'): '';
+
+		if(depth.length) prefixNumbering = prefixNumbering+".";
+		tocentries.forEach((entry,i)=>{
+			entry.numbering = prefixNumbering + (i+1);
+			this._calculateNumbering(entry.subEntries, [...depth, i+1])
+		});
+	}
+
+	
+	getTocEntries(form): ToCEntry[] {
+		if (form == null) { return []; }
+		const result: ToCEntry[] = [];
+
+		//build parent pages
+		(form.get('pages') as FormArray).controls.forEach((pageElement, i) => {
+			result.push({
+				id: i+'id',
+				label: pageElement.get('title').value,
+				type: ToCEntryType.Page,
+				form: pageElement,
+				numbering: (i + 1).toString(),
+				subEntriesType: ToCEntryType.Section,
+				subEntries:[],
+				ordinal: pageElement.get('ordinal').value
+			} as ToCEntry)
+		});
+
+
+
+		result.forEach((entry,i)=>{
+
+			const sections = entry.form.get('sections') as FormArray;
+
+			sections.controls.forEach(section=>{
+				const tempResults = this._buildRecursively(section as FormGroup,ToCEntryType.Section);
+				entry.subEntries.push(tempResults);
+			});
+
+		});
+
+		this._sortByOrdinal(result);
+		//calculate numbering
+		this._calculateNumbering(result);
+		return result;
+
+	}
+
+	onToCentrySelected(entry: ToCEntry){
+		this.tocentrySelected = entry;
+		// console.log('entry selected', entry);
+	}
+
+
+	public seekToFirstElement(){//only on tocentry mode
+		if(this.tocentries && this.tocentries.length){
+			this.tocentrySelected = this.tocentries[0];
+		}
+	}
+
+	private _findTocEntryById(id: string, tocentries: ToCEntry[]): ToCEntry{
+		if(!tocentries || !tocentries.length){
+			return null;
+		}
+
+		let tocEntryFound = tocentries.find(entry=>entry.id === id);
+
+		if(tocEntryFound){
+			return tocEntryFound;
+		}	
+
+		for(let entry of tocentries){
+			const result = this._findTocEntryById(id, entry.subEntries);
+			if(result){
+				tocEntryFound = result;
+				break;
+			}
+		}
+		
+		return tocEntryFound? tocEntryFound: null;
+	}
+
 }
 
 export interface LinkToScroll {
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service.ts
index 7c77b16af..9460af83d 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service.ts
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service.ts
@@ -1,5 +1,6 @@
 import { ApplicationRef, Injectable, NgZone } from '@angular/core';
 import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
+import { DatasetProfileFieldViewStyle } from '@app/core/common/enum/dataset-profile-field-view-style';
 import { isNumeric } from 'rxjs/internal/util/isNumeric';
 import { Rule } from '../../../../core/model/dataset-profile-definition/rule';
 import { VisibilityRule } from './models/visibility-rule';
@@ -38,6 +39,22 @@ export class VisibilityRulesService {
 	}
 
 	private evaluateVisibility(visibilityRule: VisibilityRule, value: any) {
+
+		if (value instanceof Array){
+
+			const parsedSourceControlValues = visibilityRule.sourceVisibilityRules.map(e=>this.parseValue(e.sourceControlValue));
+			const parsedValues = value.map(e=>this.parseValue(e));
+
+			const isVisible = parsedValues.map(v=>parsedSourceControlValues.includes(v)).reduce((acc,current)=> acc|| current, false);
+
+			
+			if(isVisible){
+				this.elementVisibilityMap.set(visibilityRule.targetControlId, true);
+				return;
+			}
+
+		}
+
 		for (let i = 0; i < visibilityRule.sourceVisibilityRules.length; i++) {
 			if (value != null && (this.parseValue(value) !== this.parseValue(visibilityRule.sourceVisibilityRules[i].sourceControlValue))) {
 				this.elementVisibilityMap.set(visibilityRule.targetControlId, false);
@@ -123,7 +140,13 @@ export class VisibilityRulesService {
 	}
 
 	private resetFieldFormGroup(formGroup: FormGroup) {
-		formGroup.get('value').setValue(formGroup.get('defaultValue').value ? this.parseValue(formGroup.get('defaultValue').value.value) : undefined);
+		const renderStyle = formGroup.getRawValue().viewStyle.renderStyle;
+		if(renderStyle ===DatasetProfileFieldViewStyle.Validation || renderStyle === DatasetProfileFieldViewStyle.DatasetIdentifier){
+			formGroup.get('value').setValue({identifier:'',type:'' });
+		}else{
+			formGroup.get('value').setValue(formGroup.get('defaultValue').value ? this.parseValue(formGroup.get('defaultValue').value.value) : undefined);
+		}
+
 	}
 
 	private resetCompositeFieldFormGroup(formGroup: FormGroup) {
diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.html b/dmp-frontend/src/app/ui/navbar/navbar.component.html
index 4df4feb0c..d5f969740 100644
--- a/dmp-frontend/src/app/ui/navbar/navbar.component.html
+++ b/dmp-frontend/src/app/ui/navbar/navbar.component.html
@@ -2,7 +2,7 @@
 	<nav class="navbar navbar-expand-lg fixed-navbar">
 		<div class="container-fluid">
 
-			<div class="hamburger change" id="hamburger" (click)="sidebarToggleOutput($event)">
+			<div class="hamburger change" id="hamburger" (click)="toggleMyNav($event)">
 				<div class="icon-bar1"></div>
 				<div class="icon-bar2"></div>
 				<div class="icon-bar3"></div>
diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.ts b/dmp-frontend/src/app/ui/navbar/navbar.component.ts
index 016c794cd..d664c7325 100644
--- a/dmp-frontend/src/app/ui/navbar/navbar.component.ts
+++ b/dmp-frontend/src/app/ui/navbar/navbar.component.ts
@@ -18,6 +18,7 @@ import { UserListingModel } from '@app/core/model/user/user-listing';
 import { Principal } from '@app/core/model/auth/principal';
 import { MatomoService } from '@app/core/services/matomo/matomo-service';
 import { HttpClient } from '@angular/common/http';
+import { SideNavService } from '@app/core/services/sidenav/side-nav.sevice';
 
 const availableLanguages: any[] = require('../../../assets/resources/language.json');
 
@@ -50,7 +51,8 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 		private languageService: LanguageService,
 		public userService: UserService,
 		private httpClient: HttpClient,
-		private matomoService: MatomoService
+		private matomoService: MatomoService,
+		private sidenavService: SideNavService
 	) {
 		super();
 		this.location = location;
@@ -260,6 +262,10 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 		this.sidebarToggled.emit(event);
 	}
 
+	toggleMyNav(event){
+		this.sidenavService.toggle();
+	}
+
 	openNewDmpDialog() {
 		if (this.dialog.openDialogs.length > 0) {
 			this.dialog.closeAll();
diff --git a/dmp-frontend/src/assets/i18n/de.json b/dmp-frontend/src/assets/i18n/de.json
index 5ba6cc636..46b1c0328 100644
--- a/dmp-frontend/src/assets/i18n/de.json
+++ b/dmp-frontend/src/assets/i18n/de.json
@@ -281,11 +281,47 @@
 			"ROLES": "Roles"
 		},
 		"STEPS": {
+			"GENERAL-INFO": {
+				"TITLE": "General Info",
+				"DATASET-TEMPLATE-NAME": "Dataset template name",
+				"DATASET-TEMPLATE-NAME-HINT": "A title that determines the Dataset template.",
+				"DATASET-TEMPLATE-DESCRIPTION": "Description",
+				"DATASET-TEMPLATE-DESCRIPTION-HINT": "A brief description of what the Dataset is about, it's scope and objectives.",
+				"DATASET-TEMPLATE-LANGUAGE": "Dataset template language",
+				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
+				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
+				"UNTITLED": "Untitled",
+				"QUESTION": "Question",
+				"TEMPLATE-OUTLINE":"Template outline"
+			},
+			"PAGE-INFO": {
+				"PAGE-NAME": "Chapter Name",
+				"PAGE-NAME-HINT": "Set a name for the dataset chapter.",
+				"PAGE-DESCRIPTION": "Description",
+				"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the chapter is about.",
+				"ACTIONS": {
+					"CREATE-FIRST-PAGE": "Create the first chapter",
+					"CREATE-NEW-SUBSECTION": "Section",
+					"CREATE-NEW-SECTION": "Chapter",
+					"CREATE-FIRST-SECTION":"Create the first chapter",
+					"NOTHING-HERE-HINT": "Nothing here yet.",
+					"START-CREATING-PAGE-START": "Start by ",
+					"START-CREATING-PAGE-END": "creating the first chapter."
+				},
+				"PAGE": "Chapter"
+			},
+			"SECTION-INFO": {
+				"SECTION-NAME": "Section Name",
+				"SECTION-NAME-HINT": "Set a name for the section.",
+				"SECTION-DESCRIPTION": "Description",
+				"SECTION-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
+				"SECTION": "Section"
+			},
 			"PAGES": {
-				"TITLE": "Page Description",
-				"PAGE-PREFIX": "Page",
-				"PAGE-INPUT-TITLE": "Page Title",
-				"DATASET-DETAILS": "Dataset Description Details",
+				"TITLE": "Chapter Description",
+				"PAGE-PREFIX": "Chapter",
+				"PAGE-INPUT-TITLE": "Chapter Title",
+				"DATASET-DETAILS": "Dataset Details",
 				"EXTERNAL-REFERENCES": "External References",
 				"DESCRIPTION": "Description"
 			},
@@ -345,29 +381,29 @@
 						"VALIDATION": "Validation",
 						"MULTIPLICITY-CHECKBOX": "Multiplicity",
 						"FIELD-TEXT-AREA-TITLE": "Text Area Data",
-						"FIELD-TEXT-AREA-PLACEHOLDER": "Input Placeholder",
+						"FIELD-TEXT-AREA-PLACEHOLDER": "Input Placeholder Text",
 						"FIELD-BOOLEAN-DECISION-TITLE": "Boolean Decision Data",
 						"FIELD-BOOLEAN-DECISION-PLACEHOLDER": "Input Placeholder",
 						"FIELD-CHECKBOX-TITLE": "Checkbox Data",
-						"FIELD-CHECKBOX-PLACEHOLDER": "Input Placeholder",
+						"FIELD-CHECKBOX-PLACEHOLDER": "Input Placeholder Text",
 						"FIELD-FREE-TEXT-TITLE": "Free Text Data",
-						"FIELD-FREE-TEXT-PLACEHOLDER": "Input Placeholder",
+						"FIELD-FREE-TEXT-PLACEHOLDER": "Input Placeholder Text",
 						"FIELD-COMBO-BOX-TYPE": "Type of Combo Box",
 						"FIELD-WORD-LIST-TITLE": "Word List Data",
-						"FIELD-WORD-LIST-PLACEHOLDER": "Input Placeholder",
+						"FIELD-WORD-LIST-PLACEHOLDER": "Input Placeholder Text",
 						"FIELD-WORD-LIST-LABEL": "Label",
 						"FIELD-WORD-LIST-VALUE": "Value",
 						"FIELD-INTERNAL-DMP-ENTITIES-TYPE": "Type of Internal DMP Entity",
 						"FIELD-RESEARCHERS-TITLE": "Researchers Autocomplete",
-						"FIELD-RESEARCHERS-PLACEHOLDER": "Input Placeholder",
-						"FIELD-DATASETS-PLACEHOLDER": "Input Placeholder",
-						"FIELD-DMPS-PLACEHOLDER": "Input Placeholder",
+						"FIELD-RESEARCHERS-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-DATASETS-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-DMPS-PLACEHOLDER": "Input Placeholder Text",
 						"FIELD-RADIO-BOX-TITLE": "Radio Box Data",
-						"FIELD-RADIO-BOX-PLACEHOLDER": "Input Placeholder",
+						"FIELD-RADIO-BOX-PLACEHOLDER": "Input Placeholder Text",
 						"FIELD-RADIO-BOX-LABEL": "Label",
 						"FIELD-RADIO-BOX-VALUE": "Value",
 						"FIELD-AUTOCOMPLETE-TITLE": "Autocomplete Data",
-						"FIELD-AUTOCOMPLETE-PLACEHOLDER": "Input Placeholder",
+						"FIELD-AUTOCOMPLETE-PLACEHOLDER": "Input Placeholder Text",
 						"FIELD-AUTOCOMPLETE-SOURCE-TITLE": "Sources",
 						"FIELD-AUTOCOMPLETE-ADD_SOURCE": "Add Source",
 						"FIELD-AUTOCOMPLETE-TYPE": "Source Type",
@@ -379,11 +415,34 @@
 						"FIELD-AUTOCOMPLETE-URL": "Url",
 						"FIELD-AUTOCOMPLETE-OPTIONS-ROOT": "Options Root",
 						"FIELD-DATE-PICKER-TITLE": "Date Picker",
-						"FIELD-DATE-PICKER-PLACEHOLDER": "Input Placeholder",
+						"FIELD-DATE-PICKER-PLACEHOLDER": "Input Placeholder Text",
 						"FIELD-DATE-PICKER-LABEL": "Label",
 						"FIELD-DATE-PICKER-VALUE": "Value",
 						"FIELD-MULTIPLE-AUTOCOMPLETE": "Multiple Autocomplete",
-						"FIELD-MULTIPLE-WORDLIST": "Multiple Selection"
+						"FIELD-MULTIPLE-WORDLIST": "Multiple Selection",
+						"FIELD-CURRENCY-TITLE": "Currency Data",
+						"FIELD-CURRENCY-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-REGISTRIES-TITLE": "Registries Data",
+						"FIELD-REGISTRIES-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-SERVICES-TITLE": "Services Data",
+						"FIELD-SERVICES-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-ORGANIZATIONS-TITLE": "Organizations Data",
+						"FIELD-ORGANIZATIONS-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-EXTERNAL-DATASETS-TITLE": "External Datasets Data",
+						"FIELD-EXTERNAL-DATASETS-PLACEHOLDER": "Input placeholder",
+						"FIELD-DATA-REPOSITORIES-TITLE": "Data Repositories Data Text",
+						"FIELD-DATA-REPOSITORIES-PLACEHOLDER": "Input placeholder",
+						"FIELD-TAGS-TITLE": "Tags Data",
+						"FIELD-TAGS-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-DATASET-IDENTIFIER-TITLE": "Dataset Identifier Data",
+						"FIELD-DATASET-IDENTIFIER-PLACEHOLDER": "Input placeholder",
+						"FIELD-VALIDATOR-TITLE": "Validator Data",
+						"FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder Text"
+					},
+					"ERROR-MESSAGES":{
+						"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
+						"FIELD-RADIO-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided.",
+						"FIELD-SELECT-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided."
 					},
 					"DEFAULT-VALUES": {
 						"NONE": "Keine",
@@ -406,9 +465,38 @@
 						"TARGET": "Target Field Id",
 						"VALUE": "Required Value",
 						"RULE-IF": "If Value is",
-						"RULE-THEN": "then show Field With Id"
+						"RULE-THEN": "then show Field With Id",
+						"FIELDSETS": "Questions",
+						"FIELDS":"Inputs"
+					},
+					"HINTS":{
+						"ELEMENT-CHILD-OF-TARGET":"This element is parent of selected input.",
+						"ELEMENT-HIDDEN-FROM-ELEMENT":"This element hides the element or a parent element of the input you are trying to apply visibility rule from."
+					}
+				},
+				"FORM-VALIDATION":{
+					"ERROR-MESSAGES":{
+						"PAGE-MUST-HAVE-SECTION": "Each chapter must have at least one section.",
+						"NEEDS-MORE-INFORMATION": " needs more information.",
+						"MUST-HAVE-SECTION-OR-FIELDSET": " must have either section or question.",
+						"MISSING":"Missing",
+						"PROVIDE-PAGE-AND-SECTION":"Make sure you provide a chapter and at least one section per chapter."
+					}
+				},
+				"TABLE-OF-CONTENTS":{
+					"ERROR-MESSAGES":{
+						"FIELDSET-MUST-HAVE-PARENT-SECTION":"Question can only be child of section.",
+						"INPUT-SECTION-SAME-LEVEL": "Cannot have question and section on the same level.",
+						"DRAG-NOT-SUPPORTED":"Drag n drop of section not supported to target container.",
+						"PAGE-ELEMENT-ONLY-TOP-LEVEL": "Chapter elements can only be at top level"
 					}
 				}
+			},
+			"TOOLKIT": {
+				"GENERAL-TOOLS": "Questions tools",
+				"NEW-INPUT-SET": "Add Question",
+				"CLONE": "Clone",
+				"DELETE": "Delete"
 			}
 		},
 		"ACTIONS": {
@@ -419,7 +507,26 @@
 			"DELETE": "Delete",
 			"ADD-PAGE": "Add Page +",
 			"ADD-SECTION": "Add Section +",
-			"VALIDATE": "Validate"
+			"VALIDATE": "Validate",
+			"PREVIEW-AND-FINALIZE": "Preview and finalize",
+			"FIELD": {
+				"MAKE-IT-REQUIRED": "Make input required",
+				"ADD-VISIBILITY-RULE": "Add visibility rule",
+				"DELETE-INPUT": "Delete this input",
+				"PREVIEW": "Preview",
+				"NOT-INITIALIZED": "Not initialized yet"
+			},
+			"FIELDSET": {
+				"ADD-INPUT": "Add new input",
+				"COMMENT-FIELD": "Comment field",
+				"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.",
+				"ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.",
+				"MULTIPLICITY": "Multiplicity",
+				"MORE": "More.."
+			}
+		},
+		"FEEDBACK-MESSAGES":{
+			"SAVE-SUCCESS":"Changes were saved successfully."
 		}
 	},
 	"GRANT-LISTING": {
@@ -430,9 +537,9 @@
 		}
 	},
 	"DMP-LISTING": {
-		"TITLE": "Datenmanagementpläne",
+		"DMP": "DMP",
 		"GRANT": "Grant",
-		"TITLE": "Data Management Plans",
+		"TITLE": "Datenmanagementpläne",
 		"OWNER": "Besitzer",
 		"MEMBER": "Mitglied",
 		"CREATOR": "Ersteller",
@@ -723,7 +830,8 @@
 			"VIEW": "Ansehen",
 			"CLONE": "Klon",
 			"NEW-VERSION": "Neue Version",
-			"VIEW-VERSIONS": "Alle Vorlagenversionen für Datensatzbeschreibungen"
+			"VIEW-VERSIONS": "Alle Vorlagenversionen für Datensatzbeschreibungen",
+			"DELETE":"Delete"
 		}
 	},
 	"DATASET-UPLOAD": {
@@ -1153,7 +1261,10 @@
 			"RESEARCHERS": "Researchers",
 			"ORGANIZATIONS": "Organizations",
 			"DATASET-IDENTIFIER": "Dataset Identifier",
-			"CURRENCY": "Currency"
+			"CURRENCY": "Currency",
+			"VALIDATION": "Validator",
+			"OTHER": "Other",
+			"SELECT": "Select"
 		},
 		"DATASET-PROFILE-COMBO-BOX-TYPE": {
 			"WORD-LIST": "Word List",
@@ -1170,6 +1281,9 @@
 			"DATASETS": "Datensatzbeschreibungen",
 			"EXTERNAL-SOURCE-HINT": "Liste jener Werte, die von externer(n) Quelle(n) stammen"
 		},
+		"DATASET-PROFILE-VALIDATOR": {
+			"ACTION": "Validate"
+		},
 		"RECENT-ACTIVITY-ORDER": {
 			"CREATED": "Created",
 			"LABEL": "Label",
@@ -1588,6 +1702,7 @@
 	"DATASET-PROFILE-STATUS": {
 		"NONE": "None",
 		"DRAFT": "Draft",
-		"FINALIZED": "Finalized"
+		"FINALIZED": "Finalized",
+		"DELETED": "Deleted"
 	}
-}
+}
\ 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 dda8a11b8..78c40cc2e 100644
--- a/dmp-frontend/src/assets/i18n/en.json
+++ b/dmp-frontend/src/assets/i18n/en.json
@@ -281,10 +281,46 @@
 			"ROLES": "Roles"
 		},
 		"STEPS": {
+			"GENERAL-INFO": {
+				"TITLE": "General Info",
+				"DATASET-TEMPLATE-NAME": "Dataset template name",
+				"DATASET-TEMPLATE-NAME-HINT": "A title that determines the Dataset template.",
+				"DATASET-TEMPLATE-DESCRIPTION": "Description",
+				"DATASET-TEMPLATE-DESCRIPTION-HINT": "A brief description of what the Dataset is about, it's scope and objectives.",
+				"DATASET-TEMPLATE-LANGUAGE": "Dataset template language",
+				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
+				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
+				"UNTITLED": "Untitled",
+				"QUESTION": "Question",
+				"TEMPLATE-OUTLINE":"Template outline"
+			},
+			"PAGE-INFO": {
+				"PAGE-NAME": "Chapter Name",
+				"PAGE-NAME-HINT": "Set a name for the dataset chapter.",
+				"PAGE-DESCRIPTION": "Description",
+				"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the chapter is about.",
+				"ACTIONS": {
+					"CREATE-FIRST-PAGE": "Create the first chapter",
+					"CREATE-NEW-SUBSECTION": "Section",
+					"CREATE-NEW-SECTION": "Chapter",
+					"CREATE-FIRST-SECTION":"Create the first chapter",
+					"NOTHING-HERE-HINT": "Nothing here yet.",
+					"START-CREATING-PAGE-START": "Start by ",
+					"START-CREATING-PAGE-END": "creating the first chapter."
+				},
+				"PAGE": "Chapter"
+			},
+			"SECTION-INFO": {
+				"SECTION-NAME": "Section Name",
+				"SECTION-NAME-HINT": "Set a name for the section.",
+				"SECTION-DESCRIPTION": "Description",
+				"SECTION-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
+				"SECTION": "Section"
+			},
 			"PAGES": {
-				"TITLE": "Page Description",
-				"PAGE-PREFIX": "Page",
-				"PAGE-INPUT-TITLE": "Page Title",
+				"TITLE": "Chapter Description",
+				"PAGE-PREFIX": "Chapter",
+				"PAGE-INPUT-TITLE": "Chapter Title",
 				"DATASET-DETAILS": "Dataset Details",
 				"EXTERNAL-REFERENCES": "External References",
 				"DESCRIPTION": "Description"
@@ -345,29 +381,29 @@
 						"VALIDATION": "Validation",
 						"MULTIPLICITY-CHECKBOX": "Multiplicity",
 						"FIELD-TEXT-AREA-TITLE": "Text Area Data",
-						"FIELD-TEXT-AREA-PLACEHOLDER": "Input Placeholder",
+						"FIELD-TEXT-AREA-PLACEHOLDER": "Input Placeholder Text",
 						"FIELD-BOOLEAN-DECISION-TITLE": "Boolean Decision Data",
-						"FIELD-BOOLEAN-DECISION-PLACEHOLDER": "Input Placeholder",
+						"FIELD-BOOLEAN-DECISION-PLACEHOLDER": "Input Placeholder Text",
 						"FIELD-CHECKBOX-TITLE": "Checkbox Data",
-						"FIELD-CHECKBOX-PLACEHOLDER": "Input Placeholder",
+						"FIELD-CHECKBOX-PLACEHOLDER": "Input Placeholder Text",
 						"FIELD-FREE-TEXT-TITLE": "Free Text Data",
-						"FIELD-FREE-TEXT-PLACEHOLDER": "Input Placeholder",
+						"FIELD-FREE-TEXT-PLACEHOLDER": "Input Placeholder Text",
 						"FIELD-COMBO-BOX-TYPE": "Type of Combo Box",
 						"FIELD-WORD-LIST-TITLE": "Word List Data",
-						"FIELD-WORD-LIST-PLACEHOLDER": "Input Placeholder",
+						"FIELD-WORD-LIST-PLACEHOLDER": "Input Placeholder Text",
 						"FIELD-WORD-LIST-LABEL": "Label",
 						"FIELD-WORD-LIST-VALUE": "Value",
 						"FIELD-INTERNAL-DMP-ENTITIES-TYPE": "Type of Internal DMP Entity",
 						"FIELD-RESEARCHERS-TITLE": "Researchers Autocomplete",
-						"FIELD-RESEARCHERS-PLACEHOLDER": "Input Placeholder",
-						"FIELD-DATASETS-PLACEHOLDER": "Input Placeholder",
-						"FIELD-DMPS-PLACEHOLDER": "Input Placeholder",
+						"FIELD-RESEARCHERS-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-DATASETS-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-DMPS-PLACEHOLDER": "Input Placeholder Text",
 						"FIELD-RADIO-BOX-TITLE": "Radio Box Data",
-						"FIELD-RADIO-BOX-PLACEHOLDER": "Input Placeholder",
+						"FIELD-RADIO-BOX-PLACEHOLDER": "Input Placeholder Text",
 						"FIELD-RADIO-BOX-LABEL": "Label",
 						"FIELD-RADIO-BOX-VALUE": "Value",
 						"FIELD-AUTOCOMPLETE-TITLE": "Autocomplete Data",
-						"FIELD-AUTOCOMPLETE-PLACEHOLDER": "Input Placeholder",
+						"FIELD-AUTOCOMPLETE-PLACEHOLDER": "Input Placeholder Text",
 						"FIELD-AUTOCOMPLETE-SOURCE-TITLE": "Sources",
 						"FIELD-AUTOCOMPLETE-ADD_SOURCE": "Add Source",
 						"FIELD-AUTOCOMPLETE-TYPE": "Source Type",
@@ -379,11 +415,34 @@
 						"FIELD-AUTOCOMPLETE-URL": "Url",
 						"FIELD-AUTOCOMPLETE-OPTIONS-ROOT": "Options Root",
 						"FIELD-DATE-PICKER-TITLE": "Date Picker",
-						"FIELD-DATE-PICKER-PLACEHOLDER": "Input Placeholder",
+						"FIELD-DATE-PICKER-PLACEHOLDER": "Input Placeholder Text",
 						"FIELD-DATE-PICKER-LABEL": "Label",
 						"FIELD-DATE-PICKER-VALUE": "Value",
 						"FIELD-MULTIPLE-AUTOCOMPLETE": "Multiple Autocomplete",
-						"FIELD-MULTIPLE-WORDLIST": "Multiple Selection"
+						"FIELD-MULTIPLE-WORDLIST": "Multiple Selection",
+						"FIELD-CURRENCY-TITLE": "Currency Data",
+						"FIELD-CURRENCY-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-REGISTRIES-TITLE": "Registries Data",
+						"FIELD-REGISTRIES-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-SERVICES-TITLE": "Services Data",
+						"FIELD-SERVICES-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-ORGANIZATIONS-TITLE": "Organizations Data",
+						"FIELD-ORGANIZATIONS-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-EXTERNAL-DATASETS-TITLE": "External Datasets Data",
+						"FIELD-EXTERNAL-DATASETS-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-DATA-REPOSITORIES-TITLE": "Data Repositories Data",
+						"FIELD-DATA-REPOSITORIES-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-TAGS-TITLE": "Tags Data",
+						"FIELD-TAGS-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-DATASET-IDENTIFIER-TITLE": "Dataset Identifier Data",
+						"FIELD-DATASET-IDENTIFIER-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-VALIDATOR-TITLE": "Validator Data",
+						"FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder Text"
+					},
+					"ERROR-MESSAGES":{
+						"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
+						"FIELD-RADIO-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided.",
+						"FIELD-SELECT-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided."
 					},
 					"DEFAULT-VALUES": {
 						"NONE": "None",
@@ -406,9 +465,38 @@
 						"TARGET": "Target Field Id",
 						"VALUE": "Required Value",
 						"RULE-IF": "If Value is",
-						"RULE-THEN": "then show Field With Id"
+						"RULE-THEN": "then show Field With Id",
+						"FIELDSETS": "Questions",
+						"FIELDS":"Inputs"
+					},
+					"HINTS":{
+						"ELEMENT-CHILD-OF-TARGET":"This element is parent of selected input.",
+						"ELEMENT-HIDDEN-FROM-ELEMENT":"This element hides the element or a parent element of the input you are trying to apply visibility rule from."
+					}
+				},
+				"FORM-VALIDATION":{
+					"ERROR-MESSAGES":{
+						"PAGE-MUST-HAVE-SECTION": "Each chapter must have at least one section.",
+						"NEEDS-MORE-INFORMATION": " needs more information.",
+						"MUST-HAVE-SECTION-OR-FIELDSET": " must have either section or question.",
+						"MISSING":"Missing",
+						"PROVIDE-PAGE-AND-SECTION":"Make sure you provide a chapter and at least one section per chapter."
+					}
+				},
+				"TABLE-OF-CONTENTS":{
+					"ERROR-MESSAGES":{
+						"FIELDSET-MUST-HAVE-PARENT-SECTION":"Question can only be child of section.",
+						"INPUT-SECTION-SAME-LEVEL": "Cannot have question and section on the same level.",
+						"DRAG-NOT-SUPPORTED":"Drag n drop of section not supported to target container.",
+						"PAGE-ELEMENT-ONLY-TOP-LEVEL": "Chapter elements can only be at top level"
 					}
 				}
+			},
+			"TOOLKIT": {
+				"GENERAL-TOOLS": "Questions tools",
+				"NEW-INPUT-SET": "Add Question",
+				"CLONE": "Clone",
+				"DELETE": "Delete"
 			}
 		},
 		"ACTIONS": {
@@ -419,7 +507,26 @@
 			"DELETE": "Delete",
 			"ADD-PAGE": "Add Page +",
 			"ADD-SECTION": "Add Section +",
-			"VALIDATE": "Validate"
+			"VALIDATE": "Validate",
+			"PREVIEW-AND-FINALIZE": "Preview & Finalize",
+			"FIELD": {
+				"MAKE-IT-REQUIRED": "Make input required",
+				"ADD-VISIBILITY-RULE": "Add visibility rule",
+				"DELETE-INPUT": "Delete this input",
+				"PREVIEW": "Preview",
+				"NOT-INITIALIZED": "Not initialized yet"
+			},
+			"FIELDSET": {
+				"ADD-INPUT": "Add new input",
+				"COMMENT-FIELD": "Comment field",
+				"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.",
+				"ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.",
+				"MULTIPLICITY": "Multiplicity",
+				"MORE": "More.."
+			}
+		},
+		"FEEDBACK-MESSAGES":{
+			"SAVE-SUCCESS":"Changes were saved successfully."
 		}
 	},
 	"GRANT-LISTING": {
@@ -723,7 +830,8 @@
 			"VIEW": "View",
 			"CLONE": "Clone",
 			"NEW-VERSION": "New Version",
-			"VIEW-VERSIONS": "All Dataset Template Versions"
+			"VIEW-VERSIONS": "All Dataset Template Versions",
+			"DELETE":"Delete"
 		}
 	},
 	"DATASET-UPLOAD": {
@@ -1154,7 +1262,9 @@
 			"ORGANIZATIONS": "Organizations",
 			"DATASET-IDENTIFIER": "Dataset Identifier",
 			"CURRENCY": "Currency",
-			"VALIDATION": "Validator"
+			"VALIDATION": "Validator",
+			"OTHER": "Other",
+			"SELECT": "Select"
 		},
 		"DATASET-PROFILE-COMBO-BOX-TYPE": {
 			"WORD-LIST": "Word List",
@@ -1592,6 +1702,7 @@
 	"DATASET-PROFILE-STATUS": {
 		"NONE": "None",
 		"DRAFT": "Draft",
-		"FINALIZED": "Finalized"
+		"FINALIZED": "Finalized",
+		"DELETED": "Deleted"
 	}
-}
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/assets/i18n/es.json b/dmp-frontend/src/assets/i18n/es.json
index 755828d08..255762740 100644
--- a/dmp-frontend/src/assets/i18n/es.json
+++ b/dmp-frontend/src/assets/i18n/es.json
@@ -281,10 +281,46 @@
 			"ROLES": "Funciones"
 		},
 		"STEPS": {
+			"GENERAL-INFO": {
+				"TITLE": "General Info",
+				"DATASET-TEMPLATE-NAME": "Dataset template name",
+				"DATASET-TEMPLATE-NAME-HINT": "A title that determines the Dataset template.",
+				"DATASET-TEMPLATE-DESCRIPTION": "Description",
+				"DATASET-TEMPLATE-DESCRIPTION-HINT": "A brief description of what the Dataset is about, it's scope and objectives.",
+				"DATASET-TEMPLATE-LANGUAGE": "Dataset template language",
+				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
+				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
+				"UNTITLED": "Untitled",
+				"QUESTION": "Question",
+				"TEMPLATE-OUTLINE":"Template outline"
+			},
+			"PAGE-INFO": {
+				"PAGE-NAME": "Chapter Name",
+				"PAGE-NAME-HINT": "Set a name for the dataset chapter.",
+				"PAGE-DESCRIPTION": "Description",
+				"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the chapter is about.",
+				"ACTIONS": {
+					"CREATE-FIRST-PAGE": "Create the first chapter",
+					"CREATE-NEW-SUBSECTION": "Section",
+					"CREATE-NEW-SECTION": "Chapter",
+					"CREATE-FIRST-SECTION":"Create the first chapter",
+					"NOTHING-HERE-HINT": "Nothing here yet.",
+					"START-CREATING-PAGE-START": "Start by ",
+					"START-CREATING-PAGE-END": "creating the first chapter."
+				},
+				"PAGE": "Chapter"
+			},
+			"SECTION-INFO": {
+				"SECTION-NAME": "Section Name",
+				"SECTION-NAME-HINT": "Set a name for the section.",
+				"SECTION-DESCRIPTION": "Description",
+				"SECTION-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
+				"SECTION": "Section"
+			},
 			"PAGES": {
-				"TITLE": "Descripición de la página",
-				"PAGE-PREFIX": "Página",
-				"PAGE-INPUT-TITLE": "Título de la página",
+				"TITLE": "Chapter Description",
+				"PAGE-PREFIX": "Chapter",
+				"PAGE-INPUT-TITLE": "Chapter Title",
 				"DATASET-DETAILS": "Detalles de la descripción del dataset",
 				"EXTERNAL-REFERENCES": "Referencias externas",
 				"DESCRIPTION": "Descripción"
@@ -383,7 +419,30 @@
 						"FIELD-DATE-PICKER-LABEL": "Etiqueta",
 						"FIELD-DATE-PICKER-VALUE": "Valor",
 						"FIELD-MULTIPLE-AUTOCOMPLETE": "Autocompeltado múltiple",
-						"FIELD-MULTIPLE-WORDLIST": "Multiple Selection"
+						"FIELD-MULTIPLE-WORDLIST": "Multiple Selection",
+						"FIELD-CURRENCY-TITLE": "Currency Data",
+						"FIELD-CURRENCY-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-REGISTRIES-TITLE": "Registries Data",
+						"FIELD-REGISTRIES-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-SERVICES-TITLE": "Services Data",
+						"FIELD-SERVICES-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-ORGANIZATIONS-TITLE": "Organizations Data",
+						"FIELD-ORGANIZATIONS-PLACEHOLDER": "Input placeholder  Text",
+						"FIELD-EXTERNAL-DATASETS-TITLE": "External Datasets Data",
+						"FIELD-EXTERNAL-DATASETS-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-DATA-REPOSITORIES-TITLE": "Data Repositories Data",
+						"FIELD-DATA-REPOSITORIES-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-TAGS-TITLE": "Tags Data",
+						"FIELD-TAGS-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-DATASET-IDENTIFIER-TITLE": "Dataset Identifier Data",
+						"FIELD-DATASET-IDENTIFIER-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-VALIDATOR-TITLE": "Validator Data",
+						"FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder Text"
+					},
+					"ERROR-MESSAGES":{
+						"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
+						"FIELD-RADIO-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided.",
+						"FIELD-SELECT-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided."
 					},
 					"DEFAULT-VALUES": {
 						"NONE": "Ninguno",
@@ -406,9 +465,38 @@
 						"TARGET": "Target Field Id",
 						"VALUE": "Valor requerido",
 						"RULE-IF": "Si el valor es",
-						"RULE-THEN": "entonces muestra el campo con identificación"
+						"RULE-THEN": "entonces muestra el campo con identificación",
+						"FIELDSETS": "Questions",
+						"FIELDS":"Inputs"
+					},
+					"HINTS":{
+						"ELEMENT-CHILD-OF-TARGET":"This element is parent of selected input.",
+						"ELEMENT-HIDDEN-FROM-ELEMENT":"This element hides the element or a parent element of the input you are trying to apply visibility rule from."
+					}
+				},
+				"FORM-VALIDATION":{
+					"ERROR-MESSAGES":{
+						"PAGE-MUST-HAVE-SECTION": "Each chapter must have at least one section.",
+						"NEEDS-MORE-INFORMATION": " needs more information.",
+						"MUST-HAVE-SECTION-OR-FIELDSET": " must have either section or question.",
+						"MISSING":"Missing",
+						"PROVIDE-PAGE-AND-SECTION":"Make sure you provide a chapter and at least one section per chapter."
+					}
+				},
+				"TABLE-OF-CONTENTS":{
+					"ERROR-MESSAGES":{
+						"FIELDSET-MUST-HAVE-PARENT-SECTION":"Question can only be child of section.",
+						"INPUT-SECTION-SAME-LEVEL": "Cannot have question and section on the same level.",
+						"DRAG-NOT-SUPPORTED":"Drag n drop of section not supported to target container.",
+						"PAGE-ELEMENT-ONLY-TOP-LEVEL": "Chapter elements can only be at top level"
 					}
 				}
+			},
+			"TOOLKIT": {
+				"GENERAL-TOOLS": "Questions tools",
+				"NEW-INPUT-SET": "Add Question",
+				"CLONE": "Clone",
+				"DELETE": "Delete"
 			}
 		},
 		"ACTIONS": {
@@ -419,7 +507,26 @@
 			"DELETE": "Borrar",
 			"ADD-PAGE": "Añadir página +",
 			"ADD-SECTION": "Añadir sección +",
-			"VALIDATE": "Validate"
+			"VALIDATE": "Validate",
+			"PREVIEW-AND-FINALIZE": "Preview and finalize",
+			"FIELD": {
+				"MAKE-IT-REQUIRED": "Make input required",
+				"ADD-VISIBILITY-RULE": "Add visibility rule",
+				"DELETE-INPUT": "Delete this input",
+				"PREVIEW": "Preview",
+				"NOT-INITIALIZED": "Not initialized yet"
+			},
+			"FIELDSET": {
+				"ADD-INPUT": "Add new input",
+				"COMMENT-FIELD": "Comment field",
+				"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.",
+				"ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.",
+				"MULTIPLICITY": "Multiplicity",
+				"MORE": "More.."
+			}
+		},
+		"FEEDBACK-MESSAGES":{
+			"SAVE-SUCCESS":"Changes were saved successfully."
 		}
 	},
 	"GRANT-LISTING": {
@@ -723,7 +830,8 @@
 			"VIEW": "Vista",
 			"CLONE": "Clonar",
 			"NEW-VERSION": "Nueva versión",
-			"VIEW-VERSIONS": "Todas las versiones de las plantillas de descripción del dataset"
+			"VIEW-VERSIONS": "Todas las versiones de las plantillas de descripción del dataset",
+			"DELETE":"Delete"
 		}
 	},
 	"DATASET-UPLOAD": {
@@ -1153,7 +1261,10 @@
 			"RESEARCHERS": "Investigadores",
 			"ORGANIZATIONS": "Organizaciones",
 			"DATASET-IDENTIFIER": "Identificador del dataset",
-			"CURRENCY": "Moneda"
+			"CURRENCY": "Moneda",
+			"VALIDATION": "Validator",
+			"OTHER": "Other",
+			"SELECT": "Select"
 		},
 		"DATASET-PROFILE-COMBO-BOX-TYPE": {
 			"WORD-LIST": "Lista de palabras",
@@ -1170,6 +1281,9 @@
 			"DATASETS": "Descripciones del dataset",
 			"EXTERNAL-SOURCE-HINT": "Lista de valores para seleccionar la(s) fuente(s) externa(s)"
 		},
+		"DATASET-PROFILE-VALIDATOR": {
+			"ACTION": "Validate"
+		},
 		"RECENT-ACTIVITY-ORDER": {
 			"CREATED": "Creado",
 			"LABEL": "Etiqueta",
@@ -1588,6 +1702,7 @@
 	"DATASET-PROFILE-STATUS": {
 		"NONE": "Ninguno",
 		"DRAFT": "Borrador",
-		"FINALIZED": "Finalizado"
+		"FINALIZED": "Finalizado",
+		"DELETED": "Deleted"
 	}
-}
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/assets/i18n/gr.json b/dmp-frontend/src/assets/i18n/gr.json
index 4fda0cc65..e0c16bf11 100644
--- a/dmp-frontend/src/assets/i18n/gr.json
+++ b/dmp-frontend/src/assets/i18n/gr.json
@@ -281,10 +281,46 @@
 			"ROLES": "Ρόλοι"
 		},
 		"STEPS": {
+			"GENERAL-INFO": {
+				"TITLE": "General Info",
+				"DATASET-TEMPLATE-NAME": "Dataset template name",
+				"DATASET-TEMPLATE-NAME-HINT": "A title that determines the Dataset template.",
+				"DATASET-TEMPLATE-DESCRIPTION": "Description",
+				"DATASET-TEMPLATE-DESCRIPTION-HINT": "A brief description of what the Dataset is about, it's scope and objectives.",
+				"DATASET-TEMPLATE-LANGUAGE": "Dataset template language",
+				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
+				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
+				"UNTITLED": "Untitled",
+				"QUESTION": "Question",
+				"TEMPLATE-OUTLINE":"Template outline"
+			},
+			"PAGE-INFO": {
+				"PAGE-NAME": "Chapter Name",
+				"PAGE-NAME-HINT": "Set a name for the dataset chapter.",
+				"PAGE-DESCRIPTION": "Description",
+				"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the chapter is about.",
+				"ACTIONS": {
+					"CREATE-FIRST-PAGE": "Create the first chapter",
+					"CREATE-NEW-SUBSECTION": "Section",
+					"CREATE-NEW-SECTION": "Chapter",
+					"CREATE-FIRST-SECTION":"Create the first chapter",
+					"NOTHING-HERE-HINT": "Nothing here yet.",
+					"START-CREATING-PAGE-START": "Start by ",
+					"START-CREATING-PAGE-END": "creating the first chapter."
+				},
+				"PAGE": "Chapter"
+			},
+			"SECTION-INFO": {
+				"SECTION-NAME": "Section Name",
+				"SECTION-NAME-HINT": "Set a name for the section.",
+				"SECTION-DESCRIPTION": "Description",
+				"SECTION-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
+				"SECTION": "Section"
+			},
 			"PAGES": {
-				"TITLE": "Περιγραφή Σελίδας",
-				"PAGE-PREFIX": "Σελίδα",
-				"PAGE-INPUT-TITLE": "Τίτλος Σελίδας",
+				"TITLE": "Chapter Description",
+				"PAGE-PREFIX": "Chapter",
+				"PAGE-INPUT-TITLE": "Chapter Title",
 				"DATASET-DETAILS": "Λεπτομέρειες Περιγραφής Συνόλου Δεδομένων",
 				"EXTERNAL-REFERENCES": "Εξωτερικές Πηγές",
 				"DESCRIPTION": "Περιγραφή"
@@ -383,7 +419,30 @@
 						"FIELD-DATE-PICKER-LABEL": "Ετικέτα",
 						"FIELD-DATE-PICKER-VALUE": "Τιμή",
 						"FIELD-MULTIPLE-AUTOCOMPLETE": "Πολλαπλή Αυτόματη Συμπλήρωση",
-						"FIELD-MULTIPLE-WORDLIST": "Πολλαπλή Επιλογή"
+						"FIELD-MULTIPLE-WORDLIST": "Πολλαπλή Επιλογή",
+						"FIELD-CURRENCY-TITLE": "Currency Data",
+						"FIELD-CURRENCY-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-REGISTRIES-TITLE": "Registries Data",
+						"FIELD-REGISTRIES-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-SERVICES-TITLE": "Services Data",
+						"FIELD-SERVICES-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-ORGANIZATIONS-TITLE": "Organizations Data",
+						"FIELD-ORGANIZATIONS-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-EXTERNAL-DATASETS-TITLE": "External Datasets Data",
+						"FIELD-EXTERNAL-DATASETS-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-DATA-REPOSITORIES-TITLE": "Data Repositories Data",
+						"FIELD-DATA-REPOSITORIES-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-TAGS-TITLE": "Tags Data",
+						"FIELD-TAGS-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-DATASET-IDENTIFIER-TITLE": "Dataset Identifier Data",
+						"FIELD-DATASET-IDENTIFIER-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-VALIDATOR-TITLE": "Validator Data",
+						"FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder Text"
+					},
+					"ERROR-MESSAGES":{
+						"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
+						"FIELD-RADIO-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided.",
+						"FIELD-SELECT-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided."
 					},
 					"DEFAULT-VALUES": {
 						"NONE": "Κανένα",
@@ -406,9 +465,38 @@
 						"TARGET": "Ταυτοποίηση στοχοθετημένου πεδίου",
 						"VALUE": "Απαιτούμενη τιμή",
 						"RULE-IF": "Εάν η τιμή είναι",
-						"RULE-THEN": "τότε δείξε το Πεδίο με ταυτοποίηση"
+						"RULE-THEN": "τότε δείξε το Πεδίο με ταυτοποίηση",
+						"FIELDSETS": "Questions",
+						"FIELDS":"Inputs"
+					},
+					"HINTS":{
+						"ELEMENT-CHILD-OF-TARGET":"This element is parent of selected input.",
+						"ELEMENT-HIDDEN-FROM-ELEMENT":"This element hides the element or a parent element of the input you are trying to apply visibility rule from."
+					}
+				},
+				"FORM-VALIDATION":{
+					"ERROR-MESSAGES":{
+						"PAGE-MUST-HAVE-SECTION": "Each chapter must have at least one section.",
+						"NEEDS-MORE-INFORMATION": " needs more information.",
+						"MUST-HAVE-SECTION-OR-FIELDSET": " must have either section or question.",
+						"MISSING":"Missing",
+						"PROVIDE-PAGE-AND-SECTION":"Make sure you provide a chapter and at least one section per chapter."
+					}
+				},
+				"TABLE-OF-CONTENTS":{
+					"ERROR-MESSAGES":{
+						"FIELDSET-MUST-HAVE-PARENT-SECTION":"Question can only be child of section.",
+						"INPUT-SECTION-SAME-LEVEL": "Cannot have question and section on the same level.",
+						"DRAG-NOT-SUPPORTED":"Drag n drop of section not supported to target container.",
+						"PAGE-ELEMENT-ONLY-TOP-LEVEL": "Chapter elements can only be at top level"
 					}
 				}
+			},
+			"TOOLKIT": {
+				"GENERAL-TOOLS": "Questions tools",
+				"NEW-INPUT-SET": "Add Question",
+				"CLONE": "Clone",
+				"DELETE": "Delete"
 			}
 		},
 		"ACTIONS": {
@@ -419,7 +507,26 @@
 			"DELETE": "Διαγραφή",
 			"ADD-PAGE": "Προσθήκη Σελίδας +",
 			"ADD-SECTION": "Προσθήκη Ενότητας +",
-			"VALIDATE": "Επιβεβαίωση"
+			"VALIDATE": "Επιβεβαίωση",
+			"PREVIEW-AND-FINALIZE": "Preview and finalize",
+			"FIELD": {
+				"MAKE-IT-REQUIRED": "Make input required",
+				"ADD-VISIBILITY-RULE": "Add visibility rule",
+				"DELETE-INPUT": "Delete this input",
+				"PREVIEW": "Preview",
+				"NOT-INITIALIZED": "Not initialized yet"
+			},
+			"FIELDSET": {
+				"ADD-INPUT": "Add new input",
+				"COMMENT-FIELD": "Comment field",
+				"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.",
+				"ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.",
+				"MULTIPLICITY": "Multiplicity",
+				"MORE": "More.."
+			}
+		},
+		"FEEDBACK-MESSAGES":{
+			"SAVE-SUCCESS":"Changes were saved successfully."
 		}
 	},
 	"GRANT-LISTING": {
@@ -723,7 +830,8 @@
 			"VIEW": "Προβολή",
 			"CLONE": "Κλώνος",
 			"NEW-VERSION": "Νέα Έκδοση",
-			"VIEW-VERSIONS": "Όλες οι εκδόσεις των Templates Περιγραφής Συνόλου Δεδομένων"
+			"VIEW-VERSIONS": "Όλες οι εκδόσεις των Templates Περιγραφής Συνόλου Δεδομένων",
+			"DELETE":"Delete"
 		}
 	},
 	"DATASET-UPLOAD": {
@@ -1153,7 +1261,10 @@
 			"RESEARCHERS": "Ερευνητές",
 			"ORGANIZATIONS": "Οργανισμοί",
 			"DATASET-IDENTIFIER": "Αναγνωριστικό Συνόλου Δεδομένων",
-			"CURRENCY": "Επικαιρότητα"
+			"CURRENCY": "Επικαιρότητα",
+			"VALIDATION": "Validator",
+			"OTHER": "Other",
+			"SELECT": "Select"
 		},
 		"DATASET-PROFILE-COMBO-BOX-TYPE": {
 			"WORD-LIST": "Λίστα Λέξεων",
@@ -1170,6 +1281,9 @@
 			"DATASETS": "Περιγραφές Συνόλων Δεδομένων",
 			"EXTERNAL-SOURCE-HINT": "Κατάλογος τιμών που παρέχονται από εξωτερικές πηγές"
 		},
+		"DATASET-PROFILE-VALIDATOR": {
+			"ACTION": "Validate"
+		},
 		"RECENT-ACTIVITY-ORDER": {
 			"CREATED": "Δημιουργημένο",
 			"LABEL": "Ετικέτα",
@@ -1588,6 +1702,7 @@
 	"DATASET-PROFILE-STATUS": {
 		"NONE": "Όλα",
 		"DRAFT": "Πρόχειρα",
-		"FINALIZED": "Οριστικοποιημένα"
+		"FINALIZED": "Οριστικοποιημένα",
+		"DELETED": "Deleted"
 	}
-}
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/assets/i18n/pt.json b/dmp-frontend/src/assets/i18n/pt.json
index 0f32aa705..19e9f9f38 100644
--- a/dmp-frontend/src/assets/i18n/pt.json
+++ b/dmp-frontend/src/assets/i18n/pt.json
@@ -281,10 +281,46 @@
 			"ROLES": "Funções"
 		},
 		"STEPS": {
+			"GENERAL-INFO": {
+				"TITLE": "General Info",
+				"DATASET-TEMPLATE-NAME": "Dataset template name",
+				"DATASET-TEMPLATE-NAME-HINT": "A title that determines the Dataset template.",
+				"DATASET-TEMPLATE-DESCRIPTION": "Description",
+				"DATASET-TEMPLATE-DESCRIPTION-HINT": "A brief description of what the Dataset is about, it's scope and objectives.",
+				"DATASET-TEMPLATE-LANGUAGE": "Dataset template language",
+				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
+				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
+				"UNTITLED": "Untitled",
+				"QUESTION": "Question",
+				"TEMPLATE-OUTLINE":"Template outline"
+			},
+			"PAGE-INFO": {
+				"PAGE-NAME": "Chapter Name",
+				"PAGE-NAME-HINT": "Set a name for the dataset chapter.",
+				"PAGE-DESCRIPTION": "Description",
+				"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the chapter is about.",
+				"ACTIONS": {
+					"CREATE-FIRST-PAGE": "Create the first chapter",
+					"CREATE-NEW-SUBSECTION": "Section",
+					"CREATE-NEW-SECTION": "Chapter",
+					"CREATE-FIRST-SECTION":"Create the first chapter",
+					"NOTHING-HERE-HINT": "Nothing here yet.",
+					"START-CREATING-PAGE-START": "Start by ",
+					"START-CREATING-PAGE-END": "creating the first chapter."
+				},
+				"PAGE": "Chapter"
+			},
+			"SECTION-INFO": {
+				"SECTION-NAME": "Section Name",
+				"SECTION-NAME-HINT": "Set a name for the section.",
+				"SECTION-DESCRIPTION": "Description",
+				"SECTION-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
+				"SECTION": "Section"
+			},
 			"PAGES": {
-				"TITLE": "Descrição da Página",
-				"PAGE-PREFIX": "Página",
-				"PAGE-INPUT-TITLE": "Título da Página",
+				"TITLE": "Chapter Description",
+				"PAGE-PREFIX": "Chapter",
+				"PAGE-INPUT-TITLE": "Chapter Title",
 				"DATASET-DETAILS": "Detalhes do Dataset",
 				"EXTERNAL-REFERENCES": "Referências Externas",
 				"DESCRIPTION": "Descrição"
@@ -383,7 +419,30 @@
 						"FIELD-DATE-PICKER-LABEL": "Etiqueta",
 						"FIELD-DATE-PICKER-VALUE": "Valor",
 						"FIELD-MULTIPLE-AUTOCOMPLETE": "Autopreenchimento Múltiplo",
-						"FIELD-MULTIPLE-WORDLIST": "Seleção Múltipla"
+						"FIELD-MULTIPLE-WORDLIST": "Seleção Múltipla",
+						"FIELD-CURRENCY-TITLE": "Currency Data",
+						"FIELD-CURRENCY-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-REGISTRIES-TITLE": "Registries Data",
+						"FIELD-REGISTRIES-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-SERVICES-TITLE": "Services Data",
+						"FIELD-SERVICES-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-ORGANIZATIONS-TITLE": "Organizations Data",
+						"FIELD-ORGANIZATIONS-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-EXTERNAL-DATASETS-TITLE": "External Datasets Data",
+						"FIELD-EXTERNAL-DATASETS-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-DATA-REPOSITORIES-TITLE": "Data Repositories Data",
+						"FIELD-DATA-REPOSITORIES-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-TAGS-TITLE": "Tags Data",
+						"FIELD-TAGS-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-DATASET-IDENTIFIER-TITLE": "Dataset Identifier Data",
+						"FIELD-DATASET-IDENTIFIER-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-VALIDATOR-TITLE": "Validator Data",
+						"FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder Text"
+					},
+					"ERROR-MESSAGES":{
+						"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
+						"FIELD-RADIO-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided.",
+						"FIELD-SELECT-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided."
 					},
 					"DEFAULT-VALUES": {
 						"NONE": "Nenhum",
@@ -406,9 +465,38 @@
 						"TARGET": "Id do Campo de Destino",
 						"VALUE": "Valor Obrigatório",
 						"RULE-IF": "Se Valor é",
-						"RULE-THEN": "então mostrar Campo com o Id"
+						"RULE-THEN": "então mostrar Campo com o Id",
+						"FIELDSETS": "Questions",
+						"FIELDS":"Inputs"
+					},
+					"HINTS":{
+						"ELEMENT-CHILD-OF-TARGET":"This element is parent of selected input.",
+						"ELEMENT-HIDDEN-FROM-ELEMENT":"This element hides the element or a parent element of the input you are trying to apply visibility rule from."
+					}
+				},
+				"FORM-VALIDATION":{
+					"ERROR-MESSAGES":{
+						"PAGE-MUST-HAVE-SECTION": "Each chapter must have at least one section.",
+						"NEEDS-MORE-INFORMATION": " needs more information.",
+						"MUST-HAVE-SECTION-OR-FIELDSET": " must have either section or question.",
+						"MISSING":"Missing",
+						"PROVIDE-PAGE-AND-SECTION":"Make sure you provide a chapter and at least one section per chapter."
+					}
+				},
+				"TABLE-OF-CONTENTS":{
+					"ERROR-MESSAGES":{
+						"FIELDSET-MUST-HAVE-PARENT-SECTION":"Question can only be child of section.",
+						"INPUT-SECTION-SAME-LEVEL": "Cannot have question and section on the same level.",
+						"DRAG-NOT-SUPPORTED":"Drag n drop of section not supported to target container.",
+						"PAGE-ELEMENT-ONLY-TOP-LEVEL": "Chapter elements can only be at top level"
 					}
 				}
+			},
+			"TOOLKIT": {
+				"GENERAL-TOOLS": "Questions tools",
+				"NEW-INPUT-SET": "Add Question",
+				"CLONE": "Clone",
+				"DELETE": "Delete"
 			}
 		},
 		"ACTIONS": {
@@ -419,7 +507,26 @@
 			"DELETE": "Eliminar",
 			"ADD-PAGE": "Adicionar Página +",
 			"ADD-SECTION": "Adicionar Secção +",
-			"VALIDATE": "Validar"
+			"VALIDATE": "Validar",
+			"PREVIEW-AND-FINALIZE": "Preview and finalize",
+			"FIELD": {
+				"MAKE-IT-REQUIRED": "Make input required",
+				"ADD-VISIBILITY-RULE": "Add visibility rule",
+				"DELETE-INPUT": "Delete this input",
+				"PREVIEW": "Preview",
+				"NOT-INITIALIZED": "Not initialized yet"
+			},
+			"FIELDSET": {
+				"ADD-INPUT": "Add new input",
+				"COMMENT-FIELD": "Comment field",
+				"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.",
+				"ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.",
+				"MULTIPLICITY": "Multiplicity",
+				"MORE": "More.."
+			}
+		},
+		"FEEDBACK-MESSAGES":{
+			"SAVE-SUCCESS":"Changes were saved successfully."
 		}
 	},
 	"GRANT-LISTING": {
@@ -723,7 +830,8 @@
 			"VIEW": "Ver",
 			"CLONE": "Duplicar",
 			"NEW-VERSION": "Nova Versão",
-			"VIEW-VERSIONS": "Todas as Versões de Modelos dos Datasets"
+			"VIEW-VERSIONS": "Todas as Versões de Modelos dos Datasets",
+			"DELETE":"Delete"
 		}
 	},
 	"DATASET-UPLOAD": {
@@ -1154,7 +1262,9 @@
 			"ORGANIZATIONS": "Organizações",
 			"DATASET-IDENTIFIER": "Identificador de Dataset",
 			"CURRENCY": "Moeda",
-			"VALIDATION": "Validator"
+			"VALIDATION": "Validator",
+			"OTHER": "Other",
+			"SELECT": "Select"
 		},
 		"DATASET-PROFILE-COMBO-BOX-TYPE": {
 			"WORD-LIST": "Lista de Palavras",
@@ -1592,6 +1702,7 @@
 	"DATASET-PROFILE-STATUS": {
 		"NONE": "Nenhum",
 		"DRAFT": "Rascunho",
-		"FINALIZED": "Concluído"
+		"FINALIZED": "Concluído",
+		"DELETED": "Deleted"
 	}
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/assets/i18n/sk.json b/dmp-frontend/src/assets/i18n/sk.json
index b3827089d..708d96c52 100644
--- a/dmp-frontend/src/assets/i18n/sk.json
+++ b/dmp-frontend/src/assets/i18n/sk.json
@@ -281,10 +281,46 @@
 			"ROLES": "Role"
 		},
 		"STEPS": {
+			"GENERAL-INFO": {
+				"TITLE": "General Info",
+				"DATASET-TEMPLATE-NAME": "Dataset template name",
+				"DATASET-TEMPLATE-NAME-HINT": "A title that determines the Dataset template.",
+				"DATASET-TEMPLATE-DESCRIPTION": "Description",
+				"DATASET-TEMPLATE-DESCRIPTION-HINT": "A brief description of what the Dataset is about, it's scope and objectives.",
+				"DATASET-TEMPLATE-LANGUAGE": "Dataset template language",
+				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
+				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
+				"UNTITLED": "Untitled",
+				"QUESTION": "Question",
+				"TEMPLATE-OUTLINE":"Template outline"
+			},
+			"PAGE-INFO": {
+				"PAGE-NAME": "Chapter Name",
+				"PAGE-NAME-HINT": "Set a name for the dataset chapter.",
+				"PAGE-DESCRIPTION": "Description",
+				"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the chapter is about.",
+				"ACTIONS": {
+					"CREATE-FIRST-PAGE": "Create the first chapter",
+					"CREATE-NEW-SUBSECTION": "Section",
+					"CREATE-NEW-SECTION": "Chapter",
+					"CREATE-FIRST-SECTION":"Create the first chapter",
+					"NOTHING-HERE-HINT": "Nothing here yet.",
+					"START-CREATING-PAGE-START": "Start by ",
+					"START-CREATING-PAGE-END": "creating the first chapter."
+				},
+				"PAGE": "Chapter"
+			},
+			"SECTION-INFO": {
+				"SECTION-NAME": "Section Name",
+				"SECTION-NAME-HINT": "Set a name for the section.",
+				"SECTION-DESCRIPTION": "Description",
+				"SECTION-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
+				"SECTION": "Section"
+			},
 			"PAGES": {
-				"TITLE": "Opis stránky",
-				"PAGE-PREFIX": "Stránka",
-				"PAGE-INPUT-TITLE": "Názov stránky",
+				"TITLE": "Chapter Description",
+				"PAGE-PREFIX": "Chapter",
+				"PAGE-INPUT-TITLE": "Chapter Title",
 				"DATASET-DETAILS": "Podrobné informácie o súbore dát",
 				"EXTERNAL-REFERENCES": "Externé odkazy",
 				"DESCRIPTION": "Opis"
@@ -345,29 +381,29 @@
 						"VALIDATION": "Validation",
 						"MULTIPLICITY-CHECKBOX": "Multiplicity",
 						"FIELD-TEXT-AREA-TITLE": "Text Area Data",
-						"FIELD-TEXT-AREA-PLACEHOLDER": "Input Placeholder",
+						"FIELD-TEXT-AREA-PLACEHOLDER": "Input Placeholder Text",
 						"FIELD-BOOLEAN-DECISION-TITLE": "Boolean Decision Data",
-						"FIELD-BOOLEAN-DECISION-PLACEHOLDER": "Input Placeholder",
+						"FIELD-BOOLEAN-DECISION-PLACEHOLDER": "Input Placeholder Text",
 						"FIELD-CHECKBOX-TITLE": "Checkbox Data",
-						"FIELD-CHECKBOX-PLACEHOLDER": "Input Placeholder",
+						"FIELD-CHECKBOX-PLACEHOLDER": "Input Placeholder Text",
 						"FIELD-FREE-TEXT-TITLE": "Free Text Data",
-						"FIELD-FREE-TEXT-PLACEHOLDER": "Input Placeholder",
+						"FIELD-FREE-TEXT-PLACEHOLDER": "Input Placeholder Text",
 						"FIELD-COMBO-BOX-TYPE": "Type of Combo Box",
 						"FIELD-WORD-LIST-TITLE": "Word List Data",
-						"FIELD-WORD-LIST-PLACEHOLDER": "Input Placeholder",
+						"FIELD-WORD-LIST-PLACEHOLDER": "Input Placeholder Text",
 						"FIELD-WORD-LIST-LABEL": "Label",
 						"FIELD-WORD-LIST-VALUE": "Value",
 						"FIELD-INTERNAL-DMP-ENTITIES-TYPE": "Type of Internal DMP Entity",
 						"FIELD-RESEARCHERS-TITLE": "Researchers Autocomplete",
-						"FIELD-RESEARCHERS-PLACEHOLDER": "Input Placeholder",
-						"FIELD-DATASETS-PLACEHOLDER": "Input Placeholder",
-						"FIELD-DMPS-PLACEHOLDER": "Input Placeholder",
+						"FIELD-RESEARCHERS-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-DATASETS-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-DMPS-PLACEHOLDER": "Input Placeholder Text",
 						"FIELD-RADIO-BOX-TITLE": "Radio Box Data",
-						"FIELD-RADIO-BOX-PLACEHOLDER": "Input Placeholder",
+						"FIELD-RADIO-BOX-PLACEHOLDER": "Input Placeholder Text",
 						"FIELD-RADIO-BOX-LABEL": "Label",
 						"FIELD-RADIO-BOX-VALUE": "Value",
 						"FIELD-AUTOCOMPLETE-TITLE": "Autocomplete Data",
-						"FIELD-AUTOCOMPLETE-PLACEHOLDER": "Input Placeholder",
+						"FIELD-AUTOCOMPLETE-PLACEHOLDER": "Input Placeholder Text",
 						"FIELD-AUTOCOMPLETE-SOURCE-TITLE": "Sources",
 						"FIELD-AUTOCOMPLETE-ADD_SOURCE": "Add Source",
 						"FIELD-AUTOCOMPLETE-TYPE": "Source Type",
@@ -379,11 +415,34 @@
 						"FIELD-AUTOCOMPLETE-URL": "Url",
 						"FIELD-AUTOCOMPLETE-OPTIONS-ROOT": "Options Root",
 						"FIELD-DATE-PICKER-TITLE": "Date Picker",
-						"FIELD-DATE-PICKER-PLACEHOLDER": "Input Placeholder",
+						"FIELD-DATE-PICKER-PLACEHOLDER": "Input Placeholder Text",
 						"FIELD-DATE-PICKER-LABEL": "Label",
 						"FIELD-DATE-PICKER-VALUE": "Value",
 						"FIELD-MULTIPLE-AUTOCOMPLETE": "Multiple Autocomplete",
-						"FIELD-MULTIPLE-WORDLIST": "Multiple Selection"
+						"FIELD-MULTIPLE-WORDLIST": "Multiple Selection",
+						"FIELD-CURRENCY-TITLE": "Currency Data",
+						"FIELD-CURRENCY-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-REGISTRIES-TITLE": "Registries Data",
+						"FIELD-REGISTRIES-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-SERVICES-TITLE": "Services Data",
+						"FIELD-SERVICES-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-ORGANIZATIONS-TITLE": "Organizations Data",
+						"FIELD-ORGANIZATIONS-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-EXTERNAL-DATASETS-TITLE": "External Datasets Data",
+						"FIELD-EXTERNAL-DATASETS-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-DATA-REPOSITORIES-TITLE": "Data Repositories Data",
+						"FIELD-DATA-REPOSITORIES-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-TAGS-TITLE": "Tags Data",
+						"FIELD-TAGS-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-DATASET-IDENTIFIER-TITLE": "Dataset Identifier Data",
+						"FIELD-DATASET-IDENTIFIER-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-VALIDATOR-TITLE": "Validator Data",
+						"FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder Text"
+					},
+					"ERROR-MESSAGES":{
+						"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
+						"FIELD-RADIO-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided.",
+						"FIELD-SELECT-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided."
 					},
 					"DEFAULT-VALUES": {
 						"NONE": "Žiadny",
@@ -406,9 +465,38 @@
 						"TARGET": "Target Field Id",
 						"VALUE": "Required Value",
 						"RULE-IF": "If Value is",
-						"RULE-THEN": "then show Field With Id"
+						"RULE-THEN": "then show Field With Id",
+						"FIELDSETS": "Questions",
+						"FIELDS":"Inputs"
+					},
+					"HINTS":{
+						"ELEMENT-CHILD-OF-TARGET":"This element is parent of selected input.",
+						"ELEMENT-HIDDEN-FROM-ELEMENT":"This element hides the element or a parent element of the input you are trying to apply visibility rule from."
+					}
+				},
+				"FORM-VALIDATION":{
+					"ERROR-MESSAGES":{
+						"PAGE-MUST-HAVE-SECTION": "Each chapter must have at least one section.",
+						"NEEDS-MORE-INFORMATION": " needs more information.",
+						"MUST-HAVE-SECTION-OR-FIELDSET": " must have either section or question.",
+						"MISSING":"Missing",
+						"PROVIDE-PAGE-AND-SECTION":"Make sure you provide a chapter and at least one section per chapter."
+					}
+				},
+				"TABLE-OF-CONTENTS":{
+					"ERROR-MESSAGES":{
+						"FIELDSET-MUST-HAVE-PARENT-SECTION":"Question can only be child of section.",
+						"INPUT-SECTION-SAME-LEVEL": "Cannot have question and section on the same level.",
+						"DRAG-NOT-SUPPORTED":"Drag n drop of section not supported to target container.",
+						"PAGE-ELEMENT-ONLY-TOP-LEVEL": "Chapter elements can only be at top level"
 					}
 				}
+			},
+			"TOOLKIT": {
+				"GENERAL-TOOLS": "Questions tools",
+				"NEW-INPUT-SET": "Add Question",
+				"CLONE": "Clone",
+				"DELETE": "Delete"
 			}
 		},
 		"ACTIONS": {
@@ -419,7 +507,26 @@
 			"DELETE": "Vymazať",
 			"ADD-PAGE": "Pridať stránku +",
 			"ADD-SECTION": "Pridať sekciu +",
-			"VALIDATE": "Potvrdiť"
+			"VALIDATE": "Potvrdiť",
+			"PREVIEW-AND-FINALIZE": "Preview and finalize",
+			"FIELD": {
+				"MAKE-IT-REQUIRED": "Make input required",
+				"ADD-VISIBILITY-RULE": "Add visibility rule",
+				"DELETE-INPUT": "Delete this input",
+				"PREVIEW": "Preview",
+				"NOT-INITIALIZED": "Not initialized yet"
+			},
+			"FIELDSET": {
+				"ADD-INPUT": "Add new input",
+				"COMMENT-FIELD": "Comment field",
+				"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.",
+				"ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.",
+				"MULTIPLICITY": "Multiplicity",
+				"MORE": "More.."
+			}
+		},
+		"FEEDBACK-MESSAGES":{
+			"SAVE-SUCCESS":"Changes were saved successfully."
 		}
 	},
 	"GRANT-LISTING": {
@@ -723,7 +830,8 @@
 			"VIEW": "Pozrieť",
 			"CLONE": "Klonovať",
 			"NEW-VERSION": "Nová verzia",
-			"VIEW-VERSIONS": "Všetky verzie šablóny súboru dát"
+			"VIEW-VERSIONS": "Všetky verzie šablóny súboru dát",
+			"DELETE":"Delete"
 		}
 	},
 	"DATASET-UPLOAD": {
@@ -1153,7 +1261,10 @@
 			"RESEARCHERS": "Výskumníci (Researchers)",
 			"ORGANIZATIONS": "Organizácie (Organizations)",
 			"DATASET-IDENTIFIER": "Identifikátor súborov dát (Dataset Identifier)",
-			"CURRENCY": "Mena (Currency)"
+			"CURRENCY": "Mena (Currency)",
+			"VALIDATION": "Validator",
+			"OTHER": "Other",
+			"SELECT": "Select"
 		},
 		"DATASET-PROFILE-COMBO-BOX-TYPE": {
 			"WORD-LIST": "Zoznam slov",
@@ -1170,6 +1281,9 @@
 			"DATASETS": "Súbory dát",
 			"EXTERNAL-SOURCE-HINT": "Zoznam hodnôt dodaných z externých zdrojov."
 		},
+		"DATASET-PROFILE-VALIDATOR": {
+			"ACTION": "Validate"
+		},
 		"RECENT-ACTIVITY-ORDER": {
 			"CREATED": "Vytvorené",
 			"LABEL": "Označenie",
@@ -1588,6 +1702,7 @@
 	"DATASET-PROFILE-STATUS": {
 		"NONE": "ˇŽiadny",
 		"DRAFT": "Návrh",
-		"FINALIZED": "Dokončené"
+		"FINALIZED": "Dokončené",
+		"DELETED": "Deleted"
 	}
-}
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/assets/i18n/sr.json b/dmp-frontend/src/assets/i18n/sr.json
index 7b6432175..20a246eeb 100644
--- a/dmp-frontend/src/assets/i18n/sr.json
+++ b/dmp-frontend/src/assets/i18n/sr.json
@@ -17,6 +17,7 @@
 			"SUCCESSFUL-LOGIN": "Uspešno ste se prijavili",
 			"SUCCESSFUL-LOGOUT": "Uspešno ste se odjavili",
 			"SUCCESSFUL-EMAIL-SEND": "Email uspešno poslat",
+			"SUCCESSFUL-COPY-TO-CLIPBOARD": "Copied to Clipboard",
 			"UNSUCCESSFUL-LOGOUT": "Neuspešno odjavljivanje",
 			"UNSUCCESSFUL-LOGIN": "Neuspešno prijavljivanje",
 			"SUCCESSFUL-DATASET-PROFILE-DELETE": "Uspešno brisanje",
@@ -84,7 +85,8 @@
 			"PRODUCED": "izrađen",
 			"RDA-SPECIFICATIONS": "prema RDA specifikacijama",
 			"MACHINE-ACTIONABLE": "za mašinski čitljive Planove",
-			"UPLOAD-FILE": "Uvezite datoteku"
+			"UPLOAD-FILE": "Uvezite datoteku",
+			"REPLACE-FILE": "Replace File"
 		},
 		"INVITATION-DIALOG": {
 			"HINT": "Za razdvajanje autora koristite tastere zapeta \",\" ili \"Enter\"",
@@ -279,10 +281,46 @@
 			"ROLES": "Uloge"
 		},
 		"STEPS": {
+			"GENERAL-INFO": {
+				"TITLE": "General Info",
+				"DATASET-TEMPLATE-NAME": "Dataset template name",
+				"DATASET-TEMPLATE-NAME-HINT": "A title that determines the Dataset template.",
+				"DATASET-TEMPLATE-DESCRIPTION": "Description",
+				"DATASET-TEMPLATE-DESCRIPTION-HINT": "A brief description of what the Dataset is about, it's scope and objectives.",
+				"DATASET-TEMPLATE-LANGUAGE": "Dataset template language",
+				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
+				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
+				"UNTITLED": "Untitled",
+				"QUESTION": "Question",
+				"TEMPLATE-OUTLINE":"Template outline"
+			},
+			"PAGE-INFO": {
+				"PAGE-NAME": "Chapter Name",
+				"PAGE-NAME-HINT": "Set a name for the dataset chapter.",
+				"PAGE-DESCRIPTION": "Description",
+				"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the chapter is about.",
+				"ACTIONS": {
+					"CREATE-FIRST-PAGE": "Create the first chapter",
+					"CREATE-NEW-SUBSECTION": "Section",
+					"CREATE-NEW-SECTION": "Chapter",
+					"CREATE-FIRST-SECTION":"Create the first chapter",
+					"NOTHING-HERE-HINT": "Nothing here yet.",
+					"START-CREATING-PAGE-START": "Start by ",
+					"START-CREATING-PAGE-END": "creating the first chapter."
+				},
+				"PAGE": "Chapter"
+			},
+			"SECTION-INFO": {
+				"SECTION-NAME": "Section Name",
+				"SECTION-NAME-HINT": "Set a name for the section.",
+				"SECTION-DESCRIPTION": "Description",
+				"SECTION-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
+				"SECTION": "Section"
+			},
 			"PAGES": {
-				"TITLE": "Opis stranice",
-				"PAGE-PREFIX": "Stranica",
-				"PAGE-INPUT-TITLE": "Naslov stranice",
+				"TITLE": "Chapter Description",
+				"PAGE-PREFIX": "Chapter",
+				"PAGE-INPUT-TITLE": "Chapter Title",
 				"DATASET-DETAILS": "Detalji skupa podataka",
 				"EXTERNAL-REFERENCES": "Spoljne reference",
 				"DESCRIPTION": "Opis"
@@ -381,7 +419,30 @@
 						"FIELD-DATE-PICKER-LABEL": "Oznaka",
 						"FIELD-DATE-PICKER-VALUE": "Vrednost",
 						"FIELD-MULTIPLE-AUTOCOMPLETE": "Višestruki automatski unos",
-						"FIELD-MULTIPLE-WORDLIST": "Višestruki odabir"
+						"FIELD-MULTIPLE-WORDLIST": "Višestruki odabir",
+						"FIELD-CURRENCY-TITLE": "Currency Data",
+						"FIELD-CURRENCY-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-REGISTRIES-TITLE": "Registries Data",
+						"FIELD-REGISTRIES-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-SERVICES-TITLE": "Services Data",
+						"FIELD-SERVICES-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-ORGANIZATIONS-TITLE": "Organizations Data",
+						"FIELD-ORGANIZATIONS-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-EXTERNAL-DATASETS-TITLE": "External Datasets Data",
+						"FIELD-EXTERNAL-DATASETS-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-DATA-REPOSITORIES-TITLE": "Data Repositories Data",
+						"FIELD-DATA-REPOSITORIES-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-TAGS-TITLE": "Tags Data",
+						"FIELD-TAGS-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-DATASET-IDENTIFIER-TITLE": "Dataset Identifier Data",
+						"FIELD-DATASET-IDENTIFIER-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-VALIDATOR-TITLE": "Validator Data",
+						"FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder Text"
+					},
+					"ERROR-MESSAGES":{
+						"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
+						"FIELD-RADIO-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided.",
+						"FIELD-SELECT-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided."
 					},
 					"DEFAULT-VALUES": {
 						"NONE": "Nijedan",
@@ -404,9 +465,38 @@
 						"TARGET": "Id ciljnog polja",
 						"VALUE": "Obavezna vrednost",
 						"RULE-IF": "Ako je vrednost",
-						"RULE-THEN": "tada prikazati polje sa Id"
+						"RULE-THEN": "tada prikazati polje sa Id",
+						"FIELDSETS": "Questions",
+						"FIELDS":"Inputs"
+					},
+					"HINTS":{
+						"ELEMENT-CHILD-OF-TARGET":"This element is parent of selected input.",
+						"ELEMENT-HIDDEN-FROM-ELEMENT":"This element hides the element or a parent element of the input you are trying to apply visibility rule from."
+					}
+				},
+				"FORM-VALIDATION":{
+					"ERROR-MESSAGES":{
+						"PAGE-MUST-HAVE-SECTION": "Each chapter must have at least one section.",
+						"NEEDS-MORE-INFORMATION": " needs more information.",
+						"MUST-HAVE-SECTION-OR-FIELDSET": " must have either section or question.",
+						"MISSING":"Missing",
+						"PROVIDE-PAGE-AND-SECTION":"Make sure you provide a chapter and at least one section per chapter."
+					}
+				},
+				"TABLE-OF-CONTENTS":{
+					"ERROR-MESSAGES":{
+						"FIELDSET-MUST-HAVE-PARENT-SECTION":"Question can only be child of section.",
+						"INPUT-SECTION-SAME-LEVEL": "Cannot have question and section on the same level.",
+						"DRAG-NOT-SUPPORTED":"Drag n drop of section not supported to target container.",
+						"PAGE-ELEMENT-ONLY-TOP-LEVEL": "Chapter elements can only be at top level"
 					}
 				}
+			},
+			"TOOLKIT": {
+				"GENERAL-TOOLS": "Questions tools",
+				"NEW-INPUT-SET": "Add Question",
+				"CLONE": "Clone",
+				"DELETE": "Delete"
 			}
 		},
 		"ACTIONS": {
@@ -417,7 +507,26 @@
 			"DELETE": "Obrišite",
 			"ADD-PAGE": "Dodajte stranu +",
 			"ADD-SECTION": "Dodajte sekciju +",
-			"VALIDATE": "Potvrdite"
+			"VALIDATE": "Potvrdite",
+			"PREVIEW-AND-FINALIZE": "Preview and finalize",
+			"FIELD": {
+				"MAKE-IT-REQUIRED": "Make input required",
+				"ADD-VISIBILITY-RULE": "Add visibility rule",
+				"DELETE-INPUT": "Delete this input",
+				"PREVIEW": "Preview",
+				"NOT-INITIALIZED": "Not initialized yet"
+			},
+			"FIELDSET": {
+				"ADD-INPUT": "Add new input",
+				"COMMENT-FIELD": "Comment field",
+				"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.",
+				"ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.",
+				"MULTIPLICITY": "Multiplicity",
+				"MORE": "More.."
+			}
+		},
+		"FEEDBACK-MESSAGES":{
+			"SAVE-SUCCESS":"Changes were saved successfully."
 		}
 	},
 	"GRANT-LISTING": {
@@ -472,6 +581,7 @@
 			"START-NEW-VERSION": "Započnite novu verziju",
 			"VIEW-VERSION": "Sve verzije Plana",
 			"CLONE": "Napravite kopiju",
+			"COPY": "Copy",
 			"DELETE": "Obrišite",
 			"DEPOSIT": "Deponujte",
 			"EXPORT": "Izvezite",
@@ -658,7 +768,8 @@
 			"NEW": "Novi skup podataka",
 			"CREATE-NEW": "Kreirajte novi skup podataka",
 			"EXPORT": "Izvezite",
-			"INVITE-COLLABORATORS": "Pozovite saradnike"
+			"INVITE-COLLABORATORS": "Pozovite saradnike",
+			"INVITE-SHORT": "Invite"
 		},
 		"STATES": {
 			"EDITED": "Izmenjeno",
@@ -719,7 +830,8 @@
 			"VIEW": "Pregled",
 			"CLONE": "Napravite kopiju",
 			"NEW-VERSION": "Nova verzija",
-			"VIEW-VERSIONS": "Sve verzije obrazaca za skupove podataka"
+			"VIEW-VERSIONS": "Sve verzije obrazaca za skupove podataka",
+			"DELETE":"Delete"
 		}
 	},
 	"DATASET-UPLOAD": {
@@ -991,7 +1103,8 @@
 		},
 		"USERS": {
 			"LABEL": "Pretražite",
-			"ROLE": "Uloga"
+			"ROLE": "Uloga",
+			"SHOW": "Show"
 		},
 		"SELECT": "Odaberite opciju",
 		"LIKE": "Pretražite"
@@ -1000,7 +1113,8 @@
 		"TITLE": {
 			"NEW": "Novi plan upravljanja podacima",
 			"EDIT": "Uredite",
-			"INTRO": "Plan upravljanja podacima (eng. Data Management Plan, skraćeno DMP) se sastoji od Vaših planova za upravljanje podacima i sadrži informacije kako su nastali, kako su analizirani i na koji način su sačuvani podaci. Argos je otvoren kolaboracioni alat sa mogućnošću nadogradnje koji podržava otvorene i FAIR principe za upravljanje podacima."
+			"INTRO": "Plan upravljanja podacima (eng. Data Management Plan, skraćeno DMP) se sastoji od Vaših planova za upravljanje podacima i sadrži informacije kako su nastali, kako su analizirani i na koji način su sačuvani podaci. Argos je otvoren kolaboracioni alat sa mogućnošću nadogradnje koji podržava otvorene i FAIR principe za upravljanje podacima.",
+			"INTRO-TIP": "Tip: Add new datasets to describe different types of data or disciplinary data to avoid mixing information."
 		},
 		"FIELDS": {
 			"NAME": "Naziv skupa podataka",
@@ -1033,6 +1147,7 @@
 			"EXTERNAL-LINK": "Dodajte spoljni URL link"
 		},
 		"HINT": {
+			"DESCRIPTION": "Briefly describe the context and purpose of the Dataset",
 			"TITLE": "Kratko uputstvo o",
 			"TITLE-REST": "radi se o njegovoj nameni i ciljevima."
 		},
@@ -1070,7 +1185,12 @@
 			"LABEL": "Oznaka",
 			"ROLES": "Uloge",
 			"NAME": "Ime",
-			"PERMISSIONS": "Dozvole"
+			"PERMISSIONS": "Dozvole",
+			"EXPORT": "Export users"
+		},
+		"ACTIONS": {
+			"EDIT": "Edit",
+			"SAVE": "Save"
 		}
 	},
 	"TYPES": {
@@ -1141,7 +1261,10 @@
 			"RESEARCHERS": "Istraživači",
 			"ORGANIZATIONS": "Institucije",
 			"DATASET-IDENTIFIER": "Identifikatori skupa podataka",
-			"CURRENCY": "Valuta"
+			"CURRENCY": "Valuta",
+			"VALIDATION": "Validator",
+			"OTHER": "Other",
+			"SELECT": "Select"
 		},
 		"DATASET-PROFILE-COMBO-BOX-TYPE": {
 			"WORD-LIST": "Lista reči",
@@ -1158,6 +1281,9 @@
 			"DATASETS": "Skupovi podataka",
 			"EXTERNAL-SOURCE-HINT": "Lista vrednosti obezbeđenih od spoljnih izvora"
 		},
+		"DATASET-PROFILE-VALIDATOR": {
+			"ACTION": "Validate"
+		},
 		"RECENT-ACTIVITY-ORDER": {
 			"CREATED": "Kreirano",
 			"LABEL": "Oznaka",
@@ -1278,7 +1404,8 @@
 	"GUIDE": {
 		"TITLE": "Korisničko uputstvo",
 		"TITLE-DASHED": "-Korisničko uputstvo-",
-		"CLOSE": "Zatvorite"
+		"CLOSE": "Zatvorite",
+		"SAVE": "Save"
 	},
 	"PRIVACY-POLICY": {
 		"TITLE": "-Politika privatnosti-",
@@ -1349,6 +1476,14 @@
 			"ADD-DATASET-DESCRIPTION": "Dodajte skup podataka",
 			"ADD-DATASET": "Dodajte skup podataka",
 			"ADD-DMP-DESCRIPTION": "Dodajte opis Plana"
+		},
+		"TOUR-GUIDE": {
+			"DMP": "This is your dashboard. You can view and edit all DMPs that you have either contributed to or created yourself.",
+			"START-NEW": "Create your DMP with Start new DMP.",
+			"IMPORT-DMP": "You can import a DMP",
+			"START-WIZARD": "or create new in Argos.",
+			"DATASET": "This is your dashboard. You can view and edit all Datasets that you have either contributed to or created yourself.",
+			"NEW-DATASET": "With Add Dataset you can describe new datasets anytime in the research process."
 		}
 	},
 	"USER-DIALOG": {
@@ -1362,7 +1497,15 @@
 			"TITLE": "Podešavanja",
 			"TIMEZONE": "Vremenska zona",
 			"CULTURE": "Kultura",
-			"LANGUAGE": "Jezik"
+			"LANGUAGE": "Jezik",
+			"CONNECTED-WITH": "Connected with",
+			"NAME": "Name",
+			"ORGANIZATION": "Organization",
+			"ROLE": "Role",
+			"SELECT-ROLE": "Select Role",
+			"ACCOUNTS": "Accounts",
+			"EMAILS": "Emails",
+			"YOUR-EMAIL": "Your Email"
 		},
 		"ASSOCIATED-DMPS": "Povezani Planovi",
 		"DMPS": {
@@ -1373,8 +1516,32 @@
 		"ZENODO": {
 			"LOGIN": "Prijavite se na Zenodo",
 			"LOGOUT": "Uklonite Zenodo",
+			"AUTHORIZE": "Authorize Zenodo",
 			"TITLE": "Zenodo nalog",
 			"DESCRIPTION": "Povezani Zenodo nalog:"
+		},
+		"ROLE-ORGANIZATION": {
+			"FACULTY": "Faculty",
+			"LIBRARIAN": "Librarian",
+			"RESEARCHER": "Researcher",
+			"STUDENT": "Student (BA/BSc, MSc)",
+			"EARLY-CAREER-RESEARCHER": "Early Career Researcher (PhD candidate, post-graduate)",
+			"RESEARCH-ADMINISTRATOR": "Research Administrator",
+			"REPOSITORY-MANAGER": "Repository Manager",
+			"RESEARCH-INFRASTRUCTURE": "Research Infrastructure",
+			"SERVICE-PROVIDER": "Service Provider",
+			"PUBLISHER": "Publisher",
+			"RESEARCH-FUNDER": "Research Funder",
+			"POLICY-MAKER": "Policymaker",
+			"SME-INDUSTRY": "SME/ Industry",
+			"OTHER": "Other"
+		},
+		"ACTIONS": {
+			"SAVE": "Save",
+			"LINK-NEW": "Link new",
+			"LINK-NEW-ACCOUNT": "Link new account",
+			"ADD": "Add",
+			"CANCEL": "Cancel"
 		}
 	},
 	"DATASET-REFERENCED-MODELS": {
@@ -1535,6 +1702,7 @@
 	"DATASET-PROFILE-STATUS": {
 		"NONE": "Nijedan",
 		"DRAFT": "Radna verzija",
-		"FINALIZED": "Završeno"
+		"FINALIZED": "Završeno",
+		"DELETED": "Deleted"
 	}
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/assets/i18n/tr.json b/dmp-frontend/src/assets/i18n/tr.json
index 163672605..73f36148f 100644
--- a/dmp-frontend/src/assets/i18n/tr.json
+++ b/dmp-frontend/src/assets/i18n/tr.json
@@ -281,10 +281,46 @@
 			"ROLES": "Görev"
 		},
 		"STEPS": {
+			"GENERAL-INFO": {
+				"TITLE": "General Info",
+				"DATASET-TEMPLATE-NAME": "Dataset template name",
+				"DATASET-TEMPLATE-NAME-HINT": "A title that determines the Dataset template.",
+				"DATASET-TEMPLATE-DESCRIPTION": "Description",
+				"DATASET-TEMPLATE-DESCRIPTION-HINT": "A brief description of what the Dataset is about, it's scope and objectives.",
+				"DATASET-TEMPLATE-LANGUAGE": "Dataset template language",
+				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
+				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
+				"UNTITLED": "Untitled",
+				"QUESTION": "Question",
+				"TEMPLATE-OUTLINE":"Template outline"
+			},
+			"PAGE-INFO": {
+				"PAGE-NAME": "Chapter Name",
+				"PAGE-NAME-HINT": "Set a name for the dataset chapter.",
+				"PAGE-DESCRIPTION": "Description",
+				"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the chapter is about.",
+				"ACTIONS": {
+					"CREATE-FIRST-PAGE": "Create the first chapter",
+					"CREATE-NEW-SUBSECTION": "Section",
+					"CREATE-NEW-SECTION": "Chapter",
+					"CREATE-FIRST-SECTION":"Create the first chapter",
+					"NOTHING-HERE-HINT": "Nothing here yet.",
+					"START-CREATING-PAGE-START": "Start by ",
+					"START-CREATING-PAGE-END": "creating the first chapter."
+				},
+				"PAGE": "Chapter"
+			},
+			"SECTION-INFO": {
+				"SECTION-NAME": "Section Name",
+				"SECTION-NAME-HINT": "Set a name for the section.",
+				"SECTION-DESCRIPTION": "Description",
+				"SECTION-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
+				"SECTION": "Section"
+			},
 			"PAGES": {
-				"TITLE": "Sayfa Tanımı",
-				"PAGE-PREFIX": "Sayfa",
-				"PAGE-INPUT-TITLE": "Sayfa Başlığı",
+				"TITLE": "Chapter Description",
+				"PAGE-PREFIX": "Chapter",
+				"PAGE-INPUT-TITLE": "Chapter Title",
 				"DATASET-DETAILS": "Veri Seti Tanım Ayrıntıları",
 				"EXTERNAL-REFERENCES": "Dış Bağlantılar",
 				"DESCRIPTION": "Tanım"
@@ -383,7 +419,30 @@
 						"FIELD-DATE-PICKER-LABEL": "Etiket",
 						"FIELD-DATE-PICKER-VALUE": "Değer",
 						"FIELD-MULTIPLE-AUTOCOMPLETE": "Çoklu Otomatik Tamamlama",
-						"FIELD-MULTIPLE-WORDLIST": "Multiple Selection"
+						"FIELD-MULTIPLE-WORDLIST": "Multiple Selection",
+						"FIELD-CURRENCY-TITLE": "Currency Data",
+						"FIELD-CURRENCY-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-REGISTRIES-TITLE": "Registries Data",
+						"FIELD-REGISTRIES-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-SERVICES-TITLE": "Services Data",
+						"FIELD-SERVICES-PLACEHOLDER": "Input Placeholder Text",
+						"FIELD-ORGANIZATIONS-TITLE": "Organizations Data",
+						"FIELD-ORGANIZATIONS-PLACEHOLDER": "Input placeholder",
+						"FIELD-EXTERNAL-DATASETS-TITLE": "External Datasets Data",
+						"FIELD-EXTERNAL-DATASETS-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-DATA-REPOSITORIES-TITLE": "Data Repositories Data",
+						"FIELD-DATA-REPOSITORIES-PLACEHOLDER": "Input placeholde Textr",
+						"FIELD-TAGS-TITLE": "Tags Data",
+						"FIELD-TAGS-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-DATASET-IDENTIFIER-TITLE": "Dataset Identifier Data",
+						"FIELD-DATASET-IDENTIFIER-PLACEHOLDER": "Input placeholder Text",
+						"FIELD-VALIDATOR-TITLE": "Validator Data",
+						"FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder Text"
+					},
+					"ERROR-MESSAGES":{
+						"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
+						"FIELD-RADIO-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided.",
+						"FIELD-SELECT-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided."
 					},
 					"DEFAULT-VALUES": {
 						"NONE": "Hiç",
@@ -406,9 +465,38 @@
 						"TARGET": "Hedef Alan Kimliği",
 						"VALUE": "Gerekli Değer",
 						"RULE-IF": "Eğer değer",
-						"RULE-THEN": "sonra alanı kimliği ile göster"
+						"RULE-THEN": "sonra alanı kimliği ile göster",
+						"FIELDSETS": "Questions",
+						"FIELDS":"Inputs"
+					},
+					"HINTS":{
+						"ELEMENT-CHILD-OF-TARGET":"This element is parent of selected input.",
+						"ELEMENT-HIDDEN-FROM-ELEMENT":"This element hides the element or a parent element of the input you are trying to apply visibility rule from."
+					}
+				},
+				"FORM-VALIDATION":{
+					"ERROR-MESSAGES":{
+						"PAGE-MUST-HAVE-SECTION": "Each chapter must have at least one section.",
+						"NEEDS-MORE-INFORMATION": " needs more information.",
+						"MUST-HAVE-SECTION-OR-FIELDSET": " must have either section or question.",
+						"MISSING":"Missing",
+						"PROVIDE-PAGE-AND-SECTION":"Make sure you provide a chapter and at least one section per chapter."
+					}
+				},
+				"TABLE-OF-CONTENTS":{
+					"ERROR-MESSAGES":{
+						"FIELDSET-MUST-HAVE-PARENT-SECTION":"Question can only be child of section.",
+						"INPUT-SECTION-SAME-LEVEL": "Cannot have question and section on the same level.",
+						"DRAG-NOT-SUPPORTED":"Drag n drop of section not supported to target container.",
+						"PAGE-ELEMENT-ONLY-TOP-LEVEL": "Chapter elements can only be at top level"
 					}
 				}
+			},
+			"TOOLKIT": {
+				"GENERAL-TOOLS": "Questions tools",
+				"NEW-INPUT-SET": "Add Question",
+				"CLONE": "Clone",
+				"DELETE": "Delete"
 			}
 		},
 		"ACTIONS": {
@@ -419,7 +507,26 @@
 			"DELETE": "Sil",
 			"ADD-PAGE": "Sayfa Ekle +",
 			"ADD-SECTION": "Bölüm Ekle +",
-			"VALIDATE": "Validate"
+			"VALIDATE": "Validate",
+			"PREVIEW-AND-FINALIZE": "Preview and finalize",
+			"FIELD": {
+				"MAKE-IT-REQUIRED": "Make input required",
+				"ADD-VISIBILITY-RULE": "Add visibility rule",
+				"DELETE-INPUT": "Delete this input",
+				"PREVIEW": "Preview",
+				"NOT-INITIALIZED": "Not initialized yet"
+			},
+			"FIELDSET": {
+				"ADD-INPUT": "Add new input",
+				"COMMENT-FIELD": "Comment field",
+				"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.",
+				"ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.",
+				"MULTIPLICITY": "Multiplicity",
+				"MORE": "More.."
+			}
+		},
+		"FEEDBACK-MESSAGES":{
+			"SAVE-SUCCESS":"Changes were saved successfully."
 		}
 	},
 	"GRANT-LISTING": {
@@ -723,7 +830,8 @@
 			"VIEW": "Göster",
 			"CLONE": "Çoğalt",
 			"NEW-VERSION": "Yeni Sürüm",
-			"VIEW-VERSIONS": "Tüm Veri seti Tanımı Şablon Sürümleri"
+			"VIEW-VERSIONS": "Tüm Veri seti Tanımı Şablon Sürümleri",
+			"DELETE":"Delete"
 		}
 	},
 	"DATASET-UPLOAD": {
@@ -1153,7 +1261,10 @@
 			"RESEARCHERS": "Araştırmacılar",
 			"ORGANIZATIONS": "Kurumlar",
 			"DATASET-IDENTIFIER": "Veri Seti Tanımlayıcısı",
-			"CURRENCY": "Değer"
+			"CURRENCY": "Değer",
+			"VALIDATION": "Validator",
+			"OTHER": "Other",
+			"SELECT": "Select"
 		},
 		"DATASET-PROFILE-COMBO-BOX-TYPE": {
 			"WORD-LIST": "Kelime Listesi",
@@ -1170,6 +1281,9 @@
 			"DATASETS": "Veri Seti Tanımları",
 			"EXTERNAL-SOURCE-HINT": "Dış kaynak(lar) tarafından sağlanan değerlerin listesi"
 		},
+		"DATASET-PROFILE-VALIDATOR": {
+			"ACTION": "Validate"
+		},
 		"RECENT-ACTIVITY-ORDER": {
 			"CREATED": "Oluşturulmuş",
 			"LABEL": "Etiket",
@@ -1588,6 +1702,7 @@
 	"DATASET-PROFILE-STATUS": {
 		"NONE": "Hiç Biri",
 		"DRAFT": "Taslak",
-		"FINALIZED": "Tamamlandı"
+		"FINALIZED": "Tamamlandı",
+		"DELETED": "Deleted"
 	}
-}
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/assets/images/editor/icons/add_input_set.svg b/dmp-frontend/src/assets/images/editor/icons/add_input_set.svg
new file mode 100644
index 000000000..91d11ea8a
--- /dev/null
+++ b/dmp-frontend/src/assets/images/editor/icons/add_input_set.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17.143" viewBox="0 0 20 17.143">
+  <g id="Group_11949" data-name="Group 11949" transform="translate(-1147 -554)">
+    <g id="Rectangle_2722" data-name="Rectangle 2722" transform="translate(1147 554)" fill="none" stroke="#129d99" stroke-width="2">
+      <rect width="16.191" height="13.333" rx="1" stroke="none"/>
+      <rect x="1" y="1" width="14.191" height="11.333" fill="none"/>
+    </g>
+    <rect id="Rectangle_2763" data-name="Rectangle 2763" width="12.381" height="12.381" transform="translate(1154.619 558.762)" fill="#fff"/>
+    <path id="ic_add_24px" d="M16.324,12.6H12.6v3.724H10.724V12.6H7V10.724h3.724V7H12.6v3.724h3.724Z" transform="translate(1150.579 554.719)" fill="#129d99"/>
+  </g>
+</svg>
diff --git a/dmp-frontend/src/assets/images/editor/icons/add_visibility_rule.svg b/dmp-frontend/src/assets/images/editor/icons/add_visibility_rule.svg
new file mode 100644
index 000000000..09cbae41b
--- /dev/null
+++ b/dmp-frontend/src/assets/images/editor/icons/add_visibility_rule.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.631" height="9.294" viewBox="0 0 13.631 9.294">
+  <g id="Group_11772" data-name="Group 11772" transform="translate(-636 -1716)">
+    <path id="ic_visibility_24px" d="M7.815,4.5A7.328,7.328,0,0,0,1,9.147a7.321,7.321,0,0,0,13.631,0A7.328,7.328,0,0,0,7.815,4.5Zm0,7.745a3.1,3.1,0,1,1,3.1-3.1A3.1,3.1,0,0,1,7.815,12.245Zm0-4.957A1.859,1.859,0,1,0,9.674,9.147,1.856,1.856,0,0,0,7.815,7.288Z" transform="translate(635 1711.5)" fill="#129d99"/>
+  </g>
+</svg>
diff --git a/dmp-frontend/src/assets/images/editor/icons/api.svg b/dmp-frontend/src/assets/images/editor/icons/api.svg
new file mode 100644
index 000000000..3bb818ce4
--- /dev/null
+++ b/dmp-frontend/src/assets/images/editor/icons/api.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="13.998" viewBox="0 0 14 13.998">
+  <path id="Path_17266" data-name="Path 17266" d="M-66.97,241.6l-1.258-.577a.438.438,0,0,1-.266-.444,5.4,5.4,0,0,0-.044-.977.457.457,0,0,1,.237-.473l1.2-.681a.46.46,0,0,0,.192-.592l-.547-1.169a.452.452,0,0,0-.577-.237l-1.287.488a.46.46,0,0,1-.5-.118,5.162,5.162,0,0,0-.725-.666.451.451,0,0,1-.163-.488l.37-1.332a.474.474,0,0,0-.281-.562l-1.2-.444a.467.467,0,0,0-.577.237l-.577,1.258a.438.438,0,0,1-.444.266,5.4,5.4,0,0,0-.977.044.457.457,0,0,1-.473-.237l-.681-1.2a.46.46,0,0,0-.592-.192l-1.169.547a.452.452,0,0,0-.237.577l.488,1.287a.46.46,0,0,1-.118.5,5.161,5.161,0,0,0-.666.725.451.451,0,0,1-.488.163l-1.332-.37a.474.474,0,0,0-.562.281l-.444,1.2a.467.467,0,0,0,.237.577l1.258.577a.438.438,0,0,1,.266.444,5.4,5.4,0,0,0,.044.977.457.457,0,0,1-.237.473l-1.2.681a.46.46,0,0,0-.192.592l.547,1.169a.452.452,0,0,0,.577.237l1.287-.488a.46.46,0,0,1,.5.118,5.162,5.162,0,0,0,.725.666.451.451,0,0,1,.163.488l-.37,1.332a.474.474,0,0,0,.281.562l1.2.444A.467.467,0,0,0-75,247.03l.577-1.258a.438.438,0,0,1,.444-.266,5.4,5.4,0,0,0,.977-.044.457.457,0,0,1,.473.237l.681,1.2a.46.46,0,0,0,.592.192l1.169-.547a.452.452,0,0,0,.237-.577l-.488-1.287a.46.46,0,0,1,.118-.5,5.162,5.162,0,0,0,.666-.725.451.451,0,0,1,.488-.163l1.332.37a.474.474,0,0,0,.562-.281l.444-1.2A.442.442,0,0,0-66.97,241.6Zm-5.578,1.2a2.732,2.732,0,0,1-3.625-1.317,2.732,2.732,0,0,1,1.317-3.625,2.732,2.732,0,0,1,3.625,1.317A2.711,2.711,0,0,1-72.548,242.8Z" transform="translate(80.702 -233.298)" fill="#17bebb"/>
+</svg>
diff --git a/dmp-frontend/src/assets/images/editor/icons/api_entity.svg b/dmp-frontend/src/assets/images/editor/icons/api_entity.svg
new file mode 100644
index 000000000..d7a782b99
--- /dev/null
+++ b/dmp-frontend/src/assets/images/editor/icons/api_entity.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+  <g id="Group_11857" data-name="Group 11857" transform="translate(-636 -1714)">
+    <g id="Rectangle_2747" data-name="Rectangle 2747" transform="translate(636 1714)" fill="none" stroke="#129d99" stroke-width="1">
+      <rect width="14" height="14" stroke="none"/>
+      <rect x="0.5" y="0.5" width="13" height="13" fill="none"/>
+    </g>
+    <g id="Polygon_10" data-name="Polygon 10" transform="translate(645 1718) rotate(90)" fill="#129d99">
+      <path d="M 5 3.5 L 1 3.5 L 3 0.8333333134651184 L 5 3.5 Z" stroke="none"/>
+      <path d="M 3 1.666666746139526 L 2 3 L 4 3 L 3 1.666666746139526 M 3 0 L 6 4 L 0 4 L 3 0 Z" stroke="none" fill="#129d99"/>
+    </g>
+  </g>
+</svg>
diff --git a/dmp-frontend/src/assets/images/editor/icons/argos_entities.svg b/dmp-frontend/src/assets/images/editor/icons/argos_entities.svg
new file mode 100644
index 000000000..12bb06eba
--- /dev/null
+++ b/dmp-frontend/src/assets/images/editor/icons/argos_entities.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="11.393" viewBox="0 0 14 11.393">
+  <g id="Layer_2" transform="translate(261.2 -232.555)">
+    <g id="Layer_1-2" transform="translate(-261.2 232.555)">
+      <path id="Path_17265" data-name="Path 17265" d="M-247.2,235.936a3.587,3.587,0,0,0-.637-1.83,3.636,3.636,0,0,0-2.975-1.546,3.586,3.586,0,0,0-2.054.649,3.6,3.6,0,0,0-1.287,1.617h0l-.035.071c-.012-.035-.024-.059-.035-.094a3.618,3.618,0,0,0-4.616-2.019,4.384,4.384,0,0,0-.626.307l-.012-.012a3.669,3.669,0,0,0-1.192,1.216h0a3.6,3.6,0,0,0-.5,1.393c0,.035-.012.083-.012.118a3.615,3.615,0,0,0,1.723,3.447,3.594,3.594,0,0,0,3.789-.035.089.089,0,0,1,.024.047h0a2.209,2.209,0,0,1-.838,2.963,2.206,2.206,0,0,1-3.01-.814,2.3,2.3,0,0,1-.283-.874.241.241,0,0,0-.236-.212h-.956a.237.237,0,0,0-.236.236v.012a3.628,3.628,0,0,0,3.86,3.364,3.628,3.628,0,0,0,3.364-3.86,3.666,3.666,0,0,0-.614-1.782c-.012-.024-.024-.035-.035-.059a4.139,4.139,0,0,0,.39-.708.575.575,0,0,0,.035-.083c.012.035.024.059.035.094h0a3.607,3.607,0,0,0,4.616,2.007,3.614,3.614,0,0,0,2.337-3.376,1.43,1.43,0,0,1,.012-.236Zm-1.558.992a2.193,2.193,0,0,1-2.054,1.428h0a2.211,2.211,0,0,1-2.054-1.417l-.012-.024c-.012-.059-.165-.118-.4-.153a4.727,4.727,0,0,0-.661-.059h-.519c-.59.024-1.039.106-1.062.212l-.012.024a2.193,2.193,0,0,1-2.821,1.287,2.193,2.193,0,0,1-1.287-2.821,2.2,2.2,0,0,1,2.833-1.287,2.2,2.2,0,0,1,1.287,1.287l.012.024c.012.059.165.118.4.153a4.722,4.722,0,0,0,.661.059h.519c.59-.024,1.039-.106,1.062-.212l.012-.024a2.193,2.193,0,0,1,2.821-1.287A2.17,2.17,0,0,1-248.758,236.928Z" transform="translate(261.2 -232.555)" fill="#17bebb"/>
+    </g>
+  </g>
+</svg>
diff --git a/dmp-frontend/src/assets/images/editor/icons/boolean.svg b/dmp-frontend/src/assets/images/editor/icons/boolean.svg
new file mode 100644
index 000000000..5895da1fe
--- /dev/null
+++ b/dmp-frontend/src/assets/images/editor/icons/boolean.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+  <g id="Group_11878" data-name="Group 11878" transform="translate(-584 -1289)">
+    <g id="Ellipse_406" data-name="Ellipse 406" transform="translate(584 1289)" fill="none" stroke="#129d99" stroke-width="0.5">
+      <circle cx="7" cy="7" r="7" stroke="none"/>
+      <circle cx="7" cy="7" r="6.75" fill="none"/>
+    </g>
+    <circle id="Ellipse_407" data-name="Ellipse 407" cx="4" cy="4" r="4" transform="translate(587 1292)" fill="#129d99"/>
+  </g>
+</svg>
diff --git a/dmp-frontend/src/assets/images/editor/icons/checkbox.svg b/dmp-frontend/src/assets/images/editor/icons/checkbox.svg
new file mode 100644
index 000000000..7b93b3dc1
--- /dev/null
+++ b/dmp-frontend/src/assets/images/editor/icons/checkbox.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+  <path id="ic_check_box_24px" d="M15.444,3H4.556A1.555,1.555,0,0,0,3,4.556V15.444A1.555,1.555,0,0,0,4.556,17H15.444A1.555,1.555,0,0,0,17,15.444V4.556A1.555,1.555,0,0,0,15.444,3Zm-7,10.889L4.556,10l1.1-1.1,2.792,2.784,5.9-5.9,1.1,1.1Z" transform="translate(-3 -3)" fill="#129d99"/>
+</svg>
diff --git a/dmp-frontend/src/assets/images/editor/icons/clone.svg b/dmp-frontend/src/assets/images/editor/icons/clone.svg
new file mode 100644
index 000000000..430f9172d
--- /dev/null
+++ b/dmp-frontend/src/assets/images/editor/icons/clone.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="17.5" height="20" viewBox="0 0 17.5 20">
+  <g id="Group_11920" data-name="Group 11920" transform="translate(-460.8 -867)">
+    <g id="Rectangle_2762" data-name="Rectangle 2762" transform="translate(464.724 867)" fill="none" stroke="#129d99" stroke-width="2">
+      <rect width="13.575" height="16.285" rx="1" stroke="none"/>
+      <rect x="1" y="1" width="11.575" height="14.285" fill="none"/>
+    </g>
+    <path id="Path_17263" data-name="Path 17263" d="M13.575,17.285H1.508A1.68,1.68,0,0,1,0,15.476V1" transform="translate(461.8 868.715)" fill="none" stroke="#129d99" stroke-linecap="round" stroke-width="2"/>
+  </g>
+</svg>
diff --git a/dmp-frontend/src/assets/images/editor/icons/currency.svg b/dmp-frontend/src/assets/images/editor/icons/currency.svg
new file mode 100644
index 000000000..5372bdf49
--- /dev/null
+++ b/dmp-frontend/src/assets/images/editor/icons/currency.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="13.519" viewBox="0 0 14 13.519">
+  <path id="Path_17267" data-name="Path 17267" d="M93.248,244.258a4.814,4.814,0,0,1-1.953.4A4.706,4.706,0,0,1,89,244.088a4,4,0,0,1-1.585-1.557,4.109,4.109,0,0,1-.354-.863H92.6l.694-1.189h-6.4c0-.071-.028-.142-.028-.226,0-.226.028-.467.042-.679h5.676l.694-1.189H87.26a4.515,4.515,0,0,1,.863-1.232,4.262,4.262,0,0,1,3.1-1.26,5.32,5.32,0,0,1,3.949,1.84L96.9,236.1a7.326,7.326,0,0,0-2.548-1.911,7.073,7.073,0,0,0-3.086-.694,6.963,6.963,0,0,0-3.5.906,6.471,6.471,0,0,0-2.491,2.406,6.217,6.217,0,0,0-.637,1.557H83.594l-.694,1.189h1.543a5.343,5.343,0,0,0-.028.679v.226h-.821l-.694,1.189h1.628a6.112,6.112,0,0,0,1.8,3.454,6.746,6.746,0,0,0,4.926,1.911,7.347,7.347,0,0,0,2.888-.538,9.09,9.09,0,0,0,2.7-1.939l-1.685-1.727A6.319,6.319,0,0,1,93.248,244.258Z" transform="translate(-82.9 -233.5)" fill="#17bebb"/>
+</svg>
diff --git a/dmp-frontend/src/assets/images/editor/icons/date_picker.svg b/dmp-frontend/src/assets/images/editor/icons/date_picker.svg
new file mode 100644
index 000000000..90bd2f0cb
--- /dev/null
+++ b/dmp-frontend/src/assets/images/editor/icons/date_picker.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12.967" height="14" viewBox="0 0 12.967 14">
+  <g id="Group_11865" data-name="Group 11865" transform="translate(-583 -1493.884)">
+    <g id="Rectangle_2750" data-name="Rectangle 2750" transform="translate(583 1494.918)" fill="none" stroke="#129d99" stroke-width="1">
+      <rect width="12.967" height="12.967" rx="2" stroke="none"/>
+      <rect x="0.5" y="0.5" width="11.967" height="11.967" rx="1.5" fill="none"/>
+    </g>
+    <rect id="Rectangle_2751" data-name="Rectangle 2751" width="12.967" height="2.631" rx="1" transform="translate(583 1495.918)" fill="#129d99"/>
+    <rect id="Rectangle_2752" data-name="Rectangle 2752" width="2.852" height="2.852" transform="translate(590.336 1502.18)" fill="#129d99"/>
+    <line id="Line_418" data-name="Line 418" y2="2.423" transform="translate(586.242 1493.884)" fill="none" stroke="#129d99" stroke-width="1"/>
+    <line id="Line_419" data-name="Line 419" y2="2.423" transform="translate(592.725 1493.884)" fill="none" stroke="#129d99" stroke-width="1"/>
+  </g>
+</svg>
diff --git a/dmp-frontend/src/assets/images/editor/icons/free_text.svg b/dmp-frontend/src/assets/images/editor/icons/free_text.svg
new file mode 100644
index 000000000..dfa46efd6
--- /dev/null
+++ b/dmp-frontend/src/assets/images/editor/icons/free_text.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="3.597" viewBox="0 0 14 3.597">
+  <g id="Group_11873" data-name="Group 11873" transform="translate(-584.5 -1352)">
+    <line id="Line_420" data-name="Line 420" x2="14" transform="translate(584.5 1352.5)" fill="none" stroke="#129d99" stroke-width="1"/>
+    <line id="Line_421" data-name="Line 421" x2="6" transform="translate(584.5 1355.097)" fill="none" stroke="#129d99" stroke-width="1"/>
+  </g>
+</svg>
diff --git a/dmp-frontend/src/assets/images/editor/icons/radio_box.svg b/dmp-frontend/src/assets/images/editor/icons/radio_box.svg
new file mode 100644
index 000000000..bc52ef1b1
--- /dev/null
+++ b/dmp-frontend/src/assets/images/editor/icons/radio_box.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12">
+  <g id="Group_11867" data-name="Group 11867" transform="translate(-583 -1464)">
+    <g id="Rectangle_2753" data-name="Rectangle 2753" transform="translate(583 1464)" fill="none" stroke="#129d99" stroke-width="1">
+      <rect width="14" height="5" stroke="none"/>
+      <rect x="0.5" y="0.5" width="13" height="4" fill="none"/>
+    </g>
+    <g id="Ellipse_402" data-name="Ellipse 402" transform="translate(583 1472)" fill="none" stroke="#129d99" stroke-width="0.3">
+      <circle cx="2" cy="2" r="2" stroke="none"/>
+      <circle cx="2" cy="2" r="1.85" fill="none"/>
+    </g>
+    <g id="Ellipse_403" data-name="Ellipse 403" transform="translate(588 1472)" fill="none" stroke="#129d99" stroke-width="0.3">
+      <circle cx="2" cy="2" r="2" stroke="none"/>
+      <circle cx="2" cy="2" r="1.85" fill="none"/>
+    </g>
+    <g id="Ellipse_404" data-name="Ellipse 404" transform="translate(593 1472)" fill="none" stroke="#129d99" stroke-width="0.3">
+      <circle cx="2" cy="2" r="2" stroke="none"/>
+      <circle cx="2" cy="2" r="1.85" fill="none"/>
+    </g>
+    <circle id="Ellipse_405" data-name="Ellipse 405" cx="1" cy="1" r="1" transform="translate(584 1473)" fill="#129d99"/>
+  </g>
+</svg>
diff --git a/dmp-frontend/src/assets/images/editor/icons/select.svg b/dmp-frontend/src/assets/images/editor/icons/select.svg
new file mode 100644
index 000000000..289b47d29
--- /dev/null
+++ b/dmp-frontend/src/assets/images/editor/icons/select.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="6.125" height="14" viewBox="0 0 6.125 14">
+  <g id="Group_11871" data-name="Group 11871" transform="translate(-586 -1400)">
+    <path id="ic_check_box_24px" d="M8.444,3H3.681A.68.68,0,0,0,3,3.681V8.444a.68.68,0,0,0,.681.681H8.444a.68.68,0,0,0,.681-.681V3.681A.68.68,0,0,0,8.444,3ZM5.382,7.764l-1.7-1.7.48-.48L5.382,6.8,7.965,4.218l.48.483Z" transform="translate(583 1397)" fill="#129d99"/>
+    <path id="ic_check_box_24px-2" data-name="ic_check_box_24px" d="M8.444,3H3.681A.68.68,0,0,0,3,3.681V8.444a.68.68,0,0,0,.681.681H8.444a.68.68,0,0,0,.681-.681V3.681A.68.68,0,0,0,8.444,3ZM5.382,7.764l-1.7-1.7.48-.48L5.382,6.8,7.965,4.218l.48.483Z" transform="translate(583 1404.875)" fill="#129d99"/>
+  </g>
+</svg>
diff --git a/dmp-frontend/src/assets/images/editor/icons/text_area.svg b/dmp-frontend/src/assets/images/editor/icons/text_area.svg
new file mode 100644
index 000000000..11e0cdd17
--- /dev/null
+++ b/dmp-frontend/src/assets/images/editor/icons/text_area.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="8.791" viewBox="0 0 14 8.791">
+  <g id="Group_11875" data-name="Group 11875" transform="translate(-584.5 -1352)">
+    <line id="Line_422" data-name="Line 422" x2="14" transform="translate(584.5 1352.5)" fill="none" stroke="#129d99" stroke-width="1"/>
+    <line id="Line_423" data-name="Line 423" x2="14" transform="translate(584.5 1355.097)" fill="none" stroke="#129d99" stroke-width="1"/>
+    <line id="Line_424" data-name="Line 424" x2="14" transform="translate(584.5 1357.694)" fill="none" stroke="#129d99" stroke-width="1"/>
+    <line id="Line_425" data-name="Line 425" x2="6" transform="translate(584.5 1360.291)" fill="none" stroke="#129d99" stroke-width="1"/>
+  </g>
+</svg>
diff --git a/dmp-frontend/src/assets/splash/about/how-it-works.html b/dmp-frontend/src/assets/splash/about/how-it-works.html
index e4e70c400..31beaf045 100644
--- a/dmp-frontend/src/assets/splash/about/how-it-works.html
+++ b/dmp-frontend/src/assets/splash/about/how-it-works.html
@@ -66,7 +66,7 @@
 				<div class="page-title">About</div>
 			</div>
 			<div class="col pt-5 pb-3">
-				<div class="row title-4">How it works</div>
+				<div class="row title-4">What it is</div>
 			</div>
 			<p class="pt-3">
 				ARGOS is the joint effort of OpenAIRE and EUDAT to deliver an open platform for Data Management Planning
@@ -102,6 +102,322 @@
 				</p>
 			</div>
 
+			<div class="col pt-0 pb-3">
+				<div class="row title-4">How it works</div>
+			</div>
+
+
+			<p class="pt-3">
+				Research Data Management (RDM) is a vital part of Open Science that lies at the heart of European 
+				research for it increases the quality of produced data and ensures integrity and preservation of 
+				research outputs. RDM refers to activities undertaken throughout a research lifecycle, spanning from 
+				data collection to data process and analysis. Open Access and FAIR principles govern data activities 
+				today to foster data discovery, distribution and exploitation, thus accelerating scientific breakthroughs. 
+				Coronavirus vaccine is the ultimate example of what can be achieved in a short amount of time when 
+				data are openly shared across the global scientific community. RDM urges scientific practices to be 
+				adjusted in ways that enable data understandability and re-usability from both humans and machines; 
+				services and tools are realised or re-designed to support the shift towards Open and FAIR research outputs.
+			</p>
+
+			<p class="pt-2">
+				Argos is a service for creating and publishing plans that describe data management activities, 
+				commonly known as Data Management Plans (DMPs). The plans are produced as machine-actionable 
+				outputs (ma-DMPs), in the form of rich text documents, following Open and FAIR practices and are 
+				published in Zenodo. Argos supports RDM at the beginning of research for planning data activities to 
+				be performed, as well as throughout and at the end of research for documenting the steps and 
+				processes followed according to institutional or funder RDM requirements.
+			</p>
+
+			<div class="col pt-5 pb-3">
+				<div class="row title-5">Dmp Lifecycle</div>
+			</div>
+
+			<p class="pt-2">
+				Argos follows a full DMP publication lifecycle. Users create their DMPs and add descriptions for their 
+				datasets. DMPs and Datasets are by default created in private mode and can be shared with 
+				colleagues to facilitate the writing process. Datasets are added in DMPs per type and / or per scientific 
+				discipline that they concern. That way information is well-organized and it is easier to distinguish 
+				relevant information from a pool of data activities detailed in a single DMP record. Once created, DMPs 
+				and their Datasets are in draft status and are treated as living documents in the Argos environment, 
+				meaning that they can be versioned and updated at any time. When ready, users can validate and 
+				finalize their DMPs, including corresponding Datasets, and change their visibility status from private to 
+				open. Open DMPs in Argos are available and accessible to all from the Public Dashboards. To close the 
+				DMP lifecycle, Argos integrates Zenodo, so users are able to publish their DMPs directly from its environment.
+			</p>
+
+		</div>
+		<div class="container">
+
+			<div class="col-12" style="margin-top: 121px; ">
+
+				<div style="position: relative;" id="lifecycle-img-container">
+					
+					<img id="img-coloured" class="image-coloured img-sharp" src="../assets/img/lifecycle_full_color.png" alt="Dmp Lifecycle">
+					<img class="image-grey img-sharp" src="../assets/img/lifecycle_full_color.png" alt="Dmp Lifecycle">
+					<!-- <img class="preface-img" src="../assets/img/lifecycle_full_color.png" alt=""> -->
+	
+					<!-- EDITORS-DRAFT -->
+					<div class="red-dot navigate-dot" data-navigate-to="multiple-navigation-1" data-clip-mode="clip-draft" style="top:24.7%; left: 23.5%; cursor: pointer;">
+						<div class="inner-red-dot"></div>
+					</div>
+					<!-- VALIDATED -->
+					<div class="red-dot navigate-dot" data-navigate-to="navigation-tab-2" data-clip-mode="clip-validated" style="top:19%; left: 56.5% ; cursor: pointer;">
+						<div class="inner-red-dot"></div>
+					</div>
+					<!-- FINALIZED -->
+					<div class="red-dot navigate-dot" data-navigate-to="navigation-tab-3" data-clip-mode="clip-finalized" style="top:39%; right: 19.7%; cursor: pointer;">
+						<div class="inner-red-dot"></div>
+					</div>
+					<!-- DMP -->
+					<div class="red-dot navigate-dot" data-navigate-to="navigation-tab-4" data-clip-mode="clip-dmp" style="top:67%; right: -0.3%; cursor: pointer;">
+						<div class="inner-red-dot"></div>
+					</div>
+				</div>
+
+
+			</div>
+			<div class="col-12" style="margin-top: 121px; "> 
+				<div class="options-menu" id="options-menu">
+
+					<div class="row">
+						<div class="col-12 col-md-7">
+							<ul class="nav nav-tabs">
+								<li class="nav-item">
+								  <a class="nav-link active" data-toggle="tab" id="multiple-navigation-1" data-img-fragment href="#create_and_add">Create & Add</a>
+								</li>
+								<li class="nav-item">
+								  <a class="nav-link" data-toggle="tab" id="navigation-tab-2" data-img-fragment="img-fragment-validated-is" href="#validate">Validate</a>
+								</li>
+								<li class="nav-item">
+								  <a class="nav-link" data-toggle="tab" id="navigation-tab-3" data-img-fragment="img-fragment-finalized-is" href="#finalize">Finalize</a>
+								</li>
+								<li class="nav-item">
+								  <a class="nav-link" data-toggle="tab" id="navigation-tab-4" data-img-fragment="img-fragment-dmp-out" href="#dmp">Ma-Dmp Outputs</a>
+								</li>
+							</ul>
+							<div class="tab-content">
+								<div role="tabpanel" class="tab-pane show active" id="create_and_add">
+									<div class="nav-tab-inner-text">
+										Argos consists of two main editors: the DMP editor and the Dataset editor.
+										Both editors integrate OpenAIRE and ESOC APIs to ease the writing process and 
+										help create links with other outputs. Also, the editors incorporate a mechanism 
+										to enable compliance with the <span style="color: #23BCBA;">RDA DMP Common Standard</span>.
+									</div>
+									
+									<!-- nested naviation -->
+									<ul class="nav nav-pills" style="padding-top: 2em;">
+										<li class="nav-item">
+										  <a class="nav-link sub-navigation-button active" data-toggle="tab" data-img-fragment="img-fragment-dmp-editor" href="#dmp_editor_pane">DMP Editor</a>
+										</li>
+										<li class="nav-item">
+										  <a class="nav-link sub-navigation-button" data-toggle="tab" data-img-fragment="img-fragment-dataset-editor" href="#dataset_editor_pane">Dataset Editor</a>
+										</li>
+									</ul>
+
+									<div class="tab-content">
+										<div role="tabpanel" class="tab-pane show active" id="dmp_editor_pane">
+											<div class="nav-tab-inner-text">
+												The DMP editor embeds the Dataset editor to provide a holistic view of a project's 
+												scope, beneficiaries and data activities. Therefore, it guides users step-by-step 
+												into adding appropriate administrative information, selecting templates that 
+												correspond to research needs and requirements, and describing data activities.
+											</div>
+										</div>
+										<div role="tabpanel" class="tab-pane fade" id="dataset_editor_pane">
+											<div class="nav-tab-inner-text">
+												The Dataset editor concers information that is solely for datasets, such as how Open 
+												and FAIR principles have been applied to them throughout data management activities. 
+												It is the place to select RDM templates and start answering data questions. Moreover, 
+												the Dataset editor can be used independently at any time when new data are produced 
+												throughout a project lifetime. That allows users to quickly describe their new data and 
+												link them to existing DMPs in their dashboard.
+											</div>
+										</div>
+									</div>
+
+
+
+								</div>
+								<div role="tabpanel" class="tab-pane fade" id="validate">
+									<div class="nav-tab-inner-text">
+										Information contained in DMPs should be validated before being published. 
+										Validation at this stage checks for mandatory fields in the DMP and reports back 
+										when necessary information has not been provided by the user. Once the user 
+										add all necessary information, validation is successful.
+									</div>
+								</div>
+								<div role="tabpanel" class="tab-pane fade" id="finalize">
+									<div class="nav-tab-inner-text">
+										DMPs finalization is the process of locking working drafts of DMPs and publishing 
+										them, either just on the Argos platform or on Zenodo where they alse get DOI. 
+										It is possible for datasets contained in DMPs to be finalized independently. That 
+										is important especially for datasets that can not be shared openly, such as those 
+										of sensitive content. Before publishing DMPs, sensitive datasets can be detached 
+										from its core. That way data descriptions are equally protected form being openly 
+										shared along with the DMP content.
+									</div>
+								</div>
+								<div role="tabpanel" class="tab-pane fade" id="dmp">
+									<div class="nav-tab-inner-text">
+										Argos ma-DMP outputs carry rich information that exceeds metadata provided in 
+										DMPs whey they are created and deposited as plain texts. Argos applies the RDA 
+										DMP Common Standard to comply with global practices on the machine-actinability. 
+										This is important for two reasons:
+									</div>
+
+									<div class="row pt-2 nav-tab-inner-text">
+										<div class="col-auto" style="width:2.5em;color: #129D99;">I.</div>
+										<div class="col">It enables researchers to switch platforms at anytime and seamlessly work</div>
+									</div>
+									<div class="row nav-tab-inner-text pt-4">
+										<div class="col-auto " style="width:2.5em;color: #129D99;">II.</div>
+										<div class="col">Adds to the Scholarly Communication ecology and pushes for best practices 
+											in neighbour areas to keep up pace, e.g. deposit in repositories and 
+											classification of DMPs as data management plans and not as publications,</div>
+									</div>
+								
+								</div>
+							</div>
+						</div>
+						<!-- Images -->
+						<div class="col" style="min-height: 20em;">
+							<img src="../assets/img/3_dmp_editor.png" class="img-fragment-step opacity-1 img-sharp" id="img-fragment-dmp-editor" alt="DMP editor">
+							<img src="../assets/img/dmp_out.png" class="img-fragment-step img-sharp" id="img-fragment-dmp-out" alt="DMP outputs">
+							<img src="../assets/img/4_dataset_editor.png" class="img-fragment-step img-sharp" id="img-fragment-dataset-editor" alt="Dataset editor">
+							<img src="../assets/img/6_validated_is.png" class="img-fragment-step img-sharp" id="img-fragment-validated-is" alt="Validated DMP">
+							<img src="../assets/img/8_finalized_is.png" class="img-fragment-step img-sharp" id="img-fragment-finalized-is" alt="Finalized DMP">
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="container-small" style="margin-top: 7em;">
+
+			<div class="col pt-5 pb-3" >
+				<div class="row title-5">Argos in the OpenAIRE ecosystem</div>
+			</div>
+
+			<p class="pt-2">
+				Argos is hooked on the OpenAIRE ecosystem comprising a diverse set of services and tools for Open 
+				Science and Scholarly Communication, from technical to educational and consultative in nature. 
+				OpenAIRE services and tools are provided for immediate consumption by end-users, i.e. researchers, 
+				research communities, research performing or funding organizations and policymakers. Moreover, 
+				OpenAIRE services are exploitable by software engineers. Argos integrates other OpenAIRE services to 
+				maximise efficiency of operations in Open and FAIR ecosystems and to make connections that add 
+				value in Open Science at global scale. OpenAIRE services that Argos connects to are:
+			</p>
+
+		</div>
+		<div class="container">
+			<div class="col" style="margin-top: 121px; position: relative;">
+				<img src="../assets/img/openaire_ecosystem.png" style="width: 100%; height: auto;" alt="">
+
+				<!-- apis -->
+				<div class="red-dot" style="top:8%; left: 22%"
+				data-toggle="tooltip" data-placement="bottom"
+					title='<h2>APIs</h2>
+					Utilises OpenAIRE pool of resources 
+					and APIs to provide quick input to 
+					users (e.g. CORDIS, Datacite, re3data, 
+					ORCID, etc).'
+					><div class="inner-red-dot"></div>
+				</div>
+				<!-- zenodo -->
+				<div class="red-dot" style="top:10%; left: 54%"
+					data-toggle="tooltip" data-placement="bottom"
+					title='<h2>Zenodo</h2>
+					Closes the DMP lifecycle by offering a 
+					DMP platform to expose DMP for 
+					their immediate publication in an 
+					open and FAIR manner (DMPs are 
+					assigned DOIs, get licenses, follow 
+					versioning mechanism etc).'
+					><div class="inner-red-dot"></div>
+				</div>
+				<!-- provide -->
+				<div class="red-dot" style="top:48.2%; left: 2.5%"
+					data-toggle="tooltip" data-placement="bottom"
+					title='<h2>Provide</h2>
+					Sends notifications to repository 
+					managers of the OpenAIRE network 
+					when datasets described in Argos 
+					ma-DMPs are claimed to be 
+					deposited in their repositories.'
+					><div class="inner-red-dot"></div>
+				</div>
+				<!-- monitor -->
+				<div class="red-dot" style="top:60.2%; right: 2.5%"
+					data-toggle="tooltip" data-placement="bottom"
+					title="<h2>Monitor</h2>
+					Collects contextualised information 
+					about ma-DMPs to understand how 
+					RDM and DMPs evolve in time and 
+					support decision making of funders 
+					and policymakers."
+					>
+					<div class="inner-red-dot"></div>
+				</div>
+				<!-- graph -->
+				<div class="red-dot" style="bottom:14.2%; left: 40.5%"
+					data-toggle="tooltip" data-placement="bottom"
+					title='<h2>Research Graph</h2>
+					Enriches the ma-DMP entity in the 
+					OpenAIRE knowledge graph for open 
+					scholarly communication information 
+					and creates relationships with other 
+					research outputs and links, adding in 
+					the OpenAIRE LOD ecology.'
+					>
+					<div class="inner-red-dot"></div>
+				</div>
+				<!-- explore -->
+				<div class="red-dot" style="bottom:1%; left: 56%" data-toggle="tooltip" data-placement="bottom" 
+				title='
+					<h2>Explore</h2>
+					Adds ma-DMPs in the OpenAIRE
+					search engine and makes them
+					findable under a dedicated resource
+					type category "data managment
+					plan".'>
+					<div class="inner-red-dot"></div>
+				</div>
+				
+			</div>
+		</div>
+		<div class="container-small">
+			
+			<p class="mt-3 pt-4" style="font-weight: bolder;" >Useful Resources</p>
+			<div class="resources-list">
+				<div class="row">
+					<div class="col-auto" style="padding-top: .5em;">
+						<div class="blue-dot"></div>
+					</div>
+					<div class="col p-0">
+						Argos RDA output adoption:
+						<br>
+						<a href="https://www.rd-alliance.org/implementing-dmp-common-standard-argos-tool-madmps">
+							https://www.rd-alliance.org/implementing-dmp-common-standard-argos-tool-madmps
+						</a>
+					</div>
+				</div>
+				<div class="row" >
+					<div class="col-auto" style="padding-top: .5em;">
+						<div class="blue-dot"></div>
+					</div>
+					<div class="col p-0">
+						Webinar:
+						<br>
+						<a href="https://www.rd-alliance.org/implementing-dmp-common-standard-argos-tool-madmps">
+							https://www.rd-alliance.org/implementing-dmp-common-standard-argos-tool-madmps
+						</a>
+						(starts at 30:15)
+					</div>
+				</div>
+			</div>
+			
+
+
+
 			<p class="pt-2">
 				More details on ARGOS as registered in the OpenAIRE services catalogue is available here:
 				<a href="http://catalogue.openaire.eu/service/openaire.argos"><u>http://catalogue.openaire.eu/service/openaire.argos</u></a>.
@@ -168,6 +484,8 @@
 	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
 	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
+	<!-- Js for this file -->
+	<script src="../js/how-it-works.js"></script>
 </body>
 
 </html>
diff --git a/dmp-frontend/src/assets/splash/assets/img/3_dmp_editor.png b/dmp-frontend/src/assets/splash/assets/img/3_dmp_editor.png
new file mode 100644
index 000000000..6d1fe7742
Binary files /dev/null and b/dmp-frontend/src/assets/splash/assets/img/3_dmp_editor.png differ
diff --git a/dmp-frontend/src/assets/splash/assets/img/4_dataset_editor.png b/dmp-frontend/src/assets/splash/assets/img/4_dataset_editor.png
new file mode 100644
index 000000000..f1a699edd
Binary files /dev/null and b/dmp-frontend/src/assets/splash/assets/img/4_dataset_editor.png differ
diff --git a/dmp-frontend/src/assets/splash/assets/img/6_validated_is.png b/dmp-frontend/src/assets/splash/assets/img/6_validated_is.png
new file mode 100644
index 000000000..4464c9d5b
Binary files /dev/null and b/dmp-frontend/src/assets/splash/assets/img/6_validated_is.png differ
diff --git a/dmp-frontend/src/assets/splash/assets/img/8_finalized_is.png b/dmp-frontend/src/assets/splash/assets/img/8_finalized_is.png
new file mode 100644
index 000000000..a9a15c7e6
Binary files /dev/null and b/dmp-frontend/src/assets/splash/assets/img/8_finalized_is.png differ
diff --git a/dmp-frontend/src/assets/splash/assets/img/dmp_out.png b/dmp-frontend/src/assets/splash/assets/img/dmp_out.png
new file mode 100644
index 000000000..8685c528e
Binary files /dev/null and b/dmp-frontend/src/assets/splash/assets/img/dmp_out.png differ
diff --git a/dmp-frontend/src/assets/splash/assets/img/lifecycle_full_color.png b/dmp-frontend/src/assets/splash/assets/img/lifecycle_full_color.png
new file mode 100644
index 000000000..d774e7c29
Binary files /dev/null and b/dmp-frontend/src/assets/splash/assets/img/lifecycle_full_color.png differ
diff --git a/dmp-frontend/src/assets/splash/assets/img/openaire_ecosystem.png b/dmp-frontend/src/assets/splash/assets/img/openaire_ecosystem.png
new file mode 100644
index 000000000..1e013eb86
Binary files /dev/null and b/dmp-frontend/src/assets/splash/assets/img/openaire_ecosystem.png differ
diff --git a/dmp-frontend/src/assets/splash/css/styles.css b/dmp-frontend/src/assets/splash/css/styles.css
index 345f8aaf1..4fdd15185 100644
--- a/dmp-frontend/src/assets/splash/css/styles.css
+++ b/dmp-frontend/src/assets/splash/css/styles.css
@@ -150,11 +150,15 @@ p a {
 	color: #212121;
 }
 
-.title-1, .title-2, .title-3, .title-4 {
+.title-1, .title-2, .title-3, .title-4, .title-5 {
 	text-align: left;
 	font-size: 2.37rem;
 	font-family: 'Roboto', sans-serif;
 }
+.title-5{
+	color: #129D99;
+	font: normal normal 300 27px/35px Roboto;
+}
 
 .page-title {
 	text-align: center;
@@ -379,3 +383,220 @@ hr {
 .ext-link-icon {
 	margin-left: .2rem;
 }
+
+
+/* ABOUT HOW-IT-WORKDS PAGE REDESIGN */
+
+.red-dot{
+	width: 27px;
+	height: 27px;
+	z-index: 20;
+	border: 3px solid #ee254091;
+	position: absolute;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.inner-red-dot{
+	background-color: #EE2540;
+	width: 19px;
+	height: 19px;
+	border-radius: 50%;
+}
+
+.tooltip >.tooltip-inner {
+	padding: 2em;
+	background-color: #FFF;
+	color: black;
+	box-shadow: 0px 3px 6px #0000001A;
+	text-align: start;
+	max-width: 25em;
+}
+.tooltip .show{
+	opacity: 1 !important;
+}
+.tooltip h2{
+	color: #23BCBA;
+	font-size: 1.3rem;
+	font-weight: bold;
+	line-height: 2rem;
+}
+
+.tooltip.bs-tooltip-top .arrow:before {
+border-top-color: #fff
+}
+.tooltip.bs-tooltip-right .arrow:before {
+border-right-color: #fff;
+}
+.tooltip.bs-tooltip-left .arrow:before {
+border-left-color: #fff;
+}
+.tooltip.bs-tooltip-bottom .arrow:before {
+border-bottom-color: #fff;
+}
+
+.tooltip.show {
+    opacity: 1 !important;
+}
+
+.image-coloured {
+	width: 100%; 
+	height: auto; 
+	display: block;
+    z-index: 1;
+	position: absolute;
+	left: 0;
+	top: 0px;
+	clip-path: polygon(0% 0%);
+	opacity: 0;
+	transition: opacity 200ms 50ms ease-in-out;
+}
+
+.image-grey {
+	width: 100%;
+	height: auto;
+	display: block;
+    z-index: 0;
+    filter: grayscale(100%);
+}
+
+.clip-draft{
+	clip-path:polygon(41.84% 0.0%, 40.13% 46.41%, 40.90% 100%, 0.0% 100.0%, 0.0% 0.0%);
+}
+.clip-validated{
+	clip-path: polygon(41.84% 0%, 40.13% 46.41%, 40.9% 100%, 68.32% 100.0%, 68.32% 0%);
+}
+.clip-finalized{
+	clip-path: polygon(58.86% 0.0%, 58.74% 100.0%, 88.65% 100.0%, 88.65% 0.0%);
+}
+.clip-dmp{
+	clip-path: polygon(80.26% 0.0%, 80.13% 100.0%, 100.00% 100.0%, 100.0% 0.0%);
+}
+
+/* .preface-img{
+	width: 100%; height: auto; display: block; z-index: 2;
+	position: absolute;
+	top:0;
+	left: 0;
+	opacity: 1;
+	filter: grayscale(100%);
+
+	transition-property: opacity;
+	transition-duration: 300ms;
+	transition-delay: 50ms;
+	transition-timing-function: ease-in;
+} */
+
+
+
+.options-menu{
+	box-shadow: 0px 6px 15px #0000001A;
+	border-radius: 36px;
+	padding: 3.2em 4.1em !important;
+	min-height: 30em;
+}
+/* First level of tabs */
+.options-menu .nav-tabs{
+	border-color: transparent !important;
+	color: #212121;
+	margin-bottom: 1.2em;
+}
+.options-menu .nav-tabs .nav-item .nav-link{
+	font-weight: normal;
+	border-radius: 0px !important;
+	padding: 0.2rem 0rem !important;
+}
+.options-menu .nav-tabs .nav-item:first-child .nav-link{
+	margin-left: 0px;
+}
+
+.options-menu .nav-tabs .nav-link.active{
+	font-weight: bold;
+	border-left:0px!important;
+	border-top:0px !important;
+	border-right:0px !important;
+}
+
+.options-menu .nav-tabs .nav-link:hover:not(.active){
+	border-color: transparent !important;
+}
+.options-menu .nav-tabs .nav-link{
+	opacity: 0.5;
+	transition: opacity 200ms 50ms ease-out;
+}
+.options-menu .nav-tabs .nav-link:hover{
+	color: #212121;
+}
+.options-menu .nav-tabs .nav-link.active{
+	border-bottom: 3px solid black !important;
+	opacity: 1;
+}
+
+
+/* nested tabs */
+.options-menu .nav-pills{
+	margin-bottom: 1em;
+}
+.options-menu .nav-pills .nav-link{
+	padding: .3rem 1.3rem !important;
+	font-weight: normal;
+	border-radius: 40px;
+	border: 1px solid #1A1A1A;
+	color: #1A1A1A;
+	opacity: 0.5;
+	/* transition: opacity 200ms 50ms ease-out; */
+}
+.options-menu .nav-pills .nav-link.active{
+	background-color: #129D99;
+	font-weight: bold;
+	color: #F9FBFC;
+	border: 1px solid transparent;
+	opacity: 1;
+}
+.options-menu .nav-pills .nav-item:first-child .nav-link{
+	margin-left: 0px;
+}
+
+.img-fragment-step{
+	width: auto; 
+	max-width: 100%;
+	max-height:23em;
+	position: absolute;
+	opacity: 0;
+	transition: opacity 200ms 50ms ease-out;
+}
+
+.opacity-0{
+	opacity: 0;
+}
+.opacity-1{
+	opacity: 1;
+}
+
+.nav-tab-inner-text{
+	text-align: left;
+	font-size: 0.9em;
+	letter-spacing: 0px;
+	color: #1A1A1A;
+	opacity: 1;
+}
+.resources-list{
+	margin-bottom: 9em;
+}
+/* .resources-list li::marker{
+	font-size: 1.5em;
+	color: #23BCBA;
+} */
+.blue-dot{
+	width: 0.7em;
+	height: 0.7em;
+	background-color: #23BCBA;
+	border-radius: 50%;
+
+}
+.img-sharp{
+	image-rendering: -webkit-optimize-contrast;
+	image-rendering: -moz-crisp-edges;
+}
+/* END OF ABOUT HOW-IT-WORKDS PAGE REDESIGN */
\ No newline at end of file
diff --git a/dmp-frontend/src/assets/splash/js/how-it-works.js b/dmp-frontend/src/assets/splash/js/how-it-works.js
new file mode 100644
index 000000000..7aad01b62
--- /dev/null
+++ b/dmp-frontend/src/assets/splash/js/how-it-works.js
@@ -0,0 +1,105 @@
+
+jQuery(function(){
+    const $img_coloured = $('#img-coloured');
+    const $img_preface = $('.preface-img');
+    const $action_dots = $('[data-clip-mode]');
+    const $lifecycle_img_container = $('#lifecycle-img-container');
+    let current_mode = null;
+
+    const mutationObserver = new MutationObserver(function(mutations) {
+        mutations.forEach(mutation=>{
+            if(mutation.attributeName === 'class'){//class changed
+                const isActive = mutation.target.className.includes('active');
+                const target_image_id = mutation.target.attributes['data-img-fragment'].value;
+
+                if(target_image_id && target_image_id.length){
+
+
+                    //dummy fix clean all opacities
+                    $('.img-fragment-step').each(function(){
+                        $(this).removeClass('opacity-1');
+                    });
+
+
+                    if(isActive){
+                        $("#"+target_image_id).addClass('opacity-1');
+                    }
+                }
+                
+                
+                if(mutation.target.id == 'multiple-navigation-1' && isActive){ //search children
+                    
+                    const $target_nav_links = $('.sub-navigation-button');
+                    $target_nav_links.removeClass('active');   
+                    $target_nav_links.first().addClass('active');
+                }
+            }
+        })
+    });
+
+
+    $(function () {
+        $('[data-toggle="tooltip"]').tooltip({html:true})
+      })
+    
+    $action_dots.on('mouseenter', function(){
+            const mode = $(this).attr('data-clip-mode');
+            current_mode = mode;
+
+            $img_coloured.addClass(mode);
+            // $img_preface.addClass('opacity-0');
+            $img_coloured.addClass('opacity-1');
+            
+            $action_dots.each(function(){
+               if($(this).attr('data-clip-mode') != mode){
+                   $(this).addClass('d-none');
+               };
+            });
+    });
+    $action_dots.on('mouseleave', function(){
+            
+    });
+
+
+    $lifecycle_img_container.on('mouseleave', function(){
+        if(current_mode){
+            const mode = current_mode;
+
+
+            //give animation time to complete
+            setTimeout(() => {
+                $img_coloured.removeClass(mode);
+                $action_dots.each(function(){
+                    $(this).removeClass('d-none');
+                });
+            }, 300);
+            $img_coloured.removeClass('opacity-1');
+            // $img_preface.removeClass('opacity-0');
+    
+        }
+
+        current_mode = null;
+    });
+
+
+    $("[data-img-fragment]").each(function(){
+        const nodeElement = $(this)[0];
+
+        mutationObserver.observe(nodeElement ,{attributes:true});
+    });
+
+    
+    $('.navigate-dot').on('click', function(){
+
+        const navigate_to = $(this).attr('data-navigate-to');
+        
+        if(navigate_to){
+            const $navigate_to = $('#'+navigate_to);
+            $navigate_to.click();
+            const offset = $('#options-menu').offset().top - 120;
+            window.scrollTo({top:offset, behavior:'smooth'})
+        }
+    });
+    
+
+});
diff --git a/dmp-frontend/src/polyfills.ts b/dmp-frontend/src/polyfills.ts
index fa3cd0117..adefaa3b1 100644
--- a/dmp-frontend/src/polyfills.ts
+++ b/dmp-frontend/src/polyfills.ts
@@ -55,3 +55,6 @@ import 'zone.js/dist/zone';  // Included with Angular CLI.
  * Need to import at least one locale-data with intl.
  */
 //import 'intl/locale-data/jsonp/en';
+
+
+(window as any).global = window;//ng2-dragula
\ No newline at end of file
diff --git a/dmp-frontend/src/styles.scss b/dmp-frontend/src/styles.scss
index cc68453bc..6ca804bb1 100644
--- a/dmp-frontend/src/styles.scss
+++ b/dmp-frontend/src/styles.scss
@@ -8,6 +8,38 @@
 // Guided Tour style
 @import '../node_modules/ngx-guided-tour/scss/guided-tour-base-theme.scss';
 
+@import '../node_modules/dragula/dist/dragula.css';
+
+
+/* in-flight clone */
+.gu-mirror {
+	position: fixed !important;
+	margin: 0 !important;
+	z-index: 9999 !important;
+	opacity: 1;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+	filter: alpha(opacity=80);
+	pointer-events: none;
+  }
+  /* high-performance display:none; helper */
+  .gu-hide {
+	left: -9999px !important;
+  }
+  /* added to mirrorContainer (default = body) while dragging */
+  .gu-unselectable {
+	-webkit-user-select: none !important;
+	-moz-user-select: none !important;
+	-ms-user-select: none !important;
+	user-select: none !important;
+  }
+  /* added to the source element while its mirror is dragged */
+  .gu-transit {
+	opacity: 0;
+	border: 1px dashed red;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
+	filter: alpha(opacity=20);
+  }
+
 // Custom Theme
 // @import "./assets/scss/blue-theme.scss";
 
@@ -210,3 +242,13 @@
 		border-radius: 0;
 	}
 }
+
+
+.text-primary-blue{
+	color: #129D99;
+}
+
+
+.translateY-3{
+	transform:translateY(3px);
+}
\ No newline at end of file