diff --git a/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.css b/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.css
index e69de29bb..9c428ccaa 100644
--- a/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.css
+++ b/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.css
@@ -0,0 +1,21 @@
+th  {
+	text-transform: uppercase;
+}
+
+.is-public {
+	padding-left: 0px;
+	border: 1px solid rgb(197, 224, 180);
+	color: rgb(131, 184, 95);
+	background-color: rgb(240, 247, 236);
+	border-radius: 10em;
+	text-align: center;
+}
+
+.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;
+	text-align: center;
+}
diff --git a/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html b/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html
index 560b9df4a..c955c4edf 100644
--- a/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html
+++ b/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html
@@ -1,115 +1,62 @@
 <div class="card">
-  <div class="card-header card-header-plain">
-    <div class="card-desc">
-      <h4 class="card-title">
-        LAST EDITED DATA MANAGEMENT PLAN
-      </h4>
-      <p class="card-category">
-        The DMPs below are public under the ## license of
-      </p>
-    </div>
-    <a href="#" class="view-all">VIEW ALL</a>
-  </div>
-  <div class="card-body table-responsive">
-    <table class="table table-hover">
-      <thead class="text-default">
-        <th>NAME</th>
-        <th>TEMPLATE</th>
-        <th>PROJECT</th>
-        <th>ROLE</th>
-        <th>ORGANIZATION</th>
-        <th>STATUS</th>
-        <th>VISITED</th>
-        <th></th>
-      </thead>
-      <tbody>
-        <tr>
-          <td>DMP Name</td>
-          <td>
-            <ul
-              class="nav max-width-136 md-pills nav-justified pills-rounded pills-outline-blue"
-            >
-              <li class="nav-item">
-                <a
-                  class="nav-link active"
-                  data-toggle="tab"
-                  href="#"
-                  role="tab"
-                  >Template name</a
-                >
-              </li>
-            </ul>
-          </td>
-          <td>Project Name</td>
-          <td>Role Name</td>
-          <td>Organization Name</td>
-          <td>PRIVATE</td>
-          <td>01.01.2019</td>
-          <td><i class="material-icons more-icon">more_horiz</i></td>
-        </tr>
-        <tr>
-          <td>DMP Name</td>
-          <td>
-            <ul
-              class="nav max-width-136 md-pills nav-justified pills-rounded pills-outline-blue"
-            >
-              <li class="nav-item">
-                <a
-                  class="nav-link active"
-                  data-toggle="tab"
-                  href="#"
-                  role="tab"
-                  >Template name</a
-                >
-              </li>
-            </ul>
-          </td>
-          <td>Project Name</td>
-          <td>Role Name</td>
-          <td>Organization Name</td>
-          <td style="padding-left: 0px;">
-            <ul
-              class="nav max-width-80 md-pills nav-justified pills-rounded pills-outline-green"
-            >
-              <li class="nav-item">
-                <a
-                  class="nav-link active"
-                  data-toggle="tab"
-                  href="#"
-                  role="tab"
-                  >PUBLIC</a
-                >
-              </li>
-            </ul>
-          </td>
-          <td>01.01.2019</td>
-          <td><i class="material-icons more-icon">more_horiz</i></td>
-        </tr>
-        <tr>
-          <td>DMP Name</td>
-          <td>
-            <ul
-              class="nav max-width-136 md-pills nav-justified pills-rounded pills-outline-blue"
-            >
-              <li class="nav-item">
-                <a
-                  class="nav-link active"
-                  data-toggle="tab"
-                  href="#"
-                  role="tab"
-                  >Template name</a
-                >
-              </li>
-            </ul>
-          </td>
-          <td>Project Name</td>
-          <td>Role Name</td>
-          <td>Organization Name</td>
-          <td>PRIVATE</td>
-          <td>01.01.2019</td>
-          <td><i class="material-icons more-icon">more_horiz</i></td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+	<div class="card-header card-header-plain">
+		<div class="card-desc">
+			<h4 class="card-title">
+				{{ 'RECENT-ACTIVITY.LAST-EDITED-DMP' | translate}}
+			</h4>
+			<p class="card-category">
+				{{ 'RECENT-ACTIVITY.LICENSE' | translate}}
+			</p>
+		</div>
+		<a href="#" class="view-all">{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate }}</a>
+	</div>
+	<div class="card-body table-responsive">
+		<table class="table table-hover">
+			<thead class="text-default">
+				<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.NAME' | translate}}</th>
+				<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.TEMPLATE' | translate }}</th>
+				<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.PROJECT' | translate }}</th>
+				<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.ROLE' | translate }}</th>
+				<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.ORGANIZATION' | translate }}</th>
+				<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.STATUS' | translate }}</th>
+				<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.VISITED' | translate }}</th>
+				<th></th>
+			</thead>
+			<tbody *ngIf="dmpActivities != null">
+				<tr *ngFor="let activity of dmpActivities">
+					<td>{{ activity.label }}</td>
+					<td>
+						<div class="template-name">
+							--
+						</div>
+					</td>
+					<td>{{ activity.project }}</td>
+					<td>Role Name</td>
+					<td>{{ activity.organisations }}</td>
+					<td *ngIf="activity.status === 1">
+						<div class="is-public">
+							{{ enumUtils.toDmpStatusString(activity.status) }}
+						</div>
+					</td>
+					<td *ngIf="activity.status === 0" style="padding-left: 12px">
+						{{ enumUtils.toDmpStatusString(activity.status) }}
+					</td>
+					<td>{{ activity.creationTime | date: "shortDate" }}</td>
+					<td><i class="material-icons more-icon">more_horiz</i></td>
+				</tr>
+			</tbody>
+			<tbody *ngIf="dmpActivities == null">
+				<tr>
+					<td></td>
+					<td></td>
+					<td></td>
+					<td></td>
+					<td></td>
+					<td></td>
+					<td></td>
+					<td></td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
 </div>
