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 66094e595..7494dc6b2 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
@@ -44,6 +44,7 @@ import { DatasetProfileEditorValidatorFieldComponent } from './editor/components
 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';
 
 @NgModule({
 	imports: [
@@ -92,7 +93,8 @@ import { DatasetProfileTableOfContents } from './table-of-contents/table-of-cont
 		DatasetProfileEditorDatasetIdentifierFieldComponent,
 		DatasetProfileEditorCurrencyFieldComponent,
 		DatasetProfileEditorValidatorFieldComponent,
-		DatasetProfileTableOfContents
+		DatasetProfileTableOfContents,
+		DatasetProfileTableOfContentsInternalSection
 	],
 	entryComponents: [
 		DialogConfirmationUploadDatasetProfiles
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..00f667062 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
@@ -33,7 +33,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,12 +47,13 @@
 			</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>
+			| translate}}</button></div> -->
 	<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">
@@ -62,7 +64,7 @@
 				</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>
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..95071fd16 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
@@ -15,7 +15,7 @@ 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;
 
@@ -34,26 +34,26 @@ export class DatasetProfileEditorSectionComponent extends BaseComponent implemen
 		const field: FieldEditorModel = new FieldEditorModel();
 		field.id = Guid.create().toString();
 		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);
+		//}
 		(<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/dataset-profile-editor.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
index b0be33e63..ea4c54a35 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,28 +69,63 @@
 				<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)" (itemClick)="displayItem($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">
-						<div class="row">
-							<app-dataset-profile-editor-section-component *ngIf="profileEditorConfig" class="col-12"
+						<div class="row" *ngIf="selectedTocEntry">
+							<div class="col-12" *ngIf="selectedTocEntry.type === tocEntryEnumValues.Page">
+
+							</div>
+
+							<app-dataset-profile-editor-section-component class="col-12"
+								*ngIf="selectedTocEntry.type === tocEntryEnumValues.Section"
+								[form]="selectedTocEntry.form" [indexPath]="'tbd'" [viewOnly]="viewOnly">
+							</app-dataset-profile-editor-section-component>
+
+							<div class="col-12" *ngIf="selectedTocEntry.type === tocEntryEnumValues.FieldSet">
+								<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="col-12"
+										[form]="selectedTocEntry.form" [indexPath]="'indexPath' + 'cf' + 'i'"
+										[viewOnly]="viewOnly">
+									</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>
+
+							<!-- <app-dataset-profile-editor-section-component *ngIf="this.selectedTocEntry.type === tocEntryEnumValues.Section" 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-section-component> -->
 
-							<app-dataset-profile-editor-composite-field-component class="col-12"
+							<!-- <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>
+							</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>
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 af02b5f58..eab68df12 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
@@ -2,7 +2,7 @@
 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 { Form, FormArray, FormControl, FormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatHorizontalStepper } from '@angular/material/stepper';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
@@ -30,6 +30,7 @@ import { Link, LinkToScroll } from '@app/ui/misc/dataset-description-form/tableO
 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, ToCEntryType } from '../table-of-contents/table-of-contents-entry';
+import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 
 const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.json');
 
@@ -56,16 +57,17 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 	nestedCount: number[] = [];
 	nestedIndex: number = 0;
 	errorMessages: string[] = [];
+	tocEntryEnumValues = ToCEntryType;
 
 
 
-	profileEditorConfig:{
+	profileEditorConfig: {
 		form: FormGroup,
 		index: string,
 		id: string,
-		sectionEditorModel?:SectionEditorModel
+		sectionEditorModel?: SectionEditorModel
 	};
-	profileEditorCompositeConfig:{
+	profileEditorCompositeConfig: {
 		form: FormGroup,
 		index: string,
 		id: string
@@ -89,7 +91,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 		private languageInfoService: LanguageInfoService,
 		private httpClient: HttpClient,
 		private matomoService: MatomoService,
-
+		private enumUtils: EnumUtils,
 		private datasetWizardService: DatasetWizardService
 	) {
 		super();
@@ -523,7 +525,8 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 			result.push({
 				id: pageElement.get('id').value,
 				label: pageElement.get('title').value,
-				type: ToCEntryType.Page
+				type: ToCEntryType.Page,
+				form: pageElement
 			} as ToCEntry)
 		});
 
@@ -532,94 +535,164 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 			const pageToAdd = result.filter(x => x.id == currentSectionPageId)[0];
 			if (pageToAdd.subEntries == null) pageToAdd.subEntries = [];
 
-			pageToAdd.subEntries.push({
+			const item = {
 				id: sectionElement.get('id').value,
 				label: sectionElement.get('title').value,
-				type: ToCEntryType.Section
-			} as ToCEntry)
+				type: ToCEntryType.Section,
+				form: sectionElement,
+				numbering: pageToAdd.numbering + '.' + i
+			} 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;
+			}
+			if (fieldSetItems != null) {
+				if (item.subEntries == null) {
+					item.subEntries = fieldSetItems;
+				} else {
+					item.subEntries.push(...fieldSetItems);
+				}
+			}
+			pageToAdd.subEntries.push(item);
+
 		});
 
 		return result;
 	}
 
