diff --git a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component.ts b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component.ts
index 63b4f4cd4..6ac820ac8 100644
--- a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component.ts
+++ b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component.ts
@@ -47,7 +47,6 @@ export class DatasetCopyDialogueComponent {
 			}
 			else if (!this.data.datasetProfileExist) {
 				this.data.formControl.setErrors({'incorrect': true});
-				console.log(this.data.formControl.invalid);
 			}
 		});
 	}
diff --git a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html
index cc537002c..ebe4b05fd 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html
+++ b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html
@@ -18,113 +18,14 @@
 						<app-dataset-criteria-component></app-dataset-criteria-component>
 					</div>
 					<div class="col-9">
-						<div class="row" *ngFor="let item of listingItems; let last = last">
-							<app-dataset-listing-item-component *ngIf="!last" class="col-12" [dataset]="item" (onClick)="rowClicked($event)"></app-dataset-listing-item-component>
-							<app-dataset-listing-item-component *ngIf="last" class="col-12" [dataset]="item" [showDivider]="false" (onClick)="rowClicked($event)"></app-dataset-listing-item-component>
+						<div class="row" *ngFor="let item of listingItems; let i = index">
+							<app-dataset-listing-item-component class="col-12" [dataset]="item" [showDivider]="i != (listingItems.length - 1)" (onClick)="rowClicked($event)"></app-dataset-listing-item-component>
 						</div>
-						<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
+						<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]">
 						</mat-paginator>
 					</div>
 				</div>
 			</div>
 		</div>
 	</div>
-</div>
-
-<!-- <div class="main-content">
-	<div class="container-fluid">
-		<div>
-			<h3>{{'DATASET-LISTING.TITLE' | translate}} {{titlePrefix}}</h3>
-
-			<app-dataset-criteria-component [dmpSearchEnabled]="dmpSearchEnabled"></app-dataset-criteria-component>
-			<mat-card class="mat-card">
-				<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()"> -->
-
-<!-- Column Definition: Name -->
-<!-- <ng-container cdkColumnDef="label">
-						<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'DATASET-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
-						<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
-					</ng-container> -->
-
-<!-- Column Definition: Dmp -->
-<!-- <ng-container cdkColumnDef="project">
-						<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.PROJECT' |
-							translate}}</mat-header-cell>
-						<mat-cell *matCellDef="let row"> {{row.project}} </mat-cell>
-					</ng-container> -->
-
-<!-- Column Definition: Dmp -->
-<!-- <ng-container cdkColumnDef="dmp">
-						<mat-header-cell *matHeaderCellDef mat-sort-header="|join|dmp:label">{{'DATASET-LISTING.COLUMNS.DMP' |
-							translate}}</mat-header-cell>
-						<mat-cell *matCellDef="let row"> {{row.dmp}} </mat-cell>
-					</ng-container> -->
-
-<!-- Column Definition: Profile -->
-<!-- <ng-container cdkColumnDef="profile">
-						<mat-header-cell *matHeaderCellDef mat-sort-header="|join|profile:label">{{'DATASET-LISTING.COLUMNS.PROFILE' |
-							translate}}</mat-header-cell>
-						<mat-cell *matCellDef="let row"> {{row.profile}} </mat-cell>
-					</ng-container> -->
-
-<!-- Column Definition: Status -->
-<!-- <ng-container cdkColumnDef="status">
-						<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.STATUS' | translate}}</mat-header-cell>
-						<mat-cell *matCellDef="let row"> {{enumUtils.toDatasetStatusString(row.status)}} </mat-cell>
-					</ng-container> -->
-
-<!-- Column Definition: DataRepositories -->
-<!-- <ng-container cdkColumnDef="dataRepositories">
-				<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.DATAREPOSITORIES' | translate}}</mat-header-cell>
-				<mat-cell *matCellDef="let row"> {{row.dataRepositories}} </mat-cell>
-			</ng-container> -->
-
-<!-- Column Definition: DataRepositories -->
-<!-- <ng-container cdkColumnDef="registries">
-				<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.REGISTRIES' | translate}}</mat-header-cell>
-				<mat-cell *matCellDef="let row"> {{row.registries}} </mat-cell>
-			</ng-container> -->
-
-<!-- Column Definition: DataRepositories -->
-<!-- <ng-container cdkColumnDef="services">
-				<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.SERVICES' | translate}}</mat-header-cell>
-				<mat-cell *matCellDef="let row"> {{row.services}} </mat-cell>
-			</ng-container> -->
-
-<!-- Column Definition: Status -->
-<!-- <ng-container cdkColumnDef="status">
-						<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.STATUS' | translate}}</mat-header-cell>
-						<mat-cell *matCellDef="let row"> {{row.status}}
-						</mat-cell>
-					</ng-container> -->
-
-<!-- Column Definition: Description -->
-<!-- <ng-container cdkColumnDef="description">
-						<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</mat-header-cell>
-						<mat-cell *matCellDef="let row"> {{row.description}} </mat-cell>
-					</ng-container> -->
-
-<!-- Column Definition: Created -->
-<!-- <ng-container cdkColumnDef="created">
-						<mat-header-cell *matHeaderCellDef mat-sort-header="created">{{'DATASET-LISTING.COLUMNS.CREATED' | translate}}</mat-header-cell>
-						<mat-cell *matCellDef="let row">{{row.created | date:'shortDate'}}</mat-cell>
-					</ng-container> -->
-
-<!-- <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-					<mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id)"></mat-row> -->
-<!-- (click)="rowClick(row.id)" -->
-
-<!-- </mat-table>
-				<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
-				</mat-paginator>
-			</mat-card> -->
-
-<!-- <button *ngIf="dmpId" mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]="['/datasets/new/'+dmpId] ">
-				<mat-icon class="mat-24">add</mat-icon>
-			</button>
-			<button *ngIf="!dmpId" mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]="['/datasets/new'] ">
-				<mat-icon class="mat-24">add</mat-icon>
-			</button>
-		</div>
-	</div>
-</div> -->
+</div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.ts b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.ts
index f46107525..731f33635 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.ts
+++ b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.ts
@@ -1,8 +1,6 @@
-import { DataSource } from '@angular/cdk/table';
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator, MatSnackBar, MatSort, PageEvent } from '@angular/material';
+import { MatPaginator, MatSort, PageEvent } from '@angular/material';
 import { ActivatedRoute, Params, Router } from '@angular/router';
