From 55f0c5a68f5cbc3c8064b3bf71b11b63d6e2bfd8 Mon Sep 17 00:00:00 2001
From: mchouliara <mchouliara@cite.gr>
Date: Tue, 15 Oct 2024 16:08:27 +0300
Subject: [PATCH] UI fix button styles on listings, listing filters

---
 .../status-listing-filters.component.html     |  12 +-
 .../listing/status-listing.component.html     |   2 +-
 ...tion-status-listing-filters.component.html |  12 +-
 .../description-status-listing.component.html |   2 +-
 ...n-template-editor-field-set.component.html |   2 +-
 ...n-template-editor-field-set.component.scss |  13 +-
 ...description-template-editor.component.html |  14 +-
 ...escription-template-listing.component.html |   4 +-
 ...on-template-listing-filters.component.html |  10 +-
 ...iption-template-type-editor.component.html |   8 +-
 ...ption-template-type-listing.component.html |   2 +-
 ...mplate-type-listing-filters.component.html |  12 +-
 .../lock-listing-filters.component.html       |  12 +-
 .../language-listing-filters.component.html   |  10 +-
 .../listing/language-listing.component.html   |   2 +-
 .../plan-blueprint-editor.component.html      |  14 +-
 ...n-blueprint-listing-filters.component.html |   8 +-
 ...n-blueprint-listing-filters.component.scss |   1 -
 .../plan-blueprint-listing.component.html     |   2 +-
 ...plan-status-listing-filters.component.html |  12 +-
 .../plan-status-listing.component.html        |   2 +-
 .../prefilling-source-editor.component.html   |  16 +-
 ...ling-source-listing-filters.component.html |  12 +-
 .../prefilling-source-listing.component.html  |   2 +-
 .../reference-type-editor.component.html      |  12 +-
 ...erence-type-listing-filters.component.html |  12 +-
 .../reference-type-listing.component.html     |   2 +-
 .../editor/reference-editor.component.html    |   8 +-
 .../reference-listing-filters.component.html  |  12 +-
 .../listing/reference-listing.component.html  |   2 +-
 .../tenant-listing-filters.component.html     |  12 +-
 .../listing/tenant-listing.component.html     |   2 +-
 .../editor/usage-limit-editor.component.html  |   6 +-
 ...usage-limit-listing-filters.component.html |  12 +-
 .../usage-limit-listing.component.html        |   2 +-
 .../user-listing-filters.component.html       |  12 +-
 .../user/listing/user-listing.component.html  |   2 +-
 .../field-set-title.component.scss            |   4 +-
 .../plan-listing-item.component.scss          |   4 +-
 .../plan/listing/plan-listing.component.scss  |   4 +-
 .../start-new-plan-dialog.component.html      |  20 +--
 ...on-template-listing-filters.component.html |  12 +-
 ...tification-template-listing.component.html |   2 +-
 ...otification-listing-filters.component.html |  12 +-
 ...otification-listing-filters.component.html |  12 +-
 frontend/src/styles.scss                      | 170 +++++-------------
 46 files changed, 219 insertions(+), 303 deletions(-)

diff --git a/frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.html b/frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.html
index 4f5235e7b..54d3b69a0 100644
--- a/frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.html
+++ b/frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.html
@@ -1,19 +1,19 @@
-<div class="d-flex align-items-center gap-1-rem">
+<div class="d-flex align-items-center gap-1-rem listing-filters">
 
-	<button mat-flat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
+	<button mat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
 		<mat-icon aria-hidden="false" [matBadgeHidden]="!appliedFilterCount" [matBadge]="appliedFilterCount" matBadgeColor="warn" matBadgeSize="small">filter_alt</mat-icon>
 		{{'COMMONS.LISTING-COMPONENT.SEARCH-FILTER-BTN' | translate}}
 	</button>
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid filter-container" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'ANNOTATION-SERVICE.STATUS-LISTING.FILTER.TITLE' | translate}}</h4>
 				</div>
 				<div class="col-auto">