diff --git a/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts b/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts
index 96139dc0c..48695cdf4 100644
--- a/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts
+++ b/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts
@@ -1,15 +1,41 @@
 import { Component, OnInit } from '@angular/core';
+import { DmpListingModel } from '../../../core/model/dmp/dmp-listing';
+import { EnumUtils } from '../../../core/services/utilities/enum-utils.service';
+import { AuthService } from '../../../core/services/auth/auth.service';
+import { DataTableRequest } from '../../../core/model/data-table/data-table-request';
+import { DmpCriteria } from '../../../core/query/dmp/dmp-criteria';
+import { DmpService } from '../../../core/services/dmp/dmp.service';
 
 @Component({
-  selector: 'app-recent-edited-activity',
-  templateUrl: './recent-edited-activity.component.html',
-  styleUrls: ['./recent-edited-activity.component.css']
+	selector: 'app-recent-edited-activity',
+	templateUrl: './recent-edited-activity.component.html',
+	styleUrls: ['./recent-edited-activity.component.css']
 })
 export class RecentEditedActivityComponent implements OnInit {
+	dmpActivities: DmpListingModel[];
 
-  constructor() { }
+	constructor(
+		public enumUtils: EnumUtils,
+		private authentication: AuthService,
+		private dmpService: DmpService
+	) { }
 
-  ngOnInit() {
-  }
+	ngOnInit() {
+		if (this.isAuthenticated()) {
+			const fields: Array<string> = ["-created"];
+			const dmpDataTableRequest: DataTableRequest<DmpCriteria> = new DataTableRequest(0, null, { fields: fields });
+			dmpDataTableRequest.criteria = new DmpCriteria();
+			dmpDataTableRequest.criteria.like = "";
+			this.dmpService
+				.getPaged(dmpDataTableRequest, "listing")
+				.subscribe(response => {
+					this.dmpActivities = response.data;
+				});
+		}
+	}
+
+	public isAuthenticated(): boolean {
+		return !!this.authentication.current();
+	}
 
 }
diff --git a/dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.css b/dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.css
index e69de29bb..122770624 100644
--- a/dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.css
+++ b/dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.css
@@ -0,0 +1,21 @@
+th {
+	text-transform: uppercase;
+}
+
+.is-public {
+	padding-left: 0px;
+	border: 1px solid rgb(197, 224, 180);
+	color: rgb(131, 184, 95);
+	background-color: rgb(240, 247, 236);
+	border-radius: 10em;
+	text-align: center;
+}
+
+.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;
+	text-align: center;
+}
diff --git a/dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.html b/dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.html
index 759d80d86..780020d24 100644
--- a/dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.html
+++ b/dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.html
@@ -1,86 +1,63 @@
 <div class="card">