-import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { BaseComponent } from '../../../core/common/base/base.component';
@@ -11,7 +9,6 @@ import { DatasetListingModel } from '../../../core/model/dataset/dataset-listing
 import { DatasetCriteria } from '../../../core/query/dataset/dataset-criteria';
 import { DatasetService } from '../../../core/services/dataset/dataset.service';
 import { DmpService } from '../../../core/services/dmp/dmp.service';
-import { EnumUtils } from '../../../core/services/utilities/enum-utils.service';
 import { BreadcrumbItem } from '../../misc/breadcrumb/definition/breadcrumb-item';
 import { IBreadCrumbComponent } from '../../misc/breadcrumb/definition/IBreadCrumbComponent';
 import { DatasetCriteriaComponent } from './criteria/dataset-criteria.component';
@@ -29,12 +26,8 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
 
 	breadCrumbs: Observable<BreadcrumbItem[]>;
 
-	dataSource: DatasetDataSource | null;
-	displayedColumns: String[] = ['label', 'project', 'dmp', 'profile', 'status', 'description', 'created'];
-	pageEvent: PageEvent;
 	titlePrefix: String;
 	dmpId: string;
-	itemId: string;
 	status: Number;
 	totalCount: number;
 	dmpSearchEnabled = true;
@@ -43,11 +36,8 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
 	constructor(
 		private datasetService: DatasetService,
 		private router: Router,
-		private languageService: TranslateService,
-		private snackBar: MatSnackBar,
 		private route: ActivatedRoute,
 		private dmpService: DmpService,
-		public enumUtils: EnumUtils
 	) {
 		super();
 	}
@@ -82,31 +72,19 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
 			});
 	}
 
