diff --git a/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component.html b/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component.html
index 167a8da14..db2bddfee 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component.html
+++ b/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component.html
@@ -1,2 +1,2 @@
 <a class="col-auto d-flex pointer" (click)="onClose()"><span class="ml-auto mt-3 material-icons clear-icon">clear</span></a>
-<app-dataset-criteria-component [isPublic]="data.isPublic" [status]="data.status" [criteriaFormGroup]="data.formGroup" (filtersChanged)="onFiltersChanged($event)" class="col-auto"></app-dataset-criteria-component>
+<app-dataset-criteria-component [isPublic]="data.isPublic" [status]="data.status" [criteriaFormGroup]="data.formGroup" (filtersChanged)="onFiltersChanged($event)"></app-dataset-criteria-component>
diff --git a/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.html b/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.html
index af57218a1..6498dc3f5 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.html
+++ b/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.html
@@ -1,7 +1,11 @@
 <div class="dmp-criteria">
 	<div class="filters">
-		<h6 class="filters-title">{{'CRITERIA.FILTERS'| translate}}</h6>
-		<div class="row" style="justify-content: center;">
+		<div class="row justify-content-center">
+			<div class="col-10">
+				<h6 class="criteria-title">{{'CRITERIA.FILTERS'| translate}}</h6>
+			</div>
+		</div>
+		<div class="row justify-content-center">
 			<!-- Search Filter-->
 			<!-- <mat-form-field class="col-11 search">
 				<input matInput placeholder="{{'CRITERIA.GRANTS.LIKE'| translate}}" name="grantCriteriaLike"
@@ -13,112 +17,133 @@
 			<!-- End of Search Filter -->
 
 			<!-- Status Filter-->
-			<div class="col-10 gray-container" *ngIf="!isPublic" >
+			<div class="col-10" *ngIf="!isPublic">
 				<h6 class="category-title">{{'CRITERIA.DATA-SETS.STATUS'| translate}}</h6>
 				<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('status')">
-					<mat-list-item><mat-radio-button value="null" [checked]="!formGroup.get('status').value">{{ 'TYPES.DATASET-STATUS.ANY' | translate }}</mat-radio-button></mat-list-item>
-					<mat-list-item><mat-radio-button value="0" >{{ 'TYPES.DATASET-STATUS.DRAFT' | translate }}</mat-radio-button></mat-list-item>
-					<mat-list-item><mat-radio-button value="1">{{ 'TYPES.DATASET-STATUS.FINALISED' | translate }}</mat-radio-button></mat-list-item>
+					<mat-list-item>
+						<mat-radio-button value="null" [checked]="!formGroup.get('status').value">{{ 'TYPES.DATASET-STATUS.ANY' | translate }}</mat-radio-button>
+					</mat-list-item>
+					<mat-list-item>
+						<mat-radio-button value="0">{{ 'TYPES.DATASET-STATUS.DRAFT' | translate }}</mat-radio-button>
+					</mat-list-item>
+					<mat-list-item>
+						<mat-radio-button value="1">{{ 'TYPES.DATASET-STATUS.FINALISED' | translate }}</mat-radio-button>
+					</mat-list-item>
 				</mat-radio-group>
+				<hr>
 			</div>
 			<!-- End of Status Filter-->
 
 			<!-- Grant Status -->
-			<div class="col-10 gray-container" *ngIf="isPublic">
+			<div class="col-10" *ngIf="isPublic">
 				<h6 class="category-title">{{ 'FACET-SEARCH.GRANT-STATUS.TITLE' | translate }}</h6>
 				<mat-radio-group [formControl]="formGroup.get('grantStatus')">
-					<mat-list-item><mat-radio-button checked value="null" [checked]="!formGroup.get('grantStatus').value">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.ANY' | translate }}</mat-radio-button></mat-list-item>
-					<mat-list-item><mat-radio-button value="0">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.ACTIVE' | translate }}</mat-radio-button></mat-list-item>
-					<mat-list-item><mat-radio-button value="1">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.INACTIVE' | translate }}</mat-radio-button></mat-list-item>
+					<mat-list-item>
+						<mat-radio-button checked value="null" [checked]="!formGroup.get('grantStatus').value">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.ANY' | translate }}</mat-radio-button>
+					</mat-list-item>
+					<mat-list-item>
+						<mat-radio-button value="0">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.ACTIVE' | translate }}</mat-radio-button>
+					</mat-list-item>
+					<mat-list-item>
+						<mat-radio-button value="1">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.INACTIVE' | translate }}</mat-radio-button>
+					</mat-list-item>
 				</mat-radio-group>