-	displayItem(entries: ToCEntry[]):void{
+	private populateSections(sections: FormArray, existingNumbering: string): ToCEntry[] {
+		if (sections == null || sections.controls == null || sections.controls.length == 0) { return null; }
 
-		console.log(this.form);
-		console.log(this.dataModel);
+		const result: ToCEntry[] = [];
+		sections.controls.forEach((sectionElement, i) => {
 
-		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
+			const item = {
+				id: sectionElement.get('id').value,
+				label: sectionElement.get('title').value,
+				type: ToCEntryType.Section,
+				form: sectionElement,
+				numbering: existingNumbering + '.' + i
+			} 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;
 			}
+			if (fieldSetItems != null) {
+				if (item.subEntries == null) {
+					item.subEntries = fieldSetItems;
+				} else {
+					item.subEntries.push(...fieldSetItems);
+				}
+			}
+			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
+			} as ToCEntry)
+
+		});
+
+		return result;
+	}
+
+	selectedTocEntry: ToCEntry
+	displayItem(entry: ToCEntry): void {
+		this.selectedTocEntry = entry;
 
 
-		}
+		// 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
+		// 	}
+
+
+		// }
+
 
 
 
-		
 
 
 	}
@@ -637,7 +710,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 	// getCurrentEditorModel(): SectionEditorModel{
 	// 	let currentEditor = this.dataModel.sections.filter(section=> section.page == this.sectionIdPreviewed)[0];
 	// 	return currentEditor;
-	
+
 	// }
 
 
@@ -651,4 +724,14 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 	// 	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);
+	}
+
+
 }
\ 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 d5f2244e0..3cc284659 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
@@ -1,12 +1,17 @@
+import { AbstractControl } from "@angular/forms";
+
 export interface ToCEntry {
 	id: string;
 	label: string;
 	subEntries: ToCEntry[];
 	type: ToCEntryType;
+	form: AbstractControl;
+	numbering: string;
 }
 
 
-export enum ToCEntryType{
-	Page =0,
-	Section = 1
+export enum ToCEntryType {
+	Page = 0,
+	Section = 1,
+	FieldSet = 2
 }
\ 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..5c2e2ccac
--- /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,5 @@
+<div *ngFor="let link of links; let i = index" class="docs-link mt-0">
+	<span class="link-name" (click)="itemClicked(link)"><span>{{link.numbering}}</span> <span>{{link.label}}</span></span>
+	<app-dataset-profile-table-of-contents-internal-section *ngIf="link.subEntries" [links]="link.subEntries"
+		(itemClick)="itemClicked($event)"></app-dataset-profile-table-of-contents-internal-section>
+</div>
\ 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..b346518fa
--- /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,70 @@
+.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;
+        // 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;
+}
+
+span {
+  line-height: 16px;
+  margin: 6px 0 0;
+  position: relative;
+  text-decoration: none;
+  display: block;
+  overflow: hidden;
+  color: #21212194;
+  font-weight: 400;
+  max-width: 290px;
+  min-width: 290px;
+  padding: 0rem .4rem;
+  span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+    width: 100%;
+  }
+}
+
+.selected {
+  color: #212121 !important;
+  font-weight: 700 !important;
+  opacity: 1 !important;
+}
+
+// .docs-level-mat-expansion-panel {
+//   margin-left: 12px;
+// }
+
+.docs-level-h5 {
+  margin-left: 24px;
+}
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..3d020cc7b
--- /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,40 @@
+import { DOCUMENT } from '@angular/common';
+import { Component, EventEmitter, Inject, Input, OnInit, Output, SimpleChanges } from '@angular/core';
+import { BaseComponent } from '@common/base/base.component';
+import { ToCEntry } 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>();
+
+	constructor(
+		@Inject(DOCUMENT) private _document: Document) {
+		super();
+	}
+
+
+	ngOnInit(): void {
+
+	}
+
+	ngOnChanges(changes: SimpleChanges) {
+
+	}
+
+	itemClicked(item: ToCEntry) {
+		//leaf node
+		this.itemClick.emit(item);
+	}
+
+	// propagateClickToParent(childIds: ToCEntry[], currentItem: ToCEntry) {
+	// 	childIds.push(currentItem);
+	// 	this.itemClick.emit(childIds);
+	// }
+}
\ 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 ab2fcb80a..35649d673 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
@@ -1,4 +1,4 @@
-<div *ngIf="links?.length" class="docs-toc-container">
+<div *ngIf="links?.length > 0" class="docs-toc-container">
 	<!-- <div class="docs-toc-heading">Contents</div> -->
 	<!-- <nav> -->
 	<!-- <a [href]="_rootUrl + '#' + link.id" -->
@@ -6,10 +6,11 @@
 		<!-- <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">
+		<app-dataset-profile-table-of-contents-internal-section [links]="links" (itemClick)="itemClicked($event)"></app-dataset-profile-table-of-contents-internal-section>
+		<!-- <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>
+		</span> -->
 		<!-- </nav> -->
 	</div>
 </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 00981444a..858ba8447 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
@@ -37,7 +37,7 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn
 	@Output() stepFound = new EventEmitter<LinkToScroll>();
 	@Output() currentLinks = new EventEmitter<Link[]>();
 
-	@Output() itemClick = new EventEmitter<ToCEntry[]>();
+	@Output() itemClick = new EventEmitter<ToCEntry>();
 
 
 	subscription: Subscription;
@@ -166,13 +166,13 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn
 
 	itemClicked(item: ToCEntry){
 		//leaf node
-		this.itemClick.emit([item]);
+		this.itemClick.emit(item);
 	}
 	
-	propagateClickToParent(childIds:ToCEntry[], currentItem: ToCEntry){
-		childIds.push(currentItem);
-		this.itemClick.emit(childIds);
-	}
+	// propagateClickToParent(childIds:ToCEntry[], currentItem: ToCEntry){
+	// 	childIds.push(currentItem);
+	// 	this.itemClick.emit(childIds);
+	// }
 
 
 }