-	// refresh() {
-	// 	this.dataSource = new DatasetDataSource(this.datasetService, this._paginator, this.sort, this.languageService, this.snackBar, this.criteria, this.dmpId);
-	// }
-
 	refresh() {
 		const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
 		let fields: Array<string> = new Array();
 		if (this.sort && this.sort.active) { fields = this.sort.direction === 'asc' ? ['+' + this.sort.active] : ['-' + this.sort.active]; }
 		const request = new DataTableRequest<DatasetCriteria>(startIndex, this._paginator.pageSize, { fields: fields });
 		request.criteria = this.criteria.formGroup.value;
-		if (this.itemId) {
-			// request.criteria.groupIds = [this.itemId];
-			request.criteria.allVersions = true;
-		}
+		// if (this.itemId) {
+		// 	// request.criteria.groupIds = [this.itemId];
+		// 	request.criteria.allVersions = true;
+		// }
 		this.datasetService.getPaged(request).pipe(takeUntil(this._destroyed)).subscribe(result => {
 			if (!result) { return []; }
 			if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
-			// result.data.map(item => {
-			// 	item['datasets'].map(dmp => {
-			// 		dmp.url = 'datasets/edit/' + dmp.url;
-			// 		dmp.all = 'datasets/dmp/' + item.id;
-			// 		return dmp;
-			// 	});
-			// 	return item;
-			// });
 			this.listingItems = result.data;
 			console.log(result);
 		});
@@ -135,70 +113,4 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
 			.pipe(takeUntil(this._destroyed))
 			.subscribe();
 	}
-}
-
-export class DatasetDataSource extends DataSource<DatasetListingModel> {
-
-	totalCount = 0;
-	constructor(
-		private _service: DatasetService,
-		private _paginator: MatPaginator,
-		private _sort: MatSort,
-		private _languageService: TranslateService,
-		private _snackBar: MatSnackBar,
-		private _criteria: DatasetCriteriaComponent,
-		private dmpId: String
-	) {
-		super();
-	}
-
-	connect(): Observable<DatasetListingModel[]> {
-		const displayDataChanges = [
-			this._paginator.page
-			//this._sort.matSortChange
-		];
-
-		return Observable.merge(...displayDataChanges)
-			.startWith(null)
-			.switchMap(() => {
-				const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
-				let fields: Array<string> = new Array();
-				if (this._sort.active) { fields = this._sort.direction === 'asc' ? ['+' + this._sort.active] : ['-' + this._sort.active]; }
-				const request = new DataTableRequest<DatasetCriteria>(startIndex, this._paginator.pageSize, { fields: fields });
-				request.criteria = {
-					like: this._criteria.criteria.like,
-					status: this._criteria.criteria.status,
-					dmpIds: this._criteria.criteria.dmpIds ? this._criteria.criteria.dmpIds.map(x => x.id) : null,
-					tags: this._criteria.criteria.tags,
-					allVersions: this._criteria.criteria.allVersions
-				}
-				if (this.dmpId) { request.criteria.allVersions = true; }
-				return this._service.getPaged(request);
-			})
-			/*.catch((error: any) => {
-			  this._snackBar.openFromComponent(SnackBarNotificationComponent, {
-				data: { message: 'GENERAL.SNACK-BAR.FORMS-BAD-REQUEST', language: this._languageService },
-				duration: 3000,
-				extraClasses: ['snackbar-warning']
-			  });
-			  //this._criteria.criteria.onCallbackError(error);
-			  return Observable.of(null);
-			})*/
-			.map(result => {
-				result.data = result.data;
-				return result;
-			})
-			.map(result => {
-				return result;
-			})
-			.map(result => {
-				if (!result) { return []; }
-				if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
-				return result.data;
-			});
-	}
-
-	disconnect() {
-		// No-op
-	}
-}
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html
index dc942a53c..ee1329651 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html
+++ b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html
@@ -1,4 +1,4 @@
-<div class="dmp-listing-item row" (click)="itemClicked()">
+<div class="dataset-listing-item row" (click)="itemClicked()">
 	<div class="col-auto">
 		<mat-icon *ngIf="draft" class="draft-bookmark">bookmark</mat-icon>
 		<mat-icon *ngIf="!draft" class="finalized-bookmark">bookmark</mat-icon>
@@ -6,7 +6,7 @@
 	<div class="col">
 		<h4>{{ dataset.label }}</h4>
 		<p>{{ dataset.description }}</p>
-		<div class="dmp-info">
+		<div class="dataset-info">
 			<h6>{{ dataset.dmp }}</h6>
 			<p>{{ dataset.project }}</p>
 		</div>
diff --git a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss
index 0b26f28ed..f765f9c59 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss
+++ b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss
@@ -1,11 +1,11 @@
 @import "../../../dmp/listing/listing-item/dmp-listing-item.component.scss";
 
