From 9596fd159556880e90f033f2cf6d691a0bffc822 Mon Sep 17 00:00:00 2001
From: apapachristou <apapachristou@cite.gr>
Date: Wed, 16 Sep 2020 18:19:29 +0300
Subject: [PATCH] New seperate dataset editor (1st commit)

---
 .../dataset-editor.component.html             |  75 ++-
 .../dataset-editor.component.scss             | 118 +++-
 .../dataset-editor.component.ts               |  55 +-
 .../dataset-wizard.component.html             |  87 ++-
 .../dataset-wizard.component.scss             | 606 ++++++++++++++----
 .../dataset-wizard.component.ts               | 194 +++---
 .../src/app/ui/dataset/dataset.module.ts      |   4 +-
 .../app/ui/dmp/clone/dmp-clone.component.html |  27 +-
 .../app/ui/dmp/clone/dmp-clone.component.ts   |  60 +-
 .../ui/dmp/editor/dmp-editor.component.html   |  42 +-
 .../ui/dmp/editor/dmp-editor.component.scss   |  43 +-
 .../app/ui/dmp/editor/dmp-editor.component.ts |   4 +
 .../dataset-description-form.component.html   |   9 +-
 .../dataset-description-form.component.scss   |  15 +-
 .../table-of-contents.html                    |   8 +-
 .../table-of-contents.scss                    |  82 ++-
 .../table-of-contents.ts                      |  39 +-
 dmp-frontend/src/assets/i18n/de.json          |  47 +-
 dmp-frontend/src/assets/i18n/en.json          |   8 +-
 dmp-frontend/src/assets/i18n/es.json          |  19 +-
 dmp-frontend/src/assets/i18n/gr.json          |  19 +-
 dmp-frontend/src/assets/i18n/tr.json          |  19 +-
 22 files changed, 1282 insertions(+), 298 deletions(-)

diff --git a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.html b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.html
index b698833ae..f8e3644f5 100644
--- a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.html
+++ b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.html
@@ -1,4 +1,75 @@
-<div class="container-fluid">
+<form class="dataset-editor" *ngIf="formGroup" [formGroup]="formGroup">
+	<div class="col-12 intro">
+		{{'DATASET-EDITOR.TITLE.INTRO' | translate}}
+	</div>
+	<div class="col-12 card">
+		<!-- Title Field -->
+		<div class="row">
+			<div class="col-12">
+				<div class="heading">1.1 {{'DATASET-EDITOR.FIELDS.TITLE' | translate}}*</div>
+				<span class="hint">{{'DATASET-EDITOR.HINT.TITLE' | translate}}</span>
+				<a class="dmp-link dmp-tour-{{ formGroup.get('id').value + 1 }}" (click)="restartTour(formGroup.get('id').value + 1)">{{'DATASET-EDITOR.FIELDS.DMP' | translate}}</a>
+				<span class="hint">{{'DATASET-EDITOR.HINT.TITLE-REST' | translate}}</span>
+				<div class="title-form">
+					<mat-form-field>
+						<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.TITLE' | translate}}" type="text" name="label" formControlName="label" required>
+						<mat-error *ngIf="formGroup.get('label').hasError('backendError')"> {{formGroup.get('label').getError('backendError').message}}</mat-error>
+						<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+					</mat-form-field>
+				</div>
+			</div>
+		</div>
+		<!-- Description field -->
+		<div class="row">
+			<div class="col-12">
+				<div class="heading">1.2 {{'DATASET-EDITOR.FIELDS.DESCRIPTION' | translate}}</div>
+				<span class="hint">{{'DATASET-EDITOR.HINT.TITLE' | translate}}</span>
+				<a class="dmp-link dmp-tour-{{ formGroup.get('id').value + 2 }}" (click)="restartTour(formGroup.get('id').value + 2)">{{'DATASET-EDITOR.FIELDS.DMP' | translate}}</a>
+				<span class="hint">{{'DATASET-EDITOR.HINT.TITLE-REST' | translate}}</span>
+				<div class="description-form">
+					<mat-form-field>
+						<textarea rows="3" matInput class="description-area" placeholder="{{'DMP-EDITOR.PLACEHOLDER.DESCRIPTION' | translate}}" formControlName="description"></textarea>
+						<mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{formGroup.get('description').getError('backendError').message}}</mat-error>
+						<mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+					</mat-form-field>
+				</div>
+			</div>
+		</div>
+		<!-- Uri field -->
+		<div class="row">
+			<div class="col-12">
+				<div class="heading">1.3 {{'DATASET-EDITOR.FIELDS.EXTERNAL-LINK' | translate}}</div>
+				<span class="hint">{{'DATASET-EDITOR.HINT.TITLE' | translate}}</span><a class="dmp-link" target="_blank" [routerLink]="['/overview/' + dmpId]">{{'DATASET-EDITOR.FIELDS.DMP' | translate}}</a><span class="hint">{{'DATASET-EDITOR.HINT.TITLE-REST' | translate}}</span>
+				<div class="uri-form">
+					<mat-form-field>
+						<input matInput placeholder="{{'DATASET-EDITOR.PLACEHOLDER.EXTERNAL-LINK' | translate}}" type="text" name="uri" formControlName="uri">
+						<mat-error *ngIf="formGroup.get('uri').hasError('backendError')">{{formGroup.get('uri').getError('backendError').message}}</mat-error>
+						<mat-error *ngIf="formGroup.get('uri').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+					</mat-form-field>
+				</div>
+			</div>
+		</div>
+		<!-- External Fields -->
+		<app-dataset-external-references-editor-component (formChanged)="onFormChanged($event)" [formGroup]="formGroup" [viewOnly]="viewOnly"></app-dataset-external-references-editor-component>
+		<!-- Template Field -->
+		<div class="heading">1.5 {{'DATASET-EDITOR.FIELDS.PROFILE' | translate}}*</div>
+		<div class="profile-form">
+			<mat-form-field>
+				<mat-select placeholder="{{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" [required]="true" [compareWith]="compareWith" [formControl]="formGroup.get('profile')">
+					<mat-option *ngFor="let profile of availableProfiles" [value]="profile">
+						{{profile.label}}
+					</mat-option>
+				</mat-select>
+				<mat-error *ngIf="formGroup.get('profile').hasError('backendError')">{{formGroup.get('profile').getError('backendError').message}}</mat-error>
+				<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+			</mat-form-field>
+		</div>
+	</div>
+</form>
+
+
+
+<!-- <div class="container-fluid">
 	<div class="row dataset-editor" [formGroup]="formGroup">
 		<div class="col-12">
 			<div class="row">
@@ -24,4 +95,4 @@
 			</div>
 		</div>
 	</div>
-</div>
+</div> -->
diff --git a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.scss b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.scss
index 4d7d33f4d..3a40b45e8 100644
--- a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.scss
+++ b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.scss
@@ -1 +1,117 @@
-.dataset-editor {}
+.dataset-editor {
+  .intro {
+    text-align: left;
+    font-weight: 400;
+    letter-spacing: 0px;
+    color: #212121;
+    opacity: 1;
+    margin: 3rem 0rem 3rem 0rem;
+  }
+
+  .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: 2.125rem;
+  }
+
+  .title-form,
+  .description-form,
+  .profile-form {
+    text-align: left;
+    font-weight: 400;
+    font-size: 16px;
+    letter-spacing: 0.15px;
+    color: #7d7d7d;
+    opacity: 1;
+    margin-bottom: 1rem;
+  }
+
+  //   textarea::placeholder {
+  //     font-style: oblique;
+  //   }
+
+  .input-btn {
+    border: none;
+    color: #aaaaaa;
+    background-color: #ffffff00;
+    cursor: pointer;
+  }
+
+  .input-btn :hover {
+    color: #00b29f !important;
+  }
+
+  .dmp-link {
+    color: #3fafac;
+    font-weight: 400;
+    font-size: 16px;
+    cursor: pointer;
+  }
+
+  .dmp-link:hover {
+    text-decoration: underline;
+  }
+}
+
+::ng-deep .title-form .mat-form-field-appearance-outline .mat-form-field-outline {
+  background: #fafafa !important;
+}
+
+::ng-deep .description-form .mat-form-field-appearance-outline .mat-form-field-outline {
+  background: #fafafa !important;
+}
+
+::ng-deep .uri-form .mat-form-field-appearance-outline .mat-form-field-outline {
+  background: #fafafa !important;
+}
+
+::ng-deep .tags-form .mat-form-field-appearance-outline .mat-form-field-outline {
+  background: #fafafa !important;
+}
+
+::ng-deep .profile-form .mat-form-field-appearance-outline .mat-form-field-outline {
+  background: #fafafa !important;
+}
+
+
+
+
+::ng-deep .title-form .mat-form-field-appearance-outline .mat-form-field-infix {
+  font-size: 1rem;
+  padding: 0.6em 0 1em 0 !important;
+}
+
+::ng-deep .description-form .mat-form-field-appearance-outline .mat-form-field-infix {
+  //   font-size: 1rem;
+  padding: 0.6em 0 1em 0 !important;
+}
+
+::ng-deep .uri-form .mat-form-field-appearance-outline .mat-form-field-infix {
+  font-size: 1rem;
+  padding: 0.6em 0 1em 0 !important;
+}
+
+::ng-deep .tags-form .mat-form-field-appearance-outline .mat-form-field-infix {
+  font-size: 1rem;
+  padding: 0.6em 0 1em 0 !important;
+}
+
+::ng-deep .profile-form .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/dataset/dataset-wizard/dataset-editor/dataset-editor.component.ts b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.ts
index 725fda5c7..1b8577b8d 100644
--- a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.ts
+++ b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.ts
@@ -1,7 +1,11 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
 import { BaseComponent } from '@common/base/base.component';
