diff --git a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html
index e92a69879..fca09e794 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html
+++ b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html
@@ -1,28 +1,31 @@
 <div class="main-content">
 	<div class="container-fluid">
 		<div class="card">
-			<div class="card-header card-header-plain d-flex">
+			<div class="row card-header card-header-plain d-flex">
 				<div class="card-desc d-flex flex-column justify-content-center">
 					<h4 class="card-title">{{'DASHBOARD.DATASETS' | translate}} {{titlePrefix}}</h4>
 					<!-- <p class="card-category">{{'DATASET-LISTING.SUBTITLE' | translate}}</p> -->
 				</div>
-				<div class="d-flex align-items-center ml-auto p-2">
+				<div class="row ml-auto p-2">
 					<button mat-raised-button color="primary" class="text-uppercase lightblue-btn" [routerLink]="['/datasets/new']">
 						<mat-icon>add</mat-icon> {{'DATASET-LISTING.ACTIONS.NEW' | translate}}
 					</button>
 				</div>
 			</div>
 			<div class="card-body table-responsive">
-				<div class="listing row">
-					<div class="col-3">
+				<div class="listing row pb-2">
+					<div class="col-12 col-sm-12 col-md-3">
 						<app-dataset-criteria-component [status]="status" class="col-auto"></app-dataset-criteria-component>
 					</div>
-					<div class="col-9">
+					<div class="col-12 col-sm-12 col-md-9 pt-4">
 						<div *ngFor="let item of listingItems; let i = index">
-							<app-dataset-listing-item-component [dataset]="item"
-								[showDivider]="i != (listingItems.length - 1)" (onClick)="rowClicked($event)">
+							<app-dataset-listing-item-component [dataset]="item" [showDivider]="i != (listingItems.length - 1)" (onClick)="rowClicked($event)">
 							</app-dataset-listing-item-component>
 						</div>
+					</div>
+				</div>
+				<div class="row">
+					<div class="col-12 col-sm-12 col-md-9 ml-auto paginator">
 						<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]" (page)="pageThisEvent($event)" class="mt-2">
 						</mat-paginator>
 					</div>
diff --git a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss
index bcd3a0235..98ca3d541 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss
+++ b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss
@@ -1,3 +1,16 @@
+@import "node_modules/bootstrap/scss/functions";
+@import "node_modules/bootstrap/scss/variables";
+@import "node_modules/bootstrap/scss/mixins/_breakpoints";
+
+@include media-breakpoint-down(sm) {
+  .lightblue-btn {
+    font-size: 12px;
+  }
+  ::ng-deep .mat-paginator-container {
+    height: auto !important;
+  }
+}
+
 ::ng-deep .mat-paginator-container {
   flex-direction: row-reverse !important;
   justify-content: space-between !important;
@@ -20,7 +33,8 @@
 }
 
 ::ng-deep .mat-paginator-range-actions {
-  width: 55% !important;
+  width: auto !important;
+  min-width: 55% !important;
   min-height: 43px !important;
   justify-content: space-between;
 }
diff --git a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html
index f750d5108..ac7bb310b 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html
+++ b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html
@@ -28,26 +28,34 @@
 			</div>
 		</div>
 		<div class="row">
-			<div class="col-12 about-item">
-				<div class="links">
-					<mat-icon (click)="$event.stopImmediatePropagation(); datasetClicked(dataset)" matTooltip="{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}"
-					 class="gray-icon pt-2">
+			<div class="col-auto about-item">
+				<div class="row">
+					<mat-icon (click)="$event.stopImmediatePropagation(); datasetClicked(dataset)" matTooltip="{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}" class="col-auto gray-icon pr-0 pt-2">
 						storage
 					</mat-icon>
-					<h4 (click)="$event.stopImmediatePropagation(); datasetClicked(dataset)" class="mt-2 ml-1 mr-3 p-1">{{ dataset.dmp }}</h4>
+					<h4 (click)="$event.stopImmediatePropagation(); datasetClicked(dataset)" class="col mt-2 ml-1 mr-3 p-1">{{ dataset.dmp }}</h4>
+				</div>
+			</div>
 
-					<mat-icon (click)="$event.stopImmediatePropagation(); grantClicked(dataset)" matTooltip="{{'DATASET-LISTING.TOOLTIP.GRANT' | translate}}"
-					 class="gray-icon pt-2">
+			<div class="col-auto about-item">
+				<div class="row">
+					<mat-icon (click)="$event.stopImmediatePropagation(); grantClicked(dataset)" matTooltip="{{'DATASET-LISTING.TOOLTIP.GRANT' | translate}}" class="col-auto gray-icon pr-0 pt-2">
 						work_outline
 					</mat-icon>
