diff --git a/dmp-frontend/src/app/core/model/dataset/dataset-overview.ts b/dmp-frontend/src/app/core/model/dataset/dataset-overview.ts
index 7377a1984..75d03a082 100644
--- a/dmp-frontend/src/app/core/model/dataset/dataset-overview.ts
+++ b/dmp-frontend/src/app/core/model/dataset/dataset-overview.ts
@@ -5,4 +5,11 @@ export interface DatasetOverviewModel {
 	label: string;
 	status: any;
 	datasetTemplate: DatasetProfileModel;
+
+	users: any[];
+	dmp: String;
+	grant: String;
+	description: String;
+	public: boolean;
+	modified: Date;
 }
diff --git a/dmp-frontend/src/app/core/services/dataset/dataset.service.ts b/dmp-frontend/src/app/core/services/dataset/dataset.service.ts
index 7b157833a..d21df6676 100644
--- a/dmp-frontend/src/app/core/services/dataset/dataset.service.ts
+++ b/dmp-frontend/src/app/core/services/dataset/dataset.service.ts
@@ -10,11 +10,15 @@ import { ExploreDatasetCriteriaModel } from '../../query/explore-dataset/explore
 import { BaseHttpService } from '../http/base-http.service';
 import { DatasetProfileCriteria } from '../../query/dataset-profile/dataset-profile-criteria';
 import { ConfigurationService } from '../configuration/configuration.service';
