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 d9e634bd7..b0be33e63 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
@@ -69,10 +69,29 @@
 				<ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.TITLE' | translate}}</ng-template>
 				<div class="row">
 					<div class="col-6">
-						<dataset-profile-table-of-contents class="toc-pane-container" [links]="getTocEntries()" (stepFound)="onStepFound($event)" (currentLinks)="getLinks($event)"></dataset-profile-table-of-contents>
+						<dataset-profile-table-of-contents class="toc-pane-container" [links]="getTocEntries()" (stepFound)="onStepFound($event)" (currentLinks)="getLinks($event)" (itemClick)="displayItem($event)"></dataset-profile-table-of-contents>
 					</div>
 					<div class="col-6">
-						<!-- <mat-accordion class="col-12" [multi]="true">
+						<div class="row">
+							<app-dataset-profile-editor-section-component *ngIf="profileEditorConfig" class="col-12"
+								[form]="profileEditorConfig.form"
+								[indexPath]="'s' + profileEditorConfig.index" 
+								[dataModel]="profileEditorConfig.sectionEditorModel"
+								[viewOnly]="viewOnly">
+							</app-dataset-profile-editor-section-component>
+
+							<app-dataset-profile-editor-composite-field-component class="col-12"
+								*ngIf="profileEditorCompositeConfig" 
+								[form]="profileEditorCompositeConfig.form" 
+								[indexPath]="profileEditorCompositeConfig.index" 
+								[viewOnly]="viewOnly">
+
+							</app-dataset-profile-editor-composite-field-component>
+						</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}}
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 6158679c3..af02b5f58 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
@@ -29,7 +29,7 @@ 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 { ToCEntry } from '../table-of-contents/table-of-contents-entry';
+import { ToCEntry, ToCEntryType } from '../table-of-contents/table-of-contents-entry';
 
 const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.json');
 
@@ -57,6 +57,27 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 	nestedIndex: number = 0;
 	errorMessages: string[] = [];
 
+
+
+	profileEditorConfig:{
+		form: FormGroup,
+		index: string,
+		id: string,
+		sectionEditorModel?:SectionEditorModel
+	};
+	profileEditorCompositeConfig:{
+		form: FormGroup,
+		index: string,
+		id: string
+	};
+
+	isSectionControl: boolean = false;
+
+	// sectionIdPreviewed:string = null;
+	// currentSubForm:FormGroup = null;
+	// currentSectionIndex: number = null;
+	// currentSectionEditorModel: SectionEditorModel = null;
+
 	constructor(
 		private datasetProfileService: DatasetProfileService,
 		private route: ActivatedRoute,
@@ -501,7 +522,8 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 		(this.form.get('pages') as FormArray).controls.forEach((pageElement, i) => {
 			result.push({
 				id: pageElement.get('id').value,
-				label: pageElement.get('title').value
+				label: pageElement.get('title').value,
+				type: ToCEntryType.Page
 			} as ToCEntry)
 		});
 
@@ -512,10 +534,121 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 
 			pageToAdd.subEntries.push({
 				id: sectionElement.get('id').value,
-				label: sectionElement.get('title').value
+				label: sectionElement.get('title').value,
+				type: ToCEntryType.Section
 			} as ToCEntry)
 		});
 
 		return result;
 	}