-					<button color="accent" mat-button (click)="clearFilters()">
+					<button color="primary" mat-button (click)="clearFilters()">
 						{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
 					</button>
 				</div>
@@ -42,12 +42,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-stroked-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger?.closeMenu()">
 						{{'ANNOTATION-SERVICE.STATUS-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-flat-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'ANNOTATION-SERVICE.STATUS-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/annotation-service/ui/admin/status/listing/status-listing.component.html b/frontend/src/annotation-service/ui/admin/status/listing/status-listing.component.html
index abd88abae..69110b5e4 100644
--- a/frontend/src/annotation-service/ui/admin/status/listing/status-listing.component.html
+++ b/frontend/src/annotation-service/ui/admin/status/listing/status-listing.component.html
@@ -7,7 +7,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn secondary"
+					<button mat-flat-button color="accent" class="padded-shadow-btn"
 						*ngIf="authService.hasPermission(authService.permissionEnum.EditStatus)"
 						[routerLink]="routerUtils.generateUrl(['/annotation-statuses/new'])">
 						<mat-icon>add</mat-icon>
diff --git a/frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.html b/frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.html
index 6226877e0..6e32af932 100644
--- a/frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.html
@@ -1,19 +1,19 @@
-<div class="d-flex align-items-center gap-1-rem">
+<div class="d-flex align-items-center gap-1-rem listing-filters">
 
-	<button mat-flat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
+	<button mat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
 		<mat-icon aria-hidden="false" [matBadgeHidden]="!appliedFilterCount" [matBadge]="appliedFilterCount" matBadgeColor="warn" matBadgeSize="small">filter_alt</mat-icon>
 		{{'COMMONS.LISTING-COMPONENT.SEARCH-FILTER-BTN' | translate}}
 	</button>
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid filter-container" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'PLAN-BLUEPRINT-LISTING.FILTER.TITLE' | translate}}</h4>
 				</div>
 				<div class="col-auto">
-					<button color="accent" mat-button (click)="clearFilters()">
+					<button color="primary" mat-button (click)="clearFilters()">
 						{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
 					</button>
 				</div>
@@ -42,12 +42,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-stroked-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger?.closeMenu()">
 						{{'PLAN-BLUEPRINT-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-flat-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'PLAN-BLUEPRINT-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/description-status/listing/description-status-listing/description-status-listing.component.html b/frontend/src/app/ui/admin/description-status/listing/description-status-listing/description-status-listing.component.html
index 6c47cdbff..80db9bd10 100644
--- a/frontend/src/app/ui/admin/description-status/listing/description-status-listing/description-status-listing.component.html
+++ b/frontend/src/app/ui/admin/description-status/listing/description-status-listing/description-status-listing.component.html
@@ -7,7 +7,7 @@
 				</div>
 
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionStatus)" [routerLink]="routerUtils.generateUrl(['/description-statuses/new'])">
+					<button mat-flat-button color="accent" class="padded-shadow-btn" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionStatus)" [routerLink]="routerUtils.generateUrl(['/description-statuses/new'])">
 						<mat-icon>add</mat-icon>
 						{{'DESCRIPTION-STATUS-LISTING.ACTIONS.CREATE-DESCRIPTION-STATUS' | translate}}
 					</button>
diff --git a/frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.html b/frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.html
index 21c73b252..a4700c1a4 100644
--- a/frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.html
+++ b/frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.html
@@ -156,7 +156,7 @@
 		<ng-container *ngIf="hasFocus">
 			<div class="row justify-content-end pt-2">
 				<div class="col-auto">
-					<ul class="list-unstyled list-inline fieldset-actions-list d-flex align-items-center text-primary-blue">
+					<ul class="list-unstyled list-inline fieldset-actions-list d-flex align-items-center text-primary">
 						<li class="list-inline-item" *ngIf="!viewOnly">
 
 							<span role="button" [matMenuTriggerFor]="inputmenu" class="inputMenuTrigger">
diff --git a/frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.scss b/frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.scss
index 854224961..927cb8a9c 100644
--- a/frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.scss
+++ b/frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.scss
@@ -17,12 +17,13 @@
 
 //Palete
 
-$blue-color : var(--sys-primary);
-$blue-color-light: #5cf7f2;
 
+.text-primary {
+    color: var(--sys-primary);
+}
 .actions-list{
     border-radius: 7px;
-    box-shadow: 0 1px 0.8em $blue-color;
+    box-shadow: 0 1px 0.8em var(--sys-primary);
     padding: 1em 0em;
     font-size: small;
 }
@@ -39,13 +40,13 @@ $blue-color-light: #5cf7f2;
     box-shadow: 0px 1px 2px rgb(173, 173, 173) ;
     padding: 3em;
     border-radius: .3em;
-    border-left: 0.3em solid $blue-color;
+    border-left: 0.3em solid var(--sys-primary);
     padding-bottom: 2em;
     margin-bottom: 2em;
 
 }
 .field-id-container{
-    background-color: $blue-color-light;
+    background-color: var(--md-sys-color-inverse-primary);
     position: absolute;
     right: 0;
     top: 0;
@@ -85,7 +86,7 @@ $blue-color-light: #5cf7f2;
     transform: translateY(3px);
   }
   .mat-checkbox-frame{
-      border: 1px solid $blue-color ;
+      border: 1px solid var(--sys-primary) ;
   }
 }
 
diff --git a/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html b/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html
index 254546570..90998a98b 100644
--- a/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html
+++ b/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html
@@ -117,7 +117,7 @@
 										<td>{{usersMap.get(user?.get('userId')?.value)?.name}}</td>
 										<td>{{enumUtils.toUserDescriptionTemplateRoleString(user?.get('role')?.value)}}</td>
 										<td *ngIf="!viewOnly">
-											<button mat-button class="padded-shadow-btn delete-inverted" (click)="verifyAndRemoveUser(i)" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-REMOVE-USER'| translate"><mat-icon>person_remove</mat-icon></button>
+											<button mat-stroked-button color="warn" class="padded-shadow-btn" (click)="verifyAndRemoveUser(i)" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-REMOVE-USER'| translate"><mat-icon>person_remove</mat-icon></button>
 										</td>
 									</tr>
 									<tr *ngIf="formGroup.get('users')?.controls?.length === 0">
@@ -198,7 +198,7 @@
 											</div>
                                             @if(!viewOnly &&!selectedTocEntry?.subEntries?.length){
                                                 <div class="col-12">
-                                                    <button mat-button class="padded-shadow-btn secondary" (click)="addNewEntry({parent:selectedTocEntry, childType: tocEntryEnumValues.Section})">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-SECTION' | translate}}</button>
+                                                    <button mat-flat-button color="accent" class="padded-shadow-btn" (click)="addNewEntry({parent:selectedTocEntry, childType: tocEntryEnumValues.Section})">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-SECTION' | translate}}</button>
                                                 </div>
                                                 <mat-error *ngIf="selectedTocEntry.form.invalid && showErrors">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-SELECT-AT-LEAST-ONE-REQUIRED' | translate}}</mat-error>
                                             }
@@ -276,11 +276,11 @@
 
 	<ng-container *ngIf="steps && stepper">
 		<div class="floating-btn">
-			<button *ngIf="stepper?.selectedIndex > 0" [@previous_btn] mat-button class="padded-shadow-btn secondary " (click)="stepper?.previous()">
+			<button *ngIf="stepper?.selectedIndex > 0" [@previous_btn] mat-flat-button color="accent" class="padded-shadow-btn " (click)="stepper?.previous()">
 				<mat-icon class="back-icon pointer">chevron_left</mat-icon>
 				{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.PREVIOUS' | translate}}
 			</button>
-			<button *ngIf="stepper?.selectedIndex < (steps.length-1)" mat-button class="padded-shadow-btn secondary ml-3" [@next_btn] (click)="stepper?.next();" [disabled]="!isStepCompleted(stepper?.selectedIndex)">
+			<button *ngIf="stepper?.selectedIndex < (steps.length-1)" mat-flat-button color="accent" class="padded-shadow-btn ml-3" [@next_btn] (click)="stepper?.next();" [disabled]="!isStepCompleted(stepper?.selectedIndex)">
 				<span>{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.NEXT' | translate}}</span>
 				<mat-icon class="back-icon pointer" iconPositionEnd>chevron_right</mat-icon>
 			</button>
@@ -292,8 +292,8 @@
 
 <ng-template #actions>
 	<div>
-		<button mat-button class="padded-shadow-btn primary-inverted mr-3" (click)="cancel()">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.CLOSE' | translate}}</button>
-		<button *ngIf="!viewOnly" mat-button class="padded-shadow-btn secondary" type="button">
+		<button mat-stroked-button color="primary" class="padded-shadow-btn mr-3" (click)="cancel()">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.CLOSE' | translate}}</button>
+		<button *ngIf="!viewOnly" mat-flat-button color="accent" class="padded-shadow-btn" type="button">
 			<span class="d-flex flex-row row">
 				<span (click)="save(); formSubmit()" class="col">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.SAVE' | translate}}</span>
 				<mat-divider [vertical]="true"></mat-divider>
@@ -307,7 +307,7 @@
 			<button mat-menu-item (click)="saveWithClose(false)" type="button">{{ 'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.SAVE-AND-CONTINUE' | translate }}</button>
 		</mat-menu>
 
-		<button *ngIf="!viewOnly && steps?.length-1 === stepper?.selectedIndex" [@finalize_btn] mat-button class="padded-shadow-btn primary ml-3" [disabled]="!formGroup.valid" [class.invisible]="steps?.length-1 !== stepper?.selectedIndex" (click)="finalize()">
+		<button *ngIf="!viewOnly && steps?.length-1 === stepper?.selectedIndex" [@finalize_btn] mat-flat-button color="primary" class="padded-shadow-btn ml-3" [disabled]="!formGroup.valid" [class.invisible]="steps?.length-1 !== stepper?.selectedIndex" (click)="finalize()">
 			{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FINALIZE' | translate}}
 		</button>
 	</div>
diff --git a/frontend/src/app/ui/admin/description-template/listing/description-template-listing.component.html b/frontend/src/app/ui/admin/description-template/listing/description-template-listing.component.html
index 5cdc64c78..ce909fefa 100644
--- a/frontend/src/app/ui/admin/description-template/listing/description-template-listing.component.html
+++ b/frontend/src/app/ui/admin/description-template/listing/description-template-listing.component.html
@@ -6,7 +6,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto" *ngIf="canCreateNew()">
-					<button mat-button class="padded-shadow-btn import" (click)="import()">
+					<button mat-stroked-button class="padded-shadow-btn import" (click)="import()">
 						<span class="button-text">
 							{{'DESCRIPTION-TEMPLATE-LISTING.IMPORT.UPLOAD-XML' | translate}}
 						</span>
@@ -14,7 +14,7 @@
 				</div>
 
 				<div class="col-auto" *ngIf="canCreateNew()">
-					<button mat-button class="padded-shadow-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplate)" [routerLink]="[routerUtils.generateUrl('/description-templates/new')]">
+					<button mat-flat-button color="accent" class="padded-shadow-btn" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplate)" [routerLink]="[routerUtils.generateUrl('/description-templates/new')]">
 						<mat-icon>add</mat-icon>
 						{{'DESCRIPTION-TEMPLATE-LISTING.CREATE-DESCRIPTION-TEMPLATE' | translate}}
 					</button>
diff --git a/frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.html b/frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.html
index b16663353..36e8f9d60 100644
--- a/frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.html
@@ -1,19 +1,19 @@
-<div class="d-flex align-items-center gap-1-rem">
+<div class="d-flex align-items-center gap-1-rem listing-filters">
 
-	<button mat-flat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
+	<button mat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
 		<mat-icon aria-hidden="false" [matBadgeHidden]="!appliedFilterCount" [matBadge]="appliedFilterCount" matBadgeColor="warn" matBadgeSize="small">filter_alt</mat-icon>
 		{{'COMMONS.LISTING-COMPONENT.SEARCH-FILTER-BTN' | translate}}
 	</button>
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
+		<div class="filter-container container-fluid" [class.accessibility-theme]="accessibilityTheme()" (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()">
+					<button color="primary" mat-button (click)="clearFilters()">
 						{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
 					</button>
 				</div>
@@ -47,7 +47,7 @@
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-flat-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/description-types/editor/description-template-type-editor.component.html b/frontend/src/app/ui/admin/description-types/editor/description-template-type-editor.component.html
index 2237d2fe0..80b6786ac 100644
--- a/frontend/src/app/ui/admin/description-types/editor/description-template-type-editor.component.html
+++ b/frontend/src/app/ui/admin/description-types/editor/description-template-type-editor.component.html
@@ -8,22 +8,22 @@
 				</div>
 
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn neutral" (click)="cancel()" type="button">{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-stroked-button class="padded-shadow-btn neutral" (click)="cancel()" type="button">{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto" *ngIf="canDelete">
-					<button mat-button (click)="delete()" class="padded-shadow-btn delete-inverted" type="button">
+					<button mat-stroked-button color="warn" (click)="delete()" class="padded-shadow-btn" type="button">
 						<mat-icon>delete</mat-icon>
 						{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.DELETE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto" *ngIf="canFinalize">
-					<button mat-button class="padded-shadow-btn secondary" (click)="save(); finalize()">
+					<button mat-flat-button color="accent" class="padded-shadow-btn" (click)="save(); finalize()">
 						<mat-icon>save</mat-icon>
 						{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.FINALIZE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto" *ngIf="canSave">
-					<button mat-button class="padded-shadow-btn primary" (click)="save(); formSubmit()">
+					<button mat-flat-button color="primary" class="padded-shadow-btn" (click)="save(); formSubmit()">
 						<mat-icon>save</mat-icon>
 						{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
diff --git a/frontend/src/app/ui/admin/description-types/listing/description-template-type-listing.component.html b/frontend/src/app/ui/admin/description-types/listing/description-template-type-listing.component.html
index 8805c8917..0925d106b 100644
--- a/frontend/src/app/ui/admin/description-types/listing/description-template-type-listing.component.html
+++ b/frontend/src/app/ui/admin/description-types/listing/description-template-type-listing.component.html
@@ -6,7 +6,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn secondary"
+					<button mat-flat-button color="accent" class="padded-shadow-btn"
 						*ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplateType)"
 						[routerLink]="routerUtils.generateUrl(['/description-template-type/new'])">
 						<mat-icon>add</mat-icon>
diff --git a/frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.html b/frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.html
index 497ac33ee..e1fbaabb4 100644
--- a/frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.html
@@ -1,19 +1,19 @@
-<div class="d-flex align-items-center gap-1-rem">
+<div class="d-flex align-items-center gap-1-rem listing-filters">
 
-	<button mat-flat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
+	<button mat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
 		<mat-icon aria-hidden="false" [matBadgeHidden]="!appliedFilterCount" [matBadge]="appliedFilterCount" matBadgeColor="warn" matBadgeSize="small">filter_alt</mat-icon>
 		{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.SEARCH-FILTER-BTN' | translate}}
 	</button>
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
+		<div class="filter-container container-fluid" [class.accessibility-theme]="accessibilityTheme()" (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()">
+					<button color="primary" mat-button (click)="clearFilters()">
 						{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.CLEAR-ALL-FILTERS' | translate}}
 					</button>
 				</div>
@@ -42,12 +42,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-stroked-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger?.closeMenu()">
 						{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-flat-button color="primary" class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.html b/frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.html
index 4d2db3c64..92eb04bd2 100644
--- a/frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.html
@@ -1,19 +1,19 @@
-<div class="d-flex align-items-center gap-1-rem">
+<div class="d-flex align-items-center gap-1-rem listing-filters">
 
-	<button mat-flat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
+	<button mat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
 		<mat-icon aria-hidden="false" [matBadgeHidden]="!appliedFilterCount" [matBadge]="appliedFilterCount" matBadgeColor="warn" matBadgeSize="small">filter_alt</mat-icon>
 		{{'COMMONS.LISTING-COMPONENT.SEARCH-FILTER-BTN' | translate}}
 	</button>
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid filter-container" [class.accessibility-theme]="accessibilityTheme()" (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()">
+					<button color="primary" mat-button (click)="clearFilters()">
 						{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
 					</button>
 				</div>
@@ -42,12 +42,12 @@
 
 			<div class="row justify-content-between mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-stroked-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger?.closeMenu()">
 						{{'LOCK-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-flat-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'LOCK-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.html b/frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.html
index 773259626..c9e2da094 100644
--- a/frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.html
@@ -1,19 +1,19 @@
-<div class="d-flex align-items-center gap-1-rem">
+<div class="d-flex align-items-center gap-1-rem listing-filters">
 
-	<button mat-flat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
+	<button mat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
 		<mat-icon aria-hidden="false" [matBadgeHidden]="!appliedFilterCount" [matBadge]="appliedFilterCount" matBadgeColor="warn" matBadgeSize="small">filter_alt</mat-icon>
 		{{'COMMONS.LISTING-COMPONENT.SEARCH-FILTER-BTN' | translate}}
 	</button>
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid filter-container" [class.accessibility-theme]="accessibilityTheme()" (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()">
+					<button color="primary" mat-button (click)="clearFilters()">
 						{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
 					</button>
 				</div>
@@ -31,7 +31,7 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-stroked-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger?.closeMenu()">
 						{{'LANGUAGE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/language/listing/language-listing.component.html b/frontend/src/app/ui/admin/language/listing/language-listing.component.html
index 7dacce28b..dab77fe7d 100644
--- a/frontend/src/app/ui/admin/language/listing/language-listing.component.html
+++ b/frontend/src/app/ui/admin/language/listing/language-listing.component.html
@@ -6,7 +6,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn secondary"
+					<button mat-flat-button color="accent" class="padded-shadow-btn"
 						*ngIf="authService.hasPermission(authService.permissionEnum.EditLanguage)"
 						[routerLink]="routerUtils.generateUrl(['/languages/new'])">
 						<mat-icon>add</mat-icon>
diff --git a/frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.html b/frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.html
index 986ef8043..8523e841b 100644
--- a/frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.html
+++ b/frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.html
@@ -6,16 +6,16 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-md-auto mb-md-0 col-12 mb-2" *ngIf="canDelete">
-					<button [disabled]="isLocked" mat-button class="padded-shadow-btn secondary" type="button" (click)="delete()">
+					<button mat-stroked-button color="warn" [disabled]="isLocked" mat-button class="padded-shadow-btn" type="button" (click)="delete()">
 						<mat-icon>delete</mat-icon>
 						{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.DELETE' | translate}}
 					</button>
 				</div>
 				<div class="col-md-auto col-12" *ngIf="canDownloadXML">
-					<button mat-button class="padded-shadow-btn secondary" (click)="downloadXML()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}</button>
+					<button mat-flat-button color="accent" class="padded-shadow-btn" (click)="downloadXML()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}</button>
 				</div>
 				<div *ngIf="!hideEditActions && canFinalize" class="col-auto">
-					<button mat-button class="padded-shadow-btn secondary" (click)="finalize()" [disabled]="this.isLocked || !this.isFormValid()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
+					<button mat-flat-button color="primary" class="padded-shadow-btn" (click)="finalize()" [disabled]="this.isLocked || !this.isFormValid()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
 				</div>
 			</div>
 			<form *ngIf="formGroup">
@@ -78,7 +78,7 @@
 														</mat-form-field>
 													</div>
 													<div class="col-auto mb-3" *ngIf="!hideEditActions">
-														<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addField(sectionIndex)">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
+														<button mat-flat-button color="accent" class="padded-shadow-btn" type="button" (click)="addField(sectionIndex)">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
 													</div>
 												</div>
 												<div class="row">
@@ -337,7 +337,7 @@
 							<div class="col-12">
 								<div class="row">
 									<div class="col-auto" *ngIf="!hideEditActions">
-										<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addSection()">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-SECTION' | translate}}</button>
+										<button mat-flat-button color="accent" class="padded-shadow-btn" type="button" (click)="addSection()">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-SECTION' | translate}}</button>
 										<mat-error *ngIf="formGroup.get('definition').get('sections').dirty && formGroup.get('definition').get('sections').hasError('required')">{{'PLAN-BLUEPRINT-EDITOR.SECTIONS-REQUIRED' | translate}}</mat-error>
 										<mat-error *ngIf="formGroup.get('definition').get('sections').hasError('backendError')">{{formGroup.get('definition').get('sections').getError('backendError').message}}</mat-error>
 									</div>
@@ -346,11 +346,11 @@
 						</div>
 						<div class="row mt-4">
 							<div class="col-auto">
-								<button mat-button class="padded-shadow-btn secondary" (click)="cancel()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+								<button mat-stroked-button class="padded-shadow-btn" (click)="cancel()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 							</div>
 							<div class="col"></div>
 							<div class="col-auto" *ngIf="!hideEditActions">
-								<button mat-button class="padded-shadow-btn secondary" [disabled]="isLocked" type="submit" (click)="save(); formSubmit()">
+								<button mat-flat-button color="primary" class="padded-shadow-btn" [disabled]="isLocked" type="submit" (click)="save(); formSubmit()">
 									{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.SAVE' | translate}}
 								</button>
 							</div>
diff --git a/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.html b/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.html
index de65b53c0..d8a95dc61 100644
--- a/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.html
@@ -1,4 +1,4 @@
-<div class="d-flex align-items-center gap-1-rem">
+<div class="d-flex align-items-center gap-1-rem listing-filters">
 
 	<button mat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
 		<mat-icon aria-hidden="false" [matBadgeHidden]="!appliedFilterCount" [matBadge]="appliedFilterCount" matBadgeColor="warn" matBadgeSize="small">filter_alt</mat-icon>
@@ -7,7 +7,7 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid pt-2 pb-2" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
+		<div class="filter-container container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'PLAN-BLUEPRINT-LISTING.FILTER.TITLE' | translate}}</h4>
@@ -41,12 +41,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-stroked-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger?.closeMenu()">
 						{{'PLAN-BLUEPRINT-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-flat-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'PLAN-BLUEPRINT-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.scss b/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.scss
index ec3501cdd..92f62796d 100644
--- a/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.scss
+++ b/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.scss
@@ -15,7 +15,6 @@
 .filter-button{
 	padding-top: .6rem;
 	padding-bottom: .6rem;
-    color: #000000;
 }
 
 ::ng-deep .mdc-form-field {
diff --git a/frontend/src/app/ui/admin/plan-blueprint/listing/plan-blueprint-listing.component.html b/frontend/src/app/ui/admin/plan-blueprint/listing/plan-blueprint-listing.component.html
index 576b1f429..b062cc5ec 100644
--- a/frontend/src/app/ui/admin/plan-blueprint/listing/plan-blueprint-listing.component.html
+++ b/frontend/src/app/ui/admin/plan-blueprint/listing/plan-blueprint-listing.component.html
@@ -14,7 +14,7 @@
 				</div>
 
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplateType)" [routerLink]="routerUtils.generateUrl(['/plan-blueprints/new'])">
+					<button mat-flat-button color="accent" class="padded-shadow-btn" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplateType)" [routerLink]="routerUtils.generateUrl(['/plan-blueprints/new'])">
 						<mat-icon>add</mat-icon>
 						{{'PLAN-BLUEPRINT-LISTING.CREATE-PLAN-BLUEPRINT' | translate}}
 					</button>
diff --git a/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.html b/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.html
index 22d21b3a7..527da8168 100644
--- a/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.html
@@ -1,19 +1,19 @@
-<div class="d-flex align-items-center gap-1-rem">
+<div class="d-flex align-items-center gap-1-rem listing-filters">
 
-	<button mat-flat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
+	<button mat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
 		<mat-icon aria-hidden="false" [matBadgeHidden]="!appliedFilterCount" [matBadge]="appliedFilterCount" matBadgeColor="warn" matBadgeSize="small">filter_alt</mat-icon>
 		{{'COMMONS.LISTING-COMPONENT.SEARCH-FILTER-BTN' | translate}}
 	</button>
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid filter-container" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'PLAN-BLUEPRINT-LISTING.FILTER.TITLE' | translate}}</h4>
 				</div>
 				<div class="col-auto">
-					<button color="accent" mat-button (click)="clearFilters()">
+					<button color="primary" mat-button (click)="clearFilters()">
 						{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
 					</button>
 				</div>
@@ -41,12 +41,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-stroked-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger?.closeMenu()">
 						{{'PLAN-BLUEPRINT-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-flat-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'PLAN-BLUEPRINT-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing.component.html b/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing.component.html
index 772c159f4..fa4bd0deb 100644
--- a/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing.component.html
+++ b/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing.component.html
@@ -7,7 +7,7 @@
 				</div>
 
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditPlanStatus)" [routerLink]="routerUtils.generateUrl(['/plan-statuses/new'])">
+					<button mat-flat-button color="accent" class="padded-shadow-btn" *ngIf="authService.hasPermission(authService.permissionEnum.EditPlanStatus)" [routerLink]="routerUtils.generateUrl(['/plan-statuses/new'])">
 						<mat-icon>add</mat-icon>
 						{{'PLAN-STATUS-LISTING.ACTIONS.CREATE-PLAN-STATUS' | translate}}
 					</button>
diff --git a/frontend/src/app/ui/admin/prefilling-source/editor/prefilling-source-editor.component.html b/frontend/src/app/ui/admin/prefilling-source/editor/prefilling-source-editor.component.html
index 4f2a18ce4..7f2d65b62 100644
--- a/frontend/src/app/ui/admin/prefilling-source/editor/prefilling-source-editor.component.html
+++ b/frontend/src/app/ui/admin/prefilling-source/editor/prefilling-source-editor.component.html
@@ -7,23 +7,23 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn neutral" (click)="cancel()" type="button">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-stroked-button class="padded-shadow-btn" (click)="cancel()" type="button">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto" *ngIf="canDelete">
-					<button mat-button class="padded-shadow-btn delete-inverted" type="button" (click)="delete()">
+					<button mat-stroked-button color="warn" class="padded-shadow-btn" type="button" (click)="delete()">
 						<mat-icon>delete</mat-icon>
 						{{'PREFILLING-SOURCE-EDITOR.ACTIONS.DELETE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto" *ngIf="canSave">
-					<button mat-button class="padded-shadow-btn primary" (click)="formSubmit()">
+					<button mat-flat-button color="primary" class="padded-shadow-btn" (click)="formSubmit()">
 						<mat-icon>save</mat-icon>
 						{{'PREFILLING-SOURCE-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
 				</div>
 			</div>
 
-			<form *ngIf="formGroup" (ngSubmit)="formSubmit()">
+			<form *ngIf="formGroup" (ngSubmit)="formSubmit()" class="d-flex flex-column gap-half-rem">
 				<mat-card appearance="outlined" class="pt-3 pb-3">
 					<mat-card-content>
 						<div class="row">
@@ -90,7 +90,7 @@
 													</div>
 												</div>
 											</div>
-											<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addFixedValiueField()" [disabled]="formGroup.disabled">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
+											<button mat-flat-button color="accent" class="padded-shadow-btn" type="button" (click)="addFixedValiueField()" [disabled]="formGroup.disabled">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
 										</div>
 									</div>
 								</div>
@@ -132,9 +132,9 @@
 									</div>
 								</div>
 							</div>
-                            <div class="row d-flex gap-half-rem">
-                                <button mat-button class="padded-shadow-btn secondary" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
-                                <button mat-button class="padded-shadow-btn secondary" *ngIf="formGroup.get('definition').get('fields').value != ''" type="button" (click)="submitFields()" [disabled]="!formGroup.get('definition').get('fields').valid">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.SUBMIT-FIELDS' | translate}}</button>
+                            <div class="d-flex gap-half-rem">
+                                <button mat-flat-button color="accent" class="padded-shadow-btn" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
+                                <button mat-flat-button color="accent" class="padded-shadow-btn" *ngIf="formGroup.get('definition').get('fields').value != ''" type="button" (click)="submitFields()" [disabled]="!formGroup.get('definition').get('fields').valid">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.SUBMIT-FIELDS' | translate}}</button>
                             </div>
 						</div>
 					</mat-card-content>
diff --git a/frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.html b/frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.html
index 867896af0..ef1d97ddd 100644
--- a/frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.html
@@ -1,19 +1,19 @@
-<div class="d-flex align-items-center gap-1-rem">
+<div class="d-flex align-items-center gap-1-rem listing-filters">
 
-	<button mat-flat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
+	<button mat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
 		<mat-icon aria-hidden="false" [matBadgeHidden]="!appliedFilterCount" [matBadge]="appliedFilterCount" matBadgeColor="warn" matBadgeSize="small">filter_alt</mat-icon>
 		{{'COMMONS.LISTING-COMPONENT.SEARCH-FILTER-BTN' | translate}}
 	</button>
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
+		<div class="filter-container container-fluid" [class.accessibility-theme]="accessibilityTheme()" (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()">
+					<button color="primary" mat-button (click)="clearFilters()">
 						{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
 					</button>
 				</div>
@@ -31,12 +31,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-stroked-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger?.closeMenu()">
 						{{'PREFILLING-SOURCE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-flat-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'PREFILLING-SOURCE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/prefilling-source/listing/prefilling-source-listing.component.html b/frontend/src/app/ui/admin/prefilling-source/listing/prefilling-source-listing.component.html
index 592be3af4..12ecd68ef 100644
--- a/frontend/src/app/ui/admin/prefilling-source/listing/prefilling-source-listing.component.html
+++ b/frontend/src/app/ui/admin/prefilling-source/listing/prefilling-source-listing.component.html
@@ -7,7 +7,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn secondary"
+					<button mat-flat-button color="accent" class="padded-shadow-btn"
 						*ngIf="authService.hasPermission(authService.permissionEnum.EditPrefillingSource)"
 						[routerLink]="routerUtils.generateUrl(['/prefilling-sources/new'])">
 						<mat-icon>add</mat-icon>
diff --git a/frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.html b/frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.html
index 8b8de0fe3..34047d8cc 100644
--- a/frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.html
+++ b/frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.html
@@ -7,16 +7,16 @@
 				</div>
 
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn neutral" (click)="cancel()" type="button">{{'REFERENCE-TYPE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-stroked-button class="padded-shadow-btn" (click)="cancel()" type="button">{{'REFERENCE-TYPE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto" *ngIf="canDelete">
-					<button mat-button (click)="delete()" class="padded-shadow-btn delete-inverted" type="button">
+					<button mat-stroked-button color="warn" (click)="delete()" class="padded-shadow-btn" type="button">
 						<mat-icon>delete</mat-icon>
 						{{'REFERENCE-TYPE-EDITOR.ACTIONS.DELETE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto" *ngIf="canSave">
-					<button mat-button class="padded-shadow-btn primary" (click)="formSubmit()">
+					<button mat-flat-button color="primary" class="padded-shadow-btn" (click)="formSubmit()">
 						<mat-icon>save</mat-icon>
 						{{'REFERENCE-TYPE-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
@@ -60,7 +60,7 @@
 													<h3 class="m-0">{{'REFERENCE-TYPE-EDITOR.FIELDS.FIELDS' | translate}}</h3>
 												</div>
 												<div class="col-auto">
-													<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addField()" [disabled]="formGroup.get('definition').get('fields').disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
+													<button mat-flat-button color="accent" class="padded-shadow-btn" type="button" (click)="addField()" [disabled]="formGroup.get('definition').get('fields').disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
 												</div>
 											</div>
 										</div>
@@ -124,7 +124,7 @@
 													</div>
 												</div>
 											</div>
-											<button mat-button class="padded-shadow-btn secondary" *ngIf="formGroup.get('definition').get('fields').value != ''" type="button" (click)="submitFields()" [disabled]="!formGroup.get('definition').get('fields').valid">{{'REFERENCE-TYPE-EDITOR.ACTIONS.SUBMIT-FIELDS' | translate}}</button>
+											<button mat-flat-button color="accent" class="padded-shadow-btn " *ngIf="formGroup.get('definition').get('fields').value != ''" type="button" (click)="submitFields()" [disabled]="!formGroup.get('definition').get('fields').valid">{{'REFERENCE-TYPE-EDITOR.ACTIONS.SUBMIT-FIELDS' | translate}}</button>
 										</div>
 										<div class="col-12 mt-3 mb-3">
 											<div class="row d-flex align-items-center">
@@ -132,7 +132,7 @@
 													<h3 class="m-0">{{'REFERENCE-TYPE-EDITOR.FIELDS.SOURCES' | translate}}</h3>
 												</div>
 												<div class="col-auto">
-													<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addSource()" [disabled]="formGroup.get('definition').get('fields').disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-SOURCE' | translate}}</button>
+													<button mat-flat-button color="accent" class="padded-shadow-btn" type="button" (click)="addSource()" [disabled]="formGroup.get('definition').get('fields').disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-SOURCE' | translate}}</button>
 												</div>
 											</div>
 										</div>
diff --git a/frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.html b/frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.html
index af91fb9b1..7dd6faf17 100644
--- a/frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.html
@@ -1,19 +1,19 @@
-<div class="d-flex align-items-center gap-1-rem">
+<div class="d-flex align-items-center gap-1-rem listing-filters">
 
-	<button mat-flat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
+	<button mat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
 		<mat-icon aria-hidden="false" [matBadgeHidden]="!appliedFilterCount" [matBadge]="appliedFilterCount" matBadgeColor="warn" matBadgeSize="small">filter_alt</mat-icon>
 		{{'COMMONS.LISTING-COMPONENT.SEARCH-FILTER-BTN' | translate}}
 	</button>
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid filter-container" [class.accessibility-theme]="accessibilityTheme()" (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()">
+					<button color="primary" mat-button (click)="clearFilters()">
 						{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
 					</button>
 				</div>
@@ -31,12 +31,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-stroked-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger?.closeMenu()">
 						{{'REFERENCE-TYPE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-flat-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'REFERENCE-TYPE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/reference-type/listing/reference-type-listing.component.html b/frontend/src/app/ui/admin/reference-type/listing/reference-type-listing.component.html
index f58a3283f..6ff5ab441 100644
--- a/frontend/src/app/ui/admin/reference-type/listing/reference-type-listing.component.html
+++ b/frontend/src/app/ui/admin/reference-type/listing/reference-type-listing.component.html
@@ -7,7 +7,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn secondary"
+					<button mat-flat-button color="accent" class="padded-shadow-btn"
 						*ngIf="authService.hasPermission(authService.permissionEnum.EditReferenceType)"
 						[routerLink]="routerUtils.generateUrl(['/reference-type/new'])">
 						<mat-icon>add</mat-icon>
diff --git a/frontend/src/app/ui/admin/reference/editor/reference-editor.component.html b/frontend/src/app/ui/admin/reference/editor/reference-editor.component.html
index 138a9c643..42278d158 100644
--- a/frontend/src/app/ui/admin/reference/editor/reference-editor.component.html
+++ b/frontend/src/app/ui/admin/reference/editor/reference-editor.component.html
@@ -6,16 +6,16 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn neutral" (click)="cancel()" type="button">{{'REFERENCE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-stroked-button class="padded-shadow-btn" (click)="cancel()" type="button">{{'REFERENCE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto" *ngIf="canDelete">
-					<button mat-button class="padded-shadow-btn delete-inverted" type="button" (click)="delete()">
+					<button mat-stroked-button color="warn" class="padded-shadow-btn" type="button" (click)="delete()">
 						<mat-icon>delete</mat-icon>
 						{{'REFERENCE-EDITOR.ACTIONS.DELETE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto" *ngIf="canSave">
-					<button mat-button class="padded-shadow-btn primary" (click)="formSubmit()">
+					<button mat-flat-button color="primary" class="padded-shadow-btn" (click)="formSubmit()">
 						<mat-icon>save</mat-icon>
 						{{'REFERENCE-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
@@ -92,7 +92,7 @@
 							<div class="col-12">
 								<h3 class="mb-4">
 									{{'REFERENCE-EDITOR.FIELDS.FIELDS' | translate}}
-									<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'REFERENCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
+									<button mat-flat-button color="accent" class="padded-shadow-btn" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'REFERENCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
 								</h3>
 								<div *ngFor="let field of formGroup.get('definition').get('fields').controls; let fieldIndex=index;" class="row mb-3">
 									<div class="col-12">
diff --git a/frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.html b/frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.html
index 84397e9a4..a85810970 100644
--- a/frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.html
@@ -1,20 +1,20 @@
-<div class="d-flex align-items-center gap-1-rem">
+<div class="d-flex align-items-center gap-1-rem listing-filters">
 
-	<button mat-flat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
+	<button mat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
 		<mat-icon aria-hidden="false" [matBadgeHidden]="!appliedFilterCount" [matBadge]="appliedFilterCount" matBadgeColor="warn" matBadgeSize="small">filter_alt</mat-icon>
 		{{'COMMONS.LISTING-COMPONENT.SEARCH-FILTER-BTN' | translate}}
 	</button>
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid filter-container" [class.accessibility-theme]="accessibilityTheme()" (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()">
+					<button color="primary" mat-button (click)="clearFilters()">
 						{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
 					</button>
 				</div>
@@ -53,12 +53,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-stroked-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger?.closeMenu()">
 						{{'REFERENCE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-flat-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'REFERENCE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/reference/listing/reference-listing.component.html b/frontend/src/app/ui/admin/reference/listing/reference-listing.component.html
index 6e21405a5..ed1de194d 100644
--- a/frontend/src/app/ui/admin/reference/listing/reference-listing.component.html
+++ b/frontend/src/app/ui/admin/reference/listing/reference-listing.component.html
@@ -7,7 +7,7 @@
 				<app-navigation-breadcrumb />
 			</div>
 			<div class="col-auto">
-				<button mat-button class="padded-shadow-btn secondary"
+				<button mat-flat-button color="accent" class="padded-shadow-btn"
 					*ngIf="authService.hasPermission(authService.permissionEnum.EditReference)"
 					[routerLink]="routerUtils.generateUrl(['/references/new/'])">
 					<mat-icon>add</mat-icon>
diff --git a/frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.html b/frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.html
index 583b101da..aec25bfa1 100644
--- a/frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.html
@@ -1,19 +1,19 @@
-<div class="d-flex align-items-center gap-1-rem">
+<div class="d-flex align-items-center gap-1-rem listing-filters">
 
-	<button mat-flat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
+	<button mat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
 		<mat-icon aria-hidden="false" [matBadgeHidden]="!appliedFilterCount" [matBadge]="appliedFilterCount" matBadgeColor="warn" matBadgeSize="small">filter_alt</mat-icon>
 		{{'COMMONS.LISTING-COMPONENT.SEARCH-FILTER-BTN' | translate}}
 	</button>
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid filter-container" [class.accessibility-theme]="accessibilityTheme()" (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()">
+					<button color="primary" mat-button (click)="clearFilters()">
 						{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
 					</button>
 				</div>
@@ -31,12 +31,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-stroked-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger?.closeMenu()">
 						{{'TENANT-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-flat-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'TENANT-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/tenant/listing/tenant-listing.component.html b/frontend/src/app/ui/admin/tenant/listing/tenant-listing.component.html
index 64f170e88..59d3293f7 100644
--- a/frontend/src/app/ui/admin/tenant/listing/tenant-listing.component.html
+++ b/frontend/src/app/ui/admin/tenant/listing/tenant-listing.component.html
@@ -8,7 +8,7 @@
 
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn secondary"
+					<button mat-flat-button color="accent" class="padded-shadow-btn"
 						*ngIf="authService.hasPermission(authService.permissionEnum.EditTenant)"
 						[routerLink]="routerUtils.generateUrl(['/tenants/new'])">
 						<mat-icon>add</mat-icon>
diff --git a/frontend/src/app/ui/admin/usage-limit/editor/usage-limit-editor.component.html b/frontend/src/app/ui/admin/usage-limit/editor/usage-limit-editor.component.html
index a66145f17..d378e6d8f 100644
--- a/frontend/src/app/ui/admin/usage-limit/editor/usage-limit-editor.component.html
+++ b/frontend/src/app/ui/admin/usage-limit/editor/usage-limit-editor.component.html
@@ -6,16 +6,16 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn neutral" (click)="cancel()" type="button">{{'USAGE-LIMIT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-stroked-button class="padded-shadow-btn" (click)="cancel()" type="button">{{'USAGE-LIMIT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto" *ngIf="canDelete">
-					<button mat-button class="padded-shadow-btn delete-inverted" type="button" (click)="delete()">
+					<button mat-stroked-button color="warn" class="padded-shadow-btn" type="button" (click)="delete()">
 						<mat-icon>delete</mat-icon>
 						{{'USAGE-LIMIT-EDITOR.ACTIONS.DELETE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto" *ngIf="canSave">
-					<button mat-button class="padded-shadow-btn primary" (click)="formSubmit()">
+					<button mat-flat-button color="primary" class="padded-shadow-btn" (click)="formSubmit()">
 						<mat-icon>save</mat-icon>
 						{{'USAGE-LIMIT-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
diff --git a/frontend/src/app/ui/admin/usage-limit/listing/filters/usage-limit-listing-filters.component.html b/frontend/src/app/ui/admin/usage-limit/listing/filters/usage-limit-listing-filters.component.html
index ac80a1629..c17148516 100644
--- a/frontend/src/app/ui/admin/usage-limit/listing/filters/usage-limit-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/usage-limit/listing/filters/usage-limit-listing-filters.component.html
@@ -1,19 +1,19 @@
-<div class="d-flex align-items-center gap-1-rem">
+<div class="d-flex align-items-center gap-1-rem listing-filters">
 
-	<button mat-flat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
+	<button mat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
 		<mat-icon aria-hidden="false" [matBadgeHidden]="!appliedFilterCount" [matBadge]="appliedFilterCount" matBadgeColor="warn" matBadgeSize="small">filter_alt</mat-icon>
 		{{'COMMONS.LISTING-COMPONENT.SEARCH-FILTER-BTN' | translate}}
 	</button>
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()"(click)="$event?.stopPropagation?.()">
+		<div class="filter-container container-fluid" [class.accessibility-theme]="accessibilityTheme()"(click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'USAGE-LIMIT-LISTING.FILTER.TITLE' | translate}}</h4>
 				</div>
 				<div class="col-auto">
-					<button color="accent" mat-button (click)="clearFilters()">
+					<button color="primary" mat-button (click)="clearFilters()">
 						{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
 					</button>
 				</div>
@@ -42,12 +42,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-stroked-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger?.closeMenu()">
 						{{'USAGE-LIMIT-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-flat-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'USAGE-LIMIT-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/usage-limit/listing/usage-limit-listing.component.html b/frontend/src/app/ui/admin/usage-limit/listing/usage-limit-listing.component.html
index ebcc19c21..eeb3f7fdf 100644
--- a/frontend/src/app/ui/admin/usage-limit/listing/usage-limit-listing.component.html
+++ b/frontend/src/app/ui/admin/usage-limit/listing/usage-limit-listing.component.html
@@ -8,7 +8,7 @@
 
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn secondary"
+					<button mat-flat-button color="accent" class="padded-shadow-btn"
 						*ngIf="authService.hasPermission(authService.permissionEnum.EditUsageLimit)"
 						[routerLink]="routerUtils.generateUrl(['/usage-limits/new'])">
 						<mat-icon>add</mat-icon>
diff --git a/frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.html b/frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.html
index a772da1a1..ff9f5e0c2 100644
--- a/frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.html
@@ -1,19 +1,19 @@
-<div class="d-flex align-items-center gap-1-rem">
+<div class="d-flex align-items-center gap-1-rem listing-filters">
 
-	<button mat-flat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
+	<button mat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
 		<mat-icon aria-hidden="false" [matBadgeHidden]="!appliedFilterCount" [matBadge]="appliedFilterCount" matBadgeColor="warn" matBadgeSize="small">filter_alt</mat-icon>
 		{{'COMMONS.LISTING-COMPONENT.SEARCH-FILTER-BTN' | translate}}
 	</button>
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid filter-container" [class.accessibility-theme]="accessibilityTheme()" (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()">
+					<button color="primary" mat-button (click)="clearFilters()">
 						{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
 					</button>
 				</div>
@@ -47,12 +47,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-flat-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger?.closeMenu()">
 						{{'USER-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-stroked-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'USER-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/user/listing/user-listing.component.html b/frontend/src/app/ui/admin/user/listing/user-listing.component.html
index 79d8c0508..0e55db5ab 100644
--- a/frontend/src/app/ui/admin/user/listing/user-listing.component.html
+++ b/frontend/src/app/ui/admin/user/listing/user-listing.component.html
@@ -12,7 +12,7 @@
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn secondary" (click)="export()" *ngIf="authService.hasPermission(authService.permissionEnum.ExportUsers)">
+					<button mat-flat-button color="accent" class="padded-shadow-btn" (click)="export()" *ngIf="authService.hasPermission(authService.permissionEnum.ExportUsers)">
 						<mat-icon>download</mat-icon>
 						{{'USER-LISTING.ACTIONS.EXPORT' | translate}}
 					</button>
diff --git a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.scss b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.scss
index 68f73391f..18a079abe 100644
--- a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.scss
+++ b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.scss
@@ -21,9 +21,9 @@ h6 {
 	font-weight: 400;
 }
 
-.more { //TODO mchouliara link
+.more {
 	text-decoration: underline;
-	color: var(--sys-tertiary);
+	color: var(--link-color);
 	cursor: pointer;
 	font-size: 1rem;
 	font-weight: 400;
diff --git a/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss b/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss
index 418686526..61d14db64 100644
--- a/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss
+++ b/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss
@@ -43,9 +43,9 @@ p {
   color: #0d7489;
 }
 
-.more-horiz { //TODO mchouliara link
+.more-horiz {
   font-size: 28px;
-  color: var(--gray);
+  color: var(--link-color);
 }
 
 .published-icon {
diff --git a/frontend/src/app/ui/plan/listing/plan-listing.component.scss b/frontend/src/app/ui/plan/listing/plan-listing.component.scss
index 9e4bfd3d7..760ffd94b 100644
--- a/frontend/src/app/ui/plan/listing/plan-listing.component.scss
+++ b/frontend/src/app/ui/plan/listing/plan-listing.component.scss
@@ -51,9 +51,9 @@
   padding: 0px;
 }
 
-.more-horiz { //TODO mchouliara link
+.more-horiz {
   font-size: 28px;
-  color: var(--gray);
+  color: var(--link-color);
 }
 
 .more-icon :hover {
diff --git a/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.html b/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.html
index 338eee967..e07444dc8 100644
--- a/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.html
+++ b/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.html
@@ -15,21 +15,17 @@
 		</div>
 		<div class="col-12">
 			<div class="d-flex flex-wrap gap-half-rem justify-content-between align-items-center">
-				<div class="import-file">
-                    <button mat-button type="button" class="padded-shadow-btn upload-btn d-flex flex-row align-items-center" (click)="uploadFile($event)">
-                        <mat-icon class="pr-2">file_upload</mat-icon>
-                        {{ 'START-NEW-PLAN-DIALOG.IMPORT-FROM-FILE' | translate }}
-                    </button>
-				</div>
+                <button mat-button type="button" class="import-file padded-shadow-btn upload-btn d-flex flex-row align-items-center" (click)="uploadFile($event)">
+                    <mat-icon class="pr-2">file_upload</mat-icon>
+                    {{ 'START-NEW-PLAN-DIALOG.IMPORT-FROM-FILE' | translate }}
+                </button>
 				<div class="pt-1 pb-1">
 					{{ 'START-NEW-PLAN-DIALOG.OR' | translate }}
 				</div>
-				<div class="start-wizard">
-                    <button mat-flat-button color="primary" class="padded-shadow-btn font-weight-bold d-flex flex-row align-items-center" (click)="startWizard()">
-                        <mat-icon>chevron_right</mat-icon>
-                        {{ 'START-NEW-PLAN-DIALOG.START-NEW-PLAN' | translate }}
-                    </button>
-				</div>
+                <button mat-flat-button color="primary" class="start-wizard padded-shadow-btn font-weight-bold d-flex flex-row align-items-center" (click)="startWizard()">
+                    <mat-icon>chevron_right</mat-icon>
+                    {{ 'START-NEW-PLAN-DIALOG.START-NEW-PLAN' | translate }}
+                </button>
 			</div>
 		</div>
 	</div>
diff --git a/frontend/src/notification-service/ui/admin/notification-template/listing/filters/notification-template-listing-filters.component.html b/frontend/src/notification-service/ui/admin/notification-template/listing/filters/notification-template-listing-filters.component.html
index a89839a74..d9ce02d73 100644
--- a/frontend/src/notification-service/ui/admin/notification-template/listing/filters/notification-template-listing-filters.component.html
+++ b/frontend/src/notification-service/ui/admin/notification-template/listing/filters/notification-template-listing-filters.component.html
@@ -1,19 +1,19 @@
-<div class="d-flex align-items-center gap-1-rem">
+<div class="d-flex align-items-center gap-1-rem listing-filters">
 
-	<button mat-flat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
+	<button mat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
 		<mat-icon aria-hidden="false" [matBadgeHidden]="!appliedFilterCount" [matBadge]="appliedFilterCount" matBadgeColor="warn" matBadgeSize="small">filter_alt</mat-icon>
 		{{'COMMONS.LISTING-COMPONENT.SEARCH-FILTER-BTN' | translate}}
 	</button>
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid filter-container" [class.accessibility-theme]="accessibilityTheme()" (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()">
+					<button color="primary" mat-button (click)="clearFilters()">
 						{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
 					</button>
 				</div>
@@ -64,12 +64,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-stroked-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger?.closeMenu()">
 						{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-flat-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/notification-service/ui/admin/notification-template/listing/notification-template-listing.component.html b/frontend/src/notification-service/ui/admin/notification-template/listing/notification-template-listing.component.html
index 1495e11c7..3702bc4d9 100644
--- a/frontend/src/notification-service/ui/admin/notification-template/listing/notification-template-listing.component.html
+++ b/frontend/src/notification-service/ui/admin/notification-template/listing/notification-template-listing.component.html
@@ -7,7 +7,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn secondary"
+					<button mat-flat-button color="accent" class="padded-shadow-btn"
 						*ngIf="authService.hasPermission(authService.permissionEnum.EditNotificationTemplate)"
 						[routerLink]="routerUtils.generateUrl(['/notification-templates/new'])">
 						<mat-icon>add</mat-icon>
diff --git a/frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.html b/frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.html
index a0c14862c..07a58f7f6 100644
--- a/frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.html
+++ b/frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.html
@@ -1,19 +1,19 @@
-<div class="d-flex align-items-center gap-1-rem">
+<div class="d-flex align-items-center gap-1-rem listing-filters">
 
-	<button mat-flat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
+	<button mat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
 		<mat-icon aria-hidden="false" [matBadgeHidden]="!appliedFilterCount" [matBadge]="appliedFilterCount" matBadgeColor="warn" matBadgeSize="small">filter_alt</mat-icon>
 		{{'COMMONS.LISTING-COMPONENT.SEARCH-FILTER-BTN' | translate}}
 	</button>
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid filter-container" [class.accessibility-theme]="accessibilityTheme()" (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()">
+					<button color="primary" mat-button (click)="clearFilters()">
 						{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
 					</button>
 				</div>
@@ -96,12 +96,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-stroked-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger?.closeMenu()">
 						{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-flat-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/notification-service/ui/inapp-notification/listing/filters/mine-inapp-notification-listing-filters.component.html b/frontend/src/notification-service/ui/inapp-notification/listing/filters/mine-inapp-notification-listing-filters.component.html
index 80afc04f6..5baee5f82 100644
--- a/frontend/src/notification-service/ui/inapp-notification/listing/filters/mine-inapp-notification-listing-filters.component.html
+++ b/frontend/src/notification-service/ui/inapp-notification/listing/filters/mine-inapp-notification-listing-filters.component.html
@@ -1,19 +1,19 @@
-<div class="d-flex align-items-center gap-1-rem">
+<div class="d-flex align-items-center gap-1-rem listing-filters">
 
-	<button mat-flat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
+	<button mat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
 		<mat-icon aria-hidden="false" [matBadgeHidden]="!appliedFilterCount" [matBadge]="appliedFilterCount" matBadgeColor="warn" matBadgeSize="small">filter_alt</mat-icon>
 		{{'COMMONS.LISTING-COMPONENT.SEARCH-FILTER-BTN' | translate}}
 	</button>
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid filter-container" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.FILTER.TITLE' | translate}}</h4>
 				</div>
 				<div class="col-auto">
-					<button color="accent" mat-button (click)="clearFilters()">
+					<button color="primary" mat-button (click)="clearFilters()">
 						{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
 					</button>
 				</div>
@@ -42,12 +42,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-stroked-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger?.closeMenu()">
 						{{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-flat-button color="primary" class="padded-shadow-btn" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 313f5c86a..7d26a7c13 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -110,10 +110,10 @@
 
 @import './material-theme.scss';
 
+//<!--------   m3 styles overwrites  ------------>
 .mat-mdc-menu-panel{
     background-color: #ffffff !important;
 }
-//m3 styles overwrites
 .mat-mdc-mini-fab {
     border-radius: 50% !important;
 }
@@ -127,9 +127,19 @@
         border-left-color: var(--mat-standard-button-toggle-selected-state-background-color);
     }
 }
+.mdc-icon-button {
+    line-height: 1 !important;
+}
 .mat-primary.mat-mdc-outlined-button:not(:disabled){
     border-color: var(--sys-primary);
 }
+.mat-warn.mat-mdc-outlined-button:not(:disabled){
+    border-color: var(--sys-error);
+}
+.mat-unthemed.mat-mdc-outlined-button:not(:disabled) {
+    color: var(--sys-on-surface);
+    border-color: var(--sys-outline);
+}
 .mat-divider.mat-divider-vertical{
     border-right-color: rgba(0, 0, 0, .12) !important;
 }
@@ -146,14 +156,31 @@
         }
     }
 }
-// $mat-accessibility-theme: mat.m2-define-light-theme((color: (primary: $mat-theme-primary,
-//         accent: $mat-theme-accent,
-//         warn: $mat-theme-warn),
-//         typography: $mat-accessibility-typography,
-//         density: $mat-density));
+.mat-mdc-slide-toggle .mdc-switch {
+    transform: scale(0.75);
+}
 
-// @include mat.all-component-themes($mat-core-theme);
+a {
+    color: var(--link-color);
+    &:hover {
+        color: var(--sys-primary);
+        text-decoration: none;
+    }
+    &.color-unset {
+        color: #000000;
+    }
+    & .material-icons { //_misc.scss
+        vertical-align: middle;
+    }
+}
 
+.card {
+    border: 0;
+}
+
+//<!--------     ------------>
+
+//<!------- TEXT SIZE TOGGLE STYLES ------>
 .accessibility-theme {
 
     // change individual classes set in components' scss
@@ -177,25 +204,9 @@
         font-size: 1.255rem !important;
     }
 }
+//<!--------     ------------>
 
 
-a {
-    color: var(--link-color);
-    &:hover {
-        color: var(--sys-primary);
-        text-decoration: none;
-    }
-    &.color-unset {
-        color: #000000;
-    }
-    & .material-icons { //_misc.scss
-        vertical-align: middle;
-    }
-}
-
-.card {
-    border: 0;
-}
 
 //TODO: angular update @import '../node_modules/dragula/dist/dragula.css';
 /* in-flight clone */
@@ -256,93 +267,6 @@ a {
 .text-danger{
     color: var(--sys-error)
 }
-// .listing-item {
-// 	margin-top: 0.5em;
-// 	padding: 0.5em;
-// 	cursor: pointer;
-// 	border: 3px solid #f2f2f2;
-
-// 	.title {
-// 		color: black;
-// 	}
-
-// 	.grant-title {
-// 		color: rgb(93, 125, 173);
-// 	}
-
-// 	.gray-icon {
-// 		color: rgb(191, 191, 191);
-// 	}
-
-// 	.chip {
-// 		padding: 0.1em 1em;
-// 		border-radius: 10em;
-// 		background-color: #0d7489;
-// 		color: #fff;
-// 		text-transform: uppercase;
-// 		font-weight: 500;
-// 		max-width: 160px;
-// 		white-space: nowrap;
-// 		overflow: hidden;
-// 		text-overflow: ellipsis;
-// 	}
-
-// 	.bordered-chip {
-// 		padding: 0.1em 1em;
-// 		border: 0.1em solid rgb(218, 227, 243);
-// 		border-radius: 10em;
-// 		background-color: rgb(236, 241, 249);
-// 		color: var(--sys-primary);
-// 		text-transform: uppercase;
-// 		font-weight: 500;
-// 		max-width: 160px;
-// 		white-space: nowrap;
-// 		overflow: hidden;
-// 		text-overflow: ellipsis;
-// 	}
-
-// 	.squared-chip {
-// 		padding: 0.1em 1em;
-// 		border: 0.1em solid rgb(236, 241, 249);
-// 		border-radius: 0.5em;
-// 		background-color: rgb(246, 246, 246);
-// 		color: rgb(127, 127, 127);
-// 		max-width: 160px;
-// 		white-space: nowrap;
-// 		overflow: hidden;
-// 		text-overflow: ellipsis;
-// 	}
-
-// 	mat-icon {
-// 		width: auto;
-// 		height: auto;
-// 	}
-
-// 	.mr-5 {
-// 		margin-right: 2rem !important;
-// 	}
-
-// 	.info {
-// 		background-color: #f6f6f6;
-// 		padding: 8px 15px;
-// 		margin-bottom: 15px;
-// 	}
-
-// 	.info p {
-// 		margin-bottom: 0px;
-// 		color: rgb(37, 35, 140);
-// 		font-weight: 600;
-// 	}
-
-// 	.chip p {
-// 		margin-bottom: 0px;
-// 	}
-
-// 	h4 span {
-// 		color: #089dbb;
-// 		font-weight: 600;
-// 	}
-// }
 
 .listing {
 	.mat-card {
@@ -412,11 +336,6 @@ a {
 }
 
 
-.text-primary-blue {
-	color: var(--sys-primary);
-}
-
-
 .translateY-3 {
 	transform: translateY(3px);
 }
@@ -501,6 +420,15 @@ a {
 	@include mat.all-component-densities(-10); 
 }
 
+.listing-filters {
+    .mat-mdc-button.filter-button {
+        color: var(--sys-color-on-surface);
+    }
+}
+.filter-container {
+    padding: 0.5rem 1rem;
+}
+
 button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[matButtonIcon]), .md-button, .mat-mdc-button:not(:disabled) {
     &.inverted-stroked-btn{
         border: 1px solid var(--sys-on-primary);
@@ -742,12 +670,4 @@ ul.unstyled-list {
     .container-fluid:first-child {
         padding: 0 !important;
     }
-}
-
-
-// .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
-// 	background-color: var(--sys-primary-3);
-// }
-// .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
-//     background-color: #b0b0b0;
-// } //make them work
\ No newline at end of file
+}
\ No newline at end of file