diff --git a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html
index 25ec762c7..9b172f2b0 100644
--- a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html
+++ b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html
@@ -1,147 +1,161 @@
 <div class="main-content">
 	<div class="container-fluid">
 		<div *ngIf="dmp" class="card pb-4">
-			<div class="card-header card-header-plain d-flex">
-				<div class="card-desc d-flex flex-column justify-content-center">
-					<h4 class="card-title">{{ dmp.label }}</h4>
-					<mat-card-subtitle *ngIf="!hasDoi(dmp)">
-						{{ 'DMP-EDITOR.TITLE.SUBTITLE' | translate }}: {{ dmp.doi }}
-					</mat-card-subtitle>
-				</div>
-				<div class="d-flex ml-auto p-2">
+			<div class="row card-header card-header-plain d-flex">
+				<div class="col-12 card-desc d-flex flex-column justify-content-center">
+					<div class="row">
 
-					<button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto more-icon" (click)="$event.stopImmediatePropagation();">
-						<mat-icon class="more-horiz">more_horiz</mat-icon>
-					</button>
-					<mat-menu #actionsMenu="matMenu" xPosition="before">
-						<button mat-menu-item (click)="newVersion(dmp.id, dmp.label)">
-							<mat-icon>queue</mat-icon>{{'DMP-LISTING.ACTIONS.NEW-VERSION' | translate}}
-						</button>
-						<button mat-menu-item (click)="viewVersions(dmp.groupId, dmp.label)">
-							<mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
-						</button>
-						<button mat-menu-item (click)="cloneClicked(dmp)" class="menu-item">
-							<mat-icon>add</mat-icon>{{ 'DMP-LISTING.ACTIONS.CLONE' | translate }}
-						</button>
-						<button mat-menu-item *ngIf="isDraftDmp(dmp)" (click)="deleteClicked()" class="menu-item">
-							<mat-icon>delete</mat-icon>{{ 'DMP-LISTING.ACTIONS.DELETE' | translate }}
-						</button>
-					</mat-menu>
+						<div class="col d-flex align-items-center flex-wrap-nowrap">
+							<h4 class="card-title">{{ dmp.label }}</h4>
+							<button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto more-icon" (click)="$event.stopImmediatePropagation();">
+								<mat-icon class="more-horiz">more_horiz</mat-icon>
+							</button>
+							<mat-menu #actionsMenu="matMenu" xPosition="before">
+								<button mat-menu-item (click)="newVersion(dmp.id, dmp.label)">
+									<mat-icon>queue</mat-icon>{{'DMP-LISTING.ACTIONS.NEW-VERSION' | translate}}
+								</button>
+								<button mat-menu-item (click)="viewVersions(dmp.groupId, dmp.label)">
+									<mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
+								</button>
+								<button mat-menu-item (click)="cloneClicked(dmp)" class="menu-item">
+									<mat-icon>add</mat-icon>{{ 'DMP-LISTING.ACTIONS.CLONE' | translate }}
+								</button>
+								<button mat-menu-item *ngIf="isDraftDmp(dmp)" (click)="deleteClicked()" class="menu-item">
+									<mat-icon>delete</mat-icon>{{ 'DMP-LISTING.ACTIONS.DELETE' | translate }}
+								</button>
+							</mat-menu>
+						</div>
 