+
+	displayItem(entries: ToCEntry[]):void{
+
+		console.log(this.form);
+		console.log(this.dataModel);
+
+		this.profileEditorConfig = null;
+
+		let entry = entries[0];
+		console.log(entries);
+
+
+		if(entry.subEntries && (entry.subEntries.length>0)){// its a page
+			// this.sectionIdPreviewed = entry.id;
+			const valuesArray = this.form.get('sections').value;
+
+
+			let currentVal = entry.id;
+
+			let indexArray:string[] = valuesArray.map(element=> element.page);
+
+			let index = indexArray.indexOf(currentVal);
+			let subForm = (this.form.get('sections') as FormArray).controls[index] as FormGroup;
+			let currentEditor = this.dataModel.sections.filter(section=> section.page == entry.id)[0];
+
+
+			this.profileEditorConfig = {
+				id: entry.id,
+				form: subForm,
+				index: index.toString(),
+				sectionEditorModel: currentEditor
+			};
+
+			this.isSectionControl = false;
+			// this.currentSubForm = subForm;
+			// this.currentSectionIndex = index;
+			// this.currentSectionEditorModel = currentEditor;
+			
+			// this.isCompoSiteFieldEditor = true;
+
+		}else if(entries.length == 2){//its section
+			
+			this.isSectionControl = true;
+
+			const valuesArray = this.form.get('sections').value;
+
+
+			let currentVal = entries[1].id //  Parent node           entry.id;
+
+			let indexArray:string[] = valuesArray.map(element=> element.page);
+
+			let index = indexArray.indexOf(currentVal);
+			
+
+			//Section Form
+			const sectionForm = (this.form.get('sections') as FormArray).controls[index] as FormGroup;
+
+			const sectionFormControls = sectionForm.get('fieldSets')['controls']; 
+
+			const fieldSetsIds = sectionForm.get('fieldSets').value;//.map(fieldset => fieldset.id);
+			// const fieldsetIndex = fieldSetsIds.indexOf(entries[0].id);
+			
+			console.log(fieldSetsIds);
+			
+
+			const sectionFormControl = sectionFormControls[0];
+
+			this.profileEditorCompositeConfig= {
+				id :entries[0].id,
+				form :sectionFormControl,
+				index: 's' + index + 'cf'+ 0
+			}
+
+
+		}
+
+
+
+		
+
+
+	}
+
+	// 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;
+	// }
+
 }
\ No newline at end of file
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
index bf65d0f9c..d5f2244e0 100644
--- 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
@@ -2,4 +2,11 @@ export interface ToCEntry {
 	id: string;
 	label: string;
 	subEntries: ToCEntry[];
+	type: ToCEntryType;
 }
+
+
+export enum ToCEntryType{
+	Page =0,
+	Section = 1
+}
\ 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
index c203eaedf..ab2fcb80a 100644
--- 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
@@ -6,9 +6,9 @@
 		<!-- <span *ngFor="let link of links; let i = index" (click)="toggle(link); goToStep(link)" class="docs-level-{{link.type}} docs-link mt-0" [class.docs-active]="link.active">
 			<span *ngIf="link.show" class="link-name"><span [class.selected]="link.selected && isActive">{{link.name}}</span></span>
 		</span> -->
-		<span *ngFor="let link of links; let i = index" (click)="toggle(link); goToStep(link)" class="docs-link mt-0">
-			<span class="link-name"><span>{{link.label}}</span></span>
-			<dataset-profile-table-of-contents *ngIf="link.subEntries" [links]="link.subEntries"></dataset-profile-table-of-contents>
+		<span *ngFor="let link of links; let i = index" (click)="toggle(link); goToStep(link);" class="docs-link mt-0">
+			<span class="link-name" (click)="itemClicked(link)"><span>{{link.label}}</span></span>
+			<dataset-profile-table-of-contents *ngIf="link.subEntries" [links]="link.subEntries" (itemClick)="propagateClickToParent($event, link)"></dataset-profile-table-of-contents>
 		</span>
 		<!-- </nav> -->
 	</div>
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
index ec6160e56..00981444a 100644
--- 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
@@ -36,6 +36,10 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn
 	headerSelectors = '.toc-page-header, .toc-section-header, .toc-compositeField-header';
 	@Output() stepFound = new EventEmitter<LinkToScroll>();
 	@Output() currentLinks = new EventEmitter<Link[]>();
+
+	@Output() itemClick = new EventEmitter<ToCEntry[]>();
+
+
 	subscription: Subscription;
 	linksSubject: Subject<HTMLElement[]> = new Subject<HTMLElement[]>();
 
@@ -159,6 +163,18 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn
 	// 	return +link.id.split("_", 2)[1];
 	// }
 
+
+	itemClicked(item: ToCEntry){
+		//leaf node
+		this.itemClick.emit([item]);
+	}
+	
+	propagateClickToParent(childIds:ToCEntry[], currentItem: ToCEntry){
+		childIds.push(currentItem);
+		this.itemClick.emit(childIds);
+	}
+
+
 }
 
 export interface LinkToScroll {