From 965948c6bf185d8a0927a6f280bcd195f836e074 Mon Sep 17 00:00:00 2001
From: mchouliara <mchouliara@cite.gr>
Date: Mon, 14 Oct 2024 16:12:18 +0300
Subject: [PATCH] replace root variables with material variables, UI fixes on
 plan/ description pages

---
 .../editor/status-editor.component.html       |   6 +-
 .../status-listing-filters.component.html     |   4 +-
 .../listing/status-listing.component.html     |   2 +-
 frontend/src/app/app.component.scss           |   4 +-
 .../multiple-auto-complete.component.scss     |   4 +-
 .../single-auto-complete.component.scss       |   4 +-
 .../guided-tour/guided-tour.component.html    |   6 +-
 .../popup/popup-notification.component.html   |   2 +-
 .../description-status-editor.component.html  |   6 +-
 ...tion-status-listing-filters.component.html |   4 +-
 .../description-status-listing.component.html |   2 +-
 ...ion-template-preview-dialog.component.html |   2 +-
 ...ion-template-preview-dialog.component.scss |   4 +-
 ...n-template-editor-field-set.component.scss |   2 +-
 ...ption-template-editor-field.component.scss |   4 +-
 ...ate-editor-section-fieldset.component.scss |   6 +-
 ...description-template-editor.component.html |  14 +--
 ...description-template-editor.component.scss |  10 +-
 ...te-table-of-contents-internal-section.scss |   4 +-
 ...escription-template-listing.component.html |   4 +-
 ...on-template-listing-filters.component.html |   4 +-
 ...description-template.dialog.component.html |   4 +-
 ...iption-template-type-editor.component.html |   8 +-
 ...iption-template-type-editor.component.scss |   2 +-
 ...ption-template-type-listing.component.html |   2 +-
 ...mplate-type-listing-filters.component.html |   4 +-
 .../lock-listing-filters.component.html       |   4 +-
 .../editor/language-editor.component.html     |   6 +-
 .../editor/language-editor.component.scss     |   2 +-
 .../language-listing-filters.component.html   |   4 +-
 .../listing/language-listing.component.html   |   2 +-
 .../maintenance-tasks.component.html          |  36 +++---
 .../plan-blueprint-editor.component.html      |  16 +--
 .../plan-blueprint-editor.component.scss      |   8 +-
 ...n-blueprint-listing-filters.component.html |   4 +-
 ...mport-plan-blueprint.dialog.component.html |   4 +-
 .../plan-blueprint-listing.component.html     |   4 +-
 .../plan-status-editor.component.html         |   6 +-
 ...plan-status-listing-filters.component.html |   4 +-
 .../plan-status-listing.component.html        |   2 +-
 .../prefilling-source-editor.component.html   |  12 +-
 ...ling-source-listing-filters.component.html |   4 +-
 .../prefilling-source-listing.component.html  |   2 +-
 .../reference-type-editor.component.html      |  12 +-
 .../reference-type-editor.component.scss      |   4 +-
 ...erence-type-listing-filters.component.html |   4 +-
 .../reference-type-listing.component.html     |   2 +-
 .../editor/reference-editor.component.html    |   8 +-
 .../reference-listing-filters.component.html  |   4 +-
 .../listing/reference-listing.component.html  |   2 +-
 .../css-colors-editor.component.html          |   4 +-
 .../default-user-locale-editor.component.html |   4 +-
 .../deposit/deposit-editor.component.html     |   6 +-
 ...description-workflow-editor.component.html |   6 +-
 .../file-transformer-editor.component.html    |   6 +-
 .../editor/logo/logo-editor.component.html    |   4 +-
 .../plan-workflow-editor.component.html       |   6 +-
 .../editor/tenant-editor.component.html       |   6 +-
 .../tenant-listing-filters.component.html     |   4 +-
 .../listing/tenant-listing.component.html     |   2 +-
 .../editor/usage-limit-editor.component.html  |   6 +-
 ...usage-limit-listing-filters.component.html |   4 +-
 .../usage-limit-listing.component.html        |   2 +-
 .../user-listing-filters.component.html       |   4 +-
 ...ser-invite-to-tenant-dialog.component.html |   2 +-
 .../user/listing/user-listing.component.html  |   4 +-
 .../annotation-dialog.component.html          |   4 +-
 .../annotation-dialog.component.scss          |   8 +-
 .../merge-email-confirmation.component.html   |   2 +-
 .../unlink-email-confirmation.component.html  |   2 +-
 .../contact-content.component.html            |   4 +-
 .../app/ui/dashboard/dashboard.component.html |   6 +-
 .../app/ui/dashboard/dashboard.component.scss |  14 +--
 .../recent-edited-activity.component.html     |   4 +-
 .../recent-edited-activity.component.scss     |  10 +-
 .../description-copy-dialog.component.html    |   4 +-
 ...cription-base-fields-editor.component.scss |   2 +-
 ...description-template-dialog.component.html |   4 +-
 .../editor/description-editor.component.html  |  18 +--
 .../editor/description-editor.component.scss  |  29 +++--
 ...form-fieldset-editor-dialog.component.html |   4 +-
 .../field-set-title.component.scss            |   4 +-
 .../form-field/form-field.component.html      |   2 +-
 .../form-section/form-section.component.scss  |   2 +-
 .../form-progress-indication.component.scss   |   2 +-
 .../new-description.component.html            |   8 +-
 .../new-description.component.scss            |   4 +-
 .../description-listing.component.html        |  10 +-
 .../description-listing.component.scss        |  30 ++---
 .../description-filter.component.html         |  10 +-
 .../description-filter.component.scss         |   2 +-
 .../description-listing-item.component.scss   |  14 +--
 .../description-overview.component.html       |  12 +-
 .../description-overview.component.scss       |  26 ++--
 ...tart-new-description-dialog.component.html |   4 +-
 ...tart-new-description-dialog.component.scss |   2 +-
 .../external-fetcher-source.component.html    |   6 +-
 .../ui/faq/dialog/faq-dialog.component.html   |   2 +-
 frontend/src/app/ui/misc/theme-helper.ts      |   4 +-
 .../src/app/ui/navbar/navbar.component.html   |   4 +-
 .../user-dialog/user-dialog.component.scss    |   2 +-
 .../plan-clone-dialog.component.html          |   4 +-
 .../plan-invitation-dialog.component.html     |   2 +-
 .../filtering/plan-filter.component.html      |   4 +-
 .../filtering/plan-filter.component.scss      |   2 +-
 .../plan-listing-item.component.scss          |   8 +-
 .../plan/listing/plan-listing.component.html  |   8 +-
 .../plan/listing/plan-listing.component.scss  |  21 ++--
 .../plan-new-version-dialog.component.html    |   4 +-
 .../start-new-plan-dialog.component.html      |   4 +-
 .../start-new-plan-dialog.component.scss      |   2 +-
 .../plan-upload-dialog.component.html         |   4 +-
 .../overview/plan-overview.component.html     |  12 +-
 .../overview/plan-overview.component.scss     |  34 ++---
 .../plan-authors/plan-authors.component.scss  |   4 +-
 ...plan-contact-prefill-dialog.component.html |   4 +-
 .../plan-delete-dialog.component.html         |   4 +-
 ...an-form-progress-indication.component.scss |   2 +-
 .../plan-editor.component.html                |  22 ++--
 .../plan-editor.component.scss                |  29 +++--
 .../plan-finalize-dialog.component.html       |   4 +-
 .../plan-finalize-dialog.component.scss       |   2 +-
 .../plan-user-field.component.scss            |   2 +-
 .../reference-dialog-editor.component.html    |   4 +-
 .../reference-field.component.scss            |   2 +-
 .../sidebar-footer.component.css              |   2 +-
 .../src/app/ui/sidebar/sidebar.component.scss |   2 +-
 .../add-account-dialog.component.html         |   4 +-
 .../add-account-dialog.component.scss         |   4 +-
 .../user-profile/user-profile.component.html  |   2 +-
 .../user-profile/user-profile.component.scss  |  12 +-
 ...rm-validation-errors-dialog.component.html |   2 +-
 ...rm-validation-errors-dialog.component.scss |   2 +-
 .../confirmation-dialog.component.html        |   8 +-
 .../multiple-choice-dialog.component.html     |   2 +-
 frontend/src/material-theme.scss              |  40 +++---
 ...otification-template-editor.component.html |   6 +-
 ...on-template-listing-filters.component.html |   4 +-
 ...tification-template-listing.component.html |   2 +-
 ...otification-listing-filters.component.html |   4 +-
 .../notifier-list-editor.component.html       |   4 +-
 .../inapp-notification-editor.component.html  |   4 +-
 .../inapp-notification-editor.component.scss  |   4 +-
 ...otification-listing-filters.component.html |   4 +-
 ...rofile-notifier-list-editor.component.html |   2 +-
 frontend/src/styles.scss                      | 117 +++++++++---------
 146 files changed, 522 insertions(+), 506 deletions(-)

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 65774864c..7997d100c 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="rounded-btn neutral" (click)="cancel()" type="button">{{'ANNOTATION-SERVICE.STATUS-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-button class="padded-shadow-btn neutral" (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="rounded-btn delete-inverted" type="button">
+					<button mat-button (click)="delete()" class="padded-shadow-btn delete-inverted" 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="rounded-btn primary" [disabled]="!formGroup?.touched" (click)="save(); formSubmit()">
+					<button mat-button class="padded-shadow-btn primary" [disabled]="!formGroup?.touched" (click)="save(); formSubmit()">
 						<mat-icon>save</mat-icon>
 						{{'ANNOTATION-SERVICE.STATUS-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
diff --git a/frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.html b/frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.html
index e49f62d0d..4f5235e7b 100644
--- a/frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.html
+++ b/frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.html
@@ -42,12 +42,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'ANNOTATION-SERVICE.STATUS-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'ANNOTATION-SERVICE.STATUS-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/annotation-service/ui/admin/status/listing/status-listing.component.html b/frontend/src/annotation-service/ui/admin/status/listing/status-listing.component.html
index 0424c2e86..abd88abae 100644
--- a/frontend/src/annotation-service/ui/admin/status/listing/status-listing.component.html
+++ b/frontend/src/annotation-service/ui/admin/status/listing/status-listing.component.html
@@ -7,7 +7,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn secondary"
+					<button mat-button class="padded-shadow-btn secondary"
 						*ngIf="authService.hasPermission(authService.permissionEnum.EditStatus)"
 						[routerLink]="routerUtils.generateUrl(['/annotation-statuses/new'])">
 						<mat-icon>add</mat-icon>
diff --git a/frontend/src/app/app.component.scss b/frontend/src/app/app.component.scss
index c68b0caad..e927bb33c 100644
--- a/frontend/src/app/app.component.scss
+++ b/frontend/src/app/app.component.scss
@@ -47,9 +47,9 @@
     left: -190px;
     z-index: -1;
    &:focus, &:active {
-        background-color: var(--primary-color);
+        background-color: var(--sys-primary);
         z-index: 1001;
         left: 50vw;
-        color: var(--primary-text);
+        color: var(--sys-on-primary);
    } 
 }
\ No newline at end of file
diff --git a/frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss b/frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss
index 795f1273f..a161b6d21 100644
--- a/frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss
+++ b/frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss
@@ -65,7 +65,7 @@
 	line-clamp: 1;
 }
 
-::ng-deep .autocomplete-option > .mdc-list-item__primary-text {
+::ng-deep .autocomplete-option > .mdc-list-item__--sys-on-primary {
 	margin: 0 !important;
 	width: 100%;
 }
@@ -80,7 +80,7 @@
 	}
 
 	mat-icon:hover {
-		color: var(--primary-color);
+		color: var(--sys-primary);
 	}
 }
 
diff --git a/frontend/src/app/library/auto-complete/single/single-auto-complete.component.scss b/frontend/src/app/library/auto-complete/single/single-auto-complete.component.scss
index cf7452f6a..dcb6859a5 100644
--- a/frontend/src/app/library/auto-complete/single/single-auto-complete.component.scss
+++ b/frontend/src/app/library/auto-complete/single/single-auto-complete.component.scss
@@ -35,7 +35,7 @@
 	}
 }
 
-::ng-deep .autocomplete-option > .mdc-list-item__primary-text {
+::ng-deep .autocomplete-option > .mdc-list-item__--sys-on-primary {
 	margin: 0 !important;
 	width: 100%;
 }
@@ -45,7 +45,7 @@
 		margin: 0px 5px 0px 10px;
 	}
 	mat-icon:hover {
-		color: var(--primary-color);
+		color: var(--sys-primary);
 	}
 }
 
diff --git a/frontend/src/app/library/guided-tour/guided-tour.component.html b/frontend/src/app/library/guided-tour/guided-tour.component.html
index 2114e00e9..e501a57da 100644
--- a/frontend/src/app/library/guided-tour/guided-tour.component.html
+++ b/frontend/src/app/library/guided-tour/guided-tour.component.html
@@ -27,12 +27,12 @@
                     {{ currentTourStep.title }}
                 </h2>
                 <div class="tour-buttons">
-                    <button *ngIf="!guidedTourService.onResizeMessage" mat-button type="button" class="rounded-btn primary"
+                    <button *ngIf="!guidedTourService.onResizeMessage" mat-flat-button color="primary" type="button" class="padded-shadow-btn"
                         (click)="guidedTourService.nextStep()">
                         {{ nextText }}
                     </button>
