diff --git a/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.html b/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.html
index fc69d3df9..daeb2a07a 100644
--- a/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.html
+++ b/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.html
@@ -1,46 +1,29 @@
-<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="explore-dmp">
-			<h3 class="text-center">{{'DMP-PUBLIC-LISTING.TITLE' | translate}} {{titlePrefix}}</h3>
-			<div class="row">
-				<div class="col-md-3">
-					<app-explore-dmp-filters-component (facetCriteriaChange)="onCriteriaChange($event)"></app-explore-dmp-filters-component>
+		<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">{{'DMP-LISTING.TITLE' | translate}}</h4>
+					<p class="card-category">{{'DMP-LISTING.SUBTITLE' | translate}}</p>
 				</div>
-				<div class="col-md-9">
-					<mat-card class="mat-card">
-						<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
-							<!-- Column Definition: Name -->
-							<ng-container cdkColumnDef="name">
-								<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'DMP-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>{{'DMP-LISTING.COLUMNS.PROJECT' | translate}}
-								</mat-header-cell>
-								<mat-cell *matCellDef="let row"> {{row.project}} </mat-cell>
-							</ng-container>
-
-							<!-- Column Definition: Organisations -->
-							<ng-container cdkColumnDef="organisations">
-								<mat-header-cell *matHeaderCellDef>{{'DMP-LISTING.COLUMNS.ORGANISATIONS' | translate}}</mat-header-cell>
-								<mat-cell *matCellDef="let row"> {{row.organisations}} </mat-cell>
-							</ng-container>
-
-							<!-- Column Definition: Created -->
-							<ng-container cdkColumnDef="created">
-								<mat-header-cell *matHeaderCellDef mat-sort-header="created">{{'DMP-LISTING.COLUMNS.CREATION-TIME' | translate}}
-								</mat-header-cell>
-								<mat-cell *matCellDef="let row">{{row.creationTime | 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>
-						</mat-table>
-						<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
-						</mat-paginator>
-					</mat-card>
+			</div>
+			<div class="card-body table-responsive">
+				<div class="explore-dmp-listing row">
+					<div class="col-3">
+						<app-explore-dmp-filters-component class="col-auto" (facetCriteriaChange)="onCriteriaChange($event)"></app-explore-dmp-filters-component>
+					</div>
+					<div class="col-9">
+						<div class="row" *ngFor="let item of listingItems; let i = index">
+							<app-explore-dmp-listing-item-component class="col-12" [showDivider]="i !== (listingItems.length - 1)" [dmp]="item" (onClick)="rowClicked($event)"></app-explore-dmp-listing-item-component>
+						</div>
+						<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]"></mat-paginator>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.scss b/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.scss
index 931fb0053..593b91480 100644
--- a/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.scss
+++ b/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.scss
@@ -1,3 +1,25 @@
-text-center{
+text-center {
 	text-align: center
-  }
+}
+
+.header-image {
+	background: url('/assets/images/public-dmps-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;
+}
diff --git a/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.ts b/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.ts
index 1e629216f..ef5b16bae 100644
--- a/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.ts
+++ b/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.ts
@@ -1,15 +1,12 @@
-import { BaseComponent } from "../../core/common/base/base.component";
 import { Component, OnInit, ViewChild } from "@angular/core";
-import { Router, ActivatedRoute } from "@angular/router";
-import { MatPaginator, MatSort, MatSnackBar, PageEvent } from "@angular/material";
-import { DataSource } from "@angular/cdk/collections";
-import { DmpListingModel } from "../../core/model/dmp/dmp-listing";
-import { TranslateService } from "@ngx-translate/core";
-import { Observable } from "rxjs";
-import { DmpService } from "../../core/services/dmp/dmp.service";
-import { ExploreDmpCriteriaModel } from "../../core/query/explore-dmp/explore-dmp-criteria";
+import { MatPaginator, MatSort } from "@angular/material";
+import { Router } from "@angular/router";
+import { takeUntil } from "rxjs/operators";
+import { BaseComponent } from "../../core/common/base/base.component";
 import { DataTableRequest } from "../../core/model/data-table/data-table-request";
-import { DmpCriteria } from "../../core/query/dmp/dmp-criteria";
+import { DmpListingModel } from "../../core/model/dmp/dmp-listing";
+import { ExploreDmpCriteriaModel } from "../../core/query/explore-dmp/explore-dmp-criteria";
+import { DmpService } from "../../core/services/dmp/dmp.service";
 
 @Component({
 	selector: 'app-explore-dmp-listing-component',
@@ -20,20 +17,15 @@ export class ExploreDmpListingComponent extends BaseComponent implements OnInit
 
 	@ViewChild(MatPaginator) _paginator: MatPaginator;
 	@ViewChild(MatSort) sort: MatSort;
-	criteria: ExploreDmpCriteriaModel = new ExploreDmpCriteriaModel();
 
-	dataSource: DmpDataSource | null;
-	displayedColumns: String[] = ['name', 'project', 'organisations', 'created'];
-	pageEvent: PageEvent;
-	titlePrefix: String;
-	dmpId: string;
+	exploreDmpCriteriaModel: ExploreDmpCriteriaModel;
+	titlePrefix: string;
+	totalCount: number;
+	listingItems: DmpListingModel[] = [];
 
 	constructor(
-		public dmpService: DmpService,
-		private router: Router,
-		private languageService: TranslateService,
-		public snackBar: MatSnackBar,
-		public route: ActivatedRoute
+		private dmpService: DmpService,
+		private router: Router
 	) {
 		super();
 	}
@@ -42,65 +34,117 @@ export class ExploreDmpListingComponent extends BaseComponent implements OnInit
 		this.refresh();
 	}
 
-	rowClick(rowId: String) {
-		this.router.navigate(['/plans/publicEdit/' + rowId]);
-	}
-
 	refresh() {
-		this.dataSource = new DmpDataSource(this.dmpService, this._paginator, this.sort, this.languageService, this.snackBar, this.criteria);
+		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<ExploreDmpCriteriaModel>(startIndex, this._paginator.pageSize, { fields: fields });
+		request.criteria = this.exploreDmpCriteriaModel || this.getDefaultCriteria();
+		this.dmpService.getPublicPaged(request).pipe(takeUntil(this._destroyed)).subscribe(result => {
+			if (!result) { return []; }
+			if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
+			this.listingItems = result.data;
+		});
 	}
 
-	getDefaultCriteria(dmpId: String): DmpCriteria {
-		const defaultCriteria = new DmpCriteria();
+	rowClicked(dmp: DmpListingModel) {
+		this.router.navigate(['/plans/publicEdit/' + dmp.id]);
+	}
+
+	getDefaultCriteria(): ExploreDmpCriteriaModel {
+		const defaultCriteria = new ExploreDmpCriteriaModel();
 		return defaultCriteria;
 	}
 
 	onCriteriaChange(event: ExploreDmpCriteriaModel) {
 		//console.log(event)
-		this.criteria = event;
+		this.exploreDmpCriteriaModel = event;
 		this.refresh();
 	}
+
+	// @ViewChild(MatPaginator) _paginator: MatPaginator;
+	// @ViewChild(MatSort) sort: MatSort;
+	// criteria: ExploreDmpCriteriaModel = new ExploreDmpCriteriaModel();
+
+	// dataSource: DmpDataSource | null;
+	// displayedColumns: String[] = ['name', 'project', 'organisations', 'created'];
+	// pageEvent: PageEvent;
+	// titlePrefix: String;
+	// dmpId: string;
+
+	// constructor(
+	// 	public dmpService: DmpService,
+	// 	private router: Router,
+	// 	private languageService: TranslateService,
+	// 	public snackBar: MatSnackBar,
+	// 	public route: ActivatedRoute
+	// ) {
+	// 	super();
+	// }
+
+	// ngOnInit() {
+	// 	this.refresh();
+	// }
+
+	// rowClick(rowId: String) {
+	// 	this.router.navigate(['/plans/publicEdit/' + rowId]);
+	// }
+
+	// refresh() {
+	// 	this.dataSource = new DmpDataSource(this.dmpService, this._paginator, this.sort, this.languageService, this.snackBar, this.criteria);
+	// }
+
+	// getDefaultCriteria(dmpId: String): DmpCriteria {
+	// 	const defaultCriteria = new DmpCriteria();
+	// 	return defaultCriteria;
+	// }
+
+	// onCriteriaChange(event: ExploreDmpCriteriaModel) {
+	// 	//console.log(event)
+	// 	this.criteria = event;
+	// 	this.refresh();
+	// }
 }
 
-export class DmpDataSource extends DataSource<DmpListingModel> {
+// export class DmpDataSource extends DataSource<DmpListingModel> {
 
-	totalCount = 0;
+// 	totalCount = 0;
 
-	constructor(
-		private _service: DmpService,
-		private _paginator: MatPaginator,
-		private _sort: MatSort,
-		private _languageService: TranslateService,
-		private _snackBar: MatSnackBar,
-		private _criteria: ExploreDmpCriteriaModel,
-	) {
-		super();
-	}
+// 	constructor(
+// 		private _service: DmpService,
+// 		private _paginator: MatPaginator,
+// 		private _sort: MatSort,
+// 		private _languageService: TranslateService,
+// 		private _snackBar: MatSnackBar,
+// 		private _criteria: ExploreDmpCriteriaModel,
+// 	) {
+// 		super();
+// 	}
 
-	connect(): Observable<DmpListingModel[]> {
-		const displayDataChanges = [
-			this._paginator.page
-		];
+// 	connect(): Observable<DmpListingModel[]> {
+// 		const displayDataChanges = [
+// 			this._paginator.page
+// 		];
 
-		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<ExploreDmpCriteriaModel>(startIndex, this._paginator.pageSize, { fields: fields });
-				request.criteria = this._criteria;
-				//if (this.dmpId) request.criteria.allVersions = true;
-				return this._service.getPublicPaged(request);
-			})
-			.map(result => {
-				if (!result) { return []; }
-				if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
-				return result.data;
-			});
-	}
+// 		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<ExploreDmpCriteriaModel>(startIndex, this._paginator.pageSize, { fields: fields });
+// 				request.criteria = this._criteria;
+// 				//if (this.dmpId) request.criteria.allVersions = true;
+// 				return this._service.getPublicPaged(request);
+// 			})
+// 			.map(result => {
+// 				if (!result) { return []; }
+// 				if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
+// 				return result.data;
+// 			});
+// 	}
 
-	disconnect(): void {
-		// No-op
-	}
-}
+// 	disconnect(): void {
+// 		// No-op
+// 	}
+// }
diff --git a/dmp-frontend/src/app/ui/explore-dmp/explore-dmp.module.ts b/dmp-frontend/src/app/ui/explore-dmp/explore-dmp.module.ts
index 20d46c9c9..1642fd133 100644
--- a/dmp-frontend/src/app/ui/explore-dmp/explore-dmp.module.ts
+++ b/dmp-frontend/src/app/ui/explore-dmp/explore-dmp.module.ts
@@ -1,11 +1,12 @@
 import { NgModule } from "@angular/core";
-import { CommonUiModule } from "../../common/ui/common-ui.module";
 import { CommonFormsModule } from "../../common/forms/common-forms.module";
+import { CommonUiModule } from "../../common/ui/common-ui.module";
 import { AutoCompleteModule } from "../../library/auto-complete/auto-complete.module";
+import { ExploreDmpFilterItemComponent } from "./dmp-explore-filters/explore-dmp-filter-item/explore-dmp-filter-item.component";
+import { ExploreDmpFiltersComponent } from "./dmp-explore-filters/explore-dmp-filters.component";
 import { ExploreDmpListingComponent } from "./explore-dmp-listing.component";
 import { ExploreDmpRoutingModule } from "./explore-dmp.routing";
-import { ExploreDmpFiltersComponent } from "./dmp-explore-filters/explore-dmp-filters.component";
-import { ExploreDmpFilterItemComponent } from "./dmp-explore-filters/explore-dmp-filter-item/explore-dmp-filter-item.component";
+import { ExploreDmpListingItemComponent } from "./listing-item/explore-dmp-listing-item.component";
 
 @NgModule({
 	imports: [
@@ -17,7 +18,8 @@ import { ExploreDmpFilterItemComponent } from "./dmp-explore-filters/explore-dmp
 	declarations: [
 		ExploreDmpListingComponent,
 		ExploreDmpFiltersComponent,
-		ExploreDmpFilterItemComponent
+		ExploreDmpFilterItemComponent,
+		ExploreDmpListingItemComponent
 	]
 })
-export class ExploreDmpModule {}
+export class ExploreDmpModule { }
diff --git a/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.html b/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.html
new file mode 100644
index 000000000..aab3e01ca
--- /dev/null
+++ b/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.html
@@ -0,0 +1,35 @@
+<div class="explore-dmp-listing-item row" (click)="itemClicked()">
+	<div class="col-auto">
+		<mat-icon>lock</mat-icon>
+	</div>
+	<div class="col">
+		<div class="row">
+			<h4 class="col-12 title">{{dmp.label}}</h4>
+			<h4 class="col-12 project-title">{{dmp.project}}</h4>
+		</div>
+		<div class="row d-flex align-items-center my-1">
+			<mat-icon class="col-auto type-icon">storage</mat-icon>
+			<h4 class="col-auto m-2 p-1">{{dmp.associatedProfiles.length}}</h4>
+			<div class="row" *ngFor="let profile of dmp.associatedProfiles">
+				<div class="col-auto explore-dmp-chip ml-2">{{profile.label}}</div>
+			</div>
+		</div>
+		<div class="row d-flex align-items-center my-1">
+			<mat-icon class="col-auto type-icon">settings</mat-icon>
+			<h4 class="col-auto m-0 p-0">OWNER</h4>
+		</div>
+		<div class="row d-flex align-items-center my-1">
+			<mat-icon class="col-auto type-icon">group</mat-icon>
+			<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
+			<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
+			<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
+			<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
+			<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
+			<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
+		</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-dmp/listing-item/explore-dmp-listing-item.component.scss b/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.scss
new file mode 100644
index 000000000..392b76645
--- /dev/null
+++ b/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.scss
@@ -0,0 +1,38 @@
+.explore-dmp-listing-item {
+	margin-top: 2em;
+	margin-bottom: 2em;
+	cursor: pointer;
+
+	.title {
+		color: black;
+	}
+
+	.project-title {
+		color: rgb(93, 125, 173);
+	}
+
+	.type-icon {
+		color: rgb(191, 191, 191);
+	}
+
+	.explore-dmp-chip {
+		padding: 0.1em 1em;
+		border: 0.1em solid rgb(236, 241, 249);
+		border-radius: 10em;
+		background-color: rgb(236, 241, 249);
+		color: rgb(68, 114, 196);
+	}
+
+	.explore-dmp-squared-chip {
+		padding: 0.1em 1em;
+		border: 0.1em solid rgb(236, 241, 249);
+		border-radius: 0.5em;
+		background-color: rgb(246, 246, 246);
+		color: rgb(127, 127, 127);
+	}
+
+	mat-icon {
+		width: auto;
+		height: auto;
+	}
+}
diff --git a/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.ts b/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.ts
new file mode 100644
index 000000000..29e7f0b6a
--- /dev/null
+++ b/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.ts
@@ -0,0 +1,26 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { DmpListingModel } from '../../../core/model/dmp/dmp-listing';
+
+@Component({
+	selector: 'app-explore-dmp-listing-item-component',
+	templateUrl: './explore-dmp-listing-item.component.html',
+	styleUrls: ['./explore-dmp-listing-item.component.scss'],
+})
+export class ExploreDmpListingItemComponent implements OnInit {
+
+	@Input() dmp: DmpListingModel;
+	@Input() showDivider: boolean = true;
+	@Output() onClick: EventEmitter<DmpListingModel> = new EventEmitter();
+
+	constructor(
+
+	) {
+	}
+
+	ngOnInit() {
+	}
+
+	itemClicked() {
+		this.onClick.emit(this.dmp);
+	}
+}
diff --git a/dmp-frontend/src/app/ui/project/listing/criteria/project-criteria.component.html b/dmp-frontend/src/app/ui/project/listing/criteria/project-criteria.component.html
index 6d3548c02..0c210a148 100644
--- a/dmp-frontend/src/app/ui/project/listing/criteria/project-criteria.component.html
+++ b/dmp-frontend/src/app/ui/project/listing/criteria/project-criteria.component.html
@@ -1,42 +1,40 @@
-<mat-card class="mat-card">
-	<div class="row">
-		<!-- <h4 class="col-md-12">{{'CRITERIA.FILTERS'| translate}}</h4> -->
-		<mat-form-field class="col-md-3">
-			<input matInput placeholder=" {{'CRITERIA.PROJECTS.LIKE'| translate}}" name="projectCriteriaLike" [(ngModel)]="criteria.like"
-			 (ngModelChange)="controlModified()">
-		</mat-form-field>
-		<mat-form-field class="col-md-3">
-			<input matInput (focus)="periodStartPicker.open()" (click)="periodStartPicker.open()" placeholder=" {{this.languageResolver.getBy('criteriaStart')| translate}}"
-			 [matDatepicker]="periodStartPicker" name="projectCriteriaPeriodStart" [(ngModel)]="criteria.periodStart"
-			 (ngModelChange)="controlModified()" [errorStateMatcher]="this">
-			<mat-datepicker-toggle matSuffix [for]="periodStartPicker"></mat-datepicker-toggle>
-			<mat-datepicker #periodStartPicker></mat-datepicker>
-			<mat-error>{{'GENERAL.VALIDATION.PROJECT-START-AFTER-END' | translate}}</mat-error>
-		</mat-form-field>
+<div class="project-criteria">
+	<div class="filters">
+		<h6 class="filters-title">{{'CRITERIA.FILTERS'| translate}}</h6>
+		<div class="row" style="justify-content: center;">
+			<!-- <h4 class="col-md-12">{{'CRITERIA.FILTERS'| translate}}</h4> -->
+			<mat-form-field class="col-11 search">
+				<input matInput placeholder=" {{'CRITERIA.PROJECTS.LIKE'| translate}}" name="projectCriteriaLike" [(ngModel)]="criteria.like" (ngModelChange)="controlModified()">
+				<mat-icon matSuffix class="style-icon">search</mat-icon>
+			</mat-form-field>
+			<mat-form-field class="col-10 filter-category">
+				<input matInput (focus)="periodStartPicker.open()" (click)="periodStartPicker.open()" placeholder=" {{this.languageResolver.getBy('criteriaStart')| translate}}" [matDatepicker]="periodStartPicker" name="projectCriteriaPeriodStart" [(ngModel)]="criteria.periodStart" (ngModelChange)="controlModified()" [errorStateMatcher]="this">
+				<mat-datepicker-toggle matSuffix [for]="periodStartPicker"></mat-datepicker-toggle>
+				<mat-datepicker #periodStartPicker></mat-datepicker>
+				<mat-error>{{'GENERAL.VALIDATION.PROJECT-START-AFTER-END' | translate}}</mat-error>
+			</mat-form-field>
 
-		<mat-form-field class="col-md-3">
-			<input matInput (focus)="periodEndPicker.open()" (click)="periodEndPicker.open()" name="projectCriteriaPeriodEnd"
-			 placeholder=" {{this.languageResolver.getBy('criteriaEnd')| translate}}" [matDatepicker]="periodEndPicker"
-			 [(ngModel)]="criteria.periodEnd" (ngModelChange)="controlModified()" [errorStateMatcher]="this">
-			<mat-datepicker-toggle matSuffix [for]="periodEndPicker"></mat-datepicker-toggle>
-			<mat-datepicker #periodEndPicker></mat-datepicker>
-			<mat-error>{{'GENERAL.VALIDATION.PROJECT-START-AFTER-END' | translate}}</mat-error>
-		</mat-form-field>
+			<mat-form-field class="col-10 filter-category">
+				<input matInput (focus)="periodEndPicker.open()" (click)="periodEndPicker.open()" name="projectCriteriaPeriodEnd" placeholder=" {{this.languageResolver.getBy('criteriaEnd')| translate}}" [matDatepicker]="periodEndPicker" [(ngModel)]="criteria.periodEnd" (ngModelChange)="controlModified()" [errorStateMatcher]="this">
+				<mat-datepicker-toggle matSuffix [for]="periodEndPicker"></mat-datepicker-toggle>
+				<mat-datepicker #periodEndPicker></mat-datepicker>
+				<mat-error>{{'GENERAL.VALIDATION.PROJECT-START-AFTER-END' | translate}}</mat-error>
+			</mat-form-field>
 
 
-		<mat-form-field class="col-md-3">
-			<mat-select placeholder=" {{ 'CRITERIA.PROJECTS.PROJECT-STATE-TYPE' | translate}}" [(ngModel)]="criteria.projectStateType"
-			 (ngModelChange)="controlModified()">
-			 <mat-option [value]="null">
-				{{ 'CRITERIA.PROJECTS.TYPES.NONE' | translate}}
-				</mat-option>
-				<mat-option [value]="ProjectStateType.OnGoing">
-					{{ 'CRITERIA.PROJECTS.TYPES.ON-GOING' | translate}}
-				</mat-option>
-				<mat-option [value]="ProjectStateType.Finished">
-					{{ 'CRITERIA.PROJECTS.TYPES.FINISHED' | translate}}
-				</mat-option>
-			</mat-select>
-		</mat-form-field>
+			<mat-form-field class="col-10 filter-category">
+				<mat-select placeholder=" {{ 'CRITERIA.PROJECTS.PROJECT-STATE-TYPE' | translate}}" [(ngModel)]="criteria.projectStateType" (ngModelChange)="controlModified()">
+					<mat-option [value]="null">
+						{{ 'CRITERIA.PROJECTS.TYPES.NONE' | translate}}
+					</mat-option>
+					<mat-option [value]="ProjectStateType.OnGoing">
+						{{ 'CRITERIA.PROJECTS.TYPES.ON-GOING' | translate}}
+					</mat-option>
+					<mat-option [value]="ProjectStateType.Finished">
+						{{ 'CRITERIA.PROJECTS.TYPES.FINISHED' | translate}}
+					</mat-option>
+				</mat-select>
+			</mat-form-field>
+		</div>
 	</div>
-</mat-card>
+</div>
diff --git a/dmp-frontend/src/app/ui/project/listing/criteria/project-criteria.component.scss b/dmp-frontend/src/app/ui/project/listing/criteria/project-criteria.component.scss
index e69de29bb..103304330 100644
--- a/dmp-frontend/src/app/ui/project/listing/criteria/project-criteria.component.scss
+++ b/dmp-frontend/src/app/ui/project/listing/criteria/project-criteria.component.scss
@@ -0,0 +1,117 @@
+.dmp-criteria {
+	mat-form-field {
+	  padding-bottom: 5px;
+	  width: 100%;
+	}
+  
+	mat-card {
+	  padding-bottom: 0px;
+	}
+  
+	.hidden {
+	  display: none;
+	}
+  
+	.uploadButton {
+	  float: right;
+	}
+  }
+  
+  .search ::ng-deep.mat-form-field-infix {
+	margin-left: 1em;
+  }
+  
+  .filter-category {
+	background-color: #f6f6f6;
+	margin: 5px 0px;
+  }
+  
+  .category-title {
+	color: #2e75b6;
+	margin-top: 8px;
+	margin-bottom: 12px;
+  }
+  
+  .import {
+	margin: 10px;
+	padding: 0px;
+  }
+  
+  .filters {
+	border: 1px solid #e4e4e4;
+	border-radius: 5px;
+  }
+  
+  .filters-title {
+	width: 90px;
+	color: #2e75b6;
+	background-color: white;
+	padding: 0px 20px;
+	margin-top: -10px;
+	margin-left: 20px;
+	text-transform: uppercase;
+  }
+  
+  .style-icon {
+	color: #adadad;
+  }
+  
+  ::ng-deep .mat-checkbox-inner-container {
+	background: white;
+  }
+  
+  ::ng-deep .mat-focused .mat-form-field-label {
+	color: #2e75b6 !important;
+  }
+  
+  ::ng-deep.mat-form-field-underline {
+	background-color: #adadad !important;
+  }
+  
+  ::ng-deep.mat-form-field-ripple {
+	background-color: #2e75b6 !important;
+  }
+  
+  ::ng-deep .mat-checkbox {
+	background-color: #f6f6f6 !important;
+  }
+  
+  ::ng-deep .mat-checkbox .mat-checkbox-frame {
+	border: 1px solid #aaaaaa;
+  }
+  
+  ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,
+  .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
+  .mat-accent .mat-pseudo-checkbox-checked,
+  .mat-accent .mat-pseudo-checkbox-indeterminate,
+  .mat-pseudo-checkbox-checked,
+  .mat-pseudo-checkbox-indeterminate {
+	background-color: #2e75b6;
+  }
+  
+  ::ng-deep .mat-ripple-element {
+	background-color: #2e74b649 !important;
+  }
+  
+  ::ng-deep .mat-radio-container {
+	border-radius: 1em;
+	background: white;
+  }
+  
+  ::ng-deep .mat-radio-button .mat-radio-outer-circle {
+	border: 1px solid #aaaaaa;
+  }
+  
+  ::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
+	border-color: #2e75b6;
+  }
+  
+  ::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
+	color: #2e75b6;
+	background-color: #2e75b6;
+  }
+  
+  .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
+	background-color: #2e74b649;
+  }
+  
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/project/listing/listing-item/project-listing-item.component.html b/dmp-frontend/src/app/ui/project/listing/listing-item/project-listing-item.component.html
new file mode 100644
index 000000000..ba1566b83
--- /dev/null
+++ b/dmp-frontend/src/app/ui/project/listing/listing-item/project-listing-item.component.html
@@ -0,0 +1,20 @@
+<div class="project-listing-item row" (click)="itemClicked()">
+	<div class="col-auto">
+		<mat-icon>lock</mat-icon>
+	</div>
+	<div class="col">
+		<div class="row">
+			<h4 class="col-12 title">{{project.label}}</h4>
+			<h4 class="col-12 project-title">{{project.abbreviation}}</h4>
+		</div>
+		<div class="row d-flex align-items-center my-1">
+			<mat-icon class="col-auto type-icon">desc</mat-icon>
+			<span class="col-auto m-2 p-1">{{project.description}}</span>
+		</div>
+		<div class="row d-flex align-items-center my-1">
+			<mat-icon class="col-auto type-icon">settings</mat-icon>
+			<h4 class="col-auto m-2 p-1">{{project.startDate | date:'shortDate'}}</h4> - <h4 class="col-auto m-2 p-1">{{project.endDate | date:'shortDate'}}</h4>
+		</div>
+	</div>
+</div>
+<mat-divider *ngIf="showDivider"></mat-divider>
diff --git a/dmp-frontend/src/app/ui/project/listing/listing-item/project-listing-item.component.scss b/dmp-frontend/src/app/ui/project/listing/listing-item/project-listing-item.component.scss
new file mode 100644
index 000000000..7165dbded
--- /dev/null
+++ b/dmp-frontend/src/app/ui/project/listing/listing-item/project-listing-item.component.scss
@@ -0,0 +1,38 @@
+.project-listing-item {
+	margin-top: 2em;
+	margin-bottom: 2em;
+	cursor: pointer;
+
+	.title {
+		color: black;
+	}
+
+	.project-title {
+		color: rgb(93, 125, 173);
+	}
+
+	.type-icon {
+		color: rgb(191, 191, 191);
+	}
+
+	.project-chip {
+		padding: 0.1em 1em;
+		border: 0.1em solid rgb(236, 241, 249);
+		border-radius: 10em;
+		background-color: rgb(236, 241, 249);
+		color: rgb(68, 114, 196);
+	}
+
+	.project-squared-chip {
+		padding: 0.1em 1em;
+		border: 0.1em solid rgb(236, 241, 249);
+		border-radius: 0.5em;
+		background-color: rgb(246, 246, 246);
+		color: rgb(127, 127, 127);
+	}
+
+	mat-icon {
+		width: auto;
+		height: auto;
+	}
+}
diff --git a/dmp-frontend/src/app/ui/project/listing/listing-item/project-listing-item.component.ts b/dmp-frontend/src/app/ui/project/listing/listing-item/project-listing-item.component.ts
new file mode 100644
index 000000000..38426724a
--- /dev/null
+++ b/dmp-frontend/src/app/ui/project/listing/listing-item/project-listing-item.component.ts
@@ -0,0 +1,26 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ProjectListingModel } from '../../../../core/model/project/project-listing';
+
+@Component({
+	selector: 'app-project-listing-item-component',
+	templateUrl: './project-listing-item.component.html',
+	styleUrls: ['./project-listing-item.component.scss'],
+})
+export class ProjectListingItemComponent implements OnInit {
+
+	@Input() project: ProjectListingModel;
+	@Input() showDivider: boolean = true;
+	@Output() onClick: EventEmitter<ProjectListingModel> = new EventEmitter();
+
+	constructor(
+
+	) {
+	}
+
+	ngOnInit() {
+	}
+
+	itemClicked() {
+		this.onClick.emit(this.project);
+	}
+}
diff --git a/dmp-frontend/src/app/ui/project/listing/project-listing.component.html b/dmp-frontend/src/app/ui/project/listing/project-listing.component.html
index d3c8da717..8af497424 100644
--- a/dmp-frontend/src/app/ui/project/listing/project-listing.component.html
+++ b/dmp-frontend/src/app/ui/project/listing/project-listing.component.html
@@ -1,3 +1,34 @@
+<div class="main-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">{{languageResolverService.getBy('listingTitle') | translate}}</h4>
+					<p class="card-category">{{'PROJECT-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]="['./new']">
+						<mat-icon>add</mat-icon> {{'PROJECT-LISTING.ACTIONS.NEW' | translate}}
+					</button>
+				</div>
+			</div>
+			<div class="card-body table-responsive">
+				<div class="project-listing row">
+					<div class="col-3">
+						<app-project-criteria-component class="col-auto"></app-project-criteria-component>
+					</div>
+					<div class="col-9">
+						<div class="row" *ngFor="let item of listingItems; let i = index">
+							<app-project-listing-item-component class="col-12" [showDivider]="i !== (listingItems.length - 1)" [project]="item" (onClick)="rowClicked($event)"></app-project-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">
 		<h3>{{languageResolverService.getBy('listingTitle') | translate}}</h3>
@@ -13,32 +44,23 @@
 								<img mat-card-avatar [src]="host+'files/'+row.files[0].id+'?location='+row.files[0].location+'&type='+row.files[0].type">
 							</mat-cell>
 						</ng-container>
-						<!-- Column Definition: Name -->
 						<ng-container cdkColumnDef="name">
 							<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'PROJECT-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
 							<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
 						</ng-container>
-
-						<!-- Column Definition: Αbbreviation -->
 						<ng-container cdkColumnDef="abbreviation">
 							<mat-header-cell *matHeaderCellDef mat-sort-header="abbreviation">{{'PROJECT-LISTING.COLUMNS.ABBREVIATION' |
 								translate}}</mat-header-cell>
 							<mat-cell *matCellDef="let row"> {{row.abbreviation}} </mat-cell>
 						</ng-container>
-
-						<!-- Column Definition: Start -->
 						<ng-container cdkColumnDef="start">
 							<mat-header-cell *matHeaderCellDef mat-sort-header="startdate">{{'PROJECT-LISTING.COLUMNS.START' | translate}}</mat-header-cell>
 							<mat-cell *matCellDef="let row"> {{row.startDate | date:'shortDate'}} </mat-cell>
 						</ng-container>
-
-						<!-- Column Definition: End -->
 						<ng-container cdkColumnDef="end">
 							<mat-header-cell *matHeaderCellDef mat-sort-header="enddate">{{'PROJECT-LISTING.COLUMNS.END' | translate}}</mat-header-cell>
 							<mat-cell *matCellDef="let row"> {{row.endDate | date:'shortDate'}} </mat-cell>
 						</ng-container>
-
-						<!-- Column Definition: End -->
 						<ng-container cdkColumnDef="dmps">
 							<mat-header-cell *matHeaderCellDef>{{'PROJECT-LISTING.COLUMNS.DMPS' | translate}}</mat-header-cell>
 							<mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
@@ -46,13 +68,6 @@
 							</mat-cell>
 						</ng-container>
 
-
-						<!-- Column Definition: Submission Time -->
-						<!-- <ng-container cdkColumnDef="actions">
-					<mat-header-cell *matHeaderCellDef>{{'PROJECT-LISTING.COLUMNS.ACTIONS' | translate}}</mat-header-cell>
-					<mat-cell *matCellDef="let row"></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>
 
@@ -67,4 +82,4 @@
 			<mat-icon class="mat-24">add</mat-icon>
 		</button>
 	</div>
-</div>
+</div> -->
diff --git a/dmp-frontend/src/app/ui/project/listing/project-listing.component.scss b/dmp-frontend/src/app/ui/project/listing/project-listing.component.scss
index a1f09da3f..a1dde24bb 100644
--- a/dmp-frontend/src/app/ui/project/listing/project-listing.component.scss
+++ b/dmp-frontend/src/app/ui/project/listing/project-listing.component.scss
@@ -1,30 +1,46 @@
-.mat-card {
-	margin: 1em 0;
-}
-
 .project-listing {
 	.mat-card {
-		margin: 1em 0;
+	  margin: 1em 0;
 	}
-
-	.mat-row {
-		cursor: pointer;
+  
+	.col-9 {
+	  display: flex;
+	  flex-direction: column;
 	}
-
-	mat-row:hover {
-		background-color: lightgray;
-	}
-
-	mat-row:nth-child(odd) {
-		background-color: #eef0fb;
-	}
-
-	.mat-fab-bottom {
-		top: auto !important;
-		right: 20px !important;
-		bottom: 10px !important;
-		left: auto !important;
-		position: fixed !important;
-		z-index: 5;
-	}
-}
+  }
+  
+  ::ng-deep .mat-paginator {
+	margin-top: auto;
+  }
+  
+  ::ng-deep .mat-paginator-container {
+	flex-direction: row-reverse !important;
+	justify-content: space-between !important;
+	background-color: #f6f6f6;
+	height: 30px;
+	min-height: 30px !important;
+  }
+  
+  ::ng-deep .mat-paginator-page-size {
+	height: 43px;
+  }
+  
+  ::ng-deep .mat-icon-button {
+	height: 30px !important;
+	font-size: 12px !important;
+  }
+  
+  ::ng-deep .mat-paginator-range-label {
+	margin: 15px 32px 0 24px !important;
+  }
+  
+  ::ng-deep .mat-paginator-range-actions {
+	width: 55% !important;
+	min-height: 43px !important;
+	justify-content: space-between;
+  }
+  
+  ::ng-deep .mat-paginator-navigation-previous {
+	margin-left: auto !important;
+  }
+  
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/project/listing/project-listing.component.ts b/dmp-frontend/src/app/ui/project/listing/project-listing.component.ts
index 84350067e..17c9b14cb 100644
--- a/dmp-frontend/src/app/ui/project/listing/project-listing.component.ts
+++ b/dmp-frontend/src/app/ui/project/listing/project-listing.component.ts
@@ -1,45 +1,40 @@
-import { DataSource } from '@angular/cdk/table';
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator, MatSnackBar, MatSort } from '@angular/material';
+import { MatPaginator, MatSort } from '@angular/material';
 import { Router } from '@angular/router';
-import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
-import { environment } from '../../../../environments/environment';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../../core/common/base/base.component';
 import { ProjectStateType } from '../../../core/common/enum/project-state-type';
+import { DataTableRequest } from '../../../core/model/data-table/data-table-request';
 import { ProjectListingModel } from '../../../core/model/project/project-listing';
 import { ProjectCriteria } from '../../../core/query/project/project-criteria';
 import { ProjectService } from '../../../core/services/project/project.service';
-import { DataTableRequest } from '../../../core/model/data-table/data-table-request';
-import { LanguageResolverService } from '../../../services/language-resolver/language-resolver.service';
 import { BreadcrumbItem } from '../../misc/breadcrumb/definition/breadcrumb-item';
 import { IBreadCrumbComponent } from '../../misc/breadcrumb/definition/IBreadCrumbComponent';
 import { ProjectCriteriaComponent } from './criteria/project-criteria.component';
+import { LanguageResolverService } from '../../../services/language-resolver/language-resolver.service';
 
 @Component({
 	selector: 'app-project-listing-component',
 	templateUrl: 'project-listing.component.html',
 	styleUrls: ['./project-listing.component.scss']
 })
-export class ProjectListingComponent implements OnInit, IBreadCrumbComponent {
-
-	public breadCrumbs: Observable<BreadcrumbItem[]> = Observable.of([]);
+export class ProjectListingComponent extends BaseComponent implements OnInit, IBreadCrumbComponent {
 
 	@ViewChild(MatPaginator) _paginator: MatPaginator;
 	@ViewChild(MatSort) sort: MatSort;
 	@ViewChild(ProjectCriteriaComponent) criteria: ProjectCriteriaComponent;
 
-	host = environment.Server;
-	dataSource: ProjectDataSource | null;
-	displayedColumns: String[] = ['avatar', 'name', 'abbreviation', 'start', 'end', 'dmps'];
+	breadCrumbs: Observable<BreadcrumbItem[]> = Observable.of([]);
+	totalCount: number;
+	listingItems: ProjectListingModel[] = [];
 
 	constructor(
-		public projectService: ProjectService,
-		public router: Router,
-		public languageService: TranslateService,
-		public snackBar: MatSnackBar,
+		private projectService: ProjectService,
+		private router: Router,
 		public languageResolverService: LanguageResolverService
 	) {
-
+		super();
 	}
 
 	ngOnInit() {
@@ -51,92 +46,26 @@ export class ProjectListingComponent implements OnInit, IBreadCrumbComponent {
 	}
 
 	refresh() {
-		this.dataSource = new ProjectDataSource(this.projectService, this._paginator, this.sort, this.languageService, this.snackBar, this.criteria);
+		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<ProjectCriteria>(startIndex, this._paginator.pageSize, { fields: fields });
+		request.criteria = this.criteria.criteria;
+		this.projectService.getPaged(request, "listing").pipe(takeUntil(this._destroyed)).subscribe(result => {
+			if (!result) { return []; }
+			if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
+			this.listingItems = result.data;
+		});
 	}
 
-	rowClick(rowId: String) {
-		this.router.navigate(['/projects/edit/' + rowId]);
+	rowClicked(project: ProjectListingModel) {
+		this.router.navigate(['/projects/edit/' + project.id]);
 	}
 
 	getDefaultCriteria(): ProjectCriteria {
 		const defaultCriteria = new ProjectCriteria();
-		defaultCriteria.projectStateType = ProjectStateType.OnGoing;
 		return defaultCriteria;
 	}
 }
 
-export class ProjectDataSource extends DataSource<ProjectListingModel> {
 
-	totalCount = 0;
-
-	constructor(
-		private _service: ProjectService,
-		private _paginator: MatPaginator,
-		private _sort: MatSort,
-		private _languageService: TranslateService,
-		private _snackBar: MatSnackBar,
-		private _criteria: ProjectCriteriaComponent
-	) {
-		super();
-
-		//this._paginator.page.pipe(takeUntil(this._destroyed)).subscribe((pageEvent: PageEvent) => {
-		//    this.store.dispatch(new LoadPhotosRequestAction(pageEvent.pageIndex, pageEvent.pageSize))
-		//})
-	}
-
-	connect(): Observable<ProjectListingModel[]> {
-		const displayDataChanges = [
-			this._paginator.page
-			//this._sort.matSortChange
-		];
-
-		// If the user changes the sort order, reset back to the first page.
-		//this._sort.matSortChange.pipe(takeUntil(this._destroyed)).subscribe(() => {
-		//    this._paginator.pageIndex = 0;
-		//})
-
-		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<ProjectCriteria>(startIndex, this._paginator.pageSize, { fields: fields });
-				request.criteria = this._criteria.criteria;
-				return this._service.getPaged(request, "listing");
-			})
-			/*.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.onCallbackError(error.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.map(item => {
-					item.dmps.map(dmp => {
-						dmp.url = 'plans/edit/' + dmp.url;
-						dmp.all = 'plans/project/' + item.id;
-						return dmp;
-					});
-					return item;
-				});
-			});
-
-	}
-
-	disconnect() {
-		// No-op
-	}
-}
diff --git a/dmp-frontend/src/app/ui/project/project.module.ts b/dmp-frontend/src/app/ui/project/project.module.ts
index 2b31c5f29..ada91664b 100644
--- a/dmp-frontend/src/app/ui/project/project.module.ts
+++ b/dmp-frontend/src/app/ui/project/project.module.ts
@@ -5,6 +5,7 @@ import { ConfirmationDialogModule } from '../../library/confirmation-dialog/conf
 import { UrlListingModule } from '../../library/url-listing/url-listing.module';
 import { ProjectEditorComponent } from './editor/project-editor.component';
 import { ProjectCriteriaComponent } from './listing/criteria/project-criteria.component';
+import { ProjectListingItemComponent } from './listing/listing-item/project-listing-item.component';
 import { ProjectListingComponent } from './listing/project-listing.component';
 import { ProjectRoutingModule } from './project.routing';
 
@@ -19,7 +20,8 @@ import { ProjectRoutingModule } from './project.routing';
 	declarations: [
 		ProjectListingComponent,
 		ProjectCriteriaComponent,
-		ProjectEditorComponent
+		ProjectEditorComponent,
+		ProjectListingItemComponent
 	]
 })
 export class ProjectModule { }
\ No newline at end of file
diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json
index 57d46aab9..a0b4ee1f6 100644
--- a/dmp-frontend/src/assets/i18n/en.json
+++ b/dmp-frontend/src/assets/i18n/en.json
@@ -202,14 +202,9 @@
 	},
 	"PROJECT-LISTING": {
 		"TITLE": "Projects",
-		"COLUMNS": {
-			"AVATAR": "Image",
-			"NAME": "Name",
-			"ABBREVIATION": "Abbreviation",
-			"START": "Start",
-			"END": "End",
-			"ACTIONS": "Actions",
-			"DMPS": "DMPs"
+		"SUBTITLE": "Project Subtitle",
+		"ACTIONS": {
+			"NEW":"New Project"
 		}
 	},
 	"DMP-LISTING": {
diff --git a/dmp-frontend/src/assets/images/public-datasets-bg.png b/dmp-frontend/src/assets/images/public-datasets-bg.png
new file mode 100644
index 000000000..019998754
Binary files /dev/null and b/dmp-frontend/src/assets/images/public-datasets-bg.png differ
diff --git a/dmp-frontend/src/assets/images/public-dmps-bg.png b/dmp-frontend/src/assets/images/public-dmps-bg.png
new file mode 100644
index 000000000..019998754
Binary files /dev/null and b/dmp-frontend/src/assets/images/public-dmps-bg.png differ