-					<button *ngIf="isDraftDmp(dmp)" mat-raised-button color="primary" (click)="editClicked(dmp)" class="lightblue-btn ml-2">
-						<mat-icon>edit</mat-icon> {{ 'DMP-LISTING.ACTIONS.EDIT' | translate }}
-					</button>
-					<button mat-raised-button [matMenuTriggerFor]="exportMenu" color="primary" class="lightblue-btn export-btn ml-2">
-						{{ 'DMP-LISTING.ACTIONS.EXPORT' | translate }} <mat-icon>arrow_drop_down</mat-icon>
-					</button>
-					<button *ngIf="showPublishButton(dmp)" mat-raised-button (click)="publish(dmp.id)" class="lightblue-btn ml-2">
-						<mat-icon>public</mat-icon> {{ 'DMP-LISTING.ACTIONS.PUBLISH' | translate }}
-					</button>
-					<button *ngIf="isDraftDmp(dmp)" mat-raised-button color="primary" (click)="finalize(dmp)" class="lightblue-btn ml-2">
-						<mat-icon>done_all</mat-icon> {{ 'DMP-LISTING.ACTIONS.FINALIZE' | translate }}
-					</button>
-					<button *ngIf="hasDoi(dmp) && isFinalizedDmp(dmp) && !this.isPublicView" mat-raised-button color="primary" (click)="getDoi(dmp)" class="lightblue-btn ml-2">
-						<mat-icon>archive</mat-icon> {{ 'DMP-LISTING.ACTIONS.GETDOI' | translate }}
-					</button>
+						<div class="col-auto d-flex flex-wrap p-2">
+							<button *ngIf="isDraftDmp(dmp)" mat-raised-button color="primary" (click)="editClicked(dmp)" class="lightblue-btn mt-2 ml-2">
+								<mat-icon>edit</mat-icon> {{ 'DMP-LISTING.ACTIONS.EDIT' | translate }}
+							</button>
+							<button mat-raised-button [matMenuTriggerFor]="exportMenu" color="primary" class="lightblue-btn export-btn mt-2 ml-2">
+								{{ 'DMP-LISTING.ACTIONS.EXPORT' | translate }} <mat-icon>arrow_drop_down</mat-icon>
+							</button>
+							<button *ngIf="showPublishButton(dmp)" mat-raised-button (click)="publish(dmp.id)" class="lightblue-btn mt-2 ml-2">
+								<mat-icon>public</mat-icon> {{ 'DMP-LISTING.ACTIONS.PUBLISH' | translate }}
+							</button>
+							<button *ngIf="isDraftDmp(dmp)" mat-raised-button color="primary" (click)="finalize(dmp)" class="lightblue-btn mt-2 ml-2">
+								<mat-icon>done_all</mat-icon> {{ 'DMP-LISTING.ACTIONS.FINALIZE' | translate }}
+							</button>
+							<button *ngIf="hasDoi(dmp) && isFinalizedDmp(dmp) && !this.isPublicView" mat-raised-button color="primary" (click)="getDoi(dmp)" class="lightblue-btn mt-2 ml-2">
+								<mat-icon>archive</mat-icon> {{ 'DMP-LISTING.ACTIONS.GETDOI' | translate }}
+							</button>
 
-					<mat-menu #exportMenu="matMenu" xPosition="before">
-						<button mat-menu-item (click)="downloadPDF(dmp.id)">
-							<i class="fa fa-file-pdf-o pr-2"></i>
-							<span>{{'GENERAL.FILE-TYPES.PDF' | translate}}</span>
-						</button>
-						<button mat-menu-item (click)="downloadDocx(dmp.id)">
-							<i class="fa fa-file-word-o pr-2"></i>
-							<span>{{'GENERAL.FILE-TYPES.DOC' | translate}}</span>
-						</button>
-						<button mat-menu-item (click)="downloadXml(dmp.id)">
-							<i class="fa fa-file-code-o pr-2"></i>
-							<span>{{'GENERAL.FILE-TYPES.XML' | translate}}</span>
-						</button>
-						<button *ngIf="isDraftDmp(dmp)" mat-menu-item (click)="downloadJson(dmp.id)">
-							<i class="fa fa-file-o pr-2"></i>
-							<span>{{'GENERAL.FILE-TYPES.JSON' | translate}}</span>
-						</button>
-					</mat-menu>
+							<mat-menu #exportMenu="matMenu" xPosition="before">
+								<button mat-menu-item (click)="downloadPDF(dmp.id)">
+									<i class="fa fa-file-pdf-o pr-2"></i>
+									<span>{{'GENERAL.FILE-TYPES.PDF' | translate}}</span>
+								</button>
+								<button mat-menu-item (click)="downloadDocx(dmp.id)">
+									<i class="fa fa-file-word-o pr-2"></i>
+									<span>{{'GENERAL.FILE-TYPES.DOC' | translate}}</span>
+								</button>
+								<button mat-menu-item (click)="downloadXml(dmp.id)">
+									<i class="fa fa-file-code-o pr-2"></i>
+									<span>{{'GENERAL.FILE-TYPES.XML' | translate}}</span>
+								</button>
+								<button *ngIf="isDraftDmp(dmp)" mat-menu-item (click)="downloadJson(dmp.id)">
+									<i class="fa fa-file-o pr-2"></i>
+									<span>{{'GENERAL.FILE-TYPES.JSON' | translate}}</span>
+								</button>
+							</mat-menu>
+						</div>
+					</div>
+					<div class="row">
+						<mat-card-subtitle class="col" *ngIf="!hasDoi(dmp)">
+							{{ 'DMP-EDITOR.TITLE.SUBTITLE' | translate }}: {{ dmp.doi }}
+						</mat-card-subtitle>
+					</div>
 				</div>
 			</div>