-                    <button *ngIf="!guidedTourService.onResizeMessage && !currentTourStep.isStepUnique" mat-button 
-                        (click)="guidedTourService.skipTour()" class="rounded-btn primary-inverted">
+                    <button *ngIf="!guidedTourService.onResizeMessage && !currentTourStep.isStepUnique" mat-stroked-button color="primary" 
+                        (click)="guidedTourService.skipTour()" class="padded-shadow-btn">
                         {{ skipText }}
                     </button>
                 </div>
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 13f3e871d..0ff3c9b14 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="rounded-btn primary-inverted" (click)="close()">{{'GENERAL.NOTIFICATION-DIALOG.POPUP.CLOSE' | translate}}</button>
+		<button mat-button class="padded-shadow-btn primary-inverted" (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 f0bd9a65a..06fd0bb9d 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="rounded-btn primary-inverted" (click)="cancel()" type="button">{{'COMMONS.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="cancel()" type="button">{{'COMMONS.ACTIONS.CANCEL' | translate}}</button>
 				</div>
                 <div class="col-auto" *ngIf="canDelete">
-                    <button mat-button class="rounded-btn delete-inverted" type="button" (click)="delete()">
+                    <button mat-button class="padded-shadow-btn delete-inverted" 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="rounded-btn primary" (click)="formSubmit()" [disabled]="!formGroup.touched">
+                    <button mat-button class="padded-shadow-btn primary" (click)="formSubmit()" [disabled]="!formGroup.touched">
                         <mat-icon>save</mat-icon>
                         {{'COMMONS.ACTIONS.SAVE' | translate}}
                     </button>
diff --git a/frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.html b/frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.html
index 6d9fd8c29..6226877e0 100644
--- a/frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.html
@@ -42,12 +42,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'PLAN-BLUEPRINT-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'PLAN-BLUEPRINT-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/description-status/listing/description-status-listing/description-status-listing.component.html b/frontend/src/app/ui/admin/description-status/listing/description-status-listing/description-status-listing.component.html
index 265353e42..01ab3b15e 100644
--- a/frontend/src/app/ui/admin/description-status/listing/description-status-listing/description-status-listing.component.html
+++ b/frontend/src/app/ui/admin/description-status/listing/description-status-listing/description-status-listing.component.html
@@ -7,7 +7,7 @@
 				</div>
 
 				<div class="col-auto">
-					<button mat-button class="rounded-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionStatus)" [routerLink]="routerUtils.generateUrl(['/description-statuses/new'])">
+					<button mat-button class="padded-shadow-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionStatus)" [routerLink]="routerUtils.generateUrl(['/description-statuses/new'])">
 						<mat-icon>add</mat-icon>
 						{{'DESCRIPTION-STATUS-LISTING.ACTIONS.CREATE-DESCRIPTION-STATUS' | translate}}
 					</button>
diff --git a/frontend/src/app/ui/admin/description-template/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 5aa7525ce..7e38f08ff 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="rounded-btn primary" (click)="select()">{{'TYPES.EXTERNAL-DATASET-TYPE.SELECT' | translate}}</button>
+			<button mat-button type="button" class="padded-shadow-btn primary" (click)="select()">{{'TYPES.EXTERNAL-DATASET-TYPE.SELECT' | translate}}</button>
 		</div>
 	</div>
 </div>
diff --git a/frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.scss b/frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.scss
index 266e3126a..eef686471 100644
--- a/frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.scss
+++ b/frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.scss
@@ -3,8 +3,8 @@
 		display: flex;
 		width: 100%;
 		height: 89px;
-		background-color: var(--primary-color);
-		color: var(--primary-color-text);
+		background-color: var(--sys-primary);
+		color: var(--sys--sys-on-primary);
 		font-size: 1.25rem;
 	}
 
diff --git a/frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.scss b/frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.scss
index fd4f3386c..854224961 100644
--- a/frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.scss
+++ b/frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.scss
@@ -17,7 +17,7 @@
 
 //Palete
 
-$blue-color : var(--primary-color);
+$blue-color : var(--sys-primary);
 $blue-color-light: #5cf7f2;
 
 .actions-list{
diff --git a/frontend/src/app/ui/admin/description-template/editor/components/field/description-template-editor-field.component.scss b/frontend/src/app/ui/admin/description-template/editor/components/field/description-template-editor-field.component.scss
index 8dc0cbffa..74832e439 100644
--- a/frontend/src/app/ui/admin/description-template/editor/components/field/description-template-editor-field.component.scss
+++ b/frontend/src/app/ui/admin/description-template/editor/components/field/description-template-editor-field.component.scss
@@ -14,7 +14,7 @@ mat-radio-button{
 }
 
 li.list-inline-item{
-  color: var(--primary-color);
+  color: var(--sys-primary);
   .mat-icon{
     vertical-align: bottom;
   }
@@ -27,7 +27,7 @@ li.list-inline-item{
     color: var(--dark-gray);
   }
   .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
-    background-color:var(--primary-color) ;
+    background-color:var(--sys-primary) ;
   }
   .mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
     background-color:rgba(0,178,159,0.34);
diff --git a/frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.scss b/frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.scss
index 013221f24..76e18c3a5 100644
--- a/frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.scss
+++ b/frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.scss
@@ -1,4 +1,4 @@
-$blue-color : var(--primary-color);
+$blue-color : var(--sys-primary);
 $blue-color-light: #5cf7f2;
 
 
@@ -55,7 +55,7 @@ $blue-color-light: #5cf7f2;
       margin-right: 0.5em;
       margin-left: -.09em;
       height: auto;
-      color: var(--primary-color);
+      color: var(--sys-primary);
     }
     .input_icon{
       width: 14px;
@@ -83,7 +83,7 @@ $blue-color-light: #5cf7f2;
     display:inline-block; 
     margin: 0px auto; 
     cursor: grab;
-    color: var(--secondary-color);
+    color: var(--sys-tertiary);
     opacity: 0.6 !important;
   }
 }
diff --git a/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html b/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html
index dad63893c..254546570 100644
--- a/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html
+++ b/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html
@@ -117,7 +117,7 @@
 										<td>{{usersMap.get(user?.get('userId')?.value)?.name}}</td>
 										<td>{{enumUtils.toUserDescriptionTemplateRoleString(user?.get('role')?.value)}}</td>
 										<td *ngIf="!viewOnly">
-											<button mat-button class="rounded-btn delete-inverted" (click)="verifyAndRemoveUser(i)" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-REMOVE-USER'| translate"><mat-icon>person_remove</mat-icon></button>
+											<button mat-button class="padded-shadow-btn delete-inverted" (click)="verifyAndRemoveUser(i)" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-REMOVE-USER'| translate"><mat-icon>person_remove</mat-icon></button>
 										</td>
 									</tr>
 									<tr *ngIf="formGroup.get('users')?.controls?.length === 0">
@@ -198,7 +198,7 @@
 											</div>
                                             @if(!viewOnly &&!selectedTocEntry?.subEntries?.length){
                                                 <div class="col-12">
-                                                    <button mat-button class="rounded-btn secondary" (click)="addNewEntry({parent:selectedTocEntry, childType: tocEntryEnumValues.Section})">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-SECTION' | translate}}</button>
+                                                    <button mat-button class="padded-shadow-btn secondary" (click)="addNewEntry({parent:selectedTocEntry, childType: tocEntryEnumValues.Section})">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-SECTION' | translate}}</button>
                                                 </div>
                                                 <mat-error *ngIf="selectedTocEntry.form.invalid && showErrors">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-SELECT-AT-LEAST-ONE-REQUIRED' | translate}}</mat-error>
                                             }
@@ -276,11 +276,11 @@
 
 	<ng-container *ngIf="steps && stepper">
 		<div class="floating-btn">
-			<button *ngIf="stepper?.selectedIndex > 0" [@previous_btn] mat-button class="rounded-btn secondary " (click)="stepper?.previous()">
+			<button *ngIf="stepper?.selectedIndex > 0" [@previous_btn] mat-button class="padded-shadow-btn secondary " (click)="stepper?.previous()">
 				<mat-icon class="back-icon pointer">chevron_left</mat-icon>
 				{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.PREVIOUS' | translate}}
 			</button>
-			<button *ngIf="stepper?.selectedIndex < (steps.length-1)" mat-button class="rounded-btn secondary ml-3" [@next_btn] (click)="stepper?.next();" [disabled]="!isStepCompleted(stepper?.selectedIndex)">
+			<button *ngIf="stepper?.selectedIndex < (steps.length-1)" mat-button class="padded-shadow-btn secondary ml-3" [@next_btn] (click)="stepper?.next();" [disabled]="!isStepCompleted(stepper?.selectedIndex)">
 				<span>{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.NEXT' | translate}}</span>
 				<mat-icon class="back-icon pointer" iconPositionEnd>chevron_right</mat-icon>
 			</button>
@@ -292,8 +292,8 @@
 
 <ng-template #actions>
 	<div>
-		<button mat-button class="rounded-btn primary-inverted mr-3" (click)="cancel()">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.CLOSE' | translate}}</button>
-		<button *ngIf="!viewOnly" mat-button class="rounded-btn secondary" type="button">
+		<button mat-button class="padded-shadow-btn primary-inverted mr-3" (click)="cancel()">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.CLOSE' | translate}}</button>
+		<button *ngIf="!viewOnly" mat-button class="padded-shadow-btn secondary" type="button">
 			<span class="d-flex flex-row row">
 				<span (click)="save(); formSubmit()" class="col">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.SAVE' | translate}}</span>
 				<mat-divider [vertical]="true"></mat-divider>
@@ -307,7 +307,7 @@
 			<button mat-menu-item (click)="saveWithClose(false)" type="button">{{ 'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.SAVE-AND-CONTINUE' | translate }}</button>
 		</mat-menu>
 
-		<button *ngIf="!viewOnly && steps?.length-1 === stepper?.selectedIndex" [@finalize_btn] mat-button class="rounded-btn primary ml-3" [disabled]="!formGroup.valid" [class.invisible]="steps?.length-1 !== stepper?.selectedIndex" (click)="finalize()">
+		<button *ngIf="!viewOnly && steps?.length-1 === stepper?.selectedIndex" [@finalize_btn] mat-button class="padded-shadow-btn primary ml-3" [disabled]="!formGroup.valid" [class.invisible]="steps?.length-1 !== stepper?.selectedIndex" (click)="finalize()">
 			{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FINALIZE' | translate}}
 		</button>
 	</div>
diff --git a/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.scss b/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.scss
index c17831232..87274146c 100644
--- a/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.scss
+++ b/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.scss
@@ -66,7 +66,7 @@
 	transition-timing-function: ease-out;
 	transition-delay: 50ms;
 	box-shadow: 0px 1px 2px #bfbfbf;
-	background-color: var(--secondary-color);
+	background-color: var(--sys-tertiary);
 }
 #progress-container{
 	box-shadow: 1px 1px 6px #00000029;;
@@ -74,7 +74,7 @@
 
 
 
-$blue-color : var(--primary-color);
+$blue-color : var(--sys-primary);
 $blue-color-light: #5cf7f2;
 
 
@@ -107,7 +107,7 @@ $blue-color-light: #5cf7f2;
 
 
 .actions-list{
-	box-shadow: 0px 3px 12px var(--primary-color)99;
+	box-shadow: 0px 3px 12px var(--sys-primary)99;
 	border-radius: 4px;
 	padding: 1em 0.9em;
 	min-width: 166px;
@@ -129,7 +129,7 @@ $blue-color-light: #5cf7f2;
 			margin-right: 0.5em;
 			margin-left: -.09em;
 			height: auto;
-			color: var(--primary-color);;
+			color: var(--sys-primary);;
 		}
 		.input_icon{
 			width: 14px;
@@ -215,7 +215,7 @@ $blue-color-light: #5cf7f2;
 	position: fixed;
 	bottom: 20em;
 	right: 2em;
-	color: var(--primary-color) !important;
+	color: var(--sys-primary) !important;
 	cursor: pointer;
 	font-size: 1rem;
 	font-weight: 400;
diff --git a/frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.scss b/frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.scss
index eb96cde92..497946881 100644
--- a/frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.scss
+++ b/frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.scss
@@ -23,9 +23,9 @@
 
 
 
-$blue-color : var(--primary-color);
+$blue-color : var(--sys-primary);
 $blue-color-light: #5cf7f2;
-$yellow: var(--secondary-color);
+$yellow: var(--sys-tertiary);
 .badge-ball{
   display: inline-block;
   border-radius: 50%;
diff --git a/frontend/src/app/ui/admin/description-template/listing/description-template-listing.component.html b/frontend/src/app/ui/admin/description-template/listing/description-template-listing.component.html
index 2ef9385ba..5cdc64c78 100644
--- a/frontend/src/app/ui/admin/description-template/listing/description-template-listing.component.html
+++ b/frontend/src/app/ui/admin/description-template/listing/description-template-listing.component.html
@@ -6,7 +6,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto" *ngIf="canCreateNew()">
-					<button mat-button class="rounded-btn import" (click)="import()">
+					<button mat-button class="padded-shadow-btn import" (click)="import()">
 						<span class="button-text">
 							{{'DESCRIPTION-TEMPLATE-LISTING.IMPORT.UPLOAD-XML' | translate}}
 						</span>
@@ -14,7 +14,7 @@
 				</div>
 
 				<div class="col-auto" *ngIf="canCreateNew()">
-					<button mat-button class="rounded-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplate)" [routerLink]="[routerUtils.generateUrl('/description-templates/new')]">
+					<button mat-button class="padded-shadow-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplate)" [routerLink]="[routerUtils.generateUrl('/description-templates/new')]">
 						<mat-icon>add</mat-icon>
 						{{'DESCRIPTION-TEMPLATE-LISTING.CREATE-DESCRIPTION-TEMPLATE' | translate}}
 					</button>
diff --git a/frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.html b/frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.html
index 51a357427..b16663353 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,12 +42,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button  mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button  mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.APPLY-FILTERS' | 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 e8938987a..fa8d9e373 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="rounded-btn neutral" (click)="cancel()">{{ data.cancelButton }}</button>
+				<button mat-button type="button" class="padded-shadow-btn neutral" (click)="cancel()">{{ data.cancelButton }}</button>
 			</div>
 			<div class="col"></div>
 			<div class="col-auto">
-				<button mat-button color="primary" class="rounded-btn primary-inverted" type="button" (click)="confirm()" [disabled]="!hasBlueprint()">{{ data.confirmButton }}</button>
+				<button mat-button color="primary" class="padded-shadow-btn primary-inverted" 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 c9927441e..2237d2fe0 100644
--- a/frontend/src/app/ui/admin/description-types/editor/description-template-type-editor.component.html
+++ b/frontend/src/app/ui/admin/description-types/editor/description-template-type-editor.component.html
@@ -8,22 +8,22 @@
 				</div>
 
 				<div class="col-auto">
-					<button mat-button class="rounded-btn neutral" (click)="cancel()" type="button">{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-button class="padded-shadow-btn neutral" (click)="cancel()" type="button">{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto" *ngIf="canDelete">
-					<button mat-button (click)="delete()" class="rounded-btn delete-inverted" type="button">
+					<button mat-button (click)="delete()" class="padded-shadow-btn delete-inverted" type="button">
 						<mat-icon>delete</mat-icon>
 						{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.DELETE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto" *ngIf="canFinalize">
-					<button mat-button class="rounded-btn secondary" (click)="save(); finalize()">
+					<button mat-button class="padded-shadow-btn secondary" (click)="save(); finalize()">
 						<mat-icon>save</mat-icon>
 						{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.FINALIZE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto" *ngIf="canSave">
-					<button mat-button class="rounded-btn primary" (click)="save(); formSubmit()">
+					<button mat-button class="padded-shadow-btn primary" (click)="save(); formSubmit()">
 						<mat-icon>save</mat-icon>
 						{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
diff --git a/frontend/src/app/ui/admin/description-types/editor/description-template-type-editor.component.scss b/frontend/src/app/ui/admin/description-types/editor/description-template-type-editor.component.scss
index ad0844212..fa9b7b395 100644
--- a/frontend/src/app/ui/admin/description-types/editor/description-template-type-editor.component.scss
+++ b/frontend/src/app/ui/admin/description-types/editor/description-template-type-editor.component.scss
@@ -7,7 +7,7 @@
 
 .action-btn {
     border-radius: 30px;
-    background-color: var(--secondary-color);
+    background-color: var(--sys-tertiary);
     border: 1px solid transparent;
     padding-left: 2em;
     padding-right: 2em;
diff --git a/frontend/src/app/ui/admin/description-types/listing/description-template-type-listing.component.html b/frontend/src/app/ui/admin/description-types/listing/description-template-type-listing.component.html
index 9d0f05a0f..8805c8917 100644
--- a/frontend/src/app/ui/admin/description-types/listing/description-template-type-listing.component.html
+++ b/frontend/src/app/ui/admin/description-types/listing/description-template-type-listing.component.html
@@ -6,7 +6,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn secondary"
+					<button mat-button class="padded-shadow-btn secondary"
 						*ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplateType)"
 						[routerLink]="routerUtils.generateUrl(['/description-template-type/new'])">
 						<mat-icon>add</mat-icon>
diff --git a/frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.html b/frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.html
index 875f8a61c..497ac33ee 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
@@ -42,12 +42,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.html b/frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.html
index 8b7bcfb2b..4d2db3c64 100644
--- a/frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.html
@@ -42,12 +42,12 @@
 
 			<div class="row justify-content-between mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'LOCK-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'LOCK-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 e4d887413..920c5d76e 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="rounded-btn neutral" (click)="cancel()" type="button">{{'LANGUAGE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-button class="padded-shadow-btn neutral" (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="rounded-btn delete-inverted" type="button" (click)="delete()">
+					<button mat-button class="padded-shadow-btn delete-inverted" 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="rounded-btn primary" (click)="formSubmit()">
+					<button mat-button class="padded-shadow-btn primary" (click)="formSubmit()">
 						<mat-icon>save</mat-icon>
 						{{'LANGUAGE-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
diff --git a/frontend/src/app/ui/admin/language/editor/language-editor.component.scss b/frontend/src/app/ui/admin/language/editor/language-editor.component.scss
index 5a30a7324..402b5137c 100644
--- a/frontend/src/app/ui/admin/language/editor/language-editor.component.scss
+++ b/frontend/src/app/ui/admin/language/editor/language-editor.component.scss
@@ -12,7 +12,7 @@
 }
 
 ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
-	background-color: var(--primary-color);
+	background-color: var(--sys-primary);
 }
 
 ::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
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 b787a743a..773259626 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
@@ -31,12 +31,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'LANGUAGE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button cmat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button cmat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'LANGUAGE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/language/listing/language-listing.component.html b/frontend/src/app/ui/admin/language/listing/language-listing.component.html
index 91d714ed2..7dacce28b 100644
--- a/frontend/src/app/ui/admin/language/listing/language-listing.component.html
+++ b/frontend/src/app/ui/admin/language/listing/language-listing.component.html
@@ -6,7 +6,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn secondary"
+					<button mat-button class="padded-shadow-btn secondary"
 						*ngIf="authService.hasPermission(authService.permissionEnum.EditLanguage)"
 						[routerLink]="routerUtils.generateUrl(['/languages/new'])">
 						<mat-icon>add</mat-icon>
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 072e36ff7..e67d0c345 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 rounded-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 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.INDEXES.ACTIONS.CLEAR-INDEX')}}</button>
+						<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>
 					</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 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-TENANT-TOUCH')}}</button>
-						<button mat-button (click)="sendUserTouchEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-USER-TOUCH')}}</button>
-						<button mat-button (click)="sendDescriptionTouchEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-DESCRIPTION-TOUCH')}}</button>
-						<button mat-button (click)="sendPlanTouchEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-PLAN-TOUCH')}}</button>
+						<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>
 					</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 rounded-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 rounded-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 rounded-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 rounded-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 rounded-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 rounded-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 rounded-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 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-USER-ACCOUNTING-ENTRIES')}}</button>
+						<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>
 					</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 rounded-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 rounded-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 rounded-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 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-INDICATOR-POINT-ENTRY')}}</button>					
+						<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>					
 					</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 42dffad37..986ef8043 100644
--- a/frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.html
+++ b/frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.html
@@ -6,16 +6,16 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-md-auto mb-md-0 col-12 mb-2" *ngIf="canDelete">
-					<button [disabled]="isLocked" mat-button class="rounded-btn secondary" type="button" (click)="delete()">
+					<button [disabled]="isLocked" mat-button class="padded-shadow-btn secondary" type="button" (click)="delete()">
 						<mat-icon>delete</mat-icon>
 						{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.DELETE' | translate}}
 					</button>
 				</div>
 				<div class="col-md-auto col-12" *ngIf="canDownloadXML">
-					<button mat-button class="rounded-btn secondary" (click)="downloadXML()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}</button>
+					<button mat-button class="padded-shadow-btn secondary" (click)="downloadXML()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}</button>
 				</div>
 				<div *ngIf="!hideEditActions && canFinalize" class="col-auto">
-					<button mat-button class="rounded-btn secondary" (click)="finalize()" [disabled]="this.isLocked || !this.isFormValid()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
+					<button mat-button class="padded-shadow-btn secondary" (click)="finalize()" [disabled]="this.isLocked || !this.isFormValid()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
 				</div>
 			</div>
 			<form *ngIf="formGroup">
@@ -78,7 +78,7 @@
 														</mat-form-field>
 													</div>
 													<div class="col-auto mb-3" *ngIf="!hideEditActions">
-														<button mat-button class="rounded-btn secondary" type="button" (click)="addField(sectionIndex)">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
+														<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addField(sectionIndex)">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
 													</div>
 												</div>
 												<div class="row">
@@ -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="rounded-btn secondary" type="button" (click)="addDescriptionTemplate(sectionIndex)">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-DESCRIPTION-TEMPLATE' | translate}}</button>
+																<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addDescriptionTemplate(sectionIndex)">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-DESCRIPTION-TEMPLATE' | translate}}</button>
 															</div>
 														</div>
 													</div>
@@ -337,7 +337,7 @@
 							<div class="col-12">
 								<div class="row">
 									<div class="col-auto" *ngIf="!hideEditActions">
-										<button mat-button class="rounded-btn secondary" type="button" (click)="addSection()">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-SECTION' | translate}}</button>
+										<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addSection()">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-SECTION' | translate}}</button>
 										<mat-error *ngIf="formGroup.get('definition').get('sections').dirty && formGroup.get('definition').get('sections').hasError('required')">{{'PLAN-BLUEPRINT-EDITOR.SECTIONS-REQUIRED' | translate}}</mat-error>
 										<mat-error *ngIf="formGroup.get('definition').get('sections').hasError('backendError')">{{formGroup.get('definition').get('sections').getError('backendError').message}}</mat-error>
 									</div>
@@ -346,11 +346,11 @@
 						</div>
 						<div class="row mt-4">
 							<div class="col-auto">
-								<button mat-button class="rounded-btn secondary" (click)="cancel()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+								<button mat-button class="padded-shadow-btn secondary" (click)="cancel()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 							</div>
 							<div class="col"></div>
 							<div class="col-auto" *ngIf="!hideEditActions">
-								<button mat-button class="rounded-btn secondary" [disabled]="isLocked" type="submit" (click)="save(); formSubmit()">
+								<button mat-button class="padded-shadow-btn secondary" [disabled]="isLocked" type="submit" (click)="save(); formSubmit()">
 									{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.SAVE' | translate}}
 								</button>
 							</div>
diff --git a/frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.scss b/frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.scss
index b648059c0..8ff62a16e 100644
--- a/frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.scss
+++ b/frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.scss
@@ -18,7 +18,7 @@
 
 .drag-handle {
 	cursor: move; 
-	color: var(--primary-color);
+	color: var(--sys-primary);
 }
 .drag-handle-disabled {
 	cursor: auto; 
@@ -26,7 +26,7 @@
 }
 
 ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
-	background-color: var(--primary-color);
+	background-color: var(--sys-primary);
 }
 
 ::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
@@ -61,13 +61,13 @@
 	.field-delete-icon{
 		font-size: 1.2em;
 		width: 14px;
-		color: var(--primary-color);
+		color: var(--sys-primary);
 	}
 	
 	.field-delete-text{
 		font-size: 1em;
 	margin-left: 0.5em;
-	color: var(--primary-color);
+	color: var(--sys-primary);
 	}
 }
 
diff --git a/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.html b/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.html
index b1188c33a..d21162ce8 100644
--- a/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.html
@@ -41,12 +41,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'PLAN-BLUEPRINT-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'PLAN-BLUEPRINT-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</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 2a6ae3542..fb08c4aea 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="rounded-btn neutral" (click)="cancel()">{{ data.cancelButton }}</button>
+				<button mat-button type="button" class="padded-shadow-btn neutral" (click)="cancel()">{{ data.cancelButton }}</button>
 			</div>
 			<div class="col"></div>
 			<div class="col-auto">
-				<button mat-button color="primary" class="rounded-btn primary" type="button" (click)="confirm()" [disabled]="!hasBlueprint()">{{ data.confirmButton }}</button>
+				<button mat-button color="primary" class="padded-shadow-btn primary" type="button" (click)="confirm()" [disabled]="!hasBlueprint()">{{ data.confirmButton }}</button>
 			</div>
 		</div>
 	</mat-dialog-content>
diff --git a/frontend/src/app/ui/admin/plan-blueprint/listing/plan-blueprint-listing.component.html b/frontend/src/app/ui/admin/plan-blueprint/listing/plan-blueprint-listing.component.html
index c7f2217af..576b1f429 100644
--- a/frontend/src/app/ui/admin/plan-blueprint/listing/plan-blueprint-listing.component.html
+++ b/frontend/src/app/ui/admin/plan-blueprint/listing/plan-blueprint-listing.component.html
@@ -6,7 +6,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn import" (click)="import()">
+					<button mat-button class="padded-shadow-btn import" (click)="import()">
 						<span class="button-text">
 							{{'PLAN-BLUEPRINT-LISTING.IMPORT.UPLOAD-XML' | translate}}
 						</span>
@@ -14,7 +14,7 @@
 				</div>
 
 				<div class="col-auto">
-					<button mat-button class="rounded-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplateType)" [routerLink]="routerUtils.generateUrl(['/plan-blueprints/new'])">
+					<button mat-button class="padded-shadow-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplateType)" [routerLink]="routerUtils.generateUrl(['/plan-blueprints/new'])">
 						<mat-icon>add</mat-icon>
 						{{'PLAN-BLUEPRINT-LISTING.CREATE-PLAN-BLUEPRINT' | translate}}
 					</button>
diff --git a/frontend/src/app/ui/admin/plan-status/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 6b4e342d1..d541232ba 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="rounded-btn primary-inverted" (click)="cancel()" type="button">{{'PLAN-STATUS-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="cancel()" type="button">{{'PLAN-STATUS-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
                 <div class="col-auto" *ngIf="canDelete">
-                    <button mat-raised-button class="rounded-btn delete-inverted" type="button" (click)="delete()">
+                    <button mat-raised-button class="padded-shadow-btn delete-inverted" 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="rounded-btn primary" (click)="formSubmit()" [disabled]="!formGroup.touched">
+                    <button mat-button class="padded-shadow-btn primary" (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/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.html b/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.html
index 445b4849d..22d21b3a7 100644
--- a/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.html
@@ -41,12 +41,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'PLAN-BLUEPRINT-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'PLAN-BLUEPRINT-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing.component.html b/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing.component.html
index 9a0dbf8ec..2594a9aa9 100644
--- a/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing.component.html
+++ b/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing.component.html
@@ -7,7 +7,7 @@
 				</div>
 
 				<div class="col-auto">
-					<button mat-button class="rounded-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditPlanStatus)" [routerLink]="routerUtils.generateUrl(['/plan-statuses/new'])">
+					<button mat-button class="padded-shadow-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditPlanStatus)" [routerLink]="routerUtils.generateUrl(['/plan-statuses/new'])">
 						<mat-icon>add</mat-icon>
 						{{'PLAN-STATUS-LISTING.ACTIONS.CREATE-PLAN-STATUS' | translate}}
 					</button>
diff --git a/frontend/src/app/ui/admin/prefilling-source/editor/prefilling-source-editor.component.html b/frontend/src/app/ui/admin/prefilling-source/editor/prefilling-source-editor.component.html
index 084a2a2e9..4f2a18ce4 100644
--- a/frontend/src/app/ui/admin/prefilling-source/editor/prefilling-source-editor.component.html
+++ b/frontend/src/app/ui/admin/prefilling-source/editor/prefilling-source-editor.component.html
@@ -7,16 +7,16 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn neutral" (click)="cancel()" type="button">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-button class="padded-shadow-btn neutral" (click)="cancel()" type="button">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto" *ngIf="canDelete">
-					<button mat-button class="rounded-btn delete-inverted" type="button" (click)="delete()">
+					<button mat-button class="padded-shadow-btn delete-inverted" type="button" (click)="delete()">
 						<mat-icon>delete</mat-icon>
 						{{'PREFILLING-SOURCE-EDITOR.ACTIONS.DELETE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto" *ngIf="canSave">
-					<button mat-button class="rounded-btn primary" (click)="formSubmit()">
+					<button mat-button class="padded-shadow-btn primary" (click)="formSubmit()">
 						<mat-icon>save</mat-icon>
 						{{'PREFILLING-SOURCE-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
@@ -90,7 +90,7 @@
 													</div>
 												</div>
 											</div>
-											<button mat-button class="rounded-btn secondary" type="button" (click)="addFixedValiueField()" [disabled]="formGroup.disabled">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
+											<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addFixedValiueField()" [disabled]="formGroup.disabled">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
 										</div>
 									</div>
 								</div>
@@ -133,8 +133,8 @@
 								</div>
 							</div>
                             <div class="row d-flex gap-half-rem">
-                                <button mat-button class="rounded-btn secondary" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
-                                <button mat-button class="rounded-btn secondary" *ngIf="formGroup.get('definition').get('fields').value != ''" type="button" (click)="submitFields()" [disabled]="!formGroup.get('definition').get('fields').valid">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.SUBMIT-FIELDS' | translate}}</button>
+                                <button mat-button class="padded-shadow-btn secondary" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
+                                <button mat-button class="padded-shadow-btn secondary" *ngIf="formGroup.get('definition').get('fields').value != ''" type="button" (click)="submitFields()" [disabled]="!formGroup.get('definition').get('fields').valid">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.SUBMIT-FIELDS' | translate}}</button>
                             </div>
 						</div>
 					</mat-card-content>
diff --git a/frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.html b/frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.html
index 20a0eaf9e..867896af0 100644
--- a/frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.html
@@ -31,12 +31,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'PREFILLING-SOURCE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'PREFILLING-SOURCE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/prefilling-source/listing/prefilling-source-listing.component.html b/frontend/src/app/ui/admin/prefilling-source/listing/prefilling-source-listing.component.html
index 0c8c66f5c..592be3af4 100644
--- a/frontend/src/app/ui/admin/prefilling-source/listing/prefilling-source-listing.component.html
+++ b/frontend/src/app/ui/admin/prefilling-source/listing/prefilling-source-listing.component.html
@@ -7,7 +7,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn secondary"
+					<button mat-button class="padded-shadow-btn secondary"
 						*ngIf="authService.hasPermission(authService.permissionEnum.EditPrefillingSource)"
 						[routerLink]="routerUtils.generateUrl(['/prefilling-sources/new'])">
 						<mat-icon>add</mat-icon>
diff --git a/frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.html b/frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.html
index bfda24c46..8b8de0fe3 100644
--- a/frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.html
+++ b/frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.html
@@ -7,16 +7,16 @@
 				</div>
 
 				<div class="col-auto">
-					<button mat-button class="rounded-btn neutral" (click)="cancel()" type="button">{{'REFERENCE-TYPE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-button class="padded-shadow-btn neutral" (click)="cancel()" type="button">{{'REFERENCE-TYPE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto" *ngIf="canDelete">
-					<button mat-button (click)="delete()" class="rounded-btn delete-inverted" type="button">
+					<button mat-button (click)="delete()" class="padded-shadow-btn delete-inverted" type="button">
 						<mat-icon>delete</mat-icon>
 						{{'REFERENCE-TYPE-EDITOR.ACTIONS.DELETE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto" *ngIf="canSave">
-					<button mat-button class="rounded-btn primary" (click)="formSubmit()">
+					<button mat-button class="padded-shadow-btn primary" (click)="formSubmit()">
 						<mat-icon>save</mat-icon>
 						{{'REFERENCE-TYPE-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
@@ -60,7 +60,7 @@
 													<h3 class="m-0">{{'REFERENCE-TYPE-EDITOR.FIELDS.FIELDS' | translate}}</h3>
 												</div>
 												<div class="col-auto">
-													<button mat-button class="rounded-btn secondary" type="button" (click)="addField()" [disabled]="formGroup.get('definition').get('fields').disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
+													<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addField()" [disabled]="formGroup.get('definition').get('fields').disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
 												</div>
 											</div>
 										</div>
@@ -124,7 +124,7 @@
 													</div>
 												</div>
 											</div>
-											<button mat-button class="rounded-btn secondary" *ngIf="formGroup.get('definition').get('fields').value != ''" type="button" (click)="submitFields()" [disabled]="!formGroup.get('definition').get('fields').valid">{{'REFERENCE-TYPE-EDITOR.ACTIONS.SUBMIT-FIELDS' | translate}}</button>
+											<button mat-button class="padded-shadow-btn secondary" *ngIf="formGroup.get('definition').get('fields').value != ''" type="button" (click)="submitFields()" [disabled]="!formGroup.get('definition').get('fields').valid">{{'REFERENCE-TYPE-EDITOR.ACTIONS.SUBMIT-FIELDS' | translate}}</button>
 										</div>
 										<div class="col-12 mt-3 mb-3">
 											<div class="row d-flex align-items-center">
@@ -132,7 +132,7 @@
 													<h3 class="m-0">{{'REFERENCE-TYPE-EDITOR.FIELDS.SOURCES' | translate}}</h3>
 												</div>
 												<div class="col-auto">
-													<button mat-button class="rounded-btn secondary" type="button" (click)="addSource()" [disabled]="formGroup.get('definition').get('fields').disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-SOURCE' | translate}}</button>
+													<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addSource()" [disabled]="formGroup.get('definition').get('fields').disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-SOURCE' | translate}}</button>
 												</div>
 											</div>
 										</div>
diff --git a/frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.scss b/frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.scss
index b3425d986..04c029250 100644
--- a/frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.scss
+++ b/frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.scss
@@ -39,12 +39,12 @@
     .field-delete-icon{
       font-size: 1.2em;
       width: 14px;
-      color: var(--primary-color);
+      color: var(--sys-primary);
     }
     
     .field-delete-text{
       font-size: 1em;
 	  margin-left: 0.5em;
-	  color: var(--primary-color);
+	  color: var(--sys-primary);
     }
 }
\ No newline at end of file
diff --git a/frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.html b/frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.html
index 73a1c337f..af91fb9b1 100644
--- a/frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.html
@@ -31,12 +31,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'REFERENCE-TYPE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'REFERENCE-TYPE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/reference-type/listing/reference-type-listing.component.html b/frontend/src/app/ui/admin/reference-type/listing/reference-type-listing.component.html
index df4aa6963..f58a3283f 100644
--- a/frontend/src/app/ui/admin/reference-type/listing/reference-type-listing.component.html
+++ b/frontend/src/app/ui/admin/reference-type/listing/reference-type-listing.component.html
@@ -7,7 +7,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn secondary"
+					<button mat-button class="padded-shadow-btn secondary"
 						*ngIf="authService.hasPermission(authService.permissionEnum.EditReferenceType)"
 						[routerLink]="routerUtils.generateUrl(['/reference-type/new'])">
 						<mat-icon>add</mat-icon>
diff --git a/frontend/src/app/ui/admin/reference/editor/reference-editor.component.html b/frontend/src/app/ui/admin/reference/editor/reference-editor.component.html
index 5af3be997..138a9c643 100644
--- a/frontend/src/app/ui/admin/reference/editor/reference-editor.component.html
+++ b/frontend/src/app/ui/admin/reference/editor/reference-editor.component.html
@@ -6,16 +6,16 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn neutral" (click)="cancel()" type="button">{{'REFERENCE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-button class="padded-shadow-btn neutral" (click)="cancel()" type="button">{{'REFERENCE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto" *ngIf="canDelete">
-					<button mat-button class="rounded-btn delete-inverted" type="button" (click)="delete()">
+					<button mat-button class="padded-shadow-btn delete-inverted" type="button" (click)="delete()">
 						<mat-icon>delete</mat-icon>
 						{{'REFERENCE-EDITOR.ACTIONS.DELETE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto" *ngIf="canSave">
-					<button mat-button class="rounded-btn primary" (click)="formSubmit()">
+					<button mat-button class="padded-shadow-btn primary" (click)="formSubmit()">
 						<mat-icon>save</mat-icon>
 						{{'REFERENCE-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
@@ -92,7 +92,7 @@
 							<div class="col-12">
 								<h3 class="mb-4">
 									{{'REFERENCE-EDITOR.FIELDS.FIELDS' | translate}}
-									<button mat-button class="rounded-btn secondary" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'REFERENCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
+									<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'REFERENCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
 								</h3>
 								<div *ngFor="let field of formGroup.get('definition').get('fields').controls; let fieldIndex=index;" class="row mb-3">
 									<div class="col-12">
diff --git a/frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.html b/frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.html
index 03a48ee88..84397e9a4 100644
--- a/frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.html
@@ -53,12 +53,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'REFERENCE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'REFERENCE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/reference/listing/reference-listing.component.html b/frontend/src/app/ui/admin/reference/listing/reference-listing.component.html
index 82bba28cf..6e21405a5 100644
--- a/frontend/src/app/ui/admin/reference/listing/reference-listing.component.html
+++ b/frontend/src/app/ui/admin/reference/listing/reference-listing.component.html
@@ -7,7 +7,7 @@
 				<app-navigation-breadcrumb />
 			</div>
 			<div class="col-auto">
-				<button mat-button class="rounded-btn secondary"
+				<button mat-button class="padded-shadow-btn secondary"
 					*ngIf="authService.hasPermission(authService.permissionEnum.EditReference)"
 					[routerLink]="routerUtils.generateUrl(['/references/new/'])">
 					<mat-icon>add</mat-icon>
diff --git a/frontend/src/app/ui/admin/tenant-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 f4fec2ae7..17461ada0 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,11 +34,11 @@
 		</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="rounded-btn" (click)="delete()">
+				<div class="ml-auto col-auto" *ngIf="editorModel.id"><button mat-stroked-button color="primary" class="padded-shadow-btn" (click)="delete()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.RESET-TO-DEFAULT' | translate}}
 					</button>
 				</div>
-				<div class="col-auto"><button mat-flat-button color="primary" class="rounded-btn" (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/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 b31be6673..fe94a6ce5 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="rounded-btn primary-inverted" (click)="delete()">
+				<div class="ml-auto col-auto" *ngIf="editorModel.id"><button mat-button class="padded-shadow-btn primary-inverted" (click)="delete()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.RESET-TO-DEFAULT' | translate}}
 					</button>
 				</div>
-				<div class="ml-auto col-auto"><button mat-button class="rounded-btn primary" (click)="formSubmit()">
+				<div class="ml-auto col-auto"><button mat-button class="padded-shadow-btn primary" (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 997e2b38f..a7e21d910 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="rounded-btn secondary" type="button" (click)="addSource()" [disabled]="formGroup.disabled">{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.ADD-SOURCE' | translate}}</button>
+			<button mat-button class="padded-shadow-btn secondary" 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="rounded-btn primary-inverted" (click)="delete()">
+				<div class="ml-auto col-auto" *ngIf="editorModel.id"><button mat-button class="padded-shadow-btn primary-inverted" (click)="delete()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.RESET-TO-DEFAULT' | translate}}
 					</button>
 				</div>
-				<div class="ml-auto col-auto"><button mat-button class="rounded-btn primary" (click)="formSubmit()">
+				<div class="ml-auto col-auto"><button mat-button class="padded-shadow-btn primary" (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 f1190dcfd..f7a42bdc1 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="rounded-btn secondary" type="button" (click)="addStatusTransition()" [disabled]="formGroup.disabled">{{'WORKFLOW-EDITOR.ACTIONS.ADD-STATUS-TRANSITION' | translate}}</button>
+            <button mat-button class="padded-shadow-btn secondary" 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="rounded-btn primary-inverted" (click)="delete()">
+                        <button mat-button class="padded-shadow-btn primary-inverted" (click)="delete()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.RESET-TO-DEFAULT' | translate}}
 					    </button>
 				    </div>
                 }
                 @if(canSave){
                     <div class="col-auto">
-                        <button mat-button class="rounded-btn primary" (click)="formSubmit()">
+                        <button mat-button class="padded-shadow-btn primary" (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 1b2d89e70..fa0af0744 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="rounded-btn secondary" type="button" (click)="addSource()" [disabled]="formGroup.disabled">{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.ADD-SOURCE' | translate}}</button>
+			<button mat-button class="padded-shadow-btn secondary" 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="rounded-btn primary-inverted" (click)="delete()">
+				<div class="col-auto" *ngIf="editorModel.id"><button mat-button class="padded-shadow-btn primary-inverted" (click)="delete()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.RESET-TO-DEFAULT' | translate}}
 					</button>
 				</div>
-				<div class="col-auto"><button mat-button class="rounded-btn primary" (click)="formSubmit()">
+				<div class="col-auto"><button mat-button class="padded-shadow-btn primary" (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 cd2d05c54..c41941308 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
@@ -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="rounded-btn primary-inverted" (click)="delete()">
+				<div class="col-auto" *ngIf="editorModel.id"><button mat-button class="padded-shadow-btn primary-inverted" (click)="delete()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.RESET-TO-DEFAULT' | translate}}
 					</button>
 				</div>
-				<div class="col-auto"><button mat-button class="rounded-btn primary" (click)="formSubmit()">
+				<div class="col-auto"><button mat-button class="padded-shadow-btn primary" (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 3c06ffd79..1f6b21b9a 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="rounded-btn secondary" type="button" (click)="addStatusTransition()" [disabled]="formGroup.disabled">{{'WORKFLOW-EDITOR.ACTIONS.ADD-STATUS-TRANSITION' | translate}}</button>
+            <button mat-button class="padded-shadow-btn secondary" 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="rounded-btn primary-inverted" (click)="delete()">
+                        <button mat-button class="padded-shadow-btn primary-inverted" (click)="delete()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.RESET-TO-DEFAULT' | translate}}
 					    </button>
 				    </div>
                 }
                 @if(canSave){
                     <div class="col-auto">
-                        <button mat-button class="rounded-btn primary" (click)="formSubmit()">
+                        <button mat-button class="padded-shadow-btn primary" (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 6bbd3e802..4f1a39fc7 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="rounded-btn neutral" (click)="cancel()" type="button">{{'TENANT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-button class="padded-shadow-btn neutral" (click)="cancel()" type="button">{{'TENANT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto" *ngIf="!isNew">
-					<button mat-button class="rounded-btn delete-inverted" type="button" (click)="delete()">
+					<button mat-button class="padded-shadow-btn delete-inverted" 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="rounded-btn primary" (click)="formSubmit()">
+					<button mat-button class="padded-shadow-btn primary" (click)="formSubmit()">
 						<mat-icon>save</mat-icon>
 						{{'TENANT-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
diff --git a/frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.html b/frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.html
index 285701d9b..583b101da 100644
--- a/frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.html
@@ -31,12 +31,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'TENANT-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'TENANT-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/tenant/listing/tenant-listing.component.html b/frontend/src/app/ui/admin/tenant/listing/tenant-listing.component.html
index 50ec9dbbd..64f170e88 100644
--- a/frontend/src/app/ui/admin/tenant/listing/tenant-listing.component.html
+++ b/frontend/src/app/ui/admin/tenant/listing/tenant-listing.component.html
@@ -8,7 +8,7 @@
 
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn secondary"
+					<button mat-button class="padded-shadow-btn secondary"
 						*ngIf="authService.hasPermission(authService.permissionEnum.EditTenant)"
 						[routerLink]="routerUtils.generateUrl(['/tenants/new'])">
 						<mat-icon>add</mat-icon>
diff --git a/frontend/src/app/ui/admin/usage-limit/editor/usage-limit-editor.component.html b/frontend/src/app/ui/admin/usage-limit/editor/usage-limit-editor.component.html
index df6f0ca90..a66145f17 100644
--- a/frontend/src/app/ui/admin/usage-limit/editor/usage-limit-editor.component.html
+++ b/frontend/src/app/ui/admin/usage-limit/editor/usage-limit-editor.component.html
@@ -6,16 +6,16 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn neutral" (click)="cancel()" type="button">{{'USAGE-LIMIT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-button class="padded-shadow-btn neutral" (click)="cancel()" type="button">{{'USAGE-LIMIT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto" *ngIf="canDelete">
-					<button mat-button class="rounded-btn delete-inverted" type="button" (click)="delete()">
+					<button mat-button class="padded-shadow-btn delete-inverted" type="button" (click)="delete()">
 						<mat-icon>delete</mat-icon>
 						{{'USAGE-LIMIT-EDITOR.ACTIONS.DELETE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto" *ngIf="canSave">
-					<button mat-button class="rounded-btn primary" (click)="formSubmit()">
+					<button mat-button class="padded-shadow-btn primary" (click)="formSubmit()">
 						<mat-icon>save</mat-icon>
 						{{'USAGE-LIMIT-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
diff --git a/frontend/src/app/ui/admin/usage-limit/listing/filters/usage-limit-listing-filters.component.html b/frontend/src/app/ui/admin/usage-limit/listing/filters/usage-limit-listing-filters.component.html
index 796a79c3f..ac80a1629 100644
--- a/frontend/src/app/ui/admin/usage-limit/listing/filters/usage-limit-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/usage-limit/listing/filters/usage-limit-listing-filters.component.html
@@ -42,12 +42,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'USAGE-LIMIT-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'USAGE-LIMIT-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/app/ui/admin/usage-limit/listing/usage-limit-listing.component.html b/frontend/src/app/ui/admin/usage-limit/listing/usage-limit-listing.component.html
index 10813b4dc..ebcc19c21 100644
--- a/frontend/src/app/ui/admin/usage-limit/listing/usage-limit-listing.component.html
+++ b/frontend/src/app/ui/admin/usage-limit/listing/usage-limit-listing.component.html
@@ -8,7 +8,7 @@
 
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn secondary"
+					<button mat-button class="padded-shadow-btn secondary"
 						*ngIf="authService.hasPermission(authService.permissionEnum.EditUsageLimit)"
 						[routerLink]="routerUtils.generateUrl(['/usage-limits/new'])">
 						<mat-icon>add</mat-icon>
diff --git a/frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.html b/frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.html
index 8248bbeaf..a772da1a1 100644
--- a/frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.html
@@ -47,12 +47,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger?.closeMenu()">
 						{{'USER-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'USER-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
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 ba7699a1d..dc5d05d5e 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="rounded-btn primary-inverted primary-inverted-hover">{{'USER-INVITE-TO-TENANT-DIALOG.ACTIONS.INVITE' | translate}}</button>
+			<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>
 			<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 18fe72079..79d8c0508 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,12 +7,12 @@
 
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary" (click)="invite()" *ngIf="hasTenantAdminMode">
+					<button mat-button class="padded-shadow-btn primary" (click)="invite()" *ngIf="hasTenantAdminMode">
 						{{'USER-LISTING.ACTIONS.INVITE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn secondary" (click)="export()" *ngIf="authService.hasPermission(authService.permissionEnum.ExportUsers)">
+					<button mat-button class="padded-shadow-btn secondary" (click)="export()" *ngIf="authService.hasPermission(authService.permissionEnum.ExportUsers)">
 						<mat-icon>download</mat-icon>
 						{{'USER-LISTING.ACTIONS.EXPORT' | translate}}
 					</button>
diff --git a/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html b/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html
index 27bdeb453..b43f5b15e 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="rounded-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-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>
 					</div>
 					<div class="col-auto pl-1">
-						<button type="button" mat-button class="rounded-btn primary-inverted mt-2" (click)="close()">{{ 'ANNOTATION-DIALOG.THREADS.CANCEL' | translate }}</button>
+						<button type="button" mat-button class="padded-shadow-btn primary-inverted mt-2" (click)="close()">{{ 'ANNOTATION-DIALOG.THREADS.CANCEL' | translate }}</button>
 					</div>
 				</div>	
 			</form>
diff --git a/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss b/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss
index a97f91207..ca1423415 100644
--- a/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss
+++ b/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss
@@ -60,12 +60,12 @@ $mat-card-header-size: 40px !default;
 }
 
 .warn {
-	color: var(--warning-color);
+	color: var(--sys-error);
 }
 
 .comments-count {
-	background-color: var(--primary-color) !important;// #129D99;
-	color: var(--primary-text) !important;
+	background-color: var(--sys-primary) !important;// #129D99;
+	color: var(--sys-on-primary) !important;
 	min-width: 2rem;
 	border-radius: 15px;
 }
@@ -120,7 +120,7 @@ $mat-card-header-size: 40px !default;
 .action-button {
 	font-weight: 400;
 	border-radius: 20px;
-	color: var(--primary-color);
+	color: var(--sys-primary);
 	font-weight: 500;
 	
 	&.active-action {
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 444ad5c3b..80010480e 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="rounded-btn primary" (click)="onConfirm()">{{ 'MERGE-ACCOUNT.ACTIONS.CONFIRM' | translate }}</button>
+            <button type="button" mat-button class="padded-shadow-btn primary" (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 7f193c91d..7049318a6 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="rounded-btn primary" (click)="onConfirm()">{{ 'UNLINK-ACCOUNT.ACTIONS.CONFIRM' | translate }}</button>
+            <button type="button" mat-button class="padded-shadow-btn primary" (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 0d3c4b00b..b1db2f7de 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="rounded-btn neutral" (click)="cancel()">{{'CONTACT.SUPPORT.CANCEL' | translate}}</button></div>
-			<div class="col-auto"><button mat-button type="button" class="rounded-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-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>
 	</div>
 </form>
diff --git a/frontend/src/app/ui/dashboard/dashboard.component.html b/frontend/src/app/ui/dashboard/dashboard.component.html
index 17c52f220..593bc8c29 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="rounded-btn primary new-releases-btn" href="{{this.configurationService.newReleaseNotificationLink}}" target="_blank">
+										<a mat-button class="padded-shadow-btn primary new-releases-btn" href="{{this.configurationService.newReleaseNotificationLink}}" target="_blank">
 											{{'NEW-RELEASE-NOTIFICATION.ACTIONS.LEARN-MORE' | translate}}
 										</a>
 									</div>
@@ -45,12 +45,12 @@
 								<div class="row d-flex align-items-center">
 									<div *ngIf="!this.hasPlans()" class="col-auto p-0 add-description-btn d-flex">
 										<div class="pr-2">
-											<button type="button" color="accent" mat-flat-button class="align-self-center rounded-btn" (click)="openNewPlanDialog()">{{'DASHBOARD.START-YOUR-FIRST-PLAN' | translate}}</button>
+											<button type="button" color="accent" mat-flat-button class="align-self-center padded-shadow-btn" (click)="openNewPlanDialog()">{{'DASHBOARD.START-YOUR-FIRST-PLAN' | translate}}</button>
 										</div>
 									</div>
 									<div *ngIf="this.hasPlans()" class="col-auto p-0 new-description-tour add-description-btn col-auto d-flex">
 										<div class="pr-2">
-											<button mat-flat-button color="accent" type="button" class="align-self-center rounded-btn" (click)="addNewDescription()">{{'DASHBOARD.ACTIONS.ADD-DESCRIPTION' | translate}}</button>
+											<button mat-flat-button color="accent" type="button" class="align-self-center padded-shadow-btn" (click)="addNewDescription()">{{'DASHBOARD.ACTIONS.ADD-DESCRIPTION' | translate}}</button>
 										</div>
 									</div>
 									<span class="col-auto ml-auto">
diff --git a/frontend/src/app/ui/dashboard/dashboard.component.scss b/frontend/src/app/ui/dashboard/dashboard.component.scss
index 80439ced0..2b3a815e6 100644
--- a/frontend/src/app/ui/dashboard/dashboard.component.scss
+++ b/frontend/src/app/ui/dashboard/dashboard.component.scss
@@ -88,7 +88,7 @@
 	letter-spacing: 0px;
 	color: var(--link-color);
     &:hover {
-        color: var(--primary-color)
+        color: var(--sys-primary)
     }
 	opacity: 1;
 }
@@ -143,12 +143,12 @@ input[type="text"] {
 }
 
 .plan-label {
-	background: var(--primary-color) 0% 0% no-repeat padding-box;
+	background: var(--sys-primary) 0% 0% no-repeat padding-box;
 	border-radius: 4px 0px;
 	opacity: 1;
 	min-width: 67px;
 	height: 37px;
-	color: var(--primary-text);
+	color: var(--sys-on-primary);
 	line-height: 2.4;
 }
 
@@ -185,7 +185,7 @@ input[type="text"] {
 
 .description-card-actions a:hover,
 .plan-card-actions a:hover {
-	color: var(--primary-color) !important;
+	color: var(--sys-primary) !important;
 }
 
 .plan-description-descriptions-title {
@@ -206,7 +206,7 @@ input[type="text"] {
 }
 
 .show-more:hover {
-	color: var(--primary-color) !important;
+	color: var(--sys-primary) !important;
 }
 
 .draft {
@@ -230,7 +230,7 @@ input[type="text"] {
 }
 
 .add-description {
-	background: var(--secondary-color) 0% 0% no-repeat padding-box;
+	background: var(--sys-tertiary) 0% 0% no-repeat padding-box;
 	box-shadow: 0px 3px 6px #1e202029;
 	border-radius: 30px;
 	opacity: 1;
@@ -272,7 +272,7 @@ mat-tab-group.my-mat-tab .mat-mdc-tab-header .mat-mdc-tab-label-container .mat-m
 
 :host ::ng-deep .mat-tab-group.mat-primary .mat-ink-bar,
 .mat-tab-nav-bar.mat-primary .mat-ink-bar {
-	background: var(--primary-color);
+	background: var(--sys-primary);
 	height: 5px;
 }
 
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 92caaa812..503a6b1b5 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,12 +39,12 @@
 
 			<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="rounded-btn secondary" (click)="addDescription()">{{'DASHBOARD.ACTIONS.ADD-DESCRIPTION' | translate}}</button>
+						<button mat-button type="button" class="padded-shadow-btn secondary" (click)="addDescription()">{{'DASHBOARD.ACTIONS.ADD-DESCRIPTION' | translate}}</button>
 				</div>
 			</div>
 
 			<div *ngIf="listingItems && listingItems.length > 0 && this.lookup.page.offset < currentPage*pageSize" class="d-flex justify-content-center pb-1">
-				<button type="button" mat-button class="rounded-btn load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
+				<button type="button" mat-button class="padded-shadow-btn load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
 			</div>
 		</div>
 	</div>
diff --git a/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.scss b/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.scss
index c0e1f1799..b9b967862 100644
--- a/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.scss
+++ b/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.scss
@@ -14,12 +14,12 @@ input[type="text"] {
 }
 
 .plan-label {
-	background: var(--primary-color) 0% 0% no-repeat padding-box;
+	background: var(--sys-primary) 0% 0% no-repeat padding-box;
 	border-radius: 4px 0px;
 	opacity: 1;
 	min-width: 67px;
 	height: 37px;
-	color: var(--primary-text);
+	color: var(--sys-on-primary);
 	line-height: 2.4;
 }
 
@@ -54,7 +54,7 @@ input[type="text"] {
 
 .description-card-actions a:hover,
 .plan-card-actions a:hover {
-	color: var(--primary-color) !important;
+	color: var(--sys-primary) !important;
 }
 
 .plan-description-descriptions-title {
@@ -75,7 +75,7 @@ input[type="text"] {
 }
 
 .show-more:hover {
-	color: var(--primary-color) !important;
+	color: var(--sys-primary) !important;
 }
 
 .draft {
@@ -93,7 +93,7 @@ input[type="text"] {
 }
 
 .search-form mat-icon {
-	color: var(--primary-color);
+	color: var(--sys-primary);
 }
 
 ::ng-deep .search-form .mat-form-field-wrapper {
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 d475ad4d3..ddb36b5af 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="rounded-btn neutral" type="button" (click)="cancel()">{{ data.cancelButton }}</button></div>
-		<div class="col-auto"><button mat-button class="rounded-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-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>
 </div>
diff --git a/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.scss b/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.scss
index fd50bc6ff..821ca234c 100644
--- a/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.scss
+++ b/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.scss
@@ -50,7 +50,7 @@
 	}
 
 	.input-btn :hover {
-		color: var(--primary-color) !important;
+		color: var(--sys-primary) !important;
 	}
 
 	.plan-link {
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 1da1b173c..19c18cb62 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="rounded-btn primary-inverted" (click)="cancel()"><span>{{ 'DESCRIPTION-EDITOR.DEPRECATED-DESCRIPTION-TEMPLATE.ACTIONS.CANCEL' | translate}}</span></button>
+    <button mat-button type="button" class="padded-shadow-btn primary-inverted" (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="rounded-btn primary" (click)="update()"><span>{{ 'DESCRIPTION-EDITOR.DEPRECATED-DESCRIPTION-TEMPLATE.ACTIONS.UPDATE' | translate}}</span></button>
+    <button mat-button type="button" class="padded-shadow-btn primary" (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 17bcb9417..8ed3d6595 100644
--- a/frontend/src/app/ui/description/editor/description-editor.component.html
+++ b/frontend/src/app/ui/description/editor/description-editor.component.html
@@ -30,7 +30,7 @@
 								<div class="row h-100">
 
 									<div class="col-auto d-flex align-items-center">
-										<button *ngIf="formGroup.get('id').value" [disabled]="isDirty()" [matTooltipDisabled]="!isDirty()" mat-button class="rounded-btn neutral" type="button" [matMenuTriggerFor]="exportMenu" (click)="$event.stopPropagation();" [matTooltip]="'DESCRIPTION-EDITOR.ACTIONS.EXPORT.CAN-NOT-EXPORT' | translate">
+										<button mat-raised-button color="accent" *ngIf="formGroup.get('id').value" [disabled]="isDirty()" [matTooltipDisabled]="!isDirty()" mat-button class="padded-shadow-btn" type="button" [matMenuTriggerFor]="exportMenu" (click)="$event.stopPropagation();" [matTooltip]="'DESCRIPTION-EDITOR.ACTIONS.EXPORT.CAN-NOT-EXPORT' | translate">
 											{{ 'DESCRIPTION-EDITOR.ACTIONS.EXPORT.EXPORT' | translate }}
 											<mat-icon [disabled]="isDirty()" style="width: 14px;" iconPositionEnd>expand_more</mat-icon>
 										</button>
@@ -46,12 +46,12 @@
 									<mat-divider *ngIf="formGroup.get('id').value && canEdit && (!viewOnly || (!isLocked && canEdit && !viewOnly) || isLocked || (hasReversableStatus() && !isLocked))" [vertical]="true" class="ml-2 mr-2"></mat-divider>
 
 									<div *ngIf="!isPristine() && !viewOnly" class="col-auto d-flex align-items-center pr-0">
-										<button [disabled]="saving" type="button" mat-button class="rounded-btn description-discard-btn" (click)="discardChanges()">
+										<button mat-raised-button color="accent" [disabled]="saving" type="button" mat-button class="padded-shadow-btn description-discard-btn" (click)="discardChanges()">
 											{{'DESCRIPTION-EDITOR.ACTIONS.DISCARD.DISCARD' | translate}}
 										</button>
 									</div>
 									<div class="col-auto d-flex align-items-center">
-										<button [disabled]="saving" *ngIf="canEdit && !isLocked && !viewOnly && hasReversableStatus() == false" mat-button class="rounded-btn neutral mr-2" type="button">
+										<button mat-raised-button color="accent" [disabled]="saving" *ngIf="canEdit && !isLocked && !viewOnly && hasReversableStatus() == false" mat-button class="padded-shadow-btn mr-2" type="button">
 											<span class="d-flex flex-row row">
 												<span (click)="!saving?formSubmit():null" class="col">{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE' | translate }}</span>
 												<mat-divider [vertical]="true"></mat-divider>
@@ -70,9 +70,9 @@
 											<button [disabled]="saving" mat-menu-item (click)="saveAndClose()" type="button">{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CLOSE' | translate }}</button>
 											<button [disabled]="saving" mat-menu-item (click)="saveAndContinue()" type="button">{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CONTINUE' | translate }}</button>
 										</mat-menu>
-										<button [disabled]="saving" *ngIf="canEdit && !isLocked && !viewOnly && hasReversableStatus() == false && canEdit" mat-button class="rounded-btn neutral mr-2" type="button" (click)="finalize()">{{ 'DESCRIPTION-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
-										<button [disabled]="saving" *ngIf="isLocked" mat-button disabled class="rounded-btn neutral cursor-default" type="button">{{ 'PLAN-OVERVIEW.LOCKED' | translate}}</button>
-										<button [disabled]="saving" *ngIf="hasReversableStatus() && !isLocked && canEdit" mat-button class="rounded-btn neutral mr-2" (click)="reverse()" type="button">{{ 'DESCRIPTION-EDITOR.ACTIONS.REVERSE' | translate }}</button>
+										<button mat-raised-button color="accent" [disabled]="saving" *ngIf="canEdit && !isLocked && !viewOnly && hasReversableStatus() == false && canEdit" mat-button class="padded-shadow-btn mr-2" type="button" (click)="finalize()">{{ 'DESCRIPTION-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
+										<button mat-raised-button color="accent" [disabled]="saving" *ngIf="isLocked" mat-button disabled class="padded-shadow-btn cursor-default" type="button">{{ 'PLAN-OVERVIEW.LOCKED' | translate}}</button>
+										<button mat-raised-button color="accent" [disabled]="saving" *ngIf="hasReversableStatus() && !isLocked && canEdit" mat-button class="padded-shadow-btn mr-2" (click)="reverse()" type="button">{{ 'DESCRIPTION-EDITOR.ACTIONS.REVERSE' | translate }}</button>
 									</div>
 								</div>
 							</div>
@@ -134,7 +134,7 @@
 							<div class="col-12">
 								<div class="row mt-3 stepper-actions justify-content-center">
 									<div class="col-auto mb-1">
-										<button mat-button type="button" class="rounded-btn neutral stepper mr-2" [disabled]="reachedBase" (click)="previousStep()">
+										<button mat-stroked-button color="accent" type="button" class="padded-shadow-btn neutral stepper mr-2" [disabled]="reachedBase" (click)="previousStep()">
 											<span class="material-icons">chevron_left</span>
 											<div>{{'DESCRIPTION-EDITOR.TOC.PREVIOUS' | translate}}</div>
 										</button>
@@ -142,12 +142,12 @@
                                     <div class="col-auto mb-1">
                                         @if(reachedLast){
                                             @if(!isLocked && formGroup.get('descriptionTemplateId').value && !viewOnly) {
-                                                <button mat-button [disabled]="saving" (click)="saveAndClose()" mat-button type="button" class="rounded-btn secondary ml-auto">
+                                                <button mat-flat-button color="accent" [disabled]="saving" (click)="saveAndClose()" type="button" class="padded-shadow-btn ml-auto">
                                                     {{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CLOSE' | translate }}
                                                 </button>
                                             }
                                         }@else{
-                                            <button mat-button type="button" class="rounded-btn secondary stepper ml-auto" (click)="nextStep()" [disabled]="!formGroup.get('descriptionTemplateId').value">
+                                            <button mat-flat-button color="accent"  type="button" class="padded-shadow-btn stepper ml-auto" (click)="nextStep()" [disabled]="!formGroup.get('descriptionTemplateId').value">
                                                 <div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div>
                                                 <span class="material-icons" iconPositionEnd>chevron_right</span>
                                             </button>
diff --git a/frontend/src/app/ui/description/editor/description-editor.component.scss b/frontend/src/app/ui/description/editor/description-editor.component.scss
index 696693fa1..e793eeaba 100644
--- a/frontend/src/app/ui/description/editor/description-editor.component.scss
+++ b/frontend/src/app/ui/description/editor/description-editor.component.scss
@@ -79,7 +79,7 @@
   }
 
   .more-icon :hover {
-    color: var(--primary-color);
+    color: var(--sys-primary);
   }
 
   .new-description {
@@ -94,7 +94,7 @@
   .description-editor-header {
     height: 113px;
     min-height: fit-content;
-    background: var(--secondary-color) 0% 0% no-repeat padding-box;
+    background: var(--sys-tertiary) 0% 0% no-repeat padding-box;
     box-shadow: 0px 3px 6px #00000029;
     padding: 0.6rem;
     margin: 30px 0px 0px 0px;
@@ -156,8 +156,8 @@
     text-align: left;
     font-size: 1rem;
     font-weight: 700;
-    background-color: var(--primary-color);
-    color: var(--primary-text);
+    background-color: var(--sys-primary);
+    color: var(--sys-on-primary);
     border-radius: 6px;
     padding: 0 0.4rem;
   }
@@ -170,8 +170,8 @@
   .plan-label {
     min-width: 67px;
     height: 37px;
-    background: var(--primary-color) 0% 0% no-repeat padding-box;
-    color: var(--primary-text);
+    background: var(--sys-primary) 0% 0% no-repeat padding-box;
+    color: var(--sys-on-primary);
     border-radius: 4px;
     opacity: 1;
     display: flex;
@@ -194,7 +194,7 @@
     opacity: 0.75;
   }
   .open-in-new-icon:hover {
-    color: var(--primary-color);
+    color: var(--sys-primary);
   }
 
   .description-stepper {
@@ -273,8 +273,8 @@
       width: 100%;
       height: 27px;
       line-height: 27px;
-      background-color: var(--secondary-color);
-      color: var(--secondary-text);
+      background-color: var(--sys-tertiary);
+      color: var(--sys-on-tertiary);
       border-radius: 4px;
       font-weight: 400;
       font-size: 14px;
@@ -330,15 +330,15 @@
   }
 
   .next {
-	background: var(--primary-color) 0% 0% no-repeat padding-box;
-	color: var(--primary-text);
+	background: var(--sys-primary) 0% 0% no-repeat padding-box;
+	color: var(--sys-on-primary);
 	box-shadow: 0px 3px 6px #1e202029;
 	font-weight: 400;
 	cursor: pointer;
   }
 
   .description-next {
-	background: var(--secondary-color) 0% 0% no-repeat padding-box;
+	background: var(--sys-tertiary) 0% 0% no-repeat padding-box;
 	color: var(--dark-gray);
 	box-shadow: 0px 3px 6px #1e202029;
 	font-weight: 700;
@@ -387,3 +387,8 @@ mat-icon.size-18 {
         height: fit-content;
     }
 }
+
+
+.mat-mdc-raised-button:not(:disabled) {
+    color: #000000;
+}
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 5036c6f91..71d67ee10 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="rounded-btn primary-inverted" (click)="cancel()">{{'DESCRIPTION-EDITOR.ACTIONS.CANCEL' | translate}}</button></div>
-	<div class="col-auto"><button mat-button class="rounded-btn primary" [disabled]="!propertiesFormGroup.get('fields').valid" (click)="save()">{{'DESCRIPTION-EDITOR.ACTIONS.SAVE' | translate}}</button></div>
+	<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>
diff --git a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.scss b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.scss
index 7011c1a92..68f73391f 100644
--- a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.scss
+++ b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.scss
@@ -23,7 +23,7 @@ h6 {
 
 .more { //TODO mchouliara link
 	text-decoration: underline;
-	color: var(--secondary-color);
+	color: var(--sys-tertiary);
 	cursor: pointer;
 	font-size: 1rem;
 	font-weight: 400;
@@ -50,7 +50,7 @@ h6 {
     color: var(--dark-gray);
   }
 	50% {
-		color: var(--primary-color);
+		color: var(--sys-primary);
 	}
   100% {
     color: var(--dark-gray);
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 7e78dc749..47743f0b4 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="rounded-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-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>
 				<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/description-form/components/form-section/form-section.component.scss b/frontend/src/app/ui/description/editor/description-form/components/form-section/form-section.component.scss
index 6bbccd236..b20541c3b 100644
--- a/frontend/src/app/ui/description/editor/description-form/components/form-section/form-section.component.scss
+++ b/frontend/src/app/ui/description/editor/description-form/components/form-section/form-section.component.scss
@@ -7,7 +7,7 @@
 	.addOneFieldButton {
 		margin-top: -15px;
 		margin-left: -11px;
-		color: var(--primary-color);
+		color: var(--sys-primary);
 	}
 	.panel-title,
 	.panel-desc {
diff --git a/frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.scss b/frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.scss
index ef9efdf90..7945047be 100644
--- a/frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.scss
+++ b/frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.scss
@@ -14,7 +14,7 @@
 
 //Progress bar
 ::ng-deep .mdc-linear-progress__bar-inner {
-	--mdc-linear-progress-active-indicator-color: var(--primary-color) !important;
+	--mdc-linear-progress-active-indicator-color: var(--sys-primary) !important;
 	border-radius: 20px !important;
 }
 
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 a3c7c8e90..877576574 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="rounded-btn neutral" (click)="manuallySelected()">{{'NEW-DESCRIPTION-DIALOG.ACTIONS.MANUALLY' | translate}}</button>
+				<button mat-button type="button" class="padded-shadow-btn neutral" (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="rounded-btn secondary" (click)="prefillSelected = true">{{'NEW-DESCRIPTION-DIALOG.ACTIONS.PREFILL' | translate}}</button>
+				<button mat-button type="button" class="padded-shadow-btn secondary" (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="rounded-btn secondary ml-auto" [disabled]="prefillForm.get('descriptionTemplateId').invalid" (click)="manuallySelected()">{{'NEW-DESCRIPTION-DIALOG.ACTIONS.NEXT' | translate}}</button>
+			<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>
 		</div>
 	</div>
 	<ng-template #goToNextWithPrefillingSources>
 		<div *ngIf="prefillSelected">
 			<div class="col-auto d-flex pb-4 pt-2">
-				<button mat-button type="button" class="rounded-btn secondary ml-auto" [disabled]="prefillForm.invalid" (click)="next()">{{'NEW-DESCRIPTION-DIALOG.ACTIONS.NEXT' | translate}}</button>
+				<button mat-button type="button" class="padded-shadow-btn secondary 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/editor/new-description/new-description.component.scss b/frontend/src/app/ui/description/editor/new-description/new-description.component.scss
index 036b2ce13..6f94bf1d3 100644
--- a/frontend/src/app/ui/description/editor/new-description/new-description.component.scss
+++ b/frontend/src/app/ui/description/editor/new-description/new-description.component.scss
@@ -3,8 +3,8 @@
 		display: flex;
 		width: 100%;
 		height: 60px;
-		background-color: var(--secondary-color);
-		color: var(--secondary-text);
+		background-color: var(--sys-tertiary);
+		color: var(--sys-on-tertiary);
 		font-size: 1.25rem;
 	}
 
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 49a9747e4..9e55d07d8 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="rounded-btn secondary align-self-center" (click)="addNewDescription()">
+						<button mat-button class="padded-shadow-btn secondary 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">
@@ -18,14 +18,14 @@
 			</div>
 			<div *ngIf="!isPublic" class="ml-auto">
 				<div class="col-auto">
-					<button mat-button class="rounded-btn secondary align-self-center" (click)="addNewDescription()" [disabled]="isLoading">
+					<button mat-flat-button color="accent" class="padded-shadow-btn align-self-center" (click)="addNewDescription()" [disabled]="isLoading">
 						{{'DESCRIPTION-LISTING.ACTIONS.ADD-DESCRIPTION' | translate}}
 					</button>
 				</div>
 			</div>
 			<div *ngIf="(isLoading || hasListingItems || hasFilters) && !isPublic"
 				class="filter-btn" [style.right]="dialog.getDialogById('filters') ? '446px' : '0px'" [style.width]="listingItems.length > 2 ? '57px' : '37px'" (click)="openFiltersDialog()">
-				<button mat-raised-button class="p-0" [matBadge]="filtersCount" [matBadgeHidden]="filtersCount === 0" matBadgePosition="before" [attr.aria-label]="'ALT-TEXT.OPEN-FILTERS' | translate">
+				<button mat-raised-button class="p-0 squared-btn" [matBadge]="filtersCount" [matBadgeHidden]="filtersCount === 0" matBadgePosition="before" [attr.aria-label]="'ALT-TEXT.OPEN-FILTERS' | translate">
 					<mat-icon class="mr-4 filter-icon">filter_alt</mat-icon>
 				</button>
 			</div>
@@ -48,7 +48,7 @@
 								</mat-select>
 							</mat-form-field>
 						</div>
-						<div class="col-auto order-2 order-xl-3 mb-1 pl-0">
+						<div class="col-auto order-2 order-xl-3 mb-1 pl-0 mt-2">
 							<button mat-icon-button (click)="toggleSortDirection()" [matTooltip]="sortingTooltipText" [attr.aria-label]="sortingTooltipText">
 								<mat-icon *ngIf="isAscending">keyboard_double_arrow_up</mat-icon>
 								<mat-icon *ngIf="isDescending">keyboard_double_arrow_down</mat-icon>
@@ -81,7 +81,7 @@
                         ></app-description-listing-item-component>
                     </div>
                     <div *ngIf="hasListingItems && this.lookup?.page?.offset < this.totalCount - 1 && this.pageSize < this.totalCount - 1" class="d-flex justify-content-center pb-1">
-                        <button mat-button type="button" class="rounded-btn load-more" (click)="loadMore()">{{'DESCRIPTION-LISTING.ACTIONS.LOAD-MORE' | translate}}</button>
+                        <button mat-button type="button" class="padded-shadow-btn load-more" (click)="loadMore()">{{'DESCRIPTION-LISTING.ACTIONS.LOAD-MORE' | translate}}</button>
                     </div>
                 </div>
                 <div *ngIf="!hasListingItems && hasFilters" class="col-md-12 d-flex justify-content-center pt-4 mt-4 mb-4 pb-4">
diff --git a/frontend/src/app/ui/description/listing/description-listing.component.scss b/frontend/src/app/ui/description/listing/description-listing.component.scss
index b82ab4ad9..545936284 100644
--- a/frontend/src/app/ui/description/listing/description-listing.component.scss
+++ b/frontend/src/app/ui/description/listing/description-listing.component.scss
@@ -82,21 +82,23 @@
 }
 
 .filter-btn {
-  position: fixed;
-  right: 0px;
-  z-index: 100;
-  width: 37px;
-
-  .filter-icon {
-    width: 1.5rem;
-    height: 1.5rem;
-    font-size: 1.5rem;
-  }
+    position: fixed;
+    right: 0px;
+    z-index: 100;
+    width: 37px;
+    transition: 0.3s ease-in-out;
+    -webkit-transition: 0.3s ease-in-out;
+    -moz-transition: 0.3s ease-in-out;
+    .filter-icon {
+        width: 1.5rem;
+        height: 1.5rem;
+        font-size: 1.5rem;
+    }
 }
 
 .filter-btn button {
   color: white;
-  background-color: var(--primary-color);
+  background-color: var(--sys-primary);
   width: 37px;
   height: 45px;
 }
@@ -108,7 +110,7 @@
   color: var(--link-color);
   cursor: pointer;
   &:hover{
-    color: var(--primary-color);
+    color: var(--sys-primary);
   }
 }
 
@@ -118,7 +120,7 @@
 }
 
 .search-form mat-icon {
-  color: var(--primary-color);
+  color: var(--sys-primary);
 }
 
 .empty-list {
@@ -131,7 +133,7 @@
 }
 
 .pointer:hover {
-  color: var(--primary-color);
+  color: var(--sys-primary);
 }
 
 ::ng-deep .search-form .mat-form-field-wrapper {
diff --git a/frontend/src/app/ui/description/listing/filtering/description-filter.component.html b/frontend/src/app/ui/description/listing/filtering/description-filter.component.html
index 4279cf60f..a37ab76e6 100644
--- a/frontend/src/app/ui/description/listing/filtering/description-filter.component.html
+++ b/frontend/src/app/ui/description/listing/filtering/description-filter.component.html
@@ -115,23 +115,21 @@
 
 				<div class="col-10">
 					<div class="row align-items-center">
-						<button mat-icon-button color="primary" [disabled]="false" (click)="addReferenceType()">
+						<button mat-button color="primary" [disabled]="false" (click)="addReferenceType()">
 							<mat-icon>add_circle</mat-icon>
-						</button>
-						<span>
 							<span class="mt-1">{{'DESCRIPTION-LISTING.ACTIONS.ADD-REFERENCE-TYPE' | translate}}</span>
-						</span>
+						</button>
 					</div>
 				</div>
 			</div>
 			<!-- End of Reference Types -->
 
 			<div class="col-10 d-flex justify-content-between mb-4">
-				<button mat-button class="rounded-btn primary-inverted" (click)="resetFilters()">
+				<button mat-stroked-button color="primary" class="padded-shadow-btn" (click)="resetFilters()">
 					{{'DESCRIPTION-LISTING.FILTERS.RESET-FILTERS' | translate}} 
 				</button>
 
-				<button mat-button class="rounded-btn primary" (click)="controlModified()">
+				<button mat-flat-button color="primary" class="padded-shadow-btn" (click)="controlModified()">
 					{{'DESCRIPTION-LISTING.FILTERS.APPLY-FILTERS' | translate}}
 				</button>
 			</div>
diff --git a/frontend/src/app/ui/description/listing/filtering/description-filter.component.scss b/frontend/src/app/ui/description/listing/filtering/description-filter.component.scss
index 6136462d7..ec80a7f36 100644
--- a/frontend/src/app/ui/description/listing/filtering/description-filter.component.scss
+++ b/frontend/src/app/ui/description/listing/filtering/description-filter.component.scss
@@ -27,7 +27,7 @@
 
 .filters-title {
 	width: 93px;
-	color: var(--primary-color);
+	color: var(--sys-primary);
 	background-color: white;
 	padding: 0px 20px;
 	margin-top: -10px;
diff --git a/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss b/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss
index 39a4a692c..09bdb04b1 100644
--- a/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss
+++ b/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss
@@ -20,7 +20,7 @@ h4 > span {
 
 
 .links :hover {
-  color: var(--primary-color);
+  color: var(--sys-primary);
 }
 
 
@@ -72,26 +72,26 @@ input[type="text"] {
 }
 
 .plan-label {
-	background: var(--primary-color) 0% 0% no-repeat padding-box;
+	background: var(--sys-primary) 0% 0% no-repeat padding-box;
 	border-radius: 4px 0px;
 	opacity: 1;
 	min-width: 67px;
 	height: 37px;
-	color: var(--primary-text);
+	color: var(--sys-on-primary);
 	line-height: 2.4;
 }
 
 .description-label {
 	width: auto;
 	height: 37px;
-	background: var(--secondary-color) 0% 0% no-repeat padding-box;
+	background: var(--sys-tertiary) 0% 0% no-repeat padding-box;
 	border-radius: 4px 0px;
 	text-align: left;
 	line-height: 2.8;
 	font-size: 0.875rem;
 	font-weight: 400;
 	letter-spacing: 0px;
-	color: var(--secondary-text);
+	color: var(--sys-on-tertiary);
 }
 
 .plan-title,
@@ -170,7 +170,7 @@ input[type="text"] {
 
 .description-card-actions div:hover,
 .plan-card-actions div:hover {
-	color: var(--primary-color) !important;
+	color: var(--sys-primary) !important;
 }
 
 .plan-description-descriptions-title {
@@ -191,7 +191,7 @@ input[type="text"] {
 }
 
 .show-more:hover {
-	color: var(--primary-color) !important;
+	color: var(--sys-primary) !important;
 }
 
 
diff --git a/frontend/src/app/ui/description/overview/description-overview.component.html b/frontend/src/app/ui/description/overview/description-overview.component.html
index 22d6d5a11..e00f0c194 100644
--- a/frontend/src/app/ui/description/overview/description-overview.component.html
+++ b/frontend/src/app/ui/description/overview/description-overview.component.html
@@ -47,24 +47,24 @@
 					<div class="row mb-4 pb-3">
                         <div class="col-auto pr-0">
                             @if(isActive && (canEdit || canAnnotate) && isDraftDescription(description) && !isLocked){
-                                <button (click)="editClicked(description)" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.EDIT' | translate}}" matTooltipPosition="above" [attr.aria-label]="'DESCRIPTION-OVERVIEW.ACTIONS.EDIT' | translate">
+                                <button (click)="editClicked(description)" mat-mini-fab color="accent" class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.EDIT' | translate}}" matTooltipPosition="above" [attr.aria-label]="'DESCRIPTION-OVERVIEW.ACTIONS.EDIT' | translate">
                                     <mat-icon class="mat-mini-fab-icon">create</mat-icon>
                                 </button>
                             }@else {
                                 @if(!isPublicView){
-                                    <button (click)="editClicked(description)" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.PREVIEW' | translate}}" matTooltipPosition="above" [attr.aria-label]="'DESCRIPTION-OVERVIEW.ACTIONS.PREVIEW' | translate">
+                                    <button (click)="editClicked(description)" mat-mini-fab color="accent" class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.PREVIEW' | translate}}" matTooltipPosition="above" [attr.aria-label]="'DESCRIPTION-OVERVIEW.ACTIONS.PREVIEW' | translate">
                                         <mat-icon class="mat-mini-fab-icon">visibility</mat-icon>
                                     </button>
                                 }
                             }
                         </div>
 						<div *ngIf="canCopy" class="col-auto pr-0">
-							<button (click)="openCopyToPlanDialog()" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.CLONE' | translate}}" matTooltipPosition="above" [attr.aria-label]="'DESCRIPTION-OVERVIEW.ACTIONS.CLONE' | translate">
+							<button (click)="openCopyToPlanDialog()" mat-mini-fab color="accent" class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.CLONE' | translate}}" matTooltipPosition="above" [attr.aria-label]="'DESCRIPTION-OVERVIEW.ACTIONS.CLONE' | translate">
 								<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
 							</button>
 						</div>
 						<div *ngIf="canDelete && !isLocked" class="col-auto pr-0">
-							<button (click)="deleteClicked()" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.DELETE' | translate}}" matTooltipPosition="above" [attr.aria-label]="'DESCRIPTION-OVERVIEW.ACTIONS.DELETE' | translate">
+							<button (click)="deleteClicked()" mat-mini-fab color="accent" class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.DELETE' | translate}}" matTooltipPosition="above" [attr.aria-label]="'DESCRIPTION-OVERVIEW.ACTIONS.DELETE' | translate">
 								<mat-icon class="mat-mini-fab-icon">delete</mat-icon>
 							</button>
 						</div>
@@ -137,7 +137,7 @@
 									<ng-container *ngIf="canFinalize && isDraftDescription(description) && !isLocked">
 										<div class="row align-items-center" (click)="finalize(description)">
 											<div class="col-auto pr-0">
-												<button mat-mini-fab class="finalize-btn" [attr.aria-label]="'DESCRIPTION-OVERVIEW.ACTIONS.FINALIZE' | translate">
+												<button mat-mini-fab color="accent" class="finalize-btn" [attr.aria-label]="'DESCRIPTION-OVERVIEW.ACTIONS.FINALIZE' | translate">
 													<mat-icon class="mat-mini-fab-icon check-icon">check</mat-icon>
 												</button>
 											</div>
@@ -166,7 +166,7 @@
 									<ng-container *ngIf="fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Description).length > 0">
 										<div class="row mb-3 align-items-center">
 											<div class="col-auto pr-0">
-												<button mat-mini-fab class="frame-btn" [matMenuTriggerFor]="exportMenu" [attr.aria-label]="'DESCRIPTION-OVERVIEW.ACTIONS.EXPORT' | translate">
+												<button mat-mini-fab color="basic" class="frame-btn" [matMenuTriggerFor]="exportMenu" [attr.aria-label]="'DESCRIPTION-OVERVIEW.ACTIONS.EXPORT' | translate">
 													<mat-icon class="mat-mini-fab-icon">open_in_new</mat-icon>
 												</button>
 											</div>
diff --git a/frontend/src/app/ui/description/overview/description-overview.component.scss b/frontend/src/app/ui/description/overview/description-overview.component.scss
index fa9c157a3..a6a822b0a 100644
--- a/frontend/src/app/ui/description/overview/description-overview.component.scss
+++ b/frontend/src/app/ui/description/overview/description-overview.component.scss
@@ -13,7 +13,7 @@
   width: 2.5em;
   height: 2.5em;
   color: var(--dark-gray);
-  background-color: var(--secondary-color);
+  background-color: var(--sys-tertiary);
 }
 
 .mat-mini-fab-icon,
@@ -23,8 +23,8 @@
 
 .actions-btn:hover,
 .finalize-btn:hover {
-  background-color: var(--primary-color);
-  color: var(--primary-text);
+  background-color: var(--sys-primary);
+  color: var(--sys-on-primary);
 }
 
 .status-icon {
@@ -61,7 +61,7 @@
 .plan-btn {
   width: 35em;
   min-height: 2.3em;
-  background-color: var(--primary-color);
+  background-color: var(--sys-primary);
   border-radius: 4px;
   flex-direction: row;
   justify-content: space-between;
@@ -70,14 +70,14 @@
 
 .plan-btn,
 .plan-btn > mat-icon {
-  color: var(--primary-text);
+  color: var(--sys-on-primary);
 }
 
 .show-more-btn {
   width: 31.6em;
   padding: 0 1em;
   background-color: #ffffff00;
-  color: var(--primary-color);
+  color: var(--sys-primary);
   font-weight: 700;
 }
 
@@ -87,8 +87,6 @@
   background: #ffffff;
 }
 
-.finalize-btn {
-}
 
 .frame-btn,
 .finalize-btn {
@@ -108,7 +106,8 @@
   height: 2.9em;
   background: #ffffff;
   box-shadow: 0px 3px 6px #1e202029;
-  border: 2px solid var(--dark-gray);
+  color: #1b1b1b;
+  border: 2px solid #1b1b1b;
   border-radius: 30px;
 }
 
@@ -124,7 +123,8 @@
 .description-logo {
   width: 6em;
   height: 2.6em;
-  background: var(--secondary-color);
+  background: var(--sys-tertiary);
+  color: var(--sys-on-tertiary);
   border-radius: 4px;
   font-size: 0.875em;
 }
@@ -156,7 +156,7 @@
     color: unset;
     font-size: 0.875em;
     &:hover {
-        color: var(--primary-color);
+        color: var(--sys-primary);
     }
     padding-right: 0.5em;
     align-self: center;
@@ -182,7 +182,7 @@
 
 .plan-btn-label {
   margin-right: 1em;
-  color: var(--primary-text);
+  color: var(--sys-on-primary);
   text-align: left;
   min-width: 0;
   text-wrap: nowrap;
@@ -274,7 +274,7 @@
   justify-content: center;
 }
 .deleted-item {
-    color: var(--warning-color);
+    color: var(--sys-error);
 }
 
 .description-overview {
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 a4ddec44b..bffa10c87 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="rounded-btn neutral" (click)="cancel()">{{ 'START-NEW-DESCRIPTION-DIALOG.ACTIONS.CANCEL' | translate }}</button>
+				<button mat-button type="button" class="padded-shadow-btn neutral" (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="rounded-btn primary-inverted primary-inverted-hover" (click)="next()">{{ 'START-NEW-DESCRIPTION-DIALOG.ACTIONS.NEXT' | translate }}</button>
+				<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>
 			</div>
 		</div>
 	</div>
diff --git a/frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.scss b/frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.scss
index 5fdd12bde..0f8a1deb2 100644
--- a/frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.scss
+++ b/frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.scss
@@ -47,7 +47,7 @@
 	text-align: left;
 	text-decoration: underline;
 	letter-spacing: 0px;
-	color: var(--primary-color);
+	color: var(--sys-primary);
 	cursor: pointer;
 }
 
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 eb66bb557..53210a21a 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="rounded-btn secondary" (click)="addQuery()" [disabled]="formGroup.get('queries').disabled">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.ADD-QUERY' | translate}}</button>
+					<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>
 				</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="rounded-btn secondary" type="button" (click)="addCase(queryIndex)" [disabled]="query.disabled">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.ADD-CASE' | translate}}</button>
+							<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>
 						</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="rounded-btn secondary" type="button" (click)="addStaticItem()" [disabled]="formGroup.get('items').disabled">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.ADD-STATIC-ITEM' | translate}}</button>
+				<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>
 			</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 4eb87109d..28bd26c4d 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="rounded-btn neutral" (click)="cancel()">{{'FAQ.CLOSE' | translate}}</button></div>
+		<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>
 </div>
diff --git a/frontend/src/app/ui/misc/theme-helper.ts b/frontend/src/app/ui/misc/theme-helper.ts
index 730608e4f..d255f9c5f 100644
--- a/frontend/src/app/ui/misc/theme-helper.ts
+++ b/frontend/src/app/ui/misc/theme-helper.ts
@@ -48,11 +48,11 @@ export function generateDynamicTheme(primaryColor: string) {
 
 //     primaryPalette.error = errorPalette?.primary;
     
-//     document.documentElement.style.setProperty(`--primary-color`, primary);
+//     document.documentElement.style.setProperty(`--sys-primary`, primary);
 //     createCustomProperties(primaryPalette, 'p');
 
 //     createCustomProperties(secondaryPalette, 't');
-//     document.documentElement.style.setProperty(`--secondary-color`, secondary);
+//     document.documentElement.style.setProperty(`--sys-tertiary`, secondary);
 //     // errorPalette?.forEach((color) => {
 //     //     document.documentElement.style.setProperty(`--error-${color.tone}`, color.hex);
 //     // })
diff --git a/frontend/src/app/ui/navbar/navbar.component.html b/frontend/src/app/ui/navbar/navbar.component.html
index 65eb8d659..0805401ee 100644
--- a/frontend/src/app/ui/navbar/navbar.component.html
+++ b/frontend/src/app/ui/navbar/navbar.component.html
@@ -25,7 +25,7 @@
                 </li>
 
 				<li class="new-plan-dialog col-md-auto ml-auto navbar-item-lg">
-					<button type="button" mat-flat-button color="primary" class="rounded-btn" (click)="openNewPlanDialog()">{{ 'NAV-BAR.START-NEW-PLAN' | translate }}</button>
+					<button type="button" mat-flat-button color="primary" class="padded-shadow-btn" (click)="openNewPlanDialog()">{{ 'NAV-BAR.START-NEW-PLAN' | translate }}</button>
 				</li>
                 <li class="navbar-item-lg">
                     <button mat-icon-button 
@@ -109,7 +109,7 @@
                         </ng-container>
                     </li>
                     <li class="d-flex justify-content-center">
-                        <button type="button" mat-button color="primary" class="rounded-btn" (click)="openNewPlanDialog()">{{ 'NAV-BAR.START-NEW-PLAN' | translate }}</button>
+                        <button mat-flat-button type="button" color="primary" class="padded-shadow-btn" (click)="openNewPlanDialog()">{{ 'NAV-BAR.START-NEW-PLAN' | translate }}</button>
                     </li>
                 </ul>
 			</mat-menu>
diff --git a/frontend/src/app/ui/navbar/user-dialog/user-dialog.component.scss b/frontend/src/app/ui/navbar/user-dialog/user-dialog.component.scss
index 3b3965ab5..c9fc4e056 100644
--- a/frontend/src/app/ui/navbar/user-dialog/user-dialog.component.scss
+++ b/frontend/src/app/ui/navbar/user-dialog/user-dialog.component.scss
@@ -8,6 +8,6 @@
   text-align: left;
 }
 
-.mdc-list-item__primary-text{
+.mdc-list-item__--sys-on-primary{
     font-size: unset;
 }
\ No newline at end of file
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 c124dc4cc..7e1ce7184 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="rounded-btn neutral" (click)="cancel()">{{'PLAN-CLONE-DIALOG.ACTIONS.CANCEL' | translate}}</button></div>
-		<div class="col-auto"><button mat-button type="button" class="rounded-btn primary-inverted primary-inverted-hover" (click)="confirm()" color="accent">{{'PLAN-CLONE-DIALOG.ACTIONS.CLONE' | translate}}</button></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>
 </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 0112e1404..f6aab7e80 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="rounded-btn primary-inverted primary-inverted-hover">{{'PLAN-USER-INVITATION-DIALOG.ACTIONS.INVITE' | translate}}</button>
+			<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>
 			<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/listing/filtering/plan-filter.component.html b/frontend/src/app/ui/plan/listing/filtering/plan-filter.component.html
index 5cfca5564..ef4553a42 100644
--- a/frontend/src/app/ui/plan/listing/filtering/plan-filter.component.html
+++ b/frontend/src/app/ui/plan/listing/filtering/plan-filter.component.html
@@ -104,10 +104,10 @@
 			<!-- End of Reference Types -->
 			
 			<div class="col-10 d-flex justify-content-between mb-4">
-                <button  mat-button class="rounded-btn primary-inverted" (click)="resetFilters()">
+                <button  mat-stroked-button color="primary" class="padded-shadow-btn" (click)="resetFilters()">
 					{{'PLAN-LISTING.FILTERS.RESET-FILTERS' | translate}} 
 				</button>
-				<button  mat-button class="rounded-btn primary" (click)="controlModified()">
+				<button  mat-flat-button color="primary" class="padded-shadow-btn" (click)="controlModified()">
 					{{'PLAN-LISTING.FILTERS.APPLY-FILTERS' | translate}}
 				</button>
 			</div>
diff --git a/frontend/src/app/ui/plan/listing/filtering/plan-filter.component.scss b/frontend/src/app/ui/plan/listing/filtering/plan-filter.component.scss
index 652e3b2b9..fd6419002 100644
--- a/frontend/src/app/ui/plan/listing/filtering/plan-filter.component.scss
+++ b/frontend/src/app/ui/plan/listing/filtering/plan-filter.component.scss
@@ -43,7 +43,7 @@
 
 .filters-title {
   width: 93px;
-  color: var(--primary-color);
+  color: var(--sys-primary);
   background-color: white;
   padding: 0px 20px;
   margin-top: -10px;
diff --git a/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss b/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss
index 6445f2739..00214ca1a 100644
--- a/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss
+++ b/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss
@@ -117,12 +117,12 @@ input[type="text"] {
 }
 
 .plan-label {
-	background: var(--primary-color) 0% 0% no-repeat padding-box;
+	background: var(--sys-primary) 0% 0% no-repeat padding-box;
 	border-radius: 4px 0px;
 	opacity: 1;
 	min-width: 67px;
 	height: 37px;
-	color: var(--primary-text);
+	color: var(--sys-on-primary);
 	line-height: 2.4;
 }
 
@@ -205,7 +205,7 @@ input[type="text"] {
 
 .description-card-actions div:hover,
 .plan-card-actions div:hover {
-	color: var(--primary-color) !important;
+	color: var(--sys-primary) !important;
 }
 
 .plan-description-descriptions-title {
@@ -226,7 +226,7 @@ input[type="text"] {
 }
 
 .show-more:hover {
-	color: var(--primary-color) !important;
+	color: var(--sys-primary) !important;
 }
 
 
diff --git a/frontend/src/app/ui/plan/listing/plan-listing.component.html b/frontend/src/app/ui/plan/listing/plan-listing.component.html
index 9f17e6325..0076a4a4f 100644
--- a/frontend/src/app/ui/plan/listing/plan-listing.component.html
+++ b/frontend/src/app/ui/plan/listing/plan-listing.component.html
@@ -14,8 +14,8 @@
 			<div class="col-12">
 				<app-navigation-breadcrumb />
 			</div>
-			<div *ngIf="!versionsModeEnabled && (isLoading || hasListingItems || hasFilters) && !isPublic" class="filter-btn" [style.right]="dialog.getDialogById('filters') ? '446px' : '0px'" [style.width]="listingItems.length > 2 ? '57px' : '37px'" (click)="openFiltersDialog()">
-				<button mat-raised-button class="p-0" [matBadge]="filtersCount" [matBadgeHidden]="filtersCount === 0" matBadgePosition="before" [attr.aria-label]="'ALT-TEXT.OPEN-FILTERS' | translate">
+			<div *ngIf="!versionsModeEnabled && (isLoading || hasListingItems || hasFilters) && !isPublic" class="filter-btn" [class.right]="dialog.getDialogById('filters')" [style.width]="listingItems.length > 2 ? '57px' : '37px'" (click)="openFiltersDialog()">
+				<button mat-raised-button class="p-0 squared-btn" [matBadge]="filtersCount" [matBadgeHidden]="filtersCount === 0" matBadgePosition="before" [attr.aria-label]="'ALT-TEXT.OPEN-FILTERS' | translate">
 					<mat-icon class="mr-4 filter-icon">filter_alt</mat-icon>
 				</button>
 			</div>
@@ -38,7 +38,7 @@
 								</mat-select>
 							</mat-form-field>
 						</div>
-						<div class="col-auto order-2 order-xl-3 mb-1 pl-0">
+						<div class="col-auto order-2 order-xl-3 mb-1 pl-0 mt-2">
 							<button mat-icon-button (click)="toggleSortDirection()" [matTooltip]="sortingTooltipText" [attr.aria-label]="sortingTooltipText">
 								<mat-icon *ngIf="isAscending">keyboard_double_arrow_up</mat-icon>
 								<mat-icon *ngIf="isDescending">keyboard_double_arrow_down</mat-icon>
@@ -67,7 +67,7 @@
                         ></app-plan-listing-item-component>
                     </div>
                     <div *ngIf="hasListingItems && this.lookup?.page?.offset < this.totalCount - 1 && this.pageSize < this.totalCount - 1" class="d-flex justify-content-center pb-1">
-                        <button type="button" mat-button class="rounded-btn load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
+                        <button type="button" mat-button class="padded-shadow-btn load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
                     </div>
                 </div>
                 <div *ngIf="!hasListingItems && !hasFilters" class="col-md-12 d-flex justify-content-center pt-4 mt-4 mb-4 pb-4">
diff --git a/frontend/src/app/ui/plan/listing/plan-listing.component.scss b/frontend/src/app/ui/plan/listing/plan-listing.component.scss
index 8919db351..9e4bfd3d7 100644
--- a/frontend/src/app/ui/plan/listing/plan-listing.component.scss
+++ b/frontend/src/app/ui/plan/listing/plan-listing.component.scss
@@ -57,7 +57,7 @@
 }
 
 .more-icon :hover {
-  color: var(--primary-color);
+  color: var(--sys-primary);
 }
 
 .header-title {
@@ -148,19 +148,24 @@
   right: 0px;
   z-index: 100;
   width: 37px;
-  transition: right 0.3s;
-  transition-timing-function: ease-in-out;
+  transition: 0.3s ease-in-out;
+  -webkit-transition: 0.3s ease-in-out;
+  -moz-transition: 0.3s ease-in-out;
 
   .filter-icon {
     width: 1.5rem;
     height: 1.5rem;
     font-size: 1.5rem;
   }
+
+  &.right {
+    right: 446px;
+  }
 }
 
 .filter-btn button {
   color: white;
-  background-color: var(--primary-color);
+  background-color: var(--sys-primary);
   width: 37px;
   height: 45px;
 }
@@ -171,7 +176,7 @@
 }
 
 .search-form mat-icon {
-  color: var(--primary-color);
+  color: var(--sys-primary);
 }
 
 .empty-list {
@@ -190,7 +195,7 @@
 
 .pointer:hover,
 .zenodo-link:hover {
-  color: var(--primary-color);
+  color: var(--sys-primary);
 }
 
 ::ng-deep .search-form .mat-form-field-wrapper {
@@ -213,7 +218,7 @@
   letter-spacing: 0.02rem;
   color: var(--link-color);
   &:hover {
-    color: var(--primary-color)
+    color: var(--sys-primary)
   }
   cursor: pointer;
 }
@@ -229,7 +234,7 @@
   letter-spacing: 0.02rem;
   color: var(--link-color);
   &:hover {
-    color: var(--primary-color)
+    color: var(--sys-primary)
   }
   cursor: pointer;
 }
\ No newline at end of file
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 18ea5f0b3..e90b23923 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="rounded-btn neutral" (click)="cancel()">{{'PLAN-NEW-VERSION-DIALOG.ACTIONS.CANCEL' | translate}}</button></div>
-		<div class="col-auto"><button mat-raised-button type="button" class="rounded-btn primary-inverted primary-inverted-hover" (click)="confirm()">{{'PLAN-NEW-VERSION-DIALOG.ACTIONS.NEW-VERSION' | translate}}</button></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>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.html b/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.html
index 0f3c99e54..338eee967 100644
--- a/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.html
+++ b/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.html
@@ -16,7 +16,7 @@
 		<div class="col-12">
 			<div class="d-flex flex-wrap gap-half-rem justify-content-between align-items-center">
 				<div class="import-file">
-                    <button mat-button type="button" class="rounded-btn upload-btn d-flex flex-row align-items-center" (click)="uploadFile($event)">
+                    <button mat-button type="button" class="padded-shadow-btn upload-btn d-flex flex-row align-items-center" (click)="uploadFile($event)">
                         <mat-icon class="pr-2">file_upload</mat-icon>
                         {{ 'START-NEW-PLAN-DIALOG.IMPORT-FROM-FILE' | translate }}
                     </button>
@@ -25,7 +25,7 @@
 					{{ 'START-NEW-PLAN-DIALOG.OR' | translate }}
 				</div>
 				<div class="start-wizard">
-                    <button mat-button class="rounded-btn primary font-weight-bold d-flex flex-row align-items-center" (click)="startWizard()">
+                    <button mat-flat-button color="primary" class="padded-shadow-btn font-weight-bold d-flex flex-row align-items-center" (click)="startWizard()">
                         <mat-icon>chevron_right</mat-icon>
                         {{ 'START-NEW-PLAN-DIALOG.START-NEW-PLAN' | translate }}
                     </button>
diff --git a/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.scss b/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.scss
index 21bb812c0..9f6fe0ca6 100644
--- a/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.scss
+++ b/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.scss
@@ -58,5 +58,5 @@
 }
 
 .warn {
-	color: var(--warning-color);
+	color: var(--sys-error);
 }
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 bcb277966..5725fb624 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="rounded-btn neutral" (click)="cancel()">{{'PLAN-UPLOAD.ACTIONS.CANCEL' | translate}}</button>
+				<button mat-button type="button" class="padded-shadow-btn neutral" (click)="cancel()">{{'PLAN-UPLOAD.ACTIONS.CANCEL' | translate}}</button>
 			</div>
 			<div class="col-auto">
-				<button mat-button type="button" (click)="confirm()" [disabled]="disableConfirmButton()" class="rounded-btn primary-inverted primary-inverted-hover">{{'PLAN-UPLOAD.ACTIONS.IMPORT' | translate}}</button>
+				<button mat-button type="button" (click)="confirm()" [disabled]="disableConfirmButton()" class="padded-shadow-btn primary-inverted 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 0328d3160..56d066683 100644
--- a/frontend/src/app/ui/plan/overview/plan-overview.component.html
+++ b/frontend/src/app/ui/plan/overview/plan-overview.component.html
@@ -60,24 +60,24 @@
 					<div class="row mb-4" *ngIf="!lockStatus || canClonePlan() || (canDeletePlan() && !isLocked)">
                         <div class="col-auto pr-0">
                             @if(isActive && canEditPlan(plan) && !lockStatus){
-                                <button color="primary" [attr.aria-label]="'PLAN-OVERVIEW.ACTIONS.EDIT' | translate" (click)="editClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.EDIT' | translate}}" matTooltipPosition="above">
+                                <button mat-mini-fab color="primary" [attr.aria-label]="'PLAN-OVERVIEW.ACTIONS.EDIT' | translate" (click)="editClicked()"  class="d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.EDIT' | translate}}" matTooltipPosition="above">
                                     <mat-icon class="mat-mini-fab-icon">create</mat-icon>
                                 </button>
                             } @else {
                                 @if(!isPublicView){
-                                    <button [attr.aria-label]="'PLAN-OVERVIEW.ACTIONS.PREVIEW' | translate" (click)="editClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.PREVIEW' | translate}}" matTooltipPosition="above">
+                                    <button mat-mini-fab color="primary" [attr.aria-label]="'PLAN-OVERVIEW.ACTIONS.PREVIEW' | translate" (click)="editClicked()"  class="d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.PREVIEW' | translate}}" matTooltipPosition="above">
                                         <mat-icon class="mat-mini-fab-icon">visibility</mat-icon>
                                     </button>
                                 }
                             }
                         </div>
 						<div *ngIf="canClonePlan()" class="col-auto pr-0">
-							<button [attr.aria-label]="'PLAN-OVERVIEW.ACTIONS.CLONE' | translate" (click)="cloneClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.CLONE' | translate}}" matTooltipPosition="above">
+							<button  mat-mini-fab color="primary" [attr.aria-label]="'PLAN-OVERVIEW.ACTIONS.CLONE' | translate" (click)="cloneClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.CLONE' | translate}}" matTooltipPosition="above">
 								<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
 							</button>
 						</div>
 						<div *ngIf="canDeletePlan() && !isLocked" class="col-auto pr-0">
-							<button [attr.aria-label]="'PLAN-OVERVIEW.ACTIONS.DELETE' | translate" (click)="deleteClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.DELETE' | translate}}" matTooltipPosition="above">
+							<button mat-mini-fab color="primary" [attr.aria-label]="'PLAN-OVERVIEW.ACTIONS.DELETE' | translate" (click)="deleteClicked()"  class="d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.DELETE' | translate}}" matTooltipPosition="above">
 								<mat-icon class="mat-mini-fab-icon">delete</mat-icon>
 							</button>
 						</div>
@@ -184,7 +184,7 @@
 									<ng-container *ngIf="isDraftPlan() && canFinalizePlan() && !isLocked">
 										<div role="button" aria-describedby="{{ 'PLAN-OVERVIEW.ACTIONS.FINALIZE' | translate }}" class="row align-items-center" (click)="finalize(plan)">
 											<div class="col-auto pr-0" aria-hidden>
-												<button mat-mini-fab color="primary" aria-hidden="true">
+												<button mat-mini-fab color="basic" class="finalize-btn" aria-hidden="true">
 													<mat-icon class="mat-mini-fab-icon" aria-hidden>check</mat-icon>
 												</button>
 											</div>
@@ -214,7 +214,7 @@
 									<ng-container *ngIf="canExportPlan() && fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Plan).length > 0">
 										<div class="row mb-3 align-items-center">
 											<div class="col-auto pr-0">
-												<button [attr.aria-label]="'ALT-TEXT.OPEN-MENU' | translate" mat-mini-fab class="frame-btn" [matMenuTriggerFor]="exportMenu">
+												<button [attr.aria-label]="'ALT-TEXT.OPEN-MENU' | translate" mat-mini-fab color="basic" class="frame-btn" [matMenuTriggerFor]="exportMenu">
 													<mat-icon class="mat-mini-fab-icon">open_in_new</mat-icon>
 												</button>
 											</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 860b120d6..8bd068f3e 100644
--- a/frontend/src/app/ui/plan/overview/plan-overview.component.scss
+++ b/frontend/src/app/ui/plan/overview/plan-overview.component.scss
@@ -14,8 +14,8 @@
 .mat-mdc-mini-fab {
 	width: 2.5em;
 	height: 2.5em;
-	background-color: var(--primary-color);
-	color: var(--primary-text);
+	// background-color: var(--sys-primary);
+	// color: var(--sys-on-primary);
 }
 
 .mat-mini-fab-icon,
@@ -45,10 +45,10 @@
 
 .description-btn {
 	padding: 0 1.1em;
-	background-color: var(--secondary-color);
+	background-color: var(--sys-tertiary);
 	border-radius: 4px;
 	justify-content: space-between;
-	color: var(--secondary-text);
+	color: var(--sys-on-tertiary);
 }
 
 .description-finalized-btn {
@@ -63,7 +63,7 @@
 	width: 31.6em;
 	padding: 0 1em;
 	background-color: #ffffff00;
-	color: var(--primary-color);
+	color: var(--sys-primary);
 	font-weight: 700;
 }
 
@@ -72,10 +72,6 @@
 	color: black;
 }
 
-.finalize-btn {
-	border: 1px solid var(--primary-color);
-	color: var(--primary-color);
-}
 
 .grant-title {
 	width: 130px;
@@ -93,12 +89,18 @@
 	box-shadow: 0px 2px 6px #00000029;
 }
 
+.finalize-btn {
+    border: 1px solid var(--sys-primary);
+	color: var(--sys-primary);
+}
+
 .invite-btn {
 	width: 9.4em;
 	height: 2.9em;
 	background: #ffffff;
 	box-shadow: 0px 3px 6px #1e202029;
 	border: 2px solid #1b1b1b;
+    color: #1b1b1b;
 	border-radius: 30px;
 }
 // ********TEXT********
@@ -107,10 +109,10 @@
 	padding: 10px;
 	min-width: 4.8em;
 	height: 2.6em;
-	background: var(--primary-color);
+	background: var(--sys-primary);
 	border-radius: 4px;
 	font-size: 0.875em;
-	color: var(--primary-text);
+	color: var(--sys-on-primary);
 }
 
 .label-txt {
@@ -139,7 +141,7 @@
     color: unset;
 	font-size: 0.875em;
     &:hover {
-        color: var(--primary-color);
+        color: var(--sys-primary);
     }
 	padding-right: 0.5em;
 	align-self: center;
@@ -218,7 +220,7 @@
 }
 
 .finalize-txt {
-	color: var(--primary-color);
+	color: var(--sys-primary);
 }
 
 .frame-txt,
@@ -262,7 +264,7 @@
 }
 
 .add-description-btn:hover {
-	color: var(--primary-color) !important;
+	color: var(--sys-primary) !important;
 }
 
 .show-more-btn {
@@ -284,7 +286,7 @@
 
 .plan-btn {
   min-height: 2.3em;
-  background-color: var(--secondary-color);
+  background-color: var(--sys-tertiary);
   border-radius: 4px;
   flex-direction: row;
   justify-content: space-between;
@@ -301,7 +303,7 @@
 }
 
 .deleted-item {
-    color: var(--warning-color);
+    color: var(--sys-error);
 }
 
 .plan-overview {
diff --git a/frontend/src/app/ui/plan/plan-authors/plan-authors.component.scss b/frontend/src/app/ui/plan/plan-authors/plan-authors.component.scss
index 1252bb20f..e99ab2a84 100644
--- a/frontend/src/app/ui/plan/plan-authors/plan-authors.component.scss
+++ b/frontend/src/app/ui/plan/plan-authors/plan-authors.component.scss
@@ -28,7 +28,7 @@
     }
 
     .delete-btn:hover {
-        background-color: var(--primary-color);
-        color: var(--primary-text);
+        background-color: var(--sys-primary);
+        color: var(--sys-on-primary);
     }
 }
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 d7b704839..a0b966902 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="rounded-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="rounded-btn primary-inverted">{{'PLAN-CONTACT-PREFILL-DIALOG.ACTIONS.CONFIRM' | translate}}</button></div>
+		<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>
 </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 1e75d4cce..2efb38bb4 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="rounded-btn neutral" (click)="cancel()">{{'PLAN-DELETE-DIALOG.ACTIONS.CANCEL' | translate}}</button></div>
-		<div class="col-auto"><button mat-button type="button" (click)="confirm()" class="rounded-btn delete-inverted">{{'PLAN-DELETE-DIALOG.ACTIONS.DELETE' | translate}}</button></div>
+		<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>
 </mat-dialog-content>
diff --git a/frontend/src/app/ui/plan/plan-editor-blueprint/form-progress-indication/plan-form-progress-indication.component.scss b/frontend/src/app/ui/plan/plan-editor-blueprint/form-progress-indication/plan-form-progress-indication.component.scss
index c4146ec10..f2f036255 100644
--- a/frontend/src/app/ui/plan/plan-editor-blueprint/form-progress-indication/plan-form-progress-indication.component.scss
+++ b/frontend/src/app/ui/plan/plan-editor-blueprint/form-progress-indication/plan-form-progress-indication.component.scss
@@ -15,7 +15,7 @@
 
 //Progress bar
 ::ng-deep .mdc-linear-progress__bar-inner {
-	--mdc-linear-progress-active-indicator-color: var(--primary-color) !important;
+	--mdc-linear-progress-active-indicator-color: var(--sys-primary) !important;
 	border-radius: 20px !important;
 }
 
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 981974ff0..c1221311e 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
@@ -12,7 +12,7 @@
 							<div *ngIf="step > 0" class="ml-auto d-flex flex-row flex-wrap">
 
 								<div *ngIf="formGroup.get('id').value" class="col-auto d-flex align-items-center">
-									<button [disabled]="isDirty()" [matTooltipDisabled]="!isDirty()" mat-button class="rounded-btn primary-inverted" type="button" [matMenuTriggerFor]="exportMenu" (click)="$event.stopPropagation();" [matTooltip]="'PLAN-EDITOR.ACTIONS.EXPORT.CAN-NOT-EXPORT' | translate">
+									<button mat-raised-button [disabled]="isDirty()" [matTooltipDisabled]="!isDirty()" class="padded-shadow-btn" type="button" [matMenuTriggerFor]="exportMenu" (click)="$event.stopPropagation();" [matTooltip]="'PLAN-EDITOR.ACTIONS.EXPORT.CAN-NOT-EXPORT' | translate">
 										{{ 'PLAN-EDITOR.ACTIONS.EXPORT.EXPORT' | translate }}
 										<mat-icon [disabled]="isDirty()" style="width: 14px;" iconPositionEnd>expand_more</mat-icon>
 									</button>
@@ -26,16 +26,16 @@
 								<mat-divider *ngIf="formGroup.get('id').value && canEdit && ((!isLockedByUser && canEdit) || isLockedByUser || (hasReversableStatus() && !isLockedByUser))" [vertical]="true" class="ml-2 mr-2"></mat-divider>
 
 								<div *ngIf="isDirty()" class="col-auto d-flex align-items-center">
-									<button [disabled]="saving" type="button" mat-button class="rounded-btn discard-btn mr-3" (click)="discardChanges()">
+									<button mat-flat-button [disabled]="saving" type="button" mat-button class="padded-shadow-btn mr-3 inverted-stroked-btn" (click)="discardChanges()">
 										{{'PLAN-EDITOR.ACTIONS.DISCARD.DISCARD' | translate}}
 									</button>
 								</div>
 
 								<div class="col-auto d-flex align-items-center">
-									<button [disabled]="saving" *ngIf="isNew" mat-button type="button" (click)="formSubmit()" class="rounded-btn primary-inverted">
+									<button mat-raised-button [disabled]="saving" *ngIf="isNew" type="button" (click)="formSubmit()" class="padded-shadow-btn">
 										{{'PLAN-EDITOR.ACTIONS.SAVE' | translate}}
 									</button>
-									<button [disabled]="saving" *ngIf="!isNew && formGroup.enabled && !lockStatus && canSave" mat-raised-button class="rounded-btn primary-inverted mr-2" type="button">
+									<button [disabled]="saving" *ngIf="!isNew && formGroup.enabled && !lockStatus && canSave" mat-raised-button class="padded-shadow-btn mr-2" type="button">
 										<span class="d-flex flex-row row">
 											<span (click)="!saving?formSubmit():null" class="col">{{ 'PLAN-EDITOR.ACTIONS.SAVE' | translate }}</span>
 											<mat-divider [vertical]="true"></mat-divider>
@@ -56,11 +56,11 @@
 									</mat-menu>
 								</div>
 								<div class="col-auto d-flex align-items-center" *ngIf="canFinalize && this.hasNotDoi() && formGroup.enabled" [matTooltipDisabled]="canFinalize && formGroup.pristine" matTooltip="{{'PLAN-EDITOR.ACTIONS.FINALIZE.CAN-NOT-FINALIZE' | translate}}">
-									<button [disabled]="!formGroup.pristine" mat-button class="rounded-btn primary-inverted mr-2" type="button" (click)="finalize()">{{ 'PLAN-EDITOR.ACTIONS.FINALIZE.FINALIZE' | translate }}</button>
+									<button [disabled]="!formGroup.pristine" mat-raised-button class="padded-shadow-btn mr-2" type="button" (click)="finalize()">{{ 'PLAN-EDITOR.ACTIONS.FINALIZE.FINALIZE' | translate }}</button>
 								</div>
 								<div *ngIf="formGroup.pristine" class="col-auto d-flex align-items-center">
-									<button [disabled]="saving" *ngIf="isLocked" mat-button class="rounded-btn primary-inverted mr-2" type="button">{{ 'PLAN-EDITOR.ACTIONS.LOCKED' | translate}}</button>
-									<button [disabled]="saving" *ngIf="canReverseFinalize && this.hasNotDoi()" mat-button class="rounded-btn primary-inverted mr-2" type="button" (click)="reverseFinalization()">{{ 'PLAN-EDITOR.ACTIONS.REVERSE' | translate }}</button>
+									<button [disabled]="saving" *ngIf="isLocked" mat-raised-button class="padded-shadow-btn mr-2" type="button">{{ 'PLAN-EDITOR.ACTIONS.LOCKED' | translate}}</button>
+									<button [disabled]="saving" *ngIf="canReverseFinalize && this.hasNotDoi()" mat-raised-button class="padded-shadow-btn mr-2" type="button" (click)="reverseFinalization()">{{ 'PLAN-EDITOR.ACTIONS.REVERSE' | translate }}</button>
 								</div>
 							</div>
 						</div>
@@ -111,7 +111,7 @@
 						</div>
 						<div class="row">
 							<div class="col-5">
-								<button mat-button class="rounded-btn secondary" (click)="selectBlueprint()">
+								<button mat-flat-button color="accent" class="padded-shadow-btn" (click)="selectBlueprint()">
                                     {{'PLAN-EDITOR.STEPPER.NEXT' | translate}}
                                 </button>
 							</div>
@@ -121,7 +121,7 @@
 										<p>{{'PLAN-EDITOR.ACTIONS.OR-CONTINUE-WITH' | translate}}</p>
 									</div>
 									<div class="col-6">
-										<button mat-button class="rounded-btn secondary" style="float: right;" (click)="selectDefaultBlueprint()">{{'PLAN-EDITOR.ACTIONS.DEFAULT-BLUEPRINT' | translate}}</button>
+										<button mat-flat-button color="accent" class="padded-shadow-btn" style="float: right;" (click)="selectDefaultBlueprint()">{{'PLAN-EDITOR.ACTIONS.DEFAULT-BLUEPRINT' | translate}}</button>
 									</div>
 								</div>
 							</div>
@@ -179,13 +179,13 @@
 							<div class="col-12">
 								<div class="row justify-content-center" *ngIf="this.step !== 0">
 									<div class="col-auto mb-1">
-										<button mat-button type="button" class="rounded-btn neutral stepper mr-2" [disabled]="step === 1" (click)="previousStep()">
+										<button mat-stroked-button type="button" class="padded-shadow-btn neutral stepper mr-2" [disabled]="step === 1" (click)="previousStep()">
 											<span class="material-icons">chevron_left</span>
 											<div>{{'PLAN-EDITOR.ACTIONS.PREVIOUS-STEP' | translate}}</div>
                                         </button>
 									</div>
 									<div *ngIf="this.step < this.maxSteps" class="col-auto mb-1">
-										<button mat-button type="button" class="rounded-btn primary stepper" (click)="nextStep()">
+										<button mat-flat-button color="primary" type="button" class="padded-shadow-btn stepper" (click)="nextStep()">
 											<div>{{'PLAN-EDITOR.ACTIONS.NEXT-STEP' | translate}}</div>
 											<span class="material-icons" iconPositionEnd>chevron_right</span>
                                         </button>
diff --git a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss
index ff03e273f..6f1fc551b 100644
--- a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss
+++ b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss
@@ -21,7 +21,7 @@
 .editor-header {
     height: 64px;
     min-height: fit-content;
-    background: var(--primary-color) 0% 0% no-repeat padding-box;
+    background: var(--sys-primary) 0% 0% no-repeat padding-box;
     box-shadow: 0px 3px 6px #00000029;
     padding: 0.6rem;
     margin: 30px 0px 0px 0px;
@@ -44,12 +44,12 @@
     text-align: left;
     font-weight: 400;
     font-size: 14px;
-    color: var(--primary-text);
+    color: var(--sys-on-primary);
 }
 
 .subtitle {
     text-align: left;
-    color: var(--primary-text);
+    color: var(--sys-on-primary);
     font-weight: 700;
     font-size: 16px;
     opacity: 1;
@@ -103,8 +103,8 @@
       width: 100%;
       height: 27px;
       line-height: 27px;
-      background-color: var(--secondary-color);
-      color: var(--secondary-text);
+      background-color: var(--sys-tertiary);
+      color: var(--sys-on-tertiary);
       border-radius: 4px;
       font-weight: 400;
       font-size: 14px;
@@ -164,7 +164,7 @@ mat-icon.size-16 {
 }
   
 .add-description-btn {
-    background: var(--secondary-color) 0% 0% no-repeat padding-box;
+    background: var(--sys-tertiary) 0% 0% no-repeat padding-box;
     box-shadow: 0px 3px 6px #1e202029;
     font-weight: 500;
     white-space: normal;
@@ -210,13 +210,13 @@ mat-icon.size-16 {
 
 .changes {
     font-weight: 400;
-    color: var(--primary-text);
+    color: var(--sys-on-primary);
 }
 
 .discard-btn {
     background: transparent;
-    border: 1px solid var(--primary-text);
-    color: var(--primary-text);
+    border: 1px solid var(--sys-on-primary);
+    color: var(--sys-on-primary);
     width: 110px;
     display: flex;
     justify-content: center;
@@ -228,7 +228,7 @@ a {
 }
 
 a:hover {
-    color: var(--primary-color);
+    color: var(--sys-primary);
 }
 
 .main-content {
@@ -321,7 +321,7 @@ a:hover {
     }
 
     .input-btn :hover {
-        color: var(--primary-color) !important;
+        color: var(--sys-primary) !important;
     }
 }
 
@@ -347,7 +347,7 @@ a:hover {
 
 .drag-handle {
 	cursor: move; 
-	color: var(--primary-color);
+	color: var(--sys-primary);
 }
 .drag-handle-disabled {
 	cursor: auto; 
@@ -362,3 +362,8 @@ a:hover {
         height: fit-content !important;
     }
 }
+
+
+.mat-mdc-raised-button:not(:disabled) {
+    color: #000000;
+}
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 e29666ff7..4e1b491cb 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="rounded-btn neutral">{{ 'PLAN-FINALISE-DIALOG.ACTIONS.CANCEL' | translate }}</button>
+			<button mat-button cdkFocusInitial (click)="close()" class="padded-shadow-btn neutral">{{ 'PLAN-FINALISE-DIALOG.ACTIONS.CANCEL' | translate }}</button>
 		</div>
 		<div class="col-auto">
-			<button mat-button [disabled]="!isPlanValid || getFinalizedDescriptions().length === 0 && descriptionsToBeFinalized.length === 0" class="rounded-btn primary" (click)="onSubmit()">{{ 'PLAN-FINALISE-DIALOG.ACTIONS.SUBMIT' | translate }}</button>
+			<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>
 		</div>
 	</div>
 </div>
diff --git a/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.scss b/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.scss
index a087db7f8..50b4979a5 100644
--- a/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.scss
+++ b/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.scss
@@ -64,7 +64,7 @@
 }
 
 .descriptions span {
-	color: var(--primary-color);
+	color: var(--sys-primary);
 }
 
 .emptyList {
diff --git a/frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.scss b/frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.scss
index 88afe080a..65a3af8c0 100644
--- a/frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.scss
+++ b/frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.scss
@@ -6,7 +6,7 @@
 
 .drag-handle {
 	cursor: move; 
-	color: var(--primary-color);
+	color: var(--sys-primary);
 }
 
 .drag-handle-disabled {
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 e77baec37..4c34fa5ad 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="rounded-btn primary-inverted" mat-dialog-close>{{'COMMONS.ACTIONS.CANCEL' | translate}}</button></div>
-		<div class="col-auto"><button [disabled]="!isFormValid()" (click)="send()" mat-button class="rounded-btn primary">{{'COMMONS.ACTIONS.SAVE' | translate}}</button></div>
+		<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>
 	</mat-dialog-actions>
 </form>
diff --git a/frontend/src/app/ui/reference/reference-field/reference-field.component.scss b/frontend/src/app/ui/reference/reference-field/reference-field.component.scss
index 78a581b91..9a337b72e 100644
--- a/frontend/src/app/ui/reference/reference-field/reference-field.component.scss
+++ b/frontend/src/app/ui/reference/reference-field/reference-field.component.scss
@@ -1,6 +1,6 @@
 .insert-manually {
     text-decoration: underline;
-    color: var(--primary-color);
+    color: var(--sys-primary);
     cursor: pointer;
     font-weight: 400;
 }
diff --git a/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css b/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css
index bdedcb6c2..258f9bdb0 100644
--- a/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css
+++ b/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css
@@ -31,5 +31,5 @@
 }
 
 .option-active {
-	color: var(--primary-color);
+	color: var(--sys-primary);
 }
diff --git a/frontend/src/app/ui/sidebar/sidebar.component.scss b/frontend/src/app/ui/sidebar/sidebar.component.scss
index e58c9d113..e9d1bf77d 100644
--- a/frontend/src/app/ui/sidebar/sidebar.component.scss
+++ b/frontend/src/app/ui/sidebar/sidebar.component.scss
@@ -120,7 +120,7 @@ $mat-card-header-size: 30px !default;
     }
     
     .active a i {
-      color: var(--primary-color);
+      color: var(--sys-primary);
     }
     
     .inner-line {
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 95b069397..e9b679f52 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="rounded-btn neutral ml-auto" (click)="cancel()">{{'USER-PROFILE.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-button class="padded-shadow-btn neutral ml-auto" (click)="cancel()">{{'USER-PROFILE.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="add()" [disabled]="!form.valid">{{'USER-PROFILE.ACTIONS.ADD' | translate}}</button>
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="add()" [disabled]="!form.valid">{{'USER-PROFILE.ACTIONS.ADD' | translate}}</button>
 				</div>
 			</div>
 		</div>
diff --git a/frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.scss b/frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.scss
index af4db63bf..01e14e530 100644
--- a/frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.scss
+++ b/frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.scss
@@ -4,8 +4,8 @@
 		display: flex;
 		width: 100%;
 		height: 89px;
-		background-color: var(--primary-color);
-		color: var(--primary-text);
+		background-color: var(--sys-primary);
+		color: var(--sys-on-primary);
 		font-size: 1.25rem;
 	}
 
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 1305113ae..d4efe6a0f 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="rounded-btn primary" type="button" (click)="save()">{{'USER-PROFILE.ACTIONS.SAVE' | translate}}</button></div>
+						<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>
 					<div class="row mb-5">
 						<div class="col-12">
diff --git a/frontend/src/app/ui/user-profile/user-profile.component.scss b/frontend/src/app/ui/user-profile/user-profile.component.scss
index 408d44a16..fa969542c 100644
--- a/frontend/src/app/ui/user-profile/user-profile.component.scss
+++ b/frontend/src/app/ui/user-profile/user-profile.component.scss
@@ -51,7 +51,7 @@
 	}
 
 	.name {
-		color: var(--primary-color);
+		color: var(--sys-primary);
 		font-weight: 500;
 		font-size: 1.25rem;
 		line-height: 3rem;
@@ -62,7 +62,7 @@
 	}
 
 	.mail {
-		color: var(--primary-color);
+		color: var(--sys-primary);
 		font-weight: 500;
 	}
 
@@ -98,7 +98,7 @@
 }
 
 .vertical-line {
-	border-left: 2px solid var(--primary-color);
+	border-left: 2px solid var(--sys-primary);
 }
 
 .email-title {
@@ -115,7 +115,7 @@
 }
 
 .check-icon {
-	color: var(--primary-color);
+	color: var(--sys-primary);
 	transform: scale(0.75);
 	padding: 0.4rem;
 }
@@ -136,7 +136,7 @@
 	cursor: pointer;
 
 	mat-icon {
-		color: var(--primary-color);
+		color: var(--sys-primary);
 		display: inline-flex;
 		vertical-align: middle;
 	}
@@ -168,7 +168,7 @@
 	cursor: pointer;
 
 	mat-icon {
-		color: var(--primary-color);
+		color: var(--sys-primary);
 		display: inline-flex;
 		vertical-align: middle;
 	}
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 8c40388aa..4bd23f38d 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="rounded-btn neutral" (click)="onClose()">{{'GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.ACTIONS.CANCEL' | translate}}</button>
+			<button mat-button type="button" class="padded-shadow-btn neutral" (click)="onClose()">{{'GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.ACTIONS.CANCEL' | translate}}</button>
 		</div>
 	</div>
 </div>
diff --git a/frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.scss b/frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.scss
index d61ed0b6c..37e17873b 100644
--- a/frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.scss
+++ b/frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.scss
@@ -36,7 +36,7 @@
 	font-weight: 500;
 	font-size: 1.25rem;
 	letter-spacing: 0px;
-	color: var(--warning-color);
+	color: var(--sys-error);
 	opacity: 1;
 }
 
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 1a8433298..17b483b62 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="rounded-btn neutral" (click)="cancel()">{{ data.cancelButton }}</button></div>
-		<div *ngIf="data.isDeleteConfirmation" class="col-auto"><button mat-button type="button" (click)="confirm()" class="rounded-btn delete-inverted">{{ data.confirmButton }}</button></div>
-		<div *ngIf="!data.isDeleteConfirmation && !data.privacyPolicyNames" class="col-auto"><button mat-button type="button" (click)="confirm()" class="rounded-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="rounded-btn primary-inverted primary-inverted-hover">{{ data.confirmButton }}</button></div>
+		<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>
 </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 a8ff22378..c3712ceb9 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="rounded-btn primary" (click)="apply(i)">{{ title }}</button>
+			<button mat-button class="padded-shadow-btn primary" (click)="apply(i)">{{ title }}</button>
 		</div>
 	</ng-container>
 </mat-dialog-actions>
diff --git a/frontend/src/material-theme.scss b/frontend/src/material-theme.scss
index 2db9ba4ad..7c5c4469c 100644
--- a/frontend/src/material-theme.scss
+++ b/frontend/src/material-theme.scss
@@ -6,15 +6,11 @@
 
 
 :root {
-	--primary-color: #18488F;
+	--sys-primary: #18488F;
 	--link-color: #1E59B1;
 	--draft-color: #f16868;
-	--secondary-color: #36900B;
-    --primary-text: #ffffff;
-    --secondary-text: #000000;
-    --inverted-btn-color: #ffffff;  
     
-    --warning-color: var(--mat-form-field-error-text-color); // #cf1407 or #f44336 for  better contrast
+    --sys-error: var(--mat-form-field-error-text-color); // #cf1407 or #f44336 for  better contrast
     --gray: #707070; //previously #848484
     --light-gray: #aaaaaa;
     --dark-gray: #212121;
@@ -47,80 +43,80 @@ $angular-material-3-theme: mat.define-theme((
     @include mat.system-level-typography($angular-material-3-theme);
     // --sys-body-large: 400 1rem / 1.5rem Roboto, sans-serif;
     --sys-body-large-line-height: 1.125rem;
-    --sys-body-large-size: 1rem;
-    // --sys-body-large-tracking: 0.031rem;
+    --sys-body-large-size: 1.125rem;
+    --sys-body-large-tracking: normal;
     // --sys-body-large-weight: 400;
     // --sys-body-medium: 400 0.875rem / 1.25rem Roboto, sans-serif;
     --sys-body-medium-line-height: 1.25rem;
     --sys-body-medium-size: 0.875rem;
-    // --sys-body-medium-tracking: 0.016rem;
+    --sys-body-medium-tracking: normal;
     // --sys-body-medium-weight: 400;
     // --sys-body-small: 400 0.75rem / 1rem Roboto, sans-serif;
     --sys-body-small-line-height: 1rem;
     --sys-body-small-size: 0.75rem;
-    // --sys-body-small-tracking: 0.025rem;
+    --sys-body-small-tracking: 0.025rem;
     // --sys-body-small-weight: 400;
     // --sys-display-large: 400 3.562rem / 4rem Roboto, sans-serif;
     --sys-display-large-line-height: 4rem;
     --sys-display-large-size: 3.562rem;
-    // --sys-display-large-tracking: -0.016rem;
+    --sys-display-large-tracking: normal;
     // --sys-display-large-weight: 400;
     // --sys-display-medium: 400 2.812rem / 3.25rem Roboto, sans-serif;
     --sys-display-medium-line-height: 3.25rem;
     --sys-display-medium-size: 2.812rem;
-    // --sys-display-medium-tracking: 0rem;
+    --sys-display-medium-tracking: normal;
     // --sys-display-medium-weight: 400;
     // --sys-display-small: 400 2.25rem / 2.75rem Roboto, sans-serif;
     --sys-display-small-line-height: 2.75rem;
     --sys-display-small-size: 2.25rem;
-    // --sys-display-small-tracking: 0rem;
+    --sys-display-small-tracking: normal;
     // --sys-display-small-weight: 400;
     // --sys-headline-large: 400 2rem / 2.5rem Roboto, sans-serif;
     --sys-headline-large-line-height: 2.5rem;
     --sys-headline-large-size: 2rem;
-    // --sys-headline-large-tracking: 0rem;
+    --sys-headline-large-tracking: normal;
     // --sys-headline-large-weight: 400;
     // --sys-headline-medium: 400 1.75rem / 2.25rem Roboto, sans-serif;
     --sys-headline-medium-line-height: 2.25rem;
     --sys-headline-medium-size: 1.75rem;
-    // --sys-headline-medium-tracking: 0rem;
+    --sys-headline-medium-tracking: normal;
     // --sys-headline-medium-weight: 400;
     // --sys-headline-small: 400 1.5rem / 2rem Roboto, sans-serif;
     --sys-headline-small-line-height: 2rem;
     --sys-headline-small-size: 1.5rem;
-    // --sys-headline-small-tracking: 0rem;
+    --sys-headline-small-tracking: normal;
     // --sys-headline-small-weight: 400;
     // --sys-label-large: 500 0.875rem / 1.25rem Roboto, sans-serif;
     --sys-label-large-line-height: 1.25rem;
     --sys-label-large-size: 0.87rem;
-    // --sys-label-large-tracking: 0.006rem;
+    --sys-label-large-tracking: normal;
     // --sys-label-large-weight: 500;
     --sys-label-large-weight-prominent: 700;
     // --sys-label-medium: 500 0.75rem / 1rem Roboto, sans-serif;
     --sys-label-medium-line-height: 1rem;
     --sys-label-medium-size: 0.75rem;
-    // --sys-label-medium-tracking: 0.031rem;
+    --sys-label-medium-tracking: normal;
     // --sys-label-medium-weight: 500;
     --sys-label-medium-weight-prominent: 700;
     // --sys-label-small: 500 0.688rem / 1rem Roboto, sans-serif;
     --sys-label-small-line-height: 1rem;
     --sys-label-small-size: 0.688rem;
-    // --sys-label-small-tracking: 0.031rem;
+    --sys-label-small-tracking: normal;
     // --sys-label-small-weight: 500;
     // --sys-title-large: 400 1.375rem / 1.75rem Roboto, sans-serif;
     --sys-title-large-line-height: 1.75rem;
     --sys-title-large-size: 1.375rem;
-    // --sys-title-large-tracking: 0rem;
+    --sys-title-large-tracking: normal;
     --sys-title-large-weight: 500;
     // --sys-title-medium: 500 1rem / 1.5rem Roboto, sans-serif;
     --sys-title-medium-line-height: 1.125rem;
     --sys-title-medium-size: 1rem;
-    // --sys-title-medium-tracking: 0.009rem;
+    --sys-title-medium-tracking: normal;
     // --sys-title-medium-weight: 500;
     // --sys-title-small: 500 0.875rem / 1.25rem Roboto, sans-serif;
     --sys-title-small-line-height: 1.25rem;
     --sys-title-small-size: 0.875rem;
-    // --sys-title-small-tracking: 0.006rem;
+    --sys-title-small-tracking: normal;
     // --sys-title-small-weight: 500;
 }
 
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 b1132ffec..1bdf6ff50 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="rounded-btn secondary" (click)="cancel()" type="button">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-button class="padded-shadow-btn secondary" (click)="cancel()" type="button">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto" *ngIf="canDelete">
-					<button mat-button class="rounded-btn secondary" type="button" (click)="delete()">
+					<button mat-button class="padded-shadow-btn secondary" 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="rounded-btn secondary" (click)="formSubmit()">
+					<button mat-button class="padded-shadow-btn secondary" (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/notification-template/listing/filters/notification-template-listing-filters.component.html b/frontend/src/notification-service/ui/admin/notification-template/listing/filters/notification-template-listing-filters.component.html
index aad2e3a48..a89839a74 100644
--- a/frontend/src/notification-service/ui/admin/notification-template/listing/filters/notification-template-listing-filters.component.html
+++ b/frontend/src/notification-service/ui/admin/notification-template/listing/filters/notification-template-listing-filters.component.html
@@ -64,12 +64,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
diff --git a/frontend/src/notification-service/ui/admin/notification-template/listing/notification-template-listing.component.html b/frontend/src/notification-service/ui/admin/notification-template/listing/notification-template-listing.component.html
index 0a3b2103b..1495e11c7 100644
--- a/frontend/src/notification-service/ui/admin/notification-template/listing/notification-template-listing.component.html
+++ b/frontend/src/notification-service/ui/admin/notification-template/listing/notification-template-listing.component.html
@@ -7,7 +7,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn secondary"
+					<button mat-button class="padded-shadow-btn secondary"
 						*ngIf="authService.hasPermission(authService.permissionEnum.EditNotificationTemplate)"
 						[routerLink]="routerUtils.generateUrl(['/notification-templates/new'])">
 						<mat-icon>add</mat-icon>
diff --git a/frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.html b/frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.html
index 1a6ec100a..a0c14862c 100644
--- a/frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.html
+++ b/frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.html
@@ -96,12 +96,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>
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 77ea9e7be..b2c5e3477 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="rounded-btn primary-inverted" (click)="delete()">
+                    <button mat-button class="padded-shadow-btn primary-inverted" (click)="delete()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.RESET-TO-DEFAULT' | translate}}
 					</button>
 				</div>
 				<div class="ml-auto col-auto">
-                    <button mat-button class="rounded-btn primary" (click)="formSubmit()">
+                    <button mat-button class="padded-shadow-btn primary" (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 6143c57a2..d3366389a 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="rounded-btn delete-inverted">
+                <button mat-raised-button type="button" (click)="delete()" mat-button class="padded-shadow-btn delete-inverted">
                     {{'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="rounded-btn inverted">
+                <button mat-raised-button (click)="cancel()" type="button" mat-button class="padded-shadow-btn inverted">
                     {{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-EDITOR.ACTIONS.CANCEL' | translate}}
                 </button>
             </div>
diff --git a/frontend/src/notification-service/ui/inapp-notification/editor/inapp-notification-editor.component.scss b/frontend/src/notification-service/ui/inapp-notification/editor/inapp-notification-editor.component.scss
index 549eb087f..c8e16e239 100644
--- a/frontend/src/notification-service/ui/inapp-notification/editor/inapp-notification-editor.component.scss
+++ b/frontend/src/notification-service/ui/inapp-notification/editor/inapp-notification-editor.component.scss
@@ -11,11 +11,11 @@
 	max-width: 256px;
 	height: 40px;
 	cursor: pointer;
-	background: var(--primary-color) 0% 0% no-repeat padding-box;
+	background: var(--sys-primary) 0% 0% no-repeat padding-box;
 	box-shadow: 0px 3px 6px #1E202029;
 	border-radius: 30px;
 	border: none;
-	color: var(--primary-text);
+	color: var(--sys-on-primary);
 	opacity: 1;
 	font-size: 0.87rem;
 	padding: 0.62rem 1.87rem;
diff --git a/frontend/src/notification-service/ui/inapp-notification/listing/filters/mine-inapp-notification-listing-filters.component.html b/frontend/src/notification-service/ui/inapp-notification/listing/filters/mine-inapp-notification-listing-filters.component.html
index 428bdd472..80afc04f6 100644
--- a/frontend/src/notification-service/ui/inapp-notification/listing/filters/mine-inapp-notification-listing-filters.component.html
+++ b/frontend/src/notification-service/ui/inapp-notification/listing/filters/mine-inapp-notification-listing-filters.component.html
@@ -42,12 +42,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.FILTER.APPLY-FILTERS' | 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 ac55b19e1..4dc82308d 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="rounded-btn primary" (click)="formSubmit()">
+				<button mat-button class="padded-shadow-btn primary" (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 95b293799..aaca2aa91 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -26,15 +26,15 @@
 
 
 // :root {
-// 	--primary-color: #18488F;
+// 	--sys-primary: #18488F;
 // 	--link-color: #1E59B1;
 // 	--draft-color: #f16868;
-// 	--secondary-color: #36900B;
-//     --primary-text: #ffffff;
-//     --secondary-text: #000000;
-//     --inverted-btn-color: #ffffff;
+// 	--sys-tertiary: #36900B;
+//     --sys-on-primary: #ffffff;
+//     --sys-on-tertiary: #000000;
+//     --sys-on-primary: #ffffff;
     
-//     --warning-color: var(--mat-form-field-error-text-color); // #cf1407 or #f44336 for  better contrast
+//     --sys-error: var(--mat-form-field-error-text-color); // #cf1407 or #f44336 for  better contrast
 //     --gray: #707070; //previously #848484
 //     --light-gray: #aaaaaa;
 //     --dark-gray: #212121;
@@ -42,14 +42,14 @@
 
 // Define your theme with color palettes, typography and density
 
-// $mat-theme-primary-palette: map-merge(mat.$m2-cyan-palette, (501: var(--primary-color), contrast: (100: black, )));
+// $mat-theme-primary-palette: map-merge(mat.$m2-cyan-palette, (501: var(--sys-primary), contrast: (100: black, )));
 // $mat-theme-primary: mat.m2-define-palette($mat-theme-primary-palette,
 // 	$default: 501,
 // 	$lighter: 100,
 // 	$darker: 700,
 // 	$text: 500);
 
-// $mat-theme-accent-palette: map-merge(mat.$m2-teal-palette, (501: var(--secondary-color), contrast: (A100: white, A200: white, )));
+// $mat-theme-accent-palette: map-merge(mat.$m2-teal-palette, (501: var(--sys-tertiary), contrast: (A100: white, A200: white, )));
 // $mat-theme-accent: mat.m2-define-palette($mat-theme-accent-palette,
 // 	$default: 501,
 // 	$lighter: A100,
@@ -124,6 +124,12 @@
         border-left-color: var(--mat-standard-button-toggle-selected-state-background-color);
     }
 }
+.mat-primary.mat-mdc-outlined-button:not(:disabled){
+    border-color: var(--sys-primary);
+}
+.mat-divider.mat-divider-vertical{
+    border-right-color: rgba(0, 0, 0, .12) !important;
+}
 // $mat-accessibility-theme: mat.m2-define-light-theme((color: (primary: $mat-theme-primary,
 //         accent: $mat-theme-accent,
 //         warn: $mat-theme-warn),
@@ -161,7 +167,7 @@
 a {
     color: var(--link-color);
     &:hover {
-        color: var(--primary-color);
+        color: var(--sys-primary);
         text-decoration: none;
     }
     &.color-unset {
@@ -210,7 +216,7 @@ a {
 }
 
 .cc-btn {
-	background-color: var(--primary-color) !important;
+	background-color: var(--sys-primary) !important;
 }
 
 .snackbar-warning {
@@ -224,7 +230,7 @@ a {
 }
 
 .snackbar-error {
-	background-color:var(--warning-color);
+	background-color:var(--sys-error);
 	color: #111010;
 }
 
@@ -233,7 +239,7 @@ a {
 }
 
 .text-danger{
-    color: var(--warning-color)
+    color: var(--sys-error)
 }
 // .listing-item {
 // 	margin-top: 0.5em;
@@ -271,7 +277,7 @@ a {
 // 		border: 0.1em solid rgb(218, 227, 243);
 // 		border-radius: 10em;
 // 		background-color: rgb(236, 241, 249);
-// 		color: var(--primary-color);
+// 		color: var(--sys-primary);
 // 		text-transform: uppercase;
 // 		font-weight: 500;
 // 		max-width: 160px;
@@ -392,7 +398,7 @@ a {
 
 
 .text-primary-blue {
-	color: var(--primary-color);
+	color: var(--sys-primary);
 }
 
 
@@ -481,43 +487,51 @@ 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);
+    }
 
-    &.rounded-btn{
+    &.squared-btn {
+        border-radius: 4px;
+    }
+    &.padded-shadow-btn{
         padding: 0.62rem 1.87rem;
         min-height: 40px;
         box-shadow: 0px 3px 6px #1E202029;
     }
     &.primary {
-        background: var(--primary-color) 0% 0% no-repeat padding-box;
-        color: var(--primary-text);
+        background: var(--sys-primary) 0% 0% no-repeat padding-box;
+        color: var(--sys-on-primary);
         border: none;
         &:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
-            color: var(--primary-text);
+            color: var(--sys-on-primary);
             opacity: 0.7;
         }
     }
 
     &.secondary {
-        background: var(--secondary-color) 0% 0% no-repeat padding-box;
-        color: var(--secondary-text);
+        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(--secondary-text);
+            color: var(--sys-on-tertiary);
             opacity: 0.7;
         }
     }
 
     &.primary-inverted {
-        color: var(--primary-color);
-        border: 1px solid var(--primary-color);
-        background: var(--inverted-btn-color);
+        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(--primary-color);
+            color: var(--sys-primary);
             opacity: 0.5;
         }
         &.primary-inverted-hover:hover {
-            background-color: var(--primary-color);
-            color: var(--inverted-btn-color);
+            background-color: var(--sys-primary);
+            color: var(--sys-on-primary);
         }
     }
 
@@ -532,15 +546,15 @@ button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[
     }
 
     &.delete {
-        background: var(--warning-color);
+        background: var(--sys-error);
         border: none;
         color: #ffffff;
     }
 
     &.delete-inverted {
         background: #fafafafa;
-        border: 1px solid var(--warning-color);
-        color: var(--warning-color);
+        border: 1px solid var(--sys-error);
+        color: var(--sys-error);
     }
 
     &.import {
@@ -569,14 +583,14 @@ button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[
         min-width: 156px;
         height: 44px;
         color: #ffffff;
-        background: var(--primary-color) 0% 0% no-repeat padding-box;
-        color: var(--primary-text);
+        background: var(--sys-primary) 0% 0% no-repeat padding-box;
+        color: var(--sys-on-primary);
         box-shadow: 0px 3px 6px #1e202029;
         border-radius: 30px;
         &:hover {
-            background-color: var(--primary-text);
-            border: 1px solid var(--primary-color);
-            color: var(--primary-color);
+            background-color: var(--sys-on-primary);
+            border: 1px solid var(--sys-primary);
+            color: var(--sys-primary);
         }
     
         &.attach-file.mdc-button-disabled, &.attach-file.mdc-button-disabled:hover {
@@ -594,25 +608,14 @@ button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[
         justify-content: center;
         align-items: center;
     }
-    &.primary{
-        background-color: var(--primary-color);
-        color: var(--primary-text);
-        &:hover {
-            background-color: var(--secondary-color);
-            color: var(--secondary-text);
-        }
-    }
-
-    &.secondary{
-        background-color: var(--secondary-color);
-        
-        color: var(--secondary-text);
-        &:hover {
-            background-color: var(--primary-color);
-            color: var(--primary-text);
-        }
-    }
-    
+    &.mat-primary:not(:hover) {
+        background-color: var(--sys-primary);
+        color: var(--sys-on-primary)
+    } 
+    &.mat-accent:not(:hover) {
+        background: var(--sys-tertiary);
+        color: var(--sys-on-tertiary)
+    } 
 }
 
 .status-chip {
@@ -633,7 +636,7 @@ button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[
     }
 
     &.status-chip-error {
-        color: var(--warning-color);
+        color: var(--sys-error);
         background: #ffe6e5 0% 0% no-repeat padding-box;
     }
 }
@@ -697,7 +700,7 @@ ul.unstyled-list {
 }
 
 .mat-mdc-action-list.unset-font-size {
-    .mdc-list-item__primary-text{
+    .mdc-list-item__--sys-on-primary{
         font-size: unset;
     }
 }
@@ -727,7 +730,7 @@ ul.unstyled-list {
 
 
 // .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
-// 	background-color: var(--primary-color-3);
+// 	background-color: var(--sys-primary-3);
 // }
 // .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
 //     background-color: #b0b0b0;