+				<hr>
 			</div>
 			<!-- End of Grant Status -->
 
 			<!-- Related Dataset Templates Filters -->
-			<div class="col-10 gray-container">
+			<div class="col-10">
 				<h6 class="category-title">{{'CRITERIA.DATA-SETS.RELATED-DATASET-TEMPLATES' | translate}}</h6>
-				<mat-form-field>
+				<mat-form-field class="mb-4">
 					<mat-label>{{'CRITERIA.DATA-SETS.SELECT-DATASET-TEMPLATES' | translate }}</mat-label>
-					<app-multiple-auto-complete [formControl]="formGroup.get('datasetTemplates')"
-						[configuration]="datasetTemplateAutoCompleteConfiguration">
+					<app-multiple-auto-complete [formControl]="formGroup.get('datasetTemplates')" [configuration]="datasetTemplateAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
 				</mat-form-field>
+				<hr>
 			</div>
 			<!-- End of Related Dataset Templates Filters -->
 
 			<!-- Related DMP Filters -->
-			<div class="col-10 gray-container">
+			<div class="col-10">
 				<h6 class="category-title">{{'CRITERIA.DATA-SETS.RELATED-DMP' | translate}}</h6>
-				<mat-form-field>
+				<mat-form-field class="mb-4">
 					<mat-label>{{'CRITERIA.DATA-SETS.SELECT-DMP' | translate }}</mat-label>
-					<app-multiple-auto-complete [formControl]="formGroup.get('groupIds')"
-						[configuration]="dmpAutoCompleteConfiguration">
+					<app-multiple-auto-complete [formControl]="formGroup.get('groupIds')" [configuration]="dmpAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
 				</mat-form-field>
+				<hr>
 			</div>
 			<!-- End of Related DMP Filters -->
 
 			<!-- All Versions Filter-->
-			<div class="col-10 gray-container" *ngIf="!isPublic">
+			<div class="col-10" *ngIf="!isPublic">
 				<h6 class="category-title">{{'CRITERIA.DATA-SETS.ALL-VERSIONS'| translate}}</h6>
 				<mat-slide-toggle [formControl]="formGroup.get('allVersions')"></mat-slide-toggle>
+				<hr>
 			</div>
 			<!-- End of All Versions Filter-->
 
 			<!-- Related Grant Filters -->
-			<div class="col-10 gray-container">
+			<div class="col-10">
 				<h6 class="category-title">{{'CRITERIA.DATA-SETS.RELATED-GRANT' | translate}}</h6>
-				<mat-form-field>
+				<mat-form-field class="mb-4">
 					<mat-label>{{'CRITERIA.DATA-SETS.SELECT-GRANTS' | translate }}</mat-label>
-					<app-multiple-auto-complete [formControl]="formGroup.get('grants')"
-						[configuration]="grantAutoCompleteConfiguration">
+					<app-multiple-auto-complete [formControl]="formGroup.get('grants')" [configuration]="grantAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
 				</mat-form-field>
+				<hr>
 			</div>
 			<!-- End of Related Grants Filters -->
 
 			<!-- Related Collaborators Filters -->
-			<div class="col-10 gray-container" *ngIf="!isPublic">
+			<div class="col-10" *ngIf="!isPublic">
 				<h6 class="category-title">{{'CRITERIA.DATA-SETS.RELATED-COLLABORATORS' | translate}}</h6>
-				<mat-form-field>
+				<mat-form-field class="mb-4">
 					<mat-label>{{'CRITERIA.DATA-SETS.SELECT-COLLABORATORS' | translate }}</mat-label>
-					<app-multiple-auto-complete [formControl]="formGroup.get('collaborators')"
-						[configuration]="collaboratorsAutoCompleteConfiguration">
+					<app-multiple-auto-complete [formControl]="formGroup.get('collaborators')" [configuration]="collaboratorsAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
 				</mat-form-field>