+import { DatasetOverviewModel } from '@app/core/model/dataset/dataset-overview';
+import { HttpHeaders } from '@angular/common/http';
+import { DatasetModel } from '@app/core/model/dataset/dataset';
 
 @Injectable()
 export class DatasetService {
 
 	private actionUrl: string;
+	private headers = new HttpHeaders();
 
 	constructor(
 		private http: BaseHttpService,
@@ -49,4 +53,20 @@ export class DatasetService {
 	clearIndex() {
 		return this.http.delete(this.actionUrl + 'index');
 	}
+
+	getOverviewSingle(id: string): Observable<DatasetOverviewModel> {
+		return this.http.get<DatasetOverviewModel>(this.actionUrl + 'overview/' + id, { headers: this.headers });
+	}
+
+	getOverviewSinglePublic(id: string): Observable<DatasetOverviewModel> {
+		return this.http.get<DatasetOverviewModel>(this.actionUrl + 'publicOverview/' + id, { headers: this.headers })
+	}
+
+	clone(datasetModel: DatasetModel, id: String): Observable<DatasetModel> {
+		return this.http.post<DatasetModel>(this.actionUrl + 'clone/' + id, datasetModel, { headers: this.headers });
+	}
+
+	delete(id: String): Observable<DatasetModel> {
+		return this.http.delete<DatasetModel>(this.actionUrl + 'delete/' + id, { headers: this.headers }); // + 'delete/'
+	}
 }
diff --git a/dmp-frontend/src/app/ui/dataset/dataset.module.ts b/dmp-frontend/src/app/ui/dataset/dataset.module.ts
index 804bb64ae..4d10643f5 100644
--- a/dmp-frontend/src/app/ui/dataset/dataset.module.ts
+++ b/dmp-frontend/src/app/ui/dataset/dataset.module.ts
@@ -23,6 +23,7 @@ import { ConfirmationDialogModule } from '@common/modules/confirmation-dialog/co
 import { CommonUiModule } from '@common/ui/common-ui.module';
 import { AngularStickyThingsModule } from '@w11k/angular-sticky-things';
 import { DatasetCopyDialogModule } from './dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.module';
+import { DatasetOverviewModule } from './overview/dataset-overview.module';
 
 @NgModule({
 	imports: [
@@ -38,7 +39,8 @@ import { DatasetCopyDialogModule } from './dataset-wizard/dataset-copy-dialogue/
 		AngularStickyThingsModule,
 		DatasetRoutingModule,
 		FormValidationErrorsDialogModule,
-		DatasetCopyDialogModule
+		DatasetCopyDialogModule,
+		DatasetOverviewModule
 	],
 	declarations: [
 		DatasetListingComponent,
diff --git a/dmp-frontend/src/app/ui/dataset/dataset.routing.ts b/dmp-frontend/src/app/ui/dataset/dataset.routing.ts
index a17296a13..b024aa044 100644
--- a/dmp-frontend/src/app/ui/dataset/dataset.routing.ts
+++ b/dmp-frontend/src/app/ui/dataset/dataset.routing.ts
@@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { AuthGuard } from '../../core/auth-guard.service';
 import { DatasetWizardComponent } from './dataset-wizard/dataset-wizard.component';
 import { DatasetListingComponent } from './listing/dataset-listing.component';
+import { DatasetOverviewComponent } from './overview/dataset-overview.component';
 
 const routes: Routes = [
 	{
@@ -76,14 +77,22 @@ const routes: Routes = [
 			title: 'GENERAL.TITLES.DATASET-UPDATE'
 		},
 	},
-	// {
-	// 	path: 'overview/:id',
-	// 	component: DatasetOverviewComponent,
-	// 	data: {
-	// 		breadcrumb: true,
-	// 		title: 'GENERAL.TITLES.DATASET-OVERVIEW'
-	// 	},
-	// },
+	{
+		path: 'overview/:id',
+		component: DatasetOverviewComponent,
+		data: {
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.DATASET-OVERVIEW'
+		},
+	},
+	{
+		path: 'publicOverview/:publicId',
+		component: DatasetOverviewComponent,
+		data: {
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.DATASET-OVERVIEW'
+		},
+	}
 ];
 
 @NgModule({
diff --git a/dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.html b/dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.html
new file mode 100644
index 000000000..140569ba0
--- /dev/null
+++ b/dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.html
@@ -0,0 +1,238 @@
+<div class="main-content pl-5 pr-5">
+	<div class="container-fluid pl-0 pr-0">
+		<!-- <div *ngIf="dataset"> -->
+		<a class="row mb-2 pl-1" (click)="goBack()" role="button">
+			<mat-icon class="back-icon">chevron_left</mat-icon>
+			<p class="label-txt">{{'DMP-WIZARD.ACTIONS.BACK' | translate}}</p>
+		</a>
+		<div class="row">
+			<div class="col-md-8 col-lg-8 pl-4">
+				<div class="row">
+					<span class="dataset-logo">{{ 'NAV-BAR.DATASET' | translate }}</span>
+					<!-- <p class="dataset-label ml-2 mb-0">{{ dataset.label }}</p> -->
+					<p class="dataset-label ml-3 mb-0">Dataset Label dataset label</p>
+				</div>
+				<div class="row d-flex align-items-center mt-3 mb-4 label-txt">
+					<!-- <div *ngIf="isUserDatasetRelated()" class="d-flex"> -->
+					<div class="d-flex">
+						<p class="ml-0 mr-3 mb-0 label2-txt">
+							Owner
+							<!-- {{ roleDisplayFromList(dataset.users) }} -->
+						</p>
+					</div>
+					<div class="d-flex mr-4">
+						<!-- <div *ngIf="dataset.public" class="d-flex flex-row"> -->
+						<div class="d-flex flex-row">
+							<mat-icon class="status-icon">public</mat-icon>
+							<!-- {{'DMP-OVERVIEW.PUBLIC' | translate}} -->
+							Public
+						</div>
+						<!-- <div *ngIf="!dataset.public" class="d-flex flex-row">
+							<mat-icon class="status-icon">public_off</mat-icon>
+							{{'DMP-OVERVIEW.PRIVATE' | translate}}
+						</div> -->
+					</div>
+					<!-- <div class="d-flex mr-4">
+							<div *ngIf="lockStatus" class="d-flex flex-row">
+								<mat-icon class="status-icon">lock_outline</mat-icon>
+								{{'DMP-OVERVIEW.LOCKED' | translate}}
+							</div>
+							<div *ngIf="!lockStatus" class="d-flex flex-row">
+								<mat-icon class="status-icon">lock_open</mat-icon>
+								{{'DMP-OVERVIEW.UNLOCKED' | translate}}
+							</div>
+						</div> -->
+					<!-- <button class="d-flex mr-4 version-btn label2-txt"
+							(click)="viewVersions(dmp.groupId, dmp.label)">
+							{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
+						</button> -->
+					<div class="d-flex mr-4">{{'GENERAL.STATUSES.EDIT' | translate}} :
+						<!-- {{dataset.modified | date:"longDate"}} -->
+						03/07/2020
+					</div>
+					<!-- <div class="d-flex mr-4">
+							<div *ngIf="dmp.status" class="d-flex flex-row uppercase">
+								<mat-icon class="status-icon">check</mat-icon>
+								{{'DATASET-LISTING.COLUMNS.FINALIZED' | translate}}
+							</div>
+						</div> -->
+				</div>
+				<div class="row mb-4 pb-3">
+					<!-- <button *ngIf="isAuthenticated()" (click)="cloneClicked(dataset)" mat-mini-fab -->
+					<button mat-mini-fab class="mr-3 d-flex justify-content-center align-items-center"
+						matTooltip="{{'DMP-LISTING.ACTIONS.CLONE' | translate}}" matTooltipPosition="above">
+						<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
+					</button>
+					<!-- <button *ngIf="isDraftDataset(dataset) && isUserOwner" (click)="editClicked(dataset)" mat-mini-fab -->
+					<button mat-mini-fab class="mr-3 d-flex justify-content-center align-items-center"
+						matTooltip="{{'DMP-LISTING.ACTIONS.EDIT' | translate}}" matTooltipPosition="above">
+						<mat-icon class="mat-mini-fab-icon">create</mat-icon>
+					</button>
+					<!-- <button *ngIf="isDraftDataset(dataset) && isUserOwner" (click)="deleteClicked()" mat-mini-fab -->
+					<button mat-mini-fab class="mr-3 d-flex justify-content-center align-items-center"
+						matTooltip="{{'DMP-LISTING.ACTIONS.DELETE' | translate}}" matTooltipPosition="above">
+						<mat-icon class="mat-mini-fab-icon">delete</mat-icon>
+					</button>
+					<!-- <button *ngIf="isDraftDmp(dmp) && isUserOwner && !lockStatus" mat-mini-fab (click)="createOrUpdate(dmp.id)"
+							class="mr-3 d-flex justify-content-center align-items-center">
+							<mat-icon class="mat-mini-fab-icon" matTooltip="{{'DMP-OVERVIEW.LOCK' | translate}}"
+								matTooltipPosition="above">lock_outline
+							</mat-icon>
+						</button> -->
+				</div>
+				<div class="row header">{{'DATASET-LISTING.TOOLTIP.PART-OF' | translate}}</div>
+				<div class="row d-flex flex-column">
+					<button mat-raised-button class="mb-2 pl-0 pr-0">
+						<div class="dmp-btn">
+							<div class="dmp-btn-label">
+								<!-- {{ 'DATASET-LISTING.TOOLTIP.DMP-FOR' | translate }}: {{ dataset.datasetTemplate.label }} -->
+								{{ 'DATASET-LISTING.TOOLTIP.DMP-FOR' | translate }}: HORIZON 2020 FOR GRANT DMP
+							</div>
+							<mat-icon>launch</mat-icon>
+						</div>
+					</button>
+				</div>
+				<div class="row header">{{'DMP-OVERVIEW.GRANT' | translate}}</div>
+					<div class="row dmp-label">Label</div>
+					<!-- <div class="row dmp-label">{{ dataset.grant.label }}</div> -->
+					<div class="row header">{{'DMP-OVERVIEW.RESEARCHERS' | translate}}</div>
+					<div class="row">
+						<div *ngFor="let researcher of dataset.dmp.researchers; let last = last">
+							<a href="{{getOrcidPath() + dmp.id }}" target="blank" class="researcher">
+								<div class="id-btn">&nbsp;</div>
+								<div *ngIf="!last">{{ researcher.name }}, </div>
+								<div *ngIf="last">{{ researcher.name }}</div>
+							</a>
+						</div>
+					</div>
+				<!-- <div class="row header">{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</div>
+					<div class="row" *ngIf="dmp.description">
+						<p class="desc-txt">{{ dmp.description }}</p>
+					</div> -->
+				<!-- <div class="row mt-2 add-dataset-txt">
+						<button class="add-dataset-btn" *ngIf="isDraftDmp(dmp) && isUserOwner"
+							(click)="addDataset(dmp.id)">
+							<mat-icon>add</mat-icon>
+							{{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}
+						</button>
+					</div> -->
+			</div>
+			<div class="col-md-4 col-lg-4 p-0">
+				<!-- <div *ngIf="!hasDoi(dmp)" class="row d-flex flex-column ml-0 mr-0 mb-3">
+						<p class="doi-label">{{'DMP-EDITOR.TITLE.SUBTITLE' | translate}}</p>
+						<div class="doi-panel">
+							<p *ngIf="!hasDoi(dmp)" class="mb-0 ml-3">
+								<textarea #doi class="doi-txt">{{ dmp.doi }}</textarea>
+							</p>
+							<div class="d-flex justify-content-end">
+								<button (click)="copyDoi(doi)" mat-mini-fab
+									class="mr-2 d-flex justify-content-center align-items-center"
+									matTooltip="{{'DMP-LISTING.ACTIONS.CLONE' | translate}}" matTooltipPosition="above">
+									<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
+								</button>
+								<button mat-mini-fab class="mr-2 d-flex justify-content-center align-items-center"
+									matTooltip="{{'GRANT-EDITOR.ACTIONS.VISIT-WEBSITE' | translate}}"
+									matTooltipPosition="above">
+									<a [href]="createDoiLink(dmp.doi)" class="doi-link" target="_blank">
+										<mat-icon class="mat-mini-fab-icon">launch</mat-icon>
+									</a>
+								</button>
+							</div>
+						</div>
+					</div>
+					<div class="frame mb-3 pt-4 pl-3 pr-5 pb-1">
+						<div *ngIf="!dmp.status && isDraftDmp(dmp) && isUserOwner">
+							<div class="row ml-0 mr-0 pl-4 d-flex align-items-center" (click)="finalize(dmp)">
+								<button mat-mini-fab class="finalize-btn">
+									<mat-icon class="mat-mini-fab-icon">check</mat-icon>
+								</button>
+								<p class="mb-0 pl-2 finalize-txt">{{ 'DMP-LISTING.ACTIONS.FINALIZE' | translate }}</p>
+							</div>
+							<div class="row ml-0 mr-0 pl-4 d-flex align-items-center">
+								<hr class="hr-line">
+							</div>
+						</div>
+						<div *ngIf="hasDoi(dmp) && isFinalizedDmp(dmp) && !this.isPublicView && isUserOwner"
+							(click)="getDoi(dmp)" class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center">
+							<button mat-mini-fab class="frame-btn">
+								<mat-icon class="mat-mini-fab-icon">archive</mat-icon>
+							</button>
+							<p class="mb-0 pl-2 frame-txt">{{ 'DMP-LISTING.ACTIONS.DEPOSIT' | translate }}</p>
+						</div>
+						<div class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center">
+							<button mat-mini-fab class="frame-btn" [matMenuTriggerFor]="exportMenu">
+								<mat-icon class="mat-mini-fab-icon">open_in_new</mat-icon>
+							</button>
+							<p class="mb-0 mr-0 pl-2 frame-txt" [matMenuTriggerFor]="exportMenu">
+								{{ 'DMP-LISTING.ACTIONS.EXPORT' | translate }}</p>
+						</div>
+						<div class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center" *ngIf="isUserOwner"
+							(click)="newVersion(dmp.id, dmp.label)">
+							<button mat-mini-fab class="frame-btn">
+								<mat-icon class="mat-mini-fab-icon">add_to_photos</mat-icon>
+							</button>
+							<p class="mb-0 pl-2 frame-txt">{{ 'DMP-LISTING.ACTIONS.START-NEW-VERSION' | translate }}
+							</p>
+						</div>
+						<div *ngIf="!dmp.isPublic && showPublishButton(dmp) && isUserOwner"
+							class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center" (click)="publish(dmp.id)">
+							<button mat-mini-fab class="frame-btn">
+								<mat-icon class="mat-mini-fab-icon">public</mat-icon>
+							</button>
+							<p class="mb-0 pl-2 frame-txt">{{ 'DMP-LISTING.ACTIONS.MAKE-PUBLIC' | translate }}</p>
+						</div>
+						<mat-menu #exportMenu="matMenu" xPosition="before">
+							<button mat-menu-item (click)="downloadPDF(dmp.id)">
+								<i class="fa fa-file-pdf-o pr-2"></i>
+								<span>{{'GENERAL.FILE-TYPES.PDF' | translate}}</span>
+							</button>
+							<button mat-menu-item (click)="downloadDocx(dmp.id)">
+								<i class="fa fa-file-word-o pr-2"></i>
+								<span>{{'GENERAL.FILE-TYPES.DOC' | translate}}</span>
+							</button>
+							<button mat-menu-item (click)="downloadXml(dmp.id)">
+								<i class="fa fa-file-code-o pr-2"></i>
+								<span>{{'GENERAL.FILE-TYPES.XML' | translate}}</span>
+							</button>
+							<button mat-menu-item (click)="downloadJson(dmp.id)">
+								<i class="fa fa-file-o pr-2"></i>
+								<span>{{'GENERAL.FILE-TYPES.JSON' | translate}}</span>
+							</button>
+						</mat-menu>
+					</div>
+					<div class="frame mb-3 pt-4 pl-3 pr-3 pb-1">
+						<div class="row ml-0 mr-0 pl-4 pb-3">
+							<p class="header">{{ 'DMP-OVERVIEW.DMP-AUTHORS' | translate }}</p>
+						</div>
+						<div class="row ml-0 mr-0 pl-4 ml-2 pb-3 d-flex align-items-center">
+							<div *ngFor="let user of dmp.users" class="row authors">
+								<div class="d-flex flex-row">
+									<button class="account_btn mr-3 pl-0">
+										<mat-icon class="account-icon">account_circle</mat-icon>
+									</button>
+									<div>
+										<p class="authors-label">{{ user.name }}
+											<span *ngIf="isUserAuthor(user.id)">
+												({{ 'DMP-OVERVIEW.YOU' | translate }})</span>
+										</p>
+										<p class="authors-role">{{ roleDisplay(user) }}</p>
+									</div>
+								</div>
+								<button *ngIf="isUserOwner && !dmp.status && user.role"
+									(click)="removeCollaborator(user.id)"
+									class="remove-btn">{{ 'GENERAL.CONFIRMATION-DIALOG.ACTIONS.REMOVE' | translate}}</button>
+							</div>
+						</div>
+						<div *ngIf="isUserOwner" (click)="openShareDialog(dmp.id,dmp.label)"
+							class="row mt-3 mb-3 d-flex align-items-center justify-content-center">
+							<button mat-raised-button class="invite-btn">
+								<mat-icon>group_add</mat-icon>
+								{{'DMP-LISTING.ACTIONS.INVITE-SHORT' | translate}}
+							</button>
+						</div>
+					</div> -->
+			</div>
+		</div>
+		<!-- </div> -->
+	</div>
+</div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.scss b/dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.scss
new file mode 100644
index 000000000..2370e3179
--- /dev/null
+++ b/dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.scss
@@ -0,0 +1,281 @@
+.container-fluid {
+  margin: 2em 4em;
+  padding: 2em;
+}
+
+// ********ICONS********
+
+.back-icon {
+  opacity: 0.4;
+}
+
+.mat-mini-fab {
+  width: 2.5em;
+  height: 2.5em;
+  color: #212121;
+  background-color: #F7DD72;
+}
+
+.mat-mini-fab-icon, .status-icon {
+  font-size: 1.2em;
+}
+
+.mat-mini-fab:hover {
+  background-color: #129D99;
+  color: #FFFFFF;
+}
+
+.status-icon {
+  color: #A7A7A7;
+}
+
+.account-icon {
+  font-size: 2.5em;
+}
+
+// ********BUTTONS********
+
+.version-btn {
+  // width: 6.7em;
+  height: 1.8em;
+  border: 1px solid #707070;
+  border-radius: 4px;
+  background-color: transparent;
+}
+
+.id-btn {
+  background: url('../../../../assets/images/NoPath.png') no-repeat center;
+  width: 1em;
+  margin-right: 0.3em;
+  align-self: center;
+}
+
+.dmp-btn {
+  width: 35em;
+  padding: 0 1em;
+  background-color: #129D99;
+  border-radius: 4px;
+  justify-content: space-between;
+  color: #212121;
+  opacity: 0.8;
+}
+
+.show-more-btn {
+  width: 31.6em;
+  padding: 0 1em;
+  background-color: #ffffff00;
+  color: #129D99;
+  font-weight: 700;
+}
+
+.add-dataset-btn {
+  border: none;
+  font: Bold 0.875em Open Sans;
+  color: #444444;
+  background-color: transparent;
+}
+
+.frame-btn {
+  border: 1px solid #212121;
+  color: black;
+}
+
+.finalize-btn {
+  border: 1px solid #129D99;
+  color: #129D99;
+}
+
+.frame-btn, .finalize-btn {
+  background: #FFFFFF;
+  box-shadow: 0px 2px 6px #00000029;
+}
+
+.remove-btn {
+  border: none;
+  background-color: transparent;
+  font-size: 0.875em;
+  font-weight: bold;
+  margin-left: auto;
+}
+
+.invite-btn{
+  width: 9.4em;
+  height: 2.9em;
+  background: #FFFFFF;
+  box-shadow: 0px 3px 6px #1E202029;
+  border: 2px solid #212121;
+  border-radius: 30px;
+}
+
+.account_btn {
+  background: white;
+  color: #D5D5D5;
+  border: none;
+  height: 2.9em;
+}
+
+// ********TEXT********
+
+.dataset-logo {
+  width: 6em;
+  height: 2.6em;
+  background: #F7DD72;
+  border-radius: 4px;
+  font-size: 0.875em;
+  // color: #212121;
+  // color: black;
+  // opacity: 0.75;
+}
+
+.label-txt {
+  font-size: 0.875em;
+}
+
+.label2-txt {
+  font-size: 1em;
+}
+
+.label-txt, .label2-txt {
+  color: #848484;
+}
+
+.dataset-label {
+  font-weight: bold;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.researcher {
+  font-size: 0.875em;
+  color: #008887;
+  padding-right: 0.5em;
+  align-self: center;
+
+}
+
+.header {
+  opacity: 0.6;
+  margin-top: 1em;
+  margin-bottom: 0.25em;
+}
+
+.dataset-label, .header {
+  font-size: 1.25em;
+  color: #212121;
+}
+
+.desc-txt {
+  width: 48.25em;
+  font-size: 1em;
+  color: #212121;
+  margin-bottom: 1.875em;
+}
+
+.dmp-btn-label {
+  margin-right: 1em;
+  overflow: hidden;
+}
+
+.doi-label {
+  font-size: 1em;
+  color: #212121;
+  opacity: 0.6;
+  margin-bottom: 0.3em;
+}
+
+.doi-txt {
+  font-size: 0.8em;
+  letter-spacing: 0.009em;
+  color: #7D7D7D;
+  width: 12em;
+  height: 1em;
+  overflow: hidden;
+  border: none;
+  padding: 0px;
+}
+
+.doi-panel {
+  height: 3.5em;
+  background: #FAFAFA;
+  border: 1px solid #D1D1D1;
+  border-radius: 4px;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.doi-link {
+  color: white;
+}
+
+.frame {
+  background: #FFFFFF;
+  box-shadow: 0px 1px 5px #00000026;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.frame-txt {
+  color: #000000;
+}
+
+.finalize-txt {
+  color: #129D99;
+}
+
+.frame-txt, .finalize-txt {
+  font-size: 0.75em;
+  font-weight: bold;
+  letter-spacing: 0px;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.hr-line {
+  border: 1px solid #DBDBDB;
+  // width: 274px;
+  // width: 17em;
+  width: 100%;
+}
+
+.authors {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.authors-label {
+  font-size: 0.875em;
+  color: #212121;
+  height: 1.4em;
+  margin-bottom: 0px;
+}
+
+.authors-role {
+  font-size: 0.875em;
+  color: #A8A8A8;
+  height: 1.4em;
+  margin-bottom: 0px;
+}
+
+// ********CENTER ELEMENTS********
+
+.mat-mini-fab, .mat-mini-fab-icon,
+.status-icon, .dataset-logo, .frame-btn, .finalize-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.dataset-label, .dmp-btn, .add-dataset-btn,
+ .doi-panel, .researcher {
+  display: flex;
+  align-items: center;
+}
+
+.show-more-btn {
+  display: flex;
+  justify-content: center;
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.ts b/dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.ts
new file mode 100644
index 000000000..5029a259a
--- /dev/null
+++ b/dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.ts
@@ -0,0 +1,217 @@
+import { Component, OnInit } from '@angular/core';
+import { BaseComponent } from '@common/base/base.component';
+import { DatasetOverviewModel } from '@app/core/model/dataset/dataset-overview';
+import { BreadcrumbItem } from '@app/ui/misc/breadcrumb/definition/breadcrumb-item';
+import { Observable, of as observableOf, interval } from 'rxjs';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { DatasetService } from '@app/core/services/dataset/dataset.service';
+import { TranslateService } from '@ngx-translate/core';
+import { AuthService } from '@app/core/services/auth/auth.service';
+import { MatDialog } from '@angular/material';
+import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service';
+import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
+import { Oauth2DialogService } from '@app/ui/misc/oauth2-dialog/service/oauth2-dialog.service';
+import { UserService } from '@app/core/services/user/user.service';
+import { takeUntil } from 'rxjs/operators';
+import { Principal } from '@app/core/model/auth/principal';
+import { Role } from '@app/core/common/enum/role';
+import { Location } from '@angular/common';
+import { UserInfoListingModel } from '@app/core/model/user/user-info-listing';
+import { DatasetStatus } from '@app/core/common/enum/dataset-status';
+import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
+
+
+@Component({
+  selector: 'app-dataset-overview',
+  templateUrl: './dataset-overview.component.html',
+  styleUrls: ['./dataset-overview.component.scss']
+})
+export class DatasetOverviewComponent extends BaseComponent implements OnInit {
+
+  dataset: DatasetOverviewModel;
+  isNew = true;
+  isFinalized = false;
+  isPublicView = true;
+  hasPublishButton: boolean = true;
+  breadCrumbs: Observable<BreadcrumbItem[]> = observableOf();
+  isUserOwner: boolean;
+  expand = false;
+  hasDOIToken = false;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private datasetService: DatasetService,
+    private translate: TranslateService,
+    private authentication: AuthService,
+    private dialog: MatDialog,
+    private language: TranslateService,
+    private uiNotificationService: UiNotificationService,
+    private configurationService: ConfigurationService,
+    private oauth2DialogService: Oauth2DialogService,
+    private userService: UserService,
+    private location: Location
+  ) {
+    super();
+  }
+
+  ngOnInit() {
+    // Gets dataset data using parameter id
+    this.route.params
+      .pipe(takeUntil(this._destroyed))
+      .subscribe((params: Params) => {
+        const itemId = params['id'];
+        const publicId = params['publicId'];
+        if (itemId != null) {
+          this.isNew = false;
+          this.isPublicView = false;
+          this.datasetService.getOverviewSingle(itemId)
+            .pipe(takeUntil(this._destroyed))
+            .subscribe(data => {
+              this.dataset = data;
+              // this.checkLockStatus(this.dataset.id);
+              this.setIsUserOwner();
+              const breadCrumbs = [];
+              breadCrumbs.push({ parentComponentName: null, label: this.language.instant('NAV-BAR.MY-DATASET-DESCRIPTIONS'), url: "/datasets" });
+              breadCrumbs.push({ parentComponentName: 'DatasetListingComponent', label: this.dataset.label, url: '/datasets/overview/' + this.dataset.id });
+              this.breadCrumbs = observableOf(breadCrumbs);
+            }, (error: any) => {
+              if (error.status === 404) {
+                return this.onFetchingDeletedCallbackError('/datasets/');
+              }
+              if (error.status === 403) {
+                return this.onFetchingForbiddenCallbackError('/datasets/');
+              }
+            });
+        }
+        else if (publicId != null) {
+          this.isNew = false;
+          this.isFinalized = true;
+          this.isPublicView = true;
+          this.datasetService.getOverviewSinglePublic(publicId)
+            .pipe(takeUntil(this._destroyed))
+            .subscribe(data => {
+              this.dataset = data;
+              // this.checkLockStatus(this.dataset.id);
+              this.setIsUserOwner();
+              const breadCrumbs = [];
+              breadCrumbs.push({ parentComponentName: null, label: this.language.instant('NAV-BAR.PUBLIC DATASETS'), url: "/explore" });
+              breadCrumbs.push({ parentComponentName: 'DatasetListingComponent', label: this.dataset.label, url: '/datasets/publicOverview/' + this.dataset.id });
+              this.breadCrumbs = observableOf(breadCrumbs);
+            }, (error: any) => {
+              if (error.status === 404) {
+                return this.onFetchingDeletedCallbackError('/explore');
+              }
+              if (error.status === 403) {
+                return this.onFetchingForbiddenCallbackError('/explore');
+              }
+            });
+        }
+      });
+  }
+
+  onFetchingDeletedCallbackError(redirectRoot: string) {
+		this.uiNotificationService.snackBarNotification(this.language.instant('DATASET-OVERVIEW.ERROR.DELETED-DATASET'), SnackBarNotificationLevel.Error);
+		this.router.navigate([redirectRoot]);
+	}
+
+	onFetchingForbiddenCallbackError(redirectRoot: string) {
+		this.uiNotificationService.snackBarNotification(this.language.instant('DATASET-OVERVIEW.ERROR.FORBIDEN-DATASET'), SnackBarNotificationLevel.Error);
+		this.router.navigate([redirectRoot]);
+  }
+  
+  goBack(): void {
+		this.location.back();
+	}
+
+  setIsUserOwner() {
+  	if (this.dataset) {
+  		const principal: Principal = this.authentication.current();
+  		if (principal) this.isUserOwner = principal.id === this.dataset.users.find(x => x.role === Role.Owner).id;
+  	}
+  }
+
+  isUserDatasetRelated() {
+		const principal: Principal = this.authentication.current();
+		let isRelated: boolean = false;
+		if (this.dataset && principal) {
+			this.dataset.users.forEach(element => {
+				if (element.id === principal.id) {
+					isRelated = true;
+				}
+			})
+		}
+		return isRelated;
+  }
+  
+  roleDisplayFromList(value: UserInfoListingModel[]) {
+		const principal: Principal = this.authentication.current();
+		let role: number;
+		if (principal) {
+			value.forEach(element => {
+				if (principal.id === element.id) {
+					role = element.role;
+				}
+			});
+		}
+		if (role === Role.Owner) {
+			return this.translate.instant('DMP-LISTING.OWNER');
+		} else if (role === Role.Member) {
+			return this.translate.instant('DMP-LISTING.MEMBER');
+		} else {
+			return this.translate.instant('DMP-LISTING.OWNER');
+		}
+  }
+  
+  public isAuthenticated(): boolean {
+		return !(!this.authentication.current());
+  }
+  
+  cloneClicked(dataset: DatasetOverviewModel) {
+		this.router.navigate(['/datasets/clone/' + dataset.id]);
+  }
+  
+  isDraftDataset(dataset: DatasetOverviewModel) {
+		// return dataset.status == DatasetStatus.Draft;
+  }
+  
+  editClicked(dataset: DatasetOverviewModel) {
+		this.router.navigate(['/datasets/edit/' + dataset.id]);
+  }
+  
+  deleteClicked() {
+		const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+			maxWidth: '300px',
+			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) {
+				this.datasetService.delete(this.dataset.id)
+					.pipe(takeUntil(this._destroyed))
+					.subscribe(
+						complete => { this.onCallbackSuccess() },
+						error => this.onDeleteCallbackError(error)
+					);
+			}
+		});
+  }
+  
+  onCallbackSuccess(): void {
+		this.uiNotificationService.snackBarNotification(this.isNew ? this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-CREATION') : this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
+		this.router.navigate(['/datasets']);
+	}
+
+	onDeleteCallbackError(error) {
+		this.uiNotificationService.snackBarNotification(error.error.message ? error.error.message : this.language.instant('GENERAL.SNACK-BAR.UNSUCCESSFUL-DELETE'), SnackBarNotificationLevel.Error);
+  }
+  
+  public getOrcidPath(): string {
+		return this.configurationService.orcidPath;
+	}
+
+}
diff --git a/dmp-frontend/src/app/ui/dataset/overview/dataset-overview.module.ts b/dmp-frontend/src/app/ui/dataset/overview/dataset-overview.module.ts
new file mode 100644
index 000000000..293bffdfb
--- /dev/null
+++ b/dmp-frontend/src/app/ui/dataset/overview/dataset-overview.module.ts
@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { FormattingModule } from '@app/core/formatting.module';
+import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module';
+import { ConfirmationDialogModule } from '@common/modules/confirmation-dialog/confirmation-dialog.module';
+import { ExportMethodDialogModule } from '@app/library/export-method-dialog/export-method-dialog.module';
+import { UrlListingModule } from '@app/library/url-listing/url-listing.module';
+import { CommonFormsModule } from '@common/forms/common-forms.module';
+import { CommonUiModule } from '@common/ui/common-ui.module';
+import { DatasetOverviewComponent } from './dataset-overview.component';
+
+@NgModule({
+	imports: [
+		CommonUiModule,
+		CommonFormsModule,
+		UrlListingModule,
+		ConfirmationDialogModule,
+		ExportMethodDialogModule,
+		FormattingModule,
+		AutoCompleteModule
+	],
+	declarations: [
+		DatasetOverviewComponent
+	]
+})
+export class DatasetOverviewModule { }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html
index 5faabb907..14334cf22 100644
--- a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html
+++ b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html
@@ -9,7 +9,7 @@
 				<div class="col-md-8 col-lg-8 pl-4">
 					<div class="row">
 						<span class="dmp-logo">{{ 'DATASET-LISTING.COLUMNS.DMP' | translate }}</span>
-						<p class="dmp-label ml-2 mb-0">{{ dmp.label }}</p>
+						<p class="dmp-label ml-3 mb-0">{{ dmp.label }}</p>
 					</div>
 					<div class="row d-flex align-items-center mt-3 mb-4 label-txt">
 						<div *ngIf="isUserDMPRelated()" class="d-flex">
diff --git a/dmp-frontend/src/app/ui/explore-dataset/explore-dataset.module.ts b/dmp-frontend/src/app/ui/explore-dataset/explore-dataset.module.ts
index b06554524..468946180 100644
--- a/dmp-frontend/src/app/ui/explore-dataset/explore-dataset.module.ts
+++ b/dmp-frontend/src/app/ui/explore-dataset/explore-dataset.module.ts
@@ -7,13 +7,15 @@ import { ExploreDatasetFiltersComponent } from '@app/ui/explore-dataset/filters/
 import { ExploreDatasetListingItemComponent } from '@app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component';
 import { CommonFormsModule } from '@common/forms/common-forms.module';
 import { CommonUiModule } from '@common/ui/common-ui.module';
+import { DatasetOverviewModule } from '../dataset/overview/dataset-overview.module';
 
 @NgModule({
 	imports: [
 		CommonUiModule,
 		CommonFormsModule,
 		AutoCompleteModule,
-		ExploreDatasetRoutingModule
+		ExploreDatasetRoutingModule,
+		DatasetOverviewModule
 	],
 	declarations: [
 		ExploreDatasetListingComponent,
diff --git a/dmp-frontend/src/app/ui/explore-dataset/explore-dataset.routing.ts b/dmp-frontend/src/app/ui/explore-dataset/explore-dataset.routing.ts
index fd9f14154..f1d28185b 100644
--- a/dmp-frontend/src/app/ui/explore-dataset/explore-dataset.routing.ts
+++ b/dmp-frontend/src/app/ui/explore-dataset/explore-dataset.routing.ts
@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { ExploreDatasetListingComponent } from './explore-dataset-listing.component';
+import { DatasetOverviewComponent } from '../dataset/overview/dataset-overview.component';
 
 const routes: Routes = [
 	{
@@ -9,6 +10,14 @@ const routes: Routes = [
 		data: {
 			breadcrumb: true
 		},
+	},
+	{
+		path: 'overview/:publicId',
+		component: DatasetOverviewComponent,
+		data: {
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.EXPLORE-PLANS-OVERVIEW'
+		},
 	}
 ];
 
diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json
index 10bb1e2d2..66ec80215 100644
--- a/dmp-frontend/src/assets/i18n/en.json
+++ b/dmp-frontend/src/assets/i18n/en.json
@@ -561,6 +561,13 @@
 			"USE-DEFAULT": "Use Default Token"
 		}
 	},
+	"DATASET-OVERVIEW": {
+		"DATASET-AUTHORS": "Dataset Authors",
+		"ERROR": {
+			"DELETED-DATASET": "The requested dataset is deleted",
+			"FORBIDEN-DATASET": "You are not allowed to access this dataset"
+		}
+	},
 	"DATASET-LISTING": {
 		"TITLE": "Dataset Descriptions",
 		"DATASET-DESCRIPTION": "Dataset Description",
diff --git a/dmp-frontend/src/assets/i18n/es.json b/dmp-frontend/src/assets/i18n/es.json
index 8c67bed8f..17f985fe5 100644
--- a/dmp-frontend/src/assets/i18n/es.json
+++ b/dmp-frontend/src/assets/i18n/es.json
@@ -552,13 +552,20 @@
 		},
 		"ERROR": {
 			"DELETED-DMP": "El PGD solicitado está borrado",
-			"FORBIDEN-DMP": "You are not allowed to access this DMP"
+			"FORBIDEN-DMP": "No tiene permiso para acceder a esto DMP"
 		},
 		"MULTIPLE-DIALOG": {
 			"ZENODO-LOGIN": "Login with Zenodo",
 			"USE-DEFAULT": "Use Default Token"
 		}
 	},
+	"DATASET-OVERVIEW": {
+		"DATASET-AUTHORS": "Dataset Autores",
+		"ERROR": {
+			"DELETED-DATASET": "El Dataset solicitado está borrado",
+			"FORBIDEN-DATASET": "No tiene permiso para acceder a esto Dataset"
+		}
+	},
 	"DATASET-LISTING": {
 		"TITLE": "Descripciones del Dataset",
 		"DATASET-DESCRIPTION": "Descripción  del Dataset",
diff --git a/dmp-frontend/src/assets/i18n/gr.json b/dmp-frontend/src/assets/i18n/gr.json
index 5bc65bc3d..4681aeeaa 100644
--- a/dmp-frontend/src/assets/i18n/gr.json
+++ b/dmp-frontend/src/assets/i18n/gr.json
@@ -556,6 +556,13 @@
 			"FORBIDEN-DMP": "Δεν επιτρέπεται η πρόσβαση σε αυτό το Σχέδιο Διαχείρισης Δεδομένων"
 		}
 	},
+	"DATASET-OVERVIEW": {
+		"DATASET-AUTHORS": "Συγγραφείς Περιγραφής Δεδομένων",
+		"ERROR": {
+			"DELETED-DATASET": "H επιλεγμένη Περιγραφή Δεδομένων θα διαγραφεί",
+			"FORBIDEN-DATASET": "Δεν επιτρέπεται η πρόσβαση σε αυτή την Περιγραφή Δεδομένων"
+		}
+	},
 	"DATASET-LISTING": {
 		"TITLE": "Περιγραφές Συνόλων Δεδομένων",
 		"DATASET-DESCRIPTION": "Περιγραφή Δεδομένων",