-.dmp-info {
+.dataset-info {
   background-color: #f6f6f6;
   padding: 8px 15px;
 }
 
-.dmp-info p {
+.dataset-info p {
   margin-bottom: 0px;
   color: rgb(37, 35, 140);
   font-weight: 600;
diff --git a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.ts b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.ts
index c95396437..e26e53704 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.ts
+++ b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.ts
@@ -17,7 +17,7 @@ export class DatasetListingItemComponent implements OnInit {
 	constructor() { }
 
 	ngOnInit() {
-		if(this.dataset.status == 0) { this.draft = true }
+		if (this.dataset.status == 0) { this.draft = true }
 		else { this.draft = false }
 	}
 
diff --git a/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.html b/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.html
index 53ccedf74..19193a168 100644
--- a/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.html
+++ b/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.html
@@ -1,4 +1,41 @@
-<div class="main-content">
+<div class="header-image">
+	<div class="header-text-container">
+		<h3>Welcome to OpenDMP</h3>
+		<h4>Lorem ipsum dolor sit amet concectetum lorem ipsum</h4>
+	</div>
+</div>
+<div class="explore-dmp-content">
+	<div class="container-fluid">
+		<div class="card">
+			<div class="card-header card-header-blue d-flex">
+				<div class="card-desc d-flex flex-column justify-content-center">
+					<h4 class="card-title">{{'DASHBOARD.DATASETS' | translate}} {{titlePrefix}}</h4>
+					<p class="card-category">{{'DATASET-LISTING.SUBTITLE' | translate}}</p>
+				</div>
+				<div class="d-flex align-items-center ml-auto p-2">
+					<button mat-raised-button color="primary" class="text-uppercase" [routerLink]="['/datasets/new']">
+						<mat-icon>add</mat-icon> {{'DATASET-LISTING.ACTIONS.NEW' | translate}}
+					</button>
+				</div>
+			</div>
+			<div class="card-body table-responsive">
+				<div class="dmp-listing row">
+					<div class="col-3">
+						<app-explore-dataset-filters-component (facetCriteriaChange)="onCriteriaChange($event)"></app-explore-dataset-filters-component>
+					</div>
+					<div class="col-9">
+						<div class="row" *ngFor="let item of listingItems; let i = index">
+							<app-explore-dataset-listing-item-component class="col-12" [dataset]="item" [showDivider]="i !== (listingItems.length - 1)" (onClick)="rowClicked($event)"></app-explore-dataset-listing-item-component>
+						</div>
+						<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]">
+						</mat-paginator>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+<!-- <div class="main-content">
 	<div class="container-fluid">
 		<div class="explore-dataset">
 			<h3 class="text-center">{{'DATASET-PUBLIC-LISTING.TITLE' | translate}} {{titlePrefix}}</h3>
@@ -10,80 +47,38 @@
 					<div>
 						<mat-card class="mat-card">
 							<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
-
-								<!-- Column Definition: Name -->
 								<ng-container cdkColumnDef="label">
 									<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'DATASET-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
 									<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
 								</ng-container>
-
-								<!-- Column Definition: Dmp -->
 								<ng-container cdkColumnDef="project">
 									<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.PROJECT' |
 										translate}}</mat-header-cell>
 									<mat-cell *matCellDef="let row"> {{row.project}} </mat-cell>
 								</ng-container>
-
-								<!-- Column Definition: Profile -->
 								<ng-container cdkColumnDef="profile">
 									<mat-header-cell *matHeaderCellDef mat-sort-header="|join|profile:label">{{'DATASET-LISTING.COLUMNS.PROFILE'
 										| translate}}</mat-header-cell>
 									<mat-cell *matCellDef="let row"> {{row.profile}} </mat-cell>
 								</ng-container>
-
-								<!-- Column Definition: DataRepositories -->
-								<!-- <ng-container cdkColumnDef="dataRepositories">
-					<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.DATAREPOSITORIES' | translate}}</mat-header-cell>
-					<mat-cell *matCellDef="let row"> {{row.dataRepositories}} </mat-cell>
-					</ng-container> -->
-
-								<!-- Column Definition: DataRepositories -->
-								<!-- <ng-container cdkColumnDef="registries">
-					<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.REGISTRIES' | translate}}</mat-header-cell>
-					<mat-cell *matCellDef="let row"> {{row.registries}} </mat-cell>
-					</ng-container> -->
-
-								<!-- Column Definition: DataRepositories -->
-								<!-- <ng-container cdkColumnDef="services">
-					<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.SERVICES' | translate}}</mat-header-cell>
-					<mat-cell *matCellDef="let row"> {{row.services}} </mat-cell>
-					</ng-container> -->
-
-								<!-- Column Definition: Status -->
-								<!-- <ng-container cdkColumnDef="status">
-					<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.STATUS' | translate}}</mat-header-cell>
-					<mat-cell *matCellDef="let row"> {{row.status}}
-					</mat-cell>
-					</ng-container> -->
-
-								<!-- Column Definition: Description -->
 								<ng-container cdkColumnDef="description">
 									<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</mat-header-cell>
 									<mat-cell *matCellDef="let row"> {{row.description}} </mat-cell>
 								</ng-container>
-
-								<!-- Column Definition: Created -->
 								<ng-container cdkColumnDef="created">
 									<mat-header-cell *matHeaderCellDef mat-sort-header="created">{{'DATASET-LISTING.COLUMNS.CREATED' |
 										translate}}</mat-header-cell>
 									<mat-cell *matCellDef="let row">{{row.created | date:'shortDate'}}</mat-cell>
 								</ng-container>
-
-
-
 								<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
 								<mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id)"></mat-row>