+				<hr>
 			</div>
 			<!-- End of Related Collaborators Filters -->
 
 			<!-- Role Filter -->
-			<div class="col-10 gray-container" *ngIf="isAuthenticated()">
+			<div class="col-10" *ngIf="isAuthenticated()">
 				<h6 class="category-title">{{'CRITERIA.DATA-SETS.ROLE' | translate }}</h6>
 				<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('role')">
-					<mat-list-item><mat-radio-button checked value="null" [checked]="!formGroup.get('role').value">{{ 'TYPES.DATASET-ROLE.ANY' | translate }}</mat-radio-button></mat-list-item>
-					<mat-list-item><mat-radio-button value="0">{{ 'TYPES.DATASET-ROLE.OWNER' | translate }}</mat-radio-button></mat-list-item>
-					<mat-list-item><mat-radio-button value="1">{{ 'TYPES.DATASET-ROLE.MEMBER' | translate }}</mat-radio-button></mat-list-item>
+					<mat-list-item>
+						<mat-radio-button checked value="null" [checked]="!formGroup.get('role').value">{{ 'TYPES.DATASET-ROLE.ANY' | translate }}</mat-radio-button>
+					</mat-list-item>
+					<mat-list-item>
+						<mat-radio-button value="0">{{ 'TYPES.DATASET-ROLE.OWNER' | translate }}</mat-radio-button>
+					</mat-list-item>
+					<mat-list-item>
+						<mat-radio-button value="1">{{ 'TYPES.DATASET-ROLE.MEMBER' | translate }}</mat-radio-button>
+					</mat-list-item>
 				</mat-radio-group>
+				<hr>
 			</div>
 			<!-- End of Role Filter -->
 
 			<!-- Related Organization Filter -->
-			<div class="col-10 gray-container">
+			<div class="col-10">
 				<h6 class="category-title">{{'CRITERIA.DATA-SETS.ORGANIZATION' | translate }}</h6>
-				<mat-form-field>
+				<mat-form-field class="mb-4">
 					<mat-label>{{'CRITERIA.DATA-SETS.SELECT-ORGANIZATIONS' | translate}}</mat-label>
-					<app-multiple-auto-complete [formControl]="formGroup.get('organisations')"
-						[configuration]="organisationAutoCompleteConfiguration">
+					<app-multiple-auto-complete [formControl]="formGroup.get('organisations')" [configuration]="organisationAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
 				</mat-form-field>
+				<hr>
 			</div>
 			<!-- End of Related Organization Filter -->
 
 			<!-- Tags Filter -->
-			<div class="col-10 gray-container">
+			<div class="col-10">
 				<h6 class="category-title">{{'CRITERIA.DATA-SETS.TAGS' | translate }}</h6>
-				<mat-form-field>
+				<mat-form-field class="mb-4">
 					<mat-label>{{'CRITERIA.DATA-SETS.SELECT-TAGS' | translate}}</mat-label>
-					<app-multiple-auto-complete [formControl]="formGroup.get('tags')"
-						[configuration]="tagsAutoCompleteConfiguration">
+					<app-multiple-auto-complete [formControl]="formGroup.get('tags')" [configuration]="tagsAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
 				</mat-form-field>
 			</div>