-			<div class="row ml-2">
-				<div class="col-md-9 col-lg-9">
-					<div class="row">
-						<div class="col-6 dmp-info">
-							<p class="card-subtitle">{{ dmp.label }}</p>
-							<p>{{ dmp.description }}</p>
-							<div class="row total-info">
-								<div class="col-12 d-flex flex-row">
+			<div class="col">
+				<div class="row">
+					<div class="col-md-9 col-lg-9">
+						<div class="row">
+							<div class="col-sm-12 col-md-6 ml-3 dmp-info">
+								<p class="card-subtitle">{{ dmp.label }}</p>
+								<p>{{ dmp.description }}</p>
+							</div>
+							<div class="col-12 d-flex flex-row flex-wrap ml-3">
+								<div class="d-flex">
 									<mat-icon matTooltip="{{'DMP-OVERVIEW.TOOLTIP.LEVEL-OF-ACCESS' | translate}}" class="gray-icon pt-2">settings</mat-icon>
 									<p class="mt-2 ml-1 mr-3 p-1">{{ roleDisplay(dmp.users) }}</p>
+								</div>
 
-									<div class="datasets-counter" *ngIf="!isPublishedDMP(dmp)">
-										<mat-icon matTooltip="{{'DMP-OVERVIEW.TOOLTIP.INVOLVED-DATASETS' | translate}}" class="gray-icon pt-2" (click)="datasetsClicked(dmp.id)">storage
-										</mat-icon>
-										<p class="mt-2 ml-1 p-1" (click)="datasetsClicked(dmp.id)">
-											{{ dmp.datasets.length }}</p>
-										<p class="mt-2 mr-3 p-1" (click)="datasetsClicked(dmp.id)">
-											{{'NAV-BAR.DATASETS' | translate}}</p>
-									</div>
+								<div class="datasets-counter" *ngIf="!isPublishedDMP(dmp)">
+									<mat-icon matTooltip="{{'DMP-OVERVIEW.TOOLTIP.INVOLVED-DATASETS' | translate}}" class="gray-icon pt-2" (click)="datasetsClicked(dmp.id)">storage
+									</mat-icon>
+									<p class="mt-2 ml-1 p-1" (click)="datasetsClicked(dmp.id)">
+										{{ dmp.datasets.length }}</p>
+									<p class="mt-2 mr-3 p-1" (click)="datasetsClicked(dmp.id)">
+										{{'NAV-BAR.DATASETS' | translate}}</p>
+								</div>
 
+								<div class="d-flex">
 									<mat-icon matTooltip="{{'DMP-OVERVIEW.TOOLTIP.INVOLVED-DATASETS' | translate}}" class="gray-icon pt-2" *ngIf="isPublishedDMP(dmp)">storage</mat-icon>
 									<p class="mt-2 ml-1 p-1" *ngIf="isPublishedDMP(dmp)">{{ dmp.datasets.length }}</p>
 									<p class="mt-2 mr-3 p-1" *ngIf="isPublishedDMP(dmp)">{{'NAV-BAR.DATASETS' | translate}}</p>
+								</div>
 
+								<div class="d-flex">
 									<mat-icon matTooltip="{{'DMP-OVERVIEW.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" class="gray-icon pt-2">assignment</mat-icon>
 									<p class="mt-2 ml-1 p-1">{{ dmp.associatedProfiles.length }}</p>
 									<p class="mt-2 mr-3 p-1">{{ 'DMP-EDITOR.FIELDS.TEMPLATES' | translate }}</p>
+								</div>
 
+								<div class="d-flex">
 									<mat-icon matTooltip="{{'DMP-OVERVIEW.RESEARCHERS' | translate}}" class="gray-icon pt-2">person</mat-icon>
 									<p class="mt-2 ml-1 p-1">{{ dmp.researchers.length }}</p>
 									<p class="mt-2 mr-3 p-1">{{ 'DMP-EDITOR.FIELDS.RESEARCHERS' | translate }}</p>
 								</div>
 							</div>
 						</div>
-					</div>
-					<div class="row">
-						<div *ngFor="let dataset of dmp.datasets; let i=index" class="col-md-4">
-							<div *ngIf="i < 9" class="dataset-card" (click)="datasetClicked(dataset.id)">
-								<mat-icon *ngIf="isDraftDataset(dataset)" class="draft-bookmark">bookmark</mat-icon>
-								<mat-icon *ngIf="!isDraftDataset(dataset)" class="finalized-bookmark">bookmark</mat-icon>
-								<h4 *ngIf="isDraftDataset(dataset)">
-									<span>{{ 'TYPES.DMP.DRAFT' | translate }}:</span> {{ dataset.label }}</h4>
-								<h4 *ngIf="!isDraftDataset(dataset)">{{ dataset.label }}</h4>
-								<div matTooltip="{{ dataset.datasetTemplate.label }}" class="chip">
-									{{ dataset.datasetTemplate.label }}</div>
+						<div class="row">
+							<div *ngFor="let dataset of dmp.datasets; let i=index" class="col-md-4">
+								<div *ngIf="i < 9" class="dataset-card" (click)="datasetClicked(dataset.id)">
+									<mat-icon *ngIf="isDraftDataset(dataset)" class="draft-bookmark">bookmark</mat-icon>
+									<mat-icon *ngIf="!isDraftDataset(dataset)" class="finalized-bookmark">bookmark</mat-icon>
+									<h4 *ngIf="isDraftDataset(dataset)">
+										<span>{{ 'TYPES.DMP.DRAFT' | translate }}:</span> {{ dataset.label }}</h4>
+									<h4 *ngIf="!isDraftDataset(dataset)">{{ dataset.label }}</h4>
+									<div matTooltip="{{ dataset.datasetTemplate.label }}" class="chip">
+										{{ dataset.datasetTemplate.label }}</div>
+								</div>
 							</div>
 						</div>
