diff --git a/frontend/src/annotation-service/ui/admin/status/editor/status-editor.component.html b/frontend/src/annotation-service/ui/admin/status/editor/status-editor.component.html
index 7997d100c..ccf2a027d 100644
--- a/frontend/src/annotation-service/ui/admin/status/editor/status-editor.component.html
+++ b/frontend/src/annotation-service/ui/admin/status/editor/status-editor.component.html
@@ -8,16 +8,16 @@
 				</div>
 
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn neutral" (click)="cancel()" type="button">{{'ANNOTATION-SERVICE.STATUS-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-stroked-button class="padded-shadow-btn" (click)="cancel()" type="button">{{'ANNOTATION-SERVICE.STATUS-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>
 						{{'ANNOTATION-SERVICE.STATUS-EDITOR.ACTIONS.DELETE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto" *ngIf="canSave">
-					<button mat-button class="padded-shadow-btn primary" [disabled]="!formGroup?.touched" (click)="save(); formSubmit()">
+					<button mat-flat-button color="primary" class="padded-shadow-btn" [disabled]="!formGroup?.touched" (click)="save(); formSubmit()">
 						<mat-icon>save</mat-icon>
 						{{'ANNOTATION-SERVICE.STATUS-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
diff --git a/frontend/src/app/library/notification/popup/popup-notification.component.html b/frontend/src/app/library/notification/popup/popup-notification.component.html
index 0ff3c9b14..9f69324dc 100644
--- a/frontend/src/app/library/notification/popup/popup-notification.component.html
+++ b/frontend/src/app/library/notification/popup/popup-notification.component.html
@@ -14,6 +14,6 @@
 </div>
 <div mat-dialog-actions class="row d-flex">
 	<div class="ml-auto col-auto">
-		<button mat-button class="padded-shadow-btn primary-inverted" (click)="close()">{{'GENERAL.NOTIFICATION-DIALOG.POPUP.CLOSE' | translate}}</button>
+		<button mat-stroked-button color="primary" class="padded-shadow-btn" (click)="close()">{{'GENERAL.NOTIFICATION-DIALOG.POPUP.CLOSE' | translate}}</button>
 	</div>
 </div>
diff --git a/frontend/src/app/ui/admin/description-status/editor/description-status-editor/description-status-editor.component.html b/frontend/src/app/ui/admin/description-status/editor/description-status-editor/description-status-editor.component.html
index fefcfc24c..907a1a011 100644
--- a/frontend/src/app/ui/admin/description-status/editor/description-status-editor/description-status-editor.component.html
+++ b/frontend/src/app/ui/admin/description-status/editor/description-status-editor/description-status-editor.component.html
@@ -6,16 +6,16 @@
                     <app-navigation-breadcrumb />
                 </div>
                 <div class="col-auto">
-                    <button mat-button class="padded-shadow-btn primary-inverted" (click)="cancel()" type="button">{{'COMMONS.ACTIONS.CANCEL' | translate}}</button>
+                    <button mat-stroked-button class="padded-shadow-btn" (click)="cancel()" type="button">{{'COMMONS.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>
                         {{'COMMONS.ACTIONS.DELETE' | translate}}
                     </button>
                 </div>
                 <div class="col-auto" *ngIf="canSave">
-                    <button mat-button class="padded-shadow-btn primary" (click)="formSubmit()" [disabled]="!formGroup.touched">
+                    <button mat-flat-button color="primary" class="padded-shadow-btn" (click)="formSubmit()" [disabled]="!formGroup.touched">
                         <mat-icon>save</mat-icon>
                         {{'COMMONS.ACTIONS.SAVE' | translate}}
                     </button>
diff --git a/frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.html b/frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.html
index 7e38f08ff..6ef680b55 100644
--- a/frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.html
+++ b/frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.html
@@ -13,7 +13,7 @@
 	</div>
 	<div mat-dialog-actions *ngIf="formGroup" class="row d-flex pb-2 pt-3">
 		<div class="col-auto ml-auto">
-			<button mat-button type="button" class="padded-shadow-btn primary" (click)="select()">{{'TYPES.EXTERNAL-DATASET-TYPE.SELECT' | translate}}</button>
+			<button mat-flat-button color="primary"  type="button" class="padded-shadow-btn" (click)="select()">{{'TYPES.EXTERNAL-DATASET-TYPE.SELECT' | translate}}</button>
 		</div>
 	</div>
 </div>
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 36e8f9d60..97a8fae0b 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
@@ -42,7 +42,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()">
 						{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.html b/frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.html
index fa8d9e373..9aade0bec 100644
--- a/frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.html
+++ b/frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.html
@@ -34,11 +34,11 @@
 				<input matInput placeholder="{{'DESCRIPTION-TEMPLATE-LISTING.IMPORT.UPLOAD-XML-NAME'| translate}}" name="descriptionBlueprintName" [(ngModel)]="data.name">
 			</mat-form-field>
 			<div class="col-auto">
-				<button mat-button type="button" class="padded-shadow-btn neutral" (click)="cancel()">{{ data.cancelButton }}</button>
+				<button mat-stroked-button type="button" class="padded-shadow-btn" (click)="cancel()">{{ data.cancelButton }}</button>
 			</div>
 			<div class="col"></div>
 			<div class="col-auto">
-				<button mat-button color="primary" class="padded-shadow-btn primary-inverted" type="button" (click)="confirm()" [disabled]="!hasBlueprint()">{{ data.confirmButton }}</button>
+				<button mat-stroked-button color="primary" class="padded-shadow-btn" type="button" (click)="confirm()" [disabled]="!hasBlueprint()">{{ data.confirmButton }}</button>
 			</div>
 		</div>
 	</mat-dialog-content>
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 80b6786ac..f9f89be8b 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,7 +8,7 @@
 				</div>
 
 				<div class="col-auto">
-					<button mat-stroked-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" (click)="cancel()" type="button">{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto" *ngIf="canDelete">
 					<button mat-stroked-button color="warn" (click)="delete()" class="padded-shadow-btn" type="button">
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 e1fbaabb4..1f590c0ba 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
@@ -47,7 +47,7 @@
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-flat-button color="primary" 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-TYPE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/language/editor/language-editor.component.html b/frontend/src/app/ui/admin/language/editor/language-editor.component.html
index 920c5d76e..11aa8c298 100644
--- a/frontend/src/app/ui/admin/language/editor/language-editor.component.html
+++ b/frontend/src/app/ui/admin/language/editor/language-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">{{'LANGUAGE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-stroked-button class="padded-shadow-btn" (click)="cancel()" type="button">{{'LANGUAGE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto" *ngIf="!isNew && this.editorModel.belongsToCurrentTenant != false && 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>
 						{{'LANGUAGE-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>
 						{{'LANGUAGE-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
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 c9e2da094..33540602e 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
@@ -36,7 +36,7 @@
 					</button>
 				</div>
 				<div class="col-auto">
-					<button cmat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-flat-button class="padded-shadow-btn" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'LANGUAGE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/maintenance-tasks/maintenance-tasks.component.html b/frontend/src/app/ui/admin/maintenance-tasks/maintenance-tasks.component.html
index e67d0c345..8badb6614 100644
--- a/frontend/src/app/ui/admin/maintenance-tasks/maintenance-tasks.component.html
+++ b/frontend/src/app/ui/admin/maintenance-tasks/maintenance-tasks.component.html
@@ -17,8 +17,8 @@
 						</mat-panel-description>
 					</mat-expansion-panel-header>
 					<div class="mt-2">
-						<button mat-button color="primary" (click)="generateIndex($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.INDEXES.ACTIONS.GENERATE-INDEX')}}</button>
-						<button mat-button color="primary" (click)="clearIndex($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.INDEXES.ACTIONS.CLEAR-INDEX')}}</button>
+						<button mat-flat-button color="primary" (click)="generateIndex($event)" class="mb-1 mr-1 padded-shadow-btn">{{language.instant('MAINTENANCE-TASKS.SECTIONS.INDEXES.ACTIONS.GENERATE-INDEX')}}</button>
+						<button mat-flat-button color="primary" (click)="clearIndex($event)" class="mb-1 mr-1 padded-shadow-btn">{{language.instant('MAINTENANCE-TASKS.SECTIONS.INDEXES.ACTIONS.CLEAR-INDEX')}}</button>
 					</div>
 				</mat-expansion-panel>
 				<mat-expansion-panel>
@@ -32,28 +32,28 @@
 					</mat-expansion-panel-header>
 					<div class="mt-2">
 						<h3>{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.MAIN-TITLE')}}</h3>
-						<button mat-button (click)="sendTenantTouchEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-TENANT-TOUCH')}}</button>
-						<button mat-button (click)="sendUserTouchEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-USER-TOUCH')}}</button>
-						<button mat-button (click)="sendDescriptionTouchEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-DESCRIPTION-TOUCH')}}</button>
-						<button mat-button (click)="sendPlanTouchEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-PLAN-TOUCH')}}</button>
+						<button mat-flat-button color="primary" (click)="sendTenantTouchEvents($event)" class="mb-1 mr-1 padded-shadow-btn">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-TENANT-TOUCH')}}</button>
+						<button mat-flat-button color="primary" (click)="sendUserTouchEvents($event)" class="mb-1 mr-1 padded-shadow-btn">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-USER-TOUCH')}}</button>
+						<button mat-flat-button color="primary" (click)="sendDescriptionTouchEvents($event)" class="mb-1 mr-1 padded-shadow-btn">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-DESCRIPTION-TOUCH')}}</button>
+						<button mat-flat-button color="primary" (click)="sendPlanTouchEvents($event)" class="mb-1 mr-1 padded-shadow-btn">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-PLAN-TOUCH')}}</button>
 					</div>
 					<div class="mt-2">
 						<h3>{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACCOUNTING-TITLE')}}</h3>
-						<button mat-button (click)="sendPlanAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-PLAN-ACCOUNTING-ENTRIES')}}</button>
-						<button mat-button (click)="sendDescriptionAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-DESCRIPTION-ACCOUNTING-ENTRIES')}}</button>
-						<button mat-button (click)="sendBlueprintAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-PLAN-BLUEPRINT-ACCOUNTING-ENTRIES')}}</button>
-						<button mat-button (click)="sendDescriptionTemplateAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-DESCRIPTION-TEMPLATE-ACCOUNTING-ENTRIES')}}</button>
-						<button mat-button (click)="sendDescriptionTemplateTypeAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-DESCRIPTION-TEMPLATE-TYPE-ACCOUNTING-ENTRIES')}}</button>
-						<button mat-button (click)="sendPrefillingSourceAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-PREFILLING-SOURCE-ACCOUNTING-ENTRIES')}}</button>
-						<button mat-button (click)="sendReferenceTypeAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-REFERENCE-TYPE-ACCOUNTING-ENTRIES')}}</button>
-						<button mat-button (click)="sendUserAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-USER-ACCOUNTING-ENTRIES')}}</button>
+						<button mat-flat-button color="primary" (click)="sendPlanAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-PLAN-ACCOUNTING-ENTRIES')}}</button>
+						<button mat-flat-button color="primary" (click)="sendDescriptionAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-DESCRIPTION-ACCOUNTING-ENTRIES')}}</button>
+						<button mat-flat-button color="primary" (click)="sendBlueprintAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-PLAN-BLUEPRINT-ACCOUNTING-ENTRIES')}}</button>
+						<button mat-flat-button color="primary" (click)="sendDescriptionTemplateAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-DESCRIPTION-TEMPLATE-ACCOUNTING-ENTRIES')}}</button>
+						<button mat-flat-button color="primary" (click)="sendDescriptionTemplateTypeAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-DESCRIPTION-TEMPLATE-TYPE-ACCOUNTING-ENTRIES')}}</button>
+						<button mat-flat-button color="primary" (click)="sendPrefillingSourceAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-PREFILLING-SOURCE-ACCOUNTING-ENTRIES')}}</button>
+						<button mat-flat-button color="primary" (click)="sendReferenceTypeAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-REFERENCE-TYPE-ACCOUNTING-ENTRIES')}}</button>
+						<button mat-flat-button color="primary" (click)="sendUserAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-USER-ACCOUNTING-ENTRIES')}}</button>
 					</div>
 					<div class="mt-2">
 						<h3>{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.INDICATOR-TITLE')}}</h3>
-						<button mat-button (click)="sendIndicatorCreateEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-INDICATOR-CREATE-ENTRY')}}</button>					
-						<button mat-button (click)="sendIndicatorResetEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-INDICATOR-RESET-ENTRY')}}</button>					
-						<button mat-button (click)="sendIndicatorAccessEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-INDICATOR-ACCESS-ENTRY')}}</button>					
-						<button mat-button (click)="sendIndicatorPointEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-INDICATOR-POINT-ENTRY')}}</button>					
+						<button mat-flat-button color="primary" (click)="sendIndicatorCreateEvents($event)" class="mb-1 mr-1 padded-shadow-btn">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-INDICATOR-CREATE-ENTRY')}}</button>					
+						<button mat-flat-button color="primary" (click)="sendIndicatorResetEvents($event)" class="mb-1 mr-1 padded-shadow-btn">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-INDICATOR-RESET-ENTRY')}}</button>					
+						<button mat-flat-button color="primary" (click)="sendIndicatorAccessEvents($event)" class="mb-1 mr-1 padded-shadow-btn">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-INDICATOR-ACCESS-ENTRY')}}</button>					
+						<button mat-flat-button color="primary" (click)="sendIndicatorPointEvents($event)" class="mb-1 mr-1 padded-shadow-btn">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-INDICATOR-POINT-ENTRY')}}</button>					
 					</div>
 				</mat-expansion-panel>
 			</mat-accordion>
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 8523e841b..0073df5a9 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
@@ -235,7 +235,7 @@
 																<mat-error *ngIf="section.get('hasTemplates').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 															</div>
 															<div class="col-auto" *ngIf="!hideEditActions && section.get('hasTemplates').value">
-																<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addDescriptionTemplate(sectionIndex)">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-DESCRIPTION-TEMPLATE' | translate}}</button>
+																<button mat-flat-button color="accent" class="padded-shadow-btn" type="button" (click)="addDescriptionTemplate(sectionIndex)">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-DESCRIPTION-TEMPLATE' | translate}}</button>
 															</div>
 														</div>
 													</div>
diff --git a/frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.html b/frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.html
index fb08c4aea..24a04e14a 100644
--- a/frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.html
+++ b/frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.html
@@ -34,11 +34,11 @@
 				<input matInput placeholder="{{'PLAN-BLUEPRINT-LISTING.IMPORT.UPLOAD-XML-NAME'| translate}}" name="descriptionBlueprintName" [(ngModel)]="data.name">
 			</mat-form-field>
 			<div class="col-auto">
-				<button mat-button type="button" class="padded-shadow-btn neutral" (click)="cancel()">{{ data.cancelButton }}</button>
+				<button mat-stroked-button type="button" class="padded-shadow-btn" (click)="cancel()">{{ data.cancelButton }}</button>
 			</div>
 			<div class="col"></div>
 			<div class="col-auto">
-				<button mat-button color="primary" class="padded-shadow-btn primary" type="button" (click)="confirm()" [disabled]="!hasBlueprint()">{{ data.confirmButton }}</button>
+				<button mat-flat-button color="primary" class="padded-shadow-btn" type="button" (click)="confirm()" [disabled]="!hasBlueprint()">{{ data.confirmButton }}</button>
 			</div>
 		</div>
 	</mat-dialog-content>
diff --git a/frontend/src/app/ui/admin/plan-status/editor/plan-status-editor/plan-status-editor.component.html b/frontend/src/app/ui/admin/plan-status/editor/plan-status-editor/plan-status-editor.component.html
index b9bce3ebc..623d63a18 100644
--- a/frontend/src/app/ui/admin/plan-status/editor/plan-status-editor/plan-status-editor.component.html
+++ b/frontend/src/app/ui/admin/plan-status/editor/plan-status-editor/plan-status-editor.component.html
@@ -6,16 +6,16 @@
                     <app-navigation-breadcrumb />
                 </div>
                 <div class="col-auto">
-                    <button mat-button class="padded-shadow-btn primary-inverted" (click)="cancel()" type="button">{{'PLAN-STATUS-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+                    <button mat-stroked-button class="padded-shadow-btn" (click)="cancel()" type="button">{{'PLAN-STATUS-EDITOR.ACTIONS.CANCEL' | translate}}</button>
                 </div>
                 <div class="col-auto" *ngIf="canDelete">
-                    <button mat-raised-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>
                         {{'PLAN-STATUS-EDITOR.ACTIONS.DELETE' | translate}}
                     </button>
                 </div>
                 <div class="col-auto" *ngIf="canSave">
-                    <button mat-button class="padded-shadow-btn primary" (click)="formSubmit()" [disabled]="!formGroup.touched">
+                    <button mat-flat-button color="primary" class="padded-shadow-btn" (click)="formSubmit()" [disabled]="!formGroup.touched">
                         <mat-icon>save</mat-icon>
                         {{'PLAN-STATUS-EDITOR.ACTIONS.SAVE' | translate}}
                     </button>
diff --git a/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.html b/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.html
index 17461ada0..9a73fca07 100644
--- a/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.html
+++ b/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.html
@@ -34,7 +34,7 @@
 		</div>
 		<div class="col-12">
 			<div class="row actions-row">
-				<div class="ml-auto col-auto" *ngIf="editorModel.id"><button mat-stroked-button color="primary" class="padded-shadow-btn" (click)="delete()">
+				<div class="ml-auto col-auto" *ngIf="editorModel.id"><button mat-stroked-button color="warn" class="padded-shadow-btn" (click)="delete()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.RESET-TO-DEFAULT' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/tenant-configuration/editor/default-user-locale/default-user-locale-editor.component.html b/frontend/src/app/ui/admin/tenant-configuration/editor/default-user-locale/default-user-locale-editor.component.html
index fe94a6ce5..7386689ee 100644
--- a/frontend/src/app/ui/admin/tenant-configuration/editor/default-user-locale/default-user-locale-editor.component.html
+++ b/frontend/src/app/ui/admin/tenant-configuration/editor/default-user-locale/default-user-locale-editor.component.html
@@ -36,11 +36,11 @@
 		</div>
 		<div class="col-12">
 			<div class="row actions-row">
-				<div class="ml-auto col-auto" *ngIf="editorModel.id"><button mat-button class="padded-shadow-btn primary-inverted" (click)="delete()">
+				<div class="ml-auto col-auto" *ngIf="editorModel.id"><button mat-stroked-button color="warn" class="padded-shadow-btn" (click)="delete()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.RESET-TO-DEFAULT' | translate}}
 					</button>
 				</div>
-				<div class="ml-auto col-auto"><button mat-button class="padded-shadow-btn primary" (click)="formSubmit()">
+				<div class="ml-auto col-auto"><button mat-flat-button color="primary" class="padded-shadow-btn" (click)="formSubmit()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/tenant-configuration/editor/deposit/deposit-editor.component.html b/frontend/src/app/ui/admin/tenant-configuration/editor/deposit/deposit-editor.component.html
index a7e21d910..ceded3bab 100644
--- a/frontend/src/app/ui/admin/tenant-configuration/editor/deposit/deposit-editor.component.html
+++ b/frontend/src/app/ui/admin/tenant-configuration/editor/deposit/deposit-editor.component.html
@@ -9,7 +9,7 @@
 					<mat-error *ngIf=" formGroup.get('depositPlugins')?.get('disableSystemSources')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 				</mat-checkbox>
 			</div>
-			<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addSource()" [disabled]="formGroup.disabled">{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.ADD-SOURCE' | translate}}</button>
+			<button mat-flat-button color="accent" class="padded-shadow-btn" type="button" (click)="addSource()" [disabled]="formGroup.disabled">{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.ADD-SOURCE' | translate}}</button>
 
 			<div *ngFor="let source of formGroup.get('depositPlugins').get('sources').controls; let sourceIndex=index;" class="row mb-3">
 				<div class="col-12">
@@ -94,11 +94,11 @@
 		</div>
 		<div class="col-12">
 			<div class="row actions-row">
-				<div class="ml-auto col-auto" *ngIf="editorModel.id"><button mat-button class="padded-shadow-btn primary-inverted" (click)="delete()">
+				<div class="ml-auto col-auto" *ngIf="editorModel.id"><button mat-stroked-button color="warn" class="padded-shadow-btn" (click)="delete()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.RESET-TO-DEFAULT' | translate}}
 					</button>
 				</div>
-				<div class="ml-auto col-auto"><button mat-button class="padded-shadow-btn primary" (click)="formSubmit()">
+				<div class="ml-auto col-auto"><button mat-flat-button color="primary" class="padded-shadow-btn" (click)="formSubmit()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/tenant-configuration/editor/description-workflow/description-workflow-editor/description-workflow-editor.component.html b/frontend/src/app/ui/admin/tenant-configuration/editor/description-workflow/description-workflow-editor/description-workflow-editor.component.html
index f7a42bdc1..f144112a3 100644
--- a/frontend/src/app/ui/admin/tenant-configuration/editor/description-workflow/description-workflow-editor/description-workflow-editor.component.html
+++ b/frontend/src/app/ui/admin/tenant-configuration/editor/description-workflow/description-workflow-editor/description-workflow-editor.component.html
@@ -16,7 +16,7 @@
             </mat-form-field>
 		</div>
         <div class="col-12">
-            <button mat-button class="padded-shadow-btn secondary" type="button" (click)="addStatusTransition()" [disabled]="formGroup.disabled">{{'WORKFLOW-EDITOR.ACTIONS.ADD-STATUS-TRANSITION' | translate}}</button>
+            <button mat-flat-button color="accent" class="padded-shadow-btn" type="button" (click)="addStatusTransition()" [disabled]="formGroup.disabled">{{'WORKFLOW-EDITOR.ACTIONS.ADD-STATUS-TRANSITION' | translate}}</button>
         </div>
         <div class="row mb-3">
             <mat-error class="pl-3 pt-2" *ngIf="definitionForm?.touched && definitionForm?.controls?.statusTransitions?.hasError('required')">
@@ -71,14 +71,14 @@
 				<div class="col"></div>
                 @if(canDelete){
                     <div class="col-auto">
-                        <button mat-button class="padded-shadow-btn primary-inverted" (click)="delete()">
+                        <button mat-stroked-button color="warn" class="padded-shadow-btn" (click)="delete()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.RESET-TO-DEFAULT' | translate}}
 					    </button>
 				    </div>
                 }
                 @if(canSave){
                     <div class="col-auto">
-                        <button mat-button class="padded-shadow-btn primary" (click)="formSubmit()">
+                        <button mat-flat-button color="primary" class="padded-shadow-btn" (click)="formSubmit()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.SAVE' | translate}}
 					    </button>
 				    </div>
diff --git a/frontend/src/app/ui/admin/tenant-configuration/editor/file-transformer/file-transformer-editor.component.html b/frontend/src/app/ui/admin/tenant-configuration/editor/file-transformer/file-transformer-editor.component.html
index fa0af0744..f0e870f76 100644
--- a/frontend/src/app/ui/admin/tenant-configuration/editor/file-transformer/file-transformer-editor.component.html
+++ b/frontend/src/app/ui/admin/tenant-configuration/editor/file-transformer/file-transformer-editor.component.html
@@ -9,7 +9,7 @@
 					<mat-error *ngIf=" formGroup.get('fileTransformerPlugins')?.get('disableSystemSources')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 				</mat-checkbox>
 			</div>
-			<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addSource()" [disabled]="formGroup.disabled">{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.ADD-SOURCE' | translate}}</button>
+			<button mat-flat-button color="accent" class="padded-shadow-btn" type="button" (click)="addSource()" [disabled]="formGroup.disabled">{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.ADD-SOURCE' | translate}}</button>
 			<div *ngFor="let source of formGroup.get('fileTransformerPlugins').get('sources').controls; let sourceIndex=index;" class="row mb-3">
 				<div class="col-12">
 						<div class="row mb-3 d-flex align-items-center">
@@ -78,11 +78,11 @@
 		<div class="col-12">
 			<div class="row actions-row">
 				<div class="col"></div>
-				<div class="col-auto" *ngIf="editorModel.id"><button mat-button class="padded-shadow-btn primary-inverted" (click)="delete()">
+				<div class="col-auto" *ngIf="editorModel.id"><button mat-stroked-button class="warn" class="padded-shadow-btn" (click)="delete()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.RESET-TO-DEFAULT' | translate}}
 					</button>
 				</div>
-				<div class="col-auto"><button mat-button class="padded-shadow-btn primary" (click)="formSubmit()">
+				<div class="col-auto"><button mat-flat-button class="primary" class="padded-shadow-btn" (click)="formSubmit()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/tenant-configuration/editor/logo/logo-editor.component.html b/frontend/src/app/ui/admin/tenant-configuration/editor/logo/logo-editor.component.html
index c41941308..6d958e982 100644
--- a/frontend/src/app/ui/admin/tenant-configuration/editor/logo/logo-editor.component.html
+++ b/frontend/src/app/ui/admin/tenant-configuration/editor/logo/logo-editor.component.html
@@ -7,12 +7,12 @@
 				</ngx-dropzone-preview>
 			</ngx-dropzone>
 			<div class="col-12 d-flex justify-content-center attach-btn">
-				<button *ngIf="!formGroup.get('logo')?.get('storageFileId')?.value" (click)="drop.showFileSelector()" mat-button type="button" class="attach-file" [disabled]="formGroup.get('logo')?.get('storageFileId')?.disabled">
+				<button *ngIf="!formGroup.get('logo')?.get('storageFileId')?.value" (click)="drop.showFileSelector()" mat-button color="primary"  class="attach-file"  [disabled]="formGroup.get('logo')?.get('storageFileId')?.disabled">
 					<mat-icon class="mr-2">upload</mat-icon>
 					<span>{{ "TENANT-CONFIGURATION-EDITOR.ACTIONS.UPLOAD" | translate }}</span>
 				</button>
 
-				<button *ngIf="formGroup.get('logo')?.get('storageFileId')?.value" (click)="download(formGroup.get('logo')?.get('storageFileId')?.value)" mat-button type="button" class="attach-file">
+				<button *ngIf="formGroup.get('logo')?.get('storageFileId')?.value" (click)="download(formGroup.get('logo')?.get('storageFileId')?.value)" mat-button color="primary" class="attach-file" type="button">
 					<mat-icon class="mr-2">download</mat-icon>
 					<span>{{ "TENANT-CONFIGURATION-EDITOR.ACTIONS.DOWNLOAD" | translate }}</span>
 				</button>
@@ -21,11 +21,11 @@
 		<div class="col-12">
 			<div class="row actions-row">
 				<div class="col"></div>
-				<div class="col-auto" *ngIf="editorModel.id"><button mat-button class="padded-shadow-btn primary-inverted" (click)="delete()">
+				<div class="col-auto" *ngIf="editorModel.id"><button mat-stroked-button color="warn" class="padded-shadow-btn" (click)="delete()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.RESET-TO-DEFAULT' | translate}}
 					</button>
 				</div>
-				<div class="col-auto"><button mat-button class="padded-shadow-btn primary" (click)="formSubmit()">
+				<div class="col-auto"><button mat-flat-button color="primary" class="padded-shadow-btn" (click)="formSubmit()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/tenant-configuration/editor/plan-workflow/plan-workflow-editor/plan-workflow-editor.component.html b/frontend/src/app/ui/admin/tenant-configuration/editor/plan-workflow/plan-workflow-editor/plan-workflow-editor.component.html
index 1f6b21b9a..0baef091b 100644
--- a/frontend/src/app/ui/admin/tenant-configuration/editor/plan-workflow/plan-workflow-editor/plan-workflow-editor.component.html
+++ b/frontend/src/app/ui/admin/tenant-configuration/editor/plan-workflow/plan-workflow-editor/plan-workflow-editor.component.html
@@ -16,7 +16,7 @@
             </mat-form-field>
 		</div>
         <div class="col-12">
-            <button mat-button class="padded-shadow-btn secondary" type="button" (click)="addStatusTransition()" [disabled]="formGroup.disabled">{{'WORKFLOW-EDITOR.ACTIONS.ADD-STATUS-TRANSITION' | translate}}</button>
+            <button mat-flat-button color="accent" class="padded-shadow-btn " type="button" (click)="addStatusTransition()" [disabled]="formGroup.disabled">{{'WORKFLOW-EDITOR.ACTIONS.ADD-STATUS-TRANSITION' | translate}}</button>
         </div>
         <div class="row mb-3">
             <mat-error class="pl-3 pt-2" *ngIf="definitionForm?.touched && definitionForm?.controls?.statusTransitions?.hasError('required')">
@@ -73,14 +73,14 @@
 				<div class="col"></div>
                 @if(canDelete){
                     <div class="col-auto">
-                        <button mat-button class="padded-shadow-btn primary-inverted" (click)="delete()">
+                        <button mat-stroked-button color="warn" class="padded-shadow-btn" (click)="delete()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.RESET-TO-DEFAULT' | translate}}
 					    </button>
 				    </div>
                 }
                 @if(canSave){
                     <div class="col-auto">
-                        <button mat-button class="padded-shadow-btn primary" (click)="formSubmit()">
+                        <button mat-flat-button color="primary" class="padded-shadow-btn " (click)="formSubmit()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.SAVE' | translate}}
 					    </button>
 				    </div>
diff --git a/frontend/src/app/ui/admin/tenant/editor/tenant-editor.component.html b/frontend/src/app/ui/admin/tenant/editor/tenant-editor.component.html
index 4f1a39fc7..6c5ed3f4f 100644
--- a/frontend/src/app/ui/admin/tenant/editor/tenant-editor.component.html
+++ b/frontend/src/app/ui/admin/tenant/editor/tenant-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">{{'TENANT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-stroked-button class="padded-shadow-btn" (click)="cancel()" type="button">{{'TENANT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto" *ngIf="!isNew">
-					<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>
 						{{'TENANT-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>
 						{{'TENANT-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
diff --git a/frontend/src/app/ui/admin/user/listing/user-invite-to-tenant-dialog/user-invite-to-tenant-dialog.component.html b/frontend/src/app/ui/admin/user/listing/user-invite-to-tenant-dialog/user-invite-to-tenant-dialog.component.html
index dc5d05d5e..d11286fbe 100644
--- a/frontend/src/app/ui/admin/user/listing/user-invite-to-tenant-dialog/user-invite-to-tenant-dialog.component.html
+++ b/frontend/src/app/ui/admin/user/listing/user-invite-to-tenant-dialog/user-invite-to-tenant-dialog.component.html
@@ -50,7 +50,7 @@
 	</div>
 	<div mat-dialog-actions class="row d-flex">
 		<div class="col-auto ml-auto">
-			<button mat-button [disabled]="inProgressSendButton || !formGroup.valid" (click)="send()" type="button" class="padded-shadow-btn primary-inverted primary-inverted-hover">{{'USER-INVITE-TO-TENANT-DIALOG.ACTIONS.INVITE' | translate}}</button>
+			<button mat-stroked-button color="primary" [disabled]="inProgressSendButton || !formGroup.valid" (click)="send()" type="button" class="padded-shadow-btn primary-inverted-hover">{{'USER-INVITE-TO-TENANT-DIALOG.ACTIONS.INVITE' | translate}}</button>
 			<mat-error *ngIf="formGroup.get('users').hasError('backendError')">{{formGroup.get('users').getError('backendError').message}}</mat-error>
 			<mat-error *ngIf="formGroup.get('users').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 		</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 0e55db5ab..ed8cc4b9e 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
@@ -7,7 +7,7 @@
 
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary" (click)="invite()" *ngIf="hasTenantAdminMode">
+					<button mat-flat-button color="primary" class="padded-shadow-btn" (click)="invite()" *ngIf="hasTenantAdminMode">
 						{{'USER-LISTING.ACTIONS.INVITE' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html b/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html
index b43f5b15e..eded1a5d6 100644
--- a/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html
+++ b/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html
@@ -41,10 +41,10 @@
 						</mat-button-toggle-group>
 					</div>
 					<div class="col-auto ml-auto pr-1">
-						<button type="button" mat-button class="padded-shadow-btn primary mt-2" (click)="createThread()">{{ 'ANNOTATION-DIALOG.THREADS.SEND' | translate }} <i class="fa fa-paper-plane ml-2"></i></button>
+						<button type="button" mat-flat-button color="primary" class="padded-shadow-btn mt-2" (click)="createThread()">{{ 'ANNOTATION-DIALOG.THREADS.SEND' | translate }} <i class="fa fa-paper-plane ml-2"></i></button>
 					</div>
 					<div class="col-auto pl-1">
-						<button type="button" mat-button class="padded-shadow-btn primary-inverted mt-2" (click)="close()">{{ 'ANNOTATION-DIALOG.THREADS.CANCEL' | translate }}</button>
+						<button type="button" mat-stroked-button color="primary" class="padded-shadow-btn mt-2" (click)="close()">{{ 'ANNOTATION-DIALOG.THREADS.CANCEL' | translate }}</button>
 					</div>
 				</div>	
 			</form>
diff --git a/frontend/src/app/ui/auth/login/merge-email-confirmation/merge-email-confirmation.component.html b/frontend/src/app/ui/auth/login/merge-email-confirmation/merge-email-confirmation.component.html
index 80010480e..7a4fdbb2a 100644
--- a/frontend/src/app/ui/auth/login/merge-email-confirmation/merge-email-confirmation.component.html
+++ b/frontend/src/app/ui/auth/login/merge-email-confirmation/merge-email-confirmation.component.html
@@ -14,7 +14,7 @@
         </div>
         <div class="row justify-content-center">
           <div class="col-auto mt-4">
-            <button type="button" mat-button class="padded-shadow-btn primary" (click)="onConfirm()">{{ 'MERGE-ACCOUNT.ACTIONS.CONFIRM' | translate }}</button>
+            <button type="button" mat-flat-button color="primary" class="padded-shadow-btn" (click)="onConfirm()">{{ 'MERGE-ACCOUNT.ACTIONS.CONFIRM' | translate }}</button>
           </div>
         </div>
       </div>
diff --git a/frontend/src/app/ui/auth/login/unlink-email-confirmation/unlink-email-confirmation.component.html b/frontend/src/app/ui/auth/login/unlink-email-confirmation/unlink-email-confirmation.component.html
index 7049318a6..ff545580f 100644
--- a/frontend/src/app/ui/auth/login/unlink-email-confirmation/unlink-email-confirmation.component.html
+++ b/frontend/src/app/ui/auth/login/unlink-email-confirmation/unlink-email-confirmation.component.html
@@ -15,7 +15,7 @@
         </div>
         <div class="row justify-content-center">
           <div class="col-auto mt-4">
-            <button type="button" mat-button class="padded-shadow-btn primary" (click)="onConfirm()">{{ 'UNLINK-ACCOUNT.ACTIONS.CONFIRM' | translate }}</button>
+            <button type="button" mat-flat-button color="primary" class="padded-shadow-btn" (click)="onConfirm()">{{ 'UNLINK-ACCOUNT.ACTIONS.CONFIRM' | translate }}</button>
           </div>
         </div>
       </div>
diff --git a/frontend/src/app/ui/contact/contact-content/contact-content.component.html b/frontend/src/app/ui/contact/contact-content/contact-content.component.html
index b1db2f7de..9cae37901 100644
--- a/frontend/src/app/ui/contact/contact-content/contact-content.component.html
+++ b/frontend/src/app/ui/contact/contact-content/contact-content.component.html
@@ -22,8 +22,8 @@
 			</div>
 		</div>
 		<div *ngIf="!isDialog" class="row contact-actions">
-			<div class="ml-auto col-auto"><button mat-button type="button" class="padded-shadow-btn neutral" (click)="cancel()">{{'CONTACT.SUPPORT.CANCEL' | translate}}</button></div>
-			<div class="col-auto"><button mat-button type="button" class="padded-shadow-btn primary-inverted" [disabled]="!formGroup.valid" (click)="send()"><i class="fa fa-paper-plane pr-2"></i>{{'CONTACT.SUPPORT.SEND' | translate}}</button></div>
+			<div class="ml-auto col-auto"><button mat-stroked-button type="button" class="padded-shadow-btn" (click)="cancel()">{{'CONTACT.SUPPORT.CANCEL' | translate}}</button></div>
+			<div class="col-auto"><button mat-stroked-button color="primary" type="button" class="padded-shadow-btn" [disabled]="!formGroup.valid" (click)="send()"><i class="fa fa-paper-plane pr-2"></i>{{'CONTACT.SUPPORT.SEND' | translate}}</button></div>
 		</div>
 	</div>
 </form>
diff --git a/frontend/src/app/ui/dashboard/dashboard.component.html b/frontend/src/app/ui/dashboard/dashboard.component.html
index 593bc8c29..70dcd1fbb 100644
--- a/frontend/src/app/ui/dashboard/dashboard.component.html
+++ b/frontend/src/app/ui/dashboard/dashboard.component.html
@@ -17,7 +17,7 @@
 
 								<div class="row d-flex align-items-center mt-4" *ngIf="this.configurationService.newReleaseNotificationLink">
 									<div class="col-auto d-flex">
-										<a mat-button class="padded-shadow-btn primary new-releases-btn" href="{{this.configurationService.newReleaseNotificationLink}}" target="_blank">
+										<a mat-flat-button color="primary" class="padded-shadow-btn new-releases-btn" href="{{this.configurationService.newReleaseNotificationLink}}" target="_blank">
 											{{'NEW-RELEASE-NOTIFICATION.ACTIONS.LEARN-MORE' | translate}}
 										</a>
 									</div>
diff --git a/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html b/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html
index 503a6b1b5..45d13340d 100644
--- a/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html
+++ b/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html
@@ -39,7 +39,7 @@
 
 			<div class="row justify-content-center mt-5" *ngIf="listingItems?.length == 0 && onlyDescriptions && hasPlans">
 				<div class="col-auto p-0 add-description">
-						<button mat-button type="button" class="padded-shadow-btn secondary" (click)="addDescription()">{{'DASHBOARD.ACTIONS.ADD-DESCRIPTION' | translate}}</button>
+						<button mat-flat-button color="accent" type="button" class="padded-shadow-btn" (click)="addDescription()">{{'DASHBOARD.ACTIONS.ADD-DESCRIPTION' | translate}}</button>
 				</div>
 			</div>
 
diff --git a/frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.html b/frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.html
index ddb36b5af..cf7bc0c75 100644
--- a/frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.html
+++ b/frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.html
@@ -27,7 +27,7 @@
 		</div>
 	</div>
 	<div mat-dialog-actions class="row">
-		<div class="col-auto ml-auto"><button mat-button class="padded-shadow-btn neutral" type="button" (click)="cancel()">{{ data.cancelButton }}</button></div>
-		<div class="col-auto"><button mat-button class="padded-shadow-btn primary-inverted primary-inverted-hover confirm-btn" type="button" [disabled]="!data.formGroup.valid" (click)="confirm()">{{ data.confirmButton }}</button></div>
+		<div class="col-auto ml-auto"><button mat-stroked-button class="padded-shadow-btn" type="button" (click)="cancel()">{{ data.cancelButton }}</button></div>
+		<div class="col-auto"><button mat-stroked-button color="primary" class="padded-shadow-btn primary-inverted-hover confirm-btn" type="button" [disabled]="!data.formGroup.valid" (click)="confirm()">{{ data.confirmButton }}</button></div>
 	</div>
 </div>
diff --git a/frontend/src/app/ui/description/editor/description-base-fields-editor/dialog-description-template/deprecated-description-template-dialog.component.html b/frontend/src/app/ui/description/editor/description-base-fields-editor/dialog-description-template/deprecated-description-template-dialog.component.html
index 19c18cb62..3007ffbdc 100644
--- a/frontend/src/app/ui/description/editor/description-base-fields-editor/dialog-description-template/deprecated-description-template-dialog.component.html
+++ b/frontend/src/app/ui/description/editor/description-base-fields-editor/dialog-description-template/deprecated-description-template-dialog.component.html
@@ -18,9 +18,9 @@
 </mat-dialog-content>
 <mat-dialog-actions class="mt-3 mb-3 pb-1">
   <div class="col-auto pb-1">
-    <button mat-button type="button" class="padded-shadow-btn primary-inverted" (click)="cancel()"><span>{{ 'DESCRIPTION-EDITOR.DEPRECATED-DESCRIPTION-TEMPLATE.ACTIONS.CANCEL' | translate}}</span></button>
+    <button mat-stroked-button color="primary" type="button" class="padded-shadow-btn" (click)="cancel()"><span>{{ 'DESCRIPTION-EDITOR.DEPRECATED-DESCRIPTION-TEMPLATE.ACTIONS.CANCEL' | translate}}</span></button>
   </div>
   <div class="ml-auto col-auto pb-1">
-    <button mat-button type="button" class="padded-shadow-btn primary" (click)="update()"><span>{{ 'DESCRIPTION-EDITOR.DEPRECATED-DESCRIPTION-TEMPLATE.ACTIONS.UPDATE' | translate}}</span></button>
+    <button mat-flat-button color="primary"  type="button" class="padded-shadow-btn" (click)="update()"><span>{{ 'DESCRIPTION-EDITOR.DEPRECATED-DESCRIPTION-TEMPLATE.ACTIONS.UPDATE' | translate}}</span></button>
   </div>
 </mat-dialog-actions>
diff --git a/frontend/src/app/ui/description/editor/description-editor.component.html b/frontend/src/app/ui/description/editor/description-editor.component.html
index c5036fab5..6a5666f7f 100644
--- a/frontend/src/app/ui/description/editor/description-editor.component.html
+++ b/frontend/src/app/ui/description/editor/description-editor.component.html
@@ -135,7 +135,7 @@
 							<div class="col-12">
 								<div class="row mt-3 stepper-actions justify-content-center">
 									<div class="col-auto mb-1">
-										<button mat-stroked-button color="accent" type="button" class="padded-shadow-btn neutral stepper mr-2" [disabled]="reachedBase" (click)="previousStep()">
+										<button mat-stroked-button color="accent" type="button" class="padded-shadow-btn stepper mr-2" [disabled]="reachedBase" (click)="previousStep()">
 											<span class="material-icons">chevron_left</span>
 											<div>{{'DESCRIPTION-EDITOR.TOC.PREVIOUS' | translate}}</div>
 										</button>
diff --git a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.html b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.html
index 71d67ee10..4fd41be7d 100644
--- a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.html
+++ b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.html
@@ -29,6 +29,6 @@
 </div>
 
 <div mat-dialog-actions class="row">
-	<div class="ml-auto col-auto"><button mat-button class="padded-shadow-btn primary-inverted" (click)="cancel()">{{'DESCRIPTION-EDITOR.ACTIONS.CANCEL' | translate}}</button></div>
-	<div class="col-auto"><button mat-button class="padded-shadow-btn primary" [disabled]="!propertiesFormGroup.get('fields').valid" (click)="save()">{{'DESCRIPTION-EDITOR.ACTIONS.SAVE' | translate}}</button></div>
+	<div class="ml-auto col-auto"><button mat-stroked-button color="primary" class="padded-shadow-btn" (click)="cancel()">{{'DESCRIPTION-EDITOR.ACTIONS.CANCEL' | translate}}</button></div>
+	<div class="col-auto"><button mat-flat-button color="primary" class="padded-shadow-btn" [disabled]="!propertiesFormGroup.get('fields').valid" (click)="save()">{{'DESCRIPTION-EDITOR.ACTIONS.SAVE' | translate}}</button></div>
 </div>
diff --git a/frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html b/frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html
index 47743f0b4..d2bd9332e 100644
--- a/frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html
+++ b/frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html
@@ -232,7 +232,7 @@
 				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('type').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 			</mat-form-field>
 			<div class="col-md-2">
-				<button type="button" mat-button class="padded-shadow-btn primary" (click)="validateId()" [disabled]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').disabled">{{ "TYPES.DESCRIPTION-TEMPLATE-VALIDATOR.ACTION" | translate }}</button>
+				<button type="button" mat-flat-button color="primary" class="padded-shadow-btn" (click)="validateId()" [disabled]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').disabled">{{ "TYPES.DESCRIPTION-TEMPLATE-VALIDATOR.ACTION" | translate }}</button>
 				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').getError('backendError').message}}</mat-error>
 				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 			</div>
diff --git a/frontend/src/app/ui/description/editor/new-description/new-description.component.html b/frontend/src/app/ui/description/editor/new-description/new-description.component.html
index 877576574..37dbbf98b 100644
--- a/frontend/src/app/ui/description/editor/new-description/new-description.component.html
+++ b/frontend/src/app/ui/description/editor/new-description/new-description.component.html
@@ -38,9 +38,9 @@
 			</div>
 
 			<div class="row d-flex align-items-center justify-content-center" [class.pb-4]="prefillSelected">
-				<button mat-button type="button" class="padded-shadow-btn neutral" (click)="manuallySelected()">{{'NEW-DESCRIPTION-DIALOG.ACTIONS.MANUALLY' | translate}}</button>
+				<button mat-stroked-button type="button" class="padded-shadow-btn" (click)="manuallySelected()">{{'NEW-DESCRIPTION-DIALOG.ACTIONS.MANUALLY' | translate}}</button>
 				<div class="ml-2 mr-2">{{'NEW-DESCRIPTION-DIALOG.OR' | translate}}</div>
-				<button mat-button type="button" class="padded-shadow-btn secondary" (click)="prefillSelected = true">{{'NEW-DESCRIPTION-DIALOG.ACTIONS.PREFILL' | translate}}</button>
+				<button mat-flat-button color="accent" type="button" class="padded-shadow-btn" (click)="prefillSelected = true">{{'NEW-DESCRIPTION-DIALOG.ACTIONS.PREFILL' | translate}}</button>
 			</div>
 			<div *ngIf="prefillSelected" class="row">
 				<div class="col-12 pl-0 pr-0 pb-2 d-flex flex-row">
@@ -66,13 +66,13 @@
 	<!-- <div *ngIf="prefillSelected || !prefillingSourcesEnabled"> -->
 	<div *ngIf="!prefillingSourcesEnabled else goToNextWithPrefillingSources">
 		<div class="col-auto d-flex pb-4 pt-2">
-			<button mat-button type="button" class="padded-shadow-btn secondary ml-auto" [disabled]="prefillForm.get('descriptionTemplateId').invalid" (click)="manuallySelected()">{{'NEW-DESCRIPTION-DIALOG.ACTIONS.NEXT' | translate}}</button>
+			<button mat-flat-button color="accent" type="button" class="padded-shadow-btn ml-auto" [disabled]="prefillForm.get('descriptionTemplateId').invalid" (click)="manuallySelected()">{{'NEW-DESCRIPTION-DIALOG.ACTIONS.NEXT' | translate}}</button>
 		</div>
 	</div>
 	<ng-template #goToNextWithPrefillingSources>
 		<div *ngIf="prefillSelected">
 			<div class="col-auto d-flex pb-4 pt-2">
-				<button mat-button type="button" class="padded-shadow-btn secondary ml-auto" [disabled]="prefillForm.invalid" (click)="next()">{{'NEW-DESCRIPTION-DIALOG.ACTIONS.NEXT' | translate}}</button>
+				<button mat-flat-button color="accent" type="button" class="padded-shadow-btn ml-auto" [disabled]="prefillForm.invalid" (click)="next()">{{'NEW-DESCRIPTION-DIALOG.ACTIONS.NEXT' | translate}}</button>
 			</div>
 		</div>
 	</ng-template>
diff --git a/frontend/src/app/ui/description/listing/description-listing.component.html b/frontend/src/app/ui/description/listing/description-listing.component.html
index 9e55d07d8..523e8ee91 100644
--- a/frontend/src/app/ui/description/listing/description-listing.component.html
+++ b/frontend/src/app/ui/description/listing/description-listing.component.html
@@ -6,7 +6,7 @@
 					<p>{{'DESCRIPTION-LISTING.TEXT-INFO' | translate}} <u class="pointer" [routerLink]="routerUtils.generateUrl(['/explore-descriptions'])">{{'DESCRIPTION-LISTING.LINK-PUBLIC-DESCRIPTIONS' | translate}}</u> {{'DESCRIPTION-LISTING.TEXT-INFO-REST' | translate}}</p>
 					<p class="mt-4 pt-2">{{'DESCRIPTION-LISTING.TEXT-INFO-PAR' | translate}}
 					<div class="d-flex">
-						<button mat-button class="padded-shadow-btn secondary align-self-center" (click)="addNewDescription()">
+						<button mat-flat-button color="accent" class="padded-shadow-btn align-self-center" (click)="addNewDescription()">
 							{{'DESCRIPTION-LISTING.ACTIONS.ADD-DESCRIPTION' | translate}}
 						</button>
 						<img class="col-auto ml-auto laptop-img" alt="{{('ALT-TEXT.DASHBOARD-POPUP-IMAGE' | translate) ?? 'dashboard pop up image' }}" src="../../../assets/images/dashboard-popup.png">
diff --git a/frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.html b/frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.html
index bffa10c87..e5c7755dd 100644
--- a/frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.html
+++ b/frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.html
@@ -22,10 +22,10 @@
 	<div class="row">
 		<div class="col actions">
 			<div class="col-auto ml-auto">
-				<button mat-button type="button" class="padded-shadow-btn neutral" (click)="cancel()">{{ 'START-NEW-DESCRIPTION-DIALOG.ACTIONS.CANCEL' | translate }}</button>
+				<button mat-stroked-button type="button" class="padded-shadow-btn" (click)="cancel()">{{ 'START-NEW-DESCRIPTION-DIALOG.ACTIONS.CANCEL' | translate }}</button>
 			</div>
 			<div class="col-auto p-0">
-				<button mat-button [disabled]="!formGroup.valid" type="button" class="padded-shadow-btn primary-inverted primary-inverted-hover" (click)="next()">{{ 'START-NEW-DESCRIPTION-DIALOG.ACTIONS.NEXT' | translate }}</button>
+				<button mat-stroked-button color="primary" [disabled]="!formGroup.valid" type="button" class="padded-shadow-btn primary-inverted-hover" (click)="next()">{{ 'START-NEW-DESCRIPTION-DIALOG.ACTIONS.NEXT' | translate }}</button>
 			</div>
 		</div>
 	</div>
diff --git a/frontend/src/app/ui/external-fetcher/external-fetcher-source.component.html b/frontend/src/app/ui/external-fetcher/external-fetcher-source.component.html
index 53210a21a..423e79b7a 100644
--- a/frontend/src/app/ui/external-fetcher/external-fetcher-source.component.html
+++ b/frontend/src/app/ui/external-fetcher/external-fetcher-source.component.html
@@ -223,7 +223,7 @@
 					<h3 class="m-0">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.QUERIES' | translate}}</h3>
 				</div>
 				<div class="col-auto">
-					<button mat-button type="button" class="padded-shadow-btn secondary" (click)="addQuery()" [disabled]="formGroup.get('queries').disabled">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.ADD-QUERY' | translate}}</button>
+					<button mat-flat-button color="accent" type="button" class="padded-shadow-btn" (click)="addQuery()" [disabled]="formGroup.get('queries').disabled">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.ADD-QUERY' | translate}}</button>
 				</div>
 			</div>
 		</div>
@@ -265,7 +265,7 @@
 							<h3 class="m-0">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.CASES' | translate}}</h3>
 						</div>
 						<div class="col-auto">
-							<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addCase(queryIndex)" [disabled]="query.disabled">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.ADD-CASE' | translate}}</button>
+							<button mat-flat-button color="accent" class="padded-shadow-btn" type="button" (click)="addCase(queryIndex)" [disabled]="query.disabled">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.ADD-CASE' | translate}}</button>
 						</div>
 					</div>
 					<div *ngFor="let case of query.get('cases').controls; let caseIndex=index;" class="row">
@@ -393,7 +393,7 @@
 						</mat-card-content>
 					</div>
 				</div>
-				<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addStaticItem()" [disabled]="formGroup.get('items').disabled">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.ADD-STATIC-ITEM' | translate}}</button>
+				<button mat-flat-button color="accent" class="padded-shadow-btn" type="button" (click)="addStaticItem()" [disabled]="formGroup.get('items').disabled">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.ADD-STATIC-ITEM' | translate}}</button>
 			</div>
 			<mat-error *ngIf="formGroup.get('items').dirty && formGroup.get('items').hasError('required')">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.STATIC-ITEMS-REQUIRED' | translate}}</mat-error>
 			<mat-error *ngIf="formGroup.get('items').hasError('backendError')">{{formGroup.get('items').getError('backendError').message}}</mat-error>
diff --git a/frontend/src/app/ui/faq/dialog/faq-dialog.component.html b/frontend/src/app/ui/faq/dialog/faq-dialog.component.html
index 28bd26c4d..0885833f6 100644
--- a/frontend/src/app/ui/faq/dialog/faq-dialog.component.html
+++ b/frontend/src/app/ui/faq/dialog/faq-dialog.component.html
@@ -11,6 +11,6 @@
 		<app-faq-content [isDialog]="isDialog"></app-faq-content>
 	</div>
 	<div mat-dialog-actions class="row">
-		<div class="ml-auto col-auto"><button mat-button mat-dialog-close class="padded-shadow-btn neutral" (click)="cancel()">{{'FAQ.CLOSE' | translate}}</button></div>
+		<div class="ml-auto col-auto"><button mat-stroked-button mat-dialog-close class="padded-shadow-btn" (click)="cancel()">{{'FAQ.CLOSE' | translate}}</button></div>
 	</div>
 </div>
diff --git a/frontend/src/app/ui/plan/clone-dialog/plan-clone-dialog.component.html b/frontend/src/app/ui/plan/clone-dialog/plan-clone-dialog.component.html
index 7e1ce7184..148a344d1 100644
--- a/frontend/src/app/ui/plan/clone-dialog/plan-clone-dialog.component.html
+++ b/frontend/src/app/ui/plan/clone-dialog/plan-clone-dialog.component.html
@@ -56,7 +56,7 @@
 	</div>
 	<div class="row pt-4">
 		<div class="col"></div>
-		<div class="col-auto"><button mat-button type="button" class="padded-shadow-btn neutral" (click)="cancel()">{{'PLAN-CLONE-DIALOG.ACTIONS.CANCEL' | translate}}</button></div>
-		<div class="col-auto"><button mat-button type="button" class="padded-shadow-btn primary-inverted primary-inverted-hover" (click)="confirm()" color="accent">{{'PLAN-CLONE-DIALOG.ACTIONS.CLONE' | translate}}</button></div>
+		<div class="col-auto"><button mat-stroked-button type="button" class="padded-shadow-btn" (click)="cancel()">{{'PLAN-CLONE-DIALOG.ACTIONS.CANCEL' | translate}}</button></div>
+		<div class="col-auto"><button mat-stroked-button color="primary" type="button" class="padded-shadow-btn primary-inverted-hover" (click)="confirm()" color="accent">{{'PLAN-CLONE-DIALOG.ACTIONS.CLONE' | translate}}</button></div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/ui/plan/invitation/dialog/plan-invitation-dialog.component.html b/frontend/src/app/ui/plan/invitation/dialog/plan-invitation-dialog.component.html
index f6aab7e80..384fb4703 100644
--- a/frontend/src/app/ui/plan/invitation/dialog/plan-invitation-dialog.component.html
+++ b/frontend/src/app/ui/plan/invitation/dialog/plan-invitation-dialog.component.html
@@ -12,7 +12,7 @@
 			<app-plan-user-field-component [form]="formGroup" [validationErrorModel]="editorModel.validationErrorModel" [sections]="selectedBlueprint?.definition?.sections" [viewOnly]="false" [initializeUsers]="true" [enableSorting]="false"></app-plan-user-field-component>
 		</div>
 		<div class="col mt-2">
-			<button mat-button *ngIf="hasValue()" [disabled]="inProgressSendButton" (click)="send()" type="button" class="padded-shadow-btn primary-inverted primary-inverted-hover">{{'PLAN-USER-INVITATION-DIALOG.ACTIONS.INVITE' | translate}}</button>
+			<button mat-stroked-button color="primary" *ngIf="hasValue()" [disabled]="inProgressSendButton" (click)="send()" type="button" class="padded-shadow-btn primary-inverted-hover">{{'PLAN-USER-INVITATION-DIALOG.ACTIONS.INVITE' | translate}}</button>
 			<mat-error *ngIf="formGroup.get('users').hasError('backendError')">{{formGroup.get('users').getError('backendError').message}}</mat-error>
 			<mat-error *ngIf="formGroup.get('users').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 		</div>
diff --git a/frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.html b/frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.html
index e90b23923..0736ca308 100644
--- a/frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.html
+++ b/frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.html
@@ -91,7 +91,7 @@
 	</div>
 	<div class="row pt-4">
 		<div class="col"></div>
-		<div class="col-auto"><button mat-raised-button type="button" class="padded-shadow-btn neutral" (click)="cancel()">{{'PLAN-NEW-VERSION-DIALOG.ACTIONS.CANCEL' | translate}}</button></div>
-		<div class="col-auto"><button mat-raised-button type="button" class="padded-shadow-btn primary-inverted primary-inverted-hover" (click)="confirm()">{{'PLAN-NEW-VERSION-DIALOG.ACTIONS.NEW-VERSION' | translate}}</button></div>
+		<div class="col-auto"><button mat-stroked-button type="button" class="padded-shadow-btn" (click)="cancel()">{{'PLAN-NEW-VERSION-DIALOG.ACTIONS.CANCEL' | translate}}</button></div>
+		<div class="col-auto"><button mat-stroked-button color="primary" type="button" class="padded-shadow-btn primary-inverted-hover" (click)="confirm()">{{'PLAN-NEW-VERSION-DIALOG.ACTIONS.NEW-VERSION' | translate}}</button></div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/ui/plan/new/upload-dialogue/plan-upload-dialog.component.html b/frontend/src/app/ui/plan/new/upload-dialogue/plan-upload-dialog.component.html
index 5725fb624..43dedb622 100644
--- a/frontend/src/app/ui/plan/new/upload-dialogue/plan-upload-dialog.component.html
+++ b/frontend/src/app/ui/plan/new/upload-dialogue/plan-upload-dialog.component.html
@@ -81,10 +81,10 @@
 		<div></div>
 		<div class="d-flex justify-content-between">
 			<div class="col-auto">
-				<button mat-button type="button" class="padded-shadow-btn neutral" (click)="cancel()">{{'PLAN-UPLOAD.ACTIONS.CANCEL' | translate}}</button>
+				<button mat-stroked-button type="button" class="padded-shadow-btn" (click)="cancel()">{{'PLAN-UPLOAD.ACTIONS.CANCEL' | translate}}</button>
 			</div>
 			<div class="col-auto">
-				<button mat-button type="button" (click)="confirm()" [disabled]="disableConfirmButton()" class="padded-shadow-btn primary-inverted primary-inverted-hover">{{'PLAN-UPLOAD.ACTIONS.IMPORT' | translate}}</button>
+				<button mat-stroked-button color="primary" type="button" (click)="confirm()" [disabled]="disableConfirmButton()" class="padded-shadow-btn primary-inverted-hover">{{'PLAN-UPLOAD.ACTIONS.IMPORT' | translate}}</button>
 			</div>
 		</div>
 	</div>
diff --git a/frontend/src/app/ui/plan/overview/plan-overview.component.html b/frontend/src/app/ui/plan/overview/plan-overview.component.html
index 2aeb6df4a..0484bc6ba 100644
--- a/frontend/src/app/ui/plan/overview/plan-overview.component.html
+++ b/frontend/src/app/ui/plan/overview/plan-overview.component.html
@@ -126,7 +126,7 @@
 							<div class="col-12 col-lg-7 mt-1">
 								<a class="w-100 description" [routerLink]="isPublicView ? this.routerUtils.generateUrl(['/explore-descriptions/overview/public/', description.id]) : this.routerUtils.generateUrl(['/descriptions/overview/' + description.id])" target="_blank">
 									<button class="w-100" [ngClass]="{'plan-btn': description.status.internalStatus === descriptionStatusEnum.Draft, 'plan-finalized-btn': description.status.internalStatus === descriptionStatusEnum.Finalized}">
-										<div matTooltip="{{ description.label }}" class="d-flex align-items-center justify-content-between">
+										<div matTooltip="{{ description.label }}" class="d-flex align-items-center justify-content-between description-btn">
 											<div class="description-btn-label">{{ description.label }}</div>
 											<mat-icon>launch</mat-icon>
 										</div>
diff --git a/frontend/src/app/ui/plan/overview/plan-overview.component.scss b/frontend/src/app/ui/plan/overview/plan-overview.component.scss
index d36ea907c..9e18c394f 100644
--- a/frontend/src/app/ui/plan/overview/plan-overview.component.scss
+++ b/frontend/src/app/ui/plan/overview/plan-overview.component.scss
@@ -43,21 +43,7 @@
 	align-self: center;
 }
 
-.description-btn {
-	padding: 0 1.1em;
-	background-color: var(--sys-tertiary);
-	border-radius: 4px;
-	justify-content: space-between;
-	color: var(--sys-on-tertiary);
-}
 
-.description-finalized-btn {
-	padding: 0 1.1em;
-	background-color: #b2f772;
-	border-radius: 4px;
-	justify-content: space-between;
-	color: #1b1b1b;
-}
 
 .show-more-btn {
 	width: 31.6em;
@@ -164,13 +150,13 @@
 	margin-bottom: 1.875em;
 }
 
+
 .description-btn-label {
 	margin-right: 1em;
 	overflow: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	letter-spacing: 0px;
-	color: #1b1b1b;
 	opacity: 0.8;
 	font-style: normal;
 	padding-bottom: 0.5rem;
@@ -293,6 +279,7 @@
 .plan-btn {
   min-height: 2.3em;
   background-color: var(--sys-tertiary);
+  color: var(--sys-on-tertiary);
   border-radius: 4px;
   flex-direction: row;
   justify-content: space-between;
@@ -302,6 +289,7 @@
 .plan-finalized-btn {
   min-height: 2.3em;
   background-color: #b2f772;
+  color: #000000;
   border-radius: 4px;
   flex-direction: row;
   justify-content: space-between;
diff --git a/frontend/src/app/ui/plan/plan-contact-prefill-dialog/plan-contact-prefill-dialog.component.html b/frontend/src/app/ui/plan/plan-contact-prefill-dialog/plan-contact-prefill-dialog.component.html
index a0b966902..3c64591b1 100644
--- a/frontend/src/app/ui/plan/plan-contact-prefill-dialog/plan-contact-prefill-dialog.component.html
+++ b/frontend/src/app/ui/plan/plan-contact-prefill-dialog/plan-contact-prefill-dialog.component.html
@@ -17,7 +17,7 @@
 		</mat-form-field>
 	</div>
 	<div class="row" style="justify-content: space-between;">
-		<div class="col-auto"><button mat-button type="button" class="padded-shadow-btn neutral" (click)="cancel()">{{'PLAN-CONTACT-PREFILL-DIALOG.ACTIONS.CANCEL' | translate}}</button></div>
-		<div class="col-auto"><button mat-button type="button" [disabled]="!selectedUser" (click)="confirm()" class="padded-shadow-btn primary-inverted">{{'PLAN-CONTACT-PREFILL-DIALOG.ACTIONS.CONFIRM' | translate}}</button></div>
+		<div class="col-auto"><button mat-stroked-button type="button" class="padded-shadow-btn" (click)="cancel()">{{'PLAN-CONTACT-PREFILL-DIALOG.ACTIONS.CANCEL' | translate}}</button></div>
+		<div class="col-auto"><button mat-stroked-button color="primary" type="button" [disabled]="!selectedUser" (click)="confirm()" class="padded-shadow-btn">{{'PLAN-CONTACT-PREFILL-DIALOG.ACTIONS.CONFIRM' | translate}}</button></div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/ui/plan/plan-delete-dialog/plan-delete-dialog.component.html b/frontend/src/app/ui/plan/plan-delete-dialog/plan-delete-dialog.component.html
index 2efb38bb4..00dd2e16e 100644
--- a/frontend/src/app/ui/plan/plan-delete-dialog/plan-delete-dialog.component.html
+++ b/frontend/src/app/ui/plan/plan-delete-dialog/plan-delete-dialog.component.html
@@ -16,7 +16,7 @@
 			</ng-container>
 	</div>
 	<div class="row" style="justify-content: space-between;">
-		<div class="col-auto"><button mat-button type="button" class="padded-shadow-btn neutral" (click)="cancel()">{{'PLAN-DELETE-DIALOG.ACTIONS.CANCEL' | translate}}</button></div>
-		<div class="col-auto"><button mat-button type="button" (click)="confirm()" class="padded-shadow-btn delete-inverted">{{'PLAN-DELETE-DIALOG.ACTIONS.DELETE' | translate}}</button></div>
+		<div class="col-auto"><button mat-stroked-button type="button" class="padded-shadow-btn" (click)="cancel()">{{'PLAN-DELETE-DIALOG.ACTIONS.CANCEL' | translate}}</button></div>
+		<div class="col-auto"><button mat-stroked-button color="warn" type="button" (click)="confirm()" class="padded-shadow-btn">{{'PLAN-DELETE-DIALOG.ACTIONS.DELETE' | translate}}</button></div>
 	</div>
 </mat-dialog-content>
diff --git a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html
index d306a6733..4c9a02fcc 100644
--- a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html
+++ b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html
@@ -177,7 +177,7 @@
 							<div class="col-12">
 								<div class="row justify-content-center" *ngIf="this.step !== 0">
 									<div class="col-auto mb-1">
-										<button mat-stroked-button type="button" class="padded-shadow-btn neutral stepper mr-2" [disabled]="step === 1" (click)="previousStep()">
+										<button mat-stroked-button type="button" class="padded-shadow-btn stepper mr-2" [disabled]="step === 1" (click)="previousStep()">
 											<span class="material-icons">chevron_left</span>
 											<div>{{'PLAN-EDITOR.ACTIONS.PREVIOUS-STEP' | translate}}</div>
                                         </button>
diff --git a/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.html b/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.html
index f1b9fc372..c21805d1d 100644
--- a/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.html
+++ b/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.html
@@ -87,10 +87,10 @@
 
 	<div mat-dialog-actions class="d-flex justify-content-end mb-1">
 		<div class="col-auto">
-			<button mat-button cdkFocusInitial (click)="close()" class="padded-shadow-btn neutral">{{ 'PLAN-FINALISE-DIALOG.ACTIONS.CANCEL' | translate }}</button>
+			<button mat-stroked-button cdkFocusInitial (click)="close()" class="padded-shadow-btn">{{ 'PLAN-FINALISE-DIALOG.ACTIONS.CANCEL' | translate }}</button>
 		</div>
 		<div class="col-auto">
-			<button mat-button [disabled]="!isPlanValid || getFinalizedDescriptions().length === 0 && descriptionsToBeFinalized.length === 0" class="padded-shadow-btn primary" (click)="onSubmit()">{{ 'PLAN-FINALISE-DIALOG.ACTIONS.SUBMIT' | translate }}</button>
+			<button mat-flat-button color="primary" [disabled]="!isPlanValid || getFinalizedDescriptions().length === 0 && descriptionsToBeFinalized.length === 0" class="padded-shadow-btn" (click)="onSubmit()">{{ 'PLAN-FINALISE-DIALOG.ACTIONS.SUBMIT' | translate }}</button>
 		</div>
 	</div>
 </div>
diff --git a/frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.html b/frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.html
index 4c34fa5ad..cce0fb041 100644
--- a/frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.html
+++ b/frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.html
@@ -64,7 +64,7 @@
 		</ng-container>
 	</mat-dialog-content>
 	<mat-dialog-actions>
-		<div class="ml-auto col-auto"><button mat-button class="padded-shadow-btn primary-inverted" mat-dialog-close>{{'COMMONS.ACTIONS.CANCEL' | translate}}</button></div>
-		<div class="col-auto"><button [disabled]="!isFormValid()" (click)="send()" mat-button class="padded-shadow-btn primary">{{'COMMONS.ACTIONS.SAVE' | translate}}</button></div>
+		<div class="ml-auto col-auto"><button mat-stroked-button class="padded-shadow-btn" mat-dialog-close>{{'COMMONS.ACTIONS.CANCEL' | translate}}</button></div>
+		<div class="col-auto"><button [disabled]="!isFormValid()" (click)="send()" mat-flat-button color="primary" class="padded-shadow-btn">{{'COMMONS.ACTIONS.SAVE' | translate}}</button></div>
 	</mat-dialog-actions>
 </form>
diff --git a/frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.html b/frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.html
index e9b679f52..aa8844e75 100644
--- a/frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.html
+++ b/frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.html
@@ -25,10 +25,10 @@
 			<div class="row justify-content-center">
 				<div class="col-xl"></div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn neutral ml-auto" (click)="cancel()">{{'USER-PROFILE.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-stroked-button class="padded-shadow-btn ml-auto" (click)="cancel()">{{'USER-PROFILE.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn primary-inverted" (click)="add()" [disabled]="!form.valid">{{'USER-PROFILE.ACTIONS.ADD' | translate}}</button>
+					<button mat-stroked-button color="primary" class="padded-shadow-btn" (click)="add()" [disabled]="!form.valid">{{'USER-PROFILE.ACTIONS.ADD' | translate}}</button>
 				</div>
 			</div>
 		</div>
diff --git a/frontend/src/app/ui/user-profile/user-profile.component.html b/frontend/src/app/ui/user-profile/user-profile.component.html
index d4efe6a0f..b7eb00e06 100644
--- a/frontend/src/app/ui/user-profile/user-profile.component.html
+++ b/frontend/src/app/ui/user-profile/user-profile.component.html
@@ -199,7 +199,7 @@
 						</div>
 					</div>
 					<div class="row d-flex mb-5">
-						<div class="col-auto ml-auto"><button mat-button class="padded-shadow-btn primary" type="button" (click)="save()">{{'USER-PROFILE.ACTIONS.SAVE' | translate}}</button></div>
+						<div class="col-auto ml-auto"><button mat-flat-button color="primary" class="padded-shadow-btn" type="button" (click)="save()">{{'USER-PROFILE.ACTIONS.SAVE' | translate}}</button></div>
 					</div>
 					<div class="row mb-5">
 						<div class="col-12">
diff --git a/frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.html b/frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.html
index 4bd23f38d..42d6af9bd 100644
--- a/frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.html
+++ b/frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.html
@@ -21,7 +21,7 @@
 	</div>
 	<div class="row mt-3 mb-3">
 		<div class="ml-auto col-auto">
-			<button mat-button type="button" class="padded-shadow-btn neutral" (click)="onClose()">{{'GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.ACTIONS.CANCEL' | translate}}</button>
+			<button mat-stroked-button type="button" class="padded-shadow-btn" (click)="onClose()">{{'GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.ACTIONS.CANCEL' | translate}}</button>
 		</div>
 	</div>
 </div>
diff --git a/frontend/src/common/modules/confirmation-dialog/confirmation-dialog.component.html b/frontend/src/common/modules/confirmation-dialog/confirmation-dialog.component.html
index 17b483b62..727dcf25e 100644
--- a/frontend/src/common/modules/confirmation-dialog/confirmation-dialog.component.html
+++ b/frontend/src/common/modules/confirmation-dialog/confirmation-dialog.component.html
@@ -24,9 +24,9 @@
 		<div *ngIf="!agreePrivacyPolicyNames" class="required-policy">{{'GENERAL.CONFIRMATION-DIALOG.ACTIONS.REQUIRED' | translate}}</div>
 	</div>
 	<div class="row" style="justify-content: space-between;">
-		<div class="col-auto"><button mat-button type="button" class="padded-shadow-btn neutral" (click)="cancel()">{{ data.cancelButton }}</button></div>
-		<div *ngIf="data.isDeleteConfirmation" class="col-auto"><button mat-button type="button" (click)="confirm()" class="padded-shadow-btn delete-inverted">{{ data.confirmButton }}</button></div>
-		<div *ngIf="!data.isDeleteConfirmation && !data.privacyPolicyNames" class="col-auto"><button mat-button type="button" (click)="confirm()" class="padded-shadow-btn primary-inverted primary-inverted-hover">{{ data.confirmButton }}</button></div>
-		<div *ngIf="!data.isDeleteConfirmation && data.privacyPolicyNames" class="col-auto"><button mat-button type="button" [disabled]="!agreePrivacyPolicyNames" (click)="confirm()" class="padded-shadow-btn primary-inverted primary-inverted-hover">{{ data.confirmButton }}</button></div>
+		<div class="col-auto"><button mat-stroked-button type="button" class="padded-shadow-btn" (click)="cancel()">{{ data.cancelButton }}</button></div>
+		<div *ngIf="data.isDeleteConfirmation" class="col-auto"><button mat-stroked-button color="warn" type="button" (click)="confirm()" class="padded-shadow-btn">{{ data.confirmButton }}</button></div>
+		<div *ngIf="!data.isDeleteConfirmation && !data.privacyPolicyNames" class="col-auto"><button mat-stroked-button color="primary" type="button" (click)="confirm()" class="padded-shadow-btn primary-inverted-hover">{{ data.confirmButton }}</button></div>
+		<div *ngIf="!data.isDeleteConfirmation && data.privacyPolicyNames" class="col-auto"><button mat-stroked-button color="primary" type="button" [disabled]="!agreePrivacyPolicyNames" (click)="confirm()" class="padded-shadow-btn primary-inverted-hover">{{ data.confirmButton }}</button></div>
 	</div>
 </div>
diff --git a/frontend/src/common/modules/multiple-choice-dialog/multiple-choice-dialog.component.html b/frontend/src/common/modules/multiple-choice-dialog/multiple-choice-dialog.component.html
index c3712ceb9..b5918940b 100644
--- a/frontend/src/common/modules/multiple-choice-dialog/multiple-choice-dialog.component.html
+++ b/frontend/src/common/modules/multiple-choice-dialog/multiple-choice-dialog.component.html
@@ -34,7 +34,7 @@
 <mat-dialog-actions class="mt-3 mb-3 pb-1">
 	<ng-container *ngFor="let title of data.titles; let i = index">
 		<div class="col-auto mb-2">
-			<button mat-button class="padded-shadow-btn primary" (click)="apply(i)">{{ title }}</button>
+			<button mat-flat-button color="primary" class="padded-shadow-btn" (click)="apply(i)">{{ title }}</button>
 		</div>
 	</ng-container>
 </mat-dialog-actions>
diff --git a/frontend/src/notification-service/ui/admin/notification-template/editor/notification-template-editor.component.html b/frontend/src/notification-service/ui/admin/notification-template/editor/notification-template-editor.component.html
index 1bdf6ff50..d8eb86d60 100644
--- a/frontend/src/notification-service/ui/admin/notification-template/editor/notification-template-editor.component.html
+++ b/frontend/src/notification-service/ui/admin/notification-template/editor/notification-template-editor.component.html
@@ -6,16 +6,16 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="padded-shadow-btn secondary" (click)="cancel()" type="button">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-stroked-button class="padded-shadow-btn" (click)="cancel()" type="button">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto" *ngIf="canDelete">
-					<button mat-button class="padded-shadow-btn secondary" type="button" (click)="delete()">
+					<button mat-stroked-button color="warn" class="padded-shadow-btn" type="button" (click)="delete()">
 						<mat-icon>delete</mat-icon>
 						{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.ACTIONS.DELETE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto" *ngIf="canSave">
-					<button mat-button class="padded-shadow-btn secondary" (click)="formSubmit()">
+					<button mat-flat-button color="primary" class="padded-shadow-btn" (click)="formSubmit()">
 						<mat-icon>save</mat-icon>
 						{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
diff --git a/frontend/src/notification-service/ui/admin/tenant-configuration/notifier-list/notifier-list-editor.component.html b/frontend/src/notification-service/ui/admin/tenant-configuration/notifier-list/notifier-list-editor.component.html
index b2c5e3477..3c35b7e8d 100644
--- a/frontend/src/notification-service/ui/admin/tenant-configuration/notifier-list/notifier-list-editor.component.html
+++ b/frontend/src/notification-service/ui/admin/tenant-configuration/notifier-list/notifier-list-editor.component.html
@@ -20,12 +20,12 @@
 		<div class="col-12">
 			<div class="row actions-row">
 				<div class="ml-auto col-auto" *ngIf="editorModel.id">
-                    <button mat-button class="padded-shadow-btn primary-inverted" (click)="delete()">
+                    <button mat-stroked-button color="warn" class="padded-shadow-btn" (click)="delete()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.RESET-TO-DEFAULT' | translate}}
 					</button>
 				</div>
 				<div class="ml-auto col-auto">
-                    <button mat-button class="padded-shadow-btn primary" (click)="formSubmit()">
+                    <button mat-flat-button color="primary" class="padded-shadow-btn" (click)="formSubmit()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/notification-service/ui/inapp-notification/editor/inapp-notification-editor.component.html b/frontend/src/notification-service/ui/inapp-notification/editor/inapp-notification-editor.component.html
index d3366389a..dd2e1cf3f 100644
--- a/frontend/src/notification-service/ui/inapp-notification/editor/inapp-notification-editor.component.html
+++ b/frontend/src/notification-service/ui/inapp-notification/editor/inapp-notification-editor.component.html
@@ -13,12 +13,12 @@
 		<div class="row editor-actions">
 			<div class="col"></div>
 			<div class="col-auto" *ngIf="!this.isDeleted && !isNew">
-                <button mat-raised-button type="button" (click)="delete()" mat-button class="padded-shadow-btn delete-inverted">
+                <button mat-raised-button type="button" (click)="delete()" mat-stroked-button color="warn" class="padded-shadow-btn">
                     {{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-EDITOR.ACTIONS.DELETE' | translate}}
                 </button>
             </div>
 			<div class="col-auto">
-                <button mat-raised-button (click)="cancel()" type="button" mat-button class="padded-shadow-btn inverted">
+                <button mat-raised-button (click)="cancel()" type="button" mat-stroked-button  class="padded-shadow-btn">
                     {{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-EDITOR.ACTIONS.CANCEL' | translate}}
                 </button>
             </div>
diff --git a/frontend/src/notification-service/ui/user-profile/notifier-list/user-profile-notifier-list-editor.component.html b/frontend/src/notification-service/ui/user-profile/notifier-list/user-profile-notifier-list-editor.component.html
index 4dc82308d..acba43874 100644
--- a/frontend/src/notification-service/ui/user-profile/notifier-list/user-profile-notifier-list-editor.component.html
+++ b/frontend/src/notification-service/ui/user-profile/notifier-list/user-profile-notifier-list-editor.component.html
@@ -19,7 +19,7 @@
 		<div class="row">
 			<div class="col"></div>
 			<div class="col-auto">
-				<button mat-button class="padded-shadow-btn primary" (click)="formSubmit()">
+				<button mat-flat-button color="primary" class="padded-shadow-btn" (click)="formSubmit()">
 					{{'NOTIFICATION-SERVICE.USER-PROFILE.NOTIFIER-LIST-EDITOR.ACTIONS.SAVE' | translate}}
 				</button>
 			</div>
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 7d26a7c13..8629f65a3 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -122,9 +122,12 @@
 }
 .mat-button-toggle-group.mat-button-toggle-group-appearance-standard{
     border-radius: 4px;
-    border-color: var(--mat-standard-button-toggle-selected-state-background-color);
+    border-color: var(--md-sys-color-secondary-dark);
     .mat-button-toggle.mat-button-toggle-appearance-standard {
-        border-left-color: var(--mat-standard-button-toggle-selected-state-background-color);
+        border-left-color: var(--md-sys-color-secondary-dark);
+    }
+    .mat-button-toggle-appearance-standard.mat-button-toggle-checked{
+        background-color: var(--md-sys-color-secondary-dark);
     }
 }
 .mdc-icon-button {
@@ -132,13 +135,16 @@
 }
 .mat-primary.mat-mdc-outlined-button:not(:disabled){
     border-color: var(--sys-primary);
+    background-color: rgb(255 255 255 / 40%);
 }
 .mat-warn.mat-mdc-outlined-button:not(:disabled){
     border-color: var(--sys-error);
+    background-color: rgb(255 255 255 / 40%);
 }
 .mat-unthemed.mat-mdc-outlined-button:not(:disabled) {
     color: var(--sys-on-surface);
     border-color: var(--sys-outline);
+    background-color: rgb(255 255 255 / 40%);
 }
 .mat-divider.mat-divider-vertical{
     border-right-color: rgba(0, 0, 0, .12) !important;
@@ -430,11 +436,6 @@ a {
 }
 
 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);
-        color: var(--sys-on-primary);
-        background-color: var(--sys-primary);
-    }
 
     &.squared-btn {
         border-radius: 4px;
@@ -444,61 +445,13 @@ button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[
         min-height: 40px;
         box-shadow: 0px 3px 6px #1E202029;
     }
-    &.primary {
-        background: var(--sys-primary) 0% 0% no-repeat padding-box;
+
+    &.primary-inverted-hover:hover {
+        background-color: var(--sys-primary);
         color: var(--sys-on-primary);
-        border: none;
-        &:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
-            color: var(--sys-on-primary);
-            opacity: 0.7;
-        }
-    }
-
-    &.secondary {
-        background: var(--sys-tertiary) 0% 0% no-repeat padding-box;
-        color: var(--sys-on-tertiary);
-        border: none;
-        &:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
-            color: var(--sys-on-tertiary);
-            opacity: 0.7;
-        }
-    }
-
-    &.primary-inverted {
-        color: var(--sys-primary);
-        border: 1px solid var(--sys-primary);
-        background: var(--sys-on-primary);
-        &:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
-            color: var(--sys-primary);
-            opacity: 0.5;
-        }
-        &.primary-inverted-hover:hover {
-            background-color: var(--sys-primary);
-            color: var(--sys-on-primary);
-        }
     }
 
 
-    &.neutral{
-        border: 1px solid #CBCBCB;
-        background: #fafafafa;
-        color: #000000;
-        &:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
-            color: #CBCBCB;
-        }
-    }
-
-    &.delete {
-        background: var(--sys-error);
-        border: none;
-        color: #ffffff;
-    }
-
-    &.delete-inverted {
-        background: #fafafafa;
-        border: 1px solid var(--sys-error);
-        color: var(--sys-error);
-    }
 
     &.import {
         border: 1px solid #000000;
@@ -670,4 +623,10 @@ ul.unstyled-list {
     .container-fluid:first-child {
         padding: 0 !important;
     }
+}
+
+.inverted-stroked-btn{
+    border: 1px solid var(--sys-on-primary);
+    color: var(--sys-on-primary);
+    background-color: var(--sys-primary);
 }
\ No newline at end of file