diff --git a/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.scss b/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.scss
index e94acdcec..62c992251 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.scss
+++ b/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.scss
@@ -1,37 +1,49 @@
 .search ::ng-deep.mat-form-field-infix {
-  margin-left: 1em;
+	margin-left: 1em;
 }
 
 .category-title {
-  color: black;
-  // color: #089dbb;
-  margin-top: 8px;
-  margin-bottom: 12px;
+	color: black;
+	// color: #089dbb;
+	margin-top: 8px;
+	margin-bottom: 12px;
+	text-transform: none;
+	font-size: 1rem;
+	font-weight: 400;
 }
 
 .import {
-  margin: 10px;
-  padding: 0px;
+	margin: 10px;
+	padding: 0px;
 }
 
 .filters {
-  border: 1px solid #e4e4e4;
-  border-radius: 5px;
+	//   border: 1px solid #e4e4e4;
+	//   border-radius: 5px;
+}
+
+.criteria-title {
+	color: black;
+	font-weight: 500;
+	text-transform: none;
+	font-size: 1.25rem;
+	margin-bottom: 1.5em;
+	opacity: 0.8;
 }
 
 .filters-title {
-  width: 93px;
-  //   color: #089dbb;
-  color: #23bcba;
-  background-color: white;
-  padding: 0px 20px;
-  margin-top: -10px;
-  margin-left: 20px;
-  text-transform: uppercase;
+	width: 93px;
+	//   color: #089dbb;
+	color: #23bcba;
+	background-color: white;
+	padding: 0px 20px;
+	margin-top: -10px;
+	margin-left: 20px;
+	text-transform: uppercase;
 }
 
 .style-icon {
-  color: #adadad;
+	color: #adadad;
 }
 
 ::ng-deep .search-form .mat-form-field-wrapper {
diff --git a/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria-dialog.component.html b/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria-dialog.component.html
index b38f8336c..39d6887fe 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria-dialog.component.html
+++ b/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria-dialog.component.html
@@ -1,2 +1,2 @@
 <a class="col-auto d-flex pointer" (click)="onClose()"><span class="ml-auto mt-3 material-icons clear-icon">clear</span></a>
-<app-dmp-criteria-component [showGrant]="data.showGrant" [isPublic]="data.isPublic" [criteriaFormGroup]="data.formGroup" (filtersChanged)="onFiltersChanged($event)" class="col-auto"></app-dmp-criteria-component>
+<app-dmp-criteria-component [showGrant]="data.showGrant" [isPublic]="data.isPublic" [criteriaFormGroup]="data.formGroup" (filtersChanged)="onFiltersChanged($event)"></app-dmp-criteria-component>
diff --git a/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.html b/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.html
index f39279186..0274d0c00 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.html
+++ b/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.html
@@ -1,6 +1,11 @@
 <div class="dmp-criteria">
 	<div class="filters">
-		<h6 class="filters-title">{{'CRITERIA.FILTERS'| translate}}</h6>
+		<div class="row justify-content-center">
+			<div class="col-10">
+				<h6 class="criteria-title">{{'CRITERIA.FILTERS'| translate}}</h6>
+			</div>
+		</div>
+		<!-- <h6 class="filters-title">{{'CRITERIA.FILTERS'| translate}}</h6> -->
 		<div class="row" style="justify-content: center;">
 			<!-- Search Filter-->
 			<!-- <mat-form-field class="col-11 search">
@@ -13,7 +18,7 @@
 			<!-- End of Search Filter -->
 
 			<!-- Visibility Filter-->
-			<div *ngIf="!isPublic" class="col-10 gray-container">
+			<div *ngIf="!isPublic" class="col-10">
 				<h6 class="category-title">{{ 'TYPES.DMP-VISIBILITY.VISIBILITY' | translate }}</h6>
 				<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('status')">
 					<mat-list-item><mat-radio-button value="null" [checked]="!formGroup.get('status').value">{{ 'TYPES.DMP-VISIBILITY.ANY' | translate }}</mat-radio-button></mat-list-item>
@@ -21,11 +26,12 @@
 					<mat-list-item><mat-radio-button value="1">{{ 'TYPES.DMP-VISIBILITY.FINALIZED' | translate }}</mat-radio-button></mat-list-item>
 					<mat-list-item><mat-radio-button value="0">{{ 'TYPES.DMP-VISIBILITY.DRAFT' | translate }}</mat-radio-button></mat-list-item>
 				</mat-radio-group>
+				<hr>
 			</div>
 			<!-- End of Visibility Filter-->
 
 			<!-- Grant Status -->
-			<div class="col-10 gray-container" *ngIf="isPublic">
+			<div class="col-10" *ngIf="isPublic">
 				<h6 class="category-title">{{ 'FACET-SEARCH.GRANT-STATUS.TITLE' | translate }}</h6>
 				<mat-radio-group [formControl]="formGroup.get('grantStatus')">
 					<mat-list-item>
@@ -38,11 +44,12 @@
 						<mat-radio-button value="1">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.INACTIVE' | translate }}</mat-radio-button>
 					</mat-list-item>
 				</mat-radio-group>
+				<hr>
 			</div>
 			<!-- End of Grant Status -->
 
 			<!-- Related Dataset Templates Filter -->
-			<div *ngIf="showGrant" class="col-10 gray-container">
+			<div *ngIf="showGrant" class="col-10">
 				<h6 class="category-title">{{ 'CRITERIA.DMP.RELATED-DATASET-TEMPLATES' | translate}}</h6>
 				<mat-form-field>
 					<mat-label>{{ 'CRITERIA.DMP.SELECT-DATASET-TEMPLATES' | translate }}</mat-label>
@@ -50,11 +57,12 @@
 						[configuration]="datasetTemplateAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
 				</mat-form-field>
+				<hr>
 			</div>
 			<!-- End of Related Dataset Templates Filter -->
 
 			<!-- Related Grant Filters -->
-			<div *ngIf="showGrant" class="col-10 gray-container">
+			<div *ngIf="showGrant" class="col-10">
 				<h6 class="category-title">{{ 'DMP-RELATED-GRANT.RELATED-GRANT' | translate}}</h6>
 				<mat-form-field>
 					<mat-label>{{ 'CRITERIA.DMP.SELECT-GRANTS' | translate }}</mat-label>
@@ -62,11 +70,12 @@
 						[configuration]="grantAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
 				</mat-form-field>
+				<hr>
 			</div>
 			<!-- End of Related Grants Filters -->
 
 			<!-- Collaborators Filter -->
-			<div *ngIf="isAuthenticated()" class="col-10 gray-container">
+			<div *ngIf="isAuthenticated()" class="col-10">
 				<h6 class="category-title">{{ 'CRITERIA.DMP.RELATED-COLLABORATORS' | translate}}</h6>
 				<mat-form-field>
 					<mat-label>{{'CRITERIA.DMP.SELECT-COLLABORATORS' | translate}}</mat-label>
@@ -74,22 +83,24 @@
 						[configuration]="collaboratorsAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
 				</mat-form-field>
+				<hr>
 			</div>
 			<!-- End of Collaborators Filter -->
 
 			<!-- Role Filter -->
-			<div *ngIf="isAuthenticated()" class="col-10 gray-container">
+			<div *ngIf="isAuthenticated()" class="col-10">
 				<h6 class="category-title">{{ 'DATASET-PROFILE-LISTING.COLUMNS.ROLE' | translate }}</h6>
 				<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('role')">
 					<mat-list-item><mat-radio-button value="null" [checked]="!formGroup.get('role').value">{{ 'TYPES.DATASET-ROLE.ANY' | translate }}</mat-radio-button></mat-list-item>
 					<mat-list-item><mat-radio-button value="0">{{ 'TYPES.DATASET-ROLE.OWNER' | translate }}</mat-radio-button></mat-list-item>
 					<mat-list-item><mat-radio-button value="1">{{ 'TYPES.DATASET-ROLE.MEMBER' | translate }}</mat-radio-button></mat-list-item>
 				</mat-radio-group>
+				<hr>
 			</div>
 			<!-- End of Role Filter -->
 
 			<!-- Related Organization Filter -->
-			<div *ngIf="showGrant" class="col-10 gray-container">
+			<div *ngIf="showGrant" class="col-10">
 				<h6 class="category-title">{{ 'DMP-RELATED-ORGANIZATION.RELATED-ORGANIZATION' | translate }}</h6>
 				<mat-form-field>
 					<mat-label>{{'DMP-RELATED-ORGANIZATION.SELECT-ORGANIZATIONS' | translate}}</mat-label>
diff --git a/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.scss b/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.scss
index 8198a3f04..41829afd6 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.scss
@@ -8,6 +8,15 @@
     padding-bottom: 0px;
   }
 
+  .criteria-title {
+	color: black;
+	font-weight: 500;
+	text-transform: none;
+    font-size: 1.25rem;
+    margin-bottom: 1.5em;
+    opacity: 0.8;
+  }
+
   .hidden {
     display: none;
   }
@@ -26,11 +35,14 @@
   //   color: #089dbb;
   margin-top: 8px;
   margin-bottom: 12px;
+  text-transform: none;
+  font-size: 1rem;
+  font-weight: 400;
 }
 
 .filters {
-  border: 1px solid #e4e4e4;
-  border-radius: 5px;
+//   border: 1px solid #e4e4e4;
+//   border-radius: 5px;
 }
 
 .filters-title {