From 5268051a0d8e40b32d0dc8743733fa44f512cf19 Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Mon, 15 Apr 2024 13:01:58 +0300
Subject: [PATCH] ui fixes on listing screens > filters

---
 ...on-template-listing-filters.component.html |  41 +++--
 ...on-template-listing-filters.component.scss |   6 +-
 ...mplate-type-listing-filters.component.html |  39 +++--
 ...mplate-type-listing-filters.component.scss |   6 +-
 ...p-blueprint-listing-filters.component.html |   2 +-
 .../lock-listing-filters.component.html       |  54 ++++---
 .../lock-listing-filters.component.scss       |   2 -
 .../language-listing-filters.component.html   |  30 ++--
 .../language-listing-filters.component.scss   |   6 +-
 ...ling-source-listing-filters.component.html |  30 ++--
 ...ling-source-listing-filters.component.scss |   6 +-
 ...erence-type-listing-filters.component.html |  30 ++--
 ...erence-type-listing-filters.component.scss |   6 +-
 .../reference-listing-filters.component.html  |  49 ++++--
 .../reference-listing-filters.component.scss  |   6 +-
 .../tenant-listing-filters.component.html     |  30 ++--
 .../tenant-listing-filters.component.scss     |   6 +-
 .../user-listing-filters.component.html       |  39 +++--
 .../user-listing-filters.component.scss       |   6 +-
 ...on-template-listing-filters.component.html |  57 ++++---
 ...on-template-listing-filters.component.scss |   6 +-
 ...otification-listing-filters.component.html | 148 ++++++++++--------
 ...otification-listing-filters.component.scss |  20 ++-
 .../notification-listing-filters.component.ts |   4 +-
 ...otification-listing-filters.component.html |   2 +-
 25 files changed, 416 insertions(+), 215 deletions(-)