-								<!-- (click)="rowClick(row.id)" -->
-
 							</mat-table>
 							<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
 							</mat-paginator>
 						</mat-card>
-
 					</div>
-
 				</div>
 			</div>
 		</div>
 	</div>
-</div>
+</div> -->
diff --git a/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.scss b/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.scss
index d750ff77c..a40f93bef 100644
--- a/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.scss
+++ b/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.scss
@@ -1,3 +1,25 @@
-text-center{
-  text-align: center
+text-center {
+	text-align: center
 }
+
+.header-image {
+	background: url('/assets/images/public-datasets-bg.png') no-repeat;
+	background-size: cover;
+	margin-top: 70px;
+	min-height: 15em;
+	position: relative;
+}
+
+.header-text-container {
+	background: rgba(255,255,255,0.7);
+	position: absolute;
+	bottom: 0px;
+	padding-left: 5em;
+	padding-right: 10em;
+	padding-top: 2em;
+	padding-bottom: 2em;
+}
+
+.explore-dmp-content {
+	padding: 30px 15px;
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.ts b/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.ts
index 7b2b0eb87..db289271a 100644
--- a/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.ts
+++ b/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.ts
@@ -1,17 +1,14 @@
-import { DataSource } from '@angular/cdk/table';
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator, MatSnackBar, MatSort, PageEvent } from '@angular/material';
+import { MatPaginator, MatSort } from '@angular/material';
 import { ActivatedRoute, Params, Router } from '@angular/router';
-import { TranslateService } from '@ngx-translate/core';
-import { Observable } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { BaseComponent } from '../../core/common/base/base.component';
+import { DataTableRequest } from '../../core/model/data-table/data-table-request';
 import { DatasetListingModel } from '../../core/model/dataset/dataset-listing';
 import { DatasetCriteria } from '../../core/query/dataset/dataset-criteria';
 import { ExploreDatasetCriteriaModel } from '../../core/query/explore-dataset/explore-dataset-criteria';
 import { DatasetService } from '../../core/services/dataset/dataset.service';
 import { DmpService } from '../../core/services/dmp/dmp.service';
-import { DataTableRequest } from '../../core/model/data-table/data-table-request';
 
 
 @Component({
@@ -23,27 +20,24 @@ export class ExploreDatasetListingComponent extends BaseComponent implements OnI
 
 	@ViewChild(MatPaginator) _paginator: MatPaginator;
 	@ViewChild(MatSort) sort: MatSort;
-	criteria: ExploreDatasetCriteriaModel = new ExploreDatasetCriteriaModel();
 
-	dataSource: DatasetDataSource | null;
-	displayedColumns: String[] = ['label', 'project', 'profile', 'description', 'created'];
-	pageEvent: PageEvent;
 	titlePrefix: String;
 	dmpId: string;
+	totalCount: number;
+	dmpSearchEnabled = true;
+	listingItems: DatasetListingModel[] = [];
+	exploreDatasetCriteriaModel: ExploreDatasetCriteriaModel;
 
 	constructor(
 		private datasetService: DatasetService,
 		private router: Router,
-		private languageService: TranslateService,
-		public snackBar: MatSnackBar,
-		public route: ActivatedRoute,
-		public dmpService: DmpService
+		private route: ActivatedRoute,
+		private dmpService: DmpService,
 	) {
 		super();
 	}
 
 	ngOnInit() {
-
 		this.route.params
 			.pipe(takeUntil(this._destroyed))
 			.subscribe(async (params: Params) => {
@@ -58,20 +52,29 @@ export class ExploreDatasetListingComponent extends BaseComponent implements OnI
 			});
 	}
 
+	refresh() {
+		const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
+		let fields: Array<string> = new Array();
+		if (this.sort && this.sort.active) { fields = this.sort.direction === 'asc' ? ['+' + this.sort.active] : ['-' + this.sort.active]; }
+		const request = new DataTableRequest<ExploreDatasetCriteriaModel>(startIndex, this._paginator.pageSize, { fields: fields });
+		request.criteria = this.exploreDatasetCriteriaModel;
+		this.datasetService.getPublicPaged(request).pipe(takeUntil(this._destroyed)).subscribe(result => {
+			if (!result) { return []; }
+			if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
+			this.listingItems = result.data;
+		});
+	}
+
+	rowClicked(dataset: DatasetListingModel) {
+		this.router.navigate(['/datasets/editPublic/' + dataset.id]);
+	}
+
 	onCriteriaChange(event: ExploreDatasetCriteriaModel) {
 		console.log(event)
-		this.criteria = event;
+		this.exploreDatasetCriteriaModel = event;
 		this.refresh();
 	}
 
-	refresh() {
-		this.dataSource = new DatasetDataSource(this.datasetService, this._paginator, this.sort, this.languageService, this.snackBar, this.criteria, this.dmpId);
-	}
-
-	rowClick(rowId: String) {
-		this.router.navigate(['/datasets/publicEdit/' + rowId]);
-	}
-
 	getDefaultCriteria(dmpId: String): DatasetCriteria {
 		const defaultCriteria = new DatasetCriteria();
 		if (dmpId != null) {
@@ -79,69 +82,4 @@ export class ExploreDatasetListingComponent extends BaseComponent implements OnI
 		}
 		return defaultCriteria;
 	}
-
-	makeItPublic(id: String) {
-		this.datasetService.makeDatasetPublic(id)
-			.pipe(takeUntil(this._destroyed))
-			.subscribe();
-	}
-}
-
-export class DatasetDataSource extends DataSource<DatasetListingModel> {
-
-	totalCount = 0;
-
-	constructor(
-		private _service: DatasetService,
-		private _paginator: MatPaginator,
-		private _sort: MatSort,
-		private _languageService: TranslateService,
-		private _snackBar: MatSnackBar,
-		private _criteria: ExploreDatasetCriteriaModel,
-		private dmpId: String
-	) {
-		super();
-
-	}
-
-	connect(): Observable<DatasetListingModel[]> {
-		const displayDataChanges = [
-			this._paginator.page
-			//this._sort.matSortChange
-		];
-
-
-		return Observable.merge(...displayDataChanges)
-			.startWith(null)
-			.switchMap(() => {
-				const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
-				let fields: Array<string> = new Array();
-				if (this._sort.active) { fields = this._sort.direction === 'asc' ? ['+' + this._sort.active] : ['-' + this._sort.active]; }
-				const request = new DataTableRequest<ExploreDatasetCriteriaModel>(startIndex, this._paginator.pageSize, { fields: fields });
-				request.criteria = this._criteria;
-				//if (this.dmpId) request.criteria.allVersions = true;
-				return this._service.getPublicPaged(request);
-			})
-			/*.catch((error: any) => {
-			  this._snackBar.openFromComponent(SnackBarNotificationComponent, {
-				data: { message: 'GENERAL.SNACK-BAR.FORMS-BAD-REQUEST', language: this._languageService },
-				duration: 3000,
-				extraClasses: ['snackbar-warning']
-			  });
-			  //this._criteria.criteria.onCallbackError(error);
-			  return Observable.of(null);
-			})
-			.map(result => {
-				return result;
-			})*/
-			.map(result => {
-				if (!result) { return []; }
-				if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
-				return result.data;
-			});
-	}
-
-	disconnect() {
-		// No-op
-	}
-}
+}
\ No newline at end of file
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 8221c63bb..d8598add3 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
@@ -6,7 +6,7 @@ import { ExploreDatasetListingComponent } from './explore-dataset-listing.compon
 import { ExploreDatasetRoutingModule } from './explore-dataset.routing';
 import { ExploreDatasetFilterItemComponent } from './filters/explore-dataset-filter-item/explore-dataset-filter-item.component';
 import { ExploreDatasetFiltersComponent } from './filters/explore-dataset-filters.component';
-import { UserDialogComponent } from '../misc/navigation/user-dialog/user-dialog.component';
+import { ExploreDatasetListingItemComponent } from './listing-item/explore-dataset-listing-item.component';
 
 @NgModule({
 	imports: [
@@ -18,7 +18,8 @@ import { UserDialogComponent } from '../misc/navigation/user-dialog/user-dialog.
 	declarations: [
 		ExploreDatasetListingComponent,
 		ExploreDatasetFiltersComponent,
-		ExploreDatasetFilterItemComponent
+		ExploreDatasetFilterItemComponent,
+		ExploreDatasetListingItemComponent
 	]
 })
 export class ExploreDatasetModule { }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.html b/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.html
new file mode 100644
index 000000000..9407c3c06
--- /dev/null
+++ b/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.html
@@ -0,0 +1,19 @@
+<div class="explore-dataset-listing-item row" (click)="itemClicked()">
+	<div class="col-auto">
+		<mat-icon *ngIf="draft" class="draft-bookmark">bookmark</mat-icon>
+		<mat-icon *ngIf="!draft" class="finalized-bookmark">bookmark</mat-icon>
+	</div>
+	<div class="col">
+		<h4>{{ dataset.label }}</h4>
+		<p>{{ dataset.description }}</p>
+		<div class="explore-dataset-info">
+			<h6>{{ dataset.dmp }}</h6>
+			<p>{{ dataset.project }}</p>
+		</div>
+		<div class="template-name"><p>{{ dataset.profile }}</p></div>
+	</div>
+	<!-- <div class="col-auto">
+		<mat-icon>more_horiz</mat-icon>
+	</div> -->
+</div>
+<mat-divider *ngIf="showDivider"></mat-divider>
diff --git a/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.scss b/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.scss
new file mode 100644
index 000000000..c2c6081ff
--- /dev/null
+++ b/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.scss
@@ -0,0 +1,34 @@
+.explore-dataset-info {
+  background-color: #f6f6f6;
+  padding: 8px 15px;
+}
+
+.explore-dataset-info p {
+  margin-bottom: 0px;
+  color: rgb(37, 35, 140);
+  font-weight: 600;
+}
+
+.template-name {
+  padding-left: 0px;
+  border: 1px solid rgb(218, 227, 243);
+  color: rgb(43, 104, 209);
+  background-color: rgb(236, 241, 249);
+  border-radius: 10em;
+  justify-content: center;
+  text-transform: uppercase;
+  display: flex;
+  width: 25em;
+  height: 1.8em;
+  margin-top: 15px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.draft-bookmark {
+  color: #e7e6e6;
+}
+
+.finalized-bookmark {
+  color: #92d050;
+}
diff --git a/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.ts b/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.ts
new file mode 100644
index 000000000..9bee14e7e
--- /dev/null
+++ b/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.ts
@@ -0,0 +1,28 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { DatasetListingModel } from '../../../core/model/dataset/dataset-listing';
+
+@Component({
+	selector: 'app-explore-dataset-listing-item-component',
+	templateUrl: './explore-dataset-listing-item.component.html',
+	styleUrls: ['./explore-dataset-listing-item.component.scss']
+})
+export class ExploreDatasetListingItemComponent implements OnInit {
+
+	@Input() dataset: DatasetListingModel;
+	@Input() showDivider: boolean = true;
+	@Output() onClick: EventEmitter<DatasetListingModel> = new EventEmitter();
+
+	draft: boolean;
+
+	constructor() { }
+
+	ngOnInit() {
+		if (this.dataset.status == 0) { this.draft = true }
+		else { this.draft = false }
+	}
+
+	itemClicked() {
+		this.onClick.emit(this.dataset);
+	}
+
+}