-					<h4 (click)="$event.stopImmediatePropagation(); grantClicked(dataset)" class="mt-2 ml-1 mr-3 p-1">{{ dataset.grant }}</h4>
+					<h4 (click)="$event.stopImmediatePropagation(); grantClicked(dataset)" class="col mt-2 ml-1 mr-3 p-1">{{ dataset.grant }}</h4>
 				</div>
+			</div>
+
+			<div class="col-auto about-item">
 				<mat-icon matTooltip="{{'DATASET-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" class="gray-icon pt-2">
 					assignment
 				</mat-icon>
 				<div class="pt-1">
 					<div matTooltip="{{ dataset.profile }}" class="chip ml-2 mr-2">{{ dataset.profile }}</div>
 				</div>
+			</div>
+
+			<div class="col-12 about-item">
 				<p *ngIf="isDraft">{{'DATASET-LISTING.COLUMNS.LAST-EDITED' | translate}} {{ dataset.modified | date: "shortDate"}}</p>
 				<p *ngIf="!isDraft">{{'DATASET-LISTING.COLUMNS.FINALIZED' | translate}} {{ dataset.finalizedAt | date: "shortDate"}}</p>
 			</div>
diff --git a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss
index 21a58f334..d812c7bd4 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss
+++ b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss
@@ -40,10 +40,6 @@ h4 > span {
   flex-wrap: wrap;
 }
 
-.links {
-  display: flex;
-}
-
 .links :hover {
   color: #00b29f;
 }
diff --git a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html
index 5793ec346..b93090db7 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html
+++ b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html
@@ -1,30 +1,34 @@
 <div class="main-content">
 	<div class="container-fluid">
 		<div class="card">
-			<div class="card-header card-header-plain d-flex">
+			<div class="row card-header card-header-plain d-flex">
 				<div class="card-desc d-flex flex-column justify-content-center">
 					<h4 class="card-title">{{'DMP-LISTING.TITLE' | translate}} {{titlePrefix}}</h4>
 					<!-- <p class="card-category">{{'DMP-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 lightblue-btn mr-2" [routerLink]="grantId ? ['/plans/new/grant/', grantId] : ['./new']">
+				<div class="row ml-auto p-2">
+					<button mat-raised-button color="primary" class="text-uppercase lightblue-btn m-1" [routerLink]="grantId ? ['/plans/new/grant/', grantId] : ['./new']">
 						<mat-icon>add</mat-icon> {{'DMP-LISTING.ACTIONS.NEW' | translate}}
 					</button>
-					<button mat-raised-button color="primary" class="text-uppercase lightblue-btn" [routerLink]="['/quick-wizard']">
+					<button mat-raised-button color="primary" class="text-uppercase lightblue-btn m-1" [routerLink]="['/quick-wizard']">
 						<mat-icon>play_circle_outline</mat-icon> {{'DMP-LISTING.ACTIONS.NEW-WITH-WIZARD' | translate}}
 					</button>
 				</div>
 			</div>
 			<div class="card-body table-responsive">
-				<div class="listing row">
-					<div class="col-3">
+				<div class="listing row pb-2">
+					<div class="col-12 col-sm-12 col-md-3">
 						<app-dmp-criteria-component [showGrant]="showGrant" class="col-auto"></app-dmp-criteria-component>
 					</div>
-					<div class="col-9 pt-4">
+					<div class="col-12 col-sm-12 col-md-9 pt-4">
 						<!-- <mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]" (page)="pageThisEvent($event)" class="top-paginator"></mat-paginator> -->
 						<div *ngFor="let item of listingItems; let i = index">
 							<app-dmp-listing-item-component [showDivider]="i != (listingItems.length - 1)" [dmp]="item" (onClick)="rowClicked($event)"></app-dmp-listing-item-component>
 						</div>
+					</div>
+				</div>
+				<div class="row">
+					<div class="col-12 col-sm-12 col-md-9 ml-auto paginator">
 						<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]" (page)="pageThisEvent($event)" class="mt-2"></mat-paginator>
 					</div>
 				</div>