diff --git a/dmp-frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.html b/dmp-frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.html
index f8931ff0d..a81fe8422 100644
--- a/dmp-frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.html
+++ b/dmp-frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.html
@@ -7,32 +7,47 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="p-3" (click)="$event?.stopPropagation?.()">
-			<div class="search-listing-filters-container">
-				<div class="d-flex align-items-center justify-content-between">
+		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+			<div class="row justify-content-between">
+				<div class="col-auto mt-2">
 					<h4>{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.TITLE' | translate}}</h4>
+				</div>
+				<div class="col-auto">
 					<button color="accent" mat-button (click)="clearFilters()">
 						{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
 					</button>
 				</div>
+			</div>
 
-				<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
-					{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.IS-ACTIVE' | translate}}
-				</mat-slide-toggle>
-
-				<div>
-					<mat-label>{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.STATUS' | translate}}
+			<div class="row mt-3">
+				<div class="col-12">
+					<section class="w-100">
+						<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
+							{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.IS-ACTIVE' | translate}}
+						</mat-slide-toggle>
+					</section>
+				</div>
+			</div>
+				
+			<div class="row mt-3">
+				<div class="col-12">
+					<mat-form-field class="w-100">
+						<mat-label>{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.STATUS' | translate}}</mat-label>
 						<mat-select multiple [(ngModel)]="internalFilters.statuses">
 							<mat-option *ngFor="let descriptionTemplateStatus of descriptionTemplateStatusEnumValues" [value]="descriptionTemplateStatus">{{enumUtils.toDescriptionTemplateTypeStatusString(descriptionTemplateStatus)}}</mat-option>
 						</mat-select>
-					</mat-label>
+					</mat-form-field>
 				</div>
+			</div>
 
-				<div class="d-flex justify-content-end align-items-center mt-4 gap-1-rem">
-					<button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()">
+			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
+				<div class="col-auto">
+					<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
 						{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
-					<button mat-raised-button color="primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+				</div>
+				<div class="col-auto">
+					<button class="normal-btn-sm" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/dmp-frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.scss b/dmp-frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.scss
index ce98b0410..ac875ec51 100644
--- a/dmp-frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.scss
+++ b/dmp-frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.scss
@@ -22,4 +22,8 @@
 	// }
 }
 
-
+::ng-deep .mdc-form-field {
+	label {
+			margin: 0;
+	}
+}
diff --git a/dmp-frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.html b/dmp-frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.html
index 3d8fbcac9..85ce31d0e 100644
--- a/dmp-frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.html
+++ b/dmp-frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.html
@@ -7,32 +7,47 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="p-3" (click)="$event?.stopPropagation?.()">
-			<div class="search-listing-filters-container">
-				<div class="d-flex align-items-center justify-content-between">
+		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+			<div class="row justify-content-between">
+				<div class="col-auto mt-2">
 					<h4>{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.TITLE' | translate}}</h4>
+				</div>
+				<div class="col-auto">
 					<button color="accent" mat-button (click)="clearFilters()">
 						{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.CLEAR-ALL-FILTERS' | translate}}
 					</button>
 				</div>
+			</div>
 
-				<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
-					{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.IS-ACTIVE' | translate}}
-				</mat-slide-toggle>
+			<div class="row mt-3">
+				<div class="col-12">
+					<section class="w-100">
+						<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
+							{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.IS-ACTIVE' | translate}}
+						</mat-slide-toggle>
+					</section>
+				</div>
+			</div>
 
-				<div>
-					<mat-label>{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.STATUS' | translate}}
+			<div class="row mt-3">
+				<div class="col-12">
+					<mat-form-field class="w-100">
+						<mat-label>{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.STATUS' | translate}}</mat-label>
 						<mat-select multiple [(ngModel)]="internalFilters.statuses">
 							<mat-option *ngFor="let descriptionTemplateTypeStatus of descriptionTemplateTypeStatusEnumValues" [value]="descriptionTemplateTypeStatus">{{enumUtils.toDescriptionTemplateTypeStatusString(descriptionTemplateTypeStatus)}}</mat-option>
 						</mat-select>
-					</mat-label>
+					</mat-form-field>
 				</div>
+			</div>
 
-				<div class="d-flex justify-content-end align-items-center mt-4 gap-1-rem">
-					<button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()">
+			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
+				<div class="col-auto">
+					<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
 						{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
-					<button mat-raised-button color="primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+				</div>
+				<div class="col-auto">
+					<button class="normal-btn-sm" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/dmp-frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.scss b/dmp-frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.scss
index 999f5a7c6..56598bd16 100644
--- a/dmp-frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.scss
+++ b/dmp-frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.scss
@@ -22,4 +22,8 @@
 	// }
 }
 
-
+::ng-deep .mdc-form-field {
+	label {
+			margin: 0;
+	}
+}
diff --git a/dmp-frontend/src/app/ui/admin/dmp-blueprint/listing/filters/dmp-blueprint-listing-filters.component.html b/dmp-frontend/src/app/ui/admin/dmp-blueprint/listing/filters/dmp-blueprint-listing-filters.component.html
index 0b01f7bc8..fc34c9d97 100644
--- a/dmp-frontend/src/app/ui/admin/dmp-blueprint/listing/filters/dmp-blueprint-listing-filters.component.html
+++ b/dmp-frontend/src/app/ui/admin/dmp-blueprint/listing/filters/dmp-blueprint-listing-filters.component.html
@@ -39,7 +39,7 @@
 				</div>
 			</div>
 
-			<div class="row justify-content-end align-items-center mt-4 gap-1-rem">
+			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
 					<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
 						{{'DMP-BLUEPRINT-LISTING.FILTER.CANCEL' | translate}}
diff --git a/dmp-frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.html b/dmp-frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.html
index a4c200222..ae0057c6b 100644
--- a/dmp-frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.html
+++ b/dmp-frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.html
@@ -7,39 +7,47 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="p-3" (click)="$event?.stopPropagation?.()">
-			<div class="search-listing-filters-container">
-				<div class="d-flex align-items-center justify-content-between">
+		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+			<div class="row justify-content-between">
+				<div class="col-auto mt-2">
 					<h4>{{'LOCK-LISTING.FILTER.TITLE' | translate}}</h4>
+				</div>
+				<div class="col-auto">
 					<button color="accent" mat-button (click)="clearFilters()">
 						{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
 					</button>
 				</div>
+			</div>
 
-				<div class="mt-4">
-					<div>
-						<mat-form-field class="col-12">
-							<mat-label>{{'LOCK-LISTING.FILTER.USERS' | translate}}</mat-label>
-							<app-multiple-auto-complete [(ngModel)]="internalFilters.userIds" [hidePlaceholder]="true" [separatorKeysCodes]="separatorKeysCodes" [configuration]="userService.multipleAutocompleteConfiguration">
-							</app-multiple-auto-complete>
-						</mat-form-field>
-					</div>
-					<div>
-						<mat-form-field class="col-12">
-							<mat-label>{{'LOCK-LISTING.FILTER.TARGET-TYPE' | translate}}
-								<mat-select multiple [(ngModel)]="internalFilters.targetTypes">
-									<mat-option *ngFor="let targetType of lockTargetTypeEnumValues" [value]="targetType">{{enumUtils.toLockTargetTypeString(targetType)}}</mat-option>
-								</mat-select>
-							</mat-label>
-						</mat-form-field>
-					</div>
+			<div class="row mt-3">
+				<div class="col-12">
+					<mat-form-field class="w-100">
+						<mat-label>{{'LOCK-LISTING.FILTER.USERS' | translate}}</mat-label>
+						<app-multiple-auto-complete [(ngModel)]="internalFilters.userIds" [hidePlaceholder]="true" [separatorKeysCodes]="separatorKeysCodes" [configuration]="userService.multipleAutocompleteConfiguration">
+						</app-multiple-auto-complete>
+					</mat-form-field>
 				</div>
+			</div>
 
-				<div class="d-flex justify-content-between mt-4 gap-1-rem">
-					<button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()">
+			<div class="row mt-3">
+				<div class="col-12">
+					<mat-form-field class="w-100">
+						<mat-label>{{'LOCK-LISTING.FILTER.TARGET-TYPE' | translate}}</mat-label>
+						<mat-select multiple [(ngModel)]="internalFilters.targetTypes">
+							<mat-option *ngFor="let targetType of lockTargetTypeEnumValues" [value]="targetType">{{enumUtils.toLockTargetTypeString(targetType)}}</mat-option>
+						</mat-select>
+					</mat-form-field>
+				</div>
+			</div>
+
+			<div class="row justify-content-between mt-4 mb-1 gap-1-rem">
+				<div class="col-auto">
+					<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
 						{{'LOCK-LISTING.FILTER.CANCEL' | translate}}
 					</button>
-					<button mat-raised-button color="primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+				</div>
+				<div class="col-auto">
+					<button class="normal-btn-sm" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'LOCK-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/dmp-frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.scss b/dmp-frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.scss
index ea00a215c..484fc07ba 100644
--- a/dmp-frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.scss
+++ b/dmp-frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.scss
@@ -17,5 +17,3 @@
 	// 	height: 1.2em;
 	// }
 }
-
-
diff --git a/dmp-frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.html b/dmp-frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.html
index 0a46845d4..0bc061945 100644
--- a/dmp-frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.html
+++ b/dmp-frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.html
@@ -7,24 +7,36 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="p-3" (click)="$event?.stopPropagation?.()">
-			<div class="search-listing-filters-container">
-				<div class="d-flex align-items-center justify-content-between">
+		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+			<div class="row justify-content-between">
+				<div class="col-auto mt-2">
 					<h4>{{'LANGUAGE-LISTING.FILTER.TITLE' | translate}}</h4>
+				</div>
+				<div class="col-auto">
 					<button color="accent" mat-button (click)="clearFilters()">
 						{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
 					</button>
 				</div>
+			</div>
 
-				<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
-					{{'LANGUAGE-LISTING.FILTER.IS-ACTIVE' | translate}}
-				</mat-slide-toggle>
+			<div class="row mt-3">
+				<div class="col-12">
+					<section class="w-100">
+						<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
+							{{'LANGUAGE-LISTING.FILTER.IS-ACTIVE' | translate}}
+						</mat-slide-toggle>
+					</section>
+				</div>
+			</div>
 
-				<div class="d-flex justify-content-end align-items-center mt-4 gap-1-rem">
-					<button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()">
+			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
+				<div class="col-auto">
+					<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
 						{{'LANGUAGE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
-					<button mat-raised-button color="primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+				</div>
+				<div class="col-auto">
+					<button class="normal-btn-sm" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'LANGUAGE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/dmp-frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.scss b/dmp-frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.scss
index ea00a215c..5a1a293b5 100644
--- a/dmp-frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.scss
+++ b/dmp-frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.scss
@@ -18,4 +18,8 @@
 	// }
 }
 
-
+::ng-deep .mdc-form-field {
+	label {
+			margin: 0;
+	}
+}
diff --git a/dmp-frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.html b/dmp-frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.html
index 0d6059198..69446ed53 100644
--- a/dmp-frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.html
+++ b/dmp-frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.html
@@ -7,24 +7,36 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="p-3" (click)="$event?.stopPropagation?.()">
-			<div class="search-listing-filters-container">
-				<div class="d-flex align-items-center justify-content-between">
+		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+			<div class="row justify-content-between">
+				<div class="col-auto mt-2">
 					<h4>{{'PREFILLING-SOURCE-LISTING.FILTER.TITLE' | translate}}</h4>
+				</div>
+				<div class="col-auto">
 					<button color="accent" mat-button (click)="clearFilters()">
 						{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
 					</button>
 				</div>
+			</div>
 
-				<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
-					{{'PREFILLING-SOURCE-LISTING.FILTER.IS-ACTIVE' | translate}}
-				</mat-slide-toggle>
+			<div class="row mt-3">
+				<div class="col-12">
+					<section class="w-100">
+						<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
+							{{'PREFILLING-SOURCE-LISTING.FILTER.IS-ACTIVE' | translate}}
+						</mat-slide-toggle>
+					</section>
+				</div>
+			</div>
 
-				<div class="d-flex justify-content-end align-items-center mt-4 gap-1-rem">
-					<button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()">
+			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
+				<div class="col-auto">
+					<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
 						{{'PREFILLING-SOURCE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
-					<button mat-raised-button color="primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+				</div>
+				<div class="col-auto">
+					<button class="normal-btn-sm" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'PREFILLING-SOURCE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/dmp-frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.scss b/dmp-frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.scss
index c31bf588d..bc24a87e9 100644
--- a/dmp-frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.scss
+++ b/dmp-frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.scss
@@ -22,4 +22,8 @@
 	// }
 }
 
-
+::ng-deep .mdc-form-field {
+	label {
+			margin: 0;
+	}
+}
diff --git a/dmp-frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.html b/dmp-frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.html
index ff9454bac..9cafc882f 100644
--- a/dmp-frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.html
+++ b/dmp-frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.html
@@ -7,24 +7,36 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="p-3" (click)="$event?.stopPropagation?.()">
-			<div class="search-listing-filters-container">
-				<div class="d-flex align-items-center justify-content-between">
+		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+			<div class="row justify-content-between">
+				<div class="col-auto mt-2">
 					<h4>{{'REFERENCE-TYPE-LISTING.FILTER.TITLE' | translate}}</h4>
+				</div>
+				<div class="col-auto">
 					<button color="accent" mat-button (click)="clearFilters()">
 						{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
 					</button>
 				</div>
+			</div>
 
-				<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
-					{{'REFERENCE-TYPE-LISTING.FILTER.IS-ACTIVE' | translate}}
-				</mat-slide-toggle>
+			<div class="row mt-3">
+				<div class="col-12">
+					<section class="w-100">
+						<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
+							{{'REFERENCE-TYPE-LISTING.FILTER.IS-ACTIVE' | translate}}
+						</mat-slide-toggle>
+					</section>
+				</div>
+			</div>
 
-				<div class="d-flex justify-content-end align-items-center mt-4 gap-1-rem">
-					<button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()">
+			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
+				<div class="col-auto">
+					<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
 						{{'REFERENCE-TYPE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
-					<button mat-raised-button color="primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+				</div>
+				<div class="col-auto">
+					<button class="normal-btn-sm" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'REFERENCE-TYPE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/dmp-frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.scss b/dmp-frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.scss
index 999f5a7c6..56598bd16 100644
--- a/dmp-frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.scss
+++ b/dmp-frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.scss
@@ -22,4 +22,8 @@
 	// }
 }
 
-
+::ng-deep .mdc-form-field {
+	label {
+			margin: 0;
+	}
+}
diff --git a/dmp-frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.html b/dmp-frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.html
index 12a0dd0da..ce6b28177 100644
--- a/dmp-frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.html
+++ b/dmp-frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.html
@@ -7,39 +7,58 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="p-3" (click)="$event?.stopPropagation?.()">
-			<div class="search-listing-filters-container">
-				<div class="d-flex align-items-center justify-content-between">
+		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+			<div class="row justify-content-between">
+				<div class="col-auto mt-2">
 					<h4>{{'REFERENCE-LISTING.FILTER.TITLE' | translate}}</h4>
+				</div>
+
+				<div class="col-auto">
 					<button color="accent" mat-button (click)="clearFilters()">
 						{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
 					</button>
 				</div>
+			</div>
 
-				<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
-					{{'REFERENCE-LISTING.FILTER.IS-ACTIVE' | translate}}
-				</mat-slide-toggle>
+			<div class="row mt-3">
+				<div class="col-12">
+					<section class="w-100">
+						<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
+							{{'REFERENCE-LISTING.FILTER.IS-ACTIVE' | translate}}
+						</mat-slide-toggle>
+					</section>
+				</div>
+			</div>
 
-				<div>
-					<mat-label>{{'REFERENCE-LISTING.FILTER.TYPE' | translate}}
+			<div class="row mt-3">
+				<div class="col-12">
+					<mat-form-field class="w-100">
+						<mat-label>{{'REFERENCE-LISTING.FILTER.TYPE' | translate}}</mat-label>
 						<app-single-auto-complete [(ngModel)]="internalFilters.typeIds" placeholder="{{'REFERENCE-LISTING.FILTER.TYPE' | translate}}" [configuration]="referenceTypeService.singleAutocompleteConfiguration">
 						</app-single-auto-complete>
-					</mat-label>
+					</mat-form-field>
 				</div>
+			</div>
 
-				<div>
-					<mat-label>{{'REFERENCE-LISTING.FILTER.SOURCE-TYPE' | translate}}
+			<div class="row mt-3">
+				<div class="col-12">
+					<mat-form-field class="w-100">
+						<mat-label>{{'REFERENCE-LISTING.FILTER.SOURCE-TYPE' | translate}}</mat-label>
 						<mat-select multiple [(ngModel)]="internalFilters.sourceTypes">
 							<mat-option *ngFor="let referenceSourceType of referenceSourceTypeEnumValues" [value]="referenceSourceType">{{enumUtils.toReferenceSourceTypeString(referenceSourceType)}}</mat-option>
 						</mat-select>
-					</mat-label>
+					</mat-form-field>
 				</div>
+			</div>
 
-				<div class="d-flex justify-content-end align-items-center mt-4 gap-1-rem">
-					<button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()">
+			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
+				<div class="col-auto">
+					<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
 						{{'REFERENCE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
-					<button mat-raised-button color="primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+				</div>
+				<div class="col-auto">
+					<button class="normal-btn-sm" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'REFERENCE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/dmp-frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.scss b/dmp-frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.scss
index ea00a215c..5a1a293b5 100644
--- a/dmp-frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.scss
+++ b/dmp-frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.scss
@@ -18,4 +18,8 @@
 	// }
 }
 
-
+::ng-deep .mdc-form-field {
+	label {
+			margin: 0;
+	}
+}
diff --git a/dmp-frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.html b/dmp-frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.html
index 248db4c57..5a0baaa7c 100644
--- a/dmp-frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.html
+++ b/dmp-frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.html
@@ -7,24 +7,36 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="p-3" (click)="$event?.stopPropagation?.()">
-			<div class="search-listing-filters-container">
-				<div class="d-flex align-items-center justify-content-between">
+		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+			<div class="row justify-content-between">
+				<div class="col-auto mt-2">
 					<h4>{{'TENANT-LISTING.FILTER.TITLE' | translate}}</h4>
+				</div>
+				<div class="col-auto">
 					<button color="accent" mat-button (click)="clearFilters()">
 						{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
 					</button>
 				</div>
+			</div>
 
-				<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
-					{{'TENANT-LISTING.FILTER.IS-ACTIVE' | translate}}
-				</mat-slide-toggle>
+			<div class="row">
+				<div class="col-12">
+					<section class="w-100">
+						<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
+							{{'TENANT-LISTING.FILTER.IS-ACTIVE' | translate}}
+						</mat-slide-toggle>
+					</section>
+				</div>
+			</div>
 
-				<div class="d-flex justify-content-end align-items-center mt-4 gap-1-rem">
-					<button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()">
+			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
+				<div class="col-auto">
+					<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
 						{{'TENANT-LISTING.FILTER.CANCEL' | translate}}
 					</button>
-					<button mat-raised-button color="primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+				</div>
+				<div class="col-auto">
+					<button class="normal-btn-sm" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'TENANT-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/dmp-frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.scss b/dmp-frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.scss
index 999f5a7c6..56598bd16 100644
--- a/dmp-frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.scss
+++ b/dmp-frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.scss
@@ -22,4 +22,8 @@
 	// }
 }
 
-
+::ng-deep .mdc-form-field {
+	label {
+			margin: 0;
+	}
+}
diff --git a/dmp-frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.html b/dmp-frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.html
index 0e15fb761..5cca69742 100644
--- a/dmp-frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.html
+++ b/dmp-frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.html
@@ -7,32 +7,47 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="p-3" (click)="$event?.stopPropagation?.()">
-			<div class="search-listing-filters-container">
-				<div class="d-flex align-items-center justify-content-between">
+		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+			<div class="row justify-content-between">
+				<div class="col-auto mt-2">
 					<h4>{{'USER-LISTING.FILTER.TITLE' | translate}}</h4>
+				</div>
+				<div class="col-auto">
 					<button color="accent" mat-button (click)="clearFilters()">
 						{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
 					</button>
 				</div>
+			</div>
 
-				<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
-					{{'USER-LISTING.FILTER.IS-ACTIVE' | translate}}
-				</mat-slide-toggle>
+			<div class="row mt-3">
+				<div class="col-12">
+					<section class="w-100">
+						<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
+							{{'USER-LISTING.FILTER.IS-ACTIVE' | translate}}
+						</mat-slide-toggle>
+					</section>
+				</div>
+			</div>
 
-				<div>
-					<mat-label>{{'USER-LISTING.FILTER.ROLES' | translate}}
+			<div class="row mt-3">
+				<div class="col-12">
+					<mat-form-field class="w-100">
+						<mat-label>{{'USER-LISTING.FILTER.ROLES' | translate}}</mat-label>
 						<mat-select multiple [(ngModel)]="internalFilters.userRoleSubQuery.roles">
 							<mat-option *ngFor="let appRole of appRoleEnumValues" [value]="appRole">{{enumUtils.toAppRoleString(appRole)}}</mat-option>
 						</mat-select>
-					</mat-label>
+					</mat-form-field>
 				</div>
+			</div>
 
-				<div class="d-flex justify-content-end align-items-center mt-4 gap-1-rem">
-					<button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()">
+			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
+				<div class="col-auto">
+					<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
 						{{'USER-LISTING.FILTER.CANCEL' | translate}}
 					</button>
-					<button mat-raised-button color="primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+				</div>
+				<div class="col-auto">
+					<button class="normal-btn-sm" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'USER-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/dmp-frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.scss b/dmp-frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.scss
index b89c1afc8..48fddc087 100644
--- a/dmp-frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.scss
+++ b/dmp-frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.scss
@@ -22,4 +22,8 @@
 	// }
 }
 
-
+::ng-deep .mdc-form-field {
+	label {
+			margin: 0;
+	}
+}
diff --git a/dmp-frontend/src/notification-service/ui/admin/notification-template/listing/filters/notification-template-listing-filters.component.html b/dmp-frontend/src/notification-service/ui/admin/notification-template/listing/filters/notification-template-listing-filters.component.html
index 4674a0024..9a061466f 100644
--- a/dmp-frontend/src/notification-service/ui/admin/notification-template/listing/filters/notification-template-listing-filters.component.html
+++ b/dmp-frontend/src/notification-service/ui/admin/notification-template/listing/filters/notification-template-listing-filters.component.html
@@ -7,48 +7,69 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="p-3" (click)="$event?.stopPropagation?.()">
-			<div class="search-listing-filters-container">
-				<div class="d-flex align-items-center justify-content-between">
+		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+			<div class="row justify-content-between">
+				<div class="col-auto mt-2">
 					<h4>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.TITLE' | translate}}</h4>
+				</div>
+				<div class="col-auto">
 					<button color="accent" mat-button (click)="clearFilters()">
 						{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
 					</button>
 				</div>
+			</div>
 
-				<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
-					{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.IS-ACTIVE' | translate}}
-				</mat-slide-toggle>
+			<div class="row mt-3">
+				<div class="col-12">
+					<section class="w-100">
+						<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
+							{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.IS-ACTIVE' | translate}}
+						</mat-slide-toggle>
+					</section>
+				</div>
+			</div>
 
-				<div>
-					<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.NOTIFICATION-TYPE' | translate}}
+			<div class="row mt-3">
+				<div class="col-12">
+					<mat-form-field class="w-100">
+						<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.NOTIFICATION-TYPE' | translate}}</mat-label>
 						<mat-select multiple [(ngModel)]="internalFilters.notificationTypes">
 							<mat-option *ngFor="let type of notificationTypeEnumValues" [value]="type">{{enumUtils.toNotificationTypeString(type)}}</mat-option>
 						</mat-select>
-					</mat-label>
+					</mat-form-field>
 				</div>
+			</div>
 
-				<div>
-					<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.KIND' | translate}}
+			<div class="row mt-3">
+				<div class="col-12">
+					<mat-form-field class="w-100">
+						<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.KIND' | translate}}</mat-label>
 						<mat-select multiple [(ngModel)]="internalFilters.kinds">
 							<mat-option *ngFor="let kind of notificationTemplateKindEnumValues" [value]="kind">{{enumUtils.toNotificationTemplateKindString(kind)}}</mat-option>
 						</mat-select>
-					</mat-label>
+					</mat-form-field>
 				</div>
+			</div>
 
-				<div>
-					<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.CHANNEL' | translate}}
+			<div class="row mt-3">
+				<div class="col-12">
+					<mat-form-field class="w-100">
+						<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.CHANNEL' | translate}}</mat-label>
 						<mat-select multiple [(ngModel)]="internalFilters.channels">
 							<mat-option *ngFor="let channel of notificationTemplateChannelEnumValues" [value]="channel">{{enumUtils.toNotificationTemplateChannelString(channel)}}</mat-option>
 						</mat-select>
-					</mat-label>
+					</mat-form-field>
 				</div>
+			</div>
 
-				<div class="d-flex justify-content-end align-items-center mt-4 gap-1-rem">
-					<button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()">
+			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
+				<div class="col-auto">
+					<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
 						{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
-					<button mat-raised-button color="primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+				</div>
+				<div class="col-auto">
+					<button class="normal-btn-sm" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/dmp-frontend/src/notification-service/ui/admin/notification-template/listing/filters/notification-template-listing-filters.component.scss b/dmp-frontend/src/notification-service/ui/admin/notification-template/listing/filters/notification-template-listing-filters.component.scss
index 999f5a7c6..56598bd16 100644
--- a/dmp-frontend/src/notification-service/ui/admin/notification-template/listing/filters/notification-template-listing-filters.component.scss
+++ b/dmp-frontend/src/notification-service/ui/admin/notification-template/listing/filters/notification-template-listing-filters.component.scss
@@ -22,4 +22,8 @@
 	// }
 }
 
-
+::ng-deep .mdc-form-field {
+	label {
+			margin: 0;
+	}
+}
diff --git a/dmp-frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.html b/dmp-frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.html
index 2cc76ea56..6adc22cd1 100644
--- a/dmp-frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.html
+++ b/dmp-frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.html
@@ -7,79 +7,101 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="p-3" (click)="$event?.stopPropagation?.()">
-			<div class="search-listing-filters-container">
-				<div class="d-flex align-items-center justify-content-between">
+		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+			<div class="row justify-content-between">
+				<div class="col-auto mt-2">
 					<h4>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.TITLE' | translate}}</h4>
+				</div>
+				<div class="col-auto">
 					<button color="accent" mat-button (click)="clearFilters()">
 						{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
 					</button>
 				</div>
+			</div>
 
-				<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
-					{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.IS-ACTIVE' | translate}}
-				</mat-slide-toggle>
-
-				<div class="mt-4">
-					<div>
-						<mat-form-field class="col-12">
-							<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.USERS' | translate}}</mat-label>
-							<app-multiple-auto-complete [(ngModel)]="internalFilters.userIds" [hidePlaceholder]="true" [separatorKeysCodes]="separatorKeysCodes" [configuration]="userAutoCompleteConfiguration">
-							</app-multiple-auto-complete>
-						</mat-form-field>
-					</div>
-
-					<div>
-						<mat-form-field class="col-12">
-							<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.NOTIFICATION-TYPE' | translate}}</mat-label>
-							<mat-select multiple [(ngModel)]="internalFilters.type">
-								<mat-option *ngFor="let type of notificationTypeEnumValues" [value]="type">{{enumUtils.toNotificationTypeString(type)}}</mat-option>
-							</mat-select>
-						</mat-form-field>
-					</div>
-
-					<div>
-						<mat-form-field class="col-12">
-							<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.CONTACT-TYPE' | translate}}</mat-label>
-							<mat-select multiple [(ngModel)]="internalFilters.contactType">
-								<mat-option *ngFor="let contactType of notificationContactTypeEnumValues" [value]="contactType">{{enumUtils.toNotificationContactTypeString(contactType)}}</mat-option>
-							</mat-select>
-						</mat-form-field>
-					</div>
-
-					<div>
-						<mat-form-field class="col-12">
-							<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.NOTIFY-STATE' | translate}}</mat-label>
-							<mat-select multiple [(ngModel)]="internalFilters.notifyState">
-								<mat-option *ngFor="let notifyState of notificationNotifyStateEnumValues" [value]="notifyState">{{enumUtils.toNotificationNotifyStateString(notifyState)}}</mat-option>
-							</mat-select>
-						</mat-form-field>
-					</div>
-
-					<div>
-						<mat-form-field class="col-12">
-							<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.TRACKING-STATE' | translate}}</mat-label>
-							<mat-select multiple [(ngModel)]="internalFilters.trackingState">
-								<mat-option *ngFor="let trackingState of notificationTrackingStateEnumValues" [value]="trackingState">{{enumUtils.toNotificationTrackingStateString(trackingState)}}</mat-option>
-							</mat-select>
-						</mat-form-field>
-					</div>
-
-					<div>
-						<mat-form-field class="col-12">
-							<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.TRACKING-PROCESS' | translate}}</mat-label>
-							<mat-select multiple [(ngModel)]="internalFilters.trackingProcess">
-								<mat-option *ngFor="let trackingProcess of notificationTrackingProcessEnumValues" [value]="trackingProcess">{{enumUtils.toNotificationTrackingProcessString(trackingProcess)}}</mat-option>
-							</mat-select>
-						</mat-form-field>
-					</div>
+			<div class="row mt-3">
+				<div class="col-12">
+					<section class="w-100">
+						<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
+							{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.IS-ACTIVE' | translate}}
+						</mat-slide-toggle>
+					</section>
 				</div>
+			</div>
 
-				<div class="d-flex justify-content-between mt-4 gap-1-rem">
-					<button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()">
+			<div class="row mt-3">
+				<div class="col-12">
+					<mat-form-field class="w-100">
+						<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.USERS' | translate}}</mat-label>
+						<app-multiple-auto-complete [(ngModel)]="internalFilters.userIds" [hidePlaceholder]="true" [separatorKeysCodes]="separatorKeysCodes" [configuration]="userAutoCompleteConfiguration">
+						</app-multiple-auto-complete>
+					</mat-form-field>
+				</div>
+			</div>
+
+			<div class="row mt-3">
+				<div class="col-12">
+					<mat-form-field class="w-100">
+						<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.NOTIFICATION-TYPE' | translate}}</mat-label>
+						<mat-select multiple [(ngModel)]="internalFilters.type">
+							<mat-option *ngFor="let type of notificationTypeEnumValues" [value]="type">{{enumUtils.toNotificationTypeString(type)}}</mat-option>
+						</mat-select>
+					</mat-form-field>
+				</div>
+			</div>
+
+			<div class="row mt-3">
+				<div class="col-12">
+					<mat-form-field class="w-100">
+						<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.CONTACT-TYPE' | translate}}</mat-label>
+						<mat-select multiple [(ngModel)]="internalFilters.contactType">
+							<mat-option *ngFor="let contactType of notificationContactTypeEnumValues" [value]="contactType">{{enumUtils.toNotificationContactTypeString(contactType)}}</mat-option>
+						</mat-select>
+					</mat-form-field>
+				</div>
+			</div>
+
+			<div class="row mt-3">
+				<div class="col-12">
+					<mat-form-field class="w-100">
+						<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.NOTIFY-STATE' | translate}}</mat-label>
+						<mat-select multiple [(ngModel)]="internalFilters.notifyState">
+							<mat-option *ngFor="let notifyState of notificationNotifyStateEnumValues" [value]="notifyState">{{enumUtils.toNotificationNotifyStateString(notifyState)}}</mat-option>
+						</mat-select>
+					</mat-form-field>
+				</div>
+			</div>
+
+			<div class="row mt-3">
+				<div class="col-12">
+					<mat-form-field class="w-100">
+						<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.TRACKING-STATE' | translate}}</mat-label>
+						<mat-select multiple [(ngModel)]="internalFilters.trackingState">
+							<mat-option *ngFor="let trackingState of notificationTrackingStateEnumValues" [value]="trackingState">{{enumUtils.toNotificationTrackingStateString(trackingState)}}</mat-option>
+						</mat-select>
+					</mat-form-field>
+				</div>
+			</div>
+
+			<div class="row mt-3">
+				<div class="col-12">
+					<mat-form-field class="w-100">
+						<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.TRACKING-PROCESS' | translate}}</mat-label>
+						<mat-select multiple [(ngModel)]="internalFilters.trackingProcess">
+							<mat-option *ngFor="let trackingProcess of notificationTrackingProcessEnumValues" [value]="trackingProcess">{{enumUtils.toNotificationTrackingProcessString(trackingProcess)}}</mat-option>
+						</mat-select>
+					</mat-form-field>
+				</div>
+			</div>
+
+			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
+				<div class="col-auto">
+					<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
 						{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.CANCEL' | translate}}
 					</button>
-					<button mat-raised-button color="primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+				</div>
+				<div class="col-auto">
+					<button class="normal-btn-sm" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/dmp-frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.scss b/dmp-frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.scss
index af7cd9926..5a1a293b5 100644
--- a/dmp-frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.scss
+++ b/dmp-frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.scss
@@ -1,11 +1,11 @@
-// ::ng-deep.mat-mdc-menu-panel {
-// 	max-width: 100% !important;
-// 	height: 100% !important;
-// }
+::ng-deep.mat-mdc-menu-panel {
+	max-width: 100% !important;
+	height: 100% !important;
+}
 
-// :host::ng-deep.mat-mdc-menu-content:not(:empty) {
-// 	padding-top: 0 !important;
-// }
+:host::ng-deep.mat-mdc-menu-content:not(:empty) {
+	padding-top: 0 !important;
+}
 
 
 .filter-button{
@@ -18,4 +18,8 @@
 	// }
 }
 
-
+::ng-deep .mdc-form-field {
+	label {
+			margin: 0;
+	}
+}
diff --git a/dmp-frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.ts b/dmp-frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.ts
index d9bf03b27..b22ad3d02 100644
--- a/dmp-frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.ts
+++ b/dmp-frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.ts
@@ -2,7 +2,7 @@ import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { NotificationFilter } from '@notification-service/core/query/notification.lookup';
 import { UserService } from '@app/core/services/user/user.service';
-import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
+import { NotificationServiceEnumUtils } from '@notification-service/core/formatting/enum-utils.service';
 import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
 import { BaseComponent } from '@common/base/base.component';
 import { Guid } from '@common/types/guid';
@@ -37,7 +37,7 @@ export class NotificationListingFiltersComponent extends BaseComponent implement
 
 	protected appliedFilterCount: number = 0;
 	constructor(
-		public enumUtils: EnumUtils,
+		public enumUtils: NotificationServiceEnumUtils,
 		private userService: UserService,
 	) { super(); }
 
diff --git a/dmp-frontend/src/notification-service/ui/inapp-notification/listing/filters/mine-inapp-notification-listing-filters.component.html b/dmp-frontend/src/notification-service/ui/inapp-notification/listing/filters/mine-inapp-notification-listing-filters.component.html
index a5d05c485..1179ae876 100644
--- a/dmp-frontend/src/notification-service/ui/inapp-notification/listing/filters/mine-inapp-notification-listing-filters.component.html
+++ b/dmp-frontend/src/notification-service/ui/inapp-notification/listing/filters/mine-inapp-notification-listing-filters.component.html
@@ -40,7 +40,7 @@
 				</div>
 			</div>
 
-			<div class="row justify-content-end align-items-center mt-4 gap-1-rem">
+			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
 					<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
 						{{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.FILTER.CANCEL' | translate}}