-  <div class="card-header card-header-plain">
-    <div class="card-desc">
-      <h4 class="card-title">
-        LAST VISITED DATA MANAGEMENT PLAN
-      </h4>
-      <p class="card-category">
-        The DMPs below are public under the ## license of
-      </p>
-    </div>
-    <a href="#" class="view-all">VIEW ALL</a>
-  </div>
-  <div class="card-body table-responsive">
-    <table class="table table-hover">
-      <thead class="text-default">
-        <th>NAME</th>
-        <th>TEMPLATE</th>
-        <th>PROJECT</th>
-        <th>ROLE</th>
-        <th>ORGANIZATION</th>
-        <th>STATUS</th>
-        <th>VISITED</th>
-        <th></th>
-      </thead>
-      <tbody *ngIf="dmpActivities!=null">
-        <tr (click)="redirect(activity.id, recentActivityTypeEnum.Dmp)" *ngFor="let activity of dmpActivities" style="cursor: pointer;">
-          <td>{{activity.label}}</td>
-          <td>
-            <ul
-              class="nav max-width-136 md-pills nav-justified pills-rounded pills-outline-blue"
-            >
-              <li class="nav-item">
-                <a
-                  class="nav-link active"
-                  data-toggle="tab"
-                  href="#"
-                  role="tab"
-                  >Template name</a
-                >
-              </li>
-            </ul>
-          </td>
-          <td>Project Name</td>
-          <td>Role Name</td>
-          <td>Organization Name</td>
-          <td style="padding-left: 0px;" *ngIf="public">
-			<ul class="nav max-width-80 md-pills nav-justified pills-rounded pills-outline-green">
-				<li class="nav-item">
-				<a class="nav-link active" data-toggle="tab" href="#" role="tab">PUBLIC</a>
-				</li>
-			</ul>
-		  </td>
-		  <td style="padding-left: 0px;" *ngIf="!public">PRIVATE</td>
-          <td>{{activity.timestamp | date:'shortDate'}}</td>
-          <td><i class="material-icons more-icon">more_horiz</i></td>
-        </tr>
-	  </tbody>
-	  <tbody *ngIf="dmpActivities==null">
-		<tr>
-			<td>--</td>
-			<td>
-				<ul
-				class="nav max-width-136 md-pills nav-justified pills-rounded pills-outline-blue"
-				>
-				<li class="nav-item">
-					<a
-					class="nav-link active"
-					data-toggle="tab"
-					href="#"
-					role="tab"
-					>--</a
-					>
-				</li>
-				</ul>
-			</td>
-			<td>--</td>
-			<td>--</td>
-			<td>--</td>
-			<td>--</td>
-			<td>--</td>
-			<td><i class="material-icons more-icon">more_horiz</i></td>
-		</tr>
-	  </tbody>
-    </table>
-  </div>
+	<div class="card-header card-header-plain">
+		<div class="card-desc">
+			<h4 class="card-title">
+				{{ 'RECENT-ACTIVITY.LAST-VISITED-DMP' | translate}}
+			</h4>
+			<p class="card-category">
+				{{ 'RECENT-ACTIVITY.LICENSE' | translate}}
+			</p>
+		</div>
+		<a href="#" class="view-all">{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate }}</a>
+	</div>
+	<div class="card-body table-responsive">
+		<table class="table table-hover">
+			<thead class="text-default">
+				<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.NAME' | translate }}</th>
+				<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.TEMPLATE' | translate }}</th>
+				<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.PROJECT' | translate }}</th>
+				<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.ROLE' | translate }}</th>
+				<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.ORGANIZATION' | translate }}</th>
+				<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.STATUS' | translate }}</th>
+				<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.VISITED' | translate }}</th>
+				<th></th>
+			</thead>
+			<tbody *ngIf="dmpActivities != null">
+				<tr (click)="redirect(activity.id, recentActivityTypeEnum.Dmp)" *ngFor="let activity of dmpActivities"
+					style="cursor: pointer;">
+					<td>{{ activity.label }}</td>
+					<td>
+						<div class="template-name">
+							--
+						</div>
+					</td>
+					<td>{{ activity.project }}</td>
+					<td>Role Name</td>
+					<td>{{ activity.organisations }}</td>
+					<td *ngIf="activity.status === 1">
+						<div class="is-public">
+							{{ enumUtils.toDmpStatusString(activity.status) }}
+						</div>
+					</td>
+					<td *ngIf="activity.status === 0" style="padding-left: 12px">
+						{{ enumUtils.toDmpStatusString(activity.status) }}
+					</td>
+					<td>{{ activity.creationTime | date: "shortDate" }}</td>
+					<td><i class="material-icons more-icon">more_horiz</i></td>
+				</tr>
+			</tbody>
+			<tbody *ngIf="dmpActivities == null">
+				<tr>
+					<td></td>
+					<td></td>
+					<td></td>
+					<td></td>
+					<td></td>
+					<td></td>
+					<td></td>
+					<td><i class="material-icons more-icon">more_horiz</i></td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
 </div>
diff --git a/dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.ts b/dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.ts
index 1112bf205..2e9ee0ef9 100644
--- a/dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.ts
+++ b/dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.ts
@@ -1,38 +1,47 @@
 import { Component, OnInit } from "@angular/core";
 import { RecentActivityType } from "../../../core/common/enum/recent-activity-type";
-import { BaseComponent } from '../../../core/common/base/base.component';
+import { BaseComponent } from "../../../core/common/base/base.component";
 import { Router } from "@angular/router";
 import { AuthService } from "../../../core/services/auth/auth.service";
 import { UserService } from "../../../core/services/user/user.service";
 import { takeUntil } from "rxjs/operators";
+import { DmpService } from "../../../core/services/dmp/dmp.service";
+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 { EnumUtils } from "../../../core/services/utilities/enum-utils.service";
 
 @Component({
 	selector: "app-recent-visited-activity",
 	templateUrl: "./recent-visited-activity.component.html",
 	styleUrls: ["./recent-visited-activity.component.css"]
 })