diff --git a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
index b3f82ac86..4def11f1b 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
@@ -1,3 +1,16 @@
+@import "node_modules/bootstrap/scss/functions";
+@import "node_modules/bootstrap/scss/variables";
+@import "node_modules/bootstrap/scss/mixins/_breakpoints";
+
+@include media-breakpoint-down(sm) {
+  .lightblue-btn {
+    font-size: 12px;
+  }
+  ::ng-deep .mat-paginator-container {
+    height: auto !important;
+  }
+}
+
 ::ng-deep .mat-paginator-container {
   flex-direction: row-reverse !important;
   justify-content: space-between !important;
@@ -20,7 +33,8 @@
 }
 
 ::ng-deep .mat-paginator-range-actions {
-  width: 55% !important;
+  width: auto !important;
+  min-width: 55% !important;
   min-height: 43px !important;
   justify-content: space-between;
 }
diff --git a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html
index e0ff36982..acffde993 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html
+++ b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html
@@ -26,8 +26,9 @@
 				</mat-menu>
 			</div>
 		</div>
-		<div class="row">
-			<div class="col-12 d-flex flex-wrap">
+		<div class="row d-flex flex-wrap">
+			<!-- <div class="col-12 d-flex flex-wrap"> -->
+			<div class="col-auto">
 				<mat-icon *ngIf="isDraft" matTooltip="{{'DMP-LISTING.TOOLTIP.DMP-STATUS.DRAFT' | translate}}" class="draft-icon">
 					lock_open
 				</mat-icon>
@@ -37,10 +38,14 @@
 				<mat-icon *ngIf="isPublished" matTooltip="{{'DMP-LISTING.TOOLTIP.DMP-STATUS.PUBLISHED' | translate}}" class="published-icon">
 					radio_button_checked
 				</mat-icon>
-				<h4 class="title" *ngIf="isDraft">
-					<span>{{ 'TYPES.DMP.DRAFT' | translate }}:</span> {{dmp.label}}</h4>
-				<h4 class="title" *ngIf="!isDraft">{{dmp.label}}</h4>
 			</div>
+			<div class="col pl-0">
+				<h4 class="title pl-0" *ngIf="isDraft">
+					<span>{{ 'TYPES.DMP.DRAFT' | translate }}:</span> {{dmp.label}}
+				</h4>
+				<h4 class="title pl-0" *ngIf="!isDraft">{{dmp.label}}</h4>
+			</div>
+			<!-- </div> -->
 		</div>
 		<div class="row">
 			<div class="col-12">
@@ -48,12 +53,13 @@
 			</div>
 		</div>
 		<div class="row">
-			<div class="col-12 about-item">
+			<div class="col-auto about-item">
 				<mat-icon class="gray-icon pt-2" matTooltip="{{'DMP-LISTING.TOOLTIP.LEVEL-OF-ACCESS' | translate}}">
 					settings
 				</mat-icon>
 				<h4 class="mt-1 ml-1 mr-3 p-1">{{roleDisplay(dmp.users).toUpperCase()}}</h4>
-
+			</div>
+			<div class="col-auto about-item">
 				<div class="datasets-counter">
 					<mat-icon (click)="$event.stopImmediatePropagation(); datasetClicked(dmp.id)" class="gray-icon pt-2" matTooltip="{{'DMP-LISTING.TOOLTIP.INVOLVED-DATASETS' | translate}}">
 						storage
@@ -61,16 +67,20 @@
 					<h4 (click)="$event.stopImmediatePropagation(); datasetClicked(dmp.id)" class="mt-1 ml-1 mr-3 p-1">
 						{{dmp.datasets.length}}</h4>
 				</div>
-
-				<mat-icon class="gray-icon pt-2" matTooltip="{{'DMP-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}">assignment</mat-icon>
-				<div *ngFor="let profile of dmp.associatedProfiles" class="pt-1">
+			</div>
+			<div class="col-auto about-item pt-2">
+				<mat-icon class="gray-icon" matTooltip="{{'DMP-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}">assignment</mat-icon>
+				<div *ngFor="let profile of dmp.associatedProfiles" class="pb-1">
 					<div matTooltip="{{profile.label}}" class="chip ml-2 mr-2">{{profile.label}}</div>
 				</div>