-					</div>
-					<div *ngIf="dmp.datasets.length > 9" class="gray-container d-flex justify-content-center">
-						<button mat-button (click)="datasetsClicked(dmp.id)" class="show-more">
-							<mat-icon class="mr-2">expand_more</mat-icon>{{ 'GENERAL.ACTIONS.SHOW-MORE' | translate }}
-						</button>
-					</div>
-				</div>
-				<div class="col-md-3 col-lg-3">
-					<div class="grant-item">
-						<div class="gray-container container-header">
-							<span class="ml-2 pt-2" (click)="grantClicked(dmp.grant.id)">{{ dmp.grant.abbreviation }}</span>
+						<div *ngIf="dmp.datasets.length > 9" class="gray-container d-flex justify-content-center">
+							<button mat-button (click)="datasetsClicked(dmp.id)" class="show-more">
+								<mat-icon class="mr-2">expand_more</mat-icon>{{ 'GENERAL.ACTIONS.SHOW-MORE' | translate }}
+							</button>
 						</div>
-						<p class="card-subtitle mt-3 mb-1 ml-3 mr-3">{{ dmp.grant.label }}</p>
-						<p class="mb-1 ml-3 mr-3">{{ dmp.grant.startDate | date: "shortDate" }} - {{ dmp.grant.endDate | date: "shortDate" }}</p>
-
-
-						<p class="ml-3 mr-3 desc">{{ dmp.grant.description }}</p>
-						<button mat-flat-button class="show-more" (click)="grantClicked(dmp.grant.id)">
-							<!-- <mat-icon class="mr-2">expand_more</mat-icon> -->
-							{{ 'GENERAL.ACTIONS.SHOW-MORE' | translate }}
-						</button>
-
-						<a mat-raised-button class="visit-website" href="{{dmp.grant.uri}}" target="_blank">
-							<mat-icon class="mr-2">open_in_new</mat-icon>
-							{{ 'GRANT-EDITOR.ACTIONS.VISIT-WEBSITE' | translate }}
-						</a>
 					</div>
-					<div class="researchers">
-						<h6 class="researchers-title">{{'DMP-OVERVIEW.RESEARCHERS' | translate}}</h6>
-						<div *ngFor="let researcher of dmp.researchers">
-							<div matTooltip="{{ researcher.name }}" class="avatar">{{ researcher.name }}</div>
+					<div class="col-md-3 col-lg-3">
+						<div class="grant-item">
+							<div class="gray-container container-header">
+								<span class="ml-2 pt-2" (click)="grantClicked(dmp.grant.id)">{{ dmp.grant.abbreviation }}</span>
+							</div>
+							<p class="card-subtitle mt-3 mb-1 ml-3 mr-3">{{ dmp.grant.label }}</p>
+							<p class="mb-1 ml-3 mr-3">{{ dmp.grant.startDate | date: "shortDate" }} - {{ dmp.grant.endDate | date: "shortDate" }}</p>
+
+
+							<p class="ml-3 mr-3 desc">{{ dmp.grant.description }}</p>
+							<button mat-flat-button class="show-more" (click)="grantClicked(dmp.grant.id)">
+								<!-- <mat-icon class="mr-2">expand_more</mat-icon> -->
+								{{ 'GENERAL.ACTIONS.SHOW-MORE' | translate }}
+							</button>
+
+							<a mat-raised-button class="visit-website" href="{{dmp.grant.uri}}" target="_blank">
+								<mat-icon class="mr-2">open_in_new</mat-icon>
+								{{ 'GRANT-EDITOR.ACTIONS.VISIT-WEBSITE' | translate }}
+							</a>
+						</div>
+						<div class="researchers">
+							<h6 class="researchers-title">{{'DMP-OVERVIEW.RESEARCHERS' | translate}}</h6>
+							<div *ngFor="let researcher of dmp.researchers">
+								<div matTooltip="{{ researcher.name }}" class="avatar">{{ researcher.name }}</div>
+							</div>
 						</div>
 					</div>
 				</div>