-export class RecentVisitedActivityComponent extends BaseComponent implements OnInit {
-	dmpActivities: any[];
+export class RecentVisitedActivityComponent extends BaseComponent
+	implements OnInit {
+	dmpActivities: DmpListingModel[];
 	recentActivityItems: any[];
-	datasetActivities: any[];
-	projectActivities: any[];
-	organisationActivities: any[];
 	recentActivityTypeEnum = RecentActivityType;
 	public: boolean = false;
 
-	constructor(private router: Router, private authentication: AuthService, private userService: UserService) {
+	constructor(
+		private router: Router,
+		private authentication: AuthService,
+		private dmpService: DmpService,
+		public enumUtils: EnumUtils
+	) {
 		super();
 	}
 
 	ngOnInit() {
 		if (this.isAuthenticated()) {
-			this.userService.getRecentActivity()
-				.pipe(takeUntil(this._destroyed))
+			const fields: Array<string> = ["-created"];
+			const dmpDataTableRequest: DataTableRequest<DmpCriteria> = new DataTableRequest(0, null, { fields: fields });
+			dmpDataTableRequest.criteria = new DmpCriteria();
+			dmpDataTableRequest.criteria.like = "";
+			this.dmpService
+				.getPaged(dmpDataTableRequest, "listing")
 				.subscribe(response => {
-					this.datasetActivities = response['recentDatasetActivities'];
-					this.dmpActivities = response['recentDmpActivities'];
-					this.projectActivities = response['recentProjectActivities'];
-					this.organisationActivities = response['totalOrganisationCount'];
+					this.dmpActivities = response.data;
 				});
 		}
 	}
@@ -57,6 +66,6 @@ export class RecentVisitedActivityComponent extends BaseComponent implements OnI
 	}
 
 	public isAuthenticated(): boolean {
-		return !(!this.authentication.current());
+		return !!this.authentication.current();
 	}
 }
diff --git a/dmp-frontend/src/app/ui/misc/search/search.component.css b/dmp-frontend/src/app/ui/misc/search/search.component.css
index 7c88e9b6a..48fc1c4f7 100644
--- a/dmp-frontend/src/app/ui/misc/search/search.component.css
+++ b/dmp-frontend/src/app/ui/misc/search/search.component.css
@@ -8,3 +8,8 @@
 .input-search input {
 	padding-top: 15px;
 }
+
+.option {
+	line-height: inherit;
+	height: 50px;
+}
diff --git a/dmp-frontend/src/app/ui/misc/search/search.component.html b/dmp-frontend/src/app/ui/misc/search/search.component.html
index c6b015165..f1f77cfa9 100644
--- a/dmp-frontend/src/app/ui/misc/search/search.component.html
+++ b/dmp-frontend/src/app/ui/misc/search/search.component.html
@@ -1,60 +1,14 @@
 <form class="navbar-form">
 	<div class="input-group input-search">
-		<input type="text" value="" class="form-control" placeholder="{{ 'DASHBOARD.SEARCH' | translate }}" [formControl]="searchControl" [matAutocomplete]="auto">
+		<input type="text" value="" class="form-control" placeholder="{{ 'DASHBOARD.SEARCH' | translate }}"
+			[formControl]="searchControl" [matAutocomplete]="auto">
 		<button type="submit" class="btn btn-link"><i class="material-icons">search</i></button>
 	</div>
-	<mat-autocomplete
-		autoActiveFirstOption
-		#auto="matAutocomplete"
-		(optionSelected)="onOptionSelected($event)"
-	>
-		<mat-option
-			*ngFor="let option of (filteredOptions | async)"
-			[value]="option"
-			class="transformation-value-mat-option two-line-mat-option"
-		>
+	<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="onOptionSelected($event)">
+		<mat-option *ngFor="let option of (filteredOptions | async)" [value]="option" class="option">
 			<span>{{ option.label }}</span>
 			<br />
 			<small>{{ transformType(option.type) }}</small>
 		</mat-option>
 	</mat-autocomplete>
 </form>
-
-<!-- <div class="col"></div>
-<div *ngIf="search && this.isAuthenticated()" class="col-auto">
-	<mat-form-field floatLabel="never">
-		<input
-			type="text"
-			placeholder="{{ 'DASHBOARD.SEARCH' | translate }}"
-			matInput
-			[formControl]="searchControl"
-			[matAutocomplete]="auto"
-		/>
-		<mat-autocomplete
-			autoActiveFirstOption
-			#auto="matAutocomplete"
-			(optionSelected)="onOptionSelected($event)"
-		>
-			<mat-option
-				*ngFor="let option of (filteredOptions | async)"
-				[value]="option"
-				class="transformation-value-mat-option two-line-mat-option"
-			>
-				<span>{{ option.label }}</span>
-				<br />
-				<small>{{ transformType(option.type) }}</small>
-			</mat-option>
-		</mat-autocomplete>
-	</mat-form-field>
-</div>
-<div *ngIf="!search && this.isAuthenticated()" class="col-auto">
-	<button mat-button (click)="this.search = true">
-		<mat-icon>search</mat-icon>
-	</button>
-</div>
-
-<div *ngIf="search && this.isAuthenticated()" class="col-auto">
-	<button mat-button (click)="this.search = false">
-		<mat-icon>close</mat-icon>
-	</button>
-</div> -->
diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.html b/dmp-frontend/src/app/ui/navbar/navbar.component.html
index ed112ec83..bff2a69d1 100644
--- a/dmp-frontend/src/app/ui/navbar/navbar.component.html
+++ b/dmp-frontend/src/app/ui/navbar/navbar.component.html
@@ -1,20 +1,20 @@
 <nav class="navbar navbar-expand-lg navbar-transparent  navbar-absolute fixed-top">
-    <div class="container-fluid">
-        <div class="navbar-wrapper">
-          <a href="#">
-              <i class="material-icons">dashboard</i>
-          </a>
-          <a class="navbar-brand" href="/home">Dashboard</a>
-        </div>
-        <button mat-raised-button class="navbar-toggler" type="button" (click)="sidebarToggle()">
-            <span class="sr-only">Toggle navigation</span>
-            <span class="navbar-toggler-icon icon-bar"></span>
-            <span class="navbar-toggler-icon icon-bar"></span>
-            <span class="navbar-toggler-icon icon-bar"></span>
-        </button>
-        <div class="collapse navbar-collapse justify-content-end" id="navigation">
+	<div class="container-fluid">
+		<div class="navbar-wrapper">
+			<a routerLink="/home">
+				<i class="material-icons">dashboard</i>
+			</a>
+			<a class="navbar-brand" routerLink="/home">{{ 'NAV-BAR.BREADCRUMB-ROOT' | translate }}</a>
+		</div>
+		<button mat-raised-button class="navbar-toggler" type="button" (click)="sidebarToggle()">
+			<span class="sr-only">Toggle navigation</span>
+			<span class="navbar-toggler-icon icon-bar"></span>
+			<span class="navbar-toggler-icon icon-bar"></span>
+			<span class="navbar-toggler-icon icon-bar"></span>
+		</button>
+		<div class="collapse navbar-collapse justify-content-end" id="navigation">
 
-            <!-- <form class="navbar-form">
+			<!-- <form class="navbar-form">
                 <div class="input-group input-search">
                     <input type="text" value="" class="form-control" placeholder="SEARCH...">
                     <button type="submit" class="btn btn-link"><i class="material-icons">search</i></button>
@@ -23,9 +23,9 @@
 
 			<app-search></app-search>
 
-            <ul class="navbar-nav">
+			<ul class="navbar-nav">
 				<!-- Notifications -->
-                <!-- <li class="nav-item dropdown">
+				<!-- <li class="nav-item dropdown">
                     <a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                         <i class="material-icons md-32">notifications</i>
                         <span class="notification">3</span>
@@ -46,21 +46,27 @@
 				<!-- <div *ngIf="isAuthenticated();else loginoption" class="col-auto">
 					<img mat-card-avatar *ngIf="this.principalHasAvatar()" [src]="this.getPrincipalAvatar()" (click)="openProfile()">
 				</div> -->
-                <li class="nav-item" *ngIf="isAuthenticated();else loginoption">
-                    <a class="nav-link" (click)="openProfile()">
-                        <i class="material-icons md-32">person</i>
-                        <p>
-                            <span class="d-lg-none d-md-block">Account</span>
-                        </p>
-                    </a>
+
+				<!-- Admin -->
+				<!-- <a *ngIf="isAdmin()" mat-button class="buttonNav navbar-button"
+					routerLink="/users">{{'NAV-BAR.USERS' | translate}}</a>
+				<a *ngIf="isAdmin()" mat-button class="buttonNav navbar-button" routerLink="/dmp-profiles">{{'NAV-BAR.DMP-PROFILES' |
+					translate}}</a>
+				<a *ngIf="isAdmin()" mat-button class="buttonNav navbar-button" routerLink="/dataset-profiles">{{'NAV-BAR.DATASETS-ADMIN'
+					| translate}}</a> -->
+
+				<li class="nav-item" *ngIf="isAuthenticated();else loginoption">
+					<a class="nav-link" (click)="openProfile()">
+						<i class="material-icons md-32">person</i>
+					</a>
 				</li>
 				<ng-template #loginoption>
 					<button mat-button [routerLink]=" ['/login'] ">
-						<span class="login-label">Log in</span>
+						<span class="login-label">{{ 'GENERAL.ACTIONS.LOG-IN' | translate }}</span>
 					</button>
 				</ng-template>
 
-            </ul>
-        </div>
-    </div>
+			</ul>
+		</div>
+	</div>
 </nav>
diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.ts b/dmp-frontend/src/app/ui/navbar/navbar.component.ts
index ad9586a4c..61cb76ab9 100644
--- a/dmp-frontend/src/app/ui/navbar/navbar.component.ts
+++ b/dmp-frontend/src/app/ui/navbar/navbar.component.ts
@@ -6,6 +6,7 @@ import { Router } from '@angular/router';
 import { AuthService } from '../../core/services/auth/auth.service';
 import { MatDialog } from '@angular/material';
 import { UserDialogComponent } from '../misc/navigation/user-dialog/user-dialog.component';
+import { AppRole } from '../../core/common/enum/app-role';
 
 @Component({
   selector: 'app-navbar',
@@ -143,6 +144,17 @@ export class NavbarComponent implements OnInit {
 		return this.authentication.current().avatarUrl;
 	}
 
+	public isAdmin(): boolean {
+		if (!this.authentication.current()) { return false; }
+		const principalRoles = this.authentication.current().authorities;
+		for (let i = 0; i < principalRoles.length; i++) {
+			if (principalRoles[i] === AppRole.Admin) {
+				return true;
+			}
+		}
+		return false;
+	}
+
 	openProfile() {
 		const dialogRef = this.dialog.open(UserDialogComponent, {
 			hasBackdrop: true,
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.component.css b/dmp-frontend/src/app/ui/sidebar/sidebar.component.css
index 2317af289..cced65c14 100644
--- a/dmp-frontend/src/app/ui/sidebar/sidebar.component.css
+++ b/dmp-frontend/src/app/ui/sidebar/sidebar.component.css
@@ -1,23 +1,23 @@
 .logo-img {
-  width: 60px;
-  display: block;
-  max-height: none;
-  margin-left: 100px;
+	width: 60px;
+	display: block;
+	max-height: none;
+	margin-left: 100px;
 }
 
 .logo-img img {
-  width: 60px;
-  top: 0px;
-  position: inherit;
+	width: 60px;
+	top: 0px;
+	position: inherit;
 }
 
 .sidebarSubtitle p {
-  margin-left: 20px;
-  color: rgb(166, 166, 166);
+	margin-left: 20px;
+	color: rgb(166, 166, 166);
 }
 
 .nav hr {
-  width: 230px;
-  border-top: 2px solid #fff;
-  border-bottom: 2px solid #e0e2e3;
+	width: 230px;
+	border-top: 2px solid #fff;
+	border-bottom: 2px solid #e0e2e3;
 }
diff --git a/dmp-frontend/src/app/ui/user-profile/user-profile.component.html b/dmp-frontend/src/app/ui/user-profile/user-profile.component.html
index 707f44855..58ffc6288 100644
--- a/dmp-frontend/src/app/ui/user-profile/user-profile.component.html
+++ b/dmp-frontend/src/app/ui/user-profile/user-profile.component.html
@@ -1,89 +1,93 @@
-<div *ngIf="user | async  as userProfile; else loading" class="row user-profile">
-	<mat-card class="col-12 profile-card">
-		<mat-card-content>
-			<div class="row">
-				<div class="col-12">
-					<div class="row profile-card-center-row">
-						<div class="col-auto"><img mat-card-avatar [src]="userProfile.additionalinfo.avatarUrl"></div>
-					</div>
-					<div class="row profile-card-center-row">
-						<mat-card-title class="col-auto">{{userProfile.name}}</mat-card-title>
-					</div>
-					<div class="row profile-card-center-row">
-						<mat-card-subtitle class="col-auto">{{userProfile.email}}</mat-card-subtitle>
-					</div>
-				</div>
-			</div>
-		</mat-card-content>
-	</mat-card>
-	<mat-card class="col-12 profile-card">
-		<mat-card-content>
-			<div>
-				<div>
-					<h4>{{'USER-PROFILE.ASSOCIATED-DMPS' | translate}}</h4>
-				</div>
-				<div>
-					<mat-list>
-						<mat-list-item class="clickable" (click)="navigateToDmp(dmp)" *ngFor="let dmp of userProfile.associatedDmps">
-							<div>
-								{{dmp.label}}
+<div class="main-content">
+	<div class="container-fluid">
+		<div *ngIf="user | async  as userProfile; else loading" class="row user-profile">
+			<mat-card class="col-12 profile-card">
+				<mat-card-content>
+					<div class="row">
+						<div class="col-12">
+							<div class="row profile-card-center-row">
+								<div class="col-auto"><img mat-card-avatar [src]="userProfile.additionalinfo.avatarUrl"></div>
 							</div>
-							<div>
-								<mat-chip-list>
-									<mat-chip>{{getUserRole(dmp)}}</mat-chip>
-								</mat-chip-list>
+							<div class="row profile-card-center-row">
+								<mat-card-title class="col-auto">{{userProfile.name}}</mat-card-title>
 							</div>
-						</mat-list-item>
-					</mat-list>
-					<button mat-button (click)="showAllDmps()"> {{'USER-PROFILE.DMPS.SHOW-ALL' | translate}}</button>
-				</div>
-			</div>
-		</mat-card-content>
-	</mat-card>
-	<mat-card class="col-12 profile-card">
-		<mat-card-header>
-			<mat-card-title>
-				<div class="row">
-					<h4 class="col-auto">{{ 'USER-PROFILE.SETTINGS.TITLE' | translate}}</h4>
-					<button class="col-auto" *ngIf="!editMode" mat-icon-button (click)="unlock()">
-						<mat-icon class="mat-24">edit</mat-icon>
-					</button>
-					<button class="col-auto" *ngIf="editMode" mat-icon-button (click)="lock()">
-						<mat-icon class="mat-24">lock</mat-icon>
-					</button>
-				</div>
-			</mat-card-title>
-		</mat-card-header>
-		<mat-card-content>
-			<div class="container">
-				<div class="row" [formGroup]="formGroup">
-					<mat-form-field class="col-md-4">
-						<input type="text" placeholder="{{'USER-PROFILE.SETTINGS.TIMEZONE' | translate}}" [formControl]="this.formGroup.get('timezone')" matInput [matAutocomplete]="timezone" required>
-						<mat-autocomplete #timezone="matAutocomplete">
-							<mat-option *ngFor="let timezone of timezones | async" [value]="timezone">
-								{{ timezone | timezoneInfoDisplay }}
-							</mat-option>
-						</mat-autocomplete>
-					</mat-form-field>
-					<mat-form-field class="col-md-4">
-						<input type="text" placeholder="{{'USER-PROFILE.SETTINGS.CULTURE' | translate}}" [formControl]="this.formGroup.get('culture')" matInput [matAutocomplete]="culture" required>
-						<mat-autocomplete #culture="matAutocomplete" [displayWith]="displayFn">
-							<mat-option *ngFor="let culture of cultures | async" [value]="culture">
-								{{ culture.displayName }} - {{ culture.nativeName }}
-							</mat-option>
-						</mat-autocomplete>
-					</mat-form-field>
-					<mat-form-field class="col-md-4">
-						<mat-select placeholder="{{'USER-PROFILE.SETTINGS.LANGUAGE' | translate}}" [formControl]="this.formGroup.get('language')" required>
-							<mat-option *ngFor="let language of languages" [value]="language">
-								{{ language.label }}
-							</mat-option>
-						</mat-select>
-					</mat-form-field>
-				</div>
-			</div>
-		</mat-card-content>
-	</mat-card>
+							<div class="row profile-card-center-row">
+								<mat-card-subtitle class="col-auto">{{userProfile.email}}</mat-card-subtitle>
+							</div>
+						</div>
+					</div>
+				</mat-card-content>
+			</mat-card>
+			<mat-card class="col-12 profile-card">
+				<mat-card-content>
+					<div>
+						<div>
+							<h4>{{'USER-PROFILE.ASSOCIATED-DMPS' | translate}}</h4>
+						</div>
+						<div>
+							<mat-list>
+								<mat-list-item class="clickable" (click)="navigateToDmp(dmp)" *ngFor="let dmp of userProfile.associatedDmps">
+									<div>
+										{{dmp.label}}
+									</div>
+									<div>
+										<mat-chip-list>
+											<mat-chip>{{getUserRole(dmp)}}</mat-chip>
+										</mat-chip-list>
+									</div>
+								</mat-list-item>
+							</mat-list>
+							<button mat-button (click)="showAllDmps()"> {{'USER-PROFILE.DMPS.SHOW-ALL' | translate}}</button>
+						</div>
+					</div>
+				</mat-card-content>
+			</mat-card>
+			<mat-card class="col-12 profile-card">
+				<mat-card-header>
+					<mat-card-title>
+						<div class="row">
+							<h4 class="col-auto">{{ 'USER-PROFILE.SETTINGS.TITLE' | translate}}</h4>
+							<button class="col-auto" *ngIf="!editMode" mat-icon-button (click)="unlock()">
+								<mat-icon class="mat-24">edit</mat-icon>
+							</button>
+							<button class="col-auto" *ngIf="editMode" mat-icon-button (click)="lock()">
+								<mat-icon class="mat-24">lock</mat-icon>
+							</button>
+						</div>
+					</mat-card-title>
+				</mat-card-header>
+				<mat-card-content>
+					<div class="container">
+						<div class="row" [formGroup]="formGroup">
+							<mat-form-field class="col-md-4">
+								<input type="text" placeholder="{{'USER-PROFILE.SETTINGS.TIMEZONE' | translate}}" [formControl]="this.formGroup.get('timezone')" matInput [matAutocomplete]="timezone" required>
+								<mat-autocomplete #timezone="matAutocomplete">
+									<mat-option *ngFor="let timezone of timezones | async" [value]="timezone">
+										{{ timezone | timezoneInfoDisplay }}
+									</mat-option>
+								</mat-autocomplete>
+							</mat-form-field>
+							<mat-form-field class="col-md-4">
+								<input type="text" placeholder="{{'USER-PROFILE.SETTINGS.CULTURE' | translate}}" [formControl]="this.formGroup.get('culture')" matInput [matAutocomplete]="culture" required>
+								<mat-autocomplete #culture="matAutocomplete" [displayWith]="displayFn">
+									<mat-option *ngFor="let culture of cultures | async" [value]="culture">
+										{{ culture.displayName }} - {{ culture.nativeName }}
+									</mat-option>
+								</mat-autocomplete>
+							</mat-form-field>
+							<mat-form-field class="col-md-4">
+								<mat-select placeholder="{{'USER-PROFILE.SETTINGS.LANGUAGE' | translate}}" [formControl]="this.formGroup.get('language')" required>
+									<mat-option *ngFor="let language of languages" [value]="language">
+										{{ language.label }}
+									</mat-option>
+								</mat-select>
+							</mat-form-field>
+						</div>
+					</div>
+				</mat-card-content>
+			</mat-card>
+		</div>
+		<ng-template #loading>
+		</ng-template>
+	</div>
 </div>
-<ng-template #loading>
-</ng-template>
diff --git a/dmp-frontend/src/assets/css/demo.css b/dmp-frontend/src/assets/css/demo.css
index acfd904c6..f193c42a2 100644
--- a/dmp-frontend/src/assets/css/demo.css
+++ b/dmp-frontend/src/assets/css/demo.css
@@ -2,6 +2,7 @@
     outline: none !important;
 }
 
+
 a {
 	color: rgb(106, 164, 217);
 }
@@ -31,6 +32,17 @@ h4 {
 	/* float: right; */
 }
 
+.sidebar {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+    width: 260px;
+    background: #fff;
+    box-shadow: 0 16px 24px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
+}
+
 .sidebar .sidebar-background {
 	position: absolute;
 	z-index: 1;
@@ -69,9 +81,9 @@ h4 {
 .sidebar[data-color="danger"] li.active > a {
 	background-color: #ffffff;
 	-webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14),
-		0 7px 10px -5px rgba(255, 255, 255, 0.4);
+	0 7px 10px -5px rgba(255, 255, 255, 0.4);
 	box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14),
-		0 7px 10px -5px rgba(255, 255, 255, 0.4);
+	0 7px 10px -5px rgba(255, 255, 255, 0.4);
 }
 
 .sidebar .nav li.active > a i {
@@ -106,7 +118,7 @@ h4 {
 }
 
 .navbar form .btn {
-    margin-bottom: 0;
+	margin-bottom: 0;
     padding-left: 5px;
 }
 
@@ -145,9 +157,9 @@ h4 {
 .card .card-header-default:not(.card-header-icon):not(.card-header-text),
 .card .card-header-default .card-text {
 	-webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14),
-		0 7px 10px -5px rgba(0, 0, 0, 0.14);
+	0 7px 10px -5px rgba(0, 0, 0, 0.14);
 	box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14),
-		0 7px 10px -5px rgba(0, 0, 0, 0.14);
+	0 7px 10px -5px rgba(0, 0, 0, 0.14);
 }
 
 .card .card-header-plain .card-icon,
@@ -179,9 +191,9 @@ h4 {
 .card .card-header-blue:not(.card-header-icon):not(.card-header-text),
 .card .card-header-blue .card-text {
 	-webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14),
-		0 7px 10px -5px rgba(0, 0, 0, 0.14);
+	0 7px 10px -5px rgba(0, 0, 0, 0.14);
 	box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14),
-		0 7px 10px -5px rgba(0, 0, 0, 0.14);
+	0 7px 10px -5px rgba(0, 0, 0, 0.14);
 }
 
 .card-stats .card-header.card-header-icon i {
@@ -213,6 +225,10 @@ h4 {
 	margin-top: 5px;
 }
 
+.card-title h4 {
+	text-transform: uppercase;
+}
+
 .card-footer .stats {
 	font-size: 12px;
 	line-height: 22px;
@@ -229,7 +245,7 @@ h4 {
 }
 
 .card
-	[class*="card-header-"]:not(.card-header-icon):not(.card-header-text):not(.card-header-image) {
+[class*="card-header-"]:not(.card-header-icon):not(.card-header-text):not(.card-header-image) {
 	border-radius: 5px;
 	margin-top: -20px;
 	padding: 15px;
@@ -237,7 +253,7 @@ h4 {
 }
 
 .card
-	[class*="card-header-plain"]:not(.card-header-icon):not(.card-header-text):not(.card-header-image) {
+[class*="card-header-plain"]:not(.card-header-icon):not(.card-header-text):not(.card-header-image) {
 	border-radius: 5px;
 	margin-top: -20px;
 	padding: 15px;
@@ -254,6 +270,7 @@ h4 {
 	margin-top: 10px;
 	margin-right: 10px;
 	font-weight: 400;
+	text-transform: uppercase;
 }
 
 .card-header-plain h4 {
@@ -300,36 +317,14 @@ table > thead > tr > th,
 	cursor: pointer;
 }
 
-.pills-rounded .nav-item .nav-link {
-	border-radius: 10em;
+.navbar.navbar-absolute {
+    position: absolute;
+    width: 100%;
+	z-index: 0;
 }
 
-.pills-outline-green .nav-item .nav-link {
-	border: 1px solid rgb(197, 224, 180);
-	color: rgb(131, 184, 95);
-}
-.pills-outline-green .nav-item .nav-link.active {
-	border: 1px solid rgb(197, 224, 180);
-	color: #4caf50;
-	background-color: rgb(240, 247, 236);
-}
-.pills-outline-green .nav-item .nav-link.active:hover {
-	border: 1px solid rgb(197, 224, 180);
-	color: #4caf50;
-}
-
-.pills-outline-blue .nav-item .nav-link {
-	border: 1px solid rgb(218, 227, 243);
-	color: rgb(43, 104, 209);
-}
-.pills-outline-blue .nav-item .nav-link.active {
-	border: 1px solid rgb(218, 227, 243);
-	color: rgb(43, 104, 209);
-	background-color: rgb(236, 241, 249);
-}
-.pills-outline-blue .nav-item .nav-link.active:hover {
-	border: 1px solid rgb(218, 227, 243);
-	color: rgb(43, 104, 209);
+.fixed-top {
+	z-index: 0;
 }
 
 .pills-outline-blue .nav-item .nav-link {
@@ -345,3 +340,11 @@ table > thead > tr > th,
 	border: 1px solid rgb(231, 230, 230);
 	color: rgb(145, 145, 145);
 }
+
+.form-control:focus {
+	color: #495057;
+	background-color: rgba(0, 0, 0, 0);
+	border-color: none;
+	outline: none;
+	box-shadow: none;
+}
diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json
index 008c61c77..2d70a52ff 100644
--- a/dmp-frontend/src/assets/i18n/en.json
+++ b/dmp-frontend/src/assets/i18n/en.json
@@ -38,9 +38,14 @@
 				"CONFIRM": "Yes",
 				"CANCEL": "No"
 			}
+		},
+		"ACTIONS": {
+			"VIEW-ALL": "View All",
+			"LOG-IN": "Log in"
 		}
 	},
 	"NAV-BAR": {
+		"BREADCRUMB-ROOT": "Dashboard",
 		"TITLE": "OpenDMP",
 		"PROJECTS": "Projects",
 		"DMPS": "DMPs",
@@ -324,7 +329,11 @@
 			"REFERNCE": "Reference",
 			"PROJECT": "Project",
 			"URI": "Uri",
+			"ROLE": "Role",
+			"TEMPLATE": "Template",
+			"ORGANIZATION": "Organization",
 			"STATUS": "Status",
+			"VISITED": "Visited",
 			"DESCRIPTION": "Description",
 			"CREATED": "Created",
 			"ACTIONS": "Actions",
@@ -616,7 +625,10 @@
 	"RECENT-ACTIVITY": {
 		"MY-TITLE-PROJECT": "My Recent Project Activity",
 		"MY-TITLE-DMP": "My Recent DMP Activity",
-		"MY-TITLE-DATASET": "My Recent Dataset Activity"
+		"MY-TITLE-DATASET": "My Recent Dataset Activity",
+		"LAST-VISITED-DMP": "Last Visited Data Management Plan",
+		"LAST-EDITED-DMP": "Last Edited Data Management Plan",
+		"LICENSE": "The DMPs below are public under the ## license of"
 	},
 	"FILE-UPLOADER": {
 		"DEFAULT": "Choose a file",