+			</div>
+			<div class="col-12 about-item">
 				<p *ngIf="isDraft">{{'DMP-PROFILE-LISTING.COLUMNS.LAST-EDITED' | translate}} {{dmp.modifiedTime | date: "shortDate"}}</p>
 				<p *ngIf="isFinalized && !isPublished">{{'TYPES.DMP.FINALISED' | translate}} {{dmp.finalizedAt | date: "shortDate"}}</p>
 				<p *ngIf="isPublished">{{'DMP-PROFILE-LISTING.COLUMNS.PUBLISHED' | translate}} {{dmp.publishedAt | date: "shortDate"}}</p>
 			</div>
 		</div>
+
 		<!-- <div class="row d-flex align-items-center my-1">
 			<mat-icon class="col-auto gray-icon">group</mat-icon>
 			<div class="row" *ngFor="let user of dmp.users">
diff --git a/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.html b/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.html
index 632e26f3d..084ba730d 100644
--- a/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.html
+++ b/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.html
@@ -14,14 +14,18 @@
 				</div>
 			</div>
 			<div class="card-body table-responsive">
-				<div class="dmp-listing row">
-					<div class="col-3">
+				<div class="dmp-listing row pb-2">
+					<div class="col-12 col-sm-12 col-md-3">
 						<app-explore-dataset-filters-component (facetCriteriaChange)="onCriteriaChange($event)"></app-explore-dataset-filters-component>
 					</div>
-					<div class="col-9">
-						<div class="row" *ngFor="let item of listingItems; let i = index">
-							<app-explore-dataset-listing-item-component class="col-12" [dataset]="item" [showDivider]="i !== (listingItems.length - 1)" (onClick)="rowClicked($event)"></app-explore-dataset-listing-item-component>
+					<div class="col-12 col-sm-12 col-md-9 pt-4">
+						<div *ngFor="let item of listingItems; let i = index">
+							<app-explore-dataset-listing-item-component [dataset]="item" [showDivider]="i !== (listingItems.length - 1)" (onClick)="rowClicked($event)"></app-explore-dataset-listing-item-component>
 						</div>
+					</div>
+				</div>
+				<div class="row">
+					<div class="col-12 col-sm-12 col-md-9 ml-auto paginator">
 						<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]" (page)="pageThisEvent($event)"></mat-paginator>
 					</div>
 				</div>
diff --git a/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.scss b/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.scss
index 148ad7fb3..ea5be4d58 100644
--- a/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.scss
+++ b/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.scss
@@ -1,3 +1,16 @@
+@import "node_modules/bootstrap/scss/functions";
+@import "node_modules/bootstrap/scss/variables";
+@import "node_modules/bootstrap/scss/mixins/_breakpoints";
+
+@include media-breakpoint-down(sm) {
+  .lightblue-btn {
+    font-size: 12px;
+  }
+  ::ng-deep .mat-paginator-container {
+    height: auto !important;
+  }
+}
+
 text-center {
   text-align: center;
 }
@@ -54,7 +67,8 @@ text-center {
 }
 
 ::ng-deep .mat-paginator-range-actions {
-  width: 55% !important;
+  width: auto !important;
+  min-width: 55% !important;
   min-height: 43px !important;
   justify-content: space-between;
 }
diff --git a/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.html b/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.html
index 4be537f20..6450b5f1f 100644
--- a/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.html
+++ b/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.html
@@ -21,17 +21,25 @@
 			</div>
 		</div>
 		<div class="row">
-			<div class="col-12 about-item">
-				<mat-icon matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.DMP' | translate}}" class="gray-icon pt-2">storage</mat-icon>
-				<h4 class="mt-2 ml-1 mr-3 p-1">{{ dataset.dmp }}</h4>
-
-				<mat-icon matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.GRANT' | translate}}" class="gray-icon pt-2">work_outline</mat-icon>
-				<h4 class="mt-2 ml-1 mr-3 p-1">{{ dataset.grant }}</h4>
-
+			<div class="col-auto about-item">
+				<div class="row">
+					<mat-icon matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.DMP' | translate}}" class="col-auto gray-icon pr-0 pt-2">storage</mat-icon>
+					<h4 class="col mt-2 ml-1 mr-3 p-1">{{ dataset.dmp }}</h4>
+				</div>
+			</div>
+			<div class="col-auto about-item">
+				<div class="row">
+					<mat-icon matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.GRANT' | translate}}" class="col-auto gray-icon pr-0 pt-2">work_outline</mat-icon>
+					<h4 class="col mt-2 ml-1 mr-3 p-1">{{ dataset.grant }}</h4>
+				</div>
+			</div>
+			<div class="col-auto about-item">
 				<mat-icon matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" class="gray-icon pt-2">assignment</mat-icon>
 				<div class="pt-1">
 					<div matTooltip="{{ dataset.profile }}" class="chip ml-2 mr-2">{{ dataset.profile }}</div>
 				</div>