+import { GuidedTourService } from '@app/library/guided-tour/guided-tour.service';
+import { GuidedTour, Orientation } from '@app/library/guided-tour/guided-tour.constants';
+import { TranslateService } from '@ngx-translate/core';
+import { DatasetProfileModel } from '@app/core/model/dataset/dataset-profile';
 
 @Component({
 	selector: 'app-dataset-editor-component',
@@ -11,14 +15,63 @@ import { BaseComponent } from '@common/base/base.component';
 export class DatasetEditorComponent extends BaseComponent {
 
 	@Input() formGroup: FormGroup = null;
+	@Input() availableProfiles: DatasetProfileModel[];
+	@Input() dmpId: string;
+	@Output() formChanged: EventEmitter<any> = new EventEmitter();
 	showUri: boolean = false;
+	dmpText: string;
+	viewOnly = false;
 
 	constructor(
 		private router: Router,
+		private guidedTourService: GuidedTourService,
+		private language: TranslateService
 	) { super(); }
 
+	public dashboardTourDmp: GuidedTour = {
+		tourId: 'only-dmp-tour',
+		useOrb: true,
+		steps: [
+			{
+				title: this.dmpText,
+				content: 'Step 1',
+				orientation: Orientation.Bottom,
+				highlightPadding: 3,
+				isStepUnique: true,
+				customTopOffset: 8
+			}
+		]
+	};
+
+	getDmpText(): string {
+		return this.language.instant('DMP-LISTING.TEXT-INFO') + '\n\n' +
+			this.language.instant('DMP-LISTING.TEXT-INFO-QUESTION') + ' ' +
+			this.language.instant('DMP-LISTING.LINK-ZENODO') + ' ' +
+			this.language.instant('DMP-LISTING.GET-IDEA');
+	}
+
+	setDashboardTourDmp(label: string): void {
+		this.dashboardTourDmp.steps[0].title = this.getDmpText();
+		this.dashboardTourDmp.steps[0].selector = '.dmp-tour-' + label;
+	}
+
+	public restartTour(label: string): void {
+		this.setDashboardTourDmp(label);
+		// console.log(this.dashboardTourDmp.steps[0].selector);
+		this.guidedTourService.startTour(this.dashboardTourDmp);
+
+	}
 
 	public cancel(): void {
 		this.router.navigate(['/datasets']);
 	}
+
+	public compareWith(object1: any, object2: any) {
+		return object1 && object2 && object1.id === object2.id;
+	}
+
+
+	onFormChanged(event) {
+		this.formChanged.emit(event);
+	}
 }
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 e1cb11c34..c709ca791 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
@@ -1,4 +1,88 @@
 <div class="main-content">
+	<div class="container-fluid dataset-wizard">
+		<form *ngIf="formGroup" [formGroup]="formGroup">
+			<!-- <form *ngIf="formGroup" [formGroup]="formGroup" (ngSubmit)="formSubmit()"> -->
+			<!-- Dataset Header -->
+			<div class="fixed-editor-header">
+				<div class="card dataset-editor-header">
+					<div class="col">
+						<div class="row">
+							<div class="col info">
+								<div class="dataset-title">{{'DMP-EDITOR.TITLE.ADD-DATASET' | translate}}</div>
+								<div class="dataset-subtitle">{{ formGroup.get('label').value }} <span *ngIf="isDirty()" class="dataset-changes">({{'DMP-EDITOR.CHANGES' | translate}})</span></div>
+								<div class="d-flex flex-direction-row dmp-info">
+									<div class="col-auto dataset-to-dmp">{{'DATASET-LISTING.TOOLTIP.TO-DMP' | translate}}</div>
+									<div class="col-auto dmp-title p-0">:&nbsp;{{ formGroup.get('dmp').value.label }}</div>
+									<div class="col-auto d-flex align-items-center">
+										<a [routerLink]="['/overview/' + formGroup.get('dmp').value.id]" target="_blank" class="pointer open-in-new-icon">
+											<mat-icon class="size-18">open_in_new</mat-icon>
+										</a>
+									</div>
+								</div>
+							</div>
+							<div class="row">
+								<div class="col-auto d-flex align-items-center p-0">
+									<button *ngIf="isDirty()" type="button" mat-raised-button class="dataset-discard-btn" (click)="discardChanges()">
+										{{'DMP-EDITOR.ACTIONS.DISCARD' | translate}}
+									</button>
+								</div>
+								<div class="col-auto d-flex align-items-center">
+									<button *ngIf="!lockStatus" mat-raised-button class="dataset-save-btn mr-2" type="submit">{{ 'DATASET-WIZARD.ACTIONS.SAVE' | translate }}</button>
+									<button *ngIf="!lockStatus" mat-raised-button class="dataset-save-btn mr-2" type="submit">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-ADD' | translate }}</button>
+									<button *ngIf="lockStatus" mat-raised-button disabled class="dataset-save-btn cursor-default" type="button">{{ 'DMP-OVERVIEW.LOCKED' | translate}}</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="row editor-content">
+				<div class="col-auto dataset-stepper">
+					<div class="stepper-back d-flex flex-direction-row">
+						<div class="d-flex align-items-center pr-2 back-to-dmp" (click)="backToDmp(formGroup.get('dmp').value.id)">
+							<mat-icon class="back-icon pointer">chevron_left</mat-icon>
+							<span class="pointer">{{'DATASET-WIZARD.ACTIONS.BACK-TO' | translate}}</span>
+						</div>
+						<div class="col-auto dmp-label ml-3">{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}</div>
+					</div>
+					<div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
+					<div class="stepper-options">
+						<div class="col stepper-list">
+							<div (click)="changeStep(0)" class="main-info" [ngClass]="{'active': this.step === 0}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (5)</div>
+							<div class="row toc-pane-container" #boundary (click)="changeStep(1)">
+								<div #spacer></div>
+								<table-of-contents class="toc-pane-container" [boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0"  stickyThing (stepFound)="onStepFound($event)"></table-of-contents>
+							</div>
+						</div>
+					</div>
+					<div class="stepper-actions">
+						<div mat-raised-button type="button" class="col-auto previous stepper-btn mr-2 ml-auto" [ngClass]="{'previous-disabled': this.step === 0}" (click)="previousStep()">
+							<span class="material-icons">chevron_left</span>
+							<div>{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}</div>
+						</div>
+						<div *ngIf="this.step < 1" mat-raised-button type="button" class="col-auto stepper-btn dataset-next ml-auto" (click)="nextStep()">
+							<span class="material-icons">chevron_right</span>
+							<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
+						</div>
+						<div *ngIf="this.step === 1" mat-raised-button type="button" class="col-auto add-dataset-option ml-auto">
+							<a class="add-dataset-btn stepper-btn" (click)="addDataset()" target="_blank">
+								<mat-icon>add</mat-icon>{{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}
+							</a>
+						</div>
+					</div>
+				</div>
+				<div class="col-auto form">
+					<app-dataset-description-form [hidden]="this.step === 0" *ngIf="formGroup && datasetWizardModel && datasetWizardModel.datasetProfileDefinition" [form]="this.formGroup.get('datasetProfileDefinition')" [visibilityRules]="datasetWizardModel.datasetProfileDefinition.rules" [datasetProfileId]="formGroup.get('profile').value" [linkToScroll]="linkToScroll"></app-dataset-description-form>
+					<app-dataset-editor-component [hidden]="this.step !== 0" [formGroup]="formGroup" [dmpId]="formGroup.get('dmp').value.id" [availableProfiles]="formGroup.get('dmp').value.profiles"></app-dataset-editor-component>
+				</div>
+			</div>
+		</form>
+	</div>
+</div>
+
+
+
+<!-- <div class="main-content">
 	<div class="container-fluid">
 		<div class="card dataset-wizard">
 			<div class="row card-header card-header-plain d-flex">
@@ -65,7 +149,6 @@
 								</mat-form-field>
 								<mat-form-field class="col-md-6">
 									<mat-select placeholder=" {{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" [required]="true" formControlName="profile">
-										<!-- <mat-option *ngFor="let profile of availableProfiles" [value]="profile.id"> -->
 										<mat-option *ngFor="let profile of availableProfiles" [value]="profile">
 											{{profile.label}}
 										</mat-option>
@@ -123,4 +206,4 @@
 			</form>
 		</div>
 	</div>
-</div>
+</div> -->
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 49e23b07c..f4fc2cc1f 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
@@ -1,155 +1,513 @@
-@media (max-width: 768px) {
-	.main-content {
-		padding: 30px 0px;
-	}
-
-	::ng-deep .mat-expansion-panel-header {
-		min-height: 48px;
-		height: auto !important;
-	}
-
-	::ng-deep .mat-expansion-panel-body {
-		padding: 0 0px 16px !important;
-	}
-
-	::ng-deep .mat-vertical-content {
-		padding: 0 14px 24px 14px !important;
-	}
+.main-content {
+  height: 100vh !important;
 }
 
 .dataset-wizard {
-	.toc-pane-container {
-		&.is-sticky~.nav-spacer {
-			height: 500px; // the container size }
-			// height: calc(100vh - 100px); // the container size }
-		}
-	}
+  .toc-pane-container {
+    &.is-sticky ~ .nav-spacer {
+      height: 500px; // the container size }
+      // height: calc(100vh - 100px); // the container size }
+    }
+  }
 
-	.step-container {
-		margin-top: 1em;
-	}
+  .step-container {
+    margin-top: 1em;
+  }
 
-	.external-item-card {
-		margin-top: 1em;
-	}
+  .external-item-card {
+    margin-top: 1em;
+  }
 
-	.external-item-action-row,
-	.description-action-row {
-		margin-top: 1em;
-	}
+  .external-item-action-row,
+  .description-action-row {
+    margin-top: 1em;
+  }
 
-	.deleteButton,
-	.reverseButton {
-		margin-top: 15px;
-		margin-bottom: 15px;
-		margin-right: 15px;
-		text-transform: uppercase;
-	}
+  .deleteButton,
+  .reverseButton {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    margin-right: 15px;
+    text-transform: uppercase;
+  }
 
-	.cancelButton {
-		margin-top: 15px;
-		margin-bottom: 15px;
-		margin-right: 15px;
-		text-transform: uppercase;
-	}
+  .cancelButton {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    margin-right: 15px;
+    text-transform: uppercase;
+  }
 
-	.saveButton {
-		margin-top: 15px;
-		margin-bottom: 15px;
-		margin-right: 15px;
-		text-transform: uppercase;
-	}
+  .saveButton {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    margin-right: 15px;
+    text-transform: uppercase;
+  }
 
-	.saveAndFinalizeButton {
-		margin-top: 15px;
-		margin-bottom: 15px;
-		margin-right: 15px;
-	}
+  .saveAndFinalizeButton {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    margin-right: 15px;
+  }
 
-	.finalizeButton {
-		margin-top: 15px;
-		margin-bottom: 15px;
-		margin-right: 15px;
-		text-transform: uppercase;
-	}
+  .finalizeButton {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    margin-right: 15px;
+    text-transform: uppercase;
+  }
 
-	.export-btn {
-		padding-right: 6px;
-	}
+  .export-btn {
+    padding-right: 6px;
+  }
 
-	.downloadPDF {
-		margin-top: 15px;
-		margin-bottom: 15px;
-		margin-right: 15px;
-	}
+  .downloadPDF {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    margin-right: 15px;
+  }
 
-	.downloadXML {
-		margin-top: 15px;
-		margin-bottom: 15px;
-		margin-right: 15px;
-	}
+  .downloadXML {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    margin-right: 15px;
+  }
 
-	.downloadDOCX {
-		margin-top: 15px;
-		margin-bottom: 15px;
-		margin-right: 15px;
-	}
+  .downloadDOCX {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    margin-right: 15px;
+  }
 
-	.updateDatasetProfile {
-		margin-top: 15px;
-		margin-bottom: 15px;
-		margin-right: 15px;
-	}
+  .updateDatasetProfile {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    margin-right: 15px;
+  }
 
-	.actions {
-		display: flex;
-		justify-content: flex-end;
-	}
+  .actions {
+    display: flex;
+    justify-content: flex-end;
+  }
 
-	//   .actions > button {
-	//     background-color: #0070c0;
-	//     color: #ffffff;
-	//     text-transform: uppercase;
-	//   }
+  //   .actions > button {
+  //     background-color: #0070c0;
+  //     color: #ffffff;
+  //     text-transform: uppercase;
+  //   }
 
-	.more-horiz {
-		font-size: 28px;
-		color: #aaaaaa;
-	}
+  .more-horiz {
+    font-size: 28px;
+    color: #aaaaaa;
+  }
 
-	.more-icon :hover {
-		color: #00b29f;
-	}
+  .more-icon :hover {
+    color: #00b29f;
+  }
 
-	.new-dataset {
-		height: 3.5em;
-	}
+  .new-dataset {
+    height: 3.5em;
+  }
+
+  .fixed-editor-header {
+    //   position: fixed;
+    //   width: calc(100% - 310px);
+    z-index: 3;
+    background-color: whitesmoke;
+  }
+
+  .dataset-editor-header {
+    height: 113px;
+    background: var(--unnamed-color-129d99) 0% 0% no-repeat padding-box;
+    background: #f7dd72 0% 0% no-repeat padding-box;
+    box-shadow: 0px 3px 6px #00000029;
+    padding: 0.6rem;
+    margin: 30px 0px 0px 0px;
+    border-radius: 4px;
+    opacity: 1;
+
+    .info {
+      flex: 2;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .dataset-title {
+    text-align: left;
+    letter-spacing: 0px;
+    color: #212121;
+    opacity: 0.9;
+    font-size: 14px;
+    font-weight: 400;
+  }
+
+  .subtitle {
+    text-align: left;
+    color: #ffffff;
+    font-weight: 700;
+    font-size: 16px;
+    opacity: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .dataset-subtitle {
+    text-align: left;
+    letter-spacing: 0px;
+    color: #212121;
+    font-weight: 700;
+    font-size: 16px;
+    opacity: 0.9;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .discard-btn {
+    background: transparent;
+    border: 1px solid #ffffff;
+    color: white;
+    border-radius: 30px;
+    opacity: 1;
+    width: 110px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .save-btn {
+    background: #ffffff 0% 0% no-repeat padding-box;
+    border-radius: 30px;
+    opacity: 1;
+    width: auto;
+    min-width: 110px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 700;
+    color: #129d99;
+    cursor: pointer;
+  }
+
+  .dataset-discard-btn {
+    border: 1px solid #212121;
+    border-radius: 30px;
+    opacity: 1;
+    background-color: transparent;
+    font-weight: 700;
+    width: 110px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .dataset-save-btn {
+    background: #ffffff 0% 0% no-repeat padding-box;
+    border-radius: 30px;
+    opacity: 1;
+    width: auto;
+    min-width: 110px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .dataset-to-dmp {
+    display: flex;
+    align-items: center;
+    padding: 0;
+    text-align: left;
+    font-size: 1rem;
+    font-weight: 700;
+    color: #129d99;
+    line-height: 25px;
+  }
+
+  .dmp-info {
+    padding-top: 0.75rem;
+  }
+
+  .dmp-label {
+    width: 67px;
+    height: 37px;
+    background: #129d99 0% 0% no-repeat padding-box;
+    color: white;
+    border-radius: 4px;
+    opacity: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .dmp-title {
+    text-align: left;
+    font-weight: 700;
+    font-family: "Roboto", sans-serif;
+    font-size: 1rem;
+    color: #212121;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: 25px;
+  }
+
+  .open-in-new-icon {
+    color: #434343;
+    opacity: 0.75;
+  }
+  .open-in-new-icon:hover {
+    color: #129d99;
+  }
+
+  .dataset-stepper {
+    position: fixed;
+    //   height: 100%;
+    display: flex;
+	flex-direction: column;
+	height: calc(100vh - 246px);
+  }
+
+  .stepper-options {
+	height: calc(100vh - 520px);
+    overflow-y: auto;
+    .main-info {
+      padding-left: .2rem;
+      color: #21212194;
+      font-weight: 400;
+      cursor: pointer;
+    }
+    .main-info:hover {
+      background-color: #ececec;
+      border-radius: 6px;
+    }
+  }
+
+  .stepper-back {
+    margin-top: 3.125rem;
+    padding-left: 0.5rem;
+    font-size: 0.875rem;
+    letter-spacing: 0px;
+    color: #848484;
+    opacity: 1;
+  }
+
+  .stepper-title {
+    text-align: left;
+    font-weight: 300;
+    font-size: 20px;
+    letter-spacing: 0px;
+    color: #212121;
+    opacity: 0.6;
+    margin: 2.875rem 0rem 2.25rem 0rem;
+    padding-left: 1rem;
+  }
+
+  .stepper-list {
+    .toc-pane-container {
+      span {
+        text-align: left;
+        font-weight: 400;
+        letter-spacing: 0px;
+        color: #212121;
+        padding: 0.3rem 0.1rem;
+        opacity: 0.6;
+        cursor: pointer;
+        max-width: 290px;
+      }
+    }
+  }
+
+  .stepper-list span:hover {
+    background-color: #ececec;
+    border-radius: 6px;
+  }
+
+  .stepper-list .active {
+    color: #212121;
+    font-weight: 700;
+    opacity: 1;
+  }
+
+  .stepper-list .active-dataset {
+    color: #212121;
+    font-weight: 700;
+    opacity: 1;
+    .label {
+      width: 100%;
+      height: 27px;
+      line-height: 27px;
+      background-color: #f7dd72;
+      color: #5d5d5d;
+      border-radius: 4px;
+      font-weight: 400;
+      font-size: 14px;
+      justify-content: left;
+      display: flex;
+      align-items: center;
+      padding-left: 0.625rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: inline-block;
+    }
+  }
+
+  .back-to-dmp:hover {
+    background: #ececec;
+    border-radius: 6px;
+  }
+
+  .back-icon {
+    display: inline-flex;
+    vertical-align: middle;
+  }
+
+  .editor-content {
+    .form {
+      // position: relative;
+      // left: 362px;
+      // width: calc(100% - 366px);
+
+      position: relative;
+      left: 362px;
+      width: calc(100% - 366px);
+      overflow-y: auto;
+      height: calc(100vh - 218px);
+    }
+  }
+  form {
+    height: calc(100vh - 124px);
+  }
+
+  .stepper-actions {
+	display: flex;
+	padding-left: 1rem;
+	margin-top: auto;
+	margin-bottom: 0.5rem;
+	//   margin-top: 5rem;
+	//   flex-grow: 8;
+  }
+
+  .stepper-btn {
+	border-radius: 30px;
+	opacity: 1;
+	width: 154px;
+	height: 40px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 14px;
+  }
+
+  .previous {
+	color: #212121;
+	background: #f5f5f5 0% 0% no-repeat padding-box;
+	box-shadow: 0px 3px 6px #1e202029;
+	border: 2px solid #212121;
+	font-weight: 500;
+	cursor: pointer;
+  }
+
+  .add-dataset-btn {
+	color: #212121;
+	background: #f7dd72 0% 0% no-repeat padding-box;
+	box-shadow: 0px 3px 6px #1e202029;
+	font-weight: 500;
+	cursor: pointer;
+  }
+
+  .next {
+	background: #129d99 0% 0% no-repeat padding-box;
+	color: white;
+	box-shadow: 0px 3px 6px #1e202029;
+	font-weight: 400;
+	cursor: pointer;
+  }
+
+  .dataset-next {
+	background: #f7dd72 0% 0% no-repeat padding-box;
+	color: #212121;
+	box-shadow: 0px 3px 6px #1e202029;
+	font-weight: 700;
+	cursor: pointer;
+  }
+
+  .previous-disabled,
+  .add-dataset-btn-disabled {
+	border: 1px solid #b5b5b5;
+	color: #b5b5b5 !important;
+	cursor: auto !important;
+  }
+
+  .next-disabled {
+	background: #cbcbcb 0% 0% no-repeat padding-box;
+	box-shadow: 0px 3px 6px #1e202029;
+	color: white;
+	cursor: auto !important;
+  }
+}
+
+mat-icon.size-18 {
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+  font-size: 18px;
 }
 
 .menu-item {
-	width: 248px;
-}
-
-::ng-deep .mat-tab-labels {
-	justify-content: space-between;
-}
-
-::ng-deep .mat-tab-label-content {
-	text-transform: uppercase;
-}
-
-::ng-deep .mat-ink-bar {
-	background-color: #00b29f !important;
-	//   background-color: #0070c0 !important;
+  width: 248px;
 }
 
 .toc-pane-container {
-	&.is-sticky~.nav-spacer {
-		height: 500px; // the container size }
-		// height: calc(100vh - 100px); // the container size }
-	}
+  &.is-sticky ~ .nav-spacer {
+    height: 500px; // the container size }
+    // height: calc(100vh - 100px); // the container size }
+  }
 }
 
 .is-sticky {
-	margin-top: 70px !important;
+  margin-top: 70px !important;
 }
+
+// ::ng-deep .mat-tab-labels {
+//   justify-content: space-between;
+// }
+
+// ::ng-deep .mat-tab-label-content {
+//   text-transform: uppercase;
+// }
+
+// ::ng-deep .mat-ink-bar {
+//   background-color: #00b29f !important;
+//   //   background-color: #0070c0 !important;
+// }
+
+// @media (max-width: 768px) {
+//   .main-content {
+//     padding: 30px 0px;
+//   }
+
+//   ::ng-deep .mat-expansion-panel-header {
+//     min-height: 48px;
+//     height: auto !important;
+//   }
+
+//   ::ng-deep .mat-expansion-panel-body {
+//     padding: 0 0px 16px !important;
+//   }
+
+//   ::ng-deep .mat-vertical-content {
+//     padding: 0 14px 24px 14px !important;
+//   }
+// }
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 cbf4d22a8..c072f84e0 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
@@ -72,6 +72,10 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
 	lock: LockModel;
 	lockStatus: Boolean;
 
+	step: number = 0;
+	stepOffset: number = 1;
+	maxStep: number = 1;
+
 	constructor(
 		private datasetWizardService: DatasetWizardService,
 		private route: ActivatedRoute,
@@ -128,40 +132,40 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
 				.subscribe(data => {
 					this.lockService.checkLockStatus(data.id).pipe(takeUntil(this._destroyed)).subscribe(lockStatus => {
 						this.lockStatus = lockStatus;
-					this.datasetWizardModel = new DatasetWizardEditorModel().fromModel(data);
-					this.needsUpdate();
-					this.breadCrumbs = observableOf([
-						{
-							parentComponentName: null,
-							label: this.datasetWizardModel.label,
-							url: '/datasets/edit/' + this.datasetWizardModel.id,
-							notFoundResolver: [
-								{
-									parentComponentName: null,
-									label: this.language.instant('NAV-BAR.MY-DATASET-DESCRIPTIONS').toUpperCase(),
-									url: '/datasets'
-								},
-							]
-						}]);
-					this.formGroup = this.datasetWizardModel.buildForm();
-					this.editMode = this.datasetWizardModel.status === DatasetStatus.Draft;
-					if (this.datasetWizardModel.status === DatasetStatus.Finalized || lockStatus) {
-						this.formGroup.disable();
-						this.viewOnly = true;
-					}
-					if (!lockStatus && !isNullOrUndefined(this.authService.current())) {
-						this.lock = new LockModel(data.id, this.authService.current());
+						this.datasetWizardModel = new DatasetWizardEditorModel().fromModel(data);
+						this.needsUpdate();
+						this.breadCrumbs = observableOf([
+							{
+								parentComponentName: null,
+								label: this.datasetWizardModel.label,
+								url: '/datasets/edit/' + this.datasetWizardModel.id,
+								notFoundResolver: [
+									{
+										parentComponentName: null,
+										label: this.language.instant('NAV-BAR.MY-DATASET-DESCRIPTIONS').toUpperCase(),
+										url: '/datasets'
+									},
+								]
+							}]);
+						this.formGroup = this.datasetWizardModel.buildForm();
+						this.editMode = this.datasetWizardModel.status === DatasetStatus.Draft;
+						if (this.datasetWizardModel.status === DatasetStatus.Finalized || lockStatus) {
+							this.formGroup.disable();
+							this.viewOnly = true;
+						}
+						if (!lockStatus && !isNullOrUndefined(this.authService.current())) {
+							this.lock = new LockModel(data.id, this.authService.current());
 
-						this.lockService.createOrUpdate(this.lock).pipe(takeUntil(this._destroyed)).subscribe(async result => {
-							this.lock.id = Guid.parse(result);
-							interval(this.configurationService.lockInterval).pipe(takeUntil(this._destroyed)).subscribe(() => this.pumpLock());
-						});
-					}
-					// if (this.viewOnly) { this.formGroup.disable(); } // For future use, to make Dataset edit like DMP.
-					this.loadDatasetProfiles();
-					this.registerFormListeners();
-					// this.availableProfiles = this.datasetWizardModel.dmp.profiles;
-				})
+							this.lockService.createOrUpdate(this.lock).pipe(takeUntil(this._destroyed)).subscribe(async result => {
+								this.lock.id = Guid.parse(result);
+								interval(this.configurationService.lockInterval).pipe(takeUntil(this._destroyed)).subscribe(() => this.pumpLock());
+							});
+						}
+						// if (this.viewOnly) { this.formGroup.disable(); } // For future use, to make Dataset edit like DMP.
+						this.loadDatasetProfiles();
+						this.registerFormListeners();
+						// this.availableProfiles = this.datasetWizardModel.dmp.profiles;
+					})
 				},
 					error => {
 						switch (error.status) {
@@ -220,54 +224,54 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
 				.subscribe(data => {
 					this.lockService.checkLockStatus(data.id).pipe(takeUntil(this._destroyed)).subscribe(lockStatus => {
 						this.lockStatus = lockStatus;
-					this.datasetWizardModel = new DatasetWizardEditorModel().fromModel(data);
-					this.formGroup = this.datasetWizardModel.buildForm();
-					this.formGroup.get('id').setValue(null);
-					this.dmpService.getSingle(newDmpId).pipe(map(data => data as DmpModel))
-						.pipe(takeUntil(this._destroyed))
-						.subscribe(data => {
-							setTimeout(() => {
-								this.datasetWizardModel.dmp = data;
-								this.formGroup.get('dmp').setValue(this.datasetWizardModel.dmp);
+						this.datasetWizardModel = new DatasetWizardEditorModel().fromModel(data);
+						this.formGroup = this.datasetWizardModel.buildForm();
+						this.formGroup.get('id').setValue(null);
+						this.dmpService.getSingle(newDmpId).pipe(map(data => data as DmpModel))
+							.pipe(takeUntil(this._destroyed))
+							.subscribe(data => {
+								setTimeout(() => {
+									this.datasetWizardModel.dmp = data;
+									this.formGroup.get('dmp').setValue(this.datasetWizardModel.dmp);
 
-								this.loadDatasetProfiles();
-								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.loadDatasetProfiles();
+									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.editMode = this.datasetWizardModel.status === DatasetStatus.Draft;
-					if (this.datasetWizardModel.status === DatasetStatus.Finalized || lockStatus) {
-						this.formGroup.disable();
-						this.viewOnly = true;
-					}
-					if (!lockStatus && !isNullOrUndefined(this.authService.current())) {
-						this.lock = new LockModel(data.id, this.authService.current());
+						this.editMode = this.datasetWizardModel.status === DatasetStatus.Draft;
+						if (this.datasetWizardModel.status === DatasetStatus.Finalized || lockStatus) {
+							this.formGroup.disable();
+							this.viewOnly = true;
+						}
+						if (!lockStatus && !isNullOrUndefined(this.authService.current())) {
+							this.lock = new LockModel(data.id, this.authService.current());
 
-						this.lockService.createOrUpdate(this.lock).pipe(takeUntil(this._destroyed)).subscribe(async result => {
-							this.lock.id = Guid.parse(result);
-							interval(this.configurationService.lockInterval).pipe(takeUntil(this._destroyed)).subscribe(() => this.pumpLock());
-						});
-					}
-					// if (this.viewOnly) { this.formGroup.disable(); } // For future use, to make Dataset edit like DMP.
-					this.loadDatasetProfiles();
-					// this.availableProfiles = data.dmp.profiles;
-				})
+							this.lockService.createOrUpdate(this.lock).pipe(takeUntil(this._destroyed)).subscribe(async result => {
+								this.lock.id = Guid.parse(result);
+								interval(this.configurationService.lockInterval).pipe(takeUntil(this._destroyed)).subscribe(() => this.pumpLock());
+							});
+						}
+						// if (this.viewOnly) { this.formGroup.disable(); } // For future use, to make Dataset edit like DMP.
+						this.loadDatasetProfiles();
+						// this.availableProfiles = data.dmp.profiles;
+					})
 				});
 		} else if (this.publicId != null) {  // For Finalized -> Public Datasets
 			this.isNew = false;
@@ -766,12 +770,40 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
 
 	private pumpLock() {
 		this.lock.touchedAt = new Date();
-		this.lockService.createOrUpdate(this.lock).pipe(takeUntil(this._destroyed)).subscribe( async result => {
+		this.lockService.createOrUpdate(this.lock).pipe(takeUntil(this._destroyed)).subscribe(async result => {
 			if (!isNullOrUndefined(result)) {
-			 this.lock.id = Guid.parse(result);
+				this.lock.id = Guid.parse(result);
 			} else {
 				this.location.back();
 			}
-			});
+		});
+	}
+
+	public changeStep(index: number, dataset?: FormControl) {
+		this.step = index;
+	}
+
+	public nextStep() {
+		this.step = this.step < this.maxStep ? this.step + 1 : this.step;
+	}
+
+	public previousStep() {
+		this.step = this.step !== 0 ? this.step - 1 : this.step;
+	}
+
+	isDirty() {
+
+	}
+
+	discardChanges() {
+
+	}
+
+	addDataset() {
+
+	}
+
+	backToDmp(id: string) {
+		this.router.navigate(['/plans', 'edit', id]);
 	}
 }
diff --git a/dmp-frontend/src/app/ui/dataset/dataset.module.ts b/dmp-frontend/src/app/ui/dataset/dataset.module.ts
index 07b9901c4..31b150f11 100644
--- a/dmp-frontend/src/app/ui/dataset/dataset.module.ts
+++ b/dmp-frontend/src/app/ui/dataset/dataset.module.ts
@@ -26,6 +26,8 @@ import { DatasetCopyDialogModule } from './dataset-wizard/dataset-copy-dialogue/
 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';
 
 @NgModule({
 	imports: [
@@ -42,7 +44,7 @@ import { DmpEditorComponent } from '../dmp/editor/dmp-editor.component';
 		DatasetRoutingModule,
 		FormValidationErrorsDialogModule,
 		DatasetCopyDialogModule,
-		DatasetOverviewModule,
+		DatasetOverviewModule
 	],
 	declarations: [
 		DatasetListingComponent,
diff --git a/dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.html b/dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.html
index 01c1af085..49ed481f7 100644
--- a/dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.html
+++ b/dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.html
@@ -64,36 +64,47 @@
 						<ol class="stepper-list">
 							<li (click)="changeStep(0)" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (4)</li>
 							<li (click)="changeStep(1)" [ngClass]="{'active': this.step === 1}">{{'DMP-EDITOR.STEPPER.FUNDING-INFO' | translate}} (3)</li>
-							<li (click)="changeStep(2)" [ngClass]="{'active': this.step === 2}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}}</li>
-							<li *ngFor="let dataset of datasets.controls; let i = index" #selectedItems (click)="changeStep(i + stepsBeforeDatasets, dataset)" [ngClass]="{'active-dataset': this.step === i + stepsBeforeDatasets}">
+							<li (click)="changeStep(2)" [ngClass]="{'active': this.step === 2}">{{'DMP-EDITOR.STEPPER.LICENSE-INFO' | translate}} (6)</li>
+							<li (click)="changeStep(3)" [ngClass]="{'active': this.step === 3}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}}</li>
+							<li *ngFor="let dataset of datasets.controls; let i = index" #selectedItems (click)="editDataset(dataset.get('id').value)" [ngClass]="{'active-dataset': this.step === i + stepsBeforeDatasets}">
 								<div class="dataset-tag">{{'DMP-EDITOR.STEPPER.DATASET' | translate}}</div>
 								<span class="d-flex">
-									<div *ngIf="dataset.value.status === 1" class="finalized-label" ><mat-icon class="status-icon check-icon">check</mat-icon>{{'TYPES.DATASET-STATUS.FINALISED' | translate}}</div>
+									<div class="label" matTooltip="{{dataset.get('label').value}}">{{'DMP-EDITOR.STEPPER.DATASET' | translate}}: {{ dataset.get('label').value }}</div>
+									<mat-icon *ngIf="dataset.get('status').value !== 1" class="ml-2 mr-2 remove-dataset size-16" matTooltip="{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}" (click)="$event.stopPropagation(); removeDataset(dataset.get('id').value, i)">close</mat-icon>
+									<div *ngIf="dataset.value.status === 1" class="finalized-label">
+										<mat-icon class="status-icon check-icon">check</mat-icon>{{'TYPES.DATASET-STATUS.FINALISED' | translate}}
+									</div>
 									<!-- <mat-checkbox class="col-auto pl-0 pt-1" checked="true" [value]="dataset.value.id" color="accent" (change)="selectionChanged($event, dataset)">
 										Include in clone
 									</mat-checkbox> -->
 								</span>
-								<ul class="dataset-list">
+								<!-- <ul class="dataset-list">
 									<li [ngClass]="{'active': this.step === i + stepsBeforeDatasets}">{{ dataset.get('label').value }} (8)</li>
-								</ul>
+								</ul> -->
 							</li>
 						</ol>
 					</div>
 					<div class="stepper-actions">
-						<div mat-raised-button type="button" class="col-auto previous stepper-btn mr-2 ml-auto" [ngClass]="{'previous-disabled': this.step === 0}" (click)="previousStep()">
+						<div *ngIf="this.step < 3" mat-raised-button type="button" class="col-auto previous stepper-btn mr-2 ml-auto" [ngClass]="{'previous-disabled': this.step === 0}" (click)="previousStep()">
 							<span class="material-icons">chevron_left</span>
 							<div>{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}</div>
 						</div>
-						<div mat-raised-button type="button" class="col-auto stepper-btn ml-auto" [ngClass]="{ 'next-disabled': this.step === this.maxStep, 'next': this.step < stepsBeforeDatasets, 'dataset-next': this.step >= stepsBeforeDatasets }" (click)="nextStep()">
+						<div *ngIf="this.step < 3" mat-raised-button type="button" class="col-auto stepper-btn ml-auto" [ngClass]="{ 'next-disabled': this.step === this.maxStep, 'next': this.step < stepsBeforeDatasets, 'dataset-next': this.step >= stepsBeforeDatasets }" (click)="nextStep()">
 							<span class="material-icons">chevron_right</span>
 							<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
 						</div>
+						<div *ngIf="this.step >= 3 && hasProfile()" mat-raised-button type="button" class="col-auto add-dataset-option ml-auto">
+							<a class="add-dataset-btn stepper-btn" (click)="addDataset()" target="_blank">
+								<mat-icon>add</mat-icon>{{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}
+							</a>
+						</div>
 					</div>
 				</div>
 				<div class="col-auto form">
 					<main-info [hidden]="this.step !== 0" [formGroup]="formGroup" [isUserOwner]="isUserOwner" [isNewVersion]="isNewVersion" [isClone]="isClone" (onFormChanged)="formChanged()"></main-info>
 					<funding-info [hidden]="this.step !== 1" [formGroup]="formGroup" [grantformGroup]="formGroup.get('grant')" [projectFormGroup]="formGroup.get('project')" [funderFormGroup]="formGroup.get('funder')" [isFinalized]="isFinalized" [isNewVersion]="isNewVersion" [isClone]="isClone" [isNew]="isNew" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></funding-info>
-					<dataset-info [hidden]="this.step !== 2" [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></dataset-info>
+					<license-info [hidden]="this.step !== 2" [formGroup]="formGroup" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" (onFormChanged)="formChanged()"></license-info>
+					<dataset-info [hidden]="this.step !== 3" [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></dataset-info>
 
 					<div *ngFor="let dataset of datasets.controls; let i = index" [hidden]="this.step !== i + stepsBeforeDatasets">
 						<dataset-editor-details [formGroup]="dataset" [dmpId]="formGroup.get('id').value" (formChanged)="formChanged($event)"></dataset-editor-details>
diff --git a/dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.ts b/dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.ts
index c6fd70bcd..1b26ef930 100644
--- a/dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.ts
+++ b/dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.ts
@@ -26,6 +26,9 @@ import { DataTableRequest } from '@app/core/model/data-table/data-table-request'
 import { DatasetCriteria } from '@app/core/query/dataset/dataset-criteria';
 import { DatasetService } from '@app/core/services/dataset/dataset.service';
 import { DmpEditorModel } from '../editor/dmp-editor.model';
+import { DatasetWizardEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model';
+import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
+import { MatDialog } from '@angular/material';
 
 
 @Component({
@@ -45,6 +48,7 @@ export class DmpCloneComponent extends BaseComponent implements OnInit {
 	isPublic: false;
 	parentDmpLabel: string;
 	isNewVersion: boolean = false;
+	isNewDataset: boolean = false;
 	isClone: boolean = true;
 	isNew: boolean = false;
 	isUserOwner: boolean = true;
@@ -64,7 +68,8 @@ export class DmpCloneComponent extends BaseComponent implements OnInit {
 		private dmpService: DmpService,
 		private authentication: AuthService,
 		private uiNotificationService: UiNotificationService,
-		private datasetService: DatasetService
+		private datasetService: DatasetService,
+		private dialog: MatDialog
 	) {
 		super();
 	}
@@ -214,6 +219,24 @@ export class DmpCloneComponent extends BaseComponent implements OnInit {
 
 	}
 
+	addDataset() {
+		if (!this.formGroup.get('datasets')) {
+			this.formGroup.addControl('datasets', new FormBuilder().array(new Array<FormControl>()));
+		}
+		this.formGroup.get('datasets')['controls'].push(new DatasetWizardEditorModel().buildForm());
+		this.datasets = this.formGroup.get('datasets') as FormArray;
+		this.step = this.stepsBeforeDatasets + this.formGroup.get('datasets')['controls'].length - 1;
+		this.maxStep = this.maxStep + this.formGroup.get('datasets')['controls'].length - 1;
+	}
+
+	editDataset(id: string) {
+		this.router.navigate(['/datasets', 'edit', id]);
+	}
+
+	hasProfile(): boolean {
+		return this.formGroup.get('profiles') && this.formGroup.get('profiles').value && this.formGroup.get('profiles').value.length > 0;
+	}
+
 	selectionChanged(event, dataset) {
 		var datasetIndex = this.formGroup.get('datasets').value.map(function (item) { return item.id; }).indexOf(dataset.value.id);
 		if (!event.checked) {
@@ -231,4 +254,39 @@ export class DmpCloneComponent extends BaseComponent implements OnInit {
 		})
 	}
 
+	public removeDataset(datasetId: string, index: number) {
+		const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+			maxWidth: '300px',
+			restoreFocus: false,
+			data: {
+				message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
+				confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.DELETE'),
+				cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL'),
+				isDeleteConfirmation: true
+			}
+		});
+		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
+			if (result) {
+				if (datasetId) {
+					this.datasetService.delete(datasetId)
+						.pipe(takeUntil(this._destroyed))
+						.subscribe(
+							complete => {
+								this.onDeleteCallbackSuccess();
+							},
+							error => this.onDeleteCallbackError(error)
+						);
+				}
+				this.formGroup.get('datasets')['controls'].splice(index, 1);
+				this.step = 0;
+			}
+		});
+	}
+	onDeleteCallbackSuccess(): void {
+		this.uiNotificationService.snackBarNotification(this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-DELETE'), SnackBarNotificationLevel.Success);
+		this.dmp.id != null ? this.router.navigate(['/plans', 'edit', this.dmp.id]) : this.router.navigate(['/plans']);
+	}
+	onDeleteCallbackError(error) {
+		this.uiNotificationService.snackBarNotification(error.error.message ? error.error.message : this.language.instant('GENERAL.SNACK-BAR.UNSUCCESSFUL-DELETE'), SnackBarNotificationLevel.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 b8f7f5971..2ce09fab9 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
@@ -77,47 +77,51 @@
 							<li *ngIf="isNewDataset" (click)="changeStep(0)" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}}</li>
 
 							<li *ngIf="!isNewDataset" (click)="changeStep(1)" [ngClass]="{'active': this.step === 1}">{{'DMP-EDITOR.STEPPER.FUNDING-INFO' | translate}} (3)</li>
+
+							<li *ngIf="!isNewDataset" (click)="changeStep(2)" [ngClass]="{'active': this.step === 2}">{{'DMP-EDITOR.STEPPER.LICENSE-INFO' | translate}} (6)</li>
+
+							<li *ngIf="!isNewDataset" (click)="changeStep(3)" [ngClass]="{'active': this.step === 3}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}}</li>
 							<li *ngIf="isNewDataset" (click)="changeStep(1)" [ngClass]="{'active': this.step === 1}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}}</li>
 
-							<li *ngIf="!isNewDataset" (click)="changeStep(2)" [ngClass]="{'active': this.step === 2}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}}</li>
-
-							<li *ngIf="!isNewDataset" (click)="changeStep(3)" [ngClass]="{'active': this.step === 3}">{{'DMP-EDITOR.STEPPER.LICENSE-INFO' | translate}} (6)</li>
-
-							<li *ngFor="let dataset of datasets.controls; let i = index" (click)="changeStep(i + stepsBeforeDatasets, dataset)" [ngClass]="{'active-dataset': this.step === i + stepsBeforeDatasets}">
+							<!-- <li *ngFor="let dataset of datasets.controls; let i = index" (click)="changeStep(i + stepsBeforeDatasets, dataset)" [ngClass]="{'active-dataset': this.step === i + stepsBeforeDatasets}"> -->
+							<li *ngFor="let dataset of datasets.controls; let i = index" (click)="isNewDataset ? changeStep(i + stepsBeforeDatasets, dataset) : editDataset(dataset.get('id').value)" class="active-dataset">
 								<div class="d-flex flex-direction-row">
-									<div class="label">{{'DMP-EDITOR.STEPPER.DATASET' | translate}}</div>
-									<mat-icon *ngIf="dataset.get('status').value !== 1 && !isNewDataset" class="ml-auto remove-dataset" matTooltip="{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}" (click)="$event.stopPropagation(); removeDataset(dataset.get('id').value, i)">remove_circle_outline</mat-icon>
+									<div class="label" matTooltip="{{dataset.get('label').value}}">{{'DMP-EDITOR.STEPPER.DATASET' | translate}}: {{ dataset.get('label').value }}</div>
+									<mat-icon *ngIf="dataset.get('status').value !== 1 && !isNewDataset" class="ml-2 mr-2 remove-dataset size-16" matTooltip="{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}" (click)="$event.stopPropagation(); removeDataset(dataset.get('id').value, i)">close</mat-icon>
+									<mat-icon *ngIf="dataset.get('status').value === 1" class="ml-2 mr-2 status-icon check-icon size-16" matTooltip="{{'TYPES.DATASET-STATUS.FINALISED' | translate}}">check</mat-icon>
 								</div>
-								<span *ngIf="dataset.get('status').value === 1" class="finalized-label">
-									<mat-icon class="status-icon check-icon">check</mat-icon>{{'TYPES.DATASET-STATUS.FINALISED' | translate}}
-								</span>
-								<ul class="dataset-list">
+								<!-- <ul class="dataset-list">
 									<li *ngIf="!isNewDataset" [ngClass]="{'active': this.step === i + stepsBeforeDatasets}">{{ dataset.get('label').value }} (5)</li>
 									<li *ngIf="isNewDataset" [ngClass]="{'active': this.step === i + stepsBeforeDatasets}">{{ dataset.get('label').value }}</li>
-								</ul>
+								</ul> -->
 							</li>
 						</ol>
-						<ul *ngIf="!isNewDataset && hasProfile()" class="add-dataset-option">
+						<!-- <ul *ngIf="!isNewDataset && hasProfile()" class="add-dataset-option">
 							<li>
 								<a class="add-dataset-btn stepper-btn" (click)="addDataset()" target="_blank">
 									<mat-icon>add</mat-icon>{{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}
 								</a>
 							</li>
-						</ul>
+						</ul> -->
 					</div>
 					<div class="stepper-actions">
 						<div mat-raised-button type="button" class="col-auto previous stepper-btn mr-2 ml-auto" [ngClass]="{'previous-disabled': this.step === 0}" (click)="previousStep()">
 							<span class="material-icons">chevron_left</span>
 							<div>{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}</div>
 						</div>
-						<div *ngIf="!isNewDataset" mat-raised-button type="button" class="col-auto stepper-btn ml-auto" [ngClass]="{ 'next-disabled': this.step === this.maxStep, 'next': this.step < stepsBeforeDatasets, 'dataset-next': this.step >= stepsBeforeDatasets }" (click)="nextStep()">
+						<div *ngIf="!isNewDataset && this.step < 3" mat-raised-button type="button" class="col-auto stepper-btn ml-auto" [ngClass]="{ 'next-disabled': this.step === this.maxStep, 'next': this.step < stepsBeforeDatasets, 'dataset-next': this.step >= stepsBeforeDatasets }" (click)="nextStep()">
 							<span class="material-icons">chevron_right</span>
 							<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
 						</div>
-						<div *ngIf="isNewDataset" mat-raised-button type="button" class="col-auto stepper-btn dataset-next ml-auto" [ngClass]="{ 'next-disabled': this.step === this.maxStep }" (click)="nextStep()">
+						<div *ngIf="isNewDataset && this.step < 3" mat-raised-button type="button" class="col-auto stepper-btn dataset-next ml-auto" [ngClass]="{ 'next-disabled': this.step === this.maxStep }" (click)="nextStep()">
 							<span class="material-icons">chevron_right</span>
 							<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
 						</div>
+						<div *ngIf="!isNewDataset && this.step >= 3 && hasProfile()" mat-raised-button type="button" class="col-auto add-dataset-option ml-auto">
+							<a class="add-dataset-btn stepper-btn" (click)="addDataset()" target="_blank">
+								<mat-icon>add</mat-icon>{{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}
+							</a>
+						</div>
 					</div>
 				</div>
 				<div class="col-auto form">
@@ -125,10 +129,10 @@
 
 					<funding-info *ngIf="!isNewDataset" [hidden]="this.step !== 1" [formGroup]="formGroup" [grantformGroup]="formGroup.get('grant')" [projectFormGroup]="formGroup.get('project')" [funderFormGroup]="formGroup.get('funder')" [isFinalized]="isFinalized || lockStatus" [isNew]="isNew" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></funding-info>
 
-					<dataset-info *ngIf="!isNewDataset" [hidden]="this.step !== 2" [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized || lockStatus" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" [hasDmpId]="hasDmpId" (onFormChanged)="formChanged()"></dataset-info>
-					<dataset-info *ngIf="isNewDataset" [hidden]="this.step !== 1" [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized || lockStatus" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" [hasDmpId]="hasDmpId" (onFormChanged)="formChanged()"></dataset-info>
+					<license-info *ngIf="!isNewDataset" [hidden]="this.step !== 2" [formGroup]="formGroup" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" (onFormChanged)="formChanged()"></license-info>
 
-					<license-info [hidden]="this.step !== 3" [formGroup]="formGroup" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" (onFormChanged)="formChanged()"></license-info>
+					<dataset-info *ngIf="!isNewDataset" [hidden]="this.step !== 3" [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized || lockStatus" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" [hasDmpId]="hasDmpId" (onFormChanged)="formChanged()"></dataset-info>
+					<dataset-info *ngIf="isNewDataset" [hidden]="this.step !== 1" [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized || lockStatus" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" [hasDmpId]="hasDmpId" (onFormChanged)="formChanged()"></dataset-info>
 
 					<div *ngFor="let dataset of formGroup.get('datasets')['controls']; let i = index" [hidden]="this.step !== i + stepsBeforeDatasets">
 						<dataset-editor-details [formGroup]="dataset" [isNewDataset]="isNewDataset" [dmpId]="formGroup.get('id').value" [availableProfiles]="formGroup.get('profiles').value" (formChanged)="formChanged($event)"></dataset-editor-details>
diff --git a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.scss b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.scss
index 5f8b0017a..fe394b212 100644
--- a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.scss
@@ -275,21 +275,39 @@ a:hover {
   font-weight: 700;
   opacity: 1;
   .label {
-    width: 73px;
+    width: 100%;
     height: 27px;
+    line-height: 27px;
     background-color: #f7dd72;
     color: #5d5d5d;
     border-radius: 4px;
     font-weight: 400;
     font-size: 14px;
-    justify-content: center;
+    justify-content: left;
     display: flex;
     align-items: center;
+    padding-left: 0.625rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
   }
 }
 
+mat-icon.size-16 {
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  font-size: 16px;
+  margin-top: 0.4rem;
+}
+
+.remove-dataset {
+  color: #f16868;
+}
+
 .remove-dataset:hover {
-  color: rgb(204, 0, 0);
+  color: #f16868;
 }
 .stepper-options {
   //   flex-grow: 1;
@@ -315,8 +333,7 @@ a:hover {
   font-size: 14px;
 }
 
-.previous,
-.add-dataset-btn {
+.previous {
   color: #212121;
   background: #f5f5f5 0% 0% no-repeat padding-box;
   box-shadow: 0px 3px 6px #1e202029;
@@ -325,6 +342,14 @@ a:hover {
   cursor: pointer;
 }
 
+.add-dataset-btn {
+  color: #212121;
+  background: #f7dd72 0% 0% no-repeat padding-box;
+  box-shadow: 0px 3px 6px #1e202029;
+  font-weight: 500;
+  cursor: pointer;
+}
+
 .next {
   background: #129d99 0% 0% no-repeat padding-box;
   color: white;
@@ -355,10 +380,10 @@ a:hover {
   cursor: auto !important;
 }
 
-.add-dataset-btn:hover {
-  color: #129d99 !important;
-  border: 1px solid #129d99;
-}
+// .add-dataset-btn:hover {
+//   color: #129d99 !important;
+//   border: 1px solid #129d99;
+// }
 
 .dataset-list {
   list-style-type: none;
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 9d6b4b81d..ca80a16b4 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
@@ -747,6 +747,10 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 		});
 	}
 
+	editDataset(id: string) {
+		this.router.navigate(['/datasets', 'edit', id]);
+	}
+
 	saveAndFinalize() {
 		const dialogInputModel: DmpFinalizeDialogInput = {
 			dmpLabel: this.formGroup.get('label').value,
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.component.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.component.html
index 810d19280..dc09daefb 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.component.html
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.component.html
@@ -1,6 +1,9 @@
-<form *ngIf="form" novalidate [formGroup]="form" class="col-12 form-container">
-	<app-form-progress-indication class="col-12" *ngIf="form" [formGroup]="form"></app-form-progress-indication>
-	<div class="row">
+<div class="col-12 intro">
+	{{'DMP-EDITOR.DATASET-DESCRIPTION.INTRO' | translate}}
+</div>
+<form *ngIf="form" novalidate [formGroup]="form" class="col-12 form-container">
+	<!-- <app-form-progress-indication class="col-12" *ngIf="form" [formGroup]="form"></app-form-progress-indication> -->
+	<div class="row card">
 		<div class="dynamic-form-editor col-md-12">
 			<div id="form-container">
 				<mat-vertical-stepper #stepper [linear]="false">
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.component.scss b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.component.scss
index 34c2cf38b..57b066d5c 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.component.scss
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.component.scss
@@ -9,12 +9,23 @@
 .form-container {
 }
 
+.intro {
+  text-align: left;
+  font-weight: 400;
+  letter-spacing: 0px;
+  color: #212121;
+  opacity: 1;
+  margin: 3rem 0rem 3rem 0rem;
+}
+
 .dynamic-form-editor {
   mat-vertical-stepper {
     background-color: #ffffff;
   }
 }
 
-.mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit {
-    background-color: #129D99 !important;
+.mat-step-header .mat-step-icon-selected,
+.mat-step-header .mat-step-icon-state-done,
+.mat-step-header .mat-step-icon-state-edit {
+  background-color: #129d99 !important;
 }
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 fa0ce0a4a..4ca60d008 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
@@ -1,10 +1,12 @@
 <div *ngIf="links?.length" class="docs-toc-container">
-	<div class="docs-toc-heading">Contents</div>
+	<!-- <div class="docs-toc-heading">Contents</div> -->
 	<!-- <nav> -->
 	<!-- <a [href]="_rootUrl + '#' + link.id" -->
 	<div class="scroll-container">
-		<span *ngFor="let link of links; let i = index" (click)="goToStep(link)" class="docs-level-{{link.type}} docs-link" [class.docs-active]="link.active">
-			{{link.name}}
+		<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>
 		<!-- </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 b3c4e796e..fe88a9b5f 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
@@ -1,50 +1,70 @@
 .docs-toc-container {
-	width: 100%;
-	padding: 5px 0 10px 10px;
-	cursor: pointer;
-	border-left: solid 4px #0c7489;
+  width: 100%;
+  padding: 5px 0 10px 0px;
+  cursor: pointer;
+  // border-left: solid 4px #0c7489;
 
-	.scroll-container {
+  .scroll-container {
     overflow-y: auto;
     // calc(100vh - 250px)
-    height: 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;
+  .docs-link {
+    color: rgba(0, 0, 0, 0.54);
+    //   color: mat-color($app-blue-theme-foreground, secondary-text);
+    transition: color 100ms;
 
-		&:hover,
-		&.docs-active {
-			color: #0c7489;
-			// color: mat-color($primary, if($is-dark-theme, 200, default));
-		}
-	}
+    &: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;
+  margin: 0;
+  padding: 0;
+  font-size: 13px;
+  font-weight: bold;
 }
 
 span {
-	line-height: 16px;
-	margin: 8px 0 0;
-	position: relative;
-	text-decoration: none;
-	display: block;
-	text-overflow: ellipsis !important;
-	overflow: hidden;
-	color: rgba(0, 0, 0, 0.54);
+  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;
+  margin-left: 12px;
 }
 
 .docs-level-h5 {
-	margin-left: 24px;
+  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 eeab6422a..8400829ae 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,8 +1,9 @@
 import { DOCUMENT } from '@angular/common';
-import { Component, EventEmitter, Inject, OnInit, Output } from '@angular/core';
+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';
 
 interface Link {
 	/* id of the section*/
@@ -17,6 +18,8 @@ interface Link {
 	top: number;
 	page: number;
 	section: number;
+	show: boolean;
+	selected: boolean;
 }
 
 @Component({
@@ -33,6 +36,9 @@ export class TableOfContents extends BaseComponent implements OnInit {
 	subscription: Subscription;
 	linksSubject: Subject<HTMLElement[]> = new Subject<HTMLElement[]>();
 
+	@Input() isActive: boolean;
+	show: boolean = false;
+
 	constructor(
 		@Inject(DOCUMENT) private _document: Document) {
 		super();
@@ -55,6 +61,7 @@ export class TableOfContents extends BaseComponent implements OnInit {
 				if (headers.length) {
 					let page;
 					let section;
+					let show
 					for (const header of headers) {
 						let name;
 						let id;
@@ -63,15 +70,18 @@ export class TableOfContents extends BaseComponent implements OnInit {
 							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;
+							show = false;
 						} else if (header.classList.contains('toc-copositeField-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({
@@ -81,11 +91,15 @@ export class TableOfContents extends BaseComponent implements OnInit {
 							top: top,
 							active: false,
 							page: page,
-							section: section
+							section: section,
+							show: show,
+							selected: false
 						});
 					}
 				}
 				this.links = links;
+				// Initialize selected for button next on dataset wizard component editor
+				this.links[0].selected = true;
 			})
 	}
 
@@ -107,6 +121,27 @@ export class TableOfContents extends BaseComponent implements OnInit {
 		}, 500);
 	}
 
+	toggle(headerLink: Link) {
+		const page = +headerLink.id.split("_", 2)[1];
+		let innerPage;
+		for (const link of this.links) {
+			link.selected = false;
+			if (link.type === 'mat-expansion-panel') {
+				innerPage = +link.name.split(" ",1)[0];
+			} else if (link.type === 'h5') {
+			    innerPage = +link.name.split(".",1)[0];
+			}
+			if (page + 1 === innerPage && link.type !== 'span') {
+				link.show = !link.show;
+			}
+		}
+		headerLink.selected = true;
+	}
+
+	getIndex(link: Link): number {
+		return +link.id.split("_", 2)[1];
+	}
+
 }
 
 export interface LinkToScroll {
diff --git a/dmp-frontend/src/assets/i18n/de.json b/dmp-frontend/src/assets/i18n/de.json
index 316ea10a6..d3ffa9fee 100644
--- a/dmp-frontend/src/assets/i18n/de.json
+++ b/dmp-frontend/src/assets/i18n/de.json
@@ -485,10 +485,12 @@
 		"ACTIONS": {
 			"NEXT": "Weiter",
 			"BACK": "Zurück",
+			"BACK-TO": "Back to",
 			"DELETE": "Löschen",
 			"GO-TO-GRANT": "Gehe zu Datansatzbeschreibung Förderung",
 			"GO-TO-DMP": "Gehe zu Datensatzbeschreibung DMP",
 			"SAVE": "Speichern",
+			"SAVE-AND-ADD": "Save & Add New",
 			"SAVE-AND-FINALISE": "Speichern und Fertigstellen",
 			"FINALIZE": "Fertigstellen",
 			"REVERSE": "Fertigstellung rückgängig machen",
@@ -694,7 +696,7 @@
 			"NEW": "Neuer Datenmanagementplan",
 			"EDIT": "Bearbeiten",
 			"SUBTITLE": "DOI",
-			"ADD-DATASET": "Adding dataset to ",
+			"ADD-DATASET": "Adding dataset",
 			"EDIT-DATASET": "Editing Dataset",
 			"CLONE-DMP": "Clone",
 			"CREATE-DATASET": "Creating Dataset Description"
@@ -739,6 +741,49 @@
 			"TITLE": "Verfügbare Datensatzvorlagen",
 			"TEXT": "Datensatzprofile ausgewählt: ",
 			"OK": "OK"
+		},
+		"VISIBILITY": {
+			"PUBLIC": "Public",
+			"RESTRICTED": "Restricted"
+		},
+		"STEPPER": {
+			"USER-GUIDE": "Guide steps",
+			"MAIN-INFO": "Main info",
+			"FUNDING-INFO": "Funding info",
+			"DATASET-SELECTION": "Dataset selection",
+			"DATASET-INFO": "Dataset info",
+			"LICENSE-INFO": "License info",
+			"DATASET": "Dataset",
+			"PREVIOUS": "Previous",
+			"NEXT": "Next"
+		},
+		"MAIN-INFO": {
+			"INTRO": "A DMP in Argos consists of key information about research, such as purpose, objectives and researchers involved, but also about documentation of research datasets, namely dataset descriptions, that highlight the steps followed and the means used across data management activities.",
+			"HINT": "A brief description of what the DMP is about, it’s scope and objectives.",
+			"TYPING": "Type more letters of the name so its more possible to find the correct one."
+		},
+		"FUNDING-INFO": {
+			"INTRO": "A Data Management Plan (DMP) consist of your Data Management Plans closer to where they are generated, analysed and stored. argos is an open, extensible, collaborative tool supporting Open and FAIR Data Management Plans.",
+			"FIND": "Couldn't find the correct one?"
+		},
+		"DATASET-INFO": {
+			"INTRO": "A DMP in Argos consists of key information about research, such as purpose, objectives and researchers involved, but also about documentation of research datasets, namely dataset descriptions, that highlight the steps followed and the means used across data management activities.",
+			"SECOND-INTRO": "Datasets are documented following pre-defined templates which set the content of dataset descriptions. In Argos, a DMP can contain as many dataset descriptions as the datasets it documents.",
+			"FIND": "Couldn't find a suitable one?"
+		},
+		"LICENSE-INFO": {
+			"INTRO": "Each DMP can contain specific license informatation over how much open and available it is, that way you can determine who can see your dataset and for how long that data will be private",
+			"HINT": "A brief description of what license the DMP is using, it’s type and when it will open.",
+			"TYPING": "Type more letters of the name so its more possible to find the correct one."
+		},
+		"DATASET-DESCRIPTION": {
+			"INTRO": "Ιn general terms, your research data should be 'fair', that is findable, accessible, interoperable and re-usable. these principles precede implementation choices and do not necessarily suggest any specific technology, standard, or implementation-solution. this template is not intended as a strict technical implementation of the fair principles, it is rather inspired by fair as a general concept."
+		},
+		"CHANGES": "unsaved changes",
+		"CLONE-DIALOG": {
+			"CLONE": "Clone",
+			"SAVE": "Save",
+			"CANCEL": "Cancel"
 		}
 	},
 	"DMP-PROFILE-LISTING": {
diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json
index 940b08830..d807aacbe 100644
--- a/dmp-frontend/src/assets/i18n/en.json
+++ b/dmp-frontend/src/assets/i18n/en.json
@@ -524,10 +524,12 @@
 		"ACTIONS": {
 			"NEXT": "Next",
 			"BACK": "Back",
+			"BACK-TO": "Back to",
 			"DELETE": "Delete",
 			"GO-TO-GRANT": "Go to Dataset Description's Grant",
 			"GO-TO-DMP": "Go to Dataset Description's DMP",
 			"SAVE": "Save",
+			"SAVE-AND-ADD": "Save & Add New",
 			"SAVE-AND-FINALISE": "Save and Finalize",
 			"FINALIZE": "Finalize",
 			"REVERSE": "Undo Finalization",
@@ -646,6 +648,7 @@
 			"TEMPLATES-INVOLVED": "Dataset Description Template",
 			"VERSION": "DMP Version",
 			"PART-OF": "Part of",
+			"TO-DMP": "To DMP",
 			"DMP-FOR": "DMP for"
 		},
 		"EMPTY-LIST": "Nothing here yet."
@@ -763,7 +766,7 @@
 			"NEW": "New Data Management Plan",
 			"EDIT": "Edit",
 			"EDIT-DMP": "Editing DMP",
-			"ADD-DATASET": "Adding dataset to ",
+			"ADD-DATASET": "Adding dataset",
 			"EDIT-DATASET": "Editing Dataset",
 			"CLONE-DMP": "Clone",
 			"NEW-VERSION": "New Version",
@@ -864,6 +867,9 @@
 			"HINT": "A brief description of what license the DMP is using, it’s type and when it will open.",
 			"TYPING": "Type more letters of the name so its more possible to find the correct one."
 		},
+		"DATASET-DESCRIPTION": {
+			"INTRO": "Ιn general terms, your research data should be 'fair', that is findable, accessible, interoperable and re-usable. these principles precede implementation choices and do not necessarily suggest any specific technology, standard, or implementation-solution. this template is not intended as a strict technical implementation of the fair principles, it is rather inspired by fair as a general concept."
+		},
 		"CHANGES": "unsaved changes",
 		"CLONE-DIALOG": {
 			"CLONE": "Clone",
diff --git a/dmp-frontend/src/assets/i18n/es.json b/dmp-frontend/src/assets/i18n/es.json
index e6115fec1..29bb94f6b 100644
--- a/dmp-frontend/src/assets/i18n/es.json
+++ b/dmp-frontend/src/assets/i18n/es.json
@@ -525,10 +525,12 @@
 		"ACTIONS": {
 			"NEXT": "Siguiente",
 			"BACK": "Volver",
+			"BACK-TO": "Back to",
 			"DELETE": "Borrar",
 			"GO-TO-GRANT": "Ir a la subvención de la descripción del dataset",
 			"GO-TO-DMP": "Ir al PGD de la descripción del dataset",
 			"SAVE": "Grabar",
+			"SAVE-AND-ADD": "Save & Add New",
 			"SAVE-AND-FINALISE": "Grabar y finalizar",
 			"FINALIZE": "Finalizar",
 			"REVERSE": "Deshacer la finalización",
@@ -764,7 +766,7 @@
 			"NEW": "Nuevo Plan de Gestión de Datos",
 			"EDIT": "Editar",
 			"EDIT-DMP": "Editando PGD",
-			"ADD-DATASET": "Adding dataset to ",
+			"ADD-DATASET": "Adding dataset",
 			"EDIT-DATASET": "Editing Dataset",
 			"CLONE-DMP": "Clone",
 			"CREATE-DATASET": "Creating Dataset Description",
@@ -855,7 +857,20 @@
 			"SECOND-INTRO": "Los datasets se documentan siguiendo plantillas predefinadas con el contenido de la descripción de los datasets. En Argos un PGD puede incluir tantas descripciones de datasets como datasets se documenten.",
 			"FIND": "¿No se encontró el correcto?"
 		},
-		"CHANGES": "Cambios sin guardar"
+		"LICENSE-INFO": {
+			"INTRO": "Each DMP can contain specific license informatation over how much open and available it is, that way you can determine who can see your dataset and for how long that data will be private",
+			"HINT": "A brief description of what license the DMP is using, it’s type and when it will open.",
+			"TYPING": "Type more letters of the name so its more possible to find the correct one."
+		},
+		"DATASET-DESCRIPTION": {
+			"INTRO": "Ιn general terms, your research data should be 'fair', that is findable, accessible, interoperable and re-usable. these principles precede implementation choices and do not necessarily suggest any specific technology, standard, or implementation-solution. this template is not intended as a strict technical implementation of the fair principles, it is rather inspired by fair as a general concept."
+		},
+		"CHANGES": "unsaved changes",
+		"CLONE-DIALOG": {
+			"CLONE": "Clone",
+			"SAVE": "Save",
+			"CANCEL": "Cancel"
+		}
 	},
 	"DMP-PROFILE-LISTING": {
 		"TITLE": "Plantilla del PGD",
diff --git a/dmp-frontend/src/assets/i18n/gr.json b/dmp-frontend/src/assets/i18n/gr.json
index fc551f28d..b104e8438 100644
--- a/dmp-frontend/src/assets/i18n/gr.json
+++ b/dmp-frontend/src/assets/i18n/gr.json
@@ -522,10 +522,12 @@
 		"ACTIONS": {
 			"NEXT": "Επόμενο",
 			"BACK": "Πίσω",
+			"BACK-TO": "Back to",
 			"DELETE": "Διαγραφή",
 			"GO-TO-GRANT": "Μετάβαση σε Περιγραφή Συνόλου Δεδομένων της Επιχορήγησης",
 			"GO-TO-DMP": "Μετάβαση σε Περιγραφή Συνόλου Δεδομένων του Σχεδίου Διαχείρισης Δεδομένων",
 			"SAVE": "Save",
+			"SAVE-AND-ADD": "Save & Add New",
 			"SAVE-AND-FINALISE": "Αποθήκευση και Οριστικοποίηση",
 			"FINALIZE": "Οριστικοποίηση",
 			"REVERSE": "Αναίρεση Οριστικοποίησης",
@@ -759,7 +761,7 @@
 			"NEW": "Νέα Σχέδιο Διαχείρισης Δεδομένων",
 			"EDIT": "Επεξεργασία",
 			"EDIT-DMP": "Editing DMP",
-			"ADD-DATASET": "Adding dataset to ",
+			"ADD-DATASET": "Adding dataset",
 			"EDIT-DATASET": "Editing Dataset",
 			"CLONE-DMP": "Clone",
 			"SUBTITLE": "Μονοσήμαντο Αναγνωριστικό Ψηφιακού Αντικειμένου (DOI)"
@@ -848,7 +850,20 @@
 			"SECOND-INTRO": "Datasets are documented following pre-defined templates which set the content of dataset descriptions. In Argos, a DMP can contain as many dataset descriptions as the datasets it documents.",
 			"FIND": "Couldn't find a suitable one?"
 		},
-		"CHANGES": "unsaved changes"
+		"LICENSE-INFO": {
+			"INTRO": "Each DMP can contain specific license informatation over how much open and available it is, that way you can determine who can see your dataset and for how long that data will be private",
+			"HINT": "A brief description of what license the DMP is using, it’s type and when it will open.",
+			"TYPING": "Type more letters of the name so its more possible to find the correct one."
+		},
+		"DATASET-DESCRIPTION": {
+			"INTRO": "Ιn general terms, your research data should be 'fair', that is findable, accessible, interoperable and re-usable. these principles precede implementation choices and do not necessarily suggest any specific technology, standard, or implementation-solution. this template is not intended as a strict technical implementation of the fair principles, it is rather inspired by fair as a general concept."
+		},
+		"CHANGES": "unsaved changes",
+		"CLONE-DIALOG": {
+			"CLONE": "Clone",
+			"SAVE": "Save",
+			"CANCEL": "Cancel"
+		}
 	},
 	"DMP-PROFILE-LISTING": {
 		"TITLE": "Templates Σχεδίων Διαχείρισης Δεδομένων",
diff --git a/dmp-frontend/src/assets/i18n/tr.json b/dmp-frontend/src/assets/i18n/tr.json
index 723c6d37e..602c44ff5 100644
--- a/dmp-frontend/src/assets/i18n/tr.json
+++ b/dmp-frontend/src/assets/i18n/tr.json
@@ -520,10 +520,12 @@
 		"ACTIONS": {
 			"NEXT": "Sonraki",
 			"BACK": "Geri",
+			"BACK-TO": "Back to",
 			"DELETE": "Sil",
 			"GO-TO-GRANT": "Veri seti Tanımının Hibesine Git",
 			"GO-TO-DMP": "Veri seti Tanımı VYP'na Git",
 			"SAVE": "Kaydet",
+			"SAVE-AND-ADD": "Save & Add New",
 			"SAVE-AND-FINALISE": "Kaydet ve Bitir",
 			"FINALIZE": "Tamamla",
 			"REVERSE": "Tamamlamayı Geri Al",
@@ -753,7 +755,7 @@
 				"NEW": "Yeni Veri Yönetim Planı",
 				"EDIT": "Düzenle",
 				"EDIT-DMP": " VYP'yi düzenleme",
-				"ADD-DATASET": "Adding dataset to ",
+				"ADD-DATASET": "Adding dataset",
 				"CLONE-DMP": "Clone",
 				"SUBTITLE": "DOI"
 			},
@@ -841,7 +843,20 @@
 				"SECOND-INTRO": "Veri setleri, veri seti açıklamalarının içeriğini belirleyen önceden tanımlanmış şablonları takiben belgelenir. Argos'ta bir VYP, belgelediği veri setleri kadar çok veri seti açıklaması içerebilir.",
 				"FIND": "Uygun bir tane bulamadınız mı?"
 			},
-			"CHANGES": "Kaydedilmemiş Değişiklikler"
+			"LICENSE-INFO": {
+				"INTRO": "Each DMP can contain specific license informatation over how much open and available it is, that way you can determine who can see your dataset and for how long that data will be private",
+				"HINT": "A brief description of what license the DMP is using, it’s type and when it will open.",
+				"TYPING": "Type more letters of the name so its more possible to find the correct one."
+			},
+			"DATASET-DESCRIPTION": {
+				"INTRO": "Ιn general terms, your research data should be 'fair', that is findable, accessible, interoperable and re-usable. these principles precede implementation choices and do not necessarily suggest any specific technology, standard, or implementation-solution. this template is not intended as a strict technical implementation of the fair principles, it is rather inspired by fair as a general concept."
+			},
+			"CHANGES": "unsaved changes",
+			"CLONE-DIALOG": {
+				"CLONE": "Clone",
+				"SAVE": "Save",
+				"CANCEL": "Cancel"
+			}
 		},
 		"DMP-PROFILE-LISTING": {
 			"TITLE": "VYP Şablonları",