diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.scss b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.scss
index 330eb7cb5..6a13931ac 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.scss
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.scss
@@ -1,6 +1,14 @@
 .copositeField {
-	font-weight: bold;
-	color: #3a3737;
-	max-width: 100%;
-	padding-top: 1em;
-  }
+	// font-weight: bold;
+	// color: #3a3737;
+	// max-width: 100%;
+	// padding-top: 1em;
+	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;
+}
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.scss b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.scss
index e8065e1af..39710e400 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.scss
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.scss
@@ -4,10 +4,19 @@
 	}
 
 	.full-width {
-		width: 100%
+		width: 100%;
 	}
 
 	.text-area {
 		box-sizing: content-box;
 	}
 }
+
+::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
+	background: #fafafa !important;
+}
+
+::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
+	font-size: 1rem;
+	padding: 0.6em 0 1em 0 !important;
+}
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 48c017bda..440606e24 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,11 +3,11 @@
 		<mat-expansion-panel class="row expansion-panel toc-section-header" [id]="pathName" [(expanded)]="panelExpanded">
 			<mat-expansion-panel-header>
 				<mat-panel-title>
-					<h6>{{form.get('numbering').value}} {{form.get('title').value}}</h6>
+					<h6 class='panel-title'>{{form.get('numbering').value}} {{form.get('title').value}}</h6>
 				</mat-panel-title>
 			</mat-expansion-panel-header>
 			<mat-panel-description class="col-12">
-				<h6 *ngIf="form.get('description').value">{{form.get('description').value}}</h6>
+				<h6 class='panel-desc' *ngIf="form.get('description').value">{{form.get('description').value}}</h6>
 			</mat-panel-description>
 			<div *ngFor="let compositeFieldFormGroup of form.get('compositeFields')['controls']; let i = index;" class="col-12">
 				<!-- <div *ngIf="isElementVisible(compositeField)" class="row"> -->
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.scss b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.scss
index 69cfa2224..076a86572 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.scss
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.scss
@@ -1,25 +1,36 @@
 .dynamic-form-section {
-  .expansion-panel {
-    // background-color: #eeeeee54;
-    background-color: white;
-    margin-bottom: 1em;
-  }
-  .addOneFieldButton {
-    margin-top: -15px;
-    margin-left: -11px;
-  }
+	.expansion-panel {
+		// background-color: #eeeeee54;
+		background-color: white;
+		margin-bottom: 1em;
+	}
+	.addOneFieldButton {
+		margin-top: -15px;
+		margin-left: -11px;
+	}
+	.panel-title,
+	.panel-desc {
+		text-align: left;
+		font-weight: 700;
+		font-size: 16px;
+		letter-spacing: 0px;
+		color: #212121;
+		opacity: 0.81;
+		margin-top: 1.625rem;
+		margin-bottom: 0.625rem;
+	}
 }
 .styleBorder {
-  border: 0.2em solid lightgray;
-  border-radius: 0.5em;
-  margin-bottom: 0.5em;
+	border: 0.2em solid lightgray;
+	border-radius: 0.5em;
+	margin-bottom: 0.5em;
 }
 .mat-expansion-panel-header-description {
-  padding-bottom: 18px;
-  color: black;
+	padding-bottom: 18px;
+	color: black;
 }
 
 ::ng-deep .mat-expansion-panel-header {
-  height: auto !important;
-  min-height: 48px;
+	height: auto !important;
+	min-height: 48px;
 }
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 4ca60d008..b91593ca0 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
@@ -4,9 +4,7 @@
 	<!-- <a [href]="_rootUrl + '#' + link.id" -->
 	<div class="scroll-container">
 		<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 && link.type !== 'span'" class="link-name"><span [class.selected]="link.selected && isActive">{{link.name}}</span></span>
-			<span *ngIf="link.show && link.type === 'span'" class="link-name"><span [class.selected]="(link.selected && isActive)">{{this.getIndex(link) + 1}}. {{link.name}}</span></span>
-			<!-- {{link.name}} -->
+			<span *ngIf="link.show" class="link-name"><span [class.selected]="link.selected && isActive">{{link.name}}</span></span>
 		</span>
 		<!-- </nav> -->
 	</div>
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 fe88a9b5f..b346518fa 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
@@ -61,9 +61,9 @@ span {
   opacity: 1 !important;
 }
 
-.docs-level-mat-expansion-panel {
-  margin-left: 12px;
-}
+// .docs-level-mat-expansion-panel {
+//   margin-left: 12px;
+// }
 
 .docs-level-h5 {
   margin-left: 24px;
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 1c53596d9..9025251c0 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
@@ -65,7 +65,7 @@ export class TableOfContents extends BaseComponent implements OnInit {
 					for (const header of headers) {
 						let name;
 						let id;
-						if (header.classList.contains('toc-page-header')) {
+						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];
@@ -76,7 +76,8 @@ export class TableOfContents extends BaseComponent implements OnInit {
 							id = header.id;
 							page = header.id.split('.')[1];
 							section = header.id;
-							show = false;
+							if (header.id.split('.')[4]) { show = false; }
+							else { show = true; }
 						} else if (header.classList.contains('toc-copositeField-header')) {
 							name = (header.childNodes[0]).nodeValue.trim().replace(/^link/, '');
 							id = header.id;
@@ -122,25 +123,28 @@ export class TableOfContents extends BaseComponent implements OnInit {
 	}
 
 	toggle(headerLink: Link) {
-		const page = +headerLink.id.split("_", 2)[1];
+		const headerPage = +headerLink.name.split(" ",1);
 		let innerPage;
 		for (const link of this.links) {
 			link.selected = false;
+			console.log(link);
 			if (link.type === 'mat-expansion-panel') {
-				innerPage = +link.name.split(" ",1)[0];
+				innerPage = +link.name.split(".",1)[0];
+				if(isNaN(innerPage)) { innerPage = +link.name.split(" ",1) }
 			} else if (link.type === 'h5') {
 			    innerPage = +link.name.split(".",1)[0];
 			}
-			if (page + 1 === innerPage && link.type !== 'span') {
+			console.log('innerPage ', innerPage)
+			if (headerPage === innerPage && (link.type !== 'mat-expansion-panel' || (link.type === 'mat-expansion-panel' && link.id.split(".")[4]))) {
 				link.show = !link.show;
 			}
 		}
 		headerLink.selected = true;
 	}
 
-	getIndex(link: Link): number {
-		return +link.id.split("_", 2)[1];
-	}
+	// getIndex(link: Link): number {
+	// 	return +link.id.split("_", 2)[1];
+	// }
 
 }