+			</div>
+			<div class="col-12 about-item">
 				<p>{{'DATASET-LISTING.COLUMNS.PUBLISHED' | translate}} {{dataset.dmpPublishedAt | date: "shortDate"}}</p>
 			</div>
 		</div>
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 c27f366de..b19f97dc9 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
@@ -14,14 +14,14 @@
 				</div>
 			</div>
 			<div class="card-body table-responsive">
-				<div class="explore-dmp-listing row">
-					<div class="col-3">
+				<div class="explore-dmp-listing row pb-2">
+					<div class="col-12 col-sm-12 col-md-3">
 						<app-explore-dmp-filters-component class="col-auto" (facetCriteriaChange)="onCriteriaChange($event)"></app-explore-dmp-filters-component>
 						<!-- <app-explore-dmp-filters-component class="col-auto" [showGrant]="showGrant" (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 class="col-12 col-sm-12 col-md-9 pt-4">
+						<div *ngFor="let item of listingItems; let i = index">
+							<app-explore-dmp-listing-item-component [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]" (page)="pageThisEvent($event)"></mat-paginator>
 					</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 13d6d81db..d56c694f6 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,16 @@
+@import "node_modules/bootstrap/scss/functions";
+@import "node_modules/bootstrap/scss/variables";
+@import "node_modules/bootstrap/scss/mixins/_breakpoints";
+
+@include media-breakpoint-down(sm) {
+  .lightblue-btn {
+    font-size: 12px;
+  }
+  ::ng-deep .mat-paginator-container {
+    height: auto !important;
+  }
+}
+
 text-center {
   text-align: center;
 }
@@ -54,7 +67,8 @@ text-center {
 }
 
 ::ng-deep .mat-paginator-range-actions {
-  width: 55% !important;
+  width: auto !important;
+  min-width: 55% !important;
   min-height: 43px !important;
   justify-content: space-between;
 }
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
index 905d71de2..6e8179f19 100644
--- 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
@@ -5,10 +5,12 @@
 				{{dmp.grantAbbreviation}}
 			</div>
 		</div>
-		<div class="row">
-			<div class="col-12 about-item">
+		<div class="row d-flex flex-wrap">
+			<div class="col-auto">
 				<mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.PUBLISHED' | translate}}" class="published-icon">radio_button_checked</mat-icon>
-				<h4 class="title">{{dmp.label}}</h4>
+			</div>
+			<div class="col pl-0">
+				<h4 class="title pl-0">{{dmp.label}}</h4>
 			</div>
 		</div>
 		<div class="row">
@@ -17,17 +19,20 @@
 			</div>
 		</div>
 		<div class="row">
-			<div class="col-12 about-item">
+			<div class="col-auto about-item">
 				<!-- <mat-icon class="gray-icon pt-2">settings</mat-icon> -->
 				<!-- <h4 class="mt-2 ml-1 mr-3 p-1">{{roleDisplay(dmp.users).toUpperCase()}}</h4> -->
 
 				<mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.INVOLVED-DATASETS' | translate}}" class="gray-icon pt-2">storage</mat-icon>
 				<h4 class="length mt-2 ml-1 mr-3 p-1">{{dmp.datasets.length}}</h4>
-
+			</div>
+			<div class="col-auto about-item">
 				<mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" class="gray-icon pt-2">assignment</mat-icon>
 				<div *ngFor="let profile of dmp.associatedProfiles" class="pt-1">
 					<div matTooltip="{{profile.label}}" class="chip ml-2 mr-2">{{profile.label}}</div>
 				</div>
+			</div>
+			<div class="col-12 about-item">
 				<p>{{'DMP-PROFILE-LISTING.COLUMNS.PUBLISHED' | translate}} {{dmp.finalizedAt | date: "shortDate"}}</p>
 			</div>
 		</div>
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
index 0ee1f4e12..134e0fecd 100644
--- 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
@@ -52,6 +52,16 @@
   // color: #92d050;
 }
 
+h4 {
+  display: inline;
+  padding-left: 1em;
+  line-height: 1.7em;
+}
+
+h4 > span {
+  text-transform: uppercase;
+}
+
 // .explore-dmp-listing-item {
 // 	margin-top: 2em;
 // 	margin-bottom: 2em;